/*
 * SaaSInspector Child Theme — Main Styles
 * Based on saasinspector-custom.css v3 (the design system from the Flask GUI)
 * Adapted for child-theme loading + additions for compare page & off-canvas mobile menu.
 *
 * Color system (matches Flask GUI exactly):
 *   --si-bg     #090c14    body
 *   --si-navy   #0e1626    content areas
 *   --si-card   #131e30    cards
 *   --si-border #1e2d45    borders
 *   --si-acc    #4fffb0    green accent
 *   --si-acc2   #7b6fff    purple accent
 *   --si-text   #e2e8f0    primary text
 *   --si-sub    #94a3b8    body copy
 *   --si-muted  #64748b    labels
 */

/* ══════════════════════════════════════════════════════════════
   FONTS
══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Montserrat:wght@500;600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ══════════════════════════════════════════════════════════════
   CSS VARIABLES
══════════════════════════════════════════════════════════════ */
:root {
  --si-bg:      #090c14;
  --si-navy:    #0e1626;
  --si-card:    #131e30;
  --si-card2:   #172238;
  --si-border:  #1e2d45;
  --si-hover:   #1a2640;
  --si-acc:     #4fffb0;
  --si-acc2:    #7b6fff;
  --si-danger:  #ff5a5a;
  --si-warn:    #ffc94a;
  --si-text:    #e2e8f0;
  --si-sub:     #94a3b8;
  --si-muted:   #64748b;
  --si-mono:    'DM Mono', monospace;
  --si-sans:    'DM Sans', sans-serif;
  --si-disp:    'Montserrat', sans-serif;
  --si-r:       10px;
  --si-r-sm:    6px;
  /* Override Rehub tokens */
  --accent-color: #4fffb0;
  --rh-accent:    #4fffb0;
  --rehub-accent: #4fffb0;
  --rh-color:     #4fffb0;
  --rh-color2:    #7b6fff;
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL BASE
══════════════════════════════════════════════════════════════ */
html { background: var(--si-bg) !important; }

body,
body.woocommerce,
body.woocommerce-page,
body.single-product {
  background-color: var(--si-bg) !important;
  color: var(--si-text) !important;
  font-family: var(--si-sans) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Page wrappers */
#page, #wrapper, .site, .site-content,
#content, #main, .site-main, .main-wrap,
.inner-wrap, .col-main, .rh-container,
.container, .wrap, .page-content,
.rh-outer-wrap {
  background: transparent !important;
  color: var(--si-text) !important;
}

a            { color: var(--si-acc) !important; text-decoration: none !important; transition: color .15s; }
a:hover      { color: #6bffc0 !important; }
a:visited    { color: var(--si-acc2) !important; }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--si-disp) !important;
  color: var(--si-text) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}
h1 { font-size: 2rem !important; font-weight: 800 !important; }
h2 { font-size: 1.5rem !important; }
h3 { font-size: 1.15rem !important; }
h4 { font-size: 1rem !important; font-weight: 600 !important; }

p          { color: var(--si-sub) !important; margin-bottom: 1rem !important; }
strong, b  { color: var(--si-text) !important; }
em         { color: var(--si-sub) !important; }

::selection { background: rgba(79,255,176,.2) !important; color: var(--si-acc) !important; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--si-bg); }
::-webkit-scrollbar-thumb { background: var(--si-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--si-muted); }

hr { border: none !important; border-top: 1px solid var(--si-border) !important; margin: 28px 0 !important; }

/* HANDS OFF the WP admin bar */
#wpadminbar, #wpadminbar *, #wpadminbar a {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
#wpadminbar { background: #1d2327 !important; }

/* ══════════════════════════════════════════════════════════════
   LOGO  (Rehub .textlogo div — handled by logo-split.js)
══════════════════════════════════════════════════════════════ */
div.textlogo, .textlogo,
.site-title img, .custom-logo-link img,
#logo img, #logo-link img, .logo-link img,
.logo img, .header-logo img, img.rh-logo,
.site-logo img, .logo-img {
  /* image logos hidden; text logo handled below */
}
.site-title img, .custom-logo-link img,
#logo img, .logo img, img.rh-logo, .logo-img { display: none !important; }

div.textlogo, .textlogo {
  font-family: 'DM Mono', 'Courier New', monospace !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  font-style: normal !important;
}
div.textlogo span, .textlogo span {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-family: 'DM Mono', 'Courier New', monospace !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: 0.28em !important;
}
.site-title a::before, .site-title a::after,
#logo-link::before, #logo-link::after,
.custom-logo-link::before, .custom-logo-link::after { content: none !important; }

/* ══════════════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════════════ */
#header, #main_header,
.header-wrap, .header_wrap,
.site-header, .headerwrap,
.header-main, .header-sticky,
.sticky-wrapper, .rh-header {
  background: var(--si-navy) !important;
  border-bottom: 1px solid var(--si-border) !important;
  box-shadow: none !important;
  color: var(--si-text) !important;
}
.header-top, .top-bar, .topbar, .rh-header-top {
  background: var(--si-bg) !important;
  border-bottom: 1px solid var(--si-border) !important;
  color: var(--si-muted) !important;
  font-size: 12px !important;
}
.header-top a, .top-bar a   { color: var(--si-muted) !important; }
.header-top a:hover         { color: var(--si-acc) !important; }

/* ══════════════════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════════════════ */
#access, nav, .main-nav, .nav-wrap,
.primary-navigation, .sf-menu {
  background: transparent !important;
}

.sf-menu > li > a,
.main-nav ul > li > a,
nav ul > li > a,
#access ul > li > a {
  color: var(--si-muted) !important;
  font-family: var(--si-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 14px !important;
  line-height: 52px !important;
  transition: color .15s !important;
  background: transparent !important;
  border-bottom: 2px solid transparent !important;
  position: relative !important;
}
.sf-menu > li > a:hover,
.sf-menu > li.current-menu-item > a,
.sf-menu > li.sfHover > a,
nav ul > li.current-menu-item > a,
nav ul > li > a:hover {
  color: var(--si-acc) !important;
  background: transparent !important;
  border-bottom-color: var(--si-acc) !important;
}

/* Dropdown submenu */
.sf-menu ul, .sub-menu, .children,
.sf-menu ul ul {
  background: var(--si-card) !important;
  border: 1px solid var(--si-border) !important;
  border-radius: var(--si-r-sm) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.7) !important;
  padding: 6px 0 !important;
}
.sf-menu li.sfHover > ul, .sf-menu li:hover > ul { display: block !important; }
.sf-menu ul li, .sub-menu li, .children li {
  background: transparent !important;
  border: none !important;
}
.sf-menu ul li a,
.sub-menu li a,
.children li a {
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: .06em !important;
  color: var(--si-sub) !important;
  padding: 9px 20px !important;
  line-height: 1.5 !important;
  background: transparent !important;
  border: none !important;
  text-transform: none !important;
  display: block !important;
  transition: color .1s, background .1s !important;
  -webkit-text-fill-color: var(--si-sub) !important;
}
.sf-menu ul li a:hover,
.sub-menu li a:hover,
.children li a:hover {
  color: var(--si-acc) !important;
  -webkit-text-fill-color: var(--si-acc) !important;
  background: rgba(79,255,176,.05) !important;
}
.sf-menu li.menu-item-has-children > a::after,
.sub-menu li.menu-item-has-children > a::after {
  content: ' ›' !important;
  color: var(--si-muted) !important;
  -webkit-text-fill-color: var(--si-muted) !important;
  font-size: 14px !important;
}

/* Header search */
.header-search input[type="search"],
.search-form input[type="search"],
input[type="search"] {
  background: var(--si-bg) !important;
  border: 1px solid var(--si-border) !important;
  border-radius: var(--si-r-sm) !important;
  color: var(--si-text) !important;
  font-family: var(--si-sans) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
}
.header-search input:focus, input[type="search"]:focus {
  border-color: var(--si-acc2) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(123,111,255,.12) !important;
}
input::placeholder, textarea::placeholder { color: var(--si-muted) !important; }
.cart-count, .cart-contents-count {
  background: var(--si-acc) !important;
  color: #090c14 !important;
  font-family: var(--si-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT ARCHIVE / CATEGORY
══════════════════════════════════════════════════════════════ */
.woocommerce-products-header,
.term-description,
.archive-header,
.category-header,
.shop-header {
  background: var(--si-navy) !important;
  border: 1px solid var(--si-border) !important;
  border-radius: var(--si-r) !important;
  padding: 24px 28px !important;
  margin-bottom: 24px !important;
  color: var(--si-text) !important;
}
.woocommerce-products-header__title,
.archive-title, .page-title {
  font-family: var(--si-disp) !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: var(--si-text) !important;
  margin-bottom: 8px !important;
}
.term-description p { color: var(--si-muted) !important; font-size: 14px !important; }

.woocommerce-ordering,
.sort-count-wrap,
.loop-filters {
  background: var(--si-navy) !important;
  border: 1px solid var(--si-border) !important;
  border-radius: var(--si-r) !important;
  padding: 10px 18px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.woocommerce-result-count {
  color: var(--si-muted) !important;
  font-family: var(--si-mono) !important;
  font-size: 12px !important;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce-ordering select, select.orderby {
  background: var(--si-bg) !important;
  border: 1px solid var(--si-border) !important;
  border-radius: var(--si-r-sm) !important;
  color: var(--si-text) !important;
  font-family: var(--si-sans) !important;
  font-size: 13px !important;
  padding: 7px 12px !important;
}

/* Product cards */
ul.products,
.woocommerce ul.products,
.products-grid { background: transparent !important; }

ul.products li.product,
.woocommerce ul.products li.product,
.woo-entry-wrapper,
.product-item, .product-col,
.loop-product-wrap {
  background: var(--si-card) !important;
  border: 1px solid var(--si-border) !important;
  border-radius: var(--si-r) !important;
  overflow: hidden !important;
  transition: border-color .2s, transform .2s, box-shadow .2s !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  color: var(--si-text) !important;
}
ul.products li.product:hover,
.woo-entry-wrapper:hover {
  border-color: rgba(79,255,176,.35) !important;
  box-shadow: 0 4px 28px rgba(79,255,176,.07) !important;
  transform: translateY(-2px) !important;
}
ul.products li.product a img,
.woo-entry-image img,
.woocommerce-loop-product__image img {
  background: #0a0e18 !important;
  border-bottom: 1px solid var(--si-border) !important;
  display: block !important;
  width: 100% !important;
}
.woo-entry-image,
.product-thumbnail-wrap,
.product-image-col {
  background: var(--si-bg) !important;
  border-bottom: 1px solid var(--si-border) !important;
}
ul.products li.product .woo-entry-inner,
ul.products li.product .product-card-body,
ul.products li.product > a + * {
  padding: 14px 16px !important;
  background: var(--si-card) !important;
}
.woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3,
.woo-entry-title,
.product-title-wrap h3 {
  font-family: var(--si-disp) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--si-text) !important;
  margin: 10px 16px 6px !important;
  line-height: 1.3 !important;
  letter-spacing: -.1px !important;
}
.woocommerce-Price-amount,
ul.products li.product .price,
.woo-entry-price .price {
  color: var(--si-acc) !important;
  font-family: var(--si-mono) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
del .woocommerce-Price-amount { color: var(--si-muted) !important; opacity: .6 !important; }
.rh-score, .loop-score, .product-score {
  font-family: var(--si-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--si-acc) !important;
  background: rgba(79,255,176,.08) !important;
  border: 1px solid rgba(79,255,176,.25) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
}
.star-rating { color: var(--si-warn) !important; }
.star-rating::before { color: var(--si-border) !important; }
.star-rating span { color: var(--si-warn) !important; }

ul.products li.product .button,
ul.products li.product a.button,
.woo-entry-buttons a,
.product_type_external.button {
  background: transparent !important;
  border: 1px solid var(--si-border) !important;
  color: var(--si-muted) !important;
  font-family: var(--si-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  border-radius: var(--si-r-sm) !important;
  margin: 0 16px 14px !important;
  display: inline-block !important;
  transition: border-color .15s, color .15s !important;
}
ul.products li.product .button:hover,
.woo-entry-buttons a:hover {
  border-color: var(--si-acc2) !important;
  color: var(--si-acc2) !important;
  background: rgba(123,111,255,.06) !important;
}

/* Product card wishlist/compare pills — Rehub markup */
.heart_thumb_wrap, .button_action, .compare_for_grid { background: transparent !important; }
.heartplus, .heart_thumb_wrap .heartplus,
.cell_wishlist .heartplus,
.wpsm-button-new-compare, .addcompare-id,
.comparecompact, span.comparecompact,
.wpsm-button.wpsm-button-new-compare,
.wpsm-button-new-compare.white,
.wpsm-button-new-compare.small,
.wpsm-button-new-compare.not-incompare {
  background: var(--si-bg) !important;
  background-color: var(--si-bg) !important;
  border: 1px solid var(--si-border) !important;
  color: var(--si-muted) !important;
  -webkit-text-fill-color: var(--si-muted) !important;
  border-radius: 20px !important;
  padding: 6px 14px !important;
  font-family: var(--si-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: all .15s ease !important;
}
.heartplus i, .wpsm-button-new-compare i, .comparecompact i {
  color: var(--si-muted) !important;
  -webkit-text-fill-color: var(--si-muted) !important;
}
.heartplus:hover, .wpsm-button-new-compare:hover, .comparecompact:hover {
  background: rgba(79,255,176,.08) !important;
  border-color: var(--si-acc) !important;
  color: var(--si-acc) !important;
  -webkit-text-fill-color: var(--si-acc) !important;
}
.heartplus:hover i, .wpsm-button-new-compare:hover i, .comparecompact:hover i {
  color: var(--si-acc) !important;
  -webkit-text-fill-color: var(--si-acc) !important;
}
.wpsm-button-new-compare.incompare {
  background: rgba(79,255,176,.12) !important;
  border-color: var(--si-acc) !important;
  color: var(--si-acc) !important;
  -webkit-text-fill-color: var(--si-acc) !important;
}
.thumbscount, [id^="wishcount"] {
  color: var(--si-muted) !important;
  background: transparent !important;
  font-family: var(--si-mono) !important;
  font-size: 11px !important;
}

/* ══════════════════════════════════════════════════════════════
   SINGLE PRODUCT PAGE
══════════════════════════════════════════════════════════════ */
.woocommerce div.product, article.product, .type-product, .product.hentry {
  background: transparent !important;
  color: var(--si-text) !important;
}
.woocommerce div.product .summary,
.summary.entry-summary, .entry-summary,
.product-summary, .rh-product-summary, .woo-product-summary {
  background: var(--si-navy) !important;
  border: 1px solid var(--si-border) !important;
  border-radius: var(--si-r) !important;
  padding: 24px !important;
  color: var(--si-text) !important;
}
.entry-summary h1, .entry-summary h2,
.entry-summary .product_title, .summary .product_title,
h1.product_title {
  font-family: var(--si-disp) !important;
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: var(--si-text) !important;
  letter-spacing: -.3px !important;
  margin-bottom: 10px !important;
}
.entry-summary p, .summary p,
.woocommerce-product-details__short-description p, .short-description p {
  color: var(--si-sub) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}
.woocommerce .product p.price, .woocommerce .product span.price, .single-product .price {
  color: var(--si-acc) !important;
  font-family: var(--si-mono) !important;
  font-size: 1.4rem !important;
  font-weight: 500 !important;
}

/* Big CTA — View Plans */
.single_add_to_cart_button, a.single_add_to_cart_button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.cart input[type=submit],
.woocommerce #respond input#submit.alt,
a.product_type_external.button {
  background: var(--si-acc) !important;
  color: #090c14 !important;
  font-family: var(--si-sans) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 13px 32px !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  width: 100% !important;
  text-align: center !important;
  display: block !important;
  transition: background .15s, transform .1s !important;
  letter-spacing: .01em !important;
  box-shadow: 0 4px 20px rgba(79,255,176,.25) !important;
  -webkit-text-fill-color: #090c14 !important;
}
.single_add_to_cart_button:hover, a.product_type_external.button:hover {
  background: #6bffc0 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 24px rgba(79,255,176,.35) !important;
}

.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  background: transparent !important;
  border: 1px solid var(--si-border) !important;
  color: var(--si-sub) !important;
  font-family: var(--si-sans) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 10px 22px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: border-color .15s, color .15s !important;
  display: inline-block !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover {
  border-color: var(--si-acc2) !important;
  color: var(--si-acc2) !important;
  background: rgba(123,111,255,.06) !important;
}

.product_meta { background: transparent !important; }
.product_meta span { color: var(--si-muted) !important; font-size: 13px !important; }
.product_meta a { color: var(--si-acc2) !important; font-family: var(--si-mono) !important; font-size: 12px !important; }
.product_meta a:hover { color: var(--si-acc) !important; }

.woocommerce-product-rating { background: transparent !important; color: var(--si-text) !important; }
.woocommerce-product-details__short-description, .short-description {
  color: var(--si-sub) !important;
  background: transparent !important;
  border-top: 1px solid var(--si-border) !important;
  border-bottom: 1px solid var(--si-border) !important;
  padding: 14px 0 !important;
  margin: 14px 0 !important;
}
.add_to_wishlist, .wishlist-btn, .add-to-compare-link, .rh-compare-btn {
  color: var(--si-muted) !important;
  font-size: 13px !important;
  background: transparent !important;
}
.add_to_wishlist:hover { color: var(--si-danger) !important; }
.add-to-compare-link:hover { color: var(--si-acc2) !important; }

.woocommerce-product-gallery, .product-images, .rh-product-gallery {
  background: var(--si-navy) !important;
  border: 1px solid var(--si-border) !important;
  border-radius: var(--si-r) !important;
  overflow: hidden !important;
}
.woocommerce-product-gallery__image, .woocommerce-product-gallery__wrapper { background: var(--si-bg) !important; }

/* Breadcrumbs */
.woocommerce-breadcrumb, nav.woocommerce-breadcrumb, .breadcrumbs, .breadcrumb {
  background: transparent !important;
  color: var(--si-muted) !important;
  font-family: var(--si-mono) !important;
  font-size: 11px !important;
  letter-spacing: .05em !important;
  padding: 14px 0 !important;
}
.woocommerce-breadcrumb a, .breadcrumbs a { color: var(--si-muted) !important; }
.woocommerce-breadcrumb a:hover, .breadcrumbs a:hover { color: var(--si-acc) !important; }
.woocommerce-breadcrumb .separator { color: var(--si-border) !important; }

/* White-strip kill on single product page */
body.single-product #page, body.single-product #wrapper,
body.single-product #main, body.single-product .site-main,
body.single-product .site-content, body.single-product #content,
body.single-product .woocommerce, body.single-product .woocommerce-page,
body.single-product .product, body.single-product .type-product,
body.single-product article.product, body.single-product div.product,
body.single-product .rh-product-layout, body.single-product .product-layout-wrap,
body.single-product .product-page-layout, body.single-product .single-product-content,
body.single-product .rh-single-product, body.single-product .product-page-wrap,
body.single-product .product-content-area, body.single-product .woo-single-layout,
body.single-product .product-area-main {
  background-color: var(--si-bg) !important;
  color: var(--si-text) !important;
}
body.single-product .woocommerce > * { background: transparent !important; }

/* ══════════════════════════════════════════════════════════════
   TABS
══════════════════════════════════════════════════════════════ */
.woocommerce div.product .woocommerce-tabs,
.woocommerce .woocommerce-tabs,
.woocommerce-tabs, .wc-tabs-wrapper {
  background: transparent !important;
  margin-top: 24px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce .woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.tabs, .wc-tabs {
  background: var(--si-navy) !important;
  border: 1px solid var(--si-border) !important;
  border-radius: var(--si-r) var(--si-r) 0 0 !important;
  padding: 0 16px !important;
  margin: 0 !important;
  list-style: none !important;
  display: flex !important;
}
.woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border: none !important;
  content: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-tabs ul.tabs li a {
  color: var(--si-muted) !important;
  font-family: var(--si-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 12px 18px !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  line-height: 1.4 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--si-text) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid var(--si-acc) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--si-acc) !important; }

.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce-tabs .panel, .woocommerce-tabs .woocommerce-Tabs-panel {
  background: var(--si-navy) !important;
  border: 1px solid var(--si-border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--si-r) var(--si-r) !important;
  padding: 28px !important;
  margin: 0 !important;
  color: var(--si-text) !important;
}
.woocommerce-tabs .panel h2 {
  font-size: 1.05rem !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--si-border) !important;
  color: var(--si-text) !important;
}

/* Product attributes table */
.woocommerce-product-attributes, table.shop_attributes {
  width: 100% !important;
  border-collapse: collapse !important;
  background: transparent !important;
}
.woocommerce-product-attributes th, table.shop_attributes th {
  background: rgba(0,0,0,.2) !important;
  color: var(--si-muted) !important;
  font-family: var(--si-mono) !important;
  font-size: 11px !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  padding: 10px 16px !important;
  text-align: left !important;
  border-bottom: 1px solid var(--si-border) !important;
  font-weight: 500 !important;
}
.woocommerce-product-attributes td, table.shop_attributes td {
  color: var(--si-text) !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--si-border) !important;
  background: transparent !important;
}
.woocommerce-product-attributes tr:last-child th,
.woocommerce-product-attributes tr:last-child td { border-bottom: none !important; }

/* ══════════════════════════════════════════════════════════════
   REVIEW BOX / wpsm_reviewbox
══════════════════════════════════════════════════════════════ */
.wpsm-reviewbox, #wpsm-reviewbox, .wpsm_review, .wpsm-review-wrap,
.review-box-wrap, .rh-review-box {
  background: var(--si-card) !important;
  border: 1px solid var(--si-border) !important;
  border-radius: var(--si-r) !important;
  overflow: hidden !important;
  margin: 24px 0 !important;
  color: var(--si-text) !important;
}
.wpsm-reviewbox-header, .review-box-header,
.wpsm_review_title, .rehub-review-header {
  background: rgba(255,255,255,.03) !important;
  border-bottom: 1px solid var(--si-border) !important;
  padding: 14px 20px !important;
  font-family: var(--si-disp) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--si-muted) !important;
}
.wpsm-reviewbox .overall-score, .review-overall, .wpsm_review_overall {
  background: linear-gradient(135deg, rgba(79,255,176,.08), rgba(123,111,255,.05)) !important;
  border-bottom: 1px solid var(--si-border) !important;
  padding: 22px !important;
  text-align: center !important;
  color: var(--si-text) !important;
}
.wpsm-reviewbox .criteria-row, .review-criteria-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 20px !important;
  border-bottom: 1px solid rgba(30,45,69,.8) !important;
  color: var(--si-text) !important;
}
.wpsm-reviewbox .criteria-name, .criteria-label {
  flex: 1 !important; font-size: 13px !important; color: var(--si-text) !important;
}
.wpsm-reviewbox .progress-bar, .criteria-bar {
  background: var(--si-bg) !important;
  border-radius: 3px !important;
  height: 5px !important;
  overflow: hidden !important;
  flex: 2 !important;
}
.wpsm-reviewbox .progress-bar .fill, .criteria-bar-fill,
.rh-criteria-bar, .rh-criteria-bar-fill,
.wpsm-pro-bar, .ratingbar span {
  background: linear-gradient(90deg, var(--si-acc2), var(--si-acc)) !important;
  height: 100% !important;
  border-radius: 3px !important;
}
.wpsm-reviewbox .pros-cons, .pros-cons-wrap {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1px !important;
  background: var(--si-border) !important;
  border-top: 1px solid var(--si-border) !important;
}
.wpsm-reviewbox .pros, .wpsm-reviewbox .cons, .review-pros, .review-cons {
  background: var(--si-card) !important;
  padding: 16px 20px !important;
  color: var(--si-text) !important;
}
.wpsm-reviewbox .pros-title { color: var(--si-acc) !important; font-family: var(--si-mono) !important; font-size: 10px !important; letter-spacing: .1em !important; text-transform: uppercase !important; margin-bottom: 10px !important; font-weight: 500 !important; }
.wpsm-reviewbox .cons-title { color: var(--si-danger) !important; font-family: var(--si-mono) !important; font-size: 10px !important; letter-spacing: .1em !important; text-transform: uppercase !important; margin-bottom: 10px !important; font-weight: 500 !important; }
.wpsm-reviewbox ul li { color: var(--si-sub) !important; font-size: 13px !important; line-height: 1.65 !important; margin-bottom: 5px !important; list-style: none !important; padding-left: 16px !important; position: relative !important; }
.wpsm-reviewbox .pros ul li::before { content: '+' !important; position: absolute !important; left: 0 !important; color: var(--si-acc) !important; font-weight: 700 !important; }
.wpsm-reviewbox .cons ul li::before { content: '−' !important; position: absolute !important; left: 0 !important; color: var(--si-danger) !important; font-weight: 700 !important; }

/* ══════════════════════════════════════════════════════════════
   REVIEW BODY CONTENT
══════════════════════════════════════════════════════════════ */
.entry-content,
.woocommerce-tabs .panel .entry-content,
.description-tab {
  color: var(--si-sub) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}
.entry-content h2 {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--si-text) !important;
  margin: 2rem 0 1rem !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--si-border) !important;
}
.entry-content h3 {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--si-text) !important;
  margin: 1.5rem 0 .75rem !important;
}
.entry-content p { color: var(--si-sub) !important; }
.entry-content strong { color: var(--si-text) !important; }
.entry-content a { color: var(--si-acc) !important; text-decoration: underline !important; text-underline-offset: 3px !important; }
.entry-content ul, .entry-content ol { margin-left: 1.5rem !important; margin-bottom: 1rem !important; }
.entry-content li { color: var(--si-sub) !important; margin-bottom: .4rem !important; }
.entry-content img, .woocommerce-tabs .panel img {
  border-radius: var(--si-r-sm) !important;
  border: 1px solid var(--si-border) !important;
  max-width: 100% !important;
  height: auto !important;
  background: var(--si-bg) !important;
}
.entry-content blockquote, .wp-block-quote {
  background: rgba(123,111,255,.06) !important;
  border-left: 3px solid var(--si-acc2) !important;
  border-radius: 0 var(--si-r-sm) var(--si-r-sm) 0 !important;
  padding: 14px 20px !important;
  margin: 20px 0 !important;
  color: var(--si-muted) !important;
  font-style: italic !important;
}
.entry-content table { width: 100% !important; border-collapse: collapse !important; margin: 20px 0 !important; font-size: 14px !important; }
.entry-content thead th { background: rgba(0,0,0,.2) !important; color: var(--si-muted) !important; font-family: var(--si-mono) !important; font-size: 11px !important; letter-spacing: .07em !important; text-transform: uppercase !important; padding: 10px 14px !important; text-align: left !important; border-bottom: 2px solid var(--si-border) !important; }
.entry-content td { padding: 10px 14px !important; border-bottom: 1px solid var(--si-border) !important; color: var(--si-sub) !important; }
.entry-content tr:nth-child(even) td { background: rgba(255,255,255,.015) !important; }

/* ══════════════════════════════════════════════════════════════
   SIDEBAR & WIDGETS
══════════════════════════════════════════════════════════════ */
#sidebar, .col-aside, aside.widget-area, .widget-area, .sidebar, .col-sidebar {
  background: transparent !important;
  column-count: 1 !important;
  -webkit-column-count: 1 !important;
  -moz-column-count: 1 !important;
}

/* ⛔ DO NOT MODIFY — Paul confirmed this is correct (the "GOOD" image style) */
.widget, .sidebar .widget, .rehub-widget,
aside.sidebar .widget,
.widget.woocommerce.widget_layered_nav,
.woocommerce-widget-layered-nav,
.widget.widget_layered_nav {
  background: var(--si-navy) !important;
  background-color: var(--si-navy) !important;
  border: 1px solid var(--si-border) !important;
  border-radius: 10px !important;
  padding: 18px !important;
  margin-bottom: 18px !important;
  box-shadow: none !important;
  color: var(--si-text) !important;
}
/* ⛔ END LOCK */

/* ════════════════════════════════════════════════════════════════
   FIX BATCH — confirmed by Paul (yes both)
   1. Remove dropdown border inside widget = no box-in-a-box
   2. Nav underline solid green, kill orange
═══════════════════════════════════════════════════════════════ */

/* (1) NUCLEAR: kill EVERY border on EVERY descendant of widget — except title */
.widget *:not(.title) {
    border-color: transparent !important;
}
.widget .title {
    border-bottom: 1px solid var(--si-border) !important;  /* keep title separator */
}

/* v2.1.3 catch-all dropdown block — REMOVED in v2.1.5.
   It was painting .select2-selection__rendered (matched by [class*="select"])
   with --si-bg + 10px padding, creating the inner box-in-a-box.
   Replaced by the minimalist underline-only block further down. */
/* The dropdown arrow if niceselect uses .nice-select::after */
.widget .nice-select::after, .widget .nice-select:after {
    border-color: var(--si-muted) !important;
}
/* The current value text inside nice-select */
.widget .nice-select .current {
    color: var(--si-text) !important;
    background: transparent !important;
}
/* The open list inside nice-select */
.widget .nice-select .list {
    background: var(--si-card) !important;
    border: 1px solid var(--si-border) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.6) !important;
}
.widget .nice-select .option {
    color: var(--si-text) !important;
    background: transparent !important;
}
.widget .nice-select .option:hover, .widget .nice-select .option.focus,
.widget .nice-select .option.selected.focus {
    background: rgba(79,255,176,.08) !important;
    color: var(--si-acc) !important;
}

/* (2) Nav underline — KILLED. Active state shown via text color only. */
nav.top_menu > ul:not(.off-canvas) > li > a:after,
nav.top_menu > ul:not(.off-canvas) > li > a::after,
nav.top_menu > ul > li > a:after,
nav.top_menu > ul > li > a::after,
nav.top_menu > ul > li.current-menu-item > a:after,
nav.top_menu > ul > li.current-menu-ancestor > a:after,
nav.top_menu > ul > li.current-product-ancestor > a:after,
nav.top_menu > ul > li.sfHover > a:after,
.sf-menu > li > a:after, .sf-menu > li > a::after,
.sf-menu > li.current-menu-item > a:after,
.sf-menu > li.sfHover > a:after,
.main-nav li a:after, .main-nav li a::after,
#main_header nav li a:after, #main_header nav li a::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    background-color: transparent !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    border: none !important;
}

/* Active nav item — color only, no underline */
nav.top_menu > ul > li.current-menu-item > a,
nav.top_menu > ul > li.current-menu-ancestor > a,
nav.top_menu > ul > li.current-product-ancestor > a,
.sf-menu > li.current-menu-item > a,
.sf-menu > li.current-menu-ancestor > a,
.sf-menu > li.current-product-ancestor > a,
.main-nav li.current-menu-item > a {
    color: var(--si-acc) !important;
    -webkit-text-fill-color: var(--si-acc) !important;
    background: transparent !important;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE + TABLET FIXES (everything Paul shouted about)
   v2.1.33 — Breakpoint extended 768 → 1024 so tablets (iPad Mini,
   1000×1000 emulation, etc.) get the same polished experience as
   phones: sticky header, bottom action bar, restructured nav.
   Desktop (≥1025) keeps Rehub's wide layout.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* (A) White body bg → dark, MAX specificity */
    html, html body,
    html body.archive, html body.tax-product_cat,
    html body.woocommerce, html body.woocommerce-page,
    html body.shop, html body.dark_body,
    .rh-outer-wrap, .site, #page, #wrapper {
        background: var(--si-bg) !important;
        background-color: var(--si-bg) !important;
    }

    /* ───────────────────────────────────────────────────────────────
       v2.1.6 — Mobile header layout
       Target: [hamburger] [SAASINSPECTOR centered] [search icon]
       ─────────────────────────────────────────────────────────────── */

    /* Kill the broken mobile-logo <img> (user removed image — empty src
       was rendering as a black placeholder box) */
    .logo .mobile-logo, .logo #mobile-logo, .logo .rh-mobile-logo,
    .logo img[class*="mobile_logo"],
    .logo img:not([src]), .logo img[src=""],
    .mobile_logo, img.mobile_logo {
        display: none !important;
    }

    /* v2.1.7 — Kill duplicate logos.
       logo-split.js injects #si-mobile-logo absolutely-positioned at center,
       which overlaps the natural .textlogo. Hide the JS injection and any
       sticky-header duplicate. Keep only ONE .textlogo visible. */
    #si-mobile-logo,
    body > #si-mobile-logo,
    header #si-mobile-logo,
    .rh-stickme + .rh-stickme .textlogo,
    .logo-section ~ .logo-section .textlogo,
    .logo .textlogo ~ .textlogo,
    .header_wrap .textlogo[data-si-logo-split="1"] ~ .textlogo[data-si-logo-split="1"] {
        display: none !important;
    }

    /* Hide the full search bar FORM in header (we keep only the icon button) */
    .header_wrap .head_search,
    .header_wrap .rh-flex-grow1.hideontablet,
    .header_wrap form.search-form {
        display: none !important;
    }

    /* Hide wishlist + compare wrapper — already on bottom toolbar */
    .header-actions-logo,
    .header-actions-logo .celldisplay,
    .header-actions-logo .rh-flex-center-align,
    .header-actions-logo .rh-header-icon,
    .header-actions-logo .rh-comparemenu-link,
    .header-actions-logo .rh-wishlistmenu-link {
        display: none !important;
    }

    /* Hide desktop nav menu — entire element, not just the <ul>, so it doesn't
       eat flex space in .main-nav on mobile */
    .main-nav nav.top_menu,
    .main-nav > nav.top_menu,
    nav.top_menu,
    nav.top_menu > ul.menu {
        display: none !important;
    }

    /* Hide empty desktop placeholders */
    .logo.hideontablet:empty, .sloganlogo:empty, .logo:empty { display: none !important; }

    /* v2.1.23 — Plain flex layout. Works because runtime.js's
       restructureMobileHeader() physically moves #dl-trigger and
       .icon-search-onclick to be DIRECT children of .logo-section, so we
       no longer need display:contents (which silently failed in v2.1.19,
       v2.1.20, v2.1.22). With buttons as real direct flex children:
         [hamburger] [.logo: flex-grow] [search]
       justify-content: space-between + flex:1 on logo keeps logo centered. */
    html body .logo-section,
    html body .logo-section.rh-flex-center-align {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 12px !important;
        min-height: 60px !important;
        height: 60px !important;
        background: var(--si-navy) !important;
        box-sizing: border-box !important;
    }
    /* v2.1.23 — Hide EVERY direct child of .logo-section except the three
       we want visible. This includes the now-emptied .main-nav wrapper
       (its #dl-trigger child got moved out), .rh-flex-grow1, .header-actions-logo,
       and anything else Rehub or a plugin tries to inject. */
    html body .logo-section > *:not(#dl-trigger):not(.logo):not(.logo.hideontablet):not(.icon-search-onclick) {
        display: none !important;
    }

    /* v2.1.12 — root cause: #main_header is display:flex, leaving .header_wrap
       and descendants stuck at half-width on mobile. Force #main_header back
       to block layout, then make every wrapper explicitly full-width with
       flex-basis 100% in case anything above is still flex. */
    html body #main_header,
    html body header#main_header,
    html body header.dark_style {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        background: transparent !important;
        flex-wrap: nowrap !important;
        /* v2.1.27 — THE ACTUAL FIX. Confirmed via console.table walk of the
           ancestor chain on iPhone 12 Pro (390px viewport):
             #main_header had padding-left/right: 12px in BOTH states.
           When stuck, .rh-stickme position:fixed escapes parent flow so the
           bar spans 0→390. When non-stuck, the bar inherits #main_header's
           366px content area, sitting at x=12 with 24px of dead space.
           Zeroing the header's own padding fixes the non-stuck inset that
           v2.1.21 through v2.1.26 all missed (we kept targeting the
           descendants instead of the header element itself). */
        padding: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html body .header_wrap,
    html body .rh-stickme,
    html body #sticky-wrapper,
    html body .sticky-wrapper,
    html body .header_one_row,
    html body .header_five_style,
    html body .logo_section_wrap,
    html body .rh-container {
        transform: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 1 1 100% !important;
        flex-basis: 100% !important;
        margin: 0 !important;
        /* v2.1.21 — KILL Rehub's container padding on mobile. */
        padding: 0 !important;
    }

    /* v2.1.24 — ID-scoped specificity bump on wrappers (works in stuck state). */
    /* v2.1.25 — Extended to cover MORE wrapper variants + add .logo-section
       itself. Without .logo-section in this list, Rehub was winning the
       padding fight on the inner element specifically in the non-stuck
       state, leaving ~20px of dead space inside .logo-section that shoved
       the hamburger/search inward from the viewport edges. */
    html body header#main_header .rh-stickme,
    html body header#main_header .rh-stickme:not(.is_stuck),
    html body header#main_header .rh-stickme.is_stuck,
    html body header#main_header .rh-container,
    html body header#main_header .rh-container.tabletblockdisplay,
    html body header#main_header .rh-container.disabletabletpadding,
    html body header#main_header #sticky-wrapper,
    html body header#main_header .sticky-wrapper,
    html body header#main_header .header_wrap,
    html body header#main_header .header_one_row,
    html body header#main_header .header_five_style,
    html body header#main_header .logo_section_wrap {
        padding: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* v2.1.25 — .logo-section needs its OWN ID-scoped padding rule (12px
       L/R so buttons aren't flush against the viewport edge). Without ID
       scope, Rehub's `header .logo-section` (or similar) was winning in
       the non-stuck state and applying ~20-30px of extra inset padding. */
    html body header#main_header .logo-section,
    html body header#main_header .logo-section.rh-flex-center-align,
    html body header#main_header .rh-container > .logo-section,
    html body header#main_header .rh-stickme .logo-section {
        padding: 0 12px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* v2.1.21 — overflow-x: hidden is already set globally at line ~2250.
       Not duplicating here. The padding:0 above is the actual fix. */

    /* v2.1.23 — Logo: flex middle child, grows to fill space between
       hamburger and search so the SAASINSPECTOR text sits centered. */
    html body .logo-section > .logo,
    html body .logo-section > .logo.hideontablet {
        order: 2 !important;
        flex: 1 1 auto !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        text-align: center !important;
        background: transparent !important;
        z-index: 50 !important;
        pointer-events: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .logo .textlogo, .logo div.textlogo, div.textlogo {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Hide stray direct children that shift layout */
    .logo-section > .rh-flex-grow1,
    .logo-section > .head_search,
    .logo-section > .header-actions-logo { display: none !important; }

    /* v2.1.19 — Use `display: contents` to unwrap the deeply nested header
       wrappers (.main-nav, .responsive_nav_wrap, #dl-menu, #mobile-menu-icons)
       so the buttons (#dl-trigger, .icon-search-onclick) become DIRECT flex
       children of .logo-section. Rehub's `.rh-flex-right-align` on .main-nav
       was pushing the hamburger to the right; this neutralizes it entirely. */
    html body .logo-section > .main-nav,
    html body .main-nav,
    html body .responsive_nav_wrap, html body .rh_mobile_menu,
    html body #dl-menu, html body .dl-menuwrapper,
    html body #mobile-menu-icons {
        display: contents !important;
    }
    /* v2.1.23 — Hamburger: flex item at order:1 (first / left). */
    html body #dl-trigger, html body .dl-trigger {
        order: 1 !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255,255,255,.06) !important;
        border: 1px solid var(--si-border) !important;
        border-radius: 6px !important;
        color: var(--si-text) !important;
        width: 36px !important;
        height: 36px !important;
        padding: 6px !important;
        cursor: pointer !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 60 !important;
    }
    #dl-trigger svg, .dl-trigger svg {
        width: 22px !important;
        height: 22px !important;
        display: block !important;
    }
    #dl-trigger svg line, .dl-trigger svg line {
        stroke: var(--si-text) !important;
        stroke-width: 2.5 !important;
    }

    /* v2.1.23 — Search button: flex item at order:3 (last / right). */
    html body #mobile-menu-icons button.icon-search-onclick,
    html body .icon-search-onclick,
    html body button.icon-search-onclick {
        order: 3 !important;
        position: static !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255,255,255,.06) !important;
        border: 1px solid var(--si-border) !important;
        border-radius: 6px !important;
        color: var(--si-text) !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
        padding: 6px !important;
        cursor: pointer !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 60 !important;
    }
    #mobile-menu-icons button.icon-search-onclick i,
    .icon-search-onclick i {
        color: var(--si-text) !important;
        font-size: 18px !important;
        display: inline-block !important;
    }

    /* (C) Hide right-side floating compare/wishlist (bottom bar already has them) */
    .header-actions-logo .celldisplay,
    .header-actions-logo .rh-header-icon,
    .header-actions-logo .rh-comparemenu-link,
    .header-actions-logo .rh-wishlistmenu-link,
    .rh-floating-compare, .rh-floating-wishlist,
    body > .rh-comparemenu-link, body > .rh-wishlistmenu-link,
    .floating-icons, [class*="floating-compare"], [class*="floating-wishlist"],
    /* v2.1.13 — Rehub's fixed-position floating compare icon. Overlaps the
       sticky search button when scrolled. Bottom toolbar already shows count. */
    #re-compare-icon-fixed,
    body > #re-compare-icon-fixed,
    body #re-compare-icon-fixed {
        display: none !important;
    }

    /* (D) v2.1.9 — Card overlay icons. The actual DOM uses div.products > div.product
       (not ul.products > li.product). Targeting via .product not li.product. */
    .product .button_action,
    .product .button_action.showonsmobile,
    .product .button_action.rhhidden,
    .product .heart_thumb_wrap,
    .product .cell_wishlist,
    .product .compare_for_grid,
    .product .heartplus,
    .product .wpsm-button-new-compare,
    .product .comparecompact,
    .product .floatleft.mr5,
    .product .woofigure .button_action,
    .product .position-relative.woofigure > .button_action,
    .products .product .button_action,
    .woogridrev .button_action,
    .woo-entry-image .button_action,
    .woo-entry-image .heart_thumb_wrap,
    .woo-entry-image .compare_for_grid {
        display: none !important;
        visibility: hidden !important;
    }

    /* (E) v2.1.9 — Force 1-column product grid on mobile.
       Rehub gives products class "two_column_mobile" which forces 2-col.
       Override here so titles & images aren't cramped. */
    .products.columns-4,
    .products.columns-3,
    .products.columns-2,
    .col_wrap_fourth, .col_wrap_third, .col_wrap_half,
    .woogridrev, .rh-flex-eq-height.products {
        display: block !important;
        column-count: 1 !important;
    }
    .product.col_item.column_grid,
    .product.two_column_mobile,
    .products > .product,
    .product {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 0 16px 0 !important;
        display: block !important;
    }
    /* Product titles — no truncation */
    .product .rh-grid-title, .product .woocommerce-loop-product__title,
    .product h2, .product h3, .product .product-title, .product a.product_title {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-wrap: break-word !important;
        word-break: normal !important;
        max-width: 100% !important;
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    /* v2.1.14 — Kill horizontal scroll that's pushing sticky header right.
       Rehub's stickysidebar.js re-applies inline width:406px on .rh-stickme
       when going sticky; this just clips the overflow at the body level.
       v2.1.16 — also pin the sticky wrapper itself to viewport width. */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }
    html body .rh-stickme,
    html body div.rh-stickme,
    html body #sticky-wrapper > .rh-stickme {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
    }
    /* Pull the search icon inboard a bit for safety against any edge clip */
    #mobile-menu-icons button.icon-search-onclick,
    .icon-search-onclick {
        right: 16px !important;
    }

    /* v2.1.15 — Rehub's float-panel bottom sticky bar. CONFIRMED via DOM
       inspect: classes are .rh-float-panel + .float-panel-woo-* family.
       v2.1.34 — Added explicit display + position + bottom + z-index. The
       earlier rules styled the bar but never forced it visible or pinned.
       At 769-1024 (tablet range) Rehub was hiding/not-positioning it, so
       even though my @media block extends to 1024 in v2.1.33, the bar
       wasn't actually rendering until these properties were set. */
    html body .rh-float-panel,
    html body .float-panel-woo-area,
    html body .rh-float-panel.floating,
    html body .rh-float-panel.scrollingDown,
    html body div.rh-float-panel,
    html body #float-panel-woo-area {
        display: flex !important;
        position: fixed !important;
        /* v2.1.37 — Explicitly nullify Rehub's `top: 0` setting (which it
           applies in scrollingDown state). Without this, both `top: 0`
           and `bottom: 0` are active simultaneously, causing the bar to:
             - flood full-viewport (Samsung Fold, pre-v2.1.36)
             - or render at the TOP clipped to max-height (iPad Pro,
               post-v2.1.36 with height caps)
           `top: auto` lets `bottom: 0` win and pins the bar to viewport bottom. */
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        z-index: 9999 !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: var(--si-navy) !important;
        background-color: var(--si-navy) !important;
        color: var(--si-text) !important;
        border-top: 1px solid var(--si-border) !important;
        box-shadow: 0 -4px 12px rgba(0,0,0,.4) !important;
    }
    html body .rh-float-panel .rh-container,
    html body .float-panel-woo-area .rh-container,
    html body .float-panel-woo-image,
    html body .float-panel-woo-info,
    html body .float-panel-woo-btn,
    html body .float-panel-woo-price,
    html body .float-panel-woo-button {
        background: transparent !important;
        background-color: transparent !important;
        color: var(--si-text) !important;
        -webkit-text-fill-color: var(--si-text) !important;
        border: none !important;
    }
    /* Bottom-bar descendants — make ALL text inside visible */
    html body .rh-float-panel *,
    html body .float-panel-woo-area * {
        color: var(--si-text) !important;
        -webkit-text-fill-color: var(--si-text) !important;
    }
    /* …but keep the title accent and price accent and button text dark */
    html body .float-panel-woo-info h1,
    html body .float-panel-woo-info h2,
    html body .float-panel-woo-info h3,
    html body .float-panel-woo-info .float-panel-woo-title,
    html body .float-panel-woo-info a {
        color: var(--si-text) !important;
        -webkit-text-fill-color: var(--si-text) !important;
        font-family: var(--si-sans) !important;
        font-weight: 600 !important;
    }

    /* v2.1.17 — Compact mobile bottom-bar layout.
       DOM (confirmed): .float-panel-woo-area > .rh-container.rh-flex-center-align >
         .float-panel-woo-image (icon) +
         .float-panel-woo-info (title + tab-links UL — UL hidden on mobile) +
         .float-panel-woo-btn (price + VIEW PLANS button)
       Force a single horizontal row so the title is actually readable. */
    /* v2.1.23 — Bottom bar: [icon left] [price center] [button right]
       per Paul's spec. Layout via flex space-between for icon ↔ button,
       price absolutely centered to .rh-container so it stays dead-center
       regardless of icon/button widths. */
    html body .rh-float-panel .rh-container,
    html body #float-panel-woo-area > .rh-container,
    html body .float-panel-woo-area > .rh-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        padding: 12px 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 64px !important;
        /* v2.1.23 — positioning context for absolutely-centered price */
        position: relative !important;
    }
    /* v2.1.23 — Icon visible again (Paul: "KEEP THE LOGO OF THE APP"). */
    html body .float-panel-woo-image {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        order: 1 !important;
    }
    html body .float-panel-woo-image img {
        width: 40px !important;
        height: 40px !important;
        border-radius: 8px !important;
        display: block !important;
        object-fit: contain !important;
    }
    /* v2.1.24 — Option A: show TITLE instead of price (bottom bar).
       v2.1.29 — SCOPED to .rh-float-panel / .float-panel-woo-area. The
       previous unscoped selector matched a SECOND .float-panel-woo-info
       Rehub injects at the top of the page (sticky-on-scroll product title)
       that was hidden by default. Un-hiding the bottom one un-hid the top
       one too. Scoping the parent restores the top one to Rehub's hidden
       default while keeping the bottom bar showing the title.
       Layout: [icon] [TITLE: AI Writer Review] [VIEW PLANS] */
    html body .rh-float-panel .float-panel-woo-info,
    html body .float-panel-woo-area .float-panel-woo-info {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        order: 2 !important;
        margin: 0 !important;
        padding: 0 8px !important;
        border-left: none !important;
        overflow: hidden !important;
        text-align: center !important;
    }
    html body .rh-float-panel .float-panel-woo-info .float-panel-woo-title,
    html body .float-panel-woo-area .float-panel-woo-info .float-panel-woo-title {
        display: block !important;
        color: var(--si-text) !important;
        -webkit-text-fill-color: var(--si-text) !important;
        font-family: var(--si-sans) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.25 !important;
        max-width: 100% !important;
        text-align: center !important;
    }
    /* Hide the duplicate tab-links UL inside .float-panel-woo-info (bottom bar). */
    html body .rh-float-panel .float-panel-woo-info .float-panel-woo-links,
    html body .rh-float-panel .float-panel-woo-links,
    html body .float-panel-woo-area .float-panel-woo-links {
        display: none !important;
    }
    /* v2.1.23 — .float-panel-woo-btn now contains only the VIEW PLANS
       button (price has been absolutely positioned to .rh-container).
       Forces this wrapper to be a right-side flex item, sized to content. */
    html body .rh-float-panel .float-panel-woo-btn,
    html body .float-panel-woo-area .float-panel-woo-btn,
    html body .float-panel-woo-btn.rh-flex-columns,
    html body .float-panel-woo-btn.rh-flex-right-align,
    html body .float-panel-woo-btn.rh-flex-nowrap {
        order: 3 !important;
        flex: 0 0 auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
        width: auto !important;
        max-width: max-content !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
    }
    /* v2.1.24 — Option A: price hidden on mobile bottom bar. Title takes
       the middle slot instead. Price still appears on the page H1 area. */
    html body .rh-float-panel .float-panel-woo-price,
    html body .float-panel-woo-area .float-panel-woo-price {
        display: none !important;
    }
    html body .float-panel-woo-price {
        font-family: var(--si-mono) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html body .float-panel-woo-price p,
    html body .float-panel-woo-price .price,
    html body .float-panel-woo-price * {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 15px !important;
        line-height: 1 !important;
    }
    html body .float-panel-woo-button {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html body .float-panel-woo-button a,
    html body .float-panel-woo-button .button {
        padding: 12px 18px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        width: auto !important;
        min-width: 0 !important;
        line-height: 1.2 !important;
        display: inline-flex !important;
        align-items: center !important;
        letter-spacing: .04em !important;
    }
    /* Price stays accent green */
    html body .float-panel-woo-price,
    html body .float-panel-woo-price *,
    html body .rh-float-panel .rehub-main-color {
        color: var(--si-acc) !important;
        -webkit-text-fill-color: var(--si-acc) !important;
        font-family: var(--si-mono) !important;
    }
    /* VIEW PLANS button stays accent */
    html body .float-panel-woo-button a,
    html body .float-panel-woo-button .button,
    html body .float-panel-woo-button a.button,
    html body .rh-float-panel a.button,
    html body .rh-float-panel .wpsm-button,
    html body .rh-float-panel a.product_type_external {
        background: var(--si-acc) !important;
        background-color: var(--si-acc) !important;
        color: #090c14 !important;
        -webkit-text-fill-color: #090c14 !important;
        border: none !important;
        border-radius: var(--si-r-sm) !important;
        font-weight: 600 !important;
        font-family: var(--si-mono) !important;
        letter-spacing: .05em !important;
    }
    /* v2.1.21 — Force DARK text on every descendant of the button. The earlier
       wildcard rule (html body .rh-float-panel *) was leaking LIGHT color
       onto inner spans/elements inside the <a>, making "VIEW PLANS" appear
       invisible on the green button. This rule has higher specificity than
       the wildcard so it wins for everything inside the button. */
    html body .rh-float-panel .float-panel-woo-button,
    html body .rh-float-panel .float-panel-woo-button *,
    html body .float-panel-woo-area .float-panel-woo-button,
    html body .float-panel-woo-area .float-panel-woo-button * {
        color: #090c14 !important;
        -webkit-text-fill-color: #090c14 !important;
    }

    /* v2.1.16 — Rehub woo_directory tabs. CONFIRMED via DOM:
       Outer wrapper: <div class="border-grey-bottom flowhidden whitebg mb10 rh-shadow2">
       Tab list:      <ul class="rh-big-tabs-ul ...">
       Tab item:      <li class="rh-big-tabs-li ..."> (with .active for selected)
       Tab link:      <a href="#section-...">Description</a> */

    /* Outer wrapper — kill the .whitebg class and shadow */
    html body .border-grey-bottom.whitebg,
    html body div.border-grey-bottom.whitebg,
    html body .whitebg.rh-shadow2 {
        background: var(--si-navy) !important;
        background-color: var(--si-navy) !important;
        border: 1px solid var(--si-border) !important;
        border-radius: var(--si-r-sm) !important;
        box-shadow: none !important;
    }

    /* Tab list */
    html body .rh-big-tabs-ul,
    html body ul.rh-big-tabs-ul,
    html body .contents-woo-area {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Tab items */
    html body .rh-big-tabs-li,
    html body li.rh-big-tabs-li,
    html body .rh-hov-bor-line {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        border-bottom: 2px solid transparent !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        flex: 0 0 auto !important;
    }

    /* Tab link text */
    html body .rh-big-tabs-li > a,
    html body li.rh-big-tabs-li > a,
    html body .contents-woo-area li a {
        color: var(--si-sub) !important;
        -webkit-text-fill-color: var(--si-sub) !important;
        background: transparent !important;
        padding: 14px 18px !important;
        display: block !important;
        font-family: var(--si-sans) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }
    html body .rh-big-tabs-li > a:hover,
    html body li.rh-big-tabs-li > a:hover {
        color: var(--si-text) !important;
        -webkit-text-fill-color: var(--si-text) !important;
    }
    html body .rh-big-tabs-li.active,
    html body li.rh-big-tabs-li.active {
        border-bottom-color: var(--si-acc) !important;
    }
    html body .rh-big-tabs-li.active > a,
    html body li.rh-big-tabs-li.active > a {
        color: var(--si-acc) !important;
        -webkit-text-fill-color: var(--si-acc) !important;
    }
}

/* v2.1.16 — Global Rehub utility-class overrides for dark theme.
   Rehub sprinkles .whitebg, .lightgreybg, .bordertopbg etc. on wrappers
   throughout single product pages. Force them all to the dark palette
   so we never have stray white islands on a dark page. */
html body .whitebg,
html body div.whitebg,
html body .whitebg.rh-shadow2,
html body .whitebg.rh-shadow,
html body .lightgreybg,
html body div.lightgreybg,
html body .light-grey-bg,
html body .greybg,
html body .greybox,
html body .light_bg {
    background: var(--si-navy) !important;
    background-color: var(--si-navy) !important;
    color: var(--si-text) !important;
}

/* KILL the orange ::after decoration (Rehub style.css line 567) */
.widget .title:after, .widget h2:after, .widget h3:after, .widget h4:after,
.widget .widget-title:after, .widget .widgettitle:after,
.elementor-widget .title:after,
.sidebar .widget .title:after, .col-sidebar .widget .title:after {
  display: none !important;
  content: none !important;
  border: none !important;
  background: transparent !important;
  width: 0 !important;
  height: 0 !important;
}

.widget-title, .widgettitle, .widget h3, .widget h4,
.widget .title, .sidebar .widget h2, .rh-widget-title {
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--si-muted) !important;
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--si-border) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  background: transparent !important;
}

.widget ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.widget ul li { border-bottom: 1px solid rgba(30,45,69,.8) !important; padding: 8px 0 !important; font-size: 13px !important; color: var(--si-sub) !important; }
.widget ul li:last-child { border-bottom: none !important; }
.widget ul li a { color: var(--si-sub) !important; transition: color .15s !important; }
.widget ul li a:hover { color: var(--si-acc) !important; }
.widget ul li .count, .widget .count { color: var(--si-muted) !important; font-family: var(--si-mono) !important; font-size: 11px !important; }

/* Filter dropdowns — native select + Select2 + Selectric */
.rh-select, .woo-layered-nav select,
.widget_layered_nav select,
.woocommerce-widget-layered-nav select,
.rehub-select, .woo-filter-select,
.sidebar select, .widget select,
[class*="woof"] select {
  background: var(--si-bg) !important;
  border: 1px solid var(--si-border) !important;
  border-radius: var(--si-r-sm) !important;
  color: var(--si-text) !important;
  font-family: var(--si-sans) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  width: 100% !important;
  cursor: pointer !important;
}
.sidebar select option, .widget select option { background: var(--si-card) !important; color: var(--si-text) !important; }

/* Select2 — v2.1.5 minimalist underline style.
   No background fill, no full border. Just a single 1px bottom underline.
   Hover/focus: underline turns accent green. Sleek. */
.widget .select2-container,
.widget .select2-container--default,
.select2-container {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  width: 100% !important;
}
.widget .select2-selection,
.widget .select2-container--default .select2-selection--single,
.widget .select2-container--default .select2-selection--multiple {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--si-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--si-text) !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 !important;
}
.widget .select2-selection:hover,
.widget .select2-selection:focus,
.widget .select2-container--open .select2-selection {
  border-bottom-color: var(--si-acc) !important;
}
.widget .select2-container--default .select2-selection--single .select2-selection__rendered,
.widget .select2-selection__rendered,
.widget .select2-selection__placeholder {
  background: transparent !important;
  color: var(--si-text) !important;
  -webkit-text-fill-color: var(--si-text) !important;
  font-family: var(--si-sans) !important;
  font-size: 13px !important;
  line-height: 28px !important;
  padding: 0 18px 0 0 !important;
  border: none !important;
}
.widget .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 28px !important;
  top: 0 !important;
  right: 0 !important;
  width: 18px !important;
  background: transparent !important;
  border: none !important;
}
.widget .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--si-muted) transparent transparent transparent !important;
}
.select2-dropdown, .select2-results {
  background: var(--si-card) !important;
  border: 1px solid var(--si-border) !important;
  border-radius: var(--si-r-sm) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.6) !important;
}
.select2-results__option {
  color: var(--si-text) !important;
  background: transparent !important;
  padding: 8px 14px !important;
}
.select2-container--default .select2-results__option--highlighted {
  background: rgba(79,255,176,.08) !important;
  color: var(--si-acc) !important;
  -webkit-text-fill-color: var(--si-acc) !important;
}
.select2-search__field {
  background: var(--si-bg) !important;
  border: 1px solid var(--si-border) !important;
  color: var(--si-text) !important;
}

/* Selectric (fallback) */
.selectric-wrapper .selectric { background: var(--si-bg) !important; border: 1px solid var(--si-border) !important; border-radius: var(--si-r-sm) !important; }
.selectric-wrapper .selectric .label, .selectric-wrapper .selectric span { color: var(--si-text) !important; background: transparent !important; font-size: 13px !important; }
.selectric-items { background: var(--si-card) !important; border: 1px solid var(--si-border) !important; }
.selectric-items li { color: var(--si-text) !important; background: transparent !important; padding: 8px 14px !important; }
.selectric-items li:hover { background: rgba(79,255,176,.08) !important; color: var(--si-acc) !important; }

/* Price slider — green */
.ui-slider { background: var(--si-border) !important; border-radius: 3px !important; height: 4px !important; border: none !important; }
.ui-slider .ui-slider-range { background: var(--si-acc) !important; }
.ui-slider .ui-slider-handle {
  background: var(--si-acc) !important;
  border: 2px solid #090c14 !important;
  border-radius: 50% !important;
  width: 14px !important; height: 14px !important;
  top: -5px !important;
}
.price_slider_amount .button, .woof_price_search_container .button {
  background: var(--si-acc) !important;
  color: #090c14 !important;
  border: none !important;
  font-weight: 700 !important;
  font-family: 'DM Mono', monospace !important;
  letter-spacing: .05em !important;
  border-radius: var(--si-r-sm) !important;
  padding: 8px 16px !important;
  font-size: 11px !important;
  cursor: pointer !important;
}

/* Layered nav links */
.woocommerce-widget-layered-nav-list__item a,
.widget_product_categories li a,
.widget_layered_nav li a { color: var(--si-sub) !important; font-size: 13px !important; }
.woocommerce-widget-layered-nav-list__item--chosen a,
.widget_product_categories li.current-cat a,
.widget_layered_nav li a:hover { color: var(--si-acc) !important; }

.widget_search input[type="search"] {
  background: var(--si-bg) !important;
  border: 1px solid var(--si-border) !important;
  border-radius: var(--si-r-sm) !important;
  color: var(--si-text) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  width: 100% !important;
}
.widget_search button, .widget_search input[type="submit"] {
  background: var(--si-acc) !important;
  color: #090c14 !important;
  border: none !important;
  border-radius: var(--si-r-sm) !important;
  padding: 8px 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

/* Rehub accent class overrides */
.rehub-main-color, .rh-accent-color, .accent-color { color: var(--si-acc) !important; -webkit-text-fill-color: var(--si-acc) !important; }
.rehub-main-bg, .rh-main-bg { background-color: var(--si-acc) !important; }
.blackcolor { color: var(--si-text) !important; -webkit-text-fill-color: var(--si-text) !important; }
.whitebg, div.whitebg, .whitebg-block,
.lightgreybg, div.lightgreybg, .greybg, .lightbg {
    background: var(--si-bg) !important;
    background-color: var(--si-bg) !important;
    color: var(--si-text) !important;
}
.white      { color: var(--si-text) !important; -webkit-text-fill-color: var(--si-text) !important; }
.border-grey-bottom { border-bottom-color: var(--si-border) !important; }

/* MAX SPECIFICITY body override — beats any inline <style> in page HTML */
html body, html body.woocommerce, html body.woocommerce-page,
html body.archive, html body.single-product,
html body.dark_body, html body.shop {
    background: var(--si-bg) !important;
    background-color: var(--si-bg) !important;
    color: var(--si-text) !important;
}
/* Rehub's woo_directory_layout container is the white wrapper */
.woo_directory_layout, #content.woo_directory_layout,
.woo_directory_layout.lightgreybg,
div.woo_directory_layout {
    background: var(--si-bg) !important;
    background-color: var(--si-bg) !important;
    color: var(--si-text) !important;
}

/* ─── EXACT TARGETS from archive-source.html ─────────────────── */

/* The white wrapper is `.main-side` (line 677 of archive HTML) */
.main-side, .main-side.woocommerce, .main-side.woocommerce.page,
#content.main-side, div.main-side {
    background: var(--si-bg) !important;
    background-color: var(--si-bg) !important;
    color: var(--si-text) !important;
}

/* Archive page title — h1.arc-main-title (line 685) */
h1.arc-main-title, .arc-main-title {
    color: var(--si-text) !important;
    -webkit-text-fill-color: var(--si-text) !important;
    font-family: var(--si-disp) !important;
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    margin: 8px 0 16px !important;
    background: transparent !important;
}

/* Beat Rehub's inline <style> for breadcrumbs (lines 680-683) */
nav.woocommerce-breadcrumb, .woocommerce-breadcrumb {
    background: transparent !important;
    color: var(--si-muted) !important;
    font-family: var(--si-mono) !important;
    font-size: 11px !important;
}
nav.woocommerce-breadcrumb a, .woocommerce-breadcrumb a,
nav.woocommerce-breadcrumb span.delimiter + a {
    color: var(--si-muted) !important;
    -webkit-text-fill-color: var(--si-muted) !important;
    background-color: var(--si-card) !important;
    background: var(--si-card) !important;
    border: 1px solid var(--si-border) !important;
    border-radius: 4px !important;
    padding: 3px 8px !important;
    display: inline-block !important;
    margin-bottom: 5px !important;
    line-height: 13px !important;
    text-decoration: none !important;
}
nav.woocommerce-breadcrumb a:hover, .woocommerce-breadcrumb a:hover {
    color: var(--si-acc) !important;
    -webkit-text-fill-color: var(--si-acc) !important;
    border-color: var(--si-acc) !important;
}
/* Breadcrumb: LAST link (current page in chain) highlighted green */
nav.woocommerce-breadcrumb a:last-of-type,
.woocommerce-breadcrumb a:last-of-type {
    background: rgba(79,255,176,.10) !important;
    background-color: rgba(79,255,176,.10) !important;
    color: var(--si-acc) !important;
    -webkit-text-fill-color: var(--si-acc) !important;
    border: 1px solid var(--si-acc) !important;
    border-color: var(--si-acc) !important;
}
nav.woocommerce-breadcrumb span.delimiter, .woocommerce-breadcrumb .delimiter {
    color: var(--si-border) !important;
    margin: 0 6px !important;
}

/* Beat Rehub's inline body { background: #fff } — MAX SPECIFICITY */
html.no-customize-support body,
html body.archive, html body.tax-product_cat,
html body.term-117, html body.term-ai-content-writing,
html body.woocommerce-page, html body.woocommerce,
html body.wp-theme-rehub-theme,
html body.wp-child-theme-saasinspector-child,
html body[class*="term-"],
html body[class*="tax-"] {
    background: var(--si-bg) !important;
    background-color: var(--si-bg) !important;
    color: var(--si-text) !important;
}

/* Beat Rehub's inline .widget .title:after { border-bottom: 2px solid #ffa33a } */
html body .widget .title:after,
html body .widget .title::after,
html body[class*="archive"] .widget .title:after,
.sidebar .widget .title:after,
aside.sidebar .widget .title:after {
    display: none !important;
    content: none !important;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    background: transparent !important;
    width: 0 !important;
    height: 0 !important;
}

/* Filter widget title (Languages Supported, Free Plan, etc.) — exact match */
.widget.woocommerce.widget_layered_nav .title,
.widget.widget_layered_nav .title,
aside.sidebar .widget .title,
.sidebar .widget .title,
.widget .title {
    color: var(--si-text) !important;
    -webkit-text-fill-color: var(--si-text) !important;
    background: transparent !important;
    font-family: var(--si-mono) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--si-border) !important;
    padding: 0 0 10px 0 !important;
    margin: 0 0 14px 0 !important;
    position: relative !important;
}

/* Mobile filter trigger button (#mobile-trigger-sidebar) */
#mobile-trigger-sidebar, .mobile-trigger-sidebar, .filter-trigger {
    background: var(--si-card) !important;
    border: 1px solid var(--si-border) !important;
    border-radius: 6px !important;
    color: var(--si-text) !important;
    -webkit-text-fill-color: var(--si-text) !important;
    padding: 6px 12px !important;
    font-family: var(--si-sans) !important;
    font-size: 13px !important;
}
#mobile-trigger-sidebar i { color: var(--si-acc) !important; }

/* WooCommerce layered nav dropdown (the filter <select> elements) */
.woocommerce-widget-layered-nav-dropdown,
select.dropdown_layered_nav_languages-supported,
select[class*="dropdown_layered_nav"],
.widget_layered_nav select {
    background: var(--si-bg) !important;
    background-color: var(--si-bg) !important;
    border: 1px solid var(--si-border) !important;
    border-radius: 6px !important;
    color: var(--si-text) !important;
    -webkit-text-fill-color: var(--si-text) !important;
    font-family: var(--si-sans) !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    width: 100% !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}
.woocommerce-widget-layered-nav-dropdown option,
.widget_layered_nav select option {
    background: var(--si-card) !important;
    color: var(--si-text) !important;
}

/* ══════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */
#footer, footer, .site-footer, .footer-wrap {
  background: var(--si-navy) !important;
  border-top: 1px solid var(--si-border) !important;
  color: var(--si-text) !important;
  margin-top: 60px !important;
}
.footer-top, .footer-widgets, .footer-main {
  background: var(--si-navy) !important;
  padding: 50px 0 40px !important;
  border-bottom: 1px solid var(--si-border) !important;
  color: var(--si-text) !important;
}
.footer-bottom, .site-info, .footer-bar {
  background: var(--si-bg) !important;
  padding: 16px 0 !important;
  font-family: var(--si-mono) !important;
  font-size: 11px !important;
  color: var(--si-muted) !important;
  letter-spacing: .04em !important;
}
.footer-bottom a, .site-info a { color: var(--si-muted) !important; }
.footer-bottom a:hover { color: var(--si-acc) !important; }
#footer .widget-title, .footer-top .widget-title {
  font-family: var(--si-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--si-text) !important;
  border-bottom: 1px solid var(--si-border) !important;
  padding-bottom: 10px !important;
  margin-bottom: 14px !important;
}
#footer a, .footer-top a { color: var(--si-muted) !important; font-size: 13px !important; line-height: 2 !important; }
#footer a:hover, .footer-top a:hover { color: var(--si-acc) !important; }

/* ══════════════════════════════════════════════════════════════
   FORMS & INPUTS (global)
══════════════════════════════════════════════════════════════ */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="url"], textarea {
  background: var(--si-bg) !important;
  border: 1px solid var(--si-border) !important;
  border-radius: var(--si-r-sm) !important;
  color: var(--si-text) !important;
  font-family: var(--si-sans) !important;
  font-size: 14px !important;
  padding: 9px 12px !important;
  outline: none !important;
  transition: border-color .15s !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--si-acc2) !important;
  box-shadow: 0 0 0 3px rgba(123,111,255,.1) !important;
}
label { color: var(--si-muted) !important; font-size: 11px !important; font-family: var(--si-mono) !important; letter-spacing: .06em !important; text-transform: uppercase !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--si-acc) !important; }

/* ══════════════════════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════════════════════ */
.woocommerce-pagination ul, .pagination ul, .nav-links {
  display: flex !important; gap: 6px !important; justify-content: center !important;
  margin: 30px 0 !important; list-style: none !important; padding: 0 !important; align-items: center !important;
}
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span,
.page-numbers, .pagination a, .pagination span {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-width: 36px !important; height: 36px !important;
  background: var(--si-navy) !important;
  border: 1px solid var(--si-border) !important;
  border-radius: var(--si-r-sm) !important;
  color: var(--si-muted) !important;
  font-family: var(--si-mono) !important;
  font-size: 13px !important;
  text-decoration: none !important;
  padding: 0 10px !important;
}
.woocommerce-pagination ul li a:hover, .page-numbers:hover { border-color: var(--si-acc2) !important; color: var(--si-acc2) !important; }
.woocommerce-pagination ul li span.current, .page-numbers.current {
  background: var(--si-acc) !important; border-color: var(--si-acc) !important;
  color: #090c14 !important; font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════════
   NOTICES
══════════════════════════════════════════════════════════════ */
.woocommerce-message { background: rgba(79,255,176,.08) !important; border-left: 3px solid var(--si-acc) !important; color: var(--si-text) !important; border-radius: var(--si-r-sm) !important; padding: 12px 18px !important; }
.woocommerce-info    { background: rgba(123,111,255,.08) !important; border-left: 3px solid var(--si-acc2) !important; color: var(--si-text) !important; border-radius: var(--si-r-sm) !important; padding: 12px 18px !important; }
.woocommerce-error   { background: rgba(255,90,90,.08) !important; border-left: 3px solid var(--si-danger) !important; color: var(--si-text) !important; border-radius: var(--si-r-sm) !important; padding: 12px 18px !important; }

/* ══════════════════════════════════════════════════════════════
   SCORE BUBBLE  (8.6, 8.1 circles on compare page & cards)
══════════════════════════════════════════════════════════════ */
.rating_bubble, .post-rating-mid,
.score-bubble, .scorebubble,
[class*="rating-bubble"], [class*="rating_bubble"] {
  background: var(--si-bg) !important;
  border: 2px solid var(--si-acc) !important;
  color: var(--si-acc) !important;
  -webkit-text-fill-color: var(--si-acc) !important;
  font-family: var(--si-mono) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 12px rgba(79,255,176,.25) !important;
}
.rating_bubble circle, .post-rating-mid circle { stroke: var(--si-acc) !important; }

/* ══════════════════════════════════════════════════════════════
   COMPARE PAGE  (Rehub built-in: .re-compare, .sticky-cell, row_chart_X)
══════════════════════════════════════════════════════════════ */
.re-compare, .re-compare-table, .compare-table {
  background: var(--si-bg) !important;
  color: var(--si-text) !important;
}
.re-compare li, .re-compare ul li,
[class*="row_chart"], [class*="row-chart"],
li[class*="row_chart"], li.image_row_chart, li.row-is-different {
  background: var(--si-bg) !important;
  background-color: var(--si-bg) !important;
  border-bottom: 1px solid var(--si-border) !important;
}
/* Sticky-cell (the left "labels" column) */
.sticky-cell,
li.row_chart_0 .sticky-cell, li.image_row_chart .sticky-cell,
.row-is-different .sticky-cell,
[class*="row_chart"] .sticky-cell,
.re-compare .sticky-cell {
  background: var(--si-navy) !important;
  background-color: var(--si-navy) !important;
  color: var(--si-text) !important;
  -webkit-text-fill-color: var(--si-text) !important;
  border-right: 1px solid var(--si-border) !important;
}
.sticky-cell *, .sticky-cell label, .sticky-cell span, .sticky-cell .diff-label {
  color: var(--si-text) !important;
  -webkit-text-fill-color: var(--si-text) !important;
  background: transparent !important;
}
.re-compare-show-diff, .sticky-cell input[type="checkbox"] {
  accent-color: var(--si-acc) !important;
}
/* Compare product cards */
.re-compare li > div:not(.sticky-cell), .re-compare .compare-cell {
  background: var(--si-card) !important;
  color: var(--si-text) !important;
}
/* "Add more items" pill */
.re-compare .add-more, .re-compare-add-more,
[class*="add-more"], [class*="add_more"] {
  background: var(--si-navy) !important;
  border: 1px solid var(--si-border) !important;
  color: var(--si-sub) !important;
  border-radius: var(--si-r-sm) !important;
  padding: 8px 16px !important;
  font-family: var(--si-mono) !important;
  font-size: 12px !important;
}
.re-compare .add-more:hover, [class*="add-more"]:hover {
  border-color: var(--si-acc) !important;
  color: var(--si-acc) !important;
}

/* ══════════════════════════════════════════════════════════════
   COMPARE POPUP / BOTTOM BAR
══════════════════════════════════════════════════════════════ */
#wooscp-popup, .wooscp-popup, .wooscp-popup-inner, .wooscp-popup-body,
.wooscp-popup-content, .wooscp-popup-footer,
.wooscp-bar, .wooscp-bar-inner,
.wooscp-bar-inner-start, .wooscp-bar-inner-middle, .wooscp-bar-inner-end,
#wooscp-bar, #rh_compare_wrap, .rh_compare_wrap, .rh_compare_cont,
.compare-popup, .compare-bar, .rh-compare-popup, .rh-compare-bar {
  background: var(--si-card) !important;
  border: 1px solid var(--si-border) !important;
  border-radius: var(--si-r) !important;
  color: var(--si-text) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.85) !important;
}
.wooscp-popup-header, .wooscp-popup-title, .wooscp-bar-title,
[class*="popup-header"], [class*="modal-header"] {
  background: var(--si-navy) !important;
  color: var(--si-acc) !important;
  -webkit-text-fill-color: var(--si-acc) !important;
  border-bottom: 1px solid var(--si-border) !important;
  font-family: var(--si-disp) !important;
  font-weight: 700 !important;
  padding: 14px 18px !important;
}
#wooscp-bar a, .wooscp-bar a, .wooscp-bar-btn,
.wooscp-popup a.button, .wooscp-btn-compare,
.rh_compare_btn, [class*="wooscp"] .button {
  background: transparent !important;
  border: 2px solid var(--si-acc) !important;
  color: var(--si-acc) !important;
  -webkit-text-fill-color: var(--si-acc) !important;
  border-radius: var(--si-r-sm) !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
}
#wooscp-bar a:hover, .wooscp-bar a:hover {
  background: var(--si-acc) !important;
  color: #090c14 !important;
  -webkit-text-fill-color: #090c14 !important;
}

/* ══════════════════════════════════════════════════════════════
   STICKY BAR (.is_stuck added by Rehub on scroll)
══════════════════════════════════════════════════════════════ */
.is_stuck, body .is_stuck, .wc-tabs-wrapper.is_stuck,
body.single-product .is_stuck, body.single-product [class*="is_stuck"],
.rh-sticky-bar, .rh-sticky-inner, .rh-product-anchor-nav, .rh-anchor-nav,
.rh-sticky-tabs, .sticky-tabs, body.single-product .stuck {
  background: var(--si-bg) !important;
  background-color: var(--si-bg) !important;
  border-bottom: 1px solid var(--si-border) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.6) !important;
}
.is_stuck *, body .is_stuck *, body.single-product .is_stuck * {
  background-color: transparent !important;
  color: var(--si-text) !important;
  -webkit-text-fill-color: var(--si-text) !important;
}
.is_stuck .single_add_to_cart_button,
.is_stuck a.product_type_external.button {
  background: var(--si-acc) !important;
  color: #090c14 !important;
  -webkit-text-fill-color: #090c14 !important;
}

/* ══════════════════════════════════════════════════════════════
   OFF-CANVAS MOBILE MENU  (#menu-main-menu.off-canvas)
══════════════════════════════════════════════════════════════ */
ul#menu-main-menu.off-canvas, ul.menu.off-canvas,
.off-canvas, .off-canvas-active, ul.off-canvas-active,
#mobtopheaderpnl, #rhmobtoppnl {
  background: var(--si-bg) !important;
  background-color: var(--si-bg) !important;
  color: var(--si-text) !important;
  border-right: 1px solid var(--si-border) !important;
  box-shadow: 4px 0 30px rgba(0,0,0,.85) !important;
}
.off-canvas li, ul#menu-main-menu.off-canvas li,
ul#menu-main-menu li, ul#menu-main-menu .sub-menu li {
  background: transparent !important;
  border-bottom: 1px solid var(--si-border) !important;
}
ul#menu-main-menu.off-canvas a,
ul#menu-main-menu a, ul#menu-main-menu .sub-menu a,
ul#menu-main-menu .submenu-toggle {
  color: var(--si-text) !important;
  -webkit-text-fill-color: var(--si-text) !important;
  background: transparent !important;
  padding: 14px 20px !important;
  font-family: var(--si-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  display: block !important;
}
ul#menu-main-menu a:hover, .off-canvas li a:hover {
  background: rgba(79,255,176,.06) !important;
  color: var(--si-acc) !important;
  -webkit-text-fill-color: var(--si-acc) !important;
}
ul#menu-main-menu .blackcolor, .off-canvas .blackcolor {
  color: var(--si-text) !important; -webkit-text-fill-color: var(--si-text) !important;
}
ul#menu-main-menu .rehub-main-color, .off-canvas .rehub-main-color {
  color: var(--si-acc) !important; -webkit-text-fill-color: var(--si-acc) !important;
}
.back-mb, .back-mb span, ul#menu-main-menu .back-mb {
  background: var(--si-card) !important;
  color: var(--si-acc) !important;
  -webkit-text-fill-color: var(--si-acc) !important;
  padding: 12px 20px !important;
  border-bottom: 1px solid var(--si-border) !important;
}
.close-menu, .rh-close-btn { background: transparent !important; }
.close-menu .whitebg, .close-menu i.whitebg, .close-menu i.rhi-times {
  background: var(--si-card) !important;
  color: var(--si-acc) !important;
  -webkit-text-fill-color: var(--si-acc) !important;
  border: 1px solid var(--si-acc) !important;
}
ul#menu-main-menu .rhicon, ul#menu-main-menu i,
.off-canvas .rhicon, .submenu-toggle .rhicon {
  color: var(--si-muted) !important;
}
.off-canvas-overlay, .menu-overlay { background: rgba(0,0,0,.8) !important; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — universal box model + overflow prevention
══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box !important; }
/* v2.1.32 — removed `overflow-x: hidden` on html, body. It was breaking
   `position: sticky` on `.rh-stickme` (iOS Safari + Chrome both treat any
   ancestor overflow setting as a clipping context, killing sticky for
   descendants). Underlying width-overflow issues that this was patching
   over have all been fixed in v2.1.21–27, so this safety net is no longer
   needed. `max-width: 100vw` also removed — `width: 100%` on wrappers
   already enforces viewport bounds. */
html, body { max-width: 100% !important; }
img, video, iframe, table { max-width: 100% !important; height: auto !important; }
h1, h2, h3, h4, h5, h6, p,
.entry-title, .product_title, .page-title,
.woocommerce-loop-product__title {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  hyphens: auto !important;
}

/* TABLET (≤ 1024px) */
@media (max-width: 1024px) {
  .rh-container, .container, .col-full { padding-left: 16px !important; padding-right: 16px !important; }
  h1, h1.product_title { font-size: 1.5rem !important; line-height: 1.2 !important; }
  .entry-summary, .summary.entry-summary, .summary { padding: 20px !important; }
  .woocommerce-products-header { padding: 16px 20px !important; }
}

/* MOBILE (≤ 768px) */
@media (max-width: 768px) {
  body { font-size: 14px !important; line-height: 1.6 !important; }

  /* ── ROOT CAUSE #1: Rehub puts .hideontablet on the desktop logo ──
     This force-shows the text logo on mobile (was hidden by design). */
  .logo.hideontablet, div.logo.hideontablet,
  .header_wrap .logo.hideontablet {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
    text-align: left !important;
  }
  /* Hide the search bar that ALSO has .hideontablet (not useful on mobile) */
  .rh-flex-grow1.hideontablet { display: none !important; }

  /* ── ROOT CAUSE #2: inline style="width: 406px" on sticky-wrapper ──
     Rehub stickysidebar.js sets inline pixel widths. Force 100%. */
  #sticky-wrapper, .sticky-wrapper, .re-stickyheader,
  .rh-stickme, .logo_section_wrap, .header_one_row,
  .header_five_style {
    width: 100% !important;
    max-width: 100% !important;
  }
  #sticky-wrapper[style*="width"], .sticky-wrapper[style*="width"],
  .rh-stickme[style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Rehub adds inline width via JS — neutralize with attribute selector */
  div[style*="width: 406px"], div[style*="width:406px"],
  div[style*="width: 400"], div[style*="width:400"],
  div[style*="width: 500"], div[style*="width:500"],
  div[style*="width: 1024"], div[style*="width:1024"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── Mobile-specific layout for product page (Rehub's woo_directory) ── */
  .woo_directory_layout .rh-flex-eq-height,
  .woo_directory_layout .rh-flex-nowrap,
  .content-woo-area, .rh-300-content-area {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    display: block !important;
  }
  .woo-image-part, .woo_directory_layout .woo-image-part {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 20px 0 !important;
    text-align: center !important;
  }
  .woo-image-part figure, .woo-image-part img {
    max-width: 200px !important;
    margin: 0 auto !important;
  }
  .woo-title-area {
    width: 100% !important;
    float: none !important;
  }

  /* AGGRESSIVE: kill Rehub's fixed-width grid columns on mobile.
     Rehub uses .col-md-*, .col-lg-*, .span_*_of_12, custom grid classes. */
  [class*="col-md-"], [class*="col-lg-"], [class*="col-sm-"], [class*="col-xs-"],
  [class*="col_"], [class*="span_"], [class*="span-"],
  .grid-col, .rh-col, .col, .column,
  .one-half, .one-third, .two-third, .one-fourth, .three-fourth,
  .product-images-col, .product-summary-col,
  .col-main, .col-side, .col-sidebar,
  #content, .content-area, .site-main, .main-wrap,
  .summary, .entry-summary,
  .woocommerce div.product .summary,
  .woocommerce div.product .images,
  .summary.entry-summary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Single product layout: stack everything */
  .woocommerce div.product .images,
  .woocommerce-product-gallery,
  .rh-product-gallery {
    width: 100% !important;
    margin-bottom: 16px !important;
  }
  .woocommerce div.product .summary, .summary.entry-summary {
    width: 100% !important;
    margin-top: 0 !important;
  }
  .rh-product-layout, .rh-product-main, .rh-product-top,
  .rh-content-wrap, .product-content-wrap {
    display: block !important;
  }

  /* Headings — scale + force wrap with max specificity */
  h1, h1.product_title, .entry-title, h1.entry-title,
  .woocommerce div.product .product_title, .summary h1, .summary .product_title,
  .woocommerce-products-header__title {
    font-size: 1.25rem !important;
    line-height: 1.25 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
  h2 { font-size: 1.1rem !important; word-break: break-word !important; }
  h3 { font-size: 1rem !important; word-break: break-word !important; }

  /* Single product summary */
  .entry-summary, .summary.entry-summary, .summary { padding: 16px !important; }
  .woocommerce .product p.price, .single-product .price { font-size: 1.1rem !important; }
  .single_add_to_cart_button, a.product_type_external.button { padding: 12px 20px !important; font-size: 14px !important; }

  /* Breadcrumbs — allow wrapping */
  .woocommerce-breadcrumb, nav.woocommerce-breadcrumb, .breadcrumbs {
    flex-wrap: wrap !important;
    white-space: normal !important;
    font-size: 10px !important;
    line-height: 1.6 !important;
    padding: 10px 0 !important;
  }
  .woocommerce-breadcrumb a, .breadcrumbs a {
    display: inline-block !important;
    margin: 2px 4px 2px 0 !important;
    word-break: keep-all !important;
  }

  /* Tabs scroll horizontally */
  .woocommerce-tabs ul.tabs { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch !important; }
  .woocommerce-tabs ul.tabs li a { white-space: nowrap !important; padding: 10px 14px !important; font-size: 12px !important; }
  .woocommerce-tabs .panel { padding: 16px !important; }

  /* Pros/cons stack */
  .wpsm-reviewbox .pros-cons, .pros-cons-wrap { grid-template-columns: 1fr !important; }

  /* Product cards: 1 column (force higher specificity to beat Rehub's grid) */
  ul.products, .woocommerce ul.products,
  .woocommerce-page ul.products,
  body.archive ul.products,
  body.tax-product_cat ul.products,
  body.post-type-archive-product ul.products {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  ul.products li.product, .woocommerce ul.products li.product,
  ul.products li.product.first, ul.products li.product.last,
  body.archive ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    clear: both !important;
  }
  /* Card title — don't truncate, allow wrap */
  ul.products li.product h2, ul.products li.product h3,
  .woocommerce-loop-product__title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-wrap: break-word !important;
  }
  /* Floating compare/wishlist sidebar — hide on mobile (bottom bar has it) */
  .rh-floating-compare, .rh-floating-wishlist,
  .floating-icons, .side-floating-icons,
  [class*="floating-compare"], [class*="floating-wishlist"] {
    display: none !important;
  }

  /* Mobile logo visibility (Rehub hides .textlogo, shows .mobile-logo) */
  div.textlogo, .textlogo,
  .mobile-logo, .mobile-logo a,
  #mobile-logo, #mobile-logo a,
  .sticky-logo, .sticky-logo a,
  .rh-mobile-logo, .rh-mobile-logo a,
  .logo-mobile, .logo-mobile a,
  #logo_mobile_wrapper, #logo_mobile_wrapper a {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 12px !important;
    letter-spacing: 0.22em !important;
    color: var(--si-text) !important;
  }
  /* Mobile header bar — make sure logo + hamburger both fit */
  #main_header, .mobile-header, .rh-mobile-header,
  .mobile-header-area, .header-mobile, .header_wrap {
    padding: 8px 12px !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
  }

  /* Compare page mobile — table scrolls sideways */
  body[class*="compare"] .re-compare,
  body.si-on-compare .re-compare,
  .re-compare-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100vw !important;
  }

  /* Sidebar moves below content on mobile */
  .sidebar, .col-sidebar, aside.widget-area { width: 100% !important; float: none !important; padding: 0 !important; margin-top: 20px !important; }

  /* Widget padding tighter */
  .widget, .sidebar .widget { padding: 14px !important; margin-bottom: 14px !important; }

  /* Form inputs full width */
  input, textarea, select { width: 100% !important; max-width: 100% !important; }

  /* Pagination wraps */
  .woocommerce-pagination ul, .pagination ul, .nav-links { flex-wrap: wrap !important; }
}

/* SMALL MOBILE (≤ 480px) */
@media (max-width: 480px) {
  h1, h1.product_title { font-size: 1.15rem !important; }
  .woocommerce-breadcrumb { font-size: 9px !important; }
  .rh-container, .container { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ══════════════════════════════════════════════════════════════
   CATCH-ALL — override inline white background
══════════════════════════════════════════════════════════════ */
[style*="background:#fff"], [style*="background: #fff"],
[style*="background-color:#fff"], [style*="background-color: #fff"],
[style*="background:#ffffff"], [style*="background: #ffffff"],
[style*="background-color:#ffffff"], [style*="background-color: #ffffff"],
[style*="background-color:white"], [style*="background:white"] {
  background: var(--si-navy) !important;
  background-color: var(--si-navy) !important;
  color: var(--si-text) !important;
}
/* Keep product tool logos on white square */
ul.products li.product img[style*="background"],
.re-compare img[style*="background"] { background: #ffffff !important; }

/* ══════════════════════════════════════════════════════════════
   v2.1.36 — DEFENSIVE HEIGHT CAPS for mobile + tablet
   ══════════════════════════════════════════════════════════════
   Paul reported on Samsung Fold that scrolling causes the header
   to "flood the whole view" — fills the entire viewport in navy.
   Since we can't reproduce or remote-debug the Fold, these caps act
   as a hard ceiling: even if Fold's foldable display rendering
   triggers the header or bottom bar to expand for any reason (title
   wrapping, content reflow, JS state changes, foldable-display
   quirks), they physically cannot grow past these heights. Content
   that would otherwise expand them is clipped via overflow: hidden.

   Caps chosen to be a few px above the natural heights:
     .rh-stickme natural height = 60px (set by .logo-section). Cap 72px.
     .rh-float-panel natural height = 64px (set by .rh-container min-height). Cap 80px.
*/
@media (max-width: 1024px) {
  /* v2.1.38 — Removed max-height + overflow on .rh-stickme. Rehub's
     stickysidebar.js reads .rh-stickme natural height to compute
     scroll offsets for activating sticky. Capping the height threw
     off that math and the header stopped sticking, scrolling with
     page content instead of staying pinned at top.
     Caps on .rh-float-panel and its inner .rh-container kept — they
     don't interfere with sticky logic and protect against the
     Samsung Fold flooding. */
  html body .rh-float-panel,
  html body #float-panel-woo-area,
  html body .float-panel-woo-area {
    max-height: 80px !important;
    overflow: hidden !important;
  }
  html body .rh-float-panel .rh-container,
  html body .float-panel-woo-area .rh-container {
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    max-height: 80px !important;
    overflow: hidden !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   v2.1.35/39 — WP admin-bar offset (REMOVED in v2.1.39)
   ══════════════════════════════════════════════════════════════
   v2.1.35 added a `body.admin-bar .rh-stickme { top: 46px }` rule
   to offset the fixed header below WP's admin bar. But Paul's mobile
   view doesn't actually render the admin bar at viewport-top (could
   be a plugin, mobile-collapse behavior, or admin-bar-shown-elsewhere)
   while still having `body.admin-bar` class set. The 46px offset
   then created an empty gap with page content peeking through —
   visually the header looked detached and floating mid-page.

   Removed entirely in v2.1.39. Real site visitors (logged out, no
   admin-bar class) were never affected. Paul (admin) may see admin
   bar overlap header on views where admin bar DOES render at top —
   that's a self-inflicted dev/testing concern, not a visitor issue. */

/* ══════════════════════════════════════════════════════════════
   v2.1.30/31/33 — DESKTOP-ONLY rules (≥ 1025px)
   ══════════════════════════════════════════════════════════════
   Hide Rehub's `.rh-float-panel` on real desktop. On mobile + tablet
   (≤1024px) it's our bottom sticky bar (icon + title + VIEW PLANS);
   only at desktop widths does the on-page header have enough room to
   display the title, price, and VIEW PLANS button inline, making the
   floating duplicate redundant.
   v2.1.33 — Reverted breakpoint from 769 → 1025 because Paul wants
   the bottom bar visible on tablets too. */
@media (min-width: 1025px) {
  html body .rh-float-panel,
  html body #float-panel-woo-area,
  html body .float-panel-woo-area,
  html body div.rh-float-panel {
    display: none !important;
  }
}