/* ===================================================== Enviro Blocks — Product Page CSS Simple Custom CSS and JS → Add Custom CSS → In Footer FIXED IN THIS VERSION: 1. Price showed the $79.99–$229.99 range instead of the selected pack price. Cause: :not(.product-type-variable) was tested against , but that class sits on the product div, so the rule always matched. 2. --line was used 5× but never defined, so the trust-badge and video borders silently disappeared. 3. A comment had been pasted into the middle of a selector, breaking the calculator's "has-result" styling and duplicating a rule. 4. Mobile: the product image appeared BELOW the buy buttons. 5. Mobile: the three tab labels overlapped each other. 6. The video appeared twice (large slab + compact row). 7. Large dead gaps above the tabs. ===================================================== */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap'); /* ── VARIABLES ── */ body.single-product { --green: #1c3d22; --green-2: #2a5533; --green-lt: #e6efe7; --ink: #0d0d0d; --ink-60: rgba(13,13,13,.82); --ink-30: rgba(13,13,13,.58); --ink-10: rgba(13,13,13,.1); --ink-06: rgba(13,13,13,.06); --ink-03: rgba(13,13,13,.03); --gold: #d4a017; --r8: 8px; --r12: 12px; --r20: 20px; --ease: cubic-bezier(.4,0,.2,1); --line: rgba(13,13,13,.1); } /* ── FONT ── */ body.single-product, body.single-product h1, body.single-product h2, body.single-product h3, body.single-product p, body.single-product span, body.single-product a, body.single-product button, body.single-product input, body.single-product select, body.single-product label, body.single-product td, body.single-product th, body.single-product li, body.single-product .elementor-widget-container, body.single-product .elementor-heading-title { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; -webkit-font-smoothing: antialiased !important; } /* ── BREADCRUMB ── */ body.single-product .woocommerce-breadcrumb { font-size: 14px !important; font-weight: 300 !important; color: rgba(13,13,13,.35) !important; padding: 16px 0 !important; margin-bottom: 0 !important; border-bottom: 1px solid rgba(13,13,13,.07) !important; } body.single-product .woocommerce-breadcrumb a { color: rgba(13,13,13,.45) !important; text-decoration: none !important; transition: color .15s !important; } body.single-product .woocommerce-breadcrumb a:hover { color: #1c3d22 !important; } /* ── GALLERY ── */ /* Gallery fills its column — unlock ONLY the outer wrappers. ⚠ Never force widths on .flex-viewport or .woocommerce-product-gallery__wrapper: they belong to FlexSlider, which sets its own inline pixel widths and animates the wrapper with transforms. Overriding them breaks the carousel (blank main image, thumbnails do nothing). */ body.single-product .elementor-widget-woocommerce-product-images, body.single-product .elementor-widget-woocommerce-product-images > .elementor-widget-container, body.single-product .woocommerce-product-gallery { width: 100% !important; max-width: 100% !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important; } body.single-product .woocommerce-product-gallery { position: relative !important; /* FlexSlider positions within this */ margin: 0 !important; } body.single-product .woocommerce-product-gallery__image { background: #f7f6f4 !important; border-radius: var(--r20) !important; overflow: hidden !important; position: relative !important; } /* Shimmer sweep on hover */ body.single-product .woocommerce-product-gallery__image::before { content: '' !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.15) 50%, transparent 65%) !important; transform: translateX(-100%) !important; transition: transform 0s !important; pointer-events: none !important; } body.single-product .woocommerce-product-gallery__image:hover::before { transform: translateX(200%) !important; transition: transform .6s ease-out !important; } body.single-product .woocommerce-product-gallery__image img { width: 100% !important; aspect-ratio: 1 !important; object-fit: cover !important; display: block !important; transition: transform .65s var(--ease), filter .4s var(--ease) !important; } body.single-product .woocommerce-product-gallery__image:hover img { transform: scale(1.05) !important; filter: brightness(1.03) saturate(1.08) !important; } /* Thumbnails */ body.single-product .flex-control-thumbs { display: flex !important; gap: 10px !important; padding: 0 !important; list-style: none !important; margin-top: 14px !important; flex-wrap: wrap !important; /* Centre EVERY row. justify-content centres each flex line individually, so the full row and the short row both sit centred — but it only has room to work if the list spans the gallery, hence width:100%. Without that the list sizes to its content and the whole block hugs the left. */ justify-content: center !important; width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } body.single-product .flex-control-thumbs li { width: 80px !important; height: 80px !important; flex: 0 0 auto !important; } body.single-product .flex-control-thumbs li img { width: 80px !important; height: 80px !important; object-fit: cover !important; border-radius: var(--r8) !important; border: 2px solid transparent !important; opacity: 0.55 !important; cursor: pointer !important; background: #f7f6f4 !important; display: block !important; transition: all .2s var(--ease) !important; } body.single-product .flex-control-thumbs li img.flex-active, body.single-product .flex-control-thumbs li img:hover { border-color: #1c3d22 !important; opacity: 1 !important; } /* ── PRODUCT HIGHLIGHTS ── */ /* ── HIGHLIGHTS — full-width horizontal band ────────────────────────── A separate row spanning the page, below the buy column and gallery: 6 cards across on wide screens, 3 across on laptops, 2 on phones. */ .eb-highlights { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 10px !important; width: 100% !important; clear: both !important; margin: 36px auto 8px !important; /* centred inside the full-width parent */ border: none !important; border-radius: 0 !important; overflow: visible !important; font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; background: transparent !important; } @media (max-width: 1100px) { .eb-highlights { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } .eb-hl-item { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; padding: 14px !important; background: #fff !important; border: 1px solid rgba(13,13,13,.1) !important; border-radius: var(--r12) !important; border-bottom: 1px solid rgba(13,13,13,.1) !important; transition: border-color .2s, box-shadow .2s !important; min-width: 0 !important; box-sizing: border-box !important; } .eb-hl-item:last-child { border-bottom: 1px solid rgba(13,13,13,.1) !important; } .eb-hl-item:hover { background: #fff !important; border-color: rgba(28,61,34,.25) !important; box-shadow: 0 4px 14px rgba(0,0,0,.05) !important; } .eb-hl-icon { width: 30px !important; height: 30px !important; border-radius: 9px !important; background: #e6efe7 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .eb-hl-icon svg { width: 15px !important; height: 15px !important; stroke: #1c3d22 !important; fill: none !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } .eb-hl-title { font-size: 14px !important; font-weight: 600 !important; color: #0d0d0d !important; line-height: 1.2 !important; } .eb-hl-body { font-size: 12px !important; font-weight: 300 !important; color: rgba(13,13,13,.45) !important; line-height: 1.4 !important; margin-top: 1px !important; } /* ── RATING ── */ body.single-product .woocommerce-product-rating { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 4px !important; } body.single-product .star-rating { overflow: hidden !important; position: relative !important; height: 1em !important; line-height: 1 !important; font-size: 14px !important; width: 5.4em !important; font-family: 'star' !important; } body.single-product .star-rating::before { content: '\2605\2605\2605\2605\2605' !important; color: rgba(13,13,13,.15) !important; float: left !important; position: absolute !important; top: 0 !important; left: 0 !important; letter-spacing: 0.1em !important; } body.single-product .star-rating span { overflow: hidden !important; float: left !important; position: absolute !important; top: 0 !important; left: 0 !important; padding-top: 1.5em !important; } body.single-product .star-rating span::before { content: '\2605\2605\2605\2605\2605' !important; position: absolute !important; top: 0 !important; left: 0 !important; color: #d4a017 !important; letter-spacing: 0.1em !important; } body.single-product a.woocommerce-review-link { font-size: 14px !important; font-weight: 300 !important; color: rgba(13,13,13,.4) !important; text-decoration: none !important; border-bottom: none !important; padding-bottom: 0 !important; transition: color .15s, border-color .15s !important; } body.single-product a.woocommerce-review-link:hover { color: #1c3d22 !important; border-color: #1c3d22 !important; } /* ── TITLE ── */ body.single-product h1.product_title { font-size: clamp(1.4rem, 2.8vw, 2rem) !important; font-weight: 300 !important; letter-spacing: -0.025em !important; line-height: 1.2 !important; color: #0d0d0d !important; margin: 0 0 8px !important; white-space: normal !important; word-break: break-word !important; overflow-wrap: break-word !important; padding-bottom: 2px !important; } body.single-product h1.product_title strong { font-weight: 600 !important; } /* ── PRICE — hide the range, show the selected variation's price ── NOTE: "product-type-variable" is a class on the PRODUCT DIV, not on . The old rules used body.single-product:not(.product-type-variable) which ALWAYS matched, so the $79.99 – $229.99 range was forced back on. */ /* Variable products: hide the range */ body.single-product .product-type-variable p.price, body.single-product .product-type-variable span.price, body.single-product .elementor-widget-woocommerce-product-price p.price { display: none !important; } /* Variable products: show WooCommerce's live variation price */ body.single-product div.woocommerce-variation.single_variation { display: block !important; margin: 0 0 10px !important; } body.single-product .woocommerce-variation-description, body.single-product .woocommerce-variation-availability:empty { display: none !important; } body.single-product .woocommerce-variation-price { padding: 0 !important; border: none !important; margin: 2px 0 14px !important; } body.single-product .woocommerce-variation-price .price, body.single-product .woocommerce-variation-price span.price { display: block !important; font-size: 1.9rem !important; font-weight: 300 !important; letter-spacing: -0.03em !important; color: #0d0d0d !important; line-height: 1.1 !important; padding: 0 !important; border: none !important; margin: 0 !important; } body.single-product .woocommerce-variation-price .woocommerce-price-suffix { font-size: 16px !important; font-weight: 300 !important; color: rgba(13,13,13,.45) !important; } /* Simple products (no variations): style their single price */ body.single-product .product:not(.product-type-variable) p.price, body.single-product .product:not(.product-type-variable) span.price { display: block !important; font-size: 1.9rem !important; font-weight: 300 !important; letter-spacing: -0.03em !important; color: #0d0d0d !important; line-height: 1.1 !important; padding: 4px 0 !important; border: none !important; margin: 0 0 8px !important; } body.single-product p.price ins, body.single-product span.price ins { text-decoration: none !important; } body.single-product p.price del, body.single-product span.price del { font-size: 16px !important; color: rgba(13,13,13,.45) !important; opacity: 1 !important; margin-right: 8px !important; } /* ── SHORT DESCRIPTION ── */ body.single-product .woocommerce-product-details__short-description { margin-bottom: 24px !important; border: none !important; } body.single-product .woocommerce-product-details__short-description p, body.single-product .woocommerce-product-details__short-description li { font-size: 16px !important; font-weight: 300 !important; color: rgba(13,13,13,.75) !important; line-height: 1.65 !important; margin-bottom: 4px !important; } body.single-product .woocommerce-product-details__short-description strong { font-weight: 600 !important; color: #0d0d0d !important; } /* Plugin discount table in short description — hide it, we have our own */ body.single-product .woocommerce-product-details__short-description table { display: none !important; } /* ── CUSTOM DISCOUNT TABLE ── */ .eb-discount-table { width: 100% !important; border: 1px solid rgba(13,13,13,.1) !important; border-radius: var(--r12) !important; overflow: hidden !important; margin-bottom: 18px !important; font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; } .eb-dt-header { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; background: rgba(13,13,13,.04) !important; border-bottom: 1px solid rgba(13,13,13,.1) !important; } .eb-dt-header .eb-dt-cell { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: rgba(13,13,13,.35) !important; padding: 9px 14px !important; } .eb-dt-row { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; border-bottom: 1px solid rgba(13,13,13,.06) !important; transition: background .25s !important; } .eb-dt-row:last-child { border-bottom: none !important; } .eb-dt-row .eb-dt-cell { font-size: 14px !important; font-weight: 300 !important; color: rgba(13,13,13,.75) !important; padding: 10px 14px !important; } .eb-dt-row .eb-dt-price { font-weight: 400 !important; color: #0d0d0d !important; } .eb-dt-row.active { background: #e6efe7 !important; border-color: rgba(28,61,34,.1) !important; } .eb-dt-row.active .eb-dt-cell { color: #1c3d22 !important; font-weight: 600 !important; } .eb-dt-row.active .eb-dt-cell:first-child::before { content: '✓ ' !important; font-weight: 600 !important; } .eb-dt-badge { display: inline-block !important; background: #1c3d22 !important; color: #fff !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; padding: 2px 7px !important; border-radius: 10px !important; margin-left: 6px !important; vertical-align: middle !important; animation: ebPop .25s cubic-bezier(.4,0,.2,1) !important; } @keyframes ebPop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } .eb-dt-note { font-size: 12px !important; font-weight: 300 !important; color: rgba(13,13,13,.35) !important; padding: 8px 14px !important; background: rgba(13,13,13,.02) !important; border-top: 1px solid rgba(13,13,13,.06) !important; font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-style: italic !important; } /* ── VARIATIONS ── */ /* ── BUY BLOCK: one clean vertical flow ────────────────────────────── Pack size → price → (qty + Add to Cart) on one row. The old 50/50 side-by-side split pushed the price into a floating corner and vertically centred mismatched columns — this is what made the section look scrambled on both desktop and mobile. */ body.single-product form.variations_form { display: block !important; width: 100% !important; position: relative !important; z-index: 5 !important; } body.single-product table.variations, body.single-product form.variations_form table.variations { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; border: none !important; border-collapse: collapse !important; margin: 0 0 14px !important; table-layout: fixed !important; background: transparent !important; } body.single-product div.single_variation_wrap { display: block !important; width: 100% !important; min-width: 0 !important; } /* Quantity above, Add to Cart spanning the full column width */ body.single-product div.woocommerce-variation-add-to-cart { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; width: 100% !important; } body.single-product table.variations tbody, body.single-product table.variations tr, body.single-product table.variations td, body.single-product table.variations th { display: block !important; width: 100% !important; max-width: 100% !important; border: none !important; padding: 0 !important; box-sizing: border-box !important; background: transparent !important; /* kills the grey stripe behind the label */ } body.single-product table.variations th.label { margin-bottom: 6px !important; } body.single-product table.variations th.label label { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: rgba(13,13,13,.35) !important; display: block !important; } body.single-product table.variations td.value { margin-bottom: 10px !important; } body.single-product table.variations select { font-size: 14px !important; font-weight: 300 !important; color: #0d0d0d !important; background: #f7f6f4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center !important; border: 1px solid rgba(13,13,13,.12) !important; border-radius: var(--r8) !important; padding: 10px 34px 10px 14px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 46px !important; padding-top: 12px !important; padding-bottom: 12px !important; line-height: 1.4 !important; outline: none !important; -webkit-appearance: none !important; box-sizing: border-box !important; cursor: pointer !important; transition: border-color .15s, box-shadow .15s !important; } body.single-product table.variations select:focus { border-color: #1c3d22 !important; box-shadow: 0 0 0 3px rgba(28,61,34,.08) !important; background-color: #fff !important; } /* "Clear" reset link hidden — with one attribute it only adds clutter. (Changing pack size in the dropdown does the same job.) */ body.single-product .reset_variations { display: none !important; } /* ── QUANTITY STEPPER ── */ body.single-product form.cart { display: flex !important; gap: 10px !important; align-items: center !important; margin-bottom: 12px !important; flex-wrap: nowrap !important; min-width: 0 !important; width: 100% !important; box-sizing: border-box !important; } body.single-product .eb-qty-wrap, body.single-product form.cart .quantity { align-self: flex-start !important; display: flex !important; align-items: center !important; border: 1px solid rgba(13,13,13,.15) !important; border-radius: var(--r8) !important; background: #fff !important; height: 52px !important; width: 130px !important; min-width: 130px !important; flex-shrink: 0 !important; overflow: visible !important; position: relative !important; box-sizing: border-box !important; } body.single-product .eb-qty-btn { width: 34px !important; height: 46px !important; flex-shrink: 0 !important; flex-grow: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: none !important; border: none !important; cursor: pointer !important; color: rgba(13,13,13,.4) !important; transition: background .15s, color .15s !important; padding: 0 !important; position: relative !important; z-index: 1 !important; -webkit-appearance: none !important; touch-action: manipulation !important; } body.single-product .eb-qty-btn:hover { background: rgba(13,13,13,.04) !important; color: #0d0d0d !important; } body.single-product .eb-qty-minus { border-right: 1px solid rgba(13,13,13,.1) !important; } body.single-product .eb-qty-plus { border-left: 1px solid rgba(13,13,13,.1) !important; } body.single-product form.cart .quantity input.qty { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 46px !important; line-height: 46px !important; text-align: center !important; border: none !important; outline: none !important; font-size: 16px !important; font-weight: 600 !important; color: #0d0d0d !important; background: #fff !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; -webkit-appearance: textfield !important; opacity: 1 !important; display: block !important; flex: 1 !important; } body.single-product form.cart .quantity input.qty::-webkit-inner-spin-button, body.single-product form.cart .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; } /* ── ADD TO CART ── */ body.single-product form.cart .single_add_to_cart_button { flex: none !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 52px !important; background: #1c3d22 !important; color: #fff !important; border: none !important; border-radius: var(--r8) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: .02em !important; cursor: pointer !important; transition: background .2s var(--ease), transform .2s, box-shadow .2s !important; text-transform: none !important; padding: 0 16px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } body.single-product form.cart .single_add_to_cart_button:hover { background: #2a5533 !important; transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(28,61,34,.3) !important; } /* ── RUNNING TOTAL ── */ .eb-running-total { margin-top: 10px !important; border-radius: var(--r8) !important; overflow: hidden !important; border: 1px solid rgba(13,13,13,.1) !important; transition: all .3s !important; } .eb-total-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 11px 16px !important; background: rgba(13,13,13,.03) !important; transition: background .3s !important; } .eb-running-total.has-total .eb-total-inner { background: #e6efe7 !important; } .eb-running-total.has-total { border-color: rgba(28,61,34,.2) !important; } .eb-total-label { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: rgba(13,13,13,.35) !important; } .eb-running-total.has-total .eb-total-label { color: rgba(28,61,34,.6) !important; } .eb-total-value { font-size: 1.3rem !important; font-weight: 300 !important; letter-spacing: -0.03em !important; color: #0d0d0d !important; transition: color .3s !important; } .eb-running-total.has-total .eb-total-value { color: #1c3d22 !important; } .eb-total-gst { font-size: 12px !important; font-weight: 300 !important; color: rgba(13,13,13,.45) !important; } .eb-running-total.has-total .eb-total-gst { color: rgba(28,61,34,.5) !important; } /* ── PACK CALCULATOR ── */ .eb-pack-calc { margin-top: 12px !important; border: 1px solid rgba(13,13,13,.1) !important; border-radius: var(--r12) !important; overflow: hidden !important; } .eb-calc-header { background: #1c3d22 !important; padding: 15px 20px !important; display: flex !important; align-items: center !important; gap: 14px !important; } .eb-calc-icon { width: 36px !important; height: 36px !important; border-radius: var(--r8) !important; background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.2) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; color: #fff !important; } .eb-calc-title { font-size: 14px !important; font-weight: 600 !important; color: #fff !important; line-height: 1.2 !important; } .eb-calc-sub { font-size: 12px !important; font-weight: 300 !important; color: rgba(255,255,255,.55) !important; margin-top: 2px !important; } .eb-calc-body { padding: 18px !important; background: #fff !important; } .eb-calc-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin-bottom: 14px !important; } .eb-calc-field label { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: rgba(13,13,13,.35) !important; display: block !important; margin-bottom: 4px !important; } .eb-calc-field input { width: 100% !important; padding: 10px 13px !important; border: 1px solid rgba(13,13,13,.12) !important; border-radius: var(--r8) !important; font-size: 14px !important; font-weight: 300 !important; color: #0d0d0d !important; background: #f7f6f4 !important; outline: none !important; transition: border-color .15s, box-shadow .15s !important; -webkit-appearance: none !important; } .eb-calc-field input:focus { border-color: #1c3d22 !important; box-shadow: 0 0 0 3px rgba(28,61,34,.08) !important; background: #fff !important; } .eb-calc-result { background: rgba(13,13,13,.03) !important; border: 1px solid rgba(13,13,13,.1) !important; border-radius: var(--r8) !important; padding: 13px 16px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; transition: all .3s !important; } .eb-calc-result.has-result { background: #e6efe7 !important; border-color: rgba(28,61,34,.2) !important; } .eb-calc-result-label { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: rgba(13,13,13,.45) !important; margin-bottom: 3px !important; } .eb-calc-result.has-result .eb-calc-result-label { color: rgba(28,61,34,.6) !important; } /* ── Calculator price display ── */ .eb-calc-price { display: block !important; font-size: 1.3rem !important; font-weight: 600 !important; color: #1c3d22 !important; letter-spacing: -.02em !important; margin-top: 4px !important; } .eb-calc-result-val { font-size: 16px !important; font-weight: 400 !important; color: #0d0d0d !important; line-height: 1.3 !important; } .eb-calc-result.has-result .eb-calc-result-val { color: #1c3d22 !important; font-weight: 600 !important; } .eb-calc-result-note { font-size: 12px !important; font-weight: 300 !important; color: rgba(13,13,13,.35) !important; margin-top: 3px !important; line-height: 1.4 !important; } .eb-calc-result.has-result .eb-calc-result-note { color: rgba(28,61,34,.55) !important; } .eb-calc-cta { display: none !important; align-items: center !important; gap: 6px !important; height: 34px !important; padding: 0 14px !important; background: #1c3d22 !important; color: #fff !important; border: none !important; border-radius: var(--r8) !important; font-size: 12px !important; font-weight: 600 !important; cursor: pointer !important; white-space: nowrap !important; flex-shrink: 0 !important; transition: background .15s !important; } .eb-calc-cta:hover { background: #2a5533 !important; } /* ── META ── */ body.single-product .product_meta { font-size: 12px !important; font-weight: 300 !important; color: rgba(13,13,13,.45) !important; border: none !important; padding: 12px 0 0 !important; margin: 0 !important; border-top: 1px solid rgba(13,13,13,.06) !important; } body.single-product .product_meta span, body.single-product .product_meta a { color: rgba(13,13,13,.45) !important; font-size: 12px !important; } /* ── TOAST ── */ .eb-saving-toast { position: fixed !important; bottom: 32px !important; left: 50% !important; transform: translateX(-50%) translateY(20px) !important; background: #1c3d22 !important; color: #fff !important; font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; padding: 12px 24px !important; border-radius: 24px !important; box-shadow: 0 8px 32px rgba(28,61,34,.35) !important; opacity: 0 !important; transition: opacity .3s, transform .3s !important; z-index: 9999 !important; pointer-events: none !important; white-space: nowrap !important; } .eb-saving-toast.show { opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; } /* ── TABS ── */ body.single-product .woocommerce-tabs { grid-column: 1 / -1 !important; margin-top: 24px !important; clear: both !important; } body.single-product .woocommerce-tabs ul.tabs { display: flex !important; background: rgba(13,13,13,.03) !important; border-radius: 12px 12px 0 0 !important; border-bottom: 2px solid rgba(13,13,13,.1) !important; padding: 0 8px !important; margin: 0 !important; list-style: none !important; } body.single-product .woocommerce-tabs ul.tabs::before, body.single-product .woocommerce-tabs ul.tabs li::before, body.single-product .woocommerce-tabs ul.tabs li::after { display: none !important; content: none !important; } body.single-product .woocommerce-tabs ul.tabs li { background: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; float: none !important; } body.single-product .woocommerce-tabs ul.tabs li a { font-size: 14px !important; font-weight: 400 !important; color: rgba(13,13,13,.45) !important; padding: 14px 20px !important; display: block !important; position: relative !important; border: none !important; background: none !important; border-radius: 8px 8px 0 0 !important; transition: color .15s, background .15s !important; letter-spacing: .01em !important; } body.single-product .woocommerce-tabs ul.tabs li a:hover { color: #0d0d0d !important; background: rgba(13,13,13,.04) !important; } body.single-product .woocommerce-tabs ul.tabs li.active a { color: #1c3d22 !important; font-weight: 600 !important; background: #fff !important; box-shadow: 0 -2px 8px rgba(0,0,0,.04) !important; } body.single-product .woocommerce-tabs ul.tabs li.active { background: none !important; border: none !important; } body.single-product .woocommerce-tabs ul.tabs li.active a::after { content: '' !important; position: absolute !important; bottom: -2px !important; left: 0 !important; right: 0 !important; height: 2px !important; background: #1c3d22 !important; display: block !important; } body.single-product .woocommerce-tabs .panel { padding: 24px 0 !important; border: none !important; background: none !important; margin: 0 !important; } /* Hide duplicate headings WooCommerce outputs inside panels */ body.single-product .woocommerce-tabs #tab-description h2:first-child, body.single-product #tab-additional_information h2 { display: none !important; } body.single-product .woocommerce-tabs .panel p, body.single-product .woocommerce-tabs .panel li { font-size: 16px !important; font-weight: 300 !important; color: rgba(13,13,13,.65) !important; line-height: 1.65 !important; margin-bottom: 10px !important; } body.single-product .woocommerce-tabs .panel strong { font-weight: 600 !important; color: #0d0d0d !important; } body.single-product .woocommerce-tabs .panel h2 { font-size: 16px !important; font-weight: 600 !important; color: #0d0d0d !important; margin: 0 0 12px !important; letter-spacing: -.01em !important; } /* Additional info table */ body.single-product #tab-additional_information table.shop_attributes { width: 100% !important; border-collapse: collapse !important; border: 1px solid rgba(13,13,13,.1) !important; border-radius: var(--r8) !important; overflow: hidden !important; font-size: 14px !important; } body.single-product #tab-additional_information table.shop_attributes th { background: rgba(13,13,13,.04) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: rgba(13,13,13,.35) !important; padding: 11px 16px !important; text-align: left !important; border-bottom: 1px solid rgba(13,13,13,.08) !important; width: 35% !important; } body.single-product #tab-additional_information table.shop_attributes td { padding: 11px 16px !important; font-weight: 300 !important; color: rgba(13,13,13,.65) !important; border-bottom: 1px solid rgba(13,13,13,.06) !important; } body.single-product #tab-additional_information table.shop_attributes tr:last-child th, body.single-product #tab-additional_information table.shop_attributes tr:last-child td { border-bottom: none !important; } /* ── REVIEWS ── */ body.single-product #reviews { clear: both !important; width: 100% !important; } body.single-product #reviews h2 { font-size: 1.3rem !important; font-weight: 300 !important; letter-spacing: -.02em !important; color: #0d0d0d !important; margin-bottom: 24px !important; } body.single-product #reviews #comments { width: 100% !important; float: none !important; } body.single-product #reviews #comments ol.commentlist { list-style: none !important; padding: 0 !important; margin: 0 0 28px !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; width: 100% !important; float: none !important; } body.single-product #reviews #comments ol.commentlist li.comment { background: #fff !important; border: 1px solid rgba(13,13,13,.1) !important; border-radius: var(--r12) !important; padding: 20px !important; margin: 0 !important; width: 100% !important; float: none !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; transition: border-color .25s, box-shadow .25s, transform .25s !important; } body.single-product #reviews #comments ol.commentlist li.comment:hover { border-color: rgba(28,61,34,.2) !important; box-shadow: 0 6px 24px rgba(0,0,0,.07) !important; transform: translateY(-2px) !important; } body.single-product #reviews #comments ol.commentlist li img.avatar { display: none !important; } body.single-product #reviews .comment-text { margin: 0 !important; border: none !important; width: 100% !important; } /* Name + stars row */ body.single-product #reviews .comment-text p.meta { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 8px !important; flex-wrap: nowrap !important; } body.single-product #reviews .comment-text p.meta time { display: none !important; } body.single-product #reviews .woocommerce-review__verified { display: none !important; } body.single-product #reviews .comment-text p.meta strong { font-size: 14px !important; font-weight: 600 !important; color: #0d0d0d !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; flex: 1 !important; } body.single-product #reviews .comment-text .star-rating { margin: 0 !important; flex-shrink: 0 !important; font-size: 12px !important; } /* 3 lines of text */ body.single-product #reviews .comment-text .description p { font-size: 14px !important; font-weight: 300 !important; color: rgba(13,13,13,.75) !important; line-height: 1.65 !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; min-height: 4.95em !important; } /* ── REVIEW FORM ── */ body.single-product #review_form_wrapper { margin-top: 36px !important; padding-top: 28px !important; border-top: 1px solid rgba(13,13,13,.08) !important; } body.single-product #review_form_wrapper h3 { font-size: 1.3rem !important; font-weight: 600 !important; color: #0d0d0d !important; margin-bottom: 20px !important; } body.single-product #review_form input[type="text"], body.single-product #review_form input[type="email"], body.single-product #review_form textarea { font-size: 14px !important; font-weight: 300 !important; color: #0d0d0d !important; border: 1px solid rgba(13,13,13,.15) !important; border-radius: var(--r8) !important; padding: 11px 14px !important; width: 100% !important; outline: none !important; background: #fff !important; transition: border-color .15s, box-shadow .15s !important; } body.single-product #review_form input:focus, body.single-product #review_form textarea:focus { border-color: #1c3d22 !important; box-shadow: 0 0 0 3px rgba(28,61,34,.08) !important; } body.single-product #review_form input#submit { background: #1c3d22 !important; color: #fff !important; border: none !important; border-radius: var(--r8) !important; height: 44px !important; padding: 0 28px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; transition: background .15s !important; } body.single-product #review_form input#submit:hover { background: #2a5533 !important; } /* ── UPSELLS "COMPLETE YOUR ORDER" ── */ body.single-product .upsells.products { padding: 48px 0 !important; border-top: 1px solid rgba(13,13,13,.07) !important; clear: both !important; } body.single-product .upsells.products > h2 { font-size: clamp(1.25rem, 2vw, 1.6rem) !important; font-weight: 300 !important; letter-spacing: -0.02em !important; color: #0d0d0d !important; margin-bottom: 4px !important; } body.single-product .upsells.products > h2::before { content: 'Complete your order' !important; display: block !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .15em !important; text-transform: uppercase !important; color: #1c3d22 !important; margin-bottom: 8px !important; } body.single-product .upsells.products ul.products { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; list-style: none !important; padding: 0 !important; margin: 20px 0 0 !important; } body.single-product .upsells.products ul.products li.product { background: #fff !important; border: 1px solid rgba(13,13,13,.1) !important; border-radius: var(--r12) !important; overflow: hidden !important; transition: all .25s var(--ease) !important; margin: 0 !important; float: none !important; width: 100% !important; padding: 0 !important; display: flex !important; flex-direction: column !important; } body.single-product .upsells.products ul.products li.product:hover { box-shadow: 0 8px 32px rgba(0,0,0,.09) !important; transform: translateY(-3px) !important; border-color: rgba(28,61,34,.18) !important; } body.single-product .upsells.products ul.products li.product a img { width: 100% !important; aspect-ratio: 1 !important; object-fit: contain !important; padding: 16px !important; background: #f7f6f4 !important; display: block !important; transition: transform .5s var(--ease) !important; } body.single-product .upsells.products ul.products li.product:hover a img { transform: scale(1.05) !important; } body.single-product .upsells.products ul.products li.product .woocommerce-loop-product__title { font-size: 14px !important; font-weight: 600 !important; color: #0d0d0d !important; padding: 14px 16px 4px !important; line-height: 1.3 !important; } body.single-product .upsells.products ul.products li.product .price { font-size: 14px !important; font-weight: 300 !important; color: #0d0d0d !important; padding: 2px 16px 12px !important; border: none !important; display: block !important; margin-top: auto !important; } body.single-product .upsells.products ul.products li.product .button, body.single-product .upsells.products ul.products li.product a.button { display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 14px 14px !important; width: calc(100% - 28px) !important; height: 36px !important; background: #1c3d22 !important; color: #fff !important; border-radius: var(--r8) !important; font-size: 14px !important; font-weight: 600 !important; border: none !important; transition: background .15s !important; text-decoration: none !important; } body.single-product .upsells.products ul.products li.product .button:hover { background: #2a5533 !important; } /* ── RELATED PRODUCTS ── */ body.single-product .related.products { grid-column: 1 / -1 !important; padding: 56px 0 !important; clear: both !important; background: rgba(13,13,13,.025) !important; border-top: 1px solid rgba(13,13,13,.07) !important; margin: 0 !important; } body.single-product .related.products > h2 { font-size: clamp(1.25rem, 2vw, 1.6rem) !important; font-weight: 300 !important; letter-spacing: -0.02em !important; color: #0d0d0d !important; margin: 0 auto 24px !important; max-width: 1200px !important; padding: 0 32px !important; } body.single-product .related.products > h2 strong { font-weight: 600 !important; } body.single-product .related.products ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; list-style: none !important; padding: 0 32px !important; margin: 0 auto !important; max-width: 1200px !important; } body.single-product .related.products ul.products li.product { background: #fff !important; border: 1px solid rgba(13,13,13,.1) !important; border-radius: var(--r20) !important; overflow: hidden !important; transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .25s !important; margin: 0 !important; float: none !important; width: 100% !important; padding: 0 !important; } body.single-product .related.products ul.products li.product:hover { box-shadow: 0 8px 40px rgba(0,0,0,.1) !important; transform: translateY(-4px) !important; border-color: rgba(28,61,34,.2) !important; } body.single-product .related.products ul.products li.product a img { width: 100% !important; aspect-ratio: 1 !important; object-fit: cover !important; display: block !important; background: #f7f6f4 !important; transition: transform .65s var(--ease), filter .4s var(--ease) !important; } body.single-product .related.products ul.products li.product:hover a img { transform: scale(1.05) !important; filter: brightness(1.03) saturate(1.08) !important; } body.single-product .related.products ul.products li.product .woocommerce-loop-product__title { font-size: 16px !important; font-weight: 600 !important; color: #0d0d0d !important; padding: 16px 18px 8px !important; line-height: 1.2 !important; } body.single-product .related.products ul.products li.product .star-rating { margin: 0 18px 8px !important; } body.single-product .related.products ul.products li.product .price { font-size: 16px !important; font-weight: 300 !important; color: #0d0d0d !important; padding: 0 18px 16px !important; border: none !important; display: block !important; } body.single-product .related.products ul.products li.product .button { display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 16px 16px !important; width: calc(100% - 32px) !important; height: 38px !important; background: #1c3d22 !important; color: #fff !important; border-radius: var(--r8) !important; font-size: 14px !important; font-weight: 600 !important; border: none !important; transition: background .15s, transform .2s !important; text-decoration: none !important; } body.single-product .related.products ul.products li.product .button:hover { background: #2a5533 !important; transform: translateY(-1px) !important; } /* ── HIDE JUNK ── */ body.single-product .elementor-widget-icon-box { display: none !important; } /* ── APPLE / GOOGLE PAY ── */ body.single-product .apple-pay-button, body.single-product .gpay-button, body.single-product button.gpay-button, body.single-product .express-payment-method button { background-color: #1c3d22 !important; background: #1c3d22 !important; border-radius: var(--r8) !important; } /* ── PRODUCT VIDEO BLOCK ── Hidden: the compact "Watch it in action" row below does the same job without a full screen of dead dark space. Delete the display:none line to bring the large block back. */ .eb-product-video { display: none !important; margin-top: 14px !important; } .eb-pv-inner { border-radius: var(--r12) !important; overflow: hidden !important; border: 1px solid var(--line) !important; } .eb-pv-thumb { position: relative !important; width: 100% !important; aspect-ratio: 16/9 !important; background: #0d0d0d !important; cursor: pointer !important; display: block !important; overflow: hidden !important; } .eb-pv-overlay { position: absolute !important; inset: 0 !important; background: linear-gradient(135deg, rgba(28,61,34,.85) 0%, rgba(13,13,13,.7) 100%) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 14px !important; transition: background .2s !important; } .eb-pv-thumb:hover .eb-pv-overlay { background: linear-gradient(135deg, rgba(28,61,34,.92) 0%, rgba(13,13,13,.8) 100%) !important; } .eb-pv-play { width: 56px !important; height: 56px !important; border-radius: 50% !important; background: rgba(255,255,255,.15) !important; border: 2px solid rgba(255,255,255,.4) !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: transform .2s, background .2s !important; padding-left: 4px !important; } .eb-pv-thumb:hover .eb-pv-play { transform: scale(1.1) !important; background: rgba(255,255,255,.25) !important; } .eb-pv-play svg { width: 20px !important; height: 20px !important; } .eb-pv-label { font-size: 14px !important; font-weight: 400 !important; color: rgba(255,255,255,.85) !important; letter-spacing: .02em !important; } /* ── VIDEO CTA BELOW HIGHLIGHTS ── */ .eb-video-cta { margin-top: 10px !important; } .eb-video-cta-btn { display: flex !important; align-items: center !important; gap: 14px !important; width: 100% !important; padding: 14px 18px !important; background: #fff !important; border: 1px solid rgba(13,13,13,.1) !important; border-radius: var(--r12) !important; cursor: pointer !important; transition: border-color .2s, box-shadow .2s, transform .2s !important; font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; text-align: left !important; } .eb-video-cta-btn:hover { border-color: rgba(28,61,34,.25) !important; box-shadow: 0 4px 16px rgba(0,0,0,.06) !important; transform: translateY(-1px) !important; } .eb-video-cta-thumb { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: var(--green) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transition: background .2s !important; } .eb-video-cta-btn:hover .eb-video-cta-thumb { background: var(--green-2) !important; } .eb-video-cta-text { display: flex !important; flex-direction: column !important; gap: 2px !important; flex: 1 !important; min-width: 0 !important; } .eb-video-cta-label { font-size: 14px !important; font-weight: 600 !important; color: #0d0d0d !important; line-height: 1.2 !important; } .eb-video-cta-sub { font-size: 12px !important; font-weight: 300 !important; color: rgba(13,13,13,.45) !important; } .eb-video-cta-arrow { flex-shrink: 0 !important; color: rgba(13,13,13,.25) !important; transition: color .2s, transform .2s !important; } .eb-video-cta-btn:hover .eb-video-cta-arrow { color: var(--green) !important; transform: translateX(3px) !important; } /* ── MOBILE LAYOUT ORDER ── The product page is built with Elementor containers, so the image/summary order is set there, not by WooCommerce. On phones the summary came first, pushing the product photo below the buy buttons. This flips it. c2fe94e = summary column · 4fded14 = gallery column (If the Single Product template is rebuilt in Elementor these IDs change.) */ @media (max-width: 767px) { /* Highlights: 2 across on phones, tighter cards */ .eb-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: 18px !important; } .eb-hl-item { padding: 12px !important; gap: 7px !important; } .eb-hl-body { font-size: 12px !important; } .elementor-element-530f7ed > .e-con-inner { display: flex !important; flex-direction: column !important; } .elementor-element-4fded14 { order: -1 !important; } /* gallery first */ .elementor-element-c2fe94e { order: 1 !important; } /* then summary */ } /* ── RESPONSIVE ── */ @media (max-width: 1024px) { body.single-product .related.products ul.products { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 860px) { body.single-product .woocommerce-product-gallery { position: static !important; } body.single-product #reviews #comments ol.commentlist { grid-template-columns: 1fr 1fr !important; } body.single-product .upsells.products ul.products { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 600px) { body.single-product #reviews #comments ol.commentlist { grid-template-columns: 1fr !important; } body.single-product .related.products ul.products { grid-template-columns: 1fr 1fr !important; padding: 0 16px !important; } body.single-product .upsells.products ul.products { grid-template-columns: 1fr !important; } /* ── Pack calculator mobile ── */ .eb-calc-body { padding: 14px !important; } .eb-calc-header { padding: 12px 14px !important; } .eb-calc-row { grid-template-columns: 1fr !important; gap: 8px !important; } .eb-calc-result { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } .eb-calc-cta { width: 100% !important; justify-content: center !important; } /* ── Discount table mobile ── */ .eb-discount-table { font-size: 12px !important; } .eb-dt-header .eb-dt-cell { font-size: 12px !important; padding: 7px 8px !important; letter-spacing: .04em !important; } .eb-dt-row .eb-dt-cell { font-size: 12px !important; padding: 9px 8px !important; } .eb-dt-note { font-size: 12px !important; padding: 7px 10px !important; } .eb-dt-row.active .eb-dt-cell:first-child::before { content: '' !important; } /* ── MOBILE: same vertical stack as desktop; qty + Add to Cart stay on one row (qty compact, button takes the rest) — a full-width row each wastes a screen of height on a phone ── */ body.single-product div.woocommerce-variation-add-to-cart, body.single-product form.cart { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; align-items: stretch !important; } body.single-product .eb-qty-wrap, body.single-product form.cart .quantity, body.single-product div.woocommerce-variation-add-to-cart .quantity { display: flex !important; width: 100% !important; max-width: 100% !important; height: 52px !important; overflow: hidden !important; box-sizing: border-box !important; flex-shrink: 0 !important; } body.single-product .eb-qty-btn { width: 52px !important; height: 52px !important; flex-shrink: 0 !important; } body.single-product form.cart .quantity input.qty, body.single-product div.woocommerce-variation-add-to-cart .quantity input.qty { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 52px !important; line-height: 52px !important; font-size: 14px !important; } body.single-product form.cart .single_add_to_cart_button, body.single-product div.woocommerce-variation-add-to-cart button.single_add_to_cart_button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: 52px !important; box-sizing: border-box !important; flex: 1 1 100% !important; } /* ── Tabs mobile — scroll sideways instead of wrapping (wrapping made the three tab labels overlap each other) ── */ body.single-product .woocommerce-tabs ul.tabs { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; gap: 2px !important; padding: 0 4px !important; border-radius: 8px 8px 0 0 !important; } body.single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none !important; } body.single-product .woocommerce-tabs ul.tabs li { flex: 0 0 auto !important; } body.single-product .woocommerce-tabs ul.tabs li a { font-size: 14px !important; padding: 12px 14px !important; line-height: 1.2 !important; white-space: nowrap !important; } } /* Trust badges removed — component deleted from the page. */ @media (max-width: 480px) { /* Collapse discount table to 2 columns on very small screens — hide middle "Discount" col */ .eb-dt-header, .eb-dt-row { grid-template-columns: 3fr 2fr !important; } .eb-dt-header .eb-dt-cell:nth-child(2), .eb-dt-row .eb-dt-cell:nth-child(2) { display: none !important; } .eb-dt-header .eb-dt-cell { font-size: 12px !important; padding: 7px 10px !important; } .eb-dt-row .eb-dt-cell { font-size: 12px !important; padding: 9px 10px !important; } } /* ===================================================================== TRIGGERS + MODAL The pack calculator and bulk-pricing table now live in a modal, opened by these compact triggers, so the buying column stays short and clear. ===================================================================== */ .eb-trigger { display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; margin-top: 10px !important; padding: 13px 16px !important; background: #fff !important; border: 1px solid var(--line) !important; border-radius: var(--r12) !important; cursor: pointer !important; text-align: left !important; font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease) !important; } .eb-trigger:hover { border-color: rgba(28,61,34,.3) !important; box-shadow: 0 4px 16px rgba(0,0,0,.06) !important; transform: translateY(-1px) !important; } .eb-trigger-icon { width: 34px !important; height: 34px !important; border-radius: 9px !important; background: var(--green-lt) !important; color: var(--green) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .eb-trigger-text { display: flex !important; flex-direction: column !important; gap: 2px !important; flex: 1 !important; min-width: 0 !important; } .eb-trigger-label { font-size: 14px !important; font-weight: 600 !important; color: var(--ink) !important; line-height: 1.2 !important; } .eb-trigger-sub { font-size: 12px !important; font-weight: 300 !important; color: rgba(13,13,13,.45) !important; line-height: 1.3 !important; } .eb-trigger-arrow { flex-shrink: 0 !important; color: rgba(13,13,13,.25) !important; transition: color .2s, transform .2s !important; } .eb-trigger:hover .eb-trigger-arrow { color: var(--green) !important; transform: translateX(3px) !important; } /* ── Modal shell ── */ .eb-modal { display: none !important; position: fixed !important; inset: 0 !important; z-index: 99998 !important; } .eb-modal.open { display: flex !important; align-items: center !important; justify-content: center !important; } .eb-modal-backdrop { position: absolute !important; inset: 0 !important; background: rgba(13,13,13,.55) !important; backdrop-filter: blur(4px) !important; animation: ebFadeIn .2s ease !important; } .eb-modal-panel { position: relative !important; width: min(480px, calc(100vw - 32px)) !important; max-height: min(86vh, 720px) !important; background: #fff !important; border-radius: var(--r20) !important; box-shadow: 0 24px 80px rgba(0,0,0,.28) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; animation: ebPanelIn .25s var(--ease) !important; } @keyframes ebFadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes ebPanelIn { from { opacity: 0; transform: translateY(14px) scale(.98) } to { opacity: 1; transform: none } } .eb-modal-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 18px 20px !important; border-bottom: 1px solid var(--line) !important; flex-shrink: 0 !important; } .eb-modal-title { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-size: 16px !important; font-weight: 600 !important; color: var(--ink) !important; margin: 0 !important; } .eb-modal-close { width: 32px !important; height: 32px !important; border-radius: 50% !important; border: 1px solid var(--line) !important; background: #fff !important; color: rgba(13,13,13,.45) !important; font-size: 14px !important; line-height: 1 !important; cursor: pointer !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: background .15s, color .15s !important; } .eb-modal-close:hover { background: rgba(13,13,13,.05) !important; color: var(--ink) !important; } .eb-modal-body { padding: 18px 20px 22px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* Panels inside the modal don't need their own frame or title bar */ .eb-modal-body .eb-in-modal { margin: 0 !important; border: none !important; border-radius: 0 !important; } .eb-modal-body .eb-pack-calc .eb-calc-header { display: none !important; } .eb-modal-body .eb-calc-body { padding: 0 !important; } .eb-modal-body .eb-discount-table { margin-bottom: 0 !important; border: 1px solid var(--line) !important; border-radius: var(--r12) !important; } .eb-modal-body .eb-calc-cta { display: inline-flex !important; width: 100% !important; justify-content: center !important; height: 46px !important; font-size: 14px !important; margin-top: 14px !important; } @media (max-width: 600px) { /* Sheet style on phones — rises from the bottom */ .eb-modal.open { align-items: flex-end !important; } .eb-modal-panel { width: 100% !important; max-height: 88vh !important; border-radius: var(--r20) var(--r20) 0 0 !important; animation: ebSheetIn .28s var(--ease) !important; } @keyframes ebSheetIn { from { transform: translateY(100%) } to { transform: none } } .eb-modal-body { padding: 16px 16px 24px !important; } .eb-trigger { padding: 14px !important; } } /* "Watch it in action" follows the highlights band — keep it in the same content frame (JS mirrors the row's width; these margins centre it). */ body.single-product .eb-video-cta { margin-left: auto !important; margin-right: auto !important; } /* ===================================================================== BUY BLOCK LAYOUTS Chosen in Products → Product Page. The body carries ebpp-layout-*. "stack" is also enforced in JS (WooCommerce rebuilds this markup on every variation change, which CSS alone can't always survive). ===================================================================== */ /* ── Price in the button: no separate price, no Total band ── */ body.ebpp-layout-button .woocommerce-variation-price, body.ebpp-layout-button .eb-running-total { display: none !important; } body.ebpp-layout-button form.cart .single_add_to_cart_button::after { content: attr(data-eb-price); margin-left: 6px; font-weight: 600; } /* ── One card: the buy area inside a single frame ── */ body.ebpp-layout-card form.variations_form { border: 1px solid var(--line) !important; border-radius: 16px !important; padding: 20px !important; background: #fff !important; } body.ebpp-layout-card .eb-running-total { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; margin-top: 0 !important; } /* ── Pack tiles: the dropdown becomes two side-by-side choices ── */ body.ebpp-layout-packs .eb-pack-tiles { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-bottom: 14px !important; } body.ebpp-layout-packs .eb-pack-tile { border: 1px solid var(--line) !important; border-radius: 14px !important; padding: 16px !important; cursor: pointer !important; background: #fff !important; transition: border-color .15s, background .15s !important; } body.ebpp-layout-packs .eb-pack-tile.is-active { border: 2px solid var(--green) !important; background: var(--green-lt) !important; } body.ebpp-layout-packs .eb-pack-tile-name { font-size: 14px !important; font-weight: 600 !important; } body.ebpp-layout-packs .eb-pack-tile-price { font-size: 16px !important; font-weight: 300 !important; margin-top: 4px !important; } body.ebpp-layout-packs table.variations { display: none !important; } body.ebpp-layout-packs .woocommerce-variation-price { display: none !important; } /* ===================================================================== SAVINGS COLOUR Discounts use a warm amber instead of brand green — a saving shown in the site's own colour doesn't read as a deal. Clear of red, which reads as an error. ===================================================================== */ .eb-discount-table .eb-dt-row.active { background: #fff5e8 !important; border-color: rgba(154,79,6,.2) !important; } .eb-discount-table .eb-dt-row.active .eb-dt-cell { color: #9a4f06 !important; } .eb-discount-table .eb-dt-row .eb-dt-saving { color: #9a4f06 !important; font-weight: 600 !important; } .eb-dt-badge { background: #9a4f06 !important; } .eb-saving-toast { background: #9a4f06 !important; box-shadow: 0 8px 32px rgba(154,79,6,.35) !important; } /* ===================================================================== GALLERY — centred in its column Only alignment properties (margin/justify) — deliberately NOT widths on FlexSlider's own elements, which is what broke the carousel before. ===================================================================== */ body.single-product .woocommerce-product-gallery__image img, body.single-product .woocommerce-product-gallery__wrapper img { margin-left: auto !important; margin-right: auto !important; } body.single-product .flex-control-thumbs { justify-content: center !important; } /* fallback gallery (used if FlexSlider fails) */ body.single-product .eb-gallery-fallback > div { justify-content: center !important; } /* ===================================================================== PACK CALCULATOR — inside the modal The result block was a side-by-side row: the "Apply to product" button took half the width and squeezed the recommendation into a narrow column, so both the pack list and the price wrapped over three lines. Stacked instead, with the button full width beneath. ===================================================================== */ .eb-modal-body .eb-calc-result { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 4px !important; padding: 16px !important; } .eb-modal-body .eb-calc-result-left { width: 100% !important; } .eb-modal-body .eb-calc-result-val { font-size: 16px !important; font-weight: 600 !important; line-height: 1.35 !important; } .eb-modal-body .eb-calc-price { display: block !important; font-size: 1.3rem !important; font-weight: 600 !important; margin-top: 6px !important; line-height: 1.2 !important; } .eb-modal-body .eb-calc-result-note { font-size: 12px !important; line-height: 1.5 !important; margin-top: 8px !important; } .eb-modal-body .eb-calc-cta { width: 100% !important; justify-content: center !important; height: 48px !important; margin-top: 14px !important; font-size: 14px !important; } /* Inputs sit comfortably side by side, stacking on small screens */ .eb-modal-body .eb-calc-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin-bottom: 16px !important; } @media (max-width: 600px) { .eb-modal-body .eb-calc-row { grid-template-columns: 1fr !important; } } /* Only one input remains (Linear metres) — let it span the row */ .eb-modal-body .eb-calc-row { grid-template-columns: 1fr !important; } /* ===================================================================== LAYOUT-SHIFT (CLS) PREVENTION The buy block, card pair and total block are assembled by JS after the page paints. Reserving their height up front stops the content below from jumping when they appear — which is what pushed product-page CLS to 0.23. Heights match the finished components. ===================================================================== */ body.single-product #ebCtlPair { min-height: 66px; } /* pack + qty cards */ body.single-product form.cart .single_add_to_cart_button { min-height: 52px; } body.single-product #ebTotalBlock { min-height: 92px; } /* metres + price + footer */ body.single-product .woocommerce-product-gallery { min-height: 420px; } /* gallery before FlexSlider sizes */ /* Reserve the callout row so its insertion doesn't shove the tabs down */ body.single-product .eb-highlights { min-height: 120px; }