/* ============================================================
   GENTELLE v2.8.9C - FULL WIDTH RESPONSIVE LAYOUT FIX
   CSS-only runtime override. No application/data logic.
   ============================================================ */
:root{
  --gt-edge:clamp(12px,1.45vw,28px);
  --gt-edge-mobile:12px;
}

html,body,#app{
  width:100%;
  max-width:100%;
  min-width:0;
}
html,body{overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
img,video,svg,canvas{max-width:100%}

/* Remove the old 1460px desktop box. Keep only a small responsive
   content safety inset so cards/text never touch the browser chrome. */
.wrap,
body[data-custom-theme="on"] .wrap{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:var(--gt-edge)!important;
  padding-right:var(--gt-edge)!important;
  box-sizing:border-box!important;
}

/* Every major storefront route must consume the available viewport. */
main,
.retail-home,.hc-home,.hb-home,.template-home,
.listing,.product-page,.cart-page,.checkout,.account,.simple-page,.contact-page{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

/* HOME: campaign/hero visuals become genuinely full-bleed. Text inside
   each visual still has its own padding, so there are no giant side gaps. */
.hc-hero-section>.wrap,
.hb-hero-section>.wrap,
.hb-campaign-section>.wrap,
.retail-home>.hero-section>.wrap,
.retail-home>.campaign-section>.wrap{
  padding-left:0!important;
  padding-right:0!important;
}
.hc-hero-grid,.hb-hero-grid,.hb-campaign-grid,.hero-grid{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  box-sizing:border-box!important;
}
.hc-main-hero,.hb-campaign-main,.hb-main-hero,.hero,
.hc-side-promo,.hb-campaign,.hb-promo{
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
}
.hc-main-hero,.hb-campaign-main,.hb-main-hero{
  min-height:clamp(380px,34vw,650px)!important;
}

/* Avoid oversized empty margins around Home sections while preserving
   readable content spacing. */
.retail-home>.section,
.hc-home>.section,
.hb-home>.section,
.template-home>.section{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Flexible grids/cards: no fixed item is allowed to push the viewport. */
.product-grid,.product-rail,.category-rail,
.hc-category-rail,.hc-product-rail,
.hb-root-grid,.hb-category-grid,.hb-popular-grid,.hb-small-grid,
.hb-department-grid,.hb-collection-grid,
.hc-editorial-grid,.hc-projects-panel,
.footer-grid,.service-strip,.hb-service-strip,.hc-benefit-grid{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.product-card,.hc-category-card,.hb-root-card,.hb-small-card,
.hb-collection-card,.hb-department,.hb-new-arrival,.hb-special,
.hc-editorial-card,.hc-projects-content,.hc-projects-visual{
  min-width:0!important;
  max-width:100%!important;
}
.product-card img,.hc-category-card img,.hb-root-card img,.hb-small-card img,
.hb-collection-card img,.hb-department img,.hb-new-arrival img,.hb-special img,
.hc-projects-visual img{
  display:block;
  width:100%!important;
  max-width:100%!important;
  object-fit:cover;
}

/* Header: stay fluid instead of preserving a desktop-width box. */
.site-header,.topbar,.category-nav,.newsletter,.footer{
  width:100%!important;
  max-width:100%!important;
}
.mainhead{min-width:0!important}
.search,.search input,.head-actions,.navscroll{min-width:0}

/* Wide desktop: use the screen efficiently but keep sensible proportions. */
@media (min-width:1400px){
  .mainhead{grid-template-columns:minmax(170px,210px) minmax(420px,1fr) minmax(120px,150px) minmax(245px,300px)!important;gap:clamp(12px,1.2vw,22px)!important}
  .hc-hero-grid,.hb-hero-grid{gap:clamp(8px,.8vw,16px)!important}
  .hc-category-rail,.hb-root-grid,.hb-category-grid{gap:clamp(10px,1vw,18px)!important}
  .product-grid{gap:clamp(12px,1.2vw,22px)!important}
}

/* Laptop / small desktop. */
@media (min-width:901px) and (max-width:1399px){
  :root{--gt-edge:clamp(12px,1.2vw,20px)}
  .mainhead{grid-template-columns:minmax(145px,180px) minmax(260px,1fr) minmax(105px,125px) minmax(210px,250px)!important;gap:10px!important}
  .logo img{max-width:100%!important}
  .head-actions{gap:clamp(9px,1vw,16px)!important}
  .hc-main-hero,.hb-campaign-main,.hb-main-hero{min-height:clamp(350px,37vw,520px)!important}
}

/* Tablet: remove legacy width caps and make all home sections truly fluid. */
@media (max-width:900px){
  :root{--gt-edge:14px}
  .wrap,body[data-custom-theme="on"] .wrap{
    width:100%!important;
    max-width:none!important;
    padding-left:var(--gt-edge)!important;
    padding-right:var(--gt-edge)!important;
  }
  .hc-hero-section>.wrap,.hb-hero-section>.wrap,.hb-campaign-section>.wrap{
    padding-left:0!important;padding-right:0!important;
  }
  .mainhead{width:100%!important;grid-template-columns:42px minmax(0,1fr) auto!important;gap:8px!important}
  .mobile-search{width:100%!important}
  .mobile-search .search{width:100%!important}
  .hc-hero-grid,.hb-hero-grid,.hb-campaign-grid,.hero-grid{grid-template-columns:1fr!important}
  .hc-main-hero,.hb-campaign-main,.hb-main-hero,.hero{min-height:clamp(330px,63vw,500px)!important;border-radius:0!important}
  .hc-side-promos,.hb-campaign-side,.side-promos{width:100%!important}
  .hc-projects-panel{grid-template-columns:1fr!important}
  .footer-grid{gap:24px!important}
}

/* Mobile: exact viewport fit, two-up retail cards where applicable and no
   10/20px legacy outer width reduction. */
@media (max-width:560px){
  :root{--gt-edge:10px}
  .wrap,body[data-custom-theme="on"] .wrap{
    width:100%!important;
    max-width:none!important;
    padding-left:var(--gt-edge)!important;
    padding-right:var(--gt-edge)!important;
  }
  .hc-hero-section>.wrap,.hb-hero-section>.wrap,.hb-campaign-section>.wrap{
    padding-left:0!important;padding-right:0!important;
  }
  .hc-main-hero,.hb-campaign-main,.hb-main-hero,.hero{
    min-height:clamp(300px,90vw,430px)!important;
    border-radius:0!important;
  }
  .hc-hero-copy,.hb-campaign-copy,.hb-hero-copy{padding-left:18px!important;padding-right:18px!important}
  .product-grid,.product-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .hc-benefit-grid,.hb-service-strip,.service-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .footer-grid{grid-template-columns:1fr!important;gap:20px!important}
  .newsletter>.wrap{padding-top:26px!important;padding-bottom:26px!important}
  .newsletter form{width:100%!important;max-width:100%!important}
  .listing-title,.hc-section-head{gap:10px!important}
}

@media (max-width:380px){
  :root{--gt-edge:8px}
  .hc-hero-copy,.hb-campaign-copy,.hb-hero-copy{padding-left:14px!important;padding-right:14px!important}
  .head-actions{gap:8px!important}
  .product-grid,.product-grid.four{gap:6px!important}
}

/* RTL must remain geometrically identical. */
html[dir="rtl"] .wrap,
html[dir="rtl"] body[data-custom-theme="on"] .wrap{
  margin-left:0!important;
  margin-right:0!important;
}