/* --- Grundopsætning --- */
:root {
  --gutter: 40px; /* luft i siderne af siden */
}

@media (max-width: 768px) {
  :root {
    --gutter: 20px; /* mindre luft på mobil */
  }
}

html, body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 20px var(--gutter) 0;
}

/* Sektionerne må aldrig klemmes sammen (ellers forsvinder fx footeren) */
body > * {
  flex-shrink: 0;
}

        /* --- Hero --- */
        .hero {
            min-height: 100vh;
            min-height: 100svh; /* tager højde for adresselinjen på mobil */
            margin: -20px calc(-1 * var(--gutter)) 0; /* ophæver body-padding, så billedet går helt ud til kanten */
            padding: 20px 50px;
            /* Mørk gradient ligger som ekstra baggrundslag over billedet (men under al tekst),
               så den hvide tekst får nok kontrast (WCAG AA). Mørkest øverst og nederst, hvor teksten står. */
            --hero-overlay: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.25) 35%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0.45) 100%);
            background: var(--hero-overlay), url('images/hero.webp') center / cover no-repeat;
            background-color: #3D3529; /* reservefarve hvis billedet ikke loader – bruges også af WAVE til kontrasttjek */
            position: relative; /* så bundlinjen kan placeres i bunden */
        }

        /* Skærme i højformat (fx mobil) ser kun midten af hero-billedet. */
        @media (max-aspect-ratio: 8/9) {
            .hero {
                background-image: var(--hero-overlay), url('images/hero-mobil.webp');
            }
        }

        /* Bundlinje: knap nede til venstre, stjerner nede til højre */
        .hero-bottom {
            position: absolute;
            left: 50px;
            right: 50px;
            bottom: 40px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end; /* begge sidder i bunden */
            flex-wrap: wrap;
            gap: 20px;
        }

        .hero-btn {
            background-color: #3D3529;
            color: #ffffff;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-weight: 700;
            font-size: 24px;
            letter-spacing: 0.01em;
            padding: 16px 28px;
            border-radius: 10px;
            text-decoration: none;
            transition: background-color 0.3s;
        }

        /* Tekst og knap stablet, venstrestillet */
        .hero-cta {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 24px;
            margin-bottom: 80px; /* løfter tekst og knap helt op over stjernernes højde */
        }

        .hero-text {
            width: min-content; /* teksten bliver aldrig bredere end første linje */
            color: #ffffff;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-weight: 400;
            font-size: 28px;
            line-height: 1.5;
            letter-spacing: 0.01em;
            text-align: left;
        }

        /* Første linje slutter efter "18" og bestemmer tekstens bredde */
        .hero-text-line {
            white-space: nowrap;
        }

        .hero-btn:hover {
            background-color: rgba(61, 53, 41, 0.5); /* #3D3529 med 50% */
        }

        .hero-stars {
            width: 220px;
            height: auto;
        }

        @media (max-width: 768px) {
            .hero-bottom {
                left: 20px;
                right: 20px;
                bottom: 20px;
            }

            .hero-cta {
                margin-bottom: 55px;
            }

            .hero-stars {
                width: 150px;
            }
        }

        /* --- Header / Navigation --- */
        header {
            display: grid;
            grid-template-columns: 1fr auto 1fr; /* menu til venstre, logo i midten, menu til højre */
            align-items: center;
            padding: 10px 0;
            margin-bottom: 40px;
            color: #f4efea;
        }

        .hero-nav {
            display: flex;
            gap: 50px;
        }

        .hero-nav a {
            color: #ffffff;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-weight: 700;
            font-size: 25px;
            letter-spacing: 0.01em;
            text-decoration: none;
        }

        .hero-nav-right {
            justify-self: end;
        }

        /* --- Burgermenu (kun mobil) --- */
        .menu-toggle,
        .mobile-menu {
            display: none; /* skjult på computer */
        }

        @media (max-width: 768px) {
            /* Mobil: [burger]  LUMINA  [Søg] [Kurv] */
            .hero-nav-left,
            .nav-contact {
                display: none; /* ligger i burgermenuen i stedet */
            }

            .logo {
                font-size: 2.5rem;
            }

            .hero-nav {
                gap: 16px;
            }

            .hero-nav a {
                font-size: 18px;
                padding: 12px 0; /* større trykflade (ca. 44px høj) */
            }

            .menu-toggle {
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 6px;
                width: 44px;
                height: 44px;
                padding: 10px;
                background: none;
                border: none;
                cursor: pointer;
            }

            /* De tre streger i burgeren */
            .menu-toggle span {
                display: block;
                height: 2px;
                background-color: #ffffff;
                border-radius: 2px;
                transition: transform 0.2s, opacity 0.2s;
            }

            /* Når menuen er åben, bliver burgeren til et kryds */
            .menu-toggle[aria-expanded="true"] span:nth-child(1) {
                transform: translateY(8px) rotate(45deg);
            }

            .menu-toggle[aria-expanded="true"] span:nth-child(2) {
                opacity: 0;
            }

            .menu-toggle[aria-expanded="true"] span:nth-child(3) {
                transform: translateY(-8px) rotate(-45deg);
            }

            .mobile-menu {
                position: absolute;
                top: 90px;
                left: var(--gutter);
                right: var(--gutter);
                display: flex;
                flex-direction: column;
                padding: 8px 20px;
                background-color: #E8E4E1;
                border-radius: 10px;
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
                z-index: 900;
            }

            .mobile-menu[hidden] {
                display: none;
            }

            .mobile-menu a {
                display: block;
                padding: 12px 0; /* hvert link er ca. 48px højt */
                color: #332E29;
                font-size: 20px;
                font-weight: 500; /* Medium til navigation */
                text-decoration: none;
                border-bottom: 1px solid rgba(51, 46, 41, 0.15);
            }

            .mobile-menu a:last-child {
                border-bottom: none;
            }
        }

        .logo {
            font-family: 'Antonio', sans-serif;
            font-size: 3.5rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            text-transform: uppercase;
        }

        h1 {
            font-family: 'Antonio', sans-serif; 
            font-size: 6rem;
            text-transform: uppercase;
            letter-spacing: 0.01em;
            margin-bottom: 40px;
            text-align: center;
            color: #332E29; 
            opacity: 0.9;
        }

        /* --- Responsivitet (Mobil) --- */
        @media (max-width: 768px) {
            h1 { font-size: 3.5rem; }
        }
  
.headline-sub {
    font-family: 'Antonio', sans-serif;
    font-size: 48px; /* samme som "Følg os på de sociale medier" */
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin-bottom: 20px;
}

/* --- Produktkort --- */
.product-card {
    display: grid;
    grid-template-columns: 1fr 1fr; /* billede til venstre, tekst til højre */
    align-items: center;
    gap: 60px;
    padding: 120px 50px;
}

/* Fast ramme, så kortet ikke ændrer størrelse når billedet skifter */
.product-image {
    width: 100%;
    max-width: 600px;
    aspect-ratio: 4 / 3;
    margin: 0 auto;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* hele højttaleren vises inde i rammen */
    transform: scale(var(--speaker-scale, 1)); /* udligner forskellig luft omkring højttalerne */
    transition: transform 0.2s;
}

.product-content {
    color: #332E29;
}

.product-title {
    font-family: 'Antonio', sans-serif; /* samme udseende som de andre overskrifter */
    font-weight: 700;
    font-size: 48px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: #332E29;
    margin-bottom: 8px;
}

.product-subtitle {
    font-size: 24px;
    margin-bottom: 8px;
}

.product-price {
    font-size: 22px;
    font-style: italic;
    margin-bottom: 40px; /* luft ned til teksten */
}

.product-text {
    max-width: 480px;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.product-read-more {
    font-size: 18px;
    font-style: italic;
    color: #332E29;
}

/* --- Farvevælger --- */
.product-color {
    font-size: 18px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 16px;
}

.color-swatches {
    display: flex;
    gap: 16px;
}

/* Køb nu-knap: bruger .hero-btn til udseendet */
.product-buy {
    display: inline-block;
    margin-top: 40px;
    border: none;
    cursor: pointer;
}

.color-swatch {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #332E29; /* stroke i tekstfarven */
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
}

.color-swatch:hover {
    transform: scale(1.05);
}

/* Valgt farve ser trykket ind */
.color-swatch[aria-pressed="true"] {
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.35);
    transform: scale(0.94);
}

@media (max-width: 900px) {
    .product-card {
        grid-template-columns: 1fr; /* billede over tekst på mobil */
        gap: 30px;
        padding: 30px 20px;
    }
}

/* --- Productinformation Section --- */
.product-info-section {
    margin: 0 calc(-1 * var(--gutter)); /* ophæver body-padding, så billedet kan gå helt ud til kanten */
    padding: 0 0 0 50px; /* ingen luft top og bund: sektionen stopper hvor billedet stopper */
    background-color: #C2BFBD;
}

.product-info-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* Billedet går fra top til bund af sektionen */
.info-image {
    align-self: stretch;
    display: flex;
    justify-content: flex-end; /* billedet helt ud til højre kant */
}

.info-image img {
    width: 100%; /* fylder hele kolonnen, så billedet skal beskæres mindre */
    height: 100%;
    object-fit: cover; /* fylder hele højden uden at blive strakt */
    object-position: 30% center; /* beskær mest fra højre, så fingrene og højttaleren ikke skæres væk */
    display: block;
}

/* Venstre kolonne er lige så høj som billedet, med luft top og bund til teksten */
.info-column {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    padding: 50px 0;
}

/* Boksens højde sættes i script.js, så der altid er plads til fold ud-teksten */
.info-content {
    flex: 1; /* boksen fylder resten af kolonnens højde */
    color: #332E29;
    background-color: #E8E4E1;
    border-radius: 10px;
    padding: 50px;
}

.info-title {
    font-family: 'Antonio', sans-serif;
    font-size: 48px; /* samme som "Følg os på de sociale medier" */
    color: #332E29;
    margin-bottom: 30px;
    letter-spacing: 0.01em;
    line-height: 1;
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Fold ud-boks: "+ Flere specifikationer og information" */
.info-more {
    margin-top: 10px;
}

.info-more summary {
    font-style: italic;
    font-size: 16px;
    color: #332E29;
    cursor: pointer;
    list-style: none; /* skjul standard-pilen */
    margin-bottom: 15px;
}

.info-more summary::-webkit-details-marker {
    display: none; /* skjul standard-pilen i Safari */
}

.info-more summary::before {
    content: "+ ";
}

/* Når boksen er foldet ud, skifter + til − */
.info-more[open] summary::before {
    content: "− ";
}

.info-list li {
    
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
    padding-left: 25px;
    position: relative;
    color: #332E29;
}

.info-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #332E29;
    font-size: 1.5rem;
    line-height: 1.2;
}

@media (max-width: 900px) {
    .product-info-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .info-content {
        padding: 30px 24px;
    }
}

/* --- Social Connect --- */
.split-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  /* ingen max-width, så teksten flugter med de andre afsnit */
  margin: 80px calc(-1 * var(--gutter)); /* luft over og under, og ophæver body-padding i siderne */
  padding: 0 150px; /* 150px fra kanten i hver side */
}

.split-text {
  flex: 0 0 auto;
  width: min-content; /* teksten bliver aldrig bredere end første linje */
  color: #332E29;
}

/* Første linje slutter efter "funktion," og bestemmer tekstens bredde */
.split-text-line {
  white-space: nowrap;
}

/* "Nyhed" over Social Connect */
.split-text h1 {
  font-size: 1rem; 
  color: #9E2685;
  text-align: left;
  margin-bottom: 6px; /* tæt på overskriften */
}

.split-text p {
  font-size: 1rem;
  line-height: 1.6; 
  max-width: 520px;
  opacity: 0.9;
  margin-bottom: 34px;
}

.split-image {
  flex: 1;
  display: flex;
  justify-content: center;
}

.split-image img {
  width: 100%;
  max-width: 820px;
  height: auto;
  border-radius: 20px;
}

@media (max-width: 900px) {
  .split-section {
    flex-direction: column;
    align-items: stretch; /* teksten fylder bredden og står venstrestillet */
    padding: 0 20px;
    margin: 40px calc(-1 * var(--gutter));
  }
  .split-text p {
    margin: 0 0 24px;
  }
  /* På mobil må første linje gerne ombrydes, så teksten ikke går ud over skærmen */
  .split-text {
    width: auto;
  }
  .split-text-line {
    white-space: normal;
  }
}

/* --- Følg os på de sociale medier --- */
.gallery-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.gallery-section h1 {
    text-align: center;
    font-size: 48px;
    margin-bottom: 0;
    color: #332E29;
    position: relative;
    z-index: 1; /* overskriften ligger oven på billedets hvide kant */
}

.social-image {
    display: block;
    margin-top: -4%; /* trækker billedet op, da filen har hvid luft øverst */
    width: 100%;
    height: auto;
}

/* FOOTER STYLING */
footer {
  width: auto;
  position: relative;
  box-sizing: border-box;
  padding: 50px 120px 50px 70px;
  min-height: 400px; 
  background-color: #C2BFBD; /* samme som produktinformation */
  color: #332E29;
  overflow: hidden;
  margin: 0 calc(-1 * var(--gutter)); /* ophæver body-padding, så footeren går helt ud til siderne */
}

/* Sort linje over bundlinjen (betaling og copyright) */
footer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;       /* hele footerens bredde */
    bottom: 60px;   /* lige over ikonerne og copyright */
    height: 1px;
    background-color: #000000;
}

/* Logo øverst til venstre: samme som i headeren, bare sort */
.footer-logo {
    color: #000000;
    line-height: 1;
    margin-bottom: 30px;
}

/* Nyhedsbrev til venstre, de tre link-kolonner skubbet ud mod højre */
.footer-content {
    display: grid;
    grid-template-columns: 1fr auto auto auto; /* nyhedsbrevet tager den ledige plads, link-kolonnerne kun det de skal bruge */
    align-items: start; /* alle kolonner starter i toppen og flugter med logoet */
    column-gap: 80px;   /* luft mellem link-kolonnerne */
    row-gap: 40px;
    margin-bottom: 10px;
}

/* Mindre luft på mellemstore skærme, så nyhedsbrevet har plads */
@media (max-width: 1200px) {
    .footer-content {
        column-gap: 40px;
    }
}

/* --- Link-kolonner i footeren (Kundeservice, Virksomheden og Sociale medier) --- */
.footer-links {
    text-align: left;
}

.footer-content .footer-links h3 {
    font-family: 'Antonio', sans-serif; /* samme font som de store overskrifter */
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin-bottom: 16px;
}

.footer-links a {
    color: #332E29;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500; /* Medium til navigation */
    font-size: 16px;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* Sociale medier: ikon før teksten */
.footer-social a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.footer-social svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor; /* ikonerne får tekstens farve */
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.footer-social svg .icon-fill {
    fill: currentColor;
    stroke: none;
}

/* --- Nyhedsbrev i footeren --- */
.newsletter {
    max-width: 420px;
}

.newsletter-form {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #000000; /* linjen man skriver på */
}

.newsletter-form input {
    flex: 1;
    min-width: 0;
    padding: 10px 0;
    border: none;
    background: transparent;
    color: #332E29;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    letter-spacing: 0.01em;
    outline: none;
}

.newsletter-form input::placeholder {
    color: #332E29;
    opacity: 0.6;
}

.newsletter-form button {
    background: none;
    border: none;
    color: #332E29;
    font-size: 24px;
    cursor: pointer;
    padding: 0 0 0 10px;
}

/* Pop op efter tilmelding */
.newsletter-popup {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1100;
}

.newsletter-popup[hidden] {
    display: none;
}

.newsletter-popup-card {
    position: relative;
    width: min(420px, 100%);
    padding: 50px 40px 40px;
    background-color: #E8E4E1;
    color: #332E29;
    border-radius: 10px;
    text-align: center;
}

.newsletter-popup-title {
    font-family: 'Antonio', sans-serif;
    font-weight: 700;
    font-size: 32px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.newsletter-popup-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: #332E29;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}


.footer-content h3 {
    font-size: 17px;
    margin-bottom: 10px;
}

.footer-content ul {
    list-style: none;
    padding: 0;
}

.footer-content li {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500; /* Medium til navigation */
}

/* Payment methods */
.payment-icons {
  position: absolute;
  left: 70px;            
  bottom: 12px; /* under den sorte streg */
  margin: 0;
  z-index: 10;
}

/* Ét billede med alle betalingsikoner, under stregen i venstre hjørne */
.payment-icons img {
  display: block;
  height: 36px;
  width: auto;
}


/* Copyright */
footer .copyright {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;       
  margin: 0;
  font-size: 14px;
  opacity: 0.7;
  text-align: center;
  z-index: 5;
}

/* Tekst kun til skærmlæsere (usynlig på skærmen) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
    background-color: #E8E4E1;
    color: #332E29;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

/* --- Typografi --- */
/* Antonio Bold til H1 og H2 */
h1, h2 {
    font-family: 'Antonio', sans-serif;
    font-weight: 700;
}

/* Helvetica Neue Bold til knapper */
button {
    font-weight: 700;
    letter-spacing: 0.01em;
}

.about-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
    position: relative;
}

.back-btn {
background-color: #f5f0e6;
            color: #332E29;
            padding: 14px 40px;
            border: none;
            border-radius: 30px;
            font-size: 1rem;
            font-weight: 700;
            text-transform: uppercase;
            cursor: pointer;
            transition: transform 0.3s;
}

.title {
    font-size: 72px;
    line-height: 1;      /* ingen ekstra luft over bogstaverne, så toppen flugter med billedet */
    letter-spacing: 0.01em;
    text-align: left;    /* står lige over teksten */
    margin-bottom: 16px;
    color: #332E29;
}

.content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-top: 50px; /* luft ned fra tilbage-knappen */
}

.text-block {
    width: min-content; /* teksten bliver aldrig bredere end første linje */
    font-size: 18px;
    line-height: 1.6;
color: #332E29;
}

/* Første linje slutter efter "ikke kun noget," og bestemmer kolonnens bredde */
.text-block-line {
    white-space: nowrap;
}

/* Billede i højre side af Om os */
.about-image {
    flex: 1;       /* fylder resten af bredden ved siden af teksten */
    min-width: 0;
    width: 100%;
    height: auto;
    border: 2px solid #332E29; /* stroke i tekstfarven */
    border-radius: 10px;
}

/* På mobil må linjen gerne ombrydes, så teksten ikke går ud over skærmen */
@media (max-width: 768px) {
    .content {
        flex-direction: column; /* billedet under teksten */
    }

    .text-block {
        width: auto;
    }

    .text-block-line {
        white-space: normal;
    }
}

.text-block h3 {
    margin-top: 20px;
    font-size: 22px;
    color: #332E29;
}

/* Toast / pop-up if purchase */
.cart-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(12px);
  background: rgba(112, 111, 109, 0.95);
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(172, 153, 132, 0.25);
  opacity: 0;
  transition: opacity 260ms ease, transform 260ms ease;
  z-index: 9999;
  font-weight: 600;
  pointer-events: none;
}

/* When toast is visible */
.cart-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Smaller devices:  */
@media (max-width: 480px) {
  .cart-toast { bottom: 18px; padding: 10px 14px; font-size: 14px; }
}

/* --- Søgefunktion --- */
.search-bar {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: min(600px, calc(100% - 32px));
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background-color: #E8E4E1;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.search-bar[hidden] {
    display: none;
}

.search-bar input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: #332E29;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 18px;
    letter-spacing: 0.01em;
    outline: none;
}

.search-count {
    color: #332E29;
    font-size: 14px;
    white-space: nowrap;
}

.search-close {
    background: none;
    border: none;
    color: #332E29;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

/* Markering af fund */
mark.search-hit {
    background-color: #f4b8ab;
    color: inherit;
    border-radius: 2px;
}

/* Det fund man står på lige nu */
mark.search-hit.current {
    background-color: #3D3529;
    color: #ffffff;
}

/* --- Kurv --- */
.cart-popup {
    position: absolute; /* placeres i hero, lige under "Kurv" */
    top: 110px;
    right: 50px;
    width: min(380px, calc(100% - 32px));
    padding: 20px;
    background-color: #E8E4E1;
    color: #332E29;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 900;
}

.cart-popup[hidden] {
    display: none;
}

.cart-empty {
    font-size: 16px;
    text-align: center;
}

.cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(51, 46, 41, 0.2);
}

.cart-item img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.cart-item-info {
    flex: 1;
    font-size: 14px;
}

.cart-item-title {
    font-weight: 700;
}

.cart-item-side {
    text-align: right;
    font-size: 14px;
}

.cart-remove {
    margin-top: 4px;
    background: none;
    border: none;
    color: #332E29;
    font-size: 13px;
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
}

@media (max-width: 768px) {
    .cart-popup {
        top: 90px; /* lige under headeren på mobil */
        right: 16px;
    }
}

/* =========================================================
   MOBIL (under 768px)
   ========================================================= */
@media (max-width: 768px) {

    /* Hero: mindre luft og tekst, så det passer på en smal skærm */
    .hero {
        padding: 20px var(--gutter);
    }

    .hero-text {
        font-size: 20px;
    }

    .hero-btn {
        font-size: 18px;
        padding: 12px 20px;
    }

    /* Overskrifter: 48px er for stort på mobil */
    .product-title,
    .info-title,
    .headline-sub,
    .gallery-section h1 {
        font-size: 34px;
    }

    .title {
        font-size: 48px;
    }

    /* Produktinformation: tekst med luft, billede i fuld bredde under */
    .product-info-section {
        padding: 0;
    }

    .info-column {
        padding: 40px var(--gutter) 0;
    }

    /* Følg os: mindre luft i siderne */
    .gallery-section {
        padding: 40px 0;
    }
}

/* =========================================================
   FOOTER PÅ MOBIL OG TABLET (under 900px)
   Står sidst, så den overskriver footerens almindelige regler
   ========================================================= */
@media (max-width: 900px) {
    /* --- Footer på mobil og tablet --- */
    footer {
        padding: 40px var(--gutter) 20px;
        min-height: auto;
    }

    /* Nyhedsbrev i fuld bredde, Kundeservice og Virksomheden side om side */
    .footer-content {
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        row-gap: 32px;
    }

    .newsletter,
    .footer-social {
        grid-column: 1 / -1; /* fuld bredde */
    }

    .newsletter {
        max-width: none;
    }

    .footer-content .footer-links h3 {
        font-size: 22px;
        margin-bottom: 12px;
    }

    /* Sociale medier på en række i stedet for under hinanden */
    .footer-social ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 24px;
    }

    /* Bundlinjen følger med indholdet i stedet for faste afstande fra bunden */
    footer::after {
        display: none;
    }

    .payment-icons,
    footer .copyright {
        position: static;
        transform: none;
        text-align: center;
    }

    .payment-icons {
        margin: 32px calc(-1 * var(--gutter)) 0; /* stregen går helt ud til kanterne */
        padding-top: 20px;
        border-top: 1px solid #000000;
    }

    .payment-icons img {
        display: inline-block;
        height: 26px;
    }

    footer .copyright {
        margin-top: 12px;
    }
}