/* ==========================================================================
   Renova - Sistema de design (main.css)
   Mobile-first. Zero libs. Cobre TODAS as classes do contrato.
   Carregado depois de style.css (que ja define parte dos tokens); aqui
   completamos o conjunto de tokens para que o sistema seja auto-suficiente.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens (completos, cobrem os que faltavam em style.css)
   -------------------------------------------------------------------------- */
/* Tipografia self-hosted (RGPD): variaveis, subset latino (cobre PT-EU + euro).
   Bricolage Grotesque (display) e Hanken Grotesk (corpo). font-display:swap. */
@font-face{
  font-family:"Bricolage Grotesque";
  src:url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:"Hanken Grotesk";
  src:url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212;
}

:root{
  /* --- Verde de confianca (nucleo da marca) --- */
  --rv-primary:#0E7C66;
  --rv-primary-ink:#0A5C4B;   /* hover / texto forte */
  --rv-primary-deep:#0A5C4B;  /* alias do contrato CRO */
  --rv-primary-tint:#E6F2EE;  /* menta das seccoes */
  --rv-primary-tint-2:#D4E9E2;/* menta mais saturada (barras/scale) */

  /* --- Acento coral: poupanca + energia (complementa o verde) --- */
  --rv-accent:#F26B3A;        /* coral vibrante */
  --rv-accent-ink:#B8431C;    /* coral profundo: texto em tint/branco + hover */
  --rv-accent-deep:#B8431C;   /* alias do contrato */
  --rv-accent-tint:#FDECE4;   /* coral muito claro (fundos suaves) */

  /* --- Neutros QUENTES --- */
  --rv-ink:#1B1815;           /* quase-preto quente (AA em tudo) */
  --rv-muted:#6B665E;         /* taupe quente, AA >=5:1 */
  --rv-border:#E9E3DA;        /* linha quente */
  --rv-border-strong:#DAD2C6;
  --rv-surface:#FFFFFF;       /* cartoes */
  --rv-bg:#FBFAF8;            /* off-white quente (fundo) */
  --rv-bg-sand:#F6F1E9;       /* areia (seccoes alternadas) */

  --rv-danger:#DC2626;
  --rv-star:#F5A524;          /* dourado das estrelas (mantido) */

  --rv-radius:14px;
  --rv-radius-sm:10px;
  --rv-radius-lg:20px;
  --rv-maxw:1200px;

  /* Sombras quentes e suaves */
  --rv-shadow:0 1px 2px rgba(58,42,28,.05),0 2px 8px rgba(58,42,28,.06);
  --rv-shadow-lg:0 14px 34px rgba(58,42,28,.13);
  --rv-shadow-accent:0 10px 24px rgba(242,107,58,.30);
  --rv-shadow-primary:0 10px 24px rgba(14,124,102,.26);

  /* Tipografia */
  --rv-font:"Hanken Grotesk","Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --rv-font-display:"Bricolage Grotesque","Hanken Grotesk","Segoe UI",Helvetica,Arial,sans-serif;

  /* Espacamento base 4px */
  --rv-s1:4px; --rv-s2:8px; --rv-s3:12px; --rv-s4:16px;
  --rv-s6:24px; --rv-s8:32px; --rv-s12:48px; --rv-s16:64px;

  --rv-touch:48px;   /* alvo tactil minimo */
  --rv-ease:cubic-bezier(.2,.7,.2,1);

  /* Grao subtil (SVG feTurbulence) para o hero e blocos premium */
  --rv-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Reset leve / base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--rv-font);color:var(--rv-ink);background:var(--rv-bg);
  line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--rv-primary);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--rv-font-display);line-height:1.1;margin:0 0 var(--rv-s4);
  font-weight:700;letter-spacing:-0.02em;text-wrap:balance}
h1{font-size:clamp(28px,4.4vw,44px);font-weight:800}
h2{font-size:clamp(23px,3.2vw,32px);font-weight:800}
h3{font-size:clamp(18px,2.2vw,22px)}
p{margin:0 0 var(--rv-s4)}
small,.rv-small{font-size:14px}
ul,ol{margin:0;padding:0}
button{font-family:inherit;font-size:inherit;cursor:pointer}
:where(button,a,input,select,textarea):focus-visible{
  outline:3px solid var(--rv-primary);outline-offset:2px;border-radius:var(--rv-radius-sm)}
table{border-collapse:collapse;width:100%}

/* --------------------------------------------------------------------------
   3. Layout / utilitarios
   -------------------------------------------------------------------------- */
.rv-container{max-width:var(--rv-maxw);margin:0 auto;padding-left:16px;padding-right:16px;width:100%}
.rv-section{padding:var(--rv-s12) 0}
.rv-section--tight{padding:var(--rv-s8) 0}
.rv-section__head{text-align:center;max-width:640px;margin:0 auto var(--rv-s8)}
.rv-section__head p{color:var(--rv-muted);margin:0}

.rv-visually-hidden,.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.rv-skip-link{position:absolute;left:8px;top:-48px;z-index:1000;background:var(--rv-ink);
  color:#fff;padding:10px 16px;border-radius:var(--rv-radius-sm);transition:top .2s}
.rv-skip-link:focus{top:8px;text-decoration:none}

/* Grelha de produtos (usada por homepage/archive; ver tambem woocommerce.css) */
.rv-product-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

/* --------------------------------------------------------------------------
   4. Botoes
   -------------------------------------------------------------------------- */
.rv-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--rv-touch);padding:12px 20px;border:1px solid transparent;
  border-radius:var(--rv-radius-sm);font-weight:600;font-size:15px;line-height:1.2;
  text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
  -webkit-appearance:none;appearance:none;background:transparent;color:var(--rv-ink)}
.rv-btn:hover{text-decoration:none}
.rv-btn:disabled,.rv-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

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

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

.rv-btn--ghost{background:transparent;color:var(--rv-ink);border-color:var(--rv-border)}
.rv-btn--ghost:hover{background:var(--rv-bg);border-color:var(--rv-muted)}

.rv-btn--block{width:100%}
.rv-btn--sm{min-height:40px;padding:8px 14px;font-size:14px}

/* --------------------------------------------------------------------------
   5. Badges
   -------------------------------------------------------------------------- */
.rv-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;
  line-height:1;padding:5px 9px;border-radius:999px;letter-spacing:.01em;white-space:nowrap}
.rv-badge--grade{background:var(--rv-primary);color:#fff}
.rv-badge--save{background:var(--rv-accent);color:var(--rv-ink)}
.rv-badge--stock{background:var(--rv-primary-tint);color:var(--rv-primary-ink)}
.rv-badge--stock-low{background:var(--rv-accent-tint);color:var(--rv-accent-ink)}
.rv-badge--stock-out{background:#EEF0F2;color:var(--rv-muted)}

/* --------------------------------------------------------------------------
   6. Preco
   -------------------------------------------------------------------------- */
.rv-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.rv-price__new{color:var(--rv-muted);text-decoration:line-through;font-size:14px}
.rv-price__sale{color:var(--rv-ink);font-weight:800;font-size:20px;letter-spacing:-0.01em}
.rv-price__save{background:var(--rv-accent-tint);color:var(--rv-accent-ink);font-weight:700;
  font-size:12px;padding:3px 8px;border-radius:999px}
.rv-price__vat{color:var(--rv-muted);font-size:12px;flex-basis:100%;order:9}
.rv-price--lg .rv-price__sale{font-size:clamp(26px,4vw,34px)}
.rv-price--lg .rv-price__new{font-size:16px}

/* --------------------------------------------------------------------------
   7. Card de produto
   -------------------------------------------------------------------------- */
.rv-card{position:relative;display:flex;flex-direction:column;background:var(--rv-surface);
  border:1px solid var(--rv-border);border-radius:var(--rv-radius);overflow:hidden;
  box-shadow:var(--rv-shadow);transition:box-shadow .2s,transform .2s}
.rv-card:hover{box-shadow:var(--rv-shadow-lg);transform:translateY(-2px)}
.rv-card__media{position:relative;display:block;background:#fff;aspect-ratio:1/1;overflow:hidden}
.rv-card__media img,.rv-card__img{width:100%;height:100%;object-fit:contain;padding:12px;
  transition:transform .3s}
.rv-card:hover .rv-card__img{transform:scale(1.03)}
.rv-card__badges{position:absolute;inset:8px 8px auto 8px;display:flex;justify-content:space-between;
  gap:6px;pointer-events:none;z-index:2}
.rv-card__body{display:flex;flex-direction:column;gap:10px;padding:14px;flex:1}
.rv-card__title{font-size:15px;font-weight:600;margin:0;line-height:1.35}
.rv-card__title a{color:var(--rv-ink)}
.rv-card__title a:hover{color:var(--rv-primary);text-decoration:none}
.rv-card__specs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;
  font-size:12px;color:var(--rv-muted)}
.rv-card__specs li{background:var(--rv-bg);border:1px solid var(--rv-border);border-radius:6px;
  padding:3px 7px;line-height:1.2}
.rv-card__price{margin-top:auto}
.rv-card__cta{margin-top:4px}

/* --------------------------------------------------------------------------
   8. Trust bar
   -------------------------------------------------------------------------- */
.rv-trust-bar{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(2,1fr)}
.rv-trust-item{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--rv-ink)}
.rv-trust-item .rv-icon{color:var(--rv-primary);flex:0 0 auto}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.rv-hero{background:linear-gradient(180deg,var(--rv-primary-tint),var(--rv-surface));
  padding:var(--rv-s8) 0}
.rv-hero__inner{display:grid;gap:var(--rv-s8);align-items:center}
.rv-hero__text h1{margin-bottom:var(--rv-s4)}
.rv-hero__text p{font-size:clamp(16px,1.8vw,18px);color:var(--rv-muted);max-width:52ch}
.rv-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:var(--rv-s6) 0 var(--rv-s4)}
.rv-hero__media{position:relative}
.rv-hero__media img{width:100%;border-radius:var(--rv-radius);box-shadow:var(--rv-shadow-lg)}
.rv-hero .rv-trust-bar{grid-template-columns:1fr;gap:8px;margin-top:var(--rv-s4)}
.rv-hero .rv-trust-item{font-size:13px}

/* --------------------------------------------------------------------------
   10. Grid de categorias
   -------------------------------------------------------------------------- */
.rv-catgrid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.rv-catcard{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:20px 12px;background:var(--rv-surface);
  border:1px solid var(--rv-border);border-radius:var(--rv-radius);color:var(--rv-ink);
  min-height:120px;transition:border-color .2s,box-shadow .2s,transform .2s}
.rv-catcard:hover{border-color:var(--rv-primary);box-shadow:var(--rv-shadow);
  transform:translateY(-2px);text-decoration:none}
.rv-catcard img,.rv-catcard .rv-icon{width:40px;height:40px;color:var(--rv-primary)}
.rv-catcard strong{font-size:15px;font-weight:600}
.rv-catcard span{font-size:13px;color:var(--rv-muted)}

/* --------------------------------------------------------------------------
   11. Passos (como funciona)
   -------------------------------------------------------------------------- */
.rv-steps{display:grid;gap:20px;grid-template-columns:1fr;counter-reset:rv-step}
.rv-step{position:relative;background:var(--rv-surface);border:1px solid var(--rv-border);
  border-radius:var(--rv-radius);padding:24px 20px 20px}
.rv-step__num,.rv-step > .rv-step__num{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:999px;background:var(--rv-primary);color:#fff;
  font-weight:800;font-size:18px;margin-bottom:12px}
.rv-step h3{font-size:18px;margin:0 0 6px}
.rv-step p{color:var(--rv-muted);margin:0;font-size:14px}

/* --------------------------------------------------------------------------
   12. Breadcrumb
   -------------------------------------------------------------------------- */
.rv-breadcrumb{padding:12px 0;font-size:13px}
.rv-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;align-items:center}
.rv-breadcrumb li{display:flex;align-items:center;gap:6px;color:var(--rv-muted)}
.rv-breadcrumb li:not(:last-child)::after{content:"/";color:var(--rv-border)}
.rv-breadcrumb a{color:var(--rv-muted)}
.rv-breadcrumb a:hover{color:var(--rv-primary)}
.rv-breadcrumb [aria-current="page"]{color:var(--rv-ink);font-weight:600}

/* --------------------------------------------------------------------------
   13. Tabela de especificacoes
   -------------------------------------------------------------------------- */
.rv-spec-table{width:100%;border:1px solid var(--rv-border);border-radius:var(--rv-radius);
  overflow:hidden;font-size:15px}
.rv-spec-table th,.rv-spec-table td{text-align:left;padding:12px 16px;vertical-align:top}
.rv-spec-table th{width:42%;font-weight:600;color:var(--rv-muted);background:var(--rv-bg)}
.rv-spec-table td{color:var(--rv-ink);font-weight:500}
.rv-spec-table tr:not(:last-child) th,.rv-spec-table tr:not(:last-child) td{
  border-bottom:1px solid var(--rv-border)}

/* --------------------------------------------------------------------------
   14. Accordion
   -------------------------------------------------------------------------- */
.rv-accordion{border:1px solid var(--rv-border);border-radius:var(--rv-radius);overflow:hidden;
  background:var(--rv-surface)}
.rv-accordion__item:not(:last-child){border-bottom:1px solid var(--rv-border)}
.rv-accordion__title{margin:0;font-size:inherit;font-weight:inherit}
.rv-accordion__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:var(--rv-touch);padding:16px;background:transparent;border:0;
  text-align:left;font-size:16px;font-weight:600;color:var(--rv-ink)}
.rv-accordion__head .rv-icon{flex:0 0 auto;color:var(--rv-muted);transition:transform .2s}
.rv-accordion__head[aria-expanded="true"] .rv-icon{transform:rotate(180deg);color:var(--rv-primary)}
.rv-accordion__panel{padding:0 16px}
.rv-accordion__panel[hidden]{display:none}
.rv-accordion__panel-inner{padding:0 0 16px;color:var(--rv-muted);font-size:15px}
.rv-accordion__panel-inner p{margin:0 0 10px}
.rv-accordion__panel-inner :last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   15. Galeria de produto
   -------------------------------------------------------------------------- */
.rv-gallery{display:flex;flex-direction:column;gap:12px}
.rv-gallery__main{position:relative;background:#fff;border:1px solid var(--rv-border);
  border-radius:var(--rv-radius);overflow:hidden;aspect-ratio:1/1;cursor:zoom-in}
.rv-gallery__main img{width:100%;height:100%;object-fit:contain;padding:16px}
.rv-gallery__thumbs{display:flex;gap:8px;flex-wrap:wrap}
.rv-gallery__thumb{width:64px;height:64px;padding:4px;background:#fff;border:1px solid var(--rv-border);
  border-radius:var(--rv-radius-sm);overflow:hidden;cursor:pointer}
.rv-gallery__thumb img{width:100%;height:100%;object-fit:contain}
.rv-gallery__thumb[aria-current="true"],.rv-gallery__thumb.is-active{border-color:var(--rv-primary);
  box-shadow:0 0 0 1px var(--rv-primary)}

/* Lightbox simples (aberto por JS) */
.rv-lightbox{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;
  background:rgba(20,24,27,.85);padding:24px}
.rv-lightbox.is-open{display:flex}
.rv-lightbox img{max-width:100%;max-height:90vh;object-fit:contain;border-radius:var(--rv-radius)}
.rv-lightbox__close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:999px;
  border:0;background:#fff;color:var(--rv-ink);font-size:22px;line-height:1;display:flex;
  align-items:center;justify-content:center}

/* --------------------------------------------------------------------------
   16. Filtros
   -------------------------------------------------------------------------- */
.rv-filters{background:var(--rv-surface);border:1px solid var(--rv-border);border-radius:var(--rv-radius);
  padding:16px}
.rv-filters__toggle{display:none} /* so em mobile */
.rv-filter-group{padding:12px 0}
.rv-filter-group:not(:last-child){border-bottom:1px solid var(--rv-border)}
.rv-filter-group > legend,.rv-filter-group__title{font-weight:700;font-size:14px;padding:0;margin:0 0 8px;
  color:var(--rv-ink)}
.rv-filter-group ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.rv-filter-option{display:flex;align-items:center;gap:10px;min-height:var(--rv-touch);
  padding:4px 6px;border-radius:var(--rv-radius-sm);cursor:pointer;font-size:14px}
.rv-filter-option:hover{background:var(--rv-bg)}
.rv-filter-option input{width:18px;height:18px;accent-color:var(--rv-primary);flex:0 0 auto}
.rv-filter-option .count{margin-left:auto;color:var(--rv-muted);font-size:12px}
.rv-filters__actions{display:flex;gap:8px;margin-top:12px}

/* --------------------------------------------------------------------------
   17. Icones de pagamento
   -------------------------------------------------------------------------- */
.rv-pay-icons{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rv-pay-icons__item{display:inline-flex;line-height:0}
.rv-pay{border-radius:4px}

/* --------------------------------------------------------------------------
   18. Header + navegacao
   -------------------------------------------------------------------------- */
.rv-header{background:var(--rv-surface);border-bottom:1px solid var(--rv-border);
  position:sticky;top:0;z-index:100}
.rv-header-inner{display:flex;align-items:center;gap:12px;min-height:64px}
.rv-brand{font-weight:800;font-size:22px;color:var(--rv-ink);text-decoration:none;
  white-space:nowrap;margin-right:auto}
.rv-brand:hover{text-decoration:none}
.rv-brand span{color:var(--rv-primary)}

.rv-nav{display:none} /* mobile: escondido; abre no painel */
.rv-menu{list-style:none;display:flex;gap:4px;margin:0;padding:0}
.rv-menu a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  color:var(--rv-ink);font-weight:500;border-radius:var(--rv-radius-sm)}
.rv-menu a:hover{background:var(--rv-bg);color:var(--rv-primary);text-decoration:none}
.rv-menu .current-menu-item > a{color:var(--rv-primary)}

.rv-header-actions{display:flex;align-items:center;gap:2px}
.rv-icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:var(--rv-touch);height:var(--rv-touch);border:0;background:transparent;color:var(--rv-ink);
  border-radius:var(--rv-radius-sm);text-decoration:none}
.rv-icon-btn:hover{background:var(--rv-bg);color:var(--rv-primary);text-decoration:none}
.rv-cart-count,.rv-wish-count{position:absolute;top:6px;right:6px;min-width:18px;height:18px;
  padding:0 4px;border-radius:999px;background:var(--rv-accent);color:var(--rv-ink);
  font-size:11px;font-weight:800;line-height:18px;text-align:center}
.rv-wish-count{background:var(--rv-danger);color:#fff}
.rv-cart-count[data-empty="1"],.rv-wish-count[data-empty="1"]{display:none}

.rv-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
  width:var(--rv-touch);height:var(--rv-touch);border:0;background:transparent;
  border-radius:var(--rv-radius-sm)}
.rv-burger:hover{background:var(--rv-bg)}
.rv-burger span{display:block;width:22px;height:2px;background:var(--rv-ink);border-radius:2px;
  transition:transform .2s,opacity .2s;margin:0 auto}
.rv-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.rv-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.rv-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Painel de pesquisa */
.rv-search{display:none;border-top:1px solid var(--rv-border);background:var(--rv-surface)}
.rv-search.is-open{display:block}
.rv-search form{display:flex;gap:8px;padding:12px 0}
.rv-search input[type="search"]{flex:1;min-height:var(--rv-touch);padding:0 14px;
  border:1px solid var(--rv-border);border-radius:var(--rv-radius-sm);font-size:16px;background:var(--rv-surface);color:var(--rv-ink)}
.rv-search input[type="search"]:focus{border-color:var(--rv-primary);outline:none;
  box-shadow:0 0 0 3px var(--rv-primary-tint)}

/* Menu mobile (painel deslizante) */
.rv-mobile-nav{position:fixed;inset:0 0 0 auto;width:min(86vw,340px);background:var(--rv-surface);
  z-index:200;transform:translateX(100%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s;
  box-shadow:var(--rv-shadow-lg);display:flex;flex-direction:column;padding:16px;overflow-y:auto}
.rv-mobile-nav.is-open{transform:translateX(0);visibility:visible;transition:transform .25s ease,visibility 0s linear 0s}
.rv-mobile-nav__head{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:12px;border-bottom:1px solid var(--rv-border);margin-bottom:8px}
.rv-mobile-nav__close{width:var(--rv-touch);height:var(--rv-touch);border:0;background:transparent;
  font-size:24px;line-height:1;color:var(--rv-ink);border-radius:var(--rv-radius-sm)}
.rv-mobile-nav .rv-menu{flex-direction:column;gap:0}
.rv-mobile-nav .rv-menu a{min-height:var(--rv-touch);border-radius:var(--rv-radius-sm);
  border-bottom:1px solid var(--rv-border);width:100%}
.rv-overlay{position:fixed;inset:0;background:rgba(20,24,27,.5);z-index:150;opacity:0;
  visibility:hidden;transition:opacity .25s,visibility .25s}
.rv-overlay.is-open{opacity:1;visibility:visible}

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.rv-footer{background:var(--rv-ink);color:#D5D9DD;margin-top:var(--rv-s16);
  padding:var(--rv-s12) 0 var(--rv-s6);font-size:14px}
.rv-footer a{color:#D5D9DD}
.rv-footer a:hover{color:#fff}
.rv-footer__trust{padding-bottom:var(--rv-s8);margin-bottom:var(--rv-s8);
  border-bottom:1px solid rgba(255,255,255,.12)}
.rv-footer__trust .rv-trust-item{color:#fff}
.rv-footer__trust .rv-trust-item .rv-icon{color:var(--rv-accent)}
.rv-footer-grid{display:grid;gap:var(--rv-s8);grid-template-columns:1fr}
.rv-footer-col h4{color:#fff;font-size:15px;margin:0 0 12px}
.rv-footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rv-footer-col--brand .rv-brand{color:#fff;display:inline-block;margin-bottom:10px}
.rv-footer-col--brand p{color:#9AA1A8;max-width:34ch}
.rv-footer__bottom{display:flex;flex-direction:column;gap:16px;padding-top:var(--rv-s8);
  margin-top:var(--rv-s8);border-top:1px solid rgba(255,255,255,.12)}
.rv-footer__bottom p{margin:0;color:#9AA1A8;font-size:13px}
.rv-footer .rv-pay-icons{gap:6px}

/* --------------------------------------------------------------------------
   20. Estado vazio
   -------------------------------------------------------------------------- */
.rv-empty{text-align:center;max-width:520px;margin:0 auto;padding:var(--rv-s12) 16px}
.rv-empty .rv-icon{width:56px;height:56px;color:var(--rv-muted);margin:0 auto var(--rv-s4)}
.rv-empty h2{margin:0 0 8px}
.rv-empty p{color:var(--rv-muted);margin:0 0 var(--rv-s6)}

/* --------------------------------------------------------------------------
   21. Sticky CTA (mobile, dentro do single-product)
   -------------------------------------------------------------------------- */
.rv-sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;
  align-items:center;gap:12px;padding:10px 16px;background:var(--rv-surface);
  border-top:1px solid var(--rv-border);box-shadow:0 -4px 12px rgba(20,24,27,.08)}
.rv-sticky-cta__price{display:flex;flex-direction:column;line-height:1.1}
.rv-sticky-cta__price .rv-price__sale{font-size:18px}
.rv-sticky-cta__price .rv-price__vat{font-size:11px}
.rv-sticky-cta .rv-btn{flex:1;margin-left:auto}

/* --------------------------------------------------------------------------
   22. Media queries (mobile-first: alargar para cima)
   -------------------------------------------------------------------------- */

/* Grelha de produtos: 2 colunas em ecras pequenos */
@media (max-width:640px){
  .rv-product-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* >= 560px: trust bar e categorias com mais colunas */
@media (min-width:560px){
  .rv-catgrid{grid-template-columns:repeat(3,1fr)}
  .rv-steps{grid-template-columns:repeat(3,1fr)}
}

/* >= 768px: passa a layout desktop de navegacao */
@media (min-width:768px){
  .rv-header-inner{min-height:72px;gap:20px}
  .rv-nav{display:block}
  .rv-burger{display:none}
  .rv-trust-bar{grid-template-columns:repeat(4,1fr)}
  .rv-hero .rv-trust-bar{grid-template-columns:repeat(2,1fr)}
  .rv-footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}
  .rv-footer__bottom{flex-direction:row;align-items:center;justify-content:space-between}
  .rv-sticky-cta{display:none!important} /* so mobile */
}

/* Sticky CTA visivel apenas em mobile quando o body o marca */
@media (max-width:767px){
  body.rv-has-sticky-cta .rv-sticky-cta{display:flex}
  body.rv-has-sticky-cta{padding-bottom:76px}
  .rv-filters__toggle{display:inline-flex}
  /* Filtros colapsam num painel escondido ate abrir */
  .rv-filters[data-collapsed="true"] .rv-filters__body{display:none}
}

/* >= 900px: hero e single em 2 colunas */
@media (min-width:900px){
  .rv-hero__inner{grid-template-columns:1.1fr 1fr}
  .rv-catgrid{grid-template-columns:repeat(4,1fr)}
}

/* Preferencia por menos movimento */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important}
}

/* ==========================================================================
   === Fase 2.1: reconciliacao CSS (classes reais do markup) ===
   --------------------------------------------------------------------------
   Este bloco APENAS ACRESCENTA. Nao reescreve nenhuma regra acima.
   Estiliza as classes que existem no markup (PHP) mas que nao estavam cobertas
   (ou estavam sob seletores errados, ex.: .rv-catcard strong/span,
   .rv-filter-group__title). Onde havia conflito de especificidade com regras
   antigas (.rv-catcard span, .rv-empty p) os novos seletores sao ancorados no
   pai para garantir que ganham sem !important.
   Mobile-first, tokens do :root, zero overflow a 360px, alvos tacteis >= 48px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. Subtitulo de seccao (.rv-section__lead) + centragem dos cabecalhos da home
   -------------------------------------------------------------------------- */
.rv-section--cats   > .rv-container > h2,
.rv-section--featured > .rv-container > h2,
.rv-section--steps  > .rv-container > h2,
.rv-section--trust  > .rv-container > h2,
.rv-section--faq    > .rv-container > h2{
  text-align:center;
}
.rv-section__lead{
  max-width:640px;
  margin:-4px auto var(--rv-s8);
  text-align:center;
  color:var(--rv-muted);
  font-size:clamp(15px,1.6vw,17px);
}

/* --------------------------------------------------------------------------
   B. Grelha de destaques da homepage (.rv-products)
   Espelha a .rv-product-grid: nunca empilha numa unica coluna.
   -------------------------------------------------------------------------- */
.rv-products{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}

/* --------------------------------------------------------------------------
   C. Cartoes de categoria: nomes REAIS do markup
   (.rv-catcard__icon / __title / __desc / __count)
   Ancorados em .rv-catcard para vencer a antiga regra .rv-catcard span.
   -------------------------------------------------------------------------- */
.rv-catcard{
  gap:10px;
  padding:22px 16px;
}
.rv-catcard .rv-catcard__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:999px;
  background:var(--rv-primary-tint);
  color:var(--rv-primary);
  margin-bottom:2px;
}
.rv-catcard .rv-catcard__icon .rv-icon{
  width:28px;
  height:28px;
  color:var(--rv-primary);
}
.rv-catcard .rv-catcard__title{
  font-size:16px;
  font-weight:700;
  color:var(--rv-ink);
  line-height:1.3;
}
.rv-catcard .rv-catcard__desc{
  font-size:13px;
  line-height:1.5;
  color:var(--rv-muted);
}
.rv-catcard .rv-catcard__count{
  margin-top:2px;
  font-size:13px;
  font-weight:600;
  color:var(--rv-primary);
}
.rv-catcard:hover .rv-catcard__count{
  text-decoration:underline;
}

/* --------------------------------------------------------------------------
   D. Hero: mini barra de confianca (.rv-hero__mini)
   Era <ul> com bullets; passa a linha de itens icone+texto sem marcadores.
   -------------------------------------------------------------------------- */
.rv-hero__mini{
  list-style:none;
  margin:var(--rv-s4) 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
}
.rv-hero__mini li{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  font-size:13px;
  font-weight:500;
  color:var(--rv-ink);
}
.rv-hero__mini li .rv-icon{
  color:var(--rv-primary);
  flex:0 0 auto;
}

/* Badges decorativos sobre o visual do hero (ficam empilhados, sem overlap). */
.rv-hero__media{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.rv-hero__media .rv-icon{
  color:var(--rv-primary);
  opacity:.9;
  flex-basis:100%;
}

/* --------------------------------------------------------------------------
   E. Confianca: grelha de 3 cartoes (.rv-reasons / .rv-reason / __icon/__title/__text)
   -------------------------------------------------------------------------- */
.rv-reasons{
  display:grid;
  gap:16px;
  grid-template-columns:1fr;
}
.rv-reason{
  background:var(--rv-surface);
  border:1px solid var(--rv-border);
  border-radius:var(--rv-radius);
  box-shadow:var(--rv-shadow);
  padding:24px 20px;
}
.rv-reason__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:999px;
  background:var(--rv-primary-tint);
  color:var(--rv-primary);
  margin-bottom:14px;
}
.rv-reason__icon .rv-icon{color:var(--rv-primary)}
.rv-reason__title{
  font-size:18px;
  margin:0 0 6px;
}
.rv-reason__text{
  margin:0;
  color:var(--rv-muted);
  font-size:15px;
}

/* --------------------------------------------------------------------------
   F. CTA final (.rv-cta)
   -------------------------------------------------------------------------- */
.rv-cta{
  text-align:center;
  padding:clamp(28px,5vw,48px) 20px;
  border-radius:var(--rv-radius);
  background:linear-gradient(135deg,var(--rv-primary),var(--rv-primary-ink));
  color:#fff;
  box-shadow:var(--rv-shadow-lg);
}
.rv-cta h2{color:#fff;margin:0 0 10px}
.rv-cta p{color:rgba(255,255,255,.92);max-width:60ch;margin:0 auto var(--rv-s6)}
.rv-cta .rv-btn{margin:0 auto}

/* --------------------------------------------------------------------------
   G. Estado vazio: rotulos por classe (.rv-empty__title / __text / __icon)
   Ancorados em .rv-empty para vencer .rv-empty p / .rv-empty h2.
   -------------------------------------------------------------------------- */
.rv-empty .rv-empty__icon{
  display:block;
  color:var(--rv-muted);
  margin:0 auto var(--rv-s4);
}
.rv-empty .rv-empty__title{
  font-size:20px;
  font-weight:700;
  line-height:1.3;
  color:var(--rv-ink);
  margin:0 0 8px;
}
.rv-empty .rv-empty__text{
  color:var(--rv-muted);
  margin:0 0 var(--rv-s6);
}

/* --------------------------------------------------------------------------
   H. Arquivo da loja: cabecalho, layout 2 colunas, barra e resultados
   -------------------------------------------------------------------------- */
.rv-shop{padding-top:var(--rv-s2);padding-bottom:var(--rv-s12)}
.rv-shop__head{margin:0 0 var(--rv-s6)}
.rv-shop__title{margin:0 0 var(--rv-s2)}
.rv-shop__intro{
  margin:0;
  max-width:70ch;
  color:var(--rv-muted);
  font-size:clamp(15px,1.6vw,17px);
}

/* Layout: uma coluna em mobile; sidebar + grelha em >= 768px (ver media query). */
.rv-shop__layout{
  display:grid;
  gap:var(--rv-s6);
  grid-template-columns:1fr;
  align-items:start;
}
.rv-shop__main{min-width:0} /* impede overflow da grelha dentro do grid */

.rv-shop__bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 var(--rv-s4);
}
.rv-shop__bar form.woocommerce-ordering{margin:0}
.rv-result-count{
  color:var(--rv-muted);
  font-size:14px;
  font-weight:500;
}
.rv-shop__results{min-height:120px;transition:opacity .2s}
.rv-shop__results.is-loading{opacity:.55;pointer-events:none}

/* --------------------------------------------------------------------------
   I. Paginacao custom (.rv-pagination) - saida de paginate_links(type=list)
   -------------------------------------------------------------------------- */
.rv-pagination{margin-top:var(--rv-s8)}
.rv-pagination ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
}
.rv-pagination li{margin:0}
.rv-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  min-height:48px;
  padding:0 12px;
  border:1px solid var(--rv-border);
  border-radius:var(--rv-radius-sm);
  background:var(--rv-surface);
  color:var(--rv-ink);
  font-weight:600;
  line-height:1;
}
a.page-numbers:hover{
  border-color:var(--rv-primary);
  color:var(--rv-primary);
  text-decoration:none;
}
.rv-pagination .page-numbers.current{
  background:var(--rv-primary);
  color:#fff;
  border-color:var(--rv-primary);
}
.rv-pagination .page-numbers.dots{
  border-color:transparent;
  background:transparent;
  color:var(--rv-muted);
}
.rv-pagination__ico{display:inline-flex;line-height:0}

/* --------------------------------------------------------------------------
   J. Filtros: cabecalho, legendas e escala de preco (nomes REAIS do markup)
   O CSS antigo estilizava .rv-filter-group__title (inexistente); o markup usa
   .rv-filter-group__legend e envolve as opcoes em .rv-filter-group__options.
   -------------------------------------------------------------------------- */
.rv-filters__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 var(--rv-s2);
}
.rv-filters__title{margin:0;font-size:16px;font-weight:700}
.rv-filters__header .rv-filters__clear{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 4px;
  font-size:13px;
  font-weight:600;
  color:var(--rv-muted);
  text-decoration:underline;
}
.rv-filters__header .rv-filters__clear:hover{color:var(--rv-primary)}

.rv-filter-group__legend{
  padding:0;
  margin:0 0 var(--rv-s2);
  font-weight:700;
  font-size:14px;
  color:var(--rv-ink);
}
.rv-filter-group__options{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.rv-filter-option__label{flex:1 1 auto}

/* Escala de preco (min. / max.) */
.rv-filter-price{
  display:flex;
  align-items:flex-end;
  gap:8px;
}
.rv-filter-price__field{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1 1 0;
  min-width:0;
}
.rv-filter-price__label{font-size:12px;color:var(--rv-muted)}
.rv-filter-price__input{
  width:100%;
  min-height:var(--rv-touch);
  padding:0 12px;
  border:1px solid var(--rv-border);
  border-radius:var(--rv-radius-sm);
  background:var(--rv-surface);
  color:var(--rv-ink);
  font-size:16px;
}
.rv-filter-price__input:focus{
  border-color:var(--rv-primary);
  outline:none;
  box-shadow:0 0 0 3px var(--rv-primary-tint);
}
.rv-filter-price__sep{
  align-self:flex-end;
  padding-bottom:12px;
  color:var(--rv-muted);
}

/* --------------------------------------------------------------------------
   K. Pagina de produto (single): resumo, seccoes e relacionados
   O layout 2 colunas (galeria + resumo) e a grelha .woocommerce div.product
   vem do woocommerce.css (>=900px). Aqui tratamos espacamento e enfase.
   -------------------------------------------------------------------------- */
.rv-single{padding-bottom:var(--rv-s12)}

.rv-summary__title{margin:0 0 var(--rv-s3)}
.rv-summary__badges{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 0 var(--rv-s3);
}
.rv-summary__excerpt{
  margin:var(--rv-s3) 0;
  color:var(--rv-muted);
  font-size:15px;
  line-height:1.6;
}
.rv-summary__buy{margin:var(--rv-s4) 0 0}
.rv-summary .rv-trust-bar{
  margin-top:var(--rv-s6);
  padding-top:var(--rv-s6);
  border-top:1px solid var(--rv-border);
}

.rv-product__details{margin-top:var(--rv-s12)}
.rv-product__pay{margin-top:var(--rv-s12)}
.rv-product__faq{margin-top:var(--rv-s12)}
.rv-product__pay-title,
.rv-product__faq-title,
.rv-related__title{
  font-size:clamp(18px,2.2vw,22px);
  margin:0 0 var(--rv-s4);
}
.rv-product__pay .rv-pay-icons{gap:8px}

.rv-related{
  margin-top:var(--rv-s12);
  padding-top:var(--rv-s8);
  border-top:1px solid var(--rv-border);
}

/* --------------------------------------------------------------------------
   L. Media queries da reconciliacao (mobile-first)
   -------------------------------------------------------------------------- */

/* Grelha de destaques: 2 colunas em ecras pequenos (coerente com .rv-product-grid). */
@media (max-width:640px){
  .rv-products{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* Confianca: 3 cartoes lado a lado a partir de >= 560px. */
@media (min-width:560px){
  .rv-reasons{grid-template-columns:repeat(3,1fr)}
}

/* Colapso de filtros em mobile (<=767px).
   O estado real e definido por JS: filters.js alterna .is-open no #rv-filters-form
   (a classe .rv-js e' adicionada por main.js). Sem JS (.rv-js ausente) os filtros
   ficam sempre visiveis -> melhoria progressiva preservada. Suporta tambem
   [data-collapsed] caso o markup/JS venha a usar esse mecanismo.
   Nao existe .rv-filters__body no markup; escondem-se os grupos, o cabecalho
   e as accoes quando colapsado. */
@media (max-width:767px){
  .rv-filters__toggle{width:100%;margin-bottom:var(--rv-s4)}

  .rv-js .rv-filters:not(.is-open):not([data-collapsed="false"]) .rv-filters__header,
  .rv-js .rv-filters:not(.is-open):not([data-collapsed="false"]) .rv-filter-group,
  .rv-js .rv-filters:not(.is-open):not([data-collapsed="false"]) .rv-filters__actions,
  .rv-js .rv-filters[data-collapsed="true"] .rv-filters__header,
  .rv-js .rv-filters[data-collapsed="true"] .rv-filter-group,
  .rv-js .rv-filters[data-collapsed="true"] .rv-filters__actions{
    display:none;
  }
}

/* >= 768px: arquivo em 2 colunas (sidebar de filtros + grelha). */
@media (min-width:768px){
  .rv-shop__layout{grid-template-columns:minmax(220px,260px) 1fr;gap:var(--rv-s8)}
  .rv-shop__sidebar{position:sticky;top:88px;align-self:start}
}

/* ==========================================================================
   === ELEVACAO FRONT-END + CRO (Fase 3) ===
   Nova linguagem visual (tipografia display, cor quente, coral de poupanca,
   movimento contido) + CSS COMPLETO de todos os componentes do contrato CRO.
   So ACRESCENTA / sobrepoe pelo final; nao reescreve regras acima.
   Mobile-first, AA, alvos >= 48px, zero overflow a 360px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   M0. Primitivos de movimento (CSS puro, respeitam prefers-reduced-motion)
   -------------------------------------------------------------------------- */
@keyframes rv-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes rv-fade{from{opacity:0}to{opacity:1}}
@keyframes rv-pulse{0%{box-shadow:0 0 0 0 rgba(242,107,58,.45)}
  70%{box-shadow:0 0 0 8px rgba(242,107,58,0)}100%{box-shadow:0 0 0 0 rgba(242,107,58,0)}}

.rv-reveal{animation:rv-rise .7s var(--rv-ease) both}
.rv-reveal--2{animation-delay:.08s}
.rv-reveal--3{animation-delay:.16s}
.rv-reveal--4{animation-delay:.24s}
.rv-reveal--5{animation-delay:.32s}
.rv-reveal--6{animation-delay:.40s}

/* Seccoes com fundo tematico (para os agentes de build alternarem ritmo) */
.rv-section--mint{background:var(--rv-primary-tint)}
.rv-section--sand{background:var(--rv-bg-sand)}

/* --------------------------------------------------------------------------
   M1. Botoes: elevacao quente + micro-lift (coral no acento)
   -------------------------------------------------------------------------- */
.rv-btn{transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s var(--rv-ease)}
.rv-btn--primary{box-shadow:var(--rv-shadow-primary)}
.rv-btn--primary:hover{transform:translateY(-1px)}
.rv-btn--accent{box-shadow:var(--rv-shadow-accent)}
.rv-btn--accent:hover{transform:translateY(-1px)}
.rv-btn--primary:active,.rv-btn--accent:active{transform:translateY(0)}
.rv-btn--lg{min-height:54px;padding:15px 26px;font-size:16px;font-weight:800}

/* Cartao de produto: media em fundo quente + titulo que acende no hover */
.rv-card__media{background:var(--rv-bg-sand)}
.rv-card:hover .rv-card__title a{color:var(--rv-primary-ink)}

/* --------------------------------------------------------------------------
   M2. HERO elevado (gradiente menta + grao) + reveal escalonado
   -------------------------------------------------------------------------- */
.rv-hero{
  position:relative;overflow:hidden;
  padding:var(--rv-s12) 0 var(--rv-s16);
  /* Grao (topo) integrado no gradiente menta via background-blend-mode:
     fica sempre atras do conteudo, sem depender da estrutura do markup. */
  background-image:
    var(--rv-noise),
    radial-gradient(120% 90% at 85% -10%, var(--rv-primary-tint) 0%, transparent 55%),
    linear-gradient(180deg,#EFF7F3 0%, var(--rv-bg) 68%);
  background-size:170px, auto, auto;
  background-repeat:repeat, no-repeat, no-repeat;
  background-blend-mode:multiply, normal, normal;
}

.rv-hero__eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 var(--rv-s4);
  padding:7px 14px;border-radius:999px;background:var(--rv-surface);border:1px solid var(--rv-border);
  box-shadow:var(--rv-shadow);font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--rv-primary-ink)}
.rv-hero__eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--rv-accent);flex:0 0 auto}

.rv-hero__title{font-family:var(--rv-font-display);font-weight:800;
  font-size:clamp(32px,6.2vw,56px);line-height:1.02;letter-spacing:-0.03em;margin:0 0 var(--rv-s4)}
.rv-hero__title em,.rv-hero__title .rv-hl{font-style:normal;color:var(--rv-primary);
  background:linear-gradient(180deg,transparent 62%,var(--rv-primary-tint-2) 62%);padding:0 .06em}

.rv-hero__value{font-size:clamp(16px,2vw,19px);color:var(--rv-muted);max-width:54ch;margin:0 0 var(--rv-s6)}

.rv-hero__proof{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin-top:var(--rv-s6);font-size:14px;color:var(--rv-ink)}
.rv-hero__proof strong{color:var(--rv-primary-ink);font-weight:800}
.rv-hero__proof .rv-reviews__stars{color:var(--rv-star)}

/* Reveal escalonado do hero */
.rv-hero__eyebrow,.rv-hero__title,.rv-hero__value,.rv-hero__cta,
.rv-hero__proof,.rv-hero__mini{animation:rv-rise .7s var(--rv-ease) both}
.rv-hero__eyebrow{animation-delay:.04s}
.rv-hero__title{animation-delay:.10s}
.rv-hero__value{animation-delay:.18s}
.rv-hero__cta{animation-delay:.26s}
.rv-hero__proof,.rv-hero__mini{animation-delay:.34s}
.rv-hero__media{animation:rv-fade .8s var(--rv-ease) .2s both}

/* --------------------------------------------------------------------------
   M3. PRICEBOX (ancora de poupanca do produto)
   Linha 1: preco antigo (riscado) + preco de venda + badge "poupa X%".
   Linhas seguintes: "Poupa X,XX €", "IVA incluido", prestacoes.
   -------------------------------------------------------------------------- */
.rv-pricebox{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:4px;margin:0}
.rv-pricebox__new{order:1;color:var(--rv-muted);text-decoration:line-through;
  font-size:16px;font-weight:500}
.rv-pricebox__sale{order:2;font-family:var(--rv-font-display);color:var(--rv-ink);
  font-weight:800;font-size:clamp(30px,6vw,40px);letter-spacing:-0.02em;line-height:1}
.rv-pricebox__save{order:3;align-self:center;background:var(--rv-accent);color:var(--rv-ink);
  font-weight:800;font-size:13px;line-height:1;padding:6px 10px;border-radius:999px;
  box-shadow:var(--rv-shadow);white-space:nowrap}
.rv-pricebox__saved{order:4;flex-basis:100%;color:var(--rv-accent-ink);font-weight:700;font-size:14px}
.rv-pricebox__vat{order:5;flex-basis:100%;color:var(--rv-muted);font-size:13px}
.rv-pricebox__installments{order:6;flex-basis:100%;margin-top:6px;padding:9px 12px;font-size:14px;
  color:var(--rv-ink);background:var(--rv-bg-sand);border:1px dashed var(--rv-border-strong);
  border-radius:var(--rv-radius-sm)}
.rv-pricebox__installments strong{color:var(--rv-primary-ink);font-weight:800}

/* --------------------------------------------------------------------------
   M4. BUYBOX (coluna resumo de compra; sticky no desktop) + CTA
   -------------------------------------------------------------------------- */
.rv-buybox{display:flex;flex-direction:column;gap:20px;
  background:var(--rv-surface);border:1px solid var(--rv-border);border-radius:var(--rv-radius-lg);
  padding:clamp(20px,2.4vw,28px);box-shadow:var(--rv-shadow-lg)}
/* O gap do buybox controla o ritmo vertical: neutralizar margens duplicadas dos filhos directos. */
.rv-buybox>.rv-summary__title,
.rv-buybox>.rv-summary__badges{margin-bottom:0}
.rv-buybox>.rv-summary__buy{margin-top:0}
/* Zona de reforco (pagamento, confianca e selo) separada da area de compra, com respiro. */
.rv-buybox>.rv-paymethods{margin-top:4px;padding-top:20px;border-top:1px solid var(--rv-border)}
.rv-buybox>.rv-seal{margin-top:4px}
.rv-buybox__cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:54px;padding:14px 22px;border:1px solid var(--rv-primary);border-radius:var(--rv-radius-sm);
  background:var(--rv-primary);color:#fff;font-weight:800;font-size:16px;line-height:1.2;
  cursor:pointer;text-decoration:none;box-shadow:var(--rv-shadow-primary);
  transition:background .15s,box-shadow .15s,transform .15s var(--rv-ease)}
.rv-buybox__cta:hover{background:var(--rv-primary-ink);color:#fff;text-decoration:none;transform:translateY(-1px)}
.rv-buybox__cta:active{transform:translateY(0)}
@media (min-width:980px){.rv-buybox{position:sticky;top:88px}}

/* --------------------------------------------------------------------------
   M5. STICKY-BUY (barra fixa mobile: preco + CTA, entra ao rolar)
   -------------------------------------------------------------------------- */
.rv-sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;align-items:center;
  gap:12px;padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  background:var(--rv-surface);border-top:1px solid var(--rv-border);
  box-shadow:0 -6px 20px rgba(58,42,28,.12);transform:translateY(110%);
  transition:transform .3s var(--rv-ease)}
.rv-sticky-buy.is-visible{transform:translateY(0)}
.rv-sticky-buy__price{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.rv-sticky-buy__price strong,.rv-sticky-buy__price .rv-pricebox__sale{
  font-family:var(--rv-font-display);font-size:18px;font-weight:800;letter-spacing:-0.01em}
.rv-sticky-buy__price small,.rv-sticky-buy__price .rv-pricebox__vat{font-size:11px;color:var(--rv-muted)}
.rv-sticky-buy__cta,.rv-sticky-buy .rv-btn{flex:1;margin-left:auto;min-height:48px}
@media (max-width:979px){
  .rv-sticky-buy{display:flex}
  body.rv-has-sticky-buy{padding-bottom:80px}
}
@media (min-width:980px){.rv-sticky-buy{display:none!important}}

/* --------------------------------------------------------------------------
   M6. CONDITION (modulo de condicao: escala C/B/A + o que e testado)
   -------------------------------------------------------------------------- */
.rv-condition{background:var(--rv-surface);border:1px solid var(--rv-border);
  border-radius:var(--rv-radius);padding:20px;box-shadow:var(--rv-shadow)}
.rv-condition__title{font-family:var(--rv-font-display);font-size:20px;font-weight:800;margin:0 0 4px}
.rv-condition__desc{color:var(--rv-muted);font-size:15px;margin:0 0 var(--rv-s4)}
.rv-condition__scale{display:flex;gap:6px;margin:0 0 var(--rv-s4);list-style:none;padding:0}
.rv-condition__step{flex:1;text-align:center;padding:10px 4px;border-radius:var(--rv-radius-sm);
  background:var(--rv-bg-sand);border:1px solid var(--rv-border);font-weight:800;font-size:14px;
  color:var(--rv-muted)}
.rv-condition__step.is-active,.rv-condition__step[aria-current="true"]{
  background:var(--rv-primary);border-color:var(--rv-primary);color:#fff;
  box-shadow:var(--rv-shadow-primary)}
.rv-condition__step small{display:block;font-size:11px;font-weight:600;opacity:.85;margin-top:2px}
.rv-condition__checks{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:1fr;gap:8px 16px}
.rv-condition__checks li{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--rv-ink)}
.rv-condition__checks li .rv-icon,.rv-condition__checks li svg{color:var(--rv-primary);
  flex:0 0 auto;margin-top:1px}
@media (min-width:480px){.rv-condition__checks{grid-template-columns:1fr 1fr}}

/* --------------------------------------------------------------------------
   M7. TRUSTCLUSTER + CHIPS (icone + label)
   -------------------------------------------------------------------------- */
.rv-trustcluster{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.rv-trust-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 13px;
  background:var(--rv-surface);border:1px solid var(--rv-border);border-radius:999px;
  font-size:13px;font-weight:600;color:var(--rv-ink);box-shadow:var(--rv-shadow)}
.rv-trust-chip .rv-icon,.rv-trust-chip svg{color:var(--rv-primary);flex:0 0 auto}

/* --------------------------------------------------------------------------
   M8. PAYMETHODS (linha de SVGs + nota de prestacoes)
   -------------------------------------------------------------------------- */
.rv-paymethods{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rv-paymethods .rv-pay{border-radius:5px;box-shadow:var(--rv-shadow)}
.rv-paymethods__note{flex-basis:100%;margin:6px 0 0;font-size:13px;color:var(--rv-muted)}

/* --------------------------------------------------------------------------
   M9. STOCKLINE (urgencia) + DELIVERY (entrega estimada)
   -------------------------------------------------------------------------- */
.rv-stockline{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:700;
  color:var(--rv-accent-ink)}
.rv-stockline::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--rv-accent);
  flex:0 0 auto;animation:rv-pulse 1.8s infinite}
.rv-delivery{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--rv-radius-sm);
  background:var(--rv-primary-tint);color:var(--rv-primary-ink);font-size:14px;font-weight:600}
.rv-delivery .rv-icon,.rv-delivery svg{color:var(--rv-primary);flex:0 0 auto}
.rv-delivery strong{font-weight:800}

/* --------------------------------------------------------------------------
   M10. WHY (porque comprar recondicionado: 3 colunas com numero/icone)
   -------------------------------------------------------------------------- */
.rv-why{display:grid;gap:16px;grid-template-columns:1fr;list-style:none;margin:0;padding:0}
.rv-why__item{background:var(--rv-surface);border:1px solid var(--rv-border);
  border-radius:var(--rv-radius);padding:24px 20px;box-shadow:var(--rv-shadow)}
.rv-why__icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:999px;background:var(--rv-primary-tint);color:var(--rv-primary);margin-bottom:14px}
.rv-why__icon .rv-icon,.rv-why__icon svg{color:var(--rv-primary)}
.rv-why__num{display:block;font-family:var(--rv-font-display);font-size:34px;font-weight:800;
  line-height:1;color:var(--rv-primary);margin-bottom:8px}
.rv-why__title{font-size:18px;margin:0 0 6px}
.rv-why__text{margin:0;color:var(--rv-muted);font-size:15px}
@media (min-width:560px){.rv-why{grid-template-columns:repeat(3,1fr)}}

/* --------------------------------------------------------------------------
   M11. REVIEWS (placeholder pronto para Trustpilot)
   -------------------------------------------------------------------------- */
.rv-reviews{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  padding:14px 16px;background:var(--rv-surface);border:1px solid var(--rv-border);
  border-radius:var(--rv-radius)}
.rv-reviews__stars{display:inline-flex;gap:2px;color:var(--rv-star);line-height:0}
.rv-reviews__stars .rv-icon,.rv-reviews__stars svg{color:var(--rv-star)}
.rv-reviews__text{color:var(--rv-muted);font-size:14px;font-weight:600;margin:0}

/* --------------------------------------------------------------------------
   M12. SEAL (selo circular Grade A / garantia)
   -------------------------------------------------------------------------- */
.rv-seal{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;width:112px;height:112px;padding:10px;border-radius:50%;
  background:var(--rv-primary-tint);border:2px dashed var(--rv-primary);color:var(--rv-primary-ink)}
.rv-seal strong{font-family:var(--rv-font-display);font-size:20px;font-weight:800;line-height:1;display:block}
.rv-seal span{margin-top:3px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}

/* --------------------------------------------------------------------------
   M13. Reforcos coerentes (spec-table zebra quente, accordion hover)
   -------------------------------------------------------------------------- */
.rv-spec-table{box-shadow:var(--rv-shadow)}
.rv-accordion__head:hover{background:var(--rv-bg-sand)}
.rv-accordion__head[aria-expanded="true"]{color:var(--rv-primary-ink)}

/* --------------------------------------------------------------------------
   M14. Movimento reduzido: anula reveals/pulso (a11y)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .rv-reveal,.rv-hero__eyebrow,.rv-hero__title,.rv-hero__value,.rv-hero__cta,
  .rv-hero__proof,.rv-hero__mini,.rv-hero__media{animation:none!important}
  .rv-stockline::before{animation:none!important}
  .rv-sticky-buy{transition:none!important}
}

/* ==========================================================================
   === FASE 4: POLISH DE ESPACAMENTO E RITMO (mobile-first) ===
   --------------------------------------------------------------------------
   So refina espacamento, ritmo vertical, respiro e alvos tacteis; nao
   redesenha nem altera identificadores. Anexado ao fim: vence por ordem com
   igual especificidade, sem !important. Nao abrange .rv-header/.rv-nav/
   .rv-mobile-nav/megamenu (tratados por outro agente). PT-EU, sem travessoes,
   zero overflow horizontal a 360px, contraste AA, alvos >= 48px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   P1. Ritmo vertical das seccoes: escala responsiva coerente
   Mobile mais compacto e desktop mais amplo, com transicao suave (menos
   "saltos"). Substitui os valores fixos (s12 / s8) por clamps na mesma escala.
   -------------------------------------------------------------------------- */
.rv-section{padding-top:clamp(36px,5.4vw,60px);padding-bottom:clamp(36px,5.4vw,60px)}
.rv-section--tight{padding-top:clamp(28px,4vw,44px);padding-bottom:clamp(28px,4vw,44px)}
.rv-section__head{margin-bottom:clamp(24px,3.4vw,36px)}
.rv-section__lead{margin-bottom:clamp(24px,3.4vw,36px)}

/* --------------------------------------------------------------------------
   P2. Faixa da trust bar da homepage: respiro proprio
   A trust bar vive num .rv-container solto (unico filho directo de .rv-home)
   entre o hero e as categorias; damos-lhe ritmo proprio para nao "flutuar".
   -------------------------------------------------------------------------- */
.rv-home>.rv-container{padding-top:clamp(18px,3vw,26px);padding-bottom:clamp(18px,3vw,26px)}

/* --------------------------------------------------------------------------
   P3. HERO: padding responsivo + cluster decorativo + CTAs em mobile
   -------------------------------------------------------------------------- */
/* Trimar o excesso vertical em mobile (o s16 fixo era demasiado apertado). */
.rv-hero{padding-top:clamp(28px,5vw,48px);padding-bottom:clamp(30px,5vw,52px)}

/* Selo/badges/icone decorativos centrados e sem apertar (o selo nunca tapa
   texto: fica na coluna decorativa, empilhado por baixo em mobile). */
.rv-hero__media{justify-content:center;text-align:center;gap:12px 10px}

/* CTAs do hero: em ecras estreitos empilham a toda a largura (alvos amplos,
   sem duas larguras diferentes lado a lado). */
@media (max-width:559px){
  .rv-hero__cta{gap:10px;margin:var(--rv-s6) 0 var(--rv-s2)}
  .rv-hero__cta .rv-btn{flex:1 1 100%}
}

/* --------------------------------------------------------------------------
   P4. Single (produto): topo com folga, prose legivel, selo do buybox
   -------------------------------------------------------------------------- */
/* Pequena folga do conteudo ao cabecalho fixo (o breadcrumb sozinho apertava). */
.rv-single{padding-top:var(--rv-s4)}

/* Descricao do produto: largura de leitura confortavel e ritmo de paragrafos. */
.rv-prose{max-width:72ch}
.rv-prose>*+*{margin-top:var(--rv-s4)}
.rv-prose h2,.rv-prose h3{margin-top:var(--rv-s6)}
.rv-prose ul,.rv-prose ol{padding-left:1.25em}
.rv-prose li+li{margin-top:6px}

/* Selo circular do buybox: centrado como fecho de confianca da coluna. */
.rv-buybox>.rv-seal{align-self:center}

/* --------------------------------------------------------------------------
   P5. Rodape: margem superior responsiva (menos vazio em mobile)
   -------------------------------------------------------------------------- */
.rv-footer{margin-top:clamp(44px,7vw,64px)}


/* ============ POLISH v0.5.0 (workflow): geral ============ */
/* ==========================================================================
   Renova - Polish geral conservador (P_GENERAL)
   --------------------------------------------------------------------------
   Anexado ao FIM de main.css. Carrega em TODO o site e ANTES de nav.css e de
   woocommerce.css, por isso todos os seletores sao ESPECIFICOS (classes .rv-*
   ou #main) e nunca colidem com regras dessas folhas. So ACRESCENTA: nao
   reescreve nenhuma regra anterior. NAO toca em carrinho, checkout, header nem
   navegacao (tratados por outros agentes).

   Mobile-first, tokens do :root, contraste AA, alvos tacteis >= 48px, zero
   overflow horizontal a 360px. PT-EU pre-Acordo. Sem travessoes (so hifen).

   Melhorias aplicadas:
     1. Foco de teclado deixa de ser cortado pelo overflow:hidden dos
        contentores (cabecalho do accordion e media do cartao de produto):
        o anel de foco passa a ser recuado (inset) e fica sempre visivel.
     2. Paridade foco/hover: o cartao de produto (focus-within) e o cartao de
        categoria (focus-visible) ganham a mesma elevacao/realce do hover, para
        quem navega por teclado ter o mesmo sinal visual que quem usa rato.
     3. Ancoras internas deixam de ficar tapadas pelo cabecalho fixo: os alvos
        de #main e das seccoes ganham scroll-margin-top (afeta so o salto).
     4. Icones dentro dos botoes .rv-btn nunca encolhem quando o rotulo quebra.
     5. CTA secundario do hero (botao fantasma) passa a ler-se sobre o fundo
        menta, com fundo de superficie e sombra subtil.
     6. Alvo tactil dos links do rodape ampliado em mobile (mais area de toque).
     7. Seleccao de texto com a cor da marca (menta), apenas no conteudo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Foco recuado onde o contentor tem overflow:hidden
   O .rv-accordion e o .rv-card cortam com overflow:hidden; o anel de foco dos
   filhos (cabecalho do accordion, ligacao da media do cartao) ficava cortado.
   Recuando o offset (inset), o anel fica dentro da area visivel. A cor/espessura
   do anel continuam a vir da regra global :where(...):focus-visible.
   -------------------------------------------------------------------------- */
.rv-accordion__head:focus-visible,
.rv-card__media:focus-visible{
  outline-offset:-3px;
}

/* --------------------------------------------------------------------------
   2. Paridade foco/hover (teclado ve o mesmo realce que o rato)
   Sem transform no foco: evita salto de layout e respeita quem prefere menos
   movimento. So a elevacao/realce, herdando a transicao ja definida no cartao.
   -------------------------------------------------------------------------- */
.rv-card:focus-within{
  box-shadow:var(--rv-shadow-lg);
}
.rv-catcard:focus-visible{
  border-color:var(--rv-primary);
  box-shadow:var(--rv-shadow);
}

/* --------------------------------------------------------------------------
   3. Ancoras internas nao tapadas pelo cabecalho fixo (.rv-header e sticky)
   Todas as paginas usam <main id="main">, por isso #main cobre o site inteiro
   (home, loja, produto, paginas, arquivo, 404). scroll-margin-top so influencia
   o ponto de paragem do salto para uma ancora, sem qualquer efeito visual.
   Cabecalho ~64px (mobile) e ~72px (>=768px); folga de respiro incluida.
   -------------------------------------------------------------------------- */
#main,
#main [id]{
  scroll-margin-top:80px;
}
@media (min-width:768px){
  #main,
  #main [id]{
    scroll-margin-top:88px;
  }
}

/* --------------------------------------------------------------------------
   4. Icone dos botoes .rv-btn nao encolhe se o texto quebrar
   Relevante em botoes icone + texto que podem ir a toda a largura em mobile
   (ex.: alternar filtros, pesquisar).
   -------------------------------------------------------------------------- */
.rv-btn svg{
  flex:0 0 auto;
}

/* --------------------------------------------------------------------------
   5. CTA secundario do hero legivel sobre o fundo menta
   O botao fantasma transparente diluia-se no gradiente do hero. Damos-lhe fundo
   de superficie e sombra subtil para se ler como botao, mantendo a hierarquia
   abaixo do CTA primario. Escopo restrito a .rv-hero (nao afeta outros ghosts).
   -------------------------------------------------------------------------- */
.rv-hero .rv-btn--ghost{
  background:var(--rv-surface);
  box-shadow:var(--rv-shadow);
}
.rv-hero .rv-btn--ghost:hover{
  background:var(--rv-bg-sand);
  border-color:var(--rv-muted);
}

/* --------------------------------------------------------------------------
   6. Alvo tactil dos links do rodape (mobile)
   Aumenta a area de toque vertical sem alterar a densidade visual do rodape.
   -------------------------------------------------------------------------- */
.rv-footer-col ul a{
  display:inline-block;
  padding:3px 0;
}

/* --------------------------------------------------------------------------
   7. Seleccao de texto com a cor da marca (so no conteudo e no rodape)
   Menta clara com verde profundo: legivel tanto sobre fundos claros como sobre
   o rodape escuro.
   -------------------------------------------------------------------------- */
#main ::selection,
.rv-footer ::selection{
  background:var(--rv-primary-tint);
  color:var(--rv-primary-ink);
}


/* ============ v0.5.1: top bar promocional (site-wide) ============ */
.rv-topbar{
  background:var(--rv-primary);
  color:#fff;
  font-family:var(--rv-font);
  font-size:.82rem;
  line-height:1.3;
}
.rv-topbar__inner{
  max-width:var(--rv-maxw);
  margin:0 auto;
  padding:8px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  text-align:center;
}
.rv-topbar__item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-weight:600}
.rv-topbar__ico{font-size:.95em}
.rv-topbar__sep{opacity:.55}
@media (max-width:600px){
  .rv-topbar{font-size:.74rem}
  .rv-topbar__inner{gap:8px;padding:7px 12px}
}
@media (max-width:480px){
  .rv-topbar__item:last-child,
  .rv-topbar__sep:last-of-type{display:none}
}


/* ===== v0.5.2 QA: varredura responsiva ===== */
/* ==========================================================================
   Renova - Varredura responsiva e de qualidade (P3 sweep) - _p3_sweep.css
   --------------------------------------------------------------------------
   Marca "Portateis Recondicionados". Anexado ao FIM da CSS global (carrega
   depois de main.css, nav.css e woocommerce.css), por isso todos os selectores
   sao ESPECIFICOS (classes .rv-*, .woocommerce ..., #rv-shop-results) e vencem
   por ordem de origem, sem !important e sem redesenhar nada.

   So tokens do :root (main.css). Mobile-first. Contraste AA. Alvos tacteis
   >= 48px. Zero overflow horizontal a 360/390px. PT-EU pre-Acordo. Sem
   travessoes (so hifen). Nao toca em carrinho/checkout/thank-you nem nos
   filtros (tratados por outros agentes).

   Problemas REAIS corrigidos:
     1. Cabecalho (mobile <=559px): a marca "Portateis Recondicionados" a 22px
        colidia com os 4 icones de accao (pesquisa/desejos/carrinho/menu) e
        transbordava a 360/390px. Passa a escalar e a empilhar em duas linhas
        (lockup limpo), sem cortar o icone do menu.
     2. Top bar promocional (<=480px): a regra existente ocultava o 3.o item mas
        deixava um separador "." pendurado no fim (o :last-of-type nao apanhava
        o separador). Ocultamos tambem esse separador pendente.
     3. Arquivo da loja (tablet 768-991px): com a barra lateral de filtros a
        ocupar ~260px, a grelha auto-fill(minmax(240px)) so cabia 1 coluna e os
        cartoes ficavam esticados a toda a largura. Fixamos 2 colunas firmes
        nessa banda; acima disso volta ao fluxo natural (2-3-4 colunas).
     4. Botoes fantasma em seccoes tintadas (areia/menta): a borda clara ficava
        quase invisivel sobre o fundo areia (ex.: CTA "Ver todos os equipamentos"
        nos Destaques). Ganham fundo de superficie + sombra subtil, como ja
        acontece no hero.
     5. Cartao de produto: a ligacao "Ver carrinho" que o WooCommerce injecta
        depois de adicionar ficava como texto solto e desalinhado dentro do
        cartao. Passa a ligacao centrada e discreta, coerente com o ritmo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Cabecalho: marca responsiva em telemoveis (evita overflow com 4 icones)
   Escopo restrito a marca DENTRO da barra do cabecalho (.rv-header-inner):
   nao afeta a marca do painel mobile nem a do rodape. So <=559px, onde os 4
   icones de accao (pesquisa + desejos + carrinho + menu) apertam o espaco.
   -------------------------------------------------------------------------- */
@media (max-width:559px){
  .rv-header-inner .rv-brand{
    /* Permite encolher e quebrar quando o espaco e' curto (margin-right:auto
       da regra base continua a empurrar os icones para a direita). */
    flex:0 1 auto;
    min-width:0;
    white-space:normal;
    overflow-wrap:break-word;
    line-height:1.15;
    /* Escala com o ecra; nunca ultrapassa os 22px do desenho original. */
    font-size:clamp(15px,4.4vw,22px);
  }
}

/* --------------------------------------------------------------------------
   2. Top bar: remover separador pendente quando o 3.o item e' ocultado
   A folha base ja faz `.rv-topbar__item:last-child{display:none}` a <=480px,
   mas o separador anterior (penultimo filho) fica visivel e pendurado. Como
   todos os filhos sao <span>, o :last-of-type nao o apanha; alvo por posicao.
   -------------------------------------------------------------------------- */
@media (max-width:480px){
  .rv-topbar__inner .rv-topbar__sep:nth-last-child(2){
    display:none;
  }
}

/* --------------------------------------------------------------------------
   3. Arquivo da loja: 2 colunas firmes na banda tablet (768-991px)
   Nessa banda a barra lateral de filtros consome ~220-260px e a grelha
   auto-fill(minmax(240px)) so conseguia 1 coluna, esticando os cartoes. Acima
   de 992px volta ao fluxo natural definido em woocommerce.css. Alvos: a grelha
   nativa do WooCommerce (#rv-shop-results ul.products, tambem devolvida via
   AJAX) e a variante do tema (.rv-products), sempre dentro de .rv-shop__main.
   -------------------------------------------------------------------------- */
@media (min-width:768px) and (max-width:991.98px){
  .rv-shop__main #rv-shop-results ul.products,
  .rv-shop__main ul.products,
  .rv-shop__main .rv-products{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* --------------------------------------------------------------------------
   4. Botoes fantasma legiveis em seccoes tintadas (areia / menta)
   A borda var(--rv-border) quase nao contrasta com o fundo areia, deixando o
   botao sem contorno visivel. Damos-lhe fundo de superficie + sombra subtil,
   como no hero, para se ler como botao. Escopo restrito as seccoes tintadas.
   -------------------------------------------------------------------------- */
.rv-section--sand .rv-btn--ghost,
.rv-section--mint .rv-btn--ghost{
  background:var(--rv-surface);
  box-shadow:var(--rv-shadow);
}
.rv-section--sand .rv-btn--ghost:hover,
.rv-section--mint .rv-btn--ghost:hover{
  background:var(--rv-bg-sand);
  border-color:var(--rv-muted);
}

/* --------------------------------------------------------------------------
   5. Cartao de produto: estado pos-adicao ("Ver carrinho")
   O WooCommerce injecta <a class="added_to_cart wc-forward"> a seguir ao CTA;
   sem estilo ficava como texto solto. Passa a ligacao centrada e discreta,
   com alvo tactil confortavel, sem competir com o CTA primario.
   -------------------------------------------------------------------------- */
.rv-card__body .added_to_cart{
  display:block;
  margin-top:2px;
  padding:6px 4px;
  text-align:center;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  color:var(--rv-primary-ink);
}
.rv-card__body .added_to_cart:hover{
  color:var(--rv-primary);
  text-decoration:underline;
}


/* ===== v0.6.0: selo de condicao real (Novo vs Grade A) ===== */
.rv-badge--novo{background:#1D4ED8;color:#fff}

/* ==========================================================================
   HOMEPAGE: acertos de UI  (v0.9.6)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. "Porque comprar recondicionado": titulos alinhados entre os tres cartoes
   --------------------------------------------------------------------------
   O primeiro cartao abre com um numero grande (.rv-why__num, 34px + 8px de
   margem = 42px) e os outros dois com um circulo de icone (.rv-why__icon,
   48px + 14px = 62px). Os 20px de diferenca faziam com que os tres titulos
   ficassem a alturas diferentes, e a fila lia-se como desalinhada.

   Solucao: os dois elementos partilham a mesma caixa de 62px, alinhada em
   baixo. O numero mantem o seu tamanho e peso; so passa a assentar na mesma
   linha de base do icone.
   -------------------------------------------------------------------------- */
.rv-why__num,
.rv-why__icon{
  min-height:48px;
  margin-bottom:14px;
}
.rv-why__num{
  display:flex;
  align-items:flex-end;
}

/* --------------------------------------------------------------------------
   2. Cartoes de categoria: o icone deixa de competir com o titulo
   --------------------------------------------------------------------------
   Com icones que agora significam mesmo alguma coisa (portatil, torre,
   ficha), vale a pena dar-lhes um pouco mais de presenca e aproximar o titulo,
   para o cartao se ler como uma unidade e nao como tres coisas soltas.
   -------------------------------------------------------------------------- */
.rv-catcard .rv-catcard__icon .rv-icon{
  width:30px;
  height:30px;
}

/* --------------------------------------------------------------------------
   3. Hero em telemovel: menos altura antes do primeiro produto
   --------------------------------------------------------------------------
   Medido em producao a 390x844: o primeiro produto com preco so aparecia aos
   1705px, ou seja duas alturas de ecra depois do topo. Numa loja isso e' caro.

   Os dois botoes ocupavam uma linha inteira cada um, empilhados, com textos
   curtos ("Ver portateis", "Ver destaques") que cabem lado a lado sem
   apertar. Passam a partilhar a linha, o que devolve cerca de 70px, e o
   restante vem de espacamentos mais contidos. O alvo tactil mantem-se acima
   dos 48px recomendados.
   -------------------------------------------------------------------------- */
@media (max-width:559px){
  .rv-hero__cta{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:10px;
  }
  .rv-hero__cta .rv-btn{
    flex:1 1 0;
    min-width:0;
    padding-left:12px;
    padding-right:12px;
    white-space:nowrap;
    justify-content:center;
  }
  /* Espacamentos do hero mais contidos, sem apertar a leitura. */
  .rv-hero__value{margin-bottom:18px}
  .rv-hero__mini{gap:6px 14px;margin-top:16px}
  .rv-hero__proof{margin-top:14px}
}
/* --------------------------------------------------------------------------
   4. Cartoes de categoria em telemovel: fila horizontal em vez de grelha 2x2
   --------------------------------------------------------------------------
   Medido a 390px: a grelha de duas colunas com TRES categorias deixava os
   "Acessorios" sozinhos numa segunda linha, com metade da linha vazia. E' o
   mesmo defeito que a fila orfa dos Destaques, e le-se da mesma maneira: como
   se faltasse alguma coisa.

   Alem disso a seccao custava 606px de altura antes de o visitante chegar ao
   primeiro produto com preco, o que numa loja e' caro.

   Passam a ser cartoes horizontais de uma coluna: icone a esquerda, nome e
   descricao ao centro, contagem a direita. Nao ha orfaos possiveis com uma
   coluna, a leitura fica em linha (mais natural numa lista) e a seccao encolhe
   para menos de metade. Nada e' escondido: continuam todos visiveis, sem
   scroll horizontal nem carrossel.
   -------------------------------------------------------------------------- */
@media (max-width:559px){
  .rv-catgrid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .rv-catcard{
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "icone titulo contagem"
      "icone desc   contagem";
    align-items:center;
    column-gap:14px;
    row-gap:2px;
    text-align:left;
    padding:14px 16px;
  }
  .rv-catcard .rv-catcard__icon{
    grid-area:icone;
    width:46px;
    height:46px;
    margin:0;
  }
  .rv-catcard .rv-catcard__icon .rv-icon{width:24px;height:24px}
  .rv-catcard .rv-catcard__title{grid-area:titulo;align-self:end}
  .rv-catcard .rv-catcard__desc{grid-area:desc;align-self:start;font-size:13px}
  .rv-catcard .rv-catcard__count{
    grid-area:contagem;
    white-space:nowrap;
    font-size:13px;
    font-weight:700;
  }
}