/* ==========================================================================
   Ransack Viking - Forged Petrol
   BLOCK LIBRARY v3. The shared section vocabulary every page is built from.

   Purpose: stop each page inventing its own CSS. Before this file the site had
   eleven versions of one stylesheet, 75 KB, with every colour hardcoded and
   zero design tokens consumed. Every block here is built on tokens-2.css, so
   changing the palette is a token edit, not a find-and-replace.

   HOW TO USE
     <section class="rv-sec rv-sec--surface">
       <div class="rv-shell"> ...blocks... </div>
     </section>

   GROUND RHYTHM (hard rule from the design document)
   No two adjacent sections may share a ground OR a layout family. Cycle:
     rv-sec--light  -> white
     rv-sec--surface-> #F2F5F4
     rv-sec--petrol -> full-bleed #062930 (bone text)
     rv-sec--figure -> photograph under a petrol scrim

   Everything is scoped under .rv-petrol (body class from snippet 19) so it
   outranks Woodmart without !important, and so disabling snippet 19 still
   rolls the entire design layer back.

   Versioned in the FILENAME - LiteSpeed strips ?ver=. Bump to rv-blocks-2.css.
   ========================================================================== */

/* ==========================================================================
   1. SHELL AND SECTION
   ========================================================================== */

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

.rv-petrol .rv-shell--wide { max-width: var(--rv-container-wide); }
.rv-petrol .rv-shell--tight { max-width: 860px; }

.rv-petrol .rv-sec {
  position: relative;
  padding-block: var(--rv-space-2xl);
  background-color: var(--rv-bg);
  color: var(--rv-ink-soft);
  font-family: var(--rv-font-body);
  font-size: var(--rv-text-base);
  line-height: var(--rv-leading-body);
}

.rv-petrol .rv-sec--tight { padding-block: var(--rv-space-xl); }
.rv-petrol .rv-sec--flush-top { padding-block-start: 0; }
.rv-petrol .rv-sec--flush-bottom { padding-block-end: 0; }

.rv-petrol .rv-sec--light   { background-color: var(--rv-bg); }
.rv-petrol .rv-sec--surface { background-color: var(--rv-surface); }

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

/* A photograph under a petrol scrim. The second dark treatment, so two dark
   sections on one page never look identical. Set --rv-fig on the element. */
.rv-petrol .rv-sec--figure {
  background-color: var(--rv-petrol);
  background-image:
    linear-gradient(var(--rv-scrim), var(--rv-scrim)),
    var(--rv-fig, none);
  background-size: cover;
  background-position: center;
  color: var(--rv-bone-muted);
}

/* WAS a 100vw full-bleed escape. REMOVED.

   `width:100vw; margin-inline: calc(50% - 50vw)` only lands correctly when the
   parent's centre is the viewport's centre. Woodmart's shop and category
   templates render a 3-column LEFT sidebar, so the content area is offset to
   the right - the calculation then dragged every section off the left edge of
   the screen and widened the document, which shifted the header, product grid
   and footer with it.

   Sections now simply fill their parent. Any remaining .rv-bleed in markup is
   harmless. */
.rv-petrol .rv-bleed {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

/* ==========================================================================
   2. TYPE
   ========================================================================== */

.rv-petrol .rv-display,
.rv-petrol .rv-h2 {
  font-family: var(--rv-font-display);
  font-weight: 600;
  color: var(--rv-ink);
  letter-spacing: var(--rv-tracking-display);
  line-height: var(--rv-leading-display);
  margin: 0;
  /* Cinzel italic descenders (y g j p q) clip at tight leading. */
  padding-block-end: 0.06em;
}

.rv-petrol .rv-display { font-size: var(--rv-text-4xl); }
.rv-petrol .rv-h2      { font-size: var(--rv-text-3xl); }

.rv-petrol .rv-h3 {
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-xl);
  line-height: var(--rv-leading-heading);
  color: var(--rv-ink);
  margin: 0;
}

.rv-petrol .rv-h4 {
  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;
}

/* Rationed: at most one eyebrow per three sections. */
.rv-petrol .rv-eyebrow {
  display: block;
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-xs);
  letter-spacing: var(--rv-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rv-ink-muted);
  margin-block-end: var(--rv-space-sm);
}

.rv-petrol .rv-lede {
  font-size: var(--rv-text-lg);
  line-height: 1.65;
  color: var(--rv-ink-soft);
  max-width: var(--rv-measure);
  margin-block: var(--rv-space-md) 0;
}

.rv-petrol .rv-prose { max-width: var(--rv-measure); }
.rv-petrol .rv-prose > * + * { margin-block-start: var(--rv-space-md); }
.rv-petrol .rv-prose p { margin: 0; color: var(--rv-ink-soft); }
.rv-petrol .rv-prose strong { color: var(--rv-ink); font-weight: 600; }

.rv-petrol .rv-caption {
  font-size: var(--rv-text-sm);
  color: var(--rv-ink-muted);
}

/* The rule that sits UNDER a section heading. Flat petrol, never a gradient. */
.rv-petrol .rv-rule {
  display: block;
  width: 48px;
  height: 2px;
  border: 0;
  background-color: var(--rv-accent);
  margin: var(--rv-space-sm) 0 0;
}

/* The hairline that sits ABOVE a block, used instead of a card border. */
.rv-petrol .rv-hair {
  border: 0;
  border-block-start: 1px solid var(--rv-hairline);
  margin: 0;
}

/* --- Ink inversion on dark grounds --- */
.rv-petrol .rv-sec--petrol .rv-display,
.rv-petrol .rv-sec--petrol .rv-h2,
.rv-petrol .rv-sec--petrol .rv-h3,
.rv-petrol .rv-sec--petrol .rv-h4,
.rv-petrol .rv-sec--figure .rv-display,
.rv-petrol .rv-sec--figure .rv-h2,
.rv-petrol .rv-sec--figure .rv-h3,
.rv-petrol .rv-sec--figure .rv-h4 { color: var(--rv-bone); }

.rv-petrol .rv-sec--petrol .rv-lede,
.rv-petrol .rv-sec--petrol .rv-prose p,
.rv-petrol .rv-sec--figure .rv-lede,
.rv-petrol .rv-sec--figure .rv-prose p { color: var(--rv-bone-muted); }

.rv-petrol .rv-sec--petrol .rv-prose strong,
.rv-petrol .rv-sec--figure .rv-prose strong { color: var(--rv-bone); }

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

.rv-petrol .rv-sec--petrol .rv-rule,
.rv-petrol .rv-sec--figure .rv-rule { background-color: var(--rv-bone); }

.rv-petrol .rv-sec--petrol .rv-hair,
.rv-petrol .rv-sec--figure .rv-hair { border-block-start-color: var(--rv-hairline-bone); }

/* ==========================================================================
   3. SECTION HEADER (heading + rule + optional lede)
   ========================================================================== */

.rv-petrol .rv-sechead { margin-block-end: var(--rv-space-xl); }
.rv-petrol .rv-sechead--center { text-align: center; }
.rv-petrol .rv-sechead--center .rv-rule { margin-inline: auto; }
.rv-petrol .rv-sechead--center .rv-lede { margin-inline: auto; }

/* ==========================================================================
   4. BUTTONS
   Petrol fill on light grounds; bone fill on petrol grounds.
   ========================================================================== */

.rv-petrol .rv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rv-space-xs);
  padding: 15px 30px;
  background-color: var(--rv-accent);
  color: var(--rv-on-accent);
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-sm);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  border: 1px solid var(--rv-accent);
  border-radius: var(--rv-radius-md);
  cursor: pointer;
  transition: transform var(--rv-duration-fast) var(--rv-ease),
              opacity var(--rv-duration-fast) var(--rv-ease);
}

.rv-petrol .rv-btn:hover { color: var(--rv-on-accent); opacity: 0.9; }
.rv-petrol .rv-btn:active { transform: translateY(1px); }

.rv-petrol .rv-btn--ghost {
  background-color: transparent;
  color: var(--rv-accent);
  border-color: var(--rv-hairline-strong);
}
.rv-petrol .rv-btn--ghost:hover { color: var(--rv-accent); border-color: var(--rv-accent); }

.rv-petrol .rv-btn--wide { width: 100%; }

/* On petrol: invert. */
.rv-petrol .rv-sec--petrol .rv-btn,
.rv-petrol .rv-sec--figure .rv-btn {
  background-color: var(--rv-bone);
  color: var(--rv-petrol);
  border-color: var(--rv-bone);
}
.rv-petrol .rv-sec--petrol .rv-btn:hover,
.rv-petrol .rv-sec--figure .rv-btn:hover { color: var(--rv-petrol); }

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

.rv-petrol .rv-btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rv-space-sm);
  margin-block-start: var(--rv-space-lg);
}

.rv-petrol .rv-btn:focus-visible,
.rv-petrol .rv-faq__q:focus-visible {
  outline: 2px solid var(--rv-accent);
  outline-offset: 3px;
}
.rv-petrol .rv-sec--petrol .rv-btn:focus-visible,
.rv-petrol .rv-sec--figure .rv-btn:focus-visible { outline-color: var(--rv-bone); }

/* ==========================================================================
   5. LAYOUT FAMILY: SPLIT (asymmetric text + media)
   variance 0.55 - offset, not a 50/50 slab. Collapses at 900px.
   ========================================================================== */

.rv-petrol .rv-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rv-space-xl);
  align-items: center;
}

@media (min-width: 900px) {
  .rv-petrol .rv-split { grid-template-columns: 1.15fr 1fr; gap: var(--rv-space-2xl); }
  .rv-petrol .rv-split--media-lead { grid-template-columns: 1fr 1.15fr; }
  /* Media on the left without reordering the DOM (keeps reading order sane). */
  .rv-petrol .rv-split--flip .rv-split__media { order: -1; }
  .rv-petrol .rv-split--top { align-items: start; }
}

.rv-petrol .rv-split__media { position: relative; }

.rv-petrol .rv-split__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rv-radius-md);
}

/* Signature move: let the image sit at a different depth than the text. */
@media (min-width: 900px) {
  .rv-petrol .rv-split__media--offset { transform: translateY(24px); }
}

/* ==========================================================================
   6. LAYOUT FAMILY: HAIRLINE ROW (USPs, stats, trust points - never boxes)
   ========================================================================== */

.rv-petrol .rv-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rv-space-lg);
}

@media (min-width: 700px) { .rv-petrol .rv-row--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .rv-petrol .rv-row--3 { grid-template-columns: repeat(3, 1fr); }
  .rv-petrol .rv-row--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 560px) and (max-width: 899px) {
  .rv-petrol .rv-row--3,
  .rv-petrol .rv-row--4 { grid-template-columns: repeat(2, 1fr); }
}

.rv-petrol .rv-row__item { padding-block-start: var(--rv-space-md); border-block-start: 1px solid var(--rv-hairline); }
.rv-petrol .rv-sec--petrol .rv-row__item,
.rv-petrol .rv-sec--figure .rv-row__item { border-block-start-color: var(--rv-hairline-bone); }

.rv-petrol .rv-row__item p { margin: var(--rv-space-xs) 0 0; font-size: var(--rv-text-sm); color: var(--rv-ink-muted); }
.rv-petrol .rv-sec--petrol .rv-row__item p,
.rv-petrol .rv-sec--figure .rv-row__item p { color: var(--rv-bone-muted); }

.rv-petrol .rv-row__icon { display: block; width: 30px; height: 30px; margin-block-end: var(--rv-space-sm); color: var(--rv-accent); }
.rv-petrol .rv-sec--petrol .rv-row__icon,
.rv-petrol .rv-sec--figure .rv-row__icon { color: var(--rv-bone); }

/* ==========================================================================
   7. LAYOUT FAMILY: BENTO (one oversized cell + supporting cells)
   Deliberately NOT a row of three identical cards.
   ========================================================================== */

.rv-petrol .rv-bento { display: grid; grid-template-columns: 1fr; gap: var(--rv-space-md); }

@media (min-width: 900px) {
  .rv-petrol .rv-bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(200px, auto); }
  .rv-petrol .rv-bento__cell--lead { grid-column: span 2; grid-row: span 2; }
  .rv-petrol .rv-bento__cell--tall { grid-row: span 2; }
  .rv-petrol .rv-bento__cell--wide { grid-column: span 2; }
}

.rv-petrol .rv-bento__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 200px;
  padding: var(--rv-space-lg);
  border-radius: var(--rv-radius-md);
  background-color: var(--rv-surface);
  overflow: hidden;
  text-decoration: none;
}

/* Background variety - never six identical white cards. */
.rv-petrol .rv-bento__cell--petrol { background-color: var(--rv-petrol); }
.rv-petrol .rv-bento__cell--petrol .rv-h3 { color: var(--rv-bone); }
.rv-petrol .rv-bento__cell--petrol p { color: var(--rv-bone-muted); }

.rv-petrol .rv-bento__cell--wash { background-color: var(--rv-wash); }
.rv-petrol .rv-bento__cell--plain { background-color: var(--rv-bg); border: 1px solid var(--rv-hairline); }

.rv-petrol .rv-bento__cell--photo {
  background-image: linear-gradient(rgba(6,41,48,0.15), rgba(6,41,48,0.85)), var(--rv-fig, none);
  background-size: cover;
  background-position: center;
}
.rv-petrol .rv-bento__cell--photo .rv-h3 { color: var(--rv-bone); }
.rv-petrol .rv-bento__cell--photo p { color: var(--rv-bone-muted); }

.rv-petrol .rv-bento__cell p { margin: var(--rv-space-xs) 0 0; font-size: var(--rv-text-sm); color: var(--rv-ink-muted); }

/* ==========================================================================
   8. LAYOUT FAMILY: CARDS (collections, guides - image-led)
   ========================================================================== */

.rv-petrol .rv-cards { display: grid; grid-template-columns: 1fr; gap: var(--rv-space-lg); }
@media (min-width: 640px) { .rv-petrol .rv-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rv-petrol .rv-cards--4 { grid-template-columns: repeat(4, 1fr); } }

.rv-petrol .rv-card { display: block; text-decoration: none; }

.rv-petrol .rv-card__fig {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--rv-radius-md);
  background-color: var(--rv-surface);
}

.rv-petrol .rv-card__fig img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--rv-duration-base) var(--rv-ease-out);
}
.rv-petrol .rv-card:hover .rv-card__fig img { transform: scale(1.03); }

.rv-petrol .rv-card__body { padding-block-start: var(--rv-space-md); border-block-start: 1px solid var(--rv-hairline); margin-block-start: var(--rv-space-md); }
.rv-petrol .rv-card__body p { margin: var(--rv-space-xs) 0 0; font-size: var(--rv-text-sm); color: var(--rv-ink-muted); }

.rv-petrol .rv-sec--petrol .rv-card__body { border-block-start-color: var(--rv-hairline-bone); }
.rv-petrol .rv-sec--petrol .rv-card__body p { color: var(--rv-bone-muted); }

/* ==========================================================================
   9. LAYOUT FAMILY: PROCESS (rune-marked steps, no boxes, no numbers)
   ========================================================================== */

.rv-petrol .rv-steps { display: grid; grid-template-columns: 1fr; gap: var(--rv-space-lg); }
@media (min-width: 900px) { .rv-petrol .rv-steps { grid-template-columns: repeat(4, 1fr); gap: var(--rv-space-md); } }

.rv-petrol .rv-step { position: relative; padding-block-start: var(--rv-space-lg); }

/* The connecting thread between steps. */
.rv-petrol .rv-step::before {
  content: "";
  position: absolute;
  inset-block-start: 15px;
  inset-inline: 0;
  height: 1px;
  background-color: var(--rv-hairline);
}
.rv-petrol .rv-steps .rv-step:first-child::before { inset-inline-start: 15px; }
.rv-petrol .rv-steps .rv-step:last-child::before { inset-inline-end: 50%; }

.rv-petrol .rv-step__mark {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 30px; height: 30px;
  color: var(--rv-accent);
  background-color: var(--rv-bg);
  padding-inline-end: 8px;
}

.rv-petrol .rv-sec--surface .rv-step__mark { background-color: var(--rv-surface); }
.rv-petrol .rv-sec--petrol .rv-step__mark { background-color: var(--rv-petrol); color: var(--rv-bone); }
.rv-petrol .rv-sec--petrol .rv-step::before { background-color: var(--rv-hairline-bone); }

.rv-petrol .rv-step p { margin: var(--rv-space-xs) 0 0; font-size: var(--rv-text-sm); color: var(--rv-ink-muted); }
.rv-petrol .rv-sec--petrol .rv-step p { color: var(--rv-bone-muted); }

@media (max-width: 899px) {
  .rv-petrol .rv-step::before { inset-block-start: 15px; inset-inline: 0 auto; width: 1px; height: 100%; }
  .rv-petrol .rv-steps .rv-step:last-child::before { display: none; }
  .rv-petrol .rv-step { padding-inline-start: 46px; padding-block-start: 0; }
  .rv-petrol .rv-step__mark { inset-block-start: 0; }
}

/* ==========================================================================
   10. LAYOUT FAMILY: QUOTE BAND (single real customer voice)
   ========================================================================== */

.rv-petrol .rv-quote { max-width: 900px; margin-inline: auto; text-align: center; }

.rv-petrol .rv-quote__text {
  font-family: var(--rv-font-display);
  font-weight: 600;
  font-size: var(--rv-text-2xl);
  line-height: 1.3;
  color: var(--rv-bone);
  margin: 0;
}

.rv-petrol .rv-quote__cite {
  display: block;
  margin-block-start: var(--rv-space-md);
  font-family: var(--rv-font-heading);
  font-size: var(--rv-text-sm);
  letter-spacing: var(--rv-tracking-label);
  text-transform: uppercase;
  font-style: normal;
  color: var(--rv-bone-muted);
}

.rv-petrol .rv-sec--light .rv-quote__text,
.rv-petrol .rv-sec--surface .rv-quote__text { color: var(--rv-ink); }
.rv-petrol .rv-sec--light .rv-quote__cite,
.rv-petrol .rv-sec--surface .rv-quote__cite { color: var(--rv-ink-muted); }

/* ==========================================================================
   11. LAYOUT FAMILY: SPEC / COMPARISON TABLE
   ========================================================================== */

.rv-petrol .rv-table { width: 100%; border-collapse: collapse; font-size: var(--rv-text-sm); }

.rv-petrol .rv-table th,
.rv-petrol .rv-table td {
  padding: 14px 16px;
  text-align: start;
  border-block-end: 1px solid var(--rv-hairline);
  vertical-align: top;
}

.rv-petrol .rv-table th {
  font-family: var(--rv-font-heading);
  font-weight: 600;
  letter-spacing: var(--rv-tracking-label);
  text-transform: uppercase;
  font-size: var(--rv-text-xs);
  color: var(--rv-ink);
  white-space: nowrap;
}

.rv-petrol .rv-table td { color: var(--rv-ink-soft); font-variant-numeric: tabular-nums; }
.rv-petrol .rv-table tr:last-child th,
.rv-petrol .rv-table tr:last-child td { border-block-end: 0; }

.rv-petrol .rv-tablewrap { overflow-x: auto; }

.rv-petrol .rv-sec--petrol .rv-table th { color: var(--rv-bone); }
.rv-petrol .rv-sec--petrol .rv-table td { color: var(--rv-bone-muted); }
.rv-petrol .rv-sec--petrol .rv-table th,
.rv-petrol .rv-sec--petrol .rv-table td { border-block-end-color: var(--rv-hairline-bone); }

/* ==========================================================================
   12. LAYOUT FAMILY: FAQ (native details/summary - no JavaScript)
   ========================================================================== */

.rv-petrol .rv-faq { max-width: 860px; }
.rv-petrol .rv-faq__item { border-block-end: 1px solid var(--rv-hairline); }
.rv-petrol .rv-faq__item:first-child { border-block-start: 1px solid var(--rv-hairline); }

.rv-petrol .rv-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rv-space-md);
  padding-block: var(--rv-space-md);
  cursor: pointer;
  list-style: none;
  font-family: var(--rv-font-heading);
  font-weight: 600;
  font-size: var(--rv-text-base);
  color: var(--rv-ink);
}

.rv-petrol .rv-faq__q::-webkit-details-marker { display: none; }

.rv-petrol .rv-faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: 11px; height: 11px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--rv-duration-fast) var(--rv-ease);
}

.rv-petrol .rv-faq__item[open] .rv-faq__q::after { transform: rotate(225deg) translateY(-3px); }

.rv-petrol .rv-faq__a { padding-block-end: var(--rv-space-md); max-width: var(--rv-measure); color: var(--rv-ink-soft); }
.rv-petrol .rv-faq__a p { margin: 0; }
.rv-petrol .rv-faq__a > * + * { margin-block-start: var(--rv-space-sm); }

.rv-petrol .rv-sec--petrol .rv-faq__item,
.rv-petrol .rv-sec--petrol .rv-faq__item:first-child { border-color: var(--rv-hairline-bone); }
.rv-petrol .rv-sec--petrol .rv-faq__q { color: var(--rv-bone); }
.rv-petrol .rv-sec--petrol .rv-faq__a { color: var(--rv-bone-muted); }

/* ==========================================================================
   13. CTA BAND
   ========================================================================== */

.rv-petrol .rv-cta { display: grid; gap: var(--rv-space-lg); align-items: center; }
@media (min-width: 900px) { .rv-petrol .rv-cta { grid-template-columns: 1.4fr auto; gap: var(--rv-space-2xl); } }
.rv-petrol .rv-cta .rv-btnrow { margin-block-start: 0; }

/* ==========================================================================
   14. NORSE SYMBOLS, STAVES AND RUNE DIVIDERS
   Symbols come from the sprite injected in wp_footer by snippet 19:
     <svg class="rv-sym"><use href="#rv-valknut"></use></svg>
   ========================================================================== */

.rv-petrol .rv-sym { display: inline-block; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; vertical-align: middle; }
.rv-petrol .rv-sym--lg { width: 44px; height: 44px; }
.rv-petrol .rv-sym--xl { width: 72px; height: 72px; }

/* A large, low-contrast stave watermark behind a section. Decoration only -
   it is aria-hidden in markup and never carries meaning. */
.rv-petrol .rv-stave {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 4%;
  transform: translateY(-50%);
  width: 340px; height: 340px;
  color: var(--rv-accent);
  opacity: 0.05;
  pointer-events: none;
}
.rv-petrol .rv-sec--petrol .rv-stave,
.rv-petrol .rv-sec--figure .rv-stave { color: var(--rv-bone); opacity: 0.07; }
.rv-petrol .rv-stave--start { inset-inline: 3% auto; }
@media (max-width: 899px) { .rv-petrol .rv-stave { width: 200px; height: 200px; opacity: 0.04; } }

/* Rune band divider: a centred symbol with a hairline running through it. */
.rv-petrol .rv-runeband { display: flex; align-items: center; gap: var(--rv-space-md); color: var(--rv-accent); }
.rv-petrol .rv-runeband::before,
.rv-petrol .rv-runeband::after { content: ""; flex: 1 1 auto; height: 1px; background-color: var(--rv-hairline); }
.rv-petrol .rv-runeband .rv-sym { width: 26px; height: 26px; flex: 0 0 auto; }

.rv-petrol .rv-sec--petrol .rv-runeband { color: var(--rv-bone); }
.rv-petrol .rv-sec--petrol .rv-runeband::before,
.rv-petrol .rv-sec--petrol .rv-runeband::after { background-color: var(--rv-hairline-bone); }

/* ==========================================================================
   15. UTILITIES
   ========================================================================== */

.rv-petrol .rv-stack > * + * { margin-block-start: var(--rv-space-md); }
.rv-petrol .rv-stack-lg > * + * { margin-block-start: var(--rv-space-lg); }
.rv-petrol .rv-center { text-align: center; }
.rv-petrol .rv-relative { position: relative; }
.rv-petrol .rv-overflow-clip { overflow: hidden; }

.rv-petrol .rv-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Scroll reveal degrades to fully visible if the script never runs. */
.rv-petrol .rv-reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .rv-petrol .js-rv-reveal .rv-reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--rv-duration-base) var(--rv-ease-out), transform var(--rv-duration-base) var(--rv-ease-out); }
  .rv-petrol .js-rv-reveal .rv-reveal.is-in { opacity: 1; transform: none; }
}


/* ==========================================================================
   16. SURVIVING WOODMART'S GRID

   Shop, category and tag templates render <main> as a CSS grid
   (.wd-grid-g, --wd-col-lg:12) whose children are .wd-grid-col items: the
   sidebar at 3 columns and the content area at 9. Sections injected on the
   WooCommerce hooks land as direct children of that grid WITHOUT a column
   span, so auto-placement gave them a min-content track - the petrol hero
   collapsed into a ~50px strip with one word per line.

   Anything of ours that ends up as a direct grid child spans the full row.
   ========================================================================== */

.rv-petrol .wd-grid-g > .rv-sec,
.rv-petrol .wd-grid-g > .rv-bleed {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

/* Same guard one level in, for templates that wrap the loop in another grid. */
.rv-petrol .wd-content-area > .rv-sec {
  width: 100%;
  min-width: 0;
}

/* A grid child cannot be narrower than its content unless min-width is reset;
   without this the shell keeps the collapsed track alive. */
.rv-petrol .rv-sec > .rv-shell { min-width: 0; }