/* ==========================================================================
   Repix hovedbutikk — nye.repix.no
   Norgesprofil-inspirert layout med Repix-farger.
   Juster merkevarefargene i :root under — alt annet følger etter.
   ========================================================================== */

:root {
    /* Merkevare — rød temafarge + grønn Repix-logo */
    --accent: #54C4A4;         /* logo-grønn — brukes kun logonært (favicon, logo-prikk) */
    --brand: #E2001A;          /* rød — knapper, lenker, badges */
    --brand-dark: #B50015;
    --brand-soft: #FDECEE;

    /* Nøytrale */
    --ink: #151A24;            /* mørk marine/nesten svart (header/footer) */
    --ink-2: #1F2734;
    --text: #232936;
    --muted: #6B7280;
    --line: #E5E8ED;
    --bg: #FFFFFF;
    --surface: #F5F6F8;
    --surface-2: #EDEFF2;

    /* Status */
    --success: #17803D;
    --success-soft: #E7F6EC;
    --danger: #C62828;
    --danger-soft: #FDECEA;

    --radius: 10px;
    --radius-lg: 16px;
    --shadow: 0 1px 2px rgba(21, 26, 36, .06), 0 8px 24px rgba(21, 26, 36, .07);
    --shadow-sm: 0 1px 3px rgba(21, 26, 36, .08);

    --container: 1440px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ── Grunnlag ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand); }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

.container { width: min(var(--container), 100% - 40px); margin-inline: auto; padding: 0; }

.section { padding: 56px 0; }
.section--tight { padding: 36px 0; }
.section--surface { background: var(--surface); }

/* ── Knapper ──────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--radius);
    border: 2px solid transparent;
    font-family: var(--font);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; }

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-2); color: #fff; }

.btn-outline { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); color: var(--ink); }

.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--surface-2); color: var(--ink); }

.btn-lg { padding: 15px 30px; font-size: 1.05rem; }
.btn-block { width: 100%; }

.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ── Toppstripe ───────────────────────────────────────────────────────── */
.topbar {
    background: var(--ink);
    color: rgba(255, 255, 255, .85);
    font-size: .82rem;
}
.topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 36px;
}
.topbar a { color: rgba(255, 255, 255, .85); }
.topbar a:hover { color: #fff; }
.topbar-contact { display: flex; gap: 18px; align-items: center; }
.topbar-usp { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.topbar-usp svg { width: 14px; height: 14px; }

.vat-toggle { display: flex; align-items: center; gap: 6px; }
.vat-toggle span { color: rgba(255, 255, 255, .55); }
.vat-toggle a {
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    color: rgba(255, 255, 255, .75);
    border: 1px solid rgba(255, 255, 255, .2);
}
.vat-toggle a:hover { color: #fff; border-color: rgba(255, 255, 255, .5); }
.vat-toggle a.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ── Header ───────────────────────────────────────────────────────────── */
/* Headeren blir liggende der den står — den skal ikke feste seg i toppen
   ved scroll. Mobilskuffen ligger uansett fixed over alt. */
.site-header {
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: relative;
    z-index: 60;
}
html.nav-locked, html.nav-locked body { overflow: hidden; }
.site-header .container {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.logo { display: flex; align-items: center; gap: 2px; font-weight: 800; font-size: 1.7rem; letter-spacing: -.03em; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo .logo-dot { color: var(--accent); }
.logo img { height: 36px; width: auto; display: block; }
.logo-tagline { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: -2px; }

.header-search { flex: 1; max-width: 560px; position: relative; }
.header-search form { display: flex; position: relative; }
.header-search input {
    width: 100%;
    padding: 12px 48px 12px 16px;
    border: 2px solid var(--line);
    border-radius: 999px;
    font-family: var(--font);
    font-size: .95rem;
    outline: none;
    transition: border-color .15s ease;
    background: var(--surface);
}
.header-search input:focus { border-color: var(--ink); background: #fff; }
.header-search button {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--brand);
    color: #fff;
    border: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.header-search button:hover { background: var(--brand-dark); }
.header-search svg { width: 16px; height: 16px; }

/* ── Forslag under soekefeltet ─────────────────────────────────────── */
.sok-forslag {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: min(70vh, 460px);
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 6px;
}
.sok-forslag[hidden] { display: none; }
.sok-forslag-rad {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
}
.sok-forslag-rad:hover,
.sok-forslag-rad.er-valgt { background: var(--surface); color: var(--text); }
.sok-forslag-rad img,
.sok-forslag-ubilde {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--surface-2);
}
.sok-forslag-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sok-forslag-tekst strong {
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sok-forslag-tekst small { font-size: .75rem; color: var(--muted); }
.sok-forslag-pris { flex: 0 0 auto; font-size: .88rem; font-weight: 700; white-space: nowrap; }
.sok-forslag-pris small { font-size: .7rem; font-weight: 500; color: var(--muted); }
/* NB: maa slaa .header-search button (den runde roede soekeknappen), som
   ligger i samme boks og har hoeyere spesifisitet enn en ren klasse.
   Derfor .header-search foran — og derfor nullstilles plasseringen
   eksplisitt, ellers blir «Se alle treff» en roed sirkel oppaa lista. */
.header-search .sok-forslag-alle {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    transform: none;
    margin-top: 4px;
    padding: 10px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
    background: none;
    font-family: var(--font);
    font-size: .85rem;
    font-weight: 600;
    color: var(--brand);
    text-align: left;
    cursor: pointer;
}
.header-search .sok-forslag-alle:hover { background: var(--brand-soft); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }

/* Fire fylte piller ved siden av hverandre ble en tung grå blokk øverst
   på siden. Knappene er derfor gjennomsiktige i hvile — ikonet bærer
   gjenkjennelsen — og flaten dukker først opp når du peker på dem. */
.cart-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--radius);
    background: transparent;
    font-weight: 600;
    font-size: .88rem;
    color: var(--ink);
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease;
}
.cart-button:hover,
.cart-button:focus-visible {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
    outline: none;
}
.cart-button svg {
    width: 19px;
    height: 19px;
    color: var(--muted);
    transition: color .15s ease;
}
.cart-button:hover svg,
.cart-button:focus-visible svg { color: var(--brand); }

/* Antallet står inline etter teksten. Som et flagg utenfor hjørnet
   trengte den den fylte pilla for å ha noe å henge på. */
.cart-count {
    background: var(--brand);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    min-width: 19px;
    height: 19px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    padding: 0 5px;
    margin-left: 1px;
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1px;
    /* Samme uttrykk som knappene ved siden av: flat i hvile, flate på hover. */
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    min-width: 52px;
    min-height: 48px;
    padding: 6px 8px;
    color: var(--ink);
    transition: background-color .15s ease, border-color .15s ease;
}
.nav-toggle:hover,
.nav-toggle:focus-visible { background: var(--surface); border-color: var(--line); outline: none; }
.nav-toggle svg { width: 26px; height: 26px; color: var(--ink); }
.nav-toggle-label { font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* ── Hovedmeny ────────────────────────────────────────────────────────── */
.main-nav { background: var(--ink); }
/* Uten JS brekker raden til to linjer, så alle kategoriene er synlige.
   Med JS settes .nav-fitted, og det som ikke får plass havner under «Mer». */
.main-nav .container { display: flex; align-items: stretch; gap: 0; padding: 0 20px; flex-wrap: wrap; }
/* Ikke overflow:hidden her — det ville klippt bort nedtrekksmenyene.
   JS skjuler uansett det som ikke får plass, så raden flyter aldri over. */
.main-nav.nav-fitted .container { flex-wrap: nowrap; }
.main-nav [hidden] { display: none !important; }
.main-nav a {
    color: rgba(255, 255, 255, .88);
    font-weight: 600;
    font-size: .92rem;
    padding: 13px 16px;
    position: relative;
    white-space: nowrap;
}
.main-nav a:hover { color: #fff; }
.main-nav a::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 3px;
    background: var(--brand);
    transform: scaleX(0);
    transition: transform .15s ease;
}
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }

/* Er det mange kategorier, strammes avstandene inn så alle får plass på
   raden før «Mer» tas i bruk. Klassen settes av JS i layout.blade.php. */
.main-nav.nav-tight a { padding-left: 10px; padding-right: 10px; font-size: .88rem; }
.main-nav.nav-tight a::after { left: 10px; right: 10px; }

/* ── Undermeny (nestede kategorier) ───────────────────────────────────── */
.main-nav .container { position: relative; }

.nav-item { position: relative; display: flex; align-items: stretch; flex: none; }
.nav-item > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-caret { width: 13px; height: 13px; opacity: .7; transition: transform .15s ease; }
.nav-item.has-children:hover .nav-caret { transform: rotate(180deg); }

.nav-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: 220px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: none;
}
.nav-item.has-children:hover .nav-submenu,
.nav-item.has-children:focus-within .nav-submenu { display: block; }

.nav-submenu a {
    display: block;
    color: var(--text);
    font-size: .9rem;
    font-weight: 600;
    padding: 9px 12px;
    border-radius: 8px;
    white-space: nowrap;
}
.nav-submenu a::after { content: none; }
.nav-submenu a:hover { background: var(--surface); color: var(--brand); }
.nav-submenu a.active { color: var(--brand); background: var(--brand-soft); }

/* «Mer»-nedtrekket: undermenyen legger seg mot høyre så den ikke går
   utenfor skjermkanten, og underkategoriene rykkes inn under sin egen
   forelder slik at nivåene fortsatt er tydelige. */
.nav-more > a { cursor: pointer; }
.nav-more .nav-submenu { left: auto; right: 0; max-height: 70vh; overflow-y: auto; }
.nav-more-child { padding-left: 26px !important; font-weight: 500 !important; color: var(--muted) !important; }
.nav-more-child:hover { color: var(--brand) !important; }

/* Underkategorier i mobilmenyen — samme liste, bare innrykket */
.mobile-nav-child {
    padding-left: 34px !important;
    font-weight: 600 !important;
    color: var(--muted) !important;
}
.mobile-nav-child.active { color: var(--brand) !important; }

/* ── Underkategori-kort på kategorisiden ──────────────────────────────── */
.subcats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 6px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.subcat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-weight: 600;
    font-size: .875rem;
    color: var(--text);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.subcat:hover { background: #fff; border-color: var(--brand); color: var(--brand); }
.subcat.active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); }
.subcat img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.subcat:not(:has(img)) { padding-left: 14px; }

/* ── Mobilmeny (skuff) ────────────────────────────────────────────────── */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 19, 27, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 90;
}
.nav-overlay.open { opacity: 1; pointer-events: auto; }

.mobile-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(340px, 88vw);
    background: #fff;
    z-index: 100;
    transform: translateX(-102%);
    transition: transform .28s cubic-bezier(.32, .72, .28, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 60px rgba(15, 19, 27, .25);
    overscroll-behavior: contain;
}
.mobile-nav.open { transform: translateX(0); }

.mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.mobile-nav-head img { height: 28px; width: auto; }
.mobile-nav-close {
    background: var(--surface);
    border: 0;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--ink);
}
.mobile-nav-close svg { width: 22px; height: 22px; }

.mobile-nav-links { flex: 1; overflow-y: auto; padding: 8px 0 16px; -webkit-overflow-scrolling: touch; }
.mobile-nav-label {
    display: block;
    padding: 18px 20px 8px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
}
.mobile-nav-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 20px;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--ink);
    border-bottom: 1px solid var(--surface);
    min-height: 52px;
}
.mobile-nav-links a:active { background: var(--surface); }
.mobile-nav-links a.active { color: var(--brand); }
.mobile-nav-links a svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.mobile-nav-count {
    background: var(--brand);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    min-width: 21px;
    height: 21px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    padding: 0 6px;
    margin-left: 6px;
}

.mobile-nav-foot {
    border-top: 1px solid var(--line);
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    background: var(--surface);
    flex-shrink: 0;
    display: grid;
    gap: 10px;
}
.mobile-nav-vat { display: flex; align-items: center; gap: 7px; font-size: .85rem; color: var(--muted); }
.mobile-nav-vat a {
    padding: 7px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .82rem;
    color: var(--ink);
    border: 1px solid var(--line);
    background: #fff;
}
.mobile-nav-vat a.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.mobile-nav-contactline { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .92rem; color: var(--ink); }
.mobile-nav-contactline svg { width: 17px; height: 17px; color: var(--brand); }

/* ── Flash-meldinger ──────────────────────────────────────────────────── */
.flash { padding: 13px 18px; border-radius: var(--radius); margin: 18px 0 0; font-weight: 600; font-size: .95rem; }
.flash-success { background: var(--success-soft); color: var(--success); }
.flash-error { background: var(--danger-soft); color: var(--danger); }
.flash ul { margin: 0; padding-left: 18px; font-weight: 500; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
    background: linear-gradient(120deg, var(--ink) 0%, #253048 78%, #2C3A57 100%);
    color: #fff;
    overflow: hidden;
    position: relative;
}
.hero::after {
    content: '';
    position: absolute;
    right: -140px;
    top: -140px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(226, 0, 26, .35), transparent 65%);
    pointer-events: none;
}
.hero .container {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 48px;
    align-items: center;
    padding-top: 72px;
    padding-bottom: 72px;
    position: relative;
    z-index: 1;
}
.hero h1 { color: #fff; margin-bottom: .4em; }
.hero p { color: rgba(255, 255, 255, .78); font-size: 1.12rem; max-width: 46ch; }
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 20px;
}
.hero-eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.hero-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

.hero-panel {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-lg);
    padding: 26px;
    backdrop-filter: blur(4px);
}
.hero-panel h3 { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.hero-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.hero-panel li { display: flex; gap: 10px; align-items: flex-start; color: rgba(255, 255, 255, .85); font-size: .96rem; }
.hero-panel li svg { width: 18px; height: 18px; color: var(--brand); flex-shrink: 0; margin-top: 3px; }

/* ── USP-rad ──────────────────────────────────────────────────────────── */
.usps { border-bottom: 1px solid var(--line); background: #fff; }
.usps .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding-top: 22px;
    padding-bottom: 22px;
}
.usp { display: flex; align-items: center; gap: 13px; }
.usp-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.usp-icon svg { width: 22px; height: 22px; }
.usp strong { display: block; font-size: .95rem; color: var(--ink); }
.usp span { font-size: .82rem; color: var(--muted); }

/* ── Seksjonshoder ────────────────────────────────────────────────────── */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.section-head p { color: var(--muted); margin: 0; }
.section-link { font-weight: 700; color: var(--brand); font-size: .95rem; white-space: nowrap; }
.section-link:hover { color: var(--brand-dark); }

/* ── Kategori-fliser ──────────────────────────────────────────────────── */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cat-tile {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--ink-2);
    aspect-ratio: 4 / 3;
    display: block;
}
.cat-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.cat-tile:hover img { transform: scale(1.045); }
.cat-tile-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--ink-2), #33405C);
}
.cat-tile-placeholder svg { width: 44px; height: 44px; color: rgba(255, 255, 255, .35); }
.cat-tile-label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 34px 16px 14px;
    background: linear-gradient(transparent, rgba(15, 19, 27, .82));
    color: #fff;
    font-weight: 800;
    font-size: 1.02rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.cat-tile-label small { font-weight: 600; font-size: .78rem; color: rgba(255, 255, 255, .75); }

/* ── Butikkoppsett med filterkolonne ──────────────────────────────────── */
/* Uten filterkolonne beholder sidene full bredde — .has-filters settes
   først når det faktisk finnes noe å filtrere på. */
.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.shop-layout.has-filters { grid-template-columns: 232px minmax(0, 1fr); }
.shop-layout.has-filters .product-grid { grid-template-columns: repeat(3, 1fr); }
.shop-results { min-width: 0; }

/* Bryteren som åpner skuffen på mobil. Ligger utenfor synsfeltet, men er
   fortsatt en ekte avkrysningsboks slik at <label> kan styre den uten JS. */
.filter-state { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.filter-scrim { display: none; }
.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;
}

.shop-filters { position: sticky; top: 16px; }
.filter-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px 16px; }

.filter-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.filter-head-title { font-weight: 700; font-size: .95rem; margin-right: auto; }
.filter-reset { font-size: .82rem; color: var(--muted); text-decoration: underline; }
.filter-reset:hover { color: var(--brand); }
.filter-close { display: none; }

.filter-group + .filter-group { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.filter-group-title { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.filter-options { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }

.filter-option { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; cursor: pointer; font-size: .9rem; }
.filter-option:hover { background: var(--surface); }
.filter-option input { width: 16px; height: 16px; accent-color: var(--brand); flex: none; cursor: pointer; }
.filter-option-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-count { color: var(--muted); font-size: .8rem; flex: none; }

.filter-badge { background: var(--brand); color: #fff; border-radius: 999px; font-size: .74rem; font-weight: 700; padding: 1px 7px; }
.filter-actions { display: none; }

/* «Filtrer»-knappen i verktøylinja — kun mobil */
.filter-trigger { display: none; }

/* ── Filter som skuff nedenfra på mobil ───────────────────────────────── */
@media (max-width: 1024px) {
    .shop-layout, .shop-layout.has-filters { grid-template-columns: minmax(0, 1fr); gap: 16px; }

    .filter-trigger {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 9px 14px; min-height: 42px;
        border: 1px solid var(--line); border-radius: var(--radius);
        background: #fff; font-weight: 700; font-size: .9rem; color: var(--ink);
        cursor: pointer; user-select: none; flex: none;
    }
    .filter-trigger svg { width: 17px; height: 17px; }
    .filter-trigger:active { background: var(--surface); }

    .filter-scrim {
        display: block; position: fixed; inset: 0; z-index: 90;
        background: rgba(15, 19, 27, .5);
        touch-action: none;                 /* siden bak skal ikke skrolle */
        opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
    }

    .shop-filters {
        /* top: auto opphever «top: 16px» fra den klebrige desktop-kolonnen —
           ellers fester skuffen seg øverst i stedet for nederst. */
        position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 95;
        max-height: 82vh; display: flex; flex-direction: column;
        transform: translateY(101%); transition: transform .25s ease;
        will-change: transform;
    }
    .filter-form {
        display: flex; flex-direction: column; min-height: 0;
        border: 0; border-radius: 18px 18px 0 0; padding: 0;
        box-shadow: 0 -8px 32px rgba(21, 26, 36, .22);
        max-height: 82vh;
    }
    /* Draghåndtak øverst i skuffen */
    .filter-head {
        position: relative; margin: 0;
        padding: 18px 16px 12px; border-bottom: 1px solid var(--line);
    }
    .filter-head::before {
        content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
        width: 38px; height: 4px; border-radius: 999px; background: var(--surface-2);
    }
    .filter-head-title { font-size: 1.02rem; }
    .filter-close {
        display: inline-flex; align-items: center; justify-content: center;
        width: 34px; height: 34px; margin-right: -6px;
        border-radius: 50%; color: var(--muted); cursor: pointer;
    }
    .filter-close:active { background: var(--surface); }
    .filter-close svg { width: 18px; height: 18px; }

    .filter-body { overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px; flex: 1; min-height: 0; }
    .filter-options { max-height: none; overflow: visible; }
    .filter-option { padding: 10px 6px; font-size: .95rem; }
    .filter-option input { width: 19px; height: 19px; }

    .filter-actions {
        display: block; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--line); background: #fff;
    }
    .filter-done { display: flex; width: 100%; justify-content: center; cursor: pointer; }

    /* Åpen tilstand */
    .shop-layout:has(.filter-state:checked) .filter-scrim { opacity: 1; visibility: visible; }
    .shop-layout:has(.filter-state:checked) .shop-filters { transform: translateY(0); }
}

/* Bilde som ikke finnes hos leverandøren — plassholder i stedet */
img.img-fallback { opacity: .5; object-fit: contain; }

/* ── Produktkort ──────────────────────────────────────────────────────── */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.product-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.product-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); border-color: var(--surface-2); color: inherit; }

.product-card-image { background: #fff; height: 240px; display: flex; align-items: center; justify-content: center; padding: 18px; position: relative; overflow: hidden; }
.product-card-image img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.product-card-image .no-image { color: var(--surface-2); }
.product-card-image .no-image svg { width: 56px; height: 56px; }

.product-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.product-card-brand { font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.product-card-series { font-size: .78rem; font-weight: 600; color: var(--muted); }
.product-card-name {
    font-weight: 700; font-size: .94rem; margin-top: 1px; color: var(--ink); line-height: 1.35;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.product-card-meta { font-size: .8rem; color: var(--muted); }
.product-card-price { margin-top: auto; padding-top: 10px; font-weight: 800; font-size: 1.02rem; color: var(--ink); }
.product-card-price small { font-weight: 600; color: var(--muted); font-size: .78rem; }

.badge-featured {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--brand);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
}

/* ── Infobånd ─────────────────────────────────────────────────────────── */
.info-band { background: var(--ink); color: #fff; border-radius: var(--radius-lg); overflow: hidden; }
.info-band-inner { display: grid; grid-template-columns: 1.2fr .8fr; }
.info-band-text { padding: 44px 48px; }
.info-band-text h2 { color: #fff; }
.info-band-text p { color: rgba(255, 255, 255, .75); max-width: 52ch; }
.info-band-visual {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    display: grid;
    place-items: center;
    padding: 30px;
}
.info-band-visual svg { width: 120px; height: 120px; color: rgba(255, 255, 255, .85); }

.category-intro { max-width: 860px; margin: 6px 0 8px; }
.category-intro p, .category-intro li { color: var(--text); line-height: 1.7; }

/* ── Brødsmuler / verktøylinje ────────────────────────────────────────── */
.breadcrumbs { font-size: .85rem; color: var(--muted); margin: 20px 0 4px; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--brand); }
.breadcrumbs span { margin: 0 6px; color: var(--line); }

.toolbar { display: flex; align-items: center; gap: 12px; margin: 18px 0 20px; }
.toolbar-count { color: var(--muted); font-size: .92rem; margin-right: auto; }
.toolbar-count-short { display: none; }
.toolbar-sort { flex: none; }
.toolbar select {
    padding: 10px 14px;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink);
    background: #fff;
    cursor: pointer;
}

.pagination-nav { display: flex; justify-content: center; gap: 10px; margin-top: 34px; }

/* ── Produktside ──────────────────────────────────────────────────────── */
.product-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; margin: 22px 0 50px; }
.product-layout > * { min-width: 0; } /* hindrer at brede barn sprenger kolonnen */

/* Desktop: bilde øverst til venstre, kjøpsboksen i høyre kolonne over begge
   radene, og beskrivelsen rett under bildet. Trekkspillene ligger sist i
   kilden, så mobil (én kolonne) får galleri → kjøp → beskrivelse som før. */
@media (min-width: 1025px) {
    .product-media { grid-column: 1; grid-row: 1; }
    .product-buy   { grid-column: 2; grid-row: 1 / span 2; }
    .product-layout > .pd-accordions {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        margin-top: 0;
    }
}

.gallery-main {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    height: min(520px, 85vw);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    overflow: hidden;
}
.gallery-main img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.gallery-thumb {
    width: 72px;
    aspect-ratio: 1;
    flex: none;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 6px;
    cursor: pointer;
    overflow: hidden;
    display: block;
    transition: border-color .15s ease;
}
/* Leverandørbildene har alle sideforhold — mange er høye portrettbilder.
   «max-height: 100%» klemmer dem ikke inne i en <button>, så bildet rant
   utenfor rammen og over nabominiatyren. Fast width/height + object-fit
   holder uansett format. */
.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;   /* samme uttrykk som hovedbildet */
}
.gallery-thumb:hover { border-color: var(--muted); }
.gallery-thumb.active { border-color: var(--brand); }

.pd-brand { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; }
.pd-series { font-size: .9rem; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.pd-title { margin-bottom: 6px; }
.pd-sku { color: var(--muted); font-size: .85rem; margin-bottom: 16px; }
.pd-price { font-size: 1.9rem; font-weight: 800; color: var(--ink); margin: 10px 0 2px; }
.locked-color-note { font-size: .84rem; color: var(--muted); margin: 4px 0 2px; }
.locked-color-note a { color: var(--brand); text-decoration: underline; }
.locked-color-note a:hover { color: var(--brand-dark); }
.pd-price small { font-size: .95rem; font-weight: 600; color: var(--muted); }
/* Prisen i den andre mva-formen, rett under hovedprisen. Dempet, så den
   ikke konkurrerer med prisen kunden regner i — men synlig for både
   kunden og Googles robot. */
.pd-price-alt { color: var(--muted); font-size: .95rem; font-weight: 600; margin: 2px 0 0; }

.pd-vat { color: var(--muted); font-size: .84rem; margin-bottom: 20px; }

.option-label { font-weight: 700; font-size: .92rem; margin: 18px 0 9px; display: flex; justify-content: space-between; }
.option-label .selected-value { color: var(--muted); font-weight: 600; }

.swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.swatch {
    border: 2px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 5px;
    width: 58px;
    height: 58px;
    cursor: pointer;
    display: grid;
    /* Definitive spor (100 % av innholdsboksen), slik at bildets
       prosenthøyde faktisk har noe å regne mot — se .gallery-thumb. */
    grid-template: 100% / 100%;
    place-items: center;
    position: relative;
    overflow: hidden;
}
/* Samme problem som .gallery-thumb: leverandørbildene har alle sideforhold,
   og «max-height: 100%» klemmer dem ikke inne i knappen — bildet rant
   utenfor den grå rammen. Fast width/height + object-fit holder uansett
   format og kilde. */
.swatch img { width: 100%; height: 100%; object-fit: contain; }
.swatch.active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.swatch-text { width: auto; min-width: 46px; height: 42px; padding: 0 13px; font-size: .88rem; font-weight: 700; color: var(--ink); }
.swatch-text.active { border-color: var(--brand); color: var(--brand); }

.qty-row { display: flex; gap: 12px; margin-top: 22px; }
.qty-stepper { display: inline-flex; border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.qty-stepper button { width: 42px; border: 0; background: var(--surface); font-size: 1.15rem; font-weight: 700; cursor: pointer; color: var(--ink); }
.qty-stepper button:hover { background: var(--surface-2); }
.qty-stepper input { width: 58px; border: 0; text-align: center; font-family: var(--font); font-size: 1rem; font-weight: 700; outline: none; -moz-appearance: textfield; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── Trykkonfigurator ─────────────────────────────────────────────────── */
.print-config { margin-top: 4px; }

.print-placements { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.print-tile {
    border: 2px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 10px 8px 11px;
    cursor: pointer;
    text-align: center;
    font-family: var(--font);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.print-tile:hover { border-color: var(--muted); }
.print-tile.active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.print-tile strong { display: block; font-size: .85rem; color: var(--ink); margin-top: 7px; }
.print-tile small { display: block; font-size: .72rem; color: var(--muted); margin-top: 1px; }

.print-tile-img { display: flex; justify-content: center; gap: 4px; height: 72px; }
.print-tile-none { display: grid; place-items: center; color: var(--surface-2); width: 100%; }
.print-tile-none svg { width: 40px; height: 40px; }

/* Illustrasjonen i eksakt bildeformat (560×700) — trykksonene posisjoneres
   relativt til selve plagget og treffer uansett flisbredde. */
.print-tpl { position: relative; display: block; height: 100%; aspect-ratio: 4 / 5; }
.print-tpl img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Markert trykksone på plagg-illustrasjonen.
   Geometrien kommer fra trykkmalen (Nova → Trykk → Trykkmaler →
   Plasseringsredigering) som CSS-variabler på selve elementet.
   Verdiene under er bare reserven om malen mangler soner. */
.zone-chest::after, .zone-back::after {
    content: '';
    position: absolute;
    border: 2px dashed var(--brand);
    border-radius: 3px;
    background: rgba(226, 0, 26, .08);
    pointer-events: none;
    top: var(--zone-top);
    left: var(--zone-left);
    width: var(--zone-w);
    height: var(--zone-h);
}
.zone-chest { --zone-top: 31%; --zone-left: 51%; --zone-w: 16%; --zone-h: 12%; }
.zone-back  { --zone-top: 27%; --zone-left: 30%; --zone-w: 40%; --zone-h: 34%; }

.print-placement-note { display: block; color: var(--muted); font-size: .78rem; margin-top: 8px; }
.print-placement-note a { color: var(--brand); text-decoration: underline; }

.print-types { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.print-type {
    border: 2px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 11px 13px;
    cursor: pointer;
    text-align: left;
    font-family: var(--font);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.print-type:hover { border-color: var(--muted); }
.print-type.active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.print-type strong { display: block; font-size: .9rem; color: var(--ink); }
.print-type small { display: block; font-size: .76rem; color: var(--muted); margin-top: 1px; }

.print-upload { margin-top: 12px; padding: 12px 15px; }
.print-upload label { font-size: .88rem; }
.print-upload input[type=file] { margin-top: 7px; font-size: .84rem; }
.print-upload-note { display: block; color: var(--muted); font-size: .78rem; margin-top: 9px; }

.print-price-box {
    margin-top: 14px;
    background: var(--brand-soft);
    border-radius: var(--radius);
    padding: 12px 15px;
    font-size: .92rem;
    color: var(--ink);
    line-height: 1.55;
}
.print-price-box:empty { display: none; }
.print-price-box small { color: var(--muted); font-size: .78rem; }

.upload-tag--warn { background: #FFF6E5; border-color: #F0D9A8; color: #7A5300; }

/* ── Leverandørtrykk (imprint fra feeden) ─────────────────────────────── */
.imprint-config { margin-top: 4px; }

.pd-imprint-note {
    margin-top: 4px;
    font-size: .92rem;
    font-weight: 700;
    color: var(--brand);
}

.imprint-spec {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 12px 14px;
    margin-bottom: 12px;
}
.imprint-spec img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    flex: 0 0 auto;
    background: #fff;
    border-radius: 6px;
}
.imprint-spec dl { margin: 0; display: grid; gap: 4px; font-size: .84rem; min-width: 0; }
.imprint-spec dl > div { display: flex; gap: 8px; }
.imprint-spec dt { color: var(--muted); min-width: 108px; flex: 0 0 auto; }
.imprint-spec dd { margin: 0; color: var(--ink); font-weight: 600; }

.imprint-methods { display: flex; flex-wrap: wrap; gap: 9px; }
.imprint-tile {
    flex: 1 1 140px;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 11px 13px;
    cursor: pointer;
    text-align: left;
    font-family: var(--font);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.imprint-tile:hover { border-color: var(--muted); }
.imprint-tile.active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.imprint-tile strong { display: block; font-size: .9rem; color: var(--ink); }
.imprint-tile small { display: block; font-size: .76rem; color: var(--muted); margin-top: 1px; }

.imprint-variants { display: flex; flex-wrap: wrap; gap: 8px; }
.imprint-variants .swatch-text { padding: 7px 13px; font-size: .84rem; }

.imprint-warning {
    margin-top: 10px;
    border-radius: var(--radius);
    background: #FFF6E5;
    border: 1px solid #F0D9A8;
    padding: 10px 13px;
    font-size: .84rem;
    color: #7A5300;
}

@media (max-width: 560px) {
    .imprint-spec { flex-direction: column; }
    .imprint-spec img { width: 100%; height: 140px; }
    .imprint-spec dt { min-width: 92px; }
}

.upload-box {
    margin-top: 20px;
    border: 2px dashed var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    background: var(--surface);
}
.upload-box:hover { border-color: var(--muted); }
.upload-box label { font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: 9px; cursor: pointer; color: var(--ink); }
.upload-box label svg { width: 20px; height: 20px; color: var(--brand); }
.upload-box small { display: block; color: var(--muted); margin-top: 5px; font-size: .8rem; }
.upload-box input[type=file] {
    margin-top: 11px;
    width: 100%;
    font-size: .82rem;
    color: var(--muted);
    cursor: pointer;
}
/* Eldre WebKit/Safari */
.upload-box input[type=file]::-webkit-file-upload-button {
    -webkit-appearance: none;
    margin-right: 11px;
    padding: 8px 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    color: var(--ink);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.upload-box input[type=file]::file-selector-button {
    -webkit-appearance: none;
    appearance: none;
    margin-right: 11px;
    padding: 8px 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    color: var(--ink);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.upload-box input[type=file]::file-selector-button:hover {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand);
}
.upload-box input[type=file]::file-selector-button:active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.upload-box input[type=file]:focus-visible {
    outline: none;
}
.upload-box input[type=file]:focus-visible::file-selector-button {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
/* Når en fil er valgt — grønn ramme rundt boksen */
.upload-box.has-file {
    border-style: solid;
    border-color: var(--success);
    background: var(--success-soft);
}
.upload-box.has-file input[type=file] { color: var(--success); }
.upload-box.has-file input[type=file]::file-selector-button {
    border-color: var(--success);
    color: var(--success);
}

/* Vedlegg i kontaktskjemaet — liste over valgte filer med fjern-knapp */
.contact-upload { margin-top: 18px; }
.contact-files { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.contact-files li {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: .84rem;
}
.contact-files li.is-over { background: #FDECEE; border-color: #F3C2C8; color: #B50015; }
.contact-file-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.contact-file-size { color: var(--muted); font-size: .78rem; flex-shrink: 0; }
.contact-files li.is-over .contact-file-size { color: inherit; }
.contact-file-remove {
    flex-shrink: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}
.contact-file-remove:hover { color: var(--danger); }

.pd-accordions { margin-top: 30px; border-top: 1px solid var(--line); }
.pd-accordions details { border-bottom: 1px solid var(--line); }
.pd-accordions summary {
    padding: 15px 4px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--ink);
}
.pd-accordions summary::-webkit-details-marker { display: none; }
.pd-accordions summary::after { content: '+'; font-size: 1.3rem; font-weight: 400; color: var(--muted); }
.pd-accordions details[open] summary::after { content: '–'; }
.pd-accordions .acc-body { padding: 0 4px 17px; color: var(--text); font-size: .95rem; white-space: pre-line; }
.pd-accordions ul { margin: 0; padding-left: 20px; }

/* ── Handlekurv ───────────────────────────────────────────────────────── */
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 34px; align-items: start; margin: 26px 0 50px; }

.cart-items { display: grid; gap: 14px; }
.cart-item {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    gap: 18px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 16px;
}
.cart-item-image { width: 92px; height: 92px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); display: grid; place-items: center; padding: 8px; position: relative; }
/* Absolutt posisjon: prosenthøyde i en auto-rad kollapser til naturlig
   størrelse (høye produktfoto fløt utover hele siden). */
.cart-item-image img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; }
.cart-item-thumbs { display: grid; gap: 6px; align-self: start; }

/* Min side: designbanken og bestill på nytt */
.konto-design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.konto-design-kort { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.konto-design-kort img { width: 100%; aspect-ratio: 4/5; object-fit: contain; background: #F5F6F8; display: block; }
.konto-design-info { padding: 10px 12px; display: grid; gap: 4px; font-size: .85rem; }
.konto-design-bruk { display: inline-block; text-align: center; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--brand); color: #fff; font-weight: 700; font-size: .82rem; text-decoration: none; }
.konto-design-bruk:hover { background: var(--brand-dark, #B50015); }
.konto-logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.konto-logo-kort { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 8px; display: grid; gap: 6px; place-items: center; text-decoration: none; color: var(--ink); }
.konto-logo-kort img { width: 100%; height: 64px; object-fit: contain; }
.konto-logo-fil { height: 64px; display: grid; place-items: center; font-weight: 800; color: var(--muted); }
.konto-logo-navn { font-size: .72rem; text-align: center; word-break: break-word; }
.konto-reorder { margin-left: auto; }
.konto-reorder-btn { border: 0; border-radius: 8px; background: var(--brand); color: #fff; font-weight: 700; padding: 9px 14px; cursor: pointer; font-family: var(--font); font-size: .85rem; }
.konto-reorder-btn:hover { background: var(--brand-dark, #B50015); }
.konto-reorder-celle { text-align: right; }
.konto-reorder-linje { border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 4px 9px; cursor: pointer; font-size: .9rem; }
.konto-reorder-linje:hover { background: var(--brand-soft, #FEF2F3); color: var(--brand); }
.cart-item-design { padding: 4px; }
.cart-item-name { font-weight: 700; color: var(--ink); }
.cart-item-meta { font-size: .84rem; color: var(--muted); }
.cart-item-meta .upload-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--brand-soft); color: var(--brand); font-weight: 600; padding: 2px 9px; border-radius: 999px; font-size: .76rem; margin-top: 4px; }
.cart-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.cart-item-price { font-weight: 800; color: var(--ink); }
.cart-remove { background: none; border: 0; color: var(--muted); font-size: .8rem; cursor: pointer; text-decoration: underline; font-family: var(--font); }
.cart-remove:hover { color: var(--danger); }

.summary-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 20px;
}
.summary-card h3 { margin-bottom: 16px; }
.summary-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: .95rem; }
.summary-row.muted { color: var(--muted); font-size: .87rem; }
.summary-total { border-top: 2px solid var(--ink); margin-top: 10px; padding-top: 13px; font-weight: 800; font-size: 1.2rem; display: flex; justify-content: space-between; color: var(--ink); }

/* ── Fri frakt-måler (kurv + kasse) ──────────────────────────────────── */
.freeship {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 11px 13px 12px;
    margin-bottom: 14px;
}
.freeship-text {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: .84rem;
    line-height: 1.35;
    color: var(--text);
    margin-bottom: 9px;
}
.freeship-text strong { color: var(--brand); font-weight: 800; white-space: nowrap; }
.freeship-goal { color: var(--muted); font-size: .76rem; white-space: nowrap; }

.freeship-track {
    height: 7px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}
.freeship-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #F0546A, var(--brand));
    transition: width .45s cubic-bezier(.22, .61, .36, 1);
}

/* Målet er nådd — hele boksen skifter til grønt og fyllet er fullt. */
.freeship.is-reached {
    background: var(--success-soft);
    border-color: #BFE5CB;
}
.freeship.is-reached .freeship-text {
    align-items: center;
    justify-content: flex-start;
    color: var(--success);
    font-weight: 600;
    margin-bottom: 0;
}
.freeship.is-reached .freeship-text strong { color: inherit; }
.freeship.is-reached .freeship-track { display: none; }
.freeship-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--success);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    flex: none;
}

.empty-state { text-align: center; padding: 70px 20px; }
.empty-state svg { width: 62px; height: 62px; color: var(--surface-2); margin: 0 auto 16px; }
.empty-state p { color: var(--muted); }

/* ── Kasse ────────────────────────────────────────────────────────────── */
.checkout-layout { display: grid; grid-template-columns: 1fr 400px; gap: 34px; align-items: start; margin: 26px 0 50px; }

.checkout-section { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; margin-bottom: 18px; }
.checkout-section h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.checkout-section h3 .step {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--ink); color: #fff;
    font-size: .85rem; font-weight: 800;
    display: grid; place-items: center;
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }

.field label { display: block; font-weight: 600; font-size: .86rem; margin-bottom: 6px; color: var(--ink); }
.field input, .field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: .95rem;
    outline: none;
    transition: border-color .15s ease;
    background: #fff;
}
.field input:focus, .field textarea:focus { border-color: var(--ink); }
.field .error { color: var(--danger); font-size: .8rem; margin-top: 4px; display: block; }

.radio-cards { display: grid; gap: 11px; }
.radio-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    padding: 15px 17px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    background: #fff;
}
.radio-card:hover { border-color: var(--muted); }
.radio-card input { margin-top: 4px; accent-color: var(--brand); width: 17px; height: 17px; }
.radio-card:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.radio-card strong { display: block; color: var(--ink); font-size: .96rem; }
.radio-card span { color: var(--muted); font-size: .84rem; }
.radio-card .radio-price { margin-left: auto; font-weight: 800; color: var(--ink); white-space: nowrap; }

.firms-badge {
    display: inline-block;
    background: var(--ink);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
}
.firms-hint {
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: .86rem;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: var(--radius);
    margin: 0 0 12px;
}

.summary-items { display: grid; gap: 12px; margin-bottom: 16px; max-height: 320px; overflow-y: auto; }
.summary-item { display: flex; gap: 12px; align-items: center; font-size: .88rem; }
.summary-item-img { width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; padding: 4px; flex-shrink: 0; background: #fff; }
.summary-item-img img { max-height: 100%; object-fit: contain; }
.summary-item-name { font-weight: 600; color: var(--ink); line-height: 1.3; }
.summary-item-qty { color: var(--muted); font-size: .8rem; }
.summary-item-price { margin-left: auto; font-weight: 700; white-space: nowrap; }

/* ── Kontakt oss ──────────────────────────────────────────────────────── */
.contact-layout { display: grid; grid-template-columns: 1fr 360px; gap: 34px; align-items: start; margin: 26px 0 50px; }
.contact-layout .checkout-section { position: relative; margin-bottom: 0; }

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.contact-list li { display: flex; gap: 13px; align-items: flex-start; font-size: .92rem; }
.contact-list strong { color: var(--ink); }
.contact-list a { color: var(--text); }
.contact-list a:hover { color: var(--brand); }

.product-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: .88rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.product-chip svg { width: 15px; height: 15px; }
.product-chip a { color: var(--brand-dark); font-weight: 800; font-size: 1.05rem; line-height: 1; padding: 0 2px; }
.product-chip a:hover { color: var(--brand); }

.ask-box {
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 14px 17px;
    display: flex;
    align-items: center;
    gap: 13px;
}
.ask-box svg { width: 22px; height: 22px; color: var(--brand); flex-shrink: 0; }
.ask-box strong { display: block; color: var(--ink); font-size: .93rem; }
.ask-box span { color: var(--muted); font-size: .82rem; }
.ask-box .btn { margin-left: auto; }

@media (max-width: 1024px) {
    .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .ask-box { flex-wrap: wrap; }
    .ask-box .btn { margin-left: 0; width: 100%; }
    .header-contact .cart-label { display: none; }
    .header-katalog .cart-label { display: none; }
}

/* ── Korrektur (godkjenningsside) ─────────────────────────────────────── */
.proof-page { max-width: 720px; margin: 30px auto 60px; }
.proof-head { text-align: center; margin-bottom: 24px; }
.proof-head p { color: var(--muted); max-width: 52ch; margin: 0 auto 1em; }
.proof-eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-soft);
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.proof-status {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    margin-bottom: 18px;
    font-size: .95rem;
}
.proof-status svg { width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; }
.proof-status strong { display: block; }
.proof-status span { font-size: .88rem; }
.proof-status--ok { background: var(--success-soft); color: var(--success); }
.proof-status--changes { background: var(--brand-soft); color: var(--brand-dark); }

.proof-file {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    padding: 14px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.proof-file img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 0 auto; }
.proof-file iframe { width: 100%; height: min(75vh, 640px); border: 0; border-radius: var(--radius); }
.proof-file .btn { margin-top: 12px; }

.proof-message {
    margin-top: 16px;
    background: var(--surface);
    border-radius: var(--radius);
    padding: 14px 17px;
    font-size: .94rem;
}
.proof-message strong { color: var(--ink); }
.proof-message p { margin: 4px 0 0; white-space: pre-line; }

.proof-details { margin-top: 16px; font-size: .94rem; }
.proof-details h3 { font-size: 1rem; margin-bottom: 6px; }
.proof-details ul { margin: 0; padding-left: 20px; color: var(--text); }

.proof-actions { margin-top: 22px; }
.proof-approve small { display: block; text-align: center; color: var(--muted); font-size: .8rem; margin-top: 8px; }

.proof-changes { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.proof-changes summary {
    padding: 14px 17px;
    font-weight: 700;
    cursor: pointer;
    color: var(--ink);
    list-style: none;
    min-height: 48px;
    display: flex;
    align-items: center;
}
.proof-changes summary::-webkit-details-marker { display: none; }
.proof-changes summary::before { content: '✎'; margin-right: 9px; color: var(--muted); }
.proof-changes form { padding: 0 17px 17px; }
.proof-changes small { display: block; color: var(--muted); font-size: .8rem; margin-top: 8px; }
.proof-changes .btn { margin-top: 10px; }
.proof-changes textarea {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 16px;
    outline: none;
}
.proof-changes textarea:focus { border-color: var(--ink); }

.quote-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
}
.quote-card .summary-row small { font-size: .8rem; }

.proof-contact { margin-top: 26px; text-align: center; color: var(--muted); font-size: .88rem; }
.proof-contact a { color: var(--brand); text-decoration: underline; }

/* ── Bekreftelse ──────────────────────────────────────────────────────── */
.confirm-hero { text-align: center; padding: 54px 20px 30px; }
.confirm-check {
    width: 74px; height: 74px; border-radius: 50%;
    background: var(--success-soft); color: var(--success);
    display: grid; place-items: center; margin: 0 auto 18px;
}
.confirm-check svg { width: 36px; height: 36px; }
.confirm-hero p { color: var(--muted); max-width: 54ch; margin: 0 auto 1em; }
.confirm-card { max-width: 720px; margin: 0 auto 60px; }

/* ── Innholdssider (Sider fra Nova) ───────────────────────────────────── */
.page-content { max-width: 820px; margin: 12px 0 30px; }
.page-content h1 { margin-bottom: .6em; }
.page-content h2 { margin-top: 1.6em; }
.page-content h3 { margin-top: 1.3em; }
.page-content p, .page-content li { font-size: 1rem; line-height: 1.75; }
.page-content ul, .page-content ol { padding-left: 24px; margin: 0 0 1em; }
.page-content img { border-radius: var(--radius); margin: 1em 0; }
.page-content a { color: var(--brand); text-decoration: underline; }
.page-content a:hover { color: var(--brand-dark); }
.page-content blockquote { border-left: 4px solid var(--brand); margin: 1.2em 0; padding: .3em 0 .3em 18px; color: var(--muted); }
.page-content table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.page-content th, .page-content td { border: 1px solid var(--line); padding: 9px 13px; text-align: left; }
.page-content th { background: var(--surface); }
.page-content hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, .75); margin-top: 60px; }
.footer-main {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 36px;
    padding: 52px 0 40px;
}
.footer-main h4 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 15px; }
.footer-main ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-main a { color: rgba(255, 255, 255, .75); font-size: .92rem; }
.footer-main a:hover { color: #fff; }
.footer-about p { font-size: .92rem; max-width: 34ch; }
.footer-logo { font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: -.03em; margin-bottom: 10px; display: inline-block; }
.footer-logo .logo-dot { color: var(--accent); }
.footer-logo img { height: 30px; width: auto; display: block; }
.footer-main ul li { line-height: 1.5; }
.footer-hours { color: rgba(255, 255, 255, .62); font-size: .86rem; margin-top: 4px; }
.footer-hours strong { display: block; color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }

/* ── Nyhetsbrev ───────────────────────────────────────────────────────── */
.footer-news { margin-top: 22px; max-width: 22rem; }
.footer-news label { display: block; color: #fff; font-size: .85rem; font-weight: 700; margin-bottom: 8px; }
.footer-news-row { display: flex; gap: 7px; }
.footer-news input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-family: inherit;
    font-size: .88rem;
    outline: none;
}
.footer-news input[type="email"]::placeholder { color: rgba(255, 255, 255, .42); }
.footer-news input[type="email"]:focus { border-color: var(--brand); background: rgba(255, 255, 255, .1); }
.footer-news button {
    border: none;
    border-radius: var(--radius);
    padding: 10px 15px;
    background: var(--brand);
    color: #fff;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.footer-news button:hover { filter: brightness(1.08); }
.footer-news small { display: block; margin-top: 8px; color: rgba(255, 255, 255, .48); font-size: .74rem; line-height: 1.45; }
/* Honeypot — skjult for folk, synlig for boter */
.footer-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── Sosiale ikoner ───────────────────────────────────────────────────── */
.footer-social { display: flex; gap: 8px; margin-top: 20px; }
.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .16);
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .8);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.footer-social a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.footer-social svg { width: 18px; height: 18px; }

/* ── Tillitsrad ───────────────────────────────────────────────────────── */
.footer-trust { border-top: 1px solid rgba(255, 255, 255, .1); padding: 18px 0; }
.footer-trust .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 22px;
}
.footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .72);
}
.footer-badge svg { width: 17px; height: 17px; color: var(--brand); }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding: 18px 0; font-size: .82rem; }
.footer-bottom .container { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.footer-bottom a { color: rgba(255, 255, 255, .62); }
.footer-bottom a:hover { color: #fff; }

/* ── Responsivt ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .cat-grid, .product-grid, .shop-layout.has-filters .product-grid { grid-template-columns: repeat(3, 1fr); }
    .usps .container { grid-template-columns: repeat(2, 1fr); }
    .hero .container { grid-template-columns: 1fr; }
    .hero-panel { display: none; }
    .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
    .summary-card { position: static; }
    .product-layout { grid-template-columns: 1fr; gap: 28px; }
    .footer-main { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    /* Kompakt, moderne mobilheader: logo + handlinger på én rad, søk under */
    .topbar { font-size: .78rem; }
    .topbar .container { justify-content: center; min-height: 32px; }
    .topbar-contact, .vat-toggle { display: none; }         /* ligger i mobilmenyen */
    .topbar-usp { justify-content: center; text-align: center; }

    .site-header .container {
        flex-wrap: wrap;
        gap: 10px 12px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .logo img { height: 30px; }
    .header-search { order: 3; flex-basis: 100%; max-width: none; }
    .header-search input { padding: 11px 46px 11px 15px; font-size: 16px; } /* 16px hindrer iOS-zoom */

    .nav-toggle { display: inline-flex; }
    .main-nav { display: none; }                            /* skuffen tar over */

    .header-actions { gap: 0; }
    /* Uten etikett krympet ikonknappene til under bredden på menyknappen,
       så raden så ujevn ut. Samme minstemål som .nav-toggle. */
    .cart-button {
        padding: 6px 8px;
        min-width: 52px;
        min-height: 48px;
        justify-content: center;
        gap: 0;
    }
    .header-contact { display: none; }                      /* kontakt ligger i menyen */
    .header-katalog { display: none; }                      /* katalog ligger i menyen */
    .cart-button .cart-label { display: none; }
    .cart-button svg { width: 22px; height: 22px; color: var(--ink); }
    /* Uten etiketten står tallet rett inntil ikonet — litt luft trengs. */
    .cart-count { margin-left: 3px; }
}

@media (max-width: 720px) {
    .product-card-image { height: 160px; padding: 12px; }
    .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .product-grid, .shop-layout.has-filters .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .product-card-body { padding: 10px 12px 12px; }
    .product-card-name { font-size: .9rem; }
    .cat-tile-label { padding: 26px 12px 10px; font-size: .92rem; flex-wrap: wrap; }
    .usps .container { grid-template-columns: 1fr 1fr; gap: 12px; }
    .usp span { display: none; }
    .usp-icon { width: 38px; height: 38px; }
    .hero .container { padding-top: 44px; padding-bottom: 44px; gap: 24px; }
    .hero-actions .btn { flex: 1; }
    .info-band-inner { grid-template-columns: 1fr; }
    .info-band-visual { display: none; }
    .info-band-text { padding: 26px 22px; }
    .form-grid { grid-template-columns: 1fr; }
    /* Kurvlinje på mobil: miniatyren hadde fast 92 px i en 72 px-kolonne og
       la seg dermed oppå produktnavnet. Bildet følger nå kolonnebredden. */
    .cart-item {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 12px 14px;
        align-items: start;
        padding: 14px;
    }
    .cart-item > * { min-width: 0; }
    .cart-item-thumbs { width: 72px; }
    .cart-item-image { width: 100%; height: auto; aspect-ratio: 1 / 1; padding: 6px; }
    .cart-item-image img { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
    .cart-item-name { display: block; overflow-wrap: anywhere; }
    .cart-item-meta { overflow-wrap: anywhere; }
    .cart-item-right {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 6px 12px;
        border-top: 1px solid var(--line);
        padding-top: 10px;
    }
    /* Totalen først, «herav trykk» og «Fjern» på linja under. */
    .cart-item-right .cart-item-price { order: 1; font-size: 1.05rem; }
    .cart-item-right form { order: 2; margin-left: auto; }
    .cart-item-right .cart-item-meta { order: 3; flex-basis: 100%; text-align: left; }
    /* I én kolonne har oppsummeringen ingenting å feste seg til. */
    .summary-card { position: static; padding: 18px; }
    .footer-main { grid-template-columns: 1fr 1fr; gap: 24px; padding: 40px 0 28px; }
    .footer-about { grid-column: 1 / -1; }
    .footer-news { max-width: none; }
    .footer-trust .container { justify-content: flex-start; gap: 10px 16px; }
    .footer-badge { font-size: .78rem; }
    .footer-bottom .container { justify-content: center; text-align: center; }
    .section { padding: 34px 0; }
    .section-head { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 18px; }

    /* Underkategorier og galleritomler: horisontal sveip i stedet for brytning */
    .subcats {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
        margin: 6px -20px 0; padding: 2px 20px 14px; border-bottom: 0;
    }
    .subcats::-webkit-scrollbar { display: none; }
    .subcat { flex-shrink: 0; min-height: 40px; }
    .gallery-thumbs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
    .gallery-thumbs::-webkit-scrollbar { display: none; }
    .gallery-thumb { width: 68px; }

    .toolbar { gap: 8px; margin: 4px 0 14px; }
    .toolbar-count { display: none; }
    .toolbar-count-short {
        display: block; font-size: .82rem; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .toolbar select { max-width: 46vw; text-overflow: ellipsis; }

    /* På smale telefoner er det ikke plass til både knapp, antall og
       sortering — antallet vikes for de to som faktisk gjør noe. */
    @media (max-width: 480px) {
        .toolbar-count-short { display: none; }
        .toolbar-sort { margin-left: auto; }
    }
    .toolbar select { min-height: 42px; font-size: 16px; padding: 8px 10px; }

    /* Trykkonfigurator: 2×2-rutenett med større flater på mobil */
    .print-placements { grid-template-columns: 1fr 1fr; }
    .print-tile { min-height: 44px; }
    .print-tile-img { height: 84px; }
    .print-types { grid-template-columns: 1fr; }

    /* Produktside: kjøpsrad fester seg i bunnen av skjermen */
    .gallery-main { height: min(380px, 92vw); padding: 18px; }
    .qty-row {
        position: sticky;
        bottom: 0;
        z-index: 40;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(6px);
        margin: 22px -20px 0;
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
        box-shadow: 0 -6px 20px rgba(21, 26, 36, .07);
    }
    .qty-stepper { flex-shrink: 0; }
    .qty-stepper button { width: 42px; min-height: 48px; font-size: 1.3rem; }
    .qty-stepper input { width: 44px; }
    .qty-row .btn-lg { padding-left: 10px; padding-right: 10px; font-size: 1rem; min-width: 0; }
    .qty-row .btn-lg svg { display: none; } /* plass til teksten på smale skjermer */
    .swatch { width: 52px; height: 52px; }
    .swatch-text { height: 46px; min-width: 46px; }

    /* Store nok trykkflater overalt */
    .btn { min-height: 46px; }
    .btn-lg { min-height: 52px; }
    .field input, .field textarea, .header-search input { font-size: 16px; } /* hindrer autozoom på iOS */
    .cart-remove { padding: 10px 0; }
    .pd-accordions summary { padding: 16px 4px; min-height: 52px; }
}

/* ── Adminverktøy på butikkflaten ────────────────────────────────────────
   Vises bare for innlogget Nova-bruker (App\Support\ShopAdmin). Skjulte
   produkter blir stående i listene for admin, nedtonet, så de kan hentes
   tilbake fra samme sted de ble skjult. */

.admin-hide {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    background: rgba(17, 17, 17, .82);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    cursor: pointer;
    /* Kortet er en lenke — uten dette arver knappen understrek og farge. */
    text-decoration: none;
    line-height: 1;
    /* Ute av veien til du er innom kortet, men alltid synlig på touch. */
    opacity: 0;
    transition: opacity .12s ease, background .12s ease;
}

.product-card:hover .admin-hide,
.product-card:focus-within .admin-hide,
.admin-hide[data-hidden="1"] {
    opacity: 1;
}

.admin-hide:hover {
    background: var(--brand);
}

.admin-hide[data-busy="1"] {
    opacity: .5;
    pointer-events: none;
}

@media (hover: none) {
    .admin-hide { opacity: 1; }
}

.badge-hidden {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 2;
    background: #111;
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
}

/* Skjult for kunden, nedtonet for deg. Skravuren gjør det tydelig også
   når produktbildet i seg selv er lyst. */
.product-card.is-hidden-product {
    opacity: .55;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(17, 17, 17, .045) 0 8px,
        transparent 8px 16px
    );
}

.product-card.is-hidden-product:hover {
    opacity: 1;
}

/* Produktsiden */
.pd-admin {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 4px;
}

.pd-admin .badge-hidden {
    position: static;
}

.pd-admin-btn {
    background: #111;
    color: #fff;
    border: 0;
    font-size: .78rem;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
}

.pd-admin-btn:hover {
    background: var(--brand);
}

/* Adminstripe i toppen — se layout.blade.php. Bare synlig for innlogget
   Nova-bruker, og bevisst tydelig: den forteller at du ser en annen
   butikk enn kundene. */
.topbar-admin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.topbar-admin svg {
    width: 14px;
    height: 14px;
    flex: none;
}

.topbar-admin-user {
    font-weight: 400;
    opacity: .85;
    /* Lange e-postadresser skal ikke dytte mva-velgeren ut av stripa. */
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-admin a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 900px) {
    /* Toppstripa er trang på mobil — behold merket, dropp detaljene. */
    .topbar-admin-user,
    .topbar-admin a { display: none; }
}

/* ── Min side ────────────────────────────────────────────────────────────
   Kundens egen oversikt. Bevisst rolig: dette er ikke en salgsflate, det
   er et sted man kommer for å finne én ting og gå igjen. */

.konto-smal { max-width: 720px; }

.konto-tittel {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 28px 0 18px;
}

.konto-ingress {
    color: #5B6472;
    max-width: 52ch;
    margin: 0 0 22px;
}

.konto-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 24px;
    padding-bottom: 0;
}

.konto-nav > a {
    padding: 10px 14px;
    font-size: .92rem;
    font-weight: 600;
    color: #5B6472;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.konto-nav > a:hover { color: #111; }

.konto-nav > a.active {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

.konto-nav-antall {
    display: inline-block;
    margin-left: 6px;
    background: #EEF0F3;
    color: #5B6472;
    font-size: .72rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
}

.konto-nav-ut {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.konto-nav-bruker {
    font-size: .82rem;
    color: #9CA3AF;
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.konto-nav-ut button {
    background: none;
    border: 0;
    padding: 0;
    font-size: .85rem;
    font-weight: 600;
    color: #5B6472;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.konto-nav-ut button:hover { color: var(--brand); }

.konto-rutenett {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    align-items: start;
}

.konto-kort {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 18px;
}

/* Korrektur venter på kunden — den seksjonen skal fange blikket. */
.konto-kort-viktig { border-color: var(--brand); }

.konto-kort h2 {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 12px;
}

/* Radene er lenker: hele flaten skal være klikkbar, også på mobil. */
.konto-rad {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #F1F2F4;
    color: inherit;
    text-decoration: none;
}

.konto-rad:last-of-type { border-bottom: 0; }
.konto-rad:hover { color: var(--brand); }

.konto-rad-hoved { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.konto-rad-hoved strong { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; }
.konto-rad-dato { font-size: .8rem; color: #9CA3AF; }

.konto-rad-side {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
    text-align: right;
}

.konto-rad-sum { font-weight: 700; font-size: .92rem; white-space: nowrap; }
.konto-rad-handling { font-size: .82rem; font-weight: 700; color: var(--brand); white-space: nowrap; }

.konto-status {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 4px 10px;
    border-radius: 999px;
    background: #EEF0F3;
    color: #5B6472;
    white-space: nowrap;
}

/* Statusfargene følger Order::statusLabels(). Ukjente statuser faller
   tilbake på den grå grunnstilen over — en ny status i Nova skal aldri
   gi et usynlig merke. */
.konto-status-paid,
.konto-status-proof_approved,
.konto-status-quote_accepted,
.konto-status-approved { background: #E7F6EF; color: #12734B; }

.konto-status-proof_sent,
.konto-status-quote_sent,
.konto-status-pending { background: #FFF4E0; color: #8A5A00; }

.konto-status-proof_changes,
.konto-status-changes,
.konto-status-cancelled,
.konto-status-quote_declined,
.konto-status-refunded { background: #FDE9EA; color: #A3111C; }

.konto-status-processing,
.konto-status-shipped { background: #E8F0FE; color: #1A4FA0; }

.konto-status-completed { background: #111; color: #fff; }

.konto-mer {
    display: inline-block;
    margin-top: 12px;
    font-size: .86rem;
    font-weight: 700;
    color: var(--brand);
    text-decoration: none;
}

.konto-mer:hover { text-decoration: underline; }

.konto-tom {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 34px;
    text-align: center;
    margin-bottom: 20px;
}

.konto-tom h2 { font-size: 1.1rem; margin: 0 0 8px; }
.konto-tom p { color: #5B6472; margin: 0 0 18px; }

/* Skjema */
.konto-skjema { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.konto-skjema label { font-size: .85rem; font-weight: 700; margin-top: 8px; }

.konto-skjema input[type="email"],
.konto-skjema input[type="text"],
.konto-skjema textarea {
    border: 1px solid #D8DBE0;
    border-radius: 10px;
    padding: 11px 13px;
    font: inherit;
    font-size: .95rem;
    width: 100%;
}

.konto-skjema input:focus,
.konto-skjema textarea:focus {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
    border-color: transparent;
}

.konto-skjema button { margin-top: 14px; align-self: flex-start; }
.konto-hjelp { font-size: .84rem; color: #9CA3AF; margin: 10px 0 0; }
.konto-feil { font-size: .84rem; color: #A3111C; font-weight: 600; }

.konto-varsel {
    background: #FFF4E0;
    color: #8A5A00;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: .9rem;
    margin: 0 0 18px;
}

.konto-varsel-ok { background: #E7F6EF; color: #12734B; }

.konto-kvittering {
    background: #E7F6EF;
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 22px;
}

.konto-kvittering h2 { font-size: 1.05rem; margin: 0 0 8px; color: #12734B; }
.konto-kvittering p { margin: 0 0 8px; font-size: .92rem; }

.konto-ordre-topp {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

/* Tabellen skal aldri dytte siden ut i bredden på mobil. */
.konto-tabell-omslag { overflow-x: auto; }
.konto-tabell { width: 100%; border-collapse: collapse; font-size: .92rem; }
.konto-tabell th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #9CA3AF; padding: 0 10px 8px 0; }
.konto-tabell td { padding: 10px 10px 10px 0; border-top: 1px solid #F1F2F4; vertical-align: top; }
.konto-tabell tfoot td { color: #5B6472; }
.konto-tabell-sum td { font-weight: 800; color: #111; font-size: 1rem; }
.konto-variant { display: block; font-size: .8rem; color: #9CA3AF; }

/* Meldingstråd */
.konto-trad { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }

.konto-melding {
    border-radius: 14px;
    padding: 14px 18px;
    max-width: 88%;
}

.konto-melding header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: .78rem;
    margin-bottom: 6px;
}

.konto-melding header span { color: #9CA3AF; }
.konto-melding p { margin: 0; font-size: .95rem; white-space: pre-line; }

.konto-melding-deg { background: #EEF0F3; align-self: flex-end; }
.konto-melding-oss { background: #fff; border: 1px solid #E5E7EB; align-self: flex-start; }

.visuelt-skjult {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Antigro Designer ────────────────────────────────────────────────────
   Produktsiden bytter «Legg i handlekurv» mot «Lag design», og kurven
   viser produktbildet nedtonet med en spinner mens Antigro lager
   forhåndsvisningen (60-90 sekunder på repix-kontoen). */

.pd-antigro { margin-top: 18px; }

.pd-antigro .qty-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
}

.pd-antigro .qty-row label { font-size: .88rem; font-weight: 700; }

.pd-antigro .qty-row input {
    width: 90px;
    border: 1px solid #D8DBE0;
    border-radius: 10px;
    padding: 9px 11px;
    font: inherit;
}

.pd-antigro-btn { width: 100%; }
.pd-antigro-btn svg { width: 18px; height: 18px; }

.pd-antigro-note {
    margin: 12px 0 0;
    font-size: .84rem;
    color: #9CA3AF;
}

/* Ditt materiell: én boks med to faner — enten logo ELLER tekst. */
.pd-material {
    margin: 0 0 14px;
    border: 1px solid #E5E8ED;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.pd-material-tabs {
    display: flex;
    gap: 2px;
    padding: 4px;
    background: #F5F6F8;
    border-bottom: 1px solid #E5E8ED;
}

.pd-material-tabs button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    color: #6B7280;
    cursor: pointer;
}

.pd-material-tabs button svg { width: 15px; height: 15px; }

.pd-material-tabs button.active {
    background: #fff;
    color: #1F2937;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

.pd-material-pane { padding: 14px; }

.pd-material-pane label {
    display: block;
    margin-bottom: 6px;
    font-size: .88rem;
    font-weight: 600;
    color: #1F2937;
}

.pd-material-pane input[type="text"] {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #D8DCE3;
    border-radius: 8px;
    font: inherit;
    background: #fff;
}

.pd-material-pane input[type="text"]:focus {
    outline: none;
    border-color: #9CA3AF;
}

.pd-material-pane small {
    display: block;
    margin-top: 8px;
    font-size: .8rem;
    color: #9CA3AF;
}

.pd-material-req {
    display: block;
    padding: 9px 14px;
    border-top: 1px solid #E5E8ED;
    background: #FFF7ED;
    font-size: .8rem;
    color: #9A3412;
}

/* Småskriften — minimum og oppstart på én linje, ikke i hver sin boks. */
.pd-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    font-size: .84rem;
    color: #6B7280;
}

.pd-facts li { display: flex; align-items: center; gap: 7px; }

.pd-facts li::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #C7CBD3;
}

/* Pris per stk etter antall — raden som gjelder nå er uthevet. */
.pd-tiers {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid #E5E8ED;
    border-radius: 10px;
    background: #fff;
}

.pd-tiers-title {
    display: block;
    margin-bottom: 6px;
    font-size: .74rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #9CA3AF;
}

.pd-tiers ul { margin: 0; padding: 0; list-style: none; }

.pd-tiers li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: .88rem;
    color: #6B7280;
}

.pd-tiers li.active {
    background: #F5F6F8;
    color: #1F2937;
}

.pd-tiers li.active strong { color: #DC2626; }

/* Minste opplag på Antigro-produkter — de har sin egen antallsrad. */
.pd-minqty {
    margin: 0 0 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #F5F6F8;
    border: 1px solid #E5E8ED;
    font-size: .84rem;
    color: #4B5563;
}

/* Kurven */
.cart-item-image.is-generating { position: relative; }

.cart-item-image.is-generating img {
    opacity: .35;
    filter: grayscale(.4);
}

.antigro-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 2px solid rgba(17, 17, 17, .15);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: antigro-snurr .8s linear infinite;
}

@keyframes antigro-snurr { to { transform: rotate(360deg); } }

/* Respekter at noen slår av animasjoner i systemet. */
@media (prefers-reduced-motion: reduce) {
    .antigro-spinner { animation-duration: 3s; }
}

.antigro-edit { display: inline; }

.antigro-edit button {
    background: none;
    border: 0;
    padding: 0;
    margin-left: 8px;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* ── Favoritter ───────────────────────────────────────────────────────
   Hjertet ligger oppe til venstre på produktkortet — motsatt hjørne av
   admin-knappene, så de to aldri kolliderer. */
.fav-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--muted);
    cursor: pointer;
    line-height: 0;
    text-decoration: none;
    transition: color .12s ease, border-color .12s ease, transform .12s ease;
}

.fav-btn svg {
    width: 19px;
    height: 19px;
    fill: none;
}

.fav-btn:hover { color: var(--brand); border-color: var(--brand); }
.fav-btn:active { transform: scale(.92); }

.fav-btn.is-fav {
    color: var(--brand);
    border-color: var(--brand);
}

/* Fylt hjerte når produktet er lagret */
.fav-btn.is-fav svg { fill: currentColor; }

/* Knappen på produktsiden er bred, med tekst */
.pd-fav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: static;
    width: auto;
    height: auto;
    padding: 9px 16px;
    margin: 12px 0 4px;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
}

.pd-fav.is-fav { color: var(--brand); }

/* ── Adminlinje på kategorisiden: legg produkt i kategorien ───────────
   Vises bare for innlogget Nova-bruker (se ShopController::category). */
.admin-catbar {
    position: relative;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px dashed var(--brand);
    border-radius: var(--radius);
    background: var(--brand-soft);
}

.admin-catbar-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text);
}

.admin-catbar-merke {
    background: var(--brand);
    color: #fff;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
}

.admin-catbar-sok {
    width: 100%;
    max-width: 520px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    font: inherit;
}

.admin-catbar-treff {
    max-width: 520px;
    margin-top: 8px;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.admin-catbar-rad {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
}

.admin-catbar-rad:last-child { border-bottom: 0; }

.admin-catbar-rad img,
.admin-catbar-ubilde {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--surface);
    flex: 0 0 auto;
}

.admin-catbar-navn {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    font-size: .88rem;
    line-height: 1.25;
}

.admin-catbar-navn small { color: var(--muted); font-size: .76rem; }

.admin-catbar-knapp,
.admin-catbar-oppdater {
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid var(--brand);
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}

.admin-catbar-knapp.er-lagt-til {
    background: var(--success);
    border-color: var(--success);
    cursor: default;
}

.admin-catbar-oppdater { margin-top: 10px; }

.admin-catbar-tom {
    margin: 0;
    padding: 12px;
    color: var(--muted);
    font-size: .88rem;
}

/* «Ut av kategorien» — angreknappen, under «Skjul» i samme hjørne */
.admin-uncat {
    position: absolute;
    top: 46px;
    right: 12px;
    z-index: 2;
    background: rgba(17, 17, 17, .82);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    opacity: 0;
    transition: opacity .12s ease, background .12s ease;
}

.product-card:hover .admin-uncat,
.product-card:focus-within .admin-uncat { opacity: 1; }

.admin-uncat:hover { background: var(--brand); }

@media (hover: none) {
    .admin-uncat { opacity: 1; }
}

/* Leverandørknappene i adminlinja på kategorisiden */
.admin-catbar-kilder {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.admin-catbar-kilde {
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.admin-catbar-kilde:hover { border-color: var(--brand); color: var(--brand); }

.admin-catbar-kilde.er-valgt {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* ── Sorteringsmodus på kategorisiden (admin) ─────────────────────────
   Kortene er lenker: i sorteringsmodus slås klikk av på hele kortet, så
   et bomtreff ikke sender deg til produktsiden midt i sorteringen. */
.admin-catbar-sorter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.admin-catbar-lagre {
    background: var(--ink);
    border-color: var(--ink);
}

.admin-catbar-hint {
    font-size: .82rem;
    color: var(--muted);
}

/* Kortet er ellers uten posisjon — knapperaden trenger et anker. */
.product-card { position: relative; }

.card-sort {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 3;
    display: none;
    gap: 4px;
}

/* Selve rada er dra-flata i sorteringsmodus — se listevisningen lenger nede,
   som setter pointer-events: auto og skrur av lenkeklikket i JS. */
.product-grid.sorter-modus .product-card .card-sort { pointer-events: auto; display: flex; }

.card-sort span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.card-sort span:hover { background: var(--brand); }

/* Produkter du har plassert selv — synlig også utenfor sorteringsmodus */
.product-grid.sorter-modus .product-card.er-festet {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

/* ── Sorteringsmodus: kompakt liste med dra og slipp ──────────────────── */
/* Rutenettet blir en tett liste mens du sorterer: 129 produkter blir noen
   skjermlengder i stedet for seks sider, «opp» og «ned» betyr det de ser ut
   som, og dragavstanden blir kort. Kortene er de samme <a>-ene som ellers —
   bare stylet om — så data-attributtene og lagringen er uendret. */
.product-grid.sorter-modus {
    display: block;
    max-width: 940px;
}

.product-grid.sorter-modus .product-card {
    display: grid;
    grid-template-columns: auto 46px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin: 0 0 6px;
    padding: 6px 168px 6px 8px;
    pointer-events: auto;      /* hele rada er dra-flate */
    cursor: grab;
    touch-action: none;        /* ellers scroller mobilen i stedet for å dra */
    user-select: none;
    transform: none;
}
.product-grid.sorter-modus .product-card:hover { transform: none; box-shadow: none; }
.product-grid.sorter-modus .product-card.drar {
    cursor: grabbing;
    box-shadow: var(--shadow);
    border-color: var(--brand);
    opacity: .95;
}

.product-grid.sorter-modus .product-card-image {
    position: static;          /* «Løsne fra toppen» ankres til hele rada */
    height: 46px;
    padding: 0;
    overflow: visible;
}
.product-grid.sorter-modus .product-card-body {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    padding: 0;
    min-width: 0;
}
.product-grid.sorter-modus .product-card-name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-grid.sorter-modus .product-card-brand { flex: none; }
.product-grid.sorter-modus .product-card-meta { flex: none; }

/* Pris, farge-serie, hjerte og skjul-knapp er støy når du bare sorterer. */
.product-grid.sorter-modus .product-card-price,
.product-grid.sorter-modus .product-card-series,
.product-grid.sorter-modus .fav-btn,
.product-grid.sorter-modus .admin-hide,
.product-grid.sorter-modus .badge-featured,
.product-grid.sorter-modus .badge-hidden { display: none; }

.product-grid.sorter-modus .admin-uncat {
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    opacity: 1;
}

/* Knapperada ligger først i rada, ikke oppå kortet. */
.product-grid.sorter-modus .card-sort {
    position: static;
    display: flex;
    align-items: center;
    gap: 4px;
}
.product-grid.sorter-modus .card-sort .sort-grep {
    background: none;
    color: var(--muted);
    cursor: grab;
    min-width: 18px;
    font-size: 1rem;
}
.product-grid.sorter-modus .card-sort .sort-grep:hover { background: none; color: var(--ink); }
.product-grid.sorter-modus .card-sort .sort-nr {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    min-width: 34px;
    font-variant-numeric: tabular-nums;
}
.product-grid.sorter-modus .card-sort .sort-nr:hover { background: var(--brand); color: #fff; }

/* Skillelinja: over den bestemmer du rekkefølgen, under ligger resten. */
.sort-skille {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 12px;
    padding: 9px 12px;
    border: 1px dashed var(--brand);
    border-radius: var(--radius);
    background: var(--brand-soft, #FDECEA);
    color: var(--ink);
    font-size: .82rem;
    font-weight: 600;
}

body.sorter-drar { cursor: grabbing; }

/* ── Brede skjermer ───────────────────────────────────────────────────── */
/* Innholdsbredden er 1440px (--container). På virkelig brede skjermer skal
   den ekstra plassen gi FLERE produkter per rad, ikke større kort. */
@media (min-width: 1440px) {
    .cart-layout,
    .checkout-layout { grid-template-columns: minmax(0, 1fr) 420px; }
    .contact-layout { grid-template-columns: minmax(0, 1fr) 380px; }
}

@media (min-width: 1660px) {
    :root { --container: 1560px; }

    .product-grid,
    .cat-grid { grid-template-columns: repeat(5, 1fr); }
    .shop-layout.has-filters .product-grid { grid-template-columns: repeat(4, 1fr); }
}