/* ========================================================================== HFT Single Product (PDP) — WS7 redesign (approved from HFT-PDP-Mockup.html) Brand-kit tokens (hft-brand-2026.css); About-Us section language; mobile-first. NOTE: grade/subject/skill chip COLORS are owned by the SAF plugin (.hft-pdp-chips .hft-card-chip) so they always match the list view — this file only lays them out. ========================================================================== */ .hft-pdp-main{ background:var(--hft-cream-50,#FFFCF6); } .hft-pdp-top{ padding:24px 22px 8px; } /* ---- Breadcrumb ---- */ .hft-pdp-crumbs{ margin:2px 0 18px; } .hft-pdp-crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:2px 4px; font-family:var(--hft-font-body); font-size:13px; color:var(--hft-slate,#5A6B7D); } .hft-pdp-crumbs li{ display:inline-flex; align-items:center; gap:6px; } .hft-pdp-crumbs a{ color:var(--hft-slate,#5A6B7D); text-decoration:none; } .hft-pdp-crumbs a:hover{ color:var(--hft-navy); text-decoration:underline; } .hft-pdp-crumbs li[aria-current] span{ color:var(--hft-navy); font-weight:700; } .hft-pdp-sep{ color:var(--hft-taupe,#93A0AD); font-weight:700; } .hft-pdp-crumbs li:last-child .hft-pdp-sep{ display:none; } /* ---- Grid ---- */ .hft-pdp-grid{ display:grid; grid-template-columns:1fr; gap:28px; align-items:start; padding:6px 0 8px; } @media(min-width:900px){ .hft-pdp-grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:52px; } } /* ---- Media / gallery ---- */ @media(min-width:900px){ .hft-pdp-media{ position:sticky; top:20px; } } /* Video/song products: a legacy snippet hides the standard gallery (expecting the old Elementor facade). Un-hide it so the poster shows (native facade = later). */ .hft-pdp .woocommerce-product-gallery{ display:block !important; } .hft-pdp-media .woocommerce-product-gallery{ margin:0; background:#fff; border:1px solid var(--hft-line,#E9E0D4); border-radius:var(--hft-r-lg,22px); padding:18px; box-shadow:0 26px 60px -34px rgba(18,48,90,.42); } .hft-pdp-media .woocommerce-product-gallery__wrapper{ margin:0; } .hft-pdp-media .woocommerce-product-gallery__image{ background:var(--hft-cream,#FBF5EC); border-radius:12px; overflow:hidden; } .hft-pdp-media .woocommerce-product-gallery img{ border-radius:12px; } .hft-pdp-media .flex-control-thumbs{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 0; padding:0; list-style:none; } .hft-pdp-media .flex-control-thumbs li{ width:64px; margin:0; } .hft-pdp-media .flex-control-thumbs img{ border:2px solid var(--hft-line,#E9E0D4); border-radius:10px; padding:2px; background:var(--hft-cream,#FBF5EC); cursor:pointer; opacity:.82; transition:.15s; } .hft-pdp-media .flex-control-thumbs img.flex-active, .hft-pdp-media .flex-control-thumbs img:hover{ border-color:var(--hft-navy); opacity:1; } .hft-pdp-media .onsale{ background:var(--hft-cta); color:#fff; border-radius:var(--hft-r-pill,999px); font-family:var(--hft-font-body); font-weight:800; padding:5px 13px; min-height:0; min-width:0; } /* ---- Summary ---- */ .hft-pdp-summary{ float:none !important; width:100% !important; margin:0 !important; padding:0 !important; } .hft-pdp-toprow{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 12px; } .hft-pdp-fmt{ display:inline-flex; align-items:center; font-family:var(--hft-font-display); font-weight:600; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--fmt,var(--hft-navy)); border-radius:var(--hft-r-pill,999px); padding:6px 14px; line-height:1; } .hft-pdp-rating{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; } .hft-pdp-rating .star-rating{ color:var(--hft-sail-yellow,#FBB915); font-size:15px; } .hft-pdp-rating .hft-pdp-rating-n{ color:var(--hft-slate,#5A6B7D); font-weight:700; font-size:13.5px; } .hft-pdp-summary .product_title, .hft-pdp-summary h1.product_title{ font-family:var(--hft-font-display); font-weight:600; line-height:1.12; color:var(--hft-navy); margin:0 0 14px; font-size:clamp(1.7rem,3.6vw,2.35rem); } .hft-pdp-chips{ display:flex; flex-wrap:wrap; gap:9px; margin:0 0 18px; } .hft-pdp-summary .woocommerce-product-details__short-description{ font-family:var(--hft-font-body); color:var(--hft-ink,#231F20); line-height:1.6; font-size:15.5px; margin:0 0 20px; } /* Buy-box card */ .hft-pdp-buybox{ background:#fff; border:1px solid var(--hft-line,#E9E0D4); border-radius:var(--hft-r-lg,22px); box-shadow:0 26px 60px -34px rgba(18,48,90,.42); padding:22px; } /* SOW #13: price is black like the product cards (Nunito 900, ink), not green. */ .hft-pdp-buybox .price, .hft-pdp-buybox p.price{ font-family:var(--hft-font-body); font-weight:900; color:var(--hft-ink,#231F20); -webkit-text-fill-color:var(--hft-ink,#231F20); font-size:2rem; margin:0 0 4px; } .hft-pdp-buybox .price del{ color:var(--hft-muted,#93A0AD); font-weight:400; font-size:1.05rem; margin-right:8px; } .hft-pdp-buybox .price ins{ text-decoration:none; } .hft-pdp-freehint{ color:var(--hft-slate,#5A6B7D); font-size:13.5px; margin:0 0 16px; } .hft-pdp-freehint b{ color:var(--hft-navy); } .hft-pdp-freehint a{ color:var(--hft-blue,#0758A1); font-weight:700; } /* Add to Cart / Download */ .hft-pdp-summary form.cart{ margin:0 0 4px; display:flex; flex-wrap:wrap; align-items:center; gap:12px; } /* The member Download button lives in a plain
that defaults to display:block, so the button rendered auto-width (tiny). Make it flex so the button fills the row like the guest Add-to-Cart. */ .hft-pdp-summary .somdn-download-form{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 4px; width:100%; } .hft-pdp-summary .somdn-download-form .somdn-download-button{ width:100%; flex:1 1 100%; } .hft-pdp-summary form.cart .quantity .qty{ width:66px; height:54px; text-align:center; font-family:var(--hft-font-body); font-weight:700; border:1.5px solid var(--hft-line,#E9E0D4); border-radius:12px; background:#fff; color:var(--hft-ink); } /* Add to Cart + Download = brand-kit BUY role: sail yellow, navy ink, pill. (Mark, 2026-07-21: brand-kit Button system — Buy is the one non-white-on-colour button; supersedes the Round-3 pink.) Checkout/Place-Order remain pink Primary. */ .hft-pdp-summary .single_add_to_cart_button, .hft-pdp-summary .somdn-download-button{ display:inline-flex !important; align-items:center; justify-content:center; gap:9px; font-family:var(--hft-font-body) !important; font-weight:800 !important; font-size:16px !important; line-height:1 !important; letter-spacing:normal !important; text-transform:none !important; color:var(--buy-ink,#1B437D) !important; -webkit-text-fill-color:var(--buy-ink,#1B437D) !important; background-color:var(--buy,#FBB915) !important; background-image:none !important; border:0 !important; border-radius:var(--hft-r-pill,999px) !important; padding:16px 30px !important; min-height:56px !important; height:auto !important; box-shadow:var(--buy-shadow,0 14px 28px -16px rgba(251,185,21,.9)); cursor:pointer; transition:.15s; flex:1 1 auto; } /* Hover = darken the fill only; KEEP the navy ink (Amazon-style). */ .hft-pdp-summary .single_add_to_cart_button:hover, .hft-pdp-summary .somdn-download-button:hover{ background-color:var(--buy-hover,#F2AE0C) !important; } /* Trust cluster */ .hft-pdp-trust{ display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; margin:18px 0 0; padding-top:16px; border-top:1px solid var(--hft-line,#E9E0D4); } .hft-pdp-ti{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--hft-slate,#5A6B7D); } .hft-pdp-ti .hft-pdp-ck{ color:var(--hft-green-deep,#1F8551); flex:none; } /* Social share */ .hft-pdp-share{ display:flex; align-items:center; gap:10px; margin:18px 0 0; } .hft-pdp-share-label{ font-family:var(--hft-font-body); font-weight:800; font-size:13px; color:var(--hft-slate,#5A6B7D); } .hft-pdp-share-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--hft-r-pill,999px); background:#fff; border:1.6px solid var(--hft-line,#E9E0D4); color:var(--hft-navy); transition:.15s; } .hft-pdp-share-btn:hover{ background:var(--hft-navy); color:#fff; border-color:var(--hft-navy); transform:translateY(-1px); } .hft-pdp-share-btn svg{ width:18px; height:18px; } /* ---- Shared brand buttons (band + mobile bar) ---- */ .hft-pdp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--hft-font-body); font-weight:800; font-size:16px; border-radius:var(--hft-r-pill,999px); padding:15px 28px; min-height:52px; text-decoration:none; border:0; cursor:pointer; transition:.15s; } .hft-pdp-btn--cta{ background:var(--hft-cta); color:#fff; -webkit-text-fill-color:#fff; } .hft-pdp-btn--cta:hover{ background:var(--hft-cta-hover); transform:translateY(-1px); } /* ---- Membership band ---- */ .hft-pdp-memband{ margin:44px auto; max-width:1180px; } .hft-pdp-memband-in{ position:relative; overflow:hidden; background:var(--hft-navy); border-radius:26px; color:#fff; padding:44px 40px; text-align:center; } .hft-pdp-memband-in::before{ content:""; position:absolute; right:-40px; top:-50px; width:200px; height:200px; border-radius:50%; background:var(--hft-sail-pink,#F0619E); opacity:.9; } .hft-pdp-memband-in::after{ content:""; position:absolute; left:-40px; bottom:-70px; width:160px; height:160px; border-radius:50%; background:var(--hft-sail-yellow,#FBB915); opacity:.9; } .hft-pdp-memband h2{ position:relative; z-index:2; font-family:var(--hft-font-display); font-weight:600; color:#fff; font-size:clamp(1.5rem,3.4vw,2rem); margin:0 0 8px; } .hft-pdp-memband h2 em{ color:var(--hft-sail-yellow,#FBB915); font-style:normal; } .hft-pdp-memband p{ position:relative; z-index:2; color:#dbe6f4; max-width:620px; margin:0 auto 20px; } .hft-pdp-memband .hft-pdp-btn{ position:relative; z-index:2; } .hft-pdp-memband-note{ font-size:12.5px !important; color:#b9c9dd !important; margin:14px 0 0 !important; } /* ---- Sections (About-Us language) ---- */ .hft-pdp-tail{ padding:8px 0 46px; } .hft-pdp-tail-in{ max-width:820px; margin-inline:auto; padding:0 22px; } .hft-pdp-eyebrow{ color:var(--hft-cta); font-family:var(--hft-font-display); font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 6px; } .hft-pdp-h2{ font-family:var(--hft-font-display); font-weight:600; color:var(--hft-navy); font-size:clamp(1.35rem,3vw,1.7rem); margin:0 0 16px; } .hft-pdp-desc{ padding-top:14px; } .hft-pdp-prose{ font-family:var(--hft-font-body); color:var(--hft-ink,#231F20); line-height:1.7; font-size:16px; } .hft-pdp-prose p{ margin:0 0 15px; } .hft-pdp-prose h2,.hft-pdp-prose h3{ font-family:var(--hft-font-display); color:var(--hft-navy); font-weight:600; } .hft-pdp-prose h3{ color:var(--hft-purple,#7A3FA8); margin:22px 0 8px; } .hft-pdp-prose ul,.hft-pdp-prose ol{ padding-left:22px; } .hft-pdp-prose img{ max-width:100%; height:auto; border-radius:12px; } .hft-pdp-prose a{ color:var(--hft-blue,#0758A1); } /* Reviews */ .hft-pdp-reviews{ margin-top:34px; padding-top:24px; border-top:1px solid var(--hft-line,#E9E0D4); } .hft-pdp-revhead{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; background:#fff; border:1px solid var(--hft-line,#E9E0D4); border-radius:var(--hft-r-md,16px); padding:20px 24px; margin:0 0 8px; } .hft-pdp-revbig{ font-family:var(--hft-font-display); font-weight:600; color:var(--hft-navy); font-size:2.4rem; line-height:1; } .hft-pdp-revmeta{ display:flex; flex-direction:column; gap:4px; } .hft-pdp-revmeta .star-rating{ color:var(--hft-sail-yellow,#FBB915); font-size:18px; } .hft-pdp-revcount{ color:var(--hft-slate,#5A6B7D); font-size:13.5px; font-weight:700; } .hft-pdp-reviews .comment-form input[type=submit], .hft-pdp-reviews #respond .submit{ background-color:var(--hft-cta) !important; color:#fff !important; border:0 !important; border-radius:var(--hft-r-pill,999px) !important; padding:12px 26px !important; font-weight:800 !important; font-family:var(--hft-font-body) !important; min-height:44px; cursor:pointer; } .hft-pdp-reviews .comment-form input[type=submit]:hover{ background-color:var(--hft-cta-hover) !important; } /* ---- Related band ---- */ .hft-pdp-related{ background:var(--hft-cream,#FBF5EC); border-top:1px solid var(--hft-line,#E9E0D4); padding:42px 0 50px; margin-top:10px; } .hft-pdp-related .hft-rslider-title{ font-family:var(--hft-font-display); color:var(--hft-navy); } /* ---- Sticky mobile buy bar ---- */ .hft-pdp-mbar{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; align-items:center; gap:12px; background:#fff; border-top:1px solid var(--hft-line,#E9E0D4); box-shadow:0 -10px 30px -18px rgba(18,48,90,.4); padding:10px 16px; } .hft-pdp-mbar-price{ font-family:var(--hft-font-body); font-weight:900; color:var(--hft-ink,#231F20); -webkit-text-fill-color:var(--hft-ink,#231F20); font-size:1.2rem; white-space:nowrap; } .hft-pdp-mbar-price .amount{ color:inherit; } .hft-pdp-mbar-go{ flex:1; min-height:48px; padding:12px; } /* WS13: the sticky mobile CTA is a Buy action (Download / Add to Cart) → yellow Buy, navy ink, no lift, to match the in-page buybox. (0,2,0) beats the .hft-pdp-btn--cta base. */ .hft-pdp-mbar-go.hft-pdp-btn--cta{ background:var(--buy,#FBB915); color:var(--buy-ink,#1B437D); -webkit-text-fill-color:var(--buy-ink,#1B437D); } .hft-pdp-mbar-go.hft-pdp-btn--cta:hover{ background:var(--buy-hover,#F2AE0C); color:var(--buy-ink,#1B437D); -webkit-text-fill-color:var(--buy-ink,#1B437D); transform:none; } /* Membership / subscription products are a Primary "Sign Up" → keep the mbar pink to match §1b. */ body.postid-987986073 .hft-pdp-mbar-go.hft-pdp-btn--cta, body.postid-987840537 .hft-pdp-mbar-go.hft-pdp-btn--cta, body.postid-987836574 .hft-pdp-mbar-go.hft-pdp-btn--cta, body.postid-987836566 .hft-pdp-mbar-go.hft-pdp-btn--cta, body.postid-16450 .hft-pdp-mbar-go.hft-pdp-btn--cta, body.postid-16451 .hft-pdp-mbar-go.hft-pdp-btn--cta, body.postid-16453 .hft-pdp-mbar-go.hft-pdp-btn--cta, body.postid-9993 .hft-pdp-mbar-go.hft-pdp-btn--cta, body.postid-9992 .hft-pdp-mbar-go.hft-pdp-btn--cta, body.postid-987890122 .hft-pdp-mbar-go.hft-pdp-btn--cta{ background:var(--hft-cta); color:#fff; -webkit-text-fill-color:#fff; } body.postid-987986073 .hft-pdp-mbar-go.hft-pdp-btn--cta:hover, body.postid-987840537 .hft-pdp-mbar-go.hft-pdp-btn--cta:hover, body.postid-987836574 .hft-pdp-mbar-go.hft-pdp-btn--cta:hover, body.postid-987836566 .hft-pdp-mbar-go.hft-pdp-btn--cta:hover, body.postid-16450 .hft-pdp-mbar-go.hft-pdp-btn--cta:hover, body.postid-16451 .hft-pdp-mbar-go.hft-pdp-btn--cta:hover, body.postid-16453 .hft-pdp-mbar-go.hft-pdp-btn--cta:hover, body.postid-9993 .hft-pdp-mbar-go.hft-pdp-btn--cta:hover, body.postid-9992 .hft-pdp-mbar-go.hft-pdp-btn--cta:hover, body.postid-987890122 .hft-pdp-mbar-go.hft-pdp-btn--cta:hover{ background:var(--hft-cta-hover); } @media(max-width:760px){ body.hft-mbar-on .hft-pdp-mbar{ display:flex; } .hft-pdp-trust{ grid-template-columns:1fr; } body.hft-mbar-on{ padding-bottom:74px; } } /* ---- Per-format accent (--fmt), reused from SAF card palette ---- */ .hft-pdp[data-format="worksheets"]{ --fmt:#1F8551; } .hft-pdp[data-format="graphic-organizers"]{ --fmt:#0F7A63; } .hft-pdp[data-format="assessments"]{ --fmt:#0758A1; } .hft-pdp[data-format="digital-learning"]{ --fmt:#2A72B5; } .hft-pdp[data-format="google-classroom"]{ --fmt:#1D6A94; } .hft-pdp[data-format="workbooks"]{ --fmt:#1B437D; } .hft-pdp[data-format="curriculum"]{ --fmt:#12305A; } .hft-pdp[data-format="bundles"]{ --fmt:#3F6FB5; } .hft-pdp[data-format="activities"]{ --fmt:#D6337B; } .hft-pdp[data-format="micro-lessons"]{ --fmt:#9E3C74; } .hft-pdp[data-format="songs"]{ --fmt:#7A3FA8; } .hft-pdp[data-format="videos"]{ --fmt:#CC2E2E; } .hft-pdp[data-format="summer-school"]{ --fmt:#D2470B; } .hft-pdp[data-format="flash-cards"]{ --fmt:#5A6B7D; } .hft-pdp[data-format="lesson-plans"]{ --fmt:#3E4C5A; } .hft-pdp[data-format="common-core-lessons"]{ --fmt:#617488; } .hft-pdp[data-format="relief-packs"]{ --fmt:#7A6459; } .hft-pdp[data-format="music-cds"]{ --fmt:#7A3FA8; } .hft-pdp[data-format="video-dvds"]{ --fmt:#CC2E2E; } /* ---- Mobile ---- */ @media(max-width:560px){ .hft-pdp-top{ padding:16px 16px 4px; } .hft-pdp-tail-in{ padding:0 16px; } .hft-pdp-summary .single_add_to_cart_button, .hft-pdp-summary .somdn-download-button{ width:100%; flex:1 1 100%; } .hft-pdp-memband-in{ padding:34px 22px; } } /* ========================================================================== AUTHORITY OVERRIDES — beat legacy global CSS (old Elementor-era product rules in hft-brand-2026.css + the Customizer's wp-custom-css: serif product title, navy button text-fill, ID-level #somdn-form-submit-button background). The native PDP owns its own look, so these win with root-scoped specificity. ========================================================================== */ .hft-pdp.product .hft-pdp-summary h1.product_title{ font-family:var(--hft-font-display) !important; -webkit-text-fill-color:var(--hft-navy) !important; color:var(--hft-navy) !important; } .hft-pdp .hft-pdp-h2, .hft-pdp .hft-pdp-eyebrow, .hft-pdp .hft-rslider-title{ font-family:var(--hft-font-display) !important; } /* Add to Cart (guest) and Download (member) = brand-kit BUY (sail yellow, navy ink). Navy ink wins over the ghost/kit -webkit-text-fill-color. */ .hft-pdp.product .hft-pdp-summary .single_add_to_cart_button{ background-color:var(--buy,#FBB915) !important; background-image:none !important; color:var(--buy-ink,#1B437D) !important; -webkit-text-fill-color:var(--buy-ink,#1B437D) !important; } .hft-pdp.product .hft-pdp-summary .single_add_to_cart_button:hover{ background-color:var(--buy-hover,#F2AE0C) !important; color:var(--buy-ink,#1B437D) !important; -webkit-text-fill-color:var(--buy-ink,#1B437D) !important; } .hft-pdp .hft-pdp-summary #somdn-form-submit-button, .hft-pdp.product .hft-pdp-summary .somdn-download-button{ background-color:var(--buy,#FBB915) !important; background-image:none !important; color:var(--buy-ink,#1B437D) !important; -webkit-text-fill-color:var(--buy-ink,#1B437D) !important; border:0 !important; } .hft-pdp .hft-pdp-summary #somdn-form-submit-button:hover, .hft-pdp.product .hft-pdp-summary .somdn-download-button:hover{ background-color:var(--buy-hover,#F2AE0C) !important; color:var(--buy-ink,#1B437D) !important; -webkit-text-fill-color:var(--buy-ink,#1B437D) !important; } /* ========================================================================== Native video/song/micro-lesson facade (replaces Snippet #42; theme-owned). ========================================================================== */ .hft-vfacade{ position:relative; aspect-ratio:16/9; border-radius:var(--hft-r-lg,22px); overflow:hidden; background:#000; box-shadow:0 26px 60px -34px rgba(18,48,90,.42); } .hft-vfacade-btn{ position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; background:none; cursor:pointer; display:block; } .hft-vfacade-poster{ width:100%; height:100%; object-fit:cover; display:block; } .hft-vfacade-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:74px; height:74px; padding-left:5px; border-radius:50%; background:var(--hft-cta); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 34px -8px rgba(0,0,0,.55); transition:.15s; } .hft-vfacade-btn:hover .hft-vfacade-play{ transform:translate(-50%,-50%) scale(1.08); background:var(--hft-cta-hover); } .hft-vfacade-iframe{ width:100%; height:100%; border:0; display:block; } /* ========================================================================== ROUND 3 fixes (Mark) — identical buttons, gallery placement, footer-style share icons, brand-navy links, single Reviews heading. ========================================================================== */ /* 1. Add to Cart (guest) and Download (member) are IDENTICAL except text — both the brand-kit BUY pill (sail yellow, navy ink). */ .hft-pdp.product .hft-pdp-summary #somdn-form-submit-button, .hft-pdp.product .hft-pdp-summary .somdn-download-button{ background-color:var(--buy,#FBB915) !important; background-image:none !important; color:var(--buy-ink,#1B437D) !important; -webkit-text-fill-color:var(--buy-ink,#1B437D) !important; border:0 !important; box-shadow:var(--buy-shadow,0 14px 28px -16px rgba(251,185,21,.9)) !important; } .hft-pdp.product .hft-pdp-summary #somdn-form-submit-button:hover, .hft-pdp.product .hft-pdp-summary .somdn-download-button:hover{ background-color:var(--buy-hover,#F2AE0C) !important; color:var(--buy-ink,#1B437D) !important; -webkit-text-fill-color:var(--buy-ink,#1B437D) !important; } /* 1b. Membership / subscription products are a "Sign Up" = brand-kit PRIMARY (CTA pink, white ink), NOT a Buy. Override the yellow Buy on the known membership product pages. body.postid-{id} bumps specificity past the Buy rules above. (Membership IDs incl. retired-for-existing-subscribers.) */ body.postid-987986073 .hft-pdp.product .hft-pdp-summary .single_add_to_cart_button, body.postid-987986073 .hft-pdp.product .hft-pdp-summary #somdn-form-submit-button, body.postid-987840537 .hft-pdp.product .hft-pdp-summary .single_add_to_cart_button, body.postid-987840537 .hft-pdp.product .hft-pdp-summary #somdn-form-submit-button, body.postid-987836574 .hft-pdp.product .hft-pdp-summary .single_add_to_cart_button, body.postid-987836574 .hft-pdp.product .hft-pdp-summary #somdn-form-submit-button, body.postid-987836566 .hft-pdp.product .hft-pdp-summary .single_add_to_cart_button, body.postid-987836566 .hft-pdp.product .hft-pdp-summary #somdn-form-submit-button, body.postid-16450 .hft-pdp.product .hft-pdp-summary .single_add_to_cart_button, body.postid-16450 .hft-pdp.product .hft-pdp-summary #somdn-form-submit-button, body.postid-16451 .hft-pdp.product .hft-pdp-summary .single_add_to_cart_button, body.postid-16451 .hft-pdp.product .hft-pdp-summary #somdn-form-submit-button, body.postid-16453 .hft-pdp.product .hft-pdp-summary .single_add_to_cart_button, body.postid-16453 .hft-pdp.product .hft-pdp-summary #somdn-form-submit-button, body.postid-9993 .hft-pdp.product .hft-pdp-summary .single_add_to_cart_button, body.postid-9993 .hft-pdp.product .hft-pdp-summary #somdn-form-submit-button, body.postid-9992 .hft-pdp.product .hft-pdp-summary .single_add_to_cart_button, body.postid-9992 .hft-pdp.product .hft-pdp-summary #somdn-form-submit-button, body.postid-987890122 .hft-pdp.product .hft-pdp-summary .single_add_to_cart_button, body.postid-987890122 .hft-pdp.product .hft-pdp-summary #somdn-form-submit-button { background-color:var(--hft-cta) !important; background-image:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important; box-shadow:0 14px 30px -16px rgba(214,51,123,.8) !important; } body.postid-987986073 .hft-pdp.product .hft-pdp-summary .single_add_to_cart_button:hover, body.postid-987986073 .hft-pdp.product .hft-pdp-summary #somdn-form-submit-button:hover, body.postid-987840537 .hft-pdp.product .hft-pdp-summary .single_add_to_cart_button:hover, body.postid-987840537 .hft-pdp.product .hft-pdp-summary #somdn-form-submit-button:hover, body.postid-987836574 .hft-pdp.product .hft-pdp-summary .single_add_to_cart_button:hover, body.postid-987836574 .hft-pdp.product .hft-pdp-summary #somdn-form-submit-button:hover, body.postid-987836566 .hft-pdp.product .hft-pdp-summary .single_add_to_cart_button:hover, body.postid-987836566 .hft-pdp.product .hft-pdp-summary #somdn-form-submit-button:hover, body.postid-16450 .hft-pdp.product .hft-pdp-summary .single_add_to_cart_button:hover, body.postid-16450 .hft-pdp.product .hft-pdp-summary #somdn-form-submit-button:hover, body.postid-16451 .hft-pdp.product .hft-pdp-summary .single_add_to_cart_button:hover, body.postid-16451 .hft-pdp.product .hft-pdp-summary #somdn-form-submit-button:hover, body.postid-16453 .hft-pdp.product .hft-pdp-summary .single_add_to_cart_button:hover, body.postid-16453 .hft-pdp.product .hft-pdp-summary #somdn-form-submit-button:hover, body.postid-9993 .hft-pdp.product .hft-pdp-summary .single_add_to_cart_button:hover, body.postid-9993 .hft-pdp.product .hft-pdp-summary #somdn-form-submit-button:hover, body.postid-9992 .hft-pdp.product .hft-pdp-summary .single_add_to_cart_button:hover, body.postid-9992 .hft-pdp.product .hft-pdp-summary #somdn-form-submit-button:hover, body.postid-987890122 .hft-pdp.product .hft-pdp-summary .single_add_to_cart_button:hover, body.postid-987890122 .hft-pdp.product .hft-pdp-summary #somdn-form-submit-button:hover { background-color:var(--hft-cta-hover) !important; color:#fff !important; -webkit-text-fill-color:#fff !important; } /* 2. Gallery/image fills its column instead of floating stranded to the left, and the media column flows with the page (no sticky "hanging" up top). */ .hft-pdp-media{ position:static !important; } .hft-pdp.product .woocommerce-product-gallery{ width:100% !important; float:none !important; max-width:100% !important; } /* 3. Share icons match the footer: soft circle, navy glyph, navy-fill on hover. (Beats the Elementor kit's sage `a` tint that was making them blue/green.) */ .hft-pdp .hft-pdp-share-btn{ background:var(--hft-cream,#FBF5EC) !important; border-color:transparent !important; color:var(--hft-navy) !important; -webkit-text-fill-color:var(--hft-navy) !important; } .hft-pdp .hft-pdp-share-btn:hover{ background:var(--hft-navy) !important; color:#fff !important; -webkit-text-fill-color:#fff !important; } .hft-pdp .hft-pdp-share-btn svg{ fill:currentColor; } /* 4. Text hyperlinks = brand navy (hover pink) — never the kit's sage. */ .hft-pdp .product_meta a, .hft-pdp .hft-pdp-prose a, .hft-pdp .hft-pdp-reviews a, .hft-pdp .woocommerce-noreviews a{ color:var(--hft-navy) !important; text-decoration:underline; } .hft-pdp .product_meta a:hover, .hft-pdp .hft-pdp-prose a:hover, .hft-pdp .hft-pdp-reviews a:hover{ color:var(--hft-cta) !important; } /* 5. "Reviews" appears once — hide WooCommerce's own title (we render the H2). */ .hft-pdp-reviews .woocommerce-Reviews-title{ display:none !important; } /* 6. Kill the page-wide magnifier cursor: legacy Snippet #109 (old gallery, enqueued only on products) sets `.hft-main{cursor:zoom-in}`, which collides with the theme's site
and — cursor being inherited — turns the whole PDP into a magnifier. Reset it. (Retire #109 in the sweep; its lightbox is a Deploy-2 native rebuild.) */ main.hft-main{ cursor:auto !important; } /* ========================================================================== SOW round (2026-07-22): #8 mobile image, #10 native video embed, #14 spacing, #15 membership note centering. ========================================================================== */ /* #8 — the media/summary columns must be allowed to shrink inside the grid, or the gallery/slider overflows the right edge on mobile. */ .hft-pdp-media, .hft-pdp-summary{ min-width:0; } .hft-pdp-media .woocommerce-product-gallery, .hft-pdp-media .hft-gallery, .hft-pdp-media .hft-slider, .hft-pdp-media .hft-vembed, .hft-pdp-media .hft-vfacade{ max-width:100%; } @media(max-width:899px){ /* Stack cleanly (media first = the video/poster sits at the top) and pin the media column + everything inside it to the viewport width so wide product images and the video never spill off the right edge, and a collapsed media column can't hide the video. */ .hft-pdp-grid{ min-width:0; display:block; } .hft-pdp-media{ width:100%; max-width:100%; margin:0 0 22px; overflow:hidden; } .hft-pdp-media img, .hft-pdp-media .woocommerce-product-gallery, .hft-pdp-media .woocommerce-product-gallery__wrapper, .hft-pdp-media .flex-viewport, .hft-pdp-media .woocommerce-product-gallery__image, .hft-pdp-media .hft-vembed, .hft-pdp-media .hft-vembed .rll-youtube-player{ max-width:100% !important; width:100% !important; } .hft-pdp-media img{ height:auto !important; } } /* #10 — native YouTube embed on the PDP (no facade overlay). */ .hft-vembed{ position:relative; aspect-ratio:16/9; width:100%; border-radius:var(--hft-r-lg,22px); overflow:hidden; background:#000; box-shadow:0 26px 60px -34px rgba(18,48,90,.42); } .hft-vembed-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; } /* SOW #6 — the video vanished on mobile: WP Rocket's LazyLoad swaps the