. The SINGLE PRODUCT template does * not -- there the class exists only on . * * So `html body .woocommerce X` (descendant) silently matches NOTHING on a * PDP, because is not a descendant of itself. Nine rule blocks here * were written that way and were dead on every product page; the gallery * collapsed to 48% of its grid column as a result, since woocommerce-layout's * own `div.images { width: 48% }` had nothing competing with it. * * Every such rule therefore carries BOTH forms, same specificity: * html body .woocommerce X, <- wrapper div (cart, checkout, archives) * html body.woocommerce X <- class on body (single product) * * Add the companion whenever you add one of these. Verify with * document.querySelectorAll(sel).length in a browser, not by reading. * * This file styles the theme's OWN markup -- header, footer, page chrome, * card, archive layout. The 17 files in mu-plugins/erg-assets/ still load and * still carry the detailed PLP/PDP/cart styling; roughly 332 of their lines * are anchored to .elementor-element-{id} selectors and are being re-pointed * at the semantic classes below, file by file. Until that is done, expect the * new markup to be styled by THIS file and the old selectors to sit inert. */ :root { --erg-ink: #080c11; --erg-panel: #13181f; --erg-panel-2: #181d23; --erg-panel-light: #1c2330; --erg-border: rgba(255, 255, 255, .12); --erg-border-soft: rgba(255, 255, 255, .07); --erg-text: #f2f4f6; --erg-muted: rgba(242, 244, 246, .82); --erg-text-dim: #bdc3cc; --erg-gold: #c8a84b; --erg-gold-hi: #d4b65c; --erg-on-gold: #11151a; --erg-teal: #3e7a8d; --erg-teal-lt: #72b6c6; --erg-green: #5cb87a; --erg-red: #cc4444; --erg-blue: #5577aa; --erg-head: 'Oswald', 'Oswald Fallback', Arial, sans-serif; --erg-body: 'Montserrat', 'Montserrat Fallback', Arial, sans-serif; --erg-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, Menlo, monospace; /* Refresh refinements, approved 2026-09-22 (PLAN §22.1). --erg-bone is for display headings only; body text stays --erg-text. The contour is the one new brand element: gold lines at ~15%, behind the hero, The Case and the capture boxes. Inline SVG, no request. */ --erg-bone: #ece6d8; --erg-contour: url("data:image/svg+xml;utf8,"); --erg-radius: 12px; --erg-radius-lg: 18px; --erg-wrap: 1140px; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--erg-ink); color: var(--erg-text); font-family: var(--erg-body); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5 { font-family: var(--erg-head); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; } a { color: var(--erg-teal-lt); } a:hover { color: #9bced9; } img { max-width: 100%; height: auto; } :focus-visible { outline: 2px solid var(--erg-gold); outline-offset: 2px; } .erg-wrap { max-width: var(--erg-wrap); margin-inline: auto; padding-inline: 20px; } .erg-main { display: block; min-height: 40vh; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .erg-skip:focus { position: fixed; top: 8px; left: 8px; z-index: 9999; width: auto; height: auto; clip: auto; background: var(--erg-gold); color: var(--erg-on-gold); padding: 10px 16px; border-radius: 8px; } /* ---------- utility bar ---------- */ .erg-util { background: #05080c; border-bottom: 1px solid var(--erg-border-soft); font-size: 11.5px; color: var(--erg-text-dim); } .erg-util .erg-wrap { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-block: 7px; } .erg-util p { margin: 0; display: flex; align-items: center; gap: 7px; } .erg-util .erg-ico { color: var(--erg-gold); } /* ---------- header ---------- */ .erg-header { background: var(--erg-ink); border-bottom: 1px solid var(--erg-border); position: sticky; top: 0; z-index: 50; } .erg-header__row { display: flex; align-items: center; gap: 18px; padding-block: 13px; } .erg-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--erg-text); flex: none; } .erg-logo__mark { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(145deg, var(--erg-gold), #a8862f); color: var(--erg-on-gold); font-family: var(--erg-head); font-weight: 700; font-size: 13px; } .erg-logo__name { font-family: var(--erg-head); font-weight: 600; font-size: 16px; letter-spacing: .11em; text-transform: uppercase; line-height: 1.05; } .erg-logo__name small { display: block; font-size: 8.5px; letter-spacing: .24em; color: var(--erg-gold); font-weight: 400; } .erg-nav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .erg-nav__list a { font-family: var(--erg-head); font-size: 12.5px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--erg-muted); text-decoration: none; padding: 8px 11px; border-radius: 6px; display: inline-block; transition: .14s; } .erg-nav__list a:hover { color: var(--erg-text); background: rgba(255, 255, 255, .055); } .erg-nav__list .current-menu-item > a { color: var(--erg-gold); } .erg-header__tools { margin-left: auto; display: flex; align-items: center; gap: 9px; } .erg-header__search, .erg-plp-search { display: flex; align-items: center; gap: 8px; background: var(--erg-panel-2); border: 1px solid var(--erg-border); border-radius: 8px; padding: 6px 11px; color: var(--erg-text-dim); } .erg-header__search input, .erg-plp-search input { background: none; border: 0; color: var(--erg-text); font: inherit; font-size: 12.5px; min-width: 0; width: 170px; padding: 2px 0; } .erg-header__search input::placeholder, .erg-plp-search input::placeholder { color: var(--erg-text-dim); } .erg-plp-search { width: 100%; } .erg-plp-search input { width: 100%; } .erg-iconbtn { width: 35px; height: 35px; border-radius: 8px; border: 1px solid var(--erg-border); background: var(--erg-panel-2); display: grid; place-items: center; color: var(--erg-muted); position: relative; flex: none; text-decoration: none; } .erg-iconbtn:hover { color: var(--erg-text); border-color: rgba(255, 255, 255, .3); } .erg-cartbtn__count { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--erg-gold); color: var(--erg-on-gold); font-size: 9.5px; font-weight: 600; display: grid; place-items: center; } .erg-header__toggle { display: none; background: var(--erg-panel-2); border: 1px solid var(--erg-border); color: var(--erg-text); border-radius: 8px; width: 38px; height: 38px; place-items: center; cursor: pointer; } .erg-drawer { border-top: 1px solid var(--erg-border); background: var(--erg-panel); padding-block: 10px; } .erg-drawer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .erg-drawer__list a { display: block; padding: 11px 6px; color: var(--erg-muted); text-decoration: none; font-family: var(--erg-head); letter-spacing: .08em; text-transform: uppercase; font-size: 13px; border-bottom: 1px solid var(--erg-border-soft); } /* ---------- buttons ---------- */ .erg-btn, .erg-card__actions .button, .woocommerce .button { font-family: var(--erg-head); font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; padding: 11px 19px; border-radius: 9px; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; } .erg-btn--gold, .erg-card__actions .button, .woocommerce .button.alt { background: var(--erg-gold); color: var(--erg-on-gold); } .erg-btn--gold:hover, .erg-card__actions .button:hover { background: var(--erg-gold-hi); color: var(--erg-on-gold); } .erg-btn--ghost { background: transparent; color: var(--erg-text); border-color: var(--erg-border); } /* ---------- page chrome ---------- */ .erg-page, .erg-single { padding-block: 30px 48px; } .erg-page__head h1, .erg-single__head h1 { font-size: clamp(23px, 3.4vw, 33px); } .erg-single__body { max-width: 72ch; } .erg-single__body p { color: var(--erg-muted); } .erg-bc { font-size: 11.5px; color: var(--erg-text-dim); padding-block: 14px 0; } .erg-bc a { color: var(--erg-text-dim); text-decoration: none; } .erg-bc__sep { padding-inline: 6px; opacity: .55; } .erg-404 { text-align: center; max-width: 52ch; } .erg-404__search { display: flex; gap: 9px; justify-content: center; margin-block: 18px; flex-wrap: wrap; } .erg-404__search input { background: var(--erg-panel-2); border: 1px solid var(--erg-border); border-radius: 9px; padding: 11px 14px; color: var(--erg-text); font: inherit; } .erg-empty { padding-block: 40px; text-align: center; } .erg-empty p { color: var(--erg-muted); max-width: 46ch; margin-inline: auto; } /* ---------- archive layout ---------- */ .erg-plp-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; padding-block: 20px 48px; align-items: start; } .erg-plp-layout__sidebar { display: grid; gap: 12px; position: sticky; top: 90px; } .erg-plp-filters { border: 1px solid var(--erg-border); border-radius: var(--erg-radius); background: var(--erg-panel-2); padding: 12px; } .erg-shop-single { padding-block: 10px 48px; } /* ---------- product card ---------- */ ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; } .erg-plp-layout__main ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } .erg-plp-card.erg-card { background: var(--erg-panel-2); border: 1px solid var(--erg-border); border-radius: var(--erg-radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s; } .erg-plp-card.erg-card:hover { border-color: rgba(200, 168, 75, .4); } .erg-card__thumb { display: grid; place-items: center; position: relative; aspect-ratio: 4 / 3; max-width: 100%; background: linear-gradient(160deg, #1e252e, #141a21); border-bottom: 1px solid var(--erg-border-soft); padding: 10px; } .erg-card__thumb img { max-height: 100%; width: auto; object-fit: contain; } .erg-card__sale-badge, .erg-card__flag { position: absolute; top: 8px; font-family: var(--erg-head); font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; } .erg-card__sale-badge { right: 8px; background: var(--erg-green); color: #08130c; } .erg-card__flag--local { left: 8px; background: var(--erg-green); color: #08130c; } .erg-card__body { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .erg-card__brand { margin: 0; font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--erg-blue); } .erg-card__title { font-family: var(--erg-body); font-size: 13px; font-weight: 600; line-height: 1.36; margin: 0; } .erg-card__title a { color: var(--erg-text); text-decoration: none; } .erg-card__meta { margin: 0; font-size: 10.5px; color: var(--erg-text-dim); line-height: 1.5; } .erg-card__priceval { margin: auto 0 0; font-family: var(--erg-head); font-size: 18px; font-weight: 600; color: var(--erg-text); font-variant-numeric: tabular-nums; } .erg-card__priceval del { color: var(--erg-text-dim); font-size: .7em; font-weight: 400; margin-right: 6px; } .erg-card__priceval ins { text-decoration: none; } .erg-card__actions { display: grid; } .erg-card__actions .button { width: 100%; } /* ---------- posts ---------- */ .erg-postgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .erg-postcard { background: var(--erg-panel-2); border: 1px solid var(--erg-border); border-radius: var(--erg-radius); overflow: hidden; display: flex; flex-direction: column; } .erg-postcard__body { padding: 14px; display: grid; gap: 7px; } .erg-postcard__title { font-size: 15px; margin: 0; } .erg-postcard__title a { color: var(--erg-text); text-decoration: none; } .erg-postcard__excerpt { margin: 0; font-size: 13px; color: var(--erg-muted); } .erg-postcard__more { font-family: var(--erg-head); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--erg-gold); text-decoration: none; } /* ---------- footer ---------- */ .erg-footer { background: #05080c; border-top: 1px solid var(--erg-border); font-size: 12.5px; color: var(--erg-text-dim); margin-top: 40px; } .erg-footer__cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px; padding-block: 28px; } .erg-footer__brand p { max-width: 36ch; margin: 11px 0 0; line-height: 1.6; } .erg-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .erg-footer__list a { color: var(--erg-text-dim); text-decoration: none; } .erg-footer__list a:hover { color: var(--erg-text); } .erg-footer__legal { border-top: 1px solid var(--erg-border-soft); padding-block: 14px; font-size: 11px; } .erg-footer__legal p { margin: 0 0 4px; } /* ---------- responsive ---------- */ @media (max-width: 1220px) { .erg-nav { display: none; } .erg-header__toggle { display: grid; } .erg-header__row { gap: 12px; } } @media (min-width: 1221px) { .erg-drawer { display: none; } } @media (max-width: 980px) { .erg-plp-layout { grid-template-columns: 1fr; } .erg-plp-layout__sidebar { position: static; } .erg-postgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .erg-footer__cols { grid-template-columns: 1fr; } } @media (max-width: 560px) { .erg-postgrid { grid-template-columns: 1fr; } .erg-header__search { display: none; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ========================================================================== Header nav dropdowns. Added 2026-09-20 after the first staging render: the Header v3 menu is 7 top-level items with 31 children, and with no .sub-menu rules every child rendered inline as a bullet list that filled the viewport. ========================================================================== */ .erg-logo__img { display: block; width: 150px; height: auto; } .erg-nav { align-self: stretch; } .erg-nav__list { align-items: stretch; } .erg-nav__list > li { position: relative; display: flex; align-items: center; } /* Parent items get a caret. */ .erg-nav__list > li.menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .6; } .erg-nav__list .sub-menu { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 232px; margin: 0; padding: 7px; list-style: none; background: var(--erg-panel-light); border: 1px solid var(--erg-border); border-radius: var(--erg-radius); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .75); opacity: 0; visibility: hidden; transform: translateY(-5px); transition: opacity .13s ease, transform .13s ease, visibility .13s; } .erg-nav__list > li:hover > .sub-menu, .erg-nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .erg-nav__list .sub-menu a { display: block; padding: 8px 11px; border-radius: 7px; font-family: var(--erg-body); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--erg-muted); white-space: nowrap; } .erg-nav__list .sub-menu a:hover { background: rgba(255, 255, 255, .06); color: var(--erg-text); } /* Keep the last dropdowns on screen. */ .erg-nav__list > li:nth-last-child(-n+2) .sub-menu { left: auto; right: 0; } /* Drawer: children stay visible, indented. No hover on touch. */ .erg-drawer__list .sub-menu { list-style: none; margin: 0; padding: 0 0 0 14px; } .erg-drawer__list .sub-menu a { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--erg-text-dim); padding: 9px 6px; } /* ========================================================================== WooCommerce default-CSS overrides. woocommerce.css lays the loop out with floats and percentage widths: .woocommerce ul.products li.product { float:left; width:30.75%; margin-right:3.8% } Inside a grid container that percentage resolves against the TRACK, not the row, so every card collapsed to about 77px wide and text wrapped one character per line. Found on the first styled staging render. Specificity has to beat `.woocommerce ul.products li.product`. ========================================================================== */ .woocommerce ul.products, .woocommerce-page ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin: 0; padding: 0; list-style: none; } .erg-plp-layout__main .woocommerce ul.products, .erg-plp-layout__main ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } .woocommerce ul.products::before, .woocommerce ul.products::after { content: none; display: none; } /* woocommerce-smallscreen.css (media="max-width: 768px") re-collapses the loop below 768px with a HIGHER-specificity selector than the desktop rule above: .woocommerce ul.products[class*=columns-] li.product { width:48%; float:left; clear:both } The attribute selector counts as a class, so that is (0,4,2) against our (0,3,2) and it wins. On the PDP's related-products grid this squeezed every card to 35px and pushed the page into horizontal scroll. Match its shape to beat it -- do not reach for !important. */ .woocommerce ul.products[class*="columns-"] li.product, .woocommerce-page ul.products[class*="columns-"] li.product { width: auto; max-width: 100%; min-width: 0; float: none; clear: none; margin: 0; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, ul.products li.product { width: auto; max-width: 100%; min-width: 0; float: none; clear: none; margin: 0; padding: 0; text-align: left; } /* Woo also styles the loop title/price; ours are already scoped. */ .woocommerce ul.products li.product .erg-card__title { font-size: 13px; margin: 0; padding: 0; } .woocommerce ul.products li.product .erg-card__priceval { font-size: 18px; color: var(--erg-text); } .woocommerce ul.products li.product a img { margin: 0; box-shadow: none; } /* Result count + ordering row */ .woocommerce-result-count { font-size: 12.5px; color: var(--erg-text-dim); margin: 0; } .woocommerce-ordering select, .erg-plp-layout__main select { background: var(--erg-panel-2); color: var(--erg-text); border: 1px solid var(--erg-border); border-radius: 8px; padding: 8px 11px; font: inherit; font-size: 12.5px; } .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { float: none; } .erg-plp-layout__main > .woocommerce-notices-wrapper + p, .term-description { color: var(--erg-muted); font-size: 13.5px; max-width: 70ch; } /* ---------- BeRocket sidebar, scoped down ---------- */ .erg-plp-filters .berocket_single_filter_widget { margin: 0 0 14px; } .erg-plp-filters .bapf_sfilter > .bapf_head, .erg-plp-filters .bapf_header, .erg-plp-filters h3, .erg-plp-filters h4 { font-family: var(--erg-head); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--erg-text); margin: 0 0 8px; padding: 0; border: 0; } .erg-plp-filters select { width: 100%; background: var(--erg-panel-2); color: var(--erg-text); border: 1px solid var(--erg-border); border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 12.5px; } .erg-plp-filters ul { list-style: none; margin: 0; padding: 0; } .erg-plp-filters label { font-size: 12.5px; color: var(--erg-muted); } /* ---------- pagination ---------- */ .woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; gap: 6px; justify-content: center; margin: 26px 0 0; } .woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { min-width: 36px; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--erg-border); background: var(--erg-panel-2); color: var(--erg-muted); font-size: 13px; } .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--erg-gold); color: var(--erg-on-gold); border-color: var(--erg-gold); } /* ========================================================================== Typography, asserted. base.css (Hello's reset) sets `body { font-family: -apple-system, ... }` at specificity (0,0,1). This theme's own `body` rule ties on specificity, and a tie is decided by source order -- which is fragile here, because the ERG CSS system is enqueued by mu-plugins/erg-assets-loader.php at PRIORITY 99 and a cache layer sits in front of everything. Rather than depend on the tie resolving our way, the theme asserts typography one level up. Not !important: `html body` is (0,0,2) and beats the reset cleanly, while still losing to anything genuinely more specific that wants to override it. ========================================================================== */ html body { font-family: var(--erg-body); background: var(--erg-ink); color: var(--erg-text); } html body h1, html body h2, html body h3, html body h4, html body h5, html body h6, html body .erg-logo__name, html body .erg-nav__list a, html body .erg-btn, html body .woocommerce ul.products li.product .woocommerce-loop-product__title, html body.woocommerce ul.products li.product .woocommerce-loop-product__title, html body .erg-card__priceval, html body h1.product_title{ font-family: var(--erg-head); } /* Body copy that lives inside Woo templates. */ html body .erg-card__title, html body .woocommerce-product-details__short-description, html body .woocommerce-Tabs-panel, html body p, html body li, html body label, html body input, html body select, html body textarea, html body button { font-family: var(--erg-body); } /* ========================================================================== Single product page ========================================================================== */ .erg-shop-single div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: start; padding-block: 8px 30px; } .erg-shop-single div.product .woocommerce-product-gallery { width: auto; float: none; margin: 0; } .erg-shop-single div.product .summary { width: auto; float: none; margin: 0; } /* ...and the same collision on the summary column. `.erg-shop-single div.product .summary` is (0,3,1); woocommerce-layout's `.woocommerce div.product div.summary { width: 48% }` is (0,3,2) and wins, which left the whole right-hand column at 256px inside a 533px grid track. Both scope forms again -- see the note at the top of this file. */ html body .woocommerce div.product .summary, html body.woocommerce div.product .summary, html body .woocommerce div.product div.summary, html body.woocommerce div.product div.summary { width: 100%; max-width: 100%; float: none; margin: 0; } .erg-shop-single div.product .woocommerce-tabs, .erg-shop-single div.product .related, .erg-shop-single div.product .up-sells { grid-column: 1 / -1; } .erg-shop-single h1.product_title { font-size: clamp(24px, 3.2vw, 34px); margin: 0 0 10px; } .erg-shop-single .summary .price { font-family: var(--erg-head); font-size: 30px; font-weight: 600; color: var(--erg-text); font-variant-numeric: tabular-nums; margin: 0 0 14px; } .erg-shop-single .summary .price del { color: var(--erg-text-dim); font-size: .62em; font-weight: 400; margin-right: 8px; } .erg-shop-single .summary .price ins { text-decoration: none; } .erg-shop-single .stock.in-stock { color: var(--erg-green); font-size: 13px; } .erg-shop-single .stock.out-of-stock { color: var(--erg-red); font-size: 13px; } .erg-shop-single .product_meta { font-size: 12px; color: var(--erg-text-dim); border-top: 1px solid var(--erg-border-soft); padding-top: 14px; margin-top: 16px; } /* The primary CTA. Woo ships it as a themed