/* =========================================================================
   Product card — the shared product preview
   ========================================================================= */
.woocommerce ul.products li.product,
li.wc-block-product {
  display:flex; min-width:0; width:auto !important; float:none; margin:0 !important; padding:0 !important;
  background:none; border:0; box-shadow:none; text-align:left;
}
.pcard {
  /* width + min-width keep the card inside its cell: as a flex item it would
     otherwise grow to its widest unbreakable content and overflow the column. */
  display:flex; flex-direction:column; width:100%; min-width:0; height:100%;
  padding:0.75rem; gap:0.75rem;
  background:var(--surface); border:1px solid var(--line); border-radius:1.25rem;
  box-shadow:var(--shadow-1);
  transition:box-shadow .28s ease, border-color .2s ease;
}
.pcard:hover { box-shadow:var(--shadow-2); }

.pcard__media {
  position:relative; display:block; aspect-ratio:4/3; padding:0;
  border-radius:0.875rem; background:var(--surface-2);
  overflow:hidden; text-decoration:none;
}
/* The image fills the frame edge to edge. The long selector is needed to beat
   WooCommerce's own `ul.products li.product a img`, which sets a bottom margin
   and leaves the height intrinsic. */
.pcard__media .pcard__img,
.woocommerce ul.products li.product .pcard__media .pcard__img {
  width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0;
  display:block; object-fit:cover; object-position:center; border:0; background:none;
}

.pcard__flag {
  position:absolute; top:0.625rem; left:0.625rem; z-index:2;
  padding:0.3125rem 0.625rem; border-radius:0.375rem;
  background:var(--gold); color:var(--gold-ink);
  font-family:var(--font-label); font-size:0.6875rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; line-height:1;
}
.pcard__flag--sale { background:var(--red); color:#fff; }

.pcard__thumbs {
  display:flex; gap:0.5rem; overflow-x:auto; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none; padding:0.125rem;
}
.pcard__thumbs::-webkit-scrollbar { width:0; height:0; display:none; }
.pcard__thumb {
  flex:0 0 auto; width:3rem; height:3rem; padding:0.1875rem; cursor:pointer;
  background:var(--surface-2); border:1.5px solid transparent; border-radius:0.625rem;
  transition:border-color .18s ease;
}
.pcard__thumb img { width:100%; height:100%; object-fit:contain; display:block; margin:0; }
.pcard__thumb.is-current { border-color:var(--red); }
.pcard__thumb:focus-visible { outline:none; box-shadow:0 0 0 3px var(--focus); }
:root[data-theme="dark"] .pcard__thumb.is-current { border-color:var(--red-on-dark); }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pcard__thumb.is-current { border-color:var(--red-on-dark); }
}

.pcard__body { display:flex; flex-direction:column; flex:1 1 auto; min-width:0; gap:0.375rem; padding:0.25rem 0.5rem 0; }
/* Title and category hold a fixed number of lines, so the price and the
   button sit at the same height in every card whatever the name's length. */
.pcard .pcard__title,
.woocommerce ul.products li.product h3.pcard__title {
  margin:0; padding:0; font-family:var(--font-display); font-weight:700; font-size:1.0625rem;
  line-height:1.3; letter-spacing:-.01em;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2lh;
}
/* The inner link carries its own line-height, which would make the rendered
   lines taller than the 2lh reserved above. */
.pcard__title a { color:var(--ink); text-decoration:none; line-height:inherit; }
.pcard__title a:hover { text-decoration:underline; }

.pcard__cat {
  align-self:flex-start; max-width:100%; text-decoration:none; color:var(--red);
  font-family:var(--font-label); font-size:0.6875rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; line-height:1.4; min-height:1lh;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pcard__cat:hover { text-decoration:underline; }
:root[data-theme="dark"] .pcard__cat { color:var(--red-on-dark); }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pcard__cat { color:var(--red-on-dark); }
}

/* Anchored to the bottom of the body: the price then sits at the same height
   in every card of a row, whether or not the card has a gallery strip. */
.pcard__price {
  margin-top:auto; padding-top:0.375rem;
  font-family:var(--font-display); font-weight:800; font-size:1.375rem; letter-spacing:-.02em;
  line-height:1.1; color:var(--ink); font-variant-numeric:tabular-nums;
}
.pcard__price del { margin-left:0.5rem; font-size:1rem; font-weight:600; color:var(--muted); text-decoration:line-through; }
.pcard__price ins { text-decoration:none; }

/* Pushed down so the buttons line up across a row whatever the card holds. */
.pcard__actions { margin-top:auto; padding-top:0.75rem; }
/* Dark, not red: red is kept for the payment step. The element in the
   selector matches WooCommerce's own `a.button`, which would otherwise win. */
/* The long selector beats WooCommerce's own
   `.woocommerce ul.products li.product .button`, which sets inline-block and
   would keep the flex layout from applying. */
.pcard__actions a.button,
.pcard__actions button.button,
.pcard__actions .wp-element-button,
.woocommerce ul.products li.product .pcard__actions a.button,
.woocommerce ul.products li.product .pcard__actions button.button {
  display:flex; align-items:center; justify-content:space-between; gap:0.75rem; width:100%; margin:0;
  padding:0.875rem 1rem; border:0; border-radius:0.875rem;
  background:var(--ink); color:var(--surface);
  font-family:var(--font-display); font-weight:600; font-size:0.9375rem; line-height:1;
  text-decoration:none; cursor:pointer;
  transition:background .2s ease, opacity .2s ease;
}
.pcard__cart-icon { width:1.125rem; height:1.125rem; flex-shrink:0; }
.pcard__cart-icon--full { display:none; }
.pcard__actions .button.is-added .pcard__cart-icon--empty { display:none; }
.pcard__actions .button.is-added .pcard__cart-icon--full { display:block; }

.pcard__actions a.button:hover,
.pcard__actions button.button:hover,
.pcard__actions .wp-element-button:hover,
.woocommerce ul.products li.product .pcard__actions a.button:hover,
.woocommerce ul.products li.product .pcard__actions button.button:hover {
  background:var(--red); color:#fff; opacity:1; transform:none; box-shadow:none;
}
:root[data-theme="dark"] .pcard__actions a.button:hover,
:root[data-theme="dark"] .pcard__actions button.button:hover { background:var(--red-on-dark); }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pcard__actions a.button:hover,
  :root:not([data-theme="light"]) .pcard__actions button.button:hover { background:var(--red-on-dark); }
}
.pcard__actions .button.loading { opacity:.6; pointer-events:none; }

/* The confirmation goes inside the button; WooCommerce's own "view cart"
   link below it is redundant once the label says so. */
.pcard__actions .added_to_cart { display:none !important; }