/* ==========================================================================
   GYÖ Motion — base styles: design tokens, reset, header/nav, footer, and
   the shared product-card/quick-add pattern (reused on Home, Loja and the
   PDP's "Combine com" carousel). Page-specific sections live in home.css,
   shop.css, product.css and are only enqueued on the templates that use them.
   ========================================================================== */

/* Titling face — a single weight by design (classic display/titling faces
   like this one are meant to be set at one size/weight, not faux-bolded),
   used only for headings/titles via --font-display. Body copy stays on
   --font-sans. */
@font-face{
  font-family:'Caslon Titling MT'; font-style:normal; font-weight:400; font-display:swap;
  src: url('../fonts/caslon-titling-mt.woff2') format('woff2'),
       url('../fonts/caslon-titling-mt.woff') format('woff');
}

:root{
  --bg: #EDE3D6;
  --bg-deep: #E1D3C0;
  --surface: #F5EEE4;
  --ink: #17140F;
  --ink-soft: #4A4238;
  --ink-mute: #8C8271;
  --line: rgba(23,20,15,0.14);
  --line-strong: rgba(23,20,15,0.30);
  --focus: #17140F;

  --font-sans: Bahnschrift, 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Caslon Titling MT', Georgia, 'Times New Roman', serif;

  --fs-hero: clamp(3rem, 8vw, 6.4rem);
  --fs-h2: clamp(1.3rem, 2.4vw, 1.8rem);
  --fs-label: 0.72rem;

  --edge: clamp(1.25rem, 5vw, 4rem);
  color-scheme: light;
}

/* GYÖ is a deliberate single-theme brand canvas (cream + brown), like a
   printed lookbook — it does not follow the visitor's OS light/dark
   preference on purpose, the same way a real fashion site's colors don't
   invert at night. */

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color: inherit; }
h1,h2,h3,p{ margin:0; }
h1,h2,h3{ text-wrap: balance; }
h1,h2{ font-family: var(--font-display); text-transform: uppercase; font-weight:400; letter-spacing: 0.04em; }
button,input{ font-family: inherit; font-size: inherit; color: inherit; }
:focus-visible{ outline: 2px solid var(--focus); outline-offset: 3px; }

/* visually hidden but still readable by screen readers / crawlers —
   standard WordPress pattern, used where a heading's needed for structure
   but not for a visual title on the page (e.g. the Loja page). */
.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;
}

.eyebrow{
  font-size: var(--fs-label); font-weight:400; font-variation-settings:'wght' 400;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute);
}
/* "Ver tudo" section links used to just reuse .eyebrow — same muted color
   as a small metadata tag like "YOGA" above a title, which is right for a
   label but way too low-contrast for a CTA someone's supposed to click. */
.section-view-all{
  display:inline-flex; align-items:center; gap:0.4rem; font-size:0.76rem; font-weight:600;
  font-variation-settings:'wght' 600; letter-spacing:0.06em; text-transform:uppercase;
  color: var(--ink); text-decoration:none; padding-bottom:0.2rem; border-bottom:1px solid var(--line-strong);
  transition: border-color .2s ease;
}
.section-view-all:hover{ border-color: var(--ink); }
.section-view-all .arrow{ transition: transform .25s ease; }
.section-view-all:hover .arrow{ transform: translateX(3px); }

section{ padding: clamp(2.4rem, 6vw, 4rem) var(--edge); max-width: 1440px; margin-left:auto; margin-right:auto; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem;
  margin-bottom: 2.6rem; flex-wrap:wrap; border-bottom: 1px solid var(--line); padding-bottom: 1.3rem;
}
.section-head h2{ font-size: var(--fs-h2); font-weight:400; letter-spacing:0.03em; }

/* ---------- announcement ticker (fixed dark, never inverts with theme) ---------- */
.notice{
  width: 100%; background: #17140F; color: #F3EBDF;
  overflow: hidden; white-space: nowrap; position: relative;
  padding: 0.6rem 0;
}
.notice-track{
  display:inline-flex;
  font-size: 0.68rem; font-weight:400; font-variation-settings:'wght' 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-family: var(--font-sans);
  /* 112s = the original 14s × 8 repeats-per-half, so the on-screen scroll
     SPEED (px/s) matches what it was before — only the loop's full-cycle
     length changed (there's 8x more content per half now), not how fast the
     text visibly moves. */
  animation: ticker 112s linear infinite;
}
/* Spacing lives inside each span (not as a flex `gap`) so the two HALVES are
   truly identical-width tiles — translateX(-50%) then lands exactly where
   the first half started, with no seam/gap flash when the loop restarts.
   Each half repeats the text several times over (see header.php) so a half
   is always wider than the visible bar regardless of screen size — without
   that, a short notice string wouldn't fill wide screens and the "loop"
   would show blank space before jumping back. */
.notice-half{ display:inline-flex; flex-shrink:0; }
.notice-track span span{ display:inline-flex; padding-right: 2.5rem; }
@keyframes ticker{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (max-width: 640px){
  /* Went to 0.48rem/0.05em in a first pass — technically smaller, but
     squeezing the letter-spacing that far collapsed the tracked-out look
     that makes this read as branded type instead of a cramped default
     font. Smaller size, same generous tracking as desktop. */
  .notice{ padding: 0.42rem 0; }
  .notice-track{ font-size: 0.58rem; letter-spacing: 0.1em; font-weight:600; font-variation-settings:'wght' 600; }
  .notice-track span span{ padding-right: 1.4rem; }
}
/* Ticker marquees always scroll regardless of prefers-reduced-motion — it's
   mild, brand-carrying motion (not a zoom/parallax effect), and disabling it
   silently was causing more confusion ("is JS broken?") than it was helping. */

/* ---------- header ----------
   Scoped to `body > header` (matching header.php's actual markup: <header>
   sits directly under <body>, right after the notice bar), not a bare
   `header` — plenty of other templates use a semantic <header> tag for
   something totally unrelated (WooCommerce's own .woocommerce-Address-title
   is a real <header>, for one), and a bare element selector was applying
   the site header's own grid/background/padding to every one of those. */
body > header{
  position: relative; z-index: 30; background: var(--bg);
  border-bottom: 1px solid var(--line);
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  padding: 0.3rem var(--edge); gap: 1rem;
}
.wordmark-sm{ display:flex; align-items:center; text-decoration:none; color: var(--ink); }
/* Selector needs 2 classes' worth of specificity to beat WooCommerce's own
   `.woocommerce img{ height:auto }` (fires on Shop/Product/Cart/Account
   pages) — a single-class rule would lose that fight silently there. */
.wordmark-sm .logo-img{ height: 6.6rem; width:auto; display:block; }
.primary{
  display:flex; gap: 0.15rem; list-style:none; margin:0; padding: 0.3rem; justify-content:center;
  background: var(--ink); border-radius: 999px;
  box-shadow: 0 6px 16px rgba(23,20,15,0.18);
}
.primary a{
  font-size: 0.72rem; font-weight:600; font-variation-settings:'wght' 600;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration:none;
  padding: 0.6rem 1.15rem; border-radius: 999px; color: rgba(243,235,223,0.68);
  transition: background-color .25s ease, color .25s ease;
}
.primary a:hover{ color: #F3EBDF; background-color: var(--ink-soft); }
.primary a.current, .primary li.current-menu-item > a{ background-color: #F3EBDF; color: var(--ink); }
.primary a.current:hover, .primary li.current-menu-item > a:hover{ background-color: #F3EBDF; color: var(--ink); }
.icon-row{ display:flex; gap:0.4rem; align-items:center; justify-content:flex-end; }
.icon-row a, .icon-row button{
  background:none; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  width: 2.1rem; height: 2.1rem; border-radius:50%; color: var(--ink); text-decoration:none;
  transition: background-color .2s ease; position:relative;
}
.icon-row a:hover, .icon-row button:hover{ background-color: var(--surface); }
.icon-row .hamburger{ display:none; }
.cart-count{
  position:absolute; top:-2px; right:-2px; min-width:1.05rem; height:1.05rem; padding:0 0.2rem;
  border-radius:999px; background:var(--ink); color:#F3EBDF; font-size:0.6rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.cart-count[data-count="0"]{ display:none; }
.hamburger{ display:none; background:none; border:none; cursor:pointer; width:2.1rem; height:2.1rem; align-items:center; justify-content:center; color:var(--ink); }
.mobile-nav{
  display:none; position:absolute; left:0; right:0; top:100%; z-index:29;
  background: var(--ink); flex-direction:column; padding: 0.6rem var(--edge) 1.4rem;
  box-shadow: 0 24px 48px -16px rgba(23,20,15,0.35);
}
.mobile-nav.open{ display:flex; }
.mobile-nav a{
  color: rgba(243,235,223,0.78); text-decoration:none; padding: 1.15rem 0.1rem;
  font-size: 0.98rem; letter-spacing:0.03em; text-transform:uppercase; font-weight:600;
  border-bottom: 1px solid rgba(243,235,223,0.14);
  display:flex; align-items:center; justify-content:space-between;
  transition: color .2s ease, padding-left .2s ease;
}
.mobile-nav a::after{ content:'→'; font-size:0.85rem; opacity:0.5; transition: transform .2s ease, opacity .2s ease; }
.mobile-nav a:active{ color:#F3EBDF; padding-left:0.4rem; }
.mobile-nav a:active::after{ opacity:0.9; transform:translateX(3px); }
.mobile-nav a:last-child{ border-bottom:none; }
.mobile-nav a.current, .mobile-nav li.current-menu-item > a{ color:#F3EBDF; }
.mobile-nav a.current::after, .mobile-nav li.current-menu-item > a::after{ opacity:0.85; }
.mobile-nav ul{ list-style:none; margin:0; padding:0; }
@media (max-width: 780px){
  .primary{ display:none; } body > header{ grid-template-columns: 1fr 1fr; }
  .icon-row .hamburger{ display:flex; }
}

/* ---------- search panel (dropdown, same slot as mobile-nav) ---------- */
.search-panel{
  display:none; flex-direction:column; position:absolute; left:0; right:0; top:100%; z-index:29;
  background: var(--bg); padding: 1.4rem var(--edge) 1.6rem; border-radius: 0 0 20px 20px;
  box-shadow: 0 24px 48px -16px rgba(23,20,15,0.28);
}
.search-panel.open{ display:flex; }
.search-panel-row{
  display:flex; align-items:center; gap:0.6rem; max-width:640px; margin:0 auto; width:100%;
  background: var(--surface); border:1px solid var(--line); border-radius:999px; padding:0.15rem 0.3rem 0.15rem 1.1rem;
}
/* Was --font-display (the titling headline font) at 1.4rem — the right font
   for a product name, way too loud for something you type into; a normal
   body-weight input at a sane size reads as a search field, not a banner. */
.search-panel input{
  flex:1; min-width:0; background:none; border:none;
  padding:0.7rem 0.1rem; font-family:var(--font-sans); font-size:0.95rem; letter-spacing:0.01em; color:var(--ink);
}
.search-panel input:focus{ outline:none; }
.search-panel input::placeholder{ color: var(--ink-mute); }
.search-panel button{
  background:var(--ink); color:var(--bg); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  width:2.4rem; height:2.4rem; border-radius:50%; flex-shrink:0; transition: background-color .15s ease;
}
.search-panel button:hover{ background:var(--ink-soft); }
.search-toggle{ cursor:pointer; }

/* Scoped to #searchResults, not the bare .search-results class: WordPress
   itself stamps "search-results" as a BODY class on every search template
   (body_class()'s own convention) — the un-scoped selector was matching
   <body class="search search-results ...">  too and capping the ENTIRE PAGE
   to 640px wide, not just this dropdown list. */
.search-panel #searchResults{
  max-height: 60vh; overflow-y:auto; max-width:640px; margin: 1.1rem auto 0; padding: 0.1rem;
  display:flex; flex-direction:column; gap:0.5rem;
}
/* Each row is its own light card now (not just on :hover) — before, a
   result was visually indistinguishable from the panel's own empty
   background until the cursor happened to land on it. */
.search-result-item{
  display:flex; align-items:center; gap:1rem; padding:0.7rem 0.8rem; text-decoration:none; color:var(--ink);
  border-radius: 12px; background: var(--surface); transition: background-color .15s ease, box-shadow .15s ease;
}
.search-result-item:hover{ background:#fff; box-shadow: 0 6px 18px -10px rgba(23,20,15,0.3); }
.search-result-item img{ width:3.6rem; height:4.4rem; object-fit:cover; border-radius:8px; flex-shrink:0; }
.search-result-info{ display:flex; flex-direction:column; gap:0.2rem; }
.search-result-name{ font-family:var(--font-display); font-size:0.86rem; font-weight:400; letter-spacing:0.02em; text-transform:uppercase; }
.search-result-price{ font-size:0.8rem; color:var(--ink-mute); }
.search-no-results{ padding:0.6rem 0.2rem; color:var(--ink-mute); font-size:0.85rem; }

.search-results-title{ display:flex; align-items:center; gap:0.7rem; }
.search-results-title svg{ flex-shrink:0; color:var(--ink-mute); }
.search-results-title em{ font-style:normal; text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:0.2em; }

/* ---------- rastrear pedido (order tracking) ---------- */
.track-order-form{
  max-width: 480px; display:flex; flex-direction:column; gap:1.2rem;
  background: var(--surface); border-radius:20px; padding: 2rem 2.2rem;
}
.track-order-row{ display:flex; flex-direction:column; gap:0.4rem; }
.track-order-row label{ font-size: var(--fs-label); letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-mute); }
.track-order-row input{
  border: 1px solid var(--line-strong); border-radius:10px; background:var(--bg);
  padding: 0.8rem 1rem; font-size:0.95rem; color:var(--ink);
}
.track-order-row input:focus{ outline:none; border-color:var(--ink); }
.track-order-error{ color:#B3261E; font-size:0.85rem; }
.track-order-hint{ font-size:0.82rem; color:var(--ink-mute); }
.track-order-hint a{ color:var(--ink); text-decoration:underline; }
.track-order-form .btn{ align-self:flex-start; }

.track-order-result{
  max-width: 640px; display:flex; flex-direction:column; gap:1.8rem;
  background: var(--surface); border-radius:20px; padding: 2rem 2.2rem;
}
.track-order-summary{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.track-order-date{ font-size:0.85rem; color:var(--ink-mute); margin-top:0.3rem; }
.track-order-status-pill{
  font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; font-weight:600;
  padding:0.5rem 1rem; border-radius:999px; background:var(--ink); color:#F3EBDF; white-space:nowrap;
}
.track-order-status-pill.status-cancelled,
.track-order-status-pill.status-failed{ background:#B3261E; }
.track-order-status-pill.status-on-hold,
.track-order-status-pill.status-pending{ background:var(--ink-mute); }

.track-order-timeline{ display:flex; list-style:none; margin:0; padding:0; }
.track-order-timeline li{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:0.6rem; text-align:center;
  font-size:0.76rem; color:var(--ink-mute); position:relative;
}
.track-order-timeline li:not(:last-child)::after{
  content:''; position:absolute; top:0.4rem; left:50%; width:100%; height:2px; background:var(--line-strong); z-index:0;
}
.track-order-timeline li.is-done:not(:last-child)::after{ background:var(--ink); }
.track-order-dot{ width:0.9rem; height:0.9rem; border-radius:50%; background:var(--line-strong); border:2px solid var(--surface); position:relative; z-index:1; }
.track-order-timeline li.is-done .track-order-dot{ background:var(--ink); }
.track-order-timeline li.is-done{ color:var(--ink); font-weight:600; }
.track-order-deadend{ color:var(--ink-mute); font-size:0.9rem; }

.track-order-items{ display:flex; flex-direction:column; gap:0.9rem; border-top:1px solid var(--line); padding-top:1.4rem; }
.track-order-item{ display:flex; align-items:center; gap:1rem; }
.track-order-item-thumb{ width:3.2rem; height:4rem; border-radius:8px; overflow:hidden; flex-shrink:0; }
.track-order-item-thumb img{ width:100%; height:100%; object-fit:cover; }
.track-order-item-meta{ flex:1; display:flex; flex-direction:column; gap:0.2rem; }
.track-order-item-name{ font-size:0.9rem; }
.track-order-item-qty{ font-size:0.8rem; color:var(--ink-mute); }
.track-order-item-price{ font-size:0.88rem; }

.track-order-address{ border-top:1px solid var(--line); padding-top:1.4rem; }
.track-order-address h3{ font-size: var(--fs-label); letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:0.5rem; }
.track-order-address p{ font-size:0.9rem; line-height:1.6; }

@media (max-width: 600px){
  .track-order-form, .track-order-result{ padding: 1.5rem 1.4rem; max-width:none; }
  .track-order-timeline li{ font-size:0.66rem; }
}

/* ---------- trust strip ---------- */
.benefits{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap: clamp(1.2rem, 3vw, 2.6rem); padding: 0.9rem var(--edge);
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.benefit{
  display:flex; align-items:center; gap: 0.5rem;
  font-size: 0.74rem; font-weight:400; font-variation-settings:'wght' 400;
  letter-spacing: 0.03em; color: var(--ink-soft);
}
.benefit svg{ flex-shrink:0; color: var(--ink-mute); }
/* On mobile, flex-wrap with centered justify breaks 4 items into an
   uneven 1 / 2 / 1 stack (whichever items happen to fit per line) — reads
   as broken/misaligned rather than a deliberate layout. A fixed 2x2 grid
   is always symmetrical regardless of how long each label is. */
@media (max-width: 640px){
  /* Stays 2x2 (not 1 column) — just tight enough per-cell that "Frete
     grátis acima de R$ 399", the longest label, fits one line instead of
     wrapping: smaller icon, tighter icon-to-text gap, smaller font. */
  .benefits{ display:grid; grid-template-columns: repeat(2, 1fr); gap:0.8rem 0.5rem; padding: 1rem var(--edge); }
  .benefit{ font-size:0.6rem; gap:0.3rem; white-space:nowrap; letter-spacing:0.01em; }
  .benefit svg{ width:13px; height:13px; }
}

/* ---------- art frame (real photo, toned to sit in the monochrome system) ---------- */
.art{ position:relative; overflow:hidden; background:#14110D; }
.art .photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: grayscale(0.28) contrast(1.06) saturate(0.85) brightness(0.97);
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.art-tag{
  position:absolute; left:0; bottom:0; z-index:2; font-size: 0.62rem; font-weight:400; font-variation-settings:'wght' 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(237,227,214,0.65);
  padding: 0.6rem 0.75rem;
}

/* ---------- carousels (Home Mais Vendidos/Lançamentos + PDP Combine com) ---------- */
.carousel-row{ position:relative; }
.simple-grid{ display:flex; gap:1.1rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom: 0.2rem; }
.simple-grid::-webkit-scrollbar{ display:none; }
.simple-grid > *{ flex: 0 0 clamp(220px, 22vw, 280px); scroll-snap-align:start; }
.simple-grid .card-media{ aspect-ratio: 4/5; }
/* Mobile: the clamp() above floors at 220px regardless of viewport, so on a
   ~390px phone a single card already eats most of the screen and the next
   one barely peeks in — same oversized-carousel-card complaint as the
   Destaques grid had before it got the smaller/denser treatment. Keep the
   horizontal scroll (that part works fine), just shrink the cards to match. */
@media (max-width: 700px){
  .simple-grid{ gap:0.6rem; }
  .simple-grid > *{ flex-basis: 42vw; max-width:170px; }
  .simple-grid .card-media{ aspect-ratio: 3/4; }
}
.car-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:2.6rem; height:2.6rem; border-radius:50%; background:var(--bg); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink);
  transition: background-color .2s ease;
}
.car-nav:hover{ background: var(--surface); }
.car-nav.prev{ left:-1.3rem; }
.car-nav.next{ right:-1.3rem; }
/* Below 700px the arrows come back inset (not overflowing past the edge,
   which got clipped/looked cramped) with a shadow so they read against a
   photo card behind them — touch-swipe alone wasn't discoverable enough as
   the only way to move the carousel. */
@media (max-width: 1100px) and (min-width: 701px){ .car-nav{ display:none; } }
@media (max-width: 700px){
  /* top:50% (the desktop value) centers on the WHOLE card — photo + price
     text below it — which on these shorter mobile cards lands the arrow
     down over the price line instead of the photo, reading as some random
     floating dot rather than an obvious "tap to see more" control. Solid
     ink fill (instead of the subtle outlined cream circle) so it reads
     unmistakably as a button, not swipe-only with no visible affordance. */
  .car-nav{
    top:26%; width:2.1rem; height:2.1rem; background:var(--ink); color:#F3EBDF;
    border:none; box-shadow:0 3px 12px rgba(23,20,15,0.35);
  }
  .car-nav:hover{ background:#2A241B; }
  .car-nav.prev{ left:0.3rem; }
  .car-nav.next{ right:0.3rem; }
}
.carousel-empty{ color: var(--ink-mute); font-size:0.9rem; }

/* ---------- campaign banner (Home mid-page + Loja, shared) ---------- */
.banner{ position:relative; height: clamp(280px, 42vw, 420px); text-align:center; }
.banner .art{ position:absolute; inset:0; }
.banner .scrim{ position:absolute; inset:0; z-index:1; background: rgba(15,13,10,0.45); }
.banner-copy{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#F3EBDF; padding: 1.5rem; }
.banner-copy h2{ font-size: clamp(1.8rem,4.5vw,3rem); font-weight:400; letter-spacing:0.02em; margin: 0.5rem 0 1.3rem; max-width: 20ch; }

/* ---------- buttons ---------- */
.btn{
  font-size: var(--fs-label); font-weight:400; font-variation-settings:'wght' 400; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration:none; padding: 0.9rem 1.9rem; border: 1px solid currentColor; border-radius: 999px;
  display:inline-block; transition: background .25s ease, color .25s ease; cursor:pointer; background:none;
}
.btn.solid{ background: #F3EBDF; color: #17140F; border-color:#F3EBDF; }
.btn.solid:hover{ background: transparent; color: #F3EBDF; }
.btn.ghost{ background: transparent; color: #F3EBDF; }
.btn.ghost:hover{ background: #F3EBDF; color: #17140F; }
/* Same solid button, inverted for the (much more common) case of sitting on
   the page's own light/cream background instead of a dark photo/footer —
   used to be five different one-off inline styles doing this same flip. */
.btn.solid.on-light{ background: var(--ink); color: #F3EBDF; border-color: var(--ink); }
.btn.solid.on-light:hover{ background: transparent; color: var(--ink); }
.btn .arrow{ display:inline-block; margin-left: 0.5rem; transition: transform .25s ease; }
.btn:hover .arrow{ transform: translateX(4px); }
@media (max-width: 640px){
  .btn{ padding: 0.55rem 1.1rem; font-size: 0.6rem; }
}

/* ---------- product card / quick-add (shared by Home, Loja and PDP carousels) ----------
   Name/price/quick-add used to sit as a dark-gradient overlay ON the photo
   (a real flex column, absolutely pinned to the card's bottom edge). Moved
   to a plain block BELOW the photo instead — .card-media is now the actual
   fixed-aspect-ratio photo box, and .card-footer is normal in-flow content
   after it, so the card's own height is media + footer instead of a fixed
   ratio the footer had to cram itself inside. */
.product, .shop-card{ position:relative; overflow:hidden; border-radius: 10px; box-shadow: 0 1px 3px rgba(23,20,15,0.08); display:flex; flex-direction:column; }
.product:hover, .shop-card:hover{ box-shadow: 0 14px 28px rgba(23,20,15,0.18); transform: translateY(-3px); }
.product:hover .photo, .shop-card:hover .photo{ transform: scale(1.045); }
.photo-alt{ opacity:0; transition: opacity .35s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.product:hover .photo-alt, .shop-card:hover .photo-alt{ opacity:1; }
.card-media{ position:relative; flex-shrink:0; }
.card-link{ position:absolute; inset:0; z-index:1; }
.corner-stack{ position:absolute; top:0.7rem; right:0.7rem; z-index:3; display:flex; flex-direction:column; gap:0.4rem; }

/* .pdp-wish is the shared circular icon-button style for both the wishlist
   heart and the compare icon — used on Home/Loja cards, the PDP, and the
   comparison table, so it has to live here (not product.css, which is
   PDP-only) or it silently loses all styling everywhere else. */
.pdp-wish{
  width: 2.6rem; height: 2.6rem; border-radius:50%; flex-shrink:0; position:relative;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); background:var(--bg); color:var(--ink); cursor:pointer;
}
.pdp-wish:hover{ background: var(--surface); }
.pdp-wish.is-active{ background: var(--ink); color:#F3EBDF; border-color:var(--ink); }
.pdp-wish.is-active svg{ fill: currentColor; }
/* Tooltip below the button, not above: on Home/Loja cards these sit inside
   .product/.shop-card's own overflow:hidden near the card's TOP edge — a
   tooltip opening upward would render past that edge and get silently
   clipped off, invisible. Below always has the rest of the card/row to
   open into instead. Right-anchored (not centered) for the same reason on
   the horizontal axis: .corner-stack sits at the card's top-RIGHT corner,
   so a centered bubble stuck out past the card's right edge and got
   clipped there too — anchoring its right edge to the button's right edge
   keeps the whole thing growing leftward, into the card. */
.pdp-wish::after{
  content: attr(data-tooltip);
  position:absolute; top:calc(100% + 0.5rem); right:0; transform:translateY(-4px);
  background: var(--ink); color:#F3EBDF; font-size:0.68rem; font-weight:400; letter-spacing:0.02em;
  white-space:nowrap; padding:0.4rem 0.7rem; border-radius:6px; z-index:5;
  opacity:0; pointer-events:none; transition: opacity .15s ease, transform .15s ease;
}
.pdp-wish:hover::after, .pdp-wish:focus-visible::after{ opacity:1; transform:translateY(0); }
.card-footer{
  position:relative; z-index:2; flex:1;
  display:flex; flex-direction:column;
  /* .card-link still covers the WHOLE card (image + this footer) via
     inset:0 on the outer .product — pointer-events:none here lets a click
     anywhere in this text area fall through to that link, same as before;
     .quick-add re-enables itself below since it needs its own click. */
  pointer-events: none;
}
.product-info{
  display:flex; justify-content:space-between; align-items:flex-end;
  padding: 0.8rem 0.9rem 0.5rem; color: var(--ink);
}
/* Fixed height always reserved (opacity/transform toggle instead of
   max-height) — a max-height animation actually changes the CARD's own
   total rendered height on hover, and in a grid row of cards, hovering
   just ONE of them made only that card grow taller than its row-mates
   ("cards tortos" — the row's bottom edge went crooked the moment you
   hovered anything). Reserving the space unconditionally means every
   card in a row is always the same height, hovered or not. */
.quick-add{
  background: #17140F; color:#F3EBDF; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
  height: 2.9rem; padding: 0 0.9rem; white-space:nowrap;
  font-size: 0.7rem; font-weight:600; font-variation-settings:'wght' 600; letter-spacing:0.08em; text-transform:uppercase;
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
  width:100%; margin-top:auto;
  opacity:0; transform:translateY(4px); pointer-events:none;
}
.quick-add:hover{ background: #2A241B; }
.qa-short{ display:none; }
@media (max-width: 480px){ .qa-full{ display:none; } .qa-short{ display:inline; } }
.product:hover .quick-add, .shop-card:hover .quick-add{ opacity:1; transform:none; pointer-events:auto; }
@media (hover: none){ .quick-add{ opacity:1; transform:none; pointer-events:auto; } }
.product-info .info-text{ display:flex; flex-direction:column; gap:0.15rem; }
.product-info .name{
  font-family: var(--font-display); font-size: 0.86rem; font-weight:400; text-transform:uppercase; letter-spacing:0.04em;
}
.product-info .price-row{ display:flex; align-items:baseline; gap:0.4rem; }
.product-info .price-old{ font-size: 0.72rem; font-weight:400; font-variation-settings:'wght' 400; text-decoration:line-through; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.product-info .price{ font-size: 0.85rem; font-weight:600; font-variation-settings:'wght' 600; font-variant-numeric: tabular-nums; }
.product-info .installment{ font-size: 0.66rem; font-weight:400; font-variation-settings:'wght' 400; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.swatch-row{ display:flex; gap:0.3rem; margin-top:0.35rem; }
.swatch-dot{ width:0.72rem; height:0.72rem; border-radius:50%; border:1px solid var(--line-strong); display:inline-block; }
.icon-btn{
  width: 2rem; height: 2rem; border-radius: 50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(243,235,223,0.14); border: 1px solid rgba(243,235,223,0.45); color:#F3EBDF;
  cursor:pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.icon-btn:hover{ background: var(--ink-soft); color: #F3EBDF; border-color: var(--ink-soft); }
.icon-btn.wish.active, .gyo-wishlist-btn.is-active{ background: #F3EBDF; color:#17140F; border-color:#F3EBDF; }
.icon-btn.wish.active svg, .gyo-wishlist-btn.is-active svg{ fill: currentColor; }
.icon-btn.pulse{ animation: pulse .35s ease; }
@keyframes pulse{ 50%{ transform: scale(1.18); } }

/* ---------- footer (fixed dark-brown panel, always brown bg + cream text) ---------- */
footer{ padding: 3.6rem var(--edge) 2rem; background:#17140F; color:#F3EBDF; }
.footer-inner{ max-width:1440px; margin:0 auto; }
.footer-inner .footer-logo{ height: 6rem; width:auto; display:block; filter: invert(1); margin-bottom: 0.4rem; }
.foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; border-bottom: 1px solid rgba(243,235,223,0.16); padding-bottom: 2.6rem; }
.foot-grid p{ color: rgba(243,235,223,0.65); max-width: 32ch; font-size: 0.88rem; font-weight:400; font-variation-settings:'wght' 400; }
.foot-col h3{ font-size: var(--fs-label); font-weight:700; font-variation-settings:'wght' 700; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:1rem; color: #F3EBDF; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.6rem; }
.foot-col a{ text-decoration:none; font-size: 0.88rem; font-weight:400; font-variation-settings:'wght' 400; color: rgba(243,235,223,0.8); }
.foot-col a:hover{ color: #F3EBDF; }
.foot-social{ display:flex; gap:0.6rem; margin-top:1rem; }
.foot-social a{
  display:flex; align-items:center; justify-content:center; width:2.2rem; height:2.2rem;
  border:1px solid rgba(243,235,223,0.3); border-radius:50%; color: rgba(243,235,223,0.8);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.foot-social a:hover{ background:#F3EBDF; color:#17140F; border-color:#F3EBDF; }
@media (max-width: 780px){ .foot-grid{ grid-template-columns: 1fr 1fr; } }
.foot-col-social .foot-social{ margin-top:0; }

/* ---------- payment / security / shipping badges ----------
   Simplified brand-colored chips (real color identity + wordmark), not
   traced reproductions of the official logos — see the PHP comment above
   this markup for why (no licensed logo files to drop in as real images). */
.foot-badges-grid{
  display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem;
  padding: 1.8rem 0; border-bottom: 1px solid rgba(243,235,223,0.16);
}
@media (max-width:780px){ .foot-badges-grid{ grid-template-columns:1fr; gap:1.4rem; } }
.foot-badges-col h4{ font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color: rgba(243,235,223,0.55); margin-bottom:0.8rem; font-weight:600; }

.pay-chips, .ship-chips{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.pay-chip, .ship-chip{
  display:flex; align-items:center; justify-content:center; text-align:center;
  height:1.9rem; min-width:2.9rem; padding:0 0.5rem; border-radius:5px;
  font-size:0.62rem; font-weight:700; letter-spacing:0.01em; line-height:1.1; color:#fff;
}
/* Real logo SVGs (see footer.php) — transparent background, so they need
   their own light chip to read against the dark footer, unlike the
   hand-drawn fallback chips above which already carry their brand color. */
.pay-chip-img{ background:#fff; padding:0.35rem 0.6rem; }
.pay-chip-img img{ height:1.1rem; width:auto; max-width:2.6rem; }
.pay-visa{ background:#1A1F71; font-style:italic; font-size:0.7rem; }
.pay-master{ background:#fff; }
.pay-master-dots{ display:flex; }
.pay-master-dots i{ width:1rem; height:1rem; border-radius:50%; display:block; }
.pay-master-dots i:first-child{ background:#EB001B; margin-right:-0.35rem; }
.pay-master-dots i:last-child{ background:#F79E1B; mix-blend-mode:multiply; }
.pay-elo{ background:#000; text-transform:lowercase; font-style:italic; font-size:0.75rem; }
.pay-hiper{ background:#B3131A; }
.pay-amex{ background:#006FCF; }
.pay-boleto{ background:#fff; color:#17140F; border:1px solid rgba(23,20,15,0.25); font-weight:600; }
.pay-mp{ background:#009EE3; font-size:0.56rem; }
.pay-pix{ background:#32BCAD; }
.ship-sedex{ background:#FFCB05; color:#00448C; font-style:italic; }
.ship-pac{ background:#00448C; }
.ship-moto, .ship-carrier{ background:none; border:1px solid rgba(243,235,223,0.35); color:#F3EBDF; gap:0.4rem; text-transform:none; font-weight:600; }
.ship-moto svg, .ship-carrier svg{ flex-shrink:0; }

.security-seal{ display:flex; align-items:center; gap:0.7rem; color: rgba(243,235,223,0.85); }
.security-seal svg{ flex-shrink:0; color:#4CAF6D; }
.security-seal strong{ display:block; color:#F3EBDF; font-size:0.8rem; }
.security-seal span{ font-size:0.72rem; color: rgba(243,235,223,0.6); }

.foot-seal-images{ display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; padding: 0 0 1.8rem; }
.foot-seal-images img{ height:2.6rem; width:auto; filter: grayscale(1) brightness(1.6); opacity:0.85; }
.colophon{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem; padding-top: 1.5rem; font-size: 0.72rem; font-weight:400; font-variation-settings:'wght' 400; color: rgba(243,235,223,0.55); letter-spacing: 0.05em; }
.colophon a{ text-decoration:none; color: #F3EBDF; font-weight:600; font-variation-settings:'wght' 600; }
.colophon a:hover{ color: rgba(243,235,223,0.7); text-decoration:underline; }

.reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity:1; transform:none; }
}

/* ---------- floating "Comparar" bar ---------- */
.compare-bar{
  position: fixed; left:50%; bottom:1.4rem; transform:translateX(-50%); z-index: 89;
  display:flex; align-items:center; gap:1rem; background:var(--ink); color:#F3EBDF;
  padding:0.8rem 1.4rem; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,0.25);
}
.compare-bar[hidden]{ display:none; }
.compare-bar-count{ font-size:0.82rem; font-variant-numeric: tabular-nums; }
.compare-bar .btn.solid{ padding:0.5rem 1.1rem; font-size:0.68rem; }
.compare-bar-clear{ background:none; border:none; color:rgba(243,235,223,0.7); cursor:pointer; font-size:0.72rem; text-decoration:underline; }
.compare-bar-clear:hover{ color:#F3EBDF; }
.gyo-compare-btn.is-active{ background:#F3EBDF; color:#17140F; border-color:#F3EBDF; }

/* ---------- floating WhatsApp button ---------- */
.whatsapp-float{
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 90;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: #25D366; color: #fff; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25); transition: transform .2s ease;
}
.whatsapp-float:hover{ transform: scale(1.08); }
@media (max-width: 780px){ .whatsapp-float{ right:1rem; bottom:1rem; width:3rem; height:3rem; } }

/* ---------- mini cart drawer (shared: opened from any add-to-cart action) ---------- */
.cart-overlay{ position:fixed; inset:0; background:rgba(15,13,10,0.5); z-index:98; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.cart-overlay.open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px, 100vw); z-index:99;
  background:var(--bg); box-shadow:-8px 0 30px rgba(0,0,0,0.2);
  transform:translateX(100%); transition:transform .35s cubic-bezier(.22,1,.36,1);
  display:flex; flex-direction:column;
}
.cart-drawer.open{ transform:translateX(0); }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:1.2rem var(--edge); border-bottom:1px solid var(--line); }
.cart-head h2{ font-size:1rem; font-weight:400; letter-spacing:0.03em; }
.cart-close{ background:none; border:none; cursor:pointer; color:var(--ink); display:flex; }
.cart-items{ flex:1; overflow-y:auto; padding: 1rem var(--edge); }
.cart-empty{ color:var(--ink-mute); font-size:0.85rem; }
.cart-item{ display:flex; gap:0.8rem; padding:0.8rem 0; border-bottom:1px solid var(--line); }
.cart-item-thumb{ width:4.2rem; height:5.25rem; flex-shrink:0; border-radius:6px; overflow:hidden; }
.cart-item-meta{ flex:1; }
.cart-item-name{ font-size:0.85rem; font-weight:600; font-variation-settings:'wght' 600; }
.cart-item-qty{ font-size:0.75rem; color:var(--ink-mute); margin-top:0.2rem; font-variant-numeric: tabular-nums; }
.cart-foot{ padding: 1.2rem var(--edge); border-top:1px solid var(--line); display:flex; flex-direction:column; gap:0.7rem; }
.cart-subtotal{ display:flex; justify-content:space-between; font-size:0.85rem; font-weight:600; font-variation-settings:'wght' 600; font-variant-numeric: tabular-nums; }
.cart-continue{ color:var(--ink); border-color:var(--ink); text-align:center; }
.cart-continue:hover{ background:var(--ink); color:#F3EBDF; }
/* The drawer is a quick preview (no remove/quantity controls of its own,
   on purpose — that logic already lives on the dedicated Cart page below);
   this is the one visible way to actually reach that page instead of
   guessing a URL exists. */
.cart-view-link{ text-align:center; font-size:0.78rem; color:var(--ink-soft); text-decoration:underline; }
.cart-view-link:hover{ color:var(--ink); }
.cart-checkout-btn{ flex:none; width:100%; border:none; border-radius:999px; background:var(--ink); color:#F3EBDF; padding:0.9rem 1.2rem; font-size:0.78rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; text-align:center; text-decoration:none; display:block; }
.cart-checkout-btn:hover{ background:#2A241B; }

/* ---------- breadcrumb (Loja, PDP, WooCommerce pages) ---------- */
.breadcrumb{
  display:block; padding: 1rem var(--edge) 0; max-width:1440px; margin:0 auto;
  font-size: 0.78rem; color: var(--ink-mute);
}
.breadcrumb a{ color: var(--ink-mute); text-decoration:none; }
.breadcrumb a:hover{ color: var(--ink); text-decoration:underline; }

/* ---------- product grid (Loja + Favoritos, shared) ---------- */
.shop-grid{
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem 0.8rem;
}
.shop-grid .product .card-media{ aspect-ratio: 3/4; }
@media (min-width: 1800px){ .shop-grid{ grid-template-columns: repeat(6,1fr); } }
@media (max-width: 1300px){ .shop-grid{ grid-template-columns: repeat(4,1fr); gap:0.7rem 0.9rem; } }
@media (max-width: 1000px){ .shop-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 700px){ .shop-grid{ grid-template-columns: repeat(2,1fr); gap:0.5rem 0.6rem; } }
@media (max-width: 340px){ .shop-grid{ grid-template-columns: 1fr; } }

.favorites-empty{ text-align:center; padding: 3rem 1rem; color:var(--ink-soft); }
.favorites-empty p{ margin-bottom:1.5rem; }

/* ---------- comparison table (page-comparar.php) ---------- */
.compare-table-wrap{ overflow-x:auto; }
.compare-table{ border-collapse:collapse; width:100%; min-width:640px; }
.compare-table th, .compare-table td{ border:1px solid var(--line); padding:0.9rem 1.1rem; text-align:left; vertical-align:top; font-size:0.88rem; }
.compare-table th{ background:var(--surface); font-weight:600; white-space:nowrap; width:1%; }
.compare-table td{ min-width:200px; }
/* aspect-ratio on the <a>, not the <img> — browsers give an <img>'s own
   native width/height HTML attributes priority over a CSS aspect-ratio
   when computing its auto dimension, so the image was rendering at its
   full native pixel height (routinely 600-900px) inside a box only 160px
   wide, instead of the 4:5 crop this was supposed to be. Same fix as the
   PDP gallery: give the ratio to a wrapper with a real box, then force the
   image to fill it. */
.compare-table .compare-row-photo td a{ display:block; width:100%; max-width:160px; aspect-ratio:4/5; overflow:hidden; border-radius:8px; }
.compare-table img{ width:100% !important; height:100% !important; object-fit:cover; display:block; border-radius:8px; }
.compare-add-btn{ padding: 0.7rem 1.2rem; font-size: 0.66rem; white-space: nowrap; }
.compare-remove{
  display:block; margin-top:0.6rem; background:none; border:none; color:var(--ink-mute); font-size:0.72rem; cursor:pointer; text-decoration:underline;
}
.compare-remove:hover{ color:var(--ink); }

/* ---------- generic page (page.php: Sobre, Contato, Minha Conta...) ---------- */
.page-content h1{ font-size: var(--fs-h2); font-weight:400; letter-spacing:0.03em; margin-bottom:2rem; }
/* Same look as .section-head h2, for the handful of one-off pages
   (Comparar, Favoritos, Contato) whose own <h1> lives outside .page-content
   and used to reach for an inline style each time instead. */
.page-h1-as-h2{ font-size: var(--fs-h2); font-weight:400; letter-spacing:0.03em; }
.page-content .woocommerce-form-row input,
.page-content .woocommerce-form-row select,
.page-content input[type="text"],
.page-content input[type="email"],
.page-content input[type="password"]{
  border:1px solid var(--line-strong); border-radius:6px; padding:0.7rem 0.9rem; background:var(--surface);
}
.page-content .woocommerce-Button, .page-content button.button{
  font-size: var(--fs-label); font-weight:600; font-variation-settings:'wght' 600; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--ink); color:#F3EBDF; border:none; border-radius: 999px; padding: 0.85rem 1.9rem; cursor:pointer;
}
.page-content .woocommerce-Button:hover, .page-content button.button:hover{ background: #2A241B; }
.page-content a{ color: var(--ink); text-decoration-color: var(--line-strong); }
.page-content table{ width:100%; border-collapse:collapse; margin:1rem 0; }
.page-content table th, .page-content table td{ border:1px solid var(--line); padding:0.6rem 0.9rem; text-align:left; font-size:0.88rem; }
.page-content table th{ background:var(--surface); font-weight:600; }
.page-content ul{ padding-left:1.2rem; color:var(--ink-soft); font-size:0.92rem; }
.page-content ul li{ margin-bottom:0.4rem; }

/* ---------- long-form document pages (Política de privacidade, Trocas e
   devoluções — plain WYSIWYG content, no .woocommerce wrapper) ----------
   Scoped to DIRECT children only (p/h2/h3/ul/ol/blockquote), not `.page-content *`
   — My Account reuses this same template but wraps its content in a
   `.woocommerce` div, which this selector never touches, so its own
   220px+1fr grid layout is unaffected. Full-width text at 1400px was the
   real "crua" problem: no reading measure, no space between paragraphs
   (the sitewide h1,h2,h3,p{margin:0} reset left them all touching). */
.page-content > p, .page-content > ul, .page-content > ol, .page-content > h2, .page-content > h3, .page-content > blockquote{
  max-width: 68ch; margin-left:auto; margin-right:auto;
}
.page-content > p{ margin-bottom:1.15rem; color:var(--ink-soft); line-height:1.75; font-size:0.95rem; }
.page-content > ul, .page-content > ol{ margin-bottom:1.3rem; }
.page-content > h2{
  font-size:1.25rem; font-weight:400; letter-spacing:0.02em; text-transform:none;
  margin: 2.6rem auto 1.1rem; padding-top:1.8rem; border-top:1px solid var(--line);
}
.page-content > h2:first-of-type{ margin-top:0; padding-top:0; border-top:none; }
.page-content > h3{ font-size:1.02rem; font-weight:600; font-variation-settings:'wght' 600; text-transform:none; letter-spacing:0; margin: 1.6rem auto 0.8rem; }
/* The "Última atualização: ..." line ships as a standalone paragraph whose
   only content is an <em> — a small muted pill reads as document metadata
   instead of just another line of body copy. */
.page-content > p > em:only-child,
.doc-card > p > em:only-child{
  display:inline-block; font-style:normal; font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-mute); background:var(--bg); padding:0.45rem 1rem; border-radius:999px;
}

/* ---------- document layout (2+ H2s: política/trocas) ----------
   A real structural change, not just tighter type on the same single
   column: sticky jump-link sidebar built straight from the post's own H2s
   (page.php's gyo_doc_toc()) next to the content in its own card. */
.doc-layout{ display:grid; grid-template-columns: 15rem 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items:start; }
.doc-toc{ position:sticky; top: calc(6.6rem + 1.5rem); display:flex; flex-direction:column; gap:0.9rem; }
.doc-toc-label{ font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-mute); }
.doc-toc nav{ display:flex; flex-direction:column; border-left:2px solid var(--line); }
.doc-toc nav a{
  padding:0.55rem 0 0.55rem 1rem; margin-left:-2px; border-left:2px solid transparent;
  font-size:0.85rem; color:var(--ink-soft); text-decoration:none; line-height:1.3;
  transition: color .15s ease, border-color .15s ease;
}
.doc-toc nav a:hover{ color:var(--ink); border-color:var(--line-strong); }

.doc-card{ background: var(--surface); border-radius:20px; padding: clamp(1.8rem, 3.5vw, 3rem); }
.doc-card > p, .doc-card > ul, .doc-card > ol, .doc-card > h3, .doc-card > blockquote{ max-width:62ch; }
.doc-card > p{ margin-bottom:1.15rem; color:var(--ink-soft); line-height:1.75; font-size:0.95rem; }
.doc-card > ul, .doc-card > ol{ margin-bottom:1.2rem; padding-left:1.2rem; color:var(--ink-soft); font-size:0.92rem; }
.doc-card > ul li, .doc-card > ol li{ margin-bottom:0.4rem; }
.doc-card > h2{
  font-size:1.2rem; font-weight:400; letter-spacing:0.02em;
  margin: 2.6rem 0 1.1rem; scroll-margin-top: calc(6.6rem + 2rem);
}
.doc-card > h2:first-of-type{ margin-top:0; }
.doc-card > h3{ font-size:1rem; font-weight:600; font-variation-settings:'wght' 600; margin: 1.4rem 0 0.7rem; }

@media (max-width: 900px){
  .doc-layout{ grid-template-columns: 1fr; }
  .doc-toc{ position:static; padding-bottom:1.4rem; margin-bottom:1.6rem; border-bottom:1px solid var(--line); }
  .doc-toc nav{ flex-direction:row; flex-wrap:wrap; gap:0.5rem; border-left:none; }
  .doc-toc nav a{ padding:0.4rem 0.9rem; margin-left:0; border:1px solid var(--line); border-radius:999px; }
}

/* ---------- My Account (dashboard.php + navigation.php overrides) ---------- */
/* WooCommerce's own core CSS ships a float-based 2-column layout for these
   two exact classes (.woocommerce-account .woocommerce-MyAccount-navigation/
   -content { float:left/right; width:30%/68%; }) — same specificity as our
   grid override below, so without !important here it's a coin flip which
   one wins the cascade depending on stylesheet load order. Neutralizing
   float/width explicitly is what actually lets our grid track sizes (not
   WC's percentages) determine the two columns. */
.page-content .woocommerce-MyAccount-navigation,
.page-content .woocommerce-MyAccount-content{ float:none !important; width:auto !important; }
.page-content .woocommerce{ display:grid; grid-template-columns: 220px 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items:start; }
/* Explicit placement, not relying on source-order auto-flow — with WC's own
   float rules neutralized above, auto-placement was putting these in the
   wrong track (nav taking the content track's width and vice versa). */
.page-content .woocommerce-MyAccount-navigation{ grid-column: 1; grid-row: 1; }
.page-content .woocommerce-MyAccount-content{ grid-column: 2; grid-row: 1; }
.page-content .woocommerce > .woocommerce-notices-wrapper{ grid-column: 1 / -1; }
@media (max-width: 780px){
  .page-content .woocommerce-MyAccount-navigation{ grid-column: 1; grid-row: 1; }
  .page-content .woocommerce-MyAccount-content{ grid-column: 1; grid-row: 2; }
}
@media (max-width: 780px){ .page-content .woocommerce{ grid-template-columns: 1fr; } }

.gyo-account-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.2rem; }
.gyo-account-nav li{ margin:0; }
.gyo-account-nav a{
  display:flex; align-items:center; gap:0.7rem; padding:0.7rem 0.9rem; border-radius:8px;
  color: var(--ink-soft); text-decoration:none; font-size:0.86rem;
}
.gyo-account-nav a:hover{ background: var(--surface); color:var(--ink); }
.gyo-account-nav li.is-active a{ background: var(--ink); color:#F3EBDF; }
.gyo-account-nav-icon{ display:flex; flex-shrink:0; opacity:0.85; }

.gyo-account-greeting{ font-size:1rem; color:var(--ink-soft); margin-bottom:1.6rem; }

/* ---------- My Account subpages (Endereços, Detalhes da conta, Pedidos) ----------
   Only dashboard.php + navigation.php ever got theme overrides — every
   other My Account screen (edit-address, edit-account, orders) still
   renders WooCommerce's own default markup with none of our styling, just
   the raw plugin classes below skinned via CSS instead of full template
   overrides (faster, lower-risk, and WC's default markup here is stable/
   semantic enough that skinning it holds up fine). */
.woocommerce-MyAccount-content h2{ font-size:1.1rem; font-weight:400; margin: 0 0 1.3rem; }
.woocommerce-MyAccount-content h2:not(:first-child){ margin-top:2rem; }

/* notices ("Nenhum pedido foi feito ainda.", save-success, etc.) — WC ships
   these with a hardcoded blue admin-style left border by default. */
.woocommerce-notice, .woocommerce-message, .woocommerce-info, .woocommerce-error,
.woocommerce-NoticeGroup .woocommerce-Message{
  display:flex !important; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  background: var(--surface) !important; border:1px solid var(--line) !important; border-left:1px solid var(--line) !important;
  border-radius:14px; padding:1.1rem 1.4rem !important; color:var(--ink) !important; font-size:0.9rem;
  list-style:none; margin: 0 0 1.6rem !important;
}
.woocommerce-notice::before, .woocommerce-message::before, .woocommerce-info::before{ display:none !important; }
.woocommerce-notice .button, .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button{
  font-size: var(--fs-label); font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  background: var(--ink) !important; color:#F3EBDF !important; border:none; border-radius:999px; padding:0.7rem 1.4rem !important;
}

/* Endereços card sizing/spacing lives in the more specific
   .woocommerce-MyAccount-content .woocommerce-Address* block further down —
   this used to duplicate (and lose the cascade to) that block with weaker
   selectors, which was confusing to maintain and masked the real bug below. */

/* Detalhes da conta + endereço (edit forms) */
.woocommerce-EditAccountForm, .woocommerce-address-fields{ max-width:520px; }
.woocommerce-EditAccountForm .form-row, .woocommerce-address-fields .form-row{ margin-bottom:1.1rem; }
.woocommerce-EditAccountForm label, .woocommerce-address-fields label{
  display:block; margin-bottom:0.4rem; font-size:0.78rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-mute);
}
.woocommerce-EditAccountForm .description{ font-size:0.78rem; color:var(--ink-mute); margin-top:0.3rem; }
.woocommerce-EditAccountForm fieldset{
  border:1px solid var(--line); border-radius:14px; padding: 1.3rem 1.4rem 0.3rem; margin: 1.8rem 0;
}
.woocommerce-EditAccountForm legend{ padding:0 0.5rem; font-size:0.85rem; color:var(--ink); }

/* Pedidos — each order as its own row-card instead of a plain HTML table */
.woocommerce-orders-table{ border-collapse:separate; border-spacing:0 0.6rem; width:100%; }
.woocommerce-orders-table thead{ display:none; }
.woocommerce-orders-table__row{ background:var(--surface); }
.woocommerce-orders-table__row td{ border:none; padding:1rem 1.2rem; font-size:0.86rem; vertical-align:middle; }
.woocommerce-orders-table__row td:first-child{ border-radius:12px 0 0 12px; }
.woocommerce-orders-table__row td:last-child{ border-radius:0 12px 12px 0; }
.woocommerce-orders-table__cell-order-number a{ font-weight:600; color:var(--ink); text-decoration:none; }
.woocommerce-orders-table__cell-order-status{ text-transform:capitalize; }
.woocommerce-orders-table__cell-order-actions .button{
  font-size:0.72rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  background:var(--ink) !important; color:#F3EBDF !important; border:none; border-radius:999px; padding:0.55rem 1.1rem !important;
}
@media (max-width:700px){
  .woocommerce-orders-table, .woocommerce-orders-table tbody, .woocommerce-orders-table tr, .woocommerce-orders-table td{ display:block; width:100%; }
  .woocommerce-orders-table__row{ border-radius:12px; padding:1rem 1.2rem; margin-bottom:0.8rem; }
  .woocommerce-orders-table__row td{ padding:0.3rem 0; display:flex; justify-content:space-between; gap:1rem; }
  .woocommerce-orders-table__row td::before{ content: attr(data-title); color:var(--ink-mute); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; }
}
.gyo-account-stats{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.4rem; }
.gyo-stat{
  flex:1; min-width:120px; text-decoration:none; color:var(--ink); background:var(--surface);
  border-radius:12px; padding:1.2rem 1.3rem; display:flex; flex-direction:column; gap:0.3rem;
  transition: background-color .2s ease;
}
.gyo-stat:hover{ background: var(--bg-deep); }
.gyo-stat-num{ font-family: var(--font-display); font-size:1.8rem; letter-spacing:0.02em; }
.gyo-stat-label{ font-size:0.7rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-mute); }

.gyo-account-section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin: 0 0 1rem; padding-top:0.5rem; }
.gyo-account-section-head h2{ font-size:1.1rem; font-weight:400; letter-spacing:0.03em; }
.gyo-account-section-head a{ font-size:0.78rem; color:var(--ink-mute); text-decoration:none; }
.gyo-account-section-head a:hover{ color:var(--ink); }
.gyo-account-empty{ color:var(--ink-soft); font-size:0.9rem; }
.gyo-account-empty a{ margin-left:0.4rem; }

.gyo-order-list{ display:flex; flex-direction:column; gap:0.6rem; margin-bottom:2.4rem; }
.gyo-order-row{
  display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:1rem; align-items:center;
  padding:0.9rem 1.1rem; border:1px solid var(--line); border-radius:10px; text-decoration:none; color:var(--ink);
  font-size:0.84rem; transition: border-color .2s ease, background-color .2s ease;
}
.gyo-order-row:hover{ border-color:var(--line-strong); background:var(--surface); }
.gyo-order-number{ font-weight:600; }
.gyo-order-date, .gyo-order-total{ color:var(--ink-soft); font-variant-numeric: tabular-nums; }
.gyo-order-status{
  justify-self:start; font-size:0.68rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  padding:0.3rem 0.7rem; border-radius:999px; background:var(--surface); color:var(--ink-soft); width:fit-content;
}
.gyo-order-status.status-completed{ background:#E4EBDE; color:#3E5C2E; }
.gyo-order-status.status-processing{ background:#EAE3D2; color:#7A6425; }
.gyo-order-status.status-cancelled, .gyo-order-status.status-failed{ background:#F1DEDA; color:#8C3A2C; }
@media (max-width:640px){ .gyo-order-row{ grid-template-columns: 1fr 1fr; row-gap:0.4rem; } }

.gyo-account-quicklinks{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:0.8rem; }
.gyo-account-quicklinks a{
  display:flex; align-items:center; gap:0.6rem; padding:0.9rem 1rem; border:1px solid var(--line); border-radius:10px;
  text-decoration:none; color:var(--ink); font-size:0.82rem; transition: border-color .2s ease, background-color .2s ease;
}
.gyo-account-quicklinks a:hover{ border-color:var(--line-strong); background:var(--surface); }
.gyo-account-quicklinks svg{ flex-shrink:0; color:var(--ink-mute); }

/* ---------- orders table / addresses (WooCommerce's own default markup, not overridden) ---------- */
.woocommerce-orders-table{ font-size:0.86rem; }
.woocommerce-orders-table__cell-order-status{ text-transform:capitalize; }
.woocommerce-MyAccount-content .woocommerce-Addresses{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1.2rem; }
/* Each .woocommerce-Address also carries WooCommerce's OWN legacy
   col2-set/col-1/col-2 float-column classes (real markup: <div
   class="u-column1 col-1 woocommerce-Address">) — WC core ships
   ".col2-set .col-1{ width:48% }" for that old layout system, and since
   this is a real declared width (not just a float), it overrode our grid
   item's default stretch-to-fill sizing: each card was rendering at 48% of
   its OWN grid column instead of the full column, which is what actually
   made these look "quebrado espremido" — not the title, not the address
   text, the card's own box was just half as wide as it should've been. */
.woocommerce-MyAccount-content .woocommerce-Address{
  width:auto !important; float:none !important;
  border:1px solid var(--line); border-radius:12px; padding:1.3rem 1.4rem;
}
.woocommerce-MyAccount-content .woocommerce-Address-title{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0.4rem 1rem; margin-bottom:0.8rem; }
/* Plain --font-sans here, not --font-display: Caslon Titling MT only ships
   uppercase-shaped glyphs (typical of a classic "titling" face), so at this
   size — a small functional label, not a real heading — it was rendering
   as an oversized, wrapping, permanently-caps block no matter what
   text-transform said. It's an <h2> in WooCommerce's own markup (not h3 —
   confirmed by inspecting the actual rendered DOM, not assumed), so it was
   also silently inheriting the sitewide h1,h2 display-font rule until this
   was scoped specifically enough to beat it. */
.woocommerce-MyAccount-content .woocommerce-Address-title h2{
  font-family:var(--font-sans); font-size:0.72rem; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-mute); margin-right:auto;
}
.woocommerce-MyAccount-content .woocommerce-Address-title a{ font-size:0.76rem; white-space:nowrap; }
.woocommerce-MyAccount-content address{ font-style:normal; color:var(--ink-soft); font-size:0.88rem; line-height:1.7; }

.gyo-contact-form{ display:flex; flex-direction:column; gap:0.3rem; max-width:480px; margin-top:1.5rem; }
.gyo-contact-form label{ font-size:0.72rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-mute); margin-top:0.8rem; }
.gyo-contact-form input, .gyo-contact-form textarea{
  border:1px solid var(--line-strong); border-radius:6px; padding:0.7rem 0.9rem; background:var(--surface); font-family:inherit; resize:vertical;
}
.gyo-contact-form button{ margin-top:1.4rem; align-self:flex-start; border:none; cursor:pointer; }
.gyo-form-notice{ padding:0.8rem 1rem; border-radius:8px; font-size:0.88rem; margin-bottom:1rem; }
.gyo-form-success{ background:#E4EFE2; color:#2C5A2C; }
.gyo-form-error{ background:#F5E1DD; color:#93342A; }

/* ---------- blog/search/404 fallback (index.php) ---------- */
.post-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 900px){ .post-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .post-grid{ grid-template-columns: 1fr; } }
.post-card{ display:flex; flex-direction:column; gap:0.6rem; }
.post-thumb{ display:block; aspect-ratio:4/5; border-radius:10px; overflow:hidden; background:var(--surface); }
.post-thumb img{ width:100%; height:100%; object-fit:cover; }
.post-card h3{ font-size:1rem; font-weight:600; font-variation-settings:'wght' 600; }
.post-card h3 a{ text-decoration:none; }
.post-card p{ color:var(--ink-soft); font-size:0.88rem; font-weight:400; font-variation-settings:'wght' 400; }