/* =====================================================================
   Dhyey Textile — storefront
   Hand-written. No framework, no build step. Tokens first, then blocks.
   Indigo is the fabric dye colour; terracotta is the call-to-action.
   ===================================================================== */

/* ------------------------------------------------------------ tokens */
:root {
  --ink:        #17161a;
  --ink-2:      #45424c;
  --ink-3:      #6f6b78;
  --line:       #e4e1dc;
  --line-2:     #f0ede8;
  --paper:      #ffffff;
  --paper-2:    #faf8f5;
  --paper-3:    #f4f1ec;

  --indigo:     #2a3a7c;
  --indigo-d:   #1f2c60;
  --indigo-l:   #eef1fa;
  --terra:      #b4552f;
  --terra-d:    #96431f;
  --terra-l:    #fbf0ea;
  --green:      #1f7a54;
  --green-l:    #e9f5ef;
  --amber:      #9a6700;
  --amber-l:    #fdf6e3;
  --red:        #b3261e;
  --red-l:      #fdeceb;

  --radius:     10px;
  --radius-sm:  6px;
  --radius-lg:  16px;
  --shadow:     0 1px 2px rgba(23,22,26,.06), 0 4px 16px rgba(23,22,26,.06);
  --shadow-lg:  0 8px 40px rgba(23,22,26,.14);
  --wrap:       1240px;

  --brand-deep: #1c2550;
  --brand-mid:  #4457a8;
  --on-dark:    rgba(255,255,255,.92);
  --on-dark-2:  rgba(255,255,255,.74);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

/* ------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 15px/1.6 var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
/* Must come after every display rule below: a .notice with [hidden] would
   otherwise still render as an empty coloured bar. */
[hidden] { display: none !important; }
a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.22; font-weight: 650; letter-spacing: -.015em; }
h1 { font-size: clamp(26px, 4vw, 38px); }
h2 { font-size: clamp(21px, 2.6vw, 27px); }
h3 { font-size: 18px; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 3px; }

/* ------------------------------------------------------------ layout */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap--narrow { max-width: 780px; }
.section { padding: 48px 0; }
.section--tight { padding: 30px 0; }
.section--paper { background: var(--paper-2); }
.grid { display: grid; gap: 20px; }
.stack > * + * { margin-top: 14px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.spacer { flex: 1 1 auto; }

.u-muted   { color: var(--ink-3); }
.u-small   { font-size: 13px; }
.u-tiny    { font-size: 12px; }
.u-strong  { font-weight: 650; }
.u-center  { text-align: center; }
.u-right   { text-align: right; }
.u-nowrap  { white-space: nowrap; }
.u-mt-0 { margin-top: 0 } .u-mb-0 { margin-bottom: 0 }
.u-mt-16 { margin-top: 16px } .u-mt-24 { margin-top: 24px } .u-mt-32 { margin-top: 32px }
.u-hide { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm);
  transition: top .15s;
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------ topbar */
.topbar {
  background: var(--ink); color: var(--on-dark-2);
  font-size: 13px; padding: 7px 0;
}
.topbar a { color: #fff; }
.topbar__inner { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------------------ header */
.header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex; align-items: center; gap: 20px;
  min-height: 68px;
}
.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand__mark {
  width: 38px; height: 38px; border-radius: 9px; flex: 0 0 auto;
  background: linear-gradient(140deg, var(--indigo), var(--brand-mid));
  color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; letter-spacing: .04em;
}
.brand__name { font-size: 17px; font-weight: 680; color: var(--ink); letter-spacing: -.02em; }
.brand__tag  { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3); letter-spacing: .02em; }

.searchbar { flex: 1 1 auto; max-width: 460px; position: relative; }
.searchbar input {
  width: 100%; height: 42px; padding: 0 42px 0 15px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper-2); font-size: 14px; color: var(--ink);
}
.searchbar input:focus { background: #fff; border-color: var(--indigo); outline: none; box-shadow: 0 0 0 3px var(--indigo-l); }
.searchbar button {
  position: absolute; right: 4px; top: 4px; width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: var(--indigo); color: #fff;
  display: grid; place-items: center; cursor: pointer;
}
.searchbar button:hover { background: var(--indigo-d); }

.header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.burger {
  display: none; width: 42px; height: 42px; border: 1px solid var(--line);
  background: #fff; border-radius: var(--radius-sm); cursor: pointer;
  align-items: center; justify-content: center; color: var(--ink);
}

/* ------------------------------------------------------------ nav */
.nav { border-bottom: 1px solid var(--line); background: #fff; }
.nav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav__link {
  display: block; padding: 12px 14px; font-size: 14px; font-weight: 550;
  color: var(--ink-2); border-bottom: 2px solid transparent;
}
.nav__link:hover, .nav__link.is-active {
  color: var(--indigo); border-bottom-color: var(--indigo); text-decoration: none;
}
.nav__item { position: relative; }
.nav__item:hover > .nav__drop, .nav__item:focus-within > .nav__drop { display: block; }
.nav__drop {
  display: none; position: absolute; left: 0; top: 100%; z-index: 30;
  min-width: 230px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px;
}
.nav__drop a {
  display: block; padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: 14px; color: var(--ink-2);
}
.nav__drop a:hover { background: var(--paper-3); color: var(--indigo); text-decoration: none; }

/* The sign-out button lives in the same menu and must not look different. */
.nav__drop form button {
  padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: 14px; color: var(--ink-2); font-family: inherit;
}
.nav__drop form button:hover { background: var(--paper-3); color: var(--indigo); }
.nav__drop--right { left: auto; right: 0; min-width: 210px; }

/* currency picker sits in the header, so it opens on hover and on focus */
.currency-picker { position: relative; }
.currency-picker:hover > .nav__drop,
.currency-picker:focus-within > .nav__drop { display: block; }

.pricebox__note {
  font-size: 12.5px; color: var(--amber); background: var(--amber-l);
  padding: 7px 10px; border-radius: var(--radius-sm); margin-top: 8px; line-height: 1.45;
}

/* mobile drawer */
.drawer {
  position: fixed; inset: 0 30% 0 0; z-index: 60; background: #fff;
  transform: translateX(-100%); transition: transform .22s ease;
  box-shadow: var(--shadow-lg); overflow-y: auto; padding: 18px;
  min-width: 280px;
}
.drawer.is-open { transform: none; }
.drawer__backdrop {
  position: fixed; inset: 0; z-index: 50; background: rgba(23,22,26,.4);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.drawer__backdrop.is-open { opacity: 1; pointer-events: auto; }
.drawer a { display: block; padding: 10px 6px; color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.drawer a:hover { color: var(--indigo); text-decoration: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.drawer__group { margin-top: 18px; padding-top: 6px; border-top: 2px solid var(--line); }
.drawer__label {
  margin: 10px 6px 2px; font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.drawer__form { margin: 0; }
.drawer__form button {
  all: unset; cursor: pointer; display: block; width: 100%;
  padding: 10px 6px; color: var(--ink-3); border-bottom: 1px solid var(--line-2);
}
.drawer__form button:hover { color: var(--indigo); }
.drawer .cart-link__count { margin-left: 6px; }

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: var(--btn-py, 11px) var(--btn-px, 20px);
  border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: var(--btn-fs, 14px); font-weight: 600; line-height: 1.2; cursor: pointer;
  text-transform: var(--btn-case, none); letter-spacing: var(--btn-track, 0);
  background: var(--paper-3); color: var(--ink); text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { text-decoration: none; background: var(--line-2); }
.btn--primary { background: var(--terra); color: #fff; }
.btn--primary:hover { background: var(--terra-d); }
.btn--indigo { background: var(--indigo); color: #fff; }
.btn--indigo:hover { background: var(--indigo-d); }
.btn--outline { background: #fff; border-color: var(--line); color: var(--ink); }
.btn--outline:hover { border-color: var(--ink-3); background: #fff; }
.btn--ghost { background: transparent; color: var(--indigo); padding-left: 8px; padding-right: 8px; }
.btn--ghost:hover { background: var(--indigo-l); }
.btn--block { width: 100%; }
.btn--lg { padding: 14px 26px; font-size: 15px; }
.btn--sm { padding: 7px 13px; font-size: 13px; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

/* ------------------------------------------------------------ badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--paper-3); color: var(--ink-2);
}
.badge--stock   { background: var(--green-l);  color: var(--green); }
.badge--low     { background: var(--amber-l);  color: var(--amber); }
.badge--out     { background: var(--red-l);    color: var(--red); }
.badge--sample  { background: var(--indigo-l); color: var(--indigo); }
.badge--moq     { background: var(--terra-l);  color: var(--terra-d); }
.badge--new     { background: var(--ink); color: #fff; }

/* ------------------------------------------------------------ cards */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px;
}
.card--flush { padding: 0; overflow: hidden; }
.card__head { padding: 16px 20px; border-bottom: 1px solid var(--line); font-weight: 650; }
.card__body { padding: 20px; }

/* ------------------------------------------------------------ product card */
.products {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.pcard {
  display: flex; flex-direction: column; text-align: var(--card-align, left);
  background: var(--paper); border: 1px solid var(--card-border, var(--line));
  border-radius: var(--radius); box-shadow: var(--card-shadow, none);
  overflow: hidden; transition: box-shadow .16s, transform .16s, border-color .16s;
}
.pcard:hover { box-shadow: var(--shadow); border-color: var(--ink-3); transform: translateY(-2px); }
.pcard__media {
  position: relative; aspect-ratio: var(--card-ratio, 4 / 3);
  background: var(--paper-3); overflow: hidden;
}
/* `contain` shows a whole roll photographed on white; `cover` crops a flat
   swatch to fill its frame. A grid of one is ruined by the other. */
.pcard__media img { width: 100%; height: 100%; object-fit: var(--card-fit, cover); transition: transform .4s; }
.pcard:hover .pcard__media img { transform: scale(1.04); }
.pcard__flags { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.pcard__foot { justify-content: var(--card-align, left); }
.pcard__body { padding: 14px 15px 16px; display: flex; flex-direction: column; flex: 1 1 auto; gap: 8px; }
.pcard__cat { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; }
.pcard__title { font-size: 15px; font-weight: 620; line-height: 1.35; margin: 0; }
.pcard__title a { color: var(--ink); }
.pcard__title a:hover { color: var(--indigo); text-decoration: none; }
.pcard__spec { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.pcard__price { margin-top: auto; padding-top: 6px; }
.pcard__amount { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.pcard__unit { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.pcard__compare { font-size: 13px; color: var(--ink-3); text-decoration: line-through; margin-left: 6px; }
.pcard__ask { font-size: 14px; font-weight: 620; color: var(--indigo); }
.pcard__foot { display: flex; gap: 8px; }
.pcard__moq { font-size: 12px; color: var(--terra-d); font-weight: 600; }

/* ------------------------------------------------------------ hero */
.hero {
  background: linear-gradient(160deg, var(--brand-deep) 0%, var(--indigo) 55%, var(--brand-mid) 100%);
  color: #fff; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0; opacity: .16;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.35) 0 1px, transparent 1px 9px);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; padding: 64px 0 60px; max-width: 660px; }
.hero h1 { color: #fff; margin-bottom: 14px; }
.hero p { color: var(--on-dark-2); font-size: 17px; max-width: 54ch; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hero__stats { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 38px; }
.hero__stat b { display: block; font-size: 22px; font-weight: 700; }
.hero__stat span { font-size: 13px; color: var(--on-dark-2); }

/* ------------------------------------------------------------ trust strip */
.trust { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.trust__item { display: flex; gap: 12px; align-items: flex-start; }
.trust__icon {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 9px;
  background: var(--indigo-l); color: var(--indigo); display: grid; place-items: center;
}
.trust__item b { display: block; font-size: 14px; }
.trust__item span { font-size: 13px; color: var(--ink-3); }

/* ------------------------------------------------------------ category tiles */
.cats { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.cat {
  position: relative; display: block; border-radius: var(--radius);
  overflow: hidden; aspect-ratio: 5 / 4; background: var(--paper-3);
  border: 1px solid var(--line);
}
.cat img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.cat:hover img { transform: scale(1.05); }
.cat:hover { text-decoration: none; }
.cat__label {
  position: absolute; inset: auto 0 0 0; padding: 26px 14px 13px;
  background: linear-gradient(transparent, rgba(12,11,16,.82));
  color: #fff; font-weight: 620; font-size: 15px;
}
.cat__label span { display: block; font-weight: 500; font-size: 12px; opacity: .8; }

/* ------------------------------------------------------------ section head */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.section-head h2 { margin: 0; }
.section-head p { margin: 4px 0 0; color: var(--ink-3); font-size: 14px; }

/* ------------------------------------------------------------ breadcrumbs */
.crumbs { font-size: 13px; color: var(--ink-3); padding: 14px 0; display: flex; gap: 7px; flex-wrap: wrap; }
.crumbs > .wrap { flex: 1 1 100%; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--indigo); }
.crumbs span[aria-current] { color: var(--ink-2); font-weight: 550; }

/* ------------------------------------------------------------ catalog layout */
.catalog { display: grid; grid-template-columns: 258px 1fr; gap: 32px; align-items: start; padding-bottom: 56px; }
.filters { position: sticky; top: 88px; }
.filters__group { border-bottom: 1px solid var(--line); padding: 14px 0; }
.filters__group:first-child { padding-top: 0; }
.filters__title {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 13px; font-weight: 680; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2);
}
.filters__title svg { transition: transform .18s; }
.filters__title[aria-expanded="false"] svg { transform: rotate(-90deg); }
.filters__body { margin-top: 12px; max-height: 260px; overflow-y: auto; }
.filters__body[hidden] { display: none; }
.facet { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.facet input { width: 15px; height: 15px; accent-color: var(--indigo); margin: 0; flex: 0 0 auto; }
.facet__count { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.facet:hover { color: var(--indigo); }
.swatch { width: 15px; height: 15px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); flex: 0 0 auto; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 11px;
  background: var(--indigo-l); color: var(--indigo); border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
}
.chip a { color: inherit; opacity: .65; font-size: 14px; line-height: 1; }
.chip a:hover { opacity: 1; text-decoration: none; }

.toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--line);
}
.select {
  height: 38px; padding: 0 32px 0 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: #fff no-repeat right 10px center/10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%236f6b78' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  font-size: 14px; color: var(--ink); appearance: none; cursor: pointer;
}
.filter-toggle { display: none; }

/* ------------------------------------------------------------ product detail */
.pdp { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 44px; align-items: start; padding-bottom: 20px; }
.gallery__main {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--paper-3); aspect-ratio: 1 / 1;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: flex; gap: 9px; margin-top: 10px; flex-wrap: wrap; }
.gallery__thumb {
  width: 68px; height: 68px; border-radius: var(--radius-sm); overflow: hidden;
  border: 2px solid transparent; background: var(--paper-3); cursor: pointer; padding: 0;
}
.gallery__thumb.is-active { border-color: var(--indigo); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.pdp__eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 650; }
.pdp__title { margin: 6px 0 10px; }
.pdp__meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); margin-bottom: 16px; }

.pricebox { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.pricebox__amount { font-size: 30px; font-weight: 720; letter-spacing: -.025em; line-height: 1.1; }
.pricebox__unit { font-size: 14px; color: var(--ink-3); font-weight: 550; }
.pricebox__compare { font-size: 15px; color: var(--ink-3); text-decoration: line-through; margin-left: 8px; }
.pricebox__reason { font-size: 13px; color: var(--green); font-weight: 600; margin-top: 5px; }
.pricebox__hidden { font-size: 18px; font-weight: 650; color: var(--indigo); }
.pricebox__note { font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.pricebox__tax { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; }

.ladder { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.ladder table { font-size: 13.5px; }
.ladder th, .ladder td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--line-2); }
.ladder th { background: var(--paper-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 680; }
.ladder tr:last-child td { border-bottom: 0; }
.ladder td:last-child, .ladder th:last-child { text-align: right; }
.ladder .is-current { background: var(--indigo-l); }
.ladder__save { color: var(--green); font-weight: 650; font-size: 12.5px; }
.ladder__locked { padding: 10px 14px; background: var(--amber-l); font-size: 12.5px; color: var(--amber); }

.qtyrow { display: flex; gap: 10px; align-items: stretch; margin-top: 16px; flex-wrap: wrap; }
.qtyfield { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.qtyfield button {
  width: 40px; height: 46px; border: 0; background: #fff; color: var(--ink-2);
  font-size: 19px; cursor: pointer; line-height: 1;
}
.qtyfield button:hover { background: var(--paper-3); }
.qtyfield input { width: 84px; height: 46px; border: 0; text-align: center; font-size: 15px; font-weight: 620; color: var(--ink); }
.qtyfield input:focus { outline: none; }
.qtyfield__unit { padding: 0 12px 0 2px; font-size: 13px; color: var(--ink-3); }

.linetotal { margin-top: 12px; padding: 12px 14px; background: var(--indigo-l); border-radius: var(--radius-sm); font-size: 14px; }
.linetotal b { font-size: 17px; }

.notice {
  display: flex; gap: 10px; padding: 11px 14px; border-radius: var(--radius-sm);
  font-size: 13.5px; line-height: 1.5;
}
.notice svg { flex: 0 0 auto; margin-top: 2px; }
.notice--moq  { background: var(--terra-l); color: var(--terra-d); }
.notice--info { background: var(--indigo-l); color: var(--indigo-d); }
.notice--warn { background: var(--amber-l);  color: var(--amber); }
.notice--ok   { background: var(--green-l);  color: var(--green); }
.notice--error{ background: var(--red-l);    color: var(--red); }

.optgroup { margin-top: 18px; }
.optgroup__label { font-size: 13px; font-weight: 650; margin-bottom: 8px; }
.optgroup__values { display: flex; gap: 8px; flex-wrap: wrap; }
.optval {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; font-size: 13.5px; cursor: pointer; color: var(--ink-2);
}
.optval.is-active { border-color: var(--indigo); background: var(--indigo-l); color: var(--indigo); font-weight: 620; }
.optval.is-unavailable { opacity: .4; text-decoration: line-through; }

.specs { width: 100%; font-size: 14px; }
.specs th, .specs td { padding: 10px 0; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.specs th { width: 40%; font-weight: 550; color: var(--ink-3); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 40px 0 24px; flex-wrap: wrap; }
.tabs button {
  padding: 11px 16px; border: 0; background: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--ink-3); border-bottom: 2px solid transparent;
}
.tabs button.is-active { color: var(--indigo); border-bottom-color: var(--indigo); }
.tabpanel[hidden] { display: none; }
.prose { font-size: 15px; line-height: 1.75; max-width: 72ch; color: var(--ink-2); }
.prose h2, .prose h3 { color: var(--ink); margin-top: 1.4em; }

/* ------------------------------------------------------------ forms */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.field .req { color: var(--red); }
.input, .textarea, select.input {
  width: 100%; padding: 0 var(--input-px, 14px); font: inherit;
  font-size: var(--input-fs, 14.5px); color: var(--ink);
  height: var(--input-h, 44px); line-height: calc(var(--input-h, 44px) - 2px);
  background: var(--input-bg, #fff); border: 1px solid var(--input-border, var(--line));
  border-radius: var(--radius-sm);
}
/* A textarea is measured in lines, not in one row's height. */
.textarea { height: auto; line-height: 1.6; padding: 11px var(--input-px, 14px); }
select.input {
  appearance: none; padding-right: 34px;
  background: #fff no-repeat right 12px center/10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%236f6b78' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
}
.input:focus, .textarea:focus {
  outline: none; background: var(--paper); border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-l);
}
.textarea { min-height: 120px; resize: vertical; }
.field__hint { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }
.field__error { font-size: 12.5px; color: var(--red); margin-top: 5px; font-weight: 550; }
.field.has-error .input, .field.has-error .textarea { border-color: var(--red); }
.field-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.field-row--3 { grid-template-columns: repeat(3, 1fr); }
.check { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); }
.check input { width: 16px; height: 16px; accent-color: var(--indigo); margin: 2px 0 0; flex: 0 0 auto; }
.honey { position: absolute !important; left: -9999px !important; }

/* ------------------------------------------------------------ flash */
.flash {
  padding: 13px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 20px;
  display: flex; gap: 10px; align-items: flex-start;
}
.flash--success { background: var(--green-l); color: var(--green); }
.flash--error   { background: var(--red-l);   color: var(--red); }
.flash--info    { background: var(--indigo-l);color: var(--indigo-d); }
.flash--warning { background: var(--amber-l); color: var(--amber); }

/* ------------------------------------------------------------ empty state */
.empty { text-align: center; padding: 60px 20px; color: var(--ink-3); }
.empty h3 { color: var(--ink); }

/* ------------------------------------------------------------ pagination */
.pagination { display: flex; gap: 5px; justify-content: center; margin: 36px 0 8px; flex-wrap: wrap; }
.pagination__item {
  min-width: 38px; height: 38px; padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 550;
}
.pagination__item:hover { border-color: var(--ink-3); text-decoration: none; }
.pagination__item.is-active { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.pagination__item.is-disabled { opacity: .4; pointer-events: none; }
.pagination__gap { padding: 0 6px; align-self: center; color: var(--ink-3); }

/* ------------------------------------------------------------ modal */
.modal { position: fixed; inset: 0; z-index: 70; display: none; }
.modal.is-open { display: block; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(23,22,26,.5); }
.modal__panel {
  position: relative; max-width: 620px; margin: 5vh auto; background: #fff;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  max-height: 90vh; overflow-y: auto;
}
.modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 24px 0; }
.modal__head h2 { margin: 0; font-size: 20px; }
.modal__close { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink-3); padding: 0 4px; }
.modal__body { padding: 18px 24px 24px; }

/* ------------------------------------------------------------ cta band */
.cta {
  background: var(--ink); color: #fff; border-radius: var(--radius-lg);
  padding: 40px; display: flex; gap: 26px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.cta h2 { color: #fff; margin: 0 0 6px; }
.cta p { color: var(--on-dark-2); margin: 0; max-width: 50ch; }

/* ------------------------------------------------------------ footer */
.footer { background: var(--paper-2); border-top: 1px solid var(--line); padding: 52px 0 28px; margin-top: 60px; font-size: 14px; }
.footer__grid { display: grid; gap: 32px; grid-template-columns: 1.6fr repeat(3, 1fr); }
.footer h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin-bottom: 12px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 8px; }
.footer a { color: var(--ink-2); }
.footer a:hover { color: var(--indigo); }
.footer__bottom {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-3);
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1024px) {
  .catalog { grid-template-columns: 1fr; }
  .filters {
    position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(330px, 88vw);
    background: #fff; padding: 20px; overflow-y: auto; transform: translateX(-100%);
    transition: transform .22s ease; box-shadow: var(--shadow-lg); top: 0;
  }
  .filters.is-open { transform: none; }
  .filter-toggle { display: inline-flex; }
  .pdp { grid-template-columns: 1fr; gap: 30px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .searchbar { order: 3; flex-basis: 100%; max-width: none; margin-bottom: 12px; }
  .header__inner { flex-wrap: wrap; padding-top: 12px; min-height: 0; }
  .hero__inner { padding: 44px 0 40px; }

  /* Keep the brand, the menu button and the buttons on one line.
     A zero basis, not `auto`: flexbox assigns items to lines from their
     content width and only shrinks afterwards, so a brand asking for its full
     width pushes the buttons onto a row of their own before any shrinking is
     considered. At zero it never causes a wrap and simply grows into whatever
     the buttons leave — and the name is then the one thing that gives way, by
     truncating rather than reflowing the header. */
  .brand { flex: 1 1 0; min-width: 0; }
  .brand > span { min-width: 0; }
  .brand__name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* The tagline goes rather than being cut off mid-word: it repeats what the
     top strip already says, and the room is better spent on the name. */
  .brand__tag { display: none; }
  /* A real logo has to give way too, or a wide one puts the buttons back on a
     second row exactly as the typed name did. */
  .brand__logo { max-width: 100%; object-fit: contain; }
}
@media (max-width: 640px) {
  .field-row, .field-row--3 { grid-template-columns: 1fr; }
  .products { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .cta { padding: 28px 22px; }
  .footer__grid { grid-template-columns: 1fr; }
  .section { padding: 34px 0; }

  /* On a phone the bar keeps only the two things a buyer needs while reading a
     price: what currency it is in, and how to ask for a quotation. Sign in, the
     account menu and the basket move into the drawer, where there is room to
     label them properly.

     640px rather than the 860px where the burger appears, because 641–1024 is
     what this site calls a tablet everywhere else — the section visibility
     rules included — and a tablet has room for all of them. */
  .hdr-desk { display: none !important; }

  /* And everything is trimmed so menu, mark, name, currency and quote fit on
     one line at phone widths rather than needing the row to itself. */
  .header__inner { gap: 8px; }
  .burger { width: 34px; height: 34px; }

  .brand { gap: 7px; }
  .brand__mark { width: 30px; height: 30px; border-radius: 8px; font-size: 12px; }
  .brand__name { font-size: 15px; }
  .brand__logo { max-height: 32px; width: auto; }

  .header__actions { gap: 6px; flex: 0 0 auto; }
  .header__actions .btn--sm { padding: 6px 9px; font-size: 12px; white-space: nowrap; }
  .header__actions .currency-picker .btn--sm { padding: 6px 7px; gap: 4px; }
}

/* Below about 380px there is no arrangement of a mark, a name and two buttons
   that fits, so the mark goes and the name stays — a name a buyer can read
   beats a monogram they cannot place. */
@media (max-width: 380px) {
  .brand__mark { display: none; }
}
/* ------------------------------------------------------- account area */
.acct { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 32px; margin-top: 24px; align-items: start; }
.acct__body { min-width: 0; }

.acct-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 90px; }
.acct-nav__link {
  display: block; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 550; color: var(--ink-2); text-decoration: none;
  background: none; border: 0; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
}
.acct-nav__link:hover { background: var(--paper-3); color: var(--ink); }
.acct-nav__link.is-active { background: var(--indigo-l); color: var(--indigo-d); }
.acct-nav__link--out { color: var(--ink-3); }
.acct-nav__out { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

/* auto-fit rather than a fixed four: the account gained an Orders tile, and a
   hard-coded column count leaves the fifth stranded alone on a second row. */
.acct-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.acct-tile {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px;
}
.acct-tile__n { display: block; font-size: 22px; font-weight: 650; color: var(--ink); line-height: 1.2; }
.acct-tile__l { display: block; font-size: 12px; color: var(--ink-3); margin-top: 4px; }

.acct-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.acct-table th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-3); font-weight: 650; padding: 12px 20px; border-bottom: 1px solid var(--line);
}
.acct-table td { padding: 13px 20px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.acct-table tr:last-child td { border-bottom: 0; }
.acct-table th.u-right, .acct-table td.u-right { text-align: right; }

.acct-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.acct-addr { padding: 16px 18px; }
.acct-addr__top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.acct-addr__act { display: flex; gap: 6px; align-items: center; margin-top: 12px; }

/* Status chips. Every quotation state gets its own, because "expired" and
   "accepted" must never be a glance apart. */
.pill {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .01em;
  background: var(--paper-3); color: var(--ink-2); white-space: nowrap;
}
.pill--sent, .pill--viewed     { background: var(--indigo-l); color: var(--indigo-d); }
.pill--accepted, .pill--converted { background: var(--green-l); color: var(--green); }
.pill--rejected, .pill--expired   { background: var(--red-l);   color: var(--red); }
.pill--revised                 { background: var(--amber-l);  color: var(--amber); }

/* Order statuses. The order page has been writing these class names since it
   was built and none of them existed, so every order read as the same grey. */
.pill--pending                 { background: var(--amber-l);  color: var(--amber); }
.pill--confirmed               { background: var(--indigo-l); color: var(--indigo-d); }
.pill--processing              { background: var(--indigo-l); color: var(--indigo-d); }
.pill--ready                   { background: var(--indigo-l); color: var(--indigo-d); }
.pill--shipped                 { background: var(--green-l);  color: var(--green); }
.pill--delivered               { background: var(--green-l);  color: var(--green); }
.pill--cancelled               { background: var(--red-l);    color: var(--red); }

.u-danger { color: var(--red); }
.u-flex { display: flex; }
.u-between { justify-content: space-between; }
.u-gap-8 { gap: 8px; }

@media (max-width: 860px) {
  .acct { grid-template-columns: 1fr; gap: 20px; }
  .acct-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .acct-nav__link { width: auto; }
  .acct-nav__out { margin: 0; padding: 0; border: 0; }
  .acct-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------- touch targets
   The header is deliberately trimmed at phone widths so the mark, the name,
   the currency and the quote button share one line. That is the right call —
   but it leaves those controls 28px tall, and the utility bar's phone and
   WhatsApp links 21px, against the ~44px a thumb actually needs.

   So the hit area is grown without touching the layout: an invisible overlay
   centred on each control, 44px tall, which a finger lands on and the eye
   never sees. Nothing moves, nothing gets bigger, and the buttons stop being
   a game of darts.

   Scoped to coarse pointers so a mouse user never picks up an invisible box
   that overlaps the control above. */
@media (max-width: 860px) and (pointer: coarse) {
  .topbar a,
  .burger,
  .header__actions .btn--sm { position: relative; }

  .topbar a::after,
  .burger::after,
  .header__actions .btn--sm::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    height: 44px; transform: translateY(-50%);
  }

  /* Links stacked in a list need vertical room instead — an overlay there
     would just steal taps from the line above. */
  .footer a, .acct-nav__link { padding-top: 6px; padding-bottom: 6px; }
}

/* ------------------------------------------------------- page layouts
   The main-plus-sidebar layout, used by cart, checkout, the order page, the
   quotation page and contact.

   These were five inline `style="grid-template-columns:..."` attributes on the
   views, one per page. An inline style cannot be overridden by a media query —
   that is the whole point of it — so every one of those pages stayed in two
   columns on a phone, with the form squeezed into half a screen and the sidebar
   crushed to one word per line. They are the five pages a buyer has to get
   through to give us money.

   So the ratio lives here, next to the breakpoint that undoes it. */
.page-split {
  display: grid; gap: 32px; align-items: start;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}
.page-split--even { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

@media (max-width: 900px) {
  .page-split, .page-split--even { grid-template-columns: 1fr; gap: 22px; }
}

/* An email address or a tracking number has no spaces to break at, and in a
   narrow sidebar it simply runs off the side of the phone. */
.card a, .card .u-mono, .acct-table a { overflow-wrap: anywhere; }

/* Any table too wide for the screen scrolls inside its own box rather than
   pushing the whole page sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 560px) {
  /* Five columns of numbers do not fit a phone. The order list keeps its
     shape and scrolls, which beats wrapping every figure onto three lines. */
  .acct-table { font-size: 13px; }
  .acct-table th, .acct-table td { padding: 10px 12px; }
}

/* The quotation's line items. Desktop is a table because the columns line up
   and that is what a table is for; below 640px each line becomes a block with
   its figures labelled, the same move the cart table already makes. */
.qtable { width: 100%; border-collapse: collapse; }
.qtable thead tr { background: var(--paper-3); }
.qtable th {
  text-align: left; padding: 10px 16px; font-size: 11px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); font-weight: 650;
}
.qtable td { padding: 14px 16px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.qtable tr:last-child td { border-bottom: 0; }
.qtable th.u-right, .qtable td.u-right { text-align: right; }
.u-nowrap { white-space: nowrap; }

@media (max-width: 640px) {
  .qtable, .qtable tbody, .qtable tr, .qtable td { display: block; }
  .qtable thead { display: none; }
  .qtable tr { border-bottom: 1px solid var(--line); padding: 14px 0; }
  .qtable tr:last-child { border-bottom: 0; }
  .qtable td { border: 0; padding: 2px 16px; }
  .qtable td.u-right { text-align: left; }
  /* The label the hidden header used to supply. Without it three bare numbers
     sit under each fabric and nothing says which is the rate. */
  .qtable td[data-label]::before {
    content: attr(data-label) ": "; color: var(--ink-3); font-weight: 400;
  }
  .qtable td[data-label] { margin-top: 2px; }
}

/* ------------------------------------------------------------ progress
   One stepper for orders, enquiries and quotations. The rail is drawn as two
   half-segments per step rather than one line behind the row, so it never
   overhangs the first and last dots and each half can be coloured by the step
   it belongs to. */
.steps { display: flex; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step  { flex: 1 1 0; position: relative; text-align: center; min-width: 0; }
.step::before, .step::after {
  content: ""; position: absolute; top: 11px; height: 2px; background: var(--line);
}
.step::before { left: 0;   right: 50%; }
.step::after  { left: 50%; right: 0; }
.step:first-child::before, .step:last-child::after { display: none; }
.step.is-done::before, .step.is-done::after, .step.is-now::before { background: var(--indigo); }

.dot {
  position: relative; z-index: 1; width: 24px; height: 24px; margin: 0 auto 8px;
  border-radius: 50%; background: var(--paper); border: 2px solid var(--line);
  display: grid; place-items: center;
}
.dot svg { width: 12px; height: 12px; fill: #fff; }
.step.is-done .dot { background: var(--indigo); border-color: var(--indigo); }
.step.is-now  .dot { border-color: var(--indigo); box-shadow: 0 0 0 4px var(--indigo-l); }
.step.is-now  .dot::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--indigo);
}
.step__lbl  { display: block; font-size: 12.5px; line-height: 1.35; color: var(--ink-3); padding: 0 4px; }
.step__when { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.step.is-done .step__lbl { color: var(--ink-2); }
.step.is-now  .step__lbl { color: var(--indigo-d); font-weight: 650; }

/* Finished well. */
.steps.is-complete .step.is-done::before,
.steps.is-complete .step.is-done::after   { background: var(--green); }
.steps.is-complete .step.is-done .dot     { background: var(--green); border-color: var(--green); }
.steps.is-complete .step.is-now  .dot     { border-color: var(--green); box-shadow: 0 0 0 4px var(--green-l); }
.steps.is-complete .step.is-now  .dot::after { background: var(--green); }
.steps.is-complete .step.is-now  .step__lbl  { color: var(--green); }

/* Stopped: cancelled, expired, declined. The bar ends where it ended rather
   than greying out stages that will never happen — which reads as a fault. */
.step.is-stop .dot     { background: var(--red); border-color: var(--red); }
.step.is-stop .step__lbl { color: var(--red); font-weight: 650; }
.steps.is-stopped .step.is-done::before,
.steps.is-stopped .step.is-done::after { background: var(--red); }
.steps.is-stopped .step.is-done .dot   { background: var(--red); border-color: var(--red); }

@media (max-width: 640px) {
  /* Vertical. Six labels cannot share a phone's width and stay readable. */
  .steps { display: block; }
  .step  {
    display: grid; grid-template-columns: 24px 1fr; gap: 12px;
    text-align: left; padding-bottom: 18px;
  }
  .step::before, .step::after { left: 11px; right: auto; width: 2px; height: auto; }
  .step::before { top: 0;    bottom: 50%; }
  .step::after  { top: 24px; bottom: 0; }
  .step:last-child { padding-bottom: 0; }
  .dot { margin: 0; }
  .step__lbl { padding: 0; font-size: 13.5px; }
}

/* ---------------------------------------------------------------- cart */
.cart-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cart-table th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-3); font-weight: 650; padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.cart-table td { padding: 16px 18px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.cart-table tr:last-child td { border-bottom: 0; }
.cart-table th.u-right, .cart-table td.u-right { text-align: right; }
.cart-row--problem td { background: var(--red-l); }

.cart-qty { display: flex; gap: 6px; align-items: center; }
.cart-qty .input { width: 90px; text-align: right; }

.cart-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-top: 1px solid var(--line); font-size: 13.5px;
}

/* Label left, figure right — a totals block reads down the right edge. */
.totals { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0; font-size: 14px; }
.totals dt { color: var(--ink-2); }
.totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.totals__grand {
  font-size: 17px; font-weight: 650; color: var(--ink);
  padding-top: 8px; border-top: 1px solid var(--line); margin-top: 4px;
}

/* A freight choice is a decision, so give it a real hit area. */
.ship-option {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start;
  padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 8px; cursor: pointer; font-size: 14px;
}
.ship-option:hover { border-color: var(--indigo); background: var(--indigo-l); }
.ship-option:has(input:checked) { border-color: var(--indigo); background: var(--indigo-l); }
.ship-option input { margin-top: 3px; accent-color: var(--indigo); }
.ship-option__desc { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.ship-option__price { font-weight: 650; white-space: nowrap; }

.cart-code { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.cart-code__row { display: flex; gap: 6px; margin-top: 5px; }
.cart-code__row .input { flex: 1 1 auto; }
.cart-code__on {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--green-l); color: var(--green);
  padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13.5px;
}

.order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }

/* The header count sits on the cart link and must not move the layout. */
.cart-link { position: relative; }
.cart-link__count {
  position: absolute; top: -6px; right: -8px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px; background: var(--terra); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
}

@media (max-width: 860px) {
  .cart-table thead { display: none; }
  .cart-table td { display: block; border: 0; padding: 6px 18px; }
  .cart-table tr { display: block; border-bottom: 1px solid var(--line); padding: 10px 0; }
  .cart-table td.u-right { text-align: left; }
  .ship-option { grid-template-columns: auto 1fr; }
  .ship-option__price { grid-column: 2; }
}

@media print {
  .header, .nav, .footer, .topbar, .filters, .btn { display: none !important; }
}

/* =====================================================================
   Blocks 6A–6B storefront blocks

   The blog, the CMS pages, the banner hero, the newsletter box, reviews
   and the saved-fabrics page were written into the views ahead of this
   stylesheet. This is the stylesheet catching up.
   ===================================================================== */

/* ------------------------------------------------------------ page head
   The heading of a content page. The lede is the one paragraph a reader
   sees before deciding whether to carry on, so it is set larger. */
.page-head { margin-bottom: 28px; max-width: 70ch; }
.page-head h1 { margin-bottom: 10px; }
.page-head__lede { font-size: 17px; color: var(--ink-2); line-height: 1.65; margin: 0; }

/* ------------------------------------------------------------ banner hero
   A hero whose background is an image the client uploaded. The overlay in
   .hero::after is what keeps white text readable over a photograph nobody
   checked the contrast of. */
.hero--banner { background: var(--indigo-d); }
.hero--banner .hero__inner { max-width: 720px; }
.hero__media {
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__stats--standalone {
  margin: 0; padding: 26px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.hero__stats--standalone .hero__stat b { color: var(--ink); }
.hero__stats--standalone .hero__stat span { color: var(--ink-3); }

/* ------------------------------------------------------------ logo strip */
.logos {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 28px 44px; justify-content: center;
}
.logos img { max-height: 44px; width: auto; opacity: .68; filter: grayscale(1); }
.logos img:hover { opacity: 1; filter: none; }
.logos__text { font-size: 15px; font-weight: 650; color: var(--ink-3); letter-spacing: .01em; }

/* ------------------------------------------------------------ blog */
.post-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.post-card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  color: inherit; transition: box-shadow .2s ease, transform .2s ease;
}
.post-card:hover { text-decoration: none; box-shadow: var(--shadow); transform: translateY(-2px); }
.post-card__image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.post-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.post-card__body h2 { font-size: 18px; line-height: 1.35; margin: 0; }
.post-card__body p { color: var(--ink-2); font-size: 14px; margin: 0; }
.post-card__tag {
  align-self: flex-start; font-size: 11.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--indigo); background: var(--indigo-l);
  padding: 3px 9px; border-radius: 999px;
}
.post-card__meta { font-size: 12.5px; color: var(--ink-3); }
.post__hero {
  width: 100%; max-height: 460px; object-fit: cover;
  border-radius: var(--radius-lg); margin-bottom: 28px; display: block;
}

.pager { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------ CMS pages */
.page-children { border-top: 1px solid var(--line); padding-top: 24px; }
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.link-list li { margin: 0; }
.link-list a {
  display: block; padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--ink-2); font-weight: 550;
}
.link-list a:hover { background: var(--paper-3); color: var(--indigo); text-decoration: none; }

/* ------------------------------------------------------------ newsletter */
/* Its own band under the link columns, ruled off, or it reads as one more
   line of the address block above it. */
.footer__newsletter {
  max-width: 430px; margin-top: 30px;
  padding-top: 26px; border-top: 1px solid var(--line);
}
.footer__newsletter p { color: var(--ink-3); font-size: 13px; margin-bottom: 12px; }
.newsletter-form { display: flex; gap: 8px; margin-bottom: 8px; }
.newsletter-form .input { flex: 1 1 auto; min-width: 0; }
.newsletter-form .btn { white-space: nowrap; }
.footer__legal { display: flex; gap: 16px; flex-wrap: wrap; }
.footer__legal a { color: var(--ink-3); font-size: 13px; }

/* ------------------------------------------------------------ reviews */
.reviews { display: grid; gap: 24px; max-width: 780px; }
.review { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.review:last-child { border-bottom: 0; padding-bottom: 0; }
.review__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.review__title { font-size: 16px; margin: 0 0 6px; }
.review p { margin: 0 0 6px; color: var(--ink-2); line-height: 1.7; }
/* The seller's answer is indented and tinted so a reader can tell at a
   glance which voice is which. */
.review__reply {
  margin-top: 12px; padding: 12px 14px;
  background: var(--paper-3); border-left: 3px solid var(--indigo);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.review__reply p { margin: 4px 0 0; }

/* ------------------------------------------------------------ saved fabrics */
.product-card-wrap { display: flex; flex-direction: column; }
.product-card-wrap .pcard { flex: 1 1 auto; }

/* ------------------------------------------------------------ utilities */
.badge--success { background: var(--green-l); color: var(--green); }
.label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.u-h4 { font-size: 20px; font-weight: 650; margin: 0 0 12px; }
.u-h5 { font-size: 16px; font-weight: 650; margin: 0 0 8px; }
.u-sub { color: var(--ink-3); }
.u-mt-8  { margin-top: 8px; }
.u-mt-12 { margin-top: 12px; }
.u-mb-8  { margin-bottom: 8px; }
.u-mb-16 { margin-bottom: 16px; }

@media (max-width: 900px) {
  .footer__newsletter { max-width: none; }
}

/* ------------------------------------------------------------ cookie banner
   Pinned to the bottom rather than covering the page: a buyer who came to look
   at a fabric should be able to look at it while deciding. The two buttons are
   deliberately the same size — a refusal that is harder to reach than an
   acceptance is not a choice. */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--paper); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(23,22,26,.12);
  padding: 16px 20px;
}
.consent__inner {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}
.consent__text { flex: 1 1 380px; min-width: 0; }
.consent__text strong { display: block; font-size: 14px; margin-bottom: 4px; }
.consent__text p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.consent__actions { display: flex; gap: 10px; flex-shrink: 0; }
.consent__actions .btn { min-width: 116px; justify-content: center; }

@media (max-width: 620px) {
  .consent__actions { width: 100%; }
  .consent__actions form { flex: 1 1 0; }
  .consent__actions .btn { width: 100%; min-width: 0; }
}

/* ------------------------------------------------------------ review photos
   A buyer's own photograph of the cloth is the most persuasive thing on the
   page, so these get real size rather than a thumbnail strip — but capped, so
   three of them do not push the next review off the screen. */
.review-shots { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 6px; }
.review-shots a { display: block; line-height: 0; }
.review-shots img {
  width: 150px; height: 150px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  transition: transform .16s ease, box-shadow .16s ease;
}
.review-shots a:hover img { transform: translateY(-2px); box-shadow: var(--shadow); }

@media (max-width: 520px) {
  .review-shots img { width: 104px; height: 104px; }
}

/* ------------------------------------------------------ home layout preview
   Only ever rendered for a signed-in admin who can edit the home page. It is
   the real front page at the real URL showing something a buyer is not seeing,
   so it has to be unmistakable rather than tasteful. */
.preview-bar {
  background: var(--indigo-d, #2c2a4a); color: #fff;
  font-size: 13px; padding: 10px 0;
}
.preview-bar__inner {
  display: flex; gap: 16px; align-items: center;
  flex-wrap: wrap; justify-content: space-between;
}
.preview-bar strong { font-weight: 600; }
.preview-bar__links { display: flex; gap: 16px; flex-wrap: wrap; }
.preview-bar__links a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.preview-bar__links a:hover { opacity: .8; }

/* =====================================================================
   Theme options
   ---------------------------------------------------------------------
   Colour, corner radius and type are custom properties, set by the theme
   in the head — nothing about them needs a rule here. Density and button
   shape do, because they change how much space a thing takes and what
   shape it is, and neither of those is a colour.

   Keyed off attributes on <body> so a preview can change them by loading
   one page, with no second stylesheet anywhere.
   ===================================================================== */

/* ---------------------------------------------------------- density */
body[data-density="compact"] .section        { padding: 32px 0; }
body[data-density="compact"] .section--tight { padding: 20px 0; }
body[data-density="compact"] .grid           { gap: 14px; }
body[data-density="compact"] .card__body     { padding: 14px; }
/* Button padding used to live here, so "compact" quietly resized every button
   on the site. It is its own setting now — density is the page's rhythm, not
   the buttons' — and each preset carries the size its density used to imply. */
body[data-density="compact"] .section-head   { margin-bottom: 16px; }

body[data-density="airy"] .section           { padding: 76px 0; }
body[data-density="airy"] .section--tight    { padding: 44px 0; }
body[data-density="airy"] .grid              { gap: 28px; }
body[data-density="airy"] .section-head      { margin-bottom: 32px; }
body[data-density="airy"] h1                 { letter-spacing: -0.01em; }

/* ---------------------------------------------------------- buttons */
body[data-buttons="pill"] .btn { border-radius: 999px; }

/* Outline: the fill becomes the outline. The call-to-action keeps a solid
   fill even here — a quote button that looks like every other link is a
   quote button nobody presses, and that is a conversion decision rather
   than a style one. */
body[data-buttons="outline"] .btn {
  background: transparent; border-color: var(--line); color: var(--ink);
}
body[data-buttons="outline"] .btn:hover { background: var(--paper-3); }
body[data-buttons="outline"] .btn--ghost {
  background: transparent; border-color: var(--indigo); color: var(--indigo);
}
body[data-buttons="outline"] .btn--ghost:hover { background: var(--indigo-l); }

/* =====================================================================
   Section wrappers
   ---------------------------------------------------------------------
   Every home page section is wrapped in one of these, and the wrapper
   carries what all sections have in common: what sits behind it, how
   much room it takes, how wide it runs, which screens it appears on,
   and how many columns at each width.

   Doing it here rather than inside each section's own template is the
   point of the schema: a section type written later gets all of it
   without its author doing anything.
   ===================================================================== */
.sec { position: relative; }

/* ------------------------------------------------------------ behind it */
.sec--bg-tint  { background: var(--paper-2); }
.sec--bg-brand { background: var(--indigo-l); }
.sec--bg-dark  { background: var(--ink); color: var(--on-dark); }

/* On a dark band the type inside has to follow, or the section renders
   near-black on near-black. */
.sec--bg-dark h1, .sec--bg-dark h2, .sec--bg-dark h3,
.sec--bg-dark .section-head h2 { color: var(--on-dark); }
.sec--bg-dark p, .sec--bg-dark .section-head p,
.sec--bg-dark .u-muted, .sec--bg-dark .u-sub { color: var(--on-dark-2); }
.sec--bg-dark a:not(.btn) { color: var(--on-dark); }

/* ------------------------------------------------------- room around it */
.sec--pad-tight > .section { padding-top: 24px; padding-bottom: 24px; }
.sec--pad-loose > .section { padding-top: 84px; padding-bottom: 84px; }

/* ------------------------------------------------------------- how wide */
.sec--full > .section > .wrap { max-width: none; padding-left: 24px; padding-right: 24px; }

/* ------------------------------------------------- which screens it uses
   A class, never a decision made on the server. The page is the same for
   every device, so choosing here by sniffing a user agent is how a phone
   gets sent whatever the guess was. */
@media (min-width: 1025px) { .sec--no-desktop { display: none; } }
@media (min-width: 641px) and (max-width: 1024px) { .sec--no-tablet { display: none; } }
@media (max-width: 640px) { .sec--no-mobile { display: none; } }

/* ------------------------------------------------------ how many across
   The count is set per breakpoint as a custom property on the wrapper;
   the grids read it. Falls back to whatever the grid already did, so a
   section saved before these existed looks exactly as it did. */
.sec .products, .sec .cats, .sec .trust, .sec .logos, .sec .post-grid,
.sec .gallery, .sec .quotes {
  grid-template-columns: repeat(var(--sec-columns-desktop, 4), minmax(0, 1fr));
}
@media (max-width: 1024px) {
  .sec .products, .sec .cats, .sec .trust, .sec .logos, .sec .post-grid,
.sec .gallery, .sec .quotes {
    grid-template-columns: repeat(var(--sec-columns-tablet, 2), minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .sec .products, .sec .cats, .sec .trust, .sec .logos, .sec .post-grid,
.sec .gallery, .sec .quotes {
    grid-template-columns: repeat(var(--sec-columns-mobile, 1), minmax(0, 1fr));
  }
}

/* =====================================================================
   Announcement bar
   Off by default. Rotates only when there is more than one message, and
   the first is rendered visible so it is readable before any script has
   run — the strip must never be a blank coloured band while JavaScript
   loads on a slow connection.
   ===================================================================== */
.announce { font-size: 13px; padding: 8px 0; }
.announce--dark   { background: var(--ink);      color: var(--on-dark); }
.announce--brand  { background: var(--indigo);   color: var(--on-dark); }
.announce--accent { background: var(--terra);    color: #fff; }
.announce--tint   { background: var(--paper-3);  color: var(--ink); }

.announce a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.announce__inner { display: flex; align-items: center; gap: 12px; }
.announce__slides { flex: 1 1 auto; min-width: 0; text-align: center; position: relative; }
.announce--left .announce__slides { text-align: left; }

/* Only the live one is in flow, so the bar is one line high whatever the
   longest message is. */
.announce__slide { display: none; }
.announce__slide.is-on { display: block; }

.announce__close {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  color: inherit; opacity: .7; font-size: 20px; line-height: 1; padding: 0 4px;
}
.announce__close:hover { opacity: 1; }

/* --------------------------------------------------------------- header */
.header--sticky { position: sticky; top: 0; z-index: 60; }

.brand__logo { display: block; width: auto; max-width: 220px; object-fit: contain; }
.brand__logo--small { display: none; }
@media (max-width: 640px) {
  .brand__logo--wide  { display: none; }
  .brand__logo--small { display: block; }
}

/* --------------------------------------------------------------- footer */
.footer--none { background: var(--paper); }
.footer--dark { background: var(--ink); color: var(--on-dark); }
.footer--dark h4 { color: var(--on-dark); }
.footer--dark a, .footer--dark .u-muted, .footer--dark .u-small, .footer--dark .u-tiny { color: var(--on-dark-2); }
.footer--dark a:hover { color: var(--on-dark); }

.footer__social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 13px; }

/* =====================================================================
   Sections added in block G
   ===================================================================== */

/* -------------------------------------------------- questions and answers
   Built on <details>, so it works with no JavaScript and the answers stay
   in the page for a search engine even while collapsed. */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  cursor: pointer; padding: 16px 34px 16px 0; position: relative;
  font-size: 16px; font-weight: 600; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 22px; font-weight: 400; color: var(--ink-3); line-height: 1;
}
.faq__item[open] summary::after { content: '–'; }
.faq__item summary:hover { color: var(--indigo); }
.faq__answer { padding: 0 34px 18px 0; color: var(--ink-2); line-height: 1.65; }

/* ------------------------------------------------------- image and text
   The picture is second in the markup whichever side it is shown on, so a
   phone and a screen reader both get the words first. */
.split { display: grid; gap: 36px; align-items: center; }
.split--half       { grid-template-columns: 1fr 1fr; }
.split--third      { grid-template-columns: 2fr 1fr; }
.split--two_thirds { grid-template-columns: 1fr 2fr; }
.split--img-left .split__media { order: -1; }
.split__text h2 { margin-bottom: 10px; }
.split__lead { font-size: 17px; color: var(--ink-2); margin-bottom: 14px; }
.split__media img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
@media (max-width: 820px) {
  /* --half is listed too. It was relying on this rule appearing later in the
     file than its own — same specificity, so source order decided it — which
     is correct today and one reshuffle away from a two-column band on a
     phone. */
  .split, .split--half, .split--third, .split--two_thirds {
    grid-template-columns: 1fr; gap: 22px;
  }
  .split--img-left .split__media { order: 0; }
}

/* --------------------------------------------- image with words over it */
.section--flush { padding: 0; }
.overlay {
  position: relative; display: flex; align-items: center;
  background-size: cover; background-position: center; background-color: var(--ink);
}
.overlay--short  { min-height: 260px; }
.overlay--medium { min-height: 420px; }
.overlay--tall   { min-height: 620px; }
.overlay__shade { position: absolute; inset: 0; background: #000; }
/* `width: 100%` matters: .wrap carries `margin: 0 auto`, and an auto margin
   on a flex child shrinks it to its content and centres it — so a heading set
   to sit on the left would sit in the middle instead. */
/* Only the vertical padding: the shorthand would zero the 20px sides that
   `.wrap` supplies, and the heading would sit against the edge of the screen. */
.overlay__inner {
  position: relative; z-index: 1; color: #fff; width: 100%;
  padding-top: 48px; padding-bottom: 48px;
}
.overlay__inner h2 { color: #fff; font-size: clamp(26px, 4vw, 44px); margin-bottom: 12px; }
.overlay__inner p { color: rgba(255,255,255,.88); font-size: 17px; max-width: 54ch; margin-bottom: 20px; }
.overlay--center { text-align: center; }
.overlay--center .overlay__inner p { margin-left: auto; margin-right: auto; }
.overlay--right  { text-align: right; }
.overlay--right .overlay__inner p { margin-left: auto; }

/* --------------------------------------------------------------- gallery
   Every cell holds its shape before its image arrives, so a gallery of
   twenty does not make the page jump about as they load. */
.gallery { display: grid; gap: 12px; }
.gallery__cell { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--paper-3); }
.gallery__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery--square    .gallery__cell { aspect-ratio: 1 / 1; }
.gallery--landscape .gallery__cell { aspect-ratio: 4 / 3; }
.gallery--portrait  .gallery__cell { aspect-ratio: 3 / 4; }

/* ----------------------------------------------------------------- video
   A still until somebody presses play. Nothing is fetched from YouTube or
   Vimeo before that. */
.video {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius);
  overflow: hidden; background: var(--ink); background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play {
  width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  padding-left: 6px; transition: transform .15s, background .15s;
}
.video__play:hover { transform: scale(1.06); background: #fff; }
.video__note {
  position: absolute; bottom: 10px; right: 12px; z-index: 1;
  font-size: 11px; color: rgba(255,255,255,.75);
}
/* A section added but not filled in. Only the editor ever shows this — live,
   a video with no link is dropped rather than left as a black rectangle. */
.video--waiting { background: var(--paper-2); border: 1px dashed var(--line); }
.video--waiting .video__note {
  position: static; text-align: center; max-width: 32ch;
  font-size: 13px; color: var(--ink-3);
}

/* ---------------------------------------------------------- testimonials
   Deliberately not the review card. A review carries a star rating and a
   confirmed order behind it; a testimonial is somebody's word typed in by
   the seller, and making the two look alike borrows credibility. */
.quotes { display: grid; gap: 20px; }
.quote {
  margin: 0; padding: 22px 24px; background: var(--paper-2);
  border-left: 3px solid var(--terra); border-radius: 0 var(--radius) var(--radius) 0;
}
.quote blockquote { margin: 0 0 12px; font-size: 16px; line-height: 1.65; color: var(--ink); }
.quote blockquote::before { content: '\201C'; }
.quote blockquote::after  { content: '\201D'; }
.quote figcaption { font-size: 13px; color: var(--ink-2); }
.quote figcaption b { display: block; font-weight: 600; color: var(--ink); }

/* ---------------------------------------------------------------- social */
.social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.social__label { font-weight: 600; }
.social__link {
  padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; color: var(--ink);
}
.social__link:hover { border-color: var(--indigo); color: var(--indigo); text-decoration: none; }

/* ------------------------------------------------------- your own block */
.custom__lead { font-size: 17px; color: var(--ink-2); margin-bottom: 14px; }
.custom--center { text-align: center; }
.custom__cols {
  display: grid; gap: 20px; margin: 22px 0;
  grid-template-columns: repeat(var(--sec-columns-desktop, 3), minmax(0, 1fr));
}
.custom__col b { display: block; font-size: 15px; margin-bottom: 4px; }
.custom__col p { color: var(--ink-2); font-size: 14px; margin: 0 0 6px; }
@media (max-width: 1024px) {
  .custom__cols { grid-template-columns: repeat(var(--sec-columns-tablet, 2), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .custom__cols { grid-template-columns: repeat(var(--sec-columns-mobile, 1), minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ block H
   Hero slider, brand story, offer code, Instagram grid and the popup. */

/* The slider is the browser's own scroll-snap. Script adds the dots, the
   arrows and the timer; with none of it the thing is still a row of banners
   somebody can swipe, which is the point of building it this way. */
.hero-slider { position: relative; }
.hero-slider__track { display: block; }
.hero-slider.is-rotating .hero-slider__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
}
.hero-slider.is-rotating .hero-slider__track::-webkit-scrollbar { display: none; }
.hero-slider.is-rotating .hero-slider__slide {
  flex: 0 0 100%; scroll-snap-align: start;
}
.hero__heading {
  font-family: var(--serif); font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15; font-weight: 600; margin: 0 0 12px;
}
.hero-slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.86); color: var(--ink);
  font-size: 26px; line-height: 1; display: none;
  align-items: center; justify-content: center;
}
.hero-slider.is-rotating .hero-slider__arrow { display: flex; }
.hero-slider__arrow--prev { left: 12px; }
.hero-slider__arrow--next { right: 12px; }
.hero-slider__arrow:hover { background: #fff; }
.hero-slider__dots {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2;
  display: none; justify-content: center; gap: 8px;
}
.hero-slider.is-rotating .hero-slider__dots { display: flex; }
.hero-slider__dot {
  width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.45); transition: background .15s, transform .15s;
}
.hero-slider__dot[aria-selected="true"] { background: #fff; transform: scale(1.25); }
.hero-slider__arrow:focus-visible,
.hero-slider__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 640px) {
  .hero-slider__arrow { display: none !important; }
}

/* Waiting for a photograph, in the editor only — live the section is dropped. */
.split__waiting {
  aspect-ratio: 4 / 3; border-radius: var(--radius);
  background: var(--paper-2); border: 1px dashed var(--line);
}

/* The numbers beside the story. Not the stats band: these sit in a column of
   prose rather than across the page. */
.story__facts {
  display: flex; flex-wrap: wrap; gap: 26px 40px; margin: 22px 0 0;
}
.story__fact { margin: 0; }
.story__fact dt {
  font-family: var(--serif); font-size: 30px; line-height: 1;
  font-weight: 600; color: var(--ink);
}
.story__fact dd {
  margin: 6px 0 0; font-size: 13px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em;
}

/* ------------------------------------------------------------ offer code */
.coupon__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.coupon__title { margin: 0; }
.coupon__body  { margin: 6px 0 0; color: var(--ink-2); }
.coupon__ends  { margin: 6px 0 0; font-size: 13px; color: var(--ink-3); }
.coupon__action { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.coupon__code {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 11px 16px; border-radius: var(--radius-sm);
  border: 1px dashed var(--ink-3); background: transparent; color: inherit;
  font: inherit;
}
.coupon__code-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px; font-weight: 600; letter-spacing: .08em;
}
.coupon__code-hint { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.coupon__code:hover { border-style: solid; }
.coupon__code.is-copied .coupon__code-hint { color: var(--green); }

/* ------------------------------------------------------------ instagram */
.ig-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(var(--sec-columns-desktop, 6), minmax(0, 1fr));
}
.ig-grid__cell { margin: 0; }
.ig-grid__cell a { display: block; }
.ig-grid__cell img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: var(--radius-sm);
}
@media (max-width: 900px) {
  .ig-grid { grid-template-columns: repeat(var(--sec-columns-tablet, 4), minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .ig-grid { grid-template-columns: repeat(var(--sec-columns-mobile, 3), minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ the popup */
.popup {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(15,14,18,.55);
}
.popup__box {
  position: relative; background: var(--paper); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); max-width: 620px; width: 100%;
  max-height: 90vh; overflow: auto; display: grid;
}
.popup__media img { width: 100%; height: 190px; object-fit: cover; display: block; }
.popup__body { padding: 26px 28px 28px; }
.popup__title { margin: 0 0 10px; }
.popup__close {
  position: absolute; top: 10px; right: 12px; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.9); color: var(--ink); font-size: 24px; line-height: 1;
}
.popup__close:hover { background: #fff; }

/* In the editor it is a card in the flow, so nobody has to dismiss their own
   popup to carry on arranging the page. */
.popup--flat { position: static; inset: auto; background: none; padding: 0; display: block; }
.popup--flat .popup__box { max-width: 620px; margin: 0 auto; max-height: none; }
.popup--flat .popup__close { display: none; }
.popup__flag {
  max-width: 620px; margin: 0 auto 10px; font-size: 12px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em;
}

@media (max-width: 560px) {
  .popup__media img { height: 140px; }
  .popup__body { padding: 20px; }
}