/* Nettbutikk (mobil først): velkommen-overskrift, Nyheter-karusell, tilbud, kategorilinje og kompakt produktrutenett (som Lyko). Forsiden: «Gå til nettbutikken» øverst. */

/* ---------- forsiden: stor knapp øverst ---------- */
.shopcta{background:var(--ink);color:#fff;padding:10px 0}
.shopcta .wrap{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.shopcta-btn{--bg:var(--orchid,#ef8ef6);--fg:var(--ink);min-height:52px;padding:14px 30px;font-size:17px;width:100%;max-width:420px}
.shopcta-t{display:none;font-size:14.5px;opacity:.85}
@media(min-width:760px){.shopcta{padding:12px 0}.shopcta-btn{width:auto;max-width:none;font-size:17px}.shopcta-t{display:inline}}

/* ---------- toppseksjon ---------- */
.shopx{padding-top:6px}
.shop-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;font-weight:600;color:var(--deep,var(--ink))}
.shop-back:hover{text-decoration:underline}
.shopx-hero{padding:4px 0 14px;max-width:920px}
.shopx-hero h1.display{font-size:clamp(28px,5.2vw,58px);line-height:1.08;margin:0 0 10px;font-weight:400;text-wrap:balance}
.shopx-hero h1.display em{font-style:italic;color:var(--deep,inherit)}
.shopx-hero .lead{font-size:clamp(15px,1.6vw,18px);margin:0 0 12px;max-width:62ch}
.shopx-hero .perks{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px}
.shopx-sub h1.display{font-size:clamp(26px,4vw,46px)}
.shopx-sub .eyebrow{display:block;margin-bottom:2px}
@media(max-width:640px){.shopx-hero .perks{display:none}.shopx-sub .lead{display:none}.shopx-hero{padding-bottom:6px}}

/* ---------- seksjoner: Nyheter + Kampanjer ---------- */
.promos{display:flex;flex-direction:column;gap:22px;margin:8px 0 6px}
.promos[hidden]{display:none}
.sx-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.sx-head h2{font-family:var(--f-display);font-weight:400;font-size:clamp(22px,3vw,32px);margin:0}
.sx-all{font-size:14.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.promos .rv,.car .rv{opacity:1!important;transform:none!important}

/* karusell – native scroll-snap (sveip), piler og piltaster */
.car{position:relative}
.car-t{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:2px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 2px 8px;margin:0 -2px;outline-offset:2px}
.car-t::-webkit-scrollbar{display:none}
.car-t:focus-visible{outline:2px solid var(--deep,var(--ink));border-radius:12px}
.nsl{flex:0 0 clamp(150px,43vw,230px);scroll-snap-align:start;min-width:0;display:flex}
.nsl .pcard{width:100%}
.car-b{position:absolute;top:38%;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.94);box-shadow:var(--shadow-s);display:grid;place-items:center;cursor:pointer;padding:0}
.car-b svg{width:18px;height:18px}
.car-prev{left:-6px}.car-prev svg{transform:rotate(180deg)}
.car-next{right:-6px}
.car-b[disabled]{opacity:0;pointer-events:none}
.car-b:hover{background:#fff;border-color:var(--ink)}

/* ---------- kategorilinje ---------- */
.catbar{display:flex;gap:8px;overflow-x:auto;padding:10px 0 4px;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.catbar::-webkit-scrollbar{display:none}
.catbar .chip{min-height:44px;flex:none;scroll-snap-align:start}
.shopx .brandbar{padding:4px 0 8px}
.shopx .brandbar .chip{min-height:40px}

/* ---------- kompakt produktrutenett (Lyko-lignende) ---------- */
.shop-layout{margin-top:10px}
.shop-layout .pgrid,.kamp .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:760px){.shop-layout .pgrid,.kamp .pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(min-width:1180px){.shop-layout .pgrid,.kamp .pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}.shop-layout{grid-template-columns:240px 1fr}}
.shop-layout .pcard,.kamp .pcard,.nsl .pcard{padding:8px 8px 10px;border-radius:14px}
.shop-layout .pcard:hover,.kamp .pcard:hover,.nsl .pcard:hover{transform:none}
.shop-layout .pcard .img,.kamp .pcard .img,.nsl .pcard .img{aspect-ratio:5/4;border-radius:10px}
.shop-layout .pcard .img img,.kamp .pcard .img img,.nsl .pcard .img img,.shop-layout .pcard .img img:not(.alt),.kamp .pcard .img img:not(.alt),.nsl .pcard .img img:not(.alt){position:absolute;inset:0;width:100%;height:100%;padding:5%;box-sizing:border-box;object-fit:contain}
.shop-layout .pcard .vendor,.kamp .pcard .vendor,.nsl .pcard .vendor{font-size:10.5px;margin:8px 2px 1px}
.shop-layout .pcard h3,.kamp .pcard h3,.nsl .pcard h3{font-size:14px;margin:0 2px;min-height:2.6em}
.shop-layout .pcard .pr,.kamp .pcard .pr,.nsl .pcard .pr{margin:0 2px;padding-top:6px;flex-wrap:wrap;gap:2px 8px}
.shop-layout .pcard .pr b,.kamp .pcard .pr b,.nsl .pcard .pr b{font-size:19px}
.shop-layout .pcard .pr s,.kamp .pcard .pr s,.nsl .pcard .pr s{font-size:13px}
.shop-layout .pcard .qa,.kamp .pcard .qa,.nsl .pcard .qa{display:none}
.shop-layout .pcard .fav,.kamp .pcard .fav,.nsl .pcard .fav{transform:scale(.9);transform-origin:top right}
.shop-layout .pcard .stk,.kamp .pcard .stk,.nsl .pcard .stk{margin:4px 2px 0;font-size:12px}
.shop-layout .pcard .tag,.kamp .pcard .tag,.nsl .pcard .tag{font-size:11px;padding:3px 8px}
.shop-layout .pcard .badge,.kamp .pcard .badge,.nsl .pcard .badge{top:6px;left:6px;gap:4px;flex-wrap:wrap;max-width:75%}

/* «Kjøp»-knapp: tydelig og minst 44 px */
.pc-buy{display:none}
.shop-layout .pc-buy,.kamp .pc-buy,.nsl .pc-buy{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:8px;border-radius:999px;border:0;background:var(--ink);color:#fff;font:600 15px var(--f-body);cursor:pointer;transition:background .2s}
.shop-layout .pc-buy:hover,.kamp .pc-buy:hover,.nsl .pc-buy:hover{background:var(--deep,#4a1a54)}

/* tilbud: tydelig tilbudspris (rød/varm), førpris gjennomstreket */
.pcard.onsale .pr b{color:#b4231f}
.pcard.onsale .pr s{color:var(--muted);text-decoration:line-through}
.pcard .tag.off{background:#b4231f;color:#fff}
.kamp .pcard{border-color:#f1c9c6}
@media(max-width:759px){.kamp .pgrid>:nth-child(n+5){display:none}}
@media(min-width:760px) and (max-width:1179px){.kamp .pgrid>:nth-child(n+7){display:none}}

/* hudrutine-guiden ligger nederst, slik at produktene kommer først */
.shopx .routine{margin-top:36px}
@media(max-width:900px){.shop-top .search{min-width:0;flex:1 1 100%;max-width:none}.shop-top select,.shop-top .fbtn{min-height:44px}}
@media(prefers-reduced-motion:reduce){.car-t{scroll-behavior:auto}}

/* mobil: færrest mulig rader over produktene, slik at ca. 4 produkter er synlige uten mye scrolling */
@media(max-width:640px){
  .shopx-sub .eyebrow{display:none}
  .shopx-sub h1.display{font-size:26px;margin-bottom:4px}
  .shop-back{min-height:40px}
  .shopx-cat .brandbar{display:none}
  .catbar{padding:4px 0 2px}
  .shop-top{gap:8px;margin-bottom:10px}
  .shop-top .count{display:none}
  .shop-top select{flex:1;min-width:0}
  .shop-layout .pcard .img,.kamp .pcard .img,.nsl .pcard .img{aspect-ratio:4/3}
  .shop-layout .pc-buy,.kamp .pc-buy,.nsl .pc-buy{margin-top:6px}
  .shop-layout .pcard h3,.kamp .pcard h3,.nsl .pcard h3{font-size:13.5px}
}