/* =====================================================================
   GRAPHICS UNIT — Storefront design system
   Navy #003D68 + Gold #B8893F, drawn from the brand logo.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------- */
:root {
  /* brand */
  --navy-900:#04141F;
  --navy-800:#062741;
  --navy-700:#003D68;
  --navy-600:#00517F;
  --navy-500:#1A6B9B;
  --navy-050:#EDF3F8;

  --gold-700:#8E6A2C;
  --gold-600:#B8893F;
  --gold-500:#C79C55;
  --gold-300:#E4C98B;
  --gold-100:#F6ECD8;

  /* neutrals */
  --ink:#0E1B2A;
  --ink-2:#28374A;
  --muted:#5B6B80;
  --muted-2:#8494A8;
  --line:#E6EBF1;
  --line-2:#F0F3F7;
  --bg:#FFFFFF;
  --bg-soft:#F7F9FB;
  --bg-tint:#FBF9F5;

  /* status */
  --green:#1A7F4B;
  --green-bg:#E8F6EE;
  --red:#C0392B;
  --red-bg:#FDECEA;
  --amber:#B7791F;
  --amber-bg:#FDF3E2;
  --blue:#1B5FA8;
  --blue-bg:#EAF3FF;
  --violet:#6B46C1;
  --violet-bg:#F1ECFD;

  /* type */
  --font-display:"Fraunces","Playfair Display",Georgia,"Times New Roman",serif;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* geometry */
  --radius:12px;
  --radius-sm:8px;
  --radius-lg:20px;
  --radius-pill:999px;
  --container:1320px;
  --gutter:24px;
  --header-h:74px;

  /* elevation */
  --sh-1:0 1px 2px rgba(14,27,42,.05), 0 1px 3px rgba(14,27,42,.04);
  --sh-2:0 4px 12px rgba(14,27,42,.07), 0 1px 3px rgba(14,27,42,.04);
  --sh-3:0 12px 32px rgba(14,27,42,.10), 0 2px 8px rgba(14,27,42,.05);
  --sh-4:0 24px 60px rgba(6,39,65,.16);

  --ease:cubic-bezier(.22,.61,.36,1);
  --fast:.16s var(--ease);
  --base:.28s var(--ease);
}

/* ---------------------------------------------------------------
   2. Reset
   --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-sans);font-size:15px;line-height:1.6;
  font-feature-settings:"cv02","cv03","cv04","ss01";
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:var(--navy-700);text-decoration:none;transition:color var(--fast)}
a:hover{color:var(--gold-600)}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;font-family:var(--font-display);font-weight:600;line-height:1.2;letter-spacing:-.012em;color:var(--ink)}
h1{font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem)}
h2{font-size:clamp(1.6rem,1.2rem + 1.5vw,2.4rem)}
h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.6rem)}
h4{font-size:1.08rem}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--navy-600);outline-offset:2px;border-radius:4px}
::selection{background:var(--gold-300);color:var(--navy-900)}

/* ---------------------------------------------------------------
   3. Layout
   --------------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:840px}
.container--mid{max-width:1080px}
.section{padding-block:clamp(48px,6vw,84px)}
.section--tight{padding-block:clamp(32px,4vw,52px)}
.section--soft{background:var(--bg-soft)}
.section--tint{background:var(--bg-tint)}
.stack>*+*{margin-top:var(--gap,16px)}
.row{display:flex;gap:16px;align-items:center}
.row--between{justify-content:space-between}
.row--wrap{flex-wrap:wrap}
.grow{flex:1 1 auto;min-width:0}
.hide{display:none !important}
@media(max-width:900px){.hide-md{display:none !important}}
@media(max-width:640px){.hide-sm{display:none !important}}
@media(min-width:901px){.show-md{display:none !important}}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(24px,3vw,40px)}
.section-head__eyebrow{
  font:600 11px/1 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-600);margin-bottom:12px;display:flex;align-items:center;gap:9px;
}
.section-head__eyebrow::before{content:"";width:22px;height:1px;background:var(--gold-500)}
.section-head h2{margin:0}
.section-head p{margin:10px 0 0;color:var(--muted);max-width:56ch}
.section-head__link{
  flex:none;font:600 14px var(--font-sans);color:var(--navy-700);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
}
.section-head__link svg{transition:transform var(--fast)}
.section-head__link:hover svg{transform:translateX(3px)}
@media(max-width:640px){.section-head{flex-direction:column;align-items:flex-start;gap:14px}}

/* ---------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------- */
.btn{
  --btn-bg:var(--navy-700);--btn-fg:#fff;--btn-bd:var(--navy-700);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border:1px solid var(--btn-bd);border-radius:var(--radius-sm);
  background:var(--btn-bg);color:var(--btn-fg);
  font:600 14.5px/1 var(--font-sans);letter-spacing:.005em;
  transition:transform var(--fast),box-shadow var(--fast),background var(--fast),border-color var(--fast),color var(--fast);
  white-space:nowrap;text-align:center;
}
.btn:hover{--btn-bg:var(--navy-800);--btn-bd:var(--navy-800);color:#fff;transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0)}
.btn:disabled,.btn.is-disabled{opacity:.5;pointer-events:none}
.btn--gold{--btn-bg:var(--gold-600);--btn-bd:var(--gold-600)}
.btn--gold:hover{--btn-bg:var(--gold-700);--btn-bd:var(--gold-700)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--navy-700);--btn-bd:var(--line)}
.btn--ghost:hover{--btn-bg:var(--navy-050);--btn-bd:var(--navy-500);--btn-fg:var(--navy-800);color:var(--navy-800)}
.btn--dark{--btn-bg:var(--ink);--btn-bd:var(--ink)}
.btn--light{--btn-bg:#fff;--btn-fg:var(--ink);--btn-bd:#fff}
.btn--light:hover{--btn-bg:var(--gold-100);--btn-bd:var(--gold-100);color:var(--ink)}
.btn--outline-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.45)}
.btn--outline-light:hover{--btn-bg:rgba(255,255,255,.12);--btn-bd:#fff;color:#fff}
.btn--danger{--btn-bg:var(--red);--btn-bd:var(--red)}
.btn--sm{padding:9px 16px;font-size:13.5px;border-radius:7px}
.btn--lg{padding:16px 34px;font-size:15.5px}
.btn--block{display:flex;width:100%}
.btn--icon{padding:11px;width:42px;height:42px;border-radius:50%}
.btn .spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none}
.btn.is-loading .spin{display:block}
.btn.is-loading{pointer-events:none;opacity:.8}
@keyframes spin{to{transform:rotate(360deg)}}

.link-arrow{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.link-arrow::after{content:"→";transition:transform var(--fast)}
.link-arrow:hover::after{transform:translateX(4px)}

/* ---------------------------------------------------------------
   5. Forms
   --------------------------------------------------------------- */
.field{margin-bottom:18px}
.field__label{display:block;font:600 13px var(--font-sans);color:var(--ink-2);margin-bottom:7px}
.field__label .req{color:var(--red)}
.field__hint{font-size:12.5px;color:var(--muted-2);margin-top:6px}
.field__error{font-size:12.5px;color:var(--red);margin-top:6px;display:flex;gap:5px;align-items:center}
.input,.select,.textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:#fff;color:var(--ink);font-size:14.5px;transition:border-color var(--fast),box-shadow var(--fast);
}
.input::placeholder,.textarea::placeholder{color:var(--muted-2)}
.input:hover,.select:hover,.textarea:hover{border-color:#CFD8E3}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--navy-600);box-shadow:0 0 0 3px rgba(0,81,127,.11);
}
.input.is-error,.select.is-error{border-color:var(--red);box-shadow:0 0 0 3px rgba(192,57,43,.09)}
.textarea{min-height:120px;resize:vertical;line-height:1.6}
.select{
  appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235B6B80' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}

.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:14px;color:var(--ink-2)}
.check input{
  appearance:none;flex:none;width:18px;height:18px;margin-top:1px;border:1.5px solid #C6D0DC;
  border-radius:5px;background:#fff;transition:all var(--fast);cursor:pointer;
}
.check input:checked{background:var(--navy-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.5L4 7.5L10 1.5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;border-color:var(--navy-700)}
.check input[type=radio]{border-radius:50%}
.check input[type=radio]:checked{background-image:none;box-shadow:inset 0 0 0 4px #fff}

.input-group{display:flex;gap:10px}
.input-group .input{flex:1}

/* ---------------------------------------------------------------
   6. Announcement bar + header
   --------------------------------------------------------------- */
.announce{
  background:var(--navy-900);color:#DCE6F0;font-size:12.8px;letter-spacing:.02em;
  position:relative;z-index:60;
}
.announce__inner{display:flex;align-items:center;justify-content:center;gap:26px;min-height:38px;text-align:center}
.announce a{color:var(--gold-300)}
.announce a:hover{color:#fff}
.announce__item{display:flex;align-items:center;gap:7px}
.announce__item svg{flex:none;opacity:.7}
/* Below 1000px the bar loses its gaps, then sheds items one at a time so what
   is left always stays centred with room to breathe rather than being clipped. */
@media(max-width:1000px){.announce__inner{gap:18px}}
@media(max-width:820px){.announce__item:nth-child(2){display:none}.announce__inner{gap:16px}}
@media(max-width:600px){
  .announce__item:nth-child(3){display:none}
  .announce__inner{gap:0;min-height:40px;padding-block:7px;line-height:1.35}
}

.header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow var(--base)}
.header.is-stuck{box-shadow:var(--sh-2)}
.header__bar{display:flex;align-items:center;gap:20px;height:var(--header-h)}
.header__logo{flex:none;display:flex;align-items:center}
.header__logo img{height:52px;width:auto}
@media(max-width:640px){.header__logo img{height:42px}}

.header__actions{margin-left:auto;display:flex;align-items:center;gap:4px}
.icon-btn{
  position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink-2);transition:background var(--fast),color var(--fast);
}
.icon-btn:hover{background:var(--bg-soft);color:var(--navy-700)}
.icon-btn__count{
  position:absolute;top:4px;right:3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--gold-600);color:#fff;font:700 10.5px/18px var(--font-sans);text-align:center;
  box-shadow:0 0 0 2px #fff;
}
.icon-btn__count:empty,.icon-btn__count[data-count="0"]{display:none}

/* search */
.header__search{flex:1;max-width:520px;position:relative}
.header__search input{
  width:100%;padding:11px 44px 11px 42px;border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--bg-soft);font-size:14px;transition:all var(--fast);
}
.header__search input:focus{outline:none;background:#fff;border-color:var(--navy-600);box-shadow:0 0 0 3px rgba(0,81,127,.1)}
.header__search .search-ico{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted-2);pointer-events:none}
.header__search button[type=submit]{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.header__search button[type=submit]:hover{color:var(--navy-700)}

/* nav + mega menu */
.nav{border-top:1px solid var(--line-2);background:#fff}
.nav__list{display:flex;align-items:center;gap:2px;height:50px}
.nav__link{
  display:flex;align-items:center;gap:6px;padding:0 15px;height:50px;
  font:600 14px var(--font-sans);color:var(--ink-2);position:relative;letter-spacing:.005em;
}
.nav__link::after{
  content:"";position:absolute;left:15px;right:15px;bottom:0;height:2px;background:var(--gold-600);
  transform:scaleX(0);transform-origin:center;transition:transform var(--base);
}
.nav__link:hover,.nav__link.is-active{color:var(--navy-700)}
.nav__item:hover .nav__link::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__link .chev{transition:transform var(--fast);opacity:.55}
.nav__item:hover .chev{transform:rotate(180deg)}
.nav__link--sale{color:var(--gold-700)}

.nav__item{position:relative}
.mega{
  position:absolute;top:100%;left:0;z-index:40;min-width:min(880px,86vw);
  background:#fff;border:1px solid var(--line);border-radius:0 0 var(--radius-lg) var(--radius-lg);
  border-top:0;box-shadow:var(--sh-3);padding:26px 28px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--base),transform var(--base),visibility var(--base);
}
.nav__item:hover .mega,.nav__item:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.nav__item:nth-last-child(-n+3) .mega{left:auto;right:0}
/* Below 1320px there is not enough room either side of a menu item for an
   880px panel, so anchor the panel to the nav container instead of the item.
   Without this the third and fourth category panels push the document
   scrollWidth past the viewport at 1024–1279px even while closed. */
@media(max-width:1319px){
  .nav>.container{position:relative}
  .nav__item{position:static}
  .mega,.nav__item:nth-last-child(-n+3) .mega{left:0;right:auto;min-width:0;width:min(880px,100%)}
}
.mega__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:22px 28px}
.mega__col h5{
  font:600 11px var(--font-sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-700);margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid var(--line-2);
}
.mega__col h5 a{color:inherit}
.mega__col li+li{margin-top:2px}
.mega__col a{display:block;padding:5px 0;font-size:14px;color:var(--muted);transition:color var(--fast),transform var(--fast)}
.mega__col a:hover{color:var(--navy-700);transform:translateX(3px)}
.mega__promo{
  grid-column:span 1;border-radius:var(--radius);overflow:hidden;position:relative;
  background:linear-gradient(140deg,var(--navy-800),var(--navy-700));color:#fff;padding:20px;min-height:180px;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.mega__promo h6{font:600 15px var(--font-display);margin:0 0 5px;color:#fff}
.mega__promo p{font-size:12.5px;color:rgba(255,255,255,.72);margin:0 0 12px}
.mega__promo .link-arrow{color:var(--gold-300);font-size:13px}
.mega__foot{margin-top:22px;padding-top:16px;border-top:1px solid var(--line-2);display:flex;gap:20px;flex-wrap:wrap;font-size:13px}
.mega__foot a{color:var(--navy-700);font-weight:600}

/* mobile nav */
.burger{display:none}
@media(max-width:900px){
  .burger{display:grid}
  .nav{display:none}
  .header__search{display:none}
}
.drawer-nav__search{padding:16px 20px;border-bottom:1px solid var(--line)}
.mnav{padding:6px 0}
.mnav__item{border-bottom:1px solid var(--line-2)}
.mnav__row{display:flex;align-items:center;width:100%}
.mnav__link{flex:1;display:block;padding:14px 20px;font:600 15px var(--font-sans);color:var(--ink)}
.mnav__toggle{width:52px;height:50px;display:grid;place-items:center;color:var(--muted);transition:transform var(--fast)}
.mnav__toggle.is-open{transform:rotate(180deg);color:var(--navy-700)}
.mnav__sub{display:none;background:var(--bg-soft);padding:6px 0 10px}
.mnav__sub.is-open{display:block}
.mnav__sub a{display:block;padding:9px 20px 9px 34px;font-size:14px;color:var(--muted)}
.mnav__sub a:hover{color:var(--navy-700)}
.mnav__sub .mnav__sub a{padding-left:50px;font-size:13.5px}

/* ---------------------------------------------------------------
   7. Drawer + overlay + toast
   --------------------------------------------------------------- */
.overlay{
  position:fixed;inset:0;background:rgba(6,20,33,.5);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity var(--base),visibility var(--base);z-index:70;
}
.overlay.is-open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;bottom:0;right:0;width:min(430px,100%);background:#fff;z-index:80;
  display:flex;flex-direction:column;transform:translateX(100%);
  box-shadow:var(--sh-4);
  /* Hidden until opened: keeps the closed panel out of the tab order and stops
     it extending the document's scroll width on narrow screens. The delayed
     visibility switch lets the slide-out animation finish first. */
  visibility:hidden;
  transition:transform .34s var(--ease), visibility 0s linear .34s;
}
.drawer.is-open{visibility:visible;transition:transform .34s var(--ease), visibility 0s linear 0s}
.drawer--left{right:auto;left:0;transform:translateX(-100%);width:min(360px,88%)}
.drawer.is-open{transform:translateX(0)}
.drawer__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 22px;border-bottom:1px solid var(--line);flex:none;
}
.drawer__head h3{font-size:1.05rem;font-family:var(--font-sans);font-weight:700;letter-spacing:-.01em}
.drawer__body{flex:1;overflow-y:auto;overscroll-behavior:contain}
.drawer__foot{flex:none;border-top:1px solid var(--line);padding:20px 22px;background:var(--bg-soft)}

.toast-wrap{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:11px;padding:13px 20px;border-radius:var(--radius-pill);
  background:var(--ink);color:#fff;font-size:14px;font-weight:500;box-shadow:var(--sh-3);
  animation:toastIn .3s var(--ease);max-width:92vw;pointer-events:auto;
}
.toast--success{background:#12603A}
.toast--error{background:#96271B}
.toast svg{flex:none}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

/* alerts */
.alert{display:flex;gap:11px;padding:14px 16px;border-radius:var(--radius-sm);font-size:14px;margin-bottom:18px;border:1px solid transparent;line-height:1.55}
.alert svg{flex:none;margin-top:2px}
.alert--success{background:var(--green-bg);color:#14603A;border-color:#BFE5D0}
.alert--error{background:var(--red-bg);color:#8E2A1F;border-color:#F5C9C3}
.alert--info{background:var(--blue-bg);color:#134A82;border-color:#C6DEF8}
.alert--warn{background:var(--amber-bg);color:#8A5A12;border-color:#F3DFB8}

/* ---------------------------------------------------------------
   8. Badges & pills
   --------------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;font:600 11.5px/1.4 var(--font-sans);letter-spacing:.02em;white-space:nowrap}
.badge--grey{background:#EEF1F5;color:#4A5769}
.badge--green{background:var(--green-bg);color:var(--green)}
.badge--red{background:var(--red-bg);color:var(--red)}
.badge--amber{background:var(--amber-bg);color:var(--amber)}
.badge--blue{background:var(--blue-bg);color:var(--blue)}
.badge--violet{background:var(--violet-bg);color:var(--violet)}
.badge--gold{background:var(--gold-100);color:var(--gold-700)}
.badge--navy{background:var(--navy-050);color:var(--navy-700)}

.pill{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--line);border-radius:var(--radius-pill);font-size:13.5px;color:var(--ink-2);background:#fff;transition:all var(--fast)}
.pill:hover{border-color:var(--navy-500);color:var(--navy-700)}
.pill.is-active{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.pill.is-active:hover{color:#fff}

.type-tag{display:inline-flex;align-items:center;gap:5px;font:600 10.5px/1 var(--font-sans);letter-spacing:.07em;text-transform:uppercase;padding:5px 9px;border-radius:5px}
.type-tag--digital{background:var(--blue-bg);color:var(--blue)}
.type-tag--shipping{background:var(--gold-100);color:var(--gold-700)}

/* ---------------------------------------------------------------
   9. Product card
   --------------------------------------------------------------- */
.product-grid{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:repeat(auto-fill,minmax(min(224px,100%),1fr))}
.product-grid--4{grid-template-columns:repeat(4,1fr)}
.product-grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.product-grid--4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.product-grid,.product-grid--4,.product-grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.product-grid,.product-grid--4,.product-grid--3{gap:12px}}

.card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color var(--base),box-shadow var(--base),transform var(--base);
}
.card:hover{border-color:#D6DEE8;box-shadow:var(--sh-3);transform:translateY(-3px)}
.card__media{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--bg-soft)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.card:hover .card__media img{transform:scale(1.045)}
.card__flags{position:absolute;top:11px;left:11px;display:flex;flex-direction:column;gap:6px;z-index:2}
.card__flag{padding:4px 9px;border-radius:5px;font:700 10.5px/1.4 var(--font-sans);letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--navy-700);box-shadow:var(--sh-1)}
.card__flag--sale{background:var(--red)}
.card__flag--new{background:var(--gold-600)}
.card__flag--best{background:var(--green)}
.card__wish{
  position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.94);display:grid;place-items:center;color:var(--muted);
  box-shadow:var(--sh-1);transition:all var(--fast);opacity:0;transform:translateY(-4px);
}
.card:hover .card__wish{opacity:1;transform:none}
.card__wish:hover{color:var(--red);background:#fff}
.card__wish.is-on{color:var(--red);opacity:1;transform:none}
.card__wish.is-on svg{fill:currentColor}
@media(hover:none){.card__wish{opacity:1;transform:none}}

.card__quick{
  position:absolute;left:11px;right:11px;bottom:11px;z-index:2;
  opacity:0;transform:translateY(8px);transition:all var(--base);
}
.card:hover .card__quick{opacity:1;transform:none}
@media(max-width:860px){.card__quick{position:static;opacity:1;transform:none;margin:0 14px 14px}}

.card__body{padding:15px 15px 17px;display:flex;flex-direction:column;flex:1;gap:7px}
.card__cat{font:600 10.5px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.card__title{font:600 15px/1.4 var(--font-sans);color:var(--ink);letter-spacing:-.005em}
.card__title a{color:inherit;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__title a:hover{color:var(--navy-700)}
.card__meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted-2);margin-top:auto}
.card__price{display:flex;align-items:baseline;gap:9px;padding-top:4px}
.card__price .now{font:700 17px var(--font-sans);color:var(--ink);letter-spacing:-.015em}
.card__price .was{font-size:13.5px;color:var(--muted-2);text-decoration:line-through}
.card__price .off{font:700 11.5px var(--font-sans);color:var(--green);background:var(--green-bg);padding:3px 7px;border-radius:5px}

/* stars */
.stars{display:inline-flex;gap:2px;vertical-align:middle}
.star{width:12px;height:12px;background:#DBE2EA;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.star.is-full{background:var(--gold-600)}
.star.is-half{background:linear-gradient(90deg,var(--gold-600) 50%,#DBE2EA 50%)}
.stars-count{font-size:12px;color:var(--muted-2);margin-left:5px}

/* ---------------------------------------------------------------
   10. Hero — a designed canvas. No photography: layered brand
   gradients, a gold aurora, a mandala drawn from the logo roundel,
   and the two ways to buy as the focal point.
   --------------------------------------------------------------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:
    radial-gradient(1100px 660px at 84% 4%,  rgba(184,137,63,.24), transparent 60%),
    radial-gradient(860px  640px at 2%  98%, rgba(0,81,127,.48),   transparent 62%),
    linear-gradient(158deg,#07314F 0%,#052236 46%,#03121D 100%);
}
.hero::before{                                   /* gold hairline along the top */
  content:"";position:absolute;inset:0 0 auto;height:1px;z-index:4;
  background:linear-gradient(90deg,transparent,rgba(228,201,139,.6),transparent);
}
.hero::after{                                    /* soft fade into the page below */
  content:"";position:absolute;inset:auto 0 0;height:120px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(3,18,29,.55));
}

.hero__fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero__aurora{
  position:absolute;width:780px;height:780px;right:-200px;top:-320px;border-radius:50%;
  background:radial-gradient(circle,rgba(199,156,85,.32),rgba(199,156,85,.08) 45%,transparent 68%);
  filter:blur(28px);
}
.hero__aurora--2{
  right:auto;top:auto;left:-280px;bottom:-380px;width:700px;height:700px;filter:blur(34px);
  background:radial-gradient(circle,rgba(26,107,155,.38),transparent 66%);
}
.hero__mesh{
  position:absolute;inset:0;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:66px 66px;
  -webkit-mask-image:radial-gradient(100% 86% at 26% 42%,#000 24%,transparent 76%);
          mask-image:radial-gradient(100% 86% at 26% 42%,#000 24%,transparent 76%);
}
.hero__noise{
  position:absolute;inset:0;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__mandala{
  position:absolute;right:-7%;top:50%;transform:translateY(-50%);
  width:min(720px,62vw);height:auto;color:var(--gold-500);opacity:.15;
}

.hero__wrap{
  position:relative;z-index:3;display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(28px,4vw,64px);align-items:center;
  padding-block:clamp(48px,5.2vw,74px);
}
@media(max-width:980px){.hero__wrap{grid-template-columns:1fr;gap:38px}}

.hero__stage{min-height:clamp(236px,22vw,282px)}
@media(max-width:980px){.hero__stage{min-height:0}}

/* eyebrow reads as a small badge now */
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font:600 10.5px var(--font-sans);letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold-300);margin-bottom:20px;
  padding:7px 14px 7px 12px;border-radius:var(--radius-pill);
  background:rgba(228,201,139,.09);border:1px solid rgba(228,201,139,.24);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.hero__eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-500);
  box-shadow:0 0 0 3px rgba(199,156,85,.22);
}
.hero h1{
  color:#fff;font-size:clamp(2.15rem,1.25rem+3.5vw,4.1rem);
  line-height:1.04;letter-spacing:-.034em;margin-bottom:20px;text-wrap:balance;
}
.hero h1 em{
  font-style:italic;
  background:linear-gradient(96deg,var(--gold-300),#F6E9C9 44%,var(--gold-500));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold-300);
}
.hero p{
  font-size:clamp(15px,.88rem+.25vw,17px);color:rgba(255,255,255,.75);
  max-width:46ch;margin-bottom:30px;line-height:1.68;
}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}

.hero__proof{display:flex;align-items:center;gap:11px;margin-top:26px;font-size:13.5px;color:rgba(255,255,255,.7)}
.hero__proof .stars{gap:3px}
.hero__proof .star{background:rgba(255,255,255,.22)}
.hero__proof .star.is-full{background:var(--gold-500)}
.hero__proof .star.is-half{background:linear-gradient(90deg,var(--gold-500) 50%,rgba(255,255,255,.22) 50%)}
.hero__proof strong{color:#fff;font-weight:600}

.hero__dots{display:flex;gap:8px;margin-top:30px}
.hero__dot{width:28px;height:3px;border-radius:2px;background:rgba(255,255,255,.24);transition:background var(--fast),width var(--fast)}
.hero__dot.is-active{background:var(--gold-500);width:44px}

/* ---------------------------------------------------------------
   Hero showcase — three real designs, composed rather than cropped
   --------------------------------------------------------------- */
.hero__showcase{position:relative;perspective:1400px;padding:14px 0}
.hero__stack{
  position:relative;height:clamp(330px,31vw,430px);
  display:flex;align-items:center;justify-content:center;
  transform-style:preserve-3d;
}
.hero-card{
  position:absolute;border-radius:16px;overflow:hidden;background:#0A1E2E;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 26px 60px rgba(2,12,20,.55),0 3px 12px rgba(2,12,20,.4);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s var(--ease);
}
.hero-card img{width:100%;height:100%;object-fit:cover;display:block}
.hero-card__glow{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(155deg,rgba(255,255,255,.16),transparent 42%,rgba(3,18,29,.35));
}
.hero-card--1{                       /* centre, tallest */
  width:clamp(160px,17vw,214px);height:clamp(224px,24vw,300px);
  z-index:3;transform:translateY(-6px) rotate(-1.5deg);
}
.hero-card--2{                       /* behind left */
  width:clamp(132px,14vw,178px);height:clamp(176px,19vw,238px);
  z-index:2;transform:translate3d(-58%,16px,0) rotate(-8deg);
}
.hero-card--3{                       /* behind right */
  width:clamp(132px,14vw,178px);height:clamp(176px,19vw,238px);
  z-index:2;transform:translate3d(58%,26px,0) rotate(7.5deg);
}
.hero-card:hover{
  z-index:6;border-color:rgba(228,201,139,.55);
  box-shadow:0 34px 74px rgba(2,12,20,.62),0 0 0 1px rgba(228,201,139,.3);
}
.hero-card--1:hover{transform:translateY(-16px) rotate(-1.5deg) scale(1.04)}
.hero-card--2:hover{transform:translate3d(-60%,4px,0) rotate(-8deg) scale(1.05)}
.hero-card--3:hover{transform:translate3d(60%,14px,0) rotate(7.5deg) scale(1.05)}

/* ---------------------------------------------------------------
   Category marquee along the foot of the hero
   --------------------------------------------------------------- */
.hero__marquee{
  position:relative;z-index:3;border-top:1px solid rgba(255,255,255,.10);
  overflow:hidden;padding:14px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.hero__marquee-track{display:flex;align-items:center;gap:26px;width:max-content;animation:heroMarquee 44s linear infinite}
.hero__marquee-item{
  font:600 11.5px var(--font-sans);letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.44);white-space:nowrap;
}
.hero__marquee-dot{width:4px;height:4px;border-radius:50%;background:var(--gold-600);opacity:.65;flex:none}
@keyframes heroMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero__marquee:hover .hero__marquee-track{animation-play-state:paused}

@media(max-width:980px){
  .hero__mandala{right:-26%;opacity:.10;width:min(560px,92vw)}
  .hero__showcase{padding:4px 0 2px}
  .hero__stack{height:clamp(280px,52vw,360px)}
  .hero-card--1{width:170px;height:238px}
  .hero-card--2,.hero-card--3{width:140px;height:196px}
}
@media(max-width:620px){
  .hero__mandala{display:none}
  .hero__stack{height:290px}
  .hero-card--1{width:150px;height:210px}
  .hero-card--2,.hero-card--3{width:120px;height:168px}
  .hero-card--2{transform:translate3d(-54%,14px,0) rotate(-8deg)}
  .hero-card--3{transform:translate3d(54%,22px,0) rotate(7.5deg)}
  .hero__marquee{padding:11px 0}
}

/* trust strip */
.trust{border-bottom:1px solid var(--line);background:#fff}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.trust__item{display:flex;gap:13px;align-items:center;padding:22px 20px;border-right:1px solid var(--line-2)}
.trust__item:last-child{border-right:0}
.trust__ico{flex:none;width:40px;height:40px;border-radius:10px;background:var(--navy-050);display:grid;place-items:center;color:var(--navy-700)}
.trust__item strong{display:block;font:600 13.5px var(--font-sans);color:var(--ink)}
.trust__item span{font-size:12.5px;color:var(--muted-2)}
@media(max-width:900px){.trust__grid{grid-template-columns:repeat(2,1fr)}.trust__item:nth-child(2){border-right:0}.trust__item:nth-child(-n+2){border-bottom:1px solid var(--line-2)}}
@media(max-width:520px){.trust__grid{grid-template-columns:1fr}.trust__item{border-right:0;border-bottom:1px solid var(--line-2)}}

/* category tiles — editorial cards, artwork on a soft pad */
.cat-grid{display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.cat-tile{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;color:inherit;position:relative;
  transition:transform var(--base),box-shadow var(--base),border-color var(--base);
}
.cat-tile::after{
  content:"";position:absolute;inset:0 0 auto;height:2px;z-index:2;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-300));
  transform:scaleX(0);transform-origin:left;transition:transform var(--base);
}
.cat-tile:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:#D6DEE8;color:inherit}
.cat-tile:hover::after{transform:scaleX(1)}
.cat-tile__media{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--bg-soft)}
.cat-tile__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.cat-tile:hover .cat-tile__media img{transform:scale(1.05)}
.cat-tile__body{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 16px 16px;border-top:1px solid var(--line-2);
}
.cat-tile__text{min-width:0}
.cat-tile__name{
  display:block;font:600 15.5px var(--font-sans);letter-spacing:-.012em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cat-tile__count{display:block;font-size:12.5px;color:var(--muted-2);margin-top:2px}
.cat-tile__go{
  flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg-soft);color:var(--muted);
  transition:background var(--fast),color var(--fast),transform var(--fast);
}
.cat-tile:hover .cat-tile__go{background:var(--navy-700);color:#fff;transform:translateX(2px)}
@media(max-width:520px){
  .cat-grid{grid-template-columns:1fr 1fr;gap:12px}
  .cat-tile__name{font-size:14px}
  .cat-tile__body{padding:12px 13px 13px}
  .cat-tile__go{width:28px;height:28px}
}

/* split feature */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(28px,5vw,70px)}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.split__media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--sh-3)}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------------------------------------------------------------
   11. Breadcrumbs
   --------------------------------------------------------------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted-2);padding:16px 0}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--navy-700)}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"/";color:#CBD4DF}
.crumbs [aria-current]{color:var(--ink);font-weight:500}

.page-head{background:var(--bg-soft);border-bottom:1px solid var(--line);padding-block:clamp(28px,4vw,48px)}
.page-head h1{margin-bottom:10px}
.page-head p{color:var(--muted);max-width:64ch;margin:0}

/* ---------------------------------------------------------------
   12. Shop layout (sidebar + grid)
   --------------------------------------------------------------- */
.shop{display:grid;grid-template-columns:262px 1fr;gap:clamp(24px,3vw,44px);align-items:start}
@media(max-width:1000px){.shop{grid-template-columns:1fr}.shop__aside{display:none}.shop__aside.is-open{display:block}}
.shop__aside{position:sticky;top:calc(var(--header-h) + 16px)}
.filter{border-bottom:1px solid var(--line);padding:18px 0}
.filter:first-child{padding-top:0}
.filter__head{display:flex;align-items:center;justify-content:space-between;width:100%;font:600 13px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:0}
.filter__head svg{transition:transform var(--fast);color:var(--muted-2)}
.filter__head[aria-expanded="true"] svg{transform:rotate(180deg)}
.filter__body{padding-top:14px}
.filter__body[hidden]{display:none}
.filter__list li+li{margin-top:3px}
.filter__list a{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:14px;color:var(--muted)}
.filter__list a:hover{color:var(--navy-700)}
.filter__list a.is-active{color:var(--navy-700);font-weight:600}
.filter__list .count{font-size:12px;color:var(--muted-2)}
.filter__list--nested{padding-left:14px;margin-top:3px;border-left:1px solid var(--line-2)}

.shop__toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:24px}
.shop__count{font-size:13.5px;color:var(--muted)}
.shop__tools{display:flex;gap:10px;align-items:center}
.shop__tools .select{width:auto;min-width:180px;padding-block:9px;font-size:13.5px}

.active-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 8px 6px 12px;border-radius:var(--radius-pill);background:var(--navy-050);color:var(--navy-700);font-size:13px;font-weight:500}
.chip button{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:rgba(0,61,104,.12);color:var(--navy-700);font-size:11px;line-height:1}
.chip button:hover{background:var(--navy-700);color:#fff}

/* empty state */
.empty{text-align:center;padding:clamp(40px,7vw,80px) 20px;max-width:460px;margin-inline:auto}
.empty__ico{width:64px;height:64px;border-radius:50%;background:var(--bg-soft);display:grid;place-items:center;margin:0 auto 20px;color:var(--muted-2)}
.empty h3{margin-bottom:8px}
.empty p{color:var(--muted);margin-bottom:22px}

/* pagination */
.pagination{display:flex;justify-content:center;gap:6px;margin-top:clamp(32px,4vw,52px);flex-wrap:wrap}
.pg{min-width:40px;height:40px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius-sm);display:grid;place-items:center;font:600 14px var(--font-sans);color:var(--ink-2);background:#fff;transition:all var(--fast)}
.pg:hover{border-color:var(--navy-600);color:var(--navy-700)}
.pg.is-current{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.pg.is-disabled,.pg.is-gap{opacity:.4;pointer-events:none;border-color:transparent}

/* ---------------------------------------------------------------
   13. Product detail
   --------------------------------------------------------------- */
.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:start}
@media(max-width:960px){.pdp{grid-template-columns:1fr;gap:28px}}

.gallery{position:sticky;top:calc(var(--header-h) + 20px)}
@media(max-width:960px){.gallery{position:static}}
.gallery__main{
  position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--bg-soft);aspect-ratio:1/1;
}
.gallery__main img{width:100%;height:100%;object-fit:contain;transition:opacity var(--base)}
.gallery__zoom{position:absolute;right:12px;bottom:12px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;color:var(--ink-2);box-shadow:var(--sh-1)}
.gallery__thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.gallery__thumb{
  flex:none;width:74px;height:74px;border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;background:var(--bg-soft);transition:border-color var(--fast);
}
.gallery__thumb img{width:100%;height:100%;object-fit:cover}
.gallery__thumb.is-active{border-color:var(--navy-700);box-shadow:0 0 0 1px var(--navy-700)}

.pdp__title{margin:10px 0 12px;letter-spacing:-.02em}
.pdp__cat{font:600 11px var(--font-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--gold-700)}
.pdp__rating{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);margin-bottom:18px}
.pdp__price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.pdp__price .now{font:700 30px var(--font-sans);letter-spacing:-.025em;color:var(--ink)}
.pdp__price .was{font-size:18px;color:var(--muted-2);text-decoration:line-through}
.pdp__price .off{font:700 12.5px var(--font-sans);color:#fff;background:var(--red);padding:5px 9px;border-radius:5px}
.pdp__tax{font-size:12.5px;color:var(--muted-2);margin-bottom:20px}
.pdp__short{color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--line)}

.opt{margin-bottom:22px}
.opt__label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font:600 13px var(--font-sans);color:var(--ink-2);margin-bottom:10px}
.opt__label .val{color:var(--muted);font-weight:400}
.opt__choices{display:flex;flex-wrap:wrap;gap:9px}
.opt__choice{position:relative}
.opt__choice input{position:absolute;opacity:0;width:0;height:0}
.opt__choice span{
  display:flex;flex-direction:column;gap:2px;align-items:center;min-width:78px;
  padding:10px 14px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  font:600 13.5px var(--font-sans);color:var(--ink-2);cursor:pointer;transition:all var(--fast);background:#fff;
}
.opt__choice span small{font-weight:500;font-size:12px;color:var(--muted-2)}
.opt__choice input:checked+span{border-color:var(--navy-700);background:var(--navy-050);color:var(--navy-800);box-shadow:0 0 0 1px var(--navy-700)}
.opt__choice input:disabled+span{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.opt__choice input:focus-visible+span{outline:2px solid var(--navy-600);outline-offset:2px}

.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.qty button{width:42px;height:46px;display:grid;place-items:center;color:var(--ink-2);transition:background var(--fast)}
.qty button:hover{background:var(--bg-soft)}
.qty button:disabled{opacity:.35;pointer-events:none}
.qty input{width:50px;height:46px;border:0;border-inline:1px solid var(--line);text-align:center;font-weight:600;font-size:15px;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.pdp__buy{display:flex;gap:12px;align-items:stretch;margin-bottom:14px;flex-wrap:wrap}
.pdp__buy .btn{flex:1;min-width:180px;padding-block:15px}
.pdp__stock{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;margin-bottom:18px}
.pdp__stock .dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
.pdp__stock.is-out{color:var(--red)}
.pdp__stock.is-out .dot{background:var(--red)}

.pdp__facts{border:1px solid var(--line);border-radius:var(--radius);padding:4px 18px;margin-bottom:22px}
.pdp__fact{display:flex;gap:13px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line-2)}
.pdp__fact:last-child{border-bottom:0}
.pdp__fact svg{flex:none;color:var(--navy-700);margin-top:1px}
.pdp__fact strong{display:block;font:600 13.5px var(--font-sans);color:var(--ink)}
.pdp__fact span{font-size:13px;color:var(--muted)}

.accordion__item{border-bottom:1px solid var(--line)}
.accordion__head{display:flex;align-items:center;justify-content:space-between;width:100%;padding:17px 0;font:600 14.5px var(--font-sans);color:var(--ink);text-align:left;gap:16px}
.accordion__head svg{flex:none;color:var(--muted-2);transition:transform var(--fast)}
.accordion__head[aria-expanded="true"] svg{transform:rotate(180deg);color:var(--navy-700)}
.accordion__body{padding:0 0 20px;color:var(--muted);font-size:14.5px;line-height:1.75}
.accordion__body[hidden]{display:none}
.accordion__body ul{list-style:disc;padding-left:20px;margin:0 0 1em}
.accordion__body li{margin-bottom:5px}

.rte{color:var(--ink-2);line-height:1.78;font-size:15px}
.rte h2,.rte h3{margin:1.6em 0 .6em}
.rte ul,.rte ol{list-style:disc;padding-left:22px;margin:0 0 1.2em}
.rte ol{list-style:decimal}
.rte li{margin-bottom:6px}
.rte img{border-radius:var(--radius);margin:1.2em 0}
.rte table{margin:1.2em 0;font-size:14px}
.rte th,.rte td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.rte th{background:var(--bg-soft);font-weight:600}
.rte blockquote{margin:1.4em 0;padding:14px 20px;border-left:3px solid var(--gold-500);background:var(--bg-tint);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--ink-2)}

/* ---------------------------------------------------------------
   14. Cart & checkout
   --------------------------------------------------------------- */
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 384px;gap:clamp(24px,3vw,44px);align-items:start}
@media(max-width:960px){.cart-layout{grid-template-columns:1fr}}

.cart-line{display:grid;grid-template-columns:96px 1fr auto;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
.cart-line:first-child{padding-top:0}
.cart-line__img{width:96px;height:96px;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-soft);border:1px solid var(--line)}
.cart-line__img img{width:100%;height:100%;object-fit:cover}
.cart-line__name{font:600 15px var(--font-sans);color:var(--ink);margin-bottom:4px;display:block}
.cart-line__name:hover{color:var(--navy-700)}
.cart-line__opt{font-size:13px;color:var(--muted-2);margin-bottom:8px}
.cart-line__foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:10px}
.cart-line__price{text-align:right;white-space:nowrap}
.cart-line__price .now{font:700 16px var(--font-sans);color:var(--ink)}
.cart-line__price .each{display:block;font-size:12.5px;color:var(--muted-2);margin-top:2px}
.cart-line__remove{font-size:13px;color:var(--muted-2);display:inline-flex;align-items:center;gap:5px}
.cart-line__remove:hover{color:var(--red)}
@media(max-width:560px){
  .cart-line{grid-template-columns:76px 1fr;gap:12px}
  .cart-line__img{width:76px;height:76px}
  .cart-line__price{grid-column:2;text-align:left;margin-top:8px}
}

.summary{border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;background:#fff;position:sticky;top:calc(var(--header-h) + 20px)}
@media(max-width:960px){.summary{position:static}}
.summary h3{font-family:var(--font-sans);font-size:1.02rem;font-weight:700;letter-spacing:-.01em;margin-bottom:18px}
.summary__row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;font-size:14.5px;color:var(--muted)}
.summary__row strong{color:var(--ink);font-weight:600}
.summary__row--free strong{color:var(--green)}
.summary__row--discount{color:var(--green)}
.summary__total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-top:16px;margin-top:10px;border-top:1px solid var(--line);font-weight:700}
.summary__total span{font-size:15px;color:var(--ink)}
.summary__total strong{font:700 24px var(--font-sans);letter-spacing:-.02em;color:var(--ink)}
.summary__note{font-size:12.5px;color:var(--muted-2);margin-top:8px;text-align:center}

.coupon-form{display:flex;gap:8px;margin:16px 0 4px}
.coupon-form .input{padding-block:10px;font-size:13.5px;text-transform:uppercase}
.coupon-applied{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border:1px dashed #A9D8BE;background:var(--green-bg);border-radius:var(--radius-sm);font-size:13.5px;color:var(--green);margin:16px 0 4px}
.coupon-applied button{color:var(--muted);font-size:12.5px}
.coupon-applied button:hover{color:var(--red)}

.ship-progress{background:var(--bg-soft);border-radius:var(--radius-sm);padding:13px 15px;margin-bottom:18px;font-size:13px;color:var(--ink-2)}
.ship-progress__bar{height:5px;border-radius:3px;background:#DDE4EC;margin-top:9px;overflow:hidden}
.ship-progress__fill{height:100%;background:linear-gradient(90deg,var(--gold-600),var(--gold-300));border-radius:3px;transition:width .5s var(--ease)}

/* checkout */
.checkout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(28px,3.5vw,56px);align-items:start}
@media(max-width:960px){.checkout{grid-template-columns:1fr}.checkout__summary{order:-1}}
.co-step{margin-bottom:34px}
.co-step__head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.co-step__n{
  flex:none;width:28px;height:28px;border-radius:50%;background:var(--navy-700);color:#fff;
  display:grid;place-items:center;font:700 13px var(--font-sans);
}
.co-step__head h3{font-family:var(--font-sans);font-size:1.02rem;font-weight:700;letter-spacing:-.01em}

.pay-option{display:flex;gap:13px;align-items:flex-start;padding:16px;border:1.5px solid var(--line);border-radius:var(--radius);cursor:pointer;transition:all var(--fast);background:#fff}
.pay-option+.pay-option{margin-top:11px}
.pay-option:hover{border-color:#C6D2E0}
.pay-option.is-active{border-color:var(--navy-700);background:var(--navy-050)}
.pay-option input{margin-top:3px}
.pay-option strong{display:block;font:600 14.5px var(--font-sans);color:var(--ink);margin-bottom:3px}
.pay-option span{font-size:13px;color:var(--muted);display:block}
.pay-logos{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.pay-logos span{font:600 10px var(--font-sans);letter-spacing:.04em;padding:3px 7px;border:1px solid var(--line);border-radius:4px;color:var(--muted-2);background:#fff}

.mini-line{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2);align-items:center}
.mini-line:last-of-type{border-bottom:0}
.mini-line__img{position:relative;flex:none;width:52px;height:52px;border-radius:7px;overflow:hidden;background:var(--bg-soft);border:1px solid var(--line)}
.mini-line__img img{width:100%;height:100%;object-fit:cover}
.mini-line__qty{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;border-radius:10px;background:var(--muted);color:#fff;font:700 10.5px/19px var(--font-sans);text-align:center;box-shadow:0 0 0 2px #fff}
.mini-line__name{font:600 13.5px var(--font-sans);color:var(--ink);line-height:1.4}
.mini-line__opt{font-size:12px;color:var(--muted-2)}
.mini-line__price{margin-left:auto;font:600 13.5px var(--font-sans);white-space:nowrap}

.secure-note{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12.5px;color:var(--muted-2);margin-top:14px}

/* order success */
.success-hero{text-align:center;padding:clamp(36px,5vw,60px) 0 clamp(28px,4vw,44px)}
.success-hero__ico{width:76px;height:76px;border-radius:50%;background:var(--green-bg);color:var(--green);display:grid;place-items:center;margin:0 auto 22px;animation:pop .45s var(--ease)}
@keyframes pop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.success-hero h1{margin-bottom:10px}
.success-hero p{color:var(--muted);max-width:52ch;margin-inline:auto}
.order-ref{display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding:10px 18px;border:1px dashed var(--line);border-radius:var(--radius-sm);background:var(--bg-soft);font:600 15px var(--font-sans);letter-spacing:.03em}

.dl-card{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:border-color var(--fast),box-shadow var(--fast)}
.dl-card+.dl-card{margin-top:11px}
.dl-card:hover{border-color:var(--navy-500);box-shadow:var(--sh-1)}
.dl-card__ico{flex:none;width:44px;height:44px;border-radius:10px;background:var(--blue-bg);color:var(--blue);display:grid;place-items:center}
.dl-card strong{display:block;font:600 14.5px var(--font-sans);color:var(--ink)}
.dl-card span{font-size:12.5px;color:var(--muted-2)}

/* order timeline */
.timeline{position:relative;padding-left:28px}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--line)}
.timeline__item{position:relative;padding-bottom:22px}
.timeline__item:last-child{padding-bottom:0}
.timeline__item::before{content:"";position:absolute;left:-25px;top:5px;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--line)}
.timeline__item.is-done::before{background:var(--navy-700);border-color:var(--navy-700)}
.timeline__item.is-current::before{background:var(--gold-600);border-color:var(--gold-600);box-shadow:0 0 0 4px var(--gold-100)}
.timeline__item strong{display:block;font:600 14px var(--font-sans);color:var(--ink)}
.timeline__item span{font-size:12.5px;color:var(--muted-2)}
.timeline__item p{font-size:13.5px;color:var(--muted);margin:5px 0 0}

/* ---------------------------------------------------------------
   15. Account
   --------------------------------------------------------------- */
.account{display:grid;grid-template-columns:250px 1fr;gap:clamp(24px,3vw,44px);align-items:start}
@media(max-width:860px){.account{grid-template-columns:1fr}}
.acct-nav{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.acct-nav__head{padding:20px;border-bottom:1px solid var(--line);background:var(--bg-soft)}
.acct-nav__avatar{width:44px;height:44px;border-radius:50%;background:var(--navy-700);color:#fff;display:grid;place-items:center;font:700 17px var(--font-sans);margin-bottom:11px}
.acct-nav__head strong{display:block;font-size:15px;color:var(--ink)}
.acct-nav__head span{font-size:12.5px;color:var(--muted-2);word-break:break-all}
.acct-nav a{display:flex;align-items:center;gap:11px;padding:12px 20px;font-size:14.5px;color:var(--ink-2);border-left:3px solid transparent;transition:all var(--fast)}
.acct-nav a:hover{background:var(--bg-soft);color:var(--navy-700)}
.acct-nav a.is-active{background:var(--navy-050);border-left-color:var(--navy-700);color:var(--navy-700);font-weight:600}
.acct-nav a svg{flex:none;opacity:.72}
.acct-nav a.is-danger{color:var(--red);border-top:1px solid var(--line)}

.panel{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden}
.panel__head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.panel__head h2,.panel__head h3{font-family:var(--font-sans);font-size:1.02rem;font-weight:700;letter-spacing:-.01em;margin:0}
.panel__body{padding:22px}
.panel__body--flush{padding:0}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:24px}
.stat{border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:#fff}
.stat__label{font:600 11px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
.stat__value{font:700 25px var(--font-sans);letter-spacing:-.02em;color:var(--ink)}

.table-wrap{overflow-x:auto}
.tbl{width:100%;font-size:14px}
.tbl th{
  text-align:left;padding:12px 16px;background:var(--bg-soft);border-bottom:1px solid var(--line);
  font:600 11.5px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background var(--fast)}
.tbl tbody tr:hover{background:#FBFCFD}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl a.strong{font-weight:600;color:var(--navy-700)}

.addr-card{border:1px solid var(--line);border-radius:var(--radius);padding:18px;position:relative;background:#fff}
.addr-card.is-default{border-color:var(--navy-500);box-shadow:0 0 0 1px var(--navy-500)}
.addr-card__tag{position:absolute;top:14px;right:14px}
.addr-card strong{display:block;margin-bottom:5px}
.addr-card p{font-size:13.5px;color:var(--muted);line-height:1.65;margin:0 0 12px}
.addr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}

/* auth pages */
.auth{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - var(--header-h))}
.auth__form{display:flex;align-items:center;justify-content:center;padding:clamp(32px,5vw,64px) var(--gutter)}
.auth__form-inner{width:100%;max-width:400px}
.auth__aside{position:relative;background:var(--navy-800);color:#fff;display:flex;align-items:center;padding:clamp(40px,5vw,72px);overflow:hidden}
.auth__aside img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22}
.auth__aside-inner{position:relative;z-index:2;max-width:400px}
.auth__aside h2{color:#fff;margin-bottom:14px}
.auth__aside p{color:rgba(255,255,255,.74)}
.auth__aside ul{margin-top:26px}
.auth__aside li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:14.5px;color:rgba(255,255,255,.86)}
.auth__aside li svg{flex:none;margin-top:3px;color:var(--gold-300)}
.divider{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--muted-2);font-size:13px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
/* Declared after .auth__aside so `display:none` actually wins — as a single
   class selector it used to be overridden by the `display:flex` below it. */
@media(max-width:900px){
  .auth{grid-template-columns:1fr;min-height:0}
  .auth__aside{display:none}
}

/* ---------------------------------------------------------------
   16. Footer
   --------------------------------------------------------------- */
.footer{background:var(--navy-900);color:#9FB2C6;padding-block:clamp(44px,5vw,64px) 0;font-size:14px}
.footer__grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(24px,3vw,44px);padding-bottom:40px}
@media(max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer__grid{grid-template-columns:1fr;gap:28px}}
.footer__logo img{height:52px;width:auto;margin-bottom:16px}
.footer__about{max-width:36ch;line-height:1.75;font-size:13.5px}
.footer h5{color:#fff;font:600 12px var(--font-sans);letter-spacing:.13em;text-transform:uppercase;margin-bottom:16px}
.footer li+li{margin-top:9px}
.footer a{color:#9FB2C6}
.footer a:hover{color:var(--gold-300)}
.footer__contact li{display:flex;gap:10px;align-items:flex-start;line-height:1.6}
.footer__contact svg{flex:none;margin-top:3px;opacity:.6}
.footer__social{display:flex;gap:9px;margin-top:20px}
.footer__social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.07);display:grid;place-items:center;color:#C7D5E3;transition:all var(--fast)}
.footer__social a:hover{background:var(--gold-600);color:#fff;transform:translateY(-2px)}
.footer__bar{border-top:1px solid rgba(255,255,255,.09);padding-block:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#7D91A8}
.footer__credit a{color:#B9C8D8;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(228,201,139,.45);padding-bottom:1px;transition:color var(--fast),border-color var(--fast)}
.footer__credit a:hover,.footer__credit a:focus-visible{color:var(--gold-500);border-bottom-color:var(--gold-500)}
/* ---------------------------------------------------------------
   17. Utilities
   --------------------------------------------------------------- */
.text-muted{color:var(--muted)}
.text-sm{font-size:13.5px}
.text-xs{font-size:12.5px}
.text-center{text-align:center}
.text-right{text-align:right}
.fw-600{font-weight:600}
.fw-700{font-weight:700}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}
.tabular{font-variant-numeric:tabular-nums}

.skeleton{background:linear-gradient(90deg,#EEF1F5 25%,#F6F8FA 50%,#EEF1F5 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:6px}
@keyframes shimmer{to{background-position:-200% 0}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

@media print{
  .header,.footer,.announce,.nav,.btn,.toast-wrap,.drawer,.overlay{display:none !important}
  body{font-size:12pt}
  .container{max-width:100%}
}

/* ---------------------------------------------------------------
   18. Responsive polish
   Everything below is presentation only: it keeps the page inside the
   viewport at 360px, keeps tap targets thumb-sized, and stops short
   pages from stranding the footer half way up a tall screen.
   --------------------------------------------------------------- */

/* -- 18.1 page shell: the footer always sits at the bottom ------- */
body{min-height:100vh;display:flex;flex-direction:column}
body>main#main{flex:1 0 auto;display:flex;flex-direction:column;min-width:0}
body>.footer{flex:none}
/* A short page (404, empty cart, empty wishlist) centres its one section in
   whatever room is left instead of leaving a dead band above the footer. */
.section--fill{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center}
.section--fill>.container{width:100%}

/* -- 18.2 nothing may scroll sideways ----------------------------
   No blanket `overflow-x:hidden` here on purpose: every case below is
   fixed at the element that actually overflows. */
.crumbs li,.crumbs a{min-width:0;overflow-wrap:anywhere}
.order-ref,.acct-nav__head span,.dl-card strong,.dl-card span{overflow-wrap:anywhere}
.summary__row,.summary__total{min-width:0}
.summary__row span,.summary__row strong{overflow-wrap:anywhere}
.cart-line__name,.mini-line__name,.card__title{overflow-wrap:anywhere}
.rte{overflow-wrap:break-word}
.rte table{display:block;overflow-x:auto;max-width:100%}
.rte pre{overflow-x:auto}
.table-wrap{max-width:100%;-webkit-overflow-scrolling:touch}

/* -- 18.3 header, nav, drawer ------------------------------------ */
.icon-btn{flex:none}
.header__bar{min-width:0}
.header__logo{min-width:0}
.mega{max-width:calc(100vw - var(--gutter)*2)}
@media(max-width:900px){
  .header__bar{gap:10px}
  .header__actions{gap:2px}
}
@media(max-width:430px){
  .header__bar{gap:6px;height:64px}
  .header__logo img{height:38px}
  .icon-btn{width:44px;height:44px}
  .icon-btn svg{width:21px;height:21px}
  .icon-btn__count{top:2px;right:1px;font-size:12px;min-width:19px;height:19px;line-height:19px}
}
/* mobile drawer nav: comfortable rows, a genuinely usable search field */
.drawer-nav__search .input{min-height:46px}
.mnav__link{min-height:48px;display:flex;align-items:center}
.mnav__toggle{min-width:52px;min-height:48px}
.mnav__sub a{min-height:44px;display:flex;align-items:center}
.mnav__sub .mnav__sub a{min-height:42px}
.drawer__body{-webkit-overflow-scrolling:touch}
.drawer__head .icon-btn{width:44px;height:44px}

/* -- 18.4 footer ------------------------------------------------- */
/* At tablet the 1.6fr brand column left a tall hole beside a short link list;
   give it the full row and let the three link columns sit under it. */
@media(max-width:900px){
  .footer__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 24px;padding-bottom:34px}
  .footer__grid>:first-child{grid-column:1/-1}
  .footer__about{max-width:62ch}
}
@media(max-width:640px){.footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.footer__grid{grid-template-columns:1fr;gap:26px}}
.footer__contact li{overflow-wrap:anywhere}
.footer__contact a{overflow-wrap:anywhere}
.footer__social a{width:44px;height:44px}
@media(max-width:560px){
  .footer__bar{flex-direction:column;gap:8px;text-align:left;padding-block:18px}
}

/* -- 18.5 tap targets (44px minimum on touch-sized screens) ------- */
@media(max-width:900px){
  .pg{min-width:44px;height:44px}
  .btn{padding-block:14px}
  .btn--sm{padding:11px 16px;min-height:44px}
  .btn--icon{width:44px;height:44px}
  .chip{padding:8px 8px 8px 14px}
  .chip button{width:24px;height:24px;font-size:13px}
  .card__wish{width:42px;height:42px;top:8px;right:8px}
  .gallery__zoom{width:44px;height:44px}
  .gallery__thumb{width:66px;height:66px}
  .qty button{width:48px;height:48px}
  .qty input{height:48px;width:56px}
  .cart-line__remove{min-height:44px;display:inline-flex;align-items:center}
  .section-head__link{min-height:44px}
  .pdp__cat{display:inline-flex;align-items:center;min-height:36px}
  .pill{padding:11px 16px}
  .filter__head{min-height:44px}
  .filter__list a{padding-block:10px;min-height:44px;align-items:center}
  .acct-nav a{min-height:48px}
  .hero__dots{gap:0}
  .hero__dot{width:44px;height:44px;border-radius:0;background:none;display:grid;place-items:center}
  .hero__dot::before{content:"";width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.24);transition:background var(--fast),width var(--fast)}
  .hero__dot.is-active{width:52px;background:none}
  .hero__dot.is-active::before{background:var(--gold-500);width:40px}
}

/* -- 18.6 readable type on small screens ------------------------- */
@media(max-width:640px){
  /* iOS zooms the page when a focused field is under 16px */
  .input,.select,.textarea,input,select,textarea{font-size:16px}
  .header__search input{font-size:16px}
  .coupon-form .input{font-size:16px}
  .shop__tools .select{font-size:16px}
  /* nothing under 12px */
  .card__cat,.card__flag,.type-tag,.section-head__eyebrow,
  .hero__eyebrow,.pdp__cat,.mini-line__qty,.icon-btn__count,.card__price .off,
  .badge,.stars-count,.text-xs,.field__hint,.field__error,.summary__note,
  .cart-line__opt,.mini-line__opt,.card__meta,.mega__col h5,.timeline__item span,
  .dl-card span,.stat__label,.acct-nav__head span{font-size:12px}
  .card__flag{padding:4px 8px}
  .icon-btn__count{line-height:19px}
  .badge{line-height:1.5}
}

/* -- 18.7 cards, grids and rhythm -------------------------------- */
.card__body{min-width:0}
.card__title a{overflow-wrap:anywhere}
.card__quick .btn{white-space:normal;line-height:1.25}
@media(max-width:520px){
  :root{--gutter:16px}
  .card__body{padding:12px 12px 14px;gap:6px}
  .card__quick{margin:0 10px 10px}
  .card__quick .btn{font-size:12.5px;padding-inline:8px}
  .card__price .now{font-size:16px}
  .card__title{font-size:14px}
}
/* Row heights stay level: every card fills its grid cell. */
.product-grid>.card,.product-grid>article{height:100%}
.cat-grid>.cat-tile{height:100%}
.cat-tile__media{flex:none}

/* -- 18.8 shop / listing ----------------------------------------- */
.shop__aside{align-self:start}
@media(max-width:1000px){
  .shop__aside.is-open{margin-bottom:24px;border:1px solid var(--line);border-radius:var(--radius);padding:18px}
  .shop__aside.is-open .filter:first-child{padding-top:0}
}
.shop__toolbar{min-width:0}
.shop__tools{flex-wrap:wrap}
@media(max-width:560px){
  .shop__toolbar{gap:12px}
  .shop__tools{width:100%}
  .shop__tools form{flex:1}
  .shop__tools .select{width:100%;min-width:0}
}
.active-filters{min-width:0}

/* -- 18.9 product detail ----------------------------------------- */
.pdp__price{min-width:0}
.opt__choices{min-width:0}
@media(max-width:560px){
  .pdp__buy{display:grid;grid-template-columns:minmax(0,1fr) 52px;gap:10px}
  .pdp__buy .btn{flex:none;width:100%;min-width:0}
  .pdp__buy .btn:not(.btn--icon){grid-column:1}
  .pdp__buy .btn--icon{grid-column:2;grid-row:1;height:100%}
  .opt__choice span{min-width:70px;padding:11px 12px}
}

/* -- 18.10 cart, checkout, account ------------------------------- */
.cart-layout,.checkout,.account{min-width:0}
@media(max-width:560px){
  .coupon-form{flex-wrap:wrap}
  .coupon-form .btn{flex:1}
  .summary{padding:18px}
  .summary__total strong{font-size:21px}
}
/* At tablet the account sidebar is a full-width card, so lay the nav out as a
   wrapping row rather than a tall single column with dead space beside it. */
@media(min-width:861px) and (max-width:1080px){
  .account{grid-template-columns:210px minmax(0,1fr)}
}
@media(max-width:860px){
  .acct-nav{display:flex;flex-wrap:wrap}
  .acct-nav__head{flex:1 0 100%}
  .acct-nav a{flex:1 1 auto;border-left:0;border-top:1px solid var(--line);justify-content:flex-start}
  .acct-nav a.is-active{border-left:0;box-shadow:inset 3px 0 0 var(--navy-700)}
  .acct-nav a.is-danger{border-top:1px solid var(--line)}
}
.addr-grid{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.stat-grid{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.panel__head{min-width:0}
.panel__head h2,.panel__head h3{min-width:0;overflow-wrap:anywhere}
.timeline__item strong,.timeline__item p{overflow-wrap:anywhere}

/* -- 18.11 empty states and short pages -------------------------- */
.empty{width:100%}
.empty__ico{width:72px;height:72px}
@media(max-width:520px){.empty{padding-inline:0}}

/* Lazy images fade in once decoded, but are never left invisible if the
   load event is missed (no-JS, cached, or bfcache restore). */
img[loading="lazy"]{opacity:1}
img[loading="lazy"].is-loaded{animation:imgIn .35s var(--ease)}
@keyframes imgIn{from{opacity:.25}to{opacity:1}}