/* ---------- GLOBAL ---------- */
html, body{ overflow-x:hidden; } /* prevent full-bleed slider from creating sideways scroll */

/* Center the page containers — no shifting to the left */
.content-wrapper,
#content,
.container,
.products-wrapper,
.products-block{
  margin-left:auto !important;
  margin-right:auto !important;
  width:auto !important;                 /* do NOT force 95% width */
  box-sizing:border-box;
  padding-left:min(4vw,32px) !important; /* symmetric paddings */
  padding-right:min(4vw,32px) !important;
}

/* ---------- HEADER OVERLAY you had before (kept) ---------- */
.header, .site-header, .header-top{ position:relative; }
.header::before, .site-header::before, .header-top::before{
  content:""; position:absolute; left:0; right:0; top:0; height:68px;
  background:rgba(0,0,0,.45); z-index:1; pointer-events:none;
}
.header a, .site-header a, .header-top a,
.header strong, .site-header strong, .header-top strong{ position:relative; z-index:2; }

/* turn off any template tint overlays on header video/images */
#header .video-overlay, #header .overlay, #header .tint,
#header .header-video .overlay, #header .header-video .tint,
#header .bg-video .overlay, #header .bg-video .tint{
  background:transparent!important; background-image:none!important; opacity:0!important; mix-blend-mode:normal!important;
}
#header video{ filter:none!important; mix-blend-mode:normal!important; }

/* ---------- HOMEPAGE SECTION HEADINGS (hide “Loyal”) ---------- */
.homepage-group-title,
.homepage-group-title::before,
.homepage-products-heading-6,
.homepage-products-heading-6::before,
.h4.homepage-group-title,
.h4.homepage-group-title::before{
  display:none!important; content:none!important;
}
.homepage-group-title{ margin:0!important; padding:0!important; height:0!important; line-height:0!important; }

/* ---------- PRODUCT GRID (robust, no flex collisions) ---------- */
.homepage-products .products,
.section--products .products,
.products-block .products{
  display:block !important;              /* ensure NOT flex */
  text-align:center !important;
  margin:0 auto !important;
  padding:0 !important;
}

.homepage-products .products > li,
.section--products .products > li,
.products-block .products > li{
  display:inline-block !important;
  float:none !important;
  vertical-align:top !important;
  text-align:left !important;            /* content inside card aligns normally */
  margin: 0 16px 32px !important;        /* even gaps in the row */
}

/* Product images: allow to fill the card, but let JS cap for crispness */
.products .product .product__image,
.products .product .product__image a,
.products .product .p-image{
  display:block !important;
  margin:0 auto !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  text-align:center;
}
.products .product .product__image img,
.products .product .p-image img{
  width:100% !important; /* fill the card width ... */
  height:auto !important;
  object-fit:contain !important;
  image-rendering:auto;
  /* ... but JS will set max-width so we NEVER upscale a small thumb */
}

/* Mobile tweaks */
@media (max-width:768px){
  .homepage-products .products > li,
  .section--products .products > li,
  .products-block .products > li{ margin:0 8px 24px !important; }
}

/* ---------- FULL-BLEED SLIDER (kept, but safe) ---------- */
.loy-photo-slider{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  aspect-ratio:16/9;
  overflow:hidden;
}
@supports not (aspect-ratio:1){ .loy-photo-slider{ min-height:420px; } }
.loy-slide{ position:absolute; inset:0; opacity:0; animation:loyFade 12s infinite; }
.loy-slide:nth-child(1){ animation-delay:0s; }
.loy-slide:nth-child(2){ animation-delay:4s; }
.loy-slide:nth-child(3){ animation-delay:8s; }
.loy-slide:first-child{ opacity:1; }
@keyframes loyFade{ 0%{opacity:0} 8%{opacity:1} 33%{opacity:1} 41%{opacity:0} 100%{opacity:0} }
.loy-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:768px){ .loy-photo-slider{ aspect-ratio:4/5; } }
