* {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
}

body {
  font-family: Arial, sans-serif;
}

.leaf-fall {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
  perspective: 700px;
  /* Confine the fall to the h1 logo bar, and punch the logo artwork out of it so
     leaves never land on the logo. The gradient is transparent ACROSS the logo
     (left..right) and opaque outside it. */
  clip-path: inset(var(--logo-particle-top, 0px) 0 var(--logo-particle-bottom, 100vh) 0);
  -webkit-mask-image: linear-gradient(to right, #000 0 var(--logo-left, 0px), transparent var(--logo-left, 0px) var(--logo-right, 100%), #000 var(--logo-right, 100%) 100%);
  mask-image: linear-gradient(to right, #000 0 var(--logo-left, 0px), transparent var(--logo-left, 0px) var(--logo-right, 100%), #000 var(--logo-right, 100%) 100%);
}

.leaf-fall span {
  /* Older browsers without color-mix() use these plain fallbacks (they get
     skipped by engines that do support color-mix, which re-declare below). */
  --shade: #d2913a;
  --gold: #f0b429;
  --gold-lit: #ffe08a;
  --gold-deep: #a8700d;
  /* Every leaf is pushed most of the way to gold, so the palette stays varied
     (some leaves land amber, some deep bronze) while reading as one material. */
  --shade: color-mix(in srgb, var(--leaf-color), var(--gold) 78%);
  position: absolute;
  top: -28px;
  left: var(--leaf-left);
  width: var(--leaf-size);
  height: calc(var(--leaf-size) * 0.72);
  border-radius: 100% 0 100% 0;
  /* Layers, front to back: the travelling sheen, an inner shading that gives
     the blade volume, a soft highlight, then the gold body itself. */
  /* Plain-color fallbacks before each color-mix() so older browsers keep a
     sensible gradient instead of dropping the declaration entirely. */
  background:
    linear-gradient(125deg, rgba(255, 246, 214, 0.55), rgba(255, 224, 138, 0.18) 45%, transparent 52%),
    radial-gradient(130% 110% at 72% 80%, rgba(78, 43, 4, 0.34), transparent 60%),
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.3), transparent 28%),
    linear-gradient(135deg, var(--gold-lit) 0%, var(--shade) 48%, var(--gold-deep) 100%);
  background:
    linear-gradient(125deg, rgba(255, 246, 214, 0.55), rgba(255, 224, 138, 0.18) 45%, transparent 52%),
    radial-gradient(130% 110% at 72% 80%, rgba(78, 43, 4, 0.34), transparent 60%),
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.3), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--shade), var(--gold-lit) 34%) 0%, var(--shade) 48%, color-mix(in srgb, var(--shade), var(--gold-deep) 42%) 100%);
  background-size: 260% 100%, auto, auto, auto;
  background-repeat: no-repeat;
  background-position: 150% 0, 0 0, 0 0, 0 0;
  border: 1px solid #a8700d;
  border: 1px solid color-mix(in srgb, var(--shade), var(--gold-deep) 46%);
  box-shadow: 1px 3px 5px rgba(48, 22, 8, 0.28), inset 2px 1px 2px rgba(255, 255, 255, 0.28), inset -2px -2px 3px rgba(37, 16, 4, 0.2);
  filter: saturate(1.35) contrast(1.06);
  opacity: 0.98;
  animation: leafFall var(--leaf-duration) linear var(--leaf-delay) infinite,
             leafShimmer calc(var(--leaf-duration) / 4) ease-in-out calc(var(--leaf-delay) / 2) infinite,
             leafSheen 1.9s ease-in-out infinite;
}

/* Veining: a strong midrib down the length of the blade, with fine side veins
   branching off it at a steep angle. Only ONE direction is drawn -- an opposing
   set crosses it into a uniform mesh that reads as fabric, not a leaf.
   Inheriting the blade's border-radius clips the whole pattern to the shape. */
.leaf-fall span::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    repeating-linear-gradient(72deg, transparent 0 4.5px, rgba(122, 68, 8, 0.42) 4.5px 5.2px, transparent 5.2px 11px),
    linear-gradient(-45deg, transparent calc(50% - 0.7px), rgba(96, 50, 4, 0.85) calc(50% - 0.7px) calc(50% + 0.8px), transparent calc(50% + 0.8px));
  opacity: 0.62;
}

/* The stem, growing out of the blade's base at the bottom-left corner -- the
   two rounded tips of the border-radius are the tip and the base. */
.leaf-fall span::after {
  content: "";
  position: absolute;
  left: -1px;
  bottom: 0;
  width: 38%;
  height: 1.4px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(96, 52, 4, 0.9), var(--gold-lit));
  background: linear-gradient(90deg, rgba(96, 52, 4, 0.9), color-mix(in srgb, var(--shade), var(--gold-lit) 30%));
  box-shadow: 0 1px 1px rgba(48, 22, 8, 0.3);
  transform: rotate(36deg);
  transform-origin: left center;
}

/* The fall is confined to the h1 logo bar (see .leaf-fall clip-path), so the
   travel is measured against that bar's height rather than the viewport.
   --leaf-start / --leaf-end are set from the logo's live bounds in the page
   script, and default to a full-viewport drop before that first runs. */
@keyframes leafFall {
  0% {
    transform: translate3d(0, var(--leaf-start, -5vh), 0) rotate(-18deg);
  }
  20% {
    transform: translate3d(calc(var(--leaf-drift) * -1.2), calc(var(--leaf-start, 0px) + (var(--leaf-span, 100dvh) * 0.2)), 0) rotate(62deg);
  }
  40% {
    transform: translate3d(calc(var(--leaf-drift) * 1.1), calc(var(--leaf-start, 0px) + (var(--leaf-span, 100dvh) * 0.4)), 0) rotate(154deg);
  }
  60% {
    transform: translate3d(calc(var(--leaf-drift) * -0.8), calc(var(--leaf-start, 0px) + (var(--leaf-span, 100dvh) * 0.6)), 0) rotate(246deg);
  }
  80% {
    transform: translate3d(calc(var(--leaf-drift) * 0.9), calc(var(--leaf-start, 0px) + (var(--leaf-span, 100dvh) * 0.8)), 0) rotate(338deg);
  }
  100% {
    transform: translate3d(0, var(--leaf-end, 105dvh), 0) rotate(420deg);
  }
}

/* The sheen rides the leaf's own top background layer, so the highlight sweeps
   across the whole blade. It animates background-position only, which composes
   with leafFall's transform instead of fighting it. Every layer's position has
   to be listed, since the shorthand resets them all. */
@keyframes leafShimmer {
  0%, 100% {
    filter: saturate(1.2) contrast(1.04) brightness(0.9);
  }
  35% {
    filter: saturate(1.65) contrast(1.1) brightness(1.32);
  }
  60% {
    filter: saturate(1.4) contrast(1.06) brightness(1.06);
  }
}

/* The specular band sweeping across the leaf surface. */
@keyframes leafSheen {
  0% {
    background-position: 150% 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-position: -60% 0, 0 0, 0 0, 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .leaf-fall span {
    animation: none;
    background-position: 50% 0, 0 0, 0 0, 0 0;
  }
}

.site-header {
  position: relative;
}

.site-header h1 {
  background: #000;
  padding: 16px 20px 28px;
  text-align: center;
  margin: 0;
}

.leaf-cluster {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: clamp(70px, 12vw, 150px);
  height: clamp(70px, 12vw, 150px);
  pointer-events: none;
}

.leaf-cluster--left {
  left: 0;
  transform: translateY(-35%);
}

.leaf-cluster--right {
  right: 0;
  transform: translateY(-35%) scaleX(-1);
}

.static-leaf {
  position: absolute;
  width: 48%;
  height: 66%;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, #d79b32, #8c3f1c 72%);
  border: 1px solid rgba(62, 27, 10, 0.55);
  box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.35);
  opacity: 0.95;
}

.static-leaf::after {
  content: "";
  position: absolute;
  top: 48%;
  left: 8%;
  width: 86%;
  height: 1px;
  background: rgba(255, 233, 158, 0.7);
  transform: rotate(-32deg);
  transform-origin: left center;
}

.static-leaf--one { left: 0; top: 28%; transform: rotate(-32deg); }
.static-leaf--two { left: 35%; top: 3%; transform: rotate(24deg) scale(0.82); background: linear-gradient(135deg, #c8752d, #5f7d2c 75%); }
.static-leaf--three { left: 43%; top: 48%; transform: rotate(76deg) scale(0.7); background: linear-gradient(135deg, #d8a23a, #9a4b25 70%); }
.static-leaf--four { left: 0; top: 18%; transform: rotate(-18deg) scale(0.9); background: linear-gradient(135deg, #a6a83c, #526b2d 75%); }
.static-leaf--five { left: 42%; top: 42%; transform: rotate(48deg); background: linear-gradient(135deg, #d39a2f, #8a3e1f 72%); }
.static-leaf--six { left: 32%; top: 4%; transform: rotate(92deg) scale(0.7); background: linear-gradient(135deg, #789b38, #356b3b 78%); }

.logo-mark {
  position: relative;
  display: block;
  width: min(92%, 448px);
  /* Show the original image through the complete circle only—no wording. */
  aspect-ratio: 424 / 280;
  margin: 0 auto;
  /* Visible so the corner spotlights can travel in from off-canvas. */
  overflow: visible;
  perspective: 900px;
  transform-style: preserve-3d;
}

.logo-motion {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  transform: rotateX(7deg) rotateY(-8deg) translateZ(0);
  transform-style: preserve-3d;
  animation: filLogoFloat 7s ease-in-out infinite;
  will-change: transform;
}

.logo-motion::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: none;
  box-shadow: none;
  pointer-events: none;
}

.fil-logo-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: translateZ(18px);
  filter: contrast(1.08) saturate(1.08) brightness(1.05) drop-shadow(0 2px 1px rgba(255, 255, 255, 0.25));
}

/* Two corner spotlights. Each starts off in its own corner, outside the
   logo box, then glides in and settles on the corresponding logo corner
   to add a highlight. Mirrored keyframes keep the two in sync. */
.logo-spot {
  position: absolute;
  z-index: 3;
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translateZ(34px);
  /* Screen-blend so the pool ADDS light to the gold artwork instead of
     washing over it as grey fog. */
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.logo-spot--left {
  /* Anchored to the artwork's upper-left glint (~28%, ~27% of the image),
     not the box corner, since the art is a circle inside a rectangle. */
  left: 15.2%;
  top: 7.6%;
  background: radial-gradient(circle at center, rgba(255, 247, 227, 0.98) 0%, rgba(255, 223, 163, 0.62) 26%, rgba(255, 199, 110, 0.22) 50%, rgba(255, 190, 90, 0) 72%);
  animation: filLogoSpotLeft 5.4s ease-in-out infinite;
}

.logo-spot--right {
  /* Mirrored anchor for the lower-right glint (~76.5%, ~77%). */
  right: 15.2%;
  top: 57.6%;
  background: radial-gradient(circle at center, rgba(255, 247, 227, 0.98) 0%, rgba(255, 223, 163, 0.62) 26%, rgba(255, 199, 110, 0.22) 50%, rgba(255, 190, 90, 0) 72%);
  animation: filLogoSpotRight 5.4s ease-in-out infinite;
}

/* The cart page holds the logo perfectly still -- no float animation and no
   corner spotlight sweeps. This is keyed to data-logo-still, NOT data-cart:
   data-cart means "this page can add/show cart items", which is true on every
   shop page, so keying the styling to it would freeze the logo sitewide. */
body[data-logo-still="on"] .logo-motion {
  transform: none;
  animation: none;
  will-change: auto;
}

body[data-logo-still="on"] .logo-spot {
  display: none;
}

/* Crop the image just above the gold wordmark so only the circle shows.
   The artwork is 436x400 with the circle ending around y=277 and the
   wording starting around y=288, so the visible slice stops at y~283.
   object-fit:cover + object-position:center top then scales that slice
   to fill the box. 424/275 works out to a cut at y~284. */
body[data-logo-still="on"] .logo-mark {
  aspect-ratio: 424 / 275;
}

@keyframes filLogoFloat {
  0%, 100% {
    transform: rotateX(7deg) rotateY(-8deg) translateX(-4%) translateZ(0);
  }
  50% {
    transform: rotateX(5deg) rotateY(8deg) translateX(4%) translateZ(24px);
  }
}

/* Held off-canvas at both ends so the reset is never visible.
   translateX/Y percentages are relative to the spotlight's own size. */
@keyframes filLogoSpotLeft {
  0%, 8% {
    transform: translate(-115%, -105%) translateZ(34px);
    opacity: 0;
  }
  20% {
    opacity: 0.55;
  }
  44% {
    transform: translate(-6%, -5%) translateZ(34px);
    opacity: 1;
  }
  60% {
    transform: translate(0, 0) translateZ(34px);
    opacity: 0.9;
  }
  78%, 100% {
    transform: translate(-115%, -105%) translateZ(34px);
    opacity: 0;
  }
}

@keyframes filLogoSpotRight {
  0%, 8% {
    transform: translate(115%, -105%) translateZ(34px);
    opacity: 0;
  }
  20% {
    opacity: 0.55;
  }
  44% {
    transform: translate(6%, -5%) translateZ(34px);
    opacity: 1;
  }
  60% {
    transform: translate(0, 0) translateZ(34px);
    opacity: 0.9;
  }
  78%, 100% {
    transform: translate(115%, -105%) translateZ(34px);
    opacity: 0;
  }
}

.announcement-bar {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  padding: 16px 28px;
  background: linear-gradient(180deg, #2a2a2a 0%, #171717 100%);
  color: #f2d77b;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* The track is a two-copy marquee. It is parked at left:100% -- its left edge
   sitting exactly on the bar's right edge -- so the first copy walks IN from the
   right-hand side. --ann-gap is the pause between the end of one copy and the
   start of the next; it must match the padding on .announcement-sequence. */
.announcement-track {
  --ann-gap: 72px;
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  animation: scrollAnnouncement 22s linear infinite;
  position: absolute;
  top: 0;
  left: 100%;
  bottom: 0;
  z-index: 2;
}

.announcement-sequence {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
  padding-right: var(--ann-gap, 72px);
}

.announcement-bar:hover .announcement-track {
  animation-play-state: paused;
}

.announcement-track span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ribbon-banner {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 16px 36px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(180deg, #f8df8b 0%, #d7a93d 28%, #b47a1c 100%);
  color: #1f1b12;
  border-top: 2px solid #7d5510;
  border-bottom: 2px solid #7d5510;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.46), inset 0 -4px 0 rgba(120,83,20,0.35);
}

.ribbon-banner::before,
.ribbon-banner::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(135deg, #fff0b8 0%, #e0b958 32%, #a66d1d 100%);
  box-shadow: inset -4px 0 0 rgba(101,70,10,0.65), inset 3px 0 0 rgba(255,255,255,0.3);
}

.ribbon-banner::before {
  left: 0;
  clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
}

.ribbon-banner::after {
  right: 0;
  transform: scaleX(-1);
  clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
}

.ribbon-content {
  position: relative;
  z-index: 1;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * Falling hearts, hung directly under the ribbon banner.
 *
 * The layer is fixed but its top is pinned to the ribbon's bottom edge
 * (--heart-top, set from the ribbon's live bounds in the page script), so
 * the hearts appear to stream out from beneath the banner and rain down
 * over the content below it. Hearts are generated by script and sized
 * through --heart-size, which the script also scales down on narrower
 * screens -- each heart keeps its own size, so the fall always mixes
 * small and large ones rather than reading as uniform confetti.
 * ------------------------------------------------------------------ */
.heart-fall {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
  perspective: 700px;
  /* Start at the ribbon's bottom edge and fade out before reaching the
     footer, so the fall reads as a local effect rather than a screen wash. */
  clip-path: inset(var(--heart-top, 100vh) 0 var(--heart-bottom, 0px) 0);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 60px, #000 calc(100% - 120px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 60px, #000 calc(100% - 120px), transparent 100%);
}

.heart-fall span {
  position: absolute;
  top: 0;
  left: var(--heart-left);
  width: var(--heart-size, 16px);
  height: calc(var(--heart-size, 16px) * 0.92);
  opacity: 0.95;
  transform-origin: 50% 50%;
  /* The heart body: a dark red ramp with a soft highlight at the top-left
     and a shadow pooling at the lower-right, so the shape reads as volume.
     The silhouette itself is carved by the ::before clip-path below. */
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 200, 200, 0.4), transparent 36%),
    radial-gradient(circle at 76% 84%, rgba(30, 0, 0, 0.55), transparent 54%),
    linear-gradient(145deg, #9c2b37 0%, var(--heart-color, #8b0f1d) 45%, var(--heart-color, #8b0f1d) 100%);
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 200, 200, 0.4), transparent 36%),
    radial-gradient(circle at 76% 84%, rgba(30, 0, 0, 0.55), transparent 54%),
    linear-gradient(145deg, color-mix(in srgb, var(--heart-color, #8b0f1d), #ffffff 12%) 0%, var(--heart-color, #8b0f1d) 45%, color-mix(in srgb, var(--heart-color, #8b0f1d), #160205 46%) 100%);
  filter: drop-shadow(0 2px 3px rgba(48, 4, 10, 0.34));
  animation: heartFall var(--heart-duration) linear var(--heart-delay) infinite,
             heartGlow calc(var(--heart-duration) / 5) ease-in-out calc(var(--heart-delay) / 2) infinite;
}

/* Two lobes plus the point: the classic heart outline, drawn as one path so
   the background is clipped to it exactly. */
.heart-fall span::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  -webkit-clip-path: path("M0.5,0.24 C0.5,0.05 0.72,0 0.86,0.1 C1,0.2 1,0.4 0.9,0.54 L0.5,1 L0.1,0.54 C0,0.4 0,0.2 0.14,0.1 C0.28,0 0.5,0.05 0.5,0.24 Z");
  clip-path: path("M0.5,0.24 C0.5,0.05 0.72,0 0.86,0.1 C1,0.2 1,0.4 0.9,0.54 L0.5,1 L0.1,0.54 C0,0.4 0,0.2 0.14,0.1 C0.28,0 0.5,0.05 0.5,0.24 Z");
}

/* A small specular dot that rides the highlight; sized in % so it scales
   with each heart and never spills outside the silhouette. */
.heart-fall span::after {
  content: "";
  position: absolute;
  left: 24%;
  top: 14%;
  width: 20%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 232, 0.85), rgba(255, 200, 200, 0));
  opacity: 0.72;
}

/* The fall is written against the ribbon's own geometry: --heart-top pins the
   layer's top edge to the ribbon's bottom edge, and the keyframe travel starts
   a touch above that (--heart-start) so hearts are already emerging as they
   enter the visible box, then lands at --heart-end near the foot of the page.
   Hearts tumble and sway rather than flutter: a gentle drift plus a slow spin. */
@keyframes heartFall {
  0% {
    transform: translate3d(0, var(--heart-start, -5vh), 0) rotate(-10deg) scale(0.8);
  }
  25% {
    transform: translate3d(calc(var(--heart-drift) * -0.9), calc(var(--heart-start, 0px) + (var(--heart-span, 100dvh) * 0.25)), 0) rotate(32deg) scale(1.08);
  }
  50% {
    transform: translate3d(calc(var(--heart-drift) * 0.85), calc(var(--heart-start, 0px) + (var(--heart-span, 100dvh) * 0.5)), 0) rotate(88deg) scale(0.92);
  }
  75% {
    transform: translate3d(calc(var(--heart-drift) * -0.6), calc(var(--heart-start, 0px) + (var(--heart-span, 100dvh) * 0.75)), 0) rotate(152deg) scale(1.12);
  }
  100% {
    transform: translate3d(0, var(--heart-end, 105dvh), 0) rotate(212deg) scale(0.86);
  }
}

/* Breathing glow, animated on filter so it composes with the fall rather
   than overwriting its transform. */
@keyframes heartGlow {
  0%, 100% {
    filter: drop-shadow(0 2px 3px rgba(48, 4, 10, 0.34)) brightness(0.9) saturate(1.05);
  }
  45% {
    filter: drop-shadow(0 2px 3px rgba(48, 4, 10, 0.34)) brightness(1.24) saturate(1.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .heart-fall {
    display: none;
  }
}

.tab-bar {
  display: flex;
  position: relative;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  overflow: visible;
  box-sizing: border-box;
  padding: 0 20px;
  background: #000;
  border-bottom: 1px solid #2b2b2b;
}

.tab-link {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 14px 18px 12px;
  background: #000;
  color: #fff;
  border: 1px solid rgba(201, 161, 75, 0.35);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease, color 180ms ease;
}

.home-cutout {
  display: inline-block;
  width: 14px;
  height: 13px;
  background: #fff;
  -webkit-clip-path: polygon(50% 0, 100% 38%, 86% 38%, 86% 100%, 14% 100%, 14% 38%, 0 38%);
  clip-path: polygon(50% 0, 100% 38%, 86% 38%, 86% 100%, 14% 100%, 14% 38%, 0 38%);
}

.man-outline {
  display: inline-block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.boy-outline,
.girl-outline {
  display: inline-block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

/* Create Account and Cart stay paired at the right edge: the auto margin on
   Create Account absorbs all the free space ahead of it, so the category tabs
   sit together at the left and the two utility tabs stay side by side. */
.account-link {
  margin-left: auto;
  min-width: 0;
}

.cart-link {
  margin-left: 0;
}

.account-outline {
  display: inline-block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.cart-outline {
  display: inline-block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.girl-outline path:first-child {
  stroke-width: 1.4;
}

.woman-outline {
  display: inline-block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.tab-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: #c9a14b;
  transform: scaleX(0);
  transition: transform 160ms ease;
}

.tab-link:hover::after,
.tab-link--active::after {
  transform: scaleX(1);
}

.tab-link:hover,
.tab-link--active {
  background: #c9a14b;
  color: #000;
  border-color: #c9a14b;
  box-shadow: 0 0 0 1px rgba(201, 161, 75, 0.2), 0 0 16px rgba(201, 161, 75, 0.22);
  transform: translateY(-1px);
}

.tab-link:hover .home-cutout,
.tab-link--active .home-cutout {
  background: #000;
}

.tab-link:hover .man-outline,
.tab-link:hover .woman-outline,
.tab-link:hover .boy-outline,
.tab-link:hover .girl-outline,
.tab-link--active .man-outline,
.tab-link--active .woman-outline,
.tab-link--active .boy-outline,
.tab-link--active .girl-outline {
  stroke: #000;
}

.products-section {
  /* Narrower than the viewport on desktop so the free space either side
     of the section can carry ad / sponsored-ad columns. */
  max-width: 940px;
  margin: 32px auto 0;
  padding: 42px 24px 56px;
  background: #f6f6f4;
  border: 1px solid #e8e8e5;
  border-radius: 24px;
}

.about-us-copy {
  max-width: 72ch;
  display: grid;
  gap: 18px;
}

.about-us-copy p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: #4a4a46;
}

.about-us-copy p:first-child {
  font-size: 1.1rem;
  color: #2c2c29;
}

.products-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.filter-menu {
  position: relative;
  flex: 0 0 auto;
}

.filter-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #d4d4d0;
  border-radius: 999px;
  background: #fff;
  color: #000;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  list-style: none;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease, transform 0.15s ease;
}

.filter-menu summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 161, 75, 0.45);
}

.filter-menu summary::-webkit-details-marker {
  display: none;
}

.tab-bar .filter-menu summary {
  min-height: 0;
  padding: 12px 18px;
  border: 1px solid rgba(201, 161, 75, 0.45);
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.tab-bar .filter-menu {
  position: absolute;
  left: 20px;
}

.tab-bar .filter-menu summary:hover,
.tab-bar .filter-menu[open] summary {
  background: #c9a14b;
  color: #000;
}

.filter-menu summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.25s ease;
}

.filter-menu[open] summary::after {
  transform: rotate(-135deg) translateY(-1px);
}

.filter-menu[open] summary,
.filter-menu summary:hover {
  background: #000;
  color: #fff;
}

.filter-menu summary:hover {
  border-color: rgba(201, 161, 75, 0.8);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
}

.filter-menu__content {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 4;
  display: grid;
  gap: 2px;
  min-width: 210px;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
  color: #000;
  font-size: 13px;
  transform-origin: top left;
  animation: filter-menu-in 0.18s ease-out;
}

@keyframes filter-menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .filter-menu__content {
    animation: none;
  }
  .filter-menu summary::after {
    transition: none;
  }
}

.filter-menu__content strong {
  padding: 4px 10px 8px;
  color: #8a8a86;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.filter-menu__content label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.filter-menu__content label:hover {
  background: #f4f1ea;
}

.filter-menu__content label:has(input[type="radio"]:checked),
.filter-menu__content label.filter-selected {
  background: #000;
  color: #fff;
  font-weight: 600;
}

.filter-menu__content input[type="radio"] {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 0;
  appearance: none;
  border: 2px solid #b3b0a8;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filter-menu__content label:hover input[type="radio"] {
  border-color: #c9a14b;
}

.filter-menu__content input[type="radio"]:checked {
  border-color: #000;
  background: #000;
  box-shadow: inset 0 0 0 3px #fff;
}

.filter-menu__content label:has(input[type="radio"]:checked) input[type="radio"],
.filter-menu__content label.filter-selected input[type="radio"] {
  border-color: #c9a14b;
  background: #c9a14b;
  box-shadow: inset 0 0 0 3px #000;
}

.filter-menu__submit {
  margin-top: 8px;
  padding: 10px 16px;
  border: 1px solid #000;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.filter-menu__submit:hover,
.filter-menu__submit:focus-visible {
  background: #c9a14b;
  border-color: #c9a14b;
  color: #000;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(201, 161, 75, 0.4);
}

.filter-menu__submit:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(201, 161, 75, 0.3);
}

.section-eyebrow {
  margin: 0 0 8px;
  color: #666;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.products-heading h2 {
  margin: 0;
  color: #000;
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 400;
}

/* The border lives on the wrapper so the arrow lane is real padding, not an
   overlay -- that way a full-height arrow never covers a product card. */
.products-carousel-wrap {
  --carousel-gutter: 56px;
  position: relative;
  padding: 12px;
  border: 1px solid rgba(201, 161, 75, 0.9);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(201, 161, 75, 0.12);
}

.carousel-controls {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 5;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  pointer-events: none;
}

.carousel-controls .carousel-button {
  pointer-events: auto;
  width: 40px;
  align-self: stretch;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.carousel-button {
  width: 40px;
  border: 1px solid #d4d4d0;
  border-radius: 12px;
  background: #fff;
  color: #000;
  cursor: pointer;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.carousel-icon {
  display: block;
  flex: 0 0 auto;
}

.carousel-button:hover {
  background: #000;
  color: #fff;
}

.products-carousel {
  margin-inline: var(--carousel-gutter, 0px);
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.products-carousel::-webkit-scrollbar {
  display: none;
}

.product-card {
  /* 3 cards per row: 2 gaps of 18px shared across the three cards */
  flex: 0 0 calc((100% - 36px) / 3);
  min-width: 0;
  overflow: hidden;
  padding: 6px;
  border: 1px solid #e5e5e1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(20, 20, 18, 0.06);
  scroll-snap-align: start;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.product-card[hidden] {
  display: none;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 30px rgba(20, 20, 18, 0.12);
}

.product-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 11px;
  background-position: center;
  background-size: cover;
}

.product-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.28), transparent 38%, rgba(0,0,0,0.08));
  opacity: 0.7;
  transition: opacity 180ms ease;
}

.product-card:hover .product-image::after {
  opacity: 1;
}

.product-image--cream {
  background: linear-gradient(145deg, #f5eee4 0 45%, #c9b49e 45% 62%, #eee5d8 62%);
}

.product-image--black {
  background: linear-gradient(145deg, #111 0 43%, #4a4a4a 43% 58%, #1c1c1c 58%);
}

.product-image--rose {
  background: linear-gradient(145deg, #ead1d0 0 46%, #b8787b 46% 61%, #f1dedd 61%);
}

.product-image--denim {
  background: linear-gradient(145deg, #b9c9d4 0 45%, #50728a 45% 60%, #d9e1e5 60%);
}

.product-image--sage {
  background: linear-gradient(145deg, #dfe6da 0 46%, #7f9a78 46% 61%, #e9efe4 61%);
}

.product-image--camel {
  background: linear-gradient(145deg, #ecdfcb 0 44%, #b0895a 44% 60%, #f0e6d6 60%);
}

/* ------------------------------------------------------------------ *
 * Cart
 * ------------------------------------------------------------------ */

.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: #c9a14b;
  color: #000;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.cart-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 42px 24px 60px;
}

.cart-page__heading h1 {
  margin: 0 0 6px;
  font-size: 34px;
}

.cart-page__count {
  margin: 0 0 28px;
  color: #666;
  font-size: 14px;
}

.cart-page__empty {
  padding: 54px 24px;
  border: 1px solid #e5e5e1;
  border-radius: 16px;
  background: #fff;
  text-align: center;
}

.cart-page__empty h2 {
  margin: 0 0 8px;
  font-size: 22px;
}

.cart-page__empty p {
  margin: 0 0 20px;
  color: #666;
}

.cart-page__shop,
.cart-checkout {
  display: inline-block;
  padding: 11px 24px;
  border: 1px solid #000;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.cart-page__shop:hover,
.cart-checkout:hover {
  background: #c9a14b;
  border-color: #c9a14b;
  color: #000;
}

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 26px;
  align-items: start;
}

/* An explicit display here beats the [hidden] attribute's UA display:none,
   which would otherwise leave the summary visible on an empty cart. */
.cart-layout[hidden],
.cart-page__empty[hidden] {
  display: none;
}

.cart-items {
  display: grid;
  gap: 14px;
}

.cart-items-wrap {
  display: grid;
  gap: 14px;
  min-width: 0;
}

/* Select-all row above the items: the checkbox and the "N of M selected"
   count sit on one line, wrapping on narrow screens. */
.cart-selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border: 1px solid #e5e5e1;
  border-radius: 14px;
  background: #f6f6f4;
}

.cart-selection__all {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.cart-selection__count {
  margin: 0;
  color: #666;
  font-size: 13px;
}

.cart-item {
  display: grid;
  grid-template-columns: 28px 104px minmax(0, 1fr) auto 96px 96px;
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid #e5e5e1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(20, 20, 18, 0.06);
  transition: border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

/* An excluded line dims slightly so the selected set reads at a glance, but
   stays fully interactive -- it is still in the cart, just not being bought. */
.cart-item:not(.cart-item--selected) {
  opacity: 0.58;
}

.cart-item--selected {
  border-color: rgba(201, 161, 75, 0.75);
  box-shadow: 0 8px 24px rgba(201, 161, 75, 0.16);
}

.cart-item__select {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cart-item__checkbox,
.cart-selection__all input[type='checkbox'] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #000;
  cursor: pointer;
}

.cart-item__checkbox:focus-visible,
.cart-selection__all input[type='checkbox']:focus-visible {
  outline: 2px solid rgba(201, 161, 75, 0.6);
  outline-offset: 2px;
}

.cart-item__image {
  width: 104px;
  aspect-ratio: 4 / 5;
  border-radius: 11px;
  background-size: cover;
  background-position: center;
}

.cart-item__name {
  margin: 0 0 4px;
  font-size: 17px;
}

.cart-item__unit {
  margin: 0 0 10px;
  color: #666;
  font-size: 13px;
}

.cart-item__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  color: #8a3b2f;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.cart-item__remove:hover {
  border-color: rgba(138, 59, 47, 0.35);
  background: rgba(138, 59, 47, 0.08);
}

.cart-item__remove:focus-visible {
  outline: 2px solid rgba(138, 59, 47, 0.5);
  outline-offset: 2px;
}

/* Icon-only trash button: the strokes follow currentColor so the hover colour
   applies to the artwork too. */
.cart-item__remove-icon {
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart-item__label {
  display: block;
  margin-bottom: 6px;
  color: #8a8a85;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cart-item__unit-price,
.cart-item__line-total {
  font-weight: 600;
}

.cart-item__line-total {
  font-size: 17px;
}

.quantity-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d4d4d0;
  border-radius: 999px;
  overflow: hidden;
}

.quantity-button {
  width: 30px;
  height: 30px;
  border: 0;
  background: #f5f5f2;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.quantity-button:hover {
  background: #c9a14b;
}

.quantity-input {
  width: 42px;
  height: 30px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

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

.cart-totals {
  position: sticky;
  top: 20px;
  padding: 22px;
  border: 1px solid #e5e5e1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(20, 20, 18, 0.06);
}

.cart-totals h2 {
  margin: 0 0 16px;
  font-size: 19px;
}

.cart-totals dl {
  margin: 0 0 14px;
}

.cart-totals__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
}

.cart-totals__row dt,
.cart-totals__row dd {
  margin: 0;
}

.cart-totals__row--total {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid #e5e5e1;
  font-size: 18px;
  font-weight: 700;
}

.cart-totals__note {
  margin: 0 0 16px;
  color: #666;
  font-size: 12px;
}

.cart-checkout {
  display: block;
  width: 100%;
  text-align: center;
}

.cart-checkout:disabled {
  background: #c9c9c9;
  border-color: #c9c9c9;
  color: #fff;
  cursor: not-allowed;
}

.cart-checkout:disabled:hover {
  background: #c9c9c9;
  border-color: #c9c9c9;
  color: #fff;
}

.cart-continue {
  display: block;
  margin-top: 12px;
  color: #000;
  font-size: 13px;
  text-align: center;
  text-decoration: underline;
}

.add-to-cart {
  width: 100%;
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid #000;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease;
  /* Label + count side by side, centred as one unit. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

/* "Add to Cart" text, kept in its own span so the count can sit beside it. */
.add-to-cart__label {
  display: inline-block;
}

/* Per-product quantity already in the cart. Hidden until there is one. */
.add-to-cart__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #c9a14b;
  color: #000;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.add-to-cart__count[hidden] {
  display: none;
}

.add-to-cart:hover {
  background: #c9a14b;
  border-color: #c9a14b;
  color: #000;
}

.add-to-cart--added {
  background: #2f6b3c;
  border-color: #2f6b3c;
  color: #fff;
}

.product-card__meta {
  padding: 10px 4px 4px;
}

.product-card__name {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
}

.product-card__price {
  margin: 0;
  color: #666;
  font-size: 13px;
}

@media (max-width: 900px) {
  .cart-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .cart-totals {
    position: static;
  }
}

@media (max-width: 620px) {
  .cart-item {
    grid-template-columns: 28px 84px minmax(0, 1fr);
    row-gap: 14px;
  }

  .cart-item__image {
    width: 84px;
  }

  .cart-item__info,
  .cart-item__quantity,
  .cart-item__price,
  .cart-item__total {
    grid-column: 3;
  }
}

.signup-widget {
  position: fixed;
  left: 16px;
  left: calc(16px + env(safe-area-inset-left, 0px));
  bottom: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  inset-inline-start: 16px;
  inset-block-end: 16px;
  z-index: 30;
  width: 340px;
  max-width: calc(100vw - 32px);
  min-width: 0;
  font-family: inherit;
}

.signup-toggle,
.signup-form button {
  border: 0;
  cursor: pointer;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.signup-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 44px;
  padding: 18px 24px;
  border: 1px solid #2b2b2b;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.2;
  font-weight: 400;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.signup-toggle:hover {
  background: #222;
}

.signup-panel {
  position: absolute;
  left: 0;
  bottom: 70px;
  width: 340px;
  max-width: calc(100vw - 32px);
  min-width: 0;
  overflow: hidden;
  padding: 16px;
  border: 1px solid #d5d5d5;
  border-radius: 14px;
  background: #fff;
  color: #000;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
}

.signup-panel[hidden] {
  display: none;
}

.signup-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.signup-header div {
  display: grid;
  gap: 4px;
}

.signup-header strong {
  font-size: 17px;
  font-weight: 600;
}

.signup-header span {
  color: #555;
  font-size: 13px;
}

.signup-close {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #000;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.signup-close:hover {
  background: #f1f1f1;
}

.signup-form[hidden],
.signup-consent[hidden],
.signup-field[hidden] {
  display: none;
}
.signup-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.signup-row {
  display: flex;
  gap: 8px;
}
.signup-field {
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.signup-field label {
  color: #333;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}
.signup-req {
  color: #b3261e;
  font-weight: 700;
}
.signup-required-note {
  margin: 0;
  color: #666;
  font-size: 11px;
  text-align: left;
}
.signup-invalid {
  border-color: #b3261e !important;
  background: #fff6f5 !important;
}

.signup-choice {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.signup-choice-label {
  display: block;
  margin-bottom: 6px;
  color: #333;
  font-size: 12px;
  font-weight: 600;
}
.signup-contact-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-size: 12px;
  cursor: pointer;
}
.signup-contact-select:hover {
  border-color: #9a9a9a;
}
.signup-choice--invalid .signup-contact-select {
  border-color: #b3261e;
  background: #fff6f5;
}

.signup-req--cond[hidden] {
  display: none;
}

.signup-phone-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.signup-phone-flag {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
}
.signup-form .signup-phone-country {
  flex: 0 0 82px;
  width: 82px;
}
.signup-form input[type='tel'],
.signup-form .signup-phone-country,
.signup-country {
  min-width: 0;
  width: 100%;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
  color: #000;
  font: inherit;
  font-size: 13px;
}
.signup-form .signup-phone-row input[type='tel'] {
  flex: 1 1 auto;
}
.signup-country {
  margin-top: 6px;
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #555 50%), linear-gradient(135deg, #555 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}
.signup-hint {
  margin: 6px 0 0;
  color: #666;
  font-size: 11px;
}

.signup-form input[type='text'],
.signup-form input[type='email'],
.signup-form input[type='tel'],
.signup-form .signup-phone-country {
  min-width: 0;
  width: 100%;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
  color: #000;
  font: inherit;
  font-size: 13px;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.signup-form button {
  min-height: 46px;
  border-radius: 8px;
  padding: 0 18px;
  background: #000;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.signup-form button:hover {
  background: #222;
}
.signup-form button:disabled {
  background: #c9c9c9;
  color: #fff;
  cursor: not-allowed;
}
.signup-form button:disabled:hover {
  background: #c9c9c9;
}
.signup-consent.signup-locked {
  opacity: 0.55;
}
.signup-consent.signup-locked input {
  cursor: not-allowed;
}
.signup-consent.signup-locked label {
  cursor: not-allowed;
}
.signup-consent input[type='checkbox'] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: #000;
  cursor: pointer;
}
.signup-consent input:disabled {
  cursor: not-allowed;
}

.signup-status {
  min-height: 18px;
  margin: 10px 0 0;
  color: #555;
  font-size: 12px;
}
.signup-status.signup-error {
  color: #b3261e;
  font-weight: 600;
}
.signup-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  cursor: pointer;
}
.signup-consent label {
  color: #333;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}
.signup-success {
  display: grid;
  gap: 8px;
  padding: 6px 2px 2px;
  text-align: center;
  outline: none;
}
.signup-success[hidden] {
  display: none;
}
.signup-success strong {
  color: #000;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.5px;
}
.signup-success span {
  color: #333;
  font-size: 13px;
  line-height: 1.4;
}

/* Client account creation form (account.html). Reuses the signup field/consent
   pieces but is the page's main content, so it gets its own card and inputs. */
.account-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto 8px;
  padding: 28px 24px 30px;
  background: #f6f6f4;
  border: 1px solid #e8e8e5;
  border-radius: 20px;
}

.account-form[hidden] {
  display: none;
}

.account-form input[type='text'],
.account-form input[type='email'],
.account-form input[type='password'] {
  min-width: 0;
  width: 100%;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  color: #000;
  font: inherit;
  font-size: 13px;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.account-form input[type='text']:focus,
.account-form input[type='email']:focus,
.account-form input[type='password']:focus {
  border-color: #c9a14b;
  outline: 2px solid rgba(201, 161, 75, 0.3);
  outline-offset: 1px;
}

.account-form__submit {
  min-height: 46px;
  margin-top: 4px;
  border: 0;
  border-radius: 8px;
  padding: 0 18px;
  background: #000;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.account-form__submit:hover {
  background: #222;
}

.account-form + .signup-status,
#account-status {
  max-width: 640px;
  margin-right: auto;
  margin-left: auto;
}

.chat-widget {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 30;
  width: min(380px, calc(100vw - 32px));
  font-family: inherit;
}

.chat-toggle,
.chat-form button {
  border: 0;
  cursor: pointer;
  font: inherit;
}

.chat-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 18px 24px;
  border-radius: 999px;
  border: 1px solid #2b2b2b;
  background: #000;
  color: #fff;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.2;
  font-weight: 400;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.chat-toggle:hover {
  background: #222;
  color: #fff;
}

.chat-form button:hover {
  filter: brightness(1.12);
}

.chat-icon {
  font-size: 23px;
  line-height: 1;
}

.chat-panel {
  position: absolute;
  right: 0;
  bottom: 70px;
  width: 100%;
  height: min(640px, calc(100vh - 100px));
  height: min(640px, calc(100dvh - 100px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d8d8d8;
  border-radius: 14px;
  background: #fff;
  color: #1a1a1a;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}

.chat-panel[hidden] {
  display: none;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
}

.chat-header > div:first-child {
  display: grid;
  gap: 3px;
}

.chat-header-actions {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 4px;
}

.chat-header strong {
  color: #111;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.2;
  font-weight: 400;
}

.chat-header span {
  color: #666;
  font-size: clamp(12px, 1.5vw, 14px);
  line-height: 1.3;
  font-weight: 400;
}

.chat-scroll-area {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  scrollbar-color: #999 #f1f1f1;
  scrollbar-width: thin;
}

.chat-scroll-area::-webkit-scrollbar {
  width: 8px;
}

.chat-scroll-area::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.chat-scroll-area::-webkit-scrollbar-thumb {
  border: 2px solid #f1f1f1;
  border-radius: 8px;
  background: #999;
}

.chat-suggestions {
  display: grid;
  gap: 7px;
  padding: 12px 14px 0;
}

.chat-suggestions-label {
  color: #555;
  font-size: clamp(11px, 1.3vw, 12px);
}

.chat-suggestion {
  width: 100%;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  padding: 8px 10px;
  background: #f7f7f7;
  color: #1a1a1a;
  cursor: pointer;
  font: inherit;
  font-size: clamp(12px, 1.4vw, 13px);
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  overflow-wrap: anywhere;
}

.chat-suggestion:hover {
  background: #ededed;
}

.chat-minimize,
.chat-close {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #222;
  cursor: pointer;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 400;
  line-height: 1;
}

.chat-minimize {
  order: 1;
}

.chat-close {
  order: 2;
}

.chat-minimize:hover,
.chat-close:hover {
  background: #ededed;
}

.chat-panel.chat-panel--minimized {
  height: auto;
}

.chat-panel--minimized .chat-scroll-area,
.chat-panel--minimized .chat-form {
  display: none;
}

.chat-messages {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.chat-message {
  max-width: 82%;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  font-size: clamp(13px, 1.5vw, 14px);
  font-weight: 400;
  line-height: 1.4;
  color: #1a1a1a;
}

.chat-message--support {
  justify-self: start;
  background: #f1f1f1;
}

.chat-message--user {
  justify-self: end;
  background: #d9eaff;
  color: #111;
}

.chat-form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #e5e5e5;
  background: #fff;
}

.chat-form input {
  min-width: 0;
  flex: 1;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
  color: #1a1a1a;
  font: inherit;
  font-size: clamp(13px, 1.5vw, 14px);
  font-weight: 400;
  line-height: 1.3;
}

.chat-form button {
  border: 1px solid #222;
  border-radius: 8px;
  padding: 0 11px;
  background: #222;
  color: #fff;
  font-size: clamp(13px, 1.5vw, 14px);
  font-weight: 400;
  line-height: 1.3;
}

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

.site-footer {
  padding: 20px 24px 28px;
  color: #666;
  font-size: 12px;
  text-align: center;
}

.site-footer p {
  margin: 0;
}

@media (max-width: 480px) {
  .site-header h1 {
    padding: 12px 12px 24px;
    font-size: 24px;
  }

  .announcement-bar {
    padding: 10px 16px;
  }

  .ribbon-banner {
    padding: 8px 24px;
  }

  .ribbon-content {
    font-size: 7px;
    letter-spacing: 0.1em;
  }

  .tab-bar {
    justify-content: flex-start;
    gap: 2px;
    padding: 0 8px;
  }

  .tab-bar .filter-menu {
    position: static;
  }

  .tab-bar .filter-menu summary {
    padding: 8px 8px 7px;
    font-size: 11px;
  }

  .tab-link {
    padding: 8px 8px 7px;
    font-size: 11px;
  }

  .tab-link svg {
    width: 13px;
    height: 13px;
  }

  .cart-link {
    position: static;
    margin-left: 0;
  }

  .account-link {
    position: static;
    margin-left: 0;
  }

  .products-carousel-wrap {
    --carousel-gutter: 54px;
    padding: 8px;
  }

  .carousel-controls {
    top: 8px;
    bottom: 8px;
    left: 8px;
    right: 8px;
  }

  .carousel-button {
    box-sizing: border-box;
    display: grid;
    flex: 0 0 44px;
    place-items: center;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    padding: 0;
  }

  .carousel-controls .carousel-button {
    width: 44px;
  }

  .products-section {
    /* Reclaim the full width below the ad breakpoint. */
    max-width: 1180px;
    padding: 32px 16px 64px;
  }

  .products-heading {
    align-items: start;
  }

  .products-heading h2 {
    font-size: 26px;
  }

  .product-card {
    flex-basis: 78%;
  }

  .chat-widget {
    position: fixed;
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    left: auto;
    width: min(340px, calc(100vw - 24px));
  }

  .signup-widget {
    position: fixed;
    left: 12px;
    left: calc(12px + env(safe-area-inset-left, 0px));
    bottom: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    inset-inline-start: 12px;
    inset-block-end: 16px;
    z-index: 31;
    width: auto;
    max-width: calc(100vw - 24px);
  }

  .signup-toggle {
    justify-content: center;
    width: max-content;
    max-width: calc(100vw - 24px);
    min-height: 42px;
    height: auto;
    gap: 7px;
    padding: 11px 17px;
    font-size: 14px;
    white-space: nowrap;
  }

  .signup-toggle,
  .chat-toggle {
    position: relative;
    z-index: 2;
  }

  .signup-panel {
    bottom: 58px;
    width: 280px;
    max-width: calc(100vw - 24px);
  }

  .signup-form {
    flex-direction: column;
  }

  .signup-row {
    flex-direction: column;
  }

  .signup-form button {
    min-height: 50px;
    font-size: 16px;
  }

  .account-form {
    padding: 22px 16px 24px;
  }

  .account-form__submit {
    min-height: 50px;
    font-size: 16px;
  }

  .chat-toggle span:last-child {
    display: inline;
  }

  .chat-toggle {
    width: max-content;
    max-width: 100%;
    min-height: 42px;
    height: auto;
    justify-content: center;
    gap: 7px;
    padding: 11px 17px;
    font-size: 14px;
    white-space: nowrap;
  }

  .chat-icon {
    font-size: 19px;
  }

  .chat-panel {
    right: 0;
    bottom: 54px;
    left: auto;
    width: min(320px, calc(100vw - 24px));
    height: min(460px, calc(100vh - max(70px, env(safe-area-inset-bottom, 0px))));
    height: min(460px, calc(100dvh - max(70px, env(safe-area-inset-bottom, 0px))));
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
    border-radius: 12px;
  }

  .chat-header {
    padding: 8px 10px;
  }

  .chat-suggestions {
    gap: 4px;
    padding: 7px 9px 0;
  }

  .chat-suggestion {
    padding: 5px 7px;
    font-size: 11px;
  }

  .chat-messages {
    gap: 5px;
    padding: 8px 9px;
  }

  .chat-message {
    padding: 6px 8px;
    font-size: 11px;
  }

  .chat-form {
    gap: 5px;
    padding: 7px 8px;
  }

  .chat-form input,
  .chat-form button {
    font-size: 16px;
  }

  .chat-form button {
    min-width: 52px;
    min-height: 40px;
  }
}

@media (max-width: 480px) and (orientation: landscape) {
  .chat-panel {
    height: calc(100vh - max(74px, env(safe-area-inset-bottom, 0px)));
    height: calc(100dvh - max(74px, env(safe-area-inset-bottom, 0px)));
  }

  .chat-suggestions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .chat-suggestions-label {
    grid-column: 1 / -1;
  }
}

/* The marquee must travel far enough to carry the text COMPLETELY off the left
   edge, not merely one copy-width. The track is two identical copies, so one
   copy is 50% of its width; adding 100vw pushes it a full bar-width further
   left, past the left edge. The second copy therefore slides in from the right
   exactly as the first leaves, and the loop closes with no visible jump. */
@keyframes scrollAnnouncement {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - 100vw));
  }
}

/* Print stamp: the date and time a page was printed. Hidden on screen and
   laid out only by the print stylesheet, with the copyright. */
.print-stamp {
  display: none;
}

@media print {
  @page {
    margin: 0.5in;
  }

  html,
  body {
    max-width: none;
    overflow: visible;
  }

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .announcement-track,
  .leaf-fall span,
  .heart-fall span {
    animation: none !important;
  }

  .announcement-bar,
  .ribbon-banner,
  .heart-fall {
    display: none !important;
  }

  .signup-widget,
  .chat-widget {
    display: none !important;
  }

  .site-footer {
    position: static;
    padding: 8px 0;
    background: #fff !important;
    color: #666 !important;
    text-align: center;
  }

  .site-header h1 {
    background: #fff !important;
  }

  /* The nav is screen furniture -- links, the cart and the filter dropdown have
     no meaning on paper, so the whole bar is dropped for print. */
  .tab-bar {
    display: none !important;
  }

  .signup-widget {
    width: min(340px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
  }

  .signup-toggle {
    max-width: 100%;
    padding: 14px 18px;
    font-size: 14px;
    white-space: nowrap;
  }

  .signup-panel {
    width: 100%;
    max-width: 100%;
  }

  .tab-link {
    border-color: #000 !important;
  }

  .tab-link::after {
    background: #000 !important;
  }

  .site-header h1 img {
    filter: url(#remove-black-logo-background);
  }

  /* Print stamp: date and time the page was printed. Hidden on screen and
     laid out only by the print stylesheet, where it sits at the very top of
     the page as a print-only header line. The stamp markup is the first thing
     in <body> so it lands above the logo, not inside the footer.
     The real page number is NOT printed here -- see the note in cart.js. */
  .print-stamp {
    display: block;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #ddd;
    color: #666;
    font-size: 10px;
    letter-spacing: 0.04em;
  }
}
/* ---------------------------------------------------------------------------
   Left advertising rail
   A tall, portrait advert frame pinned to the LEFT edge of the viewport, so it
   is visible from the very first screenful rather than only satisfying the
   grid at the width of the products section.

   This is deliberately independent of .products-stage and of the product
   layout: nothing here changes the carousel, the grid tracks or the section
   width. Fixed positioning also means the geometry cannot silently resolve to
   zero width and disappear, which is what an absolutely-positioned frame
   inside the full-bleed grid does once that grid's margins collapse.

   The frame is not a column in the products grid. It is the standalone
   .ad-frame section that sits directly under <body>, above <main>, so
   position: fixed anchors it to the viewport with no transformed or
   filtered ancestor in between. index101.html carries the modifier class
   on that section; without it this rule matches nothing.

   Below 1300px there are no page margins wide enough to float it into, so
   the frame stays in the normal flow as a centred block above <main> -- it
   is always on screen. From 1300px up the media query below promotes it to
   the fixed left-hand column.
--------------------------------------------------------------------------- */
.ad-frame--page {
  display: flex;
  flex-direction: column;
  max-width: min(760px, calc(100% - 40px));
  margin: 24px auto;
}

.ad-frame--page .ad-frame__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Shown from 1300px up.
   The frame is clamp(150px, 22vw, calc(50vw - 480px)): the 50vw bound is the
   frame's share of the page margin, so it can never overlap the centred
   products section, and the 150px floor never binds (the clamp already
   resolves to 170px at 1300px). A binding floor would widen the frame past
   its allowance and push it into the section -- the trap the original
   .ad-frame--side fell into. */
@media (min-width: 1300px) {
  .ad-frame--page {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    z-index: 20;
    box-sizing: border-box;
    /* Grows with the viewport so it is not a thin strip on a wide display,
       but the upper bound is the frame's allowance of the page margin
       (50vw - 480px) so it can never reach the products section. Checked:
       the cap binds from 1300px to ~1750px giving a gap of exactly 0px and
       never negative, and 22vw takes over above that. */
    width: clamp(150px, 22vw, calc(50vw - 480px));
    /* Floor is below the smallest step of the clamp above, so it can never
       bind and widen the frame past its allowance. */
    min-width: 150px;
    /* 40vh keeps the opening from becoming a 1:8 sliver on a short viewport;
       10/3 * 100vw caps how far it may travel on a wide one. */
    height: min(100vh, 10 / 3 * 100vw, 40vh + 320px);
    max-height: calc(100vh - 76px);
    padding: 12px;
    border-radius: 6px;
    background: linear-gradient(135deg, #fff0b8 0%, #e6bd5c 24%, #c58f28 52%, #8a5c14 78%, #6b450c 100%);
    box-shadow:
      0 14px 30px rgba(0, 0, 0, 0.42),
      0 2px 4px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.65),
      inset 0 -2px 3px rgba(74, 45, 6, 0.55);
  }

  .ad-frame--page .ad-frame__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
  }

  .ad-frame--page .ad-frame__eyebrow {
    font-size: 9px;
  }

  /* The advert fills the frame's opening. Because the frame is a tall column,
     flex:1 makes the media tall too -- that is the point. The floor stops a
     short viewport from squeezing the opening into a shallow strip, and the
     aspect-ratio keeps the opening portrait-shaped rather than square. */
  .ad-frame--page .ad-frame__media {
    flex: 1;
    aspect-ratio: 2 / 3;
    min-height: 220px;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------------
   Golden ad frame
   A gold picture frame for advertising: an outer band of polished gold
   (double rail + bevel) wrapping a mat, with a recessed inner frame that holds
   the advert image or clip. Built from the same gold ramp as .ribbon-banner
   (#fff0b8 -> #d7a93d -> #a66d1d) so the two read as one material. Pure CSS --
   no assets, no script -- so an <img>/<video> can be dropped into
   .ad-frame__media at any time without touching the styling.
--------------------------------------------------------------------------- */
.ad-frame {
  width: min(760px, calc(100% - 40px));
  margin: 24px auto;
  box-sizing: border-box;
  padding: 14px;
  border-radius: 6px;
  /* Outer band: light along the top-left, deep bronze along the bottom-right,
     which is what sells it as a solid metal moulding rather than a flat fill. */
  background: linear-gradient(135deg, #fff0b8 0%, #e6bd5c 24%, #c58f28 52%, #8a5c14 78%, #6b450c 100%);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.42),
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -2px 3px rgba(74, 45, 6, 0.55);
}

.ad-frame__inner {
  position: relative;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 3px;
  /* The mat between the outer rail and the inner frame. */
  background: linear-gradient(160deg, #fffdf4 0%, #f3e4bd 100%);
  box-shadow:
    inset 0 2px 4px rgba(120, 83, 20, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.7);
}

/* A second, thinner gold rail inside the mat. The 1px light/dark pair is the
   bevel that gives the inner frame its lip. */
.ad-frame__inner::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 2px;
  pointer-events: none;
  border: 1px solid #a8700d;
  box-shadow:
    0 0 0 1px rgba(255, 244, 205, 0.85),
    0 0 0 3px rgba(168, 112, 13, 0.28);
}

.ad-frame__eyebrow {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  color: #7d5510;
}

/* The opening that holds the advert itself -- the image or clip is framed,
   never cropped: object-fit is contain so the whole advert stays visible. */
.ad-frame__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 2px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.5), transparent 45%),
    linear-gradient(135deg, #f6e7b8 0%, #d9b559 55%, #a9761f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(125, 85, 16, 0.5),
    inset 0 6px 16px rgba(94, 62, 10, 0.35);
}

/* Any advert placed inside fills the opening and keeps its aspect ratio. */
.ad-frame__media > img,
.ad-frame__media > video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Shown only while the opening is empty, so the frame looks finished with no
   asset yet and disappears the moment one is dropped in. */
.ad-frame__media:empty::after {
  content: "Your advert image or clip";
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(94, 62, 10, 0.7);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* The specular sweep, riding the glass over the advert. */
.ad-frame__media::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.34) 50%, transparent 58% 100%);
  background-size: 260% 100%;
  animation: adFrameSheen 6s linear infinite;
}

@keyframes adFrameSheen {
  0% {
    background-position: 150% 0;
  }
  100% {
    background-position: -150% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ad-frame__media::before {
    animation: none;
  }
}

/* ===========================================================================
   Section ad columns (products stage)
   Two placements, both reusing the gold .ad-frame material above:
     .ad-frame--side   vertical frame to the LEFT of .products-section
     .ad-frame--right  vertical frame to the RIGHT of .products-section

   The frames sit in the page margins BESIDE the centred .products-section.
   They must never overlap the section or enter the normal flow, so the stage
   below is a zero-height, full-bleed positioning context: it contributes no
   height of its own, and the frames are absolutely positioned into the left
   and right margins. That way the section keeps its layout untouched and the
   frames cannot stack over the carousel.
   =========================================================================== */

/* The positioning context. It is deliberately collapsed (height:0) and its
   edges are full-bleed (50% - 50vw) so the margin columns are reachable, but
   it adds nothing to the page flow -- no extra row, no footer push. */
.products-stage {
  position: relative;
  height: 0;
  margin-inline: calc(50% - 50vw);
}

/* --- Vertical frames either side of the section ---------------------------
   Absolutely positioned into the page margins so they are laid out beside
   the carousel rather than after it. Portrait 3:4 openings, so the two read
   as a matched pair of side placements. Hidden when the margins are too
   narrow to hold them (see the media query below). */
.ad-frame--side,
.ad-frame--right {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  /* Slimmer than the main advert frame: a small 6px moulding, not 14px. */
  padding: 6px;
  box-sizing: border-box;
}

.ad-frame--side {
  left: 0;
}

.ad-frame--right {
  right: 0;
}

.ad-frame--side .ad-frame__inner,
.ad-frame--right .ad-frame__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 5px;
}

.ad-frame--side .ad-frame__eyebrow,
.ad-frame--right .ad-frame__eyebrow {
  margin-bottom: 5px;
  font-size: 7px;
  letter-spacing: 0.2em;
}

.ad-frame--side .ad-frame__media,
.ad-frame--right .ad-frame__media {
  flex: 1;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-align: center;
  aspect-ratio: 3 / 4;
}

/* The frames need a free margin of at least 150px plus a 20px gap either side
   of the 940px section. That resolves to 100vw >= 1280px; below it there is
   genuinely no room beside the section, so below 1280px the frames stop
   being absolutely positioned into the (non-existent) margins and instead
   sit in the normal flow as a centred pair under the products section --
   always visible, never overlapping the carousel. */
.products-stage {
  margin-bottom: 0;
  /* Let the stage carry flow height below the breakpoint so the two frames
     stacked inside it are actually laid out and pushed into view. */
  height: auto;
  margin-inline: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.ad-frame--side,
.ad-frame--right {
  position: static;
  transform: none;
  width: min(300px, calc(100% - 40px));
  margin: 0;
}

@media (min-width: 1280px) {
  /* Restore the collapsed, full-bleed stage and float the frames back out
     into the page margins, where there is genuinely room for them. */
  .products-stage {
    height: 0;
    margin-inline: calc(50% - 50vw);
    display: block;
  }

  .ad-frame--side,
  .ad-frame--right {
    position: absolute;
  }

  .ad-frame--side,
  .ad-frame--right {
    display: flex;
    /* Clamp to the page margin so the frame can never reach the section. */
    width: clamp(150px, calc(50vw - 490px), 200px);
  }

  /* Vertical centring. The frames were centred with translateY(-50%) on a
     parent whose height is 0 (.products-stage), so the offset was computed
     against nothing and the frames drifted down over the section. Anchor them
     to the section's own box instead. */
  .ad-frame--side,
  .ad-frame--right {
    top: 0;
    transform: none;
  }
}

@media (max-width: 560px) {
  .ad-frame {
    width: calc(100% - 24px);
    padding: 10px;
  }

  .ad-frame__inner {
    padding: 9px;
  }

  .ad-frame__media {
    aspect-ratio: 4 / 3;
  }
}