/* ==========================================================================
   Ruth Griffioen — theme styles
   Black / white with a single accent colour (set in Theme settings → Colours)

   SIZING RULES (fluid design)
   - Everything that is UI — text, spacing, buttons, icons, header, panels — is in rem
     or in the fluid tokens below. It grows between a 360px phone and a 1440px desktop,
     scales with browser zoom, and with the visitor's default font size setting.
   - Fluid values are clamp(min rem, rem + vw, max rem). The rem part keeps them
     zoomable; the max is never more than 2.5× the min, so text can always reach
     200% zoom (WCAG 1.4.4).
   - Things tied to the screen itself stay in vw / vh / px and do NOT scale with zoom:
     the art wall tiles, the full-screen artwork photos, the edge blur and vignette,
     hairline borders and blur radii.
   - Breakpoints are in em, so a larger default font size switches to the roomier
     small-screen layout sooner.
   ========================================================================== */

:root {
  --ink: #111111;
  --paper: #ffffff;
  --muted: #6f6f6f;
  --line: rgba(17, 17, 17, 0.12);
  --soft: #f4f3f1;
  --accent: #b8492e;
  --accent-ink: #ffffff;

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale. Small UI text is fixed rem, so it follows zoom exactly (2× at 200%).
     Larger sizes are fluid between a 360px and a 1440px viewport. */
  --step--2: 0.6875rem;                                          /* 11px       micro labels */
  --step--1: 0.8125rem;                                          /* 13px       nav, buttons */
  --step-0:  1rem;                                               /* 16px       body */
  --step-1:  clamp(1.125rem, 1.042rem + 0.3704vw, 1.375rem);     /* 18→22px    card titles */
  --step-2:  clamp(1.312rem, 1.125rem + 0.8333vw, 1.875rem);     /* 21→30px    lead, quote */
  --step-3:  clamp(1.75rem, 1.417rem + 1.481vw, 2.75rem);        /* 28→44px    price */
  --step-4:  clamp(2.125rem, 1.5rem + 2.778vw, 4rem);            /* 34→64px    section titles */
  --step-5:  clamp(2.75rem, 1.667rem + 4.815vw, 6rem);           /* 44→96px    page titles */
  --step-6:  clamp(3.5rem, 1.75rem + 7.778vw, 8.75rem);          /* 56→140px   hero titles */
  --step-7:  clamp(4rem, 2rem + 8.889vw, 10rem);                 /* 64→160px   homepage name */

  /* Fluid space scale */
  --space-3xs: 0.25rem;                                           /* 4px */
  --space-2xs: clamp(0.375rem, 0.3333rem + 0.1852vw, 0.5rem);     /* 6→8px */
  --space-xs:  clamp(0.5rem, 0.4167rem + 0.3704vw, 0.75rem);      /* 8→12px */
  --space-s:   clamp(0.75rem, 0.6667rem + 0.3704vw, 1rem);        /* 12→16px */
  --space-m:   clamp(1rem, 0.8333rem + 0.7407vw, 1.5rem);         /* 16→24px */
  --space-l:   clamp(1.25rem, 1rem + 1.111vw, 2rem);              /* 20→32px */
  --space-xl:  clamp(1.75rem, 1.333rem + 1.852vw, 3rem);          /* 28→48px */
  --space-2xl: clamp(2.25rem, 1.5rem + 3.333vw, 4.5rem);          /* 36→72px */
  --space-3xl: clamp(2.75rem, 1.667rem + 4.815vw, 6rem);          /* 44→96px */
  --gutter:    clamp(1rem, 0.6667rem + 1.481vw, 2rem);            /* 16→32px */

  /* Fixed UI sizes (rem: they follow zoom and font size, but don't change with screen width) */
  --tap: 2.75rem;          /* 44px minimum touch target */
  --header-h: 5.25rem;     /* 84px */
  --hairline: 1px;
  --diamond-round: 24%; /* corner rounding of the logo's diamond i-dots */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-line: cubic-bezier(0.625, 0.05, 0, 1);   /* underline (from osmo.supply) */
  --ease-roll: cubic-bezier(0.8, 0, 0.4, 1);      /* rolling letters (from norda.framer.website) */
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);   /* expo.out — heading reveal */

  /* Content width on the Work pages (1440px, like osmo.supply). The padding keeps the
     content inside that width while rails and lines can still run to the screen edge. */
  --page-max: 90rem;
  --page-pad: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));
}

@media (max-width: 46.875em) { /* 750px */
  :root { --header-h: 4.5rem; }
}

*, *::before, *::after { box-sizing: border-box; }

/* Lenis smooth scrolling (recommended base styles) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Keep the browser's own text size: never set a px font-size on html */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.eyebrow {
  font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}

.display {
  font-family: var(--font-display); font-weight: 400; line-height: 1; letter-spacing: -0.01em; margin: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625em;
  min-height: var(--tap); padding: 0.5em 1.75em; border-radius: 999px; border: var(--hairline) solid var(--ink);
  background: var(--ink); color: var(--paper);
  font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--block { width: 100%; min-height: 3.5rem; }
.btn[disabled] { opacity: .4; cursor: not-allowed; pointer-events: none; }
.btn .dot { width: 0.42em; height: 0.42em; margin: 0 0.04em; border-radius: var(--diamond-round); transform: rotate(45deg); background: var(--accent); transition: background .3s; }
.btn:hover .dot { background: var(--paper); }

/* ==========================================================================
   Header — logo left, menu centre, contact right
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); column-gap: var(--space-l); align-items: center;
  height: var(--header-h); padding: 0 var(--gutter);
  background: transparent;
}
.site-header--solid { background: var(--paper); }

.site-logo { justify-self: start; display: flex; align-items: center; }
.site-logo img { height: 2.5rem; width: auto; }
.site-logo__text { font-family: var(--font-display); font-size: clamp(1.25rem, 1.167rem + 0.3704vw, 1.5rem); line-height: 1; white-space: nowrap; letter-spacing: -0.01em; }
.site-logo__text sup { font-family: var(--font-body); font-size: 0.375em; vertical-align: top; margin-left: 0.1em; }
/* SVG logo (theme/snippets/logo.liquid): sized by height, width follows the viewBox */
.logo-svg { display: block; overflow: visible; }
.site-logo .logo-svg { height: clamp(1.1rem, 0.95rem + 0.55vw, 1.55rem); width: auto; }

.site-nav { display: flex; gap: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); justify-self: center; }
.site-nav a { font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; padding: 0.5em 0; }

.site-actions { justify-self: end; display: flex; align-items: center; gap: var(--space-m); }
.cart-link { font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.cart-link [data-cart-count] {
  display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 0.45em; margin-left: 0.3em;
  border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 0.8em; letter-spacing: 0;
}

/* ---------- Phones: menu button + expanding panel (after Osmo's expanding bottom
   navigation, opening from the top-right corner instead of the bottom) ---------- */
.menu-toggle, .menu-panel { display: none; }
@media (max-width: 46.875em) {
  /* Logo · cart · menu button. The cart stays outside the menu; the contact button moves into it. */
  .site-header { grid-template-columns: 1fr auto auto; column-gap: var(--space-xs); }
  .site-nav, .site-actions .btn { display: none; }
  .site-actions { gap: 0; }

  /* Just the icon: dark lines on the page, white once the black menu is open */
  .menu-toggle {
    position: relative; z-index: 2; display: grid; place-items: center;
    width: var(--tap); height: var(--tap); /* same box as the old circle, so the icon sits in the menu's corner */
    border: 0; background: transparent; color: var(--ink); cursor: pointer;
    transition: color .4s var(--ease-line);
  }
  .menu-toggle[aria-expanded="true"] { color: var(--paper); }
  .menu-toggle__lines, .menu-toggle__lines::before {
    display: block; width: 1.375rem; height: 1.5px; background: currentColor;
    transition: transform .6s var(--ease-line);
  }
  .menu-toggle__lines { position: relative; transform: translateY(-0.2rem); }
  .menu-toggle__lines::before { content: ""; position: absolute; left: 0; top: 0.4rem; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__lines { transform: translateY(0) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__lines::before { transform: translateY(-0.4rem) rotate(-90deg); }

  /* The panel grows out of the button: clip-path animates from a button-sized corner
     to the full card, with our usual easing */
  .menu-panel {
    position: fixed; z-index: 1; top: calc((var(--header-h) - var(--tap)) / 2); right: var(--gutter);
    display: flex; flex-direction: column; gap: var(--space-xl);
    width: min(22rem, calc(100vw - 2 * var(--gutter)));
    padding: calc(var(--tap) + var(--space-m)) var(--space-l) var(--space-l);
    background: var(--ink); color: var(--paper);
    border-radius: 1.375rem;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.5);
    clip-path: inset(0 0 calc(100% - var(--tap)) calc(100% - var(--tap)) round 1.375rem);
    opacity: 0; visibility: hidden;
    /* Closing: the card shrinks back into the button's corner while the black fades
       out, so nothing pops away at the end */
    transition: clip-path .5s var(--ease-line), opacity .4s ease .15s, visibility 0s linear .55s;
  }
  .menu-panel.is-open {
    clip-path: inset(0 0 0 0 round 1.375rem);
    opacity: 1; visibility: visible;
    transition: clip-path .7s var(--ease-line), opacity .15s ease, visibility 0s;
  }
  .menu-panel__links { display: flex; flex-direction: column; }
  .menu-panel__link { display: block; overflow: clip; font-family: var(--font-display); font-size: var(--step-4); line-height: 1.15; }
  .menu-panel__link > span { display: inline-block; transform: translateY(105%); opacity: 0; transition: transform .4s var(--ease-line), opacity .3s; }
  .menu-panel__link[aria-current="page"] > span { font-style: italic; }
  .menu-panel.is-open .menu-panel__link > span {
    transform: none; opacity: 1;
    transition: transform .8s var(--ease-line) calc(.15s + var(--i) * .05s), opacity .6s calc(.15s + var(--i) * .05s);
  }
  .menu-panel__meta {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m);
    padding-top: var(--space-m); border-top: var(--hairline) solid rgba(255,255,255,.18);
    font-size: var(--step--1);
    opacity: 0; transform: translateY(0.5rem); transition: opacity .3s, transform .4s var(--ease-line);
  }
  .menu-panel.is-open .menu-panel__meta { opacity: 1; transform: none; transition: opacity .6s .4s, transform .8s var(--ease-line) .4s; }
  .menu-panel__meta > div { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35em; min-width: 0; }
  .menu-panel__meta .eyebrow { margin-bottom: 0.4em; color: rgba(255,255,255,.55); }
  .menu-panel__meta a { overflow-wrap: anywhere; }
}
@media (max-width: 46.875em) and (prefers-reduced-motion: reduce) {
  .menu-panel, .menu-panel.is-open, .menu-panel__link > span, .menu-panel__meta { transition: none !important; }
}

/* ==========================================================================
   Footer — short sentence left, socials right
   ========================================================================== */
.site-footer {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-l);
  padding: var(--space-l) var(--gutter);
}
.site-footer--overlay {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  background: transparent;
  pointer-events: none;
}
.site-footer--overlay > * { pointer-events: auto; }

.site-footer__about { max-width: 22em; font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.6; margin: 0; }
.site-footer__about::before {
  content: ""; display: inline-block; width: 0.5em; height: 0.5em; border-radius: var(--diamond-round); transform: rotate(45deg); background: var(--accent);
  margin: 0 0.85em 0 0.1em; vertical-align: 0.1em;
}

.socials { display: flex; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; }
.socials a {
  display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%;
  border: var(--hairline) solid var(--line); background: var(--paper);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.socials a:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.socials svg { width: 1.125rem; height: 1.125rem; }
.socials__cta { align-self: center; margin-right: var(--space-xs); font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 46.875em) {
  .site-footer { flex-direction: column; align-items: flex-start; }
  .socials__cta { display: none; }
}

/* Main content offset for the fixed header */
.page-main { padding-top: var(--header-h); min-height: 70vh; }

/* ==========================================================================
   Homepage — drifting art wall
   Tile size and gaps are set by theme.js from the screen size, so the wall
   always fills the screen the same way and does not grow with zoom.
   ========================================================================== */
.template-index { overflow: hidden; }
.artwall {
  position: fixed; inset: 0; overflow: hidden; background: var(--paper);
  cursor: default;
}
.artwall__stage {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; gap: var(--tile-gap, 64px);
  will-change: transform;
}
.artwall__row { display: flex; gap: var(--tile-gap, 64px); width: max-content; will-change: transform; }
.artwall__tile {
  position: relative; flex: none; height: var(--tile-h, 34vh); overflow: hidden; background: var(--soft);
  transition: transform .8s var(--ease), box-shadow .8s var(--ease);
  will-change: transform;
}
.artwall__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.artwall__tile:hover { box-shadow: 0 30px 60px -30px rgba(0,0,0,.35); }
.artwall__tile:hover img { transform: scale(1.04); }
.artwall__caption {
  position: absolute; left: var(--space-s); bottom: var(--space-s); padding: 0.5em 0.9em; background: var(--paper);
  font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; transform: translateY(0.4rem); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.artwall__tile:hover .artwall__caption { opacity: 1; transform: none; }

/* No-JS / pre-init fallback: a simple grid */
.artwall__source { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--space-m); padding: calc(var(--header-h) + var(--space-xl)) var(--gutter); }
.artwall.is-ready .artwall__source { display: none; }

.artwall__title {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; pointer-events: none;
  text-align: center; mix-blend-mode: difference; color: #fff; padding: 0 var(--gutter);
}
.artwall__title h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-7); line-height: .95; margin: 0; letter-spacing: -0.03em; }
/* Homepage logo: horizontal on wide screens, stacked on phones and tall screens */
.artwall__title h1.artwall__logo { line-height: 0; display: grid; justify-items: center; }
.artwall__logo .logo-svg--h { width: clamp(18rem, 68vw, 76rem); height: auto; }
.artwall__logo .logo-svg--v { width: min(80vw, 28rem); height: auto; display: none; }
@media (max-width: 46.875em), (max-aspect-ratio: 4/5) {
  .artwall__logo .logo-svg--h { display: none; }
  .artwall__logo .logo-svg--v { display: block; }
}
/* Letter-by-letter reveal: each letter rises from below its line (clipped by the
   line's window) with a slight tilt — the same motion as the headings, per letter */
.logo-letter { transform-box: fill-box; transform-origin: 0% 100%; }
.js .logo-reveal:not(.is-revealed) .logo-letter { transform: translateY(var(--drop)) rotate(10deg); }
.logo-reveal.is-revealed .logo-letter { transform: none; transition: transform 1.2s var(--ease-reveal) calc(0.15s + var(--i) * 45ms); }
.artwall__title p { margin: var(--space-m) 0 0; font-size: var(--step--1); letter-spacing: .3em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  .artwall__tile, .artwall__tile img { transition: none; }
}

/* Edge effects: a soft white vignette all around the screen, plus a blur that is
   strongest at the very edge and fades out towards the middle. The blur is built
   from three stacked layers, each blurring more over a thinner band.
   Screen-relative on purpose (vw/vh/px): it frames the screen, not the content. */
.edge-fx { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.edge-fx__blur {
  position: absolute; inset: 0;
  /* each layer also adds a little white, so the edges get lighter as well as blurrier */
  background: rgba(255,255,255,var(--white, .14));
  -webkit-backdrop-filter: blur(var(--b)); backdrop-filter: blur(var(--b));
  -webkit-mask-image:
    linear-gradient(to right, #000 0, transparent var(--w), transparent calc(100% - var(--w)), #000 100%),
    linear-gradient(to bottom, #000 0, transparent var(--h), transparent calc(100% - var(--h)), #000 100%);
          mask-image:
    linear-gradient(to right, #000 0, transparent var(--w), transparent calc(100% - var(--w)), #000 100%),
    linear-gradient(to bottom, #000 0, transparent var(--h), transparent calc(100% - var(--h)), #000 100%);
}
.edge-fx__blur:nth-child(1) { --b: 2px;  --w: 16vw; --h: 22vh; }
.edge-fx__blur:nth-child(2) { --b: 6px;  --w: 9vw;  --h: 13vh; }
.edge-fx__blur:nth-child(3) { --b: 14px; --w: 4vw;  --h: 6vh; }
.edge-fx__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(255,255,255,0) 55%, rgba(255,255,255,.28) 85%, rgba(255,255,255,.5) 100%);
}
@media (max-aspect-ratio: 3/4) { /* tall phone screens: thinner side bands */
  .edge-fx__blur:nth-child(1) { --w: 10vw; --h: 16vh; }
  .edge-fx__blur:nth-child(2) { --w: 6vw;  --h: 10vh; }
  .edge-fx__blur:nth-child(3) { --w: 3vw;  --h: 5vh; }
}

/* Artwork page: header floats over the images on a soft blur instead of a white fade */
.template-product .site-header::before {
  content: ""; position: absolute; inset: 0 0 calc(var(--space-l) * -1) 0; z-index: -1;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  background: rgba(255,255,255,.18);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
          mask-image: linear-gradient(to bottom, #000 40%, transparent);
}

/* ==========================================================================
   Work — collections overview
   ========================================================================== */
.work-hero {
  padding: var(--space-2xl) var(--page-pad) var(--space-xl);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: end;
  border-bottom: var(--hairline) solid var(--line);
}
.work-hero h1 { font-size: var(--step-6); }
.work-hero p { max-width: 28em; justify-self: end; color: var(--muted); margin: 0; }
@media (max-width: 46.875em) { .work-hero { grid-template-columns: 1fr; } .work-hero p { justify-self: start; } }

.collection-block { padding: var(--space-2xl) 0 var(--space-2xl); border-bottom: var(--hairline) solid var(--line); }
.collection-block__head {
  display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-l); align-items: baseline; padding: 0 var(--page-pad) var(--space-l);
}
.collection-block__index { grid-column: 1 / -1; font-size: var(--step--1); letter-spacing: .14em; color: var(--accent); margin-bottom: var(--space-xs); }
.collection-block__title { font-size: var(--step-4); }
.collection-block__desc { grid-column: 1; max-width: 36em; color: var(--muted); margin: var(--space-xs) 0 0; }
.collection-block__link { font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 46.875em) {
  .collection-block__desc { grid-column: 1 / -1; }
}

.art-rail {
  display: flex; gap: var(--space-l); overflow-x: auto; padding: 0 var(--page-pad) var(--space-xs);
  overscroll-behavior-x: contain;
  scrollbar-width: none;               /* no visible sideways scrollbar */
  cursor: grab;
}
.art-rail::-webkit-scrollbar { display: none; }
.art-rail.is-dragging { cursor: grabbing; }
.art-rail.is-dragging .art-card { pointer-events: none; }
.art-rail img { -webkit-user-drag: none; user-select: none; }
/* The rail is as tall as a share of the screen (artwork-led), but never shorter than 17.5rem */
.art-rail .art-card { flex: none; height: 46vh; min-height: 17.5rem; }
.art-rail .art-card__media { height: calc(100% - 3.25rem); aspect-ratio: var(--ar, 0.75); }
.art-rail .art-card__media img { height: 100%; width: 100%; object-fit: cover; }

.art-card { display: flex; flex-direction: column; }
.art-card__media { overflow: hidden; background: var(--soft); }
.art-card__media img { width: 100%; height: auto; transition: transform 1.2s var(--ease); }
.art-card:hover .art-card__media img { transform: scale(1.03); }
.art-card__meta { display: flex; justify-content: space-between; gap: var(--space-m); padding-top: var(--space-s); font-size: var(--step--1); }
.art-card__title { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.1; }
.art-card__price { color: var(--muted); white-space: nowrap; padding-top: 0.25em; }

/* "Coming soon": a small label on the artwork with the logo's diamond */
.art-card__media { position: relative; }
.soon-chip {
  position: absolute; left: var(--space-s); top: var(--space-s); z-index: 1;
  display: inline-flex; align-items: center; gap: 0.65em; padding: 0.55em 0.9em;
  background: var(--paper); color: var(--ink);
  font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; line-height: 1;
}
.soon-chip::before { content: ""; width: 0.45em; height: 0.45em; border-radius: var(--diamond-round); transform: rotate(45deg); background: var(--accent); }
.soon-chip--inline { position: static; align-self: flex-start; padding-left: 0; background: none; }
.art-card__price--soon { font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; }

/* Artwork page, not for sale yet: "Coming soon" takes the price's place and size,
   the explanation and form sit under it in the quieter sans; one divider below */
.pdp__soon { display: flex; flex-direction: column; gap: var(--space-s); padding-bottom: var(--space-l); }
.pdp__soon-status { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-m); }
.pdp__soon-title { display: inline-flex; align-items: center; gap: 0.35em; font-family: var(--font-display); font-size: var(--step-3); line-height: 1; }
.pdp__soon-title::before { content: ""; width: 0.28em; height: 0.28em; border-radius: var(--diamond-round); transform: rotate(45deg); background: var(--accent); }
.pdp__soon-note { font-size: var(--step--1); color: var(--muted); white-space: nowrap; }
.pdp__soon-text { margin: 0; max-width: 34em; font-size: var(--step-0); line-height: 1.55; color: var(--muted); }
.notify { display: flex; flex-direction: column; gap: var(--space-2xs); margin-top: var(--space-2xs); }
.notify input[type="email"] { text-transform: none; letter-spacing: 0; }
.notify__fine { margin: 0; font-size: var(--step--2); color: var(--muted); }
.notify__msg { margin: 0; min-height: 1.4em; font-size: var(--step--1); color: var(--muted); }

/* "Available now": small cards of works that are for sale */
.pdp__available { display: flex; flex-direction: column; gap: var(--space-s); }
.mini-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 7rem)); gap: var(--space-s); }
.mini-card { display: flex; flex-direction: column; gap: var(--space-2xs); }
.mini-card__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--soft); }
.mini-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mini-card:hover .mini-card__media img { transform: scale(1.04); }
.mini-card__meta { display: flex; flex-direction: column; gap: 0.15em; }
.mini-card__title { font-family: var(--font-display); font-size: var(--step--1); line-height: 1.2; }
.mini-card__price { font-size: var(--step--2); color: var(--muted); }

/* Single collection page */
.collection-grid { columns: 3 20rem; column-gap: var(--space-xl); padding: var(--space-2xl) var(--page-pad) var(--space-3xl); }

/* ---------- Collection page: full-screen grid ----------
   Edge to edge, every cell the same shape; each painting sits whole (uncropped)
   in its cell, so works of any proportion line up into one calm grid. */
.collection-hero {
  padding: var(--space-2xl) var(--gutter) var(--space-xl);
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-m) var(--space-xl); align-items: end;
}
.collection-hero__back { grid-column: 1 / -1; justify-self: start; font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.collection-hero__back:hover { color: var(--ink); }
.collection-hero h1 { font-size: var(--step-6); }
.collection-hero__count { font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.collection-hero__desc { grid-column: 1 / -1; max-width: 36em; color: var(--muted); margin: 0; }

.art-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-xs); padding: 0 var(--space-xs) var(--space-3xl);
}
.art-grid .art-card__media {
  aspect-ratio: 4 / 5; display: grid; place-items: center;
  padding: clamp(1.5rem, 0.5rem + 4vw, 4rem); background: var(--soft);
}
.art-grid .art-card__media img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.16));
}
.art-grid .art-card__meta { padding: var(--space-s) var(--space-2xs) var(--space-m); }
@media (max-width: 46.875em) {
  .art-grid { grid-template-columns: 1fr 1fr; }
  .art-grid .art-card__media { padding: var(--space-s); }
  .art-grid .art-card__meta { flex-direction: column; gap: 0; }
}
.collection-grid .art-card { break-inside: avoid; margin-bottom: var(--space-2xl); }

/* ==========================================================================
   About
   ========================================================================== */
.about { display: grid; grid-template-columns: 5fr 7fr; min-height: calc(100vh - var(--header-h)); }
.about__photo { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); background: var(--soft); overflow: hidden; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__photo-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; }
.about__body { padding: var(--space-2xl) clamp(1.5rem, 0.5rem + 5vw, 7rem) var(--space-3xl); }
.about__body h1 { font-size: var(--step-5); margin: var(--space-m) 0 var(--space-xl); }
.about__lead { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.25; margin: 0 0 var(--space-xl); }
.about__lead em { color: var(--accent); }
.about__text { max-width: 38em; font-size: var(--step-0); }
.about__text p { margin: 0 0 1.2em; }

.journey { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; border-top: var(--hairline) solid var(--line); max-width: 45rem; }
.journey li { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-l); padding: var(--space-l) 0; border-bottom: var(--hairline) solid var(--line); }
.journey__year { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; color: var(--accent); }
.journey__title { font-weight: 500; margin: 0 0 var(--space-3xs); }
.journey__text { margin: 0; color: var(--muted); }

.about__quote { margin: var(--space-2xl) 0 0; padding-left: var(--space-l); border-left: 2px solid var(--accent); font-family: var(--font-display); font-size: var(--step-2); line-height: 1.2; max-width: 38rem; }
.about__cta { margin-top: var(--space-xl); display: flex; gap: var(--space-s); flex-wrap: wrap; }

@media (max-width: 56.25em) { /* 900px */
  .about { grid-template-columns: 1fr; }
  .about__photo { position: relative; top: 0; height: 70vh; }
  .journey li { grid-template-columns: 5rem 1fr; }
}

/* ==========================================================================
   Artwork detail — full-screen split
   The photo column is screen-sized (vh) on purpose; the info panel is UI (rem).
   ========================================================================== */
.template-product .page-main { padding-top: 0; }
.template-product .site-footer { display: none; }

.pdp { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(min(100%, 24rem), 1fr); }
.pdp__gallery { position: relative; min-width: 0; }
.pdp__media { position: relative; }
.pdp__frame { position: relative; margin: 0; height: 100vh; overflow: hidden; background: var(--soft); }
.pdp__frame img { width: 100%; height: 100%; object-fit: cover; }
.pdp__frame--full { padding: calc(var(--header-h) + var(--space-l)) 10% var(--space-2xl); }
.pdp__frame--full img { object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,.18)); }
.pdp__frame figcaption {
  position: absolute; right: var(--space-m); bottom: var(--space-m); font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase;
  background: var(--paper); padding: 0.5em 0.9em;
}

.pdp__progress {
  position: fixed; left: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 20;
  display: flex; flex-direction: column; gap: 0.625rem; list-style: none; margin: 0; padding: 0;
}
.pdp__progress button {
  display: block; width: 0.4rem; height: 0.4rem; padding: 0; border: 0;
  border-radius: var(--diamond-round); transform: rotate(45deg); background: rgba(17,17,17,.25);
  cursor: pointer; transition: transform .5s var(--ease-line), background .4s var(--ease-line);
}
/* Bigger invisible hit area around each small dot */
.pdp__progress button { position: relative; }
.pdp__progress button::before { content: ""; position: absolute; inset: -0.5rem -0.75rem; }
.pdp__progress button[aria-current="true"] { transform: rotate(45deg) scale(1.75); background: var(--ink); }

.pdp__counter {
  position: fixed; left: var(--gutter); bottom: var(--space-m); z-index: 20; font-size: var(--step--2); letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
}

.pdp__info { position: relative; border-left: var(--hairline) solid var(--line); background: var(--paper); }
.pdp__info-inner {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  padding: calc(var(--header-h) + var(--space-xl)) clamp(1.5rem, 0.75rem + 3vw, 4rem) var(--space-xl);
  display: flex; flex-direction: column; gap: var(--space-l);
}
.pdp__breadcrumb { font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pdp__breadcrumb a:hover { color: var(--accent); }
.pdp__title { font-size: var(--step-5); margin: var(--space-xs) 0 0; }
.pdp__facts { display: flex; flex-wrap: wrap; gap: 0.4em 1.4em; margin: var(--space-s) 0 0; font-size: var(--step--1); color: var(--muted); }

.pdp__price-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-m); padding: 0 0 var(--space-m); border-bottom: var(--hairline) solid var(--line); }
.pdp__price { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; transition: opacity .25s; }
.pdp__price.is-updating { opacity: .2; }
.pdp__compare { color: var(--muted); text-decoration: line-through; margin-left: 0.6em; font-size: var(--step-1); }
.pdp__tax { font-size: var(--step--1); color: var(--muted); }

.pdp__options { display: flex; flex-direction: column; gap: var(--space-l); margin-bottom: var(--space-l); }
.opt { border: 0; padding: 0; margin: 0; min-width: 0; }
.opt legend { display: flex; justify-content: space-between; width: 100%; padding: 0; margin-bottom: var(--space-s); font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; }
.opt legend [data-option-label] { color: var(--muted); letter-spacing: .06em; text-transform: none; font-size: var(--step--1); }
.opt__values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); gap: var(--space-xs); }
.opt__btn { position: relative; display: block; cursor: pointer; }
.opt__btn input { position: absolute; opacity: 0; pointer-events: none; }
.opt__face {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.25rem; padding: 0.75rem; border: var(--hairline) solid var(--line); text-align: center; font-size: var(--step--1);
  color: var(--muted); background: var(--paper);
  transition: border-color .4s var(--ease-line), box-shadow .4s var(--ease-line), color .4s var(--ease-line);
}
.opt__btn:hover .opt__face { border-color: rgba(17,17,17,.45); color: var(--ink); }
/* Selected: a crisp black outline (1px border + 1px inner ring) and black text */
.opt__btn input:checked + .opt__face { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.opt__btn input:focus-visible + .opt__face { outline: 2px solid var(--ink); outline-offset: 3px; }
.opt__btn.is-unavailable .opt__face { color: var(--muted); background-image: linear-gradient(to top right, transparent calc(50% - .5px), var(--line) 50%, transparent calc(50% + .5px)); }

/* Size swatches: a small rectangle drawn in the artwork's proportions, scaled to the real size.
   theme.js sets the rectangle in rem, so it grows with zoom like the rest of the panel. */
.opt__ratio-box { height: 3.5rem; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.opt__ratio { display: block; border: var(--hairline) solid currentColor; background: transparent; transition: background .4s var(--ease-line); }
.opt__btn input:checked + .opt__face .opt__ratio { background: var(--ink); }
.opt__values--segmented { grid-template-columns: 1fr 1fr; }

/* ---------- Frame & passe-partout swatches (after Printumo, in our own style) ----------
   Each swatch is a little corner of a framed artwork. Hover / focus shows a tooltip
   that rises into place with the same easing as our underlines; the selected finish
   is described under the row, so phones get the explanation too. */
.opt__swatches { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.swatch-opt { position: relative; display: block; cursor: pointer; }
.swatch-opt input { position: absolute; opacity: 0; pointer-events: none; }
.swatch {
  position: relative; display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem; overflow: hidden;
  background: var(--paper); color: var(--muted);
  border: var(--hairline) solid var(--line);
  transition: border-color .4s var(--ease-line), box-shadow .4s var(--ease-line), color .4s var(--ease-line);
}
.swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Printumo's paper-frame icons have rounded corners baked in: zoom in so our square edge frames them */
.swatch--paper img { transform: scale(1.16); }
.swatch svg { width: 1.75rem; height: 1.75rem; }
.swatch--color { background: var(--finish); }
/* Same states as the size tiles: hairline → darker on hover → black outline when chosen */
.swatch-opt:hover .swatch { border-color: rgba(17,17,17,.45); color: var(--ink); }
.swatch-opt input:checked + .swatch { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.swatch-opt input:focus-visible + .swatch { outline: 2px solid var(--ink); outline-offset: 3px; }
.swatch-opt.is-unavailable .swatch { opacity: .35; }

.tip {
  position: absolute; left: 50%; bottom: calc(100% + 0.75rem); z-index: 5;
  width: max-content; max-width: 15rem; padding: 0.6rem 0.8rem;
  background: var(--ink); color: var(--paper); border-radius: 0.25rem;
  font-size: var(--step--2); line-height: 1.45; text-align: left;
  pointer-events: none; opacity: 0;
  transform: translate(-50%, 0.4rem);
  transition: opacity .3s var(--ease-line), transform .6s var(--ease-line);
}
.tip::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 0.6rem; height: 0.6rem;
  background: var(--ink); transform: translate(-50%, -50%) rotate(45deg);
}
.tip__name { display: block; letter-spacing: .14em; text-transform: uppercase; }
.tip__text { display: block; margin-top: 0.25rem; color: rgba(255,255,255,.7); }
.swatch-opt:first-child .tip { left: 0; transform: translate(0, 0.4rem); }
.swatch-opt:first-child .tip::after { left: 1.6rem; }
.swatch-opt:hover .tip, .swatch-opt:focus-within .tip { opacity: 1; transform: translate(-50%, 0); }
.swatch-opt:first-child:hover .tip, .swatch-opt:first-child:focus-within .tip { transform: translate(0, 0); }
@media (hover: none) { .tip { display: none; } }
.opt__info { margin: var(--space-s) 0 0; font-size: var(--step--1); color: var(--muted); min-height: 1.55em; }

/* ---------- The story ---------- */
.pdp__story { padding-top: var(--space-l); border-top: var(--hairline) solid var(--line); }
.pdp__story-text { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.45; margin: var(--space-s) 0 0; }
.pdp__story-text p { margin: 0 0 0.9em; }
.pdp__story-text p:last-child { margin-bottom: 0; }

.pdp__atc { display: flex; flex-direction: column; gap: var(--space-xs); }
.pdp__atc-msg { font-size: var(--step--1); min-height: 1.5em; color: var(--accent); }

.accordion { border-top: var(--hairline) solid var(--line); }
.accordion details { border-bottom: var(--hairline) solid var(--line); }
.accordion summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  min-height: var(--tap); padding: var(--space-s) 0;
  font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 1.5em; line-height: 1; transition: transform .3s var(--ease); }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion .rte { padding: 0 0 var(--space-m); color: var(--muted); font-size: var(--step--1); }
.rte p { margin: 0 0 1em; }

/* The original: facts about the painting itself, as label/value rows */
.original__list { margin: 0; padding: 0 0 var(--space-m); display: grid; gap: var(--space-xs); font-size: var(--step--1); }
.original__list div { display: grid; grid-template-columns: 7em 1fr; gap: var(--space-s); align-items: center; }
.original__list dt { color: var(--muted); }
.original__list dd { margin: 0; }
.original__note { margin: calc(var(--space-s) * -1) 0 var(--space-m); font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.palette { display: flex; flex-wrap: wrap; gap: 0.55em; padding: 0.2em 0; }
.palette__swatch {
  width: 0.8em; height: 0.8em; border-radius: var(--diamond-round); transform: rotate(45deg);
  background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08);
}

@media (max-width: 56.25em) { /* 900px */
  .pdp { grid-template-columns: 1fr; }
  .pdp__media {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-top: var(--header-h);
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .pdp__media::-webkit-scrollbar { display: none; }
  .pdp__frame { flex: none; width: 100%; height: 72vh; scroll-snap-align: start; }
  .pdp__frame--full { padding: var(--space-l); }
  .pdp__counter { display: none; }
  .pdp__progress {
    position: static; transform: none; flex-direction: row; justify-content: center;
    gap: 0.5rem; padding: var(--space-s) 0 0;
  }
  .pdp__progress { gap: 0.7rem; align-items: center; min-height: 1.2rem; padding: 0.9rem 0 0.6rem; }
  .pdp__info { border-left: 0; }
  .pdp__info-inner { position: static; height: auto; overflow: visible; padding-top: var(--space-xl); }
  .template-product .site-footer { display: flex; }
}

/* ==========================================================================
   Generic pages, contact, cart
   ========================================================================== */
.page-wrap { max-width: 48rem; margin: 0 auto; padding: var(--space-2xl) var(--gutter) var(--space-3xl); }
.page-wrap h1 { font-size: var(--step-5); margin-bottom: var(--space-xl); }

.field { margin-bottom: var(--space-s); }
.field__hint { margin: var(--space-2xs) 0 0; font-size: var(--step--1); color: var(--muted); }

/* Floating label: the label sits in the field like a placeholder, and moves up (smaller)
   on focus or once something is typed. The input needs placeholder=" " for :placeholder-shown. */
.float { position: relative; flex: 1; min-width: 0; }
.float input, .float textarea {
  display: block; width: 100%; min-height: 3.5rem; padding: 1.5rem 1rem 0.5rem;
  font: inherit; font-size: var(--step-0); line-height: 1.5; color: var(--ink); background: var(--paper);
  border: var(--hairline) solid var(--line); border-radius: 0; appearance: none;
  transition: border-color .3s var(--ease);
}
.float textarea { min-height: 10rem; resize: vertical; }
.float input:focus, .float textarea:focus { outline: none; border-color: var(--ink); }
.float input:-webkit-autofill { box-shadow: inset 0 0 0 100px var(--paper); -webkit-text-fill-color: var(--ink); }
.float label {
  position: absolute; left: 1rem; top: 1.75rem; max-width: calc(100% - 2rem);
  transform: translateY(-50%); transform-origin: left center;
  font-size: var(--step-0); line-height: 1.2; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
  transition: transform .35s var(--ease), color .35s var(--ease);
}
.float :is(input, textarea):is(:focus, :not(:placeholder-shown)) + label { transform: translateY(calc(-50% - 0.75rem)) scale(.75); }
.float :is(input, textarea):focus + label { color: var(--ink); }
.notice { padding: 0.875em 1em; background: var(--soft); border-left: 2px solid var(--accent); margin-bottom: var(--space-l); }

/* ---------- Contact ---------- */
.contact {
  display: grid; gap: var(--space-xl); max-width: 76rem; margin: 0 auto;
  padding: var(--space-2xl) var(--gutter) var(--space-3xl);
}
.contact__intro h1 { font-size: var(--step-5); margin: var(--space-m) 0 var(--space-l); }
.contact__intro .rte { max-width: 26em; color: var(--muted); }
.contact__direct { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); margin-top: var(--space-l); }
.contact-form { display: flex; flex-direction: column; gap: var(--space-l); min-width: 0; }
.reasons .opt__values { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.reasons .opt__face { min-height: var(--tap); padding: 0.55rem 1.1rem; }
.contact-form__fields { display: flex; flex-direction: column; gap: var(--space-s); }
.contact-form__fields .field { margin: 0; }
.contact-form__pair { display: grid; gap: var(--space-s); }
.contact-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); }
.contact-form__note { margin: 0; font-size: var(--step--1); color: var(--muted); }
@media (min-width: 46.875em) { .contact-form__pair { grid-template-columns: 1fr 1fr; } }
@media (min-width: 56.25em) {
  .contact { grid-template-columns: 5fr 7fr; gap: var(--space-3xl); }
  .contact__intro { position: sticky; top: calc(var(--header-h) + var(--space-l)); align-self: start; }
}

.cart-lines { list-style: none; margin: 0 0 var(--space-xl); padding: 0; border-top: var(--hairline) solid var(--line); }
.cart-line { display: grid; grid-template-columns: 6rem 1fr auto; gap: var(--space-m); align-items: center; padding: var(--space-m) 0; border-bottom: var(--hairline) solid var(--line); }
.cart-line__title { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; }
.cart-line__variant { color: var(--muted); font-size: var(--step--1); }
.cart-line input { width: 4rem; padding: 0.5em; border: var(--hairline) solid var(--line); font: inherit; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-l); }
.cart-total strong { font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); }


/* ==========================================================================
   Motion
   ========================================================================== */

/* ---------- Underline links (osmo.supply footer links) ----------
   On hover a line draws in from the left; on leave it slides out to the right.
   Links that are underlined already (current page) do the "alt" version: the line
   leaves to the right, then comes back in from the left. */
.u-link, .site-nav a, .collection-block__link, .pdp__breadcrumb a {
  position: relative; text-decoration: none;
}
.u-link::before, .site-nav a::before, .collection-block__link::before, .pdp__breadcrumb a::before,
.site-nav a[aria-current="page"]::after, .collection-block__link::after {
  content: ""; position: absolute; left: 0; bottom: 0.1em; width: 100%; height: var(--hairline);
  background: currentColor;
  transform-origin: right; transform: scaleX(0) rotate(0.001deg);
  transition: transform .6s var(--ease-line);
}
.site-nav a::before { bottom: 0.15em; background: var(--accent); }
.site-nav a[aria-current="page"]::after { bottom: 0.15em; background: var(--accent); }
.u-link:hover::before, .site-nav a:hover::before, .collection-block__link:hover::before, .pdp__breadcrumb a:hover::before {
  transform-origin: left; transform: scaleX(1) rotate(0.001deg);
}
/* alt: underlined at rest (current page, "View all" links) */
.site-nav a[aria-current="page"]::before, .collection-block__link::before {
  transform-origin: left; transform: scaleX(1) rotate(0.001deg); transition-delay: .3s;
}
.site-nav a[aria-current="page"]::after, .collection-block__link::after {
  transform-origin: right; transform: scaleX(0) rotate(0.001deg); transition-delay: 0s;
}
.site-nav a[aria-current="page"]:hover::before, .collection-block__link:hover::before {
  transform-origin: right; transform: scaleX(0) rotate(0.001deg); transition-delay: 0s;
}
.site-nav a[aria-current="page"]:hover::after, .collection-block__link:hover::after {
  transform-origin: left; transform: scaleX(1) rotate(0.001deg); transition-delay: .3s;
}

/* ---------- Rolling letters (norda.framer.website buttons) ----------
   theme.js splits button and menu labels into letters. On hover every letter rolls up
   and an identical copy rolls in from below, one letter after the other. */
.roll { display: inline-flex; white-space: pre; }
.roll__char { position: relative; display: inline-block; clip-path: inset(0 -0.3em); }
.roll__inner { position: relative; display: inline-block; }
.roll__inner::after {
  content: attr(data-char); position: absolute; left: 0; top: 100%;
}
.is-rolling .roll__inner {
  animation: roll-up .4s var(--ease-roll) both;
  animation-delay: calc(var(--i) * 50ms);
}
@keyframes roll-up { from { transform: translateY(0); } to { transform: translateY(-100%); } }
/* Icon version: the copy of the icon waits right below the visible one */
.roll--icon .roll__char { clip-path: inset(0); }
.roll--icon .roll__inner { display: block; }
.roll--icon .roll__inner > svg { display: block; }
.roll--icon .roll__inner > svg + svg { position: absolute; left: 0; top: 100%; }

/* ---------- Heading reveal (osmo.supply) ----------
   theme.js splits headings into lines (each line is a mask) and words. Each word rises
   from below the mask with a slight rotation, one after the other. */
/* Hidden until theme.js reveals them; if the script never runs, .no-reveal shows them anyway */
.js:not(.no-reveal) :is(h1.display, h2.display, .artwall__title h1:not(.artwall__logo)):not(.is-revealed) { visibility: hidden; }
.reveal-line { display: block; overflow: clip; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.reveal-word {
  display: inline-block; transform-origin: bottom left;
  transform: translateY(100%) rotate(10deg);
  transition: transform 1.2s var(--ease-reveal);
  transition-delay: calc(0.1s + var(--i) * 50ms);
}
.is-revealed .reveal-word { transform: none; }

/* ---------- Reviews (after Osmo's logo card testimonials, with faces) ---------- */
.reviews { display: flex; flex-direction: column; gap: var(--space-s); }
.reviews__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-s); }
.reviews__card { position: relative; background: var(--soft); padding: var(--space-l); }
.reviews__slides { display: grid; }
.review { grid-area: 1 / 1; margin: 0; display: flex; flex-direction: column; gap: var(--space-m);
  opacity: 0; visibility: hidden; filter: blur(6px);
  transition: opacity .4s var(--ease-line), filter .4s var(--ease-line), visibility 0s .4s; }
.review.is-active { opacity: 1; visibility: visible; filter: none; transition: opacity .4s var(--ease-line), filter .4s var(--ease-line); }
.review__person { display: flex; align-items: center; gap: var(--space-s); }
.review__avatar {
  flex: none; width: 3rem; height: 3rem; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--ink); color: var(--paper);
  font-family: var(--font-display); font-size: var(--step-0);
}
.review__avatar img { width: 100%; height: 100%; object-fit: cover; }
.review__name { display: block; font-weight: 500; font-size: var(--step--1); }
.review__meta { display: block; font-size: var(--step--1); color: var(--muted); }
.review__quote { margin: 0; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.35; }
.review__word { display: inline-block; }
.review.is-active .review__word { animation: review-word .7s var(--ease-line) both; animation-delay: calc(var(--i) * 25ms); }
@keyframes review-word { from { opacity: 0; filter: blur(6px); transform: translateY(0.3em); } to { opacity: 1; filter: none; transform: none; } }
.review__tag { display: inline-block; margin-left: auto; font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.reviews__dots { display: flex; align-items: center; gap: 0.75rem; margin-top: var(--space-l); padding-left: 0.2rem; }
.reviews__dot { position: relative; width: 0.45rem; height: 0.45rem; padding: 0; border: 0;
  border-radius: var(--diamond-round); transform: rotate(45deg); background: rgba(17,17,17,.2);
  overflow: hidden; cursor: pointer; transition: transform .6s var(--ease-line); }
.reviews__dot::before { content: ""; position: absolute; inset: -0.6rem -0.3rem; }
.reviews__dot[aria-current="true"] { transform: rotate(45deg) scale(1.6); }
.reviews__dot-fill { position: absolute; inset: 0; background: var(--ink); transform: scale(0); transform-origin: center; }
.reviews__dot[aria-current="true"] .reviews__dot-fill { animation: review-progress var(--review-time, 6s) linear forwards; }
.reviews.is-paused .reviews__dot-fill { animation-play-state: paused; }
@keyframes review-progress { to { transform: scale(1); } }

/* ==========================================================================
   Cart — drawer (side panel) and full cart page share the line + totals styles
   ========================================================================== */
.cart-is-open, .cart-is-open body { overflow: hidden; }
.cart-drawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; transition: visibility 0s linear .7s; }
.cart-drawer.is-open { visibility: visible; transition: none; }
.cart-drawer__backdrop {
  position: absolute; inset: 0; background: rgba(17,17,17,.35);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .5s var(--ease-line); cursor: pointer;
}
.cart-drawer.is-open .cart-drawer__backdrop { opacity: 1; }
.cart-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(30rem, 100vw);
  display: flex; flex-direction: column;
  background: var(--paper); outline: none;
  transform: translateX(100%); transition: transform .7s var(--ease-line);
  box-shadow: -30px 0 60px -40px rgba(0,0,0,.35);
}
.cart-drawer.is-open .cart-drawer__panel { transform: none; }
@media (max-width: 46.875em) {
  /* Phones: 80% wide, so the backdrop stays visible and tappable */
  .cart-drawer__panel { width: 80vw; }
}
.cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
  min-height: var(--header-h); padding: 0 var(--space-l); border-bottom: var(--hairline) solid var(--line);
}
.cart-drawer__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); }
.cart-drawer__title [data-cart-count] { font-family: var(--font-body); font-size: var(--step--1); color: var(--muted); vertical-align: super; margin-left: 0.2em; }
.cart-drawer__close { display: grid; place-items: center; width: var(--tap); height: var(--tap); margin-right: -0.75rem; border: 0; background: none; cursor: pointer; }
.cart-drawer__close svg { width: 1.25rem; height: 1.25rem; }
.cart-drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-l); }
.cart-drawer__foot { padding: var(--space-m) var(--space-l) var(--space-l); border-top: var(--hairline) solid var(--line); background: var(--paper); }
.cart-drawer__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); margin-top: var(--space-m); }
.cart-drawer__actions .btn, .cart-drawer__actions form { width: 100%; }
.cart-empty { padding: var(--space-2xl) 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-m); color: var(--muted); }
.cart-empty p { margin: 0; font-family: var(--font-display); font-size: var(--step-2); color: var(--ink); }
/* Empty cart: the harlequin tablecloth from "Lovely dinner" as a quiet background —
   a light-grey SVG pattern tile, rising from the bottom and fading out towards the text */
.cart-empty { position: relative; isolation: isolate; }
.cart-empty::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("tablecloth-pattern.svg"); /* theme/assets/tablecloth-pattern.svg */
  background-size: 2.25rem 3rem; background-position: center bottom;
  -webkit-mask-image: linear-gradient(to bottom, transparent 15%, #000 90%);
          mask-image: linear-gradient(to bottom, transparent 15%, #000 90%);
}
/* In the side panel the pattern fills the whole empty panel, edge to edge */
.cart-drawer .cart-empty { min-height: 100%; margin: 0 calc(var(--space-l) * -1); padding: var(--space-2xl) var(--space-l); }
/* On the cart page it gets a generous block of its own */
.cart-page .cart-empty { min-height: 55vh; padding: var(--space-2xl) var(--space-l); }
.cart-notice { margin: var(--space-s) 0 0; font-size: var(--step--1); color: var(--muted); }

/* Lines */
.cart-items { list-style: none; margin: 0; padding: 0; }
.cart-line { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--space-m); padding: var(--space-m) 0; border-bottom: var(--hairline) solid var(--line); transition: opacity .3s; }
.cart-line:last-child { border-bottom: 0; }
.cart-line.is-updating { opacity: .45; pointer-events: none; }
.cart-line__media { display: block; aspect-ratio: 4 / 5; background: var(--soft); overflow: hidden; }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__info { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; }
.cart-line__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-s); }
.cart-line__title { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.15; }
.cart-line__price { white-space: nowrap; font-size: var(--step--1); }
.cart-line__opts { list-style: none; margin: 0; padding: 0; font-size: var(--step--1); color: var(--muted); }
.cart-line__opts span { display: inline-block; min-width: 6.5em; color: var(--ink); opacity: .55; font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; }
.cart-line__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); margin-top: var(--space-2xs); }
.cart-line__remove { border: 0; background: none; padding: 0.25em 0; font: inherit; font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.qty { display: inline-flex; align-items: center; border: var(--hairline) solid var(--line); border-radius: 999px; }
.qty__btn {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 999px;
  background: none; cursor: pointer; font-size: var(--step-0); line-height: 1;
  transition: background .3s var(--ease-line), color .3s var(--ease-line);
}
.qty__btn:hover { background: var(--ink); color: var(--paper); }
.qty__n { min-width: 1.75rem; text-align: center; font-size: var(--step--1); font-variant-numeric: tabular-nums; }

/* Totals */
.cart-totals__row { display: flex; justify-content: space-between; gap: var(--space-s); padding: 0.3em 0; font-size: var(--step--1); color: var(--muted); }
.cart-totals__row--discount { color: var(--accent); }
.cart-totals__row--total { margin-top: var(--space-2xs); padding-top: var(--space-s); border-top: var(--hairline) solid var(--line); color: var(--ink); align-items: baseline; }
.cart-totals__row--total span:last-child { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; }

/* Full cart page */
.cart-page { max-width: var(--page-max); margin: 0 auto; padding: var(--space-2xl) var(--gutter) var(--space-3xl); }
.cart-page__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-m); margin-bottom: var(--space-xl); }
.cart-page__head h1 { font-size: var(--step-6); }
.cart-page__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(min(100%, 22rem), 26rem); gap: var(--space-2xl); align-items: start; }
.cart-page .cart-line { grid-template-columns: 8rem 1fr; padding: var(--space-l) 0; }
.cart-page .cart-items { border-top: var(--hairline) solid var(--line); }
.cart-summary { position: sticky; top: calc(var(--header-h) + var(--space-m)); display: flex; flex-direction: column; gap: var(--space-m); padding: var(--space-l); background: var(--soft); }
.promo { display: flex; flex-direction: column; gap: var(--space-2xs); }
.promo__row { display: flex; gap: var(--space-2xs); }
.promo__row input { text-transform: uppercase; letter-spacing: .06em; }
.promo.is-updating { opacity: .6; pointer-events: none; }
.promo__msg { margin: 0; min-height: 1.4em; font-size: var(--step--1); color: var(--muted); }
.promo-codes { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.promo-codes:empty { display: none; }
.promo-chip { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.3em 0.4em 0.3em 0.9em; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: var(--step--2); letter-spacing: .12em; }
.promo-chip button { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 0; background: none; color: inherit; cursor: pointer; }
.promo-chip svg { width: 0.85rem; height: 0.85rem; }
.pay-methods { display: flex; flex-direction: column; gap: var(--space-2xs); }
.pay-methods__list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pay-icon { height: 1.5rem; width: auto; }
.pay-pill { display: inline-flex; align-items: center; height: 1.5rem; padding: 0 0.55em; border: var(--hairline) solid var(--line); border-radius: 0.25rem; background: var(--paper); font-size: 0.6875rem; font-weight: 500; }
.cart-summary .btn--block { min-height: 3.5rem; }
@media (max-width: 56.25em) {
  .cart-page__grid { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .cart-page .cart-line { grid-template-columns: 6rem 1fr; }
}

/* ---------- Cursor dot (after snp.agency) ---------- */
.cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 1000; pointer-events: none;
  mix-blend-mode: difference; opacity: 0; transition: opacity .3s ease;
  will-change: transform;
}
.cursor-dot.is-visible { opacity: 1; }
.cursor-dot__inner { --scale: 1; position: absolute; width: 1rem; height: 1rem; transform: translate(-50%, -50%); }
.cursor-dot__circle {
  width: 100%; height: 100%; border-radius: var(--diamond-round); background: #fff;
  transform: rotate(45deg) scale(calc(var(--scale) * 0.8)); transition: transform .4s ease-in-out;
}
.cursor-dot.is-hover .cursor-dot__inner { --scale: 1.625; }
.cursor-dot.is-down .cursor-dot__inner { --scale: 0.8; }
.cursor-dot.is-hover.is-down .cursor-dot__inner { --scale: 1.3; }

/* ---------- Queued scroll reveal (collection pages) ---------- */
.q-reveal { opacity: 0; transform: translateY(2.5rem) scale(0.97); transition: opacity .8s var(--ease-reveal), transform 1.1s var(--ease-reveal); }
.q-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .logo-reveal:not(.is-revealed) .logo-letter, .logo-reveal.is-revealed .logo-letter { transform: none; transition: none; }
  .review, .review.is-active { filter: none; transition: none; }
  .review.is-active .review__word { animation: none; }
  .is-rolling .roll__inner { animation: none; }
  .reveal-word { transition: none; transform: none; }
  .u-link::before, .site-nav a::before, .site-nav a::after,
  .collection-block__link::before, .collection-block__link::after, .pdp__breadcrumb a::before { transition: none; }
}