/* ============================================================
   FlowZella — Master Stylesheet
   "Chic & Modern Digital PDF Sewing Patterns for Every Stage."
   ------------------------------------------------------------
   Structure:
   1.  Design tokens (color, type, spacing, motion)
   2.  Reset & base
   3.  Typography scale
   4.  Signature: the running-stitch system
   5.  Tailoring SVG accents
   6.  Buttons & links
   7.  Header / navigation
   8.  Hero
   9.  Product cards + scrollable gallery
   10. How It Works (real 3-step sequence)
   11. FAQ accordion
   12. Blog cards
   13. Footer
   14. Utilities, responsive, reduced-motion, focus
   ============================================================ */

/* 1. DESIGN TOKENS ----------------------------------------- */
:root {
  /* Brand palette (locked to brief) */
  --cream:       #FDFBF7;  /* fabric / page */
  --coral:       #F88379;  /* primary thread */
  --gold:        #DAA520;  /* accent thread */
  --espresso:    #2C2C2C;  /* ink / text */

  /* Derived tones */
  --coral-deep:  #E4685C;  /* hover / pressed coral */
  --gold-soft:   #C99A2E;  /* readable gold on cream */
  --blush:       #FBEDE7;  /* card tint */
  --blush-deep:  #F6DED4;  /* nested tint */
  --taupe:       #877E73;  /* muted secondary text */
  --line:        #EBE3D7;  /* hairlines */
  --ink-70:      #55524D;  /* body text softened */

  /* Type */
  --font-display: "Cormorant Garamond", "Hoefler Text", Garamond, Georgia, serif;
  --font-body:    "Mulish", "Avenir Next", system-ui, -apple-system, sans-serif;
  --tracking-label: 0.24em;

  /* Fluid type scale (Cormorant reads smaller per point, so sized up a touch) */
  --fs-hero:  clamp(2.6rem, 6vw, 5rem);
  --fs-h2:    clamp(1.9rem, 3.8vw, 3rem);
  --fs-h3:    clamp(1.3rem, 2vw, 1.6rem);
  --fs-lead:  clamp(1.05rem, 1.4vw, 1.2rem);
  --fs-body:  1.02rem;
  --fs-sm:    0.86rem;
  --fs-label: 0.72rem;

  /* Spacing */
  --pad-x: clamp(1.2rem, 5vw, 6rem);
  --sec-y: clamp(2.2rem, 4.5vw, 4.2rem);
  --gap:   clamp(1.2rem, 2.4vw, 2rem);

  /* Structure */
  --maxw: 1240px;
  --radius: 18px;
  --radius-sm: 12px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.55s;

  --shadow: 0 24px 60px -34px rgba(44, 44, 44, 0.32);
  --shadow-sm: 0 12px 30px -22px rgba(44, 44, 44, 0.4);
}

/* 2. RESET & BASE ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--espresso);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
section { padding-block: var(--sec-y); }

/* 3. TYPOGRAPHY -------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.005em;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: 0; }

p { color: var(--ink-70); max-width: 62ch; }
.lead { font-size: var(--fs-lead); color: var(--ink-70); line-height: 1.55; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 0;
  border-top: 1.5px dashed var(--gold);
}

.serif-accent { font-style: italic; color: var(--coral-deep); }

/* Section heading block */
.sec-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.sec-head .eyebrow { margin-bottom: 1rem; }
.sec-head p { margin-top: 1rem; }

/* 4. SIGNATURE: RUNNING-STITCH SYSTEM ---------------------- */
/* A tuned dashed "thread" — length & gap chosen to read as hand
   running-stitch rather than a generic dashed border. Two weights:
   coral (primary) and gold (accent). Elements can also carry an
   animated SVG frame that "sews itself" (see .stitch-svg / .sew). */

.stitched {
  position: relative;
  border-radius: var(--radius);
  background: #fff;
}
/* Inset thread drawn with a pseudo-element so it never clips content
   and can sit slightly inside the card edge like real topstitching. */
.stitched::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1.6px dashed var(--coral);
  border-radius: calc(var(--radius) - 8px);
  pointer-events: none;
  opacity: 0.85;
}
.stitched--gold::after { border-color: var(--gold); }
.stitched--tight::after { inset: 6px; border-radius: calc(var(--radius) - 4px); }

/* Animated SVG stitch frame (used on hero + featured card) */
.stitch-svg { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; }
.stitch-svg rect {
  fill: none;
  stroke: var(--coral);
  stroke-width: 1.8;
  stroke-dasharray: 7 6;
  stroke-linecap: round;
}
.sew rect {
  stroke-dashoffset: 1600;
  animation: sew 2.6s var(--ease) forwards;
}
@keyframes sew { to { stroke-dashoffset: 0; } }

/* Simple stitched divider line */
.stitch-rule {
  height: 0;
  border-top: 1.6px dashed var(--line);
  margin-block: clamp(2rem, 5vw, 4rem);
}
.stitch-rule--coral { border-color: var(--coral); opacity: 0.55; }

/* 5. TAILORING SVG ACCENTS --------------------------------- */
.tailor-ico { width: 1.5em; height: 1.5em; stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Measuring-tape divider: ticks encode "measurement", not decoration */
.tape-divider { position: relative; height: 34px; margin-block: 1rem; }
.tape-divider svg { width: 100%; height: 100%; }
.tape-divider line { stroke: var(--line); stroke-width: 1.4; }

/* 6. BUTTONS & LINKS --------------------------------------- */
.btn {
  --bg: var(--coral);
  --fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.92em 1.8em;
  background: var(--bg);
  color: var(--fg);
  border: none;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
  box-shadow: 0 12px 26px -14px rgba(232, 106, 92, 0.75);
}
.btn:hover { background: var(--coral-deep); transform: translateY(-2px);
  box-shadow: 0 18px 34px -14px rgba(232, 106, 92, 0.8); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --bg: transparent; --fg: var(--espresso);
  box-shadow: none;
  border: 1.6px dashed var(--espresso);
  padding: 0.86em 1.7em;
}
.btn--ghost:hover { background: var(--espresso); --fg: var(--cream);
  border-color: var(--espresso); box-shadow: none; }

.btn--gold { --bg: var(--gold); box-shadow: 0 12px 26px -14px rgba(218,165,32,0.7); }
.btn--gold:hover { --bg: var(--gold-soft); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-weight: 600; color: var(--coral-deep);
  border-bottom: 1.6px dashed transparent;
  transition: gap var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link-arrow:hover { gap: 0.75em; border-color: var(--coral); }

/* 7. HEADER / NAVIGATION ----------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1.5px dashed var(--line);
  /* Force this sticky element onto its own GPU compositing layer. Some
     Android WebViews mis-paint position:sticky/fixed elements that also
     use backdrop-filter — they render correctly only after a manual
     zoom/repaint, which looks like a "gap" between header and content
     until the user interacts with the page. translateZ(0) forces the
     browser to composite it correctly from first paint. */
  transform: translateZ(0);
  backface-visibility: hidden;
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: 74px;
}
.brand { display: flex; align-items: center; gap: 0.6rem; font-family: "Outfit", var(--font-body);
  font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.brand .brand-mark { height: 46px; width: auto; flex: none; }
.brand b { color: var(--coral-deep); font-weight: 800; }

.nav-links { display: flex; align-items: center; gap: 1.85rem; }
.nav-links a {
  font-size: 0.95rem; font-weight: 500; color: var(--ink-70);
  position: relative; padding-block: 0.4rem;
  transition: color var(--dur) var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  border-top: 1.5px dashed var(--coral);
  transition: right var(--dur) var(--ease);
}
.nav-links a:hover { color: var(--espresso); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { right: 0; }

.nav-actions { display: flex; align-items: center; gap: 1rem; }
.cart-btn { display: inline-flex; align-items: center; gap: 0.5rem;
  background: none; border: none; cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.cart-count { min-width: 1.4em; height: 1.4em; padding: 0 0.35em;
  display: grid; place-items: center; border-radius: 100px;
  background: var(--coral); color: #fff; font-size: 0.72rem; font-weight: 700; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer;
  width: 44px; height: 44px; position: relative; z-index: 1001; }
.nav-toggle span { display: block; width: 24px; height: 1.8px; background: var(--espresso);
  margin: 5px auto; transition: transform var(--dur) var(--ease), opacity var(--dur); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

/* 8. HERO -------------------------------------------------- */
.hero { position: relative; padding-block: clamp(2rem, 4.5vw, 3.8rem); overflow: hidden; }
.hero-inner { position: relative; z-index: 2; }
/* Full-bleed background video — desktop only (added via media query below).
   Hidden by default so mobile never loads or renders it at all. */
.hero-bg-video { display: none; }
.hero-fade { display: none; }
.hero h1 { margin-block: 0.7rem 0.9rem; }
.hero h1 .thread-word { position: relative; white-space: nowrap; color: var(--coral-deep);
  font-style: italic; font-weight: 500; }
.hero .lead { margin-bottom: 1.3rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.hero-trust { display: flex; gap: 1.6rem; margin-top: 1.5rem; flex-wrap: wrap; }
.hero-trust span { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm);
  color: var(--taupe); font-weight: 500; }
.hero-trust svg { color: var(--gold); }

/* ---- Desktop: full-bleed video with a "Degradé" gradient mask ----
   Solid site-background covers the text's ~45% on the left, then melts
   smoothly into full transparency so the video reads clearly on the
   right — editorial fashion-magazine treatment. */
@media (min-width: 901px) {
  .hero { min-height: 640px; display: flex; align-items: center; padding-block: 0; }
  .hero-bg-video {
    display: block; position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; object-fit: cover;
    /* Fades in once truly ready to play (JS toggles .is-ready) instead of
       popping in abruptly at a different moment on every browser/device —
       same smooth appearance everywhere regardless of load speed. */
    opacity: 0; transition: opacity 0.5s ease;
  }
  .hero-bg-video.is-ready { opacity: 1; }
  .hero-fade {
    display: block; position: absolute; inset: 0; z-index: 1;
    /* rgba fallback first (works in every browser); color-mix only
       refines it further where supported. Using color-mix alone risks
       the whole gradient silently failing on older browsers/WebViews,
       which is why the hero could look different across browsers. */
    background: linear-gradient(
      to right,
      rgba(253,251,247,1) 0%,
      rgba(253,251,247,1) 40%,
      rgba(253,251,247,0.65) 55%,
      rgba(253,251,247,0) 78%
    );
  }
  .hero-copy { max-width: 560px; }
}

/* 9. PRODUCT CARDS + SCROLLABLE GALLERY -------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}
@media (max-width: 360px) {
  .product-grid { grid-template-columns: 1fr; }
}
@media (min-width: 641px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 901px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1500px) {
  .product-grid { grid-template-columns: repeat(5, 1fr); }
}
.product-card {
  position: relative; background: #fff; border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  display: flex; flex-direction: column;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

/* Horizontal-scroll gallery (2–3 images, scroll-snap) */
.gallery {
  position: relative; overflow: hidden;
  display: flex; gap: 0; scroll-snap-type: x mandatory;
  overflow-x: auto; scrollbar-width: none; aspect-ratio: 4 / 3; background: var(--blush);
}
.gallery::-webkit-scrollbar { display: none; }
.gallery .slide { flex: 0 0 100%; scroll-snap-align: center; position: relative;
  background: var(--blush); }
.gallery .slide img { width: 100%; height: 100%; object-fit: cover; }
/* Placeholder motif when no photo yet */
.gallery .slide.placeholder { display: grid; place-items: center; color: var(--coral);
  background: linear-gradient(150deg, var(--blush), var(--blush-deep)); }

/* Deliberately visible "broken image" state — used instead of a neutral
   icon so a missing/failed photo is always obvious, never mistaken for
   intentional design. */
.slide.placeholder.img-unavailable {
  display: flex; flex-direction: column; gap: 0.5rem;
  background: repeating-linear-gradient(135deg, var(--blush) 0 10px, var(--blush-deep) 10px 20px);
}
.slide.placeholder.img-unavailable span {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--coral-deep); text-transform: uppercase;
}

.gallery-dots { position: absolute; bottom: 12px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px; z-index: 3; }
.gallery-dots button { width: 7px; height: 7px; border-radius: 100px; border: none;
  background: rgba(255,255,255,0.6); cursor: pointer; padding: 0; transition: all var(--dur); }
.gallery-dots button[aria-selected="true"] { background: #fff; width: 20px; }

.product-tag { position: absolute; top: 20px; left: 20px; z-index: 3;
  background: var(--gold); color: #fff; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 0.35em 0.75em;
  border-radius: 100px; }

.product-body { padding: 0.9rem 0.9rem 0.85rem; display: flex; flex-direction: column;
  flex: 1; }
.product-cat { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--taupe); }
.product-card h3 { margin: 0.25rem 0 0.35rem; font-size: 0.98rem;
  font-weight: 500; line-height: 1.3; letter-spacing: 0; color: var(--espresso); }
.product-card p { font-size: var(--fs-sm); color: var(--ink-70); margin-bottom: 1rem; }
.product-formats { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.format-chip { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 0.28em 0.6em; border-radius: 6px; border: 1.4px dashed var(--line);
  color: var(--taupe); }
.product-foot { display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 0.5rem; }
.price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  color: var(--espresso); }
.price small { font-size: 0.8rem; color: var(--taupe); font-family: var(--font-body);
  font-weight: 500; }

/* 10. HOW IT WORKS (genuine 3-step sequence — numbering earns its place) */
.steps { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem); position: relative; }
.step { position: relative; padding-top: 1rem; }
.step-num { font-family: var(--font-display); font-size: 3.4rem; font-weight: 600;
  color: var(--blush-deep); line-height: 1; }
.step-ico { width: 48px; height: 48px; margin: 0.6rem 0 1rem; object-fit: contain;
  fill: none; stroke: #D32F2F; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.step h3 { margin-bottom: 0.6rem; }
.step p { font-size: var(--fs-sm); }

/* 11. FAQ ACCORDION ---------------------------------------- */
.faq-list { display: grid; gap: 0.9rem; max-width: 60rem; }
.faq-item { background: #fff; border-radius: var(--radius-sm);
  border: 1.5px dashed var(--line); overflow: hidden;
  transition: border-color var(--dur) var(--ease); }
.faq-item[open] { border-color: var(--coral); }
.faq-item summary { cursor: pointer; list-style: none; padding: 1.2rem 1.4rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--font-display); font-size: 1.28rem; font-weight: 600; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus { flex: none; width: 26px; height: 26px; position: relative; }
.faq-item summary .plus::before,
.faq-item summary .plus::after { content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--coral); transition: transform var(--dur) var(--ease); }
.faq-item summary .plus::before { width: 14px; height: 1.8px; }
.faq-item summary .plus::after { width: 1.8px; height: 14px; }
.faq-item[open] summary .plus::after { transform: scaleY(0); }
.faq-answer { padding: 0 1.4rem 1.35rem; }
.faq-answer p { font-size: var(--fs-sm); }
.faq-answer a { color: var(--coral-deep); font-weight: 600;
  border-bottom: 1.4px dashed var(--coral); }

/* 12. BLOG CARDS ------------------------------------------- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(1.4rem, 2.6vw, 2rem); }
.blog-card { background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.blog-thumb { aspect-ratio: 16/10; background: linear-gradient(150deg, var(--blush), var(--blush-deep));
  display: grid; place-items: center; color: var(--coral); overflow: hidden; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.blog-meta { font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-soft); font-weight: 600; margin-bottom: 0.5rem; }
.blog-card h3 { font-size: 1.15rem; font-weight: 500; line-height: 1.28; margin-bottom: 0.4rem; }
.blog-card p { font-size: var(--fs-sm); margin-bottom: 0.8rem; }
.blog-card .link-arrow { margin-top: auto; }

/* 13. FOOTER ----------------------------------------------- */
.site-footer { background: var(--espresso); color: var(--cream);
  padding-block: clamp(2.2rem, 4.5vw, 4rem) 2rem; }
.site-footer a { color: var(--cream); opacity: 0.78; transition: opacity var(--dur); }
.site-footer a:hover { opacity: 1; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1.5px dashed rgba(253,251,247,0.18); }
.footer-brand .brand { color: var(--cream); margin-bottom: 1rem; }
.footer-brand p { color: rgba(253,251,247,0.66); max-width: 34ch; font-size: var(--fs-sm); }
.footer-col h4 { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2rem; }
.footer-col ul { display: grid; gap: 0.7rem; }
.footer-col a { font-size: 0.92rem; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap; padding-top: 2rem; font-size: var(--fs-sm);
  color: rgba(253,251,247,0.6); }
.footer-legal { display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* 14. UTILITIES / REVEAL / RESPONSIVE / A11Y ---------------- */
.reveal { opacity: 0; transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

.center { text-align: center; }
.mt-2 { margin-top: 2rem; } .mb-0 { margin-bottom: 0; }

/* Skip link */
.skip-link { position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--espresso); color: var(--cream); padding: 0.8em 1.2em; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }

  .nav-links, .nav-actions .cart-label { display: none; }
  .nav-toggle { display: block; }
  .nav[data-open="true"] .nav-links {
    display: flex; flex-direction: column; align-items: stretch;
    position: fixed; inset: 0; top: 0;
    min-height: 100vh; min-height: 100dvh;
    padding: calc(74px + 1.5rem) var(--pad-x) 2rem;
    z-index: 1000; /* above everything, including the buy-bar (999) */
    /* Solid off-white background — the reliable, guaranteed fix so hero
       text can never show or clash through the menu on any device.
       backdrop-filter is layered on top only as a bonus polish; it has
       no effect on legibility since the background beneath is already
       fully opaque. */
    background: var(--cream);
    backdrop-filter: saturate(140%) blur(16px);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
    animation: navIn 0.28s var(--ease) both;
  }
  @keyframes navIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
  .nav[data-open="true"] .nav-links a {
    width: 100%; padding: 1.15rem 0; font-size: 1.15rem;
    border-bottom: 1.5px dashed rgba(235,227,215,0.7);
  }
  .nav[data-open="true"] .nav-links li:last-child a { border-bottom: none; }
  body.nav-open { overflow: hidden; } /* lock background scroll while the menu is open */
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .hero-trust { gap: 1rem; }
  .btn { width: 100%; justify-content: center; }
  .hero-cta { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .sew rect { stroke-dashoffset: 0; }
}

/* ============================================================
   SHOP + DETAIL COMPONENTS (patterns.html / pattern-detail.html)
   ============================================================ */

/* Difficulty badges (color-coded) */
.badge { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-body);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.32em 0.7em; border-radius: 100px; }
.badge--beginner    { background: #E8F3EA; color: #2E7D46; }
.badge--intermediate{ background: #FBF1DD; color: #9A6B12; }
.badge--advanced    { background: #F7E4E1; color: #B23A2C; }

/* Page header with result count */
.page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; overflow-wrap: break-word; }
.page-head h1 { margin-bottom: 0.5rem; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.15; }
.page-head > p { max-width: 52ch; }
.result-count { color: var(--taupe); font-size: var(--fs-sm); }

/* Shop layout: sidebar + grid */
.shop-layout { display: grid; grid-template-columns: minmax(280px, 23%) 1fr; gap: clamp(1.1rem, 2vw, 1.8rem);
  align-items: start; }
.shop-layout > * { min-width: 0; }
.filter-panel { position: sticky; top: 92px; background: #fff; border-radius: var(--radius);
  border: 1.5px dashed var(--line); padding: 1.1rem;
  max-height: calc(100vh - 92px - 2rem); overflow-y: auto; }
.results-col { padding-top: 1.1rem; }
.filter-panel h2 { font-size: 1.1rem; font-family: var(--font-body); font-weight: 700;
  letter-spacing: 0.02em; margin-bottom: 0.4rem; }
.filter-panel__head { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.9rem; }
.filter-panel__back { all: unset; display: flex; align-items: center; gap: 0.5rem;
  cursor: default; color: var(--espresso); }
.filter-panel__back svg { display: none; }
.filter-panel__back h2 { margin-bottom: 0; }
.filter-panel__x { display: none; }
.filter-overlay { display: none; }
.filter-group { border-top: 1.5px dashed var(--line); padding-block: 1rem; }
.filter-group:first-of-type { border-top: none; }
.filter-group > button { all: unset; cursor: pointer; display: flex; width: 100%;
  align-items: center; justify-content: space-between; font-weight: 600; font-size: 0.92rem; }
.filter-group > button .chev { transition: transform var(--dur) var(--ease); }
.filter-group[data-open="false"] > button .chev { transform: rotate(-90deg); }
.filter-group[data-open="false"] .filter-options { display: none; }
.filter-options { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.9rem; }
.filter-options.chips { flex-direction: row; flex-wrap: wrap; gap: 0.4rem; }

/* Custom checkbox */
.check { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: 0.9rem;
  color: var(--ink-70); text-transform: capitalize; min-width: 0; }
.check span:last-child { overflow-wrap: break-word; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box { width: 18px; height: 18px; border: 1.6px solid var(--line); border-radius: 5px;
  display: grid; place-items: center; transition: all var(--dur) var(--ease); flex: none; }
.check .box svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; fill: none;
  opacity: 0; }
.check input:checked + .box { background: var(--coral); border-color: var(--coral); }
.check input:checked + .box svg { opacity: 1; }
.check input:focus-visible + .box { outline: 2.5px solid var(--gold); outline-offset: 2px; }

/* Size/price chips as filters */
.chip-filter { cursor: pointer; }
.chip-filter input { position: absolute; opacity: 0; }
.chip-filter span { display: inline-block; padding: 0.35em 0.7em; border-radius: 100px;
  border: 1.5px dashed var(--line); font-size: 0.78rem; font-weight: 600; color: var(--taupe);
  transition: all var(--dur) var(--ease); }
.chip-filter input:checked + span { background: var(--espresso); color: var(--cream);
  border-style: solid; border-color: var(--espresso); }

/* Toolbar: active pills + sort */
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 0.9rem; }
.active-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 0.4em; background: var(--blush);
  color: var(--coral-deep); font-size: 0.78rem; font-weight: 600; padding: 0.35em 0.4em 0.35em 0.8em;
  border-radius: 100px; }
.pill button { all: unset; cursor: pointer; width: 18px; height: 18px; display: grid;
  place-items: center; border-radius: 100px; background: rgba(228,104,92,0.15); font-size: 0.9rem;
  line-height: 1; }
.pill button:hover { background: var(--coral); color: #fff; }
.pill--clear { background: none; color: var(--taupe); text-decoration: underline; padding: 0.35em; }

.sort-wrap { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--taupe); }
.sort-wrap select { font-family: var(--font-body); font-size: 0.88rem; font-weight: 600;
  color: var(--espresso); background: #fff; border: 1.5px dashed var(--line); border-radius: 100px;
  padding: 0.55em 2.2em 0.55em 1em; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232C2C2C' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9em center; }

/* Mobile filter trigger */
.filter-trigger { display: none; }

/* Listing card extras (reuses .product-card) */
.card-meta { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  margin-bottom: 0.7rem; font-size: 0.78rem; color: var(--taupe); }
.card-meta .time { display: inline-flex; align-items: center; gap: 0.35em; }
.card-sizes { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.2rem; }
.size-pill { font-size: 0.66rem; font-weight: 600; color: var(--taupe);
  border: 1.3px dashed var(--line); border-radius: 5px; padding: 0.15em 0.45em; }
.product-card a.card-link { position: absolute; inset: 0; z-index: 1; }
.product-card .btn, .product-card .link-arrow { position: relative; z-index: 2; }

/* Empty state + load more */
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--taupe); }
.empty-state svg { width: 54px; height: 54px; color: var(--blush-deep); margin-bottom: 1rem; }
.load-more-wrap { text-align: center; margin-top: 2.5rem; }

/* Skeleton loader */
.skeleton { border-radius: var(--radius); background: linear-gradient(100deg,
  var(--blush) 30%, var(--blush-deep) 50%, var(--blush) 70%); background-size: 200% 100%;
  animation: shimmer 1.3s infinite; aspect-ratio: 4/5; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---- Pattern detail ---- */
.breadcrumb { display: flex; gap: 0.5rem; flex-wrap: wrap; font-size: var(--fs-sm);
  color: var(--taupe); padding-block: 1.4rem; }
.breadcrumb a { color: var(--taupe); border-bottom: 1.3px dashed transparent; }
.breadcrumb a:hover { color: var(--coral-deep); border-color: var(--coral); }
.breadcrumb .sep { opacity: 0.5; }

.detail-grid { display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 4vw, 4rem); align-items: start; }

/* Detail gallery */
.detail-gallery .main-img { position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4/5; background: linear-gradient(150deg, var(--blush), var(--blush-deep));
  display: grid; place-items: center; color: var(--coral); cursor: zoom-in; box-shadow: var(--shadow-sm); }
.detail-gallery .main-img svg { width: 88px; height: 88px; }
.detail-gallery .main-img img { width: 100%; height: 100%; object-fit: cover; }
.thumb-strip { display: flex; gap: 0.6rem; margin-top: 0.8rem; }
.thumb-strip button { flex: 0 0 72px; aspect-ratio: 1; border-radius: var(--radius-sm);
  border: 2px solid transparent; overflow: hidden; cursor: pointer; padding: 0;
  background: linear-gradient(150deg, var(--blush), var(--blush-deep)); display: grid;
  place-items: center; color: var(--coral); transition: border-color var(--dur) var(--ease); }
.thumb-strip button[aria-current="true"] { border-color: var(--coral); }
.thumb-strip button svg { width: 28px; height: 28px; }

.detail-info .subtitle { color: var(--coral-deep); font-style: italic;
  font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 1rem; }
.quick-info { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center;
  padding: 1rem 0; border-block: 1.5px dashed var(--line); margin-bottom: 1.4rem; }
.quick-info .price-from { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600;
  margin-left: auto; }
.quick-info .price-from small { font-family: var(--font-body); font-size: 0.8rem;
  color: var(--taupe); font-weight: 500; }

/* ---- Detail page: gallery + compact purchase side-by-side, title
   full-width below (not a giant heading beside the images) ----
   Same 3 children reused: .detail-gallery / .detail-purchase /
   .detail-titleblock. DOM order is gallery, title, purchase (a
   sensible default and the exact order wanted on mobile); on desktop
   we simply place them explicitly on the grid instead of relying on
   source order, so gallery+purchase sit on row 1 and the title
   spans both columns on row 2. */
.detail-gallery { grid-column: 1; grid-row: 1; }
.detail-purchase { grid-column: 2; grid-row: 1; }
.detail-titleblock { grid-column: 1 / -1; grid-row: 2; }

.detail-titleblock .subtitle { color: var(--coral-deep); font-style: italic;
  font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 0.8rem; }
/* Moderate, elegant, premium size — replaces the old giant --fs-hero
   heading. Not gated behind a mobile breakpoint, so it's fixed at
   every viewport width, not just on small phones. */
.detail-title { font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1.15;
  letter-spacing: -0.01em; margin: 0.4rem 0 0.3rem; }

.spec-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.9rem 1.5rem; margin: 1.3rem 0; padding: 1.1rem 0; border-block: 1.5px dashed var(--line); }
.spec-list dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--taupe); margin-bottom: 0.2rem; }
.spec-list dd { margin: 0; font-size: 0.94rem; color: var(--espresso); }

/* ---- Compact purchase panel (replaces the old huge title column) ---- */
.detail-purchase { background: #fff; border: 1.5px dashed var(--line); border-radius: var(--radius);
  padding: 1.4rem; }
.direct-buy__label { display: block; font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe); margin-bottom: 0.6rem; }
.direct-buy__row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.3rem; }
.direct-buy__price { font-family: var(--font-display); font-size: 2rem; font-weight: 700;
  color: var(--coral-deep); }
.direct-buy__btn { flex: 1; justify-content: center; font-weight: 700;
  --bg: #2E7D5B; box-shadow: 0 12px 26px -14px rgba(46,125,91,0.55); }
.direct-buy__btn:hover { --bg: #256B4C; }
.secure-payment { display: flex; align-items: center; gap: 0.4em; font-size: 0.78rem;
  color: var(--taupe); margin: -0.6rem 0 1rem; }
.secure-payment svg { color: var(--taupe); flex: none; }
.purchase-divider, .purchase-lead { font-size: 0.82rem; color: var(--taupe); margin-bottom: 0.8rem; }
.market-buttons { display: flex; flex-direction: column; gap: 0.6rem; }
.market-buttons .btn { justify-content: center; }

@media (max-width: 900px) {
  .detail-gallery, .detail-purchase, .detail-titleblock { grid-column: auto; grid-row: auto; }
  .detail-purchase { margin-top: 1.2rem; }
}

.included-list { display: grid; gap: 0.7rem; margin: 1.2rem 0; }
.included-list li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.92rem;
  color: var(--ink-70); }
.included-list svg { width: 20px; height: 20px; color: var(--gold-soft); flex: none; margin-top: 2px; }

/* Section blocks in detail */
.detail-section { margin-top: clamp(2.5rem, 5vw, 4rem); }
.detail-section h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1.2rem; }

/* Size chart table */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1.5px dashed var(--line); }
table.size-chart { width: 100%; border-collapse: collapse; min-width: 420px; }
table.size-chart th, table.size-chart td { padding: 0.85em 1em; text-align: left;
  font-size: 0.9rem; border-bottom: 1px solid var(--line); }
table.size-chart thead th { background: var(--blush); font-family: var(--font-body);
  font-weight: 700; color: var(--espresso); font-size: 0.78rem; letter-spacing: 0.05em;
  text-transform: uppercase; }
table.size-chart tbody tr:last-child td { border-bottom: none; }
table.size-chart tbody tr:hover { background: var(--cream); }
table.size-chart td:first-child { font-weight: 700; color: var(--espresso); }

/* Printing formats */
.format-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem; }
.format-card { border: 1.5px dashed var(--line); border-radius: var(--radius-sm); padding: 1.1rem;
  text-align: center; }
.format-card .fmt { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  color: var(--coral-deep); }
.format-card p { font-size: 0.8rem; margin: 0.3rem auto 0; }

/* Related scroller */
.related-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr);
  gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem;
  scrollbar-width: thin; }
.related-scroll > * { scroll-snap-align: start; }

/* Sticky mobile buy bar */
.buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none;
  gap: 1rem; align-items: center; justify-content: space-between; padding: 0.8rem var(--pad-x);
  background: color-mix(in srgb, var(--cream) 94%, transparent); backdrop-filter: blur(12px);
  border-top: 1.5px dashed var(--line);
  transform: translateZ(0); backface-visibility: hidden; }
.buy-bar .price-from { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(44,44,44,0.92);
  display: none; place-items: center; padding: 2rem; }
.lightbox[data-open="true"] { display: grid; }
.lightbox img, .lightbox .lb-placeholder { max-width: min(90vw, 720px); max-height: 84vh;
  border-radius: var(--radius); }
.lightbox .lb-placeholder { width: min(90vw, 560px); aspect-ratio: 4/5;
  background: linear-gradient(150deg, var(--blush), var(--blush-deep)); display: grid;
  place-items: center; color: var(--coral); }
.lightbox .lb-placeholder svg { width: 100px; height: 100px; }
.lb-btn { position: absolute; background: rgba(253,251,247,0.14); border: none; color: #fff;
  width: 48px; height: 48px; border-radius: 100px; font-size: 1.4rem; cursor: pointer;
  display: grid; place-items: center; transition: background var(--dur); }
.lb-btn:hover { background: rgba(253,251,247,0.28); }
.lb-close { top: 1.5rem; right: 1.5rem; }
.lb-prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1.5rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 900px) {
  .shop-layout { grid-template-columns: 1fr; }
  .filter-panel { position: fixed; top: 0; left: 0; height: 100%; width: min(88vw, 380px);
    z-index: 150; border-radius: 0; overflow-y: auto; display: none;
    box-shadow: 16px 0 40px -16px rgba(44,44,44,0.35); }
  .filter-panel[data-open="true"] { display: block; }
  .filter-overlay:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 149;
    background: rgba(44,44,44,0.4); }
  .filter-panel__back { cursor: pointer; }
  .filter-panel__back svg { display: block; color: var(--coral-deep); }
  .filter-panel__x { display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 100px; background: var(--blush);
    color: var(--coral-deep); cursor: pointer; flex: none; }
  .filter-panel__x svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.4; fill: none; }
  /* Comfortable touch targets for the mobile shop toolbar (~44x44 CSS px) */
  .filter-trigger { display: inline-flex; min-height: 44px; padding: 0.7em 1.2em; }
  .sort-wrap select { min-height: 44px; }
  .check { min-height: 44px; padding-block: 0.35rem; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-gallery, .detail-purchase, .detail-titleblock { grid-column: auto; grid-row: auto; }
  .buy-bar { display: flex; }
  main.detail-main { padding-bottom: 5rem; }
}

/* ============================================================
   INTERIOR PAGES (collections / tutorials / blog / about / contact / legal)
   ============================================================ */

/* Interior hero */
.page-hero { background: linear-gradient(160deg, var(--cream), var(--blush));
  border-bottom: 1.5px dashed var(--line); }
.page-hero .wrap { padding-block: clamp(1.8rem, 4vw, 3rem); text-align: center; }
.page-hero h1 { margin: 0.5rem 0; }
.page-hero p { max-width: 60ch; margin: 0 auto; color: var(--ink-70); font-size: var(--fs-lead); }

/* Collections grid */
.collection-grid { display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.9rem, 2vw, 1.4rem); }
@media (max-width: 360px) { .collection-grid { grid-template-columns: 1fr; } }
@media (min-width: 901px) { .collection-grid { grid-template-columns: repeat(4, 1fr); } }
.collection-card { position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1.5px dashed var(--line); background: #fff; padding: 1.3rem;
  display: flex; flex-direction: column; gap: 0.45rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.collection-card::before { content: ""; position: absolute; inset: 0; opacity: 0.5;
  background: radial-gradient(120% 90% at 100% 0%, var(--blush), transparent 60%); }
.collection-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.collection-card > * { position: relative; }
.collection-card .c-ico { width: 48px; height: 48px; color: #D32F2F; object-fit: contain; }
.collection-card h3 { font-size: 1.2rem; margin: 0; }
.collection-card p { font-size: 0.88rem; margin: 0; }
.collection-card .c-count { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-soft); font-weight: 700; }
.collection-card .link-arrow { margin-top: auto; }

/* Category filter chips (single-select) */
.cat-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center;
  margin-bottom: 1.2rem; }
.cat-chip { font-family: var(--font-body); font-size: 0.82rem; font-weight: 600;
  padding: 0.5em 1.1em; border-radius: 100px; border: 1.5px dashed var(--line);
  background: #fff; color: var(--taupe); cursor: pointer; transition: all var(--dur) var(--ease); }
.cat-chip[aria-pressed="true"] { background: var(--espresso); color: var(--cream);
  border-style: solid; border-color: var(--espresso); }
.type-badge { align-self: flex-start; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--coral-deep); background: var(--blush);
  padding: 0.25em 0.6em; border-radius: 100px; margin-bottom: 0.5rem; display: inline-block; }

/* About: values + features */
.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.value-card { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 1.8rem;
  background: #fff; }
.value-card svg, .value-card img { width: 48px; height: 48px; color: var(--coral); margin-bottom: 0.8rem; object-fit: contain; }
.value-card h3 { font-size: 1.35rem; margin-bottom: 0.3rem; }
.value-card p { font-size: 0.92rem; color: var(--ink-70); }
.prose { max-width: 68ch; }
.prose p { margin-bottom: 1.1rem; }
.mission { background: var(--espresso); color: var(--cream); border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem); text-align: center; }
.mission h2 { color: var(--cream); }
.mission p { color: rgba(253,251,247,0.82); max-width: 56ch; margin: 0.8rem auto 0;
  font-size: var(--fs-lead); }
.feature-list { display: grid; gap: 1rem; }
.feature-list li { display: flex; gap: 0.8rem; align-items: flex-start; }
.feature-list svg { width: 22px; height: 22px; color: var(--gold-soft); flex: none; margin-top: 3px; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start; }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--taupe); margin-bottom: 0.4rem; }
.field input, .field select, .field textarea { width: 100%; font-family: var(--font-body);
  font-size: 1rem; color: var(--espresso); background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); padding: 0.8em 1em; transition: border-color var(--dur) var(--ease); }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none;
  border-color: var(--coral); box-shadow: 0 0 0 3px rgba(248,131,121,0.15); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #C0392B; }
.field-error { color: #C0392B; font-size: 0.78rem; margin-top: 0.35rem; display: none; }
.field.invalid .field-error { display: block; }
.form-note { font-size: 0.82rem; color: var(--taupe); margin-top: 0.8rem; }
.form-success { background: #E8F3EA; color: #2E7D46; border-radius: var(--radius-sm);
  padding: 1rem 1.2rem; font-weight: 600; margin-bottom: 1.2rem; display: none; }
.contact-aside { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 1.8rem; }
.contact-aside h3 { font-size: 1.3rem; margin-bottom: 0.6rem; }

/* Social row (contact + footer) */
.social-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.social-row a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 100px;
  border: 1.5px solid var(--line); color: var(--espresso); transition: all var(--dur) var(--ease); }
.social-row a:hover { background: var(--coral); border-color: var(--coral); color: #fff; }
.social-row svg { width: 20px; height: 20px; }
.footer-social { margin-top: 1rem; }
.footer-social .social-row a { border-color: rgba(253,251,247,0.25); color: var(--cream); }
.footer-social .social-row a:hover { background: var(--coral); border-color: var(--coral); }

/* Legal */
.legal-layout { display: grid; grid-template-columns: 220px 1fr; gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start; }
.legal-nav { position: sticky; top: 92px; border: 1.5px dashed var(--line);
  border-radius: var(--radius); padding: 1.2rem; }
.legal-nav a { display: block; padding: 0.5em 0; color: var(--ink-70); font-weight: 600;
  font-size: 0.92rem; border-bottom: 1px solid var(--line); }
.legal-nav a:last-child { border-bottom: none; }
.legal-nav a:hover { color: var(--coral-deep); }
.legal-section { margin-bottom: 2.5rem; max-width: 72ch; }
.legal-section h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.8rem; }
.legal-section p, .legal-section li { color: var(--ink-70); margin-bottom: 0.8rem; }
.legal-section ul { padding-left: 1.2rem; list-style: disc; }
.legal-updated { font-size: 0.8rem; color: var(--taupe); font-style: italic; }

@media (max-width: 820px) {
  .contact-grid, .legal-layout { grid-template-columns: 1fr; }
  .legal-nav { position: static; display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .legal-nav a { border: 1.5px dashed var(--line); border-radius: 100px; padding: 0.4em 0.9em; }
}

/* ============================================================
   PLACEHOLDER PRODUCT CARDS (homepage "Shop Patterns" — awaiting real catalog)
   ============================================================ */
.product-card.is-placeholder { pointer-events: none; }
.product-card.is-placeholder:hover { transform: none; box-shadow: var(--shadow-sm); }
.ph-gallery { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, var(--cream), var(--blush)); }
.ph-logo { width: 44%; max-width: 150px; height: auto; opacity: 0.16; }
.ph-lines { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.7rem; }
.ph-lines span { display: block; height: 9px; border-radius: 100px; background: var(--line); }
.ph-lines span:first-child { width: 78%; }
.ph-lines span:last-child { width: 52%; }
.product-card.is-placeholder .product-cat { color: var(--taupe); }
.product-card.is-placeholder h3 { color: var(--taupe); }

/* ============================================================
   WORDMARK LOGO (image replaces the text brand in header & footer)
   ============================================================ */
.brand { text-decoration: none; display: inline-flex; align-items: center; }
.brand-logo { display: block; width: auto; height: 48px; }
.site-header .brand-logo { height: 48px; }
.footer-brand .brand-logo { height: 44px; }
@media (max-width: 900px) { .site-header .brand-logo { height: 44px; } }
@media (max-width: 480px) { .site-header .brand-logo { height: 38px; } }



/* ============================================================
   ARTICLE PAGE (blog post) + clickable blog cards
   ============================================================ */
.article { max-width: 720px; margin-inline: auto; }
.article-head { text-align: center; margin: 1.4rem 0 2.2rem; }
.article-head h1 { margin: 0.5rem 0 0.6rem; font-size: clamp(2rem, 5vw, 3rem); }
.article-meta { color: var(--taupe); font-size: 0.9rem; letter-spacing: 0.05em; text-transform: uppercase; }
.article-body { max-width: 68ch; margin-inline: auto; }
.article-body h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 2rem 0 0.6rem; }
.article-body p { margin-bottom: 1.15rem; color: var(--ink-70); font-size: 1.05rem; line-height: 1.78; }
.article-body p:first-child { font-size: 1.18rem; color: var(--espresso); }
.article-link-cta { margin: 0.4rem 0 1.4rem; padding: 0.9rem 1.1rem; background: var(--blush);
  border-radius: var(--radius-sm); border-left: 3px solid var(--coral); }
.article-link-cta .link-arrow { font-size: 0.98rem; }
.article-foot { max-width: 68ch; margin: 2.6rem auto 0; padding-top: 1.4rem; border-top: 1.5px dashed var(--line); }
.article-foot .link-arrow svg { margin-right: 0.2em; }

/* blog cards: thumbnail + title are links */
.blog-card .blog-thumb { text-decoration: none; cursor: pointer; }
.blog-card h3 a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
.blog-card h3 a:hover { color: var(--coral-deep); }

/* ============================================================
   PRODUCT MEDIA + RICH DETAIL + ARTICLE IMAGERY (launch update)
   ============================================================ */
/* Center the featured grid when there are only one or two products */
#product-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); justify-content: start; }

/* Real cover images on product cards */
.gallery .slide-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Detail gallery — 4:3 product images + video (was 1:1; too tall on mobile) */
.detail-gallery .main-img { aspect-ratio: 4 / 3; }
.detail-gallery .main-img video { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-strip button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-play { display: grid; place-items: center; width: 100%; height: 100%; }

/* Lightbox media sizing */
#lb-content img, #lb-content video { max-width: 90vw; max-height: 88vh; border-radius: var(--radius-sm); display: block; }

/* Rich description bits */
.detail-intro { font-weight: 600; color: var(--espresso); font-size: 1.06rem; margin: 0.2rem 0 0.8rem; }
.fabric-note { margin-top: 0.8rem; font-size: 0.9rem; color: var(--taupe); font-style: italic;
  border-left: 3px solid var(--gold-soft); padding-left: 0.8rem; }
.size-range { background: linear-gradient(150deg, var(--blush), var(--blush-deep));
  border-radius: var(--radius); padding: 1.4rem 1.6rem; }
.size-range__val { font-family: var(--font-display); font-size: 2rem; font-weight: 600;
  color: var(--coral-deep); line-height: 1; margin-bottom: 0.5rem; }
.size-range p { margin: 0; color: var(--ink-70); font-size: 0.95rem; max-width: 60ch; }

/* Article images */
.article-figure { margin: 1.8rem 0; }
.article-figure img { width: 100%; height: auto; border-radius: var(--radius); display: block; box-shadow: var(--shadow-sm); }
.article-figure figcaption { margin-top: 0.5rem; font-size: 0.85rem; color: var(--taupe); text-align: center; font-style: italic; }

/* Article "Shop the pattern" CTA */
.article-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.2rem; margin: 2.6rem 0 0.5rem; padding: 1.6rem 1.8rem; border-radius: var(--radius);
  background: linear-gradient(150deg, var(--blush), var(--blush-deep)); border: 1px solid var(--line); }
.article-cta__body { flex: 1 1 260px; }
.article-cta__body .eyebrow { color: var(--gold-soft); }
.article-cta__body h3 { font-size: 1.35rem; margin: 0.3rem 0 0.3rem; }
.article-cta__body p { margin: 0; color: var(--ink-70); font-size: 0.95rem; }

/* ============================================================
   DETAIL PAGE STABILITY FIX + SALE BADGE + GALLERY NAV/VIDEO
   ============================================================ */
/* Keep "Printing formats" and "Marketplace" cards even and predictable on
   small screens instead of wrapping into an uneven 2-then-1 layout. */
@media (max-width: 640px) {
  .format-grid { grid-template-columns: 1fr 1fr; }
  .format-grid .format-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .market-grid { grid-template-columns: 1fr; }
}

/* Sale / promo badge — reusable, inset from the corner */
.badge-sale { position: absolute; top: 10px; left: 10px; z-index: 3;
  background: rgba(228,104,92,0.68); color: #fff; font-family: var(--font-body);
  font-weight: 700; font-size: 0.68rem; letter-spacing: 0.02em;
  padding: 0.28em 0.6em; border-radius: 100px; border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.18); backdrop-filter: blur(2px);
  transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
  pointer-events: none; }
.product-card:hover .badge-sale, .product-card:focus-within .badge-sale { background: rgba(228,104,92,0.85); }
.product-card .gallery { position: relative; }

/* Gallery prev/next arrows on the main detail image */
.detail-gallery .main-img { position: relative; }
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 100px; border: none; cursor: pointer;
  background: rgba(44,44,44,0.42); color: #fff; display: grid; place-items: center;
  backdrop-filter: blur(3px); transition: background var(--dur) var(--ease); }
.gallery-nav:hover { background: rgba(44,44,44,0.65); }
.gallery-nav svg { width: 20px; height: 20px; }
.gallery-nav--prev { left: 12px; }
.gallery-nav--next { right: 12px; }

/* Video thumbnail: real first-frame preview + small play icon */
.thumb-strip button.is-video { position: relative; }
.thumb-strip button.is-video video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.thumb-play-mini { position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(44,44,44,0.28); }
.thumb-play-mini svg { width: 22px; height: 22px; color: #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }

/* ============================================================
   DETAIL PAGE SPACING FIX (root cause of the size/gap inconsistency)
   ============================================================ */
/* The generic `section{padding-block:var(--sec-y)}` rule is meant for the
   full-width homepage sections and was leaking into every JS-built
   .detail-section (fabrics/included/sizes/printing/marketplace), stacking
   ~150px of extra top+bottom padding on each one. Reset it here so spacing
   between these sections is consistent, and remove the huge gap before
   the footer caused by that leftover bottom padding on the last section. */
.detail-section { padding-block: 0; scroll-margin-top: 88px; }

/* Anchor jumps (Choose buying options / sticky bar) shouldn't land under
   the sticky header. */
#buy { scroll-margin-top: 88px; }

/* Keep the fixed mobile buy-bar from covering the footer's own content
   at the true bottom of the page. */
body:has(#buy-bar) .site-footer { padding-bottom: 6.5rem; }

/* ============================================================
   IMAGE-LOAD RESILIENCE (broken/slow images must never resize
   or overlap their reserved layout box)
   ============================================================ */
.detail-gallery .main-img img,
.thumb-strip button img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* If an image fails to load, collapse it to nothing rather than showing
   the browser's default broken-image icon (which ignores object-fit and
   can visually push/overlap surrounding elements). The reserved
   aspect-ratio box on the parent keeps the layout stable either way. */
.detail-gallery .main-img img.img-failed,
.thumb-strip button img.img-failed,
.gallery .slide-img.img-failed { display: none; }

/* ============================================================
   MOBILE PRODUCT-DETAIL — CONSOLIDATED, PRODUCTION FIX (<=768px)
   Supersedes the scattered rules above for this breakpoint:
   square hero image, fluid marketplace cards, no horizontal
   scroll, and sticky-footer-aware bottom spacing.
   ============================================================ */
@media (max-width: 768px) {

  /* 1. Kill horizontal scroll / shake at the root, not just body.
        width:100% (not 100vw) avoids the classic 100vw-vs-scrollbar
        overflow trap on Android Chrome. */
  html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }

  /* 2. Hero product image: square, but never allowed to dominate
        the viewport on short/narrow phones. aspect-ratio still
        drives the height from the fluid width; max-height clamps
        it once that height would exceed half the screen. */
  .detail-grid { grid-template-columns: 1fr; }
  .detail-grid > * { min-width: 0; }  /* CSS Grid items don't shrink below
        their content's min-content size by default — without this, a
        fixed-width child (like the thumbnail strip below) silently
        forces the whole column, and the page, wider than the viewport. */
  .detail-gallery .main-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 50vh;
    overflow: hidden;
    position: relative; /* anchors badge + prev/next nav */
  }
  .detail-gallery .main-img img,
  .detail-gallery .main-img video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Thumbnail row: let it scroll horizontally within itself instead of
     forcing its fixed-width children to stretch the page. */
  .thumb-strip {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .thumb-strip button { flex-shrink: 0; }

  /* 3. Marketplace cards: fully fluid, single column, no fixed
        widths — box-sizing:border-box (global) keeps padding from
        ever causing overflow. */
  .market-grid {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    width: 100%;
  }
  .market-card {
    width: 100%;
    box-sizing: border-box;
    padding: 1.2rem;
  }
  .market-card .btn {
    width: 100%;
    box-sizing: border-box;
  }

  /* 4. Format cards (A4 / US Letter / A0) get the same fluid,
        border-box treatment so nothing overflows beside it. */
  .format-grid {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .format-card { box-sizing: border-box; }

  /* 5. Sticky "Buy the pattern" footer: fixed height captured in a
        variable so spacing stays correct if its content ever wraps,
        plus the device's safe-area inset for notched phones. */
  :root { --buybar-h: 76px; }
  .buy-bar {
    min-height: var(--buybar-h);
    padding-bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }

  /* 6. Reserve exactly that much space at the bottom of the main
        column so the last section is never hidden behind the bar —
        calculated from the same variable, not a guessed magic number. */
  main.detail-main {
    padding-bottom: calc(var(--buybar-h) + env(safe-area-inset-bottom, 0px) + 1.5rem);
  }
  body:has(#buy-bar) .site-footer {
    padding-bottom: calc(var(--buybar-h) + env(safe-area-inset-bottom, 0px) + 2rem);
  }
}

/* ============================================================
   PRODUCT DETAIL — FINE-TUNED FIX FOR SMALL PHONES (<=480px)
   "Clean & Premium": 4:3 gallery, balanced type, rock-solid
   sticky footer, zero horizontal overflow.
   ============================================================ */
@media (max-width: 480px) {

  /* 1. Image gallery — 4:3, cropped cleanly with object-fit:cover.
        Shorter than 1:1, so more of the page is visible above the fold. */
  .detail-gallery .main-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 46vh;
    overflow: hidden;
    border-radius: var(--radius);
    position: relative;
  }
  .detail-gallery .main-img img,
  .detail-gallery .main-img video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* 2. Typography — the product title no longer inherits the huge
        homepage --fs-hero size; it scales smoothly with the viewport
        and settles into a calm, readable range on small phones. */
  .detail-info h1 {
    font-size: clamp(1.5rem, 5vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .detail-info .subtitle { font-size: 1.05rem; }
  .detail-section h2 { font-size: clamp(1.35rem, 4.5vw, 1.7rem); }

  /* 3. Thumbnails — square is intentional (the industry-standard way to
        show a consistent filmstrip regardless of the hero's own ratio),
        so they stay visually tidy under the now-shorter 4:3 image
        instead of stretching to match it. The row scrolls on its own
        rather than ever affecting the page width. */
  .thumb-strip {
    margin-top: 0.7rem;
    display: flex;
    gap: 0.5rem;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .thumb-strip button {
    flex: 0 0 64px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
  }

  /* 4. Sticky "Buy the pattern" footer — rock-solid position, always
        above page content, never above the lightbox. */
  .buy-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    box-sizing: border-box;
    min-height: var(--buybar-h, 76px);
    padding-bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px));
  }
  /* Reserve exactly that height at the bottom of the page so the last
     line of content or the footer's legal links are never hidden
     behind the bar. */
  main.detail-main {
    padding-bottom: calc(var(--buybar-h, 76px) + env(safe-area-inset-bottom, 0px) + 1.5rem);
  }
  body:has(#buy-bar) .site-footer {
    padding-bottom: calc(var(--buybar-h, 76px) + env(safe-area-inset-bottom, 0px) + 2rem);
  }

  /* 5. Zero horizontal overflow / no white gap on the right. */
  html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }
  .wrap, .detail-grid, .detail-gallery, .detail-info {
    max-width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   LANDING PAGE POLISH — visual depth, trust chips, card badge
   + hover reveal, and the new "Loved by the community" band
   ============================================================ */

/* --- Trust-signal format chips (hero) --- */
.format-chip { display: inline-flex; align-items: center; gap: 0.4em;
  background: #fff; border: 1.5px solid var(--line); border-radius: 100px;
  padding: 0.35em 0.85em 0.35em 0.7em; font-size: var(--fs-sm); font-weight: 600;
  color: var(--espresso); box-shadow: 0 2px 6px -3px rgba(44,44,44,0.12); }
.format-chip svg { color: var(--gold); width: 1.05em; height: 1.05em; }

/* --- Visual depth: soft layered gradient + grain instead of flat white/blush --- */
body {
  background:
    radial-gradient(ellipse 900px 500px at 12% -6%, color-mix(in srgb, var(--coral) 10%, transparent), transparent 60%),
    radial-gradient(ellipse 800px 600px at 92% 8%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 55%),
    radial-gradient(ellipse 700px 500px at 50% 100%, color-mix(in srgb, var(--blush) 55%, transparent), transparent 60%),
    var(--cream);
  background-attachment: fixed, fixed, fixed, fixed;
}
/* Subtle film-grain overlay for texture, applied once at the root so it
   never repeats/tiles visibly and stays extremely light. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
main, .site-footer { position: relative; z-index: 1; }

/* --- Product card: "New Release" badge (distinct from the sale badge,
   sits opposite corner so the two never collide) --- */
.badge-new { position: absolute; top: 10px; right: 10px; z-index: 3;
  background: rgba(201,154,46,0.68); color: #fff; font-family: var(--font-body);
  font-weight: 700; font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.28em 0.55em; border-radius: 100px; border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.18); backdrop-filter: blur(2px);
  transition: background-color var(--dur) var(--ease);
  pointer-events: none; }
.product-card:hover .badge-new, .product-card:focus-within .badge-new { background: rgba(201,154,46,0.85); }

/* --- Product card hover reveal: a soft overlay that surfaces on hover/focus
   to show a bit more without ever showing price (marketplace-priced). --- */
.product-card .gallery { position: relative; overflow: hidden; }
.card-reveal { position: absolute; inset: auto 0 0 0; padding: 0.9rem 1rem 1rem;
  background: linear-gradient(to top, rgba(44,44,44,0.82), rgba(44,44,44,0));
  color: #fff; transform: translateY(100%); opacity: 0;
  transition: transform 0.32s var(--ease), opacity 0.32s var(--ease); }
.product-card:hover .card-reveal,
.product-card:focus-within .card-reveal { transform: translateY(0); opacity: 1; }
.card-reveal p { margin: 0; font-size: 0.85rem; color: rgba(255,255,255,0.92); }
.card-reveal .link-arrow { color: #fff; font-weight: 700; margin-top: 0.35rem; }
.product-card .gallery .slide-img,
.product-card .gallery .slide { transition: transform 0.5s var(--ease); }
.product-card:hover .slide-img,
.product-card:hover .slide { transform: scale(1.045); }

/* --- Social proof band: "Loved by the sewing community" --- */
.social-proof { text-align: center; padding-block: clamp(2.6rem, 6vw, 4rem); }
.social-proof .stars { display: flex; justify-content: center; gap: 0.3rem; margin-bottom: 0.9rem; }
.social-proof .stars svg { width: 22px; height: 22px; color: var(--gold); }
.social-proof p { font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 1.7rem);
  color: var(--espresso); font-weight: 600; max-width: 34ch; margin-inline: auto; }

/* --- Printing-format icons on the product detail page --- */
.format-card .fmt-ico { width: 26px; height: 26px; margin: 0 auto 0.5rem;
  fill: none; stroke: var(--coral); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   HIERARCHICAL CATEGORY FILTER (Category > Sub-category)
   ============================================================ */
.filter-subopts {
  display: flex; flex-direction: column; gap: 0.15rem;
  margin: 0.1rem 0 0.6rem 1.2rem;
  padding-left: 0.6rem;
  border-left: 1.5px dashed var(--line);
}
.filter-subopts .check { font-size: 0.9rem; color: var(--ink-70); }

/* ============================================================
   FEATURED PATTERN — homepage horizontal carousel (scoped only
   to this section; does not touch .product-card/.gallery used
   elsewhere on the site). No external library — native CSS
   scroll-snap gives smooth motion + touch/swipe for free; JS is
   only used for the two nav buttons.
   ============================================================ */
.featured-section .sec-head { margin-bottom: 1.4rem; }

.featured-carousel-wrap { position: relative; padding-inline: 46px; }
.featured-carousel {
  display: flex; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 0.3rem 0.1rem;
}
.featured-carousel::-webkit-scrollbar { display: none; }

.featured-card {
  flex: 0 0 calc((100% - 2 * 1.2rem) / 3);
  min-width: 0; scroll-snap-align: start;
  position: relative; background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.featured-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.featured-card .card-link { position: absolute; inset: 0; z-index: 2; }

.fc-image { position: relative; aspect-ratio: 4 / 3; background: var(--blush); overflow: hidden; }
.fc-image .fc-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-image .slide.placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--coral); }

.fc-body { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; position: relative; z-index: 1; }
.fc-body .product-cat { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--taupe); }
.featured-card h3 { font-size: clamp(1.05rem, 1.3vw, 1.2rem); font-weight: 500; line-height: 1.28;
  margin: 0.3rem 0 0.35rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.featured-card p { font-size: var(--fs-sm); color: var(--ink-70); margin-bottom: 0.7rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.featured-card .link-arrow { margin-top: auto; position: relative; z-index: 3; }

.fc-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 40px; height: 40px; border-radius: 100px; border: 1.5px solid var(--line);
  background: #fff; color: var(--coral-deep); display: grid; place-items: center;
  cursor: pointer; box-shadow: var(--shadow-sm); transition: background var(--dur) var(--ease); }
.fc-nav:hover { background: var(--blush); }
.fc-nav svg { width: 18px; height: 18px; }
.fc-prev { left: 0; }
.fc-next { right: 0; }

@media (max-width: 900px) {
  .featured-card { flex-basis: calc((100% - 1.2rem) / 2); }
}
@media (max-width: 640px) {
  .featured-carousel-wrap { padding-inline: 40px; }
  .featured-card { flex-basis: 100%; }
}

/* ============================================================
   SHARE WIDGET — one reusable component for articles + products
   ============================================================ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.share-widget { position: relative; display: inline-block; margin-top: 0.9rem; }
.share-toggle { padding: 0.5em 1.05em; font-size: 0.86rem; }
.share-toggle svg { color: currentColor; }
.share-menu { position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 40;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 0.4rem; min-width: 190px; max-width: min(230px, calc(100vw - 2rem));
  display: flex; flex-direction: column; gap: 0.15rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-4px) scale(0.98); transform-origin: top left;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms; }
.share-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) { .share-menu { transition: none; } }
.share-item { display: flex; align-items: center; gap: 0.65em; width: 100%;
  padding: 0.6em 0.7em; border-radius: 8px; font-size: 0.88rem; color: var(--espresso);
  background: none; border: none; text-align: left; cursor: pointer; font-family: inherit;
  text-decoration: none; }
.share-item:hover, .share-item:focus-visible { background: var(--blush); outline: none; }
.share-item svg { width: 17px; height: 17px; flex: none; color: var(--coral-deep); }

.detail-share { margin-top: 1rem; padding-top: 1rem; border-top: 1.5px dashed var(--line); }
.detail-share .share-widget { margin-top: 0; }

.article-share-end { margin-top: 2rem; padding-block: 1.4rem; border-block: 1.5px dashed var(--line);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.article-share-end__label { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--taupe); }
.article-share-end .share-widget { margin-top: 0; }

/* ============================================================
   NEWSLETTER — Brevo signup embed
   ============================================================ */
.newsletter-embed { width: 100%; max-width: 540px; margin-inline: auto; overflow: hidden; }
.newsletter-embed iframe { display: block; width: 100%; max-width: 540px; height: 900px;
  border: 0; margin-inline: auto; }
@media (min-width: 480px) { .newsletter-embed iframe { height: 800px; } }
@media (min-width: 768px) { .newsletter-embed iframe { height: 650px; } }
@media (min-width: 1024px) { .newsletter-embed iframe { height: 550px; } }