/**
* Horizon Theme — Base Styles
* Document reset, typography, GeneratePress overrides, layout utilities.
*/
/* ── Google Fonts loaded via wp_enqueue_style in functions.php ── */
/* ==========================================================================
Document
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body,
.editor-styles-wrapper {
background-color: var(--hp-bg);
color: var(--hp-text);
font-family: var(--hp-font-body);
font-size: 16px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Override GeneratePress body background + TEXT colour. GP's dynamic customizer
CSS emits `body { color:#222 }` AFTER our stylesheet, so the lower-specificity
`body` rule above loses on source order — leaving any bare/un-themed text
(e.g. the Contact category-card labels, "Prefer social…") inheriting #222,
near-invisible on the dark bg. The .hp class lifts specificity to (0,1,1) so
the token wins without !important; token-aware, so the light skin keeps its
dark ink. */
body.hp {
background-color: var(--hp-bg);
color: var(--hp-text);
/* Cancel GP's inline padding-top (added by JS for the fixed header) at all
breakpoints. Hero pages extend behind the transparent fixed nav by design;
inner pages clear the nav via margin-top on .hp-page-header instead. */
padding-top: 0 !important;
}
::selection {
background: var(--hp-gold);
color: var(--hp-on-accent);
}
/* ==========================================================================
Headings
========================================================================== */
h1, h2, h3, h4, h5, h6 {
font-family: var(--hp-font-display);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--hp-text);
margin-top: 0;
}
h1 { font-size: var(--hp-text-4xl); }
h2 { font-size: var(--hp-text-3xl); }
h3 { font-size: var(--hp-text-2xl); }
h4 { font-size: var(--hp-text-xl); }
/* ==========================================================================
Links
========================================================================== */
a {
color: var(--hp-gold);
text-decoration: none;
transition: color var(--hp-dur) var(--hp-ease);
}
a:hover,
a:focus-visible {
color: var(--hp-gold-light);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--hp-gold);
outline-offset: 2px;
}
/* ==========================================================================
GeneratePress layout overrides
========================================================================== */
/* Kill the GeneratePress sidebar everywhere */
.hp .sidebar-container { display: none !important; }
.hp .content-area { width: 100% !important; max-width: 100% !important; }
/* GeneratePress makes #content (.site-content) a flex row; .site-main is a
flex item with no grow, so it SHRINKS to its content width and pins left —
the "left-justified" bug (hero pages got a dark side-band; text pages like
shows/content/portfolio/merch collapsed to ~430-603px on the left). Force
.site-main to fill the row on every .hp page: full-bleed surfaces
(.hp-hero, .hp-page-header) then span edge-to-edge and inner
.hp-section / .hp-container re-center content to --hp-content-max. */
.hp .site-main { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; }
/* GeneratePress 'separate-containers' wraps single posts/products in a WHITE
.inside-article card. The dark-luxury theme renders on the dark body, so the
product (and blog post) ended up sitting on a giant white block. Strip the
card chrome — the element still provides the centered content column. */
.hp .inside-article {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
/* Fallback container for GeneratePress-rendered singular content that has no
theme-supplied container: single blog posts and Default-template pages render
.site-main > article > .inside-article > .entry-content with no .hp-container.
With .site-main now full-width (+ the global full-width-content body class),
that prose would run edge-to-edge flush to both screen edges. Constrain it to
the standard content width + gutter. Single-product / shop self-center via
.hp-container (woocommerce_before_main_content), and the theme's custom
page-*.php templates supply their own .hp-section/.hp-container, so neither
matches these compound body-class selectors. */
.hp.single-post .inside-article,
.hp.page-template-default .inside-article {
max-width: var(--hp-content-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--hp-content-pad);
padding-right: var(--hp-content-pad);
}
/* Footer bar — the "Powered by" attribution link stays subtle, gold on hover. */
.hp .hp-footer__bar a {
color: var(--hp-text-muted);
text-decoration: none;
transition: color var(--hp-dur) var(--hp-ease);
}
.hp .hp-footer__bar a:hover {
color: var(--hp-gold);
}
/* Comment / review forms (blog comments + WooCommerce product reviews) — the
WC/GP defaults render light inputs on the dark page. Theme them on-brand. */
.hp .comment-form input[type="text"],
.hp .comment-form input[type="email"],
.hp .comment-form input[type="url"],
.hp .comment-form textarea {
width: 100%;
background: var(--hp-bg);
border: 1px solid var(--hp-border);
color: var(--hp-text);
border-radius: var(--hp-r-sm);
padding: 0.75rem 1rem;
font-family: var(--hp-font-body);
}
.hp .comment-form input:focus,
.hp .comment-form textarea:focus {
border-color: var(--hp-border-strong);
box-shadow: 0 0 0 3px var(--hp-gold-muted);
outline: none;
}
.hp .comment-form label {
color: var(--hp-text-muted);
font-size: var(--hp-text-sm);
}
.hp .comment-form input[type="submit"] {
background: var(--hp-gold);
color: var(--hp-bg);
border: none;
border-radius: var(--hp-r-sm);
font-weight: 600;
letter-spacing: 0.04em;
padding: 0.75rem 1.5rem;
cursor: pointer;
transition: background var(--hp-dur) var(--hp-ease);
}
.hp .comment-form input[type="submit"]:hover {
background: var(--hp-gold-light);
}
/* Remove default GP page title on pages that supply their own hero */
.hp-has-hero .entry-header,
.hp-has-hero .page-header { display: none !important; }
/* GP navigation — transparent over hero, never white */
.hp .site-header,
.hp #masthead,
.hp .site-header .inside-header {
background-color: transparent !important;
background: transparent !important;
}
.hp .site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
height: var(--hp-header-h);
background: transparent;
transition: background var(--hp-dur) var(--hp-ease), box-shadow var(--hp-dur) var(--hp-ease);
}
.hp .site-header.hp-scrolled {
background: var(--hp-header-scrolled-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 1px 0 var(--hp-border);
}
.hp .site-header .site-description {
color: var(--hp-text);
}
/* Brand wordmark — GP renders the site title (filtered to the creator name) as
.main-title > a. Style it as the gold serif wordmark to match the age gate. */
.hp .main-title {
margin: 0;
line-height: 1;
}
.hp .site-header .main-title a,
.hp .site-header .site-title a {
font-family: var(--hp-font-display);
font-size: var(--hp-text-2xl);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--hp-gold) !important;
text-shadow: var(--hp-nav-photo-shadow);
}
.hp .site-header .main-title a:hover,
.hp .site-header .site-title a:hover {
color: var(--hp-gold-light) !important;
}
/* Navigation — transparent bar with light links. GeneratePress paints
.main-navigation white and colours links #222 via dynamic CSS whose
selectors out-specify a plain .hp .main-navigation a; override with
matching specificity + !important so the bar reads dark-luxury, not GP. */
.hp .main-navigation,
.hp .main-navigation .inside-navigation,
.hp .main-navigation .main-nav > ul {
background-color: transparent !important;
}
.hp .main-navigation .main-nav ul li a,
.hp .main-navigation a,
.hp .menu-toggle {
color: var(--hp-text) !important;
background-color: transparent !important;
font-family: var(--hp-font-body);
font-size: var(--hp-text-sm);
font-weight: 500;
letter-spacing: 0.04em;
text-shadow: var(--hp-nav-photo-shadow);
transition: color var(--hp-dur) var(--hp-ease);
}
.hp .main-navigation .main-nav ul li a:hover,
.hp .main-navigation .main-nav ul li.current-menu-item > a,
.hp .main-navigation .main-nav ul li[class*="current-menu"] > a {
color: var(--hp-gold) !important;
}
/* Dropdown sub-menus — dark panel with luxury polish. */
.hp .main-navigation .main-nav ul ul {
background-color: var(--hp-bg-raised) !important;
border: 1px solid var(--hp-border);
border-radius: var(--hp-r-sm);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
min-width: 190px;
padding: var(--hp-sp-2) 0;
overflow: hidden;
}
/* Tighter, more premium link padding inside dropdowns. */
.hp .main-navigation .main-nav ul ul li a {
padding-top: 0.55em !important;
padding-bottom: 0.55em !important;
font-size: 0.78rem !important;
letter-spacing: 0.06em !important;
text-transform: uppercase;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.hp .main-navigation .main-nav ul ul li:last-child a {
border-bottom: none;
}
/* Hover state for dropdown items — gold text + faint highlight band. */
.hp .main-navigation .main-nav ul ul li a:hover {
background-color: rgba(255, 255, 255, 0.04) !important;
color: var(--hp-gold) !important;
}
/* Caret/arrow colour for parent items — match nav text, gold on hover. */
.hp .main-navigation .main-nav ul li.menu-item-has-children .dropdown-menu-toggle {
color: inherit;
opacity: 0.6;
transition: opacity var(--hp-dur) var(--hp-ease);
}
.hp .main-navigation .main-nav ul li.menu-item-has-children:hover .dropdown-menu-toggle,
.hp .main-navigation .main-nav ul li.menu-item-has-children.sfHover .dropdown-menu-toggle {
opacity: 1;
color: var(--hp-gold);
}
/* Subscribe CTA in the nav (menu item carries .hp-nav-cta). Uses the same 4px
radius (--hp-r-sm) as every .hp-btn so the button language is uniform across
the whole site; the mobile nav-cta already uses --hp-r-sm. */
.hp .main-navigation .main-nav ul li.hp-nav-cta a {
color: var(--hp-on-accent) !important;
background-color: var(--hp-gold) !important;
border-radius: var(--hp-r-sm);
padding-left: var(--hp-sp-5) !important;
padding-right: var(--hp-sp-5) !important;
font-weight: 600;
}
.hp .main-navigation .main-nav ul li.hp-nav-cta a:hover {
color: var(--hp-on-accent) !important;
background-color: var(--hp-gold-light) !important;
}
/* Nav focus indicator. The global a:focus-visible draws a 2px gold outline at
+2px offset; on a full-header-height (60px) nav link that reads as a tall
floating "block" (most visible on right-click, which triggers :focus-visible).
Regular nav links → a clean gold underline under the text (keyboard-accessible,
non-color-only) instead of the box. */
.hp .main-navigation .main-nav ul li a:focus-visible {
outline: none;
text-decoration: underline;
text-decoration-color: var(--hp-gold);
text-decoration-thickness: 2px;
text-underline-offset: 6px;
}
/* The gold-fill Subscribe CTA can't show a gold ring (gold-on-gold = invisible);
give it a contrasting inset ring that hugs the button instead. */
.hp .main-navigation .main-nav ul li.hp-nav-cta a:focus-visible {
outline: 2px solid var(--hp-on-accent);
outline-offset: -4px;
text-decoration: none;
}
/* The photo halo is only for legibility over the hero photo — drop it on the
solid-fill CTA pill and once the header is scrolled onto a solid bar. */
.hp .main-navigation .main-nav ul li.hp-nav-cta a,
.hp .main-navigation .main-nav ul li.hp-nav-live a,
.hp .site-header.hp-scrolled .main-navigation a,
.hp .site-header.hp-scrolled .menu-toggle,
.hp .site-header.hp-scrolled .main-title a {
text-shadow: none;
}
/* Live Now nav pill — pulsing red dot + label */
@keyframes hp-live-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
60% { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); }
}
.hp .main-navigation .main-nav ul li.hp-nav-live a {
display: inline-flex !important;
align-items: center;
gap: 6px;
color: #fff !important;
background-color: #dc2626 !important;
border-radius: var(--hp-r-sm);
padding-left: var(--hp-sp-4) !important;
padding-right: var(--hp-sp-5) !important;
font-weight: 600;
letter-spacing: 0.04em;
}
.hp .main-navigation .main-nav ul li.hp-nav-live a:hover {
background-color: #b91c1c !important;
color: #fff !important;
}
.hp-nav-live__dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: #fff;
flex-shrink: 0;
animation: hp-live-pulse 1.6s ease-in-out infinite;
}
.hp .main-navigation .main-nav ul li.hp-nav-live a:focus-visible {
outline: 2px solid #fff;
outline-offset: -4px;
text-decoration: none;
}
/* GP site header inner */
.hp .inside-header {
max-width: var(--hp-content-max);
margin: 0 auto;
padding: 0 var(--hp-content-pad);
height: var(--hp-header-h);
display: flex;
align-items: center;
justify-content: space-between;
}
/* Remove GP default padding on content */
.hp .site-content .content-area {
padding: 0;
}
.hp .entry-content > *:last-child {
margin-bottom: 0;
}
/* ==========================================================================
Layout utilities
========================================================================== */
.hp-container {
max-width: var(--hp-content-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--hp-content-pad);
padding-right: var(--hp-content-pad);
}
.hp-section {
padding-top: var(--hp-sp-20);
padding-bottom: var(--hp-sp-20);
}
.hp-section--tight {
padding-top: var(--hp-sp-12);
padding-bottom: var(--hp-sp-12);
}
.hp-section--flush {
padding-top: 0;
padding-bottom: 0;
}
/* ==========================================================================
Section head (eyebrow + title + view-all)
========================================================================== */
.hp-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--hp-sp-4);
margin-bottom: var(--hp-sp-8);
}
.hp-eyebrow {
display: block;
font-family: var(--hp-font-body);
font-size: var(--hp-text-xs);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--hp-gold);
margin-bottom: var(--hp-sp-2);
}
.hp-section-head h2 {
margin-bottom: 0;
}
.hp-viewall {
flex-shrink: 0;
font-size: var(--hp-text-sm);
font-weight: 500;
color: var(--hp-gold);
display: inline-flex;
align-items: center;
gap: var(--hp-sp-1);
white-space: nowrap;
padding-bottom: 1px;
border-bottom: 1px solid transparent;
transition: border-color var(--hp-dur) var(--hp-ease);
}
.hp-viewall:hover {
border-bottom-color: var(--hp-gold);
color: var(--hp-gold);
}
/* ==========================================================================
Rule divider
========================================================================== */
.hp-rule {
border: none;
border-top: 1px solid var(--hp-border);
margin: 0;
}
/* ==========================================================================
Page header (compact — used on inner pages)
========================================================================== */
.hp-page-header {
background: var(--hp-bg-surface);
border-bottom: 1px solid var(--hp-border);
padding: var(--hp-sp-12) 0 var(--hp-sp-10);
margin-top: var(--hp-header-h);
}
.hp-page-header__eyebrow {
display: block;
font-family: var(--hp-font-body);
font-size: var(--hp-text-xs);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--hp-gold);
margin-bottom: var(--hp-sp-3);
}
.hp-page-header__title {
font-size: var(--hp-text-4xl);
margin-bottom: var(--hp-sp-2);
}
.hp-page-header__subtitle {
font-size: var(--hp-text-lg);
color: var(--hp-text-muted);
margin-bottom: 0;
font-family: var(--hp-font-display);
font-style: italic;
}
/* Centered interior header (canonical Lovable PageHeader: cart/checkout/contact/…) */
.hp-page-header--center {
text-align: center;
}
.hp-page-header--center .hp-page-header__subtitle {
max-width: 36rem;
margin-left: auto;
margin-right: auto;
}
/* ── Legal pages (mirrors Lovable LegalLayout: surface header + max-w-3xl prose) ── */
.hp-legal-shell {
max-width: var(--hp-content-max); /* match every other page's frame width */
margin-left: auto;
margin-right: auto;
padding-left: var(--hp-content-pad);
padding-right: var(--hp-content-pad);
}
.hp-legal-page-header {
background: var(--hp-bg-surface);
border-bottom: 1px solid var(--hp-border);
padding: var(--hp-sp-12) 0 var(--hp-sp-10);
margin-top: var(--hp-header-h);
}
.hp-legal-page-header__title {
font-size: var(--hp-text-4xl);
margin-bottom: var(--hp-sp-3);
}
.hp-legal-page-header__date {
font-size: var(--hp-text-xs);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--hp-text-muted);
margin: 0;
}
/* Legal body — prose */
.hp-legal-content {
color: var(--hp-text);
line-height: 1.75;
font-size: var(--hp-text-base);
/* Frame now matches every other page (shell = content-max); keep the prose at
a comfortable reading measure so long legal copy stays legible. */
max-width: 60rem;
}
.hp-legal-content > * {
margin-top: 0;
margin-bottom: var(--hp-sp-6);
}
.hp-legal-content > *:last-child {
margin-bottom: 0;
}
.hp-legal-content h2,
.hp-legal-content h3,
.hp-legal-content h4 {
font-family: var(--hp-font-display);
color: var(--hp-text);
line-height: 1.2;
margin-top: var(--hp-sp-10);
margin-bottom: var(--hp-sp-4);
}
.hp-legal-content h2 { font-size: var(--hp-text-2xl); }
.hp-legal-content h3 { font-size: var(--hp-text-xl); }
.hp-legal-content h4 { font-size: var(--hp-text-lg); }
.hp-legal-content a {
color: var(--hp-gold);
text-decoration: underline;
text-underline-offset: 2px;
}
.hp-legal-content a:hover {
color: var(--hp-gold-light);
}
.hp-legal-content ul,
.hp-legal-content ol {
padding-left: 1.5rem;
margin-bottom: var(--hp-sp-6);
}
.hp-legal-content li {
margin-bottom: var(--hp-sp-2);
}
.hp-legal-content strong {
color: var(--hp-text);
font-weight: 600;
}
.hp-legal-content hr {
border: none;
border-top: 1px solid var(--hp-border);
margin: var(--hp-sp-8) 0;
}
/* Legal nav footer (border-top only, no surface tint) */
.hp-legal-nav {
border-top: 1px solid var(--hp-border);
padding: var(--hp-sp-8) 0;
}
.hp-legal-nav__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--hp-sp-2) var(--hp-sp-8);
}
.hp-legal-nav__list a {
font-size: var(--hp-text-xs);
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--hp-text-muted);
transition: color var(--hp-dur) var(--hp-ease);
}
.hp-legal-nav__list a:hover,
.hp-legal-nav__list a[aria-current="page"] {
color: var(--hp-gold);
}
/* ==========================================================================
Footer
========================================================================== */
.hp-footer {
background: var(--hp-bg);
border-top: 1px solid var(--hp-border);
padding: var(--hp-sp-20) 0 var(--hp-sp-10);
}
/* 4-col grid: brand wide, three nav cols equal */
.hp-footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--hp-sp-12);
margin-bottom: var(--hp-sp-16);
}
/* Brand column */
.hp-footer__brand-name {
font-family: var(--hp-font-display);
font-size: var(--hp-text-2xl);
font-weight: 600;
color: var(--hp-gold);
margin-bottom: var(--hp-sp-3);
}
.hp-footer__tagline {
font-size: var(--hp-text-sm);
color: var(--hp-text-muted);
line-height: 1.65;
margin-bottom: var(--hp-sp-8);
max-width: 28ch;
}
/* Social icons — flat, slightly larger, spaced */
.hp-footer__socials {
display: flex;
align-items: center;
gap: var(--hp-sp-5);
}
.hp-footer__social-link {
display: flex;
align-items: center;
justify-content: center;
color: var(--hp-text-muted);
transition: color var(--hp-dur) var(--hp-ease);
}
.hp-footer__social-link:hover {
color: var(--hp-gold);
}
/* Nav column headings */
.hp-footer__heading {
font-family: var(--hp-font-body);
font-size: var(--hp-text-xs);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hp-text);
margin-bottom: var(--hp-sp-5);
}
/* Nav link lists */
.hp-footer__links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--hp-sp-4);
}
.hp-footer__links a {
font-size: var(--hp-text-sm);
color: var(--hp-text-muted);
text-decoration: none;
transition: color var(--hp-dur) var(--hp-ease);
}
.hp-footer__links a:hover {
color: var(--hp-text);
}
/* Bottom bar — 3 zones: copyright · legal shortcuts · powered by */
.hp-footer__bar {
border-top: 1px solid var(--hp-border);
padding-top: var(--hp-sp-6);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--hp-sp-6);
font-size: var(--hp-text-xs);
color: var(--hp-text-subtle);
}
.hp-footer__bar-copy {
white-space: nowrap;
}
/* Inline legal shortcut links in the bar */
.hp-footer__bar-legal {
display: flex;
align-items: center;
gap: var(--hp-sp-4);
}
.hp-footer__bar-legal a {
color: var(--hp-text-subtle);
text-decoration: none;
white-space: nowrap;
transition: color var(--hp-dur) var(--hp-ease);
}
.hp-footer__bar-legal a:hover {
color: var(--hp-text-muted);
}
.hp-footer__powered {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
flex-shrink: 0;
}
.hp-ah-logo {
display: block;
height: auto;
opacity: 0.55;
transition: opacity 0.2s;
vertical-align: middle;
}
.hp-ah-logo:hover,
a:hover .hp-ah-logo {
opacity: 0.85;
}
/* ==========================================================================
Forms
========================================================================== */
.hp-field {
display: flex;
flex-direction: column;
gap: var(--hp-sp-2);
}
.hp-field__label {
font-size: var(--hp-text-sm);
font-weight: 500;
color: var(--hp-text-muted);
letter-spacing: 0.02em;
}
.hp-field input,
.hp-field select,
.hp-field textarea {
background: var(--hp-bg);
border: 1px solid var(--hp-border);
border-radius: var(--hp-r-sm);
color: var(--hp-text);
font-family: var(--hp-font-body);
font-size: var(--hp-text-base);
padding: 0.75rem 1rem;
width: 100%;
transition: border-color var(--hp-dur) var(--hp-ease);
-webkit-appearance: none;
appearance: none;
}
.hp-field input:focus,
.hp-field select:focus,
.hp-field textarea:focus {
outline: none;
border-color: var(--hp-border-strong);
box-shadow: 0 0 0 3px var(--hp-gold-muted);
}
.hp-field textarea {
resize: vertical;
min-height: 140px;
}
/* ── Generic native form controls (site-wide) ──────────────────────────────
Fallback dark-field treatment for ANY native text input / textarea that is
NOT wrapped in a themed container (e.g. the Contact / Custom Requests .hp-field
inputs, plus any plain WP form in the main content column). GeneratePress
ships dynamic customizer CSS that paints native inputs white on a light
background; it loads after the theme stylesheets, so the .hp-field rule above
(no !important) lost on source order and those forms rendered white. Restate
the treatment with !important so it wins, matching the WooCommerce checkout
fields exactly (same bg/border/text/radius/focus) for visual consistency.
Scoped under `.hp .site-main` (the front-end content column) on purpose:
• the admin toolbar (#wpadminbar) lives OUTSIDE .site-main, so its search
field is structurally never matched — no admin-bar regression;
• the already-styled Woo fields ALSO sit inside .site-main but their own
selectors are more specific (e.g. `.woocommerce form .form-row input.input-text`
and the my-account `.woocommerce-Input.input-text` rules), so the working
checkout/my-account fields are not overridden destructively — they keep
their existing (identical-valued) treatment.
⚠️ ALSO scoped to a `form` ancestor — deliberately, and DO NOT remove it.
This rule sets `width:100%` + `!important` padding, so a bare
`.hp .site-main select` would hijack ANY native control dropped into page
content, including standalone UI like the Content page's .hp-sort-select
(it once stretched that to 935px and broke its height). Genuine data-entry
fields always live inside a