/* =====================================================================
   Ikra premium layer (loads LAST). Design tokens -> depth -> motion.
   Contrast-checked: ink 16:1, muted 6.4:1, brand rose 5.3:1 on white.
   ===================================================================== */
.sf{
  /* colour tokens (AA on --bg and white) */
  --c-brand:#258c58;--c-brand-600:#1e794c;--c-brand-700:#16663e;--c-brand-50:#f0fdf6;--c-brand-100:#d9f7e8;
  --c-ink:#162a20;--c-ink-2:#2d4137;--c-muted:#3c5046;--c-line:#d8efe3;--c-gold:#8a6428;--c-gold-300:#d9b26f;--c-ok:#12803f;
  --mute:#3c5046;--gold:#8a6428;--line:#d8efe3;
  /* spacing scale (4px base) */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--gut:clamp(14px,3.2vw,28px);--sec:clamp(36px,6vw,72px);
  /* radius */
  --r-1:8px;--r-2:12px;--r-3:16px;--r-4:24px;--r-pill:999px;
  /* layered, rose-tinted elevation */
  --e-1:0 1px 2px rgba(20,80,50,.06),0 2px 6px rgba(20,80,50,.05);
  --e-2:0 2px 4px rgba(20,80,50,.05),0 8px 18px rgba(22,102,62,.09);
  --e-3:0 4px 8px rgba(20,80,50,.05),0 16px 32px rgba(22,102,62,.13),0 36px 60px -24px rgba(22,102,62,.18);
  --e-4:0 8px 16px rgba(20,80,50,.07),0 28px 56px rgba(22,102,62,.2),0 60px 90px -30px rgba(22,102,62,.28);
  /* type scale */
  --fs-xs:.8125rem;--fs-sm:.9rem;--fs-md:1rem;--fs-lg:1.15rem;--fs-xl:clamp(1.35rem,2.4vw,1.75rem);--fs-2xl:clamp(1.75rem,4vw,2.6rem);--fs-3xl:clamp(2.1rem,5.4vw,3.6rem);
  /* motion */
  --ease:cubic-bezier(.22,.8,.22,1);--spring:cubic-bezier(.2,.9,.3,1.35);--t-fast:.18s;--t-med:.35s;--t-slow:.7s;
  font-size:16px;line-height:1.6;color:var(--c-ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"kern","liga";
  background:var(--bg)
}
/* ---------- accessibility ---------- */
.sf :focus-visible{outline:3px solid var(--c-brand);outline-offset:3px;border-radius:6px}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--c-ink);color:#fff;padding:12px 18px;border-radius:var(--r-2);font-weight:700;transition:top .2s}.skip:focus{top:12px}
.sf button,.sf .btn-red,.sf [type=submit]{min-height:44px}
.sf-bnav button,.sf-bnav a{min-height:48px}
.sf-ann{color:#e9fbf2}.sf .mute{color:var(--c-muted)}
.sf-foot a,.sf-foot .mute{color:#c7e9d8}
/* ---------- typography ---------- */
.sf h1,.sf h2,.sf h3{text-wrap:balance;line-height:1.12;color:var(--c-ink)}
.sf h1{font-size:var(--fs-3xl)}.sf h2{font-size:var(--fs-2xl)}.sf h3{font-size:var(--fs-xl)}
.sf p{text-wrap:pretty}
.sf .pr,.sf-sum b,.iv b,.oc-sum b,.sf-bar,.ci b{font-variant-numeric:tabular-nums lining-nums}
.sf-sec h2{letter-spacing:-.005em}
/* ---------- rhythm ---------- */
.sf-wrap{padding:var(--s-5) var(--gut) var(--s-8)}
.sf-sec{margin:var(--sec) 0}
.sf-sec .hd{margin-bottom:var(--s-5)}
.sf-grid{gap:clamp(12px,2vw,24px)}
/* ---------- depth: header, buttons ---------- */
.sf-top{background:rgba(249,254,252,.78);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);box-shadow:0 1px 0 var(--c-line)}
.sf-top.sc{box-shadow:var(--e-2)}
.sf .btn-red,.sf .b2,.oc-cta,.iv-act .b1{background:linear-gradient(180deg,#23a363 0,var(--c-brand) 45%,var(--c-brand-600) 100%);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -2px 0 rgba(0,0,0,.12) inset,0 10px 22px -6px rgba(37,140,88,.55);transition:transform var(--t-fast) var(--ease),box-shadow var(--t-med) var(--ease),filter var(--t-fast)}
.sf .btn-red:hover,.sf .b2:hover{transform:translateY(-2px);filter:saturate(1.1);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -2px 0 rgba(0,0,0,.12) inset,0 16px 28px -8px rgba(37,140,88,.6)}
.sf .btn-red:active,.sf .b2:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.15) inset,0 4px 10px -4px rgba(37,140,88,.5)}
/* ---------- 3D product cards ---------- */
.sf-grid{perspective:1200px}
.pc{position:relative;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-3);box-shadow:var(--e-1);transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease),border-color var(--t-med);will-change:transform;overflow:hidden}
.jsr .sf-sec.in .sf-grid>.pc,.jsr .sf-sec.in .sf-grid>.pc.tl{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.pc:hover{box-shadow:var(--e-3);border-color:var(--c-brand-100)}
.pc.tl{transition:transform .12s linear,box-shadow var(--t-med)!important;transition-delay:0s!important}
.pc:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.5),transparent 60%);mix-blend-mode:soft-light;transition:opacity var(--t-med)}
.pc:hover:after{opacity:1}
.pc .im{overflow:hidden}.pc .im img{transition:transform .8s var(--ease);transform:scale(1.001) translate(var(--px,0),var(--py,0))}
.pc:hover .im img{transform:scale(1.07) translate(var(--px,0),var(--py,0))}
.pc .bd{box-shadow:0 6px 14px -4px rgba(37,140,88,.45);font-weight:800;letter-spacing:.04em}
.pc .nm{font-weight:700;color:var(--c-ink);line-height:1.35}.pc .pr{font-weight:800;color:var(--c-brand-600);font-size:1.05rem}.pc .pr s{color:var(--c-muted);font-weight:500;margin-left:6px}
/* category tiles: lifted glass */
.sf-tiles>*{box-shadow:var(--e-2);transition:transform var(--t-med) var(--spring),box-shadow var(--t-med)}
.sf-tiles>*:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--e-4)}
/* ---------- layered surfaces ---------- */
.oc,.sf-sum,.sf-cartlist .ci,.iv{box-shadow:var(--e-3)}
.oc{background:linear-gradient(180deg,#fff,#fbfefc)}
.sf-foot{background:radial-gradient(120% 140% at 0 0,#1b3a2b 0,#162a20 55%,#0f1d16 100%);position:relative;overflow:hidden}
.sf-foot:before{content:"";position:absolute;width:520px;height:520px;right:-160px;top:-220px;border-radius:50%;background:radial-gradient(closest-side,rgba(37,140,88,.35),transparent)}
.sf-foot>*{position:relative}
/* ---------- generative UI: drifting aurora blobs seeded per visit ---------- */
.gen{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;border-radius:inherit}
.gen i{position:absolute;border-radius:50%;filter:blur(46px);opacity:.55;mix-blend-mode:multiply;will-change:transform;animation:genDrift var(--d,18s) ease-in-out infinite alternate}
@keyframes genDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(var(--dx,40px),var(--dy,30px),0) scale(var(--sc,1.25))}}
.sf-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sf-bg i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.38;animation:genDrift var(--d,26s) ease-in-out infinite alternate}
/* scroll progress */
.sf-prog{position:fixed;left:0;top:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--c-brand),var(--c-gold-300));z-index:120;pointer-events:none}
/* reveal system (progressive enhancement) */
.jsr [data-rv]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.jsr [data-rv].in{opacity:1;transform:none}
/* hero depth */
.sf-hero{box-shadow:var(--e-4);border-radius:var(--r-4);overflow:hidden;transform:translateZ(0)}
.sf-hero .sl img{transform:scale(1.06);transition:transform 6s var(--ease),opacity .9s}.sf-hero .sl.on img{transform:scale(1)}
/* thank-you / invoice hero gets generative blobs too */
.iv-hero{isolation:isolate}

.iv-hero h1{font-size:clamp(1.6rem,4vw,2.4rem)}
.sf-hero h1{font-size:clamp(1.9rem,4.6vw,3.3rem)}
/* ---------- responsive polish ---------- */
@media(max-width:640px){.sf{--sec:36px}.sf h1{font-size:clamp(1.7rem,8vw,2.2rem)}.pc{border-radius:var(--r-2)}.sf-sec .hd{margin-bottom:var(--s-4)}}
@media(hover:none){.pc{transform:none!important}.pc:after{display:none}}
@media(prefers-contrast:more){.sf{--c-line:#589175;--c-muted:#334a3f}.pc{border-color:#589175}}
@media(prefers-reduced-motion:reduce){.gen i,.sf-bg i{animation:none}.jsr [data-rv]{opacity:1;transform:none;transition:none}.pc{transform:none!important}}

/* ---------- recently viewed ---------- */
.sf-rv{padding:8px 0 40px}.sf-rv .in{max-width:1180px;margin:0 auto;padding:0 16px}
.sf-rv h2{font-size:24px;margin:0 0 14px}
.sf-rv .g{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.sf-rv .c{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .25s,box-shadow .25s}
.sf-rv .c:hover{transform:translateY(-4px);box-shadow:0 18px 30px -18px rgba(22,42,32,.35)}
.sf-rv img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--blush)}
.sf-rv b{display:block;font-weight:500;font-size:13px;padding:8px 10px 0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sf-rv span{display:block;padding:2px 10px 10px;color:var(--red);font-weight:700;font-size:13.5px}

/* ---------- compare ---------- */
@keyframes cmpIn{from{opacity:0;transform:translate(-50%,12px)}}

/* ---------- several sizes in one order ---------- */
.oc-lines{display:grid;gap:8px;margin:12px 0 4px}
.oc-line{display:grid;grid-template-columns:1fr auto 30px;gap:10px;align-items:center;padding:10px 12px;border:1.5px solid var(--petal);border-radius:14px;background:var(--blush);animation:cmpIn .25s both}
.oc-line b{color:var(--red)}.oc-line button{width:28px;height:28px;border-radius:50%;border:0;background:#fff;color:var(--red);cursor:pointer;font-size:17px;line-height:1}
.oc-addline{display:block;width:100%;margin:10px 0 2px;padding:11px;border:1.5px dashed var(--red);border-radius:14px;background:#fff;color:var(--red);font:700 14px var(--font);cursor:pointer;transition:background .2s}
.oc-addline:hover{background:var(--blush)}

/* ---------- product FAQ ---------- */
.sf-faq details{border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:10px;overflow:hidden;transition:box-shadow .2s}
.sf-faq details[open]{box-shadow:0 12px 26px -18px rgba(22,42,32,.4);border-color:#b9e3ce}
.sf-faq summary{padding:14px 16px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px}
.sf-faq summary::-webkit-details-marker{display:none}.sf-faq summary:after{content:"+";color:var(--red);font-size:20px;line-height:1;transition:transform .2s}
.sf-faq details[open] summary:after{transform:rotate(45deg)}
.sf-faq p{padding:0 16px 14px;color:var(--mute);line-height:1.7}

/* Category slider: 2-3 visible, swipe / arrows for the rest */
.sf-tiles.sf-slide{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 2px 12px}
.sf-tiles.sf-slide::-webkit-scrollbar{display:none}
.sf-tiles.sf-slide>.tile{flex:0 0 calc((100% - 28px)/3);min-width:0;scroll-snap-align:start}
@media(max-width:700px){.sf-tiles.sf-slide>.tile{flex:0 0 calc((100% - 12px)/2.35)}.sf-tiles.sf-slide{gap:12px}}
@media(min-width:1000px){.sf-tiles.sf-slide>.tile{flex-basis:calc((100% - 42px)/4)}}
.sf-arr{display:flex;gap:8px}.sf-arr button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:22px;line-height:1;cursor:pointer;color:var(--ink);box-shadow:0 6px 14px -8px rgba(0,0,0,.3)}
.sf-arr button:hover{background:var(--red);color:#fff;border-color:var(--red)}
@media(max-width:700px){.sf-arr{display:none}}

/* ---- card buttons: [cart] [Order now] ---- */
.pc .bt{grid-template-columns:46px 1fr}
.pc .bt .b1,.pc .bt .b2{order:0}
.pc .bt .b1{padding:10px 0}
.pc .bt form{display:block;min-width:0}.pc .bt form>button{width:100%}
.pc .bt .b2{white-space:nowrap}
@media(max-width:380px){.pc .bt{grid-template-columns:40px 1fr;gap:5px}}
/* ---- quick choose popup (size / colour) on product cards ---- */
.qp{--h:50px;--r:12px;border:0;border-radius:22px;padding:18px;width:min(460px,94vw);max-height:90vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.35);color:var(--ink)}
.qp::backdrop{background:rgba(10,20,15,.55)}
.qp-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.qp-h b{font-size:17px;line-height:1.3}.qp-h button{border:0;background:none;font-size:22px;cursor:pointer;color:var(--mute);line-height:1}
.qp-q{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:600;font-size:14px}
.qp-tot{display:flex;justify-content:space-between;align-items:center;margin:14px 0 10px;font-weight:700}.qp-tot b{color:var(--red);font-size:20px}
.qp .oc-cta{width:100%}
/* ---- order form: one size/colour picker per piece ---- */
.oc-slots,#ocSlots{display:grid;gap:10px;margin:6px 0 4px}
.oc-slot{border:1.5px solid var(--petal);border-radius:16px;padding:12px 14px;background:#fff;transition:border-color .2s,background .2s}
.oc-slot.done{border-color:#bfe6cf;background:#f6fcf8}
.oc-slot.shake{border-color:var(--red)}
.oc-slot-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;min-height:0}
.oc-slot-h b{font-size:14px;color:var(--ink)}.oc-slot-h span{font-weight:700;color:var(--red);font-size:14px}
.oc-slot-h b:empty{display:none}
.oc-slot .oc-pills{margin-bottom:8px}
.oc-slot-err{margin:6px 0;color:var(--red);font-size:13.5px;font-weight:600}
.oc-wa{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;margin-top:10px;border-radius:14px;background:#25a164;color:#fff;font:700 15px var(--font);text-decoration:none;transition:.2s}
.oc-wa:hover{background:#1b8a53;color:#fff}.oc-wa:active{transform:scale(.97)}

/* ---- add-to-cart toast + fly animation ---- */
.cart-toast{position:fixed;left:50%;bottom:92px;z-index:2147482000;display:flex;align-items:center;gap:14px;max-width:calc(100vw - 28px);padding:12px 16px;border-radius:99px;background:var(--plum,#162a20);color:#fff;font-weight:600;font-size:14px;box-shadow:0 16px 40px rgba(0,0,0,.3);transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.2,.9,.3,1.2),opacity .25s}
.cart-toast.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.cart-toast .m:before{content:"✓";display:inline-grid;place-items:center;width:20px;height:20px;margin-right:8px;border-radius:50%;background:#25a164;color:#fff;font-size:12px}
.cart-toast.err .m:before{content:"!";background:var(--red)}
.cart-toast a{color:#fff;background:var(--red);border-radius:99px;padding:6px 12px;text-decoration:none;font-weight:700;white-space:nowrap}
@media(min-width:900px){.cart-toast{bottom:28px}}

/* ---- Clean buy box: options + buttons first, delivery details open on "Buy now" ---- */
.oc{border:0;box-shadow:none;background:none;border-radius:0;animation:none}
.oc:before{display:none}
.oc form,.oc>form{padding:0;gap:14px}
.oc form>*{animation:none}
.oc-step{font-size:14px;font-weight:700;color:var(--ink);margin:2px 0 0}
.oc-step i{display:none}
.oc-row{display:flex;gap:12px;align-items:center}
.oc-acts{display:flex;flex-direction:column;gap:10px}
.oc-acts2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.oc-acts .oc-alt,.oc-acts .oc-wabtn{height:48px;margin:0;font-size:14.5px}
.oc-acts .oc-wabtn{display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid #25d366;color:#128c4a;background:#f3fff8;border-radius:14px;font-weight:700;text-decoration:none}
.oc-acts .oc-wabtn:hover{background:#e3fbee}
.oc-panel{display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--petal);border-radius:18px;padding:16px;margin-top:2px;animation:ocUp .35s both}
.oc-panel[hidden]{display:none}
@media(max-width:420px){.oc-acts2{grid-template-columns:1fr}}
/* quieter extras under the buy box */
.sf-actions{margin-top:14px;padding-top:12px;border-top:1px solid var(--petal)}
.sf-actions .wa{display:none}
/* review slider */
.rvs{position:relative}
.rvs-t{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px}
.rvs-t::-webkit-scrollbar{display:none}
.rvc{flex:0 0 78%;max-width:300px;scroll-snap-align:start;background:#fff;border:1px solid var(--petal);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
@media(min-width:700px){.rvc{flex-basis:260px}}
.rvc .ph{display:block;aspect-ratio:3/4;background:var(--petal)}.rvc .ph img{width:100%;height:100%;object-fit:cover;display:block}
.rvc .tx{padding:12px 14px;display:flex;flex-direction:column;gap:4px;font-size:14px}
.rvc .st{color:#d97706;letter-spacing:1px}.rvc .st span{color:#d9e5df}
.rvc p{margin:2px 0;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rvc small{color:var(--ok);font-size:12px}
.rvs-n{position:absolute;top:40%;width:38px;height:38px;border-radius:50%;border:0;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.2);font-size:24px;line-height:1;cursor:pointer;display:none}
.rvs-n.prev{left:-6px}.rvs-n.next{right:-6px}
@media(min-width:700px){.rvs-n{display:block}}
/* review form on track page */
.rvw{margin:2px 0 12px;padding:0 4px}.rvw summary{cursor:pointer;color:var(--red);font-weight:600;font-size:14px}
.rvw form{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.rvw textarea{border:1px solid var(--line);border-radius:12px;padding:10px;font:inherit;width:100%}
.rvw-ph{font-size:12px;color:var(--mute)}.rvw-done{color:var(--ok)}
.rvw-st{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.rvw-st input{position:absolute;opacity:0}.rvw-st label{font-size:30px;color:#d0d9d4;cursor:pointer;line-height:1}
.rvw-st input:checked~label,.rvw-st label:hover,.rvw-st label:hover~label{color:#f59e0b}

/* =====================================================================
   ERP green storefront (v39)
   ===================================================================== */
.sf{--red:#168B55;--red-d:#0C6D40;--rose:#168B55;--rose-d:#0C6D40;--blush:#E9FFF2;--petal:#CDEFDC;--ink:#27313D;--mute:#687282;--line:#E8EDF1;--bg:#F7F9FB;--plum:#27313D;--ok:#168B55;--bad:#E94D5C;--disp:var(--font)}
.sf{background:#fff}
.sf h1,.sf h2,.sf h3,.sf .sf-h1{font-family:var(--font);font-style:normal;letter-spacing:0}
.sf-ann{background:#0C6D40;color:#fff}
.sf-util{background:#F7F9FB;border-bottom:1px solid #E8EDF1;color:#687282}
.sf-top{background:#fff;border-bottom:1px solid #E8EDF1;box-shadow:none}
.sf-top.sc{box-shadow:0 2px 12px rgba(38,51,68,.08)}
.sf-logo{color:#168B55;font-weight:800;font-family:var(--font);font-style:normal;letter-spacing:0}
.sf-search{border:1.5px solid #168B55;border-radius:6px;background:#fff}
.sf-search button{background:#168B55;color:#fff;border-radius:0}
.sf-search select{border-right:1px solid #E8EDF1}
.sf-nav{background:#168B55}.sf-nav a{color:#fff;font-weight:600}.sf-nav a:hover{background:rgba(0,0,0,.12)}.sf-nav a.on{background:#0C6D40;color:#fff;box-shadow:none}
.sf-ic b,.sf-hot b{background:#E94D5C}
.sf-cat .c{background:#E9FFF2;border:2px solid #CDEFDC}
.sf-sec .hd:after{background:#168B55}
.sf-sec .va{background:#168B55;color:#fff;border-radius:5px}.sf-sec .va:hover{background:#0C6D40}
.pc{border-radius:10px;border-color:#E8EDF1;box-shadow:0 2px 10px rgba(38,51,68,.05)}
.pc:hover{box-shadow:0 8px 22px rgba(38,51,68,.12);transform:none}
.pc .bd{background:#168B55;color:#fff}
.pc .pr{color:#168B55}
.pc .b1{border-color:#CDEFDC;color:#168B55;background:#fff}.pc .b1:hover{background:#E9FFF2;border-color:#168B55}
.pc .b2,.pc .bt .b2{background:#168B55;color:#fff}.pc .b2:hover{background:#0C6D40}
.btn-red,.oc-cta,.oc-acts .oc-buy{background:#168B55!important;color:#fff!important;border-radius:6px;box-shadow:none}
.btn-red:hover,.oc-cta:hover{background:#0C6D40!important}
.btn-line{border-radius:6px;border-color:#CDEFDC}.btn-line:hover{border-color:#168B55;color:#168B55}
.sf-foot{background:#1d2b25;color:#cfe3d8}.sf-foot b{color:#fff}.sf-foot a{color:#9fe0bf}
.sf-bnav a.on,.sf-bnav button.on{color:#168B55}
.sf-fab{background:#168B55}
.oc-err,.ad-flash.err{background:#FDECEE;border:1px solid #F6C6CC;color:#B3283A}
.oc-f.bad input,.oc-f.bad textarea{border-color:#E94D5C}
.oc-slot-err{color:#E94D5C}.cart-toast.err .m:before{background:#E94D5C}
.sf input:focus,.sf select:focus,.sf textarea:focus{border-color:#168B55}
.sf ::selection{background:#CDEFDC}
.sf-hero{background:linear-gradient(120deg,#0C6D40,#168B55 55%,#34b27a);border-radius:10px;box-shadow:0 2px 10px rgba(38,51,68,.08)}
.sf-hero .ph h1,.sf-hero .ph p{color:#fff}
.sf-hero .ph a{background:#fff;color:#168B55;border-radius:6px}
.pc .bt button,.pc .bt a{border-radius:6px!important}.pc .b2,.pc .bt .b2{box-shadow:none!important}
/* footer fixes (v41): stacked links, tidy headings, room for the mobile bottom bar */
.sf-foot .in>div>a{display:block;margin:6px 0}
.sf-foot .soc a{display:inline-block;margin:0}
.sf-foot b{font-family:var(--font);font-size:16px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.sf-foot .in>div{line-height:1.6;font-size:14px}
@media(max-width:760px){.sf-foot .in{padding-bottom:96px!important}.sf-foot{margin-top:28px}}

/* ===== compact footer (v42) ===== */
.ft{margin-top:36px;background:#F3FAF6;border-top:2px solid #168B55;color:#47584f;font-size:13.5px}
.ft-in{max-width:1180px;margin:auto;padding:22px 16px 16px;display:grid;grid-template-columns:1.4fr 1.2fr 1fr;gap:22px}
.ft-logo{font-weight:800;font-size:19px;color:#168B55;text-decoration:none;display:inline-block;margin-bottom:6px}
.ft-brand p{margin:0 0 10px;line-height:1.55;max-width:34ch;color:#5d6f65}
.ft-soc{display:flex;gap:7px;flex-wrap:wrap}
.ft-soc a{width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid #cdeadb;color:#168B55;font-size:10.5px;font-weight:800;display:grid;place-items:center;text-decoration:none;transition:background .15s,color .15s}
.ft-soc a:hover{background:#168B55;color:#fff}
.ft-col h4{margin:0 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#168B55;font-weight:800}
.ft-col a,.ft-col span{display:flex;align-items:flex-start;gap:7px;margin:0 0 6px;color:#47584f;text-decoration:none;line-height:1.45}
.ft-col a:hover{color:#168B55}.ft-col svg{margin-top:2px;color:#168B55;flex:none}.ft-col .mut{color:#87909E;font-size:12.5px}
.ft-bar{max-width:1180px;margin:auto;padding:10px 16px;border-top:1px solid #dcefe4;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:#7a8a82}
.ft-pay{display:flex;gap:6px;flex-wrap:wrap}.ft-pay i{font-style:normal;background:#fff;border:1px solid #cdeadb;border-radius:4px;padding:1px 8px;color:#168B55;font-weight:600}
@media(max-width:760px){.ft{margin-top:24px}.ft-in{grid-template-columns:1fr 1fr;gap:14px;padding:18px 14px 10px}.ft-brand{grid-column:1/-1}.ft-bar{padding-bottom:78px}}

/* clean white page (v42): no drifting colour blobs, tighter bottom space */
.sf-bg,.gen{display:none!important}
.sf-wrap{padding-bottom:12px}
.sf-sec:last-of-type{margin-bottom:8px}
:root{--c-brand:#168B55;--c-brand-600:#0C6D40}

/* ===== v55: banner and hero are never cut — phone and PC ===== */
.sf-hero.is-img{aspect-ratio:var(--hr,16/6);height:auto;background:#eef3f0}
.sf-hero.is-img .sl picture{display:block;width:100%;height:100%}
.sf-hero.is-img .sl img{width:100%;height:100%;object-fit:cover;transform:none!important;animation:none!important}
.sf-hero.is-img .sl .cap{font-size:clamp(16px,4.2vw,52px);max-width:min(560px,86%);bottom:14%}
.sf-hero.is-txt{aspect-ratio:auto;height:auto;min-height:0}
.sf-hero.is-txt .sl{position:relative;inset:auto;display:block;opacity:1;pointer-events:auto}
.sf-hero.is-txt .ph{position:relative;inset:auto;padding:44px 7%;min-height:200px;z-index:2}
.sf-hero.is-txt .ph h1{font-size:clamp(24px,5.4vw,56px);line-height:1.15;overflow-wrap:anywhere}
.sf-hero.is-txt .ph p{overflow-wrap:anywhere}
@media(max-width:760px){
  .sf-hero.is-img{border-radius:14px}
  .sf-hero.is-img .sl .cap{left:14px;bottom:30px;max-width:calc(100% - 28px);font-size:16px;line-height:1.2}
  .sf-hero.is-img .ar{width:28px;height:28px}.sf-hero.is-img .ar.l{left:6px}.sf-hero.is-img .ar.r{right:6px}
  .sf-hero.is-img .dots{bottom:6px}
  .sf-hero.is-txt .ph{padding:28px 18px;min-height:170px}
  .sf-hero.is-txt .ph a{padding:11px 22px}
}

/* ===== v60: header never cuts the search bar or the store name ===== */
.sf-top .in{min-width:0}
.sf-logo{min-width:0;flex:0 1 auto;max-width:34%;white-space:normal;overflow-wrap:anywhere;line-height:1.1}
.sf-logo img{max-width:100%;object-fit:contain}
.sf-search{flex:1 1 260px;min-width:220px}
.sf-search input{min-width:0;width:100%}
.sf-search button,.sf-search select{flex:none}
.sf-acts{flex:none}
@media(max-width:1100px){.sf-search select{display:none}.sf-logo{font-size:26px;max-width:40%}}
@media(max-width:760px){
  .sf-logo{max-width:none;flex:1 1 0;font-size:clamp(18px,6.2vw,27px);overflow:visible;text-overflow:clip}
  .sf-search{flex:1 0 100%;min-width:0}
}