/* ==========================================================================
   SC Wholesale — theme v2 (look & feel upgrade)
   Opt-in per page: add class "v2" to <body> and load this file after styles.css.
   Content/markup stays the same; this only changes colour, contrast, type and motion.
   ========================================================================== */
body.v2{
  --ink:#1a1214; --text:#2e2326; --muted:#524447;
  --red:#e11b22; --red-d:#b01419; --maroon:#231416; --maroon-2:#3d1d21;
  --gold:#f5b50b; --orange:#ff8a3d; --leaf:#1f8b4c; --teal:#0f8a7e;
  --cream:#fff7ea; --mint:#eaf7ef; --line:#eadcd9;
  --shadow-sm:0 1px 2px rgba(60,10,12,.05),0 10px 24px -16px rgba(60,10,12,.35);
  --shadow-lg:0 30px 60px -30px rgba(60,10,12,.55);
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  color:var(--text);background:#fff;font-size:17px;line-height:1.6
}
.v2 h1,.v2 h2,.v2 h3,.v2 h4{color:var(--ink);letter-spacing:-.015em}
.v2 footer h4{color:#fff}
.v2 footer{font-size:.95rem}
.v2 footer p{color:#e6d8d8}
.v2 footer a{color:#ffc9cc}
.v2 footer a:hover{color:#fff}

/* ---------- top bars ---------- */
.v2 .announce{background:var(--maroon);color:#f6e9e9;font-size:.84rem}
.v2 .announce b{color:var(--gold)}
.v2 .topbar{transition:box-shadow .3s}
.v2 .topbar.scrolled{box-shadow:0 10px 26px -12px rgba(120,10,15,.6)}
.v2 .nav a.navlink{position:relative;font-size:.9rem;font-weight:700;padding:4px 0}
.v2 .nav a.navlink::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.v2 .nav a.navlink:hover::after{transform:scaleX(1)}

/* ---------- buttons ---------- */
.v2 .btn{border-radius:999px;font-weight:800;padding:15px 26px;letter-spacing:.01em;box-shadow:0 12px 24px -14px rgba(60,10,12,.55);transition:transform .2s,box-shadow .2s,background .2s}
.v2 .btn:hover{transform:translateY(-3px);box-shadow:0 18px 30px -14px rgba(60,10,12,.6)}
.v2 .btn-wa{background:#1fb855;color:#fff;box-shadow:0 14px 26px -12px rgba(18,140,70,.65)}
.v2 .btn-wa:hover{background:#17a34a}
.v2 .btn-ghost{background:#fff;color:var(--red-d);border:2px solid var(--red)}
.v2 .btn-ghost:hover{background:var(--red);color:#fff}

/* ---------- section rhythm + headings ---------- */
.v2 section{padding:80px 0}
.v2 .sec-head{margin-bottom:34px}
.v2 .sec-head h2{font-size:clamp(1.75rem,3.1vw,2.35rem);font-weight:800;line-height:1.15;margin-bottom:10px}
.v2 .sec-head h2::before{content:"";display:block;width:52px;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--red),var(--orange),var(--gold));margin-bottom:16px}
.v2 .sec-head p{color:var(--muted);font-size:1.08rem;max-width:62ch}
.v2 section .lead{color:#3a2c2f;font-size:1.1rem;line-height:1.65}
.v2 section .lead b{color:var(--red-d)}

/* generic tinted section (sub-pages) — specific section rules below take priority */
.v2 section.soft{background:var(--cream)}

/* ---------- HERO ---------- */
.v2 .hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#fffaf3 0%,#fff1e5 55%,#ffe6e2 100%)}
.v2 .hero .blobs{position:absolute;inset:0;pointer-events:none;z-index:0}
.v2 .hero .blobs i{position:absolute;border-radius:50%;filter:blur(46px);opacity:.5;animation:v2float 16s ease-in-out infinite alternate}
.v2 .hero .blobs i:nth-child(1){width:460px;height:460px;background:#ffb3b7;top:-40px;right:-160px;opacity:.4}
.v2 .hero .blobs i:nth-child(2){width:360px;height:360px;background:#ffd66b;bottom:-170px;left:-90px;animation-duration:19s}
.v2 .hero .blobs i:nth-child(3){width:240px;height:240px;background:#9fe0b5;top:38%;left:42%;opacity:.35;animation-duration:22s}
@keyframes v2float{0%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-24px) scale(1.08)}100%{transform:translate(-24px,18px) scale(.96)}}
.v2 .hero .wrap{position:relative;z-index:1;padding:88px 18px 76px}
.v2 .eyebrow{background:var(--maroon);color:#ffd66b;border:0;font-weight:800;font-size:.76rem;letter-spacing:.1em;padding:8px 15px;box-shadow:0 8px 18px -10px rgba(35,20,22,.6)}
.v2 .hero h1{position:relative;isolation:isolate;font-size:clamp(2.3rem,4.3vw,3.45rem);font-weight:800;line-height:1.07;letter-spacing:-.025em;margin:4px 0 18px}
.v2 .hl{position:relative;color:var(--red);white-space:nowrap}
.v2 .hl::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.05em;height:.32em;border-radius:6px;background:var(--gold);opacity:.6;z-index:-1;transform-origin:left;animation:v2mark .9s .45s cubic-bezier(.3,.7,.2,1) both}
@keyframes v2mark{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.v2 .hero p.lead{color:#3a2c2f;font-size:1.18rem;line-height:1.6;max-width:40ch;margin-bottom:28px}
.v2 .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:30px;max-width:580px}
.v2 .stats div{--c:var(--red);background:#fff;border-radius:14px;padding:12px 12px 11px;border-top:4px solid var(--c);box-shadow:var(--shadow-sm);transition:transform .2s}
.v2 .stats div:hover{transform:translateY(-3px)}
.v2 .stats div:nth-child(2){--c:#e0a100}.v2 .stats div:nth-child(3){--c:var(--leaf)}.v2 .stats div:nth-child(4){--c:#17a34a}
.v2 .stats b{color:var(--c);font-size:1.22rem;white-space:nowrap;font-weight:800;line-height:1.1;filter:saturate(1.1)}
.v2 .stats div:nth-child(2) b{color:#b37f00}
.v2 .stats span{color:var(--muted);font-size:.78rem;font-weight:700}
.v2 .hero-photo{position:relative;overflow:visible;border:0;background:none;box-shadow:none;aspect-ratio:auto}
.v2 .hero-photo::before{content:"";position:absolute;inset:22px -16px -20px 26px;border-radius:30px;background:linear-gradient(135deg,var(--gold),var(--orange) 55%,var(--red));transform:rotate(3.5deg);z-index:0;opacity:.95}
.v2 .hero-photo>img{position:relative;z-index:1;width:100%;aspect-ratio:4/3.1;object-fit:cover;border-radius:24px;border:6px solid #fff;box-shadow:var(--shadow-lg)}
.v2 .hero .carousel{position:relative;z-index:1;border-radius:24px;border:6px solid #fff;box-shadow:var(--shadow-lg)}
.v2 .carousel .arrow{background:#fff;color:var(--red-d);box-shadow:0 6px 16px rgba(0,0,0,.25);transition:transform .2s}
.v2 .carousel .arrow:hover{transform:translateY(-50%) scale(1.1)}
.v2 .carousel .dots button.on{background:var(--gold)}
/* hero entrance */
.v2 .hero .wrap>div:first-child>*{animation:v2up .8s cubic-bezier(.2,.7,.2,1) both}
.v2 .hero .wrap>div:first-child>*:nth-child(2){animation-delay:.08s}
.v2 .hero .wrap>div:first-child>*:nth-child(3){animation-delay:.16s}
.v2 .hero .wrap>div:first-child>*:nth-child(4){animation-delay:.24s}
.v2 .hero .wrap>div:first-child>*:nth-child(5){animation-delay:.32s}
.v2 .hero-photo{animation:v2in .9s .15s cubic-bezier(.2,.7,.2,1) both}
@keyframes v2up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes v2in{from{opacity:0;transform:translateX(30px) rotate(1deg)}to{opacity:1;transform:none}}
@media(max-width:820px){
  .v2 .hero .wrap{padding:36px 18px 48px}
  .v2 .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v2 .hero-photo::before{inset:14px -8px -12px 14px}
}

/* ---------- cards (premise + products) ---------- */
.v2 .cat{border:0;border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden}
.v2 .cat:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.v2 .cat .ph img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.v2 .cat:hover .ph img{transform:scale(1.07)}
.v2 .cat .body{padding:18px 18px 20px}
.v2 .cat h3{font-size:1.16rem;font-weight:800}
.v2 .cat p{color:var(--muted);font-size:.93rem}
.v2 .cat a.pl{color:var(--red-d);font-weight:800;font-size:.88rem;text-decoration:none;align-self:flex-start;transition:color .2s,transform .2s}
.v2 .cat a.pl:hover{color:var(--red);transform:translateX(3px)}
.v2 .cat a.pl.wa-link{display:inline-flex;background:var(--red);color:#fff;padding:8px 15px;border-radius:999px;box-shadow:0 10px 18px -12px rgba(225,27,34,.8)}
.v2 .cat a.pl.wa-link:hover{background:var(--red-d);color:#fff;transform:translateY(-2px)}
.v2 .cat.more{background:linear-gradient(145deg,var(--maroon),var(--maroon-2));color:#f3e5e5;padding:26px;justify-content:center}
.v2 .cat.more h3{color:#fff}
.v2 .cat.more p{color:#e2cfd0}
.v2 .cat.more a.pl{color:var(--gold)}

/* ---------- premise section ---------- */
.v2 section.premise{background:#fff}

/* ---------- WHY US: dark contrast band ---------- */
.v2 section.why{position:relative;overflow:hidden;background:radial-gradient(900px 400px at 85% -10%,rgba(225,27,34,.35),transparent),linear-gradient(160deg,var(--maroon),var(--maroon-2))}
.v2 .why .sec-head h2{color:#fff}
.v2 .why .sec-head p{color:#e3d0d1}
.v2 .why .feat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:22px;box-shadow:none;backdrop-filter:blur(2px);transition:transform .25s,border-color .25s,background .25s}
.v2 .why .feat:hover{transform:translateY(-5px);border-color:rgba(245,181,11,.6);background:rgba(255,255,255,.09)}
.v2 .why .feat h3{color:#fff;font-size:1.1rem;font-weight:800;margin:4px 0 6px}
.v2 .why .feat p{color:#e6d6d7;font-size:.95rem}
.v2 .why .feat .ic{width:52px;height:52px;border-radius:14px;font-size:1.5rem;background:var(--c,var(--red));box-shadow:0 10px 20px -10px var(--c,var(--red));margin-bottom:12px}
.v2 .why .feat:nth-child(1){--c:#e11b22}.v2 .why .feat:nth-child(2){--c:#f5b50b}.v2 .why .feat:nth-child(3){--c:#ff8a3d}
.v2 .why .feat:nth-child(4){--c:#1f8b4c}.v2 .why .feat:nth-child(5){--c:#0f8a7e}.v2 .why .feat:nth-child(6){--c:#5aa832}

/* ---------- SUPPLY: warm cream ---------- */
.v2 #supply{background:var(--cream) radial-gradient(rgba(224,138,30,.12) 1.2px,transparent 1.2px) 0 0/22px 22px}

/* ---------- VISIT ---------- */
.v2 #visit{background:#fff}
.v2 .visit-gallery img{border:0;border-radius:20px;box-shadow:var(--shadow-sm);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.v2 .visit-gallery img:hover{transform:translateY(-5px) rotate(-.6deg);box-shadow:var(--shadow-lg)}
.v2 .info-card{border:0;border-radius:18px;box-shadow:var(--shadow-sm);padding:20px}
.v2 .info-card h4{font-size:1.05rem;font-weight:800;color:var(--ink)}
.v2 .info-card p{color:var(--muted)}
.v2 .rating .stars{color:var(--gold)}
.v2 .map-embed{border:0;border-radius:14px}
.v2 .outlets-list h3{font-size:1.3rem;font-weight:800}
.v2 .outlet-item{border-radius:16px;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s}
.v2 .outlet-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}

/* ---------- outlet cards (numbered, map, big Directions button) ---------- */
.v2 .outlets-list{margin-top:44px}
.v2 .ol-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:6px 0 18px}
.v2 .ol-legend span{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:800;color:var(--ink)}
.v2 .ol-legend span::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--acc)}
.v2 .ol-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:980px){.v2 .ol-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.v2 .ol-grid{grid-template-columns:1fr}}
.v2 .ol-card{display:flex;flex-direction:column;background:#fff;border:2px solid #f0e2d2;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s,border-color .25s}
.v2 .ol-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--acc) 55%,#fff);box-shadow:var(--shadow-lg)}
.v2 .ol-top{display:flex;align-items:center;gap:14px;padding:20px 20px 8px}
.v2 .ol-num{flex:none;width:54px;height:54px;border-radius:50%;background:var(--acc);color:#fff;font-weight:800;font-size:1.4rem;display:grid;place-items:center;box-shadow:0 0 0 5px color-mix(in srgb,var(--acc) 16%,#fff),0 10px 18px -10px var(--acc);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.v2 .ol-card:hover .ol-num{transform:scale(1.08) rotate(-6deg)}
.v2 .ol-brand{display:block;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--acc) 85%,#000)}
.v2 .ol-name{margin:2px 0 3px;font-size:1.32rem;font-weight:800;line-height:1.15;color:var(--ink)}
.v2 .ol-area{margin:0;font-size:.9rem;line-height:1.4;color:var(--muted);font-weight:600}
.v2 .ol-desc{margin:8px 20px 12px;font-size:.96rem;line-height:1.55;color:#3a2c2f}
.v2 .ol-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 20px 18px}
.v2 .ol-chips span{background:color-mix(in srgb,var(--acc) 11%,#fff);color:color-mix(in srgb,var(--acc) 75%,#000);font-size:.8rem;font-weight:800;padding:6px 12px;border-radius:999px}
.v2 .ol-map{margin-top:auto;aspect-ratio:16/10;background:#f3ece4;border-top:1px solid #f0e2d2;border-bottom:1px solid #f0e2d2}
.v2 .ol-map iframe{width:100%;height:100%;border:0;display:block}
.v2 .ol-go{display:block;margin:16px 18px 20px;padding:13px 16px;border-radius:999px;background:var(--gold);color:#3a2400;text-align:center;font-weight:800;font-size:1.05rem;text-decoration:none;box-shadow:0 6px 0 #d98a00,0 14px 22px -12px rgba(217,138,0,.8);transition:transform .15s,box-shadow .15s,background .2s}
.v2 .ol-go:hover{background:#ffc22e;transform:translateY(-2px);box-shadow:0 8px 0 #d98a00,0 18px 26px -12px rgba(217,138,0,.8)}
.v2 .ol-go:active{transform:translateY(4px);box-shadow:0 2px 0 #d98a00}

/* ---------- HOW TO ORDER: fresh mint ---------- */
.v2 section.order{background:linear-gradient(180deg,var(--mint),#f6fcf8)}
.v2 .order .steps{gap:22px}
.v2 .step{border:0;border-radius:20px;padding:30px 22px 24px;box-shadow:var(--shadow-sm)}
.v2 .step:before{width:40px;height:40px;top:-18px;background:linear-gradient(135deg,#1fb855,var(--teal));color:#fff;font-weight:800;box-shadow:0 10px 18px -8px rgba(15,138,126,.7)}
.v2 .step .emo{font-size:2.2rem}
.v2 .step h3{font-size:1.12rem;font-weight:800}
.v2 .step p{color:var(--muted)}

/* ---------- FAQ ---------- */
.v2 section.faq-sec{background:#fff}
.v2 .faq details{border:1px solid var(--line);border-radius:16px;padding:4px 8px;transition:border-color .25s,box-shadow .25s}
.v2 .faq details[open]{border-color:transparent;box-shadow:inset 5px 0 0 var(--red),var(--shadow-sm)}
.v2 .faq summary{font-weight:800;color:var(--ink);padding:16px 44px 16px 12px;position:relative}
.v2 .faq details[open] summary{color:var(--red-d)}
.v2 .faq summary:after{position:absolute;right:10px;top:50%;transform:translateY(-50%);float:none;width:28px;height:28px;border-radius:50%;background:#fdecea;color:var(--red);display:grid;place-items:center;font-size:1.1rem;transition:background .2s,color .2s}
.v2 .faq details[open] summary:after{background:var(--red);color:#fff}
.v2 .faq .ans{color:#3a2c2f;animation:v2up .45s ease both}

/* ---------- careers teaser + CTA band ---------- */
.v2 .hire .hw{box-shadow:var(--shadow-sm)}
.v2 .band{position:relative;overflow:hidden;background:linear-gradient(135deg,#a3101a,#e11b22 55%,#ff5a3c)}
.v2 .band::before,.v2 .band::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.08)}
.v2 .band::before{width:340px;height:340px;left:-100px;top:-140px}
.v2 .band::after{width:260px;height:260px;right:-60px;bottom:-130px;background:rgba(245,181,11,.18)}
.v2 .band .wrap{position:relative;z-index:1}
.v2 .band h2{color:#fff;font-size:clamp(1.7rem,3vw,2.2rem);font-weight:800}
.v2 .band .btn-wa{background:#fff;color:#0f7a3a}


/* ==========================================================================
   Sub-pages: same rhythm as the homepage, detected from each section's content
   ========================================================================== */
/* "why choose us" feature blocks -> dark contrast band */
.v2 section.soft:has(> .wrap > .feats){position:relative;overflow:hidden;background:radial-gradient(900px 400px at 85% -10%,rgba(225,27,34,.35),transparent),linear-gradient(160deg,var(--maroon),var(--maroon-2))}
.v2 section.soft:has(> .wrap > .feats) .sec-head h2{color:#fff}
.v2 section.soft:has(> .wrap > .feats) .sec-head p{color:#e3d0d1}
.v2 section.soft:has(> .wrap > .feats) .feat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:22px;box-shadow:none;backdrop-filter:blur(2px);transition:transform .25s,border-color .25s,background .25s}
.v2 section.soft:has(> .wrap > .feats) .feat:hover{transform:translateY(-5px);border-color:rgba(245,181,11,.6);background:rgba(255,255,255,.09)}
.v2 section.soft:has(> .wrap > .feats) .feat h3{color:#fff;font-size:1.1rem;font-weight:800;margin:4px 0 6px}
.v2 section.soft:has(> .wrap > .feats) .feat p{color:#e6d6d7;font-size:.95rem}
.v2 section.soft:has(> .wrap > .feats) .feat .ic{width:52px;height:52px;border-radius:14px;font-size:1.5rem;background:var(--c,var(--red));box-shadow:0 10px 20px -10px var(--c,var(--red));margin-bottom:12px}
.v2 section.soft:has(> .wrap > .feats) .feat:nth-child(1){--c:#e11b22}.v2 section.soft:has(> .wrap > .feats) .feat:nth-child(2){--c:#f5b50b}.v2 section.soft:has(> .wrap > .feats) .feat:nth-child(3){--c:#ff8a3d}
.v2 section.soft:has(> .wrap > .feats) .feat:nth-child(4){--c:#1f8b4c}.v2 section.soft:has(> .wrap > .feats) .feat:nth-child(5){--c:#0f8a7e}.v2 section.soft:has(> .wrap > .feats) .feat:nth-child(6){--c:#5aa832}
/* feature blocks on white ("how it works") and step blocks -> fresh mint */
.v2 section:not(.soft):not(.why):has(> .wrap > .feats),.v2 section:has(> .wrap > .steps){background:linear-gradient(180deg,var(--mint),#f6fcf8)}
.v2 section:not(.soft):not(.why):has(> .wrap > .feats) .feat{background:#fff;border:0;border-radius:18px;padding:22px;box-shadow:var(--shadow-sm)}
.v2 section:not(.soft):not(.why):has(> .wrap > .feats) .feat h3{font-weight:800}
.v2 section:not(.soft):not(.why):has(> .wrap > .feats) .feat p{color:var(--muted)}
.v2 section:not(.soft):not(.why):has(> .wrap > .feats) .feat .ic{width:52px;height:52px;border-radius:14px;background:#dff3e7}
/* product/category grids on tinted sections -> warm cream with dots */
.v2 section.soft:has(> .wrap > .cats){background:var(--cream) radial-gradient(rgba(224,138,30,.12) 1.2px,transparent 1.2px) 0 0/22px 22px}
/* FAQ sections -> clean white (they usually follow the dark band) */
.v2 section.soft:has(> .wrap > .faq){background:#fff}
/* slim intro sections right under the header (e.g. FAQ page) — clear the overhanging logo */
.v2 .topbar + section[style]{padding-top:92px!important}
@media(max-width:520px){.v2 .topbar + section[style]{padding-top:64px!important}}
/* default feature cards anywhere else */
.v2 .feat{border-radius:18px}
.v2 .feat .ic{border-radius:14px}

/* careers pages keep their own design; just keep their headings light on dark/red */
.v2.careers .c-band h2,.v2.careers .c-teams-wrap h2{color:#fff}
.v2.careers .c-band p{color:#fff}

/* ---------- floating WhatsApp: gentle pulse ---------- */
.v2 .wa-float{background:#1fb855}
.v2 .wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:#1fb855;z-index:-1;animation:v2pulse 2.6s ease-out infinite}
@keyframes v2pulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.7);opacity:0}}

/* ---------- scroll reveal (added by script.js on .v2 pages) ---------- */
.v2 .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease var(--rd,0ms),transform .75s cubic-bezier(.2,.7,.2,1) var(--rd,0ms)}
.v2 .rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .v2 *,.v2 *::before,.v2 *::after{animation:none!important;transition:none!important}
  .v2 .rv{opacity:1;transform:none}
}