/* Aoptik Black Week – testsidan /black-week/.
   Samma mått, typsnitt och pillerknappar som erbjudandesidan, men svart tema med rött som accent.
   Mobil först; datorlayout från 900 px. */

.bw{background:#000;color:#fff;font-family:Enkel,"Open Sans",sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
.bw *{box-sizing:border-box}
.bw a{color:inherit}
.bw p,.bw ul{margin:0}
.bw ul{padding:0;list-style:none}
.bw h1,.bw h2,.bw h3{margin:0;color:#fff;font-family:inherit}

/* Behållare */
.bw-wrap{max-width:1228px;margin:0 auto;padding-left:16px;padding-right:16px}
@media (min-width:900px){.bw-wrap{padding-left:24px;padding-right:24px}}

/* Text */
.bw-h1{font-size:clamp(40px,9vw,88px);font-weight:700;letter-spacing:-.03em;line-height:.95;text-transform:uppercase}
.bw-h1 span{display:block;color:#c00d0e}
.bw-h2{font-size:24px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.bw-ingress{font-size:16px;line-height:1.55;color:#bdbdbd;max-width:680px}
.bw-ingress a{color:#fff;font-weight:600}
.bw-ingress a:hover{color:#ff4b4b}
.bw-overline{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#9a9a9a;margin:0 0 10px}
.bw-overline--rod{color:#ff4b4b}
@media (min-width:900px){
  .bw-h2{font-size:32px}
  .bw-ingress{font-size:18px}
}

/* Knappar – samma piller som resten av sajten */
.bw-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border-radius:50px;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;line-height:1;transition:background .15s,color .15s,border-color .15s}
.bw-btn--rod{background:#c00d0e;color:#fff !important}
.bw-btn--rod:hover,.bw-btn--rod:focus{background:#e01112;color:#fff !important}
.bw-btn--linje{background:transparent;border:1.5px solid #fff;color:#fff !important}
.bw-btn--linje:hover,.bw-btn--linje:focus{border-color:#ff4b4b;color:#ff4b4b !important}
.bw-btn--vit{background:#fff;color:#c00d0e !important}
.bw-btn--vit:hover,.bw-btn--vit:focus{background:#f3f3f3;color:#a30b0c !important}
.bw-btn--stor{height:50px;padding:0 28px;font-size:16px}
.bw-knappar{display:flex;gap:10px;flex-wrap:wrap}
.bw-knappar--topp{margin-top:26px}
@media (max-width:899px){.bw-knappar--topp .bw-btn{flex:1 1 auto}}

/* Etiketter */
.bw-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:4px;line-height:1.2;background:#2a2a2a;color:#fff}
.bw-tag--rod{background:#c00d0e}
@media (min-width:900px){.bw-tag{font-size:12px;padding:5px 11px}}

/* Topp */
.bw-topp{position:relative;padding:44px 0 40px;background:#000;overflow:hidden}
.bw-topp::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:120%;background:radial-gradient(ellipse at 70% 100%,rgba(192,13,14,.55),rgba(192,13,14,0) 60%);pointer-events:none}
.bw-topp::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 0%,rgba(255,255,255,.07),transparent 45%);pointer-events:none}
.bw-topp__inner{position:relative;display:flex;flex-direction:column}
.bw-topp .bw-overline{color:#ff4b4b}
.bw-topp .bw-ingress{margin-top:18px}
@media (min-width:900px){.bw-topp{padding:72px 0 64px}.bw-topp .bw-ingress{margin-top:22px}}

/* Nedräkning */
.bw-nedrakning{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px}
.bw-nedrakning[hidden]{display:none}
.bw-nedrakning__etikett{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#9a9a9a;width:100%}
.bw-nedrakning__tal{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:10px 8px;border:1px solid #2a2a2a;border-radius:12px;background:rgba(255,255,255,.03)}
.bw-nedrakning__tal b{font-size:28px;font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bw-nedrakning__tal i{font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9a9a9a;margin-top:6px}
@media (min-width:900px){.bw-nedrakning__etikett{width:auto}.bw-nedrakning__tal{min-width:76px}.bw-nedrakning__tal b{font-size:32px}}

/* Rullande band */
.bw-band{background:#c00d0e;color:#fff;overflow:hidden;white-space:nowrap;padding:12px 0;border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15)}
.bw-band__spar{display:inline-flex;animation:bw-rulla 40s linear infinite}
.bw-band__grupp{display:inline-flex;align-items:center}
.bw-band__grupp span{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:0 18px}
.bw-band__grupp em{font-style:normal;font-size:11px;opacity:.75}
@keyframes bw-rulla{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.bw-band__spar{animation:none}}

/* Hero (huvuderbjudande) */
.bw-hero-sektion{padding-top:24px;scroll-margin-top:90px}
@media (min-width:900px){.bw-hero-sektion{padding-top:40px}}
.bw-hero{display:grid;grid-template-columns:1fr;border-radius:14px;overflow:hidden;background:#141414;border:1px solid #232323}
.bw-hero__bild{display:block;width:100%;height:250px;object-fit:cover;order:-1}
.bw-hero__text{padding:22px 18px 24px;display:flex;flex-direction:column;gap:12px}
.bw-hero__rubrik{font-size:30px;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.bw-hero__ingress{font-size:15px;line-height:1.5;color:#bdbdbd}
.bw-hero .bw-tag{align-self:flex-start}
@media (min-width:900px){
  .bw-hero{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:16px}
  .bw-hero__bild{height:100%;min-height:420px;order:0}
  .bw-hero__text{padding:56px 48px;gap:18px;justify-content:center}
  .bw-hero__rubrik{font-size:48px}
  .bw-hero__ingress{font-size:17px}
}

/* Grupper och kort */
.bw-grupp{padding-top:40px;display:flex;flex-direction:column;gap:16px}
@media (min-width:900px){.bw-grupp{padding-top:64px;gap:22px}}
.bw-grupp__huvud{display:flex;flex-direction:column;gap:4px}
@media (min-width:900px){.bw-grupp__huvud{flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}}
.bw-grupp__underrad{font-size:13px;color:#9a9a9a}
@media (min-width:900px){.bw-grupp__underrad{font-size:14px}}
.bw-rutnat{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:900px){.bw-rutnat{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}

.bw-kort{border:1px solid #232323;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;background:#141414;transition:border-color .15s,transform .15s}
.bw-kort:hover{border-color:#3a3a3a}
.bw-kort__bildlank{display:block;background:#0a0a0a}
.bw-kort__bild{display:block;width:100%;height:200px;object-fit:cover}
.bw-kort__inner{padding:18px 18px 20px;display:flex;flex-direction:column;gap:9px;flex-grow:1}
.bw-kort__inner .bw-tag{align-self:flex-start}
.bw-kort__rubrik{font-size:20px;font-weight:600;line-height:1.25}
.bw-kort__rubrik a{text-decoration:none}
.bw-kort__rubrik a:hover{color:#ff4b4b}
.bw-kort__text{font-size:15px;line-height:1.5;color:#bdbdbd}
.bw-kort .bw-knappar{margin-top:auto;padding-top:8px}
@media (min-width:900px){
  .bw-kort{border-radius:16px}
  .bw-kort__bild{height:260px}
  .bw-kort__inner{padding:24px 26px 26px;gap:10px}
  .bw-kort__rubrik{font-size:23px;line-height:1.2}
  .bw-kort__text{font-size:15px}
}

/* Kombinera och spara mer */
.bw-kombo{padding-top:40px}
@media (min-width:900px){.bw-kombo{padding-top:64px}}
.bw-kombo__inner{display:grid;grid-template-columns:1fr;gap:22px;padding:26px 20px;border-radius:16px;background:linear-gradient(135deg,#1a0404,#0d0d0d 55%);border:1px solid #2a1212}
.bw-kombo__text{display:flex;flex-direction:column;gap:8px}
.bw-kombo__lista{display:flex;flex-direction:column;gap:12px}
.bw-kombo__lista li{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid #262626}
.bw-kombo__lista b{font-size:16px;font-weight:600}
.bw-kombo__lista span{font-size:14px;line-height:1.5;color:#bdbdbd}
@media (min-width:900px){
  .bw-kombo__inner{grid-template-columns:5fr 7fr;gap:48px;padding:48px}
  .bw-kombo__lista li{padding:18px 20px}
  .bw-kombo__lista b{font-size:17px}
  .bw-kombo__lista span{font-size:15px}
}

/* Mörkare band för "Fler erbjudanden" */
.bw-morkband{background:#0a0a0a;margin-top:40px;padding:0 0 40px;border-top:1px solid #1c1c1c;border-bottom:1px solid #1c1c1c}
.bw-morkband .bw-grupp{padding-top:40px}
.bw-morkband .bw-kort{background:#161616}
@media (min-width:900px){.bw-morkband{margin-top:64px;padding-bottom:64px}.bw-morkband .bw-grupp{padding-top:64px}}

/* Trygghet */
.bw-trygghet{display:grid;grid-template-columns:1fr;gap:18px;padding:40px 16px}
@media (min-width:900px){.bw-trygghet{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding:64px 24px}}
.bw-trygghet__punkt{display:flex;gap:14px;align-items:flex-start}
.bw-ikon{flex:0 0 44px;width:44px;height:44px;padding:10px;border-radius:50%;border:1px solid #333;color:#fff}
.bw-trygghet__rubrik{font-size:16px;font-weight:600;line-height:1.3}
.bw-trygghet__text{font-size:14px;line-height:1.5;color:#bdbdbd;margin-top:3px}
.bw-trygghet__text a{color:#fff;font-weight:600}
.bw-trygghet__text a:hover{color:#ff4b4b}

/* Avslut */
.bw-cta{background:#c00d0e;padding:44px 0 48px}
.bw-cta__inner{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.bw-cta p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.9);max-width:620px}
.bw-cta .bw-btn{margin-top:6px}
@media (min-width:900px){.bw-cta{padding:72px 0 80px}.bw-cta__inner{align-items:center;text-align:center}.bw-cta p{font-size:18px}}

/* Raka kanter: korten i en rad är lika höga (grid) och knapparna ligger längst ned (margin-top:auto). */

/* Brett kort (märkesbågar) – fyller hela raden, bild till vänster på dator */
.bw-kort--bred{grid-column:1 / -1}
@media (min-width:900px){
  .bw-kort--bred{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .bw-kort--bred .bw-kort__bildlank{height:100%}
  .bw-kort--bred .bw-kort__bild{height:100%;min-height:340px}
  .bw-kort--bred .bw-kort__inner{padding:40px 44px;justify-content:center;gap:12px}
  .bw-kort--bred .bw-kort__rubrik{font-size:30px}
  .bw-kort--bred .bw-kort__text{font-size:16px}
}

/* Villkorsrad i hero */
.bw-hero__villkor{font-size:13px;color:#9a9a9a;margin-top:-4px}
@media (min-width:900px){.bw-hero__villkor{font-size:14px}}

/* Toppvideo ("Ljuset tänds") bakom rubriken – tyst loop, stillbild vid mindre rörelse */
.bw-topp--video{position:relative;overflow:hidden}
.bw-topp__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:0}
.bw-topp__sloja{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.7) 45%,rgba(0,0,0,.35) 100%)}
.bw-topp--video::before,.bw-topp--video::after{z-index:1}
.bw-topp--video .bw-topp__inner{z-index:2}
@media (max-width:899px){.bw-topp__sloja{background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.85) 100%)}}
@media (prefers-reduced-motion:reduce){.bw-topp__video{display:none}}