body.cms-index-index .page-main {
    max-width: 1400px;
}

body.cms-index-index {
    overflow-x: hidden;
}

/* Butikkens innledningstekst (mc_store_config.content_category_page_text,
   «Tekst på kategorisiden») ligger mellom heroen og kategorirutenettet —
   banneren er førsteinntrykket, teksten kommer etter. <small> er inline, så
   uten display: block får den verken egen linje eller marger, og klistrer seg
   mot heroen over og kategoriene under. Sto teksten før heroen, ble den
   dessuten malt over av den (position: relative + margin-top: -20px) og
   klippet på midten — politiet, sept 2026. Butikker uten tekst er uendret:
   da finnes elementet ikke. */
.cms-content > small {
    display: block;
    margin: 0 0 40px;
}

.mc-home-hero {
    position: relative;
    width: 100vw;
    margin-top: -20px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #fcfcfd;
    border-top: none;
    border-bottom: 1px solid rgba(225, 229, 237, 0.5);
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.02);
    padding: 56px 0 12px;
    margin-bottom: 40px;
    height: 310px;
    overflow: hidden;
}

.mc-home-hero__image {
    position: absolute;
    top: 16px;
    right: 0;
    /* Stopper akkurat der linke-kortet begynner (kortets høyde + luft under). */
    bottom: 86px;
    /* Høyre halvdel av heroen — bildet sentreres horisontalt i denne. */
    width: 50%;
    background-image: var(--mc-home-hero-image);
    background-size: contain;
    /* Horisontalt sentrert i 50%-feltet, festet til bunnen så det treffer kortet. */
    background-position: center bottom;
    background-repeat: no-repeat;
    /* Ton ut bildets nederkant så overgangen mot feature-kortet blir myk
       i stedet for en hard kant. */
    -webkit-mask-image: linear-gradient(to bottom, #000 94%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 94%, transparent 100%);
    pointer-events: none;
}

.mc-home-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1700px;
    width: calc(100% - 160px);
    margin: 0 auto 48px;
    padding: 0;
    box-sizing: border-box;
    text-align: left;
}

.mc-home-hero__inner > * {
    max-width: 640px;
}

.mc-home-hero__title {
    margin: 0 0 16px;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--mc-theme-primary, var(--mc-text-color));
}

.mc-home-hero__lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--mc-text-muted-color);
}

/* Full button styling — .mc-button base lives in Customer/account.css which is
   not loaded on the homepage, so the hero button styles itself standalone. */
.mc-home-hero__button,
.mc-home-hero__button:visited {
    display: inline-block;
    margin-top: 24px;
    padding: 12px 28px;
    border-radius: 6px;
    background: var(--mc-theme-primary, #006fce);
    border: 1px solid var(--mc-theme-primary, #006fce);
    color: var(--mc-theme-primary-text, #fff);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.mc-home-hero__button:hover,
.mc-home-hero__button:focus {
    background: var(--mc-theme-primary-hover, #005bad);
    border-color: var(--mc-theme-primary-hover, #005bad);
    color: var(--mc-theme-primary-text, #fff);
    text-decoration: none;
}

.mc-home-hero .mc-home-hero__features {
    /* Forankret nær bunnen av banneren, med litt luft under. */
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    z-index: 1;
    list-style: none;
    margin: 0;
    align-items: center;
    align-content: center;
    max-width: 1700px;
    width: calc(100% - 160px);
    /* YTTERKANT: avstand fra boksens kant til lenkene (øk for å trekke alt innover). */
    padding: 20px 48px;
    box-sizing: border-box;
    display: grid;
    /* Fire faste plasser. Kort 1 ligger alltid i plass 1, kort 2 i plass 2 osv.,
       slik at kortene ikke flytter på seg når antallet varierer per kunde.
       Tomme plasser til høyre er med vilje. minmax(0, …) hindrer at et langt
       navn presser kolonnen bredere enn sin fjerdedel. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* MELLOMROM: avstand mellom lenkene. Styrer nå direkte (ingen space-between). */
    gap: 24px;
    background: var(--mc-surface-color);
    border: 1px solid rgba(225, 229, 237, 0.5);
    border-radius: var(--mc-card-radius);
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.03);
}

.mc-home-hero__feature {
    display: flex;
    align-items: center;
    /* Innholdet starter ved kolonnens venstrekant, uansett hvor mange kort raden har. */
    justify-content: flex-start;
    gap: 14px;
    min-width: 0;
    margin: 0;
    text-align: left;
}

/* Klientside-styrt synlighet («Siste ordre»-kortet fylles via customer-data) —
   `hidden`-attributtet må vinne over `display: grid/flex`, ellers vises
   elementet alltid. */
.mc-home-hero .mc-home-hero__features[hidden],
.mc-home-hero__feature[hidden] {
    display: none;
}

.mc-home-hero__features--single .mc-home-hero__feature-link {
    width: auto;
}

/* Ordre som venter på godkjenning: gul ikonbakgrunn som stille signal. */
.mc-home-hero__feature--awaiting .mc-home-hero__feature-icon {
    background: #fdf3d8;
    color: #8a6100;
}

.mc-home-hero__feature-text strong,
.mc-home-hero__feature-text span {
    margin: 0;
}

.mc-home-hero__feature-link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    border-radius: var(--mc-card-radius);
    transition: color .15s ease;
}

.mc-home-hero__feature-link:hover {
    color: var(--mc-text-color);
    text-decoration: none;
}

.mc-home-hero__feature-link:hover .mc-home-hero__feature-icon {
    background: #e9ebef;
}

.mc-home-hero__feature-svg {
    width: 22px;
    height: 22px;
}

.mc-home-hero__feature-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f4f5f7;
    color: var(--mc-text-color);
    transition: background .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mc-home-hero__feature-text {
    display: flex;
    flex-direction: column;
    /* Teksten venstrejustert, selv om hele elementet er sentrert i kolonnen. */
    align-items: flex-start;
    text-align: left;
    min-width: 0;
}

.mc-home-hero__feature-text strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--mc-text-color);
    line-height: 1.3;
}

.mc-home-hero__feature-text span {
    font-size: 13px;
    color: var(--mc-text-muted-color);
    line-height: 1.4;
}

/* Butikker UTEN bannerbilde: lavere hero.

   Heroen har fast høyde fordi kortraden (.mc-home-hero__features) er absolutt
   posisjonert mot bunnen — den bærer ingen høyde selv, så uten `height` ville
   den lagt seg oppå ingressen. Høyden er kalibrert for bannerbildet, som er
   det eneste som fyller høyre halvdel. Har butikken ikke lastet opp et banner
   (de fleste), står 159px tomt mellom ingressen og kortraden.

   Da gjør vi her det samme som mobil-breakpointet under allerede gjør: auto
   høyde + kortraden tilbake i flyten. Heroen blir nøyaktig så høy som tittel,
   ingress og kortrad krever — også når raden brytes til to rader mellom 961 og
   1200px, der en fast høyde ville måttet gjette.

   Hektet på `.mc-home-hero__image`, som rendres kun når banneret har et bilde
   (homepage.phtml), ikke på om det finnes en banner: en aktiv banner uten bilde
   skal også få den lave varianten. Butikker med bilde er helt urørt, og
   nettlesere uten :has() faller tilbake til dagens høyde. */
@media (min-width: 961px) {
    .mc-home-hero:not(:has(.mc-home-hero__image)) {
        height: auto;
        /* Plass til én kortrad selv før den er fylt: kortene rendres skjult og
           vises av customer-data-JS etter last (forsiden er FPC-cachet), så uten
           dette hopper innholdet nedover idet raden dukker opp. Layouten er ikke
           avhengig av tallet — heroen vokser fritt forbi det når raden brytes
           til to rader. Gjester og kunder uten historikk får da en hero som er
           like høy som med kort, men fortsatt 129px lavere enn før. */
        min-height: 232px;
        box-sizing: border-box;
        /* Bunnen: 2px, samme som `bottom: 2px` på den absolutt posisjonerte
           kortraden i bilde-varianten — luften under kortene skal se lik ut
           enten butikken har banner eller ikke. */
        padding: 36px 0 2px;
    }

    .mc-home-hero:not(:has(.mc-home-hero__image)) .mc-home-hero__inner {
        margin-bottom: 32px;
    }

    .mc-home-hero:not(:has(.mc-home-hero__image)) .mc-home-hero__features {
        position: static;
        transform: none;
        margin: 0 auto;
    }
}

@media (max-width: 960px) {
    .mc-home-hero {
        padding: 56px 0 12px;
        height: auto;
    }

    .mc-home-hero__image {
        display: none;
    }

    .mc-home-hero .mc-home-hero__inner,
    .mc-home-hero .mc-home-hero__features {
        width: calc(100% - 64px);
    }

    .mc-home-hero__title {
        font-size: 28px;
    }

    .mc-home-hero .mc-home-hero__features {
        /* Tilbake til normalt flyt på mobil — banneren er auto-høy her. */
        position: static;
        transform: none;
        margin: 0 auto;
        grid-template-columns: repeat(2, 1fr);
        justify-content: stretch;
        padding: 20px 24px;
        gap: 16px 24px;
    }

    /* Venstrejuster lenkene når de stables, så ikon+tekst flukter pent. */
    .mc-home-hero__feature {
        justify-content: flex-start;
    }
}

/* Fire plasser krever bredde; under dette deles raden i to før kortene klemmes. */
@media (max-width: 1200px) and (min-width: 961px) {
    .mc-home-hero .mc-home-hero__features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .mc-home-hero {
        padding: 48px 0 12px;
        margin-bottom: 24px;
    }

    .mc-home-hero .mc-home-hero__inner,
    .mc-home-hero .mc-home-hero__features {
        width: calc(100% - 32px);
    }

    .mc-home-hero .mc-home-hero__features {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }
}

.page-container {
    display: flex;
    flex-wrap: wrap;
}

.page-container .fordelsprogram-banner {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.page-container .fordelsprogram-banner img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
    display: block;
}

.page-container .sidebar-categories-custom {
    flex: 0.2;
    padding-right: 20px;
}

.page-container .sidebar-categories-custom .category-overskrift {
    font-size: 17px;
    font-weight: 600;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 12px;
    padding-bottom: 8px;
}

.page-container .sidebar-categories-custom a {
    display: block;
    padding: 6px 0;
    margin-bottom: 6px;
    color: #333;
    text-decoration: none;
    cursor: pointer;
    transition:
        color .2s ease,
        padding-left .2s ease,
        background .2s ease;
}

.page-container .sidebar-categories-custom a p {
    margin: 0;
}

.page-container .sidebar-categories-custom a p::before {
    content: "";
    color: #888;
    font-weight: 600;
}

.page-container .sidebar-categories-custom a:hover {
    background: #f7f7f7;
    padding-left: 4px;
    border-radius: 4px;
}

.page-container .sidebar-categories-custom a:hover p::before {
    color: #000;
}

.page-container .container-content {
    flex: 0.8;
}

.page-container .block {
    background: #fff;
    padding: 25px;
    box-sizing: border-box;
}

.page-container .full-width:not(:last-child) {
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 30px;
}

.page-container .three-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 30px;
    border-bottom: 1px solid #e0e0e0;
}

.page-container .red-color {
    color: #a3031b;
}

@media (max-width: 900px) {
    .page-container .three-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .page-container .three-cols {
        grid-template-columns: 1fr;
    }
}

/* --- «Mest bestilte»: kort som knapp + popup ------------------------------- */

/* Kortet åpner en dialog i stedet for å navigere, så lenka er en <button>.
   Nullstiller knappearven slik at den ser identisk ut med <a>-kortene.
   `.mc-home-hero` foran fordi Lumas `button:not(.primary):hover` (0,2,1) ellers
   slår klassen alene (0,1,0) og maler kortet grått på hover. */
.mc-home-hero .mc-home-hero__feature-link--button,
.mc-home-hero .mc-home-hero__feature-link--button:hover,
.mc-home-hero .mc-home-hero__feature-link--button:focus,
.mc-home-hero .mc-home-hero__feature-link--button:active {
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.mc-hero-products {
    width: min(560px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--mc-border-color);
    border-radius: var(--mc-card-radius);
    background: var(--mc-surface-color);
    color: var(--mc-text-color);
    box-shadow: var(--mc-modal-shadow);
}

.mc-hero-products::backdrop {
    background: rgba(17, 20, 24, .45);
}

.mc-hero-products__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--mc-border-color);
}

.mc-hero-products__title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

.mc-hero-products__close {
    padding: 6px 12px;
    background: none;
    border: 1px solid var(--mc-border-color);
    border-radius: var(--mc-card-radius);
    color: var(--mc-text-muted-color);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.mc-hero-products__close:hover {
    color: var(--mc-text-color);
}

.mc-hero-products__list {
    display: grid;
    gap: 4px;
    /* Fem varer får plass; en kort liste krymper som den skal. */
    max-height: min(60vh, 460px);
    overflow-y: auto;
    padding: 12px;
}

.mc-hero-products__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: var(--mc-card-radius);
    color: inherit;
    text-decoration: none;
}

.mc-hero-products__item:hover {
    background: #f4f5f7;
    color: inherit;
    text-decoration: none;
}

.mc-hero-products__media {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mc-border-color);
    border-radius: var(--mc-card-radius);
    background: #fff;
    overflow: hidden;
}

.mc-hero-products__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.mc-hero-products__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mc-hero-products__name {
    font-size: 14px;
    line-height: 1.4;
    min-width: 0;
}

.mc-hero-products__category {
    font-size: 12px;
    line-height: 1.3;
    color: var(--mc-text-muted-color);
}

.mc-hero-products__message {
    margin: 0;
    padding: 18px 12px;
    color: var(--mc-text-muted-color);
    font-size: 14px;
    text-align: center;
}