/* One shared scale: 10 CSS pixels per centimetre at the widest viewport. */
.deck-size-picker { --size-unit: 10px; margin-top: 1.75rem; }
.deck-size-options { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.deck-size-options legend { margin-bottom: 16px; color: #f0e9df; font-size: .8rem; letter-spacing: .09em; }
.deck-size-option { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 12px 2px 14px; border: 1px solid transparent; border-radius: 14px; cursor: pointer; transition: background-color 220ms, border-color 220ms; }
.deck-size-option input { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; }
.deck-size-option:has(input:focus-visible) { outline: 2px solid #e5c597; outline-offset: 4px; }
.deck-size-option.is-selected { background: rgba(210, 174, 121, .07); border-color: rgba(210, 174, 121, .38); }
.deck-size-art { display: flex; align-items: flex-end; justify-content: center; height: calc(var(--size-unit) * 12 + 9px); width: 100%; margin-bottom: 17px; }
.deck-size-silhouette { position: relative; display: grid; place-items: center; color: #d6ba8e; border: 1px solid #80654d; border-radius: 5px; background: radial-gradient(ellipse at 50% 30%, #382b45, #17101e 80%); box-shadow: 0 5px 14px #0005; transition: transform 220ms ease-out, border-color 220ms, box-shadow 220ms; }
.deck-size-silhouette::before { content: ''; position: absolute; inset: 5px; border: 1px solid #a9895b80; border-radius: 2px; }
.deck-size-silhouette::after { content: ''; position: absolute; width: 42%; height: 39%; border: 1px solid #a9895b70; border-radius: 50%; }
.deck-size-silhouette > span { font-size: 1.6rem; }
.deck-size-essencia { width: calc(var(--size-unit) * 6); height: calc(var(--size-unit) * 9); }
.deck-size-encanto { width: calc(var(--size-unit) * 6.67); height: calc(var(--size-unit) * 10); }
.deck-size-reliquia { width: calc(var(--size-unit) * 7); height: calc(var(--size-unit) * 12); background: radial-gradient(ellipse at 50% 20%, #493547, #211421 85%); }
.deck-size-collector .deck-size-silhouette::before { border-style: double; border-width: 3px; }
.deck-size-option.is-selected .deck-size-silhouette { transform: translateY(-6px); border-color: #e5c597; box-shadow: 0 9px 20px #0006, 0 0 18px #b5874220; }
@media (hover: hover) { .deck-size-option:hover .deck-size-silhouette { transform: translateY(-6px); } }
.deck-size-label { display: grid; gap: 4px; text-align: center; width: 100%; }
.deck-size-label strong { color: #f0e9df; font-family: var(--si-display, Georgia, serif); font-size: 1.12rem; font-weight: 500; }
.deck-size-label > span { color: #c7bbc9; font-size: .72rem; line-height: 1.5; }
.deck-size-measure { white-space: nowrap; }
.product-preview-banner { display: grid; gap: 4px; margin-bottom: 24px; padding: 16px 20px; border: 1px solid var(--si-roxo); border-radius: 12px; font-size: .85rem; }
.deck-size-benefit { margin-top: 16px; min-height: 65px; }
.deck-size-benefit p { color: #d8c7b3; margin: 0; font-size: .88rem; line-height: 1.6; min-height: 2.8em; }
.deck-size-collector-note { display: block; color: #e5c597; font-size: .7rem; letter-spacing: .05em; }
.deck-size-collector-note[hidden] { display: none; }
.deck-size-picker .product-price { margin: 0 0 18px; }
.deck-size-quality { color: #c7bbc9; font-size: .76rem; line-height: 1.6; margin: 12px 0 0; text-align: center; }
.deck-size-single { display: grid; gap: 5px; color: #f0e9df; }
.deck-size-single > span, .deck-size-single small { color: #c7bbc9; font-size: .85rem; }
.deck-size-fallback { display: grid; gap: 8px; margin-top: 12px; }
.deck-size-fallback a { font-size: .85rem; color: #e5c597; }
.cart-edition-specs, .checkout-edition-specs { display: block; margin-top: 5px; font-size: .85rem; }
@media (max-width: 420px) { .deck-size-picker { --size-unit: 9px; } .deck-size-options { gap: 3px; } .deck-size-label strong { font-size: 1rem; } .deck-size-label > span { font-size: .72rem; } .deck-size-category, .deck-size-measure { display: block; } .deck-size-separator { display: none; } }
@media (prefers-reduced-motion: reduce) { .deck-size-option, .deck-size-silhouette { transition: none; } }