/*
|--------------------------------------------------------------------------
| Atomic: Product Card
|--------------------------------------------------------------------------
|
| Scaffolding: assets/css/template-parts/includes/product-card.css
| Note: the component is primarily styled via Tailwind utility classes in the markup.
| Convention: avoid hardcoded colors; use semantic tokens (e.g. border-grey-2, bg-white).
*/

/* ── Logo images ── */
.product-card__logo-img {
	display: block;
	width: auto;
	object-fit: contain;
}

.product-card__logo-frame {
	min-height: 48px;
}

.product-card__logo-list {
	min-height: 34px;
}

.product-card__logo-list-item {
	min-height: 34px;
}

.product-card__logo-img--main {
	height: 48px;
	max-width: 144px;
}

.product-card__logo-img--list {
	height: 34px;
	max-width: 120px;
}

.product-card__logo-img--inline {
	height: 32px;
	max-width: 100%;
}

/* ── Hero variant (Product Card placed inside block-hero) ──
   Figma spec (Hero / Type=Product card):
   - Mobile / Tablet: main logo 40x122
   - Desktop (≥1280): main logo 48x146
*/
.product-card--hero .product-card__logo-frame {
	min-height: 40px;
}

.product-card--hero .product-card__logo-img--main {
	height: 40px;
	max-width: 122px;
}

@media (min-width: 1280px) {
	.product-card--hero .product-card__logo-frame {
		min-height: 48px;
	}

	.product-card--hero .product-card__logo-img--main {
		height: 48px;
		max-width: 146px;
	}
}

/* ── Gradient / Grey border – INSIDE the card ──
   Both borders are rendered entirely within the card's box so they never
   add pixels to its dimensions. The card size stays fixed regardless of
   whether a badge border is active, which prevents carousel/grid overflow.

   • Grey   → inset box-shadow (no pseudo-element needed).
   • Gradient → ::before with background-image + CSS mask-composite to
     carve a 2 px gradient frame that sits inside the card edge. */

.product-card--grey-border {
	box-shadow: inset 0 0 0 2px var(--color-grey-3, #BFBFBF);
}

.product-card--gradient-border {
	position: relative;
}

.product-card--gradient-border::before {
	content: '';
	position: absolute;
	inset: 0;
	padding: 2px;
	background: var(--background-image-tinexta-horizontal);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask-composite: exclude;
	pointer-events: none;
	z-index: 1;
}

/* ── Tooltip z-index elevation ──
   When a tooltip inside a card is hovered / focused the whole card must
   sit above sibling cards so the tooltip bubble is never hidden behind
   an adjacent card (e.g. promo layout, grid).  :has() lifts the card
   only while the tooltip is active. */
.product-card:has(.group\/tooltip:hover),
.product-card:has(.group\/tooltip:focus-within) {
	position: relative;
	z-index: 50;
}

/* ── Variant select ── */
.product-card__variant-field {
	transition: outline-color 0.2s ease, box-shadow 0.2s ease;
}

.product-card__variant-field:focus-visible,
.product-card__variant-field:focus-within {
	outline-color: var(--color-grey-4, #666666);
	box-shadow: 0 0 0 1px var(--color-grey-4, #666666);
}

.product-card__variant-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.product-card__variant-option-label {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.product-card__variant-options {
	scrollbar-width: none;
}

.product-card__variant-options::-webkit-scrollbar {
	display: none;
}

.product-card__variant-select {
	display: none;
}

/* Stato errore: la select acquisisce il bordo "danger" e sotto compare
 * il messaggio. Lo stato e' attivato dal JS sul click di un commercial
 * button senza URL (variante attiva priva di link). */
.product-card__variant.is-error .product-card__variant-field,
.product-card__variant.is-error .product-card__variant-field:focus-visible,
.product-card__variant.is-error .product-card__variant-field:focus-within {
	outline-color: var(--color-danger, #ec0045);
	box-shadow: 0 0 0 1px var(--color-danger, #ec0045);
}

.product-card__commercial-button--no-url {
	cursor: pointer;
}

/* ── Price ── */
.price-component .price-discount {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	padding: 0 5px;
	background-color: var(--color-danger);
	color: var(--color-white);
	clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}

.price-component .price-discount__text {
	text-align: center;
	white-space: nowrap;
}