/** * Commerce storefront — Horizon Core. * * ⭐ HORIZON-20261009-057: SPLIT. The parts any page can show (trust badges, cart drawer, header icons, search * overlay, toast, added-to-cart card, card button) moved VERBATIM to hp-commerce-chrome.css, which loads on * every page; this file now loads only on WooCommerce pages and the commerce home, after the chrome file. * The line numbers in the "LIFTED VERBATIM" list below refer to the source themes, not to this file. * * HORIZON-20260901-081, P3b. Scope: docs/merch-included-upgrade-scope-2026-09-01.md * * ⛔⛔ SHIPS INERT. Enqueued only when the tenant setting `merch_included` is * true, and that defaults FALSE on every tenant. Nothing renders differently * anywhere until somebody opts a tenant in (P3d). Do not read its presence on * the server as a live change. * * WHY IT EXISTS. All 24 commerce storefront function BODIES already live in * Core (`src/Commerce/woo-zone.php`) and resolve on every tenant — but measured * 2026-09-01, the markup they emit had CSS in EXACTLY ONE theme * (`wp-child-theme-commerce`). Filters, cart drawer, trust badges and the size * guide had ZERO rules in entertainer, dark-luxury and the two per-client * themes. So switching the hooks on without this file would ship * unstyled filters and an unstyled cart drawer onto live client sites — the * same failure as a per-client theme defining `.hp-btn` in zero stylesheets, * at five times the surface area. * * ⭐ LIFTED VERBATIM, not re-designed, from the one theme that had them: * filters + shop layout hp-shop.css 186-320 * trust badges hp-shop.css 1702-1771 * size guide tab hp-shop.css 1773-1803 * slide-out cart drawer hp-components.css 1100-1319 * Byte-identity is what makes "no tenant sees a rendering change" checkable — * the pattern that worked for the links-panel hoist and again for pagination. * Each block was brace-balance checked before assembly. * * ⚠️ THE COMMERCE THEME KEEPS ITS OWN COPIES AND IS UNAFFECTED. It is not * enqueued this file (its tenants have `merch_included` off and their own * stylesheets), so the commerce-theme stores cannot change. When the commerce * theme is eventually retired, this becomes the single definition. * * ⛔⛔ THE HEADER CART/ACCOUNT ICONS ARE DELIBERATELY NOT HERE. Their rules live * across `hp-base.css` AND `hp-responsive.css` and are entangled with * GeneratePress nav internals (`.inside-navigation`, `.menu-toggle`, `.main-nav`) * and the mobile menu animation. Memory `feedback-an-open-mobile-menu-can-be- * unreachable` records that three of those behaviours are per THEME, not per * pattern, and that copying a rule across is how each one broke. They need their * own scope, not a verbatim lift. * * ⚠️ Reads only `var(--hp-*)` design tokens. All 26 used here were verified * present in entertainer, dark-luxury and both per-client themes, so * unlike hp-woo-pagination.css this file needs no literal fallbacks — it is only * ever enqueued on a Horizon theme. * * @package Horizon_Core */ /* ══ Shop / category filters — desktop sidebar, mobile drawer ══ ⛔ ONE comment, not two. Until HORIZON-20260901-107 this header was closed on its first line and the lines below sat as bare text, which the CSS parser swallowed together with the NEXT RULE — .hp-shop-layout — so the sidebar grid never applied and the filters stacked full-width above the products. Same defect at the trust-badges and size-guide headers below. Invisible while the sheet shipped inert; found by the first tenant to render it. Shop/category filters — desktop sidebar, mobile drawer, one shared form rendered twice by hp_render_shop_filters() (sidebar shell + drawer shell). See docs/commerce-product-filters-plan.md §2c. 768px chosen on content grounds — the point the 220px sidebar column plus the product grid gets too cramped to read, not a device-width guess. ========================================================================== */ .hp-shop-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--hp-sp-8); align-items: start; } .hp-shop-filters-mobile { display: none; } .hp-shop-filters--drawer { display: none; } /* off-canvas, shown via .is-open below 768px */ .hp-shop-filters__form { display: flex; flex-direction: column; gap: var(--hp-sp-6); } .hp-shop-filters__title { font-size: var(--hp-text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--hp-text-muted); margin: 0 0 var(--hp-sp-3); } /* Collapsible groups (HORIZON-20261002-010): each facet is a
, its title the ; a long list folds behind a nested "Show all N"
. docs/shop-filter-groups-scope-2026-10-02.md, option A. */ .hp-shop-filters__facet > summary.hp-shop-filters__title { display: flex; align-items: center; gap: var(--hp-sp-2); cursor: pointer; list-style: none; user-select: none; } .hp-shop-filters__facet > summary::-webkit-details-marker, .hp-shop-filters__more > summary::-webkit-details-marker { display: none; } .hp-shop-filters__facet > summary.hp-shop-filters__title::after { content: ''; margin-left: auto; width: 0.45em; height: 0.45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(25%) rotate(-135deg); /* open: points up */ transition: transform var(--hp-dur) var(--hp-ease); } .hp-shop-filters__facet:not([open]) > summary.hp-shop-filters__title { margin-bottom: 0; } .hp-shop-filters__facet:not([open]) > summary.hp-shop-filters__title::after { transform: translateY(-25%) rotate(45deg); /* folded: points down */ } .hp-shop-filters__facet > summary:focus-visible, .hp-shop-filters__more > summary:focus-visible { outline: 2px solid var(--hp-gold); outline-offset: 2px; } /* How many ticks a group carries, so a folded group still says it is filtering. */ .hp-shop-filters__ticked { min-width: 1.6em; padding: 0 0.4em; border: 1px solid var(--hp-gold); border-radius: 999px; color: var(--hp-gold); font-weight: 600; letter-spacing: 0; text-align: center; line-height: 1.5; } .hp-shop-filters__more { margin-top: var(--hp-sp-2); } .hp-shop-filters__more > .hp-shop-filters__chips { margin-top: var(--hp-sp-2); } .hp-shop-filters__more-toggle { display: inline-flex; align-items: center; list-style: none; cursor: pointer; padding: var(--hp-sp-1) 0; font-size: var(--hp-text-xs); color: var(--hp-text-muted); text-decoration: underline; text-underline-offset: 2px; } .hp-shop-filters__more-toggle:hover { color: var(--hp-gold); } .hp-shop-filters__more-hide { display: none; } .hp-shop-filters__more[open] > .hp-shop-filters__more-toggle .hp-shop-filters__more-show { display: none; } .hp-shop-filters__more[open] > .hp-shop-filters__more-toggle .hp-shop-filters__more-hide { display: inline; } .hp-shop-filters__price-row { display: flex; align-items: center; gap: var(--hp-sp-2); } .hp-shop-filters__price-row input[type="number"] { width: 0; flex: 1; min-width: 0; padding: var(--hp-sp-2) var(--hp-sp-3); border: 1px solid var(--hp-border); border-radius: var(--hp-r-sm); background: var(--hp-bg-surface); color: var(--hp-text); font-size: var(--hp-text-sm); } .hp-shop-filters__chips { display: flex; flex-wrap: wrap; gap: var(--hp-sp-2); } .hp-shop-filters__chip { position: relative; display: inline-flex; align-items: center; font-size: var(--hp-text-xs); padding: var(--hp-sp-2) var(--hp-sp-3); border: 1px solid var(--hp-border-strong); border-radius: var(--hp-r-sm); color: var(--hp-text-muted); cursor: pointer; transition: border-color var(--hp-dur) var(--hp-ease), color var(--hp-dur) var(--hp-ease); } .hp-shop-filters__chip input { /* No pointer-events:none here — that blocks the browser's native label-click-activates-its-checkbox behaviour in Chromium, so clicking the visible chip silently did nothing (found live 2026-07-27). The checkbox stays fully clickable, just visually hidden under the label. */ position: absolute; opacity: 0; width: 1px; height: 1px; } /* Product count on each chip (HORIZON-20260902-008): quiet, never the first thing read. */ .hp-shop-filters__count { font-style: normal; font-size: var(--hp-text-xs); color: var(--hp-text-subtle); margin-left: 0.15em; } .hp-shop-filters__chip--checked .hp-shop-filters__count { color: inherit; opacity: 0.75; } .hp-shop-filters__chip--checked { border-color: var(--hp-gold); color: var(--hp-gold); font-weight: 600; } .hp-shop-filters__apply { width: 100%; justify-content: center; } .hp-shop-filters__clear { font-size: var(--hp-text-xs); color: var(--hp-text-muted); text-align: center; text-decoration: underline; } .hp-shop-filters__clear:hover { color: var(--hp-gold); } .hp-shop-filters-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: var(--hp-sp-5) var(--hp-sp-6); border-bottom: 1px solid var(--hp-border); font-size: var(--hp-text-sm); font-weight: 600; } .hp-shop-filters-drawer__header button { background: none; border: none; color: var(--hp-text-muted); cursor: pointer; display: flex; } .hp-shop-filters--drawer .hp-shop-filters__form { padding: var(--hp-sp-6); } @media (max-width: 768px) { .hp-shop-layout { grid-template-columns: minmax(0, 1fr); } .hp-shop-filters--sidebar { display: none; } .hp-shop-filters-mobile { display: block; margin-bottom: var(--hp-sp-6); } .hp-shop-filters--drawer { display: block; position: fixed; inset: 0 0 0 auto; width: min(340px, 90vw); height: 100%; transform: translateX(100%); transition: transform 0.25s ease; background: var(--hp-bg-surface); border-left: 1px solid var(--hp-border); z-index: 9999; /* matches the lightbox/offcanvas overlay convention */ overflow-y: auto; } .hp-shop-filters--drawer.is-open { transform: translateX(0); } /* The fold controls are tap targets in the drawer (mobile probe tap-small, 44px). */ .hp-shop-filters__facet > summary.hp-shop-filters__title, .hp-shop-filters__more-toggle { min-height: 44px; } } /* ══ Size guide tab content ══ Size guide tab content ========================================================================== */ .hp-size-guide { max-width: 720px; } .hp-size-guide table { width: 100%; border-collapse: collapse; font-size: var(--hp-text-sm); margin-top: var(--hp-sp-4); } .hp-size-guide th, .hp-size-guide td { padding: var(--hp-sp-3) var(--hp-sp-4); border: 1px solid var(--hp-border); text-align: left; } .hp-size-guide th { background: var(--hp-bg-surface); font-weight: 600; color: var(--hp-text); } .hp-size-guide td { color: var(--hp-text-muted); } /* ══ Cart + Checkout (WooCommerce BLOCKS) ═══════════════════════════════ HORIZON-20260901-081. ⛔⛔ THE TARGET IS THE **BLOCK** CART AND CHECKOUT, NOT THE CLASSIC TEMPLATES. Measured 2026-09-01: the cart and checkout pages are `wp:woocommerce/cart` / `wp:woocommerce/checkout` BLOCKS on every tenant except the `star` and `fetish` samples. Before this, only one merch store and `store` had any Horizon styling on them — every other merch store served the STOCK WooCommerce block cart, because these rules lived in `wp-child-theme-commerce/assets/css/hp-shop.css` alone. ⛔⛔ AND THIS IS WHY THE GAP WAS INVISIBLE. Four of the five themes DO ship `woocommerce/cart/cart.php`, `checkout/form-checkout.php` and ~39 classic `.woocommerce-cart` / `.woocommerce-checkout` rules — and ALL OF IT IS DEAD CODE on a block cart. **A theme having a cart template is not evidence the cart is styled.** Same trap the commerce theme already carried (`-20260819-007`, memory `feedback-block-cart-is-not-the-classic-template`); it turns out to apply estate-wide. ⚠️ The dead classic templates and CSS are deliberately LEFT IN PLACE by this change — retiring them is a separate decision, and they are the fallback if a tenant is ever switched back to classic pages (`star` and `fetish` still use them today). Lifted verbatim from hp-shop.css 1990-2227. All 24 tokens verified present in entertainer, dark-luxury and both per-client themes. ══════════════════════════════════════════════════════════════════════ */ /* ========================================================================== Cart (WooCommerce Blocks — wp:woocommerce/cart) Flagged critical 2026-07-28: bare default styling. Real class names confirmed against the live hydrated DOM, same as checkout below. ========================================================================== */ .wp-block-woocommerce-cart { font-family: var(--hp-font-body); color: var(--hp-text); max-width: var(--hp-content-max); margin: 0 auto; padding: var(--hp-sp-10) var(--hp-content-pad) var(--hp-sp-16); } .wc-block-cart-item__product .wc-block-components-product-name { font-family: var(--hp-font-display) !important; color: var(--hp-text) !important; font-size: var(--hp-text-lg, 1.1rem) !important; text-decoration: none !important; } .wc-block-components-quantity-selector { border: 1px solid var(--hp-border) !important; border-radius: var(--hp-r-sm) !important; } .wc-block-components-quantity-selector__button { color: var(--hp-text) !important; /* WC Blocks' own default renders these at ~30x37px — under the ~44px minimum tap target size (WCAG 2.5.5 / Apple HIG), found live 2026-07-28 on a mobile pass of the Cart page. */ min-width: 44px !important; min-height: 44px !important; } .wc-block-cart-item__remove-link { color: var(--hp-text-muted, var(--hp-text)) !important; } .wc-block-cart-item__remove-link:hover { color: #c0392b !important; } .wc-block-cart__sidebar, .wc-block-cart-totals-block .wc-block-components-sidebar { background: var(--hp-bg-surface) !important; border: 1px solid var(--hp-border) !important; border-radius: var(--hp-r-md) !important; padding: var(--hp-sp-6) !important; } .wc-block-cart__totals-title { font-family: var(--hp-font-display) !important; color: var(--hp-text) !important; } .wc-block-cart__submit-button { background: var(--hp-gold) !important; border-color: var(--hp-gold) !important; color: var(--hp-on-accent, #fff) !important; border-radius: var(--hp-r-sm) !important; font-family: var(--hp-font-body) !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.04em; } .wc-block-cart__submit-button:hover { background: var(--hp-gold-dark, var(--hp-gold)) !important; } @media (max-width: 782px) { .wp-block-woocommerce-cart { padding: var(--hp-sp-6) var(--hp-content-pad) var(--hp-sp-10); } } /* ========================================================================== Checkout (WooCommerce Blocks — wp:woocommerce/checkout) Flagged critical 2026-07-28: bare default WC Blocks styling, no brand tokens applied anywhere. Real class names confirmed against the live hydrated DOM (a live store's /checkout/), not guessed — Blocks renders form fields client-side, so a plain curl only shows the pre-hydration skeleton. ========================================================================== */ .wc-block-checkout { font-family: var(--hp-font-body); color: var(--hp-text); max-width: var(--hp-content-max); margin: 0 auto; padding: var(--hp-sp-10) var(--hp-content-pad) var(--hp-sp-16); } /* Step headings ("Contact information", "Shipping address", etc.) */ .wc-block-components-checkout-step__title { font-family: var(--hp-font-display); font-size: var(--hp-text-xl); color: var(--hp-text); margin-bottom: var(--hp-sp-4); } .wc-block-components-checkout-step__heading-content { border-bottom: 1px solid var(--hp-border); padding-bottom: var(--hp-sp-3); margin-bottom: var(--hp-sp-5); } /* Text inputs — WC Blocks' floating-label pattern */ .wc-block-components-text-input input[type="email"], .wc-block-components-text-input input[type="text"], .wc-block-components-text-input input[type="tel"], .wc-block-components-address-form select, .wc-block-components-country-input .components-combobox-control__input, .wc-block-components-state-input .components-combobox-control__input { border: 1px solid var(--hp-border) !important; border-radius: var(--hp-r-sm) !important; background: var(--hp-bg) !important; color: var(--hp-text) !important; font-family: var(--hp-font-body) !important; } .wc-block-components-text-input input:focus, .wc-block-components-address-form select:focus { border-color: var(--hp-gold) !important; box-shadow: 0 0 0 1px var(--hp-gold) !important; outline: none !important; } .wc-block-components-text-input label { font-family: var(--hp-font-body) !important; color: var(--hp-text-muted, var(--hp-text)) !important; } /* Country/State selects (a different WC Blocks component, .wc-blocks-components-select, not the text-input one above) — its "notch" label is meant to sit astride the field's top border with an opaque background masking the border/value beneath it, but this theme never gave it that background, so the label just floated transparently on top of the selected value text (found live 2026-07-28, both "Country/Region" over "United States (US)" and "State" over "Florida"). Position and mask it explicitly rather than rely on WC's own notch math. */ .wc-blocks-components-select__container { position: relative !important; } .wc-blocks-components-select__label { position: absolute !important; top: -8px !important; left: 12px !important; background: var(--hp-bg) !important; padding: 0 4px !important; font-family: var(--hp-font-body) !important; font-size: var(--hp-text-xs) !important; color: var(--hp-text-muted, var(--hp-text)) !important; z-index: 2; } /* Our checkout opt-in checkbox (Subscribers/WooCommerceCheckout.php) and any other checkbox field — brand accent on the checked state. */ .wc-block-components-checkbox__input:checked + .wc-block-components-checkbox__mark { color: var(--hp-gold) !important; } .wc-block-components-checkbox svg { fill: var(--hp-gold) !important; } /* Shipping-option / payment-option radio cards */ .wc-block-components-radio-control__option { border: 1px solid var(--hp-border) !important; border-radius: var(--hp-r-sm) !important; background: var(--hp-bg) !important; } .wc-block-components-radio-control__option.wc-block-components-radio-control__option-checked, .wc-block-components-radio-control__option[aria-checked="true"] { border-color: var(--hp-gold) !important; background: var(--hp-gold-muted, rgba(0, 0, 0, 0.04)) !important; } .wc-block-components-radio-control-accordion-option[aria-expanded="true"] { border-color: var(--hp-gold) !important; } /* Order summary / totals sidebar */ .wc-block-checkout__sidebar { background: var(--hp-bg-surface) !important; border: 1px solid var(--hp-border) !important; border-radius: var(--hp-r-md) !important; padding: var(--hp-sp-6) !important; } .wc-block-components-totals-item__label, .wc-block-components-totals-item__value, .wc-block-components-product-name { font-family: var(--hp-font-body) !important; color: var(--hp-text) !important; } .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--hp-font-display) !important; font-size: var(--hp-text-xl) !important; font-weight: 600 !important; } /* Place-order button — same brand button treatment as the rest of the site */ .wc-block-components-checkout-place-order-button { background: var(--hp-gold) !important; border-color: var(--hp-gold) !important; color: var(--hp-on-accent, #fff) !important; border-radius: var(--hp-r-sm) !important; font-family: var(--hp-font-body) !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.04em; } .wc-block-components-checkout-place-order-button:hover { background: var(--hp-gold-dark, var(--hp-gold)) !important; border-color: var(--hp-gold-dark, var(--hp-gold)) !important; } /* Notice banners (errors, "no payment methods", coupon feedback, etc.) */ .wc-block-components-notice-banner { border-radius: var(--hp-r-sm) !important; font-family: var(--hp-font-body) !important; } .wc-block-components-notice-banner.is-error { border-left: 3px solid #c0392b !important; } @media (max-width: 782px) { .wc-block-checkout { padding: var(--hp-sp-6) var(--hp-content-pad) var(--hp-sp-10); } } /* ══ Category page-header image layer (Core shop archive, HORIZON-20260901-107) ══ Lifted verbatim from wp-child-theme-commerce hp-shop.css (".hp-collection-hero__*") and hp-base.css (".hp-page-header--has-image .hp-container"). The band itself is positioned here because only the commerce theme positions .hp-page-header. */ .hp-page-header--has-image { position: relative; overflow: hidden; } .hp-page-header--has-image .hp-container { position: relative; z-index: 1; } .hp-collection-hero__bg { position: absolute; inset: 0; z-index: 0; } .hp-collection-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.25; display: block; } .hp-collection-hero__breadcrumb { font-size: var(--hp-text-xs); color: var(--hp-text-muted); margin-bottom: var(--hp-sp-4); } .hp-collection-hero__breadcrumb a { color: var(--hp-text-muted); text-decoration: none; } .hp-collection-hero__breadcrumb a:hover { color: var(--hp-text); } /* ══════════════════════════════════════════════════════════════════════════ HORIZON-20260902-012 — the rest of the merch-store treatment. Measured 2026-09-02 on an entertainer tenant against a live merch store (commerce): the four non-commerce themes carry a COPY of the commerce theme's single-product / account CSS, but the copy was taken before five blocks were added to the original, so on a merch-package tenant those blocks had ZERO rules anywhere. What that looked like live on a creator's product page: · .hp-gallery-thumb — Core's hp_gallery_thumb_script() builds the thumbnail strip on every product page, so every gallery image rendered STACKED AT FULL WIDTH under the main photo (a 3-image product was 6,447px tall on desktop and 6,845px on a phone). Thumb strip rules below. · .hp-swatch — one word chip for every variation option (colours and sizes); the theme showed bare selects. · .hp-pdp-breadcrumb — the breadcrumb Core's single-product renderer prints. · .show-password-input — WooCommerce ships that button with NO icon; it was a bare grey square on the login form. · .woocommerce-account .woocommerce — no margin-top for the fixed header, so "Login" sat underneath the site header. The theme copy declares `margin: 0 auto` AFTER this sheet loads, hence the body-qualified selector (0-2-1 beats the theme's 0-2-0). ⭐ LIFTED from wp-child-theme-commerce/assets/css/hp-shop.css (993-1030 thumbs, 1078-1185 swatches, 1816-1836 breadcrumb, 1915-2001 account dashboard + show password). One deliberate change: the active-thumb border used `var(--hp-color-primary, #111)`, a token no skin defines; it reads --hp-gold. ══════════════════════════════════════════════════════════════════════════ */ /* ── Product gallery thumbnail strip (built by hp_gallery_thumb_script) ── Printify syncs one image per colour/angle, so 24 thumbs on a hoodie is normal: the strip scrolls horizontally instead of blowing out the row. */ /* The two PDP grid columns must be allowed to shrink below their content's min-content, or the thumbnail strip below (overflow-x:auto, but 14 Printify mockups wide) sets the column width and the main image scales to it. Pairs with minmax(0,1fr) in Commerce/single-product.php. HORIZON-20260906-011. */ .hp-product-gallery, .hp-product-summary { min-width: 0; } .hp-gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .hp-gallery-thumb { flex: 0 0 80px; width: 80px; height: 80px; cursor: pointer; border: 2px solid var(--hp-border); border-radius: var(--hp-r-sm); overflow: hidden; opacity: 0.55; transition: opacity 0.18s ease, border-color 0.18s ease; } .hp-gallery-thumb:hover, .hp-gallery-thumb--active { opacity: 1; border-color: var(--hp-gold); } .hp-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* ── Variation swatches (initVariationSwatches in hp-commerce-storefront.js) ── The native select stays in the DOM for WooCommerce's own variation logic and is only visually / AT hidden; without JS it is never hidden and the plain dropdown still works. */ .hp-variations-native-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; pointer-events: none !important; } .hp-swatch-row { margin-bottom: var(--hp-sp-5); } .hp-swatch-row__label { display: block; font-family: var(--hp-font-body); font-size: var(--hp-text-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hp-text-muted); margin-bottom: var(--hp-sp-2); } .hp-swatch-group { display: flex; flex-wrap: wrap; gap: var(--hp-sp-2); } .hp-swatch { font-family: var(--hp-font-body); cursor: pointer; background: var(--hp-bg); color: var(--hp-text); border: 1px solid var(--hp-border); border-radius: var(--hp-r-sm); transition: border-color var(--hp-dur) var(--hp-ease), background var(--hp-dur) var(--hp-ease), color var(--hp-dur) var(--hp-ease), box-shadow var(--hp-dur) var(--hp-ease); } .hp-swatch:hover { border-color: var(--hp-border-strong); } .hp-swatch:focus-visible { outline: 2px solid var(--hp-gold); outline-offset: 2px; } /* ONE chip for colours AND sizes (HORIZON-20260927-001, Core 1.41.10): same height, radius, weight and selected state, so a product never shows dots, pills and boxes side by side. Selected = the accent fill (set inline by the script too, see hpApplySwatchSelection). */ .hp-swatch--chip { min-width: 48px; height: 44px; padding: 0 var(--hp-sp-4); border-radius: var(--hp-r-full); font-size: var(--hp-text-sm); font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; } .hp-swatch--chip.is-selected { background: var(--hp-gold) !important; border-color: var(--hp-gold) !important; color: var(--hp-on-accent) !important; } /* The chosen colour, named beside the row label: "COLORS · Solid Pink Blend". */ .hp-swatch-row__value:not(:empty)::before { content: '\00B7'; margin: 0 0.5em; } .hp-swatch-row__value { text-transform: none; letter-spacing: 0; color: var(--hp-text); } /* WooCommerce's "Clear" link printed as a default blue underlined link under the chips. */ .variations_form .reset_variations { font-family: var(--hp-font-body); font-size: var(--hp-text-sm); color: var(--hp-text-muted); text-decoration: none; letter-spacing: 0.04em; } .variations_form .reset_variations:hover, .variations_form .reset_variations:focus-visible { color: var(--hp-gold); } .hp-swatch[disabled] { cursor: not-allowed; opacity: 0.35; position: relative; } .hp-swatch[disabled]::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--hp-border-strong), transparent calc(50% + 1px)); border-radius: inherit; } /* ── PDP breadcrumb (above the category eyebrow, hp_render_single_product) ── */ .hp-pdp-breadcrumb { margin-bottom: var(--hp-sp-4); } .hp-pdp-breadcrumb .hp-breadcrumb { font-size: var(--hp-text-xs); color: var(--hp-text-muted); } .hp-pdp-breadcrumb .hp-breadcrumb a { color: var(--hp-text-muted); text-decoration: none; } .hp-pdp-breadcrumb .hp-breadcrumb a:hover { color: var(--hp-text); } /* ── My Account: clear the fixed header, two-column dashboard, show-password ── */ body.woocommerce-account .woocommerce { /* The theme copy has max-width/padding but no header offset, so "Login" rendered underneath the fixed header. body-qualified to outrank the theme's later `margin: 0 auto` shorthand. */ margin-top: var(--hp-header-h); } .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { display: flex; gap: var(--hp-sp-10); align-items: flex-start; } .password-input { position: relative; display: block; } .show-password-input { position: absolute; top: 50%; right: var(--hp-sp-3); transform: translateY(-50%); width: 20px; height: 20px; border: none !important; background: transparent !important; cursor: pointer; padding: 0; } .show-password-input::before { content: ''; display: block; width: 20px; height: 20px; background-color: var(--hp-text-muted, var(--hp-text)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center / 18px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center / 18px; } .woocommerce-MyAccount-content { flex: 1; font-family: var(--hp-font-body); color: var(--hp-text); } .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 { font-family: var(--hp-font-display); color: var(--hp-text); } .woocommerce-MyAccount-content table.shop_table { border: 1px solid var(--hp-border); border-radius: var(--hp-r-sm); } @media (max-width: 782px) { .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { flex-direction: column; } .woocommerce-MyAccount-navigation { flex: 1 1 auto; width: 100%; } } /* ── Gallery: only the first image paints; the strip above stands in for the rest. The four non-commerce theme copies SPACE stacked images (`+ .woocommerce-product-gallery__image { margin-top }`) where the commerce original HIDES them, so even with the thumb strip styled every gallery image still rendered full-size in a column (measured 2026-09-02: 5,602px desktop, 7,008px phone on a 3-image product). Different property from the theme's rule, so load order does not matter. */ .single-product .woocommerce-product-gallery__image + .woocommerce-product-gallery__image { display: none; } /* ══════════════════════════════════════════════════════════════════════════ STORE POLISH: product page, add-to-cart notice, cart, checkout header (Alex, 2026-10-02, a creator's merch review; measured on the live site). Every rule is `html body`-prefixed on purpose. This sheet loads BEFORE the five theme copies of hp-shop.css, so an equal-specificity theme rule would win. Colours, radii and type are tokens only, so a skin keeps its own look. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Header band: ONE quiet treatment on product, cart and checkout ────── The product page printed a full-bleed grey band; cart and checkout printed the same band BOXED inside the content container (a grey slab with a gap either side). Neither carried any design. Both are now an unfilled band: no slab, so there is no edge to disagree about, and the title carries a short accent rule. */ html body.woocommerce-cart .hp-page-header, html body.woocommerce-checkout .hp-page-header, html body.woocommerce-account .hp-page-header { background: transparent; border-bottom: 0; padding: var(--hp-sp-10) 0 var(--hp-sp-2); } html body.woocommerce-cart .hp-page-header__title, html body.woocommerce-checkout .hp-page-header__title, html body.woocommerce-account .hp-page-header__title { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); letter-spacing: 0.02em; margin-bottom: 0; } html body.woocommerce-cart .hp-page-header__title::after, html body.woocommerce-checkout .hp-page-header__title::after, html body.woocommerce-account .hp-page-header__title::after { content: ''; display: block; width: 48px; height: 3px; margin: var(--hp-sp-4) auto 0; background: var(--hp-gold); border-radius: var(--hp-r-full); } /* My Account joined the band (HORIZON-20261005-024, Core 1.41.109). The band clears the fixed header itself, so the account form's own header offset (`body.woocommerce-account .woocommerce { margin-top: var(--hp-header-h) }`, below, kept for a page that prints no band) left a gap of a header's height under the title. */ html body.woocommerce-account .hp-page-header + .woocommerce { margin-top: var(--hp-sp-6); } /* The "Size guide" link under a garment's size picker (hp_size_guide_link(), Core 1.41.107): the same quiet, underlined text as the picker's own "Clear" link, not the browser's default blue. Its 44px tap height is inline. */ html body .hp-size-guide-link a { color: var(--hp-text); font-size: var(--hp-text-sm); letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 3px; } html body .hp-size-guide-link a:hover { color: var(--hp-gold); } /* Product page: the band is the breadcrumb only (the category moved above the title). */ html body.single-product .hp-page-header { background: transparent; border-bottom: 1px solid var(--hp-border); padding: var(--hp-sp-4) 0; } html body.single-product .hp-pdp-breadcrumb { margin: 0; } html body.single-product .hp-pdp-breadcrumb .hp-breadcrumb { font-size: var(--hp-text-sm); letter-spacing: 0.02em; } html body.single-product .hp-pdp-breadcrumb .hp-breadcrumb a:hover { color: var(--hp-gold); } html body.single-product .hp-section.product { padding-top: var(--hp-sp-10); } /* ── 2. Product summary: eyebrow, title, price ───────────────────────────── */ html body.single-product .hp-pdp-eyebrow { display: block; margin: 0 0 var(--hp-sp-3); font-family: var(--hp-font-body); font-size: var(--hp-text-sm); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hp-gold); } html body.single-product .hp-pdp-eyebrow a { color: inherit !important; text-decoration: none; } html body.single-product .hp-pdp-eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; } html body.single-product .hp-product-summary .product_title { font-size: clamp(1.75rem, 1.1rem + 1.9vw, 2.5rem) !important; line-height: 1.1; letter-spacing: 0.01em; margin-bottom: var(--hp-sp-3) !important; } html body.single-product .hp-product-summary .price { font-family: var(--hp-font-body); font-size: var(--hp-text-xl) !important; font-weight: 600; color: var(--hp-text) !important; margin-bottom: var(--hp-sp-6) !important; } /* ── 3. Variations: no grey cells, one rhythm, "Clear" on the label line ───── The swatch script inserts its rows INTO beside WooCommerce's own , whose cells (8px padding, hairlines, the Clear link) painted as empty grey boxes under every row. The table is flattened to blocks; the cells carry nothing but the hidden native