/* ========================================================================== OMA-SHOP — /shop/, product-category archives, product search (P3) Loaded after oma-home.css. Depends on oma-tokens.css primitives. EVERY value below is measured. Sources, in order of authority: A E:\omegamino\source-cdp\dom\shop.html (BeBuilder dynamic inline CSS) B E:\omegamino\source-cdp\merged.css (be.min.css + be_classes.css) C E:\omegamino\source-cdp\maps\shop.json (computed styles / rects) D pixel measurements of E:\omegamino\_shots\{desktop-1440,tablet-820, mobile-390}\shop.png NOTHING in here restyles the shared product card's plate, badge, hover glyphs or out-of-stock state — that is P1's component and it is FIXED. Only the archive's own title/price/button sizes are overridden, because be_classes.css genuinely gives the archive a different scale from the home slider (26/50/600 slider vs 26/500/margin-top:30 archive). ========================================================================== */ /* -------------------------------------------------------------------------- 0. THE SHARED "Shop" PHOTO HERO — sub-line width only The hero itself is P1's `.oma-pagehero` and is untouched. But the source puts the shop/category sub-line in a BeBuilder **one-third** column:

Our aminos are manufactured to the highest standards, ensuring purity, potency, and reliability.

so it wraps onto two lines at 1440. Measured in `_shots/desktop-1440/shop.png`: line 1 runs x 66→472 and breaks after "standards,", line 2 x 66→348. Our hero gives the sub-line P1's default 720px, so it renders on one line ending at x 759. one-third of the 1310px content box, less the theme's 12px column gaps, = 412.6px — which is exactly where the source breaks. Scoped to the archive body classes so /faq/, /coas/, /contact/, /research-supplies/ and /videos/ (P8/P9, and their sub-lines are wider at source — measured max line ends x 566/560/566/587/577) are not touched. -------------------------------------------------------------------------- */ body.woocommerce-shop .oma-pagehero__sub, body.tax-product_cat .oma-pagehero__sub { max-width: calc(33.3333% - 24px); /* BeBuilder `one-third` */ } @media (max-width: 959px) { /* source column class: tablet-three-fifth */ body.woocommerce-shop .oma-pagehero__sub, body.tax-product_cat .oma-pagehero__sub { max-width: calc(60% - 24px); } } @media (max-width: 767px) { /* source column class: mobile-one */ body.woocommerce-shop .oma-pagehero__sub, body.tax-product_cat .oma-pagehero__sub { max-width: 100%; } } /* -------------------------------------------------------------------------- 1. THE GRID SECTION source: section.mcb-section-x593rdb4 [A] padding-top:150px; padding-bottom:140px @max-width:1440 -> 120 / 110 (this is what renders at 1440) @max-width:959 -> 100 / 90 @max-width:767 -> 80 / 70 [C] rect y 722 h 3333 with computed padding "120px 0px 110px" ✓ -------------------------------------------------------------------------- */ .oma-shop { padding: 150px 0 140px; } @media (max-width: 1440px) { .oma-shop { padding: 120px 0 110px; } } @media (max-width: 959px) { .oma-shop { padding: 100px 0 90px; } } @media (max-width: 767px) { .oma-shop { padding: 80px 0 70px; } } /* -------------------------------------------------------------------------- 2. THE PRODUCT GRID [B] .woocommerce ul.products.columns-4 li.product { width:23%; margin:0 1% 20px; float:left; clear:unset } + li.product:nth-child(4n+1){clear:both} [D] 1440: four plates at x 78-378 / 406-706 / 733-1033 / 1061-1361 inside the 65px-guttered 1310px container -> 301.3px = 23% of 1310, pitch 328 = 25%, outer offset 13 = 1% ✓ 820 : two plates at x 72 and 417, each 331 wide -> 331 = 48% of 690, offset 6.9 = 1% ✓ 390 : two plates at x 20 and 202, each 168 wide, 14px apart -> 48% of 350 with space-between and NO side margins ✓ The 1240 (3-up) step is BeTheme's standard responsive ladder (`.woocommerce ul.products li.product{width:31.3%;margin:0 1% 20px}`); it sits between two directly-measured breakpoints. -------------------------------------------------------------------------- */ /* ⚠ SPECIFICITY, and why every rule below is prefixed. The source's grid