/* ===========================================================================
   HOMEPAGE THEME — "AMA" direction.            LOCAL TRIAL, homepage only.
   ---------------------------------------------------------------------------
   Loaded by index.html ALONE, and scoped to body.ama, so nothing here can
   reach the product, collection, checkout or account pages. To switch the
   homepage back: drop the <link> (or the `ama` class) from index.html.

   Direction taken from catalog.amahorse.com, measured off the live DOM rather
   than eyeballed:
     ink      rgba(37,43,54,.95)   cool blue-grey, NOT our warm leather brown
     slate    #4A566D
     rules    #DBDFE6              hairlines, used everywhere
     washes   #F6F6F6 / #F3F4F7
     bands    #141414 at 95%
     radius   2px (square)
     shadow   #EBEBEB 0 4px 8px    flat and almost colourless
     display  Jost, light, UPPERCASE, wide tracking
     body     Nunito Sans, 300 for prose
   The one thing deliberately NOT taken from AMA is the accent: Discount
   Equine's chestnut stays, so the shop still looks like itself.
   =========================================================================== */

body.ama{
  --a-ink:#252B36;
  --a-slate:#4A566D;
  /* 5.10:1 on white, 4.72:1 on the #F6F6F6 card panel. #868686 was 3.64:1 and
     failed WCAG AA for normal text on both — 4.5:1 is the bar, not the 3:1
     large-text one. #767676 clears white but only reaches 4.20:1 on the panel. */
  --a-mute:#6E6E6E;
  --a-line:#DBDFE6;
  --a-wash:#F6F6F6;
  --a-panel:#F3F4F7;
  --a-black:#141414;
  --a-accent:#9C3B22;
  --a-accent-dk:#7C2C17;

  /* Repoint the shared tokens the homepage already uses, so existing blocks
     inherit the cool palette instead of being restyled one by one. */
  --ink:var(--a-ink); --ink-soft:var(--a-slate); --line:var(--a-line);
  --bone:var(--a-wash); --muted:var(--a-mute); --paper:#fff;
  --chestnut:var(--a-accent); --chestnut-dk:var(--a-accent-dk);
  --shadow:0 4px 8px #EBEBEB;
  --r:2px; --radius:2px;

  background:#fff;
  font-family:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  color:var(--a-ink);
  -webkit-font-smoothing:antialiased;
}

/* ---- Shared chrome stays on the ORIGINAL branding -------------------------
   The promo bar, utility bar, header, nav, search dropdown and footer appear on
   every page, so they must look the same on every page. The cool tokens are put
   back to the stock warm ones for anything inside them — repointing --ink/--bone
   on <body> alone would still have shifted the footer from #F6F4F1 to #F6F6F6,
   and a chrome that is *almost* the same reads as a mistake rather than a choice. */
body.ama .promo,body.ama .util,body.ama .head,body.ama .nav,
body.ama .site-footer,body.ama .sug{
  --ink:#14120F; --ink-soft:#4A453E; --line:#E4E0D9; --bone:#F6F4F1;
  --muted:#726B63; --paper:#FFFFFF; --chestnut:#9C3B22; --chestnut-dk:#7C2C17;
  font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
}
/* Headings inside the chrome keep the stock face too. These values are copied from
   `.fcols h4` in style.css rather than invented — the blanket `h1..h4 { Jost }` rule
   below outranks it (two elements + a class beats one), so it has to be restated
   verbatim or the footer column titles drift. */
body.ama .site-footer h1,body.ama .site-footer h2,
body.ama .site-footer h3,body.ama .site-footer h4{
  font-family:Outfit,sans-serif;font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;font-weight:600;color:var(--ink);
}

/* ---- Type ---------------------------------------------------------------
   Jost carries every heading, always uppercase and always tracked out. It is
   a geometric face: at light weights it needs the extra letter-spacing or it
   reads as cramped rather than airy. */
body.ama h1,body.ama h2,body.ama h3,body.ama h4,body.ama .font-d{
  font-family:Jost,'Nunito Sans',sans-serif;
  color:var(--a-ink);
  text-transform:uppercase;
  font-weight:400;
  letter-spacing:.055em;
}
body.ama h2{font-size:clamp(26px,3.4vw,46px);line-height:1.12;letter-spacing:.06em}
body.ama h3{font-size:15px;font-weight:600;letter-spacing:.04em}
body.ama p{font-weight:300;line-height:1.62}
body.ama .num{font-variant-numeric:tabular-nums}

/* ---- Hero: a black band, the signature of the reference ------------------
   The photograph stays but sits right back behind the band, so the headline
   carries the section rather than competing with a picture. */
body.ama .hero{background:var(--a-black);min-height:clamp(340px,44vw,520px)}
body.ama .hero-bg{opacity:.32;filter:grayscale(.35) contrast(1.05)}
body.ama .hero-veil{
  background:linear-gradient(180deg,rgba(20,20,20,.55) 0%,rgba(20,20,20,.72) 100%);
}
body.ama .hero-inner{display:flex;align-items:center;justify-content:center;text-align:center}
body.ama .hero-cap{max-width:820px}
body.ama .hero-eyebrow{
  font-family:Jost,sans-serif;font-size:11.5px;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.72);
  margin-bottom:20px;
}
body.ama .hero-cap h1{
  font-family:Jost,sans-serif;color:#fff;text-transform:uppercase;
  font-weight:300;letter-spacing:.09em;
  font-size:clamp(28px,4.6vw,58px);line-height:1.1;margin-bottom:20px;
}
body.ama .hero-lead{
  color:rgba(255,255,255,.82);font-weight:300;font-size:16px;
  max-width:56ch;margin:0 auto 30px;
}
body.ama .btn-hero{
  background:#fff;color:var(--a-ink);border:1px solid #fff;border-radius:2px;
  font-family:Jost,sans-serif;font-size:12.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;padding:15px 38px;
}
body.ama .btn-hero:hover{background:transparent;color:#fff}
/* app.js renders these as <button class="hero-dot">, never <i>, so the previous
   `.hero-dots i` selector matched nothing and this override never applied. */
body.ama .hero-dot{width:26px}
body.ama .hero-dot::before{background:rgba(255,255,255,.34);border-radius:0;height:2px}
body.ama .hero-dot.on::before{background:#fff}

/* ---- Section headings ---------------------------------------------------- */
body.ama .sec{padding:clamp(44px,5.5vw,78px) 0}
body.ama .sec.wash{background:var(--a-wash)}
body.ama .eyebrow{
  font-family:Jost,sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--a-accent);
}
body.ama .sec-note{color:var(--a-mute);font-weight:300;font-size:14.5px}
body.ama .link-more{
  font-family:Jost,sans-serif;font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--a-ink);
  border-bottom:1px solid var(--a-ink);
}

/* ---- Category tiles ------------------------------------------------------ */
body.ama .cat-tile{
  border:1px solid var(--a-line);border-radius:2px;background:#fff;
  padding:18px 16px;
}
body.ama .cat-tile:hover{border-color:var(--a-ink);box-shadow:0 4px 8px #EBEBEB}
body.ama .cat-ico{color:var(--a-ink)}
body.ama .ct-name{
  font-family:Jost,sans-serif;font-size:13px;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;color:var(--a-ink);
}
body.ama .ct-count{font-size:11.5px;font-weight:300;color:var(--a-mute)}
body.ama .cat-tile.is-outlet{background:#fff;border-color:var(--a-accent)}
body.ama .cat-tile.is-gift{background:#fff;border-color:var(--a-line)}
body.ama .cat-tile.is-gift .cat-ico,body.ama .cat-tile.is-gift .ct-name{color:var(--a-ink)}

/* ---- Filter row: flat grey pills with carets ----------------------------- */
body.ama .catalog-head{border-bottom:1px solid var(--a-line);padding-bottom:16px}
body.ama #catTitle{
  font-family:Jost,sans-serif;text-transform:uppercase;letter-spacing:.06em;font-weight:400;
}
body.ama .count-note,body.ama .catalog-head .muted{font-weight:300;color:var(--a-mute)}
body.ama .facets{background:transparent}
body.ama .facet-group{border-bottom:1px solid var(--a-line)}
body.ama .facet-head{
  font-family:Jost,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--a-ink);
}
body.ama .facet-row{font-size:13.5px;font-weight:300;color:var(--a-slate)}
body.ama .chip,body.ama .active-chip{
  background:var(--a-panel);border:1px solid transparent;border-radius:2px;
  font-size:12.5px;font-weight:400;color:var(--a-ink);
}
body.ama select,body.ama .sortsel{
  background:var(--a-panel);border:1px solid transparent;border-radius:2px;
  font-family:'Nunito Sans',sans-serif;font-size:13.5px;color:var(--a-ink);
}

/* ---- Product cards: flat, hairline, image on a wash ---------------------- */
/* The base card is transparent and borderless, so its text sitting flush with the
   card's edge is correct there. Drawing a box around it here means the box now owns
   the gutter: the image goes full-bleed to the hairline and everything below it gets
   real padding, otherwise the brand/title/price all touch (and clip against) the border. */
body.ama .card{
  border:1px solid var(--a-line);border-radius:2px;background:#fff;box-shadow:none;
  overflow:hidden;
  transition:border-color .16s,box-shadow .16s;
}
body.ama .card:hover{border-color:var(--a-ink);box-shadow:0 4px 8px #EBEBEB;transform:none}
/* full-bleed to the card edge: drop the base card-img border (the card's own supplies
   the sides) and the 14px gap (card-body's padding supplies it now). */
body.ama .card-img{
  background:var(--a-wash);border:0;border-bottom:1px solid var(--a-line);margin-bottom:0;
}
body.ama .card-body{padding:14px 15px 15px}
body.ama .card-title{margin-bottom:9px}
body.ama .meter{margin-top:12px}
body.ama .quick-add{margin-top:13px}
body.ama .card-brand{
  font-family:Jost,sans-serif;font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--a-mute);
}
body.ama .card-title{
  font-family:'Nunito Sans',sans-serif;font-size:14px;font-weight:400;
  line-height:1.4;color:var(--a-ink);text-transform:none;letter-spacing:0;
}
body.ama .card-price .now{
  font-family:Jost,sans-serif;font-size:18px;font-weight:500;letter-spacing:.01em;color:var(--a-ink);
}
body.ama .card-price .rrp{color:var(--a-mute);font-weight:300}
body.ama .save{
  background:var(--a-accent);color:#fff;border-radius:2px;
  font-family:Jost,sans-serif;font-size:11px;font-weight:600;letter-spacing:.06em;
}
body.ama .save.is-outlet{background:var(--a-black)}
body.ama .meter{background:var(--a-panel);border-radius:0;height:2px}
body.ama .meter i{background:var(--a-accent);border-radius:0}
body.ama .meter-label{font-size:11.5px;font-weight:300;color:var(--a-mute)}
body.ama .quick-add{
  background:var(--a-ink);color:#fff;border:1px solid var(--a-ink);border-radius:2px;
  font-family:Jost,sans-serif;font-size:11.5px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;padding:12px;
}
body.ama .quick-add:hover{background:#fff;color:var(--a-ink)}
body.ama .quick-add.qa-oos{background:var(--a-panel);color:var(--a-mute);border-color:var(--a-line)}
/* The "View product" bar that slides up over the image on hover. It stays WHITE with
   ink text and a hairline: the ink Add-to-basket button sits directly below it in the
   card body, and two solid ink slabs stacked on one card is a muddle.
   Setting a background here without also setting `color` is what made it a black slab —
   the text was inheriting the (now dark) --ink. */
body.ama .quick{
  font-family:Jost,sans-serif;font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  background:#fff;color:var(--a-ink);border:1px solid var(--a-ink);border-radius:2px;
  padding:11px;
}
body.ama .wish{border-radius:2px;border:1px solid var(--a-line);background:rgba(255,255,255,.94)}
body.ama .wish.on{border-color:var(--a-accent)}

/* ---- Dark bands: anything sitting ON ink needs its own light text ---------
   The blanket `h1..h4 { color: ink }` above is right for the white page but wrong
   inside a dark band, where it painted the heading ink-on-ink. Same trap as the
   "View product" bar: set a background, and you own the foreground too. */
body.ama .signup{background:var(--a-black);border-top:0}
body.ama .signup h2{color:#fff;font-weight:300;letter-spacing:.06em}
body.ama .signup p{color:rgba(255,255,255,.72)}
body.ama .signup input{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);
  border-radius:2px;color:#fff;font-family:'Nunito Sans',sans-serif;font-weight:300;
}
body.ama .signup input::placeholder{color:rgba(255,255,255,.5)}
body.ama .signup button{
  background:#fff;color:var(--a-ink);border:1px solid #fff;border-radius:2px;
  font-family:Jost,sans-serif;font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
}
body.ama .signup button:hover{background:transparent;color:#fff}
body.ama .signup .fine,body.ama .signup small{color:rgba(255,255,255,.55)}

/* ---- Buttons + footer ---------------------------------------------------- */
body.ama .more-btn,body.ama .add-btn{
  background:var(--a-ink);color:#fff;border:1px solid var(--a-ink);border-radius:2px;
  font-family:Jost,sans-serif;font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
}
body.ama .more-btn:hover,body.ama .add-btn:hover{
  background:var(--a-accent);border-color:var(--a-accent);color:#fff;
}
body.ama .ghost-btn{
  border:1px solid var(--a-line);border-radius:2px;color:var(--a-ink);
  font-family:Jost,sans-serif;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
}

/* ---- Cart drawer + modal keep the same vocabulary ------------------------ */
body.ama .cart-drawer,body.ama .modal-card{border-radius:2px}
body.ama .cart-head h3,body.ama .modal-card h2{
  font-family:Jost,sans-serif;text-transform:uppercase;letter-spacing:.07em;
}
body.ama .checkout-btn{
  background:var(--a-ink);border-color:var(--a-ink);border-radius:2px;
  font-family:Jost,sans-serif;letter-spacing:.14em;text-transform:uppercase;font-size:12px;
}

@media (max-width:760px){
  body.ama .hero-cap h1{letter-spacing:.06em}
  body.ama .promo{font-size:10px;letter-spacing:.12em}
}

/* ==========================================================================
   Server-rendered pages (collections, sub-collections, outlet, brands, PDP)
   --------------------------------------------------------------------------
   These pages are built by server/render.js, not by app.js, and they name the
   same components differently: the SPA's .facet-head/.facet-row/#catTitle are
   the server's <summary>/.facet-check/.collection-head h1. The rules above
   therefore missed them entirely and the whole static side of the site stayed
   on the pre-redesign look. Everything here re-points an existing rule at the
   server's class name — no new visual decisions, just the same ones applied
   to both renderers.
   ========================================================================== */

/* Breadcrumb does the job the SPA gives its .eyebrow: a small letter-spaced
   line above the title. Styled to match so both page types open the same way,
   while staying a real crumb trail for navigation and rich results. */
body.ama .breadcrumb{
  font-family:Jost,sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--a-mute);
}
body.ama .breadcrumb a{color:var(--a-accent)}
body.ama .breadcrumb span{color:var(--a-mute)}

/* Match #catTitle: the SPA's collection heading. */
body.ama .collection-head{border-bottom:1px solid var(--a-line)}
/* Same clamp as `.sechead h2,.sechead .page-title`, which is what actually wins
   on the SPA (two classes outrank the blanket `body.ama h2`). Matching the number
   rather than the intent is the point: "SADDLERY" has to be the same size whether
   you reached it by clicking the nav or by filtering the homepage. */
body.ama .collection-head h1{
  font-family:Jost,sans-serif;text-transform:uppercase;letter-spacing:.06em;
  font-weight:400;font-size:clamp(24px,2.4vw,33px);line-height:1.12;
}
body.ama .collection-intro{font-weight:300;line-height:1.62;color:var(--a-slate)}
body.ama .result-count{font-weight:300;color:var(--a-slate)}

/* .facets-head h2 is a 13px component label, but the blanket `body.ama h2`
   display rule outranks `.facets-head h2` on specificity and was inflating it
   to 46px — on the SPA too, where the wash background hid the panel behind it.
   Pin it back to its intended size in both renderers. */
body.ama .facets-head{background:transparent}
body.ama .facets-head h2{
  font-family:Jost,sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.15em;line-height:1.4;
}

/* Server facet groups: <details><summary> instead of .facet-head, and
   .facet-check instead of .facet-row. */
body.ama .facet-group > summary{
  font-family:Jost,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--a-ink);
}
/* .facet-group.static holds the standalone "In stock only" checkbox. It is a
   row, not a group heading, so it takes the row treatment. */
body.ama .facet-check{
  font-size:13.5px;font-weight:300;color:var(--a-slate);text-transform:none;
  letter-spacing:0;
}
body.ama .facet-check em{font-style:normal;color:var(--a-mute);font-weight:300}

/* Sub-category pills. The redesign is a 2px-radius language throughout, so the
   fully-rounded pills these shipped with read as a different system. */
body.ama .subcat{
  border-radius:2px;border-color:var(--a-line);font-weight:400;
  font-family:'Nunito Sans',sans-serif;
}
body.ama .subcat:hover{border-color:var(--a-ink);color:var(--a-ink)}
body.ama .subcat.on{background:var(--a-ink);border-color:var(--a-ink)}
body.ama .subcat span{color:var(--a-mute)}
body.ama .subcat.on span{color:rgba(255,255,255,.65)}

/* Pagination — hairline + 2px, same as every other control. */
body.ama .pager-step,body.ama .pager-num{border-radius:2px}
body.ama .pager-step{border-color:var(--a-line);font-family:Jost,sans-serif;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase}
body.ama .pager-step:hover{border-color:var(--a-ink);color:var(--a-ink)}
body.ama .pager-num{font-variant-numeric:tabular-nums;color:var(--a-slate)}
body.ama .pager-num.on{background:var(--a-ink);border-color:var(--a-ink)}

/* ===========================================================================
   HAND-WRITTEN PAGES — checkout, account, wishlist, invoice and the info pages.
   ---------------------------------------------------------------------------
   These pages get their chrome from hydrateChrome() rather than render.layout(),
   so until now they never loaded this stylesheet at all and stayed on the
   pre-redesign type. Loading it is only half the fix: each of these pages has its
   own furniture in style.css that hard-codes Outfit or Cormorant Garamond, and
   those rules are two classes deep — more specific than `body.ama h1`. The result
   of just adding the class was a hybrid: the redesign's UPPERCASE and tracking
   applied while the old serif face stayed, which looks like a bug rather than a
   design.

   So each of those selectors is repointed here, prefixed with body.ama to clear
   their specificity. Three treatments, matching what the rest of the site does:
     headings  Jost, uppercase, tracked
     figures   Nunito Sans — prices and order lines stay sentence case, because
               uppercasing a line like "2 x Buster Turnout Rug" reads as shouting
     buttons   Jost uppercase, same as .add-btn everywhere else

   Deliberately NOT touched: the header, nav and footer (chrome stays on the
   original warm branding — see the block near the top of this file), and the
   product/collection pages, which were already correct.
   =========================================================================== */

/* ---- headings ---- */
body.ama .checkout-wrap .page-title,
body.ama .checkout-main .panel h2,
body.ama .checkout-summary h2,
body.ama .complete-hero h1,
body.ama .complete-grid .panel h2,
body.ama .infopage h1,
body.ama .infopage h2,
body.ama .gate-card h1,
body.ama .ap-head h1,
body.ama .acct-card h2,
body.ama .acct-empty h2,
body.ama .wish-head h1,
body.ama .wish-empty h2,
body.ama .reset-card h1,
body.ama .inv-head h1,
body.ama .inv-card h2,
body.ama .inv-paid h2,
body.ama .cart-head h2{
  font-family:Jost,'Nunito Sans',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.055em;
  color:var(--a-ink);
}
/* Panel headings are small and set solid; at 15px the tracking above is too loose. */
body.ama .checkout-main .panel h2,
body.ama .complete-grid .panel h2,
body.ama .checkout-summary h2,
body.ama .acct-card h2,
body.ama .inv-card h2,
body.ama .cart-head h2{
  font-size:13px;font-weight:500;letter-spacing:.1em;
}

/* ---- table headers ---- */
body.ama .sizetable th,
body.ama .inv-table th{
  font-family:Jost,'Nunito Sans',sans-serif;
  font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  background:var(--a-wash);color:var(--a-ink);
}

/* ---- figures, prices and order lines: body face, sentence case ---- */
body.ama .sr-line,
body.ama .summary-line.total,
body.ama .checkout-summary .summary-line.total,
body.ama .complete-grid .summary-line.total,
body.ama .cart-total,
body.ama .cart-subtotal,
body.ama .ci-line,
body.ama .cart-row .ci-price,
body.ama .wc-price .now,
body.ama .oi-line,
body.ama .inv-line.is-total,
body.ama .ref-badge,
body.ama .ref-badge strong,
body.ama .acct-avatar,
body.ama .acct-who strong,
body.ama .acct-help strong,
body.ama .acct-stats strong,
body.ama .ord-fact strong,
body.ama .addr-card strong,
body.ama .gate-perks strong,
body.ama .wish-banner strong,
body.ama .inv-meta strong,
body.ama .inv-due strong,
body.ama .next-steps li strong,
body.ama .gc-card-amount,
body.ama .gc-amount,
body.ama .gc-bal-amount{
  font-family:'Nunito Sans',system-ui,sans-serif;
  text-transform:none;
  letter-spacing:0;
  font-variant-numeric:tabular-nums;
  color:var(--a-ink);
}

/* ---- buttons ---- */
body.ama .checkout-wrap .place-btn,
body.ama .checkout-wrap .disc-btn,
body.ama .complete-actions .add-btn,
body.ama .restock-btn{
  font-family:Jost,'Nunito Sans',sans-serif;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  border-radius:2px;
}

/* ---- form fields and small labels ---- */
body.ama .checkout-wrap .fld,
body.ama .checkout-wrap .disc-label,
body.ama .restock-lede,
body.ama .pill,
body.ama .acc>summary{
  font-family:'Nunito Sans',system-ui,sans-serif;
  letter-spacing:0;text-transform:none;
}

/* Panels, cards and dividers onto the cool palette, so a page is not half warm
   brown hairlines and half cool grey ones. */
body.ama .checkout-main .panel,
body.ama .complete-grid .panel,
body.ama .acct-card,
body.ama .addr-card,
body.ama .form-card,
body.ama .gate-card,
body.ama .inv-card,
body.ama .callout{
  border-color:var(--a-line);border-radius:2px;box-shadow:none;
}

/* body.ama h2 is the homepage SECTION heading and clamps up to 46px. On these pages
   an h2 is a sub-heading under an h1 that tops out at 40px, so inheriting it made
   every subsection larger than the page title. Sized explicitly here. */
body.ama .infopage h2{font-size:clamp(19px,2vw,24px);line-height:1.2;letter-spacing:.05em;margin:40px 0 8px}
body.ama .infopage h1{font-size:clamp(28px,4vw,40px);line-height:1.1}
body.ama .acct-empty h2,
body.ama .wish-empty h2,
body.ama .inv-paid h2{font-size:clamp(18px,2vw,22px);line-height:1.25;letter-spacing:.06em}

/* Product-page strips on the redesign's type and palette. */
body.ama .pdp-strip h2{
  font-family:Jost,'Nunito Sans',sans-serif;font-weight:400;
  letter-spacing:.12em;color:var(--a-ink);border-top-color:var(--a-line);
}
body.ama .strip-card{border-color:var(--a-line);border-radius:2px}
body.ama .strip-card:hover{border-color:var(--a-ink);box-shadow:0 4px 8px #EBEBEB}
body.ama .strip-card .sc-img{background:var(--a-wash)}
body.ama .strip-card .sc-save{background:var(--a-accent);border-radius:0}
body.ama .strip-card .sc-title{font-family:'Nunito Sans',system-ui,sans-serif;color:var(--a-ink)}
body.ama .strip-card .sc-price .now{font-family:'Nunito Sans',system-ui,sans-serif;color:var(--a-ink)}

/* Reviews on the redesign's type. */
body.ama .pdp-reviews h2,body.ama .rv-form h3{
  font-family:Jost,'Nunito Sans',sans-serif;font-weight:400;
  letter-spacing:.12em;color:var(--a-ink);
}
body.ama .pdp-reviews > .rv-head{border-top-color:var(--a-line)}
body.ama .rv-item{border-bottom-color:var(--a-line)}
body.ama .rv-form{border-color:var(--a-line);border-radius:2px}
body.ama .rv-reply{background:var(--a-wash);border-left-color:var(--a-accent)}
body.ama .rv-score strong{font-family:'Nunito Sans',system-ui,sans-serif;color:var(--a-ink)}
/* A review headline is the customer's own words, not a UI label — the uppercase Jost
   that every other h3 gets makes it read as shouting. Their sentence, their casing. */
body.ama .rv-top h3{
  font-family:'Nunito Sans',system-ui,sans-serif;
  text-transform:none;letter-spacing:0;font-weight:600;font-size:15px;
}
body.ama .rv-reply strong{font-family:Jost,'Nunito Sans',sans-serif;letter-spacing:.08em}

/* ---- Kit builder (build.html) ----------------------------------------------
   The base rules in style.css are token-driven, so the palette follows body.ama on
   its own. Only type needs restating: Jost for labels and headings, Nunito Sans
   wherever a number or a product's OWN title appears — a product title set in
   uppercase Jost reads as a category rather than as the thing you are buying. */
body.ama .kit-choose h1,body.ama .kit-top h1{letter-spacing:.05em;font-weight:300}
body.ama .kr-group h3,body.ama .ks-label,body.ama .kp-sort span,
body.ama .kbi-slot,body.ama .kb-head h2{
  font-family:Jost,sans-serif;font-weight:500;letter-spacing:.14em;
}
body.ama .kp-head h2{font-family:Jost,sans-serif;font-weight:400;letter-spacing:.09em;font-size:18px}
body.ama .kit-door strong{
  font-family:Jost,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.09em;
}
body.ama .kit-door em{font-family:Jost,sans-serif;letter-spacing:.1em;text-transform:uppercase;font-size:12px}
body.ama .kit-swap a{font-family:Jost,sans-serif;letter-spacing:.1em;text-transform:uppercase;font-size:12.5px}
body.ama .kit-door,body.ama .kit-size select,body.ama .kp-sort select,
body.ama .ko-img,body.ama .kbi-img,body.ama .kc-sw,body.ama .kit-swap,
body.ama .kp-none,body.ama .kp-more button{border-color:var(--a-line);border-radius:2px}
body.ama .kit-door:hover{box-shadow:0 4px 8px #EBEBEB;border-color:var(--a-ink)}
body.ama .kit-answers,body.ama .kp-none{background:var(--a-wash)}
body.ama .ko-save{border-radius:0;background:var(--a-accent)}
/* Product titles, prices and running totals keep sentence case and lining figures. */
body.ama .kr-label,body.ama .kr-sub,body.ama .ko-title,body.ama .ko-price>.num,
body.ama .ko-rrp,body.ama .kbi-title,body.ama .kbi-var,body.ama .kbi-price,
body.ama .kb-row strong,body.ama .kbar-count strong,body.ama .kbar-total{
  font-family:'Nunito Sans',system-ui,sans-serif;
  text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums;
}
body.ama .kr-label,body.ama .ko-title,body.ama .kbi-title{color:var(--a-ink)}
body.ama .kit-bar{background:var(--a-black)}
body.ama .kit-board .add-btn{
  font-family:Jost,'Nunito Sans',sans-serif;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;border-radius:2px;
}
/* body.ama h2 is the HOMEPAGE section heading and clamps to 46px. In the builder an h2
   is a pane label, so it has to be sized explicitly or "Your kit" sets larger than the
   page title. Same trap as .infopage h2 above. */
body.ama .kb-head h2{font-size:13px;line-height:1.2;letter-spacing:.16em}
body.ama .kp-head h2{font-size:18px;line-height:1.2}
body.ama .kp-divider{font-family:Jost,sans-serif;font-weight:500;letter-spacing:.13em;border-top-color:var(--a-line)}
body.ama .kp-divider a,body.ama .kp-note,body.ama .ko-approx{font-family:'Nunito Sans',system-ui,sans-serif;letter-spacing:0;text-transform:none}
body.ama .kp-note{background:var(--a-wash);border-color:var(--a-line);border-radius:2px}
body.ama .kit-pick h1{letter-spacing:.05em;font-weight:300}
body.ama .kpick-head h2{font-family:Jost,sans-serif;font-weight:500;letter-spacing:.14em;font-size:12px;border-bottom-color:var(--a-line)}
body.ama .kpick-item,body.ama .kpick-foot{border-color:var(--a-line);border-radius:2px}
body.ama .kpick-label,body.ama .kpick-n{font-family:'Nunito Sans',system-ui,sans-serif;letter-spacing:0;text-transform:none}
body.ama .kpick-label{color:var(--a-ink)}
body.ama .kpick-foot .add-btn{font-family:Jost,'Nunito Sans',sans-serif;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
body.ama .kw-row{border-color:var(--a-line);border-radius:2px}
body.ama .kw-opt{font-family:Jost,sans-serif;letter-spacing:.09em;text-transform:uppercase;font-size:12px}
body.ama .ko-view,body.ama .kc-more{border-color:var(--a-line);border-radius:2px}
body.ama .kp-skel span,body.ama .kp-skel i,body.ama .kp-skel b{background:var(--a-wash)}
body.ama .kb-progress{font-family:Jost,sans-serif;font-weight:500;letter-spacing:.13em}
body.ama .kb-done,body.ama .kb-empty{font-family:'Nunito Sans',system-ui,sans-serif;letter-spacing:0;text-transform:none}
body.ama .kb-done{border-radius:2px}
body.ama .kb-nudge{font-family:'Nunito Sans',system-ui,sans-serif;letter-spacing:0;text-transform:none;border-radius:2px}
body.ama .kpre{border-color:var(--a-line);border-radius:2px}
body.ama .kpre strong{font-family:Jost,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.07em;font-size:13.5px}
body.ama .kpre span{font-family:'Nunito Sans',system-ui,sans-serif;letter-spacing:0;text-transform:none}
body.ama .kpre em{font-family:Jost,sans-serif;letter-spacing:.12em}
body.ama .wk-head h2{font-family:Jost,sans-serif;font-weight:500;letter-spacing:.14em;border-bottom-color:var(--a-line)}
body.ama .wk-card,body.ama .wk-thumbs span{border-color:var(--a-line);border-radius:2px}
body.ama .wk-meta h3,body.ama .wk-meta p{font-family:'Nunito Sans',system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--a-ink)}
body.ama .wk-meta p{color:var(--a-mute)}

/* ---- Mobile: the facets rail becomes a DRAWER, and must stop being transparent ----
   Above 980px .facets is a sticky column beside the grid, and `background:transparent`
   is right — the page wash shows through and the rail reads as part of the page.
   Below it, style.css turns the same element into `position:fixed` sliding over the
   product grid. Transparent there is not a style, it is a bug: the whole shop shows
   through the filters and neither is readable (reported on a phone, all six category
   tiles and two rug cards visible straight through the panel).
   `body.ama .facets` outranks the plain `.facets` in style.css's media query on
   specificity — media queries add none — so the fix has to be made here, at the same
   breakpoint, or it silently loses again. */
@media (max-width:980px){
  body.ama .facets,
  body.ama .facets-head{background:#fff}
}

/* ---- "About" hero slide: the one slide whose photograph IS the point ------------
   Product slides run the photo at 32% under the black so the type carries; the yard
   photo needs to be seen, so it runs full and the caption moves to the left with a
   darker panel and a left-to-right veil. Positioned per slide (slide.pos). */
/* Product slides are centred; the button row must follow the text. */
body.ama .hero-ctas{justify-content:center}
body.ama .hero-chips{justify-content:center}
body.ama .hero-bg.about{opacity:1;filter:none}
body.ama .hero:has(.hero-cap.about) .hero-veil{background:linear-gradient(90deg,rgba(12,11,9,.72) 0%,rgba(12,11,9,.45) 42%,rgba(12,11,9,.05) 75%)}
body.ama .hero:has(.hero-cap.about) .hero-inner{justify-content:flex-start;text-align:left}
body.ama .hero-cap.about{max-width:min(560px,92%);background:rgba(12,11,9,.66);border-left:3px solid var(--chestnut);padding:30px 36px 32px}
body.ama .hero-cap.about h1{letter-spacing:.02em;text-transform:none;font-size:clamp(28px,3.2vw,44px)}
body.ama .hero-cap.about .hero-lead{margin-left:0;max-width:440px}
body.ama .hero-cap.about .hero-chips{justify-content:flex-start}
body.ama .hero-cap.about .hero-ctas{justify-content:flex-start}
@media(max-width:820px){
  body.ama .hero:has(.hero-cap.about) .hero-veil{background:linear-gradient(0deg,rgba(12,11,9,.8) 0%,rgba(12,11,9,.35) 55%,rgba(12,11,9,.05) 100%)}
  body.ama .hero-cap.about{max-width:100%;padding:20px 18px 22px}
}