:root{
    --navy:#12263f; --navy2:#0c1b2e; --yellow:#fdc500; --yellow-dark:#e0ae00;
    --bg:#f4f2ee; --surface:#ffffff; --ink:#1d2833; --muted:#66707c; --line:#e0dcd4;
    --serif:Georgia,"Times New Roman",serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:"Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
  img{max-width:100%;display:block}
  a{color:var(--navy);text-decoration:none}
  .wrap{max-width:1240px;margin:0 auto;padding:0 24px}

  header{background:var(--navy);position:sticky;top:0;z-index:50;box-shadow:0 3px 12px rgba(0,0,0,.25)}
  .nav{display:flex;align-items:center;height:76px;gap:36px}
  .logo{display:flex;align-items:center;gap:14px;color:#fff}
  .logo .mark{width:44px;height:44px;background:var(--yellow);color:var(--navy);display:grid;place-items:center;font-weight:900;font-size:20px;font-family:var(--serif);border-radius:4px}
  .logo .txt{font-family:var(--serif);font-size:24px;font-weight:700;letter-spacing:1px;line-height:1.1}
  .logo .txt small{display:block;font-family:"Segoe UI",sans-serif;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:#8fa2b8;color:#8fa2b8;font-weight:600}
  nav.menu{margin-left:auto;display:flex;gap:4px}
  nav.menu a{color:#d7e0ea;font-size:14.5px;font-weight:600;padding:10px 16px;border-radius:6px}
  nav.menu a:hover{background:rgba(255,255,255,.09);color:#fff}
  nav.menu a.hl{background:var(--yellow);color:var(--navy);font-weight:800}

  .hero{background:var(--navy);color:#fff;padding:0 0 0}
  .hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;padding:64px 24px 76px}
  .hero h1{font-family:var(--serif);font-size:clamp(34px,4.6vw,56px);line-height:1.12;font-weight:700}
  .hero h1 span{color:var(--yellow)}
  .hero p{color:#b9c7d6;font-size:17px;margin:22px 0 32px;max-width:52ch}
  .checks{display:grid;gap:10px;margin-bottom:34px}
  .checks li{list-style:none;display:flex;gap:12px;align-items:center;font-size:15.5px;color:#dce5ee}
  .checks .c{width:22px;height:22px;border-radius:50%;background:var(--yellow);color:var(--navy);display:grid;place-items:center;font-size:13px;font-weight:900;flex:none}
  .btn{display:inline-block;background:var(--yellow);color:var(--navy);font-weight:800;font-size:15.5px;padding:15px 32px;border-radius:6px;transition:.2s}
  .btn:hover{background:#ffd83d}
  .btn.line{background:transparent;color:#fff;border:1.5px solid #3b5170;margin-left:10px}
  .btn.line:hover{border-color:var(--yellow);color:var(--yellow)}
  /* height:auto is required: the <img> carries width/height attributes for
     layout stability, and without it the height attribute wins over the
     scaled width — stretching the square cut-out and inflating the hero. */
  .hero-shot{width:100%;max-width:560px;height:auto;justify-self:center;object-fit:contain}

  .marq{background:var(--yellow);overflow:hidden;border-top:1px solid rgba(18,38,63,.18)}
  .marq .track{display:flex;white-space:nowrap;width:max-content;animation:marq 36s linear infinite;padding:13px 0}
  .marq:hover .track{animation-play-state:paused}
  .marq span{font-size:13.5px;font-weight:700;color:var(--navy);padding:0 26px;border-right:1.5px solid rgba(18,38,63,.25)}
  .marq span b{font-weight:800;background:var(--navy);color:var(--yellow);font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;padding:3px 8px;margin-right:10px;vertical-align:1px}
  @keyframes marq{to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){.marq .track{animation:none}}

  section{padding:72px 0}
  .kicker{font-size:12.5px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:#a4772c;color:#8a6d1f;margin-bottom:10px}
  h2{font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);font-weight:700}

  .cat-layout{display:grid;grid-template-columns:250px 1fr;gap:36px;margin-top:38px;align-items:start}
  .side{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:22px;position:sticky;top:96px}
  .side h4{font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:18px 0 10px}
  .side h4:first-child{margin-top:0}
  .side button{display:flex;justify-content:space-between;width:100%;background:none;border:none;font:inherit;font-size:14.5px;padding:8px 10px;border-radius:6px;cursor:pointer;color:var(--ink);text-align:left}
  .side button:hover{background:#f1ede5}
  .side button.on{background:var(--navy);color:#fff;font-weight:700}
  .side button .n{color:var(--muted);font-size:12.5px}
  .side button.on .n{color:var(--yellow)}

  .count{font-size:14px;color:var(--muted);margin-bottom:16px}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:20px}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;transition:.18s;display:flex;flex-direction:column}
  .card:hover{box-shadow:0 14px 34px rgba(29,40,51,.14);transform:translateY(-3px)}
  .card .ph{aspect-ratio:4/3;background:#fff;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
  .card .ph img{width:100%;height:100%;object-fit:cover}
  .card .ph .art{position:absolute;top:10px;left:10px;background:var(--navy);color:#fff;font-size:11px;font-weight:700;letter-spacing:1px;padding:4px 9px;border-radius:4px}
  .card .body{padding:15px 16px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
  .card h3{font-size:15px;font-weight:700;line-height:1.35}
  .card .fits{font-size:12.5px;color:var(--muted)}
  .card .foot{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;align-items:center}
  .card .price{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--navy)}
  .card .go{font-size:12px;font-weight:800;color:#8a6d1f;letter-spacing:1px;text-transform:uppercase}

  .quality{background:var(--navy);color:#fff}
  .quality .cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .quality p.big{font-family:var(--serif);font-size:21px;line-height:1.55;color:#dce5ee;margin-top:18px}
  .quality .facts{display:grid;grid-template-columns:1fr 1fr;gap:2px;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.09)}
  .fact{background:#1a3251;padding:28px 26px 26px;transition:background .2s}
  .fact:hover{background:#20395c}
  .fact .n{font-family:var(--serif);font-size:36px;color:var(--yellow);font-weight:700;line-height:1;display:block}
  .fact .n::after{content:"";display:block;width:30px;height:3px;background:var(--yellow);margin:14px 0 16px;border-radius:2px}
  .fact b{display:block;font-size:15px;letter-spacing:.2px}
  .fact span{display:block;font-size:13px;color:#9fb2c8;line-height:1.55;margin-top:5px}

  .contact .cols{display:grid;grid-template-columns:1fr 1fr;gap:56px}
  .ctable{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:20px}
  .ctable div{display:flex;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--line);font-size:15px}
  .ctable div:last-child{border:none}
  .ctable span:first-child{color:var(--muted)}
  .ctable span:last-child{font-weight:700}
  .lang{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--yellow);border-radius:8px;padding:16px 18px;font-size:14px;color:var(--muted);margin-top:14px}
  .lang b{color:var(--ink);display:block;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px}

  footer{background:var(--navy2);color:#9fb2c8;padding:38px 0;font-size:14px}
  footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
  footer b{color:#fff;font-family:var(--serif);letter-spacing:.5px}

  dialog{border:none;border-radius:14px;padding:0;margin:auto;max-width:1180px;width:95vw;max-height:94vh;overflow-y:auto;box-shadow:0 40px 100px rgba(0,0,0,.4)}
  dialog::backdrop{background:rgba(12,27,46,.6)}
  .modal{display:grid;grid-template-columns:1.15fr .85fr}
  .modal .gal{background:#efece6;padding:24px}
  .modal .gal .main img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:#fff}
  .thumbs{display:flex;gap:10px;margin-top:12px}
  .thumbs img{width:88px;height:66px;object-fit:cover;border-radius:6px;cursor:pointer;border:2px solid transparent}
  .thumbs img.on{border-color:var(--navy)}
  .modal .info{padding:30px}
  .modal .grp{display:inline-block;background:var(--yellow);color:var(--navy);font-size:11.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:4px}
  .modal h3{font-family:var(--serif);font-size:24px;margin:12px 0 18px;line-height:1.25}
  .spec{width:100%;border-collapse:collapse;font-size:14.5px}
  .spec td{padding:9px 0;border-bottom:1px solid var(--line)}
  .spec td:first-child{color:var(--muted);width:42%}
  .spec td:last-child{font-weight:700}
  .modal .price-big{font-family:var(--serif);font-size:28px;font-weight:700;color:var(--navy);margin:18px 0 6px}
  .modal .note{font-size:13.5px;color:var(--muted)}
  dialog .close{position:absolute;top:12px;right:12px;z-index:2;width:28px;height:28px;border:none;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 12px rgba(12,27,46,.3);transition:background .18s,color .18s,transform .25s}
  dialog .close:hover{background:var(--yellow);color:var(--navy);transform:rotate(90deg)}
  dialog .close:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
  @media(max-width:940px){
    .hero .wrap,.quality .cols,.contact .cols{grid-template-columns:1fr}
    .cat-layout{grid-template-columns:1fr}
    .side{position:static}
    .modal{grid-template-columns:1fr}
    nav.menu{display:none}
  }
  @media(max-width:560px){
    .quality .facts{grid-template-columns:1fr}
  }

/* ---- language switcher ---- */
.langsw{display:flex;gap:2px;margin-left:18px;background:rgba(255,255,255,.08);border-radius:6px;padding:3px}
.langsw a{color:#c8d5e2;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:5px 9px;border-radius:4px;transition:.15s}
.langsw a:hover{color:#fff;background:rgba(255,255,255,.1)}
.langsw a.on{background:var(--yellow);color:var(--navy)}

/* ---- loading / empty states ---- */
.state{grid-column:1/-1;padding:56px 20px;text-align:center;color:var(--muted);font-size:15px}
.state.err{color:#a33}
.spinner{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--navy);border-radius:50%;margin:0 auto 14px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}}

.card .ph img{background:#fff}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--yellow);color:var(--navy);padding:10px 16px;border-radius:6px;font-weight:700}

/* ---- Länkar ---- */
.lead{color:var(--muted);font-size:15.5px;margin:14px 0 0;max-width:64ch}
.card.ext{cursor:default}
.card.ext:hover{transform:none;box-shadow:0 6px 18px rgba(29,40,51,.08)}
.card.ext .ph{cursor:pointer}
.modal.gal-only{grid-template-columns:1fr}
.card .ext-text{font-size:13.5px;color:var(--muted);line-height:1.5}
.card .ext-disclaimer{font-size:11.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:8px;margin-top:auto}
.btn.sm{padding:9px 18px;font-size:13.5px;margin-top:6px;align-self:flex-start}