/* Product page conversion kit: quantity breaks, stock note, delivery dates, cross-sells, sticky bar. Original code. */

.kit-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.kit-badges span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; }
.kit-stars { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.kit-stars .stars { position: relative; font-size: 16px; letter-spacing: 2px; color: #ddd; }
.kit-stars .stars::before { content: '★★★★★'; position: absolute; inset: 0; width: var(--pct); overflow: hidden; color: #f2a33a; }
stock-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
stock-note::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #4f8a5b; }
stock-note.is-low { color: var(--text); font-weight: 600; }
stock-note.is-low::before { background: #c0612b; }

.vd { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.vd legend { font-weight: 700; margin-bottom: 4px; display: flex; justify-content: space-between; width: 100%; }
.vd-timer { display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff1ec; color: #a1361b; border-radius: 8px; padding: 8px; font-size: 13px; }
.vd-timer b { font-variant-numeric: tabular-nums; font-size: 16px; }
.vd-tier { position: relative; display: block; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color .2s, background .2s; }
.vd-tier input { position: absolute; opacity: 0; }
.vd-tier:has(input:checked) { border-color: var(--text); background: #faf9f6; }
.vd-tier:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.vd-tier.sold-out { opacity: .5; cursor: not-allowed; }
.vd-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 14px; }
.vd-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; }
.vd-tier:has(input:checked) .vd-radio { border-color: var(--text); }
.vd-tier:has(input:checked) .vd-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--text); }
.vd-title { font-weight: 700; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vd-save { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #e3f1e8; color: #1d6b42; }
.vd-sub { font-size: 12px; color: var(--muted); }
.vd-price { text-align: right; }
.vd-price b { display: block; font-size: 17px; }
.vd-price s { font-size: 12px; color: var(--muted); }
.vd-corner { position: absolute; top: -10px; right: 12px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; }
.vd-perk { margin: 0 14px 12px 46px; font-size: 12px; padding: 6px 8px; border-radius: 6px; border: 1px dashed; }
.vd-variants { display: none; padding: 0 14px 14px 46px; gap: 8px; }
.vd-tier:has(input:checked) .vd-variants { display: grid; }
.vd-variant { display: grid; grid-template-columns: 26px 36px 1fr; align-items: center; gap: 8px; font-size: 12px; }
.vd-variant .thumb { width: 36px; height: 36px; border-radius: 6px; }
.vd-variant select { padding: 6px; border: 1px solid var(--border); border-radius: 6px; font: inherit; background: #fff; }

.kit-atc { width: 100%; padding: 15px; font-size: 15px; }
.kit-delivery { display: flex; gap: 10px; align-items: center; background: var(--bg); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.kit-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; font-size: 13px; }
.kit-features div { display: flex; gap: 8px; align-items: center; }
.kit-features span { font-size: 18px; }
.kit-banner { border-radius: 10px; padding: 12px 14px; font-size: 14px; font-weight: 600; text-align: center; background: linear-gradient(90deg, #1f2a44, #2f5d50); color: #fff; }
.kit-cross { border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: grid; gap: 10px; }
.kit-cross h3 { margin: 0; font-size: 14px; }
.kit-cross .item { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.kit-cross .thumb { width: 48px; height: 48px; border-radius: 8px; }
.kit-cross button { border: 1px solid var(--text); background: #fff; border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 12px; }

.kit-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(0,0,0,.08);
  display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 16px; transform: translateY(110%); transition: transform .3s ease; }
.kit-sticky.show { transform: none; }
.kit-sticky .meta { display: flex; gap: 10px; align-items: center; font-size: 14px; min-width: 0; }
.kit-sticky .meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.kit-popup { position: fixed; left: 50%; top: 50%; z-index: 120; translate: -50% -50%; background: var(--surface); border-radius: 16px; padding: 24px; width: min(340px, calc(100% - 32px)); text-align: center; box-shadow: 0 30px 60px rgba(0,0,0,.25); animation: kit-pop .45s cubic-bezier(.3,1.4,.5,1); }
.kit-popup .big { font-size: 40px; }
@keyframes kit-pop { from { transform: scale(.7); opacity: 0; } }

.vd--horizontal .vd-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.vd--horizontal .vd-row { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.vd--horizontal .vd-radio { display: none; }
.vd--horizontal .vd-price { text-align: center; }
.vd--horizontal .vd-perk, .vd--horizontal .vd-variants { margin-left: 14px; padding-left: 14px; }
.vd-tiers { display: grid; gap: 14px; }