/* Theme Name: HairClipOns Description: Custom child theme for HairClipOns Author: HairClipOns Template: blocksy Version: 1.0.0 */ /* Phase 1 — HairClipOns home foundation */ /* Ravi canonical design tokens (Final Theme Migration Plan, Step 2 — approved 2026-07-21). Values extracted from Ravi's approved Home-page-images prototype; see docs/PROJECT-STATUS.md for the extraction methodology and the full token migration table. --hco-blush-deep is retained (now equal to --hco-blush) only so homepage/Phase B rules that still reference it don't break before their own restyle pass — the old two-shade split is retired here. --hco-rose-soft is a derived light outline tint of --hco-rose, not an extracted value — Ravi's flat mockups don't show an outline/secondary-button border state to sample. --hco-radius is the new shared corner radius (modest rounded-rect, replacing the old pill/stadium shape) for buttons and global WooCommerce chrome. --hco-rose-text (added Pre-Launch QA Audit fix pass, 2026-07-23) is a minimally-darkened, WCAG-AA-passing variant of --hco-rose for TEXT use only (links, prices, kickers, tagline) — measured 4.4:1 on cream (needs 4.5) and only 3.8:1 on the darker --hco-blush background, so it's genuinely non-compliant as text, not just a near-miss everywhere. --hco-rose-text passes ≥4.5:1 on every actual light background it's used against (blush 4.6, cream 5.5, white 5.7). --hco-rose itself is UNCHANGED and stays exactly as-is for backgrounds, icons, borders, and other non-text/decorative uses — this is a narrow, additive token, not a redefinition. */ :root { --hco-ink: #000000; --hco-muted: #524f4f; --hco-rose: #b15e62; --hco-rose-dark: #93454e; --hco-rose-soft: #cc9699; --hco-rose-text: #a04e52; --hco-blush: #f1e5e3; --hco-blush-deep: #f1e5e3; --hco-cream: #fcfcfc; --hco-line: #e8d6d4; --hco-surface: #2c3236; --hco-radius: 8px; --hco-serif: "Playfair Display", Georgia, serif; --hco-sans: "DM Sans", Arial, sans-serif; /* Typography roles (Typography/Readability audit, 2026-07-22 — see docs/TYPOGRAPHY-READABILITY-AUDIT.md). Introduced because none of the site's non-heading text previously shared a token — every caption/body/button size was an individually hardcoded 5.6-11px value. Headings/display type (H1/H2/H3, hero script) were found already appropriate and are deliberately left as their own clamp()-based rules, not folded into these. Made responsive (docs/TYPOGRAPHY-DESKTOP-SCALE-INVESTIGATION.md, 2026-07-22): H1/H2 already scale up with viewport via clamp()/vw, but these five were flat, so the heading-to-body proportion gap widened the wider the screen got. Mobile floor is unchanged from the flat values above (at 390px every vw term here resolves below its own px minimum); only the desktop ceiling moves. */ --hco-text-eyebrow: clamp(10px, 1.5vw, 12px); /* uppercase kicker/eyebrow labels */ --hco-text-body: clamp(13px, 1.6vw, 15px); /* main readable paragraphs */ --hco-text-body-sm: clamp(11px, 1.4vw, 13px); /* supporting/secondary body copy */ --hco-text-meta: clamp(10px, 1.3vw, 12px); /* short category/product/legal-microcopy labels */ --hco-text-button: clamp(11px, 1.4vw, 13px); /* custom button/CTA labels */ } .hco-homepage, .hco-site-header { font-family: var(--hco-sans); color: var(--hco-ink); } .hco-shell { width: min(1160px, calc(100% - 48px)); margin-inline: auto; } .hco-site-header { background: var(--hco-cream); } .hco-announcement-bar { background: var(--hco-rose); color: #fff; font-size: var(--hco-text-meta); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; } .hco-announcement-inner { min-height: 29px; display: flex; align-items: center; justify-content: center; gap: clamp(18px, 5vw, 85px); }.hco-announcement-inner span { display: flex; align-items: center; gap: 6px; }.hco-announcement-inner svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .hco-navigation-wrap { border-bottom: 1px solid var(--hco-line); } /* Homepage Refinement pass, 2026-08-26 (Ravi's review, item 1): header was flagged as "very compact... considerably more empty/unused space" against his planned design. Enlarged height/logo/nav scale below; structure and link set otherwise unchanged (see functions.php for the About Us restoration and the deliberate omission of Blog/FAQ/Contact/"Trusted by Thousands"). */ .hco-navigation { min-height: 88px; display: grid; grid-template-columns: 220px 1fr 130px; align-items: center; gap: 20px; } .hco-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--hco-ink); text-decoration: none; } .hco-logo-mark { color: var(--hco-rose); font-size: 22px; transform: rotate(-22deg); } .hco-logo-text { display: flex; flex-direction: column; gap: 2px; font-family: var(--hco-serif); font-size: 25px; font-weight: 700; letter-spacing: -.05em; line-height: 1; } .hco-logo sup { font-family: var(--hco-sans); font-size: 7px; letter-spacing: 0; vertical-align: top; } .hco-logo-text small { font-family: var(--hco-sans); font-size: 8px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--hco-muted); } .hco-primary-nav { justify-self: center; display: flex; align-items: center; gap: clamp(20px, 2.6vw, 36px); } .hco-primary-nav a { color: var(--hco-ink); font-size: var(--hco-text-body); font-weight: 700; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; transition: color .2s ease; }.hco-primary-nav a:hover { color: var(--hco-rose-text); } .hco-header-actions { justify-self: end; display: flex; gap: 15px; align-items: center; }.hco-header-actions a { color: var(--hco-ink); position: relative; display: grid; place-items: center; padding: 10px; margin: -10px; }.hco-header-actions svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }.hco-cart-link span { position: absolute; top: 4px; right: 2px; display: grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; background: var(--hco-rose); color: #fff; font-size: 7px; font-weight: 700; } .hco-menu-toggle { display: none; } .hco-homepage { background: var(--hco-cream); }.hco-homepage h1, .hco-homepage h2, .hco-homepage p { margin: 0; } /* Homepage Refinement pass, 2026-08-26 (Ravi's review, items 2/3/4): "Hero is considerably smaller... lacks the impact of the planned version... should occupy more vertical space and become the strongest visual element on the page." min-height/padding/type-scale/image-size all increased below. Copy/dual-CTA unchanged -- both are already-approved content decisions (Canonical Design Fidelity Audit 2026-07-22; Customer Discovery Foundation Phase D), not a visual-scale issue, and the task instructions explicitly warn against blindly reproducing the old planned copy. Hero photo also left unchanged -- see docs/PROJECT-STATUS.md and docs/RAVI-LAUNCH-ACTION-PACK.md for why (the only supplied "planned hero" asset is already in use elsewhere on this page, in the Occasion section; swapping it in here too would duplicate the same photo twice). */ .hco-hero { overflow: hidden; background: var(--hco-blush); }.hco-hero-grid { min-height: 660px; display: grid; grid-template-columns: minmax(0, .95fr) minmax(400px, 1.05fr); align-items: center; gap: clamp(40px, 8vw, 115px); padding: 56px 24px 54px; } .hco-hero-copy { padding-left: 18px; }.hco-eyebrow { color: var(--hco-rose-dark); font-size: var(--hco-text-eyebrow); font-weight: 700; letter-spacing: .17em; text-transform: uppercase; } .hco-hero h1 { margin-top: 22px; font-family: var(--hco-serif); font-size: clamp(48px, 5.2vw, 76px); line-height: .98; font-weight: 600; letter-spacing: -.055em; }.hco-hero-script { margin-top: 8px !important; color: var(--hco-rose-text); font-family: var(--hco-serif); font-size: clamp(21px, 2.3vw, 31px); font-style: italic; }.hco-heading-rule { width: 43px; height: 2px; display: block; margin: 22px 0; background: var(--hco-rose-soft); } .hco-hero-description { max-width: 360px; color: var(--hco-muted); font-size: clamp(14px, 1.8vw, 17px); line-height: 1.7; }.hco-hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 27px; }.hco-button { min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--hco-radius); padding: 10px 21px; font-size: var(--hco-text-button); font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: transform .2s ease, background .2s ease; }.hco-button:hover { transform: translateY(-2px); }.hco-button-primary { background: var(--hco-rose); color: #fff; }.hco-button-primary:visited { color: #fff; }.hco-button-primary:hover { background: var(--hco-rose-dark); color: #fff; }.hco-button-primary:focus-visible { outline: 2px solid var(--hco-ink); outline-offset: 2px; }.hco-button-primary span { font-size: 17px; line-height: 0; }.hco-button-secondary { border: 1px solid var(--hco-rose-soft); color: var(--hco-rose-text); }.hco-button-secondary:visited { color: var(--hco-rose-text); }.hco-button-secondary:hover { background: rgba(255,255,255,.55); color: var(--hco-rose-dark); }.hco-button-secondary:focus-visible { outline: 2px solid var(--hco-ink); outline-offset: 2px; } .hco-hero-features { display: flex; gap: 18px; margin-top: 28px; }.hco-hero-features span { display: flex; align-items: center; gap: 8px; color: var(--hco-muted); font-size: var(--hco-text-body-sm); font-weight: 600; line-height: 1.35; }.hco-hero-features b { display: grid; flex: 0 0 auto; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--hco-blush-deep); color: var(--hco-rose); }.hco-hero-features svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .hco-hero-visual { position: relative; width: min(100%, 540px); justify-self: end; }.hco-hero-visual::before { content: ""; position: absolute; z-index: 0; top: -6%; right: -8%; width: 76%; height: 76%; border-radius: 50%; background: var(--hco-blush-deep); }.hco-hero-visual img { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: .82; object-fit: cover; object-position: 72% 38%; border-radius: 14px; box-shadow: 0 16px 30px rgba(0, 0, 0, .12); } /* Homepage Refinement pass, 2026-08-26 (Ravi's review, item 4): "these appear quite small... important trust/conversion elements, not decorative." Icon/text/spacing scale increased. */ .hco-trust-strip { padding: 14px 0 42px; background: var(--hco-blush); }.hco-trust-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }.hco-trust-grid article { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 0 6px; }.hco-trust-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #fff; color: var(--hco-rose); }.hco-trust-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }.hco-trust-grid h2 { font-family: var(--hco-sans); font-size: var(--hco-text-body-sm); line-height: 1.3; font-weight: 700; }.hco-trust-grid p { margin: 3px 0 0; color: var(--hco-muted); font-size: var(--hco-text-body-sm); line-height: 1.3; } @media (max-width: 900px) { .hco-navigation { grid-template-columns: 1fr auto 120px; }.hco-menu-toggle { display: grid; gap: 5px; border: 0; padding: 10px; background: transparent; }.hco-menu-toggle span:not(.screen-reader-text) { width: 21px; height: 1px; background: var(--hco-ink); }.hco-primary-nav { display: none; }.hco-hero-grid { grid-template-columns: 1fr 1fr; gap: 35px; }.hco-hero-copy { padding-left: 0; }.hco-hero-features { gap: 12px; }.hco-trust-grid { grid-template-columns: repeat(3, 1fr); row-gap: 20px; } } @media (max-width: 620px) { .hco-shell { width: min(100% - 32px, 1160px); }.hco-announcement-inner { justify-content: space-between; gap: 8px; font-size: 9px; letter-spacing: .05em; }.hco-announcement-inner svg { width: 11px; height: 11px; }.hco-announcement-inner span:nth-child(2) { display: none; }.hco-navigation { min-height: 64px; grid-template-columns: 1fr auto 91px; gap: 3px; }.hco-logo-text { font-size: 19px; }.hco-logo-text small { display: none; }.hco-header-actions { gap: 10px; }.hco-header-actions a:nth-child(2) { display: none; }.hco-hero-grid { min-height: 0; grid-template-columns: 1fr; gap: 29px; padding: 42px 0 35px; }.hco-hero h1 { font-size: 48px; }.hco-hero-visual { justify-self: center; width: min(100%, 380px); }.hco-hero-visual img { object-position: 70% 34%; }.hco-hero-features { justify-content: space-between; gap: 6px; }.hco-trust-strip { padding: 6px 0 24px; }.hco-trust-grid { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }.hco-trust-icon { width: 41px; height: 41px; }.hco-trust-icon svg { width: 19px; height: 19px; }.hco-trust-grid h2 { font-size: 9px; } } /* Phase 2 — category, editorial, products and shade consultation */ /* Homepage Refinement pass, 2026-08-26 (Ravi's review, items 6/7/14/15): section padding and heading scale increased sitewide ("don't try to fit more content into less space... white space is part of the premium positioning"). Category grid STAYS 7 columns -- the approved catalog structure (CLAUDE.md, Phase 9) includes Bangs/Buns; Ravi's 5-card planned layout would hide 2 real, live categories, which is a catalog-structure change, not a visual one, so it's out of scope here. Card visual weight increased instead (bigger gap/icon/label) to close the "feels smaller" gap without reducing category count. */ .hco-section { padding: 108px 0; }.hco-section-heading { text-align: center; }.hco-kicker { color: var(--hco-rose-dark); font-size: var(--hco-text-eyebrow); font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }.hco-section-heading h2, .hco-editorial h2, .hco-shade h2, .hco-occasion h2 { margin-top: 9px; font-family: var(--hco-serif); font-size: clamp(34px, 3.6vw, 50px); font-weight: 600; line-height: 1.06; letter-spacing: -.05em; }.hco-section-heading > p:not(.hco-kicker) { margin-top: 14px; color: var(--hco-muted); font-size: clamp(14px, 1.7vw, 17px); }.hco-section-heading .hco-heading-rule { margin: 16px auto 0; } .hco-categories { background: var(--hco-cream); }.hco-category-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px; margin-top: 42px; }.hco-category-card { display: block; position: relative; overflow: hidden; border-radius: var(--hco-radius); background: #fff; color: var(--hco-ink); text-decoration: none; box-shadow: 0 4px 13px rgba(0, 0, 0, .045); transition: transform .25s ease, box-shadow .25s ease; }.hco-category-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, .08); }.hco-category-card-media { display: block; overflow: hidden; aspect-ratio: .82; background: var(--hco-blush-deep); }.hco-category-card-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: left center; transform: scale(1.3); transform-origin: left center; transition: transform .35s ease; }.hco-category-card:hover .hco-category-card-media img { transform: scale(1.36); }.hco-category-card-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; margin: -19px auto 0; border-radius: 50%; background: #fff; color: var(--hco-rose); box-shadow: 0 3px 8px rgba(0, 0, 0, .1); }.hco-category-card-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.hco-category-card-copy { display: block; padding: 10px 8px 16px; text-align: center; background: #fff; }.hco-category-card-copy b { display: block; font-family: var(--hco-serif); font-size: 14px; line-height: 1.2; font-weight: 600; } .hco-editorial { background: var(--hco-blush); }.hco-editorial-grid { display: grid; grid-template-columns: minmax(340px, .95fr) minmax(380px, 1.05fr); align-items: stretch; gap: clamp(40px, 8vw, 100px); }.hco-editorial-image { width: 100%; min-height: 420px; }.hco-editorial-image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--hco-radius); box-shadow: none; }.hco-editorial-copy > .hco-heading-rule, .hco-shade-copy > .hco-heading-rule { margin: 20px 0; }.hco-editorial-copy > p:not(.hco-kicker), .hco-shade-copy > p:not(.hco-kicker) { max-width: 500px; color: var(--hco-muted); font-size: clamp(14px, 1.8vw, 17px); line-height: 1.75; }.hco-value-list { display: grid; gap: 17px; margin: 28px 0 0; padding: 0; list-style: none; }.hco-value-list li { display: flex; gap: 13px; align-items: flex-start; }.hco-value-list li > span { display: grid; flex: 0 0 auto; place-items: center; width: 22px; height: 22px; margin-top: 1px; border: 1px solid var(--hco-rose-soft); border-radius: 50%; color: var(--hco-rose); }.hco-value-list li > span svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }.hco-value-list b, .hco-value-list small { display: block; }.hco-value-list b { font-family: var(--hco-serif); font-size: 15px; font-weight: 600; }.hco-value-list small { margin-top: 3px; color: var(--hco-muted); font-size: var(--hco-text-body-sm); line-height: 1.45; } /* Homepage Refinement pass, 2026-08-26 (Ravi's review, item 12): modest scale increase to match the rest of the page's larger type/spacing. The substantive fix for this section is the query correction in front-page.php (was surfacing 4 Coming Soon products with no price/Add to Cart) -- real products now render real WooCommerce prices, sale pricing, and Add to Cart/Select options buttons natively, no fabricated rating/discount UI added (no real review data exists to show a rating). */ .hco-popular { background: var(--hco-cream); }.hco-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }.hco-product-card { overflow: hidden; border: 1px solid #f0dedf; border-radius: var(--hco-radius); background: #fff; box-shadow: 0 4px 13px rgba(0, 0, 0, .035); }.hco-product-image { display: block; position: relative; overflow: hidden; background: var(--hco-blush-deep); aspect-ratio: .91; }.hco-product-image > img, .hco-product-image .wp-post-image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }.hco-product-card:hover .hco-product-image > img, .hco-product-card:hover .wp-post-image { transform: scale(1.035); }.hco-product-badge { position: absolute; top: 9px; left: 9px; padding: 4px 7px; border-radius: 2px; background: var(--hco-rose); color: #fff; font-size: var(--hco-text-meta); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.hco-product-heart { position: absolute; top: 7px; right: 9px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--hco-rose); }.hco-product-heart svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.hco-product-info { padding: 16px 16px 14px; }.hco-product-info p { color: var(--hco-rose-dark); font-size: var(--hco-text-meta); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }.hco-product-info h3 { margin: 6px 0 8px; font-family: var(--hco-serif); font-size: 16px; font-weight: 600; line-height: 1.2; }.hco-product-info h3 a { color: inherit; text-decoration: none; }.hco-product-price { min-height: 22px; color: var(--hco-rose-text); font-size: 14px; font-weight: 700; }.hco-product-price del { margin-right: 5px; color: #9d8587; font-size: 10px; font-weight: 400; }.hco-product-price ins { text-decoration: none; }.hco-product-price-pending { color: var(--hco-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }.hco-product-card .button, .hco-add-to-cart { width: 100%; min-height: 40px; margin-top: 9px !important; border-radius: var(--hco-radius) !important; padding: 8px 8px !important; background: var(--hco-ink) !important; color: #fff !important; font-family: var(--hco-sans); font-size: var(--hco-text-button) !important; font-weight: 700; letter-spacing: .07em; line-height: 1.2; text-align: center; text-decoration: none; text-transform: uppercase; }.hco-product-card .button:hover { background: var(--hco-rose) !important; }.hco-center-action { margin-top: 30px; text-align: center; } .hco-stats { padding: 46px 0; background: var(--hco-rose); color: #fff; }.hco-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }.hco-stats-icon { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 12px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; }.hco-stats-icon svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }.hco-stats-grid strong { display: block; font-family: var(--hco-serif); font-size: clamp(26px, 3vw, 38px); font-weight: 600; }.hco-stats-grid span { display: block; margin-top: 6px; font-size: var(--hco-text-meta); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .92; } /* Visible "this isn't real data" marker for the temporary demo figures (2026-08-05) -- deliberately part of the rendered page, not just a code comment, so a stakeholder reviewing the site sees it's illustrative without needing to read source. .hco-stats qualifier needed: the sitewide .hco-homepage p { margin: 0 } reset ((0,1,1) specificity) beats a bare .hco-stats-badge ((0,1,0)) otherwise -- the same issue already found and fixed on .hco-discovery-alt earlier this session, applied proactively here. display:table + margin-inline:auto centers the pill to its own content width rather than stretching full-width. */ .hco-stats .hco-stats-badge { display: table; margin: 0 auto 22px; padding: 6px 16px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; color: #fff; font-size: var(--hco-text-meta); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; text-align: center; opacity: .95; } /* Homepage Refinement pass, 2026-08-26 (Ravi's review, item 9): "should feel like a fashion editorial banner, not just another content block." Image/typography scale increased; photo and left/right position already matched Ravi's planned layout, so no structural change needed. */ .hco-occasion { background: var(--hco-blush); }.hco-occasion-grid { display: grid; grid-template-columns: minmax(340px, .95fr) minmax(360px, 1fr); align-items: center; gap: clamp(40px, 8vw, 100px); }.hco-occasion-image { position: relative; width: min(100%, 480px); }.hco-occasion-image::before { content: ""; position: absolute; z-index: 0; top: -8%; left: -10%; width: 78%; height: 78%; border-radius: 50%; background: var(--hco-blush-deep); }.hco-occasion-image img { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 1.15; object-fit: cover; object-position: top center; border-radius: 14px; box-shadow: 0 16px 30px rgba(0, 0, 0, .1); }.hco-occasion-copy > p:not(.hco-kicker) { max-width: 460px; margin-top: 16px; color: var(--hco-muted); font-size: clamp(14px, 1.8vw, 17px); line-height: 1.75; }.hco-occasion-copy .hco-button { margin-top: 25px; } .hco-shade { background: var(--hco-blush); }.hco-shade-grid { display: grid; grid-template-columns: 1.06fr .94fr; align-items: center; gap: clamp(35px, 7vw, 95px); }.hco-whatsapp-icon svg, .hco-whatsapp-button svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }.hco-shade-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }.hco-whatsapp-button { background: #25c765; color: #fff; }.hco-whatsapp-button:hover { background: #18a952; color: #fff; }.hco-shade-visuals { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; }.hco-shade-visuals img { display: block; width: 100%; border-radius: 9px; box-shadow: 0 11px 18px rgba(125, 59, 68, .13); }.hco-shade-visuals img:first-child { transform: translateY(-15px); } @media (max-width: 900px) { .hco-section { padding: 70px 0; }.hco-category-grid { grid-template-columns: repeat(3, 1fr); }.hco-category-grid .hco-category-card:last-child { grid-column: 2; }.hco-editorial-grid { grid-template-columns: 1fr .85fr; gap: 40px; }.hco-stats-grid { gap: 20px 0; }.hco-occasion-grid { grid-template-columns: .8fr 1fr; gap: 40px; }.hco-product-grid { grid-template-columns: repeat(2, 1fr); max-width: 600px; margin-inline: auto; }.hco-shade-grid { grid-template-columns: 1fr .75fr; gap: 38px; } } @media (max-width: 620px) { .hco-section { padding: 57px 0; }.hco-section-heading h2, .hco-editorial h2, .hco-shade h2, .hco-occasion h2 { font-size: 34px; }.hco-category-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }.hco-category-grid .hco-category-card:last-child { grid-column: 1 / -1; width: calc(50% - 5px); justify-self: center; }.hco-editorial-grid, .hco-shade-grid, .hco-occasion-grid { grid-template-columns: 1fr; }.hco-editorial-grid, .hco-occasion-grid { gap: 33px; }.hco-editorial-grid { align-items: center; }.hco-editorial-image { max-width: 380px; min-height: 0; margin-inline: auto; }.hco-occasion-image { max-width: 380px; margin-inline: auto; }.hco-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }.hco-product-grid { gap: 10px; }.hco-product-info { padding: 10px; }.hco-product-info h3 { font-size: 13px; }.hco-product-price { font-size: 12px; }.hco-shade-visuals { max-width: 400px; margin-inline: auto; }.hco-shade-visuals img:first-child { transform: translateY(-9px); }.hco-shade-actions { margin-top: 20px; }.hco-shade-actions .hco-button { padding-inline: 13px; } } /* Phase 3 — social proof, how it works and homepage footer */ .hco-transformations { background: var(--hco-cream); }.hco-transformation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }.hco-transformation { overflow: hidden; margin: 0; border: 1px solid #f1dfe1; border-radius: 9px; background: #f9c5cf; }.hco-transformation img { display: block; width: 100%; transition: transform .3s ease; }.hco-transformation:hover img { transform: scale(1.025); }.hco-transformation-2 img { filter: hue-rotate(11deg) saturate(.92); }.hco-transformation-3 img { filter: hue-rotate(-13deg) saturate(.94); } .hco-reviews { background: #ffeff1; }.hco-review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin-top: 35px; }.hco-review-card { padding: 14px; border: 1px solid #f0dcdf; border-radius: 9px; background: #fff; box-shadow: 0 7px 16px rgba(106, 54, 61, .06); }.hco-review-person { display: flex; align-items: center; gap: 9px; }.hco-review-person img { width: 27px; height: 27px; border-radius: 50%; }.hco-review-person b, .hco-review-person span { display: block; }.hco-review-person b { font-family: var(--hco-serif); font-size: 12px; font-weight: 600; }.hco-review-person span { color: var(--hco-rose-text); font-size: 8px; letter-spacing: .1em; }.hco-review-image { display: block; width: 100%; margin-top: 11px; border-radius: 5px; }.hco-review-image-2 { filter: hue-rotate(9deg); }.hco-review-image-3 { filter: hue-rotate(-9deg); }.hco-review-card blockquote { margin: 10px 0 0; color: var(--hco-muted); font-family: var(--hco-serif); font-size: 11px; font-style: italic; line-height: 1.45; } .hco-how-it-works { background: #fffdfb; }.hco-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 41px; }.hco-steps-grid article { position: relative; padding: 0 30px; text-align: center; }.hco-steps-grid article:not(:last-child)::after { position: absolute; top: 22px; right: -6px; width: calc(50% - 23px); height: 1px; background: var(--hco-line); content: ""; transform: translateX(50%); }.hco-steps-grid span { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 15px; border-radius: 50%; background: var(--hco-blush-deep); color: var(--hco-rose); font-size: 9px; font-weight: 700; }.hco-steps-grid h3 { margin: 0; font-family: var(--hco-serif); font-size: 17px; font-weight: 600; }.hco-steps-grid p { max-width: 215px; margin: 8px auto 0; color: var(--hco-muted); font-size: 9px; line-height: 1.55; } .hco-instagram { background: #ffe9ec; }.hco-instagram-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 28px; }.hco-instagram-item { overflow: hidden; border-radius: 7px; background: #f7b6c2; }.hco-instagram-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .3s ease; }.hco-instagram-item:hover img { transform: scale(1.06); }.hco-instagram-item-2 img { filter: hue-rotate(12deg); }.hco-instagram-item-3 img { filter: hue-rotate(-8deg); }.hco-instagram-item-4 img { filter: hue-rotate(23deg); }.hco-instagram-item-5 img { filter: hue-rotate(-18deg); }.hco-instagram-item-6 img { filter: saturate(.8); } .hco-final-trust { background: var(--hco-rose); color: #fff; }.hco-final-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); }.hco-final-trust-grid > div { display: flex; min-height: 72px; align-items: center; justify-content: center; gap: 11px; border-right: 1px solid rgba(255,255,255,.25); }.hco-final-trust-grid > div:last-child { border-right: 0; }.hco-final-trust-grid > div > span { font-size: 23px; }.hco-final-trust-grid p { margin: 0; text-transform: uppercase; }.hco-final-trust-grid b, .hco-final-trust-grid small { display: block; }.hco-final-trust-grid b { font-size: 9px; letter-spacing: .08em; }.hco-final-trust-grid small { margin-top: 2px; font-size: 7px; opacity: .76; } /* Homepage Refinement pass, 2026-08-26 (Ravi's review, item 13): "footer should be redesigned to match the planned design... dark footer makes the website feel like it has switched to a different theme." Recolored to --hco-rose-dark (an existing token, not a new color) -- confirmed 6.56:1 contrast with white text and 5.33:1 for --hco-blush secondary text, both comfortably WCAG AA. Structure/links/copy unchanged, color only. */ .hco-footer { background: var(--hco-rose-dark); color: #fff; font-family: var(--hco-sans); }.hco-footer-grid { display: grid; grid-template-columns: 1.65fr 1fr 1fr .8fr; gap: 42px; padding: 40px 0; }.hco-footer .hco-logo { color: #fff; }.hco-footer .hco-logo-text small { color: var(--hco-blush); }.hco-footer-brand > p { max-width: 260px; margin: 17px 0 0; color: var(--hco-blush); font-size: var(--hco-text-body-sm); line-height: 1.65; }.hco-footer-socials { display: flex; gap: 8px; }.hco-footer-socials a { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; color: #fff; font-size: 10px; text-decoration: none; flex: 0 0 auto; }.hco-footer h2 { margin: 0 0 15px; color: #ffffff; font-family: var(--hco-serif); font-size: 14px; font-weight: 600; }.hco-footer-grid > div:not(.hco-footer-brand) a { display: block; margin: 0 0 8px; color: var(--hco-blush); font-size: var(--hco-text-body-sm); text-decoration: none; }.hco-footer a:hover { color: #fff; }.hco-footer-grid > div:not(.hco-footer-brand) a:hover { color: #fff; }.hco-footer-newsletter { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 30px 0; border-bottom: 1px solid rgba(255, 255, 255, .25); }.hco-footer-newsletter h2 { margin-bottom: 4px; }.hco-footer-newsletter p { margin: 0; color: var(--hco-blush); font-size: var(--hco-text-body-sm); }.hco-footer-newsletter form { display: flex; flex: 1 1 auto; overflow: hidden; max-width: 400px; border-radius: var(--hco-radius); background: #fff; }.hco-footer-newsletter input { width: 100%; min-height: 35px; border: 0; padding: 0 14px; background: transparent; color: var(--hco-ink); font-family: var(--hco-sans); font-size: var(--hco-text-body); outline: 0; }.hco-footer-newsletter input::placeholder { color: var(--hco-muted); }.hco-footer-newsletter input:focus-visible { box-shadow: inset 0 0 0 2px var(--hco-rose); }.hco-footer-newsletter button { width: 35px; border: 0; border-radius: 50%; margin: 3px; background: var(--hco-rose); color: #fff; cursor: pointer; flex: 0 0 auto; }.hco-footer-newsletter .hco-footer-socials { flex: 0 0 auto; }.hco-footer-bottom { display: flex; justify-content: center; padding: 15px 0 20px; border-top: 1px solid rgba(255, 255, 255, .25); color: var(--hco-blush); font-size: var(--hco-text-meta); }.hco-footer-bottom small { font-size: inherit; } @media (max-width: 760px) { .hco-transformation-grid, .hco-review-grid { grid-template-columns: 1fr; max-width: 500px; margin-inline: auto; }.hco-steps-grid { gap: 31px; grid-template-columns: 1fr; }.hco-steps-grid article:not(:last-child)::after { top: auto; right: 50%; bottom: -19px; width: 1px; height: 14px; transform: none; }.hco-instagram-grid { grid-template-columns: repeat(3, 1fr); }.hco-footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }.hco-footer-brand { grid-column: 1 / -1; }.hco-footer-brand > p { max-width: 330px; }.hco-footer-newsletter { align-items: flex-start; flex-direction: column; gap: 15px; }.hco-footer-newsletter form { width: 100%; } } @media (max-width: 620px) { .hco-final-trust-grid { grid-template-columns: 1fr; }.hco-final-trust-grid > div { min-height: 55px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); }.hco-final-trust-grid > div:last-child { border-bottom: 0; }.hco-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 31px 22px; padding-top: 43px; }.hco-footer-brand { grid-column: 1 / -1; }.hco-footer-newsletter, .hco-footer-bottom { width: min(100% - 32px, 1160px); }.hco-review-card { padding: 12px; } } /* Phase A — sitewide identity foundation (Shop / Category / Product chrome) */ /* Replace Blocksy's global color palette (still the old Floreo demo greens) with the approved HairClipOns tokens. Blocksy's own theme, WooCommerce templates and any un-restyled chrome read colors from these 8 variables, so this is the single global switch away from the plant-store look. */ :root { --theme-palette-color-1: #b15e62; /* primary / links / buttons -> hco-rose */ --theme-palette-color-2: #93454e; /* link hover -> hco-rose-dark */ --theme-palette-color-3: #000000; /* base text -> hco-ink */ --theme-palette-color-4: #000000; /* headings -> hco-ink */ --theme-palette-color-5: #e8d6d4; /* borders -> hco-line */ --theme-palette-color-6: #f1e5e3; /* alt background -> hco-blush */ --theme-palette-color-7: #fcfcfc; /* site background -> hco-cream */ --theme-palette-color-8: #ffffff; /* content background */ } /* Baseline WooCommerce chrome alignment. Layout/design stays native Blocksy for now (Phase C covers the real archive/product redesign) — this only swaps the leftover plant-demo greens on buttons, price and ratings for the approved HairClipOns palette everywhere WooCommerce renders. */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce a.added_to_cart { background-color: var(--hco-rose) !important; border-color: var(--hco-rose) !important; color: #fff !important; border-radius: var(--hco-radius) !important; font-family: var(--hco-sans) !important; font-weight: 700 !important; letter-spacing: .04em; text-transform: uppercase; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.added_to_cart:hover { background-color: var(--hco-rose-dark) !important; border-color: var(--hco-rose-dark) !important; color: #fff !important; } .woocommerce .price, .woocommerce-Price-amount { color: var(--hco-rose-text); } .woocommerce .star-rating span::before { color: var(--hco-rose); } /* Plain-link color for actual WooCommerce content only (Step 4 visual refinement, second pass). Two fixes layered on the original Phase A rule: 1) :not(.hco-button) — a generic "plain WooCommerce content link" rule was colliding with our own .hco-button component wherever one appears inside WooCommerce context (e.g. the archive empty-state CTA): its specificity beat .hco-button-primary's own color:#fff, overwriting rose text onto a rose background. 2) `body.woocommerce main` / `body.woocommerce-page main` prefix — the original rule used .woocommerce/.woocommerce-page as a bare ancestor selector, but those only ever exist as classes on this site (WooCommerce doesn't add a wrapping .woocommerce div around archive content here). A bare `.woocommerce a` descendant selector therefore matched *any* link anywhere on a WooCommerce-context page — including the sitewide header logo, primary nav, header action icons, and footer links, all rendered outside
but still inside . Requiring `main` as an explicit ancestor scopes this to the real content region (archive hero/sidebar/grid, cart, checkout, account — everything header.php/footer.php render inside
) and structurally excludes header/footer/nav, which live outside it by construction — not by an ever-growing list of exclusions. */ body.woocommerce main a:not(.button):not(.hco-button), body.woocommerce-page main a:not(.button):not(.hco-button) { color: var(--hco-rose-text); } body.woocommerce main a:not(.button):not(.hco-button):hover, body.woocommerce-page main a:not(.button):not(.hco-button):hover { color: var(--hco-rose-dark); } /* Blocksy scopes each native notice's own text color via the inheritable --theme-link-initial-color custom property so links inside .woocommerce-error/ -message/-info automatically match that notice's own background (e.g. white on the error notice's red background). The sitewide rose link rule above is more specific than Blocksy's own `a { color: var(--theme-link-initial-color) }` and was unintentionally winning inside notices too, producing low-contrast rose text on the red error notice. Restoring `inherit` here (not a new hardcoded color) lets Blocksy's native per-notice coloring take back over for all three notice types, including any not yet observed to contain a link. The extra, otherwise-redundant :not(.button) matches the specificity (three classes) of the sitewide rule above so this later, more targeted rule wins the cascade without resorting to !important. */ body.woocommerce main .woocommerce-error a:not(.button), body.woocommerce-page main .woocommerce-error a:not(.button), body.woocommerce main .woocommerce-message a:not(.button), body.woocommerce-page main .woocommerce-message a:not(.button), body.woocommerce main .woocommerce-info a:not(.button), body.woocommerce-page main .woocommerce-info a:not(.button) { color: inherit; } body.woocommerce main .woocommerce-error a:not(.button):hover, body.woocommerce-page main .woocommerce-error a:not(.button):hover, body.woocommerce main .woocommerce-message a:not(.button):hover, body.woocommerce-page main .woocommerce-message a:not(.button):hover, body.woocommerce main .woocommerce-info a:not(.button):hover, body.woocommerce-page main .woocommerce-info a:not(.button):hover { color: inherit; text-decoration: underline; } /* My Account nav active-tab illegibility (Pre-Launch QA Audit, 2026-07-23): Blocksy's own .woocommerce-MyAccount-navigation ul li.is-active a / :hover a rule correctly pairs a rose background with white text (var(--theme-palette-color-8)) — but the same sitewide rule above (0,3,3) was beating just the text-color half of it (0,2,3), leaving the background rose and the text ALSO rose: fully illegible. Scoped to exactly the two states that were actually broken (hover/active); the inactive-tab rose text is untouched — it isn't broken and matches the sitewide link color used everywhere else. Ancestor-scoped to match/beat specificity, same established pattern as the notice-links fix above and the widget sidebar fix — no !important. The .is-active half needed (0,3,5) to beat the sitewide rule's (0,3,3) and that was enough — confirmed live. The :hover half additionally collides with this file's own generic hover rule (body...a:not(.button):not(.hco-button):hover, (0,4,3) — two :not()s plus :hover all count as classes) which is MORE specific than a naive (0,3,5) hover fix; qualifying li with its own always-present .woocommerce-MyAccount-navigation-link class (present on every item, confirmed in the rendered markup) brings this to (0,4,5), correctly beating it — found and corrected via live computed-style verification, not assumed from source. */ body.woocommerce main .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link:hover a, body.woocommerce-page main .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link:hover a, body.woocommerce main .woocommerce-MyAccount-navigation ul li.is-active a, body.woocommerce-page main .woocommerce-MyAccount-navigation ul li.is-active a { color: var(--theme-palette-color-8, #fff); } /* Functional mobile navigation (was previously non-interactive). Preserves desktop behavior — only applies under the existing 900px nav breakpoint. */ @media (max-width: 900px) { .hco-navigation { position: relative; } /* Launch Checklist L-19, 2026-08-05: the dropdown previously floated directly over page content (hero headline etc.) with no dimming backdrop, making it read as a stray overlapping panel rather than a modal-style menu. :has() lets the backdrop react to the existing .is-open toggle (already set by mobile-nav.js) with no JS change -- broad evergreen support by this date. Backdrop is position:fixed so it covers the full viewport below the header regardless of page height; logo/toggle are lifted above it (z-index 41 > 40) so they stay visible/tappable while the menu is open, since only .hco-navigation's children (logo, toggle, nav) sit in the stacking order the backdrop's z-index competes in -- confirmed via the actual markup structure. */ .hco-navigation:has(.hco-primary-nav.is-open)::before { content: ""; position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .4); } .hco-navigation:has(.hco-primary-nav.is-open) .hco-logo, .hco-navigation:has(.hco-primary-nav.is-open) .hco-menu-toggle { position: relative; z-index: 41; } .hco-primary-nav.is-open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; z-index: 40; gap: 0; margin: 0; padding: 8px 0; background: var(--hco-cream); border-top: 1px solid var(--hco-line); box-shadow: 0 14px 24px rgba(0, 0, 0, .12); } .hco-primary-nav.is-open a { width: 100%; box-sizing: border-box; padding: 13px 24px; } .hco-primary-nav.is-open a:not(:last-child) { border-bottom: 1px solid var(--hco-line); } .hco-menu-toggle[aria-expanded="true"] span:not(.screen-reader-text):nth-child(2) { transform: translateY(3px) rotate(45deg); } .hco-menu-toggle[aria-expanded="true"] span:not(.screen-reader-text):nth-child(3) { transform: translateY(-3px) rotate(-45deg); } } /* Phase B — Shop & category archive experience */ /* Blocksy renders its own generic "Hero Section" title band ahead of the WooCommerce template content on these archive contexts (Shop, product category, and -- Launch Checklist L-08, 2026-08-05 -- Shop by Concern) — redundant now that .hco-archive-hero below replaces it with the branded version. Hidden via CSS only (Blocksy's own settings/markup untouched) so it stays reversible and scoped to just these contexts. product_concern was missed when this rule was first written (Phase B, before the taxonomy existed) and never added when Phase B's Shop by Concern archive was built on top of it -- confirmed live via body class inspection (body.tax-product_concern) before adding this selector. */ body.post-type-archive-product .hero-section, body.tax-product_cat .hero-section, body.tax-product_concern .hero-section { display: none; } .woocommerce-breadcrumb { padding: 16px 0 0; font-size: 10px; letter-spacing: .02em; color: var(--hco-muted); } /* !important here is a deliberate, narrow exception (found while validating Step 5, same root cause as the Step 2 CTA fix): the sitewide body.woocommerce main a:not(.button):not(.hco-button) rule has specificity (0,3,3) since it stacks a class + two :not() pseudo-classes + three type selectors. CSS has no ancestor-exclusion selector, so a rule scoped to "links inside .woocommerce-breadcrumb" can't be written with :not() the way .hco-button was excluded (:not() only tests the element itself, not its ancestors) — matching or exceeding (0,3,3) without !important would need non-semantic specificity-padding tricks that are no cleaner than this. Kept intentionally narrow: two rules, one component. */ .woocommerce-breadcrumb a { color: var(--hco-muted) !important; text-decoration: none; } .woocommerce-breadcrumb a:hover { color: var(--hco-rose-text) !important; } /* Archive hero — one plain title band for the Shop page and every category alike, matching Ravi's canonical Shop/Category design (no per-category photo/overlay; the per-category banner PNGs stay in use elsewhere, on the homepage's Shop-by-Category cards). */ .hco-archive-hero { background: var(--hco-blush); color: var(--hco-ink); } .hco-archive-hero-inner { padding: 34px 24px; text-align: center; } .hco-archive-hero .hco-kicker { color: var(--hco-rose-text); } .hco-archive-hero-title { margin: 9px 0 0; font-family: var(--hco-serif); font-size: clamp(26px, 3.2vw, 38px); font-weight: 600; line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; color: var(--hco-ink); } .hco-archive-hero-tagline { margin: 11px 0 0; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hco-rose-text); } .hco-archive-hero .term-description { max-width: 60ch; margin: 14px auto 0; font-size: 11px; line-height: 1.65; color: var(--hco-muted); } /* Sidebar layout (Step 4) — uses Blocksy's own native WooCommerce sidebar mechanism (theme mods woo_categories_has_sidebar/_sidebar_position, set once via WP-CLI) rather than a custom wrapper template, so this only has to lay out whatever two children Blocksy renders inside its [data-sidebar] container — no dependency on Blocksy's own wrapper class names, which aren't part of its public API. */ body.post-type-archive-product [data-sidebar], body.tax-product_cat [data-sidebar] { display: grid; grid-template-columns: 220px 1fr; align-items: start; gap: 40px; width: min(1160px, calc(100% - 48px)); margin-inline: auto; } body.post-type-archive-product [data-sidebar] > section, body.tax-product_cat [data-sidebar] > section { min-width: 0; } body.post-type-archive-product [data-sidebar] .hco-shell, body.tax-product_cat [data-sidebar] .hco-shell { width: auto; margin-inline: 0; } .widget_product_categories .widget-title { margin: 0 0 12px; font-family: var(--hco-serif); font-size: 15px; font-weight: 600; color: var(--hco-ink); } .widget_product_categories ul.product-categories { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .widget_product_categories ul.product-categories li a { display: block; padding: 4px 0; font-size: var(--hco-text-body); text-decoration: none; border-bottom: 1px solid var(--hco-line); } /* The sitewide body.woocommerce main a:not(.button):not(.hco-button) rule (specificity 0,3,3 — two :not() pseudo-classes each count as a class) was unintentionally beating this widget's own color rules, so every sidebar category link rendered rose regardless of active state (Hair Shade UX follow-up audit, 2026-07-23). Matching the ancestor-scoping pattern already used at the .woocommerce-error/-message/-info links and .woocommerce-breadcrumb above restores the intended muted/rose distinction without !important — three classes ties the sitewide rule's class count, and the extra body/main/ul/li/a type selectors win the tie on element count. */ body.woocommerce main .widget_product_categories ul.product-categories li a, body.woocommerce-page main .widget_product_categories ul.product-categories li a { color: var(--hco-muted); } body.woocommerce main .widget_product_categories ul.product-categories li a:hover, body.woocommerce-page main .widget_product_categories ul.product-categories li a:hover { color: var(--hco-rose-text); } body.woocommerce main .widget_product_categories ul.product-categories li.current-cat > a, body.woocommerce-page main .widget_product_categories ul.product-categories li.current-cat > a { color: var(--hco-rose-text); font-weight: 700; } /* Result count + ordering */ .woocommerce-result-count { font-size: 10px; color: var(--hco-muted); } .woocommerce-ordering { font-size: 10px; } .woocommerce-ordering select.orderby { border: 1px solid var(--hco-line); border-radius: var(--hco-radius); padding: 7px 30px 7px 14px; background-color: #fff; font-family: var(--hco-sans); font-size: 10px; color: var(--hco-ink); } .woocommerce > .hco-shell.hco-archive-toolbar, .woocommerce-page > .hco-shell.hco-archive-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 28px auto 0; } /* Product grid/card — targets WooCommerce's real loop markup (ul.products / li.product). No add-to-cart button and no wishlist icon on the card itself, matching Ravi's canonical design: photo, title, price, click through to buy — nothing rendered that looks interactive but isn't wired up yet. */ .woocommerce ul.products, .woocommerce-page ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; margin: 24px 0 0; padding: 0; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { position: relative; overflow: hidden; margin: 0; border: 1px solid #f0dedf; border-radius: var(--hco-radius); background: #fff; box-shadow: 0 4px 13px rgba(0, 0, 0, .035); list-style: none; } .woocommerce ul.products li.product .woocommerce-loop-product__link { position: relative; display: block; color: inherit; text-decoration: none; } .woocommerce ul.products li.product img { display: block; width: 100%; aspect-ratio: .91; object-fit: cover; background: var(--hco-blush-deep); transition: transform .3s ease; } .woocommerce ul.products li.product:hover img { transform: scale(1.035); } .woocommerce ul.products li.product .onsale { position: absolute; top: 9px; left: 9px; z-index: 2; padding: 4px 7px; border-radius: 2px; background: var(--hco-rose); color: #fff; font-size: 7px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .woocommerce ul.products li.product .woocommerce-loop-product__title { margin: 13px 13px 3px; font-family: var(--hco-serif); font-size: 14px; font-weight: 600; line-height: 1.15; } .woocommerce ul.products li.product .star-rating { margin: 0 13px 4px; font-size: 11px; } .woocommerce ul.products li.product .price { display: block; margin: 0 13px 15px; color: var(--hco-rose-text); font-size: 13px; font-weight: 700; } .woocommerce ul.products li.product .price del { margin-right: 5px; color: #9d8587; font-size: 9px; font-weight: 400; } .woocommerce ul.products li.product .price ins { text-decoration: none; } /* Pagination */ .woocommerce-pagination { margin: 36px 0 0; text-align: center; } .woocommerce-pagination .page-numbers { display: inline-flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; } .woocommerce-pagination .page-numbers li { display: inline-block; } .woocommerce-pagination .page-numbers a, .woocommerce-pagination .page-numbers span { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 4px; border-radius: 50%; font-family: var(--hco-sans); font-size: 11px; color: var(--hco-ink); text-decoration: none; } .woocommerce-pagination .page-numbers .current { background: var(--hco-rose); color: #fff; } .woocommerce-pagination .page-numbers a:hover { background: var(--hco-blush); } /* Branded empty state (replaces WooCommerce's default gray notice) */ .hco-archive-empty { padding: 44px 0 56px; text-align: center; } .hco-archive-empty-inner { max-width: 460px; margin-inline: auto; } .hco-archive-empty-mark { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 50%; background: var(--hco-blush-deep); color: var(--hco-rose); font-size: 18px; } .hco-archive-empty h2 { margin: 0 0 12px; font-family: var(--hco-serif); font-size: clamp(24px, 3vw, 30px); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; color: var(--hco-ink); } .hco-archive-empty p { margin: 0 0 26px; color: var(--hco-muted); font-size: 12px; line-height: 1.7; } @media (max-width: 900px) { .hco-archive-hero-inner { padding: 30px 20px; } /* Sidebar stacks above the grid rather than beside it — its last-child position in the DOM (Blocksy appends it after the main
) is reordered to first here via CSS `order`, so the Categories list still reads before the product grid on mobile without needing a custom collapse/toggle for what's now just 5 short links. */ body.post-type-archive-product [data-sidebar], body.tax-product_cat [data-sidebar] { grid-template-columns: 1fr; gap: 16px; } body.post-type-archive-product [data-sidebar] > *:last-child, body.tax-product_cat [data-sidebar] > *:last-child { order: -1; } /* Mobile spacing refinement (2026-07-21, populated-catalog visual review). Measured via computed styles: the ~83px visible gap between the last Categories link and the product grid was three separately- native, individually-reasonable values stacking — this grid's own gap (just tightened above), the sort-dropdown row's native .woo-listing-top bottom margin (25px), and ul.products' own top margin (24px, collapses with the former to 25px). None are wrong in isolation; the combination only happens because the sidebar stacks above the content on mobile (Step 4), which never occurs on desktop. Narrowly tightening just these two mobile-archive-scoped values for a tighter rhythm, not removing the row or its content. */ body.post-type-archive-product .woo-listing-top, body.tax-product_cat .woo-listing-top { margin-bottom: 12px; } /* Not "body.tax-product_cat .woocommerce ul.products" — .woocommerce/ .woocommerce-page only exist as classes on this site (no wrapper div), same fact already documented in the Step 4 sitewide link-color leak fix. A selector requiring .woocommerce as a descendant of body.tax-product_cat can never match, since they're classes on the same body element, not nested. */ body.post-type-archive-product ul.products, body.tax-product_cat ul.products { margin-top: 12px; } /* Blocksy hides sidebars by default below its sm/md breakpoints via .ct-hidden-sm/.ct-hidden-md utility classes (a generic assumption that sidebars are optional blog/page furniture) — override just for this archive context, since the Categories list is real navigation here, not decorative. */ body.post-type-archive-product [data-sidebar] #sidebar.ct-hidden-sm, body.post-type-archive-product [data-sidebar] #sidebar.ct-hidden-md, body.tax-product_cat [data-sidebar] #sidebar.ct-hidden-sm, body.tax-product_cat [data-sidebar] #sidebar.ct-hidden-md { display: block !important; } .widget_product_categories ul.product-categories { display: flex; flex-wrap: wrap; gap: 8px 18px; } .widget_product_categories ul.product-categories li a { border-bottom: 0; padding: 4px 0; } .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); gap: 10px; } .woocommerce > .hco-shell.hco-archive-toolbar, .woocommerce-page > .hco-shell.hco-archive-toolbar { flex-direction: column; align-items: flex-start; gap: 10px; } } @media (max-width: 620px) { .hco-archive-hero-inner { padding: 26px 0; } .hco-archive-hero-title { font-size: 28px; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 13px; } .hco-archive-empty { padding: 36px 0 48px; } } /* Phase 5 — Product Detail (Step 5, Final Theme Migration Plan). Restyles native WooCommerce + Blocksy single-product markup; no template fork. */ /* Breadcrumb/title band. Unlike Shop/category archives, Blocksy's generic Hero Section on single-product pages renders only a plain breadcrumb (no duplicate title, confirmed by inspecting a live preview) — so this restyles it in place rather than hiding and rebuilding it the way Step 4 had to for archives. */ body.single-product .hero-section { background: var(--hco-cream); padding: 14px 0; } body.single-product .hero-section .ct-breadcrumbs { font-size: 10px; letter-spacing: .02em; color: var(--hco-muted); } /* !important: same genuinely-unavoidable exception as .woocommerce-breadcrumb above — see that rule's comment for the full explanation. */ body.single-product .hero-section .ct-breadcrumbs a { color: var(--hco-muted) !important; text-decoration: none; } body.single-product .hero-section .ct-breadcrumbs a:hover { color: var(--hco-rose-text) !important; } body.single-product .content-area, body.single-product #primary { padding-top: 8px; padding-bottom: 0; } body.single-product div[id^="product-"] { width: min(1160px, calc(100% - 48px)); margin-inline: auto; padding: 28px 0 0; } /* Gallery. thumbs-left is added to the product wrapper automatically once the native Blocksy theme_mod gallery_style=vertical is set (Customizer: Product Gallery > Gallery Thumbnails > Thumbnails Position) — confirmed via source, only visible once a product actually has gallery images. .woocommerce-product-gallery itself is JS-templated by Blocksy, so this restyles the parts confirmed from a live preview and stays defensive (flex-wrap) for the parts that can't be confirmed without a real multi-image product. */ .woocommerce-product-gallery { background: var(--hco-blush); border-radius: var(--hco-radius); overflow: hidden; } .woocommerce-product-gallery img { display: block; } .thumbs-left .woocommerce-product-gallery { display: flex; flex-direction: row-reverse; gap: 12px; background: none; } .thumbs-left .ct-product-gallery-container, .thumbs-left .ct-media-container { border-radius: var(--hco-radius); overflow: hidden; background: var(--hco-blush); } .woocommerce-product-gallery .flex-control-nav, .woocommerce-product-gallery__wrapper + ol { display: flex; flex-direction: column; gap: 8px; } .woocommerce-product-gallery .flex-control-nav img { border-radius: calc(var(--hco-radius) - 2px); border: 1px solid var(--hco-line); cursor: pointer; } /* Summary column */ .summary.entry-summary { padding-top: 4px; } .summary.entry-summary > .product_title { font-family: var(--hco-serif); font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; letter-spacing: -.03em; color: var(--hco-ink); margin: 0 0 8px; } /* Product subtitle -- reuses the .hco-archive-hero-tagline "small uppercase rose kicker under a heading" treatment, scoped to its own class since the PDP title is a different size than an archive H1. Standard pattern for every product going forward. */ .hco-product-subtitle { margin: 0 0 16px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hco-rose-text); } .summary.entry-summary .star-rating { font-size: 13px; } .summary.entry-summary .woocommerce-product-rating { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--hco-muted); } .summary.entry-summary p.price { font-size: 22px; font-weight: 700; color: var(--hco-rose-text); margin: 0 0 14px; } .summary.entry-summary p.price del { color: #9d8587; font-size: 14px; font-weight: 400; margin-right: 6px; } /* Short description as a checklist — styles whatever real content editors author (a
    in the product's Short Description field) as a check-icon list matching Ravi's design. Empty short descriptions already render nothing natively; nothing to gate here in CSS. */ .woocommerce-product-details__short-description ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; } .woocommerce-product-details__short-description ul li { position: relative; padding-left: 24px; font-size: 11px; color: var(--hco-ink); line-height: 1.4; } .woocommerce-product-details__short-description ul li::before { content: ""; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--hco-rose-soft); background: var(--hco-blush) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23b15e62' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.5'/%3E%3C/svg%3E") center/9px no-repeat; } .woocommerce-product-details__short-description p { font-size: 11px; color: var(--hco-muted); line-height: 1.6; margin: 0 0 18px; } /* Variation attribute pills (native