/* ---------- Fonts ---------- */
@font-face {
  font-family: "Crimson Text";
  src: url("../fonts/Crimson_Text/CrimsonText-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Crimson Text";
  src: url("../fonts/Crimson_Text/CrimsonText-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree/static/Figtree-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree/static/Figtree-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree/static/Figtree-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree/static/Figtree-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree/static/Figtree-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variables ---------- */
:root {
  --color-bg: #faf6f0;
  --color-bg-alt: #f3ece0;
  --color-wood-dark: #a48d5b;
  --color-text: #3b332b;
  --color-text-light: #6f6355;
  --color-line: #e5dbca;
  --color-white: #ffffff;
  --color-hover-primary: #7a3700;

  --font-display: "Crimson Text", serif;
  --font-body: "Crimson Text", serif;

  --container-width: 1440px;
}

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

img { max-width: 100%; display: block; }

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

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
/* Page-transition veil: applied briefly on load (removed by JS once the
   page is ready) and while navigating away, so switching pages reads as a
   soft mist clearing rather than an instant cut. Scoped to <main> and the
   footer only — never <body> itself — because a filter on an ancestor of
   a position:fixed element (the header) hijacks it as that element's
   containing block, which would drag the fixed header along into the
   blur/fade instead of leaving it in place. */
main,
.site-footer {
  opacity: 1;
  filter: blur(0);
  transition: opacity 0.3s ease, filter 0.3s ease;
}
body.is-loading main,
body.is-loading .site-footer,
body.is-leaving main,
body.is-leaving .site-footer {
  opacity: 0;
  filter: blur(8px);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text);
}
h1 { font-weight: 400; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section-eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-wood-dark);
  margin-bottom: 14px;
}

/* ---------- Buttons ---------- */
.btn {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-block;
  padding: 14px 34px;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: inherit;
  letter-spacing: 0.04em;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn-primary {
  background: var(--color-wood-dark);
  color: var(--color-white);
  border: 1px solid var(--color-wood-dark);
}
.btn-primary:hover { background: var(--color-hover-primary); border-color: var(--color-hover-primary); }

.btn-outline {
  margin-top: 44px;
  border: 1px solid var(--color-wood-dark);
  color: var(--color-wood-dark);
}
.btn-outline:hover { background: var(--color-wood-dark); color: var(--color-white); }

.btn-text {
  padding: 0;
  margin-top: 20px;
  border-bottom: 1px solid var(--color-wood-dark);
  color: var(--color-wood-dark);
}

.btn-collection {
  margin-top: 60px;
  padding: 20px 40px;
  font-size: 1.1rem;
  font-weight: 600;
  border: 1px solid #a48d5b;
  color: #a48d5b;
  background: transparent;
  box-shadow: inset 0 0 30px 1px color-mix(in srgb, #a48d5b 70%, transparent);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.btn-collection:hover {
  color: var(--color-white);
  background: #a48d5b;
  box-shadow:
    0 6px 16px color-mix(in srgb, var(--color-wood-dark) 35%, transparent),
    inset 0 2px 0 color-mix(in srgb, white 60%, transparent),
    inset 0 -2px 4px color-mix(in srgb, var(--color-wood-dark) 25%, transparent);
}

/* Same color treatment as .btn-collection (transparent + inset glow,
   filling in on hover), but without its larger padding/font-size override
   -- for buttons that should keep the plain .btn sizing. */
.btn-collection-outline {
  border: 1px solid #a48d5b;
  color: #a48d5b;
  background: transparent;
  box-shadow: inset 0 0 30px 1px color-mix(in srgb, #a48d5b 70%, transparent);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.btn-collection-outline:hover {
  color: var(--color-white);
  background: #a48d5b;
  box-shadow:
    0 6px 16px color-mix(in srgb, var(--color-wood-dark) 35%, transparent),
    inset 0 2px 0 color-mix(in srgb, white 60%, transparent),
    inset 0 -2px 4px color-mix(in srgb, var(--color-wood-dark) 25%, transparent);
}

/* ---------- Header ---------- */
/* Matches ver2-new/index.html's .floating-header design exactly: a fixed,
   inset "floating" bar (16px from top/left/right, rounded corners) with no
   container/max-width constraint, so on ultra-wide screens the icons sit at
   the true browser edges rather than a centered 1440px column. */
.site-header {
  position: fixed;
  top: 16px;
  left: 16px;
  right: 16px;
  height: 56px;
  border-radius: 10px;
  background: transparent;
  z-index: 100;
  box-shadow: none;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.site-header.is-filled {
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.header-inner {
  position: relative;
  height: 100%;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.social-icon {
  width: 36px;
  height: 36px;
  color: #a48d5b;
  filter:
    drop-shadow(2px 2px 3px rgba(255, 255, 255, 1))
    drop-shadow(-2px -2px 3px rgba(255, 255, 255, 1))
    drop-shadow(2px -2px 3px rgba(255, 255, 255, 1))
    drop-shadow(-2px 2px 3px rgba(255, 255, 255, 1))
    drop-shadow(0 0 6px rgba(255, 255, 255, 1))
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.9));
}
.social-icon svg { width: 100%; height: 100%; display: block; }

.header-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  line-height: 0;
}
.site-header.is-filled .header-logo { opacity: 1; pointer-events: auto; }
.header-logo img { height: 28px; width: auto; display: block; }

.nav-toggle {
  width: 32px;
  height: 24px;
  background: transparent;
  border: none;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 0;
  cursor: pointer;
  z-index: 110;
}
.nav-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background: #a48d5b;
  border-radius: 999px;
  box-shadow:
    2px 2px 3px rgba(255, 255, 255, 1),
    -2px -2px 3px rgba(255, 255, 255, 1),
    2px -2px 3px rgba(255, 255, 255, 1),
    -2px 2px 3px rgba(255, 255, 255, 1),
    0 0 6px rgba(255, 255, 255, 1),
    0 0 14px rgba(255, 255, 255, 0.9);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 26px;
}

.cart-icon-link {
  position: relative;
  width: 32px;
  height: 32px;
  color: #a48d5b;
  filter:
    drop-shadow(2px 2px 3px rgba(255, 255, 255, 1))
    drop-shadow(-2px -2px 3px rgba(255, 255, 255, 1))
    drop-shadow(2px -2px 3px rgba(255, 255, 255, 1))
    drop-shadow(-2px 2px 3px rgba(255, 255, 255, 1))
    drop-shadow(0 0 6px rgba(255, 255, 255, 1))
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.9));
}
.cart-icon-link svg { width: 100%; height: 100%; display: block; }
.cart-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff8ec6;
  color: var(--color-white);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  filter: none;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(59, 51, 43, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.primary-nav {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 72%;
  max-width: 320px;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 28px;
  padding: 24px 40px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  border-left: 1px solid var(--color-line);
  z-index: 110;
}

.nav-close {
  position: absolute;
  top: 18px;
  left: 24px;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.nav-close span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-text);
}
.nav-close span:first-child { transform: rotate(45deg); }
.nav-close span:last-child { transform: rotate(-45deg); }
.primary-nav.is-open { transform: translateX(0); }

.primary-nav a {
  font-family: var(--font-display);
  font-size: 1.3rem;
}
.primary-nav a.is-active { color: var(--color-wood-dark); }

/* ---------- Content layer (scrolls over the sticky hero) ---------- */
.content-layer {
  position: relative;
  z-index: 2;
  background: var(--color-bg);
}

/* ---------- Hero ---------- */
.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 82vh;
  min-height: 480px;
  overflow: hidden;
}
.hero-media { height: 100%; }
.hero-contact {
  height: 50vh;
  min-height: 320px;
}
.hero-withdraw {
  height: 50vh;
  min-height: 320px;
}

/* ---------- Contact form (Zoho Forms embed) ---------- */
.contact-form-section {
  padding: 64px 0 96px;
}
.contact-form-section .container {
  max-width: 720px;
}
.contact-form-section iframe {
  display: block;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gallery page: hero photo starts heavily zoomed in and eases out to its
   normal size, on both mobile and PC. Replays every time the sticky hero
   is uncovered by .content-layer scrolling back down (see the "Gallery
   Hero: replay zoom-out when uncovered" script), the same reveal pattern
   used for Legacy's grayscale-to-color hero animation. */
@keyframes hero-gallery-zoom-out {
  from { transform: scale(2.0); }
  to { transform: scale(1); }
}
.hero-gallery .hero-media img {
  transform-origin: center;
  transform: scale(2.0);
}
.hero-gallery.is-zoomed-out .hero-media img {
  animation: hero-gallery-zoom-out 1.8s ease-out forwards;
}
/* Logo + title overlay, positioned the same way Legacy's hero-contain is
   (flex column + edge padding) but bottom-anchored instead of top-anchored,
   and with the stacking order reversed (title above logo). */
.hero.hero-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  padding-top: 15%;
}
.hero-gallery .hero-media {
  position: absolute;
  inset: 0;
}
.hero-gallery .hero-logo {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
}
.hero-gallery .hero-logo img {
  height: 30px;
}
.hero-gallery .hero-title {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  color: #fff0d7;
}
.gallery-feature {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.gallery-feature-img {
  display: block;
  max-width: 800px;
  width: 100%;
  margin-left: auto;
}
.gallery-feature-img-left {
  margin-left: 0;
  margin-right: auto;
}
/* Captioned photo row. Below 1024px the caption always sits under the
   photo. At 1024px+ it moves into the gutter the photo's own alignment
   leaves empty — the left gutter for a right-aligned photo, the right
   gutter for a left-aligned one — using "order" (not DOM order or
   flex-direction) so the mobile stacking order stays photo-then-caption
   for both variants. */
.gallery-feature-row {
  display: flex;
  flex-direction: column;
}
.gallery-feature-row .gallery-feature-img {
  order: 1;
}
.gallery-feature-caption {
  order: 2;
  margin-top: 16px;
  color: var(--color-text-light);
  font-size: 1rem;
  font-style: italic;
}
@media (min-width: 1024px) {
  .gallery-feature-row {
    flex-direction: row;
    align-items: center;
    gap: 32px;
  }
  .gallery-feature-row .gallery-feature-img {
    flex: 0 1 800px;
    margin-left: 0;
    margin-right: 0;
  }
  .gallery-feature-row .gallery-feature-caption {
    flex: 1;
    margin-top: 0;
    font-size: 1.4rem;
  }
  .gallery-feature-row:not(.gallery-feature-row-left) .gallery-feature-img {
    order: 2;
  }
  .gallery-feature-row:not(.gallery-feature-row-left) .gallery-feature-caption {
    order: 1;
    text-align: right;
  }
  .gallery-feature-row-left .gallery-feature-caption {
    text-align: left;
  }
}
.gallery-feature-full {
  overflow: hidden;
}
.gallery-feature-full img {
  display: block;
  width: 100%;
  transform-origin: center;
  transform: scale(2.0);
}
.gallery-feature-full.is-visible img {
  animation: hero-gallery-zoom-out 1.8s ease-out forwards;
}
@media (min-width: 768px) {
  .gallery-feature {
    padding: 64px;
    gap: 64px;
  }
}
@media (max-width: 767px) {
  .hero.hero-gallery {
    height: 50vh;
    min-height: 320px;
  }
}

/* Collection page only: size the hero by the photo's own aspect ratio (3:2)
   so the width always fills edge-to-edge with no side crop and no gaps.
   max-height caps it on wide/short screens so the next section still peeks
   into view; when that cap applies, only the top/bottom get cropped. */
.hero.hero-contain {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 2;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  padding-bottom: 12%;
}
.hero-contain .hero-media {
  display: block;
  width: 100%;
  position: absolute;
  inset: 0;
}
.hero-contain .hero-media img {
  object-fit: cover;
}
/* The logo and title need a fixed gap rather than height-based percentages:
   hero-contain's height shrinks with viewport width (see above), so
   percentage positions converge and overlap on narrow screens. */
.hero-contain .hero-logo {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
}
.hero-contain .hero-title {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
}
.hero-contain .hero-eyebrow {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .hero-contain .hero-logo img { height: 30px; }
  .hero-contain .hero-title { font-size: 1.4rem; }
  .hero-contain .hero-eyebrow { font-size: 0.8rem; }
  .hero.hero-contain { gap: 16px; padding-bottom: 3%; }
  .product-preview-info p { line-height: 1.4; text-align: left; }

  /* Home page, mobile only: hero scrolls away normally instead of staying
     pinned behind the content layer. */
  .page-home .hero {
    position: relative;
  }

}
.hero-tagline {
  position: absolute;
  left: 0;
  right: 0;
  top: 8%;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.0rem;
  color: #ff8ec6;
  text-shadow:
    2px 2px 3px rgba(255, 255, 255, 1),
    -2px -2px 3px rgba(255, 255, 255, 1),
    2px -2px 3px rgba(255, 255, 255, 1),
    -2px 2px 3px rgba(255, 255, 255, 1),
    0 0 6px rgba(255, 255, 255, 1),
    0 0 14px rgba(255, 255, 255, 0.9);
}

/* Box A: the outer wrapper, now genuinely transparent. It splits into two
   equal halves — Box B (left, the logo/title/eyebrow trio) and Box C
   (right, the brush photo) — each centering its own contents. */
.hero-stack {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 25%;
  z-index: 1;
  display: flex;
  flex-direction: row;
}
.hero-stack-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.hero-stack-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}
.hero-stack-logo {
  height: 36px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}
.hero-stack-title {
  margin: 0;
  color: var(--color-white);
  font-size: clamp(1.2rem, 6.8vw, 1.8rem);
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.hero-stack-eyebrow {
  margin: 0;
  color: var(--color-white);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.hero-stack-image {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
}
/* Invisible reference frame matching .container's own max-width/centering
   rule, so percentages inside it (like .hero-pc-box's right/width) resolve
   against the same 1440px-capped, centered column as the rest of the site's
   content — not the raw, edge-to-edge browser viewport that .hero itself
   spans for its full-bleed photo. */
.hero-bounds {
  position: absolute;
  inset: 0;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Temporary visual placeholder for the PC hero's right-side box — swap to
   transparent once its contents are decided. */
.hero-pc-box {
  display: none;
}
@media (min-width: 768px) {
  .hero-pc-box {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    bottom: 0;
    z-index: 1;
  }
  /* Anchored to the box's own left edge with a fixed width, then centered
     within that sub-region — unlike a left%+translateX(-50%) point anchor,
     this can never spill past the box's edge no matter how wide the text
     renders, which matters here since the box exists to keep clear of the
     model's face in the photo. */
  .hero-pc-tagline {
    position: absolute;
    top: 35%;
    left: 0;
    width: 65%;
    transform: translateY(-50%);
    margin: 0;
    text-align: center;
    white-space: nowrap;
    color: #ff8ec6;
    font-size: 3.4rem;
    font-weight: 600;
  }
  /* Deliberately uneven rhythm rather than a uniform gap: logo + title read
     as one brand-identity unit (tight), then a bigger break before the
     brush photo (a distinct visual), then the eyebrow sits right under the
     photo like a caption (tight again). */
  .hero-pc-stack {
    position: absolute;
    top: 69%;
    left: 0;
    width: 65%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-pc-logo {
    height: 48px;
    width: auto;
    display: block;
  }
  .hero-pc-title {
    margin: 16px 0 0;
    color: #c3b493;
    font-size: 1.8rem;
    white-space: nowrap;
  }
  .hero-pc-stack-image {
    max-height: 176px;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin-top: 30px;
  }
  .hero-pc-eyebrow {
    margin: 14px 0 0;
    color: #c3b493;
    font-size: 0.9rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
  }
}

.hero-logo {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}
.hero-logo img {
  height: 48px;
  width: auto;
  display: block;
}

.hero-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 25%;
  z-index: 2;
  text-align: center;
  color: var(--color-white);
  padding: 0 24px;
  font-size: 2.4rem;
}
.hero-experience .hero-title {
  color: #faf6f0;
}
.page-how-to-use .hero-title {
  color: #c3b493;
}
.page-experience .hero-title {
  color: var(--color-white);
}
.page-collection .hero-title,
.page-collection .hero-eyebrow {
  color: #c3b493;
}
.page-withdraw-from-contract .hero-title-sub {
  font-size: 0.8em;
}
.page-withdraw-from-contract .hero-title {
  color: #a48d5b;
  text-shadow:
    2px 2px 3px rgba(255, 255, 255, 1),
    -2px -2px 3px rgba(255, 255, 255, 1),
    2px -2px 3px rgba(255, 255, 255, 1),
    -2px 2px 3px rgba(255, 255, 255, 1),
    0 0 6px rgba(255, 255, 255, 1),
    0 0 14px rgba(255, 255, 255, 0.9);
}
.page-contact .hero-title {
  color: #a48d5b;
  text-shadow:
    2px 2px 3px rgba(255, 255, 255, 1),
    -2px -2px 3px rgba(255, 255, 255, 1),
    2px -2px 3px rgba(255, 255, 255, 1),
    -2px 2px 3px rgba(255, 255, 255, 1),
    0 0 6px rgba(255, 255, 255, 1),
    0 0 14px rgba(255, 255, 255, 0.9);
}
.page-legacy .hero-title {
  color: #fff0d7;
}
@keyframes hero-legacy-colorize {
  0% { filter: grayscale(100%); }
  30% { filter: grayscale(100%); }
  100% { filter: grayscale(0%); }
}
.page-legacy .hero-media img,
.page-legacy .hero-logo img,
.page-legacy .hero-title {
  filter: grayscale(100%);
}
.page-legacy .hero.is-colorized .hero-media img,
.page-legacy .hero.is-colorized .hero-logo img,
.page-legacy .hero.is-colorized .hero-title {
  animation: hero-legacy-colorize 3s ease-out forwards;
}
.page-legacy .hero.hero-contain {
  justify-content: flex-start;
  padding-bottom: 0;
  padding-top: 15%;
}
/* Legacy page (mobile and PC): hero scrolls away normally instead of
   staying pinned behind the content layer. The header-fill, colorize, and
   colorize-reset logic all key off .content-layer's own scroll position,
   not the hero's, so they keep working unchanged. */
.page-legacy .hero {
  position: relative;
}
/* Contact page (mobile and PC): hero scrolls away normally instead of
   staying pinned behind the content layer. Same reasoning as the Legacy
   page override above — the header-fill toggle keys off .content-layer's
   own scroll position, not the hero's, so it keeps working unchanged. */
.page-contact .hero {
  position: relative;
}
.hero-eyebrow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18%;
  z-index: 2;
  text-align: center;
  color: var(--color-white);
  opacity: 0.9;
  padding: 0 24px;
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
/* ---------- Dual Photo Row ---------- */
/* Outer section stacks the dual-photo pair and the two single photos below
   it vertically, all sharing one tall background and the same 16px
   margin/gap rhythm used by Collection's quad-photo-grid. */
.dual-photo-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: #fff;
}
.dual-photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: -16px -16px 0;
}
.dual-photo-pair img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.dual-photo-quad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0 -16px;
}
.dual-photo-quad img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
@media (max-width: 767px) {
  /* Home page, mobile only: tighter spacing around/between the dual photos. */
  .dual-photo-row {
    gap: 8px;
    padding: 8px;
  }
  .dual-photo-pair {
    margin: 0 -8px;
  }
  .dual-photo-quad {
    margin: 0 -8px;
  }
}

/* ---------- Shipping Bar (Collection page, links to where-we-ship.html) ---------- */
.shipping-bar {
  display: block;
  background: var(--color-bg-alt);
  color: #a48d5b;
  text-align: center;
  font-family: "Crimson Text", serif;
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  padding: 20px 24px;
  border-top: 3px solid #ffffff;
  border-bottom: 3px solid var(--color-line);
}
.shipping-bar-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}
.shipping-bar:hover { color: var(--color-text); }
.shipping-bar:hover .shipping-bar-arrow { transform: translateX(5px); }
@media (min-width: 768px) {
  .shipping-bar { font-size: 1.3rem; padding: 24px; }
}

/* ---------- Collection Divider Bar ---------- */
/* Plain color bar (no text/link) between the quad photo grid and the
   product-preview list below it, same color treatment as .shipping-bar. */
.collection-divider {
  border-top: 3px solid #ffffff;
  border-bottom: 3px solid var(--color-line);
}

/* ---------- Quad Photo Grid ---------- */
.quad-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px;
}
@media (max-width: 767px) {
  .quad-photo-grid {
    gap: 8px;
    padding: 8px;
  }
}
.quad-photo-grid img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}
.quad-photo {
  position: relative;
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-wood-dark) 35%, transparent);
}
.quad-photo:hover img { transform: scale(1.06); }
.quad-photo-caption {
  position: absolute;
  right: 5%;
  bottom: 5%;
  margin: 0;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
  color: #a48d5b;
  text-shadow: 2px -2px 3px rgba(255, 255, 255, 0.5);
}

/* ---------- Product Preview ---------- */
.product-preview {
  padding: 0;
  display: flow-root;
  scroll-margin-top: 90px;
}
/* Inner box fills the section edge-to-edge (no outer background, no inset
   margin). Background is a flat, alternating light/dark color per item
   (set below by #id) instead of a gradient. Border is transparent for now,
   kept only so the box's size doesn't shift if a visible border comes back
   later. */
.product-preview-panel {
  margin: 0;
  padding: 60px 0;
  border: 1px solid transparent;
}
#facial-cleansing-brush .product-preview-panel,
#short-handle-brush .product-preview-panel {
  background: var(--color-bg-alt);
}
#decolletage-brush .product-preview-panel,
#long-handle-brush .product-preview-panel {
  background: var(--color-bg);
}
.product-preview-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.product-preview-media {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
.product-preview-main {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-alt);
  overflow: hidden;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-wood-dark) 35%, transparent);
}
.product-preview-main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-preview-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, white 75%, transparent);
  color: var(--color-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.product-preview-arrow:hover {
  background: var(--color-white);
}
.product-preview-arrow-prev { left: 10px; }
.product-preview-arrow-next { right: 10px; }

.product-preview-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.product-preview-thumb {
  flex: 1;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid transparent;
  background: var(--color-bg-alt);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.25s ease;
}
.product-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-preview-thumb:hover,
.product-preview-thumb.is-active {
  border-color: var(--color-wood-dark);
}

.product-preview-info {
  text-align: center;
}
.product-preview-info .btn-primary {
  background: #ff8ec6;
  border-color: #ff8ec6;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 600;
  box-shadow:
    0 4px 8px color-mix(in srgb, #f1429d 40%, transparent),
    inset 0 2px 0 color-mix(in srgb, white 60%, transparent),
    inset 0 -2px 4px color-mix(in srgb, #f1429d 25%, transparent);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.product-preview-info .btn-primary:hover {
  background: #f1429d;
  border-color: #f1429d;
  transform: translateY(1px);
  box-shadow:
    0 2px 4px color-mix(in srgb, #f1429d 40%, transparent),
    inset 0 2px 0 color-mix(in srgb, white 45%, transparent),
    inset 0 -2px 4px color-mix(in srgb, #a82450 30%, transparent);
}
.product-preview-info h2 {
  font-size: 1.9rem;
  margin-bottom: 12px;
  color: #a48d5b;
}
.product-preview-info p {
  color: var(--color-text-light);
  margin-bottom: 28px;
}
.product-preview-specs {
  margin: 0 0 28px;
  padding: 16px 20px;
  border-radius: 10px;
  background: #eeeeee;
  font-size: 0.85rem;
  line-height: 1.3;
  text-align: left;
  opacity: 0.85;
}
.product-preview-specs dt {
  font-weight: 600;
  color: var(--color-wood-dark);
}
.product-preview-specs dd {
  color: var(--color-text-light);
  margin: 0 0 12px;
}
.product-preview-specs dd:last-child {
  margin-bottom: 0;
}
/* Repeats the product's photo + name just above its price/Add to Cart row.
   On narrow screens, by the time a visitor scrolls past the long
   description and specs to reach the purchase row, the <h2> product name
   up top (and sometimes even the image) has scrolled out of view -- while
   the next product's photo may already be peeking in from below. This
   recap removes the ambiguity about which product the price/button belong
   to. Shown only below the 768px breakpoint, where .product-preview-inner
   is a single scrolling column; hidden once the PC side-by-side layout
   kicks in, since the name/image stay on screen together there. */
.product-preview-recap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.product-preview-recap-image {
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--color-bg-alt);
}
.product-preview-recap .product-preview-recap-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-wood-dark);
}
.product-preview-purchase {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.product-preview-purchase .product-preview-price {
  margin: 0;
  font-family: "Figtree", sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: #a48d5b;
}

/* ---------- Single Photo ---------- */
.single-photo {
  line-height: 0;
  margin: 0 -16px;
}
@media (max-width: 767px) {
  /* Home page, mobile only: flush left/right edges to match the rest of
     the dual-photo-row's tighter mobile spacing. */
  .single-photo {
    margin: 0 -8px;
  }
}
.single-photo picture {
  display: block;
}
.single-photo img {
  width: 100%;
  height: auto;
  display: block;
}
/* Reserve each photo's real aspect ratio so its space is claimed before
   the image itself has loaded (mobile/PC use different source files with
   different ratios, matching the max-width:767px breakpoint the <picture>
   sources already switch on). */
.single-photo-a img,
.single-photo-fluffy img {
  object-fit: cover;
}
.single-photo-a img { aspect-ratio: 1 / 1; }
.single-photo-fluffy img { aspect-ratio: 4 / 5; }
@media (min-width: 768px) {
  .single-photo-a img { aspect-ratio: 3 / 2; }
  .single-photo-fluffy img { aspect-ratio: 3 / 2; }
}
.single-photo-fluffy { position: relative; }
.single-photo-fluffy .photo-caption {
  position: absolute;
  right: 1%;
  top: 4%;
  text-align: right;
  padding: 0 24px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.8;
  font-weight: 600;
  color: #ff8ec6;
  text-shadow: 2px -2px 3px rgba(255, 255, 255, 0.5);
}
.single-photo-a { position: relative; }
.single-photo-a .photo-caption {
  position: absolute;
  right: 1%;
  top: 4%;
  text-align: right;
  padding: 0 24px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.8;
  font-weight: 600;
  color: #a48d5b;
  text-shadow: 2px -2px 3px rgba(255, 255, 255, 0.5);
}

/* ---------- Experience Quad Row ---------- */
.experience-quad-row {
  padding: 0;
}
.experience-quad-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.experience-quad-grid img {
  width: 100%;
  height: auto;
  display: block;
}
.experience-note {
  padding: 56px 0;
  text-align: center;
}
.experience-note p {
  color: var(--color-text-light);
  font-size: 1.2rem;
}

/* ---------- Photo Compare (before/after sections) ---------- */
.photo-compare { padding: 80px 0; }
/* Scoped under body.page-experience so this never touches Home/Collection
   pages, even if their own .content-layer section count happens to match —
   css/style.css is shared by all pages, so page-scoping here is structural,
   not just a side effect of these class names being unique for now.
   Section numbering counts every <section> here as Section 2 onward
   (Hero is Section 1). Currently: 2 quad-row, 3 note, 4 Pore Buildup,
   5 Foundation Residue, 6 Flaky Skin, 7 moisture-diagram, 8 Skin Texture,
   9 Acne, 10 Atopic Dermatitis (both text-only, no photo, so they're left
   out of the alternation below and just keep the default .content-layer
   background), 11 photo-feature (now also holds the Shop the Collection
   button). */
body.page-experience .content-layer > section:nth-child(2),
body.page-experience .content-layer > section:nth-child(4),
body.page-experience .content-layer > section:nth-child(7) {
  background: var(--color-bg-alt);
}
body.page-experience .content-layer > section:nth-child(3),
body.page-experience .content-layer > section:nth-child(5),
body.page-experience .content-layer > section:nth-child(6),
body.page-experience .content-layer > section:nth-child(8) {
  background: var(--color-bg);
}
.photo-compare-heading {
  text-align: center;
  font-size: 1.9rem;
  margin-bottom: 40px;
  color: #a48d5b;
}
.photo-compare-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
/* Images and their arrow share row 1, captions sit in row 2 below — kept as
   separate grid rows (rather than nesting captions inside each photo's box)
   so the arrow centers on the photos alone, not on photo+caption combined. */
.photo-compare-row > *:nth-child(1) { grid-column: 1; grid-row: 1; }
.photo-compare-row > *:nth-child(2) { grid-column: 1; grid-row: 2; }
.photo-compare-row > *:nth-child(3) { grid-column: 2; grid-row: 1; }
.photo-compare-row > *:nth-child(4) { grid-column: 3; grid-row: 1; }
.photo-compare-row > *:nth-child(5) { grid-column: 3; grid-row: 2; }
.photo-compare-img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-wood-dark) 35%, transparent);
}
.photo-compare-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}
.photo-compare-caption {
  text-align: center;
  margin-top: 12px;
  font-size: 1.8rem;
  color: #a48d5b;
  font-family: "Figtree", sans-serif;
  font-weight: 600;
}
.photo-compare-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a48d5b;
}
.photo-compare-arrow svg path { stroke-width: 3.5; }
.photo-compare-note {
  max-width: 640px;
  margin: 20px auto 0;
  text-align: center;
  color: var(--color-text-light);
  font-size: 1.2rem;
}

/* ---------- Text Feature (text-only sections, no photos: Acne, Atopic
   Dermatitis) ---------- */
.text-feature { padding: 80px 0; }
.text-feature-alt { background: var(--color-bg-alt); }
.text-feature .container { max-width: 640px; }
.text-feature-image {
  max-width: 360px;
  width: 70%;
  margin: 0 auto 60px;
}
.text-feature p {
  color: var(--color-text-light);
  font-size: 1.2rem;
  margin-bottom: 1.4em;
}
.text-feature p:last-child { margin-bottom: 0; }
.text-feature a { color: var(--color-wood-dark); text-decoration: underline; }

/* ---------- Moisture Diagram ---------- */
.moisture-diagram { padding: 10px 0 80px; text-align: center; }
.moisture-diagram-image {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}

/* ---------- Collection Preview ---------- */
.collection-preview {
  padding: 20px 0 100px;
  text-align: center;
  background: var(--color-bg);
  padding-top: 90px;
}
.collection-preview .section-eyebrow {
  color: #ff8ec6;
  font-size: 1.0rem;
  margin-bottom: 50px;
}
.collection-preview h2 {
  font-size: 2.0rem;
  margin-bottom: 50px;
  color: #fc88e1;
  text-shadow: 2px -2px 3px rgba(255, 255, 255, 0.5);
}

.collection-feature-image {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 0 16px;
  box-sizing: border-box;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
}
.collection-feature-oval {
  display: block;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  border-radius: 50%;
  overflow: hidden;
  filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--color-wood-dark) 35%, transparent));
}
.collection-feature-oval img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.collection-feature-oval:hover img { transform: scale(1.06); }

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  text-align: left;
  margin-bottom: 10px;
}

.product-card { display: block; }
.product-photos {
  filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--color-wood-dark) 35%, transparent));
}
.product-image {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 20px 20px 0 0;
}
.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.product-image-bottom {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  margin-bottom: 0;
  border-radius: 0 0 20px 20px;
}
.product-image-bottom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.product-image:hover img { transform: scale(1.04); }
.product-image-bottom:hover img { transform: scale(1.04); }

.product-info {
  position: relative;
  z-index: 1;
  background: #f7f6f5;
  padding: 16px;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-wood-dark) 35%, transparent);
}

.product-card h3 {
  font-size: 1.25rem;
  margin-bottom: 4px;
  color: #a48d5b;
}
.product-card p { color: var(--color-text-light); font-size: 0.95rem; }
@media (max-width: 767px) {
  /* Mobile only: photos + info sit flush (no gap, see the desktop-only
     margin-bottom below), reading as one continuous 3-piece card. Round
     only the very top of the top photo and the very bottom of the info
     box; the middle photo stays square. */
  .product-image-bottom {
    border-radius: 0;
  }
  .product-info {
    border-radius: 0 0 20px 20px;
  }
}

/* ---------- Story Photos ---------- */
.story-photos {
  background: var(--color-bg-alt);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.story-photos-light {
  background: var(--color-bg);
}
.story-photos-item {
  position: relative;
  display: block;
  max-width: 600px;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-wood-dark) 35%, transparent);
}
.story-photos-item-left { margin-right: auto; }
.story-photos-item-center { margin-left: auto; margin-right: auto; }
.story-photos-item-right { margin-left: auto; }
.story-photos-img {
  display: block;
  width: 100%;
  transition: transform 0.3s ease;
}
.story-photos-item:hover .story-photos-img {
  transform: scale(1.06);
}
.story-photos-caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.0rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}
.story-photos-instagram-logo {
  position: absolute;
  left: 50%;
  bottom: 22%;
  transform: translate(-50%, 50%);
  height: 70px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(255, 255, 255, 0.6));
}
@media (min-width: 768px) {
  .story-photos {
    padding: 64px;
    gap: 64px;
  }
  .story-photos-caption {
    font-size: 3.0rem;
  }
  .story-photos-instagram-logo {
    height: 100px;
  }
}
.story-photos-full {
  position: relative;
  display: block;
  overflow: hidden;
}
.story-photos-full-img {
  display: block;
  width: 100%;
  transition: transform 0.3s ease;
}
.story-photos-full:hover .story-photos-full-img {
  transform: scale(1.06);
}
.story-photos-full .story-photos-caption {
  color: #a48d5b;
  text-shadow: 0 2px 6px rgba(255, 255, 255, 0.6);
}
.story-photos-caption-box {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  border: 1px solid #a48d5b;
  padding: 0.5em 1.2em;
}

/* ---------- Visitor Notice ---------- */
.visitor-notice {
  background: #fff;
  padding: 80px 0;
  scroll-margin-top: 90px;
  transition: opacity 0.9s ease, filter 0.9s ease;
}
/* Hidden state, toggled by JS via a class on <body> (not on this section
   directly) so the same mechanism also works for the inline script in
   index.html's <head>, which runs before this element even exists in the
   DOM yet. */
body.hash-message-pending #message {
  opacity: 0;
  filter: blur(8px);
}
/* Suppresses the transition for one frame so JS can snap the section
   straight to the hidden state (no visible fade-out first) before
   removing hash-message-pending to fade it back in. */
body.hash-message-no-transition #message {
  transition: none;
}
.visitor-notice .container {
  max-width: 780px;
}
.visitor-notice h2 {
  text-align: center;
  font-size: 1.9rem;
  margin-bottom: 32px;
  color: #a48d5b;
}
.visitor-notice p {
  color: var(--color-text-light);
  margin-bottom: 1.4em;
}
.visitor-notice p:last-child { margin-bottom: 0; }
.visitor-notice a { color: var(--color-wood-dark); text-decoration: underline; }
.visitor-notice-image {
  margin: 32px auto 0;
}
@media (max-width: 767px) {
  .visitor-notice p {
    font-size: 1.1rem;
  }
  .visitor-notice-image {
    max-width: 200px;
    margin-top: 48px;
  }
  .legacy-story p {
    font-size: 1.1rem;
  }
}

/* ---------- Legacy Story ---------- */
.legacy-story {
  padding: 80px 0;
}
.legacy-story .container {
  max-width: 780px;
}
.legacy-story-title {
  text-align: center;
  font-size: 1.9rem;
  margin-bottom: 32px;
  color: #a48d5b;
}
.legacy-story p {
  color: var(--color-text-light);
  margin-bottom: 1.4em;
}
.legacy-story p:last-child { margin-bottom: 0; }
.legacy-story p.legacy-farewell {
  margin-top: 2.8em;
  margin-bottom: 2.8em;
}
.legacy-story a { color: var(--color-wood-dark); text-decoration: underline; }
.legacy-story p.legacy-insert-note {
  text-align: center;
  color: #a48d5b;
  font-weight: 600;
  margin-top: 56px;
  margin-bottom: 72px;
}
.legacy-compare {
  margin: 48px 0;
}
.legacy-compare .photo-compare-img {
  aspect-ratio: 4 / 3;
}
.legacy-compare .photo-compare-caption {
  align-self: start;
}
.legacy-photos-stack {
  display: flex;
  flex-direction: column;
}
.legacy-photos-stack img {
  width: 100%;
  height: auto;
  display: block;
}
@keyframes scroll-colorize {
  0% { filter: grayscale(100%); }
  20% { filter: grayscale(100%); }
  100% { filter: grayscale(0%); }
}
.scroll-colorize {
  filter: grayscale(100%);
}
.scroll-colorize.is-visible {
  animation: scroll-colorize 5s ease-out forwards;
}

/* ---------- Photo Feature ---------- */
.photo-feature { padding: 80px 0; text-align: center; }
.photo-feature-image {
  max-width: 360px;
  width: 70%;
  margin: 0 auto;
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(20, 16, 12, 0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.lightbox-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }

/* ---------- How to Use Steps ---------- */
.how-to-steps {
  padding: 70px 0;
}
.how-to-section-title {
  text-align: center;
  font-size: 1.9rem;
  color: #a48d5b;
  margin-bottom: 50px;
}
.caring-for-brush {
  padding: 70px 0;
  background: var(--color-bg-alt);
  scroll-margin-top: 90px;
}
.how-to-step {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 60px;
}
.how-to-step:last-child { margin-bottom: 0; }
.how-to-number {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: #a48d5b;
  margin-bottom: 8px;
}
.how-to-text { color: var(--color-text-light); }
.how-to-text + .how-to-text { margin-top: 1em; }
.how-to-highlight { color: #f1429d; }
.how-to-highlight-alt { color: #ff8ec6; }
.how-to-image img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-wood-dark) 35%, transparent);
}
.how-to-step-no-number .how-to-image img {
  border-radius: 28px;
}
.how-to-notes {
  margin-top: 20px;
}
.how-to-cta {
  margin-top: 60px;
  text-align: center;
}
.page-how-to-use .how-to-cta .btn-collection {
  border-color: #ff8ec6;
  color: #ff8ec6;
  box-shadow: inset 0 0 30px 1px color-mix(in srgb, #ff8ec6 70%, transparent);
}
.page-how-to-use .how-to-cta .btn-collection:hover {
  color: var(--color-white);
  background: #ff8ec6;
  box-shadow:
    0 6px 16px color-mix(in srgb, #f1429d 35%, transparent),
    inset 0 2px 0 color-mix(in srgb, white 60%, transparent),
    inset 0 -2px 4px color-mix(in srgb, #f1429d 25%, transparent);
}
.how-to-note {
  color: var(--color-text-light);
}
.how-to-text + .how-to-note { margin-top: 10px; }
.how-to-note-label {
  color: #a48d5b;
  font-weight: 600;
}
.how-to-note + .how-to-note { margin-top: 8px; }
@media (max-width: 767px) {
  /* Caring for Your Brush, mobile only: the note (nested inside
     how-to-content, right after the description) visually moves below
     the photo instead of staying inside the text block. how-to-content
     becomes a transparent wrapper (display:contents) so its children join
     how-to-step's own flex layout directly, where "order" can place them;
     how-to-step's gap is zeroed out in favor of explicit margins so the
     now-directly-flexed children don't pick up an extra unwanted gap
     between every one of them. PC is untouched — this block only fires
     under 767px, and .how-to-content there still lays out normally. */
  .caring-for-brush .how-to-step {
    gap: 0;
  }
  .caring-for-brush .how-to-content {
    display: contents;
  }
  .caring-for-brush .how-to-text {
    margin-bottom: 20px;
  }
  .caring-for-brush .how-to-image {
    order: 1;
  }
  .caring-for-brush .how-to-note {
    order: 2;
    margin-top: 16px;
  }
}

/* ---------- Legal Page ---------- */
.legal-page {
  padding: 140px 0 100px;
}
.legal-page .container {
  max-width: 720px;
}
.legal-title {
  font-size: 2.2rem;
  margin-bottom: 8px;
}
.legal-updated {
  color: var(--color-text-light);
  font-size: 0.9rem;
  margin-bottom: 48px;
}
.legal-page h2 {
  font-size: 1.3rem;
  margin-top: 40px;
  margin-bottom: 14px;
  color: #a48d5b;
}
.legal-page h2:first-of-type { margin-top: 0; }
.legal-page p {
  color: var(--color-text-light);
  margin-bottom: 1.2em;
}
.legal-page ul {
  margin: 0 0 1.2em 1.4em;
  color: var(--color-text-light);
}
.legal-page li { margin-bottom: 0.5em; }
.legal-address { line-height: 1.8; }
.legal-page a { text-decoration: underline; color: var(--color-wood-dark); }
.legal-table-wrap {
  overflow-x: auto;
  margin-bottom: 1.2em;
}
.legal-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.legal-table th,
.legal-table td {
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--color-line);
  vertical-align: top;
}
.legal-table th {
  background: var(--color-bg-alt);
  color: var(--color-wood-dark);
  font-family: var(--font-display);
  font-weight: 600;
}
.legal-table td { color: var(--color-text-light); }

/* ---------- Shipping Page ---------- */
/* Unlike .legal-page (boilerplate nobody reads), this content is meant to
   actually be read, so it gets full-contrast body text, a quick-glance
   stats row, jump links, and each topic broken into its own visually
   distinct card/section instead of a dense wall of clauses. Figtree
   (gothic) throughout instead of the site-wide Crimson Text serif, to
   match the Where We Ship page's type treatment. */
.shipping-page {
  position: relative;
  font-family: "Figtree", sans-serif;
}
.shipping-page h1,
.shipping-page h2,
.shipping-page h3 {
  font-family: inherit;
}
.shipping-intro {
  max-width: 720px;
  padding: 140px 0 48px;
  text-align: center;
}
.shipping-title {
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: #a48d5b;
  text-wrap: balance;
  margin-bottom: 10px;
}
.shipping-lede {
  color: #8f8370;
  font-size: 1.05rem;
  margin: 0 auto 32px;
  max-width: 50ch;
}
.shipping-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.shipping-stat {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  padding: 16px 24px;
  min-width: 140px;
}
.shipping-stat-num {
  font-weight: 700;
  font-size: 1.7rem;
  color: #74685a;
  margin-bottom: 2px;
}
.shipping-stat-label {
  font-size: 0.82rem;
  color: #8f8370;
  letter-spacing: 0.03em;
}
.shipping-jumpnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
}
.shipping-jumpnav a {
  display: inline-block;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  background: var(--color-bg-alt);
  color: #74685a;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.shipping-jumpnav a:hover {
  background: #a48d5b;
  border-color: #a48d5b;
  color: var(--color-white);
}

/* Airmail plane divider, ported from the Where We Ship page: a plane flies
   right-to-left once on load, leaving the classic red/gold airmail stripe
   behind it instead of a static one. Positioned absolutely (not in normal
   flow) in the gap between the fixed header and the "Shipping" title, same
   as the top bar on the Where We Ship page. No overflow:hidden here -- the
   plane icon (48px) is taller than the 8px stripe and must be allowed to
   overflow above/below it, otherwise it gets clipped. */
.shipping-airmail-fly {
  position: absolute;
  top: 105px;
  left: 0;
  right: 0;
  height: 8px;
}
.shipping-airmail-trail {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, #f1429d 0 14px, var(--color-white) 14px 21px, #a48d5b 21px 35px, var(--color-white) 35px 42px);
  clip-path: inset(0 0 0 100%);
  animation: shipping-airmail-trail 6s linear forwards;
}
.shipping-airmail-plane-track {
  position: absolute;
  inset: 0;
  animation: shipping-airmail-plane 6s linear forwards;
}
.shipping-airmail-plane {
  position: absolute;
  top: 50%;
  right: 0;
  width: 48px;
  height: 48px;
  transform: translate(50%, -50%) rotate(-90deg);
}
.shipping-airmail-plane svg { display: block; width: 100%; height: 100%; }
@keyframes shipping-airmail-plane {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% + 40px)); }
}
@keyframes shipping-airmail-trail {
  from { clip-path: inset(0 0 0 100%); }
  to { clip-path: inset(0 0 0 0%); }
}
@media (prefers-reduced-motion: reduce) {
  .shipping-airmail-trail, .shipping-airmail-plane-track { animation: none; }
  .shipping-airmail-trail { clip-path: inset(0); }
  .shipping-airmail-plane-track { display: none; }
}

.shipping-section {
  padding: 56px 0;
  scroll-margin-top: 90px;
}
.shipping-section-alt { background: var(--color-bg-alt); }
/* Linked directly from the cart's UK minimum-order note. */
#uk-orders { scroll-margin-top: 90px; }
.shipping-section-inner {
  max-width: 720px;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
}
.shipping-section-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  color: #a48d5b;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shipping-section-icon svg { width: 24px; height: 24px; }
.shipping-section-body h2 {
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: -.01em;
  margin-bottom: 12px;
  color: #a48d5b;
}
.shipping-section-body p {
  color: #74685a;
  margin-bottom: 1em;
}
.shipping-section-body p:last-child { margin-bottom: 0; }
.shipping-link { color: #ff8ec6; text-decoration: underline; font-weight: 600; }
.shipping-note {
  font-size: 0.9rem;
  color: #8f8370;
  border-left: 3px solid var(--color-line);
  padding-left: 12px;
  margin-top: 1.8em;
  display: grid;
  gap: 2px;
}
.shipping-note p { line-height: 1.3; }
.shipping-note-ja { font-size: 0.78rem; }
.shipping-note-flag {
  font-weight: 700;
  color: #74685a;
}

.shipping-cards {
  display: grid;
  gap: 16px;
  margin-top: 8px;
}
.shipping-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  padding: 18px 20px;
}
.shipping-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  margin-bottom: 6px;
  color: #74685a;
}
.shipping-flag {
  flex: none;
  display: inline-block;
  width: 24px;
  height: 16px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(59, 51, 43, 0.12);
}
.shipping-flag svg { display: block; width: 100%; height: 100%; }
.shipping-card p {
  color: #74685a;
  font-size: 0.95rem;
  margin: 0;
}

@media (max-width: 480px) {
  .shipping-section-inner {
    grid-template-columns: 1fr;
  }
  .shipping-section-icon { margin-bottom: 4px; }
}
@media (min-width: 768px) {
  .shipping-title { font-size: clamp(2.4rem, 4vw, 3rem); }
}

/* ---------- 404 Page ---------- */
.error-404 {
  padding: 180px 0 120px;
  text-align: center;
}
.error-404-code {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 600;
  color: #a48d5b;
  line-height: 1;
  margin-bottom: 10px;
}
.error-404-title {
  font-size: 2rem;
  margin-bottom: 14px;
}
.error-404-text {
  color: var(--color-text-light);
  font-size: 1.05rem;
  max-width: 50ch;
  margin: 0 auto 36px;
}

/* ---------- Thank You Page ---------- */
.thank-you-page {
  padding: 180px 0 120px;
  text-align: center;
}
.thank-you-container { max-width: 560px; }
.thank-you-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  color: var(--color-wood-dark);
}
.thank-you-icon svg { width: 100%; height: 100%; display: block; }
.thank-you-title {
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--color-wood-dark);
  margin-bottom: 14px;
}
.thank-you-text {
  color: var(--color-text-light);
  font-size: 1.05rem;
  margin-bottom: 14px;
}
.thank-you-note {
  color: var(--color-text-light);
  font-size: 0.9rem;
  margin-bottom: 36px;
}
.thank-you-note a {
  color: var(--color-wood-dark);
  text-decoration: underline;
}
.thank-you-note a:hover { color: var(--color-text); }

/* ---------- Cart Page ---------- */
.cart-page { padding: 140px 0 100px; }
.cart-container { max-width: 760px; }
.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}
.cart-title { font-size: 2.2rem; font-weight: 600; color: var(--color-wood-dark); }
.cart-continue-btn { justify-self: center; width: auto; white-space: nowrap; margin-top: 19px; }

.cart-empty { text-align: center; padding: 60px 0; }
.cart-empty p { color: var(--color-text-light); margin-bottom: 24px; font-size: 1.1rem; }

.cart-item {
  display: grid;
  grid-template-columns: 96px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-line);
}
.cart-item-image {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--color-bg-alt);
}
.cart-item-info { min-width: 0; }
.cart-item-name { font-size: 1.15rem; color: var(--color-text); margin-bottom: 4px; }
.cart-item-price { color: var(--color-text-light); font-size: 0.85rem; }
.cart-item-qty { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cart-item-stepper { display: flex; align-items: center; gap: 8px; }
.cart-item-remove {
  background: none;
  border: none;
  color: var(--color-text-light);
  text-decoration: underline;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
}
.cart-item-remove:hover { color: var(--color-text); }
.cart-qty-btn {
  width: 26px;
  height: 26px;
  border: 1px solid var(--color-line);
  background: var(--color-white);
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-wood-dark);
}
.cart-qty-btn:hover { background: var(--color-bg-alt); }
.cart-qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.cart-qty-btn:disabled:hover { background: var(--color-white); }

/* Inventory: "Only N left" under a cart line at its stock limit, and the
   one-off notice when sold-out items were removed from the cart. */
.cart-item-stock {
  font-family: "Figtree", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #a48d5b;
  margin-top: 4px;
}
.cart-stock-notice {
  font-family: "Figtree", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #a48d5b;
  margin-bottom: 16px;
}

/* Collection: sold-out products' Add to Cart button. */
.btn.is-sold-out,
.btn.is-sold-out:hover {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.cart-item-qty-value { min-width: 1.5em; text-align: center; font-variant-numeric: tabular-nums; font-family: "Figtree", sans-serif; font-weight: 400; font-size: 1.1rem; }
.cart-item-total { font-family: "Figtree", sans-serif; font-weight: 400; font-size: 1.1rem; color: var(--color-text); white-space: nowrap; }

.cart-summary {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 2px solid var(--color-line);
  display: grid;
  gap: 14px;
}
.cart-summary-row {
  display: flex;
  justify-content: space-between;
  font-family: "Figtree", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-text);
}
.cart-summary-row[hidden] { display: none; }
.cart-ship-row { align-items: center; gap: 16px; }
.cart-country-select {
  min-width: 0;
  max-width: 60%;
  padding: 8px 36px 8px 14px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2374685a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
  appearance: none;
  -webkit-appearance: none;
  font-family: "Figtree", sans-serif;
  font-size: 1rem;
  color: var(--color-text);
  cursor: pointer;
}
.cart-country-select:focus-visible { outline: 2px solid var(--color-wood-dark); outline-offset: 2px; }
.cart-total-row {
  padding-top: 14px;
  border-top: 1px solid var(--color-line);
  font-weight: 600;
}
.cart-prepaid-note {
  font-family: "Figtree", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #a48d5b;
}
.cart-prepaid-note[hidden] { display: none; }
.cart-import-note { font-size: 0.95rem; font-weight: 300; }
.cart-summary-note { font-size: 0.85rem; color: var(--color-text-light); }
.cart-summary-note a { color: var(--color-wood-dark); text-decoration: underline; }
.cart-summary-note a:hover { color: var(--color-text); }
.cart-minimum-note {
  font-family: "Figtree", sans-serif;
  font-size: 0.95rem;
  color: #a48d5b;
  font-weight: 600;
}
.cart-minimum-note[hidden] { display: none; }
.cart-minimum-note a { color: #ff8ec6; text-decoration: underline; }
.cart-minimum-note a:hover { color: #f1429d; }
.cart-checkout-btn {
  width: 100%;
  text-align: center;
  background: #ff8ec6;
  border-color: #ff8ec6;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 600;
  box-shadow:
    0 4px 8px color-mix(in srgb, #f1429d 40%, transparent),
    inset 0 2px 0 color-mix(in srgb, white 60%, transparent),
    inset 0 -2px 4px color-mix(in srgb, #f1429d 25%, transparent);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.cart-checkout-btn:hover {
  background: #f1429d;
  border-color: #f1429d;
  transform: translateY(1px);
  box-shadow:
    0 2px 4px color-mix(in srgb, #f1429d 40%, transparent),
    inset 0 2px 0 color-mix(in srgb, white 45%, transparent),
    inset 0 -2px 4px color-mix(in srgb, #a82450 30%, transparent);
}
.cart-checkout-btn:disabled,
.cart-checkout-btn:disabled:hover {
  background: #ff8ec6;
  border-color: #ff8ec6;
  opacity: 0.45;
  transform: none;
  cursor: not-allowed;
}
.cart-checkout-wrap { position: relative; }
.cart-checkout-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--color-wood-dark);
  color: var(--color-white);
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  z-index: 2;
}
.cart-checkout-msg[hidden] { display: none; }

@media (max-width: 480px) {
  .cart-item { grid-template-columns: 96px 1fr; grid-template-areas: "image info" "image qty" "image total"; }
  .cart-item-image { grid-area: image; }
  .cart-item-info { grid-area: info; }
  .cart-item-qty { grid-area: qty; }
  .cart-item-total { grid-area: total; text-align: right; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-line);
  padding: 60px 0 34px;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.footer-brand p:last-child {
  color: var(--color-text-light);
  font-size: 0.92rem;
  margin-top: 8px;
}
.footer-top {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.footer-links-group {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col-title {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-wood-dark);
  margin-bottom: 4px;
}
.footer-col a {
  color: var(--color-text-light);
  font-size: 0.92rem;
}
.footer-col a:hover { color: var(--color-text); }
.footer-col a.footer-link-highlight {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-wood-dark);
}
.footer-col a.footer-link-highlight:hover { color: var(--color-text); }
.footer-copy {
  color: var(--color-text-light);
  font-size: 0.82rem;
  padding-top: 24px;
  border-top: 1px solid var(--color-line);
}

/* ================================================
   Tablet and up
   ================================================ */
@media (min-width: 768px) {
  .quad-photo-grid { grid-template-columns: 1fr 1fr; }
  .quad-photo-caption { font-size: 2.2rem; }

  /* How to Use, tablet/desktop: content + photo side by side, photo
     always on the left. */
  .how-to-step {
    flex-direction: row-reverse;
    align-items: center;
    gap: 60px;
  }
  /* Trying this one block reversed: text on the left, photo on the right. */
  .how-to-step-no-number {
    flex-direction: row;
  }
  .how-to-content,
  .how-to-image {
    flex: 1;
    min-width: 0;
  }
  .how-to-section-title { font-size: 2.6rem; margin-top: 20px; margin-bottom: 70px; }
  .how-to-number { font-size: 2.4rem; }
  .how-to-text { font-size: 1.2rem; }
  .how-to-note { font-size: 1.2rem; }
  .caring-for-brush .how-to-note { font-size: 1.1rem; }
  .caring-for-brush .how-to-text + .how-to-note { margin-top: 40px; }
  /* Line up with the right-hand "description" column of the steps above
     (each column is (100% - gap) / 2, with the gap being how-to-step's 60px). */
  .how-to-notes {
    width: calc(50% - 30px);
    margin-left: auto;
  }

  .visitor-notice-image { max-width: 240px; margin-top: 60px; }
  .visitor-notice { padding: 120px 0; }

  .visitor-notice h2 { font-size: 2.4rem; margin-bottom: 56px; }
  .visitor-notice p { font-size: 1.3rem; }

  .legacy-story { padding: 120px 0; }
  .legacy-story-title { font-size: 2.4rem; margin-bottom: 56px; }
  .legacy-story p { font-size: 1.3rem; }
  .legacy-insert-note {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero { height: 90vh; }
  .hero-contact { height: 50vh; }
  .hero-withdraw {
    height: 50vh;
    max-width: 900px;
    margin: 0 auto;
  }
  .hero-title { font-size: 2.8rem; }
  .hero-tagline { display: none; }
  .hero-stack { display: none; }
  .hero-logo {
    left: 50%;
    top: 62%;
  }
  .hero-logo img { height: 48px; }
  .page-legacy .hero-logo img { height: 30px; }
  .hero-eyebrow {
    bottom: 18%;
    font-size: 1rem;
    letter-spacing: 0.18em;
    margin-bottom: 14px;
  }

  .collection-preview h2 { font-size: 2.4rem; }

  .experience-note { padding: 80px 0; }
  .experience-note p { font-size: 1.6rem; }

  .photo-compare-heading { font-size: 2.6rem; }
  .photo-compare-row {
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
  }
  .photo-compare-arrow svg { width: 86px; height: 86px; }
  .photo-compare-arrow svg path { stroke-width: 2.6; }
  .photo-compare-caption { font-size: 2.4rem; }
  .photo-compare-note { font-size: 1.6rem; }
  .text-feature p { font-size: 1.6rem; }

  .product-info {
    background: none;
    padding: 0;
    padding-left: 4px;
    box-shadow: none;
  }
  .product-image-bottom {
    margin-bottom: 18px;
  }

  .single-photo-fluffy .photo-caption { font-size: 2.6rem; right: 3%; top: 5%; text-align: center; }
  .single-photo-a .photo-caption { font-size: 2.6rem; right: 3%; top: 5%; text-align: center; }

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

  .product-preview-inner {
    flex-direction: row;
    align-items: center;
    gap: 60px;
  }
  .product-preview-media { margin: 0; flex: 1; max-width: none; }
  .product-preview-info { flex: 1; text-align: left; }
  .product-preview-info p { font-size: 1.1rem; }
  .product-preview-recap { display: none; }
  .product-preview-purchase {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
  }

  .footer-top {
    flex-direction: row;
    justify-content: space-between;
  }
  .footer-links-group {
    flex-direction: row;
    gap: 64px;
  }
}

/* ================================================
   Desktop and up
   ================================================ */
@media (min-width: 1024px) {
  .hero-title { font-size: 3.2rem; }
  .hero-pc-tagline { font-size: 4.6rem; }

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