/* ==========================================================================
   DRIP VAULT — PAGE-SPECIFIC STYLES
   Grouped by page. Each block maps to a Shopify section — noted inline.
   ========================================================================== */

/* ==========================================================================
   HOME — HERO                                       → sections/hero.liquid
   The vault door: concentric rings, spokes and bolts behind the headline,
   turning slowly. It's the brand metaphor made literal, but kept low-contrast
   so it reads as texture rather than as a graphic sitting on top of the page.
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(100vh, 1000px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
  /* Pull up under the transparent floating header. */
  margin-top: calc((var(--header-h) + var(--sp-3)) * -1);
  padding-top: calc(var(--header-h) + var(--sp-3));
}

/* Cool ambient light from above. */
.hero__aura {
  position: absolute;
  top: -30%; left: 50%;
  width: min(1200px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: var(--hero-aura);
  filter: blur(30px);
  pointer-events: none;
  z-index: -3;
}

/* Fine grid, like the floor of a strongroom. Masked so it fades out toward
   the edges instead of stopping at a hard line. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image:
    linear-gradient(var(--hero-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000 25%, transparent 78%);
  pointer-events: none;
}

/* The vault door itself. motion.js writes --parallax on scroll. */
.hero__vault {
  position: absolute;
  top: 50%; left: 50%;
  width: min(880px, 132vw);
  aspect-ratio: 1;
  transform: translate3d(-50%, calc(-50% + var(--parallax, 0px)), 0);
  z-index: -2;
  pointer-events: none;
  will-change: transform;
  /* The SVG draws in currentColor, so the same artwork is black lines here
     and would be white lines inside a dark band. Opacity is pulled back a
     little: black-on-white reads heavier than the white-on-black it was
     originally tuned for. */
  color: var(--ink);
  opacity: 0.72;
}
.hero__dial { width: 100%; height: 100%; overflow: visible; }
.hero__arc  { stroke: var(--accent); }

/* Intro: the rings draw themselves in as the hero opens. */
.js .hero__vault { opacity: 0; transform: translate3d(-50%, calc(-50% + var(--parallax, 0px)), 0) scale(0.92) rotate(-8deg); }
.hero.is-in .hero__vault {
  opacity: 0.72;
  transform: translate3d(-50%, calc(-50% + var(--parallax, 0px)), 0) scale(1) rotate(0deg);
  transition: opacity 1.6s var(--ease), transform 2.2s var(--ease-expo);
}
.hero.is-in.is-settled .hero__vault { transition: none; }

/* Counter-rotating rings. Slow enough to be felt rather than watched. */
.hero__ring--outer { transform-origin: 50% 50%; animation: vault-spin 78s linear infinite; }
.hero__ring--inner { transform-origin: 50% 50%; animation: vault-spin 52s linear infinite reverse; }
.hero__ring--bolts { transform-origin: 50% 50%; animation: vault-spin 120s linear infinite; }

@keyframes vault-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__ring--outer, .hero__ring--inner, .hero__ring--bolts { animation: none; }
}

/* Vignette so the headline always has contrast. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hero-vignette);
  pointer-events: none;
}

/* Padding is kept tight so the whole hero — masthead, buttons AND the stat
   strip — clears the fold on a 900px-tall laptop. The strip peeking half
   off-screen reads as a bug rather than as an invitation to scroll. */
.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--sp-7) var(--sp-6);
  text-align: center;
  /* motion.js writes --hero-out (0 → 1) as the hero scrolls away: the
     masthead lifts and fades instead of simply being scrolled off. */
  transform: translate3d(0, calc(var(--hero-out, 0) * -70px), 0);
  opacity: calc(1 - var(--hero-out, 0) * 0.85);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--muted);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-pill);
  padding: 0.5rem 1.1rem;
  margin-bottom: var(--sp-6);
}
.hero__eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--glow-soft);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* The masthead. Two lines, tight and heavy, one white and one chrome. */
.hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-hero);
  font-size: var(--t-hero);
  font-stretch: 118%;
  line-height: 0.82;
  letter-spacing: var(--track-hero);
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--sp-6);
}
/* The chrome fill itself lives in base.css — see `.chrome-text`. */
.hero__title em { display: block; font-style: normal; }

/* Each line of the masthead rises out of its own mask when the hero opens
   (after the language gate, on a first visit). Without JS the lines simply
   sit in place. */
.hero__title .line { display: block; overflow: hidden; padding-block: 0.1em; margin-block: -0.1em; }
.hero__title .line__inner { display: block; }
.js .hero__title .line__inner { transform: translate3d(0, 112%, 0); }
.hero.is-in .hero__title .line__inner {
  transform: translate3d(0, 0, 0);
  transition: transform 1.3s var(--ease-expo);
}
.hero.is-in .hero__title .line:nth-child(2) .line__inner { transition-delay: 110ms; }

/* The rest of the hero follows the title in. */
.js .hero [data-hero-step] { opacity: 0; transform: translate3d(0, 22px, 0); }
.hero.is-in [data-hero-step] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease-expo);
  transition-delay: calc(260ms + var(--step, 0) * 110ms);
}

.hero__sub {
  max-width: 48ch;
  margin-inline: auto;
  color: var(--muted);
  font-size: clamp(0.98rem, 1.35vw, 1.1875rem);
  margin-bottom: var(--sp-7);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}

/* ==========================================================================
   METRICS BAND                                   → sections/metrics.liquid
   Its own strip directly under the hero, so it never competes with the
   masthead for vertical space.
   ========================================================================== */
.metrics {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.metrics__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5) var(--sp-4);
  padding-block: var(--sp-6);
}
@media (min-width: 700px) { .metrics__inner { grid-template-columns: repeat(4, 1fr); } }

.metric { display: grid; gap: 3px; text-align: center; }
.metric b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  /* Every digit the same width, so the count-up doesn't jitter sideways. */
  font-variant-numeric: tabular-nums;
}
.metric span {
  font-size: var(--t-micro);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--faint);
}

.hero__scroll {
  position: absolute;
  bottom: var(--sp-5);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  font-size: var(--t-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--faint);
  z-index: 1;
}
.hero__scroll::after {
  content: '';
  width: 1px; height: 42px;
  background: linear-gradient(180deg, var(--ink), transparent);
  animation: scroll-cue 2.4s var(--ease) infinite;
}
@keyframes scroll-cue {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
/* The cue is decorative: drop it on narrow screens, and on short laptop
   screens where it would sit on top of the hero buttons. */
@media (max-width: 820px), (max-height: 940px) { .hero__scroll { display: none; } }

/* ==========================================================================
   HOME — MARQUEE                                 → sections/marquee.liquid
   Duplicated track scrolls -50%; because the content repeats exactly twice,
   the loop is seamless. The clone is aria-hidden so it isn't announced twice.
   ========================================================================== */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: clamp(1.1rem, 2.2vw, 1.75rem);
  background: var(--bg);
  position: relative;
}
/* Text fades into the band at both ends. Overlays in the band's own colour
   rather than a mask on the whole element: masking the band would fade its
   black background out to the white page behind it. */
.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 12%;
  z-index: 1;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
/* motion.js takes over and drives the track itself, so the band speeds up
   with your scroll and drifts back to cruising speed. */
.marquee.is-driven .marquee__track { animation: none; will-change: transform; }
.marquee__group { display: flex; align-items: center; gap: var(--sp-7); padding-right: var(--sp-7); }
.marquee__item {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 2.4vw, 1.9rem);
  font-stretch: 112%;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
.marquee__dot { color: var(--accent); }
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ==========================================================================
   HOME — CATEGORY TILES                     → sections/categories.liquid
   ========================================================================== */
/* Phone: the first category full width, the rest two-up — every tile at the
   photo's own 4:5 shape, so a product shot is shown whole instead of being
   cropped to a letterbox strip. */
.tiles { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles__item:first-child { grid-column: span 2; }
@media (min-width: 760px) {
  .tiles { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
  /* Feature tile spans two columns and both rows — asymmetric rather than
     three equal boxes. */
  .tiles__item:first-child { grid-row: span 2; }
}

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--photo-bg);
  min-height: 250px;
  height: 100%;
  transition: border-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.tiles__item:first-child .tile { min-height: 430px; }
.tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lg); }

.tile__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-expo);
}
.tile:hover .tile__img { transform: scale(1.06); }

.tile__body {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-6);
  /* The caption fades up out of the photo's OWN grey, so on a real product
     shot (background #F2F2F0) the seam is invisible. Colours are fixed rather
     than theme tokens: they sit on the photo, and the photo never changes. */
  color: #0A0A0A;
  background: linear-gradient(180deg, transparent 42%, rgba(242, 242, 240, 0.96) 90%);
}
.tile__count {
  font-size: var(--t-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: #50525A;
}
.tile__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
}
.tile__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: #0A0A0A;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease-out);
}
.tile:hover .tile__cta,
.tile:focus-visible .tile__cta { opacity: 1; transform: translateY(0); }
@media (hover: none) { .tile__cta { opacity: 1; transform: none; } }

/* A tile wider than its 4:5 photo would crop the photo to a strip. Instead the
   photo sits whole against the right edge, its left edge softened so a
   background a shade off the tile's grey shows no seam, and the caption takes
   the plain grey beside it. The feature tile is that wide from
   760px; the small tiles only from 1100px. */
@media (min-width: 760px) {
  .tiles__item:first-child .tile__img {
    left: auto;
    right: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 4 / 5;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%);
            mask-image: linear-gradient(to right, transparent, #000 6%);
  }
  .tiles__item:first-child .tile__body { background: none; }
}
@media (min-width: 1100px) {
  .tiles__item:not(:first-child) .tile__img {
    left: auto;
    right: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 4 / 5;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%);
            mask-image: linear-gradient(to right, transparent, #000 6%);
  }
  .tiles__item:not(:first-child) .tile__body { background: none; padding-right: 42%; }
  .tiles__item:not(:first-child) .tile__title { font-size: clamp(1.3rem, 2vw, 1.9rem); }
}

/* Small tiles narrower than that (phone two-up, tablet column): the photo
   sits whole and centred across the top, edges softened, and the caption
   takes the foot, so the two don't sit on top of each other. An <img> with
   width:auto keeps its own 4:5 shape even with left and right both set, and
   the auto margins centre it. */
@media (max-width: 1099px) {
  .tiles__item:not(:first-child) .tile__img {
    width: auto;
    height: 80%;
    aspect-ratio: 4 / 5;
    margin-inline: auto;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
  }
  .tiles__item:not(:first-child) .tile__body { padding: var(--sp-4); gap: var(--sp-1); }
  .tiles__item:not(:first-child) .tile__count { display: none; }
  .tiles__item:not(:first-child) .tile__title { font-size: 1.2rem; }
}

@media (max-width: 759px) {
  .tile,
  .tiles__item:first-child .tile { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
}

/* ==========================================================================
   HOME — STORY TEASER                              → sections/story.liquid
   ========================================================================== */
.story { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 860px) { .story { grid-template-columns: 1fr 1fr; gap: var(--sp-9); } }

.story__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
}
.story__media img { width: 100%; height: 100%; object-fit: cover; }
.story__media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-xl);
  box-shadow: var(--edge-top);
  pointer-events: none;
}

/* ---- STORY ART — the drawn shelf that replaced the photo -----------------
   Line work in ink on the light panel, the folded tees in the shop's own
   colours. index.html carries the SVG; everything that moves is here. */
.story__art { background: var(--surface-1); }
.shelf { display: block; width: 100%; height: 100%; }
.shelf__ink { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.shelf__board { stroke-width: 3.4; }
.shelf__floor { stroke-width: 1.4; stroke-opacity: 0.35; }
.shelf__shade { fill: var(--ink); }
.shelf__bulb { fill: #FFE7A8; }
.shelf__tee rect { stroke: var(--ink); stroke-width: 1.6; }
.shelf__tee--ink rect   { fill: #141416; }
.shelf__tee--white rect { fill: #FAFAF8; }
.shelf__tee--sky rect   { fill: #CFDDF0; }
.shelf__tee--lilac rect { fill: #E6DAEE; }
.shelf__collar { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.shelf__tee--ink .shelf__collar { stroke: #6B6B72; }
.shelf__box rect, .shelf__parcel rect { fill: #D9C3A0; stroke: var(--ink); stroke-width: 1.6; }
.shelf__box path, .shelf__parcel path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-opacity: 0.55; }

/* Always on: the lamp sways from its cord, its light breathes, and every few
   seconds a parcel slides out of frame and the next one takes its place. */
.shelf__lamp {
  transform-box: view-box;
  transform-origin: 200px 0;
  animation: shelf-sway 6s ease-in-out infinite alternate;
}
.shelf__glow { animation: shelf-glow 4.5s ease-in-out infinite alternate; }
.shelf__parcel { animation: shelf-parcel 7s var(--ease) 3s infinite; }

@keyframes shelf-sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes shelf-glow { from { opacity: 0.6; } to { opacity: 1; } }
@keyframes shelf-parcel {
  0%, 55%   { transform: translateX(0);     opacity: 1; }
  68%       { transform: translateX(44px);  opacity: 0; }
  69%       { transform: translateX(-16px); opacity: 0; }
  84%, 100% { transform: translateX(0);     opacity: 1; }
}

/* Entrance, as the panel scrolls into view: the unit draws itself in, then the
   tees drop onto the shelves one after another. Guarded by .js like every
   other reveal — without JavaScript the drawing simply shows complete. */
.js .shelf__draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .story__art.is-revealed .shelf__draw {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.2s var(--ease-expo) calc(var(--d, 0) * 110ms);
}
.js .shelf__tee,
.js .shelf__box { opacity: 0; transform: translateY(-28px); }
.js .story__art.is-revealed .shelf__tee,
.js .story__art.is-revealed .shelf__box {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s var(--ease) calc(650ms + var(--i, 0) * 70ms),
              transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) calc(650ms + var(--i, 0) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
  .shelf__lamp, .shelf__glow, .shelf__parcel { animation: none; }
  .js .shelf__draw { stroke-dashoffset: 0; }
  .js .shelf__tee, .js .shelf__box { opacity: 1; transform: none; }
}

.story__body { display: grid; gap: var(--sp-5); justify-items: start; }
.story__quote {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.8vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--ink);
}

/* Three across at every width — two-up left the third card on its own row. */
.stats { display: grid; gap: var(--sp-4); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--sp-4); width: 100%; }
@media (max-width: 559px) {
  .stats { gap: var(--sp-2); }
  .stats .stat { padding: var(--sp-3); }
  .stats .stat__num { font-size: 1.35rem; }
}
.stat {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--glass-bg-alt);
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.stat__label {
  font-size: var(--t-micro);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--faint);
  margin-top: var(--sp-2);
}

/* ==========================================================================
   SHOP                                        → templates/collection.liquid
   ========================================================================== */
.shop-head { padding-block: var(--sp-8) var(--sp-6); }
.shop-head__title {
  font-size: var(--t-display);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

.toolbar {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-2));
  z-index: 20;
  background: var(--bar-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
  transition: top var(--dur-mid) var(--ease-out);
}
/* When the header slides away, sticky bars move up to take its place. */
.header-hidden .toolbar { top: var(--sp-3); }
.toolbar__count {
  font-size: var(--t-micro);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.toolbar__right { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; max-width: 100%; }

.filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 0.5rem 1rem;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.filter-trigger:hover { background: var(--tint-3); border-color: var(--line-bright); }
@media (min-width: 1000px) { .filter-trigger { display: none; } }

.sort {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  font-size: var(--t-micro);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--faint);
}
/* Chevron, so the pill reads as a dropdown. Drawn in CSS rather than as an
   image so it follows the ink colour. */
.sort::after {
  content: '';
  position: absolute;
  right: 0.95rem;
  top: 50%;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.sort select {
  appearance: none; -webkit-appearance: none;
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
  background: var(--tint-1);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink);
  padding: 0.5rem 2.1rem 0.5rem 1rem;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  cursor: pointer;
}
.sort select:hover { border-color: var(--line-bright); }
/* On a phone the select carries its own (visually hidden) label, so the
   visible "Sort" word goes — it is what pushed the bar past the screen edge
   in Romanian, where the longest option is also the longest word. */
@media (max-width: 559px) {
  .sort > span[aria-hidden] { display: none; }
  .toolbar { border-radius: var(--r-lg); }
}

.shop-body {
  display: grid;
  gap: var(--sp-7);
  align-items: start;
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-9);
}
@media (min-width: 1000px) { .shop-body { grid-template-columns: 250px 1fr; gap: var(--sp-8); } }

.filters { display: grid; gap: var(--sp-5); }
@media (max-width: 999px) { .filters--sidebar { display: none; } }
@media (min-width: 1000px) {
  .filters--sidebar {
    position: sticky;
    top: calc(var(--header-h) + 74px);
    max-height: calc(100vh - var(--header-h) - 100px);
    overflow-y: auto;
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--glass-bg-alt);
    transition: top var(--dur-mid) var(--ease-out);
  }
  .header-hidden .filters--sidebar { top: calc(var(--sp-3) + 74px); }
}

.filter-group { border-bottom: 1px solid var(--line); padding-bottom: var(--sp-5); }
.filter-group:last-child { border-bottom: 0; padding-bottom: 0; }
.filter-group__title {
  font-size: var(--t-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
  font-weight: 600;
  color: var(--ink);
}
.filter-list { display: grid; gap: var(--sp-2); }

/* Custom checkbox — the native input stays for accessibility and keyboard
   support, and is only visually replaced. */
.check {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  font-size: var(--t-small);
  color: var(--muted);
  padding: 0.35rem 0.5rem;
  margin-inline: -0.5rem;
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.check:hover { color: var(--ink); background: var(--tint-1); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  flex: 0 0 16px;
  width: 16px; height: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  display: grid;
  place-items: center;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.check__box::after {
  content: '';
  width: 7px; height: 4px;
  border-left: 1.5px solid var(--accent-ink);
  border-bottom: 1.5px solid var(--accent-ink);
  transform: rotate(-45deg) scale(0);
  transition: transform var(--dur-fast) var(--ease);
}
.check input:checked + .check__box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .check__box::after { transform: rotate(-45deg) scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.check__count { margin-left: auto; font-size: var(--t-micro); color: var(--faint); font-variant-numeric: tabular-nums; }
.check input:checked ~ .check__label { color: var(--ink); }

/* Size chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--muted);
  padding: 0.45rem 0.75rem;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  font-variant-numeric: tabular-nums;
}
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip:hover { border-color: var(--line-bright); color: var(--ink); }
.chip:has(input:checked) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Price range: two overlaid range inputs sharing one track. */
.price-range { padding-top: var(--sp-2); }
.price-range__values {
  display: flex;
  justify-content: space-between;
  font-size: var(--t-small);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-4);
  color: var(--ink);
}
.price-range__slider { position: relative; height: 24px; }
.price-range__track {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  transform: translateY(-50%);
}
.price-range__fill {
  position: absolute;
  top: 50%;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--accent);
  transform: translateY(-50%);
}
.price-range input[type='range'] {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  /* Track is click-through so the thumb underneath stays reachable; the
     thumbs re-enable pointer events on themselves. */
  pointer-events: none;
}
.price-range input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink);
  border: 0;
  box-shadow: 0 2px 8px rgba(10, 10, 10, 0.25);
  cursor: grab;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.price-range input[type='range']::-webkit-slider-thumb:active {
  transform: scale(1.2);
  box-shadow: 0 0 0 6px var(--glow-soft);
  cursor: grabbing;
}
.price-range input[type='range']::-moz-range-thumb {
  pointer-events: auto;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink);
  border: 0;
  cursor: grab;
}
.price-range input[type='range']:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Active filter pills */
.active-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.active-filters:empty { display: none; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--glass-bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--text);
  padding: 0.35rem 0.8rem;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pill:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pill__x { font-size: 1rem; line-height: 1; }

/* ==========================================================================
   PRODUCT DETAIL                             → templates/product.liquid
   ========================================================================== */
.pdp { display: grid; gap: var(--sp-7); padding-block: var(--sp-5) var(--sp-9); }
@media (min-width: 900px) { .pdp { grid-template-columns: 1.1fr 1fr; gap: var(--sp-8); align-items: start; } }

.gallery { display: grid; gap: var(--sp-3); }
.gallery__main {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--photo-bg);
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-mid) var(--ease); }
.gallery__main.is-swapping img { opacity: 0; }

.gallery__thumbs { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.gallery__thumb {
  width: 74px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--photo-bg);
  border: 1px solid var(--line);
  opacity: 0.55;
  transition: opacity var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.gallery__thumb:hover { opacity: 0.85; }
.gallery__thumb[aria-current='true'] { opacity: 1; border-color: var(--ink); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  .pdp__panel {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-4));
    padding: var(--sp-6);
    border-radius: var(--r-xl);
    border: 1px solid var(--line);
    background: var(--bg);
    box-shadow: var(--shadow-sm);
    transition: top var(--dur-mid) var(--ease-out);
  }
  .header-hidden .pdp__panel { top: var(--sp-4); }
}

.pdp__type {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-3);
}
.pdp__title {
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  text-transform: uppercase;
  letter-spacing: -0.035em;
  margin-bottom: var(--sp-4);
}
.pdp__price {
  font-size: 1.35rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-5);
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  color: var(--ink);
}
.pdp__price del { color: var(--faint); font-size: 1rem; font-weight: 400; }
.pdp__price .save {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  padding: 0.2rem 0.6rem;
}
.pdp__desc { color: var(--fg-muted); margin-bottom: var(--sp-6); max-width: 48ch; }

.option-group { margin-bottom: var(--sp-5); }
.option-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.option-group__label {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink);
}
.option-group__value { color: var(--faint); font-weight: 400; letter-spacing: 0.04em; }
.option-group__link {
  font-size: var(--t-micro);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--faint);
  transition: color var(--dur-fast) var(--ease);
}
.option-group__link:hover { color: var(--accent); }

/* Colour swatches                             → snippets/color-swatch.liquid */
.swatches { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.swatch {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid var(--line-bright);
  box-shadow: inset 0 0 0 2px var(--bg);
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.swatch:hover { transform: scale(1.1); }
.swatch:has(input:checked) { box-shadow: inset 0 0 0 2px var(--bg), 0 0 0 2px var(--ink); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
.swatch.is-unavailable { opacity: 0.3; }

/* Size picker                                   → snippets/size-picker.liquid */
.sizes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.size {
  position: relative;
  min-width: 56px;
  padding: 0.7rem 0.75rem;
  text-align: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--t-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.size input { position: absolute; opacity: 0; width: 0; height: 0; }
.size:hover { border-color: var(--ink); }
.size:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.size:active { transform: scale(0.96); }
.size:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A size reduced below the others carries its percentage in the corner. */
.size[data-off]::after {
  content: attr(data-off);
  position: absolute;
  top: -0.6rem;
  right: -0.45rem;
  padding: 0.05rem 0.38rem;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.45;
  pointer-events: none;
}

/* The chosen size's measurements, under the chips. */
.size-measure {
  margin-top: var(--sp-3);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.size-measure span {
  font-size: var(--t-micro);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--faint);
}

/* Measurements table, first in the product accordion. */
.size-chart {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
}
.size-chart th,
.size-chart td {
  padding: 0.6rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.size-chart thead th {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--faint);
}
.size-chart tbody th { font-weight: 700; color: var(--ink); }
.size-chart th:last-child,
.size-chart td:last-child { text-align: right; }
.size-chart del { color: var(--faint); margin-right: 0.35em; font-size: 0.92em; }
.size-chart tr.is-out,
.size-chart tr.is-out th { color: var(--faint); }
.size-chart tr.is-out th { text-decoration: line-through; }
.size-chart__note { margin-top: var(--sp-3); font-size: var(--t-small); color: var(--muted); }

/* Sold-out sizes stay visible (useful information) but are struck through
   and non-interactive. */
.size.is-unavailable {
  opacity: 0.28;
  cursor: not-allowed;
  text-decoration: line-through;
  pointer-events: none;
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.qty__btn {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease);
}
.qty__btn:hover { background: var(--tint-3); }
.qty__input {
  width: 46px;
  text-align: center;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Stacked, full width: side by side, the longer cash-on-delivery label broke
   onto two lines next to a one-line WhatsApp button. */
.pdp__buy { display: grid; gap: var(--sp-3); margin: var(--sp-6) 0 var(--sp-5); }
.pdp__buy .btn { width: 100%; }

.pdp__assurances {
  display: grid;
  gap: var(--sp-3);
  font-size: var(--t-small);
  color: var(--fg-muted);
  margin-bottom: var(--sp-6);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--tint-1);
}
.pdp__assurance { display: flex; gap: var(--sp-3); align-items: center; }
.pdp__assurance::before { content: '✦'; color: var(--ink); font-size: 0.7rem; }

/* ==========================================================================
   ABOUT                                      → templates/page.about.liquid
   ========================================================================== */
/* A black band: the llama was drawn for a dark ground, and its glowing visor
   is the reason to keep one here. */
.about-hero {
  position: relative;
  padding-block: calc(var(--section-y) * 1.15);
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.about-hero::before {
  content: '';
  position: absolute;
  top: -40%; left: 50%;
  width: min(900px, 120vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(110, 155, 255, 0.13) 0%, transparent 62%);
  filter: blur(40px);
  pointer-events: none;
}
.about-hero > .container { position: relative; z-index: 1; }
.about-hero h1 {
  font-size: var(--t-display);
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
}
.about-hero .lede { margin-inline: auto; }

/* .eyebrow is a flex row (dot + label), so in a text-align:center block it
   would still sit hard left. Centre the flex line itself. */
.about-hero .eyebrow,
.eyebrow--centred { justify-content: center; }

/* ==========================================================================
   CURSOR-TRACKING LLAMA                            → snippets/llama.liquid
   Markup lives in about.html; the motion is in assets/js/lib/llama.js.
   ========================================================================== */
.llama-stage {
  width: clamp(200px, 30vw, 330px);
  margin: 0 auto var(--sp-6);
  position: relative;
  /* The SVG has its own soft glow; this lifts it off the near-black ground. */
  filter: drop-shadow(0 24px 60px rgba(110, 155, 255, 0.20));
  /* The llama tracks the pointer — it must never swallow clicks or become a
     drag target while doing it. */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.llama { width: 100%; height: auto; overflow: visible; }

/* Idle float. Deliberately CSS rather than JS: it runs on the compositor and
   costs nothing, and it keeps the llama alive on touch devices where there is
   no hovering pointer to track. Applied to the stage so it can't fight the
   JS transforms, which target groups inside the SVG. */
@media (prefers-reduced-motion: no-preference) {
  .llama-stage { animation: llama-float 6.5s var(--ease) infinite; }
}
@keyframes llama-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}

@media (max-width: 640px) {
  .llama-stage { width: min(230px, 62vw); }
}

.about-split { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 860px) { .about-split { grid-template-columns: 1fr 1fr; gap: var(--sp-9); } }
.about-split--flip .about-split__media { order: 2; }
@media (max-width: 859px) { .about-split--flip .about-split__media { order: 0; } }
.about-split__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.about-split__media img { width: 100%; height: 100%; object-fit: cover; }
.about-split__media .about-mark { width: 100%; height: 100%; display: block; }
/* The dial draws in currentColor; accent parts take the accent token, so it
   reads on white here and would still read inside a dark band. */
.about-mark { color: var(--ink); }
.about-mark__rings, .about-mark__rotor { stroke: currentColor; }
.about-mark__accent { stroke: var(--accent); }
.about-mark__cap, .about-mark__center { fill: var(--accent); }
#am-glow stop { stop-color: var(--accent); }

/* ---- The idea section's dial: strip the photo-frame look the base
   .about-split__media rules above give a picture. ---- */
.about-split__media.about-split__media--dial {
  overflow: visible;
  border: none;
  border-radius: 0;
  background: none;
}

/* Purely decorative now — no button, no focus target, so there is nothing
   left that could ever grow a focus outline. dial.js writes --dial-tilt
   here as the pointer moves anywhere on the page (same global-tracking
   convention as llama.js), a slow lean toward wherever you're looking. */
.about-mark-stage {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(var(--dial-tilt, 0deg));
  will-change: transform;
}

/* Opens as it scrolls into view — no new JS needed, this reuses the site's
   existing scroll-reveal: motion.js's IntersectionObserver already adds
   .is-revealed to the [data-reveal] wrapper (.about-split__media--dial)
   the moment it enters the viewport. Guarded by .js exactly like every
   other reveal on the site (base.css) — if JS never runs, the dial simply
   shows fully open rather than getting stuck shut. */
.js .about-split__media--dial .about-mark {
  opacity: 0;
  transform: scale(0.4) rotate(-55deg);
  transition:
    opacity   var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) cubic-bezier(0.17, 0.89, 0.32, 1.28);
}
.js .about-split__media--dial.is-revealed .about-mark {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Always-on ambient motion — animates on its own, no interaction required.
   The ring of plain ticks drifts slowly around the one fixed accent mark,
   which breathes gently in place, like a dial that's alive even when
   nobody's touching it. Durations are hardcoded seconds (matching the
   hero's own vault-spin convention) since these are multi-second ambient
   loops, not the short UI transitions --dur-* is sized for. */
.about-mark__rotor {
  transform-box: view-box;        /* spin in the artwork's own viewBox
                                      coordinates, not the rotor's own
                                      (off-centre) bounding box */
  transform-origin: 450px 600px;  /* the dial's true centre */
  animation: dial-drift 90s linear infinite;
}
.about-mark__rings {
  transform-box: view-box;
  transform-origin: 450px 600px;
  animation: dial-breathe 8s var(--ease) infinite;
}
.about-mark__accent,
.about-mark__cap {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: dial-pulse 6s var(--ease) infinite;
}
.about-mark__center {
  animation: dial-pulse 6s var(--ease) infinite;
  animation-delay: 3s; /* half the cycle out of phase with the accent tick */
}
.about-mark__glow {
  animation: dial-glow-pulse 6s var(--ease) infinite;
}

@keyframes dial-drift {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes dial-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.82; }
}
@keyframes dial-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
@keyframes dial-glow-pulse {
  0%, 100% { opacity: 0.72; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .about-mark-stage,
  .about-mark__rotor,
  .about-mark__rings,
  .about-mark__accent,
  .about-mark__cap,
  .about-mark__center,
  .about-mark__glow {
    animation: none;
    transform: none;
  }
  .js .about-split__media--dial .about-mark {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.values { display: grid; gap: var(--sp-4); }
@media (min-width: 700px) { .values { grid-template-columns: repeat(3, 1fr); } }
.value {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg);
  transition: border-color var(--dur-mid) var(--ease),
              transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease);
}
.value:hover { border-color: var(--line-strong); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.value__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.04em;
}
.value__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.value__text { font-size: var(--t-small); color: var(--fg-muted); line-height: 1.7; }

.timeline { display: grid; gap: 0; border-top: 1px solid var(--line); }
.timeline__row { display: grid; gap: var(--sp-3); padding-block: var(--sp-6); border-bottom: 1px solid var(--line); }
@media (min-width: 700px) { .timeline__row { grid-template-columns: 150px 1fr; gap: var(--sp-6); align-items: baseline; } }
.timeline__year {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.timeline__title { font-weight: 600; margin-bottom: var(--sp-2); color: var(--ink); }
.timeline__text { color: var(--fg-muted); font-size: var(--t-small); line-height: 1.7; max-width: 60ch; }

/* ==========================================================================
   CONTACT                                  → templates/page.contact.liquid
   ========================================================================== */
.contact-layout { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1fr 360px; gap: var(--sp-9); } }
.contact-form { display: grid; gap: var(--sp-5); }
@media (min-width: 620px) { .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); } }

.contact-aside {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--glass-bg-alt);
}
.contact-block { display: grid; gap: var(--sp-2); }
.contact-block__label {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--muted);
}
.contact-block__value { font-size: var(--t-small); color: var(--fg-muted); line-height: 1.8; }
.contact-block__value a { transition: color var(--dur-fast) var(--ease); }
.contact-block__value a:hover { color: var(--ink); }

/* ==========================================================================
   404
   ========================================================================== */
.notfound { min-height: 72vh; display: grid; align-items: center; }
.notfound__code {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(6rem, 24vw, 17rem);
  font-stretch: 118%;
  line-height: 0.8;
  letter-spacing: -0.06em;
  margin-bottom: var(--sp-6);
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.notfound h1 { text-transform: uppercase; }
.notfound .hero__actions { justify-content: center; }

/* ==========================================================================
   COMING SOON — categories with no products yet
   Worked out from the catalogue (storefront.liveTypes): the first product
   added to a category removes all of this for it.
   ========================================================================== */

/* Homepage tile: the drawing ghosted, a badge on top. Still a link — the
   category's shop page explains, with a WhatsApp nudge. Fixed colours, like
   the rest of the tile: it sits on the photo grey in either theme. */
.tile--soon .tile__img { opacity: 0.3; filter: grayscale(1); }
.tile__badge {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 2;
  padding: 0.35rem 0.75rem;
  border-radius: var(--r-pill);
  background: #0A0A0A;
  color: #FFFFFF;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
}

/* Filter sidebar: listed so visitors see it is planned, but not a control. */
.check--soon { cursor: default; color: var(--faint); }
.check--soon:hover { color: var(--faint); background: none; }
.check--soon .check__box { border-style: dashed; }
.check--soon .soon-tag { margin-left: auto; }

/* Shop page for an empty category. */
.soon-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }

/* "From" before the lowest price, when sizes cost different amounts. */
.card__from { color: var(--faint); font-weight: 400; }

/* ==========================================================================
   ABOUT — "How it works", without a picture
   The heading and the text share the full width of the section.
   ========================================================================== */
.about-wide { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 860px) {
  .about-wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-9); }
}
.about-wide__body {
  display: grid;
  gap: var(--sp-5);
  color: var(--fg-muted);
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.7;
}