/*
 * HolySmartphone — the product card (buildless, hand-written).
 *
 * One card everywhere a product is listed: the homepage product rows
 * (template-parts/sections/product-grid.php), "Alternatieven" on the product
 * page (inc/pdp.php), the shop archive (inc/archive.php) and [hs_producten].
 * Markup: hs_product_card() in inc/sections.php. Moved out of sections.css on
 * 22-10-2026 so the archive gets the card without the whole section library.
 *
 * Redesign 20-10-2026: an upright card. The photo stands in front of a mint
 * halo (a nod to the "holy" in the name and the cloud in the logo), the brand
 * small over the model name, the colours in stock, then the "v.a." price with a
 * small "Bekijk" bottom right. The whole card is the link; "Bekijk" only says
 * so. Flat at rest (a hairline edge), lifted on hover, the halo widening behind
 * the device.
 */
.hs-home-pcard { display: flex; flex-direction: column; overflow: hidden; background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--r-xl); text-decoration: none; color: inherit; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.hs-home-pcard:hover { transform: translateY(-3px); border-color: var(--hs-teal-200); box-shadow: 0 2px 4px rgba(16, 42, 46, .05), 0 14px 28px rgba(16, 42, 46, .1); }
.hs-home-pcard:focus-visible { outline: 3px solid var(--hs-teal-800); outline-offset: 3px; }
/* The photo stage: the device in front of a mint halo (a nod to the "holy" in
 * the name and the cloud in the logo), with a shadow that follows its outline.
 *
 * 22-10-2026: the halo used to show *through* the device, because the photo was
 * blended with mix-blend-mode: multiply to hide white photo backgrounds. Now the
 * theme cuts a white background away once per photo (hs_cut_white_background()
 * in inc/sections.php), so every card photo is a cut-out: drawn normally, opaque
 * over the halo, and a drop shadow can trace the device instead of a white
 * rectangle. That also holds for a white-background photo a colleague uploads
 * later. Only when the cut fails (.is-cutout absent) does the card fall back to
 * multiply, with no shadow. */
.hs-home-pcard__media { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; height: 184px; padding: var(--sp-6) var(--sp-4) var(--sp-3); }
.hs-home-pcard__media::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 56%; width: min(150px, 78%); aspect-ratio: 1; border-radius: 50%; background: var(--hs-mint); transform: translate(-50%, -50%); transition: transform var(--dur-slow) var(--ease-out), background var(--dur-base) var(--ease-standard); }
.hs-home-pcard:hover .hs-home-pcard__media::before { transform: translate(-50%, -50%) scale(1.12); background: var(--hs-teal-100); }
.hs-home-pcard__media img { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform var(--dur-slow) var(--ease-out); }
/* A cut-out is drawn normally, so the halo stays behind the device instead of
 * showing through it. No shadow (removed again 22-10-2026, the client's call). */
.hs-home-pcard__media.is-cutout img { mix-blend-mode: normal; }
.hs-home-pcard:hover .hs-home-pcard__media img { transform: translateY(-3px); }
/* Neutral --badge-sale: the type badge is what people scan for. */
.hs-home-pcard__off { position: absolute; top: var(--sp-2); right: var(--sp-2); padding: 2px var(--sp-2); border-radius: var(--r-pill); background: var(--badge-sale); font-size: var(--fs-12); font-weight: var(--fw-black); color: var(--badge-fg); }
.hs-home-pcard__badges { position: absolute; top: var(--sp-2); left: var(--sp-2); display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.hs-home-pcard__badges .hs-badge { padding: 2px var(--sp-2); border-radius: var(--r-pill); font-size: var(--fs-12); line-height: var(--lh-copy); }
.hs-home-pcard__body { display: flex; flex: 1; flex-direction: column; gap: var(--sp-3); min-width: 0; padding: var(--sp-1) var(--sp-3) var(--sp-3); }
.hs-home-pcard__title { display: flex; flex-direction: column; gap: 2px; }
/* The colours in stock (hs_product_card_colors()): 14px dots under the name,
 * a faint edge so white and silver still read on the white card. */
.hs-home-pcard__colors { display: flex; align-items: center; gap: 6px; min-height: 14px; }
.hs-home-pcard__dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px rgba(16, 42, 46, .18); }
.hs-home-pcard__dots-more { font-size: var(--fs-12); line-height: 1; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.hs-home-pcard__brand { font-size: var(--fs-14); font-weight: var(--fw-regular); line-height: 1.25; color: var(--fg-2); }
.hs-home-pcard__model { font-family: var(--font-display); font-size: var(--fs-16); font-weight: var(--fw-bold); line-height: 1.25; color: var(--fg-1); text-wrap: balance; transition: color var(--dur-base) var(--ease-standard); }
.hs-home-pcard:hover .hs-home-pcard__model { color: var(--accent-text); }
.hs-home-pcard__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-2); margin-top: auto; }
/* Price larger and heavier (22-10-2026): Poppins 20 bold, the strongest line on
 * the card after the photo. */
.hs-home-pcard__price { display: flex; flex-direction: column; min-width: 0; font-family: var(--font-display); font-size: var(--fs-20); font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: -0.01em; color: var(--hs-teal-800); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs-home-pcard__price .woocommerce-Price-amount { font-weight: inherit; }
.hs-home-pcard__from { font-size: var(--fs-12); font-weight: var(--fw-regular); line-height: 1.3; color: var(--fg-2); }
.hs-home-pcard__price del { color: var(--fg-3); font-size: var(--fs-12); font-weight: var(--fw-regular); }
.hs-home-pcard__price ins { text-decoration: none; }
.hs-home-pcard__cta { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; margin-left: auto; padding: 9px 10px 9px 14px; border-radius: var(--r-lg); background: var(--hs-teal-800); color: var(--fg-on-brand); font-size: var(--fs-14); font-weight: var(--fw-bold); line-height: 1; transition: background var(--dur-base) var(--ease-standard); }
.hs-home-pcard__cta .hs-icon { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-out); }
.hs-home-pcard:hover .hs-home-pcard__cta { background: var(--hs-teal-900); }
.hs-home-pcard:hover .hs-home-pcard__cta .hs-icon { transform: translateX(2px); }

/* Phone: two cards side by side, so each is ~165px wide. */
@media (max-width: 640px) {
	.hs-home-pcard__media { height: 160px; padding: var(--sp-6) var(--sp-3) var(--sp-2); }
	.hs-home-pcard__brand { font-size: var(--fs-12); }
	.hs-home-pcard__model { font-size: var(--fs-15); }
	.hs-home-pcard__price { font-size: var(--fs-18); }
	/* A long price and the pill do not fit side by side in ~165px: let the pill drop under it. */
	.hs-home-pcard__foot { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
	.hs-home-pcard, .hs-home-pcard__media img, .hs-home-pcard__media::before, .hs-home-pcard__cta .hs-icon { transition: none; }
	.hs-home-pcard:hover, .hs-home-pcard:hover .hs-home-pcard__media img, .hs-home-pcard:hover .hs-home-pcard__cta .hs-icon { transform: none; }
	.hs-home-pcard:hover .hs-home-pcard__media::before { transform: translate(-50%, -50%); }
}