/* ==================== Variables (white-first theme) ==================== */
:root{
  --clr-primary:#d86a00;
  --clr-primary-strong:#c25f00;
  --clr-accent:#ffcc00;

  --clr-black:#0b0b0b;
  --clr-dark:#111213;
  --clr-text:#111111;
  --clr-text-muted:#6b6f76;

  --bg-page:#ffffff;     /* MOSTLY WHITE */
  --bg-light:#f7f8f9;
  --bg-soft:#fff7e6;     /* soft banner/section pop */
  --bg-muted:#eceff3;

  --container:1200px;
  --gutter:16px;

  /* Tighter spacing globally */
  --pad-section-m:36px;
  --pad-section-d:72px;

  --shadow-1:0 4px 12px rgba(0,0,0,.06);
  --shadow-2:0 10px 30px rgba(0,0,0,.12);

  --radius-diag:14px; /* top-right & bottom-left curved */
  --speed-quick:180ms;
  --speed:260ms;
  --speed-slow:360ms;
  --easing:cubic-bezier(.22,.61,.36,1);

  --header-h:100px;   /* slightly taller navbar to show brand */
  --banner-h:34px;    /* compact banner */
}

/* ==================== Base / Reset (mobile-first) ==================== */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; color:var(--clr-text); background:var(--bg-page);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; background:transparent; border:1px solid currentColor; }
button{ cursor:pointer; }
.no-js .dropdown,.no-js .drop-drawer{ display:none !important; }

/* Helpers */
.container{ width:min(100% - 2*var(--gutter), var(--container)); margin-inline:auto; }
.section{ padding: var(--pad-section-m) 0; background:var(--bg-page); }
.section-light{ background:var(--bg-page); }
.section-muted{ background:var(--bg-light); }
.section-dark{ background:var(--clr-black); color:#fff; }
.bg-soft{ background:var(--bg-soft); }
.display{ font-family:Poppins, Inter, sans-serif; font-weight:800; font-size:clamp(1.6rem,5.2vw,3rem); letter-spacing:.3px; line-height:1.15; }
.section-title{ font-family:Poppins, Inter, sans-serif; font-weight:800; font-size:clamp(1.3rem,3.6vw,2.2rem); display:flex; align-items:center; gap:.6rem; }
.muted{ color:var(--clr-text-muted); }
.small{ font-size:.92rem; }
.center{ text-align:center; }

/* tighter variants per section when needed */
.compact{ padding-top:24px; padding-bottom:32px; }
.compact-top{ padding-top:8px; } /* hero -> quick order almost touching */

/* Diagonal corners standard */
.diag{
  border-top-right-radius:var(--radius-diag);
  border-bottom-left-radius:var(--radius-diag);
  border-top-left-radius:0;
  border-bottom-right-radius:0;
}

/* Thin orange outline for premium highlights */
.outline-accent{ border:1px solid var(--clr-primary) !important; }

/* ==================== Splash ==================== */
#splash{ position:fixed; inset:0; background:#ffffff; display:grid; place-items:center; z-index:9999; opacity:1; transition: opacity 420ms var(--easing); }
#splash.hide{ opacity:0; pointer-events:none; }
.splash-inner{ text-align:center; padding:1rem 1.4rem; border:1px solid #e8e8e8; background:#fff; box-shadow:var(--shadow-1); }
.splash-inner .brand{ font-family:Poppins, Inter, sans-serif; font-weight:800; letter-spacing:.6px; margin:.8rem 0 1.2rem; color:var(--clr-text); }
.splash-inner .brand span{ color:var(--clr-primary); }
.loader-bar{ width:240px; height:4px; background:#f0f0f0; position:relative; overflow:hidden; margin-inline:auto; }
.loader-bar::after{ content:""; position:absolute; inset:0; width:40%; background:var(--clr-primary); animation:loadline 1.2s linear infinite; }
@keyframes loadline{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(250%);} }

/* ==================== Header (Solid & Fixed, bigger brand; smaller hamburger) ==================== */
.header{
  position:fixed; left:0; right:0; top:0; z-index:999;
  background:#ffffff; border-bottom:1px solid #e9ecef; box-shadow:var(--shadow-1);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem var(--gutter); }
.nav-logo{ display:flex; align-items:center; gap:.8rem; }
.brand-stack{ display:flex; flex-direction:column; line-height:1; }
.brand-stack .az{ font-family:Poppins, Inter, sans-serif; font-weight:800; font-size:1.7rem; letter-spacing:.9px; }
.brand-stack .sup{ font-family:Poppins, Inter, sans-serif; font-weight:800; font-size:1.2rem; color:var(--clr-primary); letter-spacing:.8px; }
.nav-links{ display:none; gap:1.1rem; align-items:center; }
.nav-link{ border:0; padding:.5rem .2rem; background:transparent; font-weight:700; }
.nav-link:hover{ color:var(--clr-primary); }
.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top:calc(100% + 8px); left:0; min-width:260px; background:#ffffff; border:1px solid #e9ecef;
  box-shadow:var(--shadow-2); display:grid; opacity:0; transform:translateY(8px); pointer-events:none;
  transition: opacity var(--speed-slow) var(--easing), transform var(--speed-slow) var(--easing);
}
.dropdown-item{ padding:.9rem 1rem; border-bottom:1px solid #eef1f4; display:flex; align-items:center; gap:.6rem; }
.dropdown-item:hover{ background:#fafafa; color:var(--clr-primary); }
.has-dropdown .nav-link[aria-expanded="true"] + .dropdown{ opacity:1; transform:translateY(0); pointer-events:auto; }

/* Smaller hamburger icon */
.hamburger{ width:40px; height:36px; border:2px solid var(--clr-text); display:grid; place-items:center; background:#fff; }
.hb-line{ width:20px; height:2px; background:var(--clr-text); display:block; position:relative; transition: transform var(--speed) var(--easing), opacity var(--speed) var(--easing); }
.hb-line + .hb-line{ margin-top:5px; }
.hamburger.is-active .hb-line:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.is-active .hb-line:nth-child(2){ opacity:0; }
.hamburger.is-active .hb-line:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media(min-width:992px){ .hamburger{ display:none; } .nav-links{ display:flex; } }

/* ==================== Top Drop Drawer (slow slide down) ==================== */
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; pointer-events:none; transition: opacity var(--speed) var(--easing); z-index:998; }
.overlay.is-open{ opacity:1; pointer-events:auto; }

.drop-drawer{
  position:fixed; left:0; right:0; top:var(--header-h); z-index:999;
  max-height:0; overflow:hidden; transition:max-height var(--speed-slow) var(--easing);
}
.drop-drawer.is-open{ max-height:80dvh; }
.drop-inner{ background:#ffffff; border-bottom:1px solid #e9ecef; box-shadow:var(--shadow-2); padding:1rem; display:grid; gap:.8rem; }
.drop-link{ display:block; padding:1rem; border:1px solid #eef1f4; background:#fff; font-weight:700; }
.drop-link:hover{ border-color:var(--clr-primary); }
.drop-socials{ display:flex; gap:.6rem; }
.drop-socials a{ border:1px solid #e9ecef; padding:.5rem .6rem; }
.drop-address{ color:var(--clr-text-muted); }

/* Hide banner when drawer open */
.drop-open .info-banner{ transform: translateY(-100%); opacity:0; pointer-events:none; }

/* ==================== Fixed Info Banner (full-bleed; no diagonal corners) ==================== */
.info-banner{
  position:fixed; left:0; right:0; top:calc(var(--header-h)); height:var(--banner-h); z-index:997;
  background:var(--bg-soft); color:#492e00; border-top:1px solid #fde2b6; border-bottom:1px solid #fde2b6;
  border-radius:0 !important; /* ensure square edges */
  transition: transform var(--speed) var(--easing), opacity var(--speed) var(--easing);
}
.ticker{ overflow:hidden; height:100%; }
.track{ display:flex; gap:2rem; padding:.3rem 0; white-space:nowrap; animation:marquee 32s linear infinite; will-change:transform; }
.track span{ display:inline-flex; align-items:center; gap:.5rem; }
@keyframes marquee{ 0%{ transform:translateX(0);} 100%{ transform:translateX(-50%);} }

/* ==================== Main offset under fixed header+banner ==================== */
#main{ padding-top: calc(var(--header-h) + var(--banner-h)); }

/* ==================== Carousel (taller & tight to banner and Quick Order) ==================== */
.hero{ position:relative; min-height:vh; }                 /* taller on mobile */
@media(min-width:992px){ .hero{ min-height:70vh; } }         /* normal on desktop */
.carousel{ position:relative; width:100%; overflow:hidden;} /* no extra margins around */
.slide{ position:absolute; inset:0; opacity:0; transition: opacity var(--speed-slow) var(--easing); z-index:0; }
.slide.is-active{ position:relative; opacity:1; z-index:1; }
.slide img{ width:100%; height:100%; object-fit:cover;}     /* no fixed aspect-ratio → can grow taller */
.slide-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45)); }
.slide-content{ position:absolute; inset:0; display:grid; align-content:end; padding: clamp(12px, 4.8vw, 44px); }
.lead{ max-width: 64ch; color:#f3f4f5; font-size: clamp(1rem, 3.4vw, 1.2rem); }
.cta{ margin-top:.7rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.hero.section{ padding-top:0; padding-bottom:0; }            /* eliminate bottom gap under hero */

.carousel-dots{ position:absolute; bottom:10px; inset-inline:0; display:flex; gap:.4rem; justify-content:center; z-index:3; }
.carousel-dots button{ width:12px; height:12px; border:2px solid #fff; background:transparent; }
.carousel-dots button[aria-current="true"]{ background:var(--clr-primary); border-color:var(--clr-primary); }

/* ==================== Buttons ==================== */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  border:2px solid var(--clr-primary);
  padding:.8rem 1.1rem; font-weight:700; background:#fff; color:#111;
  transition: transform var(--speed) var(--easing), background var(--speed) var(--easing), color var(--speed) var(--easing), border-color var(--speed) var(--easing), box-shadow var(--speed) var(--easing);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-1); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:var(--clr-primary); border-color:var(--clr-primary-strong); color:#fff; }
.btn-primary:hover{ background:var(--clr-primary-strong); }
.btn-ghost{ border-color:#fff; color:#111; background:#fff; }  /* readable ghost on white sections */
.section-dark .btn-ghost{ border-color:#fff; color:#fff; background:transparent; }
.btn.full{ width:100%; justify-content:center; }

/* ==================== Quick Order ==================== */
.qo-grid{ display:grid; gap:.8rem; }
.qo-form{ display:grid; gap:.6rem; grid-template-columns:1fr; }
.qo-form input,.qo-form select{
  border:1px solid #e1e6eb; padding:.7rem .9rem; background:#fff; color:#111; box-shadow:var(--shadow-1);
}
@media(min-width:768px){ .qo-form{ grid-template-columns:1fr 1fr 1fr auto; } }

/* ==================== Why A-Z (heading & paragraph styling) ==================== */
.grid-why{ display:grid; gap:1.1rem; }
.why-title{ position:relative; padding-left:14px; }
.why-title::before{
  content:""; position:absolute; left:0; top:12%; bottom:12%; width:4px; background:linear-gradient(180deg, var(--clr-primary), transparent);
  border-top-right-radius:var(--radius-diag); border-bottom-left-radius:var(--radius-diag);
}
.why-lead{
  padding:12px 14px; background:#fff; border:1px solid #edf0f3; box-shadow:var(--shadow-1);
  line-height:1.75; font-size:1.02rem;
}
.why-lead strong{ color:#000; }
.why-stats{ display:grid; gap:.7rem; grid-template-columns:repeat(2,1fr); }
.stat{ background:#fff; border:1px solid #edf0f3; padding:.9rem; display:flex; gap:.8rem; align-items:flex-start; box-shadow:var(--shadow-1); }
.stat i{ color:var(--clr-primary); margin-top:.2rem; }

/* ==================== Categories (3 rows; horizontal scroll) ==================== */
.cat-row{ margin-bottom:1.2rem; }
.cat-head{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:.5rem; }
.cat-head h3{ font-size:1.12rem; font-weight:800; font-family:Poppins, Inter, sans-serif; }
.view-all{ font-weight:700; color:var(--clr-primary); }
.row-scroll{
  display:flex; gap:.7rem; overflow-x:auto; padding-bottom:.3rem; scroll-snap-type:x proximity;
}
.prod-card{
  flex:0 0 auto; width: 270px; background:#fff; border:1px solid #edf0f3; box-shadow:var(--shadow-1);
  display:grid; grid-template-rows:auto auto auto; padding:.55rem; scroll-snap-align:start;
  transition: transform var(--speed) var(--easing), box-shadow var(--speed) var(--easing);
}
.prod-card img{ width:100%; height:156px; object-fit:cover; }
.prod-title{ display:flex; align-items:center; gap:.5rem; font-weight:800; margin-top:.45rem; }
.prod-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }

/* ==================== Process (white text on dark) ==================== */
.rail{ display:grid; grid-template-columns:1fr; gap:1rem; position:relative; }
.pro-rail .node .node-body{ background:#151515; border:1px solid #232323; color:#fff; }
.pro-rail .node .node-body i{ font-size:1.6rem; color:var(--clr-accent); margin-bottom:.4rem; display:block; }
.badge{ width:40px; height:40px; display:grid; place-items:center; background:#1b1b1b; color:#fff; border:1px solid var(--clr-primary); font-weight:800; }
.node-body{ padding:1rem; text-align:center; box-shadow:0 1px 0 rgba(255,255,255,.05); }
.connector{ display:none; }
@media(min-width:992px){
  .rail{ grid-template-columns: repeat(4, 1fr); align-items:start; }
  .connector{ display:block; align-self:center; height:2px; background:linear-gradient(90deg, transparent 0%, var(--clr-primary) 18%, var(--clr-primary) 82%, transparent 100%); position:relative; }
  .connector span{ position:absolute; top:-6px; width:12px; height:12px; background:var(--clr-primary); right:calc(50% - 6px); transform:rotate(45deg); }
}

/* ==================== KPIs ==================== */
.kpi-grid{ display:grid; gap:.9rem; grid-template-columns:repeat(2,1fr); }
@media(min-width:992px){ .kpi-grid{ grid-template-columns:repeat(4,1fr);} }
.kpi{ border:1px solid #232323; background:#121212; padding:1.1rem; text-align:center; box-shadow:0 1px 0 rgba(255,255,255,.04); }
.kpi-icon i{ font-size:1.8rem; color:var(--clr-accent); }
.kpi-number{ font-family:Poppins, Inter, sans-serif; font-weight:800; font-size:clamp(1.6rem, 6vw, 2.6rem); margin-top:.35rem; color:var(--clr-primary); }
.kpi-label{ color:#c7c9cc; margin-top:.15rem; }

/* ==================== Blog Scroller ==================== */
.blog-scroll{
  display:flex; gap:.7rem; padding:0 var(--gutter); overflow-x:auto; scroll-snap-type:x proximity;
}
.blog-card{
  flex:0 0 auto; width: 300px; background:#fff; border:1px solid #edf0f3; box-shadow:var(--shadow-1);
  display:grid; grid-template-rows:auto 1fr; scroll-snap-align:start;
}
.blog-card img{ width:100%; height:180px; object-fit:cover; }
.bc-body{ padding:.75rem; display:grid; gap:.35rem; }
.bc-body h3{ font-size:1rem; }

/* ==================== Quote / Map ==================== */
.grid-2{ display:grid; gap:1.1rem; }
@media(min-width:992px){ .grid-2{ grid-template-columns:1.1fr .9fr; gap:1.6rem; } }
.form .form-row{ display:grid; gap:.35rem; margin:.6rem 0; }
.form input,.form select,.form textarea{
  border:1px solid #e1e6eb; padding:.7rem .9rem; background:#fff; color:#111; outline:none; box-shadow:var(--shadow-1);
}
.form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--clr-primary); }
.map-wrap{ border:1px solid #e1e6eb; background:#fff; padding:.55rem; display:grid; gap:.55rem; box-shadow:var(--shadow-1); }
.map-embed iframe{ width:100%; height:360px; display:block; }
.map-side{ display:flex; align-items:center; justify-content:space-between; gap:.7rem; flex-wrap:wrap; }
.map-points p{ margin:.1rem 0; }

/* ==================== Accordion (fully closed by default) ==================== */
.accordion{ display:grid; gap:.6rem; }
.acc-item{ border:1px solid #e5e8ec; background:#fff; color:#111; }
.acc-header{
  width:100%; text-align:left; padding:1rem; border:0; display:flex; align-items:center; justify-content:space-between; font-weight:800;
}
.acc-panel{
  max-height:0; overflow:hidden; transition:max-height var(--speed) var(--easing), padding var(--speed) var(--easing);
  padding:0 1rem 0;  /* no bottom padding when collapsed */
}
.acc-panel .acc-content{ padding:0 0 1rem; }
.acc-header[aria-expanded="true"] + .acc-panel{ max-height:420px; padding:0 1rem 0.4rem; }
.acc-header i{ transition: transform var(--speed) var(--easing); }
.acc-header[aria-expanded="true"] i{ transform: rotate(45deg); }
.acc-item:has(.acc-header[aria-expanded="true"]){ border-color:var(--clr-primary); }

/* ==================== Contact Summary ==================== */
.contact-grid{ display:grid; gap:.9rem; padding:1rem; grid-template-columns:repeat(1,1fr); align-items:center; background:#121212; }
.contact-grid .c-block{ border:1px solid #232323; background:#0f0f0f; padding:.85rem; color:#fff; }
.contact-grid .center-btn{ display:flex; justify-content:center; }
@media(min-width:768px){ .contact-grid{ grid-template-columns:repeat(5,1fr); } }

/* ==================== Footer ==================== */
.footer{ background:#0a0a0a; color:#d4d7dc; border-top:1px solid #171717; }
.footer-bg{ background:linear-gradient(rgba(0,0,0,.88), rgba(0,0,0,.88)), url('../assets/backgrounds/footer-texture.png') center/cover no-repeat; }
.footer-grid{ display:grid; gap:1.1rem; padding:1.6rem 0; grid-template-columns:repeat(1,1fr); }
@media(min-width:992px){ .footer-grid{ grid-template-columns:1.1fr 1fr 1.2fr 1.2fr; } }
.footer-logo{ display:flex; align-items:center; gap:.6rem; font-weight:800; font-family:Poppins, Inter, sans-serif; }
.f-links ul{ display:grid; gap:.35rem; }
.f-products .cols{ columns:2; column-gap:2rem; }
.f-socials{ display:flex; gap:.6rem; margin-top:.8rem; }
.f-socials a{ border:1px solid #1a1c1f; padding:.5rem; }
.news-form{ display:flex; gap:.4rem; }
.news-form input{ flex:1; border:1px solid #1a1c1f; padding:.72rem .9rem; background:#0f1114; color:#fff; }
.news-form button{ white-space:nowrap; }
.copyright{ border-top:1px solid #1a1c1f; text-align:center; padding:1rem; font-size:.95rem; color:#9aa0a6; }

/* ==================== Cookie Bar ==================== */
.cookie{ position:fixed; left:0; right:0; bottom:0; background:#ffffff; border-top:1px solid #e9ecef; transform:translateY(100%); transition: transform var(--speed) var(--easing); z-index:995; }
.cookie.is-visible{ transform:translateY(0); }
.cookie-inner{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.8rem var(--gutter); }
.cookie-actions{ display:flex; gap:.6rem; }

/* ==================== To Top ==================== */
.to-top{ position:fixed; right:12px; bottom:12px; background:#ffffff; border:1px solid #e9ecef; padding:.6rem .8rem; box-shadow:var(--shadow-1); opacity:0; pointer-events:none; transition: opacity var(--speed) var(--easing), transform var(--speed) var(--easing); z-index:994; }
.to-top.is-visible{ opacity:1; pointer-events:auto; }
.to-top:hover{ transform:translateY(-2px); }

/* ==================== WhatsApp Chatroom ==================== */
.wa-fab{ position:fixed; right:12px; bottom:64px; border:1px solid var(--clr-primary-strong); background:var(--clr-primary); padding:.8rem 1rem; box-shadow:var(--shadow-2); color:#fff; z-index:994; }
.wa-widget{
  position:fixed; right:12px; bottom:112px; width:min(96vw, 360px); background:#f7f7f7; color:#111; border:1px solid #dedede; box-shadow:var(--shadow-2);
  display:grid; grid-template-rows:auto 1fr auto auto; transform:translateY(16px); opacity:0; pointer-events:none; transition: opacity var(--speed) var(--easing), transform var(--speed) var(--easing); z-index:994;
}
.wa-widget.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }

/* Header: title on first line, ".online" second line, normal close button */
.wa-head{ position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:.7rem .8rem; background:#111; color:#fff; border-bottom:1px solid #222; }
.wa-title{ display:flex; flex-direction:column; align-items:center; font-weight:800; }
.online-text{ opacity:.9; font-size:.85rem; }
.wa-close{ position:absolute; right:8px; top:8px; border:1px solid #2b2b2b; background:#1a1a1a; color:#fff; padding:.35rem .55rem; }
.wa-close:hover{ background:#242424; }

.wa-body{ padding:.8rem; display:flex; flex-direction:column; gap:.4rem; max-height:240px; overflow:auto; background:#f1f2f3; }
.bubble{ max-width:80%; padding:.6rem .7rem; border:1px solid #e1e1e1; background:#fff; color:#111; box-shadow:0 1px 0 rgba(0,0,0,.06); }
.bubble.bot{ align-self:flex-start; }
.bubble.me{ align-self:flex-end; background:#25D366; border-color:#02ff5e; color:#111; } /* WhatsApp green */
.wa-quick{ display:flex; flex-wrap:wrap; gap:.4rem; padding:.4rem .8rem; background:#fafafa; border-top:1px solid #e5e5e5; }
.chip{ background:#fff; border:1px solid #ddd; padding:.4rem .6rem; font-weight:600; }
.wa-input{ display:flex; gap:.4rem; padding:.6rem .8rem; background:#fff; border-top:1px solid #e5e5e5; }
.wa-input input{ flex:1; border:1px solid #ddd; background:#fff; color:#111; padding:.6rem .7rem; }

/* ==================== IO Reveals ==================== */
.io-right{ opacity:0; transform:translateX(16px); transition: opacity var(--speed-slow) var(--easing), transform var(--speed-slow) var(--easing); }
.io-left{ opacity:0; transform:translateX(-16px); transition: opacity var(--speed-slow) var(--easing), transform var(--speed-slow) var(--easing); }
.io-up{ opacity:0; transform:translateY(12px); transition: opacity var(--speed-slow) var(--easing), transform var(--speed-slow) var(--easing); }
.io-show{ opacity:1 !important; transform:none !important; }




/* =========================================================
   MOBILE HORIZONTAL SCROLLBAR HARDENING (drop-in patch)
   Paste at the END of styles.css so it overrides earlier rules
   ========================================================= */

/* 1) Global page lock */
html, body {
  overflow-x: hidden !important;
  width: 100%;
}

/* 2) Honor the box model everywhere */
*, *::before, *::after { box-sizing: border-box; }

/* 3) Containers: never exceed viewport width */
.container {
  width: 100% !important;                /* avoids 100vw/min()/calc rounding issues */
  max-width: var(--container);
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* 4) Full-bleed/fixed sections should not push the page width */
.header,
.info-banner,
.drop-drawer,
.overlay,
.footer,
.footer-bg,
.hero,
.carousel {
  max-width: 100% !important;
  overflow-x: hidden;
}

/* 5) Media should never overflow horizontally */
img, svg, video, canvas, iframe {
  max-width: 100% !important;
  height: auto;
  display: block;
}

/* 6) Long strings/URLs won’t create overflow */
:where(h1,h2,h3,h4,p,li,small,a,button,code) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 7) Horizontal scrollers are self-contained (don’t expand the page) */
.row-scroll,
.blog-scroll,
.ticker,
.info-banner .track {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.info-banner { overflow: hidden; } /* contain the moving track/ticker completely */

/* 8) Chat widget: safe width on tiny screens (borders included) */
.wa-widget {
  width: min(calc(100% - 24px), 360px) !important;
  max-width: calc(100% - 24px) !important;
}

/* 9) Avoid subpixel leaks from transforms/animations */
.carousel,
.slide,
.slide-content,
.dropdown,
.drop-inner {
  transform: translateZ(0);
  will-change: transform;
}

/* 10) Extra safety: iOS safe-area insets won’t push content horizontally */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}

/* 11) Optional: if you used any element with explicit 100vw, clamp it here */
[class*="full-bleed"], [data-full-bleed] {
  width: 100% !important;       /* replace 100vw */
  max-width: 100% !important;
  overflow-x: hidden;
}