/* ──────────────────────────────────────────────
   SIA Product Category Card — overrides
   Tiny stylesheet on TOP of the shared PCG stylesheet
   (`sia-product-categories-grid`). Reserved for any rules that need to
   diverge from PCG. Currently: only the flex-row sizing fix below.
   ────────────────────────────────────────────── */

/* Flex sizing fix (v3.16.5).
   When the parent Elementor container is set to "Row - horizontal" flex
   direction, every direct widget child gets `flex: 0 1 auto` by default,
   meaning "size to content". For PCC the visible content chain is all
   percentage-based (.sia-pcc → .sia-pcg__item → .sia-pcg__media → ...
   bg div with width: 100%), so the browser climbs the tree looking for
   a non-percentage width, finds none, computes everything to 0. Card
   collapses to 0 width, visually disappears.

   v3.16.4 attempted `.sia-pcc { min-width: 240px }` to bubble up an
   intrinsic minimum. This fixed the disappearance but caused two new
   problems:
     1. Two cards in a 400px container would each demand 240px → overflow
        beyond the container (480px content into 400px container).
     2. With `flex-wrap: nowrap` (Elementor default), the cards just
        overflow rather than shrink.

   v3.16.5 fix — proper flex behavior on the widget wrapper itself:

     .elementor-widget-sia-product-category-card {
         width: 100%;       // declare intent to fill parent
         min-width: 0;      // allow shrinking below content (`auto`) min
     }

   In ROW mode: each widget wrapper requests 100% of parent, but
   `flex-shrink: 1` (default) makes them shrink evenly to fit. 2 cards
   → each 50%, 3 cards → each 33%, etc. `min-width: 0` is crucial —
   without it, the implicit `min-width: auto` (= min-content size) would
   prevent shrinking.

   In COLUMN mode: `width: 100%` is redundant (Elementor's
   `align-items: stretch` already gives full width), but harmless.

   Net behavior: cards distribute evenly in row, fill width in column,
   never overflow. No more 240px floor — user can put cards in narrow
   columns if desired. */
.elementor-widget-sia-product-category-card {
	width: 100%;
	min-width: 0;
}

/* ──────────────────────────────────────────────
   Highlight pill — optional floating badge above the card's top edge.
   Distinct from the existing `.sia-pcg__pill` (in-overlay name+count
   chip) by using its own `.sia-pcc__*` class hierarchy on the outer
   wrapper. Default styling matches Variable Product Card's pill so a
   site can use both consistently.
   ────────────────────────────────────────────── */

.sia-pcc {
	--sia-pcc-pill-offset: -50%;
}

.sia-pcc.has-highlight-pill {
	position: relative;
	overflow: visible;
}

.sia-pcc__highlight-pill {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, var(--sia-pcc-pill-offset, -50%));
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background: var(--sia-color-primary, #c5ed3b);
	color: #111111;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	border-radius: 999px;
	white-space: nowrap;
	pointer-events: none;
	z-index: 2;
}

.sia-pcc__highlight-pill__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.sia-pcc__highlight-pill__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}