/* =========================================================
   TEST: HANDLEKURV + KASSE
   Avgrenset til testnettstedet /ny/ via unike sideelementer.
   ========================================================= */

:root {
    --gc-shop-bg: #f4f1ea;
    --gc-shop-card: #ffffff;
    --gc-shop-text: #171717;
    --gc-shop-muted: #69665f;
    --gc-shop-line: #d3cec4;
}

/* Behold den etablerte sorte toppmenyen på de lyse bestillingssidene. */
.gc-cart-page .navbar,
body:has(input[name="shipping"]) .navbar,
body:has(input[type="password"]) .navbar {
    background: #000 !important;
    color: #fff !important;
}

.gc-cart-page .navbar a,
body:has(input[name="shipping"]) .navbar a,
body:has(input[type="password"]) .navbar a {
    color: #fff !important;
}

/* Innlogging: bruk samme sentrerte toppnavigasjon som resten av det nye designet.
   Dette er avgrenset til innloggingssiden og endrer ikke Master. */
@media (min-width: 1280px) {
    body:has(input[type="password"]) .navbar {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    body:has(input[type="password"]) .navbar > .flex {
        height: auto !important;
        min-height: 8.5rem !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 1rem !important;
    }

    body:has(input[type="password"]) .navbar > .flex > a.inline-block {
        display: block !important;
        margin: 0 auto !important;
    }

    body:has(input[type="password"]) .navbar > .flex > a.inline-block img {
        display: block !important;
        width: 11rem !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    body:has(input[type="password"]) .navbar .hidden.xl\:flex {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2.25rem !important;
        margin: 0 !important;
    }

    body:has(input[type="password"]) .navbar .hidden.xl\:flex > a {
        margin: 0 !important;
        font-family: "museo-sans", Arial, sans-serif !important;
        font-size: 0.9rem !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        letter-spacing: 0.02em !important;
        text-transform: uppercase !important;
    }
}

/* Handlekurv */
.gc-cart-page {
    background: var(--gc-shop-bg);
    color: var(--gc-shop-text);
}

.gc-cart-page > section {
    background: var(--gc-shop-bg) !important;
    color: var(--gc-shop-text) !important;
    padding: 3.5rem 0 2rem !important;
}

.gc-cart-page > section h1 {
    color: var(--gc-shop-text) !important;
    font-family: "Gloock", Georgia, serif !important;
    font-size: clamp(2.5rem, 5vw, 4.25rem) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    text-align: center !important;
}

.gc-cart-page > section h1 + * {
    color: var(--gc-shop-muted) !important;
    max-width: 42rem;
    margin: 1rem auto 0 !important;
    line-height: 1.65;
    text-align: center !important;
}

.gc-cart-page > section > .container {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.gc-cart-page > section .lg\:w-1\/2 {
    width: 100% !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem;
    padding-right: 1rem;
}

.gc-cart-page > section h1 {
    justify-content: center !important;
}

.gc-cart-page > section .underscore-intro {
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    color: var(--gc-shop-muted) !important;
    text-align: center !important;
}

/* Handlekurven skal være lys og rolig. Et eventuelt Intro-bilde skjules her,
   men beholdes i Umbraco slik at det ikke slettes fra innholdet. */
.gc-cart-page > section .bg-no-repeat[style*="background-image"] {
    position: relative;
    display: flex;
    min-height: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-image: none !important;
    background-color: var(--gc-shop-bg) !important;
}

.gc-cart-page > section .bg-no-repeat[style*="background-image"]::before {
    display: none !important;
    content: none;
}

.gc-cart-page > section .bg-no-repeat[style*="background-image"] > * {
    position: relative;
    z-index: 1;
}

.gc-cart-page > section .bg-no-repeat[style*="background-image"] h1,
.gc-cart-page > section .bg-no-repeat[style*="background-image"] .underscore-intro {
    color: var(--gc-shop-text) !important;
}

.gc-cart-page > section .bg-no-repeat[style*="background-image"] .underscore-intro {
    color: var(--gc-shop-muted) !important;
}

.gc-cart-page > div.container {
    max-width: 1180px !important;
    padding-top: 2rem !important;
    padding-bottom: 7rem !important;
}

.gc-cart-page > div.container table {
    width: 100%;
    overflow: hidden;
    background: var(--gc-shop-card);
    border: 1px solid var(--gc-shop-line);
}

.gc-cart-page > div.container th {
    padding: 1rem 1.25rem !important;
    background: #ebe7df;
    color: var(--gc-shop-text);
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gc-cart-page > div.container td {
    padding: 1.25rem !important;
    border-color: var(--gc-shop-line) !important;
}

/* Hjelpetekst som tidligere arvet hvit tekst fra den mørke originalmalen. */
.gc-cart-page > div.container td p,
.gc-cart-page > div.container td span,
.gc-cart-page > div.container td small,
.gc-cart-page > div.container td em,
.gc-cart-page > div.container td strong {
    color: var(--gc-shop-text) !important;
}

.gc-cart-page > div.container td:first-child,
.gc-cart-page > div.container td:first-child *,
.gc-cart-page > div.container table + *:not(.btn),
.gc-cart-page > div.container table + * *:not(.btn) {
    color: var(--gc-shop-text) !important;
}

.gc-cart-page > div.container input[type="number"] {
    min-height: 46px;
    background: #fff;
    border: 1px solid var(--gc-shop-text);
    color: var(--gc-shop-text);
}

.gc-cart-page a[href$="/kasse/"] {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: .85rem 1.5rem;
    background: var(--gc-shop-text) !important;
    border: 1px solid var(--gc-shop-text) !important;
    color: #fff !important;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    transition: background .2s ease, color .2s ease;
}

.gc-cart-page a[href$="/kasse/"]:hover {
    background: transparent !important;
    color: var(--gc-shop-text) !important;
}

/* Kasse */
body:has(input[name="shipping"]) {
    background: var(--gc-shop-bg);
    color: var(--gc-shop-text);
    font-family: "museo-sans", Arial, sans-serif !important;
}

body:has(input[name="shipping"]) input,
body:has(input[name="shipping"]) select,
body:has(input[name="shipping"]) textarea,
body:has(input[name="shipping"]) button {
    font-family: "museo-sans", Arial, sans-serif !important;
}

/* Lenker i kassen må ha tilstrekkelig kontrast på den lyse bakgrunnen. */
body:has(input[name="shipping"]) form a {
    color: var(--gc-shop-text) !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

body:has(input[name="shipping"]) form a:hover {
    color: #000 !important;
}

body:has(input[name="shipping"]) > section {
    background: var(--gc-shop-bg) !important;
    color: var(--gc-shop-text) !important;
    padding: 3.5rem 0 2rem !important;
}

body:has(input[name="shipping"]) > section h1 {
    color: var(--gc-shop-text) !important;
    font-family: "Gloock", Georgia, serif !important;
    font-size: clamp(2.5rem, 5vw, 4.25rem) !important;
    font-weight: 400 !important;
}

body:has(input[name="shipping"]) form > .container {
    max-width: 1180px !important;
    padding-top: 2rem !important;
    padding-bottom: 7rem !important;
}

body:has(input[name="shipping"]) form > .container > .md\:flex {
    gap: 2rem !important;
}

body:has(input[name="shipping"]) form > .container > .md\:flex > .md\:w-1\/2 {
    width: 50% !important;
    margin: 0 !important;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--gc-shop-card);
    border: 1px solid var(--gc-shop-line);
}

body:has(input[name="shipping"]) h2 {
    color: var(--gc-shop-text) !important;
    font-family: "museo-sans", Arial, sans-serif !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    line-height: 1.25;
}

body:has(input[name="shipping"]) label > span:first-child {
    color: var(--gc-shop-text);
    font-size: .85rem;
    font-weight: 600;
}

body:has(input[name="shipping"]) input:not([type="radio"]):not([type="checkbox"]),
body:has(input[name="shipping"]) select,
body:has(input[name="shipping"]) textarea {
    min-height: 46px;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--gc-shop-text) !important;
    border-radius: 0 !important;
    color: var(--gc-shop-text) !important;
    box-shadow: none !important;
}

body:has(input[name="shipping"]) textarea {
    min-height: 90px;
}

body:has(input[name="shipping"]) .btn,
body:has(input[name="shipping"]) button[type="submit"] {
    min-height: 48px;
    padding: .85rem 1.5rem !important;
    background: var(--gc-shop-text) !important;
    border: 1px solid var(--gc-shop-text) !important;
    color: #fff !important;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

body:has(input[name="shipping"]) .btn:hover,
body:has(input[name="shipping"]) button[type="submit"]:hover {
    background: transparent !important;
    color: var(--gc-shop-text) !important;
}

/* Innlogging / min profil */
body:has(input[type="password"]) {
    background: var(--gc-shop-bg) !important;
    color: var(--gc-shop-text) !important;
    font-family: "museo-sans", Arial, sans-serif !important;
}

body:has(input[type="password"]) input,
body:has(input[type="password"]) select,
body:has(input[type="password"]) textarea,
body:has(input[type="password"]) button {
    font-family: "museo-sans", Arial, sans-serif !important;
}

body:has(input[type="password"]) > section,
body:has(input[type="password"]) main,
body:has(input[name="Username"]) > section,
body:has(input[name="Username"]) > .container {
    background: var(--gc-shop-bg) !important;
    color: var(--gc-shop-text) !important;
}

body:has(input[type="password"]) form {
    width: min(100% - 2rem, 680px);
    margin: 3rem auto 7rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--gc-shop-card) !important;
    border: 1px solid var(--gc-shop-line) !important;
    color: var(--gc-shop-text) !important;
}

body:has(input[type="password"]) h1,
body:has(input[type="password"]) h2,
body:has(input[type="password"]) p,
body:has(input[type="password"]) label {
    color: var(--gc-shop-text) !important;
}

body:has(input[type="password"]) > section {
    padding: 3.5rem 1rem 2.75rem !important;
    text-align: center !important;
}

body:has(input[type="password"]) > section > .container,
body:has(input[type="password"]) > section .container {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Introen i Login.cshtml bruker lg:w-1/2. Kun på innloggingssiden skal
   introen bruke full bredde og ligge sentrert. */
body:has(input[type="password"]) > section .lg\:w-1\/2 {
    width: 100% !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body:has(input[type="password"]) > section h1 {
    justify-content: center !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-family: "Gloock", Georgia, serif !important;
    font-size: clamp(2.35rem, 4vw, 3.5rem) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    text-align: center !important;
}

body:has(input[type="password"]) > section p,
body:has(input[type="password"]) > section .rte,
body:has(input[type="password"]) > section .underscore-intro {
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.65 !important;
    text-align: center !important;
}

body:has(input[name="Username"]) h1 {
    font-family: "Gloock", Georgia, serif !important;
    font-size: clamp(2.5rem, 5vw, 4.25rem) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
}

body:has(input[name="Username"]) > section {
    padding: 3.5rem 1rem 2.75rem !important;
    text-align: center !important;
}

body:has(input[name="Username"]) > section > .container,
body:has(input[name="Username"]) > section .container {
    max-width: 780px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body:has(input[name="Username"]) > section h1 {
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(2.35rem, 4vw, 3.5rem) !important;
    text-align: center !important;
}

body:has(input[name="Username"]) > section p,
body:has(input[name="Username"]) > section .rte {
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    line-height: 1.65 !important;
}

body:has(input[name="Username"]) > section img {
    display: none !important;
}

body:has(input[name="Username"]) > section .md\:flex {
    display: block !important;
}

body:has(input[name="Username"]) > section .md\:w-1\/2 {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body:has(input[name="Username"]) > section .md\:w-1\/2:last-child {
    display: none !important;
}

body:has(input[name="Username"]) > section a {
    color: var(--gc-shop-text) !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .18em;
}

body:has(input[name="Username"]) h2 {
    font-family: "museo-sans", Arial, sans-serif !important;
    font-size: 1.35rem !important;
    font-weight: 600 !important;
}

body:has(input[type="password"]) input:not([type="checkbox"]):not([type="radio"]) {
    min-height: 46px;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--gc-shop-text) !important;
    border-radius: 0 !important;
    color: var(--gc-shop-text) !important;
    box-shadow: none !important;
}

body:has(input[type="password"]) button[type="submit"],
body:has(input[type="password"]) .btn {
    min-height: 48px;
    padding: .85rem 1.5rem !important;
    background: var(--gc-shop-text) !important;
    border: 1px solid var(--gc-shop-text) !important;
    color: #fff !important;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .gc-cart-page > div.container {
        padding: 1.25rem 1rem 5rem !important;
    }

    .gc-cart-page > div.container table,
    .gc-cart-page > div.container thead,
    .gc-cart-page > div.container tbody,
    .gc-cart-page > div.container tfoot,
    .gc-cart-page > div.container tr,
    .gc-cart-page > div.container th,
    .gc-cart-page > div.container td {
        display: block;
        width: 100% !important;
        text-align: left !important;
    }

    .gc-cart-page > div.container thead {
        display: none;
    }

    .gc-cart-page > div.container td {
        padding: .65rem 1rem !important;
    }

    body:has(input[name="shipping"]) form > .container > .md\:flex > .md\:w-1\/2 {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }

    body:has(input[name="shipping"]) .flex.space-x-4,
    body:has(input[name="shipping"]) .flex.space-x-2 {
        display: block !important;
    }

    body:has(input[name="shipping"]) .w-1\/2,
    body:has(input[name="shipping"]) .w-1\/3,
    body:has(input[name="shipping"]) .w-2\/3 {
        width: 100% !important;
        margin: .75rem 0 0 !important;
    }
}

.gc-cart-page a.btn {
    background: #171717;
    color: #fff;
}

/* =========================================================
   Synlig tastaturfokus i handlekurv, kasse og innlogging
   ========================================================= */
.gc-cart-page a:focus-visible,
.gc-cart-page button:focus-visible,
.gc-cart-page input:focus-visible,
.gc-cart-page select:focus-visible,
.gc-cart-page textarea:focus-visible,
body:has(input[name="shipping"]) a:focus-visible,
body:has(input[name="shipping"]) button:focus-visible,
body:has(input[name="shipping"]) input:focus-visible,
body:has(input[name="shipping"]) select:focus-visible,
body:has(input[name="shipping"]) textarea:focus-visible,
body:has(input[type="password"]) a:focus-visible,
body:has(input[type="password"]) button:focus-visible,
body:has(input[type="password"]) input:focus-visible {
    outline: 2px solid var(--gc-shop-text);
    outline-offset: 3px;
}

/* Lys fokusring på de mørke flatene (toppmeny og footer) */
.gc-cart-page .navbar a:focus-visible,
.gc-cart-page .navbar button:focus-visible,
.gc-cart-page footer a:focus-visible,
.gc-cart-page footer button:focus-visible,
body:has(input[name="shipping"]) .navbar a:focus-visible,
body:has(input[name="shipping"]) footer a:focus-visible,
body:has(input[type="password"]) .navbar a:focus-visible,
body:has(input[type="password"]) footer a:focus-visible {
    outline-color: #fff;
}

/* =========================================================
   Handlekurv: usynlig innrykk-stjerne og storre trykkflate
   ========================================================= */

/* Fyll-stjernene i fotnotene skal vaere helt usynlige,
   ikke hvite paa beige. */
.gc-cart-page p .text-white {
    color: transparent !important;
}

/* Slett-knappen er et 16px ikon. Padding + negativ margin gir
   44x44 trykkflate uten aa flytte noe visuelt. */
.gc-cart-page > div.container td button.button-transparent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px !important;
    margin: -14px -14px -14px -6px !important;
}

/* Dekorstreken under overskriften tas bort - den ble for kraftig i det lyse
   designet, og temaets egen farge var praktisk talt usynlig. */
.gc-cart-page > section .underscore::after,
body:has(input[name="shipping"]) > section .underscore::after,
body:has(input[type="password"]) > section .underscore::after,
body:has(input[name="Username"]) > section .underscore::after {
    display: none !important;
}

/* =========================================================
   Overskrift og ingress midtstilles paa kasse og innlogging,
   samme moenster som handlekurven allerede bruker.
   ========================================================= */
body:has(input[name="shipping"]) > section > .container,
body:has(input[type="password"]) > section > .container,
body:has(input[name="Username"]) > section > .container {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

body:has(input[name="shipping"]) > section .lg\:w-1\/2,
body:has(input[type="password"]) > section .lg\:w-1\/2,
body:has(input[name="Username"]) > section .lg\:w-1\/2 {
    width: 100% !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem;
    padding-right: 1rem;
}

body:has(input[name="shipping"]) > section h1,
body:has(input[type="password"]) > section h1,
body:has(input[name="Username"]) > section h1 {
    justify-content: center !important;
    text-align: center !important;
}

body:has(input[name="shipping"]) > section .underscore-intro,
body:has(input[type="password"]) > section .underscore-intro,
body:has(input[name="Username"]) > section .underscore-intro {
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    color: var(--gc-shop-muted) !important;
    text-align: center !important;
}


/* Footeren skal beholde lys tekst selv om siden har passord- eller leveringsfelt */
body:has(input[type="password"]) .footer,
body:has(input[type="password"]) .footer p,
body:has(input[type="password"]) .footer strong,
body:has(input[type="password"]) .footer span,
body:has(input[type="password"]) .footer li,
body:has(input[type="password"]) .footer h1,
body:has(input[type="password"]) .footer h2,
body:has(input[type="password"]) .footer h3,
body:has(input[type="password"]) .footer h4,
body:has(input[type="password"]) .footer a,
body:has(input[name="shipping"]) .footer,
body:has(input[name="shipping"]) .footer p,
body:has(input[name="shipping"]) .footer strong,
body:has(input[name="shipping"]) .footer span,
body:has(input[name="shipping"]) .footer li,
body:has(input[name="shipping"]) .footer h1,
body:has(input[name="shipping"]) .footer h2,
body:has(input[name="shipping"]) .footer h3,
body:has(input[name="shipping"]) .footer h4,
body:has(input[name="shipping"]) .footer a {
    color: #fff !important;
}