/* assets/css/woocommerce.css
   Overrides on native WooCommerce classes.
   Rule: never rewrite HTML from scratch — style only. */

/* ── Estimated delivery badge ── */
/* A definicao de .soc-delivery-badge vive so no components.css. Existia aqui uma
   segunda copia, com `--c-text-xlight` (2,37:1) em vez de `--c-text-light`, e
   como o woocommerce.css carrega depois era esta que ganhava — nas paginas de
   loja, carrinho e checkout, ou seja, exactamente onde a entrega interessa. */

/* Product loop — align badge and swatches with the title text (which has padding-left: 12px) */
/* B3d: o recuo de 12px alinhava estes dois com o titulo do card antigo, que tinha
   `padding: 12px` proprio. O card novo (product-card.css) nao tem recuo interno
   nenhum — mantendo isto, so a entrega e as swatches ficavam desalinhadas. */
.woocommerce ul.products li.product .soc-delivery-badge { margin-bottom: 4px; }

/* Complete the look — icon at top when text wraps (already covered by global align-items: flex-start) */
.soc-complete__info .soc-delivery-badge { margin-top: 3px; margin-bottom: 4px; }

/* Mini cart — reduce spacing */
.soc-mini-cart__item-info .soc-delivery-badge { margin-top: 2px; }

/* ── CHECKBOXES — square corners, theme colour ── */
.woocommerce input[type="checkbox"],
.woocommerce-page input[type="checkbox"] {
  -webkit-appearance: none;
  appearance:         none;
  width:              13px;
  height:             13px;
  min-width:          13px;
  border:             0.5px solid var(--c-border) !important;
  border-radius:      4px !important;
  background:         var(--c-white) !important;
  box-shadow:         none !important;
  outline:            none !important;
  cursor:             pointer;
  vertical-align:     middle;
  transition:         background var(--t-fast), border-color var(--t-fast);
}
.woocommerce input[type="checkbox"]:checked,
.woocommerce-page input[type="checkbox"]:checked {
  background:          var(--c-brand) !important;
  border-color:        var(--c-brand) !important;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat !important;
  background-position: center !important;
  background-size:     10px 8px !important;
}

/* ── FORM FIELDS ── */
.woocommerce-page .input-text,
.woocommerce-page select,
.woocommerce-page textarea,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce select,
.woocommerce textarea,
.woocommerce-cart .input-text,
.woocommerce-checkout .input-text,
#coupon_code {
  background:         var(--c-white) !important;
  background-color:   var(--c-white) !important;
  color:              var(--c-text) !important;
  border:             0.5px solid var(--c-border) !important;
  border-radius:      var(--r-pill) !important;
  box-shadow:         none !important;
  -webkit-box-shadow: none !important;
  outline:            none !important;
  padding:            11px 13px !important;
  font-family:        var(--font-main) !important;
  font-size:          13px !important;
  transition:         border-color 0.15s ease;
  -webkit-appearance: none;
  appearance:         none;
  width:              100%;
}

.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
  border-color: var(--c-brand) !important;
  outline:      none !important;
  box-shadow:   none !important;
}

/* Textarea não fica pastilha — a pastilha (var(--r-pill)) curva os cantos e corta
   o texto. Usa o raio médio, como o componente .soc-textarea. (reviews, notas de encomenda) */
.woocommerce textarea,
.woocommerce-page textarea {
  border-radius: var(--r) !important;
}

/* Search panel — exempt from WC input/focus styles
   Specificity (0,3,0) beats .woocommerce input[type="text"] which is (0,2,1) */
.woocommerce .soc-search-panel .soc-search-panel__input,
.woocommerce-page .soc-search-panel .soc-search-panel__input {
  background:  transparent !important;
  background-color: transparent !important;
  border:      none !important;
  box-shadow:  none !important;
  outline:     none !important;
  padding:     0 !important;
  width:       auto !important;
  font-size:   inherit !important;
  transition:  none !important;
  color:       var(--c-text) !important;
}
.woocommerce .soc-search-panel .soc-search-panel__input:focus,
.woocommerce-page .soc-search-panel .soc-search-panel__input:focus {
  background:       transparent !important;
  background-color: transparent !important;
  border:           none !important;
  outline:          none !important;
  box-shadow:       none !important;
}

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

/* ── BUTTONS ── */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order {
  background-color: var(--c-brand) !important;
  color:            var(--c-white) !important;
  border-radius:    var(--r-pill) !important;
  border:           none !important;
  padding:          13px 28px !important;
  font-family:      var(--font-main) !important;
  font-size:        12px !important;
  font-weight:      500 !important;
  letter-spacing:   0.07em !important;
  text-transform:   none !important;
  transition:       background-color 0.15s ease !important;
  box-shadow:       none !important;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover {
  background-color: var(--c-brand-dark) !important;
  color:            var(--c-white) !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: var(--c-text) !important;
}

/* ── NOTICES ── */

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  position:       relative !important;
  border-radius:  var(--r) !important;
  border:         none !important;
  outline:        none !important;
  box-shadow:     none !important;
  border-left:    3px solid var(--c-brand) !important;
  background:     var(--c-brand-light) !important;
  color:          var(--c-text) !important;
  padding:        13px 40px 13px 18px !important;
  margin-bottom:  10px !important;
  font-family:    var(--font-main) !important;
  font-size:      13px !important;
  line-height:    1.5 !important;
  list-style:     none !important;
}

/* Variants — fundos tingidos para serem visíveis sobre fundo branco */
.woocommerce-message,
.woocommerce .woocommerce-message {
  border-left-color: var(--c-success) !important;
  background:        var(--c-success-bg) !important;
}
.woocommerce-info,
.woocommerce .woocommerce-info  {
  border-left-color: var(--c-brand) !important;
  background:        var(--c-brand-light) !important;
}
.woocommerce-error,
.woocommerce .woocommerce-error {
  border-left-color: var(--c-error) !important;
  background:        var(--c-error-bg) !important;
  color:             var(--c-text) !important;
}

/* Animação de entrada — igual ao componente .soc-notice (soc-noticein em components.css) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error { animation: soc-noticein .2s ease; }

/* Error list items */
.woocommerce-error li {
  display:    block !important;
  list-style: none !important;
  margin:     0 !important;
  padding:    2px 0 !important;
  font-size:  12px !important;
}

/* Action button inside notices (e.g. "Restore item") */
.woocommerce-message .button,
.woocommerce-info .button {
  background:      none !important;
  border:          none !important;
  padding:         0 !important;
  font-size:       12px !important;
  font-weight:     var(--fw-medium) !important;
  color:           var(--c-brand) !important;
  text-decoration: underline !important;
  cursor:          pointer !important;
  flex-shrink:     0 !important;
  box-shadow:      none !important;
  letter-spacing:  0 !important;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover { color: var(--c-brand-dark) !important; background: none !important; }

/* ── PRODUCTS LOOP ── */
.woocommerce ul.products {
  display:               grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap:                   10px !important;
  padding:               0 !important;
  margin:                0 !important;
  list-style:            none !important;
}

@media (min-width: 640px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
}

@media (min-width: 1024px) {
  .woocommerce ul.products {
    gap: 20px !important;
  }
}

.woocommerce ul.products li.product {
  margin:   0 !important;
  padding:  0 !important;
  float:    none !important;
  clear:    none !important;
  width:    100% !important;
  background: var(--c-white);
  position: relative;
}


/* B3d: o botao de wishlist saiu de cima da foto para a fila de accoes por baixo
   dela. Este bloco pregava-o ao canto da imagem com `!important` e ganhava ao
   product-card.css, que carrega antes deste ficheiro. */

/* Non-product elements outside the grid */
.woocommerce ul.products > :not(li.product) {
  display: none !important;
}


/* B3e — as regras do card do loop sairam daqui. Alvos que o renderer ja nao
   emite: `.woocommerce-loop-product__link`, `.woocommerce-loop-product__title`,
   `.soc-product-sub` e `.price` (o card usa `.soc-product-card__price`).
   A regra da imagem tambem saiu: `height: auto !important` e `aspect-ratio`
   sobre `li.product img` batiam contra as imagens absolutas do card novo.
   A grelha `ul.products` fica — e dela que vem o layout de 2/3/4 colunas. */

.woocommerce ul.products li.product .button { display: none !important; }

/* ── HOVER IMAGE — switches to 1st gallery photo on hover ── */
.soc-card-hover-img {
  position:   absolute !important;
  top:        0 !important;
  left:       0 !important;
  z-index:    1 !important;
  opacity:    0;
  transition: opacity 0.4s ease;
  pointer-events: none !important;
}

/* Só onde há rato a sério.
   No telemóvel o :hover fica em quem estiver debaixo do dedo, e durante o scroll
   é a página que desliza por baixo de um dedo quase parado — o :hover salta de
   card em card e a segunda foto acende e apaga em cada uma. Era isto que fazia
   as filas piscar ao rolar com o dedo pousado.
   O toque não perde nada: no telemóvel quem mostra a segunda foto é o bloco de
   hover por toque em utils2.js, que escreve a opacidade directamente no elemento
   e nunca dependeu desta regra. */
@media (hover: hover) {
  .woocommerce ul.products li.product:hover .soc-card-hover-img {
    opacity: 1;
  }

  /* A regra que esconde a imagem de hover sobre um swatch mudou-se para o
     assets/css/product-card.css: aqui só valia para `ul.products li.product` e
     só em páginas WooCommerce, e o cartão aparece em muito mais sítios. */
}

/* ── PRODUCT PAGE ── */
.woocommerce div.product div.images img {
  aspect-ratio:  4 / 5 !important;
  object-fit:    cover !important;
  border-radius: var(--r-lg) !important;
}

/* The scroll container carries the rounding on mobile; product2.css squares off
   the top corners so the gallery meets the header cleanly.
   The FlexSlider thumbnail strip that used to be styled here no longer exists. */
.woocommerce div.product div.images .soc-gallery-viewport { border-radius: var(--r-lg) !important; }

.woocommerce div.product .product_title {
  font-size:   28px !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
  color:       var(--c-text) !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size:   28px !important;
  font-weight: 400 !important;
  color:       var(--c-brand) !important;
}

.woocommerce .star-rating span::before,
.woocommerce .star-rating::before { color: var(--c-accent) !important; }

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
  padding:     8px 0 !important;
  font-size:   12px !important;
  font-weight: 500 !important;
}

.woocommerce div.product form.cart table.variations { border: none !important; }

/* Info de entrega */
.soc-delivery-info {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  padding:     14px 16px;
  background:  var(--c-bg);
  margin:      16px 0;
  font-size:   12px;
  color:       var(--c-text-muted);
}

.soc-delivery-info { align-items: center; }
.soc-delivery-info div    { display: flex; flex-flow: row wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; }
.soc-delivery-info strong { display: inline; color: var(--c-text); font-weight: 500; white-space: nowrap; }
.soc-delivery-info span   { font-size: 12px; color: var(--c-text-light); }
.soc-delivery-info span::before { content: "·"; margin-right: 10px; color: var(--c-text-ghost); }
.soc-delivery-info svg    { flex-shrink: 0; color: var(--c-brand); }

/* ── CART ── */
.woocommerce-cart table.cart img {
  aspect-ratio:  4 / 5 !important;
  object-fit:    cover !important;
  border-radius: var(--r-sm) !important;
  width:         80px !important;
  height:        auto !important;
}

.woocommerce-cart .cart_totals {
  background:    #fff !important;   /* branco + contorno — ver cart2.css */
  border:        1px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  padding:       28px !important;
}

.woocommerce-cart .cart_totals h2 {
  font-family:    var(--font-display) !important;
  font-size:      21px !important;
  font-weight:    var(--fw-bold) !important;
  letter-spacing: var(--tracking-display) !important;
}

/* ── CHECKOUT ── */
.woocommerce-checkout #order_review {
  background:    var(--c-bg) !important;
  border-radius: var(--r-lg) !important;
  padding:       28px 0 !important;
}

.woocommerce-checkout #order_review .shop_table img {
  aspect-ratio:  4 / 5 !important;
  object-fit:    cover !important;
  border-radius: var(--r-sm) !important;
  width:         60px !important;
}

.woocommerce-checkout .woocommerce-checkout-payment {
  background:    var(--c-bg) !important;
  border-radius: var(--r-lg) !important;
}

/* ── CONTA ── */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         13px 0;
  font-size:       13px;
  color:           var(--c-text-muted);
  border-bottom:   0.5px solid var(--c-border-xlight);
  text-decoration: none;
  transition:      color 0.15s;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a::after { content: '›'; color: var(--c-text-ghost); }

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  color:       var(--c-brand);
  font-weight: 500;
}




/* ── REVIEW FORM — STAR RATING ── */
/* Hide native WC select and p.stars (replaced by JS) */
.comment-form-rating select,
.comment-form-rating p.stars { display: none !important; }

/* Custom star picker (generated via configurator.js) */
.soc-star-picker {
  display: inline-flex;
  gap:     4px;
  margin:  4px 0 14px;
  cursor:  pointer;
}

.soc-star {
  font-size:  24px;
  line-height: 1;
  color:      var(--c-border);
  transition: color var(--t-fast);
  user-select: none;
}

.soc-star.is-active,
.soc-star.is-hover { color: var(--c-accent); }

/* Rating display in reviews */
.woocommerce .star-rating { color: var(--c-accent); }

/* ── REVIEW LIST ── */

/* Hide avatar and WPML flags (any img inside review) */
.woocommerce .comment_container > img.avatar,
.woocommerce-review__photo,
.woocommerce .comment-text img,
.woocommerce ol.commentlist [class*="icl"],
.woocommerce ol.commentlist [class*="wpml"] { display: none !important; }

.wpml-reviews-filter,
#wpml_reviews_filter { display: none !important; }

/* List reset */
#reviews ol.commentlist { list-style: none !important; padding: 0 !important; margin: 0 !important; }
#reviews ol.commentlist li { padding: 0 !important; margin: 0 !important; background: none !important; border: none !important; }

.woocommerce .comment_container {
  padding:       24px 0;
  border-bottom: 0.5px solid var(--c-border);
  display:       block;
}
#reviews ol.commentlist li:last-child .comment_container { border-bottom: none; }

/* comment-text: block, stars float right */
.woocommerce .comment-text { display: block; }

/* WC .star-rating hidden — replaced by .soc-review-stars via PHP */
.woocommerce .comment-text .star-rating { display: none !important; }

/* Stars float right (comes before meta in DOM — floats above it) */
.soc-review-stars { float: right; font-size: 13px; line-height: 1.6; }
.soc-stars-filled { color: var(--c-accent); letter-spacing: 1px; }
.soc-stars-empty  { color: var(--c-border); letter-spacing: 1px; }

/* Meta: author + date, left side */
.woocommerce .comment-text .meta { display: block; padding: 0 !important; margin: 0 !important; }

/* Description: clear float, below header row */
.woocommerce .comment-text .description { clear: both; margin-top: 8px; }
.woocommerce .comment-text .description p { font-size: 13px; color: var(--c-text); line-height: 1.6; margin: 0 !important; }

/* Author name */
.woocommerce-review__author { font-size: 13px !important; font-weight: 500 !important; color: var(--c-text) !important; }

/* Dash and date */
.woocommerce-review__dash,
.woocommerce-review__published-date { font-size: 12px !important; color: var(--c-text-muted) !important; font-weight: 400 !important; }

/* Hide "verified owner" label */
.woocommerce-review__verified { display: none !important; }

/* "Only logged in customers..." notice — muted, small */
.woocommerce-verification-required {
  font-size:  12px !important;
  color:      var(--c-text-muted) !important;
  background: none !important;
  border:     none !important;
  padding:    0 !important;
  margin-top: 16px !important;
}

/* ── REVIEW FORM — hide unnecessary text ── */
.woocommerce-noreviews { display: none !important; }
#review_form .comment-reply-title,
#review_form_wrapper .comment-reply-title { display: none !important; }
.comment-form-rating > label { display: none !important; }

.soc-accordion__content #reviews > h2:first-child { display: none !important; }

.woocommerce-Reviews-title { display: none !important; }

/* Split shipment notice — thank you page modifier */
.soc-split-notice--thankyou { margin-bottom: 24px; }

.woocommerce-product-details__short-description h2,
.soc-accordion__content h2.woocommerce-product-details__short-description,
#tab-description h2:first-child { display: none !important; }

/* Ref inside the WC Blocks cart link */
.wc-block-components-product-name .soc-product-ref {
  margin-bottom:  0;
  margin-top:     3px;
  pointer-events: none;
}

/* ── RADIO — shipping methods (cart + checkout) ── */
#shipping_method input[type="radio"] {
  -webkit-appearance: none;
  appearance:         none;
  width:              13px;
  height:             13px;
  min-width:          13px;
  border:             0.5px solid var(--c-border) !important;
  border-radius:      50% !important;
  background:         var(--c-white) !important;
  box-shadow:         none !important;
  outline:            none !important;
  cursor:             pointer;
  vertical-align:     middle;
  flex-shrink:        0;
  transition:         background var(--t-fast), border-color var(--t-fast);
}
#shipping_method input[type="radio"]:checked {
  background:          var(--c-brand) !important;
  border-color:        var(--c-brand) !important;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat !important;
  background-position: center !important;
  background-size:     10px 8px !important;
}
#shipping_method li {
  display:         flex !important;
  align-items:     center !important;
  justify-content: flex-end !important;
  gap:             8px !important;
  padding:         3px 0 !important;
  list-style:      none !important;
  margin:          0 !important;
}
#shipping_method li label {
  font-size:   13px !important;
  color:       var(--c-text) !important;
  cursor:      pointer;
  margin:      0 !important;
  font-weight: 400 !important;
}

/* ── FOOTER — neutralizar overrides WC em páginas WC ────────────────
   Especificidade (0,2,1)+(0,3,1) supera as regras WC acima (0,2,1).
   Append no fim do ficheiro garante vitória por source order. */

/* Newsletter email input */
.woocommerce input.soc-footer__nl-input,
.woocommerce-page input.soc-footer__nl-input {
  background:         transparent !important;
  background-color:   transparent !important;
  border:             none !important;
  box-shadow:         none !important;
  -webkit-box-shadow: none !important;
  outline:            none !important;
  padding:            8px 0 !important;
  color:              var(--c-white) !important;
  font-size:          11px !important;
  width:              auto !important;
  height:             auto !important;
  border-radius:      var(--r-pill) !important;
}

/* Geo selects no footer */
.woocommerce select.soc-footer__geo-select,
.woocommerce-page select.soc-footer__geo-select {
  background-color:    transparent !important;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,.5)' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat !important;
  background-position: right 8px center !important;
  border:              0.5px solid rgba(255,255,255,.25) !important;
  padding:             5px 28px 5px 10px !important;
  color:               rgba(255,255,255,.8) !important;
  box-shadow:          none !important;
  -webkit-box-shadow:  none !important;
  font-size:           11px !important;
  border-radius:       var(--r-pill) !important;
}

/* Newsletter GDPR checkbox */
.woocommerce .soc-footer__nl-gdpr input[type="checkbox"],
.woocommerce-page .soc-footer__nl-gdpr input[type="checkbox"] {
  width:              14px !important;
  height:             14px !important;
  min-width:          14px !important;
  border:             1.5px solid rgba(255,255,255,.3) !important;
  background:         transparent !important;
  background-color:   transparent !important;
  border-radius:      4px !important;
  box-shadow:         none !important;
  background-image:   none !important;
}
.woocommerce .soc-footer__nl-gdpr input[type="checkbox"]:checked,
.woocommerce-page .soc-footer__nl-gdpr input[type="checkbox"]:checked {
  background:          var(--c-white) !important;
  background-color:    var(--c-white) !important;
  border-color:        var(--c-white) !important;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%2304434e' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat !important;
  background-position: center !important;
  background-size:     10px 8px !important;
}

/* Newsletter opt-in checkbox — texto exatamente igual à checkbox de Termos & Condições */
.soc-nl-optin{margin:10px 0 4px!important}
.soc-nl-optin__label{display:flex!important;align-items:flex-start;gap:9px;cursor:pointer;line-height:1.6}
.soc-nl-optin__label input{flex:none;margin:1px 0 0!important}
.soc-nl-optin__label span{flex:1}
.woocommerce .soc-nl-optin label.soc-nl-optin__label,
.woocommerce .soc-nl-optin label.soc-nl-optin__label span,
.woocommerce-checkout .soc-nl-optin label.soc-nl-optin__label,
.woocommerce-checkout .soc-nl-optin label.soc-nl-optin__label span,
.woocommerce-account .soc-nl-optin label.soc-nl-optin__label,
.woocommerce-account .soc-nl-optin label.soc-nl-optin__label span{
  text-transform:none!important;font-size:12px!important;color:var(--c-text-muted)!important;letter-spacing:0!important;font-weight:400!important
}