/* ===== interactive demo ===== */
/* ============================================================
   DENTBOX — interactive demo (modal: catalog + search + cart + optimizer)
   Uses the page design tokens (--ink, --teal, --coral, ...).
   ============================================================ */

/* hero teaser -> demo entry */
.panel{transition:transform .2s ease, box-shadow .2s ease;}
#heroPanel{cursor:pointer;}
#heroPanel:hover{transform:translateY(-4px);}
#heroPanel:focus-visible{outline:3px solid var(--teal); outline-offset:6px;}
.demo-ribbon{display:flex; align-items:center; gap:.55em; font-family:"JetBrains Mono",monospace; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-deep); background:var(--mint); border:1px solid var(--mint-2); border-radius:9px; padding:.5em .7em; margin:0 .2rem .7rem;}
.demo-ribbon .dr-dot{width:7px; height:7px; border-radius:50%; background:var(--coral); flex:none; box-shadow:0 0 0 0 rgba(255,106,77,.6); animation:drpulse 2.2s infinite;}
@keyframes drpulse{0%{box-shadow:0 0 0 0 rgba(255,106,77,.55);}70%{box-shadow:0 0 0 7px rgba(255,106,77,0);}100%{box-shadow:0 0 0 0 rgba(255,106,77,0);}}
.demo-text-link{display:inline-flex; align-items:center; gap:.55em; background:none; border:none; cursor:pointer; font-family:"Hanken Grotesk",sans-serif; font-weight:600; font-size:.95rem; color:var(--teal-deep); padding:.4em 0; text-align:left; transition:color .15s ease;}
.demo-text-link:hover{color:var(--ink);}
.demo-text-link .dtl-play{width:24px; height:24px; border-radius:50%; background:var(--coral); color:var(--ink); display:grid; place-items:center; font-size:.62rem; flex:none;}

/* overlay + modal shell */
body.demo-lock{overflow:hidden;}
.demo-overlay{position:fixed; inset:0; z-index:200; display:none; align-items:stretch; justify-content:center; background:rgba(4,24,30,.55); backdrop-filter:blur(4px); padding:0;}
.demo-overlay.open{display:flex;}
.demo-modal{background:var(--canvas); width:100%; max-width:1140px; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow-lg); max-height:100%; animation:demoIn .28s cubic-bezier(.2,.7,.2,1);}
@keyframes demoIn{from{opacity:0; transform:translateY(14px) scale(.985);}to{opacity:1; transform:none;}}
@media (min-width:760px){.demo-overlay{align-items:center; padding:clamp(16px,3vw,40px);} .demo-modal{border-radius:22px; max-height:92vh;}}

.demo-head{display:flex; align-items:center; gap:.9rem; padding:1rem 1.2rem; border-bottom:1px solid var(--line); background:var(--surface); flex:none;}
.demo-head .dh-brand{display:flex; align-items:center; gap:.55em; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.12rem; color:var(--ink);}
.demo-head .dh-brand .mark{width:26px; height:26px;}
.demo-badge{font-family:"JetBrains Mono",monospace; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--coral); background:#FFEDE8; border:1px solid #FFD9CF; padding:.4em .6em; border-radius:7px; white-space:nowrap;}
.demo-close{margin-left:auto; width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; display:grid; place-items:center; transition:background .15s ease, border-color .15s ease;}
.demo-close:hover{background:var(--canvas); border-color:var(--ink);}
.demo-close svg{width:18px; height:18px;}

/* mobile tabs */
.demo-tabs{display:flex; gap:.4rem; padding:.7rem 1.2rem; background:var(--surface); border-bottom:1px solid var(--line); flex:none;}
.demo-tab{flex:1; font-family:"Hanken Grotesk",sans-serif; font-weight:600; font-size:.92rem; color:var(--muted); background:var(--canvas); border:1px solid var(--line); border-radius:100px; padding:.55em 1em; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.5em;}
.demo-tab.on{background:var(--ink); color:#fff; border-color:var(--ink);}
.demo-tab .tcount{font-family:"JetBrains Mono",monospace; font-size:.72rem; background:var(--coral); color:var(--ink); border-radius:100px; min-width:20px; height:20px; padding:0 .4em; display:inline-grid; place-items:center;}
.demo-tab.on .tcount{background:var(--coral);}
@media (min-width:760px){.demo-tabs{display:none;}}

/* body: catalog | cart */
.demo-body{flex:1; min-height:0; display:grid; grid-template-columns:1fr; overflow:hidden;}
@media (min-width:760px){.demo-body{grid-template-columns:1.55fr 1fr;}}
.catalog,.cart{min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.catalog{padding:1.1rem 1.2rem 2rem;}
.cart{background:var(--surface); padding:1.1rem 1.2rem 2rem;}
@media (min-width:760px){.cart{border-left:1px solid var(--line);}}
@media (max-width:759px){.demo-body[data-tab="catalog"] .cart{display:none;} .demo-body[data-tab="cart"] .catalog{display:none;}}

/* search + categories */
.demo-search{position:sticky; top:0; z-index:3; background:var(--canvas); padding-bottom:.7rem; margin:-.2rem 0 0;}
.ds-field{display:flex; align-items:center; gap:.6em; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:.7em .9em;}
.ds-field svg{width:18px; height:18px; color:var(--muted); flex:none;}
.ds-field input{flex:1; border:none; outline:none; background:none; font-family:"Hanken Grotesk",sans-serif; font-size:1rem; color:var(--ink); min-width:0;}
.ds-field input::placeholder{color:var(--muted);}
.ds-clear{border:none; background:none; cursor:pointer; color:var(--muted); display:none; padding:.2em;}
.ds-field.has-val .ds-clear{display:inline-flex;}
.cats{display:flex; gap:.45rem; overflow-x:auto; padding:.7rem 0 .2rem; scrollbar-width:none;}
.cats::-webkit-scrollbar{display:none;}
.cat-chip{white-space:nowrap; font-weight:600; font-size:.86rem; color:var(--body); background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:.5em .95em; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;}
.cat-chip:hover{border-color:var(--teal);}
.cat-chip.on{background:var(--teal-deep); color:#fff; border-color:var(--teal-deep);}

/* product rows */
.demo-list{display:flex; flex-direction:column; gap:.6rem;}
.demo-prod{border:1px solid var(--line); border-radius:13px; background:var(--surface); overflow:hidden;}
.dp-head{display:flex; align-items:center; gap:.8rem; padding:.85rem .95rem;}
.dp-toggle{display:flex; align-items:center; gap:.8rem; flex:1; background:none; border:none; cursor:pointer; text-align:left; padding:0; min-width:0; font-family:inherit;}
.dp-info{min-width:0; flex:1;}
.dp-name{font-weight:700; color:var(--ink); font-size:.99rem; letter-spacing:-0.01em; line-height:1.25;}
.dp-sub{display:flex; gap:.55em; align-items:center; margin-top:.25rem; flex-wrap:wrap;}
.dp-unit{font-size:.8rem; color:var(--muted);}
.dp-cat{font-family:"JetBrains Mono",monospace; font-size:.6rem; letter-spacing:.04em; text-transform:uppercase; color:var(--teal-deep); background:var(--mint); padding:.25em .5em; border-radius:6px;}
.dp-price{text-align:right; flex:none;}
.dp-best{font-family:"JetBrains Mono",monospace; font-weight:600; font-size:1rem; color:var(--ink); white-space:nowrap;}
.dp-best small{display:block; font-family:"Hanken Grotesk",sans-serif; font-weight:500; font-size:.7rem; color:var(--muted); letter-spacing:0;}
.dp-caret{width:26px; height:26px; border-radius:8px; border:1px solid var(--line); display:grid; place-items:center; color:var(--muted); flex:none; transition:transform .2s ease;}
.demo-prod.open .dp-caret{transform:rotate(180deg);}
.dp-caret svg{width:15px; height:15px;}
.dp-add{flex:none;}
.btn-add{display:inline-flex; align-items:center; gap:.4em; font-family:"Hanken Grotesk",sans-serif; font-weight:600; font-size:.86rem; color:var(--ink); background:var(--coral); border:none; border-radius:100px; padding:.5em .9em; cursor:pointer; transition:background .15s ease, transform .15s ease;}
.btn-add:hover{background:var(--coral-hi); transform:translateY(-1px);}
.btn-add svg{width:15px; height:15px;}
.stepper{display:inline-flex; align-items:center; gap:.1em; background:var(--canvas); border:1px solid var(--line); border-radius:100px; padding:3px;}
.stepper button{width:28px; height:28px; border-radius:50%; border:none; background:var(--surface); color:var(--ink); cursor:pointer; display:grid; place-items:center; font-size:1rem; line-height:1; transition:background .15s ease;}
.stepper button:hover{background:var(--mint);}
.stepper button svg{width:14px; height:14px;}
.stepper .q{font-family:"JetBrains Mono",monospace; font-weight:600; font-size:.92rem; color:var(--ink); min-width:26px; text-align:center;}

/* expandable offers (price comparison) */
.dp-offers{display:none; padding:0 .95rem .9rem; border-top:1px solid var(--line-soft);}
.demo-prod.open .dp-offers{display:block;}
.dp-offers .ol{display:flex; flex-direction:column; gap:.4rem; padding-top:.8rem;}
.offer{display:grid; grid-template-columns:1fr auto; align-items:center; gap:.6em; padding:.6em .75em; border:1px solid var(--line-soft); border-radius:10px;}
.offer .os{display:flex; align-items:center; gap:.6em;}
.offer .odot{width:8px; height:8px; border-radius:50%; flex:none;}
.odot.ok{background:var(--teal);} .odot.low{background:#E9A23B;}
.offer .osn{font-weight:600; color:var(--ink); font-size:.9rem;}
.offer .osm{font-size:.74rem; color:var(--muted);}
.offer .op{font-family:"JetBrains Mono",monospace; font-weight:600; font-size:.92rem; color:var(--ink);}
.offer.best{background:var(--mint); border-color:var(--mint-2); border-left:3px solid var(--teal);}
.offer.best .op{color:var(--teal-deep);}
.offer .btag{font-family:"JetBrains Mono",monospace; font-size:.56rem; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--teal-deep); padding:.28em .45em; border-radius:5px; margin-left:.45em;}

/* cart */
.cart-title{display:flex; align-items:center; justify-content:space-between; gap:1em; margin-bottom:1rem;}
.cart-title h3{font-size:1.18rem;}
.cart-count{font-family:"JetBrains Mono",monospace; font-size:.74rem; color:var(--teal-deep); background:var(--mint); padding:.35em .6em; border-radius:7px;}
.cart-empty{text-align:center; padding:2.6rem 1rem; color:var(--muted);}
.cart-empty .ce-ic{width:54px; height:54px; border-radius:14px; background:var(--canvas); display:grid; place-items:center; margin:0 auto 1rem; color:var(--muted);}
.cart-empty .ce-ic svg{width:26px; height:26px;}
.cart-empty b{display:block; color:var(--ink); margin-bottom:.3rem; font-family:"Bricolage Grotesque",sans-serif;}
.cart-lines{display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.2rem;}
.cart-line{display:flex; align-items:center; gap:.7em; padding:.7em .2em;}
.cl-info{flex:1; min-width:0;}
.cl-name{font-weight:600; color:var(--ink); font-size:.93rem; line-height:1.25;}
.cl-meta{font-size:.76rem; color:var(--muted); font-family:"JetBrains Mono",monospace; margin-top:.15rem;}
.cl-line{font-family:"JetBrains Mono",monospace; font-weight:600; font-size:.9rem; color:var(--ink); white-space:nowrap;}
.cl-rm{border:none; background:none; color:var(--muted); cursor:pointer; padding:.3em; border-radius:7px;}
.cl-rm:hover{color:var(--coral); background:#FFEDE8;}
.cl-rm svg{width:16px; height:16px;}

.cart-summary{border-top:1px solid var(--line); padding-top:1rem;}
.cs-row{display:flex; justify-content:space-between; align-items:center; font-size:.92rem; color:var(--body); margin-bottom:.55rem;}
.cs-row .v{font-family:"JetBrains Mono",monospace; color:var(--ink);}
.cs-row.muted{color:var(--muted);} .cs-row.muted .v{color:var(--muted);}
.cs-total{display:flex; justify-content:space-between; align-items:baseline; padding-top:.7rem; margin-top:.4rem; border-top:1px solid var(--line-soft);}
.cs-total .l{font-weight:700; color:var(--ink); font-family:"Bricolage Grotesque",sans-serif; font-size:1.05rem;}
.cs-total .v{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.4rem; color:var(--ink); letter-spacing:-0.02em;}
.btn-optimize{width:100%; justify-content:center; margin-top:1.1rem;}
.btn-optimize svg{width:18px; height:18px;}
.btn-optimize[disabled]{opacity:.45; cursor:not-allowed; box-shadow:none;}
.opt-hint{text-align:center; font-size:.78rem; color:var(--muted); margin-top:.7rem;}

/* optimizer result */
.savings-banner{display:flex; align-items:center; gap:.85em; background:linear-gradient(135deg, var(--mint), #DCF1EB); border:1px solid var(--mint-2); border-radius:14px; padding:1.1rem; margin-bottom:1.2rem;}
.savings-banner .sb-ic{width:42px; height:42px; border-radius:11px; background:var(--teal-deep); color:#fff; display:grid; place-items:center; flex:none;}
.savings-banner .sb-ic svg{width:22px; height:22px;}
.savings-banner .sb-big{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; color:var(--ink); font-size:1.15rem; line-height:1.2; letter-spacing:-0.01em;}
.savings-banner .sb-big em{font-style:normal; color:var(--teal-deep);}
.savings-banner .sb-sub{font-size:.84rem; color:var(--teal-deep); margin-top:.15rem;}
.sg-label{font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.7rem;}
.sup-group{border:1px solid var(--line); border-radius:12px; margin-bottom:.7rem; overflow:hidden;}
.sg-head{display:flex; align-items:center; justify-content:space-between; gap:.7em; padding:.75em .9em; background:var(--canvas); border-bottom:1px solid var(--line-soft);}
.sg-name{display:flex; align-items:center; gap:.55em; font-weight:700; color:var(--ink); font-size:.95rem;}
.sg-name .sgn-ic{width:24px; height:24px; border-radius:7px; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:"JetBrains Mono",monospace; font-size:.68rem; flex:none;}
.sg-deliv{font-family:"JetBrains Mono",monospace; font-size:.68rem; color:var(--teal-deep); background:var(--mint); padding:.3em .55em; border-radius:6px;}
.sg-items{padding:.5em .9em;}
.sg-item{display:flex; justify-content:space-between; gap:.7em; padding:.4em 0; font-size:.88rem; color:var(--body);}
.sg-item .sgi-q{color:var(--muted); font-family:"JetBrains Mono",monospace; font-size:.78rem;}
.sg-item .sgi-p{font-family:"JetBrains Mono",monospace; color:var(--ink); white-space:nowrap;}
.sg-foot{display:flex; justify-content:space-between; padding:.6em .9em; border-top:1px solid var(--line-soft); font-size:.85rem;}
.sg-foot .sgf-l{color:var(--muted);}
.sg-foot .ship-free{color:var(--teal-deep); font-weight:600;}
.sg-foot .v{font-family:"JetBrains Mono",monospace; color:var(--ink);}
.opt-total{display:flex; justify-content:space-between; align-items:baseline; padding:1rem .2rem .2rem; margin-top:.4rem; border-top:1px solid var(--line);}
.opt-total .l{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; color:var(--ink); font-size:1.05rem;}
.opt-total .v{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.5rem; color:var(--teal-deep); letter-spacing:-0.02em;}
.beforeafter{display:flex; gap:.6rem; margin-top:1rem;}
.ba-card{flex:1; border:1px solid var(--line); border-radius:11px; padding:.85em; text-align:center;}
.ba-card .ba-t{font-family:"JetBrains Mono",monospace; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem;}
.ba-card .ba-v{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; color:var(--ink); font-size:1.05rem;}
.ba-card .ba-d{font-size:.74rem; color:var(--muted); margin-top:.15rem;}
.ba-card.after{background:var(--mint); border-color:var(--mint-2);}
.ba-card.after .ba-v{color:var(--teal-deep);}
.modify-btn{width:100%; justify-content:center; margin-top:1.1rem;}
.demo-foot-note{font-size:.74rem; color:var(--muted); text-align:center; padding:.4rem 1.2rem 1.1rem; background:var(--surface); border-top:1px solid var(--line-soft); flex:none;}