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 ---- */ /* font-family belongs here, not only on the store wrappers. Blocks injected from the head code (the footer, the social-proof strip, the popup) sit OUTSIDE every .c-store-* wrapper, so the §3 reset never reaches them. Without a font on body they inherit the UA default and render in Times. That was live on the list-page social-proof strip until 2026-08-10. Any new injected block would have hit the same trap, so set it once here and let it inherit. */ body { font-family: var(--font-sans); --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) */ /* Headings are Museo Slab, matching the main website (h1/h2/h4 all render Museo Slab there). The store previously set headings in Gotham, which was the single biggest reason the shop read as a different site. Weight 700 because only 300 and 700 faces are loaded; the site's 600 resolves to this same 700 file. !important is required to beat the §3 universal font rule. */ .c-store-product-detail .tgpc-h1, .c-store-product-list .tgpc-h1, .tgpc-ty .tgpc-h1 { font-family: var(--font-heading) !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-heading) !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); } /* Native GHL headings in Museo Slab too. Without these, only our own Custom Code blocks would match the website and every native store heading would stay Gotham, which is worse than consistent Gotham. Covers the PDP product name (shown on any product that has no pdp-title block) and the grid card title. The injected blocks set their own heading font: the review carousel already does (§23); the cart cross-sell head is handled in §20. */ .c-store-product-detail .hl-product-detail-product-name, .c-store-product-list .hl-product-list-product-name { font-family: var(--font-heading) !important; font-weight: 700 !important; color: var(--body); } /* Card title sized to the website's card title (20px/600 Museo Slab). The native default is 16px/400, which left the grid with almost no hierarchy between the product name and the price below it. !important is not optional here. GHL sets font-size and font-weight BOTH as an inline style on the element AND in a rule scoped to a builder-generated id (#store-product-list-). The id is regenerated per store page, so it cannot be targeted reliably; !important is the only stable way to win. */ .c-store-product-list .hl-product-list-product-name { font-size: 1.25rem !important; line-height: 1.3 !important; } /* Show the whole product name. GHL ships .truncate-text (nowrap + ellipsis), which cut every card at one line and hid the distinguishing half of the title. Titles now wrap onto as many lines as they need. This pairs with trimProductTitles() in the JS, which drops the repeated site-name suffix from the DISPLAYED text. Wrapping alone would show the full stored name, suffix included, and spend two lines per card on the same words. */ .c-store-product-list .hl-product-list-product-name.truncate-text, .c-store-product-list .hl-product-list-product-name { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } /* Card layout: full-bleed image, inset text, price pinned to the bottom. Three things were wrong. The content block was a fixed 257px inside a 273px card, so it sat hard against the left border with 15px of dead space on the right. The text had no horizontal inset, so the title and price touched the border. And the image used object-fit:contain inside a 250px-tall box, so a 1280x720 source was letterboxed with a band of empty space under it. Every product image is exactly 1280x720 (verified across all 13), so a 16/9 box with object-fit:cover fits edge to edge and crops nothing. The price sits in an unclassed wrapper div, not directly in the flex column, so margin-top:auto has to go on that wrapper. :has() targets it by content instead of :last-child, because the absolutely-positioned subscription pill container is also a child here and can be last. */ /* Equal-height cards. .product-list-container is a CSS grid, so it already stretches each .relative wrapper to the tallest in the row, but the card anchor inside was sizing to its own content and leaving a gap under the short ones. Stretching the anchor makes every card in a row the same height whatever the title length, which is what pins the prices to a common baseline. */ .c-store-product-list .product-list-container > .relative { align-items: stretch; } .c-store-product-list .hl-product-list-item { height: auto !important; align-self: stretch !important; flex: 1 1 auto !important; } .c-store-product-list .hl-product-list-item-details { width: 100%; display: flex; flex-direction: column; height: 100%; } /* Every declaration needs !important. GHL ships .hl-product-list-item .image-wrapper { height:auto !important; aspect-ratio:auto !important; overflow:visible !important } plus an inline height:250px on the element. !important beats the inline height, and matching !important is the only way past GHL's own, since a more specific selector alone does not outrank it. */ .c-store-product-list .hl-product-list-item .image-wrapper { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; margin-bottom: 0 !important; overflow: hidden !important; } /* The image class is in the selector to outrank GHL's own .hl-product-list-item .image-wrapper img.hl-product-list-product-image, which carries !important on height, object-fit and aspect-ratio. Equal specificity would leave the winner down to stylesheet order, which we do not control. min-height must be reset too: GHL sets 250px both in a rule and inline, and it alone would keep the image taller than the 16/9 box and crop the sides. */ .c-store-product-list .hl-product-list-item .image-wrapper img.hl-product-list-product-image { width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; object-fit: cover !important; display: block !important; } .c-store-product-list .hl-product-list-product-name { padding-left: 1.25rem; padding-right: 1.25rem; margin-top: 1rem !important; } .c-store-product-list .hl-product-list-item-details > div:has(.hl-product-list-product-price) { margin-top: auto; padding: 0 1.25rem 1.25rem; } /* 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 */ } /* Video thumbnails in the gallery strip. * * A product media of type "video" plays fine in the main viewer, but GHL renders * its strip thumbnail as a generic grey film icon served from its own CDN * (stcdn.leadconnectorhq.com/funnel/store/video-placeholder.png). There is no * poster field on the media object, so the icon cannot be replaced through the * API. `content` swaps the rendered image without touching the src, which * survives the Nuxt app re-rendering the node. * * Scoped per product via the alt text GHL generates (" - Image N"), * because one rule for every video thumbnail in the store would show this * product's poster on the next product that gets a video. Add a rule per product. * The poster is a frame from the video itself with a play badge composited on, * so the thumbnail still reads as a video and not as a second photo. The poster * is cropped square and framed on Susannah: the strip renders at 80x80, and a * centre-cropped 16:9 frame lands on empty locker wall with her out of shot. */ .c-store-product-detail img.product-image-list[src*="video-placeholder"][alt^="How to Source Property Deals UK"] { content: url("https://assets.cdn.filesafe.space/ujOMNrQuS7ER8wa2aDAZ/media/71e30b0c-9ef1-4101-ae3b-cfdc7335d71f.jpg"); object-fit: cover !important; } .c-store-product-detail img.product-image-list[src*="video-placeholder"][alt^="Property Investing for Beginners UK Bundle"] { content: url("https://assets.cdn.filesafe.space/ujOMNrQuS7ER8wa2aDAZ/media/e7a1c964-2c1c-4b7d-b798-9fd4e8c47627.jpg"); object-fit: cover !important; } .c-store-product-detail img.product-image-list[src*="video-placeholder"][alt^="How to Find Property Investors UK"] { content: url("https://assets.cdn.filesafe.space/ujOMNrQuS7ER8wa2aDAZ/media/5507668b-b215-4756-bb16-d4415312663d.jpg"); object-fit: cover !important; } .c-store-product-detail img.product-image-list[src*="video-placeholder"][alt^="Deal Packaging Agreement Template UK"] { content: url("https://assets.cdn.filesafe.space/ujOMNrQuS7ER8wa2aDAZ/media/87bbd402-dc74-4cfe-bdf9-06a1c5c39898.jpg"); object-fit: cover !important; } /* Property Investor Legal Templates carries TWO videos, one per contract, so these * two match the full alt string rather than the product-name prefix. A prefix * selector here would put the Joint Venture poster on the Private Loan thumbnail as * well, and the strip would show the same picture twice for two different contracts. * The image number is positional: GHL numbers gallery items in array order, so * reordering the medias array on the product swaps these two posters. */ .c-store-product-detail img.product-image-list[src*="video-placeholder"][alt="Property Investor Legal Templates UK – Image 2"] { content: url("https://assets.cdn.filesafe.space/ujOMNrQuS7ER8wa2aDAZ/media/2a478bd9-33a3-478b-b253-8a84728c034c.jpg"); object-fit: cover !important; } .c-store-product-detail img.product-image-list[src*="video-placeholder"][alt="Property Investor Legal Templates UK – Image 3"] { content: url("https://assets.cdn.filesafe.space/ujOMNrQuS7ER8wa2aDAZ/media/8401f193-65e6-4037-b588-ed216d660f8f.jpg"); object-fit: cover !important; } /* 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; } /* ---- 7a2. PDP layout ---- */ /* .product-detail-container is a flex row: image on the left, buy box and copy on the right. With the real pack copy in place the right column runs to roughly 1900px while the image is only about 420px, so two thirds of the left side was empty and the page read as unfinished. The image column is pinned so it stays alongside the copy all the way down instead of scrolling away and leaving a hole. align-self:flex-start is required: a flex item stretches to the row height by default, and a stretched item cannot stick. Only above 992px; below that the columns stack and there is nothing to pin. */ @media (min-width: 992px) { .c-store-product-detail .hl-product-image-container { position: sticky; top: 1.5rem; align-self: flex-start; } } /* ---- 7a3. PDP closing CTA ---- */ /* There WAS a full-bleed sage band here, painted behind the top of the PDP with a ::before on .c-store-product-detail, to make the image and buy box read as a hero area. Removed 2026-08-25 by decision: on a product page the sage is wanted as the navbar background only, and nothing tinted should sit behind the product itself. Do not reinstate it. Two attempts to make it land cleanly both failed, because the two columns have different heights: the image card runs to 628px while the copy in the right column starts at 478px or 513px depending on whether the title wraps, so any horizontal boundary cuts through one column or the other. The first version clipped the "Buy now" button and sliced the image card in half; the second contained the image card but ran the tint behind the opening paragraphs. If a hero treatment is ever wanted again it needs a real wrapper element around the image and buy box, which GHL's markup does not provide: .c-product-details holds the title, price, buttons AND the description as flat siblings. */ /* Card shadow on the product image. Kept after the band was removed: it reads as a raised card on white, which is what the site's hero image does too. */ .c-store-product-detail .hl-product-image-container .image-wrapper { border-radius: var(--radius-card) !important; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.18); } /* Separates the hero area from the long copy, so the page reads as two sections rather than one column that keeps going. */ .c-store-product-detail .description { border-top: 1px solid rgba(202, 205, 146, 0.35); padding-top: 1.5rem; margin-top: 1.5rem; } /* Closing CTA, injected by injectPdpClosingCta(). Unlike the hero this sits at the very bottom, so arriving late shifts nothing anyone is looking at. */ .tgpc-pdp-cta { margin: 2rem 0 0.5rem; padding: 1.75rem; background: #fff; border: 1px solid rgba(202, 205, 146, 0.45); border-radius: var(--radius-card); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08); text-align: center; } .tgpc-pdp-cta__head { font-family: var(--font-heading) !important; font-weight: 700; font-size: 1.375rem; line-height: 1.25; color: var(--body); margin: 0 0 0.5rem; } .tgpc-pdp-cta__sub { font-size: 0.9375rem; color: var(--body); margin: 0 0 1.25rem; } .tgpc-pdp-cta__btn { display: inline-block; border: 0; cursor: pointer; background: var(--sage); color: var(--heading); font-family: var(--font-sans) !important; font-weight: 500; font-size: 1rem; padding: 0.875rem 2.25rem; border-radius: var(--radius-pill); transition: background-color 150ms ease-in-out, transform 150ms ease-in-out; } .tgpc-pdp-cta__btn:hover { background: var(--sage-dark); transform: scale(1.02); } .tgpc-pdp-cta__btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(202, 205, 146, 0.45); } /* ---- 7b. PDP description (product copy from the GHL product record) ---- */ /* The pack copy is written into the product description as semantic HTML: h3 for section headings, ul for what-is-included. The previous descriptions were pasted out of Google Docs and carried font-family:Arial;font-size:13px inline on every span, which overrode everything here, so this section only started to matter once those were replaced with clean markup. Headings follow the site: Museo Slab, matching section 4. KEEP THIS IN SECTION 7. It lived between sections 8a and 8a2 once, and a later rewrite of the 8a block removed everything up to 8a2 and silently took this with it, reverting every product page to Gotham headings and browser bullets. */ /* 1.4rem against 1rem body, not the old 1.25rem. Susannah's point (2026-08-12) is that the headlines are what a skimmer reads, so they have to win against the paragraph at a glance rather than merely differ from it. The space above is pushed out with them: at this size the old 1.75rem let a headline sit too close to the paragraph it follows, so it read as part of the previous section. */ .c-store-product-detail .description h2, .c-store-product-detail .description h3, .c-store-product-detail .description h4 { font-family: var(--font-heading) !important; font-weight: 700; color: var(--body); font-size: 1.4rem; line-height: 1.25; margin: 2.25rem 0 0.75rem; } /* The first headline opens the description, so it should not push a big gap between itself and the buy box above. */ .c-store-product-detail .description > h2:first-child, .c-store-product-detail .description > h3:first-child, .c-store-product-detail .description > h4:first-child { margin-top: 0; } /* The two £395 bundle descriptions carry two heading levels: h3 sections with h4 sub-sections under them ("What is included" > "Learn the complete flipping process"). The rule above sizes all three the same, so without this the nesting renders flat and invisible. Only the bundles emit h4; the packs are single-level, so nothing else is affected. */ .c-store-product-detail .description h4 { font-size: 1.0625rem !important; color: #6f7338 !important; margin: 1.5rem 0 0.5rem !important; } .c-store-product-detail .description h4 + ul { margin-top: 0; } .c-store-product-detail .description p { margin: 0 0 0.75rem; } .c-store-product-detail .description ul { margin: 0 0 1rem; padding-left: 1.125rem; list-style: none; } /* Sage marker rather than the browser disc, matching the checklists on the main site's download pages. */ .c-store-product-detail .description li { position: relative; margin-bottom: 0.5rem; padding-left: 1rem; } .c-store-product-detail .description li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--sage); } /* ---- 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; } /* ---- 8-hero. Shop list hero ---- */ /* The page ships a hero section containing an "Our Products" H1, but it is switched OFF in the page builder, which is why the list page opened on a bare search box with roughly 100px of dead space above it. GHL hides a disabled section with a rule keyed to its generated id. The un-hide below is a STOPGAP and is deliberately separated from the styling. That id is builder-generated: if the section is edited or rebuilt the id changes and the un-hide silently stops working. The durable fix is to switch the section back on in the builder (Sites > Stores > TGPC Store > Pages > Products List), at which point this one rule can be deleted and everything below still applies. Heading copy is currently just "Our Products" because that is what the section holds. A fuller hero needs copy signed off, and that belongs in the builder rather than here. */ /* html body prefix on purpose. GHL's hide rule is "#section-230yKN4SEl, .section-230yKN4SEl { display:none }", which carries the SAME id specificity as a bare #section-230yKN4SEl here, so with both !important the winner comes down to which stylesheet loads last. GHL's loads after the head code, so a bare rule lost in production while appearing to work in testing, where the test style was appended to the end of head. The two element selectors break the tie outright. */ html body #section-230yKN4SEl { display: block !important; } /* Styling, independent of how the section becomes visible. Safe to keep whether the un-hide above is used or the section is re-enabled properly. */ /* The section carries a background-image layer set in the builder: a dark stock landscape with no connection to the brand, and almost certainly why the section was switched off in the first place. GHL paints it as an absolutely positioned .bg child rather than on the section, so it has to be suppressed separately or it covers the tint below and leaves grey text on a dark photo. */ #section-230yKN4SEl > .bg { display: none !important; } #section-230yKN4SEl { background: var(--sage-tint-20); padding: 2.5rem 1.5rem 2rem !important; text-align: center; } #section-230yKN4SEl h1 { font-family: var(--font-heading) !important; font-weight: 700 !important; /* The builder had this at 95px in white, which is why it read as invisible even before the section was disabled. */ font-size: 2.5rem !important; line-height: 1.15 !important; color: var(--body) !important; margin: 0 !important; } /* Hero byline (Susannah's copy, signed off 2026-08-12). The builder would not drop a Text element inside the hero section, so it landed in its own section immediately below: #section-HwNlzGN5di, which holds nothing else. Left alone it renders as GHL default Lato in pure black on white, reading as an orphaned sentence rather than part of the hero. These rules pull the two sections back together into one band. Both ids are builder-generated, so if either section is rebuilt the id changes and this silently stops applying. The durable fix is moving the paragraph inside the hero section, after which only the type rules are needed and the band rule can go. Colourway is from the same band on thegoodpropertycompany.co.uk/students, where this sentence is the page H1: warm grey body with the closing phrase in sage. She has already coloured that phrase #cacd92 in the builder, which emits an inline style, so nothing here needs to touch it. */ #section-HwNlzGN5di { background: var(--sage-tint-20) !important; padding-top: 0 !important; padding-bottom: 2.75rem !important; } /* The hero's own bottom padding closed the gap from the other side; without this the merged band carries 32px of dead space through its middle. */ #section-230yKN4SEl { padding-bottom: 0.75rem !important; } /* The builder's own column and element padding stack up under the hero's, leaving about 67px between the heading and the byline, which is what made the byline read as a separate orphaned sentence rather than part of the hero. */ #section-HwNlzGN5di #col-QHJToFWJkB, #section-HwNlzGN5di [class*="paragraph-"] { padding-top: 0 !important; padding-bottom: 0 !important; } /* Museo Slab, not Gotham. This is the one place on the store that is meant to echo the brand band on thegoodpropertycompany.co.uk/students, and there the sentence is set in Museo Slab 600 rather than a sans. Gotham was defensible (it is exactly the main site's body face) but it is why the band read as not quite right: the reference is slab. Weight 700 from 2026-08-12, at her request. This was 300 on the reasoning that two slabs at the same weight stack heavily and the light cut kept the byline subordinate. She wants it bold, so it is bold; the size gap (48px heading against 20px byline) is now doing all the hierarchy work on its own. If it reads heavy, 500 is not available (only 300 and 700 are loaded) so the lever is size, not weight. */ #section-HwNlzGN5di p, #section-230yKN4SEl p { font-family: var(--font-heading) !important; font-size: 1.25rem !important; font-weight: 700 !important; line-height: 1.55 !important; color: var(--body) !important; /* Wider than the Gotham version needed: slab glyphs are broader, so at 42rem this ran to four lines. */ max-width: 54rem; margin: 0 auto !important; text-align: center; /* Evens the rag. It does NOT fix the "All / digital." split, which needs a real line break in the builder text; CSS cannot choose that break point. */ text-wrap: balance; } /* Fallback only. If the builder ever emits the accent as an rather than a coloured span, it should still read as the accent and not as italics. */ #section-HwNlzGN5di p em, #section-230yKN4SEl p em { color: var(--sage) !important; font-style: normal !important; } @media (max-width: 480px) { #section-HwNlzGN5di p, #section-230yKN4SEl p { font-size: 1rem !important; } #section-HwNlzGN5di { padding-bottom: 2rem !important; } } @media (min-width: 768px) { #section-230yKN4SEl h1 { font-size: 3rem !important; } } /* The product-list section carries 60px of top padding from the builder, which on top of the hero's own bottom padding left roughly 85px of white between the heading and the search field. Trimmed so the hero and the controls read as one run rather than two disconnected blocks. Scoped through the store wrapper so it cannot touch other sections that share the generic builder classes. */ .c-section:has(.c-store-product-list) { padding-top: 1.5rem !important; } /* ---- 8-peakend. Shop list closing panel ---- */ /* The list page ended on pagination and handed to the footer. This panel closes it with the terms of sale in the store owner's own words, taken from the pack copy rather than invented: "One payment. Instant access." Injected rather than CSS because it needs real markup, which is fine here: it sits below the grid, so arriving on GHL's head-code delay moves nothing being read. */ .tgpc-listend { max-width: 44rem; margin: 2.5rem auto 0; padding: 1.75rem; background: #fff; border: 1px solid rgba(202, 205, 146, 0.45); border-radius: var(--radius-card); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08); text-align: center; } .tgpc-listend__head { font-family: var(--font-heading) !important; font-weight: 700; font-size: 1.375rem; line-height: 1.25; color: var(--body); margin: 0 0 0.5rem; } .tgpc-listend__sub { font-size: 0.9375rem; line-height: 1.5; color: var(--body); margin: 0; /* Evens the two lines. The copy is trimmed to fit two at this panel width; if it is ever lengthened, check it here rather than trusting balance to absorb it. */ text-wrap: balance; } /* ---- 8a. Search bar and the Filter / Sort row ---- */ /* These are two stacked blocks, and they stay that way. There is no JS that moves the search into the filter row, deliberately. GHL evaluates the store Head tracking code roughly ten seconds after the page is interactive. Measured on the live store across repeated cold loads: this CSS applies at 0.1s, every element the JS needs is present and stable at 0.1s, there are no errors, and yet no JS-driven fix runs until ~10.2s. CSS in the head block is the only part of the overlay that is reliably immediate. An earlier version moved the search into GHL's .desktop-sort-filter so the two sat on one line. That works, but it can only happen once the script runs, so the row visibly reassembled ten seconds into every page load. Hiding the search until then was worse still: ten seconds with no search bar at all. So the layout is whatever CSS alone can achieve. The two blocks stack, the gap between them is closed to read as one control area, and a single sage rule closes the group off from the grid. Correct from the first frame, on every load. If GHL ever stops delaying the head code, moving the search inline again is a small change: reinstate mergeSearchIntoFilterBar and flex .desktop-sort-filter. Check the script timing first. */ .c-searchbar { margin-bottom: 0.5rem !important; } @media (min-width: 481px) { .c-store-product-list .desktop-sort-filter { padding-bottom: 1rem; margin-bottom: 1.5rem; /* One sage rule under the whole control area, replacing GHL's grey pair on the inner wrapper, so it matches the card borders. */ border-bottom: 1px solid rgba(202, 205, 146, 0.30); } .c-store-product-list .ec-sort-filter-wrapper { margin-top: 0 !important; margin-bottom: 0 !important; border-top: 0 !important; border-bottom: 0 !important; } /* Zeroing the wrapper above is not enough. .ec-sort-filter-input-wrapper carries 16px top and bottom margins, and because neither the wrapper nor .desktop-sort-filter has padding or a border at the top, that margin collapses straight through both and pushes the whole filter row down. It reads as a gap belonging to the search bar, which is why trimming the search margin alone left 42px between the two. */ .c-store-product-list .ec-sort-filter-input-wrapper { margin-top: 0 !important; margin-bottom: 0 !important; } } /* ---- 8a2. Branded Sort dropdown + Price filter menu ---- */ /* The native select is hidden, not removed: brandSortDropdown() still drives it so GHL's own change handler does the sorting. Hiding it with visibility/absolute rather than display:none keeps it focusable-adjacent and avoids Vue re-layout. */ .c-store-product-list select.ec-select-input[data-tgpc-sort] { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; } .tgpc-sort { position: relative; display: inline-block; } /* Sized to sit on the same centre line as Filter, Price and the product count. Those are 14px/21px with no vertical padding; this was 15px with 4px of padding, which pushed the control 4px below everything else in the row. Match them exactly rather than nudging with margins. */ .tgpc-sort__btn { display: inline-flex; align-items: center; gap: 0.5rem; background: none; border: 0; cursor: pointer; padding: 0; font-family: var(--font-sans) !important; font-size: 0.875rem; line-height: 21px; font-weight: 500; color: var(--body); } .tgpc-sort__btn:focus-visible { outline: none; border-radius: 0.375rem; box-shadow: 0 0 0 3px rgba(202, 205, 146, 0.45); } /* GHL's own sort chevron. Ours is drawn inside the button so it can rotate, so without this the control renders two chevrons side by side. */ .c-store-product-list .ec-filter-item:has(.tgpc-sort) .ec-sort-icon { display: none !important; } .tgpc-sort__caret { flex: none; transition: transform 150ms ease-in-out; } .tgpc-sort__btn[aria-expanded="true"] .tgpc-sort__caret { transform: rotate(180deg); } /* MUST come with the display rule below. The JS closes the menu with list.hidden = true, and the hidden attribute only works through the user-agent rule [hidden]{display:none}, which any class rule setting display beats. Without this the menu rendered permanently open. */ .tgpc-sort__list[hidden] { display: none !important; } .tgpc-sort__list { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 40; min-width: 13rem; background: #fff; border: 1px solid rgba(202, 205, 146, 0.40); border-radius: var(--radius-card); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10); padding: 0.375rem; display: flex; flex-direction: column; } .tgpc-sort__opt { text-align: left; background: none; border: 0; cursor: pointer; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-family: var(--font-sans) !important; font-size: 0.875rem; color: var(--body); transition: background-color 120ms ease-in-out; } .tgpc-sort__opt:hover { background: var(--sage-tint); } .tgpc-sort__opt.is-active { background: var(--sage-tint-20); color: var(--heading); font-weight: 500; } /* Price filter menu. This one is plain DOM (labels, number inputs, buttons), not an OS control, so it only needed branding rather than replacing. */ .ec-sort-filter-menu.ec-price-menu { background: #fff !important; border: 1px solid rgba(202, 205, 146, 0.40) !important; border-radius: var(--radius-card) !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10) !important; padding: 1rem !important; } .ec-price-menu .filter-label { font-family: var(--font-sans) !important; font-size: 0.8125rem; font-weight: 500; color: var(--body); } .ec-price-menu .currency-symbol { color: var(--body); font-weight: 500; } .ec-price-menu .form-input { font-family: var(--font-sans) !important; border: 1px solid rgba(202, 205, 146, 0.40) !important; border-radius: var(--radius-input) !important; color: var(--heading) !important; } .ec-price-menu .form-input:focus { outline: none !important; border-color: var(--sage) !important; box-shadow: 0 0 0 3px rgba(202, 205, 146, 0.35) !important; } .ec-price-menu .ec-filter-reset-all-button { font-family: var(--font-sans) !important; font-size: 0.8125rem; font-weight: 500; color: var(--sage-dark) !important; background: none !important; } .ec-price-menu .ec-filter-reset-all-button:hover { text-decoration: underline; } /* The Filter / Sort labels and the Price trigger, so the whole bar reads as one typographic family rather than GHL's mix of black and bold. */ .c-store-product-list .ec-filter-item, .c-store-product-list .filter-text, .c-store-product-list .filter-item-wrapper > div { font-family: var(--font-sans) !important; color: var(--heading) !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