/* ===========================================================
   GAR — order-flow POC, built on the CLIENT-APPROVED homepage
   design (gar-homepage.html). Section 1 below is that file's
   own CSS, unchanged. Section 2 extends it with the components
   needed for Shop / Product / Cart / Checkout so the whole
   order flow shares one consistent, already-approved look.
   =========================================================== */

/* ===================== Brand typefaces (self-hosted) =====================
   Chromatica (headline/subheading) + Red Hat Text (body) for English; Noto Sans HK swaps in for
   Traditional Chinese under body[data-lang="zh"] below. See /Claude doc/Style_Guideline.md for
   the full typography rules this implements, including a licensing note: Chromatica's webfont
   license only covers www.hkjc.com — see that doc before deploying this prototype anywhere
   public that isn't a local/internal preview. */
@font-face{font-family:"Chromatica";src:url("fonts/Chromatica/Chromatica-Regular.woff2") format("woff2"),url("fonts/Chromatica/Chromatica-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Chromatica";src:url("fonts/Chromatica/Chromatica-Medium.woff2") format("woff2"),url("fonts/Chromatica/Chromatica-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Chromatica";src:url("fonts/Chromatica/Chromatica-Bold.woff2") format("woff2"),url("fonts/Chromatica/Chromatica-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Red Hat Text";src:url("fonts/RedHatText/RedHatText-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Red Hat Text";src:url("fonts/RedHatText/RedHatText-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Red Hat Text";src:url("fonts/RedHatText/RedHatText-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans HK";src:url("fonts/NotoSansHK/NotoSansHK-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans HK";src:url("fonts/NotoSansHK/NotoSansHK-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans HK";src:url("fonts/NotoSansHK/NotoSansHK-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

/* ===================== 1. CLIENT-APPROVED BASE ===================== */
:root{
  --navy:#16276b;
  --navy-bar:#132861;
  --teal:#00bac6;
  --teal-dark:#0099a3;
  --gold:#c9a227;
  --gray:#efefef;
  --line:#e6e9ef;
  --ink:#1f2733;
  --ease:cubic-bezier(.2,.8,.2,1);
  --shadow:0 8px 22px rgba(20,40,90,.10);
  --shadow-hover:0 16px 34px rgba(20,40,90,.18);
  --max:1280px;
  --muted:#727c8c;
  --accent-red:#c0392b;
  --radius:12px;
  /* Brand type roles — see Style_Guideline.md §1.1. Headline/subheading use Chromatica for
     English; body copy (and anything functional: buttons, labels, prices) uses Red Hat Text. */
  --font-headline:"Chromatica","Red Hat Text","Helvetica Neue",Arial,"Microsoft JhengHei",sans-serif;
  --font-subheading:"Chromatica","Red Hat Text","Helvetica Neue",Arial,"Microsoft JhengHei",sans-serif;
  --font-body:"Red Hat Text","Helvetica Neue",Arial,"Segoe UI","Microsoft JhengHei",sans-serif;
}
/* Traditional Chinese swap — the whole page is one language at a time (GAR.applyLang() sets
   this attribute), so headline/subheading/body all move to Noto Sans HK together. */
body[data-lang="zh"]{
  --font-headline:"Noto Sans HK","Microsoft JhengHei",sans-serif;
  --font-subheading:"Noto Sans HK","Microsoft JhengHei",sans-serif;
  --font-body:"Noto Sans HK","Microsoft JhengHei",sans-serif;
}
*{box-sizing:border-box}
/* Safety net: many components below set an unconditional non-"none" `display` on their base
   class (e.g. display:flex for a banner/badge/panel). Those are author-stylesheet rules, and
   author rules always beat the browser's default `[hidden]{display:none}` UA rule regardless
   of specificity — so any element toggled via the `hidden` attribute/property would ignore it
   and stay visible. This single !important rule guarantees `hidden` always wins, everywhere,
   without having to audit/patch every individual component class. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);
  font-family:var(--font-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.page{max-width:var(--max);margin:0 auto}

.banner{display:block;line-height:0;position:relative;cursor:pointer}
.banner img{width:100%;display:block}
.banner::after{content:"";position:absolute;inset:0;background:rgba(22,39,107,0);transition:background .2s}
.banner:hover::after{background:rgba(22,39,107,.05)}

.hkir-teaser{display:flex;align-items:center;gap:16px;background:linear-gradient(90deg,#0b1230,#1c2657);color:#fff;
  border-radius:0;padding:16px 28px;margin:0;text-decoration:none;flex-wrap:wrap}
.hkir-teaser-badge{background:var(--gold);color:#3a2e05;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:6px;padding:4px 10px}
.hkir-teaser-title{font-weight:700;font-size:1rem;flex:1}
.hkir-teaser-cta{font-weight:700;font-size:.88rem;color:#f4d982;white-space:nowrap}
.hkir-teaser:hover .hkir-teaser-cta{text-decoration:underline}

.hkir-hero{background:linear-gradient(135deg,#0b1230,#1c2657 60%,#2a3572);color:#fff;padding:54px 0;margin-bottom:6px}
.hkir-hero-inner{max-width:640px}
.hkir-hero-badge{display:inline-block;background:var(--gold);color:#3a2e05;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:6px;padding:5px 12px;margin-bottom:14px}
.hkir-hero h1{font-size:2.1rem;margin:0 0 12px;line-height:1.2;font-family:var(--font-headline);font-weight:700}
.hkir-hero p{font-size:.95rem;color:#cfd6f0;margin:0 0 18px}
.hkir-countdown{display:inline-block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:9px;padding:9px 16px;font-weight:700;font-size:.9rem;letter-spacing:.02em}
.hkir-sub{color:var(--muted);font-size:.88rem;margin:4px 0 0}
.hkir-card-note{font-size:.78rem;color:#7a5b0a;font-weight:600;margin-top:4px}
.hkir-card-eta{font-size:.78rem;color:var(--muted);margin-top:2px}

h2.sec{text-align:center;color:var(--navy);font-size:32px;font-weight:700;letter-spacing:.5px;margin:0;padding:36px 0 24px;font-family:var(--font-headline)}

.topbar{background:var(--navy-bar);color:#fff;text-align:center;font-size:13.5px;padding:10px}
.topbar b{font-weight:700}.topbar a{text-decoration:underline;margin-left:6px}

.head-band{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:80;box-shadow:0 2px 10px rgba(20,40,90,.04)}
.header{display:flex;align-items:center;gap:24px;padding:14px 28px}
.header .logo img{height:52px;display:block}
.search{flex:1;max-width:500px;margin:0 auto;display:flex;align-items:center;gap:10px;
  background:#f4f6f9;border:1px solid var(--line);border-radius:999px;padding:11px 20px}
.search input{border:none;background:transparent;outline:none;flex:1;font-size:15px;color:#333}
.search .mag{height:18px;opacity:.6}
.actions{display:flex;align-items:center;gap:20px;font-size:13px;font-weight:600;color:var(--navy)}
.actions a,.actions button{display:flex;align-items:center;gap:6px}
.actions img{height:18px;display:block}
.actions button.langbtn{background:none;border:0;font:inherit;font-weight:600;color:var(--navy);cursor:pointer;padding:0}
.actions button.langbtn:hover{color:var(--teal-dark)}
.actions .cartlink{position:relative}
.bagcount{position:absolute;top:-8px;right:-10px;background:var(--teal);color:#fff;font-size:10.5px;font-weight:800;
  min-width:17px;height:17px;border-radius:999px;display:grid;place-items:center;padding:0 3px;line-height:1}
nav.main{border-top:1px solid var(--line)}
nav.main ul{max-width:var(--max);margin:0 auto;padding:0 28px;list-style:none;display:flex;gap:38px;height:52px;align-items:center}
nav.main a{font-size:15px;font-weight:600;color:#2a3140;height:52px;display:flex;align-items:center;position:relative}
nav.main a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--navy);transform:scaleX(0);transition:transform .2s var(--ease)}
nav.main a:hover::after,nav.main a.active::after{transform:scaleX(1)}
nav.main a.active{color:var(--navy)}

.silks{display:flex;justify-content:center;gap:44px;padding:18px 28px 22px}
.silk{display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer}
.silk .disc{width:108px;height:108px;border-radius:50%;background:#f4f6f9;display:grid;place-items:center;
  transition:transform .22s var(--ease),box-shadow .22s}
.silk .disc img{height:64px;display:block}
.silk:hover .disc{transform:translateY(-6px);box-shadow:var(--shadow)}
.silk span{font-size:15px;font-weight:700;color:var(--navy)}

.prow{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;padding:0 28px 8px}
.pcard{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;transition:transform .22s var(--ease),box-shadow .22s;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.pcard .pimg{height:190px;background:#f6f7f9;position:relative;display:grid;place-items:center;overflow:hidden}
.pcard .pimg img{max-height:150px;max-width:78%;object-fit:contain;transition:transform .35s var(--ease)}
.pcard:hover .pimg img{transform:scale(1.07)}
.qbuy{position:absolute;left:0;right:0;bottom:0;background:var(--navy);color:#fff;text-align:center;
  font-weight:600;font-size:14px;padding:10px;cursor:pointer;transition:background .2s;border:0;width:100%;font-family:inherit}
.qbuy:hover{background:#0f1c52}
.qbuy.added{background:var(--teal-dark)}
.pcard .pbody{padding:12px 12px 16px;display:flex;flex-direction:column;flex:1}
.pcard .pname{font-size:12.5px;color:#333;line-height:1.4;min-height:52px}
.pcard .pname:hover{color:var(--navy)}
.pcard .pprice{margin-top:6px;font-size:16px;font-weight:800;color:var(--navy)}
.pcard-badge{position:absolute;top:10px;left:10px;z-index:2;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:.35em .7em;border-radius:999px;color:#fff}
.b-new{background:var(--navy)} .b-limited{background:var(--gold);color:#3a2e05} .b-exclusive{background:#111} .b-last{background:var(--accent-red)}

.legends{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 28px}
.legends a{display:block;line-height:0;overflow:hidden;cursor:pointer}
.legends img{width:100%;display:block;transition:transform .4s var(--ease)}
.legends a:hover img{transform:scale(1.05)}

.pony{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:0 28px}
.pony a{display:block;line-height:0;border-radius:12px;overflow:hidden;cursor:pointer;box-shadow:var(--shadow);background:#fff}
.pony img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;display:block;transition:transform .4s var(--ease)}
.pony a:hover img{transform:scale(1.06)}

.hof{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;padding:0 28px}
.hof .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hof-text h3{font-size:40px;font-weight:700;color:var(--navy);margin:0 0 18px;font-family:var(--font-headline)}
.hof-text p{color:#5a6472;font-size:14.5px;line-height:1.7;margin:0 0 14px}

.showcase{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:0 28px}
.showcase a{display:block;line-height:0;border-radius:14px;overflow:hidden;cursor:pointer;box-shadow:var(--shadow)}
.showcase img{width:100%;display:block;transition:transform .4s var(--ease)}
.showcase a:hover img{transform:scale(1.05)}

.btn-navy{background:var(--navy);color:#fff;border:none;font-weight:700;font-size:16px;padding:15px 46px;border-radius:10px;
  cursor:pointer;display:block;margin:30px auto 8px;transition:.2s;font-family:inherit}
.btn-navy:hover{background:#0f1c52;transform:translateY(-2px)}

.news{background:var(--gray);text-align:center;padding:52px 28px;margin-top:20px}
.news h2{color:var(--navy);font-size:32px;font-weight:700;margin:0 0 12px;font-family:var(--font-headline)}
.news p{color:#3a4250;font-size:16px;margin:0 auto 26px;max-width:720px}
.news p b{color:var(--teal)}
.news-form{display:flex;max-width:560px;margin:0 auto;background:#fff;border-radius:10px;padding:8px;box-shadow:var(--shadow)}
.news-form input{flex:1;border:none;outline:none;padding:12px 18px;font-size:15px;font-family:inherit}
.news-form button{background:var(--teal);color:#fff;border:none;font-weight:700;padding:12px 34px;border-radius:7px;cursor:pointer;transition:.2s;font-family:inherit}
.news-form button:hover{background:var(--teal-dark)}

footer.ft{background:var(--teal);color:#fff;padding:42px 0 20px}
.ft-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.1fr;gap:26px}
.ft-brand img{height:70px;display:block}
footer.ft h4{font-size:15px;margin:0 0 14px;font-weight:800}
footer.ft ul{list-style:none;margin:0;padding:0}
footer.ft li{margin-bottom:9px;font-size:13.5px;opacity:.96}
footer.ft li a:hover{text-decoration:underline}
.socials{display:flex;gap:16px;align-items:center;margin-top:2px}
.socials img{height:22px;display:block;transition:transform .2s}
.socials a:hover img{transform:translateY(-2px)}
.ft-bottom{border-top:1px solid rgba(255,255,255,.28);margin-top:32px;padding-top:16px;display:flex;justify-content:space-between;font-size:13px}
.ft-bottom a:hover{text-decoration:underline}

#toTop{position:fixed;right:26px;bottom:26px;z-index:90;width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;
  background:var(--navy);color:#fff;font-size:22px;box-shadow:0 10px 24px rgba(20,40,90,.45);
  opacity:0;visibility:hidden;transform:translateY(14px);transition:.25s var(--ease)}
#toTop.show{opacity:1;visibility:visible;transform:none}
#toTop:hover{background:#0f1c52;transform:translateY(-3px)}

/* ===================== 2. ORDER-FLOW EXTENSIONS ===================== */

/* shared buttons (used on shop/product/cart/checkout) */
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:.95rem;border:0;cursor:pointer;
  padding:.85em 1.6em;border-radius:10px;transition:.18s ease;font-family:inherit}
.btn-primary{background:var(--navy);color:#fff;box-shadow:0 6px 18px rgba(20,40,90,.25)}
.btn-primary:hover{background:#0f1c52;transform:translateY(-2px)}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-dark);transform:translateY(-2px)}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--navy)}
.btn-ghost:hover{border-color:var(--navy)}

/* nav-item + megamenu dropdown, layered onto nav.main */
nav.main ul{position:relative}
.nav-item{position:relative;height:52px;display:flex;align-items:center}
.megamenu{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 18px 40px rgba(16,42,107,.14);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:.18s ease;z-index:70}
.megamenu.open{opacity:1;visibility:visible;transform:translateY(0)}
.mm-inner{max-width:var(--max);margin:0 auto;padding:26px 28px}
.mm-cols{display:flex;gap:46px}
.mm-col h5{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;font-weight:800}
.mm-horses{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 22px}
.mm-horses a{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);font-size:.92rem}
.mm-horses a:hover{color:var(--navy)}
.mm-ring{width:42px;height:42px;border-radius:50%;overflow:hidden;border:2px solid var(--gold);flex:0 0 auto;background:#f4f6f9;display:grid;place-items:center}
.mm-ring img{height:70%;display:block}
.mm-cats{display:flex;flex-direction:column;gap:10px;min-width:200px}
.mm-cats a{font-weight:700;color:var(--ink);font-size:.95rem}
.mm-cats a:hover{color:var(--navy);padding-left:4px;transition:.15s}

/* breadcrumb (product / shop) */
.breadcrumb{font-size:.82rem;color:var(--muted);padding:20px 0 0}
.breadcrumb a:hover{color:var(--navy)}

/* generic section head used on new pages */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap;padding:0 28px}
.section-head h2{font-size:clamp(1.5rem,2.4vw,2rem);color:var(--navy);font-weight:700;margin:0;font-family:var(--font-headline)}
.section-head a.more{font-weight:700;color:var(--navy)}
.section-head a.more:hover{color:var(--teal-dark)}

/* ---- PLP: collection-story header ---- */
.plp-story{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.plp-story-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.4}
.plp-story::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(19,40,97,.94),rgba(19,40,97,.58))}
.plp-story-inner{position:relative;z-index:1;padding:44px 28px}
.plp-story .breadcrumb{color:#aebbe0;padding:0 0 10px}
.plp-story .breadcrumb a:hover{color:#fff}
.plp-story h1{color:#fff;font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:700;margin:0;font-family:var(--font-headline)}
.plp-story-copy{color:#d7def2;max-width:60ch;margin-top:12px;font-size:1.02rem}

/* ---- PLP: category chips + sort bar ---- */
.plp-bar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:104px;z-index:30}
.plp-bar-inner{display:flex;align-items:center;gap:16px;padding:12px 28px;flex-wrap:wrap}
.lane-chips{display:flex;gap:8px;flex-wrap:wrap}
.lane-chips button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:.45em 1.1em;font-weight:700;
  font-size:.85rem;cursor:pointer;color:var(--ink);transition:.15s;font-family:inherit}
.lane-chips button:hover{border-color:var(--navy)}
.lane-chips button.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.plp-bar-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.result-count{color:var(--muted);font-size:.85rem}
.sort-wrap{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;color:var(--ink)}
.sort-wrap select{border:1.5px solid var(--line);border-radius:8px;padding:.45em .7em;font:inherit;font-weight:600;color:var(--ink);background:#fff;cursor:pointer}

/* ---- PLP layout: filter rail + grid ---- */
.plp-layout{display:grid;grid-template-columns:230px 1fr;gap:30px;align-items:start;padding:28px 28px 0}
.filters-rail{position:sticky;top:164px;font-size:.9rem}
.frail-head{display:flex;align-items:center;justify-content:space-between;font-weight:800;color:var(--ink);
  text-transform:uppercase;font-size:.78rem;letter-spacing:.08em;padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:6px}
.frail-clear{border:0;background:transparent;color:var(--navy);font-weight:700;font-size:.78rem;cursor:pointer;
  text-transform:none;letter-spacing:0;font-family:inherit}
.frail-group{padding:16px 0;border-bottom:1px solid var(--line)}
.frail-group h5{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-weight:800}
.frail-group label{display:flex;align-items:center;gap:9px;padding:5px 0;color:var(--ink);cursor:pointer;font-weight:500}
.frail-group input[type=checkbox]{width:16px;height:16px;accent-color:var(--navy);cursor:pointer}
.f-sale{font-weight:800;color:var(--accent-red)}

/* PLP grid reuses .prow-style card sizing but as a responsive grid */
.plp-layout .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.plp-layout .pcard .pimg{height:210px}
.no-results{text-align:center;color:var(--muted);padding:60px 0}

/* ---- PDP ---- */
.pdp{display:grid;grid-template-columns:1fr .95fr;gap:48px;padding:24px 28px 0;align-items:start}
.pdp-main{position:relative;border-radius:16px;overflow:hidden;background:#f6f7f9;box-shadow:var(--shadow)}
.pdp-main img{width:100%;aspect-ratio:1/1;object-fit:contain;padding:26px}
.pdp-badge{position:absolute;top:14px;left:14px;z-index:2;font-size:.7rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:.35em .8em;border-radius:999px;color:#fff}
.pdp-thumbs{display:flex;gap:10px;margin-top:12px}
.pdp-thumbs[hidden]{display:none}
.pthumb{border:2px solid var(--line);border-radius:8px;overflow:hidden;background:#f6f7f9;cursor:pointer;padding:0;width:64px;height:64px}
.pthumb.on{border-color:var(--navy)}
.pthumb img{width:100%;height:100%;object-fit:contain}
.pdp-info{position:sticky;top:118px}
.pdp-tag{color:var(--navy);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.76rem}
.pdp-info h1{font-size:1.85rem;margin:8px 0 12px;color:var(--navy);font-weight:700;line-height:1.2;font-family:var(--font-headline)}
.pdp-price{font-size:1.5rem;font-weight:800;color:var(--ink);margin-bottom:14px}
.pdp-desc{font-size:1.02rem;color:#3a4250;margin-bottom:20px;line-height:1.6}
.pdp-variant{margin-bottom:16px}
.pdp-vlabel{font-weight:700;font-size:.82rem;color:var(--ink);margin-bottom:8px}
.pdp-options{display:flex;gap:8px;flex-wrap:wrap}
.vopt{border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:.5em 1em;font-weight:700;font-size:.85rem;
  cursor:pointer;color:var(--ink);font-family:inherit}
.vopt.on{border-color:var(--navy);color:var(--navy);background:#eef1fa}
.pdp-qty-row{display:flex;align-items:center;gap:12px;margin:18px 0 14px}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.qty button{border:0;background:#fff;width:38px;height:42px;font-size:1.1rem;cursor:pointer;color:var(--ink);font-family:inherit}
.qty span{min-width:34px;text-align:center;font-weight:700}
.pdp-add{flex:1;justify-content:center}
.pdp-add.pdp-added{background:var(--teal-dark);box-shadow:none}
.pdp-wish{width:46px;height:46px;border:1.5px solid var(--line);border-radius:50%;background:#fff;font-size:1.3rem;cursor:pointer;color:var(--accent-red)}
.pdp-wish:hover{border-color:var(--accent-red)}
.pdp-preorder-actions{display:flex;flex-direction:column;gap:10px;margin:18px 0 14px}
.pdp-preorder-actions .pdp-pay-btn{width:100%;justify-content:center;text-align:center}
.pdp-nudge{background:#eef1fa;color:var(--navy-bar);border-radius:10px;padding:10px 14px;font-size:.88rem;font-weight:600;margin-bottom:18px}
.pdp-gift{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.pdp-gift-toggle{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);cursor:pointer}
.pdp-gift-toggle input{width:16px;height:16px;accent-color:var(--teal)}
.pdp-gift-panel{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.gopt{display:flex;align-items:center;gap:9px;font-size:.9rem;color:#3a4250}
.gopt input[type=checkbox]{width:15px;height:15px;accent-color:var(--navy)}
.pdp-gift-panel textarea{border:1.5px solid var(--line);border-radius:8px;padding:.6em .8em;font:inherit;resize:vertical}
.gopt-date{gap:10px}
.gopt-date input{border:1.5px solid var(--line);border-radius:8px;padding:.4em .6em;font:inherit}
.pdp-personalise{display:flex;align-items:center;gap:14px;background:var(--gold);color:#3a2e05;border-radius:12px;padding:14px 18px;margin-bottom:16px;transition:.15s}
.pdp-personalise:hover{transform:translateY(-2px)}
.pp-ico{font-size:1.3rem}
.pdp-personalise b{display:block;font-size:1rem}
.pdp-personalise small{color:#5a4a12;font-size:.85rem}
.pp-arrow{margin-left:auto;font-size:1.3rem;font-weight:800}
.pdp-trust{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:.82rem;margin-bottom:18px}
.pdp-acc details{border-top:1px solid var(--line)}
.pdp-acc summary{padding:14px 0;font-weight:700;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.pdp-acc summary::after{content:"+";color:var(--muted)}
.pdp-acc details[open] summary::after{content:"−"}
.acc-body{padding:0 0 16px;color:#3a4250;font-size:.95rem;line-height:1.6}

/* ---- Cart ---- */
.cart-h1{font-size:2rem;margin-bottom:24px;color:var(--navy);font-weight:700;font-family:var(--font-headline)}
.cart-layout{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:start;padding:0 28px}
.cart-lines{display:flex;flex-direction:column}
.cart-line{display:grid;grid-template-columns:96px 1fr auto;gap:16px;padding:18px 0;border-top:1px solid var(--line);align-items:center}
.cart-line:first-child{border-top:0}
.cart-line-img{border-radius:10px;overflow:hidden;background:#f6f7f9;aspect-ratio:1/1;display:grid;place-items:center}
.cart-line-img img{max-width:82%;max-height:82%;object-fit:contain}
.cart-line-tag{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.cart-line-name{display:block;font-weight:600;color:var(--ink);margin:4px 0 8px;line-height:1.25}
.cart-line-name:hover{color:var(--navy)}
.cart-remove{border:0;background:none;color:var(--muted);font-size:.82rem;cursor:pointer;padding:0;text-decoration:underline;font-family:inherit}
.cart-remove:hover{color:var(--accent-red)}
.cart-line-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.cart-line-price{font-weight:800;color:var(--ink)}
.cart-summary{background:#f6f7f9;border:1px solid var(--line);border-radius:14px;padding:22px;position:sticky;top:118px}
.cart-tier{background:var(--accent-red);color:#fff;border-radius:10px;padding:13px 14px;font-size:.9rem;margin-bottom:12px}
.cart-tier.maxed{background:var(--teal-dark)}
.cart-tier b{font-weight:800}
.tier-bar{position:relative;height:7px;border-radius:999px;background:rgba(255,255,255,.3);margin:11px 0 6px;overflow:visible}
.tier-bar i{display:block;height:100%;background:#fff;border-radius:999px;transition:width .4s}
.tier-tick{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.45);transform:translate(-50%,-50%);border:2px solid var(--accent-red)}
.cart-tier.maxed .tier-tick{border-color:var(--teal-dark)}
.tier-tick.hit{background:#fff}
.tier-legend{display:flex;justify-content:space-between;font-size:.66rem;opacity:.92;font-weight:600}
.cart-sum-discount{color:var(--accent-red);font-weight:700}
.cart-voucher{background:#eef1fa;color:var(--navy-bar);border-radius:10px;padding:12px 14px;font-size:.9rem;margin-bottom:18px}
.cart-voucher.unlocked{background:#e2f7f4;color:#0a6b63}
.cart-bar{height:6px;border-radius:999px;background:rgba(0,0,0,.1);margin-top:10px;overflow:hidden}
.cart-bar i{display:block;height:100%;background:var(--navy);border-radius:999px;transition:width .4s}
.cart-voucher.unlocked .cart-bar i{background:var(--teal-dark)}
.cart-sum-row{display:flex;justify-content:space-between;padding:7px 0;color:#3a4250;font-size:.95rem}
.cart-sum-voucher{color:#0a6b63;font-weight:600}
.cart-sum-total{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-weight:800;color:var(--ink);font-size:1.15rem}
/* The deposit-due-now row is what the customer is actually charged this session, so it gets
   the same visual weight as the Total row above it, plus the gold pre-order badge treatment
   on the amount itself so it reads as "this is the real number to look at". */
.cart-sum-duenow{font-weight:800;color:var(--ink);font-size:1.15rem;align-items:center}
.cart-sum-duenow span:last-child{background:var(--gold);color:#3a2e05;border-radius:7px;padding:4px 12px}
.cart-checkout{display:flex;justify-content:center;width:100%;margin:16px 0 10px}
.cart-continue{display:block;text-align:center;color:var(--navy);font-weight:700;font-size:.9rem}
.cart-empty{text-align:center;padding:60px 0;color:var(--muted)}
.cart-empty p{font-size:1.1rem;margin-bottom:18px}
.cart-recs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:0 28px}
.rec{border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;background:#fff}
.rec-img{aspect-ratio:1/1;background:#f6f7f9;overflow:hidden;display:grid;place-items:center}
.rec-img img{max-width:80%;max-height:80%;object-fit:contain}
.rec-name{padding:10px 12px 4px;font-size:.88rem;font-weight:600;color:var(--ink);line-height:1.25}
.rec-foot{display:flex;align-items:center;justify-content:space-between;padding:6px 12px 12px;margin-top:auto}
.rec-price{font-weight:800;color:var(--ink);font-size:.9rem}
.rec-add{border:1.5px solid var(--navy);background:#fff;color:var(--navy);font-weight:700;font-size:.8rem;
  padding:.4em .9em;border-radius:999px;cursor:pointer;transition:.15s;font-family:inherit}
.rec-add:hover{background:var(--navy);color:#fff}

/* ---- Checkout ---- */
.co-layout{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:start;padding:20px 28px 0}
.co-steps{display:flex;gap:8px;margin-bottom:26px;padding:0 28px}
.co-step{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.85rem;color:var(--muted)}
.co-step .num{width:24px;height:24px;border-radius:50%;background:var(--line);color:var(--muted);display:grid;place-items:center;font-size:.8rem}
.co-step.on{color:var(--navy)}
.co-step.on .num{background:var(--navy);color:#fff}
.co-step.done .num{background:var(--teal-dark);color:#fff}
.co-step.done{color:var(--teal-dark)}
.co-sep{flex:1;height:1px;background:var(--line);align-self:center;min-width:14px}
.co-panel{background:#fff}
.co-card{border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:18px}
.co-card h3{font-size:1.1rem;margin-bottom:14px;color:var(--navy)}
.co-guest{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.co-guest button{flex:1;min-width:160px;border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:14px;
  font-weight:700;cursor:pointer;color:var(--ink);text-align:left;font-family:inherit}
.co-guest button.on{border-color:var(--navy);background:#eef1fa;color:var(--navy)}
.co-guest small{display:block;font-weight:400;color:var(--muted);font-size:.82rem;margin-top:3px}
.co-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.co-fields .full{grid-column:1/-1}
.co-field label{display:block;font-size:.8rem;font-weight:700;color:var(--ink);margin-bottom:5px}
.co-field input,.co-field select{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:.7em .8em;font:inherit;color:var(--ink);background:#fff}
.co-field input:focus,.co-field select:focus{outline:none;border-color:var(--navy)}
.co-pay-note{background:#f6f7f9;border:1px dashed var(--line);border-radius:10px;padding:14px;color:var(--muted);font-size:.88rem}
.co-login-form{border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:18px;background:#fafbfc}
.co-login-form .co-fields{margin-bottom:14px}
.co-member-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#eef1fa;color:var(--navy-bar);
  border-radius:10px;padding:12px 16px;margin-bottom:18px;font-size:.92rem}
.co-link-btn{border:0;background:none;color:var(--navy);font-weight:700;font-size:.85rem;cursor:pointer;text-decoration:underline;font-family:inherit;padding:0}
.co-link-btn:hover{color:var(--teal-dark)}
.co-locked-inline{color:var(--muted);font-size:.9rem;margin:0 0 10px}
.co-points-balance{background:#fdf6e3;color:#7a5b0a;border-radius:10px;padding:10px 14px;font-size:.9rem;font-weight:600;margin-bottom:16px}
.co-benefit-row{margin-bottom:16px}
.co-benefit-row:last-child{margin-bottom:0}
.co-benefit-row label{display:block;font-size:.8rem;font-weight:700;color:var(--ink);margin-bottom:6px}
.co-inline-input{display:flex;gap:10px}
.co-inline-input input,.co-inline-input select{flex:1;border:1.5px solid var(--line);border-radius:9px;padding:.65em .8em;font:inherit;color:var(--ink);background:#fff}
.co-inline-input input:focus,.co-inline-input select:focus{outline:none;border-color:var(--navy)}
.co-inline-input select option:disabled{color:var(--muted)}
.co-benefit-note{display:block;color:var(--muted);font-size:.78rem;margin-top:6px}
.co-benefit-sublabel{font-size:.74rem!important;font-weight:600!important;color:var(--muted)!important;margin-bottom:4px!important}
.co-coupon-preview{background:#f6f7f9;border:1px solid var(--line);border-radius:9px;padding:10px 14px;margin:10px 0;font-size:.82rem;color:var(--ink)}
.co-preview-row{padding:2px 0}
.co-preview-row b{color:var(--muted);font-weight:700;margin-right:4px}
.co-applied-pill{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#e2f7f4;color:#0a6b63;
  border-radius:9px;padding:.7em 1em;font-size:.88rem;font-weight:600}
.co-coupon-error{margin-top:10px;background:#fdece9;color:#9a3a26;border-radius:9px;padding:.7em 1em;font-size:.85rem;line-height:1.5}
.preorder-benefit-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.preorder-benefit-list li{font-size:.88rem;color:var(--ink);padding-left:24px;position:relative}
.preorder-benefit-list li::before{content:"✓";position:absolute;left:0;color:#0a6b63;font-weight:800}
.co-preorder-tnc{margin-top:16px}
.co-payment-plan-note{background:#fdf3e3;border:1px solid #f0ddb0;border-radius:10px;padding:12px 14px;margin:12px 0;font-size:.85rem;color:#7a5b0a;line-height:1.5}
.co-plan-badge{display:inline-block;background:var(--gold);color:#3a2e05;font-size:.78rem;font-weight:800;letter-spacing:.03em;border-radius:7px;padding:6px 12px}
.co-actions{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.co-back{color:var(--navy);font-weight:700;cursor:pointer;background:none;border:0;font-size:.9rem;font-family:inherit}
.co-summary{background:#f6f7f9;border:1px solid var(--line);border-radius:14px;padding:22px;position:sticky;top:118px}
.co-summary h3{font-size:1rem;margin-bottom:14px;color:var(--navy)}
.co-sline{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:.88rem}
.co-sline:first-of-type{border-top:0}
.co-sline img{width:48px;height:48px;border-radius:8px;object-fit:contain;background:#fff}
.co-sline .qn{color:var(--muted)}
.co-srow{display:flex;justify-content:space-between;padding:6px 0;font-size:.9rem;color:#3a4250}
.co-stotal{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-weight:800;color:var(--ink)}
/* Same idea as .cart-sum-duenow — this is the amount actually charged today, so it should
   read with the same weight as the Total row, highlighted in the pre-order badge's gold. */
.co-duenow{font-weight:800;color:var(--ink);align-items:center}
.co-duenow span:last-child{background:var(--gold);color:#3a2e05;border-radius:7px;padding:4px 12px}
.co-review-list .cart-line{grid-template-columns:64px 1fr auto}
.co-done{text-align:center;padding:70px 20px}
.co-done .tick{width:64px;height:64px;border-radius:50%;background:var(--teal-dark);color:#fff;font-size:2rem;display:grid;place-items:center;margin:0 auto 18px}
.co-done h1{font-size:1.8rem;margin-bottom:8px;color:var(--navy);font-family:var(--font-headline);font-weight:700}
.co-done p{color:var(--muted);margin-bottom:22px}
.co-order-status{max-width:380px;margin:0 auto 26px;background:#f6f7f9;border:1px solid var(--line);border-radius:12px;padding:6px 20px;text-align:left}
.co-status-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:.88rem}
.co-status-row:first-child{border-top:0}
.co-status-row span:first-child{color:var(--muted)}
.co-status-row span:last-child{font-weight:700;color:var(--navy)}

/* ---- Mixed-fulfillment (delivery + store pickup) ---- */
.pdp-fulfill{margin-bottom:18px}
.pdp-store-wrap{margin-top:10px}
.pdp-store-wrap select{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:.65em .8em;font:inherit;color:var(--ink);background:#fff}
.pdp-store-wrap select:focus{outline:none;border-color:var(--navy)}
.pdp-store-btn{width:100%;text-align:left;border:1.5px solid var(--line);border-radius:9px;padding:.65em .8em;
  font:inherit;font-size:.92rem;color:var(--ink);background:#fff;cursor:pointer;position:relative}
.pdp-store-btn:hover{border-color:var(--navy)}
.pdp-store-btn::after{content:"▾";position:absolute;right:.8em;top:50%;transform:translateY(-50%);color:var(--muted)}
.pdp-shipbadge{display:inline-flex;flex-direction:column;background:#fdf3e3;border:1px solid #f0ddb0;border-radius:10px;padding:8px 12px;margin-bottom:16px;font-size:.82rem;font-weight:700;color:#7a5b0a}
.pdp-shipbadge small{font-weight:500;color:#8a6b1a;margin-top:2px}
.pdp-warn{background:#fdece9;border:1px solid #f3c8bf;color:#9a3a26;border-radius:10px;padding:10px 14px;font-size:.85rem;font-weight:600;margin-top:12px;line-height:1.5}

/* ---- Pre-order (HKIR campaign) ---- */
.pdp-preorder{background:#fdf3e3;border:1px solid #f0ddb0;border-radius:10px;padding:14px 16px;margin-bottom:18px}
.pdp-preorder-badge{display:inline-block;background:var(--gold);color:#3a2e05;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:6px;padding:3px 9px;margin-bottom:8px}
.pdp-preorder-rows{font-size:.85rem;color:#7a5b0a;display:flex;flex-direction:column;gap:3px}
.pdp-preorder-rows b{font-weight:700;margin-right:5px}
.pdp-preorder-soldout{margin-top:8px;font-size:.85rem;font-weight:700;color:#9a3a26}
.pdp-add.pdp-soldout{background:#e4e4e4;color:#8a8a8a;box-shadow:none;cursor:default}

/* ---- Generic confirmation modal (pre-order cart-replace warning) ---- */
/* display:flex must only apply while the overlay is visible — an unconditional display:flex
   here would override the browser's default [hidden]{display:none}, since an author rule
   wins over the UA stylesheet even at equal selector specificity, making the modal ignore
   its `hidden` attribute entirely. */
.gar-modal-overlay{position:fixed;inset:0;background:rgba(10,14,22,.55);align-items:center;justify-content:center;z-index:200;padding:20px}
.gar-modal-overlay:not([hidden]){display:flex}
.gar-modal{background:#fff;border-radius:14px;max-width:420px;width:100%;padding:26px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.gar-modal h3{margin:0 0 10px;font-size:1.05rem;color:var(--navy)}
.gar-modal p{margin:0 0 20px;font-size:.9rem;color:var(--muted);line-height:1.5}
.gar-modal-actions{display:flex;justify-content:flex-end;gap:10px}

.cart-preorder-banner{background:#fdf3e3;border:1px solid #f0ddb0;border-radius:12px;padding:16px 18px;margin-bottom:18px}
.cart-preorder-note{font-size:.88rem;font-weight:700;color:#7a5b0a;margin-bottom:12px}
.cart-preorder-banner .pdp-vlabel{margin-bottom:8px}
.cart-preorder-banner .pdp-store-wrap{margin-top:10px;max-width:340px}
.cart-preorder-plan{font-size:.85rem;color:#7a5b0a;margin-bottom:12px}
.cl-preorder-badge{margin-left:6px;vertical-align:middle}
.cl-preorder-eta{font-size:.8rem;color:var(--muted);margin:2px 0 8px}

.cart-fulfill-group{margin-bottom:8px}
.cart-fulfill-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 0 6px;font-weight:800;color:var(--navy);font-size:.86rem;text-transform:uppercase;letter-spacing:.04em}
.cart-fulfill-head small{display:block;text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted);font-size:.78rem;margin-top:3px}
.cart-switch-store{border:0;background:none;color:var(--navy);font-size:.78rem;font-weight:700;cursor:pointer;text-decoration:underline;font-family:inherit;white-space:nowrap}
.cart-fulfill-head select{border:1.5px solid var(--line);border-radius:8px;padding:.35em .6em;font:inherit;font-weight:600;color:var(--navy);background:#fff;cursor:pointer;font-size:.78rem;white-space:nowrap}
.cart-checkout.disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.cart-checkout-note{color:#9a3a26;font-size:.8rem;font-weight:600;text-align:center;margin:-6px 0 10px}
.cl-fulfill{margin-top:8px}
.cl-oos-badge{display:inline-block;margin-top:8px;font-size:.76rem;font-weight:800;color:#9a3a26;background:#fdece9;border-radius:999px;padding:.3em .8em}
.cl-oos-help{margin-top:6px;font-size:.8rem;color:var(--muted);line-height:1.5;max-width:440px}

.co-locked-note{background:#eef1fa;color:var(--navy-bar);border-radius:10px;padding:12px 16px;font-size:.87rem;font-weight:600;margin-bottom:18px}
.co-pickup-card .co-pickup-store{font-weight:700;color:var(--ink);margin-bottom:2px}
.co-pickup-card .co-pickup-addr{color:var(--muted);font-size:.88rem;margin-bottom:8px}
.co-pickup-card .co-pickup-note{color:var(--muted);font-size:.82rem}
.line-fulfill-tag{display:inline-block;font-size:.7rem;font-weight:700;color:var(--muted);background:#f4f6f9;border-radius:999px;padding:.2em .7em;margin-top:4px}

/* ---- Floating test-scenario guide (demo/QA aid — not part of the client design) ---- */
.gar-guide-fab{position:fixed;right:22px;bottom:22px;z-index:999;width:52px;height:52px;border-radius:50%;
  background:var(--navy);color:#fff;border:0;font-size:1.4rem;cursor:pointer;box-shadow:0 8px 20px rgba(20,40,90,.35);
  display:grid;place-items:center;transition:transform .15s}
.gar-guide-fab:hover{transform:scale(1.06)}
.gar-guide-fab.active{box-shadow:0 8px 20px rgba(20,40,90,.35),0 0 0 3px rgba(0,186,198,.55)}
.gar-guide-panel{position:fixed;right:22px;bottom:86px;z-index:999;width:380px;max-height:72vh;overflow-y:auto;
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px rgba(20,40,90,.25);font-family:inherit}
.gar-guide-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--navy);color:#fff;padding:12px 14px;border-radius:14px 14px 0 0}
.gar-guide-head b{font-size:.92rem}
.gar-guide-head-actions{display:flex;align-items:center;gap:10px}
.gar-guide-reset{border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;font-size:.72rem;font-weight:700;
  padding:.3em .7em;border-radius:999px;cursor:pointer;font-family:inherit}
.gar-guide-reset:hover{background:rgba(255,255,255,.15)}
.gar-guide-close{border:0;background:transparent;color:#fff;font-size:1rem;cursor:pointer;line-height:1;padding:2px}
.gar-guide-body{padding:14px 16px 18px}
.gar-guide-intro{font-size:.82rem;color:var(--muted);line-height:1.5;margin:0 0 14px}
.gar-guide-stock{background:#f6f7f9;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:16px}
.gar-guide-stock h5{margin:0 0 8px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);font-weight:800}
.gar-guide-stock table{width:100%;border-collapse:collapse;font-size:.78rem}
.gar-guide-stock th{text-align:left;color:var(--muted);font-weight:700;padding:4px 6px;border-bottom:1px solid var(--line)}
.gar-guide-stock td{padding:6px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.gar-guide-stock td a{color:var(--navy);font-weight:600}
.gar-guide-stock small{display:block;margin-top:8px;color:var(--muted);font-size:.72rem}
.gar-guide-scenario{border-top:1px solid var(--line);padding:14px 0}
.gar-guide-scenario:first-of-type{border-top:0}
.gar-guide-scenario h4{margin:0 0 6px;font-size:.88rem;color:var(--navy);font-weight:800}
.gar-guide-scenario p{margin:0 0 8px;font-size:.82rem;color:#3a4250;line-height:1.55}
.gar-guide-link{display:inline-block;font-size:.8rem;font-weight:700;color:var(--teal-dark);text-decoration:none}
.gar-guide-link:hover{text-decoration:underline}
.gar-guide-start{border:1.5px solid var(--navy);background:#fff;color:var(--navy);font-family:inherit;font-size:.8rem;
  font-weight:700;padding:.35em 1em;border-radius:999px;cursor:pointer}
.gar-guide-start:hover{background:var(--navy);color:#fff}
.gar-guide-progress{height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin-bottom:8px}
.gar-guide-progress i{display:block;height:100%;background:var(--teal-dark);border-radius:999px;transition:width .3s}
.gar-guide-step-label{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.gar-guide-step-text{font-size:.9rem;color:var(--ink);line-height:1.6;margin:0 0 16px}
.gar-guide-next-link,.gar-guide-next-btn{display:block;width:100%;text-align:center;background:var(--navy);color:#fff;
  font-weight:700;font-size:.88rem;padding:.7em 1em;border-radius:10px;border:0;cursor:pointer;font-family:inherit;
  text-decoration:none;box-sizing:border-box;margin-bottom:10px}
.gar-guide-next-link:hover,.gar-guide-next-btn:hover{background:var(--navy-bar)}
.gar-guide-backlist{display:block;width:100%;text-align:center;background:none;border:0;color:var(--muted);
  font-size:.8rem;font-weight:600;cursor:pointer;font-family:inherit;padding:4px 0}
.gar-guide-backlist:hover{color:var(--navy)}

/* ===================== Responsive (extensions) ===================== */
@media (max-width:980px){
  .prow{grid-template-columns:repeat(3,1fr)}
  .legends,.pony{grid-template-columns:repeat(2,1fr)}
  .hof{grid-template-columns:1fr;gap:24px}
  .actions a:nth-child(1),.actions a:nth-child(2){display:none}
  nav.main ul{gap:24px;overflow-x:auto}
  .megamenu{display:none}
  .plp-layout{grid-template-columns:1fr}
  .filters-rail{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px;border:1px solid var(--line);border-radius:12px;padding:8px 16px;margin-bottom:18px}
  .frail-head{grid-column:1/-1}
  .plp-layout .grid{grid-template-columns:repeat(2,1fr)}
  .plp-bar{position:static}
  .pdp{grid-template-columns:1fr;gap:28px}
  .pdp-info{position:static}
  .cart-layout,.co-layout{grid-template-columns:1fr}
  .cart-summary,.co-summary{position:static}
  .cart-recs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .gar-guide-panel{right:12px;left:12px;width:auto;bottom:78px}
  .gar-guide-fab{right:16px;bottom:16px}
  .header{flex-wrap:wrap;gap:14px}
  .search{order:3;max-width:none;flex-basis:100%}
  .silks{gap:22px;flex-wrap:wrap}
  .prow{grid-template-columns:repeat(2,1fr)}
  .showcase{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr 1fr}
  .ft-bottom{flex-direction:column;gap:8px;text-align:center}
  h2.sec{font-size:26px}
  .plp-layout .grid{grid-template-columns:1fr 1fr;gap:14px}
  .filters-rail{grid-template-columns:1fr}
  .cart-recs{grid-template-columns:1fr 1fr}
  .co-fields{grid-template-columns:1fr}
  .wrap{padding:0 18px}
}