/*
 * Kosmetyka — sekcja „Voucher prezentowy” na stronie głównej (template-parts/front/vouchery.php).
 * Ładowany po sections.css; używa zmiennych z main.css (--kos-*).
 */
.sec--vouchery { background: var(--kos-cream); }
.voucher-promo { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 6vw, 80px); align-items: center; }
.voucher-promo__points { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; }
.voucher-promo__points li { position: relative; padding-left: 30px; color: var(--kos-ink-soft); }
.voucher-promo__points li::before { content: ''; position: absolute; left: 0; top: .35em; width: 18px; height: 18px; border-radius: 50%; background: var(--kos-primary-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a5f6f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat; }

.voucher-promo__visual { justify-self: center; width: min(100%, 420px); }
.voucher-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 1.62 / 1; padding: 28px 24px; border-radius: 26px; text-align: center; color: var(--kos-primary-700);
	background: linear-gradient(150deg, #fff 0%, var(--kos-blush) 55%, var(--kos-nude) 100%); box-shadow: 0 26px 50px rgba(47, 37, 35, .14); transform: rotate(-2.5deg); transition: transform .3s ease; }
.voucher-card::before { content: ''; position: absolute; inset: 10px; border: 1.5px dashed rgba(154, 95, 111, .55); border-radius: 18px; pointer-events: none; }
.voucher-card:hover { transform: rotate(0deg) translateY(-4px); }
.voucher-card__gift { color: var(--kos-primary); }
.voucher-card__label { font-family: var(--kos-font-script); font-size: 2rem; line-height: 1; color: var(--kos-ink); }
.voucher-card__amount { font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; }
.voucher-card__brand { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--kos-ink-muted); }

@media (max-width: 820px) {
	.voucher-promo { grid-template-columns: 1fr; }
	.voucher-promo__visual { order: -1; width: min(100%, 320px); }
}
@media (prefers-reduced-motion: reduce) {
	.voucher-card { transition: none; transform: none; }
	.voucher-card:hover { transform: none; }
}