/* Purchase components inherit the active template's typography, surfaces and state colors. */
.shopVersionHeader { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.65rem; margin-bottom:.75rem; }
.shopVersionTitle { margin:0; font:inherit; font-size:.95rem; font-weight:700; color:var(--content-primary,var(--bs-body-color)); }
.shopVersionPeriod { max-width:100%; }
.shopVersionPeriod .form-select { width:auto; max-width:100%; margin:0; font-size:.8rem; }
.shopVersionChoices { display:grid; gap:.6rem; margin-bottom:1.5rem; }
.shopVersionChoice { display:flex; align-items:center; gap:.8rem; width:100%; min-width:0; padding:.9rem 1rem; border:1px solid var(--border-default,var(--bs-border-color)); border-radius:var(--radius-sm,var(--bs-border-radius)); background:var(--surface-card,var(--bs-body-bg)); color:var(--content-primary,var(--bs-body-color)); font:inherit; text-align:left; cursor:pointer; transition:border-color 140ms ease,background-color 140ms ease; }
.shopVersionChoice:hover { border-color:var(--border-interactive,var(--bs-primary)); background:var(--surface-subtle,var(--bs-tertiary-bg)); }
.shopVersionChoice[aria-checked="true"] { border-color:var(--interactive-primary,var(--bs-primary)); background:var(--interactive-selected-surface,var(--bs-primary-bg-subtle)); box-shadow:inset 0 0 0 1px var(--interactive-primary,var(--bs-primary)); }
.shopVersionChoice:focus-visible { outline:3px solid var(--focus-ring-color,var(--bs-primary)); outline-offset:3px; }
.shopVersionChoice:disabled { cursor:default; }
.shopVersionChoice[hidden] { display:none; }
.shopVersionIndicator { flex:0 0 1.05rem; width:1.05rem; height:1.05rem; border:1px solid var(--border-strong,var(--bs-secondary-color)); border-radius:50%; display:grid; place-items:center; }
.shopVersionChoice[aria-checked="true"] .shopVersionIndicator { border-color:var(--interactive-primary,var(--bs-primary)); }
.shopVersionChoice[aria-checked="true"] .shopVersionIndicator::after { content:""; width:.55rem; height:.55rem; border-radius:50%; background:var(--interactive-primary,var(--bs-primary)); }
.shopVersionImage { flex:0 0 2.5rem; width:2.5rem; height:2.5rem; object-fit:contain; border-radius:.3rem; }
.shopVersionCopy { flex:1 1 auto; min-width:0; }
.shopVersionName { display:block; font-size:.9rem; font-weight:650; line-height:1.45; overflow-wrap:anywhere; }
.shopVersionStock { display:block; margin-top:.2rem; font-size:.75rem; color:var(--state-danger-text,var(--bs-danger)); }
/* Numeric emphasis distinguishes the comparison amount from the amount actually paid. */
.shopPriceOffer { display:block; color:var(--content-primary,var(--bs-body-color)); font-weight:400; }
.shopPriceMain { display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem; line-height:1.15; }
.shopPriceAmount { font-size:2.25rem; font-weight:750; letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.shopPriceCurrency { font-size:.7em; letter-spacing:0; margin-right:.06em; }
.shopPriceUnit { font-size:1rem; font-weight:500; color:var(--content-secondary,var(--bs-secondary-color)); }
.shopPriceDetails { display:block; margin-top:.45rem; font-size:.8rem; line-height:1.65; color:var(--content-muted,var(--bs-secondary-color)); }
.shopPriceAnnual { font-weight:650; color:var(--content-secondary,var(--bs-secondary-color)); }
.shopPriceTerm { display:inline; }
.shopPriceAnnual + .shopPriceTerm::before { content:" · "; }
.shopPricePayment { display:block; }
.shopPriceOfferCompact { flex:0 0 auto; text-align:right; }
.shopPriceOfferCompact .shopPriceMain { justify-content:flex-end; gap:.15rem; }
.shopPriceOfferCompact .shopPriceAmount { font-size:1.1rem; font-weight:700; letter-spacing:-.025em; }
.shopPriceOfferCompact .shopPriceUnit { font-size:.75rem; }
.shopPriceOfferCompact .shopPriceDetails { margin-top:.2rem; font-size:.75rem; line-height:1.4; }
.shopSelectedPrice { margin:1.25rem 0; }
.shopPurchaseActions { display:flex; align-items:end; gap:.75rem; }
.shopPurchaseActions .shopPurchaseQuantity { flex:0 0 5.5rem; }
.shopPurchaseActions .shopPurchaseSubmit { flex:1 1 auto; min-height:2.75rem; }
@media (max-width:575px) {
    .shopVersionChoice { padding:.8rem; gap:.65rem; }
    .shopVersionName { font-size:.85rem; }
    .shopVersionImage { flex-basis:2rem; width:2rem; height:2rem; }
    .shopPriceOfferCompact .shopPriceAmount { font-size:1rem; }
}
@media (prefers-reduced-motion:reduce) { .shopVersionChoice { transition:none; } }