/**
 * Pill-style price blocks (shop loop, PDP, carousels).
 *
 * Previously printed inline via pe_pill_prices_print_css_once() in
 * inc/ivc-shop-loop.php — moved to a real enqueued file 2026-05-11 so
 * version bumps (PE_THEME_VERSION) actually cache-bust the CSS. The
 * inline approach was riding on the cached HTML and stale styles kept
 * showing up after deploys when WP Rocket wasn't purged.
 *
 * Scoped under .pe-pill-prices so the legacy .loop-variation-item /
 * .variation-price-item rules in main.css / single-product.css / the
 * <style id="ivc-css"> footer block stay authoritative for any
 * non-pill context.
 */

/* Container: flex row, gap 8px, no bg. */
.pe-pill-prices{display:flex;gap:8px;width:100%;margin:0 0 12px;align-items:stretch;flex-wrap:nowrap;background:transparent}

/* Each option: white bg, radius 8px, padding 12px 14px, border 1.5px.
   align-items:stretch + text-align:left override the legacy
   .loop-variation-item rule (align-items:center, text-align:center)
   from the same file's <style id="ivc-css"> block. !important on the
   conflicting properties defends against legacy rules with identical
   specificity (2 classes) that paint the selected pill blue / center
   content / force min-height. */
.pe-pill-prices .pe-pill-card{flex:1 1 0;min-width:0;min-height:0!important;height:auto!important;display:flex;flex-direction:column;align-items:stretch!important;justify-content:flex-start!important;gap:4px;padding:12px 14px;border:2px solid #e5e7eb;border-radius:8px;background:#fff!important;cursor:pointer;text-align:left!important;box-sizing:border-box;position:relative;overflow:visible;color:#0f172a;box-shadow:none!important}
.pe-pill-prices .pe-pill-card:hover{border-color:#cbd5e1;background:#fff!important}

/* Selected: navy border, label text navy. Matches all class aliases used by
   the loop (.ivc-active) and PDP (.active / .is-selected) JS handlers.
   aria-checked is intentionally NOT in this selector — it's mirrored from
   the class via a MutationObserver and that's async, so leaving it in
   caused a transient "both pills selected" flash when switching variations.
   aria-checked stays on the element for screen readers; visual state is
   class-driven. */
.pe-pill-prices .pe-pill-card.ivc-active,
.pe-pill-prices .pe-pill-card.active,
.pe-pill-prices .pe-pill-card.is-selected{border-color:#1e3a8a;background:#f8faff!important;box-shadow:none!important}
.pe-pill-prices .pe-pill-card.ivc-active .pe-pill-name,
.pe-pill-prices .pe-pill-card.active .pe-pill-name,
.pe-pill-prices .pe-pill-card.is-selected .pe-pill-name{color:#1e3a8a}

/* Focus ring: 2px navy, offset 2px. */
.pe-pill-prices .pe-pill-card:focus{outline:none}
.pe-pill-prices .pe-pill-card:focus-visible{outline:2px solid #1e3a8a;outline-offset:2px}

/* Wipe legacy pseudo-element pills inherited from old woodmart CSS. */
.pe-pill-prices .pe-pill-card::before,
.pe-pill-prices .pe-pill-card::after{content:none!important;display:none!important}

/* Label row: 13px bold label + 11px slate-500 sub inline. */
.pe-pill-prices .pe-pill-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:6px;row-gap:2px;line-height:1.15}
.pe-pill-prices .pe-pill-name{font:700 13px/1.15 var(--pe-font,inherit);color:inherit;letter-spacing:0}
.pe-pill-prices .pe-pill-comp{font:400 11px/1.15 var(--pe-font,inherit);color:#64748b;white-space:nowrap}

/* Discount pill: green bg, white, 10px bold, 2px 6px, 999px. Lives in the
   price row so it reads as "1,09€ / Τεμ.  −3%" — margin-left:auto pushes
   it to the right edge of the pill. align-self:center so it doesn't sit on
   the baseline of the surrounding price text (which would drop it). */
.pe-pill-prices .pe-pill-discount{display:inline-flex;align-items:center;align-self:center;padding:2px 6px;background:#16a34a;color:#fff;border-radius:999px;font:700 10px/1.2 var(--pe-font,inherit);letter-spacing:0;margin-left:auto}

/* Price row: 20px slate-900 + 11px slate-500. Weight is the heaviest available
   (Roboto Bold = 700; fonts.css only loads 400/500/700, so any value >700
   silently falls back). Visual heft comes from size + tight tracking +
   tabular-nums for consistent digit width. To go heavier still, add a
   Roboto-Black @font-face declaration in assets/css/fonts.css. */
.pe-pill-prices .pe-pill-price-row{display:flex;align-items:baseline;justify-content:flex-start;gap:4px;flex-wrap:nowrap;white-space:nowrap}
.pe-pill-prices .pe-pill-amount,
.pe-pill-prices .pe-pill-amount .woocommerce-Price-amount{font:700 20px/1.1 var(--pe-font,inherit)!important;color:#0f172a!important;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pe-pill-prices .pe-pill-suffix{font:400 11px/1.15 var(--pe-font,inherit);color:#64748b}

/* Secondary "variation total" line ("9,48€ / Κιβώτιο" or "X€ / Παλέτα").
   Below the per-piece headline so customers see both: per-piece for
   comparison, total for "what will I be charged". Only rendered for
   variations with a per-piece price (Κιβώτιο / Παλέτα / 6-pack) — simple
   Τεμάχιο variations would duplicate the headline. */
.pe-pill-prices .pe-pill-total{font:600 12px/1.2 var(--pe-font,inherit);color:#0f172a;margin-top:3px;font-variant-numeric:tabular-nums}
.pe-pill-prices .pe-pill-total .woocommerce-Price-amount{font-weight:600;color:#0f172a}
.pe-pill-prices .pe-pill-total-unit{font-weight:400;color:#64748b}

/* ΦΠΑ footer — shown on PDP and on shop loop / carousel. */
.pe-pill-vat-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-2px 0 12px;padding:8px 2px 0;border-top:1px solid #e5e7eb;font:400 12px/1.2 var(--pe-font,inherit);color:#64748b}
.pe-pill-vat-footer .pe-pill-vat-right{font-weight:700;color:#0f172a}
.pe-pill-vat-footer--loop{margin:-4px 0 16px;padding:5px 0 0;font-size:10px}
.pe-pill-vat-footer--loop .pe-pill-vat-right{font-size:10px}

/* Compact pills inside shop-loop cards + carousels — narrower cells so the
   default 12px/14px padding wastes vertical space. Spec proportions kept,
   sizes scaled down + price weight bumped to 800 so the per-piece figure
   reads first. PDP keeps the full spec (no .pe-product-card ancestor).
   !important on padding + min-height defends against the inline legacy
   .loop-variation-item rule (padding:8px 10px, min-height:95px) printed
   later in <style id="ivc-css">. */
/* align-items:flex-start + align-self:flex-start: the container .pe-product-info
   is a flex column with .pe-pill-prices as a child. The default stretch on
   .pe-pill-prices was inheriting a tall allocation from the parent flex and
   the cards' default `align-items: stretch` was filling that tall slot —
   resulting in lots of empty space inside the pill below the price text.
   Forcing flex-start at both levels makes the cards hug their content
   height. Two-pill side-by-side cards can land at slightly different heights
   if content differs, but for Κιβώτιο/Παλέτα the content is structurally
   identical so they line up. */
.pe-product-card .pe-pill-prices,
.pe-carousel-track .pe-pill-prices{gap:6px;margin-bottom:6px;align-items:flex-start!important}
/* min-height matches the 3-line variant (Κιβώτιο with composition + per-piece +
   total) so single-line Τεμάχιο cards in adjacent products line up at the same
   height. Each product card is its own flex container so CSS align-items can't
   equalise heights across cards — an explicit floor is the only way. */
.pe-product-card .pe-pill-prices .pe-pill-card,
.pe-carousel-track .pe-pill-prices .pe-pill-card{padding:7px 10px!important;border-radius:7px;gap:0;min-height:62px!important;height:auto!important;align-self:flex-start!important}
/* Carousel cards are narrower than shop-loop cards, so a tiny bit more
   vertical padding balances the visual weight without making the block
   feel oversized. Slightly taller min-height too — the price text is the
   same size, so adding 4-5px keeps proportional padding inside the pill. */
.pe-carousel-track .pe-pill-prices .pe-pill-card{padding:9px 11px!important;min-height:66px!important}
.pe-product-card .pe-pill-prices .pe-pill-head,
.pe-carousel-track .pe-pill-prices .pe-pill-head{line-height:1.1}
.pe-product-card .pe-pill-prices .pe-pill-price-row,
.pe-carousel-track .pe-pill-prices .pe-pill-price-row{line-height:1.1;margin-top:3px}
.pe-carousel-track .pe-pill-prices .pe-pill-price-row{margin-top:4px}
.pe-product-card .pe-pill-prices .pe-pill-name,
.pe-carousel-track .pe-pill-prices .pe-pill-name{font-size:11px}
.pe-product-card .pe-pill-prices .pe-pill-comp,
.pe-carousel-track .pe-pill-prices .pe-pill-comp{font-size:10px}
.pe-product-card .pe-pill-prices .pe-pill-amount,
.pe-product-card .pe-pill-prices .pe-pill-amount .woocommerce-Price-amount,
.pe-carousel-track .pe-pill-prices .pe-pill-amount,
.pe-carousel-track .pe-pill-prices .pe-pill-amount .woocommerce-Price-amount{font-size:15px!important;font-weight:700!important;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.pe-product-card .pe-pill-prices .pe-pill-suffix,
.pe-carousel-track .pe-pill-prices .pe-pill-suffix{font-size:10px}
.pe-product-card .pe-pill-prices .pe-pill-discount,
.pe-carousel-track .pe-pill-prices .pe-pill-discount{font-size:9px;padding:1px 5px}
.pe-product-card .pe-pill-prices .pe-pill-total,
.pe-carousel-track .pe-pill-prices .pe-pill-total{font-size:10px;margin-top:2px}