.products-section{padding:80px 0;scroll-margin-top:100px}.products-section h2{font-size:clamp(30px,4vw,52px);line-height:1.12;margin:18px 0}.products-intro{max-width:680px;color:#bdbbb5;line-height:1.7}.product-cards{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:32px}.product-card{padding:0;min-width:0;border:0;background:none}
.product-preview {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: #fff;
  text-decoration: none;
  background: #11120e;
  border: 1px solid #d4af3730;
  border-radius: 16px;
  overflow: hidden;
}
.product-preview--friseur { --preview-background: #000; }
.product-preview--gartenbau { --preview-background: #10110c; }
.product-preview-media {
  position: relative;
  aspect-ratio: 1274 / 874;
  overflow: hidden;
  background: var(--preview-background);
}
.product-scene {
  position: absolute;
  inset: 0;
  background: url("/assets/products/contexts.png") left center / 200% auto;
  transition: opacity .65s ease, transform .9s ease;
}
.product-preview--gartenbau .product-scene { background-position: right center; }
.product-preview img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  border: 0;
  opacity: 0;
  transition: opacity .65s ease;
  background: var(--preview-background);
}
.product-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
}
.product-card-copy .product-category {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #e5ce98;
}
.product-card h3 { font-size: clamp(25px, 2.5vw, 34px); line-height: 1.15; margin: 8px 0; }
.product-card p { max-width: 390px; color: #f0ede7; font-size: 15px; line-height: 1.55; margin: 0 0 16px; }
.product-card-copy .product-demo-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 8px 12px;
  border: 1px solid #d4af3766;
  border-radius: 8px;
  color: #f5dfaf;
  font-size: 14px;
  font-weight: 600;
}
.product-demo-action span { color: inherit; font-size: inherit; }
.product-preview:focus-visible { outline: 2px solid #e3c784; outline-offset: 4px; }
.product-preview:focus-visible img, .product-preview.is-revealed img { opacity: 1; }
.product-preview:focus-visible .product-scene, .product-preview.is-revealed .product-scene { opacity: 0; }
.products-note { font-size: 13px; color: #aaa69d; margin-top: 20px; }
.product-bar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:12px 20px;border-bottom:1px solid #383224;background:#0c0c0b}.product-bar a{color:#c5bca8;text-decoration:none;display:inline-block;padding:9px 13px;border-radius:8px}.product-bar nav{display:flex;gap:8px}.product-bar [aria-current]{color:#f5dfaf;background:#30281a}.product-bar>span{margin-left:auto;font-size:12px;color:#aaa69d}.product-bar{position:relative;z-index:1000;font:14px system-ui,sans-serif;color:#eee;box-sizing:border-box;width:100%}.product-bar a{white-space:nowrap}.product-bar a:focus-visible{outline:2px solid #e3c784;outline-offset:4px}.product-bar+.dashboard-demo-note{margin-top:12px}@media(hover:hover){.product-preview:hover img{opacity:1}.product-preview:hover .product-scene{opacity:0;transform:scale(1.035)}}@media(max-width:640px){.product-cards{grid-template-columns:1fr;gap:24px}.product-card-copy{padding:18px}.product-card p{font-size:13px;line-height:1.5}.products-section{padding:48px 0}.product-bar{gap:4px;padding:8px}.product-bar>span{width:100%;margin:0 12px}.product-bar a{padding:8px}.product-bar nav{gap:3px}}@media(prefers-reduced-motion:reduce){.product-preview img,.product-scene{transition:none}}

.product-bar [data-demo-reset]{margin-left:auto;flex-shrink:0;border:1px solid #bda45a55;border-radius:999px;background:#bda45a12;color:#dfca91;padding:9px 13px;font:inherit;font-size:11px;cursor:pointer}.product-bar [data-demo-reset]:hover{background:#bda45a24}@media(max-width:640px){.product-bar [data-demo-reset]{padding:7px 9px;font-size:10px}}

/* Secondary demo tools share one entry; their original controls stay connected. */
.product-bar .demo-tools{position:relative;margin-left:0;flex-shrink:0}
.product-bar [data-feedback-slot]{margin-left:auto}
.product-bar .demo-tools>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;border:1px solid #bda45a45;border-radius:999px;background:#bda45a0c;color:#d5c7a6;padding:8px 12px;min-height:36px;box-sizing:border-box;font:11px/18px system-ui,sans-serif;white-space:nowrap}
.product-bar .demo-tools>summary::after{content:'⌄';font-size:14px}
.product-bar .demo-tools>summary::-webkit-details-marker{display:none}
.product-bar .demo-tools>summary:focus-visible{outline:2px solid #e3c784;outline-offset:3px}
.product-bar .demo-tools-panel{position:absolute;top:calc(100% + 10px);right:0;width:min(300px,calc(100vw - 48px));max-height:calc(100dvh - 130px);overflow:auto;overscroll-behavior:contain;display:grid;gap:14px;padding:16px;box-sizing:border-box;border:1px solid #bda45a45;border-radius:16px;background:#10110efc;box-shadow:0 16px 44px #0008;color:#ded7c7;z-index:1100;text-align:left}
.product-bar .demo-tools-panel button{width:100%;min-height:44px;margin:0;border:1px solid #bda45a40;border-radius:10px;background:#bda45a0c;color:#e1cf9d;padding:10px 12px;font:12px/1.5 system-ui,sans-serif;text-align:left;cursor:pointer}
.product-bar .demo-tools-panel button:disabled{opacity:.5;cursor:default}
.product-bar .demo-tools-panel button:focus-visible,.product-bar .demo-tools-panel a:focus-visible{outline:2px solid #e3c784;outline-offset:2px}
.product-bar .demo-tools-panel .dashboard-demo-note{position:static;display:grid;width:auto;margin:0;padding:0;border:0;gap:8px;min-height:0;background:none;color:#bdb6a6;font:12px/1.6 system-ui,sans-serif;white-space:normal;text-align:left}
.product-bar .demo-tools-panel .dashboard-demo-note a{padding:6px 0;white-space:normal}
.product-bar .demo-tools-panel .dashboard-demo-note [hidden]{display:none!important}
.product-bar .demo-simulation-tools{display:grid;gap:8px;border-top:1px solid #bda45a25;padding-top:14px;margin:0}
.product-bar .demo-simulation-tools h2{margin:0;font:500 12px/1.5 system-ui,sans-serif;color:#ede5d2}
.product-bar .demo-simulation-tools p{margin:0;color:#bdb6a6;font:11px/1.6 system-ui,sans-serif}
@media(max-width:640px){.product-bar>a{font-size:11px;padding-inline:6px;min-height:36px;box-sizing:border-box;display:inline-flex;align-items:center}.product-bar nav{width:100%;justify-content:space-between;min-width:0}.product-bar nav a{font-size:11px;padding-inline:6px}.product-bar .demo-tools>summary{font-size:10px;padding:7px 8px;gap:4px}.product-bar .demo-tools>summary::after{font-size:12px}}

/* Same dialog material for the salon product preview only. */
body[data-role="demo"] .appointment-detail-overlay{background:rgba(0,0,0,.24);backdrop-filter:blur(2px)}
body[data-role="demo"] .appointment-detail-card{background:rgba(20,22,18,.76);border:0;backdrop-filter:blur(18px) saturate(115%);-webkit-backdrop-filter:blur(18px) saturate(115%);box-shadow:0 26px 90px #0006}
@media(prefers-reduced-transparency:reduce){body[data-role="demo"] .appointment-detail-card{background:#141612;backdrop-filter:none}}

body[data-role="demo"] .appointment-detail-card{border-radius:32px}body[data-role="demo"] .appointment-detail-actions button{border-radius:999px}

.product-preview-mosaic {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
  image-rendering: pixelated;
  pointer-events: none;
}
.product-preview.is-pixelating img,
.product-preview.is-pixelating .product-scene {
  opacity: 0;
  transition: none;
}
.product-preview.is-revealed img { transition: none; }
@media (max-width: 640px) {
  .product-preview:hover:not(.is-revealed):not(.is-pixelating):not(:focus-visible) img { opacity: 0; }
  .product-preview:hover:not(.is-revealed):not(.is-pixelating):not(:focus-visible) .product-scene { opacity: 1; transform: none; }
}
@media (max-width: 360px) {
  .product-bar nav a { font-size: 10px; padding-inline: 5px; }
}

@media (hover: hover) and (min-width: 641px) and (prefers-reduced-motion: no-preference) {
  .product-preview:not(:focus-visible) :is(img, .product-scene) { transition-duration: 180ms; }
}
.product-preview:focus-visible :is(img,.product-scene) { transition-delay: 0s; }
@media (min-width: 769px) and (max-width: 1100px) {
  .product-bar ~ .nav-orb { top: 122px; }
  .product-bar ~ .dashboard-sidebar { top: 176px !important; }
}

/* Shared navigation for the two public product demos. */
.product-bar.product-bar--grouped {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  justify-items: center;
  gap: 9px;
  padding: 10px 20px 12px;
  background: radial-gradient(ellipse at top,#262217 0%,#10110e 58%,#0c0d0b 100%);
}
.product-bar--grouped .product-norvex { display: block; padding: 0; }
.product-bar--grouped .product-norvex img { display: block; width: clamp(86px,11vw,112px); height: 70px; object-fit: contain; }
.product-bar--grouped .product-bar-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  width: 100%;
}
.product-bar.product-bar--grouped nav {
  width: auto;
  max-width: 100%;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
}
.product-bar--grouped .product-nav-group {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid #bda45a35;
  border-radius: 12px;
}
.product-bar--grouped .product-nav-label { color: #dbc58f; font-size: 11px; font-weight: 600; }
.product-bar--grouped .product-nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.product-bar--grouped nav a { padding: 8px clamp(6px,1.25vw,13px); border-radius: 8px; }
.product-bar--grouped nav a:hover { color: #f5dfaf; background-color: #30281a; }
.product-bar--grouped .product-bar-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 8px;
}
.product-bar--grouped .product-bar-actions :is([data-feedback-slot],[data-demo-reset]) { margin: 0; }
.product-bar--grouped .product-bar-actions :is([data-demo-reset],.feedback-trigger,.demo-tools > summary) {
  min-height: 44px;
  padding-inline: 13px;
  color: #dfd4ba;
  font-size: 12px;
  border-color: #bda45a45;
  background: #bda45a0c;
  white-space: nowrap;
}
.product-bar--grouped .product-bar-actions :is([data-demo-reset],.feedback-trigger,.demo-tools > summary):hover { background: #bda45a24; }
.product-bar--grouped .product-bar-actions [data-demo-reset]:focus-visible { outline: 2px solid #e3c784; outline-offset: 3px; }
@media(max-width:680px) {
  .product-bar.product-bar--grouped { gap: 7px; padding: 6px 10px 9px; }
  .product-bar--grouped .product-norvex img { height: 56px; }
  .product-bar--grouped .product-bar-controls { gap: 8px; }
  .product-bar--grouped .product-bar-actions { position: relative; }
  .product-bar--grouped .demo-tools { position: static; }
  .product-bar--grouped .demo-tools-panel { left: 50%; right: auto; transform: translateX(-50%); }
}