/* ENDRRA — preview stylesheet
   Calm. Soft. Feminine-modern. Premium. Intentional. Minimal.
   No boxes. Soft shadows only — depth, never weight. No grids. No harsh contrast.
   ----------------------------------------------------------------------- */

:root {
  --bg:           #F7F4EF;
  --text:         #1C1C1C;
  --text-soft:    #615C56;
  --accent:       #D8C7C3;
  --divider:      rgba(28, 28, 28, 0.08);

  --max-w:        1240px;
  --max-w-narrow: 720px;
  --gutter:       clamp(1.25rem, 4vw, 2.75rem);
  --section-y:    clamp(4.5rem, 10vw, 9rem);

  --shadow-sm: 0 1px 2px rgba(28, 28, 28, 0.03), 0 2px 8px rgba(28, 28, 28, 0.04);
  --shadow-md: 0 2px 6px rgba(28, 28, 28, 0.04), 0 12px 28px rgba(28, 28, 28, 0.05);

  --font-display: 'Cormorant Garamond', 'Canela', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture { max-width: 100%; height: auto; display: block; }

button {
  font-family: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.012em;
  line-height: 1.12;
  color: var(--text);
}

h1 { font-size: clamp(2.85rem, 7.4vw, 5.75rem); }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 400; }

p {
  color: var(--text-soft);
  font-size: clamp(1rem, 1.05vw, 1.0625rem);
  line-height: 1.72;
}

.container        { max-width: var(--max-w);        margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--max-w-narrow); margin-inline: auto; padding-inline: var(--gutter); }

/* HEADER ─────────────────────────────────────────────────────────────── */
.site-header {
  padding: 1.5rem var(--gutter);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 50;
  transition: box-shadow 0.4s ease;
}
.site-header.is-scrolled { box-shadow: 0 4px 20px rgba(28, 28, 28, 0.04); }
.site-header { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; }
.site-header.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

/* Why-silk benefit icons.
   Fixed-height container with object-fit: contain and object-position: bottom
   ensures all four circles align by their bottom edge, regardless of any
   transparent padding at the top of each PNG. */
.benefit__icon {
  display: block;
  width: clamp(96px, 8.5vw, 128px);
  height: clamp(96px, 8.5vw, 128px);
  object-fit: contain;
  object-position: bottom;
  margin: 0 auto 1.1rem;
}

.header-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: inline-flex;
  align-items: center;
  color: var(--text);
}
.logo-mark {
  height: 3.6rem;
  width: auto;
  display: block;
  /* PNG is transparent, but multiply blend keeps the calligraphy looking inked, not pasted */
  mix-blend-mode: multiply;
}
@media (max-width: 480px) {
  .logo-mark { height: 2.1rem; }
  .site-header { padding: 1rem var(--gutter); }
  .header-inner { gap: 0.75rem; }
}
.nav {
  display: flex;
  gap: clamp(1.1rem, 2.5vw, 2.25rem);
}
.nav a {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  transition: color 0.4s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.nav a:hover { color: var(--text); }
.nav-cart    { color: var(--text); }
@media (max-width: 480px) {
  .logo      { font-size: 1.15rem; letter-spacing: 0.28em; }
  .nav       { gap: 1rem; }
  .nav a     { font-size: 0.7rem; letter-spacing: 0.14em; min-height: 44px; display: inline-flex; align-items: center; }
}

/* HERO ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: clamp(34rem, 86vh, 56rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-image-wrap { position: absolute; inset: 0; z-index: 0; }
.hero-image      { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* On desktop the source is portrait (3:4); cover crops most of it.
   Per Anita: show the full photo even if it has to shrink. We let the
   image breathe at its native aspect, anchored right, with the soft cream
   page bg filling the negative space on the left where the text sits. */
@media (min-width: 1080px) {
  .hero { min-height: clamp(40rem, 88vh, 60rem); }
  .hero-image-wrap {
    left: auto;
    right: 0;
    width: clamp(54%, 56vw, 62%);
    background: var(--bg);
    /* Feather the left edge into the page bg so the contain-fit image and
       cream canvas don't show a hard vertical seam. */
    -webkit-mask-image: linear-gradient(to left, #000 82%, transparent 100%);
            mask-image: linear-gradient(to left, #000 82%, transparent 100%);
  }
  .hero-image {
    object-fit: contain;
    object-position: right bottom;
  }
  .hero-gradient {
    inset: 0 auto 0 -1px;
    width: 22%;
    background: linear-gradient(
      90deg,
      var(--bg) 0%,
      rgba(247, 244, 239, 0.85) 65%,
      transparent 100%
    );
  }
}
.hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--bg) 0%,
    rgba(247, 244, 239, 0.92) 18%,
    rgba(247, 244, 239, 0.55) 38%,
    rgba(247, 244, 239, 0.18) 58%,
    transparent 75%
  );
}
@media (max-width: 720px) {
  /* On narrow screens the left-fade leaves the headline sitting on the
     subject. Switch to a bottom-up fade so text reads against soft canvas. */
  .hero-gradient {
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(247, 244, 239, 0.18) 35%,
      rgba(247, 244, 239, 0.7) 60%,
      rgba(247, 244, 239, 0.95) 80%,
      var(--bg) 100%
    );
  }
}
.hero-content {
  position: relative;
  z-index: 1;
  padding: var(--gutter) var(--gutter) clamp(3rem, 6vw, 5.5rem);
  max-width: 38rem;
  margin-left: clamp(0px, 6vw, 4rem);
}
.hero-content h1 { margin-bottom: 1.35rem; }
.hero-sub {
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  margin-bottom: 2.25rem;
  max-width: 24rem;
  color: var(--text-soft);
}

/* PRE-ORDER EYEBROW — small caps line that sits above hero H1 and PDP title.
   Uses accent for warmth, not text-soft, so it reads as a signal. */
.preorder-eyebrow {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 1.1rem;
}
.preorder-eyebrow::before {
  content: '';
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 0.65rem;
  vertical-align: 0.05em;
}

/* CTA ────────────────────────────────────────────────────────────────── */
.cta {
  display: inline-block;
  padding: 1.05rem 2.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 400;
  transition: background-color 0.45s ease, opacity 0.45s ease;
}
.cta-accent {
  background: var(--accent);
  color: var(--text);
  transition: background-color 0.45s ease, opacity 0.45s ease, box-shadow 0.45s ease, transform 0.25s ease;
}
.cta-accent:hover {
  background: #cdb9b4;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

/* SECTION 2 — SOFT TEXT ───────────────────────────────────────────── */
.soft-text {
  padding-block: var(--section-y);
  text-align: center;
}
#main > .soft-text:nth-of-type(2) {
  padding-bottom: calc(var(--section-y) * 0.85);
}
.lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 2.5vw, 2.15rem);
  line-height: 1.45;
  color: var(--text);
  letter-spacing: -0.005em;
}

/* SECTION 3 — IMAGE BREAK ─────────────────────────────────────────
   Per Anita: show the entire photo, no cropping. We let the image's
   own aspect dictate the section height. On desktop she also asked
   for the image to sit at narrow-container width (matching the soft
   text block above it), not edge-to-edge. */
.image-break {
  width: 100%;
}
.image-break > * {
  width: 100%;
  height: auto;
  display: block;
}
@media (min-width: 720px) {
  .image-break {
    max-width: var(--max-w-narrow);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
}

/* SECTION 4 — WHY MULBERRY SILK ───────────────────────────────────── */
.why-silk { padding-block: var(--section-y); }
.eyebrow {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 1.6rem;
}
.why-silk__headline {
  margin-bottom: 1.6rem;
  max-width: 22rem;
}
.intro {
  max-width: 34rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.25rem);
  font-size: clamp(1rem, 1.15vw, 1.13rem);
  color: var(--text-soft);
}
.benefits {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  border-top: 1px solid var(--divider);
  padding-top: clamp(2.25rem, 4vw, 3.25rem);
}
.benefit { 
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.benefit h3 { margin-bottom: 0.55rem; font-weight: 400; }
.benefit p  { max-width: 28rem; margin-inline: auto; }

@media (min-width: 720px) and (max-width: 1079.98px) {
  .benefits { grid-template-columns: repeat(2, 1fr); column-gap: 4rem; row-gap: 3rem; align-items: start; }
  /* 2-col band — softer to absorb the longest copy than to leave rows uneven. */
  .benefit p { min-height: 5.2em; }
}
@media (min-width: 1080px) { .benefits { grid-template-columns: repeat(4, 1fr); column-gap: 3rem; align-items: start; } }

/* SECTION 6 — PRODUCT FOCUS ──────────────────────────────────────── */
.product-focus {
  padding-block: var(--section-y);
  text-align: center;
}
.focus-image {
  width: 100%;
  max-width: 30rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  box-shadow: var(--shadow-md);
}
.product-focus h2 { margin-bottom: 0.5rem; }
.product-focus .sub { max-width: 30rem; margin-inline: auto; }
.product-focus .sub:first-of-type { padding-top: 0.25rem; }
/* Closing tagline — quietly heavier so it lands as the closing line, per Anita */
.product-focus .sub:last-of-type {
  color: var(--text);
  font-weight: 500;
  margin-top: 1.1rem;
}
/* Desktop: image on the left, text on the right (per Anita's note #52). */
@media (min-width: 900px) {
  .product-focus .container--narrow {
    max-width: var(--max-w);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
    align-content: start;
    text-align: left;
  }
  .product-focus .focus-image {
    grid-column: 1;
    grid-row: 1 / -1;
    margin: 0;
    max-width: 100%;
    aspect-ratio: 4 / 5;
    align-self: center;
  }
  .product-focus h2,
  .product-focus .sub {
    grid-column: 2;
    margin-inline: 0;
    align-self: start;
  }
  .product-focus h2 { grid-row: 1; margin-bottom: 0.85rem; align-self: end; padding-top: clamp(2rem, 6vh, 4rem); }
  .product-focus .sub:nth-of-type(1) { grid-row: 2; }
  .product-focus .sub:nth-of-type(2) { grid-row: 3; }
  .product-focus .sub { max-width: 32rem; margin-bottom: 0.85rem; }
  .product-focus .sub:last-of-type { margin-bottom: 0; }
}

/* SECTION 7 — CORE PRODUCTS ──────────────────────────────────────── */
.core-products { padding-block: var(--section-y); }
.core-products .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 768px) {
  .core-products .container { grid-template-columns: 1fr 1fr; column-gap: clamp(3rem, 6vw, 5rem); }
}
/* Product image card — no boxed white background. Cutouts ride directly
   on the page bg so the products look like they're floating on the page. */
.product-image-link {
  display: block;
  margin-bottom: 1.85rem;
  overflow: hidden;
  background: transparent;
}
.product-image-link img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  padding: clamp(1rem, 3.5vw, 2.5rem);
  transition: transform 0.8s ease;
}
/* The pillowcase shot is landscape (1.6:1); the mask is square. With the
   same 1:1 container both contain-fit, the pillowcase ends up visually
   smaller. Drop the inner padding for the pillowcase tile so the pillow
   fills the card width and reads as the same visual weight as the mask. */
.product[data-product="pillowcase"] .product-image-link img {
  padding: 0.25rem;
}
/* Mask image — blend the white JPEG background with the page bg using
   multiply so the product floats on the cream surface. */
.product[data-product="mask"] .product-image-link img {
  mix-blend-mode: multiply;
}
.product-image-link:hover img { transform: scale(1.025); }
.product h3 { margin-bottom: 0.35rem; font-weight: 400; }
.product p  { margin-bottom: 1.55rem; }
.product-price {
  margin-bottom: 0.85rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--text-soft);
}

.swatches    { display: flex; gap: 0.65rem; margin-bottom: 1.6rem; }
.swatch {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--c);
  border: 1px solid rgba(28, 28, 28, 0.12);
  position: relative;
  transition: transform 0.25s ease;
}
.swatch::before {
  content: '';
  position: absolute;
  inset: -13px;
}
.swatch:hover           { transform: scale(1.18); }
.swatch.is-selected::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(28, 28, 28, 0.3);
  border-radius: 50%;
}
.link-arrow {
  position: relative;
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--text);
  padding-bottom: 3px;
  transition: opacity 0.4s ease;
}
.link-arrow::before {
  content: '';
  position: absolute;
  inset: -12px -8px;
}
.link-arrow:hover { opacity: 0.55; }

/* TRUST STRIP ─────────────────────────────────────────────────────── */
.trust-strip {
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  padding-block: 1.4rem;
}
.trust-strip__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.55rem 1.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-align: center;
}
.trust-strip__sep {
  color: var(--text-soft);
  opacity: 0.6;
}
@media (max-width: 480px) {
  .trust-strip__inner { gap: 0.4rem 0.85rem; font-size: 0.7rem; letter-spacing: 0.12em; }
  /* On narrow viewports the three items wrap to two lines and the centred
     dot orphans. Hide the last phrase + its leading separator instead, so
     shipping and returns stay. */
  .trust-strip__inner > span:nth-child(4),
  .trust-strip__inner > span:nth-child(5) { display: none; }
}

/* SECTION 8 — PRE-ORDER ──────────────────────────────────────────── */
.preorder {
  padding-block: var(--section-y);
  text-align: center;
}
.preorder h2 { margin-bottom: 1.1rem; }
.preorder p  { margin-bottom: 2.5rem; }

/* SECTION 9 — CLOSING ─────────────────────────────────────────────── */
.closing {
  padding-block: clamp(5.5rem, 12vw, 9.5rem);
  text-align: center;
}
.close-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  color: var(--text);
}

/* SECTION 10 — FOOTER ─────────────────────────────────────────────── */
.site-footer {
  padding-block: 3rem 4.5rem;
  border-top: 1px solid var(--divider);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem;
  font-size: 0.85rem;
  color: var(--text-soft);
}
.site-footer__inner a {
  position: relative;
  color: var(--text-soft);
  letter-spacing: 0.05em;
  transition: color 0.35s ease;
}
.site-footer__inner a::before {
  content: '';
  position: absolute;
  inset: -12px -6px;
}
.site-footer__inner a:hover { color: var(--text); }
.copyright {
  margin-left: auto;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* PLACEHOLDERS — soft brand-tone blocks until real photos arrive ─── */
.placeholder {
  background-color: #ECE5DD;
  background-image:
    linear-gradient(135deg, rgba(216, 199, 195, 0.55) 0%, rgba(247, 244, 239, 0) 60%),
    linear-gradient(45deg, rgba(28, 28, 28, 0.04) 0%, rgba(28, 28, 28, 0) 50%);
  position: relative;
}
.placeholder::after {
  content: 'photo';
  position: absolute;
  bottom: 1.25rem;
  right: 1.5rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(28, 28, 28, 0.28);
}
.placeholder--hero      { background-color: #E8DFD3; }
.placeholder--break-1   { background-color: #D8C7C3; }
.placeholder--break-2   { background-color: #E0D7CC; }
.placeholder--focus     { background-color: #ECE3DA; }
.placeholder--product-1 { background-color: #EDE5DC; }
.placeholder--product-2 { background-color: #D8DEE6; }

/* [data-fade] rules live in motion.css — see that file for the canonical
   declarations + reduced-motion guard. They used to be duplicated here
   and motion.css's copy won by cascade, so an edit to this file silently
   did nothing. Single source of truth: motion.css. */

/* PRODUCT IMAGE TRANSITION ───────────────────────────────────────── */
.product-image,
.pdp__image {
  transition: opacity 0.28s ease;
  object-position: center;
  /* Match the page bg so any blank frame during a src swap, or the gap
     before the first decode on initial load, reads as cream not white. */
  background-color: var(--bg);
}

/* BREADCRUMB ─────────────────────────────────────────────────────── */
.breadcrumb {
  padding: 1.5rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-soft);
}
.breadcrumb a {
  position: relative;
  color: var(--text-soft);
}
.breadcrumb a::before {
  content: '';
  position: absolute;
  inset: -15px -6px;
}
.breadcrumb a:hover { color: var(--text); }
.breadcrumb span    { padding-inline: 0.5rem; }
.breadcrumb .current { color: var(--text); }

/* PDP ────────────────────────────────────────────────────────────── */
.pdp { padding-block: clamp(2rem, 4vw, 4rem) clamp(4rem, 8vw, 7rem); }
.pdp__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .pdp__container { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.pdp__gallery       { display: flex; flex-direction: column; gap: 1.25rem; }
.pdp__image-wrap    { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; }
.pdp__image         { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.pdp__thumbs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  padding: 0;
  margin: 0;
}
.thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.thumb img       { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb:hover     { opacity: 1; }
.thumb.is-selected {
  opacity: 1;
  outline: 1px solid rgba(28, 28, 28, 0.45);
  outline-offset: -1px;
}

.pdp__info {
  position: sticky;
  top: 5.5rem;
  align-self: start;
  padding-top: clamp(0.5rem, 1vw, 1rem);
}
@media (max-width: 899px) { .pdp__info { position: static; } }

.pdp__title {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.01em;
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  line-height: 1.15;
  margin-bottom: 0.6rem;
}
.pdp__price {
  font-size: 1.05rem;
  color: var(--text);
  margin-bottom: 1.5rem;
}
.pdp__desc {
  max-width: 30rem;
  margin-bottom: 2.25rem;
}
.pdp__option { margin-bottom: 1.5rem; }
.pdp__option-label {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 0.7rem;
}
.pdp__option-label .swatch-label,
.pdp__option-label .size-label {
  color: var(--text);
  letter-spacing: 0.05em;
  text-transform: none;
}
.pdp__option .swatches { margin-bottom: 0; }

.sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* On narrow viewports, give each size button an equal third so the
   coming-soon suffix doesn't push King to its own orphan row. */
@media (max-width: 560px) {
  .sizes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
}
.size {
  position: relative;
  background: transparent;
  border: 1px solid var(--divider);
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}
@media (max-width: 560px) {
  .size {
    padding: 0.7rem 0.4rem;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
  }
  /* Keep the "— soon" suffix visible on mobile too. The previous rule
     hid it, leaving STANDARD/QUEEN/KING looking equally available until
     a tap revealed the inline note. Three chars buys enormous clarity. */
  .size .size__suffix {
    display: inline;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    margin-left: 0.18rem;
    opacity: 0.7;
  }
}
.size::before {
  content: '';
  position: absolute;
  inset: -4px 0;
}
.size:hover {
  color: var(--text);
  border-color: var(--text-soft);
}
.size.is-selected {
  border-color: var(--text);
  color: var(--text);
}

.pdp__add {
  width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 0.85rem;
  padding-block: 1.15rem;
  font-size: 0.82rem;
}
.pdp__pre-order {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 2rem;
}

.pdp__accordion {
  border-top: 1px solid var(--divider);
  margin-top: 1rem;
}
.pdp__accordion details {
  border-bottom: 1px solid var(--divider);
}
.pdp__accordion summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 0;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  position: relative;
}
.pdp__accordion summary::-webkit-details-marker { display: none; }
.pdp__accordion summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  color: var(--text-soft);
  transition: transform 0.3s ease;
}
.pdp__accordion details[open] summary::after { content: '\2212'; }
.pdp__accordion p {
  padding: 0 0 1.4rem;
  max-width: 30rem;
}

/* CART DRAWER ─────────────────────────────────────────────────────── */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 0.5s;
}
.cart-drawer.is-open      { pointer-events: auto; visibility: visible; transition-delay: 0s; }
body.cart-open            { overflow: hidden; }

.cart-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(28, 28, 28, 0.18);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.cart-drawer.is-open .cart-drawer__scrim { opacity: 1; }

.cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  height: 100dvh;
  width: min(480px, 100vw);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.25, 1);
  border-left: 1px solid var(--divider);
  box-shadow: var(--shadow-md);
}
.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.75rem 1.25rem;
  border-bottom: 1px solid var(--divider);
}
.cart-drawer__heading {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 300;
  letter-spacing: 0.02em;
}
.cart-drawer__close {
  background: none;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.cart-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
}
/* Empty state — let the single <li> fill the available list height so
   the message sits vertically centred in the panel, not hugging the top. */
.cart-drawer[data-cart-state="empty"] .cart-drawer__list {
  display: flex;
  align-items: stretch;
}
.cart-drawer__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.75rem;
  text-align: center;
  /* Soft micro-animation on mount — gentle opacity + tiny lift. No bounce. */
  opacity: 0;
  transform: translateY(6px);
  animation: cart-empty-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
}
.cart-drawer__empty-text {
  display: block;
  font-style: italic;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--text-soft);
}
@keyframes cart-empty-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cart-drawer__empty { animation: none; opacity: 1; transform: none; }
}
.cart-drawer__empty-link {
  display: inline-block;
  margin-top: 1.4rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--text);
  padding-bottom: 3px;
  cursor: pointer;
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  transition: opacity 0.4s ease;
}
.cart-drawer__empty-link:hover { opacity: 0.55; }

/* Empty state — hide the footer entirely (subtotal, notice, checkout, keep) */
.cart-drawer[data-cart-state="empty"] .cart-drawer__foot { display: none; }
.cart-drawer__item {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1rem;
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid var(--divider);
}
.cart-drawer__thumb {
  display: block;
  width: 4.5rem;
  height: 5rem;
  overflow: hidden;
}
.cart-drawer__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cart-drawer__title {
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 0.15rem;
}
.cart-drawer__meta {
  font-size: 0.78rem;
  color: var(--text-soft);
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}
.cart-drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.cart-drawer__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--divider);
}
.cart-drawer__qty button {
  background: transparent;
  border: 0;
  width: 1.85rem;
  height: 1.85rem;
  font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-body);
}
.cart-drawer__qty span {
  min-width: 1.6rem;
  text-align: center;
  font-size: 0.85rem;
}
.cart-drawer__price {
  font-size: 0.92rem;
  color: var(--text);
}
.cart-drawer__remove {
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cart-drawer__remove:hover { color: var(--text); }

.cart-drawer__foot {
  padding: 1.25rem 1.75rem 1.5rem;
  border-top: 1px solid var(--divider);
  line-height: 1.5;
}
.cart-drawer__freeship {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  margin-bottom: 0.7rem;
  font-style: italic;
  font-family: var(--font-display);
}
.cart-drawer__freeship[hidden] { display: none; }
.cart-drawer__subtotal-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
}
.cart-drawer__subtotal-line span:first-child {
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.cart-drawer__notice:empty { min-height: 0; margin-bottom: 1rem; }
.cart-drawer__notice {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 1rem;
  min-height: 1em;
  line-height: 1.4;
}
.cart-drawer__checkout {
  display: block;
  width: 100%;
  text-align: center;
  border: 0;
  cursor: pointer;
  margin-bottom: 0.6rem;
}
.cart-drawer__keep {
  background: none;
  border: 0;
  width: 100%;
  padding: 0.5rem 0;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  cursor: pointer;
}
.cart-drawer__keep:hover { color: var(--text); }

/* Mobile padding — tighter than desktop */
@media (max-width: 480px) {
  .cart-drawer__head,
  .cart-drawer__foot { padding-inline: 1.25rem; }
  .cart-drawer__item { padding-inline: 1.25rem; }
  .cart-drawer__empty { padding-inline: 1.25rem; }
}

/* CART DRAWER — STAGES (bag / checkout-email / checkout-confirmed) ── */
/* The drawer holds three stages, only one visible at a time. Default
   stage is 'bag'. The Checkout button advances to 'checkout-email';
   a successful submit advances to 'checkout-confirmed'. */
.cart-drawer__stage {
  flex: 1 1 auto;
  display: none;
  flex-direction: column;
  min-height: 0;
}
.cart-drawer[data-cart-stage="bag"]               .cart-drawer__stage--bag       { display: flex; }
.cart-drawer[data-cart-stage="checkout-email"]    .cart-drawer__stage--email     { display: flex; }
.cart-drawer[data-cart-stage="checkout-confirmed"] .cart-drawer__stage--confirmed { display: flex; }
.cart-drawer:not([data-cart-stage]) .cart-drawer__stage--bag { display: flex; }

/* Trust block — sits above the subtotal in the bag stage. Quiet,
   small caps, soft colour. Reads like reassurance, not noise. */
.cart-drawer__trust {
  border-top: 1px solid var(--divider);
  padding-top: 1rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cart-drawer__trust-line {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  line-height: 1.5;
}
.cart-drawer__pay {
  margin-top: 0.6rem;
  display: none; /* no payment is taken yet — change to flex when checkout is live */
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.cart-drawer__pay svg {
  display: block;
  height: 18px;
  width: auto;
  opacity: 0.55;
  color: var(--text-soft);
}
.cart-drawer[data-cart-state="empty"] .cart-drawer__trust { display: none; }

/* Email-capture stage — replaces the alert(). Shares the soft footer
   look but lives in its own pane so the bag doesn't get pushed off
   screen on shorter viewports. */
.cart-drawer__email {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.75rem 1.5rem;
  gap: 0.85rem;
  flex: 1 1 auto;
  overflow-y: auto;
}
.cart-drawer__email h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin: 0;
  color: var(--text);
}
.cart-drawer__email p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 30rem;
}
.cart-drawer__email form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.5rem;
}
.cart-drawer__email input[type="email"] {
  width: 100%;
  padding: 0.95rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  background: #FFFFFF;
  border: 1px solid var(--divider);
  transition: border-color 0.3s ease;
}
.cart-drawer__email input[type="email"]::placeholder {
  color: var(--text-soft);
  opacity: 0.6;
}
.cart-drawer__email input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
}
.cart-drawer__email-error {
  font-size: 0.78rem;
  color: var(--text);
  margin: 0;
  min-height: 1em;
}
.cart-drawer__email-error:empty { min-height: 0; }
.cart-drawer__email .cta {
  width: 100%;
  margin-top: 0.2rem;
  border: 0;
  cursor: pointer;
}
.cart-drawer__email .cta:disabled {
  opacity: 0.55;
  cursor: progress;
}
.cart-drawer__back {
  background: none;
  border: 0;
  margin-top: auto;
  padding: 0.6rem 0;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  cursor: pointer;
  align-self: flex-start;
}
.cart-drawer__back:hover { color: var(--text); }

@media (max-width: 480px) {
  .cart-drawer__email { padding: 1.5rem 1.25rem 1.25rem; }
}

/* WELCOME POP-UP — code reveal state ──────────────────────────────── */
.welcome-popup__success {
  text-align: center;
  display: none;
}
.welcome-popup.is-revealed .welcome-popup__form,
.welcome-popup.is-revealed .welcome-popup__intro { display: none; }
.welcome-popup.is-revealed .welcome-popup__success { display: block; }
.welcome-popup__success p {
  margin: 0 auto 1.4rem;
  max-width: 24rem;
  color: var(--text-soft);
  line-height: 1.65;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
}
.welcome-popup__code {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  color: var(--text);
  background: rgba(216, 199, 195, 0.32);
  padding: 0.65rem 1.2rem;
  margin: 0.4rem 0 1.4rem;
  border: 1px solid var(--divider);
  user-select: all;
}
.welcome-popup__close-success {
  background: none;
  border: 0;
  padding: 0.5rem 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  cursor: pointer;
}
.welcome-popup__close-success:hover { color: var(--text); }

/* WELCOME POP-UP ──────────────────────────────────────────────────── */
.welcome-popup {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.welcome-popup.is-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0s;
}
.welcome-popup__panel[tabindex="-1"]:focus-visible { outline: none; }

.welcome-popup__scrim {
  position: absolute;
  inset: 0;
  background: rgba(28, 28, 28, 0.18);
  cursor: pointer;
}

.welcome-popup__panel {
  position: relative;
  z-index: 1;
  background: var(--bg);
  max-width: min(480px, calc(100vw - 2rem));
  width: 100%;
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(2rem, 5vw, 3rem);
  box-shadow:
    0 2px 8px rgba(28, 28, 28, 0.05),
    0 18px 48px rgba(28, 28, 28, 0.08);
  transform: scale(0.95);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.welcome-popup.is-visible .welcome-popup__panel {
  transform: scale(1);
}

.welcome-popup__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text-soft);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: color 0.3s ease;
}
.welcome-popup__close:hover {
  color: var(--text);
}

.welcome-popup__content {
  text-align: center;
}
.welcome-popup__content h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.85rem, 4vw, 2.3rem);
  line-height: 1.2;
  margin-bottom: 0.85rem;
  color: var(--text);
}
.welcome-popup__content p {
  max-width: 26rem;
  margin: 0 auto 2rem;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.65;
  color: var(--text-soft);
}

.welcome-popup__form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 22rem;
  margin: 0 auto;
}
.welcome-popup__input {
  width: 100%;
  padding: 1rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  background: #FFFFFF;
  border: 1px solid var(--divider);
  transition: border-color 0.3s ease;
}
.welcome-popup__input::placeholder {
  color: var(--text-soft);
  opacity: 0.6;
}
.welcome-popup__input:focus {
  outline: none;
  border-color: var(--accent);
}
.welcome-popup__submit {
  width: 100%;
  padding-block: 1.1rem;
  font-size: 0.82rem;
}

@media (max-width: 480px) {
  .welcome-popup__panel {
    padding: 2rem 1.5rem;
  }
  .welcome-popup__close {
    top: 0.75rem;
    right: 0.75rem;
  }
}

/* Policy pages — long-form legal copy with owner-action callouts ─────── */
.policy {
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(4rem, 8vw, 6.5rem);
}
.policy__body {
  max-width: 38rem;
  margin-inline: auto;
}
.policy__body p {
  font-size: clamp(1rem, 1.05vw, 1.08rem);
  line-height: 1.8;
  margin-bottom: 1.2rem;
  color: var(--text);
}
.policy__body h2 {
  font-size: clamp(1.5rem, 2.3vw, 1.95rem);
  font-weight: 300;
  margin: clamp(2.4rem, 4.5vw, 3.4rem) 0 1.1rem;
}
.policy__body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  margin: 1.8rem 0 0.65rem;
}
.policy__body ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.6rem;
}
.policy__body ul li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.7rem;
  font-size: clamp(1rem, 1.05vw, 1.08rem);
  line-height: 1.75;
  color: var(--text);
}
.policy__body ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--text-soft);
}
.policy__body strong { font-weight: 500; }
.policy__body a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--divider);
  text-underline-offset: 3px;
}
.policy__body a:hover { text-decoration-color: var(--text-soft); }
.policy__updated {
  font-size: 0.85rem;
  color: var(--text-soft);
  margin-bottom: 2rem;
  letter-spacing: 0.04em;
}

.policy-callout {
  background: #FBF8F3;
  border: 1px solid var(--divider);
  border-radius: 2px;
  padding: clamp(1.4rem, 2.4vw, 1.9rem) clamp(1.4rem, 2.6vw, 2rem);
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  max-width: 38rem;
  box-shadow: var(--shadow-sm);
}
.policy-callout__label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 0.9rem;
}
.policy-callout ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.policy-callout li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.55rem;
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--text);
}
.policy-callout li:last-child { margin-bottom: 0; }
.policy-callout li::before {
  content: '—';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--text-soft);
}

.todo {
  color: var(--accent);
  border-bottom: 1px dashed var(--accent);
  font-style: italic;
  padding: 0 0.08em;
}