/* Package 2 kiosk modules: attract mode, staff mode, AI consent, voice,
   live AI, highlights. Chromium 108 baseline: no color-mix(), no nesting. */

/* ---------- Highlight badges ---------- */
.hl-badge{position:absolute;top:1rem;left:1rem;z-index:2;padding:.35rem .9rem;border-radius:999px;background:var(--accent);color:var(--ink);font:700 .95rem/1.2 var(--font-body);letter-spacing:.04em}
.hl-badge.promo{background:var(--primary);color:var(--on-primary)}
.card.hl{box-shadow:0 0 0 .2rem var(--accent),0 .1rem .5rem rgba(20,10,40,.07)}

/* ---------- AI consent ---------- */
.kx-consent .sheet{justify-items:stretch}
.kx-c-ico{display:grid;place-items:center;width:5rem;height:5rem;border-radius:1.4rem;background:#fff;color:var(--primary);margin:0 auto}
.kx-c-ico .i{width:2.6rem;height:2.6rem}
.kx-consent h2{text-align:center}
.kx-consent .lead{max-width:none}

/* ---------- Voice ---------- */
.kx-voice .sheet{justify-items:center;text-align:center}
.kx-wave{display:flex;align-items:center;gap:.6rem;height:7rem}
.kx-wave i{display:block;width:1rem;height:100%;border-radius:999px;background:var(--primary);transform:scaleY(.2);transition:transform .08s linear}
.kx-v-bar{width:100%;height:.5rem;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden}
.kx-v-bar i{display:block;height:100%;width:0;background:var(--accent)}
.kx-voice.thinking .kx-v-bar{display:none}
.kx-voice.thinking .kx-wave i{animation:kxthink 1.2s ease-in-out infinite;background:var(--accent)}
.kx-voice.thinking .kx-wave i:nth-child(2){animation-delay:.1s}.kx-voice.thinking .kx-wave i:nth-child(3){animation-delay:.2s}
.kx-voice.thinking .kx-wave i:nth-child(4){animation-delay:.3s}.kx-voice.thinking .kx-wave i:nth-child(5){animation-delay:.4s}
.kx-voice.thinking .kx-wave i:nth-child(6){animation-delay:.5s}.kx-voice.thinking .kx-wave i:nth-child(7){animation-delay:.6s}
.kx-voice.thinking .kx-wave i:nth-child(8){animation-delay:.7s}.kx-voice.thinking .kx-wave i:nth-child(9){animation-delay:.8s}
@keyframes kxthink{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
.kx-voice.thinking .kx-v-t{background:linear-gradient(90deg,var(--ink) 0%,var(--accent) 50%,var(--ink) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:kxshine 1.8s linear infinite}
@keyframes kxshine{to{background-position:-200% 0}}
.mic.on{background:var(--accent);color:var(--ink);animation:pulse 1.4s ease infinite}

/* ---------- Attract mode ---------- */
.kx-attract{position:fixed;inset:0;z-index:60;background:var(--primary);color:var(--on-primary);overflow:hidden;cursor:pointer}
.kx-stage{position:absolute;inset:0}
.kx-s{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:2rem;padding:6rem 4rem 12rem;text-align:center;opacity:0;transition:opacity .8s ease;background-size:cover;background-position:center}
.kx-s.in{opacity:1}
.kx-s .lead{color:inherit;opacity:.85;max-width:30ch;font-size:2rem}
.kx-s h1{font-size:5.4rem}.kx-s h2{font-size:3.6rem}
.kx-s .eyebrow{color:var(--accent);font-size:1.3rem}
.kx-welcome{padding:0}
.kx-veil{display:grid;align-content:center;justify-items:center;gap:2rem;width:100%;height:100%;padding:6rem 4rem 12rem;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45))}
.kx-welcome:not([style]) .kx-veil{background:none}
.kx-logo{max-width:60%;max-height:16rem;object-fit:contain}
.kx-photo{padding:0}
.kx-cap{position:absolute;left:3rem;right:3rem;bottom:13rem;font:700 2.4rem/1.2 var(--font-head);text-shadow:0 .1rem 1rem rgba(0,0,0,.5)}
.has-ov .kx-cap{top:2.8rem;left:2.8rem;right:auto;bottom:auto;max-width:28rem;padding:.65rem 1.25rem;border-radius:999px;background:rgba(20,15,34,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);font:700 1.35rem/1.25 var(--font-head);text-align:left;text-shadow:none}
.has-ov.ov-top .kx-cap{top:auto;bottom:12rem;left:2.8rem}
.kx-media{padding:0;background:#000}
.kx-media video{width:100%;height:100%;object-fit:cover}
.kx-ov{position:absolute;z-index:4;display:flex;align-items:center;gap:1.3rem;max-width:min(36.5rem,calc(100vw - 2.4rem));padding:1.15rem 1.5rem 1.15rem 1.15rem;border-radius:var(--radius);background:rgba(16,11,30,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;border:1.5px solid rgba(255,255,255,.28);box-shadow:0 1.2rem 3.2rem rgba(0,0,0,.52);text-align:left;animation:up .35s ease;transition:top .3s ease,bottom .3s ease,left .3s ease,right .3s ease}
.kx-ov.pos-top-center{top:1.6rem;left:50%;transform:translateX(-50%);max-width:min(44rem,calc(100vw - 2.8rem));width:auto;padding:1.15rem 1.6rem 1.15rem 1.15rem;border-radius:1.8rem;animation:none}
.kx-ov.pos-top-right-corner{top:1.4rem;right:1.4rem;max-width:min(35rem,calc(100vw - 2.8rem));padding:1.15rem 1.5rem 1.15rem 1.15rem;border-radius:1.6rem .4rem 1.6rem 2rem;background:linear-gradient(145deg,rgba(24,16,42,.95) 0%,rgba(14,10,26,.92) 100%);border:1.5px solid rgba(242,184,162,.45);box-shadow:0 1.2rem 3.2rem rgba(0,0,0,.54);overflow:hidden;animation:none}
.kx-ov.pos-top-right-corner::before{content:"";position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 3rem 3rem 0;border-color:transparent var(--accent) transparent transparent;pointer-events:none}
.kx-ov.pos-top-right-corner::after{content:"";position:absolute;top:.4rem;right:.4rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--ink);pointer-events:none}
.kx-ov.pos-bottom-right{right:1.8rem;bottom:12.6rem}
.kx-ov.pos-bottom-left{left:1.8rem;bottom:12.6rem}
.kx-ov.pos-top-right{right:1.8rem;top:1.8rem}
.kx-ov.pos-top-left{left:1.8rem;top:1.8rem}
.kx-ov.size-compact{max-width:min(34.5rem,calc(100vw - 2.8rem));gap:1.15rem;padding:1.05rem 1.35rem 1.05rem 1.05rem}
.kx-ov.size-compact .kx-ov-qr{flex:0 0 11.9rem;width:11.9rem;height:11.9rem;padding:14px}
.kx-ov.size-compact .kx-ov-badge{font-size:.88rem;padding:.24rem .74rem}
.kx-ov.size-compact .kx-ov-title{font-size:1.58rem;line-height:1.16}
.kx-ov.size-compact .kx-ov-sub{font-size:1rem;line-height:1.28}
.kx-ov.size-compact .kx-ov-hours{font-size:.94rem}
.kx-ov-qr{flex:0 0 12.6rem;width:12.6rem;height:12.6rem;padding:16px;box-sizing:border-box;border-radius:calc(var(--radius) * .72);background:#fff;box-shadow:0 .35rem 1.2rem rgba(0,0,0,.32)}
.kx-ov-qr svg{display:block;width:100%;height:100%}
.kx-ov-copy{display:grid;gap:.38rem}
.kx-ov-badge{display:inline-flex;align-items:center;gap:.45rem;width:fit-content;padding:.28rem .8rem;border-radius:999px;background:var(--accent);color:var(--ink);font:700 .92rem/1.1 var(--font-body);letter-spacing:.05em;text-transform:uppercase}
.kx-ov-badge .i{width:1.05rem;height:1.05rem}
.kx-ov-title{font:700 1.72rem/1.16 var(--font-head);color:#fff}
.kx-ov-sub{font:400 1.08rem/1.28 var(--font-body);color:rgba(255,255,255,.92)}
.kx-ov-hours{display:inline-flex;align-items:center;gap:.38rem;margin-top:.14rem;font:600 1rem/1.2 var(--font-body);color:var(--accent)}
.kx-ov-hours .i{width:1rem;height:1rem}
.kx-prods{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;width:100%}
.kx-prods.n1{grid-template-columns:1fr}.kx-prods.n3 figure:first-child{grid-column:1/-1}
.kx-prods figure{position:relative;margin:0;padding:2rem 1.4rem 1.6rem;border-radius:var(--radius);background:var(--paper);color:var(--ink);display:grid;gap:.8rem;justify-items:center}
.kx-prods img{width:100%;max-width:32rem;height:auto;mix-blend-mode:multiply}
.kx-prods figcaption{font:700 1.6rem/1.2 var(--font-head);display:grid;gap:.3rem}
.kx-prods small{font:400 1.1rem/1.2 var(--font-body);color:var(--muted);display:inline-flex;gap:.3rem;align-items:center;justify-content:center}
.kx-badge{position:absolute;top:1rem;left:1rem;padding:.4rem 1rem;border-radius:999px;background:var(--accent);color:var(--ink);font:700 1.1rem/1.2 var(--font-body)}
.kx-photos{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;width:100%}
.kx-photos figure{position:relative;margin:0;aspect-ratio:1;border-radius:var(--radius);overflow:hidden}
.kx-photos img{width:100%;height:100%;object-fit:cover}
.kx-photos figcaption{position:absolute;left:0;right:0;bottom:0;padding:.8rem 1rem;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);color:#fff;font-size:1.2rem;text-align:left}
.kx-big-ico{display:grid;place-items:center;width:9rem;height:9rem;border-radius:2.4rem;background:rgba(255,255,255,.14)}
.kx-big-ico .i{width:5rem;height:5rem}
.kx-qr{width:min(24rem,72vw);padding:18px;box-sizing:border-box;border-radius:var(--radius);background:#fff;box-shadow:0 .8rem 2.4rem rgba(0,0,0,.32)}
.kx-qr svg{display:block;width:100%;height:auto}
.kx-hours{display:inline-flex;gap:.6rem;align-items:center;font-size:1.6rem;opacity:.9}
.kx-dots{position:absolute;left:0;right:0;bottom:4rem;display:flex;justify-content:center;gap:.8rem}
.kx-dots i{width:1rem;height:1rem;border-radius:50%;background:rgba(255,255,255,.35)}
.kx-dots i.on{background:var(--accent)}
.kx-cta{position:absolute;left:50%;bottom:7rem;transform:translateX(-50%);display:inline-flex;gap:.8rem;align-items:center;padding:1.2rem 2.4rem;border-radius:999px;background:var(--paper);color:var(--primary);font-weight:700;font-size:1.6rem;white-space:nowrap;animation:kxbreathe 2.6s ease-in-out infinite}
@keyframes kxbreathe{50%{transform:translateX(-50%) scale(1.05)}}
.kx-hello{position:absolute;z-index:5;left:2rem;right:auto;top:1.5rem;max-width:44%;padding:.95rem 1.5rem;border-radius:999px;background:var(--accent);color:var(--ink);font:700 1.5rem/1.2 var(--font-head);text-align:left;box-shadow:0 .8rem 2.2rem rgba(0,0,0,.35);animation:up .3s ease}
.kx-greet .kx-ov.pos-top-left,.kx-greet .kx-ov.pos-top-center{top:6.2rem}
.kx-greet .kx-cta{background:var(--accent);color:var(--ink)}
body.kx-attracting{overflow:hidden}

/* ---------- Staff mode: fullscreen overlay, dark so it never looks like a customer screen ---------- */
.kx-staff{position:fixed;inset:0;z-index:70;display:grid;grid-template-rows:auto 1fr auto;background:#14121A;color:#F4F2F7;overflow-y:auto;animation:fadein .15s ease}
body.kx-staffing{overflow:hidden}
.toast{z-index:80}
.kx-staff-bar{display:flex;align-items:center;gap:1rem;padding:1.6rem 2rem}
.kx-staff-tag{display:inline-flex;align-items:center;gap:.6rem;margin-right:auto;font:700 1.1rem/1.2 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:rgba(244,242,247,.7)}
.kx-staff-x{display:inline-flex;align-items:center;gap:.6rem;min-height:4.8rem;padding:0 2rem;border-radius:999px;border:0;background:rgba(255,255,255,.12);color:inherit;font-weight:700;font-size:1.3rem}
.kx-staff-x .i{width:1.8rem;height:1.8rem}
.kx-staff-body{display:grid;align-content:center;justify-items:center;padding:1rem 2rem 2rem}
.kx-staff-foot{padding:0 2rem 2.4rem;text-align:center;font-size:1.1rem;color:rgba(244,242,247,.6)}
.kx-staff h2{text-align:center;font-size:3rem}
.kx-staff .kx-c-ico{width:6rem;height:6rem;border-radius:1.8rem;background:rgba(255,255,255,.1);color:#F4F2F7}
.kx-staff .kx-c-ico .i{width:3rem;height:3rem}
.kx-staff .error{color:#FFB4AB;text-align:center;font-size:1.3rem}
.kx-staff-pad{display:grid;justify-items:center;gap:2rem;width:100%;max-width:34rem}
.kx-pin{display:flex;justify-content:center;gap:1.4rem;margin:0}
.kx-pin i{width:1.8rem;height:1.8rem;border-radius:50%;box-shadow:inset 0 0 0 .18rem rgba(244,242,247,.55)}
.kx-pin i.on{background:#F4F2F7;box-shadow:none}
.kx-pad{display:grid;grid-template-columns:repeat(3,8rem);gap:1.4rem 2rem;justify-content:center}
.kx-key{display:grid;place-items:center;width:8rem;height:8rem;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:inherit;font:600 2.8rem/1 var(--font-body);padding:0}
.kx-key:active{background:rgba(255,255,255,.28)}
.kx-key-del{background:transparent}
.kx-key .i{width:2.6rem;height:2.6rem}
.kx-staff .btn{background:var(--accent);color:var(--ink)}
.kx-staff .btn:disabled{opacity:.35}
.kx-staff-panel{display:grid;gap:2rem;width:100%;max-width:46rem}
.kx-staff .props{padding:1.6rem 2rem;border-radius:var(--radius);background:rgba(255,255,255,.07);font-size:1.4rem}
.kx-staff .props dt{color:rgba(244,242,247,.65)}
.kx-staff .f-label{color:rgba(244,242,247,.65)}
.kx-staff-actions{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.kx-act{display:grid;justify-items:center;align-content:center;gap:.8rem;min-height:10rem;padding:1.2rem;border-radius:var(--radius);border:0;background:rgba(255,255,255,.1);color:inherit;font-weight:700;font-size:1.35rem}
.kx-act .i{width:2.8rem;height:2.8rem}
.kx-act[data-a="slides"]{background:var(--accent);color:var(--ink)}
.kx-act:active{background:rgba(255,255,255,.24)}
.kx-sensors{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.kx-sensors li{display:flex;gap:.6rem;align-items:center;font-size:1.2rem}
.kx-sensors span{margin-left:auto;color:rgba(244,242,247,.65);font-size:1rem}
.kx-cam video{width:100%;border-radius:var(--radius);background:#000;transform:scaleX(-1)}

/* ---------- Live AI ---------- */
.kx-beta{display:inline-block;margin-left:.4rem;padding:.1rem .6rem;border-radius:999px;background:var(--accent);color:var(--ink);font:700 .85rem/1.4 var(--font-body);vertical-align:middle}
.kx-live{background:transparent;pointer-events:none;z-index:45;align-items:end;padding:0}
.kx-live .sheet{pointer-events:auto;width:100%;max-height:52vh;border-radius:var(--radius) var(--radius) 0 0;box-shadow:0 -.4rem 2rem rgba(0,0,0,.18)}
.kx-orb{position:relative;width:7rem;height:7rem;margin:0 auto}
.kx-orb i{position:absolute;inset:0;border-radius:50%;background:var(--primary);opacity:.25}
.kx-orb i:nth-child(2){inset:1rem;opacity:.45}.kx-orb i:nth-child(3){inset:2rem;opacity:1}
.kx-live[data-state="listening"] .kx-orb i{animation:kxorb 1.6s ease-in-out infinite}
.kx-live[data-state="speaking"] .kx-orb i{background:var(--accent);animation:kxorb .7s ease-in-out infinite}
.kx-live[data-state="connecting"] .kx-orb i{animation:kxorb 2.4s ease-in-out infinite;opacity:.15}
.kx-orb i:nth-child(2){animation-delay:.15s}.kx-orb i:nth-child(3){animation-delay:.3s}
@keyframes kxorb{50%{transform:scale(1.12)}}
.kx-l-state{text-align:center;color:var(--muted)}
.kx-chat{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;max-height:18vh;overflow-y:auto}
.kx-chat li{max-width:85%;padding:.8rem 1.2rem;border-radius:1.2rem;background:#fff;font-size:1.25rem}
.kx-chat .kx-user{justify-self:end;background:var(--primary);color:var(--on-primary)}
.kx-live-tile .tile-ico{background:var(--accent);color:var(--ink)}

/* ---------- Header logo, advisor photos ---------- */
.brand-logo{display:block;max-height:3.6rem;max-width:16rem;object-fit:contain}
.avatar.photo{object-fit:cover;background:var(--paper)}

/* ---------- Mixed filter layout ---------- */
.filters.mix .vrow{grid-template-columns:1fr 1fr}
.rim-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.rim-tile{font-size:1rem}
.rim-tile img{max-width:7rem}

/* ---------- Time ranges before the slots ---------- */
.chips.ranges{margin:.4rem 0 1rem}
.chip.range{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:.5rem 1.3rem;line-height:1.15}
.chip.range small{font-weight:500;font-size:.95rem;opacity:.8}

/* ---------- Catalog entry points: style chips, guided search ---------- */
.title-row h2{margin-right:auto}
.title-row .count{white-space:nowrap}
.guided-btn{align-self:center;background:var(--accent);color:var(--ink)}
.facet.styles{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.guided-chip{background:var(--accent);color:var(--ink)}
.guided-chip .icon-btn{background:rgba(255,255,255,.5)}
.tile-guided .tile-ico{background:var(--accent);color:var(--ink)}
#guided-relax{margin-right:1rem}

/* ---------- Guided search screen ---------- */
.guided{gap:1.6rem}
.guided .progress{margin-top:.4rem}
.g-step{display:grid;gap:1.4rem}
.g-step h2{font-size:3rem}
.g-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.g-tile{position:relative;display:grid;justify-items:center;align-content:center;gap:1rem;min-height:12rem;padding:1.6rem 1rem;border-radius:var(--radius);border:0;background:#fff;box-shadow:inset 0 0 0 .12rem rgba(0,0,0,.12);font:700 1.6rem/1.2 var(--font-body);text-align:center}
.g-tile[aria-pressed="true"]{box-shadow:inset 0 0 0 .3rem var(--primary)}
.g-tile[aria-pressed="true"]::after{content:"";position:absolute;top:1rem;right:1rem;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/1.4rem no-repeat}
.g-ico{display:grid;place-items:center;width:6rem;height:6rem;border-radius:1.6rem;background:var(--paper);color:var(--primary)}
.g-ico .i{width:3.2rem;height:3.2rem}
.g-tile[aria-pressed="true"] .g-ico{background:var(--primary);color:var(--on-primary)}
.g-occ .g-tile:last-child:nth-child(odd){grid-column:1/-1}
.g-shapes img{width:100%;max-width:18rem;height:auto}
.g-colors,.g-rims{grid-template-columns:repeat(3,1fr)}
.g-colors .g-tile,.g-rims .g-tile{min-height:10rem}
.g-swatch{display:block;width:5.6rem;height:5.6rem;border-radius:50%;box-shadow:0 0 0 .25rem #fff,0 0 0 .35rem rgba(0,0,0,.15)}
.g-rims img{width:100%;max-width:12rem;height:auto}
.g-budget{grid-template-columns:1fr}
.g-budget .g-tile{grid-auto-flow:column;justify-content:start;align-items:center;gap:1.6rem;min-height:8rem;padding:1.2rem 2rem;font-size:1.8rem}
.g-budget .g-ico{width:4.6rem;height:4.6rem;border-radius:1.2rem}
.g-budget .g-ico .i{width:2.4rem;height:2.4rem}
.g-count{font-size:1.4rem;font-weight:700;color:var(--primary);text-align:center}
.g-count.none{color:#B3261E}