/* =========================================================================
   Avramis Optics — Material Design 3 prototype
   Design system: tokens + components, ported 1:1 from the Compose app
   (core/designsystem/Color.kt, Type.kt, Theme.kt) plus M3 guidelines.
   Theming model: html[data-theme="light|dark"][data-scheme="blue|emerald|violet|amber"]
   ========================================================================= */

/* ---- Fonts & icons (Inter for UI w/ full Greek + Material Symbols) ----- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

/* =========================================================================
   1. COLOR TOKENS — M3 roles for every theme × scheme combination
   Default scheme = "Optical Blue" (exact app values). Neutral surface ramps
   are shared per mode; alternate schemes override the chromatic roles.
   ========================================================================= */

/* ---- LIGHT neutrals + default Blue (from the app) --------------------- */
[data-theme="light"] {
  --primary:#005CAB;        --on-primary:#FFFFFF;
  --primary-container:#D7E7FA; --on-primary-container:#062A55;
  --inverse-primary:#AFCDF4;
  --secondary:#3D5F88;      --on-secondary:#FFFFFF;
  --secondary-container:#D8E6F7; --on-secondary-container:#0C243E;
  --tertiary:#1976C9;       --on-tertiary:#FFFFFF;
  --tertiary-container:#F1F7FF; --on-tertiary-container:#062A55;

  --background:#F8FBFF;     --on-background:#151B24;
  --surface:#FFFFFF;        --on-surface:#151B24;
  --surface-variant:#EAF2FC;--on-surface-variant:#526070;
  --surface-container-lowest:#FFFFFF;
  --surface-container-low:#F5F9FF;
  --surface-container:#EAF2FC;
  --surface-container-high:#E1ECF8;
  --surface-container-highest:#E1ECF8;
  --surface-dim:#DCE6F2;    --surface-bright:#F8FBFF;
  --outline:#728195;        --outline-variant:#D7E1EC;
  --inverse-surface:#2A3340;--inverse-on-surface:#EFF4FB;

  --error:#D32F2F;          --on-error:#FFFFFF;
  --error-container:#FCDAD7;--on-error-container:#5B1212;
  --success:#0F9D58;        --success-container:#D7F4E3; --on-success-container:#0A3D24;
  --warning:#083B78;        --warning-container:#F1F7FF; --on-warning-container:#062A55;
  --scrim:rgba(8,21,40,.45);
  color-scheme:light;
}

/* ---- DARK neutrals + default Blue (lighter mist-blue exploration) ------- */
[data-theme="dark"] {
  --primary:#A7D4FF;        --on-primary:#09243A;
  --primary-container:#244A68; --on-primary-container:#D9ECFF;
  --inverse-primary:#0068B8;
  --secondary:#B8CADB;      --on-secondary:#233243;
  --secondary-container:#34485D; --on-secondary-container:#D9E7F4;
  --tertiary:#B9D7E8;       --on-tertiary:#173341;
  --tertiary-container:#2B5363; --on-tertiary-container:#D7EFF8;

  --background:#111A24;     --on-background:#E9F2FA;
  --surface:#182330;        --on-surface:#E9F2FA;
  --surface-variant:#243445;--on-surface-variant:#BAC9D7;
  --surface-container-lowest:#0B1118;
  --surface-container-low:#141F2B;
  --surface-container:#1D2A38;
  --surface-container-high:#263747;
  --surface-container-highest:#304356;
  --surface-dim:#101822;    --surface-bright:#384B5F;
  --outline:#8397AA;        --outline-variant:#3A4E61;
  --inverse-surface:#E4EDF5;--inverse-on-surface:#1D2A38;

  --error:#FFB4AB;          --on-error:#4A0C08;
  --error-container:#7A2B25;--on-error-container:#FFE1DD;
  --success:#91CFA8;        --success-container:#28543A; --on-success-container:#DDF2E4;
  --warning:#D9C887;        --warning-container:#4A3E1C; --on-warning-container:#F4EBC2;
  --scrim:rgba(0,0,0,.58);
  color-scheme:dark;
}

/* ---- Scheme: EMERALD --------------------------------------------------- */
[data-theme="light"][data-scheme="emerald"]{
  --primary:#006D3B; --on-primary:#FFFFFF; --primary-container:#94F7B5; --on-primary-container:#00210F; --inverse-primary:#78DA99;
  --secondary:#4E6354; --on-secondary:#FFFFFF; --secondary-container:#D0E8D6; --on-secondary-container:#0B1F13;
  --tertiary:#3B6470; --on-tertiary:#FFFFFF; --tertiary-container:#BEEAF8; --on-tertiary-container:#001F27;
  --warning:#006D3B; --warning-container:#E3F8E9; --on-warning-container:#00210F;
}
[data-theme="dark"][data-scheme="emerald"]{
  --primary:#8FC3A1; --on-primary:#14251B; --primary-container:#254733; --on-primary-container:#DCEFE2; --inverse-primary:#2E6B4F;
  --secondary:#B9CDBF; --on-secondary:#243229; --secondary-container:#34483B; --on-secondary-container:#DCEBE1;
  --tertiary:#B9B983; --on-tertiary:#2C2B0D; --tertiary-container:#404221; --on-tertiary-container:#EBEBC1;
  --warning:#B9B983; --warning-container:#404221; --on-warning-container:#EBEBC1;
}

/* ---- Scheme: VIOLET (M3 baseline) ------------------------------------- */
[data-theme="light"][data-scheme="violet"]{
  --primary:#6750A4; --on-primary:#FFFFFF; --primary-container:#EADDFF; --on-primary-container:#21005D; --inverse-primary:#D0BCFF;
  --secondary:#625B71; --on-secondary:#FFFFFF; --secondary-container:#E8DEF8; --on-secondary-container:#1D192B;
  --tertiary:#7D5260; --on-tertiary:#FFFFFF; --tertiary-container:#FFD8E4; --on-tertiary-container:#31111D;
  --warning:#6750A4; --warning-container:#EADDFF; --on-warning-container:#21005D;
}
[data-theme="dark"][data-scheme="violet"]{
  --primary:#D0BCFF; --on-primary:#381E72; --primary-container:#4F378B; --on-primary-container:#EADDFF; --inverse-primary:#6750A4;
  --secondary:#CCC2DC; --on-secondary:#332D41; --secondary-container:#4A4458; --on-secondary-container:#E8DEF8;
  --tertiary:#EFB8C8; --on-tertiary:#492532; --tertiary-container:#633B48; --on-tertiary-container:#FFD8E4;
  --warning:#D0BCFF; --warning-container:#4F378B; --on-warning-container:#EADDFF;
}

/* ---- Scheme: AMBER / SUNSET ------------------------------------------- */
[data-theme="light"][data-scheme="amber"]{
  --primary:#964900; --on-primary:#FFFFFF; --primary-container:#FFDCC2; --on-primary-container:#311300; --inverse-primary:#FFB68F;
  --secondary:#75584A; --on-secondary:#FFFFFF; --secondary-container:#FFDCC2; --on-secondary-container:#2B160A;
  --tertiary:#5F6135; --on-tertiary:#FFFFFF; --tertiary-container:#E5E6AE; --on-tertiary-container:#1C1D00;
  --warning:#964900; --warning-container:#FFDCC2; --on-warning-container:#311300;
}
[data-theme="dark"][data-scheme="amber"]{
  --primary:#FFB68F; --on-primary:#512400; --primary-container:#733600; --on-primary-container:#FFDCC2; --inverse-primary:#964900;
  --secondary:#E5BFAD; --on-secondary:#442A1C; --secondary-container:#5C4032; --on-secondary-container:#FFDCC2;
  --tertiary:#C9CB91; --on-tertiary:#313408; --tertiary-container:#474A09; --on-tertiary-container:#E5E6AE;
  --warning:#FFB68F; --warning-container:#733600; --on-warning-container:#FFDCC2;
}

/* =========================================================================
   2. SHAPE · ELEVATION · SPACING · MOTION tokens
   ========================================================================= */
:root{
  --shape-xs:5px; --shape-sm:8px; --shape-md:12px; --shape-lg:15px; --shape-xl:21px; --shape-full:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:40px; --sp-8:48px;
  --device-w:340px; --device-h:736px;
}
/* M3 elevation: ambient + key light shadows (levels 0–5) */
[data-theme="light"]{
  --elev-1:0 1px 2px rgba(8,21,40,.05), 0 2px 8px rgba(8,21,40,.045);
  --elev-2:0 2px 4px rgba(8,21,40,.05), 0 6px 16px rgba(8,21,40,.06);
  --elev-3:0 4px 8px rgba(8,21,40,.05), 0 12px 28px rgba(8,21,40,.08);
  --elev-4:0 8px 16px rgba(8,21,40,.06), 0 18px 40px rgba(8,21,40,.10);
  --elev-5:0 12px 28px rgba(8,21,40,.10), 0 28px 56px rgba(8,21,40,.12);
}
[data-theme="dark"]{
  --elev-1:0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --elev-2:0 2px 6px rgba(0,0,0,.42), 0 6px 18px rgba(0,0,0,.36);
  --elev-3:0 4px 10px rgba(0,0,0,.45), 0 14px 32px rgba(0,0,0,.45);
  --elev-4:0 8px 18px rgba(0,0,0,.5), 0 20px 44px rgba(0,0,0,.5);
  --elev-5:0 14px 32px rgba(0,0,0,.55), 0 30px 60px rgba(0,0,0,.55);
}

/* =========================================================================
   3. RESET & TYPOGRAPHY (app's tuned M3 type scale)
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
  background:var(--gallery-bg,#525e6b);
  color:var(--on-background);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  letter-spacing:-.01em;
}
/* Display/headline type uses Plus Jakarta Sans for a friendlier, premium feel */
.m3-display-l,.m3-display-m,.m3-display-s,.m3-headline-m,.m3-headline-s,
.app-bar__title,.gallery-head h1,.dialog h4,.state-msg h3,.hero h3,.voucher__big{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
img{display:block;max-width:100%;}

.m3-display-l{font-size:56px;line-height:62px;font-weight:800;letter-spacing:-1.4px;}
.m3-display-m{font-size:44px;line-height:50px;font-weight:800;letter-spacing:-.9px;}
.m3-display-s{font-size:34px;line-height:42px;font-weight:800;letter-spacing:-.6px;}
.m3-headline-m{font-size:25px;line-height:31px;font-weight:800;letter-spacing:-.6px;}
.m3-headline-s{font-size:21px;line-height:27px;font-weight:800;letter-spacing:-.45px;}
.m3-title-l{font-size:19px;line-height:25px;font-weight:700;letter-spacing:-.3px;}
.m3-title-m{font-size:15.5px;line-height:21px;font-weight:700;letter-spacing:-.2px;}
.m3-title-s{font-size:13.5px;line-height:19px;font-weight:600;letter-spacing:-.1px;}
.m3-body-l{font-size:15px;line-height:23px;font-weight:400;letter-spacing:0;}
.m3-body-m{font-size:13px;line-height:20px;font-weight:400;letter-spacing:0;}
.m3-body-s{font-size:12px;line-height:17px;font-weight:400;letter-spacing:.1px;}
.m3-label-l{font-size:13.5px;line-height:18px;font-weight:700;letter-spacing:.1px;}
.m3-label-m{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.2px;}
.m3-label-s{font-size:11px;line-height:14px;font-weight:600;letter-spacing:.3px;}

.material-symbols-outlined{
  font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;
  font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;
  white-space:nowrap;direction:ltr;-webkit-font-feature-settings:'liga';
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  vertical-align:middle;user-select:none;
}
.icon-fill{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;}
.icon-20{font-size:20px;} .icon-18{font-size:18px;} .icon-32{font-size:32px;} .icon-40{font-size:40px;}

/* helpers */
.txt-primary{color:var(--primary);} .txt-onsurf{color:var(--on-surface);}
.txt-variant{color:var(--on-surface-variant);} .txt-error{color:var(--error);}
.flex{display:flex;} .col{display:flex;flex-direction:column;} .center{align-items:center;}
.between{justify-content:space-between;} .gap-1{gap:4px;} .gap-2{gap:8px;} .gap-3{gap:12px;} .gap-4{gap:16px;}
.grow{flex:1;} .wrap{flex-wrap:wrap;} .full{width:100%;}

/* =========================================================================
   4. GALLERY CHROME (the prototype page itself, not the app)
   ========================================================================= */
.gallery-bg-light{--gallery-bg:#dfe6ee;--chrome-fg:#27303c;--chrome-fg-dim:#5a6675;}
.gallery-bg-dark{--gallery-bg:#0e1620;--chrome-fg:#e9f2fa;--chrome-fg-dim:#a8bacb;}
.topbar{
  position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:16px;
  padding:14px 24px;background:rgba(18,28,39,.9);backdrop-filter:blur(14px);
  color:#fff;box-shadow:0 2px 12px rgba(0,0,0,.3);
}
.topbar__brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;}
.topbar__brand .logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#2D8FE3,#005CAB);
  display:grid;place-items:center;color:#fff;font-size:18px;}
.topbar__spacer{flex:1;}
.topbar__group{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border-radius:999px;padding:4px;}
.seg-btn{padding:7px 14px;border-radius:999px;color:#cdd6e4;font-weight:700;font-size:13px;display:flex;align-items:center;gap:6px;transition:.15s;}
.seg-btn.is-active{background:#fff;color:#0d131a;}
.swatch-row{display:flex;gap:8px;align-items:center;}
.swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:.15s;position:relative;}
.swatch.is-active{border-color:#fff;transform:scale(1.12);}
.swatch[data-s="blue"]{background:#A7D4FF;} .swatch[data-s="emerald"]{background:#0F9D58;}
.swatch[data-s="violet"]{background:#6750A4;} .swatch[data-s="amber"]{background:#E08531;}

.gallery-head{text-align:center;color:var(--chrome-fg,#e8eef6);padding:34px 24px 6px;}
.gallery-head h1{margin:0 0 6px;font-size:30px;font-weight:800;letter-spacing:-.5px;}
.gallery-head p{margin:0;color:var(--chrome-fg-dim,#9fb0c4);font-size:14px;}
.gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:48px 28px;padding:36px clamp(16px,4vw,56px) 96px;justify-items:center;align-items:start;
}
.frame-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;}
.frame-label{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--chrome-fg,#dde5ef);text-align:center;}
.frame-label .n{font-weight:800;font-size:15px;}
.frame-label .k{font-size:11px;color:var(--chrome-fg-dim,#9fb0c4);font-family:monospace;letter-spacing:.5px;}

/* =========================================================================
   5. DEVICE FRAME
   ========================================================================= */
.device{
  width:var(--device-w);height:var(--device-h);border-radius:32px;background:#05080c;
  padding:11px;box-shadow:0 22px 50px -12px rgba(0,0,0,.55),0 0 0 2px rgba(255,255,255,.04);
  position:relative;flex:0 0 auto;
}
.device__screen{
  width:100%;height:100%;border-radius:24px;overflow:hidden;position:relative;
  background:var(--background);color:var(--on-surface);display:flex;flex-direction:column;
}
.statusbar{
  height:34px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:0 20px 0 24px;font-size:13px;font-weight:700;color:var(--on-surface);background:var(--app-bar-bg,var(--surface));
}
.statusbar .right{display:flex;align-items:center;gap:6px;}
.statusbar .material-symbols-outlined{font-size:16px;}
.screen-body{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;background:var(--background);}
.screen-body::-webkit-scrollbar{width:0;}
.screen-scroll{padding-bottom:16px;}
/* notch */
.device::after{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:120px;height:24px;background:#05080c;border-radius:0 0 12px 12px;z-index:5;}

/* =========================================================================
   6. APP BAR (top) — 64dp, surface bg, primary title
   ========================================================================= */
.app-bar{
  display:flex;align-items:center;gap:4px;min-height:64px;padding:0 6px;flex:0 0 auto;
  background:var(--surface);color:var(--primary);
}
.app-bar--scrolled{box-shadow:var(--elev-2);}
.app-bar__lead{width:48px;height:48px;}
.app-bar__titles{flex:1;min-width:0;padding:0 4px;}
.app-bar__sub{font-size:11px;font-weight:600;color:var(--on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app-bar__title{font-size:20px;font-weight:800;letter-spacing:-.4px;color:var(--primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app-bar--center .app-bar__titles{text-align:center;}
.app-bar--large{flex-direction:column;align-items:stretch;min-height:104px;padding-bottom:10px;}
.app-bar--large .app-bar__row{display:flex;align-items:center;min-height:56px;}
.app-bar--large .app-bar__title{font-size:28px;padding:0 12px;}
.app-bar__actions{display:flex;align-items:center;}

/* icon button */
.icon-btn{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--primary);position:relative;transition:background .15s;}
.icon-btn:hover{background:color-mix(in srgb,var(--primary) 10%,transparent);}
.icon-btn--onsurf{color:var(--on-surface-variant);}
.icon-btn .badge-dot{position:absolute;top:9px;right:9px;}

/* =========================================================================
   7. BOTTOM NAVIGATION — 5 tabs
   ========================================================================= */
.bottom-nav{
  display:flex;flex:0 0 auto;background:var(--surface);padding:10px 6px 14px;gap:2px;
  border-top:1px solid var(--outline-variant);
}
.bottom-nav__item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--on-surface-variant);}
.bottom-nav__pill{width:60px;height:32px;border-radius:999px;display:grid;place-items:center;transition:.15s;position:relative;}
.bottom-nav__item.is-active{color:var(--primary);}
.bottom-nav__item.is-active .bottom-nav__pill{background:var(--primary-container);color:var(--on-primary-container);}
.bottom-nav__item.is-active .material-symbols-outlined{font-variation-settings:'FILL' 1,'wght' 500;}
.bottom-nav__label{font-size:11px;font-weight:600;}
.bottom-nav .badge{position:absolute;top:-2px;right:8px;}

/* =========================================================================
   8. BUTTONS
   ========================================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 22px;
  border-radius:var(--shape-full);font-size:14px;font-weight:700;letter-spacing:.1px;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;white-space:nowrap;}
.btn .material-symbols-outlined{font-size:18px;}
.btn--filled{background:var(--primary);color:var(--on-primary);}
.btn--filled:hover{box-shadow:var(--elev-2);}
.btn--tonal{background:var(--secondary-container);color:var(--on-secondary-container);}
.btn--elevated{background:var(--surface-container-low);color:var(--primary);box-shadow:var(--elev-1);}
.btn--outlined{background:transparent;color:var(--primary);border:1px solid var(--outline-variant);}
.btn--outlined:hover{background:color-mix(in srgb,var(--primary) 7%,transparent);}
.btn--text{background:transparent;color:var(--primary);padding:0 12px;}
.btn--text:hover{background:color-mix(in srgb,var(--primary) 8%,transparent);}
.btn--danger{background:var(--error);color:var(--on-error);}
.btn--block{display:flex;width:100%;}
.btn--lg{height:54px;border-radius:var(--shape-full);font-size:15px;font-weight:700;}
.btn[disabled],.btn.is-disabled{opacity:.38;pointer-events:none;}

.fab{display:inline-flex;align-items:center;gap:10px;height:56px;min-width:56px;padding:0 18px;border-radius:var(--shape-md);
  background:var(--primary-container);color:var(--on-primary-container);box-shadow:var(--elev-3);font-weight:700;font-size:14px;}
.fab--primary{background:var(--primary);color:var(--on-primary);}
.fab--round{padding:0;width:56px;justify-content:center;}
.fab .material-symbols-outlined{font-size:24px;}
.fab-anchor{position:absolute;right:16px;bottom:16px;z-index:20;}

/* small add-to-cart square (product card) */
.add-sq{width:46px;height:46px;border-radius:11px;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;flex:0 0 auto;
  box-shadow:var(--elev-1);transition:transform .16s ease,box-shadow .16s ease;}
.add-sq:hover{transform:translateY(-1px);box-shadow:var(--elev-2);}
.add-sq .material-symbols-outlined{font-size:20px;}

/* =========================================================================
   9. CARDS & SURFACES
   ========================================================================= */
.card{border-radius:var(--shape-lg);background:var(--surface);overflow:hidden;}
.card--outlined{border:1px solid color-mix(in srgb,var(--outline-variant) 55%,transparent);}
.card--filled{background:var(--surface-container-high);}
.card--elevated{box-shadow:var(--elev-1);}
.card__pad{padding:18px;}
.surface-low{background:var(--surface-container-low);}
.surface-cont{background:var(--surface-container);}

.section-header{display:flex;align-items:center;justify-content:space-between;padding:18px 16px 10px;}
.section-header .ttl,.section-header__ttl{font-size:17px;font-weight:800;color:var(--on-surface);letter-spacing:-.2px;}
.section-header .act{font-size:13px;font-weight:800;color:var(--primary);display:flex;align-items:center;gap:2px;}

.divider{height:1px;background:var(--outline-variant);border:0;margin:0;}
.divider--inset{margin-left:16px;}

/* =========================================================================
   10. LIST ITEMS
   ========================================================================= */
.list-item{display:flex;align-items:center;gap:16px;padding:12px 16px;min-height:56px;color:var(--on-surface);}
.list-item__lead{width:40px;height:40px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-variant);color:var(--on-surface-variant);}
.list-item__lead.tint{background:var(--primary-container);color:var(--on-primary-container);}
.list-item__txt{flex:1;min-width:0;}
.list-item__hl{font-size:15px;font-weight:600;color:var(--on-surface);}
.list-item__sl{font-size:13px;color:var(--on-surface-variant);margin-top:1px;}
.list-item__trail{flex:0 0 auto;color:var(--on-surface-variant);display:flex;align-items:center;gap:8px;}

/* =========================================================================
   11. CHIPS
   ========================================================================= */
.chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:var(--shape-xs);
  font-size:13px;font-weight:600;letter-spacing:-.1px;border:1px solid color-mix(in srgb,var(--outline-variant) 80%,transparent);
  background:transparent;color:var(--on-surface-variant);white-space:nowrap;}
.chip .material-symbols-outlined{font-size:18px;}
.chip--assist{background:var(--surface-container-low);color:var(--on-surface);}
.chip.is-selected{background:var(--secondary-container);color:var(--on-secondary-container);border-color:transparent;font-weight:700;}
.chip.is-selected .check{color:var(--on-secondary-container);}
.chip--suggestion{border-color:var(--outline-variant);background:var(--surface-container-low);color:var(--on-surface);}
.chip-row{display:flex;gap:8px;overflow-x:auto;padding:8px 16px;}
.chip-row::-webkit-scrollbar{height:0;}

/* =========================================================================
   12. TEXT FIELDS
   ========================================================================= */
.tf{position:relative;display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;border-radius:var(--shape-xs) var(--shape-xs) 0 0;
  background:var(--surface-container-highest);border-bottom:2px solid var(--on-surface-variant);color:var(--on-surface);}
.tf--outlined{background:transparent;border:1px solid var(--outline-variant);border-radius:var(--shape-sm);}
.tf--focused{border-color:var(--primary);border-bottom-color:var(--primary);}
.tf__label{position:absolute;top:8px;left:16px;font-size:11px;color:var(--primary);font-weight:600;}
.tf--outlined .tf__label{top:-7px;background:var(--surface);padding:0 4px;}
.tf__input{flex:1;font-size:15px;color:var(--on-surface);padding-top:12px;}
.tf--outlined .tf__input{padding-top:0;}
.tf__icon{color:var(--on-surface-variant);}
.tf-help{font-size:12px;color:var(--on-surface-variant);padding:4px 16px 0;}
.tf-help.err{color:var(--error);}

/* search bar (rounded, filled) — M3 search field */
.search-bar{display:flex;align-items:center;gap:10px;height:50px;padding:0 8px 0 16px;border-radius:var(--shape-full);
  background:var(--surface-container-high);color:var(--on-surface-variant);}
.search-bar>.material-symbols-outlined{font-size:22px;color:var(--on-surface-variant);flex:0 0 auto;}
.search-bar .q{flex:1;min-width:0;font-size:15px;color:var(--on-surface);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.search-bar .q.placeholder{color:var(--on-surface-variant);}
.search-bar input{flex:1;min-width:0;font-size:15px;color:var(--on-surface);background:none;border:none;outline:none;}
.search-bar .icon-btn{width:40px;height:40px;flex:0 0 auto;}

/* =========================================================================
   13. SWITCHES · CHECKBOX · RADIO · SLIDER · SEGMENTED
   ========================================================================= */
.switch{width:52px;height:32px;border-radius:999px;background:var(--surface-variant);border:2px solid var(--outline);position:relative;flex:0 0 auto;transition:background .22s cubic-bezier(.2,.7,.2,1),border-color .22s;}
.switch::after{content:"";position:absolute;top:6px;left:6px;width:16px;height:16px;border-radius:50%;background:var(--outline);transition:all .22s cubic-bezier(.2,.7,.2,1);}
.switch.is-on{background:var(--primary);border-color:var(--primary);}
.switch.is-on::after{left:22px;width:24px;height:24px;top:2px;background:var(--on-primary);}
.checkbox{width:18px;height:18px;border-radius:3px;border:2px solid var(--outline);display:grid;place-items:center;flex:0 0 auto;}
.checkbox.is-on{background:var(--primary);border-color:var(--primary);color:var(--on-primary);}
.checkbox.is-on::after{content:"check";font-family:'Material Symbols Outlined';font-size:14px;font-variation-settings:'FILL' 1;}
.radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--outline);display:grid;place-items:center;flex:0 0 auto;}
.radio.is-on{border-color:var(--primary);}
.radio.is-on::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--primary);}

.slider{height:40px;display:flex;align-items:center;position:relative;padding:0 4px;}
.slider__track{height:4px;border-radius:2px;background:var(--surface-variant);flex:1;position:relative;}
.slider__fill{position:absolute;height:4px;border-radius:2px;background:var(--primary);}
.slider__thumb{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:var(--primary);transform:translate(-50%,-50%);box-shadow:var(--elev-1);}

.segmented{display:flex;border:1px solid var(--outline);border-radius:var(--shape-full);overflow:hidden;height:40px;}
.segmented__item{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:700;color:var(--on-surface);border-right:1px solid var(--outline);}
.segmented__item:last-child{border-right:0;}
.segmented__item.is-active{background:var(--secondary-container);color:var(--on-secondary-container);}
.segmented__item .material-symbols-outlined{font-size:18px;}

/* =========================================================================
   14. BADGES · TONE BADGES · RATING · STEPPER · AVATAR
   ========================================================================= */
.badge{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--primary);color:var(--on-primary);
  font-size:11px;font-weight:800;display:inline-grid;place-items:center;}
.badge--error{background:var(--error);color:var(--on-error);}
.badge-dot{width:9px;height:9px;border-radius:50%;background:var(--error);display:inline-block;}
.tone-badge{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:800;}
.tone--success{background:var(--success-container);color:var(--on-success-container);}
.tone--warning{background:var(--warning-container);color:var(--on-warning-container);}
.tone--danger{background:var(--error-container);color:var(--on-error-container);}
.tone--info{background:var(--primary-container);color:var(--on-primary-container);}
.tone--neutral{background:var(--surface-variant);color:var(--on-surface-variant);}

.rating{display:inline-flex;align-items:center;gap:1px;color:#F5A623;}
.rating .material-symbols-outlined{font-size:16px;font-variation-settings:'FILL' 1;}
.rating .empty{color:var(--outline-variant);}

.stepper{display:inline-flex;align-items:center;border-radius:999px;background:var(--surface-container-high);border:1px solid color-mix(in srgb,var(--outline-variant) 55%,transparent);}
.stepper button{width:40px;height:40px;display:grid;place-items:center;color:var(--primary);}
.stepper .q{width:34px;text-align:center;font-weight:800;color:var(--primary);}

.avatar{width:44px;height:44px;border-radius:50%;background:var(--primary-container);color:var(--on-primary-container);display:grid;place-items:center;font-weight:800;flex:0 0 auto;}
.avatar--lg{width:72px;height:72px;font-size:26px;}

/* =========================================================================
   15. PRODUCT CARD & RAIL (ported from ProductCardView)
   ========================================================================= */
.product-card{border-radius:var(--shape-lg);background:var(--surface);border:1px solid color-mix(in srgb,var(--outline-variant) 50%,transparent);box-shadow:var(--elev-1);overflow:hidden;}
.product-card__img{position:relative;background:#fff;padding:8px;display:grid;place-items:center;height:148px;}
.product-card__img img{max-height:130px;object-fit:contain;}
.product-card__img .sale{position:absolute;top:8px;left:8px;}
.product-card__img .heart{position:absolute;top:6px;right:6px;color:var(--on-surface-variant);}
.product-card__body{padding:10px 12px 12px;}
.product-card__brand{font-size:10px;font-weight:800;color:var(--primary);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.product-card__name{font-size:13px;font-weight:700;color:var(--on-surface);line-height:19px;height:38px;overflow:hidden;margin-top:2px;}
.product-card__foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.product-rail{display:flex;gap:12px;overflow-x:auto;padding:4px 16px 8px;}
.product-rail::-webkit-scrollbar{height:0;}
.product-rail .product-card{width:158px;flex:0 0 auto;}

.price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;}
.price__cur,.price__old{white-space:nowrap;}
.price__cur{font-size:16px;font-weight:800;color:var(--on-surface);letter-spacing:-.3px;}
.price__cur--sale{color:var(--error);}
.price__cur--lg{font-size:24px;}
.price__old{font-size:12px;color:var(--on-surface-variant);text-decoration:line-through;}

/* =========================================================================
   16. BANNER / CAROUSEL · DOTS
   ========================================================================= */
.hero{margin:12px 16px 4px;border-radius:var(--shape-xl);overflow:hidden;position:relative;height:170px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));color:var(--on-primary);display:flex;flex-direction:column;justify-content:flex-end;padding:18px;}
.hero h3{margin:0;font-size:22px;font-weight:800;}
.hero p{margin:4px 0 0;opacity:.9;font-size:13px;}
.hero .pill{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.22);padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;}
.dots{display:flex;gap:6px;justify-content:center;padding:8px;}
.dots span{width:7px;height:7px;border-radius:50%;background:var(--outline-variant);}
.dots span.is-on{background:var(--primary);width:20px;border-radius:4px;}

.banner-strip{display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:12px;font-weight:600;background:var(--warning-container);color:var(--on-warning-container);}
.banner-strip .material-symbols-outlined{font-size:16px;}

/* =========================================================================
   17. DIALOG · BOTTOM SHEET · SNACKBAR · SCRIM
   ========================================================================= */
.scrim{position:absolute;inset:0;background:var(--scrim);z-index:30;display:flex;align-items:flex-end;justify-content:center;}
.scrim--center{align-items:center;}
.bottom-sheet{width:100%;background:var(--surface-container-low);border-radius:var(--shape-xl) var(--shape-xl) 0 0;padding:8px 0 16px;max-height:86%;overflow-y:auto;}
.bottom-sheet__grip{width:32px;height:4px;border-radius:2px;background:var(--outline-variant);margin:8px auto 6px;}
.dialog{width:86%;background:var(--surface-container-high);border-radius:var(--shape-xl);padding:24px;box-shadow:var(--elev-5);}
.dialog h4{margin:0 0 8px;font-size:20px;font-weight:800;color:var(--on-surface);}
.dialog p{margin:0;font-size:14px;color:var(--on-surface-variant);line-height:20px;}
.dialog__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:24px;}
.snackbar{position:absolute;left:16px;right:16px;bottom:16px;z-index:40;background:var(--inverse-surface);color:var(--inverse-on-surface);
  border-radius:var(--shape-xs);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--elev-3);font-size:14px;}
.snackbar a{color:var(--inverse-primary);font-weight:800;}

/* =========================================================================
   18. STATE MESSAGE · SKELETON
   ========================================================================= */
.state-msg{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 32px;gap:6px;height:100%;}
.state-msg__icon{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;margin-bottom:10px;}
.state-msg__icon .material-symbols-outlined{font-size:42px;}
.state-msg h3{margin:0;font-size:19px;font-weight:800;color:var(--primary);}
.state-msg p{margin:0;font-size:14px;color:var(--on-surface-variant);max-width:230px;}
.skeleton{background:linear-gradient(90deg,var(--surface-variant) 25%,var(--surface-container-high) 37%,var(--surface-variant) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:8px;}
@keyframes shimmer{0%{background-position:100% 0;}100%{background-position:-100% 0;}}
.spinner{width:42px;height:42px;border-radius:50%;border:4px solid var(--surface-variant);border-top-color:var(--primary);animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* =========================================================================
   19. MISC layout utilities used by screens
   ========================================================================= */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px;}
.grid-cats{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;}
.cat-tile{border-radius:var(--shape-lg);overflow:hidden;height:120px;position:relative;color:#fff;display:flex;align-items:flex-end;padding:12px;font-weight:800;
  background:linear-gradient(135deg,var(--tertiary),var(--primary));}
.cat-tile .material-symbols-outlined{position:absolute;top:10px;right:10px;font-size:30px;opacity:.85;}
.pad-h{padding-left:16px;padding-right:16px;} .pad-4{padding:16px;} .mt-2{margin-top:8px;} .mt-3{margin-top:12px;} .mb-2{margin-bottom:8px;}
.row-line{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;}
.row-line .k{color:var(--on-surface-variant);font-size:14px;} .row-line .v{font-weight:700;font-size:14px;color:var(--on-surface);}
.total-line .k{font-weight:800;color:var(--on-surface);font-size:16px;} .total-line .v{font-weight:800;color:var(--primary);font-size:18px;}
.thumb{width:64px;height:64px;border-radius:var(--shape-sm);background:#fff;border:1px solid var(--outline-variant);display:grid;place-items:center;flex:0 0 auto;overflow:hidden;}
.thumb img{max-height:56px;object-fit:contain;}
.tabs{display:flex;border-bottom:1px solid var(--outline-variant);}
.tabs__item{flex:1;text-align:center;padding:14px 0;font-weight:700;font-size:14px;color:var(--on-surface-variant);position:relative;}
.tabs__item.is-active{color:var(--primary);}
.tabs__item.is-active::after{content:"";position:absolute;left:20%;right:20%;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--primary);}
.stepper-dots{display:flex;align-items:center;gap:6px;padding:14px 16px;}
.stepper-dots .s{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--surface-variant);color:var(--on-surface-variant);}
.stepper-dots .s.is-on{background:var(--primary);color:var(--on-primary);}
.stepper-dots .ln{flex:1;height:2px;background:var(--outline-variant);}

img.ph{background:var(--surface-variant);}

/* linear progress (loyalty bar, etc.) */
.linear-progress{height:6px;border-radius:3px;background:var(--surface-variant);overflow:hidden;}
.linear-progress__fill{height:100%;border-radius:3px;background:var(--primary);}

/* sticky bottom action bar (e.g. product detail Add-to-cart) */
.action-bar{position:sticky;bottom:0;z-index:15;display:flex;align-items:center;gap:14px;padding:12px 16px;
  background:var(--surface);border-top:1px solid var(--outline-variant);}
.action-bar .grow{min-width:0;}

/* voucher / promo card (extraLarge primary card) */
.voucher{border-radius:var(--shape-xl);background:var(--primary);color:var(--on-primary);padding:18px;display:flex;align-items:center;gap:16px;margin:4px 16px;}
.voucher>.grow,.voucher__info{min-width:0;flex:1;}
.voucher .flex{flex-wrap:wrap;}
.voucher>.col,.voucher__right{flex:0 0 auto;align-items:flex-end;text-align:right;}
.voucher__big{font-size:25px;font-weight:800;line-height:1;white-space:nowrap;}
.voucher .pill-chip{display:inline-flex;align-items:center;height:21px;padding:0 9px;border-radius:999px;background:color-mix(in srgb,var(--on-primary) 20%,transparent);color:var(--on-primary);font-size:10px;font-weight:800;letter-spacing:.3px;white-space:nowrap;}
.voucher .ghost-btn{background:var(--surface);color:var(--primary);border-radius:999px;height:36px;padding:0 16px;font-weight:800;font-size:13px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}

/* quick-shortcut card (icon circle + label) */
.shortcut{flex:1;display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--shape-lg);background:var(--surface-container);position:relative;overflow:hidden;}
.shortcut::after{content:"";position:absolute;right:-22px;top:-22px;width:70px;height:70px;border-radius:50%;background:color-mix(in srgb,var(--primary) 8%,transparent);}
.shortcut .ic{width:40px;height:40px;border-radius:50%;background:var(--primary-container);color:var(--on-primary-container);display:grid;place-items:center;}
.shortcut .lbl{font-weight:800;color:var(--primary);font-size:14px;}

/* small home category tile (rail) */
.cat-rail-tile{width:112px;flex:0 0 auto;border-radius:var(--shape-lg);background:var(--surface-container);
  padding:14px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;transition:transform .2s ease,box-shadow .2s ease;}
.cat-rail-tile:hover{transform:translateY(-3px);box-shadow:var(--elev-2);}
.cat-rail-tile .ic{width:48px;height:48px;border-radius:50%;background:var(--surface-container);color:var(--primary);display:grid;place-items:center;}
.cat-rail-tile .bar{width:24px;height:3px;border-radius:2px;background:var(--primary);}
.cat-rail-tile .nm{font-size:12px;font-weight:700;color:var(--on-surface);line-height:15px;}
.cat-rail-tile .ct{font-size:10px;color:var(--on-surface-variant);}

/* product-detail media showcase (replaces the stark white hero) */
.media-hero{position:relative;height:264px;border-radius:var(--shape-xl);display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(125% 95% at 50% 16%, var(--surface) 0%, var(--surface-container) 68%, var(--surface-container-high) 100%);
  border:1px solid color-mix(in srgb,var(--outline-variant) 45%,transparent);}
.media-hero>.material-symbols-outlined{font-size:150px;color:var(--primary);opacity:.9;}
.media-hero__btn{position:absolute;width:42px;height:42px;border-radius:50%;background:var(--surface);display:grid;place-items:center;
  box-shadow:var(--elev-2);transition:transform .16s ease;}
.media-hero__btn:hover{transform:scale(1.06);}
.media-hero__pill{position:absolute;left:14px;top:14px;}
/* mini media showcase (compare columns, etc.) — same tonal look as the hero */
.media-thumb{display:grid;place-items:center;border-radius:var(--shape-sm);overflow:hidden;
  background:radial-gradient(120% 95% at 50% 18%, var(--surface) 0%, var(--surface-container) 70%, var(--surface-container-high) 100%);
  border:1px solid color-mix(in srgb,var(--outline-variant) 45%,transparent);}
.media-thumb .material-symbols-outlined{color:var(--primary);opacity:.9;}
.thumb-strip{display:flex;gap:10px;padding:12px 0 0;}
.thumb-strip__item{width:58px;height:58px;flex:0 0 auto;border-radius:var(--shape-sm);background:var(--surface-container);
  display:grid;place-items:center;border:2px solid transparent;color:var(--outline);transition:all .16s ease;}
.thumb-strip__item .material-symbols-outlined{font-size:28px;}
.thumb-strip__item.is-active{border-color:var(--primary);background:var(--surface);color:var(--primary);}

/* spec grid (product characteristics) */
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--outline-variant);border-radius:var(--shape-md);overflow:hidden;border:0;}
.spec{background:var(--surface-container-low);padding:12px 14px;display:flex;flex-direction:column;gap:2px;}
.spec .k{font-size:11px;color:var(--on-surface-variant);font-weight:600;letter-spacing:.2px;}
.spec .v{font-size:14px;color:var(--on-surface);font-weight:700;}
.spec:last-child:nth-child(odd){grid-column:1 / -1;}

/* filter bottom-sheet: chips wrap (no cut-off horizontal scroll) + group rhythm */
.bottom-sheet .chip-row{flex-wrap:wrap;overflow:visible;row-gap:8px;padding:6px 16px 2px;}
.filter-group-label{font-size:12px;font-weight:700;color:var(--on-surface);letter-spacing:.1px;padding:14px 16px 2px;}
.action-bar .price{flex-wrap:nowrap;}

/* full-bleed brand splash background */
.brand-fill{background:var(--primary);color:var(--on-primary);}
.brand-logo-card{background:var(--surface);border-radius:var(--shape-lg);padding:14px 20px;display:grid;place-items:center;color:var(--primary);font-weight:800;letter-spacing:.5px;}

/* empty/info message surface box (inline, not full screen) */
.msg-box{margin:8px 16px;padding:18px;border-radius:var(--shape-lg);background:var(--surface-container-low);border:1px solid var(--outline-variant);
  color:var(--on-surface-variant);font-size:13px;text-align:center;}

/* =========================================================================
   20. PRODUCT ROW — one product per line (vertical catalog/search/wishlist list)
   ========================================================================= */
.product-list{display:flex;flex-direction:column;gap:10px;padding:10px 16px;}
.product-row{display:flex;align-items:center;gap:14px;padding:10px;border-radius:var(--shape-lg);background:var(--surface);
  border:1px solid color-mix(in srgb,var(--outline-variant) 50%,transparent);box-shadow:var(--elev-1);
  transition:transform .18s ease,box-shadow .18s ease;}
.product-row:hover{transform:translateY(-2px);box-shadow:var(--elev-2);}
.product-row__img{width:86px;height:86px;flex:0 0 auto;border-radius:var(--shape-sm);background:#fff;display:grid;place-items:center;overflow:hidden;position:relative;}
.product-row__img .material-symbols-outlined{font-size:46px;color:var(--outline);}
.product-row__img .sale{position:absolute;top:6px;left:6px;}
.product-row__body{flex:1;min-width:0;}
.product-row__brand{font-size:10px;font-weight:800;color:var(--primary);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.product-row__name{font-size:14px;font-weight:700;color:var(--on-surface);line-height:18px;margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.product-row__meta{display:flex;align-items:center;gap:8px;margin-top:6px;}
.product-row__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;}
.catalog-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px;}
.catalog-toolbar .chip{height:36px;}
.catalog-toolbar .grow{flex:1 1 18px;}
.list-mode-pill{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border-radius:var(--shape-full);
  background:color-mix(in srgb,var(--primary-container) 56%,transparent);color:var(--on-primary-container);font-size:11px;font-weight:800;white-space:nowrap;}
.list-mode-pill .material-symbols-outlined{font-size:16px;}
.product-list--category{gap:9px;padding-top:4px;}
.product-list--category .product-row{width:100%;min-height:104px;padding:9px 10px;}
.product-list--category .product-row__img{width:76px;height:76px;border-radius:14px;}
.product-list--category .product-row__foot{margin-top:6px;}

/* =========================================================================
   21. DECORATIVE SHAPES (subtle, on coloured cards)
   ========================================================================= */
.hero{position:relative;}
.hero::before{content:"";position:absolute;right:-30px;top:-40px;width:160px;height:160px;border-radius:50%;
  background:color-mix(in srgb,#fff 16%,transparent);}
.hero::after{content:"";position:absolute;right:46px;bottom:-58px;width:120px;height:120px;border-radius:50%;
  background:color-mix(in srgb,#fff 10%,transparent);}
.hero>*{position:relative;z-index:1;}
.voucher{position:relative;overflow:hidden;}
.voucher::before{content:"";position:absolute;right:-26px;top:-30px;width:120px;height:120px;border-radius:50%;
  background:color-mix(in srgb,var(--on-primary) 12%,transparent);}
.voucher::after{content:"";position:absolute;left:38%;bottom:-46px;width:96px;height:96px;border-radius:50%;
  background:color-mix(in srgb,var(--on-primary) 8%,transparent);}
.voucher>*{position:relative;z-index:1;}
/* loyalty / tinted info cards: a soft corner blob via .has-shape */
.has-shape{position:relative;overflow:hidden;}
.has-shape::after{content:"";position:absolute;right:-30px;bottom:-34px;width:96px;height:96px;border-radius:50%;
  background:color-mix(in srgb,var(--primary) 7%,transparent);pointer-events:none;}

/* =========================================================================
   22. MOTION — entrance reveal, hover lift, floating accents
   ========================================================================= */
.product-card{transition:transform .18s ease,box-shadow .18s ease;}
.product-card:hover{transform:translateY(-3px);box-shadow:var(--elev-2);}
.list-item{transition:background .15s ease;}
.list-item:hover{background:color-mix(in srgb,var(--on-surface) 4%,transparent);}
.chip,.fab,.icon-btn,.swatch,.seg-btn{transition:all .16s ease;}
.btn--filled:hover,.fab:hover{transform:translateY(-1px);}
.cat-tile{transition:transform .2s ease,box-shadow .2s ease;}
.cat-tile:hover{transform:translateY(-3px);box-shadow:var(--elev-3);}

/* reveal-on-scroll (JS adds body.anim + .in); no-JS fallback keeps everything visible */
body.anim .frame-wrap{opacity:0;transform:translateY(22px);}
body.anim .frame-wrap.in{opacity:1;transform:none;transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1);}

@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
.hero::before,.voucher::before{animation:float 6s ease-in-out infinite;}
.hero::after,.voucher::after{animation:float 7.5s ease-in-out infinite reverse;}
@media (prefers-reduced-motion:reduce){
  body.anim .frame-wrap{opacity:1;transform:none;}
  .hero::before,.hero::after,.voucher::before,.voucher::after{animation:none;}
}

/* =========================================================================
   23. VISUAL POLISH PASS — presentation chrome + premium surfaces
   ========================================================================= */
:root{
  --gallery-max:1580px;
  --chrome-radius:24px;
}
.gallery-bg-light{
  --gallery-bg:
    radial-gradient(900px 620px at 8% -8%, rgba(25,118,201,.26), transparent 62%),
    radial-gradient(780px 560px at 92% 6%, rgba(111,201,255,.26), transparent 58%),
    radial-gradient(900px 680px at 50% 105%, rgba(0,92,171,.16), transparent 62%),
    linear-gradient(135deg,#eef5ff 0%,#dde8f5 47%,#eef4fa 100%);
  --chrome-fg:#102133;
  --chrome-fg-dim:#5b6877;
  --chrome-card:rgba(255,255,255,.72);
  --chrome-card-strong:rgba(255,255,255,.88);
  --chrome-line:rgba(33,59,89,.14);
  --chrome-shadow:0 24px 70px -34px rgba(15,33,56,.42),0 1px 0 rgba(255,255,255,.75) inset;
}
.gallery-bg-dark{
  --gallery-bg:
    radial-gradient(880px 620px at 9% -10%, rgba(140,200,255,.18), transparent 62%),
    radial-gradient(760px 580px at 92% 2%, rgba(58,113,166,.18), transparent 58%),
    radial-gradient(860px 620px at 50% 108%, rgba(0,92,171,.20), transparent 62%),
    linear-gradient(135deg,#06090d 0%,#0d131a 48%,#101822 100%);
  --chrome-fg:#edf5ff;
  --chrome-fg-dim:#a5b5c8;
  --chrome-card:rgba(18,26,35,.70);
  --chrome-card-strong:rgba(21,30,40,.88);
  --chrome-line:rgba(205,224,245,.14);
  --chrome-shadow:0 26px 80px -34px rgba(0,0,0,.82),0 1px 0 rgba(255,255,255,.08) inset;
}
body{
  min-height:100vh;
  padding-top:84px;
  background-attachment:fixed;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(color-mix(in srgb,var(--chrome-fg) 5%,transparent) 1px, transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--chrome-fg) 5%,transparent) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at 50% 4%, black 0%, transparent 74%);
  opacity:.58;
}
.gallery-head,.gallery{position:relative;z-index:1;}

/* Showcase top navigation */
.topbar{
  position:fixed !important;
  top:12px;
  left:50%;
  z-index:1000;
  transform:translateX(-50%);
  width:calc(100% - 32px);
  max-width:var(--gallery-max);
  margin:0;
  padding:10px 12px 10px 14px;
  border-radius:var(--shape-full);
  background:color-mix(in srgb,var(--chrome-card-strong) 86%,transparent);
  color:var(--chrome-fg);
  border:1px solid var(--chrome-line);
  box-shadow:var(--chrome-shadow);
  backdrop-filter:blur(22px) saturate(1.35);
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.topbar::-webkit-scrollbar{display:none;}
.topbar__brand{font-size:15px;gap:12px;min-width:0;}
.topbar__brand .logo{
  width:38px;
  height:38px;
  border-radius:10px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.45), transparent 28%),
    linear-gradient(135deg,var(--primary),var(--tertiary));
  box-shadow:0 12px 28px -14px var(--primary),0 1px 0 rgba(255,255,255,.32) inset;
}
.topbar__brand .logo .material-symbols-outlined{font-size:22px;font-variation-settings:'FILL' 1,'wght' 500;}
.topbar__brand > span:last-child{display:flex;flex-direction:column;line-height:1.08;min-width:0;}
.topbar__brand strong{font-size:15px;font-weight:900;letter-spacing:-.25px;white-space:nowrap;}
.topbar__brand small{margin-top:3px;color:var(--chrome-fg-dim);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;}
.topbar__group{
  gap:4px;
  padding:4px;
  background:color-mix(in srgb,var(--chrome-fg) 7%,transparent);
  border:1px solid var(--chrome-line);
}
.seg-btn{height:34px;padding:0 14px;color:var(--chrome-fg-dim);}
.seg-btn:hover{color:var(--chrome-fg);background:color-mix(in srgb,var(--chrome-fg) 6%,transparent);}
.seg-btn.is-active{
  color:var(--on-primary);
  background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--tertiary) 78%,var(--primary)));
  box-shadow:0 10px 24px -15px var(--primary);
}
.swatch-row{padding-left:4px;}
.swatch{
  width:25px;
  height:25px;
  border-color:color-mix(in srgb,var(--chrome-fg) 10%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,#fff 28%,transparent) inset,0 8px 18px -14px #000;
}
.swatch:hover{transform:translateY(-1px) scale(1.05);}
.swatch.is-active{border-color:var(--chrome-card-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 24%,transparent),0 12px 22px -14px #000;}

/* Hero header for the prototype page */
.gallery-head{
  width:calc(100% - 32px);
  max-width:var(--gallery-max);
  margin:24px auto 0;
  padding:clamp(28px,5vw,64px);
  text-align:left;
  color:var(--chrome-fg);
  border-radius:clamp(21px,3vw,39px);
  border:1px solid var(--chrome-line);
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--chrome-card-strong) 92%,transparent),color-mix(in srgb,var(--chrome-card) 74%,transparent)),
    radial-gradient(720px 420px at 96% 8%, color-mix(in srgb,var(--primary) 24%,transparent), transparent 62%);
  box-shadow:var(--chrome-shadow);
  backdrop-filter:blur(22px) saturate(1.28);
  overflow:hidden;
}
.gallery-head::before,.gallery-head::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.gallery-head::before{
  width:360px;
  height:360px;
  right:-110px;
  top:-150px;
  background:radial-gradient(circle,color-mix(in srgb,var(--primary) 31%,transparent),transparent 68%);
}
.gallery-head::after{
  width:220px;
  height:220px;
  right:18%;
  bottom:-150px;
  background:radial-gradient(circle,color-mix(in srgb,var(--tertiary) 22%,transparent),transparent 70%);
}
.gallery-head > *{position:relative;z-index:1;}
.gallery-head__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 13px;
  border-radius:var(--shape-full);
  border:1px solid var(--chrome-line);
  background:color-mix(in srgb,var(--chrome-fg) 6%,transparent);
  color:var(--chrome-fg-dim);
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.gallery-head__eyebrow .material-symbols-outlined{font-size:16px;color:var(--primary);}
.gallery-head h1{
  max-width:1180px;
  margin:18px 0 0;
  font-size:clamp(40px,7vw,78px);
  line-height:.98;
  letter-spacing:-.06em;
  font-weight:900;
}
.gallery-head h1 span{
  display:inline-block;
  color:transparent;
  background:linear-gradient(100deg,var(--primary),var(--tertiary),color-mix(in srgb,var(--primary) 45%,var(--chrome-fg)));
  -webkit-background-clip:text;
  background-clip:text;
}
.gallery-head__lead{
  max-width:720px;
  margin:22px 0 0;
  color:var(--chrome-fg-dim);
  font-size:clamp(15px,1.7vw,19px);
  line-height:1.62;
  letter-spacing:-.01em;
}
.gallery-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  max-width:760px;
  margin-top:30px;
}
.gallery-stat{
  min-height:88px;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--chrome-line);
  background:color-mix(in srgb,var(--chrome-card-strong) 72%,transparent);
  box-shadow:0 16px 36px -28px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.42) inset;
}
.gallery-stat strong{
  display:block;
  color:var(--primary);
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-size:32px;
  line-height:1;
  letter-spacing:-.06em;
}
.gallery-stat span{display:block;margin-top:8px;color:var(--chrome-fg-dim);font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;}

/* Gallery cards */
.gallery{
  max-width:var(--gallery-max);
  margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap:58px 34px;
  padding:42px clamp(16px,3vw,34px) 110px;
}
.frame-wrap{
  position:relative;
  width:356px;
  max-width:100%;
  gap:16px;
  padding:8px 8px 0;
  border-radius:34px;
  transition:transform .28s ease,filter .28s ease;
}
.frame-wrap::before{
  content:"";
  position:absolute;
  inset:58px 0 10px;
  z-index:-1;
  border-radius:36px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--chrome-card) 70%,transparent),transparent 72%);
  filter:blur(.2px);
  opacity:.88;
}
.frame-wrap:hover{transform:translateY(-5px);filter:saturate(1.04);}
.frame-label{
  width:min(100%,324px);
  min-height:54px;
  justify-content:center;
  padding:10px 16px;
  border-radius:16px;
  border:1px solid var(--chrome-line);
  background:color-mix(in srgb,var(--chrome-card-strong) 78%,transparent);
  color:var(--chrome-fg);
  box-shadow:0 18px 44px -34px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.40) inset;
  backdrop-filter:blur(18px) saturate(1.22);
}
.frame-label .n{width:100%;max-width:100%;font-size:14px;letter-spacing:-.25px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.frame-label .k{color:var(--chrome-fg-dim);font-size:10px;letter-spacing:.11em;text-transform:uppercase;}

/* More realistic phone shell */
.device{
  border-radius:38px;
  padding:12px;
  background:
    linear-gradient(145deg,#242b34 0%,#090d12 42%,#020306 100%);
  box-shadow:
    0 36px 74px -32px rgba(0,0,0,.78),
    0 18px 42px -34px var(--primary),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 0 7px rgba(255,255,255,.015) inset;
  isolation:isolate;
  transition:transform .28s ease,box-shadow .28s ease;
}
.frame-wrap:hover .device{
  box-shadow:
    0 46px 92px -35px rgba(0,0,0,.82),
    0 22px 52px -34px var(--primary),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 0 7px rgba(255,255,255,.018) inset;
}
.device::before{
  content:"";
  position:absolute;
  inset:7px;
  z-index:7;
  border-radius:32px;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 0 0 1px rgba(0,0,0,.62) inset;
}
.device::after{
  top:12px;
  width:112px;
  height:25px;
  border-radius:0 0 14px 14px;
  background:linear-gradient(180deg,#030508,#070b10);
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 10px 18px -12px rgba(0,0,0,.9);
  z-index:9;
}
.device__screen{
  border-radius:28px;
  background:
    radial-gradient(120% 90% at 50% -5%, color-mix(in srgb,var(--primary-container) 42%,transparent), transparent 56%),
    var(--background);
  box-shadow:0 0 0 1px rgba(255,255,255,.04),0 0 0 1px rgba(0,0,0,.45) inset;
}
.device__screen::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.16),transparent 22%,transparent 76%,rgba(255,255,255,.06));
  mix-blend-mode:soft-light;
}
.statusbar{
  position:relative;
  z-index:3;
  height:35px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(12px);
}
.screen-body{
  background:
    radial-gradient(180px 160px at 15% -8%, color-mix(in srgb,var(--primary-container) 40%,transparent), transparent 72%),
    linear-gradient(180deg,color-mix(in srgb,var(--background) 96%,var(--surface-container-low)),var(--background));
}
.screen-body.brand-fill{
  background:
    radial-gradient(290px 260px at 16% 2%, color-mix(in srgb,var(--on-primary) 21%,transparent), transparent 66%),
    radial-gradient(360px 320px at 92% 100%, color-mix(in srgb,var(--tertiary) 52%,transparent), transparent 62%),
    linear-gradient(145deg,var(--primary),color-mix(in srgb,var(--primary) 76%,#001a33));
}

/* Premium app components inside the frames */
.app-bar{
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--outline-variant) 54%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);
}
.app-bar__title{letter-spacing:-.55px;}
.bottom-nav{
  background:color-mix(in srgb,var(--surface) 90%,transparent);
  border-top:1px solid color-mix(in srgb,var(--outline-variant) 58%,transparent);
  box-shadow:0 -18px 34px -30px rgba(0,0,0,.45);
  backdrop-filter:blur(14px) saturate(1.18);
}
.bottom-nav__pill{transition:transform .16s ease,background .16s ease;}
.bottom-nav__item.is-active .bottom-nav__pill{box-shadow:0 8px 20px -16px var(--primary);}
.bottom-nav__item:hover .bottom-nav__pill{transform:translateY(-1px);}
.btn{
  position:relative;
  overflow:hidden;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--outline-variant) 18%,transparent) inset;
}
.btn::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.18),transparent);
  transform:translateX(-120%);
  transition:transform .42s ease;
}
.btn:hover::after{transform:translateX(120%);}
.btn--filled,.fab--primary,.add-sq{
  background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--tertiary) 70%,var(--primary)));
  color:var(--on-primary);
  box-shadow:0 14px 30px -20px var(--primary),0 1px 0 rgba(255,255,255,.20) inset;
}
.btn--outlined{
  background:color-mix(in srgb,var(--surface) 72%,transparent);
  border-color:color-mix(in srgb,var(--primary) 32%,var(--outline-variant));
}
.btn--tonal,.btn--elevated{box-shadow:0 12px 28px -22px rgba(0,0,0,.42),0 1px 0 rgba(255,255,255,.24) inset;}
.icon-btn{transition:transform .16s ease,background .16s ease,color .16s ease;}
.icon-btn:hover{transform:translateY(-1px);}
.card,.product-card,.product-row{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 98%,var(--surface-container-low)),var(--surface));
  border:1px solid color-mix(in srgb,var(--outline-variant) 48%,transparent);
  box-shadow:0 12px 28px -24px rgba(0,0,0,.38),0 1px 0 rgba(255,255,255,.26) inset;
}
.card--filled,.surface-cont,.surface-low{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface-container-high) 88%,var(--surface)),var(--surface-container-low));
}
.card--outlined{border-color:color-mix(in srgb,var(--outline-variant) 66%,transparent);}
.section-header .ttl,.section-header__ttl{letter-spacing:-.45px;}
.list-item__lead,.shortcut .ic,.cat-rail-tile .ic,.state-msg__icon{
  box-shadow:0 10px 24px -20px var(--primary),0 1px 0 rgba(255,255,255,.24) inset;
}
.chip{
  background:color-mix(in srgb,var(--surface) 66%,transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset;
}
.chip.is-selected,.bottom-nav__item.is-active .bottom-nav__pill{
  background:linear-gradient(135deg,var(--primary-container),color-mix(in srgb,var(--primary-container) 78%,var(--surface)));
}
.tf{
  background:color-mix(in srgb,var(--surface-container-highest) 82%,var(--surface));
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset;
}
.tf--outlined{
  background:color-mix(in srgb,var(--surface) 70%,transparent);
  border-color:color-mix(in srgb,var(--outline-variant) 68%,transparent);
}
.tf--focused{box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 13%,transparent);}
.brand-logo-card{
  border:1px solid color-mix(in srgb,var(--primary) 18%,transparent);
  background:
    radial-gradient(130% 120% at 20% 0%, color-mix(in srgb,var(--primary-container) 74%,transparent), transparent 56%),
    var(--surface);
  box-shadow:0 18px 42px -28px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.50) inset;
}
.brand-fill .brand-logo-card{
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  box-shadow:0 24px 54px -28px rgba(0,0,0,.50),0 1px 0 rgba(255,255,255,.56) inset;
}
.screen-body .hero{
  min-height:176px;
  border:1px solid color-mix(in srgb,var(--on-primary) 14%,transparent);
  background:
    radial-gradient(190px 150px at 88% 12%, color-mix(in srgb,var(--on-primary) 23%,transparent), transparent 70%),
    radial-gradient(220px 180px at 5% 120%, color-mix(in srgb,var(--tertiary) 62%,transparent), transparent 76%),
    linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--tertiary) 82%,var(--primary)));
  box-shadow:0 18px 34px -28px var(--primary),0 1px 0 rgba(255,255,255,.18) inset;
}
.voucher{
  background:
    radial-gradient(180px 150px at 86% 0%, color-mix(in srgb,var(--on-primary) 20%,transparent), transparent 72%),
    linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--secondary) 54%,var(--primary)));
  box-shadow:0 18px 38px -28px var(--primary),0 1px 0 rgba(255,255,255,.18) inset;
}
.product-card__img,.product-row__img,.thumb,.media-thumb,.media-hero{
  background:
    radial-gradient(90% 80% at 50% 18%, color-mix(in srgb,var(--surface) 94%,white), transparent 58%),
    linear-gradient(145deg,var(--surface-container-low),var(--surface-container-high));
}
.product-card__img .material-symbols-outlined,.product-row__img .material-symbols-outlined,.thumb .material-symbols-outlined{
  color:color-mix(in srgb,var(--primary) 76%,var(--outline));
}
.cat-tile{
  background:
    radial-gradient(110px 100px at 84% 8%, color-mix(in srgb,#fff 24%,transparent), transparent 70%),
    linear-gradient(135deg,var(--tertiary),var(--primary));
  box-shadow:0 16px 34px -26px var(--primary);
}
.shortcut,.cat-rail-tile{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface-container) 86%,var(--surface)),var(--surface-container-low));
  border:1px solid color-mix(in srgb,var(--outline-variant) 45%,transparent);
  box-shadow:0 12px 26px -24px rgba(0,0,0,.42),0 1px 0 rgba(255,255,255,.24) inset;
}
.dialog,.bottom-sheet{
  border:1px solid color-mix(in srgb,var(--outline-variant) 44%,transparent);
  box-shadow:0 26px 68px -26px rgba(0,0,0,.58),0 1px 0 rgba(255,255,255,.20) inset;
}
.scrim{backdrop-filter:blur(8px) saturate(.9);}
.snackbar{box-shadow:0 18px 44px -26px rgba(0,0,0,.75);}
.spinner{filter:drop-shadow(0 6px 12px color-mix(in srgb,var(--primary) 20%,transparent));}

@media (max-width:900px){
  .topbar{border-radius:21px;flex-wrap:nowrap;align-items:center;}
  .topbar__spacer{display:none;}
  .topbar__brand{flex:0 0 auto;}
  .gallery-head{padding:30px;}
  .gallery-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:520px){
  body{padding-top:80px;}
  .topbar{top:8px;width:calc(100% - 20px);margin:0;padding:10px;border-radius:18px;gap:10px;}
  .topbar__group{order:0;flex:0 0 auto;justify-content:center;}
  .seg-btn{flex:0 0 auto;justify-content:center;padding:0 10px;}
  .device-switch{order:0;flex:0 0 auto;}
  .swatch-row{order:0;flex:0 0 auto;justify-content:center;}
  .gallery-head{width:calc(100% - 20px);margin-top:14px;padding:24px;border-radius:21px;}
  .gallery-head h1{font-size:40px;letter-spacing:-.055em;}
  .gallery-head__lead{font-size:14px;line-height:1.55;}
  .gallery-stats{gap:10px;margin-top:22px;}
  .gallery-stat{min-height:78px;padding:13px;border-radius:14px;}
  .gallery-stat strong{font-size:26px;}
  .gallery{padding:28px 10px 72px;gap:44px;}
  .frame-label{width:min(100%,312px);}
}
@media (max-width:380px){
  :root{--device-w:320px;--device-h:692px;}
  .frame-wrap{padding-left:0;padding-right:0;}
}
@media (prefers-reduced-motion:reduce){
  .frame-wrap,.device,.btn::after,.gallery-head::before,.gallery-head::after{transition:none;animation:none;}
  .frame-wrap:hover,.frame-wrap:hover .device,.icon-btn:hover,.bottom-nav__item:hover .bottom-nav__pill{transform:none;}
}

/* Filter sheet refinements */
.bottom-sheet{
  background:
    radial-gradient(280px 180px at 86% 0%, color-mix(in srgb,var(--primary-container) 52%,transparent), transparent 70%),
    color-mix(in srgb,var(--surface-container-low) 92%,var(--surface));
}
.bottom-sheet__grip{width:42px;height:5px;background:color-mix(in srgb,var(--outline) 38%,transparent);}
.filter-sheet__head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 18px 10px;}
.filter-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 16px 10px;padding:12px 14px;border-radius:14px;
  background:var(--primary-container);color:var(--on-primary-container);font-size:12px;font-weight:800;}
.filter-summary strong{font-size:18px;line-height:1;}
.filter-section{margin:8px 12px 0;padding:12px;border-radius:16px;background:color-mix(in srgb,var(--surface) 78%,transparent);}
.filter-section__label{display:flex;align-items:center;justify-content:space-between;margin:0 4px 10px;color:var(--on-surface);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;}
.bottom-sheet .filter-chip-row{padding:0;gap:8px;row-gap:8px;}
.bottom-sheet .filter-chip-row .chip{height:36px;border-radius:var(--shape-full);background:var(--surface-container-low);}
.bottom-sheet .filter-chip-row .chip.is-selected{background:var(--primary);color:var(--on-primary);border-color:transparent;box-shadow:0 10px 20px -16px var(--primary);}
.bottom-sheet .filter-chip-row .chip.is-selected .material-symbols-outlined{color:var(--on-primary);}
.filter-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--shape-full);
  background:color-mix(in srgb,var(--on-surface) 8%,transparent);font-size:10px;font-weight:900;}
.chip.is-selected .filter-count{background:color-mix(in srgb,var(--on-primary) 22%,transparent);color:var(--on-primary);}
.filter-range-values{display:flex;align-items:center;justify-content:space-between;margin:0 4px 4px;color:var(--primary);font-size:13px;font-weight:900;}
.filter-section .slider{padding:0 2px 2px;}
.filter-section .slider__track{height:6px;border-radius:999px;background:color-mix(in srgb,var(--primary-container) 70%,var(--surface-variant));}
.filter-section .slider__fill{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--tertiary));}
.filter-section .slider__thumb{width:22px;height:22px;border:4px solid var(--surface);box-shadow:0 8px 18px -10px var(--primary);}
.filter-actions{position:sticky;bottom:0;padding:14px 16px 16px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--surface-container-low) 96%,transparent) 22%);}

/* Product detail flat mode: fewer outlines, calmer surfaces */
.product-detail-screen{
  background:linear-gradient(180deg,var(--background),color-mix(in srgb,var(--surface-container-low) 72%,var(--background)));
}
.product-detail-screen .media-hero{
  border:0;
  box-shadow:none;
  background:
    radial-gradient(180px 150px at 70% 18%, color-mix(in srgb,var(--primary) 16%,transparent), transparent 72%),
    linear-gradient(145deg,var(--surface-container-low),var(--surface-container-high));
}
[data-theme="light"] .product-detail-screen .media-hero{
  background:var(--surface);
}
[data-theme="dark"] .product-detail-screen .media-hero{
  background:
    radial-gradient(180px 150px at 70% 18%, color-mix(in srgb,var(--primary) 16%,transparent), transparent 72%),
    linear-gradient(145deg,var(--surface-container-low),var(--surface-container-high));
}
.product-detail-screen .media-hero__btn,.product-detail-screen .thumb-strip__item{
  border:0;
  box-shadow:none;
  background:color-mix(in srgb,var(--surface) 78%,transparent);
}
.product-detail-screen .product-flat-hero{
  position:relative;
  height:200px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,var(--surface-container-low),var(--surface-container-high));
}
.product-detail-screen .thumb-strip__item.is-active{background:var(--primary-container);color:var(--on-primary-container);}
.product-detail-screen .card,.product-detail-screen .card--outlined{
  border-color:transparent;
  box-shadow:none;
  background:color-mix(in srgb,var(--surface-container-low) 78%,var(--surface));
}
.product-detail-screen .section-header{padding-top:20px;padding-bottom:8px;}
.product-detail-screen .divider{background:transparent;height:10px;}
.product-detail-screen .spec-grid{gap:8px;background:transparent;border-radius:0;overflow:visible;}
.product-detail-screen .spec{border-radius:12px;background:color-mix(in srgb,var(--surface-container-low) 82%,var(--surface));}
.product-detail-screen .action-bar{border-top:1px solid color-mix(in srgb,var(--outline-variant) 70%,transparent);background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:0 -18px 34px -30px rgba(0,0,0,.48);}
.product-detail-screen .action-bar{gap:10px;padding:10px 14px;}
.product-detail-screen .action-bar .btn{
  height:44px;
  min-width:0;
  padding:0 14px;
  font-size:13px;
  flex:0 1 168px;
}
.product-detail-screen .action-bar .btn .material-symbols-outlined{font-size:18px;}
.product-detail-screen .action-bar .price__cur{font-size:18px;}
.product-detail-screen .action-bar .price__old{font-size:11px;}

/* Real brand logo: transparent, no card/border wrapper */
.brand-logo-card{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  color:var(--primary);
}
.brand-fill .brand-logo-card{background:transparent !important;box-shadow:none !important;}
.brand-logo-img{display:block;width:100%;height:100%;object-fit:contain;}
.brand-logo-img--white{filter:brightness(0) invert(1);}
.topbar__logo-img{display:block;width:100%;height:100%;object-fit:contain;}
.topbar__brand .logo{background:transparent !important;box-shadow:none !important;color:var(--primary);}
.app-bar-logo{display:block;width:178px;height:34px;object-fit:contain;}
[data-theme="dark"] .brand-logo-img,
[data-theme="dark"] .app-bar-logo,
[data-theme="dark"] .topbar__logo-img{filter:brightness(0) invert(1);}
[data-theme="light"] .brand-fill .brand-logo-img--splash{filter:brightness(0) invert(1) !important;}
[data-theme="dark"] .brand-fill .brand-logo-img--splash{filter:brightness(0) !important;}

/* Device frame switcher */
.device-switch .seg-btn{padding-inline:12px;}
[data-device="galaxy"] .device{
  border-radius:30px;
  padding:9px;
  background:
    linear-gradient(145deg,#6f7883 0%,#20262d 34%,#090c10 100%);
  box-shadow:
    0 34px 72px -34px rgba(0,0,0,.78),
    0 16px 40px -34px var(--primary),
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 0 0 5px rgba(255,255,255,.025) inset;
}
[data-device="galaxy"] .device::before{
  inset:6px;
  border-radius:24px;
  border-color:rgba(255,255,255,.10);
  box-shadow:0 0 0 1px rgba(0,0,0,.56) inset;
}
[data-device="galaxy"] .device::after{
  top:21px;
  width:13px;
  height:13px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#2b333d 0 18%,#020406 42% 100%);
  box-shadow:0 0 0 2px rgba(255,255,255,.07),0 8px 14px -10px rgba(0,0,0,.9);
}
[data-device="galaxy"] .device__screen{
  border-radius:24px;
}
[data-device="galaxy"] .device__screen::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:32px;
  z-index:8;
  pointer-events:none;
  background:
    linear-gradient(45deg,transparent 43%,rgba(255,255,255,.78) 44% 56%,transparent 57%) 31% 50% / 14px 14px no-repeat,
    radial-gradient(circle,transparent 0 4px,rgba(255,255,255,.78) 4.5px 5.5px,transparent 6px) 50% 50% / 18px 18px no-repeat,
    linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.78)) 69% 50% / 14px 2px no-repeat,
    linear-gradient(180deg,#06080b,#020304);
  box-shadow:0 -10px 24px -18px rgba(0,0,0,.8);
}
[data-device="galaxy"] .screen-body{padding-bottom:32px;}
[data-device="galaxy"] .bottom-nav,
[data-device="galaxy"] .action-bar{margin-bottom:32px;}
[data-device="galaxy"] .statusbar{padding-left:22px;padding-right:22px;}
[data-device="galaxy"] .frame-wrap:hover .device{
  box-shadow:
    0 44px 88px -36px rgba(0,0,0,.82),
    0 20px 50px -34px var(--primary),
    0 0 0 1px rgba(255,255,255,.16) inset,
    0 0 0 5px rgba(255,255,255,.03) inset;
}