/* assets/css/components.css */

/* ── BUTTONS ── */
.soc-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-2);
  padding:         12px 24px;
  font-family:     var(--font-main);
  font-size:       var(--text-sm);
  font-weight:     var(--fw-medium);
  letter-spacing:  .07em;
  border-radius:   var(--r-pill);
  border:          none;
  cursor:          pointer;
  text-decoration: none;
  white-space:     nowrap;
  transition:      background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  line-height:     1;
}
.soc-btn:focus-visible {
  outline:        2px solid var(--c-accent);
  outline-offset: 2px;
}

.soc-btn--primary              { background: var(--c-brand); color: var(--c-white); }
.soc-btn--primary:hover        { background: var(--c-brand-dark); color: var(--c-white); }

.soc-btn--outline              { background: var(--c-white); color: var(--c-brand); border: 0.5px solid var(--c-brand); }
.soc-btn--outline:hover        { background: var(--c-brand-light); }

.soc-btn--dark                 { background: var(--c-text); color: var(--c-white); }

.soc-btn--ghost                { background: transparent; color: var(--c-white); border: 0.5px solid rgba(255,255,255,.4); }

.soc-btn--full                 { width: 100%; justify-content: center; }
.soc-btn--sm                   { padding: 8px 16px; font-size: var(--text-xs); }
.soc-btn--lg                   { padding: 15px 32px; font-size: var(--text-md); }

/* ── FIELDS ── */
.soc-field-group { margin-bottom: var(--sp-4); }

.soc-label {
  display:        block;
  font-size:      var(--text-xs);
  font-weight:    var(--fw-medium);
  letter-spacing: .07em;
  text-transform: uppercase;
  color:          var(--c-text-light);
  margin-bottom:  var(--sp-2);
}

.soc-input,
.soc-select,
.soc-textarea {
  display:     block;
  width:       100%;
  background:  var(--c-white);
  color:       var(--c-text);
  border:      0.5px solid var(--c-border-mid);
  border-radius: var(--r-pill);
  outline:     none;
  box-shadow:  none;
  padding:     11px 16px;
  font-size:   var(--text-base);
  font-family: var(--font-main);
  font-weight: var(--fw-regular);
  -webkit-appearance: none;
  appearance:  none;
  transition:  border-color var(--t-fast);
}
/* textarea não fica pastilha — usa o raio médio */
.soc-textarea { border-radius: var(--r); padding: 11px 15px; }

.soc-input::placeholder { color: var(--c-text-ghost); }
.soc-input:focus,
.soc-select:focus,
.soc-textarea:focus     { border-color: var(--c-brand); }

.soc-input:-webkit-autofill {
  -webkit-box-shadow:      0 0 0 1000px var(--c-white) inset !important;
  -webkit-text-fill-color: var(--c-text) !important;
}

/* ── PRODUCT CARD ── */
/* O card vive agora em assets/css/product-card.css, que carrega sempre.
   Ficavam aqui `.soc-product-card`, `__img-wrap`, `__img`, `__info`, `__name`,
   `__sub`, `__price` e `__price-old` — as quatro ultimas com classes que o
   renderer ja nao emite. O `:hover .soc-product-card__img` que aqui estava nao
   tinha guarda `@media (hover: hover)`: no telemovel o zoom ficava colado ao
   ultimo card tocado. */

/* Wishlist button on card */
.soc-wishlist-btn {
  position:    absolute;
  top:         var(--sp-3);
  right:       var(--sp-3);
  z-index:     2;
  width:       30px;
  height:      30px;
  background:  none;
  border:      none;
  display:     flex;
  align-items: center;
  justify-content: center;
  cursor:      pointer;
  color:       var(--c-text-muted);
  opacity:     1;
  transition:  color var(--t-fast), transform 0.15s ease;
}
.soc-wishlist-btn svg {
  fill:       transparent;
  transition: fill 0.2s ease, transform 0.15s ease;
}
.soc-wishlist-btn:hover { color: var(--c-accent); transform: scale(1.1); }
.soc-wishlist-btn:hover svg { fill: rgba(236,106,78,.35); }

.soc-wishlist-btn.is-active { color: var(--c-accent); }
.soc-wishlist-btn.is-active svg { fill: var(--c-accent); }

/* Clickable swatches (cards) — hover with ring, no scale to avoid overlapping neighbours */
a.soc-swatch {
  display:         inline-block;
  text-decoration: none;
  position:        relative;
}
a.soc-swatch:hover {
  outline:        2px solid var(--c-brand);
  outline-offset: 2px;
  z-index:        1;
}

/* SKU / Ref + stock status — shared between product, cart, mini-cart and checkout */
.soc-product-ref          { display: block; font-size: 10px; color: var(--c-text-light); margin-bottom: 4px; }
.soc-stock--instock       { color: var(--c-success); }
.soc-stock--aguarda_stock { color: var(--c-warning); }
.soc-stock--outofstock    { color: var(--c-accent); }

/* Badges */
.soc-badges {
  position: absolute;
  top:      var(--sp-3);
  left:     var(--sp-3);
  display:  flex;
  flex-direction: column;
  gap:      var(--sp-1);
  z-index:  2;
}

.soc-badge {
  display:        inline-flex;
  align-items:    center;
  padding:        3px 9px;
  font-size:      .5625rem;
  font-weight:    var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height:    1.4;
  border-radius:  var(--r-pill);
}

.soc-badge--ar   { background: var(--c-brand);      color: var(--c-bg-warm); }
.soc-badge--new  { background: var(--c-brand-dark); color: var(--c-bg-warm); }
.soc-badge--sale { background: var(--c-accent);     color: var(--c-brand-dark); }
.soc-badge--out  { background: var(--c-sage);       color: var(--c-brand-dark); }


/* Swatches */
.soc-swatches { display: flex; gap: 6px; margin-top: var(--sp-2); align-items: center; flex-wrap: wrap; }

.soc-swatch {
  width:         16px;
  height:        16px;
  border-radius: 50%;
  cursor:        pointer;
  flex-shrink:   0;
}

.soc-swatch           { box-shadow: 0 0 0 0.5px rgba(0,0,0,0.15); } /* borda subtil para swatches claras */
.soc-swatch.is-active { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.soc-swatches__more   { font-size: .6rem; color: var(--c-text-xlight); }

/* ── GEO MODAL (país + idioma) ───────────────────────────────────────── */
/* Set/2026: era uma barra — primeiro por cima da top-bar, depois fixa no fundo do
   ecra — e passava despercebida. Agora e a MESMA janela que o checkout ja usa
   (inc/checkout-geo-modal.php): cartao ao centro, fundo escurecido e pagina
   travada por tras. O cartao continua a ser a .soc-geo-banner; muda a moldura.
   As regras do .soc-geo-modal vivem aqui, e nao no ficheiro do checkout, porque
   agora servem todas as paginas; as inline do checkout repetem-nas com os mesmos
   valores e continuam a ganhar por virem depois no documento. */
.soc-geo-modal {
  position:    fixed;
  inset:       0;
  z-index:     100000;
  display:     grid;
  place-items: center;
  padding:     16px;
  background:  rgba(7, 43, 51, .45);
}
.soc-geo-modal[hidden]      { display: none !important; }
body.soc-geo-modal-open     { overflow: hidden; }

.soc-geo-banner {
  background: #E6E0D3; /* cream fixo: imune a overrides de --c-bg-alt */
  border:     0;
}
.soc-geo-modal .soc-geo-modal__card {
  position:      relative;
  width:         min(560px, 100%);
  border-radius: var(--r-lg, 18px);
  box-shadow:    0 18px 50px rgba(7, 43, 51, .28);
  padding:       28px 26px 24px;
  text-align:    center;
}
.soc-geo-modal .soc-geo-modal__close {
  position: absolute;
  top:      10px;
  right:    10px;
  width:    34px;
  height:   34px;
}
.soc-geo-banner__inner {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  padding:         8px var(--pad-desktop);
  max-width:       var(--container);
  margin:          0 auto;
}
.soc-geo-banner__text {
  font-size:   var(--text-sm);
  font-weight: var(--fw-regular);
  color:       var(--c-text-body);
  white-space: nowrap;
}
.soc-geo-banner__controls {
  display:     flex;
  align-items: center;
  gap:         6px;
}
.soc-geo-banner .soc-geo-banner__select {
  background:          var(--c-white) !important;
  color:               var(--c-text-body) !important;
  border:              0.5px solid var(--c-border) !important;
  border-radius:       var(--r-pill) !important;
  height:              34px !important;
  padding:             0 26px 0 9px !important;
  font-size:           var(--text-sm) !important;
  font-family:         var(--font-main) !important;
  font-weight:         var(--fw-regular) !important;
  cursor:              pointer;
  appearance:          none !important;
  -webkit-appearance:  none !important;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath d='M1 1l3.5 3L8 1' stroke='%2380776A' stroke-width='1.1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat !important;
  background-position: right 8px center !important;
  box-sizing:          border-box !important;
  outline:             none !important;
  width:               auto !important;
  flex-shrink:         0;
  transition:          border-color .15s;
}
.soc-geo-banner .soc-geo-banner__select:focus { border-color: var(--c-brand) !important; }
.soc-geo-banner__btn {
  background:     var(--c-brand);
  color:          var(--c-white);
  border:         none;
  height:         34px;
  padding:        0 16px;
  font-size:      var(--text-sm);
  font-family:    var(--font-main);
  font-weight:    var(--fw-medium);
  letter-spacing: .04em;
  cursor:         pointer;
  white-space:    nowrap;
  transition:     background .15s;
  border-radius:  var(--r-pill);
  box-sizing:     border-box;
}
.soc-geo-banner__btn:hover { background: var(--c-brand-dark); }
.soc-geo-banner__close {
  background:      transparent;
  border:          none;
  color:           var(--c-text-light);
  cursor:          pointer;
  padding:         4px 6px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  line-height:     1;
  transition:      color .15s;
}
.soc-geo-banner__close:hover { color: var(--c-text-body); }

/* O cartao por dentro. Estas regras tem de vir DEPOIS das da barra: varios
   pares empatam em especificidade (.soc-geo-modal .soc-geo-banner__select contra
   .soc-geo-banner .soc-geo-banner__select, as duas com !important na altura) e
   nesse empate ganha a ultima do ficheiro. */
/* No cartao o texto fica em cima e os controlos por baixo, em coluna: a frase
   toda numa linha com os selectores ao lado so cabia na barra a largura do ecra. */
.soc-geo-modal .soc-geo-banner__inner {
  flex-direction: column;
  gap:            14px;
  padding:        0;
  max-width:      none;
}
.soc-geo-modal .soc-geo-banner__text {
  max-width:   calc(100% - 44px);
  font-size:   15px;
  font-weight: var(--fw-semibold, 600);
  line-height: 1.4;
  white-space: normal;
  text-align:  center;
  text-wrap:   balance;
}
.soc-geo-modal .soc-geo-banner__controls { justify-content: center; flex-wrap: wrap; }
.soc-geo-modal .soc-geo-banner__select   { height: 38px !important; min-width: 140px; }
.soc-geo-modal .soc-geoflag .flagsel__btn { height: 38px; min-width: 140px; }
.soc-geo-modal .soc-geo-banner__btn      { height: 38px; padding: 0 22px; }
.soc-geo-modal .flagsel__list            { text-align: left; }

@media (max-width: 767px) {
  .soc-geo-modal .soc-geo-modal__card  { padding: 24px 16px 16px; }
  .soc-geo-modal .soc-geo-banner__text { font-size: 14px; }

  /* Os dois selectores lado a lado e o botao por baixo, a toda a largura —
     o mesmo arranjo da janela do checkout. */
  .soc-geo-modal .soc-geo-banner__controls {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    width:                 100%;
  }
  .soc-geo-modal .soc-geoflag { min-width: 0; width: 100%; }
  .soc-geo-modal .soc-geo-banner__select:not(.soc-geoflag__native) {
    flex:      none !important;
    min-width: 0 !important;
    width:     100% !important;
  }
  .soc-geo-modal .soc-geoflag .flagsel__btn { width: 100%; min-width: 0; }
  /* Nomes longos ("Other countries") nao podem esticar a coluna. */
  .soc-geo-modal .soc-geoflag .flagsel__code {
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
  }
  .soc-geo-modal .soc-geo-banner__btn { grid-column: 1 / -1; width: 100%; }
}

/* ── GEO FOOTER SELECTS (dark footer) ───────────────────────────────── */
.soc-footer__geo-block { margin-top: var(--sp-5); }
@media (max-width: 767px) {
  .soc-footer__geo-block { margin-bottom: var(--sp-5); }
}
.soc-footer__geo-label {
  display:        block;
  font-size:      9px;
  letter-spacing: .12em;
  color:          rgba(255,255,255,.35);
  font-weight:    var(--fw-medium);
  text-transform: uppercase;
  margin-bottom:  10px;
}
.soc-footer__geo-selects {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
}
.soc-footer__geo-selects .soc-footer__geo-select {
  background:          rgba(0,0,0,.25) !important;
  background-color:    rgba(0,0,0,.25) !important;
  color:               rgba(255,255,255,.85) !important;
  border:              1px solid rgba(255,255,255,.15) !important;
  border-radius:       var(--r-pill) !important;
  height:              32px !important;
  padding:             0 30px 0 14px !important;
  font-size:           11px !important;
  font-family:         var(--font-main) !important;
  font-weight:         var(--fw-regular) !important;
  cursor:              pointer;
  appearance:          none !important;
  -webkit-appearance:  none !important;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath d='M1 1l3.5 3L8 1' stroke='%23ffffff' stroke-width='1.1' fill='none' stroke-linecap='round' stroke-opacity='.6'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat !important;
  background-position: right 12px center !important;
  box-sizing:          border-box !important;
  outline:             none !important;
  flex:                1 1 auto !important;
  min-width:           118px !important;
  width:               auto !important;
}
.soc-footer__geo-selects .soc-footer__geo-select option {
  background: var(--c-brand-dark);
  color: var(--c-white);
}
.soc-footer__geo-apply {
  background:     rgba(255,255,255,.15);
  color:          var(--c-white);
  border:         1px solid rgba(255,255,255,.3);
  height:         30px;
  padding:        0 12px;
  font-size:      11px;
  font-family:    var(--font-main);
  font-weight:    var(--fw-medium);
  letter-spacing: .05em;
  cursor:         pointer;
  border-radius:  var(--r-pill);
  flex-shrink:    0;
  white-space:    nowrap;
  transition:     background .15s, border-color .15s;
}
.soc-footer__geo-apply:hover {
  background:    rgba(255,255,255,.25);
  border-color:  rgba(255,255,255,.5);
}

/* ── GEO DRAWER SELECTS (light drawer background) ───────────────────── */
/* Parent scope needed: beats .woocommerce-page select specificity (0,1,1) */
.soc-nav-drawer__geo-label {
  display:        block;
  font-size:      9px;
  letter-spacing: .12em;
  color:          var(--c-text-light);
  font-weight:    var(--fw-medium);
  text-transform: uppercase;
  margin-bottom:  10px;
}
.soc-nav-drawer__geo-selects {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-wrap:   wrap;
}
.soc-nav-drawer .soc-nav-drawer__geo-select {
  background:          var(--c-bg-alt) !important;
  background-color:    var(--c-bg-alt) !important;
  color:               var(--c-text) !important;
  border:              0.5px solid var(--c-border) !important;
  border-radius:       var(--r-pill) !important;
  height:              32px !important;
  padding:             0 24px 0 8px !important;
  font-size:           12px !important;
  font-family:         var(--font-main) !important;
  font-weight:         var(--fw-regular) !important;
  cursor:              pointer;
  appearance:          none !important;
  -webkit-appearance:  none !important;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath d='M1 1l3.5 3L8 1' stroke='%23888' stroke-width='1.1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat !important;
  background-position: right 7px center !important;
  box-sizing:          border-box !important;
  outline:             none !important;
  flex:                1 1 0;
  min-width:           0;
}
.soc-nav-drawer__geo-apply {
  background:     var(--c-brand);
  color:          var(--c-white);
  border:         none;
  height:         32px;
  padding:        0 14px;
  font-size:      11px;
  font-family:    var(--font-main);
  font-weight:    var(--fw-medium);
  letter-spacing: .05em;
  cursor:         pointer;
  border-radius:  var(--r-pill);
  flex-shrink:    0;
  white-space:    nowrap;
  transition:     background .15s;
}
.soc-nav-drawer__geo-apply:hover { background: var(--c-brand-dark); }

/* ── Nome do produto em Bricolage — todos os posicionamentos ── */
/* (shop, product card, complete the look, cart, checkout, mini-cart, search, related, recently viewed, new arrivals) */
/* B3e: sairam `.woocommerce-loop-product__title`, `.soc-complete__name` e
   `.soc-search-panel__card-name` — nenhuma dessas classes e emitida hoje.

   `.soc-product-card__name` FICA, e e deliberado (decidido Ago 2026). Esta regra
   tem `!important` e vence o `product-card.css`, por isso o nome do produto nos
   cards sai em **Bricolage 14px** e nao no Manrope 12,5px que o `product-card.css`
   pede. Foi o aspecto escolhido em producao — nao "corrigir" o conflito tirando
   daqui o selector nem acrescentando `!important` do outro lado.

   Consequencia assumida: a Nusa nao tem esta regra, logo os dois temas divergem
   no nome do card (14px display na SOC, 12,5px de texto na Nusa). */
.soc-product-card__name,
.soc-cart-item__name,
.soc-checkout-item__name,
.soc-cart-together__name,
.soc-new-arrivals__name {
  font-family:    var(--font-display) !important;
  font-size:      14px !important;
  letter-spacing: var(--tracking-display);
}

/* ═══════════════════════════════════════════════
   NOTICES — sistema unificado (inline + toast)
   Usado por: WooCommerce notices, erro de variação, wishlist, notify.
   JS: soc.notice(type, msg, opts) em utils2.js.
   ═══════════════════════════════════════════════ */
.soc-notice {
  position:      relative;
  border-radius: var(--r);
  border-left:   3px solid var(--c-brand);
  background:    var(--c-brand-light);
  color:         var(--c-text);
  padding:       13px 40px 13px 18px;
  font-family:   var(--font-main);
  font-size:     13px;
  line-height:   1.5;
  animation:     soc-noticein .2s ease;
}
.soc-notice + .soc-notice { margin-top: 10px; }

.soc-notice--success { border-left-color: var(--c-success); background: var(--c-success-bg); }
.soc-notice--info    { border-left-color: var(--c-brand);   background: var(--c-brand-light); }
.soc-notice--warning { border-left-color: var(--c-warning); background: var(--c-warning-bg); }
.soc-notice--error   { border-left-color: var(--c-error);   background: var(--c-error-bg); }

.soc-notice a { color: inherit; font-weight: 500; text-decoration: underline; }

.soc-notice__close {
  position:   absolute;
  top:        10px;
  right:      12px;
  background: none;
  border:     none;
  padding:    2px;
  cursor:     pointer;
  font-size:  16px;
  line-height:1;
  color:      var(--c-text-light);
  opacity:    .6;
  transition: opacity var(--t-fast);
  font-family:inherit;
}
.soc-notice__close:hover { opacity: 1; color: var(--c-text); }

.soc-notice--hiding {
  opacity:    0;
  transform:  translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
}

/* Toast — pilha fixa no canto superior direito */
.soc-toast-container {
  position:       fixed;
  top:            90px;
  right:          20px;
  z-index:        var(--z-modal);
  display:        flex;
  flex-direction: column;
  gap:            10px;
  max-width:      320px;
  pointer-events: none;
}
.soc-toast-container .soc-notice {
  pointer-events: auto;
  box-shadow:     var(--shadow-md);
}

@keyframes soc-noticein {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  .soc-toast-container { top: auto; bottom: 16px; left: 16px; right: 16px; max-width: none; }
}

/* Delivery badge — the mini-cart shows it site-wide, so keep it styled even
   where woocommerce.css isn't loaded (info pages depend on soc-comp, not soc-woo). */
.soc-delivery-badge { display: flex; align-items: flex-start; gap: 5px; font-size: 9px; color: var(--c-text-light); margin-top: 5px; line-height: 1.3; }
.soc-delivery-badge svg { flex-shrink: 0; color: var(--c-text-light); margin-top: 1px; }
.soc-mini-cart__item-info .soc-delivery-badge { margin-top: 2px; }

/* Consent checkbox — contact form (and future PRO form) */
.soc-consent { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--c-text-muted); cursor: pointer; }
.soc-consent input { margin-top: 3px; flex: none; accent-color: var(--c-brand); }
.soc-consent a { color: var(--c-brand); text-decoration: underline; }

/* ── Dial-code listbox with flags ───────────────────────────────────────────
   Shared component: markup in soc_flag_select() (inc/helpers.php), behaviour in
   soc.flagSelect() (utils2.js). Site-wide because the newsletter modal ships in
   the footer on every page.

   Only structure lives here. The button's border, radius, padding and focus ring
   come from whatever field class the host form passes in as `btn_class`, so the
   control always matches the inputs beside it.

   The PRO page and Nusa Home Lovers still style their own private copies; those
   sheets load after this one and their selectors are at least as specific, so
   nothing here reaches them. */

.flagsel { position: relative; z-index: 2; min-width: 0; }

.flagsel__btn {
  display: flex; align-items: center; gap: 6px; text-align: left; cursor: pointer;
}
.flagsel.is-open .flagsel__btn { border-color: var(--c-brand); }

.flagsel__flag,
.flagsel .flg {
  width: 20px; height: 14px; border-radius: 2px; overflow: hidden; flex: none;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.10); display: block;
}
.flagsel__flag svg,
.flagsel .flg svg { display: block; width: 100%; height: 100%; }

.flagsel__code { font-variant-numeric: tabular-nums; }
.flagsel__chev { margin-left: auto; color: var(--c-text-muted); transition: transform var(--t-fast); flex: none; }
.flagsel.is-open .flagsel__chev { transform: rotate(180deg); }

/* Absolutely positioned — nothing between here and the field may clip it. */
.flagsel__list {
  position: absolute; top: calc(100% + 5px); left: 0; min-width: 238px; z-index: 30;
  margin: 0; padding: 5px; list-style: none; background: var(--c-white);
  border: 1px solid var(--c-border); border-radius: var(--r);
  box-shadow: 0 14px 34px -10px rgba(7,43,51,.30); max-height: 240px; overflow: auto;
}
.flagsel__list[hidden] { display: none; }

/* No cartao de pais a lista abre para CIMA. O cartao esta ao centro do ecra e a
   lista tem 256 px: para baixo nao cabe em telemoveis baixos (medido num ecra de
   568 px), para cima cabe sempre. Direccao fixa, nao medida. Os outros usos do
   componente (rodape, indicativo dos formularios) continuam a abrir para baixo. */
.soc-geo-banner .flagsel__list { top: auto; bottom: calc(100% + 5px); }
.flagsel__list li {
  display: flex; align-items: center; gap: 9px; padding: 8px 9px;
  border-radius: var(--r-sm); cursor: pointer; font-size: 14px; color: var(--c-text);
}
/* A fixed tint, not --c-bg-alt: Nusa forces that token to #fff on the static
   pages, and this modal ships on every page — the highlight would vanish. */
.flagsel__list li:hover,
.flagsel__list li.is-active { background: rgba(0,0,0,.055); }
.flagsel__list .nm { flex: 1; }
.flagsel__list .cd { color: var(--c-text-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 420px) {
  .flagsel__list { min-width: 200px; }
}

/* ── Flags on the country switchers (banner + footer) ───────────────────────
   Built by geo-flags.js on top of the native <select>, which stays in the page.
   Structure comes from .flagsel above; only the chrome of each context is here.
   Site-wide because both switchers are (banner in the header, block in the footer). */

/* The native control: out of sight, still in the page and still the value. */
.soc-geoflag__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.soc-geoflag .flagsel__code { font-variant-numeric: normal; white-space: nowrap; }
.soc-geoflag .flagsel__list .flg { overflow: hidden; flex: none; display: block; }
.soc-geoflag .flagsel__list .flg svg { display: block; width: 100%; height: 100%; }

/* ── Light: the geo banner strip ── */
.soc-geoflag--light .flagsel__btn {
  height: 34px;
  padding: 0 11px;
  font-size: var(--text-sm);
  font-family: var(--font-main);
  color: var(--c-text-body);
  background: var(--c-white);
  border: 0.5px solid var(--c-border);
  border-radius: var(--r-pill);
}
.soc-geoflag--light.flagsel.is-open .flagsel__btn,
.soc-geoflag--light .flagsel__btn:focus-visible { border-color: var(--c-brand); outline: none; }
.soc-geoflag--light .flagsel__flag { width: 20px; height: 14px; }
.soc-geoflag--light .flagsel__chev { color: var(--c-brand); }
.soc-geoflag--light .flagsel__list {
  min-width: 200px;
  font-size: var(--text-sm);
  color: var(--c-text-body);
}
.soc-geoflag--light .flagsel__list .flg { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 .5px rgba(0,0,0,.14); }

/* ── Dark: the footer block, on deep teal ── */
.soc-geoflag--dark .flagsel__btn {
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
  font-family: var(--font-main);
  color: rgba(255,255,255,.85);
  background: transparent;
  border: 0.5px solid rgba(255,255,255,.25);
  border-radius: var(--r-pill);
}
.soc-geoflag--dark.flagsel.is-open .flagsel__btn,
.soc-geoflag--dark .flagsel__btn:focus-visible { border-color: rgba(255,255,255,.7); outline: none; }
.soc-geoflag--dark .flagsel__flag { width: 16px; height: 11px; }
.soc-geoflag--dark .flagsel__chev { color: rgba(255,255,255,.55); }
.soc-geoflag--dark .flagsel__list {
  min-width: 190px;
  font-size: 12px;
  background: var(--c-brand-dark);
  border: 0.5px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.55);
  color: rgba(255,255,255,.88);
}
.soc-geoflag--dark .flagsel__list li:hover,
.soc-geoflag--dark .flagsel__list li.is-active { background: rgba(255,255,255,.09); }
.soc-geoflag--dark .flagsel__list .flg { width: 16px; height: 11px; border-radius: 2px; box-shadow: 0 0 0 .5px rgba(0,0,0,.30); }

/* The footer list opens upward — there is nothing below it but page end. */
.soc-geoflag--dark .flagsel__list { top: auto; bottom: calc(100% + 5px); }

/* ── Geo switchers: fixes after the first live look ────────────────────────── */

/* Seven countries don't fit the component's default 240px, so every list came up
   with a scrollbar. Give the geo lists room — they have a fixed, short list. */
.soc-geoflag .flagsel__list { max-height: 340px; }
.soc-geoflag .flagsel__list li { line-height: 1.35; }

/* The shared rule paints li text with --c-text (near-black). On the footer's teal
   that is invisible — the colour has to be set on the ROW, not just the panel. */
.soc-geoflag--dark .flagsel__list li { color: rgba(255,255,255,.88); }
.soc-geoflag--dark .flagsel__list li:hover,
.soc-geoflag--dark .flagsel__list li.is-active { color: #fff; }

/* A light native scrollbar on a dark panel reads as a seam. Should the list ever
   need to scroll, keep it in the panel's own palette. */
.soc-geoflag--dark .flagsel__list { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; }
.soc-geoflag--dark .flagsel__list::-webkit-scrollbar { width: 8px; }
.soc-geoflag--dark .flagsel__list::-webkit-scrollbar-track { background: transparent; }
.soc-geoflag--dark .flagsel__list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 999px; }

/* Room for the longest name ("Other countries") without wrapping. */
.soc-geoflag--dark .flagsel__list { min-width: 205px; }
.soc-geoflag--light .flagsel__list { min-width: 215px; }

/* ── Language switcher: same control, no flags ─────────────────────────────
   Skinned too, so the two boxes match. Flags stay off it on purpose — a flag is
   a country, not a language. */
.soc-geoflag--plain .flagsel__btn { gap: 0; }
.soc-geoflag--plain .flagsel__btn .flagsel__code { padding-right: 10px; }
.soc-geoflag--plain .flagsel__list { min-width: 150px; }
.soc-geoflag--plain .flagsel__list li { gap: 0; }

/* ── COLECÇÃO NAS LINHAS DE ENCOMENDA ────────────────────────────────────────
   Mini cart, carrinho, checkout, confirmação e detalhes da encomenda. As cinco
   têm marcação própria, mas partilham a regra: quando há colecção, ela toma o
   lugar de destaque e o nome do produto desce a subtítulo.

   O modificador não define tamanho nem posição — herda-os da classe do nome que
   já existe em cada sítio. Só acrescenta o que faz da colecção uma colecção. */
/* `!important` é preciso e não é preguiça: o components.css é dependência de
   todos os outros (ver inc/enqueue.php), logo carrega SEMPRE primeiro. As regras
   de cada contexto — .soc-cart-item__name, .soc-mini-cart__item-name,
   .soc-checkout-item__name — têm a mesma especificidade e vêm depois, portanto
   ganhariam. E a do checkout está escrita com !important dentro do PHP.
   Sem isto, a colecção aparecia preta nuns sítios e com pesos diferentes noutros.
   O `a` está aqui porque a âncora tem cor própria e ganha à do <div>. */
.soc-line-coll,
.soc-line-coll a { font-weight: var(--fw-bold) !important; color: var(--c-brand) !important; }

.soc-line-sub {
  font-size:   12.5px;
  font-weight: var(--fw-regular);
  color:       var(--c-text-muted);
  line-height: 1.4;
  margin:      2px 0 0;
  display:     block;
}

/* ═══════════════════════════════════════════════════════════
   LOGIN / REGISTER — cartão com separadores + login social
   Markup: woocommerce/myaccount/form-login.php
           inc/checkout-auth.php (bloco de acesso do checkout)
   JS:     assets/js/account.js

   ⚠️ Vive AQUI e não no account.css: esse ficheiro só carrega
   em is_account_page(), e no checkout o componente ficaria sem
   estilo nenhum. O que é layout DA PÁGINA DE CONTA (largura do
   cartão e centragem) fica no account.css, scoped ao body.
   ═══════════════════════════════════════════════════════════ */

/* Separadores — só quando o JS ativa os tabs (progressive enhancement) */
.soc-auth__tabs { display: none; }
.soc-auth.is-tabbed .soc-auth__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 26px;
}
.soc-auth__tab {
  padding: 12px 10px;
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--c-text-muted);
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.soc-auth__tab:hover { border-color: var(--c-brand); }
.soc-auth.is-tabbed[data-tab="login"]    .soc-auth__tab[data-target="login"],
.soc-auth.is-tabbed[data-tab="register"] .soc-auth__tab[data-target="register"] {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
}

/* Título de fallback (só sem JS; com tabs fica escondido) */
.soc-auth__panel-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--c-brand-dark);
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-border);
}
.soc-auth.is-tabbed .soc-auth__panel-title { display: none; }
.soc-auth:not(.is-tabbed) .soc-auth__panel + .soc-auth__panel { margin-top: 40px; }

/* Bloco social partilhado no topo */
.soc-auth__head {
  text-align: center;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--c-brand-dark);
  margin: 0 0 16px;
}
.soc-social-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--c-text);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  padding: 13px 20px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.soc-social-btn:hover { border-color: var(--c-brand); box-shadow: 0 6px 18px -10px rgba(7, 43, 51, .35); }
.soc-social-btn:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.soc-social-btn__icon { width: 18px; height: 18px; flex-shrink: 0; }
.soc-auth__or {
  display: flex; align-items: center; gap: 14px;
  margin: 20px 0;
  color: var(--c-text-light);
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.soc-auth__or::before, .soc-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }

/* Painéis (mostrar/esconder por tab quando o JS está ativo) */
.soc-auth.is-tabbed .soc-auth__panel { display: none; }
.soc-auth.is-tabbed[data-tab="login"]    .soc-auth__panel[data-panel="login"],
.soc-auth.is-tabbed[data-tab="register"] .soc-auth__panel[data-panel="register"] { display: block; }

/* ── Interior do cartão .soc-auth ─────────────────────────────────────
   ⚠️ Estas regras estavam escritas com o prefixo `.woocommerce-account`
   e por isso NÃO existiam no checkout: o botão de submeter, o tamanho das
   etiquetas, a linha do "remember me" e o retângulo do show-password do
   WooCommerce caíam todos para o estilo do checkout. Duplicadas aqui com
   o prefixo do componente, para o estilo viajar com ele.
   As do account.css ficam onde estão — servem os outros ecrãs da conta.
   ─────────────────────────────────────────────────────────────────── */
.soc-auth .woocommerce-form-login,
.soc-auth .woocommerce-form-register {
  background:     var(--c-white);
  padding:        var(--sp-8);
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-4);
}

.soc-auth .form-row,
.soc-auth .woocommerce-form-row {
  display:        flex !important;
  flex-direction: column !important;
  gap:            5px !important;
  margin:         0 !important;
  padding:        0 !important;
}

.soc-auth .form-row label {
  font-size:      var(--text-xs) !important;
  font-weight:    var(--fw-regular) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color:          var(--c-text-light) !important;
}

.soc-auth .woocommerce-button.button,
.soc-auth button.button {
  background:   var(--c-brand) !important;
  color:        var(--c-white) !important;
  border:       none !important;
  border-radius: var(--r-pill) !important;
  padding:      12px 24px !important;
  font-size:    var(--text-xs) !important;
  font-weight:  var(--fw-medium) !important;
  font-family:  var(--font-main) !important;
  letter-spacing: .07em !important;
  cursor:       pointer !important;
}

.soc-auth .show-password-input { display: none !important; }

.soc-auth .woocommerce-form__label-for-checkbox {
  display:     flex !important;
  align-items: center !important;
  gap:         7px !important;
  cursor:      pointer;
  flex-direction: row !important;
}

.soc-auth .woocommerce-form__input-checkbox {
  width:       14px !important;
  height:      14px !important;
  min-width:   14px !important;
  margin:      0 !important;
  padding:     0 !important;
  flex-shrink: 0;
  accent-color: var(--c-brand);
  cursor:      pointer;
}

.soc-auth .woocommerce-form__label-for-checkbox span {
  font-size:      var(--text-xs) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color:          var(--c-text-light) !important;
  line-height:    1 !important;
  font-weight:    var(--fw-regular) !important;
}

.soc-auth .woocommerce-button.button:hover,
.soc-auth button.button:hover { background: var(--c-brand-dark) !important; }

/* O nonce e o redirect são hidden; sem a CSS nativa do WC (que o tema
   retira) apareciam como retângulos cinzentos dentro do formulário. */
.soc-auth input[type="hidden"] { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   SELOS DE PAGAMENTO — logótipos reais
   Markup: soc_payment_badges_html() (inc/woocommerce.php)
   Usados no rodapé, no carrinho, no checkout e na página de pagamento.

   Aqui e não em cart2.css/footer.css de propósito: o components.css é o único
   que carrega em TODAS as páginas, e os selos aparecem em todas elas.

   Os ficheiros são 78×24 e servem-se a 18px de altura (59×18) — o único
   tamanho que deixa a linha do rodapé caber num portátil de 1024px. A mesma
   altura em todos os ecrãs: num telemóvel de 375px cabem cinco por linha.
   ═══════════════════════════════════════════════════════════ */
.soc-pay-logo {
  display:       block;
  height:        18px;
  width:         auto;
  flex-shrink:   0;
  border-radius: 3px; /* acompanha o canto desenhado dentro do próprio SVG */
}