@font-face{font-family:"Montserrat";src:url("fonts/montserrat.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{--bg:#050505;--bg2:#0b0b0c;--card:#0e0e10;--line:rgba(255,255,255,.08);--text:#f4f4f5;--muted:#9d9da6;--red:#e10600;--red2:#ff2a1f;--wa:#25d366;--r:18px;--ease:cubic-bezier(.2,.7,.1,1);--font:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;--pad:clamp(20px,5vw,64px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,video{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--red2);outline-offset:3px;border-radius:10px}
::selection{background:var(--red);color:#fff}
.skip{position:absolute;left:-999px;top:8px;z-index:90;background:#fff;color:#000;padding:8px 12px;border-radius:8px}
.skip:focus{left:8px}
.red{color:var(--red)}
.muted{color:var(--muted)}
.small{font-size:.78rem}

/* wordmark */
.wm{display:inline-flex;flex-direction:column;align-items:center;line-height:1}
.wm-top{font-weight:900;letter-spacing:.02em;font-size:1.22rem;color:#fff}
.wm-x{display:inline-block;color:var(--red);transform:skewX(-14deg);margin-left:.02em;font-weight:900;text-shadow:0 0 18px rgba(225,6,0,.55)}
.wm-sub{font-weight:300;letter-spacing:.46em;font-size:.46rem;margin-top:4px;padding-left:.46em;color:#e9e9ec}

/* topbar */
.topbar{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--pad);padding-top:max(12px,env(safe-area-inset-top));transition:background .4s var(--ease),border-color .4s,padding .4s var(--ease);border-bottom:1px solid transparent}
.topbar.scrolled{background:rgba(5,5,5,.72);backdrop-filter:saturate(140%) blur(16px);-webkit-backdrop-filter:saturate(140%) blur(16px);border-bottom-color:var(--line)}
.brand{text-decoration:none}
.nav{display:none;gap:34px;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.nav a{text-decoration:none;color:#cfcfd4;position:relative;padding:6px 0;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover{color:#fff}.nav a:hover::after{transform:scaleX(1)}
.topbar-cta{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-decoration:none;padding:9px 15px;border-radius:999px;background:rgba(37,211,102,.12);color:#5ff09a;border:1px solid rgba(37,211,102,.4);transition:background .3s,color .3s}
.topbar-cta:hover{background:var(--wa);color:#03200e}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:#000 url("video/hero-poster.jpg") center/cover no-repeat}
.hero-media{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:-3}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-desktop{display:none}
.hero-video{animation:heroZoom 14s var(--ease) both}
.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.05) 26%,rgba(0,0,0,.55) 55%,rgba(5,5,5,.96) 82%,var(--bg) 100%)}
.hero-glow{position:absolute;z-index:-1;left:-20%;bottom:-10%;width:90vw;height:60vw;max-width:900px;max-height:600px;background:radial-gradient(closest-side,rgba(225,6,0,.22),transparent);filter:blur(10px);pointer-events:none}
.hero-content{position:relative;padding:120px 22px calc(54px + env(safe-area-inset-bottom));max-width:1240px;width:100%;margin:0 auto}
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 16px;text-transform:uppercase;letter-spacing:.26em;font-size:.68rem;font-weight:600;color:#ff4a40}
.eyebrow .num{font-weight:300;color:var(--muted);letter-spacing:.1em;padding-right:10px;border-right:1px solid rgba(255,255,255,.18)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(225,6,0,.7);animation:pulse 2.4s infinite}
h1{margin:0 0 18px;font-weight:900;font-size:clamp(2.9rem,13.5vw,7.6rem);line-height:.92;letter-spacing:-.035em;text-transform:uppercase}
h1 .red{text-shadow:0 0 30px rgba(225,6,0,.6)}
.lead{margin:0 0 28px;color:#cfcfd5;font-size:clamp(.98rem,2.4vw,1.15rem);font-weight:400;max-width:34em;line-height:1.65}
.cta-row{display:flex;flex-direction:column;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:14px 26px;border-radius:14px;font-family:var(--font);font-weight:700;font-size:.98rem;letter-spacing:.01em;text-decoration:none;transition:transform .25s var(--ease),box-shadow .3s,background .3s,border-color .3s}
.btn:active{transform:scale(.98)}
.btn-wa{background:linear-gradient(180deg,#2fe075,#1fbf5b);color:#022b12;box-shadow:0 12px 34px rgba(37,211,102,.28),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(37,211,102,.38),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-ghost{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);color:var(--text);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:rgba(225,6,0,.7);box-shadow:0 0 0 1px rgba(225,6,0,.35),0 10px 30px rgba(225,6,0,.18)}
.btn-lg{min-height:62px;font-size:1.05rem;padding:16px 30px}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:26px 0 0}
.hero-tags li{font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:7px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.14);color:#d8d8dc;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.scroll-cue{display:none}
.hero-in{opacity:0;transform:translateY(22px);animation:rise 1s var(--ease) forwards;animation-delay:var(--d,0ms)}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:linear-gradient(90deg,var(--bg),#0c0c0d 50%,var(--bg));padding:18px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;align-items:center;gap:28px;width:max-content;animation:marquee 38s linear infinite}
.marquee span{font-size:.78rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#bdbdc3;white-space:nowrap}
.marquee i{width:6px;height:6px;background:var(--red);transform:rotate(45deg);box-shadow:0 0 10px var(--red);flex:none}

/* sections */
.section{padding:clamp(80px,12vw,150px) 22px 0;max-width:1240px;margin:0 auto}
.section-wide{max-width:none;padding-left:0;padding-right:0}
.section-wide .sec-head,.section-wide .social-row{padding-left:22px;padding-right:22px;max-width:1240px;margin-left:auto;margin-right:auto}
.sec-head{margin-bottom:clamp(32px,5vw,56px)}
h2{margin:0;font-weight:800;font-size:clamp(1.9rem,6.4vw,3.6rem);line-height:1.04;letter-spacing:-.025em;max-width:16em}
.sec-sub{margin:16px 0 0;color:var(--muted);font-size:1rem;max-width:36em}
h3{margin:0 0 6px;font-size:1.08rem;font-weight:700;letter-spacing:-.005em}

/* reveal */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}

/* cards */
.cards{display:grid;gap:16px}
.card{position:relative;background:linear-gradient(180deg,#111113,#0a0a0b);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .4s,box-shadow .5s var(--ease),transform .5s var(--ease)}
.card-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0d0d0e}
.card-img img{width:100%;height:100%;object-fit:contain;transition:transform 1.2s var(--ease)}
.card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,10,11,.85))}
.card-body{padding:20px 22px 24px}
.card-body p{margin:0;color:var(--muted);font-size:.94rem}
.card:hover{border-color:rgba(225,6,0,.45);box-shadow:0 0 0 1px rgba(225,6,0,.15),0 24px 60px -20px rgba(225,6,0,.35);transform:translateY(-4px)}
.card:hover .card-img img{transform:scale(1.05)}
.badge{position:absolute;z-index:2;top:14px;left:14px;font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:var(--red);color:#fff;box-shadow:0 6px 24px rgba(225,6,0,.5)}
.mini-cards{display:grid;gap:12px;margin-top:16px}
.mini{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2)}
.mini p{margin:0;color:var(--muted);font-size:.92rem}
.mini-icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--red2);background:rgba(225,6,0,.08);border:1px solid rgba(225,6,0,.3)}
.note{margin:28px 0 0;padding:18px 22px;border-radius:var(--r);border:1px solid rgba(225,6,0,.3);background:linear-gradient(90deg,rgba(225,6,0,.12),rgba(225,6,0,.02));color:#e4e4e7;font-size:.95rem}

/* before / after */
.ba-grid{display:grid;gap:34px}
.ba{margin:0}
.ba-frame{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#111;touch-action:pan-y;box-shadow:0 30px 80px -40px rgba(0,0,0,.9)}
.ba-frame>img,.ba-before img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 14px rgba(225,6,0,.9),0 0 2px rgba(0,0,0,.6);pointer-events:none}
.ba-handle span{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(5,5,5,.6);border:2px solid #fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 0 22px rgba(225,6,0,.55)}
.ba-handle span::before,.ba-handle span::after{content:"";position:absolute;top:50%;width:0;height:0;border:6px solid transparent;margin-top:-6px}
.ba-handle span::before{left:6px;border-right-color:#fff}
.ba-handle span::after{right:6px;border-left-color:#fff}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:60px;height:400px}
.ba-tag{position:absolute;top:12px;font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none}
.ba-tag-l{left:12px}.ba-tag-r{right:12px;background:var(--red)}
.ba figcaption{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin-top:14px;font-size:.95rem}
.ba figcaption b{font-weight:800;letter-spacing:.02em}
.ba figcaption span{color:var(--muted)}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:3px}
.g-item{position:relative;margin:0;overflow:hidden;aspect-ratio:4/5;background:#0d0d0e}
.g-item a{display:block;width:100%;height:100%;cursor:zoom-in}
.g-item img,.g-item video{width:100%;height:100%;object-fit:contain;transition:transform 1.2s var(--ease),filter .6s}
.g-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 10px;font-size:.7rem;font-weight:600;letter-spacing:.06em;background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));pointer-events:none;opacity:.95}
.g-item:hover img{transform:scale(1.06)}
.g-video{grid-column:span 2;aspect-ratio:9/12}
.g-video::before{content:"Video";position:absolute;z-index:2;top:12px;left:12px;font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--red)}
.social-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.social-row .btn{flex:1 1 220px}

/* brands */
.brand-line{display:flex;flex-wrap:wrap;gap:6px 26px;margin:0 0 14px;font-weight:900;text-transform:uppercase;font-size:clamp(1.6rem,7.6vw,6rem);line-height:1.05;letter-spacing:-.02em}
.brand-line span{white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.75);transition:color .5s,-webkit-text-stroke-color .5s,text-shadow .5s}
.brand-line span:hover{color:#fff;-webkit-text-stroke-color:#fff;text-shadow:0 0 30px rgba(225,6,0,.5)}

/* why */
.why{list-style:none;padding:0;margin:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.why li{background:var(--bg);padding:28px 24px}
.why-num{display:block;font-size:.8rem;font-weight:300;letter-spacing:.2em;color:var(--red2);margin-bottom:18px}
.why p{margin:0;color:var(--muted);font-size:.94rem}

/* contact */
.contact{padding-bottom:40px}
.contact-panel{position:relative;overflow:hidden;padding:clamp(34px,6vw,72px) clamp(22px,5vw,64px);border-radius:28px;border:1px solid rgba(225,6,0,.3);background:radial-gradient(120% 90% at 100% 0%,rgba(225,6,0,.22),transparent 55%),radial-gradient(80% 70% at 0% 100%,rgba(225,6,0,.12),transparent 60%),#0a0a0b;box-shadow:0 40px 120px -50px rgba(225,6,0,.45)}
.contact-panel .btn-wa{margin-top:28px;width:100%}
.contact-grid{display:grid;gap:10px;margin-top:22px}
.contact-item{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.025);text-decoration:none;transition:border-color .3s,background .3s}
.contact-item:hover{border-color:rgba(225,6,0,.5);background:rgba(225,6,0,.06)}
.contact-item span{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.contact-item b{font-weight:700;font-size:1rem;word-break:break-word}
.loc-line{display:flex;align-items:center;gap:10px;margin:24px 0 0;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#cfcfd4}

/* footer */
.footer{text-align:center;padding:60px 22px calc(110px + env(safe-area-inset-bottom));border-top:1px solid var(--line);margin-top:60px}
.footer-wm .wm-top{font-size:2rem}.footer-wm .wm-sub{font-size:.7rem}
.slogan{margin:18px 0 12px;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:#cfcfd4}
.footer .small{margin:6px 0}

/* floating whatsapp — only after the hero */
.float-wa{position:fixed;z-index:35;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#2fe075,#1fbf5b);color:#022b12;box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 0 6px rgba(37,211,102,.12);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.js .float-wa{opacity:0;transform:translateY(24px) scale(.8);pointer-events:none}
.js .float-wa.show{opacity:1;transform:none;pointer-events:auto}

/* lightbox */
.lightbox{padding:0;border:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:rgba(3,3,3,.96);color:#fff}
.lightbox[open]{display:grid;place-items:center;animation:fade .3s ease}
.lightbox::backdrop{background:rgba(0,0,0,.9)}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;padding:60px 10px 70px;width:100%;height:100%;justify-content:center}
.lightbox img{max-width:100%;max-height:calc(100dvh - 150px);object-fit:contain;border-radius:6px;box-shadow:0 30px 100px rgba(0,0,0,.8);transition:opacity .25s}
.lightbox figcaption{font-size:.82rem;letter-spacing:.06em;color:#d4d4d8;text-align:center}
.lb-btn{position:absolute;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(20,20,22,.7);color:#fff;font-size:1.9rem;line-height:1;cursor:pointer;font-family:var(--font)}
.lb-btn:hover{border-color:var(--red)}
.lb-close{top:max(14px,env(safe-area-inset-top));right:14px}
.lb-prev{left:12px;top:50%;margin-top:-24px}.lb-next{right:12px;top:50%;margin-top:-24px}
.lb-count{position:absolute;top:max(26px,calc(env(safe-area-inset-top) + 12px));left:20px;font-size:.72rem;letter-spacing:.2em;color:var(--muted)}

@keyframes rise{to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes heroZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(225,6,0,.7)}70%{box-shadow:0 0 0 10px rgba(225,6,0,0)}100%{box-shadow:0 0 0 0 rgba(225,6,0,0)}}

@media (max-width:420px){
  .btn{font-size:.92rem;padding:14px 16px;letter-spacing:0}
  .contact{padding-left:14px;padding-right:14px}
  .contact-panel{padding:34px 18px}
}
@media (min-width:560px){
  .cta-row{flex-direction:row;flex-wrap:wrap}
  .cards{grid-template-columns:1fr 1fr}
  .mini-cards{grid-template-columns:1fr 1fr}
  .why{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr 1fr}
  .contact-panel .btn-wa{width:auto}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .g-video{grid-column:span 1;grid-row:span 2;aspect-ratio:auto}
}
@media (min-width:900px){
  .nav{display:flex}
  .hero{background:#000}
  .hero-desktop{display:block;animation:heroZoom 16s var(--ease) both}
  .hero-video{display:none}
  .hero-shade{background:linear-gradient(90deg,rgba(5,5,5,.92) 0%,rgba(5,5,5,.55) 38%,rgba(5,5,5,0) 62%),linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 22%,transparent 70%,var(--bg) 100%)}
  .hero{align-items:center}
  .hero-content{padding:140px var(--pad) 120px}
  .hero-content>*{max-width:640px}
  .scroll-cue{display:block;position:absolute;left:50%;bottom:28px;width:24px;height:38px;margin-left:-12px;border:1px solid rgba(255,255,255,.35);border-radius:14px}
  .scroll-cue span{position:absolute;left:50%;top:8px;width:2px;height:8px;margin-left:-1px;background:var(--red);border-radius:2px;animation:cue 1.8s infinite}
  .cards{grid-template-columns:repeat(4,1fr)}
  .ba-grid{grid-template-columns:1fr 1fr;gap:44px 28px}
  .gallery{grid-template-columns:repeat(4,1fr);gap:4px}
  .why{grid-template-columns:repeat(4,1fr)}
  .why li{padding:40px 30px}
  .contact-grid{grid-template-columns:repeat(4,1fr)}
  .section,.section-wide .sec-head,.section-wide .social-row{padding-left:var(--pad);padding-right:var(--pad)}
  .section.section-wide{padding-left:0;padding-right:0}
  .social-row .btn{flex:0 0 auto}
}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
@media (min-width:560px) and (max-width:899px){
  .gallery > .g-item:last-child{grid-column:span 2;aspect-ratio:8/5}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.hero-in{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* Neu bei uns: Digitale Tachos */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.new-pill{display:inline-block;font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--red);color:#fff;line-height:1.2;vertical-align:middle;box-shadow:0 4px 16px rgba(225,6,0,.45)}
.eyebrow .new-pill{margin-right:2px}
.nav a.nav-new{color:#fff}
.nav a.nav-new::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:8px;vertical-align:middle;box-shadow:0 0 10px var(--red)}
.tacho .sec-head h2{max-width:none}
.mini-link{text-decoration:none;color:inherit;grid-column:1/-1;border-color:rgba(225,6,0,.3);transition:border-color .3s,box-shadow .3s}
.mini-link:hover{border-color:rgba(225,6,0,.7);box-shadow:0 0 0 1px rgba(225,6,0,.2)}
.mini-link h3 .new-pill{margin-left:6px;font-size:.55rem;padding:3px 7px}
.mini-more{color:#ff4a40;font-weight:700;white-space:nowrap}

/* ===== Shop ===== */
.shop-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.shop-filter::-webkit-scrollbar{display:none}
.sf{flex:0 0 auto;-webkit-tap-highlight-color:transparent;appearance:none;font-family:var(--font);font-size:.82rem;font-weight:600;letter-spacing:.01em;color:#c9c9cf;background:transparent;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:10px 18px;min-height:42px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.sf:hover{border-color:rgba(255,255,255,.35);color:#fff}
.sf.is-active{background:#fff;color:#0a0a0a;border-color:#fff}
.sf:focus-visible,.pc-link:focus-visible,.pm-thumb:focus-visible,.pm-close:focus-visible,.pm-track:focus-visible{outline:2px solid var(--red2);outline-offset:3px}
.shop-grid{display:grid;grid-template-columns:1fr;gap:16px}
.pc[hidden]{display:none}
.pc{min-width:0}
.pc-link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .35s var(--ease),border-color .3s,box-shadow .35s}
.pc-link:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.16);box-shadow:0 24px 60px -30px rgba(0,0,0,.9)}
.pc-media{position:relative;aspect-ratio:4/3;background:var(--bg,#0e0e10);padding:6%;display:flex;align-items:center;justify-content:center}
.pc-media img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--ease)}
.pc-link:hover .pc-media img{transform:scale(1.035)}
.pc-badge{position:absolute;top:14px;left:14px;font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:6px 11px;border-radius:999px;background:var(--red);color:#fff;box-shadow:0 6px 20px rgba(225,6,0,.45)}
.pc-body{display:flex;flex-direction:column;flex:1;padding:20px 20px 20px;border-top:1px solid var(--line)}
.pc-cat{margin:0;font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.pc-cat .new-pill{margin-left:6px;font-size:.55rem;padding:3px 7px}
.pc-title{margin:8px 0 0;font-size:1.06rem;font-weight:700;line-height:1.32;letter-spacing:-.005em}
.pc-chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0}
.pc-chips li{font-size:.7rem;font-weight:500;color:#cfcfd4;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);white-space:nowrap}
.pc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:20px}
.pc-price{margin:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pc-price b{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.pc-price s,.pm-price s{color:var(--muted);font-size:.9rem;font-weight:500}
.pc-more{font-size:.84rem;font-weight:600;color:#fff;white-space:nowrap;display:inline-flex;gap:6px;align-items:center;padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);transition:border-color .3s,background .3s}
.pc-more span{transition:transform .3s var(--ease)}
.pc-link:hover .pc-more{border-color:rgba(225,6,0,.7);background:rgba(225,6,0,.1)}
.pc-link:hover .pc-more span{transform:translateX(3px)}
.shop-note{margin:26px 0 0;color:var(--muted);font-size:.86rem;text-align:center}
@media (min-width:600px){
  .shop-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .shop-filter{margin:0 0 32px}
}
@media (min-width:1000px){
  .shop-grid{grid-template-columns:repeat(3,1fr);gap:24px}
  .pc-title{min-height:2.64em}
}

/* product dialog */
html.modal-open{overflow:hidden}
.pm{padding:0;border:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;background:transparent;color:var(--text);overflow:hidden}
.pm::backdrop{background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pm[open]{display:flex;align-items:center;justify-content:center;animation:fade .25s ease}
.pm-inner{position:relative;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;background:#0b0b0c;-webkit-overflow-scrolling:touch}
.pm-close{position:fixed;z-index:5;top:max(12px,env(safe-area-inset-top));right:12px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(10,10,11,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .25s,border-color .25s}
.pm-close:hover{background:rgba(225,6,0,.85);border-color:transparent}
.pm-gallery{min-width:0}
.pm-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pm-track::-webkit-scrollbar{display:none}
.pm-slide{flex:0 0 100%;aspect-ratio:1/1;scroll-snap-align:start;background:var(--bg,#0e0e10);display:flex;align-items:center;justify-content:center}
.pm-slide img{width:100%;height:100%;object-fit:contain}
.pm-thumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:12px 22px 0}
.pm-thumbs::-webkit-scrollbar{display:none}
.pm-thumb{flex:0 0 56px;height:56px;padding:3px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:var(--bg,#0e0e10);opacity:.55;cursor:pointer;transition:opacity .25s,border-color .25s}
.pm-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.pm-thumb:hover{opacity:.85}
.pm-thumb.is-active{opacity:1;border-color:var(--red)}
.pm-info{padding:26px 22px 0}
.pm-title{margin:10px 0 0;font-size:clamp(1.4rem,5.4vw,1.85rem);font-weight:800;line-height:1.18;letter-spacing:-.015em}
.pm-sub{margin:8px 0 0;color:var(--muted);font-size:.92rem}
.pm-price{display:flex;align-items:baseline;gap:12px;margin:20px 0 0}
.pm-price b{font-size:2rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.pm-intro{margin:16px 0 0;color:#d4d4d9;font-size:.96rem;line-height:1.65}
.pm-inner:focus{outline:none}
.pm-cta{position:sticky;bottom:0;z-index:3;display:flex;align-items:center;gap:4px;margin:28px -22px 0;padding:18px 22px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(11,11,12,0),#0b0b0c 32%)}
.pm-cta .btn{margin:0;min-height:52px;font-size:.88rem;padding:12px 16px;white-space:nowrap;gap:8px;letter-spacing:0}
.pm-cta .btn-wa{flex:1 1 auto;width:auto}
.pm-cta .btn-ghost{flex:0 0 auto;width:auto;border-color:transparent;background:transparent;padding:12px 6px;font-weight:600;color:#d4d4d8;box-shadow:none}
.pm-cta .btn-wa{padding:12px 14px}
.pm-cta .lg{display:none}
.pm-info h4{margin:32px 0 12px;font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#ff4a40}
.pm-feat{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:.93rem;color:#e4e4e7}
.pm-feat li{position:relative;padding-left:24px}
.pm-feat li::before{content:"";position:absolute;left:2px;top:.42em;width:10px;height:6px;border-left:2px solid var(--red2);border-bottom:2px solid var(--red2);transform:rotate(-45deg)}
.pm-fit{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.pm-fit div{display:contents}
.pm-fit dt{font-weight:700;color:#fff;font-size:.82rem;white-space:nowrap}
.pm-fit dd{margin:0;color:#cfcfd4;font-size:.88rem;line-height:1.55}
.pm-note{margin:10px 0 0;color:var(--muted);font-size:.84rem}
.pm-list{list-style:none;padding:0;margin:0;display:grid;gap:8px;color:#cfcfd4;font-size:.9rem}
.pm-list li{position:relative;padding-left:18px}
.pm-list li::before{content:"";position:absolute;left:3px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--muted)}
@media (min-width:600px){
  .pm-cta .lg{display:inline}
  .pm-cta{gap:10px}
  .pm-cta .btn{font-size:.92rem}
  .pm-cta .btn-ghost{border-color:rgba(255,255,255,.2);background:#141416;padding:12px 18px;color:var(--text)}
  .pm-cta .btn-wa{flex:1 1 auto}
}
@media (min-width:900px){
  .pm[open]{padding:32px}
  .pm-inner{width:min(1120px,100%);height:auto;max-height:calc(100dvh - 64px);display:grid;grid-template-columns:1.05fr 1fr;overflow:hidden;border-radius:22px;border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 120px rgba(0,0,0,.7)}
  .pm-close{position:absolute;top:16px;right:24px}
  .pm-gallery{padding:24px;align-self:start}
  .pm-track{border-radius:14px}
  .pm-thumbs{padding:12px 0 0;flex-wrap:wrap}
  .pm-thumb{flex-basis:62px;height:62px}
  .pm-info{overflow-y:auto;max-height:calc(100dvh - 66px);padding:48px 52px 0 20px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
  .pm-cta{margin:28px -52px 0 -20px;padding:20px 52px 26px 20px}
}