/*
Theme Name: YourGuruz Child
Theme URI: https://yourguruz.com
Description: Child theme of Rehub for YourGuruz.com — bold marigold/indigo redesign. v1.3.0 fixed a specificity conflict with REHub's dynamic Theme-Options CSS. v1.5.0 extended it to header/navigation. v4.1.0 consolidates the whole site onto ONE responsive layout system: a single container width + gutter + spacing + gap scale (:root --yg-container/--yg-gutter/--yg-space/--yg-gap) shared by the header and the homepage component; the accreted per-generation container/header blocks were collapsed into it.
Author: YourGuruz
Template: rehub-theme
Version: 4.1.0
Text Domain: yourguruz-child
*/

/* ==========================================================
   YourGuruz design tokens
   ========================================================== */
:root{
  --yg-primary:#FF7A1A;
  --yg-primary-hover:#E6650A;
  --yg-secondary:#14102B;
  --yg-text:#14102B;
  --yg-muted:#6B6489;
  --yg-bg:#F7F4FF;
  --yg-card:#FFFFFF;
  --yg-border:#E7E1FA;
  --yg-success:#16A34A;
  --yg-radius-sm:6px;
  --yg-radius-md:10px;
  --yg-radius-lg:16px;
  --yg-shadow-sm:0 1px 2px rgba(20,16,43,0.06);
  --yg-shadow-md:0 4px 16px rgba(20,16,43,0.08);

  /* ---- ONE responsive layout system (v4.1.0) --------------
     Used by BOTH the header (inc/header.php markup) and the
     homepage component (.yg-home in inc/homepage.php + the
     assets/css/homepage.css design system). Nothing else in
     this theme defines its own container width or gutter. */
  --yg-container:1300px;               /* single max content width, whole site */
  --yg-gutter:clamp(16px, 3vw, 32px);  /* single side padding, fluid           */
  --yg-space:clamp(40px, 6vw, 64px);   /* single vertical rhythm between blocks */
  --yg-gap:clamp(12px, 1.4vw, 20px);   /* single grid / carousel gutter        */
}

body{
  background:var(--yg-bg) !important;
  color:var(--yg-text) !important;
  font-family:'Manrope', sans-serif !important;
}

h1,h2,h3,h4,
.site-title,
.entry-title,
.widget-title{
  font-family:'Fraunces', serif !important;
  color:var(--yg-text) !important;
}

/* ==========================================================
   Header — CORRECTED (v1.3.0). REHub's dynamic CSS sets:
     #main_header{ background-color: <option> !important }
   specificity (1,0,0). A plain #main_header rule here ties on
   specificity and loses on load order. Adding "body" as an
   ancestor selector raises specificity to (1,0,1), which wins
   unconditionally — no reliance on which stylesheet prints last.
   ========================================================== */
body #main_header{
  background:var(--yg-secondary) !important;
  color:#fff !important;
}
body #main_header a{
  color:#fff !important;
}

/* ==========================================================
   Buttons — .wpsm-button / .rehub_main_btn already win today
   (confirmed correct on the live "Go to shop" button), so left
   as a plain rule.
   ========================================================== */
.wpsm-button,
.rehub_main_btn,
a.re_track_btn.blockstyle,
input[type="submit"]{
  background:var(--yg-primary) !important;
  border-color:var(--yg-primary-hover) !important;
  color:var(--yg-secondary) !important;
  font-weight:700 !important;
  border-radius:var(--yg-radius-sm) !important;
}
.wpsm-button:hover,
.rehub_main_btn:hover{
  background:var(--yg-primary-hover) !important;
}

/* ==========================================================
   Coupon reveal / buy buttons — CORRECTED (v1.3.0).
   REHub's dynamic CSS sets (inc/customization.php):
     .priced_block .btn_offer_block, ... { background: <option> !important }
   specificity (0,2,0) — that's exactly why v1.2.0's flat
   .btn_offer_block rule (0,1,0) lost even though the class was
   right. Matching the real DOM nesting (.priced_block wraps the
   button, confirmed in functions/affiliate_functions.php) and
   adding "body" pushes specificity to (0,2,1), which wins
   unconditionally.
   The unmasked "code visible" pill (.rehub_offer_coupon without
   .btn_offer_block) was never in REHub's competing rule, which
   is why it already looked correct in the last screenshot — no
   change needed there, kept for consistency.
   ========================================================== */
body .priced_block .btn_offer_block,
body .priced_block .coupon_btn,
body .priced_block .rehub_offer_coupon,
body .rehub_offer_coupon{
  background:var(--yg-primary) !important;
  border:1px dashed var(--yg-primary-hover) !important;
  color:var(--yg-secondary) !important;
  font-weight:700 !important;
  border-radius:var(--yg-radius-sm) !important;
}
body .priced_block .btn_offer_block:hover,
body .priced_block .coupon_btn:hover,
body .priced_block .rehub_offer_coupon:hover,
body .rehub_offer_coupon:hover{
  background:var(--yg-primary-hover) !important;
}
/* Expired coupons — theme's own .expired_coupon class, dim it rather than marigold */
body .priced_block .expired_coupon{
  background:#E7E1FA !important;
  color:var(--yg-muted) !important;
  border-color:var(--yg-border) !important;
}

/* ==========================================================
   Coupon / deal grid cards — the FULL re-skin now lives in
   assets/css/app.css (one shared implementation, site-wide).
   Only the plain link-colour bits stay here.
   ========================================================== */
.store_for_grid a,
.cat_for_grid a,
.tag_post_store_meta a{
  color:var(--yg-secondary) !important;
  font-weight:600 !important;
}

.woo-tax-logo,
.rh-cartbox{
  background:var(--yg-card) !important;
  border-radius:var(--yg-radius-md) !important;
  border:1px solid var(--yg-border) !important;
}

.rh-dealstorelink{
  border-radius:999px !important;
  border:1px solid var(--yg-border) !important;
  background:#fff !important;
  font-weight:600 !important;
}
.rh-dealstorelink.active{
  background:var(--yg-secondary) !important;
  color:#fff !important;
}

.redbrightcolor{ color:var(--yg-primary-hover) !important; }
.greencolor{ color:var(--yg-success) !important; }
.rehub-main-color{ color:var(--yg-primary) !important; }

/* ==========================================================
   Footer — CORRECTED (v1.3.0). Real class is .footer-bottom,
   not #footer (which doesn't exist in this theme — v1.1/1.2's
   #footer rule matched nothing at all). REHub's dynamic CSS:
     .footer-bottom{ background-color: <option> !important }
   specificity (0,1,0) — same pattern, same fix: match the real
   class and add "body" for (0,1,1), which wins unconditionally.
   ========================================================== */
body .footer-bottom{
  background:var(--yg-secondary) !important;
  color:#C8C2E8 !important;
}
body .footer-bottom a{
  color:#fff !important;
}

/* ==========================================================
   Search box — real classes .searchform / .search-form (parent
   theme, confirmed in style.css) plus the submit button.
   ========================================================== */
.searchform input[type="text"],
.top-search input,
form.search-form input[type="text"]{
  border-radius:var(--yg-radius-md) !important;
  border-color:var(--yg-border) !important;
}
form.search-form input[type="text"]:focus{
  border-color:var(--yg-primary) !important;
}
form.search-form [type="submit"]{
  color:var(--yg-primary-hover) !important;
}

/* ==========================================================
   Header / Navigation (v1.5.0)
   Real structure confirmed in header.php + parent style.css:
     #main_header              → header wrapper (already styled)
     nav.top_menu > ul > li > a → desktop nav links (inherit white
                                   from "body #main_header a", no
                                   extra rule needed for base state)
     #slide-menu-mobile         → mobile off-canvas panel
     .dl-menuwrapper button     → mobile hamburger toggle
     .is-sticky .logo_section_wrap → sticky-scroll header state
   ========================================================== */

/* Desktop nav — hover/active state, real selector nav.top_menu */
nav.top_menu > ul > li > a:hover,
nav.top_menu > ul > li.current-menu-item > a{
  color:var(--yg-primary) !important;
}

/* Mobile hamburger icon — real class .dl-menuwrapper button svg line.
   Parent default is dark (#111), invisible against our indigo header;
   parent only switches it to white under a "dark_style" option-driven
   class we can't rely on being set, so force it directly instead. */
.dl-menuwrapper button svg line{
  stroke:#fff !important;
}

/* Mobile off-canvas menu panel — real class #slide-menu-mobile.
   Panel itself stays white/light (it's a full-screen overlay, not
   part of the header bar), links get the brand accent on active state. */
#slide-menu-mobile ul li.menu-item > a:hover,
#slide-menu-mobile ul li.menu-item > a:active{
  color:var(--yg-primary-hover) !important;
}
#slide-menu-mobile ul li.back-mb span{
  background-color:var(--yg-bg) !important;
}

/* ==========================================================
   Sticky header — CORRECTED (v1.5.0). REHub's dynamic CSS
   (inc/customization.php) sets BOTH of these together from the
   same option, but v1.3.0 only raised specificity for #main_header:
     #main_header, .is-sticky .logo_section_wrap { background: <option> !important }
   The static parent stylesheet also has its own default:
     .is-sticky .logo_section_wrap{ background:#fff }
   Both mean the header very likely flashes white on scroll today.
   Same fix as before: match the real selector, add "body" ancestor
   to exceed REHub's specificity (0,2,0) → (0,2,1), unconditionally.
   ========================================================== */
body .is-sticky .logo_section_wrap,
body .sticky-active.logo_section_wrap{
  background:var(--yg-secondary) !important;
}

/* ==========================================================
   Homepage rebuild — first pass (v1.6.0)
   Sections added to the Elementor front page (page 1322):
     #yg-home-stores    → [yg_popular_stores]  (REHub wpsm_tax_archive, logo)
     #yg-home-toppicks  → compactgrid_loop_mod (REHub editor's-choice badge)
     #yg-home-trending  → compactgrid_loop_mod (REHub deal grid, orderby=view)
   CSS-only layout/skin on top of REHub markup. Mobile-first: base rules
   target small screens, min-width media queries scale up. Same design
   tokens (:root --yg-*) defined at the top of this file.
   ========================================================== */

/* Section rhythm ------------------------------------------------------- */
#yg-home-stores,
#yg-home-toppicks,
#yg-home-trending{
  padding-block:28px 8px !important;
}
#yg-home-stores > .e-con-inner,
#yg-home-toppicks > .e-con-inner,
#yg-home-trending > .e-con-inner{
  gap:14px !important;
}
@media (min-width:768px){
  #yg-home-stores,
  #yg-home-toppicks,
  #yg-home-trending{
    padding-block:44px 12px !important;
  }
}

/* Section heading --------------------------------------------------------- */
.yg-home-heading{
  margin:0 0 6px;
}
.yg-home-heading__title{
  font-family:'Fraunces', Georgia, serif !important;
  color:var(--yg-secondary) !important;
  font-weight:700 !important;
  font-size:22px !important;
  line-height:1.15 !important;
  margin:0 0 4px !important;
  position:relative;
  padding-bottom:8px;
}
.yg-home-heading__title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:44px;
  height:3px;
  border-radius:999px;
  background:var(--yg-primary);
}
.yg-home-heading__sub{
  font-family:'Manrope', sans-serif !important;
  color:var(--yg-muted) !important;
  font-size:13px !important;
  line-height:1.45 !important;
  margin:0 !important;
}
@media (min-width:768px){
  .yg-home-heading__title{ font-size:28px !important; }
  .yg-home-heading__sub{ font-size:14px !important; }
}

/* Popular stores — logo grid ------------------------------------------- */
.yg-store-logos > .rh-flex-eq-height{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  float:none !important;
  width:auto !important;
  margin:0 !important;
}
.yg-store-logos .logo-tax-link{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  min-height:64px;
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:10px !important;
  background:var(--yg-card) !important;
  border:1px solid var(--yg-border) !important;
  border-radius:var(--yg-radius-md) !important;
  box-shadow:var(--yg-shadow-sm) !important;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.yg-store-logos .logo-tax-link:hover{
  transform:translateY(-2px);
  border-color:var(--yg-primary) !important;
  box-shadow:var(--yg-shadow-md) !important;
}
.yg-store-logos .logo-tax-link img{
  max-height:44px;
  width:auto;
  object-fit:contain;
}
@media (min-width:480px){
  .yg-store-logos > .rh-flex-eq-height{ grid-template-columns:repeat(4, 1fr); }
}
@media (min-width:768px){
  .yg-store-logos > .rh-flex-eq-height{ grid-template-columns:repeat(6, 1fr); gap:12px; }
  .yg-store-logos .logo-tax-link{ min-height:74px; }
  .yg-store-logos .logo-tax-link img{ max-height:50px; }
}

/* Deal grids (Top Picks + Trending) ---------------------------------- */
#yg-home-toppicks .col_item.offer_grid,
#yg-home-trending .col_item.offer_grid{
  border-radius:var(--yg-radius-lg) !important;
}
/* keep REHub's own responsive column behaviour; just tighten gutters */
#yg-home-toppicks .rh-flex-eq-height,
#yg-home-trending .rh-flex-eq-height{
  gap:12px;
}

/* ==========================================================
   HOMEPAGE — full build (v1.7.0)
   All sections rendered by [yg_home_section] (child theme,
   inc/homepage.php) as <section class="yg-home-section" id="…">
   inside the Elementor front page. REHub markup untouched;
   this only skins + lays it out. Mobile-first: base rules are
   phone-width, min-width queries scale up. Tokens: :root --yg-*
   defined at the top of this file.
   Palette rule of thumb — Marigold (--yg-primary) = CTAs,
   badges, active states, accents only. Deep Indigo
   (--yg-secondary) = headings + dark panels. Sections sit on
   white/tinted backgrounds with subtle borders.
   ========================================================== */

/* --- Section rhythm ---------------------------------------- */
.yg-home-section{
  width:100%;
  padding-block:24px 8px;
}
.yg-home-section + .yg-home-section{
  border-top:1px solid var(--yg-border);
}
.yg-home-section__body{ width:100%; }
@media (min-width:900px){
  .yg-home-section{ padding-block:40px 14px; }
}

/* --- Section heading (shared) ----------------------------- */
.yg-home-heading{ margin:0 0 14px; }
.yg-home-heading__title{
  font-family:'Fraunces', Georgia, serif !important;
  color:var(--yg-secondary) !important;
  font-weight:700 !important;
  font-size:21px !important;
  line-height:1.15 !important;
  margin:0 0 4px !important;
  padding-bottom:8px;
  position:relative;
}
.yg-home-heading__title::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:44px; height:3px; border-radius:999px;
  background:var(--yg-primary);
}
.yg-home-heading__sub{
  font-family:'Manrope', sans-serif !important;
  color:var(--yg-muted) !important;
  font-size:13px !important;
  line-height:1.45 !important;
  margin:0 !important;
}
@media (min-width:900px){
  .yg-home-heading__title{ font-size:28px !important; }
  .yg-home-heading__sub{ font-size:14px !important; }
}

/* --- Buttons --------------------------------------------- */
.yg-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  font-family:'Manrope', sans-serif;
  font-weight:700; font-size:14px; line-height:1;
  padding:12px 22px; border-radius:var(--yg-radius-sm);
  text-decoration:none !important; cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.yg-btn--primary{
  background:var(--yg-primary) !important; color:var(--yg-secondary) !important;
  border:1px solid var(--yg-primary-hover);
}
.yg-btn--primary:hover{ background:var(--yg-primary-hover) !important; transform:translateY(-1px); }
.yg-btn--ghost{
  background:#fff !important; color:var(--yg-secondary) !important;
  border:1px solid var(--yg-border);
}
.yg-btn--ghost:hover{ border-color:var(--yg-primary); color:var(--yg-primary-hover) !important; }
.yg-section-cta{ text-align:center; margin-top:18px; }

/* --- Store logo grids (Popular Stores + Offers by Brand) --- */
.yg-store-logos > .rh-flex-eq-height{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr);
  gap:10px; float:none !important; width:auto !important; margin:0 !important;
}
.yg-store-logos .logo-tax-link{
  float:none !important; width:auto !important; margin:0 !important;
  min-height:64px;
  display:flex !important; align-items:center; justify-content:center;
  padding:10px !important;
  background:var(--yg-card) !important;
  border:1px solid var(--yg-border) !important;
  border-radius:var(--yg-radius-md) !important;
  box-shadow:var(--yg-shadow-sm) !important;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.yg-store-logos .logo-tax-link:hover{
  transform:translateY(-2px);
  border-color:var(--yg-primary) !important;
  box-shadow:var(--yg-shadow-md) !important;
}
.yg-store-logos .logo-tax-link img{ max-height:42px; width:auto; object-fit:contain; }
@media (min-width:480px){
  .yg-store-logos > .rh-flex-eq-height{ grid-template-columns:repeat(4, 1fr); }
}
@media (min-width:900px){
  .yg-store-logos > .rh-flex-eq-height{ grid-template-columns:repeat(6, 1fr); gap:12px; }
  .yg-store-logos .logo-tax-link{ min-height:74px; }
  .yg-store-logos .logo-tax-link img{ max-height:50px; }
}

/* --- Deal grids: gutters + mobile 2-up ------------------- */
.yg-home-section .rh-flex-eq-height{ gap:12px; }
.yg-home-section .col_item.offer_grid{ border-radius:var(--yg-radius-lg) !important; }
@media (max-width:575px){
  .yg-home-section .eq_grid.rh-flex-eq-height{
    display:grid !important; grid-template-columns:repeat(2, 1fr); gap:10px;
  }
  .yg-home-section .eq_grid.rh-flex-eq-height > .col_item{ width:auto !important; margin:0 !important; }
}

/* --- Category tabs (REHub filter panel) ------------------ */
.yg-has-tabs .re_filter_panel{
  margin:0 0 16px !important; border:0 !important; padding:0 !important;
}
.yg-has-tabs .re_filter_ul{
  display:flex !important; flex-wrap:nowrap;
  gap:8px; margin:0 !important; padding:4px 0 !important;
  list-style:none !important;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.yg-has-tabs .re_filter_ul::-webkit-scrollbar{ display:none; }
.yg-has-tabs .re_filter_ul li{ margin:0 !important; padding:0 !important; flex:0 0 auto; }
.yg-has-tabs .re_filtersort_btn{
  display:inline-block;
  font-family:'Manrope', sans-serif; font-weight:600; font-size:13px;
  padding:8px 16px; border-radius:999px;
  background:#fff; color:var(--yg-secondary);
  border:1px solid var(--yg-border);
  white-space:nowrap; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.yg-has-tabs .re_filtersort_btn:hover{ border-color:var(--yg-primary); }
.yg-has-tabs .re_filtersort_btn.active{
  background:var(--yg-primary); color:var(--yg-secondary);
  border-color:var(--yg-primary-hover);
}
.yg-has-tabs .re_filter_panel.sortingloading{ opacity:.55; transition:opacity .15s ease; }

/* --- How It Works --------------------------------------- */
.yg-hiw{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:14px;
  counter-reset:none;
}
.yg-hiw__item{
  position:relative;
  background:var(--yg-card); border:1px solid var(--yg-border);
  border-radius:var(--yg-radius-lg); box-shadow:var(--yg-shadow-sm);
  padding:22px 18px 18px;
}
.yg-hiw__num{
  position:absolute; top:-12px; left:18px;
  width:30px; height:30px; border-radius:999px;
  background:var(--yg-primary); color:var(--yg-secondary);
  font-family:'Fraunces', serif; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.yg-hiw__icn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  background:var(--yg-bg); color:var(--yg-secondary);
  margin-bottom:10px;
}
.yg-hiw__title{
  font-family:'Fraunces', serif !important; color:var(--yg-secondary) !important;
  font-size:16px !important; font-weight:700 !important; margin:0 0 4px !important;
}
.yg-hiw__text{ font-size:13px !important; color:var(--yg-muted) !important; margin:0 !important; line-height:1.5 !important; }
@media (min-width:768px){
  .yg-hiw{ grid-template-columns:repeat(3, 1fr); gap:20px; }
}

/* --- Why YourGuruz ------------------------------------- */
.yg-why{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;
}
.yg-why__card{
  background:var(--yg-card); border:1px solid var(--yg-border);
  border-radius:var(--yg-radius-lg); box-shadow:var(--yg-shadow-sm);
  padding:18px 16px;
}
.yg-why__icn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  background:var(--yg-bg); color:var(--yg-primary-hover);
  margin-bottom:10px;
}
.yg-why__title{
  font-family:'Fraunces', serif !important; color:var(--yg-secondary) !important;
  font-size:15px !important; font-weight:700 !important; margin:0 0 4px !important;
}
.yg-why__text{ font-size:12.5px !important; color:var(--yg-muted) !important; margin:0 !important; line-height:1.5 !important; }
@media (min-width:768px){
  .yg-why{ grid-template-columns:repeat(4, 1fr); gap:18px; }
}

/* --- FAQ (accordion + schema) ------------------------- */
.yg-faq{ max-width:820px; }
.yg-faq__item{
  background:var(--yg-card); border:1px solid var(--yg-border);
  border-radius:var(--yg-radius-md); margin-bottom:10px; overflow:hidden;
}
.yg-faq__q{
  cursor:pointer; list-style:none;
  font-family:'Manrope', sans-serif; font-weight:700; font-size:14.5px;
  color:var(--yg-secondary);
  padding:15px 44px 15px 16px; position:relative;
}
.yg-faq__q::-webkit-details-marker{ display:none; }
.yg-faq__q::after{
  content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-size:20px; font-weight:700; color:var(--yg-primary-hover); line-height:1;
}
.yg-faq__item[open] .yg-faq__q::after{ content:"\2013"; }
.yg-faq__a{ padding:0 16px 16px; }
.yg-faq__a p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--yg-muted); }

/* --- Newsletter (MC4WP) ------------------------------- */
#yg-home-newsletter.yg-home-section{ border-top:0; padding-block:28px; }
.yg-newsletter__inner{
  background:var(--yg-secondary);
  border-radius:var(--yg-radius-lg);
  padding:24px 20px;
  display:grid; grid-template-columns:1fr; gap:16px;
}
.yg-newsletter__title{
  font-family:'Fraunces', serif !important; color:#fff !important;
  font-size:20px !important; font-weight:700 !important; margin:0 0 6px !important;
}
.yg-newsletter__copy p{ color:#C8C2E8 !important; font-size:13px !important; margin:0 !important; line-height:1.5 !important; }
.yg-newsletter .mc4wp-form-fields{
  display:flex; flex-wrap:wrap; gap:10px;
}
.yg-newsletter .mc4wp-form input[type="email"],
.yg-newsletter .mc4wp-form input[type="text"]{
  flex:1 1 200px; min-width:0;
  padding:12px 14px; border-radius:var(--yg-radius-sm);
  border:1px solid var(--yg-border); background:#fff; color:var(--yg-text);
  font-size:14px;
}
.yg-newsletter .mc4wp-form input[type="submit"]{
  flex:0 0 auto;
  background:var(--yg-primary); color:var(--yg-secondary);
  border:1px solid var(--yg-primary-hover);
  font-weight:700; font-size:14px; padding:12px 22px;
  border-radius:var(--yg-radius-sm); cursor:pointer;
  transition:background .15s ease;
}
.yg-newsletter .mc4wp-form input[type="submit"]:hover{ background:var(--yg-primary-hover); }
.yg-newsletter .mc4wp-response{ flex:1 1 100%; color:#fff; font-size:13px; }
@media (min-width:768px){
  .yg-newsletter__inner{ grid-template-columns:1fr 1.1fr; align-items:center; padding:28px 32px; }
}

/* --- Icons -------------------------------------------- */
.yg-icn{ width:22px; height:22px; display:block; }

/* ==========================================================
   HOMEPAGE CONTAINER — one system  (v4.1.0)

   The [yg_homepage] component (inc/homepage.php) outputs
       .yg-home > section.yg-hs …
   inside an Elementor full-width shell. Neutralise EVERY
   wrapper between #content and .yg-home so that .yg-home is
   the single container: one max-width (--yg-container), one
   fluid side gutter (--yg-gutter), no per-section widths, no
   per-breakpoint container hacks. The deal-grid, card,
   carousel, banding and static-block layout all live in
   assets/css/homepage.css and inherit these same tokens.
   Header / footer / archive .rh-container are OUTSIDE
   #content and are untouched here.
   ========================================================== */
/* Every wrapper between <body> and .yg-home is flattened. NB the
   REHub .rh-container.full_gutenberg is an ANCESTOR of #content,
   not a descendant, and .elementor-1322 carries its own
   margin-inline — both had to be named explicitly; together they
   were adding ~29px per side on top of .yg-home's own gutter. */
body.page-id-1322 .rh-container.full_gutenberg,
body.page-id-1322 .rh-content-wrap,
body.page-id-1322 #content,
body.page-id-1322 .elementor.elementor-1322,
body.page-id-1322 .elementor-1322 .e-con,
body.page-id-1322 .elementor-1322 .e-con > .e-con-inner,
body.page-id-1322 .elementor-1322 .elementor-widget-container,
body.page-id-1322 .elementor-1322 .elementor-shortcode{
  max-width:none !important;
  width:100% !important;
  margin-inline:0 !important;
  padding-inline:0 !important;
  --container-max-width:100%;
}
body.page-id-1322 .yg-home{
  max-width:var(--yg-container);
  margin-inline:auto;
  padding-inline:var(--yg-gutter);
}

/* ==========================================================
   HEADER / SEARCH / NAVIGATION  (v1.9.0)

   REHub header layout = header_first.php:
     #main_header .header_wrap
       .logo_section_wrap.hideontablet   → logo + search  (desktop bar)
         .logo-section.header_first_style
           .logo > a.logo_image > img
           .search.head_search > form.search-form  (+ .re-aj-search-wrap)
       .main-nav (.dark_style)            → nav bar (always visible)
         nav.top_menu > ul#menu-header-menu
         .responsive_nav_wrap.rh_mobile_menu
           #dl-menu > #dl-trigger (hamburger) + #mobile-menu-icons > .icon-search-onclick
     #rhSplashSearch                      → mobile splash search overlay
   Sticky: .main-nav gets .rh-stickme (child JS) → jquery.sticky.js
     wraps it in .sticky-wrapper.re-stickyheader and toggles .is-sticky
     (the wrapper reserves height, so no layout jump).

   Colour rule: Deep Indigo (--yg-secondary) = header/nav identity;
   Marigold (--yg-primary) = active state, focus ring, search CTA only.
   ========================================================== */

/* ---- Header shell -------------------------------------- */
body #main_header{
  background:var(--yg-secondary) !important;
  color:#fff !important;
}
body #main_header a{ color:#fff !important; }
#main_header .header_wrap{ position:relative; }

/* ---- Desktop logo + search bar ------------------------- */
#main_header .logo_section_wrap{
  background:var(--yg-secondary) !important;
  border-bottom:1px solid rgba(255,255,255,.10);
}
/* header inner width = the one site container (see :root v4.1.0) */
#main_header .logo_section_wrap > .rh-container,
#main_header .main-nav > .rh-container{
  max-width:var(--yg-container);
  margin-inline:auto;
  padding-inline:var(--yg-gutter);
}
#main_header .logo-section.header_first_style{
  display:flex !important;
  align-items:center;
  position:relative;
  gap:clamp(16px, 3vw, 32px);
  padding:10px 0 !important;
  margin:0 !important;
  min-height:44px;
}
/* logo pinned left + vertically centred so the search can sit at the
   TRUE horizontal centre of the row (desktop only; the whole
   .logo_section_wrap is display:none <=1024px). */
#main_header .logo-section .logo{
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  flex:0 0 auto; margin:0 !important;
}
#main_header .logo-section .logo .logo_image{ display:block; line-height:0; }
/* Logo = the on-dark YourGuruz lockup SVG (assets/img/logo/yg-lockup-ondark.svg,
   viewBox ~563 x 83). Rendered at a fixed height; SVG so it is crisp at
   any DPR and needs no retina swap. */
#main_header .logo-section .logo .logo_image img{
  height:32px;
  width:auto;
  aspect-ratio:588 / 91;          /* reserve space → no CLS */
  object-fit:contain;
  display:block;
}
@media (min-width:1400px){
  #main_header .logo-section .logo .logo_image img{ height:34px; }
}
#main_header .logo-section .mediad{ display:none !important; }  /* header ad slot: keep header compact */

/* Search — capped and centred in the space right of the logo, so it
   never sprawls edge-to-edge on wide screens. REHub adds
   .rh-flex-right-align (margin-left:auto) — neutralised here. */
#main_header .head_search{
  flex:1 1 auto;
  width:100%;
  min-width:0;
  max-width:560px;
  margin:0 auto !important;
  position:relative;
}
#main_header .head_search .search-form{
  position:relative;
  display:block;
  margin:0;
}
#main_header .head_search .search-form input[type="text"]{
  width:100%;
  height:44px;
  border-radius:12px;
  border:1px solid var(--yg-border);
  background:#fff;
  color:var(--yg-text);
  padding:0 52px 0 16px;
  font-family:'Manrope', sans-serif;
  font-size:14px;
  line-height:44px;
  box-shadow:none;
  transition:border-color .12s ease, box-shadow .12s ease;
}
#main_header .head_search .search-form input[type="text"]::placeholder{ color:var(--yg-muted); opacity:1; }
#main_header .head_search .search-form input[type="text"]:focus{
  outline:none;
  border-color:var(--yg-primary);
  box-shadow:0 0 0 3px rgba(255,122,26,.22);
}
#main_header .head_search .search-form .btnsearch{
  position:absolute;
  top:4px;
  right:4px;
  height:36px;
  width:40px;
  padding:0;
  border:0;
  border-radius:9px;
  background:var(--yg-primary) !important;
  color:var(--yg-secondary) !important;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .12s ease;
}
#main_header .head_search .search-form .btnsearch:hover{ background:var(--yg-primary-hover) !important; }
#main_header .head_search .search-form .btnsearch i{ font-size:15px; color:var(--yg-secondary) !important; }

/* AJAX live-search results dropdown (REHub .re-aj-search-wrap) */
#main_header .head_search .re-aj-search-wrap{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:140;
  background:#fff;
  border:1px solid var(--yg-border);
  border-radius:12px;
  box-shadow:var(--yg-shadow-md);
  max-height:72vh;
  overflow:auto;
  padding:4px;
}
#main_header .head_search .re-aj-search-wrap:empty{ display:none; }
#main_header .head_search .re-aj-search-wrap a{ color:var(--yg-text) !important; }
#main_header .head_search .re-aj-search-wrap a:hover{ background:var(--yg-bg); }

/* ---- Navigation bar ----------------------------------- */
body #main_header .main-nav{
  background:var(--yg-secondary) !important;
  border-top:1px solid rgba(255,255,255,.07);
}
#main_header .main-nav > .rh-container{
  display:flex;
  align-items:center;
  min-height:48px;
}
#main_header nav.top_menu{ flex:1 1 auto; }
/* 5 short links, no utility items → centre them so the bar reads as
   deliberate instead of a long empty strip on wide screens. */
#main_header nav.top_menu > ul.menu{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  margin:0;
  padding:0;
}
#main_header nav.top_menu > ul.menu > li{ margin:0; border:0 !important; }
#main_header nav.top_menu > ul.menu > li > a{
  display:block;
  padding:12px 15px;
  font-family:'Manrope', sans-serif;
  font-size:13.5px;
  font-weight:600;
  line-height:1;
  color:#fff !important;
  border-radius:8px;
  position:relative;
  transition:background .12s ease, color .12s ease;
}
#main_header nav.top_menu > ul.menu > li > a:hover,
#main_header nav.top_menu > ul.menu > li.hovered > a{
  background:rgba(255,255,255,.10);
  color:#fff !important;
}
#main_header nav.top_menu > ul.menu > li.current-menu-item > a,
#main_header nav.top_menu > ul.menu > li.current-menu-parent > a,
#main_header nav.top_menu > ul.menu > li.current-menu-ancestor > a{
  color:var(--yg-primary) !important;
}
#main_header nav.top_menu > ul.menu > li.current-menu-item > a::after{
  content:"";
  position:absolute;
  left:15px;
  right:15px;
  bottom:5px;
  height:2px;
  border-radius:2px;
  background:var(--yg-primary);
}
/* parent-item caret keeps REHub's \f107 glyph; just tone it down */
#main_header nav.top_menu ul.menu:not(.off-canvas) > li.menu-item-has-children > a:before{
  opacity:.7;
  font-size:12px;
}

/* ---- Categories mega-menu (dynamic taxonomy children) --- */
#main_header nav.top_menu > ul.menu > li.yg-cats-mega{ position:relative; }
#main_header nav.top_menu > ul.menu > li.yg-cats-mega > ul.sub-menu{
  width:auto;
  min-width:560px;
  max-width:min(720px, 92vw);
  display:grid;
  grid-template-columns:repeat(3, minmax(160px, 1fr));
  gap:2px;
  margin:0;
  padding:14px;
  background:#fff;
  border:1px solid var(--yg-border);
  border-radius:14px;
  box-shadow:var(--yg-shadow-md);
}
#main_header nav.top_menu > ul.menu > li.yg-cats-mega > ul.sub-menu > li{ margin:0; }
#main_header nav.top_menu > ul.menu > li.yg-cats-mega > ul.sub-menu > li > a{
  display:block;
  padding:9px 12px;
  border-radius:8px;
  font-family:'Manrope', sans-serif;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  color:var(--yg-secondary) !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#main_header nav.top_menu > ul.menu > li.yg-cats-mega > ul.sub-menu > li > a:hover{
  background:var(--yg-bg);
  color:var(--yg-primary-hover) !important;
}
#main_header nav.top_menu > ul.menu > li.yg-cats-mega > ul.sub-menu > li.yg-cats-mega__all{
  grid-column:1 / -1;
  margin-top:4px;
  border-top:1px solid var(--yg-border);
  padding-top:6px;
}
#main_header nav.top_menu > ul.menu > li.yg-cats-mega > ul.sub-menu > li.yg-cats-mega__all > a{
  color:var(--yg-primary-hover) !important;
  font-weight:700;
}
/* first-child triangle pointer from REHub — hide for the grid panel */
#main_header nav.top_menu > ul.menu > li.yg-cats-mega > ul.sub-menu > li:first-child > a:after{ display:none; }

/* ---- Sticky state ------------------------------------- */
.re-stickyheader.is-sticky .main-nav,
.main-nav.rh-stickme.is-sticky{
  background:var(--yg-secondary) !important;
  box-shadow:0 6px 20px rgba(20,16,43,.18);
}
.re-stickyheader.is-sticky .main-nav > .rh-container{ min-height:44px; }

/* Mobile / tablet header (<=1024px) is defined once, further down
   in the "MOBILE / TABLET (<=1024px)" block (v2.0.0). This earlier
   duplicate block was removed in v4.1.0 to keep ONE breakpoint set. */

/* Mobile off-canvas panel (#slide-menu-mobile) — brand touches */
#slide-menu-mobile ul li.menu-item > a{
  padding-top:13px !important;
  padding-bottom:13px !important;
  font-size:15px !important;
}
#slide-menu-mobile ul li.menu-item > a:hover,
#slide-menu-mobile ul li.menu-item > a:active,
#slide-menu-mobile ul li.current-menu-item > a{
  color:var(--yg-primary-hover) !important;
}
#slide-menu-mobile ul li.back-mb span{ background-color:var(--yg-bg) !important; }

/* ---- Mobile splash search (#rhSplashSearch) ----------- */
#rhSplashSearch form.search-form input[type="text"]{
  border-radius:12px !important;
  border:1px solid var(--yg-border) !important;
  height:48px;
  font-family:'Manrope', sans-serif;
}
#rhSplashSearch form.search-form input[type="text"]:focus{
  border-color:var(--yg-primary) !important;
  box-shadow:0 0 0 3px rgba(255,122,26,.22) !important;
  outline:none;
}
#rhSplashSearch form.search-form [type="submit"]{
  border-radius:12px !important;
  background:var(--yg-primary) !important;
  color:var(--yg-secondary) !important;
  font-weight:700;
}

/* ---- No horizontal overflow from the header ----------- */
#main_header,
#main_header .header_wrap,
#main_header .rh-container{ max-width:100%; }
#main_header .head_search .search-form input[type="text"]{ max-width:100%; }

/* ==========================================================
   NAVIGATION EXPERIENCE  (v2.0.0)  — desktop + mobile

   Builds on v1.9.0. REHub structure unchanged:
     #main_header
       .logo_section_wrap  → logo (+ desktop search)
       .main-nav           → nav.top_menu  +  .responsive_nav_wrap
                             (#dl-trigger hamburger, #mobile-menu-icons)
     </header> → rehub_action_after_header →
       .yg-msearch          (child: dedicated mobile search bar)
       .yg-breadcrumb-wrap  (child: Yoast breadcrumbs on archives)
     #slide-menu-mobile     (REHub off-canvas, JS-cloned from nav.top_menu;
                             #mobtopheaderpnl logo header + .close-menu X +
                             .submenu-toggle arrows + .back-mb + .sub-menu-active
                             are all provided by custom.js — skinned below)

   Dynamic menu children (child filter): Categories → `category` terms,
   Top Stores → `dealstore` terms. Both render on desktop (mega-menu) and
   inside the mobile off-canvas (expand/collapse) with zero extra JS.

   Colour: Deep Indigo = header/nav/structure; Marigold = active, focus,
   CTA only; white/light = menus + content.
   ========================================================== */

/* ========== DESKTOP NAV (level 2) ========== */
/* Title case, not REHub's forced ALL CAPS:
   Home · Top Stores · Categories · Today's Deals · Blog */
#main_header nav.top_menu > ul.menu > li > a{ text-transform:none !important; }
/* neutralise REHub's animated sliding underline; use a crisp marigold mark */
#main_header nav.top_menu > ul:not(.off-canvas) > li > a::after{ content:none !important; }

#main_header nav.top_menu > ul.menu > li.current-menu-item > a,
#main_header nav.top_menu > ul.menu > li.current-menu-parent > a,
#main_header nav.top_menu > ul.menu > li.current-menu-ancestor > a{
  color:var(--yg-primary) !important;
}
#main_header nav.top_menu > ul.menu > li.current-menu-item > a::after{
  content:"" !important;
  position:absolute; left:15px; right:15px; bottom:5px;
  height:2px; border-radius:2px; background:var(--yg-primary);
}

/* ---- Mega-menus: Categories + Top Stores (dynamic taxonomy) ---- */
#main_header nav.top_menu > ul.menu > li.yg-mega{ position:relative; }
#main_header nav.top_menu > ul.menu > li.yg-mega > ul.sub-menu{
  width:auto;
  display:grid;
  gap:2px;
  margin:0;
  padding:14px;
  background:#fff;
  border:1px solid var(--yg-border);
  border-radius:14px;
  box-shadow:var(--yg-shadow-md);
  position:absolute;
  top:100%;
  left:0;
  margin-top:9px;
}
/* invisible bridge across the gap so the pointer can travel from the
   nav item to the panel without the hover dropping */
#main_header nav.top_menu > ul.menu > li.yg-mega > ul.sub-menu::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-11px;
  height:12px;
}
/* small caret tying the panel to its trigger */
#main_header nav.top_menu > ul.menu > li.yg-mega > ul.sub-menu::after{
  content:"";
  position:absolute;
  top:-6px; left:24px;
  width:11px; height:11px;
  background:#fff;
  border:1px solid var(--yg-border);
  border-right:0; border-bottom:0;
  transform:rotate(45deg);
}
#main_header nav.top_menu > ul.menu > li.yg-cats-mega > ul.sub-menu{
  min-width:560px; max-width:min(720px, 92vw);
  grid-template-columns:repeat(3, minmax(160px, 1fr));
}
#main_header nav.top_menu > ul.menu > li.yg-stores-mega > ul.sub-menu{
  min-width:520px; max-width:min(680px, 92vw);
  grid-template-columns:repeat(3, minmax(150px, 1fr));
}
#main_header nav.top_menu > ul.menu > li.yg-mega > ul.sub-menu > li{ margin:0; }
#main_header nav.top_menu > ul.menu > li.yg-mega > ul.sub-menu > li > a{
  display:block;
  padding:9px 12px;
  border-radius:8px;
  font-family:'Manrope', sans-serif;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  color:var(--yg-secondary) !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#main_header nav.top_menu > ul.menu > li.yg-mega > ul.sub-menu > li > a:hover{
  background:var(--yg-bg);
  color:var(--yg-primary-hover) !important;
}
#main_header nav.top_menu > ul.menu > li.yg-mega > ul.sub-menu > li.yg-mega__all{
  grid-column:1 / -1;
  margin-top:4px;
  border-top:1px solid var(--yg-border);
  padding-top:6px;
}
#main_header nav.top_menu > ul.menu > li.yg-mega > ul.sub-menu > li.yg-mega__all > a{
  color:var(--yg-primary-hover) !important;
  font-weight:700;
}
#main_header nav.top_menu > ul.menu > li.yg-mega > ul.sub-menu > li:first-child > a:after{ display:none; }

/* ---- Desktop breadcrumb bar ---- */
.yg-breadcrumb-wrap{
  background:#fff;
  border-bottom:1px solid var(--yg-border);
}
.yg-breadcrumb-wrap .rh-container{ padding-block:9px; }
.yg-breadcrumb{
  font-family:'Manrope', sans-serif;
  font-size:12.5px;
  line-height:1.4;
  color:var(--yg-muted);
  white-space:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.yg-breadcrumb::-webkit-scrollbar{ display:none; }
.yg-breadcrumb a{ color:var(--yg-secondary) !important; font-weight:600; text-decoration:none; }
.yg-breadcrumb a:hover{ color:var(--yg-primary-hover) !important; }
.yg-breadcrumb .breadcrumb_last{ color:var(--yg-muted); font-weight:600; }
/* REHub single-post breadcrumb (dimox_breadcrumbs) — same visual language */
.post .breadcrumb, .breadcrumb.rh_opacity_7{
  font-family:'Manrope', sans-serif !important;
  font-size:12.5px !important;
  opacity:1 !important;
  color:var(--yg-muted) !important;
}
.post .breadcrumb a, .breadcrumb.rh_opacity_7 a{ color:var(--yg-secondary) !important; font-weight:600; }
.post .breadcrumb a:hover, .breadcrumb.rh_opacity_7 a:hover{ color:var(--yg-primary-hover) !important; }

/* ========== MOBILE / TABLET HEADER (<=1024px) — ONE bar ==========
   REHub's mobile markup puts the real logo (a.logo_image_mobile > img)
   and the hamburger (#dl-trigger) TOGETHER inside
       .main-nav > .rh-container > .responsive_nav_wrap.rh_mobile_menu
   while .logo_section_wrap holds only the (hidden) desktop logo.
   So: hide the empty .logo_section_wrap bar and turn
   .responsive_nav_wrap into the single 56px indigo bar —
   [hamburger] · [logo] — then the child .yg-msearch row sits below. */
@media (max-width:1024px){
  #main_header{ position:relative; overflow:visible; }

  /* empty desktop-logo bar → gone (real logo is in the nav row) */
  #main_header .logo_section_wrap.hideontablet{ display:none !important; }

  /* the nav row IS the mobile bar */
  #main_header .main-nav{
    position:static !important;
    min-height:0 !important;
    background:var(--yg-secondary) !important;
    box-shadow:none !important;
  }
  #main_header .main-nav > .rh-container{
    min-height:0 !important;
    padding-inline:12px !important;
    display:block !important;
  }
  #main_header nav.top_menu{ display:none !important; }

  #main_header .responsive_nav_wrap.rh_mobile_menu{
    position:static !important;
    width:100% !important;
    min-height:58px;
    display:flex !important;
    align-items:center;
    gap:6px;
    z-index:auto;
  }
  #main_header #dl-menu.dl-menuwrapper{
    display:flex !important;
    align-items:center;
    gap:6px;
    width:auto !important;
  }
  #main_header #dl-trigger.dl-trigger{
    order:0;
    width:42px; height:42px;
    margin-left:-9px;                 /* optical: align bars to container edge */
    display:flex; align-items:center; justify-content:center;
    flex:0 0 auto;
  }
  #main_header #dl-trigger.dl-trigger svg{ width:24px; height:24px; }
  #main_header .dl-menuwrapper button svg line{ stroke:#fff !important; stroke-width:2.6 !important; }

  /* the real mobile logo: back into normal flow, sane size */
  #main_header a.logo_image_mobile{
    order:1;
    position:static !important;
    inset:auto !important;
    transform:none !important;
    margin:0 !important;
    display:flex !important;
    align-items:center;
    line-height:0;
  }
  #main_header a.logo_image_mobile img,
  #main_header .logo_image_mobile img{
    position:static !important;
    inset:auto !important;
    transform:none !important;
    margin:0 !important;
    float:none !important;
    height:26px !important;
    width:auto !important;
    max-width:190px !important;
    aspect-ratio:588 / 91;
    object-fit:contain !important;
    object-position:left center;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    padding:0 !important;
    display:block !important;
  }
  /* compact phones: the on-dark YG symbol replaces the full lockup
     (swapped by yg-ui.js — this just keeps it tidy pre-swap) */
  #main_header a.logo_image_mobile img.yg-logo--symbol{
    aspect-ratio:74 / 42; height:26px !important; max-width:46px !important;
  }

  #main_header .logo-section .head_search{ display:none !important; }
  #main_header .logo-section .mediad{ display:none !important; }
  #main_header #mobile-menu-icons{ display:none !important; } /* dedicated search bar replaces this */

  /* never clip the absolutely-placed hamburger */
  .re-stickyheader.is-sticky{ overflow:visible !important; }
  /* belt & braces: keep the nav bar static on small screens */
  .re-stickyheader,
  .re-stickyheader .main-nav.rh-stickme{
    position:static !important;
    height:auto !important;
    top:auto !important;
  }
}

/* ---- Dedicated mobile search bar (child, after </header>) ---- */
.yg-msearch{ display:none; }
@media (max-width:1024px){
  .yg-msearch{
    display:block;
    background:#fff;
    padding:8px 12px;
    border-bottom:1px solid var(--yg-border);
  }
  .yg-msearch .yg-msearch__inner{ position:relative; }
  .yg-msearch form.search-form{ position:relative; margin:0; display:block; }
  .yg-msearch form.search-form input[type="text"]{
    width:100%;
    height:44px;
    border-radius:12px;
    border:1px solid var(--yg-border);
    background:var(--yg-bg);
    color:var(--yg-text);
    padding:0 46px 0 16px;
    font-family:'Manrope', sans-serif;
    font-size:14px;
    line-height:44px;
  }
  .yg-msearch form.search-form input[type="text"]::placeholder{ color:var(--yg-muted); opacity:1; }
  .yg-msearch form.search-form input[type="text"]:focus{
    outline:none;
    background:#fff;
    border-color:var(--yg-primary);
    box-shadow:0 0 0 3px rgba(255,122,26,.22);
  }
  .yg-msearch form.search-form .btnsearch{
    position:absolute;
    right:4px; top:4px;
    width:36px; height:36px;
    padding:0; border:0;
    border-radius:9px;
    background:var(--yg-primary) !important;
    color:var(--yg-secondary) !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .yg-msearch form.search-form .btnsearch i{ font-size:15px; color:var(--yg-secondary) !important; }
  .yg-msearch .re-aj-search-wrap{
    position:absolute;
    left:0; right:0;
    top:calc(100% + 6px);
    background:#fff;
    border:1px solid var(--yg-border);
    border-radius:12px;
    box-shadow:var(--yg-shadow-md);
    z-index:140;
    max-height:60vh;
    overflow:auto;
    padding:4px;
  }
  .yg-msearch .re-aj-search-wrap:empty{ display:none; }
}

/* ========== MOBILE OFF-CANVAS PANEL (#slide-menu-mobile) ==========
   REHub's custom.js opens the panel (navMenu.fadeIn + .off-canvas-active
   on the child <ul>) but on CLOSE it only removes .off-canvas-active +
   the overlay — it never hides #slide-menu-mobile again. So the panel
   MUST hide itself off-canvas by default and slide in only while its
   child list carries .off-canvas-active. (Earlier this file pinned it
   at left:0 with no closed state → the close X appeared to do nothing.) */
#slide-menu-mobile{
  position:fixed;
  top:0; left:0; bottom:0;
  width:88vw;
  max-width:380px;
  background:#fff;
  z-index:100000;
  box-shadow:0 0 40px rgba(20,16,43,.28);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:none;
  transform:translate3d(-100%,0,0);
  visibility:hidden;
  transition:transform .26s cubic-bezier(.4,0,.2,1), visibility 0s linear .26s;
}
#slide-menu-mobile::-webkit-scrollbar{ display:none; }
/* open state — driven by the child JS class (works everywhere) and,
   as a native fallback, by :has() on the list REHub toggles. */
html.yg-drawer-open #slide-menu-mobile,
#slide-menu-mobile:has(> .menu.off-canvas-active){
  transform:translate3d(0,0,0);
  visibility:visible;
  transition:transform .26s cubic-bezier(.4,0,.2,1), visibility 0s;
}
/* page frozen behind the drawer, restored on close (see yg-ui.js) */
html.yg-drawer-open,
html.yg-drawer-open body{
  overflow:hidden !important;
}
html.yg-drawer-open body{
  position:fixed;
  width:100%;
}
#slide-menu-mobile .menu.off-canvas{
  position:relative;
  min-height:100%;
  width:100% !important;      /* REHub JS pins an inline ~270px width → rows stop short of the panel edge */
  box-sizing:border-box;
  margin:0;
  padding:0;
}
#slide-menu-mobile .menu.off-canvas > li,
#slide-menu-mobile .menu.off-canvas ul.sub-menu{ width:100% !important; box-sizing:border-box; }
/* remove REHub's staggered entrance animation (keep it snappy) */
#slide-menu-mobile .off-canvas-active > li{ animation:none !important; }
.offsetnav-overlay{ background:rgba(20,16,43,.55) !important; }

/* Panel header: indigo, logo, close X */
#slide-menu-mobile #mobtopheaderpnl{
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  position:relative;
  overflow:visible;
}
#slide-menu-mobile #mobtopheaderpnl #rhmobtoppnl,
#slide-menu-mobile #mobtopheaderpnl > div{
  background:var(--yg-secondary) !important;
  padding:16px !important;
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#slide-menu-mobile #mobtopheaderpnl #mobpanelimg{
  height:26px; width:auto; max-width:200px;
  aspect-ratio:588 / 91;
  object-fit:contain; background:transparent !important;
  border:0 !important; box-shadow:none !important; border-radius:0 !important;
}
/* kill any stray hamburger svg cloned into the panel header */
#slide-menu-mobile #mobtopheaderpnl > svg,
#slide-menu-mobile #mobtopheaderpnl .dl-trigger{ display:none !important; }
/* Close X — pinned to the PANEL's own top-right, not to the sliding
   list (whose width/transform changes between drill levels, which used
   to fling the X into the logo or off-screen). #slide-menu-mobile has a
   transform, so position:fixed here resolves against the panel box. */
#slide-menu-mobile .menu.off-canvas > li.close-menu{
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  left:auto !important;
  width:56px !important;
  height:60px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  background:transparent !important;
  z-index:5;
}
#slide-menu-mobile .menu.off-canvas > li.close-menu span,
#slide-menu-mobile .menu.off-canvas > li.close-menu i{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  border-radius:0 !important;
  color:#fff !important;
  position:static !important;
  inset:auto !important;
  margin:0 !important;
  font-size:20px;
  width:auto !important; height:auto !important;
}
#slide-menu-mobile .menu.off-canvas > li.close-menu span::before,
#slide-menu-mobile .menu.off-canvas > li.close-menu span::after{ display:none !important; }

/* Rows */
#slide-menu-mobile ul li.menu-item{
  position:relative !important;
  border-bottom:1px solid #EEEAF6 !important;
  overflow:visible;
  float:none;
  display:block !important;
  width:100%;
}
#slide-menu-mobile ul li.menu-item > a{
  display:block !important;          /* REHub leaves these inline → rows collapse + overlap */
  float:none !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:15px 54px 15px 18px !important;  /* room for the drill-in arrow on the right */
  font-family:'Manrope', sans-serif;
  font-size:15.5px !important;
  font-weight:600 !important;
  line-height:1.4 !important;
  color:var(--yg-secondary) !important;
}
#slide-menu-mobile ul li.menu-item:not(.menu-item-has-children) > a{ padding-right:18px !important; }
#slide-menu-mobile ul li.menu-item.current-menu-item > a,
#slide-menu-mobile ul li.menu-item.current-menu-parent > a{
  color:var(--yg-primary) !important;
}
#slide-menu-mobile ul li.menu-item > a:active{ background:var(--yg-bg); }

/* Expand arrow — stretch to the row's full height so the glyph always
   sits centred on ITS row (REHub's default top:0/height:52 drifts when
   the row height changes). */
#slide-menu-mobile ul li.menu-item > span.submenu-toggle{
  position:absolute !important;
  right:0 !important; top:0 !important; bottom:0 !important;
  height:auto !important;
  float:none !important;
  width:52px !important;
  margin:0 !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  color:var(--yg-secondary);
  border-left:1px solid #EEEAF6;
  z-index:2;
}
#slide-menu-mobile ul span.submenu-toggle .rhicon{ font-size:14px; line-height:1; }
#slide-menu-mobile ul span.submenu-toggle:active{ color:var(--yg-primary); background:var(--yg-bg); }

/* Nested sub-menu (slides in via .sub-menu-active — REHub JS).
   Cover the WHOLE panel below the header so the parent rows don't
   peek above the "back" bar. #slide-menu-mobile has a transform, so
   position:fixed here resolves against the panel box. */
#slide-menu-mobile ul ul.sub-menu{
  position:fixed;
  top:60px; left:0; right:auto; bottom:0;
  width:100%;
  background:#fff;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:none;
  transform:translate3d(100%,0,0);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
  z-index:5;
}
#slide-menu-mobile ul ul.sub-menu::-webkit-scrollbar{ display:none; }
#slide-menu-mobile ul ul.sub-menu.sub-menu-active{ transform:translate3d(0,0,0); z-index:999; }
/* nested-of-nested (deeper) keeps stacking */
#slide-menu-mobile ul ul.sub-menu ul.sub-menu{ top:0; }
#slide-menu-mobile ul ul.sub-menu li.menu-item > a{
  font-size:15px !important;
  font-weight:500 !important;
  padding:13px 18px !important;
}
#slide-menu-mobile ul li.back-mb span{
  background:var(--yg-bg) !important;
  color:var(--yg-secondary) !important;
  font-weight:700 !important;
  font-size:14px !important;
  padding:14px 18px !important;
  display:block;
}
#slide-menu-mobile ul li.back-mb .rhicon{ color:var(--yg-primary) !important; }
#slide-menu-mobile ul li.yg-mega__all > a,
#slide-menu-mobile ul li.yg-cats-mega__all > a{
  color:var(--yg-primary-hover) !important;
  font-weight:700 !important;
}
#slide-menu-mobile ul li.close-menu{ border:0 !important; }

/* ---- No horizontal overflow anywhere in the nav layer ---- */
.yg-msearch,
.yg-breadcrumb-wrap{ max-width:100%; overflow-x:hidden; }
#slide-menu-mobile ul ul.sub-menu li.menu-item > a{ overflow:hidden; text-overflow:ellipsis; }

/* ==========================================================
   SITE-WIDE UX REFINEMENT  (v2.1.0)
   Internal pages (Stores directory, store detail, categories,
   category archives, blog, search) share one wide centred
   container and one premium card language. Homepage design is
   NOT touched (its rules are scoped to body.page-id-1322 and
   win via specificity + !important).
   Deep Indigo = structure/headings, Marigold = CTA/active/
   badges/focus, white/light surfaces with subtle borders.
   ========================================================== */

/* ---------- 1. One centred content container ---------- */
/* Same tokens the header + homepage use (see :root v4.1.0). */
.rh-container{
  width:100% !important;
  max-width:var(--yg-container) !important;
  margin-inline:auto !important;
  padding-inline:var(--yg-gutter) !important;
}
@media (max-width:1199px){ .rh-container{ max-width:100% !important; } }

/* Blog / author archive: shrink the sidebar, widen the content column */
body.blog .rh-content-wrap > .main-side:not(.full_width),
body.archive .rh-content-wrap > .main-side:not(.full_width),
body.post-type-archive-blog .rh-content-wrap > .main-side:not(.full_width),
body.search .rh-content-wrap > .main-side:not(.full_width){
  width:calc(100% - 316px) !important;
}
body.blog .rh-content-wrap > .sidebar,
body.archive .rh-content-wrap > .sidebar,
body.post-type-archive-blog .rh-content-wrap > .sidebar,
body.search .rh-content-wrap > .sidebar{
  width:300px !important;
}
@media (max-width:1023px){
  body .rh-content-wrap > .main-side:not(.full_width),
  body .rh-content-wrap > .sidebar{ width:100% !important; }
}

/* Store-detail two-column: slightly wider content area */
.rh-mini-sidebar{ width:280px !important; }
.rh-mini-sidebar-content-area{ width:calc(100% - 312px) !important; }
@media (max-width:1023px){
  .rh-mini-sidebar, .rh-mini-sidebar-content-area{ width:100% !important; }
}

/* ---------- 2. Typography — natural casing, no ALL CAPS ---------- */
.woo-tax-name h1, .woo-tax-name .font150,
.rh-content-wrap h1.entry-title,
.archive-title, .page-title,
.rh_category_tab .title,
.widget .widget-title, .rh-cartbox .widget-inner-title,
.re_filter_instore ul.re_filter_ul li span,
.re_filter_panel ul.re_filter_ul li span,
.store_for_grid a, .cat_for_grid a,
.yg-breadcrumb, .breadcrumb{
  text-transform:none !important;
  letter-spacing:0 !important;
}
.rh-content-wrap h1.entry-title,
.woo-tax-name h1{
  font-family:'Fraunces', Georgia, serif !important;
  font-weight:700 !important;
  color:var(--yg-secondary) !important;
  font-style:normal !important;
}

/* ---------- 3-6. Directory pages (Stores / Categories) ----------
   The store/category directory chrome — hero, .yg-store-card,
   .yg-store-grid, .yg-az, .yg-stores__toolbar/group/letter,
   .yg-cat-card — now lives in ONE place: assets/css/app.css
   (shared component system). Removed from here in Stage 4. */

/* ---------- 7. Store detail page — premium brand panel ---------- */
.rh-mini-sidebar .rh-cartbox.woo-tax-logo{
  background:var(--yg-card) !important;
  border:1px solid var(--yg-border) !important;
  border-radius:var(--yg-radius-lg) !important;
  box-shadow:var(--yg-shadow-sm) !important;
  padding:20px 18px !important;
}
.rh-mini-sidebar .woo-tax-logo img{ max-height:80px; width:auto; }
.rh-mini-sidebar .woo-tax-logo .wpsm-button.re_track_btn,
.rh-mini-sidebar .woo-tax-logo a.rehub_main_btn{
  background:var(--yg-primary) !important;
  border-color:var(--yg-primary-hover) !important;
  color:var(--yg-secondary) !important;
  font-weight:700 !important;
  border-radius:var(--yg-radius-sm) !important;
  text-transform:none !important;
}
.rh_category_tab.rh-cartbox{
  background:var(--yg-card) !important;
  border:1px solid var(--yg-border) !important;
  border-radius:var(--yg-radius-lg) !important;
  box-shadow:var(--yg-shadow-sm) !important;
}
.rh_category_tab .rh-dealstorelink{
  border-radius:999px !important;
  border:1px solid var(--yg-border) !important;
  font-weight:600 !important;
}
.rh_category_tab .rh-dealstorelink.active{
  background:var(--yg-secondary) !important;
  color:#fff !important;
  border-color:var(--yg-secondary) !important;
}
.woo-tax-name{
  background:var(--yg-card);
  border:1px solid var(--yg-border);
  border-radius:var(--yg-radius-lg);
  box-shadow:var(--yg-shadow-sm);
  padding:20px 22px;
  margin-bottom:18px;
}
.woo-tax-name h1{ margin:0 0 8px !important; font-size:24px !important; }
.woo-tax-name .term-description{ color:var(--yg-muted); font-size:14px; line-height:1.6; }

/* Deal-type tabs on store/category (REHub filter panel) */
.re_filter_instore .re_filter_panel,
.re_filter_panel{ border:0 !important; }
.re_filter_instore ul.re_filter_ul,
.re_filter_panel ul.re_filter_ul{
  display:flex !important;
  flex-wrap:nowrap;
  gap:8px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:4px 0 !important;
  margin:0 0 14px !important;
}
.re_filter_instore ul.re_filter_ul::-webkit-scrollbar,
.re_filter_panel ul.re_filter_ul::-webkit-scrollbar{ display:none; }
.re_filter_instore ul.re_filter_ul li,
.re_filter_panel ul.re_filter_ul li{ margin:0 !important; flex:0 0 auto; }
.re_filter_instore ul.re_filter_ul li span,
.re_filter_panel ul.re_filter_ul li span{
  display:inline-block;
  padding:8px 16px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--yg-border);
  color:var(--yg-secondary);
  font-family:'Manrope', sans-serif;
  font-weight:600;
  font-size:13px;
  white-space:nowrap;
  cursor:pointer;
}
.re_filter_instore ul.re_filter_ul li span.active,
.re_filter_panel ul.re_filter_ul li span.active,
.re_filter_instore ul.re_filter_ul li span:hover,
.re_filter_panel ul.re_filter_ul li span:hover{
  border-color:var(--yg-primary);
}
.re_filter_instore ul.re_filter_ul li span.active,
.re_filter_panel ul.re_filter_ul li span.active{
  background:var(--yg-primary);
  color:var(--yg-secondary);
  border-color:var(--yg-primary-hover);
}

/* ---------- 8. Offer/deal cards site-wide ----------
   Superseded by the shared card system in assets/css/app.css.
   The old body:not(.page-id-1322) split is gone — one card,
   every context. */

/* ---------- 9. Archive heading + description block ---------- */
.main-side.full_width > .rh-post-wrapper,
.main-side.full_width{ padding:0 !important; }
.category-description, .archive-description,
.main-side .term-description{
  color:var(--yg-muted);
  font-size:14px;
  line-height:1.65;
  margin:0 0 18px;
}

/* ---------- 10. Blog — readable typography ---------- */
body.blog .main-side, body.post-type-archive-blog .main-side{ font-family:'Manrope', sans-serif; }
body.single-post .rh-post-wrapper, body.single .entry-content{ max-width:760px; }
body.single .entry-content{ font-size:16.5px; line-height:1.75; color:var(--yg-text); }
body.single .entry-content h2{ font-family:'Fraunces', serif; color:var(--yg-secondary); }
body.blog .post_title a, body.post-type-archive-blog .post_title a,
body.blog .blog_title a{
  font-family:'Fraunces', serif !important;
  color:var(--yg-secondary) !important;
}

/* ---------- 11. Search results page ---------- */
body.search .search-results-title, body.search h1.entry-title{
  font-family:'Fraunces', serif !important;
  color:var(--yg-secondary) !important;
}

/* ==========================================================
   MOBILE HEADER + SEARCH — refined (v2.1.0)
   Structure: indigo top bar (hamburger left, logo centred, no
   overlap) → dedicated search row with equal side padding →
   content. On focus the search row becomes a fixed overlay so
   the page never jumps; results come from REHub AJAX.
   ========================================================== */
@media (max-width:1024px){

  /* (mobile bar structure is defined once, above, in the
     "MOBILE / TABLET HEADER" block — v4.1.0) */
  #main_header .responsive_nav_wrap.rh_mobile_menu{ height:auto; }

  /* dedicated search row: same side gutter as the page content */
  .yg-msearch{
    display:block;
    background:#fff;
    padding:10px var(--yg-gutter) !important;
    border-bottom:1px solid var(--yg-border);
  }
  .yg-msearch .yg-msearch__inner{ position:relative; max-width:none; margin:0; }
  .yg-msearch form.search-form{ position:relative; margin:0; display:block; }
  .yg-msearch form.search-form input[type="text"]{
    width:100%;
    height:44px;
    border-radius:12px;
    border:1px solid var(--yg-border);
    background:#fff;
    color:var(--yg-text);
    padding:0 44px 0 16px;
    font-family:'Manrope', sans-serif;
    font-size:14px;
    line-height:44px;
  }
  .yg-msearch form.search-form input[type="text"]::placeholder{ color:var(--yg-muted); opacity:1; }
  .yg-msearch form.search-form input[type="text"]:focus{
    outline:none;
    background:#fff;
    border-color:var(--yg-primary);
    box-shadow:0 0 0 3px rgba(255,122,26,.22);
  }
  .yg-msearch form.search-form .btnsearch{
    position:absolute; right:4px; top:4px;
    width:36px; height:36px; padding:0; border:0;
    border-radius:9px;
    background:var(--yg-primary) !important;
    color:var(--yg-secondary) !important;
    display:flex !important; align-items:center; justify-content:center;
    cursor:pointer;
  }
  .yg-msearch form.search-form .btnsearch i{ font-size:15px; color:var(--yg-secondary) !important; }
  .yg-msearch .re-aj-search-wrap{
    position:absolute; left:0; right:0; top:calc(100% + 8px);
    background:#fff;
    border:1px solid var(--yg-border);
    border-radius:12px;
    box-shadow:var(--yg-shadow-md);
    z-index:2;
    max-height:60vh;
    overflow:auto;
    padding:4px;
  }
  .yg-msearch .re-aj-search-wrap:empty{ display:none; }
  .yg-msearch__close{
    display:none;
    position:absolute; right:-6px; top:50%; transform:translateY(-50%);
    width:36px; height:36px;
    border:0; background:transparent;
    font-size:26px; line-height:1; color:var(--yg-muted);
    cursor:pointer;
  }

  /* --- focus overlay: page stays put, search floats on top --- */
  body.yg-msearch-open{ overflow:hidden; }
  body.yg-msearch-open::before{
    content:"";
    position:fixed; inset:0;
    background:rgba(20,16,43,.45);
    z-index:100000;
  }
  body.yg-msearch-open .yg-msearch{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100001;
    padding:12px 14px !important;
    box-shadow:0 6px 24px rgba(20,16,43,.25);
    border-bottom:0;
  }
  body.yg-msearch-open .yg-msearch .yg-msearch__inner{ max-width:none; padding-right:40px; }
  body.yg-msearch-open .yg-msearch__close{ display:block; }
  body.yg-msearch-open .yg-msearch .re-aj-search-wrap{
    position:static;
    margin-top:10px;
    max-height:calc(100vh - 90px);
    box-shadow:none;
    border-color:var(--yg-border);
  }
}

/* desktop: never show the mobile bar / its overlay */
@media (min-width:1025px){
  .yg-msearch{ display:none !important; }
  body.yg-msearch-open::before{ display:none !important; }
}

/* ---------- No horizontal overflow, anywhere ---------- */
.yg-stores, .yg-catgrid, .yg-store-grid,
.yg-msearch, .yg-breadcrumb-wrap{ max-width:100%; }
.yg-store-grid{ min-width:0; }

/* ==========================================================
   HEADER / SEARCH / HERO — master refinement  (v2.2.0)

   • Smart Slider 2 param `responsiveForceFull` was set 1 → 0, so the
     hero now lives INSIDE the Elementor container instead of breaking
     out to the viewport (that break-out was the cause of the clipped
     text / cropped artwork / overflow). CSS below finishes the job:
     contains it, gives it a premium banner-card treatment and a
     sensible responsive height on every breakpoint.
   • Mobile search focus no longer moves the page: the body is frozen
     (position:fixed + saved offset in yg-ui.js) while the search
     overlay is open, then restored exactly on close.
   • "Home" is back in the nav and points at the real homepage URL.
   ========================================================== */

/* ---------- Homepage hero: contain + premium banner ---------- */
.elementor-1322 .elementor-element-6d7ea4a .elementor-widget-container{ overflow:visible; }
.elementor-1322 ss3-force-full-width,
.elementor-1322 .n2-section-smartslider,
.elementor-1322 #n2-ss-2-align,
.elementor-1322 .n2-padding{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  left:auto !important;
  right:auto !important;
}
.elementor-1322 .n2-section-smartslider{
  border-radius:var(--yg-radius-lg);
  overflow:hidden;
  box-shadow:var(--yg-shadow-sm);
  border:1px solid var(--yg-border);
}
/* intentional, responsive banner proportion (not a fixed pixel height) */
.elementor-1322 #n2-ss-2,
.elementor-1322 #n2-ss-2 .n2-ss-slider-1,
.elementor-1322 #n2-ss-2 .n2-ss-slider-3{
  max-height:clamp(200px, 30vw, 420px) !important;
}
.elementor-1322 #n2-ss-2 .n2-ss-slide-background-image img,
.elementor-1322 #n2-ss-2 .n2-ss-slide-background-image{
  object-fit:cover !important;
  object-position:center !important;
}
@media (max-width:767px){
  .elementor-1322 #n2-ss-2,
  .elementor-1322 #n2-ss-2 .n2-ss-slider-1,
  .elementor-1322 #n2-ss-2 .n2-ss-slider-3{
    max-height:clamp(150px, 44vw, 240px) !important;
  }
  .elementor-1322 .n2-section-smartslider{ border-radius:var(--yg-radius-md); }
}
/* first homepage section shouldn't crowd the hero */
.elementor-1322 .elementor-element-6d7ea4a{ margin-bottom:6px; }

/* ---------- Mobile search: freeze the page while the overlay is open ---------- */
body.yg-msearch-open{
  position:fixed;
  left:0;
  right:0;
  width:100%;
  overflow:hidden;
}

/* ---------- Desktop header: logo sizing + balance polish ---------- */
@media (min-width:1025px){
  #main_header .logo-section.header_first_style{
    padding-block:12px !important;
    gap:32px;
  }
  /* on-dark YourGuruz lockup SVG (viewBox ~563 x 83 → ~6.8:1) */
  #main_header .logo-section .logo .logo_image img{ height:32px; }
}
@media (min-width:1440px){
  #main_header .logo-section .logo .logo_image img{ height:34px; }
}

/* ---------- Nav: give the row a touch more presence ---------- */
#main_header .main-nav > .rh-container{ min-height:48px; }
#main_header nav.top_menu > ul.menu > li > a{ font-size:14px; }

/* ---------- Safety: no horizontal overflow from the hero ---------- */
.elementor-1322 ss3-force-full-width{ display:block; overflow:hidden; }