/* Product Dynamic Bundles v1.9.26 */ .vip-variation-buttons-container, .vip-bundles-container, .vip-quantity-custom, .vip-ajax-add-to-cart, .vip-coa-box a, .vip-bundle-card, .vip-ajax-message, .vip-custom-qty, .vip-var-button, .vip-bundle-title, .vip-bundle-save { font-family: "DM Sans", sans-serif; } .vip-bundles-container, .vip-variation-buttons-container, .vip-price-box, .vip-quantity-custom, .vip-coa-box, .vip-ajax-add-to-cart { box-sizing: border-box; } /* Variation buttons */ .vip-variation-buttons-container { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 24px; align-items: center; } .vip-variation-buttons-container .vip-var-button { width: 71px; height: 39px; min-width: 71px; padding: 8px 16px; border: 1px solid #D4D4D4; border-radius: 4px; background: #FFFFFF; color: #000000; font-weight: 400; font-size: 14px; line-height: 23px; letter-spacing: 0; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-sizing: border-box; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .vip-variation-buttons-container .vip-var-button:hover, .vip-variation-buttons-container .vip-var-button.is-active { background: #2A6EF5; color: #FFFFFF; border-color: #2A6EF5; } /* Bundle cards */ .vip-bundles-container { margin: 8px 0 24px; } .vip-bundles-grid { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; } .vip-bundle-card { background: #FFFFFF; width: 100%; min-width: 0; max-width: 100%; height: 76px; border: 1px solid #D4D4D4; border-radius: 8px; padding: 12px 14px 12px 14px; box-sizing: border-box; cursor: pointer; overflow: hidden; box-shadow: 0 8px 20px rgba(31, 41, 55, 0.08); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .vip-bundle-card:hover, .vip-bundle-card.active { border-color: #2A6EF5; box-shadow: 0 10px 24px rgba(42, 110, 245, 0.14); transform: translateY(-1px); } .vip-bundle-card-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .vip-bundle-content--compact { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; flex: 1; } .vip-bundle-title { margin: 0; font-weight: 600; font-size: 14px; line-height: 100%; color: #4B5563; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vip-bundle-save { color: #0EC9A4; font-weight: 600; font-size: 14px; line-height: 100%; letter-spacing: 0; white-space: nowrap; } .vip-bundle-image--compact { width: 46px; min-width: 46px; height: 58px; display: flex; align-items: center; justify-content: center; } .vip-bundle-image--compact img { width: 46px; height: 58px; object-fit: contain; display: block; } /* Legacy compact bundle cards keep their original fixed width. */ .vip-bundles-grid--horizontal > .vip-bundle-card--compact { width: 206px; min-width: 206px; max-width: 206px; } /* Modern bundle layout is hard-coded in the main stylesheet so there is no first-paint 206px width flash before the PHP inline styles / JS finish. */ /* Critical modern bundle layout: explicit to prevent first-paint width flash. */ .elementor-widget-shortcode:has(#vip-bundles-modern-container), .elementor-widget-container:has(> #vip-bundles-modern-container) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex: 1 1 100% !important; align-self: stretch !important; box-sizing: border-box !important; } #vip-bundles-modern-container, .vip-bundles-modern-container { display: block !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; align-self: stretch !important; flex: 1 1 100% !important; } .vip-bundles-modern-container > .vip-bundles-grid--horizontal { display: none !important; } .vip-bundles-modern-container .vip-bundles-modern-wrap, .vip-bundles-modern-wrap { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; } .vip-bundles-modern-label { margin: 0 0 14px !important; font-size: 13px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #75819a !important; } .vip-bundles-modern-container .vip-bundles-modern-grid, .vip-bundles-modern-grid { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; gap: 17px !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } .vip-bundles-modern-grid > .vip-bundle-card--modern, .vip-bundle-card--modern { position: relative !important; display: block !important; flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 96px !important; min-height: 96px !important; margin: 0 !important; box-sizing: border-box !important; background: linear-gradient(125deg, #ffffff 0%, #f4f8ff 52%, #effbf8 100%) !important; border: 1px solid #d8e1ef !important; border-radius: 16px !important; box-shadow: 0 3px 12px rgba(15, 23, 42, 0.035) !important; cursor: pointer !important; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important; overflow: visible !important; } .vip-bundle-card--modern:hover { transform: translateY(-1px) !important; border-color: #b8c9e7 !important; box-shadow: 0 8px 22px rgba(42, 110, 245, 0.08) !important; } .vip-bundle-card--modern.active { margin: 0 !important; background: linear-gradient(125deg, #ffffff 0%, #f1f6ff 52%, #ecfaf6 100%) !important; border-color: #2a6ef5 !important; box-shadow: 0 0 0 1px #2a6ef5, 0 10px 26px rgba(42, 110, 245, 0.10) !important; } .vip-bundle-card--modern::before, .vip-bundle-card--modern::after { content: none !important; display: none !important; } .vip-bundle-modern-inner { position: relative !important; width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(76px, auto) !important; grid-template-rows: minmax(0, 1fr) !important; column-gap: 14px !important; row-gap: 0 !important; align-items: center !important; justify-items: stretch !important; justify-content: stretch !important; text-align: left !important; padding: 10px 22px 10px 60px !important; box-sizing: border-box !important; } .vip-bundle-card--has-tag .vip-bundle-modern-inner { padding-top: 10px !important; padding-bottom: 10px !important; } .vip-bundle-modern-copy { position: relative !important; grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 5px !important; align-self: center !important; overflow: visible !important; } .vip-bundle-modern-copy::before { content: "" !important; position: absolute !important; left: -42px !important; top: 50% !important; transform: translateY(-50%) !important; width: 22px !important; height: 22px !important; border: 2px solid #a9b5c7 !important; border-radius: 50% !important; background: #ffffff !important; box-sizing: border-box !important; z-index: 2 !important; transition: border-color 0.18s ease, box-shadow 0.18s ease !important; } .vip-bundle-card--modern.active .vip-bundle-modern-copy::before { border-color: #2a6ef5 !important; box-shadow: 0 0 0 3px rgba(42, 110, 245, 0.08) !important; } .vip-bundle-card--modern.active .vip-bundle-modern-copy::after { content: "" !important; position: absolute !important; left: -31px !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #2a6ef5 !important; z-index: 3 !important; } .vip-bundle-modern-tag { position: absolute !important; top: -9px !important; right: 17px !important; left: auto !important; transform: none !important; z-index: 5 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 22px !important; padding: 4px 10px !important; background: var(--vip-bundle-tag-bg, #0ec9a4) !important; border: 0 !important; border-radius: 3px !important; font-size: 12px !important; line-height: 1 !important; font-weight: 500 !important; letter-spacing: 0.035em !important; text-transform: uppercase !important; white-space: nowrap !important; color: var(--vip-bundle-tag-text, #ffffff) !important; box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08) !important; } .vip-bundle-card--modern.active .vip-bundle-modern-tag { background: var(--vip-bundle-tag-bg, #0ec9a4) !important; color: var(--vip-bundle-tag-text, #ffffff) !important; } .vip-bundle-modern-title { min-width: 0 !important; max-width: 100% !important; margin: 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; justify-content: flex-start !important; gap: 5px !important; overflow: visible !important; white-space: normal !important; text-overflow: clip !important; font-size: 16px !important; line-height: 1.2 !important; font-weight: 800 !important; color: var(--vip-bundle-title-color, #111827) !important; } .vip-bundle-modern-title-main, .vip-bundle-modern-title-accent { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; width: auto !important; max-width: none !important; overflow: visible !important; white-space: nowrap !important; text-overflow: clip !important; } .vip-bundle-modern-title-main { color: var(--vip-bundle-title-color, #111827) !important; } .vip-bundle-modern-title-accent { color: var(--vip-bundle-highlight-color, #0ec9a4) !important; } .vip-bundle-modern-subtitle { margin: 0 !important; display: block !important; visibility: visible !important; opacity: 1 !important; max-width: 100% !important; font-size: 12px !important; line-height: 1.25 !important; font-weight: 500 !important; color: #7b8798 !important; white-space: normal !important; } .vip-bundle-modern-subtitle > :first-child { margin-top: 0 !important; } .vip-bundle-modern-subtitle > :last-child { margin-bottom: 0 !important; } .vip-bundle-modern-sub { grid-column: 2 !important; grid-row: 1 !important; margin: 0 !important; font-size: 25px !important; line-height: 1.15 !important; font-weight: 600 !important; text-align: right !important; white-space: nowrap !important; align-self: center !important; justify-self: end !important; padding-top: 0 !important; } .vip-bundle-modern-price { color: #111827 !important; } .vip-bundle-modern-save { color: #07846b !important; } .vip-bundle-modern-sub { flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; gap: 3px !important; } .vip-bundle-modern-primary-price { display: inline-flex !important; align-items: baseline !important; justify-content: flex-end !important; gap: 10px !important; white-space: nowrap !important; } .vip-bundle-modern-per-vial { display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; gap: 1px !important; font-family: "DM Sans", sans-serif !important; line-height: 1.05 !important; white-space: nowrap !important; } .vip-bundle-modern-per-vial-price { font-size: 14px !important; font-weight: 700 !important; color: #111827 !important; } .vip-bundle-modern-per-vial-label { font-size: 10px !important; font-weight: 500 !important; color: #7b8798 !important; text-transform: lowercase !important; } .vip-bundle-modern-priority { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 8px 0 0 18px !important; border: 0 !important; border-top: 1px dashed #aeb8c8 !important; border-radius: 0 !important; background: transparent !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 600 !important; color: #5d6a7d !important; box-sizing: border-box !important; } .vip-bundle-modern-priority-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; height: 16px !important; flex: 0 0 16px !important; color: #07846b !important; } .vip-bundle-modern-priority-icon svg { display: block !important; width: 16px !important; height: 16px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } .vip-bundle-modern-note { margin-top: 12px !important; font-size: 15px !important; line-height: 1.3 !important; font-weight: 500 !important; text-align: center !important; color: #6b7280 !important; } .vip-variation-vial-text { margin-top: 12px !important; font-size: 15px !important; line-height: 1.3 !important; font-weight: 500 !important; text-align: center !important; color: #6b7280 !important; } @media (max-width: 767px) { #vip-bundles-modern-container, .vip-bundles-modern-container, .vip-bundles-modern-wrap, .vip-bundles-modern-grid, .vip-bundle-card--modern { width: 100% !important; max-width: 100% !important; } .vip-bundles-modern-grid { gap: 15px !important; } .vip-bundle-card--modern { height: 92px !important; min-height: 92px !important; } .vip-bundle-modern-inner { height: 100% !important; min-height: 0 !important; grid-template-columns: minmax(0, 1fr) minmax(70px, auto) !important; grid-template-rows: minmax(0, 1fr) !important; column-gap: 8px !important; align-items: center !important; justify-content: stretch !important; padding: 9px 10px 9px 46px !important; } .vip-bundle-card--has-tag .vip-bundle-modern-inner { padding-top: 9px !important; padding-bottom: 9px !important; } .vip-bundle-modern-copy { gap: 5px !important; } .vip-bundle-modern-copy::before { left: -32px !important; top: 50% !important; transform: translateY(-50%) !important; width: 20px !important; height: 20px !important; } .vip-bundle-card--modern.active .vip-bundle-modern-copy::after { left: -22px !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: 10px !important; height: 10px !important; } .vip-bundle-modern-title { font-size: 15px !important; gap: 4px !important; } .vip-bundle-modern-sub { font-size: 25px !important; font-weight: 600 !important; } .vip-bundle-modern-subtitle { font-size: 11px !important; } .vip-bundle-modern-tag { right: 10px !important; font-size: 11px !important; padding: 4px 9px !important; border-radius: 3px !important; } .vip-bundle-modern-priority { font-size: 11px !important; } } /* Quantity */ .vip-quantity-custom { width: 92px; height: 32px; border-radius: 4px; border: 1px solid #D4D4D4; display: inline-flex; align-items: center; justify-content: space-between; overflow: hidden; background: #FFFFFF; margin: 8px 0 18px; } .vip-qty-btn { width: 28px; height: 32px; border: 0; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 14px 14px; cursor: pointer; font-size: 0; line-height: 0; padding: 0; } .vip-qty-minus { background-image: none; } .vip-qty-plus { background-image: none; } .vip-custom-qty { width: 36px; height: 32px; border: 0; background: transparent; text-align: center; font-weight: 400; font-size: 16px; line-height: 27px; color: #000000; outline: none; padding: 0; -moz-appearance: textfield; } .vip-custom-qty::-webkit-outer-spin-button, .vip-custom-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Price */ .vip-price-box { width: auto; min-width: 156px; min-height: 53px; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: flex-end; padding: 0; margin: 0 0 16px; } .vip-price-placeholder, .vip-current-total { font-family: "Syne", sans-serif; font-weight: 700; font-size: 44px; line-height: 100%; color: #2A6EF5; letter-spacing: 0; white-space: nowrap; } .vip-save-label { display: inline-block; margin-left: 10px; color: #0EC9A4; font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 12px; line-height: 100%; vertical-align: middle; } /* Add to cart */ .vip-ajax-add-to-cart { width: 400px; max-width: 100%; height: 46px; padding: 0 16px; gap: 10px; border-radius: 4px; background: #2A6EF5; border: 0; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; cursor: pointer; transition: background-color 0.2s ease, opacity 0.2s ease; } .vip-ajax-add-to-cart:hover { background: #1F5EE0; } .vip-ajax-add-to-cart.loading { opacity: 0.7; pointer-events: none; } .vip-cart-icon { width: 20px; height: 20px; min-width: 20px; display: inline-block; background-image: url("https://khaki-frog-329810.hostingersite.com/wp-content/uploads/2026/03/Shopping-cart.png"); background-repeat: no-repeat; background-position: center; background-size: 20px 20px; } .vip-cart-text { font-weight: 600; font-size: 15px; line-height: 100%; text-align: center; color: #FFFFFF; } /* COA */ .vip-coa-box { display: inline-block; margin: 0 0 0 12px; vertical-align: top; } .vip-coa-box a { width: 196px; max-width: 100%; height: 46px; display: inline-flex; align-items: center; justify-content: center; color: #2A6EF5; background: #FFFFFF; text-decoration: none; border: 1px solid #2A6EF5; border-radius: 4px; font-weight: 600; font-size: 15px; line-height: 100%; padding: 0 16px; text-align: center; box-sizing: border-box; } .vip-coa-box a:hover { background: #F5F9FF; } /* Misc */ .vip-ajax-message { display: none; margin: 10px 0 0; font-size: 14px; font-weight: 600; } .vip-ajax-message.success { color: #0EC9A4; } .vip-ajax-message.error { color: #DC2626; } .vip-bundles-empty { padding: 14px 16px; border: 1px dashed #D4D4D4; border-radius: 8px; background: #FFFFFF; font-size: 12px; color: #000000; } /* Admin */ .vip-variation-bundles-wrap { margin-top: 16px; clear: both; } .vip-bundles-accordion { border: 1px solid #ddd; border-radius: 10px; background: #fff; overflow: hidden; margin-top: 12px; } .vip-bundles-accordion-head { padding: 12px 16px; background: #f6f7f7; cursor: pointer; user-select: none; } .vip-bundles-accordion-body { display: none; padding: 16px; } .vip-bundles-accordion.open .vip-bundles-accordion-body { display: block; } .vip-bundle-row { padding: 12px 0; } .vip-bundle-row p { margin: 0 0 12px; } .vip-bundle-row label { display: block; margin-bottom: 6px; font-weight: 600; } .vip-bundle-subtitle-field .vip-bundle-subtitle-editor { width: 100%; min-height: 72px; resize: vertical; font-family: Consolas, Monaco, monospace; line-height: 1.45; } .vip-bundle-subtitle-field .description { display: block; margin-top: 5px; } .vip-bundle-image-wrap { margin-bottom: 12px; } .vip-bundle-image-preview img { max-width: 120px; height: auto; display: block; border-radius: 8px; margin-bottom: 10px; } @media (max-width: 767px) { .vip-ajax-add-to-cart, .vip-coa-box a { width: 100%; } .vip-coa-box { display: block; margin: 12px 0 0; } .vip-price-placeholder, .vip-current-total { font-size: 36px; } .vip-bundle-card--compact { width: 100%; min-width: 100%; max-width: 100%; } } /* Buy 2 Get 1 Free bundle offer */ .vip-bundle-bogo-label, .vip-bundle-modern-bogo { white-space: normal; } .vip-bundle-bogo-field, .vip-bundle-bogo-recursive-field { margin-top: 10px; } .vip-bundle-bogo-recursive-field .description { display: block; margin-top: 4px; color: #646970; font-size: 12px; line-height: 1.4; } .vip-bundle-bogo-buy-qty-field .description, .vip-bundle-bogo-recursive-field .description { display: block; margin-top: 4px; color: #646970; font-size: 12px; line-height: 1.4; } .vip-bogo-free-qty { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 28px; padding: 2px 8px; border-radius: 4px; background: #f6f7f7; font-weight: 600; } /* BAC Water product card */ .vip-bac-water-section { width: 100%; margin: 12px 0 20px; box-sizing: border-box; font-family: "DM Sans", sans-serif; } .vip-bac-water-card { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid #D4D4D4; border-radius: 8px; background: #FFFFFF; box-shadow: 0 8px 20px rgba(31, 41, 55, 0.08); box-sizing: border-box; } .vip-bac-water-card-media { width: 72px; min-width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #F8FAFC; overflow: visible; box-sizing: border-box; } .vip-bac-water-card-image, .vip-bac-water-card-media img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: center center !important; display: block !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .vip-bac-water-card-content { min-width: 0; flex: 1; } .vip-bac-water-card-label { margin: 0 0 5px; font-size: 12px; line-height: 1.3; font-weight: 700; color: #2A6EF5; } .vip-bac-water-card-title { margin: 0 0 6px; font-size: 15px; line-height: 1.25; font-weight: 700; color: #111827; } .vip-bac-water-card-price { font-size: 14px; line-height: 1.25; font-weight: 700; color: #0EC9A4; } .vip-bac-water-card-price .woocommerce-Price-amount { color: inherit; font-weight: inherit; } .vip-bac-water-card-action { flex: 0 0 auto; } .vip-bac-water-add-to-cart { min-width: 120px; min-height: 40px; padding: 10px 16px !important; border: 0 !important; border-radius: 4px !important; background: #2A6EF5 !important; color: #FFFFFF !important; font-size: 14px !important; line-height: 1 !important; font-weight: 700 !important; text-align: center; cursor: pointer; box-sizing: border-box; transition: background-color 0.2s ease, opacity 0.2s ease; } .vip-bac-water-add-to-cart:hover { background: #1F5EE0 !important; color: #FFFFFF !important; } .vip-bac-water-add-to-cart.loading { opacity: 0.7; pointer-events: none; } @media (max-width: 767px) { .vip-bac-water-card { flex-direction: column; align-items: stretch; text-align: center; gap: 12px; } .vip-bac-water-card-media { width: 100%; min-width: 0; height: 110px; } .vip-bac-water-card-action, .vip-bac-water-add-to-cart { width: 100%; } } .vip-bac-water-variations { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .vip-bac-water-variation-field { display: flex; flex-direction: column; gap: 4px; min-width: 120px; margin: 0; } .vip-bac-water-variation-label { font-size: 11px; line-height: 1.2; font-weight: 700; color: #4B5563; } .vip-bac-water-variation-select { min-height: 34px; width: 100%; max-width: 180px; border: 1px solid #D4D4D4; border-radius: 4px; background: #FFFFFF; color: #111827; font-size: 13px; font-weight: 600; padding: 6px 9px; outline: none; box-sizing: border-box; } .vip-bac-water-variation-select:focus { border-color: #2A6EF5; } @media (max-width: 767px) { .vip-bac-water-variations { justify-content: center; } .vip-bac-water-variation-field, .vip-bac-water-variation-select { max-width: 100%; width: 100%; } } /* BAC Water variation buttons */ .vip-bac-water-variation-buttons { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .vip-bac-water-variation-button { min-width: 70px; height: 40px; padding: 8px 16px; border: 1px solid #111827; border-radius: 9px; background: #FFFFFF; color: #111827; font-size: 14px; line-height: 1; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .vip-bac-water-variation-button:hover, .vip-bac-water-variation-button.is-active { background: #2B2B2B; border-color: #2B2B2B; color: #FFFFFF; } @media (max-width: 767px) { .vip-bac-water-variation-buttons { justify-content: center; } .vip-bac-water-variation-button { min-width: 64px; height: 38px; padding: 8px 14px; } } /* BAC Water card mobile responsive refinements */ .vip-bac-water-section, .vip-bac-water-section * { box-sizing: border-box; } .vip-bac-water-section .vip-bac-water-card { max-width: 100%; } .vip-bac-water-section .vip-bac-water-variation-buttons { max-width: 100%; } @media (max-width: 991px) { .vip-bac-water-section .vip-bac-water-card { gap: 12px; padding: 14px; } .vip-bac-water-section .vip-bac-water-card-media { width: 68px; min-width: 68px; height: 68px; } .vip-bac-water-section .vip-bac-water-add-to-cart { min-width: 112px; padding-left: 14px !important; padding-right: 14px !important; } } @media (max-width: 767px) { .vip-bac-water-section { margin: 12px 0 18px; } .vip-bac-water-section .vip-bac-water-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "media content" "action action"; align-items: center; gap: 12px; padding: 14px; text-align: left; } .vip-bac-water-section .vip-bac-water-card-media { grid-area: media; width: 76px; min-width: 76px; max-width: 76px; height: 76px; margin: 0; } .vip-bac-water-section .vip-bac-water-card-content { grid-area: content; width: 100%; min-width: 0; } .vip-bac-water-section .vip-bac-water-card-action { grid-area: action; width: 100%; } .vip-bac-water-section .vip-bac-water-card-label { font-size: 12px; line-height: 1.25; } .vip-bac-water-section .vip-bac-water-card-title { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; } .vip-bac-water-section .vip-bac-water-card-price { font-size: 14px; } .vip-bac-water-section .vip-bac-water-variation-buttons { justify-content: flex-start; gap: 8px; margin-top: 8px; } .vip-bac-water-section .vip-bac-water-variation-button { min-width: auto; height: 36px; padding: 8px 12px; font-size: 13px; border-radius: 8px; flex: 0 0 auto; } .vip-bac-water-section .vip-bac-water-add-to-cart { width: 100%; min-width: 0; min-height: 42px; } } @media (max-width: 420px) { .vip-bac-water-section .vip-bac-water-card { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 12px; } .vip-bac-water-section .vip-bac-water-card-media { width: 64px; min-width: 64px; max-width: 64px; height: 64px; } .vip-bac-water-section .vip-bac-water-card-label { font-size: 11px; } .vip-bac-water-section .vip-bac-water-card-title { font-size: 13px; } .vip-bac-water-section .vip-bac-water-variation-buttons { gap: 6px; } .vip-bac-water-section .vip-bac-water-variation-button { height: 34px; padding: 7px 10px; font-size: 12px; } } /* BAC Water Add to Cart loading state - professional static style */ .vip-bac-water-add-to-cart.loading, .vip-bac-water-add-to-cart.loading:hover, .vip-bac-water-add-to-cart.loading:focus { background: #6B7280 !important; color: #FFFFFF !important; opacity: 1 !important; cursor: wait !important; pointer-events: none !important; position: relative !important; padding-right: 16px !important; } .vip-bac-water-add-to-cart.loading::before, .vip-bac-water-add-to-cart.loading::after, .vip-bac-water-add-to-cart.loading:before, .vip-bac-water-add-to-cart.loading:after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; animation: none !important; transform: none !important; opacity: 0 !important; visibility: hidden !important; } /* BAC Water button: keep loading/added states static and remove WooCommerce/theme pseudo icons */ .vip-bac-water-section .vip-bac-water-add-to-cart.loading, .vip-bac-water-section .vip-bac-water-add-to-cart.added, .vip-bac-water-section .vip-bac-water-add-to-cart.loading:hover, .vip-bac-water-section .vip-bac-water-add-to-cart.added:hover, .vip-bac-water-section button.vip-bac-water-add-to-cart.loading, .vip-bac-water-section button.vip-bac-water-add-to-cart.added { background: #6B7280 !important; color: #FFFFFF !important; opacity: 1 !important; cursor: wait !important; pointer-events: none !important; position: relative !important; padding-right: 16px !important; } .vip-bac-water-section .vip-bac-water-add-to-cart.loading::before, .vip-bac-water-section .vip-bac-water-add-to-cart.loading::after, .vip-bac-water-section .vip-bac-water-add-to-cart.added::before, .vip-bac-water-section .vip-bac-water-add-to-cart.added::after, .vip-bac-water-section button.vip-bac-water-add-to-cart.loading:before, .vip-bac-water-section button.vip-bac-water-add-to-cart.loading:after, .vip-bac-water-section button.vip-bac-water-add-to-cart.added:before, .vip-bac-water-section button.vip-bac-water-add-to-cart.added:after, .woocommerce .vip-bac-water-section .vip-bac-water-add-to-cart.loading::before, .woocommerce .vip-bac-water-section .vip-bac-water-add-to-cart.loading::after, .woocommerce .vip-bac-water-section .vip-bac-water-add-to-cart.added::before, .woocommerce .vip-bac-water-section .vip-bac-water-add-to-cart.added::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; animation: none !important; transform: none !important; opacity: 0 !important; visibility: hidden !important; } /* BAC Water Add to Cart button: static text-only loading/added states, no theme/WooCommerce icons */ .vip-bac-water-section .vip-bac-water-add-to-cart.vip-bac-water-is-loading, .vip-bac-water-section .vip-bac-water-add-to-cart.vip-bac-water-is-loading:hover, .vip-bac-water-section .vip-bac-water-add-to-cart.vip-bac-water-is-loading:focus { background: #6B7280 !important; color: #FFFFFF !important; opacity: 1 !important; cursor: wait !important; pointer-events: none !important; position: relative !important; padding-right: 16px !important; background-image: none !important; } .vip-bac-water-section .vip-bac-water-add-to-cart.vip-bac-water-is-loading::before, .vip-bac-water-section .vip-bac-water-add-to-cart.vip-bac-water-is-loading::after, .vip-bac-water-section .vip-bac-water-add-to-cart.loading::before, .vip-bac-water-section .vip-bac-water-add-to-cart.loading::after, .vip-bac-water-section .vip-bac-water-add-to-cart.added::before, .vip-bac-water-section .vip-bac-water-add-to-cart.added::after, .woocommerce .vip-bac-water-section .button.vip-bac-water-add-to-cart::before, .woocommerce .vip-bac-water-section .button.vip-bac-water-add-to-cart::after, .woocommerce .vip-bac-water-section button.vip-bac-water-add-to-cart::before, .woocommerce .vip-bac-water-section button.vip-bac-water-add-to-cart::after, .vip-bac-water-section button.vip-bac-water-add-to-cart::before, .vip-bac-water-section button.vip-bac-water-add-to-cart::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; animation: none !important; transform: none !important; opacity: 0 !important; visibility: hidden !important; } .vip-bac-water-section .vip-bac-water-add-to-cart + .added_to_cart, .vip-bac-water-section .added_to_cart.wc-forward { display: none !important; } /* Modern bundle tag/active styling is defined in the primary modern bundle block above. This intentionally avoids overriding per-bundle admin colors. */ /* FINAL CENTER ALIGNMENT OVERRIDE v1.9.11 * Pin the content layer to the full card height so the radio, copy group and * price all sit on the exact vertical centre line. The offer badge remains * absolutely positioned and cannot affect the card content position. */ .vip-bundle-card--modern { padding-top: 0 !important; padding-bottom: 0 !important; } .vip-bundle-modern-inner, .vip-bundle-card--has-tag .vip-bundle-modern-inner { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: auto !important; height: auto !important; min-height: 0 !important; padding: 0 22px 0 60px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(76px, auto) !important; grid-template-rows: minmax(0, 1fr) !important; column-gap: 14px !important; align-items: center !important; align-content: center !important; box-sizing: border-box !important; } .vip-bundle-modern-copy { height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; align-self: center !important; justify-content: center !important; transform: none !important; } .vip-bundle-modern-sub { height: auto !important; min-height: 0 !important; display: block !important; align-self: center !important; justify-self: end !important; margin: 0 !important; padding: 0 !important; transform: none !important; } @media (max-width: 767px) { .vip-bundle-modern-inner, .vip-bundle-card--has-tag .vip-bundle-modern-inner { padding: 0 10px 0 46px !important; grid-template-columns: minmax(0, 1fr) minmax(70px, auto) !important; column-gap: 8px !important; } .vip-bundle-modern-copy, .vip-bundle-modern-sub { height: auto !important; min-height: 0 !important; } } /* Requested bundle refinements: compact priority-shipping pill, exact price centering, and +3px bundle titles. */ .vip-bundle-card--modern.vip-bundle-card--has-priority { height: 134px !important; min-height: 134px !important; } .vip-bundle-card--has-priority .vip-bundle-modern-inner, .vip-bundle-card--has-priority.vip-bundle-card--has-tag .vip-bundle-modern-inner { grid-template-rows: minmax(0, 1fr) 40px !important; align-content: stretch !important; padding: 10px 22px 10px 60px !important; } .vip-bundle-card--has-priority .vip-bundle-modern-copy { grid-column: 1 !important; grid-row: 1 !important; } .vip-bundle-card--has-priority .vip-bundle-modern-sub { grid-column: 2 !important; grid-row: 1 !important; align-self: stretch !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; height: 100% !important; /* The card has 10px outer vertical padding; this optical correction keeps the price exactly centered in the main (top) area. */ transform: translateY(-5px) !important; } .vip-bundle-card--has-priority .vip-bundle-modern-priority { grid-column: 1 / -1 !important; grid-row: 2 !important; align-self: center !important; justify-self: start !important; margin-left: -42px !important; width: max-content !important; max-width: calc(100% + 42px) !important; padding: 8px 18px !important; white-space: nowrap !important; } /* All Buy / GET offer title text is exactly 3px larger on desktop. */ .vip-bundle-modern-title, .vip-bundle-modern-title-main, .vip-bundle-modern-title-accent { font-size: 19px !important; } @media (max-width: 767px) { .vip-bundle-card--modern.vip-bundle-card--has-priority { height: 128px !important; min-height: 128px !important; } .vip-bundle-card--has-priority .vip-bundle-modern-inner, .vip-bundle-card--has-priority.vip-bundle-card--has-tag .vip-bundle-modern-inner { grid-template-rows: minmax(0, 1fr) 36px !important; padding: 8px 10px 8px 46px !important; } .vip-bundle-card--has-priority .vip-bundle-modern-sub { transform: translateY(-4px) !important; } .vip-bundle-card--has-priority .vip-bundle-modern-priority { margin-left: -32px !important; width: max-content !important; max-width: calc(100% + 32px) !important; padding: 7px 14px !important; } /* Mobile base title is 15px, so all Buy / GET text stays exactly +3px. */ .vip-bundle-modern-title, .vip-bundle-modern-title-main, .vip-bundle-modern-title-accent { font-size: 18px !important; } } /* FINAL PRIORITY CARD REFINEMENT v1.9.12 * 1) The bundle price stays vertically centered against the FULL card, * even when the free-shipping row is enabled. * 2) Free priority shipping is a compact yellow content-width pill. * 3) The selected radio dot is mathematically centered inside its ring. */ .vip-bundle-card--has-priority .vip-bundle-modern-sub { position: absolute !important; top: 50% !important; right: 22px !important; left: auto !important; bottom: auto !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; gap: 3px !important; align-self: auto !important; justify-self: auto !important; transform: translateY(-50%) !important; z-index: 3 !important; } .vip-bundle-card--has-priority .vip-bundle-modern-priority { grid-column: 1 / -1 !important; grid-row: 2 !important; align-self: center !important; justify-self: start !important; width: max-content !important; max-width: calc(100% + 42px) !important; min-height: 30px !important; margin: 0 0 0 -42px !important; padding: 7px 12px !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 7px !important; background: #fff8d8 !important; border: 1px solid #f2dc83 !important; border-radius: 7px !important; box-shadow: 0 2px 5px rgba(15, 23, 42, 0.06) !important; color: #111827 !important; font-size: 12px !important; line-height: 1.15 !important; font-weight: 600 !important; white-space: nowrap !important; box-sizing: border-box !important; } .vip-bundle-card--has-priority .vip-bundle-modern-priority-icon { width: 15px !important; height: 15px !important; flex: 0 0 15px !important; color: #111827 !important; } .vip-bundle-card--has-priority .vip-bundle-modern-priority-icon svg { width: 15px !important; height: 15px !important; } /* Radio ring + active dot: use the same geometric center. */ .vip-bundle-modern-copy::before { left: -42px !important; top: 50% !important; width: 22px !important; height: 22px !important; transform: translateY(-50%) !important; } .vip-bundle-card--modern.active .vip-bundle-modern-copy::after { left: -31px !important; /* -42px + half of the 22px ring */ top: 50% !important; width: 10px !important; height: 10px !important; transform: translate(-50%, -50%) !important; } @media (max-width: 767px) { .vip-bundle-card--has-priority .vip-bundle-modern-sub { right: 10px !important; top: 50% !important; transform: translateY(-50%) !important; } .vip-bundle-card--has-priority .vip-bundle-modern-priority { max-width: calc(100% + 32px) !important; min-height: 28px !important; margin-left: -32px !important; padding: 6px 10px !important; gap: 6px !important; font-size: 11px !important; border-radius: 7px !important; } .vip-bundle-modern-copy::before { left: -32px !important; top: 50% !important; width: 20px !important; height: 20px !important; transform: translateY(-50%) !important; } .vip-bundle-card--modern.active .vip-bundle-modern-copy::after { left: -22px !important; /* -32px + half of the 20px ring */ top: 50% !important; width: 10px !important; height: 10px !important; transform: translate(-50%, -50%) !important; } } /* Front-end-only adjusted bundle price display. * Only bundle cards with Front-End Quantity Minus > 0 receive this layout. * Cart / checkout / order pricing is not affected. */ .vip-bundle-modern-sub.vip-bundle-modern-price--adjusted { display: inline-flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; gap: 3px !important; white-space: nowrap !important; } .vip-bundle-modern-price--adjusted .vip-bundle-modern-original-price { display: inline-block !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; font-size: 19px !important; line-height: 1 !important; font-weight: 500 !important; letter-spacing: -0.01em !important; color: #9aa6b6 !important; opacity: 0.82 !important; text-decoration-line: line-through !important; text-decoration-color: #aeb8c6 !important; text-decoration-thickness: 1px !important; white-space: nowrap !important; } .vip-bundle-modern-price--adjusted .vip-bundle-modern-original-price .woocommerce-Price-amount, .vip-bundle-modern-price--adjusted .vip-bundle-modern-original-price .woocommerce-Price-currencySymbol { font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: inherit !important; } .vip-bundle-modern-price--adjusted .vip-bundle-modern-current-price { display: inline-block !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: #111827 !important; white-space: nowrap !important; } @media (max-width: 767px) { .vip-bundle-modern-sub.vip-bundle-modern-price--adjusted { gap: 6px !important; } .vip-bundle-modern-price--adjusted .vip-bundle-modern-original-price { font-size: 19px !important; opacity: 0.78 !important; } } /* Automatic subtitle summary for Front-End Quantity Minus bundles only. * Non-minus bundle subtitles remain exactly as entered in the admin field. */ .vip-bundle-modern-subtitle .vip-bundle-minus-summary { display: inline-flex !important; align-items: center !important; gap: 6px !important; max-width: 100% !important; padding: 5px 8px !important; background: linear-gradient(135deg, #f3fbff 0%, #eefbf7 100%) !important; border: 1px solid #d8ebe7 !important; border-radius: 7px !important; box-sizing: border-box !important; white-space: nowrap !important; } .vip-bundle-minus-summary-label { font-size: 11px !important; line-height: 1 !important; font-weight: 500 !important; color: #7d8995 !important; } .vip-bundle-minus-summary-regular { font-size: 14px !important; line-height: 1 !important; font-weight: 600 !important; color: #8995a3 !important; text-decoration-line: line-through !important; text-decoration-color: #8995a3 !important; text-decoration-thickness: 1px !important; } .vip-bundle-minus-summary-regular .woocommerce-Price-amount, .vip-bundle-minus-summary-regular .woocommerce-Price-currencySymbol { font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: inherit !important; } .vip-bundle-minus-summary-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 2px 5px !important; border-radius: 4px !important; background: #dff8f1 !important; color: #008d72 !important; font-size: 11px !important; line-height: 1.1 !important; font-weight: 700 !important; letter-spacing: 0.2px !important; white-space: nowrap !important; } .vip-bundle-minus-summary-save { font-size: 14px !important; line-height: 1 !important; font-weight: 700 !important; color: #071426 !important; white-space: nowrap !important; } .vip-bundle-minus-summary-save .woocommerce-Price-amount, .vip-bundle-minus-summary-save .woocommerce-Price-currencySymbol { font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: inherit !important; } @media (max-width: 767px) { .vip-bundle-modern-subtitle .vip-bundle-minus-summary { gap: 4px !important; padding: 4px 6px !important; } .vip-bundle-minus-summary-label { font-size: 9px !important; } .vip-bundle-minus-summary-regular, .vip-bundle-minus-summary-save { font-size: 12px !important; } .vip-bundle-minus-summary-badge { font-size: 10px !important; padding: 2px 4px !important; } } /* Bundle shipping badge options. * Layout stays identical to the previous priority-shipping pill; only the * selected label/color changes. Only one option is saved per bundle. */ .vip-bundle-modern-priority--free-2-day { background: #fff8d8 !important; border-color: #f2dc83 !important; color: #111827 !important; } .vip-bundle-modern-priority--free-2-day .vip-bundle-modern-priority-icon { color: #111827 !important; } .vip-bundle-modern-priority--fast-tracked { background: #f8f6ff !important; border-color: #ddd5f7 !important; color: #6842b8 !important; } .vip-bundle-modern-priority--fast-tracked .vip-bundle-modern-priority-icon { color: #6842b8 !important; } .vip-bundle-modern-priority--free-fast-tracked { background: #f4f8ff !important; border-color: #cfe2f6 !important; color: #1769a8 !important; } .vip-bundle-modern-priority--free-fast-tracked .vip-bundle-modern-priority-icon { color: #1769a8 !important; } /* Admin: keep the three shipping checkboxes grouped without changing the * existing bundle-row styling. */ .vip-bundle-shipping-options { margin: 12px 0; } .vip-bundle-shipping-options > p { margin-bottom: 8px; } /* FINAL SHIPPING BADGE COLOR OVERRIDES * Each admin-selected shipping badge keeps the exact same layout/spacing, * but uses its own distinct background color. Higher specificity is used so * the older generic yellow priority-shipping rule cannot override these. */ .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--free-2-day { background: #fff8d8 !important; border-color: #f2dc83 !important; color: #111827 !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--free-2-day .vip-bundle-modern-priority-icon { color: #111827 !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--fast-tracked { background: #f8f6ff !important; border-color: #ddd5f7 !important; color: #6842b8 !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--fast-tracked .vip-bundle-modern-priority-icon { color: #6842b8 !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--free-fast-tracked { background: #f4f8ff !important; border-color: #cfe2f6 !important; color: #1769a8 !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--free-fast-tracked .vip-bundle-modern-priority-icon { color: #1769a8 !important; } /* ========================================================= * FINAL BUNDLE PRICE LAYOUT v1.9.17 * - Right side: effective per-vial price ONLY * - Left under title: current total + crossed regular total * - Yellow savings badge: $X OFF * - Premium soft shipping badge palette * ======================================================= */ .vip-bundle-modern-sub.vip-bundle-modern-price--per-vial-only { display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; gap: 0 !important; color: #111827 !important; text-align: right !important; white-space: nowrap !important; } .vip-bundle-modern-price--per-vial-only .vip-bundle-modern-per-vial { display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; gap: 2px !important; margin: 0 !important; padding: 0 !important; } .vip-bundle-modern-price--per-vial-only .vip-bundle-modern-per-vial-price { display: block !important; font-size: 25px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: #071426 !important; white-space: nowrap !important; } .vip-bundle-modern-price--per-vial-only .vip-bundle-modern-per-vial-label { display: block !important; margin: 0 !important; font-size: 11px !important; line-height: 1 !important; font-weight: 500 !important; color: #7b8798 !important; white-space: nowrap !important; } /* Total line now lives under the bundle title, matching the reference layout. */ .vip-bundle-modern-subtitle .vip-bundle-total-summary { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; justify-content: flex-start !important; gap: 7px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; white-space: nowrap !important; } .vip-bundle-total-summary-current { display: inline-flex !important; align-items: baseline !important; gap: 3px !important; font-size: 13px !important; line-height: 1.1 !important; font-weight: 600 !important; color: #667085 !important; white-space: nowrap !important; } .vip-bundle-total-summary-current small { font-size: 11px !important; line-height: 1 !important; font-weight: 500 !important; color: #7b8798 !important; } .vip-bundle-total-summary-regular { display: inline-block !important; margin: 0 !important; padding: 0 !important; font-size: 13px !important; line-height: 1.1 !important; font-weight: 500 !important; color: #a5afbd !important; opacity: 0.9 !important; text-decoration-line: line-through !important; text-decoration-color: #a5afbd !important; text-decoration-thickness: 1px !important; white-space: nowrap !important; } .vip-bundle-total-summary-current .woocommerce-Price-amount, .vip-bundle-total-summary-current .woocommerce-Price-currencySymbol, .vip-bundle-total-summary-regular .woocommerce-Price-amount, .vip-bundle-total-summary-regular .woocommerce-Price-currencySymbol { font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: inherit !important; } /* Savings amount beside the bundle title. */ .vip-bundle-modern-off-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 22px !important; margin-left: 3px !important; padding: 4px 8px !important; border: 1px solid #efd675 !important; border-radius: 5px !important; background: linear-gradient(180deg, #fff5bd 0%, #ffe889 100%) !important; box-shadow: 0 2px 5px rgba(149, 108, 0, 0.08) !important; font-size: 11px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: 0.015em !important; color: #7a5600 !important; white-space: nowrap !important; vertical-align: middle !important; } .vip-bundle-modern-off-badge .woocommerce-Price-amount, .vip-bundle-modern-off-badge .woocommerce-Price-currencySymbol { font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: inherit !important; } /* Keep the title row flexible so the OFF badge sits naturally after the offer text. */ .vip-bundle-modern-title { column-gap: 5px !important; row-gap: 5px !important; } /* Premium shipping badge colors — soft, distinct, and compatible with the bundle cards. */ .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--free-2-day, .vip-bundle-modern-priority--free-2-day { background: linear-gradient(180deg, #fffaf0 0%, #fff4d9 100%) !important; border-color: #e8ce8a !important; color: #8a6208 !important; box-shadow: 0 2px 7px rgba(138, 98, 8, 0.08) !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--free-2-day .vip-bundle-modern-priority-icon, .vip-bundle-modern-priority--free-2-day .vip-bundle-modern-priority-icon { color: #a8770a !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--fast-tracked, .vip-bundle-modern-priority--fast-tracked { background: linear-gradient(180deg, #faf8ff 0%, #f2edff 100%) !important; border-color: #d5c8fa !important; color: #6543c3 !important; box-shadow: 0 2px 7px rgba(101, 67, 195, 0.08) !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--fast-tracked .vip-bundle-modern-priority-icon, .vip-bundle-modern-priority--fast-tracked .vip-bundle-modern-priority-icon { color: #7250ca !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--free-fast-tracked, .vip-bundle-modern-priority--free-fast-tracked { background: linear-gradient(180deg, #f5fbff 0%, #eaf5ff 100%) !important; border-color: #bfdcf4 !important; color: #246b9f !important; box-shadow: 0 2px 7px rgba(36, 107, 159, 0.08) !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--free-fast-tracked .vip-bundle-modern-priority-icon, .vip-bundle-modern-priority--free-fast-tracked .vip-bundle-modern-priority-icon { color: #2a78b1 !important; } @media (max-width: 767px) { .vip-bundle-modern-price--per-vial-only .vip-bundle-modern-per-vial-price { font-size: 22px !important; } .vip-bundle-modern-price--per-vial-only .vip-bundle-modern-per-vial-label { font-size: 10px !important; } .vip-bundle-total-summary-current, .vip-bundle-total-summary-regular { font-size: 12px !important; } .vip-bundle-modern-off-badge { min-height: 20px !important; padding: 3px 6px !important; font-size: 10px !important; } } /* ========================================================= * FINAL VISUAL REFINEMENTS v1.9.17 * Requested-only overrides: * - stronger/darker shipping badge backgrounds * - Free 2 day shipping uses exact #FFD11A * - larger, lighter-weight per-vial price + larger label * - larger total/crossed prices * - larger OFF badge with exact #FFD11A background * - bundle tag locked to top-right corner * ======================================================= */ /* Right-side per-vial amount: larger but less heavy. */ .vip-bundle-modern-price--per-vial-only .vip-bundle-modern-per-vial-price { font-size: 31px !important; line-height: 0.98 !important; font-weight: 600 !important; letter-spacing: -0.025em !important; color: #071426 !important; } .vip-bundle-modern-price--per-vial-only .vip-bundle-modern-per-vial-label { margin-top: 4px !important; font-size: 13px !important; line-height: 1 !important; font-weight: 500 !important; letter-spacing: 0 !important; color: #667085 !important; } /* Increase both the live total and crossed regular total below the title. */ .vip-bundle-total-summary-current, .vip-bundle-total-summary-regular { font-size: 15px !important; line-height: 1.1 !important; } .vip-bundle-total-summary-current { font-weight: 600 !important; color: #596579 !important; } .vip-bundle-total-summary-current small { font-size: 13px !important; font-weight: 500 !important; color: #78869a !important; } .vip-bundle-total-summary-regular { font-weight: 600 !important; color: #9ca8b8 !important; text-decoration-color: #9ca8b8 !important; text-decoration-thickness: 1.5px !important; } /* Savings badge: stronger yellow and larger/readable text. */ .vip-bundle-modern-off-badge { min-height: 26px !important; margin-left: 5px !important; padding: 5px 10px !important; border: 1px solid #e6bb00 !important; border-radius: 6px !important; background: #ffd11a !important; box-shadow: 0 3px 8px rgba(153, 119, 0, 0.16) !important; font-size: 13px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: 0.01em !important; color: #332900 !important; } /* MOST POPULAR / BEST VALUE tag: keep it exactly at the card's top-right. */ .vip-bundle-card--modern .vip-bundle-modern-tag { top: -11px !important; right: 12px !important; left: auto !important; transform: none !important; z-index: 9 !important; } /* Strong premium shipping colors — every option is visually distinct. */ .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--free-2-day, .vip-bundle-modern-priority--free-2-day { background: #ffd11a !important; border-color: #e6bb00 !important; color: #302700 !important; box-shadow: 0 4px 10px rgba(153, 119, 0, 0.18) !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--free-2-day .vip-bundle-modern-priority-icon, .vip-bundle-modern-priority--free-2-day .vip-bundle-modern-priority-icon { color: #302700 !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--fast-tracked, .vip-bundle-modern-priority--fast-tracked { background: #2a6ef5 !important; border-color: #1f5bd8 !important; color: #ffffff !important; box-shadow: 0 4px 10px rgba(42, 110, 245, 0.22) !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--fast-tracked .vip-bundle-modern-priority-icon, .vip-bundle-modern-priority--fast-tracked .vip-bundle-modern-priority-icon { color: #ffffff !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--free-fast-tracked, .vip-bundle-modern-priority--free-fast-tracked { background: #0f8f78 !important; border-color: #0b735f !important; color: #ffffff !important; box-shadow: 0 4px 10px rgba(15, 143, 120, 0.22) !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--free-fast-tracked .vip-bundle-modern-priority-icon, .vip-bundle-modern-priority--free-fast-tracked .vip-bundle-modern-priority-icon { color: #ffffff !important; } /* Keep all three shipping pills consistent in typography. */ .vip-bundle-card--modern .vip-bundle-modern-priority { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.005em !important; } @media (max-width: 767px) { .vip-bundle-modern-price--per-vial-only .vip-bundle-modern-per-vial-price { font-size: 27px !important; font-weight: 600 !important; } .vip-bundle-modern-price--per-vial-only .vip-bundle-modern-per-vial-label { margin-top: 3px !important; font-size: 12px !important; } .vip-bundle-total-summary-current, .vip-bundle-total-summary-regular { font-size: 14px !important; } .vip-bundle-total-summary-current small { font-size: 12px !important; } .vip-bundle-modern-off-badge { min-height: 24px !important; padding: 4px 8px !important; font-size: 12px !important; } .vip-bundle-card--modern .vip-bundle-modern-tag { top: -10px !important; right: 10px !important; } } /* ========================================================= v1.9.18 — FINAL SHIPPING PALETTE Matches the blue/mint bundle cards; all 3 shipping types stay distinct. ========================================================= */ .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--free-2-day, .vip-bundle-modern-priority--free-2-day { background: #ffd11a !important; border-color: #e6bb00 !important; color: #302700 !important; box-shadow: 0 4px 10px rgba(153, 119, 0, 0.18) !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--free-2-day .vip-bundle-modern-priority-icon, .vip-bundle-modern-priority--free-2-day .vip-bundle-modern-priority-icon { color: #302700 !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--fast-tracked, .vip-bundle-modern-priority--fast-tracked { background: #2a6ef5 !important; border-color: #1f5bd8 !important; color: #ffffff !important; box-shadow: 0 4px 10px rgba(42, 110, 245, 0.20) !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--fast-tracked .vip-bundle-modern-priority-icon, .vip-bundle-modern-priority--fast-tracked .vip-bundle-modern-priority-icon { color: #ffffff !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--free-fast-tracked, .vip-bundle-modern-priority--free-fast-tracked { background: #0f8f78 !important; border-color: #0b735f !important; color: #ffffff !important; box-shadow: 0 4px 10px rgba(15, 143, 120, 0.20) !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--free-fast-tracked .vip-bundle-modern-priority-icon, .vip-bundle-modern-priority--free-fast-tracked .vip-bundle-modern-priority-icon { color: #ffffff !important; } /* ========================================================= v1.9.20 — FAST TRACKED SHIPPING COLOR ONLY Premium ocean-blue gradient; all other styles remain unchanged. ========================================================= */ .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--fast-tracked, .vip-bundle-modern-priority--fast-tracked { background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 52%, #0ea5e9 100%) !important; border-color: #1d4ed8 !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.24) !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--fast-tracked .vip-bundle-modern-priority-icon, .vip-bundle-modern-priority--fast-tracked .vip-bundle-modern-priority-icon { color: #ffffff !important; } /* ========================================================= v1.9.20 — FINAL LIGHT SHIPPING GRADIENTS No blue shipping backgrounds. Screenshot-style soft gradients. ========================================================= */ .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority, .vip-bundle-modern-priority { border-width: 1px !important; border-style: solid !important; box-shadow: 0 3px 9px rgba(15, 23, 42, 0.055) !important; } /* Free 2 day shipping — light yellow gradient based on #FFD11A */ .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--free-2-day, .vip-bundle-modern-priority--free-2-day { background: linear-gradient(100deg, #fffef7 0%, #fff9d7 52%, #ffef9b 100%) !important; border-color: #f0da6a !important; color: #6f5900 !important; box-shadow: 0 3px 9px rgba(183, 143, 0, 0.10) !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--free-2-day .vip-bundle-modern-priority-icon, .vip-bundle-modern-priority--free-2-day .vip-bundle-modern-priority-icon { color: #c79e00 !important; } /* Fast tracked shipping — exact requested #0EC9A4 family, NO BLUE */ .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--fast-tracked, .vip-bundle-modern-priority--fast-tracked { background: linear-gradient(100deg, #f8fffd 0%, #eafbf7 52%, #cdf4eb 100%) !important; border-color: #a7e7da !important; color: #087965 !important; box-shadow: 0 3px 9px rgba(14, 201, 164, 0.11) !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--fast-tracked .vip-bundle-modern-priority-icon, .vip-bundle-modern-priority--fast-tracked .vip-bundle-modern-priority-icon { color: #0ec9a4 !important; } /* Free fast tracked shipping — warm premium peach, kept distinct and NO BLUE */ .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--free-fast-tracked, .vip-bundle-modern-priority--free-fast-tracked { background: linear-gradient(100deg, #fffaf8 0%, #fff0e9 52%, #ffdfd1 100%) !important; border-color: #f3c7b5 !important; color: #a44930 !important; box-shadow: 0 3px 9px rgba(226, 101, 66, 0.10) !important; } .vip-bundle-card--modern.vip-bundle-card--has-priority .vip-bundle-modern-priority.vip-bundle-modern-priority--free-fast-tracked .vip-bundle-modern-priority-icon, .vip-bundle-modern-priority--free-fast-tracked .vip-bundle-modern-priority-icon { color: #df6949 !important; } /* ========================================================= TAG COLOR FIX — saved bundle badge colors always win. No layout, sizing, pricing, shipping, or card styles changed. ========================================================= */ .vip-bundle-card--modern .vip-bundle-modern-tag, .vip-bundle-card--modern.active .vip-bundle-modern-tag { background-color: var(--vip-bundle-tag-bg, #0ec9a4) !important; color: var(--vip-bundle-tag-text, #ffffff) !important; border: none !important; outline: none !important; } /* ========================================================= QUANTITY ICON FIX — internal CSS icons, no external images. Keeps the existing quantity size/layout/functionality unchanged. ========================================================= */ .vip-quantity-custom .vip-qty-btn { position: relative !important; background-image: none !important; background-color: transparent !important; flex: 0 0 28px !important; min-width: 28px !important; } .vip-quantity-custom .vip-qty-minus::before, .vip-quantity-custom .vip-qty-plus::before, .vip-quantity-custom .vip-qty-plus::after { content: "" !important; position: absolute !important; display: block !important; left: 50% !important; top: 50% !important; background: #000000 !important; border: 0 !important; border-radius: 1px !important; opacity: 1 !important; visibility: visible !important; pointer-events: none !important; box-sizing: border-box !important; z-index: 2 !important; } .vip-quantity-custom .vip-qty-minus::before, .vip-quantity-custom .vip-qty-plus::before { width: 14px !important; height: 2px !important; transform: translate(-50%, -50%) !important; } .vip-quantity-custom .vip-qty-plus::after { width: 2px !important; height: 14px !important; transform: translate(-50%, -50%) !important; } /* ========================================================= v1.9.26 — REQUESTED PRICE/OFF SPACING ONLY Separate flex children guarantee visible spacing even when Woo price markup and theme whitespace handling collapse adjacent text nodes. ========================================================= */ .vip-bundle-total-summary-current { gap: 5px !important; } .vip-bundle-modern-off-badge { gap: 5px !important; } .vip-bundle-total-summary-value, .vip-bundle-modern-off-value, .vip-bundle-modern-off-text { display: inline-flex !important; align-items: baseline !important; } /* ========================================================= v1.9.27 — FINAL HIDDEN-TIER PROXY REFINEMENTS Title reads exactly “Buy 4+ Get 2 Free”; OFF badge keeps its own spacing. Shipping change is background-only; layout/text/icons remain untouched. ========================================================= */ .vip-bundle-modern-title--hidden-tier-proxy { gap: 0 !important; } .vip-bundle-modern-title--hidden-tier-proxy .vip-bundle-modern-off-badge { margin-left: 5px !important; } .vip-bundle-modern-priority--free-2-day { background: #ffd11a !important; } .vip-bundle-modern-priority--fast-tracked { background: #bff4e9 !important; } .vip-bundle-modern-priority--free-fast-tracked { background: #ffe0d2 !important; } /* ========================================================= v1.9.28 — BEST VALUE + HIDDEN SUMMARY FREEZE Best Value proxy badge only: red background. ========================================================= */ .vip-bundle-card--modern.vip-bundle-card--best-value-proxy > .vip-bundle-modern-tag, .vip-bundle-card--modern.vip-bundle-card--best-value-proxy.active > .vip-bundle-modern-tag { background-color: #ff3737 !important; color: #ffffff !important; }