/** * Variation pill buttons — compact card-style pills that replace the * WooCommerce variation dropdown while leaving the parent layout alone. * All classes are prefixed with tgbt- to avoid theme collisions. */ /* * The real select stays in the DOM for WooCommerce's variation JS; the pills * are the visible control. The wrap is server-rendered, so this stylesheet * (loaded in ) hides the dropdown before the first paint — no flash. * .tgbt-variation-select-hidden is the equivalent class used by the JS * fallback when markup arrives without the server wrap. */ .tgbt-variation-pills-wrap select, .tgbt-variation-select-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .tgbt-variation-pills-wrap { display: block; width: 100%; } .tgbt-variation-pill-group { display: flex !important; flex-wrap: wrap !important; gap: var(--tgbt-pill-gap, 8px) !important; width: 100% !important; margin: 8px 0 14px !important; padding: 0 !important; list-style: none !important; visibility: visible !important; opacity: 1 !important; } /* Let the value cell take the free space so the table doesn't shrink-wrap. */ form.variations_form table.variations td.value { width: 100%; } .tgbt-variation-pill-group .tgbt-variation-pill, button.tgbt-variation-pill { display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; min-width: var(--tgbt-pill-w, 84px) !important; min-height: var(--tgbt-pill-h, 58px) !important; height: auto !important; margin: 0 !important; padding: var(--tgbt-pill-pad, 10px 14px) !important; color: var(--tgbt-c-pill-label, #1F2937) !important; font-family: inherit !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: center !important; text-transform: none !important; background: #FFFFFF !important; background-image: none !important; border: 1.5px solid #D0D5DD !important; border-radius: var(--tgbt-pill-radius, 10px) !important; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important; cursor: pointer !important; visibility: visible !important; opacity: 1 !important; -webkit-appearance: none !important; appearance: none !important; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease; } .tgbt-variation-pill-group .tgbt-variation-pill:hover:not(.is-unavailable):not(.is-active), button.tgbt-variation-pill:hover:not(.is-unavailable):not(.is-active) { background: #F8F9FC !important; border-color: #98A2B3 !important; box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06) !important; } .tgbt-variation-pill-group .tgbt-variation-pill:focus-visible, button.tgbt-variation-pill:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(30, 42, 90, 0.18) !important; } .tgbt-variation-pill-group .tgbt-variation-pill:active:not(.is-unavailable), button.tgbt-variation-pill:active:not(.is-unavailable) { transform: translateY(1px); } .tgbt-variation-pill-group .tgbt-variation-pill.is-active, button.tgbt-variation-pill.is-active { color: var(--tgbt-c-pill-sel-label, #FFFFFF) !important; background: #16213A !important; background-image: none !important; border-color: #16213A !important; box-shadow: 0 6px 14px rgba(22, 33, 58, 0.18) !important; } .tgbt-variation-pill-group .tgbt-variation-pill.is-active .tgbt-variation-pill-price, button.tgbt-variation-pill.is-active .tgbt-variation-pill-price, .tgbt-variation-pill-group .tgbt-variation-pill.is-active .tgbt-variation-pill-price .amount, .tgbt-variation-pill-group .tgbt-variation-pill.is-active .tgbt-variation-pill-price .woocommerce-Price-amount, .tgbt-variation-pill-group .tgbt-variation-pill.is-active .tgbt-variation-pill-price bdi { color: var(--tgbt-c-pill-sel-price, #E6EAF2) !important; } .tgbt-variation-pill-group .tgbt-variation-pill.is-unavailable, button.tgbt-variation-pill.is-unavailable { color: #98A2B3 !important; background: #F4F4F6 !important; border-color: #E4E7EC !important; cursor: not-allowed !important; box-shadow: none !important; opacity: 0.75 !important; } .tgbt-variation-pill-group .tgbt-variation-pill.is-unavailable .tgbt-variation-pill-price, button.tgbt-variation-pill.is-unavailable .tgbt-variation-pill-price { color: #98A2B3 !important; } .tgbt-variation-pill-label { display: block; color: inherit; font-size: var(--tgbt-pill-label-size, 15px) !important; font-weight: 700; letter-spacing: 0.01em; line-height: 1.1; } .tgbt-variation-pill-price { display: block; color: var(--tgbt-c-pill-price, #667085); font-size: var(--tgbt-pill-price-size, 12px) !important; font-weight: 500; line-height: 1.1; } .tgbt-variation-pill-price .amount, .tgbt-variation-pill-price .woocommerce-Price-amount, .tgbt-variation-pill-price bdi { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; } .tgbt-variation-pill-price del { margin-right: 4px; color: inherit; opacity: 0.55; text-decoration: line-through; } .tgbt-variation-pill-price ins { color: inherit; text-decoration: none; } @media (max-width: 480px) { .tgbt-variation-pill-group .tgbt-variation-pill, button.tgbt-variation-pill { min-width: var(--tgbt-pill-w, 72px) !important; min-height: var(--tgbt-pill-h, 52px) !important; padding: var(--tgbt-pill-pad, 8px 12px) !important; } .tgbt-variation-pill-label { font-size: 14px; } .tgbt-variation-pill-price { font-size: 11px; } } /* ------------------------------------------------------------------------ */ /* Theme compatibility. */ /* Keep the pills compact and side-by-side even when a theme forces */ /* variation controls (buttons inside the .value cell) to block/full width. */ /* High-specificity + !important so it beats theme rules; leaves the */ /* optional "pills per row" grid untouched (that sets its own display). */ /* ------------------------------------------------------------------------ */ .tgbt-variation-pills-wrap[data-tgbt-pills] .tgbt-variation-pill-group .tgbt-variation-pill, .tgbt-variation-pills-wrap[data-tgbt-pills] .tgbt-variation-pill-group button.tgbt-variation-pill { flex: 0 0 auto !important; width: auto !important; max-width: none !important; min-width: var(--tgbt-pill-w, 84px) !important; } .tgbt-variation-pills-wrap[data-tgbt-pills] > select, .tgbt-variation-pills-wrap[data-tgbt-pills] .reset_variations { /* keep the hidden native select out of the pill flow */ float: none; }