/* =========================================================
   Mobile/Tablet LANDSCAPE tight layout (≤1200px)
   - Reduce paddings & gaps for tile / stretched sections
   - No right gap on home in landscape
   - Leaves portrait & desktop untouched
   ========================================================= */

@media (max-width: 1200px) and (orientation: landscape){

  /* 1) Variables (token-friendly) */
  :root{
    --section-pad-x: 12px;   /* tighter than desktop defaults */
    --section-pad-y: 10px;
    --container-gap: 10px;   /* generic grid gap */
    --tile-pad: 10px;
    --tile-gap: 10px;
  }

  /* 2) Containers: trim side paddings */
  .container,
  .wbc-container,
  .site,
  .site-main,
  #content,
  .home-sections,
  .section,
  .section--stretched,
  .stretched,
  .full-bleed {
    padding-left: var(--section-pad-x) !important;
    padding-right: var(--section-pad-x) !important;
  }

  /* 3) Tighten common grids (tiles, products, cards, posts) */
  .tiles,
  .tile-grid,
  .cards,
  .card-grid,
  .products,
  ul.products,
  .wc-block-grid__products,
  .posts-grid {
    display: grid;
    gap: var(--tile-gap) !important;
    grid-gap: var(--tile-gap) !important; /* legacy */
  }

  /* 4) Tile/card internal padding */
  .tile,
  .card,
  .product,
  .products .product,
  .wc-block-grid__product {
    padding: var(--tile-pad) !important;
  }

  /* 5) Hero/spotlight: remove excess outer padding/margins */
  .wbc-spotlight,
  .hero,
  .home-hero,
  .featured-rail {
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-left: var(--section-pad-x) !important;
    padding-right: var(--section-pad-x) !important;
  }

  /* 6) HOME: truly edge-to-edge (NO right padding on main wrappers) */
  body.home .container,
  body.home .wbc-container,
  body.home .site,
  body.home .site-main,
  body.home #content,
  body.home .home-sections,
  body.home .section,
  body.home .section--stretched,
  body.home .stretched,
  body.home .full-bleed {
    padding-right: 0 !important;     /* was var(--section-pad-x) — remove it */
    margin-right: 0 !important;
  }

  /* 7) Ensure the right-side dock (from header-mobile.css) overlays cleanly */
  body.home .wbc-tabbar{
    right: max(10px, env(safe-area-inset-right));
  }

  /* 8) Prevent horizontal scroll */
  html, body, .site, .site-main, #content { overflow-x: clip; }
}