/* ═══════════════════════════════════════════════════════════
   Product card — one card, every placement
   Rendered by soc_product_card_html() (inc/product-card.php).

   Loaded UNCONDITIONALLY, on purpose. The search panel lives in the
   header, so it opens on pages where woocommerce.css never loads —
   which is why it used to carry an inline <style> block just to look
   right on the homepage. That block goes away with this file.

   Layout, top to bottom:
     media  — image, hover image, badges
     actions — swatches left, wishlist right
     meta    — collection left, price right
     name
     delivery badge
   ═══════════════════════════════════════════════════════════ */

.soc-product-card {
  --card-pad: 12px;

  background:     var(--c-white);
  position:       relative;
  display:        flex;
  flex-direction: column;
  min-width:      0;   /* or a long product name stretches the grid column */
}

/* Everything below the photo is inset; the photo itself is full-bleed. Written
   as "every child except the media" so a block added later is inset too — the
   old card indented each piece by hand and the swatches were left behind. */
.soc-product-card > :not(.soc-product-card__media) {
  padding-left:  var(--card-pad);
  padding-right: var(--card-pad);
}

/* ── media ───────────────────────────────────────────────── */

.soc-product-card__media {
  display:       block;
  position:      relative;
  aspect-ratio:  4 / 5;
  overflow:      hidden;
  border-radius: var(--r);
  background:    var(--c-bg-alt);
}

.soc-product-card__img,
.soc-card-hover-img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.soc-product-card__img { transition: transform var(--t-slow), opacity var(--t-fast); }

.soc-card-hover-img {
  opacity:    0;
  transition: opacity var(--t-fast);
}

/* Hover swap only where there is a pointer. On a phone `:hover` sticks to
   whatever was last tapped, so the second image would stay up after the tap. */
@media (hover: hover) {
  .soc-product-card:hover .soc-product-card__img       { transform: scale(1.03); }
  .soc-product-card:hover .soc-card-hover-img          { opacity: 1; }

  /* Com o rato sobre um swatch, a imagem de hover sai da frente. A
     pré-visualização da cor é escrita na imagem PRINCIPAL, que está por baixo
     desta — sem isto o JavaScript troca o `src` e não se vê nada.

     ⚠️ Aqui e não no woocommerce.css, onde esta regra vivia presa a
     `ul.products li.product`. O cartão aparece em muito mais sítios do que a
     grelha da loja: na pesquisa instantânea é um `<div>`, e o painel abre em
     páginas onde o woocommerce.css nem sequer carrega. A regra que MOSTRA a
     imagem sempre esteve neste ficheiro; ter a que a ESCONDE noutro é que
     criava o defeito.

     ⚠️ Leva `!important`, e não dá para evitar. A regra que MOSTRA a imagem
     existe em dois sítios: aqui (`.soc-product-card:hover`) e no
     woocommerce.css (`.woocommerce ul.products li.product:hover`, cinco classes
     e dois elementos). Esta esconde-a em todos os contextos, portanto tem de
     ganhar às duas — e não há selector razoável que bata a segunda sem repetir
     classes três vezes. Tentei sem, e o resultado foi a pré-visualização deixar
     de funcionar na loja, nos relacionados e na homepage. */
  .soc-product-card.soc-swatch-preview:hover .soc-card-hover-img { opacity: 0 !important; }
}

/* ── actions: swatches left, wishlist right ──────────────── */

.soc-product-card__actions {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--sp-2);
  min-height:      26px;   /* holds the row open when a product has no swatches,
                              so names across a grid row still line up */
  margin:          var(--sp-3) 0 var(--sp-2);
}

.soc-product-card__actions .soc-swatches { margin: 0; }

/* The button used to be pinned over the image; the approved design moves it
   below. Undoing `position:absolute` needs every offset reset with it. */
.soc-product-card__actions .soc-wishlist-btn {
  position:  static;
  top:       auto;
  right:     auto;
  width:     26px;
  height:    26px;
  padding:   0;          /* the browser's default button padding squeezed the icon —
                            to nothing on some iOS Safari versions (iPhone 13, Sep 2026) */
  flex:      0 0 auto;
  margin-left: auto;
}

/* The SVG carries width="16" height="16" as attributes, so it needs overriding
   in CSS — the renderer emits one size for every placement. */
.soc-product-card__actions .soc-wishlist-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── meta: collection left, price right ──────────────────── */

.soc-product-card__meta {
  display:         flex;
  align-items:     start;   /* not center: the price is taller when it carries a <del> */
  justify-content: space-between;
  gap:             var(--sp-3);
  margin-bottom:   2px;
}

/* Deep Teal, nao coral: a cor da marca. O coral ja marca o desconto — dar-lhe
   tambem a coleccao tirava o significado aos dois. */
.soc-product-card__coll {
  font-size:      13.5px;
  font-weight:    var(--fw-bold);
  color:          var(--c-brand);
  line-height:    1.3;
  letter-spacing: 0;
  text-transform: none;
  min-width:      0;
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
}

.soc-product-card__price {
  font-size:   13.5px;
  font-weight: var(--fw-bold);
  color:       var(--c-brand);
  line-height: 1.3;
  text-align:  right;
  flex:        0 0 auto;
  white-space: nowrap;
}

/* soc_card_price_html() emits <ins> then <del>, already in reading order — no
   row-reverse. (WooCommerce's own get_price_html() puts <del> first, which is
   why this used to be reversed.) */
.soc-product-card__price:has(del) {
  display:     flex;
  align-items: baseline;
  gap:         var(--sp-2);
}

.soc-product-card__price ins {
  text-decoration: none;
  font-weight:     var(--fw-bold);
  color:           var(--c-accent);
}

.soc-product-card__price del {
  font-size:       var(--text-xs);
  font-weight:     var(--fw-regular);
  color:           var(--c-text-light);
  text-decoration: line-through;
  opacity:         1;   /* WooCommerce ships opacity .5 on <del> */
}

/* ── name ────────────────────────────────────────────────── */

.soc-product-card__title { margin: 0; }

.soc-product-card__name,
.soc-product-card__title .soc-product-card__name {
  display:        block;
  font-family:    var(--font-main);
  font-size:      12.5px;
  font-weight:    var(--fw-regular);
  color:          var(--c-text-muted);
  line-height:    1.4;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}

.soc-product-card__name:hover { color: var(--c-text); }

/* A product with no collection puts its name on the big line instead. Same
   colour family — the two lines only ever swap size and weight, never meaning. */
.soc-product-card:not(:has(.soc-product-card__coll)) .soc-product-card__name {
  font-size:   13.5px;
  font-weight: var(--fw-medium);
  color:       var(--c-text);
}

/* ── delivery ────────────────────────────────────────────── */

.soc-product-card .soc-delivery-badge {
  margin-top: var(--sp-2);
  font-size:  10.5px;   /* era 9px — pequeno demais para o que promete */

  /* `flex-start` e nao `flex-end`: a Nusa alinhava o icone pelo fundo, o que com
     o texto maior o deixava a cair abaixo da linha. Pelo topo, o icone fica
     colado a primeira linha mesmo quando o prazo quebra para duas. */
  align-items: flex-start;
}

/* O SVG traz width="10" nos atributos, logo o tamanho vem daqui.
   O `margin-top` centra-o opticamente na PRIMEIRA linha: caixa de linha
   10,5 x 1,3 = 13,65px, icone 11px, sobra 2,65px — metade em cima. */
.soc-product-card .soc-delivery-badge svg {
  width:      11px;
  height:     11px;
  margin-top: 1.5px;
  /* Traco mais grosso porque o icone e mais pequeno: a 11px o 1.8 do markup
     comeca a desaparecer. Provado na tira de tamanho real da mockup. */
  stroke-width: 1.9;
}

/* ── responsive ──────────────────────────────────────────── */

@media (max-width: 767px) {
  .soc-product-card__coll,
  .soc-product-card__price { font-size: 12.5px; }
  .soc-product-card__name  { font-size: 11.5px; }
  .soc-product-card:not(:has(.soc-product-card__coll)) .soc-product-card__name { font-size: 12.5px; }
  .soc-product-card__actions { min-height: 22px; margin: var(--sp-2) 0 6px; }
}