@charset "UTF-8";
:root {
  --alfia-espresso: #3A230A;
  --alfia-copper: #A4530C;
  --alfia-ivory: #EEE9C1;
  --alfia-sage: #8DA28C;
  --alfia-black: #0A0A09;
  --alfia-white: #FCFBF7;
  --color-bg: var(--alfia-white);
  --color-bg-sage-tint: #DFE1D5;
  --color-text: var(--alfia-espresso);
  --color-text-muted: #6E5A42;
  --color-accent: var(--alfia-copper);
  --color-accent-soft: var(--alfia-sage);
  --color-dark-surface: #2A2018;
  --color-inverse-text: var(--alfia-ivory);
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  /* Type scale — UI text, set in --font-body.
     Nine fixed steps. Before this the stylesheets carried 36 distinct sizes,
     including six fractional ones (9.5/10.5/11.5/12.5/13.5/15.5px) crowded into
     the same few pixels, which read as noise rather than hierarchy. */
  --text-3xs: 10px;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 15px;
  --text-xl: 16px;
  --text-2xl: 18px;
  --text-3xl: 20px;
  /* Type scale — display headings, set in --font-display.
     Every step is fluid, so headings shrink on a phone without per-component
     media queries. These six replace twelve near-identical clamp() expressions
     that differed only by a couple of px at each end. */
  --display-2xs: clamp(18px, 1.9vw, 22px);
  --display-xs: clamp(20px, 2.2vw, 26px);
  --display-sm: clamp(22px, 3vw, 30px);
  --display-md: clamp(27px, 3.4vw, 40px);
  --display-lg: clamp(31px, 4.5vw, 50px);
  --display-xl: clamp(38px, 6vw, 64px);
  /* Tracking. Cormorant is loose by nature and needs almost none; the small
     uppercase labels in --font-body carry the wide settings. */
  --tracking-tight: 0.01em;
  --tracking-normal: 0.03em;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.14em;
  --tracking-label: 0.18em;
  /* Form controls.
     Mobile Safari zooms the page in whenever a focused control is set below
     16px and never zooms back out, so on a phone this is a functional value,
     not a stylistic one. Everything that sizes an input reads this token
     rather than the type scale. */
  --input-font-size: var(--text-md);
  --container-max: 1440px;
  --container-narrow: 1140px;
  --editorial-max: 640px;
  --gutter: clamp(20px, 4vw, 64px);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 180ms;
  --duration-base: 280ms;
  --duration-slow: 350ms;
  --hairline: 1px solid rgba(58, 35, 10, 0.14);
  --hairline-inverse: 1px solid rgba(238, 233, 193, 0.18);
}

@media (max-width: 767px) {
  :root {
    --input-font-size: 16px;
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-xl);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

button:disabled {
  opacity: 0.3;
  cursor: default;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
}

p {
  margin: 0;
}

blockquote {
  margin: 0;
}

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

.visually-hidden,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
}

.text-link {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--duration-base) var(--ease);
}

.text-link:hover, .text-link:focus-visible {
  background-size: 100% 1px;
}

.text-link {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text);
}

.text-link--inverse {
  color: var(--color-bg);
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -48px;
  background: var(--color-text);
  color: var(--color-bg);
  padding: 12px 20px;
  z-index: 999;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  transition: top var(--duration-fast) var(--ease);
}

.skip-link:focus {
  top: var(--space-3);
}

.announcement {
  background: var(--color-dark-surface);
  color: rgba(238, 233, 193, 0.85);
  padding-block: 10px;
}

.announcement__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: block;
  text-align: center;
}

@media (min-width: 768px) {
  .announcement__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-3);
  }
}
.announcement__spacer {
  display: block;
}

.announcement__text {
  justify-self: center;
  text-align: center;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
}

@media (min-width: 768px) {
  .announcement__text {
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wider);
    white-space: nowrap;
  }
}
.announcement__locale {
  justify-self: end;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: rgba(238, 233, 193, 0.55);
  display: none;
}

@media (min-width: 768px) {
  .announcement__locale {
    display: block;
  }
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: var(--hairline);
  transition: box-shadow var(--duration-base) var(--ease);
}

.site-header.is-scrolled {
  box-shadow: 0 1px 0 rgba(58, 35, 10, 0.08);
}

.site-header__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 84px;
  gap: var(--space-4);
}

.primary-nav {
  display: none;
}

@media (min-width: 1024px) {
  .primary-nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }
}
.primary-nav__link {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--duration-base) var(--ease);
}

.primary-nav__link:hover, .primary-nav__link:focus-visible {
  background-size: 100% 1px;
}

.primary-nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-mark {
  grid-column: 2;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.brand-mark .brand-mark__arabic {
  height: 20px;
  width: auto;
  margin-bottom: 5px;
}

.brand-mark .brand-mark__wordmark {
  height: 13px;
  width: auto;
}

.header-actions {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: var(--space-5);
}

.header-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-text);
  transition: color var(--duration-fast) var(--ease);
  /* The icons are 17px; without a padded box the tap target is 17px too,
     which is well under the 44px a thumb needs. Pad outwards and pull the
     row back in with a negative margin so the header rhythm is unchanged. */
  min-height: 44px;
  min-width: 44px;
  margin-block: -13px;
}

.header-actions__btn:hover {
  color: var(--color-accent);
}

/* On a phone the bar carries the menu, the logo and the bag — nothing else.
   Search and Account live in the drawer until there is room for them, so the
   three remaining targets can be generously spaced instead of crowded.
   The elements stay in the DOM: #search-open is what theme.js binds the
   search overlay to. */
.header-actions__btn--collapse {
  display: none;
}

@media (min-width: 1024px) {
  .header-actions__btn--collapse {
    display: inline-flex;
  }
}
/* Bag count. The written "Bag (n)" label only appears from 1024px, so on a
   phone the icon carries a badge instead — otherwise the bar gives no sign
   there is anything in the bag. */
.header-actions__btn--bag {
  position: relative;
}

.header-actions__badge {
  position: absolute;
  /* The button is a 44px tap target around a 24px icon; offset to the icon's
     shoulder rather than the corner of the box, or the badge reads as a
     separate floating element. */
  top: 1px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding-inline: 4px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--alfia-white);
  font-size: var(--text-3xs);
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

.header-actions__badge[data-empty=true] {
  display: none;
}

@media (min-width: 1024px) {
  .header-actions__badge {
    display: none;
  }
}
.header-actions__btn svg {
  /* 17px suits the desktop bar, where each icon sits beside a text label.
     On a phone the bar is down to three glyphs with nothing to read, so the
     icons have to carry it themselves at that size. */
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .header-actions__btn svg {
    width: 17px;
    height: 17px;
  }
}
.header-actions__label {
  display: none;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-normal);
}

@media (min-width: 1024px) {
  .header-actions__label {
    display: inline;
  }
}
.header-actions__menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: calc(-1 * var(--space-2));
}

.header-actions__menu-toggle svg {
  /* Matches the bag at the other end of the bar; at 20 against 24 the two
     sides read as different weights. */
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
}

@media (min-width: 1024px) {
  .header-actions__menu-toggle {
    display: none;
  }
}
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
}

.mobile-nav[data-open=true] {
  visibility: visible;
}

.mobile-nav[data-open=true] .mobile-nav__scrim {
  opacity: 1;
}

.mobile-nav[data-open=true] .mobile-nav__panel {
  transform: translateX(0);
}

.mobile-nav__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 9, 0.45);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease);
}

.mobile-nav__panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: min(86vw, 360px);
  background: var(--color-bg);
  transform: translateX(-100%);
  transition: transform var(--duration-slow) var(--ease);
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-5) var(--space-6);
}

.mobile-nav__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
}

.mobile-nav__close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mobile-nav__close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
}

.mobile-nav__search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 48px;
  margin-bottom: var(--space-5);
  padding: 0 var(--space-3);
  border: var(--hairline);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-muted);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-normal);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}

.mobile-nav__search:hover, .mobile-nav__search:focus-visible {
  border-color: var(--color-text);
  color: var(--color-text);
}

.mobile-nav__search svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .mobile-nav__search {
    display: none;
  }
}
.mobile-nav__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mobile-nav__link {
  font-family: var(--font-display);
  font-size: var(--display-2xs);
  color: var(--color-text);
}

.mobile-nav__footer {
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  visibility: hidden;
  background: rgba(10, 10, 9, 0.5);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease);
}

.search-overlay[data-open=true] {
  visibility: visible;
  opacity: 1;
}

.search-overlay[data-open=true] .search-overlay__panel {
  transform: translateY(0);
  opacity: 1;
}

.search-overlay__panel {
  background: var(--color-bg);
  padding: var(--space-7) var(--gutter);
  transform: translateY(-16px);
  opacity: 0;
  transition: transform var(--duration-slow) var(--ease), opacity var(--duration-slow) var(--ease);
}

.search-overlay__inner {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.search-overlay__close {
  position: absolute;
  top: var(--space-4);
  right: var(--gutter);
  /* .search-overlay__panel is transformed, which promotes it into the
     positioned-paint layer; being later in the markup it covered this button,
     so the X was unclickable and the overlay could only be dismissed with
     Escape — i.e. not at all on a phone. */
  z-index: 1;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.search-overlay__close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
}

.search-overlay__label {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--space-3);
}

.search-overlay__field {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  border-bottom: 1px solid var(--color-text);
  padding-bottom: var(--space-3);
}

.search-overlay__input {
  flex: 1;
  border: none;
  background: none;
  font-family: var(--font-display);
  font-size: var(--display-md);
  color: var(--color-text);
  width: 100%;
}

.search-overlay__input::placeholder {
  color: var(--color-text-muted);
}

.search-overlay__input:focus {
  outline: none;
}

.search-overlay__suggestions {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
}

.search-overlay__suggestion {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}

.search-overlay__suggestion .search-overlay__thumb {
  width: 52px;
  height: 66px;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--alfia-ivory);
}

.search-overlay__meta {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.search-overlay__name {
  font-size: var(--text-lg);
  font-weight: 500;
}

.search-overlay__price {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* The hero is cropped from a 16:9 campaign frame (1672x941), so a phone and a
   desktop are two different pictures, not one picture at two sizes. The model
   stands at roughly 66-88% across the plate with empty wall to her left: on a
   wide screen that wall is where the copy goes, on a portrait screen it is all
   you would see.

   On a phone the picture and the copy no longer overlap at all.

   They used to, with the copy at the foot of the frame over a cream scrim, and
   that could not be made to look good at this copy length. The block runs a
   collection tag, a two-line display headline, three lines of supporting copy
   and a button: ~365px of a ~578px hero. A scrim behind it has to cover about
   three quarters of the picture, and to keep dark text legible it has to sit
   near 0.95 alpha for most of that run. The result was the worst of both --
   opaque enough that the photograph had stopped being a photograph, sheer
   enough that the garment ghosted through the ramp as a grey haze.

   Splitting them gives the picture a clean full-bleed frame and the copy a
   solid background, and takes the gradient off the phone layout entirely.
   It is also the only version that survives a long translation: the copy block
   can grow to any height without eating further into the image.

   A wide screen is a genuinely different composition -- the model sits right,
   the copy sits on the empty wall to her left -- so the overlay and its
   side-to-side wash are kept there, unchanged. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg);
}

@media (min-width: 1024px) {
  .hero {
    flex-direction: row;
    align-items: center;
    min-height: 82vh;
  }
}
.hero__image {
  width: 100%;
  /* svh so the frame does not resize when the URL bar hides mid-scroll. The
     floor keeps it from collapsing on a landscape phone; the ceiling stops it
     pushing the headline off the first screen on a tall one. flex: none
     because as a flex item it would otherwise shrink below this. */
  flex: none;
  /* 56svh put the headline across the fold on a 390x760 screen: the picture
     ended at 612px of a 574px run and "Made Timeless." was sliced in half.
     44svh keeps the frame generous while landing the tag, the headline and the
     supporting copy above the fold, with only the button below it -- which is
     the part that benefits from inviting a scroll. */
  height: clamp(300px, 44svh, 460px);
  object-fit: cover;
  /* A 16:9 plate in this box is still scaled to fit the height, so the whole
     figure is in frame top to bottom and only the sides are cut. The surviving
     window is ~52% of the plate's width; at 95% it spans roughly 46-98%, which
     centres the model and keeps a little of the lit wall to her left. */
  /* The y value does nothing while the crop is height-driven, which is every
     portrait phone. It is here for the cases where the frame is wider than
     16:9 and the crop flips to the top and bottom -- a phone held sideways,
     mainly -- where centring it cut the model off at the shoulders. */
  object-position: 95% 30%;
}

/* Between the phone frame and the desktop overlay there is a band where the
   frame is wide but still short, so the 16:9 plate is scaled to fit the width
   and the crop flips from the sides to the top and bottom. At 768px that threw
   away the top 21% of the plate and the hero became a photograph of a garment
   with no head on it. Giving the frame a 4:3 shape here keeps it narrower than
   the plate, so the crop stays on the sides and the whole figure stays in. */
@media (min-width: 560px) and (max-width: 1023px) {
  .hero__image {
    height: auto;
    aspect-ratio: 4/3;
    max-height: 72svh;
    object-position: 85% 30%;
  }
}
@media (min-width: 1024px) {
  .hero__image {
    position: absolute;
    inset: 0;
    height: 100%;
    object-position: center 35%;
  }
}
/* No scrim on a phone: nothing overlaps the picture there. On a wide screen
   the copy sits over the pale wall and still needs the wash, which runs
   side to side rather than bottom to top. */
.hero::before {
  content: none;
  position: absolute;
  inset: 0;
  /* .hero__image is positioned with z-index:auto and comes later in the
     markup, so a scrim at z-index 0 paints underneath it. */
  z-index: 1;
}

@media (min-width: 1024px) {
  .hero::before {
    content: "";
    background: linear-gradient(100deg, rgba(252, 251, 247, 0.74) 0%, rgba(252, 251, 247, 0.32) 42%, rgba(252, 251, 247, 0) 68%);
  }
}
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  /* Tighter on a phone: four stacked items at 24px apart pushed the CTA a
     screen-height away from the headline it belongs to. */
  gap: var(--space-3);
  width: 100%;
  max-width: 460px;
  padding: var(--space-4) var(--gutter) var(--space-6);
}

@media (min-width: 1024px) {
  .hero__content {
    gap: var(--space-4);
    width: auto;
    padding: var(--space-6) var(--gutter);
  }
}
.hero__collection-tag {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
}

.hero__headline {
  font-size: var(--display-xl);
  color: var(--color-text);
}

.hero__copy {
  /* 38ch overran the gutter on a 390px screen. */
  max-width: 34ch;
  color: var(--color-text);
  font-size: var(--text-lg);
}

@media (min-width: 1024px) {
  .hero__copy {
    max-width: 38ch;
  }
}
.hero__cta {
  /* The only call to action on the first screen, and as a bare text link it was
     a 12px-tall target. 44px is the smallest box that is reliably tappable —
     and the box's own height is the separation from the copy above it, so no
     margin on top of it here. */
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
}

@media (min-width: 1024px) {
  .hero__cta {
    display: inline-block;
    align-self: auto;
    min-height: 0;
    margin-top: var(--space-2);
  }
}
.hero__vertical-label {
  position: absolute;
  right: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-bg);
}

@media (min-width: 1280px) {
  .hero__vertical-label {
    display: flex;
  }
}
.hero__vertical-label span {
  writing-mode: vertical-rl;
  font-size: var(--text-3xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.signature {
  text-align: center;
  padding: var(--space-8) var(--gutter) var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.signature__arabic {
  height: 60px;
  width: auto;
  margin-bottom: var(--space-2);
}

.signature__wordmark {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  color: var(--color-text);
}

.signature__tagline {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-text);
  line-height: 1.4;
}

.signature__rule {
  width: 32px;
  height: 1px;
  background: var(--color-accent);
  margin-top: var(--space-4);
}

.section {
  padding-block: clamp(56px, 10vw, 96px);
}

.section--sage {
  background: var(--color-bg-sage-tint);
}

.section__header {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.section-label {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.section__viewall {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.content-well {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section--page {
  padding-block: var(--space-5) clamp(56px, 10vw, 96px);
}

.prose {
  max-width: var(--editorial-max);
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--color-text-muted);
}

.prose > * + * {
  margin-top: var(--space-4);
}

.prose h2,
.prose h3,
.prose h4 {
  margin-top: var(--space-6);
  color: var(--color-text);
}

.prose h2 {
  font-size: var(--display-sm);
}

.prose h3 {
  font-size: var(--display-2xs);
}

.prose h4 {
  font-size: var(--text-2xl);
}

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

.prose a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose ul,
.prose ol {
  padding-left: 1.25em;
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li + li {
  margin-top: var(--space-2);
}

.prose blockquote {
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent-soft);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1.45;
  color: var(--color-text);
}

.prose img {
  margin-block: var(--space-5);
}

.prose hr {
  margin-block: var(--space-6);
  border: none;
  border-top: var(--hairline);
}

.prose code {
  padding: 2px 6px;
  background: var(--color-bg-sage-tint);
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}

.empty-state {
  max-width: var(--editorial-max);
}

.empty-state__title {
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--display-sm);
}

.empty-state__copy {
  margin-bottom: var(--space-5);
  color: var(--color-text-muted);
}

.post-list {
  display: flex;
  flex-direction: column;
  max-width: var(--editorial-max);
}

.post-card__title {
  font-size: var(--display-xs);
  margin-bottom: var(--space-2);
}

.post-card__title a:hover,
.post-card__title a:focus-visible {
  color: var(--color-accent);
}

.post-card__meta {
  margin-bottom: var(--space-3);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.post-card__excerpt {
  color: var(--color-text-muted);
  line-height: 1.7;
}

.post-card__excerpt p {
  margin-bottom: var(--space-3);
}

.post-card + .post-card {
  padding-top: var(--space-6);
  border-top: var(--hairline);
}

.navigation.pagination {
  margin-top: var(--space-7);
}

.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.navigation.pagination .page-numbers {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.navigation.pagination .page-numbers.current {
  color: var(--color-accent);
}

.carousel__controls {
  display: none;
  align-items: center;
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .carousel__controls {
    display: flex;
  }
}
.carousel__btn {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(58, 35, 10, 0.25);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}

.carousel__btn:not(:disabled):hover {
  border-color: var(--color-text);
  color: var(--color-accent);
}

.carousel__btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}

.carousel__track {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

.carousel__track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--gutter);
  padding-bottom: 4px;
}

.carousel__track > .product-card {
  scroll-snap-align: start;
  flex: 0 0 calc(50% - var(--space-4) / 2);
}

/* A row sized for two leaves a card-shaped hole next to a section that only
   has one product in it, which reads as a failed load rather than a choice.
   Let a lone card take the row, capped so it does not become a billboard on
   a wide screen. */
.carousel__track > .product-card:only-child {
  flex-basis: 100%;
  max-width: 420px;
}

@media (min-width: 768px) {
  .carousel__track--four > .product-card {
    flex-basis: calc(33.333% - var(--space-4) * 2 / 3);
  }
}
@media (min-width: 1024px) {
  .carousel__track--four > .product-card {
    flex-basis: calc(25% - var(--space-4) * 3 / 4);
  }
}
@media (min-width: 768px) {
  .carousel__track--three > .product-card {
    flex-basis: calc(33.333% - var(--space-4) * 2 / 3);
  }
}
.product-card {
  display: flex;
  flex-direction: column;
}

.product-card__media {
  position: relative;
  aspect-ratio: 3/4;
  margin-bottom: var(--space-3);
  background: var(--alfia-ivory);
  overflow: hidden;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--duration-slow) var(--ease);
}

.product-card__link:hover .product-card__media img, .product-card__link:focus-visible .product-card__media img {
  transform: scale(1.035);
}

.product-card__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text);
}

.product-card__price {
  margin-top: 4px;
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

/* A discounted price comes out of WooCommerce as <del>old</del><ins>new</ins>.
   Neither element was styled anywhere in the theme, so <ins> arrived with the
   browser's default underline and both prices sat in the same muted colour:
   the new price read as a link and had no more weight than the one it
   replaces. The new price is the one that matters. These live here rather than
   on `.price` alone because the markup appears in the grid card, on the
   product page and in the cart. */
.product-card__price del,
.product-info__price del,
.price del {
  margin-right: var(--space-2);
  color: var(--color-text-muted);
  opacity: 0.65;
  text-decoration-thickness: 1px;
}

.product-card__price ins,
.product-info__price ins,
.price ins {
  text-decoration: none;
  background: none;
  color: var(--color-text);
}

.product-card__fulfillment {
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.product-card__pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(58, 35, 10, 0.3);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text);
}

.product-card__lead {
  color: var(--color-accent);
}

.editorial {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .editorial {
    grid-template-columns: 60% 40%;
  }
}
@media (min-width: 1024px) {
  .editorial--reverse {
    grid-template-columns: 40% 60%;
  }
  .editorial--reverse .editorial__image {
    order: 2;
  }
  .editorial--reverse .editorial__content {
    order: 1;
  }
}
.editorial__image {
  width: 100%;
  height: 360px;
  object-fit: cover;
  /* Same 16:9 campaign plate as the hero, and the same crop problem on a
     phone: stacked above the copy the band keeps only ~59% of the plate's
     width, and centred that window ends at 79% — just short of the model, so
     the band showed her train and a wall. Pushed right she is in the frame. */
  object-position: 100% center;
}

@media (min-width: 1024px) {
  .editorial__image {
    height: 100%;
    min-height: 520px;
    /* Side by side the image is tall and narrow, so the plate is cropped on
       width instead and the default centre is right. */
    object-position: center;
  }
}
/* A <video> in the band takes the same box as the picture, so it carries
   .editorial__image too and only needs what differs. object-position on that
   class is tuned for the campaign plate, where the model stands off to one
   side; an arbitrary video has no such framing and centring is the only safe
   default. object-fit works on a video element exactly as it does on an img. */
.editorial__video {
  object-position: center;
  /* Without an explicit background the element is transparent for as long as
     it takes the first frame to arrive, so the copy's cream shows through and
     the band flashes empty on a slow connection. */
  background: var(--color-bg-sage-tint);
}

/* Side by side, the band's height is meant to be governed by the copy, with a
   520px floor. A picture never challenged that: the 16:9 plate in a ~760px
   column wants ~430px and the floor wins. A portrait clip does -- 9:16 at that
   width wants to be ~1350px tall, and because the grid row is auto-sized the
   whole band grew to match and dragged the copy into the middle of nowhere.
   Capping the video's height takes its intrinsic ratio back out of the row
   calculation. It is scoped to the video so the image path is provably
   untouched. */
@media (min-width: 1024px) {
  .editorial__video {
    max-height: 680px;
  }
}
.editorial__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--gutter);
  background: var(--color-bg);
}

.editorial__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
}

.editorial__title {
  font-size: var(--display-md);
  max-width: 14ch;
}

.editorial__copy {
  max-width: var(--editorial-max);
  color: var(--color-text-muted);
}

.preorder {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 1024px) {
  .preorder {
    grid-template-columns: 32fr 68fr;
    gap: var(--space-7);
  }
}
.preorder__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

.preorder__title {
  font-size: var(--display-md);
}

.preorder__copy {
  color: var(--color-text-muted);
  max-width: 32ch;
  margin-bottom: var(--space-2);
}

.preorder__steps {
  display: grid;
  /* Three columns on a 320-390px screen leaves ~75px per step, which breaks
     the copy into four ragged lines ("Select a / piece / marked / Made to").
     Stack until there is room to set them side by side. */
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: start;
  text-align: center;
  gap: var(--space-5);
}

@media (min-width: 560px) {
  .preorder__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}
@media (min-width: 768px) {
  .preorder__steps {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  }
}
.preorder__connector {
  display: none;
}

@media (min-width: 768px) {
  .preorder__connector {
    display: block;
    width: 40px;
    height: 1px;
    background: rgba(58, 35, 10, 0.22);
    align-self: center;
    margin-top: -26px;
  }
}
.preorder__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.preorder__step-index {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

.preorder__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(58, 35, 10, 0.3);
  border-radius: 50%;
  margin-block: var(--space-1);
}

.preorder__icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-text);
  fill: none;
  stroke-width: 1.3;
}

.preorder__step-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
}

.preorder__step-copy {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 22ch;
}

.coming-soon {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .coming-soon {
    grid-template-columns: 35% 65%;
    min-height: 420px;
  }
}
.coming-soon__image {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

@media (min-width: 768px) {
  .coming-soon__image {
    height: 100%;
  }
}
.coming-soon__panel {
  position: relative;
  background: var(--color-dark-surface);
  color: var(--color-inverse-text);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  justify-content: center;
  padding: var(--space-7) var(--gutter);
  overflow: hidden;
}

.coming-soon__title {
  font-size: var(--display-lg);
  letter-spacing: var(--tracking-wide);
  color: var(--color-bg);
  text-transform: uppercase;
}

.coming-soon__copy {
  color: rgba(238, 233, 193, 0.8);
}

.coming-soon__date {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(238, 233, 193, 0.6);
}

.coming-soon__panel .text-link {
  margin-top: var(--space-4);
}

.quote {
  text-align: center;
  padding: var(--space-8) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.quote__text {
  font-family: var(--font-display);
  font-size: var(--display-sm);
  max-width: 20ch;
  line-height: 1.4;
}

.quote__rule {
  width: 28px;
  height: 1px;
  background: var(--color-accent);
  margin-top: var(--space-5);
}

.quote .quote__arabic {
  height: 26px;
  width: auto;
  margin-top: var(--space-5);
}

.quote__wordmark {
  margin-top: var(--space-2);
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
}

.quote__copy {
  margin-top: var(--space-4);
  max-width: 46ch;
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

.tiles {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}
.tiles__item {
  position: relative;
  margin: 0;
  height: 320px;
  overflow: hidden;
}

.tiles__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tiles__item figcaption {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  color: var(--color-bg);
  font-size: var(--text-sm);
}

.tiles__item figcaption span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
  color: var(--alfia-ivory);
  margin-bottom: 4px;
}

.tiles__item::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Ivory caption text over the pale images ("Material", "Movement") sat at
     roughly 2:1. Deepen the foot of the scrim and carry it further up so the
     caption reads on the light frames as well as the dark ones. */
  background: linear-gradient(0deg, rgba(10, 10, 9, 0.78), rgba(10, 10, 9, 0.28) 38%, transparent 68%);
}

.tiles__item figcaption {
  z-index: 1;
}

.site-footer {
  background: var(--color-dark-surface);
  color: var(--color-inverse-text);
  padding-top: var(--space-8);
}

.site-footer__top {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-7);
}

@media (min-width: 768px) {
  .site-footer__top {
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: var(--space-5);
  }
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-footer__brand .site-footer__arabic {
  height: 34px;
  width: auto;
  margin-bottom: var(--space-3);
  image-rendering: -webkit-optimize-contrast;
}

.site-footer__brand .site-footer__brand-mark {
  height: 17px;
  width: auto;
}

.site-footer__brand-copy {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  max-width: 30ch;
  color: rgba(238, 233, 193, 0.72);
}

.site-footer__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.site-footer__social a {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(238, 233, 193, 0.3);
  border-radius: 50%;
  color: rgba(238, 233, 193, 0.85);
  transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}

.site-footer__social a:hover {
  border-color: var(--alfia-ivory);
  color: var(--alfia-ivory);
}

.site-footer__social a svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
}

.site-footer__heading {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
  color: rgba(238, 233, 193, 0.5);
  margin-bottom: var(--space-4);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__link {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--duration-base) var(--ease);
}

.site-footer__link:hover, .site-footer__link:focus-visible {
  background-size: 100% 1px;
}

.site-footer__link {
  font-size: var(--text-md);
  color: rgba(238, 233, 193, 0.88);
}

.site-footer__newsletter {
  border-top: var(--hairline-inverse);
}

.site-footer__newsletter-inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-footer__newsletter-label {
  font-family: var(--font-display);
  font-size: var(--text-xl);
}

.site-footer__newsletter-form {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border-bottom: 1px solid rgba(238, 233, 193, 0.3);
  padding-bottom: 6px;
  flex: 1;
  max-width: 360px;
  min-width: 220px;
}

.site-footer__newsletter-form input {
  flex: 1;
  background: none;
  border: none;
  color: var(--alfia-ivory);
  font-size: var(--input-font-size);
}

.site-footer__newsletter-form input::placeholder {
  color: rgba(238, 233, 193, 0.5);
}

.site-footer__newsletter-form input:focus {
  outline: none;
}

.site-footer__newsletter-form button {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--alfia-ivory);
  white-space: nowrap;
}

.site-footer__bottom {
  border-top: var(--hairline-inverse);
}

.site-footer__bottom-inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-4);
  font-size: var(--text-xs);
  color: rgba(238, 233, 193, 0.55);
}

.site-footer__legal {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* On a phone this block is pure chrome standing between the customer and the
   products: at 64/48 it pushed the first row of the grid to 593px down a
   770px screen, so a listing page opened on no merchandise at all. The
   generous setting is a desktop one and stays there. */
.page-header {
  padding-block: var(--space-5) var(--space-4);
  border-bottom: var(--hairline);
}

@media (min-width: 1024px) {
  .page-header {
    padding-block: var(--space-7) var(--space-6);
  }
}
.page-header__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.page-header__title {
  font-size: var(--display-lg);
  max-width: 18ch;
}

.page-header__copy {
  color: var(--color-text-muted);
  max-width: var(--editorial-max);
  font-size: var(--text-lg);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.breadcrumb a {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--duration-base) var(--ease);
}

.breadcrumb a:hover, .breadcrumb a:focus-visible {
  background-size: 100% 1px;
}

.breadcrumb a {
  color: var(--color-text-muted);
}

.breadcrumb span[aria-current] {
  color: var(--color-text);
}

.shop__toolbar {
  padding-block: var(--space-3);
  border-bottom: var(--hairline);
}

@media (min-width: 1024px) {
  .shop__toolbar {
    padding-block: var(--space-4);
  }
}
.shop__toolbar-inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.shop__count {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.shop__toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.shop__filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid rgba(58, 35, 10, 0.3);
  padding: 10px 16px;
  transition: border-color var(--duration-fast) var(--ease);
}

.shop__filter-toggle svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
}

.shop__filter-toggle:hover {
  border-color: var(--color-text);
}

@media (min-width: 1024px) {
  .shop__filter-toggle {
    display: none;
  }
}
.shop__sort {
  position: relative;
  z-index: 12;
}

.shop__sort-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0;
  list-style: none;
  cursor: pointer;
  font-size: var(--text-xs);
  white-space: nowrap;
}
.shop__sort-trigger::-webkit-details-marker {
  display: none;
}
.shop__sort-trigger:hover {
  color: var(--color-accent);
}
.shop__sort-trigger [data-sort-label] {
  font-weight: 500;
}

.shop__sort-prefix {
  color: var(--color-text-muted);
}

.shop__sort svg {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shop__sort .shop__sort-icon {
  margin-right: 3px;
}

.shop__sort-chevron {
  transition: transform var(--duration-fast) var(--ease);
}

.shop__sort[open] .shop__sort-chevron {
  transform: rotate(180deg);
}

.shop__sort-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  width: min(208px, 100vw - 2 * var(--gutter));
  padding: 4px;
  border: var(--hairline);
  border-radius: 2px;
  background: var(--color-bg);
  box-shadow: 0 6px 20px rgba(58, 35, 10, 0.09);
}

.shop__sort-options {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.shop__sort-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  cursor: pointer;
}
.shop__sort-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.shop__sort-option:hover, .shop__sort-option:has(input:checked) {
  background: #f0ede2;
}
.shop__sort-option:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
.shop__sort-option input:checked ~ .shop__sort-check {
  opacity: 1;
}

.shop__sort-copy {
  flex: 1;
  font-size: var(--text-xs);
  font-weight: 400;
}

.shop__sort-check {
  opacity: 0;
  color: var(--color-accent);
}

.shop__sort-apply {
  padding: 10px;
  width: 100%;
  font-size: var(--text-xs);
}

.shop__sort.is-enhanced .shop__sort-apply {
  display: none;
}

.shop__sort-trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.active-filters {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: var(--space-3);
}

.active-filters[hidden] {
  display: none;
}

.active-filters__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  border: 1px solid rgba(58, 35, 10, 0.3);
  padding: 6px 8px 6px 12px;
  color: var(--color-text);
}

.active-filters__chip button {
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease);
}

.active-filters__chip button:hover {
  color: var(--color-accent);
}

.active-filters__chip button svg {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.active-filters__clear {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--duration-base) var(--ease);
}

.active-filters__clear:hover, .active-filters__clear:focus-visible {
  background-size: 100% 1px;
}

.active-filters__clear {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.shop__layout {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-4) var(--space-7);
}

@media (min-width: 1024px) {
  .shop__layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-7);
    align-items: start;
    padding-block: var(--space-6) var(--space-8);
  }
}
.filter-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
}

.filter-panel[data-open=true] {
  visibility: visible;
}

.filter-panel[data-open=true] .filter-panel__scrim {
  opacity: 1;
}

.filter-panel[data-open=true] .filter-panel__panel {
  transform: translateX(0);
}

.filter-panel__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 9, 0.45);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease);
}

.filter-panel__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(88vw, 380px);
  background: var(--color-bg);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease);
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  /* The drawer itself does not scroll; the list of options inside it does, so
     Clear All / View Results stay pinned to the foot and in reach. With the
     whole panel scrolling, giving the option rows a 44px tap target was
     enough to push the apply button off the bottom of a phone screen. */
  overflow: hidden;
}

.filter-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.filter-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
}

.filter-panel__close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: calc(-1 * var(--space-2));
}

.filter-panel__close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
}

.filter-panel__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  flex: 1;
  /* A flex item will not shrink below its content without this, which would
     hand the overflow back to the panel. */
  min-height: 0;
  overflow-y: auto;
}

.filter-panel__footer {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: var(--hairline);
  flex-shrink: 0;
}

.filter-panel__footer button {
  flex: 1;
  padding: 13px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
  transition: opacity var(--duration-fast) var(--ease);
}

.filter-panel__clear {
  border: 1px solid rgba(58, 35, 10, 0.3);
}

.filter-panel__apply {
  background: var(--color-text);
  color: var(--color-bg);
}

@media (min-width: 1024px) {
  .filter-panel {
    position: static;
    inset: auto;
    z-index: auto;
    visibility: visible !important;
  }
  .filter-panel__scrim {
    display: none;
  }
  .filter-panel__panel {
    position: static;
    width: auto;
    height: auto;
    transform: none !important;
    padding: 0;
    overflow: visible;
  }
  .filter-panel__header {
    display: none;
  }
  .filter-panel__form {
    overflow: visible;
  }
  .filter-panel__footer {
    border-top: none;
    padding-top: var(--space-2);
    margin-top: 0;
  }
  .alfia-js .filter-panel__apply {
    display: none;
  }
  .filter-panel__clear {
    flex: none;
    border: none;
    padding: 0;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.filter-group {
  border: 0;
  margin: 0;
  padding: 0;
  padding-bottom: var(--space-4);
  border-bottom: var(--hairline);
}

.filter-group:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.filter-group legend {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
  padding: 0;
  margin-bottom: var(--space-3);
}

.filter-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-md);
  padding-block: 6px;
  cursor: pointer;
}

.filter-option__input {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  top: 4px;
  left: 0;
  cursor: pointer;
}

.filter-option__box {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1px solid rgba(58, 35, 10, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}

.filter-option__box::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--color-bg);
  transform: scale(0);
  transition: transform var(--duration-fast) var(--ease);
}

.filter-option__input:checked + .filter-option__box {
  background: var(--color-text);
  border-color: var(--color-text);
}

.filter-option__input:checked + .filter-option__box::after {
  transform: scale(1);
}

.filter-option__input:focus-visible + .filter-option__box {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

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

.swatch {
  position: relative;
  cursor: pointer;
}

.swatch__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.swatch--text .swatch__face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 36px;
  padding-inline: 10px;
  border: 1px solid rgba(58, 35, 10, 0.3);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}

.swatch--text .swatch__input:checked + .swatch__face {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}

.swatch--color {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 54px;
}

.swatch--color .swatch__face {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--swatch-color, var(--alfia-ivory));
  border: 1px solid rgba(58, 35, 10, 0.18);
  box-shadow: 0 0 0 2px var(--color-bg) inset;
  transition: box-shadow var(--duration-fast) var(--ease);
}

.swatch--color .swatch__input:checked + .swatch__face {
  box-shadow: 0 0 0 2px var(--color-bg) inset, 0 0 0 1.5px var(--color-text);
}

.swatch__input:focus-visible + .swatch__face {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.swatch__name {
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-muted);
  text-align: center;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-6);
}

@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1280px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.product-grid .product-card[hidden] {
  display: none;
}

.product-card__category {
  margin-top: 2px;
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.product-card__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 1;
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 5px 10px;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid rgba(58, 35, 10, 0.18);
}

.product-card__badge--new {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

.product-card__badge--soldout {
  color: var(--color-text-muted);
}

.product-card--soldout .product-card__media img {
  opacity: 0.5;
  filter: grayscale(15%);
}

.product-card__fulfillment--soldout {
  color: var(--color-text-muted);
  font-style: italic;
}

.shop__empty {
  padding: var(--space-8) var(--gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.shop__empty[hidden] {
  display: none;
}

.shop__empty-title {
  font-family: var(--font-display);
  font-size: var(--display-2xs);
}

.shop__empty-copy {
  color: var(--color-text-muted);
  max-width: 40ch;
  font-size: var(--text-md);
}

/* ---- Pagination ---------------------------------------------------------------
   Numbered pages, not infinite scroll: every page is its own URL, so a result
   can be linked to and the back button behaves. woocommerce_pagination() emits
   <nav class="woocommerce-pagination"><ul class="page-numbers">. */
.shop__pagination {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--hairline);
}

.shop__pagination .woocommerce-pagination {
  justify-content: center;
}

.shop__pagination .woocommerce-pagination ul,
.shop__pagination ul.page-numbers {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}

.shop__pagination li {
  margin: 0;
}

.shop__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding-inline: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}

.shop__pagination a.page-numbers:hover,
.shop__pagination a.page-numbers:focus-visible {
  color: var(--color-text);
  border-color: rgba(58, 35, 10, 0.3);
}

.shop__pagination .page-numbers.current {
  border-color: var(--color-text);
  color: var(--color-text);
}

.shop__pagination .page-numbers.dots {
  min-width: 0;
  padding-inline: 2px;
  border-color: transparent;
}

.shop__pagination .page-numbers.prev,
.shop__pagination .page-numbers.next {
  padding-inline: var(--space-3);
}

/* ---- Async loading state ------------------------------------------------------
   The results region is swapped in place, so it is dimmed rather than emptied —
   the grid keeps its height and the page does not jump while a request is out. */
.shop__main.is-loading {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .shop__main.is-loading {
    transition: none;
  }
}
.product-detail {
  padding-block: var(--space-5) var(--space-9);
}

.product-detail__breadcrumb-row {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: var(--space-5);
}

.product-layout {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .product-layout {
    grid-template-columns: minmax(0, 60%) 1fr;
    gap: var(--space-7);
    align-items: start;
  }
}
.gallery {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .gallery {
    flex-direction: row;
    gap: var(--space-4);
  }
}
@media (min-width: 1024px) {
  .gallery {
    position: sticky;
    top: calc(84px + var(--space-5));
    align-self: start;
  }
}
.gallery__thumbs {
  display: flex;
  flex-direction: row;
  gap: var(--space-3);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

@media (min-width: 768px) {
  .gallery__thumbs {
    flex-direction: column;
    width: 84px;
    flex-shrink: 0;
    overflow-x: visible;
  }
}
.gallery__thumb {
  flex-shrink: 0;
  width: 64px;
  aspect-ratio: 3/4;
  overflow: hidden;
  border: 1px solid transparent;
  opacity: 0.5;
  transition: opacity var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}

@media (min-width: 768px) {
  .gallery__thumb {
    width: 84px;
  }
}
.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__thumb:hover {
  opacity: 0.85;
}

.gallery__thumb.is-active {
  opacity: 1;
  border-color: var(--color-text);
}

.gallery__main {
  flex: 1;
  min-width: 0;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--alfia-ivory);
}

@media (min-width: 768px) {
  .gallery__main {
    aspect-ratio: 4/5;
  }
}
.gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--duration-base) var(--ease);
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.product-info__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
}

.product-info__title {
  font-size: var(--display-md);
}

.product-info__price {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-text);
}

.product-info__desc {
  color: var(--color-text-muted);
  font-size: var(--text-md);
  max-width: 46ch;
}

.fulfillment-notice {
  border: 1px solid rgba(58, 35, 10, 0.2);
  border-left: 2px solid var(--color-accent);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fulfillment-notice__badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(58, 35, 10, 0.3);
  padding: 5px 12px;
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.fulfillment-notice__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
}

.fulfillment-notice__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: 4px;
}

.fulfillment-notice__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fulfillment-notice__meta-label {
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.fulfillment-notice__meta-value {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text);
}

.fulfillment-notice__copy {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 4px;
  max-width: 48ch;
}

.fulfillment-notice--ready {
  border-left-color: var(--alfia-sage);
}

.variation-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-top: var(--hairline);
}

.variation-group:first-of-type {
  border-top: none;
  padding-top: 0;
}

.variation-group__label,
.variation-group__label-row {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text);
}

.variation-group__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.variation-group__label-row .text-link {
  text-transform: none;
  letter-spacing: var(--tracking-wide);
}

.swatch--disabled .swatch__face {
  position: relative;
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.swatch--disabled .swatch__face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(58, 35, 10, 0.35) 50%, transparent calc(50% + 1px));
}

.swatch--disabled .swatch__input {
  cursor: not-allowed;
}

.quantity-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(58, 35, 10, 0.3);
  width: fit-content;
}

.quantity-stepper__btn {
  width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  transition: background var(--duration-fast) var(--ease);
}

.quantity-stepper__btn:hover {
  background: rgba(58, 35, 10, 0.06);
}

.quantity-stepper__input {
  width: 52px;
  min-height: 44px;
  border: none;
  border-inline: 1px solid rgba(58, 35, 10, 0.3);
  text-align: center;
  font: inherit;
  font-size: var(--input-font-size);
  font-weight: 600;
  background: none;
  color: var(--color-text);
  -moz-appearance: textfield;
}

.quantity-stepper__input::-webkit-outer-spin-button, .quantity-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-stepper__input:focus-visible {
  outline: none;
}

.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 17px 20px;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  transition: background var(--duration-fast) var(--ease);
}

.btn-primary:hover {
  background: var(--alfia-black);
}

.btn-primary:disabled {
  /* Was white text on a 30%-tint ground — roughly 1.6:1, illegible on a phone
     in daylight. Keep the button visibly inert but make the label read.
     The base `button:disabled` rule also drops opacity to 0.3, which undoes
     any colour chosen here, so this opts out of it. */
  background: rgba(58, 35, 10, 0.08);
  color: var(--color-text-muted);
  box-shadow: inset 0 0 0 1px rgba(58, 35, 10, 0.22);
  opacity: 1;
  cursor: not-allowed;
}

.product-info__ship-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.product-info__ship-note .text-link {
  font-size: var(--text-2xs);
}

.trust-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: var(--hairline);
}

.trust-row li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.trust-row li svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-accent);
  fill: none;
  stroke-width: 1.4;
  flex-shrink: 0;
}

.accordion {
  border-top: var(--hairline);
  margin-top: var(--space-2);
}

.accordion__item {
  border-bottom: var(--hairline);
}

.accordion__trigger {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-xl);
}

.accordion__trigger::-webkit-details-marker {
  display: none;
}

.accordion__icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.accordion__icon::before, .accordion__icon::after {
  content: "";
  position: absolute;
  background: var(--color-text);
  transition: transform var(--duration-fast) var(--ease), opacity var(--duration-fast) var(--ease);
}

.accordion__icon::before {
  top: 6px;
  left: 0;
  width: 14px;
  height: 1px;
}

.accordion__icon::after {
  top: 0;
  left: 6px;
  width: 1px;
  height: 14px;
}

.accordion__item[open] .accordion__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.accordion__panel {
  padding-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-md);
  max-width: 56ch;
}

.accordion__panel p + p {
  margin-top: var(--space-2);
}

.accordion__panel ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.accordion__panel li {
  position: relative;
  padding-left: 14px;
}

.accordion__panel li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
}

.size-guide {
  position: fixed;
  inset: 0;
  z-index: 250;
  visibility: hidden;
}

.size-guide[data-open=true] {
  visibility: visible;
}

.size-guide[data-open=true] .size-guide__scrim {
  opacity: 1;
}

.size-guide[data-open=true] .size-guide__panel {
  transform: translateX(0);
}

.size-guide__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 9, 0.45);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease);
}

.size-guide__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(90vw, 420px);
  background: var(--color-bg);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease);
  padding: var(--space-5);
  overflow-y: auto;
}

.size-guide__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.size-guide__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
}

.size-guide__close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: calc(-1 * var(--space-2));
}

.size-guide__close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
}

.size-guide__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.size-guide__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.size-guide__table th, .size-guide__table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: var(--hairline);
}

.size-guide__table th {
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}

.product-detail .editorial {
  margin-top: var(--space-8);
}

.product-detail .section:last-of-type {
  padding-bottom: 0;
}

/* ==========================================================================
   WooCommerce — cart, checkout, my account
   ========================================================================== */
/* `div.` is load-bearing: WooCommerce also puts a bare `woocommerce` class on
   <body> for shop and product pages, so an unqualified `.woocommerce` selector
   would style the whole page. Only the shortcode wrapper is a div. */
div.woocommerce {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: var(--space-8);
}

div.woocommerce abbr.required,
div.woocommerce .required {
  color: var(--color-accent);
  border: none;
  text-decoration: none;
}

div.woocommerce .optional {
  color: var(--color-text-muted);
  font-weight: 400;
}

div.woocommerce fieldset {
  margin: var(--space-4) 0 0;
  padding: var(--space-4) 0 0;
  border: none;
  border-top: var(--hairline);
}

div.woocommerce fieldset legend {
  padding: 0;
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
}

div.woocommerce .clear {
  clear: both;
}

/* ---- Notices ------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border: var(--hairline);
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text);
}

.woocommerce-error {
  border-left-color: #a3392c;
}

.woocommerce-info,
.cart-empty {
  border-left-color: var(--color-accent-soft);
}

.woocommerce-error li {
  flex: 1 1 auto;
}

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
  order: 1;
  margin-left: auto;
  flex-shrink: 0;
}

/* ---- Buttons --------------------------------------------------------------- */
/* Unqualified `.woocommerce` on purpose here: notice buttons ("View cart") also
   render on shop and product pages, where the class sits on <body>. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: 1px solid rgba(58, 35, 10, 0.3);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}

.woocommerce .button:hover,
.woocommerce .button:focus-visible {
  border-color: var(--color-text);
  background: rgba(58, 35, 10, 0.06);
}

.woocommerce .button.alt,
.woocommerce .checkout-button,
.woocommerce #place_order {
  display: flex;
  width: 100%;
  padding: 17px 20px;
  border: none;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--text-sm);
}

.woocommerce .button.alt:hover,
.woocommerce .button.alt:focus-visible {
  background: var(--alfia-black);
  border-color: transparent;
}

.woocommerce .button:disabled,
.woocommerce .button.disabled,
.woocommerce .button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---- Form fields ------------------------------------------------------------ */
.col2-set {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 720px) {
  .col2-set {
    grid-template-columns: 1fr 1fr;
  }
}
.u-column1.col-1,
.u-column2.col-2,
.woocommerce-Address {
  padding: var(--space-5);
  border: var(--hairline);
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper,
.woocommerce-EditAccountForm,
.checkout_coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
}

.checkout_coupon .form-row-last {
  display: flex;
  align-items: flex-end;
}

.woocommerce-EditAccountForm > fieldset,
.woocommerce-EditAccountForm > p {
  flex: 1 1 100%;
}

@media (min-width: 640px) {
  .woocommerce-EditAccountForm > p.form-row-first,
  .woocommerce-EditAccountForm > p.form-row-last {
    flex: 1 1 calc(50% - var(--space-4) / 2);
  }
}
.woocommerce-form-coupon-toggle .showcoupon {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

div.woocommerce form .form-row {
  width: 100%;
  margin: 0 0 var(--space-4);
}

@media (min-width: 640px) {
  div.woocommerce form .form-row-first,
  div.woocommerce form .form-row-last {
    width: calc(50% - var(--space-4) / 2);
  }
}
div.woocommerce form .form-row label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text);
}

div.woocommerce form .form-row label.checkbox,
div.woocommerce form .form-row label.inline,
div.woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: var(--text-sm);
  cursor: pointer;
}

div.woocommerce form .input-text,
div.woocommerce form select,
div.woocommerce form textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(58, 35, 10, 0.3);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: var(--input-font-size);
  transition: border-color var(--duration-fast) var(--ease);
}

div.woocommerce form .input-text:focus,
div.woocommerce form select:focus,
div.woocommerce form textarea:focus {
  outline: none;
  border-color: var(--color-text);
}

div.woocommerce form textarea {
  min-height: 100px;
  resize: vertical;
}

div.woocommerce form input[type=checkbox],
div.woocommerce form input[type=radio] {
  width: 15px;
  height: 15px;
  margin: 3px 0 0;
  accent-color: var(--color-text);
  flex-shrink: 0;
}

div.woocommerce form .woocommerce-input-wrapper .description,
div.woocommerce form em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

.woocommerce-invalid .input-text,
.woocommerce-invalid select {
  border-color: #a3392c;
}

.select2-container {
  width: 100% !important;
}

.select2-container--default .select2-selection--single {
  height: auto;
  padding: 13px 14px;
  border: 1px solid rgba(58, 35, 10, 0.3);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  margin-right: 14px;
  line-height: 1.4;
  color: var(--color-text);
  font-size: var(--text-md);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: 10px;
}

.select2-dropdown {
  border-color: rgba(58, 35, 10, 0.3);
  border-radius: var(--radius-sm);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--color-text);
}

/* ---- Cart page --------------------------------------------------------------- */
.shop_table {
  width: 100%;
  border-collapse: collapse;
}

body.woocommerce-cart .page-header,
body.woocommerce-checkout .page-header,
body.woocommerce-account .page-header {
  padding-block: var(--space-5) var(--space-4);
}
body.woocommerce-cart .page-header__inner,
body.woocommerce-checkout .page-header__inner,
body.woocommerce-account .page-header__inner {
  max-width: var(--container-narrow);
}
body.woocommerce-cart .section,
body.woocommerce-checkout .section,
body.woocommerce-account .section {
  padding-block: 0;
}
body.woocommerce-cart div.woocommerce,
body.woocommerce-checkout div.woocommerce,
body.woocommerce-account div.woocommerce {
  max-width: var(--container-narrow);
  padding-block: var(--space-5) var(--space-7);
}
body.woocommerce-cart .woocommerce-message,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-account .woocommerce-message {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
}
body.woocommerce-cart .woocommerce-message .button,
body.woocommerce-checkout .woocommerce-message .button,
body.woocommerce-account .woocommerce-message .button {
  padding: 9px 18px;
  font-size: var(--text-2xs);
}

body.woocommerce-cart #main {
  font-family: var(--font-body);
}
body.woocommerce-cart #main h1, body.woocommerce-cart #main h2, body.woocommerce-cart #main h3, body.woocommerce-cart #main h4, body.woocommerce-cart #main h5, body.woocommerce-cart #main h6,
body.woocommerce-cart #main input, body.woocommerce-cart #main select, body.woocommerce-cart #main textarea, body.woocommerce-cart #main button,
body.woocommerce-cart #main .select2-container,
body.woocommerce-cart #main .cart-summary__table tr.order-total th,
body.woocommerce-cart #main .cart-summary__table tr.order-total td {
  font-family: var(--font-body);
}
body.woocommerce-cart #main .cart-summary__table tr.order-total th,
body.woocommerce-cart #main .cart-summary__table tr.order-total td {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
body.woocommerce-cart .modal-instant-courier-wrapper,
body.woocommerce-cart .aw-map-display {
  --aw-ic-font: var(--font-body);
}
body.woocommerce-cart #aw-city-popup-overlay.aw-city-popup-overlay,
body.woocommerce-cart #aw-city-popup-overlay.aw-city-popup-overlay .aw-city-popup {
  font-family: var(--font-body);
}

.cart-layout {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 1024px) {
  .cart-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-6);
  }
}

.cart-lines {
  min-width: 0;
}
.cart-lines__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(58, 35, 10, 0.25);
}
.cart-lines__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
}
.cart-lines__count {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
}
.cart-lines__continue {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease);
}
.cart-lines__continue:hover, .cart-lines__continue:focus-visible {
  color: var(--color-accent);
}
.cart-lines__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
}

div.woocommerce .cart-lines .cart-lines__update {
  display: none;
}

.cart-line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-areas: "media info" "media price";
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  padding-block: var(--space-4);
  border-bottom: var(--hairline);
}
@media (min-width: 768px) {
  .cart-line {
    grid-template-columns: 88px minmax(0, 1fr) auto;
    grid-template-areas: "media info price";
    column-gap: var(--space-4);
    align-items: start;
  }
}
.cart-line__media {
  grid-area: media;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: rgba(58, 35, 10, 0.06);
}
.cart-line__media a {
  display: block;
  height: 100%;
}
.cart-line__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-line__info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.cart-line__category {
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cart-line__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.2;
}
.cart-line__name a {
  transition: color var(--duration-fast) var(--ease);
}
.cart-line__name a:hover, .cart-line__name a:focus-visible {
  color: var(--color-accent);
}
.cart-line__pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid rgba(58, 35, 10, 0.25);
  border-radius: 999px;
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cart-line__pill--preorder {
  color: var(--color-accent);
  border-color: rgba(164, 83, 12, 0.4);
}
.cart-line__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: 6px;
}
.cart-line__remove a {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease);
}
.cart-line__remove a:hover, .cart-line__remove a:focus-visible {
  color: var(--color-accent);
}
.cart-line__price {
  grid-area: price;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
@media (min-width: 768px) {
  .cart-line__price {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
  }
}
.cart-line__total {
  font-size: var(--text-md);
  font-weight: 600;
  white-space: nowrap;
}
.cart-line__unit {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.cart-line dl.variation {
  margin: 0;
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}
.cart-line dl.variation dt,
.cart-line dl.variation dd,
.cart-line dl.variation p {
  display: inline;
  margin: 0;
}
.cart-line dl.variation dt::after {
  content: ": ";
}
.cart-line .backorder_notification {
  font-size: var(--text-2xs);
  color: var(--color-accent);
}
@media (min-width: 768px) {
  .cart-line .quantity-stepper__btn {
    width: 30px;
    min-height: 0;
    font-size: var(--text-md);
  }
  .cart-line .quantity-stepper__input {
    width: 34px;
    min-height: 0;
    font-size: var(--text-sm);
    padding-block: 6px;
  }
}

.cart-coupon {
  display: flex;
  gap: var(--space-2);
}
.cart-coupon .input-text {
  width: 170px;
  padding: 11px 13px;
  border: 1px solid rgba(58, 35, 10, 0.3);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-xs);
  transition: border-color var(--duration-fast) var(--ease);
}
.cart-coupon .input-text::placeholder {
  color: var(--color-text-muted);
}
.cart-coupon .input-text:focus {
  outline: none;
  border-color: var(--color-text);
}
.cart-coupon .button {
  padding-inline: var(--space-4);
}

/* ---- Cart summary ------------------------------------------------------------- */
.cart-collaterals {
  min-width: 0;
}

@media (min-width: 1024px) {
  .cart-summary {
    position: sticky;
    top: var(--space-4);
  }
}
.cart-summary__card {
  padding: var(--space-4);
  border: var(--hairline);
  background: var(--color-bg-sage-tint);
}
.cart-summary__title {
  font-size: var(--text-2xs);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.cart-summary__table tr th,
.cart-summary__table tr td {
  padding: 9px 0;
  font-size: var(--text-xs);
  text-align: right;
  vertical-align: top;
}
.cart-summary__table tr th {
  text-align: left;
  font-weight: 400;
  color: var(--color-text-muted);
}
.cart-summary__table tr.order-total th,
.cart-summary__table tr.order-total td {
  padding-top: var(--space-3);
  border-top: 1px solid rgba(58, 35, 10, 0.2);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  color: var(--color-text);
}
.cart-summary__note {
  margin-top: 10px;
  font-size: var(--text-2xs);
  line-height: 1.5;
  color: var(--color-text-muted);
  text-align: center;
}
.cart-summary__trust {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--hairline);
  gap: 10px;
}
.cart-summary__trust li {
  font-size: var(--text-2xs);
}

.cart_totals .woocommerce-shipping-methods {
  margin: 0;
}
.cart_totals .woocommerce-shipping-methods li {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: var(--text-xs);
}
.cart_totals .woocommerce-shipping-methods.aw-enhanced li {
  justify-content: flex-start;
  font-size: var(--text-sm);
}

@media (min-width: 1024px) {
  body.woocommerce-cart #main .cart-summary .cart-summary__card {
    padding: 16px;
  }
  body.woocommerce-cart #main .cart-summary .cart-summary__title {
    margin-bottom: 8px;
  }
  body.woocommerce-cart #main .cart-summary .cart-summary__table th, body.woocommerce-cart #main .cart-summary .cart-summary__table td {
    padding-block: 6px;
  }
  body.woocommerce-cart #main .cart-summary .cart-summary__table tr.order-total th, body.woocommerce-cart #main .cart-summary .cart-summary__table tr.order-total td {
    padding-block: 10px 8px;
    font-size: var(--text-md);
    line-height: 1.4;
  }
  body.woocommerce-cart #main .cart-summary .cart-summary__table tr.order-total th {
    font-size: var(--text-sm);
    font-weight: 500;
  }
  body.woocommerce-cart #main .cart-summary .woocommerce-shipping-methods.aw-enhanced .aw-shipping-header-row {
    margin-top: 8px !important;
  }
  body.woocommerce-cart #main .cart-summary .woocommerce-shipping-methods.aw-enhanced .aw-shipping-label-header {
    margin-bottom: 6px;
    padding-bottom: 6px;
  }
  body.woocommerce-cart #main .cart-summary .woocommerce-shipping-methods.aw-enhanced .aw-shipping-title {
    font-size: var(--text-xs);
  }
  body.woocommerce-cart #main .cart-summary .woocommerce-shipping-methods.aw-enhanced > li:not(.aw-shipping-header-row):not(.aw-shipping-footer-row),
  body.woocommerce-cart #main .cart-summary .woocommerce-shipping-methods.aw-enhanced .aw-courier-services > li,
  body.woocommerce-cart #main .cart-summary .woocommerce-shipping-methods.aw-enhanced .aw-speed-services > li,
  body.woocommerce-cart #main .cart-summary .woocommerce-shipping-methods.aw-enhanced .aw-price-services > li {
    min-height: 36px;
    padding: 8px 10px !important;
    margin-bottom: 6px !important;
    gap: 8px;
    font-size: var(--text-xs);
  }
  body.woocommerce-cart #main .cart-summary .woocommerce-shipping-methods.aw-enhanced label {
    min-height: 0;
    font-size: var(--text-xs);
    line-height: 1.4;
  }
  body.woocommerce-cart #main .cart-summary .woocommerce-shipping-methods.aw-enhanced .aw-svc-name, body.woocommerce-cart #main .cart-summary .woocommerce-shipping-methods.aw-enhanced .aw-svc-price {
    font-size: var(--text-xs);
    font-weight: 500;
  }
  body.woocommerce-cart #main .cart-summary .woocommerce-shipping-methods.aw-enhanced .aw-svc-main {
    gap: 2px;
  }
  body.woocommerce-cart #main .cart-summary .woocommerce-shipping-methods.aw-enhanced .aw-svc-meta:empty {
    display: none;
  }
  body.woocommerce-cart #main .cart-summary .cart-address {
    margin-top: 12px;
    padding-top: 12px;
  }
  body.woocommerce-cart #main .cart-summary .wc-proceed-to-checkout {
    margin-top: 12px;
  }
  body.woocommerce-cart #main .cart-summary .checkout-button {
    padding: 12px 14px;
    font-size: var(--text-2xs);
  }
  body.woocommerce-cart #main .cart-summary .cart-summary__note {
    margin-top: 8px;
  }
  body.woocommerce-cart #main .cart-summary .cart-summary__trust {
    margin-top: 12px;
    padding-top: 12px;
    gap: 8px;
  }
}
.cart-address .select2-container--default .select2-selection--single {
  padding: 9px 10px;
}
.cart-address .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: var(--text-xs);
  margin-right: 12px;
}

/* ---- Delivery address (shipping calculator) ------------------------------------ */
.cart-address {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--hairline);
}
.cart-address__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.cart-address__summary {
  min-width: 0;
}
.cart-address__label {
  display: block;
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cart-address__value {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--color-text);
}
.cart-address__toggle {
  flex-shrink: 0;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.cart-address__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.cart-address__field {
  margin: 0 0 var(--space-2);
  min-width: 0;
}
.cart-address__field label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cart-address__field .input-text,
.cart-address__field select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(58, 35, 10, 0.3);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-xs);
}
.cart-address__field .input-text:focus,
.cart-address__field select:focus {
  outline: none;
  border-color: var(--color-text);
}
.cart-address__submit {
  margin-top: var(--space-2);
  padding-block: 12px;
  font-size: var(--text-2xs);
}

.shipping-calculator-form {
  margin-top: var(--space-3);
  text-align: left;
}

.wc-proceed-to-checkout {
  margin-top: var(--space-4);
}

/* ---- Empty cart ---------------------------------------------------------------- */
.cart-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 460px;
  margin-inline: auto;
  padding-block: var(--space-6) var(--space-7);
  text-align: center;
}
.cart-empty-state__title {
  font-size: var(--display-md);
}
.cart-empty-state__copy {
  color: var(--color-text-muted);
  font-size: var(--text-md);
}
.cart-empty-state__cta {
  width: auto;
  margin-top: var(--space-2);
  padding-inline: var(--space-6);
}
.cart-empty-state__secondary {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* ---- Cross-sells --------------------------------------------------------------- */
.cross-sells {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: var(--hairline);
}
.cross-sells h2 {
  font-size: var(--display-xs);
  margin-bottom: var(--space-4);
}
.cross-sells ul.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .cross-sells ul.products {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- Checkout page ------------------------------------------------------------ */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
#order_review_heading {
  font-size: var(--display-2xs);
  margin-bottom: var(--space-4);
}

.woocommerce-checkout .col2-set {
  margin-bottom: var(--space-5);
}

#order_review_heading {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--hairline);
}

#order_review {
  padding: var(--space-5);
  border: var(--hairline);
  background: var(--color-bg-sage-tint);
}

@media (min-width: 900px) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: var(--space-7);
    align-items: start;
  }
  #customer_details {
    grid-column: 1;
    grid-row: 1/span 2;
    min-width: 0;
  }
  #order_review_heading {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
  #order_review {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }
  .woocommerce-checkout .col2-set {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-bottom: 0;
  }
}
.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-5);
}

.woocommerce-checkout-review-order-table thead th {
  padding-bottom: var(--space-3);
  border-bottom: var(--hairline);
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: left;
}

.woocommerce-checkout-review-order-table thead th.product-total {
  text-align: right;
}

.woocommerce-checkout-review-order-table td.product-name {
  padding: var(--space-3) 0;
  border-bottom: var(--hairline);
  font-size: var(--text-sm);
}

.woocommerce-checkout-review-order-table td.product-total {
  padding: var(--space-3) 0;
  border-bottom: var(--hairline);
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}

.woocommerce-checkout-review-order-table .product-quantity {
  color: var(--color-text-muted);
  font-weight: 400;
}

.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
  padding: var(--space-3) 0;
  border-bottom: var(--hairline);
  font-size: var(--text-sm);
  text-align: right;
}

.woocommerce-checkout-review-order-table tfoot th {
  text-align: left;
  font-weight: 500;
  color: var(--color-text-muted);
}

.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout-review-order-table tfoot tr.order-total td {
  border-bottom: none;
  padding-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  color: var(--color-text);
}

.aw-shipping-title {
  font-size: var(--text-sm);
}

.aw-svc-name {
  font-size: var(--text-sm);
}

.aw-svc-meta {
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wide);
}

ul.payment_methods {
  list-style: none;
  margin: var(--space-5) 0;
  padding: 0;
  border-top: var(--hairline);
}

ul.payment_methods li.wc_payment_method {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  row-gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: var(--hairline);
}

ul.payment_methods li.wc_payment_method > input[type=radio] {
  grid-column: 1;
  margin: 0;
}

ul.payment_methods li.wc_payment_method > label {
  grid-column: 2;
}

ul.payment_methods li.wc_payment_method > .payment_box {
  grid-column: 1/-1;
}

ul.payment_methods li.wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
}

ul.payment_methods li.wc_payment_method img {
  height: 20px;
  margin-left: auto;
}

ul.payment_methods .payment_box {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg);
  border: var(--hairline);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}

ul.payment_methods .payment_box p:first-child {
  margin-top: 0;
}

.woocommerce-terms-and-conditions-wrapper {
  margin: var(--space-4) 0;
  font-size: var(--text-xs);
}

.woocommerce-terms-and-conditions-wrapper .form-row label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.form-row.place-order {
  margin-top: var(--space-5);
}

/* ---- My Account ---------------------------------------------------------------- */
body.woocommerce-account .woocommerce {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: flex-start;
}

@media (min-width: 900px) {
  body.woocommerce-account .woocommerce {
    flex-direction: row;
    gap: var(--space-8);
  }
}
.woocommerce-MyAccount-navigation {
  flex: 0 0 220px;
  width: 100%;
}

@media (min-width: 900px) {
  .woocommerce-MyAccount-navigation {
    position: sticky;
    top: var(--space-6);
  }
}
.woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: column;
  border-top: var(--hairline);
}

.woocommerce-MyAccount-navigation li {
  border-bottom: var(--hairline);
}

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 14px 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease);
}

.woocommerce-MyAccount-navigation li a:hover {
  color: var(--color-text);
}

.woocommerce-MyAccount-navigation li.is-active a {
  color: var(--color-accent);
}

.woocommerce-MyAccount-content {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.woocommerce-MyAccount-content h2 {
  font-size: var(--display-xs);
  margin-bottom: var(--space-4);
}

.woocommerce-MyAccount-content > p {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
}

.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-5);
}

.woocommerce-orders-table__header {
  padding: var(--space-3) var(--space-2);
  border-bottom: var(--hairline);
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: left;
}

.woocommerce-orders-table__cell {
  padding: var(--space-4) var(--space-2);
  border-bottom: var(--hairline);
  font-size: var(--text-sm);
  vertical-align: middle;
}

.woocommerce-orders-table__cell-order-number a {
  font-weight: 600;
  color: var(--color-text);
}

.woocommerce-orders-table__cell-order-status {
  font-weight: 600;
  color: var(--color-accent);
}

.woocommerce-orders-table__cell-order-actions {
  text-align: right;
  white-space: nowrap;
}

.woocommerce-orders-table__cell-order-actions .button {
  padding: 9px 16px;
  font-size: var(--text-2xs);
  margin-left: 8px;
}

.woocommerce-pagination {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.woocommerce-pagination .button {
  padding: 11px 20px;
  font-size: var(--text-2xs);
}

.woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: var(--hairline);
}

.woocommerce-Address-title h2 {
  font-size: var(--text-2xl);
  margin-bottom: 0;
}

.woocommerce-Address-title .edit {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.woocommerce-Address address {
  font-style: normal;
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--color-text-muted);
}

.woocommerce-form h2 {
  font-size: var(--display-2xs);
  margin-bottom: var(--space-4);
}

.woocommerce-form-login__rememberme {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-3);
}

.woocommerce-LostPassword {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
}

.woocommerce-LostPassword a {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-text-muted);
}

body.woocommerce-account:not(.logged-in) div.woocommerce {
  display: block;
  max-width: none;
  padding: 0;
}
body.woocommerce-account:not(.logged-in) .section {
  padding-block: 0;
}

@media (min-width: 900px) {
  .woocommerce-MyAccount-navigation {
    padding-right: var(--space-5);
    border-right: var(--hairline);
  }
}
.woocommerce-MyAccount-content > p {
  max-width: var(--editorial-max);
}

.woocommerce-MyAccount-content .woocommerce-EditAccountForm,
.woocommerce-MyAccount-content .woocommerce-address-fields {
  max-width: 560px;
}

.woocommerce-MyAccount-content .woocommerce-order-details,
.woocommerce-MyAccount-content .woocommerce-customer-details {
  margin-top: var(--space-6);
}

/* ---- Order pages (order-received + view-order) --------------------------------- */
.woocommerce-order {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.woocommerce-MyAccount-content mark,
.woocommerce-order mark,
.woocommerce-thankyou-order-received mark {
  background: none;
  color: var(--color-accent);
  font-weight: 600;
}

.woocommerce-notice--success {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--color-accent);
  background: var(--color-bg-sage-tint);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1.35;
}

.woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  border: var(--hairline);
  background: rgba(58, 35, 10, 0.14);
}

.woocommerce-order-overview li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-4);
  background: var(--color-bg);
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.woocommerce-order-overview li strong {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  word-break: break-word;
}

.woocommerce-order-details__title,
.woocommerce-column__title {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(58, 35, 10, 0.25);
  font-size: var(--text-2xl);
}

.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-table--order-details th {
  padding: var(--space-3) 0;
  border-bottom: var(--hairline);
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: left;
}

.woocommerce-table--order-details td {
  padding: var(--space-4) 0;
  border-bottom: var(--hairline);
  font-size: var(--text-sm);
  vertical-align: top;
}

.woocommerce-table--order-details .woocommerce-table__product-name a {
  font-weight: 600;
}

.woocommerce-table--order-details .product-quantity {
  color: var(--color-text-muted);
  font-weight: 400;
}

.woocommerce-table--order-details th.woocommerce-table__product-total,
.woocommerce-table--order-details td.woocommerce-table__product-total {
  text-align: right;
  white-space: nowrap;
}

.woocommerce-table--order-details tfoot th {
  padding: var(--space-3) 0;
  border-bottom: var(--hairline);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted);
}

.woocommerce-table--order-details tfoot td {
  padding: var(--space-3) 0;
  text-align: right;
  font-size: var(--text-sm);
  white-space: nowrap;
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
  border-bottom: none;
  padding-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  color: var(--color-text);
}

.woocommerce-customer-details address {
  font-style: normal;
  font-size: var(--text-md);
  line-height: 1.8;
  color: var(--color-text-muted);
}

.woocommerce-customer-details--phone,
.woocommerce-customer-details--email {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}

/* ---- Responsive table collapse (account orders) -------------------------------- */
@media (max-width: 767px) {
  table.shop_table_responsive thead {
    display: none;
  }
  table.shop_table_responsive tr {
    display: block;
    padding: var(--space-3) 0;
  }
  table.shop_table_responsive td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 8px 0;
    border-bottom: none !important;
    text-align: right;
  }
  table.shop_table_responsive td::before {
    content: attr(data-title) ":";
    flex-shrink: 0;
    margin-right: auto;
    font-size: var(--text-3xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    text-align: left;
    color: var(--color-text-muted);
  }
  table.shop_table_responsive tfoot tr {
    border-bottom: var(--hairline);
  }
}
/* ==========================================================================
   Auth — logged-out My account (sign in / register / lost password)
   ==========================================================================

   A two-field form has no business filling a 1440px page, and centring a small
   card in one just moved the emptiness to the sides. This is a split screen
   instead: editorial image on one half, form on the other, sized to the first
   viewport so the page ends where the fold does.

   Markup comes from the three myaccount/form-*.php theme overrides, which all
   pull the image half from template-parts/auth-media.php so sign in, lost
   password and set-new-password stay the same shape. */
.auth {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-bg);
}

@media (min-width: 900px) {
  .auth {
    grid-template-columns: 1.1fr 1fr;
    min-height: calc(100vh - 124px);
  }
}
/* ---- Editorial half ------------------------------------------------------ */
.auth__media {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-sage-tint);
  min-height: 200px;
}

@media (min-width: 900px) {
  .auth__media {
    min-height: 0;
  }
}
.auth__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.auth__media-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(42, 32, 24, 0.55) 0%, rgba(42, 32, 24, 0.1) 45%, rgba(42, 32, 24, 0) 70%);
}

.auth__media-caption {
  position: absolute;
  left: var(--space-5);
  right: var(--space-5);
  bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (min-width: 900px) {
  .auth__media-caption {
    left: var(--space-6);
    right: var(--space-6);
    bottom: var(--space-6);
  }
}
.auth__media-mark {
  width: 96px;
  height: auto;
}

.auth__media-copy {
  max-width: 30ch;
  color: var(--color-inverse-text);
  font-family: var(--font-display);
  font-size: var(--display-2xs);
  line-height: 1.35;
}

/* ---- Form half ----------------------------------------------------------- */
.auth__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--gutter) var(--space-7);
}

@media (min-width: 900px) {
  .auth__panel {
    padding-block: var(--space-7);
  }
}
.auth__inner {
  width: 100%;
  max-width: 380px;
}

.auth__eyebrow {
  display: block;
  margin-bottom: var(--space-3);
}

.auth__title {
  font-size: var(--display-md);
  margin-bottom: var(--space-2);
}

.auth__subtitle {
  margin-bottom: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-md);
  line-height: 1.6;
}

/* Fields. Scoped tight so the account pages behind the login keep theirs. */
.auth__field {
  margin-bottom: var(--space-4);
}

.auth__label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text);
}

.auth__input {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid rgba(58, 35, 10, 0.3);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  /* 15px by design, but never below the 16px that stops mobile Safari
     zooming the page in on focus. */
  font-size: max(var(--text-lg), var(--input-font-size));
  transition: border-color var(--duration-fast) var(--ease);
}

.auth__input:focus {
  outline: none;
  border-color: var(--color-text);
}

.auth__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.auth__remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}

.auth__remember input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--color-text);
}

.auth__forgot {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease);
}

.auth__forgot:hover,
.auth__forgot:focus-visible {
  color: var(--color-accent);
}

.woocommerce .auth button.auth__submit {
  width: 100%;
  padding: 15px 24px;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-sm);
  background: var(--color-text);
  color: var(--color-inverse-text);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}

.woocommerce .auth button.auth__submit:hover,
.woocommerce .auth button.auth__submit:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-inverse-text);
}

.auth__aside {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--hairline);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.auth__aside a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Register block, shown only when WooCommerce account creation is enabled.
   It stacks under the sign-in form inside the same column. */
.auth__divider {
  margin: var(--space-6) 0 var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--hairline);
}

.auth__subtitle--register {
  margin-bottom: var(--space-4);
}

.auth__section-title {
  font-size: var(--display-2xs);
  margin-bottom: var(--space-2);
}

.woocommerce .auth button.auth__submit--secondary {
  background: transparent;
  color: var(--color-text);
}

.woocommerce .auth button.auth__submit--secondary:hover,
.woocommerce .auth button.auth__submit--secondary:focus-visible {
  background: var(--color-text);
  color: var(--color-inverse-text);
  border-color: var(--color-text);
}

/* ---- Notices ------------------------------------------------------------- */
body.woocommerce-account:not(.logged-in) div.woocommerce > .woocommerce-notices-wrapper:not(:empty) {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: var(--space-5) var(--gutter) 0;
}

/* ---------------------------------------------------------------------------
   iOS zoom-on-focus.
   Mobile Safari zooms the whole page in when a focused form control is set
   below 16px, then leaves the viewport scaled and panned. Every checkout
   field was 14px and the cart quantity and newsletter fields 13px, so the
   entire purchase flow zoomed on first tap. 16px is the threshold, not a
   preference — below it the behaviour is unavoidable.
   --------------------------------------------------------------------------- */
/* The theme's own fields read --input-font-size (see _tokens.scss). This block
   is the safety net for controls the theme never styles directly: plugin
   fields, select2 search boxes, and anything WooCommerce adds later.
   It is scoped to those containers on purpose — as a blanket `input[…]` rule
   it also outranked the theme's deliberately large fields, such as the search
   overlay, and shrank them to 16px. That scoping only goes so far, though:
   `.woocommerce-page` is a body class, so on a shop, cart, checkout or account
   page it matches everything. Fields the theme styles itself have to opt out
   by name. */
@media (max-width: 767px) {
  .woocommerce input[type=text],
  .woocommerce input[type=email],
  .woocommerce input[type=password],
  .woocommerce input[type=search]:not(.search-overlay__input),
  .woocommerce input[type=tel],
  .woocommerce input[type=url],
  .woocommerce input[type=number],
  .woocommerce input[type=date],
  .woocommerce select,
  .woocommerce textarea,
  .woocommerce-page input[type=text],
  .woocommerce-page input[type=email],
  .woocommerce-page input[type=password],
  .woocommerce-page input[type=search]:not(.search-overlay__input),
  .woocommerce-page input[type=tel],
  .woocommerce-page input[type=url],
  .woocommerce-page input[type=number],
  .woocommerce-page input[type=date],
  .woocommerce-page select,
  .woocommerce-page textarea,
  .select2-container input[type=text],
  .select2-container input[type=email],
  .select2-container input[type=password],
  .select2-container input[type=search]:not(.search-overlay__input),
  .select2-container input[type=tel],
  .select2-container input[type=url],
  .select2-container input[type=number],
  .select2-container input[type=date],
  .select2-container select,
  .select2-container textarea,
  .aw-shipping-popup input[type=text],
  .aw-shipping-popup input[type=email],
  .aw-shipping-popup input[type=password],
  .aw-shipping-popup input[type=search]:not(.search-overlay__input),
  .aw-shipping-popup input[type=tel],
  .aw-shipping-popup input[type=url],
  .aw-shipping-popup input[type=number],
  .aw-shipping-popup input[type=date],
  .aw-shipping-popup select,
  .aw-shipping-popup textarea,
  .cart-address input[type=text],
  .cart-address input[type=email],
  .cart-address input[type=password],
  .cart-address input[type=search]:not(.search-overlay__input),
  .cart-address input[type=tel],
  .cart-address input[type=url],
  .cart-address input[type=number],
  .cart-address input[type=date],
  .cart-address select,
  .cart-address textarea {
    font-size: 16px;
  }
  /* Comfortable height for anything the customer has to fill in. */
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row select,
  .woocommerce form .form-row textarea,
  .auth__input,
  .cart-address__field input,
  .cart-address__field select {
    min-height: 48px;
  }
}
/* ---------------------------------------------------------------------------
   Touch targets.
   44px is the smallest reliably tappable box. These are the controls that sat
   under it on the purchase path.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* "Remove" in the cart was 52x14 — easy to miss and easy to hit by accident
     when aiming at the quantity stepper beside it. */
  .woocommerce-cart-form .cart-line a.remove,
  .cart-lines__continue,
  .shipping-calculator-button,
  .woocommerce-MyAccount-content a.edit,
  .showcoupon {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Footer newsletter: the field and the submit were 17px and 21px tall. */
  .site-footer__newsletter input[type=email] {
    min-height: 44px;
  }
  .site-footer__newsletter button {
    min-height: 44px;
    padding-inline: var(--space-2);
  }
  /* The control that opens that nav: 40px, sized by its own icon. */
  .header-actions__menu-toggle {
    min-width: 44px;
    min-height: 44px;
  }
  /* WooCommerce's own notice buttons — "View cart" on the add-to-cart notice
     is the one the customer is most likely to reach for, and it was 37px. */
  .woocommerce-message .button,
  .woocommerce-info .button,
  .woocommerce-error .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  /* Drawer close buttons and the mobile nav rows. 36px and ~26px respectively;
     the nav is the primary way around the site on a phone. */
  .mobile-nav__close,
  .filter-panel__close,
  .search-overlay__close,
  .size-guide__close {
    min-width: 44px;
    min-height: 44px;
  }
  .mobile-nav__link,
  .mobile-nav__footer a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  /* Filter drawer: the checkbox rows are the whole point of the drawer and
     they sat at 34px, with an 18px box to aim at. The label is already the
     full width of the panel, so it only needs the height. */
  .filter-option {
    min-height: 44px;
  }
  /* The control that opens that drawer was 41px. */
  .shop__filter-toggle {
    min-height: 44px;
  }
  /* Pagination chips are a deliberate 38px square in the desktop design; on a
     phone they are the only way to reach page two and have to be thumb-sized.
     The gap goes up with them so the enlarged boxes do not end up touching. */
  .shop__pagination .page-numbers {
    min-width: 44px;
    height: 44px;
  }
  .shop__pagination .woocommerce-pagination ul,
  .shop__pagination ul.page-numbers {
    gap: var(--space-3);
  }
  .shop__pagination .page-numbers.dots {
    min-width: 0;
  }
  /* Keep count, Filter and Sort on one line, including narrow phones. */
  .shop__toolbar-inner {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .shop__count {
    flex-shrink: 0;
  }
  .shop__toolbar-actions {
    flex-wrap: nowrap;
    gap: 12px;
    min-width: 0;
  }
  .shop__filter-toggle {
    min-height: 44px;
    padding: 0;
    gap: 8px;
    border: 0;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    transition: color var(--duration-fast) var(--ease);
  }
  .shop__filter-toggle svg {
    width: 13px;
    height: 13px;
  }
  .shop__filter-toggle:hover {
    color: var(--color-accent);
  }
  .shop__filter-toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
  }
  .shop__sort {
    flex-shrink: 0;
  }
  .shop__sort-trigger {
    min-height: 44px;
    gap: 5px;
  }
  .shop__sort-prefix {
    color: var(--color-text);
  }
  .shop__sort-trigger [data-sort-label],
  .shop__sort-separator {
    display: none;
  }
  .shop__sort-option {
    min-height: 44px;
  }
  /* Payment method and "remember me" rows: the radio/checkbox itself is 15px,
     so give the label the height and let the whole row take the tap. */
  .woocommerce-checkout .wc_payment_methods > li > label,
  .woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
  }
}
/* ---------------------------------------------------------------------------
   WooCommerce's "show password" toggle.
   woocommerce.js wraps each password field in `span.password-input` at runtime
   and drops an empty button inside it, positioned absolutely. The span is an
   inline, statically-positioned element, so the button escaped it and resolved
   against the page instead — it measured 12x2px in the corner of the field,
   present in the accessibility tree and impossible to hit. Give the wrapper a
   containing block, then size and draw the control.
   --------------------------------------------------------------------------- */
.password-input {
  position: relative;
  display: block;
  width: 100%;
}

.password-input input[type=password],
.password-input input[type=text] {
  width: 100%;
  padding-right: 52px;
}

.show-password-input {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 48px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--color-text-muted);
  cursor: pointer;
}

.show-password-input::after {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  opacity: 0.7;
  /* Eye outline, so the control reads without Woo's own sprite. */
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M1.5 12S5 5.5 12 5.5 22.5 12 22.5 12 19 18.5 12 18.5 1.5 12 1.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M1.5 12S5 5.5 12 5.5 22.5 12 22.5 12 19 18.5 12 18.5 1.5 12 1.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E") center/contain no-repeat;
}

.show-password-input.display-password {
  color: var(--color-accent);
}

.show-password-input.display-password::after {
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   Shipping method block (woocommerce-jne).
   The plugin renders its own list inside the cart/checkout totals. It inherits
   the summary's right alignment, and ships a white 10px-radius card that sits
   oddly on the sage summary panel next to the theme's 2-4px corners. The rows
   were also only 20px tall, which is the control the customer must tap to pick
   a courier.
   --------------------------------------------------------------------------- */
/* The cart summary right-aligns every cell so the money lines up; the courier
   list is a left-reading control and has to opt out. `.cart-summary__table tr
   td` is (0,1,3), so the row class has to carry the override. */
.woocommerce-shipping-totals td,
.woocommerce-shipping-totals th,
.cart-summary__table tr.woocommerce-shipping-totals td,
.cart-summary__table tr.woocommerce-shipping-totals th {
  text-align: left;
}

.woocommerce-shipping-methods.aw-enhanced {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The plugin lays this row out as a flex box pushed to flex-end, which parks
   the heading against the right edge of the summary while every other label
   in the panel starts at the left. */
.woocommerce-shipping-totals .aw-shipping-header-row {
  display: flex;
  justify-content: flex-start;
  padding: 0 0 var(--space-2);
}

.woocommerce-shipping-totals .aw-shipping-label-header {
  justify-content: flex-start;
  padding: 0;
}

.aw-shipping-title {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* The plugin's own stylesheet enqueues after the theme's and uses the same
   specificity, so these need the extra ancestor to take effect. */
.woocommerce-shipping-totals .woocommerce-shipping-methods.aw-enhanced > li:not(.aw-shipping-header-row) {
  background: var(--color-bg);
  border: 1px solid rgba(58, 35, 10, 0.14);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  padding: 0;
}

.woocommerce-shipping-totals .woocommerce-shipping-methods.aw-enhanced > li:last-child {
  margin-bottom: 0;
}

.woocommerce-shipping-totals .aw-svc-label {
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
}

.aw-svc-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  margin: 0;
  cursor: pointer;
  font-size: var(--text-md);
  color: var(--color-text);
}

.aw-svc-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aw-svc-meta:empty {
  display: none;
}