/* ========================================================================== Flowhub Product Card — "Neon dispensary" design Dark, high-contrast accent. Scoped entirely under .flowhub-product-card so it never bleeds into the Dispense-era product-card.php template or other .product-card skins (e.g. jardin-las-vegas-template.css). Design tokens (see design brief — originally royal-purple, replaced with the "moss" green ramp per explicit feedback; see the Flowhub Product Detail section's palette note further down for the ramp derivation): card-bg #12160f · border #232a1c · accent #597d36 · accent-light #b3cd98 on-accent #eef4e2 · text-primary #f4f7ee · text-secondary #aeb7a2 text-cbd #e7ecdf · text-muted #7f8a72 · text-faint #6c765f on-accent-dark #0f1a12 ========================================================================== */ .flowhub-product-card { /* Matches the product detail page's image-placeholder background (rgb(35, 42, 28), per explicit request) instead of the card's own original, slightly darker #12160f. */ background-color: #232a1c; border: 1px solid #232a1c; /* !important: this widget's own Elementor Style-tab CSS (generated per widget instance, e.g. ".elementor-element-eaa53bd .card{border-radius: 0px 0px 0px 0px}") is more specific than a single .flowhub-product-card class and loads later in — it wins the cascade on every instance that has ever had the card Style tab touched. Per explicit instruction, no Elementor widget settings are to be changed to fix this, so the radius is forced here instead. */ border-radius: 10px !important; overflow: hidden; display: flex; flex-direction: column; height: 100%; /* Padding lives here (once), on all 4 sides, instead of on the image and body separately — the image and the text body are both direct children of this padded box, so they always end up exactly the same width. */ padding: 12px; gap: 12px; transition: border-color 0.2s ease, box-shadow 0.2s ease; font-family: 'Space Grotesk', sans-serif; } /* No card-level hover effect (border/glow/scale) per explicit feedback — the design brief originally specced a border+glow hover here, removed on 2026-07-21. .zoom-on-hover is still neutralized so the generic products.css scale-on-hover rule doesn't leak in on this template either. */ .flowhub-product-card.zoom-on-hover:hover { transform: none; } /* ── Equal card height across a row ────────────────────────────────────────── Slick doesn't equalize slide height on its own, and the pre-init fallback grid in products.css explicitly floats cards at height:auto. Both are overridden here (scoped to this file, which only loads on Flowhub sites) so every card in a row/carousel matches its tallest sibling; each card's own flex-column + footer margin-top:auto then pins the price/button to a consistent bottom edge regardless of content length above it. */ .products-slider-container:not(.slick-initialized) { display: flex; flex-wrap: wrap; align-items: stretch; } .products-slider-container .slick-track { display: flex; } .products-slider-container .slick-slide { height: auto; display: flex; } .products-slider-container .slick-slide > div { display: flex; width: 100%; } .flowhub-product-card .card-img-top { position: relative; aspect-ratio: 1 / 1; background-color: #1a2016; border-radius: 10px !important; overflow: hidden; } .flowhub-product-card .card-img-top img.slider-image { width: 100%; height: 100%; object-fit: cover; } .flowhub-product-card .card-img-top.is-placeholder { color: #4a5540; } .flowhub-product-card .placeholder-image-icon { font-size: 2.5rem; color: #4a5540; } /* Deliberately NOT ".slider-image" — the archive widget's "Image" Style-tab section (widgets/class-archive.php) ships default Width/Height controls that print "{{WRAPPER}} .slider-image{width:300px !important;height: 300px !important}" even when nobody has touched that control in the editor (Elementor prints a control's default value, not just explicit overrides). !important in a stylesheet always outranks even an inline style, so nothing scoped to .slider-image can ever be forced to fill its container by default. Giving the placeholder its own class sidesteps that control entirely rather than fighting it. */ .flowhub-product-card .placeholder-image, .flowhub-product-detail .placeholder-image { width: 100%; height: 100%; object-fit: cover; display: block; } /* Sale / out-of-stock badge — top-left over the image */ .flowhub-product-card .product-badge { font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; padding: 5px 10px; border-radius: 20px; } .flowhub-product-card .product-badge.on-sale-badge { background-color: #597d36; color: #eef4e2; } .flowhub-product-card .product-badge.out-of-stock-badge { background-color: rgba(0, 0, 0, 0.55); color: #aeb7a2; } /* Strain pill — bottom-right over the image */ .flowhub-product-card .fh-strain-pill { position: absolute; bottom: 12px; right: 12px; font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; color: #0f1a12; background-color: #b3cd98; padding: 4px 10px; border-radius: 20px; } .flowhub-product-card .add-to-cart-card-button { /* !important on all four — cart.css's shared .add-to-cart-card-button rule sets background/border-radius unadorned but its own top/right/ border-radius carry !important, and products.css's plain .add-to-cart-card-button also targets background-color/color; forcing every themed property here avoids relying on specificity order against either file. */ background-color: #597d36 !important; color: #eef4e2 !important; border-radius: 50% !important; /* cart.css positions this at top:10px;right:10px relative to .card's OWN padding box (Bootstrap's .card sets position:relative), but .flowhub-product-card overrides .card's padding to 12px — so 10px lands 2px shy of the image below it. The "On Sale" badge, by contrast, is nested inside .card-img-top (no padding of its own) so its top:10px/left:10px is 12px(card padding) + 10px = 22px from the actual card edge. Matching that here keeps both corners visually aligned. */ top: 22px !important; right: 22px !important; transition: background-color 0.2s ease, color 0.2s ease; } .flowhub-product-card .add-to-cart-card-button:hover, .flowhub-product-card .add-to-cart-card-button:focus { /* Same hover fill as .add-to-cart-text-button, incl. :focus for the same reset.css fuchsia reason documented on that rule above. */ background-color: #3d5922 !important; color: #eef4e2 !important; } .flowhub-product-card .add-to-cart-card-button.disabled { color: #6c765f; } .flowhub-product-card .card-body { /* No padding of its own — it's a sibling of .card-img-top inside the card's own padded box (see .flowhub-product-card), so it's already exactly as wide as the image without adding a second inset. */ padding: 0; display: flex; flex-direction: column; gap: 13px; flex: 1; } .flowhub-product-card .product-info { display: flex; flex-direction: column; gap: 0; } .flowhub-product-card .fh-eyebrow { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #7f8a72; margin-bottom: 4px; } .flowhub-product-card .card-title { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; line-height: 1.12; color: #f4f7ee; margin: 0; /* Reserve space for 2 lines even when a title only needs 1 — otherwise the THC/CBD spec row starts higher on short-title cards than on neighboring long-title cards, so the two rows visually misalign across a row/carousel. The base .card-title rule (products.css) already clamps at 2 lines; this just stops it collapsing below that. */ min-height: calc(1.12em * 2); } .flowhub-product-card .fh-spec-row { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 16px; padding: 11px 0; margin-top: 13px; border-top: 1px solid #232a1c; border-bottom: 1px solid #232a1c; } .flowhub-product-card .fh-spec { flex-shrink: 0; } .flowhub-product-card .fh-spec-size { flex-shrink: 1; min-width: 0; margin-left: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600; color: #aeb7a2; text-align: right; } .flowhub-product-card .fh-spec-label { font-family: 'Space Mono', monospace; font-size: 9px; color: #6c765f; } .flowhub-product-card .fh-spec-value { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; } .flowhub-product-card .fh-spec-value.fh-spec-thc { color: #b3cd98; } .flowhub-product-card .fh-spec-value.fh-spec-cbd { color: #e7ecdf; } .flowhub-product-card .fh-card-footer { margin-top: auto; display: flex; flex-direction: column; gap: 12px; } .flowhub-product-card .fh-price-row { display: flex; align-items: baseline; gap: 7px; } .flowhub-product-card .fh-price { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; color: #f4f7ee; } .flowhub-product-card .fh-price-uom { font-size: 12px; font-weight: 400; color: #6c765f; } .flowhub-product-card .fh-price-old { font-size: 14px; color: #6c765f; text-decoration: line-through; } .flowhub-product-card .add-to-cart-text-button { width: 100%; border: none; background-color: #597d36; color: #eef4e2; font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; padding: 12px 17px; border-radius: 24px; cursor: pointer; transition: filter 0.18s ease; } .flowhub-product-card .add-to-cart-text-button:hover:not(:disabled):not([aria-disabled="true"]), .flowhub-product-card .add-to-cart-text-button:focus:not(:disabled):not([aria-disabled="true"]) { /* :focus is included here too — the theme's reset.css has a demo "button:focus,button:hover{background-color:#c36;color:#fff}" (fuchsia) rule, and a button retains :focus after being clicked in most browsers, so without this the fuchsia flashed right after Add to Cart was clicked even though :hover alone looked fine. */ background-color: #3d5922; color: #eef4e2; } .flowhub-product-card .add-to-cart-text-button.btn-secondary, .flowhub-product-card .add-to-cart-text-button[aria-disabled="true"] { background-color: #232a1c; color: #6c765f; } /* ========================================================================== "Choose a Weight" modal — "Neon dispensary" row-list + radios (1b) Structurally a stock Bootstrap modal (#fhWeightModal > .modal-dialog > .modal-content); only what's inside .modal-content is custom-classed. Selectors are NOT scoped under .flowhub-product-card (the modal is a page-level singleton, not a card descendant) but this file only loads when ECOMM_PLATFORM === 'flowhub', same gating as the card above. ========================================================================== */ /* Elementor's own "Weight Modal" Kit tab (core/class-weight-modal-global-styles.php, compiled into wp-content/uploads/elementor/css/post-.css) ships DEFAULT values for several of these same selectors — e.g. "#fhWeightModal .fh-weight-dialog{max-width:480px}", "#fhWeightModal .fh-modal-brand{color:#888888}" — at ID+class specificity, higher than a bare class here, and that stylesheet loads after plugin CSS. Nobody customized this kit tab; these are just its stock defaults, but they still win the cascade. Selectors below are deliberately scoped one level deeper (via #fhWeightModal, the element's own id, or an extra ancestor class already in the markup) to clear each specific kit rule — see puf-plug-flowhub-weight-modal-design.md for the full conflict list this was reverse-engineered from. */ #fhWeightModal .modal-dialog.fh-weight-dialog { max-width: 440px; } #fhWeightModal .modal-content { position: relative; background-color: #12160f; border: 1px solid #232a1c; border-radius: 20px; padding: 26px 24px 24px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7); font-family: 'Space Grotesk', sans-serif; } /* #fhWeightModal-scoped (not just .fh-modal-close alone): the active theme's reset.css has a demo "[type=button], [type=submit], button { border:1px solid #cc3366; display:inline-block; text-align:center; ... }" rule at the SAME specificity as a bare single class, loaded after this file — it silently wins ties by source order. Every button-based element in this modal is scoped under the #fhWeightModal id (specificity 1,1,0) to clear that theme rule (0,1,0) without needing !important. The product card's buttons never had this problem because they're already matched via two classes (e.g. .flowhub-product-card .add-to-cart-text-button = 0,2,0). */ #fhWeightModal .fh-modal-close { /* appearance:none — the theme reset also forces `appearance:button` on every [type=button], which makes some browsers render the native OS widget skin (ignoring author background/color, most visible on a :disabled state) instead of our CSS. */ appearance: none; position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #2c3423; background: transparent; display: flex; align-items: center; justify-content: center; color: #8a8f7f; font-size: 20px; line-height: 1; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } #fhWeightModal .fh-modal-close:hover, #fhWeightModal .fh-modal-close:focus { border-color: #597d36; color: #b3cd98; background: transparent; } .fh-modal-header { margin-bottom: 20px; } #fhWeightModal .fh-modal-header .fh-modal-brand { margin: 0; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #7f8a72; } #fhWeightModal .fh-modal-header .fh-modal-name { margin: 4px 0 0; font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 700; line-height: 1.25; color: #b3cd98; } .fh-modal-choose-title { margin: 14px 0 0; font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 700; color: #eef4e2; } /* Targeted by its own id (#fhWeightOptions), not just .fh-weight-grid — the kit tab's "Weight Tiles" section outputs grid-template-columns/gap on "#fhWeightModal .fh-weight-grid" (kept from when this was a 3-col grid); #fhWeightModal + #fhWeightOptions (two ids) outranks that regardless. */ #fhWeightModal #fhWeightOptions { display: flex; flex-direction: column; gap: 8px; } #fhWeightModal .fh-weight-option { appearance: none; display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 15px; border: 1.5px solid #232a1c; border-radius: 11px; background: #171c13; cursor: pointer; text-align: left; transition: border-color 0.15s ease, background-color 0.15s ease; } #fhWeightModal .fh-weight-option.selected { background: rgba(89, 125, 54, 0.14); border-color: #597d36; } .fh-opt-radio { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #3a4630; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s ease; } .fh-weight-option.selected .fh-opt-radio { border-color: #597d36; } .fh-opt-radio::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #597d36; opacity: 0; transition: opacity 0.15s ease; } .fh-weight-option.selected .fh-opt-radio::after { opacity: 1; } .fh-opt-text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; } /* #fhWeightModal .fh-weight-option ancestor added (not just .fh-opt-label) to outrank the kit tab's "#fhWeightModal .fh-opt-label{color:#666666}" default (see the .fh-weight-dialog comment above for the full pattern). */ #fhWeightModal .fh-weight-option .fh-opt-label { font-family: 'Space Grotesk', sans-serif; font-size: 14.5px; font-weight: 600; color: #e7ecdf; } #fhWeightModal .fh-weight-option.selected .fh-opt-label { color: #eef4e2; } .fh-opt-sub { margin-top: 1px; font-family: 'Space Mono', monospace; font-size: 11px; color: #7f8a72; } #fhWeightModal .fh-weight-option .fh-opt-price { flex: 0 0 auto; font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; color: #f4f7ee; } #fhWeightModal .fh-weight-option.selected .fh-opt-price { color: #b3cd98; } #fhWeightModal .fh-weight-add-btn { appearance: none; width: 100%; margin-top: 20px; border: none; padding: 14px; border-radius: 26px; font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; text-align: center; transition: filter 0.18s ease; } /* !important + "body #fhWeightModal #fhWeightAddBtn" — the "Add to Bag Button" kit tab section outputs "#fhWeightModal #fhWeightAddBtn:disabled {background-color:#f0f0f0 !important;border-color:#f0f0f0 !important; color:#bbbbbb !important}" and "...#fhWeightAddBtn:not(:disabled) {color:#ffffff !important}" by default. !important beats any non- !important rule regardless of specificity — matching specificity alone (as used everywhere else in this file) isn't enough once BOTH sides are !important, because then it's a genuine tie decided by source order, and Elementor's kit CSS loads after plugin CSS. The extra leading "body" type-selector breaks that tie by specificity instead of relying on load order — this is the one other deliberate !important exception besides the product card's border-radius fix. */ body #fhWeightModal #fhWeightAddBtn:disabled { background: #1c2117 !important; border-color: #1c2117 !important; color: #4f5a44 !important; cursor: not-allowed; } body #fhWeightModal #fhWeightAddBtn:not(:disabled) { background: #597d36; color: #eef4e2 !important; cursor: pointer; } #fhWeightModal .fh-weight-add-btn:not(:disabled):hover, #fhWeightModal .fh-weight-add-btn:not(:disabled):focus { filter: brightness(1.1); } /* ========================================================================== Product slider arrows — royal-purple palette instead of the theme's default --e-global-color-primary/-secondary (set in products.css .slick- arrow, !important). Scoped under .products-slider — the stable wrapper around both the desktop slider and the mobile-nav container Slick moves the arrow buttons into at small breakpoints — so both states stay covered. This file only loads when ECOMM_PLATFORM === 'flowhub', so this never touches non-Flowhub sliders (store banner / offers / images slider use their own wrapper classes, not .products-slider). ========================================================================== */ .products-slider .slick-arrow, .products-slider .prod-slick-prev, .products-slider .prod-slick-next { background-color: #597d36 !important; color: #eef4e2 !important; } .products-slider .slick-arrow:hover, .products-slider .prod-slick-prev:hover, .products-slider .prod-slick-next:hover { background-color: #3d5922 !important; color: #eef4e2 !important; } .products-slider .prod-slick-prev:focus, .products-slider .prod-slick-next:focus { background-color: #597d36 !important; } /* "View all" link — same look as the card's Add to Cart button (.flowhub-product-card .add-to-cart-text-button above): same fill, text color, and hover step down the royal ramp, just sized for an inline header link instead of a full-width card footer button. */ .products-slider .view-all-link { display: inline-flex; align-items: center; background-color: #597d36; color: #eef4e2; font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; padding: 8px 16px; border-radius: 24px; transition: background-color 0.18s ease; } .products-slider .view-all-link:hover { background-color: #3d5922; color: #eef4e2; } /* ========================================================================== Flowhub Product Detail — full PDP, "Neon dispensary" (Product Page.dc.html brief). Reuses several card classes verbatim (.card-img-top, .fh-eyebrow, .fh-strain-pill, .product-badge, .add-to-cart-text-button, …) re-scoped under .flowhub-product-detail / .fh-detail-purchase. Deliberately NOT built from this widget: the brief's own header/footer (that's real page chrome — the site's actual Elementor header/footer renders around this widget already) and a star-rating row (Flowhub products carry no review/rating data — see Flowhub_Products; inventing one would violate the "adapt to real data" rule). The brief's generic "same-day delivery / 21+" legal line was dropped too — that's storefront policy copy with no backing setting, not per-product data this widget has any business fabricating. Accent palette — this widget only. Originally the card/modal's royal- purple, replaced per explicit feedback ("el violeta... me parece muy agresivo") with a "moss" green ramp derived from the same hue as the image placeholder's #232a1c (~90° hue in HSL). This ramp is local to the product detail widget — the card, weight modal, and slider keep their own royal-purple accent untouched. moss-0 (on-accent / light text) #eef4e2 moss-3 (accent-light) #b3cd98 moss-5 (accent / main fill) #597d36 moss-7 (accent hover / dark) #3d5922 ========================================================================== */ .flowhub-product-detail-wrap { font-family: 'Space Grotesk', sans-serif; } .fh-detail-breadcrumb { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.06em; color: #6c765f; margin-bottom: 20px; } .fh-detail-breadcrumb a { color: #6c765f; text-decoration: none; } .fh-detail-breadcrumb a:hover { color: #b3cd98; } .fh-detail-breadcrumb-sep { margin: 0 6px; } .fh-detail-breadcrumb-current { color: #aeb7a2; } .flowhub-product-detail { display: flex; gap: 40px; align-items: flex-start; } .flowhub-product-detail .fh-detail-media { flex: 0 0 420px; display: flex; flex-direction: column; gap: 14px; } .flowhub-product-detail .card-img-top { position: relative; aspect-ratio: 1 / 1; background-color: #232a1c; border-radius: 18px; overflow: hidden; } .flowhub-product-detail .card-img-top img.slider-image { width: 100%; height: 100%; object-fit: cover; } .flowhub-product-detail .placeholder-image-icon { font-size: 3rem; color: #4a5540; } .flowhub-product-detail .product-badge { position: absolute; top: 14px; left: 14px; font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 20px; } .flowhub-product-detail .product-badge.on-sale-badge { background-color: #597d36; color: #eef4e2; } .flowhub-product-detail .product-badge.out-of-stock-badge { background-color: rgba(0, 0, 0, 0.55); color: #aeb7a2; } .fh-detail-thumbs { display: flex; gap: 12px; } /* ".fh-detail-thumbs" ancestor — same "[type=button]" tie as the weight options above (theme reset.css vs. a bare single class); also covers :hover/:focus explicitly since this button had no override for either and would otherwise pick up the theme's fuchsia button:hover/:focus. */ .fh-detail-thumbs .fh-detail-thumb { appearance: none; flex: 1; aspect-ratio: 1 / 1; padding: 0; border-radius: 12px; border: 1px solid #232a1c; background: #1a2013; overflow: hidden; cursor: pointer; transition: outline 0.15s ease; } .fh-detail-thumbs .fh-detail-thumb:hover, .fh-detail-thumbs .fh-detail-thumb:focus { background: #1a2013; border-color: #3a4630; } .fh-detail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .fh-detail-thumb.selected { outline: 2px solid #597d36; outline-offset: 0; border-color: transparent; } .fh-detail-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; } .fh-detail-top-row { display: flex; align-items: center; gap: 10px; } .fh-detail-info .fh-eyebrow { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #7f8a72; } .fh-detail-info .fh-strain-pill { font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; color: #0f1a12; background-color: #b3cd98; padding: 3px 10px; border-radius: 20px; } .fh-detail-title { font-size: 34px; font-weight: 700; line-height: 1.08; /* Near-white, matching the same title-text token used everywhere else on this site's dark moss theme (.flowhub-product-card .card-title, etc.) — the page shell this widget actually renders on is dark, not the light default the previous moss-green choice assumed. */ color: #f4f7ee; margin: 0; } .fh-detail-chips { display: flex; gap: 10px; } .fh-detail-chip { flex: 1; border: 1px solid #232a1c; border-radius: 12px; padding: 12px 14px; background: #12160f; } .fh-detail-chip-label { display: block; font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 0.1em; color: #6c765f; margin-bottom: 2px; } .fh-detail-chip-value { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; color: #f4f7ee; } .fh-detail-chip-value.fh-spec-thc { color: #b3cd98; } .fh-detail-chip-value.fh-spec-cbd { color: #e7ecdf; } .fh-detail-description { font-size: 14px; line-height: 1.65; color: #aeb7a2; margin: 0; } /* ── Buy box: weight selector + quantity + add to cart ─────────────────── */ .fh-detail-purchase { display: flex; flex-direction: column; gap: 16px; } .fh-detail-weight-label { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; color: #597d36; margin-bottom: 10px; } .fh-detail-weight-list { display: flex; flex-direction: column; gap: 8px; } /* ".fh-detail-weight-list" ancestor (not just the bare ".fh-pdp-weight-option" class) — the theme's reset.css ships "[type=button],[type=submit],button {background-color:transparent;border:1px solid #c36;border-radius:3px; color:#c36;padding:.5rem 1rem}". These buttons carry type="button", so that rule matches at the SAME (0,1,0) specificity as a bare single class; with no ancestor, the tie is decided by source order and the theme wins (same conflict already documented for the weight modal and the qty stepper hover above). The extra ancestor class here bumps this to (0,2,0), clearing it regardless of load order. */ .fh-detail-weight-list .fh-pdp-weight-option { appearance: none; display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 15px; border: 1.5px solid #232a1c; border-radius: 12px; background: #12160f; cursor: pointer; text-align: left; transition: border-color 0.15s ease, background-color 0.15s ease; } .fh-detail-weight-list .fh-pdp-weight-option.selected { background: rgba(89, 125, 54, 0.14); border-color: #597d36; } .fh-pdp-weight-option .fh-opt-radio { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #3a4630; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s ease; } /* Filled solid instead of a ring + inner dot — the generic ".fh-opt-radio ::after" dot (shared with the "Choose a Weight" modal) rendered off-center here, and a fully-filled circle is a simpler, equally clear "selected" affordance that sidesteps the issue entirely. Explicit opacity:0 on the inherited ::after keeps that dot from ever showing through underneath. */ .fh-pdp-weight-option.selected .fh-opt-radio { border-color: #597d36; background: #597d36; } .fh-pdp-weight-option.selected .fh-opt-radio::after { opacity: 0; } /* Must repeat background-color/color here too, not just border-color — the theme's "button:hover{background-color:#c36;color:#fff}" (reset.css) sets those two specific properties, and a property is only overridden if the winning rule actually declares that SAME property; a more-specific rule that stays silent on background-color/color doesn't touch them. */ .fh-detail-weight-list .fh-pdp-weight-option:not(.selected):hover, .fh-detail-weight-list .fh-pdp-weight-option:not(.selected):focus { border-color: #3a4630; background-color: #12160f; color: inherit; } .fh-pdp-weight-option .fh-opt-text { flex: 1 1 auto; display: flex; flex-direction: column; } .fh-pdp-weight-option .fh-opt-label { font-family: 'Space Grotesk', sans-serif; font-size: 14.5px; font-weight: 600; color: #e7ecdf; } .fh-pdp-weight-option.selected .fh-opt-label { color: #eef4e2; } .fh-pdp-weight-option .fh-opt-sub { font-family: 'Space Mono', monospace; font-size: 11px; color: #7f8a72; margin-top: 1px; } .fh-pdp-weight-option .fh-opt-price { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; color: #f4f7ee; } .fh-pdp-weight-option.selected .fh-opt-price { color: #b3cd98; } .fh-detail-qty-row { display: flex; gap: 12px; align-items: stretch; } .fh-detail-qty { display: flex; align-items: center; border: 1px solid #232a1c; border-radius: 26px; background: #12160f; overflow: hidden; } .fh-detail-qty button { appearance: none; border: none; background: none; color: #b3cd98; font-size: 18px; width: 44px; height: 52px; cursor: pointer; } /* The theme's reset.css ships a demo "button:hover{background-color:#c36}" (fuchsia) rule — same conflict pattern as the weight modal buttons (see the #fhWeightModal comments above). ".fh-detail-qty button:hover" is more specific than the theme's bare "button:hover", so it wins without needing !important. */ .fh-detail-qty button:hover, .fh-detail-qty button:focus { background-color: #597d36; color: #eef4e2; } .fh-pdp-qty-value { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; color: #eef4e2; min-width: 26px; text-align: center; } .fh-detail-purchase .add-to-cart-text-button { flex: 1 1 auto; border: none; background-color: #597d36; color: #eef4e2; font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; padding: 0 24px; border-radius: 26px; cursor: pointer; transition: background-color 0.18s ease; } .fh-detail-purchase .add-to-cart-text-button:hover:not(:disabled):not([aria-disabled="true"]), .fh-detail-purchase .add-to-cart-text-button:focus:not(:disabled):not([aria-disabled="true"]) { background-color: #3d5922; } .fh-detail-purchase .add-to-cart-text-button.btn-secondary, .fh-detail-purchase .add-to-cart-text-button[aria-disabled="true"] { background-color: #232a1c; color: #6c765f; cursor: not-allowed; } .fh-detail-stock-line { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #aeb7a2; background-color: #1a2016; border: 1px solid #232a1c; border-radius: 20px; padding: 5px 12px; align-self: flex-start; } .fh-detail-stock-dot { width: 6px; height: 6px; border-radius: 50%; background: #7a8a5e; flex-shrink: 0; } /* ── Other options (different variants) / effects / terpenes ───────────── */ .fh-detail-variants-label, .fh-detail-effects-label, .fh-detail-terpenes-label { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; /* Was the "text-faint" token (#6c765f) — too close to the page's own dark moss background to read as a label at a glance. Bumped to "text-muted" (#7f8a72, see palette note at the top of this file). */ color: #7f8a72; margin-bottom: 8px; } .fh-detail-variants-list { display: flex; flex-direction: column; gap: 8px; } .fh-detail-variant-option { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; /* An explicit fill (was transparent, relying only on a border the same color as the page background — invisible as a card, and left the text floating with nothing behind it to contrast against). */ background-color: #2c3423; border: 1px solid #3d4a30; border-radius: 10px; /* !important: the theme's global kit CSS has a bare `a{color:var(--e- global-color-text)}` rule, and on this site that variable resolves to a gray (#7A7A7A) — ties in source order often enough with the plain class selector here to win, same recurring reset.css/kit-CSS specificity pattern fixed elsewhere in this stylesheet. */ color: #f4f7ee !important; font-size: 14px; text-decoration: none; transition: border-color 0.15s ease, background-color 0.15s ease; } .fh-detail-variant-option span { color: #f4f7ee !important; } .fh-detail-variant-option:hover { background-color: #34402a; border-color: #597d36; } .fh-detail-effects-list { display: flex; flex-wrap: wrap; gap: 9px; } .fh-detail-effect-tag { font-family: 'Space Grotesk', sans-serif; font-size: 12.5px; font-weight: 600; color: #b3cd98; background: rgba(89, 125, 54, 0.12); border: 1px solid #2c3423; padding: 7px 14px; border-radius: 20px; } .fh-detail-terpenes-list { display: flex; flex-wrap: wrap; gap: 8px; } .fh-detail-terpene { font-size: 12px; color: #aeb7a2; background-color: #1a2016; border: 1px solid #232a1c; border-radius: 20px; padding: 5px 12px; } .fh-detail-terpene em { font-style: normal; /* Was "text-faint" (#6c765f) — same low-contrast issue as the section labels above. Bumped to "text-muted" (#7f8a72). */ color: #7f8a72; } /* ── Related products ("You might also like") — reuses the card component itself, just laid out in its own grid. ─────────────────────────────── */ .fh-detail-related { margin-top: 48px; } .fh-detail-related-label { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; color: #3d5922; margin-bottom: 16px; } .fh-detail-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .fh-detail-related-grid .flowhub-product-card { height: auto; } .fh-detail-empty { padding: 40px; text-align: center; color: #7f8a72; font-family: 'Space Grotesk', sans-serif; } @media (max-width: 900px) { .flowhub-product-detail { flex-direction: column; } .flowhub-product-detail .fh-detail-media { flex-basis: auto; } .fh-detail-related-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .fh-detail-related-grid { grid-template-columns: 1fr; } } /* ========================================================================== Flowhub Age Gate — "Neon dispensary" (moss green), modeled on the "Choose a Weight" modal's row-list look (#fhWeightModal above) since the brief for this one asked to base it on that. Overrides age-gate.css's generic Elementor-Kit-CSS-var styling (--e-global-color-primary etc.) — that file is written to auto-match ANY site's kit branding by default, which is the right call generically, but this specific site wants the same fixed Neon Dispensary look as the rest of its Flowhub UI instead. "body" ancestor prefix on every rule, same trick as "body #fhWeightModal #fhWeightAddBtn" above: age-gate.css and this file both hook wp_enqueue_scripts at the same default priority, so which one prints later in isn't guaranteed — the extra ancestor wins the tie via specificity instead of relying on load order. ========================================================================== */ body #age-gate-modal.fh-age-gate .modal-content { background: #12160f; color: #f4f7ee; border: 1px solid #232a1c; border-radius: 20px; padding: 30px 26px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7); } body #age-gate-modal.fh-age-gate .age-gate__message { color: #f4f7ee; font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; margin: 4px 0 22px; } body #age-gate-modal .fh-age-gate__options { gap: 10px; } /* Row style lifted from #fhWeightModal .fh-weight-option — dark rounded box, left-aligned stacked text instead of that row's radio+price, since there's no selection state or price here, just a click-through choice. */ body #age-gate-modal .fh-age-gate__option { flex-direction: column; align-items: flex-start; gap: 4px; padding: 15px 18px; border: 1.5px solid #232a1c; border-radius: 12px; background: #171c13; text-align: left; transition: border-color 0.15s ease, background-color 0.15s ease; } body #age-gate-modal .fh-age-gate__option:hover, body #age-gate-modal .fh-age-gate__option:focus { border-color: #597d36; background: rgba(89, 125, 54, 0.14); } /* Label-above-title mirrors the card's eyebrow-above-title pairing (.fh-eyebrow / .card-title) — same muted-mono-caps + bold-sans pattern. */ body #age-gate-modal .fh-age-gate__option-label { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.1em; color: #7f8a72; } body #age-gate-modal .fh-age-gate__option-title { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; color: #f4f7ee; } body #age-gate-modal .fh-age-gate__option--deny { align-items: center; border-color: transparent; background: transparent; padding: 10px 18px; } body #age-gate-modal .fh-age-gate__option--deny .fh-age-gate__option-title { font-size: 13px; font-weight: 600; color: #6c765f; } body #age-gate-modal .fh-age-gate__option--deny:hover, body #age-gate-modal .fh-age-gate__option--deny:focus { border-color: transparent; background: transparent; } body #age-gate-modal .fh-age-gate__option--deny:hover .fh-age-gate__option-title, body #age-gate-modal .fh-age-gate__option--deny:focus .fh-age-gate__option-title { color: #aeb7a2; } body #age-gate-modal .fh-age-gate__denied-heading { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 700; color: #f4f7ee; margin-bottom: 8px; } body #age-gate-modal .fh-age-gate__denied-message { font-family: 'Space Grotesk', sans-serif; font-size: 14px; color: #aeb7a2; }