/* IV 2026-10-28: product-page variant switcher (twig block .iv-var in the mod-cache
   product.twig, data from system/library/iv_variants.php). Owner's pick: style C
   (chosen button filled dark, white text; same font and weight in every button), no
   price difference, placed below the price and delivery lines, above the buy
   buttons. Card layout (1300px+): price wrapper order 1, buttons order 2, so the
   block takes order 2 and comes first by source order. Below 1300px (the older
   side-by-side layout), on phones and on price-on-request pages every row is order
   0, so the block keeps order 0 and follows the price group in source. */
.iv-var{display:flex;flex-direction:column;gap:14px;margin:0 0 16px}
@media (min-width:1300px){html:not(.mobile-header-active) .product-info:not(.has-zero-price) .iv-var{order:2}}
.iv-var-name{margin:0 0 8px;font:700 15px/1.25 Ubuntu,"Helvetica Neue",Arial,sans-serif;color:#333}
.iv-var-name span{font-weight:400;color:#555}
.iv-var-opts{display:flex;flex-wrap:wrap;gap:8px}
.iv-var-opt{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:44px;padding:6px 12px;border:1px solid #c9ced4;border-radius:4px;background:#fff;color:#333;font:400 15px/1.2 Ubuntu,"Helvetica Neue",Arial,sans-serif;text-align:center;text-decoration:none;box-sizing:border-box}
a.iv-var-opt:hover,a.iv-var-opt:focus-visible{border-color:#333;color:#333;text-decoration:none}
a.iv-var-opt:focus-visible{outline:2px solid #333;outline-offset:2px}
.iv-var-opt.is-current{border-color:#333;background:#333;color:#fff}
@media (max-width:767px){.iv-var{margin:4px 0 14px}.iv-var-opt{min-height:46px}}
/* IV 2026-10-29 (owner, canvas board PhoneRule): one layout rule on phones. The
   switcher sits in the buy button's column (same width, max 360px, centred) with
   the label centred like the price. Buttons are equal and fill the row; how many per
   row (iv-vcN under 390px, iv-vwN from 390px) and whether labels wrap (iv-vt, iv-vtw)
   come from iv_variants_phone_cols() in system/library/iv_variants.php. */
@media (max-width:767px){
.iv-var{width:100%;max-width:360px;margin-left:auto;margin-right:auto;box-sizing:border-box}
.iv-var-name{text-align:center}
.iv-var-opts{justify-content:center}
.iv-var-opts[class*="iv-vc"] .iv-var-opt{min-width:0;padding:6px;overflow-wrap:break-word}
.iv-vc1 .iv-var-opt{flex:0 0 100%}
.iv-vc2 .iv-var-opt{flex:0 0 calc((100% - 8px) / 2)}
.iv-vc3 .iv-var-opt{flex:0 0 calc((100% - 16px) / 3)}
.iv-vc4 .iv-var-opt{flex:0 0 calc((100% - 24px) / 4)}
.iv-vt .iv-var-opt{min-height:52px}
}
@media (min-width:390px) and (max-width:767px){
.iv-vw1 .iv-var-opt{flex:0 0 100%}
.iv-vw2 .iv-var-opt{flex:0 0 calc((100% - 8px) / 2)}
.iv-vw3 .iv-var-opt{flex:0 0 calc((100% - 16px) / 3)}
.iv-vw4 .iv-var-opt{flex:0 0 calc((100% - 24px) / 4)}
.iv-vt .iv-var-opt{min-height:46px}
.iv-vtw .iv-var-opt{min-height:52px}
}