/* ============================================================
   THE TRAD FACTORY  —  style.css
   ============================================================
   Controls how everything LOOKS.
   Colours, sizes, spacing, shapes, animation timing.
   ============================================================ */


/* ------------------------------------------------------------
   1. DESIGN TOKENS
   The site's "settings". Change one here, it updates everywhere.
   ------------------------------------------------------------ */
:root {

  /* --- BRAND COLOURS ---
     Straight from the TTF identity deck. */
  --leather:  #3F2F20;   /* Leather Brown - the dominant colour */
  --lace:     #C69C6D;   /* Lace Brown    - warm mid tone */
  --butter:   #FFF8EB;   /* Butter        - the page background */
  --copper:   #B67A37;   /* Copper        - accents and buttons */
  --white:    #FFFFFF;

  /* --- APPLIED ROLES ---
     Which brand colour does which job. Change these to re-skin
     the whole site without touching anything else. */
  --bg:      var(--butter);
  --fg:      var(--leather);
  --body:    #6B5844;    /* softened leather, for paragraphs */
  --muted:   #9A8A76;
  --surface: #F5EADA;
  --border:  #E2D3BC;

  /* --- FONT ---
     Alegreya Sans, as specified in the identity deck. */
  --font: 'Alegreya Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- TYPE SCALE --- */
  --h1: 4.2rem;
  --h2: 3.2rem;
  --h3: 2.2rem;
  --h4: 1.6rem;
  --h5: 1.25rem;
  --body-lg: 1.125rem;
  --small: 0.8rem;

  /* --- SHAPE ---
     Restrained corners. This is a production company, not a
     lifestyle app. Sharp reads as capable. */
  --radius: 4px;
  --radius-lg: 8px;

  /* --- LOGO SIZE ---
     One number controls the logo everywhere. The image keeps its
     proportions automatically — you only ever set the height. */
  --logo-height: 52px;

  /* --- CART ICON SIZE ---
     Medium by default. 20px small, 24px medium, 28px large. */
  --cart-icon: 24px;

  /* --- SPACING --- */
  --pad-side: 40px;
  --section-gap: 130px;

  /* --- MOTION --- */
  --ease:   cubic-bezier(0.165, 0.84, 0.44, 1);
  --reveal: 900ms;
  --hover:  300ms;
}


/* ------------------------------------------------------------
   2. RESET
   Clears browser defaults. You never need to touch this.
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: var(--body-lg);
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
ul { list-style: none; }
a  { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }


/* ------------------------------------------------------------
   3. SHARED PIECES
   ------------------------------------------------------------ */

/* Small uppercase label. Used for section numbers and eyebrows. */
.label {
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
}

.container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--pad-side);
}

.section { padding: var(--section-gap) 0; }

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 54px;
  flex-wrap: wrap;
}

.section-title {
  font-size: var(--h2);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 18ch;
}

.section-lead {
  max-width: 46ch;
  color: var(--body);
}


/* ------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------
   The brief asks for enquiry buttons throughout the site, not
   just on the contact page. These are the two used everywhere.
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  border: 1.5px solid transparent;
  transition: background-color var(--hover) ease,
              color var(--hover) ease,
              border-color var(--hover) ease,
              transform var(--hover) ease;
}
.btn:hover { transform: translateY(-2px); }

/* Primary — the main action. Solid leather brown. */
.btn--primary {
  background: var(--leather);
  color: var(--butter);
}
.btn--primary:hover { background: var(--copper); }

/* Secondary — the alternative action. Outlined. */
.btn--secondary {
  background: transparent;
  color: var(--leather);
  border-color: var(--leather);
}
.btn--secondary:hover { background: var(--leather); color: var(--butter); }

/* On dark backgrounds (over the hero images) */
.btn--light {
  background: var(--butter);
  color: var(--leather);
}
.btn--light:hover { background: var(--copper); color: var(--butter); }

.btn--ghost {
  background: transparent;
  color: var(--butter);
  border-color: rgba(255,248,235,0.55);
}
.btn--ghost:hover { background: rgba(255,248,235,0.14); border-color: var(--butter); }

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }


/* ------------------------------------------------------------
   5. NAVIGATION
   ------------------------------------------------------------ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 18px var(--pad-side);
  color: var(--butter);
  transition: background-color var(--hover) ease, color var(--hover) ease;
}

/* Once you scroll past the hero, the bar gets a solid background
   so the links stay readable over the pale page. */
.nav.is-solid {
  background: var(--butter);
  color: var(--leather);
  border-bottom: 1px solid var(--border);
}

.nav__logo { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.02em; }

/* ---- THE LOGO ----
   >>> SIZE IS SET BY --logo-height AT THE TOP OF THIS FILE. <<<

   Height is the only number that matters — width follows on its
   own, so the proportions can never go wrong.

     36px  small
     52px  large
     64px  very large

   The mobile size is set in the mobile section, further down. */
.nav__logo img {
  height: var(--logo-height);
  width: auto;
  display: block;

  /* On the homepage the bar sits over a photograph, and a dark
     brown logo disappears into it. This turns the logo white
     while the bar is transparent, and back to brown once the
     bar goes solid. Works for SVG and PNG alike. */
  filter: brightness(0) invert(1);
  transition: filter var(--hover) ease;
}

/* Bar is solid — the page background is behind it, so the logo
   returns to its proper brand colour. */
.nav.is-solid .nav__logo img {
  filter: none;
}

.nav__links { display: flex; gap: 28px; font-size: 0.95rem; font-weight: 500; }
.nav__link { position: relative; }
.nav__link::after {
  content: '';
  position: absolute; left: 0; bottom: -4px;
  height: 1.5px; width: 0;
  background: currentColor;
  transition: width var(--hover) ease;
}
.nav__link:hover::after { width: 100%; }

.nav__cta { display: flex; align-items: center; gap: 14px; }

/* The button in the top bar */
.nav__btn {
  padding: 11px 22px;
  border-radius: var(--radius);
  border: 1.5px solid currentColor;
  font-size: 0.9rem;
  font-weight: 600;

  /* Never let it wrap onto two lines — that is what made it
     look oversized on a phone. */
  white-space: nowrap;
  transition: background-color var(--hover) ease, color var(--hover) ease;
}
.nav__btn:hover { background: var(--copper); border-color: var(--copper); color: var(--butter); }

/* Hamburger, mobile only */
.nav__toggle { display: none; width: 30px; height: 22px; position: relative; }
.nav__toggle span {
  position: absolute; left: 0;
  width: 100%; height: 2px;
  background: currentColor;
  transition: transform var(--hover) ease, opacity var(--hover) ease;
}
.nav__toggle span:nth-child(1) { top: 0; }
.nav__toggle span:nth-child(2) { top: 10px; }
.nav__toggle span:nth-child(3) { top: 20px; }

.nav__toggle.is-open span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }


/* ------------------------------------------------------------
   6. HERO  —  the sticky scroll slider
   ------------------------------------------------------------
   HOW THIS WORKS, plainly:

   The outer .hero is very tall (250vh = two and a half screens).
   Inside it, .hero__stage is "sticky", so it stays pinned to the
   screen while you scroll past that tall area.

   As you scroll, JavaScript fades between the slides. So the
   page appears to hold still while the images change — then it
   releases and scrolls on normally.

   TO CHANGE HOW LONG IT HOLDS: edit the height of .hero below.
   200vh = shorter hold. 300vh = longer hold.
   ------------------------------------------------------------ */
.hero {
  position: relative;
  height: 250vh;   /* <<< length of the slider hold */
}

.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms ease;
}
.hero__slide.is-active { opacity: 1; }

.hero__slide img,
.hero__slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* If an image is missing, this warm tone shows instead of a
   broken icon, so the hero never looks unfinished. */
.hero__slide { background: var(--leather); }

/* Darkening so the white headline stays readable on any photo */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(35,25,16,0.55) 0%,
              rgba(35,25,16,0.30) 40%,
              rgba(35,25,16,0.75) 100%);
  z-index: 2;
}

.hero__content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  color: var(--butter);
}

.hero__inner { max-width: 1500px; margin: 0 auto; padding: 0 var(--pad-side); width: 100%; }

.hero__eyebrow { color: var(--lace); margin-bottom: 20px; }

.hero__title {
  font-size: clamp(2.4rem, 5.6vw, var(--h1));
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 17ch;
}

.hero__lead {
  margin-top: 22px;
  max-width: 50ch;
  color: rgba(255,248,235,0.9);
}

.hero__buttons { margin-top: 36px; }

/* The 01 | 02 counter at the bottom, like the reference */
.hero__counter {
  position: absolute;
  left: 0; right: 0; bottom: 34px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--butter);
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.hero__bar {
  width: 46px; height: 3px;
  background: rgba(255,248,235,0.3);
  overflow: hidden;
}
.hero__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--butter);
  transition: width 200ms linear;
}


/* ------------------------------------------------------------
   7. SPLIT BAR  —  the two audiences
   ------------------------------------------------------------
   Sits immediately under the hero. Sends business buyers and
   individual shoppers down two different paths straight away.
   The B2B half is visually dominant, matching the 75/25 split.
   ------------------------------------------------------------ */
.split { display: grid; grid-template-columns: 3fr 1fr; }

.split__panel {
  padding: 64px var(--pad-side);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  transition: background-color var(--hover) ease;
}

.split__panel--b2b {
  background: var(--leather);
  color: var(--butter);
}
.split__panel--b2c {
  background: var(--lace);
  color: var(--leather);
}

.split__title { font-size: var(--h3); font-weight: 500; line-height: 1.12; max-width: 20ch; }
.split__text  { margin-top: 14px; max-width: 44ch; opacity: 0.88; }


/* ------------------------------------------------------------
   8. SERVICE CARDS  —  "What We Do"
   ------------------------------------------------------------ */
/* align-items: stretch is the default and is what we want — every
   card in a row matches the tallest. Because the media area is now
   always present, rows stay even. */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.service {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--hover) ease, border-color var(--hover) ease;
}
.service:hover { transform: translateY(-4px); border-color: var(--copper); }

.service__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--border); }
.service__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 450ms ease; }
.service:hover .service__media img { transform: scale(1.06); }

.service__body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }

/* ---- SERVICE CARD WITHOUT A PHOTO ----
   The picture area STAYS, showing a soft brand-toned block.

   Collapsing it instead left the cards at wildly different
   heights with dead space, which looked broken. Holding the
   space keeps the grid even and makes it obvious where the
   photograph goes. */
.service__media.is-empty {
  display: block;
  background:
    repeating-linear-gradient(
      45deg,
      var(--surface) 0px,
      var(--surface) 11px,
      #EFE3D0 11px,
      #EFE3D0 22px
    );
  position: relative;
}

/* A quiet label so it reads as "photo pending", not "broken" */
.service__media.is-empty::after {
  content: 'Image coming soon';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lace);
}
.service__num  { margin-bottom: 10px; }
.service__name { font-size: var(--h4); font-weight: 600; line-height: 1.2; }
.service__text { margin-top: 10px; color: var(--body); font-size: 1rem; flex: 1; }

/* Every service leads to an enquiry, as the brief requires */
.service__link {
  margin-top: 20px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--copper);
  display: inline-flex;
  gap: 7px;
  align-self: flex-start;
}
.service__link:hover { text-decoration: underline; text-underline-offset: 4px; }


/* ------------------------------------------------------------
   9. WHO WE SERVE
   ------------------------------------------------------------ */
.serve { background: var(--surface); }

.serve__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.serve__item {
  background: var(--bg);
  padding: 40px 24px;
  text-align: center;
  transition: background-color var(--hover) ease;
}
.serve__item:hover { background: var(--lace); }

.serve__name { font-size: var(--h5); font-weight: 600; }
.serve__note { margin-top: 6px; font-size: 0.92rem; color: var(--body); }


/* ------------------------------------------------------------
   10. PROOF GALLERY  —  production & warehouse
   ------------------------------------------------------------
   The most important section for a B2B buyer. It is the
   evidence that TTF can actually deliver at scale.
   ------------------------------------------------------------ */
.proof { background: var(--leather); color: var(--butter); }
.proof .section-lead { color: rgba(255,248,235,0.82); }
.proof .label { color: var(--lace); }

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  grid-auto-flow: row dense;
}

.tile {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: rgba(255,248,235,0.07);
}
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; transition: transform 450ms ease; }
.tile:hover img, .tile:hover video { transform: scale(1.07); }

.tile__caption {
  position: absolute;
  left: 14px; bottom: 12px;
  z-index: 2;
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}

/* ---- HIDDEN STATES ----
   These two apply to ANY item in a grid — factory tiles AND
   product cards. Scoping them to .tile only was a bug: the
   "View more" button on Ready Stock appeared but hid nothing,
   because product cards were never matched.

   !important is deliberate here. .product sets display:flex,
   and a hidden thing must always win over a layout rule. */

/* The file isn't in the images folder yet */
.is-empty { display: none !important; }

/* Folded away behind "View more" */
.is-collapsed { display: none !important; }

/* "View more" sits under a gallery and reveals the rest.
   It inherits the colour of whichever section it's in, so it
   reads correctly on the dark Proof section and the pale
   Ready Stock section without any extra rules. */
.view-more {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 17px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.7;
  transition: opacity var(--hover) ease, background-color var(--hover) ease;
}
.view-more:hover { opacity: 1; }

/* Class kept for the logo image so it can be targeted directly
   if you ever need to. Sizing lives in the .nav__logo img rule. */
.nav__logo-img { display: block; }

/* On the pale sections, fill on hover for a bit more presence */
.section:not(.proof) .view-more:hover { background: var(--surface); }


/* ------------------------------------------------------------
   11. READY STOCK
   ------------------------------------------------------------ */
.stock__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.product { display: flex; flex-direction: column; }
.product__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}
.product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 450ms ease; }
.product:hover .product__media img { transform: scale(1.06); }

.product__name { margin-top: 12px; font-weight: 600; }
.product__meta { font-size: 0.9rem; color: var(--body); }


/* ------------------------------------------------------------
   12. RETAIL  —  the smaller B2C arm
   ------------------------------------------------------------
   Deliberately lighter and shorter than the B2B sections.
   Visible, but clearly secondary.
   ------------------------------------------------------------ */
.retail { background: var(--surface); }
.retail__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.retail__item { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius); background: var(--border); }
.retail__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 450ms ease; }
.retail__item:hover img { transform: scale(1.06); }


/* ------------------------------------------------------------
   13. CONVERSION BLOCK
   ------------------------------------------------------------
   The brief says end every major section with a route to
   contact. This is that block, reusable anywhere.
   ------------------------------------------------------------ */
.convert {
  background: var(--copper);
  color: var(--butter);
  border-radius: var(--radius-lg);
  padding: 66px 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.convert__title { font-size: var(--h3); font-weight: 500; line-height: 1.14; max-width: 20ch; }


/* ------------------------------------------------------------
   14. CONTACT
   ------------------------------------------------------------ */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }

.field { margin-bottom: 22px; }
.field label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 7px; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--fg);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--copper); }

.field textarea { min-height: 130px; resize: vertical; }

.contact__detail { margin-bottom: 26px; }
.contact__detail dt { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--copper); margin-bottom: 5px; }
.contact__detail dd { font-size: 1.05rem; }


/* ------------------------------------------------------------
   15. FOOTER
   ------------------------------------------------------------ */
.footer { background: var(--leather); color: var(--butter); padding: 80px 0 40px; }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,248,235,0.16); }
/* >>> FOOTER LOGO SIZE <<< the stacked version */
.footer__logo img { height: 96px; width: auto; margin-bottom: 22px; }
.footer__blurb { max-width: 36ch; color: rgba(255,248,235,0.75); font-size: 1rem; }
.footer__heading { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lace); margin-bottom: 16px; }
.footer__list li { margin-bottom: 10px; }
.footer__list a:hover { color: var(--lace); }
.footer__base { padding-top: 26px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 0.88rem; color: rgba(255,248,235,0.6); }


/* ------------------------------------------------------------
   16. SCROLL REVEAL
   ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity var(--reveal) var(--ease), transform var(--reveal) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }


/* ------------------------------------------------------------
   17. TABLET
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  :root { --pad-side: 28px; --section-gap: 90px; --h2: 2.5rem; --h3: 1.8rem; }

  .grid-3      { grid-template-columns: repeat(2, 1fr); }
  .gallery     { grid-template-columns: repeat(3, 1fr); }
  .stock__grid { grid-template-columns: repeat(3, 1fr); }
  .retail__grid{ grid-template-columns: repeat(2, 1fr); }
  .serve__list { grid-template-columns: repeat(3, 1fr); }
  .contact__grid { grid-template-columns: 1fr; gap: 44px; }
  .split       { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------
   18. MOBILE
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  :root { --pad-side: 20px; --section-gap: 70px; --h2: 2rem; --h3: 1.55rem; --h4: 1.3rem; }

  .nav__links { display: none; }
  .nav__toggle { display: block; }
  /* Compact on a phone. The bar has to hold a logo, a cart and
     a menu button as well. */
  .nav__btn { padding: 8px 13px; font-size: 0.78rem; }
  .nav__cta { gap: 10px; }
  .nav       { padding: 14px var(--pad-side); }

  /* Smaller on a phone, but still clearly legible */
  :root { --logo-height: 38px; }

  /* The slider holds for less time on a phone */
  .hero { height: 200vh; }
  .hero__lead { font-size: 1rem; }
  .hero__buttons .btn { width: 100%; justify-content: center; }
  .hero__buttons { display: grid; gap: 10px; }

  .grid-3      { grid-template-columns: 1fr; }

  /* Shorter picture area on a phone — a full 4:3 image per card
     makes five services feel like five screens. */
  .service__media { aspect-ratio: 16 / 10; }
  .gallery     { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stock__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .retail__grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .serve__list { grid-template-columns: repeat(2, 1fr); }

  /* Five items in two columns leaves one empty cell. The last
     one spans the full width instead, so the block ends cleanly.

     This works whatever the number: with an even count the rule
     simply has nothing to do. */
  .serve__item:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .convert      { padding: 40px 26px; }
  .split__panel { padding: 42px var(--pad-side); }
  .footer__top  { grid-template-columns: 1fr; gap: 34px; }

  .section-head { flex-direction: column; gap: 16px; }
}


/* ------------------------------------------------------------
   19. REDUCED MOTION
   For people who switch off animation in their device settings.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}


/* ------------------------------------------------------------
   20. THE CART
   ------------------------------------------------------------
   A drawer that slides in from the right. The cart is built and
   held on this site; pressing Checkout hands the whole basket
   over to Shopify, so payment happens on their secure pages and
   never on ours.
   ------------------------------------------------------------ */

/* ---- THE CART BUTTON ----
   An icon rather than the word "Cart". Drawn in code, so it is
   sharp at any size and takes the colour of the bar around it —
   cream over the hero image, brown once the bar goes solid.

   >>> SIZE: --cart-icon at the top of this file. <<< */
.nav__cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.nav__cart-icon {
  width: var(--cart-icon);
  height: var(--cart-icon);
  display: block;
  transition: transform var(--hover) ease;
}
.nav__cart:hover .nav__cart-icon { transform: scale(1.08); }

/* The number of items, sitting on the corner of the icon */
.cart__badge {
  display: none;
  position: absolute;
  top: -3px; right: -5px;

  align-items: center;
  justify-content: center;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 20px;

  background: var(--copper);
  color: var(--butter);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;

  /* A ring in the page colour, so the badge reads clearly
     wherever it sits */
  box-shadow: 0 0 0 2px var(--bg);
}

/* Over the hero image there is no solid background behind it */
.nav:not(.is-solid) .cart__badge { box-shadow: none; }

/* The dark layer behind the drawer */
.cart__overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(35,25,16,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--hover) ease, visibility var(--hover);
}
.cart__overlay.is-open { opacity: 1; visibility: visible; }

.cart {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 200;
  width: min(430px, 100%);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 400ms var(--ease);
}
.cart.is-open { transform: translateX(0); }

.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 26px;
  border-bottom: 1px solid var(--border);
}
.cart__title { font-size: var(--h4); font-weight: 600; }
.cart__close { font-size: 1.7rem; line-height: 1; padding: 4px 8px; }

.cart__body { flex: 1; overflow-y: auto; padding: 22px 26px; }
.cart__empty { color: var(--body); padding: 30px 0; text-align: center; }

.cart__item {
  display: flex;
  gap: 15px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.cart__item:last-child { border-bottom: none; margin-bottom: 0; }

.cart__thumb {
  width: 74px; height: 92px;
  flex-shrink: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.cart__thumb img { width: 100%; height: 100%; object-fit: cover; }

.cart__info  { flex: 1; min-width: 0; }
.cart__name  { font-weight: 600; line-height: 1.25; }
.cart__price { font-size: 0.92rem; color: var(--body); margin-top: 3px; }

.cart__qty { display: flex; align-items: center; gap: 11px; margin-top: 11px; }
.cart__qty button {
  width: 27px; height: 27px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  line-height: 1;
  transition: border-color var(--hover) ease;
}
.cart__qty button:hover { border-color: var(--copper); }
.cart__qty span { min-width: 20px; text-align: center; font-weight: 600; }

.cart__remove {
  width: auto !important;
  border: none !important;
  margin-left: auto;
  font-size: 0.82rem !important;
  color: var(--body);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cart__foot { padding: 22px 26px; border-top: 1px solid var(--border); }
.cart__total { font-weight: 600; margin-bottom: 14px; }
.cart__foot .btn { width: 100%; justify-content: center; }
.cart__note { margin-top: 12px; font-size: 0.82rem; color: var(--body); text-align: center; }


/* ------------------------------------------------------------
   21. PRODUCT CARDS  —  with add to cart
   ------------------------------------------------------------ */
.product__actions { margin-top: 11px; display: flex; gap: 8px; }

.product__add {
  flex: 1;
  padding: 11px 14px;
  border: 1.5px solid var(--leather);
  border-radius: var(--radius);
  background: transparent;
  color: var(--leather);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  transition: background-color var(--hover) ease, color var(--hover) ease;
}
.product__add:hover { background: var(--leather); color: var(--butter); }

/* Brief confirmation after adding */
.product__add.is-added { background: var(--copper); border-color: var(--copper); color: var(--butter); }


/* ------------------------------------------------------------
   22. THE "VIEW ALL" LINK
   ------------------------------------------------------------ */
.view-all {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 34px;
  font-weight: 600;
  color: var(--copper);
}
.view-all:hover { text-decoration: underline; text-underline-offset: 5px; }


/* ------------------------------------------------------------
   23. THE RETAIL PAGE  (retail.html)
   ------------------------------------------------------------ */
.page-head {
  padding: 170px 0 60px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.page-title { font-size: var(--h1); font-weight: 500; line-height: 1.04; letter-spacing: -0.02em; }
.page-lead  { margin-top: 18px; max-width: 52ch; color: var(--body); }

.breadcrumb { margin-bottom: 18px; font-size: 0.9rem; color: var(--body); }
.breadcrumb a:hover { color: var(--copper); }


/* ------------------------------------------------------------
   24. FORM MESSAGES
   ------------------------------------------------------------ */
.form-note {
  margin-top: 16px;
  padding: 15px 17px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  line-height: 1.5;
}
.form-note--ok    { background: #E8F0E4; border: 1px solid #B9CFB0; color: #2F4A26; }
.form-note--info  { background: var(--surface); border: 1px solid var(--border); color: var(--body); }
.form-note a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }


/* ------------------------------------------------------------
   25. CART AND PAGE  —  MOBILE
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  .cart { width: 100%; }
  .page-head { padding: 130px 0 44px; }
  .page-title { font-size: 2.2rem; }
  /* Slightly smaller icon on a phone */
  :root { --cart-icon: 22px; }
  /* >>> MOBILE LOGO SIZE <<< */
}


/* ------------------------------------------------------------
   26. NOTICES AND HINTS
   ------------------------------------------------------------
   The minimum-order note. Deliberately prominent — a buyer who
   only wants five pieces should find that out here, not after
   three emails.
   ------------------------------------------------------------ */
.notice {
  padding: 18px 22px;
  margin-bottom: 30px;
  background: var(--lace);
  color: var(--leather);
  border-radius: var(--radius);
  font-weight: 600;
}

.hint {
  margin-bottom: 30px;
  color: var(--body);
  font-size: 1rem;
}


/* ------------------------------------------------------------
   27. CHOICE CARDS
   ------------------------------------------------------------
   Two side-by-side routes. Used on White Labelling and Bulk
   Order, where the visitor has a real decision to make.
   ------------------------------------------------------------ */
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.choice {
  display: flex;
  flex-direction: column;
  padding: 42px 38px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--hover) ease, transform var(--hover) ease;
}
.choice:hover { border-color: var(--copper); transform: translateY(-3px); }

.choice__title { font-size: var(--h3); font-weight: 500; line-height: 1.14; margin: 12px 0 14px; }
.choice__text  { color: var(--body); margin-bottom: 22px; }

.choice__list { margin-bottom: 30px; }
.choice__list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  color: var(--body);
  font-size: 1rem;
}
.choice__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 9px; height: 1.5px;
  background: var(--copper);
}

.choice .btn { align-self: flex-start; margin-top: auto; }


/* ------------------------------------------------------------
   28. MINIMUM ORDER BLOCK
   ------------------------------------------------------------ */
.moq {
  background: var(--leather);
  color: var(--butter);
  border-radius: var(--radius-lg);
  padding: 60px 54px;
  text-align: center;
}
.moq .label { color: var(--lace); }

.moq__figure {
  font-size: clamp(3.4rem, 9vw, 6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 14px 0 18px;
}
.moq__text { max-width: 54ch; margin: 0 auto; color: rgba(255,248,235,0.82); }


/* ------------------------------------------------------------
   29. PROCESS STEPS
   ------------------------------------------------------------ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.step {
  padding-top: 22px;
  border-top: 2px solid var(--border);
}
.step__title { font-size: var(--h5); font-weight: 600; margin: 10px 0 8px; }
.step__text  { color: var(--body); font-size: 1rem; }


/* ------------------------------------------------------------
   30. COMING SOON PAGE
   ------------------------------------------------------------ */
.soon {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--leather);
  color: var(--butter);
}
.soon .label { color: var(--lace); }
.soon__inner { max-width: 44ch; }
.soon__title {
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 16px 0 20px;
}
.soon__text { color: rgba(255,248,235,0.82); }


/* ------------------------------------------------------------
   31. CONVERSION BLOCK  —  note line
   ------------------------------------------------------------ */
.convert__note { margin-top: 10px; opacity: 0.85; font-size: 1rem; }


/* ------------------------------------------------------------
   32. BRANDING CHOICE IN THE CART
   ------------------------------------------------------------
   Applies to the whole order rather than per item, which is how
   TTF actually supplies it.
   ------------------------------------------------------------ */
.cart__option {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.cart__option-label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 10px;
}
.cart__choices { display: flex; gap: 10px; }

.cart__choice {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--hover) ease, background-color var(--hover) ease;
}
.cart__choice:hover { border-color: var(--copper); }
.cart__choice input { accent-color: var(--copper); }

/* The selected option is filled in, so the choice is obvious */
.cart__choice:has(input:checked) {
  border-color: var(--leather);
  background: var(--surface);
}


/* ------------------------------------------------------------
   33. NEW SECTIONS  —  TABLET AND MOBILE
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: 26px; }
}

@media (max-width: 720px) {
  .choice-grid { grid-template-columns: 1fr; gap: 16px; }
  .choice      { padding: 30px 26px; }
  .steps       { grid-template-columns: 1fr; }
  .moq         { padding: 40px 26px; }
  .notice      { padding: 15px 18px; font-size: 0.95rem; }
  .cart__choices { flex-direction: column; }
}


/* ------------------------------------------------------------
   34. COLOUR SWATCHES ON PRODUCTS
   ------------------------------------------------------------
   Built automatically by main.js from the colours list in
   config.js. Deliberately small and quiet — the photograph is
   what sells the product, the swatches only need to be findable.
   ------------------------------------------------------------ */

.product__actions {
  margin-top: 11px;
  display: block;      /* stacked, so swatches sit above the button */
}

/* "Choose a colour" / "Colour: Green" */
.swatch__chosen {
  font-size: 0.82rem;
  color: var(--body);
  margin-bottom: 7px;
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}

/* A single colour circle */
.swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  padding: 0;
  cursor: pointer;
  transition: transform var(--hover) ease, box-shadow var(--hover) ease;
}
.swatch:hover { transform: scale(1.12); }

/* The chosen one gets a ring, so it reads clearly even on a
   colour close to the page background */
.swatch.is-picked {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--leather);
}

/* The "Other" pill sits alongside the circles */
.swatch--other {
  width: auto;
  height: 24px;
  padding: 0 11px;
  border-radius: 20px;
  background: transparent;
  color: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.swatch--other:hover { border-color: var(--copper); transform: none; }

/* The box for typing a colour we don't stock */
.swatch__input {
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 10px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--fg);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.swatch__input:focus { outline: none; border-color: var(--copper); }

/* Add to Cart before a colour is picked — present but clearly
   not ready. Not disabled, because a dead button tells you
   nothing about why. */
.product__add.is-waiting {
  color: var(--muted);
  border-color: var(--border);
}
.product__add.is-waiting:hover {
  background: transparent;
  color: var(--muted);
}

/* A small shake if they try to add without choosing */
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}
.swatches.is-nudged { animation: nudge 400ms ease; }

/* The colour shown on each line in the cart */
.cart__colour {
  font-size: 0.85rem;
  color: var(--copper);
  font-weight: 600;
  margin-top: 2px;
}


/* Swatches on a phone — slightly larger, easier to hit */
@media (max-width: 720px) {
  .swatch { width: 27px; height: 27px; }
  .swatch--other { height: 27px; padding: 0 13px; }
}


/* Someone with motion switched off shouldn't get the shake */
@media (prefers-reduced-motion: reduce) {
  .swatches.is-nudged { animation: none; outline: 2px solid var(--copper); outline-offset: 4px; }
}


/* ------------------------------------------------------------
   35. THE SERVICES SLIDER
   ------------------------------------------------------------
   Cards run sideways instead of stacking. Five full-height cards
   down the page pushed the enquiry section a long way from the
   top — sideways keeps the whole section to roughly one screen.

   Dragging and swiping are handled by the browser itself. The
   arrows are just a nudge for people using a mouse.
   ------------------------------------------------------------ */
.slider {
  position: relative;

  /* Run to the very edge of the screen, past the page padding, so
     the last card visibly continues off-screen. That cut-off edge
     is what tells people there is more to see. */
  margin-right: calc(var(--pad-side) * -1);
}

.slider__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-right: var(--pad-side);
  padding-bottom: 4px;

  /* "proximity", not "mandatory".
     Mandatory forces a snap on every movement, which on a
     trackpad fights vertical scrolling — the page feels stuck
     as you pass this section. Proximity only snaps when you are
     already close to a card, so scrolling down stays smooth. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;

  /* Stop a sideways swipe from leaking out and scrolling the
     page or triggering the browser's back gesture. */
  overscroll-behavior-x: contain;

  /* Vertical gestures belong to the page, not to this row.
     Without it, a diagonal trackpad movement gets swallowed. */
  touch-action: pan-x pan-y;

  /* Hide the scrollbar — the cut-off card is the signal instead */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.slider__track::-webkit-scrollbar { display: none; }

/* Each service card inside the slider */
.slider__track .service {
  flex: 0 0 clamp(280px, 30vw, 400px);
  scroll-snap-align: start;
}

/* Nudge arrows. Hidden on touch devices, which swipe instead. */
.slider__arrow {
  position: absolute;
  top: 34%;
  z-index: 5;

  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--butter);
  border: 1px solid var(--border);
  color: var(--leather);
  font-size: 25px;
  line-height: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 3px 14px rgba(63,47,32,0.14);
  transition: transform var(--hover) ease,
              opacity var(--hover) ease,
              background-color var(--hover) ease;
}
.slider__arrow:hover { background: var(--lace); transform: scale(1.07); }

.slider__arrow--prev { left: -14px; }
.slider__arrow--next { right: calc(var(--pad-side) - 14px); }

/* Fade out at either end rather than sitting there doing nothing */
.slider__arrow.is-done { opacity: 0; pointer-events: none; }

.slider__hint {
  margin-top: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}


/* ------------------------------------------------------------
   36. SLIDER  —  MOBILE
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  /* On a phone you swipe, so arrows are just clutter */
  .slider__arrow { display: none; }

  .slider__track { gap: 12px; }
  .slider__track .service { flex-basis: 80vw; }
}


/* ------------------------------------------------------------
   37. SLIDER  —  REDUCED MOTION
   Smooth scrolling can be unpleasant for some people.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .slider__track { scroll-behavior: auto; }
}


/* ------------------------------------------------------------
   38. MINIMUM ORDER IN THE CART
   ------------------------------------------------------------
   The order can't go through below the threshold, so the cart
   says so plainly rather than letting someone reach the payment
   screen and be turned away there.
   ------------------------------------------------------------ */

/* The checkout button while the order is too small. Still
   clickable — pressing it explains why, which a dead greyed-out
   button never does. */
.btn.is-blocked {
  background: var(--surface);
  color: var(--body);
  border: 1.5px solid var(--border);
}
.btn.is-blocked:hover {
  background: var(--surface);
  color: var(--body);
  transform: none;
}

.cart__block {
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--lace);
  color: var(--leather);
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.45;

  opacity: 0;
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  transition: opacity var(--hover) ease, max-height var(--hover) ease,
              padding var(--hover) ease;
}
.cart__block.is-shown {
  opacity: 1;
  max-height: 130px;
  padding-top: 12px;
  padding-bottom: 12px;
}


/* ------------------------------------------------------------
   39. PRICE ON A PRODUCT CARD
   ------------------------------------------------------------
   Written in by main.js from the prices in config.js.
   Sits under the product name, above the "Ready to wear" line.
   ------------------------------------------------------------ */
.product__price {
  margin-top: 3px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.01em;
}

/* When a product is quoted rather than priced */
.product__price--quote {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--copper);
}


/* ------------------------------------------------------------
   40. SIZE BUTTONS ON PRODUCTS
   ------------------------------------------------------------
   Built by main.js from the sizes list in config.js, the same
   way as the colour swatches.
   ------------------------------------------------------------ */
.sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

/* Six sizes now (S to 3XL), so these are a little narrower to
   keep them on two tidy rows rather than three ragged ones. */
.size {
  min-width: 38px;
  height: 32px;
  padding: 0 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--hover) ease,
              background-color var(--hover) ease,
              color var(--hover) ease;
}
.size:hover { border-color: var(--copper); }

/* The chosen size fills in, so it reads at a glance */
.size.is-picked {
  background: var(--leather);
  border-color: var(--leather);
  color: var(--butter);
}

/* Same shake as the swatches if they try to add without choosing */
.sizes.is-nudged { animation: nudge 400ms ease; }

@media (max-width: 720px) {
  .size { min-width: 42px; height: 36px; padding: 0 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .sizes.is-nudged { animation: none; outline: 2px solid var(--copper); outline-offset: 4px; }
}


/* ------------------------------------------------------------
   41. THE SIZE GUIDE
   ------------------------------------------------------------
   Opens over the page rather than sending anyone away — nobody
   should lose their cart to check a measurement.

   Built as a real table rather than a picture, so it stays sharp
   and reads properly on a phone.
   ------------------------------------------------------------ */

/* The small "Size guide" link under the size buttons */
.size-guide-link {
  display: inline-block;
  margin-bottom: 10px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--copper);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.size-guide-link:hover { color: var(--leather); }

/* The version inside the cart drawer */
.cart__guide {
  display: block;
  width: 100%;
  margin: 12px 0 0;
  text-align: center;
}

.guide {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;

  /* ---- THIS LINE MATTERS ----
     While closing, the panel is invisible but still covers the
     whole screen for the length of the fade. Without this it
     swallows the very next click — so tapping "Size guide"
     again straight after closing appeared to do nothing.

     Ignoring clicks unless it is actually open means it can be
     reopened the instant it closes. */
  pointer-events: none;
}

/* Open — take clicks again */
.guide.is-open { pointer-events: auto; }

.guide__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(35,25,16,0.55);
  opacity: 0;
  transition: opacity 200ms ease;
}
.guide.is-open .guide__backdrop { opacity: 1; }

.guide__panel {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;

  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(35,25,16,0.3);

  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.guide.is-open .guide__panel { opacity: 1; transform: translateY(0) scale(1); }

.guide__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 30px 18px;
  border-bottom: 1px solid var(--border);
}
.guide__title { font-size: var(--h4); font-weight: 600; margin-top: 4px; }

.guide__close {
  font-size: 1.8rem;
  line-height: 1;
  padding: 2px 8px;
  color: var(--body);
  transition: color var(--hover) ease;
}
.guide__close:hover { color: var(--fg); }

/* The table scrolls sideways on a narrow screen rather than
   squashing the numbers into unreadable columns */
.guide__scroll { overflow: auto; padding: 0 30px; }

.guide__table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0 6px;
  font-size: 0.95rem;
}

.guide__table th,
.guide__table td {
  padding: 12px 14px;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

.guide__table thead th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper);
  border-bottom: 1.5px solid var(--border);
}

/* The size name column, pinned left and emphasised */
.guide__table tbody th {
  text-align: left;
  font-weight: 700;
  color: var(--fg);
  background: var(--bg);
  position: sticky;
  left: 0;
}

.guide__table tbody tr:hover td,
.guide__table tbody tr:hover th { background: var(--surface); }

.guide__note {
  padding: 16px 30px 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--body);
}

.guide__foot { padding: 22px 30px 26px; }
.guide__foot .btn { width: 100%; justify-content: center; }


/* ------------------------------------------------------------
   42. THE BULK DISCOUNT NUDGE
   ------------------------------------------------------------
   Live in the cart: "Add 26 more items to enjoy 20% off".
   Turns green once the threshold is reached.
   ------------------------------------------------------------ */
.cart__nudge {
  margin-bottom: 12px;
  padding: 0 14px;
  border-radius: var(--radius);
  background: var(--lace);
  color: var(--leather);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.45;

  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--hover) ease, opacity var(--hover) ease,
              padding var(--hover) ease;
}
.cart__nudge.is-shown {
  max-height: 120px;
  opacity: 1;
  padding: 12px 14px;
}

/* Once they have earned it */
.cart__nudge.is-earned { background: #E4EDDF; color: #35502B; }


/* ------------------------------------------------------------
   43. SIZE GUIDE  —  MOBILE
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  .guide { padding: 14px; }
  .guide__panel { max-height: 92vh; }
  .guide__head { padding: 20px 20px 14px; }
  .guide__scroll { padding: 0 20px; }
  .guide__note { padding: 14px 20px 0; font-size: 0.82rem; }
  .guide__foot { padding: 18px 20px 20px; }
  .guide__table { font-size: 0.88rem; }
  .guide__table th, .guide__table td { padding: 10px 11px; }
}


@media (prefers-reduced-motion: reduce) {
  .guide__backdrop, .guide__panel { transition: none; }
}


/* ------------------------------------------------------------
   44. THE DISCOUNTED TOTAL IN THE CART
   ------------------------------------------------------------
   Once the bulk threshold is reached, the full price is struck
   through and the discounted price shown beside it, with the
   saving underneath.

   Shopify applies the real discount at checkout. This is the
   site setting the expectation, so the number on the payment
   page is not a surprise.
   ------------------------------------------------------------ */
.cart__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

/* The full price, before the discount */
.cart__was {
  color: var(--muted);
  text-decoration: line-through;
  font-weight: 500;
}

/* What they will actually pay */
.cart__now {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--fg);
}

/* The saving, on its own line */
.cart__saving {
  flex-basis: 100%;
  font-size: 0.85rem;
  font-weight: 600;
  color: #35502B;
}


/* ------------------------------------------------------------
   45. THE POLICIES PAGE
   ------------------------------------------------------------
   Four documents on one page, with a side menu that follows you
   down. Long text needs a narrower column than the rest of the
   site — around 70 characters a line is where reading stays
   comfortable.
   ------------------------------------------------------------ */
.policy {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 60px;
  align-items: start;
}

/* The side menu sticks as you scroll */
.policy__nav {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 20px;
  border-right: 1px solid var(--border);
}

.policy__link {
  padding: 10px 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--body);
  transition: color var(--hover) ease;
}
.policy__link:hover { color: var(--copper); }

.policy__body { max-width: 68ch; }

.policy__doc {
  padding-bottom: 56px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--border);

  /* So the sticky bar doesn't cover the heading when you jump
     to it from the side menu */
  scroll-margin-top: 110px;
}
.policy__doc:last-of-type { border-bottom: none; }

.policy__title {
  font-size: var(--h3);
  font-weight: 600;
  line-height: 1.12;
  margin-bottom: 6px;
}

.policy__updated {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 28px;
}

.policy__doc h3 {
  font-size: var(--h5);
  font-weight: 600;
  margin: 32px 0 10px;
}

.policy__doc p {
  color: var(--body);
  margin-bottom: 14px;
  line-height: 1.65;
}

.policy__doc ul {
  margin: 0 0 16px;
  padding: 0;
}
.policy__doc li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  color: var(--body);
  line-height: 1.6;
}
.policy__doc li::before {
  content: '';
  position: absolute;
  left: 0; top: 12px;
  width: 8px; height: 1.5px;
  background: var(--copper);
}

.policy__doc a {
  color: var(--copper);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.policy__doc strong { color: var(--fg); }


@media (max-width: 1100px) {
  /* The menu moves above the text and runs across */
  .policy { grid-template-columns: 1fr; gap: 30px; }

  .policy__nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 0 20px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .policy__link {
    padding: 9px 15px;
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 0.85rem;
  }
  .policy__link:hover { border-color: var(--copper); }
}

@media (max-width: 720px) {
  .policy__doc { padding-bottom: 40px; margin-bottom: 40px; }
  .policy__title { font-size: 1.5rem; }
}


/* ------------------------------------------------------------
   46. THE ADDRESS IN THE FOOTER
   ------------------------------------------------------------
   Sits under the blurb. <address> is the right element for it,
   but browsers italicise it by default, which does not suit.
   ------------------------------------------------------------ */
.footer__address {
  margin-top: 18px;
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255,248,235,0.6);
}


/* The return address inside the policies page */
.policy__address {
  padding: 18px 22px;
  margin: 6px 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-style: normal;
  line-height: 1.7;
  color: var(--fg) !important;
  font-weight: 500;
}


/* ------------------------------------------------------------
   47. SIZE GUIDE  —  UNITS AND SCROLL LOCK
   ------------------------------------------------------------ */

/* Stated once, plainly, above the numbers. A small "in" beside
   each figure is easy to miss, and someone reading 40 as
   centimetres orders completely the wrong size. */
.guide__units {
  margin: 0;
  padding: 14px 30px;
  background: var(--lace);
  color: var(--leather);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.guide__units strong { font-weight: 700; }

/* Holds the page still while the guide is open */
body.guide-open { overflow: hidden; }


/* ------------------------------------------------------------
   48. SIZE GUIDE  —  TABLE VERSUS CARDS
   ------------------------------------------------------------
   Two layouts of the same numbers.

   Wide screens get the table: easy to compare sizes down a
   column.

   Phones get cards, one per size, with the measurement name
   beside each number. An eight-column table on a 375px screen
   is unreadable however you scroll it.

   Only one is ever visible.
   ------------------------------------------------------------ */
.guide__cards { display: none; }

.guide__unit {
  font-size: 0.72em;
  font-weight: 500;
  color: var(--muted);
  margin-left: 2px;
}

@media (max-width: 760px) {
  .guide__table { display: none; }
  .guide__cards { display: block; padding: 20px 0 4px; }

  .guide__card {
    padding: 16px 18px;
    margin-bottom: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .guide__card:last-child { margin-bottom: 0; }

  .guide__size {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fg);
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }

  /* Two measurements per row, so a card stays short enough to
     read without scrolling it */
  .guide__pairs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 16px;
    margin: 0;
  }

  .guide__pair {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }

  .guide__pair dt {
    font-size: 0.82rem;
    color: var(--body);
  }

  .guide__pair dd {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--fg);
  }

  .guide__units { padding: 12px 20px; font-size: 0.85rem; }
}

/* Very narrow phones — one measurement per row */
@media (max-width: 380px) {
  .guide__pairs { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------
   49. CART WARNING
   ------------------------------------------------------------
   Shown when the basket holds a product that has no Shopify
   handle yet, so cannot be paid for online. Better said here
   than discovered at the payment step.
   ------------------------------------------------------------ */
.cart__warn {
  display: block;
  padding: 11px 13px;
  background: #FBEEDA;
  border: 1px solid #E3C99A;
  border-radius: var(--radius);
  color: #6B4A2F;
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: left;
}


/* ------------------------------------------------------------
   50. THE SPAM TRAP
   ------------------------------------------------------------
   A hidden field bots fill in and people never see. Formspree
   discards anything that arrives with it completed.

   Hidden off-screen rather than with display:none, because some
   bots skip fields that are not rendered at all.
   ------------------------------------------------------------ */
.is-trap {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ------------------------------------------------------------
   51. "REQUEST A QUOTE" STATE
   ------------------------------------------------------------
   Above the quote threshold the checkout button changes job.
   Copper rather than brown, so it reads as a different action
   and nobody presses it expecting a payment page.
   ------------------------------------------------------------ */
.btn.is-quote {
  background: var(--copper);
  color: var(--butter);
}
.btn.is-quote:hover { background: var(--leather); }


/* ------------------------------------------------------------
   52. THE PRODUCT PAGE
   ------------------------------------------------------------
   One page serves every product. Picture on the left, the
   choices on the right, other kaftans underneath.
   ------------------------------------------------------------ */
.pdp { padding: 150px 0 var(--section-gap); }

.pdp__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-top: 26px;
}

.pdp__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);

  /* Follows you down while you read the details and choose */
  position: sticky;
  top: 110px;
}

.pdp__image {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.pdp__name {
  font-size: var(--h2);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 8px 0 4px;
}

/* The price is written in by main.js, same as on a card */
.pdp__info .product__price {
  font-size: 1.6rem;
  margin: 10px 0 24px;
}

.pdp__desc { margin-bottom: 30px; }
.pdp__desc p {
  color: var(--body);
  line-height: 1.7;
  margin-bottom: 14px;
  max-width: 52ch;
}

/* On a product page the choices get more room than on a card */
.pdp__info .product__actions { margin-top: 0; }
.pdp__info .swatch__chosen { font-size: 0.95rem; margin-bottom: 10px; }
.pdp__info .swatch { width: 32px; height: 32px; }
.pdp__info .swatch--other { height: 32px; padding: 0 14px; font-size: 0.8rem; }
.pdp__info .size { min-width: 46px; height: 38px; font-size: 0.9rem; }
.pdp__info .size-guide-link { font-size: 0.9rem; margin-bottom: 20px; }

.pdp__info .product__add {
  width: 100%;
  padding: 17px;
  font-size: 1rem;
}

/* Quantity */
.pdp__qty { margin-bottom: 18px; }
.pdp__qty label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 8px;
}

.pdp__stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.pdp__stepper button {
  width: 42px; height: 44px;
  font-size: 1.1rem;
  line-height: 1;
  background: transparent;
  transition: background-color var(--hover) ease;
}
.pdp__stepper button:hover { background: var(--surface); }

.pdp__stepper input {
  width: 70px; height: 44px;
  border: none;
  border-left: 1.5px solid var(--border);
  border-right: 1.5px solid var(--border);
  text-align: center;
  font: inherit;
  font-weight: 700;
  color: var(--fg);
  background: var(--bg);
  -moz-appearance: textfield;
}
.pdp__stepper input::-webkit-outer-spin-button,
.pdp__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp__stepper input:focus { outline: none; }

/* The short facts under the button */
.pdp__facts {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.pdp__facts li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  font-size: 0.95rem;
  color: var(--body);
}
.pdp__facts li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 9px; height: 1.5px;
  background: var(--copper);
}


/* The other kaftans, shown under a product */
.recommended { background: var(--surface); }


/* ------------------------------------------------------------
   53. CLICKABLE PRODUCT CARDS
   ------------------------------------------------------------ */
.product__link { display: block; color: inherit; }
.product__link:hover .product__name { color: var(--copper); }
.product__name { transition: color var(--hover) ease; }


/* ------------------------------------------------------------
   54. PRODUCT PAGE  —  MOBILE
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .pdp { padding: 120px 0 var(--section-gap); }
  .pdp__grid { grid-template-columns: 1fr; gap: 30px; }

  /* Sticky makes no sense once it is stacked */
  .pdp__media { position: static; }

  .pdp__name { font-size: 1.9rem; }
  .pdp__info .product__price { font-size: 1.4rem; margin-bottom: 20px; }
}


/* Shown if a product photograph is genuinely missing, rather
   than leaving a broken icon on the main product image. */
.pdp__noimage {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}