/* ============================================================
   CHEMSHOPEE — SHARED DESIGN SYSTEM
   Brand palette taken directly from the ChemShopee logo:
   leaf green · sky blue · deep navy · flask orange · sparkle yellow
   ============================================================ */

:root{
  --green:#3fa51a;
  --green-lt:#5fd633;
  --green-dk:#2b7f10;
  --mint:#eef8ea;
  --mint-2:#e0f2d9;

  --blue:#2e8fd6;
  --blue-lt:#5cb3ef;
  --blue-dk:#1a5f96;
  --sky:#eaf4fc;

  --navy:#16335c;
  --navy-dk:#0c1f3d;

  --orange:#f7941d;
  --orange-lt:#ffb35c;
  --yellow:#ffc83d;
  --cream:#fff6e8;

  --ink:#12243d;
  --body:#5a6f88;
  --line:#e8eef4;
  --bg:#f7fbf9;
  --white:#fff;

  --g-brand:linear-gradient(115deg,#3fa51a 0%,#2e8fd6 100%);
  --g-green:linear-gradient(135deg,#5fd633 0%,#3fa51a 100%);
  --g-navy:linear-gradient(140deg,#16335c 0%,#0c1f3d 100%);
  --g-warm:linear-gradient(135deg,#ffc83d 0%,#f7941d 100%);

  --sh-xs:0 2px 8px rgba(18,36,61,.05);
  --sh-sm:0 6px 20px rgba(18,36,61,.07);
  --sh-md:0 14px 38px rgba(18,36,61,.11);
  --sh-lg:0 30px 70px rgba(18,36,61,.18);
  --sh-green:0 12px 28px rgba(63,165,26,.32);

  --r-sm:12px;
  --r:18px;
  --r-lg:26px;
  --r-xl:34px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);background:var(--white);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;border:none;}
ul{list-style:none;}
.wrap{max-width:1220px;margin:0 auto;padding:0 22px;}
section{padding:86px 0;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:999px;font-weight:700;font-size:14.5px;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .2s,color .2s,border-color .2s;
  white-space:nowrap;
}
.btn-green{background:var(--g-green);color:#fff;box-shadow:var(--sh-green);}
.btn-green:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(63,165,26,.42);}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:var(--navy-dk);transform:translateY(-2px);}
.btn-line{background:#fff;color:var(--navy);border:1.6px solid #dde6ef;}
.btn-line:hover{border-color:var(--green);color:var(--green-dk);background:var(--mint);transform:translateY(-2px);}
.btn-white{background:#fff;color:var(--navy);}
.btn-white:hover{transform:translateY(-2px);box-shadow:var(--sh-md);}
.btn-sm{padding:10px 18px;font-size:13px;}
.btn-lg{padding:16px 34px;font-size:15.5px;}

/* ---------------- section headings ---------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--mint);color:var(--green-dk);
  font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  padding:7px 15px;border-radius:999px;margin-bottom:16px;
}
.head{text-align:center;max-width:660px;margin:0 auto 52px;}
.head h2{font-size:clamp(27px,3.4vw,38px);font-weight:800;letter-spacing:-.8px;line-height:1.2;margin-bottom:14px;}
.head p{color:var(--body);font-size:16px;}
.head .hl{color:var(--green);}

/* ============================================================
   UTILITY BAR
   ============================================================ */
.util{background:var(--navy-dk);color:#b9cbe0;font-size:12.5px;}
.util .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:9px;padding-bottom:9px;}
.util-l{display:flex;gap:22px;flex-wrap:wrap;}
.util-l span{display:flex;align-items:center;gap:6px;}
.util-r{display:flex;gap:20px;align-items:center;}
.util a:hover{color:var(--green-lt);}
.util b{color:#fff;}

/* ============================================================
   HEADER
   ============================================================ */
header{
  position:sticky;top:0;z-index:200;background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.hd{display:flex;align-items:center;gap:24px;padding:12px 0;}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;}
.brand img{height:50px;width:auto;border-radius:13px;}
.brand-tx{font-size:22px;font-weight:800;letter-spacing:-.5px;line-height:1.05;}
.brand-tx .a{color:var(--navy);}
.brand-tx .b{color:var(--green);}
.brand-tx small{display:block;font-size:9.5px;font-weight:700;letter-spacing:1.8px;color:var(--body);text-transform:uppercase;}

.hsearch{flex:1;display:flex;align-items:center;background:#fff;border:1.8px solid var(--line);border-radius:999px;padding:4px 4px 4px 6px;transition:border-color .2s,box-shadow .2s;max-width:560px;}
.hsearch:focus-within{border-color:var(--green);box-shadow:0 0 0 4px rgba(63,165,26,.1);}
.hsearch select{
  border:none;background:transparent;font-size:13.5px;font-weight:700;color:var(--navy);
  padding:9px 10px;outline:none;cursor:pointer;border-right:1.5px solid var(--line);max-width:150px;
}
.hsearch input{flex:1;border:none;outline:none;padding:10px 14px;font-size:14px;background:transparent;color:var(--ink);}
.hsearch input::placeholder{color:#9bacc0;}
.hsearch button{background:var(--g-green);color:#fff;border-radius:999px;padding:11px 22px;font-weight:700;font-size:14px;display:flex;align-items:center;gap:7px;}

.hd-act{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0;}
.icon-btn{
  position:relative;width:44px;height:44px;border-radius:14px;background:var(--mint);
  display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;
}
.icon-btn:hover{background:var(--mint-2);transform:translateY(-2px);}
.icon-btn .cnt{
  position:absolute;top:-5px;right:-5px;background:var(--orange);color:#fff;
  font-size:10.5px;font-weight:800;min-width:19px;height:19px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;border:2px solid #fff;padding:0 4px;
}

.navstrip{border-top:1px solid var(--line);background:#fff;}
.navstrip .wrap{display:flex;align-items:center;gap:4px;overflow-x:auto;}
.navstrip a{
  font-size:14px;font-weight:600;color:var(--navy);padding:12px 15px;border-radius:10px;
  white-space:nowrap;transition:color .2s,background .2s;
}
.navstrip a:hover{color:var(--green-dk);background:var(--mint);}
.navstrip a.on{color:var(--green-dk);background:var(--mint);font-weight:800;}
.navstrip a.all{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--green-dk);}
.navstrip .push{margin-left:auto;color:var(--orange);font-weight:800;display:flex;align-items:center;gap:7px;}

/* ============================================================
   HOME HERO
   ============================================================ */
.hero{
  position:relative;overflow:hidden;padding:64px 0 78px;
  background:
    radial-gradient(1100px 520px at 88% 6%, rgba(92,179,239,.22), transparent 62%),
    radial-gradient(900px 480px at 4% 92%, rgba(95,214,51,.20), transparent 60%),
    linear-gradient(180deg,#fbfefa 0%,#f2f9f5 100%);
}
.hero:before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(22,51,92,.09) 1px, transparent 0);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 72%);
  mask-image:linear-gradient(180deg,#000,transparent 72%);
}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.04fr .96fr;gap:48px;align-items:center;}

.trustpill{
  display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  padding:7px 8px 7px 7px;border-radius:999px;box-shadow:var(--sh-xs);font-size:13px;font-weight:600;color:var(--navy);margin-bottom:22px;
}
.trustpill .pin{background:var(--g-green);color:#fff;font-size:11px;font-weight:800;padding:5px 12px;border-radius:999px;letter-spacing:.4px;}
.trustpill .av{display:flex;}
.trustpill .av i{
  width:24px;height:24px;border-radius:50%;border:2px solid #fff;margin-left:-8px;
  display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:9.5px;font-weight:800;color:#fff;
}
.trustpill .av i:first-child{margin-left:0;}

.hero h1{font-size:clamp(34px,4.7vw,56px);font-weight:800;letter-spacing:-1.6px;line-height:1.08;margin-bottom:18px;}
.hero h1 .g{background:linear-gradient(100deg,var(--green) 0%,var(--blue) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero h1 .u{position:relative;white-space:nowrap;}
.hero h1 .u:after{content:"";position:absolute;left:0;right:0;bottom:4px;height:10px;border-radius:6px;background:rgba(255,200,61,.55);z-index:-1;}
.hero .lede{font-size:17px;color:var(--body);max-width:520px;margin-bottom:26px;}
.hero .lede b{color:var(--ink);font-weight:700;}

.hsrch-lg{background:#fff;border-radius:var(--r-lg);padding:9px;box-shadow:var(--sh-md);display:flex;gap:8px;align-items:center;max-width:540px;margin-bottom:14px;}
.hsrch-lg input{flex:1;border:none;outline:none;font-size:15px;padding:14px 8px 14px 16px;background:transparent;}
.hsrch-lg input::placeholder{color:#9bacc0;}
.hsrch-lg button{background:var(--g-green);color:#fff;border-radius:18px;padding:15px 26px;font-weight:800;font-size:14.5px;display:flex;align-items:center;gap:8px;box-shadow:var(--sh-green);}
.hsrch-lg button:hover{transform:translateY(-1px);}
.pops{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:30px;font-size:13px;color:var(--body);}
.pops b{color:var(--navy);font-weight:700;}
.pops a{background:#fff;border:1px solid var(--line);padding:6px 13px;border-radius:999px;font-weight:600;color:var(--navy);transition:all .2s;}
.pops a:hover{border-color:var(--green);color:var(--green-dk);background:var(--mint);}

.hstats{display:flex;gap:30px;flex-wrap:wrap;}
.hstats div{position:relative;padding-left:14px;}
.hstats div:before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px;border-radius:3px;background:var(--g-green);}
.hstats b{display:block;font-size:24px;font-weight:800;letter-spacing:-.6px;color:var(--navy);}
.hstats span{font-size:12.5px;color:var(--body);}

.hv{position:relative;min-height:470px;display:flex;align-items:center;justify-content:center;}
.hv-glow{position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(95,214,51,.3),transparent 68%);filter:blur(28px);}
.hv-art{position:relative;z-index:2;width:100%;max-width:400px;}

.fcard{position:absolute;z-index:5;background:#fff;border-radius:var(--r);box-shadow:var(--sh-lg);padding:13px 15px;border:1px solid rgba(232,238,244,.9);}
.fcard.f1{top:2%;right:-14px;width:212px;animation:bob 6s ease-in-out infinite;}
.fcard.f2{bottom:16%;left:-24px;width:232px;animation:bob 6s ease-in-out .9s infinite;}
.fcard.f3{bottom:-6px;right:8%;width:186px;animation:bob 6s ease-in-out 1.8s infinite;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.fc-top{display:flex;align-items:center;gap:9px;margin-bottom:8px;}
.fc-ic{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.fc-t{font-size:12.5px;font-weight:800;color:var(--navy);line-height:1.25;}
.fc-s{font-size:10.5px;color:var(--body);font-weight:600;}
.fc-price{font-size:16px;font-weight:800;color:var(--navy);letter-spacing:-.4px;}
.fc-price small{font-size:11px;font-weight:600;color:var(--body);}
.fc-bar{height:6px;border-radius:99px;background:var(--mint);overflow:hidden;margin-top:8px;}
.fc-bar i{display:block;height:100%;border-radius:99px;background:var(--g-green);}
.fc-chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:999px;}

/* ============================================================
   INNER PAGE BANNER + BREADCRUMB
   ============================================================ */
.pbanner{
  position:relative;overflow:hidden;padding:52px 0 56px;
  background:
    radial-gradient(800px 400px at 85% 10%, rgba(92,179,239,.20), transparent 62%),
    radial-gradient(700px 380px at 5% 95%, rgba(95,214,51,.18), transparent 60%),
    linear-gradient(180deg,#fbfefa 0%,#f2f9f5 100%);
  border-bottom:1px solid var(--line);
}
.pbanner:before{
  content:"";position:absolute;inset:0;opacity:.45;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(22,51,92,.09) 1px, transparent 0);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);
  mask-image:linear-gradient(180deg,#000,transparent 80%);
}
.pbanner .wrap{position:relative;z-index:2;}
.crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--body);margin-bottom:14px;flex-wrap:wrap;}
.crumb a{font-weight:600;color:var(--navy);}
.crumb a:hover{color:var(--green-dk);}
.crumb span{color:#a9b8c8;}
.crumb b{color:var(--green-dk);font-weight:700;}
.pbanner h1{font-size:clamp(29px,4vw,44px);font-weight:800;letter-spacing:-1.2px;line-height:1.12;margin-bottom:12px;}
.pbanner h1 .hl{color:var(--green);}
.pbanner p{font-size:16px;color:var(--body);max-width:640px;}
.pb-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:20px;font-size:13px;color:var(--body);}
.pb-meta span{display:flex;align-items:center;gap:7px;}
.pb-meta b{color:var(--navy);}

/* ============================================================
   TRUST BAR
   ============================================================ */
.tbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;padding:22px 0;}
.tbar .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.tb{display:flex;align-items:center;gap:12px;}
.tb .ic{width:42px;height:42px;border-radius:13px;background:var(--mint);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tb b{display:block;font-size:13.5px;font-weight:800;color:var(--navy);line-height:1.25;}
.tb span{font-size:11.5px;color:var(--body);}

/* ============================================================
   CATEGORY CARDS
   ============================================================ */
.cats{padding-top:76px;padding-bottom:20px;}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.cat{
  position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 22px;box-shadow:var(--sh-xs);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;display:block;
}
.cat:hover{transform:translateY(-7px);box-shadow:var(--sh-md);border-color:transparent;}
.cat:after{content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;background:var(--mint);opacity:.75;transition:transform .35s;}
.cat:hover:after{transform:scale(1.35);}
.cat-ic{position:relative;z-index:2;width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.cat h4{position:relative;z-index:2;font-size:16px;font-weight:800;color:var(--navy);margin-bottom:5px;letter-spacing:-.2px;}
.cat p{position:relative;z-index:2;font-size:12.5px;color:var(--body);margin-bottom:14px;min-height:36px;}
.cat .go{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line);}
.cat .go .n{font-size:12px;font-weight:800;color:var(--green-dk);}
.cat .go .ar{width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;transition:background .25s,transform .25s;}
.cat:hover .go .ar{background:var(--green);transform:translateX(3px);}

/* ============================================================
   PRODUCTS
   ============================================================ */
.prods{background:linear-gradient(180deg,#fff 0%,var(--bg) 100%);}
.ptabs{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-bottom:38px;}
.ptab{padding:11px 22px;border-radius:999px;font-size:13.5px;font-weight:700;border:1.6px solid var(--line);color:var(--body);background:#fff;transition:all .22s;}
.ptab:hover{border-color:var(--green);color:var(--green-dk);}
.ptab.on{background:var(--g-navy);border-color:transparent;color:#fff;box-shadow:var(--sh-sm);}

.p-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.p-grid.cols3{grid-template-columns:repeat(3,1fr);}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-xs);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;display:flex;flex-direction:column;}
.pcard:hover{transform:translateY(-7px);box-shadow:var(--sh-md);}
.p-med{position:relative;height:168px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.p-med svg{transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.pcard:hover .p-med svg{transform:scale(1.09) rotate(-3deg);}
.p-tag{position:absolute;top:13px;left:13px;font-size:10px;font-weight:800;letter-spacing:.6px;padding:5px 11px;border-radius:999px;color:#fff;text-transform:uppercase;}
.t-new{background:var(--g-green);}
.t-hot{background:var(--g-warm);}
.t-best{background:linear-gradient(135deg,var(--blue-lt),var(--blue));}
.t-out{background:#9fb0c2;}
.p-wish{position:absolute;top:11px;right:11px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-xs);transition:all .2s;}
.p-wish:hover{background:#fff;transform:scale(1.1);}
.p-body{padding:16px 17px 17px;display:flex;flex-direction:column;flex:1;}
.p-cas{font-size:10.5px;font-weight:800;letter-spacing:.7px;color:var(--blue);text-transform:uppercase;margin-bottom:5px;}
.p-body h4{font-size:15px;font-weight:800;color:var(--navy);line-height:1.3;margin-bottom:6px;letter-spacing:-.2px;}
.p-spec{font-size:12px;color:var(--body);margin-bottom:11px;}
.p-rate{display:flex;align-items:center;gap:6px;margin-bottom:11px;}
.p-rate .st{color:#ffb020;font-size:12px;letter-spacing:-.5px;}
.p-rate span{font-size:11.5px;color:var(--body);font-weight:600;}
.p-pr{display:flex;align-items:baseline;gap:7px;margin-bottom:3px;flex-wrap:wrap;}
.p-pr .now{font-size:20px;font-weight:800;color:var(--navy);letter-spacing:-.7px;}
.p-pr .was{font-size:12.5px;color:#9bacc0;text-decoration:line-through;}
.p-pr .off{font-size:11px;font-weight:800;color:var(--green-dk);background:var(--mint);padding:3px 8px;border-radius:6px;}
.p-moq{font-size:11.5px;color:var(--body);margin-bottom:13px;}
.p-vend{display:flex;align-items:center;gap:9px;padding:10px 0;margin-bottom:13px;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);}
.p-vend .vav{width:28px;height:28px;border-radius:9px;background:var(--g-navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;}
.p-vend .vnm{font-size:12px;font-weight:800;color:var(--navy);line-height:1.2;display:flex;align-items:center;gap:4px;}
.p-vend .vsub{font-size:10.5px;color:var(--body);}
.p-foot{margin-top:auto;display:flex;gap:8px;}
.p-foot .btn{flex:1;padding:12px;font-size:13px;}
.p-ship{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--green-dk);margin-bottom:11px;}
.p-out .p-med{filter:grayscale(1) opacity(.6);}
.p-more{text-align:center;margin-top:46px;}

/* ============================================================
   SHOP PAGE — sidebar + toolbar + pagination
   ============================================================ */
.shop-layout{display:grid;grid-template-columns:268px 1fr;gap:32px;align-items:start;}
.cs-filters-panel{position:sticky;top:150px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-xs);}
.cs-filters-panel h3{font-size:15px;font-weight:800;color:var(--navy);margin-bottom:4px;display:flex;align-items:center;justify-content:space-between;}
.cs-filters-panel h3 a{font-size:11.5px;font-weight:700;color:var(--green-dk);}
.fgroup{padding:18px 0;border-bottom:1px solid var(--line);}
.fgroup:last-child{border-bottom:none;padding-bottom:0;}
.fgroup h4{font-size:12px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--navy);margin-bottom:13px;}
.fopt{display:flex;align-items:center;gap:10px;margin-bottom:11px;font-size:13.5px;color:var(--body);cursor:pointer;transition:color .2s;}
.fopt:hover{color:var(--navy);}
.fopt input{width:17px;height:17px;accent-color:var(--green);cursor:pointer;flex-shrink:0;}
.fopt .ct{margin-left:auto;font-size:11px;color:#9bacc0;font-weight:700;}
.frange{display:flex;gap:8px;align-items:center;}
.frange input{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;font-size:13px;outline:none;}
.frange input:focus{border-color:var(--green);}
.frange span{color:#9bacc0;font-size:13px;}
.fchips{display:flex;flex-wrap:wrap;gap:7px;}
.fchip{font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;border:1.4px solid var(--line);color:var(--body);background:#fff;transition:all .2s;}
.fchip:hover,.fchip.on{border-color:var(--green);background:var(--mint);color:var(--green-dk);}

.shop-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;margin-bottom:22px;box-shadow:var(--sh-xs);
}
.shop-bar .cnt{font-size:13.5px;color:var(--body);}
.shop-bar .cnt b{color:var(--navy);font-weight:800;}
.shop-bar .tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.shop-bar select{border:1.5px solid var(--line);border-radius:999px;padding:9px 15px;font-size:13px;font-weight:700;color:var(--navy);outline:none;cursor:pointer;background:#fff;}
.shop-bar select:focus{border-color:var(--green);}
.applied{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.applied .ac{
  display:inline-flex;align-items:center;gap:7px;background:var(--mint);color:var(--green-dk);
  font-size:12px;font-weight:700;padding:7px 13px;border-radius:999px;
}
.applied .ac b{cursor:pointer;font-size:14px;line-height:1;}

.cartbar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:var(--mint);border:1px solid rgba(63,165,26,.28);border-radius:var(--r-lg);
  padding:18px 24px;margin-top:34px;
}
.cartbar .cb-l{display:flex;align-items:center;gap:14px;}
.cartbar .cb-ic{
  width:46px;height:46px;border-radius:15px;background:var(--g-green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;box-shadow:var(--sh-green);
}
.cartbar b{display:block;font-size:15.5px;font-weight:800;color:var(--navy);line-height:1.3;}
.cartbar .cb-l span span{font-size:12.5px;color:var(--body);}
.cartbar .cb-r{display:flex;gap:10px;flex-wrap:wrap;}

.pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:46px;flex-wrap:wrap;}
.pager a{
  min-width:42px;height:42px;padding:0 14px;border-radius:13px;border:1.5px solid var(--line);background:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--navy);transition:all .2s;
}
.pager a:hover{border-color:var(--green);color:var(--green-dk);background:var(--mint);}
.pager a.on{background:var(--g-navy);color:#fff;border-color:transparent;}
.pager a.off{opacity:.4;pointer-events:none;}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how{background:#fff;}
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative;}
.flow:before{content:"";position:absolute;top:34px;left:10%;right:10%;height:3px;border-radius:3px;z-index:0;background:repeating-linear-gradient(90deg,#d9e6f0 0 9px,transparent 9px 18px);}
.step{position:relative;z-index:2;text-align:center;padding:0 8px;}
.step .no{
  width:68px;height:68px;border-radius:22px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:800;color:#fff;position:relative;background:var(--g-navy);box-shadow:var(--sh-md);transition:transform .3s;
}
.step:hover .no{transform:translateY(-6px) rotate(-6deg);}
.step:nth-child(even) .no{background:var(--g-green);box-shadow:var(--sh-green);}
.step .no em{position:absolute;bottom:-7px;right:-7px;width:26px;height:26px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:13px;box-shadow:var(--sh-xs);}
.step h4{font-size:15.5px;font-weight:800;color:var(--navy);margin-bottom:7px;letter-spacing:-.2px;}
.step p{font-size:13px;color:var(--body);}
.flow-note{margin-top:44px;background:var(--mint);border:1px dashed rgba(63,165,26,.45);border-radius:var(--r);padding:18px 24px;display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap;text-align:center;}
.flow-note b{color:var(--green-dk);font-weight:800;}
.flow-note span{font-size:14px;color:var(--ink);}

/* ============================================================
   WHY / FEATURE CARDS (dark)
   ============================================================ */
.why{background:var(--g-navy);color:#fff;position:relative;overflow:hidden;}
.why:before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;top:-230px;left:-170px;background:radial-gradient(circle,rgba(63,165,26,.22),transparent 68%);}
.why:after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;bottom:-200px;right:-140px;background:radial-gradient(circle,rgba(46,143,214,.22),transparent 68%);}
.why .wrap{position:relative;z-index:2;}
.why .eyebrow{background:rgba(95,214,51,.16);color:var(--green-lt);}
.why .head h2{color:#fff;}
.why .head p{color:#adc0d6;}
.w-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.wc{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);border-radius:var(--r-lg);padding:28px;transition:transform .3s,background .3s,border-color .3s;}
.wc:hover{transform:translateY(-7px);background:rgba(255,255,255,.1);border-color:rgba(95,214,51,.4);}
.wc .ic{width:50px;height:50px;border-radius:16px;background:var(--g-green);display:flex;align-items:center;justify-content:center;margin-bottom:17px;box-shadow:var(--sh-green);}
.wc h4{font-size:16.5px;font-weight:800;margin-bottom:8px;letter-spacing:-.2px;}
.wc p{font-size:13.5px;color:#b3c5d9;}

/* ============================================================
   VENDOR CARDS
   ============================================================ */
.v-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.vc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 22px;text-align:center;box-shadow:var(--sh-xs);transition:transform .3s,box-shadow .3s;}
.vc:hover{transform:translateY(-7px);box-shadow:var(--sh-md);}
.vc .lg{width:64px;height:64px;border-radius:20px;margin:0 auto 15px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:#fff;}
.vc h4{font-size:15.5px;font-weight:800;color:var(--navy);margin-bottom:4px;display:flex;align-items:center;justify-content:center;gap:5px;}
.vc .loc{font-size:12px;color:var(--body);margin-bottom:12px;}
.vc .rt{display:inline-flex;align-items:center;gap:6px;background:var(--mint);padding:6px 13px;border-radius:999px;margin-bottom:14px;}
.vc .rt b{font-size:13px;font-weight:800;color:var(--green-dk);}
.vc .rt span{font-size:11px;color:var(--body);}
.vc .mt{display:flex;justify-content:space-around;padding-top:14px;border-top:1px solid var(--line);}
.vc .mt div b{display:block;font-size:15px;font-weight:800;color:var(--navy);}
.vc .mt div span{font-size:10.5px;color:var(--body);}

/* ============================================================
   SPLIT CTA
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.sc{border-radius:var(--r-xl);padding:44px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--sh-md);transition:transform .3s;}
.sc:hover{transform:translateY(-7px);}
.sc:before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;top:-110px;right:-90px;background:rgba(255,255,255,.13);}
.sc>*{position:relative;z-index:2;}
.sc.buy{background:linear-gradient(140deg,#2e8fd6,#1a5f96);}
.sc.sell{background:linear-gradient(140deg,#5fd633,#2b7f10);}
.sc .tag{display:inline-block;background:rgba(255,255,255,.2);font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:6px 14px;border-radius:999px;margin-bottom:15px;}
.sc h3{font-size:27px;font-weight:800;margin-bottom:10px;letter-spacing:-.7px;}
.sc>p{font-size:14.5px;opacity:.94;margin-bottom:22px;}
.sc ul{margin-bottom:28px;}
.sc li{font-size:14px;margin-bottom:11px;padding-left:29px;position:relative;}
.sc li:before{content:"✓";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;}

/* ============================================================
   STATS
   ============================================================ */
.stats{background:var(--g-brand);color:#fff;padding:64px 0;}
.s-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;}
.s-grid b{display:block;font-size:clamp(30px,4vw,42px);font-weight:800;letter-spacing:-1.4px;line-height:1.1;}
.s-grid span{font-size:13.5px;opacity:.93;}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.tc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;position:relative;box-shadow:var(--sh-xs);transition:transform .3s,box-shadow .3s;}
.tc:hover{transform:translateY(-6px);box-shadow:var(--sh-md);}
.tc .q{position:absolute;top:18px;right:24px;font-size:60px;line-height:1;color:var(--mint-2);font-weight:800;font-family:Georgia,serif;}
.tc .st{color:#ffb020;font-size:14px;margin-bottom:15px;letter-spacing:1px;}
.tc p{font-size:14.5px;color:var(--ink);margin-bottom:22px;position:relative;z-index:2;}
.tc .who{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--line);}
.tc .who .av{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;}
.tc .who b{display:block;font-size:14px;color:var(--navy);}
.tc .who span{font-size:12px;color:var(--body);}

/* ============================================================
   FAQ / ACCORDION
   ============================================================ */
.faq{max-width:820px;margin:0 auto;}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;box-shadow:var(--sh-xs);overflow:hidden;transition:box-shadow .25s,border-color .25s;}
.faq details[open]{box-shadow:var(--sh-sm);border-color:rgba(63,165,26,.4);}
.faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-size:15.5px;font-weight:700;color:var(--navy);display:flex;align-items:center;justify-content:space-between;gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:after{content:"+";flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--mint);color:var(--green-dk);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;transition:transform .25s,background .25s;}
.faq details[open] summary:after{content:"−";background:var(--g-green);color:#fff;}
.faq p{padding:0 24px 22px;font-size:14.5px;color:var(--body);}
.faq p+p{padding-top:0;margin-top:-8px;}

.faq-jump{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:42px;}
.faq-jump a{padding:10px 20px;border-radius:999px;font-size:13.5px;font-weight:700;border:1.6px solid var(--line);color:var(--body);background:#fff;transition:all .22s;}
.faq-jump a:hover{border-color:var(--green);color:var(--green-dk);background:var(--mint);}
.faq-cat{max-width:820px;margin:0 auto 46px;}
.faq-cat h3{font-size:20px;font-weight:800;color:var(--navy);margin-bottom:18px;display:flex;align-items:center;gap:11px;letter-spacing:-.3px;}
.faq-cat h3 .ic{width:38px;height:38px;border-radius:12px;background:var(--mint);display:flex;align-items:center;justify-content:center;font-size:17px;}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
.about-split.rev .as-copy{order:2;}
.as-copy h2{font-size:clamp(25px,3.2vw,34px);font-weight:800;letter-spacing:-.8px;line-height:1.2;margin-bottom:16px;}
.as-copy h2 .hl{color:var(--green);}
.as-copy p{color:var(--body);font-size:15.5px;margin-bottom:15px;}
.as-copy p b{color:var(--ink);font-weight:700;}
.as-list{margin-top:22px;}
.as-list li{display:flex;gap:13px;margin-bottom:16px;font-size:14.5px;color:var(--body);}
.as-list li .ic{width:30px;height:30px;border-radius:10px;background:var(--mint);color:var(--green-dk);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0;}
.as-list li b{display:block;color:var(--navy);font-weight:800;font-size:14.5px;margin-bottom:2px;}

.as-visual{background:var(--mint);border-radius:var(--r-xl);padding:38px;position:relative;overflow:hidden;}
.as-visual:before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;top:-90px;right:-70px;background:rgba(255,255,255,.55);}
.as-visual>*{position:relative;z-index:2;}
.probs{display:grid;gap:14px;}
.prob{background:#fff;border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh-xs);display:flex;gap:14px;align-items:flex-start;}
.prob .n{width:32px;height:32px;border-radius:11px;background:var(--g-navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.prob b{display:block;font-size:14px;font-weight:800;color:var(--navy);margin-bottom:3px;}
.prob span{font-size:12.5px;color:var(--body);}

.values{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.val{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;box-shadow:var(--sh-xs);transition:transform .3s,box-shadow .3s;}
.val:hover{transform:translateY(-7px);box-shadow:var(--sh-md);}
.val .ic{width:52px;height:52px;border-radius:17px;display:flex;align-items:center;justify-content:center;margin-bottom:17px;font-size:22px;}
.val h4{font-size:17px;font-weight:800;color:var(--navy);margin-bottom:9px;letter-spacing:-.2px;}
.val p{font-size:14px;color:var(--body);}

.timeline{max-width:760px;margin:0 auto;position:relative;padding-left:38px;}
.timeline:before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--green),var(--blue));}
.tl{position:relative;margin-bottom:34px;}
.tl:last-child{margin-bottom:0;}
.tl:before{content:"";position:absolute;left:-33px;top:5px;width:15px;height:15px;border-radius:50%;background:#fff;border:3.5px solid var(--green);box-shadow:0 0 0 4px var(--mint);}
.tl .yr{display:inline-block;background:var(--mint);color:var(--green-dk);font-size:12px;font-weight:800;padding:5px 13px;border-radius:999px;margin-bottom:8px;letter-spacing:.5px;}
.tl h4{font-size:17px;font-weight:800;color:var(--navy);margin-bottom:6px;letter-spacing:-.2px;}
.tl p{font-size:14px;color:var(--body);}

.team{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.tm{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 22px;text-align:center;box-shadow:var(--sh-xs);transition:transform .3s,box-shadow .3s;}
.tm:hover{transform:translateY(-7px);box-shadow:var(--sh-md);}
.tm .av{width:78px;height:78px;border-radius:26px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:#fff;}
.tm h4{font-size:16px;font-weight:800;color:var(--navy);margin-bottom:3px;}
.tm .role{font-size:12.5px;font-weight:700;color:var(--green-dk);margin-bottom:10px;}
.tm p{font-size:12.5px;color:var(--body);}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:start;}
.cform{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:36px;box-shadow:var(--sh-sm);}
.cform h3{font-size:22px;font-weight:800;color:var(--navy);margin-bottom:6px;letter-spacing:-.4px;}
.cform .sub{font-size:14px;color:var(--body);margin-bottom:26px;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:12.5px;font-weight:800;color:var(--navy);margin-bottom:7px;letter-spacing:.2px;}
.field label .req{color:var(--orange);}
.field input,.field select,.field textarea{
  width:100%;border:1.6px solid var(--line);border-radius:14px;padding:13px 15px;font-size:14px;
  font-family:inherit;color:var(--ink);outline:none;background:#fbfdfc;transition:border-color .2s,box-shadow .2s,background .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);background:#fff;box-shadow:0 0 0 4px rgba(63,165,26,.1);}
.field textarea{resize:vertical;min-height:130px;}
.field .hint{font-size:11.5px;color:var(--body);margin-top:6px;}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:var(--body);margin-bottom:22px;}
.consent input{width:18px;height:18px;accent-color:var(--green);flex-shrink:0;margin-top:2px;cursor:pointer;}
.consent a{color:var(--green-dk);font-weight:700;text-decoration:underline;}

.cside{display:grid;gap:16px;}
.ccard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-xs);transition:transform .3s,box-shadow .3s;}
.ccard:hover{transform:translateY(-5px);box-shadow:var(--sh-md);}
.ccard .ic{width:46px;height:46px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:15px;}
.ccard h4{font-size:16px;font-weight:800;color:var(--navy);margin-bottom:6px;letter-spacing:-.2px;}
.ccard p{font-size:13.5px;color:var(--body);margin-bottom:12px;}
.ccard .lines{display:grid;gap:7px;}
.ccard .lines a,.ccard .lines span{font-size:13.5px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px;}
.ccard .lines a:hover{color:var(--green-dk);}

.hours{background:var(--g-navy);color:#fff;border-radius:var(--r-lg);padding:26px;}
.hours h4{font-size:16px;font-weight:800;margin-bottom:15px;display:flex;align-items:center;gap:9px;}
.hours .row{display:flex;justify-content:space-between;font-size:13.5px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1);color:#c2d4e8;}
.hours .row:last-child{border-bottom:none;}
.hours .row b{color:#fff;font-weight:700;}

.offices{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.off{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-xs);transition:transform .3s,box-shadow .3s;}
.off:hover{transform:translateY(-6px);box-shadow:var(--sh-md);}
.off .flag{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--green-dk);background:var(--mint);display:inline-block;padding:5px 12px;border-radius:999px;margin-bottom:13px;}
.off h4{font-size:17px;font-weight:800;color:var(--navy);margin-bottom:9px;}
.off address{font-style:normal;font-size:13.5px;color:var(--body);line-height:1.7;margin-bottom:13px;}
.off .ph{font-size:13.5px;font-weight:700;color:var(--navy);}

/* ============================================================
   LEGAL PAGES (terms / privacy)
   ============================================================ */
.legal-layout{display:grid;grid-template-columns:262px 1fr;gap:44px;align-items:start;}
.toc{position:sticky;top:150px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-xs);}
.toc h4{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--navy);margin-bottom:15px;}
.toc li{margin-bottom:3px;}
.toc a{display:block;font-size:13px;color:var(--body);padding:8px 12px;border-radius:10px;transition:all .2s;line-height:1.4;}
.toc a:hover{background:var(--mint);color:var(--green-dk);font-weight:700;}

.legal{max-width:820px;}
.legal .updated{
  display:inline-flex;align-items:center;gap:9px;background:var(--sky);color:var(--blue-dk);
  font-size:13px;font-weight:700;padding:10px 18px;border-radius:999px;margin-bottom:28px;
}
.legal .intro{
  background:var(--mint);border-left:4px solid var(--green);border-radius:var(--r-sm);
  padding:20px 24px;margin-bottom:36px;font-size:14.5px;color:var(--ink);
}
.legal .intro b{font-weight:800;}
.legal h2{
  font-size:22px;font-weight:800;color:var(--navy);letter-spacing:-.4px;
  margin:40px 0 14px;padding-top:14px;scroll-margin-top:160px;display:flex;gap:12px;align-items:baseline;
}
.legal h2:first-of-type{margin-top:0;}
.legal h2 .n{
  font-size:13px;font-weight:800;color:#fff;background:var(--g-green);
  min-width:30px;height:30px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.legal h3{font-size:16.5px;font-weight:800;color:var(--navy);margin:24px 0 10px;}
.legal p{font-size:14.8px;color:var(--body);margin-bottom:14px;}
.legal p b{color:var(--ink);font-weight:700;}
.legal ul.bul{margin:0 0 18px 0;}
.legal ul.bul li{position:relative;padding-left:26px;font-size:14.8px;color:var(--body);margin-bottom:10px;}
.legal ul.bul li:before{content:"";position:absolute;left:8px;top:10px;width:7px;height:7px;border-radius:50%;background:var(--green);}
.legal ul.bul li b{color:var(--ink);font-weight:700;}
.legal .note{
  background:var(--cream);border:1px dashed rgba(247,148,29,.5);border-radius:var(--r-sm);
  padding:18px 22px;margin:22px 0;font-size:14px;color:var(--ink);
}
.legal .note b{font-weight:800;color:#b46a08;}
.legal table{width:100%;border-collapse:collapse;margin:18px 0 24px;font-size:14px;}
.legal table th{
  background:var(--navy);color:#fff;text-align:left;padding:13px 16px;font-size:12.5px;
  font-weight:800;letter-spacing:.5px;text-transform:uppercase;
}
.legal table th:first-child{border-radius:12px 0 0 0;}
.legal table th:last-child{border-radius:0 12px 0 0;}
.legal table td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--body);vertical-align:top;}
.legal table tr:nth-child(even) td{background:#fbfdfc;}
.legal table td b{color:var(--ink);font-weight:700;}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.legal .contact-box{
  background:var(--g-navy);color:#fff;border-radius:var(--r-lg);padding:30px;margin-top:40px;
}
.legal .contact-box h3{color:#fff;margin-top:0;font-size:18px;}
.legal .contact-box p{color:#bccfe4;margin-bottom:10px;font-size:14px;}
.legal .contact-box a{color:var(--green-lt);font-weight:700;}

/* ============================================================
   FINAL CTA
   ============================================================ */
.fcta{padding-bottom:96px;}
.fcta-in{background:var(--g-navy);border-radius:var(--r-xl);padding:66px 44px;text-align:center;color:#fff;position:relative;overflow:hidden;}
.fcta-in:before{content:"";position:absolute;width:460px;height:460px;border-radius:50%;top:-190px;right:-120px;background:radial-gradient(circle,rgba(95,214,51,.32),transparent 68%);}
.fcta-in:after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;bottom:-180px;left:-100px;background:radial-gradient(circle,rgba(46,143,214,.3),transparent 68%);}
.fcta-in>*{position:relative;z-index:2;}
.fcta h2{font-size:clamp(27px,3.6vw,38px);font-weight:800;letter-spacing:-1px;margin-bottom:13px;}
.fcta p{color:#bccfe4;font-size:16px;margin-bottom:30px;max-width:540px;margin-left:auto;margin-right:auto;}
.fcta .btns{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-bottom:26px;}
.fcta .mini{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;font-size:12.5px;color:#9db3cd;}
.fcta .mini span{display:flex;align-items:center;gap:7px;}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--navy-dk);color:#a2b8d0;padding:66px 0 0;}
.f-grid{display:grid;grid-template-columns:1.9fr 1fr 1fr 1fr 1.15fr;gap:34px;padding-bottom:46px;}
.f-brand{display:flex;align-items:center;gap:11px;margin-bottom:16px;}
.f-brand img{height:46px;border-radius:12px;}
.f-brand .tx{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.4px;}
.f-brand .tx i{color:var(--green-lt);font-style:normal;}
.f-about{font-size:13.5px;line-height:1.7;margin-bottom:18px;max-width:290px;}
.f-soc{display:flex;gap:9px;}
.f-soc a{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;}
.f-soc a:hover{background:var(--green);transform:translateY(-3px);}
.f-col h5{color:#fff;font-size:13.5px;font-weight:800;letter-spacing:.6px;margin-bottom:17px;text-transform:uppercase;}
.f-col li{margin-bottom:11px;font-size:13.5px;}
.f-col a:hover{color:var(--green-lt);}
.f-cta{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:var(--r);padding:20px;}
.f-cta h5{margin-bottom:9px;}
.f-cta p{font-size:12.5px;margin-bottom:14px;}
.f-cta form{display:flex;background:rgba(255,255,255,.09);border-radius:999px;padding:4px;}
.f-cta input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-size:13px;padding:9px 14px;min-width:0;}
.f-cta input::placeholder{color:#7f96b2;}
.f-cta button{background:var(--g-green);color:#fff;border-radius:999px;padding:9px 17px;font-size:12.5px;font-weight:800;}
.f-pay{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
.f-pay span{background:rgba(255,255,255,.07);border-radius:8px;padding:5px 11px;font-size:10.5px;font-weight:700;color:#c3d5e8;}
.f-bot{border-top:1px solid rgba(255,255,255,.08);padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font-size:12.5px;color:#7189a5;}
.f-bot .lk{display:flex;gap:20px;flex-wrap:wrap;}
.f-bot .lk a:hover{color:var(--green-lt);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* header actions must never push the page wider than the viewport */
@media(max-width:820px){
  .hd{flex-wrap:wrap;gap:12px;}
  .hd-act{margin-left:auto;}
  .brand img{height:44px;}
  .brand-tx{font-size:20px;}
  .brand-tx small{display:none;}
}
@media(max-width:560px){
  .hd-act{gap:7px;}
  .hd-act .btn{padding:9px 14px;font-size:12.5px;}
  .icon-btn{width:40px;height:40px;border-radius:12px;}
}

@media(max-width:1080px){
  .hsearch{display:none;}
  .f-grid{grid-template-columns:1.6fr 1fr 1fr;}
  .shop-layout{grid-template-columns:1fr;}
  .cs-filters-panel{position:static;}
  .legal-layout{grid-template-columns:1fr;}
  .toc{position:static;}
}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:40px;}
  .hv{min-height:400px;}
  .fcard.f1{right:0;}
  .fcard.f2{left:0;}
  .cat-grid,.p-grid,.p-grid.cols3,.v-grid,.team{grid-template-columns:repeat(2,1fr);}
  .w-grid,.t-grid,.values,.offices{grid-template-columns:repeat(2,1fr);}
  .flow{grid-template-columns:repeat(3,1fr);gap:30px;}
  .flow:before{display:none;}
  .split{grid-template-columns:1fr;}
  .tbar .wrap{grid-template-columns:repeat(2,1fr);gap:16px;}
  .s-grid{grid-template-columns:repeat(2,1fr);gap:30px;}
  .util-l span:nth-child(n+3){display:none;}
  .about-split{grid-template-columns:1fr;gap:34px;}
  .about-split.rev .as-copy{order:0;}
  .contact-grid{grid-template-columns:1fr;}
}
@media(max-width:640px){
  section{padding:62px 0;}
  .cat-grid,.p-grid,.p-grid.cols3,.v-grid,.w-grid,.t-grid,.f-grid,.values,.team,.offices{grid-template-columns:1fr;}
  .flow{grid-template-columns:1fr;gap:26px;}
  .tbar .wrap{grid-template-columns:1fr;}
  .s-grid{grid-template-columns:repeat(2,1fr);}
  .hv{min-height:330px;}
  .fcard.f1{width:180px;top:-6px;}
  .fcard.f2{width:196px;bottom:8%;}
  .fcard.f3{display:none;}
  .hsrch-lg{flex-direction:column;align-items:stretch;border-radius:var(--r);}
  .hsrch-lg button{justify-content:center;}
  .sc{padding:32px 26px;}
  .cartbar{flex-direction:column;align-items:stretch;text-align:left;}
  .cartbar .cb-r{flex-direction:column;}
  .cartbar .cb-r .btn{width:100%;}
  .fcta-in{padding:48px 24px;}
  .util-r span{display:none;}
  .frow{grid-template-columns:1fr;}
  .cform{padding:26px 22px;}
  .legal table{font-size:13px;}
}

/* ============================================================
   WORDPRESS / WOOCOMMERCE INTEGRATION
   Appended for the ChemShopee child theme.
   ============================================================ */

/* --- neutralise Woodmart chrome we replace --- */
.chemshopee-page .whb-header,
.chemshopee-page .website-wrapper > .whb-header,
.chemshopee-page footer.footer-container{display:none !important;}
body.chemshopee-page{background:var(--white);}
.chemshopee-page .main-page-wrapper{padding-top:0 !important;margin-top:0 !important;}
.chemshopee-page .site-content{margin-bottom:0 !important;padding-top:0 !important;}
.chemshopee-page .container{max-width:1220px;}

/* admin bar offset for sticky header */
body.admin-bar header{top:32px;}
@media(max-width:782px){body.admin-bar header{top:46px;}}

/* --- WP core alignment / caption classes --- */
.alignleft{float:left;margin:0 22px 18px 0;}
.alignright{float:right;margin:0 0 18px 22px;}
.aligncenter{margin-left:auto;margin-right:auto;display:block;}
.wp-caption{max-width:100%;}
.wp-caption-text{font-size:12.5px;color:var(--body);padding-top:8px;}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* --- editor content inside our page shell --- */
.entry-content{max-width:820px;margin:0 auto;}
.entry-content h2{font-size:26px;font-weight:800;color:var(--navy);margin:32px 0 14px;letter-spacing:-.4px;}
.entry-content h3{font-size:19px;font-weight:800;color:var(--navy);margin:26px 0 10px;}
.entry-content p{font-size:15.5px;color:var(--body);margin-bottom:16px;}
.entry-content ul,.entry-content ol{margin:0 0 18px 22px;}
.entry-content ul li{list-style:disc;font-size:15.5px;color:var(--body);margin-bottom:9px;}
.entry-content ol li{list-style:decimal;font-size:15.5px;color:var(--body);margin-bottom:9px;}
.entry-content a{color:var(--green-dk);font-weight:700;text-decoration:underline;}
.entry-content img{border-radius:var(--r);margin:18px 0;}
.entry-content blockquote{border-left:4px solid var(--green);background:var(--mint);padding:18px 24px;border-radius:var(--r-sm);margin:22px 0;}
.entry-content table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px;}
.entry-content th{background:var(--navy);color:#fff;text-align:left;padding:12px 15px;font-size:12.5px;text-transform:uppercase;letter-spacing:.5px;}
.entry-content td{padding:12px 15px;border-bottom:1px solid var(--line);color:var(--body);}

/* --- product card: live Woo data --- */
.p-med .p-thumb{width:100%;height:100%;object-fit:contain;padding:14px;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.pcard:hover .p-med .p-thumb{transform:scale(1.07);}
.p-med a.p-medlink{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.p-pr .amount,.p-pr bdi{font-size:20px;font-weight:800;color:var(--navy);letter-spacing:-.7px;}
.p-pr del{opacity:1;}
.p-pr del .amount,.p-pr del bdi{font-size:12.5px;color:#9bacc0;font-weight:600;text-decoration:line-through;letter-spacing:0;}
.p-pr ins{text-decoration:none;}
.p-pr .price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.p-foot .added_to_cart{display:none;}
.p-foot .btn.loading{opacity:.75;pointer-events:none;position:relative;}
.p-foot .btn.loading:after{content:"";width:13px;height:13px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;display:inline-block;margin-left:8px;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.p-foot .btn.added-ok{background:var(--navy) !important;}

/* woocommerce message boxes */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border-radius:var(--r);padding:16px 22px;margin:0 0 22px;font-size:14.5px;list-style:none;border:1px solid;
}
.woocommerce-message{background:var(--mint);border-color:rgba(63,165,26,.35);color:var(--green-dk);}
.woocommerce-info{background:var(--sky);border-color:rgba(46,143,214,.3);color:var(--blue-dk);}
.woocommerce-error{background:#fdecec;border-color:#f5c2c2;color:#a32020;}
.woocommerce-message .button,.woocommerce-info .button{
  float:right;background:var(--navy);color:#fff;padding:7px 16px;border-radius:999px;font-size:12.5px;font-weight:700;
}

/* no-results */
.shop-empty{
  background:#fff;border:1px dashed var(--line);border-radius:var(--r-lg);padding:56px 30px;text-align:center;
}
.shop-empty h3{font-size:20px;font-weight:800;color:var(--navy);margin-bottom:8px;}
.shop-empty p{color:var(--body);font-size:14.5px;margin-bottom:20px;}

/* woocommerce native pagination -> our pager look */
.woocommerce-pagination ul{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;border:none;margin:0;padding:0;}
.woocommerce-pagination li{border:none;margin:0;overflow:visible;}
.woocommerce-pagination a,.woocommerce-pagination span{
  min-width:42px;height:42px;padding:0 14px;border-radius:13px;border:1.5px solid var(--line);background:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--navy);transition:all .2s;
}
.woocommerce-pagination a:hover{border-color:var(--green);color:var(--green-dk);background:var(--mint);}
.woocommerce-pagination .current{background:var(--g-navy);color:#fff;border-color:transparent;}

/* sidebar widgets inside our filter shell */
.cs-filters-panel .widget{margin-bottom:0;}
.cs-filters-panel ul{margin:0;}
.cs-filters-panel .widget ul li{font-size:13.5px;color:var(--body);margin-bottom:10px;}
.cs-filters-panel .widget ul li a{color:var(--body);}
.cs-filters-panel .widget ul li a:hover{color:var(--green-dk);}

/* single product (inherits Woodmart, just re-skin the buy box) */
.chemshopee-page .single_add_to_cart_button{
  background:var(--g-green) !important;color:#fff !important;border-radius:999px !important;
  font-weight:700 !important;padding:14px 30px !important;box-shadow:var(--sh-green);border:none !important;
}
.po-callout{
  background:var(--mint);border:1px dashed rgba(63,165,26,.45);border-radius:var(--r);
  padding:15px 20px;margin:18px 0;font-size:13.5px;color:var(--ink);
}
.po-callout b{color:var(--green-dk);font-weight:800;}

/* vendor badge on cards */
.p-vend .vnm a{color:var(--navy);}
.p-vend .vnm a:hover{color:var(--green-dk);}

/* mobile nav toggle */
.navtoggle{display:none;width:44px;height:44px;border-radius:12px;background:var(--mint);align-items:center;justify-content:center;}
@media(max-width:1080px){
  .navtoggle{display:flex;}
  .navstrip .wrap{gap:2px;}
}

/* ============================================================
   WOODMART OVERRIDE GUARD
   ------------------------------------------------------------
   Woodmart ships:
     :is(.btn,.button,button,[type="submit"],[type="button"])
       { color: var(--btn-color,#3E3E3E); background: var(--btn-bgcolor,#F3F3F3) }
   That has the SAME specificity (0,1,0) as our .btn-* classes, so whichever
   stylesheet loads last wins. functions.php now forces our CSS to load after
   Woodmart's, but these body-scoped rules (0,2,0) make it deterministic even
   if a plugin re-orders the queue or injects inline CSS later.
   ============================================================ */

body.chemshopee-page{color:var(--ink);}

/* --- buttons --- */
body.chemshopee-page .btn{
  font-weight:700;border-radius:999px;text-decoration:none;
  background-image:none;text-shadow:none;letter-spacing:0;text-transform:none;
}
body.chemshopee-page .btn-green,
body.chemshopee-page a.btn-green,
body.chemshopee-page button.btn-green{
  background:var(--g-green);color:#fff;border:none;box-shadow:var(--sh-green);
}
body.chemshopee-page .btn-green:hover,
body.chemshopee-page .btn-green:focus,
body.chemshopee-page .btn-green.added,
body.chemshopee-page .btn-green.loading{
  background:var(--g-green);color:#fff;
}
body.chemshopee-page .btn-green.added-ok{background:var(--navy);color:#fff;}

body.chemshopee-page .btn-navy,
body.chemshopee-page a.btn-navy{background:var(--navy);color:#fff;border:none;}
body.chemshopee-page .btn-navy:hover,
body.chemshopee-page .btn-navy:focus{background:var(--navy-dk);color:#fff;}

body.chemshopee-page .btn-line,
body.chemshopee-page a.btn-line,
body.chemshopee-page button.btn-line{
  background:#fff;color:var(--navy);border:1.6px solid #dde6ef;box-shadow:none;
}
body.chemshopee-page .btn-line:hover,
body.chemshopee-page .btn-line:focus{
  background:var(--mint);color:var(--green-dk);border-color:var(--green);
}

body.chemshopee-page .btn-white,
body.chemshopee-page a.btn-white{background:#fff;color:var(--navy);border:none;}
body.chemshopee-page .btn-white:hover,
body.chemshopee-page .btn-white:focus{background:#fff;color:var(--navy);}

/* WooCommerce appends .added / .loading — never let them recolour the label */
body.chemshopee-page .p-foot .btn.added,
body.chemshopee-page .p-foot .btn.loading{color:#fff;}
body.chemshopee-page .p-foot .btn-line.added,
body.chemshopee-page .p-foot .btn-line.loading{color:var(--navy);}
body.chemshopee-page .added_to_cart{display:none !important;}

/* --- category filter tabs --- */
body.chemshopee-page .ptab{
  background:#fff;color:var(--body);border:1.6px solid var(--line);font-weight:700;
}
body.chemshopee-page .ptab:hover{background:var(--mint);color:var(--green-dk);border-color:var(--green);}
body.chemshopee-page .ptab.on{background:var(--g-navy);color:#fff;border-color:transparent;}

/* --- small icon buttons --- */
body.chemshopee-page .icon-btn{background:var(--mint);color:var(--navy);border:none;}
body.chemshopee-page .icon-btn:hover{background:var(--mint-2);}
body.chemshopee-page .p-wish{background:rgba(255,255,255,.92);border:none;color:var(--navy);}
body.chemshopee-page .p-wish:hover{background:#fff;}
body.chemshopee-page .hsearch button,
body.chemshopee-page .hsrch-lg button,
body.chemshopee-page .f-cta button{background:var(--g-green);color:#fff;border:none;}

/* --- pager --- */
body.chemshopee-page .woocommerce-pagination a,
body.chemshopee-page .woocommerce-pagination span,
body.chemshopee-page .pager a{background:#fff;color:var(--navy);border:1.5px solid var(--line);}
body.chemshopee-page .woocommerce-pagination a:hover,
body.chemshopee-page .pager a:hover{background:var(--mint);color:var(--green-dk);border-color:var(--green);}
body.chemshopee-page .woocommerce-pagination .current,
body.chemshopee-page .pager a.on{background:var(--g-navy);color:#fff;border-color:transparent;}

/* --- typography that Woodmart resets to #333 --- */
body.chemshopee-page .pcard h4,
body.chemshopee-page .pcard h4 a,
body.chemshopee-page .cat h4,
body.chemshopee-page .vc h4,
body.chemshopee-page .vc h4 a,
body.chemshopee-page .p-pr,
body.chemshopee-page .p-pr .amount,
body.chemshopee-page .p-pr bdi,
body.chemshopee-page .p-pr ins,
body.chemshopee-page .tb b,
body.chemshopee-page .step h4,
body.chemshopee-page .head h2,
body.chemshopee-page .pbanner h1{color:var(--navy);}
body.chemshopee-page .p-pr del,
body.chemshopee-page .p-pr del .amount,
body.chemshopee-page .p-pr del bdi{color:#9bacc0;}
body.chemshopee-page .p-spec,
body.chemshopee-page .p-moq,
body.chemshopee-page .cat p,
body.chemshopee-page .step p,
body.chemshopee-page .head p{color:var(--body);}
body.chemshopee-page .p-cas{color:var(--blue);}
body.chemshopee-page .p-ship{color:var(--green-dk);}

/* dark sections must stay light-on-dark */
body.chemshopee-page .why,
body.chemshopee-page .why h2,
body.chemshopee-page .why h4,
body.chemshopee-page .wc h4,
body.chemshopee-page .stats,
body.chemshopee-page .stats b,
body.chemshopee-page .stats span,
body.chemshopee-page .sc,
body.chemshopee-page .sc h3,
body.chemshopee-page .sc li,
body.chemshopee-page .fcta-in,
body.chemshopee-page .fcta h2,
body.chemshopee-page .hours,
body.chemshopee-page .hours h4,
body.chemshopee-page .legal .contact-box,
body.chemshopee-page .legal .contact-box h3{color:#fff;}
body.chemshopee-page .hero h1{color:var(--ink);}
body.chemshopee-page footer,
body.chemshopee-page footer a{color:#a2b8d0;}
body.chemshopee-page footer h5,
body.chemshopee-page footer .f-brand .tx{color:#fff;}
body.chemshopee-page footer a:hover{color:var(--green-lt);}

/* --- form controls --- */
body.chemshopee-page .field input,
body.chemshopee-page .field select,
body.chemshopee-page .field textarea,
body.chemshopee-page .frange input,
body.chemshopee-page .shop-bar select,
body.chemshopee-page .hsearch input,
body.chemshopee-page .hsearch select,
body.chemshopee-page .hsrch-lg input{color:var(--ink);background:#fbfdfc;}
body.chemshopee-page .hsearch input,
body.chemshopee-page .hsrch-lg input{background:transparent;}

/* ============================================================
   FOOTER ALIGNMENT
   Five unequal columns collapsed badly between 640px and 1080px:
   three columns left two orphans on a ragged second row. Now the brand
   block spans the full width and the four link columns sit on an even grid.
   ============================================================ */
footer .f-grid{grid-template-columns:1.8fr 1fr 1fr 1fr 1.35fr;align-items:start;}
footer .f-col ul{margin:0;}
footer .f-col li{margin-bottom:11px;line-height:1.45;}
footer .f-about{margin-bottom:18px;}

@media(max-width:1080px){
  footer .f-grid{grid-template-columns:repeat(3,1fr);gap:30px 26px;}
  footer .f-grid > :first-child{grid-column:1 / -1;}
  footer .f-about{max-width:520px;}
}
@media(max-width:760px){
  footer .f-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:520px){
  footer .f-grid{grid-template-columns:1fr;gap:26px;}
  footer .f-grid > :first-child{grid-column:auto;}
  footer .f-bot{flex-direction:column;align-items:flex-start;gap:12px;}
  footer .f-bot .lk{gap:14px;}
}

/* ============================================================
   CONTRAST CORRECTION
   The brand gradient starts at #5fd633; white text on that end measured
   1.88:1, well under the 4.5:1 WCAG AA threshold. Surfaces that carry white
   text now use a darker green/blue ramp (measured 4.4–5.2:1) while the light
   brand green stays on icon tiles and large display numerals.
   ============================================================ */
:root{
  --g-green-btn:linear-gradient(135deg,#2e7d12 0%,#1f5f0a 100%);
  --g-brand-text:linear-gradient(115deg,#2f8a14 0%,#1f6fa8 100%);
}

body.chemshopee-page .btn-green,
body.chemshopee-page a.btn-green,
body.chemshopee-page button.btn-green,
body.chemshopee-page .btn-green:hover,
body.chemshopee-page .btn-green:focus{
  background:var(--g-green-btn);color:#fff;
  box-shadow:0 10px 24px rgba(46,125,18,.30);
}
body.chemshopee-page .hsearch button,
body.chemshopee-page .hsrch-lg button,
body.chemshopee-page .f-cta button{background:var(--g-green-btn);color:#fff;}

/* bands and cards that print white body copy */
body.chemshopee-page .stats{background:var(--g-brand-text);}
body.chemshopee-page .sc.sell{background:linear-gradient(140deg,#2f8a14 0%,#1f5f0a 100%);}
body.chemshopee-page .sc.buy{background:linear-gradient(140deg,#1f6fa8 0%,#14507a 100%);}
body.chemshopee-page .step:nth-child(even) .no{
  background:var(--g-green-btn);box-shadow:0 10px 24px rgba(46,125,18,.28);
}
body.chemshopee-page .trustpill .pin{background:var(--g-green-btn);}
body.chemshopee-page .p-tag.t-new{background:var(--g-green-btn);}
body.chemshopee-page .p-tag.t-hot{background:linear-gradient(135deg,#e08706 0%,#b96a04 100%);}
body.chemshopee-page .p-tag.t-best{background:linear-gradient(135deg,#2585cc 0%,#1a5f96 100%);}
body.chemshopee-page .prod-badge,
body.chemshopee-page .fc-ic[style*="3fa51a"]{background:var(--g-green-btn) !important;}

/* keep the vivid brand green where it sits behind icons, not text */
body.chemshopee-page .cat-ic,
body.chemshopee-page .wc .ic,
body.chemshopee-page .cb-ic,
body.chemshopee-page .trust-item .dot{background:var(--g-green);}

/* hero highlight text sits on a light background — needs the darker green */
body.chemshopee-page .hero h1 .g{
  background:linear-gradient(100deg,#2f8a14 0%,#1f6fa8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
body.chemshopee-page .navstrip .push{color:#c26a05;}
body.chemshopee-page .sec-tag,
body.chemshopee-page .eyebrow{color:#256b0d;}
body.chemshopee-page .cat .go .n{color:#256b0d;}
body.chemshopee-page .p-ship{color:#256b0d;}
body.chemshopee-page .vc .rt b{color:#256b0d;}

/* ============================================================
   MOBILE + CONTRAST AUDIT FIXES
   Measured on a 390x844 viewport across all templates.
   ============================================================ */

/* --- 1. Numbered chips used white text on the light brand green (1.88:1) --- */
body.chemshopee-page .legal h2 .n,
body.chemshopee-page .prob .n,
body.chemshopee-page .as-list li .ic{
  background:var(--g-green-btn);color:#fff;
}
body.chemshopee-page .as-list li .ic{background:var(--mint);color:#256b0d;}

/* --- 2. Muted greys that fell below 4.5:1 on white --- */
body.chemshopee-page .fopt .ct{color:#5a6f88;}
body.chemshopee-page .crumb span{color:#7d8ea1;}
body.chemshopee-page .field .req{color:#c25a02;}
body.chemshopee-page .navstrip .push{color:#a85a04;}
body.chemshopee-page .p-pr .was,
body.chemshopee-page .p-pr del,
body.chemshopee-page .p-pr del .amount,
body.chemshopee-page .p-pr del bdi{color:#78899c;}
body.chemshopee-page .hsearch input::placeholder,
body.chemshopee-page .hsrch-lg input::placeholder{color:#7d8ea1;}

/* --- 3. WooCommerce cart/checkout inherit Woodmart's grey --- */
body.chemshopee-page .woocommerce-Price-amount,
body.chemshopee-page .woocommerce-Price-amount bdi,
body.chemshopee-page .cart_totals th,
body.chemshopee-page .cart_totals td,
body.chemshopee-page .shop_table th,
body.chemshopee-page .shop_table td,
body.chemshopee-page .woocommerce-cart-form a{color:var(--ink);}
body.chemshopee-page .product-name a,
body.chemshopee-page .woocommerce-cart-form .product-name a{color:var(--navy);font-weight:700;}

/* --- 4. Woodmart page title still rendered on cart/checkout/account --- */
body.chemshopee-page .page-title,
body.chemshopee-page .wd-page-title,
body.chemshopee-page .title-size-default{display:none !important;}

/* --- 5. Decorative hero glow overflowed a 375px viewport --- */
.hv-glow{max-width:100%;}
@media(max-width:480px){
  .hv-glow{width:260px;height:260px;}
  .hv{min-height:300px;}
}

/* --- 6. Touch targets: several links measured 14–22px tall --- */
@media(max-width:1080px){
  .fopt{min-height:42px;align-items:center;padding:4px 0;}
  .fopt input{width:19px;height:19px;}
  footer .f-col li{margin-bottom:4px;}
  footer .f-col li a{display:inline-block;padding:9px 0;min-height:40px;line-height:1.5;}
  footer .f-bot .lk a{display:inline-block;padding:8px 0;}
  .util-r a{display:inline-block;padding:6px 0;}
  .crumb a{display:inline-block;padding:5px 0;}
  .pops a{padding:9px 14px;}
  .f-soc a{width:42px;height:42px;}
}

/* --- 7. Mobile spacing polish --- */
@media(max-width:640px){
  .pbanner{padding:34px 0 38px;}
  .pbanner h1{font-size:clamp(25px,7vw,32px);}
  .pb-meta{gap:10px 18px;font-size:12.5px;}
  .head{margin-bottom:36px;}
  .p-grid,.p-grid.cols3{gap:16px;}
  .shop-bar{padding:12px 14px;gap:12px;}
  .shop-bar .tools{width:100%;}
  .shop-bar select{width:100%;}
  .applied{gap:6px;}
  .cs-filters-panel{padding:18px;}
  .cartbar{padding:16px 18px;}
  .flow-note{padding:16px 18px;text-align:left;}
  .legal h2{font-size:19px;}
  .legal .contact-box{padding:22px;}
  .toc{padding:18px;}
  .cform{padding:22px 18px;}
  .fcta-in{padding:42px 20px;}
  .sc{padding:28px 22px;}
  .tc,.val,.wc{padding:24px;}
  .timeline{padding-left:30px;}
}
@media(max-width:400px){
  .brand img{height:38px;}
  .brand-tx{font-size:17px;}
  .hd-act .btn{padding:9px 12px;font-size:12px;}
  .icon-btn{width:38px;height:38px;}
  .hstats{gap:18px;}
  .hstats b{font-size:21px;}
}

/* ============================================================
   MOBILE HEADER — REBUILD
   Previously .util .wrap got `justify-content:center` while its two flex
   children (.util-l / .util-r) were still allowed to wrap onto multiple
   lines each — that's what produced the ragged, overlapping utility bar.
   Below, each row is forced to a single nowrap line and the two rows stack
   centered instead.
   ============================================================ */
@media(max-width:960px){
  .util .wrap{justify-content:center;padding-top:7px;padding-bottom:7px;}
  .util-l{justify-content:center;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .util-l::-webkit-scrollbar{display:none;}
  .util-l span{white-space:nowrap;flex-shrink:0;}
  .util-l span:nth-child(n+2){display:none;}
  /* Track Order / Sell on ChemShopee stay reachable from the footer and the
     account icon — dropping this second line is what actually saves a row. */
  .util-r{display:none;}
}
@media(max-width:420px){
  .util{font-size:11px;}
}

/* header main row: logo + wordmark + icons + one CTA, on a single line.
   Everything is shrunk rather than dropped, so "ChemShopee" stays visible —
   only the "B2B Chemical Marketplace" tagline (hidden already at 820px) and
   the separate text Sign-In button (redundant with the account icon) go. */
.lbl-short{display:none;}
@media(max-width:480px){
  .hd{flex-wrap:nowrap;gap:6px;padding:10px 0;}
  .brand{gap:7px;}
  .brand img{height:30px;border-radius:9px;}
  .brand-tx{font-size:15.5px;letter-spacing:-.3px;}
  .hd-account-btn{display:none !important;} /* the account icon-btn already covers this */
  .hd-act{gap:5px;}
  .icon-btn{width:36px;height:36px;border-radius:11px;}
  .icon-btn svg{width:16px;height:16px;}
  .hd-shop-btn{padding:10px 14px;font-size:12.5px;flex-shrink:0;white-space:nowrap;}
  .lbl-full{display:none;}
  .lbl-short{display:inline;}
}
@media(max-width:340px){
  .brand-tx{font-size:14px;}
  .brand img{height:27px;}
}

/* ============================================================
   PRODUCT GRID — 2 columns on mobile instead of 1
   The earlier responsive pass collapsed every grid (.p-grid included) to a
   single column below 640px. A 2-up grid reads far better for a product
   catalogue on a phone, so it's restored here with compacted card internals
   sized for a ~160px-wide card.
   ============================================================ */
@media(max-width:640px){
  .p-grid,.p-grid.cols3{grid-template-columns:repeat(2,1fr);gap:12px;}
  .p-med{height:112px;}
  .p-med svg,.p-med .p-thumb{width:60px !important;height:60px !important;}
  .p-tag{font-size:9px;padding:4px 8px;top:8px;left:8px;}
  .p-wish{width:26px;height:26px;top:7px;right:7px;}
  .p-wish svg{width:12px;height:12px;}
  .p-body{padding:11px 11px 12px;}
  .p-cas{font-size:9px;margin-bottom:3px;}
  .p-body h4{font-size:12.5px;line-height:1.25;margin-bottom:4px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .p-spec,.p-moq{font-size:10px;margin-bottom:6px;}
  .p-rate{margin-bottom:6px;gap:4px;}
  .p-rate .st{font-size:10px;}
  .p-rate span{font-size:9.5px;}
  .p-pr{margin-bottom:2px;gap:5px;}
  .p-pr .amount,.p-pr bdi,.p-pr .now{font-size:14.5px !important;}
  .p-pr .was,.p-pr del{font-size:10px;}
  .p-pr .off{font-size:9px;padding:2px 5px;}
  .p-ship{font-size:9.5px;margin-bottom:8px;}
  .p-vend{padding:7px 0;margin-bottom:9px;gap:6px;}
  .p-vend .vav{width:22px;height:22px;font-size:9px;border-radius:7px;}
  .p-vend .vnm{font-size:10px;}
  .p-vend .vsub{font-size:9px;}
  .p-foot{flex-direction:column;gap:6px;}
  .p-foot .btn{width:100%;padding:9px;font-size:11.5px;}
}
@media(max-width:360px){
  .p-med{height:96px;}
  .p-med svg,.p-med .p-thumb{width:50px !important;height:50px !important;}
}

/* ============================================================
   SHOP FILTERS — off-canvas panel below 1080px, opened only on tap
   ============================================================ */
@media(max-width:1080px){
  .cs-filters-toggle{
    display:flex;align-items:center;gap:9px;width:100%;
    background:#fff;border:1.6px solid var(--line);border-radius:999px;
    padding:13px 20px;font-weight:700;font-size:14px;color:var(--navy);
    margin-bottom:16px;position:relative;
  }
  .cs-filters-toggle:hover{border-color:var(--green);color:var(--green-dk);}
  .cs-filters-count{
    background:var(--g-green-btn);color:#fff;font-size:11px;font-weight:800;
    min-width:20px;height:20px;border-radius:999px;display:inline-flex;
    align-items:center;justify-content:center;padding:0 6px;margin-left:auto;
  }

  .cs-filters-overlay{
    position:fixed;inset:0;background:rgba(12,31,61,.5);z-index:900;
    opacity:0;pointer-events:none;transition:opacity .25s ease;
  }
  .cs-filters-overlay.is-open{opacity:1 !important;pointer-events:auto !important;}

  .cs-filters-panel{
    position:fixed;top:0;left:-100%;bottom:0;z-index:901;width:min(86vw,360px);
    border-radius:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    transition:left .3s cubic-bezier(.2,.8,.2,1);
    box-shadow:0 0 40px rgba(0,0,0,.2);
  }
  .cs-filters-panel.is-open{left:0 !important;}

  .cs-filters-panel h3{
    position:sticky;top:0;background:#fff;padding-bottom:14px;margin-bottom:14px;
    border-bottom:1px solid var(--line);z-index:2;
  }
  .cs-filters-panel h3 > span{display:flex;align-items:center;gap:14px;}
  .cs-filters-close{
    display:flex;align-items:center;justify-content:center;width:30px;height:30px;
    border-radius:999px;background:var(--mint);color:var(--navy);font-size:14px;flex-shrink:0;
  }
  .cs-filters-close:hover{background:var(--mint-2);}

  body.chemshopee-filters-open{overflow:hidden;}
}
@media(min-width:1081px){
  .cs-filters-toggle,.cs-filters-overlay,.cs-filters-close{display:none !important;}
}

/* nav strip: make the horizontal scroll obvious instead of a hard cut-off */
@media(max-width:1080px){
  .navstrip{position:relative;}
  .navstrip .wrap{
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-right:36px; /* room so the last link isn't flush against the fade */
  }
  .navstrip .wrap::-webkit-scrollbar{display:none;}
  .navstrip:after{
    content:"";position:absolute;top:0;right:0;bottom:0;width:36px;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95));
  }
}

/* header action row: let it wrap onto its own line cleanly rather than
   squeezing four controls into one cramped row under ~380px */

/* ============================================================
   FINAL CONTRAST PASS — remaining sub-4.5:1 text on white
   ============================================================ */
body.chemshopee-page .brand-tx .b{color:#2b7f10;}          /* "Shopee" 3.18 -> 4.62 */
body.chemshopee-page .icon-btn .cnt{background:#c25a02;}   /* cart badge 2.28 -> 4.93 */
body.chemshopee-page .frange span{color:#5a6f88;}          /* range dash 2.32 -> 5.02 */
body.chemshopee-page .crumb span{color:#6b7c90;}           /* breadcrumb "›" 3.30 -> 4.61 */
body.chemshopee-page .legal .note b{color:#8a5206;}        /* "Note:" 3.92 -> 5.31 */
body.chemshopee-page .trustpill .av i{border-color:#fff;}

/* WooCommerce's own buttons on cart / checkout / account */
body.chemshopee-page .woocommerce .button,
body.chemshopee-page .woocommerce button.button,
body.chemshopee-page .woocommerce input.button,
body.chemshopee-page .woocommerce a.button,
body.chemshopee-page .wc-block-components-button,
body.chemshopee-page .checkout-button,
body.chemshopee-page #place_order{
  background:var(--g-green-btn);color:#fff;border:none;border-radius:999px;
  font-weight:700;padding:13px 26px;box-shadow:0 10px 24px rgba(46,125,18,.28);
}
body.chemshopee-page .woocommerce .button:hover,
body.chemshopee-page .checkout-button:hover,
body.chemshopee-page #place_order:hover{background:var(--g-green-btn);color:#fff;opacity:.94;}
body.chemshopee-page .woocommerce a.button.wc-backward,
body.chemshopee-page .woocommerce .button[name="update_cart"]{
  background:#fff;color:var(--navy);border:1.6px solid #dde6ef;box-shadow:none;
}
body.chemshopee-page .woocommerce .quantity input,
body.chemshopee-page .woocommerce form .form-row input,
body.chemshopee-page .woocommerce form .form-row textarea,
body.chemshopee-page .woocommerce form .form-row select{color:var(--ink);border-radius:12px;}
body.chemshopee-page .woocommerce table.shop_table{border-radius:var(--r);overflow:hidden;}

/* vendor link inside a product card — give it a usable touch height */
@media(max-width:1080px){
  .p-vend .vnm a{display:inline-block;padding:5px 0;}
  footer .f-col li a{display:block;padding:10px 0;line-height:1.4;}
}

/* ============================================================
   DARK-SECTION RESTORE  +  LAST CONTRAST ITEMS
   The broad .eyebrow / .head p rules above are correct on white, but they
   also hit the navy sections, where green-on-navy measured 1.92:1. These
   rules come last so the dark variants win.
   ============================================================ */
body.chemshopee-page .why .eyebrow,
body.chemshopee-page .why .sec-tag{background:rgba(95,214,51,.18);color:#8ee86a;}
body.chemshopee-page .why .head p,
body.chemshopee-page .why p{color:#c3d3e4;}
body.chemshopee-page .why .head h2,
body.chemshopee-page .why h4{color:#fff;}
body.chemshopee-page .wc p{color:#c3d3e4;}
body.chemshopee-page .fcta p{color:#cfdcea;}
body.chemshopee-page .fcta .mini span{color:#b6c8dc;}
body.chemshopee-page .sc .tag{background:rgba(255,255,255,.24);color:#fff;}
body.chemshopee-page .sc > p,
body.chemshopee-page .sc li{color:#fff;}
body.chemshopee-page .hours .row{color:#cfdcea;}
body.chemshopee-page .legal .contact-box p{color:#cfdcea;}
body.chemshopee-page .stats span{color:#eaf4ff;}

/* product badges */
body.chemshopee-page .p-tag.t-hot{background:linear-gradient(135deg,#a85a04 0%,#874603 100%);}
body.chemshopee-page .p-tag.t-out{background:#69788a;}
body.chemshopee-page .p-out .p-ship{color:#6b7c90 !important;}

/* misc small text */
body.chemshopee-page .p-vend .vnm > span[style],
body.chemshopee-page .vc h4 > span[style]{color:#2b7f10 !important;}
body.chemshopee-page .stars,
body.chemshopee-page .p-rate .st,
body.chemshopee-page .tc .st{color:#c47f00;}
body.chemshopee-page .icon-btn .cnt{background:#a85a04;}

/* Woodmart's own counters leak through our header */
body.chemshopee-page .wd-tools-count,
body.chemshopee-page .wd-tools-element{display:none !important;}
/* ...but keep them working inside the fixed mobile bottom toolbar */
body.chemshopee-page .wd-toolbar .wd-tools-count,
body.chemshopee-page .wd-toolbar .wd-tools-element{display:revert !important;}
/* Woodmart's fixed edge sidebar-opener tab is a duplicate of the Sidebar
   item we deliberately removed from the toolbar; hide it everywhere. */
.wd-sidebar-opener.wd-not-on-shop{display:none !important;}

/* proper skip link: hidden until focused */
body.chemshopee-page a.screen-reader-text:focus{
  position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;z-index:9999;
  background:var(--navy);color:#fff;padding:12px 20px;border-radius:999px;font-weight:700;
}

/* --- final borderline items (all were 3.4–4.3:1 at small sizes) --- */
body.chemshopee-page .p-cas{color:#1f6fa8;}                       /* 3.49 -> 5.15 */
body.chemshopee-page .p-pr del,
body.chemshopee-page .p-pr del .amount,
body.chemshopee-page .p-pr del bdi,
body.chemshopee-page .p-pr del .woocommerce-Price-currencySymbol,
body.chemshopee-page .p-pr .was{color:#66788c;}                   /* 3.59 -> 4.74 */
body.chemshopee-page .p-out .p-ship,
body.chemshopee-page .p-ship[style]{color:#5a6f88 !important;}    /* 4.28 -> 5.02 */
body.chemshopee-page .stats{background:linear-gradient(115deg,#276f10 0%,#1a5f8f 100%);}
body.chemshopee-page .stats span{color:#fff;}                     /* 3.96 -> 5.61 */

/* --- footer: keep every breakpoint an even grid (no orphan column) ---
   >1080   brand + 4 link columns on one row
   <=1080  brand spans full width, 4 link columns on one even row
   <=860   brand spans full width, link columns 2 x 2
   <=520   single column                                                */
@media(max-width:1080px){
  footer .f-grid{grid-template-columns:repeat(4,1fr);gap:30px 24px;}
  footer .f-grid > :first-child{grid-column:1 / -1;}
}
@media(max-width:860px){
  footer .f-grid{grid-template-columns:repeat(2,1fr);gap:28px 24px;}
}
@media(max-width:520px){
  footer .f-grid{grid-template-columns:1fr;gap:26px;}
  footer .f-grid > :first-child{grid-column:auto;}
}

/* Bottom mobile toolbar: auto-hide after a few seconds of no scrolling,
   reappear on scroll (see initBottomToolbarAutoHide in app.js). */
.wd-toolbar{transition:transform .3s ease}
.wd-toolbar.cs-toolbar-hidden{transform:translateY(100%)}

/* The theme's raw style.css (loaded as a dependency for cascade-ordering
   reasons) redeclares .wd-nav{--nav-gap:20px} after WoodMart's own
   base.min.css, which otherwise sets a near-zero gap for this specific
   two-tab MENU/CATEGORIES strip in the off-canvas mobile menu. The extra
   20px gap is just enough to overflow the narrow strip and wrap the
   second tab onto its own line, overlapping the first. Force it back. */
.wd-side-hidden-nav .wd-nav-mob-tab{--nav-gap:.001px !important;flex-wrap:nowrap !important;}

/* On the homepage specifically, something re-applies the closed
   translate3d(-100%) transform even after .wd-opened is added to the
   off-canvas menu, leaving it stuck off-screen with its content clipped
   (only the right sliver visible, text truncated on the left). Force the
   open state so it can't be overridden. */
.wd-side-hidden.wd-opened{transform:none !important;}

/* The homepage never enqueues WoodMart's header-base.min.css (it does load
   on the Shop page, which is why this only breaks here). That file is
   where ".wd-nav-mobile{display:none} .wd-nav-mobile.wd-active{display:
   block}" lives -- the rule that shows only the selected MENU/CATEGORIES
   tab's list in the off-canvas drawer. Without it both lists render at
   once, stacked together. Restore just that rule. */
.wd-nav-mobile{display:none !important;}
.wd-nav-mobile.wd-active{display:block !important;}

/* Same missing header-base.min.css: gives the selected MENU/CATEGORIES
   tab its own highlighted background instead of one flat gray strip
   covering both tabs. */
.wd-nav-mob-tab>li.wd-active>a{background-color:rgba(0,0,0,0.05) !important;}

/* Root cause of the remaining MENU/CATEGORIES styling mismatch: the
   header-base.min.css we now load (see functions.php) ends up printed
   BEFORE base.min.css in <head> on this custom-templated page, instead
   of after it like on normal WoodMart pages (e.g. /shop/). Several of
   its rules share identical specificity with more generic rules in
   base.min.css, so on this page the generic ones win the cascade tie
   and the tab strip renders squashed/flat instead of properly padded.
   Force the exact values measured from the working /shop/ page. */
.wd-nav-mob-tab{display:flex !important;}
.wd-nav-mob-tab .nav-link-text{padding:18px 15px !important;position:static !important;font-weight:900 !important;}
.wd-nav-mob-tab>li>a{font-weight:900 !important;}
.wd-nav-mob-tab>li.wd-active .nav-link-text,
.wd-nav-mob-tab>li.wd-active>a{color:rgb(51,51,51) !important;}
.wd-nav-mob-tab>li:not(.wd-active) .nav-link-text,
.wd-nav-mob-tab>li:not(.wd-active)>a{color:rgb(144,144,144) !important;}