/**
 * Product loop card — styles WooCommerce's standard loop output (produced by the
 * required hooks in woocommerce/content-product.php) into the design's .pcard.
 * Material tints echo the mockup's "shelf" look; the real product photo replaces
 * the mockup SVG.
 */

li.pcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  list-style: none; text-align: left;
  transition: border-color .15s, box-shadow .2s, transform .2s;
  --panel: #eef5f4; --prod: #f7faf9; --prod-d: #dde7e5;
}
li.pcard:hover { border-color: #c7d3d1; box-shadow: var(--shadow-card); transform: translateY(-3px); }
li.pcard.m-bagasa { --panel: #f1f2e9; }
li.pcard.m-kraft { --panel: #f4ece0; }
li.pcard.m-white { --panel: #eef5f4; }
li.pcard.m-lid { --panel: #eef2f3; }

/* Link wraps thumbnail + title + price; the add-to-cart button is a sibling. */
li.pcard > .woocommerce-loop-product__link {
  display: flex; flex-direction: column; flex: 1 1 auto; color: inherit; text-decoration: none;
}
li.pcard > .woocommerce-loop-product__link:hover { text-decoration: none; }

/* Thumbnail on the soft material panel. */
li.pcard .woocommerce-loop-product__link img,
li.pcard img.attachment-woocommerce_thumbnail {
  width: 100%; max-height: 230px; aspect-ratio: 4/3; object-fit: contain;
  padding: 0; margin: 0; display: block;
}

/* Title. */
li.pcard .woocommerce-loop-product__title {
  font-size: 14.5px; font-weight: 650; line-height: 1.35; color: var(--ink);
  padding: 12px 16px 0; margin: 0; min-height: 39px;
}

/* Volume/pieces spec under the title (design addition), set as a teal chip: it
   explains the "od … € / ks" figure below it and was too easy to miss as muted
   body text. Teal rather than the eco green, which the card already spends on
   the sale flash and .pbadge. width:fit-content because the card link is a flex
   column, so the chip would otherwise stretch the full card width. */
li.pcard .pmeta {
  display: inline-block; width: fit-content; margin: 8px 16px 0; padding: 3px 10px;
  background: var(--teal-50); color: var(--teal);
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; border-radius: var(--radius-pill);
}
li.pcard:hover .woocommerce-loop-product__title { color: var(--teal); }

/* Rating. */
li.pcard .star-rating { margin: 8px 16px 0; font-size: 13px; }

/* Price — the design's .price row: only the number and € are the big teal
   figure, while "od" and the unit stay small and muted. ametica-rbp nests its
   " s DPH" label inside .amount, so .amount is flattened with display:contents
   to make every label a flex item; order then puts " s DPH" after "/ ks" to
   reach the design's "od 0,210 € / ks · s DPH".
   margin-top:auto pins the row just above the button, so cards with a short
   title leave their slack under the spec line instead of above the button. */
li.pcard .price {
  display: flex; align-items: baseline; flex-wrap: wrap;
  margin-top: auto; padding: 10px 16px 0;
  font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: normal;
}
li.pcard .price .amount { display: contents; }
/* Descendant + *-of-type, not child + *-child: on a discounted product these
   spans sit one level deeper, inside base/price.css's .pprice-stack, and the
   <del> in front of them would break :first-child. */
li.pcard .price .tax_label:first-of-type { margin-right: 6px; }
li.pcard .price .ametica-rbp-price-amount,
li.pcard .price .ametica-rbp-currency-symbol {
  font-size: 19px; font-weight: 800; color: var(--teal); letter-spacing: -.01em;
}
li.pcard .price .ametica-rbp-currency-symbol { margin-left: .22em; }
li.pcard .price .tax_label:last-of-type { order: 1; margin-left: 6px; }
/* !important is needed only here: ametica-rbp-public.css pins the tax label to
   14px !important, which breaks the design's 12px unit line. */
li.pcard .price .ametica-rbp-tax-label { order: 2; margin-left: .3em; font-size: inherit !important; }
li.pcard .price .ametica-rbp-tax-label::before { content: "·"; }
/* Sale — base/price.css lays the wrapper out; the rules undoing the big teal
   figure have to be repeated here, at the card's own specificity. The generic
   ones lose to the .amount / .ametica-rbp-* rules above (same or higher weight,
   and this file loads later), which would leave the old price rendered as a
   second full-size figure — and display:contents would even lift its parts out
   of the strike-through. */
li.pcard .price del { font-size: 13px; }
li.pcard .price del .amount { display: inline; }
li.pcard .price del .ametica-rbp-price-amount,
li.pcard .price del .ametica-rbp-currency-symbol {
  font-size: inherit; font-weight: 400; color: inherit; letter-spacing: normal;
}
li.pcard .price ins { text-decoration: none; }

@media (max-width: 520px) {
  li.pcard .price { font-size: 10px; }
  li.pcard .price .ametica-rbp-price-amount,
  li.pcard .price .ametica-rbp-currency-symbol { font-size: 15.5px; }
  li.pcard .price del { font-size: 11px; }
}

/* Add to cart button (kept as WC's AJAX button). */
li.pcard .button,
li.pcard .added_to_cart {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 12px 16px 16px; border: 1.5px solid var(--line); border-radius: 9px;
  background: var(--bg); color: var(--teal); font-family: inherit; font-size: 13.5px; font-weight: 700;
  padding: 11px 14px; cursor: pointer; transition: .13s; text-decoration: none; text-align: center;
}
li.pcard .button svg { width: 17px; height: 17px; flex: none; }
/* Green, not teal: every step of the add-to-cart path (this button, the
   quickview's "Do košíka", the product page's .btn-cart) is painted in --green
   so the buy action reads as one colour across the site. Teal stays with the
   content chrome around it. */
li.pcard:hover .button, li.pcard .button:hover,
li.pcard:hover .added_to_cart, li.pcard .added_to_cart:hover {
  background: var(--green); color: #fff; border-color: var(--green);
}
li.pcard .added_to_cart { margin-top: 0; }

/* Badge stack over the thumbnail — the design's .pbadge. A product can be out
   of stock *and* discounted, so the badges stack instead of overlapping in the
   one top-left corner. */
li.pcard .pbadges {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
li.pcard .pbadge,
li.pcard .onsale {
  margin: 0; min-height: 0;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--teal); border-radius: var(--radius-pill); padding: 5px 11px;
}
li.pcard .pbadge.sale,
li.pcard .onsale { background: var(--accent); }
/* Safety net for a core/plugin sale flash rendered outside the stack. */
li.pcard > .onsale,
li.pcard .woocommerce-loop-product__link > .onsale { position: absolute; top: 12px; left: 12px; z-index: 2; }
li.pcard .pbadge.soon { background: var(--muted); }

@media (max-width: 520px) {
  li.pcard .pbadge { font-size: 9.5px; padding: 4px 8px; }
}