/** * HRC v7 — the shop. * * The retail pages carry three older layers under them: WooCommerce's own * stylesheets, assets/store-pages.css, and ~29KB of Customizer CSS that is * printed inline after every enqueued sheet. The Customizer layer is a * complete, competent shop design — but it is the OLD brand: Poppins and * #FF4500. Rather than fight a hundred rules, this layer re-points the four * tokens that layer is built on at the v7 palette, then corrects the handful * of places where geometry, not colour, is wrong. * * Because that layer is inline it always wins on order, so overrides here * carry the specificity to beat it (and !important only where it used one). * Selectors never say `.woocommerce ...` as a descendant: on this site the * `woocommerce` class sits on , so that form matches nothing. */ /* ── the old shop tokens now point at the brand ──────────────────────────── */ html body.hrc-coded:is(.woocommerce-shop, .single-product, .tax-product_cat, .woocommerce-cart, .woocommerce-checkout, .woocommerce-order-received) { --hrc-font: var(--font-sans); --hrc-ink: var(--ink); --hrc-muted: var(--grey); --hrc-line: var(--line); --hrc-orange: var(--orange); --hrc-action: var(--orange-press); --hrc-ring: rgba(252, 75, 31, .18); --hrc-radius: var(--radius-action); --hrc-soft: #FAFAFA; --hrc-surface: var(--paper); } /* ── the bag and the checkout get the site's column ────────────────────────── .hrc-native-content caps at 680px for prose. WooCommerce's block checkout watches its own container and only lays out as two columns once it is wide (`is-large`), so the reading measure was quietly forcing the stacked phone layout onto the desktop. */ html body.hrc-coded:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-order-received) .hrc-native-content { max-width: none; } html body.hrc-coded .wc-block-components-sidebar-layout .wc-block-components-sidebar { position: sticky; top: 96px; align-self: start; } /* ── the product page's two columns ────────────────────────────────────────── WooCommerce's own layout sheet floats the gallery and the summary at 48% (`.woocommerce div.product div.images`, 0-3-3). The Customizer's grid rule is 0-3-2, one type selector short, so the floats won and both columns sat half empty inside their tracks. */ /* !important because WooCommerce's rule is ID-scoped (`.woocommerce #content div.product div.images`), which outranks any class-only selector we write. */ html body.hrc-coded.single-product div.product > .woocommerce-product-gallery, html body.hrc-coded.single-product div.product > .summary { width: 100% !important; float: none !important; margin-left: 0; margin-right: 0; } /* ── one action, everywhere in the shop ────────────────────────────────────── 48px on the system's radius, white on orange. The old layer used 54px on a 6px radius with ink-coloured text, and the catalogue button was a pill set with !important. */ html body.hrc-coded.single-product div.product .single_add_to_cart_button, html body.hrc-coded .wc-block-components-button:not(.is-link), html body.hrc-coded .enventor-empty-button { min-height: 48px; height: 48px; padding: 0 22px; border: 1px solid var(--orange); border-radius: var(--radius-action); background: var(--orange); color: #fff; font: var(--w-ui) 16px/1 var(--font-sans); letter-spacing: 0; text-transform: none; } html body.hrc-coded.single-product div.product .single_add_to_cart_button:hover, html body.hrc-coded .wc-block-components-button:not(.is-link):hover, html body.hrc-coded .enventor-empty-button:hover { background: var(--orange-press); border-color: var(--orange-press); color: #fff; } html body.hrc-coded.single-product div.product .single_add_to_cart_button:disabled, html body.hrc-coded.single-product div.product .single_add_to_cart_button.disabled { background: var(--line); border-color: var(--line); color: var(--grey); } /* the catalogue's "Select options" is a secondary action: the system's ghost */ html body.hrc-coded ul.products li.product .button, html body.hrc-coded.single-product div.product :is(.related, .up-sells) .button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px !important; padding: 0 16px !important; border: 1px solid var(--orange-ghost-line) !important; border-radius: var(--radius-action) !important; background: rgba(255,255,255,.65) !important; color: var(--orange-type-aa) !important; font: var(--w-ui) var(--fs-small)/1 var(--font-sans) !important; } html body.hrc-coded ul.products li.product .button:hover, html body.hrc-coded.single-product div.product :is(.related, .up-sells) .button:hover { background: var(--orange-tint) !important; border-color: var(--orange-tint) !important; color: var(--orange-type-aa) !important; } /* ── the catalogue card: one grid, one baseline ──────────────────────────── */ html body.hrc-coded ul.products li.product { display: flex; flex-direction: column; } html body.hrc-coded ul.products li.product a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1 1 auto; } html body.hrc-coded ul.products li.product img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-card); background: #FAFAFA; } html body.hrc-coded ul.products li.product .woocommerce-loop-product__title { font: var(--w-title) var(--fs-card)/var(--lh-card) var(--font-sans) !important; letter-spacing: var(--ls-card); color: var(--ink); min-height: calc(var(--fs-card) * var(--lh-card) * 2); } html body.hrc-coded ul.products li.product .price { margin-top: 8px; color: var(--grey); font: var(--w-ui) var(--fs-small)/var(--lh-small) var(--font-sans) !important; } html body.hrc-coded ul.products li.product .button { margin-top: auto; align-self: flex-start; } /* ── the product page's type on the v7 scale ─────────────────────────────── */ html body.hrc-coded.single-product div.product .product_title { font: var(--w-heading) var(--fs-h1)/var(--lh-h1) var(--font-sans); letter-spacing: var(--ls-h1); } html body.hrc-coded.single-product div.product .summary > .price { font: var(--w-title) var(--fs-h3)/1.3 var(--font-sans); letter-spacing: var(--ls-h3); } html body.hrc-coded.single-product div.product :is(.related, .up-sells) > h2, html body.hrc-coded.single-product div.product .woocommerce-tabs .panel h2 { font: var(--w-heading) var(--fs-h2)/var(--lh-h2) var(--font-sans); letter-spacing: var(--ls-h2); } html body.hrc-coded.single-product div.product .variations select, html body.hrc-coded.single-product div.product form.cart .quantity .qty { min-height: 48px; border: 1px solid var(--line); border-radius: var(--radius-action); font: 400 16px/1 var(--font-sans); color: var(--ink); } /* ── checkout fields: Stripe's 48px row, the system's radius and focus ring ─ */ html body.hrc-coded .wc-block-components-text-input input, html body.hrc-coded .wc-block-components-combobox input, html body.hrc-coded .wc-block-components-select select { min-height: 48px; border-radius: var(--radius-action); border-color: var(--line); font: 400 16px/1.2 var(--font-sans); color: var(--ink); } html body.hrc-coded .wc-block-components-text-input input:focus, html body.hrc-coded .wc-block-components-combobox input:focus, html body.hrc-coded .wc-block-components-select select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(252,75,31,.18); } html body.hrc-coded .wc-block-components-title, html body.hrc-coded .wc-block-checkout__form h2 { font: var(--w-heading) var(--fs-h3)/var(--lh-h3) var(--font-sans); letter-spacing: var(--ls-h3); color: var(--ink); } html body.hrc-coded .wc-block-components-totals-item__label { color: var(--grey); } /* WooCommerce Blocks sizes its own buttons (52px in the bag, 56px at the foot of the checkout). One height across the shop. */ html body.hrc-coded .wc-block-cart__submit-button, html body.hrc-coded .wc-block-components-checkout-place-order-button, html body.hrc-coded .wc-block-cart__submit-container .wc-block-components-button { min-height: 48px !important; height: 48px !important; padding: 0 22px !important; font: var(--w-ui) 16px/1 var(--font-sans) !important; } /* ── the size row reads as a field, not a table cell ─────────────────────── */ html body.hrc-coded.single-product div.product table.variations, html body.hrc-coded.single-product div.product table.variations tbody, html body.hrc-coded.single-product div.product table.variations tr, html body.hrc-coded.single-product div.product table.variations th, html body.hrc-coded.single-product div.product table.variations td { display: block; width: 100%; padding: 0; border: 0; text-align: left; } html body.hrc-coded.single-product div.product table.variations { margin: 0 0 20px; } html body.hrc-coded.single-product div.product table.variations th.label label { display: block; margin: 0 0 8px; color: var(--grey); font: var(--w-ui) var(--fs-small)/1.2 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; } html body.hrc-coded.single-product div.product table.variations select { width: 100%; max-width: none; } html body.hrc-coded.single-product div.product .reset_variations { display: inline-block; margin-top: 8px; color: var(--orange-type-aa); font: var(--w-ui) var(--fs-small)/1.4 var(--font-sans); } /* ── the detail runs full width under both columns ─────────────────────────── The old layout parked the description in the right-hand column, which left a tall void under the photograph and squeezed the prose into a narrow measure. Stripe's own product pages put the buy box beside the image and everything else beneath it. */ html body.hrc-coded.single-product div.product > .woocommerce-product-gallery { grid-row: 1 !important; } html body.hrc-coded.single-product div.product > .woocommerce-tabs { grid-column: 1 / -1 !important; grid-row: auto !important; margin-top: 8px !important; } html body.hrc-coded.single-product div.product > .woocommerce-tabs .panel { max-width: 70ch; } /* ── the bag and the checkout sit closer to their heading ────────────────── */ html body.hrc-coded:is(.woocommerce-cart, .woocommerce-checkout) .hrc-native-content { margin-top: 20px; } html body.hrc-coded .wp-block-woocommerce-checkout, html body.hrc-coded .wp-block-woocommerce-cart { padding-top: 0; } /* WooCommerce's little post-add "View cart" link is a quiet link, not a chip */ html body.hrc-coded .woocommerce-message a.button, html body.hrc-coded a.added_to_cart { min-height: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--orange-type-aa) !important; font: var(--w-ui) var(--fs-small)/1.4 var(--font-sans) !important; text-decoration: underline; } /* the block's own top margin sat under the page's lead line */ html body.hrc-coded .wp-block-woocommerce-cart, html body.hrc-coded .wp-block-woocommerce-checkout, html body.hrc-coded .wc-block-cart, html body.hrc-coded .wc-block-checkout { margin-top: 0 !important; padding-top: 0 !important; } html body.hrc-coded:is(.woocommerce-cart, .woocommerce-checkout) .hrc-native-content > p:empty { display: none; } /* ── spacing: the retail pages keep the site's rhythm ──────────────────────── Measured before this block: the catalogue, product and category bands ran 72px top / 100px bottom, and the bag and checkout 88/100 — where every other page on the site is a symmetrical var(--section). The gap between the catalogue toolbar and the grid was 16px, roughly half a step. */ html body.hrc-coded:not(.hrc-coded-home) .hrc-commerce-page, html body.hrc-coded:not(.hrc-coded-home) .hrc-native-page { padding-block: var(--section); } /* the catalogue toolbar sits one clear step above the grid */ html body.hrc-coded .woocommerce-result-count, html body.hrc-coded .woocommerce-ordering { margin-bottom: 0; } html body.hrc-coded ul.products { margin-top: 32px !important; } html body.hrc-coded .woocommerce-notices-wrapper:empty { display: none; } /* the bag and checkout headings: contain their own margins, one step of air */ html body.hrc-coded .hrc-cart-heading, html body.hrc-coded .hrc-checkout-heading { display: flow-root; margin: 0 0 32px; } html body.hrc-coded .hrc-cart-heading > :last-child, html body.hrc-coded .hrc-checkout-heading > :last-child { margin-bottom: 0; } /* the product page's blocks on the same step as the rest of the site */ html body.hrc-coded.single-product div.product > .woocommerce-tabs { margin-top: 40px !important; } html body.hrc-coded.single-product div.product > :is(.related, .up-sells) { margin-top: var(--section) !important; padding-top: var(--section) !important; } /* The bag and the checkout are titled by .hills-page-intro in the site header, not by the page body. Its own bottom padding stacked on top of the band's 88px, so the content sat 148px below its own lead. Zeroing the intro's bottom padding on these two documents makes the gap exactly one section. */ html body.hrc-coded:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-order-received) .hills-page-intro { padding-bottom: 0; } /* ── the retail pages stand on the site's column ───────────────────────────── Measured against /night-run-series/ (92px from the edge, 1256 wide) the shop sat at 184/1072, the product page at 216/1008 and the bag at 156/1128 — three different columns, none of them the site's. Two causes: .hrc-commerce-page carries its own horizontal padding AND holds a .v6-wrap, so the inset was applied twice; and .hrc-main caps these documents at 1312px, so the wrap measured its margin against that rather than the viewport. */ html body.hrc-coded:not(.hrc-coded-home) .hrc-commerce-page, html body.hrc-coded:not(.hrc-coded-home) .hrc-native-page { padding-inline: 0; } html body.hrc-coded:is(.woocommerce-shop, .single-product, .tax-product_cat, .woocommerce-cart, .woocommerce-checkout, .woocommerce-order-received) :is(.hrc-main, .hrc-main-woocommerce, .hrc-main-native) { max-width: none; } /* the ancestors these documents hang from cap their own width; the column is the wrap's job alone, so the frames above it run full bleed */ html body.hrc-coded:is(.woocommerce-shop, .single-product, .tax-product_cat, .woocommerce-cart, .woocommerce-checkout, .woocommerce-order-received) :is(.hrc-main, .hrc-main-woocommerce, .hrc-main-native, .hrc-commerce-page, .hrc-native-page) { max-width: none !important; width: auto !important; } html body.hrc-coded:is(.woocommerce-shop, .single-product, .tax-product_cat, .woocommerce-cart, .woocommerce-checkout, .woocommerce-order-received) :is(.hrc-commerce-page, .hrc-native-page) > .v6-wrap { width: min(var(--container), 100% - var(--margin) * 2) !important; margin-inline: auto !important; } /* Something between and the wrap raises --margin on the product page (124px) and on the bag and checkout (156px), so those columns were narrower and further in than the site's. Re-assert the v7 ladder on the band itself, which is the wrap's own parent. */ html body.hrc-coded:is(.woocommerce-shop, .single-product, .tax-product_cat, .woocommerce-cart, .woocommerce-checkout, .woocommerce-order-received) :is(.hrc-commerce-page, .hrc-native-page) { --margin: 92px; --container: 1256px; } @media (max-width: 1180px) { html body.hrc-coded :is(.hrc-commerce-page, .hrc-native-page) { --margin: 64px; } } @media (max-width: 860px) { html body.hrc-coded :is(.hrc-commerce-page, .hrc-native-page) { --margin: 40px; } } @media (max-width: 720px) { html body.hrc-coded :is(.hrc-commerce-page, .hrc-native-page) { --margin: 24px; } } @media (max-width: 480px) { html body.hrc-coded :is(.hrc-commerce-page, .hrc-native-page) { --margin: 16px; } } /* .hrc-main insets these documents with a horizontal MARGIN (32px on the product template, 64px on the native one) as well as a max-width. That margin, not the wrap, was what pushed the product page's column to 124 and the bag's to 156. The column belongs to .v6-wrap alone. */ html body.hrc-coded.single-product .hrc-main, html body.hrc-coded.woocommerce-cart .hrc-main, html body.hrc-coded.woocommerce-checkout .hrc-main, html body.hrc-coded.woocommerce-order-received .hrc-main, html body.hrc-coded.woocommerce-shop .hrc-main, html body.hrc-coded.tax-product_cat .hrc-main { max-width: none !important; width: auto !important; margin-inline: 0 !important; } /* The Customizer layer pins .hrc-main on these documents with `max-width: 1312px !important; width: calc(100% - 128px) !important` — two !importants printed inline, after this sheet. Beaten on specificity: the extra body class and the [class] attribute take this to (0,5,2). */ html body.hrc-coded.woocommerce-page:is(.woocommerce-shop, .single-product, .tax-product_cat, .woocommerce-cart, .woocommerce-checkout, .woocommerce-order-received) .hrc-main[class] { max-width: none !important; width: auto !important; margin-inline: 0 !important; } /* The Customizer pins .hrc-main's width with two !importants printed inline, and specificity games against an inline sheet are a losing habit. So the column stops depending on its parent at all: the wrap spans the viewport and pads itself back to the site's measure, which lands on 92/1256 at 1440 and 16/358 at 390 — the same column as every other page. */ html body.hrc-coded:is(.woocommerce-shop, .single-product, .tax-product_cat, .woocommerce-cart, .woocommerce-checkout, .woocommerce-order-received) :is(.hrc-commerce-page, .hrc-native-page) { overflow-x: clip; } html body.hrc-coded:is(.woocommerce-shop, .single-product, .tax-product_cat, .woocommerce-cart, .woocommerce-checkout, .woocommerce-order-received) :is(.hrc-commerce-page, .hrc-native-page) > .v6-wrap { width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; padding-inline: max(var(--margin), calc((100vw - var(--container)) / 2)) !important; } /* ── the collection cards (the dark bands on the apparel pages) ────────────── Two rules in v6-site.css were reaching these by accident: 1. a generic embed-form rule, `.v6-embed ... select { background: var(--surface) !important; color: var(--on-surface) !important }`. Inside a .v6-band-ink those two aliases flip to ink and paper, so the size picker rendered as a black block with white type. 2. an Ultimate Member button rule whose selector list also catches .enventor-shop-button and forces `background: var(--orange) !important`, so "Add to cart" and "Buy now" came out identical. */ html body.hrc-coded .enventor-shop .enventor-shop-size select, html body.hrc-coded .enventor-shop select { height: 48px !important; padding: 0 38px 0 14px !important; border: 1px solid var(--line) !important; border-radius: var(--radius-action) !important; background-color: var(--paper) !important; color: var(--ink) !important; font: 400 15px/1 var(--font-sans) !important; } html body.hrc-coded .enventor-shop .enventor-shop-size > span { color: var(--ink); font: var(--w-ui) var(--fs-small)/1.4 var(--font-sans); } /* Add to cart carries the weight; Buy now is the quieter way past the bag. */ html body.hrc-coded .enventor-shop .enventor-shop-button-primary { min-height: 48px !important; border-radius: var(--radius-action) !important; border: 1px solid var(--orange) !important; background: var(--orange) !important; color: #fff !important; font: var(--w-ui) 15px/1 var(--font-sans) !important; } html body.hrc-coded .enventor-shop .enventor-shop-button-primary:hover { background: var(--orange-press) !important; border-color: var(--orange-press) !important; } html body.hrc-coded .enventor-shop .enventor-shop-button-secondary { min-height: 48px !important; border-radius: var(--radius-action) !important; border: 1px solid var(--orange-ghost-line) !important; background: transparent !important; color: var(--orange-type-aa) !important; font: var(--w-ui) 15px/1 var(--font-sans) !important; } html body.hrc-coded .enventor-shop .enventor-shop-button-secondary:hover { background: var(--orange-tint) !important; border-color: var(--orange-tint) !important; color: var(--orange-type-aa) !important; } /* the heading had 42px of type and no clearance, so the cards began under it */ html body.hrc-coded .enventor-shop .enventor-shop-heading { margin: 0 0 32px !important; } html body.hrc-coded .enventor-shop .enventor-shop-notices { margin: 0 0 32px !important; } html body.hrc-coded .enventor-shop .enventor-shop-notices :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { border-radius: var(--radius-action); border-left-color: var(--orange); } /* ── the payment step, in Stripe's shape ───────────────────────────────────── Stripe's Checkout puts each method in its own bordered row, the selected one ringed in the brand colour, with the card fields nested inside it. */ html body.hrc-coded .wc-block-checkout__payment-method .wc-block-components-radio-control__option, html body.hrc-coded .wc-block-components-radio-control-accordion-option { border: 1px solid var(--line); border-radius: var(--radius-action); margin-bottom: 8px; padding: 14px 16px 14px 48px; background: var(--paper); } html body.hrc-coded .wc-block-components-radio-control-accordion-option:has(input:checked), html body.hrc-coded .wc-block-components-radio-control__option--checked { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); } /* One ring per method: the accordion row is the box, so the label inside it is not boxed again. The radio sits 16px in; the label clears it at 48px. */ html body.hrc-coded .wc-block-components-radio-control-accordion-option { padding: 0; } html body.hrc-coded .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option { border: 0; box-shadow: none; margin: 0; background: transparent; padding: 16px 16px 16px 48px; } html body.hrc-coded .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__input { left: 16px; } html body.hrc-coded .wc-block-components-radio-control-accordion-content { padding: 0 16px 16px; } html body.hrc-coded .wc-block-components-radio-control__option-layout { gap: 10px; } html body.hrc-coded .wc-block-checkout__payment-method .wc-block-components-notice-banner { border-radius: var(--radius-action); } /* The single card field (legacy card element) gets the input box. Stripe's Payment Element and its messaging draw their own UI inside an iframe, so they are left unboxed; an element with nothing to show then collapses to nothing instead of leaving an empty bordered bar. */ html body.hrc-coded .wc-block-components-card-element, html body.hrc-coded .wcstripe-card-element { min-height: 48px; padding: 14px 14px; border: 1px solid var(--line); border-radius: var(--radius-action); background: var(--paper); } html body.hrc-coded .wc-block-checkout__payment-method .StripeElement { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } html body.hrc-coded :is(.wc-block-components-card-element, .wcstripe-card-element).StripeElement--focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(252,75,31,.18); } /* The Ultimate Member button rule's selector list reaches these at (0,4,2) with !important, so the two actions need one more class each to land. */ html body.hrc-coded .enventor-shop .enventor-shop-card .enventor-shop-form .enventor-shop-button-primary { border: 1px solid var(--orange) !important; background: var(--orange) !important; color: #fff !important; } html body.hrc-coded .enventor-shop .enventor-shop-card .enventor-shop-form .enventor-shop-button-primary:hover { background: var(--orange-press) !important; border-color: var(--orange-press) !important; color: #fff !important; } html body.hrc-coded .enventor-shop .enventor-shop-card .enventor-shop-form .enventor-shop-button-secondary { border: 1px solid var(--orange-ghost-line) !important; background: transparent !important; color: var(--orange-type-aa) !important; } html body.hrc-coded .enventor-shop .enventor-shop-card .enventor-shop-form .enventor-shop-button-secondary:hover { background: var(--orange-tint) !important; border-color: var(--orange-tint) !important; color: var(--orange-type-aa) !important; } /* ── what a bundle is worth ────────────────────────────────────────────────── The saving, the sum of the parts and the free-shipping line are all computed from live prices (Enventor_Shop_Value), so they cannot go stale. The devices are the honest ones only: a real anchor against the real sum, the store's real shipping threshold, and the bundle's real contents. */ html body.hrc-coded .hrc-value-badge { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 6px 0 0; } html body.hrc-coded .hrc-value-save { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-action); background: var(--orange-tint); color: var(--orange-type-aa); font: var(--w-ui) 13px/1 var(--font-sans); white-space: nowrap; } html body.hrc-coded .hrc-value-was { color: var(--grey); font: var(--w-ui) 13px/1.4 var(--font-sans); text-decoration: line-through; } /* on the dark collection bands the chip keeps its paper ground */ html body.hrc-coded .enventor-shop .hrc-value-badge { margin-top: 8px; } html body.hrc-coded .hrc-value { margin: 0 0 24px; padding: 18px 20px; border: 1px solid var(--orange-ghost-line); border-radius: var(--radius-card); background: var(--orange-tint); } html body.hrc-coded .hrc-value-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; } html body.hrc-coded .hrc-value-strike { color: var(--grey); text-decoration: line-through; font: var(--w-ui) var(--fs-body)/1 var(--font-sans); } html body.hrc-coded .hrc-value-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--radius-action); background: var(--orange); color: #fff; font: var(--w-ui) 14px/1 var(--font-sans); } html body.hrc-coded .hrc-value-parts { margin: 0; padding: 0; list-style: none; } html body.hrc-coded .hrc-value-parts li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font: 400 var(--fs-small)/1.5 var(--font-sans); color: var(--ink); } html body.hrc-coded .hrc-value-parts li + li { border-top: 1px solid var(--orange-ghost-line); } html body.hrc-coded .hrc-value-parts a { color: var(--ink); text-decoration: none; } html body.hrc-coded .hrc-value-parts a:hover { color: var(--orange-type-aa); } html body.hrc-coded .hrc-value-ship { margin: 12px 0 0; color: var(--orange-type-aa); font: var(--w-ui) var(--fs-small)/1.4 var(--font-sans); } html body.hrc-coded .hrc-value-cross { margin: 0 0 22px; } html body.hrc-coded .hrc-value-cross a { display: inline-flex; align-items: center; gap: 6px; color: var(--orange-type-aa); text-decoration: none; font: var(--w-ui) var(--fs-small)/1.5 var(--font-sans); border-bottom: 1px solid var(--orange-ghost-line); } html body.hrc-coded .hrc-value-cross a:hover { border-bottom-color: var(--orange); } /* inline-flex drops the whitespace between "Save", the amount and the percent, so the gap is stated rather than left to text nodes */ html body.hrc-coded .hrc-value-chip { gap: 5px; } html body.hrc-coded .hrc-value-save { gap: 5px; } /* ── the product page, in the structure of Meta's product pages ────────────── Gallery left, a buy card that stays with you on the right, then the story, what it is made of, care, shipping and the rest of the collection. Sections Meta has that the club has no real content for are not rendered at all. */ html body.hrc-coded.single-product div.product { display: grid !important; grid-template-columns: minmax(0, 1fr) 404px; column-gap: 64px; row-gap: 0; align-items: start; } html body.hrc-coded.single-product div.product > .hrc-pdp-gallery { grid-column: 1; grid-row: 1; width: 100%; } html body.hrc-coded.single-product div.product > .summary { grid-column: 2; grid-row: 1; position: sticky; top: 96px; } html body.hrc-coded.single-product div.product > :is(.hrc-pdp-about, .hrc-pdp-details, .related, .up-sells) { grid-column: 1 / -1; grid-row: auto; } /* one large photograph, a strip of the others under it */ html body.hrc-coded .hrc-pdp-stage { position: relative; overflow: hidden; aspect-ratio: 1 / 1; border-radius: var(--radius-card); background: var(--paper-hover); } html body.hrc-coded .hrc-pdp-stage img { display: block; width: 100%; height: 100%; object-fit: cover; } html body.hrc-coded .hrc-pdp-thumbs { display: flex; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; } html body.hrc-coded .hrc-pdp-thumb { display: block; width: 84px; height: 84px; padding: 0; overflow: hidden; cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius-action); background: var(--paper-hover); transition: border-color var(--dur-action) var(--ease-action); } html body.hrc-coded .hrc-pdp-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } html body.hrc-coded .hrc-pdp-thumb:hover { border-color: var(--grey); } html body.hrc-coded .hrc-pdp-thumb.is-on { border-color: var(--ink); } /* the buy card */ html body.hrc-coded .hrc-pdp-brand { margin: 0 0 8px; color: var(--grey); text-transform: uppercase; letter-spacing: .08em; font: var(--w-ui) var(--fs-small)/1.2 var(--font-sans); } html body.hrc-coded .hrc-pdp-field-label { margin: 0 0 8px; color: var(--grey); text-transform: uppercase; letter-spacing: .04em; font: var(--w-ui) var(--fs-small)/1.2 var(--font-sans); } html body.hrc-coded .hrc-pdp-colour { margin: 20px 0 20px; } html body.hrc-coded .hrc-pdp-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } html body.hrc-coded .hrc-pdp-swatch { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-action); font: 400 15px/1 var(--font-sans); color: var(--ink); } html body.hrc-coded .hrc-pdp-dots { display: inline-flex; gap: 3px; } html body.hrc-coded .hrc-pdp-dots i { display: block; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(11, 11, 12, .14); } /* what the club actually promises: stock, the window, the real threshold */ html body.hrc-coded .hrc-pdp-assure { display: grid; gap: 12px; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; } html body.hrc-coded .hrc-pdp-assure li { display: flex; align-items: flex-start; gap: 10px; } html body.hrc-coded .hrc-pdp-assure-ico { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; color: var(--orange); } html body.hrc-coded .hrc-pdp-assure-ico svg { display: block; width: 16px; height: 16px; } html body.hrc-coded .hrc-pdp-assure-text { display: flex; flex-direction: column; gap: 2px; font: 400 14px/1.45 var(--font-sans); color: var(--grey); } html body.hrc-coded .hrc-pdp-assure-text strong { font-weight: var(--w-ui); color: var(--ink); } /* HRC+ beside the buy button */ html body.hrc-coded .hrc-plus-panel { margin: 20px 0 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper-hover); } html body.hrc-coded .hrc-plus-panel.is-member { border-color: var(--orange-ghost-line); background: var(--orange-tint); } html body.hrc-coded .hrc-plus-mark { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--ink); font: var(--w-ui) 14px/1 var(--font-sans); letter-spacing: .02em; } html body.hrc-coded .hrc-plus-glyph { display: block; width: 15px; height: 14px; color: var(--orange); } html body.hrc-coded .hrc-plus-glyph svg { display: block; width: 100%; height: 100%; fill: currentColor; } html body.hrc-coded .hrc-plus-pill { height: 22px; padding: 0 9px; border-radius: 999px; background: var(--orange); color: #fff; font: var(--w-ui) 11px/22px var(--font-sans); font-style: normal; letter-spacing: .06em; text-transform: uppercase; } html body.hrc-coded .hrc-plus-line { margin: 0; color: var(--grey); font: 400 14px/1.5 var(--font-sans); } html body.hrc-coded .hrc-plus-offer { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; flex-wrap: wrap; font: 400 14px/1.4 var(--font-sans); color: var(--ink); } html body.hrc-coded .hrc-plus-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: var(--radius-action); background: var(--orange); color: #fff; font: var(--w-ui) 13px/1 var(--font-sans); } html body.hrc-coded .hrc-plus-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; text-decoration: none; color: var(--orange-type-aa); font: var(--w-ui) 14px/1 var(--font-sans); } html body.hrc-coded .hrc-plus-link svg { width: 14px; height: 14px; transition: transform var(--dur-action) var(--ease-action); } html body.hrc-coded .hrc-plus-link:hover svg { transform: translateX(3px); } /* the story, and what it is made of */ html body.hrc-coded .hrc-pdp-about { margin-top: var(--section); padding-top: var(--section); border-top: 1px solid var(--line); } html body.hrc-coded .hrc-pdp-h2 { margin: 0 0 32px; color: var(--ink); font: var(--w-heading) var(--fs-h2)/var(--lh-h2) var(--font-sans); letter-spacing: var(--ls-h2); } html body.hrc-coded .hrc-pdp-about-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; align-items: start; } html body.hrc-coded .hrc-pdp-prose p { margin: 0 0 18px; max-width: 62ch; color: var(--grey); font: 400 var(--fs-body)/var(--lh-body) var(--font-sans); } html body.hrc-coded .hrc-pdp-prose p:first-child { color: var(--ink); font: 400 var(--fs-lead)/var(--lh-lead) var(--font-sans); } html body.hrc-coded .hrc-pdp-prose p:last-child { margin-bottom: 0; } html body.hrc-coded .hrc-pdp-fact-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; } html body.hrc-coded .hrc-pdp-fact-list li { position: relative; padding-left: 26px; color: var(--ink); font: 400 var(--fs-body)/var(--lh-body) var(--font-sans); } html body.hrc-coded .hrc-pdp-fact-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 2px; background: var(--orange); } html body.hrc-coded .hrc-pdp-spec { margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 110px minmax(0, 1fr); row-gap: 10px; column-gap: 16px; } html body.hrc-coded .hrc-pdp-spec dt { margin: 0; color: var(--grey); text-transform: uppercase; letter-spacing: .04em; font: var(--w-ui) var(--fs-small)/1.5 var(--font-sans); } html body.hrc-coded .hrc-pdp-spec dd { margin: 0; color: var(--ink); font: 400 15px/1.5 var(--font-sans); } /* care and shipping, folded away the way Meta folds its specifications */ html body.hrc-coded .hrc-pdp-details { margin-top: 56px; border-top: 1px solid var(--line); } html body.hrc-coded .hrc-pdp-fold { border-bottom: 1px solid var(--line); } html body.hrc-coded .hrc-pdp-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; cursor: pointer; list-style: none; color: var(--ink); font: var(--w-title) var(--fs-h3)/1.3 var(--font-sans); letter-spacing: var(--ls-h3); } html body.hrc-coded .hrc-pdp-fold > summary::-webkit-details-marker { display: none; } html body.hrc-coded .hrc-pdp-chev { flex: 0 0 auto; width: 18px; height: 18px; color: var(--grey); transition: transform var(--dur-action) var(--ease-action); } html body.hrc-coded .hrc-pdp-fold[open] .hrc-pdp-chev { transform: rotate(180deg); } html body.hrc-coded .hrc-pdp-fold-body { padding: 0 0 28px; max-width: 62ch; } html body.hrc-coded .hrc-pdp-fold-body h3 { margin: 0 0 10px; color: var(--ink); font: var(--w-ui) 15px/1.4 var(--font-sans); } html body.hrc-coded .hrc-pdp-fold-body ul { margin: 0 0 22px; padding: 0 0 0 20px; } html body.hrc-coded .hrc-pdp-fold-body ul:last-child { margin-bottom: 0; } html body.hrc-coded .hrc-pdp-fold-body li, html body.hrc-coded .hrc-pdp-fold-body p { margin: 0 0 6px; color: var(--grey); font: 400 15px/1.6 var(--font-sans); } /* the rail at the foot */ html body.hrc-coded.single-product div.product > .related > h2 { margin-bottom: 32px; } @media (max-width: 1100px) { html body.hrc-coded.single-product div.product { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 40px; } } @media (max-width: 900px) { html body.hrc-coded.single-product div.product { display: block !important; } html body.hrc-coded.single-product div.product > .summary { position: static; margin-top: 32px; } html body.hrc-coded .hrc-pdp-about-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } html body.hrc-coded .hrc-pdp-thumb { width: 68px; height: 68px; } } /* the buy card carries no rule of its own: the old layer drew a 4px orange border across the top of the summary, which read as a stray accent beside a photograph that already has the page's weight */ html body.hrc-coded.single-product div.product > .summary { border-top: 0; padding-top: 0; } /* one full-width action, the way a buy card reads everywhere else */ html body.hrc-coded.single-product div.product .woocommerce-variation-add-to-cart, html body.hrc-coded.single-product div.product form.cart:not(.variations_form) { display: flex; align-items: stretch; gap: 12px; } html body.hrc-coded.single-product div.product form.cart .quantity { flex: 0 0 88px; margin: 0; } html body.hrc-coded.single-product div.product form.cart .quantity .qty { width: 100%; } html body.hrc-coded.single-product div.product .single_add_to_cart_button { flex: 1 1 auto; width: auto; justify-content: center; } /* the rail at the foot is one section below the folds, not two */ html body.hrc-coded.single-product div.product > :is(.related, .up-sells) { margin-top: var(--section) !important; padding-top: 0 !important; border-top: 0; } /* WooCommerce keeps an empty region between the size field and the action for the variation's own price and stock line; empty, it left a 60px hole */ html body.hrc-coded.single-product div.product .single_variation_wrap { margin: 0; } html body.hrc-coded.single-product div.product .woocommerce-variation { margin: 0 0 14px; } html body.hrc-coded.single-product div.product .woocommerce-variation:empty { display: none; margin: 0; } html body.hrc-coded.single-product div.product .woocommerce-variation-price .price { font: var(--w-title) 20px/1.3 var(--font-sans); color: var(--ink); } html body.hrc-coded.single-product div.product .woocommerce-variation-availability .stock { margin: 6px 0 0; color: var(--grey); font: 400 14px/1.4 var(--font-sans); } html body.hrc-coded.single-product div.product .woocommerce-variation.single_variation { display: none; } html body.hrc-coded.single-product div.product .woocommerce-variation.single_variation:has(*) { display: block; margin: 0 0 14px; } html body.hrc-coded.single-product div.product .woocommerce-variation-add-to-cart { margin-top: 0; } /* WooCommerce hides its "Clear" link with visibility, so it still reserved a line between the size field and the action. The select's own "Choose an option" is the reset. */ html body.hrc-coded.single-product div.product .reset_variations { display: none !important; } /* the assurance row already says whether it is in stock; the variation's own "999 in stock" said it twice. Out of stock still speaks. */ html body.hrc-coded.single-product div.product .woocommerce-variation-availability .stock.in-stock { display: none; } /* the photograph and the buy card are their own grid, so a sticky card stops where the two columns stop. Held in div.product's own grid, Chrome let it travel the whole document and paint over the story below. */ html body.hrc-coded.single-product div.product { display: block !important; } html body.hrc-coded.single-product div.product > .hrc-pdp-top { display: grid; grid-template-columns: minmax(0, 1fr) 404px; column-gap: 64px; align-items: start; } html body.hrc-coded.single-product .hrc-pdp-top > .hrc-pdp-gallery { grid-column: 1; grid-row: 1; width: 100%; } html body.hrc-coded.single-product .hrc-pdp-top > .summary { grid-column: 2; grid-row: 1; position: sticky; top: 96px; border-top: 0; padding-top: 0; } @media (max-width: 1100px) { html body.hrc-coded.single-product div.product > .hrc-pdp-top { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 40px; } } @media (max-width: 900px) { html body.hrc-coded.single-product div.product > .hrc-pdp-top { display: block; } html body.hrc-coded.single-product .hrc-pdp-top > .summary { position: static; margin-top: 32px; } } /* WooCommerce's own 48% float reaches .summary as a descendant, so moving it into .hrc-pdp-top put it back on half its track */ html body.hrc-coded.single-product .hrc-pdp-top > .summary { width: 100% !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* the cross-sell is a sentence, not a row: as inline-flex its two children could not share a line, so "save $19" was pushed to the far right on a phone */ html body.hrc-coded .hrc-value-cross a { display: inline; } /* ── the collection hero runs edge to edge ─────────────────────────────────── The hero was laid inside the page column, so a photograph meant to be the whole top of the page sat in a 1256px box with paper all around it. It now breaks the column the same way the retail documents do, and the band above it gives up its top padding so the photograph starts under the header. */ html body.hrc-coded .enventor-shop-hero { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; } html body.hrc-coded .v6-sec:has(.enventor-shop-hero) { padding-top: 0; padding-bottom: 0; } /* the band holds only the photograph: no paper below it */ html body.hrc-coded .v6-embed:has(> .enventor-shop-hero) { max-width: none; overflow: visible; } /* and it speaks in the brand's voice: the hero still carried the old shop's #D93A00 and its own type scale */ html body.hrc-coded .enventor-shop-hero { --enventor-orange: var(--orange); --enventor-charcoal: var(--ink); } html body.hrc-coded .enventor-shop-hero .enventor-shop-eyebrow { color: var(--orange-on-ink); text-transform: uppercase; letter-spacing: .08em; font: var(--w-ui) var(--fs-small)/1.2 var(--font-sans); } html body.hrc-coded .enventor-shop-hero .enventor-shop-title { color: var(--paper); font: var(--w-heading) var(--fs-h1)/var(--lh-h1) var(--font-sans); letter-spacing: var(--ls-h1); } /* the buy card and the cart sidebar stick under the sticky header */ html body.hrc-coded .wc-block-components-sidebar-layout .wc-block-components-sidebar, html body.hrc-coded.single-product div.product > .summary, html body.hrc-coded.single-product .hrc-pdp-top > .summary { top: calc(var(--hdr-stick) + 24px); } /* 7.37.48 - the retail band no longer clips: on a phone the band sits 20px in (the legacy main margin) while the column starts at 16px, so the clip cut the first letters. body clips horizontally already. */ html body.hrc-coded:is(.woocommerce-shop, .single-product, .tax-product_cat, .woocommerce-cart, .woocommerce-checkout, .woocommerce-order-received) :is(.hrc-commerce-page, .hrc-native-page) { overflow-x: visible; } html body.hrc-coded { overflow-x: clip; } /* 7.37.50 - the shop's actions on the system: 48px, 16px/500, the primary white on orange, the ghost white at 65% with the ghost line and AA text. WooCommerce's own block buttons (cross-sell "Select options" in the bag and at the checkout) were 44px, weight 600, ink text on orange. */ html body.hrc-coded .enventor-shop .enventor-shop-button-primary { font-size: 16px !important; } html body.hrc-coded .enventor-shop .enventor-shop-button-secondary { background: rgba(255, 255, 255, .65) !important; font-size: 16px !important; } html body.hrc-coded .enventor-shop .enventor-shop-button-secondary:hover { background: var(--orange-tint) !important; } html body.hrc-coded .wp-block-button__link, html body.hrc-coded .wc-block-components-product-button__button { display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box; min-height: 48px !important; height: 48px !important; padding: 0 22px !important; border: 1px solid var(--orange-ghost-line) !important; border-radius: var(--radius-action) !important; background: rgba(255, 255, 255, .65) !important; color: var(--orange-type-aa) !important; font: var(--w-ui) 16px/1 var(--font-sans) !important; letter-spacing: 0; text-transform: none; text-decoration: none; transition: background-color var(--dur-action) var(--ease-action), color var(--dur-action) var(--ease-action), border-color var(--dur-action) var(--ease-action); } html body.hrc-coded .wp-block-button__link:hover, html body.hrc-coded .wc-block-components-product-button__button:hover { background: var(--orange-tint) !important; border-color: var(--orange-tint) !important; color: var(--orange-type-aa) !important; } /* 7.37.51 - the card-form Buy now (one class heavier, see above) takes the ghost's ground too */ html body.hrc-coded .enventor-shop .enventor-shop-card .enventor-shop-form .enventor-shop-button-secondary { background: rgba(255, 255, 255, .65) !important; } html body.hrc-coded .enventor-shop .enventor-shop-card .enventor-shop-form .enventor-shop-button-secondary:hover { background: var(--orange-tint) !important; } /* 7.37.52 - checkout on a phone: WooCommerce prints the order summary twice (a sticky collapsible at the top and the full summary before Place order); the top one went, and nothing sticks over the form */ @media (max-width: 699px) { html body.hrc-coded .wc-block-components-sidebar-layout .wc-block-components-sidebar { position: static; } html body.hrc-coded .wc-block-checkout .wc-block-checkout__sidebar { display: none; } } /* the HRC+ panel on a product carries the HRC+ logo, and names the perk that applies to the product */ html body.hrc-coded .hrc-plus-mark { display: flex; align-items: center; gap: 10px; } html body.hrc-coded .hrc-plus-logo { display: block; width: auto; height: 18px; } html body.hrc-coded .hrc-plus-panel.has-perk { border-color: var(--orange-ghost-line); } html body.hrc-coded .hrc-plus-perk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 12px 0 0; color: var(--ink); font: 400 15px/1.45 var(--font-sans); } html body.hrc-coded .hrc-plus-perk .hrc-plus-chip { flex: none; }