/* * Product V2 — FINAL override layer. * File: assets/css/product-v2-final.css * * Linked at the very END of wp_head (inc/product-v2/enqueue.php: * hc_v2_final_css, priority 9999) — AFTER the legacy Customizer * "Additional CSS", which WordPress prints inline late in the head. When * two !important rules tie on specificity, source order decides, so the * overrides that must beat the legacy CSS have to appear after it. Only * such rules live here; everything else belongs in product-v2.css / * product-v2-overrides.css. */ /* ---------------- Server-rendered v5 gallery ---------------- */ body.hc-pdp-v2 .media-col .hc-gallery{display:flex;flex-direction:column;gap:10px;min-width:0} body.hc-pdp-v2 .stage .hc-slide{position:absolute;inset:0;display:none;align-items:center;justify-content:center} body.hc-pdp-v2 .stage .hc-slide.on{display:flex} body.hc-pdp-v2 .thumb-rail{overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none} body.hc-pdp-v2 .thumb-rail::-webkit-scrollbar{display:none} /* v5 rail (measured): 136px tiles at v5's 582px rail = exactly 4 per view — here fluid 25% minus the 8px gaps so it's ALWAYS exactly 4, any width. White bg, 12px radius; active = blue border + 2px white inset ("pressed"). The vid tile's dark overlay + play triangle ship in product-v2.css (.thumb.vid::before/::after) over the same white tile. */ body.hc-pdp-v2 .thumb-rail .thumb{flex:0 0 calc(25% - 6px);width:calc(25% - 6px);aspect-ratio:1/1;padding:0;margin:0;background:#fff} body.hc-pdp-v2 .thumb-rail .thumb.active{padding:2px} /* Arrows: the circle is 40px (v5-correct) but the legacy button padding (0.6em 1em 0.4em) crushed the content box to 8px, shrinking the flexed chevron svg to 6.4px — v5 measures 20px. */ body.hc-pdp-v2 .stage .gal-arrow{padding:0!important} body.hc-pdp-v2 .stage .gal-arrow svg{width:20px!important;height:20px!important;flex:0 0 auto} /* Gallery mode (WooCommerce's bundled PhotoSwipe over our stage). v5's Will mode hides its DECORATIVE zoom button — ours opens the lightbox, so re-show it (v5 supplies the 38px circle styles). */ html:root body.hc-pdp-v2 .stage .zoom{display:flex} body.hc-pdp-v2 .stage .zoom{padding:0!important;border:0;cursor:pointer} body.hc-pdp-v2 .stage .zoom svg{width:18px!important;height:18px!important;flex:0 0 auto} body.hc-pdp-v2 .stage .hc-slide img{cursor:zoom-in} .hc-pswp-video{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000} .hc-pswp-video video{width:100%;height:100%;object-fit:contain} /* Gallery video slide (muted autoplay — v5 behavior). */ body.hc-pdp-v2 .hc-video-slide{overflow:hidden;background:#000;position:relative} body.hc-pdp-v2 .hc-video-slide video{width:100%;height:100%;object-fit:contain;display:block;cursor:pointer} body.hc-pdp-v2 .hc-video-slide .ytbar{position:absolute;left:0;right:0;bottom:0} /* ytbar controls: legacy button padding crushed the play icon to 2px wide and legacy input CSS fattened the seekbar (7.6px vs v5's 4px). Force the measured v5 values. */ body.hc-pdp-v2 .ytbar .yt-pp{width:34px!important;height:34px!important;padding:0!important;margin:0!important;min-width:0!important;border:0!important;border-radius:50%!important;background:rgba(255,255,255,.16)!important;display:flex!important;align-items:center!important;justify-content:center!important} body.hc-pdp-v2 .ytbar .yt-pp:hover{background:rgba(255,255,255,.28)!important} body.hc-pdp-v2 .ytbar .yt-pp svg{width:18px!important;height:18px!important;flex:0 0 auto;fill:#fff} body.hc-pdp-v2 .ytbar .yt-seek{-webkit-appearance:none!important;appearance:none!important;height:4px!important;margin:0!important;padding:0!important;border:0!important;border-radius:999px!important;background:rgba(255,255,255,.35)!important;box-shadow:none!important} body.hc-pdp-v2 .ytbar .yt-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 3px rgba(0,0,0,.4);cursor:pointer} body.hc-pdp-v2 .ytbar .yt-seek::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 3px rgba(0,0,0,.4);cursor:pointer} /* ---------------- Quantity stepper (v5: 130x56, 44px buttons) ---------------- */ body.hc-pdp-v2 .qty-cart{display:flex!important;gap:10px!important;align-items:stretch} body.hc-pdp-v2 .qty-cart .quantity.hc-qty{display:inline-flex!important;align-items:center!important;justify-content:space-between!important;width:130px!important;min-width:130px;height:56px!important;border:1px solid #e4e9ee!important;border-radius:12px!important;background:#fff!important;padding:0!important;margin:0!important;overflow:hidden} body.hc-pdp-v2 .hc-qty .hc-qty-btn{width:44px!important;height:100%!important;font-size:20px!important;font-weight:600!important;color:#163e63!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;cursor:pointer} body.hc-pdp-v2 .hc-qty input.qty{width:40px!important;text-align:center!important;font-family:'Poppins',sans-serif!important;font-weight:700!important;font-size:17px!important;color:#163e63!important;border:0!important;background:none!important;padding:0!important;margin:0!important;box-shadow:none!important} body.hc-pdp-v2 .hc-qty .hc-qty-btn:hover{background:#eaf2f8!important;color:#2f6fa8!important} /* ---------------- Add to Cart (v5: 56px red pill, 16/700, one line) ---------------- Legacy CSS adds a FontAwesome cart ::before, block layout and a 280px max-width — neutralized in every WC state. */ body.hc-pdp-v2 .qty-cart .single_add_to_cart_button.btn-cart{display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;flex:1 1 0%!important;height:56px!important;padding:0 18px!important;border-radius:12px!important;font-size:16px!important;font-weight:700!important;white-space:nowrap!important;line-height:1!important;text-transform:none!important;letter-spacing:normal!important} body.hc-pdp-v2 .qty-cart .single_add_to_cart_button.btn-cart::before, body.hc-pdp-v2 .qty-cart .single_add_to_cart_button.btn-cart::after{content:none!important;display:none!important} body.hc-pdp-v2 .qty-cart .single_add_to_cart_button.btn-cart svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} body.hc-pdp-v2 .qty-cart .single_add_to_cart_button.btn-cart, body.hc-pdp-v2 .qty-cart .single_add_to_cart_button.btn-cart.disabled, body.hc-pdp-v2 .qty-cart .single_add_to_cart_button.btn-cart.wc-variation-selection-needed, body.hc-pdp-v2 .qty-cart .single_add_to_cart_button.btn-cart.wc-variation-is-unavailable{font-family:'Inter',sans-serif!important;height:56px!important;min-height:56px!important;max-height:none!important;max-width:none!important;width:auto!important;padding:0 18px!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important;opacity:1!important;font-size:16px!important;font-weight:700!important;line-height:1!important;white-space:nowrap!important;border-radius:12px!important} /* ---------------- Buy rhythm — v5 root values ---------------- section-label carries the 16px top gap; swatches 18px; the sub-deal row STAYS IN FLOW (its margin is part of v5's spacing even when empty — removing it from flow was what made the layout jump). */ body.hc-pdp-v2 .buy .variations_form{margin-top:0!important} body.hc-pdp-v2 .buy .section-label{width:90%;margin-top:0!important;margin-bottom:16px!important;margin-left:auto!important;margin-right:auto!important} body.hc-pdp-v2 .buy #subDeal{display:none!important;margin:0!important} body.hc-pdp-v2 .buy #swatches{margin-bottom:18px!important} body.hc-pdp-v2 .buy #freqWrap{margin:2px 0 13px!important} body.hc-pdp-v2 .buy #subBenefits{margin:22px 0!important;padding:0!important} body.hc-pdp-v2 .buy #subBenefits[hidden]{display:none!important} /* Keep qty + button on ONE row in every WC state (legacy CSS flips the -enabled state to column). */ body.hc-pdp-v2 .qty-cart.woocommerce-variation-add-to-cart-enabled, body.hc-pdp-v2 .qty-cart.woocommerce-variation-add-to-cart-disabled{flex-direction:row!important;flex-wrap:nowrap!important} /* WooCommerce appends a "View cart" link after AJAX add — not in v5. */ body.hc-pdp-v2 .buy .added_to_cart.wc-forward{display:none!important} /* WC injects resolved-variation price/availability here — v5 shows pricing in the plan boxes instead. */ body.hc-pdp-v2 .buy .single_variation{display:none!important} /* Plans: legacy button CSS centers text; v5 is start-aligned. */ body.hc-pdp-v2 .plan-grid .plan{text-align:left!important} body.hc-pdp-v2 .plan-grid .plan .plan-sub{text-align:left!important;font-size:11px!important} /* ---------------- Sticky section nav ---------------- The V2 header is now sticky (rendered outside #page so its containing block is ), so the section nav pins UNDER it at top:85px (from product-v2.css) — matching v5. The anchor scroll offset (header height + nav height) is set in JS by initStickyOffsets() so it stays exact and adapts to the responsive header height (85px desktop, 66px mobile). */ body.hc-pdp-v2 .sn-info{min-width:0} body.hc-pdp-v2 .sn-meta{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} body.hc-pdp-v2 .sn-add{background:var(--cta)!important;color:#fff!important} body.hc-pdp-v2 .sn-add:hover{background:var(--cta-deep)!important} /* ---------------- Write-a-review (WooCommerce native form) ---------------- Reviews are enabled on the product, so WooCommerce outputs its heading + a duplicate review LIST + the submit form inside #comments. V2 renders its own list above, so hide WC's heading and list; keep only the form, wrapped in a
that expands on "Write a review" (works with no JS). Non-buyers see WC's verified-owner notice in the same panel. Styled to match v5 controls. */ body.hc-pdp-v2 #reviews #comments > .woocommerce-Reviews-title, body.hc-pdp-v2 #reviews #comments > ol.commentlist, body.hc-pdp-v2 #reviews #comments > .woocommerce-noreviews, body.hc-pdp-v2 #reviews #respond .comment-reply-title{display:none!important} body.hc-pdp-v2 .hc-write-review{margin-top:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden} body.hc-pdp-v2 .hc-write-review .hc-wr-toggle{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:16px 22px;font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--teal-ink)} body.hc-pdp-v2 .hc-write-review .hc-wr-toggle::-webkit-details-marker{display:none} body.hc-pdp-v2 .hc-write-review .hc-wr-toggle::after{content:"";width:20px;height:20px;margin-left:auto;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s} body.hc-pdp-v2 .hc-write-review[open] .hc-wr-toggle::after{transform:rotate(180deg)} body.hc-pdp-v2 .hc-write-review .hc-wr-panel{padding:4px 22px 22px} /* WC form controls → v5 look */ body.hc-pdp-v2 #reviews .comment-form{max-width:none;margin:0} body.hc-pdp-v2 #reviews .comment-form-rating label, body.hc-pdp-v2 #reviews .comment-form label{display:block;font-size:13.5px;font-weight:600;color:var(--teal-ink);margin:0 0 6px} body.hc-pdp-v2 #reviews .comment-form p{margin:0 0 16px} body.hc-pdp-v2 #reviews .comment-form input[type=text], body.hc-pdp-v2 #reviews .comment-form input[type=email], body.hc-pdp-v2 #reviews .comment-form textarea{width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px;font-family:inherit;font-size:14.5px;color:var(--ink);background:#fff} body.hc-pdp-v2 #reviews .comment-form input:focus, body.hc-pdp-v2 #reviews .comment-form textarea:focus{outline:none;border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)} body.hc-pdp-v2 #reviews .comment-form textarea{min-height:110px;resize:vertical} /* star-rating widget (WC .stars) */ body.hc-pdp-v2 #reviews p.stars a{color:var(--gold)} body.hc-pdp-v2 #reviews p.stars a::before, body.hc-pdp-v2 #reviews p.stars a.active::before, body.hc-pdp-v2 #reviews p.stars:hover a::before{color:var(--gold)} /* submit → red CTA (Will's mode) */ body.hc-pdp-v2 #reviews .comment-form .form-submit input#submit{background:var(--cta);color:#fff;font-weight:700;font-size:14px;border:0;border-radius:var(--radius-sm);padding:12px 26px;cursor:pointer;transition:background .15s} body.hc-pdp-v2 #reviews .comment-form .form-submit input#submit:hover{background:var(--cta-deep)} /* verified-owner notice */ body.hc-pdp-v2 #reviews #review_form_wrapper > p, body.hc-pdp-v2 #reviews .woocommerce-verification-required{margin:0;font-size:14px;color:var(--muted);line-height:1.6} /* ---------------- Legacy paragraph-size override ---------------- The parent theme ships `.woocommerce .content-area p{font-size:18px!important}` (style.css). Because it is !important it outranks every paragraph size in the v2 stylesheet — 19 paragraphs across 6 sections were all being flattened to 18px. Restore the v5 sizes with matching weight and higher specificity (body.hc-pdp-v2 … beats .woocommerce .content-area p). */ body.hc-pdp-v2 .ed-quote p{font-size:19px!important} body.hc-pdp-v2 .block-head p{font-size:15.5px!important} body.hc-pdp-v2 .benefit-duo .bc-sub, body.hc-pdp-v2 .ff-grid .bc-sub{font-size:13px!important} body.hc-pdp-v2 .ba-card .meta .quote{font-size:13.5px!important} body.hc-pdp-v2 .rev-item p{font-size:14px!important} /* Same rule also breaks INHERITANCE: .faq-a is correctly 15px, but the

inside it is forced to 18px. `inherit` restores the container's size and stays in sync if that size ever changes. */ body.hc-pdp-v2 .faq-item .faq-a p{font-size:inherit!important} /* Plain paragraphs authored in the About WYSIWYG have no v5 class, so nothing sizes them and the 18px above wins. Bring them to the section's body size. :not(.ed-lead) is required — .ed-lead is also a direct child of .ed-body, and on products that use the default copy it must keep its 20px lead sizing. */ body.hc-pdp-v2 .ed-body > p:not(.ed-lead){font-size:var(--body-size)!important;line-height:var(--body-lh)} /* The reset above is right for the design's single-paragraph slots, but the About body is authored in a WYSIWYG where consecutive

tags are normal — zeroing them ran the copy together as one block. v5 never hit this because its equivalent copy is classed (.ed-lead 20px, .ed-cols p 12px); hand-written paragraphs have no class to carry rhythm, so restore it here. `p + p` for the FAQ so single-paragraph answers stay flush while multi-paragraph ones space. */ body.hc-pdp-v2 .ed-body > p{margin-bottom:14px} body.hc-pdp-v2 .faq-a p + p{margin-top:12px} /* About-body internal links — the WYSIWYG lets editors add links, which otherwise inherit the parent theme's default anchor colour. Style them on-brand (teal, underlined) so they read as links within the grey body copy. Printed at wp_head priority 9999, so this beats the parent Customizer/link CSS. */ body.hc-pdp-v2 .ed-body a{color:var(--teal);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:color .15s ease} body.hc-pdp-v2 .ed-body a:hover,body.hc-pdp-v2 .ed-body a:focus-visible{color:var(--teal-deep)} /* Quote attribution link () — keep the original muted cite colour, no underline; only tint on-brand + underline on hover/focus. Beats parent link CSS. */ body.hc-pdp-v2 .ed-quote cite a{color:inherit;text-decoration:none;transition:color .15s ease} body.hc-pdp-v2 .ed-quote cite a:hover,body.hc-pdp-v2 .ed-quote cite a:focus-visible{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px} /* .rexcerpt is a

, so the same 18px rule was overriding v5's 12px. */ body.hc-pdp-v2 .rel-card .rexcerpt{font-size:12px!important} /* ---------------- Related card price ---------------- v5 emits {sale}{was}, so product-v2.css styles .rprice b / s. WooCommerce emits its own markup instead — / wrapping .woocommerce-Price-amount, plus extra spans for ranges — so neither v5 rule ever matched and the prices rendered unstyled at the inherited 16px. Mapping WC's structure onto the same typography rather than hand-building the price keeps ranges, currency, tax and subscription handling intact. */ /* font-weight needs !important: the theme ships a shop_table rule that also matches .woocommerce-Price-amount and forces 400. */ body.hc-pdp-v2 .rel-card .rprice ins, body.hc-pdp-v2 .rel-card .rprice > .woocommerce-Price-amount{font-size:17px;font-weight:700!important;color:var(--teal-ink);text-decoration:none} body.hc-pdp-v2 .rel-card .rprice del, body.hc-pdp-v2 .rel-card .rprice del .woocommerce-Price-amount{font-size:13px;font-weight:400;color:var(--muted)} /* The en-dash between range values should follow the small style, not the big. */ body.hc-pdp-v2 .rel-card .rprice > span:not(.woocommerce-Price-amount):not(.screen-reader-text){font-size:13px;color:var(--muted)} /* Real product names are far longer than v5's demo titles — one is 230 chars and wrapped to SIX lines, pushing every card from 549px to 626px. v5 never hit this because its sample titles were one line. Clamp to two lines, the same treatment .rexcerpt already gets, so cards stay uniform whatever the catalogue is called. */ body.hc-pdp-v2 .rel-card .rbody h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* White plate behind the related product shots. NOTE: this is a deliberate deviation from v5, which tints this box with --card-2 (#eaf2f8). Product photography here is cut-out on white, so the tint showed as a grey wash around the bottles. */ body.hc-pdp-v2 .rel-card .rimg{background:#fff} /* The theme's #main wrapper adds 30px bottom padding, which shows as an untinted strip between the tinted "You May Also Like" section (its own 50px padding) and the footer. Drop it on V2 so the section meets the footer. */ body.hc-pdp-v2 #main{padding-bottom:0} /* ---- Unify all Add-to-Cart CTAs: Buy button, sticky-nav, "You May Also Like" cards. Identical fill, border and hover (darker red + glow + 1px lift). Per-context SIZE (height/font) is intentionally left as-is. ---- */ body.hc-pdp-v2 .buy .single_add_to_cart_button.btn-cart, body.hc-pdp-v2 .sn-add, body.hc-pdp-v2 .rel-card .radd, body.hc-pdp-v2 .sticky-buy .sb-add{background:var(--cta)!important;color:#fff!important;border:0!important;box-shadow:none!important;transition:transform .12s,box-shadow .15s!important} body.hc-pdp-v2 .buy .single_add_to_cart_button.btn-cart:hover, body.hc-pdp-v2 .sn-add:hover, body.hc-pdp-v2 .rel-card .radd:hover, body.hc-pdp-v2 .sticky-buy .sb-add:hover{background:var(--cta-deep)!important;color:#fff!important;border:0!important;box-shadow:0 8px 18px -10px rgba(216,58,44,.5)!important;transform:translateY(-1px)!important} /* Sticky-nav Add-to-Cart keeps its original 13px (shared .btn-cart forces 16px). */ body.hc-pdp-v2 .sn-add{font-size:13px!important} /* Disabled proxies: when WooCommerce marks the real buy-box button unavailable (out of stock), product-v2.js mirrors that onto #snAdd / #sbAdd (native `disabled` + `.is-disabled`). Grey them out so they clearly read as disabled. */ body.hc-pdp-v2 .sn-add:disabled, body.hc-pdp-v2 .sn-add.is-disabled, body.hc-pdp-v2 .sticky-buy .sb-add:disabled, body.hc-pdp-v2 .sticky-buy .sb-add.is-disabled{ background:var(--muted)!important;color:#fff!important;cursor:not-allowed!important; box-shadow:none!important;transform:none!important} body.hc-pdp-v2 .sn-add:disabled:hover, body.hc-pdp-v2 .sn-add.is-disabled:hover, body.hc-pdp-v2 .sticky-buy .sb-add:disabled:hover, body.hc-pdp-v2 .sticky-buy .sb-add.is-disabled:hover{ background:var(--muted)!important;transform:none!important;box-shadow:none!important} /* Main buy-box Add-to-Cart mirrors the same disabled treatment. WooCommerce marks it `.disabled` / `.wc-variation-is-unavailable` when the selected option is out of stock but leaves it red + clickable (pointer-events:auto, no native disabled attr). Grey it out and block the click (pointer-events:none) so it can't attempt an OOS add. CSS-only + keyed on WC's own classes, so it self-restores when an in-stock option is chosen (C-lite: WooCommerce still owns the state). The not-allowed cursor is applied to the parent .qty-cart (WC adds .woocommerce-variation-add-to-cart-disabled), since the button has pointer-events:none. */ body.hc-pdp-v2 .qty-cart .single_add_to_cart_button.btn-cart.disabled, body.hc-pdp-v2 .qty-cart .single_add_to_cart_button.btn-cart.wc-variation-is-unavailable{ background:var(--muted)!important;pointer-events:none!important} body.hc-pdp-v2 .qty-cart.woocommerce-variation-add-to-cart-disabled{cursor:not-allowed!important} /* ---------------- Legacy paragraph margin ---------------- product-v2.css opens with the reset `*{margin:0;padding:0}`, which is what gives v5 its zero paragraph margins. The parent theme's `p{margin-bottom:1.5em}` (style.css) has specificity 0,0,0,1 and so outranks the `*` reset — but only where the v2 stylesheet doesn't state a bottom margin itself. Fixed once, for every paragraph, instead of per-selector: :where() adds ZERO specificity, so this whole rule weighs exactly the same as a bare `p` (0,0,1). It therefore beats the theme's p{margin-bottom:1.5em} on source order, while still LOSING to any explicit class rule — .ed-cols p (12px), .ed-quote p (14px), .bc-sub (22px) all keep their designed margins. Any paragraph added to a section in future inherits the correct 0 automatically. */ :where(body.hc-pdp-v2 .block) p{margin-bottom:0} /* ---------------- Reviews ---------------- .pp-write is an rather than v5's