.garlic-banner-slider{position:relative;overflow:hidden;background:#f4f0e7}
.garlic-banner-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease;pointer-events:none}
.garlic-banner-slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.garlic-banner-slide img{display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;aspect-ratio:auto!important}
.garlic-banner-arrow{position:absolute;z-index:8;top:50%;transform:translateY(-50%);width:42px;height:42px;border:1px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(0,86,45,.68);color:#fff;display:grid;place-items:center;font-size:27px;line-height:1;cursor:pointer;opacity:0;transition:opacity .2s,background .2s;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.garlic-banner-slider:hover .garlic-banner-arrow,.garlic-banner-arrow:focus-visible{opacity:1}.garlic-banner-arrow:hover{background:rgba(0,105,56,.9)}.garlic-banner-prev{left:18px}.garlic-banner-next{right:18px}
.garlic-banner-dots{position:absolute;z-index:8;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:8px;align-items:center;justify-content:center;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.28);backdrop-filter:blur(2px)}
.garlic-banner-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.72);box-shadow:0 0 0 1px rgba(0,85,43,.18);cursor:pointer;transition:width .2s,background .2s,border-radius .2s}.garlic-banner-dot.is-active{width:24px;border-radius:999px;background:#08713c}
.garlic-banner-slider[data-slide-count="1"] .garlic-banner-arrow,.garlic-banner-slider[data-slide-count="1"] .garlic-banner-dots{display:none!important}

/* Keep every confirmed page's original banner geometry. */
/* Home slider must stay in normal document flow.
   The confirmed desktop .hero uses height:auto; an absolute-only child would collapse it to 0px. */
.hero>.home-banner-slider{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1024/322}
.products-hero{min-height:0!important}.products-hero>.products-banner-slider{position:relative;width:100%;aspect-ratio:1882/590}
.about-hero-photo.garlic-banner-slider{position:absolute;inset:0;background-image:none!important;background-color:#f4efe5}
.factory-hero.factory-hero-exact{position:relative}.factory-hero-exact>.factory-banner-slider{position:relative;width:100%;aspect-ratio:1086/309}
.qc-hero-photo.garlic-banner-slider{position:absolute;right:0;top:0;width:65%;height:100%;display:block}
.cert-hero>.cert-banner-slider,.news-hero>.news-banner-slider,.contact-hero>.contact-banner-slider{position:absolute;inset:0;width:100%;height:100%}
.cert-hero::before,.news-hero::before,.contact-hero::before{z-index:1}.cert-hero-inner,.news-hero-inner,.contact-hero-inner{z-index:2}.about-hero-inner,.qc-hero-inner{z-index:2}

@media(max-width:860px){.garlic-banner-arrow{width:38px;height:38px;font-size:24px}.garlic-banner-prev{left:10px}.garlic-banner-next{right:10px}.garlic-banner-dots{bottom:9px}.qc-hero-photo.garlic-banner-slider{width:72%}}
@media(max-width:520px){.garlic-banner-arrow{display:none!important}.garlic-banner-dots{bottom:7px}.qc-hero-photo.garlic-banner-slider{width:100%}}
@media(prefers-reduced-motion:reduce){.garlic-banner-slide{transition:none!important}}


/* ===== v5.4.55 About Us banner slider height repair =====
   v5.4.54 converted the About hero from an in-flow image to an absolute-slide
   banner slider, but the new slider wrapper had no intrinsic height. Give it
   the approved 2048×682 hero ratio so one or multiple configured banners render. */
.about-v56-hero-media>.garlic-banner-slider,
.garlic-vb-about-hero .about-v56-hero-media>.garlic-banner-slider{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:2048/682!important;
  min-height:0!important;
  background:#f5f2e9!important;
}
.about-v56-hero-media>.garlic-banner-slider .garlic-banner-slide{position:absolute!important;inset:0!important}
.about-v56-hero-media>.garlic-banner-slider .garlic-banner-slide img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important}
@media(max-width:860px){
  .about-v56-hero-media>.garlic-banner-slider,
  .garlic-vb-about-hero .about-v56-hero-media>.garlic-banner-slider{aspect-ratio:2048/760!important}
}
@media(max-width:520px){
  .about-v56-hero-media>.garlic-banner-slider,
  .garlic-vb-about-hero .about-v56-hero-media>.garlic-banner-slider{aspect-ratio:16/7!important}
}


/* ===== v5.4.71 Home Banner per-slide centered copy ===== */
.garlic-banner-slide-copy{position:absolute;z-index:4;inset:0;display:flex;align-items:center;justify-content:center;padding:28px 7%;text-align:center;pointer-events:none}
.garlic-banner-slide-copy-inner{max-width:min(900px,86vw);padding:12px 22px;border-radius:8px;background:rgba(0,0,0,.24);color:#fff;font-size:clamp(22px,2.3vw,42px);font-weight:700;line-height:1.28;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.55);box-shadow:0 8px 28px rgba(0,0,0,.08)}
.home-banner-slider .garlic-banner-slide-copy{z-index:4}
@media(max-width:860px){.garlic-banner-slide-copy{padding:18px 8%}.garlic-banner-slide-copy-inner{padding:9px 14px;font-size:clamp(18px,4.5vw,30px)}}
@media(max-width:520px){.garlic-banner-slide-copy-inner{font-size:clamp(16px,5vw,24px);line-height:1.25}}