/* ==========================================================================
   amazon.css — storefront skin                                        (v2)

   The file name stays (index.html and every other stylesheet load order
   depend on it) but the SKIN does not: the palette below is HARDTRAC's own.
   Same containers, same class names, same layout — different colours, type
   and roundness, so the shop reads as ours rather than as a copy.

   Loaded LAST, after app.css, grid.css and reco.css. It does not rename a
   single class, so store.js / reco.js / common.js keep working untouched —
   it only repaints what those files already emit.

   Two things do the heavy lifting:

   1. TOKENS. app.css is built on CSS variables, so overriding the token
      block below swings ~60% of the UI to Amazon's palette in one move.
   2. TARGETED OVERRIDES. The header, nav, cards, buy box, rails and footer
      are then rebuilt selector by selector, because those are the pieces a
      shopper actually recognises as "this looks like Amazon".

   Palette (HARDTRAC):
     #1E1B3A  header bar          #2B2658  sub nav / footer top
     #3B3474  nav hover           #FFC53D  search button (gold)
     #6C4CF1  add to cart         #FF6B3D  buy now (coral)
     #5B3DF5  link violet         #3A24C9  link hover
     #E0245E  deal / price drop   #00C2A8  Open Box
     #F1F0F7  page canvas         #D8D5E4  borders
     #F5A524  stars               #0E9F6E  in-stock green

   The --amz-* names are kept as ALIASES of the new --ht-* tokens. Renaming
   them would have meant touching ~30 rules across four files for no visual
   gain; one alias line each keeps every existing rule working.
   ========================================================================== */

/* ==========================================================================
   1. TOKEN OVERRIDE
   ========================================================================== */
:root{
  /* ---- HARDTRAC palette ---- */
  --ht-nav:#1E1B3A;         /* header slab — deep indigo, not navy-black */
  --ht-sub:#2B2658;         /* category strip + footer top */
  --ht-hover:#3B3474;
  --ht-gold:#FFC53D;        /* search button */
  --ht-violet:#6C4CF1;      /* primary action — add to cart, save, submit */
  --ht-violet-ink:#5A3BE0;
  --ht-coral:#FF6B3D;       /* secondary action — buy now */
  --ht-teal:#00C2A8;        /* Open Box, the other storefront */
  --ht-pink:#E0245E;        /* deals, price drops, urgency */

  /* aliases, so every rule written against the old names still works */
  --amz-nav:var(--ht-nav);
  --amz-sub:var(--ht-sub);
  --amz-hover:var(--ht-hover);
  --amz-search:var(--ht-gold);
  --amz-cart:var(--ht-violet);
  --amz-buy:var(--ht-coral);

  --brand:#5B3DF5;          /* every link app.css paints with --brand */
  --brand-ink:#3A24C9;      /* link hover */
  --brand-2:#2B2658;
  --brand-soft:#F4F1FF;
  --brand-line:#DED6FF;

  --ink:#14121F;
  --ink-2:#5A5570;
  --ink-3:#8A85A0;

  --bg:#fff;
  --bg-2:#F9F8FD;
  --bg-3:#EFEDF6;
  --canvas:#F1F0F7;         /* a cool lilac page, not Amazon's grey-green */
  --line:#EAE8F2;
  --line-2:#D8D5E4;

  --green:#0E9F6E;
  --green-bg:#E7F7F0;
  --star:#F5A524;
  --warn:#C2410C;
  --warn-bg:#FEF1E7;

  /* rounder than Amazon's 4/8px, which is most of the "not Amazon" feeling */
  --radius:10px;
  --radius-sm:7px;
  --radius-lg:14px;

  --shadow-sm:0 2px 6px rgba(30,27,58,.08);
  --shadow-lg:0 6px 22px rgba(30,27,58,.14);
  --ring:0 0 0 3px rgba(108,76,241,.28);

  --maxw:1500px;
}

html,body{background:var(--canvas)}
body{
  font-family:"Plus Jakarta Sans","Inter",system-ui,-apple-system,"Segoe UI",Roboto,
              "Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  letter-spacing:-.005em;          /* a hair tighter — reads as designed, not default */
}

/* Amazon's content column is wide and edge-padded, not narrow and centred. */
.wrap{max-width:var(--maxw);padding:0 18px}
@media (max-width:700px){ .wrap{padding:0 12px} }

a,.link{color:var(--brand);text-decoration:none}
a:hover,.link:hover{color:var(--brand-ink);text-decoration:underline}

/* ==========================================================================
   2. HEADER — the dark two-tier bar
   ========================================================================== */
.hdr{
  background:var(--amz-nav);
  border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;   /* solid bar — nothing to blur */
  position:sticky;top:0;z-index:60;
}
.hdr-stick{background:var(--amz-nav)}
.hdr-main{
  display:flex;align-items:center;gap:0;flex-wrap:nowrap;
  padding:0;min-height:60px;
}

/* Every direct hit area in the nav gets Amazon's 1px hover outline. */
.hdr-main>*{border:1px solid transparent;border-radius:2px}
.brand-logo,.hdr-btn,.hdr-cart,.nav-geo,.nav-lang{
  padding:7px 9px;display:flex;align-items:center;
  border:1px solid transparent;border-radius:2px;background:transparent;
  cursor:pointer;transition:border-color .1s;
}
.brand-logo{height:auto}   /* app.css pins this to 24px; the nav tile sets its own */
.brand-logo:hover,.hdr-btn:hover,.hdr-cart:hover,.nav-geo:hover,.nav-lang:hover{
  border-color:#fff;background:transparent;
}
/* logo-light.png is already white-on-transparent (the source logo.png is dark
   ink on a SOLID WHITE background, so the old `brightness(0) invert(1)` trick
   turned the whole rectangle white — that was the white box in the header). */
.brand-logo img{height:30px;width:auto;display:block}

/* "Deliver to Mumbai 400059" */
.nav-geo{flex-direction:row;gap:5px;color:#fff;align-items:flex-end;flex:0 0 auto}
.nav-geo svg{width:16px;height:16px;stroke:#fff;margin-bottom:2px}
.nav-geo .t1{font-size:12px;color:#ccc;line-height:1.1}
.nav-geo .t2{font-size:14px;font-weight:700;color:#fff;line-height:1.1;white-space:nowrap}
.nav-geo-txt{display:flex;flex-direction:column}

/* Search: grey select, white field, amber button — the single most
   recognisable element on the page. */
.search-box{
  flex:1 1 auto;display:flex;align-items:stretch;min-width:0;
  height:40px;margin:0 10px;border-radius:4px;overflow:hidden;
  background:#fff;border:0;box-shadow:none;
}
.search-box:focus-within{box-shadow:0 0 0 3px #f90;border:0}
.search-box select{
  flex:0 0 auto;width:auto;max-width:180px;
  background:#EDEAF6;color:var(--ink);border:0;border-right:1px solid #D8D5E4;
  font-size:12px;font-weight:500;padding:0 22px 0 10px;cursor:pointer;
  border-radius:4px 0 0 4px;
}
.search-box select:hover{background:#dadada}
.search-box input{
  flex:1;border:0;background:#fff;padding:0 12px;font-size:15px;min-width:0;color:var(--ink);
}
.search-box input::placeholder{color:#767676}
.search-box button{
  flex:0 0 45px;background:var(--ht-gold);color:#3A2600;border:0;
  border-radius:0 4px 4px 0;display:grid;place-items:center;cursor:pointer;
}
.search-box button:hover{background:#f3a847}
.search-box button svg{width:20px;height:20px;stroke-width:2.4}

.hdr-actions{display:flex;align-items:center;gap:0;margin-left:auto;flex:0 0 auto}

/* Sign-in / Orders — two stacked lines, small over large. */
.hdr-btn{flex-direction:column;align-items:flex-start;color:#fff;line-height:1.15}
.hdr-btn .t1{display:block;font-size:12px;color:#fff;font-weight:400;white-space:nowrap}
.hdr-btn .t2{font-size:14px;font-weight:700;color:#fff;white-space:nowrap}

/* Cart — the count sits over the trolley in amber, exactly like Amazon.
   Note: no `display` here. store.js toggles the badge with an inline style
   (`grid` when the cart has items, `none` when empty). Setting display in
   CSS with !important would beat that inline style and pin a permanent
   "0" over the trolley. */
.hdr-cart{
  background:transparent;color:#fff;gap:4px;align-items:flex-end;
  border-radius:2px;padding:12px 9px 7px;
}
.hdr-cart:hover{background:transparent}
.hdr-cart svg{width:30px;height:30px;stroke:#fff;stroke-width:1.6}
.hdr-cart .t2{color:#fff;font-size:14px;font-weight:700;margin-bottom:2px}
.cart-count{
  position:absolute;top:-10px;right:auto;left:15px;
  background:transparent;color:var(--amz-search);
  min-width:auto;height:auto;padding:0;border-radius:0;
  font-size:16px;font-weight:700;line-height:1;
  box-shadow:none;border:0;place-items:center;
}


/* ==========================================================================
   2b. OPEN BOX PILL — the one button in the header that is not part of the
   nav's flat vocabulary, on purpose: it sends the shopper to a different
   storefront (openbox.hardtrac.co.in, served from /var/www/openbox) in a new
   tab, so it is amber, rounded and slightly alive.
   ========================================================================== */
.hdr-openbox{
  position:relative;display:flex;align-items:center;gap:8px;
  margin:0 10px 0 4px;padding:6px 12px 6px 10px;
  border-radius:100px;border:1px solid #4ce0cd;
  background:linear-gradient(180deg,#19D6BC 0%,#00A894 100%);
  color:#06231F;text-decoration:none;flex:0 0 auto;
  box-shadow:0 2px 0 rgba(6,35,31,.22),0 0 0 0 rgba(0,194,168,.55);
  transition:transform .16s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease,background .22s ease;
  overflow:hidden;
}
.hdr-openbox:hover{
  background:linear-gradient(180deg,#2BEBD0 0%,#0ABFA8 100%);
  color:#06231F;text-decoration:none;border-color:#fff;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(6,35,31,.3),0 0 0 4px rgba(0,194,168,.3);
}
.hdr-openbox:active{transform:translateY(0)}
.hdr-openbox .ob-ico{display:flex;flex:0 0 auto}
.hdr-openbox .ob-ico svg{width:22px;height:22px;stroke:#06231F}
.hdr-openbox .ob-txt{display:flex;flex-direction:column;line-height:1.12;min-width:0}
.hdr-openbox .t1{font-size:10.5px;font-weight:700;color:#0A4A41;white-space:nowrap;text-transform:uppercase;letter-spacing:.03em}
.hdr-openbox .t2{font-size:14.5px;font-weight:800;color:#06231F;white-space:nowrap;letter-spacing:-.01em}
.hdr-openbox .ob-new{
  font-size:9px;font-weight:800;letter-spacing:.06em;color:#fff;
  background:var(--ht-pink);border-radius:100px;padding:2px 6px;margin-left:2px;flex:0 0 auto;
}
/* a slow breath + a single light sweep, so the eye finds it without it
   turning into a flashing advert */
@media (prefers-reduced-motion:no-preference){
  html:not(.lite) .hdr-openbox{animation:obGlow 3.4s ease-in-out infinite}
  html:not(.lite) .hdr-openbox::after{
    content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
    transform:skewX(-18deg);animation:obShine 4.6s ease-in-out infinite;
  }
  @keyframes obGlow{
    0%,100%{box-shadow:0 2px 0 rgba(6,35,31,.22),0 0 0 0 rgba(0,194,168,.5)}
    50%    {box-shadow:0 2px 0 rgba(6,35,31,.22),0 0 0 6px rgba(0,194,168,0)}
  }
  @keyframes obShine{0%,68%{left:-60%}100%{left:130%}}
  html:not(.lite) .hdr-openbox:hover{animation:none}
  html:not(.lite) .hdr-openbox:hover::after{animation:none;opacity:0}
}

/* ---- sub nav: the dark strip of categories ---- */
.subnav{background:var(--amz-sub)}
.subnav-inner{
  display:flex;gap:0;overflow-x:auto;padding:0;min-height:39px;align-items:center;
  scrollbar-width:none;
}
.subnav-inner::-webkit-scrollbar{display:none}
.subnav-inner a{
  color:#fff;font-size:14px;font-weight:400;padding:8px 9px;white-space:nowrap;
  border:1px solid transparent;border-radius:2px;background:transparent;
}
.subnav-inner a::after{display:none}
.subnav-inner a:hover,.subnav-inner a:active{
  color:#fff;background:transparent;border-color:#fff;
}
.subnav-inner a.on{color:#fff;font-weight:700;background:transparent}
.subnav-inner a.deals{color:#fff;font-weight:700}
.subnav-inner a.deals:hover{background:transparent;border-color:#fff}
/* Open Box lives in the strip too, tinted so it reads as a different store. */
.subnav-inner a.sub-openbox{
  color:#06231F;font-weight:700;background:linear-gradient(180deg,#19D6BC 0%,#00A894 100%);
  border-radius:100px;padding:4px 12px;margin:0 8px;line-height:1.5;
}
.subnav-inner a.sub-openbox:hover{
  color:#06231F;background:linear-gradient(180deg,#2BEBD0 0%,#0ABFA8 100%);
  border-color:transparent;text-decoration:none;
}

/* ==========================================================================
   3. PAGE FURNITURE
   ========================================================================== */
#view{background:var(--canvas);min-height:60vh;padding-bottom:24px}

.crumbs{font-size:12px;color:var(--ink-2);padding:12px 0 8px}
.page-h1{font-size:21px;font-weight:700;letter-spacing:0;margin:4px 0 12px}

/* Amazon does not round its panels much, and never floats them. */
.card,.panel,.summary-box,.hero-card,.hero-cat,.pcard,.rcard,
.atc-main,.atc-side,.pay-kpi,.pay-row,.pay-alert{
  border-radius:8px;
}

/* ---- hero: the deal tiles from the home page ---- */
.hero{padding:14px 0 0}
.hero-card{
  background:#fff;border:0;border-radius:8px;padding:20px;box-shadow:none;
}
.hero-card h1{font-size:28px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.hero-card h1 .accent{color:var(--brand)}
.hero-card p{color:var(--ink-2);font-size:14px}
.hero-cat{
  background:#fff;border:1px solid var(--line-2);border-radius:8px;
}
.hero-cat:hover{border-color:#a9b0b0;box-shadow:var(--shadow-sm)}
.hero-cat-arrow{color:var(--brand)}
.hero-badge{border:1px solid var(--line-2);border-radius:8px}

/* ==========================================================================
   4. BUTTONS — the yellow pills
   ========================================================================== */
.btn{
  border-radius:100px;font-weight:400;font-size:14px;
  border:1px solid transparent;box-shadow:0 2px 5px rgba(15,17,17,.15);
  transition:background .1s;
}
.btn:active{box-shadow:inset 0 2px 5px rgba(15,17,17,.2)}

.btn-amber,.btn-primary{
  background:var(--ht-violet);border-color:var(--ht-violet-ink);color:#fff;font-weight:600;
}
.btn-amber:hover,.btn-primary:hover{background:var(--ht-violet-ink);border-color:#4B2FC7;color:#fff}

.btn-buy,#bbBuy{
  background:var(--ht-coral);border-color:#F2592B;color:#fff;font-weight:600;
}
.btn-buy:hover,#bbBuy:hover{background:#F2592B;border-color:#DC4A1F;color:#fff}

.btn-outline,.btn-ghost{
  background:#fff;border:1px solid var(--line-2);color:var(--ink);
  box-shadow:0 2px 5px rgba(15,17,17,.10);
}
.btn-outline:hover,.btn-ghost:hover{background:#f7fafa;border-color:#a9b0b0;color:var(--ink)}

.btn-sm{font-size:13px;padding:5px 11px}
.btn-block{width:100%}

/* Inputs match the search field: 1px grey, inner shadow, amber focus ring. */
input,select,textarea{
  border-radius:4px!important;border:1px solid #888c8c!important;
  box-shadow:0 1px 2px rgba(15,17,17,.08) inset!important;font-size:14px;
}
input:focus,select:focus,textarea:focus{
  border-color:#e77600!important;
  box-shadow:0 0 3px 2px rgba(228,121,17,.5)!important;outline:0;
}

/* ==========================================================================
   5. PRODUCT CARD
   ========================================================================== */
.pcard{
  background:#fff;border:1px solid transparent;border-radius:8px;
  box-shadow:none;transition:border-color .1s,box-shadow .1s;
}
.pcard:hover{border-color:var(--line-2);box-shadow:var(--shadow-lg);transform:none}
.pcard-imgwrap{background:#fff;border-radius:8px 8px 0 0}
.pcard-imgwrap img{mix-blend-mode:normal;padding:12px}

.pcard-deal{
  background:#CC0C39;color:#fff;border-radius:4px;font-size:11px;
  font-weight:700;padding:3px 7px;letter-spacing:0;
}
.pcard-fav{background:#fff;border:1px solid var(--line-2);color:var(--ink-2)}
.pcard-fav.on{color:var(--ht-pink);background:#FDEBF1;border-color:#F5C2D3}

.pcard-brand{
  font-size:11px;font-weight:400;color:var(--ink-2);
  text-transform:none;letter-spacing:0;
}
.pcard-name{
  font-size:14px;font-weight:400;line-height:1.35;color:var(--ink);
}
.pcard:hover .pcard-name{color:var(--brand-ink)}
.pcard-rating .rc{color:var(--brand)}
.stars{color:var(--star);letter-spacing:-.5px}

/* Price: big rupee figure, tiny raised symbol, struck M.R.P. after it. */
.pcard-price .price-now,.rcard-price .now,.pdp-price .now,.bb-price{
  font-size:21px;font-weight:400;color:var(--ink);letter-spacing:-.5px;
}
.price-now .cur,.rcard-price .now .cur,.pdp-price .now .cur,.bb-price .cur{
  font-size:12px;vertical-align:.55em;margin-right:1px;
}
.pcard-price .price-was,.rcard-price .was,.pdp-price .was{
  font-size:12px;color:var(--ink-2);text-decoration:line-through;font-weight:400;
}
.pcard-save{
  background:transparent;color:#CC0C39;font-size:12px;font-weight:400;padding:0;
}
.pcard-meta{color:var(--ink-2);font-weight:400;font-size:12px}
.rcard-price .off,.pcard-price .off{
  background:#CC0C39;color:#fff;border-radius:4px;padding:2px 5px;
  font-size:11px;font-weight:700;
}

/* ==========================================================================
   6. PRODUCT PAGE — gallery · info · buy box
   ========================================================================== */
.pdp{background:#fff;border-radius:8px;padding:18px}
.pdp h1,.pdp-title{font-size:24px;font-weight:400;line-height:1.3;color:var(--ink)}
.pdp-brand,.pdp-store{color:var(--brand);font-size:14px}
.pdp-save{color:#CC0C39;font-size:14px}
.pdp-offers .offer,.pdp-offer{
  border:1px solid var(--line-2);border-radius:8px;background:#fff;padding:12px;
}
.pdp-highlights{border-top:1px solid var(--line);padding-top:14px}

/* The buy box: bordered, radius 8, sticky on desktop. */
.buybox,.bb,.pdp-buy{
  background:#fff;border:1px solid var(--line-2);border-radius:8px;padding:16px;
}
.bb-price{display:block;margin-bottom:6px}
.bb-stock,.in-stock{color:var(--green);font-size:18px;font-weight:500}
.bb-eta,.pdp-eta{font-size:14px;color:var(--ink)}
.bb-eta b,.pdp-eta b{font-weight:700}

/* Quantity stepper — Amazon's grey rounded control. */
.qty,.qty-box{
  border:1px solid var(--line-2);border-radius:var(--radius);background:var(--bg-3);
  box-shadow:0 2px 5px rgba(15,17,17,.10);
}

/* ==========================================================================
   7. RAILS — the "Keep shopping for" / "Based on your browsing" carousels
   ========================================================================== */
.rails{padding:0 0 24px}
.rail{
  margin-top:16px;background:#fff;border-radius:8px;padding:14px 16px 6px;
}
.rail-head{margin-bottom:10px}
.rail-head h2{font-size:21px;font-weight:700;letter-spacing:0;color:var(--ink)}
.rail-sub{color:var(--ink);font-weight:700}
.rail-btn{
  width:36px;height:60px;border-radius:4px;border:1px solid var(--line-2);
  background:#fff;color:var(--ink);font-size:22px;box-shadow:var(--shadow-sm);
}
.rail-btn:hover{background:#f7fafa;border-color:#a9b0b0;color:var(--ink)}

.rcard{
  flex:0 0 200px;background:#fff;border:1px solid transparent;border-radius:8px;
}
.rcard:hover{border-color:var(--line-2);box-shadow:var(--shadow-lg);transform:none}
.rcard-img img{mix-blend-mode:normal}
.rcard-name{font-size:13px;font-weight:400;color:var(--ink)}
.rcard-name:hover{color:var(--brand-ink);text-decoration:underline}
.rcard-rating .rc{color:var(--brand)}
.rcard-oos{color:#CC0C39;font-size:12px}

/* ==========================================================================
   8. ADDED TO CART — the interstitial
   ========================================================================== */
.atc-wrap{padding-top:16px}
.atc-main,.atc-side{background:#fff;border:1px solid var(--line-2);padding:18px}
.atc-ok h1{font-size:22px;font-weight:400;color:var(--green)}
.atc-tick{color:var(--green)}
.atc-tick svg{width:28px;height:28px;stroke:var(--green);stroke-width:3}
.atc-name{font-size:14px;color:var(--ink)}
.atc-name:hover{color:var(--brand-ink);text-decoration:underline}
.atc-price .now{font-size:18px}
.atc-price .off{color:#CC0C39;font-weight:400}
.atc-sub-val{font-size:18px;font-weight:700;color:#B12704}
.atc-free{color:var(--green);font-size:13px}
.atc-free.ok{color:var(--green);font-weight:700}
.atc-bar{background:#e7e7e7;border-radius:99px;height:6px;overflow:hidden}
.atc-bar span{background:var(--green);display:block;height:100%}

/* ==========================================================================
   9. PAYMENTS & REFUNDS
   ========================================================================== */
.pay-page{padding-top:14px}
.pay-kpi,.pay-row,.pay-alert{background:#fff;border:1px solid var(--line-2)}
.pay-kpi .v{font-size:21px;font-weight:700;color:var(--ink)}
.pay-kpi .l{font-size:12px;color:var(--ink-2)}
.pay-row-amt{font-size:15px;font-weight:700;color:#B12704}
.pay-row-amt.in{color:var(--green)}
.pay-row-ico.in{background:var(--green-bg);color:var(--green)}
.pay-row-ico.out{background:#FDEBF1;color:var(--ht-pink)}
.pay-alert{border-left:4px solid var(--amz-buy)}

.seg,.pay-seg{background:#fff;border:1px solid var(--line-2);border-radius:8px;padding:3px}
.seg button,.pay-seg button{
  border-radius:6px;font-size:13px;font-weight:400;color:var(--ink-2);background:transparent;
}
.seg button.on,.pay-seg button.on{background:#f0f2f2;color:var(--ink);font-weight:700}

.pill{border-radius:4px;font-size:11.5px;font-weight:700;padding:3px 7px;background:#f0f2f2;color:var(--ink-2)}
.pill.ok{background:var(--green-bg);color:var(--green)}
.pill.bad{background:#fdecea;color:#B12704}

/* ==========================================================================
   10. DRAWERS / MODALS
   ========================================================================== */
.drawer,.modal{border-radius:var(--radius-lg)}
.drawer-head h3,.modal-head h3{font-size:18px;font-weight:700}
.overlay{background:rgba(20,18,31,.55)}
.role-seg button.on{background:var(--ht-violet);color:#fff;border-color:var(--ht-violet-ink)}

/* "or use your email" divider above the password form */
.auth-or{display:flex;align-items:center;gap:10px;margin:14px 0 4px;color:var(--ink-3);font-size:12px}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line-2)}

/* ==========================================================================
   11. FOOTER — link columns over the dark slab
   ========================================================================== */
.ft{background:transparent;border:0;margin-top:32px;color:#fff;padding:0}
.ft::before{content:none}                      /* replaced by a real button */
.ft-top{
  display:block;width:100%;background:var(--amz-hover);color:#fff;border:0;
  text-align:center;font-size:13px;padding:15px;cursor:pointer;
}
.ft-top:hover{background:#4A4291}
.ft-cols{background:var(--amz-sub)}
.ft-cols-inner{
  display:grid;gap:22px;padding:34px 18px 30px;
  grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));
}
.ft-col{display:flex;flex-direction:column;gap:9px;min-width:0}
.ft-col h4{font-size:16px;font-weight:700;color:#fff;margin:0 0 3px}
.ft-col a{font-size:13px;color:#ddd;text-decoration:none}
.ft-col a:hover{color:#fff;text-decoration:underline}
.ft-base{background:#131a22;border-top:1px solid #3a4553}
.ft-inner{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:20px 18px;color:#b9c0c7;font-size:12.5px;
}
.ft-inner img{filter:none;height:24px;width:auto}
.ft a,.ft .link{color:#ddd}
.ft a:hover{color:#fff;text-decoration:underline}

/* ==========================================================================
   12. PHONE
   ========================================================================== */
@media (max-width:860px){
  .hdr-main{flex-wrap:wrap;padding:6px 0;min-height:0}
  .search-box{order:3;flex:1 0 100%;margin:6px 0 2px;height:38px}
  /* 16px is the iOS threshold — anything smaller and Safari zooms the page
     in when the field is focused. app.css set it for this reason; the
     desktop rule above drops to 15px, so put it back here. */
  .search-box input{font-size:16px}
  .nav-geo{order:4;flex:1 0 100%;border-top:1px solid var(--ht-hover);padding:6px 9px}
  .hdr-btn .t1{font-size:11px}
  .hdr-btn .t2{font-size:12.5px}
  .hdr-cart svg{width:26px;height:26px}
  /* Open Box keeps its shape on a phone, just tighter — icon + one word. */
  .hdr-openbox{margin:0 6px 0 0;padding:5px 10px 5px 8px;gap:6px}
  .hdr-openbox .t1{display:none}
  .hdr-openbox .t2{font-size:13px}
  .hdr-openbox .ob-ico svg{width:19px;height:19px}
  .hdr-openbox .ob-new{display:none}
  .subnav-inner a.sub-openbox{padding:3px 10px;margin:0 6px;font-size:13px}
  .brand-logo img{height:26px}
  .rail{padding:12px 12px 4px}
  .rail-head h2{font-size:17px}
  .rcard{flex:0 0 160px}
  .ft-top{padding:13px}
  .ft-cols-inner{padding:24px 12px 22px;gap:16px}
  .ft-col h4{font-size:14.5px}
}

/* ==========================================================================
   13. PRINT / SAVE-AS-PDF
   Browsers drop every background colour and image when printing, unless you
   ask them not to. Without this rule the dark header, the dark footer, the
   yellow buttons and the hero all come out as blank white in a PDF — which
   looks exactly like a stylesheet that failed to load, and is a very easy way
   to misread a working page as broken.
   ========================================================================== */
@media print{
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  .hdr{position:static}
  .rail-nav,.hero-dots,.ft-top{display:none}     /* controls that do nothing on paper */
  .rail-track,.brand-row,.hist-row{overflow:visible;flex-wrap:wrap}
}

/* ==========================================================================
   12. BROWSE MENU — the "All" drawer.

   The category strip only ever had room for nine departments; the rest of the
   shop had no door at all. "All" is now a hamburger that slides this panel in
   from the LEFT (every other drawer here comes from the right — the side a
   menu opens from is part of how it is recognised).
   ========================================================================== */
.drawer-left{
  left:0;right:auto;
  width:min(365px,86vw);
  transform:translateX(-100%);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
}
.nav-dr-head{
  display:flex;align-items:center;gap:11px;flex:0 0 auto;
  padding:calc(15px + var(--safe-t)) 12px 15px 16px;
  background:linear-gradient(120deg,var(--ht-sub) 0%,var(--ht-nav) 100%);color:#fff;
}
.nav-dr-ava{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(255,255,255,.14);color:#fff;
}
.nav-dr-ava svg{width:20px;height:20px}
.nav-dr-who{flex:1;font-size:16px;font-weight:800;letter-spacing:-.01em;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-dr-x{color:rgba(255,255,255,.85)}
.nav-dr-x:hover{background:rgba(255,255,255,.12);color:#fff}
#navDrawer .drawer-body{padding:0}

/* Header — dark slab with avatar + "Hello, name", same as the store header. */
#navDrawer{border-radius:0;box-shadow:0 0 40px rgba(0,0,0,.35)}
.nav-dr-head{background:var(--ht-nav)}
.nav-dr-who{font-size:18px;font-weight:800}

/* Two panels side by side; .is-sub slides the sub-panel over the main one. */
#navDrawer .drawer-body.nm-wrap{padding:0;overflow:hidden;position:relative}
.nm-panel{
  position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;
  transition:transform .26s cubic-bezier(.22,1,.36,1),visibility .26s;
  -webkit-overflow-scrolling:touch;background:#fff;
}
.nm-main{transform:translateX(0)}
.nm-sub{transform:translateX(100%);visibility:hidden}
.nm-wrap.is-sub .nm-main{transform:translateX(-100%);visibility:hidden}
.nm-wrap.is-sub .nm-sub{transform:translateX(0);visibility:visible}

.nm-sec{padding:14px 0 8px;border-bottom:1px solid #d5d9d9}
.nm-sec:last-child{border-bottom:0;padding-bottom:calc(22px + var(--safe-b))}
.nm-sec h4{
  font-size:18px;font-weight:700;line-height:1.25;color:#0f1111;
  padding:0 20px 8px 36px;letter-spacing:-.005em;
}
.nm-sec ul{list-style:none;margin:0;padding:0}
.nm-row{
  display:flex;align-items:center;gap:10px;
  padding:12px 20px 12px 36px;min-height:44px;
  color:#111;text-decoration:none;font-size:14px;line-height:1.3;
}
.nm-row:hover,.nm-row:focus-visible{background:#eaeded;color:#0f1111;text-decoration:none;outline:none}
.nm-row:focus-visible{box-shadow:inset 3px 0 0 var(--ht-violet)}
.nm-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nm-row.strong .nm-lbl{font-weight:700;color:var(--ht-violet-ink)}
.nm-note{flex:0 0 auto;font-size:11.5px;color:#565959}
.nm-chev{flex:0 0 auto;display:grid;place-items:center;width:18px;height:18px;color:#6f7373}
.nm-chev svg{width:18px;height:18px}
.nm-ext svg{width:14px;height:14px}
.nm-row:hover .nm-chev{color:#0f1111}
.nm-more .nm-lbl{flex:0 0 auto}
.nm-more{gap:6px;justify-content:flex-start}

/* Sub-panel */
.nm-back{
  display:flex;align-items:center;gap:10px;
  padding:14px 20px 14px 30px;border-bottom:1px solid #d5d9d9;
  font-size:13.5px;font-weight:700;color:#111;letter-spacing:.02em;text-decoration:none;
}
.nm-back:hover,.nm-back:focus-visible{background:#eaeded;text-decoration:none;outline:none}
.nm-back-ico svg{width:18px;height:18px;display:block}
.nm-sub-sec{border-bottom:0}
.nm-wait{padding:10px 36px;font-size:13px;color:#565959}

/* Floating close X on the dimmed page, just right of the menu */
.nm-float-x{
  position:fixed;top:calc(12px + var(--safe-t));left:calc(min(365px,86vw) + 10px);
  z-index:calc(var(--z-drawer) + 1);width:34px;height:34px;border:0;border-radius:50%;
  display:grid;place-items:center;background:transparent;color:#fff;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateX(-12px);
  transition:opacity .2s ease,transform .26s cubic-bezier(.22,1,.36,1),visibility .2s;
}
.nm-float-x svg{width:26px;height:26px}
.nm-float-x:hover{background:rgba(255,255,255,.12)}
.nm-float-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
body.nav-menu-open .nm-float-x{opacity:1;visibility:visible;transform:none}
/* With the floating X visible, the header X is redundant on wide screens. */
@media (min-width:561px){ #navDrawer .nav-dr-x{display:none} }
@media (max-width:560px){
  .nm-float-x{display:none}
  .nm-sec h4{padding-left:24px}
  .nm-row{padding-left:24px}
  .nm-back{padding-left:18px}
}
@media (prefers-reduced-motion:reduce){ .nm-panel,.nm-float-x{transition:none} }

/* the hamburger itself, sitting where "All" used to be */
.subnav-inner a.sub-all{display:inline-flex;align-items:center;gap:7px}
.sub-all .burger{display:inline-flex;flex-direction:column;justify-content:center;gap:3px;width:15px}
.sub-all .burger i{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .16s ease}
.subnav-inner a.sub-all:hover .burger i:nth-child(1){transform:translateX(1px)}
.subnav-inner a.sub-all:hover .burger i:nth-child(3){transform:translateX(-1px)}

@media (max-width:560px){
  .drawer-left{width:min(330px,90vw)}
}