/*
Theme Name: Number Three One - Child
Theme URI: https://standoutmedia.dk/
Author: Standoutmedia A/S
Author URI: https://standoutmedia.dk/
Description: Et helt specielt Standoutmedia Tema
Template: number-three-one
Text Domain: number-three-child
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


/* ===== CSS Variables ===== */

:root {
    /* Font sizes */
    --h1: 50px;
    --h2: 45px;
    --h3: 45px;
    --h4: 22px;
    --h5: 16px;
    --h6: 14px;
    --p: 17px;

    /* Gaps */
    --gap-l: 90px;
    --gap-m: 40px;
    --gap-s: 20px;

    /* font families */
    --h-fam: 'Work Sans', sans-serif;
    --p-fam: 'Poppins', sans-serif;
    --btn-fam: var(--p-fam);

    /* colors */
    --color-1: #FDF200;
    --color-2: #FDF200;
    --color-bg: #f6f6f6;
    --color-text: #222;
    --color-dark: #222;
    --color-overlay: rgb(0 0 0 / 0%);

    /* transitions */
    --transition: .175s ease-out;

    /* Margin on the right and left of the main content sections (change 0 to 1 to match template distances)*/
    --content-margin: calc(0 * var(--gap-m));
    --slider-text-width: 800px;
    
    /* Theme defined variables from PHP */
    --content-width: initial;
    --sidebar-width: initial;
    /* END Theme defined variables from PHP */
}


/* ===== END CSS Variables ===== */


/*======================================================================//
// style.css                                                            //
//======================================================================*/


/* Generel */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.075;
    margin-bottom: 14px;
}

html, body, input, select, optgroup, textarea {
    font-weight: 400;
}

b, strong {
    font-weight: 700;
}

.stom-button a {
    color: #222;
    min-width: 220px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--h-fam);
    padding: 15px 20px;
    line-height: 1;
    background-color: var(--color-1);
    border-color: var(--color-1);
}

.stom-button a:hover {
    background-color: #222;
    border-color: var(--color-1);
    color: var(--color-1);
}

.stom-small {
    max-width: 840px;
}

.section-wrap.clear.stom-billede-sektion {
    margin-top: calc(var(--gap-l) * 1.5);
}

.stom-billede-sektion .stom-cols-6 {
    min-height: 725px;
}

#main-content {
    margin-top: 100px;
}

.socials-wrapper {
    display: flex;
}

.socials-wrapper a.stom-social-shortcode {
    padding: 0;
}

.socials-wrapper a.stom-social-shortcode .stom-custom-svg {
    color: #fff;
}

/* Logo + Menu */
.style-header-02 .site-branding #logo {
    padding: 10px 0;
}

.site-branding #logo img, 
.site-branding #logo svg {
    max-width: 150px;
    max-height: 78px;
}

.hover-style-bold ul.menu li:hover > a, 
.hover-style-bold ul.menu li.focus > a, 
.hover-style-bold ul.menu .current-menu-item > a, 
.hover-style-bold ul.menu .current-menu-ancestor > a {
    font-weight: 700;
    color: #857f1c;
}

.header-sticky-active.scrolled header .site-branding #logo img.logo-landscape {
    max-height: 50px;
}

#primary-menu {
    align-items: center;
}

#primary-menu > li.btn-contact {
    margin-left: var(--gap-s);
}

#primary-menu > li.btn-contact > a {
    background-color: var(--color-1);
    border: 1px solid var(--color-1);
    min-width: 220px;
    font-size: 16px;
    font-weight: 600;
    padding: 11px 20px;
    color: #222;
}

#primary-menu > li.btn-contact > a:hover {
    background-color: #222;
    border-color: var(--color-1);
    color: var(--color-1);
}

#primary-menu li.menu-item-has-children ul.sub-menu li.menu-item a {
    font-size: 14px;
}

#primary-menu li.menu-item-has-children ul.sub-menu li.menu-item a .hidden-menu-item {
    justify-content: flex-start;
    padding: .7em 1.25em;
}

header .main-navigation ul.menu a {
    font-size: 18px;
    font-weight: 600 !important;
    font-weight: var(--h-fam);
    color: #4A4A4A;
}

header .main-navigation ul.menu a .stom-menu-item-arrow {
    margin-left: .5em;
    opacity: 1;
    font-size: 12px;
}

/* Header */
header .top-bar,
header .top-bar a,
header .top-bar ul li a {
    font-size: 16px;
    font-weight: 300;
    font-family: var(--h-fam);
    transition: var(--transition);
}

header .top-bar ul li a {
    padding: 0;
}

header .top-bar a:hover {
    color: var(--color-1);
}

header .top-bar ul li:not(:last-child) {
    margin-right: var(--gap-s);
}

header .top-bar ul li:not(:last-child) a:after {
    display: none;
}

header .top-bar a .stom-custom-svg {
    font-size: 11px;
}

.style-header-02 .socials-wrapper a {
    font-size: inherit;
}

header.site-header .section-wrap .section,
.header-sticky-active.scrolled .style-header-02 .section-wrap .section {
    padding: 15px 0;
}

#masthead .stom-button a {
    color: #222;
}

.page-slider-section .slider-text-inner .slider-text-inner-wrapper .white-text > h1 {
    font-size: 80px;
    margin-bottom: 5px;
}

.page-slider-section .slider-text-inner .slider-text-inner-wrapper .white-text > p {
    font-size: 20px;
    font-weight: 300;
}

.page-slider-section .slider-text-inner .slider-text-inner-wrapper .white-text > .stom-button a {
    min-width: 265px;
}

/* Frontpage */
.cards-section .section .grid-elements {
    gap: 30px;
}

.cards-section .section .grid-elements .grid-element {
    overflow: hidden;
}

.cards-section .section .grid-elements .grid-element > img {
    transition: var(--transition);
}

.cards-section .section .grid-elements .grid-element:hover > img {
    transform: scale(1.1);
}

.cards-section .section .grid-elements .grid-element .overlay {
    position: relative;
    justify-content: center;
    align-items: center;
}

.cards-section .section .grid-elements .grid-element:hover .overlay > .stom-button a {
    background-color: #222;
    color: var(--color-1);
    border-color: var(--color-1);
}

.section-wrap.clear.product-intro-section {
    margin-top: calc(var(--gap-l) * 1.5);
}

.section-wrap.clear.product-intro-section .section {
    padding-block: calc(var(--gap-l) * 1.25);;
}

.product-intro-section .section .stom-small > p {
    font-weight: 300;
}

/* Subpages */
body:not(.home),
body:not(.home) #page {
    overflow: visible;
}

body:not(.home) .page-slider-section .slider-inner {
    display: flex;
    justify-content: space-between;
}

body:not(.home) .page-slider-section .slider-inner .slides {
    width: 100%;
}

body:not(.home) .page-slider-section .slick-slider {
    max-width: 45%;
    margin-bottom: 0;
}

body:not(.home) .page-slider-section .slider-text {
    max-width: 55%;
    padding: calc(var(--gap-l) * 1.5);
    background-color: #222;
}

body:not(.home) .page-slider-section .slide-element .image-aligner > img {
    width: 100%;
    max-height: calc(80vh - var(--header-height));
}

body:not(.home) .page-slider-section .slider-text-inner .slider-text-inner-wrapper .white-text > h1,
body:not(.home) .page-slider-section .slider-text-inner .slider-text-inner-wrapper .white-text .stom-print-title > h1 {
    font-size: var(--h1);
    text-transform: uppercase;
}

body:not(.home) .page-slider-section .slider-text-inner .slider-text-inner-wrapper .white-text > p {
    font-size: 18px;
}

body:not(.home):not(.no-sidebar) #primary {
    width: calc(100% - var(--sidebar-width) - 100px);
}

body:not(.home) .entry-content > p {
    font-size: 16px;
    line-height: 1.75;
}

.product-section .section .grid-elements {
    column-gap: 30px;
    row-gap: 30px;
}

.product-section .section .grid-elements .grid-element.producent .overlay > p:first-of-type {
    margin: 0;
    line-height: 0;
}

.product-section .section .grid-elements .grid-element.producent .overlay > p:first-of-type img {
    max-width: 250px;
    width: 100%;
    height: auto;
}

.product-section .section .grid-elements .grid-element:not(.producent) .overlay > p:first-of-type {
    margin: 0;
    line-height: 0;
}

.product-section .section .grid-elements .grid-element:not(.producent) .overlay > p:first-of-type img {
    aspect-ratio: 3 / 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-section .section .grid-elements .grid-element:not(.producent) .overlay .content {
    background-color: #222;
    padding: 30px;
}

.product-section .section .grid-elements .grid-element:not(.producent) .overlay .content > h2,
.product-section .section .grid-elements .grid-element:not(.producent) .overlay .content > h3 {
    font-size: var(--h4);
    color: #fff;
}

.product-section .section .grid-elements .grid-element:not(.producent) .overlay .content > p {
    color: #fff;
    font-size: 14px;
}

.product-section .section .grid-elements .grid-element:not(.producent) .overlay .content > span.price {
    display: block;
    color: var(--color-1);
    font-size: 14px;
    font-weight: 600;
    text-align: right;
}

.product-section .section .grid-elements .grid-element:not(.producent) .overlay .content > ul {
    padding-left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #fff;
    padding-top: 1.25em;
}

.product-section .section .grid-elements .grid-element:not(.producent) .overlay .content > ul li {
    font-size: 14px;
    font-weight: 600;
    list-style-type: none;
    color: #fff;
}

.product-section .section .grid-elements .grid-element:not(.producent) .overlay .content > ul li a {
    color: var(--color-1);
    text-decoration: none;
}

.product-section .section .grid-elements .grid-element:not(.producent) .overlay .content > ul li a:hover {
    text-decoration: underline;
}

body.contact-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container > * {
    border-color: #222;
}

body.contact-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container > input {
    height: 50px;
}

body.contact-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container > textarea {
    height: 150px;
}

body.contact-page .gform_wrapper form .gform_body .gform_fields .stomGFAS-container-field .stomGFAS-inner {
    border: 1px solid #222;
}

body.contact-page .footer-setting-02 .footer-widget-area .section .grid-elements {
    /* grid-template-columns: 1fr 1fr; */
}

body.contact-page .footer-setting-02 .footer-widget-area .section .grid-elements .grid-element:last-of-type {
    display: none;
}

.section-wrap.clear.map-section {
    margin-inline: 0;
}

body.contact-page #colophon.footer-setting-02 {
    margin-top: 0;
}

body.stom-terms-page .entry-content > p,
body.stom-terms-page .entry-content > ol li,
body.stom-terms-page .entry-content > ul li {
    font-size: 14px;
}

body.stom-terms-page .entry-content > h3 {
    font-size: var(--h4);
    margin-top: var(--gap-m);
}

/* Gravity Form */
.gform_wrapper form .gform_body {
    padding-top: 0 !important;
}

.gform_wrapper form .gform_body .gform_fields {
    grid-gap: 20px;
}

.gform_wrapper form .gform_body .gform_fields .gfield .ginput_container > * {
    font-size: 15px;
    font-weight: 400;
    text-indent: 5px;
}

.gform_wrapper form .gform_body .gform_fields .gfield .ginput_container > *::placeholder {
    font-size: 15px;
    font-weight: 400;
    color: rgba(35, 36, 38, 0.40);
}

.gform_wrapper form .gform_body .gform_fields .gfield .ginput_container > input {
    height: 35px;
}

.gform_wrapper form .gform_body .gform_fields .gfield .ginput_container > select {
    height: 78px;
}

.gform_wrapper form .gform_body .gform_fields .stomGFAS-container-field .stomGFAS-inner {
    max-width: none;
    width: 100%;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background-color: #fff;
}

.gform_wrapper form .gform_body .gform_fields .stomGFAS-container-field .stomGFAS-label {
    font-size: 14px;
}

.gform_wrapper form .gform_footer {
    justify-content: flex-end;
    margin: 22px 0 0 !important;
}

.gform_wrapper form .gform_footer .gform_button {
    min-width: 175px;
    height: 45px;
    line-height: 1 !important;
    color: var(--color-text);
    font-size: 16px;
    font-weight: 600;
    border: 1px solid var(--color-1);
}

.gform_wrapper form .gform_footer .gform_button:hover {
    background-color: #222;
    border-color: var(--color-1);
    color: var(--color-1);
}

/* Sidebar */
aside#secondary {
    position: sticky;
    top: 150px;
}

body.admin-bar aside#secondary {
    top: calc(150px + 32px);
}

.widget-area .widget:not(.widget_search):not(.widget_instagram-feed-widget):not(.widget-no-border) {
    background-color: #222;
    font-size: 14px;
}

.widget-area .widget .widget-title-icon, 
.widget-area .widget .widget-title {
    text-transform: uppercase;
    font-weight: 700;
}

.widget.number-three-default-widget a {
    color: var(--color-1);
}

.widget.number-three-default-widget a .stom-custom-svg {
    margin-right: .75em;
}

/* Colophon */
#colophon.footer-setting-02 {
    font-size: 15px;
    background-color: #222;
    margin-top: calc(var(--gap-l) * 1.5);
}

.footer-setting-02 .footer-widget-area .section {
    padding: 100px 0 35px;
}

.footer-setting-02 .footer-widget-area .section .grid-elements {
    grid-template-columns: 1fr 1fr 2fr;
}

#colophon .widget-title {
    font-size: 22px;
    font-weight: 600;
    font-family: var(--h-fam);
    margin-bottom: 18px;
}

#colophon .copyright {
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 1.04px;
}

#colophon .footer-widget-area-site-info .section {
    padding: 10px 0;
}

#colophon .copyright .section .footer-widgets .widget .textwidget > ul {
    display: flex;
    align-items: center;
    justify-content: center;
}

#colophon .copyright .section .footer-widgets .widget .textwidget > ul li:not(:last-of-type):after {
    content: '|';
    margin: 0 5px;
}

#colophon .copyright .section .footer-widgets .widget .textwidget > ul li a {
    padding: 0;
    text-decoration: underline;
}

/* ===== Produkter arkiv ===== */

.produkter-archive-page .page-header {
    max-width: var(--content-width);
    margin: 0 auto;
    padding-top: 0;
}

.produkter-archive-content {
    max-width: var(--content-width);
    margin: 0 auto;
    padding-bottom: var(--gap-l);
}

/* Filterbjælke */

.produkter-filter {
    margin: var(--gap-m) 0 var(--gap-m);
}

.produkter-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background-color: #222;
}

.produkter-filter-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-1);
    margin-right: 10px;
}

.produkter-dropdown {
    position: relative;
}

.produkter-dropdown > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 40px 10px 16px;
    background-color: #fff;
    border: 1px solid #fff;
    font-size: 14px;
    font-weight: 600;
    color: #222;
    cursor: pointer;
    list-style: none;
    position: relative;
    user-select: none;
    transition: var(--transition);
}

.produkter-dropdown > summary::-webkit-details-marker {
    display: none;
}

.produkter-dropdown > summary::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid #222;
    border-bottom: 2px solid #222;
    transform: translateY(-70%) rotate(45deg);
    transition: var(--transition);
}

.produkter-dropdown[open] > summary,
.produkter-dropdown > summary:hover {
    background-color: var(--color-1);
    border-color: var(--color-1);
}

.produkter-dropdown[open] > summary::after {
    transform: translateY(-30%) rotate(-135deg);
}

.produkter-dropdown-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background-color: #222;
    color: var(--color-1);
    font-size: 12px;
    line-height: 1;
}

.produkter-dropdown-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    min-width: 260px;
    max-height: 360px;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.produkter-dropdown-panel > label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    font-size: 14px;
    color: #222;
    cursor: pointer;
}

.produkter-dropdown-panel > label:hover {
    background-color: var(--color-bg);
}

.produkter-dropdown-panel input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #222;
    flex-shrink: 0;
}

.produkter-dropdown-name {
    flex: 1;
}

.produkter-dropdown-count {
    font-size: 12px;
    color: #777;
}

.produkter-pris-fields {
    display: flex;
    gap: 10px;
    padding: 5px;
}

.produkter-pris-fields label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #222;
}

.produkter-dropdown-pris .produkter-dropdown-panel {
    min-width: 300px;
}

.produkter-pris-fields input {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    font-size: 14px;
}

.produkter-pris-submit,
.produkter-filter-submit {
    padding: 10px 20px;
    border: 0;
    background-color: var(--color-1);
    color: #222;
    font-family: var(--btn-fam);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.produkter-pris-submit {
    width: calc(100% - 10px);
    margin: 10px 5px 5px;
}

.produkter-dropdown-pris small {
    display: block;
    padding: 0 5px 5px;
    font-size: 11px;
    color: #777;
}

.produkter-filter.is-js .produkter-filter-submit {
    display: none;
}

.produkter-sort {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.produkter-sort select {
    padding: 10px 14px;
    border: 0;
    background-color: #fff;
    font-size: 14px;
    color: #222;
    cursor: pointer;
}

/* Status: antal + aktive filtre */

.produkter-filter-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 15px 0 0;
    font-size: 14px;
}

.produkter-antal {
    font-weight: 600;
    margin-right: 10px;
}

.produkter-active {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.produkter-active li {
    list-style-type: none;
}

.produkter-active button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #222;
    background-color: #fff;
    font-size: 13px;
    color: #222;
    cursor: pointer;
    transition: var(--transition);
}

.produkter-active button:hover {
    background-color: #222;
    color: var(--color-1);
}

.produkter-reset {
    font-size: 13px;
    color: #222;
    text-decoration: underline;
}

#produkter-results {
    transition: opacity 0.2s;
}

/* Paginering */

#main-content .produkter-archive-content .navigation.pagination {
    margin: var(--gap-m) 0 0;
    padding-top: var(--gap-m);
    border-top: 1px solid #e5e5e5;
}

#main-content .produkter-archive-content .navigation.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

#main-content .produkter-archive-content .navigation.pagination .page-numbers {
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 1px solid #222;
    background-color: #fff;
    color: #222;
    font-size: 15px;
    font-weight: 600;
    transition: var(--transition);
}

#main-content .produkter-archive-content .navigation.pagination .page-numbers.current {
    background-color: #222;
    color: var(--color-1);
}

#main-content .produkter-archive-content .navigation.pagination .page-numbers:not(.current):hover {
    background-color: var(--color-1);
    border-color: var(--color-1);
    color: #222;
}

#main-content .produkter-archive-content .navigation.pagination .prev.page-numbers,
#main-content .produkter-archive-content .navigation.pagination .next.page-numbers {
    width: auto;
    gap: 10px;
    padding: 0 20px;
    font-size: 14px;
}

#main-content .produkter-archive-content .navigation.pagination .next.page-numbers {
    flex-direction: row-reverse;
}

#main-content .produkter-archive-content .navigation.pagination .page-numbers.dots {
    display: flex;
    border-color: transparent;
}

#produkter-results.is-loading {
    opacity: 0.4;
    pointer-events: none;
}

/* Produktkort - lige høje kort og billeder */

.product-section.produkter-archive {
    margin-left: 0;
    margin-right: 0;
}

.product-section.produkter-archive .section .grid-elements {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
}

.product-section.produkter-archive .grid-element {
    display: flex;
    width: auto;
    margin: 0;
}

.product-section.produkter-archive .grid-element .overlay {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.product-section.produkter-archive .produkt-card-image {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom: 0;
    line-height: 0;
}

.product-section.produkter-archive .produkt-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.product-section.produkter-archive .grid-element:hover .produkt-card-image img {
    transform: scale(1.04);
}

.product-section.produkter-archive .section .grid-elements .grid-element:not(.producent) .overlay .content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-section.produkter-archive .grid-element .overlay .content > .produkt-varumarke {
    display: block;
    color: var(--color-1);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.product-section.produkter-archive .grid-element .overlay .content > h3 a {
    color: inherit;
    text-decoration: none;
}

/* Fælles produktkort (.produkt-card): arkiv, "Fler ..." og kategorisiderne (hvor script.js tilføjer klassen) */

/* Titel maks 2 linjer, så tekst og knapper står på linje på tværs af kortene */
.product-section .section .grid-elements .grid-element.produkt-card:not(.producent) .overlay .content > .produkt-card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2.5em;
    margin: 0 0 15px;
    font-family: var(--h-fam);
    font-size: var(--h4);
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}

.product-section .section .grid-elements .grid-element.produkt-card:not(.producent) .overlay .content > .produkt-card-title strong {
    font-weight: inherit;
}

.product-section .section .grid-elements .grid-element.produkt-card:not(.producent) .overlay .content > span.price {
    display: block;
    margin-top: auto;
    padding-top: 20px;
    margin-bottom: 20px;
    color: var(--color-1);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
}

/* Bunden af kortet: gul knap + outline-knap */
.product-section .section .grid-elements .grid-element.produkt-card:not(.producent) .overlay .content > ul {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    margin: auto 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.product-section .section .grid-elements .grid-element.produkt-card:not(.producent) .overlay .content > span.price + ul {
    margin-top: 0;
}

.product-section .section .grid-elements .grid-element.produkt-card:not(.producent) .overlay .content > ul li {
    flex: 1;
}

.product-section .section .grid-elements .grid-element.produkt-card:not(.producent) .overlay .content > ul li a {
    display: block;
    padding: 11px 10px;
    border: 1px solid var(--color-1);
    color: var(--color-1);
    text-align: center;
    text-decoration: none;
    transition: var(--transition);
}

.product-section .section .grid-elements .grid-element.produkt-card:not(.producent) .overlay .content > ul li:first-child a {
    background-color: var(--color-1);
    color: #222;
}

.product-section .section .grid-elements .grid-element.produkt-card:not(.producent) .overlay .content > ul li a:hover {
    background-color: #fff;
    border-color: #fff;
    color: #222;
    text-decoration: none;
}

.produkter-none {
    text-align: center;
    padding: var(--gap-m) 0;
}

/* ===== END Produkter arkiv ===== */

/* ===== Produktkategori-sider =====
   Almindelige undersider (Gräsklippare, Traktor osv.) med produktkort bygget i Sektioner.
   Aktiveres med body-klassen "produktkategori-sida" under Sideindstillinger -> Redigera -> Ekstra body-classes */

body.produktkategori-sida .product-section .section .grid-elements {
    align-items: stretch;
}

body.produktkategori-sida .product-section .grid-element.producent {
    grid-column: 1 / -1;
}

body.produktkategori-sida .product-section .grid-element:not(.producent) {
    display: flex;
}

body.produktkategori-sida .product-section .grid-element:not(.producent) .overlay {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

body.produktkategori-sida .product-section .section .grid-elements .grid-element:not(.producent) .overlay > p:first-of-type {
    margin: 0;
    line-height: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom: 0;
}

body.produktkategori-sida .product-section .section .grid-elements .grid-element:not(.producent) .overlay > p:first-of-type img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    transition: transform 0.4s;
}

body.produktkategori-sida .product-section .grid-element:not(.producent):hover .overlay > p:first-of-type img {
    transform: scale(1.04);
}

body.produktkategori-sida .product-section .section .grid-elements .grid-element:not(.producent) .overlay .content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Beskrivelsen foldes sammen - wrapperen og knappen indsættes af script.js */
.produkt-card .produkt-beskrivning p {
    color: #fff;
    font-size: 14px;
}

.produkt-card .produkt-beskrivning > :last-child {
    margin-bottom: 0;
}

/* .is-collapsible sættes af script.js på lange beskrivelser - højden animeres via max-height */
.produkt-card .produkt-beskrivning.is-collapsible {
    position: relative;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.produkt-card .produkt-beskrivning.is-collapsed {
    max-height: 120px;
}

.produkt-card .produkt-beskrivning.is-collapsible::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    background: linear-gradient(to bottom, rgba(34, 34, 34, 0), #222);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.produkt-card .produkt-beskrivning.is-collapsed::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .produkt-card .produkt-beskrivning.is-collapsible,
    .produkt-card .produkt-beskrivning.is-collapsible::after {
        transition: none;
    }
}

.produkt-card .produkt-beskrivning-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin: 12px 0 10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-1);
    font-family: var(--btn-fam);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.produkt-card .produkt-beskrivning-toggle::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.3s;
}

.produkt-card .produkt-beskrivning-toggle[aria-expanded="true"]::after {
    transform: translateY(2px) rotate(-135deg);
}

.produkt-card .produkt-beskrivning-toggle:hover {
    text-decoration: underline;
}

/* Bunden (pris + knapper) styles af de fælles .produkt-card-regler i "Produkter arkiv" */

/* ===== END Produktkategori-sider ===== */

/* ===== Produktförfrågan popup ===== */

html.produkt-kontakt-open {
    overflow: hidden;
}

.produkt-kontakt-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.produkt-kontakt-modal[hidden] {
    display: none;
}

.produkt-kontakt-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(17, 17, 17, 0.7);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.3s;
    cursor: pointer;
}

.produkt-kontakt-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 600px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    transition: opacity 0.3s, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.produkt-kontakt-modal.is-open .produkt-kontakt-overlay {
    opacity: 1;
}

.produkt-kontakt-modal.is-open .produkt-kontakt-dialog {
    opacity: 1;
    transform: none;
}

/* Luk-knap: rund, lys på den mørke top */
.produkt-kontakt-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.produkt-kontakt-close span::before,
.produkt-kontakt-close span::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background-color: #fff;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: background-color 0.2s;
}

.produkt-kontakt-close span::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.produkt-kontakt-close:hover {
    background-color: var(--color-1);
    transform: rotate(90deg);
}

.produkt-kontakt-close:hover span::before,
.produkt-kontakt-close:hover span::after {
    background-color: #222;
}

/* Top: mørk med produktbillede og overskrift */
.produkt-kontakt-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 70px 22px 28px;
    background-color: #222;
    color: #fff;
    flex-shrink: 0;
}

.produkt-kontakt-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background-color: var(--color-1);
}

.produkt-kontakt-bild {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    padding: 4px;
    background-color: #fff;
}

.produkt-kontakt-bild[hidden] {
    display: none;
}

.produkt-kontakt-bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.produkt-kontakt-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--color-1);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.produkt-kontakt-modal .produkt-kontakt-title {
    margin: 0;
    color: #fff;
    font-size: 21px;
    line-height: 1.25;
}

.produkt-kontakt-title span {
    color: inherit;
}

/* Indhold */
.produkt-kontakt-body {
    padding: 22px 28px 26px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.produkt-kontakt-intro {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.5;
    color: #666;
}

.produkt-kontakt-intro a {
    color: #222;
    font-weight: 600;
    white-space: nowrap;
}

/* Formularen */
.produkt-kontakt-form .gform_wrapper .gform_fields {
    row-gap: 10px;
    column-gap: 10px;
}

.produkt-kontakt-form .gform_wrapper .gform_fields > .gfield--type-text {
    grid-column: span 6;
}

.produkt-kontakt-form .gform_wrapper .gfield input[type="text"],
.produkt-kontakt-form .gform_wrapper .gfield input[type="email"],
.produkt-kontakt-form .gform_wrapper .gfield input[type="tel"],
.produkt-kontakt-form .gform_wrapper .gfield textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid transparent;
    border-bottom: 2px solid #e2e2e2;
    border-radius: 0;
    background-color: #f5f5f5;
    font-size: 14px;
    color: #222;
    box-shadow: none;
    transition: border-color 0.2s, background-color 0.2s;
}

.produkt-kontakt-form .gform_wrapper .gfield input::placeholder,
.produkt-kontakt-form .gform_wrapper .gfield textarea::placeholder {
    color: #888;
}

.produkt-kontakt-form .gform_wrapper .gfield input:focus,
.produkt-kontakt-form .gform_wrapper .gfield textarea:focus {
    border-bottom-color: #222;
    background-color: #fff;
    outline: none;
}

.produkt-kontakt-form .gform_wrapper .gfield textarea {
    height: 76px;
    min-height: 0;
    resize: vertical;
}

/* Labels: tekst-, e-post-, telefon- og tekstområdefelter har placeholder - labels skjules visuelt */
.produkt-kontakt-form .gform_wrapper .gfield--type-text > .gfield_label,
.produkt-kontakt-form .gform_wrapper .gfield--type-email > .gfield_label,
.produkt-kontakt-form .gform_wrapper .gfield--type-phone > .gfield_label,
.produkt-kontakt-form .gform_wrapper .gfield--type-textarea > .gfield_label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.produkt-kontakt-form .gform_wrapper .gfield .gfield_label,
.produkt-kontakt-form .gform_wrapper .gfield legend.gfield_label {
    margin: 6px 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #777;
}

.produkt-kontakt-form .gform_wrapper .gfield_required {
    display: none;
}

/* Valg som "chips" - native input skjules, labelen er hele knappen */
.produkt-kontakt-form .gform_wrapper .gfield_checkbox {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.produkt-kontakt-form .gform_wrapper .gchoice {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
}

.produkt-kontakt-form .gform_wrapper .gchoice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.produkt-kontakt-form .gform_wrapper .gchoice label {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #e2e2e2;
    background-color: #fff;
    font-size: 13px;
    line-height: 1.3;
    color: #222;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.produkt-kontakt-form .gform_wrapper .gchoice label::before {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1.5px solid #bbb;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10px;
    transition: var(--transition);
}

.produkt-kontakt-form .gform_wrapper .gfield_radio .gchoice label::before {
    border-radius: 50%;
}

.produkt-kontakt-form .gform_wrapper .gchoice label:hover {
    border-color: #222;
}

.produkt-kontakt-form .gform_wrapper .gchoice input:focus-visible + label {
    outline: 2px solid var(--color-1);
    outline-offset: 1px;
}

.produkt-kontakt-form .gform_wrapper .gchoice input:checked + label {
    border-color: #222;
    background-color: #222;
    color: #fff;
}

.produkt-kontakt-form .gform_wrapper .gchoice input:checked + label::before {
    border-color: var(--color-1);
    background-color: var(--color-1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E");
}

.produkt-kontakt-form .gform_wrapper .gfield_radio .gchoice input:checked + label::before {
    background-image: none;
    box-shadow: inset 0 0 0 3px #222;
}

/* "Hur vill du bli kontaktad?" som segmenteret kontrol */
.produkt-kontakt-form .gform_wrapper .gfield--type-radio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

.produkt-kontakt-form .gform_wrapper .gfield--type-radio > .gfield_label {
    float: none;
    margin: 0;
    padding: 0;
}

.produkt-kontakt-form .gform_wrapper .gfield_radio {
    display: flex;
    gap: 0;
}

.produkt-kontakt-form .gform_wrapper .gfield_radio .gchoice + .gchoice label {
    margin-left: -1px;
}

.produkt-kontakt-form .gform_wrapper .gfield_radio .gchoice label {
    padding: 8px 16px;
    white-space: nowrap;
}

/* Lige høje chips i hver række */
.produkt-kontakt-form .gform_wrapper .gfield_checkbox .gchoice {
    display: flex;
}

.produkt-kontakt-form .gform_wrapper .gfield_checkbox .gchoice label {
    height: 100%;
}

/* "Beskriv din nuvarande maskin" vises kun, når "Inbyte" er valgt (ren CSS, så formularen ikke venter på GF's scripts).
   Browsere uden :has viser blot feltet altid */
@supports selector(:has(*)) {
    .produkt-kontakt-form .gform_wrapper .gfield.produkt-inbyte-field {
        display: none;
    }

    .produkt-kontakt-form .gform_wrapper .gform_fields:has(.gfield--type-checkbox input[value^="Inbyte"]:checked) .gfield.produkt-inbyte-field {
        display: block;
        animation: produkt-inbyte-in 0.25s ease;
    }
}

@keyframes produkt-inbyte-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Antispam-feltet (internal-gravityforms-antispam) */
.produkt-kontakt-form .gform_wrapper .stomGFAS-container-field .stomGFAS-inner {
    padding: 8px 12px;
    background-color: #f5f5f5;
}

/* Send-knap */
.produkt-kontakt-form .gform_wrapper .gform_footer {
    margin-top: 8px;
    padding: 0;
}

.produkt-kontakt-form .gform_wrapper .gform_footer input[type="submit"],
.produkt-kontakt-form .gform_wrapper .gform_footer button {
    width: 100%;
    padding: 14px 20px;
    border: 0;
    background-color: var(--color-1);
    color: #222;
    font-family: var(--btn-fam);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.produkt-kontakt-form .gform_wrapper .gform_footer input[type="submit"]:hover,
.produkt-kontakt-form .gform_wrapper .gform_footer button:hover {
    background-color: #222;
    color: var(--color-1);
}

.produkt-kontakt-form .gform_wrapper .gform_footer input[type="submit"]:active,
.produkt-kontakt-form .gform_wrapper .gform_footer button:active {
    transform: translateY(1px);
}

/* Fejl og bekræftelse */
.produkt-kontakt-form .gform_wrapper .gform_validation_errors {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 0;
    border-left: 4px solid #c02b0a;
    border-radius: 0;
    box-shadow: none;
}

.produkt-kontakt-form .gform_wrapper .gfield_error input,
.produkt-kontakt-form .gform_wrapper .gfield_error textarea {
    border-bottom-color: #c02b0a;
}

.produkt-kontakt-form .gform_confirmation_message {
    padding: 22px 24px;
    background-color: #fffde0;
    border-left: 4px solid var(--color-1);
    font-size: 15px;
    line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
    .produkt-kontakt-overlay,
    .produkt-kontakt-dialog,
    .produkt-kontakt-close {
        transition: none;
    }
}

/* ===== END Produktförfrågan popup ===== */

/* ===== Produkt single ===== */

.produkt-single {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--gap-s) 0 var(--gap-l);
}

.produkt-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    margin-bottom: var(--gap-m);
    color: #666;
}

.produkt-breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.produkt-breadcrumbs a:hover {
    text-decoration: underline;
}

.produkt-breadcrumbs [aria-current] {
    color: #222;
    font-weight: 600;
}

.produkt-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-l);
    align-items: start;
}

/* Billedet følger med ned, når teksten er længere end billedet.
   --stom-masthead-offset sættes i script.js (headerens bund inkl. admin-bar) - ellers bruges fallback */
.produkt-image {
    position: sticky;
    top: calc(var(--stom-masthead-offset, 144px) + 30px);
}

.admin-bar .produkt-image {
    top: calc(var(--stom-masthead-offset, 176px) + 30px);
}

.produkt-image img {
    display: block;
    width: 100%;
    height: auto;
    background-color: #fff;
    border: 1px solid #ddd;
}

.produkt-varumarke {
    line-height: 1;
}

.produkt-varumarke a {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #222;
    background-color: var(--color-1);
    padding: 4px 10px;
    margin: 0 6px 12px 0;
    text-decoration: none;
}

.produkt-single .produkt-title {
    font-size: 34px;
    line-height: 1.2;
    margin: 0 0 var(--gap-s);
    overflow-wrap: break-word;
    hyphens: auto;
}

.produkt-pris {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background-color: #222;
    color: #fff;
    padding: 20px 25px;
    margin-bottom: var(--gap-s);
}

.produkt-pris .price {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-1);
    line-height: 1.2;
}

.produkt-pris .delbetalning {
    font-size: 14px;
    font-weight: 600;
}

.produkt-content {
    margin-bottom: var(--gap-s);
}

.produkt-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-bottom: var(--gap-s);
}

.produkt-cta .stom-button {
    margin: 0;
}

.produkt-telefon {
    font-weight: 600;
    color: #222;
}

.produkt-meta {
    margin: 0;
    padding: 20px 0 0;
    border-top: 1px solid #ddd;
    font-size: 14px;
}

.produkt-meta li {
    list-style-type: none;
    margin-bottom: 4px;
}

.produkt-meta a {
    color: #222;
}

.produkt-relaterede {
    margin-top: var(--gap-l);
}

.produkt-relaterede .section > h2 {
    margin-bottom: var(--gap-s);
}

/* ===== END Produkt single ===== */

/*======================================================================//
// END style.css                                                        //
//======================================================================*/


/*======================================================================//
// woocommerce.css                                                      //
//======================================================================*/


/*  */
#number-three-sticky-mobile-cta .cta-container {
    border-top: 1px solid #fff;
}

#number-three-sticky-mobile-cta .cta-container .stom-button a {
    background-color: #222;
    color: #fff;
    font-size: var(--p);
    /* flex-direction: row; */
    gap: 8px;
    min-width: auto;
}

#number-three-sticky-mobile-cta .cta-container .stom-button:not(:last-child) a {
    border-right-color: #fff;
}

#number-three-sticky-mobile-cta .cta-container .stom-button a > p {
    margin-bottom: 0;
}

#number-three-sticky-mobile-cta .cta-container .stom-button a > p strong {
    color: var(--color-1);
}

#number-three-sticky-mobile-cta .cta-container .stom-button a .stom-custom-svg {
    color: var(--color-1);
    font-size: var(--p);
    line-height: 0;
}

/*======================================================================//
// END woocommerce.css                                                  //
//======================================================================*/