/* PrimeLoad Redesign Fixes 2026-05-14 — visibility/regression patches
   Loaded after redesign.css; targets specific surfaces called out by the user. */

/* ============================================================
   1. HEADER — search bar placeholder white, categories dropdown clipping
   ============================================================ */
.pl-header input[type="search"]::placeholder,
.pl-header input[type="text"]::placeholder,
.pl-header__search input::placeholder,
header input[type="search"]::placeholder,
header .search-form input::placeholder,
header form[role="search"] input::placeholder { color: #FFFFFF !important; opacity: .85 !important; }

.pl-header input[type="search"]::-webkit-input-placeholder,
header input[type="search"]::-webkit-input-placeholder { color: #FFFFFF !important; opacity: .85 !important; }
.pl-header input[type="search"]::-moz-placeholder,
header input[type="search"]::-moz-placeholder { color: #FFFFFF !important; opacity: .85 !important; }

/* All-categories dropdown clipping (the half-visible "All categories" pill) */
.pl-header__cat-dropdown,
.pl-header__categories,
header .categories-toggle,
header select.category-select,
.pl-header select { overflow: visible !important; min-width: 180px !important; height: auto !important; line-height: 1.4 !important; padding-right: 28px !important; }
.pl-header__cat-dropdown select,
.pl-header__categories select { color: #FFFFFF !important; background: transparent !important; border: 0 !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100% !important; }
.pl-header__cat-dropdown select option { color: #0B3954 !important; background: #FFF !important; }

/* ============================================================
   2. SHOP / ARCHIVE PAGE HERO — black 55% overlay over XStore banner widget
   ============================================================ */
.banner.banner-type-2,
.elementor-widget-banner .banner.banner-type-2 { position: relative; isolation: isolate; }
.banner.banner-type-2 > img,
.banner.banner-type-2 .banner-image,
.banner.banner-type-2 .banner-bg-image { filter: brightness(.55); }
.banner.banner-type-2::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1;
  pointer-events: none;
}
.banner.banner-type-2 .banner-content { position: relative; z-index: 2; }
.banner.banner-type-2 .banner-title,
.banner.banner-type-2 h1.banner-title,
.banner.banner-type-2 h2.banner-title,
.banner.banner-type-2 h3.banner-title { color: #FFFFFF !important; font-weight: 800 !important; text-shadow: 0 2px 16px rgba(0,0,0,.45); }
.banner.banner-type-2 .banner-text,
.banner.banner-type-2 p { color: #FFFFFF !important; text-shadow: 0 2px 12px rgba(0,0,0,.4); }

/* ============================================================
   3. INVISIBLE WHITE HEADINGS ON LIGHT BACKGROUNDS
   ============================================================ */

/* About page (id 39): NO blanket override here — was breaking dark-bg headings. Per-widget colors patched directly in Elementor data instead. */

/* Home page (id 5) — NO blanket heading color override here. Per-widget colors are now set
   in Elementor data (widgets 0692bac, 5267a9a etc.). A blanket override broke sections
   that needed white text on dark backgrounds (Family-Run, FAQ). */

/* "From the Buyer's Guide" — home page blog cards: titles must be visible */
body.page-id-5 .post-card-title,
body.page-id-5 .blog-card-title,
body.page-id-5 .elementor-post__title,
body.page-id-5 .elementor-posts-container .elementor-post .elementor-post__title,
body.page-id-5 .elementor-posts-container .elementor-post .elementor-post__title a,
body.page-id-5 .e-loop-item .elementor-heading-title,
body.page-id-5 .e-loop-item .elementor-heading-title a,
body.page-id-5 .elementor-widget-loop-grid .e-loop-item h2,
body.page-id-5 .elementor-widget-loop-grid .e-loop-item h3,
body.page-id-5 .elementor-widget-loop-grid .e-loop-item a { color: #0B3954 !important; }

/* Section heading immediately before the loop grid (the "From the Buyer's Guide" word) */
body.page-id-5 .elementor-widget-heading:has(+ .elementor-widget-loop-grid) h2,
body.page-id-5 .elementor-widget-heading:has(+ .elementor-widget-loop-grid) h3 { color: #0B3954 !important; }

/* Featured-Products section title (above products grid). Cover both common section variants. */
body.page-id-5 .elementor-widget-woocommerce-products + * h2,
body.page-id-5 .elementor-widget-products h2,
body.page-id-5 .elementor-widget-heading:has(+ .elementor-widget-products) h2 { color: #0B3954 !important; }

/* ============================================================
   4. 15 YEARS / 33 US BRANDS BADGES — restore circular backgrounds
   ============================================================ */
body.page-id-5 .stat-badge,
body.page-id-5 .pl-badge-circle,
body.page-id-5 .elementor-counter .elementor-counter-number-wrapper,
body.page-id-5 .badge-pill,
body.page-id-5 [class*="counter"] .elementor-counter-number-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  background: #0B3954 !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  margin: 0 12px 0 0 !important;
}
/* Second badge (Yellow accent) */
body.page-id-5 .stat-badge:nth-of-type(2),
body.page-id-5 .pl-badge-circle.is-accent,
body.page-id-5 [class*="counter"]:nth-of-type(2) .elementor-counter-number-wrapper {
  background: #FFB128 !important;
  color: #0B3954 !important;
}

/* ============================================================
   5. FEATURED PRODUCTS / FROM THE BUYER'S GUIDE — fallback to keep titles dark on white
   ============================================================ */
.elementor-widget-woocommerce-products .woocommerce-loop-product__title,
.elementor-widget-products .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3,
ul.products li.product .woocommerce-loop-product__title { color: #0B3954 !important; }

/* Blog post cards anywhere on home */
.elementor-widget-loop-grid .e-loop-item .elementor-heading-title,
.elementor-widget-loop-grid .e-loop-item .elementor-heading-title a,
.elementor-widget-blog-grid .elementor-post__title,
.elementor-widget-blog-grid .elementor-post__title a { color: #0B3954 !important; }

/* CONTACT PAGE (id 38) — NO blanket overrides. Per-widget colors live in Elementor data. */

/* ============================================================
   7. TYPOGRAPHY POLISH — bolder titles, tighter section padding
   ============================================================ */
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3 { font-weight: 700 !important; letter-spacing: -.5px; }
.elementor-widget-heading h2 { font-weight: 800 !important; }

/* Section vertical padding — ONLY tighten where overly large; never override first-section / hero spacing */
/* NOTE: removed aggressive padding-top on first-of-type — was creating a gap between header and hero. */

/* ============================================================
   8. SHOP CONTENT, REVIEWS, CLEARANCE  — generic readable defaults
   ============================================================ */
.shop-content-wrap, .reviews-content-wrap { color: #0B3954; }
ul.products li.product { font-family: Outfit, sans-serif; }

/* ============================================================
   9. HIDE the legacy 'Need Help 24/7' static block if any cached copy renders
   ============================================================ */
.etheme-static-block-9,
.shop-sidebar .static-block-need-help,
.shop-sidebar [class*="need-help"] { display: none !important; }

/* ============================================================
   10. SINGLE PRODUCT PAGE — delete elements user asked to remove
   ============================================================ */

/* 'Have Question? Ask An Expert' popup-trigger button (above title on mobile) */
body.single-product .elementor-button.etheme-modal-popup-button,
body.single-product .etheme-modal-popup-button { display: none !important; }

/* Instagram / YouTube / Telegram social-follow icons (faded XStore widget under 'Got Questions') */
body.single-product .et-follow-buttons,
body.single-product .follow-instagram,
body.single-product .follow-youtube,
body.single-product .follow-telegram,
body.single-product .follow-facebook,
body.single-product .follow-twitter { display: none !important; }

/* If 'Got Questions' container becomes empty/orphan, hide it too */
body.single-product .elementor-widget-etheme_follow_buttons,
body.single-product .elementor-widget-etheme_social_buttons { display: none !important; }
