/* ==========================================================================
   KAPOOYT AREV — styles
   ========================================================================== */

/* Animatable custom properties (smooth focus glide + reveal) */
@property --fx  { syntax: '<length>'; inherits: true; initial-value: 50vw; }
@property --fy  { syntax: '<length>'; inherits: true; initial-value: 50vh; }
@property --frx { syntax: '<length>'; inherits: true; initial-value: 120px; }
@property --fry { syntax: '<length>'; inherits: true; initial-value: 160px; }

:root {
  --paper: #f5f2eb;
  --paper-2: #ede9e0;
  --paper-3: #e4dfd4;
  --line: #d8d1c3;
  --ink: #233041;
  --muted: #6b7481;
  --blue: #1f4f86;
  --blue-deep: #173d68;
  --blue-soft: #dde7ef;
  --sun: #f3dc95;

  /* Cormorant / Jost have no Armenian letters: Noto Serif / Sans Armenian take over for
     those characters only (loaded with the page fonts; downloaded only when needed) */
  --serif: 'Cormorant Garamond', 'Cormorant', 'Noto Serif Armenian', Garamond, 'Times New Roman', serif;
  --sans: 'Jost', 'Noto Sans Armenian', 'Helvetica Neue', Arial, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.25, .1, .25, 1);
  --ease-in-out: cubic-bezier(.45, 0, .25, 1);
  --nav-h: 68px;
  --gutter: clamp(16px, 4.4vw, 64px);
  --max: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.no-scroll { overflow: hidden; }
img, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }   /* width/height attributes only reserve the aspect ratio */
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: var(--cursor-link, pointer); background: none; border: 0; padding: 0; }
h1, h2, h3, p, figure, ol, ul { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 1px solid var(--blue); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 14px;
  background: var(--blue); color: #fff; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.skip-link:focus { top: 12px; }

/* touch vs hover copy */
[data-touch] { display: none; }
.is-touch [data-touch] { display: inline; }
.is-touch [data-hover] { display: none; }

/* ------------------------------------------------------------------ type */
.eyebrow {
  font: 500 11px/1 var(--sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.display {
  font: 500 clamp(28px, 3.3vw, 44px)/1.12 var(--serif);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue);
}
.display--sm { font-size: clamp(24px, 2.6vw, 34px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 14px;
  font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--blue);
  padding-bottom: 6px;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition: background-size .5s var(--ease);
}
.link-arrow svg { width: 22px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.2; transition: transform .5s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow:hover { background-size: 70% 1px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 18px;
  font: 500 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid var(--blue);
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn--line { color: var(--blue); background: transparent; }
.btn--line:hover { background: var(--blue-soft); }
.btn--solid { color: #fff; background: var(--blue); }
.btn--solid:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn--block { width: 100%; }
.btn.is-done { background: var(--paper); color: var(--blue); }
.btn.is-done::after { content: ' ✓'; margin-left: 6px; }

.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.2; }

/* ------------------------------------------------------------------ nav */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 40;
  height: var(--nav-h);
  background: rgba(245, 242, 235, .94);
  border-bottom: 1px solid transparent;
  transition: border-color .5s var(--ease), background-color .5s var(--ease);
}
.nav.is-scrolled { border-color: rgba(216, 209, 195, .7); }
.nav__inner {
  max-width: calc(var(--max) + 2 * var(--gutter)); height: 100%; margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 14px; color: var(--blue); }
.brand__mark { width: 44px; height: 44px; flex: none; object-fit: contain; }   /* the original sun mark, images/brand/sun-mark.webp */
.brand__word {
  font: 500 21px/1 var(--serif); letter-spacing: .34em; text-transform: uppercase;
  padding-top: 2px; white-space: nowrap;
}
.nav__links { display: flex; gap: clamp(22px, 3vw, 44px); margin-left: auto; }
.nav__links a {
  font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--blue);
  padding: 8px 0;
  background: linear-gradient(currentColor, currentColor) left 100% / 0 1px no-repeat;
  transition: background-size .5s var(--ease);
}
.nav__links a:hover { background-size: 100% 1px; }
.nav__actions { display: flex; align-items: center; gap: 6px; }
.cart-btn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; color: var(--blue); }
.cart-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.cart-btn__count {
  position: absolute; top: 4px; right: 1px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--blue); color: #fff; font: 500 9.5px/16px var(--sans); text-align: center;
}
.cart-btn__count.is-bump { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.25); } }
/* HY / EN: between the cart and the account icon; the active language in cyanotype blue */
.lang-switch { display: inline-flex; align-items: center; gap: 1px; margin: 0 4px; font: 500 10.5px/1 var(--sans); letter-spacing: .14em; color: var(--muted); }
.lang-switch > span { opacity: .55; padding: 0 1px; }
.lang-switch button {
  min-width: 26px; height: 32px; padding: 0 3px;
  font: inherit; letter-spacing: inherit; color: inherit;
  background: linear-gradient(currentColor, currentColor) center calc(100% - 7px) / 0 1px no-repeat;
  transition: color .3s var(--ease), background-size .4s var(--ease);
}
.lang-switch button:hover { color: var(--blue); }
.lang-switch button.is-active, .lang-switch button[aria-pressed="true"] { color: var(--blue); background-size: 14px 1px; }
.menu-btn { display: none; width: 40px; height: 40px; position: relative; }
.menu-btn span { position: absolute; left: 10px; right: 10px; height: 1px; background: var(--blue); transition: transform .4s var(--ease), top .4s var(--ease); }
.menu-btn span:first-child { top: 16px; }
.menu-btn span:last-child { top: 23px; }
.nav.is-open .menu-btn span:first-child { top: 20px; transform: rotate(45deg); }
.nav.is-open .menu-btn span:last-child { top: 20px; transform: rotate(-45deg); }

/* ------------------------------------------------------------------ hero
   The sunny clothesline film (js/hero.js). Objects are tracked frame by frame;
   artwork develops ON the selected garment or paper and moves with it. */
.hero { position: relative; margin-top: var(--nav-h); background: #c9d6e2; }
.hero__stage {
  position: relative;
  height: calc(100svh - var(--nav-h));
  min-height: 460px; max-height: 980px;
  overflow: hidden;
  isolation: isolate;
  background: #c9d6e2 url('../images/scene/hero-sunny-poster.jpg') center / cover no-repeat;
}
.hero__backdrop {
  position: absolute; inset: -40px;
  background: url('../images/scene/hero-sunny-poster.jpg') center 40% / cover no-repeat;
  filter: blur(24px) saturate(.95);
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.hero__stage.is-letterboxed .hero__backdrop { opacity: 1; }

.frame { position: absolute; left: 0; top: 0; max-width: none; }   /* the film may be wider than the screen (cover) */
.frame--video { overflow: hidden; z-index: 0; }   /* contains the crossfade z-order, so the film stays beneath everything */
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill;                    /* the frame already has the film's 16:9 ratio */
  opacity: 0; z-index: 0;
}
.hero__video.is-front { opacity: 1; z-index: 1; }
/* loop seam: the copy starting again from frame 0 fades in on top of the one ending */
.hero__video.is-incoming { opacity: 1; z-index: 2; transition: opacity var(--loop-fade, .6s) linear; }
.hero__stage.is-letterboxed .frame--video {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent), linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent), linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect;
}

/* tracked effects, per object (js/hero.js):
   · .ho-glow  soft sunlight, native film px, clipped to the outline, moved by the per-frame affine
   · .ho-art   a canvas over the object; the print is drawn into it warped by the tracked mesh
               and clipped to the moving outline, once per film frame.
   The 1.8 s development (opacity + filter) is driven frame by frame from js/hero.js. */
.frame--fx { pointer-events: none; }
.ho-glow, .ho-art {
  position: absolute; left: 0; top: 0;
  pointer-events: none;
  opacity: 0;
}
/* 1 · gentle sunlight on the selected object */
.ho-glow {
  transform-origin: 0 0;
  background: radial-gradient(var(--gr) calc(var(--gr) * 1.15) at var(--gx) var(--gy), rgba(255, 240, 205, .55), rgba(255, 232, 190, .18) 55%, rgba(255, 232, 190, 0) 100%);
  mix-blend-mode: soft-light;
}
/* 2 · the print develops in the fabric / paper (multiply = dye, not a sticker: folds and shading show through) */
.ho-art { max-width: none; mix-blend-mode: multiply; will-change: opacity, filter; }

/* hit areas: one SVG path per object (outline + a little margin; more for touch) */
.frame--hits { overflow: visible; }
.hit {
  fill: transparent; stroke: transparent;
  stroke-width: calc(10px / var(--film-scale, 1));
  stroke-linejoin: round;
  pointer-events: all; cursor: var(--cursor-piece, pointer);
  outline: none;
}
.is-touch .hit { stroke-width: calc(18px / var(--film-scale, 1)); }
.hit:focus-visible { stroke: rgba(255, 250, 236, .9); stroke-width: calc(1.5px / var(--film-scale, 1)); stroke-dasharray: calc(5px / var(--film-scale, 1)) calc(4px / var(--film-scale, 1)); }

/* copy over the film: a soft warm-dark scrim keeps it readable on the bright meadow */
.hero__scrim {
  position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(to top, rgba(28, 34, 40, .5), rgba(28, 34, 40, .22) 45%, rgba(28, 34, 40, 0));
  pointer-events: none;
}
.hero__title {
  position: absolute; left: 50%; bottom: max(7%, 40px);
  transform: translateX(-50%);
  text-align: center; color: #fff;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(20, 26, 32, .35), 0 2px 26px rgba(20, 26, 32, .45);
  width: max-content; max-width: calc(100% - 32px);
}
.hero__brand { font: 500 clamp(26px, 3.6vw, 46px)/1.1 var(--serif); letter-spacing: .36em; text-transform: uppercase; margin-right: -.36em; }
.hero__tagline { font: italic 400 clamp(16px, 1.7vw, 22px)/1.3 var(--serif); letter-spacing: .14em; margin-top: 10px; opacity: .96; }
.hero__scroll { display: inline-block; margin-top: 18px; pointer-events: auto; color: #fff; }
.hero__scroll svg { width: 16px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.1; animation: drift 2.6s var(--ease-soft) infinite; }
@keyframes drift { 0%, 100% { transform: translateY(0); opacity: .8; } 50% { transform: translateY(6px); opacity: 1; } }

.hero__hint {
  position: absolute; right: var(--gutter); bottom: max(7%, 40px);
  display: flex; align-items: center; gap: 10px;
  font: 500 10px/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255, 255, 255, .95); text-shadow: 0 1px 14px rgba(20, 26, 32, .55);
  pointer-events: none; white-space: nowrap;
  transition: opacity .9s var(--ease-in-out);
}
.hero__hint img { width: 22px; height: auto; }
.hero.has-active .hero__hint { opacity: 0; }

.hero__caption {
  position: absolute; left: var(--gutter); bottom: max(6%, 28px);
  width: min(300px, calc(100% - 2 * var(--gutter)));
  padding: 18px 22px 16px;
  background: rgba(247, 244, 238, .94);
  color: var(--ink);
  box-shadow: 0 18px 40px -28px rgba(20, 30, 40, .5);
  opacity: 0; transform: translateY(8px);
  pointer-events: none;
  transition: opacity .6s var(--ease-soft), transform .6s var(--ease);
}
.hero.has-active .hero__caption.is-in { opacity: 1; transform: none; pointer-events: auto; }
.cap__no { display: flex; align-items: center; gap: 10px; font: 500 9.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.cap__no i { width: 18px; height: 1px; background: currentColor; }
.cap__name { margin-top: 10px; font: 500 20px/1.15 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.cap__art { margin-top: 3px; font: italic 400 16px/1.3 var(--serif); color: var(--ink); }
.cap__price { margin-left: 8px; font: 500 11px/1 var(--sans); font-style: normal; letter-spacing: .08em; color: var(--blue); }
/* two actions: order / request this exact design (primary) · explore its collection (quiet) */
.cap__actions { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.cap__primary, .cap__explore { display: inline-flex; align-items: center; gap: 9px; font: 500 9.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.cap__primary svg, .cap__explore svg { width: 18px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.2; transition: transform .4s var(--ease); }
.cap__primary { height: 34px; padding: 0 14px; color: #fff; background: var(--blue); border: 1px solid var(--blue); transition: background-color .3s var(--ease); }
.cap__primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.cap__explore { padding: 4px 0; color: var(--blue); opacity: .78; border-bottom: 1px solid rgba(31, 79, 134, .3); transition: opacity .3s var(--ease); }
.cap__explore:hover { opacity: 1; }
.cap__primary:hover svg, .cap__explore:hover svg { transform: translateX(3px); }

/* reduced motion: the film stays on its first frame (the poster); everything still works */
@media (prefers-reduced-motion: reduce) {
  .hero__video { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .hero__scroll svg { animation: none; }
}

/* portrait phones: the film is scaled so all seven pieces stay on screen;
   title above it, caption below it, so neither covers a garment */
@media (max-width: 640px), (max-aspect-ratio: 4/5) {
  .hero__stage { height: clamp(460px, 132vw, 640px); min-height: 0; }
  .hero__scrim { inset: 0 0 auto 0; height: 34%; background: linear-gradient(to bottom, rgba(28, 34, 40, .42), rgba(28, 34, 40, 0)); }
  .hero__title { top: 22px; bottom: auto; }
  .hero__brand { font-size: clamp(22px, 6.4vw, 30px); letter-spacing: .3em; margin-right: -.3em; }
  .hero__tagline { font-size: 15px; margin-top: 6px; }
  .hero__scroll { display: none; }
  .hero__hint { right: 50%; transform: translateX(50%); bottom: 18px; font-size: 9.5px; }
  .hero__caption { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 12px 16px 13px; }
  .cap__name { font-size: 16px; margin-top: 6px; }
  .cap__art { font-size: 14px; }
  .cap__actions { margin-top: 10px; justify-content: space-between; gap: 8px 12px; }
  .cap__primary { height: 32px; padding: 0 12px; }
}

/* ------------------------------------------------------------------ shop */
.shop {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
  padding: clamp(64px, 8vw, 112px) var(--gutter);
}
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 36px); }
.card { display: flex; flex-direction: column; }
.card__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); width: 100%; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter 1.1s var(--ease); }
.card__media:hover img { transform: scale(1.025); filter: brightness(1.04); }
.card__meta { padding: 20px 0 18px; }
.card__name { font: 500 12px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.card__art { margin-top: 6px; font: italic 400 16px/1.3 var(--serif); color: var(--muted); }
.card__price { margin-top: 10px; font: 500 12px/1 var(--sans); letter-spacing: .12em; }
.card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; }
.shop__note {
  margin-top: clamp(36px, 4vw, 56px);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font: italic 400 17px/1.4 var(--serif); color: var(--muted); text-align: center;
}
.shop__note svg { width: 22px; height: 22px; color: var(--blue); flex: none; }
.shop__note:empty { display: none; }

/* ------------------------------------------------------------------ story */
.story {
  display: grid; grid-template-columns: 1.05fr 1fr .95fr; align-items: center;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(56px, 7vw, 96px) 0 clamp(56px, 7vw, 96px) var(--gutter);
  background: var(--paper-2);
}
.story__collage { position: relative; aspect-ratio: 1 / .92; max-width: 520px; width: 100%; justify-self: end; }
.story__collage .c { position: absolute; object-fit: cover; box-shadow: 0 10px 30px -18px rgba(30, 40, 50, .45); }
.c--paper  { left: 6%;  top: 0;   width: 58%; aspect-ratio: 1; background: #f3f1ea; padding: 6%; object-fit: contain; transform: rotate(-2.5deg); }
.c--sky    { left: 60%; top: 4%;  width: 38%; aspect-ratio: 1; }
.c--meadow { left: 56%; top: 46%; width: 40%; aspect-ratio: 4 / 5; }
.c--shadow { left: 10%; top: 54%; width: 42%; aspect-ratio: 1; object-position: 92% 22%; }
.story__text { max-width: 400px; }
.story__lede { margin-top: 24px; font: italic 400 21px/1.5 var(--serif); color: var(--blue); }
.story__body { margin: 16px 0 28px; font-size: 14.5px; color: var(--muted); }
.story__hero { align-self: stretch; min-height: 420px; overflow: hidden; }
.story__hero img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ tracking */
.track {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 40% 90% at 0% 40%, rgba(170, 196, 220, .55), transparent 70%),
    linear-gradient(100deg, #e2eaf1 0%, #eaf0f3 55%, #f1f2ef 100%);
  padding: clamp(48px, 6vw, 80px) var(--gutter);
}
.track__inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding-left: clamp(0px, 8vw, 110px); }
.track__form { display: flex; gap: 12px; margin-top: 26px; max-width: 560px; }
.track__form input {
  flex: 1; min-width: 0; height: 46px; padding: 0 16px;
  background: #fff; border: 1px solid #cfd8e0; color: var(--ink);
  font-size: 13px; letter-spacing: .04em;
  transition: border-color .4s var(--ease);
}
.track__form input:focus { outline: none; border-color: var(--blue); }
.track__form input[aria-invalid='true'] { border-color: #a5523f; }
.track__form .btn { height: 46px; padding: 0 30px; }
.track__form.is-busy .btn { opacity: .6; pointer-events: none; }
.track__result { margin-top: 16px; max-width: 560px; min-height: 1.6em; font-size: 13.5px; color: var(--ink); }
.track__result a { color: var(--blue); border-bottom: 1px solid currentColor; }
.track__result.is-error { color: #8a3f2f; }
.track__status { font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.track__steps { margin-top: 12px; display: grid; gap: 6px; }
.track__steps li { display: flex; justify-content: space-between; color: var(--muted); }
.track__steps li.is-done { color: var(--ink); }
.track__sun {
  position: absolute; right: clamp(-40px, 8vw, 180px); top: 50%; transform: translateY(-50%);
  width: clamp(140px, 16vw, 210px); height: auto; aspect-ratio: 1; color: var(--blue); opacity: .55;
}

/* ------------------------------------------------------------------ footer */
.footer { padding: clamp(44px, 5vw, 64px) var(--gutter) 28px; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr auto; gap: clamp(28px, 4vw, 56px); align-items: start; }
.brand--footer .brand__mark { width: 40px; height: 40px; }
.brand--footer .brand__word { font-size: 17px; }
.footer__col h3 { font: 500 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--blue); margin-bottom: 18px; }
.footer__col a, .footer__col p { display: block; font-size: 13px; color: var(--ink); line-height: 1.9; }
.footer__col a:hover { color: var(--blue); }
.footer__ig { display: inline-flex !important; align-items: center; gap: 10px; margin-top: 10px; }
.footer__ig svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.footer__col--news p { color: var(--muted); max-width: 260px; }
.news { display: flex; margin-top: 16px; max-width: 320px; border: 1px solid var(--line); background: #fff; }
.news input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border: 0; background: transparent; font-size: 13px; }
.news input:focus { outline: none; }
.news button { width: 48px; color: var(--blue); display: grid; place-items: center; }
.news button svg { width: 22px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.news__msg { margin-top: 10px; font-size: 12.5px !important; color: var(--muted) !important; line-height: 1.5 !important; }
.news__msg a { display: inline !important; color: var(--blue) !important; border-bottom: 1px solid currentColor; font-size: inherit !important; }
.footer__sprig { border-left: 1px solid var(--line); padding-left: clamp(20px, 3vw, 40px); }
.footer__sprig svg { width: 48px; height: 96px; fill: var(--blue); stroke: var(--blue); stroke-width: 1.1; }
.footer__sprig svg path { fill: none; }
.footer__base {
  margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--muted);
}
.footer__crumbs i { font-style: normal; margin: 0 8px; opacity: .6; }

/* ------------------------------------------------------------------ cart drawer
   Header and footer stay put; only the item list scrolls. */
.scrim {
  position: fixed; inset: 0; z-index: 60; background: rgba(36, 60, 84, .22);
  opacity: 0; transition: opacity .4s var(--ease-soft);
}
.scrim.is-in { opacity: 1; }
.cart {
  --c-ivory: #F8F6F0;
  --c-cream: #F1EEE6;
  --c-blue: #245780;
  --c-muted: #7896AD;
  --c-pale: #E7F0F5;
  --c-line: rgba(120, 150, 173, .22);
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(400px, 100vw);
  background: var(--c-ivory); color: var(--c-blue);
  border-left: 1px solid var(--c-line);
  border-radius: 12px 0 0 12px;
  box-shadow: -24px 0 60px -48px rgba(30, 50, 70, .35);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .5s var(--ease);
  visibility: hidden;
}
.cart.is-open { transform: none; visibility: visible; }
.cart:not(.is-open) { transition: transform .5s var(--ease), visibility 0s .5s; }
.cart:focus { outline: none; }

.cart__head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 20px 14px 16px 24px; border-bottom: 1px solid var(--c-line);
}
.cart__head h2 { font: 500 17px/1 var(--serif); letter-spacing: .24em; text-transform: uppercase; color: var(--c-blue); }
.cart__head h2 span { color: var(--c-muted); letter-spacing: .12em; }
.cart__head .icon-btn { color: var(--c-blue); border-radius: 50%; transition: background-color .25s var(--ease-in-out); }
.cart__head .icon-btn:hover { background: var(--c-pale); }

.cart__lines { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 14px 0 24px;
  /* thin, quiet scrollbar with its space always reserved, so rows never reflow */
  scrollbar-width: thin; scrollbar-color: rgba(120, 150, 173, .45) transparent; scrollbar-gutter: stable; }

/* one line = one variant */
/* row 1: thumbnail | info (sized to the thumbnail); row 2: line total, right-aligned */
.line { display: grid; grid-template-columns: 80px 1fr; column-gap: 14px; padding: 16px 0 14px; border-bottom: 1px solid var(--c-line); }
.line:last-child { border-bottom: 0; }
.line__thumb { width: 80px; height: 100px; object-fit: cover; border-radius: 5px; background: var(--c-cream); }
.line__body { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.line__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.line__name { font: 500 11px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--c-blue); }
.line__price { margin-top: 3px; font-size: 12.5px; color: var(--c-muted); letter-spacing: .04em; }
.line__trash {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; margin: -6px -4px 0 0; border-radius: 50%;
  color: var(--c-muted);
  transition: background-color .25s var(--ease-in-out), color .25s var(--ease-in-out);
}
.line__trash svg { width: 15px; height: 15px; }
.line__trash:hover { background: var(--c-pale); color: var(--c-blue); }
.line__trash:focus-visible { outline: 1px solid var(--c-muted); outline-offset: 1px; }

.line__colors { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.line__label { font: 500 9px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--c-muted); }
.line__label i { font: italic 400 12.5px/1 var(--serif); letter-spacing: .02em; text-transform: none; color: #4a6a86; }
.line__label em { font: italic 400 12.5px/1 var(--serif); letter-spacing: .02em; text-transform: none; color: #a0543f; }

/* the cart uses the modal's size buttons, a touch smaller, and the same swatches */
.cart .size-pills--sm { gap: 4px; }
.cart .size-pills--sm .size-pill span { min-width: 36px; height: 28px; padding: 0 7px; font-size: 10px; letter-spacing: .1em; border-radius: 4px; }
.cart .swatches--sm { gap: 8px; }
.cart .swatches--sm .swatch span { width: 21px; height: 21px; }

/* size dropdown and quantity share a row */
.line__row { display: flex; align-items: center; gap: 6px; }
.line__row .qty { margin-left: auto; }

/* cart size dropdown: button + custom listbox (the product modal keeps its size buttons) */
.size-select {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 12px;
  min-width: 66px; height: 28px; padding: 0 9px 0 11px;
  border: 1px solid rgba(120, 150, 173, .4); border-radius: 5px;
  background: #F8F6F0; color: #245780;
  font: 500 10.5px/1 var(--sans); letter-spacing: .12em;
  transition: border-color .25s var(--ease-in-out), background-color .25s var(--ease-in-out);
}
.size-select svg { color: #7896AD; transition: transform .25s var(--ease-in-out); }
.size-select:hover { background: #F1EEE6; border-color: rgba(120, 150, 173, .7); }
.size-select[aria-expanded="true"] { background: #F1EEE6; border-color: #7896AD; }
.size-select[aria-expanded="true"] svg { transform: rotate(180deg); }
.size-select:focus-visible { outline: 1px solid #7896AD; outline-offset: 2px; }
.size-menu {
  position: absolute; z-index: 70; margin: 0; padding: 4px; list-style: none;   /* inside the sheet or cart that owns it */
  background: #F8F6F0; border: 1px solid rgba(120, 150, 173, .35); border-radius: 6px;
  box-shadow: 0 14px 30px -20px rgba(30, 50, 70, .4);
  animation: menuIn .18s var(--ease-out);
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-3px); } }
.size-menu li {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 7px 8px 7px 10px; border-radius: 4px; cursor: var(--cursor-link, pointer);
  font: 500 10.5px/1 var(--sans); letter-spacing: .12em; color: #245780;
  transition: background-color .2s var(--ease-in-out);
}
.size-menu li svg { opacity: 0; color: #245780; }
.size-menu li:hover, .size-menu li:focus { background: #F1EEE6; outline: none; }
.size-menu li[aria-selected="true"] { background: #E7F0F5; }
.size-menu li[aria-selected="true"] svg { opacity: 1; }
.size-menu li[aria-disabled="true"] { color: rgba(120, 150, 173, .5); cursor: not-allowed; background: none; }
.qty {
  display: inline-flex; align-items: center;
  border: 1px solid rgba(120, 150, 173, .4); border-radius: 6px; background: var(--c-ivory, #F8F6F0);
}
.qty button { width: 26px; height: 28px; color: var(--c-blue, #245780); font-size: 15px; transition: background-color .25s var(--ease-in-out); }
.qty button:hover { background: var(--c-pale, #E7F0F5); }
.qty button:first-child { border-radius: 5px 0 0 5px; }
.qty button:last-child { border-radius: 0 5px 5px 0; }
.qty span { min-width: 20px; text-align: center; font: 500 12px/1 var(--sans); color: var(--c-blue, #245780); }
/* line total: bottom-right of the item, under the colour row */
/* bottom row of an item: optional "add another" on the left, line total on the right */
.line__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.line__total { margin-left: auto; text-align: right; font: 500 13.5px/1 var(--sans); letter-spacing: .06em; color: var(--c-blue); }
.line__another {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 9px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted);
  padding: 3px 0; border-bottom: 1px solid transparent;
  transition: color .25s var(--ease-in-out), border-color .25s var(--ease-in-out);
}
.line__another:hover { color: var(--c-blue); border-bottom-color: rgba(120, 150, 173, .5); }
.line__another:focus-visible { outline: 1px solid var(--c-muted); outline-offset: 3px; }

.cart__empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 28px; text-align: center; }
.cart__empty[hidden] { display: none; }
.cart__empty svg { width: 48px; height: 48px; color: var(--c-blue); opacity: .7; }
.cart__empty p { font: italic 400 20px/1.3 var(--serif); color: var(--c-muted); }

.cart__foot { flex: none; padding: 18px 24px 22px; border-top: 1px solid var(--c-line); background: var(--c-ivory); }
.cart__foot[hidden] { display: none; }
.cart__row { display: flex; align-items: baseline; justify-content: space-between; }
.cart__row span { font: 500 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--c-blue); }
.cart__row strong { font: 500 16px/1 var(--sans); letter-spacing: .04em; color: var(--c-blue); }
.cart__fine { margin: 7px 0 14px; font-size: 12px; color: var(--c-muted); }
.cart #checkout {
  height: 44px; gap: 12px; border-radius: 4px;
  background: var(--c-blue); border-color: var(--c-blue); letter-spacing: .26em;
}
.cart #checkout:hover { background: #1c4669; border-color: #1c4669; }
.cart #checkout svg { transition: transform .4s var(--ease); }
.cart #checkout:hover svg { transform: translateX(3px); }
.cart__msg { margin-top: 12px; font-size: 12.5px; color: var(--c-muted); min-height: 1em; }

/* phones: full width, larger touch targets */
@media (max-width: 640px) {
  .cart { width: 100vw; border-radius: 0; border-left: 0; }
  .cart__head { padding: 18px 12px 14px 20px; }
  .cart__lines { padding: 0 20px; }
  .cart__foot { padding: 16px 20px 20px; }
  /* same 80×100 image as desktop; touch controls sized so the info still sits beside it */
  .line { grid-template-columns: 80px 1fr; column-gap: 12px; padding: 16px 0 14px; }
  .line__body { gap: 4px; }
  .size-select { height: 30px; min-width: 70px; font-size: 11px; }
  .size-menu li { padding: 10px 10px 10px 12px; font-size: 11px; }
  .cart .swatches--sm { gap: 8px; }
  .cart .swatches--sm .swatch span { width: 24px; height: 24px; }
  .qty button { width: 34px; height: 30px; }
}

/* ------------------------------------------------------------------ product sheet (modal)
   Fits the viewport on desktop: the dialog is capped at 100dvh − 48px, the image
   column never sets the height, and the info column is laid out to fit. Only
   narrow screens scroll, and only when they have to. */
.sheet {
  --s-ivory: #F8F6F0;
  --s-cream: #F1EEE6;
  --s-blue: #245780;
  --s-muted: #7896AD;
  --s-pale: #E7F0F5;
  width: min(1000px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  margin: auto;                       /* stays centred both ways */
  padding: 0; border: 0; border-radius: 4px;
  background: var(--s-ivory); color: var(--ink);
  overflow: hidden;
  box-shadow: 0 30px 80px -40px rgba(30, 50, 70, .35);
}
.sheet::backdrop { background: rgba(36, 60, 84, .28); }
.sheet[open] { animation: sheetIn .45s var(--ease-out); }
@keyframes sheetIn { from { opacity: 0; transform: translateY(10px); } }

.sheet__close {
  position: absolute; right: 14px; top: 14px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(248, 246, 240, .92);
  border: 1px solid rgba(120, 150, 173, .35);
  color: var(--s-blue);
  transition: background-color .25s var(--ease-in-out), border-color .25s var(--ease-in-out);
}
.sheet__close svg { width: 16px; height: 16px; }
.sheet__close:hover { background: var(--s-pale); border-color: rgba(120, 150, 173, .6); }

.sheet__body {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  max-height: calc(100dvh - 48px);
}

/* image: proportional, never clipped, never drives the modal's height */
.sheet__media {
  position: relative;
  min-height: min(600px, calc(100dvh - 48px));
  background: var(--s-cream);
}
.sheet__media > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
}
.sheet__print {
  position: absolute; right: 16px; bottom: 16px; width: 26%;
  background: var(--s-ivory); padding: 8px 8px 6px; border-radius: 2px;
  box-shadow: 0 10px 24px -18px rgba(30, 50, 70, .45);
}
.sheet__print img { width: 100%; }
.sheet__print figcaption { margin-top: 5px; font: italic 400 12px/1.25 var(--serif); color: var(--s-muted); }

/* info column, in order: colour · title · price · description · size · quantity · add */
.sheet__info {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(32px, 4vh, 48px) clamp(28px, 3.4vw, 48px);
  overflow-y: auto;                   /* safety net only — sized to fit on desktop */
}
.sheet__colorway { font: 500 10.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--s-muted); }
.sheet__title {
  margin-top: 12px;
  font: 500 clamp(26px, 2.5vw, 34px)/1.12 var(--serif); letter-spacing: .2em; text-transform: uppercase;
  color: var(--s-blue);
}
.sheet__price { margin-top: 12px; font: 500 14px/1 var(--sans); letter-spacing: .1em; color: var(--s-blue); }
.sheet__desc { margin-top: 18px; font: italic 400 18px/1.5 var(--serif); color: #3c4a58; max-width: 40ch; }

.sheet__form { margin-top: clamp(18px, 3vh, 28px); }
.sheet__field { border: 0; padding: 0; margin: 0 0 clamp(14px, 2.2vh, 20px); min-width: 0; }
.sheet__field legend {
  padding: 0; margin-bottom: 10px;
  font: 500 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--s-muted);
}

.sheet-qty {
  display: inline-flex; align-items: center;
  border: 1px solid rgba(120, 150, 173, .4); border-radius: 6px; background: var(--s-ivory);
}
.sheet-qty button {
  width: 40px; height: 40px; color: var(--s-blue); font-size: 16px;
  transition: background-color .25s var(--ease-in-out);
}
.sheet-qty button:hover { background: var(--s-pale); }
.sheet-qty button:first-child { border-radius: 5px 0 0 5px; }
.sheet-qty button:last-child { border-radius: 0 5px 5px 0; }
.sheet-qty input {
  width: 44px; height: 40px; border: 0; background: transparent; text-align: center;
  font: 500 13px/1 var(--sans); color: var(--s-blue);
  -moz-appearance: textfield; appearance: textfield;
}
.sheet-qty input::-webkit-inner-spin-button, .sheet-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sheet-qty input:focus-visible { outline: 1px solid var(--s-muted); outline-offset: -4px; }

/* size × quantity rows (one or more per add-to-cart) */
.vrows { margin: 0 0 clamp(12px, 2vh, 18px); }
.vrows__head, .vrow { display: grid; grid-template-columns: 96px max-content 26px; align-items: center; column-gap: 12px; }
.vrows__head { margin-bottom: 8px; }
.vrows__head span { font: 500 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--s-muted); }
.vrow + .vrow { margin-top: 6px; }
.size-select--sheet { width: 96px; height: 34px; font-size: 11px; }
.size-select--sheet[data-value=""] span { color: var(--s-muted); letter-spacing: .14em; text-transform: uppercase; font-size: 10px; }
.sheet__form.is-invalid .size-select--sheet[data-value=""] { border-color: rgba(160, 84, 64, .45); }
.sheet-qty--row button { width: 34px; height: 32px; }
.sheet-qty--row input { width: 36px; height: 32px; }
.vrow__remove {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  color: var(--s-muted); transition: background-color .25s var(--ease-in-out), color .25s var(--ease-in-out);
}
.vrow__remove:hover { background: var(--s-pale); color: var(--s-blue); }
.vrow__remove[hidden] { display: grid; visibility: hidden; }     /* keep the column, hide the icon */
.vrows__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.vrows__add {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 0;
  font: 500 9.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--s-muted);
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease-in-out), border-color .25s var(--ease-in-out);
}
.vrows__add:hover { color: var(--s-blue); border-bottom-color: rgba(120, 150, 173, .5); }
.vrows__add[hidden] { display: none; }
.vrows__total { margin-left: auto; font-size: 12px; color: var(--s-muted); letter-spacing: .04em; }
.vrows__total strong { font-weight: 500; color: var(--s-blue); }

.sheet__add { height: 48px; margin-top: 4px; background: var(--s-blue); border-color: var(--s-blue); border-radius: 3px; letter-spacing: .24em; }
.sheet__add:hover { background: #1c4669; border-color: #1c4669; }
.sheet__soon { margin-top: 24px; font: italic 400 18px/1.4 var(--serif); color: var(--s-muted); }

/* size note — prompt / validation, soft rather than alarming */
.size-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin: -4px 0 16px; padding: 10px 14px;
  border: 1px solid rgba(160, 84, 64, .22); border-radius: 6px;
  background: #fbf3ef; color: #8a4636;
  font-size: 12.5px; line-height: 1.5;
}
.size-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.size-note strong { font-weight: 500; }
.size-note.is-hidden { display: none; }
.size-note.is-pulse { animation: notePulse .5s var(--ease-in-out); }
@keyframes notePulse { 40% { transform: translateX(2px); } 70% { transform: translateX(-1px); } }
.sheet__form.is-invalid .size-pill span { border-color: rgba(160, 84, 64, .32); }

/* ------------------------------------------------------------------ size selector (sheet + cart) */
.size-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.size-pill { position: relative; }
/* the radio stays in the page for keyboard + screen readers, but is never drawn */
.size-pill input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; appearance: none; -webkit-appearance: none; pointer-events: none;
}
.size-pill span {
  display: grid; place-items: center;
  min-width: 48px; height: 40px; padding: 0 12px;
  border: 1px solid rgba(120, 150, 173, .38); border-radius: 5px;
  background: #F8F6F0;
  color: #245780;
  font: 500 11px/1 var(--sans); letter-spacing: .14em;
  cursor: var(--cursor-link, pointer); user-select: none;
  transition: background-color .25s var(--ease-in-out), border-color .25s var(--ease-in-out), color .25s var(--ease-in-out);
}
.size-pill:hover span { background: #F1EEE6; border-color: rgba(120, 150, 173, .7); }
.size-pill input:checked + span { background: #E7F0F5; border-color: #7896AD; color: #1c4669; }
.size-pill input:focus-visible + span { outline: 1px solid #7896AD; outline-offset: 2px; }
.size-pills--sm { gap: 5px; }
.size-pills--sm .size-pill span { min-width: 32px; height: 28px; padding: 0 7px; font-size: 10px; letter-spacing: .1em; border-radius: 4px; }
/* sizes this product isn't offered in (or not with the chosen colour) */
.size-pill input:disabled + span {
  cursor: not-allowed;
  color: rgba(120, 150, 173, .55); border-color: rgba(120, 150, 173, .2); background: transparent;
  background-image: linear-gradient(to top right, transparent calc(50% - .5px), rgba(120, 150, 173, .35) 50%, transparent calc(50% + .5px));
}
.size-pill:hover input:disabled + span { background-color: transparent; border-color: rgba(120, 150, 173, .2); }

/* ------------------------------------------------------------------ colour swatches (sheet + cart) */
.swatches { display: flex; flex-wrap: wrap; gap: 12px; padding: 3px; margin: -3px; }
.swatch { position: relative; display: block; }
.swatch input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; appearance: none; -webkit-appearance: none; pointer-events: none;
}
.swatch span {
  display: block; width: 28px; height: 28px; border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(36, 60, 84, .08);
  cursor: var(--cursor-link, pointer);
  transition: box-shadow .25s var(--ease-in-out), transform .25s var(--ease-in-out);
}
.swatch--light span { box-shadow: inset 0 0 0 1px rgba(120, 150, 173, .55); }
.swatch:hover span { box-shadow: inset 0 0 0 1px rgba(120, 150, 173, .55), 0 0 0 2px #F8F6F0, 0 0 0 3px rgba(120, 150, 173, .45); }
.swatch input:checked + span { box-shadow: inset 0 0 0 1px rgba(120, 150, 173, .55), 0 0 0 2px #F8F6F0, 0 0 0 3px #245780; }
.swatch input:focus-visible + span { box-shadow: inset 0 0 0 1px rgba(120, 150, 173, .55), 0 0 0 2px #F8F6F0, 0 0 0 3px #7896AD; }
.swatch input:disabled + span {
  cursor: not-allowed; opacity: .38;
  background-image: linear-gradient(to top right, transparent calc(50% - .75px), rgba(36, 60, 84, .45) 50%, transparent calc(50% + .75px));
}
.swatches--sm { gap: 9px; }
.swatches--sm .swatch span { width: 18px; height: 18px; }
.sheet__form.is-invalid .swatch input:not(:checked) + span { box-shadow: inset 0 0 0 1px rgba(160, 84, 64, .45); }

/* quiet confirmation under ADD TO CART; the sheet stays open for another size/colour */
.sheet__added {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; font-size: 12.5px; color: #4a6a86;
}
.sheet__added[hidden] { display: none; }
.sheet__added.is-in { animation: addedIn .35s var(--ease-out); }
@keyframes addedIn { from { opacity: 0; transform: translateY(-3px); } }
.sheet__added svg { color: #245780; flex: none; }
.sheet__added i { color: #7896AD; }
.sheet__added button {
  margin-left: auto; padding: 2px 0;
  font: 500 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #245780;
  border-bottom: 1px solid rgba(120, 150, 173, .55);
}
.sheet__added button:hover { border-bottom-color: #245780; }
.sheet__sample { margin-top: 8px; font: italic 400 13px/1.3 var(--serif); color: #7896AD; }
/* under the SolarFast print-colour swatches: on-screen colours are approximations */
.sheet__print-note { margin-top: 9px; max-width: 42ch; font: italic 400 12.5px/1.4 var(--serif); letter-spacing: .01em; color: #7896AD; }
.sheet__media > img { transition: opacity .22s var(--ease-in-out); }
.sheet__media > img.is-swapping { opacity: 0; }
.sheet__picked { margin-left: 4px; font: italic 400 13px/1 var(--serif); letter-spacing: .02em; text-transform: none; color: #5d6b78; }

/* narrow screens: stack, and let the sheet scroll only if it needs to */
@media (max-width: 760px) {
  .sheet { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; }
  .sheet__body { grid-template-columns: 1fr; max-height: none; }
  .sheet__media { min-height: 0; height: min(38dvh, 380px); }
  .sheet__info { overflow: visible; padding: 26px 22px 28px; justify-content: flex-start; }
  .sheet__desc { font-size: 17px; }
  .sheet__print { width: 30%; }
}

/* ------------------------------------------------------------------ toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 80;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  max-width: calc(100% - 32px);
  background: var(--blue-deep); color: #fff; padding: 12px 18px;
  font-size: 12.5px; letter-spacing: .04em;
  transition: opacity .4s var(--ease-soft), transform .4s var(--ease);
}
.toast.is-in { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------------ section fade-in */
.fade { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease-soft), transform .9s var(--ease); }
.fade.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ inner pages (/shop, /about) */
.page-hero {
  position: relative; margin-top: var(--nav-h);
  height: clamp(360px, 58vh, 600px);
  overflow: hidden; background: var(--paper-3); color: #fff;
}
.page-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(16, 26, 38, .48) 0%, rgba(16, 26, 38, .2) 45%, rgba(16, 26, 38, 0) 75%),
              linear-gradient(0deg, rgba(16, 26, 38, .28) 0%, rgba(16, 26, 38, 0) 45%);
}
.page-hero__text {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: clamp(36px, 8vh, 72px);
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
  text-shadow: 0 1px 24px rgba(10, 16, 24, .3);
}
.page-hero__kicker { font: 500 clamp(22px, 2.6vw, 34px)/1.15 var(--serif); letter-spacing: .3em; text-transform: uppercase; }
.page-hero__title { font: 500 clamp(30px, 4.2vw, 56px)/1.1 var(--serif); letter-spacing: .26em; text-transform: uppercase; }
.page-hero__sub { margin-top: 12px; font: italic 400 clamp(17px, 1.8vw, 23px)/1.35 var(--serif); letter-spacing: .06em; }

.shop--page { padding-top: clamp(48px, 6vw, 88px); }

/* closing banner (shop) */
.closing {
  position: relative; overflow: hidden;
  padding: clamp(64px, 9vw, 120px) var(--gutter);
  text-align: center; color: var(--blue);
}
.closing > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.closing::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(245, 242, 235, .55), rgba(245, 242, 235, .25)); z-index: 1; }
.closing__inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: 14px; }
.closing p { font: italic 400 clamp(17px, 1.7vw, 21px)/1.5 var(--serif); color: var(--ink); max-width: 420px; }
.closing .link-arrow { margin-top: 12px; }

/* about chapters */
.about { max-width: calc(1120px + 2 * var(--gutter)); margin: 0 auto; padding: clamp(40px, 6vw, 88px) var(--gutter) 0; }
.chapter {
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: center;
  gap: clamp(32px, 6vw, 96px);
  padding: clamp(48px, 6vw, 88px) 0;
}
.chapter + .chapter { border-top: 1px solid var(--line); }
.chapter__text { max-width: 470px; }
.chapter__text .display { font-size: clamp(22px, 2.3vw, 30px); }
.chapter__lede { margin-top: 22px; font: italic 400 clamp(18px, 1.6vw, 21px)/1.55 var(--serif); color: var(--blue); }
.chapter__body { margin-top: 16px; font-size: 14.5px; line-height: 1.75; color: var(--muted); }
.chapter__body + .chapter__body { margin-top: 12px; }
.chapter__media { position: relative; }
.chapter__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 18px 40px -28px rgba(30, 40, 50, .5); }
.chapter__media figcaption { margin-top: 12px; font: italic 400 14px/1.4 var(--serif); color: var(--muted); }
.chapter--flip .chapter__media { order: -1; }
.chapter__meaning { margin-top: 26px; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 13.5px; }
.chapter__meaning dt { font: 500 17px/1.5 var(--serif), 'Noto Serif Armenian', serif; letter-spacing: .06em; color: var(--blue); }
.chapter__meaning dd { margin: 0; font: italic 400 17px/1.5 var(--serif); color: var(--ink); }
.steps { margin-top: 24px; display: grid; gap: 14px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 34px 1fr; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); font: 500 11px/2.1 var(--sans); letter-spacing: .16em; color: var(--blue); }

.philosophy {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  margin-top: clamp(40px, 6vw, 80px); background: var(--paper-2);
}
.philosophy > img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.philosophy__text { padding: clamp(40px, 6vw, 88px) var(--gutter); max-width: 560px; align-self: center; }
.philosophy__text p { margin-top: 18px; font: italic 400 clamp(17px, 1.6vw, 20px)/1.6 var(--serif); color: var(--ink); }
.philosophy__text .link-arrow { margin-top: 28px; }

@media (max-width: 860px) {
  .chapter, .philosophy { grid-template-columns: 1fr; }
  .chapter--flip .chapter__media { order: 0; }
  .chapter__media { max-width: 440px; }
  .philosophy > img { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .page-hero { height: clamp(320px, 52vh, 460px); }
  .page-hero__kicker { letter-spacing: .24em; }
  .page-hero__title { letter-spacing: .18em; }
}

/* ------------------------------------------------------------------ checkout, confirmation, policies */
.co {
  --k-ivory: #F8F6F0; --k-cream: #F1EEE6; --k-blue: #245780; --k-muted: #7896AD; --k-pale: #E7F0F5;
  --k-line: rgba(120, 150, 173, .3);
  max-width: calc(1120px + 2 * var(--gutter)); margin: var(--nav-h) auto 0;
  padding: clamp(36px, 5vw, 64px) var(--gutter) clamp(56px, 7vw, 96px);
  color: var(--ink);
}
.co-head { margin-bottom: clamp(28px, 4vw, 44px); }
.co-back {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--k-muted);
  transition: color .25s var(--ease-in-out);
}
.co-back:hover { color: var(--k-blue); }
.co-head .display { color: var(--k-blue); }
.co-sub { margin-top: 10px; font: italic 400 clamp(18px, 1.8vw, 22px)/1.4 var(--serif); color: #4a6a86; }
.co-demo {
  display: inline-block; margin-top: 18px; padding: 8px 14px;
  border: 1px solid var(--k-line); border-radius: 999px; background: var(--k-pale);
  font-size: 12px; color: var(--k-blue);
}
.co-demo[hidden] { display: none; }   /* demo notices disappear once the backend is connected */
.co-demo strong { font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: 10.5px; }
.co-note { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--k-muted); }
.co-note a { color: var(--k-blue); border-bottom: 1px solid currentColor; }

.co-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(36px, 5vw, 72px); align-items: start; }
.co-layout[hidden], .co-empty[hidden] { display: none; }
.co-empty { display: grid; justify-items: center; gap: 16px; padding: 48px 0; text-align: center; }
.co-empty svg { width: 48px; height: 48px; color: var(--k-blue); opacity: .7; }
.co-empty p { font: italic 400 21px/1.3 var(--serif); color: var(--k-muted); }

/* form */
.co-section { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--k-line); }
.co-section__title {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px;
  font: 500 18px/1.2 var(--serif); letter-spacing: .2em; text-transform: uppercase; color: var(--k-blue);
}
.co-section__title span { font: 500 10px/1 var(--sans); letter-spacing: .16em; color: var(--k-muted); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.field { min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label, .consent label { display: block; }
.field > label { margin-bottom: 7px; font: 500 9.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--k-muted); }
.field > label span { letter-spacing: .06em; text-transform: none; font-size: 11px; }
.field input, .field select, .field textarea {
  width: 100%; height: 44px; padding: 0 14px;
  background: var(--k-ivory); border: 1px solid var(--k-line); border-radius: 5px;
  font: 400 14px/1.4 var(--sans); color: var(--ink);
  transition: border-color .25s var(--ease-in-out), background-color .25s var(--ease-in-out);
}
.field textarea { height: auto; min-height: 64px; padding: 11px 14px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(120, 150, 173, .75); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(120, 150, 173, .55); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--k-muted); background: #fff; }
.field__select { position: relative; }
.field__select select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: var(--cursor-link, pointer); }
.field__select::after {
  content: ''; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.1px solid var(--k-muted); border-bottom: 1.1px solid var(--k-muted); transform: rotate(45deg); pointer-events: none;
}
.field__static { height: 44px; display: flex; align-items: center; font-size: 14px; color: var(--ink); }
.field__static span { margin-left: 6px; font-size: 12px; color: var(--k-muted); }
.field__error { min-height: 0; margin-top: 5px; font-size: 12px; color: #a0543f; }
.field__error:empty { display: none; }
.field.is-invalid input, .field.is-invalid select { border-color: rgba(160, 84, 64, .5); background: #fdf8f5; }

/* delivery + payment choices */
.co-choices { display: grid; gap: 8px; margin-top: 18px; }
.co-choices:empty { display: none; }
.choice {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--k-line); border-radius: 6px; background: var(--k-ivory);
  cursor: var(--cursor-link, pointer); transition: border-color .25s var(--ease-in-out), background-color .25s var(--ease-in-out);
}
.choice input { accent-color: var(--k-blue); margin: 0; }
.choice:has(input:checked) { border-color: var(--k-muted); background: var(--k-pale); }
.choice.is-disabled { cursor: not-allowed; background: transparent; }
.choice.is-disabled .choice__label, .choice.is-disabled .choice__note { opacity: .55; }
.choice__label { display: block; font-size: 13.5px; color: var(--k-blue); }
.choice__note { display: block; margin-top: 3px; font-size: 11.5px; color: var(--k-muted); }
.choice__end { font: italic 400 13px/1.2 var(--serif); color: var(--k-muted); text-align: right; }
.co-choices .co-note { margin: 0; }

.consent { margin: 4px 0 20px; }
.consent label { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: #4a5a68; cursor: var(--cursor-link, pointer); }
.consent input { margin-top: 3px; accent-color: var(--k-blue); }
.consent a { color: var(--k-blue); border-bottom: 1px solid rgba(36, 87, 128, .4); }
.consent i { color: var(--k-muted); }
.consent.is-invalid label { color: #8a4636; }

.co-place { height: 50px; border-radius: 4px; background: var(--k-blue); border-color: var(--k-blue); letter-spacing: .26em; }
.co-place:hover { background: #1c4669; border-color: #1c4669; }
.co-place:disabled { opacity: .6; cursor: wait; }
.co-place-note { margin-top: 10px; text-align: center; font-size: 12px; color: var(--k-muted); }
.co-result:empty { display: none; }
.co-result { margin-top: 16px; padding: 14px 16px; border-radius: 6px; font-size: 13px; line-height: 1.6; animation: addedIn .35s var(--ease-out); }
.co-result.is-error { border: 1px solid rgba(160, 84, 64, .25); background: #fbf3ef; color: #8a4636; }
.co-result.is-demo { border: 1px solid var(--k-line); background: var(--k-pale); color: var(--k-blue); }
.co-result strong { display: block; margin-bottom: 4px; font-weight: 500; }
.co-result a { display: inline-block; margin-top: 8px; font: 500 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--k-blue); border-bottom: 1px solid rgba(36, 87, 128, .4); padding-bottom: 3px; }

/* order summary */
.co-summary {
  position: sticky; top: calc(var(--nav-h) + 24px);
  padding: 26px 26px 22px; border: 1px solid var(--k-line); border-radius: 8px; background: var(--k-cream);
}
.co-summary__title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font: 500 16px/1.2 var(--serif); letter-spacing: .2em; text-transform: uppercase; color: var(--k-blue); }
.co-summary__title span { font: 400 12px/1 var(--sans); letter-spacing: .04em; text-transform: none; color: var(--k-muted); }
.co-items { margin: 0; padding: 0; list-style: none; }
.co-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--k-line); }
.co-item--plain { grid-template-columns: 1fr auto; }
.co-item img { width: 56px; height: 70px; object-fit: cover; border-radius: 4px; background: var(--k-ivory); }
.co-item__name { font: 500 10.5px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--k-blue); }
.co-item__meta { margin-top: 4px; font-size: 12px; color: var(--k-muted); }
.co-item__total { font: 500 13px/1 var(--sans); color: var(--k-blue); white-space: nowrap; }
.co-totals { margin: 14px 0 0; }
.co-totals div { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: 13px; color: #4a5a68; }
.co-totals dd { margin: 0; text-align: right; color: var(--k-blue); }
.co-totals i { font: italic 400 14px/1.2 var(--serif); color: var(--k-muted); }
.co-totals__grand { margin-top: 8px; padding-top: 12px !important; border-top: 1px solid var(--k-line); }
.co-totals__grand dt { font: 500 11px/1.6 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--k-blue); }
.co-totals__grand dd { font: 500 16px/1.2 var(--sans); }
.co-fine { margin-top: 12px; font-size: 12px; line-height: 1.55; color: var(--k-muted); }
.co-fine--flag { color: #4a6a86; }
.co-link { margin-top: 14px; font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--k-muted); border-bottom: 1px solid transparent; padding-bottom: 3px; transition: color .25s, border-color .25s; }
.co-link:hover { color: var(--k-blue); border-bottom-color: rgba(120, 150, 173, .5); }

/* confirmation */
.cf { max-width: calc(720px + 2 * var(--gutter)); }
.cf .display { color: var(--k-blue); }
.cf-banner { margin-bottom: 28px; padding: 12px 16px; border: 1px dashed rgba(120, 150, 173, .6); border-radius: 6px; background: var(--k-pale); font-size: 13px; color: var(--k-blue); }
.cf-banner strong { font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
.cf-placeholder { font: italic 400 14px/1.3 var(--serif); color: var(--k-muted); letter-spacing: .02em; text-transform: none; }
.cf-status { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin: 26px 0 18px; padding: 18px 0; border-top: 1px solid var(--k-line); border-bottom: 1px solid var(--k-line); }
.cf-status dt { font: 500 9.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--k-muted); margin-bottom: 6px; }
.cf-status dd { margin: 0; font-size: 14px; color: var(--k-blue); }
.cf-status i { color: var(--k-muted); }
.cf .link-arrow { margin-top: 24px; }

/* policies */
.pol-page { max-width: calc(760px + 2 * var(--gutter)); }
.pol { padding: 26px 0; border-top: 1px solid var(--k-line); }
.pol__draft { display: inline-block; margin-bottom: 12px; padding: 4px 10px; border: 1px dashed rgba(160, 84, 64, .45); border-radius: 999px; font: 500 9.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #a0543f; }
.pol .display { color: var(--k-blue); }
.pol__lede { margin-top: 12px; font: italic 400 18px/1.5 var(--serif); color: #4a6a86; }
.pol__covers { margin-top: 12px; font-size: 13px; color: var(--k-muted); }
.pol__updated { margin-top: 6px; font-size: 12.5px; color: var(--k-muted); }
.pol__body { margin-top: 14px; max-width: 72ch; font-size: 14.5px; line-height: 1.7; color: #3e4f5e; }
.pol__body h3 { margin: 22px 0 6px; font: 500 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--k-blue); }
.pol__body p { margin: 8px 0; }
.pol__body ul { margin: 8px 0 8px 20px; padding: 0; list-style: disc; }
.pol__body li { margin: 4px 0; }
.pol__body a { color: var(--k-blue); }
.pol__list { margin: 6px 0 0 18px; padding: 0; font-size: 13.5px; line-height: 1.8; color: #4a5a68; list-style: disc; }

@media (max-width: 860px) {
  .co-layout { grid-template-columns: 1fr; }
  .co-summary { position: static; order: -1; }        /* summary first on phones, form below */
}
@media (max-width: 560px) {
  .fields { grid-template-columns: 1fr; }
  .cf-status { grid-template-columns: 1fr; }
  .co-summary { padding: 20px 18px 18px; }
}

/* email links inside result messages read as plain text links */
.co-result a[href^="mailto:"] { display: inline; margin: 0; padding: 0; font: inherit; letter-spacing: normal; text-transform: none; }

/* ------------------------------------------------------------------ account icon (header) */
.account-btn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; color: var(--blue); }
.account-btn svg { width: 22px; height: 22px; }
.account-btn.is-signed-in::after {   /* a tiny dot when signed in */
  content: ''; position: absolute; right: 8px; bottom: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--blue);
}

/* ------------------------------------------------------------------ favourites heart */
.card__figure { position: relative; }
.heart {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  color: #245780; background: rgba(248, 246, 240, .82);
  transition: background-color .25s var(--ease-in-out), transform .25s var(--ease-in-out);
}
.heart svg { transition: fill .25s var(--ease-in-out); }
.heart:hover { background: #F8F6F0; }
.heart[aria-pressed="true"] svg { fill: currentColor; }
.heart:active { transform: scale(.94); }
.heart:focus-visible { outline: 1px solid #7896AD; outline-offset: 2px; }
.card__figure .heart { position: absolute; top: 12px; right: 12px; }
.sheet__titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.heart--sheet { flex: none; margin-top: 8px; background: transparent; border: 1px solid rgba(120, 150, 173, .35); }
.heart--sheet:hover { background: #E7F0F5; }

/* ------------------------------------------------------------------ reviews (in the product sheet) */
.sheet__reviews-link {
  margin-left: 14px; padding-bottom: 2px;
  font: 500 9.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #7896AD;
  border-bottom: 1px solid rgba(120, 150, 173, .45);
  transition: color .25s var(--ease-in-out);
}
.sheet__reviews-link:hover { color: #245780; }
.sheet__info.is-reviews > :not(.sheet__reviews) { display: none; }
.sheet__info.is-reviews { justify-content: flex-start; }
.rv-title { margin-bottom: 14px; font: 500 22px/1.2 var(--serif); letter-spacing: .2em; text-transform: uppercase; color: #245780; }
.rv-title span { display: block; margin-top: 6px; font: italic 400 15px/1.2 var(--serif); letter-spacing: .02em; text-transform: none; color: #7896AD; }
.rv-note { font: italic 400 16px/1.5 var(--serif); color: #4a6a86; }
.rv-note a { color: #245780; border-bottom: 1px solid currentColor; }
.rv-summary { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12.5px; color: #4a6a86; }
.stars { color: #245780; letter-spacing: .08em; font-size: 12px; }
.stars span { color: rgba(120, 150, 173, .35); }
.rv-list { margin: 0; padding: 0; list-style: none; }
.rv { padding: 14px 0; border-bottom: 1px solid rgba(120, 150, 173, .25); }
.rv__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: #4a6a86; }
.rv__meta time { margin-left: auto; color: #7896AD; }
.rv__verified, .rv__status { font: 500 9px/1 var(--sans); font-style: normal; letter-spacing: .16em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; background: #E7F0F5; color: #245780; }
.rv__status { background: transparent; border: 1px solid rgba(120, 150, 173, .45); color: #7896AD; }
.rv__body { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.rv-form { display: grid; gap: 10px; margin-top: 18px; }
.rv-form textarea { width: 100%; padding: 10px 12px; border: 1px solid rgba(120, 150, 173, .35); border-radius: 5px; background: #F8F6F0; font: 400 13.5px/1.5 var(--sans); color: var(--ink); resize: vertical; }
.rv-form textarea:focus { outline: none; border-color: #7896AD; background: #fff; }
.rv-rate { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; border: 0; padding: 0; margin: 0; }
.rv-rate legend { float: left; width: 100%; margin-bottom: 6px; font: 500 9.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #7896AD; }
.rv-rate input { position: absolute; opacity: 0; pointer-events: none; }
.rv-rate label { font-size: 22px; line-height: 1; color: rgba(120, 150, 173, .4); cursor: var(--cursor-link, pointer); transition: color .2s; }
.rv-rate label:hover, .rv-rate label:hover ~ label, .rv-rate input:checked ~ label { color: #245780; }
.rv-rate input:focus-visible + label { outline: 1px solid #7896AD; outline-offset: 2px; }
.rv-fine { font-size: 12px; color: #7896AD; }
.rv-form .btn { justify-self: start; }

/* ------------------------------------------------------------------ sign in / sign up / reset / track */
.auth { display: grid; justify-items: center; }
.auth__card { width: min(460px, 100%); text-align: left; }
.auth__card--wide { width: min(560px, 100%); }
.auth__sun { width: 40px; height: 40px; color: var(--k-blue); margin-bottom: 16px; }
.auth .display { color: var(--k-blue); }
.auth__demo { margin-bottom: 4px; border-radius: 8px; }
.auth__form { margin-top: 26px; }
.auth__form .fields { margin-bottom: 6px; }
.auth__lead { margin-bottom: 16px; font-size: 13px; line-height: 1.6; color: #4a6a86; }
.auth__forgot { margin: 2px 0 18px; text-align: right; font-size: 12.5px; }
.auth__forgot a, .auth__alt a { color: var(--k-blue); border-bottom: 1px solid rgba(36, 87, 128, .35); }
.auth__submit { height: 48px; border-radius: 4px; background: var(--k-blue); border-color: var(--k-blue); letter-spacing: .24em; margin-top: 8px; }
.auth__submit:hover { background: #1c4669; border-color: #1c4669; }
.auth__submit.is-busy { opacity: .7; cursor: wait; }
.auth__submit.is-busy span::after { content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 10px; border: 1px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.auth__alt { margin-top: 18px; font-size: 13px; color: #4a5a68; }
.auth__alt--quiet { margin-top: 8px; font-size: 12.5px; color: var(--k-muted); }
.auth .consent { margin: 10px 0 8px; }
.field__pw { position: relative; }
.field__pw input { padding-right: 64px; }
.field__show { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 6px 8px; font: 500 9.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--k-muted); border-radius: 4px; }
.field__show:hover { color: var(--k-blue); background: var(--k-pale); }
.field__hint { margin-top: 5px; font-size: 12px; color: var(--k-muted); }
.field.is-invalid .field__hint { display: none; }
.co-guest { margin-top: 12px; font-size: 12.5px; color: var(--k-muted); }
.co-guest a { color: var(--k-blue); border-bottom: 1px solid rgba(36, 87, 128, .35); }
.cf-account { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--k-line); }
.cf-account p { width: 100%; font: italic 400 18px/1.4 var(--serif); color: #4a6a86; }
.cf-account span { font-size: 12px; color: var(--k-muted); }

/* ------------------------------------------------------------------ account dashboard */
.acct { max-width: calc(1120px + 2 * var(--gutter)); }
.acct-banner { margin-bottom: 26px; }
.acct-head { margin-bottom: clamp(26px, 4vw, 40px); }
.acct-head .display { color: var(--k-blue); font-size: clamp(24px, 2.8vw, 36px); }
.acct-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.acct-nav { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 2px; padding-right: 20px; border-right: 1px solid var(--k-line); }
.acct-nav a, .acct-nav__logout {
  display: block; padding: 9px 0; text-align: left;
  font: 500 10.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--k-muted);
  transition: color .25s var(--ease-in-out), padding-left .3s var(--ease-in-out);
}
.acct-nav a:hover { color: var(--k-blue); }
.acct-nav a[aria-current] { color: var(--k-blue); padding-left: 10px; box-shadow: inset 1px 0 0 var(--k-blue); }
.acct-nav__logout { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--k-line); }
.acct-nav__logout:hover { color: #a0543f; }
.acct-panel:focus { outline: none; }
.acct-title { font: 500 20px/1.2 var(--serif); letter-spacing: .2em; text-transform: uppercase; color: var(--k-blue); }
.acct-sub { margin-top: 8px; font: italic 400 16px/1.5 var(--serif); color: #4a6a86; }
.acct-subtitle { margin: 28px 0 12px; font: 500 15px/1.2 var(--serif); letter-spacing: .18em; text-transform: uppercase; color: var(--k-blue); }
.acct-fine { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--k-muted); }
.acct-fine a { color: var(--k-blue); border-bottom: 1px solid rgba(36, 87, 128, .35); }
.acct-form { margin-top: 22px; }
.acct-form--split { padding-top: 22px; border-top: 1px solid var(--k-line); }
.acct-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.acct-fieldset .fields { margin-bottom: 16px; }
.acct-fieldset .btn { border-radius: 4px; }
.acct-fieldset .btn--solid { background: var(--k-blue); border-color: var(--k-blue); }
.acct-fieldset .co-link { margin-left: 14px; }
.acct-fieldset[disabled] { opacity: .55; }
.acct-fieldset[disabled] input, .acct-fieldset[disabled] select { cursor: not-allowed; }
.acct-empty { display: grid; justify-items: start; gap: 8px; margin-top: 24px; padding: 28px; border: 1px dashed var(--k-line); border-radius: 8px; background: var(--k-ivory); }
.acct-empty svg { width: 32px; height: 32px; color: var(--k-blue); opacity: .6; }
.acct-empty__title { font: italic 400 19px/1.3 var(--serif); color: var(--k-blue); }
.acct-empty p:not(.acct-empty__title) { font-size: 13px; line-height: 1.6; color: var(--k-muted); max-width: 46ch; }

.acct-orders { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.acct-order { padding: 18px 20px; border: 1px solid var(--k-line); border-radius: 8px; background: var(--k-ivory); }
.acct-order__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.acct-order__no { font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--k-blue); margin-right: 12px; }
.acct-order time { font-size: 12.5px; color: var(--k-muted); }
.acct-order__total { font: 500 14px/1 var(--sans); color: var(--k-blue); }
.acct-order__status { display: flex; gap: 8px; margin-top: 10px; }
.acct-order__status span { padding: 4px 9px; border-radius: 999px; background: var(--k-pale); font: 500 9.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--k-blue); }
.acct-order__thumbs { display: flex; gap: 6px; margin-top: 12px; }
.acct-order__thumbs img { width: 44px; height: 55px; object-fit: cover; border-radius: 4px; }
.acct-order__details summary { margin-top: 12px; cursor: var(--cursor-link, pointer); font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--k-muted); }
.acct-order__details summary:hover { color: var(--k-blue); }

/* status timeline */
.tl { display: grid; grid-template-columns: repeat(4, 1fr); margin: 16px 0 4px; padding: 0; list-style: none; counter-reset: tl; }
.tl li { position: relative; padding-top: 18px; font-size: 11.5px; color: var(--k-muted); }
.tl li::before { content: ''; position: absolute; top: 4px; left: 0; right: 0; height: 1px; background: var(--k-line); }
.tl li::after { content: ''; position: absolute; top: 0; left: 0; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--k-muted); background: var(--k-ivory); }
.tl li.is-done { color: var(--k-blue); }
.tl li.is-done::before { background: var(--k-blue); }
.tl li.is-done::after { background: var(--k-blue); border-color: var(--k-blue); }
.tl li.is-current span { font-weight: 500; }
.tl-flag { margin-top: 14px; display: inline-block; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(160, 84, 64, .35); font: 500 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #a0543f; }

.acct-favs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px; margin: 22px 0 0; padding: 0; list-style: none; }
.acct-fav__img { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; background: var(--k-cream); }
.acct-fav__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.acct-fav__img:hover img { transform: scale(1.03); }
.acct-fav__name { margin-top: 10px; font: 500 10.5px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--k-blue); }
.acct-fav__price { margin-top: 4px; font-size: 12.5px; color: var(--k-muted); }
.acct-fav__actions { display: flex; gap: 14px; }
.acct-fav__actions .co-link { margin-top: 8px; }

.acct-addresses { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.acct-address { padding: 16px 18px; border: 1px solid var(--k-line); border-radius: 8px; background: var(--k-ivory); font-size: 13px; line-height: 1.6; color: #4a5a68; }
.acct-address.is-default { border-color: var(--k-muted); background: var(--k-pale); }
.acct-address__label { margin-bottom: 4px; font: 500 10.5px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--k-blue); }
.acct-address__label em { margin-left: 6px; font: italic 400 13px/1 var(--serif); letter-spacing: .02em; text-transform: none; color: var(--k-muted); }
.acct-address__actions { display: flex; flex-wrap: wrap; gap: 0 14px; }
.acct-danger { margin-top: 32px; padding-top: 4px; border-top: 1px solid var(--k-line); }

@media (max-width: 860px) {
  .acct-layout { grid-template-columns: 1fr; gap: 22px; }
  .acct-nav {
    position: static; display: flex; gap: 6px; overflow-x: auto; padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--k-line);
    scrollbar-width: none;
  }
  .acct-nav::-webkit-scrollbar { display: none; }
  .acct-nav a, .acct-nav__logout { flex: none; padding: 8px 12px; border: 1px solid var(--k-line); border-radius: 999px; white-space: nowrap; letter-spacing: .14em; }
  .acct-nav a[aria-current] { padding-left: 12px; box-shadow: none; background: var(--k-pale); border-color: var(--k-muted); }
  .acct-nav__logout { margin: 0; padding-top: 8px; border-top: 1px solid var(--k-line); }
  .tl { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
}

/* ================================================================== HOME + SHOP (editorial redesign) */
.wrap-x { max-width: calc(var(--max) + 2 * var(--gutter)); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* nav: current section */
.nav__links a[aria-current] { background-size: 100% 1px; }

/* ---------------- About */
.h-about {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(28px, 4vw, 56px); align-items: center;
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(56px, 7vw, 96px) var(--gutter);
}
.h-about .display { font-size: clamp(26px, 2.8vw, 38px); }
.h-about__body { margin: 22px 0 26px; max-width: 46ch; font: 400 17px/1.65 var(--serif); color: #3c4a58; }
.h-about__collage { display: grid; grid-template-columns: 1.55fr 1fr .8fr; grid-template-rows: minmax(0, 1fr) minmax(0, .78fr); gap: 8px; height: clamp(280px, 30vw, 400px); }
.h-about__collage img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 3px; }
.h-about__mountain { grid-row: 1 / 3; }
.h-about__hands { grid-column: 2; grid-row: 1; }
.h-about__note { grid-column: 2; grid-row: 2; }
.h-about__fabric { grid-column: 3; grid-row: 1 / 3; }

/* ---------------- Two ways */
.ways { background: var(--paper-2); padding: clamp(56px, 7vw, 92px) 0; }
.ways__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto clamp(26px, 3vw, 38px); padding: 0 var(--gutter); }
.ways__head .display { font-size: clamp(24px, 2.7vw, 36px); }
.ways__tag { display: flex; align-items: center; gap: 18px; font: 500 10px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ways__tag::before { content: ''; width: 64px; height: 1px; background: var(--blue); opacity: .5; }
.ways__grid { display: grid; grid-template-columns: 1fr 1fr; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.way { padding: 0 clamp(18px, 2.6vw, 36px); }
.way:first-child { padding-left: 0; border-right: 1px solid var(--line); }
.way:last-child { padding-right: 0; }
.way__main { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 26px); }
.way__main > img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.way__title { font: 500 clamp(17px, 1.6vw, 20px)/1.2 var(--serif); letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.way__sub { margin-top: 4px; font: italic 400 16px/1.3 var(--serif); letter-spacing: .06em; color: var(--blue); }
.way__body { margin: 14px 0 18px; font-size: 13.5px; line-height: 1.7; color: #4a5a68; }
.way__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.way__tiles button, .way__tiles a { display: block; width: 100%; text-align: center; }
.way__tiles img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; transition: transform .8s var(--ease), filter .8s var(--ease); }
.way__tiles button:hover img, .way__tiles a:hover img { transform: translateY(-2px); filter: brightness(1.04); }
.way__tiles span { display: block; margin-top: 9px; font: 500 9px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* ---------------- Collection: filters + cards (Home preview & Shop) */
.h-shop { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(56px, 7vw, 92px) var(--gutter); }
.h-shop__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.h-shop__head .display { font-size: clamp(24px, 2.7vw, 36px); }
.h-shop__tag { font: italic 400 16px/1.3 var(--serif); color: #4a6a86; }
.h-shop__more { margin-top: 30px; text-align: right; }

.filters { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 0; margin-bottom: clamp(24px, 3vw, 34px); }
.filter { padding: 0 clamp(14px, 2vw, 26px); border-left: 1px solid var(--line); }
.filter:first-child { padding-left: 0; border-left: 0; }
.filter__label { display: block; margin-bottom: 10px; font: 500 9.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--blue); }
.filter__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  height: 26px; padding: 0 13px; border-radius: 999px; border: 1px solid rgba(120, 150, 173, .45);
  font: 400 11px/1 var(--sans); letter-spacing: .02em; color: #3c5a78; background: transparent;
  transition: background-color .25s var(--ease-in-out), color .25s var(--ease-in-out), border-color .25s var(--ease-in-out);
}
.chip:hover { border-color: var(--blue); }
.chip[aria-pressed="true"] { background: #245780; border-color: #245780; color: #fff; }
.chip:focus-visible { outline: 1px solid #7896AD; outline-offset: 2px; }
.filter--sort { margin-left: auto; }
.filter--sort select {
  appearance: none; -webkit-appearance: none; height: 30px; min-width: 150px; padding: 0 32px 0 12px;
  border: 1px solid rgba(120, 150, 173, .45); border-radius: 4px; background: #F8F6F0;
  font: 400 12px/1 var(--sans); color: #245780; cursor: var(--cursor-link, pointer);
}
.filter--sort .field__select::after { right: 12px; }
/* below a wide desktop the groups stack, each on its own clean row (no stray dividers) */
@media (max-width: 1240px) {
  .filters { flex-direction: column; gap: 14px; }
  .filter, .filter:first-child { display: flex; align-items: center; gap: 14px; width: 100%; padding: 0; border-left: 0; }
  .filter__label { margin: 0; min-width: 96px; }
  .filter--sort { margin-left: 0; }
}
@media (max-width: 640px) {
  .filter, .filter:first-child { flex-direction: column; align-items: flex-start; gap: 8px; }
}
.collection__empty { padding: 40px 0; text-align: center; font: italic 400 18px/1.4 var(--serif); color: var(--muted); }

.grid.grid--collection { grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.2vw, 30px) clamp(14px, 1.8vw, 24px); }
.h-shop .grid.grid--collection { grid-template-columns: repeat(5, 1fr); }
.grid.grid--collection .card { display: flex; flex-direction: column; }
.grid.grid--collection .card__media { aspect-ratio: 1; border-radius: 3px; }
.grid.grid--collection .card__name { margin-top: 14px; font: 500 14px/1.25 var(--serif); letter-spacing: .16em; color: var(--blue); }
.grid.grid--collection .card__cat { margin-top: 4px; font: italic 400 13.5px/1.3 var(--serif); color: var(--muted); }
.card__cat i { margin: 0 4px; font-style: normal; opacity: .6; }
.card__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.grid.grid--collection .card__price { margin: 0; font: 500 13px/1 var(--sans); letter-spacing: .04em; color: var(--blue); }
.card__view { height: 30px; padding: 0 14px; font-size: 9.5px; letter-spacing: .18em; }
.h-shop .grid.grid--collection .card__name { font-size: 11.5px; font-family: var(--sans); letter-spacing: .18em; }
.h-shop .grid.grid--collection .card__cat { display: none; }
.h-shop .card__view { padding: 0 10px; }

/* ---------------- Process */
.h-process { background: var(--paper-2); padding: clamp(52px, 6vw, 84px) var(--gutter); }
.h-process__head, .h-process__steps { max-width: var(--max); margin: 0 auto; }
.h-process__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; margin-bottom: 24px; }
.h-process__head .display { font-size: clamp(24px, 2.7vw, 36px); }
.h-process__tag { font: italic 400 16px/1.3 var(--serif); color: #4a6a86; }
.h-process__head .link-arrow { margin-left: auto; }
.h-process__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 22px); padding: 0; list-style: none; }
.h-process__steps img { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; border-radius: 3px; }
.h-process__n { margin-top: 12px; font: 500 10.5px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--blue); }
.h-process__n span { margin-right: 8px; }
.h-process__d { margin-top: 4px; font: italic 400 15px/1.35 var(--serif); color: #4a6a86; }

/* ---------------- Custom memories */
.custom {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 40px); align-items: center;
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(52px, 6vw, 84px) var(--gutter);
}
.custom__hero { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; border-radius: 3px; }
.custom .display { font-size: clamp(20px, 2vw, 26px); letter-spacing: .22em; }
.custom__sub { margin-top: 6px; font: italic 400 16px/1.3 var(--serif); color: #4a6a86; }
.custom__body { margin: 14px 0 20px; font-size: 13.5px; line-height: 1.7; color: #4a5a68; }
.custom__cta { gap: 12px; }
.custom__cta svg { width: 20px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.custom__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.custom__tiles img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.custom__tiles span { display: block; margin-top: 9px; text-align: center; font: 500 9px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* ---------------- Tracking + newsletter band */
.band {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(24px, 5vw, 72px); align-items: center;
  padding: clamp(40px, 5vw, 60px) max(var(--gutter), calc((100% - var(--max)) / 2));
  background:
    radial-gradient(ellipse 30% 120% at 0% 40%, rgba(170, 196, 220, .55), transparent 70%),
    linear-gradient(100deg, #e2eaf1 0%, #eaf0f3 55%, #f1f2ef 100%);
}
.band .display { font-size: clamp(18px, 1.8vw, 22px); }
.band .eyebrow { margin-bottom: 10px; }
.band .track__form { margin-top: 16px; }
.band__sun { width: clamp(70px, 8vw, 104px); height: auto; aspect-ratio: 1; color: var(--blue); opacity: .55; }

/* ---------------- footer quick links */

/* ---------------- Shop page */
.s-hero {
  position: relative; margin-top: var(--nav-h); height: clamp(300px, 40vw, 470px); overflow: hidden;
  background: linear-gradient(180deg, #dfe6ee 0%, #e6eaee 55%, #ebe9e2 100%);
}
.s-hero__img {
  position: absolute; right: 0; top: 0; height: 100%; width: 74%; object-fit: cover; object-position: 100% 50%;
  /* the photo dissolves into the soft sky on the left, where the title sits */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
}
.s-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(232, 236, 240, .55) 22%, rgba(232, 236, 240, 0) 46%);
}
.s-hero__text { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; transform: translateY(-50%); max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.s-hero__title { font-size: clamp(30px, 4.2vw, 56px); line-height: 1.12; letter-spacing: .24em; }
.s-hero__sub { margin-top: 14px; max-width: 30ch; font: italic 400 clamp(17px, 1.7vw, 22px)/1.4 var(--serif); color: #2e4a68; }
.s-hero__line { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; font: 500 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #3c5a78; }
.s-hero__line::before { content: ''; width: 34px; height: 1px; background: currentColor; }

.shop--page { padding-top: clamp(36px, 4vw, 52px); }

.s-worlds { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper-2); padding: clamp(40px, 5vw, 64px) var(--gutter); gap: 0; }
.s-world { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(18px, 2.4vw, 32px); align-items: center; padding: 0 clamp(16px, 2.4vw, 36px); max-width: 680px; }
.s-world:first-child { justify-self: end; padding-left: 0; border-right: 1px solid var(--line); }
.s-world:last-child { padding-right: 0; }
.s-world .display { font-size: clamp(22px, 2.3vw, 30px); }
.s-world__body { margin: 16px 0 22px; font: italic 400 16px/1.55 var(--serif); color: #3c4a58; }
.s-world__collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; height: clamp(220px, 22vw, 290px); }
.s-world__collage img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 3px; }
.s-world__tall { grid-row: 1 / 3; }

.s-band { position: relative; overflow: hidden; min-height: clamp(160px, 16vw, 220px); display: flex; align-items: center; color: #fff; }
.s-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }
.s-band::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(26, 44, 64, .5), rgba(26, 44, 64, .12) 45%, rgba(26, 44, 64, .38)); }
.s-band__inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 26px var(--gutter); }
.s-band__title { font: 500 clamp(18px, 2vw, 26px)/1.4 var(--serif); letter-spacing: .34em; text-transform: uppercase; }
.s-band__title::after { content: ''; display: block; width: 46px; height: 1px; margin-top: 14px; background: currentColor; }
.s-band__lines { font: italic 400 clamp(15px, 1.4vw, 18px)/1.55 var(--serif); text-align: left; }

/* ---------------- responsive */
@media (max-width: 1080px) {
  .h-shop .grid.grid--collection { grid-template-columns: repeat(3, 1fr); }
  .grid.grid--collection { grid-template-columns: repeat(3, 1fr); }
  .custom { grid-template-columns: 1fr 1fr; }
  .custom__tiles { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 190px)); justify-content: end; }
  .s-worlds { grid-template-columns: 1fr; gap: 36px; }
  .s-world, .s-world:first-child { justify-self: stretch; max-width: none; padding: 0; border: 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .h-about { grid-template-columns: 1fr; }
  .ways__grid { grid-template-columns: 1fr; gap: 40px; }
  .way, .way:first-child, .way:last-child { padding: 0; border: 0; }
  .filter { padding: 0; border-left: 0; width: 100%; }
  .filter--sort { margin-left: 0; }
  .h-process__steps { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .band { grid-template-columns: 1fr; }
  .band__sun { display: none; }
  .s-hero__img { width: 100%; opacity: .55; }
  .s-hero::before { background: linear-gradient(90deg, rgba(232, 236, 238, .92) 30%, rgba(232, 236, 238, .5) 100%); }
}
@media (max-width: 640px) {
  .ways__head, .h-shop__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .way__main { grid-template-columns: 1fr; }
  .way__main > img { aspect-ratio: 4 / 3; }
  .way__tiles { grid-template-columns: repeat(2, 1fr); }
  .h-about__collage { height: 260px; grid-template-columns: 1.4fr 1fr; }
  .h-about__fabric { display: none; }
  .grid.grid--collection, .h-shop .grid.grid--collection { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }
  .card__row { flex-direction: column; align-items: flex-start; }
  .card__view { width: 100%; }
  .h-process__head .link-arrow { margin-left: 0; }
  .custom { grid-template-columns: 1fr; }
  .s-world { grid-template-columns: 1fr; }
  .s-band__inner { flex-direction: column; align-items: flex-start; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .story { grid-template-columns: 1fr 1fr; padding-right: var(--gutter); }
  .story__hero { grid-column: 1 / -1; min-height: 0; aspect-ratio: 16 / 7; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__sprig { display: none; }
}

@media (max-width: 860px) {
  :root { --nav-h: 60px; }
  .menu-btn { display: block; }
  .nav__links {
    position: fixed; left: 0; right: 0; top: var(--nav-h);
    flex-direction: column; gap: 0;
    background: var(--paper);
    padding: 8px var(--gutter) 28px;
    border-bottom: 1px solid var(--line);
    opacity: 0; transform: translateY(-8px); visibility: hidden;
    transition: opacity .4s var(--ease-soft), transform .4s var(--ease), visibility 0s .4s;
  }
  .nav.is-open .nav__links { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .nav__links a { padding: 18px 0; font-size: 12px; border-bottom: 1px solid var(--paper-3); background: none; }
  .nav__links a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
  .brand__mark { width: 36px; height: 36px; }
  .brand__word { font-size: 17px; letter-spacing: .28em; }

  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .brand__word { font-size: 14.5px; letter-spacing: .24em; }
  /* phones: logo · cart · HY/EN · account · menu must all fit on one line */
  .nav__inner { gap: 8px; }
  .brand { gap: 9px; }
  .brand__mark { width: 32px; height: 32px; }
  .nav__actions .brand__word, .nav .brand__word { font-size: 13px; letter-spacing: .2em; }
  .nav__actions { gap: 0; }
  .cart-btn, .account-btn, .menu-btn { width: 36px; }
  .menu-btn span { left: 8px; right: 8px; }
  .lang-switch { margin: 0 1px; }
  .lang-switch button { min-width: 23px; height: 36px; }

  .section-head { flex-direction: column; align-items: flex-start; }
  .grid { grid-template-columns: 1fr; gap: 44px; }
  .story { grid-template-columns: 1fr; padding: 56px var(--gutter); }
  .story__collage { justify-self: center; }
  .story__hero { aspect-ratio: 4 / 3; }
  .track__inner { padding-left: 0; }
  .track__form { flex-direction: column; }
  .track__sun { right: -50px; top: 24px; transform: none; width: 120px; opacity: .25; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__base { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------------ custom memories inquiry (js/inquiry.js) */
.btn--quiet { color: var(--blue); background: transparent; border-color: transparent; }
.btn--quiet:hover { background: var(--blue-soft); }
.inq-open { overflow: hidden; }
.inq {
  --k-ivory: #FBF9F4; --k-cream: #F3EEE3; --k-blue: #245780; --k-muted: #7896AD; --k-pale: #E7F0F5;
  --k-line: rgba(120, 150, 173, .32);
  width: min(640px, calc(100vw - 32px)); max-width: none; max-height: min(880px, calc(100dvh - 40px));
  margin: auto; padding: 0; border: 0; border-radius: 6px;
  background: var(--k-cream); color: var(--ink);
  box-shadow: 0 30px 80px -30px rgba(23, 45, 70, .45), 0 2px 10px rgba(23, 45, 70, .08);
  overflow: hidden;
}
.inq::backdrop { background: rgba(31, 50, 72, .4); }
.inq[open] { animation: inqIn .42s var(--ease-out) both; }
.inq[open]::backdrop { animation: inqFade .42s var(--ease-out) both; }
.inq.is-closing { animation: inqOut .22s var(--ease-soft) both; }
.inq.is-closing::backdrop { animation: inqFade .22s var(--ease-soft) reverse both; }
@keyframes inqIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes inqOut { to { opacity: 0; transform: translateY(8px) scale(.99); } }
@keyframes inqFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .inq[open], .inq[open]::backdrop, .inq.is-closing { animation: none; } }

.inq__panel {
  position: relative; max-height: inherit; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(30px, 4.4vw, 48px) clamp(22px, 4.6vw, 52px) clamp(28px, 4vw, 44px);
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(243, 220, 149, .28), transparent 60%),
    var(--k-cream);
}
.inq__close {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; color: var(--k-blue); transition: background-color .25s var(--ease-in-out);
}
.inq__close:hover { background: rgba(36, 87, 128, .08); }
.inq__head { text-align: center; margin-bottom: 26px; }
.inq__sun { margin: 0 auto; color: var(--k-blue); fill: currentColor; opacity: .85; }
.inq__eyebrow { margin-top: 10px; font: 500 10px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--k-muted); }
.inq__title { margin-top: 12px; font: 500 clamp(24px, 3vw, 32px)/1.15 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--k-blue); }
.inq__sub { margin: 12px auto 0; max-width: 34ch; font: italic 400 clamp(17px, 1.7vw, 20px)/1.4 var(--serif); color: #4a6a86; }
.inq__demo {
  display: inline-block; margin-top: 16px; padding: 8px 14px; max-width: 46ch;
  border: 1px dashed var(--k-line); border-radius: 8px; background: rgba(255, 255, 255, .5);
  font-size: 12px; line-height: 1.5; color: var(--k-blue);
}
.inq__demo strong { margin-right: 6px; font-weight: 500; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.inq__form { display: grid; gap: 18px; }
.inq__about { font-size: 13px; color: var(--k-muted); text-align: center; }
.inq__about strong { font-weight: 500; color: var(--k-blue); }
.inq__group { border: 0; padding: 0; margin: 0; min-width: 0; }
.inq__label { margin-bottom: 9px; padding: 0; font: 500 9.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--k-muted); }
.inq__types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.inq__type { position: relative; display: block; cursor: var(--cursor-link, pointer); }
.inq__type input, .inq__seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: var(--cursor-link, pointer); }
.inq__type span {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 8px 10px;
  border: 1px solid var(--k-line); border-radius: 5px; background: var(--k-ivory);
  font-size: 12.5px; line-height: 1.3; text-align: center; color: var(--k-blue);
  transition: border-color .25s var(--ease-in-out), background-color .25s var(--ease-in-out), box-shadow .25s var(--ease-in-out);
}
.inq__type:hover span { border-color: rgba(120, 150, 173, .6); }
.inq__type input:checked + span { border-color: var(--k-blue); background: var(--k-pale); box-shadow: inset 0 0 0 1px var(--k-blue); }
.inq__type input:focus-visible + span, .inq__seg input:focus-visible + span { outline: 2px solid var(--k-blue); outline-offset: 2px; }
.inq__group.is-invalid .inq__type span { border-color: rgba(160, 84, 64, .45); }
.inq__seg { display: inline-grid; grid-auto-flow: column; border: 1px solid var(--k-line); border-radius: 999px; padding: 3px; background: var(--k-ivory); }
.inq__seg label { position: relative; cursor: var(--cursor-link, pointer); }
.inq__seg span { display: block; padding: 9px 22px; border-radius: 999px; font: 500 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--k-muted); transition: background-color .25s var(--ease-in-out), color .25s var(--ease-in-out); }
.inq__seg input:checked + span { background: var(--k-blue); color: #fff; }
.inq .field textarea { min-height: 128px; line-height: 1.55; }
.inq .field.is-invalid textarea { border-color: rgba(160, 84, 64, .5); background: #fdf8f5; }
.inq .field input[type="file"] { height: auto; padding: 10px 12px; font-size: 13px; }
.inq__count { margin-top: 5px; font-size: 11px; color: var(--k-muted); text-align: right; }
.inq .field[hidden] { display: none; }
.inq .consent { margin: 0; }
.inq__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inq__status { padding: 10px 14px; border-radius: 5px; background: #fbf1ec; font-size: 13px; line-height: 1.5; color: #8a4636; }
.inq__send { height: 52px; gap: 10px; letter-spacing: .26em; }
.inq__send[disabled] { opacity: .7; cursor: progress; }
.inq__done { display: grid; justify-items: center; gap: 4px; padding: 30px 0 10px; text-align: center; outline: none; }
.inq__done[hidden] { display: none; }
.inq__done .inq__sub { max-width: 42ch; font-size: 18px; }
.inq__done .inq__sub strong { font-weight: 600; font-style: normal; }
.inq__plain { white-space: nowrap; font-style: normal; color: var(--k-blue); }
.inq__done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }

@media (max-width: 640px) {
  .inq { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .inq__panel { height: 100%; max-height: 100dvh; padding: 64px 18px calc(28px + env(safe-area-inset-bottom)); }
  .inq__types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inq__seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; text-align: center; }
  .inq[open] { animation-name: inqUp; }
  @keyframes inqUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
}

/* ------------------------------------------------------------------ shop refinement + previews */
.s-hero__text .eyebrow { margin-bottom: 18px; color: #4a6a86; letter-spacing: .32em; }
.s-intro { max-width: var(--max); margin: 0 auto clamp(18px, 2vw, 26px); }
.prelaunch {
  display: flex; align-items: flex-start; gap: 10px; max-width: 760px;
  font-size: 12.5px; line-height: 1.6; color: #56626e;
}
.prelaunch svg { flex: none; margin-top: 2px; color: var(--blue); fill: currentColor; opacity: .7; }
.prelaunch strong { font-weight: 500; color: var(--blue); }

.s-worlds { grid-template-columns: 1fr; gap: clamp(64px, 8vw, 112px); padding: clamp(64px, 8vw, 112px) var(--gutter); }
.s-world, .s-world:first-child, .s-world:last-child {
  width: 100%; max-width: var(--max); justify-self: center; padding: 0; border: 0;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 84px);
}
.s-world:last-child { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.s-world:last-child .s-world__text { order: 2; }
.s-world .display { font-size: clamp(26px, 3vw, 40px); }
.s-world__body { margin: 20px 0 16px; max-width: 46ch; font-size: clamp(17px, 1.4vw, 19px); }
.s-world__note { margin: 0 0 26px; max-width: 54ch; padding-left: 14px; border-left: 1px solid rgba(36, 87, 128, .3); font-size: 13px; line-height: 1.7; color: #56626e; }
.s-world__collage { grid-template-columns: 1.3fr 1fr; height: clamp(320px, 38vw, 540px); gap: 10px; }
.s-world__collage img { background: var(--paper); }

.s-band { min-height: clamp(260px, 26vw, 360px); }
.s-band::before { background: linear-gradient(90deg, rgba(26, 44, 64, .62), rgba(26, 44, 64, .2) 50%, rgba(26, 44, 64, .5)); }
.s-band__side { display: grid; gap: 20px; justify-items: start; }
.s-band__cta { color: #fff; border-color: rgba(255, 255, 255, .8); }
.s-band__cta:hover { background: rgba(255, 255, 255, .14); }

/* cards + sheet: honest labels */
.grid.grid--collection .card__price--status { font: italic 400 14px/1.2 var(--serif); letter-spacing: 0; color: var(--muted); }
.grid.grid--collection .card__media { background: #EEE8DC; }
.price-note { margin-left: 10px; padding: 3px 8px; border: 1px solid rgba(120, 150, 173, .4); border-radius: 999px; font: 500 8.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #7896AD; vertical-align: 2px; }
.sheet__preview-note { margin-top: 8px; font: italic 400 13px/1.35 var(--serif); color: var(--s-muted, #7896AD); text-align: center; }
.sheet__inquiry { display: grid; gap: 16px; margin-top: 22px; }
.sheet__custom { font-size: 13.5px; line-height: 1.65; color: #4a5a68; }

.collection__empty { display: grid; justify-items: center; gap: 10px; max-width: 520px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) 0; font: inherit; }
.collection__empty[hidden] { display: none; }
.collection__empty svg { color: var(--blue); fill: currentColor; opacity: .55; }
.collection__empty-title { font: italic 400 clamp(20px, 2vw, 24px)/1.3 var(--serif); color: var(--blue); }
.collection__empty-text { font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.collection__empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }

@media (max-width: 860px) {
  .s-world, .s-world:first-child, .s-world:last-child { grid-template-columns: 1fr; gap: 26px; }
  .s-world:last-child .s-world__text { order: 0; }
  .s-world__collage { height: clamp(300px, 70vw, 460px); }
}
@media (max-width: 640px) {
  .s-world__collage { grid-template-columns: 1fr 1fr; height: auto; grid-template-rows: auto auto; }
  .s-world__collage img { aspect-ratio: 1; height: auto; }
  .s-world__tall { grid-row: auto; grid-column: 1 / -1; }
  .price-note { display: inline-block; margin: 8px 0 0; }
}

/* sort + count bar under the filters (Shop page) */
.collection__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -6px 0 clamp(18px, 2vw, 24px); padding-top: 14px; border-top: 1px solid var(--c-line, rgba(120, 150, 173, .22)); }
.collection__count { font: italic 400 15px/1 var(--serif); color: var(--muted); white-space: nowrap; }
.collection__bar .filter--sort { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; border: 0; width: auto; }
.collection__bar .filter__label { margin: 0; min-width: 0; }
@media (max-width: 640px) { .collection__bar .filter--sort { flex-direction: row; align-items: center; } }

/* ------------------------------------------------------------------ About page (rebuild) */
.ab-hero { position: relative; margin-top: var(--nav-h); height: clamp(420px, 56vw, 640px); overflow: hidden; background: #dfe6ee; }
.ab-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.ab-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(240, 243, 244, .9) 0%, rgba(240, 243, 244, .65) 34%, rgba(240, 243, 244, 0) 62%); }
.ab-hero__text { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; justify-content: center; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.ab-hero__title { font-size: clamp(30px, 4.4vw, 60px); line-height: 1.1; letter-spacing: .2em; }
.ab-hero__sub { margin-top: 18px; max-width: 30ch; font: italic 400 clamp(18px, 1.8vw, 23px)/1.4 var(--serif); color: #2e4a68; }

.ab-intro { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 96px); max-width: var(--max); margin: 0 auto; padding: clamp(64px, 8vw, 112px) var(--gutter) clamp(40px, 5vw, 64px); box-sizing: content-box; }
.ab-intro .chapter__meaning { margin-top: 22px; }
.ab-lede { margin-bottom: 18px; font: italic 400 clamp(24px, 2.6vw, 34px)/1.25 var(--serif); color: var(--blue); }
.ab-intro__text p:not(.ab-lede) { margin-top: 14px; max-width: 60ch; font-size: 15px; line-height: 1.8; color: #44525f; }

.ab-philo { max-width: var(--max); margin: 0 auto; padding: clamp(40px, 5vw, 64px) var(--gutter) clamp(64px, 8vw, 104px); text-align: center; box-sizing: content-box; }
.ab-philo__quote { font: 400 clamp(30px, 4vw, 54px)/1.18 var(--serif); color: var(--blue); }
.ab-philo__quote em { font-style: italic; }
.ab-philo__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); max-width: 860px; margin: clamp(28px, 3vw, 40px) auto 0; text-align: left; }
.ab-philo__cols p { padding-top: 16px; border-top: 1px solid var(--line); font: italic 400 18px/1.55 var(--serif); color: #3c4a58; }
.ab-philo__cols strong { font: 500 10.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; font-style: normal; color: var(--blue); margin-right: 6px; }

.ab-tech { background: var(--paper-2); padding: clamp(64px, 8vw, 112px) var(--gutter); }
.ab-tech__head, .ab-tech__grid { max-width: var(--max); margin: 0 auto; }
.ab-tech__head { margin-bottom: clamp(28px, 4vw, 48px); text-align: center; }
.ab-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); }
.tech { display: flex; flex-direction: column; align-items: flex-start; }
.tech > img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.tech__kicker { margin-top: 22px; font: 500 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.tech__name { margin-top: 10px; font: 500 clamp(26px, 2.6vw, 34px)/1.1 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.tech__facts { display: grid; grid-template-columns: 9.5em 1fr; gap: 14px 18px; margin: 22px 0 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.tech__facts dt { font: 500 9.5px/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.tech__facts dd { margin: 0; font-size: 14px; line-height: 1.7; color: #44525f; }
.tech .link-arrow { margin-top: auto; }

.ab-process { max-width: var(--max); margin: 0 auto; padding: clamp(64px, 8vw, 112px) var(--gutter); box-sizing: content-box; }
.ab-process__head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 44px); }
.ab-process__note { margin-top: 14px; font: italic 400 17px/1.55 var(--serif); color: #4a6a86; }
.ab-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.6vw, 22px); padding: 0; list-style: none; }
.ab-steps img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; }
.ab-steps__n { margin-top: 14px; font: 500 10.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.ab-steps__n span { margin-right: 8px; color: var(--muted); }
.ab-steps__d { margin-top: 6px; font: italic 400 15px/1.45 var(--serif); color: #4a6a86; }

.ab-custom { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 96px); align-items: center; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(64px, 8vw, 112px); box-sizing: content-box; }
.ab-custom > img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.ab-custom__text p:not(.eyebrow) { margin-top: 18px; max-width: 54ch; font-size: 15px; line-height: 1.8; color: #44525f; }
.ab-custom__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ab-custom__cta { margin-top: 22px; gap: 10px; height: 48px; padding: 0 26px; }

.ab-close { position: relative; overflow: hidden; min-height: clamp(300px, 30vw, 420px); display: flex; align-items: center; color: #fff; text-align: center; }
.ab-close > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-close::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 70% 90% at 50% 50%, rgba(24, 42, 62, .58), rgba(24, 42, 62, .28)); }
.ab-close__inner { position: relative; z-index: 2; width: 100%; padding: 48px var(--gutter); display: grid; justify-items: center; gap: 26px; }
.ab-close__title { font: 400 clamp(24px, 3vw, 40px)/1.3 var(--serif); letter-spacing: .04em; }
.ab-close__title em { font-style: italic; }
.ab-close__cta { color: #fff; border-color: rgba(255, 255, 255, .85); }
.ab-close__cta:hover { background: rgba(255, 255, 255, .14); }

@media (max-width: 1080px) {
  .ab-steps { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
}
@media (max-width: 860px) {
  .ab-intro, .ab-custom, .ab-tech__grid { grid-template-columns: 1fr; }
  .ab-tech__grid { gap: 56px; }
  .ab-hero::before { background: linear-gradient(180deg, rgba(240, 243, 244, .85) 0%, rgba(240, 243, 244, .55) 55%, rgba(240, 243, 244, .1) 100%); }
  .ab-hero__text { justify-content: flex-start; padding-top: 48px; }
}
@media (max-width: 640px) {
  .ab-philo__cols { grid-template-columns: 1fr; }
  .ab-steps { grid-template-columns: 1fr 1fr; }
  .tech__facts { grid-template-columns: 1fr; gap: 4px; }
  .tech__facts dd { margin-bottom: 10px; }
}

.custom__tiles button, .way__tiles button { display: block; width: 100%; padding: 0; cursor: var(--cursor-link, pointer); text-align: inherit; }
.custom__tiles button img { transition: transform .8s var(--ease), filter .8s var(--ease); }
.custom__tiles button:hover img { filter: brightness(1.04); }
.h-about__body strong { font-weight: 500; color: var(--blue); }
@media (max-width: 860px) {
  .s-hero__img { opacity: .8; object-position: 88% 50%; -webkit-mask-image: none; mask-image: none; }
  .s-hero::before { background: linear-gradient(90deg, rgba(236, 239, 240, .9) 0%, rgba(236, 239, 240, .62) 62%, rgba(236, 239, 240, .25) 100%); }
}

/* ------------------------------------------------------------------ approved product mockups
   The tee mockups (front + back in one image) are final brand assets: always shown whole
   (contain, never cropped or stretched) on a backdrop matching their own ivory. */
:root { --mockup-bg: #EEEAE3; }
img.is-mockup { object-fit: contain !important; background: var(--mockup-bg); }
.grid.grid--collection .card__media { aspect-ratio: 4 / 5; background: var(--mockup-bg); }   /* = the mockups' own ratio */
.sheet__media[data-kind="mockup"] { background: var(--mockup-bg); }
.way__tiles img, .custom__tiles img { aspect-ratio: 4 / 5; }
.way__tiles--3 { grid-template-columns: repeat(3, 1fr); }
.custom__hero { aspect-ratio: 4 / 5; max-height: 460px; }
.tech > img, .ab-custom > img { aspect-ratio: 4 / 5; }
.ab-tech__grid .tech > img { max-height: 620px; }
@media (max-width: 640px) { .way__tiles--3 { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------------ shared footer (tools/sync_layout.py)
   The same simple footer on every page: logo · contact · quick links · botanical sprig.
   (No newsletter here — Home has it in the tracking band, Contact in its own band.) */
.footer__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
.footer__logo { display: block; width: clamp(150px, 13vw, 190px); }
.footer__logo img { width: 100%; height: auto; }
@media (max-width: 1080px) { .footer__grid { grid-template-columns: 1fr 1fr 1fr; } .footer__sprig { display: none; } }
@media (max-width: 640px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__logo { width: 150px; }
}

/* ------------------------------------------------------------------ light-blue bands
   Home: Track your order · sun · Newsletter (.band). Contact: sun · Newsletter (.band--news). */
.band .news { margin-top: 16px; max-width: 360px; }
.band__sun { width: clamp(70px, 8vw, 104px); height: auto; aspect-ratio: auto; opacity: .55; }
.band__text { margin-top: 10px; max-width: 44ch; font: italic 400 16px/1.45 var(--serif); color: #4a6a86; }
.band--news { grid-template-columns: auto minmax(0, 520px); justify-content: center; }
.band--news .band__sun { opacity: .7; }
@media (max-width: 860px) {
  .band--news { grid-template-columns: 1fr; justify-content: stretch; }
  .band .news { max-width: none; }
}

/* ------------------------------------------------------------------ Contact page */
.ct { max-width: calc(1120px + 2 * var(--gutter)); margin: var(--nav-h) auto 0; padding: clamp(44px, 6vw, 80px) var(--gutter) clamp(56px, 7vw, 96px); color: var(--ink); }
.ct-head { display: grid; justify-items: center; text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }
.ct-head__sun { width: 56px; height: auto; margin-bottom: 18px; }
.ct-sub { margin-top: 12px; max-width: 46ch; font: italic 400 clamp(18px, 1.8vw, 22px)/1.45 var(--serif); color: #4a6a86; }
.ct-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.ct-card { padding: 26px 24px; border: 1px solid rgba(120, 150, 173, .3); border-radius: 6px; background: #F8F6F0; }
.ct-card__kicker { font: 500 9.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.ct-card__title { margin-top: 12px; font: 500 22px/1.2 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.ct-card__text { margin-top: 10px; font-size: 13.5px; line-height: 1.65; color: #4a5a68; }
.ct-card__link { display: inline-block; margin-top: 16px; font-size: 14px; color: var(--blue); border-bottom: 1px solid rgba(31, 79, 134, .35); word-break: break-word; }
.ct-card__link--plain { border: 0; }
.ct-more { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
.ct-panel { display: grid; justify-items: start; gap: 14px; }
.ct-panel p { max-width: 50ch; font-size: 14px; line-height: 1.75; color: #4a5a68; }
@media (max-width: 860px) {
  .ct-grid, .ct-more { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ cursor
   The standard system cursors: the normal arrow everywhere, the usual hand on clickable
   things, the text cursor in fields. (The sun cursor images in images/cursor/ are no
   longer used.) */
a[href], [role="button"], summary, label[for], select,
input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"],
input[type="reset"], input[type="file"], input[type="color"], input[type="range"],
label:has(> input[type="radio"]), label:has(> input[type="checkbox"]) { cursor: pointer; }

@media (max-width: 380px) {
  .nav .brand__word { font-size: 12px; letter-spacing: .16em; }
}

/* ------------------------------------------------------------------ Armenian (html[lang="hy"])
   Armenian capitals are wider and need far less tracking than the Latin labels; long words
   must be able to wrap. The brand name KAPOOYT AREV keeps its own spacing. */
html[lang="hy"] body *:not(.brand__word):not(.hero__brand):not(.lang-switch):not(.lang-switch *) { letter-spacing: .03em !important; }
html[lang="hy"] :is(.display, .cap__name, .card__name, .sheet__title) { line-height: 1.25; }
html[lang="hy"] :is(.btn, .cap__primary, .cap__explore, .link-arrow) { white-space: normal; text-align: center; line-height: 1.3; }
html[lang="hy"] .btn { height: auto; min-height: 42px; padding-top: 8px; padding-bottom: 8px; }
html[lang="hy"] .cap__primary { height: auto; min-height: 34px; padding-top: 7px; padding-bottom: 7px; }
html[lang="hy"] body { overflow-wrap: break-word; }
html[lang="hy"] .sheet__print-note { max-width: none; }
/* About: the name gloss (Կապույտ → blue · Արև → sun) is for English readers; in Armenian the words speak for themselves */
html[lang="hy"] .chapter__meaning dd { display: none; }

/* while an Armenian visitor's page loads, its English source text stays hidden for an instant
   (js/i18n.js removes this at once; the animation shows the page anyway if scripts fail) */
html.i18n-wait body { opacity: 0; animation: i18n-show 0s linear 1.2s forwards; }
@keyframes i18n-show { to { opacity: 1; } }

/* ==========================================================================
   Phones and touch screens
   A finger needs a target of about 44 × 44 px (Apple's guideline; Google asks for 48),
   and an iPhone zooms the whole page into any form field whose text is under 16 px.
   These rules apply only to touch screens and narrow windows — the desktop design is
   unchanged. Where a control has to stay small to keep the design (colour swatches,
   underlined text links), its touch area is enlarged invisibly around it instead.
   ========================================================================== */
@media (pointer: coarse), (max-width: 640px) {
  /* no zoom-in when a field is tapped */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }

  /* header: same icons, taller touch areas (the row has no room to widen them at 375 px) */
  .cart-btn, .account-btn, .menu-btn { width: 40px; height: 44px; }
  .lang-switch button { min-width: 30px; height: 44px; }
  .brand { min-height: 44px; }

  /* buttons */
  .btn, html[lang] .btn { height: auto; min-height: 44px; }
  .card__view { height: auto; min-height: 44px; }
  .sheet__close { width: 44px; height: 44px; }
  .heart { width: 44px; height: 44px; }
  .card__figure .heart { top: 8px; right: 8px; }

  /* filters */
  .chip { height: 40px; padding: 0 16px; }
  .filter--sort select { height: 44px; }

  /* underlined text links keep their look; the area around them answers the tap */
  .link-arrow, .sheet__reviews-link, .vrows__add, .ct-card__link { position: relative; }
  .link-arrow::after, .sheet__reviews-link::after, .vrows__add::after, .ct-card__link::after {
    content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%);
  }

  /* product sheet: colours, sizes, quantity */
  .swatches { gap: 14px; }
  .swatch span { width: 34px; height: 34px; }
  .swatch::after { content: ''; position: absolute; inset: -5px; }
  .size-select--sheet { height: 44px; }
  .size-select--sheet, .size-select--sheet[data-value=""] span { font-size: 12px; }
  .vrows__head, .vrow { grid-template-columns: minmax(96px, 1fr) max-content 44px; }
  .sheet-qty--row button { width: 44px; height: 44px; }
  .sheet-qty--row input { width: 40px; height: 44px; }
  .vrow__remove { width: 44px; height: 44px; }
  .vrow + .vrow { margin-top: 8px; }

  /* cart drawer */
  .line__trash { width: 40px; height: 40px; }
  .line__row .size-select { height: 40px; font-size: 12px; }
  .swatches--sm, .cart .swatches--sm { gap: 12px; }
  .swatches--sm .swatch span, .cart .swatches--sm .swatch span { width: 30px; height: 30px; }
  .line__another { position: relative; }
  .line__another::after { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
  .qty button { width: 40px; height: 40px; }
  .qty span { min-width: 28px; font-size: 13px; }
  .size-pills--sm .size-pill span, .cart .size-pills--sm .size-pill span { min-width: 40px; height: 40px; font-size: 11px; }

  /* order tracking (Home): the field kept collapsing to 25 px when the form stacks */
  .track__form input { flex: 1 0 auto; min-height: 46px; }
  .track__form .btn { min-height: 46px; }

  /* sign-in, checkout, account, confirmation */
  .field__show { min-height: 36px; padding: 0 10px; }
  .field__show::after { content: ''; position: absolute; inset: -4px -2px; }
  .co-back, .co-link { position: relative; }
  .co-back::after, .co-link::after { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
  .acct-nav a, .acct-nav__logout { padding-top: 13px; padding-bottom: 13px; }

  /* footer and newsletter */
  .footer__col a { padding: 11px 0; line-height: 1.5; }
  .news input { height: 48px; }
  .news button { width: 52px; }
}

/* the language switch inside the menu: only used on the narrowest phones */
.lang-switch--menu { display: none; }
/* phones up to 390 px: the header row (logo · cart · HY/EN · account · menu) only fits with
   slightly narrower icons — still 44 px tall to tap */
@media (max-width: 390px) {
  .cart-btn, .account-btn, .menu-btn { width: 36px; }
  .lang-switch button { min-width: 26px; }
}
@media (max-width: 365px) {
  /* the narrowest phones (320–360 px): even then the row doesn't fit, so HY / EN moves into the menu */
  .nav__actions .lang-switch { display: none; }
  .nav__links .lang-switch--menu { display: flex; gap: 10px; margin: 20px 0 0; font: 500 13px/1 var(--sans); letter-spacing: .06em; }
  .nav__links .lang-switch--menu button {
    min-width: 0; height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px;
    background: none; color: var(--muted);
  }
  .nav__links .lang-switch--menu button[aria-pressed="true"] { border-color: var(--blue); color: var(--blue); }
}

/* the smallest labels, one step larger on a phone (all stay in the same style) */
@media (max-width: 640px) {
  .eyebrow { font-size: 11.5px; }
  .btn, .card__view { font-size: 11.5px; }
  .lang-switch { font-size: 12px; }
  .chip { font-size: 12.5px; }
  .filter__label, .field > label, .ct-card__kicker, .sheet__reviews-link, .vrows__add, .vrows__head span,
  .footer__col h3, .ways__tag, .h-process__n { font-size: 11px; }
  /* the film hint: larger, and allowed to wrap so it never runs off a narrow screen */
  .hero__hint { font-size: 11px; letter-spacing: .22em; white-space: normal; text-align: center; justify-content: center; width: max-content; max-width: calc(100vw - 32px); }
  .way__tiles span, .custom__tiles span, .tech__kicker, .tech__facts dt, .cf-status dt, .co-back, .co-link, .field__show, .co-demo strong { font-size: 11px; }
  .acct-nav a, .acct-nav__logout, .ab-steps__n { font-size: 11.5px; }
  .ab-philo__cols strong { font-size: 11.5px; }
  .footer__base p, .footer__crumbs { font-size: 12px; }
}