/* ==========================================================
   YOURGURUZ HOMEPAGE — one responsive system  (v4.0.0)

   Loaded only on the front page. Owns the ENTIRE homepage
   (hero included) rendered by [yg_homepage] / inc/homepage.php.

   Architecture, top → bottom:
     1. tokens        (container / spacing / gap — responsive)
     2. global        (.yg-home container + overflow guards)
     3. section       (.yg-hs, header, body)
     4. hero          (.yg-hero — Smart Slider, contained)
     5. grid systems  (.yg-grid 1→2→3→4 · .yg-carousel · store grid · spotlight · tabs)
     6. card          (REHub .col_item.offer_grid re-skin — shared)
     7. card internals(media area, badge, price, title, CTA)
     8. static blocks (How It Works / Why / FAQ / Newsletter)
     9. breakpoints   (min-width: 768 / 992 / 1200 / 1440)

   Mobile-first: base rules are phone-width, min-width queries
   progressively enhance. One container, one grid, one spacing
   scale — no per-section arbitrary widths, no emergency overrides.

   Colour: Deep Indigo (--yg-secondary) = headings / structure,
   Marigold (--yg-primary) = CTA / badge / active / "view all".
   Tokens --yg-* come from :root in the main style.css.
   ========================================================== */

/* ---------- 1. tokens ----------
   The container / gutter / spacing / gap SCALE is defined once in
   style.css  :root  (--yg-container / --yg-gutter / --yg-space /
   --yg-gap) and shared with the header. Here we only alias them to
   the short names the rest of this file already uses, plus two
   homepage-only values. No widths or paddings are re-invented. */
.yg-home{
  --c:var(--yg-container);
  --pad:var(--yg-gutter);
  --sp:var(--yg-space);
  --gap:var(--yg-gap);
  --head-mb:clamp(12px, 1vw + 8px, 18px);  /* section-header bottom margin */
  --card-r:clamp(12px, 1vw + 8px, 16px);   /* card corner radius           */
}

/* ---------- 2. the ONE container + overflow guards ----------
   .yg-home is the single homepage container. Its max-width /
   margin / padding are set in style.css (v4.1.0 block, scoped to
   body.page-id-1322) from the shared tokens; here we only add the
   safety rails so nothing can force a sideways scrollbar. */
/* Page-level clip only — NOT on .yg-home, so the banded panels
   (section 3) can bleed to the container edge with a negative
   gutter margin without being clipped. */
body.home{ overflow-x:clip; }
.yg-home{ font-family:'Manrope', sans-serif; }
.yg-home *,
.yg-home *::before,
.yg-home *::after{ box-sizing:border-box; }
.yg-home img{ max-width:100%; height:auto; }
.yg-home .yg-hs__body,
.yg-home .eq_grid,
.yg-home .yg-carousel,
.yg-home .yg-carousel__view,
.yg-home .yg-grid,
.yg-home .yg-cgrid,
.yg-home .yg-store-grid--home{ min-width:0; max-width:100%; }
.yg-home .yg-hs{ min-width:0; }

/* ---------- 3. section + rhythm + banding ----------
   ONE vertical rhythm (--sp between every section). Visual banding
   = alternating sections sit on a tinted panel that spans the full
   container width (negative gutter margin), so the page reads as
   grouped blocks instead of one flat wall. Homepage only. */
body.home{ background:#FFFFFF !important; }

/* ONE vertical rhythm: every section carries the same bottom gap.
   Block flow (not flex) so the banded panels can bleed to the
   container edge with a plain negative gutter margin. */
.yg-hs{ margin:0 0 var(--sp); }
.yg-hs:last-child{ margin-bottom:8px; }

/* Visual banding: alternating sections sit on a tinted panel that
   bleeds to the full container width (negative gutter margin). In
   normal block flow an auto-width child with negative side margins
   simply grows by that much — no calc, no stretch quirks. */
.yg-hs--band{
  background:var(--yg-bg);
  border-radius:clamp(16px, 2vw, 28px);
  padding:clamp(26px, 4vw, 44px) var(--pad);
  margin-inline:calc(-1 * var(--pad));
}
.yg-hs--band + .yg-hs--band{ margin-top:calc(-1 * var(--sp) + 14px); }

/* Section header is now the ONE shared component: .yg-section-head
   (assets/css/app.css). yg_home_section() renders it via
   yg_c_section_head(). The old .yg-hs__head/.yg-hs__title/.yg-hs__all
   rules were removed here — nothing on the page uses them. */
.yg-hs .yg-section-head{ margin-bottom:var(--head-mb); }
.yg-hs__body{ position:relative; }

/* ---------- 4. hero (Smart Slider, contained) ---------- */
/* spacing is owned by .yg-home flex gap (section 3) */
.yg-hero{
  border-radius:var(--card-r);
  overflow:hidden;
  border:1px solid var(--yg-border);
  box-shadow:var(--yg-shadow-sm);
  background:var(--yg-bg);
}
.yg-hero .n2-section-smartslider,
.yg-hero ss3-force-full-width,
.yg-hero #n2-ss-2-align,
.yg-hero .n2-padding{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  left:auto !important;
  right:auto !important;
}
.yg-hero ss3-force-full-width{ display:block; }
/* The Smart Slider 2 canvas ratio is 1200×400 (3:1) in the slider
   settings, so every SLIDE is sized to width ÷ 3 — the same 3:1 as the
   source art (2172×724). But Smart Slider's own compiled CSS still caps
   the OUTER wrapper (#n2-ss-2 / .n2-ss-slider-1..3) a few px short, which
   clips the bottom of the slide. Lock those wrappers to the identical
   3:1 so the full image shows, uncropped, at every width. */
.yg-hero #n2-ss-2,
.yg-hero #n2-ss-2 .n2-ss-slider-1,
.yg-hero #n2-ss-2 .n2-ss-slider-2,
.yg-hero #n2-ss-2 .n2-ss-slider-3{
  aspect-ratio:3 / 1 !important;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
}
.yg-hero #n2-ss-2 .n2-ss-slide-background-image img,
.yg-hero #n2-ss-2 .n2-ss-slide-background-image{
  object-fit:cover !important;
  object-position:center !important;
}
/* LCP FIX (performance phase, step 1) — Smart Slider's own CSS parks every
   slide's background 100000px off-screen (transform:translateX(-100000px))
   and only moves the active one to 0 once its JS has loaded + initialised,
   so the hero image — already downloading — sits invisible for however
   long that takes. This paints ONLY the first (real, server-rendered)
   slide's background in place immediately. It is intentionally NOT
   !important: it is simply more specific than Smart Slider's own rule
   below (1 id + 4 classes/pseudo-classes vs 1 id + 1 class), which is
   enough to win before JS runs. Confirmed via inspection that Smart
   Slider's JS unconditionally sets its OWN inline transform on every
   slide's background as soon as it initialises (regardless of this
   rule) — an inline style always wins over any external rule that isn't
   !important, so autoplay, transitions, arrows and which slide ends up
   active are completely unaffected; this only closes the gap before JS
   takes over. */
.yg-hero #n2-ss-2 .n2-ss-slide-backgrounds > .n2-ss-slide-background:first-child{
  transform:translateX(0);
}

/* ---------- 5a. shared responsive grid (Top Picks / Trending / Exclusive / Category) ---------- */
.yg-grid .eq_grid.rh-flex-eq-height,
.yg-cgrid .eq_grid.rh-flex-eq-height,
.yg-cattabs .eq_grid.rh-flex-eq-height{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-auto-rows:auto !important;  /* 1-col: no neighbour to match → natural height */
  gap:var(--gap) !important;
  margin:0 !important;
}
.yg-grid .col_item.offer_grid,
.yg-cgrid .col_item.offer_grid,
.yg-cattabs .col_item.offer_grid{
  float:none !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
}

/* --- mobile content density (single-column phase only) ---
   In 1-column mode 8 cards per section made each section ~2,400px
   and the page ~20,000px of near-identical cards. Below the first
   breakpoint each deal section shows its first 4 and each store
   grid its first 8; the section's own "All deals / All stores →"
   link carries the rest. Restored in full from 768px up, where the
   grid is 2-up and the rows are short. Real data throughout —
   nothing is fabricated, only deferred to the listing page. */
.yg-grid .col_item.offer_grid:nth-child(n+5),
.yg-cgrid .col_item.offer_grid:nth-child(n+5),
.yg-cattabs .col_item.offer_grid:nth-child(n+5){ display:none !important; }
.yg-home .yg-store-grid--home > *:nth-child(n+9){ display:none !important; }

/* In 1-column mode a full-width 16:10 image is ~214px tall and
   dominates the card. Cap the media so a phone card stays compact;
   the ratio returns from 768px up where cards are narrower. */
.yg-home .col_item.offer_grid figure > a,
.yg-home .col_item.offer_grid figure .img-centered-flex{
  aspect-ratio:auto;
  height:132px;
}

/* ---------- 5b. carousel (Featured Deals / Fresh Drops / Bank Offers) ----------
   Card width is a percentage of the scroll view, stepped on the SAME
   breakpoints as the static grid (5a) — 1 / 2 / 3 / 4 — so a row of
   carousel cards and a row of grid cards always show the same number
   of columns at the same viewport, and an exact N-up always fits with
   no half-clipped last card. Below the first breakpoint the card is
   82% so the next one peeks in and signals that the row scrolls. */
.yg-carousel{
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  gap:8px;
}
.yg-carousel__nav{ display:none; }
.yg-carousel__view{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
}
.yg-carousel__view::-webkit-scrollbar{ display:none; }
.yg-carousel__track .eq_grid.rh-flex-eq-height{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:var(--gap);
  margin:0 !important;
  padding:2px 0;
}
.yg-carousel__track .col_item.offer_grid{
  flex:0 0 auto !important;
  width:82% !important;            /* 1-up + peek → "this row scrolls" */
  min-width:0 !important;
  max-width:none !important;
  scroll-snap-align:start;
}

/* ---------- 5c. Save at Top Stores — spotlight + store grid ---------- */
.yg-hs--topstores .yg-hs__body{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.yg-spot{
  background:var(--yg-secondary);
  color:#fff;
  border-radius:16px;
  padding:16px;
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
}
.yg-spot__media{
  width:64px; height:64px; flex:0 0 auto;
  border-radius:999px; background:#fff;
  display:flex; align-items:center; justify-content:center; padding:10px;
}
.yg-spot__media img{ max-width:100%; max-height:100%; object-fit:contain; }
.yg-spot__info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.yg-spot__badge{ font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--yg-primary); }
.yg-spot__name{ font-family:'Fraunces', serif; font-weight:700; font-size:16px; }
.yg-spot__live{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#C8C2E8; }
.yg-spot__live i{ width:7px; height:7px; border-radius:999px; background:#33D69F; box-shadow:0 0 0 3px rgba(51,214,159,.25); }
.yg-spot .yg-btn{ margin-top:6px; align-self:flex-start; }

.yg-store-grid--home{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--gap);
}
.yg-home .yg-store-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  padding:14px 10px 12px;
  background:var(--yg-card);
  border:1px solid var(--yg-border);
  border-radius:14px;
  box-shadow:var(--yg-shadow-sm);
  text-decoration:none;
  min-width:0;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.yg-home .yg-store-card:hover{ transform:translateY(-2px); border-color:var(--yg-primary); box-shadow:var(--yg-shadow-md); }
.yg-home .yg-store-card__logo{ height:42px; display:flex; align-items:center; justify-content:center; }
.yg-home .yg-store-card__logo img{ max-height:38px; max-width:86%; width:auto; object-fit:contain; }
.yg-home .yg-ini{ width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-family:'Fraunces', serif; font-weight:700; font-size:14px; }
.yg-home .yg-ini--indigo{ background:var(--yg-bg); color:var(--yg-secondary); }
.yg-home .yg-ini--marigold{ background:#FFF1E4; color:var(--yg-primary-hover); }
.yg-home .yg-store-card__name{
  font-weight:700; font-size:12px; line-height:1.25; color:var(--yg-secondary);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.yg-home .yg-store-card__count{
  font-weight:700; font-size:10.5px; color:var(--yg-primary-hover);
  background:#FFF1E4; border-radius:999px; padding:2px 8px;
}

/* ---------- 5d. Offers by Category — REHub filter-panel tabs ---------- */
.yg-has-tabs .re_filter_panel{ border:0 !important; padding:0 !important; margin:0 0 16px !important; }
.yg-has-tabs .re_filter_ul{
  display:flex !important;
  flex-wrap:nowrap;
  gap:8px;
  list-style:none !important;
  margin:0 !important;
  padding:2px 0 4px !important;
  overflow-x:auto;
  scrollbar-width:none;
}
.yg-has-tabs .re_filter_ul::-webkit-scrollbar{ display:none; }
.yg-has-tabs .re_filter_ul li{ margin:0 !important; flex:0 0 auto; }
.yg-has-tabs .re_filtersort_btn{
  display:inline-block;
  font-weight:700; font-size:12.5px;
  padding:8px 14px; border-radius:999px;
  background:#fff; color:var(--yg-secondary);
  border:1px solid var(--yg-border);
  cursor:pointer; white-space:nowrap;
  transition:background .12s ease, color .12s ease, border-color .12s 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-cattabs .re_filter_panel.sortingloading{ opacity:.55; }

/* ==========================================================
   6 + 7. DEAL CARD — moved to assets/css/app.css

   The .col_item.offer_grid re-skin (badge pill, contained media,
   footer alignment, no mid-card void, no avatar, coupon-vs-deal
   CTA colour, REHub <=567px float neutraliser) is now ONE shared
   implementation in app.css, used by the homepage AND every
   internal archive. Homepage keeps only the grid-wrapper nudge
   and its column counts (section 5 above + breakpoints below).
   ========================================================== */
.yg-home .eq_grid.rh-flex-eq-height{ margin:0 !important; }

/* ---------- shared buttons ---------- */
.yg-home .yg-btn{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:700; font-size:12.5px; line-height:1;
  padding:10px 16px; border-radius:8px;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .14s ease, background .14s ease;
}
.yg-home .yg-btn--primary{ background:var(--yg-primary); color:var(--yg-secondary); border-color:var(--yg-primary-hover); }
.yg-home .yg-btn--primary:hover{ background:var(--yg-primary-hover); transform:translateY(-1px); }
.yg-icn{ width:16px; height:16px; display:block; }
.yg-carousel__nav{
  width:38px; height:38px; border-radius:999px;
  border:1px solid var(--yg-border); background:var(--yg-card); color:var(--yg-secondary);
  align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--yg-shadow-sm);
  transition:background .12s ease, border-color .12s ease, opacity .12s ease;
}
.yg-carousel__nav:hover:not(:disabled){ background:var(--yg-primary); border-color:var(--yg-primary-hover); }
.yg-carousel__nav--prev .yg-icn{ transform:rotate(180deg); }
.yg-carousel__nav:disabled{ opacity:.35; cursor:default; }

/* ---------- 8. static blocks (How It Works / Why / FAQ / Newsletter) ----------
   Same card language + spacing scale as the deal sections. Content is
   short by design, so cards are sized to the content (not stretched
   wide with trailing whitespace) and the whole row is centred. */
.yg-hiw{ list-style:none; margin:0 auto; padding:0; display:grid; grid-template-columns:1fr; gap:14px; max-width:560px; }
.yg-hiw__item{
  position:relative;
  background:var(--yg-card); border:1px solid var(--yg-border);
  border-radius:var(--card-r); box-shadow:var(--yg-shadow-sm);
  padding:20px 18px 16px;
}
.yg-hiw__num{
  position:absolute; top:-13px; left:18px;
  width:28px; height:28px; border-radius:999px;
  background:var(--yg-primary); color:var(--yg-secondary);
  font-family:'Fraunces', serif; font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(255,122,26,.35);
}
.yg-hiw__icn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:11px; background:#FFF1E4; color:var(--yg-primary-hover); margin-bottom:10px; }
.yg-hiw__title{ font-family:'Fraunces', serif; color:var(--yg-secondary); font-size:15.5px; font-weight:700; margin:0 0 4px; }
.yg-hiw__text{ font-size:13px; color:var(--yg-muted); margin:0; line-height:1.55; }

.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(--card-r); 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:11px; background:#FFF1E4; color:var(--yg-primary-hover); margin-bottom:9px; }
.yg-why__title{ font-family:'Fraunces', serif; color:var(--yg-secondary); font-size:14.5px; font-weight:700; margin:0 0 4px; }
.yg-why__text{ font-size:12.5px; color:var(--yg-muted); margin:0; line-height:1.5; }

.yg-faq{ max-width:860px; margin-inline:auto; }
.yg-faq__item{ background:var(--yg-card); border:1px solid var(--yg-border); border-radius:12px; margin-bottom:10px; overflow:hidden; }
.yg-faq__q{ cursor:pointer; list-style:none; font-weight:700; font-size:14px; color:var(--yg-secondary); padding:14px 44px 14px 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); }
.yg-faq__item[open] .yg-faq__q::after{ content:"\2013"; }
.yg-faq__a{ padding:0 16px 15px; }
.yg-faq__a p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--yg-muted); }

.yg-news__inner{ background:var(--yg-secondary); border-radius:16px; padding:22px; display:grid; grid-template-columns:1fr; gap:16px; align-items:center; }
.yg-news__copy{ align-self:center; }
.yg-news__title{ font-family:'Fraunces', serif; color:#fff; font-size:19px; font-weight:700; margin:0 0 6px; }
.yg-news__copy p{ color:#C8C2E8; font-size:13px; margin:0; line-height:1.5; }
.yg-news .mc4wp-form-fields{ display:flex; flex-direction:column; gap:10px; }
.yg-news .mc4wp-form input[type="email"]{ flex:1 1 200px; min-width:0; padding:12px 14px; border-radius:8px; border:1px solid var(--yg-border); background:#fff; color:var(--yg-text); font-size:14px; }
.yg-news .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:8px; cursor:pointer; }
.yg-news .mc4wp-form input[type="submit"]:hover{ background:var(--yg-primary-hover); }
.yg-news .mc4wp-response{ flex:1 1 100%; color:#fff; font-size:13px; }

/* ---------- 8b. YourGuruz Blog (homepage) ----------
   Its own editorial card — not the archive .yg-bcard. 1-up on
   phones, 3-up from 768. Media is each post's WP featured image;
   a brand-tint panel stands in when a post has none. */
.yg-hp-blog__lead{ max-width:62ch; margin:-2px 0 16px; font-size:13.5px; line-height:1.6; color:var(--yg-muted); }
.yg-hp-blog__grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.yg-hp-blog__card{
  background:var(--yg-card); border:1px solid var(--yg-border);
  border-radius:var(--card-r); box-shadow:var(--yg-shadow-sm);
  overflow:hidden; transition:box-shadow .18s ease, border-color .18s ease;
}
.yg-hp-blog__card:hover{ box-shadow:var(--yg-shadow-md); border-color:#DAD3F0; }
.yg-hp-blog__link{ display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit; }
.yg-hp-blog__media{
  display:block; aspect-ratio:16 / 10; overflow:hidden;
  background:linear-gradient(135deg,#FFF1E4,#EEE9FB,#E7ECFF);
}
.yg-hp-blog__media img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.yg-hp-blog__media--ph{ display:flex; align-items:center; justify-content:center; color:var(--yg-primary); }
.yg-hp-blog__media--ph svg{ width:34px; height:34px; }
.yg-hp-blog__body{ display:flex; flex-direction:column; gap:8px; padding:16px; flex:1; }
.yg-hp-blog__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  font-family:'Manrope', sans-serif; font-size:11px; font-weight:600; color:var(--yg-muted);
}
.yg-hp-blog__cat{
  font-weight:800; letter-spacing:.05em; text-transform:uppercase; font-size:10px;
  color:var(--yg-secondary); background:#FFF1E4; border-radius:999px; padding:3px 9px;
}
.yg-hp-blog__dot{ opacity:.5; }
.yg-hp-blog__title{
  font-family:'Fraunces', serif; font-weight:700; font-size:16px; line-height:1.32;
  color:var(--yg-secondary);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.yg-hp-blog__excerpt{
  font-size:12.5px; line-height:1.55; color:var(--yg-muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.yg-hp-blog__cta{
  margin-top:auto; padding-top:2px;
  font-family:'Manrope', sans-serif; font-weight:800; font-size:12px; color:var(--yg-primary-hover);
  display:inline-flex; align-items:center; gap:5px;
}
.yg-hp-blog__cta span{ transition:transform .18s ease; }
.yg-hp-blog__card:hover .yg-hp-blog__cta span{ transform:translateX(3px); }

/* ==========================================================
   9. BREAKPOINTS  (min-width, progressive)
   ========================================================== */

/* ---- Tablet ≥ 768 ---- */
@media (min-width:768px){
  /* 2-up and wider: equal-height rows so card footers line up */
  .yg-grid .eq_grid.rh-flex-eq-height,
  .yg-cgrid .eq_grid.rh-flex-eq-height,
  .yg-cattabs .eq_grid.rh-flex-eq-height{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    grid-auto-rows:1fr !important;
  }

  /* full card / store counts + the 16:10 media return once 2-up */
  .yg-grid .col_item.offer_grid:nth-child(n+5),
  .yg-cgrid .col_item.offer_grid:nth-child(n+5),
  .yg-cattabs .col_item.offer_grid:nth-child(n+5){ display:flex !important; }
  .yg-home .yg-store-grid--home > *:nth-child(n+9){ display:flex !important; }
  .yg-home .col_item.offer_grid figure > a,
  .yg-home .col_item.offer_grid figure .img-centered-flex{
    aspect-ratio:16 / 10;
    height:auto;
  }

  /* carousel gains prev/next arrows and goes 2-up, matching the grid */
  .yg-carousel{ grid-template-columns:auto minmax(0,1fr) auto; }
  .yg-carousel__nav{ display:flex; }
  .yg-carousel__track .col_item.offer_grid{
    width:calc((100% - 1 * var(--gap)) / 2) !important;
  }

  .yg-store-grid--home{ grid-template-columns:repeat(4, minmax(0,1fr)); }

  .yg-hiw{ grid-template-columns:repeat(3, 1fr); gap:20px; max-width:none; }

  .yg-news__inner{ grid-template-columns:1fr 1.05fr; padding:26px 30px; gap:24px; }
  .yg-news .mc4wp-form-fields{ flex-direction:row; flex-wrap:wrap; }

  .yg-hp-blog__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
  .yg-hp-blog__body{ padding:18px; }
  .yg-hp-blog__title{ font-size:16.5px; }

  .yg-has-tabs .re_filter_ul{ flex-wrap:wrap; overflow:visible; }
  /* hero ratio is width-driven 3:1 at every breakpoint — see section 4 */
}

/* ---- Laptop ≥ 992 ---- */
@media (min-width:992px){
  .yg-grid .eq_grid.rh-flex-eq-height,
  .yg-cgrid .eq_grid.rh-flex-eq-height,
  .yg-cattabs .eq_grid.rh-flex-eq-height{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }

  .yg-carousel__track .col_item.offer_grid{
    width:calc((100% - 2 * var(--gap)) / 3) !important;
  }

  .yg-store-grid--home{ grid-template-columns:repeat(5, minmax(0,1fr)); }

  .yg-why{ grid-template-columns:repeat(4, 1fr); gap:18px; }

  /* stretch (grid default) so the Featured Store panel spans the full
     height of the store grid beside it — no dead space under the panel.
     The panel then vertically centres its own content. */
  .yg-hs--topstores .yg-hs__body{ grid-template-columns:290px minmax(0,1fr); gap:24px; align-items:stretch; }
  .yg-spot{ flex-direction:column; justify-content:center; text-align:center; align-items:center; padding:24px 20px; gap:8px; }
  /* Desktop centres the featured-store mark, so a circle leaves a wide
     wordmark (e.g. AliExpress, 200×46) marooned in dead space. Use a
     logo PLATE instead — proportioned for a lockup, so wide wordmarks
     fill the width and square marks sit centred, both at a natural size.
     Mobile keeps the compact circle (base rule) untouched. */
  .yg-spot__media{
    width:auto; min-width:120px; max-width:180px; height:64px;
    border-radius:14px; padding:9px 18px;
  }
  .yg-spot__media img{ width:auto; height:auto; max-width:100%; max-height:100%; }
  .yg-spot__info{ align-items:center; }
  .yg-spot .yg-btn{ align-self:center; margin-top:10px; }
}

/* ---- Desktop ≥ 1200 ---- */
@media (min-width:1200px){
  .yg-grid .eq_grid.rh-flex-eq-height,
  .yg-cgrid .eq_grid.rh-flex-eq-height,
  .yg-cattabs .eq_grid.rh-flex-eq-height{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; }

  .yg-carousel__track .col_item.offer_grid{
    width:calc((100% - 3 * var(--gap)) / 4) !important;
  }

  .yg-store-grid--home{ grid-template-columns:repeat(6, minmax(0,1fr)); }
}