/* ==========================================================================
   LOLO BY LAILA / lolo.css
   One hand-crafted stylesheet. No frameworks, no resets, no Tailwind.
   Mobile-first: phone (base) -> tablet (768px) -> desktop (1024px) -> wide (1440px).
   Design tokens per DESIGN.md §3.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Self-hosted fonts
   The exact Cormorant Garamond and Inter woff2 files the approved static
   build loads from Google Fonts, bundled under assets/fonts/. Both families
   are SIL OFL 1.1; see assets/fonts/OFL-notice.txt. The theme never requests
   fonts from Google (no CDN dependency) and does not rely on locally
   installed fonts. Each weight/style below maps 1:1 to the faces the static
   build requests; the two Cormorant faces and the two Inter faces share one
   variable woff2 each, exactly as served by Google Fonts.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-300.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-300.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-italic-300.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-italic-300.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --bone: #f4efe6;
  --paper: #fbf9f4;
  --ink: #171310;
  --ink-2: #5a5045;
  --line: #ddd4c4;
  --line-ink: rgba(23, 19, 16, 0.14);
  --wine: #6e1f2a;
  --white: #ffffff;

  --gutter: clamp(20px, 4.5vw, 72px);
  --section-pad: clamp(72px, 11vh, 132px);
  --header-h: 68px;
  --maxw: 1560px;

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-ui: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: var(--wine);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   3. Typography helpers (DESIGN.md §3)
   -------------------------------------------------------------------------- */
.display-xl {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.9rem, 6.4vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
}

.display-l {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.display-xl em,
.display-l em {
  font-style: italic;
  font-weight: 300;
}

.ed-body {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink);
}

.label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink);
}

.price {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* Buttons: 12px, weight 500, uppercase, letter-spacing .22em */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 0 26px;
  height: 48px;
  cursor: pointer;
  text-decoration: none;
}

.btn--ink {
  background: var(--ink);
  color: var(--white);
}

.btn--ink:hover {
  background: var(--wine);
  color: var(--white);
}

.btn--block {
  width: 100%;
}

/* Text links */
.link-underline {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  text-decoration-skip-ink: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.link-underline:hover {
  color: var(--wine);
  text-decoration-color: var(--wine);
}

.link-quiet {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-2);
  text-decoration: none;
}

.link-quiet:hover {
  color: var(--ink);
}

.link-wine {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--wine);
  text-decoration: underline;
  text-decoration-color: var(--wine);
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  text-decoration-skip-ink: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.link-wine:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

/* --------------------------------------------------------------------------
   4. Structure
   -------------------------------------------------------------------------- */
.wrap {
  padding-inline: var(--gutter);
}

.wrap--max {
  max-width: var(--maxw);
  margin-inline: auto;
}

.sec {
  padding-block: var(--section-pad);
}

.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 24px;
  row-gap: 12px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.sec-head > .label {
  flex-basis: 100%;
}

.sec-head h2 {
  margin-top: 10px;
}

.sec-head__link {
  margin-left: auto;
  align-self: baseline;
  padding-bottom: 6px;
}

/* --------------------------------------------------------------------------
   5. Accessibility: skip link, focus ring, screen-reader text
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 14px 22px;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

.site-footer :focus-visible,
.founder :focus-visible,
.bag-drawer :focus-visible {
  outline-color: var(--white);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   6. Header

   Three states, resolved in this order. nav.js toggles .scrolled (24px on
   desktop, hero-image-band overlap on mobile); the template stamps is-hero on
   home and is-solid on every inner page.

   A. BASE    .site-header
              Transparent bar, ink chrome, dark signature. The resting rules
              below; both other states layer on top of them.

   B. HERO    .site-header.is-hero:not(.scrolled)
              Home only, while the header sits over the hero image: transparent
              background, all-white chrome, and the light signature on mobile
              (the mobile white mode holds only while the header overlaps the
              hero image band, per nav.js).

   C. SOLID   .site-header.is-solid, .site-header.scrolled
              Solid ink bar with white chrome: inner pages from the top
              (is-solid) and home after scrolling past the hero (.scrolled).
              White signature on every viewport, white links with a white
              0.75 hover, the wine underline kept on the active page, and a
              white hairline bottom.
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: nowrap;
  padding-inline: var(--gutter);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* State C: the solid black bar with a white hairline. */
.site-header.is-solid,
.site-header.scrolled {
  background: var(--ink);
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  min-width: 0;
  flex-shrink: 1;
}

.brand__mark {
  width: auto;
  height: 26px;
}

.brand__mark--light {
  display: none;
}

/* State C: the signature flips to white on the black bar, on every viewport. */
.site-header.is-solid .brand__mark--light,
.site-header.scrolled .brand__mark--light {
  display: block;
}

.site-header.is-solid .brand__mark--dark,
.site-header.scrolled .brand__mark--dark {
  display: none;
}

.nav {
  display: none;
  align-items: center;
  gap: 28px;
}

.nav-link {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: var(--wine);
}

.nav-link.is-active {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--wine);
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-shrink: 0;
}

.menu-btn {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.3s ease;
}

/* State B: over the home hero the chrome sits on photography: white until scrolled. */
.site-header.is-hero:not(.scrolled) .nav-link,
.site-header.is-hero:not(.scrolled) .menu-btn {
  color: var(--white);
}

.site-header.is-hero:not(.scrolled) .nav-link:hover,
.site-header.is-hero:not(.scrolled) .menu-btn:hover {
  color: var(--white);
  opacity: 0.75;
}

/* State C: white chrome, white 0.75 hover (mirrors State B), wine active underline kept. */
.site-header.is-solid .nav-link,
.site-header.scrolled .nav-link,
.site-header.is-solid .menu-btn,
.site-header.scrolled .menu-btn {
  color: var(--white);
}

.site-header.is-solid .nav-link.is-active,
.site-header.scrolled .nav-link.is-active {
  color: var(--white);
}

.site-header.is-solid .nav-link:hover,
.site-header.scrolled .nav-link:hover,
.site-header.is-solid .menu-btn:hover,
.site-header.scrolled .menu-btn:hover {
  color: var(--white);
  opacity: 0.75;
}

@media (min-width: 1024px) {
  .nav {
    display: flex;
  }

  .header-actions {
    display: none;
  }
}

@media (max-width: 1023px) {
  .site-header.is-hero:not(.scrolled) .brand__mark--dark {
    display: none;
  }

  .site-header.is-hero:not(.scrolled) .brand__mark--light {
    display: block;
  }
}

/* Small phones (<=480px): guarantee the signature plus "BAG (n)" and "MENU"
   stay fully inside the viewport with the standard gutter even when the UI
   font renders wider than the metrics we measure (device fallbacks, iOS text
   rendering). We tighten only what fits the ticket's levers: slightly smaller
   signature, tighter tracking on the two action labels, and tighter gaps.
   The gutters stay at var(--gutter) on both sides, so the menu overlay's
   Close (right: var(--gutter)) keeps aligning with the header gutter.
   Desktop (>=1024px) and tablet keep the wider chrome untouched. */
@media (max-width: 480px) {
  .site-header {
    gap: 16px;
  }

  .site-header .brand__mark {
    height: 22px;
  }

  .header-actions {
    gap: 14px;
  }

  .header-actions .nav-link,
  .site-header .menu-btn {
    letter-spacing: 0.16em;
  }
}

/* --------------------------------------------------------------------------
   7. Mobile menu overlay
   -------------------------------------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  /* Above the fixed header (z 60) so the open overlay fully covers it: exactly
     one set of controls (the overlay's own Close) and no washed-out
     white-on-bone chrome ghosting through. The bag drawer (z 70/71) still
     layers above the menu. */
  z-index: 65;
  background: var(--bone);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.menu__close {
  position: absolute;
  top: 0;
  right: var(--gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  z-index: 2;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}

.menu__nav {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding-inline: var(--gutter);
  max-width: var(--maxw);
  margin-inline: auto;
  width: 100%;
}

.menu__link {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.1rem, 7vw, 3.4rem);
  line-height: 1.1;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 8px 0;
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.menu.is-open .menu__link {
  opacity: 1;
  transform: none;
}

.menu.is-open .menu__link:nth-child(1) {
  transition-delay: 0.06s;
}

.menu.is-open .menu__link:nth-child(2) {
  transition-delay: 0.12s;
}

.menu.is-open .menu__link:nth-child(3) {
  transition-delay: 0.18s;
}

.menu.is-open .menu__link:nth-child(4) {
  transition-delay: 0.24s;
}

.menu__link:hover {
  color: var(--wine);
}

.menu__link--btn {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--white);
  padding: clamp(56px, 8vw, 96px) 0 40px;
}

.footer__top {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.footer__monogram {
  width: 60px;
  height: 84px;
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 24px;
  max-width: 720px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.footer__label {
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
}

.footer__col a {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  color: var(--white);
  text-decoration: none;
}

.footer__col a:hover {
  color: var(--white);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.footer__bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
}

.footer__bottom p {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.65);
}

@media (min-width: 768px) {
  .footer__cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   9. Home: hero
   -------------------------------------------------------------------------- */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-areas:
    "media"
    "panel";
  grid-template-rows: 58svh auto;
  background: var(--bone);
}

.hero__panel {
  grid-area: panel;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: clamp(32px, 9vw, 64px) var(--gutter) 52px;
}

.hero__folio {
  color: var(--ink-2);
}

.hero__title {
  max-width: 11ch;
}

.hero__standfirst {
  color: var(--ink-2);
  max-width: 46ch;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  padding-top: 6px;
}

.hero__scroll {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink-2);
  padding-top: 32px;
}

.hero__scroll-line {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--ink-2);
}

.hero__media {
  grid-area: media;
  position: relative;
  height: 58svh;
  overflow: hidden;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* Mobile: no scroll cue, compact copy below the image band. */
@media (max-width: 1023px) {
  .hero {
    min-height: 0;
  }

  .hero__scroll {
    display: none;
  }
}

@media (min-width: 1024px) {
  .hero {
    grid-template-areas: "panel media";
    grid-template-columns: 45fr 55fr;
    grid-template-rows: minmax(0, 1fr);
    min-height: 100svh;
  }

  .hero__media {
    height: 100%;
  }

  .hero__panel {
    padding-top: calc(var(--header-h) + 24px);
    padding-bottom: 40px;
  }

  .hero__title {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   10. Home: season strip
   -------------------------------------------------------------------------- */
.season {
  background: var(--bone);
  border-top: 1px solid var(--line);
}

.season__row {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 12px;
  padding-bottom: 8px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
}

.season__row .card {
  flex: 0 0 78%;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .season__row .card {
    flex-basis: 46%;
  }
}

@media (min-width: 1024px) {
  .season__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
    scroll-snap-type: none;
  }
}

/* --------------------------------------------------------------------------
   11. Product card (shared partial)
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: block;
}

.card[hidden] {
  display: none;
}

.card__link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.card__link:focus-visible {
  outline-offset: -3px;
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--line);
}

.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.9s var(--ease), opacity 0.5s ease;
}

.card__img--2 {
  opacity: 0;
}

.card:hover .card__img,
.card:focus-within .card__img {
  transform: scale(1.02);
}

.card:hover .card__img--2,
.card:focus-within .card__img--2 {
  opacity: 1;
}

.card__badge {
  display: block;
  color: var(--wine);
  font-size: 10px;
  letter-spacing: 0.22em;
  margin-bottom: 8px;
}

.card__quick {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 46px;
  background: var(--ink);
  color: var(--white);
  border: 0;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  cursor: pointer;
  transform: translateY(101%);
  transition: transform 0.35s var(--ease);
}

.card:hover .card__quick,
.card:focus-within .card__quick {
  transform: none;
}

.card__meta {
  padding-top: 14px;
}

.card__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.25;
  margin-bottom: 4px;
}

.card__price {
  color: var(--ink-2);
}

@media (max-width: 1023px) {
  .card__quick {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   12. Home: craft chapter (asymmetric 12-col)
   -------------------------------------------------------------------------- */
.craft {
  background: var(--bone);
}

.craft__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 4vw, 56px);
}

.craft__fig--main {
  grid-column: 1 / span 12;
}

.craft__copy {
  grid-column: 1 / span 12;
}

.craft__img {
  width: 100%;
  height: auto;
}

.craft__fig--wide {
  margin-top: clamp(20px, 3vw, 32px);
  width: 100%;
}

@media (min-width: 1024px) {
  .craft__fig--main {
    grid-column: 1 / span 5;
  }

  .craft__copy {
    grid-column: 7 / span 6;
    display: flex;
    flex-direction: column;
  }

  .craft__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .craft__fig--wide {
    width: 100%;
    margin-top: clamp(24px, 3vw, 40px);
  }
}

.craft__para {
  max-width: 62ch;
  margin-top: 18px;
}

/* --------------------------------------------------------------------------
   13. Home: bespoke + before/after slider
   -------------------------------------------------------------------------- */
.bespoke {
  background: var(--paper);
  border-top: 1px solid var(--line-ink);
  border-bottom: 1px solid var(--line-ink);
}

.bespoke__grid {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

@media (min-width: 1024px) {
  .bespoke__grid {
    grid-template-columns: 1fr 1.15fr;
  }
}

.bespoke__para {
  max-width: 52ch;
  margin: 18px 0 24px;
}

/* Before / after */
.ba {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--line);
  user-select: none;
  touch-action: pan-y;
}

.ba__base,
.ba__top-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba__top {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
  pointer-events: none;
}

.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  transform: translateX(-50%);
  z-index: 2;
  width: 44px;
  cursor: ew-resize;
  touch-action: none;
}

.ba__rule {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ink);
}

.ba__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  background: var(--ink);
  display: grid;
  place-items: center;
}

.ba__grip::after {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--paper);
}

.ba__label {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.ba__label--sketch {
  top: 14px;
  left: 14px;
  color: var(--ink);
}

.ba__label--made {
  bottom: 14px;
  right: 14px;
  color: var(--white);
}

/* --------------------------------------------------------------------------
   14. Home: collection preview
   -------------------------------------------------------------------------- */
.collection {
  background: var(--bone);
}

.collection__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-top: clamp(28px, 4vw, 48px);
}

@media (max-width: 767px) {
  .collection__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
  }
}

@media (min-width: 1024px) {
  .collection__grid {
    gap: 4px;
  }
}

.collection__item {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: block;
  text-decoration: none;
}

.collection__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.collection__item:hover .collection__img,
.collection__item:focus-visible .collection__img {
  transform: scale(1.03);
}

.collection__cta {
  margin-top: clamp(32px, 5vw, 56px);
}

/* --------------------------------------------------------------------------
   15. Home: founder band (the single text-on-image moment)
   -------------------------------------------------------------------------- */
.founder {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  background-image:
    linear-gradient(115deg, rgba(23, 19, 16, 0.72) 0%, rgba(23, 19, 16, 0.45) 32%, rgba(23, 19, 16, 0) 62%),
    url("../img/editorial/founder.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.founder__inner {
  padding: clamp(48px, 8vw, 96px) var(--gutter);
  max-width: var(--maxw);
  margin-inline: auto;
  width: 100%;
}

/* Founder band motion layer: the video replaces the still visually while the
   still stays as the section background and the video poster. The gradient
   that used to sit inside the section background moves to ::before so it
   keeps its exact position between the motion layer and the lockup. */
.founder__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.founder--video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, rgba(23, 19, 16, 0.72) 0%, rgba(23, 19, 16, 0.45) 32%, rgba(23, 19, 16, 0) 62%);
}

.founder--video .founder__inner {
  position: relative;
  z-index: 2;
}

.founder__text {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 16px;
}

.founder__sign {
  width: auto;
  height: 26px;
}

@media (max-width: 480px) {
  .founder__sign {
    width: auto;
    height: 22px;
  }
}

/* --------------------------------------------------------------------------
   16. Shop
   -------------------------------------------------------------------------- */
.shop-head {
  background: var(--bone);
  padding-bottom: 0;
}

.shop-head__title {
  margin-top: 12px;
}

.shop-head__count {
  color: var(--ink-2);
  margin-top: 14px;
}

.shop-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: clamp(28px, 4vw, 40px);
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
}

.chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.chip {
  background: none;
  border: 0;
  padding: 10px 18px;
  cursor: pointer;
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
}

.chip:first-child {
  padding-left: 0;
}

.chip + .chip {
  border-left: 1px solid var(--line-ink);
}

.chip:hover {
  color: var(--ink);
}

.chip.is-active {
  color: var(--wine);
  text-decoration: underline;
  text-decoration-color: var(--wine);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.sort-label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-2);
  cursor: pointer;
}

.sort {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--line-ink);
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23171310' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink);
  padding: 8px 26px 8px 0;
  cursor: pointer;
}

.shop-grid-sec {
  padding-top: clamp(28px, 4vw, 44px);
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.grid-shop {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

@media (min-width: 768px) {
  .grid-shop {
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .grid-shop {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   17. PDP
   -------------------------------------------------------------------------- */
.pdp-page {
  background: var(--bone);
}

.pdp-bread {
  padding-top: calc(var(--header-h) + 28px);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.pdp-bread__link {
  color: var(--ink-2);
  text-decoration: none;
}

.pdp-bread__link:hover {
  color: var(--wine);
}

.pdp-bread__sep {
  color: var(--ink-2);
}

.pdp-bread__current {
  color: var(--ink);
}

.pdp {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  margin-top: 20px;
}

@media (min-width: 1024px) {
  .pdp {
    grid-template-columns: 55fr 45fr;
    gap: clamp(32px, 5vw, 72px);
  }

  .pdp__info {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}

/* Desktop gallery */
.pdp__gallery-desk {
  display: none;
}

.pdp__main {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper);
}

.pdp__main-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.pdp__main-img.is-active {
  opacity: 1;
}

.pdp__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, 64px);
  gap: 1px;
  margin-top: 1px;
  background: var(--paper);
}

.thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid transparent;
  background: var(--paper);
  cursor: pointer;
  overflow: hidden;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumb.is-active,
.thumb[aria-current="true"] {
  border-color: var(--ink);
}

/* Mobile gallery: scroll-snap strip with dots */
.pdp__gallery-mob {
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

.pdp__strip {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.pdp__strip::-webkit-scrollbar {
  display: none;
}

.pdp__slide {
  flex: 0 0 100%;
  aspect-ratio: 4 / 5;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.pdp__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid var(--ink);
  background: transparent;
  cursor: pointer;
}

.dot.is-active,
.dot[aria-current="true"] {
  background: var(--ink);
}

@media (min-width: 1024px) {
  .pdp__gallery-desk {
    display: block;
  }

  .pdp__gallery-mob {
    display: none;
  }
}

/* Info column */
.pdp__info {
  background: var(--paper);
  padding: clamp(22px, 3vw, 40px);
  align-self: start;
}

@media (min-width: 1024px) {
  .pdp__info {
    position: sticky;
    top: 96px;
  }
}

.pdp__badge {
  color: var(--wine);
  margin-bottom: 12px;
}

.pdp__name {
  margin-bottom: 10px;
}

.pdp__price {
  font-size: 15px;
  padding-bottom: 20px;
}

.spec {
  border-bottom: 1px solid var(--line-ink);
}

.spec__row {
  display: grid;
  grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
  gap: 8px 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line-ink);
}

@media (max-width: 640px) {
  .spec__row {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }
}

.spec__dt {
  color: var(--ink-2);
}

.spec__dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  min-width: 0;
  overflow-wrap: break-word;
}

.pdp-size {
  margin-top: 22px;
}

.pdp-size__label {
  margin-bottom: 10px;
  color: var(--ink-2);
}

.sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.size-btn {
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.size-btn:hover {
  border-color: var(--ink);
}

.size-btn.is-active,
.size-btn[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.pdp-size__hint {
  display: block;
  margin-top: 10px;
  color: var(--wine);
}

.pdp-size__hint[hidden] {
  display: none;
}

.pdp-qty {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.pdp-qty .label {
  color: var(--ink-2);
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-ink);
}

.qty__btn {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  font-size: 16px;
  color: var(--ink);
  cursor: pointer;
}

.qty__val {
  min-width: 44px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.pdp__add {
  margin-top: 24px;
  height: 56px;
}

.pdp__note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-2);
  margin-top: 16px;
}

/* Size guide accordion */
.sg {
  margin-top: 26px;
  border-top: 1px solid var(--line-ink);
}

.sg__btn {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 18px 0;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sg__btn[aria-expanded="true"] {
  color: var(--wine);
}

.sg__panel {
  padding: 4px 0 12px;
}

.sg__table {
  margin-bottom: 26px;
}

.sg__table-label {
  color: var(--ink-2);
  margin-bottom: 10px;
}

.sg table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.sg th,
.sg td {
  text-align: left;
  padding: 9px 8px;
  border-bottom: 1px solid var(--line-ink);
  font-weight: 400;
}

.sg thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 500;
  color: var(--ink-2);
}

.sg tbody th {
  font-weight: 500;
  color: var(--ink);
}

.sg__unit {
  color: var(--ink-2);
  margin-top: 4px;
}

/* Related */
.related {
  background: var(--bone);
  border-top: 1px solid var(--line);
}

/* Sticky mobile add-to-bag bar */
.stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--bone);
  border-top: 1px solid var(--line);
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.stickybar__price {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.stickybar__label {
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stickybar__val {
  color: var(--ink);
}

.stickybar__add {
  height: 48px;
  padding-inline: 28px;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .stickybar {
    display: none;
  }
}

@media (max-width: 1023px) {
  body.has-stickybar {
    padding-bottom: 84px;
  }
}

/* --------------------------------------------------------------------------
   18. Atelier
   -------------------------------------------------------------------------- */
.atelier {
  background: var(--bone);
}

.atelier-hero {
  padding-bottom: 0;
}

.atelier-hero__title {
  margin-top: 12px;
  max-width: 13ch;
}

.atelier-banner {
  margin: 0;
}

.atelier-banner__img {
  width: 100%;
  height: auto;
  display: block;
}

.atelier__grid {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

@media (min-width: 768px) {
  .atelier__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.atelier__copy {
  max-width: 46ch;
}

.atelier__text {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
}

.atelier__img {
  width: 100%;
  height: auto;
}

.atelier-cta {
  background: var(--bone);
  border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   19. Contact
   -------------------------------------------------------------------------- */
.contact {
  background: var(--bone);
}

.contact-sec {
  padding-top: calc(var(--header-h) + 24px);
}

.contact__para {
  max-width: 46ch;
  margin-top: 22px;
}

.contact__cta {
  margin-top: clamp(32px, 5vw, 48px);
}

.contact__note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
  color: var(--ink-2);
  margin-top: 20px;
  max-width: 40ch;
}

.contact__monogram {
  width: 52px;
  height: 72px;
  margin-top: clamp(56px, 8vw, 88px);
}

/* --------------------------------------------------------------------------
   20. Bag drawer
   -------------------------------------------------------------------------- */
.bag-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(23, 19, 16, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.bag-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.bag-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 71;
  width: min(420px, 100vw);
  background: var(--paper);
  border-left: 1px solid var(--line-ink);
  transform: translateX(102%);
  transition: transform 0.45s var(--ease);
  display: flex;
  flex-direction: column;
}

.bag-drawer.is-open {
  transform: none;
}

.bag-drawer[hidden],
.bag-overlay[hidden] {
  display: none;
}

.bag-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--gutter);
  border-bottom: 1px solid var(--line-ink);
}

.bag-close {
  background: none;
  border: 0;
  color: var(--ink-2);
  cursor: pointer;
}

.bag-close:hover {
  color: var(--ink);
}

.bag-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px var(--gutter) 16px;
}

.bag-items {
  list-style: none;
}

.bag-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-ink);
}

.bag-item:last-child {
  border-bottom: 0;
}

.bag-item img {
  width: 64px;
  height: 64px;
  object-fit: cover;
}

.bag-item__main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.bag-item__name {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.25;
}

.bag-item__size,
.bag-item__price {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

.bag-item__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.bag-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-ink);
}

.bag-qty__btn {
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
}

.bag-qty__val {
  min-width: 26px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.bag-remove {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--ink-2);
  padding: 0;
}

.bag-remove:hover {
  color: var(--wine);
}

.bag-empty {
  padding: 40px 0 24px;
  text-align: center;
}

.bag-empty__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  margin-bottom: 18px;
}

.bag-drawer__foot {
  border-top: 1px solid var(--line-ink);
  padding: 18px var(--gutter) calc(18px + env(safe-area-inset-bottom));
}

.bag-subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.bag-subtotal__value {
  font-size: 15px;
  color: var(--ink);
}

.bag-preview {
  margin-top: 18px;
  border-top: 1px solid var(--line-ink);
  padding-top: 16px;
}

.bag-preview__note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 14px;
}

.bag-preview__head {
  color: var(--ink-2);
  margin-bottom: 8px;
}

.bag-preview__links {
  list-style: none;
}

.bag-preview__links li {
  margin-bottom: 6px;
}

.bag-preview__links a {
  font-size: 12.5px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  word-break: break-all;
}

.bag-prodnote {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   21. Reveal on scroll
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.7s var(--ease) var(--rdelay, 0ms),
    transform 0.7s var(--ease) var(--rdelay, 0ms);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   22. Reduced motion: everything instant
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .card__img,
  .collection__img {
    transition: none;
  }

  .card:hover .card__img,
  .card:focus-within .card__img,
  .collection__item:hover .collection__img {
    transform: none;
  }

  .card__img--2 {
    display: none;
  }

  .card:hover .card__img--2,
  .card:focus-within .card__img--2 {
    display: block;
  }

  .card__quick {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   21. WordPress + WooCommerce pages (cart / checkout / my account)
   --------------------------------------------------------------------------
   Rendered through page.php using WooCommerce's own shortcodes and markup.
   This section styles ONLY the bare Woo forms into the design language:
   Inter, hairlines, ink buttons, no radius, no shadows. It also provides
   the fixed-header clearance for the plain page wrapper. All rules here are
   additive; no existing rule above is modified.
   -------------------------------------------------------------------------- */

/* Plain page wrapper (cart, checkout, my account, standard pages).
   Scoped to main.page: WordPress also adds a "page" class to <body>, and the
   fixed-header clearance must only apply to the theme's own page container. */
main.page {
  background: var(--bone);
  padding-top: calc(var(--header-h) + 28px);
  min-height: 60vh;
}

main.page .wrap--max {
  width: 100%;
}

.page__title {
  margin-bottom: clamp(24px, 4vw, 40px);
}

.page__content {
  color: var(--ink);
}

.page__content > :first-child {
  margin-top: 0;
}

/* Fallback blog/search listing (index.php): plain text list, no cards */
.fallback-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.fallback-list li {
  border-bottom: 1px solid var(--line);
}

.fallback-list a {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  padding: 20px 0;
}

.fallback-list a:hover {
  color: var(--wine);
}

/* WooCommerce pages: bare form styling in the design language */
main.page .woocommerce h1,
main.page .woocommerce h2,
main.page .woocommerce h3 {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.015em;
}

main.page .woocommerce h2,
main.page .woocommerce h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.05;
}

main.page .woocommerce .woocommerce-breadcrumb,
main.page .woocommerce .woocommerce-result-count,
main.page .woocommerce .woocommerce-ordering,
main.page .woocommerce .woocommerce-message,
main.page .woocommerce .woocommerce-info,
main.page .woocommerce .woocommerce-error,
main.page .woocommerce form .form-row label,
main.page .woocommerce form .form-row .woocommerce-input-wrapper,
main.page .woocommerce form .form-row .optional,
main.page .woocommerce .woocommerce-form-login__rememberme,
main.page .woocommerce .woocommerce-form-coupon,
main.page .woocommerce .woocommerce-form__label-for-checkbox {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink-2);
}

main.page .woocommerce .woocommerce-message,
main.page .woocommerce .woocommerce-info,
main.page .woocommerce .woocommerce-error {
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  padding: 16px 0;
  margin: 0 0 28px;
}

main.page .woocommerce .woocommerce-error {
  border-color: var(--wine);
}

main.page .woocommerce .woocommerce-message::before,
main.page .woocommerce .woocommerce-info::before,
main.page .woocommerce .woocommerce-error::before {
  display: none;
}

main.page .woocommerce .woocommerce-message .button,
main.page .woocommerce .woocommerce-info .button {
  float: right;
}

main.page .woocommerce table.shop_table {
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  margin: 0 0 24px;
}

main.page .woocommerce table.shop_table th,
main.page .woocommerce table.shop_table td {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.04em;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 8px;
  vertical-align: middle;
}

main.page .woocommerce table.shop_table th {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--ink-2);
}

main.page .woocommerce table.shop_table td.product-name a,
main.page .woocommerce table.shop_table td a {
  color: var(--ink);
  text-decoration: none;
}

main.page .woocommerce table.shop_table td.product-name a:hover,
main.page .woocommerce table.shop_table td a:hover {
  color: var(--wine);
}

main.page .woocommerce table.shop_table img {
  border-radius: 0;
}

main.page .woocommerce table.shop_table .quantity .qty {
  width: 64px;
  border: 0;
  border-bottom: 1px solid var(--line-ink);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  padding: 8px 4px;
}

main.page .woocommerce .cart_totals h2,
main.page .woocommerce .woocommerce-column h2 {
  margin-bottom: 16px;
}

main.page .woocommerce .cart_totals table.shop_table th,
main.page .woocommerce .cart_totals table.shop_table td {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

main.page .woocommerce .cart_totals .order-total .amount {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink);
}

main.page .woocommerce form .form-row input.input-text,
main.page .woocommerce form .form-row textarea,
main.page .woocommerce form .form-row select,
main.page .woocommerce form .select2-container .select2-selection--single,
main.page .woocommerce .woocommerce-form-login input[type="text"],
main.page .woocommerce .woocommerce-form-login input[type="password"],
main.page .woocommerce .woocommerce-form-coupon input[type="text"] {
  border: 0;
  border-bottom: 1px solid var(--line-ink);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  padding: 10px 0;
  box-shadow: none;
}

main.page .woocommerce form .form-row input.input-text:focus,
main.page .woocommerce form .form-row textarea:focus,
main.page .woocommerce form .form-row select:focus {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

main.page .woocommerce form .form-row textarea {
  height: 120px;
}

main.page .woocommerce form .form-row {
  padding: 0 0 18px;
  margin: 0;
}

main.page .woocommerce form .form-row label {
  display: block;
  margin-bottom: 6px;
}

main.page .woocommerce form .form-row .required {
  color: var(--wine);
}

main.page .woocommerce .woocommerce-terms-and-conditions-wrapper,
main.page .woocommerce .woocommerce-account-fields {
  margin-top: 12px;
}

main.page .woocommerce .select2-container--default .select2-selection--single {
  height: auto;
}

main.page .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 10px;
}

/* Buttons: the ink button language, full width where Woo expects a block */
main.page .woocommerce button.button,
main.page .woocommerce a.button,
main.page .woocommerce input.button,
main.page .woocommerce button.button.alt,
main.page .woocommerce a.button.alt,
main.page .woocommerce input.button.alt,
main.page .woocommerce #respond input#submit {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--white);
  background: var(--ink);
  border: 0;
  border-radius: 0;
  padding: 18px 32px;
  line-height: 1;
  box-shadow: none;
  text-shadow: none;
}

main.page .woocommerce button.button:hover,
main.page .woocommerce a.button:hover,
main.page .woocommerce input.button:hover,
main.page .woocommerce button.button.alt:hover,
main.page .woocommerce a.button.alt:hover,
main.page .woocommerce input.button.alt:hover,
main.page .woocommerce #respond input#submit:hover {
  background: var(--ink);
  color: var(--white);
  opacity: 0.75;
}

main.page .woocommerce .wc-proceed-to-checkout a.checkout-button,
main.page .woocommerce #payment #place_order {
  display: block;
  width: 100%;
  text-align: center;
  padding: 18px 32px;
}

main.page .woocommerce #payment {
  background: var(--paper);
  border-radius: 0;
}

main.page .woocommerce #payment div.payment_box {
  background: transparent;
  border-top: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 12px;
}

main.page .woocommerce #payment div.payment_box::before {
  display: none;
}

main.page .woocommerce #payment ul.payment_methods {
  border-bottom: 1px solid var(--line);
}

main.page .woocommerce .woocommerce-Address-title h3 {
  margin-bottom: 8px;
}

main.page .woocommerce .woocommerce-Address address,
main.page .woocommerce .woocommerce-customer-details address {
  font-family: var(--font-ui);
  font-size: 13px;
  font-style: normal;
  color: var(--ink-2);
  line-height: 1.6;
  border: 0;
  border-radius: 0;
  padding: 0;
}

main.page .woocommerce nav.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

main.page .woocommerce nav.woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--line);
}

main.page .woocommerce nav.woocommerce-MyAccount-navigation li a {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink-2);
  text-decoration: none;
  padding: 14px 0;
}

main.page .woocommerce nav.woocommerce-MyAccount-navigation li.is-active a {
  color: var(--wine);
}

main.page .woocommerce-MyAccount-content > .woocommerce {
  padding-top: 8px;
}

/* --------------------------------------------------------------------------
   23. WordPress admin bar clearance (logged-in preview)
   WordPress renders #wpadminbar fixed at the top and pushes <html> down by
   its own height (32px desktop, 46px at 782px and below) via the admin-bar
   bump styles. The theme's fixed header, menu overlay and bag drawer are
   positioned against the viewport, so without this they slide under the
   admin bar in wp-admin previews and Live Previews. body.admin-bar only
   exists when the admin bar is actually shown, so logged-out visitors are
   unaffected. The menu overlay and bag drawer cover the full viewport; the
   top offset keeps their Close controls clear of the admin bar.
   -------------------------------------------------------------------------- */
body.admin-bar .site-header {
  top: 32px;
}

body.admin-bar .menu {
  top: 32px;
}

body.admin-bar .bag-drawer {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }

  body.admin-bar .menu {
    top: 46px;
  }

  body.admin-bar .bag-drawer {
    top: 46px;
  }
}

/* --------------------------------------------------------------------------
   24. Production CSS leak guard
   Additive only: pins the dimensions of the theme's OWN rendered controls so
   foreign plugin CSS (Elementor/HFE legacy chrome, icon fonts, generic
   svg/img rules) cannot inflate them. Every value below is either the markup
   width/height attribute or an existing size already defined in this file.
   There are deliberately no global svg or img rules here; every selector is
   scoped to theme chrome. The theme ships no svg markup today, so the svg
   ceiling is pure defense.
   -------------------------------------------------------------------------- */

/* Brand marks: signature lockups in the header (markup width=93 height=26)
   and the footer monogram (markup width=60 height=84). */
.site-header .brand__mark {
  width: 93px;
  height: 26px;
}

/* Preserve the approved small-phone signature size (the existing <=480px
   rule uses height 22px with proportional auto width; without this
   restatement the pin above would win the cascade and render the signature
   26px tall on small phones). */
@media (max-width: 480px) {
  .site-header .brand__mark {
    width: auto;
    height: 22px;
  }
}

.site-footer .footer__monogram {
  width: 60px;
  height: 84px;
}

/* Explicit font metrics for the text chrome controls, so foreign button and
   icon rules cannot inflate them. Values match the existing computed style:
   11px, 0.24em tracking, uppercase, and the browser's UA line-height for
   form controls ("normal"). Pinning "normal" explicitly only restates the
   approved computed value while beating generic button rules in the cascade. */
.site-header .menu-btn,
.menu .menu__close,
.bag-drawer .bag-close {
  font-size: 11px;
  line-height: normal;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* Preserve the approved small-phone tracking override (the existing
   <=480px rule uses 0.16em for the header actions; without this restatement
   the higher-in-source pin above would win the cascade). */
@media (max-width: 480px) {
  .site-header .menu-btn,
  .header-actions .nav-link {
    letter-spacing: 0.16em;
  }
}

/* Ceiling for any svg that ever appears inside theme chrome (none ships
   today; this stops the legacy giant-icon failure class if one sneaks in). */
.site-header svg,
.menu svg,
.bag-drawer svg,
.site-footer svg {
  width: 16px;
  height: 16px;
}

/* Bag drawer line-item thumbnails (64px grid, see .bag-item img above). */
.bag-drawer .bag-item img {
  width: 64px;
  height: 64px;
  object-fit: cover;
}

/* PDP desktop gallery: thumbs (64px) and their images, main image, and the
   mobile scroll-snap slide images (all 100% of their sized containers). */
.pdp__thumbs .thumb {
  width: 64px;
  height: 64px;
}

.pdp__thumbs .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp__main .pdp__main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pdp__gallery-mob .pdp__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Home bespoke before/after slider images (100% of the .ba container). */
.bespoke__slider .ba__base,
.bespoke__slider .ba__top-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Shop card imagery: the shop grid and the home season strip share the card
   image classes (100% of the 4/5 .card__media container). */
.grid-shop .card__img,
.season__row .card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}