:root{
  --bg:#0c0c0c; --card:#121212; --ink:#ffffff; --muted:#b4b4b4;
  --accent:#ff3b30; --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box} html,body{height:100%} html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--bg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
.container{max-width:1100px;margin-inline:auto;padding-inline:clamp(16px,4vw,28px)}
.section{padding-block:64px} .section--alt{background:linear-gradient(180deg,#0c0c0c 0,#111 100%)}
.section__head{margin-bottom:24px}
.grid{display:grid;gap:22px} .grid--2{grid-template-columns:1.15fr .85fr}
@media (max-width:900px){.grid--2{grid-template-columns:1fr}}
h1,h2,h3{font-family:"Bebas Neue",sans-serif;letter-spacing:.02em;margin:0 0 12px}
h1{font-size:clamp(44px,7vw,82px);line-height:.9} h2{font-size:clamp(32px,4.5vw,52px)} h3{font-size:clamp(24px,3.5vw,34px)}
.muted{color:var(--muted)}
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(180%) blur(8px);
  background:rgba(12,12,12,.7);border-bottom:1px solid #1b1b1b;display:flex;align-items:center}
.brand{display:flex;align-items:center;padding:14px 18px;text-decoration:none;color:inherit}
.brand-img{height:34px;width:auto;display:block;filter:invert(1) contrast(1.1)}
.site-nav{margin-left:auto;display:flex;gap:18px;padding:0 18px 0 0}
.site-nav a{display:inline-block;padding:14px 10px;text-decoration:none;color:var(--ink);opacity:.9}
.site-nav a:hover{opacity:1}
.site-nav .cta{background:var(--ink);color:#000;border-radius:999px;padding:10px 14px;box-shadow:var(--shadow)}
.nav-toggle{display:none}
@media (max-width:860px){
  .nav-toggle{display:inline-flex;margin-left:auto;margin-right:12px;padding:10px 12px;background:#1a1a1a;border:0;border-radius:10px;color:#fff}
  .site-nav{position:absolute;inset:60px 12px auto;flex-direction:column;background:#121212;border:1px solid #1f1f1f;border-radius:14px;padding:10px;display:none}
  .site-nav.open{display:flex}
}
.hero{position:relative;isolation:isolate;min-height:88vh;display:grid;place-items:center;overflow:hidden}
.hero__content{text-align:center}
.hero__content p{max-width:720px;margin-inline:auto;color:var(--muted)}
.hero__bg{position:absolute;inset:0;z-index:-1;background-position:center;background-size:cover;background-attachment:fixed;
  filter:contrast(1.05) saturate(1.05) brightness(.75)}
.hero__bg--custom{background-image:url('../images/lifestyle-1.jpeg')}
.btn{display:inline-block;padding:14px 18px;border-radius:999px;text-decoration:none;font-weight:700;border:1px solid transparent;transition:.2s}
.btn--primary{background:var(--accent);color:#fff} .btn--primary:hover{filter:brightness(1.05)}
.btn--ghost{border-color:#2a2a2a;color:#fff;background:#161616} .btn--ghost:hover{border-color:#3a3a3a}
.product{background:var(--card);border:1px solid #1f1f1f;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.product img{width:100%;aspect-ratio:4/5;object-fit:cover}
.product__body{padding:14px} .product h3{margin:0 0 4px} .price{font-weight:800}
.badge{font-size:.8rem;background:#1f1f1f;color:#fff;padding:4px 10px;border-radius:999px;margin-left:8px}
.product__actions{display:flex;gap:10px;margin-top:10px}
.select{width:100%;padding:10px;border-radius:10px;background:#161616;border:1px solid #2a2a2a;color:#fff}
.story-media img{width:100%;border-radius:var(--radius)}
.cta-card{background:linear-gradient(180deg,#131313,#111);border:1px solid #222;border-radius:var(--radius);padding:26px;display:grid;gap:8px;box-shadow:var(--shadow)}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.site-footer{border-top:1px solid #1b1b1b;margin-top:40px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0}
.footer-inner a{color:var(--muted);text-decoration:none} .footer-inner a:hover{color:#fff}
.look-grid{display:grid;gap:14px;grid-template-columns:repeat(12,1fr);padding-inline:clamp(10px,2vw,20px)}
.look-grid figure{margin:0;grid-column:span 6} .look-grid figure.wide{grid-column:span 12}
.look-grid img{width:100%;display:block;border-radius:14px;object-fit:cover;aspect-ratio:16/10;filter:saturate(1.05)}
@media (max-width:900px){.look-grid{grid-template-columns:repeat(6,1fr)} .look-grid figure{grid-column:span 6}}


/* --- Mobile polish (≤ 768px) --- */
@media (max-width: 768px){
  /* Mindre luft og bedre flyt */
  .section{ padding-block:40px; }

  /* Hero: ikke “fixed” bakgrunn (iOS glitch) og litt snillere tekst */
  .hero__bg{ background-attachment: scroll; }
  .hero__content h1{ font-size: clamp(36px, 10vw, 54px); }
  .hero__content p{ font-size: 0.95rem; }

  /* Meny på mobil */
  .brand-img{ height:28px; }
  .site-nav a{ padding:12px 10px; }

  /* Produktkort: tryggere bildeformat og knapper i kolonne */
  .product img{ aspect-ratio: 3 / 4; object-fit: cover; }
  .product__actions{ flex-direction: column; }
  .select{ width:100%; }

  /* 2-kol grid → 1 kol */
  .grid--2{ grid-template-columns: 1fr; }

  /* Lookbook: 2 kol, brede elementer tar full bredde */
  .look-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding-inline: 12px;
  }
  .look-grid figure{ grid-column: span 1; }
  .look-grid figure.wide{ grid-column: 1 / -1; }

  /* CTA-knapper: bredde 100% */
  .cta-actions{ flex-direction: column; }
  .btn{ width: 100%; text-align: center; }
}

/* Litt ekstra for veldig små skjermer (≤ 360px) */
@media (max-width: 360px){
  .hero__content h1{ font-size: 34px; }
  .site-nav{ inset: 56px 10px auto 10px; }
}


.product-slider {
  position: relative;
  max-width: 400px;
  margin: auto;
}

.product-slider img {
  width: 100%;
  display: none;
  border-radius: 8px;
}

.product-slider img.active {
  display: block;
}

.product-slider button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  font-size: 24px;
  padding: 8px 12px;
  cursor: pointer;
}

.product-slider .prev {
  left: 10px;
}
.product-slider .next {
  right: 10px;
}

/* --- Produktkort-slider --- */
.product-gallery{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}
.product-gallery .pg-img{
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4/5;     /* trygt format i kortet */
  cursor: zoom-in;
}
.product-gallery button{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.product-gallery .pg-prev{ left: 10px; }
.product-gallery .pg-next{ right: 10px; }

/* --- Lightbox (fullskjerm) --- */
.pg-lightbox[hidden]{ display:none; }
.pg-lightbox{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.9);
  display: grid; place-items: center;
  z-index: 1000;
}
.pg-lightbox__inner{
  position: relative; width: min(96vw, 1100px);
}
.pg-lightbox img{
  width: 100%; height: auto; display: block;
  border-radius: 8px;
}
.pg-lightbox .pg-prev,
.pg-lightbox .pg-next{
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.15);
  font-size: 28px; padding: 10px 14px;
  border: 0; color: #fff; border-radius: 999px;
}
.pg-lightbox .pg-prev{ left: -4rem; }
.pg-lightbox .pg-next{ right: -4rem; }
.pg-lightbox .pg-close{
  position: absolute; top: -3.2rem; right: 0;
  background: transparent; border: 0; color: #fff;
  font-size: 38px; cursor: pointer;
}

/* Små skjermer: piler tettere */
@media (max-width:768px){
  .pg-lightbox .pg-prev{ left: .5rem; }
  .pg-lightbox .pg-next{ right: .5rem; }
  .pg-lightbox .pg-close{ top: .5rem; right: .5rem; }
}

/* Toast */
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 9999;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-10px);
}