/* ==========================================================================
   Ransack Viking - Forged Petrol
   SITE CHROME v34. Header, navigation, footer, buttons, forms, breadcrumbs,
   pagination, notices, search and 404.

   WHY v3 REPLACES v2
   petrol-chrome-2.css was a rescue patch: 4.5 KB of !important rules whose job
   was to neutralise the dark "Forge" layer. That layer no longer loads, so the
   patch was fighting a ghost. This file designs the chrome instead of undoing
   something, and every value comes from tokens-2.css.

   !important is kept ONLY where Woodmart ships the competing declaration
   inline or in a late part-stylesheet. Each one is deliberate.

   Versioned in the FILENAME - LiteSpeed strips ?ver=. Bump to -4 to publish.
   ========================================================================== */

/* ==========================================================================
   1. PAGE GROUND
   ========================================================================== */

body.rv-petrol {
  background-color: var(--rv-bg);
  color: var(--rv-ink-soft);
  font-family: var(--rv-font-body);
}

body.rv-petrol .site-content,
body.rv-petrol .main-page-wrapper,
body.rv-petrol .wd-page-content { background-color: var(--rv-bg); }

/* The Forge film grain belonged to the dark direction. */
body.rv-petrol::after { display: none !important; }

body.rv-petrol h1, body.rv-petrol h2, body.rv-petrol h3,
body.rv-petrol h4, body.rv-petrol h5, body.rv-petrol h6 { color: var(--rv-ink); }

body.rv-petrol ::selection { background-color: var(--rv-petrol); color: var(--rv-bone); }

body.rv-petrol a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ==========================================================================
   2. HEADER
   ========================================================================== */

body.rv-petrol .whb-header,
body.rv-petrol .whb-main-header,
body.rv-petrol .whb-general-header,
body.rv-petrol .whb-top-bar {
  background-color: var(--rv-petrol) !important;
  border-color: var(--rv-hairline-bone) !important;
}

body.rv-petrol .whb-top-bar {
  border-block-end: 1px solid var(--rv-hairline-bone) !important;
  font-size: var(--rv-text-xs);
  letter-spacing: var(--rv-tracking-label);
  text-transform: uppercase;
}

/* Sticky must not revert to the theme's translucent black. */
body.rv-petrol .whb-sticked .whb-main-header,
body.rv-petrol .whb-sticky-real .whb-main-header {
  background-color: var(--rv-petrol) !important;
  border-block-end: 1px solid var(--rv-hairline-bone) !important;
}

body.rv-petrol .whb-header a,
body.rv-petrol .whb-header .wd-tools-element > a,
body.rv-petrol .whb-header .wd-nav > li > a { color: var(--rv-bone) !important; }

body.rv-petrol .whb-header a:hover,
body.rv-petrol .whb-header .wd-nav > li > a:hover { color: #FFFFFF !important; }

/* --- Primary navigation: an inscriptional label with a drawn underline --- */

body.rv-petrol .whb-header .wd-nav-main > li > a {
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.rv-petrol .whb-header .wd-nav-main > li > a .nav-link-text::after {
  background-color: var(--rv-bone) !important;
  height: 1px !important;
}

body.rv-petrol .whb-header .wd-nav-main > li.current-menu-item > a,
body.rv-petrol .whb-header .wd-nav-main > li.current-menu-ancestor > a { color: #FFFFFF !important; }

/* --- Dropdowns and mega menu: light ground, petrol ink, hairline rules --- */

body.rv-petrol .wd-dropdown,
body.rv-petrol .wd-dropdown-menu,
body.rv-petrol .wd-dropdown-results {
  background-color: var(--rv-bg) !important;
  border: 1px solid var(--rv-hairline) !important;
  border-radius: var(--rv-radius-md) !important;
  box-shadow: none !important;
}

body.rv-petrol .wd-dropdown a,
body.rv-petrol .wd-dropdown-menu a { color: var(--rv-ink) !important; }
body.rv-petrol .wd-dropdown a:hover,
body.rv-petrol .wd-dropdown-menu a:hover { color: var(--rv-petrol) !important; }

body.rv-petrol .wd-dropdown-menu .wd-nav-vertical > li > a,
body.rv-petrol .wd-dropdown .wd-sub-menu > li > a {
  font-family: var(--rv-font-body);
  font-size: var(--rv-text-sm);
}

/* Mega-menu column headings read as carved, not as another link. */
body.rv-petrol .wd-dropdown-menu .menu-item-has-children > a,
body.rv-petrol .wd-mega-menu .wd-sub-menu > li.menu-item-has-children > a {
  font-family: var(--rv-font-display) !important;
  font-weight: 600;
  letter-spacing: var(--rv-tracking-display);
  color: var(--rv-ink) !important;
  border-block-end: 1px solid var(--rv-hairline);
  padding-block-end: var(--rv-space-xs);
  margin-block-end: var(--rv-space-xs);
}

/* --- Header tools --- */

body.rv-petrol .wd-tools-count,
body.rv-petrol .wd-cart-number {
  background-color: var(--rv-bone) !important;
  color: var(--rv-petrol) !important;
  font-family: var(--rv-font-heading);
  font-weight: 600;
}

body.rv-petrol .whb-header .wd-header-search-form input[type="text"],
body.rv-petrol .whb-header .searchform input[type="text"] {
  background-color: rgba(237, 234, 226, 0.10) !important;
  border: 1px solid var(--rv-hairline-bone) !important;
  border-radius: var(--rv-radius-sm) !important;
  color: var(--rv-bone) !important;
}
body.rv-petrol .whb-header .searchform input::placeholder { color: var(--rv-bone-muted) !important; }
body.rv-petrol .whb-header .searchform input:focus {
  border-color: var(--rv-bone) !important;
  outline: none;
}

/* Mobile drawer sits on light ground so the catalogue is legible. */
body.rv-petrol .wd-side-hidden { background-color: var(--rv-bg); }
body.rv-petrol .wd-side-hidden .wd-nav-mobile > li > a { color: var(--rv-ink); font-family: var(--rv-font-heading); font-weight: 600; }

/* ==========================================================================
   3. BREADCRUMBS
   ========================================================================== */

body.rv-petrol .wd-breadcrumbs,
body.rv-petrol .woocommerce-breadcrumb,
body.rv-petrol .yoast-breadcrumb {
  font-family: var(--rv-font-heading);
  font-size: var(--rv-text-xs);
  letter-spacing: var(--rv-tracking-label);
  text-transform: uppercase;
  color: var(--rv-ink-muted);
}
body.rv-petrol .woocommerce-breadcrumb a,
body.rv-petrol .yoast-breadcrumb a { color: var(--rv-ink-muted); }
body.rv-petrol .woocommerce-breadcrumb a:hover,
body.rv-petrol .yoast-breadcrumb a:hover { color: var(--rv-petrol); }

/* On a petrol hero the breadcrumb inverts. */
body.rv-petrol .rv-sec--petrol .woocommerce-breadcrumb,
body.rv-petrol .rv-sec--petrol .woocommerce-breadcrumb a,
body.rv-petrol .rv-sec--figure .woocommerce-breadcrumb,
body.rv-petrol .rv-sec--figure .woocommerce-breadcrumb a { color: var(--rv-bone-muted); }

/* ==========================================================================
   4. BUTTONS (sitewide, including WooCommerce and Elementor)
   ========================================================================== */

body.rv-petrol .btn,
body.rv-petrol button.button,
body.rv-petrol a.button,
body.rv-petrol input[type="submit"],
body.rv-petrol .elementor-button,
body.rv-petrol .single_add_to_cart_button,
body.rv-petrol .wd-buy-now-btn,
body.rv-petrol .checkout-button,
body.rv-petrol .wc-block-components-button {
  background-color: var(--rv-petrol) !important;
  color: var(--rv-bone) !important;
  border: 1px solid var(--rv-petrol) !important;
  border-radius: var(--rv-radius-md) !important;
  font-family: var(--rv-font-heading) !important;
  font-weight: 600 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: none !important;
  transition: opacity var(--rv-duration-fast) var(--rv-ease),
              transform var(--rv-duration-fast) var(--rv-ease);
}

body.rv-petrol .btn:hover,
body.rv-petrol button.button:hover,
body.rv-petrol a.button:hover,
body.rv-petrol .elementor-button:hover,
body.rv-petrol .single_add_to_cart_button:hover,
body.rv-petrol .checkout-button:hover { opacity: 0.9; color: var(--rv-bone) !important; }

body.rv-petrol .btn:active,
body.rv-petrol button.button:active,
body.rv-petrol .single_add_to_cart_button:active { transform: translateY(1px); }

/* Secondary / outline variants keep the same radius and tracking. */
body.rv-petrol .btn-style-bordered,
body.rv-petrol .button.alt-outline,
body.rv-petrol .wd-buy-now-btn.btn-style-bordered {
  background-color: transparent !important;
  color: var(--rv-petrol) !important;
  border-color: var(--rv-hairline-strong) !important;
}

body.rv-petrol :focus-visible { outline: 2px solid var(--rv-petrol); outline-offset: 3px; }

/* ==========================================================================
   5. FORM FIELDS (5px radius, petrol focus)
   ========================================================================== */

body.rv-petrol input[type="text"],
body.rv-petrol input[type="email"],
body.rv-petrol input[type="tel"],
body.rv-petrol input[type="number"],
body.rv-petrol input[type="password"],
body.rv-petrol input[type="search"],
body.rv-petrol textarea,
body.rv-petrol select,
body.rv-petrol .wc-block-components-text-input input {
  background-color: var(--rv-bg);
  border: 1px solid var(--rv-hairline-strong);
  border-radius: var(--rv-radius-sm);
  color: var(--rv-ink);
  font-family: var(--rv-font-body);
  font-size: var(--rv-text-base);
  box-shadow: none;
}

body.rv-petrol input::placeholder,
body.rv-petrol textarea::placeholder { color: var(--rv-ink-muted); opacity: 1; }

body.rv-petrol input:focus,
body.rv-petrol textarea:focus,
body.rv-petrol select:focus {
  border-color: var(--rv-petrol);
  outline: 2px solid rgba(6, 41, 48, 0.18);
  outline-offset: 0;
}

body.rv-petrol label { color: var(--rv-ink); font-family: var(--rv-font-heading); font-weight: 600; font-size: var(--rv-text-sm); }

/* Inline validation, not a popup. */
body.rv-petrol .wpcf7-not-valid-tip,
body.rv-petrol .woocommerce-error li { color: var(--rv-error); font-size: var(--rv-text-sm); }
body.rv-petrol .wpcf7-not-valid { border-color: var(--rv-error); }

/* ==========================================================================
   6. NOTICES
   ========================================================================== */

body.rv-petrol .woocommerce-message,
body.rv-petrol .woocommerce-info,
body.rv-petrol .woocommerce-error {
  background-color: var(--rv-surface);
  border: 0;
  border-inline-start: 3px solid var(--rv-petrol);
  border-radius: var(--rv-radius-md);
  color: var(--rv-ink);
  font-family: var(--rv-font-body);
}
body.rv-petrol .woocommerce-error { border-inline-start-color: var(--rv-error); }

/* ==========================================================================
   7. PRICES, RATINGS, PRODUCT CARDS
   ========================================================================== */

body.rv-petrol .price,
body.rv-petrol .woocommerce-Price-amount.amount {
  color: var(--rv-petrol) !important;
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

body.rv-petrol .star-rating span::before,
body.rv-petrol .star-rating::before { color: var(--rv-petrol) !important; }

body.rv-petrol .wd-product.product-grid-item {
  background-color: var(--rv-bg) !important;
  border: 1px solid var(--rv-hairline) !important;
  border-radius: var(--rv-radius-md);
}
body.rv-petrol .wd-product .wd-entities-title,
body.rv-petrol .wd-product .wd-entities-title a {
  color: var(--rv-ink) !important;
  font-family: var(--rv-font-heading);
  font-weight: 600;
}

/* ==========================================================================
   8. PAGINATION
   ========================================================================== */

body.rv-petrol .page-numbers li a,
body.rv-petrol .page-numbers li span {
  border-radius: var(--rv-radius-sm);
  font-family: var(--rv-font-heading);
  font-weight: 600;
  color: var(--rv-ink);
}
body.rv-petrol .page-numbers li .current,
body.rv-petrol .page-numbers li a:hover {
  background-color: var(--rv-petrol);
  color: var(--rv-bone);
}

/* ==========================================================================
   9. FOOTER
   ========================================================================== */

body.rv-petrol .footer-container,
body.rv-petrol footer.footer-container,
body.rv-petrol .wd-footer {
  position: relative;
  background-color: var(--rv-petrol) !important;
  color: var(--rv-bone-muted) !important;
  border-top: 0 !important;
}

body.rv-petrol .footer-container a,
body.rv-petrol .footer-container .widget-title,
body.rv-petrol .footer-container h2,
body.rv-petrol .footer-container h3,
body.rv-petrol .footer-container h5 { color: var(--rv-bone) !important; }

body.rv-petrol .footer-container a:hover { color: #FFFFFF !important; }

body.rv-petrol .footer-container .widget-title,
body.rv-petrol .footer-container h5 {
  font-family: var(--rv-font-display) !important;
  font-weight: 600;
  letter-spacing: var(--rv-tracking-display);
  font-size: var(--rv-text-base) !important;
}

/* A hairline above each footer column instead of a boxed widget. */
body.rv-petrol .footer-container .wd-widget,
body.rv-petrol .footer-container .widget { border-block-start: 1px solid var(--rv-hairline-bone); padding-block-start: var(--rv-space-md); }

body.rv-petrol .copyrights-wrapper {
  background-color: var(--rv-petrol) !important;
  border-top: 1px solid var(--rv-hairline-bone) !important;
  color: var(--rv-bone-muted) !important;
  font-size: var(--rv-text-sm);
}

body.rv-petrol .footer-container input[type="email"],
body.rv-petrol .footer-container input[type="text"] {
  background-color: rgba(237, 234, 226, 0.08) !important;
  border: 1px solid var(--rv-hairline-bone-strong) !important;
  border-radius: var(--rv-radius-sm) !important;
  color: var(--rv-bone) !important;
}
body.rv-petrol .footer-container input::placeholder { color: var(--rv-bone-muted) !important; }

body.rv-petrol .footer-container .btn,
body.rv-petrol .footer-container button.button,
body.rv-petrol .footer-container input[type="submit"],
body.rv-petrol .footer-container .elementor-button {
  background-color: var(--rv-bone) !important;
  color: var(--rv-petrol) !important;
  border-color: var(--rv-bone) !important;
}

/* ==========================================================================
   10. SEARCH RESULTS AND 404 (markup injected by the RV chrome snippet)
   ========================================================================== */

body.rv-petrol.search .wd-content-area > .page-header,
body.rv-petrol.error404 .wd-content-area > .page-header,
body.rv-petrol.error404 .wd-content-area > .page-content { display: none; }

body.rv-petrol .rv-notfound__code {
  font-family: var(--rv-font-display);
  font-weight: 600;
  font-size: clamp(76px, 16vw, 190px);
  line-height: 0.9;
  color: var(--rv-bone);
  opacity: 0.16;
  margin: 0 0 calc(-1 * var(--rv-space-lg));
  letter-spacing: 0.02em;
}

body.rv-petrol .rv-searchform {
  display: flex;
  gap: var(--rv-space-xs);
  max-width: 520px;
  margin-block-start: var(--rv-space-lg);
}
body.rv-petrol .rv-searchform input[type="search"] { flex: 1 1 auto; }

body.rv-petrol .rv-sec--petrol .rv-searchform input[type="search"] {
  background-color: rgba(237, 234, 226, 0.08);
  border-color: var(--rv-hairline-bone-strong);
  color: var(--rv-bone);
}
body.rv-petrol .rv-sec--petrol .rv-searchform input::placeholder { color: var(--rv-bone-muted); }

/* ==========================================================================
   11. WOODMART PAGE TITLE SUPPRESSION HELPER
   woodmart_page_title() is a function, not a filter, so it cannot be unhooked.
   Pages that ship their own designed hero add this class via body_class.
   ========================================================================== */

body.rv-no-page-title .page-title,
body.rv-no-page-title .wd-page-title,
body.rv-no-page-title .title-size-default { display: none !important; }


/* ==========================================================================
   12. SINGLE PRODUCT PAGE - alignment and breathing room

   The product template renders flush against the header with no top space, and
   its content area carries no horizontal padding of its own, so the gallery and
   buy column sat hard against the viewport edge on narrower desktops.
   ========================================================================== */

body.rv-petrol.single-product .main-page-wrapper { padding-block-start: var(--rv-space-lg); }

body.rv-petrol.single-product .wd-content-layout.container {
  max-width: var(--rv-container);
  margin-inline: auto;
  padding-inline: var(--rv-gutter);
}

body.rv-petrol.single-product .wd-content-area { width: 100%; margin-inline: auto; }

body.rv-petrol.single-product .product-image-summary-inner { gap: var(--rv-space-xl); }

body.rv-petrol.single-product .summary-inner > * + * { margin-block-start: var(--rv-space-sm); }

body.rv-petrol.single-product .rv-p-trust,
body.rv-petrol.single-product .rv-p-spec,
body.rv-petrol.single-product .rv-p-guides { margin-block-start: var(--rv-space-lg); }

@media (max-width: 1024px) {
  body.rv-petrol.single-product .product-image-summary-inner { gap: var(--rv-space-lg); }
}

@media (max-width: 767px) {
  body.rv-petrol.single-product .main-page-wrapper { padding-block-start: var(--rv-space-md); }
}


/* ==========================================================================
   13. FOOTER SEARCH

   Sits under the brand column so the four-column grid keeps its shape. The
   field is a translucent bone wash rather than white: a white input on a petrol
   ground reads as a hole punched in the footer.
   ========================================================================== */

body.rv-petrol .rv2-foot__search { margin-block-start: var(--rv-space-md); max-width: 320px; }

body.rv-petrol .rv2-foot__search-label {
  display: block;
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-xs);
  letter-spacing: var(--rv-tracking-label);
  text-transform: uppercase;
  color: var(--rv-bone-muted);
  margin-block-end: var(--rv-space-xs);
}

body.rv-petrol .rv2-foot__search-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

body.rv-petrol .rv2-foot__search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 14px;
  background-color: rgba(237, 234, 226, 0.08);
  border: 1px solid var(--rv-hairline-bone-strong);
  border-radius: var(--rv-radius-sm);
  color: var(--rv-bone);
  font-family: var(--rv-font-body);
  font-size: var(--rv-text-sm);
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
}

body.rv-petrol .rv2-foot__search input[type="search"]::placeholder { color: var(--rv-bone-muted); opacity: 1; }

body.rv-petrol .rv2-foot__search input[type="search"]::-webkit-search-cancel-button { filter: invert(1); opacity: 0.5; }

body.rv-petrol .rv2-foot__search input[type="search"]:focus {
  border-color: var(--rv-bone);
  outline: 2px solid rgba(237, 234, 226, 0.25);
  outline-offset: 0;
}

body.rv-petrol .rv2-foot__search button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  padding: 0;
  background-color: var(--rv-bone);
  color: var(--rv-petrol);
  border: 1px solid var(--rv-bone);
  border-radius: var(--rv-radius-sm);
  cursor: pointer;
  transition: opacity var(--rv-duration-fast) var(--rv-ease);
}

body.rv-petrol .rv2-foot__search button:hover { opacity: 0.88; }
body.rv-petrol .rv2-foot__search button:active { transform: translateY(1px); }

body.rv-petrol .rv2-foot__search button:focus-visible {
  outline: 2px solid var(--rv-bone);
  outline-offset: 3px;
}

body.rv-petrol .rv2-foot__search button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

@media (max-width: 767px) {
  body.rv-petrol .rv2-foot__search { max-width: none; }
}


/* ==========================================================================
   14. FOOTER SHELL

   .rv2-wrap resolves its width from --shell, which petrol-v11-1.css declares
   on the homepage's .rv2 wrapper. Once the footer became sitewide it rendered
   outside that wrapper, --shell was undefined, `width: var(--shell)` dropped
   out, and the footer fell back to auto width - spreading edge to edge and
   reading as left-aligned on every page except the homepage.

   The markup now carries .rv2 so the homepage's own footer rules still apply,
   and --shell is redeclared here so the footer never depends on an ancestor.
   ========================================================================== */

body.rv-petrol .rv2-foot {
  --shell: min(1320px, 100% - 64px);
}

body.rv-petrol .rv2-foot .rv2-wrap {
  width: 100%;
  max-width: var(--rv-container);
  padding-inline: var(--rv-gutter);
  margin-inline: auto;
}

@media (max-width: 767px) {
  body.rv-petrol .rv2-foot { --shell: calc(100% - 36px); }
}


/* ==========================================================================
   15. PAGE TITLE BLOCK

   Woodmart's title bar is configured with a light colour scheme over a washed
   background, which left the page name as dark grey type on pale teal - a
   contrast failure on the largest heading of the page. It becomes a petrol
   band with bone type, matching the heroes and the footer.
   ========================================================================== */

body.rv-petrol .page-title,
body.rv-petrol .wd-page-title {
  background-color: var(--rv-petrol) !important;
  background-image: none !important;
  border: 0 !important;
  padding-block: var(--rv-space-xl);
}

body.rv-petrol .page-title .entry-title,
body.rv-petrol .page-title h1,
body.rv-petrol .wd-page-title h1 {
  color: var(--rv-bone) !important;
  font-family: var(--rv-font-display);
  font-weight: 600;
  letter-spacing: var(--rv-tracking-display);
  line-height: var(--rv-leading-display);
}

body.rv-petrol .page-title .woocommerce-breadcrumb,
body.rv-petrol .page-title .woocommerce-breadcrumb a,
body.rv-petrol .page-title .yoast-breadcrumb,
body.rv-petrol .page-title .yoast-breadcrumb a { color: var(--rv-bone-muted) !important; }

body.rv-petrol .page-title .woocommerce-breadcrumb a:hover,
body.rv-petrol .page-title .yoast-breadcrumb a:hover { color: var(--rv-bone) !important; }


/* ==========================================================================
   16. SEAM BETWEEN THE LAST SECTION AND THE FOOTER

   <main> carries 40px of bottom padding on a white ground. Where a page ends
   on a full-bleed petrol band - the homepage, and every archive that closes
   with the engraving band - that padding showed as a white stripe wedged
   between two dark blocks.

   Only removed where the closing block is actually dark; pages that end on
   light content still need the space before the footer.
   ========================================================================== */

body.rv-petrol.home main.wd-content-layout { padding-block-end: 0; }

body.rv-petrol main.wd-content-layout:has(> .rv-sec--petrol:last-child),
body.rv-petrol main.wd-content-layout:has(> .rv-sec--figure:last-child) {
  padding-block-end: 0;
}


/* Footer postal address. Sits under the contact links as quiet supporting
   text - it is a trust signal, not a call to action, so it must not compete
   with the phone number and email above it. <address> is italic by default. */
body.rv-petrol .rv2-foot__addr {
  display: block;
  margin-block-start: var(--rv-space-sm);
  font-family: var(--rv-font-body);
  font-style: normal;
  font-size: var(--rv-text-sm);
  line-height: 1.6;
  color: var(--rv-bone-muted);
}


/* ==========================================================================
   17. PAGE WIDTH

   The site ran at 1320px. On a 1900px screen that left roughly 290px of dead
   margin down each side, so the store read as a narrow column floating in grey.
   Woodmart's site width is now 1660px; these rules bring everything that does
   NOT read that option to the same edges, so header, hero, product grid,
   closing sections and footer all start and end on the same line.
   ========================================================================== */

/* The homepage build sets its own --shell on .rv2. Left at 1280 it would now
   be narrower than its own header and footer. */
body.rv-petrol .rv2 { --shell: min(1860px, 100% - 40px); }

body.rv-petrol .rv2-foot { --shell: min(1860px, 100% - 40px); }

/* The guides pages compute their bleed padding from a hardcoded 560px half
   measure, which would leave them inset against everything else. */
body.rv-petrol .rv-g-hero,
body.rv-petrol .rv-g-sec--dark,
body.rv-petrol .rv-g-sec--tint { padding-inline: max(24px, calc(50vw - 830px)); }

@media (max-width: 1023px) {
  body.rv-petrol .rv2,
  body.rv-petrol .rv2-foot { --shell: calc(100% - 40px); }
}


/* ==========================================================================
   18. FAQ PAGE

   The page came from the Woodmart demo import. Its hero container still held
   the demo photograph of an iPad, an iPhone and watch straps, a generic
   "Questions & Answers" heading and a sentence that stopped mid-air. It is
   hidden here and replaced by a petrol hero rendered before <main>.

   .elementor-element-1b40ec4 is that container's stable Elementor id.
   ========================================================================== */

body.rv-faq-page .elementor-element-1b40ec4 { display: none !important; }

/* Section headings on this page are h4 widgets, not our own markup. */
body.rv-faq-page .woodmart-title-container.title {
  font-family: var(--rv-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: var(--rv-tracking-display);
  color: var(--rv-ink) !important;
  border-block-end: 1px solid var(--rv-hairline);
  padding-block-end: var(--rv-space-sm);
  margin-block-end: var(--rv-space-md);
}

/* Each Elementor text block becomes one accordion row. */
body.rv-faq-page .wd-text-block.is-rv-faq { margin-block: 0; }

body.rv-faq-page .rv-faq__item {
  border-block-end: 1px solid var(--rv-hairline);
  border-block-start: 0;
}

body.rv-faq-page .rv-faq__q {
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-base);
  color: var(--rv-ink);
  padding-block: var(--rv-space-md);
}

body.rv-faq-page .rv-faq__q:hover { color: var(--rv-petrol); }

body.rv-faq-page .rv-faq__a p { margin: 0 0 var(--rv-space-sm); color: var(--rv-ink-soft); }
body.rv-faq-page .rv-faq__a p:last-child { margin-block-end: 0; }

/* The demo layout left a tall empty band above the footer. */
body.rv-faq-page main.wd-content-layout { padding-block-end: 0; }
body.rv-faq-page .elementor > .e-con:last-child:empty { display: none; }


/* ==========================================================================
   19. STICKY BUY BAR (single product)

   Slides up from the bottom once the real add-to-cart form scrolls away. Petrol
   ground with a bone button so it reads as part of the site rather than a
   bolted-on widget, and a hairline above it so it separates from page content
   without a shadow.

   Woodmart already puts a bottom toolbar on mobile; the bar sits above it.
   ========================================================================== */

body.rv-petrol .rv-buybar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--rv-z-sticky);
  background-color: var(--rv-petrol);
  border-block-start: 1px solid var(--rv-hairline-bone);
  transform: translateY(101%);
  transition: transform var(--rv-duration-base) var(--rv-ease-out);
  will-change: transform;
}

body.rv-petrol .rv-buybar.is-in { transform: translateY(0); }

body.rv-petrol .rv-buybar__inner {
  display: flex;
  align-items: center;
  gap: var(--rv-space-md);
  width: 100%;
  max-width: var(--rv-container);
  margin-inline: auto;
  padding: 12px var(--rv-gutter);
}

body.rv-petrol .rv-buybar__fig {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: var(--rv-radius-sm);
  overflow: hidden;
  background-color: var(--rv-petrol-deep);
}

body.rv-petrol .rv-buybar__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }

body.rv-petrol .rv-buybar__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.rv-petrol .rv-buybar__title {
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-sm);
  color: var(--rv-bone);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.rv-petrol .rv-buybar__price,
body.rv-petrol .rv-buybar__price .amount,
body.rv-petrol .rv-buybar__price .woocommerce-Price-amount {
  color: var(--rv-bone) !important;
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-base);
  font-variant-numeric: tabular-nums;
}

body.rv-petrol .rv-buybar__price del { opacity: 0.55; font-weight: 400; }
body.rv-petrol .rv-buybar__price del .amount { color: var(--rv-bone-muted) !important; }

body.rv-petrol .rv-buybar__btn {
  flex: 0 0 auto;
  padding: 14px 30px;
  background-color: var(--rv-bone);
  color: var(--rv-petrol);
  border: 1px solid var(--rv-bone);
  border-radius: var(--rv-radius-md);
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-sm);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--rv-duration-fast) var(--rv-ease);
}

body.rv-petrol .rv-buybar__btn:hover { opacity: 0.9; }
body.rv-petrol .rv-buybar__btn:active { transform: translateY(1px); }
body.rv-petrol .rv-buybar__btn:focus-visible { outline: 2px solid var(--rv-bone); outline-offset: 3px; }

@media (max-width: 767px) {
  /* Clear Woodmart's own bottom toolbar so the two never overlap. */
  body.rv-petrol.sticky-toolbar-on .rv-buybar { inset-block-end: var(--wd-bottom-toolbar-h, 50px); }
  body.rv-petrol .rv-buybar__fig { display: none; }
  body.rv-petrol .rv-buybar__inner { gap: var(--rv-space-sm); padding: 10px var(--rv-gutter); }
  body.rv-petrol .rv-buybar__btn { padding: 13px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  body.rv-petrol .rv-buybar { transition: none; }
}


/* ==========================================================================
   20. ENGRAVING NOTE (under the buy button)

   A hairline note, not a second button: it sits directly below Add to Cart and
   must not compete with it for the click.
   ========================================================================== */

body.rv-petrol .rv-p-engrave {
  display: flex;
  align-items: flex-start;
  gap: var(--rv-space-xs);
  margin-block: var(--rv-space-md) 0;
  padding-block-start: var(--rv-space-md);
  border-block-start: 1px solid var(--rv-hairline);
  font-size: var(--rv-text-sm);
  line-height: 1.6;
  color: var(--rv-ink-muted);
}

body.rv-petrol .rv-p-engrave__sym {
  flex: 0 0 auto;
  width: 34px;
  height: 16px;
  margin-block-start: 3px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  color: var(--rv-ink-muted);
  opacity: 0.6;
}

body.rv-petrol .rv-p-engrave a {
  color: var(--rv-petrol);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.rv-petrol .rv-p-engrave a:hover { text-decoration-thickness: 2px; }


/* ==========================================================================
   21. TRUST STRIP, REVIEW PROOF AND BUNDLE
   ========================================================================== */


/* --- Four-point trust strip under the buy button --- */

body.rv-petrol .rv-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rv-space-md);
  list-style: none;
  margin: var(--rv-space-md) 0 0;
  padding: var(--rv-space-md) 0 0;
  border-block-start: 1px solid var(--rv-hairline);
}

body.rv-petrol .rv-trust__i {
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--rv-space-xs);
  align-items: start;
}

body.rv-petrol .rv-trust__ico {
  grid-row: 1 / 3;
  width: 20px;
  height: 20px;
  margin-block-start: 1px;
  color: var(--rv-petrol);
}

body.rv-petrol .rv-trust__t {
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-sm);
  color: var(--rv-ink);
  line-height: 1.3;
}

body.rv-petrol .rv-trust__n {
  font-size: var(--rv-text-xs);
  color: var(--rv-ink-muted);
  line-height: 1.4;
}

@media (max-width: 480px) {
  body.rv-petrol .rv-trust { grid-template-columns: 1fr; gap: var(--rv-space-sm); }
}


/* --- Store-wide review proof, beside the price --- */

body.rv-petrol .rv-proof {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--rv-space-sm);
  font-size: var(--rv-text-sm);
  color: var(--rv-ink-muted);
}

body.rv-petrol .rv-proof__star { color: var(--rv-hairline-strong); font-size: 15px; line-height: 1; }
body.rv-petrol .rv-proof__star.is-on { color: var(--rv-petrol); }
body.rv-petrol .rv-proof__txt { margin-inline-start: 4px; }
body.rv-petrol .rv-proof__txt strong { color: var(--rv-ink); font-weight: 600; }


/* --- Buy these together --- */

body.rv-petrol .rv-bundle__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--rv-space-md);
}

body.rv-petrol .rv-bundle__item {
  flex: 1 1 200px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.rv-petrol .rv-bundle__plus {
  align-self: center;
  font-family: var(--rv-font-heading);
  font-size: var(--rv-text-2xl);
  color: var(--rv-ink-muted);
  line-height: 1;
}

body.rv-petrol .rv-bundle__fig {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--rv-radius-md);
  background-color: var(--rv-bg);
  border: 1px solid var(--rv-hairline);
}

body.rv-petrol .rv-bundle__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }

body.rv-petrol .rv-bundle__name {
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-sm);
  line-height: 1.35;
  color: var(--rv-ink);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.rv-petrol .rv-bundle__name:hover { color: var(--rv-petrol); }

body.rv-petrol .rv-bundle__price,
body.rv-petrol .rv-bundle__price .amount {
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-sm);
  color: var(--rv-petrol) !important;
  font-variant-numeric: tabular-nums;
}

body.rv-petrol .rv-bundle__tag {
  font-size: var(--rv-text-xs);
  letter-spacing: var(--rv-tracking-label);
  text-transform: uppercase;
  color: var(--rv-ink-muted);
}

body.rv-petrol .rv-bundle__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rv-space-md);
  margin-block-start: var(--rv-space-lg);
  padding-block-start: var(--rv-space-md);
  border-block-start: 1px solid var(--rv-hairline);
}

body.rv-petrol .rv-bundle__total {
  font-size: var(--rv-text-base);
  color: var(--rv-ink-soft);
}

body.rv-petrol .rv-bundle__total strong,
body.rv-petrol .rv-bundle__total .amount {
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-xl);
  color: var(--rv-ink) !important;
  font-variant-numeric: tabular-nums;
  margin-inline-start: 6px;
}

body.rv-petrol .rv-bundle__add { border: 0; cursor: pointer; }
body.rv-petrol .rv-bundle__add[disabled] { opacity: 0.6; cursor: default; }

@media (max-width: 640px) {
  body.rv-petrol .rv-bundle__plus { display: none; }
  body.rv-petrol .rv-bundle__item { flex-basis: calc(50% - var(--rv-space-md)); }
}


/* ==========================================================================
   22. PERSONALISATION, TIP AND CREST
   ========================================================================== */

/* --- Shared panel shell --- */
body.rv-petrol .rv-pers,
body.rv-petrol .rv-tip,
body.rv-petrol .rv-crest {
  background-color: var(--rv-surface);
  border: 1px solid var(--rv-hairline);
  border-radius: var(--rv-radius-md);
  padding: var(--rv-space-md);
  margin-block: var(--rv-space-md);
}

body.rv-petrol .rv-pers__head,
body.rv-petrol .rv-tip__head,
body.rv-petrol .rv-crest__head {
  display: flex;
  align-items: flex-start;
  gap: var(--rv-space-sm);
  margin-block-end: var(--rv-space-md);
}

body.rv-petrol .rv-pers__sym { width: 34px; height: 16px; margin-block-start: 4px; }
body.rv-petrol .rv-tip__sym,
body.rv-petrol .rv-crest__sym { width: 28px; height: 28px; flex: 0 0 auto; }
body.rv-petrol .rv-pers__sym,
body.rv-petrol .rv-tip__sym,
body.rv-petrol .rv-crest__sym { fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--rv-accent); }

body.rv-petrol .rv-pers__h,
body.rv-petrol .rv-tip__h,
body.rv-petrol .rv-crest__h {
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-base);
  letter-spacing: var(--rv-tracking-label);
  text-transform: uppercase;
  color: var(--rv-ink);
  margin: 0;
}

body.rv-petrol .rv-tip__sub,
body.rv-petrol .rv-crest__sub,
body.rv-petrol .rv-pers__note,
body.rv-petrol .rv-crest__note {
  margin: 4px 0 0;
  font-size: var(--rv-text-sm);
  color: var(--rv-ink-muted);
  line-height: 1.5;
}

/* --- Segmented controls (engraving mode + tip amount) --- */
body.rv-petrol .rv-pers__tabs,
body.rv-petrol .rv-tip__opts { display: flex; flex-wrap: wrap; gap: 8px; }

body.rv-petrol .rv-pers__tab,
body.rv-petrol .rv-tip__opt {
  padding: 10px 18px;
  background-color: var(--rv-bg);
  color: var(--rv-ink);
  border: 1px solid var(--rv-hairline-strong);
  border-radius: var(--rv-radius-sm);
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-sm);
  cursor: pointer;
  transition: background-color var(--rv-duration-fast) var(--rv-ease),
              color var(--rv-duration-fast) var(--rv-ease);
}

body.rv-petrol .rv-pers__tab.is-on,
body.rv-petrol .rv-tip__opt.is-on {
  background-color: var(--rv-petrol);
  color: var(--rv-bone);
  border-color: var(--rv-petrol);
}

body.rv-petrol .rv-tip__opt .amount { color: inherit !important; }

body.rv-petrol .rv-pers__tab:focus-visible,
body.rv-petrol .rv-tip__opt:focus-visible { outline: 2px solid var(--rv-petrol); outline-offset: 2px; }

/* --- Fields --- */
body.rv-petrol .rv-pers__panel { margin-block-start: var(--rv-space-md); }
body.rv-petrol .rv-pers__panel[hidden] { display: none; }

body.rv-petrol .rv-pers__panel label,
body.rv-petrol .rv-crest label {
  display: block;
  margin-block-end: 6px;
  font-size: var(--rv-text-sm);
  font-weight: 600;
  color: var(--rv-ink);
}

body.rv-petrol .rv-pers__panel input[type="text"],
body.rv-petrol .rv-pers__panel textarea { width: 100%; }

body.rv-petrol .rv-pers__count {
  display: block;
  margin-block-start: 4px;
  font-size: var(--rv-text-xs);
  color: var(--rv-ink-muted);
  text-align: end;
}

/* --- Runic preview. Needs a runic font or it renders as empty boxes. --- */
body.rv-petrol .rv-pers__runes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-block-start: var(--rv-space-sm);
  padding: var(--rv-space-sm) var(--rv-space-md);
  background-color: var(--rv-petrol);
  border-radius: var(--rv-radius-sm);
}

body.rv-petrol .rv-pers__runes-label {
  font-size: var(--rv-text-xs);
  letter-spacing: var(--rv-tracking-label);
  text-transform: uppercase;
  color: var(--rv-bone-muted);
}

body.rv-petrol .rv-pers__runes-out,
body.rv-petrol .rv-runic-face {
  font-family: "Noto Sans Runic", "Segoe UI Historic", "Segoe UI Symbol", serif;
  font-size: 28px;
  line-height: 1.4;
  letter-spacing: 4px;
  color: var(--rv-bone);
  word-break: break-word;
}

body.rv-petrol .rv-runic-face { color: var(--rv-ink); font-size: 20px; }

/* --- Crest checkbox --- */
body.rv-petrol .rv-pers__crest {
  display: flex;
  align-items: flex-start;
  gap: var(--rv-space-xs);
  margin-block-start: var(--rv-space-md);
  padding-block-start: var(--rv-space-md);
  border-block-start: 1px solid var(--rv-hairline);
  font-size: var(--rv-text-sm);
  font-weight: 400;
  color: var(--rv-ink-soft);
  cursor: pointer;
}

body.rv-petrol .rv-pers__crest input { margin-block-start: 3px; flex: 0 0 auto; }

/* --- Tip custom amount --- */
body.rv-petrol .rv-tip__custom {
  display: flex;
  gap: 8px;
  margin-block-start: var(--rv-space-sm);
  max-width: 320px;
}
body.rv-petrol .rv-tip__custom[hidden] { display: none; }
body.rv-petrol .rv-tip__custom input { flex: 1 1 auto; min-width: 0; }

/* The tip box sits inside the totals table on cart and checkout. */
body.rv-petrol .cart_totals .rv-tip,
body.rv-petrol #order_review .rv-tip { margin-block: var(--rv-space-md); }

/* --- Crest upload at checkout --- */
body.rv-petrol .rv-crest input[type="file"] {
  width: 100%;
  padding: var(--rv-space-sm);
  background-color: var(--rv-bg);
  border: 1px dashed var(--rv-hairline-strong);
  border-radius: var(--rv-radius-sm);
  font-size: var(--rv-text-sm);
  color: var(--rv-ink-soft);
}

body.rv-petrol .rv-crest input[type="file"]:focus { border-color: var(--rv-petrol); outline: none; }


/* Engraving and crest prices, shown on the control the customer is choosing.
   The fee reads as supporting information, not as the label itself. */
body.rv-petrol .rv-pers__fee { font-weight: 400; opacity: 0.75; font-size: var(--rv-text-xs); }
body.rv-petrol .rv-pers__tab.is-on .rv-pers__fee { opacity: 0.85; }
body.rv-petrol .rv-pers__crest small { display: block; margin-block-start: 2px; color: var(--rv-ink-muted); }
body.rv-petrol .rv-pers__pricing {
  margin: var(--rv-space-sm) 0 0;
  font-size: var(--rv-text-xs);
  color: var(--rv-ink-muted);
}


/* ==========================================================================
   23. PROOF / TRUST / BUNDLE - the three classes the markup needed

   The stylesheet already carried rv-proof, rv-trust and rv-bundle from the
   first version of the snippet, but the markup had drifted to rv-badges and
   rv-fbt, so none of it matched and all three blocks rendered unstyled. The
   markup is now aligned to these names; these are the few wrappers the old CSS
   never had.
   ========================================================================== */

body.rv-petrol .rv-proof__txt-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--rv-space-sm);
  width: 100%;
  max-width: var(--rv-container);
  margin-inline: auto;
  padding: 9px var(--rv-gutter);
}

body.rv-petrol .rv-proof__sep {
  width: 1px;
  height: 14px;
  background-color: var(--rv-hairline-bone-strong);
}

body.rv-petrol .rv-trust__body { display: flex; flex-direction: column; gap: 2px; }

body.rv-petrol .rv-bundle__h {
  font-family: var(--rv-font-display);
  font-weight: 600;
  font-size: var(--rv-text-2xl);
  color: var(--rv-ink);
  margin: 0 0 var(--rv-space-lg);
}

@media (max-width: 600px) {
  body.rv-petrol .rv-proof__sep { display: none; }
  body.rv-petrol .rv-proof__txt-wrap { gap: 4px var(--rv-space-xs); font-size: var(--rv-text-xs); }
}


/* ==========================================================================
   24. CART, CHECKOUT AND THANK-YOU

   The checkout column stays a single column on purpose - Woodmart rebuilds the
   order-review fragment on every AJAX update, so moving that markup breaks
   coupon, shipping and payment refreshes. What is fixed here is everything
   around it: brand type on the step numerals, a readable column width, framed
   totals, and reassurance where the money decision happens.
   ========================================================================== */

/* Step numerals were a large generic sans that matched nothing on the site. */
body.rv-money .woocommerce-billing-fields > h3,
body.rv-money #order_review_heading,
body.rv-money .wd-checkout-steps,
body.rv-money .wd-checkout-step-title {
  font-family: var(--rv-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: var(--rv-tracking-display);
  color: var(--rv-ink) !important;
}

body.rv-money .wd-checkout-step-number,
body.rv-money .wd-checkout-steps .wd-number {
  font-family: var(--rv-font-display) !important;
  color: var(--rv-accent) !important;
}

/* Give the form a comfortable measure rather than a thin ribbon. */
body.rv-money .woocommerce-checkout .col2-set,
body.rv-money .woocommerce-checkout #customer_details,
body.rv-money .woocommerce-checkout #order_review,
body.rv-money .woocommerce-checkout .woocommerce-checkout-review-order {
  max-width: 720px;
  margin-inline: auto;
}

/* Frame the totals so they read as a panel, not loose rows. */
body.rv-money .cart_totals,
body.rv-money #order_review {
  background-color: var(--rv-surface);
  border: 1px solid var(--rv-hairline);
  border-radius: var(--rv-radius-md);
  padding: var(--rv-space-lg);
}

body.rv-money .cart_totals h2,
body.rv-money #order_review_heading {
  font-family: var(--rv-font-display);
  font-size: var(--rv-text-xl);
  margin-block-end: var(--rv-space-md);
}

body.rv-money .shop_table th,
body.rv-money .cart_totals th {
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-sm);
  letter-spacing: var(--rv-tracking-label);
  text-transform: uppercase;
  color: var(--rv-ink-muted);
}

body.rv-money .order-total th,
body.rv-money .order-total td {
  font-size: var(--rv-text-lg);
  color: var(--rv-ink) !important;
}

/* Personalisation carried on a cart line - the runes must stay legible. */
body.rv-money .variation,
body.rv-money .wd-product-detail { font-size: var(--rv-text-sm); color: var(--rv-ink-muted); }
body.rv-money .variation dt { font-weight: 600; color: var(--rv-ink); }

/* Reassurance immediately above the pay button. */
body.rv-petrol .rv-assure {
  list-style: none;
  margin: var(--rv-space-md) 0;
  padding: var(--rv-space-md) 0 0;
  border-block-start: 1px solid var(--rv-hairline);
  display: grid;
  gap: var(--rv-space-xs);
}

body.rv-petrol .rv-assure li {
  display: flex;
  align-items: flex-start;
  gap: var(--rv-space-xs);
  margin: 0;
  font-size: var(--rv-text-sm);
  line-height: 1.5;
  color: var(--rv-ink-muted);
}

body.rv-petrol .rv-assure__sym {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-block-start: 2px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  color: var(--rv-accent);
}

/* The money hero is a band, not a stage - keep it shallow. */
body.rv-money .rv-money-hero { padding-block: var(--rv-space-lg); }
body.rv-money .rv-money-hero .rv-display { font-size: var(--rv-text-3xl); }

/* Empty cart should still look like the store, not a bare sentence. */
body.rv-money .cart-empty,
body.rv-money .wc-empty-cart-message {
  font-size: var(--rv-text-lg);
  color: var(--rv-ink-soft);
  text-align: center;
}


/* ==========================================================================
   25. BRAND AND POLICY PAGES

   Long-form legal and policy copy, which the theme rendered at full container
   width - lines of 1,600px are close to unreadable. Constrained to a measure,
   and the many headings these pages carry are put on the brand type scale.
   ========================================================================== */

body.rv-brand-page .rv-brand-hero { padding-block: var(--rv-space-lg); }

/* Reading measure applies to PROSE only. Applying it to every child clamped
   designed sections to 820px while their hero ran full width. */
body.rv-brand-page main .entry-content > p,
body.rv-brand-page main .entry-content > ul,
body.rv-brand-page main .entry-content > ol,
body.rv-brand-page main .entry-content > h2,
body.rv-brand-page main .entry-content > h3,
body.rv-brand-page main .entry-content > h4,
body.rv-brand-page main .entry-content > blockquote {
  max-width: 76ch;
}

body.rv-brand-page main .entry-content {
  font-size: var(--rv-text-base);
  line-height: 1.7;
  color: var(--rv-ink-soft);
}

body.rv-brand-page main .entry-content h2 {
  font-family: var(--rv-font-display);
  font-weight: 600;
  font-size: var(--rv-text-2xl);
  letter-spacing: var(--rv-tracking-display);
  color: var(--rv-ink);
  margin-block: var(--rv-space-xl) var(--rv-space-sm);
  padding-block-end: var(--rv-space-xs);
  border-block-end: 1px solid var(--rv-hairline);
}

body.rv-brand-page main .entry-content h3,
body.rv-brand-page main .entry-content h4 {
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-lg);
  color: var(--rv-ink);
  margin-block: var(--rv-space-lg) var(--rv-space-xs);
}

body.rv-brand-page main .entry-content p { margin-block: 0 var(--rv-space-md); }

body.rv-brand-page main .entry-content ul,
body.rv-brand-page main .entry-content ol {
  margin-block: 0 var(--rv-space-md);
  padding-inline-start: var(--rv-space-md);
}

body.rv-brand-page main .entry-content li { margin-block-end: var(--rv-space-2xs); }

body.rv-brand-page main .entry-content a {
  color: var(--rv-petrol);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.rv-brand-page main .entry-content strong { color: var(--rv-ink); font-weight: 600; }


/* ==========================================================================
   26. ACCOUNT, WISHLIST, COMPARE, BLOG, GUIDES

   My Account is the page a customer reaches from every order email, and it was
   a bare login box - the least brand-like moment in the whole store, on the one
   screen where someone is typing a password.
   ========================================================================== */

body.rv-shop-page .rv-shop-hero { padding-block: var(--rv-space-lg); }

/* --- Account --- */
body.rv-shop-page .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--rv-hairline);
}

body.rv-shop-page .woocommerce-MyAccount-navigation li {
  margin: 0;
  border-block-end: 1px solid var(--rv-hairline);
}

body.rv-shop-page .woocommerce-MyAccount-navigation a {
  display: block;
  padding: var(--rv-space-sm) 0;
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-sm);
  letter-spacing: var(--rv-tracking-label);
  text-transform: uppercase;
  color: var(--rv-ink-muted);
  text-decoration: none;
}

body.rv-shop-page .woocommerce-MyAccount-navigation a:hover,
body.rv-shop-page .woocommerce-MyAccount-navigation .is-active a { color: var(--rv-petrol); }

/* Login and register, framed rather than floating. */
body.rv-shop-page .woocommerce-form-login,
body.rv-shop-page .woocommerce-form-register,
body.rv-shop-page .wd-login-form,
body.rv-shop-page .woocommerce-ResetPassword {
  max-width: 460px;
  margin-inline: auto;
  padding: var(--rv-space-lg);
  background-color: var(--rv-surface);
  border: 1px solid var(--rv-hairline);
  border-radius: var(--rv-radius-md);
}

body.rv-shop-page .u-columns.col2-set { gap: var(--rv-space-lg); }

/* --- Empty wishlist / compare / blog: a way onward, not a dead end. --- */
body.rv-shop-page .wd-empty-block-title,
body.rv-shop-page .no-results,
body.rv-shop-page .wd-not-found {
  font-family: var(--rv-font-display);
  font-size: var(--rv-text-2xl);
  color: var(--rv-ink);
  text-align: center;
}

body.rv-shop-page .wd-empty-block-text {
  font-size: var(--rv-text-base);
  color: var(--rv-ink-muted);
  text-align: center;
}

/* --- Guides: long-form reading measure, same as the policy pages. --- */
body.rv-shop-page main .entry-content > p,
body.rv-shop-page main .entry-content > ul,
body.rv-shop-page main .entry-content > ol,
body.rv-shop-page main .entry-content > h2,
body.rv-shop-page main .entry-content > h3,
body.rv-shop-page main .entry-content > h4,
body.rv-shop-page main .entry-content > blockquote { max-width: 76ch; }

body.rv-shop-page main .entry-content {
  font-size: var(--rv-text-base);
  line-height: 1.7;
  color: var(--rv-ink-soft);
}

body.rv-shop-page main .entry-content h2 {
  font-family: var(--rv-font-display);
  font-weight: 600;
  font-size: var(--rv-text-2xl);
  color: var(--rv-ink);
  margin-block: var(--rv-space-xl) var(--rv-space-sm);
  padding-block-end: var(--rv-space-xs);
  border-block-end: 1px solid var(--rv-hairline);
}

body.rv-shop-page main .entry-content h3 {
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-lg);
  color: var(--rv-ink);
  margin-block: var(--rv-space-lg) var(--rv-space-xs);
}

body.rv-shop-page main .entry-content a {
  color: var(--rv-petrol);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ==========================================================================
   27. REVIEW SEAL

   Sits in the footer's brand column on bone-on-petrol. Reads as a mark rather
   than a widget - no border, no box, just the stave, the score and the count.
   ========================================================================== */

body.rv-petrol .rv-seal {
  display: flex;
  align-items: center;
  gap: var(--rv-space-sm);
  margin-block-start: var(--rv-space-md);
  padding-block-start: var(--rv-space-md);
  border-block-start: 1px solid var(--rv-hairline-bone);
}

body.rv-petrol .rv-seal__mark {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  color: var(--rv-bone-muted);
  opacity: 0.8;
}

body.rv-petrol .rv-seal__body { display: flex; flex-direction: column; gap: 1px; }

body.rv-petrol .rv-seal__stars { letter-spacing: 2px; line-height: 1; }
body.rv-petrol .rv-seal__star { color: var(--rv-hairline-bone-strong); font-size: 13px; }
body.rv-petrol .rv-seal__star.is-on,
body.rv-petrol .rv-seal__star.is-half { color: var(--rv-bone); }
body.rv-petrol .rv-seal__star.is-half { opacity: 0.55; }

body.rv-petrol .rv-seal__score {
  font-family: var(--rv-font-heading);
  font-size: var(--rv-text-sm);
  color: var(--rv-bone-muted);
}
body.rv-petrol .rv-seal__score strong { color: var(--rv-bone); font-weight: 600; font-size: var(--rv-text-base); }

body.rv-petrol .rv-seal__count {
  font-size: var(--rv-text-xs);
  letter-spacing: var(--rv-tracking-label);
  text-transform: uppercase;
  color: var(--rv-bone-muted);
}


/* ==========================================================================
   28. READING SIZE

   The theme's body text was 14px. That is small for a paragraph of description,
   and on iOS anything under 16px makes Safari zoom the page when a field is
   focused. The theme variable is now 16px; these rules cover the places that
   set their own size and so ignore it.

   Headings and display type are deliberately untouched - they were never the
   problem, and raising everything together would just rebuild the same ratio.
   ========================================================================== */

body.rv-petrol,
body.rv-petrol p,
body.rv-petrol li {
  font-size: var(--rv-text-base);
  line-height: var(--rv-leading-body);
}

/* Product description, the tabbed content and the accordion bodies. */
body.rv-petrol .woocommerce-product-details__short-description,
body.rv-petrol .woocommerce-Tabs-panel,
body.rv-petrol .wd-accordion-content,
body.rv-petrol .wc-tab,
body.rv-petrol .rv-p-spec,
body.rv-petrol .entry-content {
  font-size: var(--rv-text-base);
  line-height: var(--rv-leading-body);
  color: var(--rv-ink-soft);
}

body.rv-petrol .woocommerce-product-details__short-description p,
body.rv-petrol .woocommerce-Tabs-panel p,
body.rv-petrol .woocommerce-Tabs-panel li,
body.rv-petrol .wc-tab p,
body.rv-petrol .wc-tab li { font-size: inherit; line-height: inherit; }

/* Our own section copy. */
body.rv-petrol .rv-lede { font-size: var(--rv-text-lg); line-height: 1.6; }
body.rv-petrol .rv-row__item p,
body.rv-petrol .rv-step p,
body.rv-petrol .rv-card p { font-size: var(--rv-text-sm); line-height: 1.6; }

/* Form fields at 16px or larger, so iOS does not zoom on focus. */
body.rv-petrol input[type="text"],
body.rv-petrol input[type="email"],
body.rv-petrol input[type="tel"],
body.rv-petrol input[type="number"],
body.rv-petrol input[type="search"],
body.rv-petrol input[type="password"],
body.rv-petrol textarea,
body.rv-petrol select { font-size: 16px; }

/* Small print stays small on purpose - captions and legal lines only.
   An earlier pass put .rv-trust__t and .rv-badges__k in here too, which shrank
   the trust-strip headings to 12px at the same moment body copy grew. Those are
   sub-headings, not small print, and they are sized in section 29 below. */
body.rv-petrol .rv-caption { font-size: var(--rv-text-xs); }


/* ==========================================================================
   29. SUB-HEADING SIZE

   Section headings (h2, display) were already right; body copy was fixed in
   section 28. What stayed too small was the layer between them - the labels on
   trust rows, the titles inside cards and steps, FAQ questions, and h3/h4 in
   long-form pages.

   Uppercase text with letter-spacing reads noticeably smaller than the same
   number in sentence case, so these need MORE size than the raw px suggests.
   ========================================================================== */

body.rv-petrol .rv-h4 { font-size: var(--rv-text-lg); }

body.rv-petrol .rv-trust__t,
body.rv-petrol .rv-badges__k,
body.rv-petrol .rv-tip__h,
body.rv-petrol .rv-crest__h,
body.rv-petrol .rv-pers__h { font-size: var(--rv-text-base); }

body.rv-petrol .rv-h3,
body.rv-petrol .rv-step h3,
body.rv-petrol .rv-row__item h3,
body.rv-petrol .rv-card .rv-h3 { font-size: var(--rv-text-xl); }

/* FAQ questions are sub-headings people scan, not body text. */
body.rv-faq-page .rv-faq__q { font-size: var(--rv-text-lg); }

/* Long-form pages: policy, guides, About. */
body.rv-brand-page main .entry-content h3,
body.rv-shop-page main .entry-content h3 { font-size: var(--rv-text-xl); }

body.rv-brand-page main .entry-content h4,
body.rv-shop-page main .entry-content h4 {
  font-size: var(--rv-text-lg);
  font-family: var(--rv-font-heading);
  font-weight: 600;
  color: var(--rv-ink);
  margin-block: var(--rv-space-md) var(--rv-space-2xs);
}

/* Theme-rendered headings inside product tabs and descriptions. */
body.rv-petrol .woocommerce-Tabs-panel h2,
body.rv-petrol .wc-tab h2 { font-size: var(--rv-text-2xl); }

body.rv-petrol .woocommerce-Tabs-panel h3,
body.rv-petrol .wc-tab h3,
body.rv-petrol .woocommerce-product-details__short-description h3 { font-size: var(--rv-text-xl); }

body.rv-petrol .woocommerce-Tabs-panel h4,
body.rv-petrol .wc-tab h4,
body.rv-petrol .woocommerce-product-details__short-description h4,
body.rv-petrol .woocommerce-product-details__short-description strong { font-size: var(--rv-text-lg); }


/* ==========================================================================
   30. RUNE CHART AND CONVERTER (engraving page)

   Runic codepoints render as empty boxes without a runic font, so anything
   showing a stave has to name Noto Sans Runic explicitly. It is requested
   alongside Cinzel and Jost in the design-system font call.
   ========================================================================== */

body.rv-petrol .rv-rune {
  font-family: "Noto Sans Runic", "Segoe UI Historic", "Segoe UI Symbol", serif;
  font-size: 26px;
  line-height: 1;
  color: var(--rv-petrol);
  text-align: center;
  width: 1px;
  white-space: nowrap;
}

body.rv-petrol .rv-runetool {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

body.rv-petrol .rv-runetool input {
  width: 100%;
  padding: var(--rv-space-sm) var(--rv-space-md);
  background-color: var(--rv-petrol-deep);
  border: 1px solid var(--rv-hairline-bone-strong);
  border-radius: var(--rv-radius-sm);
  color: var(--rv-bone);
  font-family: var(--rv-font-body);
  font-size: 16px;
  text-align: center;
}

body.rv-petrol .rv-runetool input::placeholder { color: var(--rv-bone-muted); opacity: 0.6; }
body.rv-petrol .rv-runetool input:focus { outline: none; border-color: var(--rv-bone); }

body.rv-petrol .rv-runetool__out {
  display: block;
  margin-block: var(--rv-space-md);
  min-height: 1.4em;
  font-family: "Noto Sans Runic", "Segoe UI Historic", "Segoe UI Symbol", serif;
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.35;
  letter-spacing: 8px;
  color: var(--rv-bone);
  word-break: break-word;
}

body.rv-petrol .rv-runetool__note {
  font-size: var(--rv-text-sm);
  line-height: 1.6;
  color: var(--rv-bone-muted);
  margin: 0;
}

/* The chart is 24 rows - let it breathe and stay scannable. */
body.rv-petrol .rv-table td,
body.rv-petrol .rv-table th { padding-block: var(--rv-space-xs); }
body.rv-petrol .rv-table tbody tr:nth-child(even) { background-color: var(--rv-surface); }


/* ==========================================================================
   31. DESIGNED SECTIONS INSIDE PAGE CONTENT

   When a page body is built from .rv-sec blocks rather than prose, those
   sections must behave exactly like the hero above them: edge to edge, with the
   inner shell centred on the same measure. Otherwise the page steps in and out
   as you scroll, which is what was happening here.

   These templates have no sidebar, so the full-bleed technique is safe. It is
   NOT applied on shop or category archives, where <main> is a grid with a
   sidebar and 100vw would drag sections off-screen.
   ========================================================================== */

body.rv-brand-page main .entry-content > .rv-sec,
body.rv-shop-page main .entry-content > .rv-sec {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* The content wrapper must not clip the bleed. */
body.rv-brand-page main.wd-content-layout,
body.rv-shop-page main.wd-content-layout { overflow-x: clip; }

/* Prose that sits directly in the body, outside any section, still needs the
   page gutter - the bleed above removes the container padding it relied on. */
body.rv-brand-page main .entry-content > p,
body.rv-brand-page main .entry-content > ul,
body.rv-brand-page main .entry-content > ol,
body.rv-brand-page main .entry-content > h2,
body.rv-brand-page main .entry-content > h3,
body.rv-brand-page main .entry-content > h4,
body.rv-brand-page main .entry-content > blockquote { margin-inline: auto; }

/* Reading comfort for Q&A without insetting the section edge - the shell keeps
   the same left and right as every other section on the page. */
body.rv-petrol .rv-faq { max-width: 860px; }
body.rv-petrol .rv-sechead + .rv-faq { margin-block-start: var(--rv-space-lg); }


/* ==========================================================================
   32. SPLIT MEDIA COLUMN

   .rv-split__media was holding a 72px symbol inside a 774px column. The symbol
   has to carry the column or the column should not be that wide - a small mark
   floating in 700px of nothing is what makes a section look broken rather than
   composed.
   ========================================================================== */

body.rv-petrol .rv-split { grid-template-columns: 1.35fr 1fr; }

body.rv-petrol .rv-split__media {
  display: grid;
  place-items: center;
  min-height: 100%;
}

body.rv-petrol .rv-split__media > .rv-sym,
body.rv-petrol .rv-split__media > svg {
  width: min(100%, 340px);
  height: auto;
  aspect-ratio: 1;
  opacity: 0.16;
  color: var(--rv-petrol);
}

body.rv-petrol .rv-sec--petrol .rv-split__media > svg { color: var(--rv-bone); opacity: 0.2; }

@media (max-width: 900px) {
  body.rv-petrol .rv-split { grid-template-columns: 1fr; }
  body.rv-petrol .rv-split__media { display: none; }
}


/* ==========================================================================
   33. REBUILT PAGE BODIES

   These pages now render designed sections from post_content rather than
   Elementor. A few theme and WooCommerce fragments still land inside them and
   need bringing onto the design system.
   ========================================================================== */

/* WooCommerce's order tracking form on the Track Order page. */
body.rv-petrol .rv-track { max-width: 560px; margin-block-start: var(--rv-space-lg); }
body.rv-petrol .rv-track form { display: grid; gap: var(--rv-space-sm); }
body.rv-petrol .rv-track p { margin: 0; }
body.rv-petrol .rv-track .form-row { margin: 0; }
body.rv-petrol .rv-track input[type="text"],
body.rv-petrol .rv-track input[type="email"] { width: 100%; }

/* Stat rows used on About and FAQs read as figures, not headings. */
body.rv-petrol .rv-sec--petrol .rv-row__item .rv-h4 {
  font-family: var(--rv-font-display);
  font-size: var(--rv-text-2xl);
  letter-spacing: var(--rv-tracking-display);
  text-transform: none;
  color: var(--rv-bone);
}
body.rv-petrol .rv-sec--petrol .rv-row__item p { color: var(--rv-bone-muted); }

/* Cards that are links should not look like unvisited blue text. */
body.rv-petrol a.rv-card { color: inherit; text-decoration: none; }
body.rv-petrol a.rv-card:hover .rv-h3 { color: var(--rv-petrol); }

/* Lists written directly into a section, outside .rv-prose. */
body.rv-petrol .rv-sec .rv-shell > ul { padding-inline-start: var(--rv-space-md); }
body.rv-petrol .rv-sec .rv-shell > ul li { margin-block-end: var(--rv-space-sm); }


/* ==========================================================================
   34. SECTION RHYTHM, STATS AND BARS

   Sections were running 96px top and bottom, so two stacked bands put 192px of
   empty space between two lines of text. On a page with ten sections that is a
   lot of scrolling past nothing. Brought down to 64px, and the first band after
   a hero gets less again because the hero already provides the break.
   ========================================================================== */

body.rv-petrol .rv-sec { padding-block: var(--rv-space-xl); }
body.rv-petrol .rv-sec--tight { padding-block: var(--rv-space-lg); }

/* <main> adds its own 40px on top of the first section's padding. */
body.rv-brand-page main.wd-content-layout,
body.rv-shop-page main.wd-content-layout { padding-block-start: 0; }

body.rv-brand-page .entry-content > .rv-sec:first-child,
body.rv-shop-page .entry-content > .rv-sec:first-child { padding-block-start: var(--rv-space-lg); }

/* --- Stats: centred, as a row of figures rather than left-hugging text. --- */
body.rv-petrol .rv-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--rv-space-lg);
  margin-block-start: var(--rv-space-lg);
  text-align: center;
}

@media (min-width: 860px) {
  body.rv-petrol .rv-stats { grid-template-columns: repeat(4, 1fr); }
}

body.rv-petrol .rv-stat { display: flex; flex-direction: column; align-items: center; gap: var(--rv-space-2xs); }

body.rv-petrol .rv-stat__n {
  font-family: var(--rv-font-display);
  font-weight: 600;
  font-size: var(--rv-text-3xl);
  line-height: 1;
  letter-spacing: var(--rv-tracking-display);
  color: var(--rv-bone);
}

body.rv-petrol .rv-stat__k {
  font-size: var(--rv-text-sm);
  line-height: 1.5;
  color: var(--rv-bone-muted);
  max-width: 22ch;
}

body.rv-petrol .rv-sec--petrol .rv-sechead { text-align: center; }
body.rv-petrol .rv-sec--petrol .rv-sechead .rv-rule { margin-inline: auto; }

/* --- Bars: a real two-column grid instead of a stacked list. --- */
body.rv-petrol .rv-bars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rv-space-sm) var(--rv-space-xl);
  margin-block-start: var(--rv-space-md);
}

@media (min-width: 760px) {
  body.rv-petrol .rv-bars { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  body.rv-petrol .rv-bars { grid-template-columns: repeat(3, 1fr); }
}


/* ==========================================================================
   35. THE GAP UNDER A HERO

   Pages whose body is rendered after </main> leave <main> standing empty but
   still 40px tall, and the first section then adds its own 64px on top. That
   put 164px of nothing between the hero and the first line of text.

   The sections are siblings of <main>, not children of .entry-content, so the
   :first-child rule written earlier never matched them.
   ========================================================================== */

body.rv-brand-page main.wd-content-layout:not(:has(.rv-sec)),
body.rv-shop-page main.wd-content-layout:not(:has(.rv-sec)) {
  padding-block: 0;
  min-height: 0;
}

body.rv-brand-page .wd-page-content + .rv-sec,
body.rv-shop-page .wd-page-content + .rv-sec { padding-block-start: var(--rv-space-lg); }

/* The figure column on these pages uses .rv-split__fig, not .rv-split__media. */
body.rv-petrol .rv-split__fig {
  display: grid;
  place-items: center;
  min-height: 100%;
}

body.rv-petrol .rv-figure-sym {
  width: min(100%, 320px);
  height: auto;
  aspect-ratio: 1;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  color: var(--rv-petrol);
  opacity: 0.16;
}

body.rv-petrol .rv-sec--petrol .rv-figure-sym { color: var(--rv-bone); opacity: 0.2; }

@media (max-width: 900px) {
  body.rv-petrol .rv-split__fig { display: none; }
}

/* Woodmart's min-height on the content wrapper keeps a short page from letting
   the footer ride up. With an empty <main> it just adds dead space, and the
   sections rendered after it already fill the screen. */
body.rv-brand-page .wd-page-content:not(:has(main .rv-sec)),
body.rv-shop-page .wd-page-content:not(:has(main .rv-sec)) { min-height: 0 !important; }


/* ==========================================================================
   36. SYMBOL CARDS

   .rv-card__fig was built to hold a photograph, so it fills its card. When the
   card holds a Norse symbol instead, a 44px mark sat in the top-left corner of
   a 425x319 panel - the mark read as an accident rather than the subject.

   Scoped with :has(> .rv-sym) so collection cards carrying real product
   photography are untouched.
   ========================================================================== */

body.rv-petrol .rv-card__fig:has(> .rv-sym) {
  display: grid;
  place-items: center;
  min-height: 200px;
  padding: var(--rv-space-lg);
}

body.rv-petrol .rv-card__fig > .rv-sym {
  width: min(70%, 150px);
  height: auto;
  aspect-ratio: 1;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  color: var(--rv-petrol);
  opacity: 0.85;
}

body.rv-petrol .rv-sec--petrol .rv-card__fig > .rv-sym { color: var(--rv-bone); }

/* Same problem wherever a symbol is the whole point of its box. */
body.rv-petrol .rv-row__icon {
  width: 44px;
  height: 44px;
  margin-block-end: var(--rv-space-sm);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  color: var(--rv-accent);
}

body.rv-petrol .rv-step__mark {
  width: 40px;
  height: 40px;
  margin-block-end: var(--rv-space-sm);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  color: var(--rv-accent);
}


/* ==========================================================================
   37. READABILITY, BUTTON HOVER, DOUBLE RULES

   Three separate faults found by measuring rather than looking:

   1. .rv-caption rendered at 12px. It carries real information - shipping
      restrictions, what a figure is measured from - not decoration.
   2. Table headers were also 12px and table cells 15px, so the most factual
      content on the site was its least readable.
   3. A section heading inside .rv-sechead already has .rv-rule under it. The
      prose rule added a second full-width hairline on top, giving every such
      heading TWO lines.
   ========================================================================== */

body.rv-petrol .rv-caption {
  font-size: var(--rv-text-base);
  line-height: 1.65;
  color: var(--rv-ink-muted);
}

body.rv-petrol .rv-sec--petrol .rv-caption { color: var(--rv-bone-muted); }

body.rv-petrol .rv-table th {
  font-size: var(--rv-text-sm);
  letter-spacing: 0.06em;
}

body.rv-petrol .rv-table td {
  font-size: var(--rv-text-base);
  line-height: 1.6;
}

/* Section headings were 30px against 19px body - not enough separation. */
body.rv-petrol .rv-h2 { font-size: clamp(28px, 2.4vw, 38px); }
body.rv-petrol .rv-display { font-size: clamp(34px, 4vw, 58px); }

/* --- Double rule under a section heading --- */
body.rv-brand-page main .entry-content h2.rv-h2,
body.rv-shop-page main .entry-content h2.rv-h2,
body.rv-petrol .rv-sechead h2 {
  border-block-end: 0;
  padding-block-end: 0;
}

/* --- Buttons on a petrol band --- */
/* Bone button, petrol text. On hover the shared rule swapped the text to the
   on-accent colour, which is bone - bone on bone, so the label vanished.
   Both properties are now stated explicitly so no inherited rule can blank it. */
body.rv-petrol .rv-sec--petrol .rv-btn:hover,
body.rv-petrol .rv-sec--figure .rv-btn:hover,
body.rv-petrol .rv-sec--petrol .rv-btn:focus-visible {
  background-color: var(--rv-bone);
  border-color: var(--rv-bone);
  color: var(--rv-petrol);
  opacity: 1;
}

body.rv-petrol .rv-sec--petrol .rv-btn--ghost,
body.rv-petrol .rv-sec--figure .rv-btn--ghost {
  background-color: transparent;
  border-color: var(--rv-hairline-bone-strong);
  color: var(--rv-bone);
}

body.rv-petrol .rv-sec--petrol .rv-btn--ghost:hover,
body.rv-petrol .rv-sec--figure .rv-btn--ghost:hover {
  background-color: var(--rv-bone);
  border-color: var(--rv-bone);
  color: var(--rv-petrol);
  opacity: 1;
}


/* ==========================================================================
   38. GUIDES INDEX, ORDER TRACKING PANEL, EMPTY-HALF STAVES
   ========================================================================== */

/* --- Guides: sticky index down the left --- */
body.rv-petrol .rv-guidewrap { display: grid; grid-template-columns: 1fr; gap: var(--rv-space-xl); }

@media (min-width: 1000px) {
  body.rv-petrol .rv-guidewrap { grid-template-columns: 280px 1fr; gap: var(--rv-space-2xl); }
  body.rv-petrol .rv-guidenav { position: sticky; top: 120px; align-self: start; }
}

body.rv-petrol .rv-guidenav {
  display: flex;
  flex-direction: column;
  border-block-start: 1px solid var(--rv-hairline);
}

body.rv-petrol .rv-guidenav__t {
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-sm);
  letter-spacing: var(--rv-tracking-label);
  text-transform: uppercase;
  color: var(--rv-ink-muted);
  padding-block: var(--rv-space-sm);
}

body.rv-petrol .rv-guidenav__item {
  display: flex;
  align-items: center;
  gap: var(--rv-space-xs);
  padding-block: var(--rv-space-sm);
  border-block-start: 1px solid var(--rv-hairline);
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-base);
  line-height: 1.35;
  color: var(--rv-ink);
  text-decoration: none;
}

body.rv-petrol .rv-guidenav__item:hover { color: var(--rv-petrol); }
body.rv-petrol .rv-guidenav__sym { flex: 0 0 auto; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; color: var(--rv-accent); }
body.rv-petrol .rv-guidenav__foot { padding-block: var(--rv-space-sm); border-block-start: 1px solid var(--rv-hairline); font-size: var(--rv-text-sm); color: var(--rv-ink-muted); }

/* --- Guide cards --- */
body.rv-petrol .rv-guides { display: grid; grid-template-columns: 1fr; gap: var(--rv-space-md); margin-block-start: var(--rv-space-xl); }
@media (min-width: 700px) { body.rv-petrol .rv-guides { grid-template-columns: repeat(2, 1fr); } }

body.rv-petrol .rv-guide {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--rv-space-md);
  align-items: center;
  padding: var(--rv-space-md);
  background-color: var(--rv-surface);
  border-radius: var(--rv-radius-md);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--rv-duration-fast) var(--rv-ease);
}

body.rv-petrol .rv-guide:hover { background-color: var(--rv-bg); box-shadow: inset 0 0 0 1px var(--rv-hairline-strong); }
body.rv-petrol .rv-guide__fig { display: grid; place-items: center; }
body.rv-petrol .rv-guide__fig .rv-sym { width: 72px; height: 72px; fill: none; stroke: currentColor; stroke-width: 1.3; color: var(--rv-accent); opacity: 0.85; }
body.rv-petrol .rv-guide__body p { margin: var(--rv-space-2xs) 0 0; font-size: var(--rv-text-sm); color: var(--rv-ink-muted); }
body.rv-petrol .rv-guide__go { display: inline-block; margin-block-start: var(--rv-space-xs); font-size: var(--rv-text-sm); font-weight: 600; color: var(--rv-petrol); text-decoration: underline; text-underline-offset: 3px; }

/* --- Order tracking panel --- */
body.rv-petrol .rv-orderstate {
  max-width: 640px;
  margin-block: var(--rv-space-lg);
  padding: var(--rv-space-lg);
  background-color: var(--rv-petrol);
  border-radius: var(--rv-radius-md);
  color: var(--rv-bone-muted);
}

body.rv-petrol .rv-orderstate__head { display: flex; align-items: center; gap: var(--rv-space-sm); margin-block-end: var(--rv-space-md); }
body.rv-petrol .rv-orderstate__sym { width: 44px; height: 44px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.4; color: var(--rv-bone); opacity: 0.8; }
body.rv-petrol .rv-orderstate__label { display: block; font-size: var(--rv-text-sm); letter-spacing: var(--rv-tracking-label); text-transform: uppercase; color: var(--rv-bone-muted); }
body.rv-petrol .rv-orderstate__status { display: block; font-family: var(--rv-font-display); font-size: var(--rv-text-2xl); color: var(--rv-bone); }
body.rv-petrol .rv-orderstate__what { font-size: var(--rv-text-base); line-height: 1.6; color: var(--rv-bone-muted); margin: 0; }
body.rv-petrol .rv-orderstate__none { font-size: var(--rv-text-sm); color: var(--rv-bone-muted); margin-block-start: var(--rv-space-md); }
body.rv-petrol .rv-orderstate__tracking { margin-block-start: var(--rv-space-md); padding-block-start: var(--rv-space-md); border-block-start: 1px solid var(--rv-hairline-bone); }
body.rv-petrol .rv-tracknum { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rv-space-xs); margin-block-end: var(--rv-space-xs); }
body.rv-petrol .rv-tracknum__k { font-size: var(--rv-text-sm); color: var(--rv-bone-muted); }
body.rv-petrol .rv-tracknum__n { font-family: var(--rv-font-heading); font-weight: 600; font-size: var(--rv-text-lg); color: var(--rv-bone); text-decoration: underline; text-underline-offset: 4px; font-variant-numeric: tabular-nums; }
body.rv-petrol .rv-tracknum__d { font-size: var(--rv-text-sm); color: var(--rv-bone-muted); }

/* --- Empty half beside a narrow block --- */
/* An earlier attempt masked a stave in with a CSS mask pointing at an SVG file
   that does not exist, so nothing rendered. The staves are real <svg> elements
   in the markup instead, using the sprite that is already on every page. */

body.rv-petrol .rv-stave--end {
  position: absolute;
  inset-inline-end: 4%;
  inset-block-start: 50%;
  translate: 0 -50%;
  width: min(34%, 420px);
  height: auto;
  aspect-ratio: 1;
  fill: none;
  stroke: currentColor;
  stroke-width: 0.8;
  color: var(--rv-accent);
  opacity: 0.07;
  pointer-events: none;
}

body.rv-petrol .rv-sec--petrol .rv-stave--end { color: var(--rv-bone); opacity: 0.1; }

@media (max-width: 1100px) {
  body.rv-petrol .rv-stave--end { display: none; }
}

/* Out-of-stock lead time note on the product page. */
body.rv-petrol .rv-leadtime {
  display: flex;
  align-items: flex-start;
  gap: var(--rv-space-xs);
  margin-block: var(--rv-space-md) 0;
  padding: var(--rv-space-sm) var(--rv-space-md);
  background-color: var(--rv-surface);
  border-inline-start: 3px solid var(--rv-accent);
  border-radius: var(--rv-radius-sm);
  font-size: var(--rv-text-base);
  line-height: 1.6;
  color: var(--rv-ink-soft);
}
body.rv-petrol .rv-leadtime__sym { flex: 0 0 auto; width: 22px; height: 22px; margin-block-start: 3px; fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--rv-accent); }


/* ==========================================================================
   39. LINKS INSIDE CARDS

   The theme underlines every <a>. Inside a card the whole card is the link, so
   underlining the title and the description made it look like three separate
   broken links rather than one panel.
   ========================================================================== */

body.rv-petrol a.rv-guide,
body.rv-petrol a.rv-guide *,
body.rv-petrol a.rv-card,
body.rv-petrol a.rv-card *,
body.rv-petrol .rv-guidenav__item,
body.rv-petrol .rv-guidenav__item * { text-decoration: none; }

body.rv-petrol .rv-guide__t {
  display: block;
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-lg);
  line-height: 1.3;
  color: var(--rv-ink);
}

body.rv-petrol a.rv-guide:hover .rv-guide__t { color: var(--rv-petrol); }

/* The only thing that should read as a link inside the card. */
body.rv-petrol .rv-guide__go { text-decoration: underline; text-underline-offset: 3px; }

/* Guide cards are built from spans (a <p> inside a <span> is invalid and broke
   the grid), so each part is made a block here. */
body.rv-petrol .rv-guide__fig,
body.rv-petrol .rv-guide__body { display: block; }
body.rv-petrol .rv-guide__fig { display: grid; place-items: center; }
body.rv-petrol .rv-guide__t { display: block; font-family: var(--rv-font-heading); font-weight: 600; font-size: var(--rv-text-lg); line-height: 1.3; color: var(--rv-ink); }
body.rv-petrol .rv-guide__d { display: block; margin-block-start: var(--rv-space-2xs); font-size: var(--rv-text-sm); line-height: 1.6; color: var(--rv-ink-muted); }
body.rv-petrol .rv-guidenav__label { display: block; }


/* ==========================================================================
   40. LINK UNDERLINES INSIDE DESIGNED BLOCKS

   Woodmart underlines links inside page content. Where the whole card IS the
   link, underlining the title and the description makes one panel look like
   three broken links. Specificity here has to beat the theme's own rule, which
   is why !important is used - it is scoped to our blocks only.
   ========================================================================== */

body.rv-petrol .entry-content a.rv-guide,
body.rv-petrol .entry-content a.rv-guide span,
body.rv-petrol .entry-content a.rv-card,
body.rv-petrol .entry-content a.rv-card span,
body.rv-petrol .entry-content a.rv-guidenav__item,
body.rv-petrol .entry-content a.rv-guidenav__item span,
body.rv-petrol a.rv-guide,
body.rv-petrol a.rv-guide span,
body.rv-petrol a.rv-card,
body.rv-petrol a.rv-card span,
body.rv-petrol a.rv-guidenav__item,
body.rv-petrol a.rv-guidenav__item span {
  text-decoration: none !important;
}

body.rv-petrol .rv-guide__go { text-decoration: underline !important; text-underline-offset: 3px; }

/* Buttons should never carry a text underline either. */
body.rv-petrol a.rv-btn,
body.rv-petrol .entry-content a.rv-btn { text-decoration: none !important; }


/* ==========================================================================
   41. FOOTER SHIP AND THE TURNING WAYFINDER

   The Vegvisir easter egg was 22px and only moved on hover, so on a phone -
   where there is no hover - it never did anything at all. It now turns
   continuously like a compass wheel and is large enough to read as a mark.

   The longship sits behind the brand column as a watermark. It is decoration,
   so it is aria-hidden and never intercepts a click.
   ========================================================================== */

/* The longship sits on the RIGHT of the footer, behind the link columns.
   It was first placed inside the brand column, which pinned it to the left and
   capped its width at that column. Moved onto the footer wrap instead. */
body.rv-petrol .rv2-foot { position: relative; overflow: hidden; }
body.rv-petrol .rv2-foot .rv2-wrap { position: relative; }

body.rv-petrol .rv2-foot__ship {
  position: absolute;
  inset-inline-end: -2%;
  inset-block-start: 50%;
  translate: 0 -50%;
  width: min(46%, 620px);
  height: auto;
  aspect-ratio: 220 / 140;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  color: var(--rv-bone);
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

body.rv-petrol .rv2-foot__grid,
body.rv-petrol .rv2-foot__bar,
body.rv-petrol .rv2-foot__search-row { position: relative; z-index: 1; }

@media (max-width: 900px) {
  body.rv-petrol .rv2-foot__ship { width: 80%; opacity: 0.05; }
}

/* --- The wayfinder turns --- */
@keyframes rv-wheel { from { rotate: 0deg; } to { rotate: 360deg; } }

body.rv-petrol .rv2-foot__egg {
  width: 46px;
  height: 46px;
  margin-right: 16px;
}

body.rv-petrol .rv2-foot__egg svg {
  animation: rv-wheel 28s linear infinite;
  transform-origin: 50% 50%;
}

body.rv-petrol .rv2-foot__egg:hover svg,
body.rv-petrol .rv2-foot__egg:focus-visible svg { animation-duration: 6s; }

/* The whole element no longer jumps on hover - only the wheel speeds up. */
body.rv-petrol .rv2-foot__egg:hover,
body.rv-petrol .rv2-foot__egg:focus-visible { transform: none; color: var(--rv-bone); }

/* Anyone who asks for less motion gets a still compass. */
@media (prefers-reduced-motion: reduce) {
  body.rv-petrol .rv2-foot__egg svg { animation: none; }
}


/* ==========================================================================
   42. EASTER EGG TOOLTIP

   The note was centred on the icon with translateX(-50%). The icon sits at the
   far left of the footer bar, so half the 260px note ran off the left edge of
   the screen - measured at -66px. Anchored to the icon's left edge instead, so
   it opens inward whatever the icon's position.
   ========================================================================== */

body.rv-petrol .rv2-foot__egg-msg {
  left: 0;
  right: auto;
  transform: translateY(4px);
  max-width: min(320px, calc(100vw - 48px));
}

body.rv-petrol .rv2-foot__egg:hover .rv2-foot__egg-msg,
body.rv-petrol .rv2-foot__egg:focus-visible .rv2-foot__egg-msg {
  transform: translateY(0);
}

/* A small pointer so the note reads as belonging to the compass. */
body.rv-petrol .rv2-foot__egg-msg::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 18px;
  border: 6px solid transparent;
  border-block-start-color: var(--rv-bone);
}


/* ==========================================================================
   43. HOMEPAGE TRUST BADGES

   The row shipped with stock icons - a delivery van, a tick-shield, a pencil,
   a padlock - which belong to any store on the internet. They are now the same
   Norse sprite used everywhere else: longship for shipping, shield for the
   warranty, runes for engraving, AEgishjalmur (the helm of awe, a protective
   stave) for secure checkout.

   The label was 13px and the line under it smaller still, on a band people are
   meant to read in one glance.
   ========================================================================== */

body.rv-petrol .rv2-badges__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--rv-space-lg) var(--rv-space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 900px) {
  body.rv-petrol .rv2-badges__row { grid-template-columns: repeat(4, 1fr); }
}

body.rv-petrol .rv2-badges__row li {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: start;
  gap: var(--rv-space-sm);
  margin: 0;
}

body.rv-petrol .rv2-badges__sym {
  width: 52px;
  height: 52px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  color: var(--rv-accent);
}

body.rv-petrol .rv2-badges__k {
  display: block;
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-lg);
  line-height: 1.25;
  color: var(--rv-ink);
}

body.rv-petrol .rv2-badges__v {
  display: block;
  margin-block-start: 4px;
  font-size: var(--rv-text-base);
  line-height: 1.5;
  color: var(--rv-ink-muted);
}

/* On a petrol ground the same row has to flip to bone. */
body.rv-petrol .rv-sec--petrol .rv2-badges__sym,
body.rv-petrol .rv2-badges--dark .rv2-badges__sym { color: var(--rv-bone); }
body.rv-petrol .rv-sec--petrol .rv2-badges__k,
body.rv-petrol .rv2-badges--dark .rv2-badges__k { color: var(--rv-bone); }
body.rv-petrol .rv-sec--petrol .rv2-badges__v,
body.rv-petrol .rv2-badges--dark .rv2-badges__v { color: var(--rv-bone-muted); }


/* ==========================================================================
   44. STARS BESIDE A RATING

   "4.89" on its own is a number - it could be a price, a version, anything.
   Stars are what make a reader parse it as a rating without stopping to think.
   The homepage hero and the About stat block both showed the figure bare.
   ========================================================================== */

body.rv-petrol .rv2-hero__stars,
body.rv-petrol .rv-stat__stars {
  display: block;
  letter-spacing: 3px;
  line-height: 1;
  color: var(--rv-bone);
  font-size: var(--rv-text-base);
}

body.rv-petrol .rv2-hero__stars { margin-block-end: 6px; }
body.rv-petrol .rv-stat__stars { margin-block-end: 8px; }

/* On a light ground the same stars need the accent, not bone. */
body.rv-petrol .rv-sec--light .rv-stat__stars,
body.rv-petrol .rv-sec--surface .rv-stat__stars { color: var(--rv-accent); }

body.rv-petrol .rv2-sticky__stars { letter-spacing: 2px; color: var(--rv-bone); }


/* ==========================================================================
   45. HOMEPAGE RUNE CONVERTER

   The engraving section's right-hand column was a static triquetra. It is now
   the same live converter as the engraving page, driven by the same alphabet -
   somebody typing their name is worth more than another decorative mark, and
   two separate copies of the transliteration would eventually disagree.

   Runic codepoints need a runic font or they render as empty boxes, which is
   why Noto Sans Runic is named explicitly.
   ========================================================================== */

body.rv-petrol .rv-hometool {
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-xs);
  align-self: center;
  width: 100%;
  max-width: 460px;
  padding: var(--rv-space-lg);
  background-color: rgba(4, 29, 34, 0.45);
  border: 1px solid var(--rv-hairline-bone);
  border-radius: var(--rv-radius-md);
  text-align: center;
}

body.rv-petrol .rv-hometool__lab {
  font-size: var(--rv-text-sm);
  letter-spacing: var(--rv-tracking-label);
  text-transform: uppercase;
  color: var(--rv-bone-muted);
}

body.rv-petrol .rv-hometool input {
  width: 100%;
  padding: var(--rv-space-sm) var(--rv-space-md);
  background-color: var(--rv-petrol-deep);
  border: 1px solid var(--rv-hairline-bone-strong);
  border-radius: var(--rv-radius-sm);
  color: var(--rv-bone);
  font-family: var(--rv-font-body);
  font-size: 16px;
  text-align: center;
}

body.rv-petrol .rv-hometool input::placeholder { color: var(--rv-bone-muted); opacity: 0.55; }
body.rv-petrol .rv-hometool input:focus { outline: none; border-color: var(--rv-bone); }

body.rv-petrol .rv-hometool__out {
  display: block;
  min-height: 1.3em;
  margin-block: var(--rv-space-xs);
  font-family: "Noto Sans Runic", "Segoe UI Historic", "Segoe UI Symbol", serif;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.3;
  letter-spacing: 7px;
  color: var(--rv-bone);
  word-break: break-word;
}

body.rv-petrol .rv-hometool__note { font-size: var(--rv-text-sm); color: var(--rv-bone-muted); }

@media (max-width: 900px) {
  body.rv-petrol .rv-hometool { max-width: none; }
}


/* ==========================================================================
   46. STAVES ALWAYS ON THE RIGHT

   .rv-stave--start put the mark on the LEFT, which is where the heading, the
   rule and the first line of every paragraph also start - so on a text-heavy
   page like the FAQs the staves sat directly behind the words. Measured at
   left 55-395px against a text column starting at 21px.

   Every stave now sits on the right, past the reading column, and behind the
   content rather than over it.
   ========================================================================== */

body.rv-petrol .rv-stave,
body.rv-petrol .rv-stave--start,
body.rv-petrol .rv-stave--end {
  inset-inline-start: auto;
  inset-inline-end: 3%;
  z-index: 0;
  pointer-events: none;
}

/* Content sits above the mark, never under it. */
body.rv-petrol .rv-sec > .rv-shell { position: relative; z-index: 1; }
body.rv-petrol .rv-sec { overflow: hidden; }

/* On narrow screens the mark would land on the text whatever we do. */
@media (max-width: 1200px) {
  body.rv-petrol .rv-stave,
  body.rv-petrol .rv-stave--start,
  body.rv-petrol .rv-stave--end { display: none; }
}


/* ==========================================================================
   47. HEADINGS DO NOT RUN UNDER THE STAVE

   Moving the staves right was not enough on its own. A section heading is a
   block, so even a four-word title still stretches the full 1860px of the
   shell - the stave then sits on top of that empty box. Measured overlaps of
   355 to 435px on the FAQ page.

   Capping the heading and its lede at a reading measure both fixes the overlap
   and is better typography: a 1860px line is unreadable anyway.
   ========================================================================== */

body.rv-petrol .rv-sechead { max-width: 62ch; }
body.rv-petrol .rv-sec > .rv-shell > .rv-h2,
body.rv-petrol .rv-sec > .rv-shell > .rv-lede,
body.rv-petrol .rv-sechead > .rv-h2,
body.rv-petrol .rv-sechead > .rv-lede { max-width: 62ch; }

/* Centred heads on petrol bands keep their own centring. */
body.rv-petrol .rv-sec--petrol .rv-sechead { max-width: 62ch; margin-inline: auto; }

/* The hero title too - same block-stretch problem. */
body.rv-petrol .rv-shell > .rv-display { max-width: 20ch; }


/* ==========================================================================
   48. NO STAVE BEHIND A FULL-WIDTH ROW

   A stat row, a trust row or a card grid genuinely fills the shell - there is
   no empty right-hand margin for a mark to sit in. Rather than let it fall
   behind the last column, the stave is dropped in those sections.
   ========================================================================== */

body.rv-petrol .rv-sec:has(> .rv-shell > .rv-row) > .rv-stave,
body.rv-petrol .rv-sec:has(> .rv-shell > .rv-stats) > .rv-stave,
body.rv-petrol .rv-sec:has(> .rv-shell > .rv-cards) > .rv-stave,
body.rv-petrol .rv-sec:has(> .rv-shell > .rv-steps) > .rv-stave,
body.rv-petrol .rv-sec:has(> .rv-shell > .rv-tablewrap) > .rv-stave,
body.rv-petrol .rv-sec:has(.rv-row) > .rv-stave,
body.rv-petrol .rv-sec:has(.rv-stats) > .rv-stave { display: none; }


/* ==========================================================================
   49. BADGE GRID PLACEMENT

   My own bug. Each <li> holds THREE children - the symbol, the label and the
   description - but I gave it a two-column grid and no explicit placement. So
   the symbol took column 1, the label took column 2, and the description
   wrapped onto row 2 INSIDE THE 52px ICON COLUMN. It was measured at 70px wide,
   breaking one word per line.

   The symbol now spans both rows in column 1; both pieces of text sit in
   column 2 where they belong.
   ========================================================================== */

body.rv-petrol .rv2-badges__row li {
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: var(--rv-space-sm);
  row-gap: 4px;
}

body.rv-petrol .rv2-badges__sym {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
}

body.rv-petrol .rv2-badges__k { grid-column: 2; grid-row: 1; margin: 0; }
body.rv-petrol .rv2-badges__v { grid-column: 2; grid-row: 2; margin: 0; }


/* ==========================================================================
   50. BADGE TEXT ALIGNMENT

   The original homepage CSS centred these badges (text-align: center and
   justify-items: center), which suited the old stacked layout. In the new
   icon-beside-text layout, centring each cell independently left the label and
   the description starting at different x positions - 205px against 136px -
   so nothing lined up down the row.
   ========================================================================== */

body.rv-petrol .rv2-badges__row li {
  text-align: start;
  justify-items: start;
}

body.rv-petrol .rv2-badges__k,
body.rv-petrol .rv2-badges__v {
  text-align: start;
  justify-self: stretch;
}

body.rv-petrol .rv2-badges__sym { justify-self: start; }


/* ==========================================================================
   51. MOBILE

   Measured at 390px, not guessed:
     - the hero image sat at y=861 while the text started at y=262, so the
       photograph was below the fold entirely and the banner read as plain text
     - the collection cards were a single 331px column, one per screen
     - the footer columns all stacked at x=18 with no separation
   ========================================================================== */

@media (max-width: 900px) {

  /* --- Hero: the runestone becomes the ground the words sit on --- */
  body.rv-petrol .rv2-hero { position: relative; isolation: isolate; }

  body.rv-petrol .rv2-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    height: 100%;
    margin: 0;
  }

  body.rv-petrol .rv2-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% center;
  }

  /* Without this the runestone swallows the type. */
  body.rv-petrol .rv2-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(6,41,48,0.92) 0%, rgba(6,41,48,0.78) 45%, rgba(6,41,48,0.92) 100%);
    pointer-events: none;
  }

  body.rv-petrol .rv2-hero > .rv2-wrap { position: relative; z-index: 2; }
  body.rv-petrol .rv2-hero { padding-block: var(--rv-space-2xl); }

  /* --- Collection cards: two up, so the section reads as a grid --- */
  body.rv-petrol .rv2-armoury .rv2-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rv-space-sm);
  }

  body.rv-petrol .rv2-armoury .rv2-cat { width: auto; }
  body.rv-petrol .rv2-armoury .rv2-cat__name { font-size: var(--rv-text-sm); line-height: 1.3; }
  body.rv-petrol .rv2-armoury .rv2-cat__n { font-size: var(--rv-text-xs); }

  /* --- Footer: give the stacked columns a rhythm and a divider --- */
  body.rv-petrol .rv2-foot__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rv-space-lg) var(--rv-space-md);
  }

  body.rv-petrol .rv2-foot__col--brand { grid-column: 1 / -1; }

  body.rv-petrol .rv2-foot__col + .rv2-foot__col { padding-block-start: 0; }

  body.rv-petrol .rv2-foot__col ul { margin: 0; padding: 0; list-style: none; }
  body.rv-petrol .rv2-foot__col li { margin-block-end: var(--rv-space-2xs); }

  body.rv-petrol .rv2-foot__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rv-space-sm);
    text-align: start;
  }
}

@media (max-width: 520px) {
  /* At this width two columns of links become two cramped columns of wraps. */
  body.rv-petrol .rv2-foot__grid { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   52. PAYMENT METHODS IN THE FOOTER

   Drawn as inline SVG rather than the usual strip of card logos as a JPG - a
   bitmap of logos goes soft on retina and cannot be recoloured for a petrol
   ground. These are outlined marks in bone, which reads as part of the footer
   rather than a sticker on it.
   ========================================================================== */

body.rv-petrol .rv2-foot__pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rv-space-sm) var(--rv-space-md);
  margin-block-start: var(--rv-space-md);
  padding-block-start: var(--rv-space-md);
  border-block-start: 1px solid var(--rv-hairline-bone);
}

body.rv-petrol .rv2-foot__pay-t {
  font-size: var(--rv-text-xs);
  letter-spacing: var(--rv-tracking-label);
  text-transform: uppercase;
  color: var(--rv-bone-muted);
}

body.rv-petrol .rv2-foot__cards { display: flex; flex-wrap: wrap; gap: 8px; }

body.rv-petrol .rv2-foot__card {
  display: block;
  width: 46px;
  height: 31px;
  color: var(--rv-bone-muted);
}

body.rv-petrol .rv2-foot__card svg { width: 100%; height: 100%; display: block; }

@media (max-width: 600px) {
  body.rv-petrol .rv2-foot__pay { justify-content: flex-start; }
  body.rv-petrol .rv2-foot__card { width: 40px; height: 27px; }
}


/* ==========================================================================
   53. ADD THESE TOO
   ========================================================================== */

body.rv-petrol .rv-alsobuy {
  margin-block: var(--rv-space-lg);
  padding: var(--rv-space-md);
  background-color: var(--rv-surface);
  border-radius: var(--rv-radius-md);
}

body.rv-petrol .rv-alsobuy__h {
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-base);
  letter-spacing: var(--rv-tracking-label);
  text-transform: uppercase;
  color: var(--rv-ink);
  margin: 0 0 var(--rv-space-md);
}

body.rv-petrol .rv-alsobuy__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rv-space-md); }

body.rv-petrol .rv-alsobuy__item { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--rv-space-sm); align-items: center; }

body.rv-petrol .rv-alsobuy__fig { display: block; border-radius: var(--rv-radius-sm); overflow: hidden; background-color: var(--rv-bg); }
body.rv-petrol .rv-alsobuy__fig img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

body.rv-petrol .rv-alsobuy__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

body.rv-petrol .rv-alsobuy__name {
  font-size: var(--rv-text-sm);
  line-height: 1.35;
  color: var(--rv-ink);
  text-decoration: none !important;
}
body.rv-petrol .rv-alsobuy__name:hover { color: var(--rv-petrol); }

body.rv-petrol .rv-alsobuy__price,
body.rv-petrol .rv-alsobuy__price .amount {
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-sm);
  color: var(--rv-petrol) !important;
}

body.rv-petrol .rv-alsobuy__btn {
  align-self: start;
  margin-block-start: 2px;
  padding: 7px 14px;
  background-color: var(--rv-petrol);
  color: var(--rv-bone);
  border-radius: var(--rv-radius-sm);
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-xs);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none !important;
  line-height: 1;
}
body.rv-petrol .rv-alsobuy__btn:hover { background-color: var(--rv-petrol-deep); color: var(--rv-bone); }

@media (max-width: 700px) {
  body.rv-petrol .rv-alsobuy__row { grid-template-columns: minmax(0, 1fr); }
}

/* Honeypot field on the registration form. Off-screen rather than
   display:none, because some bots skip hidden inputs. */
body.rv-petrol .rv-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }


/* ==========================================================================
   54. MOBILE HEADER TOOLS

   The account element renders as text - "Login / Register" - which is fine in a
   wide desktop bar and far too much in a phone header sitting beside a burger,
   a wishlist and a cart. On mobile it becomes an icon like the others.
   ========================================================================== */

@media (max-width: 1024px) {

  body.rv-petrol .whb-col-mobile .wd-header-my-account .wd-tools-text { display: none; }

  body.rv-petrol .whb-col-mobile .wd-header-my-account > a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
  }

  /* Woodmart only draws the account glyph for the icon style, so it is drawn
     here rather than switching the element's design and losing its link. */
  body.rv-petrol .whb-col-mobile .wd-header-my-account > a::before {
    content: "";
    width: 21px;
    height: 21px;
    background-color: currentColor;
    -webkit-mask: no-repeat center / contain;
    mask: no-repeat center / contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  }

  /* Any label the theme prints beside a mobile tool icon. */
  body.rv-petrol .whb-col-mobile .wd-tools-element .wd-tools-text,
  body.rv-petrol .whb-col-mobile .wd-header-wishlist .wd-tools-text { display: none; }

  body.rv-petrol .whb-col-mobile .wd-tools-element { margin-inline-start: 6px; }
}


/* ==========================================================================
   55. PAYMENT ROW AND HERO OVERLAY

   Two corrections to my own earlier work:

   1. The card marks carried long words - DISCOVER, PayPal - set at a size that
      only worked on a wide screen. At the 40px a phone gives them, the type
      turned to mush. Shorter labels, larger type inside the same box.

   2. The mobile hero overlay was 92% opaque petrol, so the runestone behind the
      words was effectively invisible - which reads as "there is no image", not
      as a background. Dropped so the stone is clearly there while the type
      stays readable on top of it.
   ========================================================================== */

/* Desktop: the payment row sits to the right, under the footer columns. */
@media (min-width: 901px) {
  body.rv-petrol .rv2-foot__pay { justify-content: flex-end; }
}

@media (max-width: 900px) {
  body.rv-petrol .rv2-foot__pay {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rv-space-xs);
  }
  body.rv-petrol .rv2-foot__cards { gap: 6px; }
  body.rv-petrol .rv2-foot__card { width: 44px; height: 28px; }
}

@media (max-width: 380px) {
  body.rv-petrol .rv2-foot__card { width: 40px; height: 25px; }
}

/* --- Hero overlay: let the stone show --- */
@media (max-width: 900px) {
  body.rv-petrol .rv2-hero::after {
    background: linear-gradient(180deg, rgba(6,41,48,0.70) 0%, rgba(6,41,48,0.52) 45%, rgba(6,41,48,0.80) 100%);
  }

  /* The type has to hold its own against a photograph rather than a flat
     ground, so it gets a shadow instead of a heavier overlay. */
  body.rv-petrol .rv2-hero__title,
  body.rv-petrol .rv2-hero h1,
  body.rv-petrol .rv2-hero p {
    text-shadow: 0 1px 18px rgba(4, 29, 34, 0.85);
  }
}

/* The arithmetic question on the registration form. Styled like the other
   fields so it reads as part of the form, not as a warning. */
body.rv-petrol .rv-challenge label { display: block; margin-block-end: 6px; font-size: var(--rv-text-sm); color: var(--rv-ink-soft); }
body.rv-petrol .rv-challenge input { max-width: 180px; }


/* ==========================================================================
   56. MOBILE ROUND TWO

   Four corrections, all measured:
     - the mobile wishlist printed "0 Wishlist" because the element I added
       inherited a blank style; the label is removed here as well as in the
       header settings, so it cannot come back
     - the hero text was legible against a flat petrol panel and stopped being
       legible once a photograph went behind it
     - the category card was display:flex with no direction, so the name sat
       beside the image instead of under it
     - the sticky bar sat at bottom:62px, which parked it on top of the chat
       widget instead of at the foot of the screen
   ========================================================================== */

/* --- 1. Wishlist and account: icon only, no label --- */
body.rv-petrol .whb-col-mobile .wd-header-wishlist .wd-tools-text,
body.rv-petrol .whb-col-mobile .wd-header-my-account .wd-tools-text,
body.rv-petrol .whb-col-mobile .wd-tools-element > a > span:not(.wd-tools-icon):not(.wd-tools-count) { display: none !important; }

@media (max-width: 1024px) {

  /* --- 2. The hero panel gets its own readable ground --- */
  body.rv-petrol .rv2-hero__panel {
    background: linear-gradient(180deg, rgba(4,29,34,0.55) 0%, rgba(4,29,34,0.78) 100%);
    border-radius: var(--rv-radius-md);
    padding: var(--rv-space-lg) var(--rv-space-md);
    backdrop-filter: blur(2px);
  }

  /* With a panel behind the words the overlay can lift further, so the
     runestone actually reads as a photograph rather than a dark wash. */
  body.rv-petrol .rv2-hero::after {
    background: linear-gradient(180deg, rgba(6,41,48,0.55) 0%, rgba(6,41,48,0.35) 45%, rgba(6,41,48,0.70) 100%);
  }
}

/* --- 4. Sticky bar at the true foot of the screen --- */
body.rv-petrol .rv2-sticky {
  bottom: 0 !important;
  padding-block-end: max(10px, env(safe-area-inset-bottom));
}

/* The chat widget then needs to clear the bar rather than fight it. */
@media (max-width: 1024px) {
  body.rv-petrol .tawk-min-container,
  body.rv-petrol iframe[title*="chat" i] { margin-block-end: 66px !important; }
}


/* ==========================================================================
   57. MOBILE TOOL LABELS

   The previous rule targeted .whb-col-mobile. The real wrapper is
   .whb-mobile-right, so the rule matched nothing and the wishlist kept printing
   "0 Wishlist" beside its icon. Checked against the rendered markup this time
   rather than assumed.
   ========================================================================== */

body.rv-petrol .whb-mobile-right .wd-tools-text,
body.rv-petrol .whb-mobile-left .wd-tools-text,
body.rv-petrol [class*="whb-column_mobile"] .wd-tools-text { display: none !important; }

/* Woodmart only draws the wishlist glyph for the icon style; this element was
   created with a blank style, so the mark is supplied here. */
body.rv-petrol .whb-mobile-right .wd-header-wishlist .wd-tools-icon::before {
  content: "";
  display: block;
  width: 21px;
  height: 21px;
  background-color: currentColor;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1.1L12 21.2l7.7-7.7 1.1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1.1L12 21.2l7.7-7.7 1.1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");
}

body.rv-petrol .whb-mobile-right .wd-header-wishlist .wd-tools-icon { position: relative; display: grid; place-items: center; }
body.rv-petrol .whb-mobile-right .wd-header-wishlist .wd-tools-count {
  position: absolute;
  inset-block-start: -6px;
  inset-inline-end: -8px;
  min-width: 16px;
  height: 16px;
  padding-inline: 3px;
  border-radius: 8px;
  background-color: var(--rv-accent);
  color: var(--rv-bone);
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}


/* ==========================================================================
   58. THE THREE THAT WERE STILL WRONG

   Found from real screenshots on a real phone, not from my own iframe checks -
   those were giving me false passes and I kept reporting fixed work that was
   not fixed.

   1. HERO TEXT INVISIBLE. The overlay is z-index 1. I gave the content z-index
      2 by targeting .rv2-hero > .rv2-wrap - but the hero has no .rv2-wrap. Its
      child is .rv2-hero__panel. So the overlay covered every word.
   2. PAYMENT MARKS ENORMOUS. The CSS width was being overridden by something
      later in the cascade, so the SVGs scaled to their container. They now
      carry width and height ATTRIBUTES in the markup as well.
   3. WISHLIST LABEL. Scoped to a parent class that is not always present.
      Scoped to the element itself now.
   ========================================================================== */

/* 1 - the content, above the overlay */
body.rv-petrol .rv2-hero__panel { position: relative; z-index: 2; }
body.rv-petrol .rv2-hero__inner { position: relative; z-index: 2; }

/* 2 - marks that cannot inflate */
body.rv-petrol .rv2-foot__cards { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

body.rv-petrol .rv2-foot__card {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  width: 46px !important;
  max-width: 46px !important;
  height: 29px !important;
  min-width: 0;
}

body.rv-petrol .rv2-foot__card svg {
  width: 46px !important;
  height: 29px !important;
  max-width: 100%;
  display: block;
}

@media (max-width: 400px) {
  body.rv-petrol .rv2-foot__card,
  body.rv-petrol .rv2-foot__card svg { width: 42px !important; max-width: 42px !important; height: 26px !important; }
}

/* 3 - the label, wherever the theme puts it */
@media (max-width: 1024px) {
  body.rv-petrol .wd-header-wishlist .wd-tools-text,
  body.rv-petrol .wd-header-my-account .wd-tools-text,
  body.rv-petrol .wd-header-compare .wd-tools-text { display: none !important; }
}


/* ==========================================================================
   59. COLLECTION GRID ON MOBILE - REBUILT

   Written from scratch instead of patched again. The card was inheriting three
   sets of rules at once: the theme's base .rv2-cat (aspect-ratio 4/3,
   overflow hidden), the theme's grid variant .rv2 .rv2-grid .rv2-cat, and my
   own overrides. The image ended up sized by one rule and clipped by another,
   so it hung outside its own card.

   Specificity here is body.rv-petrol .rv2 .rv2-grid .rv2-cat (0,4,1), which
   beats the theme's 0,3,0, so nothing has to be fought with !important except
   the padding the theme sets inline on the image box.
   ========================================================================== */

@media (max-width: 900px) {

  /* Edge to edge: the section keeps its heading inset but the grid runs to the
     walls, which is what makes a phone layout feel like a catalogue. */
  body.rv-petrol .rv2-armoury .rv2-wrap { padding-inline: 0; }
  body.rv-petrol .rv2-armoury .rv2-head,
  body.rv-petrol .rv2-armoury .rv2-sechead { padding-inline: 14px; }

  body.rv-petrol .rv2 .rv2-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    padding: 0;
    margin: 0;
  }

  body.rv-petrol .rv2 .rv2-grid .rv2-cat {
    display: block;
    aspect-ratio: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background-color: var(--rv-bg);
    transform: none;
  }

  /* The image box: square, flush, no inset. */
  body.rv-petrol .rv2 .rv2-grid .rv2-cat__img {
    display: block;
    aspect-ratio: 1;
    padding: 0 !important;
    background: none;
    overflow: hidden;
  }

  body.rv-petrol .rv2 .rv2-grid .rv2-cat__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0 !important;
    display: block;
    transform: none !important;
  }

  /* Name and count sit under the image, tight. */
  body.rv-petrol .rv2 .rv2-grid .rv2-cat__meta {
    position: static;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px 13px;
    background: none;
    border: 0;
  }

  body.rv-petrol .rv2 .rv2-grid .rv2-cat__name {
    font-size: 14px;
    line-height: 1.25;
    letter-spacing: 0;
  }

  body.rv-petrol .rv2 .rv2-grid .rv2-cat__n {
    font-size: 12px;
    opacity: 0.6;
    flex: 0 0 auto;
  }

  /* The section itself no longer needs deep padding around a full-bleed grid. */
  body.rv-petrol .rv2-armoury { padding-block: var(--rv-space-lg); }
}

@media (max-width: 380px) {
  body.rv-petrol .rv2 .rv2-grid .rv2-cat__name { font-size: 13px; }
  body.rv-petrol .rv2 .rv2-grid .rv2-cat__meta { padding: 8px 10px 11px; }
}