/* =========================================================
   SITE STYLESHEET
   ---------------------------------------------------------
   01. Variables
   02. Base
   03. Typography
   04. Width / content system
   05. Flex utilities
   06. Gap utilities
   07. 12-column grid
   08. Grid last-row utility
   09. Spacing utilities
   10. Hero
   11. Cards
   12. Colour themes
   13. SVG / icons
   14. Colour utilities
   15. General utilities
   16. Buttons
   17. Fixed header
   18. Shop  (.kk-scope)
   19. Cart  (slide-in)
   20. Header  (.kk-header) + hero overlay
   21. Menu panel  (slides in from the left)
   22. Footer  (.sf-footer)
   23. No prices  (WooCommerce cart / checkout)
   23b. Purchase pages  (cart, checkout, order received)
   24. Shop – responsive
   25. Machines  (.kkm)
   26. Machine quiz  (.kkq)
   27. Departments  (.avd)
   28. Pages  (.pg)
   29. Responsive – tablet
   30. Responsive – mobile
   31. Responsive – small mobile
   32. Accessibility (focus, skip link, link underline, reduced motion)

   Brand colours, fonts and spacing are set once in section
   01. Every other section reads them from there, so a
   sister site only needs new values in section 01.

   Layout grid: header, page content and footer all use the
   same container – content max --site-content-width wide,
   with --padding-horizontal on each side – and the same
   12-column grid (--grid-gap). Elementor sections line up
   when they use the .section class (section 04).
   ========================================================= */


/* =========================================================
   01. VARIABLES
   ========================================================= */

:root {

    /* ---------- Spacing ---------- */

    --space-xs: clamp(0.5rem, 0.4rem + 0.2vw, 0.75rem);
    --space-sm: clamp(1rem, 0.8rem + 0.4vw, 1.5rem);
    --space-md: clamp(1.5rem, 1.2rem + 0.6vw, 2.5rem);
    --space-lg: clamp(2rem, 1.5rem + 1vw, 4rem);
    --space-xl: clamp(3rem, 2rem + 1.5vw, 6rem);

    --padding-horizontal: clamp(1rem, 4vw, 4rem);
    --section-space: clamp(2.5rem, 1.5rem + 2.5vw, 5rem);   /* space above and below each page section */


    /* ---------- Typography ---------- */

    --font-body-family: "Sofia Sans", system-ui, sans-serif;
    --font-heading-family: "Cormorant Garamond", Georgia, serif;

    --font-body-weight: 400;
    --font-heading-weight: 600;

    --font-base: 1rem;
    --font-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);   /* 16px on phones, 18px on wide screens */
    --font-sm: clamp(0.875rem, 0.84rem + 0.1vw, 0.95rem);  /* never below 14px */

    /*
     * Heading scale
     *
     * H6 = base
     * H5 = base × scale
     * H4 = base × scale²
     * H3 = base × scale³
     * H2 = base × scale⁴
     * H1 = base × scale⁵
     */

    --heading-scale: 1.25;

    --font-h6: 0.9rem;
    --font-h5: calc(var(--font-h6) * var(--heading-scale));
    --font-h4: calc(var(--font-h5) * var(--heading-scale));
    --font-h3: calc(var(--font-h4) * var(--heading-scale));
    --font-h2: calc(var(--font-h3) * var(--heading-scale));
    --font-h1: calc(var(--font-h2) * var(--heading-scale));

    --line-height-heading: 1.1;
    --line-height-body: 1.6;


    /* ---------- Brand colours ---------- */

    --color-white: #ffffff;
    --color-blue: #0C2B50;
    --color-gold: #A68553;
    --color-black: #1c1b19;
    --color-accent: #A40E00;
    --color-transparent: transparent;


    /* ---------- Neutral colours ---------- */

    --color-gray-100: #f5f5f5;
    --color-gray-300: #d6d6d6;
    --color-gray-500: #888888;
    --color-gray-700: #555555;

    --color-cream: #F5F4F1;   /* product image tiles */
    --color-line: #e6e6e6;    /* hairlines */
    --color-muted: #5f5f5f;   /* secondary text */

    /* Gold for TEXT on light backgrounds. Plain gold is only 3.4:1 on white,
       below the WCAG minimum of 4.5:1, so text uses this darker mix (5.7:1).
       Dark sections switch it back to a light gold (section 12). */
    --color-gold-text: color-mix(in srgb, var(--color-gold) 72%, var(--color-black));
    --color-gold-on-dark: color-mix(in srgb, var(--color-gold) 70%, var(--color-white));


    /* ---------- Semantic colours ---------- */

    --color-text: var(--color-black);


    /* ---------- Site layout ---------- */

    --site-content-width: 1440px;   /* content width, without the side padding */
    --header-height: 96px;          /* height of the header bar (68px on phones), the same as the header itself, so nothing moves when it loads */
    --header-offset: 0px;           /* = header height when the header is fixed (section 17) */
    --kk-anchor-gap: 24px;          /* space above a section you jump to with a #link (the header slides away) */

    /* Contact icons (masks, coloured with background-color) */
    --icon-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.5v3a1.8 1.8 0 0 1-2 1.8A18 18 0 0 1 2.7 5a1.8 1.8 0 0 1 1.8-2h3a1.8 1.8 0 0 1 1.8 1.5c.1.9.4 1.7.7 2.5a1.8 1.8 0 0 1-.4 1.9L8.3 10.2a14.4 14.4 0 0 0 5.5 5.5l1.3-1.3a1.8 1.8 0 0 1 1.9-.4c.8.3 1.6.6 2.5.7a1.8 1.8 0 0 1 1.5 1.8z'/%3E%3C/svg%3E");
    --icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E");
    --icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.1-7-11.5a7 7 0 0 1 14 0C19 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
    --icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
    --site-container-width: calc(var(--site-content-width) + 2 * var(--padding-horizontal));
    --grid-gap: 2rem;


    /* ---------- Borders ---------- */

    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;
    --border-radius-pill: 999px;


    /* ---------- Motion ----------
       Smooth, calm and a little heavy: movements start
       softly, glide and settle slowly. Every transition on
       the site uses these curves (2026-11-05). */

    --ease-premium: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-premium-inout: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-glide: cubic-bezier(0.16, 1, 0.3, 1);


    /* ---------- Shadows ---------- */

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);


    /* ---------- Buttons ---------- */

    --btn-radius: var(--border-radius-pill);
    --btn-border-width: 1px;
    --btn-transition: 0.35s var(--ease-premium);

    --btn-gold-hover: color-mix(in srgb, var(--color-gold) 85%, var(--color-black));
    --btn-accent-hover: color-mix(in srgb, var(--color-accent) 85%, var(--color-black));
    --btn-black-hover: color-mix(in srgb, var(--color-black) 85%, var(--color-white));
    --btn-white-hover: color-mix(in srgb, var(--color-white) 90%, var(--color-black));


    /* ---------- Container theme ---------- */

    --theme-text: var(--color-black);
    --theme-border: var(--color-black);
    --theme-link: var(--color-black);
    --icon-color: var(--color-black);
}


/* =========================================================
   02. BASE
   ========================================================= */

html {
    font-size: var(--font-base);
    line-height: var(--line-height-body);
    color: var(--color-text);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    font-family: var(--font-body-family);
    font-size: var(--font-body);
    font-weight: var(--font-body-weight);
    line-height: var(--line-height-body);

    color: var(--color-text);
}

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

/* Links take the colour of the text around them. Overrides the
   theme's default link colour (magenta in Hello Elementor), so a
   link never shows up in a colour that isn't part of the design.
   Components style their own links on top of this. */

body a {
    color: inherit;
}

/* Footer at the bottom of the window, also on pages with
   little content: the page is a column at least as tall as
   the window, and the main content takes the free space. */

body:has(> .elementor-location-footer) {
    display: flex;
    flex-direction: column;

    min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
    min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

body:has(> .elementor-location-footer) > main {
    flex: 1 0 auto;
}

body:has(> .elementor-location-footer) > .elementor-location-header,
body:has(> .elementor-location-footer) > .elementor-location-footer {
    flex-shrink: 0;
}

body:has(> .elementor-location-footer) > .elementor-location-footer {
    margin-top: auto;
}


/* =========================================================
   03. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.big-text {
    margin-top: 0;

    font-family: var(--font-heading-family);
    font-weight: var(--font-heading-weight);
    line-height: var(--line-height-heading);

    color: var(--theme-text);
}

h1,
.h1,
.big-text {
    font-size: var(--font-h1);
}

h2,
.h2 {
    font-size: var(--font-h2);
}

h3,
.h3 {
    font-size: var(--font-h3);
}

h4,
.h4 {
    font-size: var(--font-h4);
}

h5,
.h5 {
    font-size: var(--font-h5);
}

h6,
.h6 {
    font-size: var(--font-h6);
}

p {
    max-width: 90ch;
    margin-top: 0;
    margin-bottom: var(--space-sm);

    font-family: var(--font-body-family);
    font-size: var(--font-body);
    line-height: var(--line-height-body);

    color: var(--theme-text);

    text-wrap: pretty;
}

p a {
    color: var(--theme-link);
    text-decoration: underline;
}

p a:hover {
    color: var(--color-gold-text);
}

.small,
.text-sm {
    font-size: var(--font-sm);
}

ul,
ol {
    margin-top: 0;
    margin-bottom: var(--space-sm);
}

li {
    color: var(--theme-text);
}

::marker {
    color: var(--color-gold-text);
}


/* =========================================================
   04. WIDTH / CONTENT SYSTEM
   ========================================================= */

.full-width {
    width: 100%;
}

.content-width {
    width: 100%;
    max-width: var(--site-content-width);
    margin-inline: auto;
}

.section {
    width: 100%;

    padding-block: var(--section-space);
    padding-inline: var(--padding-horizontal);
}

.section > .content-width {
    width: 100%;
}

/* The shared container: header, footer and theme pages use it */

.site-container {
    width: 100%;
    max-width: var(--site-container-width);
    margin-inline: auto;
    padding-inline: var(--padding-horizontal);
}

/* Theme pages that aren't built in Elementor (cart, checkout,
   account, posts) follow the same container instead of the
   theme's own 1140px. */

body:not([class*="elementor-page-"]) .site-main:not(.kk-page) {
    width: 100%;
    max-width: var(--site-container-width);
    margin-inline: auto;
    padding-inline: var(--padding-horizontal);
}


/* =========================================================
   05. FLEX UTILITIES
   ========================================================= */

.flex          { display: flex !important; }
.flex-inline   { display: inline-flex !important; }
.flex-row      { flex-direction: row !important; }
.flex-column   { flex-direction: column !important; }
.flex-wrap     { flex-wrap: wrap !important; }
.flex-nowrap   { flex-wrap: nowrap !important; }


/* ---------- Justification ---------- */

.justify-start   { justify-content: flex-start !important; }
.justify-center  { justify-content: center !important; }
.justify-end     { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around  { justify-content: space-around !important; }
.justify-evenly  { justify-content: space-evenly !important; }


/* ---------- Alignment ---------- */

.items-start    { align-items: flex-start !important; }
.items-center   { align-items: center !important; }
.items-end      { align-items: flex-end !important; }
.items-stretch  { align-items: stretch !important; }
.items-baseline { align-items: baseline !important; }


/* ---------- Flex sizing ---------- */

.flex-1    { flex: 1 1 0% !important; }
.flex-auto { flex: 1 1 auto !important; }
.flex-none { flex: none !important; }


/* =========================================================
   06. GAP UTILITIES
   ========================================================= */

.gap-xs { gap: var(--space-xs) !important; }
.gap-sm { gap: var(--space-sm) !important; }
.gap-md { gap: var(--space-md) !important; }
.gap-lg { gap: var(--space-lg) !important; }
.gap-xl { gap: var(--space-xl) !important; }


/* ---------- Horizontal gap ---------- */

.gap-x-xs { column-gap: var(--space-xs) !important; }
.gap-x-sm { column-gap: var(--space-sm) !important; }
.gap-x-md { column-gap: var(--space-md) !important; }
.gap-x-lg { column-gap: var(--space-lg) !important; }
.gap-x-xl { column-gap: var(--space-xl) !important; }


/* ---------- Vertical gap ---------- */

.gap-y-xs { row-gap: var(--space-xs) !important; }
.gap-y-sm { row-gap: var(--space-sm) !important; }
.gap-y-md { row-gap: var(--space-md) !important; }
.gap-y-lg { row-gap: var(--space-lg) !important; }
.gap-y-xl { row-gap: var(--space-xl) !important; }


/* =========================================================
   07. 12-COLUMN GRID
   ========================================================= */

.grid-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap);

    width: 100%;
}


/* ---------- Column spans ---------- */

.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }


/* =========================================================
   08. GRID LAST-ROW UTILITY
   ---------------------------------------------------------
   A lone item on the last row spans the full width.
   ========================================================= */

.grid-fill-last > .col-6:last-child:nth-child(odd),
.grid-fill-last > .col-4:last-child:nth-child(3n + 1),
.grid-fill-last > .col-3:last-child:nth-child(4n + 1),
.grid-fill-last > .col-2:last-child:nth-child(6n + 1) {
    grid-column: span 12;
}


/* =========================================================
   09. SPACING UTILITIES
   ========================================================= */

/* ---------- Margin top ---------- */

.mt-xs { margin-top: var(--space-xs) !important; }
.mt-sm { margin-top: var(--space-sm) !important; }
.mt-md { margin-top: var(--space-md) !important; }
.mt-lg { margin-top: var(--space-lg) !important; }
.mt-xl { margin-top: var(--space-xl) !important; }


/* ---------- Margin bottom ---------- */

.mb-xs { margin-bottom: var(--space-xs) !important; }
.mb-sm { margin-bottom: var(--space-sm) !important; }
.mb-md { margin-bottom: var(--space-md) !important; }
.mb-lg { margin-bottom: var(--space-lg) !important; }
.mb-xl { margin-bottom: var(--space-xl) !important; }


/* ---------- Margin vertical ---------- */

.my-xs { margin-block: var(--space-xs) !important; }
.my-sm { margin-block: var(--space-sm) !important; }
.my-md { margin-block: var(--space-md) !important; }
.my-lg { margin-block: var(--space-lg) !important; }
.my-xl { margin-block: var(--space-xl) !important; }


/* ---------- Padding top ---------- */

.pt-xs { padding-top: var(--space-xs) !important; }
.pt-sm { padding-top: var(--space-sm) !important; }
.pt-md { padding-top: var(--space-md) !important; }
.pt-lg { padding-top: var(--space-lg) !important; }
.pt-xl { padding-top: var(--space-xl) !important; }


/* ---------- Padding bottom ---------- */

.pb-xs { padding-bottom: var(--space-xs) !important; }
.pb-sm { padding-bottom: var(--space-sm) !important; }
.pb-md { padding-bottom: var(--space-md) !important; }
.pb-lg { padding-bottom: var(--space-lg) !important; }
.pb-xl { padding-bottom: var(--space-xl) !important; }


/* ---------- Padding vertical ---------- */

.py-xs { padding-block: var(--space-xs) !important; }
.py-sm { padding-block: var(--space-sm) !important; }
.py-md { padding-block: var(--space-md) !important; }
.py-lg { padding-block: var(--space-lg) !important; }
.py-xl { padding-block: var(--space-xl) !important; }


/* =========================================================
   10. HERO
   ========================================================= */

.hero {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100%;
    min-height: clamp(500px, 70vh, 900px);

    padding-block: var(--space-xl);
    padding-inline: var(--padding-horizontal);

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


/* =========================================================
   11. CARDS
   ========================================================= */

.card {
    padding: var(--space-md);

    border-radius: var(--border-radius-md);

    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
}


/* =========================================================
   12. COLOUR THEMES
   ========================================================= */

.theme-light {
    --theme-text: var(--color-black);
    --theme-border: var(--color-black);
    --theme-link: var(--color-black);
    --icon-color: var(--color-black);
}

.theme-dark,
.kk-header--dark,
.sf-footer--dark {
    --theme-text: var(--color-white);
    --theme-border: var(--color-white);
    --theme-link: var(--color-white);
    --icon-color: var(--color-white);
    --color-gold-text: var(--color-gold-on-dark);
}


/* ---------- Theme text ---------- */

.theme-light,
.theme-dark,
.theme-light :is(h1, h2, h3, h4, h5, h6, p, li),
.theme-dark :is(h1, h2, h3, h4, h5, h6, p, li) {
    color: var(--theme-text);
}


/* ---------- Theme links ---------- */

.theme-light a,
.theme-dark a {
    color: var(--theme-link);
}

.theme-light a:hover {
    color: var(--color-muted);
}

.theme-dark a:hover {
    color: var(--color-gold-on-dark);
}


/* ---------- Theme borders ---------- */

.border,
.theme-light .border,
.theme-dark .border {
    border: 1px solid var(--theme-border);
}


/* =========================================================
   13. SVG / ICONS
   ========================================================= */

.icon {
    --icon-color: var(--theme-text);
    --icon-size: 1.5rem;

    color: var(--icon-color) !important;
}


/* ---------- Icon colours ---------- */

.icon-white   { --icon-color: var(--color-white); }
.icon-blue    { --icon-color: var(--color-blue); }
.icon-gold    { --icon-color: var(--color-gold); }
.icon-black   { --icon-color: var(--color-black); }
.icon-accent  { --icon-color: var(--color-accent); }
.icon-current { --icon-color: currentColor; }


/* ---------- Icon sizes ---------- */

.icon-xs { --icon-size: 1rem; }
.icon-sm { --icon-size: 1.25rem; }
.icon-md { --icon-size: 1.5rem; }
.icon-lg { --icon-size: 2rem; }
.icon-xl { --icon-size: 8rem; }


/* ---------- Elementor icon ---------- */

.icon .elementor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: var(--icon-size);
    height: var(--icon-size);

    color: var(--icon-color) !important;
}

.icon .elementor-icon svg {
    width: var(--icon-size);
    height: var(--icon-size);

    color: var(--icon-color) !important;
}


/* ---------- SVG fills and strokes ---------- */

.icon .elementor-icon :is(svg, path, circle, rect, polygon, ellipse) {
    fill: var(--icon-color) !important;
}

.icon .elementor-icon :is(path, circle, rect, polygon, ellipse)[stroke] {
    stroke: var(--icon-color) !important;
}

/* Keep explicit "none" values */

.icon .elementor-icon svg [fill="none"] {
    fill: none !important;
}

.icon .elementor-icon svg [stroke="none"] {
    stroke: none !important;
}


/* =========================================================
   14. COLOUR UTILITIES
   ========================================================= */

.text-white  { color: var(--color-white) !important; }
.text-blue   { color: var(--color-blue) !important; }
.text-gold   { color: var(--color-gold) !important; }
.text-black  { color: var(--color-black) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-gray   { color: var(--color-gray-500) !important; }

.bg-white  { background-color: var(--color-white); }
.bg-blue   { background-color: var(--color-blue); }
.bg-gold   { background-color: var(--color-gold); }
.bg-black  { background-color: var(--color-black); }
.bg-accent { background-color: var(--color-accent); }
.bg-gray   { background-color: var(--color-gray-100); }

.bg-cover   { background: center center / cover no-repeat; }
.bg-contain { background: center center / contain no-repeat; }


/* =========================================================
   15. GENERAL UTILITIES
   ========================================================= */

.radius-sm   { border-radius: var(--border-radius-sm) !important; }
.radius-md   { border-radius: var(--border-radius-md) !important; }
.radius-lg   { border-radius: var(--border-radius-lg) !important; }
.radius-pill { border-radius: var(--border-radius-pill) !important; }

.overflow-hidden { overflow: hidden !important; }

.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

.no-margin  { margin: 0 !important; }
.no-padding { padding: 0 !important; }

.ratio-1-1  { aspect-ratio: 1 / 1; }
.ratio-4-3  { aspect-ratio: 4 / 3; }
.ratio-16-9 { aspect-ratio: 16 / 9; }

.fit-content { width: fit-content; }


/* =========================================================
   16. BUTTONS
   ========================================================= */

/* ---------- Base ---------- */

.elementor-button {
    border-radius: var(--btn-radius);
    border-width: var(--btn-border-width);
    border-style: solid;

    transition:
        background-color var(--btn-transition),
        border-color var(--btn-transition),
        color var(--btn-transition),
        transform var(--btn-transition);
}


/* ---------- Primary / accent ---------- */

.btn-primary .elementor-button,
.btn-blue .elementor-button {
    color: var(--color-white);
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn-primary .elementor-button:hover,
.btn-blue .elementor-button:hover {
    color: var(--color-white);
    background-color: var(--btn-accent-hover);
    border-color: var(--btn-accent-hover);

    transform: translateY(-2px);
}


/* ---------- Secondary / gold ---------- */

.btn-secondary .elementor-button,
.btn-gold .elementor-button {
    color: var(--color-black);
    background-color: var(--color-gold);
    border-color: var(--color-gold);
}

.btn-secondary .elementor-button:hover,
.btn-gold .elementor-button:hover {
    color: var(--color-black);
    background-color: var(--btn-gold-hover);
    border-color: var(--btn-gold-hover);
}


/* ---------- Outline ---------- */

.btn-outline .elementor-button {
    color: var(--theme-text);
    background-color: transparent;
    border-color: var(--theme-border);
}

.btn-outline .elementor-button:hover {
    color: var(--color-white);
    background-color: var(--color-blue);
    border-color: var(--color-blue);

    transform: translateY(-2px);
}


/* ---------- White ---------- */

.btn-white .elementor-button {
    color: var(--color-black);
    background-color: var(--color-white);
    border-color: var(--color-white);
}

.btn-white .elementor-button:hover {
    color: var(--color-black);
    background-color: var(--btn-white-hover);
    border-color: var(--btn-white-hover);
}


/* ---------- Black ---------- */

.btn-black .elementor-button {
    color: var(--color-white);
    background-color: var(--color-black);
    border-color: var(--color-black);
}

.btn-black .elementor-button:hover {
    color: var(--color-white);
    background-color: var(--btn-black-hover);
    border-color: var(--btn-black-hover);
}


/* ---------- Ghost ---------- */

.btn-ghost .elementor-button {
    color: var(--theme-text);
    background-color: transparent;
    border-color: transparent;
}

.btn-ghost .elementor-button:hover {
    color: var(--color-muted);
    background-color: transparent;
    border-color: transparent;
}


/* ---------- Focus ---------- */

.elementor-button:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}


/* =========================================================
   17. FIXED HEADER
   ---------------------------------------------------------
   Add the class  header-fixed  to the OUTER container of
   the Elementor Theme Builder header (not .site-header –
   that one belongs to the theme).

   - Opaque (black) on normal pages. An empty space the
     height of the header keeps the page content below it.
   - Transparent over a hero (.kk-hero-overlay) while the
     page is at the top. This is pure CSS, so the header is
     transparent from the very first frame – no fade on load.
   - Slides away when you scroll down and comes back when
     you scroll up – always opaque when it comes back, and
     transparent again once you're back at the top.
   - Over a hero it slides away still see-through. It is
     black only when it comes back on scroll-up, and back at
     the top the black fades out from the bottom up.

   The header snippet's JS sets three classes on <html>:
     hdr-ready     transitions are switched on after the
                   first paint (nothing animates on load)
     hdr-scrolled  the page is scrolled away from the top
     hdr-hidden    scrolling down – header slid away
   The shop snippet's JS adds one more on hero pages:
     kk-hdr-solid  header came back on scroll-up (black)
   ========================================================= */

body:has(.header-fixed) {
    --header-offset: var(--header-height);
}

.header-fixed {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 9999;

    width: 100%;

    background-color: var(--color-black);
}

/* Coming back: a soft, slightly longer glide that eases in.
   Going away: quicker, accelerating out of view. */

html.hdr-ready .header-fixed {
    transition:
        background-color 0.6s var(--ease-premium),
        transform 0.95s var(--ease-glide);
}

/* No shadow under the header (2026-11-05). Over a hero it left a
   faint, ghostly edge while the black faded away. Also removes a
   shadow set on the header container in Elementor. */

.header-fixed,
.header-fixed > .e-con,
.header-fixed .kronen-header,
.header-fixed .kk-header {
    box-shadow: none !important;
}

html.hdr-hidden .header-fixed {
    transform: translateY(-100%);
}

html.hdr-ready.hdr-hidden .header-fixed {
    transition:
        background-color 0.6s var(--ease-premium),
        transform 0.85s var(--ease-premium-inout);
}

/* Space for the fixed header, so the page starts below it */

body:has(.header-fixed) .elementor-location-header {
    min-height: var(--header-height);
}

/* Over a hero at the top: no space, header see-through */

body:is(.kk-has-hero, :has(.kk-hero-overlay)) .elementor-location-header {
    min-height: 0;
}

/* Over a hero the header itself is always see-through. The
   black is a layer behind it (::before) that a gradient mask
   shows or hides. It shows at once when the header comes back
   on scroll-up. From the bottom of the hero to the top of the
   page it follows the scroll: the closer you get to the top, the
   more the black is wiped away from the bottom up
   (--kk-hdr-fade, 0 = black, 1 = gone, set by the shop
   snippet's JS). */

body:is(.kk-has-hero, :has(.kk-hero-overlay)) .header-fixed,
body:is(.kk-has-hero, :has(.kk-hero-overlay)) .header-fixed :is(.e-con, .elementor-element) {
    background-color: transparent;
}

body:is(.kk-has-hero, :has(.kk-hero-overlay)) .header-fixed {
    isolation: isolate;
}

html:not(.kk-hdr-solid) body:is(.kk-has-hero, :has(.kk-hero-overlay)) .header-fixed {
    box-shadow: none;
}

body:is(.kk-has-hero, :has(.kk-hero-overlay)) .header-fixed::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background-color: var(--color-black);
    pointer-events: none;

    /* Mask three times the header height: black, soft edge, clear.
       Moving it from 0% to 100% slides the edge up through the header. */
    -webkit-mask-image: linear-gradient(to bottom, #000 33.333%, transparent 66.667%);
            mask-image: linear-gradient(to bottom, #000 33.333%, transparent 66.667%);
    -webkit-mask-size: 100% 300%;
            mask-size: 100% 300%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 0 100%;
            mask-position: 0 100%;
}

/* The shop snippet's JS eases --kk-hdr-fade itself (with a speed
   limit, so even a quick flick to the top fades calmly over about
   a second), so there is no CSS transition here. */

html.kk-hdr-solid body:is(.kk-has-hero, :has(.kk-hero-overlay)) .header-fixed::before {
    -webkit-mask-position: 0 calc(var(--kk-hdr-fade, 0) * 100%);
            mask-position: 0 calc(var(--kk-hdr-fade, 0) * 100%);
    transition: none;
}

/* Contrast gradient (round 7f): when the hero photo behind the
   header is light, the shop snippet sets html.kk-hdr-scrim and a
   soft dark gradient sits behind the white logo and icons. It lies
   under the black fade above (z-index -2), so scrolling still fades
   between black and this gradient, never to bare photo. It slides
   away and back with the header. */

body:is(.kk-has-hero, :has(.kk-hero-overlay)) .header-fixed::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;

    background: linear-gradient(to bottom, rgba(28, 27, 25, 0.62) 0%, rgba(28, 27, 25, 0.38) 55%, rgba(28, 27, 25, 0) 100%);
    opacity: 0;
    pointer-events: none;

    transition: opacity 0.6s ease;
}

/* (round 8c: the opacity is set from --kk-hdr-scrim further down) */

/* Overscroll (rubber band on tablets and phones): black
   instead of white above the page. The page itself stays
   white. html::before is a black strip just above the page:
   Safari on iPad and iPhone shows it when you pull down at
   the top, even where it doesn't use the page background.
   The shop snippet also sets a black theme-color. */

html {
    background-color: var(--color-black) !important;
}

html::before {
    content: "";

    position: absolute;
    top: -100vh;
    left: 0;
    right: 0;
    z-index: 0;

    height: 100vh;

    background-color: var(--color-black);
    pointer-events: none;
}

body {
    min-height: 100vh;
    background-color: var(--color-white);
}

/* Round 7e: no rubber-band bounce at all at the top and bottom
   (iPad, iPhone, Android), so the page stays put when you pull
   down at the top and no gap shows above it. That also turns off
   the browser's own pull-to-refresh, so the shop snippet (1.21.0)
   has its own: pull down at the top and let go to reload
   (.kk-ptr below). */

html,
body {
    overscroll-behavior-y: none;
}

@media (prefers-reduced-motion: reduce) {

    html.hdr-ready .header-fixed,
    html.hdr-ready.hdr-hidden .header-fixed {
        transition-duration: 0.01s;
    }

}

/* Logged in: below the WordPress admin bar */

body.admin-bar .header-fixed {
    top: 32px;
}

@media (max-width: 782px) {

    body.admin-bar .header-fixed {
        top: 46px;
    }
}


/* =========================================================
   18. SHOP  (.kk-scope)
   ---------------------------------------------------------
   Shop, product page, cart and menu from the shop snippet.
   Everything is scoped to .kk-scope so Elementor kit and
   theme styles don't override it. Text and titles black,
   gold for highlights and links, white on dark backgrounds.
   ========================================================= */

.kk-scope {
    --kk-serif: var(--font-heading-family);
    --kk-sans: var(--font-body-family);

    --kk-black: var(--color-black, #1c1b19);
    --kk-gold: var(--color-gold, #A68553);
    --kk-white: var(--color-white, #ffffff);
    --kk-blue: var(--color-blue, #0C2B50);
    --kk-cream: var(--color-cream, #F5F4F1);
    --kk-line: var(--color-line, #e6e6e6);
    --kk-border: rgba(28, 27, 25, 0.2);

    /* Extra space below a fixed header, if the page doesn't already have it */
    --kk-offset-top: 0px;

    --kk-ease: 0.38s var(--ease-premium);

    width: 100%;
    max-width: var(--site-content-width, 1440px);
    margin-inline: auto;
    padding-top: calc(var(--kk-offset-top) + var(--space-sm, 1.25rem));
    padding-bottom: var(--space-xl, 5rem);

    font-family: var(--kk-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--kk-black);

    -webkit-font-smoothing: antialiased;
}

.kk-scope *,
.kk-scope *::before,
.kk-scope *::after {
    box-sizing: border-box;
}

.kk-scope h1,
.kk-scope h2,
.kk-scope h3 {
    margin: 0;

    font-family: var(--kk-serif);
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--kk-black);
}

.kk-scope p {
    max-width: 65ch;
    margin: 0 0 1em;
    color: var(--kk-black);
}

.kk-scope img {
    max-width: 100%;
    height: auto;
}

/* Screen-reader-only text */

.kk-scope .kk-sr,
.kk-cart-trigger .kk-sr {
    position: absolute !important;

    width: 1px;
    height: 1px;
    overflow: hidden;

    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* ---------- Labels ---------- */

.kk-scope .kk-label {
    display: inline-block;

    font-family: var(--kk-sans);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-transform: uppercase;

    color: var(--kk-black);
}

.kk-scope .kk-gold {
    color: var(--color-gold-text);
}


/* ---------- Links: gold + underline ---------- */

.kk-scope .kk-text-link,
.kk-scope .kk-product__desc a,
.kk-scope .kk-product__lead a {
    color: var(--color-gold-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;

    transition: color var(--kk-ease);
}

.kk-scope .kk-text-link:hover,
.kk-scope .kk-product__desc a:hover,
.kk-scope .kk-product__lead a:hover {
    color: var(--kk-black);
}

.kk-scope .kk-text-link {
    display: inline-flex;
    align-items: center;

    min-height: 44px;
    padding: 0;

    font-family: var(--kk-sans);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.04em;

    background: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}


/* ---------- Notices ---------- */

.kk-scope .kk-notices {
    margin-bottom: var(--space-md, 2rem);
}


/* ---------- Quantity + buy button ---------- */

.kk-scope .kk-buy {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    margin: 0;
}

.kk-scope .kk-qty {
    display: flex;
    align-items: center;
    flex: none;

    border: 1px solid var(--kk-border);
    border-radius: 999px;

    transition: border-color var(--kk-ease);
}

.kk-scope .kk-qty:focus-within,
.kk-scope .kk-qty:hover {
    border-color: var(--kk-gold);
}

.kk-scope .kk-qty__btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 46px;
    padding: 0;

    font-family: var(--kk-sans);
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    color: var(--kk-black);

    background: transparent;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    cursor: pointer;

    transition: color var(--kk-ease);
}

.kk-scope .kk-qty__btn:hover,
.kk-scope .kk-qty__btn:focus {
    color: var(--color-gold-text);
    background: transparent;
}

.kk-scope .kk-qty__input {
    width: 2.25rem;
    height: 46px;
    margin: 0;
    padding: 0;

    font-family: var(--kk-sans);
    font-size: 17px;
    font-weight: 500;
    text-align: center;
    color: var(--kk-black);

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    outline: none;

    -moz-appearance: textfield;
}

.kk-scope .kk-qty__input::-webkit-outer-spin-button,
.kk-scope .kk-qty__input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.kk-scope .kk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 48px;
    padding: 0 20px;

    font-family: var(--kk-sans);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;

    color: var(--kk-white);
    background: var(--kk-black);
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    cursor: pointer;

    transition: background-color var(--kk-ease), color var(--kk-ease), opacity var(--kk-ease);
}

.kk-scope .kk-btn:hover,
.kk-scope .kk-btn:focus,
.kk-scope .kk-btn.is-added {
    color: var(--kk-black);
    background: var(--kk-gold);
}

.kk-scope .kk-buy .kk-btn {
    flex: 1;
}

.kk-scope .kk-btn.is-loading {
    opacity: 0.6;
    cursor: wait;
}

.kk-scope .kk-btn--wide {
    width: 100%;
}

.kk-scope .kk-btn:focus-visible,
.kk-scope .kk-qty__btn:focus-visible,
.kk-scope .kk-cat:focus-visible,
.kk-scope .kk-text-link:focus-visible,
.kk-scope .kk-breadcrumb__link:focus-visible,
.kk-scope .kk-feature__link:focus-visible {
    outline: 2px solid var(--kk-gold);
    outline-offset: 3px;
}

.kk-scope .kk-stock-out,
.kk-scope .kk-price-request {
    font-size: 16px;
    color: var(--kk-black);
}


/* ---------- Page wrapper ----------
   Used on pages the snippets render themselves (shop
   category archives, product pages, machine pages).
   The space for a fixed header comes from section 17,
   so the wrapper itself adds none. */

.kk-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-top: 0;
    padding-inline: var(--padding-horizontal, clamp(1rem, 4vw, 4rem));

    background: var(--color-white, #ffffff);
}

/* Shop and category pages built from the «Alle» page: the
   Elementor containers give the side padding, exactly as
   on «Alle» itself. */

.kk-page.kk-page--layout {
    padding-inline: 0;
}

.kk-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}


/* ---------- Shop intro ---------- */

.kk-scope .kk-shop__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm, 1.25rem);

    padding-block: var(--space-xs, 0.75rem) var(--space-md, 2rem);

    text-align: center;
}

.kk-scope .kk-shop__title {
    font-size: clamp(44px, 5vw, 72px);
    line-height: 1;
}

.kk-scope .kk-shop__lead {
    max-width: 46ch;
    margin: 0;

    font-size: 17px;
    font-weight: 300;
    line-height: 1.7;
}


/* ---------- Category buttons ----------
   One button per category with an icon (Tabler Icons, MIT),
   the name and the number of products. Compact: icon on the
   left, name and count beside it (desktop), icon above
   (tablet). Phones get the dropdown below. */

.kk-scope .kk-cats {
    display: grid;
    grid-template-columns: repeat(var(--kk-cat-half, 5), minmax(0, 1fr));
    gap: 10px;

    margin: 0;
    padding: 0 0 var(--space-sm, 1.25rem);
}

.kk-scope .kk-cat {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto; /* round 8: the count sits beside the name */
    grid-template-rows: 1fr;
    align-content: center;
    align-items: center; /* round 8b: icon, name and number centred vertically */
    column-gap: 10px;

    min-height: 52px;
    padding: 8px 10px 8px 8px;

    font-family: var(--kk-sans);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    color: var(--kk-black);
    text-decoration: none;
    white-space: normal;
    overflow-wrap: break-word;

    background: var(--kk-white);
    border: 1px solid var(--kk-line);
    border-radius: 12px;

    transition: background-color var(--kk-ease), border-color var(--kk-ease), color var(--kk-ease), transform var(--kk-ease);
}

.kk-scope .kk-cat:hover {
    color: var(--kk-black);
    background: var(--kk-cream);
    border-color: var(--kk-gold);
    transform: translateY(-1px);
}

.kk-scope .kk-cat.is-active,
.kk-scope .kk-cat.is-active:hover {
    color: var(--kk-white);
    background: var(--kk-black);
    border-color: var(--kk-black);
    transform: none;
}

.kk-scope .kk-cat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;

    color: var(--color-gold-text);
    background: var(--kk-cream);
    border-radius: 50%;

    transition: background-color var(--kk-ease), color var(--kk-ease);
}

.kk-scope .kk-cat:hover .kk-cat__icon {
    background: var(--kk-white);
}

.kk-scope .kk-cat.is-active .kk-cat__icon {
    color: var(--kk-black);
    background: var(--kk-white);
}

.kk-scope .kk-cat__svg {
    display: block;
    width: 21px;
    height: 21px;
}

.kk-scope .kk-cat__name {
    grid-column: 2;
    text-wrap: balance;
}

/* «Alle» has no count: the name takes the whole width */
.kk-scope .kk-cat__name:last-child {
    grid-column: 2 / -1;
}

/* Round 8: a small number on the same line as the name */
.kk-scope .kk-cat__count {
    grid-column: 3;

    min-width: 1.9em;
    padding: 2px 6px;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    text-align: center;

    color: var(--color-gold-text);
    background: var(--kk-cream);
    border-radius: 999px;

    transition: background-color var(--kk-ease), color var(--kk-ease);
}

.kk-scope .kk-cat:hover .kk-cat__count {
    background: var(--kk-white);
}

.kk-scope .kk-cat.is-active .kk-cat__count {
    color: var(--color-gold-on-dark);
    background: rgba(255, 255, 255, 0.12);
}

/* Round 8c: always one line of icon | name | number. The name is
   left-aligned (also when it wraps), and the icon and number are
   centred on the button's height. Extra weight so no theme or
   Elementor text-align can centre it. */

.kk-scope .kk-cats .kk-cat {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
    justify-content: stretch;
    align-items: center;
    text-align: left;
}

.kk-scope .kk-cats .kk-cat > * {
    grid-row: 1;
    align-self: center;
}

.kk-scope .kk-cats .kk-cat__icon {
    grid-column: 1;
}

.kk-scope .kk-cats .kk-cat__name {
    grid-column: 2;
    justify-self: start;
    text-align: left;
}

.kk-scope .kk-cats .kk-cat__name:last-child {
    grid-column: 2 / -1;
}

.kk-scope .kk-cats .kk-cat__count {
    grid-column: 3;
    justify-self: end;
}

/* Tablet: fewer columns, same side-by-side layout (round 8b) */

@media (min-width: 768px) and (max-width: 1024px) {

    /* Round 8b: no stacked layout any more (it looked odd in narrow
       buttons). Fewer, wider buttons per row instead, so the icon,
       name and number always sit side by side, centred. */
    .kk-scope .kk-cats {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }
}


/* ---------- Category dropdown (tablet + phone) ---------- */

.kk-scope .kk-catselect {
    display: none;
    position: relative;
    z-index: 20;
}

.kk-scope .kk-catselect__details {
    position: relative;
}

.kk-scope .kk-catselect__toggle {
    display: flex;
    align-items: center;
    gap: 14px;

    min-height: 64px;
    padding: 8px 2px;

    font-size: 16px;
    font-weight: 500;
    color: var(--kk-black);

    border-bottom: 1px solid var(--kk-gold);

    list-style: none;
    cursor: pointer;
}

.kk-scope .kk-catselect__toggle::-webkit-details-marker {
    display: none;
}

.kk-scope .kk-catselect__toggle:focus-visible {
    outline: 2px solid var(--kk-gold);
    outline-offset: 3px;
}

.kk-scope .kk-catselect__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.kk-scope .kk-catselect__current {
    font-size: 18px;
}

.kk-scope .kk-catselect__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    flex: none;

    color: var(--color-gold-text);
    background: var(--kk-cream);
    border-radius: 50%;
}

.kk-scope .kk-catselect__icon .kk-cat__svg {
    width: 24px;
    height: 24px;
}

.kk-scope .kk-catselect__name {
    flex: 1;
}

.kk-scope .kk-catselect__link .kk-cat__count {
    margin-top: 0;
}

.kk-scope .kk-catselect__chevron {
    transition: transform var(--kk-ease);
}

.kk-scope .kk-catselect__details[open] .kk-catselect__chevron {
    transform: rotate(180deg);
}

.kk-scope .kk-catselect__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    max-height: 60vh;
    overflow-y: auto;

    margin: 0;
    padding: 8px 0;

    list-style: none;

    background: var(--kk-white);
    border: 1px solid var(--kk-line);
    border-top: 0;
    box-shadow: 0 16px 40px rgba(28, 27, 25, 0.08);
}

.kk-scope .kk-catselect__list li {
    margin: 0;
}

.kk-scope .kk-catselect__list li::marker {
    content: none;
}

.kk-scope .kk-catselect__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    min-height: 56px;
    padding: 8px 18px;

    font-size: 17px;
    color: var(--kk-black);
    text-decoration: none;

    transition: background-color var(--kk-ease);
}

.kk-scope .kk-catselect__link:hover,
.kk-scope .kk-catselect__link:focus-visible {
    background: var(--kk-cream);
    color: var(--kk-black);
}

.kk-scope .kk-catselect__link.is-active {
    font-weight: 600;
}

.kk-scope .kk-catselect__link.is-active .kk-catselect__name {
    text-decoration: underline;
    text-decoration-color: var(--kk-gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35em;
}


/* ---------- Toolbar ---------- */

.kk-scope .kk-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm, 1.25rem);

    padding-block: var(--space-sm, 1.25rem) var(--space-lg, 3rem);
}

.kk-scope .kk-toolbar__count,
.kk-scope .kk-sort label {
    font-size: 16px;
    color: var(--kk-black);
}

.kk-scope .kk-sort {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0;
}

.kk-scope .kk-sort select {
    width: auto;
    min-height: 44px;
    padding: 0 4px;

    font-family: var(--kk-sans);
    font-size: 16px;
    font-weight: 500;
    color: var(--kk-black);

    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--kk-gold);
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
}


/* ---------- Grid ---------- */

.kk-scope .kk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    column-gap: var(--space-md, 2rem);
    row-gap: var(--space-xl, 5rem);
}

/* Switching category / page / sorting: the list fades out
   a little while the new one loads, then fades in. The
   category buttons stay put. */

.kk-shop :is(.kk-shop__intro, .kk-toolbar, .kk-grid, .kk-empty, .kk-pagination) {
    transition: opacity 0.48s var(--ease-premium), transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.kk-shop.is-loading :is(.kk-shop__intro, .kk-toolbar, .kk-grid, .kk-empty, .kk-pagination) {
    opacity: 0.35;
    transition-duration: 0.24s;
}

.kk-shop.is-loading .kk-grid {
    pointer-events: none;
}

.kk-shop.is-entering :is(.kk-shop__intro, .kk-toolbar, .kk-grid, .kk-empty, .kk-pagination) {
    opacity: 0;
    transform: translateY(8px);
    transition: none;
}

@media (prefers-reduced-motion: reduce) {

    .kk-shop.is-entering :is(.kk-shop__intro, .kk-toolbar, .kk-grid, .kk-empty, .kk-pagination) {
        transform: none;
    }
}


/* ---------- Product card (shop + related) ---------- */

.kk-scope .kk-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 1.25rem);

    min-width: 0;
}

.kk-scope .kk-card__media {
    display: flex;
    align-items: center;
    justify-content: center;

    aspect-ratio: 4 / 5;
    padding: var(--space-md, 2rem);
    overflow: hidden;

    background: var(--kk-cream);
}

.kk-scope .kk-card__img {
    display: block;

    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;

    object-fit: contain;       /* never crop – the whole product is visible */
    mix-blend-mode: multiply;  /* white product photos blend into the tile */

    transition: transform 0.75s var(--ease-premium);
}

.kk-scope .kk-card:hover .kk-card__img {
    transform: scale(1.04);
}

.kk-scope .kk-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;

    padding-inline: 2px;
}

.kk-scope .kk-card__title {
    font-size: 24px;
    line-height: 1.15;
}

.kk-scope .kk-card__title a {
    color: var(--kk-black);
    text-decoration: none;

    transition: color var(--kk-ease);
}

.kk-scope .kk-card__title a:hover {
    color: var(--color-gold-text);
}

.kk-scope .kk-card__pack {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
    color: var(--kk-black);
}

.kk-scope .kk-card__price,
.kk-scope .kk-product__price {
    margin-top: 4px;

    font-family: var(--kk-sans);
    font-size: 16px;
    font-weight: 500;
    color: var(--kk-black);
}

.kk-scope .kk-card__price del,
.kk-scope .kk-product__price del {
    margin-right: 6px;
    font-weight: 300;
    opacity: 0.5;
}

.kk-scope .kk-card__price ins,
.kk-scope .kk-product__price ins {
    color: var(--color-gold-text);
    text-decoration: none;
}

.kk-scope .kk-card__actions {
    margin-top: auto;
    padding-top: var(--space-xs, 0.75rem);
    padding-inline: 2px;

    container-type: inline-size;
}

/* Narrow cards (three in a row on a portrait tablet, «Produkter for …»
   on the machine pages, two in a row on phones): quantity above a
   full-width button, so «Legg i kurv» keeps its padding. */

@container (max-width: 290px) {

    .kk-scope .kk-buy--card {
        flex-direction: column;
        align-items: stretch;
    }

    .kk-scope .kk-buy--card .kk-qty {
        justify-content: space-between;
    }

    .kk-scope .kk-buy--card .kk-btn {
        width: 100%;
        padding-inline: 16px;
    }
}


/* ---------- Empty + pagination ---------- */

.kk-scope .kk-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs, 0.75rem);

    padding-block: var(--space-xl, 5rem);

    text-align: center;
}

.kk-scope .kk-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md, 2rem);

    margin-top: var(--space-xl, 5rem);

    font-size: 16px;
    letter-spacing: 0.04em;
}

.kk-scope .kk-pagination__link {
    display: inline-flex;
    align-items: center;

    min-height: 44px;

    font-weight: 500;
    color: var(--color-gold-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;

    transition: color var(--kk-ease);
}

.kk-scope .kk-pagination__link:hover {
    color: var(--kk-black);
}

.kk-scope .kk-pagination__link.is-disabled {
    color: var(--kk-black);
    text-decoration: none;
    opacity: 0.3;
}

.kk-scope .kk-pagination__status {
    color: var(--kk-black);
}


/* ---------- Feature band (below the products) ---------- */

.kk-scope .kk-feature {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-md, 2rem);

    margin-top: var(--space-xl, 5rem);
    padding: var(--space-xl, 5rem) var(--space-lg, 3rem);

    background: var(--kk-blue);
}

.kk-scope .kk-feature__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 1.25rem);

    max-width: 640px;
}

.kk-scope .kk-feature__label,
.kk-scope .kk-feature__title,
.kk-scope .kk-feature__text {
    color: var(--kk-white);
}

.kk-scope .kk-feature__title {
    font-size: clamp(34px, 3.4vw, 50px);
    line-height: 1.05;
}

.kk-scope .kk-feature__text {
    margin: 0;

    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
}

.kk-scope .kk-feature__link {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    min-height: 52px;
    padding: 0 28px;

    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;

    color: var(--kk-white);
    border: 1px solid var(--kk-white);
    border-radius: 999px;

    transition: background-color var(--kk-ease), color var(--kk-ease);
}

.kk-scope .kk-feature__link:hover {
    color: var(--kk-black);
    background: var(--kk-white);
}

.kk-scope .kk-feature__arrow {
    transition: transform var(--kk-ease);
}

.kk-scope .kk-feature__link:hover .kk-feature__arrow {
    transform: translateX(4px);
}


/* ---------- Product page: breadcrumb ---------- */

.kk-scope .kk-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;

    margin-bottom: var(--space-md, 2rem);

    font-size: 16px;
    color: var(--kk-black);
}

.kk-scope .kk-breadcrumb__link {
    color: var(--color-gold-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;

    transition: color var(--kk-ease);
}

.kk-scope .kk-breadcrumb__link:hover {
    color: var(--kk-black);
}

.kk-scope .kk-breadcrumb__sep {
    color: var(--kk-black);
    opacity: 0.3;
}

.kk-scope .kk-breadcrumb__current {
    color: var(--kk-black);
}


/* ---------- Product page: main row ---------- */

.kk-scope .kk-product__main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-xl, 5rem);
}

.kk-scope .kk-product__media {
    display: flex;
    flex: 1.15 1 420px;
    align-items: center;
    justify-content: center;

    min-width: 0;
    aspect-ratio: 4 / 5;
    padding: var(--space-xl, 5rem);

    background: var(--kk-cream);
}

.kk-scope .kk-product__img {
    width: 100%;
    height: 100%;
    max-height: 100%;

    object-fit: contain;
    mix-blend-mode: multiply;
}

.kk-scope .kk-product__summary {
    display: flex;
    flex: 1 1 360px;
    flex-direction: column;
    gap: var(--space-md, 2rem);

    min-width: 0;
    max-width: 540px;
}

.kk-scope .kk-product__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 1.25rem);
}

.kk-scope .kk-product__title {
    font-size: clamp(40px, 4vw, 60px);
    line-height: 1.02;
}

.kk-scope .kk-product__price {
    margin-top: 0;
    font-size: 22px;
    font-weight: 400;
}

.kk-scope .kk-product__lead,
.kk-scope .kk-product__lead p {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--kk-black);
}

.kk-scope .kk-product__lead > :last-child {
    margin-bottom: 0;
}

.kk-scope .kk-product__buy {
    padding-block: var(--space-sm, 1.25rem);

    border-top: 1px solid var(--kk-line);
    border-bottom: 1px solid var(--kk-line);
}

.kk-scope .kk-buy--single .kk-qty__btn {
    width: 46px;
    height: 54px;
}

.kk-scope .kk-buy--single .kk-qty__input {
    height: 54px;
}

.kk-scope .kk-buy--single .kk-btn,
.kk-scope .kk-product__buy > .kk-btn {
    min-height: 56px;
    font-size: 15px;
}

.kk-scope .kk-product__sku {
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--kk-black);
}


/* ---------- Product page: specs (pack contents etc.) ---------- */

.kk-scope .kk-specs {
    display: flex;
    flex-direction: column;

    margin: 0;

    border-top: 1px solid var(--kk-line);
}

.kk-scope .kk-specs__row {
    display: grid;
    grid-template-columns: minmax(120px, 2fr) minmax(0, 3fr);
    gap: var(--space-sm, 1.25rem);

    padding-block: 12px;

    border-bottom: 1px solid var(--kk-line);
}

.kk-scope .kk-specs__label,
.kk-scope .kk-specs__value {
    margin: 0;

    font-size: 17px;
    line-height: 1.5;
    color: var(--kk-black);
}

.kk-scope .kk-specs__label {
    font-weight: 600;
}

.kk-scope .kk-specs__value {
    font-weight: 300;
}


/* ---------- Product page: delivery note + description ---------- */

.kk-scope .kk-product__delivery {
    margin: var(--space-xs, 0.75rem) 0 0;

    font-size: 16px;
    font-weight: 300;
}

.kk-scope .kk-product__desc {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--kk-black);
}

.kk-scope .kk-product__desc-title {
    display: block;
    margin: 0 0 var(--space-xs, 0.75rem);

    font-family: var(--kk-sans);
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-gold-text);
}

.kk-scope .kk-product__desc > :last-child {
    margin-bottom: 0;
}


/* ---------- Product page: related ---------- */

.kk-scope .kk-related {
    margin-top: var(--space-xl, 5rem);
    padding-top: var(--space-xl, 5rem);

    border-top: 1px solid var(--kk-line);
}

.kk-scope .kk-related__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs, 0.75rem);

    margin-bottom: var(--space-lg, 3rem);

    text-align: center;
}

.kk-scope .kk-related__title {
    font-size: clamp(32px, 3vw, 44px);
    line-height: 1.1;
}

/* Hide WooCommerce's / Elementor's own related + upsell lists when ours is on the page */

body:has(.kk-related) section.related.products,
body:has(.kk-related) section.up-sells.upsells,
body:has(.kk-related) .elementor-widget-woocommerce-product-related,
body:has(.kk-related) .elementor-widget-woocommerce-product-upsell {
    display: none !important;
}


/* =========================================================
   19. CART  (header button + slide-in cart)
   ========================================================= */

/* ---------- Header button ---------- */

button.kk-cart-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-height: 44px;
    margin: 0;
    padding: 0 4px;

    font-family: var(--font-body-family);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--color-white, #ffffff);

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;

    transition: color 0.38s var(--ease-premium);
}

button.kk-cart-trigger--light {
    color: var(--color-black, #1c1b19);
}

button.kk-cart-trigger:hover,
button.kk-cart-trigger:focus {
    color: var(--color-gold, #A68553);
    background: transparent;
}

button.kk-cart-trigger:focus-visible {
    outline: 2px solid var(--color-gold, #A68553);
    outline-offset: 4px;
}

.kk-cart-trigger__icon,
.kk-header__icon {
    flex: none;
}

/* The count sits on the upper right corner of the bag icon */

.kk-cart-trigger__iconwrap {
    position: relative;
    display: inline-flex;
}

.kk-cart-meta {
    position: absolute;
    top: -7px;
    right: -9px;

    display: inline-flex;
    line-height: 1;
}

.kk-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 17px;
    height: 17px;
    padding: 0 4px;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;

    color: var(--color-black, #1c1b19);
    background: var(--color-gold, #A68553);
    border-radius: 999px;
}

.kk-cart-count.is-empty {
    display: none; /* no badge when the cart is empty */
}


/* ---------- Scroll lock while a panel is open ----------
   The scrollbar's width is put back as padding so the page
   and the fixed header don't jump sideways. */

html.kk-cart-locked {
    overflow: hidden;
    padding-right: var(--kk-scrollbar, 0px);
}

html.kk-cart-locked .header-fixed {
    width: calc(100% - var(--kk-scrollbar, 0px)) !important;
}


/* ---------- Slide-in cart ---------- */

.kk-cart {
    position: fixed;
    inset: 0;
    z-index: 100000; /* above the fixed header */

    visibility: hidden;
    pointer-events: none;

    transition: visibility 0s linear 0.8s;
}

.kk-cart.is-open {
    visibility: visible;
    pointer-events: auto;

    transition: none;
}

.kk-cart__overlay {
    position: absolute;
    inset: 0;

    background: rgba(28, 27, 25, 0.45);

    opacity: 0;
    transition: opacity 0.6s var(--ease-premium);
}

.kk-cart.is-open .kk-cart__overlay {
    opacity: 1;
}

/* The panel uses .kk-scope for its styles, but not its page layout */

.kk-scope.kk-cart__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;

    display: flex;
    flex-direction: column;

    width: min(460px, 100%);
    max-width: none;
    margin: 0;
    padding: 0;

    background: var(--kk-white);
    box-shadow: -20px 0 60px rgba(28, 27, 25, 0.12);

    transform: translateX(100%);
    transition: transform 0.8s var(--ease-glide);
}

.kk-cart.is-open .kk-scope.kk-cart__panel {
    transform: translateX(0);
}

.kk-scope.kk-cart__panel:focus {
    outline: none;
}

.kk-cart.is-busy .kk-cart__inner {
    opacity: 0.5;
    pointer-events: none;
}


/* ---------- Cart: head ---------- */

.kk-scope .kk-cart__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm, 1.25rem);

    padding: var(--space-md, 2rem) var(--space-md, 2rem) var(--space-sm, 1.25rem);

    border-bottom: 1px solid var(--kk-line);
}

.kk-scope .kk-cart__title {
    font-size: 34px;
    line-height: 1;
}

.kk-scope .kk-cart__close {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;

    color: var(--kk-black);
    background: transparent;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    cursor: pointer;

    transition: color var(--kk-ease);
}

.kk-scope .kk-cart__close:hover,
.kk-scope .kk-cart__close:focus {
    color: var(--color-gold-text);
    background: transparent;
}

.kk-scope .kk-cart__close:focus-visible {
    outline: 2px solid var(--kk-gold);
    outline-offset: 2px;
}


/* ---------- Cart: body ---------- */

.kk-scope .kk-cart__inner {
    display: flex;
    flex: 1;
    flex-direction: column;

    min-height: 0;

    transition: opacity var(--kk-ease);
}

.kk-scope .kk-cart__items {
    flex: 1;
    min-height: 0;
    overflow-y: auto;

    margin: 0;
    padding: 0 var(--space-md, 2rem);

    list-style: none;
}

.kk-scope .kk-cart-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: var(--space-sm, 1.25rem);

    padding-block: var(--space-sm, 1.25rem);

    border-bottom: 1px solid var(--kk-line);
}

.kk-scope .kk-cart-item::marker {
    content: none;
}

.kk-scope .kk-cart-item__media {
    display: flex;
    align-items: center;
    justify-content: center;

    aspect-ratio: 4 / 5;
    padding: 8px;

    background: var(--kk-cream);
}

.kk-scope .kk-cart-item__img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    mix-blend-mode: multiply;
}

.kk-scope .kk-cart-item__body {
    display: flex;
    flex-direction: column;
    gap: 4px;

    min-width: 0;
}

.kk-scope .kk-cart-item__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs, 0.75rem);
}

.kk-scope .kk-cart-item__title {
    font-size: 20px;
    line-height: 1.15;
}

.kk-scope .kk-cart-item__title a {
    color: var(--kk-black);
    text-decoration: none;

    transition: color var(--kk-ease);
}

.kk-scope .kk-cart-item__title a:hover {
    color: var(--color-gold-text);
}

.kk-scope .kk-cart-item__price {
    flex: none;

    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
}

.kk-scope .kk-cart-item__pack,
.kk-scope .kk-cart-item__single {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.4;
}

.kk-scope .kk-cart-item__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs, 0.75rem);

    margin-top: auto;
    padding-top: 10px;
}

.kk-scope .kk-qty--sm .kk-qty__btn {
    width: 34px;
    height: 38px;
    font-size: 16px;
}

.kk-scope .kk-qty--sm .kk-qty__input {
    width: 2rem;
    height: 38px;
    font-size: 16px;
}

.kk-scope .kk-cart-item__remove {
    min-height: 38px;
    font-size: 15px;
}


/* ---------- Cart: foot ---------- */

.kk-scope .kk-cart__foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 0.75rem);

    padding: var(--space-sm, 1.25rem) var(--space-md, 2rem) var(--space-md, 2rem);

    border-top: 1px solid var(--kk-line);
}

.kk-scope .kk-cart__subtotal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm, 1.25rem);
}

.kk-scope .kk-cart__amount {
    font-size: 22px;
    font-weight: 500;
}

.kk-scope .kk-cart__note {
    margin: 0 0 var(--space-xs, 0.75rem);

    font-size: 15px;
    font-weight: 300;
}

.kk-scope .kk-cart__checkout {
    min-height: 56px;
    font-size: 15px;
}

.kk-scope .kk-cart__view {
    align-self: center;
}

/* «Fortsett å handle»: outlined, under the main button. On a shop
   or product page it just closes the cart; elsewhere it opens the
   shop. (2026-11-05) */

.kk-scope .kk-btn--outline {
    gap: 12px;

    color: var(--kk-black);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--kk-black);
}

.kk-scope .kk-btn--outline:hover,
.kk-scope .kk-btn--outline:focus {
    color: var(--kk-black);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--kk-gold);
}

.kk-scope .kk-btn--outline svg {
    flex: none;
    transition: transform 0.6s var(--ease-glide);
}

.kk-scope .kk-btn--outline:hover svg {
    transform: translateX(-4px);
}

.kk-scope .kk-cart__continue {
    min-height: 52px;
}


/* ---------- Cart: empty ---------- */

.kk-scope .kk-cart__empty {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs, 0.75rem);

    padding: var(--space-xl, 5rem) var(--space-md, 2rem);

    text-align: center;
}

.kk-scope .kk-cart__empty p {
    margin: 0;

    font-family: var(--kk-serif);
    font-size: 26px;
}


/* ---------- Cart panel: more compact (round 7c) ----------
   Smaller title, pictures, text and buttons, so more items fit
   and the panel feels lighter. «10 × 500 g» under each name
   shows how much is ordered (.kk-cart-item__amount). */

.kk-scope .kk-cart__head {
    padding: var(--space-sm, 1.25rem) var(--space-md, 2rem) 14px;
}

.kk-scope .kk-cart__title {
    font-size: 26px;
}

.kk-scope .kk-cart__close {
    width: 40px;
    height: 40px;
}

.kk-scope .kk-cart-item {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    padding-block: 14px;
}

.kk-scope .kk-cart-item__media {
    padding: 6px;
}

.kk-scope .kk-cart-item__title {
    font-size: 17px;
    line-height: 1.2;
}

.kk-scope .kk-cart-item__pack,
.kk-scope .kk-cart-item__single {
    font-size: 13px;
}

.kk-scope .kk-cart-item__amount {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--color-gold-text);
}

.kk-scope .kk-cart-item__actions {
    padding-top: 6px;
}

.kk-scope .kk-qty--sm .kk-qty__btn {
    width: 30px;
    height: 32px;
    font-size: 15px;
}

.kk-scope .kk-qty--sm .kk-qty__input {
    width: 1.9rem;
    height: 32px;
    font-size: 15px;
}

.kk-scope .kk-cart-item__remove {
    min-height: 32px;
    font-size: 13px;
}

.kk-scope .kk-cart__foot {
    gap: 10px;
    padding: 14px var(--space-md, 2rem) var(--space-sm, 1.25rem);
}

.kk-scope .kk-cart__amount {
    font-size: 18px;
}

.kk-scope .kk-cart__note {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.45;
}

.kk-scope .kk-cart__checkout {
    min-height: 48px;
    font-size: 14px;
}

.kk-scope .kk-cart__continue {
    min-height: 44px;
    font-size: 14px;
}

.kk-scope .kk-cart__view {
    font-size: 14px;
}

.kk-scope .kk-cart__empty p {
    font-size: 22px;
}


/* ---------- Cart page: the same list as the panel ----------
   The cart page (shop snippet 1.19.0) shows the panel's list
   with the same +/− and «10 × 500 g», and the summary in a
   cream box beside it (under it on phones). */

.kk-scope.kk-cartpage .kk-cartpage__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md, 2rem);

    transition: opacity var(--kk-ease);
}

.kk-scope.kk-cartpage.is-busy .kk-cartpage__inner {
    opacity: 0.5;
    pointer-events: none;
}

.kk-scope.kk-cartpage .kk-cart__items {
    overflow: visible;
    padding: 0;
    border-top: 1px solid var(--kk-line);
}

.kk-scope.kk-cartpage .kk-cart-item {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-sm, 1.25rem);
    padding-block: var(--space-sm, 1.25rem);
}

.kk-scope.kk-cartpage .kk-cart-item__title {
    font-size: clamp(18px, 1rem + 0.4vw, 22px);
}

.kk-scope.kk-cartpage .kk-cart-item__amount {
    font-size: 14px;
}

.kk-scope.kk-cartpage .kk-cart__foot {
    align-self: start;

    padding: var(--space-md, 2rem);

    background: var(--kk-cream);
    border-top: 0;
}

.kk-scope.kk-cartpage .kk-cart__empty {
    padding: var(--space-lg, 3rem) var(--space-md, 2rem);
    background: var(--kk-cream);
}

@media (min-width: 1025px) {

    .kk-scope.kk-cartpage .kk-cartpage__inner {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: var(--space-lg, 3rem);
    }

    .kk-scope.kk-cartpage .kk-cart__foot {
        position: sticky;
        top: calc(var(--kk-header-height, 96px) + var(--space-sm, 1.25rem));
    }
}

@media (max-width: 767px) {

    .kk-scope.kk-cartpage .kk-cart-item {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 14px;
    }

    .kk-scope.kk-cartpage .kk-cart__foot {
        padding: var(--space-sm, 1.25rem);
    }
}


/* =========================================================
   20. HEADER  (.kk-header) + HERO OVERLAY
   ---------------------------------------------------------
   Header shortcode from the shop snippet. Place it in the
   Elementor header template, inside the outer container
   with the class  header-fixed  (section 17).
   ========================================================= */

.kk-header {
    --kk-header-fg: var(--color-white, #ffffff);
    --kk-logo-h: 52px;

    width: 100%;

    font-family: var(--font-body-family);
    color: var(--kk-header-fg);

    /* Black by default. Transparent over a hero with
       .kk-hero-overlay while the page is at the top. */
    background-color: var(--color-black, #1c1b19);
}

html.hdr-ready .kk-header {
    transition: background-color 0.52s var(--ease-premium);
}

.kk-header--light {
    --kk-header-fg: var(--color-black, #1c1b19);

    background-color: var(--color-white, #ffffff);
}

/* Over a hero: always see-through, the black comes from
   .header-fixed::before (section 17). */
body:is(.kk-has-hero, :has(.kk-hero-overlay)) .kk-header {
    background-color: transparent;
}

.kk-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-sm, 1.25rem);

    width: 100%;
    max-width: var(--site-container-width);   /* same container as the page and footer */
    min-height: 96px;
    margin-inline: auto;
    padding: 14px var(--padding-horizontal);
}

.kk-header__side {
    display: flex;
    align-items: center;
    gap: var(--space-md, 2rem);

    min-width: 0;
}

.kk-header__side--right {
    justify-content: flex-end;
}

.kk-header__logo {
    display: flex;
    align-items: center;
    justify-content: center;

    line-height: 0;
}

/* Logo size: --kk-logo-h comes from [kronen_header logo_height=""].
   It shows a little smaller than that, and smaller still on
   tablets and phones (see the media rules at the end). */
.kk-header__logo {
    --kk-logo-size: calc(var(--kk-logo-h) * 0.8);
}

.kk-header__logo img,
.kk-header__logo .kk-logo-svg {
    display: block;

    width: auto;
    height: var(--kk-logo-size);
    max-width: 42vw;

    object-fit: contain;
    overflow: visible; /* the crown may rise above the box */
}

.kk-header__logo--white :is(img, .kk-logo-svg) {
    filter: brightness(0) invert(1);
}

.kk-header__logo--black :is(img, .kk-logo-svg) {
    filter: brightness(0);
}

/* The crown (header and footer logo). The shop snippet finds the
   crown in the SVG logo, wraps it in .kk-crown-part and adds a
   little room above the logo inside the SVG (.kk-has-room), so
   the lifted crown is never cut off. The two rules below keep
   the logo the same size and in the same place.
   Click: the crown is lifted off (.is-crown-up) and stays up
   while the next page loads. The page it opens puts it back on
   (.is-crown-on); other pages show it at rest. It is lifted as
   with one hand: it pivots on its left edge and tips left
   (--kk-crown-tilt, set from the crown's width, so a wide crown
   tips less and its corner stays inside the room). No glow and no shadow. If no crown is found,
   the whole logo moves a few pixels instead. */

.kk-crown-logo .kk-logo-svg.kk-has-room {
    height: calc(var(--kk-logo-size) * (1 + var(--kk-crown-room, 0)));
    margin-top: calc(var(--kk-logo-size) * -1 * var(--kk-crown-room, 0));
}

.sf-footer .kk-crown-logo .kk-logo-svg.kk-has-room {
    height: calc(var(--sf-logo-size, 40px) * (1 + var(--kk-crown-room, 0)));
    margin-top: calc(var(--sf-logo-size, 40px) * -1 * var(--kk-crown-room, 0));
}

.kk-crown-logo,
.kk-crown-logo:hover,
.kk-crown-logo:focus {
    filter: none;
    box-shadow: none;
    text-shadow: none;
}

.kk-crown-logo .kk-crown-part {
    transform-box: fill-box;
    transform-origin: 0% 100%; /* the left edge: lifted with one hand from the right */
}

.kk-crown-logo.kk-crown-whole :is(img, .kk-logo-svg) {
    transition: transform 0.5s var(--ease-premium);
}

/* Lifting: the right side comes up first (it tips to the left),
   then the whole crown rises and stays up.
   Round 7d: one smooth motion. Tilt (rotate) and lift
   (translate) run as two separate, overlapping animations, each
   with a single easing curve, so the crown never stops halfway
   (the old keyframes paused at each step). */
.kk-crown-logo.is-crown-up .kk-crown-part {
    animation:
        kk-crown-tilt-off 0.38s cubic-bezier(0.4, 0, 0.4, 1) both,
        kk-crown-lift-off 0.42s 0.04s cubic-bezier(0.4, 0, 0.4, 1) both; /* round 8: about 30 % faster */
}

.kk-crown-logo.is-crown-held .kk-crown-part {
    translate: 0 calc(-1 * var(--kk-crown-lift, 4px));
    rotate: var(--kk-crown-tilt, -5deg);
}

.kk-crown-logo.is-crown-up.kk-crown-whole :is(img, .kk-logo-svg) {
    transform: translateY(-4px);
}

/* Putting it back on: it comes down still tipped, so the left
   edge lands first and the right side follows. Round 7e: an
   even pace all the way down, with no slowing before it lands
   (it starts gently and keeps its speed to the end). */
.kk-crown-logo.is-crown-on .kk-crown-part {
    animation:
        kk-crown-lift-on 0.42s 0.06s cubic-bezier(0.4, 0, 0.75, 0.75) both,
        kk-crown-tilt-on 0.42s 0.15s cubic-bezier(0.4, 0, 0.75, 0.75) both; /* round 8: faster */
}

.kk-crown-logo.is-crown-on.kk-crown-whole :is(img, .kk-logo-svg) {
    animation: kk-crown-on-whole 0.8s 0.08s both;
}

@keyframes kk-crown-tilt-off {
    from { rotate: 0deg; }
    to   { rotate: var(--kk-crown-tilt, -5deg); }
}

@keyframes kk-crown-lift-off {
    from { translate: 0 0; }
    to   { translate: 0 calc(-1 * var(--kk-crown-lift, 4px)); }
}

@keyframes kk-crown-lift-on {
    from { translate: 0 calc(-1 * var(--kk-crown-lift, 4px)); }
    to   { translate: 0 0; }
}

@keyframes kk-crown-tilt-on {
    from { rotate: var(--kk-crown-tilt, -5deg); }
    to   { rotate: 0deg; }
}

@keyframes kk-crown-on-whole {
    0%   { transform: translateY(-4px); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
    74%  { transform: translateY(0.4px); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); }
    100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {

    .kk-crown-logo .kk-crown-part,
    .kk-crown-logo :is(img, .kk-logo-svg) {
        transition: none;
        animation: none !important;
    }
}


/* ---------- Links + buttons ---------- */

.kk-header a.kk-header__link,
.kk-header button.kk-header__btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-height: 44px;
    margin: 0;
    padding: 0;

    font-family: var(--font-body-family);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--kk-header-fg);
    text-decoration: none;
    white-space: nowrap;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;

    transition: color 0.38s var(--ease-premium);
}

/* Gold on mouse-over, and for keyboard focus. Not after a tap or
   a click (round 7f): on a tablet the colour used to stick until
   you tapped somewhere else, e.g. on the menu button after the
   menu closed. */
@media (hover: hover) {
    .kk-header a.kk-header__link:hover,
    .kk-header button.kk-header__btn:hover {
        color: var(--color-gold, #A68553);
        background: transparent;
    }
}

.kk-header button.kk-header__btn:focus-visible {
    color: var(--color-gold, #A68553);
    background: transparent;
}

.kk-header button.kk-header__btn:focus:not(:focus-visible) {
    color: var(--kk-header-fg);
    background: transparent;
}

.kk-header a.kk-header__link:focus-visible,
.kk-header button.kk-header__btn:focus-visible {
    outline: 2px solid var(--color-gold, #A68553);
    outline-offset: 4px;
}


/* ---------- Gold underline under the order link (hover + current page) ---------- */

.kk-header .kk-header__order .kk-header__text {
    position: relative;
}

.kk-header .kk-header__order .kk-header__text::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;

    height: 1px;

    background: var(--color-gold, #A68553);

    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.38s var(--ease-premium);
}

.kk-header .kk-header__order:hover .kk-header__text::after,
.kk-header .kk-header__order.is-active .kk-header__text::after {
    transform: scaleX(1);
}

.kk-header .kk-header__order.is-active {
    color: var(--kk-header-fg);
}


/* ---------- Burger icon ---------- */

.kk-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;

    width: 22px;
    height: 22px;
}

.kk-burger span {
    display: block;

    width: 100%;
    height: 1.4px;

    background: currentColor;

    transition: width 0.38s var(--ease-premium);
}

.kk-burger span:last-child {
    width: 65%;
}

@media (hover: hover) {
    .kk-header__menu-btn:hover .kk-burger span:last-child {
        width: 100%;
    }
}


/* ---------- Transparent header over a hero ----------
   Add the class  kk-hero-overlay  to the hero container
   (Elementor: Advanced › CSS Classes). The header is then
   transparent over it while the page is at the top
   (section 17). With a fixed header the hero starts at the
   very top of the page, under the header; the header
   height is added to the hero's own top padding so its
   content is never hidden.
   (Without a fixed header the shop snippet's JS pulls the
   hero up instead, via --kk-hero-pull.) */

.kk-hero-overlay {
    margin-top: calc(-1 * var(--kk-hero-pull, 0px)) !important;
}

/* Elementor containers keep their padding in --padding-top */

.kk-hero-overlay.e-con {
    padding-top: calc(var(--padding-top, 0px) + max(var(--header-offset, 0px), var(--kk-hero-pull, 0px))) !important;
}

/* Elementor sections (old layout) and plain elements, incl. .hero */

.kk-hero-overlay:not(.e-con) {
    padding-top: calc(var(--kk-hero-padding-top, var(--space-xl, 3rem)) + max(var(--header-offset, 0px), var(--kk-hero-pull, 0px))) !important;
}


/* =========================================================
   21. MENU PANEL  (slides in from the left)
   ========================================================= */

.kk-drawer {
    position: fixed;
    inset: 0;
    z-index: 100000;

    visibility: hidden;
    pointer-events: none;

    transition: visibility 0s linear 0.8s;
}

.kk-drawer.is-open {
    visibility: visible;
    pointer-events: auto;

    transition: none;
}

.kk-drawer__overlay {
    position: absolute;
    inset: 0;

    background: rgba(28, 27, 25, 0.45);

    opacity: 0;
    transition: opacity 0.6s var(--ease-premium);
}

.kk-drawer.is-open .kk-drawer__overlay {
    opacity: 1;
}

.kk-scope.kk-drawer__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    display: flex;
    flex-direction: column;

    width: min(460px, 100%);
    max-width: none;
    margin: 0;
    padding: 0;

    background: var(--kk-white);
    box-shadow: 20px 0 60px rgba(28, 27, 25, 0.12);

    transform: translateX(-100%);
    transition: transform 0.8s var(--ease-glide);
}

.kk-drawer.is-open .kk-scope.kk-drawer__panel {
    transform: translateX(0);
}

.kk-scope.kk-drawer__panel:focus {
    outline: none;
}

.kk-scope .kk-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: var(--space-md, 2rem) var(--space-md, 2rem) var(--space-sm, 1.25rem);

    border-bottom: 1px solid var(--kk-line);
}

.kk-scope .kk-menu {
    flex: 1;
    overflow-y: auto;

    padding: var(--space-md, 2rem);
}

.kk-scope .kk-menu__list,
.kk-scope .kk-menu__list .sub-menu {
    margin: 0;
    padding: 0;

    list-style: none;
}

.kk-scope .kk-menu__list li {
    margin: 0;
}

.kk-scope .kk-menu__list li::marker {
    content: none;
}

.kk-scope .kk-menu__list > li > a,
.kk-scope .kk-menu__order {
    display: inline-block;

    padding-block: 6px;

    font-family: var(--kk-serif);
    font-size: clamp(22px, 2.2vw, 26px);
    font-weight: 500;
    line-height: 1.2;
    color: var(--kk-black);
    text-decoration: none;

    background-image: linear-gradient(var(--kk-gold), var(--kk-gold));
    background-repeat: no-repeat;
    background-position: left calc(100% - 4px);
    background-size: 0 1px;

    transition: background-size var(--kk-ease), color var(--kk-ease);
}

.kk-scope .kk-menu__list > li > a:hover,
.kk-scope .kk-menu__list > li.current-menu-item > a,
.kk-scope .kk-menu__order:hover {
    color: var(--kk-black);
    background-size: 100% 1px;
}

.kk-scope .kk-menu__list .sub-menu {
    margin: 2px 0 12px;
    padding-left: 2px;
}

.kk-scope .kk-menu__list .sub-menu a {
    display: inline-block;

    padding-block: 5px;

    font-size: 16px;
    font-weight: 300;
    color: var(--kk-black);
    text-decoration: none;

    transition: color var(--kk-ease);
}

.kk-scope .kk-menu__list .sub-menu a:hover {
    color: var(--color-gold-text);
}

.kk-scope a.kk-menu__order {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.kk-scope .kk-menu__order-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.kk-scope .kk-menu__order-icon {
    flex-shrink: 0;
    color: var(--color-gold-text);
}

.kk-scope .kk-menu__order {
    margin-top: var(--space-sm, 1.25rem);
    padding-top: var(--space-sm, 1.25rem);

    border-top: 1px solid var(--kk-line);
}


/* ---------- Panel foot: phone + e-mail, close together ---------- */

.kk-scope .kk-drawer__foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;

    padding: var(--space-sm, 1.25rem) var(--space-md, 2rem) var(--space-md, 2rem);

    border-top: 1px solid var(--kk-line);
}

.kk-scope .kk-drawer__foot .kk-text-link {
    min-height: 0;
    padding-block: 5px;

    line-height: 1.4;
}


/* ---------- Layout «oversikt»: many pages ----------
   Turned on under Utseende → Tilpass → Meny. Wide panel, groups in
   columns, a search field, and collapsible groups on phones. */

.kk-drawer--oversikt .kk-scope.kk-drawer__panel {
    width: min(1180px, 100%);
}

.kk-scope .kk-menu--oversikt {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 1.25rem);
}

.kk-scope .kk-menu__search {
    position: relative;
    flex-shrink: 0;
    max-width: 420px;
}

.kk-scope .kk-menu__search svg {
    position: absolute;
    top: 50%;
    left: 14px;

    color: var(--color-muted, #5f5f5f);

    transform: translateY(-50%);
    pointer-events: none;
}

.kk-scope .kk-menu__search input {
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 14px 10px 42px;

    font-family: var(--kk-sans);
    font-size: 16px;
    color: var(--kk-black);

    background: var(--kk-cream);
    border: 1px solid transparent;
    border-radius: var(--border-radius-pill, 999px);

    transition: border-color var(--kk-ease), background-color var(--kk-ease);
}

.kk-scope .kk-menu__search input:focus {
    background: var(--kk-white);
    border-color: var(--kk-gold);
    outline: none;
}

.kk-scope .kk-menu__empty {
    margin: 0;
    color: var(--color-muted, #5f5f5f);
}

.kk-scope .kk-menu--oversikt .kk-menu__list {
    column-width: 220px;
    column-gap: var(--space-md, 2rem);
}

.kk-scope .kk-menu--oversikt .kk-menu__list > li {
    position: relative;

    padding-bottom: var(--space-sm, 1.25rem);

    break-inside: avoid;
}

/* Top-level pages without sub-pages sit tight together. */
.kk-scope .kk-menu--oversikt .kk-menu__list > li:not(.menu-item-has-children) {
    padding-bottom: 6px;
}

.kk-scope .kk-menu--oversikt .kk-menu__list > li > a {
    padding-block: 4px;

    font-size: clamp(19px, 1.5vw, 21px);
    font-weight: 600;
}

.kk-scope .kk-menu--oversikt .kk-menu__list .sub-menu {
    margin: 4px 0 0;
    padding-left: 0;
}

.kk-scope .kk-menu--oversikt .kk-menu__list .sub-menu a {
    padding-block: 4px;
    font-weight: 300; /* thinner (round 7f) */
    line-height: 1.35;
}

/* Third level: small and indented under its parent. */
.kk-scope .kk-menu--oversikt .kk-menu__list .sub-menu .sub-menu {
    margin: 0 0 4px;
    padding-left: 12px;

    border-left: 1px solid var(--kk-line);
}

.kk-scope .kk-menu--oversikt .kk-menu__list .sub-menu .sub-menu a {
    font-size: 15px;
    color: var(--color-muted, #5f5f5f);
}

.kk-scope .kk-menu--oversikt .kk-menu__list .current-menu-item > a {
    color: var(--color-gold-text);
}

.kk-scope .kk-menu--oversikt li[hidden] {
    display: none !important;
}

.kk-scope .kk-menu--oversikt.is-filtering li.is-match > a {
    color: var(--color-gold-text);
}

/* Group toggle: only used on phones. */
.kk-scope .kk-menu__sub-toggle {
    display: none;
}

.kk-scope .kk-menu--oversikt .kk-menu__order {
    align-self: flex-start;
    margin-top: 0;
}

@media (max-width: 767px) {
    .kk-scope .kk-menu--oversikt .kk-menu__list {
        column-width: auto;
        columns: 1;
    }

    .kk-scope .kk-menu--oversikt .kk-menu__list > li,
    .kk-scope .kk-menu--oversikt .kk-menu__list > li:not(.menu-item-has-children) {
        padding: 0;

        border-bottom: 1px solid var(--kk-line);
    }

    .kk-scope .kk-menu--oversikt .kk-menu__list > li > a {
        display: block;

        padding: 12px 48px 12px 0;
        background-image: none;
    }

    .kk-scope .kk-menu__sub-toggle {
        position: absolute;
        top: 4px;
        right: -8px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 44px;
        height: 44px;
        padding: 0;

        color: var(--kk-black);

        background: none;
        border: 0;
        cursor: pointer;
    }

    .kk-scope .kk-menu__sub-toggle svg {
        transition: transform var(--kk-ease);
    }

    .kk-scope .kk-menu--oversikt .kk-menu__list > li.is-expanded > .kk-menu__sub-toggle svg {
        transform: rotate(180deg);
    }

    .kk-scope .kk-menu--oversikt .kk-menu__list > li > .sub-menu {
        display: none;

        margin: 0;
        padding-bottom: 12px;
    }

    .kk-scope .kk-menu--oversikt .kk-menu__list > li.is-expanded > .sub-menu,
    .kk-scope .kk-menu--oversikt.is-filtering .kk-menu__list > li > .sub-menu {
        display: block;
    }

    .kk-scope .kk-menu--oversikt.is-filtering .kk-menu__sub-toggle {
        display: none;
    }
}


/* ---------- Menu: icons next to the main pages (2026-11-05) ----------
   The shop snippet puts a thin line icon before each main page
   (coffee machine for Maskiner, cup for Vår kaffe …). Gold, the
   same size as the Varebestilling cart. Sub-pages have none. */

.kk-scope .kk-menu__item-inner,
.kk-scope .kk-menu__order-inner {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.kk-scope .kk-menu__icon {
    flex: none;
    width: 22px;
    height: 22px;

    color: var(--color-gold-text);

    transition: transform 0.6s var(--ease-glide), color 0.45s var(--ease-premium);
}

.kk-scope .kk-menu__list > li > a:hover .kk-menu__icon,
.kk-scope .kk-menu__order:hover .kk-menu__icon {
    transform: translateY(-1px) scale(1.06);
}

/* The gold underline sits under the text only, not the icon */

.kk-scope .kk-menu__list > li > a:has(.kk-menu__item-inner),
.kk-scope .kk-menu__list > li > a:has(.kk-menu__order-inner) {
    background-image: none;
}

.kk-scope .kk-menu__item-text {
    background-image: linear-gradient(var(--kk-gold), var(--kk-gold));
    background-repeat: no-repeat;
    background-position: left calc(100% - 1px);
    background-size: 0 1px;

    transition: background-size 0.6s var(--ease-glide);
}

.kk-scope .kk-menu__list > li > a:hover .kk-menu__item-text,
.kk-scope .kk-menu__list > li.current-menu-item > a .kk-menu__item-text,
.kk-scope .kk-menu__list > li.current-menu-ancestor > a .kk-menu__item-text {
    background-size: 100% 1px;
}

/* Sub-pages line up with the text of their main page */

.kk-scope .kk-menu__list > li:has(> a .kk-menu__icon) > .sub-menu {
    padding-left: 34px;
}

@media (max-width: 767px) {

    .kk-scope .kk-menu__icon {
        width: 20px;
        height: 20px;
    }

    .kk-scope .kk-menu__list > li:has(> a .kk-menu__icon) > .sub-menu {
        padding-left: 32px;
    }
}


/* ---------- Menu: «Meny» in the open panel closes it ----------
   Looks like the «Meny» button in the header, with the burger
   turned into a cross. */

.kk-scope button.kk-drawer__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-height: 44px;
    margin: 0 0 0 -2px;
    padding: 0 2px;

    font-family: var(--kk-sans);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-gold-text);

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;

    transition: color 0.45s var(--ease-premium);
}

.kk-scope button.kk-drawer__label:hover,
.kk-scope button.kk-drawer__label:focus {
    color: var(--kk-black);
    background: transparent;
}

.kk-scope button.kk-drawer__label:focus-visible {
    outline: 2px solid var(--kk-gold);
    outline-offset: 4px;
}

.kk-burger--x {
    position: relative;
    width: 18px;
    height: 18px;
}

.kk-burger--x span {
    position: absolute;
    top: 50%;
    left: 0;

    width: 100% !important;
    margin-top: -0.7px;

    transition: transform 0.6s var(--ease-glide);
}

.kk-burger--x span:first-child {
    transform: rotate(45deg);
}

.kk-burger--x span:last-child {
    transform: rotate(-45deg);
}

.kk-scope button.kk-drawer__label:hover .kk-burger--x span:first-child {
    transform: rotate(135deg);
}

.kk-scope button.kk-drawer__label:hover .kk-burger--x span:last-child {
    transform: rotate(45deg);
}


/* =========================================================
   22. FOOTER  (.sf-footer)
   ---------------------------------------------------------
   Footer shortcode from the footer snippet. Place it in the
   Elementor footer template in a full-width container with
   no padding of its own – the footer sets its own container
   so it lines up with the header and the page.
   Columns sit on the same 12-column grid as the page.
   ========================================================= */

.sf-footer {
    --sf-bg: var(--color-black, #1c1b19);
    --sf-fg: var(--color-white, #ffffff);
    --sf-muted: rgba(255, 255, 255, 0.66);
    --sf-line: rgba(255, 255, 255, 0.14);
    --sf-accent: var(--color-gold, #A68553);

    width: 100%;

    font-family: var(--font-body-family);
    font-size: 17px;
    line-height: 1.6;
    color: var(--sf-fg);

    background: var(--sf-bg);
}

.sf-footer--light {
    --sf-bg: var(--color-cream, #F5F4F1);
    --sf-fg: var(--color-black, #1c1b19);
    --sf-muted: var(--color-muted, #5f5f5f);
    --sf-line: var(--color-line, #e6e6e6);
}

.sf-footer *,
.sf-footer *::before,
.sf-footer *::after {
    box-sizing: border-box;
}

.sf-footer .sf-footer__inner {
    width: 100%;
    max-width: var(--site-container-width);
    margin-inline: auto;
    padding: var(--space-xl, 5rem) var(--padding-horizontal) 0;
}

.sf-footer .sf-footer__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-lg, 3rem) var(--grid-gap, 2rem);

    padding-bottom: var(--space-xl, 5rem);
}

.sf-footer .sf-footer__brand    { grid-column: 1 / span 4; }
.sf-footer .sf-footer__products { grid-column: 6 / span 2; }
.sf-footer .sf-footer__links    { grid-column: 8 / span 2; }
.sf-footer .sf-footer__contact  { grid-column: 10 / span 3; }


/* ---------- Logo + intro ---------- */

.sf-footer .sf-footer__logo {
    --sf-logo-size: 64px;

    display: inline-block;

    line-height: 0;
    color: var(--sf-fg);
    text-decoration: none;
}

.sf-footer .sf-footer__logo-img {
    display: block;

    width: auto;
    height: var(--sf-logo-size);
    max-width: 100%;

    object-fit: contain;
    object-position: left center;
    overflow: visible; /* inline SVG logo: the crown may rise */
}

.sf-footer .sf-footer__logo--white .sf-footer__logo-img {
    filter: brightness(0) invert(1);
}

.sf-footer .sf-footer__logo--black .sf-footer__logo-img {
    filter: brightness(0);
}

.sf-footer .sf-footer__logo-text {
    font-family: var(--font-heading-family);
    font-size: 32px;
    line-height: 1.1;
}

.sf-footer .sf-footer__intro {
    max-width: 36ch;
    margin: 24px 0 0;

    font-size: 17px;
    line-height: 1.7;
    color: var(--sf-muted);
}


/* ---------- Social media ---------- */

.sf-footer .sf-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;

    margin: 28px 0 0;
    padding: 0;

    list-style: none;
}

.sf-footer .sf-footer__social li {
    margin: 0;
}

.sf-footer .sf-footer__social li::marker {
    content: none;
}

.sf-footer .sf-footer__social a {
    display: inline-flex;
    align-items: center;

    min-height: 32px;

    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--sf-fg);

    transition: color 0.38s var(--ease-premium), opacity 0.38s var(--ease-premium);
}

.sf-footer .sf-footer__social a:hover {
    color: var(--sf-accent);
}

.sf-footer .sf-footer__social a.has-icon img {
    display: block;

    width: 22px;
    height: 22px;

    object-fit: contain;
}

.sf-footer--dark .sf-footer__social a.has-icon img {
    filter: brightness(0) invert(1);
}

.sf-footer .sf-footer__social a.has-icon:hover {
    opacity: 0.6;
}


/* ---------- Columns ---------- */

.sf-footer .sf-footer__heading {
    margin: 0 0 20px;

    font-family: var(--font-body-family);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sf-accent);
}

.sf-footer .sf-footer__list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.sf-footer .sf-footer__list li {
    margin: 0 0 10px;
    color: var(--sf-fg);
}

.sf-footer .sf-footer__list li::marker {
    content: none;
}

.sf-footer .sf-footer__list a {
    color: var(--sf-fg);
    text-decoration: none;

    background-image: linear-gradient(var(--sf-accent), var(--sf-accent));
    background-repeat: no-repeat;
    background-position: left 100%;
    background-size: 0 1px;

    transition: background-size 0.38s var(--ease-premium), color 0.38s var(--ease-premium);
}

.sf-footer .sf-footer__list a:hover,
.sf-footer .sf-footer__list .current-menu-item > a {
    color: var(--sf-fg);
    background-size: 100% 1px;
}

.sf-footer .sf-footer__text {
    max-width: none;
    margin: 16px 0 0;

    font-size: 17px;
    font-style: normal;
    line-height: 1.6;
    color: var(--sf-muted);
}

.sf-footer .sf-footer__text--small {
    font-size: 15px;
}

/* Round 8: address and opening hours in the contact column are
   white like the phone number and e-mail (only Org.nr. stays grey). */
.sf-footer .sf-footer__contact :is(.sf-footer__address, .sf-footer__hours) {
    color: var(--sf-fg);
}


/* ---------- Contact icons ----------
   Gold line icons in front of phone, e-mail, address and opening
   hours. Used everywhere contact details are listed: the footer
   (Bunntekst fields), the department list and pages, the contact
   page ([firma] list) and the foot of the menu panel. The icons
   are defined in section 01 (--icon-tel, --icon-mail …). */

.sf-footer {
    --contact-icon-color: var(--sf-accent);
}

:is(
    .sf-footer__tel, .sf-footer__mail, .sf-footer__address, .sf-footer__hours,
    .pg-contact__tel, .pg-contact__mail, .pg-contact__address, .pg-contact__hours,
    .avd-fact--telefon .avd-fact__value, .avd-fact--epost .avd-fact__value,
    .avd-fact--adresse .avd-fact__value, .avd-fact--apningstider .avd-fact__value,
    address.avd-small__line, .avd-small__hours
),
.avd-small__line:is(:has(> a[href^="tel:"]), :has(> a[href^="mailto:"])) {
    position: relative;
    padding-left: 30px;
}

:is(
    .sf-footer__tel, .sf-footer__mail, .sf-footer__address, .sf-footer__hours,
    .pg-contact__tel, .pg-contact__mail, .pg-contact__address, .pg-contact__hours,
    .avd-fact--telefon .avd-fact__value, .avd-fact--epost .avd-fact__value,
    .avd-fact--adresse .avd-fact__value, .avd-fact--apningstider .avd-fact__value,
    address.avd-small__line, .avd-small__hours
)::before,
.avd-small__line:is(:has(> a[href^="tel:"]), :has(> a[href^="mailto:"]))::before,
.kk-scope .kk-drawer__foot a:is([href^="tel:"], [href^="mailto:"])::before {
    content: "";

    position: absolute;
    top: 0.2em;
    left: 0;

    width: 18px;
    height: 18px;

    background-color: var(--contact-icon-color, var(--color-gold));
    -webkit-mask: var(--icon, var(--icon-pin)) center / contain no-repeat;
    mask: var(--icon, var(--icon-pin)) center / contain no-repeat;
}

:is(.sf-footer__tel, .pg-contact__tel, .avd-fact--telefon .avd-fact__value),
.avd-small__line:has(> a[href^="tel:"]),
.kk-drawer__foot a[href^="tel:"]          { --icon: var(--icon-tel); }

:is(.sf-footer__mail, .pg-contact__mail, .avd-fact--epost .avd-fact__value),
.avd-small__line:has(> a[href^="mailto:"]),
.kk-drawer__foot a[href^="mailto:"]       { --icon: var(--icon-mail); }

:is(.sf-footer__address, .pg-contact__address, .avd-fact--adresse .avd-fact__value),
address.avd-small__line                   { --icon: var(--icon-pin); }

:is(.sf-footer__hours, .pg-contact__hours, .avd-fact--apningstider .avd-fact__value),
.avd-small__hours                         { --icon: var(--icon-clock); }

/* Menu panel foot: one line each, icon centred on the line */

.kk-scope .kk-drawer__foot a:is([href^="tel:"], [href^="mailto:"]) {
    position: relative;
    padding-left: 30px;
}

.kk-scope .kk-drawer__foot a:is([href^="tel:"], [href^="mailto:"])::before {
    top: 50%;
    transform: translateY(-50%);
}

.sf-footer .sf-footer__contact .sf-footer__list li {
    margin-bottom: 12px;
}


/* ---------- Bottom bar ---------- */

.sf-footer .sf-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 32px;

    padding: 24px 0 calc(24px + env(safe-area-inset-bottom));

    border-top: 1px solid var(--sf-line);
}

.sf-footer .sf-footer__copy,
.sf-footer .sf-footer__credit {
    max-width: none;
    margin: 0;

    font-size: 15px;
    line-height: 1.5;
    color: var(--sf-muted);
}

.sf-footer .sf-footer__credit a {
    color: var(--sf-muted);
    text-decoration: none;

    transition: color 0.38s var(--ease-premium);
}

.sf-footer .sf-footer__credit a:hover {
    color: var(--sf-accent);
}

.sf-footer a:focus-visible {
    outline: 2px solid var(--sf-accent);
    outline-offset: 3px;
}


/* ---------- Footer – responsive ---------- */

@media (max-width: 1024px) {

    .sf-footer .sf-footer__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .sf-footer .sf-footer__brand    { grid-column: 1 / -1; }
    .sf-footer .sf-footer__products { grid-column: 1 / span 2; }
    .sf-footer .sf-footer__links    { grid-column: 3 / span 2; }
    .sf-footer .sf-footer__contact  { grid-column: 5 / span 2; }
}

@media (max-width: 767px) {

    .sf-footer .sf-footer__inner {
        padding-top: var(--space-lg, 3rem);
    }

    .sf-footer .sf-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-md, 2rem) var(--space-sm, 1rem);

        padding-bottom: var(--space-lg, 3rem);
    }

    .sf-footer .sf-footer__brand,
    .sf-footer .sf-footer__contact  { grid-column: 1 / -1; }
    .sf-footer .sf-footer__products { grid-column: 1 / span 1; }
    .sf-footer .sf-footer__links    { grid-column: 2 / span 1; }

    .sf-footer .sf-footer__logo {
        --sf-logo-size: 52px;
    }

    .sf-footer .sf-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =========================================================
   23. NO PRICES  (WooCommerce cart / checkout / order pages)
   ---------------------------------------------------------
   body.kk-no-prices is added by the shop snippet.
   ========================================================= */

body.kk-no-prices .woocommerce-cart-form .product-price,
body.kk-no-prices .woocommerce-cart-form .product-subtotal,
body.kk-no-prices .cart_totals .cart-subtotal,
body.kk-no-prices .cart_totals .order-total,
body.kk-no-prices .cart_totals .tax-rate,
body.kk-no-prices .cart_totals .tax-total,
body.kk-no-prices .woocommerce-checkout-review-order-table .product-total,
body.kk-no-prices .woocommerce-checkout-review-order-table tfoot .cart-subtotal,
body.kk-no-prices .woocommerce-checkout-review-order-table tfoot .order-total,
body.kk-no-prices .woocommerce-checkout-review-order-table tfoot .tax-rate,
body.kk-no-prices .woocommerce-checkout-review-order-table tfoot .tax-total,
body.kk-no-prices .woocommerce-order-overview__total,
body.kk-no-prices .woocommerce-table--order-details tfoot,
body.kk-no-prices .woocommerce-table--order-details .product-total,
body.kk-no-prices .wc-block-components-product-price,
body.kk-no-prices .wc-block-cart-item__total,
body.kk-no-prices .wc-block-cart-items__header-total,
body.kk-no-prices .wc-block-components-order-summary-item__total-price,
body.kk-no-prices .wc-block-components-order-summary-item__individual-prices,
body.kk-no-prices .wc-block-components-totals-item,
body.kk-no-prices .wc-block-components-totals-footer-item,
body.kk-no-prices .wc-block-components-totals-wrapper:has(.wc-block-components-totals-item) {
    display: none !important;
}


/* =========================================================
   23b. PURCHASE PAGES  (cart, checkout, order received)
   ---------------------------------------------------------
   WooCommerce's own cart, checkout and «order received»
   pages in the Kronen look: serif titles, hairlines, cream
   summary panel, pill buttons and calm form fields. Works
   for the classic shortcodes, the WooCommerce blocks and
   Elementor Pro's cart/checkout widgets.
   The shop snippet adds the step bar (.kk-steps-bar) and the
   body class .kk-purchase. (2026-11-05)
   ========================================================= */

body:is(.woocommerce-cart, .woocommerce-checkout) {
    --kp-line: var(--color-line, #e6e6e6);
    --kp-soft: var(--color-cream, #F5F4F1);
    --kp-muted: var(--color-muted, #5f5f5f);
    --kp-radius: var(--border-radius-sm, 8px);
    --kp-side: 400px;

    background-color: var(--color-white);
}

/* Page: same container as the rest of the site, a little air
   under the header, and the theme's title in the site's serif */

body:is(.woocommerce-cart, .woocommerce-checkout) .site-main {
    padding-top: var(--space-md);
    padding-bottom: var(--space-xl);
}

body:is(.woocommerce-cart, .woocommerce-checkout) :is(.page-header, .entry-header) {
    max-width: none;
    margin: 0 0 var(--space-sm);
    padding: 0;
}

body:is(.woocommerce-cart, .woocommerce-checkout) :is(.page-header, .entry-header) .entry-title {
    margin: 0;

    font-family: var(--font-heading-family);
    font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
    font-weight: var(--font-heading-weight);
    line-height: 1.05;
}


/* ---------- Step bar ---------- */

.kk-scope.kk-steps-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-md);

    max-width: none;
    margin: 0 0 var(--space-lg);
    padding: 0 0 var(--space-sm);

    border-bottom: 1px solid var(--kk-line);
}

.kk-steps__list {
    display: flex;
    align-items: center;
    gap: 0;

    margin: 0;
    padding: 0;

    list-style: none;
}

.kk-steps__step {
    display: flex;
    align-items: center;
    margin: 0;
}

.kk-steps__step::marker {
    content: none;
}

.kk-steps__step + .kk-steps__step::before {
    content: "";

    display: block;
    flex: none;
    width: clamp(18px, 4vw, 56px);
    height: 1px;
    margin-inline: 12px;

    background: var(--kk-line);
}

.kk-steps__step.is-done + .kk-steps__step::before {
    background: var(--kk-gold);
}

.kk-steps__step > span,
.kk-steps__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.kk-steps__link {
    color: inherit;
    text-decoration: none;
}

.kk-steps__num {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;

    color: var(--kp-muted, #5f5f5f);
    border: 1px solid var(--kk-line);
    border-radius: 999px;

    transition: background-color 0.6s var(--ease-premium), border-color 0.6s var(--ease-premium), color 0.6s var(--ease-premium);
}

.kk-steps__label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kp-muted, #5f5f5f);
}

.kk-steps__step.is-current .kk-steps__num {
    color: var(--kk-white);
    background: var(--kk-black);
    border-color: var(--kk-black);
}

.kk-steps__step.is-current .kk-steps__label {
    color: var(--kk-black);
}

.kk-steps__step.is-done .kk-steps__num {
    color: var(--kk-black);
    background: var(--kk-gold);
    border-color: var(--kk-gold);
}

.kk-steps__link:hover .kk-steps__label {
    color: var(--kk-black);
}

.kk-steps__link:focus-visible,
.kk-steps__back:focus-visible {
    outline: 2px solid var(--kk-gold);
    outline-offset: 4px;
}

.kk-steps__back {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-size: 15px;
    color: var(--color-gold-text);
    text-decoration: none;
}

.kk-steps__back svg {
    transition: transform 0.6s var(--ease-glide);
}

.kk-steps__back:hover {
    color: var(--kk-black);
}

.kk-steps__back:hover svg {
    transform: translateX(-4px);
}

@media (max-width: 600px) {

    .kk-steps__label {
        font-size: 11px;
        letter-spacing: 0.1em;
    }

    .kk-steps__step + .kk-steps__step::before {
        margin-inline: 8px;
    }

    .kk-steps__num {
        width: 26px;
        height: 26px;
    }

    .kk-steps__step:not(.is-current) .kk-steps__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* Step bar, round 7c: a calm cream band with room around every
   label. The steps share the width with lines between them; on
   phones each number sits above its label, and «Legg til flere
   varer» gets its own line under the steps. */

.kk-scope.kk-steps-bar {
    gap: var(--space-sm, 1.25rem) var(--space-lg, 3rem);

    padding: 22px clamp(20px, 3vw, 36px);

    background: var(--kp-soft, var(--color-cream, #F5F4F1));
    border-bottom: 0;
}

.kk-steps {
    flex: 1 1 460px;
    max-width: 680px;
}

.kk-steps__list {
    width: 100%;
}

.kk-steps__step + .kk-steps__step {
    flex: 1 1 auto;
}

.kk-steps__step + .kk-steps__step::before {
    flex: 1 1 auto;
    width: auto;
    min-width: 24px;
    margin-inline: 18px;
}

.kk-steps__step > span,
.kk-steps__link {
    gap: 12px;
    padding-block: 2px;
}

.kk-steps__num {
    background: var(--color-white, #ffffff);
}

.kk-steps__label {
    line-height: 1.3;
    white-space: nowrap;
}

@media (max-width: 600px) {

    .kk-scope.kk-steps-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;

        padding: 18px 16px;
    }

    .kk-steps {
        flex: none;
        max-width: none;
    }

    .kk-steps__list {
        align-items: flex-start;
    }

    .kk-steps__step > span,
    .kk-steps__link {
        flex-direction: column;
        gap: 8px;
    }

    .kk-steps__step + .kk-steps__step::before {
        align-self: flex-start;
        margin: 13px 10px 0;
    }

    .kk-steps__step:not(.is-current) .kk-steps__label {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }

    .kk-steps__label {
        font-size: 10.5px;
        letter-spacing: 0.12em;
    }

    .kk-steps__back {
        justify-content: center;
        padding-top: 14px;
        border-top: 1px solid color-mix(in srgb, var(--color-black) 10%, transparent);
    }
}


/* ---------- Shared: buttons ---------- */

body:is(.woocommerce-cart, .woocommerce-checkout) :is(.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 52px;
    padding: 0 28px;

    font-family: var(--font-body-family);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;

    color: var(--color-white);
    background: var(--color-black);
    border: 0;
    border-radius: 999px;
    box-shadow: none;

    transition: background-color 0.45s var(--ease-premium), color 0.45s var(--ease-premium), box-shadow 0.45s var(--ease-premium);
}

body:is(.woocommerce-cart, .woocommerce-checkout) :is(.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button):hover {
    color: var(--color-black);
    background: var(--color-gold);
}

body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce button.button:disabled,
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce button.button[disabled] {
    padding: 0 28px;
    opacity: 0.35;
}

/* Secondary: «Oppdater handlekurv» */

body.woocommerce-cart .woocommerce button.button[name="update_cart"] {
    color: var(--color-black);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--color-black);
}

body.woocommerce-cart .woocommerce button.button[name="update_cart"]:not(:disabled):hover {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--color-gold);
}

body:is(.woocommerce-cart, .woocommerce-checkout) :is(.wc-proceed-to-checkout .checkout-button, #place_order, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button) {
    width: 100%;
    min-height: 58px;
    margin: 0;

    font-size: 14px;
}


/* ---------- Shared: notices ---------- */

body:is(.woocommerce-cart, .woocommerce-checkout) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;

    margin: 0 0 var(--space-md);
    padding: 16px 20px;

    font-size: 16px;
    line-height: 1.5;
    list-style: none;

    color: var(--color-black);
    background: var(--kp-soft);
    border: 0;
    border-left: 2px solid var(--color-gold);
    border-radius: 0;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce-error {
    border-left-color: var(--color-accent);
}

body:is(.woocommerce-cart, .woocommerce-checkout) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
    display: none;
}

body:is(.woocommerce-cart, .woocommerce-checkout) :is(.woocommerce-message, .woocommerce-info) .button {
    order: 2;
    min-height: 40px;
    margin-left: auto;
    padding: 0 18px;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .wc-block-components-notice-banner > svg {
    fill: var(--color-gold);
    background: transparent;
}


/* ---------- Shared: form fields ---------- */

body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce form .form-row {
    margin: 0 0 18px;
    padding: 0;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce form .form-row label {
    display: block;
    margin-bottom: 6px;

    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce form .form-row .required {
    color: var(--color-accent);
    text-decoration: none;
}

body:is(.woocommerce-cart, .woocommerce-checkout) :is(.woocommerce form .input-text, .woocommerce form select, .woocommerce .quantity .qty, .select2-container .select2-selection--single, #coupon_code) {
    width: 100%;
    min-height: 52px;
    padding: 0.75rem 1rem;

    font: inherit;
    font-size: 16px; /* 16px: no zoom on iPhone */
    line-height: 1.4;
    color: var(--color-text);

    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--kp-radius);
    box-shadow: none;

    transition: border-color 0.45s var(--ease-premium), box-shadow 0.45s var(--ease-premium);
}

body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce form textarea.input-text {
    min-height: 120px;
    resize: vertical;
}

body:is(.woocommerce-cart, .woocommerce-checkout) :is(.woocommerce form .input-text, .woocommerce form select, .woocommerce .quantity .qty, #coupon_code):hover {
    border-color: var(--color-gray-500);
}

body:is(.woocommerce-cart, .woocommerce-checkout) :is(.woocommerce form .input-text, .woocommerce form select, .woocommerce .quantity .qty, #coupon_code):focus,
body:is(.woocommerce-cart, .woocommerce-checkout) .select2-container--open .select2-selection--single {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-gold) 25%, transparent);
}

body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce form .form-row.woocommerce-invalid :is(.input-text, select) {
    border-color: var(--color-accent);
}

body:is(.woocommerce-cart, .woocommerce-checkout) .select2-container .select2-selection--single {
    display: flex;
    align-items: center;
    height: auto;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.4;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .select2-container .select2-selection--single .select2-selection__arrow {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

/* WooCommerce blocks: floating-label inputs */

body:is(.woocommerce-cart, .woocommerce-checkout) .wc-block-components-text-input input,
body:is(.woocommerce-cart, .woocommerce-checkout) .wc-block-components-combobox .wc-block-components-combobox-control input,
body:is(.woocommerce-cart, .woocommerce-checkout) .wc-blocks-components-select .wc-blocks-components-select__select,
body:is(.woocommerce-cart, .woocommerce-checkout) .wc-block-components-textarea {
    min-height: 56px;

    font-family: inherit;
    font-size: 16px;

    border: 1px solid var(--color-gray-300);
    border-radius: var(--kp-radius);
    box-shadow: none;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .wc-block-components-text-input input:focus,
body:is(.woocommerce-cart, .woocommerce-checkout) .wc-blocks-components-select .wc-blocks-components-select__select:focus,
body:is(.woocommerce-cart, .woocommerce-checkout) .wc-block-components-textarea:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-gold) 25%, transparent);
    outline: none;
}

body:is(.woocommerce-cart, .woocommerce-checkout) :is(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--color-black);
}


/* ---------- Classic cart ---------- */

@media (min-width: 1025px) {

    body.woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--kp-side);
        align-items: start;
        gap: 0 var(--space-lg);
    }

    body.woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) > :not(.woocommerce-cart-form, .cart-collaterals) {
        grid-column: 1 / -1;
    }

    body.woocommerce-cart .woocommerce > .cart-collaterals {
        position: sticky;
        top: calc(var(--kk-header-height, 96px) + var(--space-sm));
    }
}

body.woocommerce-cart table.shop_table.cart {
    width: 100%;
    margin: 0;

    border: 0;
    border-collapse: collapse;
    border-radius: 0;
}

body.woocommerce-cart table.shop_table.cart thead th {
    padding: 0 12px 14px;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: left;
    color: var(--kp-muted);

    border: 0;
    border-bottom: 1px solid var(--kp-line);
}

body.woocommerce-cart table.shop_table.cart td {
    padding: 22px 12px;

    vertical-align: middle;

    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--kp-line);
}

body.woocommerce-cart table.shop_table.cart tr:nth-child(2n) td {
    background: transparent;
}

body.woocommerce-cart table.shop_table.cart td.product-thumbnail {
    width: 112px;
}

body.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
    display: block;

    width: 88px;
    height: 88px;
    padding: 8px;

    object-fit: contain;
    background: var(--kp-soft);
}

body.woocommerce-cart table.shop_table.cart td.product-name a {
    font-family: var(--font-heading-family);
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem);
    font-weight: var(--font-heading-weight);
    line-height: 1.2;
    color: var(--color-black);
    text-decoration: none;

    transition: color 0.45s var(--ease-premium);
}

body.woocommerce-cart table.shop_table.cart td.product-name a:hover {
    color: var(--color-gold-text);
}

body.woocommerce-cart table.shop_table.cart td.product-name dl.variation {
    margin: 6px 0 0;
    font-size: 15px;
    color: var(--kp-muted);
}

body.woocommerce-cart table.shop_table.cart td.product-remove {
    width: 52px;
}

body.woocommerce-cart table.shop_table.cart a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    color: var(--color-black) !important;

    background: transparent;
    border: 1px solid var(--kp-line);
    border-radius: 999px;

    transition: border-color 0.45s var(--ease-premium), color 0.45s var(--ease-premium);
}

body.woocommerce-cart table.shop_table.cart a.remove:hover {
    color: var(--color-accent) !important;
    background: transparent;
    border-color: var(--color-accent);
}

body.woocommerce-cart .woocommerce .quantity .qty {
    width: 92px;
    text-align: center;
}

body.woocommerce-cart table.shop_table.cart td.actions {
    padding-top: var(--space-sm);
    padding-inline: 0;

    text-align: right;
    border-bottom: 0;
}

body.woocommerce-cart table.shop_table.cart td.actions .coupon {
    display: flex;
    gap: 10px;
    float: left;
}

body.woocommerce-cart table.shop_table.cart td.actions .coupon #coupon_code {
    width: 200px;
    min-height: 52px;
}

/* No prices: nothing to discount, so the coupon field is hidden */

body.kk-no-prices.woocommerce-cart table.shop_table.cart td.actions .coupon {
    display: none;
}

/* Summary panel */

body.woocommerce-cart .cart-collaterals .cart_totals {
    float: none;
    width: 100%;
    padding: var(--space-md);

    background: var(--kp-soft);
}

body.woocommerce-cart .cart-collaterals .cart_totals > h2 {
    margin: 0 0 var(--space-sm);

    font-family: var(--font-heading-family);
    font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
    font-weight: var(--font-heading-weight);
    line-height: 1.1;
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table {
    width: 100%;
    margin: 0 0 var(--space-sm);

    border: 0;
    border-radius: 0;
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table :is(th, td) {
    padding: 14px 0;

    font-size: 15px;
    vertical-align: top;

    background: transparent;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-black) 10%, transparent);
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table th {
    width: 40%;
    font-weight: 500;
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr:first-child :is(th, td) {
    border-top: 0;
}

body.woocommerce-cart .cart-collaterals ul#shipping_method {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.woocommerce-cart .wc-proceed-to-checkout {
    padding: 0;
}

/* Empty cart */

body.woocommerce-cart .wc-empty-cart-message .cart-empty {
    margin: 0 0 var(--space-sm);
    padding: var(--space-md);

    font-family: var(--font-heading-family);
    font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
    text-align: center;

    background: var(--kp-soft);
    border: 0;
}

body.woocommerce-cart .return-to-shop {
    text-align: center;
}

/* Phones: each item as a card (WooCommerce's responsive table) */

@media (max-width: 767px) {

    body.woocommerce-cart table.shop_table_responsive.cart tr.cart_item {
        position: relative;

        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 6px 16px;

        padding: 18px 44px 18px 0;

        border-bottom: 1px solid var(--kp-line);
    }

    body.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td {
        display: block;
        padding: 0;

        text-align: left !important;
        border: 0;
    }

    body.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td::before {
        display: none;
    }

    body.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-thumbnail {
        display: block !important;
        grid-row: 1 / span 3;
        width: auto;
    }

    body.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-thumbnail img {
        width: 88px;
        height: 88px;
    }

    body.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-remove {
        position: absolute;
        top: 14px;
        right: 0;
        width: auto;
    }

    body.woocommerce-cart table.shop_table.cart td.actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-inline: 0;
    }

    body.woocommerce-cart table.shop_table.cart td.actions .coupon {
        float: none;
    }

    body.woocommerce-cart table.shop_table.cart td.actions .button {
        width: 100%;
    }

    body.woocommerce-cart .cart-collaterals {
        margin-top: var(--space-md);
    }

    body.woocommerce-cart .cart-collaterals .cart_totals {
        padding: var(--space-sm);
    }
}


/* ---------- Classic checkout ---------- */

@media (min-width: 1025px) {

    body.woocommerce-checkout form.checkout.woocommerce-checkout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--kp-side);
        grid-template-rows: auto 1fr;
        align-items: start;
        gap: 0 var(--space-lg);
    }

    body.woocommerce-checkout form.checkout > * {
        grid-column: 1;
    }

    body.woocommerce-checkout form.checkout > #customer_details {
        grid-row: 1 / span 3;
    }

    body.woocommerce-checkout form.checkout > #order_review_heading {
        grid-column: 2;
        grid-row: 1;
    }

    body.woocommerce-checkout form.checkout > #order_review {
        position: sticky;
        top: calc(var(--kk-header-height, 96px) + var(--space-sm));
        grid-column: 2;
        grid-row: 2;
    }
}

body.woocommerce-checkout #customer_details.col2-set {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);

    width: 100%;
}

body.woocommerce-checkout #customer_details.col2-set :is(.col-1, .col-2) {
    float: none;
    width: 100%;
    max-width: none;
}

body.woocommerce-checkout #customer_details.col2-set::before,
body.woocommerce-checkout #customer_details.col2-set::after {
    display: none;
}

body.woocommerce-checkout :is(.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields) > h3,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout #ship-to-different-address {
    margin: 0 0 var(--space-sm);

    font-family: var(--font-heading-family);
    font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
    font-weight: var(--font-heading-weight);
    line-height: 1.1;
}

body.woocommerce-checkout #ship-to-different-address label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-family: var(--font-body-family);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}

body.woocommerce-checkout :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) .form-row {
    float: none;
    width: auto;
    grid-column: 1 / -1;
}

body.woocommerce-checkout :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) :is(.form-row-first, .form-row-last) {
    grid-column: auto;
}

@media (max-width: 600px) {

    body.woocommerce-checkout :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) :is(.form-row-first, .form-row-last) {
        grid-column: 1 / -1;
    }
}

/* Order summary in the cream panel */

body.woocommerce-checkout #order_review {
    padding: var(--space-md);
    background: var(--kp-soft);
}

body.woocommerce-checkout #order_review table.shop_table {
    width: 100%;
    margin: 0 0 var(--space-sm);

    border: 0;
    border-collapse: collapse;
    border-radius: 0;
}

body.woocommerce-checkout #order_review table.shop_table :is(th, td) {
    padding: 14px 0;

    font-size: 15px;
    text-align: left;
    vertical-align: top;

    background: transparent;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-black) 10%, transparent);
}

body.woocommerce-checkout #order_review table.shop_table thead th {
    padding-top: 0;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kp-muted);

    border-top: 0;
}

body.woocommerce-checkout #order_review table.shop_table .product-name {
    font-size: 16px;
}

body.woocommerce-checkout #order_review table.shop_table .product-quantity {
    font-weight: 600;
    color: var(--color-gold-text);
}

body.woocommerce-checkout #order_review ul#shipping_method {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Payment / place order: no payment step when the total is 0 */

body.woocommerce-checkout #payment {
    background: transparent;
    border-radius: 0;
}

body.woocommerce-checkout #payment ul.payment_methods {
    padding: 0 0 var(--space-sm);
    border-bottom: 1px solid color-mix(in srgb, var(--color-black) 10%, transparent);
}

body.woocommerce-checkout #payment div.payment_box {
    color: var(--color-black);
    background: var(--color-white);
}

body.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: var(--color-white);
}

body.woocommerce-checkout #payment div.form-row.place-order {
    margin: 0;
    padding: var(--space-sm) 0 0;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    margin-bottom: var(--space-sm);
    font-size: 15px;
    color: var(--kp-muted);
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a,
body.woocommerce-checkout .woocommerce-privacy-policy-text a {
    color: var(--color-gold-text);
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.kk-no-prices.woocommerce-checkout form.checkout_coupon {
    display: none;
}

body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
    font-size: 15px;
}

@media (max-width: 1024px) {

    body.woocommerce-checkout #order_review_heading {
        margin-top: var(--space-lg);
    }

    body.woocommerce-checkout #order_review {
        padding: var(--space-sm);
    }
}


/* ---------- Order received ---------- */

body.woocommerce-order-received .woocommerce-order {
    max-width: 860px;
}

body.woocommerce-order-received .woocommerce-thankyou-order-received,
body.woocommerce-order-received .wc-block-order-confirmation-status {
    margin: 0 0 var(--space-md);

    font-family: var(--font-heading-family);
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
    font-weight: var(--font-heading-weight);
    line-height: 1.1;
}

body.woocommerce-order-received ul.woocommerce-order-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1px;

    margin: 0 0 var(--space-lg);
    padding: 0;

    list-style: none;
    background: var(--kp-line);
    border: 1px solid var(--kp-line);
}

body.woocommerce-order-received ul.woocommerce-order-overview::before,
body.woocommerce-order-received ul.woocommerce-order-overview::after {
    display: none;
}

body.woocommerce-order-received ul.woocommerce-order-overview li {
    float: none;
    margin: 0;
    padding: 18px 20px;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kp-muted);

    background: var(--color-white);
    border: 0;
}

body.woocommerce-order-received ul.woocommerce-order-overview li strong {
    display: block;
    margin-top: 6px;

    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-black);
}

body.woocommerce-order-received :is(.woocommerce-order-details, .woocommerce-customer-details) {
    margin: 0 0 var(--space-lg);
}

body.woocommerce-order-received :is(.woocommerce-order-details__title, .woocommerce-column__title) {
    margin: 0 0 var(--space-sm);

    font-family: var(--font-heading-family);
    font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
    font-weight: var(--font-heading-weight);
}

body.woocommerce-order-received table.woocommerce-table--order-details {
    width: 100%;
    border: 0;
    border-collapse: collapse;
}

body.woocommerce-order-received table.woocommerce-table--order-details :is(th, td) {
    padding: 14px 0;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--kp-line);
}

body.woocommerce-order-received .woocommerce-customer-details address {
    padding: var(--space-sm);

    font-style: normal;
    line-height: 1.7;

    background: var(--kp-soft);
    border: 0;
    border-radius: 0;
}


/* ---------- Ordering pages in the Kronen layout (round 7b) ----------
   The shop snippet (1.18.0) shows the cart, checkout and order
   confirmation in its own page (.kk-purchase-main): a title, a
   short text that this is an order from the catalogue in the
   coffee deal, the step bar and WooCommerce's classic cart or
   checkout. The quantity is shown as a clear «3 stk» badge on
   every step. Nothing may stick out of the screen on phones. */

.kk-purchase-main {
    max-width: var(--site-container-width, 1440px);
    margin-inline: auto;
    padding-top: var(--space-md, 2.5rem); /* the header already has its own space above */
    padding-bottom: var(--space-xl, 5rem);
    overflow-x: clip;
}

.kk-scope.kk-purchase-head {
    max-width: 760px;
    margin: 0 0 var(--space-md, 2.5rem);
}

.kk-purchase-head__eyebrow {
    margin: 0 0 12px;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gold-text);
}

.kk-scope .kk-purchase-head__title {
    margin: 0 0 16px;

    font-family: var(--font-heading-family);
    font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
    font-weight: var(--font-heading-weight);
    line-height: 1.05;
    color: var(--color-black);
}

.kk-purchase-head__lead {
    margin: 0;

    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    line-height: 1.6;
    color: var(--kp-muted, #5f5f5f);
}

/* The order confirmation already has our own title */
.kk-purchase-main .woocommerce-thankyou-order-received {
    display: none;
}

/* Quantity badge: «3 stk» */

.kk-qty-badge {
    display: inline-flex;
    align-items: center;

    margin-left: 8px;
    padding: 3px 10px;

    font-family: var(--font-body-family);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--color-black);

    background: var(--color-white);
    border: 1px solid color-mix(in srgb, var(--color-black) 18%, transparent);
    border-radius: 999px;

    vertical-align: middle;
}

/* Cart: the quantity field is the main thing in each row */

body.woocommerce-cart .woocommerce .quantity .qty {
    width: 96px;
    min-height: 48px;

    font-size: 18px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

body.woocommerce-cart table.shop_table.cart thead th.product-quantity {
    color: var(--color-black);
}

/* Cart summary: no prices, so the totals table is hidden and the
   panel just holds the number of items and the button */

body.kk-no-prices.woocommerce-cart .cart-collaterals .cart_totals table.shop_table {
    display: none;
}

/* Checkout and confirmation: product name and quantity on one
   line; long names and e-mail addresses wrap instead of pushing
   the page wider than the screen */

:is(.woocommerce-checkout-review-order-table, .woocommerce-table--order-details) td.product-name {
    overflow-wrap: anywhere;
}

body.kk-no-prices :is(.woocommerce-checkout-review-order-table, .woocommerce-table--order-details) thead th.product-total {
    display: none;
}

/* Round 8c: «Varene du bestiller»: the name on the left, the amount
   («10 × 500 g») on the right of the same row. */
:is(.woocommerce-checkout-review-order-table, .woocommerce-table--order-details) td.product-name:has(.kk-qty-badge) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
}

:is(.woocommerce-checkout-review-order-table, .woocommerce-table--order-details) td.product-name .kk-qty-badge {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin: 0;
}

body.kk-no-prices :is(.woocommerce-checkout-review-order-table, .woocommerce-table--order-details) thead th.product-name {
    text-align: left;
}

.kk-purchase-main :is(.woocommerce-order-overview li, .woocommerce-customer-details address, .woocommerce-column) {
    overflow-wrap: anywhere;
}

/* Phones and small tablets: everything fits the screen */

@media (max-width: 1024px) {

    .kk-purchase-main :is(form.checkout, .woocommerce-cart-form, .cart-collaterals, .woocommerce-order, #customer_details, #order_review, .col2-set, .col-1, .col-2) {
        float: none !important;
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
    }

    .kk-purchase-main :is(table.shop_table, .woocommerce-checkout-review-order-table) {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
    }

    .kk-purchase-main :is(input.input-text, select, textarea, .select2-container) {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    .kk-purchase-main .form-row {
        float: none !important;
        width: 100% !important;
        padding-inline: 0;
    }

    .kk-purchase-main #payment .payment_box {
        box-sizing: border-box;
        max-width: 100%;
    }
}

@media (max-width: 767px) {

    .kk-purchase-main {
        padding-top: var(--space-sm, 1.25rem);
    }

    /* Cart rows as cards: picture, name, and «Antall» with the field */

    body.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-quantity {
        display: flex !important;
        align-items: center;
        gap: 12px;
        margin-top: 6px;
    }

    body.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-quantity::before {
        content: "Antall";
        display: block !important;
        float: none;

        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--kp-muted, #5f5f5f);
    }

    body.woocommerce-cart table.shop_table_responsive.cart thead {
        display: none;
    }

    body.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-name {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .kk-scope.kk-steps-bar {
        margin-bottom: var(--space-md, 2.5rem);
    }

    .kk-steps__label {
        white-space: nowrap;
    }
}


/* ---------- WooCommerce blocks (cart + checkout) ---------- */

body:is(.woocommerce-cart, .woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) {
    font-family: var(--font-body-family);
}

body:is(.woocommerce-cart, .woocommerce-checkout) :is(.wc-block-components-title, .wc-block-components-checkout-step__title, .wc-block-cart__totals-title) {
    font-family: var(--font-heading-family) !important;
    font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem) !important;
    font-weight: var(--font-heading-weight) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .wc-block-components-sidebar :is(.wc-block-components-totals-wrapper, .wp-block-woocommerce-checkout-order-summary-block, .wc-block-components-order-summary) {
    border-color: color-mix(in srgb, var(--color-black) 10%, transparent);
}

body:is(.woocommerce-cart, .woocommerce-checkout) .wc-block-components-sidebar-layout .wc-block-components-sidebar > * {
    background: var(--kp-soft);
}

body:is(.woocommerce-cart, .woocommerce-checkout) .wc-block-components-sidebar-layout .wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block {
    padding: 0 var(--space-sm);
    border: 0;
    border-radius: 0;
}

body.woocommerce-cart .wc-block-cart-items {
    border-color: var(--kp-line);
}

body.woocommerce-cart .wc-block-cart-items td {
    border-color: var(--kp-line) !important;
}

body.woocommerce-cart .wc-block-cart-item__image img {
    padding: 6px;
    background: var(--kp-soft);
}

body:is(.woocommerce-cart, .woocommerce-checkout) .wc-block-components-product-name {
    font-family: var(--font-heading-family);
    font-size: 1.35rem;
    font-weight: var(--font-heading-weight);
    color: var(--color-black);
    text-decoration: none;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .wc-block-components-quantity-selector {
    border-color: var(--color-gray-300);
    border-radius: 999px;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .wc-block-components-quantity-selector::after {
    border: 0;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .wc-block-cart-item__remove-link {
    color: var(--color-gold-text) !important;
    font-size: 14px !important;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .wc-block-components-radio-control__option {
    border-radius: var(--kp-radius);
}

body:is(.woocommerce-cart, .woocommerce-checkout) .wc-block-components-checkout-return-to-cart-button {
    color: var(--color-gold-text);
}

/* No prices: the coupon panel has nothing to do */

body.kk-no-prices :is(.wp-block-woocommerce-cart-order-summary-coupon-form-block, .wp-block-woocommerce-checkout-order-summary-coupon-form-block, .wc-block-components-totals-coupon) {
    display: none !important;
}


/* =========================================================
   24. SHOP – RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {

    .kk-scope .kk-cats {
        gap: 10px;
    }

    .kk-scope .kk-product__media {
        padding: var(--space-lg, 3rem);
    }

    .kk-scope .kk-product__summary {
        max-width: none;
    }

    .kk-scope .kk-specs__row {
        grid-template-columns: minmax(110px, 1fr) minmax(0, 1.5fr);
    }
}

@media (min-width: 768px) and (max-width: 1024px) {

    /* Three products per row, so the cards aren't oversized */
    .kk-scope .kk-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: var(--space-sm, 1.25rem);
        row-gap: var(--space-lg, 3rem);
    }

    .kk-scope .kk-grid .kk-card__media {
        padding: var(--space-sm, 1.25rem);
    }

    .kk-scope .kk-grid .kk-card__title {
        font-size: 20px;
    }

    .kk-header__menu-btn .kk-header__text {
        /* hidden visually, still read by screen readers */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .kk-header__logo {
        --kk-logo-size: calc(var(--kk-logo-h) * 0.68);
    }
}

/* Tablets held upright: the phone number shows next to the icon
   (lying down, the desktop header already shows it). */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    .kk-header__phone .kk-header__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (max-width: 767px) {

    .kk-scope {
        padding-top: calc(var(--kk-offset-top) + var(--space-xs, 0.75rem));
        padding-bottom: var(--space-lg, 3rem);
    }

    /* Phones: categories in the dropdown (with icons) */
    .kk-scope .kk-cats {
        display: none;
    }

    .kk-scope .kk-catselect {
        display: block;
    }

    .kk-scope .kk-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-sm, 1rem);
        row-gap: var(--space-lg, 3rem);
    }

    .kk-scope .kk-card__media {
        padding: var(--space-sm, 1rem);
    }

    .kk-scope .kk-card__title {
        font-size: 20px;
    }

    /* Two columns on phones: stack quantity and button */

    .kk-scope .kk-buy--card {
        flex-direction: column;
        align-items: stretch;
    }

    .kk-scope .kk-buy--card .kk-qty {
        justify-content: space-between;
    }

    .kk-scope .kk-buy--card .kk-btn {
        padding-inline: 10px;
    }

    .kk-scope .kk-product__main {
        gap: var(--space-lg, 3rem);
    }

    .kk-scope .kk-product__media {
        padding: var(--space-md, 2rem);
    }

    .kk-scope .kk-feature {
        padding: var(--space-lg, 3rem) var(--space-md, 2rem);
    }

    .kk-scope .kk-pagination {
        gap: var(--space-sm, 1rem);
    }

    .kk-scope .kk-cart__head,
    .kk-scope .kk-cart__foot,
    .kk-scope .kk-cart__items,
    .kk-scope .kk-drawer__head,
    .kk-scope .kk-menu,
    .kk-scope .kk-drawer__foot {
        padding-inline: var(--space-sm, 1.25rem);
    }

    .kk-scope .kk-cart-item {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .kk-cart-trigger__label {
        display: none;
    }

    .kk-header__inner {
        gap: 12px;

        min-height: 68px;
        padding-block: 10px;
    }

    .kk-header__side {
        gap: var(--space-sm, 1rem);
    }

    /* Phones: a little larger than before (was 0.56) */
    .kk-header__logo {
        --kk-logo-size: calc(var(--kk-logo-h) * 0.64);
    }

    .kk-header__logo img,
    .kk-header__logo .kk-logo-svg {
        max-width: 48vw;
    }

    .kk-header__menu-btn .kk-header__text,
    .kk-header__phone .kk-header__text,
    .kk-header__order .kk-header__text {
        /* hidden visually, still read by screen readers */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .kk-header a.kk-header__link {
        font-size: 15px;
        letter-spacing: 0.04em;
    }

    /* Phones: no phone link in the header (the number is in
       the menu panel), and the bag only shows once something
       is in the cart. The count is updated live, so the bag
       appears as soon as a product is added. */

    .kk-header a.kk-header__phone {
        display: none;
    }

    .kk-header .kk-cart-trigger:has(.kk-cart-count.is-empty) {
        display: none;
    }

    /* Bag and Varebestilling sit close together once the bag shows */
    .kk-header .kk-header__side--right {
        gap: 4px;
    }
}


/* =========================================================
   25. MACHINES  (.kkm)
   ---------------------------------------------------------
   Category, producer and product pages for machines, with
   filters and sorting (machines snippet). Every rule uses
   two classes (.kkm .kkm-…) so the element rules in
   sections 03 and 18 can't reset margins and fonts.
   ========================================================= */

.kkm {
    --kkm-gold: var(--color-gold, #A68553);
    --kkm-ink: var(--color-black, #1c1b19);
    --kkm-muted: var(--color-muted, #5f5f5f);
    --kkm-line: var(--color-line, #e6e6e6);
    --kkm-tile: var(--color-cream, #F5F4F1);
    --kkm-white: var(--color-white, #ffffff);
    --kkm-serif: var(--font-heading-family);
    --kkm-sans: var(--font-body-family);

    --kkm-gap: clamp(16px, 2.2vw, 32px);
    --kkm-side: 272px;
    --kkm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* Same content width as the rest of the site – the page wrapper
       (.kk-page) or the Elementor container gives the side padding. */
    width: 100%;
    max-width: var(--site-content-width, 1440px);
    margin: 0 auto;
    padding: calc(var(--space-md, 40px) + var(--kk-offset-top, 0px)) 0 var(--space-xl, 96px);

    font-family: var(--kkm-sans);
    color: var(--kkm-ink);
}

.kkm *,
.kkm *::before,
.kkm *::after {
    box-sizing: border-box;
}

.kkm [hidden] {
    display: none !important;
}

:where(.kkm) img {
    max-width: 100%;
    height: auto;
}

.kkm a {
    color: inherit;
}

.kkm.kkm-embed {
    max-width: none;
    padding: 0;
}

.kkm :focus-visible {
    outline: 1px solid var(--kkm-gold);
    outline-offset: 3px;
}


/* ---------- Breadcrumb ---------- */

.kkm .kkm-crumbs {
    margin-bottom: var(--space-md, 48px);

    font-size: 15px;
    letter-spacing: 0.02em;
}

.kkm .kkm-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;

    margin: 0;
    padding: 0;

    list-style: none;
    color: var(--kkm-muted);
}

.kkm .kkm-crumbs li + li::before {
    content: "/";
    margin-right: 8px;
    color: var(--kkm-line);
}

.kkm .kkm-crumbs a {
    color: var(--kkm-muted);
    text-decoration: none;

    transition: color 0.3s var(--ease-premium);
}

.kkm .kkm-crumbs a:hover {
    color: var(--color-gold-text);
}

.kkm .kkm-crumbs [aria-current] {
    color: var(--kkm-ink);
}


/* ---------- Typography ---------- */

.kkm .kkm-eyebrow {
    margin: 0 0 12px;

    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-gold-text);
}

.kkm .kkm-eyebrow a {
    color: inherit;
    text-decoration: none;
}

.kkm .kkm-eyebrow a:hover {
    color: var(--kkm-ink);
}

.kkm .kkm-head__title,
.kkm .kkm-title,
.kkm .kkm-section__title,
.kkm .kkm-card__title,
.kkm .kkm-filters__title {
    font-family: var(--kkm-serif);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.005em;
    color: var(--kkm-ink);
}

.kkm .kkm-link {
    color: var(--color-gold-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kkm .kkm-link:hover {
    color: var(--kkm-ink);
}


/* ---------- Buttons ---------- */

.kkm .kkm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 50px;
    padding: 0 30px;

    font: 500 14px/1 var(--kkm-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--kkm-white) !important;

    background: var(--kkm-ink);
    border: 1px solid var(--kkm-ink);
    border-radius: 0;
    cursor: pointer;

    transition:
        background 0.38s var(--kkm-ease),
        border-color 0.38s var(--kkm-ease),
        color 0.38s var(--kkm-ease);
}

.kkm .kkm-btn:hover,
.kkm .kkm-btn:focus-visible {
    background: var(--kkm-gold);
    border-color: var(--kkm-gold);
}

.kkm .kkm-btn--ghost {
    color: var(--kkm-ink) !important;
    background: transparent;
}

.kkm .kkm-btn--ghost:hover,
.kkm .kkm-btn--ghost:focus-visible {
    color: var(--color-gold-text) !important;
    background: transparent;
    border-color: var(--kkm-gold);
}

.kkm .kkm-icon-btn {
    display: inline-grid;
    place-items: center;

    width: 44px;
    height: 44px;
    padding: 0;

    color: var(--kkm-ink);
    background: none;
    border: 0;
    cursor: pointer;
}

.kkm .kkm-icon-btn:hover {
    color: var(--color-gold-text);
}


/* ---------- Page head (category / producer / all) ---------- */

.kkm .kkm-head {
    display: grid;
    align-items: end;
    gap: var(--kkm-gap);

    margin-bottom: var(--space-lg, 56px);
}

.kkm .kkm-head.has-media {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
}

.kkm .kkm-head__title {
    margin: 0;
    font-size: clamp(40px, 5.4vw, 72px);
}

.kkm .kkm-head__intro {
    max-width: 62ch;
    margin-top: 20px;

    font-size: 17px;
    line-height: 1.7;
    color: var(--kkm-muted);
}

.kkm .kkm-head__intro p {
    max-width: none;
    margin: 0 0 0.9em;

    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.kkm .kkm-head__link a {
    color: var(--color-gold-text);
    text-underline-offset: 3px;
}

.kkm .kkm-head__link a:hover {
    color: var(--kkm-ink);
}

.kkm .kkm-head__brand {
    margin: 0 0 24px;
}

.kkm .kkm-head__logo {
    display: block;

    width: auto;
    height: 56px;
    max-width: 200px;

    object-fit: contain;
    object-position: left center;
}

.kkm .kkm-head__media {
    margin: 0;
    overflow: hidden;

    aspect-ratio: 4 / 3;

    background: var(--kkm-tile);
}

.kkm .kkm-head__img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ---------- Category buttons on the "all machines" page ---------- */

.kkm .kkm-typelinks {
    margin-top: 32px;
}

.kkm .kkm-typelinks ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}

/* Even grid (maskiner 1.13.0), same as the producer logos: the
   buttons fill each row evenly, never one alone on a row. */
.kkm .kkm-typelinks ul.kkm-evengrid {
    display: grid;
    grid-template-columns: repeat(var(--kkm-cols-s, 2), minmax(0, 1fr));
}

.kkm .kkm-evengrid > li {
    grid-column: span var(--kkm-span-s, 1);
    min-width: 0;
}

.kkm .kkm-evengrid .kkm-typelink {
    display: flex;
    width: 100%;
    height: 100%;
    padding-inline: 18px;
}

.kkm .kkm-evengrid .kkm-typelink__name {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
}

/* Round 7: the script measures each button at its natural width
   (.is-measuring, for a moment) and puts only as many on a row as
   fit, so the text is never squeezed. On phones that is usually
   one per row, full width. */
.kkm .kkm-evengrid.is-measuring .kkm-typelink {
    width: max-content;
    white-space: nowrap;
}

@media (min-width: 768px) {

    .kkm .kkm-typelinks ul.kkm-evengrid {
        grid-template-columns: repeat(var(--kkm-cols-m, 3), minmax(0, 1fr));
    }

    .kkm .kkm-evengrid > li {
        grid-column: span var(--kkm-span-m, 1);
    }
}

@media (min-width: 1025px) {

    .kkm .kkm-typelinks ul.kkm-evengrid {
        grid-template-columns: repeat(var(--kkm-cols-l, 4), minmax(0, 1fr));
    }

    .kkm .kkm-evengrid > li {
        grid-column: span var(--kkm-span-l, 1);
    }
}

.kkm .kkm-typelinks li {
    margin: 0;
}

.kkm .kkm-typelinks li::marker {
    content: none;
}

.kkm .kkm-typelink {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    min-height: 50px;
    padding: 0 22px;

    font: 500 13px/1 var(--kkm-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--kkm-ink);

    border: 1px solid var(--kkm-ink);

    transition: background 0.38s var(--kkm-ease), color 0.38s var(--kkm-ease), border-color 0.38s var(--kkm-ease);
}

.kkm .kkm-typelink__count {
    font-size: 13px;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--color-gold-text);
}

.kkm .kkm-typelink svg {
    transition: transform 0.38s var(--kkm-ease);
}

.kkm .kkm-typelink:hover,
.kkm .kkm-typelink:focus-visible {
    color: var(--kkm-white);
    background: var(--kkm-ink);
}

.kkm .kkm-typelink:hover svg {
    transform: translateX(3px);
}


/* ---------- Producer logos on category pages ---------- */

.kkm .kkm-brands {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin: 32px 0 0;
    padding: 0;

    list-style: none;
}

.kkm .kkm-brands a {
    display: grid;
    place-items: center;

    min-width: 120px;
    height: 56px;
    padding: 0 22px;

    font-size: 16px;
    letter-spacing: 0.04em;
    text-decoration: none;

    border: 1px solid var(--kkm-line);

    transition: border-color 0.3s var(--ease-premium);
}

.kkm .kkm-brands a:hover {
    border-color: var(--kkm-gold);
}

.kkm .kkm-brands__logo {
    width: auto;
    height: 26px;
    max-width: 110px;

    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.8;

    transition: filter 0.3s var(--ease-premium), opacity 0.3s var(--ease-premium);
}

.kkm .kkm-brands a:hover .kkm-brands__logo {
    filter: none;
    opacity: 1;
}

/* Grid (maskiner 1.12.0): equal tiles, rows filled evenly so no
   logo stands alone on the last row. The snippet sets the number
   of columns per screen size and how many each tile spans. */

.kkm .kkm-brands--grid {
    display: grid;
    grid-template-columns: repeat(var(--kkm-cols-s, 2), minmax(0, 1fr));
    gap: 10px;
}

.kkm .kkm-brands--grid > li {
    grid-column: span var(--kkm-span-s, 1);
    min-width: 0;
    margin: 0;
}

.kkm .kkm-brands--grid > li::marker {
    content: none;
}

.kkm .kkm-brands--grid a {
    width: 100%;
    min-width: 0;
    height: 64px;
    padding: 0 14px;
}

.kkm .kkm-brands--grid .kkm-brands__logo {
    max-width: min(120px, 80%);
}

@media (min-width: 768px) {

    .kkm .kkm-brands--grid {
        grid-template-columns: repeat(var(--kkm-cols-m, 4), minmax(0, 1fr));
    }

    .kkm .kkm-brands--grid > li {
        grid-column: span var(--kkm-span-m, 1);
    }
}

@media (min-width: 1025px) {

    .kkm .kkm-brands--grid {
        grid-template-columns: repeat(var(--kkm-cols-l, 6), minmax(0, 1fr));
    }

    .kkm .kkm-brands--grid > li {
        grid-column: span var(--kkm-span-l, 1);
    }

    .kkm .kkm-brands--grid a {
        height: 72px;
    }
}


/* ---------- Listing layout ---------- */

.kkm .kkm-listing {
    display: block;

    padding-top: var(--space-md, 40px);

    border-top: 1px solid var(--kkm-line);
}

.kkm .kkm-listing.has-filters {
    display: grid;
    grid-template-columns: var(--kkm-side) minmax(0, 1fr);
    align-items: start;
    gap: clamp(32px, 4.5vw, 72px);
}


/* ---------- Toolbar: count + sort ---------- */

.kkm .kkm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;

    margin-bottom: 28px;
}

.kkm .kkm-count {
    margin: 0 auto 0 0;

    font-size: 16px;
    color: var(--kkm-muted);
}

.kkm .kkm-sort {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    font-size: 15px;
}

.kkm .kkm-sort__select {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.kkm .kkm-sort__label {
    color: var(--kkm-muted);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.kkm .kkm-sort select {
    min-height: 44px;
    padding: 0 40px 0 16px;

    font: 14px var(--kkm-sans);
    color: var(--kkm-ink);

    background: var(--kkm-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;
    border: 1px solid var(--kkm-line);
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.kkm .kkm-sort select:hover {
    border-color: var(--kkm-ink);
}

.kkm .kkm-sort__dir {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-height: 44px;
    padding: 0 16px;

    font: 13px var(--kkm-sans);
    white-space: nowrap;
    color: var(--kkm-ink);

    background: var(--kkm-white);
    border: 1px solid var(--kkm-line);
    cursor: pointer;

    transition: border-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium);
}

.kkm .kkm-sort__dir:hover {
    border-color: var(--kkm-ink);
}

.kkm .kkm-sort__arrow {
    position: relative;

    width: 10px;
    height: 12px;
}

.kkm .kkm-sort__arrow::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 4px;

    width: 1px;

    background: currentColor;
}

.kkm .kkm-sort__arrow::after {
    content: "";

    position: absolute;
    bottom: 1px;
    left: 1px;

    width: 6px;
    height: 6px;

    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;

    transform: rotate(45deg);
}

.kkm .kkm-sort__dir[data-dir="asc"] .kkm-sort__arrow {
    transform: rotate(180deg);
}

.kkm .kkm-filter-toggle {
    display: none;
    align-items: center;
    gap: 10px;

    min-height: 44px;
    padding: 0 18px;

    font: 500 13px var(--kkm-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kkm-ink);

    background: none;
    border: 1px solid var(--kkm-ink);
    cursor: pointer;
}

.kkm .kkm-filter-toggle:hover {
    color: var(--color-gold-text);
    border-color: var(--kkm-gold);
}

.kkm .kkm-filter-toggle__count {
    display: inline-grid;
    place-items: center;

    min-width: 18px;
    height: 18px;
    padding: 0 5px;

    font-size: 11px;
    letter-spacing: 0;
    color: var(--kkm-white);

    background: var(--kkm-gold);
    border-radius: 9px;
}


/* ---------- Active filters ---------- */

.kkm .kkm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin: -4px 0 28px;
}

.kkm .kkm-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-height: 36px;
    padding: 0 14px 0 16px;

    font: 13px var(--kkm-sans);
    color: var(--kkm-ink);

    background: var(--kkm-tile);
    border: 1px solid var(--kkm-line);
    border-radius: 18px;
    cursor: pointer;

    transition: border-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium);
}

.kkm .kkm-chip:hover {
    border-color: var(--kkm-gold);
}

.kkm .kkm-chip svg {
    color: var(--kkm-muted);
}

.kkm .kkm-chip--reset {
    color: var(--color-gold-text);
    text-decoration: underline;
    text-underline-offset: 3px;

    background: none;
    border-color: transparent;
}

.kkm .kkm-chip--reset:hover {
    color: var(--kkm-ink);
    border-color: transparent;
}


/* ---------- Filter sidebar ----------
   No scroll area of its own. The sidebar follows the page
   (sticky). When it is taller than the window, the JS moves
   its sticky offset (--kkm-stick-top) so it scrolls along
   until its end is visible, and it stays in place when a
   group is opened or closed. */

.kkm .kkm-filters {
    position: relative;
}

.kkm .kkm-filters.is-sticky {
    position: sticky;
    top: var(--kkm-stick-top, calc(var(--header-offset, 0px) + 32px));
}

.kkm .kkm-filters__head,
.kkm .kkm-filters__foot {
    display: none;
}

.kkm .kkm-facet {
    border-bottom: 1px solid var(--kkm-line);
}

.kkm .kkm-facet:first-child,
.kkm .kkm-filters__tools + .kkm-facet {
    border-top: 1px solid var(--kkm-line);
}


/* ---------- "Close all" row above the filter groups ---------- */

.kkm .kkm-filters__tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 0 0 14px;
}

.kkm .kkm-filters__label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kkm-ink);
}

.kkm .kkm-filters__collapse {
    min-height: 32px;
    padding: 0;

    font: 13px var(--kkm-sans);
    color: var(--kkm-muted);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    background: none;
    border: 0;
    cursor: pointer;

    transition: color 0.3s var(--ease-premium);
}

.kkm .kkm-filters__collapse:hover {
    color: var(--color-gold-text);
}

.kkm .kkm-facet__title {
    position: relative;

    display: block;

    padding: 20px 36px 20px 0;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    list-style: none;
    cursor: pointer;

    transition: color 0.3s var(--ease-premium);
}

.kkm .kkm-facet__title:hover {
    color: var(--color-gold-text);
}

.kkm .kkm-facet__title::-webkit-details-marker {
    display: none;
}

.kkm .kkm-facet__title::after {
    content: "";

    position: absolute;
    top: 50%;
    right: 6px;

    width: 8px;
    height: 8px;
    margin-top: -6px;

    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;

    transform: rotate(45deg);
    transition: transform 0.3s var(--ease-premium);
}

.kkm .kkm-facet[open] > .kkm-facet__title::after {
    margin-top: -2px;
    transform: rotate(-135deg);
}

.kkm .kkm-facet__list {
    margin: -4px 0 0;
    padding: 0 0 20px;

    list-style: none;
}

.kkm .kkm-facet__list li {
    margin: 0;
}

.kkm .kkm-facet__list li::marker {
    content: none;
}


/* ---------- Checkbox rows ---------- */

.kkm .kkm-check {
    position: relative;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 8px 0;

    font-size: 17px;
    line-height: 1.4;

    cursor: pointer;
}

.kkm .kkm-check input {
    position: absolute;

    width: 18px;
    height: 18px;
    margin: 0;

    opacity: 0;
    cursor: pointer;
}

.kkm .kkm-check__box {
    flex: 0 0 18px;

    width: 18px;
    height: 18px;

    background: var(--kkm-white);
    border: 1px solid #bdbdbd;

    transition: border-color 0.3s var(--ease-premium), background 0.3s var(--ease-premium);
}

.kkm .kkm-check input:checked + .kkm-check__box {
    background: var(--kkm-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 14px no-repeat;
    border-color: var(--kkm-ink);
}

.kkm .kkm-check input:focus-visible + .kkm-check__box {
    outline: 1px solid var(--kkm-gold);
    outline-offset: 2px;
}

.kkm .kkm-check:hover .kkm-check__box {
    border-color: var(--kkm-ink);
}

.kkm .kkm-check__label {
    flex: 1;
    transition: color 0.3s var(--ease-premium);
}

.kkm .kkm-check:hover .kkm-check__label {
    color: var(--color-gold-text);
}

.kkm .kkm-check__count {
    padding-left: 8px;

    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--kkm-muted);
}

.kkm .kkm-check.is-disabled {
    opacity: 0.38;
    cursor: default;
}

.kkm .kkm-check.is-disabled:hover .kkm-check__label {
    color: inherit;
}


/* ---------- Range filters (from – to) ---------- */

.kkm .kkm-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;

    padding: 0 0 8px;
}

.kkm .kkm-range__field {
    display: grid;
    gap: 6px;

    margin: 0;
}

.kkm .kkm-range__label {
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kkm-muted);
}

.kkm .kkm-range input {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 12px;

    font: 15px var(--kkm-sans);
    color: var(--kkm-ink);

    background: var(--kkm-white);
    border: 1px solid var(--kkm-line);
    border-radius: 0;

    -moz-appearance: textfield;
}

.kkm .kkm-range input::-webkit-outer-spin-button,
.kkm .kkm-range input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.kkm .kkm-range input:hover {
    border-color: #bdbdbd;
}

.kkm .kkm-range input:focus {
    border-color: var(--kkm-ink);
    outline: none;
}

.kkm .kkm-range input::placeholder {
    color: #a8a8a8;
}

.kkm .kkm-range__sep {
    padding-bottom: 12px;
    color: var(--kkm-muted);
}

.kkm .kkm-range__unit {
    padding-bottom: 13px;

    font-size: 15px;
    color: var(--kkm-muted);
}

.kkm .kkm-range__hint {
    margin: 6px 0 20px;

    font-size: 13px;
    color: var(--kkm-muted);
}

/* Slider under the from/to fields (two range inputs on one track) */

.kkm .kkm-slider {
    --kkm-thumb: 20px;
    --a: 0;
    --b: 1;

    position: relative;

    height: 32px;
    margin: 4px 0 0;
}

.kkm .kkm-slider__track,
.kkm .kkm-slider__fill {
    position: absolute;
    top: 50%;

    height: 2px;
    margin-top: -1px;
}

.kkm .kkm-slider__track {
    right: calc(var(--kkm-thumb) / 2);
    left: calc(var(--kkm-thumb) / 2);

    background: var(--kkm-line);
}

.kkm .kkm-slider__fill {
    right: calc(var(--kkm-thumb) / 2 + (100% - var(--kkm-thumb)) * (1 - var(--b)));
    left: calc(var(--kkm-thumb) / 2 + (100% - var(--kkm-thumb)) * var(--a));

    background: var(--kkm-ink);
}

.kkm .kkm-slider__input {
    position: absolute;
    inset: 0;
    z-index: 2;

    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    background: none;
    pointer-events: none;

    -webkit-appearance: none;
    appearance: none;
}

.kkm .kkm-slider__input:focus {
    outline: none;
}

.kkm .kkm-slider__input::-webkit-slider-runnable-track {
    height: 100%;

    background: none;
    border: 0;
}

.kkm .kkm-slider__input::-moz-range-track {
    background: none;
    border: 0;
}

.kkm .kkm-slider__input::-webkit-slider-thumb {
    width: var(--kkm-thumb);
    height: var(--kkm-thumb);
    margin-top: calc((32px - var(--kkm-thumb)) / 2);

    background: var(--kkm-white);
    border: 2px solid var(--kkm-ink);
    border-radius: 50%;
    cursor: grab;
    pointer-events: auto;

    transition: border-color 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium);

    -webkit-appearance: none;
    appearance: none;
}

.kkm .kkm-slider__input::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--kkm-thumb);
    height: var(--kkm-thumb);

    background: var(--kkm-white);
    border: 2px solid var(--kkm-ink);
    border-radius: 50%;
    cursor: grab;
    pointer-events: auto;

    transition: border-color 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium);
}

.kkm .kkm-slider__input:hover::-webkit-slider-thumb,
.kkm .kkm-slider__input:focus-visible::-webkit-slider-thumb {
    border-color: var(--kkm-gold);
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.06);
}

.kkm .kkm-slider__input:hover::-moz-range-thumb,
.kkm .kkm-slider__input:focus-visible::-moz-range-thumb {
    border-color: var(--kkm-gold);
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.06);
}

.kkm .kkm-slider__input:active::-webkit-slider-thumb {
    cursor: grabbing;
}

.kkm .kkm-slider + .kkm-range__hint {
    margin-top: 2px;
}


/* ---------- Product grid + cards ---------- */

.kkm .kkm-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(36px, 3.5vw, 56px) var(--kkm-gap);
}

/* Lists without filters (producer pages, [kronen_maskiner filter="0"]): three columns, like the filtered list. */
.kkm .kkm-listing:not(.has-filters) .kkm-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kkm .kkm-card {
    min-width: 0;
}

.kkm .kkm-card__link {
    display: flex;
    flex-direction: column;

    height: 100%;

    color: inherit;
    text-decoration: none;
}

.kkm .kkm-card__media {
    position: relative;

    overflow: hidden;
    aspect-ratio: 1 / 1;

    background: var(--kkm-tile);
}

.kkm .kkm-card__img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    padding: 8%;

    object-fit: contain;
    mix-blend-mode: multiply;

    transition: transform 0.9s var(--kkm-ease);
}

.kkm .kkm-card__link:hover .kkm-card__img {
    transform: scale(1.035);
}

.kkm .kkm-card__noimg {
    display: block;

    width: 100%;
    height: 100%;

    background: var(--kkm-tile);
}

.kkm .kkm-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding: 22px 4px 0;
}

.kkm .kkm-card__eyebrow {
    margin: 0 0 8px;

    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-gold-text);
}

.kkm .kkm-card__title {
    margin: 0;

    font-size: clamp(22px, 2vw, 26px);

    transition: color 0.3s var(--ease-premium);
}

.kkm .kkm-card__link:hover .kkm-card__title {
    color: var(--color-gold-text);
}

.kkm .kkm-card__desc {
    display: -webkit-box;
    overflow: hidden;

    max-width: none;
    margin: 10px 0 0;

    font-size: 16px;
    line-height: 1.6;
    color: var(--kkm-muted);

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kkm .kkm-card__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin: 16px 0 0;
    padding: 0;

    list-style: none;
}

.kkm .kkm-card__specs li {
    margin: 0;
    padding: 5px 11px;

    font-size: 13px;
    line-height: 1.35;
    color: var(--kkm-ink);

    border: 1px solid var(--kkm-line);
}

.kkm .kkm-card__specs li::marker {
    content: none;
}

.kkm .kkm-card__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: auto;
    padding-top: 20px;

    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.kkm .kkm-card__more svg {
    transition: transform 0.38s var(--kkm-ease);
}

.kkm .kkm-card__link:hover .kkm-card__more {
    color: var(--color-gold-text);
}

.kkm .kkm-card__link:hover .kkm-card__more svg {
    transform: translateX(4px);
}


/* ---------- Machine cards placed elsewhere: [maskin_kort] ---------- */

.kkm .kkm-grid--cols-1 {
    grid-template-columns: minmax(0, 1fr);
}

.kkm .kkm-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kkm .kkm-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kkm .kkm-grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kkm .kkm-grid--cols-1 .kkm-card,
.kkm .kkm-grid--cols-2 .kkm-card {
    max-width: 560px;
}

/* Large card: image on one side, text on the other.
   Every second card flips when several are shown. */

.kkm.kkm-features {
    display: grid;
    gap: clamp(48px, 6vw, 96px);
}

.kkm .kkm-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 5vw, 80px);
}

.kkm .kkm-feature:nth-child(even) .kkm-feature__media {
    order: 2;
}

.kkm .kkm-feature__media {
    position: relative;

    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;

    background: var(--kkm-tile);
}

.kkm .kkm-feature__img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    padding: 9%;

    object-fit: contain;
    mix-blend-mode: multiply;

    transition: transform 0.9s var(--kkm-ease);
}

.kkm .kkm-feature__media:hover .kkm-feature__img {
    transform: scale(1.03);
}

.kkm .kkm-feature__body {
    min-width: 0;
    max-width: 560px;
}

.kkm .kkm-feature__title {
    margin: 0;

    font-family: var(--kkm-serif);
    font-size: clamp(30px, 3.2vw, 44px);
    font-weight: 400;
    line-height: 1.1;
}

.kkm .kkm-feature__title a {
    text-decoration: none;

    transition: color 0.3s var(--ease-premium);
}

.kkm .kkm-feature__title a:hover {
    color: var(--color-gold-text);
}

.kkm .kkm-feature__desc {
    margin: 18px 0 0;

    font-size: 16px;
    line-height: 1.65;
    color: var(--kkm-muted);
}

.kkm .kkm-feature__specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;

    margin: 28px 0 0;
    padding: 0;
}

.kkm .kkm-feature__specs > div {
    padding: 14px 0;

    border-top: 1px solid var(--kkm-line);
}

.kkm .kkm-feature__specs dt {
    margin: 0 0 4px;

    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kkm-muted);
}

.kkm .kkm-feature__specs dd {
    margin: 0;

    font-size: 17px;
    line-height: 1.4;
}

.kkm .kkm-feature .kkm-actions {
    margin-top: 32px;
}

@media (max-width: 1024px) {

    .kkm .kkm-grid--cols-3,
    .kkm .kkm-grid--cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {

    .kkm .kkm-feature {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .kkm .kkm-feature:nth-child(even) .kkm-feature__media {
        order: 0;
    }

    .kkm .kkm-feature__specs {
        grid-template-columns: minmax(0, 1fr);
    }

    .kkm .kkm-grid.kkm-grid--cols-1 {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ---------- Empty states ---------- */

.kkm .kkm-empty {
    padding: var(--space-lg, 56px) 0;

    text-align: center;
    color: var(--kkm-muted);
}

.kkm .kkm-empty p {
    max-width: none;
    margin: 0 0 22px;

    font-size: 16px;
    color: inherit;
}

.kkm .kkm-empty--static {
    text-align: left;
}

.kkm .kkm-empty--static a {
    color: var(--color-gold-text);
}


/* ---------- Product page: top ---------- */

.kkm .kkm-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: start;
    gap: clamp(36px, 5vw, 88px);
}

.kkm .kkm-gallery {
    position: sticky;
    top: calc(var(--header-offset, 0px) + 32px);
}

.kkm .kkm-gallery__main {
    position: relative;

    overflow: hidden;
    aspect-ratio: 1 / 1;

    background: var(--kkm-tile);
}

.kkm .kkm-gallery__img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    padding: 7%;

    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Thumbnails: always one row. Up to six fill the width; more
   than fit become a sideways scrolling strip (swipe on phones),
   with a soft fade at the edge that still has more. */
.kkm .kkm-gallery__thumbs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(76px, calc((100% - 5 * 12px) / 6));
    gap: 12px;

    margin: 11px 0 0;
    padding: 3px;              /* room for the focus ring */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 3px;
    scrollbar-width: thin;
    scrollbar-color: var(--kkm-line) transparent;

    list-style: none;
}

.kkm .kkm-gallery__thumbs.is-overflowing {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}

.kkm .kkm-gallery__thumbs.is-overflowing.is-scrolled {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

.kkm .kkm-gallery__thumbs.is-overflowing.is-scrolled.is-end {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px);
            mask-image: linear-gradient(90deg, transparent, #000 48px);
}

.kkm .kkm-gallery__thumbs li {
    margin: 0;
    scroll-snap-align: start;
}

.kkm .kkm-gallery__thumb {
    display: block;

    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 6px;

    background: var(--kkm-tile);
    border: 1px solid transparent;
    cursor: pointer;

    transition: border-color 0.3s var(--ease-premium);
}

.kkm .kkm-gallery__thumb img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    mix-blend-mode: multiply;
}

.kkm .kkm-gallery__thumb:hover {
    border-color: var(--kkm-line);
}

.kkm .kkm-gallery__thumb.is-active {
    border-color: var(--kkm-ink);
}

.kkm .kkm-summary {
    padding-top: 8px;
}

.kkm .kkm-summary__brand {
    margin: 0 0 24px;
}

.kkm .kkm-summary__brand a {
    display: inline-block;

    font-size: 17px;
    letter-spacing: 0.06em;
    text-decoration: none;
}

.kkm .kkm-summary__logo {
    display: block;

    width: auto;
    height: 36px;
    max-width: 160px;

    object-fit: contain;
    object-position: left center;
}

.kkm .kkm-title {
    margin: 0;
    font-size: clamp(38px, 4.4vw, 60px);
}

.kkm .kkm-lead {
    max-width: 58ch;
    margin: 24px 0 0;

    font-size: 18px;
    line-height: 1.65;
    color: #333333;
}

.kkm .kkm-keyspecs {
    margin: 32px 0 0;
    padding: 0;

    border-top: 1px solid var(--kkm-line);
}

.kkm .kkm-keyspecs > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 20px;

    padding: 14px 0;

    font-size: 16px;
    line-height: 1.5;

    border-bottom: 1px solid var(--kkm-line);
}

.kkm .kkm-keyspecs dt {
    color: var(--kkm-muted);
}

.kkm .kkm-keyspecs dd {
    margin: 0;
    color: var(--kkm-ink);
}

.kkm .kkm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 36px;
}


/* ---------- Product page: downloads ----------
   The documents have their own section under the specifications
   (#dokumenter). The top of the page only has a small shortcut. */

.kkm .kkm-doclink-wrap {
    margin: 20px 0 0;
}

.kkm .kkm-doclink {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-size: 16px;
    color: var(--kkm-ink);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
    text-underline-offset: 0.3em;
    transition: text-decoration-color 0.3s var(--ease-premium);
}

.kkm .kkm-doclink svg {
    flex: none;
    color: var(--color-gold-text);
}

.kkm .kkm-doclink:hover {
    text-decoration-color: currentColor;
}

.kkm .kkm-doclink__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 22px;
    height: 22px;
    padding: 0 6px;

    border-radius: 999px;
    background-color: var(--kkm-tile, var(--color-cream));
    font-size: 13px;
    font-weight: 500;
}

.kkm .kkm-docs .kkm-downloads {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    margin-top: 0;
}

.kkm .kkm-docs {
    scroll-margin-top: var(--kk-anchor-gap, 24px); /* the header slides away going down (round 7) */
}

.kkm .kkm-downloads {
    display: grid;
    gap: 10px;

    margin: 32px 0 0;
    padding: 0;

    list-style: none;
}

.kkm .kkm-downloads li {
    margin: 0;
}

.kkm .kkm-download {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;

    padding: 16px 20px;

    text-decoration: none;

    border: 1px solid var(--kkm-line);

    transition: border-color 0.3s var(--ease-premium);
}

.kkm .kkm-download svg {
    color: var(--color-gold-text);
}

.kkm .kkm-download__title {
    font-size: 17px;
}

.kkm .kkm-download__meta {
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--kkm-muted);
}

.kkm .kkm-download:hover {
    border-color: var(--kkm-gold);
}

.kkm .kkm-download:hover .kkm-download__title {
    color: var(--color-gold-text);
}


/* ---------- Product page: environment image / video ---------- */

.kkm .kkm-ambient {
    margin: var(--space-xl, 96px) 0 0;
}

.kkm .kkm-ambient__frame {
    position: relative;

    overflow: hidden;
    aspect-ratio: 16 / 9;

    background: var(--kkm-tile);
}

.kkm .kkm-ambient__img,
.kkm .kkm-ambient__video,
.kkm .kkm-ambient__poster,
.kkm .kkm-ambient__embed,
.kkm .kkm-ambient__embed iframe {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;
    border: 0;
}

.kkm .kkm-ambient__img {
    object-fit: cover;
}

.kkm .kkm-ambient__video {
    object-fit: cover;
    background: var(--kkm-ink);
}

.kkm .kkm-ambient__play {
    position: absolute;
    top: 50%;
    left: 50%;

    display: grid;
    place-items: center;

    width: 88px;
    height: 88px;
    padding: 0 0 0 4px;

    color: var(--kkm-ink);

    background: rgba(255, 255, 255, 0.92);
    border: 0;
    border-radius: 50%;
    cursor: pointer;

    transform: translate(-50%, -50%);
    transition: background 0.38s var(--kkm-ease), color 0.38s var(--kkm-ease), transform 0.38s var(--kkm-ease);
}

.kkm .kkm-ambient__play:hover,
.kkm .kkm-ambient__play:focus-visible {
    color: var(--kkm-white);
    background: var(--kkm-gold);
    transform: translate(-50%, -50%) scale(1.05);
}

.kkm .kkm-ambient__caption {
    margin-top: 14px;

    font-size: 16px;
    line-height: 1.5;
    color: var(--kkm-muted);
}


/* ---------- Product page: sections ---------- */

.kkm .kkm-section {
    margin-top: var(--space-xl, 96px);
    padding-top: var(--space-md, 48px);

    border-top: 1px solid var(--kkm-line);

    scroll-margin-top: var(--kk-anchor-gap, 24px); /* the header slides away going down (round 7) */
}

.kkm .kkm-ambient + .kkm-section {
    margin-top: var(--space-lg, 64px);
}

.kkm .kkm-section__title {
    margin: 0 0 32px;
    font-size: clamp(30px, 3.2vw, 42px);
}

.kkm .kkm-prose {
    max-width: 72ch;

    font-size: 17px;
    line-height: 1.75;
    color: #222222;
}

.kkm .kkm-prose > :first-child {
    margin-top: 0;
}

.kkm .kkm-prose > :last-child {
    margin-bottom: 0;
}

.kkm .kkm-prose p {
    max-width: none;
    margin: 0 0 1em;

    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.kkm .kkm-prose ul,
.kkm .kkm-prose ol {
    margin: 0 0 1.2em;
    padding-left: 1.2em;
}

.kkm .kkm-prose li {
    margin: 0 0 0.4em;
    padding-left: 0.2em;
    color: inherit;
}

.kkm .kkm-prose li::marker {
    color: var(--color-gold-text);
}

.kkm .kkm-prose strong {
    font-weight: 600;
}

.kkm .kkm-prose h2,
.kkm .kkm-prose h3,
.kkm .kkm-prose h4 {
    margin: 1.6em 0 0.5em;

    font-family: var(--kkm-serif);
    font-weight: 500;
    line-height: 1.2;
}

.kkm .kkm-prose a {
    color: var(--color-gold-text);
    text-underline-offset: 3px;
}

.kkm .kkm-prose a:hover {
    color: var(--kkm-ink);
}


/* ---------- Product page: specification tables ---------- */

.kkm .kkm-specs__groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(36px, 5vw, 88px);
    align-items: start;
}

.kkm .kkm-specs__col {
    min-width: 0;
}

.kkm .kkm-specs__group {
    margin-bottom: var(--space-md, 40px);
}

.kkm .kkm-specs__col:last-child .kkm-specs__group:last-child {
    margin-bottom: 0;
}

.kkm .kkm-specs__heading {
    margin: 0 0 10px;

    font: 600 12px/1.4 var(--kkm-sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-gold-text);
}

.kkm .kkm-spec-table {
    width: 100%;
    margin: 0;

    font-size: 17px;
    line-height: 1.5;

    border: 0;
    border-collapse: collapse;
}

.kkm .kkm-spec-table th,
.kkm .kkm-spec-table td {
    padding: 14px 0;

    text-align: left;
    vertical-align: top;

    background: none !important;
    border: 0;
    border-bottom: 1px solid var(--kkm-line);
}

.kkm .kkm-spec-table th {
    width: 48%;
    padding-right: 24px;

    font-weight: 400;
    color: var(--kkm-muted);
}

.kkm .kkm-spec-table td {
    padding-left: 4px;
}


/* ---------- Product page: accessories from the shop ----------
   The cards are the shop's own (.kk-card, section 18). */

.kkm .kkm-accessories__head {
    margin-bottom: var(--space-md, 40px);
}

.kkm .kkm-accessories__head .kkm-section__title {
    margin-bottom: 0;
}

.kkm .kkm-accessories__intro {
    max-width: 62ch;
    margin: 14px 0 0;

    font-size: 16px;
    line-height: 1.7;
    color: var(--kkm-muted);
}

.kkm .kkm-accessories__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));   /* 3 of 12 grid columns each */
    column-gap: var(--grid-gap, 2rem);
    row-gap: var(--space-lg, 56px);
}


/* ---------- Product page in parts ----------
   The page is split where an Elementor section is placed
   (it runs full width between the parts). Each part is also
   a shortcode for custom Elementor templates. */

.kkm.kkm-single--before {
    padding-bottom: 0;
}

.kkm.kkm-single--after {
    padding-top: 0;
}

.kkm.kkm-single--between {
    padding-top: 0;
    padding-bottom: 0;
}

/* The Elementor section: full width, out to the edges of the
   page wrapper. Its own sections line up with the grid when
   they use the .section class (section 04). */

.kkm-builder {
    margin-top: var(--space-xl, 96px);
    margin-inline: calc(-1 * var(--padding-horizontal));
}

.kkm-builder + .kkm-single--after,
.kkm-builder + .kkm-single--between {
    margin-top: 0;
}

/* Shortcode parts in a custom Elementor template */

.kkm.kkm-part {
    max-width: none;
    padding: 0;
}

.kkm.kkm-part > .kkm-section:first-child,
.kkm.kkm-part > .kkm-ambient:first-child {
    margin-top: 0;
}

.kkm.kkm-part > .kkm-section:first-child {
    padding-top: 0;
    border-top: 0;
}

.kkm.kkm-part--brodsmuler .kkm-crumbs {
    margin-bottom: 0;
}

.kkm .kkm-placeholder {
    margin: 0;
    padding: 20px 24px;

    font-size: 16px;
    color: var(--kkm-muted);

    border: 1px dashed var(--color-gray-300, #d6d6d6);
}


/* ---------- Product page: related ---------- */

.kkm .kkm-related__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
}

.kkm .kkm-grid--related,
.kkm .kkm-listing:not(.has-filters) .kkm-grid--related {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Round 7c: «Lignende …» is one sideways row. Three machines
   show at a time on a PC (two on a tablet, about one and a half
   on a phone, so you can see there is more); swipe, scroll or use
   the arrows for the rest. */

.kkm .kkm-related__nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kkm .kkm-related__nav .kkm-link {
    margin-left: 12px;
}

.kkm .kkm-related__arrow {
    display: none;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;
    padding: 0;

    color: var(--kkm-ink);
    background: transparent;
    border: 1px solid var(--kkm-line);
    border-radius: 999px;
    box-shadow: none;
    cursor: pointer;

    transition: border-color 0.45s var(--kkm-ease), opacity 0.45s var(--kkm-ease);
}

.kkm .kkm-related__arrow[data-kkm-rel="-1"] svg {
    transform: scaleX(-1);
}

.kkm .kkm-related.is-scrollable .kkm-related__arrow {
    display: inline-flex;
}

.kkm .kkm-related__arrow:hover:not(:disabled) {
    color: var(--kkm-ink);
    background: transparent;
    border-color: var(--kkm-ink);
}

.kkm .kkm-related__arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.kkm .kkm-related__track {
    --kkm-rel-gap: var(--kkm-gap, 24px);

    display: flex;
    gap: var(--kkm-rel-gap);

    margin-top: var(--space-sm, 24px);
    padding-bottom: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: none;
}

.kkm .kkm-related__track::-webkit-scrollbar {
    display: none;
}

/* Round 8: while the arrows move the row, the snapping is off
   (the script lands it exactly on a card itself). */
.kkm .kkm-related__track.is-paging {
    scroll-snap-type: none;
}

.kkm .kkm-related__track > .kkm-card {
    flex: 0 0 calc((100% - 2 * var(--kkm-rel-gap)) / 3);
    scroll-snap-align: start;
}

.kkm .kkm-related__track:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 4px;
}

@media (max-width: 1024px) {

    .kkm .kkm-related__track > .kkm-card {
        flex-basis: calc((100% - var(--kkm-rel-gap)) / 2);
    }
}

@media (max-width: 767px) {

    .kkm .kkm-related__track {
        --kkm-rel-gap: 14px;
    }

    .kkm .kkm-related__track > .kkm-card {
        flex-basis: 66%;
    }

    .kkm .kkm-related__arrow {
        display: none !important;
    }
}


/* ---------- Product page: large view of the pictures (round 7c) ----------
   Click the main picture (or the magnifier in its corner) for a
   large view. Arrows, swipe and the keyboard (← → Esc) move
   between pictures; each slides out and the next slides in. On
   phones the main picture itself can be swiped too. */

.kkm .kkm-gallery__main.is-zoomable {
    touch-action: pan-y pinch-zoom; /* round 8b: pinch to zoom works here too */
}

.kkm .kkm-gallery__main.is-zoomable .kkm-gallery__img {
    cursor: zoom-in;
}

.kkm .kkm-gallery__zoom {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    padding: 0;

    color: var(--kkm-ink);
    background: color-mix(in srgb, var(--kkm-white) 88%, transparent);
    border: 1px solid var(--kkm-line);
    border-radius: 999px;
    box-shadow: none;
    cursor: zoom-in;

    transition: border-color 0.45s var(--kkm-ease), transform 0.6s var(--ease-glide);
}

.kkm .kkm-gallery__zoom:hover {
    color: var(--kkm-ink);
    background: var(--kkm-white);
    border-color: var(--kkm-ink);
    transform: scale(1.05);
}

html.kkm-lb-open,
html.kkm-lb-open body {
    overflow: hidden;
}

.kkm-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;

    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 64px;
    align-items: center;

    padding: 64px 16px 48px;

    background: var(--color-cream, #F5F4F1);

    opacity: 0;
    transition: opacity 0.32s var(--ease-premium, ease);
    touch-action: none; /* round 8b: the script does swipe and pinch-zoom itself */
}

.kkm-lightbox[hidden] {
    display: none;
}

.kkm-lightbox.is-open {
    opacity: 1;
}

.kkm-lightbox__stage {
    grid-column: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
}

.kkm-lightbox__img {
    display: block;

    max-width: 100%;
    max-height: calc(100svh - 140px);
    width: auto;
    height: auto;

    object-fit: contain;
    mix-blend-mode: multiply;
    user-select: none;
    -webkit-user-drag: none;
}

.kkm-lightbox button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;
    padding: 0;

    color: var(--color-black);
    background: var(--color-white);
    border: 1px solid color-mix(in srgb, var(--color-black) 14%, transparent);
    border-radius: 999px;
    box-shadow: none;
    cursor: pointer;

    transition: border-color 0.45s var(--ease-premium, ease);
}

.kkm-lightbox button:hover,
.kkm-lightbox button:focus {
    color: var(--color-black);
    background: var(--color-white);
    border-color: var(--color-black);
}

.kkm-lightbox button:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

.kkm-lightbox__close {
    position: absolute;
    top: 12px;
    right: 12px;
}

.kkm-lightbox__arrow--prev {
    grid-column: 1;
    justify-self: start;
}

.kkm-lightbox__arrow--next {
    grid-column: 3;
    justify-self: end;
}

.kkm-lightbox.is-single .kkm-lightbox__arrow {
    visibility: hidden;
}

.kkm-lightbox__count {
    position: absolute;
    left: 50%;
    bottom: 16px;

    margin: 0;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    font-variant-numeric: tabular-nums;
    color: var(--color-muted, #5f5f5f);

    transform: translateX(-50%);
}

@media (max-width: 767px) {

    .kkm-lightbox {
        grid-template-columns: minmax(0, 1fr);
        padding: 64px 8px 56px;
    }

    .kkm-lightbox__stage {
        grid-column: 1;
    }

    /* Phones: swipe instead of arrows */
    .kkm-lightbox__arrow {
        display: none !important;
    }
}


/* ---------- Machines – responsive ---------- */

@media (max-width: 1200px) {

    .kkm .kkm-listing:not(.has-filters) .kkm-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .kkm .kkm-listing.has-filters .kkm-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {

    .kkm .kkm-listing.has-filters {
        display: block;
    }

    .kkm .kkm-listing.has-filters .kkm-grid,
    .kkm .kkm-accessories__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .kkm .kkm-filter-toggle {
        display: inline-flex;
    }

    .kkm .kkm-count {
        flex-basis: 100%;
        order: 3;
        margin: 0;
    }


    /* Filters slide in from the left */

    .kkm .kkm-filters,
    .kkm .kkm-filters.is-sticky {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 100000;

        display: flex;
        flex-direction: column;

        width: min(400px, 90vw);
        overflow: hidden;

        background: var(--kkm-white);

        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.52s var(--kkm-ease), visibility 0s linear 0.52s;
    }

    .kkm .kkm-filters.is-open {
        visibility: visible;
        transform: none;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.12);
        transition: transform 0.52s var(--kkm-ease), visibility 0s var(--ease-premium);
    }

    .kkm .kkm-filters__head {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 18px 16px 18px 28px;

        border-bottom: 1px solid var(--kkm-line);
    }

    .kkm .kkm-filters__title {
        margin: 0;
        font-size: 30px;
    }

    .kkm .kkm-filters__body {
        flex: 1;
        overflow-y: auto;
        overscroll-behavior: contain;

        padding: 4px 28px 24px;

        /* A thin, quiet scrollbar in the theme's colours */
        scrollbar-width: thin;
        scrollbar-color: var(--color-gray-300, #d6d6d6) transparent;
    }

    .kkm .kkm-filters__body::-webkit-scrollbar {
        width: 6px;
    }

    .kkm .kkm-filters__body::-webkit-scrollbar-track {
        background: transparent;
    }

    .kkm .kkm-filters__body::-webkit-scrollbar-thumb {
        background: var(--color-gray-300, #d6d6d6);
        border-radius: 3px;
    }

    .kkm .kkm-filters__body::-webkit-scrollbar-thumb:hover {
        background: var(--kkm-gold);
    }

    .kkm .kkm-filters__body .kkm-facet:first-child {
        border-top: 0;
    }

    .kkm .kkm-filters__tools {
        justify-content: flex-end;
        padding-top: 10px;
    }

    .kkm .kkm-filters__label {
        display: none;
    }

    .kkm .kkm-filters__foot {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 12px;

        padding: 18px 28px calc(18px + env(safe-area-inset-bottom));

        border-top: 1px solid var(--kkm-line);
    }

    .kkm .kkm-filters__foot .kkm-btn {
        padding: 0 20px;
    }

    .kkm .kkm-backdrop {
        position: fixed;
        inset: 0;
        z-index: 99999;

        background: rgba(0, 0, 0, 0.35);
    }

    html.kkm-lock,
    html.kkm-lock body {
        overflow: hidden;
    }


    /* Product page stacks */

    .kkm .kkm-hero,
    .kkm .kkm-head.has-media {
        grid-template-columns: minmax(0, 1fr);
    }

    .kkm .kkm-gallery {
        position: static;
    }
}

@media (max-width: 767px) {

    .kkm {
        padding-top: calc(var(--space-sm, 24px) + var(--kk-offset-top, 0px));
    }

    .kkm .kkm-crumbs {
        margin-bottom: 28px;
    }

    .kkm .kkm-grid,
    .kkm .kkm-listing.has-filters .kkm-grid,
    .kkm .kkm-listing:not(.has-filters) .kkm-grid,
    .kkm .kkm-grid--related,
    .kkm .kkm-accessories__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 14px;
    }

    .kkm .kkm-card__body {
        padding-top: 16px;
    }

    .kkm .kkm-card__title {
        font-size: 20px;
    }

    .kkm .kkm-card__desc {
        display: none;
    }

    .kkm .kkm-card__specs li:nth-child(n+3) {
        display: none;
    }

    .kkm .kkm-specs__groups {
        grid-template-columns: minmax(0, 1fr);
    }

    .kkm .kkm-specs__col:first-child .kkm-specs__group:last-child {
        margin-bottom: var(--space-md, 40px);
    }

    .kkm .kkm-actions .kkm-btn {
        flex: 1 1 100%;
    }

    .kkm .kkm-sort {
        flex: 1 1 100%;
        order: 2;
    }

    .kkm .kkm-sort__select {
        flex: 1;
    }

    .kkm .kkm-sort__label {
        display: none;
    }

    .kkm .kkm-sort select {
        width: 100%;
    }

    .kkm .kkm-brands a {
        min-width: 0;
        height: 48px;
        padding: 0 16px;
    }

    .kkm .kkm-brands--grid a {
        height: 60px;
        padding: 0 10px;
    }

    .kkm .kkm-ambient {
        margin-top: var(--space-lg, 48px);
        margin-inline: calc(-1 * var(--padding-horizontal));
    }

    .kkm .kkm-ambient__frame {
        aspect-ratio: 4 / 3;
    }

    .kkm .kkm-ambient--embed .kkm-ambient__frame {
        aspect-ratio: 16 / 9; /* YouTube / Vimeo keep their own format */
    }

    .kkm .kkm-ambient__caption {
        padding-inline: var(--padding-horizontal);
    }

    .kkm .kkm-ambient__play {
        width: 68px;
        height: 68px;
    }
}

@media (max-width: 420px) {

    .kkm .kkm-card__specs {
        display: none;
    }
}


/* =========================================================
   26. MACHINE QUIZ  (.kkq)
   ---------------------------------------------------------
   [maskin_quiz] from the quiz snippet: up to five questions
   one at a time, the best match (with the next two on
   request) and a contact form. Text is centred. It fills the width of its container – place
   it in an Elementor container with the .section class so
   it sits on the page grid.
   ========================================================= */

.kkq {
    --kkq-ink: var(--color-black, #1c1b19);
    --kkq-gold: var(--color-gold, #A68553);
    --kkq-muted: var(--color-muted, #5f5f5f);
    --kkq-line: var(--color-line, #e6e6e6);
    --kkq-tile: var(--color-cream, #F5F4F1);
    --kkq-white: var(--color-white, #ffffff);
    --kkq-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    --kkq-blue: var(--color-blue, #0C2B50);
    --kkq-radius: var(--border-radius-md, 16px);

    width: 100%;

    font-family: var(--font-body-family);
    font-size: 16px;
    line-height: 1.6;
    color: var(--kkq-ink);
    text-align: center;
}

.kkq *,
.kkq *::before,
.kkq *::after {
    box-sizing: border-box;
}

.kkq [hidden] {
    display: none !important;
}

.kkq :focus-visible {
    outline: 2px solid var(--kkq-gold);
    outline-offset: 3px;
}


/* ---------- Head + progress ---------- */

.kkq .kkq-head {
    margin-bottom: var(--space-lg, 48px);
}

.kkq .kkq-title {
    margin: 0;

    font-family: var(--font-heading-family);
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 500;
    line-height: 1.08;
    color: var(--kkq-ink);
}

.kkq .kkq-lead {
    max-width: 58ch;
    margin: 16px auto 0;

    font-size: 17px;
    line-height: 1.7;
    color: var(--kkq-muted);
}

/* Progress: a line with one point per question (icon +
   short label) and a last point for the result. Answered
   points are gold and can be clicked to change the answer. */

.kkq .kkq-progress {
    position: relative;

    display: flex;
    justify-content: space-between;

    margin: 40px 0 0;
    padding: 0;

    list-style: none;
}

.kkq .kkq-progress > li {
    margin: 0;
}

.kkq .kkq-progress > li::marker {
    content: none;
}

.kkq .kkq-progress__line {
    position: absolute;
    top: 23px;
    left: 24px;
    right: 24px;

    height: 2px;

    background: var(--kkq-line);
}

.kkq .kkq-progress__bar {
    display: block;

    width: 0;
    height: 100%;

    background: var(--kkq-gold);

    transition: width 0.68s var(--kkq-ease);
}

.kkq .kkq-point {
    position: relative;
    z-index: 1;

    display: flex;
    justify-content: center;

    width: 48px;
}

.kkq .kkq-point__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    padding: 0;

    font: inherit;
    color: inherit;

    background: none;
    border: 0;
}

button.kkq-point__btn:not(:disabled) {
    cursor: pointer;
}

.kkq .kkq-point__icon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    color: #a8a8a8;

    background: var(--kkq-white);
    border: 1px solid var(--kkq-line);
    border-radius: 50%;

    transition: background 0.45s var(--kkq-ease), border-color 0.45s var(--kkq-ease), color 0.45s var(--kkq-ease), transform 0.45s var(--kkq-ease);
}

.kkq .kkq-point__label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #a8a8a8;

    transition: color 0.45s var(--ease-premium);
}

.kkq .kkq-point.is-done .kkq-point__icon {
    color: var(--kkq-white);
    background: var(--kkq-gold);
    border-color: var(--kkq-gold);
}

.kkq .kkq-point.is-done .kkq-point__label {
    color: var(--kkq-ink);
}

.kkq .kkq-point.is-current .kkq-point__icon {
    color: var(--kkq-white);
    background: var(--kkq-blue);
    border-color: var(--kkq-blue);

    transform: scale(1.08);
}

.kkq .kkq-point.is-current .kkq-point__label {
    color: var(--kkq-ink);
}

.kkq button.kkq-point__btn:not(:disabled):hover .kkq-point__icon {
    transform: scale(1.08);
}

.kkq .kkq-step-label {
    max-width: none;
    margin: 28px 0 0;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kkq-muted);
}


/* ---------- Questions ---------- */

.kkq .kkq-step {
    margin: 0;
    padding: 0;

    border: 0;

    animation: kkq-in 0.52s var(--kkq-ease);
}

@keyframes kkq-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.kkq .kkq-question {
    margin: 0;
    padding: 0;

    font-family: var(--font-heading-family);
    font-size: clamp(26px, 2.8vw, 34px);
    font-weight: 500;
    line-height: 1.2;
    color: var(--kkq-ink);
}

.kkq .kkq-help {
    max-width: 60ch;
    margin: 10px auto 0;

    font-size: 17px;
    color: var(--kkq-muted);
}

/* Answer cards fill the width. Columns follow the number of
   answers, so a card is never left alone on a line:
   2 → 2 · 3 → 3 · 4 → 4 (2 + 2 on smaller screens) ·
   5 → 5 (3 + 2 on smaller screens). */

.kkq .kkq-options {
    display: grid;
    grid-template-columns: repeat(var(--kkq-cols, 4), minmax(0, 1fr));
    gap: 12px;

    margin-top: 28px;
}

.kkq .kkq-options[data-count="2"] { --kkq-cols: 2; }
.kkq .kkq-options[data-count="3"] { --kkq-cols: 3; }
.kkq .kkq-options[data-count="4"] { --kkq-cols: 4; }
.kkq .kkq-options[data-count="5"] { --kkq-cols: 5; }
.kkq .kkq-options[data-count="6"] { --kkq-cols: 3; }

.kkq .kkq-option {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 120px;
    padding: 26px 26px 24px;

    color: var(--kkq-white);

    background: var(--kkq-blue);
    border-radius: var(--kkq-radius);
    box-shadow: inset 0 0 0 2px transparent;
    cursor: pointer;

    transition: background 0.38s var(--kkq-ease), box-shadow 0.38s var(--kkq-ease), transform 0.38s var(--kkq-ease);
}

.kkq .kkq-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.kkq .kkq-option:hover {
    background: color-mix(in srgb, var(--kkq-blue) 88%, var(--kkq-white));
    transform: translateY(-2px);
}

.kkq .kkq-option:has(input:checked) {
    box-shadow: inset 0 0 0 2px var(--kkq-gold);
}

.kkq .kkq-option:has(input:checked) .kkq-option__label {
    color: var(--kkq-gold);
}

.kkq .kkq-option:has(input:focus-visible) {
    outline: 2px solid var(--kkq-gold);
    outline-offset: 3px;
}

.kkq .kkq-option__label {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--kkq-white);

    transition: color 0.38s var(--ease-premium);
}

.kkq .kkq-option__desc {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}

.kkq .kkq-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;

    margin-top: 28px;
}

.kkq .kkq-back {
    min-height: 44px;
    padding: 0;

    font: 14px var(--font-body-family);
    color: var(--kkq-muted);
    text-decoration: underline;
    text-underline-offset: 3px;

    background: none;
    border: 0;
    cursor: pointer;
}

.kkq .kkq-back:hover {
    color: var(--color-gold-text);
}


/* ---------- Buttons ---------- */

.kkq .kkq-next,
.kkq .kkq-btn,
.kkq .kkq-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 50px;
    padding: 0 28px;

    font: 500 13px/1 var(--font-body-family);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kkq-white);

    background: var(--kkq-ink);
    border: 1px solid var(--kkq-ink);
    border-radius: 0;
    cursor: pointer;

    transition: background 0.38s var(--kkq-ease), border-color 0.38s var(--kkq-ease), opacity 0.38s var(--ease-premium);
}

.kkq .kkq-next:hover:not(:disabled),
.kkq .kkq-btn:hover,
.kkq .kkq-submit:hover:not(:disabled) {
    background: var(--kkq-gold);
    border-color: var(--kkq-gold);
}

.kkq .kkq-submit.is-loading {
    opacity: 0.6;
    cursor: wait;
}

.kkq .kkq-link {
    min-height: 44px;
    padding: 0;

    font: 14px var(--font-body-family);
    color: var(--color-gold-text);
    text-decoration: underline;
    text-underline-offset: 3px;

    background: none;
    border: 0;
    cursor: pointer;
}

.kkq .kkq-link:hover {
    color: var(--kkq-ink);
}


/* ---------- Result: shortlist ---------- */

.kkq .kkq-result:focus,
.kkq .kkq-done:focus {
    outline: none;
}

.kkq .kkq-eyebrow {
    max-width: none;
    margin: 0 0 10px;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-gold-text);
}

.kkq .kkq-result__title {
    margin: 0;

    font-family: var(--font-heading-family);
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 500;
    line-height: 1.15;
    color: var(--kkq-ink);
}

.kkq .kkq-result__text {
    max-width: 60ch;
    margin: 12px auto 0;

    font-size: 16px;
    color: var(--kkq-muted);
}

.kkq .kkq-shortlist {
    margin-top: var(--space-md, 40px);
}

/* The two next suggestions, shown on request */

.kkq .kkq-more {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gap, 2rem);

    margin-top: var(--grid-gap, 2rem);
}

.kkq .kkq-more[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
}

.kkq .kkq-match {
    display: flex;
    flex-direction: column;

    min-width: 0;
    overflow: hidden;

    border: 1px solid var(--kkq-line);
    border-radius: var(--kkq-radius);

    transition: border-color 0.3s var(--ease-premium);
}

.kkq .kkq-match.is-best,
.kkq .kkq-match.is-picked {
    border-color: var(--kkq-ink);
}

.kkq .kkq-match__media {
    position: relative;

    aspect-ratio: 4 / 3;

    background: var(--kkq-tile);
}

.kkq .kkq-match__media img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    padding: 8%;

    object-fit: contain;
    mix-blend-mode: multiply;
}

.kkq .kkq-match__body {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding: 22px 24px 24px;
}

.kkq .kkq-match__score {
    max-width: none;
    margin: 0 0 12px;

    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kkq-muted);
}

.kkq .kkq-match__score span {
    margin-right: 4px;

    font-family: var(--font-heading-family);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-gold-text);
}

.kkq .kkq-match__brand {
    max-width: none;
    margin: 0 0 4px;

    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-gold-text);
}

.kkq .kkq-match__title {
    margin: 0;

    font-family: var(--font-heading-family);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.15;
    color: var(--kkq-ink);
}

.kkq .kkq-match__why {
    display: inline-block;

    margin: 14px auto 0;
    padding: 0;

    text-align: left;
    list-style: none;
}

.kkq .kkq-match__why li {
    position: relative;

    margin: 0 0 6px;
    padding-left: 22px;

    font-size: 16px;
    line-height: 1.45;
    color: var(--kkq-ink);
}

.kkq .kkq-match__why li::before {
    content: "";

    position: absolute;
    top: 6px;
    left: 2px;

    width: 10px;
    height: 6px;

    border-left: 1.5px solid var(--kkq-gold);
    border-bottom: 1.5px solid var(--kkq-gold);

    transform: rotate(-45deg);
}

.kkq .kkq-match__why li::marker {
    content: none;
}

.kkq .kkq-match__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;

    margin-top: auto;
    padding-top: 24px;
}

.kkq .kkq-btn {
    width: 100%;
    min-height: 48px;
    padding: 0 20px;
}

.kkq .kkq-match__actions .kkq-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}


/* The best match is one wide card: image left, text right */

@media (min-width: 768px) {

    .kkq .kkq-shortlist .kkq-match,
    .kkq .kkq-more[data-count="1"] .kkq-match {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .kkq .kkq-shortlist .kkq-match__media,
    .kkq .kkq-more[data-count="1"] .kkq-match__media {
        aspect-ratio: auto;
        min-height: 360px;
    }

    .kkq .kkq-shortlist .kkq-match__body,
    .kkq .kkq-more[data-count="1"] .kkq-match__body {
        justify-content: center;

        padding: 40px clamp(24px, 4vw, 64px);
    }

    .kkq .kkq-shortlist .kkq-match__title {
        font-size: clamp(28px, 2.6vw, 36px);
    }

    .kkq .kkq-shortlist .kkq-match__actions {
        width: 100%;
        max-width: 420px;
        margin-inline: auto;
        margin-top: 0;
    }
}


/* ---------- Result: other options ---------- */

/* "Vis to andre forslag" and "Usikker? Få råd fra en
   selger" – side by side, or full width when only one
   is left */

.kkq .kkq-alts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: var(--grid-gap, 2rem);
}

.kkq .kkq-alt {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 104px;
    padding: 22px 24px;

    font: inherit;
    text-align: center;
    color: var(--kkq-ink);

    background: var(--kkq-tile);
    border: 0;
    border-radius: var(--kkq-radius);
    box-shadow: inset 0 0 0 2px transparent;
    cursor: pointer;

    transition: background 0.38s var(--kkq-ease), color 0.38s var(--kkq-ease), box-shadow 0.38s var(--kkq-ease), transform 0.38s var(--kkq-ease);
}

.kkq .kkq-alt:hover {
    color: var(--kkq-white);
    background: var(--kkq-blue);
    transform: translateY(-2px);
}

.kkq .kkq-alt.is-picked {
    box-shadow: inset 0 0 0 2px var(--kkq-gold);
}

.kkq .kkq-alt__label {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
}

.kkq .kkq-alt__desc {
    font-size: 16px;
    line-height: 1.5;
    opacity: 0.72;
}

.kkq .kkq-restart {
    max-width: none;
    margin: 16px 0 0;
}


/* ---------- Contact form ---------- */

.kkq .kkq-form {
    margin-top: var(--space-lg, 56px);
    padding-top: var(--space-md, 40px);

    border-top: 1px solid var(--kkq-line);

    scroll-margin-top: var(--kk-anchor-gap, 24px); /* the header slides away going down (round 7) */
}

.kkq .kkq-form__title {
    margin: 0 0 28px;

    font-family: var(--font-heading-family);
    font-size: clamp(26px, 2.8vw, 34px);
    font-weight: 500;
    line-height: 1.2;
    color: var(--kkq-ink);
}

.kkq .kkq-form__title:focus {
    outline: none;
}

.kkq .kkq-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;

    text-align: left;
}

.kkq .kkq-field {
    display: grid;
    gap: 8px;
}

.kkq .kkq-field--wide {
    grid-column: 1 / -1;
}

.kkq .kkq-field label {
    font-size: 16px;
    font-weight: 500;
}

.kkq .kkq-optional {
    font-weight: 400;
    color: var(--kkq-muted);
}

.kkq .kkq-field input,
.kkq .kkq-field textarea {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;

    font: 16px/1.5 var(--font-body-family);
    color: var(--kkq-ink);

    background: var(--kkq-white);
    border: 1px solid var(--kkq-line);
    border-radius: 0;
    box-shadow: none;

    transition: border-color 0.3s var(--ease-premium);
}

.kkq .kkq-field textarea {
    min-height: 120px;
    resize: vertical;
}

.kkq .kkq-field input:hover,
.kkq .kkq-field textarea:hover {
    border-color: #bdbdbd;
}

.kkq .kkq-field input:focus,
.kkq .kkq-field textarea:focus {
    border-color: var(--kkq-ink);
    outline: none;
}

.kkq .kkq-hp {
    position: absolute;
    left: -9999px;

    width: 1px;
    height: 1px;
    overflow: hidden;
}

.kkq .kkq-consent {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;

    margin: 24px 0 0;

    font-size: 16px;
    line-height: 1.5;
    color: var(--kkq-muted);

    cursor: pointer;
}

.kkq .kkq-consent input {
    flex: 0 0 18px;

    width: 18px;
    height: 18px;
    margin: 1px 0 0;

    accent-color: var(--kkq-ink);
}

.kkq .kkq-consent a {
    color: var(--color-gold-text);
}

.kkq .kkq-error {
    max-width: none;
    margin: 18px 0 0;
    padding: 12px 16px;

    font-size: 16px;
    color: var(--color-accent, #A40E00);

    background: #fbf3f2;
    border-left: 2px solid var(--color-accent, #A40E00);
}

.kkq .kkq-submit {
    margin-top: 28px;
}

.kkq .kkq-done {
    margin-top: var(--space-lg, 56px);
    padding: var(--space-md, 40px);

    background: var(--kkq-tile);
}

.kkq-note {
    padding: 20px 24px;

    font-size: 16px;
    color: var(--color-muted, #5f5f5f);

    border: 1px dashed var(--color-gray-300, #d6d6d6);
}


/* ---------- Quiz – responsive ---------- */

@media (max-width: 1024px) {

    /* 4 → 2 + 2, 5 → 3 + 2 (six-column grid: three cards of
       two columns, then two cards of three) */

    .kkq .kkq-options[data-count="4"] {
        --kkq-cols: 2;
    }

    .kkq .kkq-options[data-count="5"] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .kkq .kkq-options[data-count="5"] .kkq-option {
        grid-column: span 2;
    }

    .kkq .kkq-options[data-count="5"] .kkq-option:nth-child(n+4) {
        grid-column: span 3;
    }

    .kkq .kkq-option {
        min-height: 104px;
        padding: 22px 22px 20px;
    }

    .kkq .kkq-point__label {
        font-size: 12px;
        letter-spacing: 0.08em;
    }
}

@media (max-width: 767px) {

    .kkq .kkq-more,
    .kkq .kkq-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Two or three cards per line, never one */

    .kkq .kkq-options {
        gap: 8px;
    }

    .kkq .kkq-option {
        gap: 6px;

        min-height: 96px;
        padding: 16px 14px;

        border-radius: var(--border-radius-sm, 8px);
    }

    .kkq .kkq-option__label {
        font-size: 17px;
    }

    .kkq .kkq-option__desc {
        font-size: 13px;
        line-height: 1.4;
    }

    .kkq .kkq-progress {
        margin-top: 28px;
    }

    .kkq .kkq-progress__line {
        top: 17px;
        left: 18px;
        right: 18px;
    }

    .kkq .kkq-point {
        width: 36px;
    }

    .kkq .kkq-point__icon {
        width: 36px;
        height: 36px;
    }

    .kkq .kkq-point__icon svg {
        width: 18px;
        height: 18px;
    }

    .kkq .kkq-point__label {
        display: none;
    }

    .kkq .kkq-step-label {
        margin-top: 20px;
    }

    .kkq .kkq-submit,
    .kkq .kkq-next {
        width: 100%;
    }

    .kkq .kkq-nav {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .kkq .kkq-back {
        align-self: center;
    }

    .kkq .kkq-nav {
        gap: 8px;
    }

    .kkq .kkq-alts {
        flex-direction: column;
    }

    .kkq .kkq-alt {
        flex: none;
        min-height: 88px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .kkq .kkq-step {
        animation: none;
    }
}


/* =========================================================
   27. DEPARTMENTS  (.avd)
   ---------------------------------------------------------
   Departments snippet: [avdeling] card, [avdeling_side]
   page, [avdelinger] large list and [avdelinger_liste]
   small list (footer). Every rule uses two classes
   (.avd .avd-…) so the element rules in section 03 can't
   reset margins and fonts. The small list takes its colours
   from where it is placed (dark or light footer).
   ========================================================= */

.avd {
    --avd-gold: var(--color-gold, #A68553);
    --avd-ink: var(--color-black, #1c1b19);
    --avd-muted: var(--color-muted, #5f5f5f);
    --avd-line: var(--color-line, #e6e6e6);
    --avd-tile: var(--color-cream, #F5F4F1);
    --avd-white: var(--color-white, #ffffff);
    --avd-serif: var(--font-heading-family);
    --avd-sans: var(--font-body-family);

    --avd-gap: clamp(16px, 2.2vw, 32px);
    --avd-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --avd-map-filter: grayscale(1) contrast(1.05);
}

.avd *,
.avd *::before,
.avd *::after {
    box-sizing: border-box;
}

.avd-page,
.avd-list,
.avd-single {
    font-family: var(--avd-sans);
    color: var(--avd-ink);
}

.avd :focus-visible {
    outline: 1px solid var(--avd-gold);
    outline-offset: 3px;
}

.avd .avd-note {
    padding: 16px 20px;

    font-size: 16px;
    color: var(--avd-muted);

    border: 1px dashed var(--avd-line);
}


/* ---------- Shared: facts (address, phone, e-mail, hours) ---------- */

.avd .avd-facts {
    display: grid;
    gap: 20px 28px;

    margin: 0;
}

.avd .avd-fact {
    min-width: 0;
}

.avd .avd-fact__label {
    margin: 0 0 6px;

    font-family: var(--avd-sans);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--avd-gold);
}

.avd .avd-fact__value {
    margin: 0;

    font-size: 17px;
    line-height: 1.6;
    color: var(--avd-ink);
    overflow-wrap: anywhere;
}

.avd .avd-fact__value address {
    margin: 0;
    font-style: normal;
}

.avd .avd-fact__value a,
.avd .avd-small__line a,
.avd .avd-small__name a {
    color: inherit;
    text-decoration: none;

    background-image: linear-gradient(var(--avd-gold), var(--avd-gold));
    background-repeat: no-repeat;
    background-position: left 100%;
    background-size: 0 1px;

    transition: background-size 0.38s var(--ease-premium), color 0.38s var(--ease-premium);
}

.avd .avd-fact__value a:hover,
.avd .avd-small__line a:hover,
.avd .avd-small__name a:hover {
    background-size: 100% 1px;
}


/* ---------- Shared: opening hours ---------- */

.avd .avd-hours {
    max-width: 380px;
    margin: 0;
    padding: 0;

    list-style: none;
}

.avd .avd-hours li {
    display: flex;
    justify-content: space-between;
    gap: 16px;

    margin: 0;
    padding: 6px 0;

    color: inherit;
    border-bottom: 1px solid var(--avd-line);
}

.avd .avd-hours li:first-child {
    padding-top: 0;
}

.avd .avd-hours li:last-child {
    border-bottom: 0;
}

.avd .avd-hours li::marker {
    content: none;
}

.avd .avd-hours__time {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.avd .avd-hours__note {
    max-width: 44ch;
    margin: 10px 0 0;

    font-size: 15px;
    line-height: 1.55;
    color: var(--avd-muted);
}


/* ---------- Shared: map and image ---------- */

.avd .avd-map,
.avd .avd-media {
    position: relative;

    overflow: hidden;
    aspect-ratio: 16 / 10;

    background: var(--avd-tile);
}

.avd .avd-map iframe {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
    filter: var(--avd-map-filter);

    transition: filter 0.9s var(--avd-ease);
}

.avd .avd-map:hover iframe,
.avd .avd-map:focus-within iframe {
    filter: none;
}

.avd .avd-media .avd-img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ---------- Shared: text links and buttons ---------- */

.avd .avd-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--avd-ink);

    transition: color 0.3s var(--ease-premium);
}

.avd .avd-more svg {
    transition: transform 0.38s var(--avd-ease);
}

.avd .avd-more:hover {
    color: var(--avd-gold);
}

.avd .avd-more:hover svg {
    transform: translateX(4px);
}

.avd .avd-more--muted {
    color: var(--avd-muted);
}

.avd .avd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 50px;
    padding: 0 30px;

    font: 500 14px/1 var(--avd-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--avd-white) !important;

    background: var(--avd-ink);
    border: 1px solid var(--avd-ink);
    border-radius: 0;

    transition:
        background 0.38s var(--avd-ease),
        border-color 0.38s var(--avd-ease),
        color 0.38s var(--avd-ease);
}

.avd .avd-btn:hover,
.avd .avd-btn:focus-visible {
    background: var(--avd-gold);
    border-color: var(--avd-gold);
}

.avd .avd-btn--ghost {
    color: var(--avd-ink) !important;
    background: transparent;
}

.avd .avd-btn--ghost:hover,
.avd .avd-btn--ghost:focus-visible {
    color: var(--avd-gold) !important;
    background: transparent;
    border-color: var(--avd-gold);
}


/* ---------- Card ---------- */

.avd .avd-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
    height: 100%;

    background: var(--avd-white);
    border: 1px solid var(--avd-line);
}

.avd .avd-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding: clamp(22px, 2.4vw, 32px);
}

.avd .avd-card__title {
    margin: 0 0 22px;

    font-family: var(--avd-serif);
    font-size: clamp(24px, 2.2vw, 30px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--avd-ink);
}

.avd .avd-card__title a {
    color: inherit;
    text-decoration: none;

    transition: color 0.3s var(--ease-premium);
}

.avd .avd-card__title a:hover {
    color: var(--avd-gold);
}

.avd .avd-card__intro {
    max-width: 52ch;
    margin: -8px 0 24px;

    font-size: 16px;
    line-height: 1.7;
    color: var(--avd-muted);
}

.avd .avd-card__facts {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
}

.avd .avd-card__facts .avd-fact--apningstider {
    grid-column: 1 / -1;
}

.avd .avd-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;

    margin-top: auto;
    padding-top: 26px;
}

/* One department: info on the left, a large map on the right */

.avd .avd-card--wide {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.avd .avd-card--wide.no-media {
    grid-template-columns: minmax(0, 1fr);
}

.avd .avd-card--wide .avd-card__media {
    grid-row: 1;
    grid-column: 2;

    min-height: 440px;
    aspect-ratio: auto;
}

.avd .avd-card--wide .avd-card__body {
    grid-row: 1;
    grid-column: 1;

    padding: clamp(28px, 4vw, 64px);
}

.avd .avd-card--wide .avd-card__title {
    font-size: clamp(32px, 3.4vw, 48px);
}

.avd .avd-card--wide .avd-card__facts {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}


/* ---------- Large list ---------- */

.avd-list {
    --avd-cols: 3;
}

.avd-list[data-cols="1"] { --avd-cols: 1; }
.avd-list[data-cols="2"] { --avd-cols: 2; }
.avd-list[data-cols="4"] { --avd-cols: 4; }

.avd .avd-grid,
.avd-list .avd-grid {
    display: grid;
    grid-template-columns: repeat(var(--avd-cols), minmax(0, 1fr));
    gap: var(--avd-gap);
}

.avd .avd-list__head {
    max-width: 62ch;
    margin-bottom: var(--space-md, 40px);
}

.avd .avd-list__title {
    margin: 0;

    font-family: var(--avd-serif);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 500;
    line-height: 1.08;
    color: var(--avd-ink);
}

.avd .avd-list__intro {
    max-width: none;
    margin: 16px 0 0;

    font-size: 17px;
    line-height: 1.7;
    color: var(--avd-muted);
}


/* ---------- Department page ---------- */

.avd.avd-page {
    width: 100%;
    max-width: var(--site-content-width, 1440px);
    margin: 0 auto;
    padding: calc(var(--space-md, 40px) + var(--kk-offset-top, 0px)) 0 var(--space-xl, 96px);
}

/* Placed in an Elementor container: the container gives the spacing */
.elementor .avd.avd-page {
    padding: 0;
}

.avd .avd-crumbs {
    margin-bottom: var(--space-md, 48px);

    font-size: 15px;
    letter-spacing: 0.02em;
}

.avd .avd-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.avd .avd-crumbs li {
    margin: 0;
    color: var(--avd-muted);
}

.avd .avd-crumbs li::marker {
    content: none;
}

.avd .avd-crumbs li + li::before {
    content: "/";
    margin-right: 8px;
    color: var(--avd-line);
}

.avd .avd-crumbs a {
    color: var(--avd-muted);
    text-decoration: none;

    transition: color 0.3s var(--ease-premium);
}

.avd .avd-crumbs a:hover {
    color: var(--avd-gold);
}

.avd .avd-crumbs [aria-current] {
    color: var(--avd-ink);
}

.avd .avd-page__head {
    max-width: 62ch;
    margin-bottom: var(--space-lg, 56px);
}

.avd .avd-eyebrow {
    margin: 0 0 12px;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--avd-gold);
}

.avd .avd-page__title {
    margin: 0;

    font-family: var(--avd-serif);
    font-size: clamp(40px, 5.4vw, 72px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.005em;
    color: var(--avd-ink);
}

.avd .avd-page__intro {
    max-width: none;
    margin: 20px 0 0;

    font-size: 17px;
    line-height: 1.7;
    color: var(--avd-muted);
}

.avd .avd-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg, 56px) clamp(32px, 5vw, 96px);
}

.avd .avd-page__grid.has-media {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.avd .avd-page__grid.no-media .avd-page__info {
    max-width: 760px;
}

.avd .avd-page__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
}

.avd .avd-page__facts .avd-fact {
    padding: 20px 0 22px;
    border-top: 1px solid var(--avd-line);
}

.avd .avd-page__facts .avd-fact--apningstider {
    grid-column: 1 / -1;
}

.avd .avd-page__facts .avd-fact__value {
    font-size: 17px;
}

.avd .avd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 12px;
}

.avd .avd-page__media {
    min-height: 480px;
    aspect-ratio: auto;
}


/* ---------- Other departments (bottom of the page) ---------- */

.avd .avd-others {
    margin-top: var(--space-xl, 96px);
    padding-top: var(--space-lg, 56px);

    border-top: 1px solid var(--avd-line);
}

.avd .avd-others__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 32px;

    margin-bottom: var(--space-md, 40px);
}

.avd .avd-others__title {
    margin: 0;

    font-family: var(--avd-serif);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--avd-ink);
}


/* ---------- Small list (footer) ----------
   No colours of its own: text follows the surrounding
   colour, secondary lines are a little lighter. Inside the
   footer it uses the footer's colours. */

.avd-small {
    --avd-small-fg: currentColor;
    --avd-small-muted: color-mix(in srgb, currentColor 66%, transparent);
}

.sf-footer .avd-small {
    --avd-small-fg: var(--sf-fg);
    --avd-small-muted: var(--sf-fg); /* round 8: the address is white like the rest */
    --avd-gold: var(--sf-accent);
    --avd-line: var(--sf-line);
}

.avd .avd-small__items {
    display: grid;
    gap: 22px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.avd.avd-small--row .avd-small__items {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: 22px 32px;
}

.avd .avd-small__item {
    margin: 0;
    color: var(--avd-small-fg);
}

.avd .avd-small__item::marker {
    content: none;
}

.avd .avd-small__name {
    max-width: none;
    margin: 0 0 6px;

    font-family: var(--avd-sans);
    font-size: inherit;
    font-weight: 600;
    line-height: 1.5;
    color: var(--avd-small-fg);
}

.avd .avd-small__line {
    max-width: none;
    margin: 0;

    font-family: var(--avd-sans);
    font-size: inherit;
    font-style: normal;
    line-height: 1.6;
    color: var(--avd-small-muted);
}

.avd .avd-small__line a {
    color: var(--avd-small-fg);
}

.avd .avd-small__hours {
    margin-top: 6px;
}

.avd.avd-small .avd-hours {
    max-width: 260px;
}

.avd.avd-small .avd-hours li {
    padding: 0;
    border: 0;
}


/* ---------- Departments – responsive ---------- */

@media (max-width: 1024px) {

    .avd-list[data-cols="3"],
    .avd-list[data-cols="4"] {
        --avd-cols: 2;
    }

    .avd .avd-card--wide,
    .avd .avd-page__grid.has-media {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .avd .avd-page__facts {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {

    .avd-list[data-cols] {
        --avd-cols: 1;
    }

    .avd .avd-card--wide,
    .avd .avd-page__grid.has-media {
        grid-template-columns: minmax(0, 1fr);
    }

    .avd .avd-card--wide .avd-card__media {
        grid-row: 2;
        grid-column: 1;

        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .avd .avd-card--wide .avd-card__body {
        padding: 24px;
    }

    .avd .avd-page__media {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .avd .avd-page__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .avd .avd-page__facts .avd-fact--adresse {
        grid-column: 1 / -1;
    }

    .avd .avd-actions .avd-btn {
        flex: 1 1 100%;
    }
}

@media (max-width: 480px) {

    .avd .avd-page__facts {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* =========================================================
   28. PAGES  (.pg)
   ---------------------------------------------------------
   Building blocks for the pages made by the page setup
   snippet (Verktøy → Sideoppsett). The pages are normal
   Elementor containers and widgets; all looks come from
   the classes below (Advanced › CSS Classes), never from
   the widgets' own style settings.

   Structure of a section:
     .section [.pg-soft | .pg-band | .pg-hero …]   outer container, full width
       .content-width .pg-stack                    inner container, max width
         .pg-head                                  eyebrow + H2 + lead
         .pg-grid .pg-grid--3                      cards / tiles / pillars

   Text:     .pg-eyebrow  .pg-lead  .pg-statement__text
             .pg-check (ticked list)  .pg-updated  .pg-prose
   Layout:   .pg-stack  .pg-grid--1…5  .pg-split [--reverse]
             .pg-narrow (text column)  .pg-actions (buttons)
   Blocks:   .pg-hero [--dark | --ink | --split | --form]  .pg-intro
             .pg-media--optional (hidden until an image is chosen)
             .pg-pillar  .pg-step  .pg-tile [--small]
             .pg-band [--light]  .pg-stat  .pg-quote
             .pg-faq (Elementor accordion)  .pg-logo
             .pg-person  .pg-download  .pg-table
   Shortcodes: .pg-form ([tilbud_skjema])  .pg-posts ([artikler])
   ========================================================= */


/* ---------- Elementor containers: no built-in padding ---------- */

.e-con.content-width,
.e-con[class*="pg-"]:not(.section) {
    --padding-top: 0px;
    --padding-right: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
}

.e-con.content-width {
    --width: 100%;
}

.section .elementor-heading-title {
    line-height: var(--line-height-heading);
    color: var(--theme-text);
}

.theme-dark .elementor-heading-title {
    color: var(--theme-text);
}

.section .elementor-widget-text-editor > :last-child,
.section .elementor-widget-text-editor .elementor-widget-container > :last-child {
    margin-bottom: 0;
}


/* ---------- Stack, grid, split ---------- */

.pg-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-lg) !important;
}

.pg-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--pg-cols, 3), minmax(0, 1fr)) !important;
    gap: var(--space-lg) var(--grid-gap) !important;
    align-items: start;
}

.pg-grid--1 { --pg-cols: 1; }
.pg-grid--2 { --pg-cols: 2; }
.pg-grid--3 { --pg-cols: 3; }
.pg-grid--4 { --pg-cols: 4; }
.pg-grid--5 { --pg-cols: 5; }

.pg-split {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--space-lg) var(--space-xl) !important;
    align-items: start;
}

.pg-split--center {
    align-items: center;
}

.pg-split--reverse > :first-child {
    order: 2;
}

.pg-split__text,
.pg-hero__text,
.pg-head,
.pg-band__text,
.pg-pillar,
.pg-step__body,
.pg-tile,
.pg-person,
.pg-stat,
.pg-download__text {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-sm) !important;
}

.pg-narrow .elementor-widget {
    max-width: 80ch;
}

.pg-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: var(--space-xs) !important;
    margin-top: var(--space-xs);
}

.pg-actions > .elementor-widget {
    width: auto !important;
}

.pg-embed,
.pg-block {
    width: 100%;
}

.pg-block > .elementor-widget-shortcode,
.pg-block .elementor-shortcode {
    width: 100%;
}


/* ---------- Text ---------- */

.pg-eyebrow .elementor-heading-title,
p.pg-eyebrow {
    margin: 0;

    font-family: var(--font-body-family);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;

    color: var(--color-gold-text);
}

.theme-dark .pg-eyebrow .elementor-heading-title,
.theme-dark p.pg-eyebrow {
    color: color-mix(in srgb, var(--color-gold) 55%, var(--color-white));
}

.pg-lead p {
    max-width: 60ch;

    font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
    line-height: 1.55;
}

.pg-head {
    max-width: 70ch;
}

.pg-head--row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between;
    align-items: flex-end;
    max-width: none;
}

.pg-head--line {
    max-width: none;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-line);
}

.pg-statement {
    text-align: center;
}

.pg-statement__text p {
    max-width: 32ch;
    margin-inline: auto;

    font-family: var(--font-heading-family);
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
    font-weight: 500;
    line-height: 1.3;
}

.pg-check {
    margin: 0;
    padding: 0;

    list-style: none;
}

.pg-check li {
    position: relative;

    margin-bottom: var(--space-xs);
    padding-left: 1.75rem;
}

.pg-check li::before {
    content: "";

    position: absolute;
    top: 0.35em;
    left: 0.1rem;

    width: 0.9rem;
    height: 0.5rem;

    border-left: 2px solid var(--color-gold);
    border-bottom: 2px solid var(--color-gold);
    transform: rotate(-45deg);
}

.pg-updated,
.pg-contact-line {
    font-size: var(--font-sm);
    color: var(--color-muted);
}

/* [kontaktliste]: same look as the footer's contact list */

.pg-contact {
    display: grid;
    gap: 12px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.pg-contact li {
    margin: 0;
    line-height: 1.5;
}

.pg-contact a {
    text-decoration: none;
}

.pg-contact a:hover {
    color: var(--color-gold-text);
}

.pg-prose {
    max-width: 75ch;
}

.pg-prose h2 {
    margin-top: var(--space-md);
    font-size: var(--font-h3);
}

.pg-note {
    padding: var(--space-xs) var(--space-sm);

    border: 1px dashed var(--color-gray-300);
    font-size: var(--font-sm);
    color: var(--color-muted);
}


/* ---------- Images (Elementor image widget) ---------- */

.pg-media,
.pg-media img {
    width: 100%;
}

.pg-media img {
    display: block;

    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;

    background-color: var(--color-cream);
}

.pg-media--portrait img  { aspect-ratio: 4 / 5; }
.pg-media--landscape img { aspect-ratio: 3 / 2; }

.pg-media--logo img {
    aspect-ratio: 3 / 2;
    object-fit: contain;
    padding: var(--space-md);
}


/* ---------- Hero ---------- */

.pg-hero.section {
    padding-top: var(--space-xl);
}

.pg-hero h1 {
    max-width: 18ch;
}

.pg-hero--form h1 {
    max-width: none;
}

.pg-hero--dark {
    position: relative;

    justify-content: flex-end !important;
    min-height: clamp(520px, 72vh, 820px);

    background-color: var(--color-black);
    background-position: center;
    background-size: cover;
}

/* Darkens a background image (set it under Style › Background) */

.pg-hero--dark::before {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.15) 60%);
    pointer-events: none;
}

.pg-hero--dark > .content-width {
    position: relative;
    z-index: 1;
}

.pg-hero--dark h1 {
    font-size: clamp(2.75rem, 1.5rem + 4.5vw, 6rem);
}

.pg-hero--split .pg-media img {
    aspect-ratio: 4 / 3;
}


/* ---------- Photo hero ----------
   Dark and black heroes take their photo as the background of the
   hero container itself: Elementor › Style › Background › Classic ›
   Image. Click the screen icon next to «Image» to give tablet and
   mobile their own photo, and set Position and Size per screen the
   same way, so you control the crop on each. Without a photo the
   hero stays black. A shade from the bottom keeps the text legible
   (see «Background photo» below).

   Older pages had the photo in an image widget (.pg-hero__bg). It
   still works, and Verktøy › Sideoppsett › «Toppbilder» moves it
   to the container background. */

.pg-hero--ink,
.pg-hero--dark {
    position: relative;

    background-color: var(--color-black);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.pg-hero--ink > .content-width,
.pg-hero--dark > .content-width {
    position: relative;
    z-index: 2;
}

/* Old image widget, until it is moved to the background */

.pg-hero__bg.elementor-widget {
    position: absolute !important;
    inset: 0;
    z-index: 0;

    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.pg-hero__bg > .elementor-widget-container,
.pg-hero__bg img {
    width: 100%;
    height: 100%;
}

.pg-hero__bg img {
    display: block;
    max-width: none;

    object-fit: cover;
    object-position: center;
}

.pg-hero__bg:not(:has(img[src]:not([src=""]))) {
    display: none !important;
}


/* ---------- Hero height ----------
   Black and dark heroes keep one height, with or without the image
   beside the text and with or without a background photo:
   at least 800px on desktop, text at the bottom. On phones the hero
   is portrait 2:3, so a photo of 800 × 1200 px fits it. */

.pg-hero--ink,
.pg-hero--dark {
    justify-content: flex-end !important;
}

@media (min-width: 1025px) {

    .pg-hero--ink.section,
    .pg-hero--dark.section {
        min-height: 800px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {

    .pg-hero--ink.section,
    .pg-hero--dark.section {
        min-height: 640px;
    }
}

@media (max-width: 767px) {

    /* Portrait 2:3 (width 2, height 3), so an 800 × 1200 photo fills it */
    .pg-hero--ink.section,
    .pg-hero--dark.section {
        min-height: 150vw;
    }
}

/* Background photo: a shade from the bottom, so the text stays
   legible. Always on for dark and black heroes (on plain black it
   doesn't show). Uses ::before, which Elementor otherwise uses for
   its own background overlay. */

.pg-hero--dark::before,
.pg-hero--ink::before {
    content: "" !important;

    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.55) 30%, rgba(0, 0, 0, 0.15) 65%, rgba(0, 0, 0, 0.05) 100%) !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    pointer-events: none;
}


/* ---------- Pillars (numbered points with a line on top) ---------- */

.pg-pillar {
    padding-top: var(--space-sm);
    border-top: 1px solid var(--theme-border);
}

.pg-pillar__num .elementor-heading-title {
    font-family: var(--font-heading-family);
    font-size: var(--font-h4);
    color: var(--color-gold-text);
}

.pg-pillar h3 {
    font-size: var(--font-h4);
}

.pg-timeline .pg-pillar h3 {
    font-size: var(--font-h2);
}

.pg-timeline .pg-pillar:last-child {
    border-top-color: var(--color-gold);
}


/* ---------- Steps ---------- */

.pg-steps {
    display: flex !important;
    flex-direction: column !important;
    max-width: 80ch;
    counter-reset: none;
}

.pg-step {
    display: grid !important;
    grid-template-columns: 3.5rem minmax(0, 1fr) !important;
    gap: var(--space-md) !important;

    padding-block: var(--space-md);
    border-top: 1px solid var(--color-line);
}

.pg-step:last-child {
    border-bottom: 1px solid var(--color-line);
}

.pg-step__num .elementor-heading-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 3rem;
    height: 3rem;

    border: 1px solid var(--color-gold);
    border-radius: var(--border-radius-pill);

    font-family: var(--font-heading-family);
    font-size: var(--font-h4);
    line-height: 1;
}

.pg-step h2 {
    font-size: var(--font-h3);
}


/* ---------- Timeline (compact numbered steps in a grid) ---------- */

.pg-timeline {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--space-md) var(--space-lg) !important;

    counter-reset: none;
}

.pg-timeline__step {
    position: relative;
    gap: 0.4rem !important;

    padding-top: var(--space-sm);
    border-top: 1px solid var(--theme-border, var(--color-line));
}

.pg-timeline__num .elementor-heading-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.4rem;

    border: 1px solid var(--color-gold);
    border-radius: var(--border-radius-pill, 999px);
    font-family: var(--font-body-family);
    font-size: var(--font-sm);
    font-weight: 500;
    line-height: 1;
    color: var(--color-gold-text);
}

.pg-timeline__title .elementor-heading-title {
    font-size: var(--font-h5);
}

.pg-timeline__step p {
    margin: 0;
    color: var(--color-muted);
}

.pg-timeline-section .pg-actions {
    margin-top: var(--space-xs);
}

@media (max-width: 1024px) {

    .pg-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {

    .pg-timeline {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--space-sm) !important;
    }
}


/* ---------- Tiles (the whole tile is a link) ---------- */

a.pg-tile,
.pg-tile {
    color: var(--theme-text);
    text-decoration: none;
}

.pg-tile .pg-tile__title .elementor-heading-title {
    font-size: var(--font-h4);
    transition: color var(--btn-transition);
}

a.pg-tile:hover .pg-tile__title .elementor-heading-title,
a.pg-tile:focus-visible .pg-tile__title .elementor-heading-title {
    color: var(--color-gold-text);
}

a.pg-tile:focus-visible,
a.pg-logo:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 4px;
}

.pg-tile p {
    color: var(--color-muted);
}

.pg-tile:not(:has(.pg-media)) {
    padding-top: var(--space-sm);
    border-top: 1px solid var(--theme-border);
}

.pg-tile--small {
    gap: var(--space-xs) !important;
}

.pg-tile--small .pg-tile__title .elementor-heading-title {
    font-size: var(--font-h5);
}


/* ---------- Logos (producers) ---------- */

a.pg-logo {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-xs) !important;

    color: var(--theme-text);
    text-decoration: none;
}

.pg-logo .pg-media img {
    transition: background-color var(--btn-transition);
}

a.pg-logo:hover .pg-media img {
    background-color: color-mix(in srgb, var(--color-cream) 80%, var(--color-gold));
}

.pg-logo__name .elementor-heading-title {
    font-size: var(--font-h5);
}


/* ---------- Machine test page: "Slik fungerer testen" next to the H1 ---------- */

.pg-howto {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-sm) !important;

    padding: var(--space-md);

    background-color: var(--color-cream);
    border-radius: var(--border-radius-md);
}

.pg-howto__title .elementor-heading-title {
    font-size: var(--font-h4);
}

.pg-howto__list {
    display: grid;
    gap: var(--space-sm);

    margin: 0;
    padding: 0;

    list-style: none;
    counter-reset: howto;
}

.pg-howto__list li {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    column-gap: var(--space-sm);
    row-gap: 2px;

    margin: 0;

    counter-increment: howto;
}

.pg-howto__list li::before {
    content: counter(howto);

    display: grid;
    place-items: center;
    grid-row: span 2;

    width: 2.25rem;
    height: 2.25rem;

    font-weight: 600;
    color: var(--color-white);

    background-color: var(--color-black);
    border-radius: 50%;
}

.pg-howto__list strong {
    font-weight: 600;
}

.pg-howto__list span {
    color: var(--color-muted);
}

.pg-quiz-section {
    background-color: var(--color-cream);
}

.pg-quiz-section .pg-howto {
    background-color: var(--color-white);
}


/* ---------- Producer cards  [produsent_kort] ----------
   Big four: featured image from the producer page with the logo
   on a white badge, then country, name, text. Others: logo, name
   and one sentence. Logos come from Maskiner → Produsenter. */

.pg-brands {
    display: grid;
    gap: var(--space-md);
}

.pg-brands--big {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pg-brands--small {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
}

@media (max-width: 1024px) {
    .pg-brands--small {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .pg-brands--small {
        grid-template-columns: minmax(0, 1fr);
    }
}

a.pg-brand {
    display: flex;
    flex-direction: column;

    color: var(--theme-text);
    text-decoration: none;
}

a.pg-brand:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 4px;
}

.pg-brand__media {
    position: relative;

    margin: 0;
    aspect-ratio: 3 / 2;
    overflow: hidden;

    background-color: var(--color-cream);
    border-radius: var(--border-radius-sm);
}

.pg-brand__img {
    display: block;

    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

a.pg-brand:hover .pg-brand__img {
    transform: scale(1.03);
}

/* Without a featured image the logo sits in the middle. */
.pg-brand__media:not(:has(.pg-brand__img)) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pg-brand__badge {
    position: absolute;
    left: var(--space-sm);
    bottom: var(--space-sm);

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 120px;
    height: 64px;
    padding: 12px 20px;

    background-color: var(--color-white);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
}

.pg-brand__media:not(:has(.pg-brand__img)) .pg-brand__badge {
    position: static;

    min-width: 0;
    height: auto;

    background: none;
    box-shadow: none;
}

.pg-brand__logo {
    display: block;

    max-width: 160px;
    max-height: 40px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.pg-brand__media:not(:has(.pg-brand__img)) .pg-brand__logo {
    max-width: 220px;
    max-height: 72px;
}

.pg-brand__wordmark {
    font-family: var(--font-heading-family);
    font-size: var(--font-h4);
    font-weight: var(--font-heading-weight);
    line-height: 1;
}

.pg-brand__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);

    padding-top: var(--space-sm);
}

.pg-brand__body .pg-eyebrow {
    margin: 0;

    font-size: var(--font-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.pg-brand__name {
    font-family: var(--font-heading-family);
    font-size: var(--font-h3);
    font-weight: var(--font-heading-weight);
    line-height: var(--line-height-heading);

    transition: color var(--btn-transition);
}

a.pg-brand:hover .pg-brand__name {
    color: var(--color-gold-text);
}

.pg-brand__text {
    color: var(--color-muted);
}

.pg-brand__more {
    align-self: flex-start;

    margin-top: 4px;
    padding-bottom: 2px;

    font-weight: 500;

    border-bottom: 1px solid var(--color-gold);
}

/* Small producers */

a.pg-brand--small {
    gap: var(--space-xs);

    padding: var(--space-md);

    background-color: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius-sm);

    transition: border-color var(--btn-transition);
}

a.pg-brand--small:hover {
    border-color: var(--color-gold);
}

.pg-brand__logo-wrap {
    display: flex;
    align-items: center;

    height: 48px;
}

.pg-brand__logo-wrap .pg-brand__logo {
    max-height: 36px;
    max-width: 140px;
}

.pg-brand__logo-wrap .pg-brand__wordmark {
    font-size: var(--font-h5);
}

.pg-brand--small .pg-brand__name {
    font-size: var(--font-h5);
}

.pg-brand--small .pg-brand__text {
    font-size: 1rem;
    line-height: 1.55;
}

.pg-brand--small .pg-brand__more {
    margin-top: auto;
    padding-top: var(--space-xs);
}

@media (max-width: 767px) {
    .pg-brands--big {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ---------- Soft background ---------- */

.pg-soft {
    background-color: var(--color-cream);
}


/* ---------- Bands (dark call to action, key figures) ---------- */

.pg-band {
    background-color: var(--color-blue);
}

.pg-band--light {
    --theme-text: var(--color-black);
    --theme-border: var(--color-black);
    background-color: var(--color-cream);
}

.pg-band__inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: var(--space-md) !important;
}

.pg-band__text {
    --width: auto;
    flex: 1 1 28rem;
}

.pg-band__inner > .pg-actions {
    --width: auto;
    margin-top: 0;
}

.pg-band__text h2 {
    max-width: 22ch;
}

.pg-band p {
    color: color-mix(in srgb, var(--theme-text) 80%, transparent);
}

.pg-stat {
    padding-top: var(--space-sm);
    border-top: 1px solid color-mix(in srgb, var(--theme-border) 35%, transparent);
}

.pg-stat__value .elementor-heading-title {
    font-family: var(--font-heading-family);
    font-size: clamp(2.5rem, 2rem + 2vw, 4rem);
    line-height: 1;
}


/* ---------- Quote ---------- */

.pg-quote blockquote {
    max-width: 40ch;
    margin: 0 auto;

    text-align: center;
}

.pg-quote blockquote p {
    max-width: none;

    font-family: var(--font-heading-family);
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
    font-style: italic;
    line-height: 1.3;
}

.pg-quote cite {
    font-size: var(--font-sm);
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: var(--color-muted);
}


/* ---------- Arrow links («Se alle …» under a section) ---------- */

a.pg-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;

    font-weight: 600;
    color: var(--theme-link, inherit);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 0.3em;
    transition: text-decoration-color 0.38s var(--ease-premium);
}

a.pg-arrow-link::after {
    content: "→";
    transition: transform 0.38s var(--ease-premium);
}

a.pg-arrow-link:hover {
    color: var(--theme-link, inherit);
    text-decoration-color: currentColor;
}

a.pg-arrow-link:hover::after {
    transform: translateX(4px);
}

.pg-more {
    margin-top: calc(-1 * var(--space-xs));
}

.pg-more p {
    margin: 0;
}

.pg-quote-section:has(.pg-quote-wrap > .pg-media--optional img[src*="/elementor/assets/images/placeholder"]) .pg-more {
    text-align: center;
}

/* Text on a photo hero: a soft shadow keeps it readable on bright spots */

:is(.pg-hero--ink, .pg-hero--dark) .pg-hero__text {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* ---------- FAQ (Elementor accordion) ---------- */

.pg-faq .elementor-accordion .elementor-accordion-item {
    border: 0 !important;
    border-top: 1px solid var(--color-line) !important;
}

.pg-faq .elementor-accordion .elementor-accordion-item:last-child {
    border-bottom: 1px solid var(--color-line) !important;
}

/* All answers start closed. The accordion script (sideoppsett snippet) puts
   .kk-acc on <html> and .kk-shown on an answer only when a visitor opens it,
   so an answer Elementor opens by itself on load never shows. */
html.kk-acc :is(.elementor-accordion, .elementor-toggle) .elementor-tab-content:not(.kk-shown) {
    display: none !important;
}

/* The script turns each question into a real <button> inside the heading. */
:is(.elementor-accordion, .elementor-toggle) .kk-acc-btn {
    display: block;

    width: 100%;
    margin: 0;
    padding: 0;

    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    text-transform: inherit;
    color: inherit;

    background: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

:is(.elementor-accordion, .elementor-toggle) .kk-acc-btn:hover,
:is(.elementor-accordion, .elementor-toggle) .kk-acc-btn:focus {
    color: inherit;
    background: none;
}

:is(.elementor-accordion, .elementor-toggle) .kk-acc-btn:focus-visible {
    outline: 2px solid var(--color-gold-text);
    outline-offset: 4px;
}

.pg-faq .elementor-accordion .elementor-tab-title {
    padding: 0 !important;

    font-family: var(--font-heading-family);
    font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
    font-weight: var(--font-heading-weight);
    line-height: 1.3;
}

.pg-faq .elementor-accordion .elementor-tab-title,
.pg-faq .elementor-accordion .kk-acc-btn {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
}

.pg-faq .elementor-accordion .kk-acc-btn {
    padding: var(--space-sm) 0;
}

/* Long questions wrap on small screens. The theme sets buttons to
   one line (white-space: nowrap), which pushed text off the page. */

:is(.elementor-accordion, .elementor-toggle) .kk-acc-btn,
:is(.elementor-accordion, .elementor-toggle) .kk-acc-btn * {
    white-space: normal !important;
}

.pg-faq .elementor-accordion .kk-acc-btn > :not(.elementor-accordion-icon) {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.pg-faq .elementor-accordion .elementor-tab-title :is(a, .elementor-accordion-title, .elementor-accordion-icon) {
    color: var(--theme-text) !important;
    text-decoration: none;
}

.pg-faq .elementor-accordion .elementor-tab-title .elementor-accordion-icon {
    float: none !important;
    flex-shrink: 0;
}

.pg-faq .elementor-accordion .elementor-tab-title:is(.elementor-active, :hover) :is(a, .elementor-accordion-title, .elementor-accordion-icon) {
    color: var(--color-gold-text) !important;
}

.pg-faq .elementor-accordion .elementor-tab-content {
    padding: 0 !important;      /* the space below the answer is the ::after below, so the opening animation stays smooth */
    border: 0 !important;

    color: var(--color-gray-700);
    font-size: var(--font-body);
    line-height: var(--line-height-body);
}

.pg-faq .elementor-accordion .elementor-tab-content > :first-child {
    margin-top: 0;
}

.pg-faq .elementor-accordion .elementor-tab-content > :last-child {
    margin-bottom: 0;
}

.pg-faq .elementor-accordion .elementor-tab-content::after {
    content: "";
    display: block;
    height: var(--space-sm);
}

/* Thin plus that turns into a minus. Elementor's own (bold) icon is hidden. */

.pg-faq .elementor-accordion .elementor-accordion-icon {
    position: relative;

    display: block !important;
    width: 30px !important;
    height: 30px;

    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-radius: 50%;
    transition: border-color 0.38s var(--ease-premium), background-color 0.38s var(--ease-premium);
}

.pg-faq .elementor-accordion .elementor-accordion-icon > * {
    display: none !important;
}

.pg-faq .elementor-accordion .elementor-accordion-icon::before,
.pg-faq .elementor-accordion .elementor-accordion-icon::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 11px;
    height: 1.5px;
    margin: -0.75px 0 0 -5.5px;

    background-color: currentColor;
    border-radius: 1px;
    transition: transform 0.45s var(--ease-premium), opacity 0.45s var(--ease-premium);
}

.pg-faq .elementor-accordion .elementor-accordion-icon::after {
    transform: rotate(90deg);
}

.pg-faq .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon::after {
    transform: rotate(0deg);
    opacity: 0;
}

.pg-faq .elementor-accordion .elementor-tab-title:is(.elementor-active, :hover) .elementor-accordion-icon {
    border-color: currentColor;
}


/* ---------- FAQ section layout ----------
   Heading and a small help box on the left (sticky on desktop),
   questions on the right. */

.pg-faq__aside {
    gap: var(--space-md) !important;
    align-self: start;
}

.pg-faq__help {
    padding: var(--space-sm) var(--space-md) var(--space-md);

    background-color: var(--color-cream);
    border-left: 2px solid var(--color-gold);
    border-radius: 0 12px 12px 0;
}

.theme-dark .pg-faq__help,
.pg-soft .pg-faq__help {
    background-color: color-mix(in srgb, var(--color-gold) 10%, transparent);
}

.pg-faq__help p {
    font-size: var(--font-sm);
}

.pg-faq__help p:last-child {
    margin-bottom: 0;
}

.pg-faq__help .pg-faq__help-title {
    margin-bottom: 0.35rem;

    font-family: var(--font-heading-family);
    font-size: var(--font-h5);
    font-weight: var(--font-heading-weight);
    line-height: 1.25;
    color: var(--theme-heading, var(--theme-text));
}


@media (min-width: 1025px) {

    .pg-faq__layout {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important;
    }

    .pg-faq__aside {
        position: sticky;
        top: calc(var(--header-offset, 0px) + var(--space-md));
    }

    /* Header slid away while scrolling down: less space needed on top */
    html.hdr-hidden .pg-faq__aside {
        top: var(--space-md);
    }
}


/* Tablet and phone: heading, then the questions at full width,
   then the help box (the questions were squeezed into half a
   column on portrait tablets). */

@media (max-width: 1024px) {

    .pg-faq__layout {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: var(--space-md) !important;
    }

    .pg-faq__aside {
        display: contents !important;
    }

    .pg-faq__help {
        order: 1;
        max-width: 46rem;
    }
}


/* ---------- People ---------- */

.pg-person {
    gap: var(--space-xs) !important;
}

.pg-person .pg-media img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    filter: grayscale(1);
    transition: filter 0.45s var(--ease-premium);
}

.pg-person:hover .pg-media img {
    filter: none;
}

.pg-person__name .elementor-heading-title {
    font-size: var(--font-h4);
}

.pg-person__role {
    margin: 0;
    font-size: var(--font-sm);
    color: var(--color-muted);
}

.pg-person__contact {
    font-size: var(--font-sm);
}

/* Phones: two small cards per row instead of one big one */

@media (max-width: 767px) {

    .pg-grid:has(> .pg-person) {
        --pg-cols: 2 !important;
        gap: var(--space-md) var(--space-sm) !important;
    }

    .pg-person__name .elementor-heading-title {
        font-size: var(--font-h5);
    }

    .pg-person__contact {
        overflow-wrap: anywhere;
    }
}


/* ---------- Download row ---------- */

.pg-download {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: var(--space-md) !important;

    padding-block: var(--space-md);
    border-block: 1px solid var(--color-line);
}


/* ---------- Table ---------- */

.pg-table {
    width: 100%;
    margin-bottom: var(--space-sm);

    border-collapse: collapse;
    font-size: var(--font-sm);
}

.pg-table :is(th, td) {
    padding: var(--space-xs) var(--space-sm) var(--space-xs) 0;

    border-bottom: 1px solid var(--color-line);
    text-align: left;
    vertical-align: top;
}

.pg-table thead th {
    font-family: var(--font-heading-family);
    font-size: var(--font-h6);
    font-weight: var(--font-heading-weight);
}

.pg-table tbody th {
    font-weight: 500;
    color: var(--color-muted);
}

.pg-table-wrap {
    width: 100%;
}


/* ---------- Comparison (table() in sideoppsett) ----------
   Three alternatives side by side. The row labels on the left are
   a plain legend; each alternative is a soft card; the picked one
   (.is-featured) is dark, a little wider and reaches a little
   higher and lower than the others. Phones get one card per
   alternative (.pg-compare-cards) instead of the table. */

.pg-table--compare {
    --cmp-radius: 14px;
    --cmp-lift: 14px;               /* how far the featured card reaches past the others */
    --cmp-bg: var(--color-cream);
    --cmp-line: color-mix(in srgb, var(--color-black) 8%, transparent);

    width: 100%;
    margin: 0;

    border-collapse: separate;
    border-spacing: 10px 0;
    font-size: var(--font-body);
    table-layout: fixed;
}

.pg-table--compare :is(th, td) {
    padding: 1rem 1.5rem;

    border: 0;
    text-align: left;
    vertical-align: middle;
}

/* Legend */

.pg-table--compare .pg-compare__legend {
    width: 22%;
    padding-left: 0;

    font-size: var(--font-sm);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.pg-table--compare tbody .pg-compare__legend {
    border-bottom: 1px solid var(--color-line);
}

.pg-table--compare tbody tr:last-child .pg-compare__legend {
    border-bottom: 0;
}

/* Alternatives */

.pg-table--compare .pg-compare__opt {
    width: 24%;

    background-color: var(--cmp-bg);
    background-clip: padding-box;
    color: var(--color-text);
}

.pg-table--compare tbody .pg-compare__opt {
    box-shadow: inset 0 -1px 0 var(--cmp-line);
}

.pg-table--compare tbody tr:last-child .pg-compare__opt {
    box-shadow: none;
}

.pg-table--compare thead .pg-compare__opt {
    padding-top: 1.5rem;
    padding-bottom: 1.1rem;

    border-radius: var(--cmp-radius) var(--cmp-radius) 0 0;
    box-shadow: inset 0 -1px 0 var(--cmp-line);
    vertical-align: bottom;
}

.pg-table--compare tbody tr:last-child .pg-compare__opt {
    border-radius: 0 0 var(--cmp-radius) var(--cmp-radius);
}

.pg-table--compare tbody :is(th, td) {
    vertical-align: top;
}

.pg-table--compare tbody tr:last-child .pg-compare__opt.is-featured {
    padding-bottom: calc(1rem + var(--cmp-lift));
}

.pg-compare__name {
    display: block;

    font-family: var(--font-heading-family);
    font-size: var(--font-h4);
    font-weight: var(--font-heading-weight);
    line-height: 1.2;
}

/* The featured alternative */

.pg-table--compare .pg-compare__opt.is-featured {
    width: 30%;

    background-color: var(--color-black);
    color: var(--color-white);
    font-weight: 500;
}

.pg-table--compare thead .pg-compare__opt.is-featured {
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--color-white) 14%, transparent);
}

.pg-table--compare tbody .pg-compare__opt.is-featured {
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--color-white) 12%, transparent);
}

.pg-table--compare tbody tr:last-child .pg-compare__opt.is-featured {
    box-shadow: none;
}

/* The other two start a little lower and end a little higher:
   a transparent border the background doesn't paint under. */

.pg-table--compare thead .pg-compare__opt:not(.is-featured) {
    border-top: var(--cmp-lift) solid transparent;
    border-radius: calc(var(--cmp-radius) + var(--cmp-lift)) calc(var(--cmp-radius) + var(--cmp-lift)) 0 0;
}

.pg-table--compare tbody tr:last-child .pg-compare__opt:not(.is-featured) {
    border-bottom: var(--cmp-lift) solid transparent;
    border-radius: 0 0 calc(var(--cmp-radius) + var(--cmp-lift)) calc(var(--cmp-radius) + var(--cmp-lift));
}

.pg-table--compare .pg-compare__opt.is-featured .pg-compare__name {
    font-size: calc(var(--font-h4) * 1.12);
}

.pg-compare__badge {
    display: inline-block;
    margin-bottom: 0.6rem;
    padding: 0.2rem 0.65rem;

    border: 1px solid var(--color-gold-on-dark, var(--color-gold));
    border-radius: var(--border-radius-pill, 999px);
    font-family: var(--font-body-family);
    font-size: var(--font-sm);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-gold-on-dark, var(--color-gold));
}

.pg-table--compare tbody .pg-compare__opt.is-featured::before {
    content: "";

    display: inline-block;
    width: 0.55em;
    height: 0.3em;
    margin-right: 0.65em;

    border-left: 1.5px solid var(--color-gold-on-dark, var(--color-gold));
    border-bottom: 1.5px solid var(--color-gold-on-dark, var(--color-gold));
    transform: translateY(-0.2em) rotate(-45deg);
}

/* Phones: one card per alternative */

.pg-compare-cards {
    display: none;
}

@media (max-width: 767px) {

    .pg-table--compare {
        display: none;
    }

    .pg-compare-cards {
        display: grid;
        gap: var(--space-sm);
    }

    .pg-compare-card {
        padding: 1.25rem 1.25rem 0.5rem;

        background-color: var(--color-cream);
        border-radius: 14px;
    }

    .pg-compare-card.is-featured {
        order: -1;
        padding-block: 1.5rem 0.75rem;

        background-color: var(--color-black);
        color: var(--color-white);
    }

    .pg-compare-card .pg-compare-card__title {
        margin: 0 0 0.5rem;
        color: inherit;
    }

    .pg-compare-card dl {
        margin: 0;
    }

    .pg-compare-card dl > div {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.7rem 0;

        border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    }

    .pg-compare-card :is(dt, dd) {
        margin: 0;
        font-size: var(--font-sm);
    }

    .pg-compare-card dt {
        color: color-mix(in srgb, currentColor 65%, transparent);
    }

    .pg-compare-card dd {
        font-weight: 500;
        text-align: right;
    }
}


/* ---------- Articles  [artikler] ---------- */

.pg-post {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.pg-post__media img,
.pg-post__noimg {
    display: block;

    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;

    background-color: var(--color-cream);
}

.pg-post__title {
    margin: 0;
    font-size: var(--font-h4);
}

.pg-post__title a {
    color: var(--theme-text);
    text-decoration: none;
}

.pg-post__title a:hover {
    color: var(--color-gold-text);
}

.pg-post__excerpt,
.pg-post__date {
    margin: 0;
    color: var(--color-muted);
}

.pg-post__date {
    font-size: var(--font-sm);
}


/* ---------- Form  [tilbud_skjema] ---------- */

.pg-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);

    padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);

    background-color: var(--color-white);
    border: 1px solid var(--color-line);
}

.pg-form__title {
    margin: 0;
    font-size: var(--font-h3);
}

.pg-form__about {
    margin: 0;
    color: var(--color-muted);
}

.pg-form__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

.pg-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pg-field--wide {
    grid-column: 1 / -1;
}

.pg-field label {
    font-size: var(--font-sm);
    font-weight: 500;
}

.pg-form__req {
    color: var(--color-accent);
}

.pg-form__opt,
.pg-field__help {
    font-weight: 400;
    font-size: var(--font-sm);
    color: var(--color-muted);
}

.pg-field :is(input, select, textarea) {
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 0.9rem;

    font: inherit;
    font-size: 1rem;
    color: var(--color-text);

    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius-sm);

    transition: border-color var(--btn-transition), box-shadow var(--btn-transition);
}

.pg-field textarea {
    min-height: 120px;
    resize: vertical;
}

.pg-field :is(input, select, textarea):hover {
    border-color: var(--color-gray-500);
}

.pg-field :is(input, select, textarea):focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-gold) 25%, transparent);
}

.pg-form__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);

    font-size: var(--font-sm);
    color: var(--color-muted);
}

.pg-form__consent input {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;

    accent-color: var(--color-black);
}

.pg-form__consent a {
    color: var(--color-gold-text);
}

.pg-form__error {
    margin: 0;
    color: var(--color-accent);
}

.pg-form__submit {
    align-self: flex-start;

    min-height: 48px;
    padding: 0 1.75rem;

    font: inherit;
    font-size: 0.95rem;
    color: var(--color-white);

    background-color: var(--color-black);
    border: 1px solid var(--color-black);
    border-radius: var(--btn-radius);
    cursor: pointer;

    transition: background-color var(--btn-transition), border-color var(--btn-transition);
}

.pg-form__submit:hover:not(:disabled) {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
}

.pg-form__submit:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}

.pg-form__submit.is-loading {
    opacity: 0.6;
    cursor: progress;
}

.pg-form__done:focus {
    outline: none;
}

.pg-hp {
    position: absolute !important;
    left: -9999px !important;

    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ---------- Black hero (follows the header) ---------- */

.pg-hero--ink.section {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-xl);

    background-color: var(--color-black);
}

/* The black hero sits behind the header (kk-hero-overlay), so the
   strip above it is black too, also while the header slides back in */

.pg-hero--ink.e-con {
    --padding-top: var(--space-lg);
}

body:has(.pg-hero--ink, .pg-hero--dark) .elementor-location-header {
    background-color: var(--color-black);
}

.pg-hero--ink .pg-lead p {
    color: color-mix(in srgb, var(--color-white) 78%, transparent);
}

.pg-hero--ink .pg-media img {
    background-color: color-mix(in srgb, var(--color-white) 8%, transparent);
}

.pg-hero--ink + .section:not(.pg-soft, .pg-band, .theme-dark) {
    padding-top: var(--space-xl);
}


/* ---------- Titles ---------- */

.section .elementor-heading-title {
    text-wrap: balance;
}

.nowrap {
    white-space: nowrap;
}


/* ---------- Intro in two columns (producer pages) ---------- */

.pg-intro .pg-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important;
    align-items: start;
}

.pg-intro__text p {
    max-width: 62ch;

    font-family: var(--font-heading-family);
    font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem);
    line-height: 1.45;
}

.pg-intro__text p + p {
    margin-top: var(--space-sm);
}


/* ---------- Quote with portrait ---------- */

.pg-quote-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important;
    align-items: center;
    gap: var(--space-lg) var(--space-xl) !important;
}

.pg-quote-wrap > .pg-quote:only-child,
.pg-quote-wrap:not(:has(.pg-media)) > .pg-quote {
    grid-column: 1 / -1;
}

.pg-quote-wrap:has(.pg-quote__img) .pg-quote blockquote {
    margin: 0;
    text-align: left;
}

.pg-quote__img img {
    max-width: 22rem;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}


/* ---------- Optional images ----------
   Images with .pg-media--optional only show once an image is chosen.
   While Elementor's placeholder is in place they are hidden on the site
   (still visible in the editor), and the text takes the full width.
   To drop one for good, delete the image widget in Elementor. */

body:not(.elementor-editor-active) .pg-media--optional:has(img[src*="/elementor/assets/images/placeholder"]) {
    display: none !important;
}

body:not(.elementor-editor-active) .pg-split:has(> .pg-media--optional img[src*="/elementor/assets/images/placeholder"]) {
    grid-template-columns: minmax(0, 1fr) !important;
}

body:not(.elementor-editor-active) .pg-quote-wrap:has(> .pg-media--optional img[src*="/elementor/assets/images/placeholder"]) {
    grid-template-columns: minmax(0, 1fr) !important;
}

body:not(.elementor-editor-active) .pg-quote-wrap:has(> .pg-media--optional img[src*="/elementor/assets/images/placeholder"]) .pg-quote blockquote {
    margin-inline: auto;
    text-align: center;
}

body:not(.elementor-editor-active) .pg-tile:has(.pg-media--optional img[src*="/elementor/assets/images/placeholder"]) {
    padding-top: var(--space-sm);
    border-top: 1px solid var(--theme-border);
}

.elementor-editor-active .pg-media--optional {
    outline: 2px dashed var(--color-gold);
    outline-offset: -2px;
}


/* ---------- Tablet ---------- */

@media (max-width: 1024px) {

    .pg-grid--4 { --pg-cols: 2; }
    .pg-grid--5 { --pg-cols: 3; }

    .pg-split {
        gap: var(--space-lg) var(--space-lg) !important;
    }

    /* Forms (Få tilbud, Kundeservice, Kontakt) get the full width
       on tablets instead of half a column: text above, form below. */
    .pg-split:has(.pg-form) {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
    }

    .pg-split:has(.pg-form) > .pg-embed {
        max-width: 46rem;
    }
}


/* ---------- Mobile ---------- */

@media (max-width: 767px) {

    .pg-grid--2,
    .pg-grid--3 {
        --pg-cols: 1;
    }

    .pg-grid--5 {
        --pg-cols: 2;
    }

    .pg-split {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .pg-split--reverse > :first-child {
        order: 0;
    }

    .pg-intro .pg-split,
    .pg-quote-wrap {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .pg-quote__img img {
        max-width: 12rem;
    }

    .pg-hero--dark {
        min-height: clamp(440px, 80svh, 680px);
    }

    .pg-step {
        grid-template-columns: 2.75rem minmax(0, 1fr) !important;
        gap: var(--space-sm) !important;
    }

    .pg-step__num .elementor-heading-title {
        width: 2.5rem;
        height: 2.5rem;
    }

    .pg-form__fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .pg-form__submit {
        align-self: stretch;
    }

    .pg-table:not(.pg-table--compare) {
        display: block;
        overflow-x: auto;
    }
}


/* ---------- Small mobile ---------- */

@media (max-width: 480px) {

    .pg-grid--4 {
        --pg-cols: 1;
    }
}


/* ---------- Front page (2026-11-04) ----------
   Follows the front page design: motto + four values (I–IV),
   «Hvordan kan vi hjelpe deg?», the machine test, the quote
   form, environment, service, articles and a contact band. */

.pg-values > .content-width {
    gap: var(--space-xl) !important;
}

.pg-motto blockquote {
    max-width: 48rem;
}

.pg-motto blockquote p {
    font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.25rem);
    line-height: 1.2;
    text-wrap: balance;
}

.pg-motto cite {
    display: block;
    margin-top: var(--space-sm);
}

.pg-pillar--roman {
    padding-top: var(--space-md);
    align-items: center;
    text-align: center;
}

.pg-pillar--roman .pg-pillar__num .elementor-heading-title {
    font-size: clamp(1.6rem, 1.3rem + 1vw, 2.25rem);
    font-weight: 500;
    letter-spacing: 0.06em;
}

.pg-pillar--roman h3 {
    font-size: var(--font-h3);
}

@media (max-width: 767px) {

    .pg-values .pg-grid--4 {
        --pg-cols: 2;
        row-gap: var(--space-md) !important;
    }
}

/* The quote form on the front page: centred, not full width */

.pg-form-section .pg-embed {
    max-width: 52rem;
    margin-inline: auto;
}


/* ---------- Hero: never taller than the screen (2026-11-05) ----------
   Black and dark heroes keep their heights (800px desktop, 640px
   tablet, 2:3 on phones) but are never taller than the screen,
   e.g. on a tablet held sideways, so the buttons stay in view.
   If the text needs more room, the hero grows to fit it. The
   background photo still covers the whole hero. When the hero
   fills the screen, the page setup snippet adds .pg-hero--full
   and a small «Mer under» cue at the bottom. */

@media (min-width: 1025px) {

    .pg-hero--ink.section,
    .pg-hero--dark.section {
        min-height: min(800px, 100vh);
        min-height: min(800px, 100svh);
    }

    /* Front page: about 3:2, but at most 85 % of the screen height,
       so the next section always peeks out below it (round 7g). */
    body.home :is(.pg-hero--ink, .pg-hero--dark).section.kk-hero-overlay {
        min-height: min(66.667vw, 85vh);
        min-height: min(66.667vw, 85svh);
    }
}

@media (min-width: 768px) and (max-width: 1024px) {

    .pg-hero--ink.section,
    .pg-hero--dark.section {
        min-height: min(640px, 100vh);
        min-height: min(640px, 100svh);
    }
}

@media (max-width: 767px) {

    .pg-hero--ink.section,
    .pg-hero--dark.section {
        min-height: min(150vw, 100vh);
        min-height: min(150vw, 100svh);
    }
}

/* Low, wide screens (tablets sideways, small laptops): a little
   less air and a title scaled to the screen height, so text and
   buttons fit inside the first view */

@media (orientation: landscape) and (min-width: 768px) and (max-height: 900px) {

    .pg-hero--ink.section,
    .pg-hero--dark.section {
        padding-bottom: var(--space-lg);
    }

    :is(.pg-hero--ink, .pg-hero--dark) :is(h1, h1.elementor-heading-title) {
        font-size: clamp(2rem, 8svh, 4.75rem);
    }

    :is(.pg-hero--ink, .pg-hero--dark) .pg-hero__text {
        gap: var(--space-xs) !important;
    }
}

/* Full-screen hero: room for the cue under the buttons.
   Round 7f: decided by the screen size in CSS (exactly when the
   hero's height is capped by the screen), not added by the script
   after the page has shown, which pushed the hero's text up a
   moment after loading. */

/* (Not the front page on desktop: its hero is lower than the screen.) */
@media (min-width: 1025px) and (max-height: 800px) {
    body:not(.home) :is(.pg-hero--ink, .pg-hero--dark).section.kk-hero-overlay {
        padding-bottom: calc(var(--space-md) + 76px) !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (max-height: 640px) {
    :is(.pg-hero--ink, .pg-hero--dark).section.kk-hero-overlay {
        padding-bottom: calc(var(--space-md) + 76px) !important;
    }
}

@media (max-width: 767px) and (min-aspect-ratio: 2/3) {
    :is(.pg-hero--ink, .pg-hero--dark).section.kk-hero-overlay {
        padding-bottom: calc(var(--space-md) + 76px) !important;
    }
}

button.pg-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: clamp(14px, 2.5svh, 28px);
    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    min-height: 0;
    margin: 0;
    padding: 8px 12px;

    font: inherit;
    color: color-mix(in srgb, var(--color-white) 80%, transparent);

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);

    transition:
        opacity 0.9s var(--ease-premium),
        transform 0.9s var(--ease-glide),
        visibility 0s linear 0.9s,
        color 0.45s var(--ease-premium);
}

.pg-hero--full:not(.pg-hero--scrolled) button.pg-scroll-cue {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);

    transition:
        opacity 1.2s var(--ease-premium) 0.4s,
        transform 1.2s var(--ease-glide) 0.4s,
        visibility 0s,
        color 0.45s var(--ease-premium);
}

button.pg-scroll-cue:hover,
button.pg-scroll-cue:focus {
    color: var(--color-white);
    background: transparent;
}

button.pg-scroll-cue:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

.pg-scroll-cue__label {
    font-family: var(--font-body-family);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.pg-scroll-cue__line {
    position: relative;

    display: block;
    width: 1px;
    height: 44px;
    overflow: hidden;

    background: color-mix(in srgb, var(--color-white) 25%, transparent);
}

.pg-scroll-cue__line::after {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 45%;

    background: var(--color-gold);

    animation: pg-scroll-cue 2.6s var(--ease-premium-inout) infinite;
}

@keyframes pg-scroll-cue {
    0%        { transform: translateY(-100%); }
    65%, 100% { transform: translateY(230%); }
}

@media (max-height: 520px) {

    button.pg-scroll-cue .pg-scroll-cue__label {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .pg-scroll-cue__line::after {
        animation: none;
        transform: translateY(60%);
    }
}


/* ---------- Producer pages: the brand's logo in «Om merket» ----------
   Added by the page setup snippet when the page is shown (from
   Maskiner → Produsenter → Logo), at the top of the «Om merket»
   text below the hero. The logo keeps its own colours. */

.pg-intro__brandlogo {
    margin: 0 0 var(--space-sm, 1.25rem);
    line-height: 0;
}

.pg-intro__brandlogo-img {
    display: block;

    width: auto;
    height: auto;
    max-height: 56px;
    max-width: min(200px, 60%);

    object-fit: contain;
    object-position: left center;
}


/* ---------- Om oss: the history (2026-11-05) ----------
   The history section had the timeline class on the whole
   section, which turned the section itself into a three-column
   grid: the content sat squeezed in the left column. The
   section is a normal column again (also on pages made before
   this fix), and new pages use .pg-history. Each step has a gold
   dot on its line, and long words like «Kaffebryggeriet» scale
   down to fit their column. */

.section.pg-timeline:not(.pg-timeline-section) {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}

:is(.pg-history, .section.pg-timeline:not(.pg-timeline-section)) .pg-pillar {
    position: relative;

    container-type: inline-size;
    min-width: 0;

    border-top-color: color-mix(in srgb, var(--theme-text) 25%, transparent);
}

:is(.pg-history, .section.pg-timeline:not(.pg-timeline-section)) .pg-pillar::before {
    content: "";

    position: absolute;
    top: -5px;
    left: 0;

    width: 9px;
    height: 9px;

    background: var(--color-gold);
    border-radius: 999px;
}

:is(.pg-history, .section.pg-timeline:not(.pg-timeline-section)) .pg-pillar :is(h3, h3.elementor-heading-title) {
    font-size: min(var(--font-h2), 13.5cqi);
    line-height: 1.1;
    overflow-wrap: break-word;
    hyphens: manual;
}

:is(.pg-history, .section.pg-timeline:not(.pg-timeline-section)) .pg-pillar:last-child {
    border-top-color: var(--color-gold);
}

@media (max-width: 767px) {

    :is(.pg-history, .section.pg-timeline:not(.pg-timeline-section)) .pg-pillar :is(h3, h3.elementor-heading-title) {
        font-size: min(var(--font-h3), 13.5cqi);
    }
}


/* ---------- Blog post (2026-11-05) ----------
   Every post (not built in Elementor) gets this layout from the
   page setup snippet: black hero with the featured image as
   background, breadcrumbs, category, title, date and reading
   time; the text in a calm reading column; sharing; previous /
   next; «Flere artikler»; and the offer band. */

.pg-hero--post.section {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    background-position: center;
    background-size: cover;
}

.pg-hero--ink.pg-hero--post.section {
    min-height: 0;
    padding-bottom: var(--space-lg);
}

@media (min-width: 1025px) {

    .pg-hero--ink.pg-hero--post.pg-hero--photo.section {
        min-height: min(680px, 88svh);
    }
}

@media (min-width: 768px) and (max-width: 1024px) {

    .pg-hero--ink.pg-hero--post.pg-hero--photo.section {
        min-height: min(560px, 88svh);
    }
}

@media (max-width: 767px) {

    .pg-hero--ink.pg-hero--post.pg-hero--photo.section {
        min-height: min(125vw, 88svh);
    }
}

.pg-hero--post .content-width {
    position: relative;
    z-index: 2;
}

.pg-hero--post .pg-hero__text {
    max-width: 62rem;
}

.pg-post-title {
    max-width: 22ch;
    margin: 0;

    font-size: clamp(2.4rem, 1.5rem + 3.2vw, 4.75rem);
    line-height: 1.04;
    text-wrap: balance;
    color: var(--color-white);
}

.pg-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;

    margin: 0;

    font-size: 15px;
    color: color-mix(in srgb, var(--color-white) 75%, transparent);
}

.pg-hero--post p.pg-eyebrow a {
    color: inherit;
    text-decoration: none;
}

.pg-hero--post p.pg-eyebrow a:hover {
    color: var(--color-white);
}

/* Breadcrumbs (also in the blog hero) */

.pg-crumbs {
    font-size: 14px;
    letter-spacing: 0.02em;
}

.pg-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.pg-crumbs li {
    margin: 0;
}

.pg-crumbs li + li::before {
    content: "/";
    margin-right: 8px;
    opacity: 0.4;
}

.pg-crumbs a {
    color: inherit;
    text-decoration: none;
    opacity: 0.75;

    transition: opacity 0.45s var(--ease-premium);
}

.pg-crumbs a:hover {
    opacity: 1;
}

.theme-dark .pg-crumbs {
    color: var(--color-white);
}

/* The reading column */

.pg-article {
    max-width: 44rem;
    margin-inline: auto;
}

.pg-article__lead {
    margin: 0 0 var(--space-md);

    font-family: var(--font-heading-family);
    font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);
    font-weight: 500;
    line-height: 1.35;
}

.pg-article__body {
    font-size: clamp(1.05rem, 1rem + 0.2vw, 1.15rem);
    line-height: 1.75;
}

.pg-article__body > * {
    margin-top: 0;
    margin-bottom: 1.25em;
}

.pg-article__body :is(h2, h3, h4) {
    margin-top: 1.9em;
    margin-bottom: 0.5em;
    line-height: 1.15;
}

.pg-article__body h2 {
    font-size: var(--font-h3);
}

.pg-article__body h3 {
    font-size: var(--font-h4);
}

.pg-article__body a {
    color: var(--color-gold-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;

    transition: color 0.45s var(--ease-premium);
}

.pg-article__body a:hover {
    color: var(--color-black);
}

.pg-article__body :is(ul, ol) {
    padding-left: 1.3em;
}

.pg-article__body li {
    margin-bottom: 0.4em;
}

.pg-article__body li::marker {
    color: var(--color-gold-text);
}

.pg-article__body blockquote {
    margin: 2em 0;
    padding: 0.2em 0 0.2em 1.25em;

    font-family: var(--font-heading-family);
    font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
    line-height: 1.35;

    border-left: 2px solid var(--color-gold);
}

.pg-article__body blockquote p {
    margin: 0 0 0.5em;

    font: inherit;
    color: inherit;
}

.pg-article__body blockquote cite {
    display: block;

    font-family: var(--font-body-family);
    font-size: 15px;
    font-style: normal;
    color: var(--color-muted);
}

.pg-article__body :is(img, video, iframe) {
    max-width: 100%;
    height: auto;
}

.pg-article__body figure {
    margin: 2em 0;
}

.pg-article__body figcaption,
.pg-article__body .wp-caption-text {
    margin-top: 0.6em;

    font-size: 14px;
    color: var(--color-muted);
}

@media (min-width: 1100px) {

    .pg-article__body .alignwide {
        width: min(72rem, 100vw - 2 * var(--padding-horizontal));
        max-width: none;
        margin-inline: calc((44rem - min(72rem, 100vw - 2 * var(--padding-horizontal))) / 2);
    }
}

.pg-article__body .alignfull {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
}

.pg-article__body hr {
    margin: 2.5em 0;
    border: 0;
    border-top: 1px solid var(--color-line);
}

.pg-article__body table {
    width: 100%;
    font-size: 0.95em;
    border-collapse: collapse;
}

.pg-article__body :is(th, td) {
    padding: 10px 12px 10px 0;
    text-align: left;
    border-bottom: 1px solid var(--color-line);
}

/* Tags, sharing, previous / next */

.pg-article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin: var(--space-md) 0 0;
    padding: 0;

    list-style: none;
}

.pg-article__tags a {
    display: inline-block;
    padding: 6px 14px;

    font-size: 14px;
    color: var(--color-black);
    text-decoration: none;

    border: 1px solid var(--color-line);
    border-radius: 999px;

    transition: border-color 0.45s var(--ease-premium);
}

.pg-article__tags a:hover {
    border-color: var(--color-gold);
}

.pg-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px var(--space-sm);

    margin-top: var(--space-lg);
    padding-top: var(--space-sm);

    border-top: 1px solid var(--color-line);
}

.pg-share__label {
    margin: 0;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-gold-text);
}

.pg-share__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.pg-share__btn,
button.pg-share__btn {
    display: inline-flex;
    align-items: center;

    min-height: 40px;
    margin: 0;
    padding: 0 16px;

    font-family: var(--font-body-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-black);
    text-decoration: none;

    background: transparent;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    box-shadow: none;
    cursor: pointer;

    transition: border-color 0.45s var(--ease-premium), color 0.45s var(--ease-premium);
}

.pg-share__btn:hover,
button.pg-share__btn:hover,
button.pg-share__btn:focus {
    color: var(--color-black);
    background: transparent;
    border-color: var(--color-gold);
}

button.pg-share__btn.is-done {
    border-color: var(--color-gold);
}

.pg-article__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);

    margin-top: var(--space-lg);
}

.pg-article__navlink {
    display: flex;
    flex-direction: column;
    gap: 6px;

    padding-top: var(--space-sm);

    color: var(--color-black);
    text-decoration: none;

    border-top: 1px solid var(--color-black);

    transition: border-color 0.6s var(--ease-premium);
}

.pg-article__navlink--next {
    grid-column: 2;
    text-align: right;
}

.pg-article__navlink:hover {
    border-top-color: var(--color-gold);
}

.pg-article__navlink .pg-eyebrow {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-gold-text);
}

.pg-article-page .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pg-hero--post .pg-crumbs {
    margin-bottom: var(--space-xs);
}

.pg-article__navtitle {
    font-family: var(--font-heading-family);
    font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem);
    font-weight: var(--font-heading-weight);
    line-height: 1.2;
}

@media (max-width: 600px) {

    .pg-article__nav {
        grid-template-columns: minmax(0, 1fr);
    }

    .pg-article__navlink--next {
        grid-column: 1;
        text-align: left;
    }
}

.pg-article-more .pg-more {
    margin: 0;
}


/* =========================================================
   29. RESPONSIVE – TABLET
   ========================================================= */

@media (max-width: 1024px) {

    /* ---------- Typography ---------- */

    :root {
        --heading-scale: 1.2;
        --font-h6: 0.85rem;
    }


    /* ---------- Grid ---------- */

    .grid-12 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12 {
        grid-column: span 6;
    }


    /* ---------- Last single item ---------- */

    .grid-fill-last > .col-6:last-child:nth-child(odd),
    .grid-fill-last > .col-4:last-child:nth-child(3n + 1),
    .grid-fill-last > .col-3:last-child:nth-child(4n + 1),
    .grid-fill-last > .col-2:last-child:nth-child(6n + 1) {
        grid-column: span 6;
    }


    /* ---------- Visibility ---------- */

    .hide-tablet {
        display: none;
    }
}


/* =========================================================
   30. RESPONSIVE – MOBILE
   ========================================================= */

@media (max-width: 767px) {

    /* ---------- Typography ---------- */

    :root {
        --font-body: 0.95rem;
        --font-sm: 0.8rem;

        --heading-scale: 1.18;
        --font-h6: 0.8rem;

        --header-height: 68px;
    }


    /* ---------- Grid ---------- */

    .grid-12 {
        grid-template-columns: minmax(0, 1fr);
    }

    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12 {
        grid-column: span 1;
    }


    /* ---------- Sections ---------- */

    .section {
        padding-block: var(--space-md);
    }


    /* ---------- Last single item ---------- */

    .grid-fill-last > * {
        grid-column: span 1 !important;
    }
}


/* ---------- Breadcrumbs on phones (2026-11-05) ----------
   One tidy line instead of several ragged ones. If the trail is
   longer than the screen, it scrolls sideways: it starts at the
   end (the page you are on), and the left edge fades to show that
   there is more. A long page name is cut with «…». */

@media (max-width: 767px) {

    .kk-scope .kk-breadcrumb,
    .kkm .kkm-crumbs ol,
    .avd .avd-crumbs ol,
    .pg-crumbs ol {
        flex-wrap: nowrap;
        align-items: baseline;

        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;

        font-size: 14px;
        white-space: nowrap;
    }

    .kk-scope .kk-breadcrumb::-webkit-scrollbar,
    .kkm .kkm-crumbs ol::-webkit-scrollbar,
    .avd .avd-crumbs ol::-webkit-scrollbar,
    .pg-crumbs ol::-webkit-scrollbar {
        display: none;
    }

    .kk-scope .kk-breadcrumb > *,
    .kkm .kkm-crumbs li,
    .avd .avd-crumbs li,
    .pg-crumbs li {
        flex: none;
        white-space: nowrap;
    }

    .kk-scope .kk-breadcrumb__current,
    .kkm .kkm-crumbs li:last-child,
    .avd .avd-crumbs li:last-child,
    .pg-crumbs li:last-child {
        flex: 0 1 auto;
        min-width: 4em;
        max-width: 70vw;

        overflow: hidden;
        text-overflow: ellipsis;
    }

    :is(.kk-scope .kk-breadcrumb, .kkm .kkm-crumbs ol, .avd .avd-crumbs ol, .pg-crumbs ol).is-overflowing {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px);
                mask-image: linear-gradient(to right, transparent 0, #000 32px);
    }

    :is(.kk-scope .kk-breadcrumb, .kkm .kkm-crumbs ol, .avd .avd-crumbs ol, .pg-crumbs ol).is-overflowing.is-scrolled-start {
        -webkit-mask-image: linear-gradient(to left, transparent 0, #000 32px);
                mask-image: linear-gradient(to left, transparent 0, #000 32px);
    }
}


/* =========================================================
   31. RESPONSIVE – SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    /* ---------- Typography ---------- */

    :root {
        --font-body: 0.9rem;
        --font-sm: 0.75rem;

        --heading-scale: 1.15;
    }


    /* ---------- Visibility ---------- */

    .hide-mobile {
        display: none;
    }


    /* ---------- Hero ---------- */

    .hero {
        min-height: 100svh;
    }
}


/* =========================================================
   32. ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ---------- No box on click or tap ----------
   Clicking or tapping a link, button or menu no longer shows the
   browser's blue focus box or the blue/grey tap flash on tablets
   and phones. Keyboard users still get the gold ring below. */

html {
    -webkit-tap-highlight-color: transparent;
}

:focus:not(:focus-visible) {
    outline: none !important;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
    box-shadow: none;
}

/* Areas that only receive focus from code (page content after the
   skip link, slide-in panels): never a box, also not in Safari */
[tabindex="-1"]:focus {
    outline: none !important;
}


/* ---------- Visible keyboard focus everywhere ----------
   A clear gold ring for keyboard users (not shown on mouse click). */

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--color-gold-text);
    outline-offset: 3px;
}

.theme-dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.kk-header :where(a, button):focus-visible,
.sf-footer :where(a, button):focus-visible {
    outline-color: var(--color-gold-on-dark);
}


/* ---------- Skip link ----------
   The theme's "Hopp til innhold" link: hidden until it gets keyboard focus. */

.skip-link:focus,
.screen-reader-text:focus {
    z-index: 100001;

    padding: 12px 18px;

    font-size: 16px;
    color: var(--color-black);

    background: var(--color-white);
    outline: 2px solid var(--color-gold-text);
}


/* ---------- No lonely last words ----------
   Browsers that support it avoid a single word on the last line.
   The page setup snippet (print_text_js) also glues the last two
   words together, so it works in every browser. */

p,
li,
dd,
blockquote,
figcaption,
.elementor-tab-title,
.kk-acc-btn {
    text-wrap: pretty;
}


/* ---------- Underlined links in running text ----------
   Links inside text are underlined, so they never rely on colour alone. */

.elementor-widget-text-editor p a:not(.elementor-button),
.pg-prose a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}


/* =========================================================
   Page changes (round 7g)
   ---------------------------------------------------------
   The new page slides in from the right over the old one,
   which drifts a little to the left and dims, like turning
   a page in an app. Going back slides the other way (the
   shop snippet marks it as kk-back). No fades. The header
   stays still and is never shown twice: only the new
   header is drawn. The hero slides with the page.
   Browsers without support (e.g. Firefox) change page as
   before. Off with reduced motion.
   ========================================================= */

@view-transition {
    navigation: auto;
}

.header-fixed {
    view-transition-name: kk-header;
}

/* Header: no old copy, no crossfade (that showed the crown twice) */
::view-transition-group(kk-header) {
    animation: none;
}

::view-transition-old(kk-header) {
    display: none;
}

::view-transition-new(kk-header) {
    animation: none;
}

/* Something dark behind the pages while they move */
::view-transition {
    background: var(--color-black, #1c1b19);
}

::view-transition-old(root) {
    animation: kk-vt-old 0.55s cubic-bezier(0.32, 0.72, 0, 1) both;
}

::view-transition-new(root) {
    animation: kk-vt-new 0.55s cubic-bezier(0.32, 0.72, 0, 1) both;
    box-shadow: -12px 0 32px rgba(28, 27, 25, 0.25);
}

html:active-view-transition-type(kk-back)::view-transition-old(root) {
    z-index: 2;
    animation-name: kk-vt-old-back;
    box-shadow: -12px 0 32px rgba(28, 27, 25, 0.25);
}

html:active-view-transition-type(kk-back)::view-transition-new(root) {
    z-index: 1;
    animation-name: kk-vt-new-back;
    box-shadow: none;
}

@keyframes kk-vt-old {
    to { translate: -25% 0; filter: brightness(0.7); }
}

@keyframes kk-vt-new {
    from { translate: 100% 0; }
}

@keyframes kk-vt-old-back {
    to { translate: 100% 0; }
}

@keyframes kk-vt-new-back {
    from { translate: -25% 0; filter: brightness(0.7); }
}

@media (prefers-reduced-motion: reduce) {

    @view-transition {
        navigation: none;
    }

    .header-fixed {
        view-transition-name: none;
    }
}


/* =========================================================
   Pull to refresh (round 7f, shop snippet 1.21.0)
   The round icon that follows the finger when you pull down
   at the top of the page on a touch screen.
   ========================================================= */

.kk-ptr {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 50%;
    z-index: 100001;

    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;

    color: var(--color-gold, #A68553);
    background: var(--color-white, #fff);
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(28, 27, 25, 0.22);

    opacity: 0;
    transform: translate(-50%, -56px);
    pointer-events: none;
}

.kk-ptr__icon {
    display: grid;
    place-items: center;
    transition: color 0.2s ease;
}

.kk-ptr.is-ready .kk-ptr__icon {
    color: var(--color-black, #1c1b19);
}

.kk-ptr.is-loading .kk-ptr__icon {
    animation: kk-ptr-spin 0.8s linear infinite;
}

@keyframes kk-ptr-spin {
    to { rotate: 360deg; }
}



/* =========================================================
   Round 8 (2026-11-11)
   ========================================================= */

/* ---------- No zoom on quick taps (touch) ----------
   Tapping fast in the same spot no longer zooms the page in.
   Pinch-to-zoom still works (needed for accessibility). Zero
   specificity, so elements with their own touch-action (the
   picture viewer, swipe areas) keep theirs. */

:where(html, body, body *) {
    touch-action: manipulation;
}


/* ---------- Menu panel: Varebestilling in the head ----------
   A black pill button beside «Meny», always in view, so it never
   gets lost at the bottom of a long menu. The Varebestilling item
   in the WordPress menu itself is hidden (it would be twice). */

.kk-scope .kk-drawer__head {
    gap: 12px;
}

.kk-scope .kk-menu__cta {
    gap: 9px;
    flex: none;

    min-height: 40px;
    padding: 0 16px 0 13px;

    /* Round 8b: subtler. A thin outline with dark text, cream on hover. */
    color: var(--kk-black);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--kk-gold) 55%, transparent);

    font-size: 12px;
    letter-spacing: 0.1em;

    transition: background-color var(--kk-ease), border-color var(--kk-ease), color var(--kk-ease);
}

.kk-scope .kk-menu__cta:hover,
.kk-scope .kk-menu__cta:focus {
    color: var(--kk-black);
    background: var(--kk-cream);
    border-color: var(--kk-gold);
}

.kk-scope .kk-menu__cta-icon {
    flex: none;
    color: var(--color-gold-text);
}

.kk-scope .kk-menu__list > li:has(> a .kk-menu__order-inner) {
    display: none !important;
}

@media (max-width: 380px) {
    .kk-scope .kk-menu__cta {
        padding: 0 14px 0 12px;
        letter-spacing: 0.06em;
    }
}

/* ---------- Menu: sub-pages get the gold underline on hover ---------- */

.kk-scope .kk-menu__list .sub-menu a {
    background-image: linear-gradient(var(--kk-gold), var(--kk-gold));
    background-repeat: no-repeat;
    background-position: left calc(100% - 3px);
    background-size: 0 1px;

    transition: background-size 0.6s var(--ease-glide), color var(--kk-ease);
}

.kk-scope .kk-menu__list .sub-menu a:hover,
.kk-scope .kk-menu__list .sub-menu a:focus-visible {
    background-size: 100% 1px;
}

/* ---------- Menu foot: phone and «Send epost» without underline ---------- */

.kk-scope .kk-drawer__foot .kk-text-link {
    text-decoration: none;
}

.kk-scope .kk-drawer__foot .kk-text-link:hover {
    color: var(--kk-black);
}


/* ---------- Header over light photos: stronger, graded backdrop ----------
   The shop snippet now looks at the spots right behind the logo,
   «Meny», the phone number and the icons (not the strip as a
   whole), so a dark photo with one light patch behind the logo
   still gets help. --kk-hdr-scrim (0–1) says how much: the lighter
   the worst spot, the darker the gradient. The gradient also runs
   a little below the header so it never ends in a hard line, and
   the white logo and icons get a soft shadow. Scrolling still
   fades to the black header as before. */

body:is(.kk-has-hero, :has(.kk-hero-overlay)) .header-fixed::after {
    bottom: -36px;

    background: linear-gradient(to bottom,
        rgba(28, 27, 25, 0.82) 0%,
        rgba(28, 27, 25, 0.7) 40%,
        rgba(28, 27, 25, 0.38) 72%,
        rgba(28, 27, 25, 0.12) 88%,
        rgba(28, 27, 25, 0) 100%);
}

/* Round 8c: the strength comes straight from --kk-hdr-scrim, which
   the server prints in <head> (measured from the photo). So the
   gradient is there from the first frame, with no fade-in. Without
   a value it is 0 (off). The browser check only sets it when the
   server couldn't read the photo. */
body:is(.kk-has-hero, :has(.kk-hero-overlay)) .header-fixed::after {
    opacity: var(--kk-hdr-scrim, 0);
}

/* When the black header takes over (scrolling up), the gradient
   fades out at exactly the same pace as the black fades in, so the
   two always add up to one smooth change (and the part below the
   header goes with it). */
html.kk-hdr-solid body:is(.kk-has-hero, :has(.kk-hero-overlay)) .header-fixed::after {
    opacity: calc(var(--kk-hdr-scrim, 0) * var(--kk-hdr-fade, 0));
    transition: none;
}

body:is(.kk-has-hero, :has(.kk-hero-overlay)) .kk-header__inner > * {
    filter: drop-shadow(0 1px 8px rgba(28, 27, 25, calc(0.45 * var(--kk-hdr-scrim, 0))));
}

html.kk-hdr-solid body:is(.kk-has-hero, :has(.kk-hero-overlay)) .kk-header__inner > * {
    filter: drop-shadow(0 1px 8px rgba(28, 27, 25, calc(0.45 * var(--kk-hdr-scrim, 0) * var(--kk-hdr-fade, 0))));
}


/* ---------- Steps bar on cart and checkout (round 8b) ----------
   Always the same layout, on every screen size: three equal
   columns, the number on top with its label centred under it, and
   a line between the numbers. «Legg til flere varer» is centred on
   its own line under the steps. Written with extra weight so the
   theme's list styles can't squeeze it. */

.kk-scope.kk-steps-bar {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px;

    padding: 22px clamp(16px, 3vw, 36px) 18px;
}

.kk-scope.kk-steps-bar .kk-steps {
    flex: none;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

.kk-scope.kk-steps-bar .kk-steps__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 0;

    width: 100%;
    margin: 0;
    padding: 0;

    list-style: none;
}

.kk-scope.kk-steps-bar .kk-steps__step {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;

    min-width: 0;
    margin: 0;
    padding: 0;

    list-style: none;
}

.kk-scope.kk-steps-bar .kk-steps__step + .kk-steps__step::before {
    content: "";

    position: absolute;
    top: 15px;
    left: calc(-50% + 26px);
    right: calc(50% + 26px);

    display: block;
    width: auto;
    min-width: 0;
    height: 1px;
    margin: 0;

    background: color-mix(in srgb, var(--color-black, #1c1b19) 16%, transparent);
}

.kk-scope.kk-steps-bar .kk-steps__step.is-done + .kk-steps__step::before {
    background: var(--kk-gold);
}

.kk-scope.kk-steps-bar .kk-steps__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;

    min-width: 0;
    padding: 0;

    text-align: center;
}

.kk-scope.kk-steps-bar .kk-steps__num {
    width: 30px;
    height: 30px;
    padding: 0;
}

.kk-scope.kk-steps-bar .kk-steps__step > span {
    padding-block: 0;
}

.kk-scope.kk-steps-bar .kk-steps__label,
.kk-scope.kk-steps-bar .kk-steps__step:not(.is-current) .kk-steps__label {
    position: static;

    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;

    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

.kk-scope.kk-steps-bar .kk-steps__back {
    align-self: center;
    justify-content: center;

    width: min(560px, 100%);
    padding: 14px 0 0;

    border-top: 1px solid color-mix(in srgb, var(--color-black, #1c1b19) 10%, transparent);
}

@media (max-width: 600px) {

    .kk-scope.kk-steps-bar {
        padding: 18px 14px 14px;
    }

    .kk-scope.kk-steps-bar .kk-steps__num {
        width: 28px;
        height: 28px;
    }

    .kk-scope.kk-steps-bar .kk-steps__step + .kk-steps__step::before {
        top: 14px;
        left: calc(-50% + 22px);
        right: calc(50% + 22px);
    }

    .kk-scope.kk-steps-bar .kk-steps__label,
    .kk-scope.kk-steps-bar .kk-steps__step:not(.is-current) .kk-steps__label {
        font-size: 10.5px;
        letter-spacing: 0.1em;
    }
}


/* ---------- Large picture view: zoom (round 8b) ----------
   Pinch (or double tap / double click, or trackpad pinch) zooms
   the picture up to 4×; drag to move it around. */

.kkm-lightbox__img {
    cursor: zoom-in;
    will-change: transform;
}

.kkm-lightbox.is-zoomed .kkm-lightbox__img {
    cursor: grab;
}

.kkm-lightbox.is-zoomed .kkm-lightbox__img:active {
    cursor: grabbing;
}


/* ---------- Blog post: 3:2 featured image (round 8d) ----------
   The black band holds the category, title and date (no
   breadcrumbs). The featured image follows in 3:2, whole and
   uncropped in that shape, lying half over the black band. Title
   and image share the same width, the text column stays narrow. */

.pg-hero--ink.pg-hero--post.section {
    --pg-post-overlap: clamp(72px, 12vw, 220px);

    min-height: 0;
    background-image: none !important;
}

.pg-hero--ink.pg-hero--post.pg-hero--has-figure.section {
    padding-bottom: calc(var(--space-md) + var(--pg-post-overlap));
}

.pg-hero--post .content-width,
.pg-post-figure {
    max-width: 1200px;
}

.pg-hero--post .pg-hero__text {
    max-width: 52rem;
}

.pg-hero--post .pg-crumbs {
    display: none;
}

.pg-post-figure-wrap {
    --pg-post-overlap: clamp(72px, 12vw, 220px);

    position: relative;
    z-index: 2;

    margin-top: calc(-1 * var(--pg-post-overlap));
    padding-inline: var(--padding-horizontal);
}

.pg-post-figure {
    width: 100%;
    margin: 0 auto;
}

.pg-post-figure__img {
    display: block;

    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;

    background-color: var(--color-cream, #F5F4F1);
    border-radius: var(--border-radius-sm, 8px);
}

.pg-post-figure__cap {
    margin: 10px 0 0;

    font-size: 14px;
    color: var(--color-muted, #5f5f5f);
}

.pg-post-figure-wrap + .pg-article-section.section {
    padding-top: var(--space-lg);
}

@media (max-width: 767px) {

    .pg-hero--ink.pg-hero--post.section,
    .pg-post-figure-wrap {
        --pg-post-overlap: 18vw;
    }

    .pg-post-figure-wrap {
        padding-inline: 0;
    }

    .pg-post-figure__img {
        border-radius: 0;
    }

    .pg-post-figure__cap {
        padding-inline: var(--padding-horizontal);
    }
}


/* ---------- Header fades, softer and more organic (round 8d) ----------
   Both the black header fade and the contrast gradient were
   straight linear ramps with a hard-ish start and end. Now:
   - the ramps follow an eased curve (many stops, sine-shaped), so
     there is no visible line where the fade starts or stops;
   - the edges are slightly curved (an ellipse wider than the
     header): the black thins out at the sides first and lingers a
     moment longer in the middle, like smoke drawing back, instead
     of a flat bar sliding up. The contrast gradient below has the
     same curve, so the two blend into each other. */

body:is(.kk-has-hero, :has(.kk-hero-overlay)) .header-fixed::before {
    -webkit-mask-image: radial-gradient(130% 70% at 50% 0%,
        rgba(0, 0, 0, 1.000) 64.0%,
        rgba(0, 0, 0, 0.962) 67.9%,
        rgba(0, 0, 0, 0.854) 71.8%,
        rgba(0, 0, 0, 0.691) 75.6%,
        rgba(0, 0, 0, 0.500) 79.5%,
        rgba(0, 0, 0, 0.309) 83.4%,
        rgba(0, 0, 0, 0.146) 87.2%,
        rgba(0, 0, 0, 0.038) 91.1%,
        rgba(0, 0, 0, 0.000) 95.0%);
            mask-image: radial-gradient(130% 70% at 50% 0%,
        rgba(0, 0, 0, 1.000) 64.0%,
        rgba(0, 0, 0, 0.962) 67.9%,
        rgba(0, 0, 0, 0.854) 71.8%,
        rgba(0, 0, 0, 0.691) 75.6%,
        rgba(0, 0, 0, 0.500) 79.5%,
        rgba(0, 0, 0, 0.309) 83.4%,
        rgba(0, 0, 0, 0.146) 87.2%,
        rgba(0, 0, 0, 0.038) 91.1%,
        rgba(0, 0, 0, 0.000) 95.0%);
}

body:is(.kk-has-hero, :has(.kk-hero-overlay)) .header-fixed::after {
    background: radial-gradient(150% 100% at 50% 0%,
        rgba(28, 27, 25, 0.840) 8.0%,
        rgba(28, 27, 25, 0.815) 18.2%,
        rgba(28, 27, 25, 0.742) 28.4%,
        rgba(28, 27, 25, 0.630) 38.7%,
        rgba(28, 27, 25, 0.493) 48.9%,
        rgba(28, 27, 25, 0.347) 59.1%,
        rgba(28, 27, 25, 0.210) 69.3%,
        rgba(28, 27, 25, 0.098) 79.6%,
        rgba(28, 27, 25, 0.025) 89.8%,
        rgba(28, 27, 25, 0.000) 100.0%);
}


/* ---------- Blog post: fixes (round 8e) ----------
   On low, wide screens (iPad sideways) the general hero rules for
   short screens set their own bottom padding with !important, so
   the 3:2 picture slid up over the date. The post hero now always
   keeps room for the overlap, with a little more air above the
   picture, and never shows the «Mer under» arrow. */

body .pg-hero--ink.pg-hero--post.section.kk-hero-overlay {
    min-height: 0 !important;
    padding-bottom: var(--space-lg) !important;
}

body .pg-hero--ink.pg-hero--post.pg-hero--has-figure.section.kk-hero-overlay {
    padding-bottom: calc(var(--space-lg) + var(--pg-post-overlap)) !important;
}

.pg-hero--post .pg-scroll-cue {
    display: none !important;
}


/* ---------- [kronen_produkter]: products from a category (round 8e) ---------- */

.kk-scope.kk-products-block {
    max-width: none;
    padding: 0;
}

.kk-scope .kk-products-block__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-xs, 0.75rem) var(--space-md, 2rem);

    margin-bottom: var(--space-md, 2rem);
}

.kk-scope .kk-products-block__head > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kk-scope .kk-products-block__title {
    font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
    line-height: 1.1;
}

.kk-scope .kk-products-block__more {
    min-height: 0;
}

.kk-editor-note {
    padding: 12px 16px;

    font-size: 14px;
    color: #5f5f5f;

    background: #F5F4F1;
    border: 1px dashed #A68553;
    border-radius: 8px;
}


/* =========================================================
   Round 9 (2026-11-12)
   ---------------------------------------------------------
   A. Varebestilling: quantity and «Legg til» on one row
   B. Customer logos  (.kl, kundelogoer-snippet [kundelogoer])
   ========================================================= */

/* ---------- A. Quantity + «Legg til» on one row ----------
   The row decides by the width of the card itself (container
   query on .kk-card__actions), not by the screen, so the same
   rule works in Varebestilling, [kronen_produkter] and on the
   machine pages. Wide cards: normal sizes. Medium cards
   (three in a row on a tablet, two on big phones): tighter
   +/− and button padding. Only cards too narrow for both
   (under 168px: two in a row on phones under 390px) stack
   the quantity above the button.
   These rules replace the earlier stacking at 290px and on
   all phones. */

.kk-scope .kk-buy--card {
    flex-direction: row;
    flex-wrap: wrap;            /* safety net: never overflow the card */
    align-items: center;
    gap: 10px;
}

.kk-scope .kk-buy--card .kk-qty {
    flex: none;
    justify-content: flex-start;
}

.kk-scope .kk-buy--card .kk-btn {
    flex: 1 0 auto;
    width: auto;
    padding-inline: 18px;
}

@container (max-width: 250px) {

    .kk-scope .kk-buy--card {
        gap: 6px;
    }

    .kk-scope .kk-buy--card .kk-qty__btn {
        width: 30px;
    }

    .kk-scope .kk-buy--card .kk-qty__input {
        width: 1.9rem;
    }

    .kk-scope .kk-buy--card .kk-btn {
        padding-inline: 10px;
        letter-spacing: 0.1em;
    }
}

@container (max-width: 220px) {

    .kk-scope .kk-buy--card .kk-qty__btn {
        width: 28px;
    }

    .kk-scope .kk-buy--card .kk-qty__input {
        width: 1.7rem;
    }

    .kk-scope .kk-buy--card .kk-btn {
        padding-inline: 8px;
        letter-spacing: 0.08em;
    }
}

@container (max-width: 167px) {

    .kk-scope .kk-buy--card {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 8px;
    }

    .kk-scope .kk-buy--card .kk-qty {
        justify-content: space-between;
    }

    .kk-scope .kk-buy--card .kk-qty__btn {
        width: 38px;
    }

    .kk-scope .kk-buy--card .kk-qty__input {
        width: 2.25rem;
    }

    .kk-scope .kk-buy--card .kk-btn {
        width: 100%;
        padding-inline: 10px;
        letter-spacing: 0.1em;
    }
}


/* ---------- B. Customer logos (.kl) ----------
   A slow, endless row of customer logos. The logos are
   managed under «Kundelogoer» in wp-admin. The track holds
   the set twice (or more on wide screens) and moves by
   half its width, so the loop has no seam. */

.kl {
    --kl-gap: clamp(2.5rem, 1.6rem + 2.6vw, 4.5rem);
    --kl-fade: clamp(2rem, 8%, 7rem);
    --kl-fg: var(--color-text, #1c1b19);
    --kl-title: var(--color-gold-text);
    --kl-line: var(--color-line, #e6e6e6);

    position: relative;
    padding-block: var(--space-md, 2rem);

    color: var(--kl-fg);
}

.kl--tema-lys  { background: var(--color-white, #fff); }
.kl--tema-krem { background: var(--color-cream, #F5F4F1); }

.kl--tema-mork {
    --kl-fg: var(--color-white, #fff);
    --kl-title: var(--color-gold-on-dark);
    --kl-line: rgba(255, 255, 255, 0.14);

    background: var(--color-black, #1c1b19);
}

.kl--linjer {
    border-block: 1px solid var(--kl-line);
}

.kl__inner {
    box-sizing: content-box;
    max-width: var(--site-content-width, 1440px);
    margin-inline: auto;
    padding-inline: var(--padding-horizontal, 1rem);
}

/* Heading centred, pause button at the right end */

.kl__head {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 32px;
    margin-bottom: var(--space-sm, 1.25rem);
    padding-inline: 44px;
}

.kl__title {
    margin: 0;

    font-family: var(--font-body-family);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;

    color: var(--kl-title);
}

.kl__pause {
    position: absolute;
    top: 50%;
    right: 0;

    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;

    color: inherit;
    background: transparent;
    border: 1px solid var(--kl-line);
    border-radius: 999px;
    box-shadow: none;
    cursor: pointer;
    opacity: 0.55;
    transform: translateY(-50%);

    transition: opacity 0.3s var(--ease-premium, ease), border-color 0.3s var(--ease-premium, ease);
}

.kl__pause:hover,
.kl__pause:focus-visible {
    opacity: 1;
    border-color: var(--color-gold, #A68553);
    background: transparent;
}

.kl__pause:focus-visible {
    outline: 2px solid var(--color-gold, #A68553);
    outline-offset: 2px;
}

/* Two bars = pause; a triangle when paused = play */
.kl__pause-icon {
    width: 8px;
    height: 10px;

    border-inline: 2.5px solid currentColor;
}

.kl.is-paused .kl__pause-icon {
    width: 0;
    height: 0;
    margin-left: 2px;

    border: 0;
    border-block: 5.5px solid transparent;
    border-left: 9px solid currentColor;
}

.kl__sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* The moving row */

.kl__viewport {
    overflow: hidden;

    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--kl-fade), #000 calc(100% - var(--kl-fade)), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 var(--kl-fade), #000 calc(100% - var(--kl-fade)), transparent);
}

.kl__track {
    display: flex;
    width: max-content;

    animation: kl-scroll var(--kl-duration, 40s) linear infinite;
    will-change: transform;
}

.kl--hoyre .kl__track {
    animation-direction: reverse;
}

@keyframes kl-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.kl.is-paused .kl__track,
.kl.is-offscreen .kl__track {
    animation-play-state: paused;
}

@media (hover: hover) {
    .kl__viewport:hover .kl__track {
        animation-play-state: paused;
    }
}

ul.kl__set {
    display: flex;
    flex: none;
    align-items: center;

    margin: 0;
    padding: 0;

    list-style: none;
}

li.kl__item {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;

    height: calc(var(--kl-h, 44px) * 1.25);
    margin: 0;
    padding: 0 var(--kl-gap) 0 0;

    list-style: none;
}

li.kl__item::before,
li.kl__item::marker {
    content: none;
}

.kl__img {
    display: block;
    max-width: none !important;   /* the size comes from the snippet */
    object-fit: contain;

    transition: filter 0.4s var(--ease-premium, ease), opacity 0.4s var(--ease-premium, ease);
}

/* White backgrounds in JPG logos disappear on light bands */
.kl:not(.kl--tema-mork) .kl__img {
    mix-blend-mode: multiply;
}

.kl--gra .kl__img {
    filter: grayscale(1) contrast(1.05);
    opacity: 0.6;
}

.kl--gra .kl__item:hover .kl__img {
    filter: none;
    opacity: 1;
}

.kl--mork .kl__img {
    filter: brightness(0);
    opacity: 0.72;
}

.kl--hvit .kl__img {
    filter: brightness(0) invert(1);
    opacity: 0.82;
    mix-blend-mode: normal;
}

.kl--tema-mork.kl--gra .kl__img {
    filter: grayscale(1) brightness(1.6);
    opacity: 0.7;
}

@media (max-width: 767px) {

    .kl {
        --kl-gap: 2.25rem;
        --kl-fade: 1.5rem;
    }

    ul.kl__set {
        zoom: 0.82;    /* logos a little smaller on phones */
    }

    .kl__head {
        padding-inline: 40px;
    }
}

/* «Reduce motion»: the row stands still and can be scrolled sideways */

@media (prefers-reduced-motion: reduce) {

    .kl__track {
        animation: none;
    }

    .kl__viewport {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .kl__viewport::-webkit-scrollbar {
        display: none;
    }

    .kl__set[aria-hidden="true"],
    .kl__pause {
        display: none;
    }
}


/* =========================================================
   Round 10 (2026-11-13)
   ---------------------------------------------------------
   WPForms in the page form  (.pg-form--wpf, skjema-wpforms-snippet)
   [tilbud_skjema] now prints a WPForms form inside the same
   white .pg-form box. These rules give WPForms the look of the
   old form: two columns, the same labels, inputs, consent
   checkbox and black pill button. Works with WPForms →
   Settings → «Include Form Styling» set to «Base styling only»
   (recommended) and with full styling, thanks to the extra
   .pg-form.pg-form--wpf specificity.
   Field classes (WPForms → field → Advanced → CSS Classes):
   kk-wide = full width, kk-valgfri = «(valgfritt)» after the label.
   ========================================================= */

.pg-form.pg-form--wpf .wpforms-container {
    margin: 0 !important;
    padding: 0 !important;
}

.pg-form.pg-form--wpf .wpforms-form .wpforms-field-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

.pg-form.pg-form--wpf .wpforms-form .wpforms-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;
}

.pg-form.pg-form--wpf .wpforms-form .wpforms-field:is(.kk-wide, .wpforms-field-textarea, .wpforms-field-checkbox, .wpforms-field-gdpr-checkbox, .wpforms-field-html, .wpforms-field-divider, .wpforms-field-layout, .wpforms-field-richtext) {
    grid-column: 1 / -1;
}

.pg-form.pg-form--wpf .wpforms-form .wpforms-field-hidden,
.pg-form.pg-form--wpf .wpforms-form .wpforms-field[style*="display: none"] {
    display: none !important;
}

/* Labels */

.pg-form.pg-form--wpf .wpforms-form .wpforms-field-label {
    margin: 0 !important;
    padding: 0;

    font-size: var(--font-sm);
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text);
}

.pg-form.pg-form--wpf .wpforms-form .wpforms-required-label {
    color: var(--color-accent);
    font-weight: 500;
}

.pg-form.pg-form--wpf .wpforms-form .kk-valgfri > .wpforms-field-label::after {
    content: " (valgfritt)";
    font-weight: 400;
    color: var(--color-muted);
}

.pg-form.pg-form--wpf .wpforms-form .wpforms-field-description,
.pg-form.pg-form--wpf .wpforms-form .wpforms-field-sublabel {
    margin: 0 !important;
    padding: 0;

    font-size: var(--font-sm);
    color: var(--color-muted);
}

/* Inputs */

.pg-form.pg-form--wpf .wpforms-form .wpforms-field :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], input[type="date"], select, textarea) {
    width: 100%;
    max-width: 100% !important;
    height: auto;
    min-height: 48px;
    margin: 0;
    padding: 0.7rem 0.9rem;

    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-text);

    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius-sm);
    box-shadow: none;

    transition: border-color var(--btn-transition), box-shadow var(--btn-transition);
}

.pg-form.pg-form--wpf .wpforms-form .wpforms-field-textarea textarea {
    min-height: 120px;
    resize: vertical;
}

.pg-form.pg-form--wpf .wpforms-form .wpforms-field :is(input, select, textarea):hover {
    border-color: var(--color-gray-500);
}

.pg-form.pg-form--wpf .wpforms-form .wpforms-field :is(input, select, textarea):focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-gold) 25%, transparent);
}

/* Consent checkbox (and any other checkbox list) */

.pg-form.pg-form--wpf .wpforms-form .wpforms-field-checkbox ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none;
}

.pg-form.pg-form--wpf .wpforms-form .wpforms-field-checkbox li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);

    margin: 0 !important;
    padding: 0 !important;

    font-size: var(--font-sm);
    color: var(--color-muted);
}

.pg-form.pg-form--wpf .wpforms-form .wpforms-field-checkbox li input[type="checkbox"] {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    min-height: 0;
    margin: 0.15rem 0 0;

    accent-color: var(--color-black);
}

.pg-form.pg-form--wpf .wpforms-form .wpforms-field-checkbox li label {
    margin: 0;
    font-size: inherit;
    font-weight: 400;
    color: inherit;
}

.pg-form.pg-form--wpf .wpforms-form .wpforms-field-checkbox li a {
    color: var(--color-gold-text);
}

/* Errors */

.pg-form.pg-form--wpf .wpforms-form :is(em.wpforms-error, label.wpforms-error, .wpforms-error-container, .wpforms-error-alert) {
    margin: 0;
    padding: 0;

    font-size: var(--font-sm);
    font-style: normal;
    font-weight: 400;
    color: var(--color-accent);

    background: none;
    border: 0;
}

.pg-form.pg-form--wpf .wpforms-form .wpforms-field :is(input, select, textarea).wpforms-error {
    border-color: var(--color-accent);
}

.pg-form.pg-form--wpf .wpforms-form .wpforms-field :is(input, select, textarea).wpforms-error:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

/* Button */

.pg-form.pg-form--wpf .wpforms-form .wpforms-submit-container {
    display: flex;
    align-items: center;
    gap: var(--space-xs);

    margin: var(--space-sm) 0 0 !important;
    padding: 0 !important;
}

.pg-form.pg-form--wpf .wpforms-form button[type="submit"].wpforms-submit {
    min-height: 48px;
    height: auto;
    padding: 0 1.75rem;

    font: inherit;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--color-white);

    background-color: var(--color-black);
    border: 1px solid var(--color-black);
    border-radius: var(--btn-radius);
    box-shadow: none;
    cursor: pointer;

    transition: background-color var(--btn-transition), border-color var(--btn-transition);
}

.pg-form.pg-form--wpf .wpforms-form button[type="submit"].wpforms-submit:hover:not(:disabled) {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
}

.pg-form.pg-form--wpf .wpforms-form button[type="submit"].wpforms-submit:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}

.pg-form.pg-form--wpf .wpforms-form button[type="submit"].wpforms-submit:disabled {
    opacity: 0.6;
    cursor: progress;
}

.pg-form.pg-form--wpf .wpforms-submit-spinner {
    width: 1.25rem;
    height: 1.25rem;
}

/* Thank-you message on the same page (when there is no /takk/ page) */

.pg-form.pg-form--wpf .wpforms-confirmation-container-full,
.pg-form.pg-form--wpf .wpforms-confirmation-container {
    margin: 0;
    padding: 0;

    color: var(--color-text);

    background: none;
    border: 0;
}

.pg-form.pg-form--wpf .wpforms-confirmation-container-full p:last-child {
    margin-bottom: 0;
}

/* The intro above the form hides when the thank-you message shows */

.pg-form.pg-form--wpf:has(.wpforms-confirmation-container-full) > :is(.pg-form__title, .pg-form__about) {
    display: none;
}

@media (max-width: 767px) {

    .pg-form.pg-form--wpf .wpforms-form .wpforms-field-container {
        grid-template-columns: minmax(0, 1fr);
    }

    .pg-form.pg-form--wpf .wpforms-form .wpforms-field {
        grid-column: 1 / -1;
    }

    .pg-form.pg-form--wpf .wpforms-form button[type="submit"].wpforms-submit {
        width: 100%;
    }
}