/* ===========================================================================
   Dourado Auto Service
   Light, modern. Same content as the current site, restructured: real type
   scale, generous whitespace, hairline borders instead of heavy chrome,
   and a strictly black-and-white palette — no colour anywhere.
   =========================================================================== */

:root{
  --bg:#ffffff;
  --surface:#f7f7f7;
  --surface-2:#efefef;
  --line:#e5e5e5;
  --line-strong:#d2d2d2;

  --ink:#101010;
  --ink-2:#3a3a3a;
  --muted:#767676;

  /* Monochrome. Black is the only accent; everything else is paper, hairline
     or grey. Nothing on this site is coloured for decoration. */
  --accent:#101010;
  --accent-dark:#101010;
  --accent-wash:#f4f4f4;

  /* Stock state is carried by weight and a dot, not by hue. */
  /* availability only — nothing else on the site is coloured */
  --in:#1a7f37;
  --out:#c0362c;
  --ok:#101010;
  --warn:#767676;

  --r:12px;
  --r-lg:18px;
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 24px -12px rgba(0,0,0,.14);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
/* `hidden` has to beat any display a component sets on itself, or an element
   the markup says is hidden still shows. Written once here rather than as a
   rule per component. */
[hidden]{display:none !important}
/* Grid children default to min-width:auto, which lets a wide image or a long
   unbroken part number push a column past its share. This is the one-line fix. */
.grid > *,.cats > *,.product > *,.promos > *,.promo-stack > *,.usp > *,
.seo-grid > *,.seo-lead > *,.foot-cols > *,.news > *,.finder-row > *{min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{margin:0;font-weight:640;letter-spacing:-.018em;line-height:1.2}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* --- utility ------------------------------------------------------------ */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.center{text-align:center}

/* --- buttons ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:50px;padding:0 26px;border-radius:999px;font:600 15px/1 var(--font);
  border:1.5px solid transparent;cursor:pointer;transition:.16s ease;white-space:nowrap}
/* Four buttons, two for light backgrounds and two for dark. */
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#000;transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--ink);background:var(--surface)}
.btn-invert{background:#fff;color:var(--ink)}
.btn-invert:hover{background:var(--surface-2);transform:translateY(-1px)}
.btn-outline-light{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
.btn-outline-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-block{width:100%}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.btn-lg{height:56px;padding:0 32px;font-size:16px}

/* --- top strip ---------------------------------------------------------- */
.topbar{background:var(--ink);color:#cfcfcf;font-size:13px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:40px;gap:20px}
.topbar a{color:#cfcfcf}
.topbar a:hover{color:#fff}
.topbar .tb-left{display:flex;gap:20px;align-items:center;min-width:0}
.topbar .tb-left span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .tb-right{white-space:nowrap;flex:none}

/* the five contact icons, separated by hairlines like the current site */
.tb-icons{display:flex;align-items:center}
.tb-icons > *{display:grid;place-items:center;width:38px;height:40px;position:relative;
  color:#cfcfcf;cursor:pointer}
.tb-icons > * + *{box-shadow:inset 1px 0 0 rgba(255,255,255,.16)}
.tb-icons svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
.tb-icons svg.fill{stroke:none;fill:currentColor;width:17px;height:17px}
.tb-icons > *:hover,.tb-icons > *:focus-visible{color:#fff;outline:none}

/* Label on hover or keyboard focus. A real element, not a title attribute,
   so it appears at once and can hold the whole week of opening hours. */
.tt-pop{position:absolute;top:calc(100% + 9px);left:0;z-index:70;
  background:#fff;color:var(--ink);border-radius:var(--r);
  box-shadow:0 10px 30px rgba(0,0,0,.2);padding:9px 13px;
  font-size:13px;line-height:1.45;white-space:nowrap;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:.14s;pointer-events:none}
.tt-pop::before{content:"";position:absolute;bottom:100%;left:13px;border:6px solid transparent;
  border-bottom-color:#fff}
.tt:hover .tt-pop,.tt:focus-visible .tt-pop,.tt:focus-within .tt-pop{
  opacity:1;visibility:visible;transform:translateY(0)}
.tt-hours{padding:10px 6px}
.tt-hours b{display:flex;justify-content:space-between;gap:26px;
  padding:4px 10px;font-weight:400;color:var(--muted)}
.tt-hours b.on{background:var(--surface);border-radius:6px;color:var(--ink);font-weight:650}

/* Open / closed, worked out from the hours in Dubai time. */
.tb-open{display:inline-flex;align-items:center;gap:8px;color:#a3a3a3}
.tb-open i{width:7px;height:7px;border-radius:50%;border:1.5px solid #a3a3a3;box-sizing:border-box}
.tb-open.is-open{color:#fff}
.tb-open.is-open i{background:#25D366;border-color:#25D366}

/* --- header ------------------------------------------------------------- */
.site-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;gap:28px;height:76px}
.brand{display:flex;align-items:center;gap:12px;line-height:1.05;white-space:nowrap;flex:none}
.brand img{height:42px;width:auto}
.brand .wordmark{display:flex;flex-direction:column}
.brand b{font-size:19px;font-weight:750;letter-spacing:-.02em}
.brand i{font-style:normal;font-size:9.5px;letter-spacing:.2em;color:var(--muted);font-weight:600;
  text-transform:uppercase}
.icon-btn{width:42px;height:42px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;
  display:grid;place-items:center;position:relative;flex:none;transition:.15s;cursor:pointer}
.icon-btn:hover{border-color:var(--ink)}
.icon-btn svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.8}
.icon-btn .n{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;border-radius:999px;
  background:var(--ink);color:#fff;border:2px solid #fff;padding:0 4px;
  display:grid;place-items:center;
  font-size:11px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.burger{display:none}
.nav{display:flex;gap:26px;font-size:13px;font-weight:650;text-transform:uppercase;letter-spacing:.09em}
.nav a{padding:6px 0;border-bottom:2px solid transparent;color:var(--ink-2)}
.nav a:hover{color:var(--ink);border-color:var(--accent)}
.head-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.head-link{font-size:12.5px;font-weight:650;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-2);white-space:nowrap}
.head-link:hover{color:var(--ink)}
/* Login / Register, with a thin divider that is not a real slash so it never
   gets picked up when the text is copied. */
.head-auth{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.head-auth a{font-size:12.5px;font-weight:650;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-2)}
.head-auth a:hover{color:var(--ink)}
.head-auth s{text-decoration:none;color:var(--line-strong);font-size:12.5px}

.head-cart{display:flex;align-items:center;white-space:nowrap}
.hc-ico{position:relative;width:40px;height:40px;border-radius:999px;border:1px solid var(--line-strong);
  display:grid;place-items:center;flex:none;transition:.15s}
.head-cart:hover .hc-ico{border-color:var(--ink);background:var(--surface)}
.hc-ico svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.7}
/* Centred with grid, not line-height. The 2px ring is inside the 20px box
   (box-sizing: border-box), so a line-height matching the full height drops
   the digit below centre by exactly the border width. */
.hc-ico .n{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:999px;
  background:var(--ink);color:#fff;border:2px solid #fff;padding:0 4px;
  display:grid;place-items:center;
  font-size:11px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}


/* part number search in the header */
.hsearch{position:relative;flex:1;max-width:340px}
.mdrawer form{position:relative}
.hsearch input{width:100%;height:44px;padding:0 16px 0 42px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  font:400 14.5px var(--font)}
.hsearch input::placeholder{color:#949494}
.hsearch input:focus{outline:none;border-color:var(--ink);background:#fff}
.hsearch svg{position:absolute;left:15px;top:13px;width:18px;height:18px;stroke:#949494;fill:none;stroke-width:2}

/* --- search suggestions -------------------------------------------------
   One dropdown, used by the header box and the shop box. The panel is a child
   of the input's wrapper, so it follows the field wherever the field goes.
   ------------------------------------------------------------------------ */
.sg{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:80;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 18px 44px rgba(0,0,0,.17);overflow-y:auto;max-height:70vh;
  display:none;text-align:left}
.sg.on{display:block}
.sg-group{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:12px 16px 6px;background:#fff}
.sg-item{display:flex;align-items:center;gap:12px;padding:9px 16px;color:var(--ink);font-size:14.5px}
.sg-item img{width:42px;height:34px;object-fit:contain;border-radius:6px;background:#fff;flex:none}
.sg-item:hover,.sg-item.on{background:var(--surface)}
.sg-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-t b{font-weight:750}
.sg-m{color:var(--muted);font-size:12.5px;white-space:nowrap;
  font-variant-numeric:tabular-nums;flex:none}
/* A product title needs the whole row, so its part number and price sit on a
   second line instead of competing with it for width. */
.sg-item.has-img{flex-wrap:wrap;align-items:center;row-gap:1px}
.sg-item.has-img img{grid-row:span 2}
.sg-item.has-img .sg-t{flex:1 1 calc(100% - 54px)}
.sg-item.has-img .sg-m{flex:1 1 100%;margin-left:54px;white-space:normal}
.sg-fix{padding:11px 16px;background:var(--surface);border-bottom:1px solid var(--line);
  font-size:13.5px;color:var(--ink-2)}
.sg-none{padding:18px 16px;font-size:14.5px;color:var(--ink)}
.sg-none span{display:block;margin-top:5px;font-size:13px;color:var(--muted)}
.sg-all{display:block;padding:13px 16px;border-top:1px solid var(--line);background:var(--surface);
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.sg-all:hover,.sg-all.on{background:var(--ink);color:#fff}

/* --- hero --------------------------------------------------------------- */
.hero{position:relative;background:var(--ink);overflow:hidden;isolation:isolate}
.hero-slides{position:absolute;inset:0}
.hero-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;animation:heroFade 21s infinite}
.hero-slides img:nth-child(1){animation-delay:0s}
.hero-slides img:nth-child(2){animation-delay:7s}
.hero-slides img:nth-child(3){animation-delay:14s}
@keyframes heroFade{
  0%{opacity:0;transform:scale(1.06)}
  4%{opacity:.88}
  31%{opacity:.88}
  35%{opacity:0}
  100%{opacity:0;transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .hero-slides img{animation:none;opacity:0}
  .hero-slides img:first-child{opacity:.88}
}
/* Only as much shade as the words need. It is heavy where the headline sits
   and clears to almost nothing on the right, so the photograph is actually
   visible instead of being a texture behind a black panel. */
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(16,16,16,.86) 0%,rgba(16,16,16,.62) 30%,
                             rgba(16,16,16,.22) 62%,rgba(16,16,16,.06) 100%)}
/* A wide, soft shadow rather than more shade over the picture: it is invisible
   as a shadow but holds the text up if a bright photo is ever swapped in, so
   the hero stays readable without being darkened again. */
.hero-inner{position:relative;z-index:2;padding:96px 0 112px;max-width:760px;
  text-shadow:0 1px 2px rgba(0,0,0,.35),0 2px 22px rgba(0,0,0,.55)}
/* The emphasis is carried by brightness, not by a second colour: the lead-in
   sits back in grey and the subject lands in white. */
.hero h1{color:#c4c4c4;font-size:clamp(31px,4.8vw,60px);letter-spacing:-.03em;text-transform:uppercase}
.hero h1 em{font-style:normal;color:#fff;display:block}
.hero p{color:#dadada;font-size:17px;max-width:52ch;margin:20px 0 0}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px;text-shadow:none}
.hero-stats{display:flex;gap:34px;margin-top:40px;flex-wrap:wrap}
.hero-stats div{color:#c4c4c4;font-size:13px;letter-spacing:.04em}
.hero-stats b{display:block;color:#fff;font-size:24px;font-weight:700;letter-spacing:-.02em}

/* --- part finder -------------------------------------------------------- */
.finder{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:24px;margin:-60px auto 0;position:relative;z-index:5}
.finder h4{font-size:16px;margin-bottom:4px;display:flex;align-items:center;gap:10px}
.finder h4 svg{width:19px;height:19px;stroke:var(--accent-dark);fill:none;stroke-width:2}
.finder .hint{color:var(--muted);font-size:13.5px;margin:0 0 18px}
.finder-row{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:12px;align-items:end}
.finder-row .btn{height:50px}
.field label{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field select{width:100%;height:50px;padding:0 14px;border-radius:var(--r);
  border:1px solid var(--line-strong);background:#fff;color:var(--ink);font:500 15px var(--font);
  appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
.field select:focus{outline:none;border-color:var(--ink)}
.field select:disabled{background-color:var(--surface);color:#a2a2a2}

/* --- sections -----------------------------------------------------------
   Consecutive sections share their gap instead of stacking two full paddings,
   which is what made the old page feel like a stack of unrelated widgets. */
section{padding:72px 0}
section.tight{padding:40px 0}
section + section{padding-top:0}
section.tight + section{padding-top:28px}
.sec-head{margin-bottom:34px}
.sec-head h2{font-size:clamp(24px,3vw,34px)}
.sec-head p{color:var(--muted);margin:12px 0 0;max-width:72ch;font-size:16.5px}
.sec-row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:26px}
/* Section headings are uppercased in CSS rather than in the markup, so the
   words in the page source stay exactly as they were written. */
.sec-row h2,.sec-row h3{font-size:clamp(20px,2.3vw,26px);text-transform:uppercase;letter-spacing:.005em}
.more{font-size:14.5px;font-weight:600;color:var(--accent-dark);white-space:nowrap}
.more:hover{text-decoration:underline}

/* --- USP trio ----------------------------------------------------------- */
.usp{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.usp .item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.usp .ico{width:52px;height:52px;border-radius:14px;background:var(--surface-2);
  display:grid;place-items:center;margin-bottom:18px;overflow:hidden;flex:none}
.usp .ico img{width:100%;height:100%;object-fit:cover}
.usp .ico svg{width:24px;height:24px;stroke:var(--accent-dark);fill:none;stroke-width:1.9}
.usp h5{font-size:16.5px;margin-bottom:8px}
.usp p{margin:0;color:var(--muted);font-size:15px}
.usp a{color:var(--ink);border-bottom:1px solid var(--line-strong)}
.usp a:hover{border-color:var(--ink)}

/* --- category tiles ----------------------------------------------------- */
.cat{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:.18s;display:flex;flex-direction:column}
.cat:hover{border-color:var(--line-strong);box-shadow:var(--shadow);transform:translateY(-3px)}
.cat-img{background:var(--surface-2);aspect-ratio:16/11;overflow:hidden}
.cat-img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.cat:hover .cat-img img{transform:scale(1.05)}
.cat-txt{padding:14px 16px 16px;display:flex;flex-direction:column;gap:3px;flex:1}
.cat h5{font-size:15px;line-height:1.3}
.cat span{color:var(--muted);font-size:13px}
.cat .arrow{margin-top:auto;padding-top:9px;color:var(--accent-dark);font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase}

/* --- rails (horizontal carousels) ---------------------------------------
   A native scroller with snap points rather than a slider library: touch and
   trackpad swiping work for free, the arrows just scroll it, and the whole
   thing still shows its content with JavaScript switched off.

   Deliberately NOT infinite — the last card is the last card, and the arrow
   that would take you past it is disabled. A row of parts is a finite list,
   and looping one hides where it ends.
   ------------------------------------------------------------------------ */
.rail{position:relative}
.rail-track{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  /* room for the cards' hover lift and shadow, which would otherwise be clipped */
  padding:6px 2px 14px;margin:-6px -2px -14px}
.rail-track::-webkit-scrollbar{display:none}
.rail-track > *{flex:0 0 var(--item,220px);scroll-snap-align:start}
.t-make{--item:186px}
.t-cat{--item:190px}
.t-card{--item:238px;gap:20px}

.rail-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:44px;height:44px;border-radius:999px;background:#fff;border:1px solid var(--line-strong);
  display:grid;place-items:center;cursor:pointer;padding:0;transition:.15s;box-shadow:var(--shadow)}
.rail-btn svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2;transition:.15s}
.rail-btn:hover:not(:disabled){background:var(--ink);border-color:var(--ink)}
.rail-btn:hover:not(:disabled) svg{stroke:#fff}
.rail-btn:disabled{opacity:.28;cursor:default;box-shadow:none}
.rail-btn.prev{left:-21px}
.rail-btn.next{right:-21px}
/* nothing to scroll: the arrows take themselves away */
.rail[data-static] .rail-btn{display:none}

@media(prefers-reduced-motion:reduce){.rail-track{scroll-behavior:auto}}

/* A plain grid of make tiles, for pages that are not the home page and so
   have no reason to put them in a carousel. (The home page uses .rail-track.) */
.makes{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:16px}

/* --- make tiles ---------------------------------------------------------
   Centred, logo over name. Whatever logo file is dropped in gets flattened to
   solid black by the filter below and inverted to white on hover, so a set
   collected from different places still reads as one set. A tile with no logo
   yet simply leads with its name and sits level with the others. */
.make{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 18px 20px;min-height:196px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:2px;transition:.18s}
.make:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--shadow)}

/* The marks are the real brand logos, in colour, drawn square (800×800), so
   the tile keeps a white face on hover and the logo simply grows a little. */
.make-logo{margin-bottom:10px}
.make-logo img{width:92px;height:92px;object-fit:contain;object-position:center;transition:.18s}
.make:hover .make-logo img{transform:scale(1.06)}

.make-name{font-size:17px;font-weight:650;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.make.has-logo .make-name{font-size:14px;font-weight:600}
.make-n{font-size:13.5px;color:var(--muted);margin-top:5px}
.make-sub{font-size:12.5px;color:#949494}

/* --- promo banners ------------------------------------------------------ */
.promos{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:stretch}
.promo-stack{display:grid;grid-template-rows:repeat(3,1fr);gap:18px}
.promo{position:relative;border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;padding:26px;color:#fff;background:var(--ink)}
.promo.big{min-height:440px;padding:34px}
.promo-stack .promo{min-height:135px}
.promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.58;transition:.5s}
.promo:hover img{transform:scale(1.05)}
.promo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(16,16,16,.86) 0%,rgba(16,16,16,.28) 62%,rgba(16,16,16,.1) 100%)}
.promo > *{position:relative;z-index:2}
.promo .kick{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:8px}
.promo h2{font-size:clamp(26px,3vw,38px);margin-bottom:8px;letter-spacing:-.02em}
.promo h3{font-size:21px;margin-bottom:6px}
.promo p{margin:0 0 14px;color:#e3e3e3;font-size:14.5px;max-width:36ch}
.promo .lnk{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.promo:hover .lnk{text-decoration:underline;text-underline-offset:4px}

/* --- product cards ------------------------------------------------------ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:.18s;
  /* The tile decides its own layout from its own width, not the window's — the
     same tile appears in a four-column grid and in a two-item rail. */
  container-type:inline-size}
.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow);transform:translateY(-3px)}
/* The photographs are landscape on white, with the part sitting in a band
   across the middle and empty space above and below it. Fitting the whole
   frame made the part small; filling the frame cut the ends off long parts.

   So: the image always spans the full width — its length is never touched —
   and the tile is shorter than the photo, so the empty top and bottom are
   clipped instead. The part ends up filling far more of the tile, and a door
   moulding still reaches both edges.

   --shot is the tile's shape, and the only number to touch. At 1.6 a part can
   fill about 83% of the photo's height before anything is clipped, so there is
   real headroom. Raise it towards 1.8 to crop tighter and show the part
   larger, drop it towards 1.4 for a taller tile that shows more of the frame.
   It governs every product tile on the site. */
:root{--shot:1.6}
.card-img{position:relative;background:#fff;aspect-ratio:var(--shot);
  overflow:hidden;display:grid;place-items:center}
.card-img img{grid-area:1/1;width:100%;height:auto;max-width:none;display:block}
/* The link that covers the picture. It sits under the save button, which is
   why the button needs the higher z-index rather than this one. */
.card-hit{position:absolute;inset:0;z-index:1}

.badge{position:absolute;top:10px;left:10px;font-size:10.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:5px 10px;border-radius:999px;
  color:#fff;z-index:2}
.badge-out{background:var(--ink-2)}       /* a fact, not an alarm */
.badge-sale{background:var(--out)}        /* the one thing worth shouting about */

/* Save. Outlined until it is pressed, then filled — the state is the fill, so
   it reads at a glance across a grid of twenty tiles. */
.card-save{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;
  border-radius:999px;border:1px solid var(--line-strong);background:#fff;
  display:grid;place-items:center;cursor:pointer;transition:.15s;padding:0}
.card-save svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:1.6}
.card-save:hover{border-color:var(--ink);transform:scale(1.06)}
.card-save[aria-pressed="true"] svg{fill:var(--ink)}

.card-body{padding:0 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
/* A rule between the photograph and the words, and another above the price —
   the two places the eye needs a stop. */
.card-body::before{content:"";display:block;height:1px;background:var(--line);margin-bottom:14px}
.card-brand{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.card-name{font-size:15px;font-weight:700;line-height:1.34;color:var(--ink);text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-name:hover{text-decoration:underline;text-underline-offset:2px}
.card-pn{font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);
  letter-spacing:.03em}

/* Deliberately nowrap. Letting this wrap meant a tile with AED 15,000 broke to
   two lines while AED 200 beside it stayed on one, so a row of tiles came out
   ragged. The decision is made by the tile's WIDTH below, which is identical
   for every tile in a row — so a row is always all one way or all the other,
   whatever the prices in it happen to be. */
.card-foot{margin-top:auto;padding-top:13px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap}
.card-price{font-weight:800;font-size:17.5px;letter-spacing:-.02em;line-height:1.2;
  white-space:nowrap;min-width:0}
.card-price s{display:block;font-size:12.5px;font-weight:500;color:var(--muted);
  letter-spacing:0;margin-top:1px}

/* Add to cart: icon, hairline, words — one pill. */
.card-add{margin-left:auto}
.card-add button{display:flex;align-items:center;gap:9px;height:42px;padding:0 14px;
  border:0;border-radius:999px;background:var(--ink);color:#fff;cursor:pointer;
  font:650 12.5px var(--font);transition:.15s;white-space:nowrap}
.card-add button:hover{background:#000;transform:translateY(-1px)}
.card-add button:active{transform:none}
.card-add svg{width:17px;height:17px;flex:none;fill:none;stroke:#fff;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  border-right:1px solid rgba(255,255,255,.3);padding-right:9px;box-sizing:content-box}
.card-add button[disabled]{opacity:.5;cursor:default;transform:none}

/* Out of stock. The photograph goes quiet rather than disappearing — people
   still want to see the part, and they still want to ask about it. */
.card.is-out .card-img img{filter:grayscale(1);opacity:.52}
.card.is-out .card-price{color:var(--ink-2)}
.card-ask{margin-left:auto;display:inline-flex;align-items:center;height:42px;padding:0 18px;
  border:1px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--ink);
  font:650 13px var(--font);white-space:nowrap;transition:.15s}
.card-ask:hover{border-color:var(--ink);background:var(--surface)}

/* Narrow tiles: the price keeps its line and the button takes the next one,
   full width, rather than both being squeezed into something unreadable. */
/* 286px is where the widest price this shop sells — AED 40,000 — stops fitting
   beside the button. Below it the price takes the line and the button takes the
   next one, which also makes it an easier target on a phone.

   Stacked, both are centred: a left-aligned price above a full-width button
   left an uneven margin down one side of every tile. */
@container (max-width:286px){
  .card-foot{flex-direction:column;align-items:center;gap:12px;text-align:center}
  .card-price{text-align:center}
  .card-add{margin-left:0;width:100%}
  .card-add button{width:100%;justify-content:center}
  .card-ask{margin-left:0;width:100%;justify-content:center}
}

/* --- newsletter --------------------------------------------------------- */
.news{background:var(--ink);border-radius:var(--r-lg);padding:46px;display:grid;
  grid-template-columns:1.2fr 1fr;gap:34px;align-items:center;color:#fff}
.news h3{font-size:26px;margin-bottom:10px}
.news p{color:#c9c9c9;margin:0;font-size:15.5px}
.news form{display:flex;gap:10px}
.news input{flex:1;height:52px;padding:0 18px;border-radius:999px;border:1px solid #333333;
  background:#1c1c1c;color:#fff;font:400 15px var(--font)}
.news input::placeholder{color:#828282}
.news input:focus{outline:none;border-color:#fff}

/* --- SEO prose blocks --------------------------------------------------- */
.seo-lead{border-top:1px solid var(--line);padding-top:54px;
  display:grid;grid-template-columns:1fr 1.25fr;gap:40px;align-items:start}
.seo-lead h2{font-size:clamp(23px,2.7vw,32px);margin:0;text-transform:uppercase;letter-spacing:.005em}
.seo-lead p{color:var(--ink-2);margin:0;font-size:16.5px}
.seo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:46px}
.seo-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.seo-card .ico{width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;margin-bottom:16px}
/* These three are white line icons — they were drawn for the old site's dark
   background, so greyscaling them left white on white and they vanished.
   brightness(0) forces any opaque colour to solid black and keeps the
   transparency, which works whatever colour the source happens to be. */
.seo-card .ico img{width:22px;height:22px;object-fit:contain;filter:brightness(0);opacity:.85}
.seo-card h2,.seo-card h3{font-size:18.5px;margin-bottom:10px;letter-spacing:-.01em}
.seo-card p{margin:0;color:var(--ink-2);font-size:15.5px}
.seo-card a{color:var(--ink);border-bottom:1px solid var(--line-strong)}
.seo-card a:hover{border-color:var(--ink)}
.contact-strip{background:var(--ink);border-radius:var(--r-lg);color:#fff;
  padding:32px 34px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:34px}
.contact-strip h3{font-size:21px;margin-bottom:8px;letter-spacing:-.01em}
.contact-strip p{margin:0;color:#c9c9c9;font-size:15.5px}
.contact-strip a.wa{font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
.contact-strip a.wa:hover{text-decoration:underline}
.contact-strip .cs-cta{display:flex;gap:12px;flex-wrap:wrap}

/* --- breadcrumbs, page heads -------------------------------------------- */
.crumbs{font-size:13.5px;color:var(--muted);padding:24px 0 0}
.crumbs a:hover{color:var(--accent-dark)}
.page-head{padding:34px 0 10px}
.page-head h1{font-size:clamp(26px,3.4vw,38px);margin-bottom:10px}
.page-head p{color:var(--muted);margin:0;max-width:70ch}
/* --- shop bar ------------------------------------------------------------
   Search on its own line, then filters, then sort. No grey panel wrapping
   the lot: a hairline under it is enough to group the controls, and it stops
   the page opening with a heavy box above the products.
   ------------------------------------------------------------------------ */
.shopbar{margin:6px 0 26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.sb-search{display:flex;gap:10px;margin-bottom:20px}
.sb-field{position:relative;flex:1;min-width:0}
.sb-field input{width:100%;height:52px;padding:0 16px 0 46px;border-radius:999px;
  border:1px solid var(--line-strong);background:#fff;color:var(--ink);font:400 15.5px var(--font)}
.sb-field input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(16,16,16,.06)}
.sb-field svg{position:absolute;left:17px;top:17px;width:18px;height:18px;
  stroke:var(--muted);fill:none;stroke-width:2;pointer-events:none}
.sb-search .btn{height:52px;padding:0 30px}

.sb-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sb-filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
/* Sort is a different kind of act from filtering, so it sits apart, after a
   divider, rather than being a fourth pill in the same row. */
.sb-sort{display:flex;align-items:flex-end;padding-left:24px;
  border-left:1px solid var(--line);align-self:stretch}
.shopbar .field label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.shopbar .field select{height:46px;min-width:170px;padding:0 38px 0 15px;border-radius:var(--r);
  border:1px solid var(--line-strong);background-color:#fff;color:var(--ink);
  font:550 14.5px var(--font);appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:17px}
.shopbar .field select:focus{outline:none;border-color:var(--ink)}

.didmean{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 16px;margin:0 0 22px;font-size:14.5px;color:var(--ink-2)}
.didmean b{color:var(--ink)}

/* --- read more -----------------------------------------------------------
   The toggle is inline, so it falls straight after the last word rather than
   dropping onto a line of its own. Hiding the second paragraph outright, with
   no height animation, is what makes that possible.
   ------------------------------------------------------------------------ */
.readmore{padding:0;margin:0 0 22px;max-width:92ch}
.readmore h1,.readmore h2{font-size:clamp(19px,2.2vw,24px);text-transform:uppercase;
  letter-spacing:.005em;margin-bottom:10px}
/* When the intro is the page's heading it carries the weight a page title
   should, without becoming a different size on every other shop view. */
.readmore.is-head{margin-top:34px}
.readmore.is-head h1{font-size:clamp(23px,3vw,34px);margin-bottom:14px}
.readmore p{color:var(--ink-2);margin:0;font-size:16px}
.readmore a{color:var(--ink);border-bottom:1.5px solid var(--line-strong)}
.readmore a:hover{border-color:var(--ink)}
.rm-p2{display:none;margin-top:12px !important}
#rm:checked ~ .rm-p2{display:block}
#rm:checked ~ .rm-p1 .rm-btn{display:none}
.rm-btn{display:inline;cursor:pointer;margin-left:7px;white-space:nowrap;
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);border-bottom:2px solid var(--ink)}
.rm-btn:hover{color:#000;border-color:#000}

/* How many of what you are looking at, just above the grid. */
.resultline{color:var(--muted);font-size:14.5px;margin:0 0 18px}
.resultline b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}

.chips{display:flex;gap:9px;flex-wrap:wrap;margin:22px 0 30px}
/* --- pagination ----------------------------------------------------------
   Windowed, so the row is the same length whether there are 12 pages or 200.
   Under 760px the numbers give way to "Page 6 of 12 ▾" between the arrows —
   tap it for every page and jump straight to one —
   because seven pills will not sit on one line on a phone and wrapping them
   into a block is worse than not showing them.
   ------------------------------------------------------------------------ */
.pager{display:flex;align-items:center;justify-content:center;gap:8px;
  margin:38px 0 10px;flex-wrap:nowrap}
.pg-pages{display:flex;align-items:center;gap:8px}
.pg{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 10px;border-radius:999px;
  border:1px solid var(--line-strong);background:#fff;color:var(--ink-2);
  font-size:14px;font-weight:550;font-variant-numeric:tabular-nums;transition:.15s}
.pg:hover{border-color:var(--ink);color:var(--ink)}
.pg.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pg-gap{display:inline-flex;align-items:flex-end;justify-content:center;
  width:22px;height:44px;padding-bottom:12px;color:var(--line-strong);user-select:none}
.pg-arrow{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:999px;border:1px solid var(--line-strong);
  background:#fff;flex:none;transition:.15s}
.pg-arrow svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:2}
.pg-arrow:hover{background:var(--ink);border-color:var(--ink)}
.pg-arrow:hover svg{stroke:#fff}
.pg-arrow.is-off{opacity:.3;pointer-events:none}
.pg-count{display:none;position:relative;align-items:center;gap:8px;height:44px;padding:0 16px 0 18px;
  border:1px solid var(--line-strong);border-radius:999px;background:#fff;font-size:14.5px;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer}
.pg-count b{color:var(--ink);font-weight:650}
.pg-count svg{width:15px;height:15px;stroke:var(--ink);fill:none;stroke-width:2}
.pg-jump{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;-webkit-appearance:none;appearance:none}

@media(max-width:760px){
  .pg-pages{display:none}
  .pg-count{display:inline-flex}
  .pager{gap:6px}
}
.chip{display:inline-flex;align-items:center;font-size:13.5px;font-weight:500;
  padding:9px 16px;border-radius:999px;
  border:1px solid var(--line-strong);color:var(--ink-2);background:#fff}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.count{color:var(--muted);font-size:14.5px}

/* --- product page ------------------------------------------------------- */
/* The gallery takes more of the row than it used to: on the page where
   someone is deciding whether this is the right part, the photograph is the
   argument. The right column still holds the title, price, buttons and spec
   table comfortably. */
.product{display:grid;grid-template-columns:1.35fr 1fr;gap:40px 48px;padding:26px 0 28px;
  align-items:start}
/* The spec table moved into the tabbed panel below, so this row is just the
   photograph and the buy box — and the buy box is now the shorter of the two,
   which is the right way round. */
.pg-media{grid-column:1}
.pg-buy{grid-column:2}
/* Nothing is trimmed here. This is the detail view, so the whole frame shows
   and the box matches the shape of the photographs, which wastes no space
   while keeping the part as large as the column allows. */
.gallery-main{display:grid;place-items:center;width:100%;position:relative;padding:0;
  cursor:zoom-in;aspect-ratio:4/3;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.gallery-main img{grid-area:1/1;width:100%;height:100%;object-fit:contain;padding:14px;display:block}
.gallery-main .zoom{position:absolute;right:14px;bottom:14px;width:40px;height:40px;
  border-radius:999px;background:rgba(255,255,255,.92);border:1px solid var(--line-strong);
  display:grid;place-items:center;transition:.15s}
.gallery-main .zoom svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2}
.gallery-main:hover .zoom{background:var(--ink);border-color:var(--ink)}
.gallery-main:hover .zoom svg{stroke:#fff}

.thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.thumb{width:88px;height:66px;padding:5px;border-radius:9px;border:1px solid var(--line);
  background:#fff;cursor:pointer;opacity:.6;transition:.15s;overflow:hidden;
  display:grid;place-items:center}
.thumb img{grid-area:1/1;width:100%;height:100%;object-fit:contain;display:block}
.thumb:hover,.thumb.on{opacity:1;border-color:var(--ink)}
h1.title{font-size:clamp(23px,2.9vw,33px);margin:12px 0 18px}
.partno{display:flex;align-items:center;gap:14px;background:var(--accent-wash);
  border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;margin-bottom:18px}
.partno .lbl{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.partno .val{font:650 18px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}
.fitment{border-left:3px solid var(--accent);padding:4px 0 4px 15px;margin:0 0 20px;color:var(--ink-2);font-size:15.5px}
.fitment a{font-weight:600;color:var(--ink);border-bottom:1px solid var(--line-strong)}
.fitment a:hover{border-color:var(--ink)}
.price{font-size:clamp(26px,3vw,33px);font-weight:720;margin:2px 0 8px;letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price s{font-size:.52em;font-weight:500;color:var(--muted);letter-spacing:0}
.price em{font-style:normal;font-size:.36em;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#fff;background:var(--out);padding:5px 10px;border-radius:999px}
/* Out of stock on the part's own page: say what to do next, not just no. */
.oos-note{margin:0;padding:15px 17px;border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--surface);font-size:14px;line-height:1.55;color:var(--ink-2)}
.stock{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:8px;margin-bottom:24px}
/* The one place colour earns its keep: availability is the fact a buyer scans
   for, and green/red is read before the words are. */
.dot{width:9px;height:9px;border-radius:50%;box-sizing:border-box;flex:none}
.in{color:var(--in)}  .in .dot{background:var(--in)}
.out{color:var(--out)} .out .dot{background:var(--out)}
/* Quantity, then the two buy actions, then the ask-us fallback. */
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:28px}
.qty{display:inline-flex;align-items:center;height:50px;border:1px solid var(--line-strong);
  border-radius:999px;overflow:hidden;background:#fff;flex:none}
.qty button{width:44px;height:100%;border:0;background:none;cursor:pointer;
  font:400 20px/1 var(--font);color:var(--ink);transition:.15s}
.qty button:hover{background:var(--surface)}
.qty input{width:46px;height:100%;border:0;text-align:center;background:none;
  font:650 15px var(--font);color:var(--ink);-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.qty input:focus{outline:none}
.act-btns{display:flex;gap:10px;flex:1;min-width:260px}
.act-btns .btn{flex:1;min-width:0}
.btn-wide{width:100%}
.added{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:11px 14px;margin:0 0 16px;font-size:14.5px;color:var(--ink)}
.added a{font-weight:650;border-bottom:1px solid var(--line-strong)}

/* --- product tabs --------------------------------------------------------
   Radio inputs, so the panels switch with no JavaScript at all. Only the
   open panel is in the flow, so the section is the height of what you are
   actually reading. */
/* It is a <section>, so the site-wide section padding (72px top and bottom)
   would apply — that was the empty band above and below the table. */
section.tabs{margin:0 0 10px;padding:0;border-top:1px solid var(--line)}
.tabs + .sec-row{margin-top:44px}
.tab-bar{display:flex;gap:30px;border-bottom:1px solid var(--line);margin-bottom:8px;
  overflow-x:auto;scrollbar-width:none}
.tab-bar::-webkit-scrollbar{display:none}
.tab{padding:12px 0;cursor:pointer;white-space:nowrap;
  font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s}
.tab:hover{color:var(--ink)}
#tab-info:checked ~ .tab-bar label[for="tab-info"],
#tab-desc:checked ~ .tab-bar label[for="tab-desc"]{color:var(--ink);border-bottom-color:var(--ink)}
.tab-panel{display:none;max-width:88ch}
#tab-info:checked ~ #panel-info,
#tab-desc:checked ~ #panel-desc{display:block}
#panel-desc{margin:0;padding:0;font-size:16.5px}
#panel-desc p{margin:0 0 15px}
.desc{color:var(--ink-2);font-size:15.5px}
.spec{width:100%;border-collapse:collapse;font-size:15.5px}
.spec th,.spec td{text-align:left;padding:11px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.spec th{color:var(--muted);font-weight:600;width:min(34%,300px);font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;padding-right:24px}
.spec td{color:var(--ink)}

/* --- prose -------------------------------------------------------------- */
.prose{max-width:74ch;margin:0 auto;padding:12px 0 70px;font-size:17px;color:var(--ink-2)}
.prose h1{color:var(--ink);font-size:clamp(27px,3.4vw,38px);margin:16px 0 18px}
.prose h2{color:var(--ink);font-size:23px;margin:38px 0 12px}
.prose h3{color:var(--ink);font-size:19px;margin:28px 0 10px}
.prose a{color:var(--ink);border-bottom:1.5px solid var(--accent)}
.prose a:hover{background:var(--accent-wash)}
.prose figure{margin:28px 0}
.prose img{border-radius:var(--r)}
.prose figcaption{font-size:13.5px;color:var(--muted);margin-top:9px;text-align:center}
.post-meta{color:var(--muted);font-size:14.5px;margin-bottom:8px}

/* --- footer -------------------------------------------------------------
   Laid out like the current site's footer — four columns, chevron link lists,
   a stacked newsletter, social circles and payment marks over the copyright
   line — on white, in black, with the rule above it doing the separating that
   the old grey service strip used to do.
   ------------------------------------------------------------------------ */

/* Full-window rule: it sits outside .wrap, so it is already edge to edge.
   A single hairline rather than a heavy bar — it only has to say "the page
   ends here", and at 1px it reads as a considered divider instead of a slab. */
.foot-rule{height:0;border-top:1px solid var(--ink);margin:56px 0 52px}

.site-foot{padding:0 0 0;color:var(--ink-2);font-size:15px}
.foot-cols{display:grid;grid-template-columns:2.1fr 1fr 1fr 1.5fr;gap:48px}
.foot-cols h4{font-size:18px;font-weight:650;letter-spacing:-.01em;color:var(--ink);margin-bottom:18px}

/* Chevron link lists, each row separated by a hairline. */
.foot-links{list-style:none;margin:0;padding:0}
.foot-links li{border-bottom:1px solid var(--line)}
.foot-links li:last-child{border-bottom:0}
.foot-links a{display:flex;align-items:center;gap:10px;padding:10px 0;color:var(--muted);font-size:14.5px}
.foot-links a:hover{color:var(--ink)}
.foot-links a::before{content:"›";font-size:17px;line-height:1;color:var(--line-strong);transition:.15s}
.foot-links a:hover::before{color:var(--ink);transform:translateX(2px)}

.foot-about p{margin:0 0 16px;color:var(--muted);font-size:14.5px;max-width:46ch}

/* Social marks: outlined circles, filled glyphs, black on hover. */
.social{display:flex;gap:10px}
.social a{width:38px;height:38px;border-radius:999px;border:1px solid var(--line-strong);
  display:grid;place-items:center;transition:.15s}
.social a:hover{border-color:var(--ink);background:var(--ink)}
.social svg{width:16px;height:16px;fill:var(--ink-2);transition:.15s}
.social a:hover svg{fill:#fff}

/* Newsletter: field over a full-width button, as on the current site. */
.foot-news p{margin:0 0 14px;color:var(--muted);font-size:14.5px}
.foot-news input{width:100%;height:46px;padding:0 15px;border-radius:var(--r);
  border:1px solid var(--line-strong);background:#fff;font:400 14.5px var(--font);color:var(--ink)}
.foot-news input:focus{outline:none;border-color:var(--ink)}
.foot-news .btn{width:100%;margin-top:10px;border-radius:var(--r);letter-spacing:.06em}

/* The bottom bar. Black, full window width, centred: payment marks on top,
   copyright under them, as on the current site. Kept shallow so it reads as a
   strip beneath the footer rather than a second footer. The brand colours live
   in the sprite, so the marks sit on white chips to stay legible on black. */
.foot-bottom{background:var(--ink);margin-top:48px;padding:18px 0 20px}
.foot-bottom .wrap{display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center}
.pay{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.pay .mark{background:#fff;border-radius:4px;padding:4px 7px;display:inline-grid;
  place-items:center;line-height:0}
.pay .mark svg,.pay .mark img{width:38px;height:19px;display:block;object-fit:contain}
.foot-copy{font-size:13px;color:#a3a3a3;margin:0}
.foot-copy b{color:#fff;font-weight:650}

/* --- floating WhatsApp --------------------------------------------------
   A circle that becomes a pill. The width animates, not the display, so it
   grows smoothly and the text is always in the document for screen readers.
   Bottom left, clear of the right-hand side where browsers put their own
   chrome and where a back-to-top control would normally sit.
   ------------------------------------------------------------------------ */
/* Collapsed it is exactly 56 by 56 with no padding on any side, so it is a
   true circle; the pill is made only by the padding that appears on hover. */
.wa-float{position:fixed;left:22px;bottom:22px;z-index:90;
  display:flex;align-items:center;height:56px;padding:0;
  background:var(--ink);color:#fff;border-radius:999px;
  box-shadow:0 4px 14px rgba(0,0,0,.26);transition:.22s cubic-bezier(.2,.7,.3,1)}
.wa-float:hover,.wa-float:focus-visible{background:#000;padding-right:24px;
  box-shadow:0 8px 22px rgba(0,0,0,.34);transform:translateY(-2px)}
.wa-float:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* A square box the same size as the circle, so the glyph is centred on the
   circle's real centre rather than on whatever the pill is doing. */
.wa-ico{width:56px;height:56px;flex:none;display:grid;place-items:center}
.wa-ico svg{width:28px;height:28px;display:block}
.wa-bubble{fill:#25D366}
.wa-phone{fill:var(--ink)}
.wa-float:hover .wa-phone,.wa-float:focus-visible .wa-phone{fill:#000}
.wa-txt{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  font-size:14.5px;font-weight:650;letter-spacing:.01em;
  transition:max-width .22s cubic-bezier(.2,.7,.3,1),opacity .16s ease}
.wa-float:hover .wa-txt,.wa-float:focus-visible .wa-txt{max-width:150px;opacity:1}
@media(prefers-reduced-motion:reduce){.wa-float,.wa-txt{transition:none}}
/* The cart drawer covers the page, and on a phone it covers exactly where this
   button sits — right over the Checkout button. It stands down while the
   drawer is open and comes back when it closes. */
body.no-scroll .wa-float{opacity:0;pointer-events:none;transform:translateY(8px)}

/* --- contact page --------------------------------------------------------
   Four facts as cards, each one something you can act on rather than read:
   the address opens Maps, the email opens a draft, the phone dials.
   ------------------------------------------------------------------------ */
.ct-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:18px;margin:6px 0 46px}
.ct-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;
  display:flex;flex-direction:column;transition:.18s}
a.ct-card:hover{border-color:var(--ink);box-shadow:var(--shadow);transform:translateY(-2px)}
.ct-ico{width:42px;height:42px;border-radius:11px;background:var(--surface-2);
  display:grid;place-items:center;margin-bottom:16px}
.ct-ico svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.8}
.ct-card h2{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px}
.ct-card p{margin:0;color:var(--ink);font-size:15.5px;line-height:1.55}
.ct-go{margin-top:auto;padding-top:14px;font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink)}
.ct-btns{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}
.ct-btns .btn{flex:1;min-width:110px}

.ct-hours{list-style:none;margin:0;padding:0;font-size:14px}
.ct-hours li{display:flex;justify-content:space-between;gap:16px;padding:5px 8px;
  border-radius:6px;color:var(--muted)}
.ct-hours li.on{background:var(--surface);color:var(--ink);font-weight:650}
.ct-state{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-size:13.5px;font-weight:600;color:var(--muted)}
.ct-state i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--muted);box-sizing:border-box}
.ct-state.is-open{color:var(--ink)}
.ct-state.is-open i{background:#25D366;border-color:#25D366}

/* Form beside the map: the two ways of getting here, side by side. */
.ct-main{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;margin-bottom:56px;align-items:start}
.ct-form h2{font-size:clamp(19px,2.2vw,24px);margin-bottom:20px;max-width:26ch}
.fld{margin-bottom:16px}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}
.fld label span{color:var(--ink)}
.fld label em{font-style:normal;font-weight:500;letter-spacing:0;text-transform:none;font-size:12.5px}
.fld input,.fld textarea{width:100%;border:1px solid var(--line-strong);border-radius:var(--r);
  background:#fff;color:var(--ink);font:400 15px var(--font);padding:13px 15px}
.fld input{height:50px;padding:0 15px}
.fld textarea{resize:vertical;min-height:140px;line-height:1.55}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(16,16,16,.06)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-note{margin:14px 0 0;font-size:14px;color:var(--muted)}
.ct-note a{color:var(--ink);border-bottom:1px solid var(--line-strong)}
.ct-ok,.ct-bad{border-radius:var(--r);padding:14px 16px;margin:0 0 20px;font-size:15px}
.ct-ok{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.ct-bad{background:#fff;border:1px solid var(--ink);color:var(--ink)}
.ct-ok a,.ct-bad a{color:var(--ink);border-bottom:1px solid var(--line-strong)}

.ct-map{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2)}
/* The map keeps its own colours: a grey map is harder to read, and the one
   thing a visitor does here is find the place. */
.ct-map iframe{display:block;width:100%;height:430px;border:0}
.ct-map .btn{margin:14px;width:calc(100% - 28px)}

/* --- about page ----------------------------------------------------------
   Editorial rather than illustrated: a numbered run of sections, each with its
   heading held in a column of its own, and one band reversed out to break the
   page in half. No photography, so nothing here depends on having good photos.
   ------------------------------------------------------------------------ */
/* Title and strapline as a pair on one baseline, so the title is not forced
   to wrap and the two read as one statement. */
.ab-top{padding:40px 0 34px;display:grid;grid-template-columns:auto 1fr;
  align-items:end;gap:14px 48px}
.ab-top h1{font-size:clamp(40px,7vw,86px);letter-spacing:-.04em;line-height:.9;
  text-transform:uppercase;white-space:nowrap}
.ab-top p{margin:0 0 10px;font-size:clamp(17px,2vw,21px);color:var(--muted);max-width:30ch}

.ab-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;
  background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin:0 0 4px}
.ab-stats div{background:#fff;padding:26px 24px 26px 0}
.ab-stats div + div{padding-left:24px}
.ab-stats b{display:block;font-size:clamp(26px,3.2vw,36px);font-weight:720;letter-spacing:-.02em;
  line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums}
.ab-stats span{color:var(--muted);font-size:13.5px}

.ab-sec{padding:72px 0}
.ab-grid{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr);gap:60px;
  align-items:start}
/* The heading stays put while its text scrolls past it. */
.ab-head{position:sticky;top:116px}
.ab-num{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--line-strong);
  margin-bottom:14px}
.ab-head h2{font-size:clamp(23px,3vw,34px);letter-spacing:-.02em;text-transform:uppercase}
.ab-text p{margin:0 0 18px;color:var(--ink-2);font-size:16.5px}
.ab-text p.lead{font-size:clamp(18px,1.9vw,21px);line-height:1.55;color:var(--ink)}
.ab-text .btn{margin-top:10px}

/* The reversed band. */
.ab-dark{background:var(--ink);color:#fff;padding:78px 0}
.ab-dark .ab-num{color:#555}
.ab-dark .ab-head h2{color:#fff}
.ab-dark .ab-text p{color:#c9c9c9}
.ab-dark .ab-text p.lead{color:#fff}

/* A band of real stock, edge to edge, one part per marque. It sits between
   the first section and the dark band, so it doubles as the break between
   them — hence no margin of its own. */
/* Height is set on the band, not per tile: with an aspect ratio, adding a
   marque would make every photo shorter. This way the band keeps its presence
   however many there are. */
.ab-strip{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;
  height:clamp(190px,17vw,280px);
  background:var(--line);border-top:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none}
.ab-strip::-webkit-scrollbar{display:none}
.abs{position:relative;background:#fff;overflow:hidden;min-width:0;height:100%;
  display:grid;place-items:center}
.abs img{width:100%;height:auto;max-width:none;object-fit:contain;transition:.45s}
.abs:hover img{transform:scale(1.05)}
.abs span{position:absolute;left:0;right:0;bottom:0;padding:0 14px 12px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.abs span i{display:block;margin-top:4px;font-style:normal;font-size:10.5px;font-weight:600;
  letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums}

/* With a logo there is no photograph to sit on, so the tile goes light, the
   mark is given room rather than cropped, and the label turns dark to match. */
/* The label sits in the bottom of the tile, so the mark centres in the space
   above it rather than in the tile's geometric middle. */
.abs.has-logo{background:#fff;padding-bottom:38px}
.abs.has-logo img{width:auto;height:auto;max-width:62%;max-height:58%;object-fit:contain;transition:transform .2s}
.abs.has-logo:hover img{transform:scale(1.05)}
.abs.has-logo span{background:none;color:var(--ink);padding:0 14px 12px}
.abs.has-logo span i{color:var(--muted)}

  opacity:.92;transition:.45s}
  font-size:13.5px;background:linear-gradient(0deg,rgba(16,16,16,.85),transparent);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ab-facts{list-style:none;margin:26px 0 8px;padding:0;border-top:1px solid var(--line)}
.ab-facts li{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--line);font-size:15.5px}
.ab-facts span{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding-top:3px}
.ab-facts b{font-weight:550;color:var(--ink)}
.ab-facts a{color:var(--ink);border-bottom:1px solid var(--line-strong)}
.ab-facts a:hover{border-color:var(--ink)}

/* --- full-size image viewer --------------------------------------------- */
.lb{position:fixed;inset:0;z-index:120;background:rgba(10,10,10,.94);
  display:grid;place-items:center;padding:56px 70px;cursor:zoom-out}
.lb[hidden]{display:none}
.lb-fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;
  align-items:center;gap:14px;cursor:default}
.lb-fig img{max-width:100%;max-height:calc(100vh - 150px);object-fit:contain;
  background:#fff;border-radius:var(--r);display:block}
.lb-fig figcaption{color:#c9c9c9;font-size:13.5px;text-align:center}
.lb-x,.lb-nav{position:absolute;width:48px;height:48px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);
  display:grid;place-items:center;transition:.15s;padding:0}
.lb-x{top:18px;right:18px}
.lb-nav{top:50%;transform:translateY(-50%)}
.lb-nav.prev{left:16px}
.lb-nav.next{right:16px}
.lb-x svg,.lb-nav svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}
.lb-x:hover,.lb-nav:hover{background:#fff}
.lb-x:hover svg,.lb-nav:hover svg{stroke:var(--ink)}
@media(max-width:560px){
  .lb{padding:56px 10px}
  .lb-nav{width:42px;height:42px}
  .lb-nav.prev{left:6px} .lb-nav.next{right:6px}
}

/* --- cart ---------------------------------------------------------------- */
.cart-wrap{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start;
  margin-bottom:60px}
.cart-lines{border-top:1px solid var(--line)}
.cline{display:grid;grid-template-columns:96px 1fr auto auto;gap:18px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--line)}
.cl-img{width:96px;height:72px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;overflow:hidden;display:grid;place-items:center}
.cl-img img{width:100%;height:100%;object-fit:contain;padding:6px}
.cl-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.cl-brand{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cl-name{font-size:15px;font-weight:550;color:var(--ink);line-height:1.4}
.cl-name:hover{text-decoration:underline}
.cl-pn{font:500 12.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}
.cline .stock{font-size:13px;margin:2px 0 0}
.cl-qty input{width:68px;height:44px;text-align:center;border:1px solid var(--line-strong);
  border-radius:var(--r);font:650 15px var(--font);color:var(--ink);background:#fff}
.cl-qty input:focus{outline:none;border-color:var(--ink)}
.cl-money{text-align:right;display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.cl-money b{font-size:16.5px;font-weight:700}
.cl-money span{font-size:12.5px;color:var(--muted)}
.cl-x{background:none;border:0;padding:0;margin-top:4px;cursor:pointer;
  font-size:12.5px;color:var(--muted);text-decoration:underline}
.cl-x:hover{color:var(--out)}
.cart-acts{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:22px 0}

.cart-sum{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;position:sticky;top:116px}
.cart-sum h2{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:16px}
.cs-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-size:15px;
  color:var(--ink-2)}
.cs-row b{color:var(--ink);font-weight:600}
.cs-row.total{border-top:1px solid var(--line-strong);margin-top:8px;padding-top:15px;font-size:17px}
.cs-row.total b{font-size:20px;font-weight:720}
.cart-sum .btn{margin-top:18px}
.cs-note{font-size:13px;color:var(--muted);margin:14px 0 0;line-height:1.5}
/* The same marks the footer uses, from the same sprite. */
.cs-pay{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}
.cs-pay .mark{background:#fff;border:1px solid var(--line);border-radius:5px;
  padding:4px 7px;display:inline-grid;place-items:center;line-height:0}
.cs-pay .mark svg,.cs-pay .mark img{width:34px;height:17px;display:block;object-fit:contain}

/* A mark with no artwork yet reads as a deliberate label rather than a gap.
   Each context fixes the chip's height so a row of four lines up whether the
   mark inside it is a logo or a word. */
.mark{box-sizing:border-box}
.mark.is-text{font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap;line-height:1}
.cs-pay .mark{height:25px}
.cs-pay .mark.is-text{font-size:9.5px}
.pay .mark{height:31px}
.pay .mark.is-text{color:var(--ink);padding:0 11px;font-size:10px;letter-spacing:.09em}
.pk-marks .mark{height:21px}
.pk-marks .mark.is-text{font-size:8.5px;padding:0 6px}

/* --- cart drawer ---------------------------------------------------------
   The panel that slides in from the right when the bag is tapped. Laid out as
   a column: the items scroll, the totals stay pinned to the bottom, so the
   Checkout button is reachable without scrolling past twelve parts to find it.
   Transforms and opacity only, so it slides on the compositor rather than
   repainting the page under it. */
.cart-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.42);opacity:0;
  transition:opacity .25s ease;z-index:80}
.cart-backdrop.is-open{opacity:1}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:#fff;
  z-index:81;display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .26s cubic-bezier(.4,0,.2,1);box-shadow:-18px 0 50px rgba(0,0,0,.12)}
.cart-drawer.is-open{transform:none}
body.no-scroll{overflow:hidden}

.cd-head{display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px;border-bottom:1px solid var(--line);flex:none}
.cd-title{font-size:21px;font-weight:650;letter-spacing:-.01em}
.cd-close{border:0;background:none;font-size:30px;line-height:1;color:var(--ink);
  cursor:pointer;padding:0 2px;opacity:.65;transition:opacity .15s}
.cd-close:hover{opacity:1}

.cd-body{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.cd-items{flex:1;overflow-y:auto;padding:4px 22px;-webkit-overflow-scrolling:touch}
.cd-wait,.cd-empty{padding:48px 22px;text-align:center;color:var(--muted);font-size:14.5px}
.cd-empty p{margin:0 0 18px}

.cd-item{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;
  padding:18px 0;border-bottom:1px solid var(--line)}
.cd-item.is-busy{opacity:.45;pointer-events:none}
.cd-thumb{display:block;width:72px;height:72px;border-radius:8px;overflow:hidden;
  background:var(--surface);flex:none}
.cd-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cd-info{min-width:0;display:flex;flex-direction:column;gap:5px}
.cd-name{font-size:14px;line-height:1.4;color:var(--ink);text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cd-name:hover{text-decoration:underline}
.cd-pn{font:500 11.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}
.cd-row{display:flex;align-items:center;gap:10px;margin-top:4px}
.cd-qty{display:flex;align-items:center;border:1px solid var(--line-strong);border-radius:8px;
  overflow:hidden;flex:none}
.cd-qty button{width:30px;height:30px;border:0;background:#fff;cursor:pointer;
  font-size:15px;line-height:1;color:var(--ink);transition:background .15s}
.cd-qty button:hover{background:var(--surface)}
.cd-qty span{min-width:30px;text-align:center;font-size:13.5px;font-weight:600;
  font-variant-numeric:tabular-nums}
.cd-price{margin-left:auto;font-size:14px;font-weight:650;white-space:nowrap}
.cd-rm{border:0;background:none;font-size:21px;line-height:1;color:var(--muted);
  cursor:pointer;padding:0 2px;flex:none;transition:color .15s}
.cd-rm:hover{color:var(--ink)}

.cd-foot{flex:none;padding:18px 22px 22px;border-top:1px solid var(--line);background:#fff}
.cd-tot{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;
  color:var(--muted);padding:5px 0}
.cd-tot.is-total{font-size:17px;font-weight:700;color:var(--ink);
  border-top:1px solid var(--line);margin-top:8px;padding-top:13px}
/* A discount is the one place money comes off, so it is the one place that
   gets a colour — the same green the in-stock mark uses. */
.cd-tot.is-off{color:var(--in);font-weight:600}

/* Discount code. Field and button are flush, as one control. */
.cd-code{display:flex;gap:0;margin-bottom:14px}
.cd-code input{flex:1;min-width:0;height:44px;padding:0 14px;border:1px solid var(--line-strong);
  border-right:0;border-radius:8px 0 0 8px;font:500 13px var(--font);letter-spacing:.06em;
  text-transform:uppercase;background:#fff;color:var(--ink)}
.cd-code input::placeholder{letter-spacing:.09em;color:var(--muted);font-weight:500}
.cd-code input:focus{outline:none;border-color:var(--ink)}
.cd-code button{height:44px;padding:0 20px;border:0;border-radius:0 8px 8px 0;background:var(--ink);
  color:#fff;font:700 11.5px var(--font);letter-spacing:.11em;text-transform:uppercase;cursor:pointer}
.cd-code button:hover{background:#000}
/* Applied: the code becomes a tag with a way to take it off again. */
.cd-code.is-on{align-items:center;gap:8px}
.cd-code-tag{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:8px;
  background:var(--surface);border:1px dashed var(--line-strong);font:700 12px var(--font);
  letter-spacing:.08em;text-transform:uppercase}
.cd-code.is-on button{height:32px;padding:0 10px;border-radius:8px;background:none;color:var(--muted);
  font-size:19px;letter-spacing:0}
.cd-code.is-on button:hover{background:none;color:var(--ink)}
.cd-msg{margin:-6px 0 12px;font-size:12.5px;color:var(--muted);line-height:1.45}
.cd-msg.is-bad{color:var(--out)}

/* Checkout summary: same colour rule, and the link that opens the code box. */
.cs-row.is-off,.cs-row.is-off b{color:var(--in)}
.or-off th,.or-off td{color:var(--in)}
.cs-code{display:block;width:100%;margin-top:14px;padding:0;border:0;background:none;
  text-align:center;font:500 13px var(--font);color:var(--muted);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.cs-code:hover{color:var(--ink)}
.cd-foot .btn{margin-top:14px}
.cd-view{display:block;text-align:center;margin-top:12px;font-size:13px;color:var(--muted)}

@media (max-width:460px){
  .cart-drawer{width:100vw}
  .cd-items,.cd-head,.cd-foot{padding-left:16px;padding-right:16px}
}

/* --- checkout ------------------------------------------------------------ */
.co-form{display:flex;flex-direction:column;gap:14px}
.co-sec{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 22px}
.co-sec h2{display:flex;align-items:center;gap:11px;font-size:17px;margin-bottom:20px}
.co-sec h2 span{width:26px;height:26px;border-radius:999px;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:12.5px;font-weight:700;flex:none}

.picks{display:flex;flex-direction:column;gap:10px}
.pick{display:flex;align-items:flex-start;gap:13px;padding:15px 16px;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:var(--r);background:#fff;transition:.15s}
.pick:hover{border-color:var(--ink)}
.pick input{margin:2px 0 0;accent-color:var(--ink);width:17px;height:17px;flex:none}
.pick:has(input:checked){border-color:var(--ink);background:var(--surface)}
.pk-b{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.pk-b b{font-size:15px;font-weight:650}
.pk-b i{font-style:normal;font-size:13.5px;color:var(--muted);line-height:1.45}
/* Card option: the marks sit on the same line as the label, right-aligned. */
.pk-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pk-marks{display:flex;gap:5px;flex-wrap:wrap}
.pk-marks .mark{background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:3px 6px;display:inline-grid;place-items:center;line-height:0}
.pk-marks .mark svg,.pk-marks .mark img{width:30px;height:15px;display:block;object-fit:contain}
.pick[hidden]{display:none}

/* Apple's and Google's marks arrive already framed — a rounded badge with its
   own border — where Visa's and Mastercard's are bare logos. So a framed mark
   stands in for the chip rather than sitting inside a second one: no backing,
   no second border, and full height, which lands the wordmark inside it at the
   same size as the bare logos beside it. Kept after the three chip blocks
   above, because it has to win against all of them. */
.cs-pay .mark--apple-pay,.cs-pay .mark--google-pay,
.pay .mark--apple-pay,.pay .mark--google-pay,
.pk-marks .mark--apple-pay,.pk-marks .mark--google-pay{
  background:none;border:0;padding:0;border-radius:0}
.cs-pay .mark--apple-pay img,.cs-pay .mark--google-pay img,
.pay .mark--apple-pay img,.pay .mark--google-pay img,
.pk-marks .mark--apple-pay img,.pk-marks .mark--google-pay img{width:auto;height:100%}
/* Exact sizes, so nothing rests on a percentage height (iPhone Safari). The
   Apple and Google marks are drawn into the page (payment_mark()), so svg too. */
.pay .mark--apple-pay :is(img,svg){width:48px;height:31px}   .pay .mark--google-pay :is(img,svg){width:58px;height:31px}
.cs-pay .mark--apple-pay :is(img,svg){width:39px;height:25px} .cs-pay .mark--google-pay :is(img,svg){width:46px;height:25px}
.pk-marks .mark--apple-pay :is(img,svg){width:33px;height:21px} .pk-marks .mark--google-pay :is(img,svg){width:39px;height:21px}
:is(.pay,.cs-pay,.pk-marks) :is(.mark--apple-pay,.mark--google-pay) :is(img,svg){max-width:none;flex:none;display:block}
/* Tabby: its own mint badge stands in for the white chip. */
.mark--tabby{background:none!important;border:0!important;padding:0!important}
.mark--tabby .tb-badge{height:100%;box-sizing:border-box}
.pay .mark--tabby .tb-badge{padding:0 12px;font-size:15px;border-radius:4px}
.cs-pay .mark--tabby .tb-badge{padding:0 10px;font-size:13px}
.mark--tabby img{height:100%;width:auto}
/* Dialling code beside the number. The code column fits the longest entry — a
   flag and four digits — and no more, so the number keeps the room it needs. */
.fld-phone{display:grid;grid-template-columns:minmax(0,118px) minmax(0,1fr);gap:10px}
.fld-phone select{height:50px}
.fld-phone input{width:100%}

.co-sec .fld select{width:100%;height:50px;padding:0 38px 0 15px;border-radius:var(--r);
  border:1px solid var(--line-strong);background-color:#fff;color:var(--ink);
  font:400 15px var(--font);appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:17px}
.co-sec .fld select:focus{outline:none;border-color:var(--ink)}

.co-lines{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:8px}
.co-line{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:7px 0;
  font-size:13.5px;align-items:baseline}
.co-line .q{color:var(--muted);font-variant-numeric:tabular-nums}
.co-line .n{color:var(--ink);line-height:1.4}
.co-line .n i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.co-line .m{font-weight:650;white-space:nowrap}

/* --- order received ------------------------------------------------------ */
.or-head{text-align:center;padding:46px 0 38px;max-width:60ch;margin:0 auto}
.or-tick{width:56px;height:56px;border-radius:999px;background:var(--in);
  display:inline-grid;place-items:center;margin-bottom:20px}
.or-tick svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:2.5}
/* Saved, but not paid for. A green tick there would be a lie, so it goes
   neutral — the order exists, the money has not moved. */
.or-tick.is-wait{background:var(--ink-2)}
.or-head h1{font-size:clamp(28px,3.6vw,40px);margin-bottom:12px}
.or-head p{color:var(--muted);margin:0;font-size:16.5px}
.or-num{margin-top:16px !important;font-size:15px !important;color:var(--ink-2) !important}
.or-num b{font:700 17px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}
.or-grid{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start;
  margin-bottom:60px}
.or-grid > div{display:flex;flex-direction:column;gap:14px}
.or-next{margin:0;color:var(--ink-2);font-size:16px}
.or-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.or-items th{text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink);
  font-weight:550;width:auto}
.or-items th em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:3px}
.or-items td{color:var(--muted);font-size:14px;white-space:nowrap}
.or-items td.r{text-align:right;color:var(--ink);font-weight:650;font-size:15px}
.or-total th,.or-total td{font-weight:700;font-size:17px;color:var(--ink)}

.empty{text-align:center;padding:90px 20px;color:var(--muted)}
.empty h1{color:var(--ink);font-size:27px;margin-bottom:10px}

/* --- responsive --------------------------------------------------------- */
@media(max-width:1100px){
  .nav{gap:18px;font-size:14.5px}
  .hsearch{max-width:230px}
}
@media(max-width:1040px){
  .promos{grid-template-columns:1fr}
  .promo.big{min-height:300px}
  .promo-stack{grid-template-columns:repeat(3,1fr);grid-template-rows:none}
  /* One column: picture, then price and buttons, then description — which is
     the order the markup is already in. */
  .product{grid-template-columns:1fr;gap:32px}
  .pg-media,.pg-buy{grid-column:auto}
  .foot-cols{grid-template-columns:1fr 1fr;gap:30px}
  .seo-grid{grid-template-columns:1fr;gap:18px}
  .seo-lead{grid-template-columns:1fr;gap:16px}
  .finder-row{grid-template-columns:1fr 1fr;gap:12px}
  .finder-row .btn{grid-column:1/-1;width:100%}
}
@media(max-width:860px){
  .nav,.hsearch{display:none}
  /* Arrows stay on phones, tucked inside the rail's edges. */
  .rail-btn{width:36px;height:36px}
  .rail-btn.prev{left:4px}.rail-btn.next{right:4px}
  .rail-btn svg{width:15px;height:15px}
  .t-make{--item:160px}
  .t-cat{--item:158px}
  .t-card{--item:200px}
  .burger{display:grid}
  .usp{grid-template-columns:1fr}
  .finder-row{grid-template-columns:1fr}
  .finder{margin-top:-30px;padding:20px}
  .news{grid-template-columns:1fr;padding:32px}
  .foot-rule{margin:40px 0 36px}
  .ab-strip{grid-auto-columns:32%}
  .ab-top{grid-template-columns:1fr;align-items:start;gap:16px}
  .ab-top h1{white-space:normal}
  .ab-top p{margin:0}
  .ab-grid{grid-template-columns:1fr;gap:22px}
  .ab-head{position:static}
  .ab-sec{padding:52px 0}
  .ab-dark{padding:56px 0}
  .cart-wrap{grid-template-columns:1fr;gap:26px}
  .or-grid{grid-template-columns:1fr;gap:26px}
  .cart-sum{position:static}
  .ct-main{grid-template-columns:1fr;gap:26px}
  .ct-map iframe{height:320px}
  .sb-row{flex-direction:column;align-items:stretch;gap:16px}
  .sb-filters{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .sb-sort{padding-left:0;border-left:0;padding-top:16px;border-top:1px solid var(--line)}
  .shopbar .field select{min-width:0;width:100%}
  .sb-sort .field{width:100%}
  .hero-inner{padding:64px 0 80px}
  .hero-stats{gap:24px;margin-top:30px}
  section{padding:52px 0}
  .head-link,.head-auth{display:none}
  .promo-stack{grid-template-columns:1fr}
  .topbar .tb-left span:nth-child(2){display:none}
  .contact-strip{padding:26px}
}
@media(max-width:560px){
  .wrap{padding:0 16px}
  .sb-filters{grid-template-columns:1fr}
  .cline{grid-template-columns:72px 1fr;gap:12px}
  .cl-img{width:72px;height:60px}
  .cl-qty,.cl-money{grid-column:2;justify-self:start}
  .cl-money{align-items:flex-start;text-align:left}
  .act-btns{min-width:0;flex:1 1 100%}
  .fld-row{grid-template-columns:1fr;gap:0}
  .ab-stats{grid-template-columns:1fr 1fr}
  .ab-strip{grid-auto-columns:46%}
  .ab-stats div{padding:20px 16px}
  .ab-stats div + div{padding-left:16px}
  .ab-facts li{grid-template-columns:1fr;gap:4px}
  .makes{grid-template-columns:1fr 1fr;gap:12px}
  .sb-search .btn{padding:0 20px}
  .wa-float{left:14px;bottom:14px;height:50px}
  .wa-ico{width:50px;height:50px}
  .wa-ico svg{width:24px;height:24px}
  .topbar .tb-right{display:none}
  .topbar .wrap{justify-content:center}
  .tt-pop{left:auto;right:0}
  .tt-pop::before{left:auto;right:13px}
  .tb-icons > *{width:34px}
  /* About and the newsletter full width; the two link lists share a row. */
  .foot-cols{grid-template-columns:1fr 1fr;gap:26px 20px}
  .foot-cols > :first-child,.foot-cols > :last-child{grid-column:1/-1}
  .foot-cols h4{font-size:16px;margin-bottom:12px}
  .news input{flex:none;height:52px;font-size:15px}
  .news input::placeholder{font-size:14px}
  .news form{flex-direction:column}
  .news input,.news .btn{width:100%}
  .t-make{--item:150px}
  .t-cat{--item:150px}
  .t-card{--item:176px;gap:12px}
  .rail-track{gap:12px}
  .make{min-height:0;padding:20px 12px 16px}
  .make-name{font-size:15px}
  .make-logo{margin-bottom:9px}
  .make-logo img{width:68px;height:68px}
  .make-sub{display:none}
  .grid{grid-template-columns:1fr 1fr;gap:12px}
  .actions .btn{min-width:0;width:100%;flex:1 1 100%}
}

/* --- mobile drawer ------------------------------------------------------ */
#mnav{display:none}

/* --- mobile menu: full-screen panel from the right ------------------------- */
.mnav-backdrop{position:fixed;inset:0;background:rgba(10,10,10,.32);z-index:190;opacity:0;pointer-events:none;transition:opacity .3s}
.mdrawer{position:fixed;top:0;right:0;bottom:0;height:100dvh;width:100%;background:#fff;z-index:200;
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(100%);transition:transform .42s cubic-bezier(.4,0,.2,1);visibility:hidden}
#mnav:checked ~ .mnav-backdrop{opacity:1;pointer-events:auto}
#mnav:checked ~ .mdrawer{transform:none;visibility:visible}
.mdrawer-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);flex:none}
.mdrawer-head .brand img{height:38px;width:auto}
.mdrawer-close{width:40px;height:40px;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center;cursor:pointer}
.mdrawer-close svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round}
.mdrawer-search{position:relative;margin:18px 20px 6px;flex:none}
.mdrawer-search svg{position:absolute;left:16px;top:15px;width:18px;height:18px;stroke:#949494;fill:none;stroke-width:2}
.mdrawer-search input{width:100%;height:48px;padding:0 16px 0 44px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);font:400 15px var(--font)}
.mdrawer-search input:focus{outline:none;border-color:var(--ink);background:#fff}
.mdrawer-links{list-style:none;margin:0;padding:8px 0 0;flex:1}
.mdrawer-links li{border-bottom:1px solid var(--line)}
.mdrawer-links li:last-child{border-bottom:0}
.mdrawer-links a{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;font-size:21px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.mdrawer-links a svg{width:18px;height:18px;stroke:var(--line-strong);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s,stroke .2s}
.mdrawer-links a:active svg,.mdrawer-links a.on svg{stroke:var(--ink);transform:translateX(3px)}
.mdrawer-links a.on span{border-bottom:2px solid var(--ink);padding-bottom:1px}
.mdrawer-bottom{border-top:1px solid var(--line);padding:18px 20px calc(20px + env(safe-area-inset-bottom));flex:none;background:var(--surface)}
.mdrawer-acct{display:flex;gap:10px;margin-bottom:16px}
.mdrawer-acct .btn{flex:1;height:46px;font-size:14px}
.mdrawer-meta{display:flex;flex-direction:column;gap:5px;font-size:13.5px;color:var(--muted);margin-bottom:16px}
.mdrawer-meta a{color:var(--muted)}
.mdrawer-meta span{display:flex;align-items:center;gap:7px}
.mdrawer-meta span::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--out)}
.mdrawer-meta span.is-open::before{background:var(--in)}
.mdrawer-social{display:flex;gap:10px;justify-content:center}
.mdrawer-social a{width:38px;height:38px;border-radius:999px;border:1px solid var(--line-strong);display:grid;place-items:center;background:#fff;color:var(--ink-2)}
.mdrawer-social svg{width:16px;height:16px;fill:currentColor}
.mdrawer-social a:active{background:var(--ink);color:#fff;border-color:var(--ink)}
body.menu-open{overflow:hidden}
/* On a tablet the menu is a panel over a dimmed page; on any phone it is the whole screen. */
@media(min-width:760px){.mdrawer{width:420px}}
@media(prefers-reduced-motion:reduce){.mdrawer,.mnav-backdrop{transition:none}}

/* A + that has reached the shelf count: there, but clearly not clickable. */
.qty button:disabled,.cd-qty button:disabled{opacity:.3;cursor:not-allowed;background:none}

/* ---- flash messages (Trapwrld's, in this site's black and white) ---- */
.flash-stack{position:fixed;top:118px;right:16px;z-index:1200;display:flex;flex-direction:column;gap:8px;max-width:calc(100vw - 32px)}
.flash{display:flex;align-items:center;gap:14px;min-width:280px;max-width:380px;padding:12px 14px 12px 16px;background:#fff;color:#111;
  font-size:13.5px;line-height:1.45;border:1px solid var(--line);border-left:3px solid #111;border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.14);
  animation:flash-in .25s ease}
.flash--success{border-left-color:#1e8e3e}
.flash--error{border-left-color:#c62828}
.flash--info{border-left-color:#111}
.flash.is-leaving{opacity:0;transform:translateX(12px);transition:opacity .3s,transform .3s}
.flash-close{margin-left:auto;background:none;border:0;font-size:18px;line-height:1;color:#888;cursor:pointer;padding:0 2px}
.flash-close:hover{color:#111}
@keyframes flash-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .flash-stack{left:12px;right:12px;max-width:none}
  .flash{min-width:0;max-width:none;padding:13px 14px 13px 16px;font-size:14px}
  .flash.is-leaving{transform:translateY(-8px)}
}

/* ---- product gallery arrows + heart ---- */
.gal-stage{position:relative}
.gal-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.92);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.08);transition:background .15s,border-color .15s,transform .15s}
.gal-arrow svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gal-arrow.prev{left:12px}.gal-arrow.next{right:12px}
.gal-arrow:hover{background:var(--ink);border-color:var(--ink)}
.gal-arrow:hover svg{stroke:#fff}
.gal-count{position:absolute;left:14px;top:14px;z-index:3;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ink);
  background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:999px;padding:4px 10px;pointer-events:none}
@media (max-width:640px){.gal-arrow{width:38px;height:38px}}
.title-row{display:flex;align-items:flex-start;gap:14px}
.title-row .title{flex:1;margin:0}
.pg-save{flex:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;margin-top:4px;
  transition:border-color .15s,transform .15s}
.pg-save svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.6}
.pg-save:hover{border-color:var(--ink);transform:scale(1.05)}
.pg-save[aria-pressed="true"] svg{fill:var(--ink)}
.pg-save:disabled,.card-save:disabled{opacity:.6}

/* ---- account: sign in / register ---- */
.auth{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:calc(100vh - 118px)}
.auth + .foot-rule{margin-top:0}
.auth-side{background:var(--ink);color:#fff;display:flex;align-items:center;padding:64px 56px}
.auth-side-in{max-width:420px;margin:0 auto}
.auth-brand{display:inline-flex;align-items:center;gap:14px;color:#fff;text-decoration:none;margin-bottom:44px}
/* The site's own logo (black on clear), turned white for the dark panel. */
.auth-brand .auth-logo{display:block;height:64px;width:auto;max-width:100%;filter:brightness(0) invert(1)}
.auth-word{display:flex;flex-direction:column;line-height:1}
.auth-word span{font-weight:700;font-size:21px;letter-spacing:.32em}
.auth-word small{font-size:9.5px;font-weight:600;letter-spacing:.42em;color:rgba(255,255,255,.6);margin-top:7px}
.auth-side h1{font-size:clamp(30px,3.4vw,44px);line-height:1.05;letter-spacing:-.02em;margin:0 0 16px;color:#fff}
.auth-side p{color:rgba(255,255,255,.72);font-size:16px;line-height:1.6;margin:0 0 30px}
.auth-perks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.auth-perks li{position:relative;padding-left:26px;color:rgba(255,255,255,.85);font-size:14.5px}
.auth-perks li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.auth-main{display:flex;align-items:center;justify-content:center;padding:56px 24px}
.auth-box{width:100%;max-width:440px}
.auth-box h2{font-size:26px;letter-spacing:-.01em;margin:0 0 22px}
.auth-msg{padding:12px 14px;border-radius:var(--r);font-size:14px;line-height:1.5;margin-bottom:18px;border:1px solid var(--line);border-left:3px solid var(--ink);background:var(--surface)}
.auth-msg.is-error{border-left-color:#c62828}
.auth-msg.is-ok{border-left-color:#1e8e3e}
.auth-msg a{text-decoration:underline}
.auth-inline{margin-bottom:18px}
.auth-aside-link{text-align:right;margin:-6px 0 18px;font-size:13.5px}
.auth-aside-link a,.auth-switch a{border-bottom:1px solid var(--line-strong)}
.auth-switch{margin:22px 0 0;font-size:14.5px;color:var(--muted)}
.auth-switch a{color:var(--ink)}
.auth-fine{font-size:13px;color:var(--muted);line-height:1.5;margin:-4px 0 18px}
.auth-fine a{border-bottom:1px solid var(--line-strong)}
.auth-lead{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0 0 22px}
.auth-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.auth-icon{width:56px;height:56px;border-radius:999px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;margin-bottom:18px}
.auth-icon svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.auth-icon.is-bad svg{stroke:#c62828}
.auth .fld select,.acc .fld select{width:100%;height:50px;padding:0 38px 0 15px;border-radius:var(--r);border:1px solid var(--line-strong);background-color:#fff;color:var(--ink);
  font:400 15px var(--font);appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:17px}
.acc .fld input:disabled{background:var(--surface);color:var(--muted)}
@media (max-width:900px){
  .auth{grid-template-columns:1fr;min-height:0}
  .auth + .foot-rule{margin-top:40px}
  .auth-side{padding:40px 24px 34px}
  .auth-brand{margin-bottom:28px}
  .auth-brand .auth-logo{height:52px}
  .auth-perks{display:none}
  .auth-side p{margin-bottom:0}
  .auth-main{padding:34px 20px 48px}
}

/* ---- account: my account ---- */
.acc{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;padding-top:34px;padding-bottom:70px;align-items:start}
.acc-rail{position:sticky;top:96px;min-width:0}
.acc-card{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);margin-bottom:14px}
.acc-avatar{flex:none;width:44px;height:44px;border-radius:999px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;letter-spacing:.04em}
.acc-id{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.acc-id b{font-size:15px}
.acc-id span{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-card-out{display:none}
.acc-nav{display:flex;flex-direction:column;gap:2px}
.acc-nav a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--r);font-size:14.5px;font-weight:600;color:var(--ink-2);transition:background .15s,color .15s}
.acc-nav a svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;opacity:.8}
.acc-nav a em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--surface-2);color:var(--ink);display:grid;place-items:center}
.acc-nav a:hover{background:var(--surface);color:var(--ink)}
.acc-nav a.on{background:var(--ink);color:#fff}
.acc-nav a.on svg{opacity:1}
.acc-nav a.on em{background:rgba(255,255,255,.18);color:#fff}
.acc-nav-out{margin-top:10px;color:var(--muted)!important;border-top:1px solid var(--line);border-radius:0!important;padding-top:16px!important}
.acc-nav-out:hover{background:none!important;color:var(--ink)!important}

.acc-main{min-width:0}
.acc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.acc-head h1{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;margin:0}
.acc-num{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700}
.acc-sub{margin:6px 0 0;color:var(--muted);font-size:14.5px}
.acc-back{display:inline-block;font-size:13.5px;color:var(--muted);margin-bottom:14px}
.acc-back:hover{color:var(--ink)}

/* status pills: one colour per state, same everywhere in the account */
.st{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.st::before{content:"";width:7px;height:7px;border-radius:999px;background:currentColor}
.st-wait{background:#fff4e0;color:#9a5b00}
.st-paid{background:#e8f0fe;color:#1a4fc2}
.st-ship{background:#efe9fc;color:#5b33c7}
.st-done{background:#e6f4ea;color:#1b7a36}
.st-bad{background:#fdecec;color:#b42323}
.st-off{background:var(--surface-2);color:var(--muted)}

.acc-panel{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;background:#fff}
.acc-panel h2{font-size:17px;margin:0 0 18px}
.acc-panel h3{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.acc-panel p{font-size:14.5px;line-height:1.6;margin:0}
.acc-empty{text-align:center;padding:44px 20px}
.acc-empty svg{width:34px;height:34px;fill:none;stroke:var(--line-strong);stroke-width:1.6;margin-bottom:10px}
.acc-empty p{color:var(--muted);margin:0 0 18px}
.acc-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.acc-grid{margin-top:4px}

/* orders list */
.acc-orders{display:flex;flex-direction:column;gap:12px}
.acc-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto 20px;gap:18px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;transition:border-color .15s,box-shadow .15s}
.acc-row:hover{border-color:var(--ink);box-shadow:0 6px 24px rgba(0,0,0,.06)}
.acc-row-imgs{display:flex;align-items:center}
.acc-row-imgs img{width:58px;height:46px;object-fit:contain;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:3px}
.acc-row-imgs img+img,.acc-row-imgs span{margin-left:-14px}
.acc-row-imgs span{width:46px;height:46px;border-radius:var(--r);background:var(--ink);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;border:2px solid #fff}
.acc-row-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.acc-row-body b{font-size:15px}
.acc-row-body span{font-size:13.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-row-end{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.acc-row-end b{font-size:15.5px}
.acc-row-chev{width:20px;height:20px;fill:none;stroke:var(--line-strong);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.acc-row:hover .acc-row-chev{stroke:var(--ink)}

/* order detail */
.acc-steps{list-style:none;padding:0;margin:0 0 22px;display:grid;grid-template-columns:repeat(4,1fr);counter-reset:s}
.acc-steps li{position:relative;text-align:center;padding-top:22px;font-size:12.5px;font-weight:600;color:var(--muted)}
.acc-steps li::before{content:"";position:absolute;top:7px;left:0;right:0;height:2px;background:var(--line)}
.acc-steps li:first-child::before{left:50%}.acc-steps li:last-child::before{right:50%}
.acc-steps .dot{position:absolute;top:2px;left:50%;transform:translateX(-50%);width:12px;height:12px;border-radius:999px;background:#fff;border:2px solid var(--line-strong)}
.acc-steps li.done{color:var(--ink)}
.acc-steps li.done::before{background:var(--ink)}
.acc-steps li.done .dot{background:var(--ink);border-color:var(--ink)}
.acc-track{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 18px;border:1px solid var(--line);border-left:3px solid #5b33c7;border-radius:var(--r);margin-bottom:18px;font-size:14px}
.acc-track div{display:flex;flex-direction:column;gap:2px}
.acc-track .mono{font-size:15px}
.acc-order{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.acc-side{display:flex;flex-direction:column;gap:14px}
.acc-side .btn{margin-top:12px}
.acc-help{display:block;font-size:13.5px;color:var(--muted);text-align:center;padding:6px}
.acc-help:hover{color:var(--ink)}
.acc-line{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.acc-line:last-of-type{border-bottom:0}
.acc-line-img img{width:76px;height:58px;object-fit:contain;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:3px;display:block}
.acc-line-body{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:14.5px}
.acc-line-body a{font-weight:600}
.acc-line-body small{font-size:13px;color:var(--muted)}
.acc-line-total{font-weight:700;white-space:nowrap}
.acc-totals{width:100%;max-width:300px;margin:14px 0 0 auto;border-collapse:collapse;font-size:14.5px}
.acc-totals td{padding:6px 0;color:var(--muted)}
.acc-totals td:last-child{text-align:right;color:var(--ink);white-space:nowrap}
.acc-totals small{font-size:12px}
.acc-totals .grand td{padding-top:12px;border-top:1px solid var(--ink);font-weight:700;color:var(--ink);font-size:16px}

/* addresses */
.acc-addr-list{display:flex;flex-direction:column;gap:14px}
.acc-addr.is-default{border-color:var(--ink)}
.acc-addr-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.acc-addr p{margin:0 0 14px}
.acc-addr-actions{display:flex;gap:8px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}

@media (max-width:1000px){.acc-two,.acc-order{grid-template-columns:1fr}}
@media (max-width:900px){
  .acc{grid-template-columns:1fr;gap:18px;padding-top:18px;padding-bottom:50px}
  .acc-rail{position:static}
  .acc-card{margin-bottom:10px}
  /* Four tiles across, all visible, like an app's tab bar. Sign out moves
     into the name card. */
  .acc-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .acc-nav a{position:relative;flex-direction:column;justify-content:center;gap:6px;padding:12px 4px 10px;border:1px solid var(--line);border-radius:var(--r-lg);font-size:11.5px;letter-spacing:.01em;text-align:center}
  .acc-nav a span{white-space:nowrap}
  .acc-nav a svg{width:20px;height:20px;opacity:1}
  .acc-nav a em{position:absolute;top:6px;right:6px;margin:0;min-width:18px;height:18px;font-size:10.5px;padding:0 5px}
  .acc-nav a.on{border-color:var(--ink)}
  .acc-nav .acc-nav-out{display:none}
  .acc-card{position:relative}
  .acc-card-out{display:block;margin-left:auto;flex:none;font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line-strong)}
  .acc-panel{padding:18px}
  .acc-row{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:6px 14px;padding:14px}
  .acc-row-imgs{grid-row:1 / span 2}
  .acc-row-imgs img{width:50px;height:40px}
  .acc-row-end{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between}
  .acc-row-chev{display:none}
  .acc-steps li{font-size:11px}
  .acc-line{grid-template-columns:60px minmax(0,1fr)}
  .acc-line-img img{width:60px;height:46px}
  .acc-line-total{grid-column:2;text-align:left}
  .acc-totals{max-width:none}
}

/* ---- shop: results swap without a reload ---- */
#shopResults{transition:opacity .18s}
#shopResults.is-loading{opacity:.45;pointer-events:none}

/* ---- scrolling placeholder (see cart.js) ---- */
.ph-marquee{position:absolute;display:flex;align-items:center;overflow:hidden;pointer-events:none;color:#949494;white-space:nowrap}
.ph-marquee > span{display:inline-block;will-change:transform}
.ph-marquee.is-moving > span{animation:ph-slide linear infinite alternate;animation-duration:5s}
@keyframes ph-slide{0%,18%{transform:translateX(0)}82%,100%{transform:translateX(var(--shift,-40px))}}
@media(prefers-reduced-motion:reduce){.ph-marquee.is-moving > span{animation:none}}

/* ---- blog listing ---- */
.blog-head{margin:6px 0 28px}
.blog-head h1{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.02em;margin:0 0 8px}
.blog-head p{color:var(--muted);font-size:16px;max-width:62ch;margin:0}
.post-meta{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.post-tag{background:var(--ink);color:#fff;padding:3px 9px;border-radius:999px;font-size:11px;letter-spacing:.1em}
.post-more{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--ink);margin-top:auto}
.post-more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
/* Blog grid: 1-2-1-2. A full-width card lays its photo beside the words; the
   pair below it are upright cards. */
.post-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-bottom:10px}
.post-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;transition:border-color .2s,box-shadow .2s,transform .2s}
.post-card:hover{border-color:var(--ink);box-shadow:var(--shadow);transform:translateY(-3px)}
.post-card:hover img{transform:scale(1.03)}
.post-card:hover .post-more svg{transform:translateX(4px)}
/* Fixed 3:2 frame so every card is the same size. The photo is shown whole
   (contain); a blurred copy behind it fills whatever the ratio leaves over. */
.post-card-img{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--surface)}
.post-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;transition:transform .5s}
.post-card-img .post-card-bg{object-fit:cover;filter:blur(22px) saturate(1.15);transform:scale(1.2);opacity:.9}
.post-card:hover .post-card-bg{transform:scale(1.25)}
.post-card-body{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;flex:1}
.post-card-body h3{font-size:20px;line-height:1.3;letter-spacing:-.01em;margin:0;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.post-card-body p{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:4.65em}
.post-card .post-more{margin-top:auto;padding-top:6px}
.post-card.is-full{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);transform:none}
.post-card.is-full:hover{transform:none}
.post-card.is-full .post-card-img{aspect-ratio:3/2}
.post-card.is-full .post-card-body{padding:36px 40px;gap:14px;justify-content:center}
.post-card.is-full h2{font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-.015em;margin:0;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card.is-full p{color:var(--ink-2);font-size:15.5px;line-height:1.6;-webkit-line-clamp:4}
.post-card.is-full .post-more{margin-top:8px}
@media(max-width:860px){.post-card.is-full{grid-template-columns:1fr}.post-card.is-full .post-card-body{padding:24px 22px 26px}}
@media(max-width:700px){.post-grid{gap:14px}.post-card-body,.post-card.is-full .post-card-body{padding:14px 15px 16px;gap:8px}.post-card-body h3{font-size:15.5px;min-height:0}.post-card.is-full h2{font-size:20px}.post-card-body p{display:none}.post-card.is-full p{display:-webkit-box;-webkit-line-clamp:2;font-size:14px;min-height:0}}
@media(max-width:400px){.post-grid{grid-template-columns:1fr}.post-card-body p{display:-webkit-box;min-height:0}}

/* -- checkout: delivery or collection ------------------------------------------ */
.co-sub{font-size:14px;font-weight:650;margin:24px 0 14px;letter-spacing:.01em}
#co-addr[hidden],#co-store[hidden],#f-emirate[hidden],.co-alert[hidden],.co-free[hidden]{display:none}
.co-free{margin:14px 0 0;font-size:13.5px;color:#1a7f37;font-weight:600}
.co-alert{margin:18px 0 0;padding:16px 18px;border:1.5px solid #c98a00;background:#fff8e6;border-radius:var(--r);
  display:flex;flex-direction:column;gap:6px;font-size:13.5px;line-height:1.5;color:#4a3800}
.co-alert b{font-size:14.5px;color:#2b2100}
.co-ack{display:flex;gap:10px;align-items:flex-start;margin-top:8px;font-weight:600;color:#2b2100;cursor:pointer}
.co-ack input{width:17px;height:17px;margin:1px 0 0;accent-color:var(--ink);flex:none}
.co-alert.is-shake{animation:coShake .5s;border-color:#b42318;background:#fdecec}
@keyframes coShake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.co-store{margin:16px 0 0;padding:16px 18px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);
  display:flex;flex-direction:column;gap:4px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.co-store b{font-size:14.5px;color:var(--ink)}
.co-store a{color:var(--ink);border-bottom:1px solid var(--line-strong)}
.cs-quoted{color:#7a5600;margin-top:4px}

/* checkout summary: a photo of each part */
.co-line{grid-template-columns:56px 1fr auto;align-items:center;gap:13px;padding:9px 0}
.co-thumb{position:relative;width:56px;height:56px;border-radius:10px;background:#fff;border:1px solid var(--line);flex:none}
.co-thumb img{width:100%;height:100%;object-fit:contain;border-radius:10px;display:block;padding:3px}
.co-thumb b{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--ink);color:#fff;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--surface)}
.co-line .n{font-size:13.5px}

/* Cloudflare "are you human" check under the newsletter / contact forms */
.news form{flex-wrap:wrap}
.ts-box{flex-basis:100%;width:100%;margin-top:10px}
.ts-box:empty{display:none}
.ct-form .ts-box{margin:4px 0 16px}
/* pay-at-store: the emailed code */
.co-code{margin:0 0 14px;padding:16px;border:1.5px solid var(--ink);border-radius:var(--r);background:#fff;display:flex;flex-direction:column;gap:8px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.co-code[hidden]{display:none}
.co-code > b{font-size:14.5px;color:var(--ink)}
.co-code input{height:52px;border:1px solid var(--line-strong);border-radius:var(--r);padding:0 14px;font:600 22px/1 var(--font);letter-spacing:.35em;text-align:center}
.co-code input:focus{outline:none;border-color:var(--ink)}
.co-code-err{margin:0;padding:9px 11px;border-radius:8px;background:#fdecec;color:#8c2020;font-size:13px}
.co-resend{align-self:flex-start;background:none;border:0;padding:0;font:600 13px var(--font);color:var(--ink);text-decoration:underline;cursor:pointer}
/* Tabby option */
.tabby-card{margin-top:10px}
.tabby-card:empty{display:none}
.tabby-promo{margin:14px 0 4px}

/* -- home: section titles centred between two lines, "view all" under the row -- */
.sec-line{display:flex;align-items:center;gap:22px;margin:0 0 30px}
.sec-line::before,.sec-line::after{content:"";flex:1;height:1px;background:var(--line-strong)}
.sec-line h3{margin:0;font-size:clamp(19px,2.1vw,24px);font-weight:800;text-transform:uppercase;letter-spacing:.02em;text-align:center;white-space:nowrap}
.sec-all{display:flex;justify-content:center;margin-top:22px}
.view-all{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 22px;border:1px solid var(--ink);border-radius:999px;
  font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);transition:background .18s,color .18s}
.view-all::after{content:"→";font-size:14px;letter-spacing:0}
.view-all:hover{background:var(--ink);color:#fff;text-decoration:none}
@media (max-width:600px){.sec-line{gap:12px}.sec-line h3{font-size:17px;white-space:normal}}

/* category and make tiles: open, centred, like the current site */
.t-cat .cat,.t-make .make{background:transparent;border:0;border-radius:0;box-shadow:none}
.t-cat .cat:hover,.t-make .make:hover{border:0;box-shadow:none;transform:none}
.t-cat .cat-img{background:#fff;aspect-ratio:1/1;border-radius:var(--r-lg)}
.t-cat .cat-img img{object-fit:contain;padding:10px}
.t-cat .cat:hover .cat-img img{transform:scale(1.06)}
.t-cat .cat-txt{padding:12px 4px 0;align-items:center;text-align:center;gap:4px}
.t-cat .cat h5{font-size:14.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.t-cat .cat span{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#8a8a8a}
.t-make .make{padding:12px 6px}
.t-make .make-logo{background:#fff;border-radius:50%;width:112px;height:112px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;border:1px solid var(--line)}
.t-make .make:hover .make-logo{border-color:var(--ink)}
.t-make .make-logo img{width:70px;height:70px}
.t-make .make-name,.t-make .make.has-logo .make-name{font-size:14.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.t-make .make-n{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#8a8a8a;margin-top:4px}
.t-make .make-sub{display:none}

/* --- Brand page: models as photo tiles, "View all" in place ------------- */
.bp-hero{background:#0c0c0d;color:#fff;padding:0 0 46px;position:relative;overflow:hidden}
.bp-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(900px 320px at 85% 0%,rgba(255,255,255,.07),transparent 70%);pointer-events:none}
.bp-hero .crumbs{color:#8f8f8f}
.bp-hero .crumbs a:hover{color:#fff}
.bp-hero .crumbs span{color:#cfcfcf}
.bp-hero-in{display:flex;align-items:center;gap:28px;padding-top:30px;position:relative;z-index:1}
.bp-logo{flex:none;width:112px;height:112px;border-radius:24px;background:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.bp-logo img{width:76px;height:76px;object-fit:contain}
.bp-eyebrow{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#9b9b9b}
.bp-hero h1{margin:0;font-size:clamp(30px,4.6vw,50px);font-weight:800;letter-spacing:-.025em;line-height:1.05}
.bp-lede{margin:12px 0 0;max-width:62ch;color:#bdbdbd;font-size:15px;line-height:1.6}
.bp-stats{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bp-stats li{border:1px solid #2e2e2e;border-radius:999px;padding:7px 14px;font-size:13px;color:#bdbdbd}
.bp-stats b{color:#fff;font-weight:700;margin-right:3px}

.bp-body{padding-top:48px;padding-bottom:64px}
.bp-models-sec,.bp-all{padding:0}
.bp-models-sec{margin-bottom:56px}
.bp-models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.bp-tile{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;text-align:left;color:var(--ink);transition:transform .18s,box-shadow .18s,border-color .18s;font:inherit;padding:0;cursor:pointer}
.bp-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-strong);text-decoration:none}
.bp-img{display:block;aspect-ratio:16/10;background:#fff;overflow:hidden}
.bp-img img{width:100%;height:100%;display:block;transition:transform .5s ease}
/* Car photos are 16:9 (1675 × 939), so the frame is 16:9 too: the whole
   photo shows edge to edge, long cars included, nothing cut off. */
.bp-img.is-car,.mp-visual.is-car{aspect-ratio:16/9}
.is-car img{object-fit:cover}
.bp-img.is-part img{object-fit:contain;padding:6% 8%}
.bp-tile:hover .bp-img img{transform:scale(1.04)}
.bp-txt{display:flex;flex-direction:column;gap:4px;padding:20px 24px 22px;border-top:1px solid var(--line);flex:1}
.bp-name{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.bp-sub{font-size:14px;color:var(--muted)}
.bp-go{margin-top:14px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.bp-go svg,.bp-all-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.bp-tile:hover .bp-go svg{transform:translateX(4px)}

.bp-all-tile{background:#101010;border-color:#101010;color:#fff;justify-content:center}
.bp-all-tile:hover{border-color:#000;background:#000}
.bp-all-in{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:32px 30px;height:100%;justify-content:center}
.bp-all-logo{width:54px;height:54px;border-radius:14px;background:#fff;display:grid;place-items:center;margin-bottom:14px}
.bp-all-logo img{width:38px;height:38px;object-fit:contain}
.bp-all-k{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#9b9b9b}
.bp-all-name{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.bp-all-n{font-size:13px;color:#b5b5b5}
.bp-all-go{margin-top:16px;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;background:#fff;color:#101010;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.bp-all-tile:hover .bp-all-go svg{transform:translateY(3px)}
.bp-all-tile[aria-expanded="true"] .bp-all-go{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px #4a4a4a}

.bp-all{scroll-margin-top:90px}
.bp-count{margin:-12px 0 20px;text-align:center}
.bp-more-row{display:flex;justify-content:center;margin-top:34px}
.bp-more{background:#fff;cursor:pointer;font-family:inherit}
.bp-more:disabled{opacity:.6;cursor:default}
.bp-more::after{content:"↓"}

@media (max-width:1080px){.bp-models{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (max-width:760px){
  .bp-hero{padding:0 0 30px}
  .bp-hero-in{flex-direction:column;align-items:flex-start;gap:18px;padding-top:22px}
  .bp-logo{width:76px;height:76px;border-radius:18px}.bp-logo img{width:52px;height:52px}
  .bp-lede{font-size:14px}
  .bp-body{padding-top:34px}
  .bp-models{grid-template-columns:minmax(0,1fr);gap:14px}
  .bp-txt{padding:14px 16px 16px}
  .bp-name{font-size:19px}.bp-sub{font-size:13px}
  .bp-go{margin-top:10px;font-size:11.5px}
  .bp-all-in{padding:22px 18px}
  .bp-all-logo{width:46px;height:46px;border-radius:12px;margin-bottom:10px}.bp-all-logo img{width:32px;height:32px}
  .bp-all-name{font-size:21px}
  .bp-all-go{height:38px;padding:0 16px;font-size:11.5px;margin-top:12px}
  .bp-models-sec{margin-bottom:40px}
}

/* --- Header: Brands → models dropdown ------------------------------------ */
.nav{align-items:center}
.nav-dd{position:relative}
.nav-dd-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 0;border:0;border-bottom:2px solid transparent;background:none;
  font:inherit;text-transform:inherit;letter-spacing:inherit;color:var(--ink-2);cursor:pointer}
.nav-dd-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.nav-dd:hover .nav-dd-btn,.nav-dd:focus-within .nav-dd-btn{color:var(--ink);border-color:var(--accent)}
.nav-dd:hover .nav-dd-btn svg,.nav-dd:focus-within .nav-dd-btn svg{transform:rotate(180deg)}
.dd{position:absolute;top:100%;left:-18px;padding-top:16px;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s,transform .16s,visibility 0s .16s;z-index:80}
.nav-dd:hover .dd,.nav-dd:focus-within .dd{opacity:1;visibility:visible;transform:none;transition:opacity .16s,transform .16s}
.dd-in{width:300px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.05)}
.nav .dd-k{margin:6px 10px 8px;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.dd-list{list-style:none;margin:0;padding:0}
.dd-item{position:relative}
.dd a{border:0;padding:0;text-transform:none;letter-spacing:normal;color:var(--ink)}
.nav .dd-link{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;transition:background .12s}
.dd-item:hover>.dd-link,.dd-link:focus-visible{background:var(--surface)}
.dd-logo{width:38px;height:38px;flex:none;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;
  font-weight:800;font-size:15px;overflow:hidden}
.dd-logo img{width:28px;height:28px;object-fit:contain}
.dd-name{display:flex;flex-direction:column;font-size:14.5px;font-weight:650;letter-spacing:-.01em;line-height:1.2;flex:1;min-width:0}
.dd-name small{font-size:12px;font-weight:500;color:var(--muted);margin-top:2px}
.dd-arrow{width:16px;height:16px;flex:none;fill:none;stroke:#a8a8a8;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s,stroke .15s}
.dd-item:hover .dd-arrow{stroke:var(--ink);transform:translateX(3px)}
.dd-sub{position:absolute;left:100%;top:-10px;padding-left:12px;opacity:0;visibility:hidden;transform:translateX(-6px);
  transition:opacity .14s,transform .14s,visibility 0s .14s}
.dd-item:hover>.dd-sub,.dd-item:focus-within>.dd-sub{opacity:1;visibility:visible;transform:none;transition:opacity .14s,transform .14s}
.dd-sub-in{width:250px;max-height:min(70vh,520px);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.05)}
.nav .dd-model{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:10px;font-size:14px;font-weight:550}
.nav .dd-model:hover{background:var(--surface)}
.dd-model em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--muted);background:var(--surface);border-radius:999px;padding:2px 8px}
.dd-model:hover em{background:#fff}
.nav .dd-sub-all,.nav .dd-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;padding:11px 12px;border-radius:12px;
  background:var(--ink);color:#fff;font-size:13px;font-weight:650}
.nav .dd-sub-all:hover,.nav .dd-foot:hover{background:#000;color:#fff}
.nav .dd-foot{background:var(--surface);color:var(--ink)}
.nav .dd-foot:hover{background:var(--surface-2);color:var(--ink)}
.dd-sub-all svg,.dd-foot svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* mobile drawer: Brands → models */
.mdr-brands details>summary{list-style:none;cursor:pointer}
.mdr-brands details>summary::-webkit-details-marker{display:none}
.mdr-brands>details>summary{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;font-size:21px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.mdr-brands summary svg{width:18px;height:18px;stroke:var(--line-strong);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s,stroke .2s;flex:none}
.mdr-brands details[open]>summary>svg{transform:rotate(180deg);stroke:var(--ink)}
.mdr-blist{padding:0 20px 14px}
.mdr-b{border-top:1px solid var(--line)}
.mdr-b>summary,.mdr-b-link{display:flex;align-items:center;gap:10px;padding:13px 2px;font-size:16.5px;font-weight:600;color:var(--ink)}
.mdr-b-link{border-top:1px solid var(--line)}
.mdr-b>summary span,.mdr-b-link span{flex:1}
.mdr-b em,.mdr-b-link em,.mdr-mlist em{font-style:normal;font-size:12px;font-weight:600;color:var(--muted)}
.mdr-mlist{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:2px 0 14px}
.mdr-mlist a{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;font-size:14.5px;font-weight:600;color:var(--ink)}
.mdr-mlist a.mdr-all{grid-column:1/-1;background:var(--ink);border-color:var(--ink);color:#fff;justify-content:center}

/* --- Parts list (brand "View all" and model pages) ------------------------ */
.lst .sec-line{margin-bottom:22px}
.lst-bar{margin-top:0}
.lst-stock{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 4px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;user-select:none}
.lst-stock input{position:absolute;opacity:0;pointer-events:none}
.lst-switch{width:40px;height:24px;border-radius:999px;background:var(--line-strong);position:relative;transition:background .15s;flex:none}
.lst-switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.lst-stock input:checked+.lst-switch{background:var(--ink)}
.lst-stock input:checked+.lst-switch::after{transform:translateX(16px)}
.lst-stock input:focus-visible+.lst-switch{outline:2px solid var(--ink);outline-offset:2px}
.lst-results{transition:opacity .15s}
.lst-results.is-loading{opacity:.45;pointer-events:none}
.lst-chips{margin:0 0 18px}
.lst-empty{padding:50px 0}

/* --- Model page ----------------------------------------------------------- */
.mp-hero{background:#0c0c0d;color:#fff;padding:0 0 52px;position:relative;overflow:hidden}
.mp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 360px at 78% 30%,rgba(255,255,255,.09),transparent 70%)}
.mp-hero .crumbs{color:#8f8f8f;position:relative;z-index:1}
.mp-hero .crumbs a:hover{color:#fff}
.mp-hero .crumbs span{color:#cfcfcf}
.mp-hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center;padding-top:28px;position:relative;z-index:1}
.mp-make{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#a9a9a9}
.mp-make i{font-style:normal;color:#555}
.mp-make-logo{width:34px;height:34px;border-radius:9px;background:#fff;display:grid;place-items:center}
.mp-make-logo img{width:24px;height:24px;object-fit:contain}
.mp-hero h1{margin:0;font-size:clamp(34px,5.4vw,62px);font-weight:800;letter-spacing:-.03em;line-height:1.02}
.mp-hero h1 span{color:#8c8c8c;font-weight:700}
.mp-lede{margin:16px 0 0;max-width:56ch;color:#bdbdbd;font-size:15.5px;line-height:1.6}
.mp-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.mp-btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;background:#fff;color:#101010;
  font-size:14px;font-weight:700;transition:transform .15s,background .15s}
.mp-btn:hover{transform:translateY(-2px);text-decoration:none}
.mp-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mp-btn.is-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px #3a3a3a}
.mp-btn.is-ghost:hover{box-shadow:inset 0 0 0 1px #777}
.mp-visual{aspect-ratio:16/10;border-radius:24px;overflow:hidden;background:#161617;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.mp-visual img{width:100%;height:100%;display:block}
.mp-visual.is-part{background:#fff}
.mp-visual.is-part img{object-fit:contain;padding:7%}
.mp-visual img.mp-visual-logo{object-fit:contain;padding:22%;background:#fff}

.mp-sibs{border-bottom:1px solid var(--line);background:#fff;padding:0}
.mp-sibs-in{display:flex;align-items:center;gap:18px;padding-top:14px;padding-bottom:14px}
.mp-sibs-k{flex:none;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mp-sibs-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.mp-sibs-row::-webkit-scrollbar{display:none}
.mp-sib{flex:none;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border:1px solid var(--line-strong);border-radius:999px;
  font-size:13.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;transition:.15s}
.mp-sib em{font-style:normal;font-size:11.5px;color:var(--muted);font-weight:600}
.mp-sib:hover{border-color:var(--ink);color:var(--ink);text-decoration:none}
.mp-sib.on{background:var(--ink);border-color:var(--ink);color:#fff}
.mp-sib.on em{color:#bdbdbd}
.mp-sib.is-all{border-style:dashed}

.mp-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-top:36px}
.mp-cat{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;transition:.15s}
.mp-cat b{font-size:15px;font-weight:700;color:var(--ink)}
.mp-cat span{font-size:12.5px;color:var(--muted)}
.mp-cat:hover{border-color:var(--ink);transform:translateY(-2px);text-decoration:none}
.mp-body{padding-top:44px;padding-bottom:64px}

@media (max-width:900px){
  .mp-hero-in{grid-template-columns:1fr;gap:26px}
  .mp-visual{order:-1;border-radius:18px}
  .mp-cats{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .mp-hero{padding:0 0 34px}
  .mp-hero-in{padding-top:18px}
  .mp-lede{font-size:14px}
  .mp-btn{height:44px;padding:0 18px;font-size:13px}
  .mp-sibs-k{display:none}
  .mp-cats{padding-top:24px;gap:8px}
  .mp-cat{padding:12px 14px}.mp-cat b{font-size:14px}
  .mp-body{padding-top:32px}
  .lst-stock{height:auto;padding:6px 2px}
}

/* --- 404 ------------------------------------------------------------------- */
.nf{background:#0c0c0d;color:#fff;padding:70px 0 64px;position:relative;overflow:hidden;text-align:center}
.nf::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px 300px at 50% 0%,rgba(255,255,255,.08),transparent 70%)}
.nf-in{position:relative;z-index:1;max-width:860px}
.nf-num{font-size:clamp(110px,20vw,210px);font-weight:900;line-height:.82;letter-spacing:-.06em;color:transparent;
  -webkit-text-stroke:2px rgba(255,255,255,.18);margin-bottom:-.12em;user-select:none}
.nf h1{margin:0;font-size:clamp(26px,4.2vw,44px);font-weight:800;letter-spacing:-.02em;text-transform:uppercase}
.nf-lede{margin:14px auto 0;max-width:56ch;color:#bdbdbd;font-size:15.5px;line-height:1.6}
.nf-search{position:relative;display:flex;gap:10px;max-width:640px;margin:30px auto 0;text-align:left}
.nf-search svg{position:absolute;left:18px;top:17px;width:19px;height:19px;fill:none;stroke:#8a8a8a;stroke-width:2;stroke-linecap:round;z-index:1}
.nf-search input{flex:1;min-width:0;height:54px;padding:0 18px 0 48px;border-radius:999px;border:1px solid #333;background:#fff;color:#101010;font:500 15.5px var(--font)}
.nf-search input:focus{outline:none;box-shadow:0 0 0 4px rgba(255,255,255,.15)}
.nf-search .btn{height:54px;padding:0 28px;background:#fff;color:#101010;border-color:#fff}
.nf-search .btn:hover{background:#e9e9e9}
.nf-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.nf-btns .btn{height:46px;padding:0 22px;font-size:14px}
.nf-btns .btn-primary{background:#fff;color:#101010;border-color:#fff}
.nf-btns .btn-ghost{background:transparent;color:#fff;border-color:#3a3a3a}
.nf-btns .btn-ghost:hover{border-color:#fff;background:transparent}
.nf-more{padding-top:50px;padding-bottom:60px}
.nf-sec{padding:0;margin-bottom:44px;text-align:center}
.nf-sec .grid{text-align:left}
.nf-k{margin:0 0 16px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.nf-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px;margin:0 auto}
.nf-pill{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 18px;border:1px solid var(--line-strong);border-radius:999px;
  font-size:14px;font-weight:600;color:var(--ink);background:#fff;transition:.15s}
.nf-pill img{width:24px;height:24px;object-fit:contain}
.nf-pill em{font-style:normal;font-size:12px;color:var(--muted);font-weight:600}
.nf-pill:hover{border-color:var(--ink);transform:translateY(-2px);text-decoration:none}
@media (max-width:640px){
  .nf{padding:46px 0 44px}
  .nf-search{flex-direction:column}
  .nf-search .btn{width:100%}
  .nf-btns .btn{flex:1 1 calc(50% - 10px);min-width:0;padding:0 12px}
}

/* --- Links inside text ------------------------------------------------------
   A link in a paragraph (typed in Pages & SEO, a blog post, a part description)
   is grey and underlined, so it stands out from the black text around it. */
p a:not([class]), .prose a:not([class]), .prose li a:not([class]), .pd-desc a:not([class]),
.usp p a, .seo-card p a, .readmore p a, .ct-note a, .ct-ok a, .ct-bad a, .co-store a{
  color:#858585;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  border-bottom:0;background:none;transition:color .15s}
p a:not([class]):hover, .prose a:not([class]):hover, .pd-desc a:not([class]):hover,
.usp p a:hover, .seo-card p a:hover, .readmore p a:hover, .ct-note a:hover, .ct-ok a:hover, .ct-bad a:hover, .co-store a:hover{
  color:var(--ink);background:none}
/* on the black bands the grey has to be lighter to be seen */
.ab-dark p a:not([class]), .hero p a:not([class]), .news p a:not([class]), .bp-hero p a:not([class]),
.mp-hero p a:not([class]), .nf p a:not([class]), .contact-strip p a:not([class]){color:#b4b4b4}
.ab-dark p a:not([class]):hover, .hero p a:not([class]):hover, .news p a:not([class]):hover,
.bp-hero p a:not([class]):hover, .mp-hero p a:not([class]):hover, .nf p a:not([class]):hover{color:#fff}

/* Contact map: our English card over Google's (which shows the address in Arabic) */
.ct-map-frame{position:relative}
.ct-map-card{position:absolute;top:10px;left:10px;z-index:2;width:min(300px,calc(100% - 20px));min-height:150px;box-sizing:border-box;
  background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.3);padding:12px 14px;display:flex;flex-direction:column;gap:4px;
  font-family:Roboto,Arial,sans-serif;color:#202124}
.ct-map-card b{font-size:15px;font-weight:600}
.ct-map-card span{font-size:12.5px;line-height:1.45;color:#5f6368}
.ct-map-btns{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:10px}
.ct-map-open{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 15px;border-radius:999px;background:#1a73e8;color:#fff!important;
  font-size:13.5px;font-weight:500;text-decoration:none!important}
.ct-map-open:hover{background:#1765cc}
.ct-map-open svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ct-map-dir{width:34px;height:34px;border-radius:50%;background:#e8f0fe;display:grid;place-items:center}
.ct-map-dir svg{width:18px;height:18px;fill:#1a73e8;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ct-map-dir svg path:first-child{stroke:none}
.ct-map-rate{display:inline-flex;align-items:center;gap:5px;margin-top:2px;font-size:13px;color:#70757a!important;text-decoration:none!important;font-weight:400!important}
.ct-map-rate u{color:#1a73e8;text-decoration:none}
.ct-map-rate:hover u{text-decoration:underline}
.ct-stars{display:inline-block;font-style:normal;font-size:13px;letter-spacing:1px;line-height:1;
  background:linear-gradient(90deg,#fbbc04 var(--r),#dadce0 var(--r));-webkit-background-clip:text;background-clip:text;color:transparent}
.ct-stars::before{content:"★★★★★"}

/* Checkout: Tabby option, same shape as the card option */
.tb-badge{display:inline-flex;align-items:center;height:21px;padding:0 9px;border-radius:5px;background:#3effc1;color:#292929;
  font:800 12.5px/1 var(--font);letter-spacing:-.02em}
.tb-q{font-size:13.5px!important;font-weight:650!important;color:var(--ink)}
.tb-plan{display:none;grid-template-columns:repeat(4,1fr);gap:0;margin-top:12px;padding:12px 4px 2px;border-top:1px solid var(--line)}
.pick-tabby:has(input:checked) .tb-plan{display:grid}
.tb-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.tb-step em{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-strong);background:#fff;position:relative;z-index:1}
.tb-step.is-now em{border-color:var(--ink);background:var(--ink);box-shadow:inset 0 0 0 2px #fff}
.tb-step::before{content:"";position:absolute;top:6px;left:-50%;right:50%;height:2px;background:var(--line-strong)}
.tb-step:first-child::before{display:none}
.tb-step b{font-size:13px!important;font-weight:650!important;color:var(--ink)}
.tb-step small{font-size:11.5px;color:var(--muted)}
.tb-step.is-now small{color:var(--ink);font-weight:600}
@media (max-width:420px){.tb-step b{font-size:12px!important}}

/* Sold out: the price is replaced by the words */
.card-price.is-out{font-size:14px;font-weight:700;color:var(--muted);letter-spacing:.01em}
.price.is-out{font-size:22px;font-weight:700;color:var(--muted)}

/* --- Cards v2: three to a row, taller, the whole photo always shown ------- */
.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.card-img{aspect-ratio:4/3}
.card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:5% 6%;box-sizing:border-box}
.card-body{padding:0 20px 20px;gap:7px}
.card-body::before{margin-bottom:16px}
.card-name{font-size:16.5px;line-height:1.35}
.card-pn{font-size:12.5px}
.card-foot{padding-top:15px}
.card-price{font-size:20px}
.card-add button,.card-ask{height:44px}
.t-card{--item:300px}
@media(max-width:1100px){.grid{gap:20px}.card-name{font-size:15.5px}.card-price{font-size:18px}}
@media(max-width:860px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.t-card{--item:220px}}
@media(max-width:560px){
  .card-body{padding:0 12px 14px}.card-body::before{margin-bottom:12px}
  .card-name{font-size:14px}.card-price{font-size:16px}.t-card{--item:176px}
}

/* --- Cards v3: less white. The photo keeps its white stage; everything under
   it sits on a soft grey panel, so each card reads as one object. ---------- */
.card{border-color:#e4e4e4;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card:hover{border-color:#cfcfcf;box-shadow:0 14px 34px -16px rgba(0,0,0,.28)}
.card-body{background:#f1f1f2;padding-top:18px}
.card-body::before{display:none}
.card-brand{display:inline-block;align-self:flex-start;background:#fff;border:1px solid #e6e6e6;border-radius:999px;padding:3px 9px;font-size:10px;color:#555}
.card-foot{border-top-color:#dedee0}
.card-add button{box-shadow:0 6px 14px -8px rgba(0,0,0,.5)}
.card.is-out .card-body{background:#efefef}
@media(max-width:560px){.card-body{padding-top:12px}.card-brand{font-size:9px;padding:2px 7px}}

/* --- Related parts: 3 in a row on big screens; on smaller ones all four, 2 at a time with arrows --- */
.rel{position:relative}
.rel-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.rel-track > .card:nth-child(n+4){display:none}
.rel-btn{display:none}
@media(max-width:1100px){.rel-track{gap:20px}}
@media(max-width:860px){
  .rel-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0 6px}
  .rel-track::-webkit-scrollbar{display:none}
  .rel-track > .card{flex:0 0 calc((100% - 12px) / 2);scroll-snap-align:start}
  .rel-track > .card:nth-child(n+4){display:flex}
  .rel-btn{display:grid;place-items:center;position:absolute;top:28%;z-index:5;width:38px;height:38px;border-radius:50%;
    border:1px solid var(--line-strong);background:#fff;box-shadow:0 4px 14px -6px rgba(0,0,0,.35);cursor:pointer;padding:0;transition:opacity .15s}
  .rel-btn svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .rel-btn.prev{left:-8px}.rel-btn.next{right:-8px}
  .rel-btn:disabled{opacity:0;pointer-events:none}
}

/* --- Category tiles (option 2) ---------------------------------------------
   Grey tile; the photo's white background melts into the grey (multiply), so
   the part sits on the tile instead of in a white box. */
.t-cat{--item:230px;gap:18px}
.t-cat .cat{background:#f1f1f2!important;border-radius:20px!important;padding:14px 14px 16px;transition:background .2s,transform .2s,box-shadow .2s}
.t-cat .cat:hover{background:#e9e9eb!important;transform:translateY(-3px)!important;box-shadow:0 16px 30px -18px rgba(0,0,0,.35)!important}
.t-cat .cat-img{background:transparent!important;aspect-ratio:4/3!important;border-radius:12px!important;overflow:hidden}
.t-cat .cat-img img{mix-blend-mode:multiply;object-fit:contain;padding:4px!important;width:100%;height:100%}
.t-cat .cat-txt{position:relative;align-items:flex-start!important;text-align:left!important;padding:14px 46px 0 4px!important;gap:3px!important}
.t-cat .cat h5{font-size:16px!important;font-weight:800;text-transform:none!important;letter-spacing:-.01em!important;line-height:1.2}
.t-cat .cat span{font-size:12px!important;letter-spacing:.06em!important;color:#7a7a7a!important}
.t-cat .cat-go{position:absolute;right:2px;bottom:0;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid #dcdcde;display:grid;place-items:center;transition:.2s}
.t-cat .cat-go svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.t-cat .cat:hover .cat-go{background:var(--ink);border-color:var(--ink)}
.t-cat .cat:hover .cat-go svg{stroke:#fff}
@media(max-width:860px){.t-cat{--item:190px;gap:12px}.t-cat .cat h5{font-size:14.5px!important}}
@media(max-width:560px){.t-cat{--item:168px}.t-cat .cat{padding:10px 10px 12px}.t-cat .cat-go{width:28px;height:28px}}
.t-cat .cat span{white-space:nowrap}
@media(max-width:560px){.t-cat .cat-txt{padding:10px 32px 0 2px!important}.t-cat .cat h5{font-size:13.5px!important}.t-cat .cat span{font-size:10.5px!important}}

/* --- Category page ----------------------------------------------------------- */
.cp-hero .mp-make{letter-spacing:.2em}
.cp-shots{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cp-shots.cp-n1{grid-template-columns:1fr}
.cp-shot{display:block;aspect-ratio:4/3;background:#fff;border-radius:16px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.cp-shots.cp-n1 .cp-shot{aspect-ratio:16/10}
.cp-shots.cp-n3 .cp-shot:first-child{grid-column:1/-1;aspect-ratio:16/8}
.cp-shot img{width:100%;height:100%;object-fit:contain;padding:8%;box-sizing:border-box;transition:transform .4s}
.cp-shot:hover{transform:translateY(-3px);box-shadow:0 18px 40px -20px rgba(0,0,0,.8)}
.cp-shot:hover img{transform:scale(1.05)}
.cp-makes{padding-top:34px}
.cp-k{margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cp-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 18px}
.cp-row::-webkit-scrollbar{display:none}
.cp-make{flex:none;display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border:1px solid var(--line);border-radius:999px;background:#f1f1f2;transition:.15s}
.cp-make:hover{border-color:var(--ink);background:#fff;text-decoration:none}
.cp-make.on{background:var(--ink);border-color:var(--ink)}
.cp-make.on b{color:#fff}.cp-make.on small{color:#bdbdbd}
.cp-logo{width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-weight:800;overflow:hidden}
.cp-logo img{width:26px;height:26px;object-fit:contain}
.cp-mk{display:flex;flex-direction:column;line-height:1.2}
.cp-mk b{font-size:14px;font-weight:700;color:var(--ink)}
.cp-mk small{font-size:11.5px;color:var(--muted)}
.cp-chip{flex:none;display:inline-flex;align-items:center;height:40px;padding:0 16px;border:1px solid var(--line-strong);border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink)}
.cp-chip:hover{border-color:var(--ink);text-decoration:none}
@media(max-width:900px){.cp-shots{order:-1}.cp-shots .cp-shot{border-radius:12px}}
@media(max-width:560px){.cp-shots{grid-template-columns:repeat(4,1fr);gap:8px}.cp-shots.cp-n1{grid-template-columns:1fr}.cp-shots.cp-n2{grid-template-columns:1fr 1fr}.cp-shots.cp-n3{grid-template-columns:repeat(3,1fr)}.cp-shots .cp-shot,.cp-shots.cp-n3 .cp-shot:first-child{grid-column:auto;aspect-ratio:1;border-radius:10px}.cp-shot img{padding:6%}.cp-makes{padding-top:22px}}

/* ---- phones: no zoom when a box is tapped ----
   iPhone Safari zooms the whole page in when you tap a box whose text is
   smaller than 16px (the discount code, the search) and back out when the
   keyboard closes. 16px on touch screens stops it, without taking pinch-zoom
   away from anyone. */
@media (max-width:900px), (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),
  select, textarea{font-size:16px!important}
}

/* ---- messages inside the open cart (public/js/cart.js noteShow) ---- */
.cd-note{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease;flex:none}
.cd-note.is-on{grid-template-rows:1fr}
.cd-note>div{overflow:hidden;min-height:0}
.cd-note-in{display:flex;align-items:center;gap:10px;margin:12px 22px 2px;padding:11px 14px;border-radius:10px;
  font-size:14px;font-weight:550;line-height:1.4;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s}
.cd-note.is-on .cd-note-in{opacity:1;transform:none}
.cd-note-in svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cd-note--success{background:#ecf6ee;color:#17602e}
.cd-note--error{background:#fbeeee;color:#a32020}
.cd-note--info{background:#f1f1f2;color:#111}