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

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

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

/* Handlingen («Se ordre» / «Vis varer») vises bare når ett kort fyller raden
   alene — da står den rett etter teksten, ikke skjøvet ut til høyre kant. */
.mc-home-hero__feature-action {
    display: none;
    margin-left: 20px;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mc-theme-primary, var(--mc-text-color));
    white-space: nowrap;
}

.mc-home-hero__feature-action-svg {
    width: 16px;
    height: 16px;
    transition: transform .15s ease;
}

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

.mc-home-hero__features--single .mc-home-hero__feature-action {
    display: inline-flex;
}

.mc-home-hero__feature-link:hover .mc-home-hero__feature-action-svg {
    transform: translateX(3px);
}

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

@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__name {
    font-size: 14px;
    line-height: 1.4;
    min-width: 0;
}

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