[hidden]{display:none!important} /* ============================================================================ SUBURBAN THUGS — theme.css Supplemental CSS keyed off design tokens. Every value below is driven by a CSS custom property derived 1:1 from design-tokens.json. WooCommerce markup is styled via .wc-scope overrides at the bottom (no !important storms). ============================================================================ */ /* ---- 1. SELF-HOSTED FONTS (MCM rehosts the woff2 on-domain) ---------------- */ /* @font-face declarations are emitted by MCM from /assets/fonts. Families: "Space Grotesk" (display/heading) and "Public Sans" (body). Fallbacks below. */ /* ---- 2. RAMPS (authored 10-step scales) ----------------------------------- */ :root { /* Primary — Voltage Indigo */ --indigo-50:#EEF0FF; --indigo-100:#E0E3FF; --indigo-200:#C4C7FF; --indigo-300:#A0A2FB; --indigo-400:#7B78F2; --indigo-500:#5E54E8; --indigo-600:#4A3FD4; --indigo-700:#3B31AE; --indigo-800:#2E2785; --indigo-900:#201B5C; /* Secondary — Slate Ink (also the tinted neutral) */ --slate-50:#F6F7FB; --slate-100:#ECEEF5; --slate-200:#DCDFEC; --slate-300:#BFC4D8; --slate-400:#8E96B0; --slate-500:#646D8A; --slate-600:#4B5472; --slate-700:#3A4258; --slate-800:#262C3D; --slate-900:#161A26; /* Accent — Reef Teal */ --teal-50:#ECFEFB; --teal-100:#CDFAF2; --teal-200:#9BF3E6; --teal-300:#5FE7D7; --teal-400:#27D0BF; --teal-500:#12B5A4; --teal-600:#0C9286; --teal-700:#11746B; --teal-800:#135C55; --teal-900:#134B46; /* Status */ --green-50:#ECFDF3; --green-500:#1FA85A; --green-600:#16924C; --green-700:#0F7A3E; --red-50:#FEF2F2; --red-500:#EF4444; --red-600:#DC2626; --red-700:#B91C1C; --amber-50:#FFFAEB; --amber-500:#F0A12B;--amber-600:#D97706;--amber-700:#B45309; --blue-50:#EFF5FF; --blue-500:#3B82F6; --blue-600:#2563EB; --blue-700:#1D4ED8; /* Commerce — Sale (orange, distinct from red) */ --orange-50:#FFF4ED; --orange-100:#FFE3CC; --orange-500:#F2761B; --orange-600:#DA5E0C; --orange-700:#C2410C; } /* ---- 3. SEMANTIC TOKENS — LIGHT (default) --------------------------------- */ :root { --bg-canvas:#FBFBFE; --bg-subtle:var(--slate-50); --surface-default:#FFFFFF; --surface-raised:#FFFFFF; --surface-sunken:var(--slate-50); --text-primary:var(--slate-900); --text-secondary:var(--slate-500); --text-inverse:#FFFFFF; --text-link:var(--indigo-600); --text-link-hover:var(--indigo-700); --border-default:var(--slate-200); --border-strong:var(--slate-300); --brand-primary:var(--indigo-600); --brand-primary-hover:var(--indigo-700); --brand-secondary:var(--slate-800); --brand-accent:var(--teal-700); --focus-ring:var(--indigo-400); --success:var(--green-600); --success-bg:var(--green-50); --error:var(--red-600); --error-bg:var(--red-50); --warning:var(--amber-600); --warning-bg:var(--amber-50); --info:var(--blue-600); --info-bg:var(--blue-50); --sale:var(--orange-700); /* fill carrying inverse text (>=4.5:1) */ --sale-text:var(--orange-700); /* sale text on light surfaces */ --sale-bg:var(--orange-50); --price:var(--slate-900); --price-was:var(--slate-400); --overlay-hero-gradient:linear-gradient(90deg, rgba(22,26,38,.86) 0%, rgba(22,26,38,.66) 38%, rgba(22,26,38,.18) 72%, rgba(22,26,38,0) 100%); --overlay-scrim:rgba(22,26,38,.55); /* Spacing (4px grid) */ --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px; /* Radius */ --radius-xs:4px; --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px; /* Elevation — tinted with indigo-900, not pure black */ --shadow-xs:0 1px 2px rgba(32,27,92,.06); --shadow-sm:0 1px 3px rgba(32,27,92,.08), 0 1px 2px rgba(32,27,92,.06); --shadow-md:0 4px 12px rgba(32,27,92,.10), 0 2px 4px rgba(32,27,92,.06); --shadow-lg:0 12px 28px rgba(32,27,92,.14), 0 4px 8px rgba(32,27,92,.07); --shadow-xl:0 24px 56px rgba(32,27,92,.18); --focus-shadow:0 0 0 3px var(--focus-ring); /* Type */ --font-display:"Space Grotesk","Space Grotesk Fallback",system-ui,sans-serif; --font-body:"Public Sans","Public Sans Fallback",system-ui,-apple-system,"Segoe UI",sans-serif; --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; --fs-2xs:.6875rem; --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-md:1.125rem; --fs-lg:1.25rem; --fs-xl:1.5rem; --fs-2xl:1.953rem; --fs-3xl:2.441rem; --fs-4xl:3.052rem; --fs-5xl:3.815rem; --lh-tight:1.1; --lh-snug:1.25; --lh-normal:1.5; --lh-relaxed:1.65; --measure:66ch; --container:1280px; --header-h:120px; } /* ---- 4. SEMANTIC TOKENS — DARK -------------------------------------------- */ :root[data-theme="dark"], .theme-dark { --bg-canvas:#0F1118; --bg-subtle:#141826; --surface-default:#1A1F2E; --surface-raised:#222838; --surface-sunken:#12151F; --text-primary:#F4F5FA; --text-secondary:#A6AEC6; --text-inverse:#161A26; --text-link:var(--indigo-300); --text-link-hover:var(--indigo-200); --border-default:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18); --brand-primary:var(--indigo-500); --brand-primary-hover:var(--indigo-400); --brand-secondary:var(--slate-100); --brand-accent:var(--teal-400); --focus-ring:var(--indigo-400); --success:var(--green-500); --success-bg:rgba(31,168,90,.14); --error:var(--red-500); --error-bg:rgba(239,68,68,.14); --warning:var(--amber-500); --warning-bg:rgba(240,161,43,.14); --info:var(--blue-500); --info-bg:rgba(59,130,246,.14); --sale:var(--orange-500); --sale-text:#FFB37A; --sale-bg:rgba(242,118,27,.16); --price:#F4F5FA; --price-was:#6B748F; --overlay-hero-gradient:linear-gradient(90deg, rgba(8,9,14,.92) 0%, rgba(8,9,14,.74) 40%, rgba(8,9,14,.25) 74%, rgba(8,9,14,0) 100%); --overlay-scrim:rgba(8,9,14,.62); --shadow-xs:0 1px 2px rgba(0,0,0,.4); --shadow-sm:0 1px 3px rgba(0,0,0,.5); --shadow-md:0 4px 12px rgba(0,0,0,.55); --shadow-lg:0 12px 28px rgba(0,0,0,.6); --shadow-xl:0 24px 56px rgba(0,0,0,.66); } /* ---- 5. RESET / BASE ------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box;} html{font-size:16px;-webkit-text-size-adjust:100%;} body{ margin:0;font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-normal); color:var(--text-primary);background:var(--bg-canvas); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:700;line-height:var(--lh-tight);margin:0 0 .5em;letter-spacing:-.01em;color:var(--text-primary);} h1{font-size:var(--fs-4xl);} h2{font-size:var(--fs-3xl);} h3{font-size:var(--fs-2xl);} h4{font-size:var(--fs-xl);} h5{font-size:var(--fs-lg);} p{margin:0 0 1em;max-width:var(--measure);} a{color:var(--text-link);text-decoration:none;} a:hover{color:var(--text-link-hover);} img,svg{display:block;max-width:100%;} :focus-visible{outline:none;box-shadow:var(--focus-shadow);border-radius:var(--radius-xs);} .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--space-5);} .eyebrow{font-family:var(--font-display);font-weight:600;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-accent);} .muted{color:var(--text-secondary);} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} /* ---- 6. BUTTONS ----------------------------------------------------------- */ .btn{ --_bg:var(--brand-primary);--_fg:var(--text-inverse);--_bd:transparent; display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2); font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);line-height:1; min-height:44px;padding:0 var(--space-5);border-radius:var(--radius-md); background:var(--_bg);color:var(--_fg);border:1.5px solid var(--_bd); cursor:pointer;transition:background .15s,box-shadow .15s,transform .04s,color .15s;white-space:nowrap;text-decoration:none; } .btn:hover{background:var(--brand-primary-hover);color:var(--text-inverse);box-shadow:var(--shadow-sm);} .btn:active{transform:translateY(1px);} .btn--secondary{--_bg:transparent;--_fg:var(--brand-primary);--_bd:var(--brand-primary);} .btn--secondary:hover{--_bg:var(--indigo-50);color:var(--brand-primary);background:var(--indigo-50);} .btn--ghost{--_bg:transparent;--_fg:var(--text-primary);--_bd:transparent;} .btn--ghost:hover{background:var(--slate-100);color:var(--text-primary);} .btn--accent{--_bg:var(--teal-700);--_fg:#fff;} .btn--accent:hover{background:var(--teal-800);color:#fff;} .btn--sm{min-height:36px;padding:0 var(--space-4);font-size:var(--fs-xs);} .btn--lg{min-height:52px;padding:0 var(--space-6);font-size:var(--fs-base);} .btn--block{display:flex;width:100%;} .btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;} /* ---- 7. BADGES ------------------------------------------------------------ */ .badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-display);font-weight:600; font-size:var(--fs-2xs);letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:var(--radius-pill);line-height:1;} .badge--sale{background:var(--sale);color:#fff;} .badge--new{background:var(--teal-700);color:#fff;} .badge--featured{background:var(--indigo-600);color:#fff;} .badge--stock{background:var(--green-50);color:var(--green-700);} .badge--low{background:var(--amber-50);color:var(--amber-700);} .badge--out{background:var(--slate-100);color:var(--slate-500);} .badge--au{background:var(--surface-default);color:var(--text-primary);border:1.5px solid var(--border-strong);} .badge--ship{background:var(--green-600);color:#fff;} /* ---- 8. INPUTS ------------------------------------------------------------ */ .field{display:flex;flex-direction:column;gap:6px;} .field label{font-size:var(--fs-sm);font-weight:600;color:var(--text-primary);} .input,.select,.textarea{ font-family:var(--font-body);font-size:var(--fs-base);color:var(--text-primary); min-height:44px;padding:0 var(--space-4);background:var(--surface-default); border:1.5px solid var(--border-strong);border-radius:var(--radius-md);width:100%;transition:border-color .15s,box-shadow .15s; } .textarea{padding:var(--space-3) var(--space-4);min-height:120px;line-height:var(--lh-normal);} .input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--brand-primary);box-shadow:var(--focus-shadow);} .input[aria-invalid="true"]{border-color:var(--error);} .field--error .help{color:var(--error);font-size:var(--fs-sm);} .help{color:var(--text-secondary);font-size:var(--fs-sm);} /* ---- 9. CARDS / SURFACES -------------------------------------------------- */ .card{background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);} .icon{width:24px;height:24px;display:inline-block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;flex:none;} .icon-16{width:16px;height:16px;} .icon-20{width:20px;height:20px;} .icon-32{width:32px;height:32px;} /* ---- 10. WOOCOMMERCE SCOPED OVERRIDES (thin layer, keyed to tokens) ------- */ .wc-scope .button,.wc-scope a.button,.wc-scope button.button{ min-height:44px;padding:0 var(--space-5);border-radius:var(--radius-md); font-family:var(--font-display);font-weight:600;background:var(--brand-primary);color:var(--text-inverse);border:none; } .wc-scope .button:hover{background:var(--brand-primary-hover);} .wc-scope .price{color:var(--price);font-family:var(--font-display);font-weight:700;} .wc-scope .price del{color:var(--price-was);font-weight:500;} .wc-scope .price ins{color:var(--sale-text);text-decoration:none;} .wc-scope .onsale{background:var(--sale);color:#fff;border-radius:var(--radius-pill);} .wc-scope .star-rating span{color:var(--amber-500);} .wc-scope input[type="text"],.wc-scope input[type="email"],.wc-scope input[type="tel"], .wc-scope input[type="password"],.wc-scope input[type="number"],.wc-scope select,.wc-scope textarea{ min-height:44px;border:1.5px solid var(--border-strong);border-radius:var(--radius-md);padding:0 var(--space-4);background:var(--surface-default);color:var(--text-primary); } .wc-scope input:focus,.wc-scope select:focus,.wc-scope textarea:focus{border-color:var(--brand-primary);box-shadow:var(--focus-shadow);outline:none;} @media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;}} /* ---- MCM WC-LOOP BRIDGE (generated; maps WC classic loop onto design tokens) */ /* the design's product [data-wc] containers are themselves N-column grids sized for tile children; the resolvers emit one wrapper (div.woocommerce via the [products] shortcode) or the bare legacy-loop ul — span either across ALL the design-grid columns and let ul.products run its own grid */ .wc-scope [data-wc="product_loop"] > *, .wc-scope [data-wc="featured_products"] > *{grid-column:1/-1;width:100%;} .wc-scope ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:var(--space-5);list-style:none;margin:var(--space-5) 0;padding:0;} .wc-scope ul.products::before,.wc-scope ul.products::after{display:none;} .wc-scope ul.products li.product{width:auto!important;float:none!important;margin:0!important; background:var(--surface-default);border:1px solid var(--border-default); border-radius:var(--radius-md);padding:var(--space-4);display:flex;flex-direction:column; gap:var(--space-2);transition:box-shadow .15s ease,transform .15s ease;position:relative;} .wc-scope ul.products li.product:hover{box-shadow:var(--shadow-md,0 6px 18px rgba(32,27,92,.12)); transform:translateY(-2px);} .wc-scope ul.products li.product img{width:100%;aspect-ratio:1/1;object-fit:contain; border-radius:var(--radius-sm);background:var(--surface-sunken);} .wc-scope ul.products li.product .woocommerce-loop-product__title{ font-family:var(--font-body);font-size:.95rem;font-weight:500;color:var(--text-primary); line-height:1.35;min-height:2.6em;} .wc-scope ul.products li.product .price{margin-top:auto;} .wc-scope ul.products li.product .button{width:100%;text-align:center;margin-top:var(--space-2);} .wc-scope ul.products li.product .onsale{position:absolute;top:var(--space-3);left:var(--space-3); z-index:2;padding:2px 10px;font-size:.75rem;font-weight:700;} /* the design banner carries the archive title; hide the legacy loop's duplicate header (title + archive description — the description hook also re-renders stale shop-page content) */ .wc-scope .woocommerce-products-header{display:none;} .wc-scope .woocommerce-result-count{color:var(--text-secondary);} .wc-scope .woocommerce-ordering select{min-height:40px;} .wc-scope nav.woocommerce-pagination ul{display:flex;gap:var(--space-2);list-style:none; padding:0;justify-content:center;border:none;} .wc-scope nav.woocommerce-pagination ul li{border:none;} .wc-scope nav.woocommerce-pagination ul li a,.wc-scope nav.woocommerce-pagination ul li span{ display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px; border:1px solid var(--border-default);border-radius:var(--radius-sm); color:var(--text-primary);background:var(--surface-default);} .wc-scope nav.woocommerce-pagination ul li span.current{background:var(--brand-primary); color:var(--text-inverse);border-color:var(--brand-primary);} /* dark bands: keep loop cards readable on tinted backgrounds */ .band--dark .wc-scope ul.products li.product,.deals .wc-scope ul.products li.product{ background:var(--surface-default);} @media (max-width:640px){.wc-scope ul.products{grid-template-columns:repeat(2,1fr); gap:var(--space-3);}} /* ---- MCM v2 BRIDGE ADDITIONS ------------------------------------------------ */ /* content-product.php now emits the design's li.prod-card; let the design's own .prod-card styles drive, and bridge WC's add-to-cart + price into it */ .wc-scope ul.products li.prod-card{background:var(--surface-default); border:1px solid var(--border-default);border-radius:var(--radius-md); padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);position:relative;} .wc-scope li.prod-card .prod-media{position:relative;} .wc-scope li.prod-card .prod-media img{width:100%;aspect-ratio:1/1;object-fit:contain; border-radius:var(--radius-sm);background:var(--surface-sunken);} .wc-scope li.prod-card .prod-cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em; color:var(--text-secondary);text-decoration:none;} .wc-scope li.prod-card .prod-title a{font-family:var(--font-body);font-size:.95rem;font-weight:500; color:var(--text-primary);text-decoration:none;line-height:1.35;display:-webkit-box; -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;} .wc-scope li.prod-card .prod-price{margin-top:auto;font-family:var(--font-display); font-weight:700;color:var(--price);} .wc-scope li.prod-card .prod-price del{color:var(--price-was);font-weight:500;margin-left:6px;} .wc-scope li.prod-card .prod-price ins{color:var(--sale-text);text-decoration:none;} .wc-scope li.prod-card .prod-add .button{width:100%;text-align:center;} .wc-scope li.prod-card .prod-add a.added_to_cart{display:none;} .wc-scope li.prod-card .prod-badges{position:absolute;top:var(--space-2);left:var(--space-2); z-index:2;display:flex;gap:4px;} /* Defect 4: the legal/doc layout gets the same polish the FAQ accordion has */ .wc-scope.page-doc .doc-body,.page-doc .doc-body{max-width:72ch;} .page-doc .doc-body h2{font-family:var(--font-display);margin:var(--space-6) 0 var(--space-3);} .page-doc .doc-body h3{margin:var(--space-5) 0 var(--space-2);} .page-doc .doc-body p,.page-doc .doc-body li{line-height:1.7;color:var(--text-primary);} .page-doc .doc-body ul,.page-doc .doc-body ol{margin:var(--space-3) 0;padding-left:var(--space-5);} .page-doc .doc-layout{display:block;} .page-doc .doc-head{margin-bottom:var(--space-5);border-bottom:1px solid var(--border-default); padding-bottom:var(--space-4);} /* Defect 5: the injected full-department mega panel */ .dept-mega{position:absolute;left:0;right:0;z-index:40;background:var(--surface-default); border-bottom:1px solid var(--border-default);box-shadow:var(--shadow-lg,0 12px 32px rgba(32,27,92,.18));} .dept-mega-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--space-2);padding:var(--space-5) 0;} .dept-mega-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3); border-radius:var(--radius-sm);color:var(--text-primary);text-decoration:none;} .dept-mega-item:hover{background:var(--surface-sunken);} .dept-mega-item .icon{color:var(--brand-primary);flex:none;} .deptnav-links .view-all{margin-left:auto;color:var(--brand-accent);font-weight:600;} /* help-centre card heading scale (was sized like a section heading) */ .help-grid .help-card h2{font-size:1.15rem;margin:var(--space-2) 0;} .help-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-4);} .help-card{padding:var(--space-5);text-decoration:none;color:var(--text-primary);} /* ==== MCM WC-SURFACE BRIDGE (generated) ====================================== */ /* WooCommerce renders its OWN markup for the PDP gallery/tabs/meta/related, the PLP sidebar, cart/checkout/account, notices and order pages. The design wrappers around them were unstyled (the theme styled only the loop card), so these surfaces fell back to browser defaults. These rules re-skin WC's real markup onto the design tokens. (fallbacks via var(--x, default) where a token may be absent from a given design's theme.json.) */ /* ---- PDP gallery: WC flexslider (main slide + thumbnail rail + zoom/lightbox) */ .wc-scope .woocommerce-product-gallery{position:relative;margin:0;} .wc-scope .woocommerce-product-gallery__wrapper{margin:0;} .wc-scope .woocommerce-product-gallery__image img{border-radius:var(--radius-lg,12px);background:var(--surface-sunken,#f4f4f8);} .wc-scope .woocommerce-product-gallery .flex-viewport{border-radius:var(--radius-lg,12px);background:var(--surface-sunken,#f4f4f8);} .wc-scope .woocommerce-product-gallery .flex-control-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:var(--space-3) 0 0;padding:0;list-style:none;} .wc-scope .woocommerce-product-gallery .flex-control-thumbs li{width:72px;margin:0;} .wc-scope .woocommerce-product-gallery .flex-control-thumbs img{border:1.5px solid var(--border-default,#e3e3ec);border-radius:var(--radius-md,8px);cursor:pointer;opacity:.7;transition:opacity .15s,border-color .15s;} .wc-scope .woocommerce-product-gallery .flex-control-thumbs img:hover{opacity:1;} .wc-scope .woocommerce-product-gallery .flex-control-thumbs img.flex-active{border-color:var(--brand-primary,#4a3fd4);opacity:1;} .wc-scope .woocommerce-product-gallery__trigger{position:absolute;top:12px;right:12px;z-index:3;} /* pre-init safety: before flexslider initialises, never show the raw stacked column */ .wc-scope .woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__image:not(:first-child){display:none;} /* ---- PDP tabs: tab nav + hide inactive panels (WC tabs.js shows the active one) */ .wc-scope .woocommerce-tabs ul.wc-tabs{display:flex;flex-wrap:wrap;gap:var(--space-4);list-style:none;margin:0 0 var(--space-4);padding:0;border-bottom:1px solid var(--border-default,#e3e3ec);} .wc-scope .woocommerce-tabs ul.wc-tabs li{margin:0;padding:0;background:none;border:none;} .wc-scope .woocommerce-tabs ul.wc-tabs li a{display:inline-block;padding:var(--space-3) 0;font-family:var(--font-display);font-weight:600;color:var(--text-secondary,#6b6b80);text-decoration:none;border-bottom:2px solid transparent;} .wc-scope .woocommerce-tabs ul.wc-tabs li.active a{color:var(--text-primary,#1a1a2e);border-bottom-color:var(--brand-primary,#4a3fd4);} .wc-scope .woocommerce-tabs .woocommerce-Tabs-panel{display:none;line-height:1.7;color:var(--text-primary,#1a1a2e);} .wc-scope .woocommerce-no-js .woocommerce-tabs .woocommerce-Tabs-panel{display:block;} /* ---- PDP product meta (sku / categories / tags) */ .wc-scope .product_meta{font-size:.85rem;color:var(--text-secondary,#6b6b80);margin-top:var(--space-4);} .wc-scope .product_meta > span{display:block;padding:2px 0;} .wc-scope .product_meta a{color:var(--brand-primary,#4a3fd4);text-decoration:none;} /* ---- related / up-sell grids (span the design grid, run WC's own grid) */ .wc-scope [data-wc="related_products"] > *{grid-column:1/-1;width:100%;} .wc-scope .related.products,.wc-scope .up-sells.products{margin-top:var(--space-6);clear:both;} .wc-scope .related.products > h2,.wc-scope .up-sells.products > h2{font-family:var(--font-display);font-size:1.4rem;margin-bottom:var(--space-4);} /* ---- breadcrumbs */ .wc-scope .woocommerce-breadcrumb,.wc-scope .wc-block-breadcrumbs{font-size:.82rem;color:var(--text-secondary,#6b6b80);} .wc-scope .woocommerce-breadcrumb a,.wc-scope .wc-block-breadcrumbs a{color:var(--text-secondary,#6b6b80);text-decoration:none;} .wc-scope .woocommerce-breadcrumb a:hover,.wc-scope .wc-block-breadcrumbs a:hover{color:var(--brand-primary,#4a3fd4);} /* ---- PLP category sidebar (WC product-categories block — was a raw bullet list). Real WC markup per list item:
  • {Name N } The count is a SIBLING of (not a child), so the FLEX ROW must live on the
  • , the children