/* =======================================================================
   RV LAYOUT, MOBILE AND TABLET PATCH  |  rv-layout-mobile-7.css
   Loads AFTER rv-layout-mobile-6.css, which stays exactly as it is.

   THIS FILE IS A PATCH LAYER, NOT A REPLACEMENT FOR v6.
   Everything here is inside @media (max-width: 1024px). Nothing sits
   outside it. v6 keeps every rule it owns: the buy bar stacking band and
   its footer clearance, the shell and hero pinning, the one mobile rail,
   the touch target sweep across the header, the archive tool bar, product
   cards, the add to cart row, cart and checkout and My Account, the
   homepage trust badges, the wide content guards, the tablet container
   rail, the readable ink in the category lede and the full bleed bands.
   None of that is touched or repeated here.

   WHAT v7 ADDS, and only this

     1. Category, tag and shop archives are put back on the one mobile
        rail. An inline style block printed after every stylesheet was
        pushing them to 24px while the rest of the site sat on 18px.
     2. The specification table on a product page is made to fit by
        construction instead of being silently clipped.
     3. The homepage sticky call to action is moved into the same stacking
        band v6 gave the buy bar, and the back to top button is lifted
        clear of it so raising one does not bury the other.
     4. The small type token is raised to the 16px floor below 1025px, and
        pinned so the desktop layer's larger scale cannot reach mobile.
     5. The running prose that carries a hardcoded 15px and never reads
        that token is raised to the same floor.
     6. Two colours fail their contrast threshold on white. Both are
        stepped down the same hue until they pass.

   WHERE !important IS USED, AND WHAT IT BEATS
   v6 needed none. This file needs it in exactly two places, both against
   an inline <style> block that a plugin or a snippet prints in wp_head
   AFTER the stylesheets, already carrying !important of its own:

     section 1   rv-cat-gutter-css, printed at wp_head priority 98
     section 6   rv-loop-stars-atc and rv-shw-enhance, printed at 99

   An !important declaration printed later in the document beats an equal
   specificity !important declaration in a stylesheet, so matching their
   selectors would lose. Every rule in those two sections therefore carries
   a higher specificity than the block it is answering, and the report
   states the pair of numbers for each one. Nothing else in this file uses
   it, because a plain selector one class deeper already wins.
   ========================================================================== */

@media (max-width: 1024px) {

/* --------------------------------------------------------------------------
   0. TOKENS FOR THIS LAYER

   --rv-z-buybar is v6's, declared in the same media range and still in
   scope here. The fallback is the same 380 so this file still behaves if
   v6 is ever unwired ahead of it.
   -------------------------------------------------------------------------- */

:root {
  /* The homepage sticky bar measures about 89px at 390px: 8px of block
     padding, a single line of strip copy, a 10px gap and a 44px button.
     112px is not a new number. It is what rv-mobile-chrome already reserves
     for this bar in the footer, so the offset below and that reserve agree
     rather than each guessing separately. */
  --rv-sticky-h: 112px;
}

/* --------------------------------------------------------------------------
   1. ONE RAIL ON CATEGORY, TAG AND SHOP ARCHIVES

   v6 section 4 put the whole site on one mobile rail: --rv-gutter, which is
   18px on a phone and 20px on a tablet. On a product category, product tag
   or shop archive that rail is undone after the fact.

   wp-content/mu-plugins/rv-cat-gutter.php prints <style id="rv-cat-gutter-css">
   on wp_head at priority 98. Stylesheets print at priority 8, so that block
   lands after every file in the design system, and inside @media
   (max-width:1024px) it declares:

     body.rv-petrol .rv-sec .rv-shell           padding 24px !important
     main.content-layout-wrapper.container,
     main.wd-content-layout.container           padding 24px !important
     .wd-content-area .wd-term-desc,
     .wd-content-area .rv-featured              padding  4px !important

   Measured against the rest of the page at 390px, a category archive runs
   its bands and its product grid at 24px and its long copy at 28px, while
   the footer below and every other page type sit on 18px. Three rails on
   one screen.

   WHY THESE SELECTORS LOOK THE WAY THEY DO
   Both sides carry !important, so the cascade is decided on specificity and
   then on document order. The inline block is later in the document, so an
   equal selector loses. Each rule below is therefore one step more specific
   than the declaration it answers:

     .rv-sec .rv-shell      theirs 0,3,1   mine 0,3,2   html prefix
     main.container         theirs 0,2,1   mine 0,3,3
     .wd-term-desc          theirs 0,3,0   mine 0,4,2

   The physical longhands are used rather than padding-inline, so the two
   declarations meet head on as the same property and specificity alone
   settles it.

   WHAT THE VALUES ARE
   Not invented. .rv-shell goes back to var(--rv-gutter), which is what
   rv-blocks-3 declares for it everywhere else. The main container goes back
   to var(--rv-gutter) from 768px up, which is what v6 section 13 already
   gives every other page, and to 15px below 768px, which is Woodmart's own
   value in css/parts/base.min.css and the value v6 section 13 deliberately
   leaves alone there. The term description inset goes to zero so the long
   copy starts on the same x as the grid above it.
   -------------------------------------------------------------------------- */

html body.rv-petrol .rv-sec .rv-shell {
  padding-left: var(--rv-gutter) !important;
  padding-right: var(--rv-gutter) !important;
}

html body.rv-petrol main.content-layout-wrapper.container,
html body.rv-petrol main.wd-content-layout.container {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

@media (min-width: 768px) {
  html body.rv-petrol main.content-layout-wrapper.container,
  html body.rv-petrol main.wd-content-layout.container {
    padding-left: var(--rv-gutter) !important;
    padding-right: var(--rv-gutter) !important;
  }
}

html body.rv-petrol .wd-content-area .wd-term-desc.wd-entry-content,
html body.rv-petrol .wd-content-area .rv-featured {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* --------------------------------------------------------------------------
   2. THE SPECIFICATION TABLE ON A PRODUCT PAGE

   Every product description ends in <table class="rv-spec">. The styling
   comes from wp-content/mu-plugins/rv-product-policy.php, printed inline on
   wp_head at priority 20, and it says:

     .rv-spec      width 100%, font-size 15px
     .rv-spec th   width 38%, white-space: nowrap

   There is no table-layout: fixed and no scrolling wrapper, so the 38% is a
   suggestion the auto layout is free to ignore, and nowrap means the widest
   label decides the column. "Overall length" at 15px semibold, plus the
   28px of cell padding, is about 129px inside a 354px column. It clears by
   roughly 4px at 390px and does not clear at 360px.

   Nothing shows when it fails. html carries overflow-x: hidden and body
   carries overflow-x: clip, so the overflow is thrown away rather than
   scrolled, and the right hand end of a specification row is simply gone
   with no scrollbar to hint at it. Section 5 raises this table to the 16px
   floor as well, which makes the label wider still, so the table has to be
   correct by construction rather than correct by luck.

   table-layout: fixed makes the 38% real and lets the label wrap onto a
   second line when it needs one. overflow-wrap covers a long unbroken value
   such as a model code. No wrapper, no scroll, no clipping relied on.

   The inline block carries no !important, so one extra class wins:
   .rv-spec th is 0,1,1 and body.rv-petrol .rv-spec th is 0,2,1.
   -------------------------------------------------------------------------- */

body.rv-petrol .rv-spec {
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
}

body.rv-petrol .rv-spec th {
  width: 38%;
  white-space: normal;
  overflow-wrap: break-word;
}

body.rv-petrol .rv-spec td {
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   3. THE HOMEPAGE STICKY CALL TO ACTION

   .rv2-sticky is the bar at the foot of the homepage. petrol-v12-3 gives it
   position: fixed and z-index: 30, and petrol-chrome-34 pins it to bottom 0.
   The theme's own fixed furniture, unchanged since v6 measured it:

     a.scrollToTop            350
     .wd-close-side           400
     .wd-search-full-screen   400
     .mobile-nav              500
     .cart-widget-side        500

   So the round back to top button paints straight through the bar, over the
   strip copy and next to the button, exactly as it did over the buy bar
   before v6 section 1. Same fault, same answer: the bar moves into the one
   band that clears the back to top button without climbing over the search
   overlay or the off canvas menu. It reads v6's own token so there is one
   number for both sticky bands, not two that can drift apart.

   THE SECOND HALF OF THIS IS THE BACK TO TOP BUTTON ITSELF
   Raising the bar above 350 buries the button underneath it: the button
   sits at bottom 12px and is 40px square below 1024px, and the bar is about
   89px tall from bottom 0, so the whole control ends up behind it. The
   button is lifted clear by the bar's reserve plus its own 12px offset.
   Woodmart does the same thing for its own bottom toolbar in
   css/parts/opt-bottom-toolbar.min.css, so this follows the theme rather
   than introducing a second idea.

   The lift is keyed off :has(.rv2-sticky), the way v6 keys the buy bar
   clearance off :has(#rv-buybar:not([hidden])). A browser without :has()
   matches nothing and the page behaves exactly as it does today. It
   degrades to the current state, not to a broken one.

   NO BODY CLEARANCE IS ADDED HERE, ON PURPOSE. The buy bar needed it
   because body had padding-bottom: 0. This bar does not: petrol-v12-3
   reserves 150px on .rv2-foot below 1025px and rv-mobile-chrome trims that
   to 112px below 900px, both of which already clear an 89px to 97px bar.
   Adding a second reserve on top of the first would put roughly 200px of
   dead ground under the footer on the homepage. See the report.
   -------------------------------------------------------------------------- */

body.rv-petrol .rv2-sticky {
  z-index: var(--rv-z-buybar, 380);
}

body.rv-petrol:has(.rv2-sticky) a.scrollToTop,
body.rv-petrol:has(.rv2-sticky) .scrollToTop {
  bottom: calc(var(--rv-sticky-h) + 12px);
}

/* --------------------------------------------------------------------------
   4. THE TYPE SCALE BELOW 1025px

   tokens-7 declares the whole scale on :root with no media query around it,
   and then raises only --rv-text-base inside @media (min-width: 1024px).
   So the state below 1025px today is:

     --rv-text-xs     12px    eyebrows and micro labels
     --rv-text-sm     15px    and it never changes at any viewport
     --rv-text-base   17px    except at exactly 1024px, where it is 18px
     --rv-text-lg     19px
     --rv-text-xl     22px

   --rv-text-sm is not a caption token in practice. It is the size of real
   body copy in .rv-row__item p, .rv-step p, .rv-card p, .rv-guide__body p
   and .rv-assure li, which is running prose a customer reads to decide
   what to buy. 15px is under the 16px floor and it is the same 15px on a
   phone as on a 1024px tablet. It goes to 16px here.

   THE OTHER THREE ARE PINNED, NOT CHANGED
   The desktop layer is raising base, sm, lg and xl inside
   @media (min-width: 1025px). That query cannot match anything this file
   sees, so it does not leak. The pins below are belt and braces so that a
   later widening of that query still cannot move mobile, and so the one
   pixel overlap between tokens-7's min-width: 1024 and this file's
   max-width: 1024 resolves in favour of the mobile value. Mobile body is
   17px and stays 17px, which is what that overlap was quietly breaking at
   exactly 1024px wide.

   --rv-text-xs is deliberately left at 12px. So are the 13px button tier,
   the breadcrumb trail and the top strip. None of them is running prose and
   all of them sit in containers sized for the current value.
   -------------------------------------------------------------------------- */

:root {
  --rv-text-sm:   16px;
  --rv-text-base: 17px;
  --rv-text-lg:   19px;
  --rv-text-xl:   22px;
}

/* --------------------------------------------------------------------------
   5. THE RUNNING PROSE THE TOKEN DOES NOT REACH

   Raising --rv-text-sm fixes every block that reads it. These five do not
   read it. Each one carries a hardcoded 15px and each one is running prose,
   so each one would have been left a pixel tier below everything around it:

     .rv2-steps__v     petrol-v12-3 line 280, the copy under a numbered step
     .rv-g-triple__v   petrol-v12-3 line 1210, the copy in a guide triple
     .rv-p-spec dd     petrol-v12-3 line 1504, the value in a product spec
     .rv-spec          rv-product-policy.php, the product spec table
     .rv-rv__body      rv-reviews.php, the review text itself, on the
                       reviews page and in the homepage strip

   The first three sit in petrol-v12-3, which loads before this file, so a
   selector of equal or greater weight wins on order alone. The last two are
   printed inline after the stylesheets but carry no !important, so one
   extra class wins on specificity. Neither case needs !important.

   .rv-engsym__meaning is the last one and the smallest. Snippet 38 sets it
   to 11px. It is the plain English meaning printed under each rune and
   symbol in the engraving picker, which is the copy a customer reads to
   choose what gets forged into a blade they cannot return. 11px is not a
   label size for that job. It goes to 14px, which is the smallest size on
   this site that still reads as text rather than as a footnote, and it is
   left below the 16px floor because the symbol tiles are a fixed grid and
   the meaning is a caption on a glyph, not a paragraph.
   -------------------------------------------------------------------------- */

body.rv-petrol .rv2-steps__v,
body.rv-petrol .rv-g-triple__v,
body.rv-petrol .rv-p-spec dd,
body.rv-petrol .rv-spec,
body.rv-petrol .rv-rv__body {
  font-size: var(--rv-text-sm);
}

body.rv-petrol .rv-engsym__meaning {
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   6. CONTRAST ON THE REVIEW LINKS AND THE STAR GLYPHS

   Two colours on white, both printed by inline snippet CSS, both short of
   their threshold. Neither is replaced. Each is stepped down its own hue by
   scaling all three channels by one factor, which holds the hue exactly
   because hue is a ratio of the channel differences and a common factor
   cancels out of it. The ratios below are relative luminance per WCAG 2.2,
   sRGB linearised, (L1 + 0.05) / (L2 + 0.05), against #FFFFFF.

   THE RUST, ON TEXT, THRESHOLD 4.5
   rv-reviews.php declares --rv-rust: #C05A22 on .rv-rv and spends it on two
   things: .rv-rv__item, the review title link, and .rv-rv__stars, the star
   glyphs. Both sit on a #FFFFFF card.

     #C05A22   L 0.18636   ratio 4.44   fails
     #B85621   L 0.16960   ratio 4.78   passes

   #B85621 is #C05A22 with every channel at 96 percent, rounded: 192 90 34
   becomes 184 86 33. Hue 21.3 degrees becomes hue 21.1 degrees. It is the
   smallest step that clears 4.5 with room for the rounding, and it is made
   once on the custom property so both consumers move together and no new
   colour appears anywhere.

   .rv-rv__stars--off stays at #D8D2C6. It is 1.50 on white, which against
   the new 4.78 fill leaves 3.18 between a filled star and an empty one, so
   that component already tells four stars from five.

   THE GOLD, ON GLYPHS, THRESHOLD 3
   Snippets 62 and 63 print the product loop and homepage card stars. The
   filled glyph is #C9A84C and the empty track is the same colour at 28
   percent over white.

     #C9A84C              L 0.40933   ratio 2.29   fails
     #A98D40              L 0.27856   ratio 3.20   passes
     track at 0.28 alpha  composites to #F0E7CD, ratio 1.23
     track at 0.55 alpha  composites to #D0C096, ratio 1.80

   #A98D40 is #C9A84C with every channel at 84 percent, rounded: 201 168 76
   becomes 169 141 64. Hue 44.2 degrees becomes hue 44.0 degrees.

   THE TRACK ALPHA IS CHOSEN, NOT GUESSED. A track has two boundaries that
   both have to be visible: against the white card behind it, and against
   the filled glyph beside it. Darkening the track helps the first and hurts
   the second, so there is a single alpha where the weaker of the two is as
   strong as it can be. Solving (Lt + 0.05) squared = 1.05 x 0.32856 puts
   that point at Lt 0.5374, which is 0.55 alpha. Both boundaries land on
   1.80 and 1.78. At the old 0.28 the track was 1.23 against the card, which
   is why the fifth position on a four star product read as empty page
   rather than as an unfilled star.

   WHY THESE SELECTORS CARRY !important
   The star rules are printed by snippets 62 and 63 on wp_head at priority
   99, after the stylesheets, and they already carry !important. An equal
   selector printed earlier loses, so each rule below is one step more
   specific than the one it answers:

     .products .star-rating span::before    theirs 0,3,3   mine 0,3,4
     .products .star-rating::before         theirs 0,3,2   mine 0,3,3
     .rv-shw__stars .star-rating span       theirs 0,2,2   mine 0,3,4
     .rv-shw__stars .star-rating::before    theirs 0,2,1   mine 0,3,3

   The rust needs none of that. .rv-rv declares the property with no
   !important, so body.rv-petrol .rv-rv at 0,2,1 beats .rv-rv at 0,1,0.
   -------------------------------------------------------------------------- */

body.rv-petrol .rv-rv {
  --rv-rust: #B85621;
}

html body.rv-petrol .products .star-rating span::before,
html body.rv-petrol .product-wrapper .star-rating span::before,
html body.rv-petrol .rv-shw__stars .star-rating span::before {
  color: #A98D40 !important;
}

html body.rv-petrol .products .star-rating::before,
html body.rv-petrol .product-wrapper .star-rating::before,
html body.rv-petrol .rv-shw__stars .star-rating::before {
  color: rgba(169, 141, 64, 0.55) !important;
}

} /* end @media (max-width: 1024px) */