style element", not the tag. * * SELECTOR DISCIPLINE: every rule scoped to a store wrapper class * (.c-store-product-detail, .c-store-product-list, .c-store-cart, * .c-store-checkout, .c-store-order-success) so non-store pages stay * unaffected. The token block on body is the one exception - CSS custom * properties don't render, they just sit unused elsewhere. * * TARGETS (framework class names this overlay depends on - grep against * GHL changelog when major updates land): * .c-store-product-detail, .c-store-product-list, .c-store-cart, * .c-store-checkout, .c-store-order-success, .c-product-details, * .hl-product-detail-product-name, .hl-product-detail-product-price, * .primary-btn, .secondary-btn, .write-review-btn, * .variant-dropdown, .hl-quantity-input, .quantity-container, * .ec-subscription-pill, .ec-review-stars, .star-rating, * .drawer, .drawer__content, .product-detail-container, * .hl-product-image, .ec-subscription-pills-container * * Design source: docs/plans/2026-06-03-shop-ghl-template-overlay-design.md */ /* ---- 1. Brand fonts (GHL Media URLs, uploaded 2026-06-08) ---- */ @font-face{font-family:'Gotham';src:url('https://assets.cdn.filesafe.space/ujOMNrQuS7ER8wa2aDAZ/media/6a267e7949e55f8519aa1c64.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Gotham';src:url('https://assets.cdn.filesafe.space/ujOMNrQuS7ER8wa2aDAZ/media/6a267e79da24932f1259cb8d.woff2') format('woff2');font-weight:500;font-display:swap} @font-face{font-family:'Gotham';src:url('https://assets.cdn.filesafe.space/ujOMNrQuS7ER8wa2aDAZ/media/6a267e79f607d4002bc73b49.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Wild Spirit';src:url('https://assets.cdn.filesafe.space/ujOMNrQuS7ER8wa2aDAZ/media/6a267e7949e55f8519aa1c65.woff2') format('woff2');font-weight:400;font-display:swap} /* Museo Slab = the official site's heading font (h1-h6). Used for the injected footer headings so the store footer matches the site footer exactly. Hosted on GHL Media (woff2, generated from the official .otf - see overlay-blocks/README.md font table; byte-size identifies each: 24892=300, 25364=700). The 700 face is internally usWeightClass 600, which is why the footer's font-weight:600 maps here. */ @font-face{font-family:'Museo Slab';src:url('https://assets.cdn.filesafe.space/ujOMNrQuS7ER8wa2aDAZ/media/6a26d8362db4a9d19ad92040.woff2') format('woff2');font-weight:300;font-display:swap} @font-face{font-family:'Museo Slab';src:url('https://assets.cdn.filesafe.space/ujOMNrQuS7ER8wa2aDAZ/media/6a26d8362db4a9d19ad92041.woff2') format('woff2');font-weight:700;font-display:swap} /* ---- 2. Token block - brand spine, single retune point ---- */ body { --sage: #cacd92; --sage-dark: #b5b87a; --sage-tint: rgba(202, 205, 146, 0.10); --sage-tint-20: rgba(217, 220, 178, 0.20); --body: #70706f; --heading: #352A2A; --tint-bg: #F7F8F0; --font-sans: 'Gotham', 'Helvetica Neue', Arial, sans-serif; --font-heading: 'Museo Slab', Georgia, serif; --font-script: 'Wild Spirit', 'Brush Script MT', cursive; --radius-pill: 9999px; --radius-card: 0.75rem; --radius-input: 0.5rem; } /* ---- 3. Reset - kill GHL defaults we always override (scoped to store) ---- */ .c-store-product-detail, .c-store-product-list, .c-store-cart, .c-store-checkout, .tgpc-ty { font-family: var(--font-sans); color: var(--body); -webkit-font-smoothing: antialiased; line-height: 1.5; } /* GHL sets per-element fonts on its native store components - product name and price render in Merriweather (serif), cards/pills in Lato, some controls in Inter - and those element-level rules beat the wrapper font above. Force the brand sans on every store descendant so the storefront is consistently Gotham. The store icons (box image, chevrons, stars) are SVG, not an icon font, so nothing breaks. The Wild Spirit accent (.tgpc-script) re-asserts itself: its two-class selector outranks this single-class universal rule, and it carries its own !important (see Typography below). */ .c-store-product-detail *, .c-store-product-list *, .c-store-cart *, .c-store-checkout *, .tgpc-ty * { font-family: var(--font-sans) !important; } /* ---- 4. Typography ---- */ /* Hide GHL's native product title ONLY on PDPs that carry our replacement two-tone H1 (the pdp-title.html Custom Code block, which renders .tgpc-pdp-title inside .c-store-product-detail). On a product without that block - a new or test product - the native title falls back into view instead of leaving the page titleless. The :has() pattern is the same one used for the checkout address-block hide below. */ .c-store-product-detail:has(.tgpc-pdp-title) .hl-product-detail-product-name { display: none !important; } /* Our own H1 markup (rendered via Custom Code block) */ .c-store-product-detail .tgpc-h1, .c-store-product-list .tgpc-h1, .tgpc-ty .tgpc-h1 { font-family: var(--font-sans) !important; font-weight: 700; line-height: 1.15; color: var(--body); font-size: 2.25rem; margin: 0 0 1rem; text-align: center !important; } @media (min-width: 768px) { .c-store-product-detail .tgpc-h1, .c-store-product-list .tgpc-h1, .tgpc-ty .tgpc-h1 { font-size: 3rem; } } .c-store-product-detail .tgpc-h2, .c-store-product-list .tgpc-h2, .tgpc-ty .tgpc-h2 { font-family: var(--font-sans) !important; font-weight: 700; line-height: 1.15; color: var(--body); font-size: 1.875rem; margin: 0 0 0.75rem; text-align: center !important; } @media (min-width: 768px) { .c-store-product-detail .tgpc-h2, .c-store-product-list .tgpc-h2, .tgpc-ty .tgpc-h2 { font-size: 2.25rem; } } /* Two-tone helper - inside H1/H2 */ .c-store-product-detail .sage, .c-store-product-list .sage, .tgpc-ty .sage { color: var(--sage); } /* Lead paragraph */ .c-store-product-detail .tgpc-lead, .c-store-product-list .tgpc-lead, .tgpc-ty .tgpc-lead { font-size: 1.125rem; color: var(--body); text-align: center !important; margin: 0 auto !important; max-width: 42rem; } @media (min-width: 768px) { .c-store-product-detail .tgpc-lead, .c-store-product-list .tgpc-lead, .tgpc-ty .tgpc-lead { font-size: 1.25rem; } } /* Wild Spirit signature (use sparingly - DESIGN.md says max one per page) */ .c-store-product-detail .tgpc-script, .c-store-product-list .tgpc-script, .tgpc-ty .tgpc-script { font-family: var(--font-script) !important; font-weight: 400; color: var(--sage); line-height: 1; font-size: 2.75rem; display: block; margin-bottom: 1.25rem; } @media (min-width: 768px) { .c-store-product-detail .tgpc-script, .c-store-product-list .tgpc-script, .tgpc-ty .tgpc-script { font-size: 3.5rem; } } /* ---- 5. Buttons ---- */ /* GHL's primary Add-to-Cart button - sage pill. The cart "Checkout" (.hl-checkout-btn) and checkout "Make Payment" (.payment-btn) buttons ship blue/square from GHL; they get the same primary treatment here. */ .c-store-product-detail .primary-btn, .c-store-product-list .primary-btn, .c-store-cart .primary-btn, .c-store-checkout .primary-btn, .tgpc-ty .primary-btn, .c-store-cart .hl-checkout-btn, .c-store-checkout .payment-btn { background-color: var(--sage) !important; color: var(--body) !important; font-family: var(--font-sans) !important; font-weight: 500; font-size: 1.0625rem; padding: 1rem 2.5rem !important; border-radius: var(--radius-pill) !important; border: none !important; box-shadow: 0 10px 15px -3px rgba(202, 205, 146, 0.25) !important; transition: background-color 0.2s ease, box-shadow 0.2s ease; cursor: pointer; } /* GHL rings its buttons with `box-shadow: 0 0 1px 1px var(--secondary)` on hover (its blue, #188bf6) and scales them 1.02. On the PDP and cart that rule is scoped to a per-page generated id, so it outspecifies any class chain; in the drawer it matches at equal specificity but lands later in source order. Either way it beat our sage shadow, which is why hovering showed a blue ring. The scale is what made it flicker: the button grows under a stationary cursor, the pointer ends up outside the new bounds, hover drops, it shrinks back, and the cycle repeats at the edges. So the shadow needs !important and the transform has to be pinned. The sage shadow lift is the hover affordance now. */ .c-store-product-detail .primary-btn:hover, .c-store-product-list .primary-btn:hover, .c-store-cart .primary-btn:hover, .c-store-checkout .primary-btn:hover, .tgpc-ty .primary-btn:hover, .c-store-cart .hl-checkout-btn:hover, .c-store-checkout .payment-btn:hover { background-color: var(--sage-dark) !important; box-shadow: 0 20px 25px -5px rgba(202, 205, 146, 0.40) !important; transform: none !important; } /* GHL nests the button label in a child span with its own white colour - pull it to --body so it reads on sage. */ .c-store-cart .hl-checkout-btn *, .c-store-checkout .payment-btn * { color: var(--body) !important; } /* GHL's secondary (Buy Now / Outline) button - sage ghost. The cart/checkout "Continue Shopping" button (.hl-continue-btn) ships grey/square; same ghost treatment here. */ .c-store-product-detail .secondary-btn, .c-store-product-list .secondary-btn, .c-store-cart .secondary-btn, .c-store-checkout .secondary-btn, .tgpc-ty .secondary-btn, .c-store-cart .hl-continue-btn, .c-store-checkout .hl-continue-btn { background-color: transparent !important; color: var(--sage-dark) !important; font-family: var(--font-sans) !important; font-weight: 500; font-size: 0.9375rem; padding: 0.75rem 1.75rem !important; border-radius: var(--radius-pill) !important; border: 1px solid rgba(202, 205, 146, 0.40) !important; transition: background-color 0.2s ease, border-color 0.2s ease; cursor: pointer; } .c-store-product-detail .secondary-btn:hover, .c-store-product-list .secondary-btn:hover, .c-store-cart .secondary-btn:hover, .c-store-checkout .secondary-btn:hover, .tgpc-ty .secondary-btn:hover, .c-store-cart .hl-continue-btn:hover, .c-store-checkout .hl-continue-btn:hover { background-color: var(--sage-tint) !important; border-color: var(--sage) !important; box-shadow: none !important; transform: none !important; } /* Write-a-review button - ghost variant */ .c-store-product-detail .write-review-btn { background-color: transparent !important; color: var(--sage-dark) !important; font-family: var(--font-sans) !important; border: 1px solid rgba(202, 205, 146, 0.40) !important; border-radius: var(--radius-pill) !important; padding: 0.75rem 1.75rem !important; } /* Quantity +/- buttons - sage outline (when shown; we hide quantity by default) */ .c-store-product-detail .quantity-icon-button { color: var(--body) !important; border-color: rgba(202, 205, 146, 0.40) !important; } /* ---- 6. Form controls ---- */ /* Variant select. GHL renders a native with a custom JS component. */ /* The select's chain is .variants-wrapper-container > .variants-wrapper (a CSS grid whose column is sized to ~207px) > .prices-container > select. Widening .prices-container alone fails because it only fills the 207px grid track - force the grid to one full-width column so the whole chain reaches button width. */ .c-store-product-detail .variants-wrapper-container, .c-store-product-detail .prices-container { width: 100% !important; max-width: 100% !important; } .c-store-product-detail .variants-wrapper { width: 100% !important; display: grid !important; grid-template-columns: 1fr !important; } .c-store-product-detail .variant-dropdown, .c-store-cart .variant-dropdown { width: 100% !important; font-family: var(--font-sans) !important; font-size: 0.9375rem !important; color: var(--body) !important; background-color: #fff !important; border: 1px solid rgba(202, 205, 146, 0.40) !important; border-radius: var(--radius-input) !important; padding: 0.85rem 2.75rem 0.85rem 1.25rem !important; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b5b87a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 1rem; } .c-store-product-detail .variant-dropdown:hover, .c-store-cart .variant-dropdown:hover { border-color: var(--sage) !important; } .c-store-product-detail .hl-quantity-input { font-family: var(--font-sans) !important; color: var(--body) !important; } /* Hide the entire quantity block - digital products are 1-per-order */ .c-store-product-detail .quantity-container, .c-store-product-detail .hl-pdp-quantity { display: none !important; } /* ---- 7. Product Detail Page (PDP) ---- */ .c-store-product-detail .product-detail-container { font-family: var(--font-sans); color: var(--body); } /* Product image - rounded card style */ .c-store-product-detail .hl-product-image-container, .c-store-product-detail .image-wrapper { border-radius: var(--radius-card) !important; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12); } .c-store-product-detail .hl-product-image { border-radius: 0 !important; /* outer wrapper holds the radius */ } /* Price */ .c-store-product-detail .hl-product-detail-product-price { font-family: var(--font-sans) !important; font-size: 2.25rem !important; font-weight: 700; color: var(--heading) !important; margin: 0.5rem 0 0; } /* Subscription pill - sage tint (override GHL's default coral) */ .c-store-product-detail .ec-subscription-pill { background-color: var(--sage-tint) !important; color: var(--sage-dark) !important; font-family: var(--font-sans) !important; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; border-radius: var(--radius-pill) !important; padding: 0.25rem 0.75rem !important; } /* ---- 8. Shop list / product grid ---- */ /* Card class verified via CDP probe 2026-06-08: GHL renders each grid item as an . See overlay-blocks/README.md. */ .c-store-product-list .hl-product-list-item { border-radius: var(--radius-card) !important; border: 1px solid rgba(202, 205, 146, 0.15) !important; background-color: #fff !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07); transition: border-color 0.2s ease, box-shadow 0.2s ease; overflow: hidden; } .c-store-product-list .hl-product-list-item:hover { border-color: rgba(202, 205, 146, 0.40) !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10); } .c-store-product-list .hl-product-list-item img { transition: transform 0.5s ease; } .c-store-product-list .hl-product-list-item:hover img { transform: scale(1.03); } /* Card text. GHL ships titles/prices black, and the desktop price container inherits unstyled-anchor blue (#0000EE) from the card (the black price paints over it, but it is one re-render from showing). Pin to the brand. */ .c-store-product-list .hl-product-list-product-name, .c-store-product-list .hl-product-list-product-price, .c-store-product-list .ecomm-price-desktop-container { color: var(--heading) !important; } /* Subscription pill on cards - sage (GHL default is coral). Mirrors PDP/cart. */ .c-store-product-list .ec-subscription-pill { background-color: var(--sage-tint) !important; color: var(--sage-dark) !important; font-family: var(--font-sans) !important; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; border-radius: var(--radius-pill) !important; padding: 0.25rem 0.75rem !important; } /* Card vertical rhythm: the subscription badge sits in-flow between image and title, so subscription cards run ~38px taller and their neighbours' titles sit higher (the grid is display:block - cards are NOT equal height, so a bottom-align trick has no shared baseline to work with). Take the badge out of flow as an image-corner overlay; every card's image/title/price then align regardless of whether a badge is present. */ .c-store-product-list .hl-product-list-item-details { position: relative; } .c-store-product-list .ec-subscription-pills-container { position: absolute; top: 0.75rem; left: 0.75rem; margin: 0 !important; z-index: 2; } /* Filter / Sort: GHL renders "Filter:", "Sort:", "Availability", "Price" and the product count in black (#000), some bolded - reads as a different, heavier typeface than the brand. Pull the whole control bar to body grey, normal-ish weight. (svg/path excluded so the caret rules below win; .active filter tab keeps its heading colour via higher specificity.) */ .c-store-product-list .ec-sort-filter-wrapper, .c-store-product-list .ec-sort-filter-wrapper *:not(svg):not(path), .c-store-product-list .mobile-sort-filter, .c-store-product-list .mobile-sort-filter *:not(svg):not(path) { color: var(--body) !important; } .c-store-product-list .filter-text, .c-store-product-list .filter-title, .c-store-product-list .product-count { font-weight: 500 !important; } /* Filter / Sort carets -> brand. */ .c-store-product-list .ec-sort-filter-wrapper svg, .c-store-product-list .mobile-sort-filter svg { color: var(--body) !important; stroke: var(--body) !important; } .c-store-product-list .filter-category-item { font-family: var(--font-sans) !important; border-radius: var(--radius-pill) !important; background-color: transparent !important; color: var(--body) !important; } .c-store-product-list .filter-category-item.active { background-color: var(--sage-tint) !important; color: var(--heading) !important; } /* Pagination: generic grey -> sage ghost buttons. */ .c-store-product-list .ec-pagination-btn { font-family: var(--font-sans) !important; color: var(--heading) !important; border-color: rgba(202, 205, 146, 0.40) !important; border-radius: var(--radius-pill) !important; } .c-store-product-list .ec-pagination-btn:hover:not(:disabled) { background-color: var(--sage-tint) !important; border-color: var(--sage) !important; } /* ---- 8b. Store search bar ---- */ /* The autocomplete search lives in .c-searchbar (outside the .c-store-* wrappers), so it escaped the brand reset and renders in Lato. GHL nests the inside a

flex row alongside the magnifier

Hey there—welcome in!

Customer Reviews

Average Ratings

Write a review