/* ─────────────────────────────────────────────────────────────────────────────
   ATELIER 14 — editorial minimalist product page
   Verbatim styles (paper / ink / stone / sand)
───────────────────────────────────────────────────────────────────────────── */

:root {
  /* Brand palette */
  --paper:       #ffffff;          /* Background */
  --ink:         #0e1011;          /* Headings + primary anchors (title, price) */
  --ink-soft:    #1c1c1c;          /* Body text */
  --stone:       #6b6f74;          /* Secondary / muted: eyebrows, labels, meta, breadcrumb, ref.
                                      Real mid-grey so micro-labels recede beneath title/price
                                      (was #1f2123 — near-black, which flattened all hierarchy). */
  --stone-soft:  rgba(28, 28, 28, 0.40);
  --paper-tint:  #fafafa;          /* Lightest tinted surface (one step under --paper) */
  --paper-soft:  #f7f7f7;
  --sand:        #f5f5f5;
  --line:        rgba(14, 16, 17, 0.14);
  --line-strong: rgba(14, 16, 17, 0.22);
  --hairline:    0.5px;            /* Espessura das linhas subtis (var(--line)). Em ecrãs retina (2×) rende como 1px físico — hairline crisp. Afina aqui num só sítio. */
  --error:       #8a2a2a;
  --disabled-bg: #5f666b;
  --disabled-text: var(--paper);
  --focus-outline: 2px solid var(--ink);
  --focus-outline-offset: 3px;

  /* Semantic overlay tokens (avoid hard-coded rgba in components) */
  --paper-92:    rgba(255, 255, 255, 0.92);  /* badge/counter pills on light bg */
  --paper-65:    rgba(255, 255, 255, 0.65);  /* footer muted text on dark bg */
  --paper-50:    rgba(255, 255, 255, 0.50);
  --paper-15:    rgba(255, 255, 255, 0.15);  /* footer divider on dark bg */
  --ink-00:      rgba(14, 16, 17, 0);
  --ink-04:      rgba(14, 16, 17, 0.04);
  --ink-08:      rgba(14, 16, 17, 0.08);
  --ink-18:      rgba(14, 16, 17, 0.18);
  --ink-22:      rgba(14, 16, 17, 0.22);
  --ink-40:      rgba(14, 16, 17, 0.40);
  --ink-50:      rgba(14, 16, 17, 0.50);
  --overlay-scrim: var(--ink-40);
  --overlay-scrim-strong: var(--ink-50);
  --overlay-modal-backdrop: rgba(20, 18, 14, 0.55);
  --overlay-lightbox: rgba(20, 18, 14, 0.92);   /* backdrop opaco da lightbox de fotos */
  --shadow-dropdown: 0 8px 24px var(--ink-08);
  --shadow-popover: 0 10px 32px var(--ink-08);
  --shadow-drawer: -20px 0 40px var(--ink-08);
  --shadow-drawer-strong: -10px 0 32px var(--ink-18);
  --shadow-sticky-bar: 0 -12px 40px var(--ink-08);
  --shadow-modal: 0 24px 80px rgba(20, 18, 14, 0.22);
  --shadow-megamenu: 0 18px 30px -28px var(--ink-22);   /* sombra subtil do painel do mega-menu */

  /* Rating star states (built from body text colour) */
  --rating-empty:  rgba(28, 28, 28, 0.22);
  --rating-hover:  var(--ink-soft);
  --rating-filled: var(--ink);

  --gutter:      48px;
  --rail-w:      380px;

  --sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Escala de títulos ──────────────────────────────────────────────
     Tokens únicos por nível. Regra: H1 nunca < 24px em mobile; H2 normal
     nunca acima do H1 normal. Usar SEMPRE estes tokens nos __title — nunca
     px fixos nem clamps inventados por contexto. */
  --fs-h1-page:      clamp(24px, 3vw, 32px);  /* Contactos, FAQs, Legal, Carrinho vazio, Produto */
  --fs-h1-shop:      clamp(22px, 2.2vw, 27px);  /* Loja, Conta, Checkout, Carrinho, Favoritos */
  --fs-h1-editorial: clamp(32px, 5vw, 60px);  /* Sobre (intencionalmente grande) */
  --fs-h2-section:   clamp(20px, 2.4vw, 28px);
  --fs-h2-cta:       clamp(22px, 3vw, 40px);  /* CTA da home, especial */
}

* { box-sizing: border-box; }
/* overflow-x: clip (not hidden) prevents horizontal scroll from the full-bleed
   sections without creating a scroll container — which would break the sticky
   nav below. */
html, body { margin: 0; padding: 0; overflow-x: clip; max-width: 100%; }
body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink-soft);            /* body text */
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: 0.005em;
}

/* Headings always use the strongest ink (#0E1011) */
h1, h2, h3, h4, h5, h6,
.h1-display, .h2-section,
.cos-card__title, .accordion-item summary,
.product-title-row, .cos-shop__title { color: var(--ink); }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── typography utilities ─────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 400;
}
.label {
  /* Single micro-label system — matches .eyebrow / .style-code / meta labels
     so COR, TAMANHO and every other small caption read as one calm tier. */
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--stone);
}
.h1-display {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-h1-page);
  line-height: 1.06;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0;
}
.h2-section {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-h2-section);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}
.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }

/* ── top utility bar ──────────────────────────────────────────────────────── */
.utility {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 8px 0;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
  /* Break out of the .cos-shell cap (1800px) — the promo marquee runs
     edge-to-edge across the viewport, while everything below stays capped.
     The !important defeats `.cos-shell > * { max-width: 100% }` which would
     otherwise pin the bar back to the shell width. */
  width: 100vw;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.utility-track {
  display: inline-flex;
  gap: 60px;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── nav ──────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: var(--hairline) solid var(--line);
  backdrop-filter: blur(8px);
  /* Full-bleed the bar (and its bottom rule) across the viewport so the
     separator runs edge-to-edge — like the utility marquee above. The
     content inside is re-centred by .nav-inner's max-width below. */
  width: 100vw;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px var(--gutter);
  /* Re-cap the visible nav content to the site shell width so SHOP /
     PETRA / icons stay aligned with everything below. */
  max-width: 1800px;
  margin: 0 auto;
}
.nav-left, .nav-right {
  display: flex;
  gap: 28px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.nav-right { justify-content: flex-end; }
.nav-left a, .nav-right button, .nav-right a {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  position: relative;
}
.nav-left a:hover { color: var(--stone); }
.nav-right .nav-icon,
.nav-right .nav-icon:hover,
.nav-right .nav-icon:focus,
.nav-right .nav-icon:active { color: var(--ink); transform: none; }
.brand {
  font-weight: 600;
  letter-spacing: 0.32em;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
}
.brand small {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--stone);
  font-weight: 400;
  margin-top: 2px;
}
.cart-dot {
  position: absolute;
  top: -6px; right: -10px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 9px;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}

/* ── breadcrumb ───────────────────────────────────────────────────────────── */
.crumbs {
  padding: 24px var(--gutter) 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* Links e item atual em --stone (#6b6f74 ≈ 5:1 sobre branco). O --stone-soft
   antigo (40% ≈ 2.5:1) reprovava no contraste WCAG AA. */
.crumbs a { color: var(--stone); }
.crumbs span { color: var(--stone); }
.crumbs strong { color: var(--ink); font-weight: 400; }

/* ── hero — editorial layout ──────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1fr var(--rail-w);
  gap: var(--gutter);
  padding: 32px var(--gutter) 80px;
  align-items: start;
}
.hero[data-layout="centered"] {
  grid-template-columns: 1fr;
  max-width: 1100px;
  margin: 0 auto;
}
.hero[data-layout="split"] {
  /* Coluna da galeria elástica (1fr) + info-rail FLUIDO via clamp: encolhe e
     cresce suavemente com a largura do ecrã em vez de saltar de 500→720px.
     Isto resolve o "PC pequeno": antes o rail prendia-se a 500px+ e esmagava
     a galeria; agora o rail acompanha o viewport (36vw) e a foto mantém-se
     sempre maior que o rail em todas as larguras de desktop. */
  grid-template-columns: minmax(0, 1fr) clamp(380px, 36vw, 560px);
  gap: 0;
  padding: 0 var(--gutter);
}
.hero[data-layout="split"] .gallery-column {
  /* Sticky nas DUAS colunas: a mais curta cola no topo, a mais comprida
     faz scroll. O browser escolhe qual fica fixa conforme a altura de cada
     produto (galeria longa → cola o info-rail; info-rail longo → cola a
     galeria). align-self: start impede que a coluna estique até à altura da
     linha — sem isso não haveria folga para "colar". */
  position: sticky;
  top: 84px;
  height: auto;
  overflow: visible;
  background: transparent;
  padding: 0;
  align-self: start;
}
.hero[data-layout="split"] .gallery-column .frames {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.hero[data-layout="split"] .gallery-column .frame {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  max-width: min(100%, calc((100vh - 84px) * 3 / 4));
  margin: 0 auto;
}
.hero[data-layout="split"] .gallery-column .gallery-thumbs { display: none; }
.hero[data-layout="split"] .info-rail {
  /* Horizontal gutter now lives on .hero[data-layout="split"] so the gallery
     and info-rail share the same outer edge as the site header / footer.
     Top padding matches the gallery column's 24px so the info rail's first
     line (Ref.) sits level with the top edge of the product photo. */
  padding: 24px 0 80px var(--gutter);
  /* Par do sticky da .gallery-column acima — ver nota lá. */
  position: sticky;
  top: 84px;
  align-self: start;
}

/* gallery column */
.gallery-column .frames {
  display: grid;
  gap: 12px;
}

.frame {
  position: relative;
  background: var(--sand);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  cursor: zoom-in;
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.frame[data-aspect="wide"]   { aspect-ratio: 4 / 3; }
.frame[data-aspect="square"] { aspect-ratio: 1 / 1; }
.frame img,
.frame > a > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  background: transparent;
  display: block;
}
.frame:hover { transform: scale(0.995); }

/* info rail */
.info-rail {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 14px;                 /* tight base — keeps the identity cluster together */
  padding-top: 8px;
}
/* Grouping rhythm: each block that starts a new "chapter" gets extra air above,
   so the rail reads as distinct zones (identity · price · options · buy · trust · details)
   instead of one evenly-spaced wall. */
.info-rail .price-row   { margin-top: 16px; }
.info-rail form.cart,
.info-rail .variations_form { margin-top: 14px; }
.info-rail .meta-strip  { margin-top: 16px; }
.info-rail .accordion   { margin-top: 16px; }
.info-rail .style-code {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.product-title-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 4px;
  border-top: var(--hairline) solid var(--line);
}
.price-row .price {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.price-row .price del { color: var(--stone); margin-right: 8px; font-weight: 400; font-size: 16px; }
/* A11y contraste: o WooCommerce esbate o preço riscado (regular) para
   opacity .7, deixando-o ~2.8:1 (reprova AA). Mantemos o ar "muted" com um
   token sólido (--stone ≈ 5:1) e opacity total. O prefixo `body` garante
   especificidade acima das regras do WC sem recorrer a !important. */
body.woocommerce div.product p.price del,
body.woocommerce div.product span.price del,
body.woocommerce ul.products li.product .price del,
.cos-grid .cos-card .price del {
  opacity: 1;
  color: var(--stone);
}
.price-row .price ins { text-decoration: none; background: transparent; }
.price-row .tax {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
}
.review-stars {
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--stone);
  text-transform: uppercase;
}
.stars { display: inline-flex; gap: 2px; }
.stars i {
  display: inline-block;
  width: 10px; height: 10px;
  background: var(--ink);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.stars i.empty { background: var(--stone-soft); }

/* swatches (color) */
.swatch-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Cabeçalho do atributo: nome (label) + valor escolhido (current) JUNTOS, à
   esquerda. Antes usava space-between, o que empurrava o valor para a direita. */
.swatch-block .header,
.size-block .header {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
}
/* Valor escolhido: mesma tipografia micro-label do nome (mono, maiúsculas), só
   que em --ink para se destacar como a seleção. Vale para cor, tamanho e
   atributos genéricos — antes o valor herdava a fonte grande do corpo. */
.swatch-block .current,
.size-block .current {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.swatches {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.swatch {
  width: 32px;
  height: 32px;
  border-radius: 0;
  /* Botão de opção interativo: borda normal (1px), não hairline — para o
     controlo ler como clicável e não tão ténue como as linhas estruturais. */
  border: 1px solid var(--line);
  padding: 3px;
  background: transparent;
  position: relative;
  transition: border-color .15s ease;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.swatch i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--c);
  pointer-events: none;
}
.swatch[aria-pressed="true"] {
  /* Selecionado: só escurece a borda (1px), igual ao estado selecionado dos
     tamanhos (.size[aria-pressed="true"]). Sem engrossar para 2px. */
  border-color: var(--ink);
}
.swatch[aria-pressed="true"]::after {
  display: none;
}
.swatch:hover { border-color: var(--stone); }
.swatch[data-low-stock="1"] i::after,
.swatch[disabled] i::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: linear-gradient(135deg, transparent calc(50% - .5px), var(--stone) 50%, transparent calc(50% + .5px));
  opacity: 0.5;
}

/* sizes */
.size-block { display: flex; flex-direction: column; gap: 14px; }
/* O cabeçalho (.header) e o valor (.current) do size-block partilham a regra
   unificada lá em cima (nome + valor juntos, mono/maiúsculas). O guia de
   tamanhos, quando existe, encosta à direita com margin-left:auto. */
.size-block .size-guide { margin-left: auto; }
.size-block .size-guide {
  background: none;
  border: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}
.sizes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.size {
  position: relative;
  padding: 14px 0;
  /* Botão de opção interativo: borda normal (1px), não hairline. */
  border: 1px solid var(--line);
  background: transparent;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-align: center;
  transition: all .15s ease;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;          /* min touch target on mobile */
}
/* Sino "avisar quando voltar" — escondido por defeito; surge só quando a opção
   está esgotada mas continua selecionável (.is-oos). Fica em absoluto no canto
   inferior direito, fora do fluxo, para o texto continuar centrado. A
   especificidade `.size .size-bell` (0,2,0) vence o `.material-symbols-outlined`
   (0,1,0) do Google, que define display:inline-block e empataria. */
.size .size-bell {
  display: none;
  position: absolute;
  right: 4px;
  bottom: 3px;
  /* Sino mais pequeno e mais fino, encostado ao canto para não cruzar o
     texto centrado (ex.: "Azul Escuro"). O 'wght' afina o traço (Material
     Symbols variável); o font-size baixa-o de 16→12px. */
  font-size: 14px;
  font-variation-settings: 'wght' 300, 'opsz' 20, 'GRAD' 0, 'FILL' 0;
  line-height: 1;
  color: var(--stone);
}
.size.is-oos .size-bell { display: block; }
/* Esgotado mas selecionável: texto esbatido, sem X; selecionado mantém destaque. */
.size.is-oos { color: var(--stone-soft); }
.size.is-oos[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.size.is-oos[aria-pressed="true"] .size-bell { color: var(--ink); }
.size:hover { border-color: var(--stone); }
.size[aria-pressed="true"] {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.size[data-out="1"],
.size[disabled] {
  color: var(--stone-soft);
  border-color: var(--line);
  cursor: not-allowed;
}
.size[data-out="1"]::before,
.size[disabled]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top left, transparent calc(50% - .5px), var(--stone-soft) calc(50% - .5px), var(--stone-soft) calc(50% + .5px), transparent calc(50% + .5px));
}
/* Esgotado (sem stock para a combinação atual) — X discreto de canto a canto,
   na mesma cor da borda dos swatches (var(--line)). */
.size.is-oos::before,
.swatch.is-oos i::after {
  background:
    linear-gradient(to top left,  transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to top right, transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + .5px), transparent calc(50% + .5px));
  opacity: 1;
}
.size[data-low="1"]::after {
  content: "LOW";
  position: absolute;
  top: -7px; right: -1px;
  background: var(--ink);
  color: var(--paper);
  font-size: 7px;
  letter-spacing: 0.08em;
  padding: 2px 4px;
}

/* CTA */
.cta-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cta {
  width: 100%;
  padding: 18px 24px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.2em;
  font-weight: 500;
  text-transform: uppercase;
  transition: background .15s ease, transform .15s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  text-decoration: none;
}
.cta:hover { background: var(--ink-soft); }
.cta:disabled,
.cta.disabled {
  background: var(--disabled-bg);
  color: var(--disabled-text);
  cursor: not-allowed;
}
.cta .price-suffix {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 400;
}
.cta.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.cta.secondary:hover { background: var(--ink); color: var(--paper); }

.meta-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding-top: 16px;
  border-top: var(--hairline) solid var(--line);
}
.meta-strip .item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
}
.meta-strip .item strong {
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.06em;
}

/* ── accordions ───────────────────────────────────────────────────────────── */
.accordion {
  border-top: 0;
}
.accordion-item {
  border-bottom: 0;
  /* Permite interpolar block-size: auto → 0 para animar o open/close suave. */
  interpolate-size: allow-keywords;
}
.accordion-item > summary,
.accordion-item > button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.accordion-item > summary::-webkit-details-marker { display: none; }
.accordion-item .plus {
  width: 12px; height: 12px;
  position: relative;
  transition: transform .25s ease;
  display: inline-block;
}
.accordion-item .plus::before,
.accordion-item .plus::after {
  content: "";
  position: absolute;
  background: var(--ink);
  inset: 0;
  margin: auto;
}
.accordion-item .plus::before { height: 1px; }
.accordion-item .plus::after { width: 1px; transition: opacity .2s ease; }
.accordion-item[open] .plus::after { opacity: 0; }
.accordion-item .content {
  overflow: hidden;
}
/* Abertura/fecho suave do <details>. Anima a altura (block-size) e o fade do
   conteúdo. content-visibility com allow-discrete mantém o conteúdo visível
   durante o fecho. Browsers sem suporte a ::details-content ignoram estas
   regras e voltam ao toggle instantâneo nativo — sem quebra. */
.accordion-item::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition: block-size .42s cubic-bezier(.2,.7,.3,1),
              opacity .3s ease,
              content-visibility .42s;
  transition-behavior: allow-discrete;
}
.accordion-item[open]::details-content {
  block-size: auto;
  opacity: 1;
}
.accordion-item .content-inner {
  padding: 4px 0 28px;
  font-size: 14px;
  line-height: 1.65;
  /* Corpo em tom cinza (--stone) para criar contraste com os títulos/subtítulos
     em --ink. Sem isto, --ink-soft (#1c1c1c) é quase igual a --ink e tudo lê
     como a mesma cor (era esse o problema). */
  color: var(--stone);
  max-width: 70ch;
}
.accordion-item .content-inner p { margin: 0 0 12px; }
.accordion-item .content-inner p:last-child { margin-bottom: 0; }
.accordion-item .content-inner ul,
.accordion-item .content-inner ol {
  margin: 8px 0 12px;
  padding-left: 1.2em;
  display: grid;
  gap: 4px;
}
.accordion-item .content-inner ul { list-style: disc; }
.accordion-item .content-inner ol { list-style: decimal; }
.accordion-item .content-inner li {
  color: var(--stone);
}
.accordion-item .content-inner a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* Títulos/subtítulos dentro do conteúdo — destacam-se do corpo cinza:
   --ink, mais peso. Apanha tanto headings (h2–h6) como texto a negrito
   (ex.: "Prazos e Condições:") que o cliente escreva no editor. */
.accordion-item .content-inner h2,
.accordion-item .content-inner h3,
.accordion-item .content-inner h4,
.accordion-item .content-inner h5,
.accordion-item .content-inner h6 {
  font-family: var(--sans);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  margin: 18px 0 8px;
}
.accordion-item .content-inner h2:first-child,
.accordion-item .content-inner h3:first-child,
.accordion-item .content-inner h4:first-child { margin-top: 0; }
.accordion-item .content-inner h2 { font-size: 16px; }
.accordion-item .content-inner h3 { font-size: 15px; }
.accordion-item .content-inner h4,
.accordion-item .content-inner h5,
.accordion-item .content-inner h6 { font-size: 14px; }
.accordion-item .content-inner strong,
.accordion-item .content-inner b { color: var(--ink); font-weight: 600; }

/* Legacy two-column label/value list (meta-style rows inside a panel). */
.accordion-item .content-inner ul.cos-spec-list {
  padding-left: 0;
  list-style: none;
}
.accordion-item .content-inner ul.cos-spec-list li {
  display: grid;
  grid-template-columns: 140px 1fr;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.accordion-item .content-inner ul.cos-spec-list li span:first-child {
  color: var(--stone);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── section wrappers ─────────────────────────────────────────────────────── */
.section {
  padding: 100px var(--gutter);
}
.section.tight { padding: 60px var(--gutter); }
.section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 32px;
  margin-bottom: 48px;
  border-bottom: var(--hairline) solid var(--line);
  padding-bottom: 24px;
}
.section-head .right {
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
}

/* recommendations */
.recs-section { background: var(--paper); }
.recs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.rec-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
}
.rec-card .frame { aspect-ratio: 3 / 4; cursor: pointer; }
.rec-card .rec-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rec-card .rec-name {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.rec-card .rec-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--stone);
  letter-spacing: 0.04em;
}

/* reviews */
.reviews-section { background: var(--paper); }
.reviews-summary {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  align-items: start;
  margin-bottom: 60px;
}
.reviews-summary .score {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reviews-summary .score .big {
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.reviews-summary .score .based {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
}
.review-list { display: grid; gap: 0; }
.review-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  padding: 32px 0;
  border-top: var(--hairline) solid var(--line);
}
.review-card:last-child { border-bottom: var(--hairline) solid var(--line); }
.review-card .who {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
}
.review-card .who strong {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.review-card .body h4 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.review-card .body p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 14px;
  max-width: 70ch;
}

/* ── footer ───────────────────────────────────────────────────────────────── */
.footer {
  background: var(--ink);
  color: var(--paper);
  margin-top: 0;
  /* Full-bleed: a faixa escura rompe o cap de 1800px da .cos-shell e corre
     edge-to-edge (mesma técnica do marquee). O padding lateral usa a fórmula do
     painel de menu do header para recolocar o conteúdo alinhado com a grelha de
     produtos — em ecrãs largos as colunas ficam por cima dos produtos. */
  width: 100vw;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 80px max(var(--gutter), calc((100vw - 1800px) / 2 + var(--gutter))) 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 80px;
}
.footer .footer-col__title {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 18px;
  color: var(--paper);
}
.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2px;             /* o gap encolheu porque o padding do link dá agora o ritmo */
}
.footer li a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--paper-65);
  display: inline-block;
  padding-block: 6px;   /* alvo de toque ≥24px (WCAG 2.5.8) sem aumentar a fonte */
}
.footer li a:hover { color: var(--paper); }
.footer .brand-block .brand {
  color: var(--paper);
  margin-bottom: 18px;
  text-align: left;
}
.footer .brand-block .brand small { color: var(--paper-50); }
/* Logótipo no rodapé (próprio ou herdado do site) — limita para não rebentar o layout. */
.footer .brand-block .brand img,
.footer .brand-block .brand .custom-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 160px;
  max-height: 40px;
}
.footer .brand-block .brand .custom-logo-link { display: inline-block; }
.footer .brand-block p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--paper-65);
  max-width: 38ch;
  margin: 0;
}
/* Tira de logos de pagamento. */
.footer-payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-bottom: 24px;
}
/* .footer prefixo: bate a especificidade do WooCommerce (.woocommerce-page img). */
.footer .footer-payments__logo {
  display: block;
  height: 32px;          /* altura fixa — largura automática mantém a proporção */
  width: auto;
  max-width: 100px;      /* trava logos muito largos */
  object-fit: contain;
  border-radius: 4px;
}

.footer-base {
  border-top: 1px solid var(--paper-15);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-50);
}
.footer-base__credit a { color: var(--paper-65); display: inline-block; padding-block: 6px; }
.footer-base__credit a:hover { color: var(--paper); }

/* "Instalar app" — botão com contorno para destacar no rodapé escuro (o estilo
   de texto do .footer-base tornava-o quase invisível). Revelado por JS só onde
   há instalação possível. [hidden] explícito (o inline-flex vence o [hidden]
   do browser). */
.footer-base__install {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: none;
  border: 1px solid var(--paper-50);
  font: inherit;
  color: var(--paper);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.footer-base__install:hover,
.footer-base__install:focus-visible {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
  outline: none;
}
.footer-base__install .material-symbols-outlined { font-size: 16px; }
.footer-base__install[hidden] { display: none; }

/* ── sticky add-to-cart bar ───────────────────────────────────────────────── */
.stuck-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--paper);
  border-top: 1px solid var(--line-strong);
  padding: 16px var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  z-index: 80;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
  box-shadow: var(--shadow-sticky-bar);
}
/* `none` (não `translateY(0)`): um elemento fixed COM transform fica ancorado à
   layout viewport e deixa de acompanhar a barra dinâmica do browser em mobile.
   Sem transform no estado visível, a barra volta a colar-se ao fundo visível.
   A animação de entrada continua suave (translateY(100%) → none). */
.stuck-bar[data-on="1"] { transform: none; }
.stuck-bar .left {
  display: flex;
  gap: 16px;
  align-items: center;
}
.stuck-bar .mini-frame {
  width: 56px; height: 70px;
  background: var(--sand);
}
.stuck-bar .stuck-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stuck-bar .stuck-name {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.stuck-bar .stuck-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--stone);
  letter-spacing: 0.04em;
}

/* Stuck-bar CTA — same look as the primary in info-rail */
.stuck-bar .cos-stuck-cta {
  width: auto;
  min-width: 220px;
  height: 52px;
  padding: 0 22px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.16em;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  transition: background .15s ease;
}
.stuck-bar .cos-stuck-cta:hover { background: var(--ink-soft); color: var(--paper); }
.stuck-bar .cos-stuck-cta .cta-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  flex: 1;
  text-align: left;
}
.stuck-bar .cos-stuck-cta .cta-text {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.16em;
  font-weight: 500;
  text-transform: uppercase;
}
.stuck-bar .cos-stuck-cta .cta-price {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 400;
  text-transform: none;
  opacity: 0.85;
}
.stuck-bar .cos-stuck-cta .cta-price:empty { display: none; }
.stuck-bar .cos-stuck-cta .cta-icon { font-size: 18px; flex: none; }

/* Disabled variant — keeps the look but communicates "select options" */
.stuck-bar .cos-stuck-cta--disabled {
  background: var(--ink);                  /* still solid ink so it remains clickable visually */
  cursor: pointer;
}
.stuck-bar .cos-stuck-cta--disabled:hover { background: var(--ink-soft); }

/* Sold-out variant — visually muted and non-interactive */
.stuck-bar .cos-stuck-cta--soldout,
.stuck-bar .cos-stuck-cta--soldout:hover {
  background: var(--disabled-bg);
  color: var(--disabled-text);
  cursor: not-allowed;
  opacity: 1;
  pointer-events: none;
}

/* Flash highlight when stuck-bar triggers a scroll to variations */
.cos-flash {
  animation: cos-flash-anim 0.7s ease-out;
}
@keyframes cos-flash-anim {
  0%, 100% { background: transparent; }
  50%      { background: var(--ink-04); }
}

/* ── mini cart drawer ─────────────────────────────────────────────────────── */
.scrim {
  position: fixed;
  inset: 0;
  background: var(--ink-00);
  z-index: 99;
  pointer-events: none;
  transition: background .3s ease;
}
.scrim[data-on="1"] {
  background: var(--overlay-scrim);
  pointer-events: auto;
}
.drawer {
  position: fixed;
  top: 0; bottom: 0; right: 0;
  width: 440px;
  max-width: 100vw;
  /* 100dvh (dynamic viewport) — on mobile browsers 100vh includes the address
     bar / bottom toolbar, which pushed the drawer footer (checkout CTAs) below
     the visible area. dvh tracks the actually-visible height. vh is the
     fallback for older browsers. */
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  background: var(--paper);
  z-index: 100;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-drawer);
}
.drawer[data-on="1"] { transform: translateX(0); }
.drawer-head {
  flex: 0 0 auto;
  padding: 22px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: var(--hairline) solid var(--line);
  background: var(--paper);
}
/* Drawer titles are <p class="drawer-title"> (not headings) so they stay out of
   the document heading outline — they're chrome inside an aria-label'd dialog,
   and as <h3> they polluted the outline before the page <h1>. Specificity bumped
   (.drawer ancestor) to beat global rules that could leak border/padding. */
.drawer .drawer-head .drawer-title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ink);
}
.drawer-close {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
}
.drawer-close .material-symbols-outlined { font-size: 22px; }
.drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 28px;
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.drawer-foot {
  flex: 0 0 auto;
  padding: 18px 28px 22px;
  border-top: var(--hairline) solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--paper);
}
.drawer-foot[hidden] { display: none; }

/* ── Free-shipping progress (shared: cart drawer + product info-rail) ────────
   Deliberately quiet — mono caption + a 2px ink-on-line bar, no colour or
   icons — so it sits inside the editorial chrome without shouting. */
.cos-freeship {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cos-freeship__msg {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
}
.cos-freeship__msg .woocommerce-Price-amount {
  color: var(--ink);
  font-weight: 500;
}
.cos-freeship__bar {
  height: 2px;
  background: var(--line);
  overflow: hidden;
}
.cos-freeship__fill {
  display: block;
  height: 100%;
  background: var(--ink);
  transition: width 0.3s ease;
}
.cos-freeship.is-qualified .cos-freeship__msg { color: var(--ink); }

/* In the drawer the note sits above the subtotal, with a divider below it. */
.drawer-foot .cos-freeship {
  padding-bottom: 12px;
  margin-bottom: 2px;
  border-bottom: var(--hairline) solid var(--line);
}
.drawer-foot .subtotal {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
}
.drawer-foot .subtotal strong {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.drawer-foot .drawer-cta {
  width: 100%;
  height: 56px;
  padding: 0 20px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.drawer-foot .drawer-cta:hover { background: var(--ink-soft); color: var(--paper); }
.drawer-foot .drawer-cta--secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.drawer-foot .drawer-cta--secondary:hover {
  background: var(--ink);
  color: var(--paper);
}
.drawer-foot .drawer-cta .material-symbols-outlined { font-size: 18px; }
.cart-line {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 14px;
  padding: 18px 0;
  border-bottom: var(--hairline) solid var(--line);
}
.cart-line .thumb {
  width: 80px;
  height: 100px;
  background: var(--sand);
  overflow: hidden;
}
.cart-line .thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cart-line .info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cart-line .info .name {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.3;
}
.cart-line .info .name a { color: inherit; }
.cart-line .info .meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--stone);
  letter-spacing: 0.04em;
}
.cart-line .info .meta dl { margin: 0; }
.cart-line .info .meta dt {
  display: inline;
  font-weight: 500;
  margin-right: 4px;
}
.cart-line .info .meta dd { display: inline; margin: 0; }
.cart-line .info .meta dd p { display: inline; margin: 0; }
.cart-line .info .meta dd::after { content: ""; display: block; margin-bottom: 2px; }
.cart-line .info .qty-amount {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 4px;
}
.cart-line .price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
}
.cart-line .remove {
  background: none;
  border: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--stone);
  text-transform: uppercase;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cart-empty {
  text-align: center;
  padding: 60px 0;
  color: var(--stone);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cart-empty .material-symbols-outlined { font-size: 48px; color: var(--stone-soft); margin-bottom: 12px; }
.drawer-loading {
  text-align: center;
  padding: 40px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
}
/* Lock page scroll while drawer is open. The JS also sets `position: fixed` +
   top offset on <body> to fully prevent iOS Safari's rubber-band scroll. */
body.cart-drawer-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  /* `top: -<scrollY>px` is set inline by JS */
}
html.cart-drawer-open { overflow: hidden; }

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  :root { --gutter: 32px; }
  .hero { grid-template-columns: 1fr; }
  /* Drop the hero's side gutter on mobile: the gallery is full-bleed and the
     info-rail already applies its own gutter — keeping both double-padded the
     content. The info-rail is now the single source of horizontal inset. */
  .hero[data-layout="split"] { grid-template-columns: 1fr; padding: 0; }
  .hero[data-layout="split"] .gallery-column {
    position: relative;
    top: 0;
    height: auto;
    min-height: 60vh;
    padding: 16px;
  }
  .hero[data-layout="split"] .info-rail { padding: 40px var(--gutter); }
  .info-rail { position: static; padding-top: 32px; }
  .recs-grid, .reviews-summary {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .recs-grid { grid-template-columns: repeat(2, 1fr); }
  /* Footer em tablet: marca a toda a largura, 4 colunas de links lado a lado. */
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 32px;
    margin-bottom: 56px;
  }
  .footer-grid .brand-block { grid-column: 1 / -1; }
  .review-card { grid-template-columns: 1fr; gap: 16px; }
  .nav-left, .nav-right { gap: 16px; font-size: 11px; }
}

/* Mobile stuck-bar: stack vertically with full-width CTA */
@media (max-width: 720px) {
  .stuck-bar {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px var(--gutter);
  }
  .stuck-bar .left { gap: 12px; }
  .stuck-bar .mini-frame { width: 44px; height: 56px; }
  .stuck-bar .cos-stuck-cta {
    width: 100%;
    min-width: 0;
    height: 50px;
  }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; }
  .sizes { grid-template-columns: repeat(3, 1fr); }
  /* Footer em mobile: 2 colunas de links (marca continua a toda a largura). */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
}

/* ============================================================
   Navigation loader — barra de progresso no topo (nav-loader.js)
   Numa PWA standalone o telemóvel não mostra a barra de loading do
   browser; esta surge no instante do clique e enche até a página
   seguinte pintar, dando feedback imediato de "está a processar".
   Fica acima de tudo (toasts, drawers, scrims) e não bloqueia toques.
   ============================================================ */
.cos-navloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 2147483646;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
.cos-navloader.is-active { opacity: 1; }
.cos-navloader__bar {
  height: 100%;
  width: 0;
  background: var(--ink);
  box-shadow: 0 0 8px var(--ink-40);
  transition: width 200ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .cos-navloader { transition: opacity 120ms linear; }
  .cos-navloader__bar { transition: width 120ms linear; }
  .accordion-item::details-content { transition: none; }
}

/* =========================================================
   COS Style — WooCommerce bridge to Atelier 14 styles
   Loads AFTER atelier.css; maps WC default classes to
   Atelier styles so all WC functionality stays intact.
   ========================================================= */

/* ── Body shell ────────────────────────────────────────── */
.cos-shell {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1800px;
	margin-inline: auto;
}
.cos-main { flex: 1; }

/* ── Remap WooCommerce's form-border variable so every WC input across the
   site picks up the same soft hairline as our editorial inputs (matches the
   coupon field at checkout). Override at .cos-woo so it cascades into every
   WC view (checkout, cart, account, etc.). */
.cos-woo {
	--wc-form-border-color: var(--line-strong);
	--wc-form-border-radius: 0;
	--wc-form-border-width: 1px;
}

/* ── Global override: kill WooCommerce default <ins> and <del> styling ─── */
.cos-woo ins,
.cos-woo .price ins,
.cos-woo .woocommerce-Price-amount,
.cos-woo .woocommerce-Price-currencySymbol,
body.cos-woo bdi {
	background: transparent !important;
	color: inherit;
	text-decoration: none !important;
}
.cos-woo del,
.cos-woo .price del,
.cos-woo del .woocommerce-Price-amount,
.cos-woo del bdi {
	color: var(--stone) !important;
	background: transparent !important;
	text-decoration: line-through !important;
}
.cos-woo ins .woocommerce-Price-amount,
.cos-woo ins bdi {
	color: var(--ink) !important;
}

/* ── Hide WooCommerce default eyesores ─────────────────── */
.cos-woo .onsale,
.cos-woo span.onsale,
.cos-pdp .onsale,
.cos-card .onsale,
.products .onsale { display: none !important; }

.cos-woo .woocommerce-tabs,
.cos-woo .single-product .woocommerce-tabs { display: none !important; }

/* Notices */
.cos-woo .woocommerce-notices-wrapper:empty { display: none; }
.cos-woo .woocommerce-message,
.cos-woo .woocommerce-info,
.cos-woo .woocommerce-error {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	background: var(--paper-soft);
	color: var(--ink);
	border: 0;
	border-left: 3px solid var(--ink);
	padding: 14px 18px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	margin: 16px var(--gutter);
	border-radius: 0;
	list-style: none;
}
/* Neutro (paleta do projeto): traço lateral em ink; só o erro usa o tijolo. */
.cos-woo .woocommerce-message,
.cos-woo .woocommerce-info  { border-left-color: var(--ink); }
.cos-woo .woocommerce-error { border-left-color: var(--error); }
.cos-woo .woocommerce-message::before,
.cos-woo .woocommerce-info::before,
.cos-woo .woocommerce-error::before { display: none; }
/* WC ships a clearfix `::after` (display:table). Under our flex notice layout
   it becomes a third flex item and breaks space-between alignment. */
.cos-woo .woocommerce-message::after,
.cos-woo .woocommerce-info::after,
.cos-woo .woocommerce-error::after { content: none; }

/* Notices recebem foco programático (tabindex=-1) após erros de form
   para acessibilidade — escondemos o outline default azul do browser
   no container porque já temos a `border-left` editorial a sinalizar
   visualmente o notice. Inputs/buttons interactivos mantêm o seu focus. */
.cos-woo .woocommerce-message:focus,
.cos-woo .woocommerce-info:focus,
.cos-woo .woocommerce-error:focus,
.cos-woo .woocommerce-message:focus-visible,
.cos-woo .woocommerce-info:focus-visible,
.cos-woo .woocommerce-error:focus-visible {
	outline: 0;
}

/* Inline action button inside any WC notice — defeat WC/WP's default
   filled-button styling (preto sólido) e `float:right` para que fique
   sempre como link underlined dentro do notice, independentemente da
   classe que o WC injecte (`.button`, `.wc-forward`, `.wp-element-button`)
   ou da tag (`a` vs `button`). */
.cos-woo .woocommerce-message :is(a, button).button,
.cos-woo .woocommerce-info :is(a, button).button,
.cos-woo .woocommerce-error :is(a, button).button,
.cos-woo .woocommerce-message :is(a, button).wp-element-button,
.cos-woo .woocommerce-info :is(a, button).wp-element-button,
.cos-woo .woocommerce-error :is(a, button).wp-element-button {
	display: inline-flex !important;
	align-items: center !important;
	width: auto !important;
	background: transparent !important;
	color: var(--ink) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--ink) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 0 2px !important;
	margin: 0 !important;
	float: none !important;
	font-family: var(--mono) !important;
	font-weight: 400 !important;
	font-size: 11px !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	text-shadow: none !important;
	min-height: 0 !important;
	line-height: 1 !important;
	transition: opacity .15s ease, color .15s ease;
}
.cos-woo .woocommerce-message :is(a, button).button:hover,
.cos-woo .woocommerce-info :is(a, button).button:hover,
.cos-woo .woocommerce-error :is(a, button).button:hover,
.cos-woo .woocommerce-message :is(a, button).wp-element-button:hover,
.cos-woo .woocommerce-info :is(a, button).wp-element-button:hover,
.cos-woo .woocommerce-error :is(a, button).wp-element-button:hover {
	color: var(--stone) !important;
	background: transparent !important;
	border-bottom-color: var(--stone) !important;
	opacity: 1 !important;
}
.cos-woo .woocommerce-message :is(a, button).button:focus-visible,
.cos-woo .woocommerce-info :is(a, button).button:focus-visible,
.cos-woo .woocommerce-error :is(a, button).button:focus-visible {
	outline: 1px solid var(--ink);
	outline-offset: 3px;
}

@media (max-width: 640px) {
	.cos-woo .woocommerce-message,
	.cos-woo .woocommerce-info,
	.cos-woo .woocommerce-error { gap: 6px; }
}

/* ── Breadcrumb ───────────────────────────────────────── */
.cos-woo .woocommerce-breadcrumb {
	padding: 24px var(--gutter) 0;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--stone);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
/* Kill the global clearfix pseudos — under display: flex they become
   0-width flex items and the row gap pushes the first crumb 8px right. */
.cos-woo .woocommerce-breadcrumb::before,
.cos-woo .woocommerce-breadcrumb::after { content: none; }
.cos-woo .woocommerce-breadcrumb a { color: var(--stone); }
.cos-woo .woocommerce-breadcrumb a:hover { color: var(--ink); }
.crumbs .woocommerce-breadcrumb { padding: 0; }

/* ── Shop archive (loop) ──────────────────────────────── */
.cos-shop { padding: 0 0 80px; }
.cos-shop__header {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: end;
	gap: 32px;
	margin: 24px var(--gutter) 32px;
	padding-bottom: 24px;
	border-bottom: var(--hairline) solid var(--line);
}
.cos-shop__title {
	font-family: var(--sans);
	font-size: var(--fs-h1-shop);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0;
}
.cos-shop__toolbar {
	justify-self: end;
	display: flex;
	gap: 20px;
	align-items: center;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--stone);
}

/* Mobile: stack title above toolbar, toolbar items in two rows */
@media (max-width: 720px) {
	.cos-shop__header {
		grid-template-columns: 1fr;
		gap: 16px;
		margin: 16px var(--gutter) 20px;
		padding-bottom: 16px;
	}
	.cos-shop__toolbar {
		justify-self: start;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.cos-shop__toolbar .woocommerce-result-count {
		font-size: 11px;
		color: var(--stone);
	}
	.cos-shop__toolbar form.woocommerce-ordering,
	.cos-shop__toolbar select.orderby,
	.cos-shop__toolbar .orderby {
		width: 100%;
	}
}
.cos-shop__toolbar .woocommerce-result-count { margin: 0; }
.cos-shop__toolbar select,
.cos-shop__toolbar .orderby {
	appearance: none;
	border: 1px solid var(--ink);
	background: transparent;
	padding: 10px 32px 10px 14px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23111' d='M0 0h10L5 6z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
	cursor: pointer;
}

.cos-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px 14px;
	padding: 0 var(--gutter);
}
@media (max-width: 1100px) {
	.cos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* Tablet/mobile: imagens da loja edge-to-edge (sem gutter lateral na grelha).
	   O texto do cartão recupera o gutter, alinhando com o título/ordenação do
	   header e evitando que cole às margens. Limitado a .cos-shop para não tocar
	   nos cross-sells/relacionados (que partilham .cos-grid). */
	.cos-shop .cos-grid,
	.cos-related .cos-grid { padding-inline: 0; }
	.cos-shop .cos-card__meta,
	.cos-related .cos-card__meta { padding: 0 var(--gutter) 12px; }
}
@media (max-width: 720px)  { .cos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* Product card */
.cos-card { display: flex; flex-direction: column; background: transparent; border: 0; }
.cos-card__link {
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: inherit;
}
.cos-card__link:hover { color: inherit; text-decoration: none; }
.cos-card__media {
	position: relative;
	aspect-ratio: 3 / 4;
	background: var(--sand);
	overflow: hidden;
	transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.cos-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform .6s ease;
}
.cos-card__badge {
	position: absolute;
	top: 0; left: 0;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: var(--paper-92);
	color: var(--ink);
	padding: 10px 7px;
	z-index: 2;
	/* Rótulo vertical a ler de baixo para cima, encostado à margem esquerda. */
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}
.cos-card__badge--soldout {
	background: var(--ink);
	color: var(--paper);
}

/* Card image slider — featured + gallery + variation images.
   Slides sit in a flex track that translates one image-width at a time. */
.cos-card__slides {
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform 0.45s cubic-bezier(.2,.7,.3,1);
}
.cos-card__slides > img {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
/* O vídeo do produto é um slide como os outros (mesmo sizing das imagens):
   preenche a caixa 3:4 do card. Reproduz mudo + loop, autoplay quando visível. */
.cos-card__slides > video {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	background: var(--sand);
}
/* Minimalist prev/next arrows — revealed on hover (desktop), shown on touch.
   Full-height edge strips (COS-style): the whole left/right column of the photo
   is a generous tap target that pages the carousel; the chevron sits centred. */
.cos-card__nav {
	position: absolute;
	top: 0;
	bottom: 0;
	height: 100%;
	z-index: 3;
	width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease;
	/* White chevron that auto-inverts against the photo behind it (COS-style):
	   white on dark images, black on light ones. The blend lives on the button
	   (not the svg): the button is its own stacking context (positioned + z-index),
	   so blending the whole group composites it against the product image, while a
	   blend on the isolated child svg would only mix against the transparent button. */
	mix-blend-mode: difference;
}
.cos-card__nav--prev { left: 0; }
.cos-card__nav--next { right: 0; }
.cos-card__nav svg { width: 22px; height: 22px; }
.cos-card:hover .cos-card__nav,
.cos-card__nav:focus-visible { opacity: 1; }
.cos-card__nav:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }

/* No hover on touch devices — keep the arrows always visible. The blend-mode
   icon stays legible against any photo (white on dark, black on light). */
@media (hover: none) {
	.cos-card__nav,
	.cos-card__nav:hover { opacity: 1; }
}
/* Card meta — title on top, price beneath. Stacked at every breakpoint so
   long product names never get squeezed by the price on the right. */
.cos-card__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 2px 12px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.cos-card__title {
	margin: 0;
	font-family: var(--sans);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--ink);
	line-height: 1.3;
	overflow-wrap: anywhere;
	min-width: 0;
}
.cos-card__meta .price,
.cos-card__meta .price *,
.cos-card__meta .price ins,
.cos-card__meta .price ins *,
.cos-card__meta .price del,
.cos-card__meta .price del *,
.cos-card__meta .price bdi,
.cos-card__meta .price .amount,
.cos-card__meta .price .woocommerce-Price-amount,
.cos-card__meta .price .woocommerce-Price-currencySymbol {
	font-family: var(--mono);
	color: var(--ink);
	font-weight: 400;
	background: transparent;
	text-decoration: none;
}
.cos-card__meta .price {
	font-size: 12px;
	white-space: nowrap;
	text-align: left;
	display: inline-flex;
	gap: 6px;
	align-items: baseline;
}
.cos-card__meta .price del,
.cos-card__meta .price del * {
	color: var(--stone);
	text-decoration: line-through;
	font-size: 11px;
}
.cos-card__meta .price ins,
.cos-card__meta .price ins * {
	color: var(--ink);
	text-decoration: none;
	background: transparent;
}
.cos-card__meta .price .woocommerce-price-suffix,
.cos-card__meta .price small,
.cos-card__meta .price .screen-reader-text { display: none !important; }

/* Tablet ≤1100px: slightly smaller title/price */
@media (max-width: 1100px) {
	.cos-card__title { font-size: 12px; }
	.cos-card__meta .price { font-size: 11px; }
	.cos-card__meta .price del { font-size: 10px; }
}

/* Mobile ≤720px: repõe o tamanho do tipo de letra que o tablet reduziu. O
   recuo lateral do texto da loja é tratado pela regra .cos-shop em ≤1100px
   (gutter); aqui o padding base só serve cartões fora da loja (ex.: cross-sells). */
@media (max-width: 720px) {
	.cos-card__meta {
		gap: 4px;
		padding: 0 2px 12px;
	}
	.cos-card__title {
		font-size: 13px;
		letter-spacing: 0.04em;
	}
	.cos-card__meta .price { font-size: 12px; }
	.cos-card__meta .price del { font-size: 11px; }
}

/* Pagination — mesmo estilo da paginacao das avaliacoes.
   Seletores com especificidade alta (body.cos-woo + cadeia ul/li) para vencer
   o woocommerce.css core, que pintava o .current de lilas e juntava as bordas. */
body.cos-woo nav.woocommerce-pagination {
	padding: 40px var(--gutter);
	text-align: center;
}
body.cos-woo nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}
body.cos-woo nav.woocommerce-pagination ul li {
	margin: 0;
	display: inline-flex;
	border: 0;
}
body.cos-woo nav.woocommerce-pagination ul li a,
body.cos-woo nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	margin: 0;
	border: var(--hairline) solid var(--line);
	border-radius: 0;
	background: transparent;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	line-height: 1;
	color: var(--ink);
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
body.cos-woo nav.woocommerce-pagination ul li a:hover,
body.cos-woo nav.woocommerce-pagination ul li a:focus {
	background: transparent;
	color: var(--ink);
	border-color: var(--stone);
}
body.cos-woo nav.woocommerce-pagination ul li span.current {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}
body.cos-woo nav.woocommerce-pagination ul li span.dots {
	border-color: transparent;
	color: var(--stone);
}

/* ── Material Symbols icon font ───────────────────────── */
.material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	user-select: none;
	color: inherit;
	vertical-align: middle;
}

/* Size-guide button icon */
.size-guide {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.size-guide .size-guide-arrow {
	font-size: 14px;
	line-height: 1;
	transform: translateY(-1px);
}

/* Defensive: kill any emoji <img> WP injects despite the filter */
.size-guide img.emoji,
.cta img.emoji,
.cos-pdp img.emoji,
.info-rail img.emoji,
.accordion-item img.emoji,
.reviews-section img.emoji { display: none !important; }

/* Header nav icons — Shopify-style: thin outline, no hover transforms */
.nav-inner {
	height: 54px;
	padding-block: 7px;
}
.nav-menu {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav-menu a,
.nav-menu__fallback {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	text-decoration: none;
}

/* ── Desktop mega-menu ──────────────────────────────────────────────────────
   A single top-level opener (e.g. "Loja") reveals a full-width panel holding
   the categories in columns. Second-level items are column headings; their
   children render as a static link list beneath. The panel is positioned
   against .nav (sticky → containing block) so it spans the viewport, while its
   inner padding re-aligns the first column with the nav content. */

/* Top-level opener: a <button> (not a navigating link) that toggles the panel,
   styled to match the nav links, with a chevron. */
.nav-menu > .menu-item-has-children { position: static; }
.nav-menu .cos-nav-opener {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	cursor: pointer;
}
.nav-menu .cos-nav-opener:hover { color: var(--stone); }
.nav-menu .cos-nav-opener::after {
	content: "";
	width: 5px;
	height: 5px;
	margin-left: 8px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
	opacity: 0.7;
}
.nav-menu > .menu-item-has-children.is-open .cos-nav-opener::after {
	transform: translateY(1px) rotate(225deg);
	opacity: 1;
}

/* The mega panel (first-level submenu) — a slim full-width strip of category
   links, the same visual height as the nav bar (one row, compact padding).
   Flush against the bar's bottom, with a subtly different background tint so it
   reads as a distinct surface (desktop only — the panel never shows on mobile). */
.nav-menu > .menu-item-has-children > .sub-menu {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 44px;
	padding: 17px max(var(--gutter), calc((100vw - 1800px) / 2 + var(--gutter)));
	background: var(--sand);
	border: 0;
	/* Separação entre a barra do menu e o painel: a border-bottom da .nav fica
	   tapada pelo painel (z-index maior), por isso o painel traz a sua própria
	   linha no topo, com a MESMA cor da border do header (--line), edge-to-edge. */
	border-top: var(--hairline) solid var(--line);
	box-shadow: var(--shadow-megamenu);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.25s;
	z-index: 70;
}
/* Invisible bridge over the bar's bottom padding so the panel stays open while
   the pointer travels from the opener down into it. */
.nav-menu > .menu-item-has-children > .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -16px;
	height: 16px;
}
.nav-menu > .menu-item-has-children.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.nav-menu > .menu-item-has-children > .sub-menu > li { margin: 0; }
.nav-menu > .menu-item-has-children > .sub-menu > li > a {
	display: inline-flex;
	align-items: center;
	min-height: 0;
	padding: 0;
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500;
	white-space: nowrap;
	color: var(--ink);
	transition: color 0.15s ease;
}
/* Same hover as the top nav-bar links. */
.nav-menu > .menu-item-has-children > .sub-menu > li > a:hover { color: var(--stone); }
.nav-menu-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--ink);
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}
.nav-menu-toggle__lines {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 12px;
	border-top: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
}
.nav-menu-toggle__lines::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	border-top: 1px solid currentColor;
	transform: translateY(-50%);
}
.nav-menu-toggle__text {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.nav-right {
	gap: 4px;
}
.nav-right .nav-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ink);
	width: 40px;
	height: 40px;
	position: relative;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	border-radius: 0;
	transition: color 0.2s ease;
}
.nav-right .nav-icon:hover,
.nav-right .nav-icon:focus { color: var(--stone); transform: none; }
.nav-right .nav-icon:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.nav-right .nav-icon-glyph {
	display: block;
	position: relative;
	z-index: 1;
	width: 19px;
	height: 19px;
}

/* Cart badge — round count beside the icon, Shopify-style */
.nav-right .nav-icon .cart-dot {
	position: absolute;
	z-index: 2;
	top: 2px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: transparent;
	color: var(--ink);
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.cos-mobile-nav-scrim {
	position: fixed;
	inset: 0;
	z-index: 101;
	background: var(--overlay-scrim);
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}
.cos-mobile-nav-scrim[data-open="1"] {
	opacity: 1;
	pointer-events: auto;
}
.cos-mobile-nav {
	position: fixed;
	/* Abre da ESQUERDA — mesmo lado do botão ☰ no cabeçalho. (O cart drawer
	   continua a abrir da direita, junto ao ícone do carrinho.) */
	inset: 0 auto 0 0;
	z-index: 102;
	width: min(420px, calc(100vw - 28px));
	height: 100dvh;
	background: var(--paper);
	border-right: var(--hairline) solid var(--line);
	box-shadow: 10px 0 32px var(--ink-18);
	transform: translateX(-100%);
	/* Mesma suavidade do cart drawer (.35s, mesma curva) — antes (.28s) abria
	   demasiado depressa. */
	transition: transform .35s cubic-bezier(.2,.7,.3,1);
	display: flex;
	flex-direction: column;
}
.cos-mobile-nav[data-open="1"] { transform: translateX(0); }
.cos-mobile-nav__head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 72px;
	padding: 0 24px;
	border-bottom: var(--hairline) solid var(--line);
}
.cos-mobile-nav__brand {
	min-width: 0;
	color: var(--ink);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0.32em;
	line-height: 1;
	text-transform: uppercase;
}
.cos-mobile-nav__brand .custom-logo-link,
.cos-mobile-nav__brand > a {
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
}
.cos-mobile-nav__brand img {
	display: block;
	width: auto;
	max-width: 150px;
	max-height: 34px;
}
/* Logótipo no header (desktop) — limita a imagem do custom-logo. */
.brand .custom-logo,
.brand img {
	display: block;
	width: auto;
	height: auto;
	max-width: 160px;
	max-height: 34px;
}
.cos-mobile-nav__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -12px;
	background: transparent;
	border: 0;
	color: var(--ink);
	cursor: pointer;
}
.cos-mobile-nav__close .material-symbols-outlined { font-size: 22px; }
.cos-mobile-nav__section {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 18px 24px 28px;
}
.cos-mobile-nav__menu {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cos-mobile-nav__menu a,
.cos-mobile-nav__link {
	display: flex;
	align-items: center;
	min-height: 58px;
	border-bottom: var(--hairline) solid var(--line);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

/* ── Mobile menu — navegação drill-down (painéis deslizantes) ────────────────
   A secção é o viewport (recorta na horizontal); cada nível é um painel à
   largura total. is-active = à vista; is-left = empurrado para fora à esquerda;
   o resto fica fora do ecrã à direita. Lógica em assets/js/site-header.js. */
.cos-mobile-nav__menu .cos-nav-opener {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 58px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-bottom: var(--hairline) solid var(--line);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
}

.cos-mobile-nav__section.cos-drill-root {
	position: relative;
	overflow: hidden;
	padding: 0;
}
.cos-drill-panel {
	position: absolute;
	inset: 0;
	width: 100%;
	margin: 0;
	padding: 18px 24px 28px;
	list-style: none;
	background: var(--paper);
	overflow-x: hidden;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.cos-drill-panel.is-active { transform: translateX(0); }
.cos-drill-panel.is-left { transform: translateX(-100%); }
/* O menu raiz é display:grid; como painel ocupa toda a altura e o grid esticava
   as linhas (espaços enormes). Forçar block para os itens encostarem ao topo. */
.cos-mobile-nav__menu.cos-drill-panel { display: block; }

/* Seta "›" nos itens que abrem outro nível (Categorias, Vestuário, Calçado…). */
.cos-drill-parent::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	opacity: 0.5;
}

/* Itens dentro de um subpainel: tratamento único e consistente. */
.cos-drill-sub > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 54px;
	border-bottom: var(--hairline) solid var(--line);
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
}
.cos-drill-sub > li > a:hover { color: var(--stone); }

/* Cabeçalho "‹ Voltar" no topo de cada subpainel. */
.cos-drill-head { margin-bottom: 6px; }
.cos-drill-back {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--ink);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
}
.cos-drill-back__icon {
	flex: none;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(135deg); /* aponta para a esquerda */
}

/* "Ver tudo em X" — primeira linha do subpainel, secundária. */
.cos-drill-sub > li.cos-drill-all > a {
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--ink-soft);
}
.cos-drill-sub > li.cos-drill-all > a::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	opacity: 0.5;
}
/* ── Rodapé do sidebar mobile: ações de utilizador ──────────────────────────
   No desktop os ícones de favoritos/conta vivem no header; em ≤1100px passam
   para aqui, deixando o header só com lupa + carrinho + botão de menu.
   Estrutura: [util: Favoritos] + [account: saudação + CTA + logout]. */
.cos-mobile-nav__foot {
	flex: 0 0 auto;
	display: grid;
	gap: 16px;
	padding: 12px 24px 24px;
	border-top: var(--hairline) solid var(--line);
}

/* Conta — saudação (texto), CTA full-width (.cos-btn), link de logout. */
.cos-mobile-nav__account {
	display: grid;
	gap: 10px;
}
.cos-mobile-nav__account-greeting {
	margin: 0;
	font-family: var(--sans);
	font-size: 15px;
	color: var(--ink-soft);
}
.cos-mobile-nav__account-greeting strong {
	font-weight: 600;
	color: var(--ink);
}
.cos-mobile-nav__account-cta {
	width: 100%;
	gap: 12px;
}
.cos-mobile-nav__account-logout {
	justify-self: center;
	padding: 2px 8px;
	color: var(--ink-soft);
	font-family: var(--sans);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cos-mobile-nav__account-logout:hover,
.cos-mobile-nav__account-logout:focus-visible {
	color: var(--ink);
}

html.site-nav-open,
body.site-nav-open {
	overflow: hidden;
}

@media (min-width: 1101px) {
	.cos-mobile-nav,
	.cos-mobile-nav-scrim {
		display: none !important;
	}
}

@media (max-width: 1100px) {
	.nav-inner {
		/* Colunas laterais iguais (1fr) → o logo (col central auto) fica
		   centrado no viewport mesmo com ☰ à esquerda e 3 ícones à direita
		   de larguras diferentes. */
		grid-template-columns: 1fr auto 1fr;
		height: 54px;
		min-height: 0;
		padding-block: 5px;
	}
	.nav-left {
		display: none;
	}
	/* Layout tablet/mobile: ☰ à esquerda (col 1), logo ao centro (col 2),
	   ícones à direita (col 3). */
	.nav-menu-toggle {
		display: inline-flex;
		grid-column: 1;
		justify-self: start;
		/* Glifo centrado na caixa de 44px → ~12px de inset desde a margem,
		   espelhando o inset dos ícones do lado direito (simetria visual). */
		justify-content: center;
	}
	.brand {
		grid-column: 2;
		justify-self: center;
		text-align: center;
		font-size: 13px;
		letter-spacing: 0.28em;
	}
	.nav-right {
		grid-column: 3;
		justify-self: end;
		gap: 4px;
	}
	.nav-menu-toggle__text {
		display: none;
	}
	.nav-right .nav-icon {
		width: 44px;
		height: 44px;
	}
	/* A Conta sai do header e passa para o rodapé do sidebar (lá tem saudação +
	   CTA de login/logout). O coração de Favoritos fica no header, junto aos
	   restantes ícones. */
	.nav-right .nav-icon--account {
		display: none;
	}
}

@media (max-width: 480px) {
	.nav-inner {
		grid-template-columns: 1fr auto 1fr;
		height: 52px;
		min-height: 0;
		padding-block: 4px;
	}
	.nav-menu-toggle {
		width: 38px;
		justify-content: center;
	}
	.nav-right {
		gap: 4px;
	}
	.nav-right .nav-icon {
		width: 38px;
		height: 44px;
	}
	.nav-right .nav-icon-glyph {
		width: 19px;
		height: 19px;
	}
	.brand {
		font-size: 12px;
		letter-spacing: 0.24em;
	}
}

/* Nota de acessibilidade: por opção do cliente, mantemos as animações mesmo com
   "Reduzir movimento" ativo — a marquee promocional (.utility-track) continua a
   correr e o menu móvel (.cos-mobile-nav) mantém a transição de abertura suave
   (igual ao cart drawer). Não há, por isso, override de prefers-reduced-motion
   para estes elementos. */

/* ── Toast notices (mobile-first) ─────────────────────────────────────────────
   Bottom full-width on phones; bottom-right on desktop. Newest sits nearest the
   screen edge. All WooCommerce notices are funnelled here (see cos-toasts.js). */
.cos-toasts {
	position: fixed;
	z-index: 1000;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column-reverse;
	gap: 8px;
	padding: 12px;
	pointer-events: none;
}
.cos-toast {
	position: relative;
	pointer-events: auto;
	overflow: hidden;
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--line-strong);
	border-left: 3px solid var(--ink);    /* accent colour set per type below */
	border-radius: 0;
	padding: 13px 42px 13px 16px;         /* extra right padding clears the ✕ */
	font-family: var(--sans);
	font-size: 13px;
	line-height: 1.45;
	letter-spacing: 0.01em;
	box-shadow: var(--shadow-popover);
	cursor: pointer;                      /* click anywhere to dismiss */
	transform: translateY(14px);
	opacity: 0;
	transition: transform .28s cubic-bezier(.2,.7,.3,1), opacity .28s ease;
}
.cos-toast.is-in { transform: translateY(0); opacity: 1; }
.cos-toast.is-leaving { transform: translateY(14px); opacity: 0; }
/* Com o cart drawer aberto, ele já mostra o cesto atualizado (linha nova +
   subtotal), por isso um toast de sucesso é redundante e tapa o subtotal/CTA.
   Escondemo-los enquanto o drawer está aberto — apanha também os que já estavam
   visíveis quando o drawer abre (o guard em cos-toasts.js só trava os novos).
   Erros mantêm-se visíveis. */
body.cart-drawer-open .cos-toast--success { display: none; }

/* Neutro (paleta do projeto): traço ink por defeito; só o erro usa o tijolo. */
.cos-toast--error { border-left-color: var(--error); }
.cos-toast--error .cos-toast__bar { background: var(--error); }
.cos-toast__body p { margin: 0; }
/* Any link or WC button inside a toast renders as a simple inline underlined
   link — neutralises WooCommerce's big "Ver carrinho" .button.wc-forward. */
.cos-toast :is(a, .button, .wc-forward, .wp-element-button),
body.cos-woo .cos-toast :is(a, button).button {
	display: inline !important;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	margin: 0 0 0 2px !important;
	padding: 0 !important;
	background: transparent !important;
	color: var(--ink) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: var(--sans) !important;
	font-size: inherit !important;
	font-weight: 500 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
	white-space: nowrap !important;   /* "Ver carrinho" nunca parte a meio */
}
.cos-toast :is(a, .button):hover { color: var(--stone) !important; }
/* Explicit close (✕) — clear, reliable dismiss on touch where there is no
   hover. Sits in the top-right corner; the toast's right padding keeps text
   from running under it. */
.cos-toast__close {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--ink);
	opacity: 0.55;
	cursor: pointer;
	z-index: 2;
}
.cos-toast__close:hover,
.cos-toast__close:focus-visible { opacity: 1; }
.cos-toast__close .material-symbols-outlined { font-size: 19px; }
/* Auto-dismiss progress bar */
.cos-toast__bar {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	background: var(--ink-18);
	transform-origin: left center;
	animation: cos-toast-bar linear forwards;
}
@keyframes cos-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (min-width: 720px) {
	.cos-toasts {
		left: auto;
		right: 24px;
		bottom: 24px;
		max-width: 380px;
		padding: 0;
	}
	.cos-toast { min-width: 300px; }
}

@media (prefers-reduced-motion: reduce) {
	.cos-toast { transition: opacity .2s ease; transform: none; }
	.cos-toast.is-leaving { transform: none; }
	.cos-toast__bar { animation: none; }
}

/* Mega-menu em colunas — alinhamento e estilos.
   Colunas de largura igual, alinhadas ao topo. Cada seccao tem um titulo
   sublinhado e a lista de subcategorias por baixo, sempre visivel. */
@media (min-width: 1101px) {
	.nav-menu > .menu-item-has-children > .sub-menu {
		justify-content: space-between;
		align-items: flex-start;
		gap: 38px 24px;
		padding-top: 38px;
		padding-bottom: 42px;
	}
	/* Cada filho direto do painel = uma coluna de largura fixa */
	.nav-menu > .menu-item-has-children > .sub-menu > li {
		display: flex;
		flex-direction: column;
		flex: 0 0 180px;
		gap: 16px;
	}
	/* Titulo da coluna (Vestuario, Calcado... e links sem filhos) */
	.nav-menu > .menu-item-has-children > .sub-menu > li > a {
		font-weight: 600;
		color: var(--ink);
		padding-bottom: 12px;
		border-bottom: var(--hairline) solid var(--line);
		white-space: normal;
		line-height: 1.3;
	}
	/* Lista de subcategorias: vertical, sempre visivel, sem painel proprio */
	.nav-menu > .menu-item-has-children > .sub-menu .sub-menu {
		position: static;
		display: flex;
		flex-direction: column;
		gap: 11px;
		margin: 0;
		padding: 0;
		background: none;
		box-shadow: none;
		border: 0;
	}
	.nav-menu > .menu-item-has-children > .sub-menu .sub-menu::before { content: none; }
	/* Links das subcategorias: mais leves que o titulo, podem quebrar linha */
	.nav-menu > .menu-item-has-children > .sub-menu .sub-menu > li > a {
		display: block;
		min-height: 0;
		padding: 0;
		font-family: var(--sans);
		font-size: 13px;
		font-weight: 400;
		letter-spacing: 0.01em;
		text-transform: none;
		line-height: 1.25;
		white-space: normal;
		color: var(--ink-soft);
		transition: color 0.15s ease;
	}
	.nav-menu > .menu-item-has-children > .sub-menu .sub-menu > li > a:hover { color: var(--ink); }
}


/* Subcategorias: sem marcador quadrado (efeito de hover animado removido). */
@media (min-width: 1101px) {
	.nav-menu > .menu-item-has-children > .sub-menu .sub-menu > li {
		list-style: none;
	}
}


/* Mega menu: flat e branco (sem sombra). Linha fina por baixo para separar. */
@media (min-width: 1101px) {
	.nav-menu > .menu-item-has-children > .sub-menu {
		background: var(--paper);
		box-shadow: none;
		border-bottom: var(--hairline) solid var(--line);
	}
}

/* Nota: a hierarquia tipográfica e o acordeão de todos os níveis do menu
   mobile vivem agora nas regras-base de .cos-mobile-nav__menu (acima). Os
   blocos @media antigos que duplicavam/contradiziam essas regras (incluindo um
   max-height:none que mantinha os submenus sempre abertos e quebrava o chevron)
   foram removidos para um sistema único e coerente. */

/* ═══ Cabeçalho alternativo (.nav--alt) ═══════════════════════════════════════
   Escolhido em Personalizar → Cabeçalho. DESKTOP: lupa à esquerda · logo ao
   centro · ícones à direita; o menu de categorias passa para um 2.º andar
   centrado (estilo Shopify). MOBILE: idêntico ao padrão — a .nav-left esconde-se
   a ≤1100px (regra existente) e a lupa volta ao grupo da direita.
   A tipografia do menu é a MESMA do cabeçalho padrão (maiúsculas); só muda o
   layout, conforme pedido. */

/* O 2.º andar só aparece em desktop (ver media query abaixo). */
.nav-alt-row { display: none; }

/* A lupa da esquerda reaproveita o visual dos ícones da direita. */
.nav-left--search { align-items: center; }
.nav-left--search .nav-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--ink);
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: color 0.2s ease;
}
.nav-left--search .nav-icon:hover,
.nav-left--search .nav-icon:focus { color: var(--stone); }
.nav-left--search .nav-icon:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.nav-left--search .nav-icon-glyph { display: block; width: 19px; height: 19px; }

@media (min-width: 1101px) {
	.nav--alt .nav-left--search { justify-content: flex-start; }
	/* A lupa migrou para a esquerda → esconde a do grupo da direita. */
	.nav--alt .nav-right .nav-icon--search { display: none; }
	/* 2.º andar: menu de categorias centrado, com linha a separar do 1.º andar. */
	.nav--alt .nav-alt-row {
		display: flex;
		justify-content: center;
		border-top: var(--hairline) solid var(--line);
		padding: 0 var(--gutter);
		font-size: 12px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		font-weight: 500;
	}
	.nav--alt .nav-alt-row .nav-menu {
		justify-content: center;
		flex-wrap: wrap;
		gap: 28px;
		padding-block: 8px;
	}
	/* Os links/openers trazem min-height:40px (regra-base), que mandava na altura
	   mesmo com pouco padding. Reduz aqui para o 2.º andar ficar mais baixo. */
	.nav--alt .nav-alt-row .nav-menu a,
	.nav--alt .nav-alt-row .nav-menu .cos-nav-opener {
		min-height: 36px;
	}
}

/* ── Header alternativo: logótipo maior em repouso, encolhe no scroll ─────────
   No topo da página o 1.º andar fica mais alto e o logo maior; assim que há
   scroll a .nav recebe `is-scrolled` (site-header.js) e tudo volta ao tamanho
   inicial (logo 34px) com uma transição suave. Só desktop e só no alternativo. */
@media (min-width: 1101px) {
	.nav--alt .nav-inner {
		height: 88px;
		padding-block: 0;
		transition: height 0.25s ease;
	}
	.nav--alt.is-scrolled .nav-inner { height: 54px; }

	.nav--alt .brand .custom-logo,
	.nav--alt .brand img {
		max-height: 56px;
		max-width: 240px;
		transition: max-height 0.25s ease, max-width 0.25s ease;
	}
	.nav--alt.is-scrolled .brand .custom-logo,
	.nav--alt.is-scrolled .brand img {
		max-height: 34px;
		max-width: 160px;
	}

	/* Fallback de texto (sites sem imagem de logótipo) também aumenta. */
	.nav--alt .brand { transition: font-size 0.25s ease; }
	.nav--alt:not(.is-scrolled) .brand { font-size: 22px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Share row — componente partilhado (página de produto + favoritos).

   Rótulo no sistema de micro-labels (mono, maiúsculas, --stone) seguido dos
   logótipos OFICIAIS das redes em botões discretos com contorno hairline.
   Monocromático por opção editorial: a cor reage ao hover (--stone → --ink).
   ────────────────────────────────────────────────────────────────────────── */
.cos-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 16px;
}
.cos-share__label {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--stone);
	font-weight: 400;
}
.cos-share__list {
	display: flex;
	align-items: center;
	gap: 8px;
}
/* Botão de cada rede: 40×40 com contorno hairline, cantos retos. */
.cos-share-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	background: none;
	border: var(--hairline) solid var(--line);
	border-radius: 0;
	color: var(--stone);
	cursor: pointer;
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.cos-share-item:hover,
.cos-share-item:focus-visible {
	color: var(--ink);
	border-color: var(--line-strong);
	background: var(--ink-04);
	outline: none;
}
.cos-share-item:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.cos-share-item svg { width: 13px; height: 13px; display: block; }

@media (prefers-reduced-motion: reduce) {
	.cos-share-item { transition: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   PWA — mini-guia de instalação no iOS (sem API: instruções "Adicionar ao
   ecrã principal"). Bottom sheet, identidade do tema.
   ────────────────────────────────────────────────────────────────────────── */
.cos-pwa-ios { position: fixed; inset: 0; z-index: 1000; display: none; }
.cos-pwa-ios.is-open { display: block; }
.cos-pwa-ios__backdrop { position: absolute; inset: 0; background: var(--overlay-scrim); }
.cos-pwa-ios__card {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	width: 100%;
	max-width: 460px;
	background: var(--paper);
	color: var(--ink);
	padding: 28px 24px calc(28px + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -12px 40px var(--ink-18);
	animation: cos-pwa-ios-in .22s ease;
}
@keyframes cos-pwa-ios-in {
	from { transform: translateY(12px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}
.cos-pwa-ios__close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: 0;
	font-size: 28px;
	line-height: 1;
	color: var(--stone);
	cursor: pointer;
}
.cos-pwa-ios__close:hover { color: var(--ink); }
.cos-pwa-ios__title { font-family: var(--sans); font-size: 18px; font-weight: 500; letter-spacing: 0.01em; margin: 0 0 6px; }
.cos-pwa-ios__intro { color: var(--stone); font-size: 14px; line-height: 1.5; margin: 0 0 16px; }
.cos-pwa-ios__steps { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.cos-pwa-ios__steps li { margin: 0 0 10px; }
.cos-pwa-ios__steps li:last-child { margin-bottom: 0; }
.cos-pwa-ios__steps svg { vertical-align: -4px; margin-left: 2px; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
	.cos-pwa-ios__card { animation: none; }
}

/* ── PDP — Breadcrumb (now lives inside .hero so it can sit below the photo
   on mobile). Desktop: spans the full top row above both columns; the hero
   already supplies the side gutter, so no horizontal padding here. ── */
.hero[data-layout="split"] > .crumbs {
	grid-column: 1 / -1;
	padding: 24px 0 0;
	margin: 0;
}

/* ── PDP — Swiper gallery (1.5 slides peek, full-bleed on mobile/tablet) ── */
.hero[data-layout="split"] .gallery-column {
	padding: 24px 0;
	background: transparent;
	overflow: hidden;
}
.hero[data-layout="split"] .gallery-column .frames {
	height: 100%;
	width: 100%;
	/* Left edge aligns with the site gutter (SHOP / breadcrumb); 24px on the
	   right keeps a small breathing gap between the gallery and the info-rail. */
	padding: 0 24px 0 0;
}

/* Tablet + Mobile: full bleed — gallery uses the entire viewport width,
   no top padding, no side padding, sits flush under the header. */
@media (max-width: 1100px) {
	.hero[data-layout="split"] {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.hero[data-layout="split"] .gallery-column {
		position: relative;
		top: 0;
		height: auto;
		padding: 0;
		margin: 0;
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
	/* Single column abaixo de 1100px → desliga o sticky das duas colunas. */
	.hero[data-layout="split"] .info-rail {
		position: static;
		top: auto;
	}
	.hero[data-layout="split"] .gallery-column .frames {
		padding: 0;
		width: 100%;
		max-width: 100vw;
	}
	/* Hero loses its side gutter on mobile/tablet, so the breadcrumb supplies
	   its own. 16px below it separates it cleanly from the full-bleed photo. */
	.hero[data-layout="split"] > .crumbs {
		padding: 16px var(--gutter);
	}
	/* image stretches the full viewport — kill max-height that was for sticky desktop */
	.hero[data-layout="split"] .gallery-column .cos-gallery-slide {
		max-height: none;
	}
	/* compact gallery arrows + counter on small screens */
	.cos-gallery-arrow { width: 36px; height: 36px; }
	.cos-gallery-arrow.swiper-button-prev { left: 8px; }
	.cos-gallery-arrow.swiper-button-next { right: 8px; }
	.cos-gallery-counter { bottom: 10px; font-size: 10px; padding: 4px 10px; }
}

/* Tablet/Mobile: slide takes full viewport width, aspect dictates height */
@media (max-width: 1100px) {
	.cos-gallery-swiper .cos-gallery-slide {
		width: 100vw !important;
		height: auto !important;
		max-height: none;
		aspect-ratio: 3 / 4;
	}
}
@media (max-width: 720px) {
	.hero[data-layout="split"] .info-rail {
		padding: 20px var(--gutter) 40px;
		max-width: 100%;
	}
	.cos-gallery-thumbs {
		margin: 8px 0 0;
		padding: 0 12px;
		width: 100%;
		box-sizing: border-box;
	}
	/* Best practice on phones: breadcrumb sits BELOW the photo, grouped with
	   the product text — photo first, then trail, then title/price. */
	.hero[data-layout="split"] > .gallery-column { order: 1; }
	.hero[data-layout="split"] > .crumbs {
		order: 2;
		padding: 18px var(--gutter) 0;
	}
	.hero[data-layout="split"] > .info-rail { order: 3; }
}

.cos-gallery-swiper {
	width: 100%;
	height: auto;
	position: relative;           /* anchor for the .cos-gallery-counter overlay */
	overflow: visible !important; /* let the .5 peek extend beyond + slide can exceed viewport vertically */
	background: transparent;
}
.cos-gallery-swiper .swiper-wrapper {
	align-items: stretch;
}
/* Slide — Swiper sets width via slidesPerView, height = width × 3/2 (natural 2:3 image, no crop).
   We let the slide extend past the viewport if necessary so the full photo is visible. */
.cos-gallery-swiper .cos-gallery-slide {
	background: var(--sand);
	overflow: hidden;
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	height: auto;
}

/* A single-image product reuses the exact slide sizing above (66% column width
   + 2:3 box on desktop, full-width on phone), so it matches a slider photo —
   but the slide is centered (centeredSlides) and the sand backdrop fills the
   whole column instead of just the photo box. */
.cos-gallery--single .cos-gallery-swiper { background: var(--sand); }
.cos-gallery-swiper .cos-gallery-slide a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
.cos-gallery-swiper .cos-gallery-slide img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	/* `cover` em vez de `contain`: onde a caixa é mesmo 3:4 (= rácio das fotos)
	   não corta nada; só quando a altura é limitada pelo viewport (ex.: PDP em
	   MacBook, onde o max-height encurta o slide) preenche com um corte mínimo,
	   evitando as barras brancas laterais. */
	object-fit: cover;
	object-position: center center;
	display: block;
	color: transparent;
	background: transparent;
}

/* ── Vídeo do produto (primeiro slide) ──────────────────────────────
   Espelha o sizing das fotos: `cover` preenche a caixa 3:4 como uma foto,
   sem barras nem branding. Reproduz mudo + loop, autoplay quando visível
   — sem controlos nem botão (ver product-video.js). */
.cos-gallery-swiper .cos-gallery-slide--video { background: var(--sand); }
.cos-gallery-swiper .cos-gallery-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	background: var(--sand);
}

/* keep .gallery-column from clipping the .5 peek vertically while we limit height */
.hero[data-layout="split"] .gallery-column .cos-gallery-slide {
	max-height: calc(100vh - 84px - 48px);
}
@media (max-width: 720px) {
	.cos-gallery-swiper .cos-gallery-slide { max-height: none; }
}

/* Arrows — same minimalist chevron treatment as the product-card slider:
   hidden by default, revealed on hover (desktop), surfaced on touch.
   Full-height edge strips (COS-style) for a generous tap target; the chevron
   stays centred. Swipe still works: Swiper tracks drags on the container, so
   touches on the button bubble through. */
.cos-gallery-arrow {
	position: absolute;
	top: 0;
	bottom: 0;
	height: 100%;
	width: 48px;
	margin: 0;          /* override Swiper's default negative margin-top */
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 0;
	opacity: 0;
	transition: opacity 0.2s ease;
	/* White chevron that auto-inverts against the photo (COS-style): white on
	   dark images, black on light ones. Blend lives on the button (not the svg):
	   the button is its own stacking context (positioned + z-index), so blending
	   the whole group composites it against the product image. */
	mix-blend-mode: difference;
}
.cos-gallery-swiper:hover .cos-gallery-arrow,
.cos-gallery-arrow:focus-visible { opacity: 1; }
.cos-gallery-arrow:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.cos-gallery-arrow.swiper-button-prev { left: 0; }
.cos-gallery-arrow.swiper-button-next { right: 0; }
.cos-gallery-arrow svg { width: 22px; height: 22px; }
/* Swiper default after content removal */
.cos-gallery-arrow::after { display: none; content: none; }

/* No hover on touch devices — keep the arrows always visible. The blend-mode
   icon stays legible against any photo, so no pill/shadow needed. */
@media (hover: none) {
	.cos-gallery-arrow,
	.cos-gallery-arrow:hover { opacity: 1; }
}

/* Counter (01 / 04) — overlays the active slide image */
.woocommerce-product-gallery { position: relative; }
.cos-gallery-counter {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	gap: 6px;
	align-items: baseline;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--ink);
	background: var(--paper-92);
	padding: 6px 12px;
	z-index: 10;
	pointer-events: none;
}
.cos-gallery-counter .sep { color: var(--stone); }

/* Pagination dots (mobile fallback to bullets) */
.cos-gallery-pagination {
	position: relative;
	margin-top: 12px;
	display: none; /* using counter + thumbs instead */
}

/* Thumbs strip — flush with the photo's left edge */
.cos-gallery-thumbs {
	margin: 14px 0 0;
	width: 100%;
	height: auto;
}
.cos-gallery-thumbs .cos-thumb {
	width: 44px;
	aspect-ratio: 3 / 4;        /* match natural photo so nothing is cut off */
	height: auto;
	background: var(--sand);
	border: var(--hairline) solid var(--line);
	cursor: pointer;
	opacity: .75;
	transition: opacity .15s ease, border-color .15s ease;
	overflow: hidden;
	position: relative;
}
.cos-gallery-thumbs .cos-thumb:hover { opacity: 1; }
.cos-gallery-thumbs .cos-thumb.swiper-slide-thumb-active { opacity: 1; border-color: var(--ink); }
.cos-gallery-thumbs .cos-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;        /* foto completa também no thumbnail */
	display: block;
	background: transparent;
}
/* Thumb do vídeo: poster a preencher + pequeno badge de play centrado. */
.cos-gallery-thumbs .cos-thumb--video img { object-fit: cover; }
.cos-gallery-thumbs .cos-thumb--video .cos-thumb-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--paper-92);
	color: var(--ink);
	z-index: 2;
}
.cos-gallery-thumbs .cos-thumb--video .cos-thumb-play svg { width: 9px; height: 9px; margin-left: 1px; }
@media (max-width: 720px) {
	.cos-gallery-thumbs { margin: 12px 0 0; width: 100%; padding: 0 12px; box-sizing: border-box; }
	.cos-gallery-counter { font-size: 10px; padding: 4px 8px; }
}

/* Legacy WC gallery wrapper rules — disabled now in favor of Swiper */
.hero[data-layout="split"] .gallery-column .woocommerce-product-gallery {
	width: 100% !important;
	height: 100%;
	max-width: 100%;
	margin: 0 !important;
	float: none !important;
	opacity: 1 !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.hero[data-layout="split"] .gallery-column .flex-viewport {
	width: 100%;
	max-width: 100%;
	height: calc(100% - 110px);
	max-height: calc(100vh - 84px - 130px);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
}
.hero[data-layout="split"] .gallery-column .woocommerce-product-gallery__wrapper {
	margin: 0;
	height: 100%;
	background: transparent;
}
.hero[data-layout="split"] .gallery-column .woocommerce-product-gallery__image {
	background: transparent;
	height: 100%;
	overflow: hidden;
}
.hero[data-layout="split"] .gallery-column .woocommerce-product-gallery__image a,
.hero[data-layout="split"] .gallery-column .woocommerce-product-gallery__image img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	background: transparent;
	max-width: 100%;
}
.hero[data-layout="split"] .gallery-column .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 16px; right: 16px;
	width: 38px; height: 38px;
	border: 1px solid var(--line-strong);
	background: var(--paper);
	color: var(--ink);
	text-indent: -9999px;
	overflow: hidden;
	border-radius: 0;
	z-index: 3;
}
.hero[data-layout="split"] .gallery-column .woocommerce-product-gallery__trigger::before {
	content: "+";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-indent: 0;
	font-family: var(--mono);
	font-size: 18px;
}
.hero[data-layout="split"] .gallery-column .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 16px auto 0;
	padding: 0;
	list-style: none;
	width: 100%;
	max-width: 480px;
	flex-shrink: 0;
}
.hero[data-layout="split"] .gallery-column .flex-control-thumbs li {
	width: auto;
	height: auto;
	margin: 0;
	float: none;
}
.hero[data-layout="split"] .gallery-column .flex-control-thumbs img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border: var(--hairline) solid var(--line);
	opacity: .75;
	cursor: pointer;
	transition: border-color .15s ease, opacity .15s ease;
}
.hero[data-layout="split"] .gallery-column .flex-control-thumbs img:hover { opacity: 1; border-color: var(--stone); }
.hero[data-layout="split"] .gallery-column .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--ink); }
.hero[data-layout="split"] .gallery-column .flex-direction-nav { display: none; }

/* ── PDP — Make the info rail in [data-layout="split"] wider for readable reviews ── */
.hero[data-layout="split"] .info-rail {
	max-width: none;
	width: 100%;
}

/* ── PDP — Título do produto ───────────────────────────────────────────────
   Sobre-escrevemos APENAS o estilo do título da product page (peso 400,
   maiúsculas, letter-spacing 0.02em). O tamanho usa o token global
   --fs-h1-page (clamp 24→32px), igual a Contactos/FAQs/Legal/Carrinho vazio —
   mantém a escala de títulos consistente em vez de um clamp próprio. */
.hero[data-layout="split"] .product-title-row .h1-display {
	font-size: var(--fs-h1-page);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.1;
	text-transform: uppercase;
}

/* Título + coração de favoritos na mesma linha (estilo COS): título à esquerda,
   ícone ♥ à direita, alinhado ao centro da linha do título. */
.product-title-row__main {
	display: flex;
	align-items: flex-start;   /* quando o título quebra, o ícone fica no topo (1ª linha) */
	justify-content: space-between;
	gap: 16px;
}
.product-title-row__main .h1-display { min-width: 0; }
.cos-pdp-fav {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: -6px -8px 0 0;     /* topo: alinha o ícone com a 1ª linha do título; direita: encosta à margem */
	padding: 0;
	background: none;
	border: 0;
	color: var(--ink);
	cursor: pointer;
	transition: color .15s ease;
}
.cos-pdp-fav-icon { display: block; }
.cos-pdp-fav .heart-fill { fill: none; transition: fill .15s ease; }
.cos-pdp-fav.is-active .heart-fill,
.cos-pdp-fav[aria-pressed="true"] .heart-fill { fill: currentColor; }
.cos-pdp-fav:hover { color: var(--stone); }
.cos-pdp-fav:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }

/* ── Variations form — defensive: ensure all interactive bits are clickable ── */
.variations_form .swatch,
.variations_form .size,
.variations_form .swatches,
.variations_form .sizes,
.swatch-block .swatch,
.size-block .size {
	pointer-events: auto !important;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}

/* On tablets/phones make swatches and size buttons bigger touch targets */
@media (max-width: 720px) {
	.swatch { width: 44px; height: 44px; padding: 4px; }
	.size { min-height: 48px; padding: 16px 0; font-size: 13px; }
	.sizes { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
@media (max-width: 420px) {
	.sizes { grid-template-columns: repeat(2, 1fr); }
}

/* ── Variations form: hide native, keep functional ──── */
.variations_form .variations,
.variations_form .variations tbody,
.variations_form .variations tr,
.variations_form .variations td,
.variations_form .variations th {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
.variations_form .variations { display: flex; flex-direction: column; gap: 26px; }
.variations_form .variations tr { display: flex; flex-direction: column; gap: 12px; }
.variations_form .variations th { display: none; } /* hide raw label, we render our own */
.variations_form .variations select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	pointer-events: none !important;
	opacity: 0 !important;
	/* visibility:hidden torna o <select> não-focável: o WooCommerce, ao "Limpar"
	   variações, faz $attributeFields[0].focus() (add-to-cart-variation.js) e em
	   mobile/tablet isso abria o picker nativo por cima dos swatches. Os nossos
	   swatches (role=radiogroup) já fornecem a acessibilidade; o select fica só
	   como portador do valor para o WooCommerce (change/submit continuam a funcionar). */
	visibility: hidden !important;
}
/* "Limpar" lives in its own right-aligned row beneath the options (placed there
   by variation-swatches.js). When nothing is selected WC keeps the link hidden,
   so the empty row collapses and adds no extra space. */
.variations_form .reset-row { display: flex; justify-content: flex-end; }
.variations_form .reset_variations {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--stone);
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	display: inline-block;
	margin: 6px 0 0;
}
/* Hide reset until something is selected (WC adds visibility:visible inline; only show when meaningful) */
.variations_form .reset_variations[style*="visibility: hidden"],
.variations_form .reset_variations:not([style*="visible"]) { display: none; }
.variations_form .single_variation_wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 20px;
}
/* Selected-variation price — mirror the top .price-row .price exactly so the
   sale (struck regular + bold sale) reads identically in both places. */
.woocommerce-variation-price {
	font-family: var(--sans);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
}
/* WC core sets `div.product span.price { font-size: 1.25em; color: olive }`
   with high specificity, which would render this ~27px and green. Match that
   specificity to force the inner .price back to the top price's size/colour. */
.woocommerce div.product .woocommerce-variation-price span.price,
.info-rail .woocommerce-variation-price span.price {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	margin: 0;
}
.woocommerce-variation-price .woocommerce-Price-amount { font-size: inherit; font-family: inherit; font-weight: inherit; }
.woocommerce-variation-price .woocommerce-Price-currencySymbol { font-weight: inherit; margin-left: 1px; }
.woocommerce-variation-price del,
.woocommerce-variation-price del .woocommerce-Price-amount {
	color: var(--stone);
	font-size: 14px;
	font-weight: 400;
	text-decoration: line-through;
	margin-right: 0;
}
.woocommerce-variation-price ins,
.woocommerce-variation-price ins .woocommerce-Price-amount {
	background: transparent;
	text-decoration: none;
	color: var(--ink);
	font-weight: 500;
}
.woocommerce-variation-price .woocommerce-price-suffix,
.woocommerce-variation-price small { display: none; }
/* Stock line — same typeface as the price above (sans, not mono) and a clear
   gap so it no longer sits glued to the price. */
.woocommerce-variation-availability { margin-top: 10px; }
.woocommerce-variation-availability p,
.woocommerce-variation-availability p.stock {
	font-family: var(--sans);
	font-size: 13px;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--stone);
	margin: 0;
}
/* O WooCommerce core pinta a linha de stock com cores próprias e regras de
   maior especificidade que as de cima: `div.product .stock` → azeitona
   (--wc-highlight #958e09) e `.out-of-stock` → vermelho (--wc-red #a00). Aqui
   re-afirmamos os tokens do tema com especificidade superior (.cos-woo +
   div.product) para a meta ficar coerente: em stock = neutro (--stone),
   esgotado = o nosso vermelho de erro (--error). Cobre simples e variações. */
.cos-woo div.product p.stock { color: var(--stone); }
.cos-woo div.product p.stock.out-of-stock { color: var(--error); }
.woocommerce-variation-description { font-size: 13px; color: var(--ink-soft); line-height: 1.65; }

/* Quantity input — hidden on PDP (fashion default = 1 unit, kept in DOM for WC) */
.info-rail .quantity,
.cos-woo .info-rail .quantity {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
/* In cart / non-PDP pages keep the quantity stepper visible */
.cos-woo:not(.single-product) .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--ink);
	height: 48px;
	width: 110px;
}
.cos-woo:not(.single-product) .quantity .qty {
	width: 100%;
	border: 0;
	background: transparent;
	text-align: center;
	font-family: var(--mono);
	font-size: 13px;
	color: var(--ink);
	-moz-appearance: textfield;
}
.cos-woo:not(.single-product) .quantity .qty::-webkit-outer-spin-button,
.cos-woo:not(.single-product) .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── PDP — COS-style add-to-bag button ─────────────── */
.info-rail .woocommerce-variation-add-to-cart,
.info-rail form.cart {
	display: block;
	margin: 0;
	width: 100%;
}
body.cos-woo .info-rail .cta-block { width: 100%; display: flex; flex-direction: column; gap: 8px; }

/* Primary CTA — dark filled, label left + bag icon right */
body.cos-woo .info-rail .single_add_to_cart_button,
body.cos-woo .info-rail .single_add_to_cart_button.button,
body.cos-woo .info-rail .single_add_to_cart_button.button.alt,
body.cos-woo .info-rail .single_add_to_cart_button.wc-variation-selection-needed,
body.cos-woo .info-rail .single_add_to_cart_button.disabled,
body.cos-woo .info-rail .cta.secondary {
	width: 100% !important;
	height: 58px !important;
	padding: 12px 20px !important;
	background: var(--ink) !important;
	color: var(--paper) !important;
	border: 1px solid var(--ink) !important;
	border-radius: 0 !important;
	font-family: var(--sans) !important;
	font-size: 14px !important;
	letter-spacing: 0.18em !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 12px !important;
	transition: background .15s ease, color .15s ease, border-color .15s ease !important;
	box-shadow: none !important;
	text-shadow: none !important;
	flex: none !important;
	min-width: 0 !important;
}
body.cos-woo .info-rail .single_add_to_cart_button:hover {
	background: var(--ink-soft) !important;
	border-color: var(--ink-soft) !important;
	color: var(--paper) !important;
}
body.cos-woo .info-rail .single_add_to_cart_button.disabled,
body.cos-woo .info-rail .single_add_to_cart_button.wc-variation-selection-needed,
body.cos-woo .info-rail .single_add_to_cart_button.wc-variation-is-unavailable,
body.cos-woo .info-rail .single_add_to_cart_button:disabled {
	background: var(--disabled-bg) !important;
	border-color: var(--disabled-bg) !important;
	color: var(--disabled-text) !important;
	cursor: not-allowed !important;
	opacity: 1 !important;
}

/* Secondary CTA — outlined ghost (COS theme-button-secondary) */
body.cos-woo .info-rail .cta.secondary {
	background: transparent !important;
	color: var(--ink) !important;
	border-color: var(--ink) !important;
}
body.cos-woo .info-rail .cta.secondary:hover {
	background: var(--ink) !important;
	color: var(--paper) !important;
}

/* Inner layout: label left, icon right */
body.cos-woo .info-rail .cta .cta-label {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	flex: 1;
	text-align: left;
	line-height: 1.2;
}
body.cos-woo .info-rail .cta .cta-text {
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 0.12em;   /* CTA: tracking contido (controla o texto visível do botão) */
	font-weight: 500;
	text-transform: uppercase;
}
/* Preço escondido no botão principal — já aparece logo acima (preço da variação
   + stock) e no topo (intervalo). A barra sticky (fora do .info-rail) mantém o
   preço, porque aí o do topo já saiu do ecrã. */
body.cos-woo .info-rail .cta .cta-price { display: none; }
body.cos-woo .info-rail .cta .cta-icon.material-symbols-outlined {
	font-size: 20px;
	flex: none;
	width: 20px;
	height: 20px;
	line-height: 20px;
}

/* All other WC buttons follow the same look */
body.cos-woo .button,
body.cos-woo button.button,
body.cos-woo .button.alt,
body.cos-woo input[type="submit"],
body.cos-woo .woocommerce-Button,
body.cos-woo a.button.checkout-button,
body.cos-woo .wp-block-button__link {
	padding: 16px 24px;
	background: var(--ink) !important;
	color: var(--paper) !important;
	border: 1px solid var(--ink) !important;
	border-radius: 0 !important;
	font-family: var(--sans);
	font-size: 13px !important;
	letter-spacing: 0.2em !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease;
	box-shadow: none !important;
	text-shadow: none !important;
	text-decoration: none !important;
}
body.cos-woo .button:hover { background: var(--ink-soft) !important; color: var(--paper) !important; }

/* ── PDP — Product meta (PRODUCT INFO accordion) ─────── */
.accordion-item .content-inner .product_meta {
	display: block;
	margin: 0;
	padding: 0;
	border-top: 0;
}
.accordion-item .content-inner .product_meta .meta-row {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 16px;
	align-items: baseline;
	padding: 10px 0;
	border-bottom: 0;
}
.accordion-item .content-inner .product_meta .meta-row:first-child { padding-top: 0; }
.accordion-item .content-inner .product_meta .meta-label {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--stone);
}
.accordion-item .content-inner .product_meta .meta-value {
	font-family: var(--sans);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--ink);
	font-weight: 500;
	line-height: 1.5;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 4px;
}
/* SKU/reference rendered in mono (it's an alphanumeric code) */
.accordion-item .content-inner .product_meta .meta-value--sku,
.accordion-item .content-inner .product_meta .sku {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--ink);
}
.accordion-item .content-inner .product_meta .meta-value a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 500;
}
.accordion-item .content-inner .product_meta .meta-value a:hover { color: var(--ink-soft); }
.accordion-item .content-inner .product_meta .cos-meta-sep {
	color: var(--stone);
	font-weight: 400;
	margin: 0 4px;
}

@media (max-width: 720px) {
	.accordion-item .content-inner .product_meta .meta-row {
		grid-template-columns: 1fr;
		gap: 6px;
		padding: 14px 0;
	}
}

/* ── PDP — pricing (Atelier .price-row) ─────────────── */
.info-rail .price-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-top: 6px;
	border-top: var(--hairline) solid var(--line);
	gap: 16px;
}
.info-rail .price-row .price {
	font-family: var(--sans);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
}
.info-rail .price-row .price del,
.info-rail .price-row .price del .woocommerce-Price-amount {
	color: var(--stone);
	font-size: 14px;
	font-weight: 400;
	text-decoration: line-through;
}
.info-rail .price-row .price ins,
.info-rail .price-row .price ins .woocommerce-Price-amount {
	background: transparent;
	text-decoration: none;
	color: var(--ink);
	font-weight: 500;
}
.info-rail .price-row .price .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.info-rail .price-row .price .woocommerce-price-suffix,
.info-rail .price-row .price small { display: none; } /* show tax label only in .tax column */
.info-rail .price-row .woocommerce-Price-amount { font-family: inherit; font-weight: inherit; }
.info-rail .price-row .woocommerce-Price-currencySymbol { font-weight: inherit; margin-left: 1px; }

.info-rail .price-row .tax {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--stone);
	font-weight: 400;
}

/* "Isento de IVA" curto + artigo legal em tooltip (hover/focus). Mantém a
   linha do preço curta; a menção completa (art.º 53.º do CIVA) fica acessível
   por rato, teclado (tabindex) e leitores de ecrã (aria-label). */
.info-rail .price-row .tax .cos-vat-exempt {
	position: relative;
	cursor: help;
	border-bottom: 1px dotted var(--stone);
	outline: none;
}
.info-rail .price-row .tax .cos-vat-exempt::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 8px);
	right: 0;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.03em;
	text-transform: none;
	white-space: nowrap;
	padding: 8px 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease;
	pointer-events: none;
	z-index: 20;
}
/* Seta do balão */
.info-rail .price-row .tax .cos-vat-exempt::before {
	content: "";
	position: absolute;
	bottom: calc(100% + 3px);
	right: 12px;
	border: 5px solid transparent;
	border-top-color: var(--ink);
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease;
	z-index: 20;
}
.info-rail .price-row .tax .cos-vat-exempt:hover::after,
.info-rail .price-row .tax .cos-vat-exempt:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.info-rail .price-row .tax .cos-vat-exempt:hover::before,
.info-rail .price-row .tax .cos-vat-exempt:focus-visible::before {
	opacity: 1;
	visibility: visible;
}
/* Em ecrãs estreitos o balão pode passar a largura do viewport — deixa-o
   quebrar em duas linhas em vez de cortar. */
@media (max-width: 480px) {
	.info-rail .price-row .tax .cos-vat-exempt::after {
		white-space: normal;
		width: max-content;
		max-width: 220px;
	}
}

/* ── PDP — sale badge & rating ───────────────────────── */
.pdp-badge {
	display: inline-block;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--ink);
	color: var(--paper);
	padding: 4px 8px;
	align-self: flex-start;
}

.info-rail .review-stars .star-rating {
	display: inline-block;
	font-size: 12px;
	width: 5.4em;
	height: 1em;
	line-height: 1;
	overflow: hidden;
	position: relative;
	color: var(--ink);
}
.info-rail .review-stars .star-rating::before {
	content: "★★★★★";
	letter-spacing: 0.08em;
	color: var(--stone-soft);
	position: absolute;
	left: 0; top: 0;
}
.info-rail .review-stars .star-rating span { display: block; overflow: hidden; white-space: nowrap; }
.info-rail .review-stars .star-rating span::before { content: "★★★★★"; letter-spacing: 0.08em; color: var(--ink); }

/* ── PDP — Reviews section (Atelier .reviews-section) ──── */
.reviews-section {
	background: var(--paper);
	scroll-margin-top: 100px; /* clears the sticky header when jumping via #reviews-section */
}
.reviews-section .stars { display: inline-flex; gap: 3px; align-items: center; }
.reviews-section .stars i {
	display: inline-block;
	width: 14px; height: 14px;
	background: var(--ink);
	clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.reviews-section .stars i.empty { background: var(--stone-soft); }
.reviews-section .score .stars i { width: 18px; height: 18px; }
.reviews-section .review-card .stars i { width: 11px; height: 11px; }

/* Histogram bars — explicit block + visible track */
.reviews-section .histogram {
	display: grid;
	gap: 8px;
	width: 100%;
}
.reviews-section .bar-row {
	display: grid;
	grid-template-columns: 14px 1fr 32px;
	align-items: center;
	gap: 14px;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--stone);
}
.reviews-section .bar-row > span:first-child { color: var(--ink); }
.reviews-section .bar {
	display: block;
	height: 6px;
	background: var(--paper-soft);
	border: var(--hairline) solid var(--line);
	position: relative;
	overflow: hidden;
}
.reviews-section .bar i {
	display: block;
	height: 100%;
	background: var(--ink);
}

/* Review-card adjustments */
.reviews-section .review-list { display: grid; gap: 0; }
.reviews-section .review-card {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 48px;
	padding: 28px 0;
	border-top: var(--hairline) solid var(--line);
	align-items: start;
}
.reviews-section .review-card:last-child { border-bottom: var(--hairline) solid var(--line); }
.reviews-section .review-card .who {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--stone);
}
.reviews-section .review-card .who strong {
	color: var(--ink);
	font-weight: 500;
	letter-spacing: 0.04em;
}
.reviews-section .review-card .body p {
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.65;
	color: var(--ink-soft);
	margin: 0;
	max-width: 70ch;
	letter-spacing: 0;
	text-transform: none;
}
@media (max-width: 720px) {
	.reviews-section .review-card { grid-template-columns: 1fr; gap: 12px; }
	.reviews-section .reviews-summary { grid-template-columns: 1fr; gap: 32px; }
}

/* ── Fotos anexadas pelo cliente na review ───────────────── */
.reviews-section .review-card .review-photos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}
.reviews-section .review-card .review-photo {
	display: block;
	width: 72px;
	height: 72px;
	border: var(--hairline) solid var(--line);
	overflow: hidden;
	background: var(--sand);
	transition: border-color .15s ease, opacity .15s ease;
}
.reviews-section .review-card .review-photo:hover { border-color: var(--ink); opacity: .92; }
.reviews-section .review-card .review-photo .review-photo__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Lightbox das fotos das avaliações ───────────────────── */
.cos-review-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--overlay-lightbox);
	padding: 56px 24px;
}
.cos-review-lightbox.is-open { display: flex; }
.cos-review-lightbox .cos-rl-stage {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cos-review-lightbox .cos-rl-stage img {
	max-width: min(90vw, 900px);
	max-height: 86vh;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	background: var(--sand);
}
.cos-review-lightbox .cos-rl-close,
.cos-review-lightbox .cos-rl-nav {
	position: absolute;
	background: transparent;
	border: 0;
	color: var(--paper);
	cursor: pointer;
	line-height: 1;
	padding: 8px;
	transition: opacity .15s ease;
	opacity: 0.85;
}
.cos-review-lightbox .cos-rl-close:hover,
.cos-review-lightbox .cos-rl-nav:hover { opacity: 1; }
.cos-review-lightbox .cos-rl-close {
	top: 16px;
	right: 20px;
	font-size: 34px;
	font-family: var(--sans);
}
.cos-review-lightbox .cos-rl-nav {
	top: 50%;
	transform: translateY(-50%);
	font-size: 48px;
	font-family: var(--sans);
}
.cos-review-lightbox .cos-rl-prev { left: 12px; }
.cos-review-lightbox .cos-rl-next { right: 12px; }
.cos-review-lightbox .cos-rl-close:focus-visible,
.cos-review-lightbox .cos-rl-nav:focus-visible { outline: 1px solid var(--paper); outline-offset: 2px; }
@media (max-width: 720px) {
	.cos-review-lightbox { padding: 48px 12px; }
	.cos-review-lightbox .cos-rl-nav { font-size: 36px; }
}

/* ── Campo de upload de fotos no formulário de review ──────── */
.reviews-section .review-form-wrap .comment-form-photos {
	margin: 0 0 24px;
	padding-bottom: 24px;
	border-bottom: var(--hairline) solid var(--line);
}
.reviews-section .review-form-wrap .comment-form-photos input[type="file"] {
	display: block;
	width: 100%;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink-soft);
	padding: 12px 0;
}
.reviews-section .review-form-wrap .comment-form-photos input[type="file"]::file-selector-button {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--ink);
	background: transparent;
	border: 1px solid var(--ink);
	border-radius: 0;
	padding: 10px 16px;
	margin-right: 14px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.reviews-section .review-form-wrap .comment-form-photos input[type="file"]::file-selector-button:hover {
	background: var(--ink);
	color: var(--paper);
}
.reviews-section .review-form-wrap .comment-form-photos .cos-review-photos-hint {
	display: block;
	font-family: var(--mono);
	font-size: 11px;
	line-height: 1.6;
	letter-spacing: 0.02em;
	color: var(--stone);
	margin-top: 8px;
	text-transform: none;
}

/* Empty state — shown when a product has no reviews yet (form still appears below) */
.reviews-section .reviews-empty {
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.6;
	color: var(--stone);
	margin: 0;
	padding: 24px 0 0;
}

/* Reviews pagination (numbered) */
.reviews-section .reviews-pagination {
	margin-top: 40px;
	padding-top: 28px;
	border-top: var(--hairline) solid var(--line);
}
.reviews-section .reviews-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.reviews-section .reviews-pagination li { margin: 0; }
.reviews-section .reviews-pagination a,
.reviews-section .reviews-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: var(--hairline) solid var(--line);
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--ink);
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.reviews-section .reviews-pagination a:hover { border-color: var(--stone); }
.reviews-section .reviews-pagination .current {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}
.reviews-section .reviews-pagination .dots {
	border-color: transparent;
	color: var(--stone);
}

.reviews-section .review-form-wrap .woocommerce-Reviews-title,
.reviews-section .review-form-wrap .commentlist,
.reviews-section .review-form-wrap .woocommerce-noreviews { display: none !important; }

/* ── Review form (Atelier-style polished) ───────────────── */
.reviews-section .review-form-wrap {
	margin-top: 80px;
	padding-top: 48px;
	border-top: var(--hairline) solid var(--line);
}
.reviews-section .review-form-wrap #review_form_wrapper { max-width: 720px; }
.reviews-section .review-form-wrap #respond { padding: 0; background: transparent; }

.reviews-section .review-form-wrap .comment-reply-title,
.reviews-section .review-form-wrap #reply-title {
	font-family: var(--sans);
	font-size: clamp(18px, 1.8vw, 22px);
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ink);
	display: block;
	margin: 0 0 24px;
	line-height: 1.2;
}
.reviews-section .review-form-wrap #reply-title small a {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--stone);
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-left: 12px;
}

/* Labels */
.reviews-section .review-form-wrap label,
.reviews-section .review-form-wrap #comment-form-rating-label {
	display: block;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--stone);
	margin-bottom: 10px;
}
.reviews-section .review-form-wrap .required { color: var(--ink); margin-left: 2px; }

/* Rating block */
.reviews-section .review-form-wrap .comment-form-rating {
	margin: 0 0 28px;
	padding-bottom: 24px;
	border-bottom: var(--hairline) solid var(--line);
}
.reviews-section .review-form-wrap p.stars {
	display: inline-flex;
	gap: 6px;
	margin: 0;
	padding: 0;
}
.reviews-section .review-form-wrap p.stars > span {
	display: inline-flex;
	gap: 6px;
}
.reviews-section .review-form-wrap p.stars a,
.reviews-section .review-form-wrap p.stars span a {
	width: 28px;
	height: 28px;
	display: inline-block;
	position: relative;
	text-indent: -9999em;
	overflow: hidden;
	background: var(--rating-empty) !important;
	color: transparent !important;
	clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
	transition: background .12s ease, transform .12s ease;
	cursor: pointer;
	font-size: 0 !important;
	margin: 0 !important;
	pointer-events: auto;
	border: 0;
}
/* Kill WC's default icon-font star glyphs */
.reviews-section .review-form-wrap p.stars a::before,
.reviews-section .review-form-wrap p.stars a::after {
	content: '' !important;
	display: none !important;
	background: none !important;
	font-size: 0 !important;
}

/* Hover preview — body-text colour on hovered + previous siblings */
.reviews-section .review-form-wrap p.stars:hover a,
.reviews-section .review-form-wrap p.stars span:hover a {
	background: var(--rating-hover) !important;
}
.reviews-section .review-form-wrap p.stars a:hover ~ a {
	background: var(--rating-empty) !important;
}

/* Selected state — WC adds .selected to <p.stars> + .active to the clicked anchor. */
.reviews-section .review-form-wrap p.stars.selected a {
	background: var(--rating-filled) !important;
	transform: scale(1.05);
}
.reviews-section .review-form-wrap p.stars.selected a.active ~ a {
	background: var(--rating-empty) !important;
	transform: none;
}

/* Textarea */
.reviews-section .review-form-wrap .comment-form-comment { margin: 0 0 24px; }
.reviews-section .review-form-wrap #review_form textarea,
.reviews-section .review-form-wrap #review_form input[type="text"],
.reviews-section .review-form-wrap #review_form input[type="email"] {
	width: 100%;
	min-height: 140px;
	border: 1px solid var(--line-strong);
	background: var(--paper);
	padding: 16px 18px;
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-soft);
	border-radius: 0;
	resize: vertical;
	transition: border-color .15s ease;
}
.reviews-section .review-form-wrap #review_form input[type="text"],
.reviews-section .review-form-wrap #review_form input[type="email"] {
	min-height: 0;
	height: 48px;
	font-family: var(--mono);
	font-size: 13px;
	resize: none;
}
.reviews-section .review-form-wrap #review_form textarea:focus,
.reviews-section .review-form-wrap #review_form input:focus {
	outline: none;
	border-color: var(--ink);
}
.reviews-section .review-form-wrap #review_form textarea::placeholder,
.reviews-section .review-form-wrap #review_form input::placeholder {
	color: var(--stone);
	opacity: 0.7;
}

/* WC comment notes (privacy + required fields disclaimer) */
.reviews-section .review-form-wrap .comment-notes,
.reviews-section .review-form-wrap #review_form .comment-notes,
.reviews-section .review-form-wrap p.comment-notes,
.reviews-section .review-form-wrap .logged-in-as {
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.7;
	letter-spacing: 0.02em;
	color: var(--stone);
	margin: 0 0 20px;
	max-width: 60ch;
	text-transform: none;
}
.reviews-section .review-form-wrap .comment-notes .required,
.reviews-section .review-form-wrap p.comment-notes .required {
	color: var(--ink);
}
.reviews-section .review-form-wrap .logged-in-as a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 720px) {
	.reviews-section .review-form-wrap .comment-notes,
	.reviews-section .review-form-wrap p.comment-notes,
	.reviews-section .review-form-wrap .logged-in-as {
		font-size: 13px;
		line-height: 1.65;
		margin-bottom: 22px;
	}
}

/* Submit button — matches the primary CTA */
.reviews-section .review-form-wrap .form-submit {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 14px;
}
.reviews-section .review-form-wrap .form-submit input[type="submit"],
.reviews-section .review-form-wrap #submit {
	width: auto;
	min-width: 240px;
	height: 58px;
	padding: 12px 24px;
	background: var(--ink);
	color: var(--paper);
	border: 1px solid var(--ink);
	border-radius: 0;
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 0.18em;
	font-weight: 500;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.reviews-section .review-form-wrap .form-submit input[type="submit"]:hover,
.reviews-section .review-form-wrap #submit:hover {
	background: var(--paper);
	color: var(--ink);
}
.reviews-section .review-form-wrap .form-submit .submit-hint {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--stone);
	text-transform: uppercase;
}

@media (max-width: 720px) {
	.reviews-section .review-form-wrap { margin-top: 48px; padding-top: 32px; }
	.reviews-section .review-form-wrap .form-submit input[type="submit"] {
		width: 100%;
		min-width: 0;
	}
}
.reviews-section .review-form-wrap p.stars a {
	color: var(--ink);
	text-decoration: none;
}

/* ── (Legacy) reviews inside accordion still hidden if present ─ */
.accordion-item .content #reviews { width: 100%; }
.accordion-item .content #comments { padding: 0; width: 100%; }
.accordion-item .content .woocommerce-Reviews-title {
	font-family: var(--sans);
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	margin: 0 0 16px;
}
.accordion-item .content .commentlist {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	margin: 0;
	list-style: none;
}
.accordion-item .content .commentlist > li {
	display: block;
	padding: 22px 0;
	border-top: var(--hairline) solid var(--line);
	margin: 0;
}
.accordion-item .content .commentlist > li:last-child { border-bottom: var(--hairline) solid var(--line); }
.accordion-item .content .commentlist .comment_container {
	display: block;
	border: 0;
	background: transparent;
	padding: 0;
}
.accordion-item .content .commentlist .avatar { display: none !important; }
.accordion-item .content .commentlist .comment-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border: 0;
	background: transparent;
	margin: 0;
	padding: 0;
}
.accordion-item .content .commentlist .meta,
.accordion-item .content .commentlist p.meta {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--stone);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: baseline;
	margin: 0;
}
.accordion-item .content .commentlist .woocommerce-review__author {
	color: var(--ink);
	font-weight: 500;
	letter-spacing: 0.04em;
}
.accordion-item .content .commentlist .woocommerce-review__verified { color: var(--stone); font-style: normal; }
.accordion-item .content .commentlist .woocommerce-review__dash { color: var(--stone-soft); }
.accordion-item .content .commentlist .description p {
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.65;
	color: var(--ink-soft);
	margin: 0;
	max-width: 70ch;
	text-transform: none;
	letter-spacing: 0;
}
.accordion-item .content .star-rating {
	display: inline-block;
	font-size: 12px;
	width: 5.4em;
	height: 1em;
	line-height: 1;
	overflow: hidden;
	position: relative;
	color: var(--ink);
}
.accordion-item .content .star-rating::before {
	content: "★★★★★";
	letter-spacing: 0.08em;
	color: var(--stone-soft);
	position: absolute;
	left: 0; top: 0;
}
.accordion-item .content .star-rating span { display: block; overflow: hidden; white-space: nowrap; }
.accordion-item .content .star-rating span::before { content: "★★★★★"; letter-spacing: 0.08em; color: var(--ink); }

.accordion-item .content #review_form_wrapper { margin-top: 24px; }
.accordion-item .content #review_form .comment-reply-title {
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	display: block;
	margin-bottom: 12px;
}
.accordion-item .content #review_form input[type="text"],
.accordion-item .content #review_form input[type="email"],
.accordion-item .content #review_form textarea {
	width: 100%;
	border: 1px solid var(--line-strong);
	background: var(--paper);
	padding: 12px;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink);
	border-radius: 0;
}

/* ── Related products section ─────────────────────────── */
.cos-related {
	/* Sem padding horizontal — tal como .cos-shop. O gutter vive no título e na
	   grelha, para que os cartões encostem à margem do ecrã a ≤1100px exatamente
	   como na loja. */
	padding: 100px 0;
	background: var(--paper);
}
.cos-related .related,
.cos-related .up-sells { width: 100%; display: block; clear: both; }
/* "Vistos recentemente" segue a secção de relacionados, mesmo fundo (--paper):
   colapsa o padding de topo para os dois blocos não somarem 200px de espaço. */
.cos-recently-viewed { padding-top: 0; }
.cos-related h2,
.cos-related .related > h2,
.cos-related .up-sells > h2 {
	font-family: var(--sans);
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0 var(--gutter) 48px;
	padding-bottom: 24px;
	border-bottom: var(--hairline) solid var(--line);
	color: var(--ink);
	display: block;
	width: 100%;
}
/* O loop dos relacionados renderiza como <div class="cos-grid"> (via o filtro
   woocommerce_product_loop_start em functions.php), não como o antigo
   <ul class="products">. Toda a grelha (colunas, gap, gutter desktop e o
   edge-to-edge a ≤1100px) vem da regra base .cos-grid em 02-shop-archive.css,
   partilhada com a loja — não há nada a sobrepor aqui. */


/* Produto simples (sem swatches): respiro entre o preco e o botao Adicionar.
   Nos produtos com variacoes, os swatches preenchem este espaco; nos simples
   (form.cart sem .variations_form) o botao colava ao preco. */
.info-rail form.cart:not(.variations_form) {
	margin-top: 28px;
}
/* ── Cart, checkout, account ─────────────────────────── */
.cos-woo.woocommerce-cart,
.cos-woo.woocommerce-checkout,
.cos-woo.woocommerce-account { background: var(--paper); }
.cos-woo .woocommerce { padding: 24px var(--gutter) 80px; }

.cos-woo table.shop_table,
.cos-woo table.cart,
.cos-woo .cart-collaterals .cart_totals table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	background: transparent;
	margin: 0 0 32px;
}
.cos-woo table.shop_table th {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	text-align: left;
	padding: 16px 12px;
	border-bottom: 1px solid var(--line-strong);
	color: var(--stone);
	background: transparent;
}
.cos-woo table.shop_table td {
	padding: 20px 12px;
	border-bottom: var(--hairline) solid var(--line);
	font-family: var(--mono);
	font-size: 13px;
	color: var(--ink);
	background: transparent;
}
.cos-woo table.shop_table .product-name a {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink);
}
.cos-woo table.shop_table .product-thumbnail img {
	width: 80px; height: 100px;
	object-fit: cover;
	background: var(--sand);
}
.cos-woo .product-remove a {
	color: var(--stone);
	font-family: var(--mono);
	font-size: 14px;
}
.cos-woo .product-remove a:hover { color: var(--ink); }

.cos-woo .cart-collaterals {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin-top: 16px;
}
@media (max-width: 720px) { .cos-woo .cart-collaterals { grid-template-columns: 1fr; } }
.cos-woo .cart_totals h2 {
	font-family: var(--sans);
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 16px;
}
.cos-woo .cart_totals .order-total .amount { font-size: 18px; font-weight: 500; }

.cos-woo .checkout {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
}
@media (max-width: 960px) { .cos-woo .checkout { grid-template-columns: 1fr; } }
.cos-woo h3 {
	font-family: var(--sans);
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: var(--hairline) solid var(--line);
}

.cos-woo form .form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
}
.cos-woo form .form-row label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--stone);
}
.cos-woo input[type="text"],
.cos-woo input[type="email"],
.cos-woo input[type="password"],
.cos-woo input[type="tel"],
.cos-woo input[type="number"],
.cos-woo textarea,
.cos-woo select {
	width: 100%;
	border: 1px solid var(--line-strong);
	background: var(--paper);
	padding: 12px;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink);
	border-radius: 0;
}
.cos-woo select {
	appearance: none;
	padding-right: 36px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23111' d='M0 0h10L5 6z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
}
.cos-woo input:focus,
.cos-woo select:focus,
.cos-woo textarea:focus { outline: none; border-color: var(--ink); }

/* Select2 (Woo's country / state pickers) — bring in line with our inputs */
.cos-woo .select2-container .select2-selection--single,
.cos-woo .select2-container--default .select2-selection--single {
	height: 44px;
	border: 1px solid var(--line-strong);
	border-radius: 0;
	background: var(--paper);
	box-shadow: none;
	outline: none;
}
.cos-woo .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 42px;
	padding: 0 36px 0 12px;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink);
	letter-spacing: 0.02em;
}
.cos-woo .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--stone);
}
.cos-woo .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 42px;
	width: 32px;
	right: 4px;
}
.cos-woo .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border: 0;
	width: 10px;
	height: 6px;
	margin: -3px 0 0 -5px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23111' d='M0 0h10L5 6z'/></svg>") no-repeat center / contain;
}
.cos-woo .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--ink);
}
.cos-woo .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	transform: rotate(180deg);
}
.cos-woo .select2-container--default .select2-selection--single .select2-selection__clear {
	color: var(--stone);
	margin-right: 24px;
}

/* Dropdown panel */
.cos-woo .select2-container--default .select2-dropdown,
.select2-container--default .select2-dropdown {
	border: 1px solid var(--ink);
	border-radius: 0;
	background: var(--paper);
	box-shadow: var(--shadow-dropdown);
}
.cos-woo .select2-container--default .select2-search--dropdown,
.select2-container--default .select2-search--dropdown { padding: 8px; }
.cos-woo .select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field {
	border: 1px solid var(--line-strong);
	background: var(--paper);
	padding: 8px 10px;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink);
	border-radius: 0;
	outline: none;
}
.cos-woo .select2-container--default .select2-search--dropdown .select2-search__field:focus,
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--ink);
}
.cos-woo .select2-container--default .select2-results__option,
.select2-container--default .select2-results__option {
	padding: 10px 14px;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink);
	letter-spacing: 0.02em;
	background: transparent;
}
.cos-woo .select2-container--default .select2-results__option--highlighted[aria-selected],
.cos-woo .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background: var(--ink);
	color: var(--paper);
}
.cos-woo .select2-container--default .select2-results__option[aria-selected="true"],
.cos-woo .select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
	background: var(--paper-soft);
	color: var(--ink);
}

.cos-woo #payment {
	background: transparent;
	border: 0;
	padding: 0;
}
.cos-woo #payment ul.payment_methods {
	padding: 0;
	margin: 0 0 16px;
	list-style: none;
	background: transparent;
}
.cos-woo #payment ul.payment_methods li {
	padding: 8px 0;
	border-bottom: var(--hairline) solid var(--line);
	background: transparent;
}
.cos-woo #payment ul.payment_methods li:last-child { border-bottom: 0; }
.cos-woo #payment label {
	font-family: var(--sans);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 500;
}
.cos-woo #payment .payment_box {
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.6;
	padding: 12px 0 0;
	color: var(--ink-soft);
	background: transparent;
}
.cos-woo #place_order { width: 100%; margin-top: 12px; }

/* My Account navigation — estilos editoriais vivem agora no bloco
   "Painel da conta (cos-account*)" no fim deste ficheiro. */

/* ── Newsletter strip ─────────────────────────────────── */
/* Faixa escura que arranca o bloco de fecho da página: funde-se com o rodapé
   (também escuro) num único bloco, deixando a CTA clara "Descobre tudo na loja"
   isolada por cima — assim as duas secções deixam de parecer gémeas. */
.cos-newsletter {
	padding: clamp(64px, 8vw, 104px) var(--gutter) clamp(48px, 6vw, 72px);
	background: var(--ink);
	color: var(--paper);
	/* Hairline a separar a newsletter das colunas do rodapé dentro da faixa escura. */
	border-bottom: 1px solid var(--paper-15);
	/* Full-bleed, a par do footer: a faixa de fundo rompe o cap de 1800px da
	   .cos-shell. O conteúdo já é centrado (max-width 720), por isso basta o
	   fundo correr edge-to-edge — não precisa da fórmula de alinhamento. */
	width: 100vw;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.cos-newsletter__inner { max-width: 560px; margin: 0 auto; text-align: center; }
.cos-newsletter__title {
	font-family: var(--sans);
	font-size: clamp(24px, 2.6vw, 36px);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--paper);
	margin-bottom: 14px;
}
.cos-newsletter__copy {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.65);
	max-width: 48ch;
	margin: 0 auto 26px;
	line-height: 1.6;
}
/* Label só para leitores de ecrã (oculto visualmente, mantém acessibilidade). */
.cos-newsletter .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
/* Formulário inline: campo de email + botão, com um ligeiro espaço entre eles. */
.cos-newsletter__form {
	display: flex;
	gap: 10px;
	max-width: 460px;
	margin: 0 auto;
}
/* Input: fundo da própria faixa (transparente), apenas uma border na cor de
   linha sobre fundo escuro do site (--paper-15, a mesma do divisor do rodapé).
   Texto branco em mono, igual ao tratamento dos inputs do resto do site.

   Prefixo .cos-shell .cos-newsletter (especificidade 0,3,0) para vencer a regra
   genérica `.cos-woo input[type="email"]` (0,2,1), que noutras páginas Woo (loja,
   produto, conta…) pintava este input de branco. A newsletter está no footer,
   dentro do <body class="cos-woo">, por isso herdava esse estilo. Assim o
   componente fica IGUAL em todo o site, como na home. */
.cos-shell .cos-newsletter .cos-newsletter__input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	background: transparent;
	border: 1px solid var(--paper-15);
	border-radius: 0;
	color: var(--paper);
	font-family: var(--mono);
	font-size: 13px;
	padding: 15px 18px;
}
.cos-shell .cos-newsletter .cos-newsletter__input::placeholder { color: rgba(255, 255, 255, 0.45); }
/* Mesma especificidade reforçada no focus: vence também a regra global de focus
   em 10-utilities.css, que punha border-color: var(--ink) (invisível na faixa). */
.cos-shell .cos-newsletter .cos-newsletter__input:focus {
	outline: none;
	border-color: var(--paper);
}
/* Autofill: o Chrome insiste em pintar o campo. Forçamos a cor da faixa por baixo
   (--ink) e texto branco, para o input continuar a parecer transparente. */
.cos-shell .cos-newsletter .cos-newsletter__input:-webkit-autofill,
.cos-shell .cos-newsletter .cos-newsletter__input:-webkit-autofill:hover,
.cos-shell .cos-newsletter .cos-newsletter__input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--paper);
	-webkit-box-shadow: 0 0 0 1000px var(--ink) inset;
	box-shadow: 0 0 0 1000px var(--ink) inset;
}
.cos-newsletter__cta.cta {
	flex: 0 0 auto;
	width: auto;
	white-space: nowrap;
	background: var(--paper);
	color: var(--ink);
	padding: 15px 28px;
}
.cos-newsletter__cta.cta:hover { background: var(--sand); }
@media (max-width: 540px) {
	/* Empilha campo + botão no telemóvel (mantém o mesmo gap). */
	.cos-newsletter__form { flex-direction: column; }
	.cos-newsletter__cta.cta { justify-content: center; }
}

/* Slot de integração por plugin (Customizer → Rodapé → shortcode). Damos aos
   inputs/botões do output do plugin (MC4WP, Brevo, Klaviyo…) o mesmo aspeto do
   nosso formulário na faixa escura, para a aparência ficar coerente sem editar
   o plugin. Prefixo .cos-shell .cos-newsletter para vencer o `.cos-woo input…`. */
.cos-newsletter__embed { max-width: 460px; margin: 0 auto; }
.cos-shell .cos-newsletter .cos-newsletter__embed input[type="email"],
.cos-shell .cos-newsletter .cos-newsletter__embed input[type="text"] {
	width: 100%;
	background: transparent;
	border: 1px solid var(--paper-15);
	border-radius: 0;
	color: var(--paper);
	font-family: var(--mono);
	font-size: 13px;
	padding: 15px 18px;
}
.cos-shell .cos-newsletter .cos-newsletter__embed input::placeholder { color: rgba(255, 255, 255, 0.45); }
.cos-shell .cos-newsletter .cos-newsletter__embed input:focus { outline: none; border-color: var(--paper); }
.cos-shell .cos-newsletter .cos-newsletter__embed input[type="submit"],
.cos-shell .cos-newsletter .cos-newsletter__embed button[type="submit"] {
	background: var(--paper);
	color: var(--ink);
	border: 0;
	border-radius: 0;
	font-family: var(--sans);
	font-size: 13px;
	letter-spacing: 0.2em;
	font-weight: 500;
	text-transform: uppercase;
	padding: 15px 28px;
	margin-top: 10px;
	cursor: pointer;
}
/* Mensagens de sucesso/erro dos plugins, legíveis na faixa escura. */
.cos-newsletter__embed .mc4wp-response,
.cos-newsletter__embed .wpcf7-response-output { color: var(--paper); margin-top: 12px; font-size: 13px; }

/* Safety: never let any container cause horizontal scroll */
img, video, iframe, table { max-width: 100%; }
.cos-shell > * { max-width: 100%; }

/* Default page (.cos-main--default) — give the article a horizontal gutter
   so titles and free-form content line up with the rest of the site
   (header nav, shop grid, footer). WC special pages (`cos-main--woo`) ship
   their own gutter via the .woocommerce wrapper, so they're excluded. */
.cos-main--default:not(.cos-main--woo) .cos-page-title,
.cos-main--default:not(.cos-main--woo) .cos-page__content {
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

/* ─────────────────────────────────────────────────────────────────────────
   Shop filters bar (cos-filters)
   ───────────────────────────────────────────────────────────────────────── */
.cos-filters {
	margin: 0 var(--gutter) 24px;
	border-bottom: var(--hairline) solid var(--line);
	background: var(--paper);
	position: relative;
	z-index: 20;
}
.cos-filters__bar {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 14px 0;
	flex-wrap: wrap;
}
.cos-filters__prefix {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--stone);
	flex: none;
}
.cos-filters__chips {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	min-width: 0;
}
.cos-filters__group {
	position: relative;
}
.cos-filters__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
	border: none;
	background: transparent;
	color: var(--ink);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.cos-filters__chip:hover { opacity: 0.65; }
.cos-filters__group.is-active .cos-filters__chip {
	background: transparent;
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
}
.cos-filters__chip-count {
	opacity: 0.7;
	font-size: 10px;
}
.cos-filters__chip-caret {
	font-size: 16px;
	transition: transform 0.18s ease;
}
.cos-filters__group[data-open="1"] .cos-filters__chip-caret {
	transform: rotate(180deg);
}
.cos-filters__panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 260px;
	max-width: min(360px, 92vw);
	background: var(--paper);
	border: var(--hairline) solid var(--line);
	box-shadow: var(--shadow-popover);
	padding: 16px;
	z-index: 30;
	display: none;
	max-height: 60vh;
	overflow: auto;
}
.cos-filters__group[data-open="1"] .cos-filters__panel { display: block; }
.cos-filters__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.cos-filters__options {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 280px;
	overflow-y: auto;
	/* Reserva espaço para o scrollbar para não tapar as contagens à direita. */
	padding-right: 10px;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
}
/* Scrollbar fino e discreto (WebKit) para não cobrir o conteúdo. */
.cos-filters__options::-webkit-scrollbar {
	width: 6px;
}
.cos-filters__options::-webkit-scrollbar-thumb {
	background: var(--ink-18);
	border-radius: 3px;
}
.cos-filters__options::-webkit-scrollbar-track {
	background: transparent;
}
.cos-filters__option {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--ink);
	cursor: pointer;
	padding: 4px 0;
}
.cos-filters__option input[type="checkbox"] {
	appearance: none;
	width: 16px;
	height: 16px;
	border: 1px solid var(--line-strong);
	border-radius: 3px;
	margin: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.cos-filters__option input[type="checkbox"]:checked {
	background: var(--ink);
	border-color: var(--ink);
}
.cos-filters__option input[type="checkbox"]:checked::after {
	content: "";
	width: 8px;
	height: 4px;
	border-left: 2px solid var(--paper);
	border-bottom: 2px solid var(--paper);
	transform: rotate(-45deg) translate(1px, -1px);
}
.cos-filters__option-label { flex: 1 1 auto; }
.cos-filters__option-count { opacity: 0.55; font-size: 11px; }
.cos-filters__price-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.cos-filters__price-fields label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-family: var(--mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink-soft);
}
.cos-filters__price-fields input {
	border: var(--hairline) solid var(--line);
	padding: 8px 10px;
	font-family: inherit;
	font-size: 13px;
	background: var(--paper);
	color: var(--ink);
}
.cos-filters__price-hint {
	font-size: 11px;
	color: var(--ink-soft);
	margin: 0;
}
.cos-filters__panel-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: var(--hairline) solid var(--line);
	padding-top: 12px;
	gap: 12px;
}
.cos-filters__clear-link {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft);
	text-decoration: underline;
}
.cos-filters__apply {
	background: var(--ink);
	color: var(--paper);
	border: none;
	padding: 9px 18px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s ease;
}
.cos-filters__apply:hover { background: var(--ink-soft); }
.cos-filters__stars {
	display: inline-flex;
	gap: 2px;
}
.cos-filters__stars i {
	width: 12px;
	height: 12px;
	background: var(--ink);
	clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.cos-filters__stars i.empty { background: var(--line-strong); }
.cos-filters__clear-all {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft);
	text-decoration: underline;
	white-space: nowrap;
	margin-left: 8px;
}
.cos-filters__clear-all:hover { color: var(--ink); }

/* Right side of the bar: sort + result count.
   Sits inside .cos-filters__chips (last item) so we can push it to the right on
   desktop and place it at the top of the drawer on tablet/mobile. */
.cos-filters__toolbar {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-left: auto;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--stone);
}
.cos-filters__toolbar .cos-filters__sort-label + form.woocommerce-ordering {
	margin-left: -10px;
}
.cos-filters__sort-label {
	color: var(--stone);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.cos-filters__toolbar .woocommerce-result-count { margin: 0; }
.cos-filters__toolbar form.woocommerce-ordering {
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	width: auto;
}
.cos-filters__toolbar select.orderby,
.cos-filters__toolbar .orderby {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	background: transparent;
	padding: 0 16px 0 0;
	font: inherit;
	color: var(--ink);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	width: auto;
	min-width: 0;
	max-width: 240px;
	field-sizing: content; /* modern browsers: shrink-to-selected-option */
	background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
	                  linear-gradient(135deg, var(--ink) 50%, transparent 50%);
	background-position: calc(100% - 8px) 50%, calc(100% - 4px) 50%;
	background-size: 4px 4px;
	background-repeat: no-repeat;
}

/* On desktop, hide the original toolbar — it's rendered inside .cos-filters now */
.cos-shop__header .cos-shop__toolbar { display: none; }

.cos-filters__active {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 0 12px;
}
.cos-filters__active-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px 6px 12px;
	background: var(--paper-92);
	color: var(--ink);
	border-radius: 999px;
	font-size: 11px;
	text-decoration: none;
	transition: background 0.15s ease;
}
.cos-filters__active-chip:hover { background: var(--line); }
.cos-filters__active-label { opacity: 0.6; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.cos-filters__active-value { font-weight: 500; }
.cos-filters__active-chip .material-symbols-outlined { font-size: 14px; opacity: 0.7; }

.cos-filters__mobile-toggle,
.cos-filters__drawer-close { display: none; }
.cos-filters__empty { font-size: 12px; color: var(--ink-soft); margin: 0; }

/* Drawer-only "Repor filtros" button (mobile/tablet) */
.cos-filters__drawer-reset { display: none; }

/* Mobile + tablet: hide chip bar, swap for a single "Filtros" trigger that opens a drawer */
@media (max-width: 1024px) {
	.cos-filters__chips,
	.cos-filters__prefix,
	.cos-filters__clear-all { display: none; }
	.cos-filters__bar {
		padding: 12px 0;
		gap: 12px;
	}
	/* Show original toolbar — we use the integrated one in .cos-filters instead */
	.cos-shop__header .cos-shop__toolbar { display: none; }
	.cos-filters__mobile-toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 10px 0;
		border: 0;
		background: transparent;
		color: var(--ink);
		font-family: var(--mono);
		font-size: 11px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		cursor: pointer;
		width: auto;
		justify-content: flex-start;
	}
	.cos-filters__mobile-toggle .material-symbols-outlined { font-size: 18px; }

	/* When drawer is open, raise the whole section above the sticky header
	   (which sits at z-index: 60) by escaping its base stacking context. */
	.cos-filters[data-mobile-open="1"] {
		position: relative;
		z-index: 1100;
	}

	.cos-filters[data-mobile-open="1"] .cos-filters__chips {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		position: fixed;
		/* Opens from the LEFT (same side as the "Filtros" trigger in the shop
		   toolbar), so the panel grows away from its button. */
		inset: 0 auto 0 0;
		width: min(86vw, 380px);
		background: var(--paper);
		padding: 56px 22px 22px;
		z-index: 1101;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		box-shadow: var(--shadow-drawer-strong);
	}
	.cos-filters[data-mobile-open="1"] .cos-filters__group {
		border-bottom: var(--hairline) solid var(--line);
		padding-bottom: 12px;
		flex: none;
		width: 100%;
	}
	.cos-filters[data-mobile-open="1"] .cos-filters__chip {
		width: 100%;
		justify-content: space-between;
		border: none;
		background: transparent;
		padding: 14px 0;
		border-radius: 0;
		text-transform: uppercase;
		font-size: 12px;
	}
	.cos-filters[data-mobile-open="1"] .cos-filters__group.is-active .cos-filters__chip {
		background: transparent;
		color: var(--ink);
	}
	.cos-filters[data-mobile-open="1"] .cos-filters__panel {
		position: static;
		border: none;
		box-shadow: none;
		padding: 6px 0 14px;
		min-width: 0;
		max-width: none;
		max-height: none;
		width: 100%;
	}
	.cos-filters[data-mobile-open="1"] .cos-filters__active { display: none; }

	/* Toolbar appears at the TOP of the drawer (sort + result count) */
	.cos-filters[data-mobile-open="1"] .cos-filters__toolbar {
		order: -1;
		margin: 0 0 14px;
		padding-bottom: 16px;
		border-bottom: var(--hairline) solid var(--line);
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		width: 100%;
	}
	.cos-filters[data-mobile-open="1"] .cos-filters__toolbar form.woocommerce-ordering,
	.cos-filters[data-mobile-open="1"] .cos-filters__toolbar select.orderby,
	.cos-filters[data-mobile-open="1"] .cos-filters__toolbar .orderby { width: 100%; }
	.cos-filters[data-mobile-open="1"] .cos-filters__toolbar select.orderby,
	.cos-filters[data-mobile-open="1"] .cos-filters__toolbar .orderby {
		border: var(--hairline) solid var(--line);
		padding: 10px 32px 10px 12px;
		max-width: none;
		field-sizing: fixed; /* override shrink-to-content so it spans full width */
		background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
	}
	.cos-filters[data-mobile-open="1"] .cos-filters__toolbar .woocommerce-result-count { text-align: left; opacity: 0.7; }

	.cos-filters[data-mobile-open="1"] .cos-filters__drawer-reset {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin: 18px 0 4px;
		padding: 12px;
		width: 100%;
		background: transparent;
		border: 1px solid var(--ink);
		color: var(--ink);
		font-family: var(--mono);
		font-size: 11px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-decoration: none;
		cursor: pointer;
	}
	.cos-filters[data-mobile-open="1"] .cos-filters__drawer-reset:hover {
		background: var(--ink);
		color: var(--paper);
	}
	.cos-filters[data-mobile-open="1"] .cos-filters__drawer-reset .material-symbols-outlined { font-size: 18px; }
	.cos-filters[data-mobile-open="1"]::before {
		content: "";
		position: fixed;
		inset: 0;
		background: var(--overlay-scrim-strong);
		z-index: 1100;
	}

	/* Drawer close button */
	.cos-filters__drawer-close {
		display: none;
	}
	.cos-filters[data-mobile-open="1"] .cos-filters__drawer-close {
		display: inline-flex;
		position: fixed;
		top: 14px;
		/* Top-right inner corner of the left-anchored drawer. */
		left: calc(min(86vw, 380px) - 46px);
		right: auto;
		width: 32px;
		height: 32px;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: none;
		color: var(--ink);
		cursor: pointer;
		z-index: 1102;
	}
	.cos-filters__drawer-close .material-symbols-outlined { font-size: 22px; }

	/* When the drawer is open, lock background scroll on the document. */
	html.cos-filters-locked,
	body.cos-filters-locked {
		overflow: hidden;
		touch-action: none;
	}
}

/* ── Cart page (editorial restyle) ───────────────────────────────────────── */

/* Generic COS buttons used inside the cart page */
.cos-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 48px;
	padding: 0 22px;
	background: transparent;
	border: 1px solid var(--ink);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 0;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
	box-shadow: none;
}
.cos-btn:hover,
.cos-btn:focus-visible { background: var(--ink); color: var(--paper); }
.cos-btn--primary {
	background: var(--ink);
	color: var(--paper);
}
.cos-btn--primary:hover,
.cos-btn--primary:focus-visible {
	background: var(--ink-soft);
	border-color: var(--ink-soft);
	color: var(--paper);
}
.cos-btn--ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--line-strong);
}
.cos-btn--ghost:hover,
.cos-btn--ghost:focus-visible {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}
.cos-btn--block {
	width: 100%;
	justify-content: space-between;
	height: 56px;
}
.cos-btn .material-symbols-outlined { font-size: 18px; }

/* Cart wrapper — full-width editorial layout, but capped on ultra-wide screens
   so the items column doesn't stretch absurdly. */
.cos-woo.woocommerce-cart .woocommerce { padding: 24px var(--gutter) 0; }

.cos-cart {
	width: 100%;
	max-width: 1180px;   /* box centrada — não esticar até às margens em ecrãs largos */
	margin: 0 auto;
}

.cos-cart__header {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-bottom: 24px;
	margin-bottom: 24px;
}
.cos-cart__header .cos-cart__title,
.cos-cart__header .h1-display { font-size: var(--fs-h1-shop); letter-spacing: 0.02em; }

.cos-cart__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 460px;
	gap: 56px;
	align-items: start;
	padding-bottom: 80px;
}

/* Items column ─────────────────────────────────────────────── */
.cos-cart__items { min-width: 0; }
.cos-cart__list {
	display: flex;
	flex-direction: column;
	border: var(--hairline) solid var(--line);   /* caixa fechada nos 4 lados */
}
/* A border-bottom de cada linha serve de divisória; a última coincide com a
   borda da caixa, por isso removemo-la para não ficar dupla. */
.cos-cart__list .cos-cart-line:last-child { border-bottom: 0; }

/* COS-style line: large image flush-left, info panel right with a divided
   control bar pinned to the bottom edge of the image. */
.cos-cart-line {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	grid-template-rows: 1fr auto;
	grid-template-areas:
		"media body"
		"media bar";
	min-height: 200px;       /* a imagem (coluna esquerda) define a altura da linha */
	padding: 0;
	border-bottom: var(--hairline) solid var(--line);
}
.cos-cart-line__media {
	grid-area: media;
	width: 150px;
	align-self: stretch;     /* preenche a altura toda da linha */
	background: var(--sand);
	overflow: hidden;
}
.cos-cart-line__media a,
.cos-cart-line__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cos-cart-line__body {
	grid-area: body;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
/* Text content gets breathing room from the image; the control bar below
   spans the full panel width (its first cell re-adds the same inset). */
.cos-cart-line__head,
.cos-cart-line__variant,
.cos-cart-line__meta,
.cos-cart-line__backorder {
	padding-left: 30px;
	padding-right: 26px;
}
.cos-cart-line__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	padding-top: 22px;   /* respiração do título ao topo da caixa */
}
.cos-cart-line__name {
	flex: 1;
	min-width: 0;        /* deixa o título quebrar antes de tocar no preço */
	font-family: var(--sans);
	font-size: 13px;       /* alinhado com .cos-card__title (nome de produto do projeto) */
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink);
	line-height: 1.35;
}
.cos-cart-line__name a {
	color: inherit;
	text-decoration: none;
}
.cos-cart-line__name a:hover { text-decoration: underline; text-underline-offset: 3px; }

.cos-cart-line__price {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--stone);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	padding-top: 2px;
}
.cos-cart-line__price .woocommerce-Price-amount { color: var(--ink-soft); }
.cos-cart-line__price del { color: var(--stone-soft); margin-right: 6px; }

/* Subtitle under the name (colour / non-size variant) — COS shows "White". */
.cos-cart-line__variant {
	margin-top: 14px;
	font-family: var(--sans);
	font-size: 13px;
	color: var(--stone);
	letter-spacing: 0.01em;
	line-height: 1.4;
}

.cos-cart-line__meta {
	margin-top: 14px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--stone);
}
.cos-cart-line__meta dl { margin: 0; }
.cos-cart-line__meta dt {
	display: inline;
	font-weight: 500;
	margin-right: 4px;
}
.cos-cart-line__meta dd { display: inline; margin: 0; }
.cos-cart-line__meta dd p { display: inline; margin: 0; }
.cos-cart-line__meta dd::after { content: ""; display: block; margin-bottom: 2px; }

.cos-cart-line__backorder {
	margin: 14px 0 0;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--error);
	letter-spacing: 0.04em;
}

/* ── Control bar (COS): divided cells pinned to the bottom of the line ─────── */
.cos-cart-line__bar {
	grid-area: bar;
	display: flex;
	align-items: stretch;
	border-top: var(--hairline) solid var(--line);
}
.cos-cart-line__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	min-width: 0;          /* allow cells (and the size <select>) to shrink */
	padding: 0 14px;
	border-left: var(--hairline) solid var(--line);
}
/* Quantity + size share the flexible space; favourite and remove are fixed. */
.cos-cart-line__cell--qty {
	flex: 1 1 0;
	padding: 0 24px;           /* simétrico — o − e o + encostam às extremidades */
}
/* O stepper ocupa a largura toda da célula e empurra − / + para as pontas, com o
   número ao centro (em vez de ficarem agrupados no meio). */
.cos-cart-line__cell--qty .cos-cart-line__qty { width: 100%; }
.cos-cart-line__cell--size { flex: 1 1 0; }
.cos-cart-line__cell--fav,
.cos-cart-line__cell--remove {
	flex: 0 0 60px;
	padding: 0;
}

.cos-cart-line__size {
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

/* Functional size dropdown — carries the project's own typography. Overrides
   the global `.cos-woo select` box (border / mono / built-in arrow). */
.cos-cart-size {
	position: relative;
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	min-width: 0;
}
.cos-woo .cos-cart-size__select,
.cos-cart-size__select {
	width: auto !important;
	max-width: 100%;
	min-width: 0;
	margin: 0 !important;
	padding: 0 26px 0 4px !important;   /* room for our chevron on the right */
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-image: none !important;  /* drop the global select arrow */
	-webkit-appearance: none;
	appearance: none;
	font-family: var(--sans) !important;
	font-size: 14px !important;       /* alinhado com .cos-cart-line__size */
	font-weight: 500 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--ink) !important;
	line-height: 1 !important;
	text-align: center;
	text-align-last: center;
	cursor: pointer;
	box-shadow: none !important;
	outline: none;
}
.cos-cart-size__select:focus-visible {
	outline: 1px solid var(--ink);
	outline-offset: 4px;
}
.cos-cart-size__chevron {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	color: var(--ink);
	pointer-events: none;
}

/* While a size swap is in flight, dim the line and lock interaction. */
.cos-cart-line.is-updating { opacity: .5; pointer-events: none; }

/* Favourite (heart) — reuses the favorites toggle behaviour; styled to sit
   bare inside its cell. */
.cos-cart-line__fav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 60px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--ink);
	cursor: pointer;
	transition: color .15s ease;
}
.cos-cart-line__fav-icon { display: block; }
.cos-cart-line__fav .heart-fill { fill: none; transition: fill .15s ease; }
.cos-cart-line__fav.is-active .heart-fill,
.cos-cart-line__fav[aria-pressed="true"] .heart-fill { fill: currentColor; }
.cos-cart-line__fav:hover,
.cos-cart-line__fav:focus-visible { color: var(--ink); }
.cos-cart-line__fav:focus-visible { outline: 1px solid var(--ink); outline-offset: -3px; }

/* Quantity stepper (Woo's woocommerce_quantity_input output).
   Selector is prefixed with .cos-woo to beat the global
   `.cos-woo:not(.single-product) .quantity` rule (height 48px / ink border). */
.cos-woo .cos-cart-line__qty .quantity {
	display: flex;
	align-items: center;
	justify-content: space-between;   /* − à esquerda, + à direita, número ao centro */
	width: 100%;
	border: 0;
	border-radius: 0;
	height: 40px;
	background: transparent;
}
.cos-cart-line__qty .quantity .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}
.cos-cart-line__qty input.qty,
.cos-cart-line__qty .cos-qty__input {
	width: 40px !important;
	height: 100% !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	text-align: center !important;
	font-family: var(--mono) !important;
	font-size: 14px !important;       /* número da qty alinhado com o tamanho na barra */
	color: var(--ink) !important;
	letter-spacing: 0.02em !important;
	font-variant-numeric: tabular-nums !important;
	-moz-appearance: textfield;
}
.cos-cart-line__qty input.qty::-webkit-outer-spin-button,
.cos-cart-line__qty input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.cos-cart-line__qty input.qty:focus {
	outline: none;
	box-shadow: inset 0 0 0 1px var(--ink);
}
/* +/- buttons injected by cart-qty.js */
.cos-cart-line__qty .cos-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 100%;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	font-family: var(--sans);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	color: var(--ink);
	cursor: pointer;
	transition: color .12s ease;
	-webkit-appearance: none;
	appearance: none;
}
.cos-cart-line__qty .cos-qty__btn:hover,
.cos-cart-line__qty .cos-qty__btn:focus-visible {
	background: transparent;
	color: var(--stone);
}
.cos-cart-line__qty .cos-qty--has-stepper input.qty,
.cos-cart-line__qty .cos-qty--has-stepper .cos-qty__input { width: 40px !important; }

/* Hidden line subtotal (kept for WC fragments) — never shown, COS style. */
.cos-cart-line__subtotal { display: none !important; }

/* Remove (×) cell — icon only, centred. WC core crushes a.remove to ~12px, so
   force our own box. The "Remover" label is kept for screen readers but hidden
   visually (COS shows just the ×). */
.cos-cart-line__cell--remove .remove,
.cos-cart-line__cell--remove a.remove,
.cos-woo .cos-cart-line__cell--remove a.remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	height: 100% !important;
	min-height: 60px;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	color: var(--ink) !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: color .15s ease;
	line-height: 1 !important;
}
.cos-cart-line__cell--remove .remove:hover,
.cos-cart-line__cell--remove a.remove:hover,
.cos-woo .cos-cart-line__cell--remove a.remove:hover {
	color: var(--stone) !important;
	background: none !important;
}
.cos-cart-line__cell--remove .remove .material-symbols-outlined {
	font-size: 20px;
	color: inherit;
}
.cos-cart-line__cell--remove .cos-cart-line__remove-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* Actions row (coupon + update cart) */
.cos-cart__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px 40px;
	padding: 28px 0 0;
}
.cos-cart__coupon {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 280px;
	flex: 1 1 320px;
}
.cos-cart__coupon-label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--stone);
}
.cos-cart__coupon-field {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	align-items: stretch;
}
.cos-cart__coupon-input {
	height: 48px;
	border: 1px solid var(--line-strong);
	background: var(--paper);
	padding: 0 14px;
	font-family: var(--mono);
	font-size: 13px;
	color: var(--ink);
	letter-spacing: 0.02em;
	border-radius: 0;
}
.cos-cart__coupon-input:focus {
	outline: none;
	border-color: var(--ink);
}
.cos-cart__coupon .cos-btn {
	height: 48px;
	min-width: 96px;
}
.cos-cart__update {
	height: 48px;
	align-self: flex-end;
	min-width: 160px;
	flex: 0 0 auto;
}
/* As quantidades atualizam-se sozinhas por AJAX (cart-qty.js). O botão fica como
   fallback sem-JS e só se esconde quando o script está ativo. */
.cos-cart-autoupdate .cos-cart__update { display: none; }

/* Summary column (sticky) ─────────────────────────────────── */
.cos-cart__summary {
	position: sticky;
	top: 96px;
}
/* WC core's stylesheet forces .cart-collaterals into a 2-column float layout
   (.cart_totals { width: 48% }). Reset both layers so our single-column
   summary card fills its parent. */
.cos-cart__summary .cart-collaterals,
.cos-cart__summary .cos-cart__collaterals {
	display: block;
	grid-template-columns: 1fr;
	gap: 0;
	margin-top: 0;
	width: 100%;
}
.cos-cart__summary .cart_totals,
.cos-cart__summary .cos-cart-totals {
	width: 100% !important;
	float: none !important;
}

.cos-cart-totals {
	background: var(--paper);
	padding: 26px 26px 28px;
	border: var(--hairline) solid var(--line);
}
.cos-cart-totals__title {
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: var(--hairline) solid var(--line);
	white-space: nowrap;
}
/* Free-shipping progress at the top of the summary card — sits between the
   title and the totals, with a hairline below mirroring the drawer treatment. */
.cos-freeship--cart {
	margin: 0 0 18px;
	padding-bottom: 16px;
	border-bottom: var(--hairline) solid var(--line);
}
.cos-cart-totals__lines {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cos-cart-totals__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--stone);
	letter-spacing: 0.04em;
	margin: 0;
}
.cos-cart-totals__row dt {
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.cos-cart-totals__row dd {
	margin: 0;
	color: var(--ink);
	text-align: right;
	/* Money is content, not a code: sans + tabular reads as an amount and sets
	   it apart from the mono micro-labels (dt). */
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
}
.cos-cart-totals__row dd small { color: var(--stone); }
.cos-cart-totals__row.cart-discount dd { color: var(--ink); }
.cos-cart-totals__row.cart-discount dd .woocommerce-remove-coupon {
	display: inline-block;
	margin-left: 6px;
	font-size: 10px;
	color: var(--stone);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cos-cart-totals__row--total {
	margin-top: 12px;
	padding-top: 16px;
	border-top: var(--hairline) solid var(--line);
	align-items: baseline;
}
.cos-cart-totals__row--total dt {
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--ink);
}
.cos-cart-totals__row--total dd {
	font-family: var(--sans);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--ink);
	line-height: 1.1;
}
.cos-cart-totals__row--total dd .woocommerce-Price-amount { font-size: inherit; }
.cos-cart-totals__row--total dd .includes_tax,
.cos-cart-totals__row--total dd small {
	display: block;
	margin-top: 4px;
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--stone);
	text-transform: uppercase;
}
/* The nested .woocommerce-Price-amount also has class `.amount`, which the
   order-total rule promotes to 18px / weight 500. Force it to inherit so the
   "(inclui … € IVA)" line reads as one cohesive line of type. */
.cos-woo .cos-cart-totals__row--total dd .includes_tax .woocommerce-Price-amount,
.cos-woo .cos-cart-totals__row--total dd small .woocommerce-Price-amount,
.cos-cart-totals__row--total dd .includes_tax .woocommerce-Price-amount,
.cos-cart-totals__row--total dd small .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	font-family: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
}

/* Shipping row — stacked (label on top, methods + calculator below) so the
   radios and address form don't get crushed by the narrow summary card.
   Our cart-shipping.php override outputs <div class="…__row shipping">
   <dt>…</dt><dd>…</dd></div> matching the rest of the totals card. */
.cos-cart-totals__lines .shipping {
	display: block;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--stone);
}
.cos-cart-totals__lines .shipping dt {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 400;
	color: var(--stone);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
}
.cos-cart-totals__lines .shipping dd {
	display: block;
	margin: 0;
	padding: 0;
	color: var(--ink);
	font-family: var(--mono);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	text-align: left;
}
.cos-cart-totals__lines .woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.cos-cart-totals__lines .woocommerce-shipping-methods li {
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 1.35;
}
.cos-cart-totals__lines .woocommerce-shipping-methods li input[type="radio"] {
	width: 14px;
	height: 14px;
	margin: 0;
	accent-color: var(--ink);
	flex: 0 0 14px;
}
.cos-cart-totals__lines .woocommerce-shipping-methods li label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	flex: 1;
	font-family: var(--sans);
	font-size: 13px;
	letter-spacing: 0.01em;
	color: var(--ink);
	cursor: pointer;
}
.cos-cart-totals__lines .woocommerce-shipping-methods li label .amount,
.cos-cart-totals__lines .woocommerce-shipping-methods li label .woocommerce-Price-amount {
	color: var(--ink);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.cos-cart-totals__lines .woocommerce-shipping-destination {
	margin: 10px 0 0;
	/* A full sentence — set in sans for readability instead of cramped mono caps. */
	font-family: var(--sans);
	font-size: 12px;
	color: var(--stone);
	letter-spacing: 0;
	line-height: 1.5;
}
.cos-woo .cos-cart-totals__lines a.shipping-calculator-button,
.cos-cart-totals__lines .shipping-calculator-button {
	display: inline-block;
	margin-top: 18px;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	letter-spacing: 0.02em;
}

/* Shipping calculator (cart) — bring its inputs/button in line with the
   project. WC core ships a generic input style with 4px radius + dark
   reddish border that clashes with the editorial look. */
.cos-woo .shipping-calculator-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 14px 0 0;
	padding: 16px 0 0;
	border-top: var(--hairline) solid var(--line);
}
.cos-woo .shipping-calculator-form .form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
}
/* Some WC fields wrap label+input inside a plain <span> (state field).
   Flatten it so its label/input still follow the form-row column layout.
   Scope tightly to span:not(.select2-container) so we don't break the
   Select2 wrapper (collapsing it would orphan the absolutely-positioned
   dropdown arrow to a sticky ancestor). */
.cos-woo .shipping-calculator-form .form-row > span:not(.select2-container) {
	display: contents;
}
.cos-woo .shipping-calculator-form label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--stone);
	font-weight: 400;
	margin: 0;
}
.cos-woo .shipping-calculator-form input.input-text,
.cos-woo .shipping-calculator-form input[type="text"],
.cos-woo .shipping-calculator-form input[type="email"],
.cos-woo .shipping-calculator-form input[type="tel"],
.cos-woo .shipping-calculator-form select {
	width: 100%;
	height: 44px;
	border: 1px solid var(--line-strong);
	border-radius: 0;
	background: var(--paper);
	padding: 0 12px;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink);
	letter-spacing: 0.02em;
	box-shadow: none;
	outline: none;
}
.cos-woo .shipping-calculator-form input.input-text:focus,
.cos-woo .shipping-calculator-form input[type="text"]:focus,
.cos-woo .shipping-calculator-form select:focus {
	border-color: var(--ink);
}
.cos-woo .shipping-calculator-form p:last-of-type { margin: 6px 0 0; }
.cos-woo .shipping-calculator-form button.button,
.cos-woo .shipping-calculator-form button[name="calc_shipping"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	min-width: 160px;
	padding: 0 22px;
	background: var(--ink);
	color: var(--paper);
	border: 1px solid var(--ink);
	border-radius: 0;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cos-woo .shipping-calculator-form button.button:hover,
.cos-woo .shipping-calculator-form button.button:focus-visible {
	background: var(--paper);
	color: var(--ink);
}

.cos-cart-totals__checkout { margin-top: 22px; }
/* Match the type of every other button (sans · 13px · 0.2em · 500); the short
   PT label "Finalizar compra" fits on one line inside the summary card. */
.cos-cart__summary .cos-cart-totals__checkout .checkout-button,
.cos-cart__summary .checkout-button.button.alt,
body.cos-woo .cos-cart-totals__checkout .checkout-button {
	width: 100% !important;
	height: 54px !important;
	padding: 0 18px !important;
	font-size: 13px !important;
	letter-spacing: 0.2em !important;
	font-weight: 500 !important;
	justify-content: space-between !important;
	white-space: nowrap;
	gap: 10px !important;
}

.cos-cart-totals__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 14px 0 0;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--stone);
	white-space: nowrap;
}
.cos-cart-totals__note .material-symbols-outlined { font-size: 13px; }

/* Empty state ─────────────────────────────────────────────── */
.cos-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 80px 24px 120px;
	gap: 14px;
}
.cos-cart-empty__icon {
	font-size: 64px;
	color: var(--stone-soft);
	margin-bottom: 8px;
}
.cos-cart-empty__title {
	max-width: 24ch;
	margin: 0;
	font-size: var(--fs-h1-page);
	line-height: 1.15;
}
.cos-cart-empty__copy {
	max-width: 44ch;
	color: var(--stone);
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.55;
	margin: 0 0 12px;
}
.cos-cart-empty .cos-btn { min-width: 240px; }

/* Cross-sells (full-width, below cart layout) ─────────────── */
.cos-cross-sells {
	padding: 64px 0 96px;
	border-top: var(--hairline) solid var(--line);
}
.cos-cross-sells__head {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 32px;
}
.cos-cross-sells__head .h2-section { margin: 0; }
.cos-cross-sells .cos-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
@media (max-width: 1100px) { .cos-cross-sells .cos-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .cos-cross-sells .cos-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
	.cos-cart__layout {
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: 40px;
	}
}
@media (max-width: 900px) {
	.cos-woo.woocommerce-cart .woocommerce { padding: 16px 24px 0; }
	.cos-cart__layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.cos-cart__summary { position: static; }
	/* Convenção COS (tablet + mobile): imagem + info em cima, barra de controlos
	   a TODA a largura por baixo, na ordem ✕ | ♥ | − N + | tamanho. */
	.cos-cart-line {
		grid-template-columns: 130px minmax(0, 1fr);
		grid-template-rows: minmax(150px, auto) auto;
		grid-template-areas:
			"media body"
			"bar bar";
		min-height: 0;
	}
	.cos-cart-line__media { width: 130px; align-self: stretch; }
	.cos-cart-line__body { padding-bottom: 16px; }
	.cos-cart-line__head,
	.cos-cart-line__variant,
	.cos-cart-line__meta,
	.cos-cart-line__backorder { padding-left: 22px; padding-right: 20px; }
	.cos-cart-line__cell { padding: 0 12px; }
	/* ✕ + ♥ juntas valem a largura da imagem (130px → 65+65), para a divisória
	   ♥ | qty alinhar exatamente com a borda direita da foto (convenção COS). */
	.cos-cart-line__cell--remove { order: 1; flex: 0 0 65px; border-left: 0; }
	.cos-cart-line__cell--fav    { order: 2; flex: 0 0 65px; }
	/* qty e tamanho dividem o espaço restante em partes iguais. */
	.cos-cart-line__cell--qty    { order: 3; flex: 1 1 0; padding: 0 18px; }
	.cos-cart-line__cell--size   { order: 4; flex: 1 1 0; }
}
@media (max-width: 560px) {
	/* Convenção COS em mobile: imagem + info em cima, e a barra de controlos a
	   TODA a largura por baixo (atravessa também sob a imagem) — assim há espaço
	   e não fica apertado. */
	.cos-cart-line {
		grid-template-columns: 112px minmax(0, 1fr);
		grid-template-rows: minmax(130px, auto) auto;
		grid-template-areas:
			"media body"
			"bar bar";
		min-height: 0;
	}
	.cos-cart-line__media { width: 112px; align-self: stretch; }
	.cos-cart-line__body { padding-bottom: 16px; }
	/* Título + preço na mesma linha (preço em cima à direita), com respiração ao topo. */
	.cos-cart-line__head { padding-top: 16px; gap: 12px; }
	.cos-cart-line__head,
	.cos-cart-line__variant,
	.cos-cart-line__meta,
	.cos-cart-line__backorder { padding-left: 16px; padding-right: 16px; }
	.cos-cart-line__variant { margin-top: 10px; }
	.cos-cart-line__name { font-size: 13px; }
	.cos-cart-line__price { font-size: 13px; }
	/* Barra full-width, ordem COS: ✕ | ♥ | − N + | tamanho.
	   ✕ + ♥ = largura da imagem (112px → 56+56) para a divisória ♥ | qty bater
	   exatamente na borda direita da foto. */
	.cos-cart-line__cell { min-height: 54px; padding: 0 8px; }
	.cos-cart-line__cell--remove { order: 1; flex: 0 0 56px; border-left: 0; }
	.cos-cart-line__cell--fav    { order: 2; flex: 0 0 56px; }
	.cos-cart-line__cell--qty    { order: 3; flex: 1 1 0; padding: 0 18px; }
	.cos-cart-line__cell--size   { order: 4; flex: 1 1 0; }
	.cos-cart-line__qty .cos-qty__btn { width: 32px; font-size: 18px; }
	.cos-cart-line__qty input.qty,
	.cos-cart-line__qty .cos-qty__input,
	.cos-cart-line__qty .cos-qty--has-stepper input.qty { width: 34px !important; font-size: 14px !important; }
	.cos-cart-size__select,
	.cos-woo .cos-cart-size__select { font-size: 14px !important; padding-right: 24px !important; }
	.cos-cart__actions { flex-direction: column; align-items: stretch; gap: 16px; }
	.cos-cart__coupon  { flex: 0 0 auto; min-width: 0; }
	.cos-cart__update  { width: 100%; min-width: 0; }
	.cos-cart-totals { padding: 22px 20px 26px; }
}

/* WooCommerce notices on cart page — match editorial palette */
.cos-woo.woocommerce-cart .woocommerce-message,
.cos-woo.woocommerce-cart .woocommerce-info,
.cos-woo.woocommerce-cart .woocommerce-error {
	background: var(--paper-soft);
	border: 0;
	border-left: 2px solid var(--ink);
	color: var(--ink);
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	padding: 14px 18px;
	margin: 0 0 20px;
	border-radius: 0;
	list-style: none;
}
.cos-woo.woocommerce-cart .woocommerce-error { border-left-color: var(--error); }
.cos-woo.woocommerce-cart .woocommerce-message a.button,
.cos-woo.woocommerce-cart .woocommerce-info a.button {
	background: transparent;
	color: var(--ink);
	border: 0;
	padding: 0;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-left: 12px;
}

/* ── Gaveta do carrinho: CTAs do rodapé ──────────────────────────────────────
   Mobile / gaveta estreita (a gaveta é max-width:100vw, por isso em telemóveis
   ronda os 360–390px): os botões ficam à largura toda, empilhados — alvo de
   toque maior e sem texto espremido (regras base em atelier.css: coluna +
   width:100%). A partir de 480px, onde a gaveta tem espaço, "Finalizar compra"
   e "Ver carrinho" voltam a ficar lado a lado em duas colunas iguais. */
@media (min-width: 480px) {
	.drawer-foot { flex-direction: row; flex-wrap: wrap; }
	/* Ambos ocupam a linha toda, edge-to-edge, por cima dos dois CTAs: a barra
	   de progresso (e o seu separador) e o subtotal. */
	.drawer-foot .cos-freeship { flex: 0 0 100%; }
	.drawer-foot .subtotal { flex: 0 0 100%; }
	.drawer-foot .drawer-cta {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		justify-content: center;
		gap: 8px;
		padding: 0 12px;
		font-size: 12px;
		letter-spacing: 0.08em;
		white-space: nowrap;
	}
	.drawer-foot .drawer-cta .material-symbols-outlined { font-size: 16px; }
}

/* ── Checkout page (editorial restyle) ───────────────────────────────────── */

/* Wrapper — same horizontal gutter as cart so the editorial frame is consistent. */
.cos-woo.woocommerce-checkout .woocommerce { padding: 24px var(--gutter) 0; }

.cos-checkout {
	width: 100%;
	margin: 0;
}

.cos-checkout__header {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-bottom: 24px;
	margin-bottom: 24px;
}
.cos-checkout__header .cos-checkout__title { font-size: var(--fs-h1-shop); letter-spacing: 0.02em; }

/* Override the legacy `.cos-woo .checkout` 1.4fr/1fr grid for the editorial
   layout (matches cart: items left, sticky summary right). */
.cos-woo .checkout.cos-checkout__form { display: block; }

.cos-checkout__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
	padding-bottom: 80px;
}
.cos-checkout__layout--3col {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
}

.cos-checkout__main { min-width: 0; }
.cos-checkout__col {
	min-width: 0;
	background: var(--paper);
	border: var(--hairline) solid var(--line);
	padding: 26px 26px 28px;
}
.cos-checkout__col--summary { position: sticky; top: 96px; }
@media (max-width: 900px) {
	.cos-checkout__col--summary { position: static; }
	.cos-checkout__col { padding: 22px 20px 24px; }
}
.cos-checkout__col-title {
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: var(--hairline) solid var(--line);
}

/* Hide WC's per-section "Detalhes de facturação" / "Detalhes de envio"
   headings — the column-level title above already labels this block. */
.cos-woo .cos-checkout__col--details .woocommerce-billing-fields > h3,
.cos-woo .cos-checkout__col--details .woocommerce-shipping-fields > h3,
.cos-woo .cos-checkout__col--details .woocommerce-additional-fields > h3 {
	display: none;
}

/* Methods column (shipping + payment) ────────────────────────── */
.cos-checkout__methods-block + .cos-checkout__methods-block { margin-top: 32px; }

.cos-shipping-methods__list,
.cos-payment-methods__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.cos-shipping-methods__item,
.cos-payment-methods__item {
	position: relative;
	border-bottom: var(--hairline) solid var(--line);
}
.cos-shipping-methods__item:last-child,
.cos-payment-methods__item:last-child { border-bottom: 0; }

.cos-shipping-methods__input,
.cos-payment-methods__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cos-shipping-methods__label,
.cos-payment-methods__label {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	cursor: pointer;
	font-family: var(--sans);
	font-size: 13px;
	color: var(--ink);
}
.cos-shipping-methods__label::before,
.cos-payment-methods__label::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid var(--line-strong);
	background: var(--paper);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cos-shipping-methods__input:checked + .cos-shipping-methods__label::before,
.cos-payment-methods__input:checked + .cos-payment-methods__label::before {
	border-color: var(--ink);
	box-shadow: inset 0 0 0 4px var(--ink);
}
.cos-shipping-methods__input:focus-visible + .cos-shipping-methods__label::before,
.cos-payment-methods__input:focus-visible + .cos-payment-methods__label::before {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}
.cos-shipping-methods__price {
	font-variant-numeric: tabular-nums;
	color: var(--stone);
	min-width: 56px;
}
.cos-payment-methods__icon img {
	height: 18px;
	width: auto;
	vertical-align: middle;
	margin-right: 6px;
}
.cos-payment-methods__box {
	padding: 0 0 16px 30px;
	font-family: var(--sans);
	font-size: 12px;
	color: var(--stone);
	line-height: 1.55;
}
.cos-payment-methods__box p { margin: 0 0 8px; }
.cos-payment-methods__box :last-child { margin-bottom: 0; }
.cos-shipping-methods__empty,
.cos-payment-methods__empty {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--stone);
	margin: 8px 0 0;
}

/* Place-order block lives in col 3 (under the summary). Strip WC's default
   `#payment` chrome — our editorial card already provides the framing. */
.cos-woo .cos-checkout__col--summary .cos-checkout-place-order {
	background: transparent;
	border-top: var(--hairline) solid var(--line);
	margin: 18px 0 0;
	padding: 18px 0 0;
}
.cos-woo .cos-checkout__col--summary .form-row.place-order {
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cos-woo .cos-checkout__col--summary #place_order {
	width: 100%;
	height: 56px;
	margin: 0;
}

/* Customer details — single-column stack, override WC's .col2-set */
.cos-woo .cos-checkout__customer.col2-set,
.cos-checkout__customer {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	margin: 0;
}
.cos-woo .cos-checkout__customer .col-1,
.cos-woo .cos-checkout__customer .col-2 {
	width: 100%;
	max-width: 100%;
	float: none;
	margin: 0;
	padding: 0;
}

/* Panel — billing / shipping containers.
   ONE divider per section: the section heading's bottom border. No panel
   border-top or border-bottom — that creates twin lines + a hollow gap. */
.cos-checkout__panel {
	padding: 0;
	margin: 0 0 36px;
	border: 0;
}
.cos-checkout__panel:last-child { margin-bottom: 0; }

.cos-checkout__panel h3,
.cos-checkout__panel .woocommerce-billing-fields > h3,
.cos-checkout__panel .woocommerce-shipping-fields > h3,
.cos-checkout__panel .woocommerce-additional-fields > h3,
.cos-woo .cos-checkout__panel h3,
.cos-woo .cos-checkout__panel .woocommerce-billing-fields > h3,
.cos-woo .cos-checkout__panel .woocommerce-shipping-fields > h3,
.cos-woo .cos-checkout__panel .woocommerce-additional-fields > h3 {
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 22px;
	padding: 0 0 14px;
	border-top: 0;
	border-bottom: var(--hairline) solid var(--line);
}

/* WC's billing/shipping fieldsets render with .woocommerce-billing-fields__field-wrapper
   that uses a 2-column grid via inline ::after clearfix. We use a SINGLE column
   so every field (name, surname, address, etc.) is full-width and uniform. */
.cos-woo .woocommerce-billing-fields__field-wrapper,
.cos-woo .woocommerce-shipping-fields__field-wrapper,
.cos-woo .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}
.cos-woo .woocommerce-billing-fields__field-wrapper > .form-row,
.cos-woo .woocommerce-shipping-fields__field-wrapper > .form-row,
.cos-woo .woocommerce-additional-fields__field-wrapper > .form-row {
	margin-bottom: 0;
	gap: 4px;
	width: 100%;
	float: none;
}
/* Defeat WC's `.form-row-first` / `.form-row-last` 48%-float layout — every
   row is full-width in our single-column grid. */
.cos-woo .cos-checkout__form .form-row.form-row-first,
.cos-woo .cos-checkout__form .form-row.form-row-last,
.cos-woo .cos-checkout__form .form-row-wide,
.cos-woo .cos-checkout__form .form-row-full {
	width: 100%;
	float: none;
	margin-right: 0;
	margin-left: 0;
}

/* Input rhythm tweaks scoped to checkout — heightens the editorial feel */
.cos-checkout__form .form-row label,
.cos-woo .cos-checkout__form .form-row label,
.cos-woo .cos-checkout__form .form-row.woocommerce-invalid label,
.cos-woo .cos-checkout__form .form-row.validate-required label,
.cos-woo .cos-checkout__form .form-row.woocommerce-validated label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--stone);
	font-weight: 400;
	margin: 0;
}
.cos-woo .cos-checkout__form .form-row.woocommerce-invalid label,
.cos-woo .cos-checkout__form .form-row.woocommerce-invalid .required,
.cos-woo .cos-checkout__form .form-row.woocommerce-invalid abbr.required {
	color: var(--error) !important;
}
.cos-checkout__form .form-row .required,
.cos-checkout__form .form-row abbr.required,
.cos-woo .cos-checkout__form .form-row .required,
.cos-woo .cos-checkout__form .form-row abbr.required {
	color: var(--stone);
	text-decoration: none;
	border: 0;
	margin-left: 2px;
}

/* Override WC's default `.woocommerce-invalid` red border/label colours.
   These rules win against `frontend.css` because they're more specific. */
.cos-woo .cos-checkout__form .form-row.woocommerce-invalid input.input-text,
.cos-woo .cos-checkout__form .form-row.woocommerce-invalid select,
.cos-woo .cos-checkout__form .form-row.woocommerce-invalid textarea,
.cos-woo .cos-checkout__form .form-row.woocommerce-invalid .select2-container .select2-selection,
.cos-woo .cos-checkout__form .form-row.woocommerce-invalid .select2-container--default .select2-selection--single {
	border-color: var(--error) !important;
}
.cos-woo .cos-checkout__form .form-row.woocommerce-invalid input.input-text:focus,
.cos-woo .cos-checkout__form .form-row.woocommerce-invalid select:focus,
.cos-woo .cos-checkout__form .form-row.woocommerce-invalid textarea:focus {
	border-color: var(--error) !important;
}
.cos-woo .cos-checkout__form .form-row.woocommerce-validated input.input-text,
.cos-woo .cos-checkout__form .form-row.woocommerce-validated select,
.cos-woo .cos-checkout__form .form-row.woocommerce-validated .select2-container .select2-selection {
	border-color: var(--line-strong) !important;
}
.cos-woo .cos-checkout__form input[type="text"],
.cos-woo .cos-checkout__form input[type="email"],
.cos-woo .cos-checkout__form input[type="password"],
.cos-woo .cos-checkout__form input[type="tel"],
.cos-woo .cos-checkout__form input[type="number"],
.cos-woo .cos-checkout__form input[type="search"],
.cos-woo .cos-checkout__form input[type="url"],
.cos-woo .cos-checkout__form input.input-text,
.cos-woo .cos-checkout__form textarea,
.cos-woo .cos-checkout__form select {
	height: 48px;
	padding: 0 14px;
	font-size: 13px;
	letter-spacing: 0.02em;
	border-radius: 0 !important;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}
.cos-woo .cos-checkout__form textarea {
	height: auto;
	min-height: 96px;
	padding: 12px 14px;
	line-height: 1.55;
}
.cos-woo .cos-checkout__form .select2-container,
.cos-woo .cos-checkout__form .select2-container--default,
.cos-woo .cos-checkout__form .select2-container .select2-selection,
.cos-woo .cos-checkout__form .select2-container .select2-selection--single,
.cos-woo .cos-checkout__form .select2-container--default .select2-selection--single,
.cos-woo .cos-checkout__form .select2-container--default .select2-selection--multiple,
.cos-woo .cos-checkout__form .select2-dropdown,
.cos-woo .cos-checkout__form .select2-search__field {
	border-radius: 0 !important;
}
.cos-woo .cos-checkout__form .select2-container .select2-selection--single,
.cos-woo .cos-checkout__form .select2-container--default .select2-selection--single {
	height: 48px;
}
.cos-woo .cos-checkout__form .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 46px;
	font-size: 13px;
}
.cos-woo .cos-checkout__form .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px;
}

/* Some browsers (Safari/Firefox) and theme.json presets add a subtle
   border-radius to native form controls; defeat it everywhere in the form. */
.cos-woo .cos-checkout__form .form-row input,
.cos-woo .cos-checkout__form .form-row select,
.cos-woo .cos-checkout__form .form-row textarea,
.cos-woo .cos-checkout__form .woocommerce-input-wrapper input,
.cos-woo .cos-checkout__form .woocommerce-input-wrapper select,
.cos-woo .cos-checkout__form .woocommerce-input-wrapper textarea,
.cos-woo .cos-checkout-coupon__input,
.cos-woo #payment input[type="text"],
.cos-woo #payment input[type="email"],
.cos-woo #payment input[type="tel"],
.cos-woo #payment input[type="number"],
.cos-woo #payment input.input-text,
.cos-woo #payment select,
.cos-woo #payment textarea {
	border-radius: 0 !important;
}

/* Editorial checkbox treatment shared by every form-row checkbox in the
   checkout (Criar uma conta?, Enviar para morada diferente?, Manter sessão,
   newsletter opt-ins, etc). All checkboxes adopt the same ink accent + label
   typography so they read as a single family of controls. */
.cos-woo .cos-checkout__form input[type="checkbox"],
.cos-woo .cos-checkout__form input[type="radio"] {
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	accent-color: var(--ink);
	flex: 0 0 16px;
	border-radius: 0;
	vertical-align: middle;
}

.cos-woo .cos-checkout__form .form-row .woocommerce-form__label-for-checkbox,
.cos-woo .cos-checkout__form .form-row label.checkbox,
.cos-woo .cos-checkout__form .form-row.create-account label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	margin: 0;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
}
.cos-woo .cos-checkout__form .form-row.create-account {
	margin: 8px 0 4px;
}
.cos-woo .cos-checkout__form .woocommerce-account-fields {
	margin: 0 0 18px;
}

/* Account password fields (revealed when "Criar uma conta?" is ticked) */
.cos-woo .cos-checkout__form .create-account-fields,
.cos-woo .cos-checkout__form #account_password_field {
	margin-top: 4px;
}

/* Shipping address toggle (ship to a different address)
   WC renders this as <h3 id="ship-to-different-address"> — reset both the
   <h3> defaults and the global `.cos-woo h3` rule (which adds bottom border
   + padding-bottom). */
.cos-woo .cos-checkout__form h3#ship-to-different-address,
.cos-woo .cos-checkout__form #ship-to-different-address {
	display: block;
	margin: 8px 0 18px;
	padding: 0;
	border: 0;
	font-family: var(--sans);
	font-size: inherit;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.4;
}
.cos-woo .cos-checkout__form #ship-to-different-address > label,
.cos-woo .cos-checkout__form #ship-to-different-address .woocommerce-form__label,
.cos-woo .cos-checkout__form #ship-to-different-address .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	color: var(--ink);
}
.cos-woo .cos-checkout__form #ship-to-different-address > label span,
.cos-woo .cos-checkout__form #ship-to-different-address .woocommerce-form__label span {
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
}
.cos-woo .cos-checkout__form #ship-to-different-address-checkbox {
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	accent-color: var(--ink);
	flex: 0 0 16px;
	border-radius: 0;
}

/* Tiny breathing room above the woocommerce-shipping-fields wrapper that
   follows the `#ship-to-different-address` toggle, when it expands. */
.cos-woo .cos-checkout__form .woocommerce-shipping-fields { margin-top: 4px; }

/* The `<span class="woocommerce-input-wrapper">` that WC injects around every
   input must behave as a block so the input can fill the column width and
   the field hint sits underneath rather than next to the input. */
.cos-woo .cos-checkout__form .form-row .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}
.cos-woo .cos-checkout__form .form-row .woocommerce-input-wrapper > input,
.cos-woo .cos-checkout__form .form-row .woocommerce-input-wrapper > select,
.cos-woo .cos-checkout__form .form-row .woocommerce-input-wrapper > textarea {
	width: 100%;
}
.cos-woo .cos-checkout__form .form-row .description {
	margin-top: 6px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.02em;
	color: var(--stone);
	line-height: 1.45;
}

/* Order notes textarea — sit cleanly under the address grid */
.cos-checkout__form .woocommerce-additional-fields { margin-top: 4px; }
.cos-checkout__form .woocommerce-additional-fields h3 {
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
	font-weight: 500;
	margin: 0 0 14px;
	border: 0;
	padding: 0;
}

/* Aside ────────────────────────────────────────────────────── */
.cos-checkout__aside {
	position: sticky;
	top: 96px;
}
.cos-checkout__summary {
	background: transparent;
	border: 0;
	padding: 0;
}
.cos-checkout__summary-title {
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: var(--hairline) solid var(--line);
}

/* Review order — line items */
.cos-checkout-review {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
.cos-checkout-review__lines {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-bottom: 18px;
	border-bottom: var(--hairline) solid var(--line);
}
.cos-checkout-line {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: flex-start;
}
.cos-checkout-line__media {
	position: relative;
	width: 64px;
	height: 80px;
	flex: 0 0 64px;
	background: transparent;
	overflow: visible;
}
.cos-checkout-line__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: var(--sand);
}
.cos-checkout-line__qty-badge {
	position: absolute;
	top: -8px;
	right: -8px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px var(--paper-tint);
	z-index: 2;
}
.cos-checkout-line__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.cos-checkout-line__name {
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	line-height: 1.3;
}
.cos-checkout-line__meta {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--stone);
	line-height: 1.4;
}
.cos-checkout-line__meta dl { margin: 0; }
.cos-checkout-line__meta dt { display: inline; font-weight: 500; margin-right: 4px; }
.cos-checkout-line__meta dd { display: inline; margin: 0; }
.cos-checkout-line__meta dd p { display: inline; margin: 0; }
.cos-checkout-line__meta dd::after { content: ""; display: block; margin-bottom: 2px; }
.cos-checkout-line__subtotal {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Reuse cart-totals styling for the review-order totals (mirrors mark-up) */
.cos-checkout-review__totals {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Checkout CTAs + modal popups (login + coupon) ──────────────
   Two editorial ghost buttons replace the legacy inline notices.
   Stacked on mobile, side-by-side on desktop. */
.cos-checkout-intro {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 22px;
}
.cos-checkout-cta { flex: 1 1 0; min-width: 0; margin: 0; }
.cos-checkout-cta__button {
	width: 100%;
	justify-content: center;
	gap: 10px;
	height: 52px;
	padding: 0 22px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.cos-checkout-cta__button .material-symbols-outlined { font-size: 18px; }
.cos-checkout-cta__label { display: inline-block; }
@media (min-width: 768px) {
	.cos-checkout-intro { flex-direction: row; gap: 12px; }
}

/* Modal shell — shared by the login and coupon popups. */
.cos-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease;
}
.cos-modal[data-on="1"] { opacity: 1; pointer-events: auto; }
.cos-modal[hidden] { display: none; }
.cos-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--overlay-modal-backdrop);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.cos-modal__panel {
	position: relative;
	width: min(480px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	background: var(--paper);
	border: var(--hairline) solid var(--line);
	padding: 40px 32px 32px;
	box-shadow: var(--shadow-modal);
	transform: translateY(8px);
	transition: transform .22s ease;
}
.cos-modal[data-on="1"] .cos-modal__panel { transform: translateY(0); }
.cos-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var(--stone);
	cursor: pointer;
	border-radius: 0;
}
.cos-modal__close:hover,
.cos-modal__close:focus-visible { color: var(--ink); }
.cos-modal__close .material-symbols-outlined { font-size: 22px; }
.cos-modal__header { margin: 0 0 20px; text-align: center; }
.cos-modal__eyebrow {
	margin: 0 0 6px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--stone);
}
.cos-modal__title {
	margin: 0 0 8px;
	font-family: var(--sans);
	font-size: 26px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--ink);
}
.cos-modal__intro {
	margin: 0;
	font-family: var(--sans);
	font-size: 13px;
	line-height: 1.55;
	color: var(--stone);
}
.cos-modal__body { display: block; }
body.cos-modal-open,
html.cos-modal-open { overflow: hidden; }

/* Inline login form inside the modal — drop the global form.login border /
   padding and force every form-row (including WC's `.form-row-first` and
   `.form-row-last` 48% halves) to span the full modal width. */
.cos-woo .cos-modal__body form.login,
.cos-woo .cos-modal__body form.register {
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
}
.cos-woo .cos-modal__body form.login .form-row,
.cos-woo .cos-modal__body form.register .form-row,
.cos-woo .cos-modal__body form.login .form-row.form-row-first,
.cos-woo .cos-modal__body form.login .form-row.form-row-last,
.cos-woo .cos-modal__body form.login .form-row-wide {
	width: 100%;
	float: none;
	display: flex;
	margin-left: 0;
	margin-right: 0;
}
.cos-woo .cos-modal__body form.login .woocommerce-form__label-for-checkbox,
.cos-woo .cos-modal__body form.login .lost_password {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
}
.cos-woo .cos-modal__body form.login button[type="submit"],
.cos-woo .cos-modal__body form.login .button {
	width: 100%;
	margin-top: 4px;
}
.cos-woo .cos-modal__body form.login .password-input,
.cos-woo .cos-modal__body form.login .woocommerce-password-input {
	display: block;
	width: 100%;
}
.cos-woo .cos-modal__body form.login input[type="text"],
.cos-woo .cos-modal__body form.login input[type="email"],
.cos-woo .cos-modal__body form.login input[type="password"] {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	height: 48px;
}

/* Coupon form (now lives inside the coupon modal). The `!important`
   beats WC's inline `style="display:none"` injected by checkout.js. */
.cos-modal__body .cos-checkout-coupon__form,
.cos-woo .cos-modal__body form.checkout_coupon {
	display: flex !important;
	flex-direction: column;
	gap: 14px;
	padding: 0;
	background: transparent;
	border: 0;
	margin: 0;
}
.cos-modal__body .cos-checkout-coupon__field {
	grid-template-columns: 1fr;
	gap: 10px;
}
.cos-modal__body .cos-checkout-coupon__apply { width: 100%; min-width: 0; }
.cos-checkout-coupon__label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--stone);
}
.cos-checkout-coupon__field {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	align-items: stretch;
}
.cos-woo .cos-checkout-coupon__input {
	height: 44px;
	border: 1px solid var(--line-strong);
	background: var(--paper);
	padding: 0 12px;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink);
	letter-spacing: 0.02em;
	border-radius: 0;
}
.cos-woo .cos-checkout-coupon__input:focus {
	outline: none;
	border-color: var(--ink);
}
.cos-checkout-coupon__apply {
	height: 44px;
	min-width: 110px;
}

/* Inline login form (woocommerce_login_form output on checkout) ───
   WC's frontend.css ships `.woocommerce form.login` with a 5px radius and
   a faded purple border + 20px padding. Reset to the editorial pattern. */
.cos-woo form.login,
.cos-woo form.register,
.cos-woo form.lost_reset_password,
.cos-woo form.woocommerce-ResetPassword,
.cos-woo form.checkout_coupon {
	border: var(--hairline) solid var(--line);
	border-radius: 0;
	background: var(--paper);
	padding: 24px 26px;
	margin: 0 0 24px;
}
.cos-woo form.login .form-row,
.cos-woo form.register .form-row,
.cos-woo form.lost_reset_password .form-row,
.cos-woo form.woocommerce-ResetPassword .form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
	width: 100%;
	float: none;
}
.cos-woo form.login .form-row.form-row-first,
.cos-woo form.login .form-row.form-row-last {
	width: calc(50% - 8px);
	float: none;
	display: inline-flex;
	vertical-align: top;
}
.cos-woo form.login .form-row.form-row-first { margin-right: 16px; }
@media (max-width: 720px) {
	.cos-woo form.login .form-row.form-row-first,
	.cos-woo form.login .form-row.form-row-last {
		width: 100%;
		margin-right: 0;
	}
}
.cos-woo form.login label,
.cos-woo form.register label,
.cos-woo form.lost_reset_password label,
.cos-woo form.woocommerce-ResetPassword label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--stone);
	font-weight: 400;
}
.cos-woo form.login label .required,
.cos-woo form.login .required,
.cos-woo form.register label .required {
	color: var(--stone);
	text-decoration: none;
	border: 0;
}
.cos-woo form.login input[type="text"],
.cos-woo form.login input[type="email"],
.cos-woo form.login input[type="password"],
.cos-woo form.login input.input-text,
.cos-woo form.register input[type="text"],
.cos-woo form.register input[type="email"],
.cos-woo form.register input[type="password"],
.cos-woo form.register input.input-text,
.cos-woo form.lost_reset_password input.input-text,
.cos-woo form.lost_reset_password input[type="text"],
.cos-woo form.lost_reset_password input[type="password"],
.cos-woo form.woocommerce-ResetPassword input.input-text,
.cos-woo form.woocommerce-ResetPassword input[type="text"],
.cos-woo form.woocommerce-ResetPassword input[type="password"] {
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--line-strong);
	background: var(--paper);
	border-radius: 0;
	font-family: var(--mono);
	font-size: 13px;
	color: var(--ink);
	letter-spacing: 0.02em;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}
.cos-woo form.login input.input-text:focus,
.cos-woo form.register input.input-text:focus,
.cos-woo form.lost_reset_password input.input-text:focus,
.cos-woo form.woocommerce-ResetPassword input.input-text:focus {
	outline: none;
	border-color: var(--ink);
}

/* "Remember me" row + submit row ─ flat, no float oddities */
.cos-woo form.login .form-row:last-of-type {
	margin-bottom: 0;
}
.cos-woo form.login .lost_password {
	margin: 12px 0 0;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
}
.cos-woo form.login .lost_password a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cos-woo form.login label.woocommerce-form__label-for-checkbox,
.cos-woo form.login label.woocommerce-form__label-for-checkbox span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
}
.cos-woo form.login input[type="checkbox"] {
	width: 14px;
	height: 14px;
	margin: 0;
	accent-color: var(--ink);
	flex: 0 0 14px;
}

/* Submit — block primary, matches #place_order and cos-btn--primary */
.cos-woo form.login button[type="submit"],
.cos-woo form.login .woocommerce-button.button,
.cos-woo form.login button.woocommerce-button,
.cos-woo form.register button[type="submit"],
.cos-woo form.register .woocommerce-button.button,
.cos-woo form.lost_reset_password button[type="submit"],
.cos-woo form.lost_reset_password .woocommerce-button.button,
.cos-woo form.woocommerce-ResetPassword button[type="submit"],
.cos-woo form.woocommerce-ResetPassword .woocommerce-button.button {
	width: 100%;
	height: 52px;
	padding: 0 22px;
	background: var(--ink);
	color: var(--paper);
	border: 1px solid var(--ink);
	border-radius: 0;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
	transition: background .15s ease, border-color .15s ease;
}
.cos-woo form.login button[type="submit"]:hover,
.cos-woo form.login button[type="submit"]:focus-visible,
.cos-woo form.register button[type="submit"]:hover,
.cos-woo form.register button[type="submit"]:focus-visible,
.cos-woo form.lost_reset_password button[type="submit"]:hover,
.cos-woo form.lost_reset_password button[type="submit"]:focus-visible,
.cos-woo form.woocommerce-ResetPassword button[type="submit"]:hover,
.cos-woo form.woocommerce-ResetPassword button[type="submit"]:focus-visible {
	background: var(--ink-soft);
	border-color: var(--ink-soft);
}

/* Password visibility toggle injected by WC */
.cos-woo form.login .password-input,
.cos-woo form.register .password-input {
	position: relative;
	display: block;
	width: 100%;
}
.cos-woo form.login .show-password-input,
.cos-woo form.register .show-password-input {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	color: var(--stone);
	cursor: pointer;
}
.cos-woo form.login .show-password-input:hover,
.cos-woo form.register .show-password-input:hover { color: var(--ink); }

/* My Account — login + register tabbed UI ───────────────────── */
.cos-woo.woocommerce-account .woocommerce { padding: 32px var(--gutter) 80px; }
.cos-account-auth {
	max-width: 520px;
	margin: 0 auto;
	padding: 48px 0 32px;
}
@media (max-width: 720px) {
	.cos-account-auth { padding: 24px 0 32px; }
}
.cos-account-auth__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 0 0 24px;
}
.cos-account-auth__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 18px;
	background: var(--paper);
	border: 1px solid var(--line-strong);
	border-radius: 0;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
	box-shadow: none;
}
.cos-account-auth__tab:hover {
	background: var(--paper-soft);
	border-color: var(--ink);
}
.cos-account-auth__tab[aria-selected="true"] {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}
.cos-account-auth__tab[aria-selected="true"]:hover {
	background: var(--ink-soft);
	border-color: var(--ink-soft);
}
.cos-account-auth__tab:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}
.cos-account-auth__panels { display: block; }
.cos-account-auth__panel[hidden] { display: none; }
.cos-account-auth__hint {
	font-family: var(--sans);
	font-size: 12px;
	line-height: 1.55;
	color: var(--stone);
	margin: 0 0 12px;
}

/* Lost-password screen header (matches the tabbed login styling). */
.cos-account-auth--lost .cos-account-auth__header {
	margin: 0 0 22px;
	padding-bottom: 18px;
	border-bottom: var(--hairline) solid var(--line);
}
.cos-account-auth__eyebrow {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--stone);
	margin: 0 0 6px;
}
.cos-account-auth__title {
	font-family: var(--sans);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--ink);
	margin: 0 0 10px;
}
.cos-account-auth__intro {
	font-family: var(--sans);
	font-size: 13px;
	line-height: 1.55;
	color: var(--stone);
	margin: 0;
}
.cos-account-auth__back {
	margin: 16px 0 0;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
}
.cos-account-auth__back a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Privacy policy / generic paragraphs WC injects into the register form. */
.cos-woo .woocommerce-privacy-policy-text,
.cos-woo form.register p:not(.form-row):not(.woocommerce-FormRow) {
	font-family: var(--sans);
	font-size: 12px;
	line-height: 1.55;
	color: var(--stone);
	margin: 0 0 12px;
}
.cos-woo .woocommerce-privacy-policy-text a,
.cos-woo form.register p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Payment block + place order ─────────────────────────────── */
.cos-woo .woocommerce-checkout #payment,
.cos-woo .cos-checkout__summary #payment {
	background: transparent;
	border: 0;
	padding: 0;
	margin-top: 22px;
}
.cos-woo .woocommerce-checkout #payment ul.payment_methods {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	border: 0;
	background: transparent;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.cos-woo .woocommerce-checkout #payment ul.payment_methods li {
	padding: 12px 0;
	border-bottom: var(--hairline) solid var(--line);
	background: transparent;
}
.cos-woo .woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: 0; }
.cos-woo .woocommerce-checkout #payment ul.payment_methods li > input[type="radio"] {
	width: 14px;
	height: 14px;
	margin: 0 10px 0 0;
	accent-color: var(--ink);
	vertical-align: middle;
}
.cos-woo .woocommerce-checkout #payment ul.payment_methods li label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
	cursor: pointer;
}
.cos-woo .woocommerce-checkout #payment ul.payment_methods li label img {
	max-height: 22px;
	width: auto;
	margin: 0;
	display: inline-block;
	vertical-align: middle;
}
.cos-woo .woocommerce-checkout #payment ul.payment_methods li .payment_box {
	margin: 10px 0 0;
	padding: 12px 0 0;
	background: transparent;
	border: 0;
	border-top: 1px dashed var(--line);
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.6;
	color: var(--ink-soft);
}
.cos-woo .woocommerce-checkout #payment ul.payment_methods li .payment_box p { margin: 0; }
.cos-woo .woocommerce-checkout #payment ul.payment_methods li .payment_box::before { display: none; }

.cos-woo .woocommerce-checkout #payment .form-row.place-order {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
.cos-woo .woocommerce-checkout #payment .terms,
.cos-woo .woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
	margin: 0 0 14px;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink-soft);
	letter-spacing: 0.02em;
	line-height: 1.55;
}
.cos-woo .woocommerce-checkout #payment .terms label,
.cos-woo .woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--ink);
}
.cos-woo .woocommerce-checkout #payment .terms input[type="checkbox"],
.cos-woo .woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
	margin: 2px 0 0;
	accent-color: var(--ink);
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
}

/* Place order — primary cos-btn block style */
.cos-woo .woocommerce-checkout #place_order,
.cos-woo .woocommerce-checkout button#place_order {
	width: 100%;
	height: 56px;
	padding: 0 22px;
	background: var(--ink);
	color: var(--paper);
	border: 1px solid var(--ink);
	border-radius: 0;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 4px;
	box-shadow: none;
}
.cos-woo .woocommerce-checkout #place_order:hover,
.cos-woo .woocommerce-checkout #place_order:focus-visible,
.cos-woo .woocommerce-checkout button#place_order:hover,
.cos-woo .woocommerce-checkout button#place_order:focus-visible {
	background: var(--ink-soft);
	border-color: var(--ink-soft);
	color: var(--paper);
}

/* Trust note under the summary */
.cos-checkout__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 16px 0 0;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--stone);
	white-space: nowrap;
}
.cos-checkout__note .material-symbols-outlined { font-size: 13px; }

/* Notices on checkout — match cart treatment */
.cos-woo.woocommerce-checkout .woocommerce-message,
.cos-woo.woocommerce-checkout .woocommerce-info,
.cos-woo.woocommerce-checkout .woocommerce-error,
.cos-woo.woocommerce-checkout .woocommerce-NoticeGroup ul.woocommerce-error {
	background: var(--paper-soft);
	border: 0;
	border-left: 2px solid var(--ink);
	color: var(--ink);
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	padding: 14px 18px;
	margin: 0 0 20px;
	border-radius: 0;
	list-style: none;
}
.cos-woo.woocommerce-checkout .woocommerce-error,
.cos-woo.woocommerce-checkout .woocommerce-NoticeGroup ul.woocommerce-error { border-left-color: var(--error); }

/* Locked-out screen (registration disabled, not logged in) */
.cos-checkout-locked {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 80px 24px 120px;
	gap: 14px;
}
.cos-checkout-locked__icon {
	font-size: 64px;
	color: var(--stone-soft);
	margin-bottom: 8px;
}
.cos-checkout-locked__title {
	max-width: 30ch;
	margin: 0;
	font-size: clamp(20px, 1.8vw, 28px);
	line-height: 1.15;
}
.cos-checkout-locked .cos-btn { min-width: 240px; margin-top: 8px; }

/* Loading overlay shown by WC during ajax updates — neutralise default */
.cos-woo .blockUI.blockOverlay {
	background: var(--paper-92) !important;
}

/* Thank-you / order-received page ─────────────────────────── */
.cos-woo.woocommerce-order-received .woocommerce { padding: 24px var(--gutter) 64px; }

.cos-thankyou {
	max-width: 760px;
	margin: 0 auto;
	padding: 24px 0 80px;
}
.cos-thankyou__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 32px 0 40px;
	border-bottom: var(--hairline) solid var(--line);
	margin-bottom: 32px;
}
.cos-thankyou__icon {
	font-size: 56px;
	color: var(--ink);
	margin-bottom: 4px;
}
.cos-thankyou__header--failed .cos-thankyou__icon { color: var(--error); }
.cos-thankyou__title {
	max-width: 28ch;
	margin: 0;
	font-size: clamp(24px, 2.4vw, 36px);
	line-height: 1.1;
}
.cos-thankyou__copy {
	max-width: 52ch;
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-soft);
}
.cos-thankyou__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 12px;
}

/* Overview grid — order number / date / total / payment */
.cos-thankyou__overview {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;                       /* the 1px gaps reveal the container bg as hairline dividers */
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
	border: var(--hairline) solid var(--line);
	background: var(--line);        /* divider colour shown through the gaps */
}
/* WooCommerce adds clearfix ::before/::after (content:" "; display:table) to
   ul.order_details. As a flex container those pseudo-elements become stray flex
   items. Kill them so only the real fields are laid out. */
.cos-thankyou .cos-thankyou__overview.order_details::before,
.cos-thankyou .cos-thankyou__overview.order_details::after { content: none; display: none; }
.cos-thankyou__overview-item {
	flex: 1 1 200px;                /* equal-ish cells; the last row grows to fill — no orphan field, no empty cells */
	min-width: 0;                   /* allow shrinking so long values (email) wrap instead of overflowing */
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 22px;
	background: var(--paper-soft);
}
/* Reset WooCommerce's default `ul.order_details li` rules (float, margin-right:2em,
   padding-right:2em, dashed border-right, fixed width) — they have higher
   specificity and were breaking the flex layout (wide grey gaps, items not filling). */
.cos-thankyou__overview.order_details .cos-thankyou__overview-item {
	float: none;
	width: auto;
	margin: 0;
	padding: 20px 22px;
	border: 0;
}
@media (max-width: 520px) {
	.cos-thankyou__overview-item { flex-basis: 100%; }   /* single column on phones */
}
.cos-thankyou__overview-label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--stone);
}
.cos-thankyou__overview-value,
.cos-thankyou__overview-item strong {
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;   /* wrap long unbroken values (e.g. email) inside the cell */
}
.cos-thankyou__overview-value .woocommerce-Price-amount,
.cos-thankyou__overview-item strong .woocommerce-Price-amount { color: var(--ink); }

/* Order details (thank-you page + painel view-order). Partilhado entre
   `.cos-thankyou` e `.cos-account__main` — mesma tabela editorial. */
:is(.cos-thankyou, .cos-account__main) .woocommerce-order-details,
:is(.cos-thankyou, .cos-account__main) .woocommerce-customer-details {
	margin: 0 0 40px;
}
:is(.cos-thankyou, .cos-account__main) .woocommerce-order-details h2,
:is(.cos-thankyou, .cos-account__main) .woocommerce-customer-details h2,
:is(.cos-thankyou, .cos-account__main) .woocommerce-order-details__title {
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--ink);
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: var(--hairline) solid var(--line);
}
:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details,
:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-downloads {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--mono);
	font-size: 13px;
	color: var(--ink);
	background: transparent;
	border: 0;
}
:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details th,
:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details td {
	padding: 14px 0;
	/* WC core põe `border-top` por célula com `border-collapse: separate`,
	   o que aparece como segmentos quebrados quando o tr vai para grid no
	   mobile — zeramos top/sides e usamos só border-bottom para o separador. */
	border: 0;
	border-bottom: var(--hairline) solid var(--line);
	text-align: left;
	font-weight: 400;
	background: transparent;
}
:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details thead th {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--stone);
	padding: 14px 0;
	border-bottom: 1px solid var(--line-strong);
}
:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details tfoot th { color: var(--ink); font-weight: 500; padding: 14px 0; }
:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details td.product-total,
:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details td.product-quantity,
:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details tfoot td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
/* Tfoot: totais empilhados sem separadores entre si — só o último item do
   tbody dá o break visual; "order-total" leva uma linha discreta acima.
   WC core injecta `border-top` em `tfoot th/td` (specificity 0,2,3), por
   isso fazemos reset explícito para garantir que nada herda do core. */
:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details tfoot th,
:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details tfoot td {
	border: 0;
	padding: 6px 0;
}
:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details tfoot tr:first-child th,
:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details tfoot tr:first-child td {
	padding-top: 14px;
}
:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details tfoot tr.order-total th,
:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details tfoot tr.order-total td {
	padding-top: 12px;
	padding-bottom: 12px;
	border-top: var(--hairline) solid var(--line);
	font-weight: 600;
}
:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details .product-name a {
	color: var(--ink);
	border-bottom: 1px solid transparent;
	transition: border-color .15s ease;
}
:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details .product-name a:hover { border-bottom-color: var(--ink); }
:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details .product-quantity {
	color: var(--stone);
	font-weight: 400;
	margin-left: 4px;
}
:is(.cos-thankyou, .cos-account__main) .woocommerce-customer-details address {
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.6;
	color: var(--ink-soft);
	font-style: normal;
	padding: 18px 20px;
	background: var(--paper-soft);
	border: var(--hairline) solid var(--line);
	border-radius: 0;
}
:is(.cos-thankyou, .cos-account__main) .woocommerce-column__title {
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--ink);
	margin: 0 0 12px;
}

/* Cabeçalho da view-order: "Encomenda #98 criada a … e está actualmente …" */
.cos-account__main > p:has(> mark.order-number),
.cos-account__main > .woocommerce-customer-details + p,
.cos-account__main > p:first-of-type:has(mark) {
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.7;
	color: var(--ink-soft);
	background: var(--paper-soft);
	border-left: 2px solid var(--ink);
	padding: 14px 16px;
	margin: 0 0 28px;
}
.cos-account__main mark.order-number,
.cos-account__main mark.order-date,
.cos-account__main mark.order-status {
	background: transparent;
	color: var(--ink);
	font-weight: 500;
	padding: 0;
}

/* Layout de moradas no fundo do view-order (.col2-set com .col-1/.col-2)
   já é tratado pelo bloco anterior — só ajustamos o grid para 2-col aqui */
.cos-account__main .woocommerce-customer-details .col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-top: 8px;
}
@media (max-width: 720px) {
	.cos-account__main .woocommerce-customer-details .col2-set { grid-template-columns: 1fr; }
}

/* Lista "Actions" da encomenda (Cancel order, Pay) — botões secundários */
.cos-account__main .woocommerce-order-overview { display: none; } /* já mostrado pelo nosso <p> */

/* Responsive ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
	.cos-checkout__layout--3col {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 32px;
	}
	.cos-checkout__col--summary { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
	.cos-checkout__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 40px;
	}
}
@media (max-width: 900px) {
	.cos-woo.woocommerce-checkout .woocommerce { padding: 16px 24px 0; }
	.cos-checkout__layout,
	.cos-checkout__layout--3col {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.cos-checkout__col--summary { grid-column: auto; }
	.cos-checkout__aside { position: static; }
}
@media (max-width: 720px) {
	.cos-checkout-line { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; }
	.cos-checkout-line__media { width: 56px; height: 70px; }
	.cos-checkout__panel { padding: 22px 0; }
	:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details,
	:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details thead,
	:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details tbody,
	:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details tfoot {
		display: block;
		width: 100%;
	}
	:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details tbody tr,
	:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details tfoot tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 16px;
		row-gap: 8px;
		width: 100%;
		padding: 16px 0;
		border-bottom: var(--hairline) solid var(--line);
	}
	:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details tfoot tr {
		padding: 6px 0;
		border-bottom: 0;
	}
	:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details tfoot tr:first-child {
		padding-top: 14px;
	}
	:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details tfoot tr.order-total {
		padding: 12px 0;
		border-top: var(--hairline) solid var(--line);
	}
	:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details th,
	:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details td,
	:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details tfoot th,
	:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details tfoot td {
		display: block;
		padding: 0;
		/* Reset total — o WC core injecta `border-top` por célula que, com
		   `tr` em grid + column-gap, aparecia como segmentos quebrados. */
		border: 0;
		min-width: 0;
	}
	:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details td::before {
		content: none;
		display: none;
	}
	:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details td.product-name {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 4px 8px;
	}
	:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details .product-name a {
		min-width: 0;
		overflow-wrap: anywhere;
	}
	:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details .wc-item-meta {
		flex: 0 0 100%;
		margin-top: 6px;
	}
	:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details .product-quantity {
		flex: 0 0 auto;
		margin-left: 0;
		white-space: nowrap;
	}
	:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details td.product-total,
	:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details tfoot td {
		align-self: start;
		text-align: right;
		white-space: nowrap;
	}
	:is(.cos-thankyou, .cos-account__main) table.woocommerce-table--order-details tr.product-purchase-note td {
		grid-column: 1 / -1;
		text-align: left;
		white-space: normal;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   Painel da conta (cos-account*)
   Linguagem editorial — hairlines, type-led, sem caixas pesadas.
   ───────────────────────────────────────────────────────────────────────── */

/* Scope: anula o padding do wrapper `.woocommerce` apenas quando o painel
   da conta (logged-in) está montado dentro. Sem `:has()`, o login (logged-out)
   também perderia o padding e ficaria encostado ao header. */
.cos-woo.woocommerce-account .woocommerce:has(> .cos-account) { padding: 0; }

/* ── Anular floats default do WC (woocommerce-layout.css) ──
   O WC injecta `.woocommerce-MyAccount-navigation { float:left; width:30% }`
   e `.woocommerce-MyAccount-content { float:right; width:68% }`, bem como
   floats em `.col-1/.col-2/.form-row-*`. Forçamos block + 100% para o
   nosso grid mandar. */
.cos-account .woocommerce-MyAccount-navigation,
.cos-account .woocommerce-MyAccount-content {
	float: none !important;
	width: 100% !important;
}
.cos-account .col2-set,
.cos-account .woocommerce-Addresses { width: 100% !important; }
.cos-account .col2-set::before,
.cos-account .col2-set::after,
.cos-account .woocommerce-Addresses::before,
.cos-account .woocommerce-Addresses::after,
.cos-account form .form-row::before,
.cos-account form .form-row::after { content: none !important; }
.cos-account .col-1,
.cos-account .col-2,
.cos-account .u-column1,
.cos-account .u-column2,
.cos-account form .form-row-first,
.cos-account form .form-row-last,
.cos-account form .form-row-wide,
.cos-account form .form-row {
	float: none !important;
	width: auto !important;
}

/* ── Container ────────────────────────────────────────────── */
.cos-account {
	max-width: 1240px;
	margin: 0 auto;
	padding: 64px var(--gutter) 112px;
}

/* ── Cabeçalho ────────────────────────────────────────────── */
.cos-account__head {
	margin-bottom: 64px;
}
.cos-account__head-inner { max-width: 780px; }
.cos-account__eyebrow {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--stone);
	margin: 0 0 18px;
}
.cos-account__title {
	/* Igual ao título do checkout (.cos-shop__title / .cos-checkout__title) */
	font-family: var(--sans);
	font-weight: 400;
	font-size: var(--fs-h1-shop);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
}
.cos-account__title span { font-weight: 500; }

/* ── Layout — empilhado: menu (cards) no topo, conteúdo em baixo ── */
.cos-account__nav-wrap {
	margin-bottom: 56px;
}
.cos-account__main { min-width: 0; }

/* ── Menu em cards — hairline partilhado (mesma linguagem do painel) ── */
.cos-account-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	border-top: var(--hairline) solid var(--line);
	border-left: var(--hairline) solid var(--line);
}
.cos-account-nav__item {
	margin: 0;
	border-right: var(--hairline) solid var(--line);
	border-bottom: var(--hairline) solid var(--line);
	min-width: 0;
}
.cos-account-nav__link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	height: 100%;
	min-height: 124px;
	padding: 22px 20px;
	font-family: var(--sans);
	color: var(--stone);
	transition: background .25s ease, color .2s ease;
}
.cos-account-nav__link:hover { background: var(--paper-soft); color: var(--ink); }
.cos-account-nav__icon {
	font-size: 22px;
	color: var(--ink);
	line-height: 1;
	flex-shrink: 0;
	transition: color .2s ease;
}
.cos-account-nav__label {
	margin-top: auto;
	min-width: 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
	line-height: 1.3;
	white-space: normal;
	overflow-wrap: anywhere; /* quebra palavras longas (ex.: DESCARREGAMENTOS) em vez de transbordar */
	hyphens: auto;
}
.cos-account-nav__arrow {
	position: absolute;
	top: 22px;
	right: 20px;
	font-size: 16px;
	color: var(--stone);
	transition: transform .25s ease, color .2s ease;
}
.cos-account-nav__link:hover .cos-account-nav__arrow {
	color: var(--ink);
	transform: translate(4px, -4px);
}
/* Página atual — card destacado (cores invertidas) */
.cos-account-nav__item.is-active .cos-account-nav__link {
	background: var(--ink);
}
.cos-account-nav__item.is-active .cos-account-nav__link,
.cos-account-nav__item.is-active .cos-account-nav__icon,
.cos-account-nav__item.is-active .cos-account-nav__label,
.cos-account-nav__item.is-active .cos-account-nav__arrow {
	color: var(--paper);
}

/* ── Dashboard — bloco de boas-vindas ─────────────────────── */
.cos-account-dashboard__welcome {
	margin-bottom: 48px;
}
.cos-account-dashboard__eyebrow {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--stone);
	margin: 0 0 14px;
}
.cos-account-dashboard__title {
	font-family: var(--sans);
	font-weight: 400;
	font-size: var(--fs-h1-page);
	letter-spacing: 0;
	color: var(--ink);
	margin: 0 0 16px;
	line-height: 1.15;
}
.cos-account-dashboard__title span { font-weight: 500; }
.cos-account-dashboard__lede {
	font-size: 14px;
	line-height: 1.7;
	color: var(--ink-soft);
	max-width: 58ch;
	margin: 0;
}

/* ── Dashboard — quick-link grid (hairline-shared) ─────────── */
.cos-account-dashboard__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	border-top: var(--hairline) solid var(--line);
	border-left: var(--hairline) solid var(--line);
}
.cos-account-dashboard__card {
	margin: 0;
	border-right: var(--hairline) solid var(--line);
	border-bottom: var(--hairline) solid var(--line);
	min-width: 0;
}
.cos-account-dashboard__card-link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px 28px;
	height: 100%;
	min-height: 200px;
	transition: background .25s ease;
}
.cos-account-dashboard__card-link:hover { background: var(--paper-soft); }
.cos-account-dashboard__card-icon {
	font-size: 24px;
	color: var(--ink);
	line-height: 1;
}
.cos-account-dashboard__card-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	margin-top: auto;
}
.cos-account-dashboard__card-title {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
}
.cos-account-dashboard__card-desc {
	font-family: var(--sans);
	font-size: 13px;
	line-height: 1.6;
	color: var(--ink-soft);
}
.cos-account-dashboard__card-arrow {
	position: absolute;
	top: 32px;
	right: 28px;
	font-size: 18px;
	color: var(--stone);
	transition: transform .25s ease, color .2s ease;
}
.cos-account-dashboard__card-link:hover .cos-account-dashboard__card-arrow {
	color: var(--ink);
	transform: translate(4px, -4px);
}

/* ── Conteúdo do main (tabelas, formulários) — afinações ──── */
.cos-account__main > p:first-child {
	font-size: 14px;
	line-height: 1.65;
	color: var(--ink-soft);
	margin-top: 0;
}
.cos-account__main h2,
.cos-account__main h3 {
	font-family: var(--sans);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink);
	font-size: 14px;
	margin: 0 0 14px;
}

/* ── Página "Moradas" (my-address.php) ─────────────────────── */
.cos-account__main .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-top: 24px;
}
@media (max-width: 720px) {
	.cos-account__main .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}
}
.cos-account__main .woocommerce-Address {
	float: none !important;
	width: auto !important;
	padding: 24px;
	border: var(--hairline) solid var(--line);
	background: var(--paper);
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.cos-account__main .woocommerce-Address-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	border-bottom: var(--hairline) solid var(--line);
	padding-bottom: 16px;
	margin: 0;
}
.cos-account__main .woocommerce-Address-title h2,
.cos-account__main .woocommerce-Address-title h3 {
	font-family: var(--sans);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
	line-height: 1.2;
}
.cos-account__main .woocommerce-Address-title .edit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
	transition: opacity .15s ease;
}
.cos-account__main .woocommerce-Address-title .edit:hover { opacity: .65; }
.cos-account__main .woocommerce-Address address {
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.7;
	color: var(--ink-soft);
	font-style: normal;
	letter-spacing: 0.02em;
}

/* ── Formulários do painel (edit-account, edit-address) ─────
   NOTA: o styling de inputs / labels / selects / botões / checkboxes /
   select2 / notices vem todo dos selectores `.cos-checkout__form` que já
   existem mais acima neste ficheiro — a classe `cos-checkout__form` está
   também aplicada ao `<section class="cos-account__main ...">` em
   `myaccount/my-account.php`, exactamente para reutilizar 100% desse
   tratamento. Aqui só ficam regras *layout* específicas do painel. */
.cos-account__main form { margin-top: 8px; }

/* Wrappers que viram grid 2-col automaticamente */
.cos-account__main .woocommerce-EditAccountForm,
.cos-account__main .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
	margin-bottom: 24px;
}

/* O div .woocommerce-address-fields envolve o field-wrapper + <p>botão.
   Reset para layout normal de bloco (o grid mora no field-wrapper). */
.cos-account__main .woocommerce-address-fields { display: block; }

/* Reset margens das linhas — o grid trata do gap */
.cos-account__main .woocommerce-EditAccountForm > p,
.cos-account__main .woocommerce-address-fields__field-wrapper > .form-row,
.cos-account__main fieldset > p {
	margin: 0 !important;
}

/* Colunas: -first e -last ocupam 1 col, -wide / -full ocupam tudo */
.cos-account__main .form-row-first,
.cos-account__main .form-row-last { grid-column: span 1; }
.cos-account__main .form-row-wide,
.cos-account__main .form-row-full,
.cos-account__main .woocommerce-EditAccountForm > fieldset,
.cos-account__main .woocommerce-EditAccountForm > p:last-of-type {
	grid-column: 1 / -1;
}
.cos-account__main .woocommerce-EditAccountForm > .clear { display: none; }

/* Fieldset "Mudar palavra-passe" — também grid 2-col */
.cos-account__main fieldset {
	margin: 8px 0 0;
	padding: 0;
	border: 0; /* remove a caixa/outline default do browser à volta do fieldset */
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
}
/* Legend ("Alterar senha") como rótulo de secção, a ocupar as 2 colunas */
.cos-account__main fieldset > legend {
	grid-column: 1 / -1;
	float: none;
	width: 100%;
	padding: 0;
	margin: 0;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink);
}

/* Parágrafo do botão de submit — bloco full-width abaixo do grid */
.cos-account__main form > p:last-of-type:not(.form-row),
.cos-account__main .woocommerce-address-fields > p:last-of-type {
	margin: 24px 0 0;
}

/* Heading interior — ex. "MORADA DE FACTURAÇÃO" no form-edit-address */
.cos-account__main form > h2,
.cos-account__main form > h3 {
	font-family: var(--sans);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 24px;
}

/* ── Tabelas — encomendas / downloads ──────────────────────── */
.cos-account__main .woocommerce-orders-table,
.cos-account__main .shop_table:not(.woocommerce-table--order-details) {
	width: 100%;
	border-collapse: collapse;
	margin: 8px 0 0;
	font-family: var(--sans);
	font-size: 13px;
}
/* Sobe a especificidade para vencer `.woocommerce table.shop_table` (0,2,1)
   do WooCommerce default, que impõe border-collapse:separate + border exterior. */
.cos-account__main .woocommerce-orders-table.shop_table,
.cos-account__main .shop_table.shop_table:not(.woocommerce-table--order-details) {
	border: 0;
	border-collapse: collapse;
}
.cos-account__main .woocommerce-orders-table thead th,
.cos-account__main .shop_table:not(.woocommerce-table--order-details) thead th {
	text-align: left;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--stone);
	font-weight: 400;
	padding: 14px 12px;
	border-bottom: 1px solid var(--line-strong);
	background: transparent;
}
/* Inclui `th` (célula do nº da encomenda é um <th scope="row">), senão o
   border-top default do WooCommerce sobrevive só nessa célula → border duplo
   na metade esquerda. .shop_table duplicado sobe a especificidade p/ vencer WC. */
.cos-account__main .woocommerce-orders-table.shop_table tbody td,
.cos-account__main .woocommerce-orders-table.shop_table tbody th,
.cos-account__main .shop_table.shop_table:not(.woocommerce-table--order-details) tbody td,
.cos-account__main .shop_table.shop_table:not(.woocommerce-table--order-details) tbody th {
	padding: 18px 12px;
	border-top: 0; /* mata o border-top default do WooCommerce — evita separador duplo */
	border-bottom: var(--hairline) solid var(--line);
	color: var(--ink-soft);
	vertical-align: middle;
	background: transparent;
}
.cos-account__main .woocommerce-orders-table tbody tr:hover td {
	background: var(--paper-soft);
}
.cos-account__main .woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a,
.cos-account__main .woocommerce-orders-table .woocommerce-orders-table__cell-order-number {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--ink);
}
.cos-account__main .woocommerce-orders-table .woocommerce-orders-table__cell-order-date,
.cos-account__main .woocommerce-orders-table .woocommerce-orders-table__cell-order-total {
	font-variant-numeric: tabular-nums;
}
.cos-account__main .woocommerce-orders-table .woocommerce-orders-table__cell-order-status {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--stone);
}
.cos-account__main .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
	text-align: right;
	white-space: nowrap;
}

/* Botão "Ver" / acções da tabela — link-style editorial, sem hover-fill */
.cos-account__main .woocommerce-orders-table__cell-order-actions :is(a, button).button,
.cos-account__main .woocommerce-orders-table__cell-order-actions :is(a, button).woocommerce-button,
.cos-account__main .woocommerce-orders-table__cell-order-actions a {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	background: transparent !important;
	color: var(--ink) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--ink) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 0 2px !important;
	margin: 0 !important;
	min-height: 0 !important;
	font-family: var(--mono) !important;
	font-weight: 400 !important;
	font-size: 11px !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	transition: color .15s ease, border-color .15s ease;
}
.cos-account__main .woocommerce-orders-table__cell-order-actions :is(a, button).button:hover,
.cos-account__main .woocommerce-orders-table__cell-order-actions :is(a, button).woocommerce-button:hover,
.cos-account__main .woocommerce-orders-table__cell-order-actions a:hover {
	background: transparent !important;
	color: var(--stone) !important;
	border-bottom-color: var(--stone) !important;
	opacity: 1 !important;
}

/* Mobile-stacked (WC injecta data-title em cada <td>) ───────── */
@media (max-width: 720px) {
	.cos-account__main .woocommerce-orders-table thead,
	.cos-account__main .shop_table:not(.woocommerce-table--order-details) thead { display: none; }
	.cos-account__main .woocommerce-orders-table tbody tr,
	.cos-account__main .shop_table:not(.woocommerce-table--order-details) tbody tr {
		display: block;
		padding: 20px 0;
		border-bottom: var(--hairline) solid var(--line);
	}
	.cos-account__main .woocommerce-orders-table tbody tr:hover td { background: transparent; }
	.cos-account__main .woocommerce-orders-table tbody td,
	.cos-account__main .shop_table:not(.woocommerce-table--order-details) tbody td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 0;
		border: 0;
		gap: 16px;
	}
	.cos-account__main .woocommerce-orders-table tbody td::before,
	.cos-account__main .shop_table:not(.woocommerce-table--order-details) tbody td::before {
		content: attr(data-title);
		font-family: var(--mono);
		font-size: 11px;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--stone);
		font-weight: 400;
	}
	.cos-account__main .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
		justify-content: flex-end;
		padding-top: 12px;
	}
}

/* Cabeçalho "Não foram feitas encomendas." — info notice já tratada noutro bloco */

/* Paginação (Anterior / Seguinte) */
.cos-account__main .woocommerce-pagination {
	display: flex;
	justify-content: space-between;
	margin-top: 32px;
	gap: 12px;
}
.cos-account__main .woocommerce-pagination .button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent !important;
	color: var(--ink) !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	min-height: 0 !important;
	font-family: var(--mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	border-bottom: 1px solid var(--ink) !important;
	padding-bottom: 2px !important;
}
.cos-account__main .woocommerce-pagination .button:hover { opacity: .65; }

/* ── Responsivo ────────────────────────────────────────────── */
@media (max-width: 960px) {
	.cos-account {
		padding: 48px var(--gutter) 80px;
	}
	.cos-account__head { margin-bottom: 40px; }
	.cos-account__nav-wrap { margin-bottom: 48px; }
	.cos-account-dashboard__welcome { margin-bottom: 48px; }
}

@media (max-width: 720px) {
	.cos-account {
		padding: 36px 0 72px;
	}
	.cos-account__head,
	.cos-account__nav-wrap,
	.cos-account__main {
		padding-left: var(--gutter);
		padding-right: var(--gutter);
	}
	/* Menu: 2 cards por linha em mobile */
	.cos-account-nav__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.cos-account-nav__link {
		min-height: 104px;
		padding: 18px 16px;
		gap: 14px;
	}
	.cos-account-nav__label {
		font-size: 11px;
		letter-spacing: 0.08em;
	}
	/* deixa espaço à seta para o label não lhe passar por baixo */
	.cos-account-nav__arrow { top: 18px; right: 16px; }
	.cos-account-dashboard__grid {
		grid-template-columns: 1fr;
	}
	.cos-account-dashboard__card-link {
		padding: 28px 24px;
		min-height: 0;
		gap: 32px;
	}
	.cos-account-dashboard__card-arrow {
		top: 28px;
		right: 24px;
	}
}

@media (max-width: 480px) {
	.cos-account { --gutter: 24px; }
	.cos-account__head { margin-bottom: 32px; }
}

/* Shared keyboard focus ring. Keep this late in the file so component-level
   hover/focus color changes do not remove visible focus affordance. */
.cos-shell :is(
	a,
	button,
	summary,
	[tabindex],
	input[type="button"],
	input[type="submit"],
	input[type="reset"]
):focus-visible {
	outline: var(--focus-outline);
	outline-offset: var(--focus-outline-offset);
}

/* Text controls already communicate focus through their border. Adding the
   shared outline on top creates a duplicated ring around every input. */
.cos-shell :is(
	input:not([type]),
	input[type="date"],
	input[type="datetime-local"],
	input[type="email"],
	input[type="month"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="text"],
	input[type="time"],
	input[type="url"],
	input[type="week"],
	select,
	textarea
):focus,
.cos-shell :is(
	input:not([type]),
	input[type="date"],
	input[type="datetime-local"],
	input[type="email"],
	input[type="month"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="text"],
	input[type="time"],
	input[type="url"],
	input[type="week"],
	select,
	textarea
):focus-visible,
.cos-shell :is(.select2-selection, .select2-search__field):focus,
.cos-shell :is(.select2-selection, .select2-search__field):focus-visible {
	outline: 0;
	border-color: var(--ink);
}

.cos-shell :is(input[type="checkbox"], input[type="radio"]):not(
	.cos-shipping-methods__input,
	.cos-payment-methods__input
):focus-visible {
	outline: var(--focus-outline);
	outline-offset: var(--focus-outline-offset);
}

/* iOS/Android Safari fazem zoom automático ao focar um campo de texto com
   font-size < 16px. Em qualquer dispositivo tátil (pointer: coarse — apanha
   iPhones e iPads em qualquer orientação) e em viewports estreitas, forçamos
   16px em TODOS os controlos de texto para evitar esse salto de zoom. No
   desktop com rato mantém-se a tipografia de design, mais pequena.

   Notas:
   - `!important` é necessário para bater regras mais específicas (ex.: o input
     da newsletter, `.cos-woo` selects, etc.) sem ter de as perseguir uma a uma.
   - Sem o prefixo `.cos-shell` para também apanhar o campo de pesquisa do
     select2 (dropdowns de país/estado no checkout), que é anexado ao <body>.
   - Mexe só no font-size — cor, border e padding de cada campo ficam intactos. */
@media (pointer: coarse), (max-width: 1024px) {
	input:not([type]),
	input[type="date"],
	input[type="datetime-local"],
	input[type="email"],
	input[type="month"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="text"],
	input[type="time"],
	input[type="url"],
	input[type="week"],
	select,
	textarea,
	.select2-container .select2-search__field,
	.select2-container--default .select2-selection--single .select2-selection__rendered {
		font-size: 16px !important;
	}
}

/* Texto acessível / SEO escondido — presente no DOM para leitores de ecrã e
   crawlers, mas removido do layout visual. Usado pelo <h1> da home (e qualquer
   heading para o qual o layout editorial não tenha um espaço visível). Snippet
   a11y padrão do WordPress (clip + clip-path para cobrir todos os browsers). */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

/* Print */
@media print {
	.nav, .utility, .cos-newsletter, .footer, .stuck-bar, .cos-filters { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Favorites (wishlist)
   The header heart links to the dedicated /favoritos page (page-favoritos.php),
   which reuses the shop's .cos-grid + product card. Heart buttons (PDP, cards,
   cart) and the page-specific bits (header/loading/empty) live here.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Dedicated favorites page (/favoritos) ───────────────────────────────── */
/* `.cos-grid` (display:grid) and the empty/loading blocks (display:flex/block)
   are author styles, which beat the UA `[hidden]{display:none}` rule — so the
   `hidden` attribute the JS toggles would be ignored and the empty state would
   show even with products. Re-assert hidden explicitly (same fix the cart-dot
   badge needs below). */
.cos-grid[data-cos-fav-grid][hidden],
.cos-favorites-page__loading[hidden],
.cos-favorites-page__empty[hidden] {
	display: none;
}
/* Page header — stacks title + intro (unlike the shop header's 2-col grid),
   keeps the same side gutter and the hairline divider beneath. */
.cos-favorites-page__head {
	margin: 24px var(--gutter) 32px;
	padding-bottom: 24px;
	border-bottom: var(--hairline) solid var(--line);
}
.cos-favorites-page__intro {
	margin: 8px 0 0;
	max-width: 52ch;
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.6;
	color: var(--stone);
}
.cos-favorites-page__loading {
	margin-inline: var(--gutter);
	padding: 48px 0;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--stone);
}
/* Empty state — calm, centred, with a single way forward (back to the shop). */
.cos-favorites-page__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 72px 20px 96px;
	color: var(--stone);
}
.cos-favorites-page__empty .material-symbols-outlined {
	font-size: 40px;
	color: var(--line-strong);
}
.cos-favorites-page__empty-title {
	margin: 4px 0 0;
	font-family: var(--sans);
	font-size: 17px;
	color: var(--ink);
}
.cos-favorites-page__empty-copy {
	margin: 0;
	font-size: 14px;
	max-width: 36ch;
}
/* Botão inline (não full-width): largura ao conteúdo, centrado, e label + ›
   juntos (em vez do space-between dos CTAs de largura total). Vale no estado
   vazio e na vista partilhada. */
.cos-favorites-page .cos-favorites-page__shop {
	width: auto;
	display: inline-flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
	padding: 15px 30px;
}
/* CTA da vista partilhada — centrado por baixo do grid. */
.cos-favorites-page__own-cta {
	display: flex;
	justify-content: center;
	margin: 40px var(--gutter) 0;
}
.cos-favorites-page__own-cta .cos-favorites-page__shop { margin-top: 0; }

/* Linha de partilha da própria lista (rótulo + Copiar link + renovar).
   Simples por opção: uma lista pessoal só precisa de copiar o link. */
/* Partilha num popover — botão "Partilhar" discreto que abre um painel com
   Copiar + Renovar. O cabeçalho fica limpo; as opções só surgem ao clicar. */
.cos-fav-share { margin-top: 20px; }
.cos-fav-share--pop { position: relative; display: inline-flex; }
.cos-fav-share__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	background: none;
	border: var(--hairline) solid var(--line);
	border-radius: 0;
	color: var(--ink);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.cos-fav-share__toggle:hover { border-color: var(--line-strong); background: var(--ink-04); }
.cos-fav-share__toggle:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.cos-fav-share__toggle .material-symbols-outlined {
	font-size: 18px;
	font-variation-settings: 'wght' 300, 'opsz' 24, 'GRAD' 0, 'FILL' 0;  /* traço mais fino (mín. da fonte) */
}
.cos-fav-share__toggle[aria-expanded="true"] { border-color: var(--ink); }

/* Painel popover */
.cos-fav-share__pop {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 30;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: var(--hairline) solid var(--line-strong);
	box-shadow: var(--shadow-popover);
	padding: 6px;
}
.cos-fav-share__pop[hidden] { display: none; }
.cos-fav-share__copy,
.cos-fav-share__renew {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	background: none;
	border: 0;
	border-radius: 0;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
	text-align: left;
	cursor: pointer;
	transition: background-color .15s ease;
}
.cos-fav-share__copy svg { width: 16px; height: 16px; display: block; flex: none; }
.cos-fav-share__copy:hover,
.cos-fav-share__renew:hover { background: var(--ink-04); }
.cos-fav-share__copy:focus-visible,
.cos-fav-share__renew:focus-visible { outline: 1px solid var(--ink); outline-offset: -2px; }
.cos-fav-share__renew { color: var(--stone); }
.cos-fav-share__renew[disabled] { opacity: 0.5; cursor: progress; }
.cos-favorites-page__noscript { padding: 32px 0; color: var(--stone); }

/* PDP heart button — filled state when the product is saved.
   Material Symbols render as outline by default; FILL 1 fills the heart. */
.cta.secondary[data-cos-fav-toggle] .cta-icon {
	transition: font-variation-settings 0.15s ease;
}
.cta.secondary[data-cos-fav-toggle][aria-pressed="true"] .cta-icon {
	font-variation-settings: 'FILL' 1;
}

/* Header favorites icon stays a consistent outline heart regardless of count;
   the badge dot is what signals saved items. */
.nav-icon--fav .nav-icon-glyph .heart-fill {
	fill: transparent;
}

/* .cart-dot forces display:inline-flex, which beats the UA [hidden] rule — so
   the badge must be explicitly hidden when there are no favorites. */
.nav-icon--fav .cart-dot[hidden],
.cos-mobile-nav__action .cart-dot[hidden] {
	display: none;
}

/* ── Product card favorite button (archive/shop) ──────────────────────────
   Sits inside .cos-card__media (bottom-right of the photo); JS stops the click
   from bubbling to the card link. Revealed on hover; stays visible once saved
   or on touch. */
.cos-card__fav {
	position: absolute;
	/* 18px from the edges (like COS): leaves room for the 54px tap area to sit
	   flush in the corner without the media's overflow:hidden clipping it. */
	bottom: 18px;
	right: 18px;
	/* Above the full-height next-arrow strip (z-index 3) so the heart stays
	   clickable in the bottom-right corner where the two overlap. */
	z-index: 4;
	/* 24px é o mínimo WCAG 2.2 (SC 2.5.8) / regra axe `target-size`. O ícone
	   mantém-se a 14px (ver .cos-card__fav-icon), por isso a pílula continua
	   discreta — só com mais respiro à volta. */
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--paper-92);
	color: var(--ink);
	cursor: pointer;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
}
/* COS-style: small icon, generous tap area. Extend the touch target to 54px
   (matches COS: 18px pill + 18px padding each side) without enlarging the pill. */
.cos-card__fav::before {
	content: "";
	position: absolute;
	inset: -18px;
}
.cos-card__fav-icon {
	width: 14px;        /* smaller heart */
	height: 14px;
}
.cos-card:hover .cos-card__fav,
.cos-card__fav:focus-visible,
.cos-card__fav[aria-pressed="true"] {
	opacity: 1;
	transform: none;
}
.cos-card__fav:hover { background: var(--paper); }
.cos-card__fav:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.cos-card__fav .heart-fill {
	fill: transparent;
	transition: fill 0.15s ease;
}
.cos-card__fav[aria-pressed="true"] .heart-fill { fill: currentColor; }

/* No hover on touch devices (tablet/mobile) — there's no hover to reveal the
   button, so keep it always visible and a touch smaller. */
@media (hover: none) {
	/* Sem hover para revelar — fica sempre visível. A área de toque já está
	   alargada a ~48px via ::before, por isso a pílula mantém-se pequena. */
	.cos-card__fav { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Header search overlay (live product suggestions)
   ───────────────────────────────────────────────────────────────────────── */
.cos-search {
	position: fixed;
	inset: 0;
	z-index: 1200;
}
.cos-search[hidden] { display: none; }

.cos-search__scrim {
	position: absolute;
	inset: 0;
	background: var(--overlay-scrim);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.cos-search[data-on="1"] .cos-search__scrim { opacity: 1; }

.cos-search__panel {
	position: relative;
	background: var(--paper);
	border-bottom: var(--hairline) solid var(--line);
	padding: 22px var(--gutter) 28px;
	max-height: 82vh;
	overflow-y: auto;
	transform: translateY(-100%);
	transition: transform 0.3s cubic-bezier(.2,.7,.3,1);
}
.cos-search[data-on="1"] .cos-search__panel { transform: translateY(0); }

.cos-search__form {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 920px;
	margin: 0 auto;
	border-bottom: 1px solid var(--ink);
	padding-bottom: 12px;
}
.cos-search__icon { display: inline-flex; color: var(--stone); flex: none; }
.cos-search__icon svg { width: 22px; height: 22px; }
.cos-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	font-family: var(--sans);
	font-size: clamp(15px, 1.6vw, 18px);
	letter-spacing: 0.01em;
	color: var(--ink);
	padding: 6px 0;
}
.cos-search__input:focus { outline: none; }
.cos-search__input::placeholder { color: var(--stone-soft); }
/* Hide the browser's native search clear button (the blue ✕). */
.cos-search__input::-webkit-search-cancel-button,
.cos-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}
.cos-search__close {
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--ink);
	display: inline-flex;
	flex: none;
	padding: 4px;
}
.cos-search__close .material-symbols-outlined { font-size: 24px; }

.cos-search__results {
	max-width: 920px;
	margin: 16px auto 0;
}
.cos-search__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 0;
	border-bottom: var(--hairline) solid var(--line);
	color: var(--ink);
	text-decoration: none;
	transition: opacity 0.15s ease;
}
.cos-search__item:hover { opacity: 0.65; }
.cos-search__thumb {
	width: 52px;
	height: 66px;
	flex: none;
	background: var(--sand);
	overflow: hidden;
}
.cos-search__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cos-search__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cos-search__name {
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--ink);
}
.cos-search__price {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--stone);
}
.cos-search__price del { opacity: 0.6; margin-right: 6px; }
.cos-search__all {
	display: inline-block;
	margin-top: 16px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--ink);
}
.cos-search__all:hover { color: var(--stone); }
.cos-search__empty,
.cos-search__loading {
	padding: 16px 0;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--stone);
}

/* Lock background scroll while the overlay is open. */
html.cos-search-open,
body.cos-search-open { overflow: hidden; }