/*
Theme Name: EPUG Loja
Theme URI: https://freakrobotics.com/
Author: FreakRobotics
Description: Tema WooCommerce da loja EPUG Metalomecânica. Reproduz o design importado (design canvas) como tema clássico WordPress/WooCommerce.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: epug-loja
WC requires at least: 8.0
WC tested up to: 9.9
*/

/* ============================================================
   Design tokens (extraídos do design EPUG Loja.dc.html)
   ============================================================ */
:root {
  --epug-orange: #EF5A0C;
  --epug-orange-soft: #FEF0E6;
  --epug-orange-hover: #d24e0a;
  --epug-navy: #0E1F33;
  --epug-ink: #14171B;
  --epug-ink-2: #3B434D;
  --epug-muted: #8A929B;
  --epug-muted-2: #565E68;
  --epug-line: #E4E7EB;
  --epug-line-2: #E9ECEF;
  --epug-bg: #F5F7F9;
  --epug-bg-2: #EEF1F4;
  --epug-white: #ffffff;
  --epug-green: #1C8A54;
  --epug-green-soft: #E7F4EC;
  --epug-danger: #C0392B;

  --epug-radius: 13px;
  --epug-radius-sm: 8px;
  --epug-shadow: 0 12px 26px rgba(14,31,51,.09);
  --epug-maxw: 1560px;   /* mais largura útil: menos margem às bordas, cartões maiores */

  --epug-font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --epug-font-head: 'Archivo', var(--epug-font-sans);
  --epug-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }
body.epug {
  margin: 0;
  font-family: var(--epug-font-sans);
  color: var(--epug-ink);
  background: var(--epug-white);
  font-size: 15px;
  line-height: 1.55;
  /* Sticky footer: coluna a toda a altura, o main cresce e empurra o footer. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#epug-main { flex: 1 0 auto; }
.epug-footer { flex-shrink: 0; }
.epug a { color: inherit; text-decoration: none; }
.epug img { max-width: 100%; height: auto; }
/* Padding lateral que encolhe em ecrãs pequenos — o conteúdo fica mais perto
   das bordas sem colar (clamp: 14px em mobile, 30px em desktop largo). */
.epug-container { max-width: var(--epug-maxw); margin: 0 auto; padding: 0 clamp(14px, 2.2vw, 30px); }
h1,h2,h3,h4 { font-family: var(--epug-font-head); color: var(--epug-ink); line-height: 1.1; }

/* ---- Buttons ---- */
.epug-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--epug-font-head); font-weight: 700; font-size: 14px;
  padding: 11px 18px; border-radius: var(--epug-radius-sm);
  background: var(--epug-orange); color: #fff; border: 0; cursor: pointer;
  transition: background .15s;
}
.epug-btn:hover { background: var(--epug-orange-hover); }
.epug-btn--ghost { background: transparent; color: var(--epug-ink); border: 1px solid var(--epug-line); }

/* ============================================================
   Header
   ============================================================ */
.epug-topbar { background: var(--epug-navy); color: #AEB9C7; font-size: 12.5px; }
.epug-topbar .epug-container { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.epug-topbar__status { display: flex; align-items: center; gap: 8px; color: #C7D2DE; }
.epug-dot { width: 7px; height: 7px; border-radius: 50%; background: #3FBF7F; display: inline-block; }
.epug-topbar__links { display: flex; align-items: center; gap: 2px; }
.epug-topbar__links a { color: #C7D2DE; padding: 6px 10px; }
.epug-topbar__sep { opacity: .3; }

/* Seletor de idioma no topbar (Polylang) */
.epug-langsel { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; }
.epug-langsel__opt { display: inline-flex; align-items: center; gap: 5px; color: #C7D2DE; padding: 4px 8px; border-radius: var(--epug-radius-sm); font-size: 12px; font-weight: 600; }
.epug-langsel__opt img { width: 16px; height: auto; display: block; border-radius: 2px; }
.epug-langsel__opt:hover { background: rgba(255,255,255,.08); color: #fff; }
.epug-langsel__opt.is-active { color: #fff; background: rgba(255,255,255,.1); }

/* Topbar em ecrãs estreitos — a linha é `nowrap` e os links somam ~386px, o que
   não encolhe abaixo do min-content e empurra o documento para lá dos 375px
   (scroll horizontal em todas as páginas). Deixa-se envolver e dispensa-se o
   texto de estado, que é decorativo. */
@media (max-width: 900px) {
  .epug-topbar .epug-container {
    flex-wrap: wrap; justify-content: center; gap: 0 8px; min-height: 0;
    padding-top: 4px; padding-bottom: 4px;
  }
  .epug-topbar__status { display: none; }
  .epug-topbar__links { flex-wrap: wrap; justify-content: center; min-width: 0; }
  .epug-topbar__links a { padding: 7px 8px; }
  .epug-langsel { margin-right: 2px; }
}
/* Em telemóvel a topbar fica só com o seletor de idioma: os três links estão
   duplicados no footer (Apoio técnico, Pedido de orçamento) e no botão de conta
   do header, e em duas linhas roubavam ~40px de ecrã em todas as páginas. */
@media (max-width: 640px) {
  .epug-topbar__links > a,
  .epug-topbar__sep { display: none; }
  .epug-langsel { margin-right: 0; }
  .epug-langsel__opt { padding: 6px 9px; }
}

.epug-header {
  position: sticky; top: 0; z-index: 60; background: #fff;
  border-bottom: 1px solid var(--epug-line); box-shadow: 0 1px 0 rgba(20,23,27,.02);
}
/* 3 colunas: logo à esquerda, pesquisa CENTRADA, ações à direita. As colunas
   laterais (1fr) são iguais → a pesquisa fica sempre no centro real do header. */
.epug-header__main { min-height: 76px; padding: 14px 22px; display: grid; grid-template-columns: 1fr minmax(0, 620px) 1fr; align-items: center; gap: 22px; }
.epug-logo { display: flex; align-items: center; gap: 10px; justify-self: start; }
.epug-logo img, .epug-logo .custom-logo { height: 40px; width: auto; max-width: none; object-fit: contain; display: block; }
.epug-logo a { display: block; line-height: 0; }
.epug-search { justify-self: center; width: 100%; max-width: 620px; display: flex; }
.epug-search input {
  flex: 1; border: 1px solid var(--epug-line); border-right: 0;
  border-radius: var(--epug-radius-sm) 0 0 var(--epug-radius-sm);
  padding: 12px 14px; font-size: 14px; font-family: var(--epug-font-sans); outline: none;
}
.epug-search button { border-radius: 0 var(--epug-radius-sm) var(--epug-radius-sm) 0; }
.epug-header__actions { display: flex; align-items: center; gap: 10px; justify-self: end; }
.epug-headbtn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border: 1px solid var(--epug-line); border-radius: 999px;
  font-family: var(--epug-font-head); font-weight: 600; font-size: 13.5px;
  color: var(--epug-ink); background: #fff; line-height: 1; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.epug-headbtn svg { flex-shrink: 0; }
.epug-headbtn:hover { border-color: var(--epug-orange); color: var(--epug-orange); box-shadow: 0 2px 10px rgba(255,106,26,.16); }
.epug-headbtn--cart { position: relative; background: var(--epug-orange); border-color: var(--epug-orange); color: #fff; }
.epug-headbtn--cart:hover { background: #e85f14; border-color: #e85f14; color: #fff; box-shadow: 0 4px 14px rgba(255,106,26,.32); }
.epug-headbtn__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: #fff; color: var(--epug-orange); font-size: 12px; font-weight: 700;
  font-style: normal; margin-left: 2px;
}
.epug-headbtn__count[hidden] { display: none; }

/* ---- Primary nav ---- */
.epug-nav { border-top: 1px solid var(--epug-line-2); }
.epug-nav .epug-container { display: flex; align-items: center; gap: 6px; min-height: 50px; flex-wrap: wrap; }
.epug-nav ul, .epug-nav__menu { list-style: none; margin: 0; padding: 0; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.epug-nav a { font-family: var(--epug-font-head); font-weight: 600; font-size: 14px; padding: 8px 12px; color: var(--epug-ink-2); display: inline-block; }
.epug-nav a:hover { color: var(--epug-orange); }
.epug-megamenu { position: relative; }
.epug-nav__cats { display: inline-flex; align-items: center; gap: 8px; background: var(--epug-navy); color: #fff; padding: 9px 14px; border-radius: var(--epug-radius-sm); border: 0; font-family: var(--epug-font-head); font-weight: 600; font-size: 14px; cursor: pointer; }
.epug-megamenu__panel {
  position: absolute; top: 100%; left: 0; margin-top: 8px; z-index: 70;
  background: #fff; border: 1px solid var(--epug-line); border-radius: var(--epug-radius);
  box-shadow: var(--epug-shadow); padding: 12px; min-width: 580px;
  display: grid; grid-template-columns: repeat(3, minmax(170px, 1fr)); gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .14s;
}
.epug-megamenu:hover .epug-megamenu__panel,
.epug-megamenu.is-open .epug-megamenu__panel { opacity: 1; visibility: visible; transform: none; }
.epug-megamenu__panel a { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: var(--epug-radius-sm); font-size: 13.5px; color: var(--epug-ink-2); }
.epug-megamenu__panel a:hover { background: var(--epug-bg); color: var(--epug-orange); }
.epug-megamenu__panel a em { font-style: normal; font-size: 11px; color: var(--epug-muted); font-family: var(--epug-font-mono); }
.epug-megamenu__all { grid-column: 1 / -1; border-top: 1px solid var(--epug-line-2); margin-top: 6px; padding-top: 12px !important; color: var(--epug-orange) !important; font-weight: 600; }
.epug-nav__compat { margin-left: auto; color: var(--epug-orange); display: inline-flex; align-items: center; gap: 6px; }

/* Atalhos das categorias principais (ao lado do menu expansível). */
.epug-nav__quick { list-style: none; margin: 0; padding: 0; display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.epug-nav__quick a { font-family: var(--epug-font-head); font-weight: 600; font-size: 13.5px; padding: 7px 11px; color: var(--epug-ink-2); border-radius: var(--epug-radius-sm); }
.epug-nav__quick a:hover { color: var(--epug-orange); background: var(--epug-bg); }
.epug-nav__quick-all { color: var(--epug-muted) !important; }
/* Categoria atual em destaque (nos atalhos e no menu expansível). */
.epug-nav__quick a.is-current { color: var(--epug-orange); background: var(--epug-orange-soft); }
.epug-megamenu__panel a.is-current { background: var(--epug-orange-soft); color: var(--epug-orange); }
.epug-megamenu__panel a.is-current em { color: var(--epug-orange); }

/* ============================================================
   Home — hero / features / categorias
   ============================================================ */
.epug-kicker { font-family: var(--epug-font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--epug-orange); }

.epug-hero { background: var(--epug-navy); color: #fff; overflow: hidden; }
.epug-hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; padding: 58px 22px; }
.epug-hero__tags { font-family: var(--epug-font-mono); font-size: 12px; letter-spacing: .06em; color: #FFB784; }
.epug-hero__title { color: #fff; font-size: 50px; font-weight: 900; line-height: 1.04; margin: 16px 0; }
.epug-hero__title span { color: var(--epug-orange); }
.epug-hero__lead { color: #AEB9C7; font-size: 16px; max-width: 48ch; margin: 0 0 24px; }
.epug-hero__search { display: flex; max-width: 520px; margin-bottom: 26px; }
.epug-hero__search input { flex: 1; border: 1px solid #26384d; background: #0b1826; color: #fff; border-right: 0; border-radius: var(--epug-radius-sm) 0 0 var(--epug-radius-sm); padding: 13px 15px; font-size: 14px; outline: none; }
.epug-hero__search input::placeholder { color: #6E7A88; }
.epug-hero__search .epug-btn { border-radius: 0 var(--epug-radius-sm) var(--epug-radius-sm) 0; }
.epug-hero__stats { display: flex; gap: 40px; }
.epug-hero__stats strong { display: block; font-family: var(--epug-font-head); font-size: 26px; font-weight: 800; }
.epug-hero__stats span { font-size: 12.5px; color: #8FA0B2; }

.epug-hero__card { background: linear-gradient(150deg,#16283e,#0b1826); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 14px; position: relative; color: #fff; }
.epug-hero__card-badge { position: absolute; top: 16px; right: 16px; background: var(--epug-orange); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: 5px; }
.epug-hero__card-media { aspect-ratio: 16/10; border-radius: 12px; background: #0e1f33; display: flex; align-items: center; justify-content: center; color: var(--epug-orange); }
.epug-hero__card-media svg { width: 74px; height: 74px; }
/* Foto real do produto em destaque: fundo claro para as fotos de estúdio. */
.epug-hero__card-media img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; background: #fff; padding: 12px; box-sizing: border-box; }
.epug-hero__card-body { display: flex; flex-direction: column; gap: 5px; }
.epug-hero__card-body strong { font-family: var(--epug-font-head); font-size: 17px; }
.epug-hero__card-body > span { color: #C7D2DE; font-size: 15px; }
/* O cartão do hero assenta em navy: o bloco de preço herdaria o preto de
   `.epug-price__incl` e ficava ilegível. Clarear as duas linhas. */
.epug-hero__card-body .epug-price__incl { color: #fff; }
.epug-hero__card-body .epug-price__excl { color: #9FB0C4; }
.epug-hero__card-body .epug-price__excl em { color: #7F92A8; }
.epug-hero__card-body .epug-price del { color: #7F92A8; }
.epug-hero__card-cta { color: var(--epug-orange) !important; font-size: 13px; font-weight: 600; margin-top: 4px; }

.epug-features { border-bottom: 1px solid var(--epug-line); background: #fff; }
.epug-features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 20px 22px; }
.epug-features__grid > div,
.epug-features__grid > a { display: flex; align-items: center; justify-content: center; gap: 12px; }
/* Os dois últimos são ligações (apoio técnico / pedido de orçamento). */
.epug-features__link { color: inherit; border-radius: var(--epug-radius-sm); padding: 6px 10px; transition: background .15s ease, color .15s ease; }
.epug-features__link:hover { background: var(--epug-orange-soft); }
.epug-features__link:hover strong { color: var(--epug-orange); }
.epug-features__ic { font-size: 22px; }
.epug-features__grid strong { display: block; font-family: var(--epug-font-head); font-size: 14px; }
.epug-features__grid small { color: var(--epug-muted); font-size: 12.5px; }

.epug-cats { padding: 44px 22px 20px; }
.epug-cats__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.epug-cats__head h2 { font-size: 26px; margin: 6px 0 0; }
.epug-cats__all { color: var(--epug-orange); font-weight: 600; font-size: 14px; }
.epug-cats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } /* 6 categorias principais em 3×2 */
.epug-cat { border: 1px solid var(--epug-line); border-radius: var(--epug-radius); padding: 20px 18px; display: flex; flex-direction: column; gap: 8px; background: #fff; transition: .15s; }
.epug-cat:hover { border-color: var(--epug-ink); box-shadow: var(--epug-shadow); }
.epug-cat__ic { width: 46px; height: 46px; border-radius: 11px; background: var(--epug-orange-soft); color: var(--epug-orange); display: flex; align-items: center; justify-content: center; }
.epug-cat strong { font-family: var(--epug-font-head); font-size: 15.5px; }
.epug-cat__count { color: var(--epug-muted); font-size: 12.5px; }

@media (max-width: 900px) {
  .epug-hero__grid, .epug-features__grid, .epug-cats__grid { grid-template-columns: 1fr 1fr; }
  .epug-hero__title { font-size: 38px; }
  .epug-hero__card { display: none; }
}

/* ============================================================
   Product archive (catalog)
   ============================================================ */
.epug-shop { padding: 26px 0 60px; }
.epug-breadcrumb { color: var(--epug-muted); font-size: 13px; margin-bottom: 10px; }
.epug-shop__head h1 { font-size: 30px; margin: 0 0 4px; }
.epug-shop__head p { color: var(--epug-muted); margin: 0 0 22px; }
.epug-shop__layout { display: grid; grid-template-columns: 300px 1fr; gap: 30px; align-items: start; }
.epug-shop__aside { position: sticky; top: 150px; }
.epug-filters { border: 1px solid var(--epug-line); border-radius: var(--epug-radius); padding: 18px; }
.epug-filters__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.epug-filters__head h3 { font-size: 16px; margin: 0; }
.epug-filters__head a { font-size: 12px; color: var(--epug-orange); }
.epug-filters__group { padding: 14px 0; border-top: 1px solid var(--epug-line-2); }
.epug-filters__group h4 { font-family: var(--epug-font-head); font-size: 13px; margin: 0 0 10px; color: var(--epug-ink); }
.epug-filters__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; max-height: 240px; overflow-y: auto; }
.epug-filters__list label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--epug-ink-2); cursor: pointer; }
.epug-filters__list label span { flex: 1; }
.epug-filters__list label em { font-style: normal; font-size: 11.5px; color: var(--epug-muted); font-family: var(--epug-font-mono); }
.epug-filters__list input[type="checkbox"] { accent-color: var(--epug-orange); width: 15px; height: 15px; }
.epug-filters__select { width: 100%; padding: 9px 10px; border: 1px solid var(--epug-line); border-radius: var(--epug-radius-sm); font-family: var(--epug-font-sans); font-size: 13px; }
/* Subcategorias como links dentro do painel de filtros. */
.epug-filters__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; color: var(--epug-ink-2); padding: 2px 0; }
.epug-filters__link:hover { color: var(--epug-orange); }
.epug-filters__link em { font-style: normal; font-size: 11.5px; color: var(--epug-muted); font-family: var(--epug-font-mono); }
.epug-price-inputs { display: flex; align-items: center; gap: 8px; }
.epug-price-inputs input { width: 100%; padding: 9px 10px; border: 1px solid var(--epug-line); border-radius: var(--epug-radius-sm); font-family: var(--epug-font-sans); font-size: 13px; }
.epug-filters > .epug-btn { width: 100%; justify-content: center; margin-top: 16px; }
.epug-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; }
.epug-count { color: var(--epug-muted); font-size: 13px; }

.epug-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ---- Product card (content-product.php) ---- */
.epug-card {
  background: #fff; border: 1px solid var(--epug-line-2); border-radius: var(--epug-radius);
  overflow: hidden; display: flex; flex-direction: column; transition: .15s;
}
.epug-card:hover { border-color: var(--epug-ink); box-shadow: var(--epug-shadow); }
.epug-card__media { position: relative; aspect-ratio: 1/1; background: linear-gradient(140deg,#F5F7F9,#E7ECF1); display: flex; align-items: center; justify-content: center; }
.epug-card__media img { width: 78%; height: 78%; object-fit: contain; mix-blend-mode: multiply; }
.epug-card__badge { position: absolute; top: 10px; left: 10px; background: var(--epug-orange); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 5px; letter-spacing: .02em; }
.epug-card__stock { position: absolute; bottom: 10px; left: 10px; right: 10px; background: var(--epug-green-soft); color: var(--epug-green); font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 6px; text-align: center; }
.epug-card__body { padding: 13px 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.epug-card__brand { font-family: var(--epug-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--epug-muted); }
.epug-card__title { font-family: var(--epug-font-head); font-weight: 600; font-size: 14.5px; color: var(--epug-ink); line-height: 1.25; }
.epug-card__sku { font-family: var(--epug-font-mono); font-size: 11.5px; color: var(--epug-muted); }
.epug-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; }
.epug-card__price { font-family: var(--epug-font-head); font-weight: 800; font-size: 16px; color: var(--epug-ink); }
.epug-card__price del { color: var(--epug-muted); font-weight: 500; font-size: 12.5px; margin-right: 6px; }

/* ---- Preço com IVA (destaque) + sem IVA (apoio) ----------------------------
   Obrigação legal em PT: expor o preço final com IVA. O valor sem IVA é o que
   interessa ao cliente B2B, por isso fica logo por baixo, legível mas discreto.
   Gerado por epug_price_html_dual() em functions.php. */
.epug-price { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
.epug-price__incl { font-family: var(--epug-font-head); font-weight: 800; color: var(--epug-ink); }
/* Sem `nowrap` no bloco: num cartão de 163px (2 colunas a 375px) um intervalo
   como "42,04 € – 68,01 €" transbordaria. Só o rótulo é que não parte. */
.epug-price__excl { font-size: .72em; font-weight: 600; color: var(--epug-muted-2); }
.epug-price__excl .amount { font-weight: 600; }
.epug-price__excl em { font-style: normal; font-weight: 500; color: var(--epug-muted); white-space: nowrap; }
/* Intervalos de preço ("3,38 € – 4,44 €") na linha de apoio ficam compactos. */
.epug-price__excl del, .epug-price__excl ins { font-size: 1em; }
.epug-price__incl ins { text-decoration: none; }

/* ---- WooCommerce loop integration ---- */
/* Grelha CSS: TODAS as filas têm o mesmo nº de colunas (4). O !important e o
   reset de float/width neutralizam o layout flutuante que a WooCommerce injeta
   (columns-N), que era o que provocava "3 na 1ª fila e 4 nas seguintes". */
/* 4 por linha. A 3 colunas os cartões ficavam grandes de mais; com a página
   mais larga (--epug-maxw) 4 dá cartões maiores do que antes sem perder densidade. */
.epug .woocommerce ul.products,
.epug ul.products {
  list-style: none; margin: 0; padding: 0;
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px;
}
.epug ul.products::before,
.epug ul.products::after { content: none !important; display: none !important; } /* clearfix da WC */
.epug ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important; clear: none !important;
}
.epug ul.products li.product::before { content: none; }
.epug ul.products .epug-card__add { padding: 8px 12px; font-size: 12.5px; }
.epug .woocommerce-result-count { color: var(--epug-muted); font-size: 13px; }
.epug .woocommerce-ordering select { padding: 8px 10px; border: 1px solid var(--epug-line); border-radius: var(--epug-radius-sm); font-family: var(--epug-font-sans); }
.epug .woocommerce-products-header__title { font-size: 30px; margin: 0 0 6px; }
.epug .woocommerce-breadcrumb { color: var(--epug-muted); font-size: 13px; margin-bottom: 14px; }
.epug .woocommerce-message, .epug .woocommerce-info { border-top-color: var(--epug-orange); }

/* ============================================================
   Single product
   ============================================================ */
.epug-muted { color: var(--epug-muted); }
.epug-placeholder-note { font-size: 12px; margin-top: 10px; font-style: italic; }

.epug-product { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin: 8px 0 44px; }

/* gallery (WooCommerce native, restyled) */
.epug-product__gallery .woocommerce-product-gallery { margin: 0; }
.epug-product__gallery .woocommerce-product-gallery__wrapper { border: 1px solid var(--epug-line); border-radius: var(--epug-radius); overflow: hidden; background: linear-gradient(140deg,#F5F7F9,#E7ECF1); }
.epug-product__gallery img { border-radius: var(--epug-radius); }
/* Foto do produto sem deformação (proporção mantida dentro de caixa 1:1) */
.epug-product__gallery .woocommerce-product-gallery__image > img,
.epug-product__gallery .woocommerce-product-gallery__image a > img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; mix-blend-mode: multiply; }
/* Miniatura no carrinho */
.epug .woocommerce table.cart img,
.epug .woocommerce .cart_item img { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--epug-line-2); border-radius: 8px; }
/* Sem imagens não há zoom — esconder o trigger nativo (evita link sem função) */
.epug-product__gallery .woocommerce-product-gallery--without-images .woocommerce-product-gallery__trigger { display: none; }
.epug-product__gallery .flex-control-thumbs { display: flex; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.epug-product__gallery .flex-control-thumbs li { width: 66px; }
.epug-product__gallery .flex-control-thumbs img { border: 1px solid var(--epug-line); border-radius: 10px; cursor: pointer; opacity: .7; }
.epug-product__gallery .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--epug-ink); }

/* summary */
.epug-product__brandref { font-family: var(--epug-font-mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--epug-muted); margin-bottom: 8px; }
.epug-product__brand { color: var(--epug-ink-2); font-weight: 600; }
.epug-product__title { font-size: 30px; line-height: 1.1; margin: 0 0 12px; }
.epug-product__excerpt { color: var(--epug-ink-2); font-size: 15px; margin-bottom: 18px; }
.epug-product__metagrid { display: grid; grid-template-columns: repeat(3, auto); gap: 26px; padding: 14px 0; border-top: 1px solid var(--epug-line); border-bottom: 1px solid var(--epug-line); margin-bottom: 20px; }
.epug-product__metalabel { display: block; font-family: var(--epug-font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--epug-muted); margin-bottom: 3px; }
.epug-product__metaval { font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

/* buy block — style the NATIVE WooCommerce price + add-to-cart */
.epug-product__buy { margin-bottom: 20px; }
.epug-product__buy .price { font-family: var(--epug-font-head); font-weight: 800; font-size: 30px; color: var(--epug-ink); display: block; margin-bottom: 4px; }
.epug-product__buy .price del { color: var(--epug-muted); font-weight: 500; font-size: 18px; margin-right: 10px; }
.epug-product__buy .price ins { text-decoration: none; }
.epug-product__buy .stock { font-size: 13px; color: var(--epug-muted); margin: 6px 0; }
/* Quantidade + "Adicionar" encostados à DIREITA, no fim da secção de compra.
   No produto VARIÁVEL a WooCommerce envolve os controlos num
   `.woocommerce-variation-add-to-cart`, que também tem de alinhar à direita —
   senão o botão ficava à esquerda dentro de um wrapper à largura toda. */
.epug-product__buy form.cart { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; }
.epug-product__buy form.cart .single_variation_wrap { flex: 1 0 100%; }
.epug-product__buy form.cart .woocommerce-variation-add-to-cart {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
}
.epug-product__buy .quantity input.qty { width: 68px; padding: 12px 8px; border: 1px solid var(--epug-line); border-radius: var(--epug-radius-sm); font-family: var(--epug-font-sans); text-align: center; }
.epug-product__buy .single_add_to_cart_button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--epug-font-head); font-weight: 700; font-size: 15px;
  padding: 14px 28px; border: 1px solid var(--epug-orange); border-radius: 999px;
  background: var(--epug-orange); color: #fff; cursor: pointer; transition: background .15s, box-shadow .15s;
}
/* Ícone de carrinho (igual ao botão do header) */
.epug-product__buy .single_add_to_cart_button::before {
  content: ""; width: 19px; height: 19px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h3l2.4 12.4a1.5 1.5 0 0 0 1.5 1.2h8.2a1.5 1.5 0 0 0 1.5-1.2L22 7H6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.epug-product__buy .single_add_to_cart_button:hover { background: var(--epug-orange-hover); }
/* variations as pills (native select escondido; pills conduzem a lógica WC) */
.epug-product__buy table.variations,
.epug-product__buy table.variations tbody,
.epug-product__buy table.variations tr,
.epug-product__buy table.variations th,
.epug-product__buy table.variations td { display: block; width: auto; padding: 0; border: 0; }
.epug-product__buy table.variations tr { margin-bottom: 16px; }
.epug-product__buy table.variations th { text-align: left; }
.epug-product__buy table.variations th label { font-family: var(--epug-font-head); font-weight: 600; font-size: 13px; color: var(--epug-ink); margin: 0 0 9px; display: block; text-align: left; }
.epug-pills-hidden { display: none; }

/* ============================================================
   Reposição do layout do tema na página de produto
   ============================================================
   Desde que a wrapper passou a levar a classe `product` — necessária para o
   `add-to-cart-variation.js` encontrar a galeria e trocar a imagem por variação
   — passaram a aplicar-se as regras de `.woocommerce div.product …` da
   `woocommerce-layout.css`, que ganham às do tema por especificidade.
   O tema tem layout próprio (grelha), por isso anulam-se aqui. Usa-se
   especificidade e não `!important`, para continuar a ser possível afinar. */

/* Galeria: a woocommerce-layout.css impõe `float:left; width:48%`. */
body.epug.single-product .epug-product__gallery .woocommerce-product-gallery,
body.epug.single-product .epug-product div.images {
  float: none; width: 100%; margin: 0;
}

/* Os <select> nativos das variações: o tema mostra pills no lugar deles.
   A regra `.woocommerce div.product form.cart .variations select` reexibia-os,
   ficando o select E as pills ao mesmo tempo. */
body.epug.single-product .epug-product .variations select.epug-pills-hidden {
  display: none;
}
.epug-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.epug-pill {
  border: 1px solid var(--epug-line); background: #fff; color: var(--epug-ink);
  border-radius: var(--epug-radius-sm); padding: 9px 15px; cursor: pointer;
  font-family: var(--epug-font-head); font-weight: 600; font-size: 13.5px; transition: .12s;
}
.epug-pill:hover { border-color: var(--epug-ink); }
.epug-pill.is-active { border-color: var(--epug-orange); background: var(--epug-orange-soft); color: #B8480A; box-shadow: inset 0 0 0 1px var(--epug-orange); }
.epug-pill.is-disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.epug-product__buy .reset_variations { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--epug-muted); }
.epug-product__buy .price-note { font-size: 12px; color: var(--epug-muted); margin-top: 2px; }
.epug-product__buy .woocommerce-variation-price .price { font-size: 24px; }

/* ---- Preços por quantidade ---- */
.epug-tiers { margin: 0 0 20px; border: 1px solid var(--epug-line); border-radius: var(--epug-radius); padding: 16px 18px; }
.epug-tiers__title { font-size: 14px; margin: 0 0 12px; }
.epug-tiers__table { width: 100%; border-collapse: collapse; }
.epug-tiers__table th, .epug-tiers__table td { text-align: left; padding: 8px 6px; font-size: 13.5px; border-bottom: 1px solid var(--epug-line-2); }
.epug-tiers__table th { font-family: var(--epug-font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--epug-muted); font-weight: 500; }
.epug-tiers__table td:last-child, .epug-tiers__table th:last-child { text-align: right; font-weight: 600; }
.epug-tiers__table tr[data-tier].is-active td { background: var(--epug-orange-soft); color: #B8480A; }
.epug-tiers__table tr[data-tier].is-active td:first-child { border-radius: 6px 0 0 6px; }
.epug-tiers__table tr[data-tier].is-active td:last-child { border-radius: 0 6px 6px 0; }
.epug-tiers__summary { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--epug-line); }
.epug-tiers__summary div { display: flex; flex-direction: column; }
.epug-tiers__summary span { font-family: var(--epug-font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--epug-muted); }
.epug-tiers__summary strong { font-family: var(--epug-font-head); font-size: 18px; }
.epug-tiers__summary .epug-tiers__total { color: var(--epug-orange); }
.epug-tiers__hint { font-size: 12.5px; color: var(--epug-muted); margin: 10px 0 0; }

.epug-product__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.epug-product__actions .epug-btn { font-size: 13px; padding: 9px 14px; }
.epug-product__notes { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--epug-muted-2); }

/* ---- Tabs ---- */
.epug-tabs { margin: 10px 0 40px; }
.epug-tabs__nav { display: flex; gap: 6px; border-bottom: 1px solid var(--epug-line); margin-bottom: 26px; }
.epug-tabs__tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 12px 6px; margin-right: 20px; font-family: var(--epug-font-head); font-weight: 600; font-size: 15px; color: var(--epug-muted); cursor: pointer; }
.epug-tabs__tab.is-active { color: var(--epug-ink); border-bottom-color: var(--epug-orange); }
.epug-tabs__panel { display: none; }
.epug-tabs__panel.is-active { display: block; }
.epug-tabs__cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 46px; align-items: start; }
.epug-tabs h3 { font-size: 17px; margin: 0 0 16px; }

.epug-spectable { width: 100%; border-collapse: collapse; }
.epug-spectable th, .epug-spectable td { text-align: left; padding: 11px 4px; border-bottom: 1px solid var(--epug-line-2); font-size: 14px; vertical-align: top; }
.epug-spectable th { color: var(--epug-muted); font-weight: 500; width: 44%; }
.epug-spectable td { font-weight: 600; color: var(--epug-ink); }

.epug-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.epug-docs li { display: flex; align-items: center; gap: 14px; border: 1px solid var(--epug-line); border-radius: var(--epug-radius); padding: 13px 16px; }
.epug-docs__ic { font-family: var(--epug-font-mono); font-size: 10px; font-weight: 700; color: var(--epug-orange); background: var(--epug-orange-soft); padding: 6px 8px; border-radius: 6px; }
.epug-docs__name { display: flex; flex-direction: column; font-weight: 600; font-size: 14px; flex: 1; }
.epug-docs__name small { font-family: var(--epug-font-mono); font-weight: 400; font-size: 11px; color: var(--epug-muted); }
.epug-docs__dl { color: var(--epug-muted); font-size: 18px; }

.epug-compat { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.epug-compat li { display: flex; align-items: center; gap: 14px; border: 1px solid var(--epug-line); border-radius: var(--epug-radius); padding: 14px 16px; }
.epug-compat__ic { color: var(--epug-muted); font-size: 18px; }
.epug-compat__name { display: flex; flex-direction: column; font-weight: 600; font-size: 14.5px; flex: 1; }
.epug-compat__name small { font-weight: 400; font-size: 12px; color: var(--epug-muted); }
.epug-compat__badge { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 6px; }
.epug-compat__badge--ok { background: var(--epug-green-soft); color: var(--epug-green); }
.epug-compat__badge--cond { background: var(--epug-orange-soft); color: #B87514; }
.epug-compat__cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--epug-navy); color: #fff; border-radius: var(--epug-radius); padding: 20px 24px; max-width: 720px; }
.epug-compat__cta strong { display: block; font-family: var(--epug-font-head); font-size: 16px; }
.epug-compat__cta span { color: #AEB9C7; font-size: 13px; }

/* related products */
.epug .related.products > h2 { font-size: 22px; margin: 30px 0 18px; }

@media (max-width: 900px) {
  .epug-product { grid-template-columns: 1fr; gap: 26px; }
  .epug-tabs__cols { grid-template-columns: 1fr; gap: 30px; }
}

/* ============================================================
   Localizador de compatibilidades
   ============================================================ */
.epug-finder { border: 1px solid var(--epug-line); border-radius: var(--epug-radius); padding: 28px; margin: 8px 0 30px; background: linear-gradient(140deg,#fff,#F7F9FB); }
.epug-finder__title { font-size: 28px; margin: 0 0 6px; }
.epug-finder__lead { color: var(--epug-muted); margin: 0 0 22px; max-width: 60ch; }
.epug-finder__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.epug-finder__form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--epug-muted-2); }
.epug-finder__form select { min-width: 240px; padding: 12px 12px; border: 1px solid var(--epug-line); border-radius: var(--epug-radius-sm); font-family: var(--epug-font-sans); font-size: 14px; background: #fff; }
.epug-finder__form .epug-btn { padding: 13px 20px; }
.epug-finder__form .epug-btn:disabled { opacity: .45; cursor: not-allowed; }
.epug-finder__specs { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--epug-line); }
.epug-finder__specs div { display: flex; flex-direction: column; }
.epug-finder__specs span { font-family: var(--epug-font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--epug-muted); }
.epug-finder__specs strong { font-size: 15px; }

.epug-system { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; border: 1px solid var(--epug-line); border-radius: var(--epug-radius); padding: 24px 26px; margin-bottom: 24px; }
.epug-system__kicker { font-family: var(--epug-font-mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--epug-muted); }
.epug-system__title { font-size: 26px; margin: 6px 0 6px; }
.epug-system__specs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, auto); gap: 8px 26px; align-content: start; }
.epug-system__specs li { display: flex; flex-direction: column; }
.epug-system__specs span { font-family: var(--epug-font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--epug-muted); }
.epug-system__specs strong { font-size: 14px; }

@media (max-width: 640px) {
  .epug-finder__form select { min-width: 100%; }
  .epug-finder__form label { width: 100%; }
}

/* ============================================================
   Apoio técnico
   ============================================================ */
.epug-support { padding: 8px 0 60px; display: flex; flex-direction: column; gap: 34px; }
.epug-support h2 { font-family: var(--epug-font-head); font-size: 22px; margin: 0 0 14px; }

/* Cabeçalho: intro + factos rápidos */
.epug-support__head { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 28px; align-items: end; }
.epug-support__intro { max-width: 60ch; }
.epug-support__intro h1 { font-size: 32px; margin: 8px 0 10px; }
.epug-support__intro p { color: var(--epug-muted-2); font-size: 16px; }
.epug-support__facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.epug-support__facts li { background: var(--epug-bg); border: 1px solid var(--epug-line); border-radius: var(--epug-radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.epug-support__facts strong { font-family: var(--epug-font-head); font-size: 15px; color: var(--epug-ink); line-height: 1.2; }
.epug-support__facts small { color: var(--epug-muted); font-size: 11.5px; }

/* Cartões de contacto — auto-fit: hoje são 2 (email + orçamento), sem ficarem
   esticados nem deixar um buraco se um dia voltar a haver um terceiro canal. */
.epug-support__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.epug-support__card { background: var(--epug-white); border: 1px solid var(--epug-line); border-radius: var(--epug-radius); padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.epug-support__card:hover { border-color: var(--epug-ink); box-shadow: var(--epug-shadow); }
.epug-support__ic { font-size: 26px; line-height: 1; }
.epug-support__card h3 { font-size: 17px; margin: 0; }
.epug-support__desc { color: var(--epug-muted-2); font-size: 13.5px; margin: 0; flex: 1; }
.epug-support__card .epug-btn { margin-top: 4px; }
.epug-support__val { font-family: var(--epug-font-mono); font-size: 12.5px; color: var(--epug-muted); }

/* Horário */
.epug-support__hours { display: flex; gap: 16px; align-items: flex-start; background: var(--epug-orange-soft); border: 1px solid #F7D9C6; border-radius: var(--epug-radius); padding: 20px 24px; }
.epug-support__hours strong { font-family: var(--epug-font-head); font-size: 16px; display: block; }
.epug-support__hours p { margin: 4px 0 6px; color: var(--epug-ink-2); font-size: 15px; }
.epug-support__hours small { color: var(--epug-muted-2); font-size: 12.5px; }

/* "Para te respondermos à primeira" — passos numerados */
.epug-support__lead { color: var(--epug-muted-2); font-size: 15px; margin: -6px 0 18px; max-width: 72ch; }
.epug-support__steps { list-style: none; counter-reset: epug-step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.epug-support__steps li { counter-increment: epug-step; position: relative; background: var(--epug-bg); border: 1px solid var(--epug-line); border-radius: var(--epug-radius); padding: 44px 18px 18px; }
.epug-support__steps li::before {
  content: counter( epug-step );
  position: absolute; top: 16px; left: 18px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--epug-orange); color: #fff;
  font-family: var(--epug-font-mono); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.epug-support__steps strong { display: block; font-family: var(--epug-font-head); font-size: 14.5px; margin-bottom: 5px; }
.epug-support__steps span { color: var(--epug-muted-2); font-size: 13px; }

/* FAQ (details/summary — sem JS) */
.epug-faq { border: 1px solid var(--epug-line); border-radius: var(--epug-radius); overflow: hidden; background: var(--epug-white); }
.epug-faq__item + .epug-faq__item { border-top: 1px solid var(--epug-line-2); }
.epug-faq__item summary {
  cursor: pointer; list-style: none; padding: 16px 46px 16px 20px; position: relative;
  font-family: var(--epug-font-head); font-weight: 600; font-size: 15px; color: var(--epug-ink);
}
.epug-faq__item summary::-webkit-details-marker { display: none; }
.epug-faq__item summary::after {
  content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 20px; font-weight: 400; color: var(--epug-orange); line-height: 1;
}
.epug-faq__item[open] summary::after { content: '−'; }
.epug-faq__item summary:hover { background: var(--epug-bg); }
.epug-faq__item summary:focus-visible { outline: 2px solid var(--epug-orange); outline-offset: -2px; }
.epug-faq__a { padding: 0 46px 18px 20px; }
.epug-faq__a p { margin: 0; color: var(--epug-muted-2); font-size: 14.5px; }

/* Ligações úteis */
.epug-support__links ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 20px; }
.epug-support__links a { display: block; padding: 12px 16px; border: 1px solid var(--epug-line); border-radius: var(--epug-radius-sm); color: var(--epug-ink); font-size: 14px; font-weight: 600; }
.epug-support__links a:hover { border-color: var(--epug-orange); color: var(--epug-orange); }

/* CTA final */
.epug-support__cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--epug-navy); color: #fff; border-radius: var(--epug-radius); padding: 28px 32px; }
.epug-support__cta h2 { margin: 0 0 6px; color: #fff; }
.epug-support__cta p { margin: 0; color: rgba(255,255,255,.72); font-size: 14.5px; max-width: 60ch; }
.epug-support__cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.epug-support__cta .epug-btn--ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.epug-support__cta .epug-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* ============================================================
   WooCommerce — conta / login / registo / checkout / carrinho
   ============================================================ */
.epug .woocommerce form .form-row { margin: 0 0 14px; }
.epug .woocommerce form .form-row label,
.epug.woocommerce-account label,
.epug .woocommerce-checkout label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--epug-ink-2); }
.epug .woocommerce input.input-text,
.epug .woocommerce input[type="text"],
.epug .woocommerce input[type="email"],
.epug .woocommerce input[type="password"],
.epug .woocommerce input[type="tel"],
.epug .woocommerce textarea,
.epug .woocommerce select,
.epug .woocommerce .select2-selection {
  width: 100%; padding: 12px 12px; border: 1px solid var(--epug-line);
  border-radius: var(--epug-radius-sm); font-family: var(--epug-font-sans); font-size: 14px; background: #fff;
}
.epug .woocommerce button.button,
.epug .woocommerce a.button,
.epug .woocommerce input[type="submit"],
.epug .woocommerce #place_order {
  background: var(--epug-orange); color: #fff; border: 0; border-radius: var(--epug-radius-sm);
  padding: 12px 22px; font-family: var(--epug-font-head); font-weight: 700; font-size: 14px; cursor: pointer; transition: background .15s;
}
.epug .woocommerce button.button:hover,
.epug .woocommerce a.button:hover,
.epug .woocommerce input[type="submit"]:hover,
.epug .woocommerce #place_order:hover { background: var(--epug-orange-hover); }
.epug .woocommerce a.button.wc-backward,
.epug .woocommerce .button.wc-forward.wp-element-button { background: var(--epug-ink); }
/* Estados: disabled + loading (o texto branco mantém contraste) */
.epug .woocommerce button.button:disabled,
.epug .woocommerce button.button[disabled],
.epug .woocommerce #place_order:disabled,
.epug .woocommerce input[type="submit"]:disabled { opacity: .55; cursor: not-allowed; }
.epug .woocommerce .button.loading,
.epug .woocommerce #place_order.loading { opacity: .75; pointer-events: none; }
.epug .woocommerce #place_order { width: 100%; justify-content: center; font-size: 15px; padding: 15px 22px; }

/* Conta: login + registo lado a lado, em cartões */
.epug.woocommerce-account .u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.epug.woocommerce-account .u-column1,
.epug.woocommerce-account .u-column2 { width: auto !important; float: none !important; }
.epug.woocommerce-account h2 { font-size: 20px; margin: 0 0 16px; }
.epug .woocommerce form.login,
.epug .woocommerce form.register { border: 1px solid var(--epug-line); border-radius: var(--epug-radius); padding: 26px; }
.epug.woocommerce-account .woocommerce-form-login__rememberme { font-weight: 400; }
.epug .woocommerce-form__label-for-checkbox input,
.epug.woocommerce-account .woocommerce-form-login__rememberme input { width: auto; margin-right: 6px; }

/* Navegação da conta (dashboard) */
.epug .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.epug .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--epug-line-2); }
.epug .woocommerce-MyAccount-navigation li a { display: block; padding: 11px 6px; font-weight: 600; }
.epug .woocommerce-MyAccount-navigation li.is-active a { color: var(--epug-orange); }

/* Checkout / carrinho */
.epug .woocommerce .cart_totals,
.epug .woocommerce-checkout #order_review,
.epug .woocommerce-checkout .woocommerce-checkout-review-order { border: 1px solid var(--epug-line); border-radius: var(--epug-radius); padding: 22px; }
.epug .woocommerce table.shop_table { border-radius: var(--epug-radius); }

@media (max-width: 1020px) {
  .epug-support__head { grid-template-columns: 1fr; align-items: start; }
  .epug-support__steps { grid-template-columns: repeat(2, 1fr); }
  .epug-support__links ul { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  /* Faixa de features: 3 itens em 2 colunas deixava o terceiro sozinho numa
     segunda fila, desalinhado. Abaixo dos 560px passa a lista de uma coluna. */
  .epug-features__grid { grid-template-columns: 1fr !important; gap: 10px; padding: 14px 0; }
  .epug-features__grid > div,
  .epug-features__grid > a { justify-content: flex-start; }
}

@media (max-width: 720px) {
  .epug-support__cards { grid-template-columns: 1fr; }
  .epug-support__steps,
  .epug-support__links ul { grid-template-columns: 1fr; }
  .epug-support__facts { grid-template-columns: 1fr; }
  .epug-support__cta { flex-direction: column; align-items: flex-start; padding: 24px; }
  .epug-support__intro h1 { font-size: 26px; }
  .epug.woocommerce-account .u-columns { grid-template-columns: 1fr; }
}

/* ============================================================
   Footer
   ============================================================ */
.epug-footer { background: var(--epug-navy); color: #AEB9C7; margin-top: 40px; padding: 46px 0 30px; font-size: 14px; }
/* Logo no footer: fundo navy → wordmark a branco (preserva a forma, sem fundo).
   Discreto: não deve dominar o footer; escala com o viewport em mobile. */
.epug-footer__logo { display: inline-block; line-height: 0; margin: 0 0 12px; }
.epug-footer__logo img { height: clamp(14px, 1.6vw, 18px); width: auto; display: block; filter: brightness(0) invert(1); }
.epug-footer__cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; }
.epug-footer h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 14px; }
.epug-footer a { color: #AEB9C7; display: block; padding: 4px 0; }
.epug-footer a:hover { color: #fff; }
.epug-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 34px; padding-top: 20px; font-size: 12.5px; color: #6E7A88; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; }
.epug-footer__legal { color: #59636F; }

/* Página 404 */
.epug-404 { max-width: 620px; margin: 40px auto 60px; text-align: center; }
.epug-404 h1 { font-size: 34px; margin: 8px 0 10px; }
.epug-404 p { color: var(--epug-muted-2); margin: 0 0 22px; }
.epug-404__search { display: flex; gap: 8px; max-width: 480px; margin: 0 auto 22px; }
.epug-404__search input { flex: 1; border: 1px solid var(--epug-line); border-radius: var(--epug-radius-sm); padding: 12px 14px; font-family: var(--epug-font-sans); font-size: 14px; }
.epug-404__links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* Pop-up da campanha de lançamento (1.ª visita).
   z-index abaixo do banner de cookies (200) de propósito: o consentimento é que
   tem de ficar acessível se ambos aparecerem. */
.epug-promo-modal {
  position: fixed; inset: 0; z-index: 190;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .22s ease;
}
/* ⚠️ OBRIGATÓRIO. `display:flex` na regra acima é uma declaração de AUTOR e
   vence o `[hidden]{display:none}` do browser (que é do user-agent). Sem isto o
   modal fica no ecrã com opacidade 0, a cobrir tudo com `inset:0`, e a página
   inteira deixa de responder a cliques — antes de aparecer e depois de fechar. */
.epug-promo-modal[hidden] { display: none; }
/* Rede de segurança para a janela da transição (ainda visível, já a fechar). */
.epug-promo-modal:not(.is-visible) { pointer-events: none; }
.epug-promo-modal.is-visible { opacity: 1; pointer-events: auto; }
.epug-promo-modal__backdrop { position: absolute; inset: 0; background: rgba(14,31,51,.62); backdrop-filter: blur(2px); }
.epug-promo-modal__box {
  position: relative; z-index: 1; width: min(100%, 460px);
  background: var(--epug-white); border-radius: var(--epug-radius);
  padding: 34px 32px 28px; text-align: center;
  box-shadow: 0 26px 70px rgba(14,31,51,.35);
  transform: translateY(10px) scale(.98); transition: transform .22s ease;
}
.epug-promo-modal.is-visible .epug-promo-modal__box { transform: none; }
.epug-promo-modal__x {
  position: absolute; top: 8px; right: 10px;
  width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--epug-muted);
}
.epug-promo-modal__x:hover { color: var(--epug-ink); }
.epug-promo-modal__tag {
  display: inline-block; font-family: var(--epug-font-mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--epug-orange);
  background: var(--epug-orange-soft); padding: 5px 10px; border-radius: 100px;
}
.epug-promo-modal__title { font-family: var(--epug-font-head); font-size: 26px; line-height: 1.2; margin: 14px 0 10px; }
.epug-promo-modal__title strong { color: var(--epug-orange); }
.epug-promo-modal__lead { color: var(--epug-muted-2); font-size: 14.5px; margin: 0 0 20px; }
.epug-promo-modal__cta { width: 100%; justify-content: center; }
.epug-promo-modal__later {
  display: block; margin: 12px auto 0; border: 0; background: transparent; cursor: pointer;
  font-family: var(--epug-font-sans); font-size: 13px; color: var(--epug-muted); text-decoration: underline;
}
.epug-promo-modal__later:hover { color: var(--epug-ink); }
@media (prefers-reduced-motion: reduce) {
  .epug-promo-modal, .epug-promo-modal__box { transition: none; }
}
@media (max-width: 480px) {
  .epug-promo-modal__box { padding: 28px 20px 22px; }
  .epug-promo-modal__title { font-size: 22px; }
}

/* Aviso de cookies — barra discreta em baixo, dispensável. */
.epug-cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; justify-content: space-between;
  background: var(--epug-navy); color: #E6ECF2;
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--epug-radius);
  padding: 14px 18px; box-shadow: 0 14px 40px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease;
}
/* Mesmo problema do modal: `display:flex` (autor) vence `[hidden]` (user-agent).
   Aqui só bloqueava a faixa de baixo, mas o efeito é o mesmo — cliques perdidos. */
.epug-cookie[hidden] { display: none; }
.epug-cookie:not(.is-visible) { pointer-events: none; }
.epug-cookie.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.epug-cookie__text { margin: 0; font-size: 13px; flex: 1 1 320px; min-width: 0; overflow-wrap: anywhere; }
.epug-cookie__text a { color: var(--epug-orange); }
/* Três opções: recusar tem de ser tão fácil como aceitar. Os botões têm o mesmo
   tamanho e peso visual — só a cor distingue a ação preferida. */
.epug-cookie__actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.epug-cookie__btn { font-size: 13px; padding: 9px 14px; }
.epug-cookie .epug-btn--ghost { color: #E6ECF2; border-color: rgba(255,255,255,.32); background: transparent; }
.epug-cookie .epug-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
@media (prefers-reduced-motion: reduce) {
  .epug-cookie { transition: none; }
}
/* Em mobile a base de 320px do texto mais os botões não cabem lado a lado. */
@media (max-width: 620px) {
  .epug-cookie { left: 10px; right: 10px; bottom: 10px; padding: 12px 14px; gap: 10px; max-width: none; }
  .epug-cookie__text { flex-basis: 100%; }
  .epug-cookie__actions { width: 100%; }
  .epug-cookie__btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
}
@media (max-width: 900px) { .epug-footer__bottom { justify-content: flex-start; } }

/* ============================================================
   Campanha de lançamento — faixa de destaque na home
   ============================================================ */
.epug-promo {
  background: linear-gradient(135deg, var(--epug-navy) 0%, #16283e 100%);
  color: #fff; position: relative; overflow: hidden;
}
/* Marca de água discreta (elemento decorativo, sem peso visual). */
.epug-promo::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 320px; height: 320px;
  border-radius: 50%; background: radial-gradient(circle, rgba(239,90,12,.30), transparent 65%);
  pointer-events: none;
}
.epug-promo__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px 34px; padding: 30px 22px; position: relative; z-index: 1;
}
.epug-promo__tag {
  display: inline-block; font-family: var(--epug-font-mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--epug-orange);
  background: rgba(239,90,12,.14); border: 1px solid rgba(239,90,12,.3);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
/* Cor explícita: a regra global `h1,h2,h3,h4 { color: var(--epug-ink) }` é uma
   regra direta e ganharia ao branco herdado de .epug-promo. */
.epug-promo__title { font-size: 27px; line-height: 1.15; margin: 0 0 8px; font-family: var(--epug-font-head); color: #fff; }
.epug-promo__title strong { color: var(--epug-orange); font-size: 40px; font-weight: 900; }
.epug-promo__lead { margin: 0; color: #C7D2DE; font-size: 14.5px; max-width: 52ch; }
.epug-promo__right { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.epug-promo__cta { font-size: 15px; padding: 13px 26px; box-shadow: 0 8px 20px rgba(239,90,12,.32); }
.epug-promo__until { font-size: 12.5px; color: #8FA0B2; font-family: var(--epug-font-mono); }

/* ============================================================
   Superfícies alternadas — tirar o excesso de branco
   ============================================================ */
/* Loja/arquivos e páginas internas sobre fundo suave. */
body.epug.woocommerce-shop, body.epug.tax-product_cat,
body.epug.woocommerce-cart, body.epug.woocommerce-checkout,
body.epug.woocommerce-account, body.epug.page { background: var(--epug-bg); }
/* Cartões de produto e blocos ganham fundo branco sobre esse tom. */
body.epug.woocommerce-shop .epug-card, body.epug.tax-product_cat .epug-card { background: var(--epug-white); }
body.epug .epug-filters { background: var(--epug-white); }
/* Secções da home alternam branco / cinza-azulado. */
.epug-cats { background: var(--epug-white); }
.epug-features { background: var(--epug-bg); border-top: 1px solid var(--epug-line); border-bottom: 1px solid var(--epug-line); }
/* Faixa fina de marca no topo da página, dá cor sem pesar. */
.epug-header::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--epug-orange), #f7a072 60%, transparent); }

/* ============================================================
   Página de produto — superfícies, cards e hierarquia
   (fundo suave + conteúdos em cartões, para sair do "tudo branco")
   ============================================================ */
.epug .single-product-page { background: var(--epug-bg); }
body.epug.single-product { background: var(--epug-bg); }

/* Galeria e resumo passam a cartões com superfície própria. */
body.epug.single-product .epug-product__gallery,
body.epug.single-product .epug-product__summary {
  background: var(--epug-white); border: 1px solid var(--epug-line);
  border-radius: var(--epug-radius); padding: 22px; box-shadow: var(--epug-shadow);
}
body.epug.single-product .epug-product__gallery .woocommerce-product-gallery__wrapper { border: 0; }

/* Bloco de compra em destaque (superfície ligeiramente distinta). */
body.epug.single-product .epug-product__buy {
  background: var(--epug-bg); border: 1px solid var(--epug-line-2);
  border-radius: var(--epug-radius); padding: 18px; margin-bottom: 18px;
}
/* Botão principal — igual ao do carrinho (laranja, pílula, ícone). Especificidade
   elevada de propósito, para vencer o `.button.alt` roxo do WooCommerce. */
body.epug.single-product .epug-product__buy .single_add_to_cart_button,
body.epug.single-product .epug-product__buy .single_add_to_cart_button.alt {
  background: var(--epug-orange); border: 1px solid var(--epug-orange); border-radius: 999px; color: #fff;
  box-shadow: 0 6px 16px rgba(239,90,12,.28); font-size: 15px; padding: 14px 28px;
}
body.epug.single-product .epug-product__buy .single_add_to_cart_button:hover,
body.epug.single-product .epug-product__buy .single_add_to_cart_button.alt:hover {
  background: var(--epug-orange-hover); box-shadow: 0 8px 20px rgba(239,90,12,.34);
}

/* Meta em cartões pequenos, em vez de linhas soltas. */
body.epug.single-product .epug-product__metagrid {
  grid-template-columns: repeat(3, 1fr); gap: 10px; border: 0; padding: 0;
}
body.epug.single-product .epug-product__metagrid > div {
  background: var(--epug-bg); border: 1px solid var(--epug-line-2);
  border-radius: var(--epug-radius-sm); padding: 10px 12px;
}

/* Tabela de preços por quantidade mais legível. */
body.epug.single-product .epug-tiers { background: var(--epug-white); border-color: var(--epug-line); }
.epug-tiers__table { width: 100%; border-collapse: collapse; }
.epug-tiers__table th { text-align: left; font-family: var(--epug-font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--epug-muted); padding: 0 0 8px; font-weight: 500; }
.epug-tiers__table td { padding: 9px 0; border-top: 1px solid var(--epug-line-2); font-size: 14px; }
.epug-tiers__table tr[data-tier].is-active td { color: var(--epug-orange); font-weight: 700; }
.epug-tiers__table tr[data-tier].is-active td:first-child { position: relative; padding-left: 12px; }
.epug-tiers__table tr[data-tier].is-active td:first-child::before { content: ""; position: absolute; left: 0; top: 12px; width: 4px; height: 14px; border-radius: 2px; background: var(--epug-orange); }
.epug-tiers__summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--epug-line-2); }
.epug-tiers__summary > div { display: flex; flex-direction: column; gap: 2px; }
.epug-tiers__summary span { font-size: 11px; color: var(--epug-muted); text-transform: uppercase; letter-spacing: .06em; font-family: var(--epug-font-mono); }
.epug-tiers__summary strong { font-family: var(--epug-font-head); font-size: 16px; }
/* Transição suave quando o preço/escalão muda com a quantidade. */
.epug-tiers__v, .epug-tiers__unit, .epug-tiers__total { transition: color .18s ease, opacity .18s ease; }

/* Abas / especificações / compatibilidade como blocos. */
body.epug.single-product .epug-tabs {
  background: var(--epug-white); border: 1px solid var(--epug-line);
  border-radius: var(--epug-radius); padding: 24px; box-shadow: var(--epug-shadow); margin-bottom: 34px;
}
body.epug.single-product .related.products {
  background: var(--epug-white); border: 1px solid var(--epug-line);
  border-radius: var(--epug-radius); padding: 24px; box-shadow: var(--epug-shadow);
}
.epug-spectable { width: 100%; border-collapse: collapse; }
.epug-spectable th, .epug-spectable td { text-align: left; padding: 10px 0; border-top: 1px solid var(--epug-line-2); font-size: 14px; }
.epug-spectable th { color: var(--epug-muted); font-weight: 500; width: 42%; }

/* CTA secundária de orçamento (produto e carrinho). */
.epug-quotecta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin-top: 16px; padding: 13px 16px; font-size: 13.5px;
  background: var(--epug-bg); border: 1px dashed var(--epug-line);
  border-radius: var(--epug-radius-sm); color: var(--epug-ink-2);
}
.epug-quotecta a { color: var(--epug-orange); font-weight: 600; }

/* Conta obrigatória / campanha */
.epug-authbox {
  display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between;
  background: var(--epug-white); border: 1px solid var(--epug-line); border-left: 4px solid var(--epug-orange);
  border-radius: var(--epug-radius); padding: 18px 20px; margin-bottom: 22px; box-shadow: var(--epug-shadow);
}
.epug-authbox h2 { font-size: 17px; margin: 0 0 4px; }
.epug-authbox p { margin: 0; color: var(--epug-muted-2); font-size: 13.5px; max-width: 60ch; }
.epug-authbox__actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.epug-authbox__or { font-size: 12.5px; color: var(--epug-muted); }
.epug-cart-hint td { font-size: 12.5px; color: var(--epug-muted); }
.epug-campaign {
  background: var(--epug-orange-soft); border: 1px solid rgba(239,90,12,.22);
  border-radius: var(--epug-radius-sm); padding: 12px 16px; margin-bottom: 18px; font-size: 13.5px;
}
.epug-campaign strong { color: var(--epug-orange); }
/* Linha do desconto nos totais */
.cart-discount, tr.fee th, tr.fee td { color: var(--epug-orange); }

@media (max-width: 900px) {
  /* Campanha: empilhar e reduzir o número, mantendo o destaque. */
  .epug-promo__inner { flex-direction: column; align-items: flex-start; padding: 24px 22px; }
  .epug-promo__title { font-size: 22px; }
  .epug-promo__title strong { font-size: 32px; }
  .epug-promo::after { width: 200px; height: 200px; right: -70px; }
  body.epug.single-product .epug-product__metagrid { grid-template-columns: 1fr; }
  .epug-tiers__summary { grid-template-columns: 1fr; }
  .epug-authbox { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Animações — subtis, reutilizáveis e respeitando prefers-reduced-motion
   ============================================================ */
/* Elementos marcados pelo JS; sem JS ficam visíveis (sem FOUC). */
.epug-reveal { opacity: 0; transform: translateY(14px); }
.epug-anim-ready .epug-reveal { transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
.epug-reveal.is-visible { opacity: 1; transform: none; }
/* Rede de segurança do JS: estado final imediato, sem transições. */
.epug-anim-done .epug-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
/* Entrada sequencial (cards de produto, categorias) — escalonamento leve. */
.epug-reveal[style*="--epug-delay"] { transition-delay: var(--epug-delay); }

/* Micro-interação nos cartões (sem animação contínua). */
.epug-card, .epug-cat { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.epug-card:hover, .epug-cat:hover { transform: translateY(-2px); }
/* Imagens do produto/cartões com transição suave. */
.epug-card__media img, .epug-hero__card-media img { transition: transform .35s ease, opacity .25s ease; }
.epug-card:hover .epug-card__media img { transform: scale(1.03); }

/* Skeleton durante carregamentos (ex.: atualização de variação). */
.epug-skeleton { position: relative; overflow: hidden; background: var(--epug-bg-2); border-radius: var(--epug-radius-sm); }
.epug-skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: epug-shimmer 1.2s infinite;
}
@keyframes epug-shimmer { 100% { transform: translateX(100%); } }

/* Acessibilidade: sem movimento quando o utilizador o pede. */
@media (prefers-reduced-motion: reduce) {
  .epug-reveal, .epug-anim-ready .epug-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .epug-card, .epug-cat, .epug-card__media img, .epug-hero__card-media img { transition: none !important; }
  .epug-card:hover, .epug-cat:hover { transform: none !important; }
  .epug-card:hover .epug-card__media img { transform: none !important; }
  .epug-skeleton::after { animation: none; }
  html { scroll-behavior: auto !important; }
}

/* ============================================================
   Pedido de orçamento (Fluent Forms com o look do site)
   ============================================================ */
.epug-quote { max-width: 720px; margin: 0 auto; }
.epug-quote__intro { margin-bottom: 22px; }
.epug-quote__intro h1 { font-size: 30px; margin: 6px 0 8px; }
.epug-quote__intro p { color: var(--epug-muted); margin: 0; max-width: 56ch; }
.epug-quote__card { background: #fff; border: 1px solid var(--epug-line); border-radius: var(--epug-radius); padding: 26px; box-shadow: var(--epug-shadow); }
.epug-quote__note { color: var(--epug-muted); font-size: 12.5px; margin: 14px 4px 0; }

/* Campos */
.epug .fluentform .ff-el-group { margin-bottom: 18px; }
.epug .fluentform .ff-el-input--label label { font-family: var(--epug-font-head); font-weight: 600; font-size: 13.5px; color: var(--epug-ink); }
.epug .fluentform .ff-el-form-control {
  width: 100%; border: 1px solid var(--epug-line); border-radius: var(--epug-radius-sm);
  padding: 11px 13px; font-family: var(--epug-font-sans); font-size: 14px;
  background: #fff; color: var(--epug-ink); transition: border-color .12s, box-shadow .12s;
}
.epug .fluentform .ff-el-form-control:focus { border-color: var(--epug-orange); outline: none; box-shadow: 0 0 0 3px var(--epug-orange-soft); }
.epug .fluentform textarea.ff-el-form-control { min-height: 140px; resize: vertical; }
.epug .fluentform .ff-el-form-control::placeholder { color: var(--epug-muted); }

/* Consentimento RGPD */
.epug .fluentform .ff_t_c { font-size: 13px; color: var(--epug-ink-2); }
.epug .fluentform .ff_t_c a { color: var(--epug-orange); text-decoration: underline; }
.epug .fluentform input[type="checkbox"] { accent-color: var(--epug-orange); width: 15px; height: 15px; }

/* Botão de submissão = botão do site */
.epug .fluentform .ff-btn-submit {
  background: var(--epug-orange) !important; color: #fff !important; border: 0 !important;
  border-radius: var(--epug-radius-sm) !important; padding: 13px 24px !important;
  font-family: var(--epug-font-head) !important; font-weight: 700 !important; font-size: 14px !important;
  cursor: pointer; transition: filter .12s;
}
.epug .fluentform .ff-btn-submit:hover { filter: brightness(.94); }

/* Erros e sucesso */
.epug .fluentform .error, .epug .fluentform .text-danger { color: #C92A2A; font-size: 12.5px; }
.epug .fluentform .ff-el-is-error .ff-el-form-control { border-color: #C92A2A; }
.epug .ff-message-success {
  border: 1px solid var(--epug-line); border-left: 4px solid var(--epug-orange);
  background: var(--epug-orange-soft); border-radius: var(--epug-radius-sm);
  padding: 18px 20px; font-size: 14.5px; color: var(--epug-ink);
}

/* ============================================================
   Páginas WooCommerce (carrinho, checkout, conta) — superfícies
   Os painéis nativos vinham transparentes; sobre o fundo suave das páginas
   ficavam "lavados". Passam a cartões brancos, coerentes com o resto do site.
   ============================================================ */
.epug .woocommerce table.shop_table,
.epug .cart_totals,
.epug #order_review,
.epug form.woocommerce-form-login,
.epug form.woocommerce-form-register,
.epug form.register,
.epug .woocommerce-MyAccount-navigation,
.epug .woocommerce-MyAccount-content,
.epug .woocommerce-order-details,
.epug .woocommerce-customer-details,
.epug .woocommerce-order-received .woocommerce-order {
  background: var(--epug-white);
  border: 1px solid var(--epug-line);
  border-radius: var(--epug-radius);
  box-shadow: var(--epug-shadow);
}
.epug .woocommerce table.shop_table { border-collapse: separate; border-spacing: 0; overflow: hidden; }
.epug .woocommerce table.shop_table th { background: var(--epug-bg); font-family: var(--epug-font-head); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--epug-muted-2); padding: 14px 16px; }
.epug .woocommerce table.shop_table td { padding: 16px; border-top: 1px solid var(--epug-line-2); }
.epug .cart_totals, .epug #order_review { padding: 22px; }
.epug .cart_totals h2, .epug #order_review_heading { font-size: 17px; margin: 0 0 14px; }

/* Dados do cliente no checkout também em cartão. */
.epug #customer_details { background: var(--epug-white); border: 1px solid var(--epug-line); border-radius: var(--epug-radius); box-shadow: var(--epug-shadow); padding: 24px; margin-bottom: 24px; }
.epug #customer_details .col-1, .epug #customer_details .col-2 { float: none; width: auto; }

/* Formulários de conta: largura legível e centrados. */
.epug.woocommerce-account form.woocommerce-form-login,
.epug.woocommerce-account form.register { max-width: 460px; margin: 0 auto 26px; padding: 26px; }
.epug.woocommerce-account .u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.epug.woocommerce-account .u-column1, .epug.woocommerce-account .u-column2 { width: auto; float: none; }

/* "A minha conta": navegação + conteúdo lado a lado. */
.epug.woocommerce-account .woocommerce-MyAccount-navigation { padding: 14px; }
.epug .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.epug .woocommerce-MyAccount-navigation li a { display: block; padding: 10px 12px; border-radius: var(--epug-radius-sm); color: var(--epug-ink-2); font-family: var(--epug-font-head); font-weight: 600; font-size: 14px; }
.epug .woocommerce-MyAccount-navigation li a:hover { background: var(--epug-bg); color: var(--epug-orange); }
.epug .woocommerce-MyAccount-navigation li.is-active a { background: var(--epug-orange-soft); color: var(--epug-orange); }
.epug .woocommerce-MyAccount-content { padding: 26px; }

/* Campos e selects consistentes em todas as páginas Woo. */
/* `#coupon_code` precisa do ID: a WooCommerce estiliza-o por ID e um seletor
   de classe, por mais específico, perderia. */
.epug .woocommerce form .form-row input.input-text,
.epug .woocommerce form .form-row textarea,
.epug #coupon_code.input-text {
  border: 1px solid var(--epug-line); border-radius: var(--epug-radius-sm);
  padding: 12px 13px; font-family: var(--epug-font-sans); font-size: 14px; background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
.epug .woocommerce form .form-row input.input-text:focus,
.epug #coupon_code.input-text:focus { border-color: var(--epug-orange); outline: none; box-shadow: 0 0 0 3px var(--epug-orange-soft); }
.epug .coupon { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.epug #coupon_code.input-text { min-width: 190px; flex: 0 1 auto; }
.epug .woocommerce form .form-row label { font-family: var(--epug-font-head); font-weight: 600; font-size: 13.5px; color: var(--epug-ink); }
.epug .select2-container--default .select2-selection--single { border: 1px solid var(--epug-line) !important; border-radius: var(--epug-radius-sm) !important; }

/* Botões secundários (atualizar carrinho, etc.): laranja com texto escuro
   dava mau contraste — passam a "ghost". */
.epug .woocommerce button[name="update_cart"],
.epug .woocommerce button[name="apply_coupon"],
.epug .woocommerce a.button.wc-backward {
  background: var(--epug-white) !important; color: var(--epug-ink) !important;
  border: 1px solid var(--epug-line) !important; border-radius: var(--epug-radius-sm) !important;
  padding: 12px 20px !important; font-family: var(--epug-font-head); font-weight: 600;
}
.epug .woocommerce button[name="update_cart"]:hover,
.epug .woocommerce button[name="apply_coupon"]:hover,
.epug .woocommerce a.button.wc-backward:hover { border-color: var(--epug-ink); color: var(--epug-orange) !important; }
.epug .woocommerce button[name="update_cart"]:disabled { opacity: .5; }

/* Botões principais com o peso da marca. */
.epug .checkout-button, .epug #place_order { box-shadow: 0 6px 16px rgba(239,90,12,.28); font-size: 15px; }

/* Avisos: cores da marca em vez do roxo-cinza por omissão da WooCommerce. */
.epug .woocommerce-info, .epug .woocommerce-message, .epug .woocommerce-error {
  background: var(--epug-white); border: 1px solid var(--epug-line);
  border-left: 4px solid var(--epug-orange); border-radius: var(--epug-radius-sm);
  color: var(--epug-ink); box-shadow: var(--epug-shadow); padding: 15px 18px;
}
.epug .woocommerce-info::before, .epug .woocommerce-message::before, .epug .woocommerce-error::before { display: none; }
.epug .woocommerce-message { border-left-color: var(--epug-green); }
.epug .woocommerce-error { border-left-color: var(--epug-danger); }
.epug .woocommerce-info a, .epug .woocommerce-message a { color: var(--epug-orange); font-weight: 600; }

@media (max-width: 900px) {
  .epug.woocommerce-account .u-columns { grid-template-columns: 1fr; }
}

/* ============================================================
   Responsive
   ============================================================ */
/* Abaixo de 1100px a sidebar deixa de caber ao lado — passa para cima e os
   produtos ficam a toda a largura, mantendo 4 por linha (2 abaixo de 900px). */
@media (max-width: 1100px) {
  .epug-shop__layout { grid-template-columns: 1fr; }
  .epug-shop__aside { position: static; }
  .epug-filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 22px; align-items: start; }
  .epug-filters__head { grid-column: 1 / -1; }
  .epug-filters > .epug-btn { grid-column: 1 / -1; width: auto; }
}
@media (max-width: 900px) {
  .epug-footer__cols { grid-template-columns: 1fr 1fr; }
  /* Em mobile: manter só o menu expansível de categorias (sem a fila de atalhos).
     Especificidade elevada de propósito: `.epug-nav ul` (0-1-1) ganharia a
     `.epug-nav__quick` (0-1-0) — as media queries não acrescentam especificidade. */
  .epug-nav ul.epug-nav__quick { display: none; }
  .epug-megamenu__panel { min-width: min(92vw, 580px); grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .epug-grid,
  .epug .woocommerce ul.products,
  .epug ul.products { grid-template-columns: repeat(2, 1fr) !important; }
  .epug-filters { grid-template-columns: 1fr 1fr; }
}
/* Uma coluna só em ecrãs muito estreitos. O `!important` é necessário para
   vencer a regra dos 900px acima — sem ele esta media query não fazia nada.
   O limite é 360px (e não 440px) de propósito: com 57 referências no catálogo,
   duas colunas a 375px poupam metade do scroll, e o rodapé do cartão passa a
   empilhar (ver a secção "Mobile — usabilidade") para o botão não encolher. */
@media (max-width: 360px) {
  .epug-grid,
  .epug .woocommerce ul.products,
  .epug ul.products { grid-template-columns: 1fr !important; }
}

/* ============================================================
   Mobile — usabilidade
   Alvos de toque de 44px (WCAG 2.5.5 / iOS HIG), campos a 16px (abaixo disso o
   Safari do iOS faz zoom automático ao focar) e um header que não come o ecrã.
   ============================================================ */
@media (max-width: 900px) {

  /* ---- Barra principal: logo + ações em cima, pesquisa por baixo ----------
     A pesquisa estava `display: none` abaixo dos 900px. Numa loja de peças
     procuradas por SKU/referência é o caminho principal — volta, em linha
     própria a toda a largura. */
  .epug-header__main {
    grid-template-columns: auto 1fr;
    grid-template-areas: "logo acoes" "busca busca";
    gap: 10px 12px; padding: 10px 16px; min-height: 0;
  }
  .epug-logo { grid-area: logo; }
  .epug-logo img, .epug-logo .custom-logo { height: 32px; }
  .epug-header__actions { grid-area: acoes; justify-self: end; gap: 8px; }
  .epug-search { grid-area: busca; display: flex; max-width: none; }
  .epug-search input { font-size: 16px; padding: 11px 12px; }
  .epug-search button { min-height: 44px; padding: 0 16px; }

  /* Conta/carrinho passam a ícones circulares de 44px: com os rótulos, logo +
     botões não cabiam em 375px. O texto fica para leitores de ecrã. */
  .epug-headbtn { width: 44px; height: 44px; padding: 0; gap: 0; justify-content: center; position: relative; }
  .epug-headbtn > span {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .epug-headbtn svg { width: 20px; height: 20px; }
  .epug-headbtn__count {
    position: absolute; top: -3px; right: -3px; margin-left: 0;
    border: 2px solid #fff; background: var(--epug-navy); color: #fff;
    min-width: 21px; height: 21px; font-size: 11px;
  }

  /* ---- Header compacto ao rolar ----
     Em repouso o header ocupava 202px (25% de um ecrã de 812px). A classe é
     posta por assets/theme.js a partir dos 80px de scroll. */
  .epug-header.is-compact .epug-topbar,
  .epug-header.is-compact .epug-nav { display: none; }

  .epug-nav .epug-container { min-height: 0; padding-top: 5px; padding-bottom: 5px; }
  .epug-nav__cats, .epug-nav__compat { min-height: 44px; }
  .epug-nav__compat { margin-left: 0; }

  /* ---- Alvos de toque ---------------------------------------------------- */
  /* Nota de seletores: `body` traz `epug` e `woocommerce` ao mesmo tempo, por
     isso `.epug .woocommerce x` (descendente) nunca casa — usa-se `.epug x`. */
  .epug-btn,
  .epug-nav__cats,
  .epug-megamenu__panel a,
  .epug a.button,
  .epug button.button,
  .epug input.button,
  .epug .woocommerce-MyAccount-navigation a { min-height: 44px; }
  .epug-btn { display: inline-flex; align-items: center; justify-content: center; }

  /* Paginação: os números tinham 24x30px. */
  .epug nav.woocommerce-pagination a.page-numbers,
  .epug nav.woocommerce-pagination span.page-numbers {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Remover linha do carrinho: era um "×" de 21px. */
  .epug a.remove {
    width: 40px; height: 40px; line-height: 38px; font-size: 22px;
  }
  .epug .shipping-calculator-button { display: inline-block; padding: 10px 0; }

  /* Filtros: caixas maiores e a etiqueta inteira clicável. */
  .epug-filters__list label { min-height: 40px; }
  .epug-filters__list input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; }

  /* ---- Campos a 16px (sem zoom automático no iOS) -------------------------
     Prefixo `body.epug` de propósito: as folhas da WooCommerce carregam depois
     do tema e, com especificidade igual, ganhariam (ex.: `.woocommerce
     .quantity .qty`). */
  body.epug input[type="text"], body.epug input[type="search"],
  body.epug input[type="email"], body.epug input[type="tel"],
  body.epug input[type="number"], body.epug input[type="password"],
  body.epug input[type="url"], body.epug input[type="date"],
  body.epug select, body.epug textarea,
  body.epug input.input-text,
  body.epug .quantity input.qty,
  body.epug .fluentform .ff-el-form-control,
  /* Mesma forma das regras de desktop (linhas ~980) mas com `body` à frente —
     nas páginas de carrinho/checkout/conta a WooCommerce envolve o conteúdo num
     `.woocommerce`, e essas regras são mais específicas do que as de cima. */
  body.epug .woocommerce form .form-row input.input-text,
  body.epug .woocommerce form .form-row textarea,
  body.epug .woocommerce form .form-row select,
  body.epug #coupon_code.input-text { font-size: 16px; }
  .epug-filters__select, body.epug select.orderby { min-height: 44px; }

  /* ---- Ações principais a toda a largura --------------------------------- */
  /* Cartão de produto: em duas colunas o rodapé [preço | botão] tinha 126px e
     o "Adicionar" encolhia para 68px com o texto em duas linhas. Empilha. */
  .epug-card__foot { flex-wrap: wrap; gap: 8px; }
  .epug-card__price { flex: 1 0 100%; }
  .epug-card__add { flex: 1 0 100%; width: 100%; white-space: nowrap; }

  /* Produto: o `form.cart` é flex e o bloco da variação encolhia para 127px,
     deixando o botão principal com esse tamanho. Passa a ocupar a linha toda. */
  body.epug.single-product form.cart .single_variation_wrap { flex: 1 0 100%; }
  body.epug.single-product form.cart .woocommerce-variation-add-to-cart {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  }
  body.epug.single-product form.cart .quantity { flex: 0 0 auto; }
  body.epug.single-product .epug-product__buy .single_add_to_cart_button,
  body.epug.single-product .epug-product__buy .single_add_to_cart_button.alt {
    flex: 1 1 160px; width: auto; justify-content: center; min-height: 50px;
  }
  /* Pills de variação (Single/Duplo, medidas…) como alvos de toque. */
  body.epug.single-product .epug-pill { min-height: 44px; }
  /* Mais específicos do que a regra genérica de 44px acima, de propósito: são
     as duas ações finais do funil e merecem destaque. */
  body.epug a.checkout-button,
  body.epug #place_order { width: 100%; min-height: 52px; font-size: 16px; }

  /* ---- Legibilidade: nada abaixo de 12px --------------------------------- */
  .epug-card__stock, .epug-card__sku, .epug-megamenu__panel a em,
  .epug-support__facts small { font-size: 12px; }

  /* ---- Galeria: o zoom por hover não existe em touch ----------------------
     A WooCommerce injetava uma `img.zoomImg` de 933px e a lupa era um alvo de
     17px. Ambas só fazem sentido com rato. */
  .epug .woocommerce-product-gallery__trigger { display: none !important; }
  .epug img.zoomImg { display: none !important; }
}

/* ---- FX: faíscas de soldadura (estilo forja) ----------------------------- */
.epug-fx-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 90;
}
/* Logo a cair letra a letra: overlay de fatias sobre o logo real. */
.epug-logo-fx { position: fixed; inset: 0; pointer-events: none; z-index: 85; }
.epug-logo-slice {
  position: fixed;
  background-repeat: no-repeat;
  will-change: transform, opacity;
  transform-origin: 50% 100%;
  animation: epug-slice-fall .95s cubic-bezier(.34,.02,.30,1) both;
}
@keyframes epug-slice-fall {
  0%   { transform: translateY(var(--epug-fall, -120vh)) rotate(-7deg); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translateY(0) rotate(0); }            /* 1.º impacto */
  64%  { transform: translateY(-24px) rotate(.9deg); }    /* ressalto grande */
  78%  { transform: translateY(0) rotate(0); }            /* 2.º impacto */
  88%  { transform: translateY(-9px) rotate(-.5deg); }    /* ressalto pequeno */
  96%  { transform: translateY(0) rotate(0); }
  100% { transform: translateY(0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .epug-fx-canvas { display: none; }
  .epug-logo-slice { animation: none; }
}

/* ============================================================
   ÁREA DE CONTA / LOGIN — redesign (bloco autoritativo)
   Cobre: login+registo, dashboard (nav+conteúdo), editar conta,
   moradas, encomendas, avisos. Vem no fim → ganha a cascata.
   ============================================================ */
/* NB: NÃO limitar .epug-container aqui — apanhava também o container do header
   (que tem a classe .epug-container) e esmagava o logo. Constrangir só o conteúdo. */
.epug.woocommerce-account .epug-shop .epug-container { max-width: 1080px; }
.epug.woocommerce-account article > h1,
.epug.woocommerce-account .entry-title { font-size: 30px; letter-spacing: -.01em; margin: 6px 0 22px; }

/* ---- Login + Registo (deslogado): dois cartões lado a lado ---- */
.epug.woocommerce-account .epug-account-intro { max-width: 860px; margin: 0 auto 22px; }
.epug.woocommerce-account .epug-account-intro .epug-kicker { color: var(--epug-orange); }
.epug.woocommerce-account .epug-account-intro p { color: var(--epug-muted); font-size: 15px; margin: 4px 0 0; max-width: 56ch; }
.epug.woocommerce-account .woocommerce > .col2-set {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch;
  max-width: 860px; margin: 0 auto;
}
/* CRÍTICO: o clearfix ::before/::after do WooCommerce nestes contentores torna-se
   uma CÉLULA do grid e empurra os cartões para a diagonal. Anular. */
.epug.woocommerce-account .col2-set::before,
.epug.woocommerce-account .col2-set::after,
.epug .woocommerce-EditAccountForm::before,
.epug .woocommerce-EditAccountForm::after,
.epug .woocommerce-address-fields__field-wrapper::before,
.epug .woocommerce-address-fields__field-wrapper::after { content: none; display: none; }
.epug.woocommerce-account .woocommerce > .col2-set .u-column1,
.epug.woocommerce-account .woocommerce > .col2-set .u-column2 {
  width: auto; float: none; margin: 0; padding: 32px 30px;
  background: #fff; border: 1px solid var(--epug-line); border-radius: var(--epug-radius);
  box-shadow: 0 12px 38px rgba(14,31,51,.08);
  display: flex; flex-direction: column;
}
.epug.woocommerce-account .col2-set h2 {
  font-size: 20px; margin: 0 0 4px; display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; border-bottom: 1px solid var(--epug-line-2);
}
.epug.woocommerce-account .u-column1 h2::before { content: "\2192"; color: var(--epug-orange); font-weight: 700; }
.epug.woocommerce-account .u-column2 h2::before { content: "\002B"; color: var(--epug-orange); font-weight: 700; }
.epug.woocommerce-account .col2-set h2 { margin-bottom: 16px; }
/* neutralizar o cartão/borda antigos no próprio form (o cartão é a coluna) */
.epug.woocommerce-account form.woocommerce-form-login,
.epug.woocommerce-account form.woocommerce-form-register,
.epug.woocommerce-account form.login,
.epug.woocommerce-account form.register {
  border: 0; padding: 0; margin: 0; max-width: none; box-shadow: none;
}

/* botões primários a toda a largura nos cartões de login/registo */
.epug.woocommerce-account .col2-set .woocommerce-form-login button[type="submit"],
.epug.woocommerce-account .col2-set .woocommerce-form-register button[type="submit"],
.epug.woocommerce-account .col2-set button.woocommerce-Button,
.epug.woocommerce-account .col2-set .woocommerce-Button.button {
  display: inline-flex; align-items: center; width: 100%; justify-content: center;
  margin-top: auto; padding: 14px 20px; font-size: 15px; border-radius: 999px;
}
.epug.woocommerce-account .woocommerce-LostPassword { margin: 14px 0 0; font-size: 13.5px; }
.epug.woocommerce-account .woocommerce-LostPassword a { color: var(--epug-orange); font-weight: 600; }
.epug.woocommerce-account .woocommerce-form-login__rememberme { font-weight: 400; font-size: 13.5px; color: var(--epug-muted); }
.epug.woocommerce-account .woocommerce-privacy-policy-text p { font-size: 12.5px; color: var(--epug-muted); }

/* ---- Dashboard (logado): sidebar + conteúdo ---- */
.epug.woocommerce-account.logged-in .woocommerce {
  display: grid; grid-template-columns: 252px 1fr; gap: 24px; align-items: start;
}
.epug.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
/* Anular o float + width:% que o WooCommerce aplica e fixar a coluna de cada um
   (a colocação automática estava a trocá-los). */
.epug.woocommerce-account .woocommerce-MyAccount-navigation,
.epug.woocommerce-account .woocommerce-MyAccount-content { width: auto; float: none; margin: 0; }
.epug.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; }
.epug.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content { grid-column: 2; }

/* MOBILE: empilhar. A grelha de 252px + 1fr mantinha-se em ecrãs estreitos —
   a barra lateral ficava com 196px e o conteúdo espremido em 127px, dos quais
   60 eram padding. O menu passa a uma fila de "chips" horizontal e o conteúdo
   ocupa a largura toda. */
@media (max-width: 860px) {
  .epug.woocommerce-account.logged-in .woocommerce { display: block; }
  .epug.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation,
  .epug.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content { grid-column: auto; }
  .epug.woocommerce-account .woocommerce-MyAccount-navigation {
    margin-bottom: 18px; padding: 10px; box-shadow: none;
  }
  .epug .woocommerce-MyAccount-navigation ul {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .epug .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
  .epug .woocommerce-MyAccount-navigation li { border-bottom: 0; flex: 0 0 auto; }
  .epug .woocommerce-MyAccount-navigation li a {
    white-space: nowrap; padding: 10px 14px; min-height: 44px;
    display: flex; align-items: center;
    border: 1px solid var(--epug-line); border-radius: 100px;
  }
  .epug .woocommerce-MyAccount-navigation li.is-active a { border-color: var(--epug-orange); }
  .epug .woocommerce-MyAccount-content { padding: 18px 16px; }
}
.epug .woocommerce-MyAccount-navigation {
  background: #fff; border: 1px solid var(--epug-line); border-radius: var(--epug-radius);
  padding: 12px; box-shadow: 0 10px 34px rgba(14,31,51,.07); align-self: start;
}
.epug .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.epug .woocommerce-MyAccount-navigation li { border: 0; margin: 2px 0; }
.epug .woocommerce-MyAccount-navigation li a {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: var(--epug-radius-sm);
  color: var(--epug-ink-2); font-family: var(--epug-font-head); font-weight: 600; font-size: 14px;
  transition: background .14s, color .14s;
}
.epug .woocommerce-MyAccount-navigation li a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35; flex-shrink: 0; }
.epug .woocommerce-MyAccount-navigation li a:hover { background: var(--epug-bg); color: var(--epug-orange); }
.epug .woocommerce-MyAccount-navigation li.is-active a { background: var(--epug-orange-soft); color: var(--epug-orange); }
.epug .woocommerce-MyAccount-navigation li.is-active a::before { opacity: 1; }
.epug .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: #b4321f; }

.epug .woocommerce-MyAccount-content {
  background: #fff; border: 1px solid var(--epug-line); border-radius: var(--epug-radius);
  padding: 30px; box-shadow: 0 10px 34px rgba(14,31,51,.07); min-width: 0;
}
.epug .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
.epug .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button) { color: var(--epug-orange); font-weight: 600; }

/* ---- Formulários (editar conta / moradas) como GRELHA (sem floats do WC) ---- */
.epug .woocommerce-EditAccountForm,
.epug .woocommerce-address-fields__field-wrapper {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start;
}
.epug .woocommerce-EditAccountForm > p.form-row,
.epug .woocommerce-address-fields__field-wrapper > p.form-row { float: none; width: auto; margin: 0 0 15px; }
/* meia-largura vs largura total */
.epug .woocommerce-EditAccountForm > p.form-row-first,
.epug .woocommerce-address-fields__field-wrapper > p.form-row-first { grid-column: 1; }
.epug .woocommerce-EditAccountForm > p.form-row-last,
.epug .woocommerce-address-fields__field-wrapper > p.form-row-last { grid-column: 2; }
.epug .woocommerce-EditAccountForm > p:not(.form-row-first):not(.form-row-last),
.epug .woocommerce-EditAccountForm > fieldset,
.epug .woocommerce-address-fields__field-wrapper > p:not(.form-row-first):not(.form-row-last) { grid-column: 1 / -1; }
.epug .woocommerce-EditAccountForm .woocommerce-Button,
.epug .woocommerce-address-fields button[type="submit"] { margin-top: 6px; }
/* MOBILE: uma coluna. A 375px os campos ficavam com 133px — nome e apelido
   lado a lado a essa largura são inutilizáveis. */
@media (max-width: 700px) {
  .epug .woocommerce-EditAccountForm,
  .epug .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; }
  .epug .woocommerce-EditAccountForm > p.form-row-first,
  .epug .woocommerce-EditAccountForm > p.form-row-last,
  .epug .woocommerce-address-fields__field-wrapper > p.form-row-first,
  .epug .woocommerce-address-fields__field-wrapper > p.form-row-last { grid-column: 1; }
  .epug .woocommerce-EditAccountForm fieldset { padding: 8px 14px 16px; }

  /* CHECKOUT: aqui a WooCommerce não usa grelha — põe `float:left/right` com
     `width:47%` nas classes `form-row-first`/`form-row-last`. A 375px isso dava
     campos de 134px para Nome e Apelido. Anular o float e ocupar a linha. */
  .epug .woocommerce form .form-row-first,
  .epug .woocommerce form .form-row-last,
  .epug .woocommerce-billing-fields__field-wrapper .form-row-first,
  .epug .woocommerce-billing-fields__field-wrapper .form-row-last,
  .epug .woocommerce-shipping-fields__field-wrapper .form-row-first,
  .epug .woocommerce-shipping-fields__field-wrapper .form-row-last {
    float: none; width: 100%; margin-left: 0; margin-right: 0;
  }
}
.epug .woocommerce-EditAccountForm fieldset { border: 1px solid var(--epug-line); border-radius: var(--epug-radius-sm); padding: 8px 20px 18px; margin: 8px 0 18px; }
.epug .woocommerce-EditAccountForm legend { font-family: var(--epug-font-head); font-weight: 700; padding: 0 8px; }
.epug .woocommerce-EditAccountForm fieldset p.form-row { margin: 15px 0 0; }

/* ---- Moradas: dois cartões (faturação/envio) ---- */
.epug .woocommerce-MyAccount-content .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.epug .woocommerce-MyAccount-content .col2-set .u-column1,
.epug .woocommerce-MyAccount-content .col2-set .u-column2 { width: auto; float: none; margin: 0; }
.epug .woocommerce-Address { background: var(--epug-bg); border: 1px solid var(--epug-line); border-radius: var(--epug-radius-sm); padding: 20px 22px; height: 100%; }
.epug.woocommerce-account .woocommerce-Address .woocommerce-Address-title { display: block; margin: 0 0 14px; }
.epug.woocommerce-account .woocommerce-Address .woocommerce-Address-title h2,
.epug.woocommerce-account .woocommerce-Address .woocommerce-Address-title h3 { display: block; font-size: 16px; font-weight: 700; margin: 0 0 4px; line-height: 1.3; }
.epug .woocommerce-Address-title .edit { display: inline-block; font-size: 13px; font-weight: 600; color: var(--epug-orange); }
.epug .woocommerce-Address-title .edit:hover { text-decoration: underline; }
.epug .woocommerce-Address address { font-style: normal; color: var(--epug-ink-2); line-height: 1.7; }

/* ---- Detalhe de UMA encomenda (my-account/view-order) -------------------
   O template do WooCommerce despeja aqui um parágrafo, uma lista de notas e
   duas secções sem estrutura visual — as moradas nem sequer ocupavam a largura
   (159px de "shrink to fit") e o email transbordava da caixa. */

/* Cabeçalho: "Encomenda #X criada a … e está no estado Y". */
.epug .woocommerce-MyAccount-content > p:first-of-type {
  background: var(--epug-bg); border: 1px solid var(--epug-line);
  border-radius: var(--epug-radius-sm); padding: 14px 18px; margin: 0 0 26px;
  color: var(--epug-ink-2); font-size: 14.5px;
}
.epug .woocommerce-MyAccount-content > p:first-of-type mark {
  background: none; color: var(--epug-ink); font-weight: 700;
}

/* Títulos de secção com ar por cima — antes colavam à tabela seguinte. */
.epug .woocommerce-order-details,
.epug .woocommerce-customer-details { margin-top: 32px; }
.epug .woocommerce-order-details__title,
.epug .woocommerce-customer-details h2,
.epug .woocommerce-MyAccount-content > h2 {
  font-family: var(--epug-font-head); font-size: 18px; margin: 0 0 14px;
}

/* Notas da encomenda ("Actualizações"). */
.epug ol.woocommerce-OrderUpdates { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.epug ol.woocommerce-OrderUpdates li.note {
  background: var(--epug-bg); border: 1px solid var(--epug-line);
  border-left: 3px solid var(--epug-orange);
  border-radius: var(--epug-radius-sm); padding: 12px 16px;
}
.epug ol.woocommerce-OrderUpdates .woocommerce-OrderUpdate-meta {
  display: block; font-family: var(--epug-font-mono); font-size: 11.5px;
  letter-spacing: .04em; color: var(--epug-muted); margin-bottom: 5px;
}
.epug ol.woocommerce-OrderUpdates .woocommerce-OrderUpdate-description p { margin: 0; font-size: 14px; }

/* Moradas: dois cartões a sério, iguais e à largura toda.
   `auto-fit` para não deixar um cartão órfão a meia largura quando só há um.
   Os pseudo-clearfix do `col2-set` viram células de grid — anular (ver gotchas). */
.epug .woocommerce-columns--addresses {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px; margin: 0;
}
.epug .woocommerce-columns--addresses::before,
.epug .woocommerce-columns--addresses::after { content: none !important; display: none !important; }
.epug .woocommerce-columns--addresses .woocommerce-column { width: auto; float: none; margin: 0; }
.epug .woocommerce-columns--addresses .woocommerce-column__title { font-size: 15px; margin: 0 0 10px; }
.epug .woocommerce-columns--addresses address {
  width: 100%; box-sizing: border-box;
  background: var(--epug-bg); border: 1px solid var(--epug-line);
  border-radius: var(--epug-radius-sm); padding: 16px 18px;
  font-style: normal; color: var(--epug-ink-2); line-height: 1.7; font-size: 14px;
  /* O email é uma palavra só e mais larga do que a caixa — sem isto sai fora. */
  overflow-wrap: anywhere;
}
.epug .woocommerce-columns--addresses address p {
  margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--epug-line);
  font-size: 13.5px;
}
.epug .woocommerce-columns--addresses address p + p { margin-top: 6px; padding-top: 0; border-top: 0; }

/* Bloco de seguimento (inc/order-tracking.php) alinhado com o resto. */
.epug .woocommerce-order-details .epug-tracking,
.epug .woocommerce-MyAccount-content .epug-tracking {
  background: var(--epug-orange-soft); border: 1px solid #F7D9C6;
  border-radius: var(--epug-radius-sm); padding: 16px 18px; margin: 0 0 22px;
}
.epug .epug-tracking h3 { font-family: var(--epug-font-head); font-size: 15px; margin: 0 0 8px; }
.epug .epug-tracking p { font-size: 14px; }

/* ---- Tabela de cookies (páginas legais) ----
   4 colunas dão 548px: numa página de 375px obrigava a scroll lateral dentro
   da figura — péssimo para um texto que se lê de cima a baixo. Em mobile cada
   cookie passa a cartão, com o cabeçalho de cada coluna (`data-label`) à frente. */
.epug .epug-cookie-table table { width: 100%; border-collapse: collapse; }
.epug .epug-cookie-table th,
.epug .epug-cookie-table td { padding: 10px 12px; border: 1px solid var(--epug-line); font-size: 14px; vertical-align: top; }
.epug .epug-cookie-table th { background: var(--epug-bg); text-align: left; font-family: var(--epug-font-head); font-size: 13px; }
.epug .epug-cookie-table td:first-child { font-family: var(--epug-font-mono); font-size: 12.5px; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .epug .epug-cookie-table thead { display: none; }
  .epug .epug-cookie-table table,
  .epug .epug-cookie-table tbody,
  .epug .epug-cookie-table tr,
  .epug .epug-cookie-table td { display: block; width: 100%; }
  .epug .epug-cookie-table tr {
    border: 1px solid var(--epug-line); border-radius: var(--epug-radius-sm);
    margin-bottom: 12px; padding: 10px 12px; background: var(--epug-bg);
  }
  .epug .epug-cookie-table td { border: 0; padding: 5px 0; }
  .epug .epug-cookie-table td::before {
    content: attr(data-label) ': '; font-family: var(--epug-font-head);
    font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--epug-muted);
    display: block; margin-bottom: 2px;
  }
  .epug .epug-cookie-table td:first-child::before { content: none; }
  .epug .epug-cookie-table td:first-child { font-weight: 700; padding-top: 0; }
}

/* ---- Tabela de encomendas / downloads ---- */
.epug .woocommerce-orders-table,
.epug .shop_table { width: 100%; border-collapse: collapse; border: 1px solid var(--epug-line); border-radius: var(--epug-radius-sm); overflow: hidden; }
.epug .woocommerce-orders-table th,
.epug .shop_table th { text-align: left; font-family: var(--epug-font-head); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--epug-muted); background: var(--epug-bg); padding: 12px 14px; }
.epug .woocommerce-orders-table td,
.epug .shop_table td { padding: 13px 14px; border-top: 1px solid var(--epug-line-2); font-size: 14px; }
/* Ações da encomenda ("Ver" · "Encomendar de novo"): pílulas separadas, com a
   ação principal a laranja. Sem isto saíam dois links colados, sem hierarquia. */
.epug .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
  text-align: right; white-space: nowrap;
}
.epug .woocommerce .woocommerce-orders-table__cell-order-actions a.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 14px; margin: 3px 0 3px 8px;
  border-radius: 100px; border: 1px solid var(--epug-line);
  font-family: var(--epug-font-sans); font-size: 13px; font-weight: 600;
  color: var(--epug-ink) !important; background: var(--epug-white);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.epug .woocommerce .woocommerce-orders-table__cell-order-actions a.button:first-child { margin-left: 0; }
.epug .woocommerce .woocommerce-orders-table__cell-order-actions a.button:hover {
  border-color: var(--epug-ink); background: var(--epug-bg);
}
/* Ação principal: repetir a compra. */
.epug .woocommerce .woocommerce-orders-table__cell-order-actions a.button.epug-order-again {
  background: var(--epug-orange); border-color: var(--epug-orange); color: #fff !important;
}
.epug .woocommerce .woocommerce-orders-table__cell-order-actions a.button.epug-order-again::before {
  content: '↻'; margin-right: 6px; font-size: 14px; line-height: 1;
}
.epug .woocommerce .woocommerce-orders-table__cell-order-actions a.button.epug-order-again:hover {
  background: var(--epug-orange-hover); border-color: var(--epug-orange-hover);
}
@media (max-width: 720px) {
  /* A tabela de encomendas é uma tabela a sério e, com 5 colunas, transbordava
     o ecrã (473px em 375). Em mobile cada linha passa a CARTÃO e cada célula a
     par "rótulo · valor", usando o `data-title` que a WooCommerce já escreve. */
  /* NB: a 1.ª célula (nº da encomenda) é um `<th scope="row">`, não um `<td>` —
     tem de entrar em TODOS os seletores, senão fica `table-cell` dentro de uma
     linha `block` e o número da encomenda desaparece. */
  .epug .woocommerce-orders-table,
  .epug .woocommerce-orders-table tbody,
  .epug .woocommerce-orders-table tr,
  .epug .woocommerce-orders-table th,
  .epug .woocommerce-orders-table td { display: block; width: 100%; }
  .epug .woocommerce-orders-table { border: 0; }
  .epug .woocommerce-orders-table thead { display: none; }
  .epug .woocommerce-orders-table tr.woocommerce-orders-table__row {
    border: 1px solid var(--epug-line); border-radius: var(--epug-radius);
    padding: 14px 16px; margin-bottom: 14px; background: var(--epug-white);
  }
  .epug .woocommerce-orders-table th.woocommerce-orders-table__cell,
  .epug .woocommerce-orders-table td.woocommerce-orders-table__cell {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    border: 0; border-top: 1px solid var(--epug-line-2); padding: 9px 0; text-align: right;
    background: none;
  }
  .epug .woocommerce-orders-table tr th.woocommerce-orders-table__cell:first-child,
  .epug .woocommerce-orders-table tr td.woocommerce-orders-table__cell:first-child { border-top: 0; padding-top: 0; }
  .epug .woocommerce-orders-table th.woocommerce-orders-table__cell::before,
  .epug .woocommerce-orders-table td.woocommerce-orders-table__cell::before {
    content: attr(data-title); flex: 0 0 auto; text-align: left;
    font-family: var(--epug-font-head); font-size: 12px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--epug-muted);
  }
  /* O nº da encomenda é a "identidade" do cartão — a negrito. */
  .epug .woocommerce-orders-table th.woocommerce-orders-table__cell-order-number a { font-weight: 700; }
  /* Ações: sem rótulo, botões a toda a largura e empilhados. */
  .epug .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions { display: block; text-align: left; white-space: normal; }
  .epug .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before { content: none; }
  .epug .woocommerce .woocommerce-orders-table__cell-order-actions a.button {
    display: flex; width: 100%; margin: 8px 0 0; min-height: 44px;
  }
}

/* ---- Avisos WooCommerce ---- */
.epug .woocommerce-message,
.epug .woocommerce-info,
.epug .woocommerce-error {
  list-style: none; border: 1px solid var(--epug-line); border-left: 4px solid var(--epug-orange);
  background: #fff; border-radius: var(--epug-radius-sm); padding: 14px 16px; margin: 0 0 20px;
  font-size: 14px; box-shadow: 0 4px 16px rgba(14,31,51,.05);
}
.epug .woocommerce-error { border-left-color: #c0392b; }
.epug .woocommerce-message { border-left-color: #2f9e5f; }

@media (max-width: 820px) {
  .epug.woocommerce-account .woocommerce > .col2-set,
  .epug.woocommerce-account.logged-in .woocommerce,
  .epug .woocommerce-MyAccount-content .col2-set { grid-template-columns: 1fr; }
}