/* ============================================================ SIQ SUBSCRIPTION STYLES — optimized & token-consistent SECTIONS: 0. Font + design tokens 1. Age/quantity selector rows 2. Quantity buttons (segmented) + MOBILE gap 3. Kids+Teens group box + hint 4. Family tier boxes + wrap + line 5. Native wcsatt overrides 6. Plan cards — shared 7. Plan cards — dynamic content 8. Plan cards — breakdown table 9. Plan cards — collapsed row 10. One-time purchase line 11. Selectors big white container 12. Static content (timeline + carousels) 13. Add-to-cart button 14. Simple-qty (Adult) — verify before delete ============================================================ */ /* Font: self-hosted by THIS plugin (assets/fonts/), not Elementor and not a Google Fonts @import. Earlier this relied on Elementor's own copy of the same font to avoid duplicate loading, but that made us dependent on an auto-generated, hashed filename we don't control and that can change whenever Elementor's font optimization regenerates it — plus every request still had to round-trip through Elementor's own loading path. Owning the file ourselves removes that dependency entirely, and it's also preloaded at the top of (see siq-subscription-engine.php) so the browser starts fetching it immediately instead of discovering it late — the two changes together are what actually fix the visible font swap and the intermittent mobile failures, not just avoiding a duplicate load. This is a single variable-font file covering weights 400–800. */ @font-face{ font-family:'Baloo Paaji 2'; font-style:normal; font-weight:400 800; font-display:swap; src:url('../fonts/baloo-paaji-2-latin.woff2') format('woff2'); } /* ===== 0. DESIGN TOKENS ===== */ :root{ --siq-font:'Baloo Paaji 2', sans-serif; /* BRAND */ --siq-navy:#1C3057; /* primary navy */ --siq-navy-dark:#0d2240; /* pressed/hover navy */ --siq-orange:#FF7D2C; /* brand orange */ --siq-green:#5CA92E; /* brand green */ /* BLUE (cards / breakdown) */ --siq-blue-bg:#E3F8FD; --siq-blue-bd:#C4F1FF; /* NEUTRALS */ --siq-text:#333333; --siq-grey:#6b7280; --siq-mute:#9aa2af; --siq-line:#eef2f7; --siq-card-bg:#ffffff; /* SHAPE / SHADOW */ --siq-radius:12px; --siq-radius-lg:16px; --siq-radius-pill:999px; --siq-shadow:0 4px 16px rgba(28,48,87,.08); --siq-shadow-lg:0 6px 20px rgba(28,48,87,.08); } .wcsatt-options-product-wrapper, .wcsatt-options-product, .siq-tiers-wrap, .siq-tier, .siq-tier-line, .pd-breakdown, .siq-qty-seg, .siq-onetime-below{ font-family:var(--siq-font); color:var(--siq-text); } /* ===== 1. AGE / QUANTITY SELECTOR ROWS ===== */ .bundled_product .bundled_product_title{ font-size:16px; font-weight:700; color:var(--siq-navy); margin:0; } .bundled_product_title_link{ display:none; } form.cart .bundle_button .quantity{ display:none !important; } /* Each child's own native quantity box (Kids/Teens/Adult inside a bundle) — hidden unconditionally here so it never depends on quantity-selector-buttons.js having already run. Previously this was JS-only (inline style), so on any device/moment where that script was even slightly delayed, the native box stayed visible and reserved its own space until the script caught up — invisible-looking empty space that wouldn't reproduce on a fast connection or in desktop testing. */ .bundled_product .quantity{ display:none !important; } /* Per-child price note (e.g. "£33.00 — available on subscription") — we show our own pricing instead */ .bundled_product .price{ display:none !important; } /* ===== 2. QUANTITY BUTTONS (segmented) ===== */ .siq-qty-seg{ display:flex; gap:10px; width:100%; margin-top:10px; } .siq-qty-btn{ flex:1 1 0; min-width:0; padding:6px 0 !important; border:1px solid #cfe0f2 !important; border-radius:var(--siq-radius) !important; background:#fff !important; color:var(--siq-navy) !important; font-weight:700 !important; font-size:16px !important; line-height:1.3 !important; cursor:pointer; transition:.15s; } .siq-qty-btn:hover{ background:var(--siq-navy) !important; border-color:var(--siq-navy) !important; color:#fff !important; } .siq-qty-btn.active{ background:var(--siq-navy) !important; border-color:var(--siq-navy) !important; color:#fff !important; } /* MOBILE: tighten pill gap */ @media (max-width:480px){ .siq-qty-seg{ gap:0px; } .siq-simple-qty .siq-qty-row{ gap:0px !important; } /* Carousels (Physical/Personalised/Parent support): show 3 tiles fully + ~10% of the 4th as a "more to scroll" hint */ .siq-tile{ flex:0 0 calc((100% - 36px) / 3.1) !important; } } /* ===== 3. KIDS+TEENS GROUP BOX + HINT ===== */ .siq-kt-group{ background:transparent !important; border:1px solid #d9e4f0 !important; border-radius:14px !important; box-shadow:none !important; padding:12px 15px 12px !important; margin:0 0 6px !important; } .siq-kt-group .bundled_product{ border:0 !important; border-bottom:0px solid var(--siq-line) !important; padding:6px 0 10px !important; margin:0 0 10px !important; } .siq-kt-group .bundled_product:last-child{ border-bottom:0 !important; margin-bottom:0 !important; padding-bottom:4px !important; padding-top:0 !important; /* Teens: sits right under Kids, no extra top gap */ } /* Adults (Family page): sits right after the Kids+Teens group, no extra top gap */ .siq-kt-group + .bundled_product{ padding-top:0 !important; } .siq-kt-hint{ color:var(--siq-green) !important; font-weight:700 !important; font-size:15px !important; margin:0 0 10px !important; } .siq-kt-group.siq-kt-ok .siq-kt-hint{ display:none !important; } /* ===== 4. FAMILY TIER BOXES ===== */ .siq-tiers-wrap{ background:var(--siq-card-bg); border:1px solid var(--siq-line); border-radius:var(--siq-radius-lg); box-shadow:var(--siq-shadow); padding:16px; margin:14px 0 18px; } .siq-tiers{ display:flex; gap:10px; margin:0; } .siq-tier{ flex:1; text-align:center; padding:12px 6px; border-radius:10px; background:#f3f4f6; color:var(--siq-grey); border:2px solid transparent; } .siq-tier-n{ font-size:1.2em; font-weight:700; line-height:1.3 !important; } .siq-tier-t{ font-size:.8em; line-height:1.3 !important; } .siq-tier-p{ font-weight:700; font-size:.9em; color:var(--siq-green); line-height:1.3 !important; } /* ACTIVE = navy */ .siq-tier-active{ background:var(--siq-navy); color:#fff; border-color:var(--siq-navy); } .siq-tier-active .siq-tier-p{ color:#fff; } /* PASSED = light green bg + green border */ .siq-tier-passed{ background:#eef7e8; border-color:var(--siq-green); color:var(--siq-green); } .siq-tier-passed .siq-tier-p{ color:var(--siq-green); } /* unlock line */ .siq-tier-line{ margin:12px 0 0 !important; font-size:14px; color:#33475b; font-weight:600; text-align:center; } .siq-tier-note{ margin:4px 0 0 !important; font-size:14px; color:#33475b; font-weight:600; text-align:center; } /* ===== 5. NATIVE WCSATT OVERRIDES ===== */ .wcsatt-options-prompt-fieldset, ul.wcsatt-options-prompt-radios{ display:none !important; } .wcsatt-options-product-wrapper{ display:block !important; } .wcsatt-options-wrapper{ height:auto !important; overflow:visible !important; } .wcsatt-options-wrapper.closed{ height:auto !important; } .wcsatt-options-product-wrapper select{ display:none; } .bundle_wrap .bundle_price{ display:none !important; } ul.wcsatt-options-product li.subscription-option .subscription-details{ display:none !important; } /* ===== TEMPORARY: 90-day plan hidden for a client conversion test ===== Nothing in pricing/config touched — existing 90-day subscribers are completely unaffected, this only hides the option for NEW selections. The .siq-temp-hidden class is added in default-plan-cards.js, which identifies the 90-day card by its months value (not a hardcoded scheme ID — that ID differs per site). To revert: delete this rule AND the matching block in default-plan-cards.js. Added 2026-08-23. */ ul.wcsatt-options-product li.subscription-option.siq-temp-hidden{ display:none !important; } /* ===== 6. PLAN CARDS — SHARED ===== */ ul.wcsatt-options-product{ list-style:none; margin:12px 0 0; padding:0; display:flex !important; flex-direction:column; gap:12px; } ul.wcsatt-options-product li{ margin:0; } ul.wcsatt-options-product li.subscription-option, ul.wcsatt-options-product li.one-time-option{ display:list-item !important; } ul.wcsatt-options-product li.subscription-option{ background:var(--siq-card-bg) !important; border-radius:var(--siq-radius-lg); box-shadow:var(--siq-shadow); } ul.wcsatt-options-product li label{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--siq-card-bg); border:1px solid var(--siq-line); border-radius:var(--siq-radius-lg); padding:16px 18px; cursor:pointer; font-weight:600; color:var(--siq-navy); min-height:100px; box-sizing:border-box; /* keeps all 3 cards the same height regardless of minor content differences */ } ul.wcsatt-options-product li.subscription-option:has(input:checked) > label{ border:2px solid var(--siq-navy); box-shadow:var(--siq-shadow); } ul.wcsatt-options-product li.subscription-option > label{ display:block !important; padding-left:18px; position:relative; } ul.wcsatt-options-product li.subscription-option .subscription-option-details{ width:100%; } .pd-title{ display:flex; align-items:center; gap:10px; font-weight:700; } .pd-title .pd-radio-slot{ display:inline-flex; flex:0 0 auto; } .pd-title .pd-radio-slot input[type=radio]{ width:20px; height:20px; accent-color:var(--siq-navy); cursor:pointer; margin:0; } .pd-title .pd-title-txt{ flex:1 1 auto; } /* Best Value badge */ li.siq-best > label{ position:relative; overflow:hidden; } .siq-best-badge, ul.wcsatt-options-product li.subscription-option .siq-best-badge{ position:absolute; top:0; right:0; background:var(--siq-navy); color:#fff; font-size:12px; font-weight:800; letter-spacing:.5px; padding:6px 16px; border-bottom-left-radius:12px; } /* ===== 7. PLAN CARDS — DYNAMIC CONTENT ===== */ .plan-dyn .pd-title{ font-size:18px; font-weight:800; color:var(--siq-navy); margin-bottom:6px; } .plan-dyn .pd-price{ text-align:left; } .plan-dyn .pd-rrp{ display:block; color:var(--siq-mute); font-size:14px; } /* Risk-free line: collapsed-card hint only, hidden on the expanded/selected card (shown in section 9) */ .pd-risk-free{ display:none; } /* Hero price block — shared shape across expanded subscription / collapsed subscription / one-time; only the sizing and which pieces show differ per state (see the li.subscription-option / li.one-time-option rules below). .pd-order sits directly ON .pd-hero-num (not a separate duplicated element), so atc-amount-label.js / atc-pixel-tracking.js keep reading the same class regardless of which state is currently showing. */ .plan-dyn .pd-hero-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:4px 0 2px; } .plan-dyn .pd-hero-num{ font-size:34px; font-weight:800; color:var(--siq-navy); line-height:1; } .plan-dyn .pd-hero-label{ display:none; font-size:13px; color:var(--siq-grey); margin:0 0 2px; } .plan-dyn .pd-sec-price{ font-size:15px; color:var(--siq-grey); margin:0 0 4px; white-space:nowrap; } .plan-dyn .pd-sec-num{ font-weight:700; color:var(--siq-navy); } .plan-dyn .pd-sec-unit{ margin-left:2px; } /* Expanded subscription card: SAVE pill sits inline in the hero row (duplicate of the one in .pd-badges below — CSS shows only one per state). */ li.subscription-option .pd-badges .pd-save{ display:none; } li.subscription-option .pd-extras{ font-size:15px; padding:6px 18px; } /* flex-wrap so a badge that doesn't fit drops to its own line as a whole pill, instead of the browser breaking its text mid-word inside the pill (which distorts the pill shape on narrow screens). */ .plan-dyn .pd-badges{ margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; } .plan-dyn .pd-save{ background:#e6f4dc; color:var(--siq-green); padding:4px 12px; border-radius:50px; font-size:12px; font-weight:700; white-space:nowrap; } .plan-dyn .pd-extras{ background:#fde8d4; color:var(--siq-orange); padding:4px 12px; border-radius:50px; font-size:12px; font-weight:700; white-space:nowrap; } /* ===== 8. PLAN CARDS — BREAKDOWN TABLE ===== */ /* Same sky-blue background + navy text/border whether collapsed or expanded. */ .pd-breakdown{ background: #e3f8fdb3; border:1px solid var(--siq-blue-bd); border-radius:14px; padding:0 16px; margin-top:24px; } .pd-breakdown-toggle{ width:100% !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:8px; background:none !important; border:none !important; padding:8px 0 !important; margin:0; font-family:var(--siq-font); font-weight:700 !important; font-size:16px !important; color:var(--siq-navy) !important; cursor:pointer; text-align:left !important; } .pd-breakdown-arrow{ font-size:20px !important; font-weight:700; line-height:1; color:var(--siq-navy); transition:transform .15s; flex:0 0 auto; } .pd-breakdown.pd-breakdown-open .pd-breakdown-arrow{ transform:rotate(90deg); } /* Divider under the toggle when open, like a table header separating it from the rows */ .pd-breakdown-rows{ display:none; padding-bottom:6px; border-top:1px solid var(--siq-blue-bd); } .pd-breakdown.pd-breakdown-open .pd-breakdown-rows{ display:block; } .pd-brow{ display:flex; justify-content:space-between; align-items:flex-start; padding:7px 0; border-bottom:0; } .pd-blabel{ display:flex; flex-direction:column; gap:3px; font-weight:700; font-size:15px; color:var(--siq-navy); line-height:1.2; } .pd-bsub{ display:block; font-weight:400; font-size:13px; color:#8a94a6; } .pd-bamt{ font-weight:700; font-size:15px; color:var(--siq-navy); white-space:nowrap; } /* discount row = green */ .pd-bdiscount .pd-blabel, .pd-bdiscount .pd-bamt{ color:var(--siq-green); } .pd-bdiscount .pd-bsub{ color:#8fbf72; } /* total */ .pd-btotal{ border-top:1px solid var(--siq-blue-bd) !important; border-bottom:0 !important; margin-top:2px; padding-top:12px; } .pd-btotal .pd-blabel, .pd-btotal .pd-bamt{ font-size:17px; font-weight:800; color:var(--siq-navy); } /* ===== 9. PLAN CARDS — COLLAPSED (unselected) ===== */ li.subscription-option:not(:has(input:checked)) .pd-breakdown, li.subscription-option:not(:has(input:checked)) .pd-static{ display:none !important; } /* .pd-badges (SAVE% / Gifts worth) is intentionally NOT hidden here anymore — shown collapsed as well as expanded now. */ /* Collapsed card has far less content than expanded, so the shared 16px label top padding (needed to clear the BEST VALUE badge on the expanded card) reads as excess empty space here — tighten it while still clearing the badge. */ li.subscription-option:not(:has(input:checked)) > label{ padding-top:10px !important; } li.subscription-option:not(:has(input:checked)) .plan-dyn{ display:grid !important; grid-template-columns:1fr auto; align-items:start; column-gap:16px; row-gap:6px; } li.subscription-option:not(:has(input:checked)) .pd-title{ grid-column:1; grid-row:1; margin:0; } li.subscription-option:not(:has(input:checked)) .pd-risk-free{ display:block; grid-column:1; grid-row:2; margin:0; font-size:13px; color:#5a6b82; } li.subscription-option:not(:has(input:checked)) .pd-badges{ grid-column:1; grid-row:3; margin:4px 0 0; } li.subscription-option:not(:has(input:checked)) .pd-price{ grid-column:2; grid-row:1 / span 3; text-align:right; margin:0; align-self:start; display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-start; } /* Collapsed: smaller hero number, "Per order" label shown, no SAVE pill in the hero row (stays only in .pd-badges), smaller secondary price line. */ li.subscription-option:not(:has(input:checked)) .pd-hero-num{ font-size:24px; } li.subscription-option:not(:has(input:checked)) .pd-hero-save{ display:none !important; } li.subscription-option:not(:has(input:checked)) .pd-hero-label{ display:block; } li.subscription-option:not(:has(input:checked)) .pd-sec-price{ font-size:12px; white-space:normal; } li.subscription-option:not(:has(input:checked)) .pd-sec-num{ font-size:15px; } li.subscription-option:not(:has(input:checked)) .pd-sec-unit{ display:block; margin-left:0; margin-top:2px; } li.subscription-option:not(:has(input:checked)) .pd-badges .pd-save{ display:inline-flex !important; } li.subscription-option:not(:has(input:checked)) .pd-extras{ font-size:12px; padding:4px 12px; } /* ===== 10. ONE-TIME PURCHASE CARD — same shape/behavior as the subscription cards above (sections 6-9), just its own minimal content (no breakdown, no per-day price, no carousel, fixed SAVE badge instead of a calculated one — see subscription-card-display.js). Deliberately NOT reusing the .subscription-option selectors so nothing here can ever affect the 30-day/90-day cards. ===== */ ul.wcsatt-options-product li.one-time-option{ background:var(--siq-card-bg) !important; border-radius:var(--siq-radius-lg); box-shadow:var(--siq-shadow); } ul.wcsatt-options-product li.one-time-option:has(input:checked) > label{ border:2px solid var(--siq-navy); box-shadow:var(--siq-shadow); } li.one-time-option > label{ display:block !important; padding-left:18px; position:relative; } li.one-time-option .one-time-option-details{ width:100%; } li.one-time-option .one-time-price{ display:none !important; } /* WCSATT's own native price element — using .pd-order instead */ /* Same grey as the subscription cards' own sub-line (.pd-risk-free), so both read as the same "supporting text under the title" style. */ .pd-onetime-sub{ font-size:13px; color:#5a6b82; margin:2px 0 0; font-weight:500; } /* Same compact grid treatment ALWAYS — selected or not. Unlike the subscription cards, one-time never expands into extra content (breakdown/ per-day/carousel) on selection — only the border highlight above changes. */ li.one-time-option > label{ padding-top:10px !important; } li.one-time-option .plan-dyn{ display:grid !important; grid-template-columns:1fr auto; align-items:start; column-gap:16px; row-gap:6px; } li.one-time-option .pd-title{ grid-column:1; grid-row:1; margin:0; } li.one-time-option .pd-onetime-sub{ display:block; grid-column:1; grid-row:2; margin:0; } li.one-time-option .pd-badges{ grid-column:1; grid-row:3; margin:4px 0 0; } li.one-time-option .pd-price{ grid-column:2; grid-row:1 / span 3; text-align:right; margin:0; align-self:start; display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-start; } li.one-time-option .pd-hero-num{ font-size:24px; } li.one-time-option .pd-hero-label{ display:block; } li.one-time-option .pd-sec-price{ font-size:12px; } /* Breakdown (Family Bundle only — see subscription-card-display.js) spans the full card width below the title/badges/price grid above. */ li.one-time-option .pd-breakdown{ grid-column:1 / -1; margin-top:12px; } li.one-time-option:not(:has(input:checked)) .pd-breakdown{ display:none !important; } /* ===== 11. SELECTORS — BIG WHITE CONTAINER + LAYOUT ===== */ .bundled_product{ margin-bottom:0 !important; padding:10px 0 !important; border-bottom:0 !important; } .bundled_product .details{ display:flex; flex-direction:column !important; align-items:stretch !important; justify-content:space-between; flex-wrap:wrap; background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; margin:0 !important; padding:0 !important; } .bundled_product .details > .cart, .bundled_product .details .bundled_item_wrap, .bundled_product .details .bundled_item_cart_content, .bundled_product .details .bundled_item_after_cart_details{ width:100% !important; } #siq-selectors-box{ background:var(--siq-card-bg); border:1px solid var(--siq-line); border-radius:18px; box-shadow:var(--siq-shadow-lg); padding:20px; margin-bottom:18px; } #siq-selectors-box > .bundled_product{ margin-bottom:0px !important; } #siq-selectors-box > .bundled_product:last-child{ margin-bottom:0 !important; } #siq-selectors-box > .siq-simple-qty{ background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; margin:0 !important; } #siq-selectors-box > .siq-kt-group ~ .bundled_product{ padding-left:15px !important; padding-right:15px !important; } /* ===== 12. STATIC CONTENT (.pd-static) — 2 carousels (Physical, Personalised) ===== */ .pd-static{ margin-top:14px; } /* section header + arrows */ .siq-sec{ padding-top:14px; border-top:1px solid var(--siq-line); margin-top:14px; } .siq-sec-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; } .siq-sec-left{ display:flex; align-items:baseline; gap:10px; } .siq-sec-title{ font-size:16px; font-weight:800; color:var(--siq-navy); } .siq-sec-side{ font-size:13px; color:var(--siq-mute); } .siq-arrows{ display:flex; gap:6px; } .siq-arrow{ width:28px !important; height:28px !important; min-width:28px !important; padding:0 !important; box-sizing:border-box !important; border-radius:0 !important; border:none !important; background:none !important; color:var(--siq-navy) !important; font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:none !important; flex:0 0 auto; } .siq-arrow:hover{ color:var(--siq-navy-dark) !important; } .siq-arrow:active{ color:var(--siq-navy-dark) !important; } .siq-arrow:focus{ outline:2px solid var(--siq-navy); outline-offset:2px; box-shadow:none !important; } /* Collapsible section (Personalised family Support) — starts collapsed, expands on click. Styled as a clear accordion row (background/border/ padding) so it visibly reads as tappable, unlike the plain Physical header. Title/subtitle stack vertically here instead of sitting side by side, freeing width for the toggle button. */ .siq-sec-collapsible > .siq-sec-head{ cursor:pointer; margin-bottom:0; padding:12px 14px; background:var(--siq-blue-bg); border:1px solid var(--siq-blue-bd); border-radius:var(--siq-radius); } .siq-sec-collapsible .siq-sec-left{ flex-direction:column; align-items:flex-start; gap:2px; } .siq-sec-collapsible.siq-sec-open > .siq-sec-head{ border-bottom-left-radius:0; border-bottom-right-radius:0; } .siq-sec-toggle-btn{ display:flex !important; align-items:center !important; gap:6px; flex:0 0 auto; background:var(--siq-card-bg) !important; border:1px solid var(--siq-blue-bd) !important; border-radius:var(--siq-radius-pill); padding:6px 12px !important; margin:0; cursor:pointer; font-family:var(--siq-font); font-weight:700 !important; font-size:13px !important; color:var(--siq-navy) !important; box-shadow:none !important; white-space:nowrap; } .siq-sec-toggle-btn:hover{ background:#f3fbfd !important; } .siq-arrows-row{ display:none; justify-content:flex-end; padding:8px 0 0; } .siq-sec-collapsible.siq-sec-open .siq-arrows-row{ display:flex; } .siq-sec-collapsible .siq-carousel{ display:none; } .siq-sec-collapsible.siq-sec-open .siq-carousel{ display:flex; } .siq-sec-toggle-arrow{ font-size:16px; font-weight:700; line-height:1; color:var(--siq-navy); transition:transform .15s; flex:0 0 auto; } .siq-sec-collapsible.siq-sec-open .siq-sec-toggle-arrow{ transform:rotate(90deg); } /* carousel */ .siq-carousel{ display:flex; gap:12px; overflow-x:auto; padding:2px; scroll-behavior:smooth; scrollbar-width:none; } .siq-carousel::-webkit-scrollbar{ display:none; } /* tile */ .siq-tile{ flex:0 0 128px; background:rgba(227,248,253,.8); border:1px solid var(--siq-blue-bd); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; padding:0; } .siq-tile-hl{ background:rgba(255,125,44,.10); border-color:var(--siq-orange); } .siq-tile-hl .siq-tile-img{ background:rgba(255,125,44,.06); border-bottom-color:var(--siq-orange); } .siq-tile-img{ display:flex; align-items:center; justify-content:center; width:100%; height:96px; background:rgba(227,248,253,.8); border-bottom:1px solid var(--siq-blue-bd); padding:12px; box-sizing:border-box; } .siq-tile-img img{ display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; } .siq-tile-body{ padding:10px; text-align:center; } .siq-tile-title{ font-size:13px; font-weight:700; color:var(--siq-navy); line-height:1.3; } .siq-tile-worth{ font-size:13px; font-weight:700; color:var(--siq-orange); margin-top:4px; } .siq-tile-sub{ font-size:12px; color:var(--siq-mute); margin-top:4px; } /* ===== 13. ADD-TO-CART BUTTON ===== */ form.cart .single_add_to_cart_button, .single_add_to_cart_button.single_add_to_cart_button{ width:100% !important; border:none !important; border-radius:var(--siq-radius-pill) !important; padding:16px !important; font-size:22px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.5px !important; background:var(--siq-orange) !important; color:#fff !important; box-shadow:2px 4px 0px 0px rgba(0,0,0,1) !important; transition:background .15s ease !important; margin:0 0 8px 0 !important; } form.cart .single_add_to_cart_button:hover, .single_add_to_cart_button.single_add_to_cart_button:hover{ background:var(--siq-green) !important; } form.cart p.price .amount{ font-size:22px; font-weight:800; color:var(--siq-navy); } .siq-atc-sep{ margin:0 8px; opacity:.6; } .siq-atc-amt{ font-weight:700; opacity:.95; } /* ===== 14. SIMPLE-QTY (Adult) — verify before delete ===== */ .siq-simple-qty{ display:block; width:100%; margin-top:10px; } .siq-simple-qty .siq-qty-heading{ display:block; font-weight:700; font-size:15px; color:var(--siq-navy); margin-bottom:8px; } .siq-simple-qty .siq-qty-row{ display:flex; gap:10px; width:100%; flex-wrap:nowrap; } .siq-simple-qty .siq-qty-btn{ flex:1 1 0; min-width:0; padding:6px 0 !important; border:1px solid #cfe0f2 !important; border-radius:var(--siq-radius) !important; background:#fff !important; color:var(--siq-navy) !important; font-weight:700 !important; font-size:15px !important; line-height:1.3 !important; cursor:pointer; } .siq-simple-qty .siq-qty-btn.siq-qty-active{ background:var(--siq-navy) !important; border-color:var(--siq-navy) !important; color:#fff !important; } /* Hide the raw WCSATT/Bundles markup until our JS has rebuilt it — on BOTH the shortcode-embedded version and native WooCommerce single product pages, so neither flashes the old design before the SIQ layout takes over. */ form.cart:has(ul.wcsatt-options-product):not(.siq-ready){ visibility:hidden; } .siq-bundle-embed{ min-height:600px; } /* Hide bundled child product thumbnail on the product page (kept in cart) */ .single-product .bundled_product .bundled_product_images { display: none !important; } /* reclaim the floated image column so title + pills use full width */ .single-product .bundled_product .details { float: none !important; width: 100% !important; margin-left: 0 !important; } /* existing rule — add font-family */ .bundled_product .bundled_product_title{ font-size:16px; font-weight:700; color:var(--siq-navy); font-family:var(--siq-font); /* ← add this */ margin:0; } /* quantity in green brackets: Adult ( × 1 ) */ .bundled_product .bundled_product_title .item_qty:not(:empty){ color:var(--siq-green); font-family:var(--siq-font); font-weight:700; white-space:nowrap; margin-left:4px; } .bundled_product .bundled_product_title .item_qty:not(:empty)::before{ content:"( "; } .bundled_product .bundled_product_title .item_qty:not(:empty)::after{ content:" )"; }