/* ============================================================
   Mare Vieira: tokens e base
   Paleta: marinho · creme/pérola · teal (onda) · ouro discreto
   Tipografia: Marcellus (serifa display) + Instrument Serif (itálico de destaque) + Manrope (sans UI/corpo)
   ============================================================ */
:root{
  /* Marca */
  --navy:#1d2d50; --navy-700:#16223d; --navy-900:#0e1730;
  --teal:#2a9bb0; --teal-deep:#1c7a8c;
  --gold:#b08d4f;
  /* acentos vibrantes (hero/selos) */
  --coral:#ef6b54; --coral-deep:#d24a35; --sun:#f4b740; --mint:#5fc7b6; --lilac:#b3a6e6;
  /* Neutros quentes */
  --cream:#f4ece0;        /* fundo da página (areia/pérola) */
  --cream-2:#ece2d2;      /* superfície alternada */
  --paper:#fffdf8;        /* cartões */
  --ink:#21283b;          /* texto principal */
  --ink-soft:#76736b;     /* texto secundário */
  --line:#e3dac9;         /* divisórias */
  /* Semânticos */
  --sale:#b3402e; --instock:#3f7a5a; --oos:#a79f90;
  --pearl:#f3ece0;

  /* Tipografia */
  --font-head:"Marcellus",Georgia,"Times New Roman",serif;
  --font-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --font-body:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --fs-eyebrow:.72rem; --fs-sm:.875rem; --fs-body:1rem; --fs-lead:1.15rem;
  --fs-h3:clamp(1.25rem,2vw,1.5rem);
  --fs-h2:clamp(1.7rem,3.6vw,2.6rem);
  --fs-h1:clamp(2.1rem,5vw,3.4rem);
  --fs-display:clamp(2.6rem,7.5vw,5.5rem);
  --lh-tight:1.08; --lh-body:1.65; --tracking:.18em;

  /* Espaço / ritmo */
  --container:1280px;
  --gutter:clamp(1.1rem,4vw,2.6rem);
  --section-y:clamp(3.5rem,8vw,7rem);
  --grid-gap:clamp(1rem,2.2vw,1.8rem);

  /* Forma */
  --radius:4px; --radius-lg:16px; --radius-pill:999px;
  --shadow:0 1px 2px rgba(20,30,60,.05),0 10px 30px rgba(20,30,60,.07);
  --shadow-soft:0 6px 24px rgba(20,30,60,.06);
  --ratio-card:3/4;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body);
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-head); line-height:var(--lh-tight); font-weight:400; margin:0 0 .5em; letter-spacing:.005em}
h1 em,h2 em,h3 em,.serif-em{font-family:var(--font-serif); font-style:italic; font-weight:400; letter-spacing:0}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
p{margin:0 0 1em}
em,.italic{font-style:italic}
a{color:inherit; text-decoration:none}
a:not(.btn):hover{color:var(--teal-deep)}
img,svg{max-width:100%; display:block}
hr{border:0; border-top:1px solid var(--line); margin:2rem 0}
::selection{background:var(--teal); color:#fff}

:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:2px}
.skip-link{position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:.7rem 1rem; z-index:200}
.skip-link:focus{left:1rem; top:1rem}

.container{max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); width:100%}
.container--narrow{max-width:820px}

.eyebrow{font-family:var(--font-body); font-size:var(--fs-eyebrow); letter-spacing:var(--tracking);
  text-transform:uppercase; color:var(--teal-deep); font-weight:600; display:inline-block}
.muted{color:var(--ink-soft)}
.center{text-align:center}
.lead{font-size:var(--fs-lead); color:var(--ink-soft)}

/* Botões */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-body); font-weight:500; font-size:.92rem; letter-spacing:.06em;
  padding:.85rem 1.6rem; border:1px solid transparent; border-radius:var(--radius-pill);
  cursor:pointer; transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s;
  text-transform:uppercase; line-height:1; -webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--navy); color:var(--pearl)}
.btn-primary:hover{background:var(--navy-700); color:#fff}
.btn-accent{background:var(--teal); color:#fff}
.btn-accent:hover{background:var(--teal-deep)}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--navy)}
.btn-ghost:hover{background:var(--navy); color:var(--pearl)}
.btn-light{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.5); backdrop-filter:blur(4px)}
.btn-light:hover{background:#fff; color:var(--navy)}
.btn-block{width:100%}
.btn-sm{padding:.6rem 1.1rem; font-size:.8rem}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* Selos */
.badge{display:inline-block; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.3rem .55rem; border-radius:var(--radius-pill); font-weight:600}
.badge--novo{background:var(--teal); color:#fff}
.badge--promo{background:var(--sale); color:#fff}
.badge--oos{background:#cfc7b6; color:#5a554a}

/* Preço */
.price{font-weight:500; font-size:1.05rem}
.price .now{color:var(--ink)}
.price .sale{color:var(--sale); font-weight:600}
.price .old{color:var(--ink-soft); text-decoration:line-through; margin-left:.45rem; font-size:.9em}

/* Swatches */
.swatches{display:flex; gap:.4rem; align-items:center}
.swatch{width:18px; height:18px; border-radius:50%; border:2px solid var(--paper); box-shadow:0 0 0 1px var(--line); cursor:pointer; padding:0; background-clip:padding-box}
.swatch.is-active{box-shadow:0 0 0 2px var(--teal)}

/* Formulários */
label{display:block; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 .35rem; font-weight:500}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=search],select,textarea{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:.8rem .9rem; transition:border-color .2s, box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(42,155,176,.15)}
.field{margin-bottom:1.1rem}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.help{font-size:.8rem; color:var(--ink-soft); margin-top:.3rem; text-transform:none; letter-spacing:0}

/* Flash */
.flash{padding:.9rem 1.1rem; border-radius:var(--radius); margin:1rem auto; max-width:var(--container);
  font-size:.92rem; border:1px solid}
.flash--ok{background:#eaf5ef; border-color:#bfe0cd; color:#2c6043}
.flash--erro{background:#fbece9; border-color:#f0c6bd; color:#9c3322}
.flash--info{background:#e9f3f5; border-color:#bfe0e6; color:#1c6373}

/* utilidades */
.stack>*+*{margin-top:1rem}
.cluster{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center}
.visually-hidden{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* Lenis (scroll suave) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
}

/* Brasão: a concha com pérola do logo oficial, como máscara sobre currentColor (partials/marca.ejs).
   Fica aqui, e não no store.css, porque o admin também usa. */
.brand__mark{display:inline-block; flex-shrink:0; width:34px; height:34px; background:currentColor;
  -webkit-mask:url(/img/concha-mascara.png) center/contain no-repeat; mask:url(/img/concha-mascara.png) center/contain no-repeat}