/* ========================================================================== RV LAYOUT, DESKTOP READING COLUMN rv-layout-desktop-8.css Loaded AFTER rv-layout-desktop-7.css, and after tokens-7, rv-blocks-3, petrol-chrome-34 and petrol-v12-3. It is a patch layer. It overrides, it does not replace. Everything v7 established about the rail is still true and is not restated here. WHAT v7 GOT RIGHT AND STAYS The site is full bleed. Hero bands, petrol bands, the header, the footer, the product grid and every designed section still run edge to edge on one shared rail. Nothing in this file puts a centre cap back on a band, a shell, a container or a grid. WHAT v7 GOT WRONG AND THIS FILE FIXES v7 moved every reading measure off the rail and onto the paragraph, which was the right call, but it applied those measures as max-width with no side margins. A block with max-width and no auto margin sits hard against the left edge of whatever contains it. On a 1920 monitor an 820px lede inside a 1768px shell starts at the rail's left edge and leaves roughly 970px of empty ground to its right. Every measured block on the site did that, at every cap the site owns: 990px, 820px, 78ch, 76ch, 74ch, 66ch, 62ch, 58ch, 20ch. The owner reads that as text glued to the left of every page, and they are right. THE ONE CHANGE OF INTENT The reading column is now CENTRED inside the full width rail. The band still bleeds, the shell is still full width, the grids still fill it. Only the text inside them sits in a centred column. THE CONTRACT EVERY RULE BELOW BUILDS TO A prose region is any container that holds running text as its direct children. Inside one: ordinary prose children max-width var(--rv-read) centred wide children max-width var(--rv-read-wide) centred fixed width marks keep their own width, left edge pinned to the reading column's left edge Everything centres on the SAME axis, so all the left edges agree. That is the whole point. Children with different caps AND different alignment is what produced the ragged mess this file exists to remove, so nothing below is allowed to leave a text block capped but unaligned. ALSO IN THIS FILE A type scale rise decided by the site owner, applied as token overrides plus a small number of pinned sizes that must stop tracking the base token. Because the ch unit scales with font size, every ch based measure on the site got wider the moment the base rose, so the ch caps are converted to fixed values here as well. DESKTOP ONLY. Every rule is inside @media (min-width: 1025px). Nothing in this file is outside it, so it can never collide with the mobile file. ========================================================================== */ @media (min-width: 1025px) { /* -------------------------------------------------------------------------- 1. TYPE SCALE tokens-7 raises the base to 18px in its own @media (min-width: 1024px) block. This file loads later, so at 1025 and up these win on source order with no specificity games. At exactly 1024 tokens-7 still applies, which is the mobile file's boundary and is left alone deliberately. --rv-text-2xl, --rv-text-3xl and --rv-text-4xl are NOT touched. The display sizes were never the complaint and the .rv-h2 clamp in section 3 is what actually governs a section heading. -------------------------------------------------------------------------- */ :root { --rv-text-sm: 16px; --rv-text-base: 19px; --rv-text-lg: 21px; --rv-text-xl: 24px; } /* --rv-leading-body is already 1.75 in tokens-7 and is correct at 19px. It is not restated, so a later change to the token still reaches this file. */ /* -------------------------------------------------------------------------- 2. BARE HEADINGS IN CONTENT With the base at 19px the theme's own h4 landed at roughly 16px, so a subheading rendered SMALLER than the paragraph underneath it. h5 and h6 were worse. The ladder is respaced so every level is larger than body copy and each is clearly larger than the one below it. h1 40 h2 30 h3 24 h4 21 h5 19 h6 16 Scoped two ways on purpose. First to the reading containers, so nothing in the header, the footer, a widget or a product card is touched. Second with :not([class]), so only headings written as plain markup in content are affected. Every designed heading on the site carries a class, .rv-h2, .rv-g-h2, .rv-display, .wd-entities-title, and each keeps the size its own rule gives it. Leading is left to the theme. Woodmart sets heading line height as a unitless ratio, so it scales with these sizes on its own. -------------------------------------------------------------------------- */ body.rv-petrol :is(.entry-content, .wd-entry-content, .wd-term-desc, .rv-prose, .rv-lede, .rv-shop-hub__block, .rv-faq) h1:not([class]) { font-size: 40px; } body.rv-petrol :is(.entry-content, .wd-entry-content, .wd-term-desc, .rv-prose, .rv-lede, .rv-shop-hub__block, .rv-faq) h2:not([class]) { font-size: 30px; } body.rv-petrol :is(.entry-content, .wd-entry-content, .wd-term-desc, .rv-prose, .rv-lede, .rv-shop-hub__block, .rv-faq) h3:not([class]) { font-size: 24px; } body.rv-petrol :is(.entry-content, .wd-entry-content, .wd-term-desc, .rv-prose, .rv-lede, .rv-shop-hub__block, .rv-faq) h4:not([class]) { font-size: 21px; } body.rv-petrol :is(.entry-content, .wd-entry-content, .wd-term-desc, .rv-prose, .rv-lede, .rv-shop-hub__block, .rv-faq) h5:not([class]) { font-size: 19px; } body.rv-petrol :is(.entry-content, .wd-entry-content, .wd-term-desc, .rv-prose, .rv-lede, .rv-shop-hub__block, .rv-faq) h6:not([class]) { font-size: 16px; } /* -------------------------------------------------------------------------- 3. THE SECTION HEADING CLAMP petrol-chrome-34 L2122 sets clamp(28px, 2.4vw, 38px). Against 19px body copy that bottom stop is only a 1.47 step, which reads as a bold paragraph rather than a heading. Widened at both ends so the separation holds on a 1280 laptop and on a 2560 monitor. -------------------------------------------------------------------------- */ body.rv-petrol .rv-h2 { font-size: clamp(30px, 2.6vw, 42px); } /* -------------------------------------------------------------------------- 4. SIZES PINNED OFF THE BASE TOKEN These four all resolved from --rv-text-sm or --rv-text-base, so raising the base dragged them up with it. Each is a case where that is wrong: .rv-caption is small print by design. At var(--rv-text-base) it would now render at 19px, the same size as the body copy it annotates, which removes the distinction the class exists to make. .rv-table th a column label sitting above its data. Pinned one step under the cell so the header still reads as a label. .rv-table td factual content, the most useful text on a spec page, so it keeps nearly the full body size. the main nav 16px uppercase with 0.06em tracking is physically wider than 16px sentence case and the top level menu has eight items. At 16px it wraps on a 1366 laptop. Pinned at 15px. NOTE on the nav: an inline snippet prints @media (max-width:1230px){ ... .wd-nav-main > li > a { font-size:13.5px !important } } after this file. Between 1025 and 1230 that !important still wins and the nav stays at 13.5px, which is the correct behaviour for a narrow desktop and is deliberately not fought here. -------------------------------------------------------------------------- */ body.rv-petrol .rv-caption { font-size: 13px; } body.rv-petrol .rv-table th { font-size: 16px; } body.rv-petrol .rv-table td { font-size: 17px; } body.rv-petrol .whb-header .wd-nav-main > li > a { font-size: 15px; } /* -------------------------------------------------------------------------- 5. THE READING COLUMN TOKENS --rv-read the running prose column. Everything that is a sentence sits in this and nothing else. --rv-read-wide tables, figures, media, FAQ blocks and the designed multi column blocks. Centred on the SAME axis as --rv-read, so a wide block overhangs the prose evenly on both sides and still reads as one column with occasional wider steps. --rv-read-inset is the left margin that puts a fixed width mark, a 48px rule or a 520px search field, on the reading column's left edge instead of on the rail's. It is the same arithmetic an auto margin does, written out so it can be applied to one side only. IT MUST ONLY EVER BE USED ON A DIRECT CHILD OF THE RAIL. The 100% inside it resolves against the containing block of whatever element USES the token, not the element that declares it. That is the same trap documented in section 6 of rv-layout-desktop-7.css. Used on a direct child of the shell it resolves against the shell, which is what is wanted. Used anywhere deeper it resolves against something else and lands in the wrong place. The three caps v7 declared are repointed at --rv-read so there is one number, not three. 820px and 990px were both attempts at the same thing. The ch based measures are converted to fixed values. A 66ch cap at 18px was about 665px; at 19px the same declaration silently becomes about 700px, and at 21px on a lede about 775px. Fixed values stop the caps moving every time the type scale moves. --rv-measure-tight has no consumer in any of the six files, so it is left exactly as tokens-7 declares it. -------------------------------------------------------------------------- */ :root { --rv-read: 800px; --rv-read-wide: 1160px; --rv-read-inset: max(0px, calc((100% - var(--rv-read)) / 2)); --rv-measure-prose: var(--rv-read); --rv-measure-article: var(--rv-read); --rv-measure: var(--rv-read); } /* -------------------------------------------------------------------------- 6. THE SECTION SHELL IS THE MAIN PROSE REGION Confirmed against the live markup of the homepage, the shop archive, a product category, a product tag, a single product, /faqs, /our-team, /about-us, /wholesale, /guides, /blog, /cart, /my-account, /custom-viking-axe, /design-your-own-viking-gear, a search result page and a 404. Every one of them builds its bands as section.rv-sec > div.rv-shell > the content so .rv-shell is the rail and its direct children are the reading column. The shell itself is untouched. It keeps its full width and the 76px or 56px gutter an inline snippet gives it, so the band still bleeds. Named children only, never a blanket * selector. A blanket rule would catch .rv-cards, .rv-row, .rv-stats, .rv-steps, .rv-team-owner and the product grid, all of which are designed to fill the shell and must keep doing so. This beats the 62ch caps at petrol-chrome-34 L2676, L2677 to L2680, L2683 and the 20ch cap at L2686. Those are the same specificity as these, and this file loads later, so no !important is needed anywhere in this section. .rv-display is brought onto the column rather than left at 20ch. A hero title whose left edge does not match the standfirst under it is the exact fault being fixed. 800px still keeps it clear of the .rv-stave watermark, which was the reason the 20ch cap was added in the first place. nav.wd-breadcrumbs is included because it is a direct child of the shell on every archive and hero band. Left where it was, it would sit alone at the far left above a centred title. -------------------------------------------------------------------------- */ body.rv-petrol .rv-sec > .rv-shell > .rv-display, body.rv-petrol .rv-sec > .rv-shell > .rv-h2, body.rv-petrol .rv-sec > .rv-shell > .rv-h3, body.rv-petrol .rv-sec > .rv-shell > .rv-h4, body.rv-petrol .rv-sec > .rv-shell > .rv-lede, body.rv-petrol .rv-sec > .rv-shell > .rv-prose, body.rv-petrol .rv-sec > .rv-shell > .rv-sechead, body.rv-petrol .rv-sec > .rv-shell > .wd-breadcrumbs, body.rv-petrol .rv-sec > .rv-shell > p, body.rv-petrol .rv-sec > .rv-shell > ul, body.rv-petrol .rv-sec > .rv-shell > ol, body.rv-petrol .rv-sec > .rv-shell > blockquote { max-width: var(--rv-read); margin-inline: auto; } /* -------------------------------------------------------------------------- 7. THE WIDE CHILDREN OF THE SHELL Same axis, more room. A 52 row state table or a FAQ list would be cramped at 800px, and section 9 of rv-layout-desktop-7.css already guarantees a wide table scrolls inside its own wrapper rather than pushing the page, so 1160px here is a cap and not a risk. .rv-cta is a two track grid, 1.4fr for the text and auto for the button row. Capping and centring the GRID puts the whole call to action on the axis. Its .rv-lede stays where it is inside the 1.4fr track, which is what section 13 requires. A bare as a direct child of a shell is NOT listed. None was found in the rendered markup of any template checked, and an image sitting loose in a band is far more likely to be a deliberate full width figure than a piece of the reading column, so it is left where the design put it. .rv-faq keeps its own answer measure. rv-blocks-3 L580 caps .rv-faq__a at var(--rv-measure), which section 5 repoints at --rv-read, so a question and its rule span the 1160px block while the answer paragraph runs 800px from the same left edge. All the left edges still agree. -------------------------------------------------------------------------- */ body.rv-petrol .rv-sec > .rv-shell > .rv-faq, body.rv-petrol .rv-sec > .rv-shell > .rv-cta, body.rv-petrol .rv-sec > .rv-shell > .rv-tablewrap, body.rv-petrol .rv-sec > .rv-shell > .rv-table-wrap, body.rv-petrol .rv-sec > .rv-shell > table, body.rv-petrol .rv-sec > .rv-shell > figure { max-width: var(--rv-read-wide); margin-inline: auto; } /* -------------------------------------------------------------------------- 8. THE FIXED WIDTH MARKS Two things in the shell have a width that is theirs and must not change. .rv-rule a 48px block rule under a heading. A plain auto margin would park it in the dead centre of a 1768px band as a lonely dash. It needs its LEFT edge on the column, not its centre on the axis. .rv-searchform a 520px flex row on the 404 page and the search results page, set at petrol-chrome-34 L403. Widening it to 800px would turn a search field into a banner. Same treatment. A .rv-rule that sits inside a

wrapper, which is how wpautop leaves it on several pages, needs nothing: the

is capped and centred by section 6 and the rule already sits at that

's left edge. -------------------------------------------------------------------------- */ body.rv-petrol .rv-sec > .rv-shell > .rv-rule, body.rv-petrol .rv-sec > .rv-shell > .rv-searchform { margin-inline-start: var(--rv-read-inset); margin-inline-end: auto; } /* -------------------------------------------------------------------------- 9. THE LONG TERM DESCRIPTION PRINTED INSIDE A BAND Snippet 26 prints a whole category description, several thousand words with its own subheadings, inside div.rv-lede.rv-lede--long on the petrol band above main. Confirmed live on /product-category/swords/arming-swords. Section 5 of rv-layout-desktop-7.css already released the wrapper and put 820px on the children. That part was right. What it left out was the auto margin, so the whole description sat at the far left of a 1768px band. The wrapper is released again here explicitly, because section 6 above also matches it through its .rv-lede class and would otherwise clamp the wrapper to 800px, which would then clip the wide children below. ORDER MATTERS. These two rules are the same specificity as section 6 and must stay after it. -------------------------------------------------------------------------- */ body.rv-petrol .rv-sec > .rv-shell > .rv-lede--long, body.rv-petrol .rv-sec > .rv-shell > .rv-lede:has(p + p) { max-width: none; margin-inline: 0; } body.rv-petrol .rv-sec > .rv-shell > .rv-lede--long > *, body.rv-petrol .rv-sec > .rv-shell > .rv-lede:has(p + p) > * { max-width: var(--rv-read); margin-inline: auto; } body.rv-petrol .rv-sec > .rv-shell > .rv-lede--long > .rv-tablewrap, body.rv-petrol .rv-sec > .rv-shell > .rv-lede--long > .rv-table-wrap, body.rv-petrol .rv-sec > .rv-shell > .rv-lede--long > .rv-faq, body.rv-petrol .rv-sec > .rv-shell > .rv-lede--long > table, body.rv-petrol .rv-sec > .rv-shell > .rv-lede--long > figure { max-width: var(--rv-read-wide); } /* -------------------------------------------------------------------------- 10. THE SAME DESCRIPTION, SECOND COPY A product category renders its term description TWICE. Once as the band in section 9 above main, and again inside main as div.wd-term-desc.wd-entry-content, where an inline snippet caps its p, ul and ol at 78ch. Both copies are live on the same page, so both have to be treated the same way or the visitor sees two differently aligned versions of one article. The snippet prints AFTER all six stylesheets, so equal specificity would lose on source order. These selectors carry body.rv-petrol and a child combinator, which is 0,3,2 against the snippet's 0,2,1, so they win on specificity alone and no !important is needed. The snippet also sets .wd-term-desc.wd-entry-content .rv-faq { max-width: none }. That is 0,3,0 and is beaten by the 0,3,1 rule below. WHAT THIS CANNOT FIX. The two copies live in different containers. The band copy centres inside the full width shell. This copy centres inside .wd-content-area, which on a category archive is a 10 of 12 grid column with a 2 column sidebar-left beside it. Their centre lines are therefore different, because their rails are different. Each copy is correctly centred in its own rail, which is the closest a stylesheet can get. The real fix is to stop printing the description twice, and that is a snippet change, not a CSS one. -------------------------------------------------------------------------- */ body.rv-petrol .wd-term-desc.wd-entry-content > p, body.rv-petrol .wd-term-desc.wd-entry-content > ul, body.rv-petrol .wd-term-desc.wd-entry-content > ol, body.rv-petrol .wd-term-desc.wd-entry-content > h2, body.rv-petrol .wd-term-desc.wd-entry-content > h3, body.rv-petrol .wd-term-desc.wd-entry-content > h4, body.rv-petrol .wd-term-desc.wd-entry-content > blockquote { max-width: var(--rv-read); margin-inline: auto; } body.rv-petrol .wd-term-desc.wd-entry-content > .rv-faq, body.rv-petrol .wd-term-desc.wd-entry-content > .rv-tablewrap, body.rv-petrol .wd-term-desc.wd-entry-content > .rv-table-wrap, body.rv-petrol .wd-term-desc.wd-entry-content > table, body.rv-petrol .wd-term-desc.wd-entry-content > figure { max-width: var(--rv-read-wide); margin-inline: auto; } /* -------------------------------------------------------------------------- 11. THE SHOP HUB /viking-axes-and-knives builds its long copy as section.rv-sec.rv-shop-hub > div.rv-shell > div.rv-shop-hub__block and an inline snippet caps each block at 74ch. Confirmed live. The blocks are the prose region here, so the BLOCK is capped and centred and the .rv-sechead and .rv-faq inside it fill it. Capping the inner .rv-faq at --rv-read-wide would overflow the 800px block it sits in, which is why the nested FAQ is released to the block width rather than widened. The snippet is 0,1,0 for the block and 0,2,0 for the FAQ. These are 0,4,1 and 0,4,0, so they win on specificity against a later stylesheet without !important. -------------------------------------------------------------------------- */ body.rv-petrol .rv-sec.rv-shop-hub > .rv-shell > .rv-shop-hub__block { max-width: var(--rv-read); margin-inline: auto; } body.rv-petrol .rv-sec.rv-shop-hub .rv-shop-hub__block > .rv-faq { max-width: 100%; } /* -------------------------------------------------------------------------- 12. THE SINGLE POST, WHICH HAS A SIDEBAR /skadi-norse-mythology and every other single post renders as main.wd-content-layout.container.wd-grid-g 12 track grid div.wd-content-area.site-content.wd-grid-col 9 tracks article > div.wd-entry-content aside.wd-sidebar.sidebar-container.sidebar-right 3 tracks so the 990px cap at rv-layout-desktop-7.css L259 does NOT strand the text against the viewport. It strands it against the sidebar. At 1920 the article column is about 1372px wide and the text stopped at 990px, leaving roughly 380px of empty ground between the paragraph and the sidebar rule. WHAT margin-inline:auto ACTUALLY DOES HERE, and why it is safe. These elements are direct children of .wd-entry-content, whose containing block is the 9 track article column, not the viewport. An auto margin distributes the free space of THAT box. So the text centres inside the article column and the sidebar is never crossed, never slid under and never pushed. No viewport arithmetic is involved and none is needed. This column centres on a different axis from the full bleed bands on the same page, because it is a different rail. That is correct: a page with a sidebar has two rails, and the reading column belongs to the one it is in. .rv-sec is deliberately NOT listed. Section 4 of rv-layout-desktop-7.css excludes sidebar templates from the band bleed, so a designed band inside a post fills the article column, and it should keep filling it. Same specificity as L259, later file, so no !important. -------------------------------------------------------------------------- */ body.rv-petrol.single-post .wd-entry-content > p, body.rv-petrol.single-post .wd-entry-content > ul, body.rv-petrol.single-post .wd-entry-content > ol, body.rv-petrol.single-post .wd-entry-content > blockquote, body.rv-petrol.single-post .wd-entry-content > h2, body.rv-petrol.single-post .wd-entry-content > h3, body.rv-petrol.single-post .wd-entry-content > h4 { max-width: var(--rv-read); margin-inline: auto; } body.rv-petrol.single-post .wd-entry-content > .rv-tablewrap, body.rv-petrol.single-post .wd-entry-content > .rv-table-wrap, body.rv-petrol.single-post .wd-entry-content > .rv-faq, body.rv-petrol.single-post .wd-entry-content > table, body.rv-petrol.single-post .wd-entry-content > figure { max-width: var(--rv-read-wide); margin-inline: auto; } /* -------------------------------------------------------------------------- 13. THE GUIDE BODIES /axe-care, /worldwide-shipping and /steel-and-hardness build as article.entry-content > div.rv-g > header.rv-g-hero > div.rv-g-body > section.rv-g-sec > ... with no sidebar, so .rv-g-sec is the prose region and its direct children are the reading column. Confirmed live on all three. petrol-v12-3 caps .rv-g-lead, .rv-g-p and .rv-g-callout at 62ch and .rv-g-check at 620px, all with no side margin, so a guide read as a narrow ribbon down the left of a 1768px page. .rv-g-h2 and .rv-g-h3 carry margin: 0 0 24px !important and margin: 0 0 12px !important at petrol-v12-3 L1198 and L1200. A plain auto margin loses to those, so those two rules use !important. It is beating a shorthand that only ever meant to zero the TOP margin and set the bottom one; the inline half of it was collateral. Direct children only. A .rv-g-p that sits inside .rv-g-two, .rv-g-compare or .rv-g-triple is a column of a designed grid and keeps its own 62ch inside its own track, which is section 15's rule. -------------------------------------------------------------------------- */ body.rv-petrol .rv-g .rv-g-sec > .rv-g-lead, body.rv-petrol .rv-g .rv-g-sec > .rv-g-p, body.rv-petrol .rv-g .rv-g-sec > .rv-g-callout, body.rv-petrol .rv-g .rv-g-sec > .rv-g-check, body.rv-petrol .rv-g .rv-g-sec > p, body.rv-petrol .rv-g .rv-g-sec > ul, body.rv-petrol .rv-g .rv-g-sec > ol { max-width: var(--rv-read); margin-inline: auto; } body.rv-petrol .rv-g .rv-g-sec > .rv-g-h2, body.rv-petrol .rv-g .rv-g-sec > .rv-g-h3 { max-width: var(--rv-read); margin-inline: auto !important; } /* The designed multi column blocks. Wider than prose, same axis. */ body.rv-petrol .rv-g .rv-g-sec > .rv-g-two, body.rv-petrol .rv-g .rv-g-sec > .rv-g-triple, body.rv-petrol .rv-g .rv-g-sec > .rv-g-compare, body.rv-petrol .rv-g .rv-g-sec > .rv-g-spec, body.rv-petrol .rv-g .rv-g-sec > .rv-g-len, body.rv-petrol .rv-g .rv-g-sec > .rv-tablewrap, body.rv-petrol .rv-g .rv-g-sec > table, body.rv-petrol .rv-g .rv-g-sec > figure { max-width: var(--rv-read-wide); margin-inline: auto; } /* The numbered steps list. The LIST is the block that moves onto the column, at prose width rather than wide width, because its rows are sentences. .rv-g-steps__v is NOT given an auto margin. It is the 1fr track of a 54px 1fr grid row and an auto margin would centre it inside its own track, pulling it off the left edge its step number establishes. Its 58ch cap is released instead, so it simply fills its track, and the track is now bound by the 800px list. Same result, no broken edge. -------------------------------------------------------------------------- */ body.rv-petrol .rv-g .rv-g-sec > .rv-g-steps { max-width: var(--rv-read); margin-inline: auto; } body.rv-petrol .rv-g .rv-g-steps__v { max-width: none; } /* -------------------------------------------------------------------------- 14. THE GUIDE HERO header.rv-g-hero is display:grid with justify-items:start, and .rv-g .rv-g-hero__h carries margin: 0 !important at petrol-v12-3 L1189. Both of those fight an auto margin, in different ways, so both are handled. justify-items:start makes every child shrink to its content width. Per the box alignment spec an auto margin absorbs free space BEFORE justify-self is consulted, so margin-inline:auto would in fact win, but it would centre a shrink wrapped box. A four word headline would then start well right of the standfirst under it. Setting the grid to stretch first means each child is as wide as its cap, so the auto margin lands every left edge on one axis. THE ARITHMETIC, because it is not obvious. Section 3 of rv-layout-desktop-7.css bleeds .rv-g-hero by minus one gutter and pads it back by one gutter, so the hero's CONTENT box is exactly as wide as the .rv-g-sec boxes below it and starts at the same x. Identical widths mean an auto margin produces an identical inset, so the hero title, the standfirst and the first paragraph of the guide all land on one line without any viewport measurement. .rv-g-hero__sym is a 46px square. stretch does not widen it, because it has an explicit width, so it gets the one sided inset instead for the same reason .rv-rule does in section 8. -------------------------------------------------------------------------- */ body.rv-petrol .rv-g > .rv-g-hero { justify-items: stretch; } body.rv-petrol .rv-g > .rv-g-hero > * { max-width: var(--rv-read); margin-inline: auto; } body.rv-petrol .rv-g > .rv-g-hero > .rv-g-hero__h { margin-inline: auto !important; } body.rv-petrol .rv-g > .rv-g-hero > .rv-g-hero__sym { margin-inline-start: var(--rv-read-inset); margin-inline-end: auto; } /* -------------------------------------------------------------------------- 15. THE TWO HALVES OF THE PAGE BODY RULE petrol-chrome-34 carries the same idea twice and gets half of it right each time. L1541 caps body.rv-shop-page main .entry-content children at 76ch and gives them no side margin. L1832 gives body.rv-brand-page main .entry-content children margin-inline: auto and no cap, so the auto margin has no free space to distribute and does nothing at all. Neither half works on its own. NEITHER ONE CURRENTLY MATCHES ANYTHING. Checked live. The rv-shop-page body class is on /blog and /my-account, and neither puts a bare paragraph directly inside .entry-content: /blog fills it with .wd-blog-element and /my-account with the WooCommerce account markup. The rv-brand-page class is on /privacy-policy, /guides, /faqs and /about-us, and those wrap their copy in an Elementor container, an .rv-sec or nothing at all. The rule below is written anyway, and deliberately. Both halves exist in a file nobody is going to delete, both will start matching the moment someone writes plain paragraphs into one of those templates, and at that point the page would silently get a 76ch ribbon on the left or a cap that never engages. This gives both templates the same contract as everything else so that cannot happen. -------------------------------------------------------------------------- */ body.rv-petrol.rv-shop-page main .entry-content > p, body.rv-petrol.rv-shop-page main .entry-content > ul, body.rv-petrol.rv-shop-page main .entry-content > ol, body.rv-petrol.rv-shop-page main .entry-content > h2, body.rv-petrol.rv-shop-page main .entry-content > h3, body.rv-petrol.rv-shop-page main .entry-content > h4, body.rv-petrol.rv-shop-page main .entry-content > blockquote, body.rv-petrol.rv-brand-page main .entry-content > p, body.rv-petrol.rv-brand-page main .entry-content > ul, body.rv-petrol.rv-brand-page main .entry-content > ol, body.rv-petrol.rv-brand-page main .entry-content > h2, body.rv-petrol.rv-brand-page main .entry-content > h3, body.rv-petrol.rv-brand-page main .entry-content > h4, body.rv-petrol.rv-brand-page main .entry-content > blockquote { max-width: var(--rv-read); margin-inline: auto; } /* -------------------------------------------------------------------------- 16. LEFT ALONE ON PURPOSE Every one of these is a text block with a measure on it, and every one of them would be made WORSE by an auto margin, so none is given one. They are named here so the next person does not "finish the job" and break them. .rv-cta .rv-lede the 1.4fr track of a two track grid. Its left edge is the grid's left edge and the button row beside it depends on that. .rv-split__body and all bound to a grid track on /about-us. Centring its descendants inside a track breaks the shared edge with the image or panel in the other track. .rv-g-steps__v handled in section 13. Capped, never auto margined. .rv2-forge__body homepage. Sits in a track of the forge grid, which rv-layout-desktop-7.css section 6 already pins to the gutter. An auto margin would undo that. .rv2-knives__body p homepage, same reason. .rv2-engrave__body p homepage, same reason. .rv-team-owner and /our-team. A minmax(220px,380px) 1fr grid. Not on the .rv-prose inside it the audit list, but the same species, so the section 6 rules use a direct child combinator that cannot reach into it. .rv2-myth__lede is on the audit list and is NOT centred here, after checking the live homepage. It sits in section.rv2-myth > div.rv2-wrap > h2.rv2-h2 + p.rv2-myth__lede + div.rv2-myth__grid so it already shares a left edge with the heading above it and with a three column grid below it, both of which are anchored to the wrap. Centring the standfirst alone would float it between two left anchored blocks, which is the ragged result this whole file exists to remove. Its 62ch cap is converted to the fixed column width instead, so it stops widening every time the base font size moves, and it stays on the shared left edge. The homepage, the footer, the header, the product grid, the Elementor canvas on /privacy-policy and every band background are untouched. They still bleed edge to edge exactly as rv-layout-desktop-7.css leaves them. -------------------------------------------------------------------------- */ body.rv-petrol .rv2-myth__lede { max-width: var(--rv-read); } } /* end @media (min-width: 1025px) */