/* =====================================================================
   HIGH TECH HEALTH — NAVIGATION  (hth-nav.css)
   v1.4 — restyle Jevelin's menu, and give Superfish's state a duration.
   v1.2 adds §13, the cart panel (the WooCommerce mini-cart under the
   cart icon). Nothing above §13 changed.
   v1.3 adds §14, the mobile flyout's leaf items (blank row under For
   Business, phone icon on its own row). Nothing above §14 changed.
   v1.4 adds §15 (Saunas panel fits short desktop windows, 2026-10-21)
   and §16 (bar stays on one row at 1026-1099px). Nothing above §15
   changed except the §11 verification note.
   ---------------------------------------------------------------------
   WHAT v1.1 FIXED, all four found in use rather than in review:

     1. Flicker when hovering a panel with the bar stuck. A 16px dead
        band opens between item and panel in the sticky state. §2b.
     2. The hover pill was Jevelin's blue gradient, not our sand. A
        background-image outranks a background-color by paint order, not
        by cascade — §6.
     3. Vertical column rules crossing the heading hairlines. §4.
     4. Clicking a top-level item pinned a blank panel over everything.
        :focus-within matches a mouse click; :has(:focus-visible) does
        not — §2.
   ---------------------------------------------------------------------
   Companion to ds/hth-header.css. That file eases the BAR. This file
   restyles and eases what hangs off it: the two mega panels (Saunas,
   Learn) and the plain dropdown (Support).

   ---------------------------------------------------------------------
   THE MECHANISM, AND WHY IT IS THE SAME ONE AS THE HEADER

   hth-header.css is built on the rule that Jevelin owns the sticky class
   and we never write it — agree exactly, or become the sole writer.

   The menu has the same shape of problem with a different writer.
   Superfish shows and hides each panel by writing INLINE STYLE:

       open    style="display: block; margin-top: 0px;"
       closed  style="display: none;  margin-top: -10px;"

   `display` cannot be transitioned, so as shipped there is nothing to
   ease. Measured on the live nav, Superfish's options were:

       speed      500      slow fade in   (jQuery .animate, main thread)
       speedOut   0        instant snap out
       delay      700      0.7s of dead air before it closes
       animation  { opacity:'show', marginTop:'0px' }

   Slow in, instant out, and the property being animated is margin-top —
   a layout property, animated from JavaScript, on every hover.

   We take the same position the header file takes. SUPERFISH KEEPS
   OWNING THE STATE. It still decides when a panel is open, it still runs
   hoverIntent, it still handles touch. All it loses is the pixels:

     1. hth-nav.js sets speed/speedOut to 0 in Superfish's own options
        object, so jQuery stops animating and only writes the two inline
        declarations above. It does NOT destroy, re-init or unbind.
     2. §2 below neutralises those two declarations with !important
        (a stylesheet !important outranks a non-important inline style),
        so `display` and `margin-top` are constant and inert.
     3. The panel is then driven entirely from `.sh-hover` — the class
        SUPERFISH ITSELF writes on the <li> — plus :has(:focus-visible),
        using
        opacity and transform. Compositor-only, symmetric, keyboard-
        reachable, and there is no second opinion about when a panel is
        open because we never form one.

   This file therefore writes no state and binds no events. Same contract
   as hth-header.js.

   ---------------------------------------------------------------------
   FOUR TRAPS IN THIS MARKUP — all measured, all fail quietly

   A. DO NOT PUT `position: relative` ON THE TOP-LEVEL <li>.
      The mega panel is position:absolute with width:100%, and the
      nearest positioned ancestor is `.sh-header > .container` — which is
      relative only because hth-header.css §1 made it so. Make the <li>
      relative and the containing block becomes the menu item: a 1336px
      full-width panel silently collapses to about 117px. That is also
      why the underline in §1 is painted with a background gradient
      rather than a positioned pseudo-element.

   B. `a::after` IS ALREADY IN USE by the theme (content: "") on every
      top-level link. `li::after` is free. Neither is used here for the
      reason in trap A, but do not assume `a::after` is yours.

   C. THE MOBILE BAR SHARES THE `.sh-nav` CLASS. `.sh-header-mobile`
      contains its own `ul.sh-nav` with its own `ul.sub-menu` children.
      Every selector in this file is scoped to
      `.sh-header.sh-sticky-header` for that reason. This is the same
      mistake hth-header.css v2.2 shipped — see obstacle C in that file.

   F. THE MEGA PANEL CLIPS ITS OWN OVERFLOW (`overflow: hidden`, from
      style.css). Anything you draw outside the panel — notably the hover
      bridge in §2b — is invisible AND un-hittable while that holds, with
      a perfectly correct-looking computed box. §3 turns it off.

   E. THE TOP-LEVEL LINK'S PADDING CHANGES WITH THE STICKY STATE
      (30px 0 -> 15px 0). Anything positioned from the edge of that box
      moves with it. See the note in §1.

   D. THE CART IS A MENU ITEM. `li.sh-nav-cart.sh-nav-special` sits in
      the same `.sh-nav` and carries its own `ul.sub-menu`, opened by
      WooCommerce as well as by hover. It is excluded everywhere via
      :not(.sh-nav-cart). Do not fold it in to save a selector.
      §13 styles it on its own, anchored on li.sh-nav-cart, and leaves
      its open/close to Superfish exactly as shipped.

   ---------------------------------------------------------------------
   THE !IMPORTANT LEDGER — read before adding or removing one

   hth-header.css obstacle B says !important is correct in exactly one
   situation: restoring a declaration that an existing !important removed,
   rather than winning a normal cascade fight. Every !important in this
   file is that case, and this is the audit that justifies it. All of it
   was read off the live page, not assumed.

   Jevelin enforces its mega-menu skin from THREE places, all marked
   important, so specificity alone never reaches them:

     style.css
       .mega-menu-row                       padding 16px 0
       .sh-header-megamenu-style2
         .mega-menu-row                     border-radius 2px
                                            box-shadow 0 10px 60px / .08
         .mega-menu-col                     padding 0 25px 0 15px
         .mega-menu-col > a                 padding 0 15px 4px
                                            font-weight 800
         .sh-nav > li:not(.has-mega) > ul   padding 16px 25px 16px 15px
                                            border-radius 2px, box-shadow
       .mega-menu-row .menu-item ul a       color #b0b0b0
       .sh-nav ul.mega-menu-row             overflow hidden  (NORMAL —
                                            beaten on specificity, §3)

     jevelin-dynamic-styles.css   (generated from Theme Options)
       .sh-nav .mega-menu-row > li          border-right 1px #f1f1f1
       .sh-header .sh-nav > li ul           background-color #fff
       .sh-header .sh-nav ul                color #484848
       .sh-header .sh-nav > li ul a         color #7e7e7e
       .sh-nav ul.mega-menu-row .col > a    color #484848

     an inline <style> block in the document head   (also Theme Options)
       ul.sub-menu > li.menu-item > a       font-size 18px

   That last one is why BOTH the column headings and every leaf link sit
   at 18px no matter what this file declares at any specificity. It is
   generated markup, so it cannot be edited out — only matched.

   So the ledger is: panel padding / radius / shadow, column padding and
   border, heading font-size / weight / colour / margin / padding, leaf
   font-size / colour, and the plain dropdown's padding / radius.
   Nothing else.

   TWO THINGS THAT LOOK LIKE LEDGER ENTRIES AND ARE NOT, both v1.1 bugs
   that !important would have papered over without fixing:

     overflow on the mega row is NORMAL priority — §3 beats it on
     specificity alone, and reaching for !important there would have
     hidden that the real question was which element clips the bridge.

     the blue hover gradient is NORMAL priority too, and no amount of
     !important on background-COLOR would ever have removed a background-
     IMAGE. The fix was the `background` shorthand. When an override
     "isn't working", check you are fighting the right PROPERTY before
     you decide you are losing a cascade fight.

   THE TEST FOR ADDING ONE: find the theme rule that is beating you and
   confirm it carries !important. If it does not, your selector is wrong
   — fix the selector. Every !important added without that check is how a
   stylesheet stops being editable.

   IF A FUTURE THEME UPDATE DROPS THESE. Nothing breaks: an !important
   with no opponent behaves exactly like a normal declaration. The ledger
   goes stale, not the CSS.

   ---------------------------------------------------------------------
   THE GATE

   §2 (motion) is gated on `body.hth-nav-ready`, written by hth-nav.js
   only after it has successfully reached Superfish's options object and
   zeroed the animation. If the JS does not run, or Jevelin changes where
   it stores those options, the forcing rules never arm, jQuery keeps
   animating inline opacity, and you get Jevelin's original menu. The
   styling in §3-§7 still applies. Degraded, not broken — same failure
   posture as `hth-hdr-ready`.

   ---------------------------------------------------------------------
   MEASURED RESULT (transition sampled by driving currentTime, because a
   backgrounded tab does not advance transitions in wall-clock time):

     t        opacity   translateY
     0ms      0.00      -6.00px
     60ms     0.70      -1.81px
     120ms    0.91      -0.51px
     180ms    0.99      -0.09px
     240ms    1.00       0

   Front-loaded, because --hth-expo is front-loaded. That is the house
   curve and the point of it — see §6 of hth-ds.css. Do not swap it for
   an ease-in-out here just because this is a menu.
   ===================================================================== */

body.hth-ds .sh-header.sh-sticky-header {

	/* Open is slower than close. A menu that closes lazily feels stuck
	   to the cursor; one that opens instantly feels twitchy. */
	--hth-nav-dur:     .24s;
	--hth-nav-dur-out: .18s;
	--hth-nav-ease:    var(--hth-expo, cubic-bezier(.165, .84, .44, 1));

	/* How far the panel drops in. Small on purpose: this reads as the
	   panel settling, not as it flying in from off-screen. */
	--hth-nav-lift:    6px;

	/* Height of the hover bridge in §2b. Must exceed the dead band that
	   opens up in the sticky state — measured at 16px. */
	--hth-nav-bridge:  24px;

	--hth-nav-panel:   var(--hth-white, #fff);
	--hth-nav-pad:     var(--hth-7, 48px);
	--hth-nav-rule:    var(--hth-line, rgba(35, 48, 60, .14));
}


/* ---------------------------------------------------------------------
   1. TOP-LEVEL ITEMS
   ---------------------------------------------------------------------
   As shipped: Montserrat 18px/700. The design system's own note (§3 of
   hth-ds.css) is that heavy weights at large sizes read as "sale flyer".
   18/700 in a navigation bar is exactly that, and 18px is also wider
   than it needs to be with six items competing for the right half of a
   1336px container.

   Colour is deliberately NOT set here. hth-header.css §4 transitions
   these links from white to ink as the bar goes sticky; setting a colour
   would either fight that or freeze it. The underline below uses
   currentColor, so it follows that transition for free.
   ------------------------------------------------------------------ */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item > a {
	font-family: var(--hth-f-display) !important;
font-optical-sizing: auto;
font-size:      19px;
font-weight:    500;
letter-spacing: var(--hth-tr-sm);

	/* Trap A: a gradient, not a pseudo-element, so nothing here needs a
	   positioned ancestor.

	   TRAP E — `background-origin: content-box` IS LOAD-BEARING.
	   Jevelin changes this link's padding between states: 30px 0 at rest,
	   15px 0 once the bar is sticky. Measured, both states. With the
	   default border-box origin, an offset picked to sit under the text
	   at rest lands in the MIDDLE of it when sticky — a strikethrough,
	   not an underline. content-box measures from the line box instead,
	   which is 40px tall in both states, so the rule holds position
	   through the whole transition and through any future padding change.

	   `100%` in background-size resolves against that same content box,
	   i.e. the width of the text. That is what makes the underline the
	   width of the label rather than the width of the menu item.

	   Line-height is deliberately NOT set here. It resolves the header's
	   100px height, which hth-header.js measures at startup — see
	   obstacle A in hth-header.css. Changing it moves the bar. */
	background-image:    linear-gradient(currentColor, currentColor);
	background-repeat:   no-repeat;
	background-origin:   content-box;
	background-position: center bottom 10px;
	background-size:     0 1.5px;
	transition:          background-size var(--hth-nav-dur) var(--hth-nav-ease);
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item:hover > a,
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item.sh-hover > a,
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.current-menu-ancestor > a,
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.current-menu-item > a {
	background-size: 100% 1.5px;
}

/* Keyboard focus, in a rule of its own. See KEYBOARD, NOT CLICKS above. */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item:has(:focus-visible) > a {
	background-size: 100% 1.5px;
}

/* The phone number is a call to action, not a section. Give it the
   underline permanently so it reads as one. */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item:not(.menu-item-has-children):not(.sh-nav-cart) > a[href^="tel:"] {
	background-size: 100% 1.5px;
	font-weight:     600;
}


/* ---------------------------------------------------------------------
   1b. THE DROPDOWN CHEVRON
   ---------------------------------------------------------------------
   Jevelin draws it as a FontAwesome glyph in `a::after` — which is trap
   B: this pseudo-element is the theme's, and the only reason it is safe
   to touch here is that we change nothing about its content, position or
   size, only its transform.

   Its computed transition is `all 0s`, exactly like everything else in
   this header. So the arrow sat still while the panel it describes
   opened. Rotating it is the cheapest possible signal that the two
   things are the same event.

   `display: inline-block` is required, not cosmetic: an inline box
   cannot be transformed, so without it the rotation silently does
   nothing. Verified that it costs no layout — the link is 69px wide
   either way, so the underline in §1, which resolves 100% against that
   same box, does not move when a panel opens.
   ------------------------------------------------------------------ */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item-has-children:not(.sh-nav-cart) > a::after {
	display:    inline-block;
	transition: transform var(--hth-nav-dur) var(--hth-nav-ease);
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item-has-children.sh-hover:not(.sh-nav-cart) > a::after {
	transform: rotate(180deg);
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item-has-children:not(.sh-nav-cart):has(:focus-visible) > a::after {
	transform: rotate(180deg);
}


/* ---------------------------------------------------------------------
   2. THE PANEL — MOTION.  Gated on .hth-nav-ready.
   ---------------------------------------------------------------------
   Read the mechanism note at the top of this file before editing.

   The two !important declarations are the whole trick, and they are the
   same category of !important as hth-header.css §3: not winning a normal
   cascade fight, but overriding an inline style written by code we are
   deliberately not unbinding.

   `visibility` is what keeps a closed panel out of the tab order and out
   of the accessibility tree — opacity:0 alone leaves 46 links keyboard-
   focusable behind an invisible panel. It is stepped, not interpolated,
   so it is delayed to the end of the close and fires immediately on open.

   NOTE ON THE THIRD !important (opacity)
   With speed:0 applied, jQuery writes no inline opacity at all, so this
   one looks unnecessary — and on a normal page load it is. It is here
   for one specific failure: if the theme ever re-initialises Superfish
   after we have run (a new options object replaces the one hth-nav.js
   mutated, so speed goes back to 500), jQuery resumes writing an inline
   opacity every frame while our display forcing is still armed. Without
   !important that inline value wins and a panel can stick half-faded or
   fully visible. With it, the worst case is that the animation is simply
   ignored. hth-nav.js re-applies on resize for the same reason; this is
   the half of the defence that does not depend on the JS noticing.
   ------------------------------------------------------------------ */
body.hth-nav-ready.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item:not(.sh-nav-cart) > ul.sub-menu {
	display:        block !important;   /* was: inline display:none      */
	margin-top:     0     !important;   /* was: inline margin-top:-10px  */

	opacity:        0 !important;   /* see NOTE ON THE THIRD !important */
	visibility:     hidden;
	pointer-events: none;
	transform:      translateY(calc(var(--hth-nav-lift) * -1));

	transition:
		opacity    var(--hth-nav-dur-out) var(--hth-nav-ease),
		transform  var(--hth-nav-dur-out) var(--hth-nav-ease),
		visibility 0s linear var(--hth-nav-dur-out);
}

/* Mega rows are laid out as a grid in §4, so they need their own display
   value at the same !important weight. */
body.hth-nav-ready.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item:not(.sh-nav-cart) > ul.mega-menu-row {
	display: grid !important;
}

/* `.sh-hover` is Superfish's own class. We read it; we never write it. */
body.hth-nav-ready.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item.sh-hover:not(.sh-nav-cart) > ul.sub-menu {
	opacity:        1 !important;
	visibility:     visible;
	pointer-events: auto;
	transform:      none;

	transition:
		opacity    var(--hth-nav-dur) var(--hth-nav-ease),
		transform  var(--hth-nav-dur) var(--hth-nav-ease),
		visibility 0s;
}

/* KEYBOARD, NOT CLICKS — and this MUST stay a separate rule.
   ---------------------------------------------------------------------
   v1.0 used :focus-within here, joined to the .sh-hover selector above
   by a comma. Two things were wrong with that.

   1. :focus-within matches a MOUSE click, not just keyboard focus. The
      top-level items are href="#", so clicking one focused it and pinned
      its panel open permanently. Hovering another item then opened a
      second panel on top of the first — two absolutely-positioned white
      panels at the same coordinates, the later one covering the earlier,
      which is the "blank panel locked over everything" report.
      :has(:focus-visible) matches only the focus ring the browser
      decides to show, which a mouse click does not get.

   2. :has() is not universally supported (Chrome 105+, Safari 15.4+,
      Firefox 121+). An unrecognised selector invalidates the ENTIRE
      comma-separated list it sits in — so putting it beside .sh-hover
      would take hover down with it on an old browser. In its own rule
      the worst case is that keyboard users lose the enhancement while
      hover keeps working.

   Focus moving INTO the panel keeps it open, because the <li> still
   :has() a focus-visible descendant. Verified: opens on focus, survives
   tabbing through the links, closes on blur.                          */
body.hth-nav-ready.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item:not(.sh-nav-cart):has(:focus-visible) > ul.sub-menu {
	opacity:        1 !important;
	visibility:     visible;
	pointer-events: auto;
	transform:      none;

	transition:
		opacity    var(--hth-nav-dur) var(--hth-nav-ease),
		transform  var(--hth-nav-dur) var(--hth-nav-ease),
		visibility 0s;
}


/* ---------------------------------------------------------------------
   2b. THE HOVER BRIDGE — the dead band, and why it only bites when stuck
   ---------------------------------------------------------------------
   Symptom: scroll down so the bar goes white, hover a menu item, then
   move down toward the panel. It opens, then closes, or flickers
   open/closed. At the very top of the page it never happens.

   Measured cause. Jevelin halves the top-level link's vertical padding
   when the bar goes sticky — 30px 0 at rest, 15px 0 stuck (this is the
   same padding change trap E in §1 deals with). So:

                          at rest        sticky
     menu item height     100px          70px
     item's bottom edge   y=177          y=85
     panel's top edge     y=177          y=101
     GAP                  0px            16px

   The panel's top never moves with the item, because it is positioned
   against .container (trap A), whose height is pinned at 100px by
   hth-header.css §2b. The item shrinks inside it; the panel does not.

   16px of the cursor's path therefore lies over NEITHER the item nor the
   panel. `mouseleave` fires on the <li> — mouseleave only counts leaving
   the element AND all its descendants, and in that band the cursor is
   inside neither box — Superfish starts its close timer, the cursor
   reaches the panel, and hoverIntent re-opens. That is the flicker: not
   a fight over state, just a hole in the hit area.

   The fix is a transparent pseudo-element on the PANEL, spanning the
   band. Because it is a child of the panel, and the panel is a
   descendant of the <li>, hovering it keeps the <li> hovered and no
   mouseleave ever fires. Because it lives on the panel, it inherits
   visibility:hidden when closed, so there is no invisible strip
   intercepting clicks on a closed menu — verified by hit-testing.

   position:absolute is load-bearing twice over: it takes the pseudo out
   of flow, so it does NOT become a grid item of the mega row (§2 makes
   that a grid), and it is what `bottom: 100%` resolves against.
   ------------------------------------------------------------------ */
body.hth-nav-ready.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item:not(.sh-nav-cart) > ul.sub-menu::before {
	content:  '';
	position: absolute;
	left:     0;
	right:    0;
	bottom:   100%;
	height:   var(--hth-nav-bridge, 24px);
}


/* ---------------------------------------------------------------------
   3. THE PANEL — SURFACE
   ---------------------------------------------------------------------
   As shipped: square white, 2px radius, 16px 0 padding, and a 60px-blur
   shadow at 8% that reads as fog rather than elevation.

   The panel meets the bar flush at top:100%, so only the bottom corners
   are rounded — a card with four rounded corners hanging off a straight
   edge looks detached. Flush also means no gap for the cursor to fall
   into on the way down, which is worth more than any styling here.
   ------------------------------------------------------------------ */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item:not(.sh-nav-cart) > ul.sub-menu {
	background:    var(--hth-nav-panel);
	border-top:    1px solid var(--hth-nav-rule);

	/* REQUIRED BY §2b. style.css sets `overflow: hidden` on
	   .sh-nav ul.mega-menu-row (normal priority, so specificity is
	   enough). That clips anything drawn outside the panel — including
	   the hover bridge, which sits ABOVE it. With overflow hidden the
	   bridge still exists in the box model and reports a correct 24px
	   height, but is never painted and never hit-tested, which is
	   exactly how the first attempt at the fix failed silently.
	   Nothing else needs the clip: the nearest child to an edge is a
	   hover pill 20px inside the horizontal padding and 48px above the
	   bottom, so the 10px bottom radius has nothing to cut. */
	overflow:      visible;

	/* !important x3 — restoring, not fighting. See THE !IMPORTANT LEDGER. */
	border-radius: 0 0 var(--hth-r, 10px) var(--hth-r, 10px) !important;
	box-shadow:    var(--hth-shadow-lg, 0 2px 4px rgba(35, 48, 60, .05), 0 24px 64px rgba(35, 48, 60, .10)) !important;
	padding:       var(--hth-nav-pad) var(--hth-6, 32px) !important;
}


/* ---------------------------------------------------------------------
   4. MEGA COLUMNS — grid, not floats
   ---------------------------------------------------------------------
   Jevelin floats the columns and gives each `width: 33.33%`, so the
   gutter has to be faked with per-column padding — which is why the
   first column starts 15px in from the panel edge and the last one ends
   25px short of it. Grid gives a real gutter and equal columns, and the
   column count is already in the markup as `.mega-menu-row-N`.

   Jevelin can emit N from 2 to 6. All six are declared; only 3 is in use
   today (Saunas, Learn), and an unrecognised N falls back to the `auto`
   fit rule below it rather than collapsing.
   ------------------------------------------------------------------ */
body.hth-ds .sh-header.sh-sticky-header .sh-nav ul.mega-menu-row {
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap:                   var(--hth-6, 32px) var(--hth-7, 48px);
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav ul.mega-menu-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.hth-ds .sh-header.sh-sticky-header .sh-nav ul.mega-menu-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.hth-ds .sh-header.sh-sticky-header .sh-nav ul.mega-menu-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.hth-ds .sh-header.sh-sticky-header .sh-nav ul.mega-menu-row-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
body.hth-ds .sh-header.sh-sticky-header .sh-nav ul.mega-menu-row-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Undo the float layout the theme applies to each column. */
body.hth-ds .sh-header.sh-sticky-header .sh-nav ul.mega-menu-row > li.mega-menu-col {
	float:   none;
	width:   auto;
	display: block;

	/* Jevelin fakes the gutter with per-column padding, !important. The
	   grid above provides a real one, so this has to go or every column
	   is inset 15px from its own track. */
	padding: 0 !important;

	/* And it draws a vertical rule between columns, also !important.
	   With the heading hairlines in §5 running horizontally, the two
	   sets of rules met at right angles and formed a visible cross at
	   every column edge — the grid lines of a table nobody asked for.
	   A 48px gutter separates the columns on its own. */
	border-right: 0 !important;
	border-left:  0 !important;
}


/* ---------------------------------------------------------------------
   5. COLUMN HEADINGS — labels, not links
   ---------------------------------------------------------------------
   Measured: every column heading in both panels has href="#". They are
   labels that have been rendering as 18px/800 dark links for as long as
   the menu has existed, which means every one of them is a click that
   does nothing. Styling them as eyebrows and taking them out of the
   pointer and tab order fixes a real usability fault, not just the look.

   The :not([href="#"]) rules below mean a heading that is given a real
   URL later starts behaving like a link again with no edit here.
   ------------------------------------------------------------------ */
body.hth-ds .sh-header.sh-sticky-header .sh-nav li.mega-menu-col > a {
	font-family:    var(--hth-f-body, "DM Sans", system-ui, sans-serif);
	letter-spacing: var(--hth-tr-lab, .14em);
	text-transform: uppercase;

	display:        block;
	border-bottom:  1px solid var(--hth-nav-rule);

	/* !important x4. Without these this heading stays 18px/800 in grey,
	   inset 15px, and the eyebrow treatment does not happen at all.

	   The negative margin plus equal padding is what makes the hairline
	   end on exactly the same pixels as the hover pill below it (§6 uses
	   the same -12/+12 pair). Without it the hairline sat 12px inside
	   the pill at each end and every hover looked misregistered. The
	   text still starts at the column's left edge, because the negative
	   margin and the padding cancel. */
	font-size:      var(--hth-t-xs, 12px) !important;
	font-weight:    600 !important;
	color:          var(--hth-ink-3, #556372) !important;
	margin:         0 calc(var(--hth-3, 12px) * -1) var(--hth-3, 12px) !important;
	padding:        0 var(--hth-3, 12px) var(--hth-3, 12px) !important;
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav li.mega-menu-col > a[href="#"] {
	pointer-events: none;
	cursor:         default;
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav li.mega-menu-col > a:not([href="#"]):hover {
	color: var(--hth-accent, #1F6C97) !important;
}


/* ---------------------------------------------------------------------
   6. LEAF LINKS
   ---------------------------------------------------------------------
   As shipped: 18px/400 in #7e7e7e — a grey that fails AA on white at
   this size, on the most-used links in the site. --hth-ink-2 is the
   body colour and passes comfortably.

   The hover is a tinted row rather than a colour change or a slide. A
   translateX on text resamples the glyphs every frame and reads as
   cheap at small sizes; a background on a rounded row is the pattern
   every commerce menu of this class uses, and it gives the pointer a
   target that is taller than the text.

   The negative margin lets that row bleed into the column gutter so the
   text stays optically aligned with the heading above it.
   ------------------------------------------------------------------ */
body.hth-ds .sh-header.sh-sticky-header .sh-nav li.mega-menu-col > ul > li > a,
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item:not(.sh-nav-cart) > ul.sub-menu:not(.mega-menu-row) > li > a {
	font-family:    var(--hth-f-body, "DM Sans", system-ui, sans-serif);
	font-weight:    400;
	line-height:    1.45;
	letter-spacing: 0;

	/* !important x2: the 18px comes from an inline theme-options block,
	   the grey from style.css. Both marked important. */
	font-size:      15px !important;
	color:          var(--hth-ink-2, #3B4C5B) !important;

	display:        block;
	padding:        var(--hth-2, 8px) var(--hth-3, 12px);
	margin:         0 calc(var(--hth-3, 12px) * -1);
	border-radius:  var(--hth-r, 10px);

	transition:
		color            var(--hth-fast, .3s) var(--hth-nav-ease),
		background-color var(--hth-fast, .3s) var(--hth-nav-ease);
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav li.mega-menu-col > ul > li > a:hover,
body.hth-ds .sh-header.sh-sticky-header .sh-nav li.mega-menu-col > ul > li > a:focus-visible,
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item:not(.sh-nav-cart) > ul.sub-menu:not(.mega-menu-row) > li > a:hover,
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item:not(.sh-nav-cart) > ul.sub-menu:not(.mega-menu-row) > li > a:focus-visible {
	color:      var(--hth-ink, #23303C) !important;

	/* SHORTHAND, NOT background-color — and this is the whole bug.
	   Jevelin's hover is a BLUE GRADIENT: `background: linear-gradient(...)`
	   at normal priority. A gradient is a background-IMAGE, and an image
	   paints on top of a background-COLOR, so declaring background-color
	   here never had an opponent to beat — both applied, and the image
	   won by painting order, not by cascade. Specificity and !important
	   were both red herrings; the shorthand resets background-image to
	   none, which is what actually removes it. */
	background: var(--hth-sand, #EDE7DD);
}

/* Current page, so the menu can say where you are. */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item:not(.sh-nav-cart) > ul.sub-menu li.current-menu-item > a {
	color:       var(--hth-ink, #23303C) !important;
	font-weight: 500 !important;
}


/* ---------------------------------------------------------------------
   7. THE PLAIN DROPDOWN (Support)
   ---------------------------------------------------------------------
   Not a mega row, so §4 does not reach it. 220px is tight for the
   longest label it carries; 248px holds them on one line each.
   ------------------------------------------------------------------ */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item:not(.sh-nav-cart) > ul.sub-menu:not(.mega-menu-row) {
	width:         248px;

	/* Its own !important rule, separate from the mega row's. */
	padding:       var(--hth-4, 16px) !important;
	border-radius: var(--hth-r, 10px) !important;
}


/* ---------------------------------------------------------------------
   8. FOCUS
   ---------------------------------------------------------------------
   :has(:focus-visible) in §2 opens the panel for keyboard users, new —
   Superfish's hover handling never did. Give the focused link a ring
   that is visible on both the sand hover row and the white panel.
   ------------------------------------------------------------------ */
body.hth-ds .sh-header.sh-sticky-header .sh-nav a:focus-visible {
	outline:        2px solid var(--hth-accent, #1F6C97);
	outline-offset: 2px;
	border-radius:  var(--hth-r, 10px);
}


/* ---------------------------------------------------------------------
   9. REDUCED MOTION
   ---------------------------------------------------------------------
   Mirrors hth-header.css §5. The panel still opens and closes — it just
   arrives without the drop or the fade. visibility stays stepped, so the
   tab-order guarantee in §2 is unaffected.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {

	body.hth-nav-ready.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item:not(.sh-nav-cart) > ul.sub-menu,
	body.hth-nav-ready.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item.sh-hover:not(.sh-nav-cart) > ul.sub-menu {
		transform:  none;
		transition: none;
	}

	body.hth-nav-ready.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item:not(.sh-nav-cart):has(:focus-visible) > ul.sub-menu {
		transform:  none;
		transition: none;
	}

	body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item > a,
	body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item-has-children:not(.sh-nav-cart) > a::after,
	body.hth-ds .sh-header.sh-sticky-header .sh-nav li.mega-menu-col > ul > li > a {
		transition: none;
	}
}


/* ---------------------------------------------------------------------
   10. PRODUCT TILES — desktop
   ---------------------------------------------------------------------
   Markup comes from inc/nav-thumbs.php, which only emits it on a design-
   system page, in a column tagged `hth-thumbs`, for an item whose image it
   could resolve. Every selector below keys off `.hth-navtile`, so if any of
   those is false this whole section is inert and §6's text rows apply.

     li.hth-navtile-col    the column, tagged only when >=1 tile resolved
     li.hth-navtile        a tile
     li.hth-navtile--util  a sibling with no image (a Custom Link, or one
                           tagged hth-no-thumb) — laid out as a full-width
                           row so it does not leave a hole in the grid
     .hth-navtile__img     the square
     .hth-navtile__name    "TRS-3"
     .hth-navtile__desc    "Three-person Infrared Smart Sauna"

   THE COLUMN LIST BECOMES A GRID, AND THAT NEEDS !important.
   style.css carries `.sh-nav ul.mega-menu-row li.mega-menu-col ul {
   display: block !important }`. Measured — this is a real ledger entry, the
   same class as the panel's own display in §2. Everything else here wins on
   specificity alone.

   WHY 3 ACROSS. Six models in a third-width column at 2 across is three rows
   and a 690px panel; at 3 across it is two rows and the panel stays near the
   500px the text columns already need. Six across a full-width panel was
   tried and is worse — 234px tiles turn the menu into a product page.

   The utility rows are ordered by the walker, not here: they keep their menu
   order, so "Compare Our Infrared Saunas" stays above the tiles and
   "Accessories & Add-ons" below, which is the order someone chose.
   ------------------------------------------------------------------ */
body.hth-ds .sh-header.sh-sticky-header .sh-nav li.mega-menu-col.hth-navtile-col > ul {
	display:               grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap:                   var(--hth-5, 24px) var(--hth-4, 16px);
}

/* ---------------------------------------------------------------------
   10b. SURVIVING A COLUMN BEING REMOVED
   ---------------------------------------------------------------------
   Dropping "By Size" from the menu is an editorial decision made in
   Appearance → Menus, but it changes the geometry the tiles sit in, and
   measured, it goes wrong in two different ways depending on something
   we cannot see from here: whether Jevelin recounts the columns.

   Without the two rules below, both outcomes are bad:

     Jevelin recounts -> ul.mega-menu-row-2
       The tile column doubles from 496px to 768px, and `repeat(3, 1fr)`
       happily inflates the tiles from 155px to 245px. The panel grows
       from 753px to 903px. That is the same failure as the six-across
       experiment in §10: at that size the menu stops being a menu.

     Jevelin keeps the class -> ul.mega-menu-row-3 with two children
       §4's explicit `repeat(3, ...)` reserves a third track for a column
       that no longer exists, leaving a third of the panel as dead space.

   Both are fixed here, and neither rule does anything to the panel as it
   stands today — verified by removing the column, testing both class
   states, then putting it back:

     3 columns, row-3   496px column   155px tiles   753px   (unchanged)
     2 columns, row-2   768px column   163px tiles   753px
     2 columns, row-3   768px column   163px tiles   753px

   THE CAP IS A MAX-WIDTH, NOT A SMALLER TRACK COUNT. Six tiles want to
   be 3+3; 4-across in a wide column gives 4+2, which reads as a mistake.
   Capping the grid instead keeps the shape and parks the spare width in
   the gutter, where it does no harm.

   The :has() rules correct the panel from the columns actually present
   rather than from the class. If :has() is unsupported the stale-class
   case falls back to a reserved empty track — cosmetic dead space, not a
   broken layout — so this stays out of any comma list, per §2.
   ------------------------------------------------------------------ */
body.hth-ds .sh-header.sh-sticky-header .sh-nav li.mega-menu-col.hth-navtile-col > ul {
	max-width: 520px;
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav ul.mega-menu-row:has(> li.mega-menu-col:nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav ul.mega-menu-row:has(> li.mega-menu-col:nth-child(1):last-child) {
	grid-template-columns: minmax(0, 1fr) !important;
}


/* A row with no picture spans the whole column. */
body.hth-ds .sh-header.sh-sticky-header .sh-nav li.mega-menu-col > ul > li.hth-navtile--util {
	grid-column: 1 / -1;
}

/* The tile's anchor drops §6's row padding and hover pill — the picture is
   the target now, and a sand pill behind a photograph reads as a mistake. */
body.hth-ds .sh-header.sh-sticky-header .sh-nav li.mega-menu-col > ul > li.hth-navtile > a {
	display:    block !important;
	padding:    0 !important;
	margin:     0 !important;
	background: transparent !important;
	border-radius: 0 !important;
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav .hth-navtile__img {
	display:       block;
	aspect-ratio:  1 / 1;
	border-radius: var(--hth-r, 10px);
	overflow:      hidden;
	background:    var(--hth-sand, #EDE7DD);
	margin-bottom: var(--hth-2, 8px);

	/* Scale the square, never the text. Type scaled by a transform resamples
	   and goes soft, which is the giveaway that an effect was applied to a
	   whole card rather than chosen for one element. */
	transition: transform var(--hth-nav-dur) var(--hth-nav-ease);
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav .hth-navtile__img img {
	display:    block;
	width:      100%;
	height:     100%;
	object-fit: cover;
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav li.hth-navtile > a:hover .hth-navtile__img,
body.hth-ds .sh-header.sh-sticky-header .sh-nav li.hth-navtile > a:focus-visible .hth-navtile__img {
	transform: scale(1.03);
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav .hth-navtile__name {
	display:     block;
	font-family: var(--hth-f-body, "DM Sans", system-ui, sans-serif);
	font-size:   14px !important;
	font-weight: 600 !important;
	line-height: 1.2;
	color:       var(--hth-ink, #23303C) !important;
	transition:  color var(--hth-fast, .3s) var(--hth-nav-ease);
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav li.hth-navtile > a:hover .hth-navtile__name,
body.hth-ds .sh-header.sh-sticky-header .sh-nav li.hth-navtile > a:focus-visible .hth-navtile__name {
	color: var(--hth-accent, #1F6C97) !important;
}

/* Clamped to two lines rather than shortened in PHP — see the note in
   nav-thumbs.php about not deleting words from a label someone chose. */
body.hth-ds .sh-header.sh-sticky-header .sh-nav .hth-navtile__desc {
	display:            -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow:           hidden;
	font-family: var(--hth-f-body, "DM Sans", system-ui, sans-serif);
	font-size:   var(--hth-t-xs, 12px) !important;
	line-height: 1.3;
	color:       var(--hth-ink-3, #556372) !important;
	margin-top:  2px;
}


/* ---------------------------------------------------------------------
   11. PRODUCT TILES — mobile flyout
   ---------------------------------------------------------------------
   THE ONLY SECTION IN THIS FILE THAT LEAVES THE DESKTOP BAR, and it does so
   deliberately rather than by leaking. Read trap C before editing: the two
   bars share class names, which is how hth-header.css v2.2 made the mobile
   logo vanish. Every selector here is anchored on `ul.sh-nav-mobile`, which
   exists only inside `nav.sh-header-mobile-dropdown`, and nothing above this
   line may be widened to match it.

   WHY THIS IS ALMOST FREE. Jevelin renders the SAME menu tree into both bars
   — verified by comparing menu item ids: 43 items on desktop, 43 in the
   flyout, every id shared, same mega-menu-col columns, same leaves. So the
   walker runs once and the tile markup is already present here. Only the
   layout differs: 2 across instead of 3.

   VERIFIED VISUALLY 2026-10-21 at 375x812 with phone emulation (touch UA):
   2-across tiles render correctly. The mobile bar is position:absolute,
   not sticky, so the open flyout (~1221px with Saunas expanded) is in page
   flow and scrolling reaches every item down to the phone number.

   PAYLOAD IS THE REAL MOBILE COST, and it is handled in PHP, not here: the
   originals are 1920x1920, and nav-thumbs.php passes a `sizes` of
   "(max-width: 1024px) 44vw, 170px" so a phone fetches a ~200px file rather
   than the full one. The flyout is display:none until tapped, so a visitor
   who never opens the menu downloads nothing at all.
   ------------------------------------------------------------------ */
body.hth-ds ul.sh-nav-mobile li.mega-menu-col.hth-navtile-col > ul {
	display:               grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap:                   var(--hth-5, 24px) var(--hth-3, 12px);
}

body.hth-ds ul.sh-nav-mobile li.mega-menu-col > ul > li.hth-navtile--util {
	grid-column: 1 / -1;
}

body.hth-ds ul.sh-nav-mobile li.mega-menu-col > ul > li.hth-navtile > a {
	display: block !important;
	padding: 0 !important;
	margin:  0 !important;
	border:  0 !important;
}

body.hth-ds ul.sh-nav-mobile .hth-navtile__img {
	display:       block;
	aspect-ratio:  1 / 1;
	border-radius: var(--hth-r, 10px);
	overflow:      hidden;
	background:    var(--hth-sand, #EDE7DD);
	margin-bottom: var(--hth-2, 8px);
}

body.hth-ds ul.sh-nav-mobile .hth-navtile__img img {
	display:    block;
	width:      100%;
	height:     100%;
	object-fit: cover;
}

/* No hover scale here. There is no hover on a touch screen, and a transform
   that only fires on :active reads as lag rather than as feedback. */
body.hth-ds ul.sh-nav-mobile .hth-navtile__name {
	display:     block;
	font-family: var(--hth-f-body, "DM Sans", system-ui, sans-serif);
	font-size:   14px !important;
	font-weight: 600 !important;
	line-height: 1.2;
	color:       var(--hth-ink, #23303C) !important;
}

body.hth-ds ul.sh-nav-mobile .hth-navtile__desc {
	display:            -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow:           hidden;
	font-family: var(--hth-f-body, "DM Sans", system-ui, sans-serif);
	font-size:   var(--hth-t-xs, 12px) !important;
	line-height: 1.3;
	color:       var(--hth-ink-3, #556372) !important;
	margin-top:  2px;
}


/* ---------------------------------------------------------------------
   12. TILES — REDUCED MOTION
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	body.hth-ds .sh-header.sh-sticky-header .sh-nav .hth-navtile__img,
	body.hth-ds .sh-header.sh-sticky-header .sh-nav .hth-navtile__name {
		transition: none;
	}
	body.hth-ds .sh-header.sh-sticky-header .sh-nav li.hth-navtile > a:hover .hth-navtile__img {
		transform: none;
	}
}


/* ---------------------------------------------------------------------
   13. THE CART PANEL
   ---------------------------------------------------------------------
   Hover the cart icon with something in the cart. Before this section
   the panel was Jevelin's WooCommerce mini-cart with the design-system
   font over the top, and it went wrong in five ways, all measured:

     1. THE THUMBNAIL MOVED BETWEEN LINES. Jevelin positions the image
        with `.product_list_widget a img` — so only when the image is
        inside a link. WooCommerce leaves the link out when the product
        is not visible in the catalogue (the TRS-2 is set to Hidden — it
        sells from its own page), and then woocommerce.css floats the bare
        <img> right at 32px instead. One line had a 65px picture on the
        left, the next a 32px picture top-right, under the remove ×.
     2. THE OPTIONS WALKED DOWN THE PANEL. dt/dd are inline-block floats
        with margin-bottom 1em, and every <dd> wraps its value in a <p>
        that `body p { line-height: 28px !important }` stretches. Labels
        and values landed on different baselines, some on the next line.
     3. THE REMOVE × WAS AN ICON FONT. themify on a logged-in page; for a
        logged-out visitor WP Rocket's used-CSS drops the font-face and it
        renders as an empty box.
     4. OFF-PALETTE. The prices are Jevelin blue (#0476bf, !important, in
        the Customizer CSS), the buttons are grey-on-grey with a
        FontAwesome check, and the subtotal is centred on its own line.
     5. THE PANEL WAS PLACED BY A MAGIC NUMBER — margin-left -262px from
        the icon, which left its right edge 57px past the icon and past
        the end of the nav. At 1100px wide that is under the scrollbar.

   WHAT REPLACES IT. The same line item as the checkout summary
   (hth-commerce.css §10, `.hth-co-mini`): a 64px tile, name in DM Sans
   500, the options as a two-column label/value grid, price under them.
   Footer: subtotal as a label/value row, then View cart (ghost) and
   Checkout (the one solid ink button, with the arrow). Same tokens,
   nothing new.

   THE MARKUP IS WOOCOMMERCE'S, AND IT IS NOT CHANGED. The panel's contents
   arrive as a cart fragment over AJAX (wc-ajax=get_refreshed_fragments),
   which runs with no page context — hth_ds_is_active() is false there —
   and the result is cached in sessionStorage and shared by every page on
   the site, old and new. Overriding cart/mini-cart.php would therefore
   change the cart on all ~200 production pages too. So the layout has to
   work on both shapes WooCommerce emits for a line:

       <li class="mini_cart_item">
         <a class="remove">×</a>
         <a href="…"><img>Name</a>        ← product has a permalink
         <img>Name                         ← product has none
         <dl class="variation">…</dl>      ← variations / add-ons only
         <span class="quantity">1 × <span class="amount">…</span></span>
       </li>

   which is why the image is positioned out of flow, not laid out in a
   grid: the bare-text name is an anonymous box no selector can place,
   and `display: contents` on the link would make it unfocusable in
   Safari < 17. Positioned, the picture sits in the left padding whether
   or not there is a link around it, and the name flows either way.

   SCOPE. Desktop only — style.css hides this panel below 1021px with
   !important, so there is no mobile variant to keep in step. Every
   selector is anchored on `.sh-header.sh-sticky-header` (trap C) and on
   `li.sh-nav-cart`, which every other section excludes (trap D).

   !IMPORTANT, PER THE LEDGER. Each one below answers a theme rule that
   carries !important, read off the live stylesheets:

     style.css
       .sh-header-megamenu-style2 .sh-nav .sh-nav-cart > ul.sub-menu
                                      box-shadow, border-radius
       .sh-nav .sh-nav-cart > ul.sub-menu        margin-left -262px
       .product_list_widget li        padding-left 85px, min-height 65px,
                                      margin-bottom 15px
       .product_list_widget a img     width 65px, margin-left 0
       .sh-nav .sh-nav-cart li.mini_cart_item a.remove      color #ccc
       .sh-nav-cart … p.buttons a     line-height 70px, background,
                                      border-radius, padding
       .sh-nav-cart .buttons a        background-color #ebe9eb
       .sh-nav-cart .buttons a.checkout                     color #fff
       .sh-jevelin-style3 … a:last-child::before      font-family (FA)
     woocommerce.css
       .woocommerce a.remove          color var(--wc-red)
     jevelin-dynamic-styles.css
       .sh-nav .sh-nav-cart li.mini_cart_item a:nth-child(2)  color
       .sh-nav-cart .menu-item-cart .total        border-top, -bottom
       … p.buttons a:first-child                  border-right
     Customizer / inline <style>
       body p                         line-height 28px
       .sh-header .sh-nav > li.menu-item ul a     color #7e7e7e
       … .mini_cart_item .amount      color #0476bf
       … .sh-nav-cart .buttons a.checkout         background #0476bf
       .woocommerce .wc-forward       color #fff, border-radius
       .woocommerce .button           line-height 50px, padding,
                                      border-radius

   Logged-in and logged-out pages do not get the same theme CSS (WP
   Rocket's used-CSS is for visitors only), so the rules here are written
   to hold against the full set above, not against whatever a given
   devtools session happens to show.
   ------------------------------------------------------------------ */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart {
	--hth-cart-w:     360px;
	--hth-cart-pad:   var(--hth-5, 24px);
	--hth-cart-thumb: 64px;
	--hth-cart-gap:   var(--hth-4, 16px);
}


/* 13a. The panel ------------------------------------------------------
   Anchored to the right edge of `.sh-header > .container` — which is the
   right edge of the cart icon, and of the mega panels — instead of
   Jevelin's -262px from wherever the icon happens to be. The container
   is the positioning ancestor because hth-header.css §1 makes it one
   (trap A); that file is enqueued on exactly the pages this one is. */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart > ul.sub-menu {
	left:          auto;
	right:         0;
	margin-left:   0 !important;
	width:         var(--hth-cart-w);
	padding:       0;

	background:    var(--hth-nav-panel, #fff);
	border-top:    1px solid var(--hth-nav-rule, rgba(35, 48, 60, .14));
	border-radius: 0 0 var(--hth-r, 10px) var(--hth-r, 10px) !important;
	box-shadow:    var(--hth-shadow-lg, 0 2px 4px rgba(35, 48, 60, .05), 0 24px 64px rgba(35, 48, 60, .10)) !important;

	font-family:   var(--hth-f-body, "DM Sans", system-ui, sans-serif);
	text-align:    left;
}

/* The same hover bridge as §2b, for the same 16px dead band: the bar
   shrinks when it sticks, the panel's top does not move. Superfish shows
   and hides this panel with inline display, so the bridge disappears
   with it. */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart > ul.sub-menu::before {
	content:  '';
	position: absolute;
	left:     0;
	right:    0;
	bottom:   100%;
	height:   var(--hth-nav-bridge, 24px);
}

/* The <li> WooCommerce's widget sits in, and the widget itself. */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart li.menu-item-cart,
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart .widget_shopping_cart {
	margin:  0;
	padding: 0;
	float:   none;
	width:   100%;
}


/* 13b. The list -------------------------------------------------------
   Scrolls inside the panel past ~5 lines rather than running the
   Checkout button off the bottom of a laptop screen. */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart ul.cart_list {
	display:    block;
	margin:     0;
	padding:    var(--hth-1, 4px) var(--hth-cart-pad);
	max-height: min(60vh, 480px);
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}


/* 13c. One line -------------------------------------------------------
   The <li>'s own type IS the product name: when there is no link the
   name is a bare text node, and this is the only box that reaches it.
   dl and the quantity line set their own sizes below. */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart li.mini_cart_item {
	position:      relative;
	display:       block;
	float:         none;
	width:         auto;
	box-sizing:    border-box;
	min-height:    calc(var(--hth-cart-thumb) + 2 * var(--hth-cart-gap)) !important;
	margin:        0 !important;
	padding:       var(--hth-cart-gap) 32px var(--hth-cart-gap) calc(var(--hth-cart-thumb) + var(--hth-4, 16px)) !important;
	border-bottom: 0;

	font-family:   var(--hth-f-body, "DM Sans", system-ui, sans-serif);
	font-size:     14.5px;
	font-weight:   500;
	line-height:   1.35;
	letter-spacing: 0;
	text-transform: none;
	color:         var(--hth-ink, #23303C);
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart li.mini_cart_item + li.mini_cart_item {
	border-top: 1px solid var(--hth-nav-rule, rgba(35, 48, 60, .14));
}

/* The name, when it is a link. */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart li.mini_cart_item > a:not(.remove) {
	display:         block;
	padding:         0;
	margin:          0;
	background:      none !important;
	font:            inherit;
	line-height:     inherit;
	max-height:      none;
	color:           inherit !important;
	text-decoration: none;
	transition:      color var(--hth-fast, .3s) var(--hth-nav-ease, ease);
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart li.mini_cart_item > a:not(.remove):hover {
	color: var(--hth-accent, #1F6C97) !important;
}

/* The thumbnail — in or out of a link, same place, same size.
   White-studio product shots on a white panel have no edge, so the tile
   is shell and the photo multiplies onto it: its white becomes the tile,
   the product stays as shot. */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart li.mini_cart_item > img,
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart li.mini_cart_item > a > img {
	position:       absolute;
	top:            var(--hth-cart-gap);
	left:           0;
	float:          none;
	width:          var(--hth-cart-thumb) !important;
	height:         var(--hth-cart-thumb);
	max-width:      none;
	margin:         0 !important;
	padding:        0;
	object-fit:     contain;
	background:     var(--hth-shell, #F7F4EF);
	border-radius:  8px;
	box-shadow:     none;
	mix-blend-mode: multiply;
}

/* Options: label | value, on one baseline. */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart li.mini_cart_item dl.variation {
	display:               grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap:                   2px var(--hth-3, 12px);
	margin:                6px 0 0;
	padding:               0;
	border:                0;
	font-size:             13px;
	font-weight:           400;
	line-height:           1.45;
}

/* woocommerce.css gives this dl (and p.buttons, 13e) a clearfix — " "
   in a display:table ::before and ::after. In a grid those are grid
   items: ::before takes the first cell, every label lands in the value
   column and every value on the row below. Measured, not theoretical. */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart li.mini_cart_item dl.variation::before,
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart li.mini_cart_item dl.variation::after {
	content: none;
	display: none;
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart li.mini_cart_item dl.variation :is(dt, dd) {
	display:     block;
	float:       none;
	clear:       none;
	margin:      0;
	padding:     0;
	font-weight: 400;
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart li.mini_cart_item dl.variation dt {
	color: var(--hth-ink-3, #556372);
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart li.mini_cart_item dl.variation dd,
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart li.mini_cart_item dl.variation dd p {
	margin:      0;
	color:       var(--hth-ink, #23303C);
	font-size:   inherit;
	line-height: inherit !important;
}

/* "1 × $7,795.00" — the count quiet, the money in ink. */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart li.mini_cart_item .quantity {
	display:     block;
	float:       none;
	margin:      var(--hth-2, 8px) 0 0;
	padding:     0;
	font-size:   13px;
	font-weight: 400;
	line-height: 1.4;
	color:       var(--hth-ink-3, #556372);
	white-space: nowrap;
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart .widget_shopping_cart_content .amount {
	font-size:   14.5px;
	font-weight: 500;
	color:       var(--hth-ink, #23303C) !important;
}

/* Remove. The × is drawn with Lucide's own path as a mask, so it does
   not depend on an icon font being loaded (see fault 3). 28px target;
   the glyph is 14px. */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart li.mini_cart_item a.remove {
	position:      absolute;
	top:           calc(var(--hth-cart-gap) - 5px);
	right:         -6px;
	left:          auto;
	display:       grid;
	place-items:   center;
	width:         28px;
	height:        28px;
	margin:        0;
	padding:       0;
	border-radius: 50%;
	background:    transparent !important;
	font-size:     0;
	line-height:   0;
	color:         var(--hth-ink-3, #556372) !important;
	transition:    color var(--hth-fast, .3s) var(--hth-nav-ease, ease),
	               background-color var(--hth-fast, .3s) var(--hth-nav-ease, ease);
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart li.mini_cart_item a.remove:hover,
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart li.mini_cart_item a.remove:focus-visible {
	color:      var(--hth-ink, #23303C) !important;
	background: var(--hth-sand, #EDE7DD) !important;
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart li.mini_cart_item a.remove::before {
	content:     '';
	position:    static;
	top:         auto;
	display:     block;
	width:       14px;
	height:      14px;
	font-family: inherit;
	background:  currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* 13d. Subtotal -------------------------------------------------------
   A label/value row instead of a centred line. "Subtotal:" keeps its
   colon — it is WooCommerce's string. */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart .widget_shopping_cart_content p.total {
	display:         flex;
	align-items:     baseline;
	justify-content: space-between;
	gap:             var(--hth-4, 16px);
	margin:          0;
	padding:         var(--hth-4, 16px) var(--hth-cart-pad) 0;
	border-top:      1px solid var(--hth-nav-rule, rgba(35, 48, 60, .14)) !important;
	border-bottom:   0 !important;
	text-align:      left;
	text-transform:  none;
	font-size:       14px;
	line-height:     1.4 !important;
	color:           var(--hth-ink-3, #556372);
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart .widget_shopping_cart_content p.total strong {
	min-width:   0;
	font-weight: 400;
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart .widget_shopping_cart_content p.total .amount {
	font-size:   17px;
	font-weight: 600;
}


/* 13e. Buttons --------------------------------------------------------
   View cart is the ghost, Checkout the one solid button — hth-ds §10's
   .hth-btn, as the cart page's Proceed button is. A third button from
   an express-pay plugin would wrap onto its own full-width row. */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart .widget_shopping_cart_content p.buttons {
	display:               grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap:                   var(--hth-2, 8px);
	margin:                0 !important;
	padding:               var(--hth-4, 16px) var(--hth-cart-pad) var(--hth-cart-pad);
	line-height:           1 !important;
}

/* The same clearfix as the dl in 13c — it would take the first cell and
   push View cart into the second column and Checkout onto a row of its
   own. */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart .widget_shopping_cart_content p.buttons::before,
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart .widget_shopping_cart_content p.buttons::after {
	content: none;
	display: none;
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart .widget_shopping_cart_content p.buttons > :nth-child(n+3) {
	grid-column: 1 / -1;
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart .widget_shopping_cart_content p.buttons a {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	gap:              var(--hth-2, 8px);
	width:            auto;
	height:           44px;
	max-height:       none;
	margin:           0 !important;
	padding:          0 var(--hth-4, 16px) !important;
	box-sizing:       border-box;

	border:           1px solid var(--hth-nav-rule, rgba(35, 48, 60, .14)) !important;
	border-radius:    var(--hth-r, 10px) !important;
	background-color: transparent !important;
	color:            var(--hth-ink, #23303C) !important;

	font-family:      var(--hth-f-body, "DM Sans", system-ui, sans-serif);
	font-size:        14.5px;
	font-weight:      500;
	line-height:      1 !important;
	letter-spacing:   0;
	text-transform:   none;
	text-decoration:  none;
	white-space:      nowrap;
	box-shadow:       none;
	transition:       background-color var(--hth-fast, .3s) var(--hth-nav-ease, ease),
	                  border-color     var(--hth-fast, .3s) var(--hth-nav-ease, ease);
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart .widget_shopping_cart_content p.buttons a:hover {
	background-color: var(--hth-sand, #EDE7DD) !important;
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart .widget_shopping_cart_content p.buttons a.checkout {
	border-color:     var(--hth-ink, #23303C) !important;
	background-color: var(--hth-ink, #23303C) !important;
	color:            #fff !important;
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart .widget_shopping_cart_content p.buttons a.checkout:hover {
	border-color:     #2E3E4D !important;
	background-color: #2E3E4D !important;
}

/* Jevelin's icon-font glyphs (a cart and a FontAwesome check). */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart .widget_shopping_cart_content p.buttons a::before {
	content: none !important;
	display: none !important;
}

/* Checkout's arrow, as on the cart page's Proceed button. */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart .widget_shopping_cart_content p.buttons a.checkout::after {
	content:    '';
	flex:       none;
	width:      16px;
	height:     16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .6s var(--hth-expo, cubic-bezier(.165, .84, .44, 1));
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart .widget_shopping_cart_content p.buttons a.checkout:hover::after {
	transform: translateX(3px);
}

body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart .widget_shopping_cart_content p.buttons a:focus-visible,
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart li.mini_cart_item a:focus-visible {
	outline:        2px solid var(--hth-accent, #1F6C97);
	outline-offset: 2px;
}


/* 13f. Empty ----------------------------------------------------------
   The panel still opens on hover with nothing in the cart. */
body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart .woocommerce-mini-cart__empty-message {
	margin:      0;
	padding:     var(--hth-5, 24px) var(--hth-cart-pad);
	text-align:  center;
	font-size:   14px;
	line-height: 1.45 !important;
	color:       var(--hth-ink-3, #556372);
}


/* 13g. Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart li.mini_cart_item a,
	body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart .widget_shopping_cart_content p.buttons a,
	body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart .widget_shopping_cart_content p.buttons a::after {
		transition: none;
	}
	body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart .widget_shopping_cart_content p.buttons a.checkout:hover::after {
		transform: none;
	}
}


/* ---------------------------------------------------------------------
   14. MOBILE FLYOUT — LEAF ITEMS (For Business, the phone number)
   ---------------------------------------------------------------------
   THE GAP UNDER "FOR BUSINESS" AND THE ORPHANED PHONE ICON were one bug,
   and it is Jevelin's, not ours. The first tap on the hamburger runs this
   in jevelin/js/scripts.js (~@58816):

       $('.sh-nav-mobile > li > a, ...').each(function () {
           if (href != '' && href != '#') {
               $(this).parent().prepend('<a class="menu-item-open-fix" ...>' + html + '</a>');
               $(this).html('&nbsp;');
           }
       });

   i.e. every top-level link with a real href is CLONED into a new
   a.menu-item-open-fix, and the original is emptied to &nbsp; but left in
   place. Parents (Saunas, Learn, Support) have href="#" and are skipped,
   so only the leaves are hit. Jevelin's style.css then lays the clone
   over the emptied original with
       .sh-nav-mobile a.menu-item-open-fix { position:absolute; top:0; left:0; right:50px }
   so the original holds the row's height and the clone sits on top.

   WP ROCKET'S USED-CSS BREAKS THAT. The class does not exist until the
   hamburger is tapped, so the used-CSS crawl never sees it and strips
   the rule. With it gone the clone is in flow and the emptied original
   becomes a second 57px row — the blank band under For Business. And
   whether the rule is present depends on the cache state: v1.3 as first
   shipped assumed "stripped" (hid the original), then the used-CSS was
   cleared, the full style.css loaded, the clone went absolute over a
   hidden original, the row collapsed to 0 and For Business sat on top
   of Support. So both declarations below are set explicitly — the
   layout is the same whether or not used-CSS keeps Jevelin's rule.

   The phone item is the same, plus one more step: its menu classes
   `fa fa-volume-control-phone` sit on the ORIGINAL <a>, which is the one
   emptied. So the icon drew alone on that second row, under the number
   instead of beside it.

   FIX. On leaves only (on a parent the emptied original is the sub-menu
   toggle and carries the chevron, so :not(has-children)): put the clone
   back in flow, hide the emptied original, and draw the phone glyph on the clone. The glyph is an inline SVG mask,
   not FontAwesome: the font is not ours to rely on for logged-out
   visitors (see §13 item 3, the themify ×), and a mask follows the
   link's own colour.

   Measured at 393x852 (iPhone 16): rows were 57/57/114/57/114, now five
   rows of 57 with the icon on the number's baseline. Anchored on
   ul.sh-nav-mobile (trap C) — the desktop bar is untouched.
   ------------------------------------------------------------------ */
body.hth-ds ul.sh-nav-mobile li.menu-item:not(.menu-item-has-children) > a.menu-item-open-fix {
	position: static;
}

body.hth-ds ul.sh-nav-mobile li.menu-item:not(.menu-item-has-children) > a.menu-item-open-fix ~ a {
	display: none;
}

body.hth-ds ul.sh-nav-mobile li.menu-item > a.menu-item-open-fix[href^="tel:"] {
	display:     flex;
	align-items: center;
	gap:         10px;
}

body.hth-ds ul.sh-nav-mobile li.menu-item > a.menu-item-open-fix[href^="tel:"]::before {
	--hth-phone-glyph: 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='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
	content:          "";
	flex:             none;
	width:            18px;
	height:           18px;
	background-color: currentColor;
	-webkit-mask:     var(--hth-phone-glyph) center / contain no-repeat;
	        mask:     var(--hth-phone-glyph) center / contain no-repeat;
}


/* ---------------------------------------------------------------------
   15. SHORT DESKTOP SCREENS — the Saunas panel must fit the window
   ---------------------------------------------------------------------
   THE BUG. The Saunas panel is 753px tall (two rows of three tiles,
   sandwiched by the two utility rows). It hangs from y=146 at rest and
   y=102 when the bar is stuck, so its bottom lands at 899 / 855. On any
   window shorter than ~920px — a 13" MacBook in a browser is ~700-790 —
   the TR-row labels and "Accessories & Add-ons" are below the fold.

   SCROLLING DOES NOT RESCUE IT. The moment the page scrolls, Jevelin
   makes the bar position:fixed, and the panel is fixed with it. What is
   below the viewport edge stays below it.

   THE FIX. On short desktop windows only, the six tiles go into ONE row
   instead of 3+3, the tile column takes 3/4 of the panel instead of 1/2,
   and the panel's vertical padding drops 48px -> 32px. Panel height
   753px -> ~423px. Measured, both fixes in, bar at rest / stuck:

     1026x700  (narrowest desktop)   934/891 -> 648/605   tiles 122 -> 90px
     1180x820  (iPad Air landscape)  880/836 -> 566/522   tiles 145 -> 107px
     1280x790                        899/855 -> 575/531   tiles 163 -> 117px
     1366x1024 (iPad Pro landscape)  fits already; rule inactive

   This is NOT the six-across experiment §10 rejects. That made 234px
   tiles on a full-width panel; these are 90-117px and only on screens
   where the alternative is a menu you cannot reach.

   WHY 1026px. The site's inline CSS swaps bars at max-width:1025px
   (header.primary-desktop display:none). Below 1026 the desktop panel is
   hidden and there is nothing to fix. MOBILE IS UNTOUCHED: every selector
   is on .sh-header .sh-nav, the flyout is ul.sh-nav-mobile (trap C).
   Verified by diffing computed styles of all 292 header elements with and
   without this section at 375x812, 844x390, 768x1024 and 1020x700 —
   0 changed.

   SPECIFICITY. §10b sets the mega row to repeat(2, 1fr) !important via
   :has(> li.mega-menu-col:nth-child(2):last-child). The first rule here
   chains that same :has() so it outranks it rather than relying on order.
   The second covers "By Size" coming back (three columns).

   NOT DONE: a max-height + overflow-y:auto fallback for windows under
   ~650px. Overflow on the panel would clip the §2b hover bridge.
   ------------------------------------------------------------------ */
@media (min-width: 1026px) and (max-height: 920px) {
	body.hth-ds .sh-header.sh-sticky-header .sh-nav ul.mega-menu-row:has(> li.hth-navtile-col):has(> li.mega-menu-col:nth-child(2):last-child) {
		grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) !important;
	}

	body.hth-ds .sh-header.sh-sticky-header .sh-nav ul.mega-menu-row:has(> li.hth-navtile-col):has(> li.mega-menu-col:nth-child(3)) {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) !important;
	}

	body.hth-ds .sh-header.sh-sticky-header .sh-nav li.mega-menu-col.hth-navtile-col > ul {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap:                   var(--hth-4, 16px) var(--hth-3, 12px);
		max-width:             760px;
	}

	body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item:not(.sh-nav-cart) > ul.mega-menu-row {
		padding-top:    var(--hth-6, 32px) !important;
		padding-bottom: var(--hth-6, 32px) !important;
	}
}


/* ---------------------------------------------------------------------
   16. NARROW DESKTOP — keep the bar on one row (1026-1099px)
   ---------------------------------------------------------------------
   THE BUG. At 1026px the six top-level items need 720px (Jevelin gives
   each li 0 15px padding; the cart 0 0 0 15px) but the nav cell is 703px.
   The items are floats, so the cart wraps to a second line, the bar
   doubles to 201px, and the logo — vertically centred in its table cell
   — sits halfway down next to an empty row. Measured clean from 1080px.

   THE FIX. 10px side padding instead of 15 in that band: 55px back, the
   row needs 675px of 703. Range runs to 1099 for headroom (font metrics,
   a longer phone label, the cart count going to two digits).

   hth-header.js measures the bar's height once (load, resize) and pins
   it as --hth-hdr-h, so this has to be in the stylesheet at load — a
   rule injected later keeps the stale 201px until hthHeader.remeasure().
   Verified: 201px -> 101px at rest, 202 -> 102 stuck, one row of items.
   ------------------------------------------------------------------ */
@media (min-width: 1026px) and (max-width: 1099px) {
	body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.menu-item {
		padding-left:  10px;
		padding-right: 10px;
	}

	body.hth-ds .sh-header.sh-sticky-header .sh-nav > li.sh-nav-cart {
		padding-left: 10px;
	}
}