.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Sofia Sans";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Cormorant Garamond";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================
   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)
   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: #111111;
    --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: 100px;         /* height of the header bar (70px on phones) – the header JS measures the real value */
    --header-offset: 0px;           /* = header height when the header is fixed (section 17) */

    /* 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;


    /* ---------- 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.2s ease;

    --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.

   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
   ========================================================= */

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);
}

html.hdr-ready .header-fixed {
    transition:
        background-color 0.35s ease,
        transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.35s ease;
}

html.hdr-scrolled .header-fixed {
    box-shadow: var(--shadow-sm);
}

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

/* 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:has(.kk-hero-overlay) .elementor-location-header {
    min-height: 0;
}

html:not(.hdr-scrolled) body:has(.kk-hero-overlay) .header-fixed,
html:not(.hdr-scrolled) body:has(.kk-hero-overlay) .header-fixed :is(.e-con, .elementor-element) {
    background-color: transparent;
    box-shadow: none;
}

/* 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, #111111);
    --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(17, 17, 17, 0.2);

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

    --kk-ease: 0.25s ease;

    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 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 row ---------- */

.kk-scope .kk-cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: var(--space-md, 2rem);
    row-gap: 4px;

    padding-bottom: var(--space-xs, 0.75rem);

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

.kk-scope .kk-cat {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;

    min-height: 44px;
    padding: 12px 2px;

    font-family: var(--kk-sans);
    font-size: 17px;
    color: var(--kk-black);
    text-decoration: none;
    white-space: nowrap;
}

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

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

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

.kk-scope .kk-cat__name::after {
    content: "";

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

    height: 1px;

    background: var(--kk-gold);

    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--kk-ease);
}

.kk-scope .kk-cat:hover .kk-cat__name::after,
.kk-scope .kk-cat.is-active .kk-cat__name::after {
    transform: scaleX(1);
}

.kk-scope .kk-cat.is-active .kk-cat__name::after {
    height: 2px;
}

.kk-scope .kk-cat__count {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;

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


/* ---------- 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: 12px;

    min-height: 56px;
    padding: 0 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__current {
    flex: 1;
}

.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(17, 17, 17, 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: baseline;
    justify-content: space-between;
    gap: 12px;

    min-height: 48px;
    padding: 12px 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 span:first-child {
    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);
}


/* ---------- 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.5s ease;
}

.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;
}


/* ---------- 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.25s ease;
}

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

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, #111111);
    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.4s;
}

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

    transition: none;
}

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

    background: rgba(17, 17, 17, 0.45);

    opacity: 0;
    transition: opacity 0.4s ease;
}

.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(17, 17, 17, 0.12);

    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.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;
}


/* ---------- 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;
}


/* =========================================================
   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, #111111);
}

html.hdr-ready .kk-header {
    transition: background-color 0.35s ease;
}

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

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

html:not(.hdr-scrolled) body: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;
}

.kk-header__logo img {
    display: block;

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

    object-fit: contain;
}

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

.kk-header__logo--black img {
    filter: brightness(0);
}


/* ---------- 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.25s ease;
}

.kk-header a.kk-header__link:hover,
.kk-header button.kk-header__btn:hover,
.kk-header button.kk-header__btn:focus {
    color: var(--color-gold, #A68553);
    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.25s ease;
}

.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.25s ease;
}

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

.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.4s;
}

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

    transition: none;
}

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

    background: rgba(17, 17, 17, 0.45);

    opacity: 0;
    transition: opacity 0.4s ease;
}

.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(17, 17, 17, 0.12);

    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.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;
    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;
    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;
    }
}


/* =========================================================
   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, #111111);
    --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, #111111);
    --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 {
    display: inline-block;

    line-height: 0;
    color: var(--sf-fg);
    text-decoration: none;
}

.sf-footer .sf-footer__logo-img {
    display: block;

    width: auto;
    height: 64px;
    max-width: 100%;

    object-fit: contain;
    object-position: left center;
}

.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.25s ease, opacity 0.25s ease;
}

.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.25s ease, color 0.25s ease;
}

.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;
}


/* ---------- 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.25s ease;
}

.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-img {
        height: 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;
}


/* =========================================================
   24. SHOP – RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {

    .kk-scope .kk-cats {
        display: none;
    }

    .kk-scope .kk-catselect {
        display: block;
    }

    .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) {

    .kk-header__menu-btn .kk-header__text,
    .kk-header__phone .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;
    }
}

@media (max-width: 767px) {

    .kk-scope {
        padding-top: calc(var(--kk-offset-top) + var(--space-xs, 0.75rem));
        padding-bottom: var(--space-lg, 3rem);
    }

    .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);
    }

    .kk-header__logo img {
        height: calc(var(--kk-logo-h) * 0.7);
    }

    .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;
    }
}


/* =========================================================
   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, #111111);
    --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.2s;
}

.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.25s var(--kkm-ease),
        border-color 0.25s var(--kkm-ease),
        color 0.25s 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;
}

.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.25s var(--kkm-ease), color 0.25s var(--kkm-ease), border-color 0.25s 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.25s 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.2s;
}

.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.2s, opacity 0.2s;
}

.kkm .kkm-brands a:hover .kkm-brands__logo {
    filter: none;
    opacity: 1;
}


/* ---------- 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.2s, color 0.2s;
}

.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.2s, color 0.2s;
}

.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.2s;
}

.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.2s;
}

.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.2s;
}

.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.2s, background 0.2s;
}

.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.2s;
}

.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.2s, box-shadow 0.2s;

    -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.2s, box-shadow 0.2s;
}

.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.6s 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.2s;
}

.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.25s 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.6s 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.2s;
}

.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;
}

.kkm .kkm-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 12px;

    margin: 14px 0 0;
    padding: 0;

    list-style: none;
}

.kkm .kkm-gallery__thumbs li {
    margin: 0;
}

.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.2s;
}

.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.2s;
}

.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: calc(var(--header-offset, 0px) + 24px);
}

.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.2s;
}

.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.25s var(--kkm-ease), color 0.25s var(--kkm-ease), transform 0.25s 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: calc(var(--header-offset, 0px) + 24px);
}

.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 {
    columns: 2;
    column-gap: clamp(36px, 5vw, 88px);
}

.kkm .kkm-specs__group {
    margin-bottom: var(--space-md, 40px);
    break-inside: avoid;
}

.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));
}


/* ---------- 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.35s var(--kkm-ease), visibility 0s linear 0.35s;
    }

    .kkm .kkm-filters.is-open {
        visibility: visible;
        transform: none;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.12);
        transition: transform 0.35s var(--kkm-ease), visibility 0s;
    }

    .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 {
        columns: 1;
    }

    .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-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, #111111);
    --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.45s 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.3s var(--kkq-ease), border-color 0.3s var(--kkq-ease), color 0.3s var(--kkq-ease), transform 0.3s 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.3s;
}

.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.35s 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.25s var(--kkq-ease), box-shadow 0.25s var(--kkq-ease), transform 0.25s 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.25s;
}

.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.25s var(--kkq-ease), border-color 0.25s var(--kkq-ease), opacity 0.25s;
}

.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.2s;
}

.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.25s var(--kkq-ease), color 0.25s var(--kkq-ease), box-shadow 0.25s var(--kkq-ease), transform 0.25s 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: calc(var(--header-offset, 0px) + 24px);
}

.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.2s;
}

.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, #111111);
    --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.25s ease, color 0.25s ease;
}

.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.6s 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.2s;
}

.avd .avd-more svg {
    transition: transform 0.25s 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.25s var(--avd-ease),
        border-color 0.25s var(--avd-ease),
        color 0.25s 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.2s;
}

.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.2s;
}

.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-muted);
    --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 have an image slot (.pg-hero__bg) at the
   top. Choose an image in it and the photo fills the whole top of
   the page, behind the header too. With no image chosen the hero
   stays plain black (the slot is hidden, see Optional images). */

.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--dark::before {
    z-index: 1;
}

.pg-hero:has(> .pg-hero__bg) > .content-width {
    position: relative;
    z-index: 2;
}

/* A black hero with a photo gets the same shade as the dark one */

.pg-hero--ink:has(> .pg-hero__bg) {
    position: relative;
}

/* An image chosen and later removed leaves an empty widget: hide it.
   The hero keeps the same height with or without a photo. */

.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 */

.pg-hero--dark::before,
.pg-hero--ink:has(> .pg-hero__bg img:not([src*="/elementor/assets/images/placeholder"]))::before {
    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;
}

.pg-hero--ink:has(> .pg-hero__bg img:not([src*="/elementor/assets/images/placeholder"]))::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.2) 65%);
    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.6s 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.25s ease;
}

a.pg-arrow-link::after {
    content: "→";
    transition: transform 0.25s ease;
}

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 */

.pg-hero:has(> .pg-hero__bg img:not([src*="/elementor/assets/images/placeholder"])) .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.25s ease, background-color 0.25s ease;
}

.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.3s ease, opacity 0.3s ease;
}

.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);
    }
}


/* ---------- 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.3s ease;
}

.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;
    }
}


/* ---------- 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;
    }
}


/* =========================================================
   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: 70px;
    }


    /* ---------- 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;
    }
}


/* =========================================================
   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;
    }
}


/* ---------- Visible keyboard focus everywhere ----------
   A clear gold ring for keyboard users (not shown on mouse click). */

:where(a, button, input, select, textarea, summary, [tabindex]):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);
}


/* ---------- 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;
}/* End custom CSS */