/* SuperCat customer site — mobile-first, SuperCat yellow + BIS red on warm cream */
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-900.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-600i.woff2') format('woff2');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Jakarta';src:url('../fonts/jakarta-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Jakarta';src:url('../fonts/jakarta-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Jakarta';src:url('../fonts/jakarta-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Jakarta';src:url('../fonts/jakarta-800.woff2') format('woff2');font-weight:800;font-display:swap}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
:root{
  --yellow:#FFC72C; --yellow-soft:#FFE9A8; --red:#D62828; --red-dk:#B71F1F;
  --ink:#231A12; --muted:#6E6155; --soft:#9A8C7C; --cream:#FDF6EE; --panel:#FFF3D6;
  --card:#FFFFFF; --line:#EFE4D2; --good:#1B7F4B;
  --rad:18px; --wrap:1120px;
  /* radii already in use, named */
  --r-ctl:14px; --r-media:20px; --r-pill:99px;
  /* two shadow recipes in SuperCat's own warm tint, replacing 12 ad-hoc values */
  --shadow-card:0 14px 30px rgba(60,40,0,.12);
  --shadow-media:0 10px 34px rgba(60,40,0,.08);
  --shadow-pop:0 4px 14px rgba(60,40,0,.10),0 24px 52px -22px rgba(60,40,0,.30);
  /* motion: strong curves + one duration scale, replacing 5 ad-hoc values on default ease */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --t-press:140ms; --t-hover:180ms; --t-ui:240ms; --t-reveal:480ms;
}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html,body{overflow-x:hidden}
body{font-family:'Jakarta',system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:900;line-height:1.1}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
section{padding:56px 0}
.kick{font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:800;color:var(--red);margin-bottom:10px}
.h2{font-size:clamp(26px,4.5vw,40px);margin-bottom:10px}
.h2 em{color:var(--red);font-style:italic;font-weight:600}
.sub{color:var(--muted);max-width:640px;margin-bottom:28px}

/* topbar */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;padding:10px 20px;background:rgba(253,246,238,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.tblogo img{height:44px;width:auto}
.tbnav{display:none;gap:4px;margin-left:auto}
.tbnav a{padding:8px 12px;border-radius:99px;font-size:14px;font-weight:600;color:var(--muted)}
.tbnav a.active{background:var(--panel);color:var(--ink)}
.tbright{display:flex;align-items:center;gap:8px;margin-left:auto}
.tbnav:not(:empty)~.tbright{margin-left:0}
.langbtn{border:1.5px solid var(--ink);border-radius:99px;padding:5px 12px;font-weight:800;font-size:13px}
.burger{display:flex;flex-direction:column;gap:4px;padding:8px}
.burger span{width:20px;height:2.5px;background:var(--ink);border-radius:2px}
.mobilenav{position:fixed;inset:64px 0 auto 0;z-index:49;background:var(--cream);border-bottom:1px solid var(--line);padding:10px 20px 16px;display:flex;flex-direction:column}
.mobilenav a{padding:11px 6px;font-weight:600;border-bottom:1px solid var(--line)}
@media(min-width:900px){.tbnav{display:flex}.burger{display:none}}

/* hero */
.hero{background:linear-gradient(160deg,var(--yellow) 0%,#FFD75E 60%,#FFE9A8 100%);padding:48px 0 60px;overflow:hidden}
.herogrid{display:grid;gap:28px;align-items:center}
@media(min-width:820px){.herogrid{grid-template-columns:1.05fr .95fr;gap:40px}}
.heroslogan{font-size:clamp(34px,6vw,58px);color:var(--ink)}
.heroslogan .dot{color:var(--red)}
.herosub{font-size:clamp(15px,2vw,18px);color:#5C4A14;margin:14px 0 24px;max-width:520px}
.heroctas{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:99px;padding:13px 22px;font-weight:800;font-size:15px;transition:transform .15s ease, box-shadow .15s ease}

.btn.red{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(214,40,40,.35)}
.btn.ghost{background:rgba(255,255,255,.75);color:var(--ink);border:1.5px solid var(--ink)}
.btn.wa{background:#1FAF54;color:#fff}
.heroimgwrap{position:relative}
/* Sized the same way as every other brand site: the hero media is constrained to a
   16/10 box and cover-fitted. Without this the <video> rendered at its own intrinsic
   size and dwarfed the heroes on the sibling sites. The 1.5deg tilt is SuperCat's own. */
.heroimg{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  border-radius:24px;box-shadow:0 24px 60px rgba(60,40,0,.25);
  transform:rotate(1.5deg);will-change:transform}
.herobadge{position:absolute;top:-14px;left:-8px;z-index:2;background:var(--red);color:#fff;font-weight:800;font-size:13px;padding:8px 14px;border-radius:99px;box-shadow:0 6px 16px rgba(0,0,0,.2);transform:rotate(-4deg)}

/* trust */
.trust{background:var(--ink);color:#F5EDE2;padding:40px 0}
.truststats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;text-align:center;margin-bottom:26px}
.tstat b{display:block;font-family:'Fraunces',serif;font-size:clamp(24px,4vw,38px);color:var(--yellow)}
.tstat span{font-size:12.5px;color:#C9BCA9}
.trustrow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.trustrow .lbl{width:100%;text-align:center;font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:#A5988A;margin:8px 0 2px}
.flagchip{display:inline-flex;align-items:center;gap:6px;background:#3A2F23;border-radius:99px;padding:5px 11px 5px 6px;font-size:12px}
.flagchip img{height:16px;width:auto;border-radius:3px}
.certchip{background:#fff;border-radius:12px;padding:6px;height:52px;display:grid;place-items:center;cursor:pointer;transition:transform .15s}

.certchip img{max-height:40px;max-width:74px;object-fit:contain}

/* why */
.whygrid{display:grid;gap:14px}
@media(min-width:720px){.whygrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.wcard{background:var(--card);border-radius:var(--rad);padding:22px 18px;box-shadow:0 2px 10px rgba(60,40,0,.05)}
.wcard .ic{width:52px;height:52px;border-radius:99px;background:var(--panel);display:grid;place-items:center;margin-bottom:12px}
.wcard .ic img{width:34px;height:34px;object-fit:contain}
.wcard h3{font-size:17px;margin-bottom:6px}
.wcard p{font-size:13.5px;color:var(--muted)}
.benefits{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.bchip{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:7px 14px 7px 8px;font-size:13.5px;font-weight:600}
.bchip img{width:22px;height:22px}

/* quiz */
.quiz{background:linear-gradient(180deg,var(--panel),var(--cream))}
.quizcard{background:var(--card);border-radius:24px;padding:28px 22px;max-width:660px;margin:0 auto;box-shadow:0 10px 34px rgba(60,40,0,.08)}
.qstep{font-size:12px;letter-spacing:.2em;color:var(--soft);text-transform:uppercase;font-weight:800;margin-bottom:8px}
.qq{font-family:'Fraunces',serif;font-size:22px;margin-bottom:18px}
.qopts{display:grid;gap:10px}
@media(min-width:560px){.qopts{grid-template-columns:1fr 1fr}}
.qopt{border:1.5px solid var(--line);border-radius:14px;padding:13px 16px;text-align:left;font-weight:600;transition:all .15s}
.qopt:hover{border-color:var(--red);background:#FFF6F4}
.qback{margin-top:14px;color:var(--soft);font-size:13px}
.qresult{text-align:center}
.qresult img{width:150px;margin:0 auto 12px}
.qwhy{background:var(--panel);border-radius:12px;padding:12px 16px;font-size:14px;margin:14px 0;text-align:left}

/* products */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.fchip{border:1.5px solid var(--line);background:var(--card);border-radius:99px;padding:7px 15px;font-size:13.5px;font-weight:600;color:var(--muted)}
.fchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.fgroup{margin-bottom:14px}
.flbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);font-weight:800;margin:10px 0 6px}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:700px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.pgrid{grid-template-columns:repeat(4,1fr)}}
.pcard{background:var(--card);border-radius:var(--rad);padding:14px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 2px 8px rgba(60,40,0,.05)}

.pimg{background:var(--panel);border-radius:14px;height:150px;display:grid;place-items:center;margin-bottom:10px;overflow:hidden}
.pimg img{max-height:132px;max-width:88%;object-fit:contain}
.pcat{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:800}
.pname{font-weight:800;font-size:15px;line-height:1.25;margin:3px 0 4px}
.pmeta{font-size:12px;color:var(--soft)}

/* best sellers */
.best{background:var(--ink);color:#F5EDE2}
.best .kick{color:var(--yellow)}
.best .sub{color:#C9BCA9}
.bsrow{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
@media(min-width:700px){.bsrow{grid-auto-columns:31%}}
.bscard{background:#332A1E;border-radius:20px;padding:18px;scroll-snap-align:start;cursor:pointer;position:relative;transition:transform .15s}

.bsbadge{position:absolute;top:12px;left:12px;background:var(--yellow);color:var(--ink);font-size:11px;font-weight:800;padding:4px 10px;border-radius:99px}
.bscard .pimg{background:#453A2B}
.bscard .bname{font-weight:800;margin:8px 0 4px;color:#fff}
.bscard .bwhy{font-size:12.5px;color:#C9BCA9}

/* reviews */
.revgrid{display:grid;gap:14px}
@media(min-width:760px){.revgrid{grid-template-columns:repeat(3,1fr)}}
.rcard{background:var(--card);border-radius:var(--rad);padding:20px;box-shadow:0 2px 10px rgba(60,40,0,.05)}
.stars{color:#F5A623;letter-spacing:2px;font-size:15px}
.rtext{font-size:14px;margin:10px 0 12px}
.rmeta{font-size:12px;color:var(--soft)}
.aggrow{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.aggchip{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 16px;font-size:13.5px}
.aggchip b{font-size:17px}
.revnote{background:var(--panel);border-radius:14px;padding:16px 20px;font-size:14px;color:var(--muted)}

/* buy */
.buy{background:linear-gradient(180deg,var(--cream),var(--yellow-soft))}
.buyrow{display:grid;gap:12px;max-width:640px}
@media(min-width:640px){.buyrow{grid-template-columns:1fr 1fr}}
.buybtn{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:16px;padding:16px 18px;font-weight:800;box-shadow:0 3px 12px rgba(60,40,0,.07);transition:transform .15s}

.buybtn .mk{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff;font-family:'Fraunces',serif;font-weight:900;font-size:19px}
.buybtn small{display:block;font-weight:500;color:var(--soft);font-size:11.5px}
.offline{margin-top:20px;font-size:14px;color:var(--muted);max-width:560px}

/* about */
.aboutgrid{display:grid;gap:26px;align-items:center}
@media(min-width:860px){.aboutgrid{grid-template-columns:1fr 1.1fr}}
.aboutimg{border-radius:24px;box-shadow:0 18px 44px rgba(60,40,0,.18)}
.aboutstats{display:flex;gap:20px;margin:18px 0}
.astat b{font-family:'Fraunces',serif;font-size:26px;color:var(--red);display:block}
.astat span{font-size:12px;color:var(--soft)}
.aboutflags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* faq */
.faqlist{max-width:760px}
.fitem{background:var(--card);border-radius:14px;margin-bottom:10px;overflow:hidden;box-shadow:0 1px 6px rgba(60,40,0,.04)}
.fq{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 18px;font-weight:700;text-align:left;font-size:15px}
.fq .car{transition:transform .2s;color:var(--red);flex:none}
.fitem.open .car{transform:rotate(180deg)}
.fa{font-size:14px;color:var(--muted);padding:0 18px}   /* disclosure mechanics in the layer at the end of this file */
.fitem.open .fa{padding-bottom:16px}

/* footer */
.footer{background:var(--ink);color:#C9BCA9;padding:40px 0 90px;font-size:13.5px}
.fgrid{display:grid;gap:22px}
@media(min-width:720px){.fgrid{grid-template-columns:2fr 1fr 1fr}}
.footer h4{color:#fff;font-size:14px;margin-bottom:10px}
.footer a{color:#E7DCC9}

.fsmall{margin-top:26px;border-top:1px solid #3A2F23;padding-top:16px;font-size:12px;color:#7E7263}
.flinks{display:flex;flex-direction:column;gap:7px}

/* overlay (product sheet) */
.overlay{position:fixed;inset:0;z-index:80;background:rgba(30,20,10,.55);display:flex;align-items:flex-end;justify-content:center}
@media(min-width:760px){.overlay{align-items:center;padding:30px}}
.sheet{background:var(--cream);width:100%;max-width:860px;max-height:92vh;overflow:auto;border-radius:22px 22px 0 0;padding:22px 20px 90px;position:relative}
@media(min-width:760px){.sheet{border-radius:24px;padding:30px 30px 30px}}
.xbtn{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:99px;background:var(--card);font-size:19px;font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.12);z-index:2}
.sgrid{display:grid;gap:20px}
@media(min-width:760px){.sgrid{grid-template-columns:.9fr 1.1fr}}
.simg{background:var(--panel);border-radius:18px;padding:18px;display:grid;place-items:center;min-height:220px}
.simg img{max-height:260px;object-fit:contain}
.scat{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);font-weight:800}
.sname{font-family:'Fraunces',serif;font-size:26px;margin:4px 0 6px}
.stldr{font-family:'Fraunces',serif;font-style:italic;font-weight:600;color:var(--muted);margin-bottom:12px}
.sg2k{background:var(--panel);border-radius:14px;padding:13px 16px;font-size:14px;margin-bottom:14px}
.sg2k b{color:var(--red);display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.shl{list-style:none;margin-bottom:16px}
.shl li{display:flex;gap:9px;font-size:14px;margin:7px 0}
.shl .dot{width:7px;height:7px;border-radius:99px;background:var(--red);margin-top:7px;flex:none}
.vlbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);font-weight:800;margin:14px 0 8px}
.vchips{display:flex;flex-wrap:wrap;gap:8px}
.vchip{border:1.5px solid var(--line);background:var(--card);border-radius:99px;padding:6px 14px;font-size:13px;font-weight:600}
.vchip.on{background:var(--red);border-color:var(--red);color:#fff}
.gatable{width:100%;border-collapse:collapse;background:var(--card);border-radius:14px;overflow:hidden;margin:10px 0 4px}
.gatable td{padding:9px 14px;font-size:13.5px;border-bottom:1px solid var(--line)}
.gatable tr:last-child td{border-bottom:none}
.gatable td:last-child{text-align:right;font-weight:800}
.inglist{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.ingchip{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:4px 11px;font-size:12.5px}
.ingchip.has{border-color:#E4B84C;background:#FFF7E0;cursor:pointer;font-weight:600}
.ingchip.has::after{content:" ⓘ";color:#C08A00;font-size:11px}
.ingpop{background:var(--ink);color:#F5EDE2;border-radius:14px;padding:13px 16px;font-size:13.5px;margin:8px 0}
.ingpop b{color:var(--yellow)}
.smeta{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.smetachip{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:5px 12px;font-size:12px;color:var(--muted)}
.scerts{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 16px}
.scerts img{height:34px;width:auto;background:#fff;border-radius:8px;padding:3px}
.sbuy{display:flex;flex-wrap:wrap;gap:10px}
.sbuy .btn{padding:11px 18px;font-size:14px}

/* cert modal */
.certmodal{position:fixed;inset:0;z-index:90;background:rgba(30,20,10,.55);display:grid;place-items:center;padding:24px}
.certbox{background:var(--cream);border-radius:20px;padding:26px;max-width:440px;position:relative}
.certbox img{height:60px;margin-bottom:12px}
.certbox h3{margin-bottom:8px}
.certbox p{font-size:14px;color:var(--muted)}

/* wa float */
.wafloat{position:fixed;right:16px;bottom:16px;z-index:60;width:54px;height:54px;border-radius:99px;background:#1FAF54;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.28);transition:transform .15s}


/* scroll reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .heroimg{transform:none !important}
}

/* ===== product page (product.html) — template styles ===== */
.tbback{padding:8px 14px;font-size:13px;white-space:nowrap}
.pphero{padding:44px 0 40px;background:var(--panel)}
/* owner 2026-08-05: no gradients — each section gets its own flat colour block
   PRODUCT page bands: panel -> photo -> cream -> white -> panel -> cream -> white.
   NOTE (owner-confirmed 2026-08-19): the HOMEPAGE does not alternate this way — 7 of its
   10 sections paint no background and inherit the body cream; only .trust and .terlaris
   (ink) and .kontak (panel) break it up. That is the intended look; do not "restore"
   an alternation that was never there. */
.ppbenefits{background:var(--cream)}
.pping{background:#FFFFFF}
.ppga{background:var(--panel)}
.ppfaq{background:var(--cream)}
.ppcta{background:#FFFFFF}
.ppherogrid{display:grid;gap:28px;align-items:start}
.pph1{font-size:clamp(30px,5.2vw,52px);margin:6px 0 10px}
.pptldr{font-family:'Fraunces',Georgia,serif;font-weight:600;font-style:italic;font-size:clamp(16px,2.4vw,20px);color:var(--muted);margin-bottom:14px}
.ppg2k{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:14px 16px;color:var(--muted);font-size:14.5px;margin-bottom:16px}
.pphl li{font-size:15px}
.ppimgcard{position:relative;background:var(--yellow-soft);border-radius:26px;padding:26px;display:grid;place-items:center}
.ppimgcard img{max-height:420px;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(60,30,0,.18))}
.ppimgcard .herobadge{position:absolute;top:14px;left:14px}
.ppband{padding:0}
.ppbandwrap{position:relative;max-height:420px;overflow:hidden}
.ppbandwrap img{width:100%;height:100%;max-height:420px;object-fit:cover;object-position:center 60%}
.ppbandline{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;text-align:center;color:#fff;
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-style:italic;font-size:clamp(16px,2.6vw,22px);
  background:linear-gradient(0deg,rgba(35,26,18,.72),transparent)}
.ppbengrid .wcard h3{font-size:17px}
.pplist .ingchip{font-size:13.5px}
.ppgagrid{display:grid;gap:26px}
.ppgatable{width:100%;background:var(--card);border-radius:var(--rad);border:1px solid var(--line);overflow:hidden}
.ppgatable td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:15px}
.ppgatable tr:last-child td{border-bottom:0}
.ppgatable td:last-child{text-align:right;font-weight:800}
.ppctabox{background:var(--yellow-soft);border-radius:26px;padding:44px 24px;text-align:center}
@media(min-width:840px){
  .ppherogrid{grid-template-columns:1.05fr .95fr;gap:44px}
  .ppgagrid{grid-template-columns:1fr 1fr;align-items:start}
}

/* ===== contact form (index #kontak) ===== */
.contact{background:var(--panel)}
.conform{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:24px;max-width:720px}
.conform label{display:block;font-weight:700;font-size:13.5px;margin-bottom:14px;color:var(--muted)}
.conform input,.conform select,.conform textarea{display:block;width:100%;margin-top:6px;padding:11px 13px;
  border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:15px;color:var(--ink);background:var(--cream)}
.conform input:focus,.conform select:focus,.conform textarea:focus{outline:2px solid var(--yellow);border-color:var(--yellow)}
.congrid{display:grid;gap:0 16px}
.conactions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.conmail{font-size:13.5px;color:var(--muted)}
.conmail a{color:var(--red);font-weight:700}
.connote{font-size:12px;color:var(--soft);margin-top:10px}
@media(min-width:680px){ .congrid{grid-template-columns:1fr 1fr} }

/* =====================================================================
   Design-engineering layer (2026-08-19). Values are SuperCat's own —
   yellow #FFC72C and red #D62828 on cream #FDF6EE / panel #FFF3D6.
   Only the motion physics (curves + durations) is shared with the other
   BIS brand sites.
   ===================================================================== */

/* ---- motion language: strong curves + one duration scale ---- */
.btn,.certchip,.buybtn,.pcard,.bscard,.vchip,.fchip,.garrow,.gzoom,.xbtn,.langbtn,.ingchip{
  transition:transform var(--t-press) var(--ease-out),
             background-color var(--t-hover) ease,
             border-color var(--t-hover) ease,
             color var(--t-hover) ease,
             box-shadow var(--t-hover) ease}
.rv{transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out);
    transition-delay:calc(var(--st,0) * 55ms)}
/* once the one-off reveal has played, interaction timing takes over (mark() in core.js) */
.rv.rvd{transition:transform var(--t-press) var(--ease-out),
        background-color var(--t-hover) ease,border-color var(--t-hover) ease,
        color var(--t-hover) ease,box-shadow var(--t-hover) ease;transition-delay:0s}

/* ---- press feedback ---- */
.btn:active{transform:scale(.97)}
.certchip:active,.fchip:active,.vchip:active,.langbtn:active,.ingchip:active{transform:scale(.94)}
.buybtn:active{transform:scale(.97)}
.pcard:active,.bscard:active{transform:scale(.99)}
.garrow:active,.gzoom:active,.xbtn:active{transform:scale(.9)}
.wafloat:active{transform:scale(.92)}
.burger:active{transform:scale(.92)}

/* ---- hover, gated: on touch these fire on tap and stick ---- */
@media (hover:hover) and (pointer:fine){
  .tbnav a:hover{background:var(--panel);color:var(--ink)}
  .btn:hover{transform:translateY(-2px)}
  .certchip:hover{transform:translateY(-3px)}
  .certchip:hover img{filter:none;opacity:1}
  .pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
  .bscard:hover{transform:translateY(-3px)}
  .buybtn:hover{transform:translateY(-3px)}
  .footer a:hover{color:var(--yellow)}
  .wafloat:hover{transform:scale(1.08)}
  .garrow:hover{background:var(--panel)}
  .gzoom:hover{background:var(--ink);color:#fff}
  .xbtn:hover{color:var(--ink);background:var(--panel)}
  .ppimgcard{cursor:zoom-in}
}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}

/* ---- cert badges: quiet by default, colour on hover; always colour on touch ---- */
.certchip img{filter:grayscale(1);opacity:.62;
  transition:filter var(--t-hover) ease,opacity var(--t-hover) ease}

/* ---- modal: dialog role, focus trap and scroll lock come from the engine ---- */
.certmodal{background:rgba(30,20,10,0);transition:background-color var(--t-ui) var(--ease-out)}
.certmodal.open{background:rgba(30,20,10,.55)}
.certmodal.closing{background:rgba(30,20,10,0)}
.modalbox{background:var(--cream);border-radius:20px;padding:26px;max-width:440px;width:100%;
  position:relative;max-height:90vh;overflow:auto;box-shadow:var(--shadow-pop);
  opacity:0;transform:scale(.97);
  transition:opacity var(--t-hover) ease,transform var(--t-ui) var(--ease-out)}
.certmodal.open .modalbox{opacity:1;transform:none}
.certmodal.closing .modalbox{opacity:0;transform:scale(.97);transition-duration:150ms}
.modalbox img{height:60px;margin-bottom:12px}
.modalbox h3{margin-bottom:8px}
.xbtn{position:absolute;top:10px;right:10px;width:38px;height:38px;display:grid;place-items:center;
  border-radius:50%;font-size:22px;color:var(--soft);background:transparent}
.xbtn svg{width:18px;height:18px}

/* ---- pack-shot gallery: SuperCat had a single static image and no gallery at all ---- */
.ppimgcard{position:relative;overflow:hidden}
.glayer{position:absolute;inset:0;display:grid;place-items:center;padding:22px}
.glayer img{max-width:100%;max-height:100%;object-fit:contain}
.glayer{opacity:1;transform:none;
  transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out)}
.glayer.out-l{opacity:0;transform:translateX(-18px)}
.glayer.out-r{opacity:0;transform:translateX(18px)}
.glayer.in-l{opacity:0;transform:translateX(18px);transition:none}
.glayer.in-r{opacity:0;transform:translateX(-18px);transition:none}
.garrow{position:absolute;top:50%;margin-top:-19px;z-index:3;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--ink);
  box-shadow:0 2px 6px rgba(60,40,0,.08),0 10px 24px -8px rgba(60,40,0,.25)}
.garrow svg{width:16px;height:16px}
.garrow.prev{left:12px}.garrow.next{right:12px}
.gcount{position:absolute;right:14px;bottom:12px;z-index:3;font-size:12px;font-weight:800;
  color:var(--soft);background:var(--cream);padding:4px 10px;border-radius:99px}
.gzoom{position:absolute;left:14px;bottom:12px;z-index:3;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--cream);color:var(--muted)}
.gzoom svg{width:16px;height:16px}

/* ---- lightbox ---- */
.lbox{position:fixed;inset:0;z-index:95;display:grid;place-items:center;
  padding:clamp(14px,4vw,56px);background:rgba(30,20,10,.88);
  opacity:0;transition:opacity var(--t-hover) var(--ease-out)}
.lbox.open{opacity:1}
.lbstage{margin:0;display:grid;place-items:center;max-width:min(980px,100%);max-height:100%}
.lbstage img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:var(--rad);
  background:#fff;padding:clamp(10px,2vw,26px);box-shadow:0 34px 90px -34px rgba(0,0,0,.65);
  opacity:0;transform:scale(.965);
  transition:opacity var(--t-hover) ease,transform 260ms var(--ease-out)}
.lbox.open .lbstage img{opacity:1;transform:none}
.lbclose,.lbarrow{position:absolute;z-index:2;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.93);color:var(--ink);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.5);
  transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease}
.lbclose{top:max(14px,2vh);right:max(12px,2vw)}
.lbarrow{top:50%;margin-top:-22px}
.lbarrow.prev{left:max(10px,2vw)}
.lbarrow.next{right:max(10px,2vw)}
.lbclose svg,.lbarrow svg{width:18px;height:18px}
.lbclose:active,.lbarrow:active{transform:scale(.9)}
.lbcount{position:absolute;left:50%;transform:translateX(-50%);bottom:max(14px,2vh);
  font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--cream);
  background:rgba(0,0,0,.34);padding:6px 13px;border-radius:99px}
@media (hover:hover) and (pointer:fine){.lbclose:hover,.lbarrow:hover{background:#fff}}
@media (max-width:600px){
  .lbox{padding:10px}
  .lbstage img{max-height:74vh;padding:8px}
  .lbarrow{top:auto;bottom:max(58px,7vh);margin-top:0}
}

/* ---- disclosure: JS-measured height, not the max-height clamp with its +20 guess ---- */
.fa{height:0;overflow:hidden;transition:none;max-height:none}
.fa:not(.open)>*{visibility:hidden}
.fa.open>*{visibility:visible}
.car{transition:transform var(--t-ui) var(--ease-out)}

/* ---- product page: collapsible sections ---- */
.sectoggle{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;text-align:left}
.sectoggle>span{display:block;min-width:0}
.sectoggle .kick,.sectoggle .h2{display:block}   /* spans inside a <button>: block or they run together */
.sectoggle .kick{margin-bottom:8px}
.sectoggle .h2{margin-bottom:0}
.secchev{flex:0 0 auto;width:28px;height:28px;margin-top:8px;color:var(--red);
  transition:transform var(--t-ui) var(--ease-out)}
.sectoggle[aria-expanded="true"] .secchev{transform:rotate(180deg)}
.secbody{height:0;overflow:hidden}
.secbody.open{height:auto}
.secbody:not(.open)>div{visibility:hidden}
.secbody.open>div{visibility:visible}
.secbody>div{padding-top:16px}
section:has(> .wrap > .secbody:not(.open)){padding-top:40px;padding-bottom:40px}

/* ---- touch: every control >= 44px without changing desktop proportions ---- */
@media (pointer:coarse){
  .certchip img{filter:none;opacity:1}   /* no hover on touch — never leave badges permanently grey */
  .langbtn{min-width:48px;height:44px}
  .burger{width:44px;height:44px}
  .btn{padding:15px 26px}
  .fchip,.vchip{padding:12px 18px}
  .certchip{padding:11px;min-width:44px}   /* some badges are tall but narrow */
  .offline a,.conmail a{padding:12px 0;display:inline-block}
  .buybtn{padding:16px 22px}
  .garrow{width:44px;height:44px;margin-top:-22px}
  .gzoom{width:44px;height:44px}
  .xbtn{width:44px;height:44px;top:8px;right:8px}
  .wafloat{width:58px;height:58px}
  .fq{padding:20px 2px}
  .flinks a,.footer a{padding:12px 0;display:inline-block}
  .ppctabox a{padding:12px 0;display:inline-block}   /* inline 'see other products' link */
  .ingchip{padding:11px 14px}
  .tbnav a{padding:12px 14px}
  .sectoggle{padding:6px 0}
}

/* ---- reduced motion: keep meaning, drop movement ---- */
@media (prefers-reduced-motion:reduce){
  .rv,.rv.in{opacity:1;transform:none;transition:none}
  .btn,.certchip,.buybtn,.pcard,.bscard,.vchip,.fchip,.garrow,.gzoom,.xbtn,.langbtn,
  .ingchip,.car,.secchev,.glayer,.certmodal,.modalbox,.lbox,.lbstage img,.wafloat{transition:none}
  .glayer.out-l,.glayer.out-r{transform:none}
  .lbstage img{opacity:1;transform:none}
}


/* ---------- WhatsApp treatment (family-wide, owner-approved 2026-08-21) ----------
   WhatsApp brand green measured 1.98:1 against this site's ground — and against
   Professional Formula's black and EurèkA's porcelain too, so the green is not a
   contrast problem of one palette but of the colour itself. The controls now follow
   the Good Dog v2 treatment: the inline button is a ghost in the brand's ink, and
   the floating button is a solid ink circle. The glyph inherits via currentColor,
   so the SVG's own fill attribute no longer decides anything. */
.btn.wa{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.btn.wa svg,.btn.wa path{fill:currentColor}
@media (hover:hover) and (pointer:fine){
  .btn.wa:hover{background:var(--ink);color:var(--cream)}
}
.wafloat{background:var(--ink);color:#fff}
.wafloat svg,.wafloat path{fill:currentColor}