/* ============================================================
   DISCOUNT EQUINE — editorial storefront
   Chestnut / bone / espresso-ink palette · Outfit + Inter
   Storefront rules first; shared account/checkout/admin blocks
   (used by account.html / checkout.html / admin.html) preserved
   verbatim at the bottom.
   ============================================================ */
:root{
  --ink:#14120F;          /* utility bar, footer, headings */
  --ink-soft:#4A453E;     /* body text */
  --line:#E4E0D9;         /* hairlines */
  --bone:#F6F4F1;         /* section wash */
  --paper:#FFFFFF;
  --chestnut:#9C3B22;     /* accent: saving, live state */
  --chestnut-dk:#7C2C17;
  --field:#3F5D43;        /* secondary accent: in-stock */
  --muted:#726B63;                                 /* 5.25:1 on white; #8A837A was 3.74:1 */
  --shadow:0 1px 2px rgba(20,18,15,.04),0 8px 30px rgba(20,18,15,.06);
  --r:2px; --radius:2px; --pill:999px;

  /* legacy aliases so the shared account/checkout/admin blocks resolve */
  --navy:#14120F; --navy-2:#3c281d; --accent:#9C3B22; --accent-2:#7C2C17;
  --gold:#b88f5e; --pink:#9C3B22; --green:#3F5D43; --red:#9C3B22; --error:#c0392b;
  --bg:#FFFFFF; --cream-2:#F6F4F1; --sand:#F0ECE5; --card:#FFFFFF;
}
*{box-sizing:border-box}

/* [hidden] means hidden. A class selector like .digital-note{display:flex} outranks the
   browser's own [hidden] rule, so an element the JS has switched off stays on screen —
   which is how the checkout came to tell everyone "your gift card covers this order in
   full" on ordinary baskets. Three elements were affected. This settles it everywhere
   rather than one class at a time. */
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink-soft);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.55;
}
h1,h2,h3,h4,.font-d{font-family:Outfit,Inter,sans-serif;color:var(--ink);margin:0;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--chestnut);outline-offset:2px}
.wrap{max-width:1440px;margin:0 auto;padding:0 28px}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- announcement ---------- */
.promo{background:var(--chestnut);color:#fff;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.promo .wrap{display:flex;gap:22px;align-items:center;justify-content:center;padding:9px 28px}
.promo-msgs{display:flex;align-items:center;gap:22px;justify-content:center;min-width:0}
.promo-msgs>span{display:flex;align-items:center;gap:22px;white-space:nowrap}
/* The separator used to be an empty <i>. As a pseudo-element it belongs to the message
   it follows, so it disappears with it when the bar cycles one message at a time. */
.promo-msgs>span:not(:last-child)::after{content:"";width:4px;height:4px;background:#fff;border-radius:50%;opacity:.7;flex:none}
.promo-side{display:flex;align-items:center;gap:16px;flex:none}
.promo i{width:4px;height:4px;background:#fff;border-radius:50%;opacity:.7;display:block}
.promo-call{display:flex;align-items:center;gap:7px;color:#fff;text-decoration:none;font-weight:600;white-space:nowrap}
.promo-call svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.promo-call:hover{text-decoration:underline}
/* Facebook and Instagram: for a shopper who wants to check the shop is real before
   they spend anything. Filled marks, not outlines, so they read at 15px. */
.promo-social{display:flex;align-items:center;gap:10px;flex:none;padding-left:2px}
.promo-social::before{content:"";width:1px;height:14px;background:rgba(255,255,255,.35);margin-right:4px}
.promo-soc{display:flex;color:#fff;opacity:.85;transition:opacity .15s}
.promo-soc:hover{opacity:1}
.promo-soc svg{width:15px;height:15px;fill:currentColor;stroke:none;display:block}

/* ---------- utility bar ---------- */
.util{background:var(--ink);color:#EDE9E3;font-size:13.5px}
.util .wrap{display:flex;align-items:center;gap:26px;height:46px}
.util a{opacity:.82;display:flex;align-items:center;gap:8px}
.util a:hover{opacity:1}
.util .right{margin-left:auto;display:flex;align-items:center;gap:22px}
.util svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.flag{width:22px;height:15px;border-radius:1px;overflow:hidden;display:block}

/* ---------- header ---------- */
.head{border-bottom:1px solid var(--line);background:var(--paper);position:relative;z-index:60}
.head-inner{display:flex;align-items:center;gap:32px;padding-top:18px;padding-bottom:18px}
.hamburger{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.hamburger svg{width:24px;height:24px;stroke:var(--ink);fill:none;stroke-width:1.7}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}

/* ---------- brand lockup: horseshoe as the U ----------
   DISCO⌒NT over a hairline rule, EQUINE letterspaced beneath.
   --lk sets the wordmark size; everything else scales from it.
   --lk-hole is the nail-hole colour and must match the surface
   the mark is sitting on.                                        */
.lockup{
  --lk:27px;
  --lk-hole:var(--paper);
  display:inline-flex;flex-direction:column;align-items:center;
  line-height:1;flex:0 0 auto;
  font-family:"Cormorant Garamond",Outfit,Georgia,serif;
}
.lk-word{
  display:flex;align-items:baseline;white-space:nowrap;
  font-weight:600;font-size:var(--lk);letter-spacing:.05em;color:var(--ink);
}
.lk-shoe{display:inline-flex;justify-content:center;width:.78em}
.lk-shoe svg{display:block;width:.76em;height:.86em;transform:translateY(.13em)}
.lk-shoe path{fill:none;stroke:var(--chestnut);stroke-width:5.5;stroke-linecap:round}
.lk-shoe circle{fill:var(--lk-hole)}
.lk-rule{align-self:stretch;border-top:1px solid var(--line);margin:.30em 0 .28em}
.lk-eq{
  font-family:Inter,sans-serif;font-weight:500;text-transform:uppercase;
  font-size:calc(var(--lk) * .31);letter-spacing:.52em;margin-left:.52em;
  color:var(--chestnut);
}
/* one-line variant — DISCO⌒NT EQUINE */
.lockup.is-row{flex-direction:row;align-items:baseline;gap:.32em}
.lockup.is-row .lk-rule{display:none}
.lockup.is-row .lk-eq{
  font-family:inherit;font-weight:600;font-size:var(--lk);
  letter-spacing:.05em;margin-left:0;
}
/* ink-only variant, for one-colour contexts */
.lockup.is-ink{--lk-hole:var(--paper)}
.lockup.is-ink .lk-shoe path,.lockup.is-ink .lk-eq{stroke:var(--ink);color:var(--ink)}
/* on dark */
.lockup.on-dark{--lk-hole:var(--ink)}
.lockup.on-dark .lk-word{color:#F3F0EA}
.lockup.on-dark .lk-shoe path{stroke:#C9683F}
.lockup.on-dark .lk-eq{color:#C9683F}
.lockup.on-dark .lk-rule{border-top-color:rgba(255,255,255,.18)}

/* square/circle badge — favicon, avatar, admin */
.shoe-badge{
  display:grid;place-items:center;flex:0 0 auto;
  width:46px;height:46px;border-radius:12px;background:var(--chestnut);
}
.shoe-badge svg{width:58%;height:58%;display:block}
.shoe-badge path{fill:none;stroke:#FFF8F1;stroke-width:6;stroke-linecap:round}
.shoe-badge.is-round{border-radius:50%}
.search{flex:1;position:relative;max-width:720px}
.search input{
  width:100%;height:50px;border:1px solid var(--line);border-radius:26px;
  padding:0 22px 0 52px;font-size:15px;background:var(--paper);color:var(--ink);
}
.search input::placeholder{color:#A19A90}
.search input:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(20,18,15,.06)}
.search .ico{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:20px;height:20px;stroke:#7C756B;fill:none;stroke-width:1.7;pointer-events:none}
.actions{margin-left:auto;display:flex;align-items:center;gap:4px}
.iconbtn{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px;border-radius:var(--r);font-size:11px;letter-spacing:.04em;color:var(--ink-soft)}
.iconbtn:hover{color:var(--ink);background:var(--bone)}
.iconbtn svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.5}
.badge-count{position:absolute;top:2px;right:6px;min-width:19px;height:19px;border-radius:10px;background:var(--chestnut);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center;padding:0 5px;line-height:1}

/* ---------- nav (mega-menu) ---------- */
.nav{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:55}
.mainnav-inner{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;min-height:50px}
.nav-item{position:relative;display:flex;align-items:stretch}
.nav-item-sale{margin-left:8px}
.nav-link{font-family:Outfit,Inter,sans-serif;display:inline-flex;align-items:center;gap:6px;padding:0 16px;height:50px;
  font-size:14.5px;font-weight:400;color:var(--ink);position:relative;white-space:nowrap;letter-spacing:.01em}
.nav-link:hover{color:var(--chestnut)}
.nav-link::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:2px;background:var(--chestnut);transform:scaleX(0);transition:transform .2s}
.nav-item:hover .nav-link::after,.nav-item.active > .nav-link::after{transform:scaleX(1)}
.nav-link .caret{font-size:9px;opacity:.55;transition:transform .2s}
.nav-item:hover .nav-link .caret{transform:rotate(180deg)}
.nav-sale{color:var(--chestnut);font-weight:500}
/* Outlet claim pill. Sits inside the nav link so it inherits the hover/active
   underline rather than fighting it. Kept small and tabular so the extra ~92px does
   not push the bar into the mega-menu overflow that already bites at 1440. */
.nav-badge{display:inline-block;margin-left:7px;padding:2px 6px;border-radius:2px;
  background:var(--chestnut);color:#fff;font-family:Outfit,Inter,sans-serif;
  font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  line-height:1.5;white-space:nowrap;font-variant-numeric:tabular-nums;vertical-align:middle}
/* Below this the bar is tight enough that the claim costs a nav item its room; the
   Outlet page states it in the heading anyway, so the pill is the part that gives. */
@media (max-width:1150px){.nav-badge{display:none}}
.nav-dropdown{position:absolute;top:100%;left:0;min-width:250px;max-height:min(78vh,600px);overflow-y:auto;
  background:var(--paper);border:1px solid var(--line);border-top:2px solid var(--chestnut);
  /* A deeper, softer shadow than the shared token: this panel floats over product
     imagery, and the default was crisp enough to look pasted on rather than lifted. */
  box-shadow:0 18px 44px -12px rgba(20,18,15,.28), 0 4px 12px rgba(20,18,15,.06);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:60}
.nav-item.has-dropdown:hover .nav-dropdown{opacity:1;visibility:visible;transform:none}
.nav-dropdown-inner{padding:10px}
/* mega-menu: one column per category, sub-categories listed beneath it.
   --cols is set by buildMenu() to the real column count (capped at 4) so the panel
   is exactly as wide as its content — no half-empty box for a 2-category menu.
   minmax() rather than a fixed 200px: "Riding Accessories" and "Grooming & Yard" were
   both wrapping to two lines inside a rigid column while the panel had room to spare. */
.nav-dropdown-inner.is-mega{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(196px,auto));
  gap:26px 34px;padding:26px 28px 22px;width:max-content}
.nav-item.has-mega .nav-dropdown{width:auto;max-width:min(1040px,94vw);max-height:min(80vh,600px)}
.nav-col{min-width:0}
/* THE HEADING HAS TO OUTRANK ITS OWN LIST. It was 11.5px against 13.5px sub-links —
   every column header smaller than the links under it — which is why five columns read
   as one undifferentiated wall of text instead of five labelled groups. The size gap is
   closed and the weight, colour and spacing do the rest. */
.nav-col-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:0 0 9px;margin-bottom:11px;border-bottom:1px solid var(--line);
  font-family:Outfit,sans-serif;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--ink);cursor:pointer;
  transition:color .15s,border-color .15s}
.nav-col-head:hover{color:var(--chestnut);border-bottom-color:var(--chestnut)}
.nav-col-head span{color:var(--muted);font-size:10.5px;letter-spacing:.02em;font-weight:400;
  font-variant-numeric:tabular-nums;flex:none}
.nav-col .nav-sub{padding:6px 0 6px 0;font-size:13px;color:var(--ink-soft);
  border-radius:0;transition:color .14s,transform .14s}
/* Slide the label, do not repad the row: changing padding-left reflowed the text and
   read as a stutter on hover. transform moves it without touching layout. */
.nav-col .nav-sub:hover{background:none;color:var(--chestnut);transform:translateX(3px)}
.nav-col .nav-sub span{font-variant-numeric:tabular-nums}
.is-mega .nav-sub-all{width:100%;margin-top:12px}
.nav-sub{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:9px 14px;font-size:14px;color:var(--ink-soft);cursor:pointer}
.nav-sub:hover{color:var(--chestnut);background:var(--bone)}
.nav-sub span{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
/* "View all" is the row people reach for when nothing above matched. It was the same
   weight as the list it sits under; now it reads as the action it is. */
.nav-sub-all{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-weight:600;
  color:var(--chestnut);letter-spacing:.01em}
.is-mega .nav-sub-all::after{content:"\2192";margin-left:6px;transition:transform .15s;display:inline-block}
.is-mega .nav-sub-all:hover::after{transform:translateX(3px)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(72vh,560px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;opacity:0;transition:opacity .6s}
.hero-bg.loaded{opacity:1}
.hero-veil{position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,18,15,.55) 0%,rgba(20,18,15,.12) 45%,rgba(20,18,15,0) 70%)}
.hero-inner{position:relative;z-index:2;padding-bottom:52px;padding-top:52px;width:100%}
.hero-cap{background:rgba(20,18,15,.60);backdrop-filter:blur(3px);padding:30px 40px 34px;max-width:min(560px,86%);border-left:3px solid var(--chestnut)}
.hero-eyebrow{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:#e9d5b6;margin:0 0 14px;font-weight:600}
.hero h1{color:#fff;font-family:Outfit,sans-serif;font-weight:500;font-size:clamp(28px,3.4vw,46px);line-height:1.05;margin:0}
.hero-lead{color:#E6E1D9;margin:14px 0 22px;font-size:16px;line-height:1.55;max-width:460px}
.hero-chips{list-style:none;margin:-6px 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hero-chips li{font-size:12.5px;letter-spacing:.02em;color:#f3ede4;padding:6px 11px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08)}
.hero-chips li::before{content:"✓";color:#e9d5b6;margin-right:7px;font-weight:700}
.hero-ctas{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero-second{color:#f3ede4;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.hero-second:hover{color:#e9d5b6}
.hero-cap.about{max-width:min(620px,90%)}
.hero-cap.about .hero-eyebrow{color:#e9d5b6}
@media(max-width:820px){ .hero-chips li{font-size:12px;padding:5px 9px} }
.btn-hero{display:inline-block;background:#fbf7f0;color:var(--ink);font-family:Outfit,sans-serif;font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:16px 34px;border:1px solid #fbf7f0;transition:.18s;cursor:pointer}
.btn-hero:hover{background:var(--chestnut);border-color:var(--chestnut);color:#fff}

/* ---------- section shell ---------- */
.sec{padding:60px 0}
.sec.wash{background:var(--bone)}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
.eyebrow{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--chestnut);font-weight:600;margin:0 0 8px}
.sechead h2,.sechead .page-title{font-family:Outfit,sans-serif;font-size:clamp(24px,2.4vw,33px);font-weight:500;margin:0}
.sec-note{margin:6px 0 0;font-size:14.5px;color:var(--ink-soft)}
.link-more{font-family:Outfit,sans-serif;font-size:14.5px;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px;white-space:nowrap}
.link-more:hover{color:var(--chestnut);border-color:var(--chestnut)}

/* ---------- category tiles ---------- */
.cat-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.cat-card{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--bone);display:block;cursor:pointer}
.cat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cat-card:hover img{transform:scale(1.05)}
.cat-card .cc-overlay{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(transparent,rgba(20,18,15,.78));z-index:2}
.cat-card .cc-name{color:#fff;font-family:Outfit,sans-serif;font-size:16px;font-weight:500;line-height:1.15}
.cat-card .cc-count{color:rgba(255,255,255,.8);font-size:12px;margin-top:3px}

/* ---------- shop layout ---------- */
.catalog-wrap{display:grid;grid-template-columns:250px 1fr;gap:44px;align-items:start}
.facets-backdrop{display:none}
/* Sticky rail. It MUST cap its own height and scroll: with a sub-category list on
   top of brand/colour/size the rail is taller than the viewport, and a sticky box
   with no max-height simply pins its top and leaves the bottom unreachable — you
   could scroll the products but never get to the last filters. */
.facets{position:sticky;top:calc(50px + 20px);max-height:calc(100vh - 84px);overflow-y:auto;
  overscroll-behavior:contain;padding-right:10px;scrollbar-width:thin;scrollbar-color:#CFC8BE transparent}
.facets::-webkit-scrollbar{width:8px}
.facets::-webkit-scrollbar-track{background:transparent}
.facets::-webkit-scrollbar-thumb{background:#D6CFC5;border-radius:4px;border:2px solid var(--bone)}
.facets:hover::-webkit-scrollbar-thumb{background:#BEB5A8}
/* the heading stays put while the options scroll under it (shop section is .wash) */
.facets-head{position:sticky;top:0;z-index:2;background:var(--bone);padding-top:2px}
.facets-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:6px}
.facets-head h2{font-family:Outfit,sans-serif;font-size:13px;letter-spacing:.15em;text-transform:uppercase;font-weight:600}
.facets-close{display:none;width:32px;height:32px;border-radius:50%;background:var(--bone);font-size:20px;color:var(--ink);place-items:center}
.facet-group{border-top:1px solid var(--line);padding:16px 0}
.facet-group.static{border-top:none;padding-top:2px}
.facet-group summary{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.facet-group summary::-webkit-details-marker{display:none}
.facet-group summary::after{content:"–";color:var(--muted);font-size:15px}
.facet-group:not([open]) summary::after{content:"+"}
.facet-opts{padding-top:10px;display:flex;flex-direction:column;gap:1px}
.facet-check{display:flex;align-items:center;gap:11px;padding:5px 0;font-size:14.5px;cursor:pointer;color:var(--ink-soft)}
.facet-check:hover{color:var(--chestnut)}
.facet-check input{appearance:none;width:17px;height:17px;border:1px solid #C9C3BA;border-radius:1px;flex:0 0 auto;position:relative}
.facet-check input:checked{background:var(--ink);border-color:var(--ink)}
.facet-check input:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(42deg)}
.facet-check span{flex:1}
.facet-check em{margin-left:auto;font-size:12.5px;color:var(--muted);font-style:normal}
.facet-hidden{display:none}
.facet-more{color:var(--chestnut);font-weight:600;font-size:13px;text-align:left;padding:8px 0 2px}
.facet-more:hover{text-decoration:underline}
/* The sub-category group is browsing, not filtering — give it more presence than
   the colour/size facets so "just show me saddles" is the first thing you see. */
.facet-group.facet-cat{border-top:none;background:var(--paper);border:1px solid var(--line);
  border-left:2px solid var(--chestnut);padding:14px 15px;margin-bottom:4px}
.facet-group.facet-cat summary{color:var(--chestnut)}
.facet-group.facet-cat .facet-check{font-size:14px;padding:4px 0}
.facet-group.facet-cat .facet-check span{font-weight:500;color:var(--ink)}

/* toolbar */
.catalog-head{display:flex;align-items:center;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:22px;flex-wrap:wrap}
.catalog-actions{display:flex;align-items:center;gap:14px}
.result-count{font-size:14px;color:var(--ink-soft)}
.result-count::first-letter{font-weight:600}
.filter-toggle{display:none;align-items:center;gap:8px;border:1px solid var(--line);padding:10px 16px;font-size:14px}
.sort{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.sort select{border:1px solid var(--line);padding:11px 36px 11px 14px;font-size:14px;background:#fff;color:var(--ink);appearance:none;border-radius:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%2314120F' stroke-width='1.4'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;background-size:12px}

/* active filter chips */
.active-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.active-chips:empty{display:none}
.chip{border:1px solid var(--line);background:var(--paper);padding:7px 13px;font-size:13px;color:var(--ink-soft);display:inline-flex;gap:7px;align-items:center;font-family:inherit;cursor:pointer}
.chip span{color:var(--muted);font-weight:600}
.chip:hover{border-color:var(--chestnut)}
.chip-clear{background:none;color:var(--chestnut);font-weight:600;border-color:transparent}

/* ---------- product grid + card ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 22px}
.card{position:relative;background:transparent;cursor:pointer;display:flex;flex-direction:column}
.card-img{position:relative;aspect-ratio:1/1;overflow:hidden;background:#fff;margin-bottom:14px;border:1px solid var(--line)}
.card-img img{width:100%;height:100%;object-fit:contain;padding:12px;transition:transform .55s}
.card:hover .card-img img{transform:scale(1.04)}
.save{position:absolute;top:12px;left:12px;background:var(--chestnut);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.04em;padding:6px 10px;z-index:2}
.flag-low{position:absolute;top:12px;right:12px;background:#fff;color:var(--ink);font-size:11px;letter-spacing:.04em;padding:6px 10px;z-index:2;text-transform:uppercase;border:1px solid var(--line)}
.quick{position:absolute;left:12px;right:12px;bottom:12px;background:#fff;color:var(--ink);padding:12px;text-align:center;font-family:Outfit,sans-serif;font-size:13.5px;letter-spacing:.02em;transform:translateY(12px);opacity:0;transition:.22s;z-index:2;pointer-events:none;border:1px solid var(--ink)}
.card:hover .quick{transform:none;opacity:1}
.card-body{display:flex;flex-direction:column}
.card-brand{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.card-title{font-family:Inter,sans-serif;font-size:15px;font-weight:500;line-height:1.35;color:var(--ink);margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:41px}
.card-price{display:flex;align-items:baseline;gap:10px}
.card-price .now{font-family:Outfit,sans-serif;font-size:18px;font-weight:600;color:var(--ink)}
.card-price .rrp{font-size:13.5px;color:var(--muted);text-decoration:line-through}
.meter{height:3px;background:var(--line);margin-top:11px;position:relative;overflow:hidden}
.meter i{position:absolute;inset:0 auto 0 0;background:var(--chestnut);display:block}
.meter-label{font-size:11.5px;color:var(--chestnut);margin-top:6px;letter-spacing:.02em}
.swatches{display:flex;gap:6px;margin-top:10px}
.sw{width:15px;height:15px;border-radius:50%;border:1px solid rgba(20,18,15,.18)}
.sentinel{height:1px}
.empty{grid-column:1/-1;text-align:center;padding:70px 20px;border:1px dashed var(--line);color:var(--muted)}

/* ---------- assurance ---------- */
.assure{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.assure > div{background:var(--paper);padding:30px 26px}
.assure svg{width:26px;height:26px;stroke:var(--chestnut);fill:none;stroke-width:1.4;margin-bottom:14px}
.assure strong{display:block;font-family:Outfit,sans-serif;color:var(--ink);font-size:16px;font-weight:500;margin-bottom:5px}
.assure p{margin:0;font-size:13.8px;color:var(--ink-soft)}

/* ---------- signup ---------- */
.signup{background:var(--ink);color:#EDE9E3;padding:58px 0}
.signup-inner{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.signup h2{color:#fff;font-family:Outfit,sans-serif;font-size:clamp(24px,2.3vw,32px);font-weight:500}
.signup p{margin:10px 0 0;font-size:15px;color:#B9B2A8}
.subform{display:flex;gap:10px}
.subform input{flex:1;height:54px;background:transparent;border:1px solid #3A352E;color:#fff;padding:0 18px;font-size:15px}
.subform input::placeholder{color:#8B8479}
.subform input:focus{border-color:#fff;outline:none}
.signup small{display:block;margin-top:12px;color:#8B8479;font-size:12.5px}

/* ---------- footer ---------- */
.site-footer{background:var(--bone);padding:56px 0 0;border-top:1px solid var(--line);margin-top:0;color:var(--ink-soft)}
.fcols{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:34px}
.fcols h4{font-family:Outfit,sans-serif;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;margin:0 0 16px;font-weight:600;color:var(--ink)}
.fcols a{display:block;padding:5px 0;font-size:14px}
.fcols a:hover{color:var(--chestnut)}
.fbrand .wm{font-family:Outfit,sans-serif;font-weight:600;font-size:19px;letter-spacing:.14em;color:var(--ink);text-transform:uppercase}
.fbrand p{font-size:14px;max-width:330px;margin:14px 0 0}
.fbrand .fsocial{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:6px 0;font-size:14px;font-weight:600;color:var(--ink)}
.fbrand .fsocial svg{width:18px;height:18px;fill:#1877f2}
.fbrand .fsocial:hover{color:var(--chestnut)}
.legal{margin-top:44px;border-top:1px solid var(--line);padding:22px 0 34px;display:flex;gap:20px 30px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.legal .fine-legal{max-width:640px}

/* ---------- product modal ---------- */
.modal,.cart-drawer{position:fixed;inset:0;z-index:100}
.modal[hidden],.cart-drawer[hidden]{display:none}
.modal-backdrop,.cart-backdrop{position:absolute;inset:0;background:rgba(20,18,15,.5)}
.modal-card{position:relative;background:#fff;max-width:920px;width:calc(100% - 32px);max-height:90vh;overflow:auto;margin:5vh auto;box-shadow:0 24px 70px rgba(0,0,0,.32)}
.modal-close{position:absolute;top:12px;right:14px;background:#fff;border:1px solid var(--line);width:36px;height:36px;font-size:20px;cursor:pointer;z-index:3;color:var(--ink)}
.modal-grid{display:grid;grid-template-columns:1fr 1fr}
.modal-media{padding:26px;background:var(--bone);border-right:1px solid var(--line)}
.modal-img{width:100%;aspect-ratio:1/1;object-fit:contain}
.thumbs{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.thumbs img{width:56px;height:56px;object-fit:contain;border:1px solid var(--line);cursor:pointer;padding:4px;background:#fff}
.thumbs img.active{border-color:var(--chestnut);border-width:2px}
.modal-info{padding:32px 32px}
.m-type{font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:8px}
.m-type .m-brand{color:var(--ink);font-weight:600}
.modal-info h2{font-family:Outfit,sans-serif;font-size:25px;font-weight:500;line-height:1.2;margin:0 0 14px}
.m-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.m-price .now{font-family:Outfit,sans-serif;font-size:28px;font-weight:600;color:var(--ink)}
.m-price .rrp{font-size:16px;color:var(--muted);text-decoration:line-through}
.m-price .save{position:static;background:transparent;color:var(--chestnut);font-weight:600;font-size:13px;border:1px solid var(--chestnut);padding:4px 10px}
/* .save is absolutely positioned for the card corner; on the PDP it sits inline
   beside the price, so it has to drop out of the absolute flow or it anchors to
   the page and lands on top of the promo bar. */
.m-variants{margin-bottom:20px}
.m-variants .vlabel{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink);margin-bottom:9px;display:block}
.m-variants .vguide{float:right;font-weight:500;letter-spacing:.04em;text-transform:none;font-size:12px;color:var(--chestnut);text-decoration:underline;text-underline-offset:3px}
.m-variants .vguide:hover{color:var(--chestnut-dk)}
.vopts{display:flex;flex-wrap:wrap;gap:8px}
.vopt{border:1px solid var(--line);background:#fff;padding:9px 15px;font-size:14px;cursor:pointer;min-width:50px;text-align:center}
.vopt.active{border-color:var(--ink);background:var(--ink);color:#fff}
.vopt:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
/* Cannot be had with what is already selected: not made in that combination, or sold out
   in it. Still clickable — see paintOptions() in assets/product.js. Kept legible when it
   is also the active button, so the shopper can see what they picked. */
.vopt.gone{opacity:.45;text-decoration:line-through}
.vopt.gone.active{opacity:.75;text-decoration:line-through}
.add-btn,.checkout-btn{background:var(--chestnut);color:#fff;border:1px solid var(--chestnut);font-family:Outfit,sans-serif;font-weight:600;font-size:15px;letter-spacing:.02em;padding:15px 22px;cursor:pointer;width:100%;transition:background .15s}
.add-btn:hover,.checkout-btn:hover{background:var(--chestnut-dk);border-color:var(--chestnut-dk)}
.add-btn:disabled{opacity:.5;cursor:not-allowed}
.m-desc{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-soft);line-height:1.65}
.m-desc p{margin:0 0 10px}
.m-desc img{max-width:100%;height:auto}

/* ---------- cart drawer ---------- */
.cart-panel{position:absolute;right:0;top:0;height:100%;width:min(430px,100%);background:#fff;display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(0,0,0,.2)}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:22px 26px;border-bottom:1px solid var(--line)}
.cart-head h2{font-family:Outfit,sans-serif;font-size:19px;font-weight:500;margin:0}
.cart-items{flex:1;overflow:auto;padding:8px 26px}
.cart-row{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.cart-row img{width:64px;height:64px;object-fit:contain;border:1px solid var(--line);background:#fff}
.cart-row .ci-info{flex:1;font-size:14px}
.cart-row .ci-title{font-weight:500;line-height:1.3;color:var(--ink)}
.cart-row .ci-var{color:var(--muted);font-size:12.5px;margin-top:2px}
.cart-row .ci-price{font-family:Outfit,sans-serif;font-weight:600;color:var(--ink);margin-top:6px}
.ci-remove{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;align-self:flex-start}
.qty{display:inline-flex;align-items:center;margin-top:10px;border:1px solid var(--line)}
.qty button{width:30px;height:30px;font-size:16px;line-height:1}
.qty span{width:34px;text-align:center;font-size:14px}
.cart-foot{border-top:1px solid var(--line);padding:22px 26px;display:flex;flex-direction:column;gap:12px;background:#fff}
.cart-total{display:flex;justify-content:space-between;font-family:Outfit,sans-serif;font-size:20px;font-weight:600;color:var(--ink)}
.cart-empty{text-align:center;color:var(--muted);padding:60px 0}
.fine{font-size:11.5px;color:var(--muted);text-align:center;margin:2px 0 0}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .cat-cards{grid-template-columns:repeat(3,1fr)}
  .grid{grid-template-columns:repeat(3,1fr)}
  .fcols{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:980px){
  .head-inner{flex-wrap:wrap;gap:14px}
  .hamburger{display:inline-flex}
  .search{order:3;flex:1 0 100%;max-width:none}
  .nav{position:static}
  .mainnav-inner{display:none}
  .nav.open .mainnav-inner{display:flex;flex-direction:column;align-items:stretch;padding:6px 0}
  .nav.open .nav-item{display:block}
  .nav.open .nav-link{width:100%;justify-content:space-between;height:auto;padding:14px 16px;border-bottom:1px solid var(--line)}
  .nav.open .nav-link::after{display:none}
  /* Dropdowns become inline accordions. They used to be display:none here, which
     left the phone menu stuck on tier one — no way to reach Bits, Spurs, Girths or
     any of the other sub-categories. `left:0!important` beats the inline offset
     clampDropdowns() writes for the desktop mega-menus. */
  .nav.open .nav-dropdown{position:static;left:0!important;display:none;opacity:1;visibility:visible;
    transform:none;box-shadow:none;border:0;border-radius:0;background:var(--bone);
    min-width:0;width:auto;max-width:none;max-height:none;overflow:visible}
  .nav.open .nav-item.open > .nav-dropdown{display:block}
  .nav.open .nav-item.open > .nav-link .caret{transform:rotate(180deg)}
  .nav.open .nav-dropdown-inner{padding:0}
  /* `width:max-content` shrink-wraps the desktop grid; as a block it would leave the
     rows two-thirds of the way across the phone. */
  .nav.open .nav-dropdown-inner.is-mega{display:block;grid-template-columns:none;gap:0;width:auto;padding:0}
  .nav.open .nav-col{min-width:0}
  .nav.open .nav-col-head{padding:13px 16px 5px;margin:0;border:0;font-size:12px}
  .nav.open .nav-sub,.nav.open .nav-col .nav-sub{padding:12px 16px 12px 28px;font-size:14px;
    border-bottom:1px solid var(--line)}
  .nav.open .nav-col .nav-sub:hover{padding-left:28px}
  .nav.open .nav-sub-all{padding-left:16px;border-top:0;margin-top:0;width:auto}
  /* the hairline under the final row would double up with the next nav-link's */
  .nav.open .nav-sub-all{border-bottom:0}
  .catalog-wrap{grid-template-columns:1fr}
  .filter-toggle{display:inline-flex}
  .sort{margin-left:0}
  /* full-height drawer — drop the desktop rail's viewport cap or the last
     filters get clipped off the bottom of the panel */
  .facets{position:fixed;inset:0 auto 0 0;width:min(320px,90%);background:#fff;z-index:120;padding:22px;
    max-height:none;overflow:auto;transform:translateX(-100%);transition:transform .25s;box-shadow:none}
  .facets.open{transform:none;box-shadow:8px 0 30px rgba(20,18,15,.25)}
  .facets-head{background:#fff;top:-2px}
  .facets-close{display:grid}
  .facets-backdrop.open{display:block;position:fixed;inset:0;background:rgba(20,18,15,.5);z-index:110}
  .assure{grid-template-columns:1fr 1fr}
  .signup-inner{grid-template-columns:1fr;gap:24px}
  .modal-grid{grid-template-columns:1fr}
  .modal-media{border-right:none;border-bottom:1px solid var(--line)}
}
@media (max-width:720px){
  .wrap{padding:0 16px}
  .head .lockup{--lk:23px}
  .promo .wrap{gap:10px;font-size:11px;padding:8px 14px;justify-content:space-between}
  .promo-side{gap:12px}
  .promo-social{gap:12px}
  .promo-social::before{display:none}
  .promo-soc svg{width:17px;height:17px}
  .promo-callword{display:none}          /* just the number; the icon says what it is */
  /* One message at a time instead of four wrapping into four ragged lines. They are
     stacked in the same box and faded through in turn, so the bar is always one row
     tall and the shop starts where it should. Pure CSS: no script, no layout shift.
     A separate keyframe per count because the visible slice has to be 1/n of the
     cycle and CSS cannot work that out from a custom property. */
  .promo-msgs{position:relative;display:block;flex:1 1 auto;min-width:0;height:14px;gap:0}
  .promo-msgs>span{position:absolute;inset:0;display:block;text-align:center;overflow:hidden;
    text-overflow:ellipsis;opacity:0;animation-iteration-count:infinite;animation-fill-mode:both}
  .promo-msgs>span::after{display:none}
  .promo-msgs[data-n="1"]>span{opacity:1;animation:none}
  .promo-msgs[data-n="2"]>span{animation-name:promoCycle2;animation-duration:9s;animation-delay:calc(var(--i) * 4.5s)}
  .promo-msgs[data-n="3"]>span{animation-name:promoCycle3;animation-duration:13.5s;animation-delay:calc(var(--i) * 4.5s)}
  .promo-msgs[data-n="4"]>span{animation-name:promoCycle4;animation-duration:18s;animation-delay:calc(var(--i) * 4.5s)}
  .promo-msgs[data-n="5"]>span{animation-name:promoCycle5;animation-duration:22.5s;animation-delay:calc(var(--i) * 4.5s)}
  @keyframes promoCycle2{0%,2%{opacity:0}6%,44%{opacity:1}50%,100%{opacity:0}}
  @keyframes promoCycle3{0%,1%{opacity:0}4%,29%{opacity:1}33%,100%{opacity:0}}
  @keyframes promoCycle4{0%,1%{opacity:0}3%,22%{opacity:1}25%,100%{opacity:0}}
  @keyframes promoCycle5{0%,1%{opacity:0}2.5%,17%{opacity:1}20%,100%{opacity:0}}
  /* Anyone who has asked for less movement gets the first message, held still. */
  @media(prefers-reduced-motion:reduce){
    .promo-msgs>span{animation:none;opacity:0}
    .promo-msgs>span[style*="--i:0"]{opacity:1}
  }
}
/* The longest line, "Almost every price below RRP", needs about 185px at 11px with the
   uppercase tracking, and a 360px phone leaves roughly 179px once the number and the
   icons have taken theirs. Tightened here rather than left to ellipsis, because a
   promise cut off mid-word reads worse than a slightly smaller one. */
@media(max-width:420px){
  .promo .wrap{font-size:10.5px;letter-spacing:.03em;gap:8px}
  .promo-msgs{height:13px}
  .promo-side{gap:10px}
  .promo-social{gap:10px}
}
/* Below this there is no room for both the number and the messages. The icon stays and
   is still tap-to-call, so nothing is lost but the digits. */
@media(max-width:349px){
  .promo-call .num{display:none}
}
@media(max-width:760px){
  .util .wrap{height:42px;gap:16px;font-size:12.5px}
  .util .hide-s{display:none}
  .actions .iconbtn span{display:none}
  .cat-cards{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:1fr 1fr;gap:22px 14px}
  .card-title{font-size:13px;min-height:36px}
  .assure{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr 1fr}
  .sec{padding:44px 0}
  .hero{min-height:60vh}
  .hero-cap{padding:22px 22px 26px;max-width:100%}
}
@media (max-width:420px){
  .grid{gap:16px 12px}
  .card-title{font-size:12.5px}
  .head .lockup{--lk:20px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ============================================================
   SHARED PAGES — account.html / checkout.html / admin.html
   (preserved from the previous stylesheet; re-tinted by the
   variables above. Do not restyle here without checking those
   pages.)
   ============================================================ */
.account-btn{background:var(--ink); color:#fff; border:none; height:46px; padding:0 18px; border-radius:var(--pill); font-size:14.5px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; text-decoration:none; white-space:nowrap; font-weight:600;}
.account-btn:hover{background:#000;}
.page-title{font-size:26px; margin:24px 0;}
.panel{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 24px; margin-bottom:20px;}
.express-pay h2{font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px}
.express-or{display:flex;align-items:center;gap:12px;margin:16px 0 0;color:var(--muted);font-size:13px}
.express-or::before,.express-or::after{content:"";flex:1;height:1px;background:var(--line)}
.panel h2{margin:0 0 16px; font-size:18px;}
.panel-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;}
.fld{display:block; margin-bottom:14px; font-size:13.5px; font-weight:600; color:#3a4653;}
.fld input,.fld select{display:block; width:100%; margin-top:6px; height:44px; border:1px solid var(--line); border-radius:9px; padding:0 12px; font-size:15px; font-weight:400; background:#fff;}
.fld textarea{display:block; width:100%; margin-top:6px; min-height:88px; border:1px solid var(--line); border-radius:9px; padding:10px 12px; font-family:inherit; font-size:15px; font-weight:400; line-height:1.5; background:#fff; resize:vertical;}
.fld textarea:focus{outline:2px solid var(--accent); border-color:transparent;}
.fld input:focus{outline:2px solid var(--accent); border-color:transparent;}
.fld input:disabled{background:#f2f4f6; color:var(--muted);}
.fld-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.hint{font-weight:400; color:var(--muted); font-size:12px;}
.chk{display:flex; align-items:center; gap:8px; font-size:14px; margin:6px 0 16px;}
.chk input{width:auto;}

/* Auth modal */
.auth-modal{position:fixed; inset:0; z-index:200;}
.auth-backdrop{position:absolute; inset:0; background:rgba(12,22,38,.55);}
.auth-card{position:relative; background:#fff; max-width:420px; width:calc(100% - 32px); margin:8vh auto; border-radius:16px; padding:8px 26px 26px; box-shadow:0 20px 60px rgba(0,0,0,.3);}
.auth-tabs{display:flex; gap:8px; margin:8px 0 20px;}
.auth-tab{flex:1; background:none; border:none; border-bottom:2px solid var(--line); padding:12px 0; font-size:15px; font-weight:600; color:var(--muted); cursor:pointer;}
.auth-tab.active{color:var(--navy); border-color:var(--accent);}
.auth-form label{display:block; font-size:13.5px; font-weight:600; margin-bottom:12px; color:#3a4653;}
.auth-form input{display:block; width:100%; margin-top:6px; height:44px; border:1px solid var(--line); border-radius:9px; padding:0 12px; font-size:15px; font-weight:400;}
.auth-form input:focus{outline:2px solid var(--accent); border-color:transparent;}
.auth-err,.checkout-err{color:var(--error); font-size:13.5px; margin:4px 0 12px; background:#fbe9e9; padding:10px 12px; border-radius:8px;}

/* Checkout */
.checkout-wrap{padding-bottom:60px;}
.checkout-grid{display:grid; grid-template-columns:1fr 380px; gap:26px; align-items:start;}
.acct-prompt{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:14px; padding:14px 20px; background:#eef3f8;}
.link-btn{background:none; border:none; color:var(--navy-2); font-weight:700; cursor:pointer; text-decoration:underline; font-size:14px; padding:0;}
.addr-select{height:40px; border:1px solid var(--line); border-radius:8px; padding:0 10px; max-width:230px;}
.pay-note{font-size:13.5px; color:var(--muted); background:#f2f6fb; padding:12px 14px; border-radius:8px; margin:0;}
.place-btn{margin-top:6px; font-size:17px;}
.checkout-summary{position:sticky; top:88px;}
.summary-items{margin-bottom:14px;}
.summary-row{display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--line);}
.summary-row img{width:52px; height:52px; object-fit:contain; border:1px solid var(--line); border-radius:8px;}
.sr-info{flex:1; font-size:13px;}
.sr-title{font-weight:600; line-height:1.3;}
.sr-var,.sr-qty{color:var(--muted); font-size:12px;}
.sr-line{font-weight:700; font-size:13.5px;}
.summary-line{display:flex; justify-content:space-between; padding:7px 0; font-size:14.5px;}
.summary-line.total{border-top:2px solid var(--line); margin-top:6px; padding-top:12px; font-size:19px; font-weight:800; color:var(--navy);}

/* Confirmation */
.confirmation{max-width:620px; margin:30px auto; text-align:center; background:#fff; border-radius:16px; box-shadow:var(--shadow); padding:44px 30px;}
.conf-check{width:64px; height:64px; margin:0 auto 18px; background:#e6f6ec; color:#1e9e54; border-radius:50%; display:grid; place-items:center; font-size:34px;}
.confirmation h1{font-size:26px; margin:0 0 10px;}
.conf-items{text-align:left; max-width:420px; margin:24px auto; border-top:1px solid var(--line);}
.conf-item{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px;}
.conf-item.total{font-weight:800; color:var(--navy); font-size:16px;}
.conf-actions{display:flex; gap:16px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:10px;}
.conf-actions .add-btn{max-width:220px;}
.muted{color:var(--muted);}

/* Account dashboard */
.account-wrap{padding-bottom:60px;}
.signed-out{text-align:center; padding:60px 20px;}
.signed-out .add-btn{margin:20px auto 0;}
.account-tabs{display:flex; gap:6px; margin-bottom:22px; border-bottom:1px solid var(--line);}
.acct-tab{background:none; border:none; padding:12px 18px; font-size:15px; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;}
.acct-tab.active{color:var(--navy); border-color:var(--accent);}
.order-card{padding:0; overflow:hidden;}
.order-head{display:flex; justify-content:space-between; align-items:center; padding:16px 22px; background:#f7f9fb; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:10px;}
.order-ref{font-weight:800; font-size:15px; letter-spacing:.5px;}
.order-date{color:var(--muted); font-size:13px;}
.order-meta{display:flex; align-items:center; gap:14px;}
.order-total{font-weight:800; font-size:17px; color:var(--navy);}
.order-status{font-size:12px; font-weight:700; padding:4px 10px; border-radius:20px;}
.status-paid{background:#e6f6ec; color:#1e9e54;}
.status-pending{background:#fef4e2; color:#c07d10;}
.status-fulfilled{background:#e6eefc; color:#2b62d0;}
.status-cancelled,.status-failed{background:#fdeceb; color:var(--red);}
.order-items{padding:14px 22px; display:flex; flex-direction:column; gap:12px;}
.order-item{display:flex; gap:12px;}
.order-item img{width:54px; height:54px; object-fit:contain; border:1px solid var(--line); border-radius:8px;}
.oi-title{font-weight:600; font-size:14px;}
.oi-var,.oi-qty{color:var(--muted); font-size:12.5px;}
.order-ship{padding:12px 22px; border-top:1px solid var(--line); font-size:13px; color:var(--muted);}
.addr-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; margin-bottom:20px;}
.addr-card{position:relative; background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px; font-size:14px; line-height:1.5;}
.addr-default{position:absolute; top:10px; right:10px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; padding:2px 8px; border-radius:12px;}
.addr-card strong{display:block; margin-bottom:4px;}
.addr-card .del-addr{margin-top:8px;}
.empty-panel{text-align:center; color:var(--muted);}
.save-ok{color:#1e9e54; font-weight:600; font-size:14px;}

@media(max-width:840px){
  .checkout-grid{grid-template-columns:1fr;}
  .checkout-summary{position:static;}
  .fld-row{grid-template-columns:1fr;}
}

/* Order complete page */
.complete-wrap{padding:40px 20px 70px; max-width:960px;}
.complete-hero{text-align:center; margin-bottom:34px;}
.complete-hero h1{font-size:34px; margin:6px 0 8px;}
.complete-sub{color:var(--muted); font-size:16px; max-width:560px; margin:0 auto 18px;}
.ref-badge{display:inline-flex; flex-direction:column; align-items:center; gap:2px; background:var(--card); border:1.5px dashed var(--accent); border-radius:14px; padding:12px 26px; font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--muted);}
.ref-badge strong{font-family:"Outfit",sans-serif; font-size:22px; letter-spacing:1px; color:var(--ink); text-transform:none;}
.complete-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:22px; align-items:start;}
.next-steps ol{margin:0; padding-left:18px; font-size:14px; color:#4a4542;}
.next-steps li{margin-bottom:10px;}
.ship-to{font-style:normal; font-size:14.5px; line-height:1.7; color:#4a4542;}
.complete-actions{display:flex; gap:18px; align-items:center; justify-content:center; margin-top:30px; flex-wrap:wrap;}
@media(max-width:760px){ .complete-grid{grid-template-columns:1fr;} }

/* Admin CRM */
.admin-shell{display:grid; grid-template-columns:230px 1fr; min-height:100vh;}
.admin-side{background:var(--ink); color:#cfc7bd; padding:0; position:sticky; top:0; height:100vh; display:flex; flex-direction:column;}
.admin-brand{display:flex; align-items:center; gap:10px; padding:20px 22px; border-bottom:1px solid rgba(255,255,255,.1);}
.admin-brand .brand-mark{width:38px; height:38px; font-size:13px;}
.admin-brand b{color:#fff; font-family:"Outfit",sans-serif; font-size:15px;}
.admin-brand small{display:block; color:#8f877d; font-size:11px; font-weight:400;}
.admin-nav{padding:14px 12px; flex:1;}
.admin-nav button{display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; color:#cfc7bd; text-align:left; padding:11px 14px; border-radius:10px; font-size:14.5px; cursor:pointer; margin-bottom:3px; font-weight:500;}
.admin-nav button:hover{background:rgba(255,255,255,.06); color:#fff;}
.admin-nav button.active{background:var(--accent); color:#fff; font-weight:700;}
.admin-side-foot{padding:16px 20px; border-top:1px solid rgba(255,255,255,.1); font-size:12.5px;}
.admin-side-foot a{color:#a9a196; text-decoration:underline;}
.admin-main{padding:26px 30px 60px; overflow:auto;}
.admin-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; gap:12px; flex-wrap:wrap;}
.admin-topbar h1{font-size:24px; margin:0;}
.admin-user{font-size:13.5px; color:var(--muted);}
.admin-user button{margin-left:12px; background:var(--ink); color:#fff; border:none; padding:8px 14px; border-radius:var(--pill); font-size:13px; cursor:pointer;}

.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:26px;}
.stat-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 22px;}
.stat-card .label{font-size:12.5px; text-transform:uppercase; letter-spacing:.7px; color:var(--muted);}
.stat-card .value{font-family:"Outfit",sans-serif; font-size:30px; font-weight:800; color:var(--ink); margin-top:6px; line-height:1;}
.stat-card .sub{font-size:12.5px; color:var(--green); margin-top:6px; font-weight:600;}
.stat-card.accent{background:var(--ink); color:#fff;}
.stat-card.accent .value{color:#fff;} .stat-card.accent .label{color:#b8b0a6;}

.admin-panel{background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-bottom:22px;}
.admin-panel-head{display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line); gap:12px; flex-wrap:wrap;}
.admin-panel-head h2{margin:0; font-size:16px;}
.filter-pills{display:flex; gap:6px; flex-wrap:wrap;}
.filter-pills button{background:var(--bg); border:1px solid var(--line); border-radius:var(--pill); padding:6px 14px; font-size:13px; cursor:pointer; color:#4a4542;}
.filter-pills button.active{background:var(--ink); color:#fff; border-color:var(--ink);}
.admin-search{height:38px; border:1px solid var(--line); border-radius:var(--pill); padding:0 16px; font-size:13.5px; background:var(--bg); min-width:210px;}
table.admin-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.admin-table th{text-align:left; padding:12px 20px; background:#faf6ee; color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--line);}
.admin-table td{padding:13px 20px; border-bottom:1px solid var(--line);}
.admin-table tr{cursor:pointer;}
.admin-table tbody tr:hover{background:#faf6ee;}
.admin-table .mono{font-family:ui-monospace,Menlo,monospace; font-weight:600;}
.admin-table .amt{font-weight:700; color:var(--ink);}
.pill-status{display:inline-block; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:var(--pill);}
.s-paid{background:#e6f6ec; color:#1e9e54;} .s-pending{background:#fef1de; color:#c07d10;}
.s-fulfilled{background:#e7eefb; color:#2b62d0;} .s-cancelled,.s-failed{background:#fbe9e9; color:var(--error);}
.empty-row{padding:40px; text-align:center; color:var(--muted);}

.admin-drawer{position:fixed; inset:0; z-index:200; display:none;}
.admin-drawer.open{display:block;}
.admin-drawer .cart-backdrop{position:absolute; inset:0; background:rgba(35,31,32,.5);}
.drawer-panel{position:absolute; right:0; top:0; height:100%; width:520px; max-width:100%; background:var(--bg); overflow:auto; box-shadow:-10px 0 40px rgba(0,0,0,.25);}
.drawer-head{display:flex; justify-content:space-between; align-items:center; padding:20px 24px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0;}
.drawer-head h2{margin:0; font-size:18px;}
.drawer-body{padding:22px 24px;}
.drawer-body .panel{background:var(--card);}
.kv{display:flex; justify-content:space-between; padding:7px 0; font-size:14px; border-bottom:1px solid var(--line);}
.kv:last-child{border:none;} .kv span:first-child{color:var(--muted);}
.status-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;}
.status-actions button{border:1px solid var(--line); background:var(--card); padding:8px 14px; border-radius:var(--pill); font-size:13px; cursor:pointer; font-weight:600;}
.status-actions button:hover{border-color:var(--ink);}
.status-actions button.current{background:var(--ink); color:#fff; border-color:var(--ink);}
.login-card{max-width:380px; margin:12vh auto; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:34px 30px; text-align:center;}
.login-card .brand-mark{margin:0 auto 16px; width:52px; height:52px;}
.login-card h1{font-size:22px; margin:0 0 4px;}
.login-card p{color:var(--muted); font-size:14px; margin:0 0 22px;}
.login-card input{width:100%; height:46px; border:1px solid var(--line); border-radius:10px; padding:0 14px; margin-bottom:12px; font-size:15px; background:var(--bg);}
.login-card .err{color:var(--error); font-size:13.5px; margin-bottom:10px; min-height:18px;}

.settings-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:20px; align-items:start;}
.set-panel .set-body{padding:20px 22px;}
.set-help{font-size:13px; color:var(--muted); line-height:1.6; margin:0 0 16px; background:#faf6ee; padding:12px 14px; border-radius:10px;}
.set-help code{background:#efe7d6; padding:1px 5px; border-radius:4px; font-size:12px;}
.set-panel .fld input{background:#fff;}
.set-msg{font-size:13.5px; font-weight:600; margin:2px 0 12px;}

/* brand-mark used by admin/login headers */
.brand-mark{background:var(--ink); color:var(--gold); font-weight:700; letter-spacing:.5px; width:46px; height:46px; display:grid; place-items:center; border-radius:12px; font-size:16px; font-family:"Outfit",serif;}

/* ============================================================
   SECONDARY-PAGE HEADER (account / checkout / info pages)
   Restores the classes those pages use, in the new palette.
   ============================================================ */
.site-header{background:var(--paper);border-bottom:1px solid var(--line)}
.site-header .header-inner{display:flex;align-items:center;gap:18px;min-height:70px;padding:12px 0}
.hdr-spacer{flex:1}
/* On a narrow screen the brand lockup plus a 186px nowrap button is wider than the
   viewport, and .account-btn cannot shrink (white-space:nowrap), so the whole checkout
   page gained a horizontal scroll and the button was clipped mid-word. Dropping the
   spacer lets the row wrap onto a second line instead of overflowing. */
@media (max-width:560px){
  .site-header .header-inner{flex-wrap:wrap;gap:10px 12px;min-height:0}
  .site-header .header-inner .hdr-spacer{display:none}
  .account-btn{height:42px;padding:0 14px;font-size:13.5px}
}
.site-header .brand{display:flex;align-items:center;gap:11px}
.brand-text{font-family:Outfit,sans-serif;font-size:20px;font-weight:600;letter-spacing:.01em;color:var(--ink)}
.brand-text strong{color:var(--chestnut);font-weight:600}
.header-spacer{flex:1}

/* ============================================================
   INFO / CONTENT PAGES  (size guides, delivery, returns, contact, track)
   ============================================================ */
.infopage{max-width:960px;margin:0 auto;padding:44px 0 72px}
.infopage .crumb{font-size:13px;color:var(--muted);margin-bottom:16px}
.infopage .crumb a:hover{color:var(--chestnut)}
.infopage h1{font-family:Outfit,sans-serif;font-size:clamp(28px,4vw,40px);font-weight:500;margin:0 0 10px;color:var(--ink)}
.infopage .lead{font-size:17px;color:var(--ink-soft);margin:0 0 26px;max-width:660px}
.infopage h2{font-family:Outfit,sans-serif;font-size:22px;font-weight:500;margin:40px 0 6px;color:var(--ink)}
.infopage h3{font-size:15px;font-weight:600;color:var(--ink);margin:22px 0 8px}
.infopage p{margin:0 0 12px}
.about-photo{margin:6px 0 34px}
.about-photo img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.about-photo figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.about-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.about-cols h2{margin-top:18px}
.about-cols p{font-size:15.5px;line-height:1.65}
.about-cta{margin-top:44px;padding:26px 28px;background:var(--wash);border:1px solid var(--line);text-align:center}
.about-cta p{max-width:560px;margin:0 auto 16px;font-size:15.5px}
.about-cta .add-btn{display:inline-block;width:auto;padding:13px 26px;text-decoration:none}
.about-contact{display:block;margin-top:12px;font-size:14px;color:var(--chestnut);font-weight:600}
@media(max-width:820px){ .about-cols{grid-template-columns:1fr} .about-cta{padding:20px} }
.infopage ul{margin:0 0 14px;padding-left:20px}
.infopage li{margin-bottom:6px}
.infopage a.inline{color:var(--chestnut);border-bottom:1px solid var(--chestnut)}
.supplier-tag{display:inline-block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--chestnut);border:1px solid var(--line);padding:3px 9px;margin:0 0 8px}
.callout{background:var(--bone);border-left:3px solid var(--chestnut);padding:15px 20px;margin:16px 0;font-size:14.5px}
.sg-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.sg-nav a{border:1px solid var(--line);padding:8px 14px;font-size:13.5px;color:var(--ink-soft)}
.sg-nav a:hover{border-color:var(--chestnut);color:var(--chestnut)}
.table-scroll{overflow-x:auto;margin:10px 0}
.sizetable{width:100%;border-collapse:collapse;font-size:14px;min-width:440px}
.sizetable th,.sizetable td{border:1px solid var(--line);padding:9px 12px;text-align:left;white-space:nowrap}
.sizetable th{background:var(--bone);font-family:Outfit,sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.03em;color:var(--ink)}
.sizetable tbody tr:nth-child(even){background:#fbfaf8}
.info-foot{border-top:1px solid var(--line);margin-top:46px;padding-top:22px;font-size:14px;color:var(--muted)}

/* ---- simple forms (contact / track) ---- */
.form-card{background:var(--paper);border:1px solid var(--line);padding:26px 28px;max-width:560px}
.form-card label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:15px}
.form-card input,.form-card textarea{display:block;width:100%;margin-top:6px;border:1px solid var(--line);padding:11px 13px;font-size:15px;font-family:inherit;background:#fff;border-radius:0;color:var(--ink)}
.form-card textarea{min-height:130px;resize:vertical}
.form-card input:focus,.form-card textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,18,15,.05)}
.form-card .add-btn{max-width:220px}
.form-msg{font-size:14px;margin:4px 0 14px;min-height:18px}
.form-msg.ok{color:var(--field)}
.form-msg.err{color:var(--error)}
.track-result{margin-top:26px}
.track-status{display:inline-block;font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px;letter-spacing:.03em}
.track-line{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.track-line:last-child{border-bottom:none}

/* ---- wishlist heart on product cards ---- */
.wish{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid var(--line);display:grid;place-items:center;z-index:3;cursor:pointer;padding:0}
.wish svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.6}
.wish.on svg{fill:var(--chestnut);stroke:var(--chestnut)}
.wish:hover{border-color:var(--chestnut)}
.card-img .flag-low{right:56px}          /* sit left of the heart */

/* ---- hero carousel dots ---- */
.hero-dots{position:absolute;left:0;right:0;bottom:9px;z-index:3;display:flex;gap:9px;justify-content:center}
/* The indicator is a 3px bar by design, but the bar used to BE the button, which
   made it a 3px-tall tap target. The button is now 24px tall and transparent, and
   the bar is drawn as its ::before — same look, a hittable target on a phone.
   .hero-dots sits 11px lower to keep the bar where it was optically. */
.hero-dot{width:32px;height:24px;background:transparent;cursor:pointer;padding:0;border:0;
  display:flex;align-items:center}
.hero-dot::before{content:"";display:block;width:100%;height:3px;background:rgba(255,255,255,.4)}
.hero-dot.on::before{background:#fff}
/* The caption and dark veil wait for the photograph. Before this they were painted
   over the hero's plain dark ground the instant the page arrived and the photo
   faded in behind them a moment later — a dark flash on every visit. */
.hero-veil,.hero-cap{opacity:0;transition:opacity .4s}
.hero.ready .hero-veil,.hero.ready .hero-cap{opacity:1}
.hero-cap.fading,.hero.ready .hero-cap.fading{opacity:0}

/* ============================================================
   SHOPIFY-STYLE BASKET DRAWER + CHECKOUT
   (appended last so it overrides the earlier cart/checkout rules)
   ============================================================ */
.cart-panel{width:min(420px,100%)}
.cart-head{padding:20px 24px;border-bottom:1px solid var(--line)}
.cart-head h2{font-family:Outfit,sans-serif;font-size:18px;font-weight:600;display:flex;align-items:baseline;gap:8px}
.cart-qty{font-size:14px;font-weight:400;color:var(--muted)}
.cart-x{width:40px;height:40px;font-size:26px;line-height:1;color:var(--ink-soft);border:0;background:none}
.cart-x:hover{color:var(--chestnut)}

/* free-delivery progress */
.cart-ship{padding:14px 24px;border-bottom:1px solid var(--line);background:var(--bone)}
.cart-ship[hidden]{display:none}
.cs-msg{font-size:12.5px;color:var(--ink-soft);margin-bottom:8px}
.cs-msg strong{color:var(--ink)}
.cs-done{color:var(--field)}
.cs-bar{height:5px;background:#e4e0d9;border-radius:999px;overflow:hidden}
.cs-bar i{display:block;height:100%;background:var(--chestnut);border-radius:999px;transition:width .35s ease}

.cart-items{flex:1;overflow:auto;padding:0 24px}
.cart-row{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start}
.cart-row img{width:64px;height:64px;object-fit:contain;border:1px solid var(--line);background:#fff}
.ci-info{min-width:0}
.ci-title{font-weight:500;font-size:14px;line-height:1.35;color:var(--ink)}
.ci-var{color:var(--muted);font-size:12.5px;margin-top:3px}
.ci-price{font-size:13px;color:var(--ink-soft);margin-top:6px}
.ci-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.qty button{width:30px;height:30px;font-size:15px;line-height:1;color:var(--ink-soft);background:none;border:0}
.qty button:hover{color:var(--ink);background:var(--bone)}
.qty span{min-width:26px;text-align:center;font-size:13.5px;color:var(--ink)}
.ci-line{font-family:Outfit,sans-serif;font-weight:600;font-size:14px;color:var(--ink)}
.ci-remove{font-size:12px;color:var(--muted);text-decoration:underline;background:none;border:0;padding:0}
.ci-remove:hover{color:var(--chestnut)}

.cart-foot{border-top:1px solid var(--line);padding:20px 24px;background:#fff;display:block}
.cart-foot[hidden]{display:none}
.cart-subtotal{display:flex;justify-content:space-between;align-items:baseline;font-family:Outfit,sans-serif;font-size:18px;font-weight:600;color:var(--ink)}
.cart-tax{font-size:12px;color:var(--muted);margin:6px 0 16px}
.cart-foot .checkout-btn{width:100%;justify-content:center;margin:0}
.cart-continue{width:100%;text-align:center;padding:13px 0 2px;font-size:14px;color:var(--ink-soft);background:none;border:0;text-decoration:underline}
.cart-continue:hover{color:var(--chestnut)}
.cart-empty{text-align:center;color:var(--muted);padding:56px 24px;display:flex;flex-direction:column;align-items:center;gap:18px}
.cart-empty p{margin:0}

/* ---- checkout page ---- */
.checkout-wrap{max-width:1040px;padding:30px 0 72px}
.checkout-wrap .page-title{font-family:Outfit,sans-serif;font-size:27px;font-weight:500;margin:0 0 24px}
.checkout-grid{display:grid;grid-template-columns:1fr 400px;gap:44px;align-items:start}
.checkout-grid[hidden]{display:none}
.checkout-main .panel{background:#fff;border:1px solid var(--line);border-radius:0;box-shadow:none;padding:22px 24px;margin-bottom:16px}
.checkout-main .panel h2{font-family:Outfit,sans-serif;font-size:17px;font-weight:600;margin:0 0 16px}
.checkout-wrap .acct-prompt{background:var(--bone);border:1px solid var(--line);color:var(--ink-soft)}
.checkout-wrap .fld{font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.checkout-wrap .fld input,.checkout-wrap .addr-select{height:46px;border:1px solid var(--line);border-radius:8px;font-size:15px}
.checkout-wrap .fld input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,18,15,.05)}
.gc-buy .fld textarea{border-radius:8px;font-size:15px}
.gc-buy .fld textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,18,15,.05)}
#payment-element{margin-top:4px}
.place-btn,.checkout-wrap .add-btn{width:100%;justify-content:center;margin-top:8px}

.checkout-summary{position:sticky;top:20px}
.checkout-summary .summary-panel{background:var(--bone);border:1px solid var(--line);border-radius:0;box-shadow:none;padding:22px 24px}
.checkout-summary h2{font-family:Outfit,sans-serif;font-size:16px;font-weight:600;margin:0 0 16px}
.summary-items{margin-bottom:10px;border-bottom:1px solid var(--line);padding-bottom:6px}
.summary-row{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:10px 0;border:0}
.sr-thumb{position:relative;width:56px;height:56px}
.sr-thumb img{width:56px;height:56px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:#fff}
.sr-badge{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;border-radius:999px;background:var(--muted);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center;padding:0 5px;line-height:1}
.sr-info{min-width:0}
.sr-title{font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.3}
.sr-var{font-size:12px;color:var(--muted);margin-top:2px}
.sr-line{font-family:Outfit,sans-serif;font-weight:600;font-size:14px;color:var(--ink)}
.summary-line{display:flex;justify-content:space-between;padding:7px 0;font-size:14px;color:var(--ink-soft)}
.summary-line[hidden]{display:none}
.summary-line.total{border-top:1px solid var(--line);margin-top:6px;padding-top:14px;font-family:Outfit,sans-serif;font-size:20px;font-weight:600;color:var(--ink)}
.checkout-summary .fine{text-align:left;color:var(--field);margin-top:10px}

@media(max-width:840px){
  .checkout-grid{grid-template-columns:1fr;gap:24px}
  .checkout-summary{position:static;order:-1}
}

/* ============================================================
   SERVER-RENDERED PRODUCT & COLLECTION PAGES (SEO)
   ============================================================ */
.ghost-btn{background:none;border:1px solid var(--line);color:var(--ink);padding:0 16px;height:44px;display:inline-flex;align-items:center;border-radius:0;font-size:14px;text-decoration:none}
.ghost-btn:hover{border-color:var(--ink)}
.breadcrumb{font-size:13px;color:var(--muted);margin:22px 0 20px}
.breadcrumb a:hover{color:var(--chestnut)}
.breadcrumb span{color:var(--ink-soft)}

.pdp-wrap{padding-bottom:70px}
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.pdp-gallery .pdp-main{border:1px solid var(--line);background:#fff;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}
.pdp-gallery .pdp-main img{width:100%;height:100%;object-fit:contain;padding:18px}
.pdp-thumbs{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.pdp-thumbs img{width:64px;height:64px;object-fit:contain;border:1px solid var(--line);background:#fff;padding:4px;cursor:pointer}
.pdp-thumbs img.active{border-color:var(--chestnut);border-width:2px}
.pdp-info{padding-top:4px}
.pdp-brand{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.pdp-info h1{font-family:Outfit,sans-serif;font-size:28px;font-weight:500;line-height:1.2;margin:0 0 16px;color:var(--ink)}
.pdp-info .m-price{margin-bottom:14px}
.pdp-stock{font-size:13.5px;color:var(--field);margin-bottom:22px}
.pdp-stock.oos{color:var(--muted)}
/* A size sold as a WeatherBeeta back order: on sale, longer ranged date, amber so it reads as a caveat not a fault. */
.pdp-stock.bo,.ci-origin.ci-bo,.sr-origin.sr-bo,.bk-flag--bo{color:#9a5b00;font-weight:600}
.pdp-info .m-variants{margin-bottom:22px}
.pdp-info .vgroup{margin-bottom:16px}
.fit-note{font-size:13px;line-height:1.45;color:var(--ink);background:var(--bone,#f6f1ea);border-left:3px solid var(--chestnut);padding:9px 12px;margin:2px 0 16px;border-radius:0 6px 6px 0}
.fit-note strong{color:var(--chestnut-dk,var(--chestnut))}
.fit-note a{color:var(--chestnut);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.pdp-info .add-btn{max-width:340px}
.pdp-added{margin-top:16px;border:1px solid var(--line);background:var(--bone);padding:16px 18px}
.pdp-added p{margin:0 0 12px;font-weight:500;color:var(--ink)}
.pdp-added-actions{display:flex;gap:10px;flex-wrap:wrap}
.pdp-added-actions .add-btn{width:auto;max-width:none;padding:12px 20px}
.pdp-desc{margin-top:28px;border-top:1px solid var(--line);padding-top:22px}
.pdp-desc h2{font-family:Outfit,sans-serif;font-size:17px;font-weight:600;margin:0 0 12px}

.collection-wrap{padding-bottom:70px}
.collection-head{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:26px}
.collection-head h1{font-family:Outfit,sans-serif;font-size:clamp(24px,3vw,33px);font-weight:500;margin:0}
.collection-wrap .grid a.card{color:inherit;text-decoration:none}

@media(max-width:800px){
  .pdp{grid-template-columns:1fr;gap:26px}
  .pdp-info h1{font-size:23px}
}

/* Product-page detail dropdowns (Premier Equine sections) */
.pdp-acc{margin-top:28px;border-top:1px solid var(--line)}
.acc{border-bottom:1px solid var(--line)}
.acc>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 2px;font-family:Outfit,sans-serif;font-weight:600;font-size:15px;color:var(--ink)}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::after{content:'+';color:var(--muted);font-size:20px;line-height:1}
.acc[open]>summary::after{content:'–'}
.acc-body{padding:0 2px 18px;color:var(--ink-soft);font-size:14.5px;line-height:1.65}
.acc-body p{margin:0 0 10px}
.acc-body p:last-child{margin-bottom:0}
.acc-body ul,.acc-body ol{margin:0 0 10px;padding-left:20px}
.acc-body li{margin-bottom:5px}

/* Quick add-to-basket on cards */
.quick-add{margin-top:12px;width:100%;padding:10px;border:1px solid var(--ink);background:#fff;color:var(--ink);font-family:Outfit,sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s}
.quick-add:hover{background:var(--ink);color:#fff}
.quick-add.qa-oos{border-color:var(--line);color:var(--muted);cursor:not-allowed}
.quick-add.qa-oos:hover{background:#fff;color:var(--muted)}

/* Toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:13px 22px;font-size:14px;z-index:200;opacity:0;visibility:hidden;transition:.25s;max-width:90vw;text-align:center;box-shadow:var(--shadow)}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* Clickable basket + summary items */
.ci-thumb{display:block}
a.ci-title{color:var(--ink);text-decoration:none;display:block}
a.ci-title:hover{color:var(--chestnut)}
a.sr-title{color:var(--ink);text-decoration:none}
a.sr-title:hover{color:var(--chestnut)}

/* Collection page intro copy */
.collection-intro{color:var(--ink-soft);max-width:760px;margin:-8px 0 26px;font-size:15px;line-height:1.6}
/* collection pagination */
.pager{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:44px 0 10px}
.pager-step{padding:10px 18px;border:1px solid var(--line);background:var(--paper);color:var(--ink);
  font-size:13.5px;text-decoration:none}
.pager-step:hover{border-color:var(--chestnut);color:var(--chestnut)}
.pager-step.is-off{opacity:.35;pointer-events:none}
.pager-nums{display:flex;gap:4px;align-items:center}
.pager-num{min-width:38px;padding:10px 6px;text-align:center;border:1px solid transparent;color:var(--ink-soft);
  font-size:13.5px;text-decoration:none}
.pager-num:hover{color:var(--chestnut)}
.pager-num.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pager-gap{color:var(--muted);padding:0 2px}
@media(max-width:520px){ .pager-nums{order:3;width:100%;justify-content:center} }

/* second-level browse strip on collection pages (Saddlery → Saddles, Bits, Reins…) */
.subcats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.subcat{display:inline-flex;align-items:baseline;gap:7px;padding:8px 15px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink-soft);font-size:13.5px;text-decoration:none;border-radius:var(--pill,2px);
  transition:border-color .15s,color .15s}
.subcat:hover{border-color:var(--chestnut);color:var(--chestnut)}
.subcat span{font-size:11.5px;color:var(--muted)}
.subcat.on{background:var(--ink);border-color:var(--ink);color:#fff}
.subcat.on span{color:rgba(255,255,255,.6)}
@media(max-width:640px){
  /* one swipeable row rather than a wall of chips */
  /* The bleed must equal .wrap's padding at this width (16px below 720px), or the strip
     sits proud of the viewport and the whole page scrolls sideways by the difference. */
  .subcats{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-inline:-16px;padding-inline:16px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .subcats::-webkit-scrollbar{display:none}
  .subcat{flex:0 0 auto}
}

/* ============================================================
   ACCOUNT AREA (editorial rebuild — supersedes the legacy
   "Account dashboard" rules further up the file)
   ============================================================ */
.acct-wrap{padding:34px 28px 76px}
.acct-wrap .crumb{font-size:13px;color:var(--muted);margin-bottom:20px}
.acct-wrap .crumb a:hover{color:var(--chestnut)}
.acct-wrap a.inline{color:var(--chestnut);border-bottom:1px solid var(--chestnut)}

/* shared small controls */
.ghost-btn.sm{height:38px;padding:0 14px;font-size:13px}
.text-btn{background:none;border:0;padding:0;font-size:12.5px;color:var(--muted);text-decoration:underline;cursor:pointer}
.text-btn:hover{color:var(--chestnut)}
.text-btn:disabled{opacity:.5;cursor:default}
.pill{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:999px;
  font-family:Outfit,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.pill.is-paid{background:#EDF2EC;color:var(--field)}
.pill.is-pending{background:#FAF2E4;color:#8A6A2B}
.pill.is-sent{background:#EDEAE4;color:var(--ink)}
.pill.is-off{background:#F7EBE7;color:var(--chestnut)}

/* ---------- signed out ---------- */
.acct-gate{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start;padding:10px 0 30px}
.acct-gate[hidden]{display:none}
.gate-card{background:var(--paper);border:1px solid var(--line);padding:40px 42px}
.gate-eyebrow{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--chestnut);margin-bottom:12px}
.gate-card h1{font-family:Outfit,sans-serif;font-size:clamp(28px,4vw,38px);font-weight:500;margin:0 0 12px}
.gate-lead{font-size:16px;color:var(--ink-soft);margin:0 0 26px;max-width:44ch}
.gate-actions{display:flex;gap:12px;flex-wrap:wrap}
.gate-actions .add-btn{width:auto;min-width:170px}
.gate-actions .ghost-btn{height:auto;padding:15px 22px;font-family:Outfit,sans-serif;font-weight:600;font-size:15px}
.gate-alt{margin:24px 0 0;font-size:14px;color:var(--muted)}
.gate-perks{list-style:none;margin:0;padding:0;display:grid;gap:2px;background:var(--line);border:1px solid var(--line)}
.gate-perks li{display:flex;gap:15px;align-items:flex-start;background:var(--bone);padding:20px 22px}
.gate-perks svg{width:22px;height:22px;flex:0 0 auto;stroke:var(--chestnut);fill:none;stroke-width:1.4;margin-top:2px}
.gate-perks strong{display:block;font-family:Outfit,sans-serif;font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:3px}
.gate-perks span{font-size:13.5px;color:var(--ink-soft);line-height:1.5}

/* ---------- signed in: shell ---------- */
.acct-grid{display:grid;grid-template-columns:262px 1fr;gap:44px;align-items:start}
.acct-side,.acct-body{min-width:0}
.acct-grid[hidden]{display:none}
.acct-side{position:sticky;top:20px}
.acct-id{display:flex;align-items:center;gap:13px;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:14px}
.acct-avatar{width:46px;height:46px;flex:0 0 auto;border-radius:50%;background:var(--chestnut);color:#fff;
  display:grid;place-items:center;font-family:Outfit,sans-serif;font-weight:600;font-size:16px;letter-spacing:.02em}
.acct-who{min-width:0}
.acct-who strong{display:block;font-family:Outfit,sans-serif;font-size:16px;font-weight:600;color:var(--ink);line-height:1.25}
.acct-who span{display:block;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.acct-nav{display:flex;flex-direction:column}
.acct-link{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:11px 12px;font-size:14.5px;color:var(--ink-soft);border:0;background:none;border-left:2px solid transparent;cursor:pointer}
.acct-link svg{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.5}
.acct-link:hover{color:var(--ink);background:var(--bone)}
.acct-link.is-on{color:var(--ink);background:var(--bone);border-left-color:var(--chestnut);font-weight:600}
.acct-count{margin-left:auto;font-size:12px;color:var(--muted)}
.acct-out{margin-top:8px;border-top:1px solid var(--line);padding-top:14px;color:var(--muted)}
.acct-help{margin-top:26px;background:var(--bone);border:1px solid var(--line);padding:18px 20px;font-size:13.5px}
.acct-help strong{display:block;font-family:Outfit,sans-serif;font-size:14px;color:var(--ink);margin-bottom:6px}
.acct-help p{margin:0 0 10px;color:var(--ink-soft);line-height:1.5}

/* ---------- panels ---------- */
.acct-panel[hidden]{display:none}
.ap-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:24px}
.ap-head h1{font-family:Outfit,sans-serif;font-size:clamp(24px,3vw,30px);font-weight:500;margin:0}
.ap-sub{margin:0;font-size:14px;color:var(--muted);flex:1 1 240px}
.ap-action{margin-left:auto}
.acct-loading{color:var(--muted);font-size:14px;padding:20px 0}

.acct-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:24px}
.acct-stats[hidden]{display:none}
.acct-stats .stat{background:var(--bone);padding:16px 18px}
.acct-stats span{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.acct-stats strong{font-family:Outfit,sans-serif;font-size:20px;font-weight:600;color:var(--ink)}

.acct-card{background:var(--paper);border:1px solid var(--line);padding:24px 26px;margin-bottom:20px}
.acct-card h2{font-family:Outfit,sans-serif;font-size:17px;font-weight:600;margin:0 0 16px}
.acct-quiet{background:var(--bone)}
.acct-quiet p{margin:0;font-size:14px;color:var(--ink-soft)}
.acct-form .fld{font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:15px}
.acct-form .fld input{height:46px;border:1px solid var(--line);border-radius:0;font-size:15px;color:var(--ink)}
.acct-form .fld input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,18,15,.05)}
.acct-form .fld input:disabled{background:var(--bone);color:var(--muted)}
.acct-form .chk{font-size:14px;color:var(--ink-soft);margin:2px 0 18px}
.acct-form .form-msg{min-height:0;margin:0 0 10px}
.acct-form .form-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.acct-form .add-btn{width:auto;min-width:180px}
.acct-form .ghost-btn{height:49px}
.save-ok{color:var(--field);font-weight:600;font-size:14px}

/* ---------- orders ---------- */
.ord-list{display:flex;flex-direction:column;gap:18px}
.ord{border:1px solid var(--line);background:var(--paper)}
.ord-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 22px;background:var(--bone);border-bottom:1px solid var(--line)}
.ord-facts{display:flex;gap:34px;flex-wrap:wrap;flex:1}
.ord-fact span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.ord-fact strong{font-family:Outfit,sans-serif;font-size:15px;font-weight:600;color:var(--ink)}
.ord-items{padding:6px 22px}
.ord-item{display:grid;grid-template-columns:62px 1fr auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.ord-item:last-child{border-bottom:0}
.oi-thumb{display:block;width:62px;height:62px;border:1px solid var(--line);background:#fff}
.oi-thumb img{width:100%;height:100%;object-fit:contain;padding:4px}
.oi-info{min-width:0}
.oi-title{display:block;font-size:14.5px;font-weight:500;color:var(--ink);line-height:1.35;overflow-wrap:anywhere}
a.oi-title:hover{color:var(--chestnut)}
.oi-var{font-size:12.5px;color:var(--muted);margin-top:3px}
.oi-qty{font-size:12.5px;color:var(--ink-soft);margin-top:5px}
.oi-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.oi-line{font-family:Outfit,sans-serif;font-size:15px;font-weight:600;color:var(--ink)}
.ord-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:15px 22px;border-top:1px solid var(--line);background:#fdfcfb}
.ord-ship{font-size:13px;color:var(--muted);flex:1 1 240px;overflow-wrap:anywhere}
.ord-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- addresses ---------- */
.addr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin:0}
.addr-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:0;padding:20px 22px;font-size:14px;line-height:1.6}
.addr-card.is-default{border-color:var(--chestnut)}
.addr-card strong{display:block;font-family:Outfit,sans-serif;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:8px;padding-right:70px}
.addr-lines{color:var(--ink-soft)}
.addr-default{position:absolute;top:16px;right:18px;background:none;border:1px solid var(--chestnut);color:var(--chestnut);
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:0}
.addr-card .del-addr{margin-top:12px}

/* ---------- empty states ---------- */
.acct-empty{grid-column:1/-1;text-align:center;border:1px dashed var(--line);background:var(--bone);padding:52px 26px}
.acct-empty svg{width:34px;height:34px;stroke:var(--muted);fill:none;stroke-width:1.2;margin:0 auto 14px;display:block}
.acct-empty h2{font-family:Outfit,sans-serif;font-size:19px;font-weight:500;margin:0 0 8px}
.acct-empty p{margin:0 auto 20px;max-width:44ch;font-size:14.5px;color:var(--ink-soft)}
.acct-empty .add-btn{width:auto;display:inline-block;min-width:200px;text-decoration:none}

@media(max-width:1000px){
  .acct-grid{grid-template-columns:1fr;gap:26px}
  .acct-side{position:static}
  .acct-id{padding-bottom:16px}
  .acct-nav{flex-direction:row;overflow-x:auto;border-bottom:1px solid var(--line);gap:2px;-webkit-overflow-scrolling:touch}
  .acct-nav::-webkit-scrollbar{display:none}
  .acct-link{width:auto;white-space:nowrap;border-left:0;border-bottom:2px solid transparent;padding:12px 14px}
  .acct-link.is-on{background:none;border-left:0;border-bottom-color:var(--chestnut)}
  .acct-out{margin-top:0;border-top:0;padding-top:12px;margin-left:auto}
  .acct-help{display:none}
}
@media(max-width:820px){
  .acct-gate{grid-template-columns:1fr;gap:24px}
  .gate-card{padding:30px 26px}
  .acct-stats{grid-template-columns:1fr;}
  .acct-stats .stat{display:flex;justify-content:space-between;align-items:baseline}
  .acct-stats span{margin-bottom:0}
}
@media(max-width:560px){
  .ord-facts{gap:20px}
  .ord-item{grid-template-columns:54px 1fr;row-gap:10px}
  .oi-thumb{width:54px;height:54px}
  .oi-right{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between;width:100%}
  .ord-actions{width:100%}
  .ord-actions .ghost-btn{flex:1;justify-content:center}
  .acct-form .add-btn,.acct-form .ghost-btn{width:100%;justify-content:center}
}
.acct-form form{max-width:580px}

/* ============================================================
   WISHLIST PAGE (/wishlist)
   ============================================================ */
.wish-wrap{padding:34px 28px 76px}
.wish-wrap .crumb{font-size:13px;color:var(--muted);margin-bottom:20px}
.wish-wrap .crumb a:hover{color:var(--chestnut)}

.wish-head{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:22px}
.wish-head h1{font-family:Outfit,sans-serif;font-size:clamp(26px,3.4vw,34px);font-weight:500;margin:0}
.wish-sub{margin:6px 0 0;font-size:14.5px;color:var(--muted)}
.wish-sub strong{color:var(--ink);font-weight:600}
.wish-tools{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wish-tools[hidden]{display:none}
.wish-sort{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.wish-sort select{height:38px;border:1px solid var(--line);background:#fff;padding:0 10px;font:inherit;font-size:13.5px;color:var(--ink);border-radius:0}

.wish-banner{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--bone);border:1px solid var(--line);border-left:3px solid var(--chestnut);padding:18px 22px;margin-bottom:22px}
.wish-banner[hidden]{display:none}
.wish-banner strong{display:block;font-family:Outfit,sans-serif;font-size:15px;color:var(--ink);margin-bottom:3px}
.wish-banner span{font-size:13.5px;color:var(--ink-soft)}
.wish-banner .add-btn{width:auto;margin-left:auto;white-space:nowrap}

.wish-bulk{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-soft);margin-bottom:24px}
.wish-bulk[hidden]{display:none}
.wish-bulk .ghost-btn{margin-left:auto}
.wish-bulk .ghost-btn:disabled{opacity:.45;cursor:not-allowed}

.wish-grid[hidden]{display:none}
.wcard{position:relative;display:flex;flex-direction:column}
.wcard .wc-body{display:flex;flex-direction:column;flex:1}
.wcard .wc-img{position:relative;aspect-ratio:1/1;overflow:hidden;background:#fff;border:1px solid var(--line);margin-bottom:14px}
.wcard .wc-img img{width:100%;height:100%;object-fit:contain;padding:12px;transition:transform .55s}
.wcard:hover .wc-img img{transform:scale(1.04)}
.wcard.is-oos .wc-img img{opacity:.55}
.wc-x{position:absolute;top:10px;right:10px;z-index:3;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.94);border:1px solid var(--line);display:grid;place-items:center;padding:0;cursor:pointer}
.wc-x svg{width:15px;height:15px;stroke:var(--ink);fill:none;stroke-width:1.7}
.wc-x:hover{border-color:var(--chestnut)}
.wc-x:hover svg{stroke:var(--chestnut)}
.wcard .flag-low{right:52px}
.wc-brand{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.wc-title{font-size:15px;font-weight:500;line-height:1.35;color:var(--ink);margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:41px}
a.wc-title:hover{color:var(--chestnut)}
.wc-price{display:flex;align-items:baseline;gap:10px}
.wc-price .now{font-family:Outfit,sans-serif;font-size:18px;font-weight:600;color:var(--ink)}
.wc-price .rrp{font-size:13.5px;color:var(--muted);text-decoration:line-through}
.wc-drop{margin-top:7px;font-size:12.5px;font-weight:600;color:var(--field)}
.wc-stock{margin-top:7px;font-size:12.5px;color:var(--ink-soft)}
.wcard.is-oos .wc-stock{color:var(--muted)}
.wcard .quick-add{margin-top:auto;display:block;text-align:center;text-decoration:none}
.wc-stock{margin-bottom:12px}
.wcard .quick-add.qa-oos{pointer-events:auto}
.wc-meta{margin-top:9px;font-size:11.5px;color:var(--muted)}

.wish-empty{text-align:center;border:1px dashed var(--line);background:var(--bone);padding:64px 26px}
.wish-empty[hidden]{display:none}
.wish-empty svg{width:40px;height:40px;stroke:var(--chestnut);fill:none;stroke-width:1.1;margin:0 auto 16px;display:block}
.wish-empty h2{font-family:Outfit,sans-serif;font-size:22px;font-weight:500;margin:0 0 10px}
.wish-empty p{margin:0 auto 22px;max-width:46ch;font-size:15px;color:var(--ink-soft)}
.wish-empty .add-btn{width:auto;display:inline-block;min-width:220px;text-decoration:none}
.wish-suggest{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:center}
.wish-suggest span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.wish-suggest a{border:1px solid var(--line);background:#fff;padding:8px 14px;font-size:13.5px;color:var(--ink-soft)}
.wish-suggest a:hover{border-color:var(--chestnut);color:var(--chestnut)}

.toast-action{margin-left:16px;background:none;border:0;padding:0;color:#E9A184;font-weight:600;
  font-size:13.5px;text-decoration:underline;cursor:pointer}
.toast-action:hover{color:#fff}

@media(max-width:1100px){ .wish-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:820px){
  .wish-grid{grid-template-columns:repeat(2,1fr)}
  .wish-tools{margin-left:0;width:100%}
  .wish-sort{margin-right:auto}
  .wish-bulk .ghost-btn{margin-left:0;width:100%;justify-content:center}
  .wish-banner .add-btn{margin-left:0;width:100%;justify-content:center}
}

/* ---- auth modal: forgotten-password sub-view ---- */
.auth-link{display:block;width:100%;margin-top:14px;background:none;border:0;padding:0;
  font-size:13.5px;color:var(--ink-soft);text-decoration:underline;cursor:pointer;text-align:center}
.auth-link:hover{color:var(--chestnut)}
.auth-intro{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin:0 0 16px}
.auth-ok{font-size:13.5px;color:var(--field);background:#EDF2EC;padding:10px 12px;border-radius:8px;margin:4px 0 12px}

/* ---- reset password page ---- */
.reset-wrap{padding:60px 28px 90px;display:flex;justify-content:center}
.reset-card{background:var(--paper);border:1px solid var(--line);padding:40px 42px;max-width:520px;width:100%}
.reset-card h1{font-family:Outfit,sans-serif;font-size:clamp(24px,3.4vw,30px);font-weight:500;margin:0 0 12px}
.reset-card .gate-lead{font-size:15px;margin-bottom:24px}
.reset-card .fld{font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:16px}
.reset-card .fld input{height:46px;border:1px solid var(--line);border-radius:0;font-size:15px;color:var(--ink)}
.reset-card .fld input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,18,15,.05)}
.reset-card .add-btn{width:100%;justify-content:center;text-align:center;text-decoration:none;display:block}
.reset-card .form-msg{min-height:0;margin:0 0 12px}

/* ---- parcel tracking (account order cards) ---- */
.ord-track{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 22px;
  background:#FBF9F7;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-soft)}
.ord-track svg{width:18px;height:18px;flex:0 0 auto;stroke:var(--chestnut);fill:none;stroke-width:1.5}
.ord-track strong{color:var(--ink);font-weight:600}
.ord-track .num{letter-spacing:.02em}
.ord-track .ghost-btn{margin-left:auto}
@media(max-width:560px){ .ord-track .ghost-btn{margin-left:0;width:100%;justify-content:center} }

/* ---- tracking on the public /track result ---- */
.track-parcel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 4px;padding:14px 16px;
  background:var(--bone);border:1px solid var(--line);font-size:14px}
.track-parcel svg{width:18px;height:18px;stroke:var(--chestnut);fill:none;stroke-width:1.5;flex:0 0 auto}
.track-parcel strong{color:var(--ink)}
.track-parcel a{margin-left:auto}

/* ============================================================
   PUBLIC INVOICE PAGE (/invoice/<token>)
   ============================================================ */
.inv-wrap{max-width:1060px;padding:40px 28px 80px}
.inv-loading,.inv-dead{color:var(--muted);font-size:15px;padding:40px 0}
.inv-dead a.inline{color:var(--chestnut);border-bottom:1px solid var(--chestnut)}
#invBody{display:grid;grid-template-columns:1fr 360px;gap:36px;align-items:start}

.inv-doc{background:var(--paper);border:1px solid var(--line);padding:38px 40px}
.inv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:24px}
.inv-head h1{font-family:Outfit,sans-serif;font-size:clamp(23px,3vw,29px);font-weight:500;margin:0}
.inv-dates{margin:8px 0 0;font-size:13.5px;color:var(--muted)}
.inv-dates strong{color:var(--ink)}

.inv-meta{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:30px;font-size:14px;color:var(--ink-soft);line-height:1.6}
.inv-meta span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.inv-meta strong{display:block;font-family:Outfit,sans-serif;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:2px}

.inv-table{width:100%;border-collapse:collapse;font-size:14.5px}
.inv-table th{text-align:left;font-family:Outfit,sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding:0 0 10px;border-bottom:1px solid var(--line)}
.inv-table td{padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:top}
.inv-table td:first-child{color:var(--ink);padding-right:16px}
.inv-table .r{text-align:right;white-space:nowrap;padding-left:16px}

.inv-totals{margin-left:auto;width:min(300px,100%);padding-top:16px}
.inv-line{display:flex;justify-content:space-between;gap:20px;padding:7px 0;font-size:14.5px;color:var(--ink-soft)}
.inv-line.is-total{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;
  font-family:Outfit,sans-serif;font-size:20px;font-weight:600;color:var(--ink)}
.inv-notes{margin:30px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-soft);white-space:pre-wrap;line-height:1.6}

.inv-pay{position:sticky;top:20px}
.inv-card{background:var(--bone);border:1px solid var(--line);padding:26px 26px 24px}
.inv-card h2{font-family:Outfit,sans-serif;font-size:17px;font-weight:600;margin:0 0 16px}
.inv-card p{font-size:14px;color:var(--ink-soft);line-height:1.6}
.inv-due{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.inv-due span{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.inv-due strong{font-family:Outfit,sans-serif;font-size:26px;font-weight:600;color:var(--ink)}
.inv-card #payment-element{margin-bottom:16px}
.inv-card .add-btn{width:100%;justify-content:center}
.inv-secure{font-size:12px;color:var(--muted);text-align:center;margin:12px 0 0}
.inv-card .ghost-btn,.inv-paid .ghost-btn{width:100%;justify-content:center;margin-top:14px}
.inv-card .form-msg{min-height:0;margin:0 0 10px}

.inv-paid{background:#EDF2EC;border:1px solid #CFE0CC;padding:30px 26px;text-align:center}
.paid-tick{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;background:var(--field);color:#fff;
  display:grid;place-items:center;font-size:26px}
.inv-paid h2{font-family:Outfit,sans-serif;font-size:19px;font-weight:600;margin:0 0 8px;color:var(--ink)}
.inv-paid p{font-size:14px;color:var(--ink-soft);margin:0}

@media(max-width:900px){
  #invBody{grid-template-columns:1fr;gap:24px}
  .inv-pay{position:static;order:-1}
  .inv-doc{padding:28px 24px}
  .inv-meta{grid-template-columns:1fr;gap:18px}
}

/* Print = the PDF. Drop the site chrome and the payment column. */
@media print{
  .inv-chrome,.inv-pay,.promo,.util,.head,.nav{display:none!important}
  body{background:#fff}
  .inv-wrap{padding:0;max-width:none}
  #invBody{display:block}
  .inv-doc{border:0;padding:0}
  .inv-table td,.inv-table th{border-color:#ddd}
  .pill{border:1px solid #ccc}
}

/* ---- supplier origin: items sent direct from the Italian supplier ---- */
.card-origin{margin-left:8px;padding:1px 6px;border:1px solid var(--line);border-radius:2px;
  font-size:9.5px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.m-origin{display:block;margin-top:6px;font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--chestnut)}
.ci-origin,.sr-origin{font-size:11.5px;color:var(--chestnut);margin-top:3px}
.cs-ama{margin-top:10px;font-size:12px;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:9px}
.ship-why{font-size:11px;color:var(--muted);display:block}

.pdp-origin{display:flex;gap:12px;align-items:flex-start;background:var(--bone);border:1px solid var(--line);
  border-left:3px solid var(--chestnut);padding:14px 16px;margin:0 0 22px;font-size:13.5px;line-height:1.55}
.pdp-origin svg{width:20px;height:20px;flex:0 0 auto;stroke:var(--chestnut);fill:none;stroke-width:1.5;margin-top:1px}
.pdp-origin strong{display:block;color:var(--ink);font-family:Outfit,sans-serif;font-size:14px;margin-bottom:3px}
.pdp-origin span{color:var(--ink-soft)}

/* promo bar footnote — the £100 free-delivery offer covers UK stock only */
.promo-note{color:inherit;text-decoration:none;display:inline-flex;align-items:baseline;gap:5px;margin-left:2px}
.promo-note em{font-style:normal;font-size:10.5px;letter-spacing:.05em;opacity:.78;border-bottom:1px solid rgba(255,255,255,.45)}
.promo-note:hover em{opacity:1}
.promo-fine{font-size:11px;opacity:.75}
@media(max-width:520px){ .promo-note em{display:none} }   /* keep the * only when space is tight */

/* ---- Checkout discount code ---- */
.summary-line.discount-line span:last-child{color:#2f7933;font-weight:600}
.summary-line.discount-line span:first-child{font-size:12.5px}
.disc-code{margin:14px 0 4px;padding-top:14px;border-top:1px solid var(--line,#e6ded2)}
.disc-label{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted,#6d6560);margin-bottom:7px}
.disc-row{display:flex;gap:8px}
.disc-row input{flex:1;min-width:0;padding:10px 11px;border:1px solid var(--line,#c9cccf);border-radius:8px;
  font:inherit;font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.disc-row input:focus{outline:2px solid var(--accent,#704a33);outline-offset:-1px;border-color:transparent}
.disc-btn{flex:0 0 auto;padding:10px 16px;border:1px solid var(--ink,#2b1d14);border-radius:8px;
  background:var(--ink,#2b1d14);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.disc-btn:hover{background:var(--accent,#704a33);border-color:var(--accent,#704a33)}
.disc-btn:disabled{opacity:.55;cursor:default}
.disc-msg{margin:8px 0 0;font-size:12.5px;color:#2f7933}
.disc-msg.is-err{color:var(--red,#9e5b3a)}

/* ---- Load more ---- */
/* Replaces infinite scroll: products load only when asked, so the footer is always
   reachable instead of retreating as new rows append. */
.more-wrap{display:flex;flex-direction:column;align-items:center;gap:9px;padding:34px 0 8px}
.more-btn{padding:13px 30px;border:1px solid var(--ink,#2b1d14);border-radius:999px;background:transparent;
  font:inherit;font-size:14px;font-weight:600;color:var(--ink,#2b1d14);cursor:pointer;transition:background .15s,color .15s}
.more-btn:hover{background:var(--ink,#2b1d14);color:#fff}
.more-count{margin:0;font-size:12.5px;color:var(--muted,#6d6560)}

/* ============================================================
   CHECKOUT & ORDER CONFIRMATION
   These two pages had been left on the old generic panel styling —
   Outfit headings, drop shadows, rounded grey boxes — while the rest
   of the shop moved to Cormorant/chestnut/hairline. This brings them
   back onto the storefront's own type and palette. Structure and every
   id are untouched; checkout.js drives all of it.
   ============================================================ */

/* ---- page furniture ---- */
.checkout-wrap{max-width:1060px;padding:34px 0 80px}
.checkout-wrap .page-title{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;
  font-size:clamp(32px,3.6vw,44px);line-height:1.1;letter-spacing:-.005em;
  color:var(--ink);margin:4px 0 6px;
}
.checkout-lede{margin:0 0 28px;color:var(--muted);font-size:14.5px}
.checkout-grid{gap:48px}

/* ---- steps ---- */
/* Contact -> Delivery -> Payment is a genuine sequence, so it's numbered.
   The chip doubles as the progress cue on a page with no other landmarks. */
.checkout-main .panel{
  background:var(--paper);border:1px solid var(--line);border-radius:0;
  box-shadow:none;padding:26px 28px;margin-bottom:18px;
}
.checkout-main .panel h2,
.complete-grid .panel h2{
  display:flex;align-items:center;gap:12px;margin:0 0 20px;
  font-family:Outfit,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink);
}
.step-n{
  width:24px;height:24px;flex:0 0 24px;border-radius:50%;
  background:var(--ink);color:#fff;display:grid;place-items:center;
  font-size:11px;font-weight:600;letter-spacing:0;
}

/* ---- fields ---- */
.checkout-wrap .fld{
  display:block;margin-bottom:16px;
  font-family:Outfit,sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.checkout-wrap .fld .hint{text-transform:none;letter-spacing:0;font-weight:400;font-size:11.5px}
.checkout-wrap .fld input,.checkout-wrap .addr-select{
  height:50px;margin-top:7px;padding:0 14px;border:1px solid var(--line);border-radius:0;
  background:var(--paper);font-family:Inter,sans-serif;font-size:15px;font-weight:400;
  color:var(--ink);transition:border-color .15s,box-shadow .15s;
}
.checkout-wrap .fld input::placeholder{color:#B5AEA4}
.checkout-wrap .fld input:focus,.checkout-wrap .addr-select:focus{
  outline:none;border-color:var(--chestnut);box-shadow:0 0 0 3px rgba(156,59,34,.10);
}
.checkout-wrap .fld-row{gap:16px}

.checkout-wrap .acct-prompt{
  background:var(--bone);border:1px solid var(--line);border-left:2px solid var(--chestnut);
  padding:15px 20px;margin-bottom:18px;font-size:14px;color:var(--ink-soft);
}
.checkout-wrap .acct-prompt .link-btn{color:var(--chestnut);text-underline-offset:2px;font-weight:600}

.checkout-wrap .pay-note{
  background:var(--bone);border-radius:0;padding:12px 14px;font-size:13px;color:var(--muted);
}
.checkout-wrap .checkout-err{
  background:#FBF0EE;border:1px solid #E8C9C1;border-left:2px solid var(--error);
  border-radius:0;padding:12px 14px;margin:8px 0 14px;font-size:13.5px;color:#8E2A14;
}
.checkout-wrap .place-btn{
  height:56px;margin-top:10px;border-radius:0;
  font-family:Outfit,sans-serif;font-size:16px;font-weight:600;letter-spacing:.02em;
}

/* Reassurance sits under the button, where the hesitation actually happens. */
.checkout-trust{list-style:none;display:grid;gap:11px;margin:18px 0 0;padding:18px 0 0;border-top:1px solid var(--line)}
.checkout-trust li{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--muted);line-height:1.45}
.checkout-trust svg{width:14px;height:14px;flex:0 0 14px;margin-top:2px;fill:none;stroke:var(--field);stroke-width:1.8}

/* ---- order summary ---- */
.checkout-summary{position:sticky;top:24px}
.checkout-summary .summary-panel{
  background:var(--bone);border:1px solid var(--line);border-top:2px solid var(--chestnut);
  border-radius:0;box-shadow:none;padding:24px 26px;
}
.checkout-summary h2{
  font-family:Outfit,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink);margin:0 0 18px;
}
.checkout-summary .summary-line.total{
  border-top:1px solid var(--line);margin-top:8px;padding-top:16px;
  font-family:Outfit,sans-serif;font-size:22px;font-weight:600;color:var(--ink);
}
.checkout-summary .sr-thumb img{border-radius:0;background:var(--paper)}
.checkout-summary .sr-badge{background:var(--ink)}

.checkout-wrap .disc-label{
  font-family:Outfit,sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.checkout-wrap .disc-row input{height:44px;border-radius:0;border:1px solid var(--line);background:var(--paper);font-size:14px}
.checkout-wrap .disc-row input:focus{outline:none;border-color:var(--chestnut)}
.checkout-wrap .disc-btn{height:44px;border-radius:0;background:var(--ink);color:#fff;font-family:Outfit,sans-serif;font-weight:600;font-size:13px;padding:0 18px}
.checkout-wrap .disc-btn:hover{background:var(--chestnut)}

/* ============================================================
   ORDER CONFIRMED
   ============================================================ */
.complete-wrap{max-width:1000px;padding:46px 0 84px}
.complete-hero{text-align:center;margin-bottom:42px}
.conf-check{
  width:58px;height:58px;margin:0 auto;border-radius:50%;
  background:rgba(63,93,67,.10);color:var(--field);
  display:grid;place-items:center;font-size:26px;
}
.complete-hero h1{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;
  font-size:clamp(36px,4.4vw,52px);line-height:1.05;letter-spacing:-.005em;
  color:var(--ink);margin:16px 0 12px;
}
.complete-sub{max-width:540px;margin:0 auto 26px;font-size:15px;line-height:1.65;color:var(--muted)}
.complete-sub strong{color:var(--ink-soft);font-weight:500}
/* A dashed chestnut box read like a discount coupon; the reference is a thing to
   quote back to us, so it's set as a plain, highly legible record instead. */
.ref-badge{
  display:inline-flex;flex-direction:column;align-items:center;gap:6px;
  background:var(--bone);border:1px solid var(--line);border-radius:0;padding:14px 36px;
  font-family:Outfit,sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.ref-badge strong{
  font-family:Outfit,sans-serif;font-size:21px;font-weight:600;
  letter-spacing:.09em;color:var(--ink);text-transform:none;
}

.complete-grid{grid-template-columns:1.25fr 1fr;gap:24px}
.complete-grid .panel{
  background:var(--paper);border:1px solid var(--line);border-radius:0;
  box-shadow:none;padding:24px 26px;margin-bottom:20px;
}
.complete-grid .summary-line.total{
  border-top:1px solid var(--line);margin-top:8px;padding-top:16px;
  font-family:Outfit,sans-serif;font-size:21px;font-weight:600;color:var(--ink);
}
.ship-to{font-style:normal;font-size:14.5px;line-height:1.75;color:var(--ink-soft)}

/* A real timeline: three stages with the one already reached filled in. */
.next-steps ol{list-style:none;margin:0;padding:0}
.next-steps li{position:relative;padding:0 0 22px 30px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.next-steps li:last-child{padding-bottom:0}
.next-steps li::before{
  content:"";position:absolute;left:0;top:3px;width:11px;height:11px;border-radius:50%;
  border:1.5px solid var(--line);background:var(--paper);
}
.next-steps li::after{content:"";position:absolute;left:5px;top:17px;bottom:0;width:1px;background:var(--line)}
.next-steps li:last-child::after{display:none}
.next-steps li.done::before{background:var(--field);border-color:var(--field)}
.next-steps li strong{
  display:block;margin-bottom:2px;font-family:Outfit,sans-serif;
  font-size:13.5px;font-weight:600;color:var(--ink);
}
.complete-actions{margin-top:34px;gap:22px}
.complete-actions .add-btn{border-radius:0;height:52px;display:inline-flex;align-items:center;justify-content:center;font-family:Outfit,sans-serif;font-weight:600}
.complete-actions .link-btn{color:var(--chestnut);font-weight:600;text-underline-offset:3px}

@media(max-width:840px){
  .checkout-wrap .page-title{font-size:30px}
  .checkout-main .panel,.complete-grid .panel{padding:22px 20px}
  .checkout-summary{position:static;order:-1}
}
@media(max-width:760px){
  .complete-grid{grid-template-columns:1fr}
  .complete-hero h1{font-size:34px}
  .ref-badge{padding:13px 26px}
}

/* Outlet flash — a supplier markdown, not our standard 15%, so it reads differently
   from the everyday saving badge and the percentage actually varies. */
.save.is-outlet{background:var(--ink);color:#fff;letter-spacing:.06em;font-size:11px;padding:5px 9px}
.nav-link.nav-sale{color:var(--chestnut);font-weight:600}
.outlet-note{display:inline-flex;align-items:center;gap:7px;margin:10px 0 0;padding:8px 12px;
  background:var(--bone);border-left:2px solid var(--ink);font-size:12.5px;color:var(--ink-soft)}

/* Back-in-stock capture. Sits where the Add to Basket button would be, because that's
   where the intent already is — the visitor has chosen a variant and hit a wall. */
.restock{margin-top:14px;padding:16px 18px;background:var(--bone);border:1px solid var(--line)}
.restock[hidden]{display:none}
.restock-lede{margin:0 0 11px;font-family:Outfit,sans-serif;font-size:14px;font-weight:600;color:var(--ink)}
.restock-row{display:flex;gap:8px}
.restock-row input{flex:1;min-width:0;height:44px;padding:0 12px;border:1px solid var(--line);
  border-radius:0;background:var(--paper);font-family:Inter,sans-serif;font-size:14.5px;color:var(--ink)}
.restock-row input:focus{outline:none;border-color:var(--chestnut);box-shadow:0 0 0 3px rgba(156,59,34,.10)}
.restock-btn{height:44px;padding:0 18px;border:0;border-radius:0;background:var(--ink);color:#fff;
  font-family:Outfit,sans-serif;font-weight:600;font-size:13.5px;white-space:nowrap;cursor:pointer}
.restock-btn:hover:not(:disabled){background:var(--chestnut)}
.restock-btn:disabled{opacity:.55;cursor:default}
.restock-msg{margin:10px 0 0;font-size:13px}
.restock-msg.is-ok{color:var(--field)}
.restock-msg.is-err{color:var(--error)}
.restock-fine{margin:9px 0 0;font-size:11.5px;color:var(--muted)}

/* ---------- Brand directory ----------
   No supplier logos are available, so recognition comes from a real product shot
   plus the name set properly. A–Z because someone here has a maker in mind. */
.brand-jump{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 30px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.brand-jump a{display:grid;place-items:center;min-width:30px;height:30px;padding:0 6px;
  font-family:Outfit,sans-serif;font-size:13px;font-weight:600;color:var(--ink-soft);border:1px solid var(--line)}
.brand-jump a:hover{border-color:var(--chestnut);color:var(--chestnut)}
.brand-group{margin-bottom:34px;scroll-margin-top:80px}
.brand-letter{font-family:"Cormorant Garamond",Georgia,serif;font-size:26px;font-weight:600;
  color:var(--chestnut);margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line);scroll-margin-top:80px}
.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.brand-card{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);
  background:var(--paper);transition:border-color .15s,transform .15s}
.brand-card:hover{border-color:var(--chestnut);transform:translateY(-1px)}
.brand-shot{flex:0 0 52px;width:52px;height:52px;display:grid;place-items:center;background:var(--bone);overflow:hidden}
.brand-shot img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.brand-name{font-family:Outfit,sans-serif;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.25}
.brand-meta{min-width:0}
.brand-count{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.brand-count em{font-style:normal;color:var(--chestnut);font-weight:600}
@media(max-width:600px){ .brand-grid{grid-template-columns:1fr 1fr;gap:12px}
  .brand-card{flex-direction:column;align-items:flex-start;gap:9px} }

/* ============================================================
   GIFT CARDS
   ============================================================ */
.gc-wrap{padding:22px 0 64px}
.gc-hero{
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  padding:26px 0 44px;border-bottom:1px solid var(--line);margin-bottom:36px;
}
.gc-eyebrow{
  display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--chestnut);font-weight:600;margin-bottom:14px;
}
.gc-hero h1{font-size:clamp(30px,4.4vw,48px);line-height:1.04;margin-bottom:16px}
.gc-lead{font-size:17px;line-height:1.6;color:var(--ink-soft);margin:0 0 22px;max-width:46ch}
.gc-points{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.gc-points li{position:relative;padding-left:26px;font-size:14.5px;color:var(--ink-soft)}
.gc-points li::before{
  content:"";position:absolute;left:0;top:.5em;width:12px;height:6px;
  border-left:1.5px solid var(--chestnut);border-bottom:1.5px solid var(--chestnut);
  transform:rotate(-45deg);
}
.gc-hero-art{display:flex;justify-content:center}
.gc-card-visual{position:relative;width:100%;max-width:420px;filter:drop-shadow(0 18px 40px rgba(20,18,15,.22))}
.gc-card-visual img{display:block;width:100%;height:auto;border-radius:14px}
/* The amount is live text over the artwork so it tracks the picker without redrawing the SVG. */
.gc-card-amount{
  position:absolute;right:8.5%;bottom:12%;font-family:Outfit,Inter,sans-serif;
  font-size:clamp(30px,5.2vw,46px);font-weight:300;color:#F7F4EF;letter-spacing:-.02em;
  text-shadow:0 2px 14px rgba(0,0,0,.4);
}

.gc-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:26px;align-items:start}
.gc-buy h2,.gc-side h2{font-size:19px;margin-bottom:4px}
.gc-fieldset{border:0;padding:0;margin:0 0 26px}
.gc-fieldset legend{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:600;padding:0;margin-bottom:12px;
}
.gc-amounts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.gc-amount{
  flex:1 1 84px;min-width:84px;padding:13px 8px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);cursor:pointer;
  font-family:Outfit,Inter,sans-serif;font-size:17px;font-weight:500;color:var(--ink);
  transition:border-color .14s,background .14s,box-shadow .14s;
}
.gc-amount:hover{border-color:var(--ink-soft)}
.gc-amount.on{
  border-color:var(--chestnut);background:#FCF6F4;color:var(--chestnut);
  box-shadow:inset 0 0 0 1px var(--chestnut);
}
.gc-custom{margin:0}
.gc-input-money{display:flex;align-items:center;gap:7px}
.gc-input-money>span{font-size:16px;color:var(--muted)}
.gc-input-money input{width:120px}
.gc-seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.gc-seg button{
  padding:9px 16px;background:var(--paper);border:0;cursor:pointer;
  font-family:inherit;font-size:13.5px;color:var(--ink-soft);
}
.gc-seg button+button{border-left:1px solid var(--line)}
.gc-seg button.on{background:var(--ink);color:#fff}
.gc-note{font-size:13.5px;color:var(--muted);margin:0;line-height:1.55}
.gc-err{
  margin:0 0 14px;padding:10px 13px;background:#FCF2F0;border-left:2px solid var(--error);
  font-size:13.5px;color:#8E2A16;
}
.gc-fine{font-size:12.5px;color:var(--muted);margin:12px 0 0;text-align:center}

.gc-side{display:grid;gap:18px}
.gc-sub{font-size:13.5px;color:var(--muted);margin:0 0 14px}
.gc-bal-result{margin-top:14px;padding:16px;border-radius:var(--r);text-align:center}
.gc-bal-result.is-ok{background:#F4F7F4;border:1px solid #D7E3D8}
.gc-bal-result.is-err{background:#FCF2F0;border:1px solid #F0D8D2;color:#8E2A16;font-size:13.5px;text-align:left}
.gc-bal-amount{font-family:Outfit,Inter,sans-serif;font-size:34px;font-weight:300;color:var(--field);line-height:1.1}
.gc-bal-code{font-size:13px;letter-spacing:.1em;color:var(--ink);margin-top:4px}
.gc-bal-sub{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.5}
.gc-steps{margin:0;padding:0 0 0 20px;display:grid;gap:13px}
.gc-steps li{font-size:13.5px;color:var(--muted);line-height:1.5}
.gc-steps li strong{display:block;color:var(--ink);font-size:14.5px;font-weight:600;margin-bottom:1px}

.gc-faq{margin-top:52px;padding-top:34px;border-top:1px solid var(--line)}
.gc-faq h2{font-size:22px;margin-bottom:22px}
.gc-faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px 34px}
.gc-faq-grid h3{font-size:15px;margin-bottom:6px}
.gc-faq-grid p{font-size:14px;line-height:1.6;color:var(--ink-soft);margin:0}

@media (max-width:900px){
  .gc-hero{grid-template-columns:1fr;gap:30px;padding-bottom:32px}
  .gc-hero-art{order:-1}
  .gc-grid{grid-template-columns:1fr}
}

/* ---- Gift card at checkout ---- */
.summary-line.gift-line span:last-child{color:var(--field);font-weight:600}
.gift-left{font-size:12.5px;color:var(--field);margin:8px 0 0;text-align:right}
.pay-covered{
  padding:14px 16px;background:#F4F7F4;border:1px solid #D7E3D8;border-radius:var(--r);
  display:grid;gap:3px;
}
.pay-covered strong{color:var(--field);font-size:15px}
.pay-covered span{font-size:13.5px;color:var(--ink-soft)}
.digital-note{
  display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:12px 15px;
  background:var(--bone);border-left:2px solid var(--chestnut);font-size:13.5px;color:var(--ink-soft);
}
.digital-note svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--chestnut);stroke-width:1.5}

/* ---- Product page: save to wishlist beside Add to Basket ---- */
.pdp-actions{display:flex;gap:10px;align-items:stretch}
.pdp-actions .add-btn{flex:1;margin:0}
.wish-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  flex:0 0 auto;padding:0 18px;min-height:52px;cursor:pointer;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);
  transition:border-color .15s,color .15s,background .15s;
}
.wish-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;transition:fill .15s}
.wish-btn:hover{border-color:var(--chestnut);color:var(--chestnut)}
.wish-btn.on{border-color:var(--chestnut);color:var(--chestnut);background:#FCF6F4}
.wish-btn.on svg{fill:var(--chestnut)}
@media (max-width:520px){
  .pdp-actions{flex-wrap:wrap}
  .pdp-actions .add-btn{flex:1 1 100%}
  .wish-btn{flex:1 1 100%}
}

/* ============================================================
   SHOP BY CATEGORY — icon tiles
   Replaces the six photo cards: every category fits, so nothing hides
   behind a "more" tile.
   ============================================================ */
.cat-cards{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
.cat-tile{
  display:flex;align-items:center;gap:14px;
  padding:16px 16px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;color:var(--ink);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.cat-tile:hover{
  border-color:var(--ink);
  box-shadow:0 1px 2px rgba(20,18,15,.04),0 6px 18px rgba(20,18,15,.06);
}
.cat-ico{
  width:34px;height:34px;flex:none;color:var(--ink);
  transition:color .15s;
}
.cat-tile:hover .cat-ico{color:var(--chestnut)}
.ct-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.ct-name{
  font-family:Outfit,Inter,sans-serif;font-size:14.5px;font-weight:600;
  color:var(--ink);line-height:1.25;
}
.ct-count{font-size:12px;color:var(--muted);letter-spacing:.01em}
/* The two commercial tiles read as offers rather than departments. */
.cat-tile.is-outlet{border-color:#E8CFC7;background:#FCF7F5}
.cat-tile.is-outlet .cat-ico,.cat-tile.is-outlet .ct-name{color:var(--chestnut)}
.cat-tile.is-outlet .ct-count{color:var(--chestnut-dk)}
.cat-tile.is-gift{border-color:#D9E2DA;background:#F7FAF7}
.cat-tile.is-gift .cat-ico,.cat-tile.is-gift .ct-name{color:var(--field)}

@media (max-width:760px){
  .cat-cards{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
  .cat-tile{padding:13px 12px;gap:11px}
  .cat-ico{width:28px;height:28px}
  .ct-name{font-size:13.5px}
  .ct-count{font-size:11.5px}
}
@media (max-width:400px){
  .cat-cards{grid-template-columns:1fr 1fr}
}

/* ============================================================
   SEARCH SUGGESTIONS
   ============================================================ */
.sug{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:120;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 4px 10px rgba(20,18,15,.06),0 18px 46px rgba(20,18,15,.14);
  max-height:min(70vh,520px);overflow-y:auto;overscroll-behavior:contain;
}
.sug-group{padding:6px}
.sug-group + .sug-group{border-top:1px solid var(--line)}
.sug-row{
  display:flex;align-items:center;gap:12px;padding:8px 10px;
  text-decoration:none;color:var(--ink);border-radius:var(--r);
}
.sug-row:hover,.sug-row.on{background:var(--bone)}
.sug-thumb{
  width:44px;height:44px;flex:none;background:var(--bone);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.sug-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.sug-ico{
  width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--bone);color:var(--chestnut);font-size:15px;
}
.sug-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.sug-title{
  font-size:14px;font-weight:500;color:var(--ink);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sug-sub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sug-price{
  flex:none;text-align:right;font-size:14px;font-weight:600;color:var(--ink);
  display:flex;flex-direction:column;gap:2px;
}
.sug-save{font-size:11px;font-weight:600;color:var(--chestnut)}
.sug-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px;border-top:1px solid var(--line)}
.sug-chips:first-child{border-top:0}
.sug-chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  border:1px solid var(--line);border-radius:var(--pill);
  font-size:12.5px;color:var(--ink);text-decoration:none;background:var(--paper);
}
.sug-chip .num{color:var(--muted);font-size:11.5px}
.sug-chip:hover,.sug-chip.on{border-color:var(--ink);background:var(--bone)}
.sug-all{
  display:block;padding:12px 16px;border-top:1px solid var(--line);
  font-size:13px;font-weight:600;color:var(--chestnut);text-decoration:none;text-align:center;
}
.sug-all:hover,.sug-all.on{background:var(--bone)}
.sug-empty{padding:20px 16px;font-size:13.5px;color:var(--muted);text-align:center}
.sug-empty a{color:var(--chestnut);text-decoration:none;font-weight:600;margin-left:4px}
.sug-page .sug-title{font-weight:600}

@media (max-width:600px){
  /* Stays anchored under the search box (position:fixed left it floating in the viewport
     while the header scrolled away — 5 Oct 2026). */
  .sug{max-height:62vh}
  .sug-thumb,.sug-ico{width:38px;height:38px}
}

/* ---- Category row on collection pages ----
   Reuses the homepage .cat-tile, but tighter: this is a persistent cross-navigation
   strip above the filters, not the main event. Scrolls horizontally on a phone
   rather than stacking into a wall of tiles above the products. */
.cat-row{margin:0 0 22px;gap:8px}
.cat-row .cat-tile{padding:11px 13px;gap:10px}
.cat-row .cat-ico{width:26px;height:26px}
.cat-row .ct-name{font-size:13px}
.cat-row .ct-count{font-size:11px}
.cat-row .cat-tile.on{border-color:var(--ink);background:var(--bone)}
.cat-row .cat-tile.on .cat-ico{color:var(--chestnut)}
@media (max-width:760px){
  .cat-row{
    display:flex;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:4px;margin-bottom:16px;
  }
  .cat-row::-webkit-scrollbar{display:none}
  .cat-row .cat-tile{flex:0 0 auto}
  .cat-row .ct-count{display:none}
}


/* ---- wishlist price watch -------------------------------------------------
   Sits between the bulk bar and the grid: after the list has been seen, before
   the shopper scrolls away. Not a modal — this is an offer, not a demand. */
.wish-watch{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;
  border:1px solid var(--line);background:var(--bone);
  padding:18px 20px;margin:0 0 22px;border-radius:var(--r);
}
.wish-watch .ww-copy{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:3px}
.wish-watch .ww-copy strong{color:var(--ink);font-size:15px}
.wish-watch .ww-copy span{color:var(--muted);font-size:13.5px;line-height:1.55}
.wish-watch .ww-form{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.wish-watch .ww-form input{
  min-width:220px;flex:1 1 220px;padding:12px 14px;font:inherit;font-size:14px;
  border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:var(--r);
}
.wish-watch .ww-form input:focus{outline:2px solid var(--chestnut);outline-offset:-1px}
.wish-watch .ww-form .add-btn{width:auto;white-space:nowrap;padding:12px 22px}
.wish-watch .ww-note{flex:1 1 100%;margin:0;font-size:13.5px;color:var(--field)}
.wish-watch .ww-note.is-bad{color:var(--error)}
@media(max-width:640px){
  .wish-watch .ww-form{width:100%}
  .wish-watch .ww-form .add-btn{width:100%}
}

/* ---- product page strips: "Goes with this" / "Recently viewed" -------------
   A horizontal scroller rather than a grid: these are a sideline to the product,
   and a grid of eight would compete with it for the page. Scrolls inside itself so
   the page body never moves sideways. */
.pdp-strip{max-width:1440px;margin:0 auto;padding:0 28px 44px}
.pdp-strip h2{
  font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);margin:0 0 16px;padding-top:34px;border-top:1px solid var(--line);
}
.strip-row{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);
  gap:18px;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:6px;-webkit-overflow-scrolling:touch;
}
.strip-row::-webkit-scrollbar{height:6px}
.strip-row::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.strip-card{
  display:flex;flex-direction:column;gap:4px;scroll-snap-align:start;
  border:1px solid var(--line);background:var(--paper);border-radius:var(--r);
  padding:0 0 14px;transition:border-color .16s;
}
.strip-card:hover{border-color:var(--ink)}
.strip-card .sc-img{position:relative;display:block;aspect-ratio:1;background:var(--bone);overflow:hidden;margin-bottom:10px}
.strip-card .sc-img img{width:100%;height:100%;object-fit:cover}
.strip-card .sc-save{
  position:absolute;top:8px;left:8px;background:var(--chestnut);color:#fff;
  font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;
}
.strip-card .sc-brand{padding:0 12px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.strip-card .sc-title{
  padding:0 12px;font-size:13.5px;line-height:1.35;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.strip-card .sc-price{padding:4px 12px 0;display:flex;align-items:baseline;gap:8px}
.strip-card .sc-price .now{font-weight:600;color:var(--ink);font-size:14.5px}
.strip-card .sc-price .rrp{color:var(--muted);text-decoration:line-through;font-size:12.5px}
@media(max-width:640px){
  .pdp-strip{padding:0 18px 34px}
  .strip-row{grid-auto-columns:minmax(150px,1fr);gap:12px}
}

/* Size facet: a wrapped row of chips rather than a stacked checkbox list. Rug sizes
   are short and there are a dozen of them, so a column would run the rail off the
   screen while a row fits them in three lines. */
/* The base .facet-opts is a column, and .facet-check span{flex:1} +
   .facet-check em{margin-left:auto} are what make a normal facet row span the rail.
   All three have to be undone here or the "chips" render as a full-width stack. */
.facet-opts.facet-sizes{display:flex;flex-direction:row;flex-wrap:wrap;gap:7px}
.facet-opts.facet-sizes .facet-check span{flex:0 0 auto}
.facet-opts.facet-sizes .facet-check em{margin-left:0}
.facet-opts.facet-sizes .facet-check{
  display:inline-flex;align-items:center;gap:5px;margin:0;padding:6px 10px;
  border:1px solid var(--line);border-radius:var(--r);cursor:pointer;
  font-size:13px;line-height:1.2;min-height:32px;white-space:nowrap;
}
.facet-opts.facet-sizes .facet-check:hover{border-color:var(--ink)}
.facet-opts.facet-sizes .facet-check input{margin:0}
.facet-opts.facet-sizes .facet-check em{font-style:normal;color:var(--muted);font-size:11.5px}
.facet-opts.facet-sizes .facet-more{flex:1 1 100%}

/* ---- product reviews ------------------------------------------------------ */
.pdp-reviews{max-width:1440px;margin:0 auto;padding:0 28px 44px}
.pdp-reviews > .rv-head{padding-top:34px;border-top:1px solid var(--line);margin-bottom:22px}
.pdp-reviews h2{
  font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);margin:0 0 12px;
}
.stars{display:inline-flex;gap:2px;line-height:1;white-space:nowrap}
.stars i{font-style:normal;color:var(--line);font-size:15px}
.stars i.on{color:#C8901E}
.stars.lg i{font-size:22px}
.rv-score{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rv-score strong{font-size:22px;color:var(--ink)}
.rv-score span{color:var(--muted);font-size:14px}
.rv-none{color:var(--muted);margin:0;font-size:14.5px}
.rv-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr);gap:44px;align-items:start}
.rv-list{display:flex;flex-direction:column;gap:0}
.rv-item{padding:18px 0;border-bottom:1px solid var(--line)}
.rv-item:first-child{padding-top:0}
.rv-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:7px}
.rv-top h3{font-size:15px;font-weight:600;margin:0;color:var(--ink)}
.rv-body{margin:0 0 8px;color:var(--ink-soft);font-size:14.5px;line-height:1.6}
.rv-meta{margin:0;font-size:12.5px;color:var(--muted)}
.rv-verified{
  display:inline-block;background:var(--field);color:#fff;font-size:10.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;margin-left:4px;border-radius:var(--r);
}
.rv-reply{margin:10px 0 0;padding:12px 14px;background:var(--bone);border-left:2px solid var(--chestnut)}
.rv-reply strong{display:block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:4px}
.rv-reply p{margin:0;font-size:14px;color:var(--ink-soft);line-height:1.55}
.rv-form{border:1px solid var(--line);padding:20px;border-radius:var(--r);background:var(--paper)}
.rv-form h3{margin:0 0 14px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.rv-stars-pick{display:flex;gap:4px;margin-bottom:14px}
.rv-star{font-size:26px;line-height:1;color:var(--line);padding:2px 3px;min-width:34px;min-height:34px;transition:color .12s}
.rv-star.on{color:#C8901E}
.rv-fld{display:block;margin-bottom:12px}
.rv-fld span{display:block;font-size:12.5px;color:var(--ink);margin-bottom:5px}
.rv-fld em{font-style:normal;color:var(--muted)}
.rv-fld input,.rv-fld textarea{
  width:100%;padding:10px 12px;font:inherit;font-size:14px;border:1px solid var(--line);
  background:#fff;color:var(--ink);border-radius:var(--r);resize:vertical;
}
.rv-fld input:focus,.rv-fld textarea:focus{outline:2px solid var(--chestnut);outline-offset:-1px}
.rv-form .add-btn{width:100%}
.rv-msg{margin:10px 0 0;font-size:13.5px;color:var(--field)}
.rv-msg.is-bad{color:var(--error)}
.rv-fine{margin:12px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
@media(max-width:900px){
  .rv-grid{grid-template-columns:1fr;gap:28px}
}
@media(max-width:640px){
  .pdp-reviews{padding:0 18px 34px}
}

/* ============================================================
   KIT BUILDER — "Build your tack room" / "Build your outfit"
   ------------------------------------------------------------
   build.html + assets/kit.js. Three panes: the slot rail, the
   picker for one slot, and the kit so far — which stays on
   screen while you choose, because that is the whole point of
   a builder over a category page.
   Token-driven throughout, so body.ama repoints it wholesale.
   ============================================================ */
.kit-wrap{--gut:28px;padding-bottom:40px}

/* ---- chooser: two doors ---- */
.kit-choose{max-width:900px;margin:0 auto;padding:30px 0 64px;text-align:center}
.kit-choose h1{font-size:clamp(30px,4.4vw,44px);line-height:1.08;margin-bottom:12px}
.kit-lede{color:var(--muted);font-size:16px;line-height:1.6;max-width:62ch;margin:0 auto}
.kit-doors{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px;text-align:left}
.kit-door{
  display:flex;flex-direction:column;gap:10px;padding:30px 28px 26px;
  border:1px solid var(--line);background:var(--paper);
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.kit-door:hover{border-color:var(--ink);box-shadow:var(--shadow);transform:translateY(-2px)}
.kit-door svg{width:42px;height:42px;stroke:var(--chestnut);fill:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.kit-door strong{font-family:Outfit,sans-serif;font-size:21px;font-weight:600;color:var(--ink)}
.kit-door span{color:var(--muted);font-size:14.5px;line-height:1.55}
.kit-door em{font-style:normal;font-weight:600;font-size:14px;color:var(--chestnut);margin-top:4px}

/* ---- top bar: title + which-kit swap ---- */
.kit-top{border-bottom:1px solid var(--line)}
.kit-top-in{display:flex;align-items:flex-start;gap:24px;padding-top:22px;padding-bottom:20px}
.kit-top h1{font-size:clamp(24px,3vw,34px);line-height:1.1;margin-bottom:6px}
.kit-top p{margin:0;color:var(--muted);font-size:14.5px;max-width:70ch}
/* One builder, two kits: a segmented swap reads as "same tool, other subject",
   where two separate pages read as two features. */
.kit-swap{display:inline-flex;border:1px solid var(--line);flex:0 0 auto;margin-left:auto}
.kit-swap a{
  padding:0 20px;height:40px;display:inline-flex;align-items:center;font-size:14px;
  font-weight:500;color:var(--muted);white-space:nowrap;
}
.kit-swap a+a{border-left:1px solid var(--line)}
.kit-swap a:hover{color:var(--ink)}
.kit-swap .ks-on{background:var(--ink);color:#fff}

/* ---- the answers: asked once, applied everywhere ---- */
.kit-answers{background:var(--bone);border-bottom:1px solid var(--line)}
.kit-answers-toggle{display:none}
.kit-answers-in{display:flex;flex-wrap:wrap;gap:20px 34px;align-items:flex-start;padding:18px 28px}
.kit-sizes{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-start}
.kit-size{display:flex;flex-direction:column;gap:6px;min-width:180px}
.ks-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.kit-size select{
  font:inherit;font-size:15px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:0;padding:11px 12px;height:44px;cursor:pointer;
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),
                   linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 17px) 20px,calc(100% - 12px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.kit-size select:hover{border-color:var(--ink)}
.ks-hint{font-size:12.5px;color:var(--muted);line-height:1.4}

/* Colour coordination. The dot is a cue for the CONTROL; the product photograph is
   always the truth about what the thing looks like. */
.kit-colours{display:flex;flex-direction:column;gap:8px;flex:1 1 340px;min-width:0}
.kc-row{display:flex;flex-wrap:wrap;gap:7px}
.kc-sw{
  display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;
  border:1px solid var(--line);background:var(--paper);font-size:13px;color:var(--ink-soft);
  cursor:pointer;transition:border-color .15s,color .15s;
}
.kc-sw:hover{border-color:var(--ink);color:var(--ink)}
.kc-sw i{width:13px;height:13px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.kc-sw.on{border-color:var(--ink);background:var(--ink);color:#fff}
.kc-sw.on i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.kc-any{font-weight:600}
.kc-sw em{font-style:normal;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.kc-sw.on em{color:rgba(255,255,255,.7)}

/* ---- three panes ---- */
.kit-panes{
  display:grid;grid-template-columns:270px minmax(0,1fr) 320px;
  gap:0;align-items:start;
}

/* left: slot rail */
.kit-rail{
  position:sticky;top:0;max-height:100vh;overflow-y:auto;
  border-right:1px solid var(--line);padding:22px 20px 30px 0;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.kr-group+.kr-group{margin-top:20px}
.kr-group h3{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:600;margin-bottom:6px;
}
.kr-slot{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:9px 10px;border:1px solid transparent;background:none;cursor:pointer;
  transition:background .14s,border-color .14s;
}
.kr-slot:hover{background:var(--bone)}
.kr-slot.on{border-color:var(--line);background:var(--bone)}
.kr-ico{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center}
.kr-ico svg{width:22px;height:22px;stroke:var(--ink-soft);fill:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.kr-slot.on .kr-ico svg{stroke:var(--ink)}
.kr-slot.filled .kr-ico svg{stroke:var(--chestnut)}
.kr-txt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.kr-label{font-size:14px;font-weight:500;color:var(--ink);line-height:1.3}
.kr-sub{
  font-size:12px;color:var(--muted);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kr-slot.filled .kr-sub{color:var(--chestnut)}
.kr-tick{
  flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:var(--chestnut);
  color:#fff;font-size:11px;line-height:18px;text-align:center;
}
/* A slot the current answers cannot fill is dimmed, not hidden — hiding it makes the
   kit look shorter than it is and gives no clue which answer to widen. */
.kr-slot.none{opacity:.45}

/* middle: the picker */
.kit-picker{padding:22px 26px 40px;min-width:0}
.kp-head{display:flex;align-items:flex-start;gap:20px;margin-bottom:16px}
.kp-head h2{font-size:20px;line-height:1.2}
.kp-count{margin:3px 0 0;font-size:13px;color:var(--muted)}
.kp-sort{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto}
.kp-sort span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.kp-sort select{
  font:inherit;font-size:13.5px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:0;height:36px;padding:0 10px;cursor:pointer;
}
.kp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:20px 16px}
.kp-msg{grid-column:1/-1;color:var(--muted);font-size:14px;margin:0;padding:22px 0}
/* Full-width band across the product grid, so an approximate match can never be
   mistaken for an exact one by sitting in the same run of cards. */
.kp-divider{
  grid-column:1/-1;display:flex;align-items:center;gap:14px;
  margin:14px 0 2px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;
}
.kp-divider a{
  margin-left:auto;text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;
  color:var(--chestnut);text-decoration:underline;text-underline-offset:3px;
}
.kp-note{
  grid-column:1/-1;margin:0 0 6px;padding:12px 14px;background:var(--bone);
  border:1px solid var(--line);font-size:13.5px;color:var(--ink-soft);line-height:1.5;
}
.kp-note strong{color:var(--ink)}
.ko-approx{font-size:11.5px;color:var(--chestnut);letter-spacing:.01em}
.kp-none{background:var(--bone);border:1px solid var(--line);padding:18px 20px;line-height:1.55}
.kp-none strong{color:var(--ink)}
.kp-more{display:flex;justify-content:center;margin-top:26px}
.kp-more button{
  border:1px solid var(--line);height:44px;padding:0 26px;font-size:14px;font-weight:500;color:var(--ink);
}
.kp-more button:hover{border-color:var(--ink)}

/* one option */
.kit-opt{
  display:flex;flex-direction:column;gap:7px;text-align:left;padding:0;
  background:none;border:0;cursor:pointer;min-width:0;
}
.ko-img{
  position:relative;display:block;aspect-ratio:1/1;background:var(--paper);
  border:1px solid var(--line);overflow:hidden;transition:border-color .18s,box-shadow .18s;
}
.ko-img img{width:100%;height:100%;object-fit:contain;padding:10px;transition:transform .5s}
.kit-opt:hover .ko-img{border-color:var(--ink)}
.kit-opt:hover .ko-img img{transform:scale(1.04)}
.ko-save{
  position:absolute;top:0;left:0;background:var(--chestnut);color:#fff;
  font-family:Outfit,sans-serif;font-size:11px;font-weight:600;letter-spacing:.04em;
  padding:3px 8px;font-variant-numeric:tabular-nums;
}
/* The tick is always in the markup and revealed by .on, so choosing never reflows. */
.ko-tick{
  position:absolute;right:8px;bottom:8px;width:26px;height:26px;border-radius:50%;
  background:var(--chestnut);color:#fff;font-size:14px;line-height:26px;text-align:center;
  opacity:0;transform:scale(.7);transition:.16s;
}
.ko-title{
  font-size:13.5px;line-height:1.35;color:var(--ink);font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ko-price{display:flex;align-items:baseline;gap:8px;font-family:Outfit,sans-serif}
.ko-price>.num{font-size:15.5px;font-weight:600;color:var(--ink)}
.ko-rrp{font-size:12.5px;color:var(--muted);text-decoration:line-through;font-weight:400}
.ko-cols{font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.kit-opt.on .ko-img{border-color:var(--chestnut);box-shadow:0 0 0 1px var(--chestnut)}
.kit-opt.on .ko-tick{opacity:1;transform:none}
.kit-opt.on .ko-title{color:var(--chestnut-dk)}

/* right: the kit so far */
.kit-board{
  position:sticky;top:0;max-height:100vh;display:flex;flex-direction:column;
  border-left:1px solid var(--line);padding:22px 0 0 22px;
}
.kb-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.kb-head h2{font-size:15px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.kb-tools{margin-left:auto;display:flex;gap:2px}
.kb-tools button{width:32px;height:32px;display:grid;place-items:center;border:1px solid transparent}
.kb-tools button:hover:not(:disabled){border-color:var(--line);background:var(--bone)}
.kb-tools button:disabled{opacity:.3;cursor:not-allowed}
.kb-tools svg{width:16px;height:16px;stroke:var(--ink-soft);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.kb-list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1 1 auto;min-height:0;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.kb-item{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.kbi-img{flex:0 0 auto;width:46px;height:46px;border:1px solid var(--line);background:var(--paper);overflow:hidden}
.kbi-img img{width:100%;height:100%;object-fit:contain;padding:3px}
.kbi-txt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;gap:1px}
.kbi-slot{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.kbi-title{font-size:13px;line-height:1.3;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kbi-var{font-size:11.5px;color:var(--muted)}
.kbi-off{font-size:11px;color:var(--chestnut);font-weight:600}
.kbi-price{font-family:Outfit,sans-serif;font-size:13.5px;font-weight:600;color:var(--ink);flex:0 0 auto}
.kbi-x{flex:0 0 auto;width:22px;height:22px;font-size:17px;line-height:1;color:var(--muted)}
.kbi-x:hover{color:var(--chestnut)}
.kb-empty{margin:0;padding:18px 0;color:var(--muted);font-size:13.5px;line-height:1.55}
.kb-foot{flex:0 0 auto;border-top:1px solid var(--ink);padding:14px 0 22px;margin-top:6px}
.kb-sums{margin-bottom:12px}
.kb-row{display:flex;align-items:baseline;justify-content:space-between;font-size:13.5px;padding:3px 0}
.kb-row span{color:var(--muted)}
.kb-row strong{font-family:Outfit,sans-serif;font-weight:600;color:var(--ink)}
.kb-save strong{color:var(--chestnut)}
.kb-tot{font-size:15px;padding-top:6px}
.kb-tot strong{font-size:22px}
.kit-board .add-btn{width:100%}

/* ---- mobile summary bar ---- */
.kit-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--ink);color:#fff;padding:12px 16px;border:0;
  box-shadow:0 -4px 24px rgba(20,18,15,.22);
}
.kbar-count{display:flex;flex-direction:column;line-height:1.3}
.kbar-count strong{font-family:Outfit,sans-serif;font-size:14px;font-weight:600;color:#fff}
.kbar-count span{font-size:12px;color:#E9A184}
.kbar-total{margin-left:auto;font-family:Outfit,sans-serif;font-size:19px;font-weight:600}
.kbar-cta{
  flex:0 0 auto;border:1px solid rgba(255,255,255,.5);padding:8px 14px;font-size:13px;font-weight:600;
}
body.has-kitbar .toast{bottom:88px}

@media(max-width:1180px){
  .kit-panes{grid-template-columns:230px minmax(0,1fr) 280px}
  .kit-picker{padding:22px 20px 40px}
}
@media(max-width:1000px){
  /* The rail becomes a scrolling row of chips above the picker: at this width three
     columns leaves the picker too narrow to show a product properly. */
  .kit-panes{grid-template-columns:minmax(0,1fr) 280px}
  .kit-rail{
    grid-column:1/-1;position:static;max-height:none;display:flex;gap:8px;overflow-x:auto;
    border-right:0;border-bottom:1px solid var(--line);padding:14px 0;
    scroll-padding-inline:2px;
  }
  .kr-group{display:flex;gap:8px;align-items:center;margin:0!important}
  .kr-group h3{margin:0 4px 0 0;white-space:nowrap;align-self:center}
  .kr-slot{width:auto;border-color:var(--line);white-space:nowrap;flex:0 0 auto;padding:8px 12px}
  .kr-sub{display:none}
}
@media(max-width:820px){
  .kit-doors{grid-template-columns:1fr}
  .kit-top-in{flex-direction:column;gap:14px}
  .kit-swap{margin-left:0}
  .kit-answers-toggle{
    display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;
    padding:13px var(--gut);border:0;background:none;
  }
  .kat-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
  .kat-val{font-size:14px;color:var(--ink);font-weight:500;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kat-cta{margin-left:auto;font-size:13px;font-weight:600;color:var(--chestnut);
    text-decoration:underline;text-underline-offset:3px;flex:0 0 auto}
  .kit-answers-in{display:none;padding:4px var(--gut) 18px;gap:16px}
  body.answers-open .kit-answers-in{display:flex}
  .kit-size{min-width:0;flex:1 1 100%}
  .ks-hint{font-size:11.5px}
  .kit-panes{grid-template-columns:minmax(0,1fr);padding-bottom:76px}
  .kit-picker{padding:20px 0 30px}
  .kp-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:18px 14px}
  .kit-bar{display:flex}
  /* On a phone the board is the bottom sheet the bar opens, not a column. */
  .kit-board{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:70;
    max-height:78vh;background:var(--paper);border-left:0;border-top:1px solid var(--ink);
    padding:18px var(--gut) 0;box-shadow:0 -8px 40px rgba(20,18,15,.28);
    transform:translateY(102%);transition:transform .22s;
  }
  body.board-open .kit-board{transform:none}
  .kb-foot{padding-bottom:16px}
}
@media (max-width:720px){ .kit-wrap{--gut:16px} }

/* ---- step 2: what are you shopping for -------------------------------------
   41 slots for a horse is a warehouse. This turns the builder into the shopper's
   own list before a single product is drawn. */
.kit-pick{padding:34px 0 90px}
.kit-pick h1{font-size:clamp(26px,3.6vw,38px);line-height:1.1;margin-bottom:10px}
.kit-pick .kit-lede{margin:0 0 22px;max-width:64ch}
.kpick-bulk{display:flex;gap:10px;margin-bottom:26px}
.kpick-group{margin-bottom:30px}
.kpick-head{display:flex;align-items:baseline;gap:14px;padding-bottom:9px;
  border-bottom:1px solid var(--line);margin-bottom:14px}
.kpick-head h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.kpick-toggle{margin-left:auto;font-size:13px;font-weight:600;color:var(--chestnut);
  text-decoration:underline;text-underline-offset:3px}
.kpick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.kpick-item{
  display:flex;align-items:center;gap:11px;padding:12px 14px;cursor:pointer;
  border:1px solid var(--line);background:var(--paper);transition:border-color .15s,background .15s;
}
.kpick-item:hover{border-color:var(--ink)}
.kpick-item.on{border-color:var(--chestnut);background:#FCF6F4}
/* The tick box is the label's own state, drawn by the icon and border rather than a
   default checkbox, so the whole card is the hit target. */
.kpick-item input{position:absolute;opacity:0;width:0;height:0}
.kpick-item input:focus-visible+.kpick-ico{outline:2px solid var(--chestnut);outline-offset:2px}
.kpick-ico{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center}
.kpick-ico svg{width:24px;height:24px;stroke:var(--ink-soft);fill:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.kpick-item.on .kpick-ico svg{stroke:var(--chestnut)}
.kpick-txt{display:flex;flex-direction:column;min-width:0}
.kpick-label{font-size:14.5px;font-weight:500;color:var(--ink);line-height:1.3}
.kpick-n{font-size:12px;color:var(--muted)}
.kpick-item.on .kpick-n{color:var(--chestnut)}
.kpick-foot{
  position:sticky;bottom:0;display:flex;align-items:center;gap:18px;
  background:var(--paper);border-top:1px solid var(--ink);padding:14px 0;margin-top:8px;
}
.kpick-foot span{font-size:14px;color:var(--muted)}
.kpick-foot .add-btn{width:auto;margin-left:auto;padding:13px 30px}
.kit-editwant{
  margin-left:auto;font-size:13px;font-weight:600;color:var(--chestnut);flex:0 0 auto;
  text-decoration:underline;text-underline-offset:3px;
}
.kit-editwant.kit-reset{margin-left:16px;color:var(--muted)}
.kit-editwant.kit-reset:hover{color:var(--chestnut)}
.kit-top-in .kit-swap{margin-left:18px}
@media(max-width:820px){
  .kit-pick{padding:24px 0 70px}
  .kpick-grid{grid-template-columns:1fr}
  .kit-editwant{margin-left:0}
  .kit-top-in .kit-swap{margin-left:0}
  .kpick-foot{padding:12px 0;gap:12px}
  .kpick-foot .add-btn{padding:12px 20px}
}

/* ---- who the outfit is for (rider builder only) ---- */
.kit-who{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.kw-row{display:inline-flex;border:1px solid var(--line);background:var(--paper);height:44px}
.kw-opt{
  padding:0 15px;font-size:14px;color:var(--muted);white-space:nowrap;
  display:inline-flex;align-items:center;transition:color .14s,background .14s;
}
.kw-opt+.kw-opt{border-left:1px solid var(--line)}
.kw-opt:hover{color:var(--ink)}
.kw-opt.on{background:var(--ink);color:#fff}
@media(max-width:820px){
  .kit-who{flex:1 1 100%}
  .kw-row{width:100%}
  .kw-opt{flex:1 1 0;justify-content:center;padding:0 8px;font-size:13px}
}

/* ---- polish: product view link, skeletons, progress ------------------------ */
/* The card is a picker AND a way through to the product. The link sits above the
   button rather than inside it — a button cannot legally contain an anchor. */
.kit-card{position:relative;display:flex;min-width:0}
.kit-card .kit-opt{flex:1 1 auto;min-width:0}
.ko-view{
  position:absolute;top:8px;right:8px;z-index:2;width:28px;height:28px;
  display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);
  opacity:0;transform:translateY(-3px);transition:.16s;
}
.ko-view svg{width:14px;height:14px;stroke:var(--ink);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.kit-card:hover .ko-view,.ko-view:focus-visible{opacity:1;transform:none}
.ko-view:hover{border-color:var(--ink)}
/* Touch has no hover, so the affordance must simply be there. */
@media(hover:none){.ko-view{opacity:1;transform:none}}

/* Loading keeps the grid's shape so switching slots doesn't bounce the scroll. */
.kp-skel{display:flex;flex-direction:column;gap:8px}
.kp-skel span{display:block;aspect-ratio:1/1;background:var(--bone)}
.kp-skel i{display:block;height:11px;width:85%;background:var(--bone)}
.kp-skel b{display:block;height:13px;width:45%;background:var(--bone)}
.kp-skel span,.kp-skel i,.kp-skel b{animation:kpPulse 1.1s ease-in-out infinite}
@keyframes kpPulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.kp-skel span,.kp-skel i,.kp-skel b{animation:none}}

/* Colour row: the tail opens on request instead of wrapping to four rows. */
.kc-extra{display:none}
.kit-colours.show-all .kc-extra{display:inline-flex}
.kc-more{
  height:32px;padding:0 11px;border:1px dashed var(--line);font-size:13px;font-weight:600;
  color:var(--chestnut);background:var(--paper);
}
.kc-more:hover{border-color:var(--chestnut)}

/* Board: progress, a real empty state, and a finish line. */
.kb-progress{margin:0 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.kb-empty{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.kb-empty svg{width:30px;height:30px;stroke:var(--line);fill:none;stroke-width:1.3}
.kb-done{
  margin:10px 0 0;padding:10px 12px;background:#EDF2EC;border:1px solid #CFDECE;
  color:var(--field);font-size:13px;font-weight:600;line-height:1.4;
}

/* ---- polish: a tighter top block -------------------------------------------
   The title, lede, swap and "change" link between them pushed the first product
   below the fold on a phone. The lede has done its job by the time someone is
   building, so it steps aside there. */
.kit-top-in{flex-wrap:wrap;row-gap:12px}
.kit-top-title{min-width:0;flex:1 1 340px}
@media(max-width:820px){
  .kit-top-in{padding-top:16px;padding-bottom:14px;gap:10px}
  .kit-top h1{font-size:22px}
  /* Two controls, one row — they were stacking into two full-width blocks. */
  .kit-top p{display:none}
  .kit-top-title{flex:1 1 100%}
  .kit-editwant{order:2;font-size:12.5px;margin-left:auto}
  .kit-editwant.kit-reset{order:3;margin-left:12px}
  .kit-swap{order:1}
  .kit-swap a{height:34px;padding:0 14px;font-size:12.5px}
  /* The sticky bar sits over the last row of products otherwise. */
  .kit-picker{padding-bottom:84px}
}
/* On a phone the long label pushed itself onto its own row beside the kit swap. */
@media(max-width:820px){ .kit-editwant span{display:none} }

/* ---- [hidden] must actually hide -------------------------------------------
   Every `display:` rule in this file outranks the UA's `[hidden]{display:none}`,
   which is a plain element-less selector. That bit three separate times: the
   sticky bar showed on the chooser, "You save £0.00" showed with an empty kit,
   and the empty-state message sat under a full list. One rule instead of chasing
   each element — !important is right here because it restores a browser default
   our own selectors accidentally beat, not because it wins a design argument. */
.kit-wrap [hidden],
.kit-wrap[hidden],
#kitBar[hidden]{display:none !important}

/* ---- bundle pricing in the board ---- */
.kb-bundle strong{color:var(--field)}
.kb-nudge{
  margin:0 0 10px;padding:9px 11px;background:#FAF3E9;border:1px solid #E8D9BE;
  font-size:12.5px;font-weight:600;color:#7A5A24;line-height:1.4;
}

/* ---- starter presets ---- */
.kpick-presets{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.kpre-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.kpre{
  display:flex;flex-direction:column;gap:3px;text-align:left;padding:14px 16px;
  border:1px solid var(--line);background:var(--paper);cursor:pointer;
  transition:border-color .15s,background .15s,transform .15s;
}
.kpre:hover{border-color:var(--ink);transform:translateY(-1px)}
.kpre.on{border-color:var(--chestnut);background:#FCF6F4}
.kpre strong{font-family:Outfit,sans-serif;font-size:15px;font-weight:600;color:var(--ink);line-height:1.25}
.kpre span{font-size:12.5px;color:var(--muted);line-height:1.45}
.kpre em{font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--chestnut);font-weight:600;margin-top:3px}
@media(max-width:820px){.kpre-row{grid-template-columns:1fr}}

/* ---- saved kits on the wishlist ---- */
.wish-kits{margin:0 0 34px}
.wk-head{display:flex;align-items:baseline;gap:14px;padding-bottom:10px;
  border-bottom:1px solid var(--line);margin-bottom:16px}
.wk-head h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.wk-new{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--chestnut)}
.wk-list{display:grid;gap:12px}
.wk-card{display:flex;align-items:center;gap:18px;padding:14px 16px;border:1px solid var(--line);background:var(--paper)}
.wk-thumbs{display:flex;gap:6px;flex:0 0 auto}
.wk-thumbs span{width:52px;height:52px;border:1px solid var(--line);background:var(--paper);
  overflow:hidden;display:grid;place-items:center;flex:0 0 auto}
.wk-thumbs img{width:100%;height:100%;object-fit:contain;padding:3px}
.wk-more{font-size:12.5px;font-weight:600;color:var(--muted);background:var(--bone)}
.wk-meta{min-width:0;flex:1 1 auto}
.wk-meta h3{font-size:16px;font-weight:600;line-height:1.25;margin-bottom:3px}
.wk-meta p{margin:0;font-size:13px;color:var(--muted)}
.wk-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.wk-x{width:30px;height:30px;font-size:19px;line-height:1;color:var(--muted);border:1px solid transparent}
.wk-x:hover{color:var(--chestnut);border-color:var(--line)}
@media(max-width:720px){
  .wk-card{flex-wrap:wrap;gap:12px}
  .wk-thumbs span:nth-child(n+4){display:none}
  .wk-actions{margin-left:0;width:100%}
  .wk-actions .ghost-btn{flex:1 1 auto;justify-content:center}
}

/* ---------- Checkout nudges -------------------------------------------------
   The shop interrupts nobody by default, so when it does the panel has to look
   like part of the site rather than an ad. Quiet card, one clear action, and an
   obvious way out — the close control is a real button, not a corner to hunt for. */
.nudge-wrap{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;
  padding:20px;opacity:0;transition:opacity .18s ease}
.nudge-wrap.on{opacity:1}
.nudge-bd{position:absolute;inset:0;background:rgba(28,24,22,.5)}
.nudge{position:relative;background:var(--bone,#FFF8F1);color:var(--ink,#2B2320);
  border-radius:16px;max-width:430px;width:100%;padding:30px 28px 24px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);transform:translateY(8px);
  transition:transform .18s ease}
.nudge-wrap.on .nudge{transform:none}
.nudge h2{margin:0 0 8px;font-size:23px;line-height:1.2}
.nudge-lead{margin:0 0 16px;font-size:15px;line-height:1.55;opacity:.88}
.nudge-x{position:absolute;top:10px;right:12px;border:0;background:none;font-size:26px;
  line-height:1;cursor:pointer;color:inherit;opacity:.45;padding:4px 8px}
.nudge-x:hover{opacity:1}
.nudge-code{display:flex;gap:8px;align-items:stretch;margin-bottom:8px}
.nudge-code code{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:19px;letter-spacing:.09em;font-weight:600;text-align:center;
  padding:12px 10px;border:2px dashed rgba(0,0,0,.22);border-radius:10px;background:#fff}
.nudge-copy{border:1px solid rgba(0,0,0,.2);background:#fff;border-radius:10px;
  padding:0 15px;cursor:pointer;font:inherit;font-weight:600;white-space:nowrap}
.nudge-small{margin:0 0 18px;font-size:12.5px;opacity:.65}
.nudge-actions{display:flex;flex-direction:column;gap:9px}
.nudge-go{display:block;text-align:center;background:var(--rust,#9C3B22);color:#fff;
  text-decoration:none;padding:13px;border-radius:10px;font-weight:600}
.nudge-go:hover{filter:brightness(1.08)}
.nudge-watch{border:0;background:none;color:inherit;opacity:.7;cursor:pointer;
  font:inherit;font-size:13.5px;text-decoration:underline;padding:6px}
.nudge-watch:hover{opacity:1}
.nudge-form{display:flex;gap:8px;flex-wrap:wrap}
.nudge-form input{flex:1;min-width:170px;padding:12px;border:1px solid rgba(0,0,0,.2);
  border-radius:10px;font:inherit}
.nudge-form button{background:var(--rust,#9C3B22);color:#fff;border:0;border-radius:10px;
  padding:12px 18px;font:inherit;font-weight:600;cursor:pointer}
.nudge-msg{margin:12px 0 0;font-size:13.5px}
/* Consent row on the newsletter popup. Unticked by default and laid out so the box and
   its wording are one target — a 16px checkbox alone is a poor tap on a phone, and a
   consent control people miss is worse than one they decline. */
.nudge-consent{display:flex;align-items:flex-start;gap:9px;margin:14px 0 4px;
  font-size:13px;line-height:1.45;cursor:pointer;opacity:.9}
.nudge-consent input{width:17px;height:17px;margin:1px 0 0;flex:none;
  accent-color:var(--rust,#9C3B22);cursor:pointer}
.nudge-consent span{flex:1}
@media (max-width:480px){.nudge{padding:26px 20px 20px}.nudge h2{font-size:20px}}
@media (prefers-reduced-motion:reduce){
  .nudge-wrap,.nudge{transition:none}
}

/* Free-delivery gap suggestions, inside the basket drawer */
.cs-gap{margin:10px 0 4px;padding:12px;border:1px dashed rgba(0,0,0,.16);border-radius:10px}
.cs-gap-head{font-size:13px;margin-bottom:9px}
.cs-gap-head strong{font-weight:650}
.cs-gap-list{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
.cs-gap-item{flex:0 0 108px;text-align:left;border:1px solid rgba(0,0,0,.12);
  border-radius:9px;background:#fff;padding:7px;cursor:pointer;font:inherit;color:inherit}
.cs-gap-item:hover{border-color:var(--rust,#9C3B22)}
.cs-gap-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;
  background:#f2efe9;display:block;margin-bottom:6px}
.cs-gap-t{font-size:11.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;margin-bottom:3px}
.cs-gap-p{font-size:12.5px;font-weight:650}

/* ---- checkout: guest vs account, and marketing permission ----------------------
   Guest sits first and is preselected. An account is worth offering — it is the
   difference between a customer and a transaction — but a checkout that insists on
   one is a checkout people leave. */
.checkout-wrap .acct-choice{display:grid;gap:8px;margin-top:14px}
.checkout-wrap .acct-opt{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  border:1px solid var(--line);padding:12px 14px;background:var(--bg);
  transition:border-color .15s ease,background .15s ease;
}
.checkout-wrap .acct-opt:hover{border-color:var(--field)}
.checkout-wrap .acct-opt:has(input:checked){border-color:var(--accent);background:var(--cream-2)}
.checkout-wrap .acct-opt input{margin-top:3px;flex:0 0 auto;accent-color:var(--accent)}
.checkout-wrap .acct-opt span{display:grid;gap:2px}
.checkout-wrap .acct-opt strong{font-size:14px;font-weight:600;color:var(--ink)}
.checkout-wrap .acct-opt small{font-size:12.5px;color:var(--muted);line-height:1.45}
.checkout-wrap .acct-pw{margin:2px 0 0}
/* .fld sets display:block and .acct-choice display:grid, and a class selector beats the
   browser's own [hidden] rule — so without these two the password box and the whole
   choice stay on screen while marked hidden. */
.checkout-wrap .acct-choice[hidden],
.checkout-wrap .acct-pw[hidden]{display:none}

/* The opt-in. Deliberately quiet and deliberately unticked — permission that was
   taken rather than given is not permission. */
.checkout-wrap .chk-line{
  display:flex;gap:10px;align-items:flex-start;margin-top:14px;
  font-size:12.5px;color:var(--muted);line-height:1.5;cursor:pointer;
}
.checkout-wrap .chk-line input{margin-top:2px;flex:0 0 auto;accent-color:var(--accent)}
/* The soft opt-in box sits under the email field: a little space above, lighter weight so it reads as a note, not a step. */
.checkout-wrap .chk-line--soft{margin:6px 0 14px;font-size:13px;color:var(--muted)}

/* Not every message on this line is a failure. */
.checkout-wrap .checkout-err.is-notice{
  background:var(--cream-2);border:1px solid var(--line);border-left:2px solid var(--field);
  color:var(--ink-soft);
}


/* ---- Trust strip under the nav, and review stars wherever a product is shown ---- */
.trust{background:var(--bone);border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-soft)}
.trust .wrap{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;min-height:38px;padding-top:4px;padding-bottom:4px}
.trust span,.trust a{display:inline-flex;align-items:center;gap:7px;padding:4px 16px;white-space:nowrap}
.trust span+span,.trust a+span{border-left:1px solid var(--line)}
.trust svg{width:15px;height:15px;stroke:var(--field);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.trust-score{color:var(--ink);font-weight:500;text-decoration:none}
.trust-score strong{font-size:13.5px}
.trust-score .stars i{font-size:13px}
.stars.sm i{font-size:12px}
.card-stars{display:flex;align-items:center;gap:6px;margin:-4px 0 6px;font-size:12px;color:var(--muted)}
.pdp-pay3{margin:4px 0 10px;max-width:420px}
.pdp-rating{display:inline-flex;align-items:center;gap:8px;margin:2px 0 12px;color:var(--ink);text-decoration:none;font-size:14px}
.pdp-rating:hover span{text-decoration:underline}
.pdp-rating strong{font-size:14.5px}
.rv-dist{display:grid;gap:4px;max-width:340px;margin:12px 0 0}
.rv-bar{display:grid;grid-template-columns:36px 1fr 30px;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.rv-bar i{display:block;height:8px;background:var(--line);border-radius:4px;overflow:hidden}
.rv-bar b{display:block;height:100%;background:#C8901E}
.reviews-page{padding-bottom:48px}
.rvp-write{margin-top:36px;padding:26px 28px;background:var(--wash);border:1px solid var(--line)}
.rvp-write h2{margin:0 0 8px;font-size:20px}
.rvp-write p{max-width:640px;font-size:15px}
.rvp-write .rvp-google{display:inline-block;width:auto;padding:12px 24px;text-decoration:none}
.home-reviews{background:var(--paper)}
/* eBay feedback: same grid as the site's own reviews, "Positive" where the stars would be. */
.ebay-reviews{background:#fff;border-top:1px solid var(--line)}
.er-pos{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0b5a2a;background:#e8f5ec;border-radius:3px;padding:2px 7px;margin-bottom:8px}
.reviews-page .ebay-reviews{margin:36px 0 0;padding:28px 0 8px}
.reviews-page .ebay-reviews .wrap{padding:0}
.rv-ebay{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.rv-ebay h3{margin:0 0 4px;font-size:16px}
.rv-ebay-score{margin:0 0 12px;color:var(--muted);font-size:13.5px}
.rv-item--ebay .rv-top{margin-bottom:6px}
.pdp-rating--ebay{text-decoration:none;color:var(--muted);font-size:13px}
.home-reviews .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.home-reviews .sec-head h2{margin:0}
.hr-score{margin:0;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:6px}
.hr-score a{color:var(--chestnut);font-weight:600}
.hr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hr-card{display:block;padding:20px 22px;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .15s}
.hr-card:hover{border-color:var(--chestnut)}
.hr-body{margin:10px 0 12px;font-size:15px;line-height:1.55}
.hr-meta{margin:0;font-size:12.5px;color:var(--muted)}
.hr-meta span{color:var(--chestnut)}
@media(max-width:820px){ .hr-grid{grid-template-columns:1fr} .rvp-write{padding:20px} }
.rvp-summary{padding:18px 0 10px;border-bottom:1px solid var(--line);margin-bottom:8px}
.rvp-item{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.rvp-prod{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--ink);text-decoration:none}
.rvp-prod img{width:120px;height:120px;object-fit:cover;border:1px solid var(--line);background:#fff}
.rvp-prod:hover span{text-decoration:underline}
@media (max-width:640px){
  .trust span,.trust a{padding:4px 10px;font-size:12px}
  .rvp-item{grid-template-columns:1fr}
  .rvp-prod{flex-direction:row;align-items:center}
  .rvp-prod img{width:64px;height:64px}
}

/* ---- trust: a person behind the site ---------------------------------------------
   Phone number in the top bar, trust strip and footer, the payment marks above the
   legal line, and the why-cheaper note beside a price. All of it renders only when
   the number is set in Settings -> Contact details (the marks always show). */
.util-phone{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:inherit}
.util-phone svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.trust-phone{color:var(--ink);text-decoration:none;font-weight:500}
.trust-phone:hover{text-decoration:underline}
.fcontact{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin:12px 0 0;font-size:13.5px}
.fcontact a{display:inline-flex;align-items:center;gap:6px;color:inherit;font-weight:600;text-decoration:none}
.fcontact a:hover{text-decoration:underline}
.fcontact svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fcontact .fhours{opacity:.7;font-size:12.5px}
.pay-logos{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pay-logos span{display:inline-flex}
.pay-logos svg{width:44px;height:28px;display:block;border-radius:4px}
.pay-logos--footer{margin-top:40px;justify-content:flex-start;opacity:.92}
.pay-logos--checkout{margin:14px 0 4px;justify-content:center;gap:6px}
.pay-logos--checkout svg{width:38px;height:24px}
.pay-logos-note{flex-basis:100%;text-align:center;font-size:12px;color:var(--muted);margin-top:2px}
.checkout-trust a{color:inherit;font-weight:600}

/* ---- live chat widget (assets/chat.js) ---------------------------------------- */
.dchat{position:fixed;right:18px;bottom:18px;z-index:1100;font-family:inherit;color:var(--ink,#2B2320)}
.dchat-btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;background:var(--rust,#9C3B22);color:#fff;
  padding:12px 18px 12px 14px;font:inherit;font-weight:600;font-size:14.5px;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.25);position:relative}
.dchat-btn:hover{filter:brightness(1.08)}
.dchat-btn svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dchat-badge{position:absolute;top:-5px;right:-4px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#fff;color:var(--rust,#9C3B22);
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;font-style:normal;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.dchat.open .dchat-btn{display:none}
.dchat-panel{width:min(360px,calc(100vw - 24px));height:min(520px,calc(100vh - 40px));background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.28);
  display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(0,0,0,.08)}
.dchat-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:var(--ink,#2B2320);color:#fff}
.dchat-head strong{display:block;font-size:15px}
.dchat-status{display:flex;align-items:center;gap:6px;font-size:12px;opacity:.85}
.dchat-status i{width:8px;height:8px;border-radius:50%;background:#b8b2ac;display:inline-block}
.dchat-status.on i{background:#3fca79;box-shadow:0 0 0 3px rgba(63,202,121,.25)}
.dchat-status em{font-style:normal}
.dchat-x{border:0;background:none;color:#fff;font-size:26px;line-height:1;cursor:pointer;opacity:.75;padding:2px 6px}
.dchat-x:hover{opacity:1}
.dchat-body{flex:1;overflow:auto;padding:14px 12px;display:flex;flex-direction:column;gap:8px;background:var(--bone,#FFF8F1)}
.dchat-intro{font-size:13.5px;line-height:1.5;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:10px 12px;color:var(--ink-soft,#4a4540)}
.dchat-line{display:flex;flex-direction:column;max-width:84%}
.dchat-line.me{align-self:flex-end;align-items:flex-end}
.dchat-line.shop{align-self:flex-start}
.dchat-bubble{padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.45;white-space:pre-wrap;word-break:break-word;background:#fff;border:1px solid rgba(0,0,0,.08)}
.dchat-line.me .dchat-bubble{background:var(--rust,#9C3B22);color:#fff;border-color:transparent}
.dchat-note{font-size:11px;opacity:.6;margin-top:2px}
.dchat-sys{align-self:center;text-align:center;font-size:12px;opacity:.65;padding:2px 10px;max-width:90%}
.dchat-form{padding:10px 12px 8px;border-top:1px solid rgba(0,0,0,.08);background:#fff}
.dchat-who{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.dchat-who input,.dchat-row textarea{font:inherit;font-size:14px;padding:9px 10px;border:1px solid rgba(0,0,0,.18);border-radius:10px;width:100%;box-sizing:border-box;background:#fff;color:inherit}
.dchat-row{display:flex;gap:6px;align-items:flex-end}
.dchat-row textarea{resize:none;min-height:40px;max-height:120px;line-height:1.4}
.dchat-row button{flex:none;width:40px;height:40px;border:0;border-radius:10px;background:var(--rust,#9C3B22);cursor:pointer;display:grid;place-items:center}
.dchat-row button:disabled{opacity:.5}
.dchat-row button svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dchat-msg{margin:6px 0 0;font-size:12.5px;color:#8e1f0b}
.dchat-foot{padding:8px 12px 10px;font-size:12px;text-align:center;color:var(--muted,#6b655f);background:#fff;border-top:1px solid rgba(0,0,0,.06)}
.dchat-foot a{color:var(--rust,#9C3B22);font-weight:600}
@media (max-width:640px){
  .dchat{right:12px;bottom:12px}
  .dchat-btn span{display:none}
  .dchat-btn{padding:13px;border-radius:50%}
  .dchat.open{right:0;bottom:0;left:0}
  .dchat-panel{width:100%;height:78vh;border-radius:16px 16px 0 0;margin:0 auto}
  .dchat-who{grid-template-columns:1fr}
}
@media print{.dchat{display:none}}

/* Big-basket checkout: the email comes before the express buttons (assets/checkout.js) */
.express-hint{text-align:left;margin:4px 0 12px;font-size:12.5px;color:var(--rust,#9C3B22)}

/* ---- basket page (basket.html, assets/basket.js) ---- */
.bk-grid{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start}
.bk-lines{display:flex;flex-direction:column}
.bk-line{display:grid;grid-template-columns:88px 1fr auto auto auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.bk-img img{width:88px;height:88px;object-fit:cover;border-radius:6px;background:#f2efe9;display:block}
.bk-title{font-weight:500;color:var(--ink);text-decoration:none;line-height:1.35}
.bk-title:hover{color:var(--chestnut)}
.bk-var{font-size:13px;color:var(--muted);margin-top:2px}
.bk-unit{font-size:13px;color:var(--muted);margin-top:4px}
.bk-flag{font-size:12.5px;color:var(--muted);margin-top:4px}
.bk-flag--warn{color:#8e1f0b}
.bk-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.bk-qty button{width:34px;height:36px;border:0;background:#fff;font-size:17px;cursor:pointer;color:var(--ink)}
.bk-qty button:hover{background:var(--bone)}
.bk-qty input{width:44px;height:36px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font:inherit;-moz-appearance:textfield}
.bk-qty input::-webkit-outer-spin-button,.bk-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bk-total{font-weight:600;min-width:72px;text-align:right}
.bk-remove{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;padding:4px}
.bk-remove:hover{color:#8e1f0b}
.bk-summary .panel{border:1px solid var(--line);border-radius:10px;padding:20px 22px;background:#fff;position:sticky;top:16px}
.bk-summary h2{margin:0 0 12px;font-size:18px}
.bk-summary .summary-line{display:flex;justify-content:space-between;padding:7px 0;font-size:14.5px}
.bk-summary .summary-line.total{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-weight:600;font-size:16px}
.bk-note{text-align:left;margin:6px 0 14px;color:var(--field)}
.bk-checkout{display:flex;justify-content:center;width:100%;box-sizing:border-box;margin-bottom:10px}
.bk-checkout.is-off{opacity:.45;pointer-events:none}
.bk-continue{display:flex;justify-content:center;width:100%;box-sizing:border-box}
.bk-fine{text-align:left;margin-top:14px}
.bk-empty{padding:40px 0 20px}
.bk-empty p{font-size:16px;margin:0 0 16px}
@media (max-width:820px){
  .bk-grid{grid-template-columns:1fr}
  .bk-line{grid-template-columns:72px 1fr;grid-template-areas:"img info" "img qty" "img total";row-gap:8px}
  .bk-img{grid-area:img}.bk-img img{width:72px;height:72px}
  .bk-info{grid-area:info}.bk-qty{grid-area:qty;justify-self:start}
  .bk-total{grid-area:total;text-align:left;min-width:0}
  .bk-remove{grid-column:2;justify-self:start;padding:0}
  .bk-summary .panel{position:static}
}
body.ama .bk-summary h2{font-size:20px;letter-spacing:.04em}

/* Drawer: the full basket page, as a second button under Checkout */
.cart-foot .cart-view{display:flex;justify-content:center;align-items:center;width:100%;box-sizing:border-box;height:44px;margin-top:10px;border:1px solid var(--ink);color:var(--ink);text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.cart-foot .cart-view:hover{background:var(--bone)}

/* ---- kit builder v2 (build2.html, assets/kit2.js) ---- */
.k2-wrap{max-width:1180px;margin:0 auto;padding:28px 28px 120px}
.k2-horse{border:1px solid var(--line);border-radius:14px;padding:26px 28px 22px;background:#fff;margin-top:14px}
.k2-horse-head h1{margin:0 0 6px}
.k2-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 20px;margin-top:18px}
.k2-fld{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink);border:0;padding:0;margin:0;min-width:0}
.k2-fld input[type=text],.k2-fld input:not([type]),.k2-fld select{font:inherit;font-weight:400;font-size:14.5px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.k2-fld .ks-hint{font-weight:400;color:var(--muted);font-size:12px;margin-left:4px}
.k2-radio legend{font-size:13px;font-weight:600;margin-bottom:4px;padding:0}
.k2-radio label{display:flex;align-items:center;gap:8px;font-weight:400;font-size:14px;padding:3px 0;cursor:pointer}
.k2-radio input{accent-color:var(--chestnut)}
.k2-lbl{font-size:13px;font-weight:600}
.k2-swatches{display:flex;flex-wrap:wrap;gap:6px}
.k2-swatch{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;background:#fff;padding:5px 10px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--ink)}
.k2-swatch i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}
.k2-swatch.on{border-color:var(--ink);background:var(--ink);color:#fff}
.k2-measure{margin:16px 0 0;font-size:13px}
.k2-measure a{color:var(--chestnut)}
.k2-actions{margin-top:18px}
.k2-profile{margin-top:14px;background:var(--bone);border:1px solid var(--line);border-radius:12px;padding:12px 18px}
.k2-profile-in{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:14px}
.k2-profile-in strong{font-size:16px}
.k2-link{border:0;background:none;font:inherit;font-size:13px;color:var(--chestnut);text-decoration:underline;cursor:pointer;padding:0}
.k2-jobs{margin-top:30px}
.k2-jobs h2,.k2-shelves-head h2{margin:0 0 14px}
.k2-preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.k2-preset{text-align:left;border:1px solid var(--line);border-radius:12px;background:#fff;padding:18px;font:inherit;cursor:pointer;display:flex;flex-direction:column;gap:6px;color:var(--ink)}
.k2-preset:hover{border-color:var(--ink)}
.k2-preset strong{font-size:16px}.k2-preset span{font-size:13.5px;color:var(--muted)}.k2-preset em{font-style:normal;font-size:12px;color:var(--chestnut)}
.k2-custom{margin-top:18px}
.k2-custom summary{cursor:pointer;color:var(--chestnut);font-size:14px}
.k2-slotlist{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 24px;margin-top:14px}
.k2-slotgroup h3{font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin:8px 0 6px;color:var(--muted)}
.k2-slotopt{display:flex;align-items:center;gap:8px;font-size:14px;padding:3px 0;cursor:pointer}
.k2-slotopt input{accent-color:var(--chestnut)}
.k2-shelves{margin-top:30px}
.k2-shelves-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.k2-shelf{border-top:1px solid var(--line);padding:22px 0 8px}
.k2-shelf.owned{opacity:.6}
.k2-shelf-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}
.k2-shelf h3{margin:0 0 6px;font-size:19px}
.k2-note{font-size:13px;color:var(--muted);font-weight:400;margin-left:6px}
.k2-sizechip{display:inline-flex;align-items:center;gap:8px;font-size:13px;background:var(--bone);border:1px solid var(--line);border-radius:999px;padding:5px 6px 5px 12px;flex-wrap:wrap}
.k2-sizechip select{font:inherit;font-size:12.5px;border:1px solid var(--line);border-radius:999px;padding:3px 8px;background:#fff}
.k2-sizechip em{font-size:12px;color:var(--chestnut);font-style:normal}
.k2-advice{margin:10px 0 0;font-size:13.5px;color:var(--ink-soft,#4a4540);max-width:720px;line-height:1.5;padding-left:12px;border-left:3px solid var(--chestnut)}
.k2-owned{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer;white-space:nowrap}
.k2-owned input{accent-color:var(--chestnut)}
.k2-skipped{font-size:13.5px;color:var(--muted);margin:0 0 8px}
.k2-row-scroll{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x proximity;scrollbar-width:thin}
.k2-divider{flex:0 0 auto;display:flex;align-items:center;padding:0 6px}
.k2-divider span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.k2-card{flex:0 0 190px;scroll-snap-align:start;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;display:flex;flex-direction:column}
.k2-card.on{border-color:var(--chestnut);box-shadow:0 0 0 2px var(--chestnut)}
.k2-card-img img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:#f2efe9}
.k2-card-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.k2-card-title{font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.k2-card-var{font-size:12px;color:var(--muted)}
.k2-card-price{font-size:14px;margin-top:auto}
.k2-card-price s{color:var(--muted);font-size:12px;margin-left:4px}
.k2-save{font-size:11px;color:#fff;background:var(--chestnut);border-radius:4px;padding:1px 5px;margin-left:4px}
.k2-pick{margin-top:8px;border:1px solid var(--ink);background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:600;padding:8px;border-radius:8px;cursor:pointer}
.k2-card.on .k2-pick{background:var(--chestnut);border-color:var(--chestnut);color:#fff}
.k2-more{display:inline-block;font-size:13px;color:var(--chestnut);margin:2px 0 8px}
.k2-compare{margin-top:30px;font-size:13.5px}
.k2-compare a{color:var(--muted)}
.k2-bar{position:fixed;left:0;right:0;bottom:0;z-index:900;background:var(--ink);color:#fff;box-shadow:0 -8px 30px rgba(0,0,0,.2)}
.k2-bar-in{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 28px;flex-wrap:wrap}
.k2-bar-sum{display:flex;flex-direction:column;gap:2px;font-size:14px}
.k2-bar-sum strong{font-size:15px}
.k2-bar-save{font-size:12.5px;opacity:.85}
.k2-bar-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.k2-bar .k2-link{color:#fff;opacity:.85}
.k2-bar .add-btn{background:var(--chestnut);color:#fff}
.pdp-horse-note{font-size:13px;color:var(--ink-soft,#4a4540);background:var(--bone);border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin:0 0 10px}
.pdp-horse-note a{color:var(--chestnut);margin-left:4px}
@media (max-width:900px){.k2-row{grid-template-columns:1fr 1fr}.k2-preset-grid,.k2-slotlist{grid-template-columns:1fr}.k2-card{flex-basis:160px}}
@media (max-width:560px){.k2-wrap{padding:18px 16px 140px}.k2-row{grid-template-columns:1fr}.k2-bar-in{padding:10px 16px}.k2-bar-actions{width:100%;justify-content:space-between}}

/* ---- builder: the horse step (build.html #kitHorse) ---- */
.kit-horse .kh-row{margin-bottom:22px}
.kh-sizes{display:contents}
.kh-input{font:inherit;font-size:15px;padding:0 14px;height:44px;border:1px solid var(--line);background:var(--paper,#fff);color:var(--ink);min-width:180px}
.kh-input:hover,.kh-input:focus{border-color:var(--ink);outline:0}
.kit-horse .kit-colours{margin-bottom:8px}
.kh-measure{margin:10px 0 0}
.kh-measure a{color:var(--chestnut)}
.kit-horse .kpick-foot .ghost-btn{margin-left:auto}
.kit-horse .kpick-foot .ghost-btn+.add-btn{margin-left:12px}

/* Stock note under "Added to your basket" (product page) */
.pdp-added-note{margin:-6px 0 12px;font-size:13px;color:var(--warn-ink,#8e1f0b)}
.pdp-added-note:empty{display:none}

/* Click & collect (checkout) */
.fulfil-choice{margin-top:4px}
.collect-addr{margin:10px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
.faddr{margin:4px 0 0;font-size:12.5px;color:var(--muted)}

/* Basket: "email me my basket" (14 Sep 2026) and the per-line delivery promise */
.bk-save{margin-top:18px;padding:14px 16px;border:1px dashed var(--line,#d9cdb8);border-radius:10px;background:#fbf8f2}
.bk-save strong{display:block;margin-bottom:2px}
.bk-save-form{display:flex;gap:8px;margin:10px 0 6px}
.bk-save-form input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line,#d9cdb8);border-radius:8px;font:inherit}
.bk-save-form button{padding:10px 14px;border:0;border-radius:8px;background:var(--rust,#8a5e3c);color:#fff;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.bk-save-form button[disabled]{opacity:.6}
.bk-save .is-err{color:var(--error,#b3261e)}
.bk-save-fine{opacity:.75;margin:0}
/* At the top of the basket page: full width above the lines, form kept to a readable
   width on desktop so it reads as a short task rather than a banner. */
.bk-save--top{margin:0 0 18px}
.bk-save--top .bk-save-form{max-width:560px}
.bk-save--top .bk-save-fine{max-width:560px}
.bk-flag--uk{color:#2f6b4f}
@media(max-width:480px){.bk-save-form{flex-direction:column}}

/* ---- Rug bundle (/bundle) -------------------------------------------------------
   Built on the shop's existing tokens rather than a palette of its own: the offer is
   part of the shop, not a microsite. The one piece of new furniture is the sticky bar,
   which has to stay visible while the grid scrolls — the whole page turns on knowing
   how many rugs are picked and what one more is worth. */
.bundle-wrap{padding:0 0 120px}
.bd-hero{padding:34px 0 26px;border-bottom:1px solid var(--line)}
.bd-hero h1{font-family:'Cormorant Garamond',serif;font-size:clamp(30px,4vw,46px);line-height:1.08;margin:0 0 12px;text-wrap:balance}
.bd-sub{max-width:62ch;color:var(--ink-soft);font-size:16px;line-height:1.55;margin:0 0 20px}
.bd-note{max-width:62ch;color:var(--muted);font-size:13.5px;line-height:1.5;margin:16px 0 0}
.bd-ladder{display:flex;gap:10px;flex-wrap:wrap}
.bd-step{display:flex;flex-direction:column;gap:2px;padding:10px 16px;border:1px solid var(--line);background:var(--paper);min-width:96px}
.bd-step-n{font-family:Outfit,sans-serif;font-weight:600;font-size:13px;color:var(--muted);letter-spacing:.04em}
.bd-step-pct{font-family:Outfit,sans-serif;font-weight:700;font-size:19px;color:var(--ink)}
.bd-step.is-done{border-color:var(--field);background:#F2F6F2}
.bd-step.is-on{border-color:var(--chestnut);background:#FBF3F0}
.bd-step.is-on .bd-step-pct{color:var(--chestnut)}

/* Sticky progress bar. `position:sticky` rather than fixed so it sits inside the page
   flow and never covers the footer on a short list. */
.bd-bar{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.bd-bar-inner{display:flex;align-items:center;gap:16px;padding:12px 0}
.bd-bar-count{font-family:Outfit,sans-serif;font-size:14px;color:var(--ink-soft);white-space:nowrap}
.bd-bar-count strong{font-size:20px;color:var(--ink)}
.bd-bar-meter{flex:1;height:6px;background:var(--bone);border:1px solid var(--line);min-width:60px}
.bd-bar-meter i{display:block;height:100%;background:var(--chestnut);transition:width .25s}
.bd-bar-save{font-size:14px;color:var(--ink-soft);white-space:nowrap}
.bd-bar-save strong{color:var(--chestnut)}
.bd-bar .add-btn{width:auto;flex:0 0 auto;padding:12px 20px}
@media(max-width:720px){
  .bd-bar-inner{flex-wrap:wrap;gap:8px 12px}
  .bd-bar-meter{order:3;flex-basis:100%}
  .bd-bar .add-btn{width:100%;order:4}
  .bd-bar-save{white-space:normal}
}

.bd-pick{padding:24px 0 0}
.bd-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.bd-chip{background:var(--paper);border:1px solid var(--line);color:var(--ink-soft);font-family:Outfit,sans-serif;font-size:13.5px;padding:8px 14px;cursor:pointer}
.bd-chip:hover{border-color:var(--ink-soft)}
.bd-chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}

.bd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.bd-card{border:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column}
.bd-card.is-picked{border-color:var(--chestnut);box-shadow:inset 0 0 0 1px var(--chestnut)}
.bd-card-img{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--bone)}
.bd-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.bd-card-body{padding:12px 12px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.bd-card-brand{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bd-card-title{font-family:Outfit,sans-serif;font-size:14px;font-weight:500;line-height:1.35;margin:0;color:var(--ink)}
.bd-card-price{display:flex;align-items:baseline;gap:8px;margin-top:auto}
.bd-card-price .now{font-family:Outfit,sans-serif;font-weight:700;font-size:17px}
.bd-card-price .rrp{text-decoration:line-through;color:var(--muted);font-size:13px}
.bd-card-none{margin:0;font-size:13px;color:var(--muted)}
.bd-size{width:100%;padding:9px 10px;border:1px solid var(--line);background:var(--paper);font-family:Outfit,sans-serif;font-size:13.5px;color:var(--ink)}
.bd-size.needs{border-color:var(--chestnut);background:#FBF3F0}
.bd-pick-btn{border:1px solid var(--ink);background:var(--paper);color:var(--ink);font-family:Outfit,sans-serif;font-weight:600;font-size:14px;padding:11px 12px;cursor:pointer;transition:background .15s}
.bd-pick-btn:hover{background:var(--bone)}
.bd-pick-btn.is-on{background:var(--chestnut);border-color:var(--chestnut);color:#fff}
.bd-pick-btn:disabled{opacity:.45;cursor:not-allowed}
.bd-more{display:flex;justify-content:center;padding:28px 0}

/* ---- "What came off" rows ------------------------------------------------------
   The discount was being applied and never shown: a five-rug basket dropped £43.45
   between subtotal and total with nothing on screen to explain it, in the drawer, on
   the basket page and at the checkout alike. Each of the three now names the saving,
   in the shop's saving colour so it reads as money back rather than a charge. */
.summary-line.bk-disc span:last-child,
.cart-disc strong{color:var(--chestnut);font-variant-numeric:tabular-nums}
.summary-line.bk-disc span:first-child,
.cart-disc span{color:var(--ink-soft)}
.cart-due{border-top:1px solid var(--line);padding-top:8px;margin-top:2px}
.cart-due strong{font-size:17px}
.bk-bundle-next,.cart-bundle-next{color:var(--field);font-size:13px;line-height:1.45;margin:6px 0 0}

/* ---- Rug bundle strip on a rug's own product page ------------------------------
   Most shoppers arrive straight on a product from an ad and never see /bundle, so the
   offer travels to them. Quiet by design: it sits under the stock line and must not
   compete with Add to Basket. */
.pdp-bundle{border:1px solid var(--line);background:var(--bone);padding:14px 16px;margin:14px 0 4px}
.pdp-bundle-head{font-family:Outfit,sans-serif;font-weight:600;font-size:14.5px;color:var(--ink);margin-bottom:8px}
.pdp-bundle-rungs{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px}
.pdp-bundle-rung{font-size:14px;color:var(--ink-soft);white-space:nowrap}
.pdp-bundle-rung b{color:var(--chestnut);font-weight:700}
.pdp-bundle-link{display:inline-block;font-family:Outfit,sans-serif;font-weight:600;font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pdp-bundle-link:hover{color:var(--chestnut)}
.pdp-bundle-fine{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.bd-qty{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);background:var(--paper)}
.bd-qty-btn{background:none;border:0;font-size:18px;line-height:1;padding:8px 14px;cursor:pointer;color:var(--ink)}
.bd-qty-btn:hover{background:var(--bone)}
.bd-qty-btn:disabled{opacity:.3;cursor:not-allowed}
.bd-qty-n{font-family:Outfit,sans-serif;font-weight:600;font-size:15px;min-width:2ch;text-align:center}