:root{
  --bg:#fff;
  --text:#0f0f0f;
  --muted:#6b7280;
  --accent:#76d14e; /* VONT green accent (adjust as needed) */
  --card:#f4f4f5;
  --max:1200px;
}
*{box-sizing:border-box}
html,body{padding:0;margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Value Sans','Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif;scroll-behavior:smooth}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 16px}
.section{padding:64px 0}
h1,h2,h3{line-height:1.1;margin:0 0 16px}
p{line-height:1.6;color:var(--muted)}

/* HERO */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.05)}
.hero .overlay{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px}
.hero .logo{width:min(360px,60vw);height:auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,.25))}
.hero .tagline {
  font-family: 'Value Sans Regular', system-ui, Arial, sans-serif;
  font-size: clamp(18px, 3.8vw, 30px);
  font-weight: 200;
  letter-spacing: .02em;
  color: #000;
  text-shadow: 0 6px 20px rgba(0,0,0,.3);
}

@media (min-width: 1024px) {
  .hero .tagline {
    font-size: 26px; /* lite mindre på desktop */
  }
}

/* PRODUCTS */
.products{background:#fafafa}
.products h2{font-size:clamp(24px,3.5vw,36px)}
.carousel{display:grid;grid-auto-flow:column;grid-auto-columns:80%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 24px}
@media(min-width:640px){.carousel{grid-auto-columns:calc(33.333% - 10.7px)}}
@media(min-width:1024px){.carousel{grid-auto-columns:calc(25% - 12px)}}
.card{background:var(--card);border-radius:20px;overflow:hidden;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.card .media{
  aspect-ratio:1 / 1;     /* kvadrat */
  background:#fff;
  display:block;
  overflow:hidden;         /* säkerhetsnät – inget får sticka ut */
  border-radius:16px;      /* valfritt: runda hörn, ta bort om du vill */
  padding:0;               /* ingen padding så bilden får maximal yta */
}
.card .media img{
  width:100%;
  height:100%;
  object-fit:contain;      /* hela bilden syns, aldrig klippt */
}
.card .body{padding:16px}
.card h3{font-size:18px;margin:0 0 8px}
.card .pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:6px 10px;font-size:12px;color:#111;border:1px solid #e5e7eb}
.card .dots{display:inline-flex;gap:6px;margin-left:8px;transform:translateY(1px)}
.card .dot{width:8px;height:8px;border-radius:50%;background:#e5e7eb}
.card .dot.active{background:#111}
.card a.cta{display:block;margin-top:12px;background:var(--text);color:#fff;text-align:center;padding:12px 14px;border-radius:14px;font-weight:600}

/* färger för styrke-prickar */
.dot.active.black { background:#111; }
.dot.active.red   { background:#e11d48; } /* justera röd vid behov */

/* FOOTER */
footer{background:#a0d1ca;color:#fff}
footer .grid{display:grid;gap:24px;grid-template-columns:1fr}
footer h4{font-size:18px;margin:0 0 8px}
footer a{color:#fff;text-decoration:underline}
@media(min-width:720px){footer .grid{grid-template-columns:repeat(3,1fr)}}
.footer-brand{font-weight:800;letter-spacing:.02em;margin-top:24px}

/* PRODUCT PAGE */
.product-hero{display:grid;gap:24px;align-items:center}
.product-hero .pic{order:2}
.product-hero .info{order:1}
.product-hero .badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:8px 12px;font-weight:700;margin:8px 8px 8px 0}
.product-hero .badge .dots{margin-left:6px}
.buy-list{display:grid;gap:12px;margin-top:16px}
.buy-list a{display:flex;justify-content:space-between;align-items:center;border:1px solid #e5e7eb;border-radius:14px;padding:12px 16px;background:#fff}
.made{display:inline-flex;align-items:center;gap:10px;margin-top:12px;color:var(--muted)}
@media(min-width:980px){.product-hero{grid-template-columns:1fr 1fr}.product-hero .pic{order:1}.product-hero .info{order:2}}

/* UTIL */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.shadow{box-shadow:0 16px 50px rgba(0,0,0,.12)}
.round{border-radius:24px}

/* --- Carousel arrows (desktop) --- */
.carousel-wrap{ position: relative; --arrow-top: 35%; } /* justera % om du vill flytta upp/ner */
.carousel-btn{
  position: absolute;
  top: var(--arrow-top);
  transform: translateY(-50%);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: #fff;              /* vit knapp */
  color: #111;                   /* svart ikon */
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
  z-index: 5;
}
.carousel-btn.prev{ left: -10px; }
.carousel-btn.next{ right: -10px; }
.carousel-btn:hover{ transform: translateY(-50%) scale(1.06); }

/* Dölj när inte relevant */
.carousel-btn[disabled]{
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Göm pilar på mobil */
@media (max-width: 640px){
  .carousel-btn{ display: none; }
}

/* Strength filter */
.strength-filter{
  display:flex; gap:12px; align-items:center; margin:8px 0 16px; flex-wrap:wrap;
}
.strength-option{
  appearance:none; border:1px solid #e5e7eb; background:#fff; color:#111;
  border-radius:999px; padding:8px 14px; font-weight:700; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.strength-option[aria-selected="true"]{
  background:#111; color:#fff; border-color:#111;
}
@media (max-width:640px){
  .strength-filter{ justify-content:space-between }
  .strength-option{ flex:1 1 auto; text-align:center }
}

/* === Carousel stacking + disabled arrows (PATCH) === */
.carousel { position: relative; z-index: 1; }  /* keep the carousel under the arrows */

/* Make sure arrows sit above the carousel and really hide when disabled */
.carousel-btn { z-index: 50; pointer-events: auto; }
.carousel-btn[disabled] { opacity: 0; pointer-events: none; visibility: hidden; }

/* === Fix for carousel arrows === */
.carousel { 
  position: relative; 
  z-index: 1;           /* lägg karusellen under knapparna */
}

.carousel-btn { 
  z-index: 10;          /* pilarna ovanpå */
}

.carousel-btn[disabled] {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}