* {
  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: 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 {
  --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. */
  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 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), 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 anchored to the RIGHT edge of the bar
   and starts one full track-width out to the right, so the first copy walks in
   from the right-hand edge, crosses, and hands off to the identical second copy
   at the seam. --ann-gap is the pause between the end of one copy and the start
   of the next; it must match the gap declared on .announcement-sequence. */
/* 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 13s 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;
}

.tab-bar {
  display: flex;
  position: relative;
  justify-content: center;
  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;
}

.cart-link {
  position: absolute;
  right: 20px;
}

.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 {
  max-width: 1180px;
  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;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #d4d4d0;
  border-radius: 12px;
  background: #fff;
  color: #000;
  cursor: pointer;
  font-size: 14px;
  list-style: none;
}

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

.tab-bar .filter-menu summary {
  min-height: 0;
  padding: 14px 18px 12px;
  border: 1px solid rgba(201, 161, 75, 0.35);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #000;
  color: #fff;
  font-size: 14px;
}

.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: "▾";
  margin-left: 8px;
  font-size: 12px;
}

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

.filter-menu__content {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 4;
  display: grid;
  gap: 10px;
  min-width: 170px;
  padding: 14px;
  border: 1px solid #d4d4d0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
  color: #000;
  font-size: 13px;
}

.filter-menu__content strong {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.filter-menu__content label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
}

.filter-menu__content input[type="radio"] {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 0;
  appearance: none;
  border: 1px solid #777;
  border-radius: 2px;
  background: #fff;
  cursor: pointer;
}

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

.filter-menu__submit {
  margin-top: 4px;
  padding: 8px 14px;
  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;
}

.filter-menu__submit:hover,
.filter-menu__submit:focus-visible {
  background: #c9a14b;
  border-color: #c9a14b;
  color: #000;
}

.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 {
  flex: 0 0 calc((100% - 54px) / 4);
  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%);
}

/* ------------------------------------------------------------------ *
 * 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-item {
  display: grid;
  grid-template-columns: 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);
}

.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 {
  padding: 0;
  border: 0;
  background: none;
  color: #8a3b2f;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.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-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: 84px minmax(0, 1fr);
    row-gap: 14px;
  }

  .cart-item__image {
    width: 84px;
  }

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

.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] {
  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-form input[type='text'],
.signup-form input[type='email'] {
  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;
}

.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(100dvh - 100px));
  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;
  }

  .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 {
    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;
  }

  .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(100dvh - max(70px, env(safe-area-inset-bottom, 0px))));
    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(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;
  }
}

/* Travel exactly half the track: one copy already includes its own trailing
   gap, so half the track is one full copy plus the seam. Copy 2 therefore
   lands precisely where copy 1 began and the loop closes with no jump. */
@keyframes scrollAnnouncement {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* 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 {
    animation: none !important;
  }

  .announcement-bar,
  .ribbon-banner {
    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;
  }
}