/* ════════════════════════════════════════════════════════════════════
   DONATI · MOBILE UX LAYER · v6.19
   Mobile-first refinements applied AFTER all other stylesheets.
   Focus: reduce vertical space before products on small screens,
   tighten intro paragraphs, improve tap targets, prevent content
   jumps from intros pushing products below the fold.
   Author note: this file should always be last in <link> order.
   ════════════════════════════════════════════════════════════════════ */

/* ─── BASELINE: scroll anchoring on family anchors ───────────────
   Ensures #fam-* jumps land below the sticky header on mobile too */
[id^="fam-"], section[id]{
  scroll-margin-top: 88px;
}

/* ─── MOBILE ≤720px · the workhorse breakpoint ─────────────────── */
@media (max-width: 720px){

  /* === HERO META on Stretchable ====================================
     5 items wrap into 3 lines on 380px → eats ~110px.
     New: 2-row layout, tighter typography, balanced visually. */
  .stretch-hero-meta{
    gap: 12px 18px !important;
    flex-wrap: wrap !important;
    padding-top: 16px !important;
    margin-top: 16px !important;
    justify-content: center !important;
  }
  .stretch-hero-meta span{
    font-size: 9px !important;
    letter-spacing: .16em !important;
    gap: 4px !important;
  }
  .stretch-hero-meta strong{
    font-size: 14px !important;
  }
  /* Hide the 5th item ("1 patent") on tiny phones — keep "20 finishes"
     more useful for catalog browsing. Show again at 430px+ via override. */
  @media (max-width: 380px){
    .stretch-hero-meta span:nth-child(5){ display: none !important; }
  }

  /* === HERO bottom padding compression =============================
     Was 48px 0 56px → 32px 0 28px on mobile. Saves ~44px. */
  .stretch-hero,
  .page-hero{
    padding: 28px 0 24px !important;
  }
  .stretch-hero-text h1,
  .page-hero h1{
    font-size: clamp(26px, 6.8vw, 36px) !important;
    margin-bottom: 10px !important;
  }
  .stretch-hero-text .intro,
  .page-hero .intro,
  .stretch-hero-text .tagline,
  .page-hero .tagline{
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
  }

  /* === BC-HEAD compression (Bracelets · Catalogue intro) =========== */
  .bc-head{
    margin-bottom: 28px !important;
  }
  .bc-head h2{
    font-size: 24px !important;
    margin-bottom: 10px !important;
  }
  .bc-head p{
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  /* === BC-FAMILY-HEAD compression ==================================
     Each family has a head with title + tag + desc. On mobile this
     stack takes 110-150px before any product appears. */
  .bc-family{
    scroll-margin-top: 88px;
  }
  .bc-family-head{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding-bottom: 10px !important;
    margin-bottom: 18px !important;
  }
  .bc-family-name{
    gap: 10px !important;
    align-items: baseline !important;
  }
  .bc-family-name h3{
    font-size: 18px !important;
    line-height: 1.15 !important;
  }
  .bc-family-name .bc-family-tag{
    font-size: 9px !important;
    letter-spacing: .18em !important;
  }
  .bc-family-desc{
    text-align: left !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
    margin: 0 !important;
    color: #7a7368 !important;
  }
  /* Family blocks: tighter spacing between them */
  .bc-families{
    gap: 40px !important;
  }
  .bracelets-catalogue{
    padding: 36px 16px 32px !important;
  }

  /* === FAMILY-DEEP (Stretchable ring families: Harmony etc.) =======
     On desktop this is a 2-col grid: title left, copy + specs right.
     On mobile it collapses but stays heavy. Compress. */
  .family-deep-inner{
    padding: 0 4px !important;
  }
  .family-deep{
    padding: 32px 0 24px !important;
  }
  .family-deep-head{
    margin-bottom: 18px !important;
    gap: 12px !important;
  }
  .family-deep-head .num{
    font-size: 9.5px !important;
    letter-spacing: .22em !important;
    margin-bottom: 4px !important;
  }
  .family-deep-head h2{
    font-size: 22px !important;
    line-height: 1.15 !important;
    margin: 0 0 8px !important;
  }
  .family-deep-head .r{
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #4a4a47;
  }
  .family-deep-head .specs{
    margin-top: 10px !important;
    gap: 6px !important;
    flex-direction: column !important;
  }
  .family-deep-head .specs span{
    font-size: 10px !important;
    letter-spacing: .14em !important;
  }
  .family-deep-head .specs strong{
    font-size: 11.5px !important;
  }

  /* === ANATOMY-MACRO-SPLIT (technical chapter blocks) ==============
     Image + caption + 4-bullet list per family. Heavy.
     On mobile: smaller image aspect, tighter list. */
  .anatomy-macro-split{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin: 20px 0 !important;
  }
  .anatomy-macro-split .ams-img{
    aspect-ratio: 16/9 !important;
    max-height: 260px;
  }
  .anatomy-macro-split .ams-text h4{
    font-size: 16px !important;
    margin: 6px 0 8px !important;
  }
  .anatomy-macro-split .ams-text p{
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }
  .anatomy-macro-split .ams-list{
    margin: 12px 0 !important;
  }
  .anatomy-macro-split .ams-list li{
    font-size: 12px !important;
    padding: 6px 0 !important;
    line-height: 1.4 !important;
  }
  .anatomy-macro-split .ams-list li span{
    font-size: 9px !important;
    min-width: 20px !important;
  }
  .anatomy-macro-split .ams-label{
    font-size: 9.5px !important;
    margin-bottom: 4px !important;
  }
  .anatomy-macro-split .ams-caption{
    font-size: 10.5px !important;
    margin-top: 10px !important;
  }

  /* === CLASSIC page collection-head intros ==========================
     35-40 word intros (Cestino, Invisible Setting, Cocktail Trio) */
  .page-collections-head{
    margin-bottom: 22px !important;
  }
  .page-collections-head h2{
    font-size: 24px !important;
    margin: 8px 0 10px !important;
  }
  .page-collections-head p{
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
  .collection-block{
    padding: 22px 14px !important;
    margin: 0 0 16px !important;
  }
  .collection-specs{
    margin-top: 14px !important;
  }
  .collection-specs > div{
    padding: 8px 0 !important;
  }
  .collection-specs dt{
    font-size: 10px !important;
    letter-spacing: .14em !important;
  }
  .collection-specs dd{
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }
  .collection-note{
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin-top: 12px !important;
  }

  /* === SKU-CARD / BC-CARD density on phones ========================
     Stay at 2-up grid (already), but reduce padding inside cards */
  .bc-card-meta{
    padding: 12px 12px 14px !important;
    gap: 3px !important;
  }
  .bc-card-code{
    font-size: 8.5px !important;
    letter-spacing: .14em !important;
  }
  .bc-card-name{
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
  .bc-card-desc{
    font-size: 11px !important;
    line-height: 1.4 !important;
    margin-top: 1px !important;
  }
  .sku-card-name{
    font-size: 13px !important;
  }
  .sku-card-meta{
    font-size: 11px !important;
  }
  .sku-card-code{
    font-size: 8px !important;
  }

  /* === TAP TARGETS (WCAG 44×44 minimum) ============================ */
  .bc-card, .sku-card, .fam-chip{
    min-height: 44px;
  }
  .d-nav-link, .nav-link, .fam-filter-btn{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* === LIFESTYLE FIGURE (worn product hero strips) ================= */
  .lifestyle-figure{
    margin: 24px 0 28px !important;
    padding: 0 !important;
  }
  .lifestyle-figure img{
    border-radius: 2px;
  }
  .lifestyle-figure.is-strip img{
    max-height: 380px;
    object-fit: cover;
    object-position: center;
  }
  .lifestyle-figure figcaption{
    font-size: 10.5px !important;
    padding: 10px 14px 0 !important;
    letter-spacing: .12em !important;
  }

  /* === Family filter chips: more compact on mobile ================= */
  .fam-filter-btn{
    padding: 10px 16px !important;
    font-size: 11px !important;
  }
  .fam-filter-count{
    font-size: 9.5px !important;
  }

}/* end @media 720 */

/* ─── EXTRA-SMALL ≤430px (iPhone SE / Galaxy compact) ─── */
@media (max-width: 430px){
  .stretch-hero,
  .page-hero{
    padding: 22px 0 18px !important;
  }
  .stretch-hero-text h1,
  .page-hero h1{
    font-size: 24px !important;
  }
  .bc-family-name h3{
    font-size: 17px !important;
  }
  .bc-head h2{
    font-size: 22px !important;
  }
  .family-deep-head h2{
    font-size: 20px !important;
  }
  .bracelets-catalogue{
    padding: 28px 12px 28px !important;
  }
  .bc-families{
    gap: 32px !important;
  }
  /* Confetti and Tennis have longer descs — tightest line-height here */
  .bc-family-desc{
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
}

/* ─── LIFESTYLE FIGURE shared component ──────────────────────────────
   Used across all pages. Frames a worn-product image with a small
   eyebrow caption. Editorial-grade, neutral, fits any background.
   ──────────────────────────────────────────────────────────────────── */
.lifestyle-figure{
  margin: 28px 0 32px;
  padding: 0;
  text-align: center;
}
.lifestyle-figure picture,
.lifestyle-figure > img{
  display: block;
  width: 100%;
  max-width: 560px;        /* was 880px — too dominant on desktop */
  margin: 0 auto;
  height: auto;
  border-radius: 2px;
  background: #f3ecdf;
}
.lifestyle-figure img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;       /* cap height regardless of aspect ratio */
  object-fit: cover;
  object-position: center;
}
.lifestyle-figure figcaption{
  font-family: var(--d-sans, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--d-muted, #6b6258);
  padding: 12px 0 0;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.5;
}
/* Hero-strip variant: a bit wider but still constrained */
.lifestyle-figure.is-strip{
  margin: 8px 0 28px;
}
.lifestyle-figure.is-strip picture{
  max-width: 720px;
}
.lifestyle-figure.is-strip img{
  max-height: 460px;
}
/* Portrait variant: taller aspect for full-figure images */
.lifestyle-figure.is-portrait picture{
  max-width: 480px;        /* portraits read better narrower */
}
.lifestyle-figure.is-portrait img{
  max-height: 600px;
  object-fit: contain;
}
@media (max-width: 720px){
  /* On mobile keep them edge-to-edge inside the container */
  .lifestyle-figure picture,
  .lifestyle-figure > img,
  .lifestyle-figure.is-strip picture,
  .lifestyle-figure.is-portrait picture{
    max-width: 100% !important;
  }
  .lifestyle-figure img{
    max-height: none;       /* mobile: natural aspect ratio */
  }
  .lifestyle-figure.is-strip img{
    max-height: 380px;
  }
  .lifestyle-figure.is-portrait img{
    max-height: 480px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v6.22 — CROSS-SITE MOBILE HOTFIXES + DENSITY PASS
   Author note: appended below v6.19 so it wins on cascade.
   Goal: zero horizontal scroll, -30% to -50% page height on mobile,
   tap targets ≥ 44px preserved, every page consistent.
   ════════════════════════════════════════════════════════════════════ */

/* ─── 1. KILL HORIZONTAL SCROLL GLOBALLY ─────────────────────────── */
html, body{
  overflow-x: hidden;
  max-width: 100vw;
  position: relative;
}

/* Suppress horizontal scroll from fixed/absolute elements escaping */
@media (max-width: 920px){
  /* desktop nav that some pages position offscreen (.nav, .d-nav) */
  /* IMPORTANT: do NOT hide when .is-open — it's the mobile drawer */
  header.header > nav.nav:not(.is-open),
  body > nav.nav:not(.is-open){
    display: none !important;
  }
}

/* ─── 2. MARQUEE / ANNOUNCEMENT BAR safety ──────────────────────── */
.d-announce,
.announce,
.marquee{
  overflow: hidden !important;
  max-width: 100vw !important;
}

@media (max-width: 768px){

  /* ─── 3. SECTION RHYTHM GLOBAL COMPRESSION ─────────────────────
     All pages: cut section padding ~30%, tighten heading scale */
  section[class*="page-"],
  section[class*="opere"],
  section[class*="processo"],
  section[class*="mid-"],
  section[class*="note-"],
  section[class*="cta-"],
  .alta-pezzi,
  .personalization-showcase,
  .formats-showcase,
  .page-cta,
  .page-cta-new,
  .cta-final{
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  .page-hero{
    padding: 22px 16px 18px !important;
  }

  /* ─── 4. HEADINGS SCALE on mobile ────────────────────────────── */
  h1{font-size: clamp(24px, 6.5vw, 32px) !important; line-height: 1.08 !important}
  h2{font-size: clamp(20px, 5.2vw, 26px) !important; line-height: 1.14 !important}
  h3{font-size: clamp(17px, 4.5vw, 20px) !important; line-height: 1.18 !important}
  h4{font-size: 15px !important; line-height: 1.25 !important}
  h5{font-size: 13.5px !important; line-height: 1.3 !important}

  /* ─── 5. ALTA-GIOIELLERIA · opere block (was 13,051px!) ──────── */
  .opere,
  .opera,
  .opera-block{
    padding: 28px 16px !important;
  }
  .opera + .opera,
  .opera-block + .opera-block{
    margin-top: 28px !important;
    padding-top: 28px !important;
    border-top: 1px solid var(--d-line, #e8dfcd) !important;
  }
  .opera-title{font-size: 22px !important; line-height: 1.12 !important; margin: 6px 0 10px !important}
  .opera-eyebrow{font-size: 9.5px !important; letter-spacing: .22em !important; margin-bottom: 8px !important}
  .opera-copy{font-size: 13.5px !important; line-height: 1.6 !important}
  .opera-specs{margin-top: 14px !important; gap: 4px !important}
  .opera-specs dt{font-size: 9.5px !important; letter-spacing: .14em !important}
  .opera-specs dd{font-size: 12.5px !important; line-height: 1.4 !important; margin-bottom: 4px !important}

  /* ─── 6. ALTA-GIOIELLERIA · pezzi-eccezione (was 10,917px!) ──── */
  #pezzi-eccezione{padding: 32px 16px !important}
  #pezzi-eccezione .alta-pezzo{padding: 22px 16px !important; margin-bottom: 18px !important}
  #pezzi-eccezione h2{font-size: 24px !important; margin-bottom: 16px !important}
  #pezzi-eccezione h3{font-size: 18px !important; margin-bottom: 8px !important}
  #pezzi-eccezione p{font-size: 13px !important; line-height: 1.55 !important; margin: 0 0 10px !important}
  #pezzi-eccezione img{margin-bottom: 14px !important}

  /* ─── 7. CLASSIC · collection-block tighter ────────────────────
     Each .collection-block can be 1,000–1,900px on mobile. Tighten. */
  .collection-block{
    padding: 18px 14px !important;
    margin: 0 0 12px !important;
  }
  .collection-block .collection-title{
    font-size: 19px !important;
    line-height: 1.15 !important;
    margin: 4px 0 6px !important;
  }
  .collection-block .collection-eyebrow{
    font-size: 9.5px !important;
    letter-spacing: .2em !important;
    margin-bottom: 4px !important;
  }
  .collection-block .collection-intro,
  .collection-block .collection-copy{
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin: 0 0 10px !important;
  }
  /* Spec dlists: stacked tight on mobile (was forced 2-col, broke long values) */
  .collection-specs{
    display: block !important;
    margin-top: 12px !important;
  }
  .collection-specs > div{
    padding: 6px 0 !important;
    border-bottom: 1px solid var(--d-line, rgba(0,0,0,.06)) !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
  }
  .collection-specs > div:last-child{border-bottom: none !important}
  .collection-specs dt{
    font-size: 9.5px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    min-width: 78px !important;
    flex-shrink: 0 !important;
  }
  .collection-specs dd{
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    flex: 1 !important;
  }

  /* ─── 8. STRETCHABLE · family-deep ultra-tight ────────────────
     Already compressed in v6.19; v6.22 squeezes spec rails further */
  .family-deep{padding: 22px 0 18px !important}
  .family-deep-head{margin-bottom: 14px !important}
  .family-deep-head h2{font-size: 21px !important}
  .family-deep-head .specs{
    margin-top: 8px !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    gap: 6px 14px !important;
  }
  .family-deep-head .specs span{
    flex-direction: row !important;
    gap: 4px !important;
    font-size: 9.5px !important;
  }
  .family-deep-head .r{font-size: 12.5px !important; line-height: 1.5 !important}

  /* ─── 9. FORMATS / PERSONALIZATION showcase tighter ──────────── */
  .personalization-showcase,
  .formats-showcase{
    padding: 32px 16px !important;
  }
  .personalization-showcase h2,
  .formats-showcase h2{
    font-size: 22px !important;
    margin-bottom: 12px !important;
  }
  .personalization-showcase p,
  .formats-showcase p{
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin-bottom: 16px !important;
  }
  .pers-grid,
  .formats-grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* ─── 10. CTA SECTIONS shorter ──────────────────────────────── */
  .page-cta, .page-cta-new, .cta-final{
    padding: 36px 16px !important;
  }
  .page-cta h2, .page-cta-new h2, .cta-final h2{
    font-size: 22px !important; margin-bottom: 14px !important;
  }
  .page-cta p, .page-cta-new p, .cta-final p{
    font-size: 13.5px !important; line-height: 1.55 !important;
  }

  /* ─── 11. FOOTER tighter ────────────────────────────────────── */
  .footer, footer.footer{
    padding: 28px 20px 20px !important;
  }
  /* 2-col grid on mobile (brand spans both, then 4 link cols in 2x2) */
  .footer-grid{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 18px !important;
    margin-bottom: 18px !important;
  }
  .footer-brand{
    grid-column: 1 / -1 !important;
    margin-bottom: 4px !important;
  }
  .footer-brand .logo{font-size: 22px !important; letter-spacing: .25em !important; margin-bottom: 8px !important}
  .footer-brand .tag{font-size: 11.5px !important; line-height: 1.5 !important; color: var(--d-muted, #6b6258) !important}
  .footer-cols{gap: 18px !important}
  .footer-col h6{
    font-size: 10px !important;
    letter-spacing: .22em !important;
    margin-bottom: 8px !important;
  }
  .footer-col a,
  .footer-links a{
    font-size: 12px !important;
    line-height: 1.65 !important;
    padding: 2px 0 !important;
  }
  .footer-links{gap: 2px !important; display: flex !important; flex-direction: column !important}
  .footer-bot{
    padding-top: 14px !important;
    margin-top: 6px !important;
    font-size: 10px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
  .footer-bot .links{
    gap: 14px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .footer-bot .links a{font-size: 10px !important}

  /* ─── 12. ATELIER page · d-atelier-block tighter ─────────────── */
  .d-atelier-block{padding: 28px 16px !important}
  .d-atelier-block h2{font-size: 22px !important; margin-bottom: 12px !important}
  .d-atelier-block p{font-size: 13.5px !important; line-height: 1.6 !important; margin-bottom: 14px !important}

  /* ─── 13. INDEX hero CTA compact ────────────────────────────── */
  .hero{min-height: 70vh !important}
  .hero-cta, .hero-cta-row{
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .hero .label, .hero-meta{
    font-size: 10px !important;
    letter-spacing: .18em !important;
  }
  .tier-slim, .cerchi-slim{
    padding: 32px 16px !important;
  }
  .tier-slim h2, .cerchi-slim h2{font-size: 22px !important}
  .tier-slim p, .cerchi-slim p{font-size: 13.5px !important; line-height: 1.55 !important}

  /* ─── 14. CONTATTI · contact-cta tighter ────────────────────── */
  .contact-cta{
    padding: 36px 16px !important;
  }
  .contact-cta h2{font-size: 24px !important}
  .contact-cta p, .contact-cta .lead{font-size: 13.5px !important; line-height: 1.55 !important}

  /* ─── 15. LEGAL pages typography ────────────────────────────── */
  main.legal{padding: 32px 18px 56px !important}
  .legal h1{font-size: 28px !important; line-height: 1.1 !important; margin-bottom: 10px !important}
  .legal h2{font-size: 16px !important; margin: 28px 0 10px !important}
  .legal h3{font-size: 13.5px !important; margin: 14px 0 6px !important}
  .legal p, .legal li{font-size: 13px !important; line-height: 1.6 !important}
  .legal .updated{margin-bottom: 32px !important; font-size: 11px !important}
  .legal .principle{padding: 14px 16px !important; margin: 12px 0 !important}
  .legal .principle h3{margin: 0 0 6px !important}
  .legal .principle p{font-size: 12.5px !important}

  /* ─── 16. CHATBOT / FLOATING bottom-right tighter ────────────── */
  body{padding-bottom: 0 !important}
}

/* ─── 17. EXTRA-SMALL ≤380px (Galaxy Fold / very tight) ───────── */
@media (max-width: 380px){
  .family-deep-head h2{font-size: 19px !important}
  .opera-title{font-size: 20px !important}
  .collection-block .collection-title{font-size: 17px !important}
  #pezzi-eccezione .alta-pezzo{padding: 18px 14px !important}
  /* Stretchable: fallback to 2-col when screen too narrow for 3 */
  .sku-grid,
  .sku-grid.cols-3,
  .sku-grid.cols-4,
  .bc-grid{
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .sku-card-img img,
  .bc-card-img img{max-height: 150px !important}
  .sku-card-name,
  .bc-card-name{font-size: 12px !important}
}

/* ─── 18. TAP TARGETS still ≥ 44px (WCAG) ─────────────────────── */
@media (max-width: 768px){
  a.btn, button.btn, .cta-btn, .d-cta, .d-burger, #burger, .btn-primary, .btn-secondary{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ─── 19. LEGAL TABLES horizontal scroll fix ─────────────────── */
  table.legal-table,
  .legal table{
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    font-size: 12px !important;
  }
  table.legal-table th,
  table.legal-table td{
    padding: 8px 10px !important;
    white-space: normal !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v6.22b — DEEP CONTENT COMPRESSION (catalogo pages)
   Goal: stretchable & alta-gioielleria → -25% more height each
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){

  /* ─── 0. PRODUCT/LIFESTYLE IMAGE RULES (fix cropping issues) ─── */
  /* Jewelry product cards: CONTAIN (never crop the piece), background fills */
  .sku-card-img,
  .bc-card-img,
  .variant picture,
  .variant img,
  .pezzo-image-big img,
  .pezzo-image-big picture,
  .pezzo-image-pair img,
  .pezzo-gallery img{
    background: #faf7f1 !important;
  }
  .sku-card-img img,
  .bc-card-img img,
  .variant img,
  .pezzo-image-big img,
  .pezzo-image-pair img,
  .pezzo-gallery img{
    object-fit: contain !important;
    object-position: center !important;
  }
  /* Family chip thumbnails: contain so the ring shape isn't cropped */
  .fam-chip-img,
  .fam-chip picture,
  .fam-chip img{
    background: #faf7f1 !important;
  }
  .fam-chip img{
    object-fit: contain !important;
    object-position: center !important;
  }
  /* Lifestyle (worn) photos: COVER but center properly so model face stays visible */
  .lifestyle-figure img{
    object-fit: cover !important;
    object-position: center 30% !important;
  }
  .lifestyle-figure.is-portrait img{
    object-fit: cover !important;
    object-position: center 20% !important;
    max-height: 520px !important;
  }
  .lifestyle-figure.is-strip img{
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* ─── 0b. PROPER MARGINS — content not stuck to edges ───────── */
  /* Hero kept full-bleed; content sections get 18px side padding */
  .stretch-hero-inner,
  .page-hero-inner{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .page-families,
  .page-collections,
  .family-deep,
  .bracelets-catalogue,
  .personalization-showcase,
  .formats-showcase,
  .opere,
  .alta-pezzi,
  .mid-block,
  .note-block,
  .processo,
  .page-cta,
  .page-cta-new,
  .page-classic-cats,
  .cta-final,
  .d-atelier-block,
  .tier-slim,
  .cerchi-slim,
  .contact-cta{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  /* Inner containers no double padding */
  .page-families-inner,
  .family-deep-inner,
  .bracelets-catalogue-inner,
  .page-collections-inner,
  .page-classic-cats-inner,
  .opere-inner,
  .alta-pezzi-inner{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Lifestyle figures still slightly inset */
  .lifestyle-figure{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Footer gets its own margin */
  .footer, footer.footer{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ─── 20. ALTA · .opere .collezione (each ~3500px → ~2200px) ─── */
  .opere{padding: 24px 0 !important}
  .opere-inner{padding: 0 !important}
  .collezione{
    padding: 24px 16px !important;
    margin-bottom: 24px !important;
  }
  .collezione-header{
    margin-bottom: 18px !important;
    padding-bottom: 14px !important;
  }
  .coll-title-block{margin-bottom: 12px !important}
  .coll-title-block h2{font-size: 22px !important; line-height: 1.12 !important; margin: 4px 0 6px !important}
  .coll-title-block .coll-eyebrow,
  .coll-eyebrow{font-size: 10px !important; letter-spacing: .22em !important; margin-bottom: 6px !important}
  .coll-title-block .coll-tagline,
  .coll-tagline{font-size: 13px !important; line-height: 1.45 !important; margin: 6px 0 0 !important}
  .coll-meta-block{margin-top: 12px !important}
  .coll-meta{
    display: block !important;
    margin: 0 !important;
  }
  .coll-meta > div{
    padding: 6px 0 !important;
    border-bottom: 1px solid var(--d-line, rgba(0,0,0,.06)) !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
  }
  .coll-meta > div:last-child{border-bottom: none !important}
  .coll-meta dt{
    font-size: 9.5px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--d-muted, #6b6258) !important;
    margin: 0 !important;
    min-width: 78px !important;
    flex-shrink: 0 !important;
  }
  .coll-meta dd{
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    flex: 1 !important;
  }
  .coll-intro{
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin: 14px 0 18px !important;
  }

  /* ─── 21. ALTA · .pezzo blocks inside collezione ─────────────── */
  .pezzo{margin-bottom: 18px !important}
  .pezzo-image-big{margin-bottom: 12px !important}
  .pezzo-image-big img,
  .pezzo-image-big picture{
    border-radius: 2px;
    max-height: 380px !important;
    object-fit: cover !important;
  }
  .pezzo-gallery{
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .pezzo-image-pair{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .pezzo-image-pair figure,
  .pezzo-gallery figure{margin: 0 !important}
  .pezzo-image-pair img,
  .pezzo-gallery img{
    max-height: 200px !important;
    object-fit: cover !important;
  }
  .pezzo-body{padding: 0 !important}
  .pezzo-body h3{font-size: 17px !important; margin: 0 0 6px !important}
  .pezzo-body p{font-size: 12.5px !important; line-height: 1.55 !important; margin: 0 0 10px !important}
  .pezzo-specs,
  .pezzo dl.pezzo-specs{
    margin: 12px 0 0 !important;
    display: block !important;
  }
  .pezzo-specs > div{
    padding: 6px 0 !important;
    border-bottom: 1px solid var(--d-line, rgba(0,0,0,.06)) !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
  }
  .pezzo-specs > div:last-child{border-bottom: none !important}
  .pezzo-specs dt{
    font-size: 9.5px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    min-width: 78px !important;
    flex-shrink: 0 !important;
  }
  .pezzo-specs dd{
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    flex: 1 !important;
  }

  /* ─── 22. ALTA · alta-pezzo (#duetto etc) — variant-grid ─────── */
  .alta-pezzo{
    padding: 22px 16px !important;
    margin-bottom: 16px !important;
  }
  .alta-pezzo-head{margin-bottom: 14px !important}
  .alta-pezzo-head h3{font-size: 19px !important; margin: 0 0 8px !important; line-height: 1.15 !important}
  .alta-pezzo-head p{font-size: 13px !important; line-height: 1.55 !important; margin: 0 !important}
  .variant-grid,
  .variant-grid-2,
  .variant-grid-3{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 14px 0 !important;
  }
  /* 3-variant grids: 2+1 wrap layout (third item spans nothing extra) */
  .variant{margin: 0 !important}
  .variant figure,
  .variant{padding: 0 !important}
  .variant picture{
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  .variant img{
    width: 100% !important;
    height: auto !important;
    min-height: 150px !important;
    max-height: 220px !important;
    object-fit: contain !important;
    object-position: center !important;
    aspect-ratio: auto !important;
  }
  .variant figcaption{
    font-size: 10.5px !important;
    padding: 6px 4px 0 !important;
    line-height: 1.3 !important;
    letter-spacing: .08em !important;
  }
  .alta-pezzo .collection-specs{
    margin-top: 10px !important;
    display: block !important;
  }
  .alta-pezzo .collection-specs > div{padding: 5px 0 !important}

  /* ─── 23. STRETCHABLE · Tennis + Confetti families ───────────── */
  /* These have 4-5 SKU cards each. Compress card padding + meta. */
  #fam-tennis .bc-cards,
  #fam-confetti .bc-cards{
    gap: 8px !important;
  }
  /* Cards: tighter padding, smaller copy */
  .bc-card{border-radius: 2px;}
  .bc-card-img,
  .bc-card picture,
  .bc-card-img img{
    aspect-ratio: 1 !important;
    object-fit: cover !important;
  }
  .bc-card-img img{max-height: 130px !important}
  .bc-card-meta{padding: 8px 6px !important; gap: 2px !important}
  .bc-card-name{font-size: 11.5px !important; line-height: 1.18 !important}
  .bc-card-code{font-size: 7.5px !important; letter-spacing: .1em !important}
  .bc-card-desc{font-size: 10px !important; line-height: 1.3 !important; margin-top: 0 !important}
  /* 3-col grid for bracelet cards on stretchable */
  .bc-grid{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }

  /* ─── 24. STRETCHABLE family-deep SKU cards/grid ─────────────── */
  .sku-card{border-radius: 2px}
  .sku-card-img{aspect-ratio: 1 !important}
  .sku-card-img img{
    max-height: 130px !important;
    object-fit: cover !important;
  }
  .sku-card-meta{padding: 8px 6px !important; gap: 2px !important}
  .sku-card-name{font-size: 11.5px !important; line-height: 1.2 !important}
  .sku-card-code{font-size: 7.5px !important; letter-spacing: .1em !important; margin-bottom: 2px !important}
  .sku-card-stones{font-size: 10px !important; line-height: 1.3 !important}
  .sku-card-price{font-size: 10px !important}
  /* 3-col grid for ring SKUs on stretchable */
  .sku-grid,
  .sku-grid.cols-3,
  .sku-grid.cols-4{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }

  /* ─── 25. NOTE-BLOCK / MID-BLOCK on alta ─────────────────────── */
  .note-block, .mid-block{padding: 28px 16px !important}
  .note-block h2, .mid-block h2{font-size: 22px !important; margin-bottom: 12px !important}
  .note-block p, .mid-block p{font-size: 13.5px !important; line-height: 1.6 !important}

  /* ─── 26. PROCESSO section ───────────────────────────────────── */
  .processo{padding: 32px 16px !important}
  .processo h2{font-size: 22px !important; margin-bottom: 16px !important}
  .processo-steps{gap: 14px !important; margin-top: 18px !important}
  .processo-step{padding: 16px 14px !important}
  .processo-step h4{font-size: 14px !important; margin-bottom: 6px !important}
  .processo-step p{font-size: 12.5px !important; line-height: 1.5 !important}
  .processo-step .step-n{font-size: 18px !important; margin-bottom: 6px !important}

  /* ─── 27. INDEX page extra polish ────────────────────────────── */
  .tier-cards, .tier-grid{gap: 10px !important}
  .tier-card{padding: 18px 16px !important}
  .tier-card h3{font-size: 17px !important; margin-bottom: 6px !important}
  .tier-card p{font-size: 12.5px !important; line-height: 1.5 !important}

  /* ─── 28. PAGE-FAMILIES (chips strip on stretchable) ─────────── */
  .page-families{padding: 24px 12px !important}
  .page-families-inner{gap: 16px !important}
  .fam-filter{margin-bottom: 16px !important; gap: 6px !important}
  /* 3-col fam-strip for consistency with SKU grids */
  .fam-strip{gap: 8px !important; grid-template-columns: repeat(3, 1fr) !important}
  .fam-chip{padding: 8px !important}
  .fam-chip img{aspect-ratio: 1 !important; object-fit: cover !important}
  .fam-chip h3{font-size: 12px !important; margin: 6px 0 2px !important; line-height: 1.15 !important}
  .fam-chip-tag{font-size: 9px !important; letter-spacing: .1em !important}

  /* ─── 29. CLASSIC · page-classic-cats compact ────────────────── */
  .page-classic-cats{padding: 28px 16px !important}
  .page-classic-cats-inner{padding: 0 !important}
  .classica-categories{gap: 18px !important; margin-top: 18px !important}
  .classica-cat{margin-bottom: 0 !important}
  .classica-cat-head{margin-bottom: 12px !important; padding-bottom: 8px !important}
  .classica-cat-head h3{font-size: 17px !important; margin: 0 0 4px !important}
  .classica-cat-head .cat-tag,
  .classica-cat-head p{font-size: 11px !important; letter-spacing: .14em !important; margin: 0 !important}
  .classica-cat-grid{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .classica-type{
    padding: 10px 12px !important;
    min-height: 44px !important;
  }
  .classica-type-name{font-size: 12.5px !important; line-height: 1.2 !important}
  .classica-type-meta{font-size: 10px !important; letter-spacing: .1em !important; margin-top: 2px !important}

  /* ─── 30. LIFESTYLE FIGURES inside catalog sections ──────────── */
  /* Already capped to 380 in v6.19, push to 280 inside family blocks */
  .family-deep .lifestyle-figure.is-strip img,
  .bc-family .lifestyle-figure.is-strip img,
  section[id^="fam-"] .lifestyle-figure.is-strip img{
    max-height: 280px !important;
  }
  .family-deep .lifestyle-figure,
  .bc-family .lifestyle-figure,
  section[id^="fam-"] .lifestyle-figure{
    margin: 14px 0 18px !important;
  }
  .lifestyle-figure figcaption{
    padding: 6px 0 0 !important;
    font-size: 10px !important;
    letter-spacing: .14em !important;
  }
}



/* ════════════════════════════════════════════════════════════════════
   v6.22c — ATELIER PAGE · contact block + FAQ accordion
   ════════════════════════════════════════════════════════════════════ */

/* ─── Contact block ──────────────────────────────────────────── */
.d-contact-block{
  padding: 80px 32px;
  background: var(--d-paper-light, #fdfbf6);
  border-top: 1px solid var(--d-line, #e8dfcd);
}
.d-contact-inner{
  max-width: 1100px;
  margin: 0 auto;
}
.d-contact-head{margin-bottom: 48px; text-align: center}
.d-contact-head .d-eyebrow{
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--d-muted, #8c6e3a);
  margin-bottom: 18px;
  font-weight: 500;
}
.d-contact-head h2{
  font-family: 'Inter', sans-serif;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 300;
  line-height: 1.1;
  margin: 0 0 14px;
  letter-spacing: -.015em;
  color: var(--d-ink, #1a1612);
}
.d-contact-head h2 em{font-style: italic; color: var(--d-accent, #8c6e3a); font-weight: 400}
.d-contact-head p{
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--d-muted, #6b6258);
  max-width: 560px;
  margin: 0 auto;
}
.d-contact-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}
.d-contact-card{
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  background: #fff;
  border: 1px solid var(--d-line, #e8dfcd);
  border-radius: 2px;
  text-decoration: none;
  color: inherit;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.d-contact-card:hover{
  border-color: var(--d-accent, #8c6e3a);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(26, 22, 18, .06);
}
.d-contact-card-eyebrow{
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--d-accent, #8c6e3a);
  margin-bottom: 14px;
  font-weight: 500;
}
.d-contact-card-value{
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--d-ink, #1a1612);
  margin-bottom: 8px;
  line-height: 1.25;
  word-break: break-word;
}
.d-contact-card-meta{
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--d-muted, #6b6258);
  line-height: 1.4;
  margin-top: auto;
}
.d-contact-cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
}
.d-btn-primary{
  background: var(--d-ink, #1a1612) !important;
  color: var(--d-paper, #faf7f1) !important;
  padding: 14px 28px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  font-weight: 500;
  transition: background .25s;
}
.d-btn-primary:hover{background: var(--d-accent, #8c6e3a) !important}

/* ─── FAQ accordion (uses <details>/<summary>) ──────────────── */
.d-faq-block{
  padding: 80px 32px;
  background: var(--d-paper, #faf7f1);
}
.d-faq-inner{
  max-width: 880px;
  margin: 0 auto;
}
.d-faq-head{margin-bottom: 36px; text-align: center}
.d-faq-head .d-eyebrow{
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--d-accent, #8c6e3a);
  margin-bottom: 14px;
  font-weight: 500;
}
.d-faq-head h2{
  font-family: 'Inter', sans-serif;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 300;
  margin: 0;
  letter-spacing: -.012em;
  color: var(--d-ink, #1a1612);
}
.d-faq-list{
  display: flex;
  flex-direction: column;
}
.d-faq-item{
  border-bottom: 1px solid var(--d-line, #e8dfcd);
}
.d-faq-item summary{
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--d-ink, #1a1612);
  padding: 22px 36px 22px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: color .2s;
}
.d-faq-item summary::-webkit-details-marker{display: none}
.d-faq-item summary:hover{color: var(--d-accent, #8c6e3a)}
.d-faq-item summary::after{
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 200;
  color: var(--d-accent, #8c6e3a);
  transition: transform .25s ease;
}
.d-faq-item[open] summary::after{
  content: "−";
}
.d-faq-body{
  padding: 0 0 22px 0;
  font-family: 'Playfair Display', serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--d-muted, #4a4540);
}
.d-faq-body p{margin: 0 0 12px}
.d-faq-body p:last-child{margin-bottom: 0}
.d-faq-body strong{color: var(--d-ink, #1a1612); font-weight: 600}
.d-faq-body a{color: var(--d-accent, #8c6e3a); border-bottom: 1px solid currentColor}
.d-faq-foot{
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--d-line, #e8dfcd);
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--d-muted, #6b6258);
}
.d-faq-foot a{color: var(--d-accent, #8c6e3a); border-bottom: 1px solid currentColor}

/* ─── Responsive: atelier blocks on mobile ──────────────────── */
@media (max-width: 768px){
  .d-contact-block{padding: 36px 18px !important}
  .d-contact-head{margin-bottom: 24px !important}
  .d-contact-head .d-eyebrow{font-size: 10px !important; margin-bottom: 12px !important}
  .d-contact-head h2{font-size: 22px !important; margin-bottom: 10px !important}
  .d-contact-head p{font-size: 13.5px !important; line-height: 1.5 !important}
  .d-contact-grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 22px !important;
  }
  .d-contact-card{
    padding: 16px 14px !important;
    min-height: 110px !important;
  }
  .d-contact-card-eyebrow{font-size: 9px !important; margin-bottom: 10px !important; letter-spacing: .22em !important}
  .d-contact-card-value{font-size: 13px !important; margin-bottom: 6px !important; line-height: 1.2 !important}
  .d-contact-card-meta{font-size: 11px !important; line-height: 1.35 !important}
  .d-contact-cta-row{gap: 10px !important; flex-direction: column !important; margin-top: 20px !important}
  .d-contact-cta-row .d-btn-primary,
  .d-contact-cta-row .d-btn-link{width: 100% !important; max-width: 320px !important; text-align: center !important}

  .d-faq-block{padding: 36px 18px !important}
  .d-faq-head{margin-bottom: 22px !important}
  .d-faq-head .d-eyebrow{font-size: 10px !important}
  .d-faq-head h2{font-size: 22px !important}
  .d-faq-item summary{font-size: 13.5px !important; padding: 18px 30px 18px 0 !important; min-height: 44px}
  .d-faq-item summary::after{font-size: 18px !important}
  .d-faq-body{font-size: 13px !important; line-height: 1.6 !important; padding: 0 0 18px !important}
  .d-faq-foot{font-size: 12.5px !important; margin-top: 24px !important; padding-top: 18px !important}
}


/* ═══════════════════════════════════════════════
   LANGUAGE SWITCHER · v6.23
   ═══════════════════════════════════════════════ */

/* ───── Language switcher (compact pill in header) ───── */
.d-lang-switch{
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-left: 14px;
  padding: 0;
  border: 1px solid var(--d-line, #e8dfcd);
  border-radius: 100px;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  overflow: hidden;
  vertical-align: middle;
}
.d-lang-switch a, .d-lang-switch span{
  padding: 5px 10px;
  text-decoration: none;
  color: var(--d-muted, #6b6258);
  transition: background .2s, color .2s;
  line-height: 1;
  font-weight: 500;
}
.d-lang-switch .is-current{
  background: var(--d-ink, #1a1612);
  color: var(--d-paper, #faf7f1);
  cursor: default;
}
.d-lang-switch a:hover{
  color: var(--d-ink, #1a1612);
  background: var(--d-paper-light, #fdfbf6);
}

/* MOBILE: float as fixed pill, always visible top-right */
@media (max-width: 768px){
  .d-lang-switch{
    display: inline-flex !important;
    position: fixed !important;
    top: 8px !important;
    right: 10px !important;
    z-index: 9999 !important;
    margin: 0 !important;
    font-size: 9px !important;
    background: rgba(250, 247, 241, 0.95) !important;
    backdrop-filter: blur(6px);
    border-color: rgba(140, 110, 58, 0.4) !important;
    box-shadow: 0 2px 8px rgba(26, 22, 18, .12);
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
  }
  .d-lang-switch a, .d-lang-switch span{
    padding: 5px 9px !important;
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    visibility: visible !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v6.24 — BURGER drawer: force full-viewport coverage when open
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 920px){
  /* The .nav.is-open drawer must always fill the viewport */
  header.header > nav.nav.is-open,
  body > nav.nav.is-open,
  nav.nav.is-open{
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    z-index: 9990 !important;
    background: var(--d-paper, #faf7f1) !important;
    padding: 80px 28px 40px !important;
    overflow-y: auto !important;
    visibility: visible !important;
    transform: none !important;
  }
  nav.nav.is-open .nav-inner{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  nav.nav.is-open .nav-link{
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: var(--d-ink, #1a1612) !important;
    padding: 22px 0 !important;
    border-bottom: 1px solid var(--d-line, #e8dfcd) !important;
    text-align: left !important;
    display: block !important;
    width: 100% !important;
    background: transparent !important;
  }
  nav.nav.is-open .nav-link.is-cta{
    background: var(--d-ink, #1a1612) !important;
    color: var(--d-paper, #faf7f1) !important;
    padding: 18px 24px !important;
    margin-top: 20px !important;
    text-align: center !important;
    border: none !important;
    border-radius: 3px !important;
  }
  /* Burger pinned top-right when open */
  .burger.open{
    position: fixed !important;
    top: 22px !important;
    right: 22px !important;
    z-index: 9999 !important;
  }
  /* Hide lang switcher when drawer open to avoid overlap */
  body:has(nav.nav.is-open) .d-lang-switch,
  body:has(.d-mob-menu.open) .d-lang-switch{
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v6.25 — Lifestyle "worn stack" photos: pull focus to bottom
   (the products are at the bottom of these compositions, NOT the centre)
   ════════════════════════════════════════════════════════════════════ */

/* Lifestyle worn photos: per-image object-position set inline on <img>.
   Global CSS provides container sizing only. */
.lifestyle-figure.is-strip img,
.lifestyle-figure.is-strip picture img{
  object-fit: cover !important;
  /* object-position overridden per-image via inline style */
}

/* Desktop: 3:2 ratio crops ~30% of the 9:16 portrait image */
@media (min-width: 769px){
  .lifestyle-figure.is-strip{
    aspect-ratio: 3/2 !important;
    max-height: 520px !important;
    overflow: hidden !important;
  }
  .lifestyle-figure.is-strip picture,
  .lifestyle-figure.is-strip img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* Mobile: 4:3 ratio — good balance, per-image position handles centering */
@media (max-width: 768px){
  .lifestyle-figure.is-strip{
    aspect-ratio: 4/3 !important;
    max-height: 420px !important;
    overflow: hidden !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .lifestyle-figure.is-strip picture,
  .lifestyle-figure.is-strip img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v6.25 — STICKY HEADER + ANNOUNCE BAR (always pinned at top)
   User request: announce + DONATI logo + sandwich must stay visible
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   v6.25 FINAL — FIXED HEADER + ANNOUNCE BAR
   ════════════════════════════════════════════════════════════════════
   STRATEGY: position:fixed (not sticky) because body has overflow:hidden
   which creates a scroll container that breaks position:sticky on body
   children. position:fixed always pins to viewport regardless.
   
   Compensation: body needs padding-top equal to (announce + header) heights
   so content isn't hidden under the fixed elements.
   ════════════════════════════════════════════════════════════════════ */

/* Announce bar: pinned to viewport top */
.announce,
body > .announce,
.d-announce{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 200 !important;
  background: var(--paper-light, var(--d-paper-light, #fdfbf6)) !important;
  margin: 0 !important;
}

/* Header (DONATI logo + util + burger): pinned below the announce bar */
.header,
body > .header,
header.header,
.d-header{
  position: fixed !important;
  top: 33px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 199 !important;
  margin: 0 !important;
  background-color: rgba(250, 247, 241, .97) !important;
  backdrop-filter: saturate(180%) blur(8px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(8px) !important;
  border-bottom: 1px solid var(--line-soft, var(--d-line-soft, #f0e8d6)) !important;
}

/* COMPENSATION: push main body content down so it isn't covered.
   Desktop: 33px announce + ~73px header = ~106px */
body{
  padding-top: 106px !important;
}

/* Mobile: announce ~30px + header ~60px = ~90px */
@media (max-width: 768px){
  .header,
  body > .header,
  header.header,
  .d-header{
    top: 30px !important;
  }
  body{
    padding-top: 90px !important;
  }
}

/* Very small phones */
@media (max-width: 380px){
  .announce,
  body > .announce,
  .d-announce{
    padding: 7px 0 !important;
  }
  .header,
  body > .header,
  header.header,
  .d-header{
    top: 28px !important;
  }
  body{
    padding-top: 88px !important;
  }
}

/* Language switcher: position higher up to overlap announce bar's right side,
   above all fixed elements. */
.d-lang-switch{
  z-index: 9999 !important;
}

/* ════════════════════════════════════════════════════════════════════
   v6.26 FIX — Burger menu z-index above fixed header
   d-mob-menu was z:99 but header is z:199 → menu opened BEHIND header
   ════════════════════════════════════════════════════════════════════ */
.d-mob-menu,
.d-mob-menu.open{
  z-index: 9990 !important;
}
/* Close button inside open mob-menu must also be above */
.d-burger.open{
  position: fixed !important;
  top: 22px !important;
  right: 22px !important;
  z-index: 9999 !important;
}

/* Body padding-top forced via CSS var — overrides all inline 0 rules */
body{
  padding-top: var(--d-header-offset, 106px) !important;
}
:root{
  --d-header-offset: 106px;
}
@media (max-width: 768px){
  :root{ --d-header-offset: 90px; }
}
@media (max-width: 380px){
  :root{ --d-header-offset: 88px; }
}

/* ════════════════════════════════════════════════════════════════════
   v6.26b — FIX: Skip-link visually hidden (was visible in page flow)
   ════════════════════════════════════════════════════════════════════ */
.skip-link,
a.skip-link{
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
}
.skip-link:focus,
a.skip-link:focus{
  position: fixed !important;
  left: 20px !important;
  top: 20px !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  z-index: 99999 !important;
  background: var(--d-ink, #1a1612) !important;
  color: var(--d-paper, #faf7f1) !important;
  padding: 12px 20px !important;
}