/* ============================================================
       DESIGN TOKENS — Unchanged from original brand palette
    ============================================================ */
    :root {
      --ink:        #191512;
      --muted:      #7c7068;
      --soft:       #f6f0e8;
      --paper:      #fffaf3;
      --sand:       #e8d8c5;
      --terracotta: #9f4f3d;
      --cocoa:      #5d3e32;
      --gold:       #b8955a;
      --sage:       #465347;
      --ivory:      #fffdf8;
      --line:       rgba(25, 21, 18, 0.12);
      /* G3 (M4): --shadow so continua valendo pro modal e pro card de contato,
         que sao os 2 unicos elementos que de fato flutuam sobre a pagina.
         --radius cai de 28 pra 6 - o retangulo arredondado sai do vocabulario. */
      --shadow:     0 22px 60px rgba(33, 25, 19, 0.12);
      --radius:     6px;
      --max:        1180px;

      /* IMPROVEMENT: Urgency color token — used sparingly for stock/urgency signals */
      --urgency: #8b3a2a;

      /* ============================================================
         G1 — FORMA: larguras (M1) e ritmo vertical (M3)
         direcao-moderna-chosen.md. --max fica (usado por nav/outros
         elementos fora do escopo desta fatia); as secoes de conteudo
         migram para o sistema de 4 larguras abaixo.
      ============================================================ */
      --w-bleed:  100vw;
      --w-wide:   min(1560px, 100vw - 48px);
      --w-text:   min(1080px, 100vw - 48px);
      --w-narrow: min(680px,  100vw - 48px);
      --gutter:   clamp(20px, 3vw, 48px);

      --pad-air:   clamp(112px, 15vh, 200px);
      --pad-base:  clamp(64px,  8vh, 104px);
      --pad-tight: clamp(28px,  4vh,  48px);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: linear-gradient(180deg, var(--ivory) 0%, var(--paper) 42%, var(--soft) 100%);
      color: var(--ink);
      overflow-x: hidden;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
    }

    ::selection { background: rgba(159, 79, 61, 0.18); color: var(--ink); }

    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; }

    a:focus-visible,
    button:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 4px;
    }

    /* ============================================================
       ANNOUNCEMENT BAR
       IMPROVEMENT: Added emoji icon + cleaner wording for scarcity
    ============================================================ */
    .announcement {
      background: linear-gradient(90deg, var(--ink), var(--sage));
      color: #fff;
      text-align: center;
      font-size: 12px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 10px 16px;
      line-height: 1.4;
    }

    /* ============================================================
       NAV — Sticky, glassmorphism
       IMPROVEMENT: Added mobile hamburger-less nav with CTA always visible
    ============================================================ */
    .nav {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(18px);
      background: rgba(255, 253, 248, 0.92);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 14px 40px rgba(33, 25, 19, 0.05);
    }

    .nav-inner {
      max-width: var(--max);
      margin: 0 auto;
      padding: 16px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }

    .brand {
      display: flex;
      flex-direction: column;
      line-height: 1;
      flex-shrink: 0;
    }

    .brand strong {
      font-family: "Playfair Display", serif;
      font-size: clamp(20px, 3vw, 30px);
      letter-spacing: -0.025em;
      font-weight: 600;
    }

    .brand span {
      margin-top: 5px;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: var(--muted);
      font-weight: 600;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 22px;
      font-size: 12px;
      color: var(--muted);
      font-weight: 600;
    }

    .nav-links :is(a, button):hover { color: var(--ink); }

    /* IMPROVEMENT: Language switcher — more compact on desktop */
    .lang-switcher {
      display: inline-flex;
      gap: 4px;
      padding: 4px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,0.48);
      flex-shrink: 0;
    }

    .lang-btn {
      border: 0;
      background: transparent;
      color: var(--muted);
      border-radius: 999px;
      padding: 7px 9px;
      cursor: pointer;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.08em;
      transition: 0.2s ease;
    }

    .lang-btn.active,
    .lang-btn:hover {
      background: var(--ink);
      color: #fff;
    }

    /* ============================================================
       BUTTONS
       IMPROVEMENT: min-height 48px for touch (WCAG)
    ============================================================ */
    /* G3 (M4): pill 999px -> 4px, altura 52px, padding 0 28px */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      padding: 0 28px;
      border-radius: 4px;
      border: 1px solid var(--ink);
      background: var(--ink);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
      cursor: pointer;
      white-space: nowrap;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(25,21,18,0.18);
    }

    .btn:active { transform: translateY(0); }

    .btn.ghost {
      background: transparent;
      color: var(--ink);
    }

    .btn.ghost:hover {
      background: var(--ink);
      color: #fff;
    }

    .btn.soft {
      background: var(--paper);
      color: var(--ink);
      border-color: var(--line);
    }

    .btn.soft:hover { background: var(--soft); }

    /* "Mare" F1 (D3): the infinite box-shadow pulse was removed. box-shadow is a
       paint property and the loop ran above the fold, repainting through the LCP
       window. Emphasis on the sticky CTA is weight/contrast, not a pulse. */

    /* ============================================================
       HERO
       IMPROVEMENT: Above-the-fold restructure
       - Value prop more immediate
       - CTA above fold on all screens
       - Social proof pills visible without scroll
       - Reduced hero-media height on mobile to show more text ATF
    ============================================================ */
    /* G4 (M4/M6): hero vira um banner full-bleed unico - a moldura de vitrine
       (texto numa coluna, foto noutra) sai. O .hero-overlay, que ja existia so
       pro mobile (A2), passa a ser o UNICO hero, em qualquer largura; o
       .hero-copy de dois cartoes fica pra tras (ver .hero-copy abaixo). */
    .hero {
      display: block;
      max-width: none;
      margin: 0;
      padding: 0;
      position: relative;
    }

    .hero-copy { display: none; }

    .eyebrow {
      display: inline-flex;
      gap: 10px;
      align-items: center;
      font-size: 11px;
      line-height: 1;
      letter-spacing: 0.20em;
      text-transform: uppercase;
      color: var(--terracotta);
      font-weight: 600;
      margin-bottom: 16px;
    }

    .eyebrow::before {
      content: "";
      width: 28px;
      height: 1px;
      background: currentColor;
      flex-shrink: 0;
    }

    h1, h2, h3 {
      font-family: "Playfair Display", serif;
      margin: 0;
      letter-spacing: -0.034em;
      font-weight: 600;
      text-wrap: balance;
    }

    /* G2 (M2/V1) — a voz do hero salta de "grande" pra "impossivel de nao ver".
       148px no clamp maximo; 780px de teto de largura saia, senao o titulo
       nunca chega perto do maximo em telas reais. */
    h1 {
      font-size: clamp(52px, 11.5vw, 148px);
      line-height: 0.84;
      letter-spacing: -0.045em;
      max-width: none;
    }

    /* IMPROVEMENT: Hero subtitle is more conversion-focused — leads with "Iceland's only" */
    .hero-sub {
      font-size: clamp(16px, 1.8vw, 20px);
      color: var(--muted);
      line-height: 1.7;
      max-width: 560px;
      margin: 22px 0 0;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 26px;
    }

    /* IMPROVEMENT: Social proof pills now use checkmarks for trust signal */
    .hero-proof {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px;
    }

    .proof-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 8px 12px;
      background: rgba(255,255,255,0.72);
      box-shadow: 0 8px 22px rgba(33,25,19,0.04);
      font-size: 12px;
      color: var(--muted);
      font-weight: 600;
    }

    .proof-pill::before {
      content: "✓";
      color: var(--terracotta);
      font-weight: 900;
      font-size: 11px;
    }

    /* G4: sem min-height fixo - quem manda na altura agora e .hero-card.main. */
    .hero-media {
      position: relative;
      min-height: 0;
    }

    /* G4 (M6): .hero-overlay era "so mobile" (A2); agora e o unico hero, em
       qualquer largura. Ancorado embaixo da foto (justify-content:flex-end),
       cor branca porque so existe sobre a foto com o scrim abaixo. */
    .hero-overlay {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-end;
      position: absolute;
      inset: 0;
      padding: clamp(24px, 5vw, 64px) clamp(20px, 5vw, 64px) clamp(28px, 7vh, 64px);
      z-index: 2;
      color: #fff;
    }

    .hero-overlay > .eyebrow,
    .hero-overlay > .hero-overlay-title,
    .hero-overlay > .hero-actions {
      --mare-rise: var(--motion-shift-hero);
      opacity: 0;
      animation: mare-ar-rise var(--motion-dur-slow) var(--motion-ease-out) both;
    }
    .hero-overlay > .hero-overlay-title { animation-delay: var(--motion-stagger); }
    .hero-overlay > .hero-actions       { animation-delay: calc(var(--motion-stagger) * 2); }

    /* AA fix (post-argos): 1,95:1/3,74:1 medidos (falha nos dois) com opacidade .8
       direto sobre a foto. Sem cor nova - so o proprio ink do scrim (rgba(25,21,18,..),
       ja usado em .hero-card.main::after) num chip local atras do texto, e o branco
       full-opacity. alpha 0.62 cobre o pior caso (pixel quase branco da foto) com
       margem: ver calculo no relatorio de forma. Fecha D-7 sem mexer no gradiente
       global (formula do M6 travada) nem em paleta/tipografia. */
    .hero-overlay .eyebrow {
      color: #fff;
      margin-bottom: 12px;
      padding: 3px 8px;
      background: rgba(25,21,18,0.62);
      border-radius: 3px;
    }
    .hero-overlay .eyebrow::before { background: rgba(255,255,255,0.8); }

    /* G4 (M6): titulo sobre foto - clamp largo pro desktop; o mobile (<=640px)
       recebe os numeros exatos do M6 mais abaixo. */
    .hero-overlay h1,
    .hero-overlay-title {
      font-size: clamp(38px, 7.5vw, 132px);
      line-height: 0.88;
      color: #fff;
      margin: 0 0 20px;
      text-shadow: 0 2px 16px rgba(0,0,0,0.28);
      font-family: "Playfair Display", serif;
      font-weight: 600;
      letter-spacing: -0.034em;
      text-wrap: balance;
    }

    .hero-overlay .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    /* Botao branco solido sobre foto escura (era .pulse-cta, removido em F1) */
    .hero-overlay .hero-actions .btn:not(.ghost) {
      background: #fff;
      color: var(--ink);
      border-color: #fff;
    }
    .hero-overlay .btn.ghost {
      background: rgba(255,255,255,0.15);
      color: #fff;
      border-color: rgba(255,255,255,0.6);
      backdrop-filter: blur(10px);
    }

    /* G4: .hero-proof (coluna de texto antiga) sai com o .hero-copy. A linha
       de prova unica (.hero-proof-mobile) era "so mobile"; agora e a UNICA,
       e ja vem full-bleed de graca porque .hero perdeu max-width/padding. */
    .hero-proof { display: none; }
    .hero-proof-mobile {
      display: flex;
      gap: 8px;
      padding: 12px 16px;
      overflow-x: auto;
      scrollbar-width: none;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
    }
    .hero-proof-mobile::-webkit-scrollbar { display: none; }
    .hero-proof-mobile .proof-pill {
      flex: 0 0 auto;
      font-size: 11px;
      padding: 7px 11px;
      white-space: nowrap;
    }

    /* ============================================================
       "Mare" — camada AR do hero (A2/A3). CSS puro, nunca GSAP.
       Regra travada sec. 5.2.2: o GSAP vem `defer` de CDN de terceiro; a entrada
       do hero nao pode esperar por ele. Só transform + opacity (sec. 5.2.3), e o
       bloco prefers-reduced-motion no fim do arquivo zera tudo isto.
       Amplitude e tempo saem SEMPRE de assets/brand/tokens-motion.css.
    ============================================================ */
    @keyframes mare-ar-rise {
      from { opacity: 0; transform: translate3d(0, var(--mare-rise), 0); }
      to   { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    /* A3 — desktop: 3 passos (eyebrow+h1 | sub | acoes+pills), nao os 6 de antes.
       Escopado em min-width:641px de proposito: abaixo disso .hero-copy e display:none
       (o mobile ve o .hero-overlay, A2) e a regra deixaria 5 elementos parados em
       opacity:0 dentro de uma subarvore escondida - lixo pra qualquer auditoria. */
    @media (min-width: 641px) {
    .hero-copy > .eyebrow,
    .hero-copy > .hero-copy-title,
    .hero-copy > .hero-sub,
    .hero-copy > .hero-actions,
    .hero-copy > .hero-proof {
      --mare-rise: var(--motion-shift);
      opacity: 0;
      animation: mare-ar-rise var(--motion-dur-base) var(--motion-ease-out) both;
    }
    .hero-copy > .eyebrow,
    .hero-copy > .hero-copy-title { animation-delay: 0ms; }
    .hero-copy > .hero-sub { animation-delay: var(--motion-stagger); }
    .hero-copy > .hero-actions,
    .hero-copy > .hero-proof { animation-delay: calc(var(--motion-stagger) * 2); }
    }

    /* G3 (M4): o arco vira retangulo e a sombra sai - card de conteudo nao
       flutua mais. G4 (M4/M6): a composicao de dois cartoes sobrepostos
       (main 74% + secondary 43% absolutos) sai - a foto do hero e UMA so,
       relativa (nao mais absoluta) e encosta nas duas bordas da tela. Sem
       borda: uma moldura de 1px faria pouco sentido numa foto edge-to-edge. */
    .hero-card {
      position: relative;
      border-radius: 0;
      overflow: hidden;
      box-shadow: none;
      background: var(--sand);
    }

    .hero-card.main {
      width: 100%;
      min-height: 78vh;
      max-height: 880px;
    }

    /* O segundo cartao (polaroid sobreposto) e o floating-label eram a vitrine
       antiga - nao cabem numa foto unica full-bleed. */
    .hero-card.secondary,
    .floating-label {
      display: none;
    }

    /* Scrim (M6): resolve o D-5 (titulo branco sobre foto clara, 1,03:1) sem
       tocar na paleta - gradiente escurece so o terco de baixo, onde o texto
       fica ancorado. Formula travada pelo M6; nao ajustar a olho. */
    .hero-card.main::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        180deg,
        rgba(25,21,18,0)    34%,
        rgba(25,21,18,0.68) 78%,
        rgba(25,21,18,0.86) 100%
      );
      pointer-events: none;
    }

    .hero-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }

    /* "Mare" camada AGUA (A1): a moldura fica PARADA e so a <img> deriva dentro dela.
       A imagem e servida com folga de --motion-drift em cima e embaixo, entao um
       deslocamento de +-var(--motion-drift) nunca descobre o canto da moldura. Isto e dimensionamento
       ESTATICO: nada de width/height animado (sec. 5.2.3) e nada de scale. A moldura
       ja tem overflow:hidden e altura fixa, entao a deriva nao pode gerar CLS.
       D-1 (fechado): a moldura tem border:1px + box-sizing:border-box, entao a
       altura de referencia do child absoluto (100% = padding-box = clientHeight)
       e MENOR que a border-box. O JS (index.html, funcao agua()) mede a amplitude
       por frame.clientHeight, nao getBoundingClientRect().height, exatamente para
       casar com essa mesma base — sem isso a onda descobre um fio de canto. */
    .hero-card.main img {
      position: absolute;
      left: 0;
      width: 100%;
      top: calc(-1 * var(--motion-drift));
      height: calc(100% + var(--motion-drift) * 2);
    }

    /* IMPROVEMENT: Floating label now shows price range for immediate transparency */
    .floating-label {
      position: absolute;
      right: 22px;
      bottom: 36px;
      background: rgba(255, 250, 243, 0.95);
      border: 1px solid rgba(184, 149, 90, 0.28);
      padding: 18px 20px;
      border-radius: 22px;
      max-width: 240px;
      box-shadow: 0 18px 50px rgba(0,0,0,0.1);
      backdrop-filter: blur(14px);
    }

    .floating-label strong {
      display: block;
      font-family: "Playfair Display", serif;
      font-size: 22px;
      letter-spacing: -0.03em;
      margin-bottom: 5px;
    }

    .floating-label span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .floating-price {
      margin-top: 8px;
      font-size: 12px;
      font-weight: 800;
      color: var(--terracotta);
      letter-spacing: 0.04em;
    }

    /* ============================================================
       TRUST BAR — IMPROVEMENT: New section, above products
       Replaces buried trust section. Visible immediately after hero.
       Reduces cold traffic friction.
    ============================================================ */
    .trust-bar {
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: rgba(255,255,255,0.55);
    }

    .trust-bar-inner {
      max-width: var(--max);
      margin: 0 auto;
      padding: 18px 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0;
      flex-wrap: wrap;
    }

    .trust-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 20px;
      border-right: 1px solid var(--line);
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
    }

    .trust-item:last-child { border-right: none; }

    .trust-item-icon {
      font-size: 16px;
      flex-shrink: 0;
    }

    /* ============================================================
       SECTIONS — General
    ============================================================ */
    section {
      max-width: var(--w-text);
      margin: 0 auto;
      padding: var(--pad-base) var(--gutter);
    }

    .section-head {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 24px;
      align-items: end;
      margin-bottom: 32px;
    }

    /* G2 (M2/V3) — voz padrao de titulo de secao secundaria: Inter maiuscula
       pequena, nao Playfair grande. So as 3 secoes primarias (V2, logo
       abaixo) quebram esse padrao. */
    .section-head h2 {
      font-family: Inter, system-ui, sans-serif;
      font-weight: 500;
      text-transform: uppercase;
      font-size: clamp(18px, 1.6vw, 24px);
      line-height: 1.15;
      letter-spacing: 0.16em;
      color: var(--ink);
    }

    /* G2 (M2/V2) — a unica secao-cabecalho generica que fala grande:
       #products e uma das 3 secoes primarias da pagina. */
    #products .section-head h2 {
      font-family: "Playfair Display", serif;
      font-weight: 600;
      text-transform: none;
      font-size: clamp(44px, 7vw, 104px);
      line-height: 0.88;
      letter-spacing: -0.038em;
      color: var(--ink);
    }

    .section-head p {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.8;
      max-width: 600px;
    }

    /* ============================================================
       PRODUCTS SECTION
       IMPROVEMENT: Products moved closer to hero. Section is the primary
       conversion zone. Grid rebuilt for faster scanning.
    ============================================================ */
    #products {
      max-width: var(--w-wide);
      padding: var(--pad-air) var(--gutter);
    }

    /* G1: #occasions nao tinha regra propria — herdava o padrao generico.
       Recebe pad-base para diferir de #rituals (air) e .trust (tight). */
    #occasions { padding: var(--pad-base) var(--gutter); }

    /* IMPROVEMENT: Filter row + count label in one row */
    .products-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .filters {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .filter-btn {
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.55);
      color: var(--muted);
      border-radius: 999px;
      padding: 10px 16px;
      cursor: pointer;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      transition: 0.2s ease;
      min-height: 40px;
    }

    .filter-btn.active,
    .filter-btn:hover {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink);
    }

    .product-count {
      font-size: 12px;
      color: var(--muted);
      font-weight: 600;
      white-space: nowrap;
    }

    .mobile-swipe-hint {
      display: none;
      color: var(--muted);
      font-size: 12px;
      margin: 0 0 14px;
    }

    /* IMPROVEMENT: Product grid — 3col desktop, 2col tablet, horizontal scroll mobile */
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    /* ============================================================
       PRODUCT CARD
       IMPROVEMENT:
       - Single primary CTA "Reserve" (removed Details split)
       - Urgency text on limited items
       - Better image aspect ratio (3:4)
       - Price more prominent
       - Description shortened to 2 lines max
    ============================================================ */
    /* G3 (M4): o cartao de produto perde fundo, borda, raio e sombra - a foto
       passa a ser o cartao. (A reestruturacao completa da grade - texto solto
       embaixo, chips fora, 1 botao por secao - e M5/G5; aqui so a silhueta.) */
    .product {
      background: none;
      border: none;
      border-radius: 0;
      overflow: visible;
      box-shadow: none;
      transition: transform 0.25s ease;
      display: flex;
      flex-direction: column;
    }

    .product:hover {
      transform: none;
      box-shadow: none;
    }

    .product-media {
      position: relative;
      aspect-ratio: 3 / 4;
      overflow: hidden;
      border-radius: 0;
      background: var(--soft);
      cursor: pointer;
    }

    .product-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      transition: transform 0.5s ease;
    }

    .product:hover .product-media img { transform: scale(1.04); }

    /* Image error state */
    .hero-card.image-missing,
    .story-image.image-missing,
    .product-media.image-missing,
    .modal-gallery.image-missing {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      background: linear-gradient(135deg, var(--soft), var(--sand));
    }

    .badge {
      position: absolute;
      top: 12px;
      left: 12px;
      border-radius: 999px;
      background: rgba(255, 250, 243, 0.94);
      border: 1px solid var(--line);
      color: var(--ink);
      padding: 7px 11px;
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-weight: 800;
      backdrop-filter: blur(8px);
    }

    .badge.pick-badge {
      left: auto;
      right: 12px;
      background: var(--ink);
      color: #fff;
      border-color: var(--ink);
    }

    .product-body {
      padding: 16px 18px 18px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    .product-top {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: flex-start;
      margin-bottom: 8px;
    }

    .product h3 {
      font-size: 20px;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }

    /* G2 (M2/legenda): preco vira Inter 500 numerico tabular, nao peso-900 solto */
    .price {
      font-weight: 500;
      font-size: 13px;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.06em;
      white-space: nowrap;
      padding-top: 3px;
      color: var(--ink);
    }

    /* IMPROVEMENT: Product description capped at 2 lines for scan-friendly grid */
    .product-desc {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
      margin: 0 0 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* IMPROVEMENT: Urgency line — limited stock signal */
    .stock-line {
      font-size: 11px;
      font-weight: 800;
      color: var(--urgency);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin: 0 0 12px;
    }

    .sizes {
      display: flex;
      gap: 6px;
      margin-bottom: 14px;
    }

    .size {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 5px 9px;
      font-size: 11px;
      font-weight: 800;
      color: var(--ink);
      background: var(--paper);
    }

    /* IMPROVEMENT: Single full-width Reserve CTA per card.
       Research shows split CTA buttons reduce conversion — one clear action */
    .product-cta {
      margin-top: auto;
    }

    .product-cta .btn {
      width: 100%;
      min-height: 44px;
      font-size: 12px;
    }

    /* ============================================================
       STORY / BRAND SECTION
    ============================================================ */
    .story {
      background: var(--soft);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      max-width: none;
      padding: 0;
    }

    .story-inner {
      max-width: var(--w-wide);
      margin: 0 auto;
      padding: var(--pad-base) var(--gutter);
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      gap: 32px;
      align-items: center;
    }

    .story-image {
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: none;
      min-height: 500px;
      position: relative; /* moldura da camada AGUA (A5); sem offset, nao move nada */
      /* Altura RESERVADA da moldura (sec. 5.2.5). Antes ela era derivada da <img>
         em fluxo; a camada AGUA tira a <img> do fluxo, e sem isto a moldura
         encolhia 228px no desktop - mudanca de layout, nao de motion.
         740/1024 nao e valor de design escolhido: e a dimensao intrinseca medida
         do proprio arquivo (assets/14156_02_03-BC6TayzSAR4Dz0V.jpg), conferida por
         comando. Reproduz exatamente a altura que a pagina ja tinha, e de quebra
         reserva espaco para uma imagem loading="lazy" (bom para CLS).
         O mobile continua mandando com seu proprio aspect-ratio 4/5, mais abaixo. */
      aspect-ratio: 740 / 1024;
    }

    .story-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }

    /* "Mare" camada AGUA (A5) — mesma amplitude do hero, e por isso vira sistema
       em vez de efeito solto. Mesma tecnica: folga estatica de --motion-drift em
       cima e embaixo, moldura com overflow:hidden e altura reservada, so a <img>
       deriva. Nada de scale, nada de width/height animado. */
    .story-image img {
      position: absolute;
      left: 0;
      width: 100%;
      top: calc(-1 * var(--motion-drift));
      height: calc(100% + var(--motion-drift) * 2);
    }

    .story-copy { padding: clamp(0px, 3vw, 38px); }

    /* G2 (M2/V2) — .story#drop e uma das 3 secoes primarias. */
    .story-copy h2 {
      font-size: clamp(44px, 7vw, 104px);
      line-height: 0.88;
      letter-spacing: -0.038em;
      margin-bottom: 20px;
    }

    .story-copy p {
      color: var(--muted);
      font-size: 16px;
      line-height: 1.8;
      margin: 0 0 16px;
    }

    .signature {
      margin-top: 24px;
      font-family: "Playfair Display", serif;
      font-size: 26px;
      color: var(--terracotta);
    }

    /* ============================================================
       COLLAB SECTION — Brum Esthetics
    ============================================================ */
    .rituals {
      max-width: none;
      padding: 0;
      background: radial-gradient(circle at top left, rgba(184,149,90,0.22), transparent 34%),
                  linear-gradient(135deg, #191512 0%, #2a211d 54%, #465347 100%);
      color: #fff;
      border-top: 1px solid rgba(255,255,255,0.1);
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .rituals-inner {
      max-width: var(--w-wide);
      margin: 0 auto;
      padding: var(--pad-air) var(--gutter);
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 38px;
      align-items: center;
    }

    .rituals .eyebrow { color: #d8b979; }

    /* G2 (M2/V2) — 3a secao primaria. Fica no teto reduzido que a direcao
       permite (72px, nao 104px): #rituals e coluna partilhada 0.9fr/1.1fr,
       nao full-bleed, e 104px nao cabe sem quebrar feio. */
    .rituals h2 {
      color: #fff;
      font-family: "Playfair Display", serif;
      font-weight: 600;
      font-size: clamp(44px, 6vw, 72px);
      line-height: 0.88;
      letter-spacing: -0.038em;
      margin-bottom: 18px;
    }

    .rituals-copy > p {
      color: rgba(255,255,255,0.72);
      line-height: 1.82;
      margin: 0;
      max-width: 580px;
    }

    .ritual-offer {
      margin: 24px 0 0;
      padding: 18px;
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 22px;
      background: rgba(255,255,255,0.08);
      backdrop-filter: blur(12px);
    }

    .ritual-offer strong {
      display: block;
      color: #fff;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 7px;
    }

    .ritual-offer p {
      color: rgba(255,255,255,0.72);
      margin: 0;
      line-height: 1.7;
      font-size: 14px;
    }

    .rituals-actions {
      margin-top: 24px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .rituals .btn {
      background: #fffaf3;
      color: var(--ink);
      border-color: #fffaf3;
    }

    .rituals .btn.ghost {
      background: transparent;
      color: #fff;
      border-color: rgba(255,255,255,0.36);
    }

    .rituals .btn.ghost:hover { background: #fffaf3; color: var(--ink); }

    .rituals-panel {
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      gap: 14px;
      align-items: stretch;
    }

    .rituals-image {
      border-radius: var(--radius);
      overflow: hidden;
      min-height: 480px;
      border: 1px solid rgba(255,255,255,0.16);
      box-shadow: none;
      position: relative; /* moldura da camada AGUA (B4a/A6-ritual); sem offset, nao move nada */
    }

    /* "Mare" camada AGUA (B4a) — a 3a e ultima onda: mesma tecnica de A1/A5, moldura
       parada com folga estatica de --motion-drift, so a <img> deriva. Ultima
       fotografia da pagina (nada depois da linha ~487 de index.html). */
    .rituals-image img {
      position: absolute;
      left: 0;
      width: 100%;
      top: calc(-1 * var(--motion-drift));
      height: calc(100% + var(--motion-drift) * 2);
      object-fit: cover;
      object-position: center top;
    }

    .ritual-card-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }

    .ritual-card {
      padding: 18px;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 22px;
      background: rgba(255,250,243,0.08);
      backdrop-filter: blur(12px);
    }

    .ritual-card span {
      display: inline-flex;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      align-items: center;
      justify-content: center;
      background: rgba(255,250,243,0.14);
      color: #d8b979;
      font-weight: 900;
      font-size: 11px;
      margin-bottom: 12px;
    }

    .ritual-card h3 {
      color: #fff;
      font-family: Inter, sans-serif;
      font-size: 14px;
      letter-spacing: 0;
      margin-bottom: 5px;
    }

    .ritual-card p {
      color: rgba(255,255,255,0.66);
      margin: 0;
      line-height: 1.6;
      font-size: 12px;
    }

    /* ============================================================
       OCCASIONS — 4 tiles
    ============================================================ */
    .occasion-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .occasion-card {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(184,149,90,0.18);
      border-radius: var(--radius);
      background: rgba(255,253,248,0.72);
      padding: 24px;
      min-height: 190px;
      box-shadow: 0 14px 40px rgba(33,25,19,0.05);
    }

    .occasion-card::after {
      content: "";
      position: absolute;
      right: 20px;
      bottom: 20px;
      width: 44px;
      height: 1px;
      background: rgba(184,149,90,0.55);
    }

    .occasion-card span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--soft);
      color: var(--terracotta);
      font-weight: 900;
      margin-bottom: 14px;
      font-size: 12px;
    }

    .occasion-card h3 { font-size: 24px; margin-bottom: 10px; }
    .occasion-card p  { margin: 0; color: var(--muted); line-height: 1.65; font-size: 13px; }

    /* ============================================================
       TRUST BOX — Dark card with 4 key signals
    ============================================================ */
    .trust { padding: var(--pad-tight) var(--gutter); max-width: var(--w-text); }

    .trust-box {
      background: var(--ink);
      color: #fff;
      border-radius: var(--radius);
      padding: clamp(28px, 5vw, 54px);
      display: grid;
      grid-template-columns: 0.8fr 1.2fr;
      gap: 32px;
      align-items: center;
      box-shadow: none;
    }

    /* G2 (M2/V3) */
    .trust-box h2 {
      font-family: Inter, system-ui, sans-serif;
      font-weight: 500;
      text-transform: uppercase;
      font-size: clamp(18px, 1.6vw, 24px);
      line-height: 1.15;
      letter-spacing: 0.16em;
      color: #fff;
    }
    .trust-box p  { color: rgba(255,255,255,0.70); margin: 14px 0 0; }

    .trust-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .trust-card {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 22px;
      padding: 20px;
      box-shadow: none;
    }

    .trust-card span {
      display: inline-flex;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.12);
      color: #fff;
      font-weight: 900;
      margin-bottom: 12px;
    }

    .trust-card h3 { color: #fff; font-size: 18px; letter-spacing: -0.02em; margin-bottom: 6px; }
    .trust-card p  { color: rgba(255,255,255,0.66); font-size: 13px; margin: 0; line-height: 1.55; }

    /* ============================================================
       MARQUEE BAND
    ============================================================ */
    .editorial-band {
      max-width: none;
      padding: 0;
      background: var(--ink);
      color: #fff;
      overflow: hidden;
    }

    .marquee {
      display: flex;
      width: max-content;
      animation: marquee 28s linear infinite;
      white-space: nowrap;
    }

    .marquee span {
      font-family: "Playfair Display", serif;
      font-size: clamp(36px, 6vw, 80px);
      padding: 30px 20px;
      opacity: 0.95;
    }

    @keyframes marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* Light marquee — before products */
    .marquee-light-band {
      max-width: none;
      padding: 0;
      background: var(--sand);
      border-top: 1px solid rgba(184,149,90,0.22);
      border-bottom: 1px solid rgba(184,149,90,0.22);
      overflow: hidden;
    }

    .marquee-light {
      display: flex;
      width: max-content;
      animation: marquee 80s linear infinite;
      white-space: nowrap;
      align-items: center;
    }

    .marquee-light-item {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 30px 20px;
      font-family: "Playfair Display", serif;
      font-size: clamp(36px, 6vw, 80px);
      font-style: normal;
      font-weight: 500;
      letter-spacing: -0.02em;
      opacity: 0.95;
      color: var(--ink);
    }

    .marquee-light-item::after {
      content: "·";
      color: var(--terracotta);
      font-size: clamp(36px, 6vw, 80px);
      opacity: 0.5;
      font-style: normal;
      flex-shrink: 0;
    }

    /* G1: #sizes + #care sao "blocos de servico colados" (M3) — as duas
       recebem pad-tight de proposito, para lerem como um unico bloco. */
    #sizes { padding: var(--pad-tight) var(--gutter); max-width: var(--w-text); }
    #care  { padding: var(--pad-tight) var(--gutter); max-width: var(--w-text); }
    #order { padding: var(--pad-base) var(--gutter); max-width: var(--w-text); }

    /* ============================================================
       SIZE GUIDE
    ============================================================ */
    .values {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .value-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255,255,255,0.55);
      padding: 26px;
    }

    .value-card span {
      display: inline-flex;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      align-items: center;
      justify-content: center;
      background: var(--soft);
      color: var(--terracotta);
      font-weight: 900;
      margin-bottom: 16px;
      font-size: 15px;
    }

    .value-card h3 { font-size: 24px; margin-bottom: 10px; }
    .value-card p  { margin: 0; color: var(--muted); line-height: 1.7; font-size: 14px; }

    /* ============================================================
       HOW TO ORDER — IMPROVEMENT: Step 1 is now "Browse & pick size"
       instead of "Choose your piece" — more specific reduces confusion
    ============================================================ */
    .order {
      background: var(--soft);
      border-radius: calc(var(--radius) + 12px);
      padding: clamp(26px, 5vw, 58px);
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      gap: 34px;
      align-items: start;
      border: 1px solid var(--line);
    }

    /* G2 (M2/V3) */
    .order h2 {
      font-family: Inter, system-ui, sans-serif;
      font-weight: 500;
      text-transform: uppercase;
      font-size: clamp(18px, 1.6vw, 24px);
      line-height: 1.15;
      letter-spacing: 0.16em;
      margin-bottom: 18px;
    }
    .order p  { color: var(--muted); line-height: 1.8; margin: 0; }

    .preorder-note {
      margin-top: 16px !important;
      padding: 14px 16px;
      border: 1px solid rgba(184,149,90,0.28);
      border-radius: 20px;
      background: rgba(255,253,248,0.72);
      color: var(--cocoa) !important;
      font-size: 13px;
      line-height: 1.7 !important;
    }

    .order-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 20px;
    }

    .steps { display: grid; gap: 10px; }

    .step {
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 14px;
      align-items: start;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: rgba(255,255,255,0.6);
    }

    .step-num {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--ink);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 14px;
      flex-shrink: 0;
    }

    .step h3 {
      font-family: Inter, sans-serif;
      font-size: 14px;
      letter-spacing: 0;
      margin-bottom: 4px;
      font-weight: 700;
    }

    .step p { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0; }

    /* ============================================================
       CARE / WHY BRAZILIAN SWIMWEAR
    ============================================================ */
    .care-box {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: clamp(26px, 5vw, 54px);
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      gap: 32px;
      align-items: center;
      box-shadow: none;
    }

    /* G2 (M2/V3) */
    .care-box h2 {
      font-family: Inter, system-ui, sans-serif;
      font-weight: 500;
      text-transform: uppercase;
      font-size: clamp(18px, 1.6vw, 24px);
      line-height: 1.15;
      letter-spacing: 0.16em;
      margin-bottom: 16px;
    }
    .care-box p  { color: var(--muted); line-height: 1.8; margin: 0; }

    .care-list { display: grid; gap: 10px; }

    .care-item {
      display: grid;
      grid-template-columns: 40px 1fr;
      gap: 12px;
      align-items: start;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 14px;
      background: var(--paper);
    }

    .care-item span {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--soft);
      color: var(--terracotta);
      font-weight: 900;
      font-size: 15px;
      flex-shrink: 0;
    }

    .care-item h3 {
      font-family: Inter, sans-serif;
      font-size: 14px;
      letter-spacing: 0;
      margin-bottom: 3px;
      font-weight: 700;
    }

    .care-item p { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0; }

    /* ============================================================
       NATHALIA QUOTE
    ============================================================ */
    .chosen-note {
      background: var(--soft);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      max-width: none;
      padding: 0;
    }

    .chosen-note-inner {
      max-width: var(--w-text);
      margin: 0 auto;
      padding: var(--pad-base) var(--gutter);
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      gap: 36px;
      align-items: center;
    }

    .quote-mark {
      font-family: "Playfair Display", serif;
      font-size: clamp(72px, 11vw, 140px);
      line-height: 0.7;
      color: var(--terracotta);
      opacity: 0.5;
    }

    .chosen-note blockquote {
      margin: 0;
      font-family: "Playfair Display", serif;
      font-size: clamp(28px, 4.5vw, 56px);
      line-height: 1.04;
      letter-spacing: -0.04em;
    }

    .chosen-note p {
      margin: 20px 0 0;
      color: var(--muted);
      line-height: 1.8;
      font-size: 15px;
      max-width: 620px;
    }

    /* ============================================================
       FAQ
       IMPROVEMENT: Layout now stacked (not grid) on mobile.
       First FAQ open by default, most common question first.
    ============================================================ */
    .faq { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px; }

    /* G2 (M2/V3) */
    .faq h2 {
      font-family: Inter, system-ui, sans-serif;
      font-weight: 500;
      text-transform: uppercase;
      font-size: clamp(18px, 1.6vw, 24px);
      line-height: 1.15;
      letter-spacing: 0.16em;
    }

    details {
      border-top: 1px solid var(--line);
      padding: 18px 0;
    }

    details:last-child { border-bottom: 1px solid var(--line); }

    summary {
      cursor: pointer;
      font-weight: 700;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      font-size: 15px;
      line-height: 1.4;
      list-style: none;
    }

    summary::-webkit-details-marker { display: none; }

    summary::after {
      content: "+";
      color: var(--terracotta);
      font-size: 20px;
      flex-shrink: 0;
    }

    details[open] summary::after { content: "–"; }
    details p { color: var(--muted); line-height: 1.75; margin: 12px 0 0; font-size: 14px; }

    #policy {
      background: var(--soft);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      max-width: none;
      padding: var(--pad-tight) var(--gutter);
    }

    /* G1: #faq e .future nao tinham regra propria. faq=tight (par com
       #policy, na mesma familia de bloco de servico, M3) e diverge do
       vizinho .chosen-note (base); .future fecha em base, diferindo de faq. */
    #faq    { padding: var(--pad-tight) var(--gutter); max-width: var(--w-text); }
    .future { padding: var(--pad-base) var(--gutter); max-width: var(--w-text); }

    #policy .section-head,
    #policy .policy-box {
      max-width: var(--max);
      margin-left: auto;
      margin-right: auto;
    }

    #policy .section-head {
      margin-bottom: 32px;
    }
    .policy-box {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .policy-item {
      padding: 28px 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      box-shadow: 0 10px 32px rgba(33,25,19,0.06);
      transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .policy-item:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 48px rgba(33,25,19,0.1);
    }

    .policy-item span {
      display: block;
      font-size: 28px;
      margin-bottom: 14px;
    }

    .policy-item h3 { font-size: 22px; margin-bottom: 10px; }
    .policy-item p  { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

    /* ============================================================
       FUTURE EDITS
    ============================================================ */
    .future-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .future-card {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(184,149,90,0.18);
      border-radius: var(--radius);
      background: rgba(255,253,248,0.72);
      padding: 24px;
      min-height: 190px;
      box-shadow: 0 14px 40px rgba(33,25,19,0.05);
    }

    .future-card::after {
      content: "";
      position: absolute;
      right: 20px;
      bottom: 20px;
      width: 44px;
      height: 1px;
      background: rgba(184,149,90,0.55);
    }

    .future-card span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--soft);
      color: var(--terracotta);
      font-weight: 900;
      margin-bottom: 14px;
      font-size: 12px;
    }

    .future-card h3 { font-size: 24px; margin-bottom: 10px; }
    .future-card p  { margin: 0; color: var(--muted); line-height: 1.65; font-size: 13px; }

    /* ============================================================
       FOOTER
    ============================================================ */
    .footer {
      background: var(--ink);
      color: #fff;
      padding: 52px 20px 22px;
    }

    .footer-inner {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      align-items: end;
    }

    .footer h2 { font-size: clamp(38px, 6vw, 72px); line-height: 0.9; }

    .footer p {
      color: rgba(255,255,255,0.66);
      line-height: 1.75;
      margin: 18px 0 0;
      max-width: 520px;
    }

    .footer-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .footer .btn { background: #fff; color: var(--ink); border-color: #fff; }

    .footer .btn.ghost {
      background: transparent;
      color: #fff;
      border-color: rgba(255,255,255,0.35);
    }

    .copyright {
      max-width: var(--max);
      margin: 38px auto 0;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,0.14);
      display: flex;
      justify-content: space-between;
      gap: 14px;
      color: rgba(255,255,255,0.45);
      font-size: 12px;
    }

    /* ============================================================
       MOBILE STICKY CTA
       IMPROVEMENT: Added icon to sticky button
       positioned above thumb reach zone, 60px bottom safe area
    ============================================================ */
    .mobile-sticky {
      position: fixed;
      left: 14px;
      right: 14px;
      bottom: 16px;
      z-index: 40;
      display: none;
      box-shadow: 0 16px 48px rgba(0,0,0,0.22);
      border-radius: 999px;
    }

    /* ============================================================
       PRODUCT MODAL
    ============================================================ */
    .modal {
      position: fixed;
      inset: 0;
      z-index: 100;
      background: rgba(25, 21, 18, 0.58);
      backdrop-filter: blur(12px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .modal.open { display: flex; }

    .modal-card {
      width: min(940px, 100%);
      max-height: 92vh;
      overflow: auto;
      overscroll-behavior: contain;
      background: var(--paper);
      border-radius: 30px;
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      box-shadow: var(--shadow);
      position: relative;
    }

    .modal-gallery {
      background: var(--soft);
      min-height: 620px;
      border-radius: 30px 0 0 30px;
      overflow: hidden;
      position: relative;
    }

    .modal-gallery-track {
      display: flex;
      width: 100%;
      height: 100%;
      min-height: 620px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .modal-gallery-track::-webkit-scrollbar { display: none; }

    /* "Mare" A8 — troca de foto na galeria do modal. Unico motion novo que ajuda a
       VENDER: a peca troca de angulo sem pular. Só opacity + transform, e a moldura
       tem min-height fixo, entao a altura do modal nao mexe. O swipe nativo do track
       continua intacto: isto so entra no clique da miniatura. TERRA (preco, tamanho,
       botao de reserva, o modal em si) segue imovel. */
    .modal-gallery-track {
      transition: opacity var(--motion-dur-fast) var(--motion-ease-out),
                  transform var(--motion-dur-fast) var(--motion-ease-out);
    }

    .modal-gallery-track.is-swapping {
      opacity: 0;
      transform: translate3d(var(--motion-shift-micro), 0, 0);
    }

    .modal-gallery-track img {
      flex: 0 0 100%;
      width: 100%;
      height: 100%;
      min-height: 620px;
      object-fit: cover;
      object-position: center top;
      scroll-snap-align: start;
    }

    .modal-thumbs {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 14px;
      display: flex;
      gap: 7px;
      overflow-x: auto;
      padding: 5px;
      border: 1px solid rgba(255,255,255,0.45);
      border-radius: 16px;
      background: rgba(255,250,243,0.8);
      backdrop-filter: blur(12px);
    }

    .thumb-btn {
      flex: 0 0 54px;
      width: 54px;
      height: 66px;
      border: 1px solid transparent;
      border-radius: 10px;
      overflow: hidden;
      padding: 0;
      background: var(--soft);
      cursor: pointer;
      opacity: 0.7;
      transition: 0.2s ease;
    }

    .thumb-btn.active,
    .thumb-btn:hover {
      opacity: 1;
      border-color: var(--ink);
      transform: translateY(-1px);
    }

    .thumb-btn img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }

    .modal-info { padding: 32px; }

    .close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: rgba(255,250,243,0.94);
      cursor: pointer;
      font-size: 20px;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .modal-info h2 { font-size: clamp(28px, 4vw, 46px); line-height: 0.98; margin-bottom: 10px; }

    .modal-price { font-weight: 900; font-size: 18px; margin-bottom: 16px; }

    .modal-info p { color: var(--muted); line-height: 1.75; margin: 0 0 16px; }

    .detail-list {
      padding: 0;
      margin: 16px 0 22px;
      list-style: none;
      display: grid;
      gap: 8px;
      color: var(--muted);
      font-size: 13px;
    }

    .detail-list li::before {
      content: "•";
      color: var(--terracotta);
      font-weight: 900;
      margin-right: 7px;
    }

    /* IMPROVEMENT: Modal reserve size grid — one-tap size reserve */
    .reserve-size-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 7px;
      margin: 8px 0 16px;
    }

    .reserve-size-grid .btn {
      min-height: 42px;
      padding: 0 8px;
      font-size: 11px;
    }

    .copy-feedback {
      display: none;
      margin-top: 8px;
      color: var(--terracotta);
      font-size: 12px;
      font-weight: 800;
    }

    .copy-feedback.show { display: block; }

    /* ============================================================
       CONTACT CHOICE MODAL
    ============================================================ */
    .contact-choice {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(25, 21, 18, 0.56);
      backdrop-filter: blur(12px);
    }

    .contact-choice.open { display: flex; }

    .contact-choice-card {
      width: min(440px, 100%);
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 26px;
      padding: 24px;
      box-shadow: var(--shadow);
      position: relative;
    }

    .contact-choice-card h3 { font-size: 30px; line-height: 1; margin-bottom: 8px; }

    .contact-choice-card p {
      color: var(--muted);
      line-height: 1.65;
      margin: 0 0 16px;
      font-size: 13px;
    }

    .contact-options { display: grid; gap: 9px; }

    .contact-option {
      display: grid;
      grid-template-columns: 40px 1fr;
      gap: 12px;
      align-items: center;
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      padding: 12px;
      cursor: pointer;
      text-align: left;
      transition: 0.2s ease;
      color: var(--ink);
      min-height: 58px;
    }

    .contact-option:hover {
      transform: translateY(-1px);
      border-color: rgba(25,21,18,0.28);
      box-shadow: 0 10px 28px rgba(33,25,19,0.08);
    }

    .contact-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--soft);
      color: var(--terracotta);
      font-weight: 900;
      font-size: 13px;
    }

    .contact-option strong { display: block; font-size: 13px; margin-bottom: 2px; }
    .contact-option span:last-child { display: block; color: var(--muted); font-size: 11px; line-height: 1.4; }

    .contact-close {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: rgba(255,250,243,0.92);
      cursor: pointer;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* ============================================================
       REVEAL ANIMATION
       "Mare" B6: falava outra lingua (600ms/ease/16px literal) contra os 500ms
       --motion-ease-out do resto do site. Agora sao os mesmos tokens de
       tokens-motion.css — uma velocidade so na pagina inteira.
    ============================================================ */
    .reveal {
      opacity: 0;
      transform: translateY(var(--motion-shift));
      transition: opacity var(--motion-dur-base) var(--motion-ease-out),
                  transform var(--motion-dur-base) var(--motion-ease-out);
    }

    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* ============================================================
       RESPONSIVE — 1100px
    ============================================================ */
    @media (max-width: 1100px) {
      .nav-links { gap: 14px; font-size: 12px; }
      h1 { font-size: clamp(42px, 6.5vw, 68px); }
    }

    /* ============================================================
       RESPONSIVE — 940px (tablet)
    ============================================================ */
    @media (max-width: 940px) {
      .announcement { font-size: 11px; padding: 9px 14px; }
      .nav-links { display: none; }
      .lang-switcher { margin-left: auto; }

      /* G4: o hero ja e full-bleed unico em qualquer largura (regra base);
         nada de tablet-specific aqui sobra pra cuidar. */

      .story-inner, .order, .faq, .care-box, .footer-inner { grid-template-columns: 1fr; }
      .rituals-inner, .rituals-panel { grid-template-columns: 1fr; }
      .chosen-note-inner { grid-template-columns: 1fr; }

      .story-image { min-height: 520px; }
      .grid { grid-template-columns: repeat(2, 1fr); }
      .occasion-grid, .future-grid { grid-template-columns: repeat(2, 1fr); }
      .trust-box, .care-box { grid-template-columns: 1fr; }
      .footer-actions { justify-content: flex-start; }
      .policy-box { grid-template-columns: 1fr; }

      .modal-card { grid-template-columns: 1fr; }
      .modal-gallery { border-radius: 30px 30px 0 0; min-height: 480px; }
      .modal-gallery-track { min-height: 480px; }
      .modal-gallery-track img { min-height: 480px; }

      .trust-bar-inner { gap: 0; }
      .trust-item { padding: 8px 12px; }
    }

    /* ============================================================
       RESPONSIVE — 720px
    ============================================================ */
    @media (max-width: 720px) {
      .brand strong { font-size: 21px; }
      .brand span { font-size: 8.5px; }

      .hero-actions { gap: 9px; }
      .hero-actions .btn { flex: 1 1 100%; }

      .filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
      }

      .filter-btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
      }

      .trust-item:nth-child(n+4) { display: none; }
    }

    /* ============================================================
       RESPONSIVE — 640px (mobile)
       HERO: Full-bleed image with gradient overlay + text pinned bottom
    ============================================================ */
    @media (max-width: 640px) {
      .announcement { font-size: 9.5px; letter-spacing: 0.07em; padding: 9px 12px; }
      .nav-inner { padding: 12px 14px; }
      .brand strong { font-size: 19px; max-width: 160px; line-height: 0.95; }
      .brand span { display: none; }
      .lang-btn { padding: 7px 7px; font-size: 9px; }
      .btn { min-height: 50px; padding: 0 18px; font-size: 12px; }

      /* G4: full-bleed hero e composicao (display/position/hero-copy/hero-media/
         hero-card.secondary/floating-label/hero-overlay layout/scrim/animacoes/
         proof pills) ja sao globais (linhas ~237-545) desde a promocao do G4.
         So sobrevive aqui o que o M6 pede como numero exclusivo de mobile:
         altura em svh (evita a barra do Safari), a voz tipografica do h1, e o
         layout lado-a-lado dos 2 botoes (a regra de 720px forca flex:1 1 100%,
         que empilharia; aqui eles ficam na mesma linha). */
      .hero-card.main {
        min-height: 86svh;
      }

      .hero-overlay h1,
      .hero-overlay-title {
        font-size: clamp(38px, 12.5vw, 56px);
        line-height: 0.9;
        letter-spacing: -0.04em;
      }

      .hero-overlay .hero-actions .btn {
        flex: 1;
      }

      /* ── Rest of mobile styles ── */
      .eyebrow { font-size: 10px; letter-spacing: 0.12em; margin-bottom: 12px; }
      .eyebrow::before { width: 20px; }
      /* G1: os paddings verticais agora vem dos tokens --pad-air/base/tight
         (clamp com vh), que ja encolhem sozinhos no mobile — resetar tudo
         pra 48px 16px aqui apagaria a diferenciacao de ritmo que a M3 pede.
         Fica so o gutter horizontal, mais estreito no telefone. */
      section, .story-inner, .chosen-note-inner { padding-inline: 16px; }
      .section-head { gap: 14px; margin-bottom: 22px; grid-template-columns: 1fr; }
      /* G2: os clamps de V2/V3 (M2) ja tem seu proprio minimo por vw — resetar
         tudo pra 32-44px aqui apagaria a diferenca de voz entre secao primaria
         e secundaria bem no viewport onde ela mais importa. */
      .story-image { min-height: auto; aspect-ratio: 4/5; }
      .mobile-swipe-hint { display: block; }
      .grid {
        display: flex; grid-template-columns: none;
        gap: 12px; overflow-x: auto;
        padding: 2px 4px 16px;
        margin-left: -4px; margin-right: -4px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
      }
      .grid .product { flex: 0 0 80%; scroll-snap-align: start; }
      .occasion-grid, .future-grid {
        display: flex; gap: 12px; overflow-x: auto;
        padding: 2px 4px 16px;
        margin-left: -4px; margin-right: -4px;
        scroll-snap-type: x mandatory;
      }
      .occasion-card, .future-card { flex: 0 0 78%; scroll-snap-align: start; min-height: auto; }
      .trust-grid { grid-template-columns: 1fr; }
      .trust-box { padding: 24px 16px; }
      .values { grid-template-columns: 1fr; }
      #policy { padding-inline: 16px; }
      .policy-box { grid-template-columns: 1fr; gap: 12px; }
      .order { padding: 24px 16px; }
      .care-box { padding: 24px 16px; }
      .rituals { padding: 52px 16px; }
      /* G2: .rituals h2 ja usa clamp(44px,6vw,72px) (V2) — o minimo de 44px
         e o mesmo piso das outras 2 primarias, nao precisa de reset mobile.
         G3: raio nao volta pra 22-24px flat aqui - var(--radius) (6px) ja
         se aplica sozinho, herdado do desktop. */
      .rituals-image { min-height: auto; aspect-ratio: 4/5; }
      .marquee span { font-size: 38px; padding: 22px 16px; }
      .marquee-light-item { font-size: 38px; padding: 22px 16px; }
      .marquee-light-item::after { font-size: 38px; }
      .faq { grid-template-columns: 1fr; gap: 20px; }
      .footer { padding-bottom: 90px; }
      .footer h2 { font-size: clamp(38px, 12vw, 52px); }
      .footer-actions .btn { flex: 1 1 100%; }
      .copyright { flex-direction: column; }
      .mobile-sticky { display: flex; }
      .modal { padding: 8px; align-items: flex-end; }
      .modal-card { border-radius: 26px 26px 0 0; max-height: 94vh; }
      .modal-info { padding: 22px 16px 26px; }
      .modal-gallery { min-height: 360px; border-radius: 26px 26px 0 0; }
      .modal-gallery-track { min-height: 360px; }
      .modal-gallery-track img { min-height: 360px; }
      .reserve-size-grid { grid-template-columns: 1fr; }
      .contact-choice { align-items: flex-end; padding: 8px; }
      .contact-choice-card { border-radius: 26px 26px 0 0; padding: 22px 16px 26px; }
      /* Trust bar: show only 2 on small mobile */
      .trust-item { padding: 7px 10px; }
      .trust-item:nth-child(n+3) { display: none; }
    }

    /* ============================================================
       RESPONSIVE — 390px (very small phones)
    ============================================================ */
    @media (max-width: 390px) {
      .brand strong { font-size: 17px; max-width: 140px; }
      .lang-btn { padding: 6px 6px; font-size: 8px; }
      .hero-card.main { height: 96vw; max-height: 420px; }
      .hero-overlay h1 { font-size: 30px; }
    }
  

    /* ============================================================
       REDUCED MOTION — "Mare" F1 (D2)
       Duas pernas, nao uma: o gsap.matchMedia() do index.html cobre o GSAP
       e nao cobre o CSS; este bloco cobre o CSS e nao cobre o GSAP.
       Regra: com reduced-motion o conteudo aparece COMPLETO (opacidade 1),
       nada preso em .reveal invisivel.
    ============================================================ */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }

      .marquee,
      .marquee-light {
        animation: none !important;
        transform: none !important;
      }

      .reveal,
      .reveal.visible {
        opacity: 1 !important;
        transform: none !important;
      }
    }