/*
* Butikk-forside CSS — basert på design/superkeys-alt3-v2.html
* Alt prefikset .sk-shop-* eller med originalklassene fra designet
*/
/* ═══ iOS ZOOM-PREVENTION ═══
iOS zoomer inn ved input-fokus hvis font-size < 16px. Dette forstyrrer
layout og krever manuell zoom-tilbake. 16px-regelen gjelder paa mobil
bare — desktop kan bruke mindre fonter for visuell tetthet uten samme
problem. */
@media (max-width: 768px) {
.sk-shop input[type="text"],
.sk-shop input[type="email"],
.sk-shop input[type="tel"],
.sk-shop input[type="number"],
.sk-shop input[type="password"],
.sk-shop input[type="search"],
.sk-shop input[type="url"],
.sk-shop textarea,
.sk-shop select {
font-size: 16px !important;
}
}
/* ═══ PRE-LAUNCH BANNER (topp-stripe) ═══ */
.sk-prebanner {
background: var(--accent);
color: #fff;
padding: 8px var(--px);
text-align: center;
font-family: var(--fb);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
}
.sk-prebanner a {
color: #fff;
text-decoration: underline;
text-underline-offset: 2px;
margin-left: 8px;
font-weight: 700;
}
.sk-prebanner a:hover { opacity: 0.85; }
/* ═══ NAV ═══ */
.sk-shop .nav {
display: flex; align-items: center; justify-content: space-between;
padding: 0 var(--px); height: 54px;
border-bottom: 1px solid var(--border);
position: sticky; top: 0;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(20px);
z-index: 100;
}
.sk-shop .nav-left { display: flex; align-items: center; }
.sk-shop .logo {
font-family: var(--fh); font-size: 16px; font-weight: 800; color: var(--ink);
display: flex; align-items: center; gap: 6px; letter-spacing: -0.01em;
white-space: nowrap;
}
.sk-shop .logo-m {
width: 24px; height: 24px; background: var(--accent);
border-radius: 5px; display: flex; align-items: center; justify-content: center;
}
.sk-shop .logo-m svg { width: 13px; height: 13px; }
.sk-shop .nav-right { display: flex; align-items: center; gap: 8px; }
.sk-shop .nav-icon {
width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all 0.15s;
background: transparent; position: relative;
color: var(--ink2);
}
.sk-shop .nav-icon:hover { background: var(--soft, #ECEDF0); color: var(--ink); }
.sk-shop .nav-icon svg { width: 20px; height: 20px; stroke-width: 1.8; }
.sk-shop .cart-badge {
position: absolute; top: 2px; right: 1px; width: 16px; height: 16px;
border-radius: 50%; background: var(--accent); color: #fff;
font-size: 10px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
font-family: var(--fb);
}
.sk-shop .nav-login {
display: flex; align-items: center; gap: 6px;
padding: 7px 16px; border-radius: 50px;
background: var(--accent); color: #fff;
font-size: 12.5px; font-weight: 600; cursor: pointer;
border: none; font-family: var(--fb);
transition: background 0.15s; text-decoration: none;
}
.sk-shop .nav-login:hover { background: var(--accent-d); color: #fff; }
.sk-shop .nav-login svg { width: 15px; height: 15px; }
/* ═══ NAV SEARCH (alltid synlig på desktop + tablet) ═══ */
.sk-shop .nav-search {
flex: 1;
max-width: 460px;
min-width: 200px;
margin: 0 20px;
position: relative;
display: flex; align-items: center;
background: var(--soft, #ECEDF0);
border: 1.5px solid transparent;
border-radius: 8px;
height: 38px;
transition: all 0.15s;
}
.sk-shop .nav-search:hover {
background: #fff;
border-color: var(--border, #DDDDE4);
}
.sk-shop .nav-search:focus-within {
background: #fff;
border-color: var(--accent, #0D7C6E);
/* Outline rendres alltid utenfor box-model og kuttes ikke av cat-bar/sticky-parents */
outline: 3px solid rgba(13,124,110,0.18);
outline-offset: 0;
/* Heve over cat-bar (z-index 99) så glow er synlig hele veien rundt */
z-index: 200;
}
/* Absolute-positioned icon = sitter INNE i inputen (ikke som flex-soskenelement)
Pattern brukes av Amazon, Komplett, FINN m.fl. Ikon leses som integrert decorative-marker. */
.sk-shop .nav-search .nav-search-icon {
width: 16px; height: 16px;
color: var(--ink3, #6B6B82);
flex-shrink: 0;
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
margin: 0;
transition: color 0.15s;
}
.sk-shop .nav-search:focus-within .nav-search-icon {
color: var(--accent, #0D7C6E);
}
.sk-shop .nav-search input[type="search"] {
flex: 1;
/* padding-left for absolute-positioned icon, padding-right for submit-knapp */
padding: 0 4px 0 38px;
height: 100%;
width: 100%;
background: transparent;
border: 0; outline: 0;
font-family: var(--fb);
/* iOS zoomer ved input-fokus hvis font-size < 16px. Holder 16px paa mobil
for aa unngaa viewport-zoom; visuell stoerrelse opprettholdes via padding. */
font-size: 16px;
color: var(--ink);
min-width: 0;
}
/* Submit-knapp flush mot høyre kant, matcher container border-radius
Touch-target: tar full nav-search-høyde (38px desktop, 44px mobil for WCAG 2.5.5) */
.sk-shop .nav-search .nav-search-submit {
flex: 0 0 auto;
height: 100%;
min-height: 38px;
min-width: 60px;
margin: 0;
padding: 0 18px;
background: var(--accent, #0D7C6E);
color: #fff;
border: 0;
/* Matcher container border-radius (8px) på høyre side, flat venstre */
border-radius: 0 7px 7px 0;
font-family: var(--fb);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 0.15s;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sk-shop .nav-search .nav-search-submit:hover {
background: var(--accent-d, #0a6358);
}
/* På mobil: touch-target minimum 44px → øk hele søkebar-høyden */
@media (max-width: 760px) {
.sk-shop .nav-search { height: 44px; }
.sk-shop .nav-search .nav-search-submit {
min-height: 44px;
padding: 0 14px;
font-size: 12px;
}
}
.sk-shop .nav-search input[type="search"]::placeholder {
color: var(--ink3, #6B6B82);
font-size: 13px;
}
.sk-shop .nav-search input[type="search"]::-webkit-search-cancel-button {
cursor: pointer;
}
.sk-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;
}
/* MOBIL HEADER (<=560px) — soek alltid synlig per Baymard/NN-data:
skjult soek paa e-handel-mobil reduserer soek-bruk 5-25%. Logo skrumpes
til kun ikon, login blir ikon-only, aktiveringsguide-ikon flyttes ut av
header. Soekebar tar resterende plass. */
@media (max-width: 560px) {
.sk-shop .nav { padding: 0 10px; gap: 8px; }
.sk-shop .nav-right { gap: 6px; }
/* Logo: skjul tekst, behold kun "S"-merket (sparer ~70px) */
.sk-shop .logo { font-size: 0; gap: 0; }
.sk-shop .logo-m { width: 32px; height: 32px; border-radius: 6px; }
.sk-shop .logo-m svg { width: 16px; height: 16px; }
/* Soekebar tar resten av tilgjengelig plass */
.sk-shop .nav-search {
display: flex;
margin: 0 4px;
min-width: 0;
flex: 1 1 auto;
}
/* Skjul "Soek"-tekst paa submit-knappen for mer kompakt layout — input-icon kommuniserer formaalet */
.sk-shop .nav-search .nav-search-submit { min-width: 44px; padding: 0 12px; }
/* font-size 16px bevart fra base-regel for aa unngaa iOS-auto-zoom */
.sk-shop .nav-search input[type="search"] { padding-left: 36px; }
.sk-shop .nav-search .nav-search-icon { left: 12px; }
/* Toggle-ikon overfloedig naar soekebaren er synlig */
.sk-shop .nav-search-toggle { display: none !important; }
/* Aktiveringsguide-ikon flyttes ut av header (synlig i bottom-nav + footer) */
.sk-shop .nav-icon[href*="aktiveringsguider"] { display: none; }
/* Login: ikon-only, ingen tekst */
.sk-shop .nav-login {
padding: 0;
width: 36px;
height: 36px;
border-radius: 50%;
justify-content: center;
background: transparent;
color: var(--ink2);
}
.sk-shop .nav-login:hover { background: var(--soft, #ECEDF0); color: var(--ink); }
.sk-shop .nav-login svg { width: 18px; height: 18px; }
.sk-shop .nav-login span { display: none; }
/* Naar logget inn: liten accent-prikk paa ikon for status-feedback */
.sk-shop .nav-login.is-logged-in {
color: var(--accent);
}
.sk-shop .nav-login.is-logged-in::after {
content: '';
position: absolute;
bottom: 4px;
right: 4px;
width: 7px;
height: 7px;
background: var(--accent);
border: 2px solid #fff;
border-radius: 50%;
}
.sk-shop .nav-login { position: relative; }
}
/* iPhone SE 1. gen (320px) — ekstra kompakt */
@media (max-width: 360px) {
.sk-shop .nav { padding: 0 8px; gap: 6px; }
.sk-shop .logo-m { width: 30px; height: 30px; }
.sk-shop .nav-icon, .sk-shop .nav-login { width: 32px; height: 32px; }
.sk-shop .nav-icon svg { width: 18px; height: 18px; }
/* Beholder 16px for iOS-zoom-prevention selv paa smaaste viewports */
}
/* ═══ CATEGORY BAR ═══ */
.sk-shop .cat-bar {
background: #fff; border-bottom: 1px solid var(--border);
position: sticky; top: 54px; z-index: 99;
/* relative for ::after fade-overlay */
position: -webkit-sticky;
}
.sk-shop .cat-scroll {
max-width: var(--max); margin: 0 auto; padding: 0 var(--px);
display: flex; overflow-x: auto; scrollbar-width: none;
/* Scroll-snap gjoer at kategorilinker "klikker" inn paa kanten under sveiping
— gir mer responsiv og intuitiv mobil-foelelse */
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
/* "safe center" — sentrer naar elementene faar plass, fall tilbake til
start-alignment naar de overflower (saa foerste link ikke klippes vekk
paa mobil-scroll). Stoettet i alle moderne nettlesere. */
justify-content: safe center;
}
.sk-shop .cat-scroll::-webkit-scrollbar { display: none; }
.sk-shop .cat-link { scroll-snap-align: start; }
/* Hoeyre-kant gradient-fade som antyder "det er mer innhold til hoeyre, sveip"
— skjules naar scrollet til ende (data-cat-scroll-end="1" via JS) */
.sk-shop .cat-bar::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 1px; /* under border-bottom */
width: 32px;
background: linear-gradient(to right, rgba(255,255,255,0), #fff 80%);
pointer-events: none;
transition: opacity 0.2s;
opacity: 1;
}
.sk-shop .cat-bar[data-cat-scroll-end="1"]::after {
opacity: 0;
}
/* Skjul fade-en helt naar alle linker faar plass uten scroll (data-cat-fits="1") */
.sk-shop .cat-bar[data-cat-fits="1"]::after {
display: none;
}
.sk-shop .cat-link {
font-size: 14px; color: var(--ink2);
padding: 12px 16px; font-weight: 600;
white-space: nowrap; transition: all 0.12s;
border-bottom: 2.5px solid transparent;
font-family: var(--fb); letter-spacing: -0.01em;
text-decoration: none;
}
.sk-shop .cat-link:hover { color: var(--ink); background: var(--soft, #ECEDF0); }
.sk-shop .cat-active { color: var(--accent); border-bottom-color: var(--accent); }
/* ═══ TRUST STRIP ═══ */
.sk-shop .trust-strip {
max-width: var(--max); margin: 0 auto;
padding: 16px var(--px); display: flex; justify-content: center;
}
.sk-shop .ts {
display: flex; align-items: center; gap: 8px;
padding: 0 24px; position: relative;
}
.sk-shop .ts:not(:last-child)::after {
content: ''; position: absolute; right: 0; top: 50%;
transform: translateY(-50%); width: 1px; height: 16px;
background: var(--border);
}
.sk-shop .ts svg { width: 18px; height: 18px; flex-shrink: 0; }
.sk-shop .ts-text { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
/* Trust-strip mobil: kompakt vertikal padding men beholder lesbar tekst-stoerrelse */
@media (max-width: 760px) {
.sk-shop .trust-strip {
padding: 8px 16px;
gap: 6px 12px;
flex-wrap: wrap;
justify-content: space-evenly;
}
.sk-shop .ts { padding: 0; gap: 7px; }
.sk-shop .ts:not(:last-child)::after { display: none; }
.sk-shop .ts svg { width: 16px; height: 16px; }
.sk-shop .ts-text { font-size: 12.5px; font-weight: 600; }
}
@media (max-width: 380px) {
.sk-shop .trust-strip { padding: 6px 12px; gap: 4px 10px; }
.sk-shop .ts-text { font-size: 11.5px; }
.sk-shop .ts { gap: 5px; }
.sk-shop .ts svg { width: 14px; height: 14px; }
}
/* ═══ HERO BANNER ═══ */
.sk-shop .hero { max-width: var(--max); margin: 0 auto; padding: 0 var(--px); }
.sk-shop .hero-slide {
position: relative; border-radius: 10px; overflow: hidden;
height: 320px; margin-bottom: 4px;
background: linear-gradient(135deg, #0F0F14, #1a1a2e);
}
.sk-shop .hero-overlay {
position: absolute; inset: 0;
/* UI/UX-review: redusert venstre-mørk fra 0.88 til 0.62 så produktbildet puster mer */
background: linear-gradient(90deg, rgba(10,10,20,0.62) 0%, rgba(10,10,20,0.32) 50%, rgba(10,10,20,0.05) 100%);
display: flex; align-items: center; padding: 0 48px;
}
.sk-shop .hero-content { max-width: 480px; }
.sk-shop .hero-badge {
display: inline-block; font-size: 10px; font-weight: 700;
padding: 4px 10px; border-radius: 3px; color: #fff;
text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px;
background: var(--accent);
}
.sk-shop .hero-title {
font-family: var(--fh); font-size: 32px; font-weight: 800;
color: #fff; line-height: 1.2; margin-bottom: 8px;
}
.sk-shop .hero-desc {
font-size: 14px; color: rgba(255,255,255,0.75);
margin-bottom: 20px; line-height: 1.5;
}
.sk-shop .hero-row { display: flex; align-items: center; gap: 12px; }
.sk-shop .hero-cta {
padding: 10px 24px; border-radius: 6px;
background: var(--accent); color: #fff;
border: none; font-size: 13px; font-weight: 700;
cursor: pointer; font-family: var(--fb);
transition: background 0.15s; text-decoration: none;
}
.sk-shop .hero-cta:hover { background: var(--accent-d); color: #fff; }
/* ═══ SECTION HEADER ═══ */
.sk-shop .sh {
max-width: var(--max); margin: 0 auto;
padding: 28px var(--px) 12px;
display: flex; justify-content: space-between; align-items: baseline;
}
.sk-shop .sht {
font-family: var(--fh); font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; color: var(--ink);
margin: 0; letter-spacing: -0.01em;
}
.sk-shop .shl {
font-size: 14px; color: var(--accent); font-weight: 600;
cursor: pointer; display: flex; align-items: center; gap: 4px;
transition: opacity 0.12s; text-decoration: none;
}
.sk-shop .shl:hover { opacity: 0.7; }
.sk-shop .shl svg { width: 12px; height: 12px; }
/* ═══ KATEGORI-BLOKKER ═══ */
.sk-shop .cats-wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--px) 8px; }
/* 3-kolonne x 2 rader på desktop (6 kategorier får mer plass per kort enn 6×1) */
.sk-shop .cats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sk-shop .cat-block {
position: relative; height: 90px; border-radius: 10px;
overflow: hidden; cursor: pointer; transition: all 0.2s;
text-decoration: none;
}
.sk-shop .cat-block:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
.sk-shop .cat-block-bg {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
flex-direction: column; gap: 6px;
}
.sk-shop .cat-block-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.sk-shop .cat-block-icon svg { width: 24px; height: 24px; stroke-width: 1.8; }
.sk-shop .cat-block-name {
font-family: var(--fh); font-size: 12px; font-weight: 700;
color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* ═══ GAME CARDS GRID (.grid) ═══ */
.sk-shop .grid {
max-width: var(--max); margin: 0 auto;
padding: 0 var(--px) 12px;
display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px;
}
/* min-width: 0 paa grid-children sikrer at lange titler/innhold ikke tvinger
en kolonne til aa bli bredere enn de andre (klassisk grid-content-overflow-bug).
Default er min-width: auto = kolonnen kan vokse til content-bredde. */
.sk-shop .grid > * {
min-width: 0;
max-width: 100%;
}
/* Naar .grid brukes inni .sk-shop-results (butikk-arkiv), parent har allerede
padding via .sk-shop-wrap — fjern duplikat-paddingen for konsistent layout. */
.sk-shop .sk-shop-results .grid {
padding: 0;
max-width: none;
}
.sk-shop .gc {
background: #fff; border-radius: 10px;
overflow: hidden; cursor: pointer;
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid var(--border, #E4E4EC); text-decoration: none;
display: flex; flex-direction: column;
/* Plattform-fargestripe oeverst (4px) — sterk visuell kategori-indikator
som hjelper aa skille produkter selv naar cover-art ser like ut.
--card-accent settes via inline style fra PHP (platform-fargen). */
position: relative;
}
.sk-shop .gc::before,
.sk-shop .sc::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--card-accent, var(--accent, #0D7C6E));
z-index: 5;
pointer-events: none;
/* Subtil glow saa stripen "lyser" mot kortet */
box-shadow: 0 0 8px var(--card-accent, var(--accent, #0D7C6E));
opacity: 0.95;
}
.sk-shop .gc:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(20, 20, 40, 0.10);
border-color: var(--border-h, #C8C8D4);
}
.sk-shop .gc-img {
position: relative; aspect-ratio: 3/4; overflow: hidden;
background: #0b0d11; /* mørk bg for letterbox av wide Kinguin-cover (ikke alle er portrait) */
/* 3:4 cover-art-aspect (Steam/PSN/Xbox-standard) — bredde driver høyde,
paritet med .sc-brand i mixed-grid via samme aspect-ratio. */
}
/* contain (ikke cover) for å unngå at brede covers (Steam-header 460x215 etc.) blir cropet
og kutter spilltittel. Letterbox aksepteres fremfor data-tap. */
.sk-shop .gc-img img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s; display: block; }
.sk-shop .gc:hover .gc-img img { transform: scale(1.04); }
.sk-shop .gc-gr {
position: absolute; inset: 0;
/* Mildere gradient — gir kontrast bak gc-btm uten å slukke logo-bilder */
background: linear-gradient(180deg, transparent 55%, rgba(16,16,24,0.35) 100%);
pointer-events: none;
}
.sk-shop .gc-tags {
position: absolute; top: 8px; left: 8px;
display: flex; gap: 6px; align-items: center; pointer-events: none;
/* right-side fri for discount-badge — plattform-tag og NO-flagg stacker venstre */
}
.sk-shop .gc-tp {
font-size: 10px; font-weight: 800; padding: 4px 9px; border-radius: 4px;
color: #fff; letter-spacing: 0.05em; text-transform: uppercase;
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
/* Tykkere ramme inni for at platform-badgen STIKKER UT mer mot mørke
cover-art og hjelper aa skille spillkort raskt */
border: 1px solid rgba(255,255,255,0.18);
}
.sk-shop .gc-tr {
padding: 2px; border-radius: 3px;
background: rgba(20,20,40,0.55);
backdrop-filter: blur(6px);
display: inline-flex; align-items: center;
line-height: 0;
}
/* SVG-flagg — vises i .gc-tr og .sc-flag */
.sk-shop .sk-flag {
width: 18px; height: 12px;
border-radius: 2px;
display: block;
box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
/* ═══ DISCOUNT BADGE — øverst-høyre over kortbilde ═══ */
.sk-shop .sk-discount-badge {
position: absolute;
top: 8px; right: 8px;
background: #FF5B24; /* Vipps-oransje for høy oppmerksomhet */
color: #fff;
font-family: var(--fh, 'Outfit', sans-serif);
font-size: 12px; font-weight: 800;
letter-spacing: 0.02em;
padding: 4px 8px; border-radius: 4px;
box-shadow: 0 2px 6px rgba(255, 91, 36, 0.35);
z-index: 2;
line-height: 1.1;
}
.sk-shop .sc .sk-discount-badge {
/* På .sc er .sc-brand position relative, så absolut posisjonering virker */
top: 10px; right: 10px;
}
/* Fast glass-strip nederst paa bilde-/brand-flate — gir konsistent lesbarhet
uavhengig av innhold (cover-art, logoer, placeholders). Brukes paa BEGGE
kort-typer for visuell paritet. */
.sk-shop .gc-btm,
.sk-shop .sc-btm {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 8px 12px 9px;
background: rgba(14, 14, 22, 0.68);
backdrop-filter: blur(10px) saturate(1.1);
-webkit-backdrop-filter: blur(10px) saturate(1.1);
border-top: 1px solid rgba(255, 255, 255, 0.06);
pointer-events: none;
}
.sk-shop .gc-name,
.sk-shop .sc-btm .sc-name {
font-family: var(--fh); font-size: 14.5px; font-weight: 800;
color: #fff; line-height: 1.2;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
letter-spacing: -0.015em;
/* Sterkere text-shadow gir tittelen primaer-fokus mot bilde-bakgrunn
slik at NAVNET (hovedidentifikatoren) er det foerste oeyet ser */
text-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 1px rgba(0,0,0,0.6);
/* Reset body-context-arvede dimensjoner */
min-height: 0;
margin: 0;
}
@supports not (backdrop-filter: blur(10px)) {
.sk-shop .gc-btm,
.sk-shop .sc-btm { background: rgba(10, 10, 18, 0.85); }
}
.sk-shop .gc-body { padding: 12px 14px 14px; background: #fff; gap: 6px; }
/* Pris-rad: baseline-aligning saa pris + originalpris ligger paa samme tekstlinje
(samme oppfoersel som .sc-row — hvis sentrert ville den lille originalprisen
se ut til aa "fly" hoeyere enn hovedprisen). */
.sk-shop .gc-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 0; }
/* gc-tittel i body — matcher .sc-name nøyaktig (struktur-paritet med programvarekort) */
.sk-shop .gc-name-body {
font-family: var(--fh, 'Outfit', sans-serif);
font-size: 14px; font-weight: 700;
color: var(--ink, #14141E);
line-height: 1.25;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 36px; /* 2 linjer = ~36px → matcher 2-linje sc-name */
}
/* gc-features — matcher .sc-features nøyaktig.
3 rader (plattform + region + metacritic) — 84px total */
.sk-shop .gc-features {
font-size: 11.5px; color: var(--ink3, #6A6A7A);
line-height: 1.45;
margin-bottom: 2px;
min-height: 56px;
}
.sk-shop .gc-price {
font-family: var(--fh); font-size: 19px; font-weight: 800;
color: var(--ink, #14141E); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.sk-shop .gc-orig { font-size: 11px; color: #9898AE; text-decoration: line-through; }
.sk-shop .gc-del {
font-size: 10.5px; color: var(--ink3, #6A6A7A); margin-bottom: 8px;
display: flex; align-items: center; gap: 4px;
}
.sk-shop .gc-del svg { width: 12px; height: 12px; color: var(--accent); stroke-width: 2.2; }
/* gc-buy — unified-styling deles med .sc-buy via normaliserings-regel ved linje 686 */
.sk-shop .gc-buy {
width: 100%; padding: 9px 0; border-radius: 7px;
background: var(--accent); color: #fff;
border: none; font-size: 11.5px; font-weight: 700;
cursor: pointer; font-family: var(--fb); transition: background 0.15s;
text-decoration: none; text-align: center; display: block;
margin-top: 8px;
}
.sk-shop .gc-buy:hover { background: var(--accent-d); color: #fff; }
/* Tillit-strip nederst — samme stil som .sc-trust på programvarekortene */
.sk-shop .gc-trust {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border, #E4E4EC);
font-size: 10.5px; color: var(--ink4, #9898AE);
line-height: 1.3;
display: flex; align-items: flex-start; gap: 5px;
}
.sk-shop .gc-trust svg {
width: 12px; height: 12px;
color: var(--accent);
flex-shrink: 0;
margin-top: 1px;
}
/* ═══ SOFTWARE CARDS (.sc) ═══
Programvare-kort: brand-flate + funksjonelle features + lisens-badge + tillit.
Vesentlig forskjellig fra .gc spillkort (vertikal istedenfor horisontal,
brand-bakgrunn istedenfor cover-art, fokus på inkludert-liste). */
.sk-shop .sw-wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--px) 12px; }
.sk-shop .sw-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
}
.sk-shop .sc {
background: #fff; border-radius: 12px;
border: 1px solid var(--border, #E4E4EC); cursor: pointer;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
display: flex; flex-direction: column; overflow: hidden;
text-decoration: none;
/* Position relative for ::before topp-fargestripe — se .gc-regel */
position: relative;
}
.sk-shop .sc:hover {
border-color: var(--border-h, #C4C4D0);
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(20, 20, 40, 0.10);
}
/* Brand-flate øverst — full bredde, leverandørens farge, stor logo sentrert */
.sk-shop .sc-brand {
position: relative;
height: 110px;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.sk-shop .sc-logo {
max-width: 50%; max-height: 50%;
width: auto; height: auto;
object-fit: contain;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
transition: transform 0.4s ease;
}
/* Seed-placeholders fyller hele brand-flata som cover-art (likt .gc-img),
slik at programvarekort i blandet grid (.grid) ikke staar ut som halv-fylte.
Compound-selector (.sc-logo.sc-logo-fill) for hoeyere spesifisitet enn
equal-height-rule paa linje 747 som setter max-width: 55%. */
.sk-shop .sc-logo.sc-logo-fill {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover;
filter: none;
}
.sk-shop .sc:hover .sc-logo { transform: scale(1.05); }
/* Lisens-badge: PERMANENT / 1 ÅR / 3 MND etc — øverst venstre på brand-flaten */
.sk-shop .sc-license {
position: absolute; top: 10px; left: 10px;
font-family: var(--fh); font-size: 9.5px; font-weight: 800;
letter-spacing: 0.06em; text-transform: uppercase;
padding: 4px 8px; border-radius: 4px;
background: rgba(255,255,255,0.18);
border: 1px solid;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Region-flagg paa programvare-kort — ved siden av lisens-badge */
.sk-shop .sc-region-flag {
position: absolute; top: 10px; left: 76px;
padding: 2px; border-radius: 3px;
background: rgba(20,20,40,0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: inline-flex; align-items: center;
line-height: 0;
}
.sk-shop .sc-body {
padding: 12px 14px 14px;
flex: 1;
display: flex; flex-direction: column;
gap: 6px;
}
/* sc-name rendres i overlay (.sc-btm) — se unified-styling sammen med .gc-name */
.sk-shop .sc-features {
font-size: 11.5px; color: var(--ink3, #6A6A7A);
line-height: 1.45;
margin-bottom: 2px;
min-height: 32px; /* hold høyden lik på tvers av kort */
}
.sk-shop .sc-row { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.sk-shop .sc-price {
font-family: var(--fh); font-size: 19px; font-weight: 800;
color: var(--ink, #14141E);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
/* Originalpris (overstrekket) — identisk styling med .gc-orig for konsistens */
.sk-shop .sc-orig { font-size: 11px; color: #9898AE; text-decoration: line-through; }
/* sc-buy — IDENTISK med .gc-buy for visuell konsistens i blandet grid */
.sk-shop .sc-buy {
width: 100%; padding: 9px 0; border-radius: 7px;
background: var(--accent); color: #fff;
border: none; font-size: 11.5px; font-weight: 700;
cursor: pointer; font-family: var(--fb); transition: background 0.15s;
text-decoration: none; text-align: center; display: block;
margin-top: 8px;
}
.sk-shop .sc-buy:hover { background: var(--accent-d); color: #fff; }
/* Tillit-strip nederst — viktig for programvare (folk kjøper på trygghet) */
.sk-shop .sc-trust {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border, #E4E4EC);
font-size: 10.5px; color: var(--ink4, #9898AE);
line-height: 1.3;
display: flex; align-items: flex-start; gap: 5px;
}
.sk-shop .sc-trust svg {
width: 12px; height: 12px;
color: var(--accent);
flex-shrink: 0;
margin-top: 1px;
}
/* ═══ EQUAL-HEIGHT KORT-NORMALISERING ═══
Tving .gc og .sc til samme høyde i en rad (CTA-er på samme y-koordinat),
uavhengig av hvor mye tekst som er i body. Brukes både i .grid (forsiden),
.sw-grid (forsiden) og .sk-shop ul.products (WC-arkiv). */
/* Grid-containers: stretch barna til samme høyde */
.sk-shop .grid,
.sk-shop .sw-grid,
.sk-shop ul.products { align-items: stretch; }
/* Kortet selv må fylle hele cellen */
.sk-shop .gc,
.sk-shop .sc {
height: 100%;
/* .gc har allerede display:flex+column fra eksisterende stil, .sc også */
}
/* Brand-flate (.sc) og bilde-flate (.gc-img) — samme aspect-ratio (3:4) for
pixel-perfekt paritet i mixed-grid uavhengig av kolonne-bredde. */
.sk-shop .sc-brand { aspect-ratio: 3/4; height: auto; }
/* Logo skaleres pent i den større flaten */
.sk-shop .sc-logo { max-width: 55%; max-height: 55%; }
/* Body strekker seg så CTA-knappen ender helt nederst i kortet */
.sk-shop .gc-body,
.sk-shop .sc-body {
flex: 1;
display: flex;
flex-direction: column;
}
/* === BODY-NORMALISERING — pris/CTA/trust på SAMME y-koordinat på tvers ===
Strukturen er identisk nederst (pris → CTA → trust) på begge kort.
Push pris-blokken til bunnen så alt klusterer i bunnen. */
.sk-shop .gc-row,
.sk-shop .sc-row { margin-top: auto; margin-bottom: 0; }
/* === FEATURES UNIFY ===
Hardlock features-listen til EKSAKT samme hoeyde paa begge kort-typer.
Spill-kort har 2 items (platform, region), software-kort har 3 items
(1 enhet, lisens, online aktivering). Uten fixed height gir 1-item
diff = ~16px diff i alle elementer under = CTA-knapp-misalignment.
60px = 3 linjer * (font 11.5px * line-height 1.45) + gap 4*2 + margin 2 */
.sk-shop .gc-features,
.sk-shop .sc-features {
height: 84px;
min-height: 84px;
max-height: 84px;
overflow: hidden;
}
/* === TRUST-STRIP UNIFY ===
Trust-tekst varierer i lengde — locked til 2 linjer max for konsistent
hoeyde paa tvers av produkter. Game-card faller alltid tilbake til
platform-default. Software-card faller tilbake til "Original lisens
— leveres paa e-post" naar _sw_trust meta er tom (functions.php). */
.sk-shop .gc-trust,
.sk-shop .sc-trust {
height: 47px;
overflow: hidden;
}
.sk-shop .gc-trust > span,
.sk-shop .sc-trust > span {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* === BUY-KNAPP UNIFY ===
Samme padding/radius/margin paa begge kort-typer slik at CTA-er sitter
paa identisk y-koordinat naar gc og sc er i samme rad. Hver kort-spesifikke
buy-regel (over) bruker identiske verdier — dette er en eksplisitt
guard mot fremtidige drift. */
.sk-shop .gc-buy,
.sk-shop .sc-buy {
width: 100%;
padding: 9px 0;
border-radius: 7px;
margin-top: 8px;
font-size: 11.5px;
font-weight: 700;
line-height: 1.2;
}
/* ═══ TYPE-BADGE — skiller spillkort fra programvarekort ═══
Plassert øverst i body, før tittelen. Konsistent struktur, ulik visuell stil. */
.sk-shop .sk-type-badge {
display: inline-block;
align-self: flex-start;
font-family: var(--fh, 'Outfit', sans-serif);
font-size: 9.5px; font-weight: 800;
letter-spacing: 0.08em; text-transform: uppercase;
padding: 4px 8px; border-radius: 4px;
line-height: 1.2; margin-bottom: 4px;
}
/* Spill: lys teal-pille — samme stil-familie som programvare for visuell ro */
.sk-shop .sk-type-spill {
background: var(--accent-l, #E4F4F1);
color: var(--accent-d, #095C52);
border: 1px solid rgba(13, 124, 110, 0.25);
}
/* Programvare: lys nøytral grå-pille — kontrasterer mot teal-spill-badgen */
.sk-shop .sk-type-programvare {
background: var(--soft, #ECEDF0);
color: var(--ink2, #3D3D50);
border: 1px solid var(--border, #DDDDE4);
}
/* ═══ META-LISTE — strukturert ikon+tekst i stedet for "·"-separert flatt tekst ═══ */
.sk-shop .sk-meta {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-direction: column;
gap: 4px;
min-height: 60px; /* 3 rader * 20px → uniform høyde */
}
.sk-shop .sk-meta li {
display: flex; align-items: center; gap: 6px;
font-size: 11px; color: var(--ink3, #6B6B82);
line-height: 1.3;
}
.sk-shop .sk-meta svg {
width: 13px; height: 13px;
flex-shrink: 0;
color: var(--ink4, #9898AE);
stroke-width: 2;
}
.sk-shop .sk-meta span {
flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Programvarekort bruker accent-farge på meta-ikonene for ekstra differensiering */
.sk-shop .sc .sk-meta svg { color: var(--accent, #0D7C6E); opacity: 0.7; }
/* CTA-knappene: nøyaktig samme høyde og padding på begge kort */
.sk-shop .gc-buy,
.sk-shop .sc-buy {
margin-top: 8px;
padding: 9px 14px;
border-radius: 7px;
font-size: 11.5px;
font-weight: 700;
line-height: 1.2;
width: 100%;
}
/* Pris: samme størrelse på begge kort */
.sk-shop .gc-price,
.sk-shop .sc-price { font-size: 18px; }
/* Trust-strippen: identisk margin/padding/border på begge */
.sk-shop .gc-trust,
.sk-shop .sc-trust {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border, #E4E4EC);
font-size: 10.5px;
color: var(--ink4, #9898AE);
line-height: 1.3;
display: flex;
align-items: flex-start;
gap: 5px;
}
/* Fast 2-linjers høyde på selve trust-teksten (span-en).
Uansett om teksten faktisk er 1 eller 2 linjer holder span-en seg på 28px.
Tekst som er > 2 linjer kuttes med ellipsis. Ikon (svg) får ikke clamp. */
.sk-shop .gc-trust > span,
.sk-shop .sc-trust > span {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 28px; /* 2 linjer * 14px line-height */
flex: 1;
min-width: 0; /* tillater wrap inni flex */
}
/* ═══ STAR RATING — viser kun når det er reviews (skjult ved 0) ═══ */
.sk-shop .sk-rating {
display: flex; align-items: center; gap: 4px;
margin-top: 4px;
}
.sk-shop .sk-stars {
display: inline-flex; gap: 1px;
line-height: 0;
}
.sk-shop .sk-star {
width: 12px; height: 12px;
}
.sk-shop .sk-star-on { fill: #F59E0B; } /* gull */
.sk-shop .sk-star-half { fill: #F59E0B; opacity: 0.55; } /* lyser gull for halve */
.sk-shop .sk-star-off { fill: var(--border, #DDDDE4); }
.sk-shop .sk-rating-count {
font-size: 10.5px; color: var(--ink3, #6B6B82);
font-weight: 600;
margin-left: 2px;
}
.sk-shop .sk-rating-count::before { content: '('; }
.sk-shop .sk-rating-count::after { content: ')'; }
/* ═══ SHOP TOOLBAR — sortering + result-count på kategori/butikk-sider ═══ */
.sk-shop .sk-shop-toolbar {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 12px;
max-width: var(--max, 1240px);
margin: 0 auto 20px;
padding: 12px 16px;
background: #fff;
border: 1px solid var(--border, #DDDDE4);
border-radius: var(--r, 10px);
}
.sk-shop .woocommerce-result-count {
margin: 0;
font-size: 13px;
color: var(--ink3, #6B6B82);
}
.sk-shop .woocommerce-ordering {
margin: 0;
display: flex; align-items: center; gap: 8px;
}
.sk-shop .woocommerce-ordering::before {
content: 'Sorter etter:';
font-size: 12px;
color: var(--ink3, #6B6B82);
font-weight: 600;
}
.sk-shop .woocommerce-ordering select.orderby {
padding: 7px 32px 7px 12px;
background: var(--soft, #ECEDF0);
border: 1px solid var(--border, #DDDDE4);
border-radius: 6px;
font-family: var(--fb);
font-size: 13px;
font-weight: 600;
color: var(--ink, #14141E);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 14px;
transition: all 0.15s;
}
.sk-shop .woocommerce-ordering select.orderby:hover {
background-color: #fff;
border-color: var(--accent, #0D7C6E);
}
.sk-shop .woocommerce-ordering select.orderby:focus {
outline: 0;
border-color: var(--accent, #0D7C6E);
box-shadow: 0 0 0 3px var(--accent-l, #E4F4F1);
}
/* ═══ SEKSJON-EYEBROW — brukes i sh-headers (f.eks. "Mest populære nå") ═══ */
.sk-shop .sk-section-eyebrow {
font-size: 12px; font-weight: 600;
color: var(--ink3, #6B6B82);
margin-left: auto;
padding-left: 16px;
}
/* ═══ PROMO BANNER (wp_option sk_promo_text) ═══ */
.sk-shop .sk-promo-banner {
background: var(--promo-color, #FF5B24);
color: #fff;
font-family: var(--fb);
font-size: 13px;
font-weight: 600;
text-align: center;
line-height: 1.3;
}
.sk-shop .sk-promo-banner-inner {
max-width: var(--max);
margin: 0 auto;
padding: 9px var(--px, 16px);
display: flex; align-items: center; justify-content: center;
gap: 12px; position: relative;
}
.sk-shop .sk-promo-banner a,
.sk-shop .sk-promo-banner span {
color: #fff;
text-decoration: none;
font-weight: 600;
}
.sk-shop .sk-promo-banner a:hover { text-decoration: underline; }
.sk-shop .sk-promo-close {
position: absolute; right: 12px; top: 50%;
transform: translateY(-50%);
background: transparent; border: 0;
color: rgba(255,255,255,0.9);
cursor: pointer; padding: 4px;
display: flex; align-items: center; justify-content: center;
border-radius: 4px;
transition: background 0.15s;
}
.sk-shop .sk-promo-close:hover { background: rgba(255,255,255,0.18); color: #fff; }
.sk-shop .sk-promo-close svg { width: 14px; height: 14px; }
/* ═══ WISHLIST HEART-KNAPP ═══
Plassert i body (top-right av .gc-body / .sc-body), ikke i bildet.
Gir mindre clutter paa cover-art og er konsistent paa tvers av kort-typer.
Body-kontainere har position:relative for absolute-positionering. */
.sk-shop .gc-body,
.sk-shop .sc-body { position: relative; }
.sk-shop .sk-wl-btn {
position: absolute;
top: 8px; right: 8px;
width: 30px; height: 30px;
background: var(--soft, #ECEDF0);
border: 0; border-radius: 50%;
cursor: pointer; padding: 0;
display: flex; align-items: center; justify-content: center;
color: var(--ink3, #6B6B82);
transition: all 0.18s;
z-index: 3;
}
.sk-shop .sk-wl-btn:hover {
color: #E11D48;
transform: scale(1.08);
background: #fff;
box-shadow: 0 0 0 1px rgba(225,29,72,0.18);
}
.sk-shop .sk-wl-btn.is-active {
color: #E11D48;
background: #fff;
box-shadow: 0 0 0 1px rgba(225,29,72,0.18);
}
.sk-shop .sk-wl-btn.is-loading { opacity: 0.5; pointer-events: none; }
.sk-shop .sk-wl-btn.is-pulse { animation: skWlPulse 0.4s ease-out; }
.sk-shop .sk-wl-btn svg { width: 16px; height: 16px; }
@keyframes skWlPulse {
0%, 100% { transform: scale(1.08); }
50% { transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
.sk-shop .sk-wl-btn { transition: none; }
.sk-shop .sk-wl-btn:hover { transform: none; }
.sk-shop .sk-wl-btn.is-pulse { animation: none; }
}
/* Type-badge flushes til venstre, plass for wishlist-knapp paa hoyre side i body-toppen */
.sk-shop .gc-body .sk-type-badge,
.sk-shop .sc-body .sk-type-badge { padding-right: 8px; max-width: calc(100% - 40px); }
/* ═══ FILTER SIDEBAR ═══ */
.sk-shop .sk-filter-sidebar {
max-width: var(--max);
margin: 0 auto 16px;
padding: 0 var(--px, 16px);
}
.sk-shop .sk-filter-toggle {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
background: #fff;
border: 1px solid var(--border, #DDDDE4);
border-radius: 6px;
font-family: var(--fb); font-size: 13px; font-weight: 600;
color: var(--ink, #14141E);
cursor: pointer;
transition: all 0.15s;
}
.sk-shop .sk-filter-toggle:hover {
border-color: var(--accent, #0D7C6E);
color: var(--accent-d, #095C52);
}
.sk-shop .sk-filter-toggle svg { width: 14px; height: 14px; }
.sk-shop .sk-filter-toggle[aria-expanded="true"] {
background: var(--accent-l, #E4F4F1);
border-color: var(--accent, #0D7C6E);
color: var(--accent-d, #095C52);
}
.sk-shop .sk-filter-body {
margin-top: 10px;
padding: 16px;
background: #fff;
border: 1px solid var(--border, #DDDDE4);
border-radius: var(--r, 10px);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.sk-shop .sk-filter-group {
border: 0; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 8px;
}
.sk-shop .sk-filter-group legend {
font-family: var(--fh);
font-size: 12px; font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink3, #6B6B82);
margin-bottom: 4px;
}
.sk-shop .sk-filter-price-inputs {
display: flex; gap: 8px; align-items: flex-end;
}
.sk-shop .sk-filter-price-inputs label {
flex: 1;
font-size: 12px; color: var(--ink3, #6B6B82);
display: flex; flex-direction: column; gap: 4px;
position: relative;
}
.sk-shop .sk-filter-price-inputs input {
padding: 7px 24px 7px 10px;
border: 1px solid var(--border, #DDDDE4);
border-radius: 6px;
font-family: var(--fb);
font-size: 13px; font-weight: 600;
color: var(--ink);
width: 100%;
box-sizing: border-box;
}
.sk-shop .sk-filter-price-inputs input:focus {
outline: 0;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-l);
}
.sk-shop .sk-filter-suffix {
position: absolute; right: 8px; bottom: 8px;
font-size: 11px; color: var(--ink4, #9898AE);
pointer-events: none;
}
.sk-shop .sk-filter-check {
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--ink2, #3D3D50);
cursor: pointer;
padding: 4px 0;
}
.sk-shop .sk-filter-check input[type="checkbox"] {
width: 16px; height: 16px;
accent-color: var(--accent, #0D7C6E);
flex-shrink: 0;
}
.sk-shop .sk-filter-check span:not(.sk-filter-count) { flex: 1; }
.sk-shop .sk-filter-count {
font-size: 11px; color: var(--ink4, #9898AE);
font-weight: 600;
}
.sk-shop .sk-filter-actions {
grid-column: 1 / -1;
display: flex; gap: 8px; align-items: center;
padding-top: 4px;
}
.sk-shop .sk-filter-apply {
padding: 9px 18px;
background: var(--accent, #0D7C6E); color: #fff;
border: 0; border-radius: 6px;
font-family: var(--fb); font-size: 13px; font-weight: 700;
cursor: pointer;
transition: background 0.15s;
}
.sk-shop .sk-filter-apply:hover { background: var(--accent-d, #095C52); }
.sk-shop .sk-filter-reset {
font-size: 13px; color: var(--ink3, #6B6B82);
text-decoration: none;
padding: 9px 12px;
}
.sk-shop .sk-filter-reset:hover { color: var(--ink, #14141E); text-decoration: underline; }
/* ═══ MODAL (generalisert) ═══ */
.sk-shop .sk-modal {
position: fixed; inset: 0;
z-index: 10000;
display: flex; align-items: center; justify-content: center;
padding: 20px;
opacity: 0; pointer-events: none;
transition: opacity 0.2s ease;
}
.sk-shop .sk-modal.is-open { opacity: 1; pointer-events: auto; }
.sk-shop .sk-modal-backdrop {
position: absolute; inset: 0;
background: rgba(15, 15, 20, 0.6);
backdrop-filter: blur(4px);
}
.sk-shop .sk-modal-panel {
position: relative;
background: #fff;
border-radius: 14px;
padding: 32px 28px;
max-width: 480px; width: 100%;
max-height: 90vh; overflow-y: auto;
box-shadow: 0 24px 60px rgba(0,0,0,0.3);
transform: translateY(20px);
transition: transform 0.22s ease;
}
.sk-shop .sk-modal.is-open .sk-modal-panel { transform: translateY(0); }
.sk-shop .sk-modal-close {
position: absolute; top: 14px; right: 14px;
width: 32px; height: 32px;
background: transparent; border: 0;
border-radius: 6px;
color: var(--ink3, #6B6B82);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.15s;
}
.sk-shop .sk-modal-close:hover { background: var(--soft, #ECEDF0); color: var(--ink); }
.sk-shop .sk-modal-close svg { width: 16px; height: 16px; }
.sk-shop .sk-modal-icon {
width: 56px; height: 56px;
background: var(--accent-l, #E4F4F1);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px;
}
.sk-shop .sk-modal-icon svg {
width: 28px; height: 28px;
color: var(--accent-d, #095C52);
}
.sk-shop .sk-modal h2 {
font-family: var(--fh);
font-size: 22px; font-weight: 800;
color: var(--ink); margin: 0 0 8px;
text-align: center;
}
.sk-shop .sk-modal p {
font-size: 14px; color: var(--ink2, #3D3D50);
line-height: 1.55;
text-align: center;
margin: 0 0 16px;
}
.sk-shop .sk-modal-list {
list-style: none;
padding: 0; margin: 16px 0;
display: flex; flex-direction: column; gap: 14px;
}
.sk-shop .sk-modal-list li {
display: flex; flex-direction: column; gap: 2px;
padding: 12px 14px;
background: var(--soft, #ECEDF0);
border-radius: 8px;
}
.sk-shop .sk-modal-list strong {
font-family: var(--fh);
font-size: 13px; font-weight: 700;
color: var(--ink);
}
.sk-shop .sk-modal-list span {
font-size: 12.5px; color: var(--ink3, #6B6B82);
line-height: 1.4;
}
.sk-shop .sk-modal-fine {
font-size: 11.5px;
color: var(--ink4, #9898AE);
text-align: center;
margin: 16px 0 0;
}
.sk-shop .sk-modal-fine a { color: var(--accent); }
.sk-shop .sk-modal-cta {
display: block;
margin: 16px 0 0;
padding: 12px;
background: var(--accent, #0D7C6E); color: #fff;
border-radius: 8px;
font-family: var(--fb); font-size: 14px; font-weight: 700;
text-decoration: none;
text-align: center;
transition: background 0.15s;
}
.sk-shop .sk-modal-cta:hover { background: var(--accent-d, #095C52); color: #fff; }
/* p-trust-link (klikkbar trust-tekst som åpner modal) */
.sk-shop .p-trust-link {
background: transparent; border: 0;
padding: 0; margin: 0;
font: inherit; color: inherit;
cursor: pointer;
text-decoration: underline dotted;
text-underline-offset: 3px;
}
.sk-shop .p-trust-link:hover { color: var(--accent-d, #095C52); }
/* ═══ HOVER-EFFEKT på produktkort (forbedret lift + glow) ═══ */
.sk-shop .gc, .sk-shop .sc {
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.sk-shop .gc:hover {
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(13, 124, 110, 0.15);
border-color: var(--accent, #0D7C6E);
}
.sk-shop .sc:hover {
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.10);
border-color: var(--border-h, #C4C4D0);
}
@media (prefers-reduced-motion: reduce) {
.sk-shop .gc:hover, .sk-shop .sc:hover { transform: none; }
}
/* ═══ BREADCRUMB ═══ */
.sk-shop .sk-breadcrumb {
background: #fff;
border-bottom: 1px solid var(--border, #DDDDE4);
}
.sk-shop .sk-breadcrumb-inner {
max-width: var(--max, 1240px);
margin: 0 auto;
padding: 10px var(--px, 16px);
}
.sk-shop .sk-breadcrumb ol {
list-style: none;
display: flex; flex-wrap: wrap; align-items: center;
margin: 0; padding: 0;
font-family: var(--fb);
font-size: 12.5px;
}
.sk-shop .sk-breadcrumb li {
display: flex; align-items: center;
color: var(--ink3, #6B6B82);
}
.sk-shop .sk-breadcrumb a {
color: var(--ink3, #6B6B82);
text-decoration: none;
transition: color 0.15s;
}
.sk-shop .sk-breadcrumb a:hover {
color: var(--accent, #0D7C6E);
text-decoration: underline;
}
.sk-shop .sk-breadcrumb [aria-current="page"] {
color: var(--ink, #14141E);
font-weight: 600;
}
.sk-shop .sk-breadcrumb-sep {
width: 12px; height: 12px;
margin: 0 6px;
color: var(--ink4, #9898AE);
flex-shrink: 0;
}
/* ═══ RECENTLY VIEWED ═══ */
.sk-shop .sk-rv {
max-width: var(--max, 1240px);
margin: 40px auto 24px;
padding: 0 var(--px, 16px);
}
.sk-shop .sk-rv-header {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 16px;
}
.sk-shop .sk-rv-grid {
/* Bruker eksisterende .grid styling */
}
/* ═══ STICKY BUY-BAR (mobil produktside) ═══ */
.sk-shop .sk-sticky-buy {
position: fixed;
bottom: 0; left: 0; right: 0;
background: #fff;
border-top: 1px solid var(--border, #DDDDE4);
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
padding: 10px 12px;
display: flex; align-items: center; gap: 12px;
z-index: 99;
transform: translateY(100%);
transition: transform 0.22s ease;
/* Default: hidden via [hidden]; CSS skjuler over 768px helt */
}
.sk-shop .sk-sticky-buy.is-visible {
transform: translateY(0);
}
.sk-shop .sk-sticky-buy-thumb {
width: 44px; height: 44px;
border-radius: 6px;
object-fit: cover;
flex-shrink: 0;
background: var(--soft, #ECEDF0);
}
.sk-shop .sk-sticky-buy-meta {
flex: 1; min-width: 0;
}
.sk-shop .sk-sticky-buy-name {
font-family: var(--fh);
font-size: 12.5px; font-weight: 700;
color: var(--ink, #14141E);
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sk-shop .sk-sticky-buy-price {
font-family: var(--fh);
font-size: 14px; font-weight: 800;
color: var(--ink, #14141E);
margin-top: 2px;
}
.sk-shop .sk-sticky-buy-cta {
/* CRO-pass 4: orange -> teal. Generisk Kjoep-CTA, ikke Vipps-spesifikk
(Vipps har egen .sk-btn-vipps med orange). Konsistens med hero-CTA. */
display: inline-flex; align-items: center; gap: 6px;
padding: 11px 16px;
background: var(--accent, #0D7C6E);
color: #fff;
border-radius: 8px;
font-family: var(--fb);
font-size: 13px; font-weight: 700;
text-decoration: none;
flex-shrink: 0;
transition: background 0.15s;
}
.sk-shop .sk-sticky-buy-cta:hover {
background: var(--accent-d, #095C52);
color: #fff;
}
.sk-shop .sk-sticky-buy-cta svg {
width: 14px; height: 14px;
}
/* Skjul helt på desktop — sticky bar er kun for mobil */
@media (min-width: 769px) {
.sk-shop .sk-sticky-buy { display: none !important; }
}
/* Padding-bottom på body for å ikke skjule innhold bak sticky-bar */
@media (max-width: 768px) {
.sk-shop.single-product main {
padding-bottom: 80px;
}
}
@media (prefers-reduced-motion: reduce) {
.sk-shop .sk-sticky-buy { transition: opacity 0.1s; transform: none; }
.sk-shop .sk-sticky-buy:not(.is-visible) { opacity: 0; pointer-events: none; }
.sk-shop .sk-sticky-buy.is-visible { opacity: 1; }
}
/* ═══ LOADING SKELETONS — vises mens innhold lastes ═══ */
.sk-shop .sk-skel {
background: linear-gradient(90deg,
var(--soft, #ECEDF0) 25%,
rgba(255,255,255,0.6) 50%,
var(--soft, #ECEDF0) 75%);
background-size: 200% 100%;
animation: skSkelLoad 1.4s ease-in-out infinite;
border-radius: 4px;
}
@keyframes skSkelLoad {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.sk-shop .sk-skel { animation: none; opacity: 0.7; }
}
/* Pre-bygd skeleton-kort som matcher .gc / .sc */
.sk-shop .sk-skel-card {
border: 1px solid var(--border, #DDDDE4);
border-radius: var(--r, 10px);
overflow: hidden;
background: #fff;
}
.sk-shop .sk-skel-card .sk-skel-img { height: 170px; border-radius: 0; }
.sk-shop .sk-skel-card .sk-skel-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.sk-shop .sk-skel-card .sk-skel-line { height: 12px; }
.sk-shop .sk-skel-card .sk-skel-line-sm { height: 10px; width: 70%; }
.sk-shop .sk-skel-card .sk-skel-line-price { height: 18px; width: 40%; margin-top: 8px; }
.sk-shop .sk-skel-card .sk-skel-btn { height: 36px; border-radius: 6px; margin-top: 6px; }
/* ═══ STOCK URGENCY — viser "Bare X igjen!" når lavt lager ═══ */
.sk-shop .sk-stock-urgency {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 9px;
border-radius: 4px;
font-family: var(--fb, 'DM Sans', sans-serif);
font-size: 11px; font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.2;
margin: 4px 0 0;
align-self: flex-start;
}
.sk-shop .sk-stock-urgency svg { width: 12px; height: 12px; }
/* Kort-variant — kompakt */
.sk-shop .sk-stock-card { font-size: 11px; padding: 3px 8px; }
.sk-shop .sk-stock-card svg { width: 11px; height: 11px; }
/* Produktside-variant — større, erstatter "På lager"-stripen */
.sk-shop .sk-stock-product {
font-size: 13px; padding: 8px 14px;
margin: 14px 0 0; border-radius: 6px;
width: 100%;
}
.sk-shop .sk-stock-product svg { width: 14px; height: 14px; }
/* Nivåer — fargekoding etter alvor */
.sk-shop .sk-stock-critical {
background: #FFF0EB; color: #C03A12;
border: 1px solid #FFB89C;
}
.sk-shop .sk-stock-low {
background: #FFF8E7; color: #92660A;
border: 1px solid #F5D78F;
}
.sk-shop .sk-stock-out {
background: var(--soft, #ECEDF0); color: var(--ink3, #6B6B82);
border: 1px solid var(--border, #DDDDE4);
}
/* Pulserende ring rundt critical for ekstra urgency */
.sk-shop .sk-stock-critical::before {
content: ''; display: inline-block;
width: 6px; height: 6px; border-radius: 50%;
background: #C03A12;
margin-right: 2px;
animation: skPulse 1.6s ease-in-out infinite;
}
@keyframes skPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) {
.sk-shop .sk-stock-critical::before { animation: none; }
}
/* ═══ SØK-TOGGLE — kun for smale mobiler (<560px). Skjult ellers via [hidden]. */
.sk-shop .nav-search-toggle[hidden] { display: none; }
.sk-shop .nav-search-mobile {
background: #fff;
border-bottom: 1px solid var(--border, #DDDDE4);
padding: 10px var(--px);
transform: translateY(-100%);
opacity: 0;
transition: transform 0.2s ease, opacity 0.2s ease;
position: relative;
z-index: 98;
}
.sk-shop .nav-search-mobile.is-open {
transform: translateY(0);
opacity: 1;
}
.sk-shop .nav-search-mobile form {
display: flex; align-items: center; gap: 6px;
background: var(--soft, #ECEDF0);
border: 1px solid transparent;
border-radius: 8px;
padding: 4px;
max-width: var(--max);
margin: 0 auto;
}
.sk-shop .nav-search-mobile form:focus-within {
background: #fff;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-l, #E4F4F1);
}
.sk-shop .nav-search-mobile .nav-search-icon {
width: 18px; height: 18px;
color: var(--ink3, #6B6B82);
margin: 0 4px 0 8px;
flex-shrink: 0;
}
.sk-shop .nav-search-mobile input[type="search"] {
flex: 1; min-width: 0;
padding: 8px 4px;
border: 0; outline: 0; background: transparent;
font-family: var(--fb); font-size: 16px; /* iOS-zoom-prevention */
color: var(--ink);
}
.sk-shop .nav-search-mobile .nav-search-btn {
padding: 7px 14px;
background: var(--accent); color: #fff;
border: 0; border-radius: 6px;
font-family: var(--fb); font-size: 12px; font-weight: 700;
cursor: pointer;
}
.sk-shop .nav-search-mobile .nav-search-close {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
background: transparent; border: 0;
border-radius: 6px;
color: var(--ink3, #6B6B82);
cursor: pointer;
flex-shrink: 0;
}
.sk-shop .nav-search-mobile .nav-search-close:hover {
background: var(--soft, #ECEDF0);
color: var(--ink);
}
.sk-shop .nav-search-mobile .nav-search-close svg { width: 16px; height: 16px; }
/* ═══ TRUSTPILOT WIDGET — vises kun når sk_trustpilot_global() har data ═══ */
.sk-shop .sk-tp {
display: inline-flex; align-items: center; gap: 10px;
padding: 10px 16px;
background: #fff;
border: 1px solid var(--border, #DDDDE4);
border-radius: var(--rs, 6px);
text-decoration: none;
transition: all 0.15s;
font-family: var(--fb);
}
.sk-shop .sk-tp:hover {
border-color: #00B67A; /* Trustpilot-grønn */
box-shadow: 0 4px 14px rgba(0, 182, 122, 0.12);
}
.sk-shop .sk-tp-stars {
display: inline-flex; gap: 1px; line-height: 0;
}
.sk-shop .sk-tp-star {
width: 16px; height: 16px;
}
.sk-shop .sk-tp-star-on { fill: #00B67A; }
.sk-shop .sk-tp-star-half { fill: #00B67A; opacity: 0.55; }
.sk-shop .sk-tp-star-off { fill: var(--border, #DDDDE4); }
.sk-shop .sk-tp-text {
font-size: 13px; color: var(--ink2, #3D3D50);
font-weight: 500;
}
.sk-shop .sk-tp-text strong { font-weight: 700; color: var(--ink); }
.sk-shop .sk-tp-brand {
font-size: 12px; font-weight: 700;
color: #00B67A; letter-spacing: 0.02em;
padding-left: 8px;
border-left: 1px solid var(--border, #DDDDE4);
margin-left: 4px;
}
/* Hero-variant — større og sentrert under hero */
.sk-shop .sk-tp-hero-wrap {
text-align: center;
padding: 16px var(--px) 0;
}
.sk-shop .sk-tp-hero {
padding: 14px 22px;
}
.sk-shop .sk-tp-hero .sk-tp-star { width: 20px; height: 20px; }
.sk-shop .sk-tp-hero .sk-tp-text { font-size: 14px; }
/* Footer-variant — kompakt */
.sk-shop .ft-trustpilot {
max-width: var(--max);
margin: 24px auto 0;
padding: 0 var(--px);
text-align: center;
}
.sk-shop .sk-tp-footer {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.15);
}
.sk-shop .sk-tp-footer .sk-tp-text { color: rgba(255,255,255,0.85); }
.sk-shop .sk-tp-footer .sk-tp-text strong { color: #fff; }
.sk-shop .sk-tp-footer .sk-tp-brand { color: #00B67A; border-color: rgba(255,255,255,0.2); }
/* Inline-variant på buy-card */
.sk-shop .p-trustpilot {
margin-top: 14px; padding-top: 14px;
border-top: 1px solid var(--border, #DDDDE4);
}
.sk-shop .p-trustpilot .sk-tp {
width: 100%;
border: 0; padding: 0;
background: transparent;
flex-wrap: wrap;
}
.sk-shop .p-trustpilot .sk-tp:hover { background: transparent; box-shadow: none; }
/* ═══ SØK-RESULTAT-SIDE ═══ */
.sk-shop .sk-search-page {
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--px);
}
.sk-shop .sk-search-header {
padding: 32px 0 24px;
border-bottom: 1px solid var(--border, #DDDDE4);
margin-bottom: 28px;
}
.sk-shop .sk-search-header-inner { max-width: 760px; }
.sk-shop .sk-search-title {
font-family: var(--fh); font-size: 28px; font-weight: 800;
color: var(--ink); margin: 6px 0 18px;
line-height: 1.25;
}
.sk-shop .sk-search-title em {
color: var(--accent-d, #095C52);
font-style: normal;
font-weight: 700;
}
/* Stor søke-form — brukes på søk og 404 */
.sk-shop .sk-search-bigform {
display: flex; align-items: center;
background: #fff;
border: 2px solid var(--border, #DDDDE4);
border-radius: 10px;
padding: 4px;
transition: border-color 0.15s, box-shadow 0.15s;
max-width: 540px;
}
.sk-shop .sk-search-bigform:focus-within {
border-color: var(--accent, #0D7C6E);
box-shadow: 0 0 0 4px var(--accent-l, #E4F4F1);
}
.sk-shop .sk-search-bigform-icon {
width: 22px; height: 22px;
color: var(--ink3, #6B6B82);
margin: 0 8px 0 12px;
flex-shrink: 0;
}
.sk-shop .sk-search-bigform input[type="search"] {
flex: 1; min-width: 0;
padding: 12px 4px;
border: 0; outline: 0; background: transparent;
font-family: var(--fb); font-size: 16px; /* iOS-zoom-prevention */
color: var(--ink);
}
.sk-shop .sk-search-bigform button[type="submit"] {
padding: 10px 22px;
background: var(--accent, #0D7C6E); color: #fff;
border: 0; border-radius: 7px;
font-family: var(--fb); font-size: 14px; font-weight: 700;
cursor: pointer;
transition: background 0.15s;
}
.sk-shop .sk-search-bigform button[type="submit"]:hover {
background: var(--accent-d, #095C52);
}
/* Søk: side-resultat (ikke-produkt) */
.sk-shop .sk-search-page-card {
display: block;
padding: 20px;
background: #fff;
border: 1px solid var(--border, #DDDDE4);
border-radius: var(--r, 10px);
text-decoration: none;
transition: all 0.15s;
}
.sk-shop .sk-search-page-card:hover {
border-color: var(--accent, #0D7C6E);
transform: translateY(-2px);
box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,0.04));
}
.sk-shop .sk-search-page-card h3 {
font-family: var(--fh); font-size: 16px; font-weight: 700;
color: var(--ink); margin: 0 0 8px;
}
.sk-shop .sk-search-page-card p {
font-size: 13px; color: var(--ink3, #6B6B82);
margin: 0 0 12px;
}
.sk-shop .sk-search-page-link {
font-size: 13px; font-weight: 600;
color: var(--accent, #0D7C6E);
}
/* Søk: tom-state */
.sk-shop .sk-search-empty {
padding: 40px 0 60px;
}
.sk-shop .sk-search-empty-inner {
max-width: 640px;
text-align: center;
margin: 0 auto;
}
.sk-shop .sk-search-empty-icon {
width: 64px; height: 64px;
color: var(--ink4, #9898AE);
margin: 0 auto 16px;
opacity: 0.5;
}
.sk-shop .sk-search-empty h2 {
font-family: var(--fh); font-size: 22px; font-weight: 700;
color: var(--ink); margin: 0 0 8px;
}
.sk-shop .sk-search-empty p {
font-size: 14px; color: var(--ink3, #6B6B82);
margin: 0 0 24px;
}
.sk-shop .sk-search-empty-h3 {
font-family: var(--fh); font-size: 13px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--ink3, #6B6B82);
margin: 24px 0 10px;
}
.sk-shop .sk-search-empty-tips {
list-style: none; padding: 0; margin: 0 auto 8px;
max-width: 480px; text-align: left;
}
.sk-shop .sk-search-empty-tips li {
padding: 6px 0 6px 22px;
font-size: 13.5px; color: var(--ink2, #3D3D50);
position: relative;
}
.sk-shop .sk-search-empty-tips li::before {
content: '→'; position: absolute; left: 0;
color: var(--accent, #0D7C6E); font-weight: 700;
}
.sk-shop .sk-search-empty-cats {
display: flex; flex-wrap: wrap; gap: 8px;
justify-content: center;
margin-bottom: 28px;
}
.sk-shop .sk-search-empty-cat {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
background: #fff;
border: 1px solid var(--border, #DDDDE4);
border-radius: 50px;
font-size: 13px; font-weight: 600;
color: var(--ink, #14141E);
text-decoration: none;
transition: all 0.15s;
}
.sk-shop .sk-search-empty-cat:hover {
border-color: var(--accent, #0D7C6E);
color: var(--accent-d, #095C52);
}
.sk-shop .sk-search-empty-cat-count {
font-size: 11px; color: var(--ink4, #9898AE);
font-weight: 500;
}
.sk-shop .sk-search-empty-cta {
display: inline-block;
padding: 12px 28px;
background: var(--accent, #0D7C6E); color: #fff;
border-radius: 8px;
font-family: var(--fb); font-size: 14px; font-weight: 700;
text-decoration: none;
transition: background 0.15s;
}
.sk-shop .sk-search-empty-cta:hover {
background: var(--accent-d, #095C52);
color: #fff;
}
/* Paginering — Norsk styling */
.sk-shop .sk-pagination,
.sk-shop .pagination {
margin: 32px auto;
text-align: center;
}
.sk-shop .sk-pagination .page-numbers,
.sk-shop .pagination .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: 36px; height: 36px; padding: 0 10px;
margin: 0 3px;
background: #fff;
border: 1px solid var(--border, #DDDDE4);
border-radius: 6px;
font-size: 13px; font-weight: 600;
color: var(--ink2, #3D3D50);
text-decoration: none;
transition: all 0.15s;
}
.sk-shop .sk-pagination .page-numbers:hover,
.sk-shop .pagination .page-numbers:hover {
border-color: var(--accent, #0D7C6E);
color: var(--accent-d, #095C52);
}
.sk-shop .sk-pagination .page-numbers.current,
.sk-shop .pagination .page-numbers.current {
background: var(--accent, #0D7C6E);
border-color: var(--accent, #0D7C6E);
color: #fff;
}
/* ═══ 404-SIDE ═══ */
.sk-shop .sk-404 {
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--px) 60px;
}
.sk-shop .sk-404-header {
text-align: center;
padding: 48px 0 32px;
}
.sk-shop .sk-404-code {
display: inline-block;
font-family: var(--fh); font-size: 96px; font-weight: 900;
line-height: 1;
color: var(--accent, #0D7C6E);
letter-spacing: -0.04em;
margin-bottom: 8px;
background: linear-gradient(135deg, var(--accent, #0D7C6E), var(--accent-d, #095C52));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.sk-shop .sk-404-title {
font-family: var(--fh); font-size: 28px; font-weight: 800;
color: var(--ink); margin: 0 0 8px;
}
.sk-shop .sk-404-sub {
font-size: 15px; color: var(--ink3, #6B6B82);
max-width: 520px; margin: 0 auto 28px;
line-height: 1.55;
}
.sk-shop .sk-404-search {
margin: 0 auto;
}
.sk-shop .sk-404-cta-row {
display: flex; gap: 12px; justify-content: center;
margin-top: 20px; flex-wrap: wrap;
}
.sk-shop .sk-404-cta {
display: inline-block;
padding: 11px 22px;
border-radius: 7px;
font-family: var(--fb); font-size: 14px; font-weight: 700;
text-decoration: none;
transition: all 0.15s;
}
.sk-shop .sk-404-cta-primary {
background: var(--accent, #0D7C6E); color: #fff;
}
.sk-shop .sk-404-cta-primary:hover {
background: var(--accent-d, #095C52); color: #fff;
}
.sk-shop .sk-404-cta-secondary {
background: transparent; color: var(--ink2, #3D3D50);
border: 1px solid var(--border, #DDDDE4);
}
.sk-shop .sk-404-cta-secondary:hover {
border-color: var(--accent, #0D7C6E); color: var(--accent-d, #095C52);
}
.sk-shop .sk-404-section {
margin-top: 48px;
}
.sk-shop .sk-404-section h2 {
font-family: var(--fh); font-size: 18px; font-weight: 700;
color: var(--ink); margin: 0 0 16px;
text-align: center;
}
.sk-shop .sk-404-cats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
max-width: 720px; margin: 0 auto;
}
.sk-shop .sk-404-cat {
display: flex; flex-direction: column;
padding: 14px 16px;
background: #fff;
border: 1px solid var(--border, #DDDDE4);
border-radius: var(--r, 10px);
text-decoration: none;
transition: all 0.15s;
}
.sk-shop .sk-404-cat:hover {
border-color: var(--accent, #0D7C6E);
transform: translateY(-2px);
box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,0.04));
}
.sk-shop .sk-404-cat-name {
font-family: var(--fh); font-size: 14px; font-weight: 700;
color: var(--ink, #14141E); margin-bottom: 2px;
}
.sk-shop .sk-404-cat-count {
font-size: 11.5px; color: var(--ink3, #6B6B82);
}
.sk-shop .sk-404-help {
margin-top: 40px; text-align: center;
font-size: 13px; color: var(--ink3, #6B6B82);
}
.sk-shop .sk-404-help a { color: var(--accent, #0D7C6E); font-weight: 600; }
/* ═══ HOW (CRO N / Q1-Q5) ═══ */
.sk-shop .how { padding: 48px var(--px); background: var(--soft, #ECEDF0); margin-top: 40px; }
.sk-shop .how-inner { max-width: var(--max); margin: 0 auto; }
.sk-shop .how h2 {
/* Q1: 22px -> clamp(22-28) + ls. Konsistens med forsidens .sht-pattern. */
font-family: var(--fh); font-size: clamp(22px, 2.4vw, 28px); font-weight: 700;
color: var(--ink); margin-bottom: 32px; text-align: center;
letter-spacing: -0.01em;
}
.sk-shop .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.sk-shop .how-grid::before {
/* Q5: solid grey -> dashed accent-l. Leder oeyet mellom step 1->2->3. */
content: ''; position: absolute; top: 24px;
left: calc(16.67% + 24px); right: calc(16.67% + 24px);
height: 0;
border-top: 2px dashed var(--accent-l, #E4F4F1);
}
.sk-shop .how-s {
display: flex; flex-direction: column; align-items: center;
text-align: center; padding: 0 20px; position: relative; z-index: 1;
}
.sk-shop .how-n {
/* Q4: hvit + teal-border -> solid teal-fyll + hvit number. Stoerre visuell vekt. */
width: 48px; height: 48px; border-radius: 50%;
background: var(--accent, #0D7C6E); border: none;
display: flex; align-items: center; justify-content: center;
font-family: var(--fh); font-size: 18px; font-weight: 800; color: #fff;
margin-bottom: 16px;
box-shadow: 0 4px 12px rgba(13,124,110,0.25);
}
/* Q2: step-title 14 -> 16px. Sterkere mid-tier mellom H2 (22-28) og desc (13). */
.sk-shop .how-t { font-family: var(--fh); font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
/* Q3: max-width 240 -> 280px. Faerre line-breaks paa beskrivelser ~50-60 tegn. */
.sk-shop .how-d { font-size: 13px; color: var(--ink3); line-height: 1.55; max-width: 280px; }
/* ═══ E-POST-FANG (CTA nederst) ═══ */
.sk-shop .signup-cta {
padding: 48px var(--px);
background: linear-gradient(135deg, var(--accent-d) 0%, var(--accent) 100%);
text-align: center; color: #fff;
}
.sk-shop .signup-cta-inner { max-width: 540px; margin: 0 auto; }
.sk-shop .signup-cta h2 {
font-family: var(--fh); font-size: 24px; font-weight: 800;
color: #fff; margin: 0 0 8px;
}
.sk-shop .signup-cta p { font-size: 14px; color: rgba(255,255,255,0.85); margin: 0 0 20px; }
.sk-shop .signup-cta form { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; }
.sk-shop .signup-cta input {
flex: 1; padding: 12px 16px; border-radius: 6px;
border: 1px solid rgba(255,255,255,0.3);
background: rgba(255,255,255,0.95); color: var(--ink);
font-family: var(--fb); font-size: 16px; /* iOS-zoom-prevention */
}
.sk-shop .signup-cta button {
padding: 12px 24px; border-radius: 6px;
background: var(--ink); color: #fff;
border: none; font-family: var(--fb); font-size: 14px; font-weight: 700;
cursor: pointer;
}
.sk-shop .signup-cta button:hover { background: #000; }
/* ═══ FOOTER ═══ */
.sk-shop .ft { border-top: 1px solid var(--border); padding: 32px var(--px) 18px; background: #fff; }
.sk-shop .ft-grid {
max-width: var(--max); margin: 0 auto;
display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 24px; margin-bottom: 24px;
}
.sk-shop .ft-brand { font-family: var(--fh); font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.sk-shop .ft-info { font-size: 12px; color: var(--ink3); line-height: 1.7; }
.sk-shop .ft-info a { color: var(--accent); text-decoration: none; }
.sk-shop .ft-title {
font-size: 10px; font-weight: 700; color: var(--ink2);
margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.06em;
}
.sk-shop .ft-col a {
display: block; font-size: 12.5px; color: var(--ink3);
margin-bottom: 7px; transition: color 0.1s; text-decoration: none;
}
.sk-shop .ft-col a:hover { color: var(--ink); }
.sk-shop .ft-bot {
border-top: 1px solid var(--border); padding-top: 14px;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 8px;
max-width: var(--max); margin: 0 auto;
}
.sk-shop .ft-copy { font-size: 11px; color: var(--ink4, #9898AE); }
.sk-shop .ft-pay { display: flex; gap: 12px; align-items: center; font-size: 11px; color: var(--ink4, #9898AE); }
.sk-shop .ft-pay .vp { font-weight: 700; color: var(--vipps, #FF5B24); }
.sk-shop .ft-pay .sp { font-weight: 600; color: #635BFF; }
/* ═══════════════════════════════════════════════════════════════
FORSIDE — "Hvorfor Superkeys" 4-card grid
═══════════════════════════════════════════════════════════════ */
.sk-shop .why-sk {
padding: 56px 16px;
background: var(--bg-soft, #F4F5F7);
}
.sk-shop .why-sk-inner {
max-width: var(--max);
margin: 0 auto;
}
.sk-shop .why-sk-inner h2 {
text-align: center;
font-family: var(--fh, 'Outfit', sans-serif);
font-size: 28px;
font-weight: 800;
color: var(--ink, #14141E);
letter-spacing: -0.02em;
margin: 0 0 36px;
}
.sk-shop .why-sk-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.sk-shop .why-sk-card {
background: #fff;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 14px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color 0.2s, transform 0.2s;
}
.sk-shop .why-sk-card:hover {
border-color: rgba(13,124,110,0.30);
transform: translateY(-2px);
}
.sk-shop .why-sk-icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: rgba(13,124,110,0.10);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent, #0D7C6E);
margin-bottom: 4px;
}
.sk-shop .why-sk-icon svg {
width: 22px;
height: 22px;
}
.sk-shop .why-sk-card h3 {
font-family: var(--fh, 'Outfit', sans-serif);
font-size: 17px;
font-weight: 700;
color: var(--ink, #14141E);
margin: 0;
letter-spacing: -0.01em;
}
.sk-shop .why-sk-card p {
font-size: 14px;
color: var(--ink2, #3D3D50);
line-height: 1.55;
margin: 0;
}
.sk-shop .why-sk-card a {
color: var(--accent-d, #095C52);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(13,124,110,0.30);
}
.sk-shop .why-sk-card a:hover {
text-decoration-color: var(--accent, #0D7C6E);
}
/* ═══════════════════════════════════════════════════════════════
FORSIDE — FAQ-strip (collapsible details)
═══════════════════════════════════════════════════════════════ */
.sk-shop .faq-strip {
padding: 56px 16px;
background: #fff;
}
.sk-shop .faq-strip-inner {
max-width: 820px;
margin: 0 auto;
}
.sk-shop .faq-strip-inner h2 {
text-align: center;
font-family: var(--fh, 'Outfit', sans-serif);
font-size: 28px;
font-weight: 800;
color: var(--ink, #14141E);
letter-spacing: -0.02em;
margin: 0 0 32px;
}
.sk-shop .faq-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.sk-shop .faq-item {
background: var(--bg-soft, #F4F5F7);
border: 1px solid rgba(0,0,0,0.06);
border-radius: 10px;
overflow: hidden;
transition: border-color 0.18s;
}
.sk-shop .faq-item[open] {
border-color: rgba(13,124,110,0.20);
background: #fff;
}
.sk-shop .faq-item summary {
padding: 16px 20px;
cursor: pointer;
font-family: var(--fh, 'Outfit', sans-serif);
font-size: 15px;
font-weight: 600;
color: var(--ink, #14141E);
list-style: none;
position: relative;
padding-right: 48px;
transition: color 0.15s;
}
.sk-shop .faq-item summary::-webkit-details-marker {
display: none;
}
.sk-shop .faq-item summary::after {
content: '+';
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 22px;
font-weight: 400;
color: var(--ink3, #6B6B82);
transition: transform 0.22s, color 0.15s;
}
.sk-shop .faq-item[open] summary::after {
content: '−';
color: var(--accent, #0D7C6E);
}
.sk-shop .faq-item summary:hover {
color: var(--accent-d, #095C52);
}
.sk-shop .faq-item p {
padding: 0 20px 18px;
margin: 0;
font-size: 14px;
color: var(--ink2, #3D3D50);
line-height: 1.6;
animation: faq-open 0.22s ease-out;
}
@keyframes faq-open {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.sk-shop .faq-item p { animation: none; }
}
/* ═══ RESPONSIVE ═══ */
@media (max-width: 960px) {
.sk-shop .cats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sk-shop .ft-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sk-shop .hero-slide { height: 240px; }
.sk-shop .hero-title { font-size: 24px; }
.sk-shop .how-grid { grid-template-columns: 1fr; gap: 24px; }
.sk-shop .how-grid::before { display: none; }
.sk-shop .why-sk-grid { grid-template-columns: 1fr; }
.sk-shop .why-sk { padding: 40px 16px; }
.sk-shop .faq-strip { padding: 40px 16px; }
.sk-shop .why-sk-inner h2,
.sk-shop .faq-strip-inner h2 { font-size: 22px; margin-bottom: 24px; }
}
/* Tablet og store mobiler — sikrer 2-kolonne produktgrid + cat-card layout-bytte */
@media (max-width: 720px) {
/* Heroen gaar edge-to-edge paa mobil (ingen border-radius, ingen side-inset) —
gir mer visuell impact + matcher norsk e-handel-konvensjon (Komplett, Elkjoep). */
.sk-shop .hero { padding: 0; }
.sk-shop .hero-slide { height: 200px; border-radius: 0; }
/* Produktgrid: 2 kol paa <480px, 3 kol paa 481-960px (tablet+small-desktop)
Saa kort blir kompakte paa store mobiler/tablet uten aa bli for-bredt-strekt. */
.sk-shop .grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 8px !important;
padding: 0 12px 12px;
}
.sk-shop .sw-wrap { padding: 0 12px 12px; }
.sk-shop .sw-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 8px;
}
/* md (480-767): 3-kolonne kort istedenfor 2.
Standard-breakpoint per design-system/BREAKPOINTS.md */
@media (min-width: 480px) and (max-width: 767px) {
.sk-shop .grid,
.sk-shop .sw-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 16px 10px;
}
.sk-shop .cats-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Section header tighter — skjul eyebrow paa mobil (tar plass fra tittel/link) */
.sk-shop .sh { padding: 20px 12px 8px; }
.sk-shop .sht { font-size: 19px; }
.sk-shop .sk-section-eyebrow { display: none; }
.sk-shop .shl { font-size: 13px; }
/* === CAT-CARD: bryter horisontal-layout, stables vertikalt paa mobil ===
Standard er flex-row (icon | body | arrow) — krever ~122px pixel-luft for
icon+pil+padding, som gir under 50px til navnet i 2-kolonne mobil = brokent
tegn-bryting. Loesning: stack columns + skjul redundant arrow. */
.sk-shop .cats-wrap { padding: 0 12px 8px; }
.sk-shop .cats-grid { gap: 8px; }
.cat-card {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 10px 12px;
min-height: 64px;
}
.cat-card-head {
display: contents; /* la icon + navn flyte direkte i row-layout */
}
.cat-card-icon { width: 28px; height: 28px; border-radius: 6px; flex: 0 0 28px; }
.cat-card-icon svg { width: 16px; height: 16px; }
.cat-card-name { font-size: 13.5px; line-height: 1.2; }
.cat-card-count { font-size: 11px; }
.cat-card-sale-pill {
font-size: 9px; padding: 2px 6px;
position: absolute; top: 6px; right: 6px;
}
/* Pil + ekstra body-text tar unnødvendig plass */
.cat-card-arrow,
.cat-card-body { display: none; }
/* Subtil bakgrunns-thumb beholdes — gir farge til kortet */
.cat-card-thumb-0 { right: -10%; top: -5%; height: 130%; opacity: 0.15; }
.cat-card-thumb-1, .cat-card-thumb-2 { display: none; }
/* Spillkort kompakt body — image-flate har aspect-ratio 3/4 fra base-regel,
arves automatisk paa mobil saa hoeyden skalerer med kolonne-bredden. */
/* Sikrer at .gc og .sc har identisk image-omraade slik at en rad med blandet type ikke blir ujevn */
.sk-shop .gc-body { padding: 10px 10px 12px; gap: 4px; }
.sk-shop .gc-name,
.sk-shop .sc-btm .sc-name { font-size: 13px; -webkit-line-clamp: 2; }
.sk-shop .gc-btm,
.sk-shop .sc-btm { padding: 6px 10px 8px; }
/* Mobile: explicit equal height paa features (3 lines max for begge kort-typer) */
.sk-shop .gc-features,
.sk-shop .sc-features {
font-size: 10.5px;
line-height: 1.35;
height: 70px;
min-height: 70px;
max-height: 70px;
overflow: hidden;
}
.sk-shop .gc-price { font-size: 16px; }
.sk-shop .gc-orig { font-size: 10.5px; }
.sk-shop .gc-buy { padding: 9px 0; font-size: 12.5px; }
/* Trust-strip paa mobil: kompakt med 2-linjers clamp + auto hoeyde
(overstyrer desktop fixed height 47px slik at tekst ikke klippes). */
.sk-shop .gc-trust,
.sk-shop .sc-trust {
height: auto;
margin-top: 8px;
padding-top: 8px;
font-size: 9.5px;
line-height: 1.3;
}
.sk-shop .gc-trust > span,
.sk-shop .sc-trust > span {
-webkit-line-clamp: 2;
height: auto;
max-height: none;
}
.sk-shop .gc-trust svg,
.sk-shop .sc-trust svg { width: 11px; height: 11px; margin-top: 1px; }
/* Software-kort skalerer parallelt — samme aspect-ratio 3/4 som .gc-img for paritet */
.sk-shop .sc-body { padding: 10px 10px 12px; gap: 4px; }
.sk-shop .sc-price { font-size: 16px; }
.sk-shop .sc-orig { font-size: 10.5px; }
.sk-shop .sc-buy { padding: 9px 0; font-size: 12.5px; }
/* Card overflow visible paa mobil saa trust-strip ikke klippes naar
grid-cellene ikke vokser nok til aa romme alt body-innhold. .gc-img og
.sc-brand har egen overflow:hidden saa cover-bilde og logo fortsatt
respekterer image-omraadet. Border-radius beholdes paa kortet selv. */
.sk-shop .gc, .sk-shop .sc { overflow: visible; }
/* Sikrer at body-flex-container kan vokse forbi cell-hoeyden */
.sk-shop .gc-body, .sk-shop .sc-body { flex: 1 0 auto; }
}
@media (max-width: 640px) {
/* Nav: 56px gir 6px luft mellom soekebar (44px) og border-bottom-linja
slik at soekebaren ikke "ligger klin oppaa" linja under headeren */
.sk-shop .nav { height: 56px; }
.sk-shop .cat-bar { top: 56px; }
.sk-shop .hero-overlay { padding: 0 20px; }
.sk-shop .hero-title { font-size: 20px; line-height: 1.18; margin-bottom: 6px; }
.sk-shop .hero-desc { font-size: 13px; margin-bottom: 14px; }
.sk-shop .hero-cta { padding: 9px 20px; font-size: 12.5px; }
.sk-shop .ft-grid { grid-template-columns: 1fr; gap: 16px; }
.sk-shop .ft-bot { flex-direction: column; text-align: center; }
.sk-shop .signup-cta form { flex-direction: column; }
.sk-shop .cat-link { padding: 11px 12px; font-size: 13px; }
}
/* Smale telefoner (iPhone SE, gamle Android) — bevarer 2-kolonne men strammere.
Alle .gc-* + .sc-* regler MAA gjelde begge for paritet i blandet grid. */
@media (max-width: 380px) {
.sk-shop .grid,
.sk-shop .sw-grid { gap: 6px; }
.sk-shop .grid { padding: 0 10px 10px; }
.sk-shop .sw-wrap { padding: 0 10px 10px; }
/* aspect-ratio 3/4 fra base-regel gjelder ogsaa paa smale telefoner */
.sk-shop .gc-body,
.sk-shop .sc-body { padding: 9px 8px 11px; }
.sk-shop .gc-features,
.sk-shop .sc-features { font-size: 10px; min-height: 24px; }
.sk-shop .gc-price,
.sk-shop .sc-price { font-size: 14.5px; }
.sk-shop .gc-buy,
.sk-shop .sc-buy { padding: 8px 0; font-size: 12px; }
/* Cat-card enda tighter — bare ikon-row + navn (sale-pill skjules hvis ingen plass) */
.cat-card { min-height: 86px; padding: 10px 10px 9px; }
.cat-card-name { font-size: 13px; }
}
/* ═══ VELKOMSTRABATT-BANNER ═══ */
.sk-velkomst-banner {
background: linear-gradient(135deg, var(--accent), var(--accent-d, #0a6358));
color: #fff;
padding: 14px var(--px);
margin: 0;
border-bottom: 1px solid rgba(0,0,0,0.08);
}
.sk-velkomst-inner {
max-width: 1280px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 14px;
}
.sk-velkomst-icon {
flex: 0 0 24px;
width: 24px;
height: 24px;
color: #fff;
}
.sk-velkomst-icon svg { width: 100%; height: 100%; }
.sk-velkomst-text {
flex: 1;
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
font-size: 14px;
line-height: 1.4;
}
.sk-velkomst-text strong { font-weight: 700; }
.sk-velkomst-text code {
background: rgba(255,255,255,0.18);
padding: 2px 8px;
border-radius: 4px;
font-family: var(--fb), ui-monospace, monospace; font-variant-numeric: tabular-nums;
font-size: 13px;
letter-spacing: 0.04em;
}
.sk-velkomst-close {
flex: 0 0 32px;
width: 32px;
height: 32px;
background: transparent;
color: #fff;
border: 0;
border-radius: 50%;
cursor: pointer;
padding: 6px;
transition: background 0.15s;
}
.sk-velkomst-close:hover { background: rgba(255,255,255,0.15); }
.sk-velkomst-close svg { width: 100%; height: 100%; }
@media (max-width: 760px) {
.sk-velkomst-text { font-size: 13px; gap: 6px; }
.sk-velkomst-text strong { display: block; flex: 1 0 100%; }
}
/* ═══ CART VELKOMST-HINT ═══ */
.sk-cart-velkomst-hint {
display: flex;
align-items: flex-start;
gap: 14px;
background: linear-gradient(135deg, rgba(13,124,110,0.08), rgba(13,124,110,0.04));
border: 1px solid rgba(13,124,110,0.25);
border-radius: 10px;
padding: 16px 18px;
margin: 16px 0 24px;
color: var(--ink, #1a1f2c);
font-size: 14px;
line-height: 1.5;
}
.sk-cart-velkomst-icon {
flex: 0 0 24px;
width: 24px;
height: 24px;
color: var(--accent, #0D7C6E);
}
.sk-cart-velkomst-icon svg { width: 100%; height: 100%; }
.sk-cart-velkomst-text { flex: 1; }
.sk-cart-velkomst-text strong { color: var(--accent-d, #0a6358); }
.sk-cart-velkomst-text code {
background: var(--accent, #0D7C6E);
color: #fff;
padding: 2px 8px;
border-radius: 4px;
font-family: var(--fb), ui-monospace, monospace; font-variant-numeric: tabular-nums;
font-size: 13px;
letter-spacing: 0.04em;
margin: 0 2px;
}
/* ═══ SHOP FILTERS (C3) ═══ */
/* Override Blocksy theme-container default-bredde paa shop-pages.
.ct-container har redusert bredde via Blocksy's --container-* variabler —
vi vil at shop fyller full bredde paa mobile/tablet. */
@media (max-width: 1023px) {
.ct-container {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
.sk-shop-wrap {
max-width: 1280px;
margin: 0 auto;
/* CRO-pass 5: top-padding 24->0. .sk-cat-header (banner) har sin egen
margin-bottom: 24px, saa double-padding 48px var unoedvendig luft. */
padding: 0 var(--px) 24px;
}
.sk-shop-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.sk-shop-title {
font-family: var(--fa);
font-size: 28px;
margin: 0;
/* CRO-pass 5: tighter line-height (var: arvet 1.55 fra body = 43px line-box).
1.15 gir ~32px line-box, 11px mindre luft mellom H1 og count under. */
line-height: 1.15;
letter-spacing: -0.01em;
}
.sk-shop-body {
display: grid;
grid-template-columns: 240px 1fr;
gap: 28px;
align-items: flex-start;
}
.sk-shop-results { min-width: 0; }
/* WC-arkiv-grid (/butikk/, /produktkategori/X/) — eksplisitt grid med
responsive kolonner. WooCommerce default + Blocksy parent-theme kan
sette egne column-rules som vinner ved samme spesifisitet — !important
garanterer at vaar grid-layout vinner. */
.sk-shop ul.products,
body.woocommerce ul.products,
body.sk-shop ul.products {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
gap: 16px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
/* Reset WC default float-layout */
float: none !important;
clear: both !important;
}
.sk-shop ul.products > li.product,
body.woocommerce ul.products > li.product,
body.sk-shop ul.products > li.product {
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
clear: none !important;
float: none !important;
/* Sikre at flexbox/grid-children oppfoerer seg riktig */
flex: none !important;
}
@media (max-width: 768px) {
.sk-shop ul.products,
body.woocommerce ul.products,
body.sk-shop ul.products {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
}
@media (max-width: 380px) {
.sk-shop ul.products,
body.woocommerce ul.products,
body.sk-shop ul.products {
gap: 6px !important;
}
}
.sk-shop-empty {
text-align: center;
padding: 60px 20px;
background: rgba(0,0,0,0.02);
border-radius: 10px;
}
.sk-shop-empty h2 { margin-top: 0; }
.sk-shop-empty .sk-shop-empty-icon {
width: 56px; height: 56px;
color: var(--ink4, #9898AE);
margin: 0 auto 16px;
display: block;
}
.sk-shop-empty-suggest { margin-top: 40px; }
/* ═══ ARKIV-GRID OVERSTYRING ═══
Smalere min-width (220 vs forsiden 240) — bedre 4-kol-fit etter
sidebar 240px har "tatt sin del" av container-bredden. */
.sk-shop .sk-shop-results .grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
/* Mobil: tving 2-kol — auto-fill med 220px-min gir 1-kol paa <440px viewport.
Selectoren over har hoeyere spesifisitet enn base .sk-shop .grid mobile-rule
saa eksplisitt mobile-overstyring trengs ogsaa her. */
@media (max-width: 480px) {
.sk-shop .sk-shop-results .grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* md tablet (480-767): 3-kol som forsiden */
@media (min-width: 480px) and (max-width: 767px) {
.sk-shop .sk-shop-results .grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* ═══ HEADER-TEKST + RESULTAT-TELLER ═══ */
.sk-shop-head-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.sk-shop-count {
font-size: 13px;
color: var(--ink3, #6B6B82);
margin: 0;
line-height: 1.4;
}
.sk-shop-count strong {
color: var(--ink, #14141E);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* ═══ PLATFORM-BANNER (kategori-arkiv) ═══ */
.sk-shop-wrap.has-platform-banner .sk-shop-head {
background: linear-gradient(135deg, var(--banner-color, #0D7C6E), color-mix(in srgb, var(--banner-color, #0D7C6E) 70%, #000));
color: #fff;
padding: 32px 28px;
border-radius: 14px;
margin-bottom: 24px;
position: relative;
overflow: hidden;
}
.sk-shop-wrap.has-platform-banner .sk-shop-head::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(circle at 80% 50%, rgba(255,255,255,0.08), transparent 60%);
pointer-events: none;
}
.sk-shop-wrap.has-platform-banner .sk-shop-title { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.18); }
.sk-shop-wrap.has-platform-banner .sk-shop-count { color: rgba(255,255,255,0.88); position: relative; }
.sk-shop-wrap.has-platform-banner .sk-shop-count strong { color: #fff; }
@media (max-width: 640px) {
.sk-shop-wrap.has-platform-banner .sk-shop-head { padding: 24px 18px; border-radius: 10px; }
}
/* ═══ PLATFORM-QUICK-CHIPS ═══
Match .sk-arc-controls-bredde for visuell paritet med presets-row under. */
.sk-shop-platforms {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 16px;
padding: 0 4px;
}
@media (max-width: 640px) {
.sk-shop-platforms { padding: 0; }
.sk-shop-platform-chip { padding: 7px 12px; font-size: 12.5px; }
}
.sk-shop-platform-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 14px;
background: #fff;
border: 1.5px solid var(--border, #DDDDE4);
border-radius: 999px;
font-size: 13px; font-weight: 600;
color: var(--ink2, #3D3D50);
text-decoration: none;
transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s;
}
.sk-shop-platform-chip:hover {
border-color: var(--chip-color, var(--accent, #0D7C6E));
color: var(--chip-color, var(--accent-d, #095C52));
transform: translateY(-1px);
}
.sk-shop-platform-chip.is-active {
background: var(--chip-color, var(--accent, #0D7C6E));
border-color: var(--chip-color, var(--accent, #0D7C6E));
color: #fff;
}
.sk-shop-platform-chip.is-active .sk-shop-platform-dot {
background: rgba(255,255,255,0.95);
}
.sk-shop-platform-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--chip-color, var(--accent, #0D7C6E));
flex-shrink: 0;
}
.sk-shop-platform-all {
background: var(--soft, #F5F6F8);
border-color: transparent;
}
.sk-shop-platform-all.is-active {
background: var(--ink, #14141E);
border-color: var(--ink, #14141E);
color: #fff;
}
/* ═══ WC DEFAULT PAGINATION (alias for .pagination) ═══ */
.sk-shop .woocommerce-pagination {
margin: 32px auto;
text-align: center;
}
.sk-shop .woocommerce-pagination ul.page-numbers {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
}
.sk-shop .woocommerce-pagination ul.page-numbers li {
list-style: none;
margin: 0;
}
.sk-shop .woocommerce-pagination .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: 36px; height: 36px; padding: 0 10px;
background: #fff;
border: 1px solid var(--border, #DDDDE4);
border-radius: 6px;
font-size: 13px; font-weight: 600;
color: var(--ink2, #3D3D50);
text-decoration: none;
transition: all 0.15s;
}
.sk-shop .woocommerce-pagination a.page-numbers:hover {
border-color: var(--accent, #0D7C6E);
color: var(--accent-d, #095C52);
}
.sk-shop .woocommerce-pagination .page-numbers.current {
background: var(--accent, #0D7C6E);
border-color: var(--accent, #0D7C6E);
color: #fff;
}
/* ─── Filter sidebar (desktop default) ─── */
.sk-shop-filters {
background: #fff;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 10px;
padding: 20px;
position: sticky;
top: 20px;
max-height: calc(100vh - 40px);
overflow-y: auto;
}
/* Mobil: skjul sidebar fra page-flow — drawer-mode aapner via JS toggle */
@media (max-width: 960px) {
.sk-shop-filters { display: none; }
/* Naar drawer aapnes inline-styles fra JS overstyrer display:none.
Inline `display:block` skulle settes implicitt av cssText med
position:fixed, men eksplisitt for sikkerhet. */
}
/* === Drawer-mode: aktiveres VIA .is-open paa SIDEBAR — uavhengig av media-query.
Sikrer at JS toggle alltid trigger drawer uansett viewport (forutsetter at
bruker bevisst aapner drawer = vil se den). === */
.sk-shop-filters.is-open {
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: auto !important;
bottom: 0 !important;
width: min(380px, 92vw) !important;
height: 100vh !important;
max-height: 100vh !important;
z-index: 9999 !important;
border-radius: 0 !important;
border: 0 !important;
padding: 16px !important;
transition: none !important;
box-shadow: -8px 0 24px rgba(0,0,0,0.18) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
background: #fff !important;
margin: 0 !important;
transform: none !important;
}
.sk-arc-filter-form { display: flex; flex-direction: column; gap: 0; }
.sk-arc-filter-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 0 0 16px;
margin-bottom: 4px;
border-bottom: 2px solid var(--ink, #14141E);
/* Sticky header inni drawer slik at lukkeknapp + tittel alltid er synlig */
position: sticky;
top: -16px;
background: #fff;
z-index: 2;
margin-top: -16px;
padding-top: 18px;
}
.sk-arc-filter-head h2 {
margin: 0;
font-family: var(--fh, 'Outfit', sans-serif);
font-size: 22px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--ink, #14141E);
display: inline-flex;
align-items: center;
gap: 0;
}
.sk-arc-filter-reset {
font-size: 13px;
color: var(--accent, #0D7C6E);
text-decoration: underline;
}
.sk-arc-filter-close {
display: none;
background: transparent;
border: 0;
width: 32px;
height: 32px;
cursor: pointer;
color: inherit;
padding: 4px;
}
.sk-arc-filter-close svg { width: 100%; height: 100%; }
/* Accordion-style filter-gruppe (Kinguin-pattern) — kollapsbar via .
Default open paa Plattform/Sjanger; kollapset paa Region/Pris/Sortering
med mindre filter er aktivt. */
.sk-arc-filter-group {
border: 0;
border-bottom: 1px solid var(--border, #E4E4EC);
padding: 14px 0;
margin: 0;
}
.sk-arc-filter-group:last-of-type { border-bottom: 0; }
.sk-arc-filter-group > summary {
list-style: none;
cursor: pointer;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink, #14141E);
padding: 0;
user-select: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.sk-arc-filter-group > summary::-webkit-details-marker { display: none; }
.sk-arc-filter-group > summary::after {
content: '';
width: 8px; height: 8px;
border-right: 2px solid var(--ink2, #4a5159);
border-bottom: 2px solid var(--ink2, #4a5159);
transform: rotate(45deg);
transition: transform 0.2s ease;
flex-shrink: 0;
margin-right: 4px;
}
.sk-arc-filter-group[open] > summary::after {
transform: rotate(-135deg);
}
.sk-arc-filter-group > summary:hover {
color: var(--accent, #0D7C6E);
}
.sk-arc-filter-options {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 10px;
}
/* Filter-count badge i drawer-header — orange Vipps-farge for hoy oppmerksomhet */
.sk-arc-filter-count {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 8px;
min-width: 22px;
height: 22px;
padding: 0 6px;
background: var(--vipps, #FF5B24);
color: #fff;
font-family: var(--fb);
font-size: 12px;
font-weight: 800;
border-radius: 999px;
line-height: 1;
box-shadow: 0 2px 6px rgba(255,91,36,0.3);
}
/* "Nullstill alle filtre"-link nederst — skjult unaar ingen filtre er aktive */
.sk-arc-filter-reset-link {
display: block;
margin: 16px 0 0;
padding: 8px 0;
text-align: center;
color: var(--ink3, #6B6B82);
font-size: 13px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.15s;
}
.sk-arc-filter-reset-link:hover { color: var(--accent, #0D7C6E); }
.sk-arc-filter-check {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 14px;
line-height: 1.4;
padding: 4px 0;
}
.sk-arc-filter-check input { flex: 0 0 16px; cursor: pointer; }
.sk-arc-filter-check span { flex: 1; }
.sk-arc-filter-check em {
font-style: normal;
color: var(--ink3, #888);
font-size: 12px;
}
.sk-arc-filter-check:hover span { color: var(--accent, #0D7C6E); }
/* Disabled / 0-treff opsjon — graaes ut, ikke-klikkbar, hover-fri */
.sk-arc-filter-check.is-empty {
cursor: not-allowed;
opacity: 0.42;
}
.sk-arc-filter-check.is-empty input { cursor: not-allowed; }
.sk-arc-filter-check.is-empty:hover span { color: inherit; }
.sk-arc-filter-check.is-empty span { color: var(--ink3, #888); }
.sk-arc-filter-select {
width: 100%;
padding: 8px 10px;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 6px;
font-size: 14px;
font-family: inherit;
background: #fff;
}
/* ═══ DUAL-HANDLE PRICE-RANGE-SLIDER ═══
Polert design med gradient-fill, prominente handles, og clean labels. */
.sk-pricerange {
display: flex;
flex-direction: column;
gap: 18px;
padding: 8px 4px 4px;
}
/* Display: enkel from/to pris-tekst — slideren under er hovedkontrollen */
.sk-pricerange-display {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--fb);
font-size: 14px;
font-weight: 600;
color: var(--ink, #14141E);
font-variant-numeric: tabular-nums;
}
.sk-pricerange-from { color: var(--ink2, #4a5159); }
.sk-pricerange-to {
background: rgba(13,124,110,0.08);
color: var(--accent-d, #0a6358);
padding: 3px 10px;
border-radius: 999px;
font-weight: 700;
}
/* Track-container */
.sk-pricerange-track {
position: relative;
height: 36px;
margin: 0 11px; /* halv thumb-size for at handles ikke overflower */
}
/* Bakgrunn-track */
.sk-pricerange-track::before {
content: '';
position: absolute;
left: -11px;
right: -11px;
top: 50%;
height: 6px;
background: linear-gradient(90deg, var(--soft, #ECEDF0), #E4E4EC);
border-radius: 999px;
transform: translateY(-50%);
z-index: 1;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}
/* Active fill med gradient — accent green */
.sk-pricerange-track-fill {
position: absolute;
top: 50%;
height: 6px;
background: linear-gradient(90deg, var(--accent, #0D7C6E), var(--accent-d, #0a6358));
border-radius: 999px;
transform: translateY(-50%);
z-index: 2;
box-shadow: 0 2px 4px rgba(13,124,110,0.25);
transition: left 0.08s ease, right 0.08s ease;
}
/* Range-inputs — usynlige, kun for thumb-rendering */
.sk-pricerange-input {
position: absolute;
left: -11px;
right: -11px;
top: 0;
width: calc(100% + 22px);
height: 36px;
background: transparent;
-webkit-appearance: none;
appearance: none;
pointer-events: none;
margin: 0;
z-index: 3;
}
.sk-pricerange-input:focus { outline: none; }
.sk-pricerange-input::-webkit-slider-runnable-track { background: transparent; height: 36px; }
.sk-pricerange-input::-moz-range-track { background: transparent; height: 36px; border: 0; }
/* THUMB: stor og polert — hvit kjerne med accent ring + drop-shadow */
.sk-pricerange-input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 24px;
width: 24px;
border-radius: 50%;
background: #fff;
border: 0;
cursor: grab;
pointer-events: auto;
box-shadow:
0 0 0 2px var(--accent, #0D7C6E),
0 4px 12px rgba(13,124,110,0.35),
0 1px 2px rgba(0,0,0,0.1);
transition: transform 0.15s ease, box-shadow 0.15s ease;
margin-top: 0;
}
.sk-pricerange-input::-moz-range-thumb {
height: 24px;
width: 24px;
border-radius: 50%;
background: #fff;
border: 0;
cursor: grab;
pointer-events: auto;
box-shadow:
0 0 0 2px var(--accent, #0D7C6E),
0 4px 12px rgba(13,124,110,0.35),
0 1px 2px rgba(0,0,0,0.1);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* HOVER: scale + sterkere ring */
.sk-pricerange-input::-webkit-slider-thumb:hover,
.sk-pricerange-input:focus::-webkit-slider-thumb {
transform: scale(1.12);
box-shadow:
0 0 0 2px var(--accent, #0D7C6E),
0 0 0 8px rgba(13,124,110,0.15),
0 6px 20px rgba(13,124,110,0.4),
0 1px 2px rgba(0,0,0,0.1);
}
.sk-pricerange-input::-moz-range-thumb:hover,
.sk-pricerange-input:focus::-moz-range-thumb {
transform: scale(1.12);
box-shadow:
0 0 0 2px var(--accent, #0D7C6E),
0 0 0 8px rgba(13,124,110,0.15),
0 6px 20px rgba(13,124,110,0.4),
0 1px 2px rgba(0,0,0,0.1);
}
/* ACTIVE/GRABBING */
.sk-pricerange-input::-webkit-slider-thumb:active {
cursor: grabbing;
transform: scale(1.05);
}
.sk-pricerange-input::-moz-range-thumb:active {
cursor: grabbing;
transform: scale(1.05);
}
/* Dot-indikator inni thumb for grip-feel */
.sk-pricerange-input::-webkit-slider-thumb {
background-image: radial-gradient(circle, var(--accent, #0D7C6E) 0, var(--accent, #0D7C6E) 3px, transparent 3.5px);
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.sk-pricerange-input::-moz-range-thumb {
background-image: radial-gradient(circle, var(--accent, #0D7C6E) 0, var(--accent, #0D7C6E) 3px, transparent 3.5px);
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* "Vis resultater"-knapp i drawer — matcher .sk-btn-primary stilen
til resten av siden, sentrert i drawer-bunnen */
.sk-arc-filter-apply {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 12px 22px;
background: var(--accent, #0D7C6E);
color: #fff;
border: 0;
border-radius: 8px;
font-family: var(--fb);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
box-shadow: 0 2px 8px rgba(13,124,110,0.25);
user-select: none;
}
.sk-arc-filter-apply:hover {
background: var(--accent-d, #0a6358);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(13,124,110,0.35);
}
.sk-arc-filter-apply:active { transform: scale(0.98); }
.sk-arc-filter-apply:focus-visible {
outline: 3px solid rgba(13,124,110,0.4);
outline-offset: 2px;
}
/* Drawer = flex-column container (overflow:hidden via inline-style).
Form = flex 1, scrollable region (kun den scroller, ikke knappen).
Apply-knapp = soesken til form, fixed footer som dekker hele drawer-bredden. */
.sk-shop-filters.is-open .sk-arc-filter-form {
flex: 1 1 auto !important;
min-height: 0 !important; /* tillater flex-shrink */
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 16px 16px 0 !important;
margin: 0 !important;
}
.sk-shop-filters.is-open .sk-arc-filter-apply {
flex: 0 0 auto !important;
width: 100% !important;
margin: 0 !important;
padding: 18px 22px !important;
border-radius: 0 !important;
border: 0 !important;
box-shadow: 0 -8px 16px -8px rgba(0,0,0,0.25) !important;
background: var(--accent, #0D7C6E) !important;
color: #fff !important;
font-weight: 700 !important;
font-size: 15px !important;
min-height: 60px !important;
cursor: pointer !important;
display: block !important;
}
/* ─── Filter-toggle + sort wrap ───
Mobile: kompakt inline-flex (filter + sort side ved side).
Desktop (>=720px): full-bredde flex med sort right-aligned. */
.sk-arc-filter-toggle-wrap {
display: inline-flex;
align-items: flex-start;
gap: 8px;
}
@media (min-width: 720px) {
.sk-arc-filter-toggle-wrap {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
}
/* Sort pushes til hoeyre — left-side har bare filter + nullstill */
.sk-arc-filter-toggle-wrap .sk-arc-sort-wrap {
margin-left: auto;
}
}
/* Kolonne for filter-knapp + nullstill-link rett under */
.sk-arc-filter-btn-col {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
/* Mobil-only: 'Nullstill alle filter'-link plassert UNDER preset-chip-strip,
pa egen rad — gir gjennomtenkt rytme (Filtrer | Sorter -> chips -> nullstill).
Skjules paa desktop hvor sidebar-drawer-en har sin egen reset-link. */
.sk-arc-controls .sk-arc-filter-reset-mobile {
display: inline-block;
margin: 8px 0 0;
padding: 6px 4px;
color: var(--ink3, #6B6B82);
font-family: var(--fb);
font-size: 13px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color 0.15s;
grid-area: reset;
justify-self: start;
}
.sk-arc-controls .sk-arc-filter-reset-mobile:hover { color: var(--accent, #0D7C6E); }
@media (min-width: 961px) {
.sk-arc-controls .sk-arc-filter-reset-mobile { display: none; }
}
@media (min-width: 961px) {
.sk-arc-filter-reset-link-inline { display: none; }
}
/* Filter-knappen er kun synlig paa mobil (desktop har sticky-sidebar).
Sort + reset vises paa baade desktop og mobil. */
.sk-arc-filter-toggle {
display: none;
align-items: center;
gap: 8px;
background: var(--accent, #0D7C6E);
color: #fff;
border: 0;
padding: 10px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
pointer-events: auto;
position: relative;
z-index: 10;
}
.sk-arc-filter-toggle:hover { background: var(--accent-d, #0a6358); }
.sk-arc-filter-toggle svg { width: 18px; height: 18px; pointer-events: none; }
.sk-arc-filter-toggle em { font-style: normal; opacity: 0.85; pointer-events: none; }
/* Wrapper for filter+sort+presets — CSS Grid med template-areas for at
sortering kan vaere paa hoyre-side paa desktop og pa toppen sammen
med filter paa mobil. */
.sk-arc-controls {
display: grid;
gap: 12px 12px;
max-width: var(--max, 1280px);
margin: 0 auto;
padding: 0 var(--px, 16px) 12px;
/* Mobil default: filter+sort paa rad 1, presets paa rad 2 (full bredde),
nullstill paa rad 3 hvis aktivt filter (ellers tom) */
grid-template-columns: 1fr auto;
grid-template-areas:
"filter sort"
"presets presets"
"reset reset";
align-items: center;
}
.sk-arc-controls-filter { grid-area: filter; }
.sk-arc-controls-sort { grid-area: sort; }
.sk-arc-controls .sk-arc-presets {
grid-area: presets;
margin: 0;
}
/* Desktop: en linje — filter venstre, presets midt, sort hoyre */
@media (min-width: 720px) {
.sk-arc-controls {
grid-template-columns: auto 1fr auto;
grid-template-areas: "filter presets sort";
}
}
/* Sort-dropdown — ikon-only naar default, ekspanderer med kort-label naar aktiv */
.sk-arc-sort-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 12px;
min-width: 44px;
height: 44px;
background: #fff;
border: 1.5px solid var(--border, #DDDDE4);
border-radius: 8px;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
position: relative;
/* Sikrer at hele klikkflate er taggable */
overflow: hidden;
}
/* Naar ingen sort er valgt — kun ikon, square 44x44 */
.sk-arc-sort-wrap:not(.is-active) {
width: 44px;
padding: 0;
}
/* Naar aktiv: accent-border + bakgrunn for visuell hierarkisk feedback */
.sk-arc-sort-wrap.is-active {
border-color: var(--accent, #0D7C6E);
background: rgba(13,124,110,0.04);
}
.sk-arc-sort-label {
font-family: var(--fb);
font-size: 13px;
font-weight: 700;
color: var(--accent-d, #0a6358);
letter-spacing: 0.01em;
white-space: nowrap;
pointer-events: none;
}
.sk-arc-sort-wrap.is-active .sk-arc-sort-icon {
color: var(--accent, #0D7C6E);
}
/* Label-visibility per breakpoint:
Mobile <720: kort-label (Pris ↑) naar aktiv, ingen chevron
Desktop >=720: full-label (Pris: lav → høy) ALLTID + chevron */
.sk-arc-sort-label-short { display: none; }
.sk-arc-sort-label-full { display: none; }
.sk-arc-sort-chevron { display: none; }
@media (max-width: 719px) {
/* Mobile: vis kort-label kun naar aktiv (ikon-only ellers) */
.sk-arc-sort-wrap.is-active .sk-arc-sort-label-short { display: inline; }
}
@media (min-width: 720px) {
/* Desktop: alltid full-label + chevron, ekspandert wrap */
.sk-arc-sort-wrap { width: auto; padding: 0 14px; min-width: 0; }
.sk-arc-sort-wrap:not(.is-active) { width: auto; padding: 0 14px; }
.sk-arc-sort-label-full { display: inline; }
.sk-arc-sort-chevron {
display: inline-block;
width: 14px; height: 14px;
color: var(--ink2, #4a5159);
flex-shrink: 0;
pointer-events: none;
}
/* Default-state (ikke aktiv): label + chevron i ink-farge */
.sk-arc-sort-wrap:not(.is-active) .sk-arc-sort-label-full {
color: var(--ink, #14141E);
}
}
.sk-arc-sort-wrap:hover {
border-color: var(--accent, #0D7C6E);
box-shadow: 0 2px 8px rgba(13,124,110,0.12);
}
.sk-arc-sort-wrap:focus-within {
border-color: var(--accent, #0D7C6E);
box-shadow: 0 0 0 3px rgba(13,124,110,0.15);
}
.sk-arc-sort-icon {
width: 18px;
height: 18px;
color: var(--ink2, #4a5159);
flex-shrink: 0;
pointer-events: none;
}
/* Native select er FULLT USYNLIG (opacity 0) — native dropdown aapner ved
trykk paa hvor som helst paa wrap-en, men vis-tekst rendrers ikke
(color: transparent fungerte ikke konsistent paa tvers av nettlesere
for aa skjule selected-option-text). Ikonet under er den synlige UI. */
.sk-arc-sort-select {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
border: 0;
background: transparent;
padding: 0;
margin: 0;
outline: none;
font-size: 16px; /* iOS-zoom prevention */
-webkit-appearance: menulist;
appearance: menulist;
}
/* Chevron-ikon — ingen viktig info, men hint om dropdown */
.sk-arc-sort-chevron {
display: none;
}
.sk-arc-sort-wrap:hover .sk-arc-sort-icon { color: var(--accent, #0D7C6E); }
/* Aktiv-state indikator: liten prikk i hjornet hvis sortering ikke er default */
.sk-arc-sort-wrap.is-active::after {
content: '';
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
background: var(--vipps, #FF5B24);
border-radius: 50%;
border: 1.5px solid #fff;
}
/* Nullstill-knapp ved siden av Filtrer (kun synlig naar filtre er aktive) */
.sk-arc-filter-reset-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 14px;
background: transparent;
border: 1.5px solid var(--border, #DDDDE4);
border-radius: 8px;
color: var(--ink2, #4a5159);
font-family: var(--fb);
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
transition: all 0.15s;
cursor: pointer;
}
.sk-arc-filter-reset-btn:hover {
border-color: var(--accent, #0D7C6E);
color: var(--accent, #0D7C6E);
background: var(--accent-l, #E4F4F1);
}
.sk-arc-filter-reset-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
/* ─── Mobile (< 960px) ─── */
@media (max-width: 960px) {
.sk-shop-body { grid-template-columns: 1fr; }
.sk-arc-filter-toggle { display: inline-flex; }
.sk-shop-wrap { padding: 0 12px 16px; }
.sk-shop-head { margin-bottom: 12px; gap: 10px; }
.sk-shop-title { font-size: 20px; }
.sk-arc-filter-close { display: flex !important; }
/* Backdrop for click-outside-to-close */
.sk-shop-filters-backdrop {
position: fixed;
inset: 0;
background: rgba(20, 20, 40, 0.4);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 9998;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.sk-shop-filters-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
/* Body lock-scroll naar drawer er aapen */
body.sk-filter-drawer-open { overflow: hidden; }
/* Apply-knapp synlig paa mobil — sentrert i drawer-bunnen, matcher
.sk-btn-primary-stilen som brukes i resten av siden */
.sk-arc-filter-apply {
display: inline-flex !important;
align-self: center;
margin: 20px auto 8px;
min-width: 180px;
padding: 14px 28px;
font-size: 15px;
}
}
@media (max-width: 480px) {
.sk-shop-wrap { padding: 0 8px 12px; }
.sk-shop-head { margin-bottom: 10px; }
}
/* ═══ FILTER PRESETS (C3 chips) ═══ */
.sk-arc-presets {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 20px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.sk-arc-presets::-webkit-scrollbar { display: none; }
@media (max-width: 760px) {
.sk-arc-presets {
flex-wrap: nowrap;
margin: 0 0 12px;
padding-bottom: 4px;
scroll-snap-type: x proximity;
/* Mask gir mykt fade ved hoeyre kant — visuell hint om mer innhold */
-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.sk-arc-preset-chip { scroll-snap-align: start; flex-shrink: 0; }
}
.sk-arc-preset-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #fff;
border: 1px solid rgba(0,0,0,0.12);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: var(--ink, #1a1f2c);
text-decoration: none;
white-space: nowrap;
transition: all 0.15s;
flex: 0 0 auto;
}
.sk-arc-preset-chip:hover {
border-color: var(--accent, #0D7C6E);
color: var(--accent-d, #0a6358);
background: rgba(13,124,110,0.04);
}
.sk-arc-preset-chip.is-active {
background: var(--accent, #0D7C6E);
border-color: var(--accent, #0D7C6E);
color: #fff;
}
.sk-arc-preset-chip svg { width: 14px; height: 14px; }
@media (max-width: 760px) {
.sk-arc-presets { flex-wrap: nowrap; }
.sk-arc-preset-chip { padding: 7px 12px; font-size: 12.5px; }
}
/* ═══ BUNDLE CARD (.bc) ═══ */
.bc {
display: flex;
flex-direction: column;
background: var(--bc-grad, linear-gradient(135deg, #1F4E8C, #0D7C6E));
color: #fff;
border-radius: 12px;
overflow: hidden;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
position: relative;
}
.bc:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}
.bc-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
background: rgba(0,0,0,0.18);
backdrop-filter: blur(4px);
}
.bc-badge {
/* CRO-pass 4: orange -> teal. Bundle-eyebrow er brand-badge, ikke deal/Vipps. */
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
background: var(--accent, #0D7C6E);
color: #fff;
padding: 4px 10px;
border-radius: 4px;
}
.bc-savings {
font-size: 13px;
font-weight: 700;
color: #FFE066;
}
.bc-body {
padding: 18px 18px;
flex: 1;
}
.bc-title {
font-size: 15px;
line-height: 1.35;
margin: 0 0 12px;
color: #fff;
font-weight: 700;
}
.bc-thumbs {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.bc-thumbs img {
width: 56px;
height: 56px;
border-radius: 8px;
/* contain i stedet for cover: hele logoen/cover-art vises uten å klippes */
object-fit: contain;
/* Hvit padding-bakgrunn så letterboxing ser ren ut for software-logoer */
background: #fff;
padding: 4px;
border: 1px solid rgba(255,255,255,0.4);
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.bc-thumbs-more {
font-size: 12px;
font-weight: 600;
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.3);
border-radius: 6px;
padding: 6px 8px;
color: rgba(255,255,255,0.9);
}
.bc-items {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.bc-items li {
display: flex;
align-items: flex-start;
gap: 6px;
font-size: 12.5px;
line-height: 1.4;
color: rgba(255,255,255,0.92);
}
.bc-items svg {
flex: 0 0 14px;
width: 14px;
height: 14px;
margin-top: 2px;
color: #4ADE80;
}
.bc-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
background: rgba(0,0,0,0.22);
border-top: 1px solid rgba(255,255,255,0.1);
}
.bc-price { display: flex; flex-direction: column; line-height: 1.1; }
.bc-price-old {
font-size: 12px;
text-decoration: line-through;
opacity: 0.65;
}
.bc-price-now {
font-size: 17px;
font-weight: 800;
color: #fff;
}
.bc-price-now .woocommerce-Price-amount,
.bc-price-old .woocommerce-Price-amount { color: inherit; }
.bc-cta {
font-size: 13px;
font-weight: 700;
color: #fff;
background: rgba(255,255,255,0.16);
padding: 8px 12px;
border-radius: 6px;
}
/* ═══ KATEGORI-BLOKK STATS + ALLE-PRODUKTER-LINK ═══ */
.cat-block-stats {
display: block;
margin-top: 6px;
font-size: 12px;
font-weight: 500;
color: rgba(255,255,255,0.85);
line-height: 1.3;
}
.cat-block-stats strong {
color: #fff;
font-weight: 700;
}
.cat-block-stats-sale {
color: #FFE066;
font-weight: 600;
}
.cats-all-wrap {
text-align: center;
margin-top: 18px;
}
.cats-all-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ink2, #4a5159);
font-size: 14px;
font-weight: 600;
text-decoration: none;
padding: 8px 14px;
border-radius: 8px;
transition: all 0.15s;
}
.cats-all-link:hover {
background: rgba(13,124,110,0.06);
color: var(--accent-d, #0a6358);
}
.cats-all-link strong {
color: var(--accent, #0D7C6E);
font-weight: 800;
}
.cats-all-link svg { width: 18px; height: 18px; }
/* TILBUD-seksjonen bruker .grid (samme som "Populaere spill") for konsistent
2-kolonne-mobil + auto-fill desktop. Tidligere brukte den horisontal scroll-strip
som ga lavere klikkrate per Baymard-data. */
/* ═══ BUNDLES-GRID (forsiden + cart cross-sell) ═══ */
.sk-bundles-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
padding: 0 var(--px, 16px);
max-width: var(--max, 1280px);
margin: 0 auto 28px;
}
/* Kun 2-3 produkter — ikke strekk hver celle bredt, men hold normale kort-bredder */
.sk-bundles-grid.sk-bundles-grid-count-2 { grid-template-columns: repeat(2, minmax(280px, 360px)); justify-content: start; }
.sk-bundles-grid.sk-bundles-grid-count-3 { grid-template-columns: repeat(3, minmax(280px, 340px)); justify-content: start; }
@media (max-width: 1100px) {
.sk-bundles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sk-bundles-grid.sk-bundles-grid-count-2,
.sk-bundles-grid.sk-bundles-grid-count-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.sk-bundles-grid { grid-template-columns: 1fr; }
.sk-bundles-grid.sk-bundles-grid-count-2,
.sk-bundles-grid.sk-bundles-grid-count-3 { grid-template-columns: 1fr; }
}
/* ═══ BESTSELLER-BADGE ═══ */
.sk-bestseller-badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
padding: 4px 8px;
border-radius: 4px;
color: #fff;
text-transform: uppercase;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.sk-bestseller-gold {
background: linear-gradient(135deg, #FFD700, #FFA500);
color: #1a1a1a;
}
.sk-bestseller-popular {
background: rgba(13,124,110,0.95);
color: #fff;
}
/* Når både discount-badge og bestseller-badge finnes — stack vertikalt */
.gc-img,
.sc-brand {
position: relative;
}
.sk-discount-badge + .sk-bestseller-badge,
.gc-img > .sk-bestseller-badge {
top: 42px;
}
/* ═══ PDP MEDIA-GALLERI (screenshots + videoer) ═══ */
.p-media-gallery .sk-media-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 8px;
margin-top: 12px;
}
.sk-media-item {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 8px;
background: rgba(0,0,0,0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sk-media-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.sk-media-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sk-media-video::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.35);
z-index: 1;
}
.sk-media-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
pointer-events: none;
}
.sk-media-play svg {
width: 44px;
height: 44px;
color: #fff;
background: rgba(0,0,0,0.65);
border-radius: 50%;
padding: 10px 8px 10px 12px;
}
/* ═══ PRODUKT-TYPE-NOTICE PAA PDP (DLC/Bundle/Subscription) ═══ */
.p-kind-notice {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 14px 16px;
border-radius: 10px;
margin: 16px 0;
border: 1px solid;
}
.p-kind-notice-icon {
flex: 0 0 22px;
width: 22px;
height: 22px;
margin-top: 2px;
}
.p-kind-notice-body { flex: 1; }
.p-kind-notice-body strong {
display: block;
font-size: 15px;
font-weight: 700;
margin-bottom: 4px;
}
.p-kind-notice-body p {
margin: 0;
font-size: 13.5px;
line-height: 1.5;
opacity: 0.92;
}
/* Warn (DLC) — orange */
.p-kind-notice-warn {
background: #FFF8EC;
border-color: #FFD58A;
color: #6B4500;
}
.p-kind-notice-warn .p-kind-notice-icon { color: #D97700; }
/* Info (Bundle / Subscription) — blue */
.p-kind-notice-info {
background: #EEF4FF;
border-color: #BCD3F0;
color: #1A4D80;
}
.p-kind-notice-info .p-kind-notice-icon { color: #2864B5; }
/* Hero-context: kontrastere paa moerk hero */
.p-hero.sk-spill .p-kind-notice {
background: rgba(255,255,255,0.95);
backdrop-filter: blur(6px);
}
/* ═══ KASSE/CHECKOUT — samme 2-col-pattern som handlekurv ═══ */
/* Override sk-page-inner restrictions paa checkout-page */
body.woocommerce-checkout .sk-page,
body.page-checkout .sk-page,
body[class*="page-id"] .sk-page:has(.sk-checkout-form) {
padding: 32px 0 60px;
}
body.woocommerce-checkout .sk-page-inner,
body.page-checkout .sk-page-inner,
body[class*="page-id"] .sk-page-inner:has(.sk-checkout-form) {
max-width: 1280px !important;
background: transparent !important;
border: 0 !important;
padding: 0 var(--px, 16px) !important;
box-shadow: none !important;
}
/* Form-en selv: nullstill Blocksy/WC default grid/flex saa vaart .sk-checkout-grid
faar full bredde */
form.sk-checkout-form,
form.checkout.sk-checkout-form,
form.checkout.woocommerce-checkout.sk-checkout-form {
display: block !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
grid-gap: 0 !important;
background: transparent !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.sk-checkout-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 380px !important;
gap: 24px;
align-items: start;
width: 100%;
}
/* Tablet 900-1100: krymp summary litt saa form-detaljer faar mer plass */
@media (max-width: 1100px) and (min-width: 901px) {
.sk-checkout-grid {
grid-template-columns: minmax(0, 1fr) 340px !important;
gap: 20px;
}
}
/* Stack til 1-col paa <= 900px (tablet portrait + mobile).
Form FORST (faktureringsdetaljer), summary med bekreft-knappen NEDERST
— folger WC-konvensjon og bekreft-knappen er aksjons-element pa slutten. */
@media (max-width: 900px) {
.sk-checkout-grid {
grid-template-columns: minmax(0, 1fr) !important;
gap: 16px;
}
.sk-checkout-summary-wrap {
position: static !important;
top: auto !important;
/* ingen order-override -> form forst, summary etter */
}
.sk-checkout-details {
padding: 20px;
}
.sk-checkout-summary {
padding: 18px;
}
}
/* Smal mobile: enda mindre padding + smaller font-base */
@media (max-width: 480px) {
.sk-checkout-details {
padding: 16px 14px;
border-radius: 10px;
}
.sk-checkout-summary {
padding: 16px 14px;
border-radius: 10px;
}
.sk-checkout-section h3 {
font-size: 16px;
}
}
/* Select2 hidden-accessible-elementet (skjult