/* ============================================================
   DIGIPOS THEME — Kjepphest AS
   Primærfarge: #6B4C2A (lærbrunt)
   Sekundærfarge: #2D4A1E (skoggrønt)
   Arketype: REFINED
   ============================================================ */

:root {
    /* Primærfarge — lærbrunt */
    --color-primary:        #6B4C2A;
    --color-primary-light:  #8B6A42;
    --color-primary-dark:   #4E3620;
    --color-primary-subtle: #F5EFE6;

    /* Sekundærfarge — skoggrønt */
    --color-secondary:      #2D4A1E;
    --color-secondary-light:#3D6228;
    --color-secondary-subtle:#EBF2E8;
    /* BugReport #479 — lesbare varianter, se @supports under :root */
    --color-secondary-ink:  var(--color-secondary);
    --color-on-secondary:   #fff;
    /* Backlog #256 — tekst på USP-bar/nyhetsbrev følger bakgrunnen, se @supports */
    --dp-usp-text:          #fff;
    --dp-newsletter-text:   #fff;

    /* Nøytrale */
    --color-bg:      #FAFAF8;
    --color-bg-2:    #F2EDE6;
    --color-bg-3:    #E8DDD0;
    --color-surface: #FFFFFF;
    --color-border:  #E0D5C8;

    /* Tekst */
    --color-text:        #1C1A17;
    --color-muted:       #6B6560;
    --color-text-muted:  #6B6560;
    --color-text-subtle: #9E9890;
    --color-dark:        #1A1A1A;

    /* Typografi */
    --font-heading: 'Georgia', 'Times New Roman', serif;
    --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    'Courier New', monospace;

    /* Størrelser */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;

    /* Spacing */
    --space-1:  0.25rem;
    --space-1-5: 0.375rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-7:  1.75rem;
    --space-8:  2rem;
    --space-9:  2.25rem;
    --space-10: 2.5rem;
    --space-11: 2.75rem;
    --space-12: 3rem;
    --space-13: 3.25rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Layout */
    --container-max:    1280px;
    --container-narrow: 860px;
    --header-height:    72px;

    /* Radius */
    --radius-sm:  4px;
    --radius:     8px;
    --radius-lg:  12px;
    --radius-xl:  20px;
    --radius-2xl: 28px;
    --radius-full: 999px;

    /* Skygger */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow:    0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

    /* Transitions */
    --transition: 0.2s ease;
}

/* BugReport #479 — kunden velger sekundærfargen selv, og 7 av 17 butikker hadde en lys
   farge (hvit, beige). Den står både som tekst på hvit bakgrunn («Se alle», ikoner) og
   bak hvit tekst («Nyhet»-merket), og ble usynlig. ink = samme farge, men aldri lysere
   enn L 0.55 (≥ 4.5:1 mot hvitt); on = hvit tekst på mørk, nesten svart på lys
   bakgrunn. Mørke sekundærfarger blir uendret. */
@supports (color: oklch(from red l c h)) {
    :root {
        --color-secondary-ink: oklch(from var(--color-secondary) min(l, 0.55) c h);
        --color-on-secondary:  oklch(from var(--color-secondary) clamp(0.2, (0.68 - l) * 1000, 1) 0 0);
        /* Backlog #256 — samme regel for USP-bar, nyhetsbrev og stripen øverst: kunden
           velger bare bakgrunn. --dp-topbar-bg finnes bare når kunden har valgt en farge;
           ellers er --dp-topbar-text ugyldig og stripen beholder dagens tekstfarge. */
        --dp-usp-text:        oklch(from var(--dp-usp-bg, var(--color-secondary)) clamp(0.2, (0.68 - l) * 1000, 1) 0 0);
        --dp-newsletter-text: oklch(from var(--dp-newsletter-bg, var(--color-secondary)) clamp(0.2, (0.68 - l) * 1000, 1) 0 0);
        --dp-topbar-text:     oklch(from var(--dp-topbar-bg) clamp(0.2, (0.68 - l) * 1000, 1) 0 0);
    }
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; overflow-x: clip; }
body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
main { display: block; margin-bottom: 0; padding-bottom: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── Layout ── */
.dp-container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

/* ── HEADER — CSS-kroker (overstyres av child) ── */
.dp-header {
    --dp-header-bg:           var(--color-surface);
    --dp-header-bg-scrolled:  var(--color-surface);
    --dp-header-ink:          var(--color-text);
    --dp-header-border:       var(--color-border);
    --dp-header-shadow:       var(--shadow);
    --dp-header-height:       80px;
    --dp-header-height-scrolled: 62px;
    --dp-logo-size:           40px;
    --dp-logo-size-scrolled:  32px;
    --dp-header-ink-hero:     #fff;

    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--dp-header-bg);
    border-bottom: 1px solid var(--dp-header-border);
    height: var(--dp-header-height);
    transition: height 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.dp-header.scrolled {
    height: var(--dp-header-height-scrolled);
    background: var(--dp-header-bg-scrolled);
    box-shadow: var(--dp-header-shadow);
    border-bottom-color: transparent;
}
.dp-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    height: 100%;
}

/* Variant: TOPBAR — tynn infobar over standard header */
.dp-header--topbar { --dp-header-height: 110px; --dp-header-height-scrolled: 62px; }
.dp-topbar {
    height: 30px;
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: 0;
    border-bottom: 1px solid var(--dp-header-border);
    font-size: var(--text-xs);
    background: var(--dp-topbar-bg, transparent);
    color: var(--dp-topbar-text, var(--color-text-muted));
    transition: height 0.2s ease, opacity 0.2s ease;
    overflow: hidden;
    width: 100%;
}
.dp-topbar__item { display: flex; align-items: center; gap: var(--space-2); }
.dp-topbar__item svg { flex-shrink: 0; opacity: .7; width: 14px; height: 14px; }
.dp-topbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-6); }
.dp-header--topbar.scrolled .dp-topbar { height: 0; opacity: 0; pointer-events: none; }
.dp-header--topbar .dp-header__inner { height: 80px; }
.dp-header--topbar.scrolled .dp-header__inner { height: var(--dp-header-height-scrolled); }

/* Variant: SEARCH — topbar · logo+søkefelt+ikoner · nav i egen rad (à la Fjellsport) */
.dp-header--search .dp-header__search-mobile { display: none; }
.dp-header--search .dp-cart-btn {
    background: none;
    color: var(--color-text);
    padding: var(--space-2);
    border-radius: var(--radius);
    font-weight: 400;
}
.dp-header--search .dp-cart-btn:hover { background: var(--color-bg-2); }
.dp-header--search .dp-cart-count,
.dp-header--search .dp-wishlist-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    background: var(--color-primary);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.dp-header--search .dp-cart-wrap { position: relative; }


.dp-header--search {
    --dp-header-height: 148px;
    --dp-header-height-scrolled: 108px;
    height: auto;
    overflow: visible;
}
/* Ingen synlige skillelinjer mellom radene */
.dp-header--search { border-bottom: none; }
.dp-header--search .dp-topbar {
    border-bottom: none;
    background: var(--dp-topbar-bg, #f3f3f1);
}
.dp-header--search.scrolled .dp-topbar { height: 0; opacity: 0; pointer-events: none; }
.dp-header--search .dp-header__nav-row { border-top: none; }

/* Logo | søkefelt (fyller alt) | ikoner — samme bredde som container */
.dp-header--search .dp-header__main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-8);
    height: 80px;
}
.dp-header--search .dp-search-bar {
    position: relative;
    min-width: 0;
}
.dp-header--search .dp-search-bar.dp-search-trigger--bar {
    display: flex;
    align-items: center;
    width: 100%;
    height: 46px;
    padding: 0 1.25rem 0 3rem;
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    font-size: var(--text-base);
    font-family: inherit;
    background: #f6f6f6;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition), background var(--transition);
    color: var(--color-text-subtle);
}
.dp-header--search .dp-search-bar.dp-search-trigger--bar:hover,
.dp-header--search .dp-search-bar.dp-search-trigger--bar:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    background: #ffffff;
}
.dp-header--search .dp-search-bar .dp-search-icon {
    left: 1rem;
    color: var(--color-text-subtle);
}
/* Ikoner — større og mer luft */
.dp-header--search .dp-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.dp-header--search .dp-header__actions .dp-cart-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dp-header--search .dp-header__actions svg { width: 24px; height: 24px; }
.dp-header--search .dp-header__nav-row {
    display: flex;
    align-items: stretch;
    padding-top: var(--space-3);
    padding-bottom: var(--space-5);
}
.dp-header--search .dp-header__nav-row .dp-container {
    display: flex;
    align-items: center;
    width: 100%;
}
.dp-header--search .dp-nav { flex: 1; }
.dp-header--search .dp-nav ul { gap: 0; }
.dp-header--search .dp-nav a {
    padding: 0 var(--space-4);
    height: auto;
    display: flex;
    align-items: center;
    font-size: var(--text-sm);
    font-weight: 500;
    border-radius: 0;
    white-space: nowrap;
}
.dp-header--search .dp-nav a:hover,
.dp-header--search .dp-nav .current-menu-item > a { background: none; }
/* Kompenser for intern padding i nav-lenker så Butikk flukter med logo */
.dp-header--search .dp-nav > ul > li:first-child > a { padding-left: 0; }
.dp-header--search .dp-nav--right { margin-left: auto; flex: 0; }
.dp-header--search .dp-nav--right a { color: var(--color-text-subtle); font-weight: 400; }
.dp-header--search .dp-menu-toggle { display: none; }

/* Variant: CENTERED — nav venstre · logo midtstilt · actions høyre */
.dp-header--centered { --dp-header-height: 88px; --dp-header-height-scrolled: 60px; }
.dp-header--centered .dp-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}
.dp-header--centered .dp-nav--left { justify-self: end; }
/* Se header.php: over 4 hovedpunkter samles kategoriene i «Vareutvalg». */
.dp-nav--left > ul > li > a { white-space: nowrap; }
.dp-header--centered .dp-logo { justify-self: center; }
.dp-header--centered .dp-header__actions { justify-self: end; }

/* Variant: MINIMAL — ingen desktop nav, hamburger åpner drawer */
.dp-header--minimal .dp-nav { display: none; }
.dp-header--minimal .dp-menu-toggle { display: flex; }
.dp-header--minimal .dp-header__inner { justify-content: space-between; }

/* Transparent over hero (minimal + is-transparent) */
.dp-header--minimal.is-transparent:not(.scrolled) {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    position: absolute;
    width: 100%;
}
.dp-header--minimal.is-transparent:not(.scrolled) .dp-logo,
.dp-header--minimal.is-transparent:not(.scrolled) .dp-cart-btn,
.dp-header--minimal.is-transparent:not(.scrolled) .dp-search-toggle,
.dp-header--minimal.is-transparent:not(.scrolled) .dp-menu-toggle { color: var(--dp-header-ink-hero); }

.dp-logo {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}
/* object-fit: mobile.css klemmer bredden (max-width:100%) mens høyden står fast —
   uten contain blir brede logoer forvrengt på smale telefoner (BugReport #422). */
.dp-logo img { height: var(--dp-logo-size); width: auto; object-fit: contain; transition: height 0.2s ease; }
.dp-header.scrolled .dp-logo img { height: var(--dp-logo-size-scrolled); }

.dp-nav { flex: 1; position: relative; }
.dp-nav > ul { display: flex; gap: var(--space-1); list-style: none; }
.dp-nav a {
    display: block;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    border-radius: var(--radius);
    transition: color var(--transition), background var(--transition);
}
.dp-nav > ul > li > a:hover,
.dp-nav .current-menu-item > a { color: var(--color-primary); background: var(--color-primary-subtle); }

/* ── Dropdown ── */
.dp-nav__item { position: relative; }
.dp-nav__item > a {
    display: flex;
    align-items: center;
    gap: 4px;
}
.dp-nav__chevron {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform 0.2s;
    opacity: 0.5;
}
.dp-nav__item:hover .dp-nav__chevron,
.dp-nav__item.is-open .dp-nav__chevron { transform: rotate(180deg); opacity: 1; }

.dp-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    padding: 6px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    z-index: 200;
}
.dp-dropdown li a {
    display: block;
    padding: 8px 12px;
    font-size: var(--text-sm);
    color: var(--color-text);
    border-radius: var(--radius);
    white-space: nowrap;
    background: none;
}
.dp-dropdown li a:hover { background: var(--color-primary-subtle); color: var(--color-primary); }
.dp-nav__item:hover .dp-dropdown,
.dp-nav__item.is-open .dp-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ── Mega menu ── */
.dp-nav__item--mega { position: static; }
.dp-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,0.11);
    padding: 24px 32px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    z-index: 200;
}
.dp-nav__item--mega:hover .dp-mega,
.dp-nav__item--mega.is-open .dp-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dp-mega__header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}
.dp-mega__header a {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text);
    padding: 0;
    background: none !important;
}
.dp-mega__header a:hover { color: var(--color-primary); }
.dp-mega__view-all {
    font-size: var(--text-xs);
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
}
.dp-mega__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 4px;
    list-style: none;
}
.dp-mega__grid li a {
    display: block;
    padding: 7px 10px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    border-radius: var(--radius);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: none;
}
.dp-mega__grid li a:hover { background: var(--color-primary-subtle); color: var(--color-primary); }

.dp-header__actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }

/* Mobil-only kontroller — slås på i mobile.css @≤768 */
.dp-menu-toggle,
.dp-search-toggle { display: none; }

/* Søk — .dp-search-trigger er en <button>, ikke et <input>: den skriver man
   aldri i, den åpner kun søkeoverlayet (som har det ene, ekte tekstfeltet).
   Se assets/js/theme.js og mobile.css/.dp-search-overlay for resten. */
.dp-search-wrap { position: relative; }
.dp-search-trigger {
    display: flex;
    align-items: center;
    width: 240px;
    padding: var(--space-2) var(--space-4) var(--space-2) 2.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: var(--text-sm);
    font-family: inherit;
    background: var(--color-bg);
    color: var(--color-text-subtle);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition), background var(--transition);
}
.dp-search-trigger:hover,
.dp-search-trigger:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-surface);
}
.dp-search-trigger__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dp-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-subtle);
    pointer-events: none;
}
/* .dp-search-results er kun JS-target/wrapper (kan inneholde et
   .dp-search-layout med kategorier/merker/forslag ved siden av produktene,
   se FASE 6/theme.js) — selve produktgridet er .dp-search-results__grid.
   Se assets/css/mobile.css for overlay-layoutet (canvas/fullskjerm, alle
   breakpoints). */
.dp-search-results__grid {
    display: grid;
    /* Fast 6 kolonner (ikke auto-fill) — overlayet skal alltid vise topp 6 i
       ÉN rad, ikke wrappe til flere. "Vis alle X treff" tar deg til full
       søkeresultat-side for resten. */
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-6) var(--space-4);
}
.dp-search-no-results {
    grid-column: 1 / -1;
    padding: var(--space-6) 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}
.dp-search-overlay__view-all {
    grid-column: 1 / -1;
    display: block;
    text-align: center;
    padding: var(--space-4) 0 0;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: underline;
}

/* Mini-handlekurv */
.dp-cart-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary);
    color: white;
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: background var(--transition);
}
.dp-cart-btn:hover { background: var(--color-primary-dark); }
.dp-cart-count,
.dp-wishlist-count {
    min-width: 20px;
    height: 20px;
    background: white;
    color: var(--color-primary);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
/* display:flex over overstyrer hidden-attributtet — ellers vises "0" alltid. */
.dp-wishlist-count[hidden] { display: none; }

/* Mini-cart dropdown */
/* Mini-kurv — drawer fra høyre */
.dp-minicart {
    position: fixed; top: 0; right: 0; height: 100%; width: 400px; max-width: 92vw;
    background: var(--color-surface); z-index: 300;
    transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column;
    border-left: 1px solid var(--color-border);
}
.dp-minicart.is-open { transform: translateX(0); }
.dp-minicart__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.dp-minicart__header h2 { font-family: var(--font-heading); font-size: var(--text-xl); margin: 0; }
.dp-minicart__close { background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: var(--space-2); display: flex; align-items: center; }
.dp-minicart__close:hover { color: var(--color-text); }
.dp-minicart__items { flex: 1; overflow-y: auto; padding: var(--space-2) var(--space-6); }
.dp-minicart__item {
    display: grid; grid-template-columns: 64px 1fr auto; gap: var(--space-4);
    align-items: start; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border);
}
.dp-minicart__item img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius); }
.dp-minicart__name { font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }
.dp-minicart__meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 4px; }
.dp-minicart__price { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); margin-top: 4px; }
.dp-minicart__remove { color: var(--color-text-subtle); font-size: var(--text-lg); line-height: 1; background: none; border: none; cursor: pointer; padding: 0; }
.dp-minicart__remove:hover { color: #c0392b; }
.dp-minicart__footer {
    border-top: 1px solid var(--color-border);
    padding: var(--space-5) var(--space-6) calc(var(--space-5) + env(safe-area-inset-bottom));
    flex-shrink: 0;
}
.dp-minicart__total { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: var(--space-4); font-size: var(--text-lg); }
.dp-minicart__checkout { width: 100%; justify-content: center; }
.dp-minicart__continue { display: block; width: 100%; margin-top: var(--space-3); padding: var(--space-2); background: none; border: none; cursor: pointer; font: inherit; font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.dp-minicart__continue:hover { color: var(--color-text); }
.dp-minicart__view-cart { display: block; text-align: center; margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; }
.dp-minicart__view-cart:hover { color: var(--color-text); }
.dp-minicart__empty { padding: var(--space-8) var(--space-6); text-align: center; color: var(--color-text-muted); }

/* ── Knapper ── */
.dp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 600;
    transition: all var(--transition);
    cursor: pointer;
    border: 2px solid transparent;
    white-space: nowrap;
}
.dp-btn-primary {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}
.dp-btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.dp-btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.dp-btn-secondary:hover { background: var(--color-primary-subtle); }
.dp-btn-lg { padding: 1rem 2rem; font-size: var(--text-base); }
.dp-btn-sm { padding: 0.5rem 1rem; font-size: var(--text-xs); }
.dp-btn-full { width: 100%; }
/* Outline — nøytral transparent variant (brukt i retur, hero-sekundær) */
.dp-btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.dp-btn-outline:hover { background: var(--color-primary-subtle); }
/* Ghost — svak nøytral variant (brukt i handlekurv, tilbake-lenker) */
.dp-btn-ghost {
    background: transparent;
    color: var(--color-text-muted);
    border-color: var(--color-border);
}
.dp-btn-ghost:hover { border-color: var(--color-text-muted); color: var(--color-text); }

/* ── HERO ── */
.dp-hero {
    position: relative;
    min-height: 580px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--color-bg-2);
}
.dp-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.dp-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(28,26,23,0.65) 0%, rgba(28,26,23,0.2) 60%, transparent 100%);
}
.dp-hero__bg--video { background: #111; }
.dp-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Hero-slides (#28) — .dp-hero__slide er display:contents (usynlig i DOM-flyten)
   for det vanlige ett-hero-tilfellet, slik at eksisterende layout ikke endres i
   det hele tatt. Kun når .dp-hero--slider er satt (2+ aktive slides) blir hver
   slide en egen, absolutt posisjonert crossfade-lag. */
.dp-hero__slide { display: contents; }
.dp-hero--slider .dp-hero__slide {
    display: flex;
    align-items: center;
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease;
    pointer-events: none;
}
.dp-hero--slider .dp-hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.dp-hero__dots {
    position: absolute;
    z-index: 2;
    bottom: var(--space-5);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--space-2);
}
.dp-hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.45);
    cursor: pointer;
    padding: 0;
    transition: background .2s;
}
.dp-hero__dot.is-active { background: #fff; }
.dp-hero__arrow,
.dp-hero-slider__arrow {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.3);
    cursor: pointer;
    padding: 0;
    transition: background .2s;
}
.dp-hero__arrow:hover,
.dp-hero-slider__arrow:hover { background: rgba(0,0,0,.5); }
.dp-hero__arrow::before,
.dp-hero-slider__arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
.dp-hero__arrow--prev,
.dp-hero-slider__arrow--prev { left: var(--space-4); }
.dp-hero__arrow--prev::before,
.dp-hero-slider__arrow--prev::before { transform: translate(-30%,-50%) rotate(-135deg); }
.dp-hero__arrow--next,
.dp-hero-slider__arrow--next { right: var(--space-4); }
.dp-hero__arrow--next::before,
.dp-hero-slider__arrow--next::before { transform: translate(-70%,-50%) rotate(45deg); }
@media (max-width: 768px) {
    .dp-hero__arrow,
    .dp-hero-slider__arrow { width: 34px; height: 34px; }
}
.dp-hero__content {
    position: relative;
    z-index: 1;
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}
.dp-hero__text {
    max-width: 560px;
}
.dp-hero__eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: var(--space-4);
}
.dp-hero__title {
    font-family: var(--font-heading);
    font-size: var(--text-5xl);
    font-weight: 700;
    color: white;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-5);
}
.dp-hero__subtitle {
    font-size: var(--text-lg);
    color: rgba(255,255,255,0.85);
    margin-bottom: var(--space-8);
    line-height: 1.5;
}
.dp-hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ── HERO BANNER (midtseksjon) ── */
.dp-hero-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--color-bg-3);
}
.dp-hero-banner__img {
    display: block;
    width: 100%;
    height: var(--hero-banner-height, 60vh);
    object-fit: cover;
    object-position: center;
}
.dp-hero-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.58) 0%,
        rgba(0,0,0,0.28) 40%,
        transparent 70%
    );
    pointer-events: none;
}
.dp-hero-banner__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px 36px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.dp-hero-banner__eyebrow {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    margin: 0 0 10px;
}
.dp-hero-banner__title {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    max-width: 520px;
}
.dp-hero-banner__subtitle {
    font-size: var(--text-base);
    color: rgba(255,255,255,0.88);
    margin: 0 0 24px;
    max-width: 420px;
    line-height: 1.5;
}
.dp-hero-banner__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.dp-hero-banner__btn {
    display: inline-flex;
    align-items: center;
    padding: 13px 28px;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    line-height: 1;
}
.dp-hero-banner__btn--primary {
    background: #fff;
    color: #111;
    border: 2px solid #fff;
}
.dp-hero-banner__btn--primary:hover {
    background: transparent;
    color: #fff;
}
.dp-hero-banner__btn--outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.7);
}
.dp-hero-banner__btn--outline:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.1);
}
/* Innrammet (backlog #234) — samme bredde, marg og hjørner som
   .dp-campaign-banner--framed. Overlegg og tekst trekkes inn til bildet,
   ellers ville gradienten (inset: 0) lagt seg over sidemargen og de
   avrundede hjørnene. */
.dp-hero-banner--framed {
    max-width: var(--container-max);
    /* Bug #473 — innrammet banner er et kort, ikke en flate fra kant til kant,
       og trenger samme luft som .dp-section. Uten den lå bildet klistret til
       neste modul når den har bakgrunnsfarge (f.eks. «Om oss»-teaseren). */
    margin: var(--space-12) auto;
    padding: 0 var(--space-6);
    background: transparent;
}
.dp-hero-banner--framed .dp-hero-banner__img {
    border-radius: var(--radius-lg, 12px);
    background: var(--color-bg-3);
}
.dp-hero-banner--framed .dp-hero-banner__overlay {
    left: var(--space-6);
    right: var(--space-6);
    border-radius: var(--radius-lg, 12px);
}
/* Bug #487 — innrammet skal gjøre banneret mindre, ikke beskjære mer. Med
   samme høyde som kant-til-kant i en smalere boks kuttet object-fit: cover
   sidene (1440×900, 70vh, 2048×768-bilde: 27 % borte innrammet mot 14 % kant
   til kant). Nå følger høyden bildets eget format, med valgt høyde som tak.
   Grid legger teksten i samme celle som bildet, så banneret aldri blir
   lavere enn teksten trenger. */
.dp-hero-banner--framed {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}
.dp-hero-banner--framed .dp-hero-banner__img,
.dp-hero-banner--framed .dp-hero-banner__content {
    grid-area: 1 / 1;
}
.dp-hero-banner--framed .dp-hero-banner__img {
    align-self: stretch;
    height: auto;
    aspect-ratio: auto 3 / 1;
    max-height: var(--hero-banner-height, 60vh);
}
.dp-hero-banner--framed .dp-hero-banner__content {
    position: relative;
    align-self: end;
}
@media (max-width: 768px) {
    .dp-hero-banner--framed .dp-hero-banner__img {
        max-height: var(--hero-banner-height-mobile, 45vh);
    }
}

/* ── HERO SLIDER (reklame-rundell, backlog #28) ── */
.dp-hero-slider {
    position: relative;
    height: var(--hero-slider-height, 60vh);
    overflow: hidden;
    background: var(--color-bg-2);
}
.dp-hero-slider__slide { display: contents; }
.dp-hero-slider--multi .dp-hero-slider__slide {
    display: block;
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease;
    pointer-events: none;
}
.dp-hero-slider--multi .dp-hero-slider__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.dp-hero-slider__link,
.dp-hero-slider__picture { display: block; width: 100%; height: 100%; }
.dp-hero-slider__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* ── HERO SLIDER: tekst og knapp oppå bildet (#207) ──────────────────
   Gjenbruker uttrykket fra vanlig Hero. Slides uten tekst rendrer ingen av
   disse elementene i det hele tatt og er derfor uendret.

   MERK: .dp-hero-slider__slide er `display:contents` når det kun er ÉN slide,
   så overlegget posisjoneres mot .dp-hero-slider (som er position:relative).
   Med flere slides er sliden selv absolutt plassert, og overlegget følger den.
   Begge tilfeller gir samme plassering — derfor inset:0 på overlegget selv. */
.dp-hero-slider__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-10) var(--space-8);
    pointer-events: none;
    /* Lesbarhetsgradient — teksten må tåle et lyst motiv uten å dekke det. */
    background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 38%, rgba(0,0,0,0) 72%);
}
.dp-hero-slider__title {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
    max-width: 640px;
    text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.dp-hero-slider__subtitle {
    font-size: var(--text-lg);
    color: rgba(255,255,255,0.9);
    line-height: 1.45;
    margin: 0;
    max-width: 560px;
    text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
.dp-hero-slider__btn {
    pointer-events: auto;
    display: inline-block;
    margin-top: var(--space-2);
    padding: 12px 26px;
    border-radius: var(--radius-md, 10px);
    background: var(--color-primary);
    color: #fff;
    font-size: var(--text-base);
    font-weight: 600;
    text-decoration: none;
}
.dp-hero-slider__btn:hover { filter: brightness(1.06); }

@media (max-width: 767px) {
    /* Mobil: motivet er smalt, så teksten krymper og legger seg tettere i
       bunnen i stedet for å dekke midten av bildet. */
    .dp-hero-slider__content {
        padding: var(--space-6) var(--space-4);
        gap: var(--space-2);
        background: linear-gradient(to top, rgba(0,0,0,.70) 0%, rgba(0,0,0,.34) 46%, rgba(0,0,0,0) 80%);
    }
    .dp-hero-slider__title    { font-size: var(--text-2xl); }
    .dp-hero-slider__subtitle { font-size: var(--text-sm); }
    .dp-hero-slider__btn      { padding: 10px 20px; font-size: var(--text-sm); }
}

/* Pilene og prikkene skal ligge over teksten, ikke under. */
.dp-hero-slider__arrow { z-index: 3; }

.dp-hero-slider__dots {
    z-index: 3;
    position: absolute;
    z-index: 2;
    bottom: var(--space-5);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--space-2);
}
.dp-hero-slider__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.45);
    cursor: pointer;
    padding: 0;
    transition: background .2s;
}
.dp-hero-slider__dot.is-active { background: #fff; }
@media (max-width: 768px) {
    .dp-hero-slider { height: var(--hero-slider-height-mobile, 45vh); }
}

/* ── HERO BILDE (ferdigdesignet bannerbilde, ingen tekstoverlegg) ── */
.dp-hero-image { padding: var(--space-12) 0; }
.dp-hero-image__link { display: block; }
.dp-hero-image__picture { display: block; }
.dp-hero-image__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
}
@media (max-width: 768px) {
    .dp-hero-image { padding: var(--space-8) 0; }
}

/* ── KAMPANJEBANNER (topp/midt/bunn, styrt fra kampanje-modulen) ── */
.dp-campaign-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--color-bg-3);
}
.dp-campaign-banner--framed {
    max-width: var(--container-max);
    margin: var(--space-12) auto; /* samme luft som .dp-hero-banner--framed, bug #473 */
    padding: 0 var(--space-6);
}
.dp-campaign-banner--framed .dp-campaign-banner__img {
    border-radius: var(--radius-lg, 12px);
}
.dp-campaign-banner__img {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
}
/* Bug #486 — kampanjebanneret er ofte et ferdig designet bilde med logo og
   tekst i selve bildet. Fast høyde (400/260 px) med object-fit: cover kuttet
   det: 2048×768 på 1920 px skjerm viste bare 400 av 720 px i høyden, og på
   mobil forsvant nesten halve bredden. Nå vises hele bildet i sitt eget
   format opp til en makshøyde; bare høyere bilder (f.eks. tatt på høykant)
   beskjæres.
   Grid legger teksten i samme celle som bildet, så banneret aldri blir
   lavere enn teksten trenger. Innrammet får samme behandling som Hero
   banner (#234): ingen beige kanter i sidemargen, overlegget følger bildet. */
.dp-campaign-banner--fit {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}
.dp-campaign-banner--fit .dp-campaign-banner__img,
.dp-campaign-banner--fit .dp-campaign-banner__content {
    grid-area: 1 / 1;
}
.dp-campaign-banner--fit .dp-campaign-banner__img {
    align-self: stretch;
    height: auto;
    aspect-ratio: auto 3 / 1;
    max-height: 60vh;
}
.dp-campaign-banner--fit .dp-campaign-banner__content {
    position: relative;
    align-self: end;
}
.dp-campaign-banner--framed {
    background: transparent;
}
.dp-campaign-banner--framed .dp-campaign-banner__img {
    background: var(--color-bg-3);
}
.dp-campaign-banner--framed .dp-campaign-banner__overlay {
    left: var(--space-6);
    right: var(--space-6);
    border-radius: var(--radius-lg, 12px);
}
@media (max-width: 768px) {
    .dp-campaign-banner--fit .dp-campaign-banner__img {
        max-height: 45vh;
    }
}
.dp-campaign-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.58) 0%,
        rgba(0,0,0,0.28) 40%,
        transparent 70%
    );
    pointer-events: none;
}
.dp-campaign-banner__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px 36px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.dp-campaign-banner__title {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    max-width: 520px;
}
.dp-campaign-banner__subtitle {
    font-size: var(--text-base);
    color: rgba(255,255,255,0.88);
    margin: 0 0 20px;
    max-width: 420px;
    line-height: 1.5;
}
.dp-campaign-banner__btn {
    display: inline-flex;
    align-items: center;
    padding: 13px 28px;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-radius: 4px;
    background: #fff;
    color: #111;
    border: 2px solid #fff;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
}
.dp-campaign-banner__btn:hover {
    background: transparent;
    color: #fff;
}

/* ── KAMPANJE-NOTAT (3for2 produktside + handlekurv) ── */
.dp-product-info__campaign-note,
.dp-campaign-note {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: var(--color-secondary-subtle); color: var(--color-secondary-ink);
    border: 1px solid var(--color-secondary-light);
    border-radius: var(--radius); padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm); font-weight: 600; margin-top: var(--space-2);
}
.dp-campaign-note { display: flex; margin: 0 0 var(--space-4); }

/* ── SEKSJONSTITLER ── */
.dp-section { padding: var(--space-16) 0; }
.dp-section--lg { padding: var(--space-24) 0; }
.dp-section--bg { background: var(--color-bg-2); }
.dp-section-header { margin-bottom: var(--space-10); }
.dp-section-header--center { text-align: center; }
.dp-eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}
.dp-section-title {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-3);
}
.dp-section-subtitle { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 560px; }
.dp-section-header--center .dp-section-subtitle { margin: 0 auto; }

/* ── KATEGORIER ── */
.dp-categories { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
/* ── Brand-strip ── */
.dp-brands-section { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.dp-brands-rail {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-1);
}
.dp-brands-rail::-webkit-scrollbar { display: none; }
.dp-brand-card {
    flex: 0 0 140px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3);
    scroll-snap-align: start;
    transition: border-color var(--transition), box-shadow var(--transition);
    text-decoration: none;
}
.dp-brand-card:hover { border-color: var(--color-text); box-shadow: var(--shadow); }
.dp-brand-card img { max-width: 100%; max-height: 44px; object-fit: contain; filter: grayscale(1); transition: filter var(--transition); }
.dp-brand-card:hover img { filter: grayscale(0); }
.dp-brand-card__name { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); text-align: center; }

/* ── Bilderekke / samarbeidspartnere (backlog #92) ── */
.dp-logostrip-section { padding-top: var(--space-10); padding-bottom: var(--space-10); }
/* Overskrift bruker .dp-section__header--center (samme sentrerte mønster
   som resten av siden) + h2-fontregelen fra .dp-section__header h2 — ingen
   egne typografi-overstyringer nødvendig. */
.dp-logostrip__rail {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-6);
}
/* Fast kortstørrelse (uten synlig ramme) rundt hvert logo — slik at partnere
   med ulikt sideforhold/størrelse på opplastet bilde likevel vises like
   store og ryddige ved siden av hverandre. Kunden trenger ikke tenke på
   pikselmål i det hele tatt. Ingen border — kun usynlig layout-boks. */
.dp-logostrip__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 90px;
    padding: var(--space-3);
    box-sizing: border-box;
    transition: transform var(--transition);
}
.dp-logostrip__item:hover { transform: translateY(-2px); }
.dp-logostrip__item img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* ── Promo-bokser ── */
.dp-section--promo { padding-top: 0; }
.dp-promo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: stretch;
}
.dp-promo-grid__stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    /* Stacken strekkes til høyden på .dp-promo-box--large (grid
       align-items:stretch). 2×min-height(248px)+gap treffer ikke alltid
       nøyaktig large sin høyde — space-between fyller differansen jevnt
       i stedet for at den havner som tomrom under siste boks. */
    justify-content: space-between;
}
.dp-promo-box {
    position: relative;
    display: flex;
    align-items: flex-end;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--color-bg-subtle) center/cover no-repeat;
    text-decoration: none;
    color: #fff;
    transition: transform 0.2s ease;
}
.dp-promo-box:hover { transform: translateY(-2px); }
.dp-promo-box--large { min-height: 520px; }
.dp-promo-box--small { min-height: 248px; }
.dp-promo-box__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
}
.dp-promo-box__content {
    position: relative;
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.dp-promo-box__title { font-size: var(--text-2xl); font-weight: 700; line-height: 1.2; margin: 0; color: #fff; }
.dp-promo-box--small .dp-promo-box__title { font-size: var(--text-xl); }
.dp-promo-box__text { font-size: var(--text-sm); opacity: 0.9; margin: 0; }
.dp-promo-box__btn {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 600;
    background: var(--color-primary);
    color: #fff;
    align-self: flex-start;
}
.dp-promo-box__btn--outline {
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
}
@media (max-width: 768px) {
    .dp-promo-grid { grid-template-columns: 1fr; }
    .dp-promo-box--large { min-height: 340px; }
    .dp-promo-box--small { min-height: 200px; }
}

.dp-category-rail { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--space-2); }
.dp-category-rail::-webkit-scrollbar { display: none; }
.dp-category-rail .dp-category-card { flex: 0 0 280px; scroll-snap-align: start; }
.dp-category-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 5/7;
    display: flex;
    align-items: flex-end;
    background: var(--color-bg-3);
    transition: transform var(--transition);
}
.dp-category-card:hover { transform: translateY(-4px); }
.dp-category-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
}
.dp-category-card:hover .dp-category-card__bg { transform: scale(1.05); }
.dp-category-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(28,26,23,0.7) 0%, transparent 60%);
}
.dp-category-card__content {
    position: relative;
    z-index: 1;
    padding: var(--space-5);
    width: 100%;
}
.dp-category-card__name {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: white;
    margin-bottom: var(--space-1);
}
.dp-category-card__count { font-size: var(--text-sm); color: rgba(255,255,255,0.7); }

/* ── "Alle kategorier"-side (backlog #94 + QA-fiks Fase 4) ── */
.dp-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}
@media (max-width: 900px) { .dp-category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dp-category-grid { grid-template-columns: 1fr; gap: var(--space-4); } }
.dp-category-card-wrap { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.dp-category-card__bg--fallback {
    display: flex; align-items: center; justify-content: center;
    background: var(--color-bg-3); color: rgba(28,26,23,0.35);
}
.dp-category-card__actions { display: flex; gap: var(--space-2); }
.dp-category-card__action {
    flex: 1; text-align: center; padding: 9px 10px; border-radius: var(--radius);
    font-size: var(--text-sm); font-weight: 600; text-decoration: none; cursor: pointer;
    border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text);
    transition: border-color var(--transition), background var(--transition);
}
.dp-category-card__action:hover { border-color: var(--color-primary); }
.dp-category-card__action--primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.dp-category-card__action--primary:hover { opacity: .92; }
.dp-category-card__action--full { flex: 1 1 100%; }

/* ── PRODUKTGRID ── */
.dp-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    align-items: start;
}
.dp-product-grid > * { min-width: 0; }
.dp-product-grid--4 { grid-template-columns: repeat(4, 1fr); }
.dp-product-grid--6 { grid-template-columns: repeat(6, 1fr); }

.dp-empty-state { text-align: center; padding: var(--space-16) var(--space-6); }
.dp-empty-state__title { font-size: var(--text-xl); font-weight: 700; margin: 0 0 var(--space-2); }
.dp-empty-state__desc { color: var(--color-text-muted); margin: 0 0 var(--space-6); }

/* Pakketeringer / Shop the look (#18) — gjenbruker dp-product-card
   (samme komponent som PLP/Fashion-karuseller) i kompakt variant, i stedet
   for en egen bilde-/kort-implementasjon. Arver dermed automatisk riktig
   bildebehandling (butikkens aspect-ratio/object-fit, se .dp-product-card__image
   i produktkort-seksjonen under) og Fashion-tokens uten egen restyling her.
   Backlog #236: pakken presenteres først som ETT produkt (stort bilde | navn,
   pris, én CTA), og innholdet ligger på langs under «Dette får du i pakken». */
.dp-bundle-list { display: flex; flex-direction: column; gap: var(--space-10); }
.dp-bundle {
    --dp-bundle-item-w: 172px;
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: var(--space-8); background: var(--color-surface); min-width: 0;
}
.dp-bundle__hero {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-10); align-items: center;
}
.dp-bundle--no-media .dp-bundle__hero { grid-template-columns: minmax(0, 1fr); }
.dp-bundle--no-media .dp-bundle__info { max-width: 640px; }
.dp-bundle__media { min-width: 0; }
/* Hele bildet i naturlig format: skaleres proporsjonalt ned til kolonnebredden
   og maks-høyden, beskjæres aldri (kvadratiske pakkebilder mistet ellers
   halve bildet på nettbrettbredde). */
.dp-bundle__image {
    display: block; width: auto; max-width: 100%; height: auto; max-height: 560px;
    margin-inline: auto; border-radius: var(--radius); background: var(--color-bg-2);
}
/* Kollasj når pakken mangler eget bilde. contain, siden produktbildene har ulike formater. */
.dp-bundle__collage {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr);
    gap: var(--space-2); aspect-ratio: 4 / 3;
}
.dp-bundle__collage--1 { grid-template-columns: minmax(0, 1fr); }
.dp-bundle__collage--3 img:first-child { grid-row: span 2; }
.dp-bundle__collage img {
    width: 100%; height: 100%; min-height: 0; object-fit: contain;
    background: var(--color-bg-2); border-radius: var(--radius);
}

.dp-bundle__info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.dp-bundle__eyebrow {
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--color-text-subtle); margin: 0 0 var(--space-2);
}
.dp-bundle__name {
    font-family: var(--font-heading); font-size: clamp(1.5rem, 2.4vw, 2.125rem);
    font-weight: 700; line-height: 1.15; margin: 0; overflow-wrap: anywhere;
}
.dp-bundle__description { color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.7; margin-top: var(--space-4); }
.dp-bundle__description p { margin: 0 0 var(--space-2); }
.dp-bundle__description p:last-child { margin-bottom: 0; }

.dp-bundle__pricing {
    align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1);
    margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border);
}
.dp-bundle__price-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.dp-bundle__price { font-size: var(--text-3xl); font-weight: 700; line-height: 1.15; color: var(--color-primary); }
.dp-bundle__price--regular { color: var(--color-text); }
.dp-bundle__price .woocommerce-price-suffix { font-size: var(--text-sm); font-weight: 400; color: var(--color-text-muted); }
.dp-bundle__price-meta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--space-2) var(--space-3); margin-top: var(--space-1);
}
.dp-bundle__price-ordinary { font-size: var(--text-sm); color: var(--color-text-muted); }
.dp-bundle__price-ordinary del { color: inherit; }
/* inline-block, ikke inline-flex — flex ville spist mellomrommet i «Du sparer 5 600 kr» */
.dp-bundle__saving {
    display: inline-block; padding: 3px 10px; border-radius: var(--radius-full);
    background: var(--color-primary-subtle); color: var(--color-primary-dark);
    font-size: var(--text-sm); font-weight: 700;
}
/* .dp-btn er nowrap — Fashion (versaler + sperring) ville ellers sprengt bredden på mobil */
.dp-bundle__add-all {
    align-self: stretch; margin-top: var(--space-6); min-height: 52px;
    white-space: normal; text-align: center;
}

/* #253 (retting) — variantvalg for variable varer i pakken, over prisen.
   Samme felt-uttrykk som produktsidens variantvalg (.dp-var-select__trigger),
   men som vanlig nedtrekksliste: tilgjengelig med tastatur og skjermleser og
   gir telefonens egen velger på mobil. */
.dp-bundle__choices {
    align-self: stretch; display: flex; flex-direction: column; gap: var(--space-4);
    margin-top: var(--space-6);
}
.dp-bundle__choices-heading { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.dp-bundle__choice { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dp-bundle__choice-name { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.dp-bundle__select {
    -webkit-appearance: none; appearance: none; width: 100%;
    padding: 12px 42px 12px 16px;
    border: 1.5px solid var(--color-border); border-radius: 10px;
    background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 16px;
    color: var(--color-text); font: inherit; font-size: var(--text-base); font-weight: 500;
    cursor: pointer; transition: border-color .15s;
}
.dp-bundle__select:hover,
.dp-bundle__select:focus { border-color: var(--color-text); outline: none; }
.dp-bundle__select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.dp-bundle__choice.is-missing .dp-bundle__select { border-color: var(--color-sale, #c0392b); }
.dp-bundle__choice-status {
    margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3);
    font-size: var(--text-sm);
}
.dp-bundle__choice-status[hidden] { display: none; }
.dp-bundle__choice-price { font-weight: 700; color: var(--color-text); white-space: nowrap; }
.dp-bundle__choice-price del { font-weight: 400; color: var(--color-text-muted); }
.dp-bundle__choice-status .dp-stock-status { margin: 0; font-weight: 500; }
.dp-bundle__choice-unavailable { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.dp-bundle__notice {
    align-self: stretch; margin: var(--space-3) 0 0; padding: 10px 14px;
    border-radius: var(--radius); background: var(--color-bg-2);
    font-size: var(--text-sm); line-height: 1.5; color: var(--color-text);
}
.dp-bundle__notice[hidden] { display: none; }
.dp-bundle__notice--error { color: var(--color-sale, #c0392b); }

.dp-bundle__contents {
    margin-top: var(--space-8); padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}
.dp-bundle__items-heading {
    font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700;
    color: var(--color-text); margin: 0 0 var(--space-5);
}
.dp-bundle__items {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: var(--space-8) var(--space-6);
}
.dp-bundle__item { flex: 0 0 var(--dp-bundle-item-w); min-width: 0; position: relative; }
/* Plasseres ut fra kortbredden og butikkens bildeformat (midt på bildet), ikke
   kortets høyde — ellers flytter plusstegnet seg nedover når navn eller
   bestillingstid brytes over flere linjer. --dp-bundle-img-factor settes i malen. */
.dp-bundle__item:not(:last-child)::after {
    content: '+'; position: absolute; top: calc(var(--dp-bundle-item-w) * var(--dp-bundle-img-factor, 1) / 2);
    right: calc(var(--space-6) / -2); transform: translate(50%, -50%);
    font-size: var(--text-xl); font-weight: 300; line-height: 1;
    color: var(--color-text-subtle); pointer-events: none;
}

/* Kompakt kort inni pakke — samme dp-product-card, ingen per-item-handlinger (pakken har én felles CTA) */
.dp-bundle .dp-product-card__image { margin-bottom: var(--space-3); }
.dp-bundle .dp-product-card__category,
.dp-bundle .dp-product-card__wishlist,
.dp-bundle .dp-product-card__footer { display: none; }
.dp-bundle .dp-product-card__name { font-size: var(--text-sm); margin-bottom: var(--space-1); white-space: normal; overflow: visible; text-overflow: clip; }
/* Hele produktnavnet, uten linjetak — kunden skal se nøyaktig hva pakken inneholder */
.dp-bundle .dp-product-card__name a { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.dp-bundle .dp-product-card__price {
    font-size: var(--text-sm); white-space: normal; overflow: visible;
    text-overflow: clip; line-height: 1.35;
}
.dp-bundle .dp-product-card__price del { display: block; margin-right: 0; }
/* #236 — hele bestillingstiden («Bestillingsvare — Estimert leveringstid: 3 dager»)
   brytes over flere linjer i stedet for å kuttes med «…». */
.dp-bundle .dp-product-card .dp-stock-status--card {
    display: flex; align-items: flex-start; font-size: var(--text-xs); line-height: 1.4;
    white-space: normal; overflow: visible; text-overflow: clip; text-wrap: pretty;
}
.dp-bundle .dp-product-card .dp-stock-status--card::before { margin-top: .45em; }

/* Backlog #253 — kompakt oversikt fra 7 pakker: filter, rutenett med pakkekort,
   og én pakke i full visning om gangen (styres av theme.js, .is-enhanced).
   Uten JS vises både rutenettet og alle pakkene under, og kortene lenker ned. */
.dp-bundle-overview { margin-bottom: var(--space-10); }
.dp-bundle-overview__filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.dp-bundle-overview__filter .dp-cat-chip { cursor: pointer; font-family: inherit; }
.dp-bundle-overview__bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-3); margin: var(--space-4) 0 var(--space-5);
}
.dp-bundle-overview__count { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.dp-bundle-overview__sort { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.dp-bundle-overview__sort select {
    font: inherit; color: var(--color-text); padding: 6px var(--space-3);
    border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface);
}
.dp-bundle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-6); }
.dp-bundle-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0;
    padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    background: var(--color-surface); color: var(--color-text); text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}
.dp-bundle-card:hover { border-color: var(--color-text); box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.dp-bundle-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.dp-bundle-card[hidden] { display: none; }
.dp-bundle-card__media {
    display: block; align-self: stretch; aspect-ratio: 1 / 1; margin-bottom: var(--space-3);
    border-radius: var(--radius); background: var(--color-bg-2); overflow: hidden;
}
.dp-bundle-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dp-bundle-card__eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-subtle); }
.dp-bundle-card__name { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.dp-bundle-card__price { margin-top: var(--space-1); font-size: var(--text-lg); font-weight: 700; color: var(--color-primary); }
.dp-bundle-card__price .woocommerce-price-suffix { font-size: var(--text-xs); font-weight: 400; color: var(--color-text-muted); }
.dp-bundle-card__ordinary { font-size: var(--text-xs); color: var(--color-text-muted); }
.dp-bundle-card__ordinary del { color: inherit; }
.dp-bundle-card .dp-bundle__saving { margin-top: var(--space-1); font-size: var(--text-xs); }
.dp-bundle-overview__empty { padding: var(--space-8) 0; text-align: center; color: var(--color-text-muted); }
.dp-bundle-overview__empty p { margin: 0 0 var(--space-4); }
.dp-bundle__back { display: none; }
.dp-bundle-list--compact.is-enhanced .dp-bundle { display: none; }
.dp-bundle-list--compact.is-enhanced .dp-bundle.is-open { display: block; }
.dp-bundle-list--compact.is-enhanced .dp-bundle__back {
    display: inline-block; margin-bottom: var(--space-5);
    font-size: var(--text-sm); font-weight: 600; color: var(--color-text); text-decoration: none;
}
.dp-bundle-list--compact.is-enhanced .dp-bundle__back:hover { text-decoration: underline; }

@media (max-width: 1024px) {
    .dp-bundle { --dp-bundle-item-w: 148px; padding: var(--space-6); }
    .dp-bundle__hero { gap: var(--space-8); }
}

@media (max-width: 768px) {
    .dp-bundle-list { gap: var(--space-6); }
    .dp-bundle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
    .dp-bundle-card { padding: var(--space-3); }
    .dp-bundle-card__price { font-size: var(--text-base); }
    .dp-bundle { padding: var(--space-4); }
    .dp-bundle__hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
    .dp-bundle__image { max-height: 360px; }
    .dp-bundle__name { font-size: var(--text-2xl); }
    .dp-bundle__description { font-size: var(--text-sm); }
    .dp-bundle__pricing { margin-top: var(--space-5); padding-top: var(--space-4); }
    .dp-bundle__price { font-size: var(--text-2xl); }
    .dp-bundle__add-all { margin-top: var(--space-5); padding-inline: var(--space-4); }
    .dp-bundle__contents { margin-top: var(--space-6); padding-top: var(--space-5); }
    .dp-bundle__items-heading { font-size: var(--text-lg); margin-bottom: var(--space-4); }

    /* Én kolonne: hvert produkt som en rad (bilde | tekst). Full bredde gir
       plass til hele bestillingstiden uten sideveis scrolling. */
    .dp-bundle__items { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--space-5); }
    .dp-bundle__item { flex: none; width: 100%; }
    .dp-bundle__item:not(:last-child)::after {
        top: auto; right: auto; bottom: calc(var(--space-5) / -2); left: 36px;
        transform: translate(-50%, 50%);
    }
    .dp-bundle .dp-product-card { flex-direction: row; align-items: center; gap: var(--space-3); }
    .dp-bundle .dp-product-card__image { flex: 0 0 72px; width: 72px; margin-bottom: 0; }
    .dp-bundle .dp-product-card__badge { display: none; }
    .dp-bundle .dp-product-card__body { flex: 1 1 auto; min-width: 0; }
    .dp-bundle .dp-product-card__name,
    .dp-bundle .dp-product-card__price { padding-inline: 0; }
}

/* Attributt-presentasjon (#29) */
.dp-swatch-row { display: flex; gap: 6px; margin-top: var(--space-2); }
.dp-swatch-dot {
    width: 16px; height: 16px; border-radius: 50%;
    border: 1px solid rgba(0,0,0,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
    display: inline-block; flex-shrink: 0;
}
.dp-var-select__swatch {
    width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
    border: 1px solid rgba(0,0,0,.15); margin-right: var(--space-2);
    display: inline-block;
}


/* ── PRODUKTKARUSELL ─────────────────────────────────────────────────── */
.dp-carousel {
    position: relative;
}
.dp-carousel__btn {
    position: absolute; top: 38%; transform: translateY(-50%);
    z-index: 2; display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--color-surface); border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm); cursor: pointer;
    color: var(--color-text); transition: background .15s, box-shadow .15s;
}
.dp-carousel__btn:hover { background: var(--color-bg-2); box-shadow: var(--shadow); }
.dp-carousel__btn--prev { left: -20px; }
.dp-carousel__btn--next { right: -20px; }
.dp-carousel__btn svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Ingen pointer-events:none her — knappen overlapper bevisst 20px inn i rail-innholdet
   (se --prev/--next over), og skulle knappen slippe klikk gjennom mens den er disabled
   ved enden av karusellen, treffer klikket i stedet siste/første produktkort under og
   sender brukeren rett inn på produktsiden. Nativ <button disabled> fyrer uansett aldri
   click selv, så uten pointer-events:none blir et klikk her bare dødt, som tiltenkt. */
.dp-carousel__btn[disabled] { opacity: .35; }

.dp-product-rail {
    display: flex;
    gap: var(--space-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.dp-product-rail::-webkit-scrollbar { display: none; }
.dp-product-rail > * {
    flex: 0 0 calc(25% - var(--space-5) * 3 / 4);
    min-width: 0;
    scroll-snap-align: start;
}

@media (max-width: 900px) {
    .dp-product-rail > * { flex: 0 0 calc(50% - var(--space-5) / 2); }
    .dp-carousel__btn { display: none; }
}
@media (max-width: 560px) {
    .dp-product-rail > * { flex: 0 0 70%; }
}

/* ── PRODUKTKORT — flat, fjellsport-stil ── */
.dp-product-card {
    background: none; border: none; border-radius: 0; box-shadow: none;
    display: flex; flex-direction: column; min-width: 0;
}
.dp-product-card:hover { transform: none; box-shadow: none; }
.dp-product-card__image {
    display: block; position: relative;
    aspect-ratio: 4/5; overflow: hidden;
    background: var(--color-bg-2); border-radius: var(--radius);
    margin-bottom: var(--space-3); flex-shrink: 0;
}
.dp-product-card__image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease; display: block;
}
.dp-product-card:hover .dp-product-card__image img { transform: scale(1.04); }
.dp-product-card__badge {
    position: absolute; top: var(--space-3); left: var(--space-3);
    border-radius: var(--radius); font-size: 9.5px; letter-spacing: .12em;
    text-transform: uppercase; padding: 5px 9px; z-index: 1;
    background: var(--color-secondary); color: var(--color-on-secondary);
}
.dp-product-card__badge--sale { background: var(--color-primary); color: #fff; }
.dp-product-card__badge--3for2 { background: var(--color-secondary); color: var(--color-on-secondary); }
.dp-product-card__badge--coming-soon { background: var(--color-text); color: #fff; }

/* BacklogItem #209 — «Kommer snart» på produktsiden. Samme farge som merket på
   produktkortet, slik at kunden kjenner det igjen fra listen. */
.dp-product-info__coming-soon {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--color-text);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}
.dp-coming-soon-notice {
    margin: 14px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--color-border, #E4DDD3);
    border-radius: 10px;
    background: var(--color-surface-2, #FAF7F2);
    font-size: 14px;
    line-height: 1.5;
}
.dp-product-card__wishlist {
    position: absolute; top: var(--space-3); right: var(--space-3);
    width: 32px; height: 32px; background: white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-muted); opacity: 0;
    transition: opacity var(--transition), color var(--transition); z-index: 1;
    border: none; cursor: pointer;
}
.dp-product-card:hover .dp-product-card__wishlist { opacity: 1; }
.dp-product-card__wishlist:hover { color: #c0392b; }
.dp-product-card__wishlist.is-active { opacity: 1; color: #c0392b; }

.dp-wishlist-btn {
    display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0;
    background: none; border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: var(--space-2) var(--space-3); color: var(--color-text-muted);
    font-size: var(--text-sm); cursor: pointer; white-space: nowrap;
    transition: color var(--transition), border-color var(--transition);
}
.dp-wishlist-btn:hover { color: #c0392b; border-color: #c0392b; }
.dp-wishlist-btn.is-active { color: #c0392b; border-color: #c0392b; }
.dp-product-card__body, .dp-product-card__footer { padding: 0; margin: 0; }
.dp-product-card__category {
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--color-text-subtle); display: block; margin-bottom: var(--space-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp-product-card__name {
    font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm);
    color: var(--color-text); line-height: 1.3; margin-bottom: var(--space-2);
    min-width: 0;
    /* Trunkering for kort uten nøstet <a> (søkeoverlay/trending/search.php —
       hele kortet er allerede lenken der). Kategorisidens .dp-product-card__name a
       har samme egenskaper, så dette er trygt å legge på basisklassen også. */
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dp-product-card__name a {
    color: inherit; text-decoration: none; display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp-product-card__name a:hover { color: var(--color-primary); }
.dp-product-card__price {
    font-size: var(--text-base); font-weight: 700; color: var(--color-text); display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp-product-card__price del { color: var(--color-text-subtle); font-weight: 400; font-size: var(--text-sm); margin-right: var(--space-1); }
.dp-product-card__price ins { text-decoration: none; color: var(--color-primary); }

/* BacklogItem #192 — sekundær mva-prisvisning. Egen linje, bevisst mindre og
   roligere enn hovedprisen (aldri konkurrerer med den om oppmerksomhet), se
   dp_get_secondary_tax_price_html() i inc/theme-setup.php. Delt regel for
   produktkort OG produktside (samme klassenavn begge steder). */
.dp-price-secondary {
    display: block;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--color-text-muted);
    white-space: normal;
    margin-top: 2px;
}
.dp-price-secondary__label { color: var(--color-text-subtle); }

/* Backlog #219 — B2B-pris (markup fra Digipos-pluginet, digipos-b2b.php):
   offentlig pris i <del>, B2B-prisen i <ins>, samme stil som tilbudspris.
   Merkelappen står på egen linje i samme rolige stil som mva-linjen over.
   På kortet får prisen bryte linje mellom beløpene (aldri inni et beløp),
   ellers ville et prisintervall på et smalt mobilkort kuttet selve
   B2B-prisen med «…». */
.dp-b2b-price__label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--color-text-muted);
    white-space: normal;
    margin-top: 2px;
}
.dp-product-card__price .dp-b2b-price { white-space: normal; }
.dp-product-card__price .dp-b2b-price .woocommerce-Price-amount { white-space: nowrap; }
/* Lagerstatus-badge på kortet (#166) — samme .dp-stock-status-farger/state
   som produktsiden (se lenger ned i filen), kun kompaktere størrelse her. */
.dp-product-card .dp-stock-status--card {
    font-size: 11px;
    margin: var(--space-1) 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.dp-product-card .dp-stock-status--card::before { width: 6px; height: 6px; }
/* Ingen «legg i kurv»-knapp i kortet — kjøp skjer på produktsiden */
.dp-product-card .add_to_cart_button,
.dp-product-card .button,
.dp-product-card__footer .add_to_cart_button { display: none; }
.dp-product-card .added_to_cart { display: none; }

/* #277 — «Vis kjøpsknapp på varekort» slått på (dp-product-card--cta). Kortene
   i en rad strekkes til samme høyde og knappen legges nederst, så knappene står
   på linje uansett navnelengde, prislinjer, lagerstatus og fargeprikker. Fast
   minstehøyde gjør at en knapp som bryter over to linjer (smale mobilkort,
   Fashion sine store bokstaver) er like høy som naboen. Pakkekort er uendret:
   .dp-bundle skjuler hele footeren. */
.dp-product-grid > .dp-product-card--cta { align-self: stretch; }
.dp-product-card--cta .dp-product-card__footer { margin-top: auto; padding-top: var(--space-3); }
.dp-product-card--cta .dp-product-card__cta {
    display: flex;
    width: 100%;
    min-height: 44px;
    padding: 6px var(--space-3);
    white-space: normal;
    text-align: center;
    line-height: 1.15;
    text-decoration: none;
}
.dp-product-card--cta .dp-product-card__cta.loading { opacity: .6; pointer-events: none; }
@media (max-width: 560px) {
    .dp-product-card--cta .dp-product-card__cta { padding-inline: var(--space-2); font-size: var(--text-xs); }
}

/* Feilmelding fra legg i handlekurv (varekort og produktside), f.eks. for lite på lager */
.dp-cart-error { margin: var(--space-2) 0 0; font-size: var(--text-xs); line-height: 1.4; color: #c62828; }

/* ── BANNER/USP ── */
.dp-usp-bar {
    background: var(--dp-usp-bg, var(--color-secondary, #1a1a1a));
    color: var(--dp-usp-text, #ffffff);
    padding: var(--space-4) 0;
}
.dp-usp-bar__inner {
    display: flex;
    justify-content: center;
    gap: var(--space-10);
    flex-wrap: wrap;
}
.dp-usp-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 500;
}
.dp-usp-item svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── KATEGORISIDE MED FILTER ── */
.dp-shop-layout { display: flex; gap: var(--space-8); align-items: flex-start; }
.dp-filter-sidebar {
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
}
.dp-filter-sidebar__title { font-weight: 700; font-size: var(--text-base); margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 2px solid var(--color-primary); }
.dp-filter-group { margin-bottom: var(--space-6); }
.dp-filter-group__title { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-3); text-transform: uppercase; letter-spacing: 0.06em; }
.dp-filter-option { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; }
.dp-filter-option input[type="checkbox"] { accent-color: var(--color-primary); width: 16px; height: 16px; }
.dp-filter-option label { font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; flex: 1; }
.dp-filter-option label:hover { color: var(--color-primary); }
.dp-filter-count { font-size: var(--text-xs); color: var(--color-text-subtle); }

.dp-shop-main { flex: 1; min-width: 0; }
.dp-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.dp-shop-count { font-size: var(--text-sm); color: var(--color-text-muted); }
.dp-shop-sort {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    background: var(--color-surface);
    cursor: pointer;
}
.dp-shop-sort:focus { outline: none; border-color: var(--color-primary); }

/* ── ENKELTPRODUKT — galleri ── */
/* Galleri — thumbs-kolonne til venstre */
.dp-product-gallery {
    display: grid; grid-template-columns: 88px 1fr; gap: var(--space-4);
    align-items: start;
}
.dp-product-gallery__thumbs {
    display: flex; flex-direction: column; gap: var(--space-3); order: -1;
}
.dp-product-gallery__thumb {
    aspect-ratio: 1; border: 1px solid var(--color-border); border-radius: var(--radius);
    background-size: cover; background-position: center; cursor: pointer;
    transition: border-color var(--transition); overflow: hidden;
}
.dp-product-gallery__thumb.is-active { border-color: var(--color-text); }
.dp-product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.dp-product-gallery__main {
    border: 1px solid var(--color-border); border-radius: var(--radius);
    overflow: hidden; background: var(--color-bg-2); aspect-ratio: 4/5;
}
.dp-product-gallery__main img { width: 100%; height: 100%; object-fit: contain; }
/* Enkelt bilde: ingen thumbs-kolonne */
.dp-product-gallery:not(:has(.dp-product-gallery__thumbs)) { grid-template-columns: 1fr; }
/* Galleri-slides i __main er for mobil-swipe — skjul på desktop */
@media (min-width: 769px) {
    .dp-product-gallery__main .dp-gallery-slide { display: none; }
}
/* BugReport #478 — med mange bilder ble miniatyrkolonnen flere ganger høyere enn
   hovedbildet (16 bilder ≈ 1600px). contain:size gjør at kolonnen ikke teller med i
   radhøyden, så den strekkes til hovedbildets høyde og rulles i stedet. Fashion har
   egen høydegrense i fashion.css. */
@media (min-width: 1025px) {
    body:not(.dp-style-fashion) .dp-product-gallery { align-items: stretch; }
    body:not(.dp-style-fashion) .dp-product-gallery__main { align-self: start; }
    body:not(.dp-style-fashion) .dp-product-gallery__thumbs {
        contain: size; overflow-y: auto; overscroll-behavior: contain;
        scrollbar-width: thin; padding-right: 2px;
    }
    body:not(.dp-style-fashion) .dp-product-gallery__thumb { flex-shrink: 0; }
}

.dp-product-info { }
.dp-product-info__category { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-subtle); margin-bottom: var(--space-2); }
.dp-product-info__title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; line-height: 1.2; margin-bottom: var(--space-4); }
.dp-product-info__price { font-size: var(--text-2xl); font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-5); }
.dp-product-info__price del { font-size: var(--text-xl); color: var(--color-text-subtle); font-weight: 400; }
.dp-product-info__excerpt { color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--space-6); }
.dp-social-proof {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    background: var(--color-bg-2);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    margin-bottom: var(--space-5);
}
.dp-social-proof[hidden] { display: none; }
.dp-product-info__meta { border-top: 1px solid var(--color-border); padding-top: var(--space-5); margin-top: var(--space-5); }
.dp-product-info__meta-row { display: flex; gap: var(--space-2); font-size: var(--text-sm); margin-bottom: var(--space-2); }
.dp-product-info__meta-label { font-weight: 600; min-width: 80px; }
.dp-product-info__meta-value { color: var(--color-text-muted); }

/* Legg i handlekurv */
.dp-add-to-cart { display: flex; gap: var(--space-3); margin-bottom: var(--space-5); }
.dp-quantity {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
}
.dp-quantity__btn {
    width: 40px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-2);
    font-size: var(--text-lg);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}
.dp-quantity__btn:hover { background: var(--color-bg-3); }
.dp-quantity__input {
    width: 56px;
    height: 48px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    font-size: var(--text-base);
    font-weight: 600;
    background: white;
}
.dp-quantity__input:focus { outline: none; }

/* Tillitssignaler */
.dp-trust-badges { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }
.dp-trust-badge { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.dp-trust-badge svg { width: 16px; height: 16px; color: var(--color-secondary-ink); flex-shrink: 0; }

/* ── OM OSS ── */
.dp-about { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.dp-about__image { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/3; background: var(--color-bg-2); }
.dp-about__image img { width: 100%; height: 100%; object-fit: cover; }
.dp-about__text .dp-section-subtitle { margin-top: var(--space-4); }

/* ── NYHETSBREV BANNER ── */
.dp-newsletter {
    background: var(--dp-newsletter-bg, var(--color-secondary, #1a1a1a));
    color: var(--dp-newsletter-text, #ffffff);
    padding: var(--space-16) 0;
    text-align: center;
}
.dp-newsletter .dp-section-title { color: inherit; }
.dp-newsletter .dp-section-subtitle {
    color: rgba(255,255,255,0.75);
    color: color-mix(in srgb, currentColor 75%, transparent);
    margin: var(--space-3) auto var(--space-8);
}
.dp-newsletter__form { display: flex; gap: var(--space-3); max-width: 480px; margin: 0 auto; }
.dp-newsletter__input {
    flex: 1;
    padding: var(--space-3) var(--space-5);
    border: none;
    border-radius: var(--radius);
    font-size: var(--text-base);
}
.dp-newsletter__input:focus { outline: none; }

/* ── BREADCRUMB ── */
.dp-breadcrumb {
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.dp-breadcrumb a:hover { color: var(--color-primary); }
.dp-breadcrumb__sep { color: var(--color-border); }

/* ── FOOTER ── */
.dp-footer {
    background: var(--color-text);
    color: rgba(255,255,255,0.7);
    padding-top: var(--space-16);
    margin-top: var(--space-20);
}
.dp-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-10); margin-bottom: var(--space-12); }
.dp-footer__brand .dp-logo { color: white; display: block; margin-bottom: var(--space-4); }
.dp-footer__desc { font-size: var(--text-sm); line-height: 1.7; }
.dp-footer__col-title { color: white; font-weight: 700; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-4); }
.dp-footer__links { list-style: none; }
.dp-footer__links li { margin-bottom: var(--space-2); }
.dp-footer__links a { font-size: var(--text-sm); transition: color var(--transition); }
.dp-footer__links a:hover { color: white; }
.dp-footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: var(--space-5) 0; display: flex; justify-content: space-between; align-items: center; font-size: var(--text-xs); }

/* ── MELDINGER/ALERTS ── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.woocommerce-message { background: var(--color-secondary-subtle); border-left: 4px solid var(--color-secondary); color: var(--color-secondary-ink); }
.woocommerce-info { background: #EBF4FF; border-left: 4px solid #3B82F6; color: #1E40AF; }
.woocommerce-error { background: #FEF2F2; border-left: 4px solid #EF4444; color: #991B1B; }

/* ── PAGINERING ── */
.dp-load-more { display: flex; justify-content: center; margin-top: var(--space-10); }
.dp-load-more__btn { min-width: 220px; text-align: center; }
.dp-load-more__btn.is-loading { opacity: .6; pointer-events: none; }

.dp-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }
.dp-pagination a,
.dp-pagination span {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 600;
    border: 1px solid var(--color-border);
    transition: all var(--transition);
}
.dp-pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.dp-pagination .current { background: var(--color-primary); color: white; border-color: var(--color-primary); }

/* ── RESPONSIV ── */
@media (max-width: 1024px) {
    .dp-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    :root { --header-height: 60px; }
    .dp-hero { min-height: 420px; }
    .dp-hero__title { font-size: var(--text-3xl); }
    .dp-hero-banner__img { height: var(--hero-banner-height-mobile, 45vh); }
    .dp-hero-banner__content { padding: 24px 20px; }
    .dp-hero-banner__title { font-size: var(--text-2xl); }
    .dp-hero-banner__subtitle { font-size: var(--text-sm); margin-bottom: 16px; }
    .dp-hero-banner__btn { padding: 11px 20px; font-size: var(--text-xs); }
    .dp-campaign-banner__img { height: 260px; }
    .dp-campaign-banner__content { padding: 20px 20px; }
    .dp-campaign-banner__title { font-size: var(--text-xl); }
    .dp-campaign-banner__subtitle { font-size: var(--text-sm); margin-bottom: 14px; }
    .dp-campaign-banner__btn { padding: 11px 20px; font-size: var(--text-xs); }
    .dp-product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
    .dp-categories { grid-template-columns: 1fr 1fr; }
    .dp-shop-layout { flex-direction: column; }
    .dp-filter-sidebar { width: 100%; position: static; }
    .dp-about { grid-template-columns: 1fr; }
    .dp-footer__grid { grid-template-columns: 1fr; }
    .dp-nav { display: none; }
    .dp-search-trigger { width: 180px; }
    .dp-newsletter__form { flex-direction: column; }
}
@media (max-width: 480px) {
    .dp-container { padding: 0 var(--space-4); }
    .dp-product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
    .dp-categories { grid-template-columns: 1fr; }
    .dp-hero__title { font-size: var(--text-2xl); }
    /* Kant-pust på produktkort-tekst og grid mot skjermkant */
    .dp-shop-main, .dp-product-grid { padding-inline: var(--space-1); }
}

/* ── LOADING / SPINNER ── */
.dp-spinner {
    width: 40px; height: 40px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: dp-spin 0.8s linear infinite;
    margin: var(--space-8) auto;
}
@keyframes dp-spin { to { transform: rotate(360deg); } }
.dp-loading { opacity: 0.5; pointer-events: none; }

/* ── CHECKOUT ── */
.dp-checkout { display: grid; grid-template-columns: 1fr 400px; gap: var(--space-8); padding: var(--space-10) 0; }
/* #500 — WooCommerce legger kassefeil først i skjemaet; uten dette tok
   meldingen første rute og dyttet skjema og ordresammendrag ut av plass. */
.dp-checkout > .woocommerce-NoticeGroup,
.dp-checkout > .woocommerce-error,
.dp-checkout > .woocommerce-message,
.dp-checkout > .woocommerce-info { grid-column: 1 / -1; }
/* Flere feil i én liste står under hverandre, ikke side om side. */
ul.woocommerce-error { flex-direction: column; align-items: flex-start; gap: var(--space-1); list-style: none; }
.dp-checkout__section { margin-bottom: var(--space-6); }
.dp-checkout__section-title { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.dp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.dp-form-row--full { grid-template-columns: 1fr; }
.dp-form-group label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2); }
.dp-form-group input,
.dp-form-group select,
.dp-form-group textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--text-base);
    transition: border-color var(--transition);
    font-family: inherit;
}
.dp-form-group input:focus,
.dp-form-group select:focus { outline: none; border-color: var(--color-primary); }
.dp-order-summary { background: var(--color-bg-2); border-radius: var(--radius-xl); padding: var(--space-6); position: sticky; top: calc(var(--header-height) + var(--space-4)); }
.dp-order-summary__title { font-weight: 700; margin-bottom: var(--space-5); }
/* BugReport #499 — «Ordre mottatt» og betalingssiden har ikke .dp-checkout
   rundt seg, så adressene lå kant i kant med nyhetsbrev-/footerfeltet under.
   Samme bunnluft som vanlige sider (.dp-page-layout). */
.woocommerce-order-received .dp-page-content,
.woocommerce-order-pay .dp-page-content { padding-bottom: var(--space-16); }

@media (max-width: 768px) {
    .dp-checkout { grid-template-columns: 1fr; }
    .dp-order-summary { position: static; }
    .dp-form-row { grid-template-columns: 1fr; }
}

/* WooCommerce catalog ordering (sortering-dropdown) */
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    background: white;
    cursor: pointer;
    font-family: inherit;
}
.woocommerce-ordering select:focus { outline: none; border-color: var(--color-primary); }

/* WooCommerce result count */
.woocommerce-result-count { font-size: var(--text-sm); color: var(--color-muted); margin: 0; }

/* WooCommerce pagination */
.woocommerce-pagination ul { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-8) 0 0; justify-content: center; }
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid var(--color-border); border-radius: var(--radius);
    font-size: var(--text-sm); text-decoration: none; color: var(--color-text);
    transition: all var(--transition);
}
.woocommerce-pagination ul li a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.woocommerce-pagination ul li span.current { background: var(--color-primary); color: white; border-color: var(--color-primary); }

/* dp-filter CSS corrections — harmonize with existing filter classes */
.dp-filter-check { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; padding: var(--space-2) 0; font-size: var(--text-sm); }
.dp-filter-check input[type="radio"] { accent-color: var(--color-primary); }
.dp-filter-check span { color: var(--color-muted); font-size: var(--text-xs); }
.dp-filter-check.is-active { font-weight: 600; color: var(--color-primary); }
.dp-filter-check--child { padding-left: calc(var(--dp-filter-depth, 1) * var(--space-4)); }
.dp-filter-reset { display: inline-block; margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-primary); text-decoration: underline; cursor: pointer; }
.dp-no-products { text-align: center; padding: var(--space-12) 0; }

/* ── SINGLE PRODUCT LAYOUT ── */
.dp-product-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-12); padding: 0; padding-block: var(--space-8) var(--space-16); align-items: start; }
.dp-product-info__cat a { font-size: var(--text-sm); color: var(--color-primary); text-decoration: none; font-weight: 600; }
.dp-product-info__title { font-size: var(--text-3xl); font-weight: 700; margin: var(--space-2) 0 var(--space-4); line-height: 1.2; }
.dp-product-info__price { font-size: var(--text-2xl); font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-4); }
.dp-product-info__price del { font-size: var(--text-lg); color: var(--color-muted); font-weight: 400; }
.dp-product-info__short-desc { font-size: var(--text-base); color: var(--color-muted); margin-bottom: var(--space-5); line-height: 1.6; }
/* «Vis ved kjøpsknappen» (#245): kompakt «Navn: verdi»-liste, ikke badges. Dempet navn og
   tydelig verdi, samme mønster som .dp-product-info__meta («Varenr: <strong>…</strong>»). */
.dp-product-info__specs { display: flex; flex-direction: column; gap: var(--space-1); margin: 0 0 var(--space-5); font-size: var(--text-sm); line-height: 1.5; }
.dp-product-info__spec dt, .dp-product-info__spec dd { display: inline; margin: 0; }
.dp-product-info__spec dt { color: var(--color-text-muted); }
.dp-product-info__spec dd { font-weight: 600; color: var(--color-text); overflow-wrap: anywhere; }
.dp-product-info__cart { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-5); flex-wrap: wrap; }
.dp-quantity { display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.dp-quantity__btn { width: 40px; height: 48px; background: var(--color-bg-2); border: none; font-size: 1.2rem; cursor: pointer; transition: background var(--transition); }
.dp-quantity__btn:hover { background: var(--color-border); }
.dp-quantity__input { width: 56px; height: 48px; border: none; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); text-align: center; font-size: var(--text-base); font-weight: 600; -moz-appearance: textfield; }
.dp-quantity__input::-webkit-outer-spin-button, .dp-quantity__input::-webkit-inner-spin-button { -webkit-appearance: none; }
.dp-product-info__meta { display: flex; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-5); flex-wrap: wrap; }
.dp-product-info__usps { display: flex; flex-direction: column; gap: var(--space-2); border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.dp-product-info__usp { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-muted); }

/* ── VARIASJONSSYSTEM ── */
.dp-variation-form { display: flex; flex-direction: column; gap: var(--space-4); }
.dp-variation-group__label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); margin-bottom: 8px; }

/* Custom select */
.dp-var-select { position: relative; }

.dp-var-select__trigger {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-base);
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s;
}
.dp-var-select__trigger:hover,
.dp-var-select.is-open .dp-var-select__trigger { border-color: var(--color-text); }
.dp-var-select__arrow { flex-shrink: 0; transition: transform .2s; }
.dp-var-select.is-open .dp-var-select__arrow { transform: rotate(180deg); }
.dp-var-select__value { color: var(--color-text); }
.dp-var-select__value.is-placeholder { color: var(--color-muted); }

.dp-var-select__dropdown {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    list-style: none; margin: 0; padding: 4px 0;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    display: none;
}
.dp-var-select.is-open .dp-var-select__dropdown { display: block; }

.dp-var-select__option {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    font-size: var(--text-base);
    transition: background .1s;
}
.dp-var-select__option:hover { background: var(--color-bg-2); }
.dp-var-select__option.is-selected { font-weight: 600; }
.dp-var-select__option.is-out { opacity: .45; cursor: default; }
.dp-var-select__option-label { color: var(--color-text); }

.dp-var-select__stock {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--text-sm);
    white-space: nowrap;
}
.dp-var-select__stock::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dp-var-select__stock--in   { color: #2e7d32; }
.dp-var-select__stock--in::before   { background: #4caf50; }
.dp-var-select__stock--low  { color: #e65100; }
.dp-var-select__stock--low::before  { background: #ff9800; }
.dp-var-select__stock--out  { color: var(--color-muted); }
.dp-var-select__stock--out::before  { background: #e53935; }

/* Backlog #249 — «Nullstill valg», lagt inn av theme.js bare på varer med variantbilder. */
.dp-var-reset {
    align-self: flex-start;
    min-height: 32px;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-muted);
    font: inherit;
    font-size: var(--text-sm);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.dp-var-reset:hover { color: var(--color-text); }
.dp-var-reset[hidden] { display: none; }

/* ── TILVALG (BacklogItem #67) ── */
.dp-addon-list { display: flex; flex-direction: column; gap: var(--space-2); }
.dp-addon-list__label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); margin-bottom: 2px; }

.dp-addon-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 12px 16px;
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    font-size: var(--text-base);
    cursor: pointer;
    transition: border-color .15s;
}
.dp-addon-item--boolean:hover { border-color: var(--color-text); }
.dp-addon-item--text { cursor: default; flex-direction: column; align-items: stretch; gap: 8px; }

.dp-addon-item__checkbox { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; flex-shrink: 0; }
.dp-addon-item__name { color: var(--color-text); flex: 1; }
.dp-addon-item__price { color: var(--color-primary); font-weight: 600; white-space: nowrap; }
.dp-addon-item__required { color: var(--color-secondary-ink); }

.dp-addon-item__input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    font-size: var(--text-base);
    font-family: inherit;
    color: var(--color-text);
    box-sizing: border-box;
}
.dp-addon-item__input:focus { outline: none; border-color: var(--color-primary); }

.dp-addon-list__total { font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }

.dp-product-info__usp svg { width: 16px; height: 16px; color: var(--color-secondary-ink); flex-shrink: 0; }
.dp-stock-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    margin: 0 0 var(--space-3);
}
.dp-stock-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dp-stock-status--in       { color: #2e7d32; }
.dp-stock-status--in::before       { background: #4caf50; }
.dp-stock-status--low      { color: #a15c00; }
.dp-stock-status--low::before      { background: #ff9800; }
.dp-stock-status--out      { color: #e53935; }
.dp-stock-status--out::before      { background: #e53935; }
.dp-stock-status--backorder { color: #a15c00; }
.dp-stock-status--backorder::before { background: #ff9800; }
.dp-cart-item__backorder { color: #ff9800; font-size: var(--text-xs); font-weight: 600; margin: var(--space-1) 0 0; }

/* Back in stock (#19) */
.dp-stock-notify { margin-top: var(--space-3); }
.dp-stock-notify__label { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.dp-stock-notify__form { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.dp-stock-notify__input {
    flex: 1;
    min-width: 200px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--text-sm);
}
.dp-stock-notify__success { color: var(--color-secondary-ink); font-size: var(--text-sm); font-weight: 600; margin-top: var(--space-2); }
.dp-stock-notify__error { color: #e53935; font-size: var(--text-sm); margin-top: var(--space-2); }

/* Product tabs */
.dp-product-tabs { padding: var(--space-8) 0 var(--space-12); }
.dp-product-tabs__nav { display: flex; gap: 0; border-bottom: 2px solid var(--color-border); margin-bottom: var(--space-6); }
.dp-product-tabs__btn { padding: var(--space-3) var(--space-5); font-size: var(--text-sm); font-weight: 600; background: none; border: none; cursor: pointer; color: var(--color-muted); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all var(--transition); }
.dp-product-tabs__btn.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.dp-product-tabs__panel { display: none; }
.dp-product-tabs__panel.is-active { display: block; }
.dp-attr-table { width: 100%; border-collapse: collapse; }
.dp-attr-table tr { border-bottom: 1px solid var(--color-border); }
.dp-attr-table th, .dp-attr-table td { padding: var(--space-3) var(--space-4); text-align: left; font-size: var(--text-sm); }

/* ── ANMELDELSER ── */
.dp-reviews { display: flex; flex-direction: column; gap: var(--space-8); }
.dp-reviews__heading { font-size: var(--text-lg); font-weight: 700; color: var(--color-text); margin: 0 0 var(--space-5); }
.dp-reviews__empty { color: var(--color-muted); font-size: var(--text-sm); }
.dp-reviews__verification { color: var(--color-muted); font-size: var(--text-sm); }
.dp-reviews__comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }

.dp-review { border: 1px solid var(--color-border); border-radius: 12px; padding: var(--space-5); }
.dp-review__header { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
.dp-review__avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--color-text); color: var(--color-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-base); font-weight: 700; flex-shrink: 0;
    text-transform: uppercase;
}
.dp-review__meta { display: flex; flex-direction: column; gap: 3px; }
.dp-review__author { font-weight: 700; font-size: var(--text-sm); color: var(--color-text); }
.dp-review__date { font-size: 12px; color: var(--color-muted); }
.dp-review__stars { display: flex; gap: 2px; margin-top: 2px; }
.dp-review__star { width: 14px; height: 14px; color: #ccc; }
.dp-review__star.is-filled { color: #f59e0b; fill: #f59e0b; stroke: #f59e0b; }
.dp-review__body { font-size: var(--text-sm); color: var(--color-text); line-height: 1.65; }
.dp-review__body p { margin: 0; }

/* Review form */
.dp-reviews__form-wrap { border-top: 1px solid var(--color-border); padding-top: var(--space-6); }
.dp-review-form { display: flex; flex-direction: column; gap: var(--space-5); }
.dp-review-form__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.dp-review-form__field { display: flex; flex-direction: column; gap: 6px; }
.dp-review-form__field label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.dp-review-form__field input,
.dp-review-form__field textarea {
    width: 100%; padding: 10px 14px;
    border: 1.5px solid var(--color-border); border-radius: 8px;
    background: var(--color-surface); color: var(--color-text);
    font-size: var(--text-sm); font-family: inherit;
    outline: none; transition: border-color .15s; box-sizing: border-box;
}
.dp-review-form__field input:focus,
.dp-review-form__field textarea:focus { border-color: var(--color-text); }
.dp-review-form__field textarea { resize: vertical; }
.dp-required { color: #e53935; }

/* Stjernebedømmelse */
.dp-review-form__stars { display: flex; flex-direction: column; gap: 8px; }
.dp-review-form__stars label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.dp-star-rating { display: flex; gap: 4px; }
.dp-star {
    background: none; border: none; cursor: pointer; padding: 2px;
    color: #d1d5db; transition: color .1s, transform .1s;
}
.dp-star:hover, .dp-star.is-hovered, .dp-star.is-active { color: #f59e0b; transform: scale(1.15); }
.dp-star svg { width: 28px; height: 28px; display: block; }
.dp-star.is-active svg { fill: #f59e0b; stroke: #f59e0b; }
.dp-attr-table th { width: 200px; color: var(--color-muted); font-weight: 600; }
@media (max-width: 768px) {
    .dp-product-layout { grid-template-columns: 1fr; }
}

/* ── STATIC PAGES ── */
.dp-page-layout { padding: var(--space-10) 0; max-width: 800px; }
.dp-page-title { font-size: var(--text-3xl); font-weight: 700; margin-bottom: var(--space-6); }
.dp-wishlist-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-2); }
.dp-wishlist-page-header .dp-page-title { margin-bottom: 0; }
.dp-wishlist-shared-notice { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-6); width: 100%; }
.dp-wishlist-share-btn { flex-shrink: 0; }
.dp-page-body { font-size: var(--text-base); line-height: 1.8; color: var(--color-text); }
.dp-page-body h2 { font-size: var(--text-2xl); margin-top: var(--space-8); margin-bottom: var(--space-4); }
.dp-page-body p { margin-bottom: var(--space-4); }

/* ── BLOG ── */
.dp-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); padding: var(--space-8) 0; }
.dp-post-card { background: white; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow); }
.dp-post-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.dp-post-card__body { padding: var(--space-5); }
.dp-post-card__meta { font-size: var(--text-xs); color: var(--color-muted); margin-bottom: var(--space-2); }
.dp-post-card h2 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.dp-post-card h2 a { color: var(--color-text); text-decoration: none; }
.dp-post-card h2 a:hover { color: var(--color-primary); }
.dp-pagination { display: flex; justify-content: center; padding: var(--space-8) 0; }
.dp-single-hero-img { margin-bottom: var(--space-6); border-radius: var(--radius-xl); overflow: hidden; }
.dp-single-hero-img img { width: 100%; aspect-ratio: 21/9; object-fit: cover; }
@media (max-width: 768px) {
    .dp-post-grid { grid-template-columns: 1fr; }
}

/* ── ABOUT TEASER ── */
.dp-about-teaser { background: var(--color-bg-2); padding: var(--space-16) 0; }
.dp-about-teaser__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
.dp-about-teaser__img img { width: 100%; border-radius: var(--radius-xl); aspect-ratio: 4/3; object-fit: cover; }
.dp-about-teaser__eyebrow { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: var(--space-3); }
.dp-about-teaser__text h2 { font-size: var(--text-3xl); font-weight: 700; margin-bottom: var(--space-4); line-height: 1.2; }
.dp-about-teaser__text p { color: var(--color-muted); margin-bottom: var(--space-6); line-height: 1.7; }
.dp-about-teaser__text--solo { grid-column: 1 / -1; text-align: center; max-width: 600px; margin: 0 auto; }
@media (max-width: 768px) {
    .dp-about-teaser__inner { grid-template-columns: 1fr; }
}

/* ── NEWSLETTER ── */
.dp-newsletter { background: var(--dp-newsletter-bg, var(--color-secondary, #1a1a1a)); color: var(--dp-newsletter-text, #ffffff); padding: var(--space-12) 0; margin-bottom: 0; display: block; }
.dp-newsletter__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.dp-newsletter__text h2 { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-2); }
.dp-newsletter__text p { opacity: 0.85; }
.dp-newsletter__form { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.dp-newsletter__form input { padding: var(--space-3) var(--space-4); border-radius: var(--radius); border: none; min-width: 280px; font-size: var(--text-base); }
/* #256 — lys banner-bakgrunn er lov nå: uten kant forsvinner det hvite feltet mot hvitt */
.dp-newsletter__form input,
.dp-newsletter__input { box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.dp-newsletter__form .dp-btn-primary { background: white; color: var(--color-secondary-ink); }
.dp-newsletter__form .dp-btn-primary:hover { background: var(--color-bg-2); }

/* ── FOOTER ── */
.dp-footer { background: #1a1a1a; color: rgba(255,255,255,0.75); padding: var(--space-12) 0 0; margin-top: 0; }
.dp-footer__grid { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: var(--space-8); padding-bottom: var(--space-10); }
.dp-footer__col h4 { color: white; font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-4); }
.dp-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.dp-footer__col ul li a { color: rgba(255,255,255,0.65); text-decoration: none; font-size: var(--text-sm); transition: color var(--transition); }
.dp-footer__col ul li a:hover { color: white; }
.dp-footer__col ul li { font-size: var(--text-sm); }
.dp-footer__payment { display: flex; gap: var(--space-2); margin-top: var(--space-5); }
.dp-footer__social { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.dp-footer__social a { color: rgba(255,255,255,0.65); display: inline-flex; transition: color var(--transition); }
.dp-footer__social a:hover { color: white; }
.dp-footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: var(--space-4) 0; }
.dp-footer__bottom .dp-container { display: flex; justify-content: space-between; font-size: var(--text-xs); color: rgba(255,255,255,0.4); flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 900px) {
    .dp-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
    .dp-footer__grid { grid-template-columns: 1fr; }
    .dp-newsletter__form input { min-width: 100%; }
}

/* ── SECTION HELPERS ── */
.dp-section { padding: var(--space-12) 0; }
.dp-section__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-6); }
.dp-section__header h2 { font-size: var(--text-2xl); font-weight: 700; }
.dp-link-more { font-size: var(--text-sm); color: var(--color-secondary-ink); text-decoration: none; font-weight: 600; }
.dp-link-more:hover { text-decoration: underline; }

/* ── KONTAKTSIDE ── */
.dp-contact-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-12); padding: var(--space-10) 0 var(--space-16); align-items: start; }
.dp-contact-intro { color: var(--color-muted); margin-bottom: var(--space-8); line-height: 1.6; font-size: var(--text-base); }
.dp-contact-details { display: flex; flex-direction: column; gap: var(--space-5); }
.dp-contact-detail { display: flex; gap: var(--space-4); align-items: flex-start; }
.dp-contact-detail__icon { width: 44px; height: 44px; background: var(--color-bg-2); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-primary); }
.dp-contact-detail__label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); margin-bottom: var(--space-1); }
.dp-contact-detail__value { font-size: var(--text-base); color: var(--color-text); text-decoration: none; display: block; line-height: 1.5; }
a.dp-contact-detail__value:hover { color: var(--color-primary); }

/* Skjema */
.dp-contact-form-wrap { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8); }
.dp-henvendelse-category-select { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
.dp-henvendelse-category-select .dp-retur-radio { flex: none; }
/* Honeypot — visuelt skjult, men fortsatt i DOM/tab-rekkefølge slik at botter som ikke kjører CSS fortsatt finner og fyller feltet. */
.dp-hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dp-contact-form .dp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.dp-contact-form .dp-form-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.dp-contact-form .dp-form-group:last-of-type { margin-bottom: var(--space-5); }
.dp-contact-form label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.dp-required { color: var(--color-primary); }
.dp-contact-form input,
.dp-contact-form textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--text-base);
    font-family: inherit;
    color: var(--color-text);
    transition: border-color var(--transition);
    background: var(--color-bg-2);
    box-sizing: border-box;
}
.dp-contact-form input:focus,
.dp-contact-form textarea:focus { outline: none; border-color: var(--color-primary); background: white; }
.dp-contact-form textarea { resize: vertical; min-height: 140px; }

/* Notices */
.dp-contact-notice {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-4); border-radius: var(--radius-lg); margin-bottom: var(--space-5);
    font-size: var(--text-sm); line-height: 1.5;
}
.dp-contact-notice--success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.dp-contact-notice--success svg { color: #16a34a; flex-shrink: 0; margin-top: 2px; }
.dp-contact-notice--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.dp-contact-notice--error svg { color: #dc2626; flex-shrink: 0; margin-top: 2px; }

@media (max-width: 768px) {
    .dp-contact-layout { grid-template-columns: 1fr; }
    .dp-contact-form .dp-form-row { grid-template-columns: 1fr; }
}

/* ── RETUR OG REKLAMASJON ── */
.dp-retur-page { padding-bottom: var(--space-16); }

/* Layout */
.dp-retur-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: var(--space-12);
    padding: var(--space-10) 0;
    align-items: start;
}

/* Info-kolonne */
.dp-retur-info .dp-page-title { margin-bottom: var(--space-3); }
.dp-retur-intro { color: var(--color-muted); line-height: 1.6; margin-bottom: var(--space-8); }


.dp-retur-contact { font-size: var(--text-sm); color: var(--color-muted); }
.dp-retur-contact a:not(.dp-btn) { color: var(--color-primary); text-decoration: none; font-weight: 600; }

/* Form-kolonne */
.dp-retur-form-wrap { min-width: 0; }

.dp-retur-notice {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    margin-bottom: var(--space-5);
    border: 1px solid;
}
.dp-retur-notice--error { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.dp-retur-notice--error svg { color: #dc2626; flex-shrink: 0; }

/* Steps */
.dp-retur-step { transition: opacity 0.2s; }
.dp-retur-step--hidden { display: none; }

.dp-retur-step__header {
    display: flex; align-items: center; gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.dp-retur-step__header h2 { font-size: var(--text-xl); font-weight: 700; margin: 0; }
.dp-retur-step__num {
    width: 36px; height: 36px;
    background: var(--color-primary); color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-base); font-weight: 700;
    flex-shrink: 0;
}

/* Lookup form */
.dp-lookup-form { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-7); }
.dp-lookup-form .dp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-5); }
.dp-lookup-form .dp-form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.dp-lookup-form label { font-size: var(--text-sm); font-weight: 600; }
.dp-lookup-form input {
    width: 100%; padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border); border-radius: var(--radius);
    font-size: var(--text-base); font-family: inherit;
    background: var(--color-bg-2); color: var(--color-text);
    box-sizing: border-box; transition: border-color var(--transition);
}
.dp-lookup-form input:focus { outline: none; border-color: var(--color-primary); background: white; }
.dp-lookup-error { color: #dc2626; font-size: var(--text-sm); margin-top: var(--space-3); }

/* Spinner animation */
.dp-spin { animation: dp-spin 1s linear infinite; }
@keyframes dp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Order summary bar */
.dp-order-meta {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-2); border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
}
.dp-order-meta__badge { background: var(--color-primary); color: white; padding: var(--space-1) var(--space-3); border-radius: var(--radius); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.dp-order-meta__info { display: flex; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-muted); }

/* Item rows */
.dp-retur-items { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.dp-retur-item {
    display: grid;
    grid-template-columns: 24px 72px 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--space-4);
    row-gap: 0;
    padding: var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: white;
    transition: border-color var(--transition), box-shadow var(--transition);
    cursor: pointer;
}
.dp-retur-item:has(.dp-item-checkbox:checked) {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(107, 76, 42, 0.08);
}
.dp-retur-item__check { display: flex; align-items: center; padding-top: 2px; }
.dp-retur-item__check input[type="checkbox"] {
    width: 18px; height: 18px; cursor: pointer;
    accent-color: var(--color-primary);
}
.dp-retur-item__img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-lg); display: block; }
.dp-retur-item__info { min-width: 0; }
.dp-retur-item__name { font-weight: 600; font-size: var(--text-base); line-height: 1.4; margin-bottom: var(--space-1); }
.dp-retur-item__meta { font-size: var(--text-sm); color: var(--color-muted); }
.dp-retur-item__sku { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-1); }

/* Options (skjult til checkbox er hukket av) */
.dp-retur-item__options {
    grid-column: 2 / -1;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-4);
}
.dp-retur-item__options--hidden { display: none; }

/* Radio-knapper for type */
.dp-retur-type-select { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); }
.dp-retur-radio {
    flex: 1; display: flex; flex-direction: column; gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
    position: relative;
}
.dp-retur-radio input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.dp-retur-radio:has(input:checked) { border-color: var(--color-primary); background: #faf6f2; }
.dp-retur-radio__dot {
    width: 16px; height: 16px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    display: block;
    margin-bottom: var(--space-2);
    position: relative;
    transition: border-color var(--transition);
}
.dp-retur-radio:has(input:checked) .dp-retur-radio__dot {
    border-color: var(--color-primary);
}
.dp-retur-radio:has(input:checked) .dp-retur-radio__dot::after {
    content: '';
    position: absolute;
    width: 8px; height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.dp-retur-radio__label { font-weight: 700; font-size: var(--text-sm); }
.dp-retur-radio__label--retur { color: #059669; }
.dp-retur-radio__label--reklamasjon { color: #dc2626; }
.dp-retur-radio__desc { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.4; }

/* Qty + reason in options */
.dp-retur-qty-wrap { margin-bottom: var(--space-3); }
.dp-retur-qty-wrap label,
.dp-retur-item__options > .dp-form-group > label {
    font-size: var(--text-xs); font-weight: 600; color: var(--color-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
    display: block; margin-bottom: var(--space-2);
}
.dp-retur-qty { width: 80px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); font-size: var(--text-sm); font-family: inherit; }
.dp-retur-item__options .dp-form-group { margin-bottom: 0; }
.dp-retur-item__options textarea {
    width: 100%; padding: var(--space-3); border: 1px solid var(--color-border);
    border-radius: var(--radius); font-size: var(--text-sm); font-family: inherit;
    resize: vertical; min-height: 64px; background: var(--color-bg-2); box-sizing: border-box;
}
.dp-retur-item__options textarea:focus { outline: none; border-color: var(--color-primary); background: white; }

/* Form footer */
.dp-retur-form-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

/* Success page */
.dp-retur-success {
    max-width: 600px; margin: var(--space-16) auto;
    text-align: center; padding: var(--space-8);
}
.dp-retur-success__icon {
    width: 88px; height: 88px; background: #d1fae5; color: #059669;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--space-6);
}
.dp-retur-success h1 { font-size: var(--text-3xl); margin-bottom: var(--space-3); }
.dp-retur-success__sub { color: var(--color-muted); font-size: var(--text-lg); margin-bottom: var(--space-5); }
.dp-retur-success__ref {
    display: inline-block; background: var(--color-bg-2);
    padding: var(--space-2) var(--space-5); border-radius: var(--radius);
    font-size: var(--text-sm); color: var(--color-muted);
    margin-bottom: var(--space-8);
}
.dp-retur-success__tips {
    background: white; border: 1px solid var(--color-border);
    border-radius: var(--radius-xl); padding: var(--space-6);
    text-align: left; margin-bottom: var(--space-8);
}
.dp-retur-success__tips h3 { font-size: var(--text-base); font-weight: 700; margin-bottom: var(--space-4); color: var(--color-primary); }
.dp-retur-success__tips ol { padding-left: var(--space-5); margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.dp-retur-success__tips li { font-size: var(--text-sm); color: var(--color-text); line-height: 1.5; }

/* Responsive */
@media (max-width: 900px) {
    .dp-retur-layout { grid-template-columns: 1fr; }
    .dp-retur-info { order: 2; }
    .dp-retur-form-wrap { order: 1; }
}
@media (max-width: 640px) {
    .dp-lookup-form .dp-form-row { grid-template-columns: 1fr; }
    .dp-retur-type-select { flex-direction: column; }
    .dp-retur-item { grid-template-columns: 24px 56px 1fr; }
    .dp-retur-form-footer { flex-direction: column-reverse; gap: var(--space-3); }
    .dp-retur-form-footer .dp-btn { width: 100%; text-align: center; }
}

/* ── OM OSS ── */

/* Eyebrow label */
.dp-about-eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

/* Hero */
.dp-about-hero { padding: var(--space-12) 0 var(--space-10); background: var(--color-bg-2); }
.dp-about-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}
.dp-about-hero__text h1 { font-size: var(--text-4xl); line-height: 1.15; margin-bottom: var(--space-5); }
.dp-about-hero__lead { font-size: var(--text-lg); color: var(--color-muted); line-height: 1.7; margin-bottom: var(--space-7); }
.dp-about-hero__cta { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.dp-about-hero__img-wrap { border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; }
.dp-about-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-about-hero__img-placeholder { width: 100%; height: 100%; background: var(--color-bg-2); display: flex; align-items: center; justify-content: center; }

/* Btn variants */
.dp-btn-light { background: rgba(255,255,255,0.15); color: white; border: 2px solid rgba(255,255,255,0.35); }
.dp-btn-light:hover { background: rgba(255,255,255,0.25); }

/* Verdier */
.dp-about-values { padding: var(--space-16) 0; }
.dp-about-values__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}
.dp-about-value {
    padding: var(--space-6);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    transition: box-shadow var(--transition), transform var(--transition);
}
.dp-about-value:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.dp-about-value__icon {
    width: 52px; height: 52px;
    background: #faf6f2;
    border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}
.dp-about-value h3 { font-size: var(--text-base); font-weight: 700; margin-bottom: var(--space-2); }
.dp-about-value p { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.6; margin: 0; }

/* Historien */
.dp-about-story { padding: var(--space-16) 0; background: var(--color-bg-2); }
.dp-about-story__inner {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-14);
    align-items: center;
}
.dp-about-story__img-wrap { position: relative; }
.dp-about-story__img-card { border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 3/4; }
.dp-about-story__img-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-about-img-placeholder--tall { width: 100%; height: 100%; min-height: 420px; background: linear-gradient(135deg, #e8ddd2 0%, #d4c4b0 100%); }
.dp-about-story__fact-bubble {
    position: absolute;
    bottom: -24px; right: -24px;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    text-align: center;
    box-shadow: var(--shadow-lg);
}
.dp-about-story__fact-num { display: block; font-size: 2.5rem; font-weight: 800; line-height: 1; }
.dp-about-story__fact-label { display: block; font-size: var(--text-xs); font-weight: 600; opacity: 0.85; margin-top: var(--space-1); letter-spacing: 0.04em; }

.dp-about-story__text h2 { font-size: var(--text-3xl); margin-bottom: var(--space-5); }
.dp-about-story__text p { color: var(--color-muted); line-height: 1.75; margin-bottom: var(--space-4); font-size: var(--text-base); }
.dp-about-story__text p:last-of-type { margin-bottom: var(--space-7); }

.dp-about-story__milestones { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.dp-milestone { display: flex; align-items: baseline; gap: var(--space-4); }
.dp-milestone__year {
    font-weight: 800; font-size: var(--text-sm);
    color: var(--color-primary);
    width: 44px; flex-shrink: 0;
}
.dp-milestone__event { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.5; }
.dp-milestone { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.dp-milestone:last-child { border-bottom: none; }

/* Teamet */
.dp-about-team { padding: var(--space-16) 0; }
.dp-about-team .dp-section__header { margin-bottom: var(--space-10); }
.dp-about-team__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
.dp-team-member {
    text-align: center;
    padding: var(--space-8) var(--space-6);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
}
.dp-team-member__avatar {
    width: 96px; height: 96px;
    border-radius: 50%;
    margin: 0 auto var(--space-5);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.dp-team-member__avatar svg { width: 100%; height: 100%; display: block; }
.dp-team-member h3 { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-1); }
.dp-team-member__role {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}
.dp-team-member p { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.6; margin: 0; }

/* Merkevarer */
.dp-about-brands { padding: var(--space-16) 0; background: var(--color-bg-2); }
.dp-about-brands .dp-section__header { margin-bottom: var(--space-8); }
.dp-about-brands__logos {
    display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center;
    margin-bottom: var(--space-5);
}
.dp-about-brand-pill {
    padding: var(--space-2) var(--space-5);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: 0.03em;
}
.dp-about-brands__note { text-align: center; font-size: var(--text-sm); color: var(--color-muted); margin: 0; }

/* CTA-boks */
.dp-about-cta { padding: var(--space-16) 0; }
.dp-about-cta__inner {
    background: var(--color-primary);
    border-radius: var(--radius-2xl);
    padding: var(--space-14) var(--space-12);
    text-align: center;
    color: white;
}
.dp-about-cta__inner h2 { font-size: var(--text-3xl); color: white; margin-bottom: var(--space-3); }
.dp-about-cta__inner p { font-size: var(--text-lg); opacity: 0.85; margin-bottom: var(--space-8); }
.dp-about-cta__actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

/* Responsive */
@media (max-width: 1024px) {
    .dp-about-values__grid { grid-template-columns: repeat(2, 1fr); }
    .dp-about-team__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .dp-about-hero__inner { grid-template-columns: 1fr; }
    .dp-about-hero__img-wrap { order: -1; max-height: 320px; }
    .dp-about-hero__text h1 { font-size: var(--text-3xl); }
    .dp-about-story__inner { grid-template-columns: 1fr; }
    .dp-about-story__img-wrap { display: none; }
    .dp-about-team__grid { grid-template-columns: 1fr; }
    .dp-about-values__grid { grid-template-columns: 1fr; }
    .dp-about-cta__inner { padding: var(--space-10) var(--space-6); }
    .dp-about-cta__inner h2 { font-size: var(--text-2xl); }
}

/* ── Om oss — Modul 1: Bilde + tekst ── */
.dp-about-intro__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-16);
    align-items: center;
}
.dp-about-intro__inner--with-image {
    grid-template-columns: 1fr 1fr;
}
.dp-about-intro__image,
.dp-about-intro__text { min-width: 0; }
.dp-about-intro__image { border-radius: var(--radius-xl); overflow: hidden; background: var(--color-bg-2); }
.dp-about-intro__img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 3/2; }
.dp-about-intro__text--full { grid-column: 1 / -1; max-width: 720px; }
.dp-about-intro__text h1 { font-size: var(--text-4xl); line-height: 1.15; margin-bottom: var(--space-5); }
.dp-about-intro__body { color: var(--color-text-subtle); line-height: 1.8; font-size: var(--text-base); }
.dp-about-intro__body p { margin-bottom: var(--space-4); }
.dp-about-intro__body p:last-child { margin-bottom: 0; }

/* ── Om oss — Modul 2: Ansatte ── */
.dp-section__header--center { text-align: center; flex-direction: column; align-items: center; gap: var(--space-3); margin-bottom: var(--space-12); }
/* mobile.css venstrestiller alle seksjonshoder under 768px; Ansatte-hodet skal
   forbli midtstilt over de midtstilte kortene. */
.dp-about-team .dp-section__header--center { align-items: center; }
.dp-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 240px));
    justify-content: center;
    gap: var(--space-6);
}
.dp-team-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-align: center;
    transition: box-shadow .2s, transform .2s;
}
.dp-team-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.dp-team-card__avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto var(--space-4);
    background: var(--color-bg-2);
}
.dp-team-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.dp-team-card__avatar svg { width: 100%; height: 100%; display: block; }
.dp-team-card__name { font-size: var(--text-base); font-weight: 700; line-height: 1.3; margin-bottom: var(--space-1); text-wrap: balance; overflow-wrap: anywhere; }
.dp-team-card__title { display: block; font-size: var(--text-sm); color: var(--color-primary); font-weight: 400; margin-bottom: var(--space-3); text-wrap: balance; overflow-wrap: anywhere; }
.dp-team-card__contact {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    gap: var(--space-1-5);
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--color-text-subtle);
    text-decoration: none;
    margin-top: var(--space-1-5);
    overflow-wrap: anywhere;
}
.dp-team-card__contact:hover { color: var(--color-primary); }
/* Midtstilt mot første tekstlinje (ikke hele blokken), så ikonet står riktig
   også når en lang e-postadresse brytes over to linjer. */
.dp-team-card__contact svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: calc((1.6em - 13px) / 2); }

/* Navn/stilling som brytes over flere linjer skal ikke skyve resten av kortet
   ut av linje med nabokortene: kortene i en rad deler radhøydene via subgrid.
   Radavstanden er marg i stedet for row-gap — et gap ville også lagt seg
   mellom kortets egne rader og blitt synlig der en rad er tom. Telefon har
   én kolonne (se under) og trenger ikke dette. */
@supports (grid-template-rows: subgrid) {
    @media (min-width: 641px) {
        .dp-team-grid { row-gap: 0; margin-bottom: calc(-1 * var(--space-6)); }
        .dp-team-card {
            display: grid;
            grid-row: span 4;
            grid-template-rows: subgrid;
            margin-bottom: var(--space-6);
        }
        .dp-team-card__info { display: contents; }
        .dp-team-card__avatar { grid-row: 1; }
        .dp-team-card__name { grid-row: 2; align-self: end; }
        .dp-team-card__title { grid-row: 3; }
        .dp-team-card__contacts { grid-row: 4; }
    }
}

@media (max-width: 640px) {
    .dp-about-intro__inner { grid-template-columns: 1fr; }
    .dp-about-intro__text h1 { font-size: var(--text-3xl); }
    /* Én kolonne som bruker bredden — to smale kolonner tvang selv vanlige
       navn over to linjer på telefon. */
    .dp-team-grid { grid-template-columns: minmax(0, 320px); justify-content: center; gap: var(--space-4); }
}

/* ═══════════════════════════════════════════════════════════════════
   KVALITETSLOFT — Port-spec v4 (Design → Code 1:1)
   Kategori · Produktkort · Produktside · Kurv · Checkout
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fellesprinsipper ── */
.dp-eyebrow {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
    margin: 0 0 var(--space-3);
}

/* ── A. KATEGORISIDE ── */
.dp-shop-hero {
    text-align: left;
    padding: var(--space-6) 0 var(--space-6);
}
.dp-shop-hero .dp-container { max-width: var(--container-max); }
.dp-shop-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3vw, 2.6rem);
    line-height: 1.05;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dp-shop-hero__intro {
    max-width: 520px;
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    line-height: 1.7;
    font-size: var(--text-base);
}
/* term_description() gir allerede <p>-avsnitt; introen er derfor en div
   (<p> i <p> ble brutt opp av nettleseren, og teksten mistet stilen, #525). */
.dp-shop-hero__intro p:not(:last-child) { margin-bottom: var(--space-3); }
.dp-shop-toolbar {
    border-top: none;
    border-bottom: none;
    padding: var(--space-3) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    box-shadow: none;
}
.dp-shop-count {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
/* ── Merker-side ─────────────────────────────────────────────────── */
.dp-brands-page { padding: var(--space-10) 0 var(--space-16); }
.dp-brands-page__header { margin-bottom: var(--space-8); }
.dp-brands-page__title { font-family: var(--font-heading); font-size: clamp(2rem,3vw,2.6rem); margin: 0; }

.dp-brand-az {
    display: flex; flex-wrap: wrap; gap: var(--space-1);
    margin-bottom: var(--space-10); padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}
.dp-brand-az__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 var(--space-2);
    border: 1px solid var(--color-border); border-radius: var(--radius);
    font-size: var(--text-sm); font-weight: 600; text-decoration: none;
    color: var(--color-text); background: white; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.dp-brand-az__btn:hover { border-color: var(--color-text); }
.dp-brand-az__btn.is-active { background: var(--color-text); color: white; border-color: var(--color-text); }

.dp-brand-group {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--space-4);
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--color-border);
    align-items: start;
}
.dp-brand-group__letter {
    font-family: var(--font-heading); font-size: var(--text-2xl);
    font-weight: 700; color: var(--color-text); padding-top: 2px;
}
.dp-brand-group__items {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2) var(--space-4);
}
.dp-brand-item {
    font-size: var(--text-base); color: var(--color-text);
    text-decoration: none; padding: var(--space-1) 0;
    transition: color .15s;
}
.dp-brand-item:hover { color: var(--color-primary); }

@media (max-width: 1024px) {
    .dp-brand-group__items { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .dp-brand-group { grid-template-columns: 48px 1fr; gap: var(--space-3); }
    .dp-brand-group__items { grid-template-columns: repeat(2, 1fr); }
    .dp-brand-az__btn { min-width: 34px; height: 34px; font-size: var(--text-xs); }
}

/* ── Underkategori-chips ─────────────────────────────────────────── */
.dp-cat-chips { padding: var(--space-3) 0 var(--space-1); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-2); }
/* Backlog #130 forsøkte horisontal skroll + fade-affordance her, men løste
   ikke det egentlige problemet (sak fra Håvardstun/Regine, Fase 14, §22-26):
   uten synlig scrollbar (scrollbar-width:none) og uten piler var det ingen
   måte å OPPDAGE at flere kategorier fantes utenfor synlig område på — kunden
   fant rett og slett ikke "Vegglamper" som lå sist av 11 chips. flex-wrap
   gjør alle kategoriene synlige med én gang, uten interaksjon — enklest mulig
   fiks som faktisk løser oppdagbarhets-problemet, ikke bare kutt-symptomet. */
.dp-cat-chips__scroll { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dp-cat-chip {
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    padding: 6px var(--space-4); border: 1px solid var(--color-border);
    border-radius: 999px; font-size: var(--text-sm); color: var(--color-text);
    text-decoration: none; background: white; transition: border-color .15s, background .15s;
}
.dp-cat-chip:hover { border-color: var(--color-text); }
.dp-cat-chip.is-active { background: var(--color-text); color: white; border-color: var(--color-text); }
.dp-cat-chip__count { opacity: .6; }

/* ── Filter-toggle knapp ─────────────────────────────────────────── */
.dp-filter-toggle {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 8px var(--space-4); border: 1px solid var(--color-border);
    border-radius: var(--radius); font-size: var(--text-sm); font-weight: 500;
    background: white; color: var(--color-primary); cursor: pointer; transition: border-color .15s;
}
.dp-filter-toggle:hover { border-color: var(--color-text); }
.dp-filter-toggle.is-active { background: var(--color-text); color: white; border-color: var(--color-text); }
.dp-filter-toggle.is-active svg { stroke: white; }

/* ── Filter side-panel ───────────────────────────────────────────── */
.dp-filter-panel {
    position: fixed; top: 0; left: 0; height: 100%; width: 360px; max-width: 90vw;
    background: white; z-index: 1100; display: flex; flex-direction: column;
    transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow: 4px 0 24px rgba(0,0,0,.12);
}
.dp-filter-panel.is-open { transform: translateX(0); }
/* Bug #497 — lukket ligger panelet rett utenfor venstre kant, og skyggen
   lekket inn som en grå stripe langs kanten på PC (mobil: #475). */
.dp-filter-panel:not(.is-open) { box-shadow: none; }
.dp-filter-panel__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.dp-filter-panel__title { font-weight: 700; font-size: var(--text-base); }
.dp-filter-panel__close {
    width: 32px; height: 32px; display: grid; place-items: center;
    border: 1px solid var(--color-border); border-radius: var(--radius); background: white; cursor: pointer;
}
.dp-filter-panel__body { flex: 1; overflow-y: auto; padding: 0 var(--space-6); }
.dp-filter-panel__footer {
    padding: var(--space-5) var(--space-6); border-top: 1px solid var(--color-border);
    display: flex; gap: var(--space-3); flex-shrink: 0;
}
.dp-filter-panel__apply { flex: 1; }

/* ── Filter-gruppe (brukt i panel) ──────────────────────────────── */
.dp-filter-group {
    border-top: 1px solid var(--color-border);
    padding: var(--space-5) 0;
}
.dp-filter-group__label {
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--color-text); margin-bottom: var(--space-3);
}

/* ── Filter-accordion + "vis flere" (backlog #62) ── */
.dp-filter-group__label--toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: none; border: none; padding: 0; cursor: pointer;
    font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}
.dp-filter-group__chevron { flex-shrink: 0; transition: transform var(--transition); color: var(--color-muted); }
.dp-filter-group__chevron svg { display: block; }
.dp-filter-group.is-collapsed .dp-filter-group__chevron { transform: rotate(-90deg); }
.dp-filter-group.is-collapsed .dp-filter-group__body { display: none; }
.dp-filter-check.is-truncated-hidden { display: none; }
.dp-filter-group__more {
    display: block; margin-top: var(--space-2); font-size: var(--text-xs); font-weight: 600;
    color: var(--color-primary); background: none; border: none; padding: 0; cursor: pointer;
}

/* ── Prisfilter (#244) ──────────────────────────────────────────── */
/* max-width: Fashion viser filteret som et bunnark i full bredde på desktop */
.dp-price-filter { max-width: 420px; }
.dp-price-filter__fields {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end; gap: var(--space-2);
}
.dp-price-filter__field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.dp-price-filter__label { font-size: var(--text-xs); color: var(--color-text-muted); }
.dp-price-filter__input {
    width: 100%; min-width: 0; min-height: 44px; padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border); border-radius: var(--radius);
    background: var(--color-surface); color: var(--color-text);
    font-family: inherit; font-size: var(--text-base); /* ≥16px: iOS zoomer ellers inn ved fokus */
}
.dp-price-filter__input:focus { outline: none; border-color: var(--color-text); }
.dp-price-filter__input[aria-invalid="true"] { border-color: var(--color-sale, #c0392b); }
.dp-price-filter__sep { padding-bottom: var(--space-3); color: var(--color-text-muted); }
.dp-price-filter__error { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-sale, #c0392b); }
.dp-price-filter__error[hidden] { display: none; }
.dp-price-filter__submit { width: 100%; min-height: 44px; margin-top: var(--space-3); }
.dp-price-filter__submit[hidden] { display: none; }
.dp-price-filter__clear {
    display: inline-block; margin-top: var(--space-3); font-size: var(--text-sm);
    color: var(--color-text); text-decoration: underline;
}

/* Aktive filtre over produktgridet — synlig uten å åpne filterpanelet */
.dp-active-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }
.dp-active-filter {
    display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px;
    padding: 6px var(--space-4); border: 1px solid var(--color-text); border-radius: 999px;
    font-size: var(--text-sm); color: var(--color-text); background: var(--color-surface);
    text-decoration: none; white-space: nowrap;
}
.dp-active-filter:hover { background: var(--color-bg-2); }
.dp-active-filter svg { flex-shrink: 0; }
.dp-active-filters__clear {
    display: inline-flex; align-items: center; min-height: 36px; padding: 6px var(--space-2);
    font-size: var(--text-sm); color: var(--color-text); text-decoration: underline;
}
/* #262 — valg i panelet som ikke er brukt ennå */
.dp-filter-panel__footer { flex-wrap: wrap; }
.dp-filter-panel__pending { flex-basis: 100%; margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.dp-filter-panel__pending[hidden] { display: none; }

/* #512 — flytende faner fra tredjepart (Klaviyo «Nyhetsbrev»-fanen har
   z-index 90000) la seg over mobilmenyen og filteret. Skjules mens et
   overlegg fra temaet er åpent. */
body.dp-overlay-open [class*="kl-teaser-"] { display: none !important; }

/* ── Overlay ─────────────────────────────────────────────────────── */
.dp-filter-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4);
    z-index: 1099; backdrop-filter: blur(2px);
}
.dp-filter-overlay.is-active { display: block; }

/* primærdefinisjon av dp-product-grid er over (~496) */
.dp-pagination a,
.dp-pagination span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.dp-pagination .current {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* ── B. PRODUKTKORT — se primærdefinisjon over (~504) ── */

/* ── C. PRODUKTSIDE ── */
.dp-product-info__cat {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}
.dp-product-info__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3vw, 2.6rem);
    line-height: 1.08;
    margin: var(--space-3) 0 0;
}
.dp-product-info__price {
    font-size: var(--text-2xl);
    font-weight: 400;
    color: var(--color-text);
    margin-top: var(--space-4);
}
.dp-product-info__price ins { color: var(--color-primary); text-decoration: none; }
.dp-product-info__short-desc {
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-top: var(--space-5);
}
.dp-product-info__cart { margin-top: var(--space-6); }
.single_add_to_cart_button,
.dp-product-info__cart .add_to_cart_button {
    width: 100%;
    padding: var(--space-4);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: var(--text-sm);
    border-radius: var(--radius);
    /* !important: WooCommerce sin egen .button.alt-regel (0,3,1) er mer spesifikk
       enn disse selektorene og vinner ellers uansett lasterekkefølge */
    background: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
}
.single_add_to_cart_button:hover,
.dp-product-info__cart .add_to_cart_button:hover {
    background: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}
.dp-variation-chips {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
    margin: var(--space-4) 0;
}
.dp-variation-chip {
    border: 1px solid var(--color-text);
    padding: var(--space-3) 0;
    text-align: center;
    font-size: var(--text-sm);
    border-radius: var(--radius);
    cursor: pointer;
    background: transparent;
}
.dp-variation-chip.is-active { background: var(--color-text); color: var(--color-bg); }
.dp-variation-chip.is-disabled {
    border-color: var(--color-border);
    color: var(--color-text-subtle);
    text-decoration: line-through;
    cursor: default;
}
.dp-product-info__usp {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.dp-product-tabs__nav { border-bottom: 1px solid var(--color-border); }
.dp-product-tabs__btn {
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 12px;
}

/* ── D. HANDLEKURV ── */
.dp-cart-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--space-12);
    padding: var(--space-8) 0 var(--space-16);
    align-items: start;
}
.dp-cart-page-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3vw, 2.6rem);
    margin-bottom: var(--space-8);
}
.dp-cart-items { border-top: 1px solid var(--color-border); }
.dp-cart-item {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--color-border);
}
.dp-cart-item:hover { background: transparent; }
.dp-cart-item__img {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--color-bg-2);
}
.dp-cart-item__name {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-lg);
}
.dp-cart-item__unit-price {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-top: var(--space-1);
}
.dp-cart-item__subtotal { font-weight: 600; }
.dp-cart-item__remove,
.dp-remove-item { color: var(--color-text-subtle); font-size: var(--text-lg); }
.dp-cart-item__remove:hover { color: var(--color-sale, #9a3a2a); }
.dp-cart-coupon { display: flex; gap: var(--space-2); }
.dp-cart-coupon__input {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
}
.dp-cart-summary {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
    background: var(--color-bg-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: none;
}
.dp-cart-summary h2 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
}
.dp-cart-summary .order-total th,
.dp-cart-summary .order-total td {
    font-size: var(--text-lg);
    font-weight: 700;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
.dp-cart-summary .wc-proceed-to-checkout .checkout-button {
    width: 100%;
    padding: var(--space-4);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: var(--text-sm);
    border-radius: var(--radius);
    /* !important: WooCommerce sin egen .button.alt-regel (0,3,1) er mer spesifikk
       og vinner ellers over --color-primary uansett lasterekkefølge */
    background: var(--color-primary) !important;
    color: #fff !important;
}
.dp-cart-trust {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.dp-cart-trust span { display: flex; align-items: center; gap: var(--space-2); }

/* Skjul duplikat WC-overskrift i kurv-sammendrag */
.dp-cart-summary .cart_totals h2 { display: none; }

/* ── E. CHECKOUT (override-template) ── */
.dp-checkout-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    padding: var(--space-5) 0 var(--space-4);
}
.dp-checkout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--space-12);
    align-items: start;
    padding-bottom: var(--space-16);
}
.dp-checkout .form-row {
    margin-bottom: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.dp-checkout label { font-size: var(--text-sm); font-weight: 600; }
.dp-checkout input,
.dp-checkout textarea,
.dp-checkout select,
.dp-checkout .select2-selection {
    width: 100%;
    min-height: 50px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-2);
    font-family: inherit;
    font-size: var(--text-base);
}
/* Ordrenotater (#order_comments) — samme stil, uavhengig av nøyaktig
   plassering i DOM-treet (WooCommerce/Svea kan sette dette utenfor
   .dp-checkout sitt umiddelbare skjema-oppsett). */
#order_comments,
.woocommerce-additional-fields textarea {
    width: 100%;
    min-height: 90px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-2);
    font-family: inherit;
    font-size: var(--text-base);
    resize: vertical;
    box-sizing: border-box;
}
#order_comments:focus {
    outline: none;
    border-color: var(--color-primary);
}
.woocommerce-additional-fields {
    margin-top: var(--space-6);
}
.woocommerce-additional-fields h3 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    margin-bottom: var(--space-3);
}
.woocommerce-additional-fields label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.dp-checkout input:focus,
.dp-checkout textarea:focus,
.dp-checkout select:focus {
    outline: none;
    border-color: var(--color-primary);
    background: #fff;
}
/* BugReport #465 — `.dp-checkout input` over er ment for tekstfelt, men
   traff også radioknapper og avkrysningsbokser (fraktvalg, betalingsvalg,
   «Levering til en annen adresse?», salgsbetingelser, opprett konto).
   De ble da 100 % brede og 50px høye, og nettleseren tegnet dem som store,
   sentrerte bokser med teksten presset ned under. Overstyres her i stedet
   for å snevre inn selektoren over — det ville økt spesifisiteten på
   tekstfeltregelen og endret hvilke regler som vinner over den. */
.dp-checkout input[type="radio"],
.dp-checkout input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 0;
    padding: 0;
    flex-shrink: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}
.dp-checkout input[type="radio"]:focus-visible,
.dp-checkout input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
/* Hengende innrykk i stedet for flex: salgsbetingelser-etiketten har
   tekst + <abbr>*</abbr> som egne barn, og i flex havnet stjernen helt til
   høyre når teksten brøt over to linjer. */
.dp-checkout label:has(> input[type="checkbox"]),
.dp-checkout label:has(> input[type="radio"]) {
    display: block;
    position: relative;
    padding-left: calc(18px + var(--space-2));
    cursor: pointer;
}
.dp-checkout label:has(> input[type="checkbox"]) > input,
.dp-checkout label:has(> input[type="radio"]) > input {
    position: absolute;
    left: 0;
    top: 1px;
    margin: 0;
}
/* Samme innrykk når boksen står FORAN etiketten i stedet for inni den
   (<p class="form-row"><input> <label>, f.eks. nyhetsbrev-samtykket fra
   Mailchimp for WooCommerce) — ellers la .form-row sin flex-direction:
   column boksen på en egen linje over teksten. */
.dp-checkout .form-row:has(> input[type="checkbox"]:first-child),
.dp-checkout .form-row:has(> input[type="radio"]:first-child) {
    display: block;
    position: relative;
    padding-left: calc(18px + var(--space-2));
}
.dp-checkout .form-row > input[type="checkbox"]:first-child,
.dp-checkout .form-row > input[type="radio"]:first-child {
    position: absolute;
    left: 0;
    top: 1px;
    margin: 0;
}
.dp-checkout .form-row:has(> input[type="checkbox"]:first-child) > label,
.dp-checkout .form-row:has(> input[type="radio"]:first-child) > label { display: block; }
/* woocommerce_form_field( type=radio ) setter radio + etikett tett i tett
   (input.input-radio + label.radio) uten eget mellomrom. Nettleserens egne
   marger er beholdt på radio/avkrysning ellers i kassen, så plugin-felt vi
   ikke kjenner markupen til får samme luft som før. */
.dp-checkout .woocommerce-input-wrapper > input[type="radio"] {
    vertical-align: middle;
    margin: 0 var(--space-2) 0 0;
}
.dp-checkout .woocommerce-input-wrapper > input[type="radio"] + label {
    margin-right: var(--space-4);
}
.dp-checkout h3 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
}
.dp-order-summary {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}
.dp-order-summary h2 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    margin-bottom: var(--space-5);
}

/* ── Varelinjer (med bilde) ── */
.dp-order-review__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}
.dp-order-review__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.dp-order-review__item-image {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-bg-2);
    border: 1px solid var(--color-border);
}
.dp-order-review__item-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-order-review__item-qty {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-text);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.dp-order-review__item-info { flex: 1; min-width: 0; }
.dp-order-review__item-name { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); line-height: 1.4; }
.dp-order-review__item-info .variation,
.dp-order-review__item-info dl { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.dp-order-review__item-price { flex-shrink: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); white-space: nowrap; }

/* ── Totalsum-tabell ── */
.dp-order-review__totals { width: 100%; border: none; border-collapse: collapse; }
.dp-order-review__totals tr {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-2) 0;
}
.dp-order-review__totals th,
.dp-order-review__totals td { display: block; padding: 0; border: none; font-weight: 400; text-align: left; }
.dp-order-review__totals th { color: var(--color-text-muted); font-size: var(--text-sm); }
.dp-order-review__totals td { font-size: var(--text-sm); font-weight: 600; text-align: right; }
.dp-order-review__totals tr.order-total {
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
.dp-order-review__totals tr.order-total th { font-size: var(--text-base); font-weight: 700; color: var(--color-text); }
.dp-order-review__totals tr.order-total td { font-size: var(--text-lg); font-weight: 700; }

/* ── Fraktvalg som kort, ikke punktliste ── */
.dp-order-review__totals tr.shipping { flex-direction: column; align-items: stretch; gap: var(--space-2); }
.dp-order-review__totals tr.shipping > th { margin-bottom: var(--space-1); }
.dp-order-review__totals ul#shipping_method { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.dp-order-review__totals ul#shipping_method li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    text-align: left;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3);
}
.dp-order-review__totals ul#shipping_method li:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-subtle);
}
.dp-order-review__totals ul#shipping_method label { font-size: var(--text-sm); font-weight: 500; cursor: pointer; }
.dp-order-review__totals ul#shipping_method li > input[type="radio"] { margin: 0; }
.dp-order-review__totals ul#shipping_method li > label { flex: 1; }
/* Alt som kommer etter etiketten — det en fraktplugin skriver inn via
   woocommerce_after_shipping_rate (hentestedvelger fra Sendo, beskrivelse
   fra Dintero/Krokedil …) — får en egen linje i full bredde under radio +
   etikett, i stedet for å legge seg ved siden av og klemme etiketten.
   review-order.php brukes også av Klarna- og Svea-kassen, så dette gjelder
   der også (utenfor .dp-checkout). */
.dp-order-review__totals ul#shipping_method li > label ~ * {
    flex-basis: 100%;
    min-width: 0;
}
#place_order {
    width: 100%;
    padding: var(--space-4);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: var(--text-sm);
    border-radius: var(--radius);
    background: var(--color-primary);
    color: #fff;
    margin-top: var(--space-4);
}
.dp-checkout .wc_payment_methods { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.dp-checkout .wc_payment_method {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-2);
}
.dp-checkout .wc_payment_method > input[type="radio"] { vertical-align: middle; margin: 0 var(--space-2) 0 0; }

/* ── Responsiv (port-spec) ── */
@media (max-width: 1024px) {
    .dp-product-layout { grid-template-columns: 1fr; gap: var(--space-8); }
    /* BugReport #367/#368/#369 — .dp-product-gallery kollapser til én kolonne
       her (1024px), men .dp-product-gallery__thumbs byttet fra column til
       row først ved 768px. I gapet mellom 769-1024px arvet dermed hver
       thumb-knapp full gallerividde (ingen 88px-kolonne å begrense den til
       lenger) med aspect-ratio:1 fortsatt aktiv — 11 fullbredde-"thumbnails"
       stablet i høyden, akkurat symptomet som ble rapportert. Flyttet hit
       slik at row-layout alltid følger samme breddeterskel som selve
       kolonne-kollapsen. */
    .dp-product-gallery { grid-template-columns: 1fr; }
    .dp-product-gallery__thumbs { flex-direction: row; order: 0; flex-wrap: wrap; }
    /* Uten en eksplisitt bredde her arver hver thumb-knapp kun sin egen
       innholds-størrelse i en rad-flex-container — en <img width:100%
       height:100%> inni en ellers ukonstrained flex-item kollapser i
       praksis til et par piksler (bekreftet: samme kollaps gjaldt allerede
       ≤768px-varianten under, ikke bare 769-1024px-gapet). 64px matcher
       omtrent den tidligere 88px-kolonnebredden minus dp-product-gallery
       sin gap. */
    .dp-product-gallery__thumb { width: 64px; flex-shrink: 0; }
    .dp-cart-layout { grid-template-columns: 1fr; }
    .dp-checkout { grid-template-columns: 1fr; }
    .dp-cart-summary { position: static; }
    .dp-order-summary { position: static; }
}
@media (max-width: 768px) {
    .dp-product-gallery { grid-template-columns: 1fr; }
    .dp-product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-4); }
    .dp-shop-hero { padding: var(--space-8) 0 var(--space-5); }
    .dp-cart-item { grid-template-columns: 72px 1fr auto; gap: var(--space-3); }
    .dp-variation-chips { grid-template-columns: repeat(4, 1fr); }
    /* Opptil 3 ekstra info-fliker (i tillegg til Beskrivelse/Spesifikasjoner/
       Anmeldelser) kan gjøre fane-raden bredere enn skjermen. nowrap+visible
       (desktop-default) klipper da siste fane usynlig utenfor viewport i
       stedet for å vise den — gjør raden horisontalt scrollbar i stedet for å
       endre selve fane-designet. */
    .dp-product-tabs__nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .dp-product-tabs__nav::-webkit-scrollbar { display: none; }
    .dp-product-tabs__btn { flex-shrink: 0; }
}

/* ── Sider (Digipos pages) ── */
.dp-page-layout { max-width: 840px; margin: 0 auto; padding-top: var(--space-6); padding-bottom: var(--space-16); }
.dp-page-modules { display: flex; flex-direction: column; gap: var(--space-10); }
.dp-page-module { }

/* Tekst-modul */
.dp-module-text__image { display: block; width: 100%; max-height: 480px; object-fit: cover; border-radius: 12px; margin: 0 0 var(--space-4); }
.dp-module-text__heading { font-size: var(--text-2xl); font-weight: 700; margin: 0 0 var(--space-4); }
.dp-module-text__body { color: var(--color-text); line-height: 1.7; white-space: pre-wrap; }
.dp-module-text__body p { margin: 0 0 var(--space-4); }
.dp-module-text__body ul, .dp-module-text__body ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.dp-module-text__body a { color: var(--color-primary); text-decoration: underline; }

/* FAQ-modul */
.dp-faq-list { display: flex; flex-direction: column; gap: var(--space-3); }
.dp-faq-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
}
.dp-faq-item__question {
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.dp-faq-item__question::-webkit-details-marker { display: none; }
.dp-faq-item__question::after {
    content: '';
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(45deg);
    transition: transform var(--transition);
}
.dp-faq-item[open] .dp-faq-item__question::after { transform: rotate(-135deg); }
.dp-faq-item__answer { padding-top: var(--space-3); color: var(--color-text-muted); line-height: 1.7; }
.dp-faq-item__answer p { margin: 0 0 var(--space-3); }
.dp-faq-item__answer p:last-child { margin-bottom: 0; }

/* Dokumenter-modul */
.dp-doc-group__heading { font-size: var(--text-lg); font-weight: 700; margin: 0 0 var(--space-3); }
.dp-doc-group__heading:not(:first-child) { margin-top: var(--space-6); }
.dp-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.dp-doc-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.dp-doc-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.dp-doc-card__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--color-primary-subtle);
    color: var(--color-primary-dark);
    font-size: var(--text-xs);
    font-weight: 700;
}
.dp-doc-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dp-doc-card__name { font-weight: 700; color: var(--color-text); word-break: break-word; }
.dp-doc-card__desc { font-size: var(--text-sm); color: var(--color-text-muted); }
.dp-doc-card__meta { font-size: var(--text-xs); color: var(--color-text-subtle); }

/* Lenker-modul */
.dp-link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.dp-link-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.dp-link-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.dp-link-card__title { font-weight: 700; color: var(--color-text); }
.dp-link-card__desc { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Kontakt-modul */
.dp-contact-block {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}
.dp-contact-block__heading { font-size: var(--text-2xl); font-weight: 700; margin: 0 0 var(--space-3); }
.dp-contact-block__who { font-weight: 700; margin: 0 0 var(--space-2); }
.dp-contact-block__desc { color: var(--color-text-muted); line-height: 1.7; margin: 0 0 var(--space-4); }
.dp-contact-block__details { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.dp-contact-block__detail { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.dp-contact-block__detail:hover { text-decoration: underline; }

/* Butikklokasjoner-modul (#34) */
.dp-store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-5); }
.dp-store-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.dp-store-card__image {
    height: 160px;
    background-size: cover;
    background-position: center;
    background-color: var(--color-bg-2);
}
.dp-store-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
.dp-store-card__name { font-size: var(--text-lg); font-weight: 700; margin: 0; }
.dp-store-card__address,
.dp-store-card__hours { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; line-height: 1.6; }
.dp-store-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-3); }
.dp-store-card__link { color: var(--color-primary); font-weight: 600; font-size: var(--text-sm); text-decoration: none; }
.dp-store-card__link:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .dp-doc-grid, .dp-link-grid, .dp-store-grid { grid-template-columns: 1fr; }
}