/*
 Theme Name:   Hello Biz Child - HHH
 Theme URI:    https://heiahageoghandverkslag.com
 Description:  Child theme for Heia Hage og Håndverkslag
 Author:       HHH Team
 Author URI:   https://heiahageoghandverkslag.com
 Template:     hello-biz
 Version:      4.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  hello-biz-child
*/

/* ==========================================================================
   1. FARGEPALETT OG VARIABLER
   ========================================================================== */

:root {
    /* Farger */
    --hhh-cream: #F5F3E8;
    --hhh-cream-dark: #D9D4B8;
    --hhh-sage: #8B9B7E;
    --hhh-moss: #5A6B4D;
    --hhh-brown: #8B7355;
    --hhh-yellow: #F4E4C1;
    --hhh-terra: #8B0000;
    --hhh-dark: #2C2C2C;
    --hhh-light: #A8B89D;
    --hhh-blue: #7A9BBD;

    /* Tekst */
    --hhh-font-sm: 13px;
    --hhh-font-base: 15px;
    --hhh-font-lg: 18px;

    /* Spacing */
    --hhh-gap: 3vw;
}

/* ==========================================================================
   1b. GLOBAL KNAPPERESTART
   — hello-biz setter border: 1px solid #c36 og color: #c36 på alle knapper.
     Tilbakestill dette for alle knapper i vår layout.
   ========================================================================== */

.hhh-layout button,
.hhh-layout [type="button"],
.hhh-layout [type="submit"],
.hhh-cart-overlay button,
.hhh-cart-overlay [type="button"],
.hhh-about-overlay button,
.hhh-about-overlay [type="button"],
.hhh-member-overlay button,
.hhh-member-overlay [type="button"],
.hhh-mobler-overlay button,
.hhh-mobler-overlay [type="button"] {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--hhh-dark) !important;
    padding: 0 !important;
    white-space: normal !important;
    font-family: inherit !important;
    font-weight: 400 !important;
    font-size: var(--hhh-font-base) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    transition: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.hhh-layout button:hover,
.hhh-layout button:focus,
.hhh-layout [type="button"]:hover,
.hhh-layout [type="button"]:focus,
.hhh-layout [type="submit"]:hover,
.hhh-layout [type="submit"]:focus,
.hhh-cart-overlay button:hover,
.hhh-cart-overlay button:focus,
.hhh-about-overlay button:hover,
.hhh-about-overlay button:focus,
.hhh-member-overlay button:hover,
.hhh-member-overlay button:focus,
.hhh-mobler-overlay button:hover,
.hhh-mobler-overlay button:focus {
    background-color: transparent !important;
    color: var(--hhh-dark) !important;
    text-decoration: none !important;
}

/* Restore focus indicator for keyboard users — overrides outline: none !important above */
.hhh-layout button:focus-visible,
.hhh-layout [type="button"]:focus-visible,
.hhh-layout [type="submit"]:focus-visible,
.hhh-cart-overlay button:focus-visible,
.hhh-cart-overlay [type="button"]:focus-visible,
.hhh-about-overlay button:focus-visible,
.hhh-about-overlay [type="button"]:focus-visible,
.hhh-member-overlay button:focus-visible,
.hhh-member-overlay [type="button"]:focus-visible,
.hhh-mobler-overlay button:focus-visible,
.hhh-mobler-overlay [type="button"]:focus-visible {
    outline: 2px solid var(--hhh-moss) !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   2. GLOBAL BAKGRUNN
   ========================================================================== */

html, body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    background-color: var(--hhh-cream) !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAAC0lEQVQI12NgAAIABQABNjN9GQAAAABJREFUeJztzDEOgDAQBdHP/S+N3YbCkZAoKBgsdr3P1Jn5AQBvyqnOOTVJkqRIkgAAAA==') 0 0, none;
}

/* Custom cursor: crosshair that inverts content along each line */
.hhh-cursor {
    position: fixed;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition: opacity 0.15s ease;
}

.hhh-cursor::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    transform: translateX(-50%);
    backdrop-filter: invert(1) grayscale(1);
    -webkit-backdrop-filter: invert(1) grayscale(1);
}

.hhh-cursor::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    transform: translateY(-50%);
    backdrop-filter: invert(1) grayscale(1);
    -webkit-backdrop-filter: invert(1) grayscale(1);
}

.hhh-cursor.is-hidden {
    opacity: 0;
}

/* Hide native cursor on all elements — transparent pixel fallback for all browsers */
*, *::before, *::after {
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAAC0lEQVQI12NgAAIABQABNjN9GQAAAABJREFUeJztzDEOgDAQBdHP/S+N3YbCkZAoKBgsdr3P1Jn5AQBvyqnOOTVJkqRIkgAAAA==') 0 0, none !important;
}

/* ==========================================================================
   3. TO-KOLONNE LAYOUT (100vh)
   ========================================================================== */

/* Hide Elementor content on custom template pages */
.page-template-page-produkter .elementor,
.page-template-page-produkter .elementor-section-wrap,
.page-template-page-produkter #content,
.page-template-page-produkter .site-main > .elementor,
.home .elementor,
.home .elementor-section-wrap,
.home #content,
.home .site-main > .elementor,
.page-template-page-om-heia-hage-handverkslag .elementor,
.page-template-page-om-heia-hage-handverkslag .elementor-section-wrap,
.page-template-page-om-heia-hage-handverkslag #content,
.page-template-page-om-heia-hage-handverkslag .site-main > .elementor {
    display: none !important;
}

.hhh-layout {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 100;
}

.hhh-left-column {
    width: 50%;
    min-width: 280px;
    height: 100vh;
    background-color: var(--hhh-cream);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4vh var(--hhh-gap);
    box-sizing: border-box;
}

.hhh-right-column {
    flex: 1;
    height: 100vh;
    background-color: var(--hhh-cream-dark);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   4. NAVIGASJON (venstre kolonne)
   ========================================================================== */

.hhh-top-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1em 2em;
}

.hhh-top-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hhh-top-menu li::before,
.hhh-top-menu li::marker {
    content: none;
    display: none;
}

.hhh-top-menu a {
    color: var(--hhh-dark);
    text-decoration: none;
    font-size: var(--hhh-font-base);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    transition: color 0.3s ease;
}

.hhh-top-menu a:hover {
    color: var(--hhh-dark);
}

/* Bottom right footer in right column */
.hhh-right-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 var(--hhh-gap) 4vh var(--hhh-gap);
    flex-shrink: 0;
}

.hhh-right-footer a {
    color: var(--hhh-dark);
    text-decoration: none;
    font-size: var(--hhh-font-base);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    transition: color 0.3s ease;
}

/* Bottom text - base styles (layout overridden in section 6b) */
.hhh-bottom-text a {
    color: var(--hhh-dark);
    text-decoration: none;
    font-size: var(--hhh-font-base);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    transition: color 0.3s ease;
}

/* ==========================================================================
   5. HANDLEKURV OG MIN SIDE (høyre kolonne - topp)
   ========================================================================== */

.hhh-right-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2em;
    padding: 4vh var(--hhh-gap) 0 var(--hhh-gap);
    flex-shrink: 0;
}

.hhh-right-header .hhh-account-link,
.hhh-right-header .hhh-cart-button {
    background: transparent;
    border: none;
    color: var(--hhh-dark);
    font-size: var(--hhh-font-base);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.3s ease;
    padding: 0;
    margin: 0;
    line-height: 1;
    font-family: inherit;
}

.hhh-right-header .hhh-account-link:hover,
.hhh-right-header .hhh-cart-button:hover {
    color: var(--hhh-dark);
}

.hhh-right-header .hhh-cart-button {
    display: flex !important;
    align-items: center;
    gap: 0.25em;
}

/* ==========================================================================
   6. PRODUKTVISNING (grid)
   ========================================================================== */

.hhh-product-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4vh 4vw;
    padding: 6vh 6vw 8vh 6vw;
    align-content: center;
    overflow: hidden;
}

.hhh-product-item {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: none;
    padding: 30px;
    position: relative;
}

.hhh-product-item img {
    border-radius: 50%;
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.3s ease;
    pointer-events: none;
}

.hhh-product-item:hover img {
    transform: none;
    filter: none;
}

/* Hidden label (read by JS for cursor text) */
.hhh-product-label {
    display: none;
}

/* Floating product name that follows cursor */
.hhh-cursor-label {
    position: fixed;
    pointer-events: none;
    z-index: 10001;
    color: #FFFFFF;
    font-size: var(--hhh-font-base);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
    transform: translateX(-50%);
}

.hhh-cursor-label.is-visible {
    opacity: 1;
}

/* Category navigation in left column */
.hhh-category-item {
    position: relative;
    margin-bottom: 0.15em;
}

.hhh-category-name {
    display: block;
    font-size: var(--hhh-font-base);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    color: var(--hhh-dark);
    line-height: 1.6;
}

.hhh-category-products {
    list-style: none;
    margin: 0;
    padding: 0.3em 0 0 0;
    display: none;
}

.hhh-category-item:hover .hhh-category-products {
    display: block;
}

.hhh-category-products li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hhh-category-product-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--hhh-dark);
    font-size: var(--hhh-font-base);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    line-height: 1.8;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.hhh-category-product-btn:hover {
    opacity: 1;
}

/* Product detail area — pushed to bottom */
#product-display-area {
    flex: 1;
    padding: 0 0 6vh 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.dynamic-product-display {
    width: 100%;
    padding-bottom: 1cm;
}

.product-header-row {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
    margin-bottom: 2rem;
}

.product-image-box {
    flex-shrink: 0;
    overflow: hidden;
}

.product-main-image {
    width: 120px;
    height: 120px;
    object-fit: cover;
}

.product-info-box {
    flex: 1;
    display: flex;
    align-items: center;
}

.product-title {
    font-size: clamp(28px, 4vw, 42px);
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--hhh-dark);
    margin: 0;
    font-weight: 700;
    line-height: 1.1;
}

.product-price {
    color: var(--hhh-dark);
    font-size: var(--hhh-font-base);
    letter-spacing: 2px;
    font-weight: 700;
}

/* All WooCommerce prices bold */
.woocommerce-Price-amount,
.amount {
    font-weight: 700;
}

.product-description {
    color: var(--hhh-dark);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: var(--hhh-font-base);
}

.product-read-more {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}

.product-actions {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.product-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

/* Quantity selector — clean inline style */
.product-qty-wrapper {
    display: flex;
    align-items: baseline;
    gap: 1em;
}

.product-qty-label {
    color: var(--hhh-dark);
    font-size: var(--hhh-font-base);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
}

.product-qty-btn {
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--hhh-dark);
    font-size: var(--hhh-font-base);
    padding: 0;
    font-family: inherit;
    letter-spacing: 2px;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
}

.product-qty-btn:focus,
.product-qty-btn:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.product-qty-value {
    color: var(--hhh-dark);
    font-size: var(--hhh-font-base);
    letter-spacing: 2px;
    min-width: 1.5em;
    text-align: center;
}

/* All buttons: menu-style (no background) */
.add-to-cart-btn {
    background: none;
    border: none;
    color: var(--hhh-dark);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: var(--hhh-font-base);
    font-weight: 400;
    font-family: inherit;
    padding: 0;
    align-self: flex-end;
}

.add-to-cart-btn:hover,
.add-to-cart-btn:focus,
.add-to-cart-btn:active {
    background: none !important;
    color: var(--hhh-dark) !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.add-to-cart-btn.success {
    color: var(--hhh-moss) !important;
}

.add-to-cart-btn.loading {
    opacity: 0.5;
}

/* ==========================================================================
   6b. FORSIDE-SPESIFIKK STYLING
   ========================================================================== */

/* Cream/light background for the right column on front page */
.hhh-right-column--cream {
    background-color: var(--hhh-cream-dark);
}

.hhh-right-column--cream .hhh-right-header .hhh-account-link:hover,
.hhh-right-column--cream .hhh-right-header .hhh-cart-button:hover {
    color: var(--hhh-dark);
}

/* Om oss page: text content in right column */
.hhh-about-content {
    margin-top: auto;
    padding: 0 var(--hhh-gap) 1cm var(--hhh-gap);
}

.hhh-about-title {
    font-size: clamp(28px, 4vw, 42px);
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--hhh-dark);
    font-weight: 700;
    margin: 0 0 2rem 0;
}

.hhh-about-text {
    color: var(--hhh-dark);
    font-size: var(--hhh-font-base);
    line-height: 1.7;
    letter-spacing: 0.5px;
}

.hhh-about-text p {
    margin: 0 0 1em 0;
}

.hhh-about-footer {
    margin-top: auto;
    padding-top: 2rem;
    color: var(--hhh-dark);
    font-size: var(--hhh-font-sm);
    letter-spacing: 1px;
}

.hhh-about-footer p {
    margin: 0;
    line-height: 1.6;
}

/* Logo in the left column — lower half, top aligns with right-column heading */
.hhh-logo {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex: 1;
    padding-bottom: 13vh;
}

.hhh-logo a {
    display: block;
}

.hhh-logo img {
    max-width: 480px;
    width: 100%;
    height: auto;
}

/* Front page top nav: two links, left and right */
.hhh-front-nav {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.hhh-front-nav a {
    color: var(--hhh-dark);
    text-decoration: none;
    font-size: var(--hhh-font-base);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    transition: color 0.3s ease;
}

.hhh-front-nav a:hover {
    color: var(--hhh-dark);
}

/* Bottom text: two links on same line (shared across pages) */
.hhh-bottom-text {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 1em;
}

.hhh-bottom-text a:hover {
    color: var(--hhh-dark);
}

/* ==========================================================================
   7. FLYTENDE PRODUKT-ANIMASJONER
   ========================================================================== */

@keyframes float1 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(10px, -10px); }
}

@keyframes float2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-10px, 10px); }
}

@keyframes float3 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(8px, 8px); }
}

@keyframes float4 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-8px, -8px); }
}

.hhh-product-item:nth-child(1) { animation: float1 30s ease-in-out infinite; }
.hhh-product-item:nth-child(2) { animation: float2 35s ease-in-out infinite; }
.hhh-product-item:nth-child(3) { animation: float3 32s ease-in-out infinite; }
.hhh-product-item:nth-child(4) { animation: float4 28s ease-in-out infinite; }
.hhh-product-item:nth-child(5) { animation: float1 33s ease-in-out infinite; }
.hhh-product-item:nth-child(6) { animation: float2 29s ease-in-out infinite; }

/* ==========================================================================
   8. HANDLEKURV OVERLAY
   ========================================================================== */

.hhh-overlay-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9997;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.hhh-overlay-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

.hhh-cart-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    height: 100vh;
    background: var(--hhh-cream);
    z-index: 9998;
    transform: translateX(100%);
    transition: transform 0.4s ease;
    padding: var(--hhh-gap);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.hhh-cart-overlay.is-open {
    transform: translateX(0);
}

.cart-overlay-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
    min-height: 2em;
}

.cart-close-button,
.about-close-button,
.member-close-button,
.mobler-close-button {
    position: absolute;
    top: 4vh;
    right: var(--hhh-gap);
    left: auto;
    background: none;
    border: none;
    padding: 0;
    font-size: var(--hhh-font-base);
    font-family: inherit;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--hhh-dark);
    cursor: pointer;
}

.cart-overlay-content {
    flex: 1;
    overflow-y: auto;
}

.cart-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cart-item {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 1rem;
    padding-bottom: 1rem;
}

.cart-item-image {
    width: 70px;
    height: 70px;
    object-fit: cover;
}

.cart-item-title {
    margin: 0 0 0.5rem 0;
    font-size: var(--hhh-font-base);
}

.cart-item-quantity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.qty-btn {
    background: none;
    border: none;
    color: var(--hhh-dark);
    font-size: var(--hhh-font-base);
    font-family: inherit;
    padding: 0 0.35em;
    cursor: pointer;
    line-height: 1;
}

.qty-input {
    width: 2em;
    text-align: center;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.25);
    background: transparent;
    color: var(--hhh-dark);
    font-size: var(--hhh-font-base);
    font-family: inherit;
    padding: 0;
}

.cart-item-remove {
    background: none;
    border: none;
    color: var(--hhh-dark);
    text-decoration: underline;
    cursor: pointer;
    font-size: var(--hhh-font-sm);
    padding: 0;
}

.cart-footer {
    margin-top: auto;
    padding-top: 1rem;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-size: var(--hhh-font-lg);
}

.checkout-button {
    background: none;
    border: none;
    color: var(--hhh-dark);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: var(--hhh-font-base);
    font-weight: 400;
    font-family: inherit;
    padding: 0;
    cursor: pointer;
    display: block;
    text-align: left;
    text-decoration: none;
}

.checkout-button:hover {
    color: var(--hhh-dark);
}

.cart-empty {
    text-align: center;
    padding: 2rem;
}

/* ==========================================================================
   8b. OM OSS OVERLAY (slide-in fra høyre)
   ========================================================================== */

.hhh-about-overlay,
.hhh-member-overlay,
.hhh-mobler-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    height: 100vh;
    background: var(--hhh-cream);
    z-index: 9998;
    transform: translateX(100%);
    transition: transform 0.4s ease;
    padding: var(--hhh-gap);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.hhh-about-overlay.is-open,
.hhh-member-overlay.is-open,
.hhh-mobler-overlay.is-open {
    transform: translateX(0);
}


.hhh-about-overlay-content,
.hhh-member-overlay-content,
.hhh-mobler-overlay-content {
    padding-bottom: 1cm;
}

.hhh-about-footer a,
.hhh-member-overlay-content .hhh-about-footer a {
    color: var(--hhh-dark);
    text-decoration: none;
}

.hhh-about-footer a:hover,
.hhh-member-overlay-content .hhh-about-footer a:hover {
    text-decoration: underline;
}

.continue-shopping {
    display: inline-block;
    color: var(--hhh-dark);
    text-decoration: underline;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
    margin-top: 1rem;
}

.continue-shopping:hover {
    color: var(--hhh-dark);
}

/* ==========================================================================
   8c. TILBAKE-KNAPP OG CHECKOUT I OVERLAY
   ========================================================================== */

/* Tilbake-knapp (vises når checkout er åpen) */
.cart-back-button {
    background: none;
    border: none;
    font-size: var(--hhh-font-base);
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    color: var(--hhh-dark);
    font-family: inherit;
    padding: 0;
    margin-right: auto;
}

.cart-back-button:hover,
.cart-back-button:focus {
    color: var(--hhh-dark);
    outline: none;
}

/* Checkout-iframe i cart-overlay */
.cart-overlay-content.has-iframe {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.checkout-frame {
    flex: 1;
    width: 100%;
    border: none;
    min-height: 0;
    display: block;
}

/* ==========================================================================
   8d. CHECKOUT FRAMED (lastes i iframe)
   ========================================================================== */

body.checkout-framed {
    background-color: var(--hhh-cream) !important;
    overflow-y: auto;
    height: auto;
    color: var(--hhh-dark);
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Bruk Roboto på alt innhold i kassen */
body.checkout-framed * {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Knapperestart for kasse-iframe — hello-biz setter rosa border/farge på alle knapper */
body.checkout-framed button,
body.checkout-framed [type="button"],
body.checkout-framed [type="submit"] {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--hhh-dark) !important;
    padding: 0 !important;
    font-weight: 400 !important;
    font-size: var(--hhh-font-base) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
}

body.checkout-framed button:hover,
body.checkout-framed [type="button"]:hover,
body.checkout-framed [type="submit"]:hover {
    background-color: transparent !important;
    color: var(--hhh-dark) !important;
}

/* Skjul nyhetsbrev- og markedsføringsfelt */
body.checkout-framed .woocommerce-marketing-optin-field,
body.checkout-framed #wc-marketing-optin-field,
body.checkout-framed .marketing-optin,
body.checkout-framed [id*="marketing_opt_in"],
body.checkout-framed [id*="newsletter"],
body.checkout-framed [id*="subscribe"],
body.checkout-framed [class*="newsletter"],
body.checkout-framed [class*="subscribe"],
body.checkout-framed [class*="marketing-optin"],
body.checkout-framed [class*="marketing_optin"] {
    display: none !important;
}

/* Skjul header, footer og admin-bar */
body.checkout-framed #site-header,
body.checkout-framed .site-header,
body.checkout-framed #site-footer,
body.checkout-framed .site-footer,
body.checkout-framed .elementor-location-header,
body.checkout-framed .elementor-location-footer,
body.checkout-framed #wpadminbar,
body.checkout-framed .admin-bar {
    display: none !important;
}

body.checkout-framed .site-content,
body.checkout-framed #content {
    padding: 0 !important;
    margin: 0 !important;
}

body.checkout-framed .woocommerce-checkout form.checkout {
    max-width: 100%;
    padding: 3vh var(--hhh-gap) 6vh var(--hhh-gap);
    margin: 0;
}

/* Skjul unødvendige seksjoner */
body.checkout-framed .woocommerce-form-coupon-toggle,
body.checkout-framed .checkout_coupon,
body.checkout-framed .woocommerce-form-login-toggle,
body.checkout-framed .woocommerce-form-login,
body.checkout-framed .woocommerce-privacy-policy-text,
body.checkout-framed .woocommerce-info,
body.checkout-framed #order_review_heading,
body.checkout-framed .woocommerce-checkout-review-order-table thead {
    display: none !important;
}

/* Overskrifter: samme stil som menylenker */
body.checkout-framed h3,
body.checkout-framed h3#billing_details {
    font-size: var(--hhh-font-base) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--hhh-dark) !important;
    margin: 2.5vh 0 1.5vh 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Etiketter */
body.checkout-framed .form-row label,
body.checkout-framed .woocommerce-checkout .form-row label {
    font-size: var(--hhh-font-sm) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--hhh-dark) !important;
    line-height: 2 !important;
}

/* Inputfelt: kun understrek, ingen boks */
body.checkout-framed input.input-text,
body.checkout-framed input[type="text"],
body.checkout-framed input[type="email"],
body.checkout-framed input[type="tel"],
body.checkout-framed input[type="password"],
body.checkout-framed textarea {
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.25) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0.3em 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--hhh-dark) !important;
    font-family: inherit !important;
    font-size: var(--hhh-font-base) !important;
    width: 100%;
}

body.checkout-framed input.input-text:focus,
body.checkout-framed input[type="text"]:focus,
body.checkout-framed input[type="email"]:focus,
body.checkout-framed input[type="tel"]:focus {
    border-bottom-color: var(--hhh-dark) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Select2 dropdown: kun understrek */
body.checkout-framed .select2-container .select2-selection--single,
body.checkout-framed .select2-container--default .select2-selection--single {
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.25) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    height: 2em !important;
    padding: 0 !important;
}

body.checkout-framed .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    line-height: 2em !important;
    color: var(--hhh-dark) !important;
    font-size: var(--hhh-font-base) !important;
}

body.checkout-framed .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2em !important;
}

/* Fjern alle tabellkanter og skillelinjer */
body.checkout-framed table,
body.checkout-framed table th,
body.checkout-framed table td,
body.checkout-framed .shop_table,
body.checkout-framed .shop_table th,
body.checkout-framed .shop_table td,
body.checkout-framed .woocommerce-checkout-review-order-table th,
body.checkout-framed .woocommerce-checkout-review-order-table td {
    border: none !important;
    background: transparent !important;
    padding: 0.2rem 0 !important;
    font-size: var(--hhh-font-base) !important;
    font-weight: 400 !important;
    color: var(--hhh-dark) !important;
}

body.checkout-framed table th {
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: var(--hhh-font-sm) !important;
}

/* Betalingsseksjon */
body.checkout-framed #payment {
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
}

body.checkout-framed #payment .payment_methods {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

body.checkout-framed #payment .payment_methods li {
    border: none !important;
    list-style: none !important;
}

body.checkout-framed #payment .payment_methods label {
    font-size: var(--hhh-font-base) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-weight: 400 !important;
    color: var(--hhh-dark) !important;
}

body.checkout-framed #payment .payment_box {
    background: transparent !important;
    color: var(--hhh-dark) !important;
    padding: 0.5em 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Fullfør bestilling-knapp: tekststil som resten */
body.checkout-framed #payment #place_order {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--hhh-dark) !important;
    font-family: inherit !important;
    font-size: var(--hhh-font-base) !important;
    font-weight: 400 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 0 !important;
    cursor: pointer !important;
    width: auto !important;
    display: block !important;
    margin-top: 2vh !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Valideringsfarge: mykere rød for feil */
body.checkout-framed .woocommerce-invalid input.input-text {
    border-bottom-color: var(--hhh-brown) !important;
}

body.checkout-framed .woocommerce-checkout-review-order {
    margin-top: 2vh;
}

/* ==========================================================================
   9. MOBIL RESPONSIV
   ========================================================================== */

/* Hide custom cursor on touch/pointer-coarse devices (phones, tablets) */
@media (hover: none) and (pointer: coarse) {
    *, *::before, *::after {
        cursor: auto !important;
    }
    .hhh-cursor {
        display: none !important;
    }
}

@media (max-width: 768px) {
    html,
    body {
        height: auto;
        overflow: auto;
    }

    .hhh-layout {
        flex-direction: column;
        height: auto;
        overflow: auto;
    }

    .hhh-left-column {
        width: 100%;
        min-width: auto;
        height: auto;
        padding: 2rem var(--hhh-gap);
    }

    .hhh-right-column {
        height: auto;
        min-height: 70vh;
    }

    .hhh-right-header {
        padding: 2rem var(--hhh-gap) 0 var(--hhh-gap);
    }

    .hhh-right-header .hhh-account-link,
    .hhh-right-header .hhh-cart-button {
        font-size: var(--hhh-font-sm);
    }

    .hhh-product-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 4vh 15px;
        overflow: visible;
    }

    .hhh-product-item {
        animation: none !important;
        padding: 10px;
        cursor: pointer;
    }

    .hhh-cursor-label {
        display: none !important;
    }

    .hhh-logo img {
        max-width: 180px;
    }

    .hhh-product-item img {
        max-width: 150px;
    }

    .hhh-cart-overlay {
        width: 100%;
    }

    .checkout-frame {
        min-height: 80vh;
    }

    .product-header-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .product-main-image {
        width: 150px;
        height: 150px;
    }

    .product-actions {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .hhh-right-header .hhh-account-link {
        display: none;
    }

    .hhh-product-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   10. WOOCOMMERCE CHECKOUT
   ========================================================================== */

.woocommerce-checkout {
    background-color: var(--hhh-cream);
}

.woocommerce-checkout form.checkout {
    max-width: 960px;
    margin: 0 auto 4rem auto;
    padding: 2rem var(--hhh-gap);
    box-sizing: border-box;
}

.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3 {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: var(--hhh-font-base);
}

.woocommerce-checkout table.shop_table {
    width: 100%;
    font-size: var(--hhh-font-base);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
    padding: 0.5rem 0;
}

.woocommerce-checkout .form-row label {
    font-size: var(--hhh-font-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.woocommerce-checkout #place_order {
    width: 100%;
    padding: 1rem;
    background: var(--hhh-dark);
    color: #ffffff;
    border: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: var(--hhh-font-base);
    cursor: pointer;
}

.woocommerce-checkout #place_order:hover {
    background: var(--hhh-dark);
    color: #ffffff;
}

/* ==========================================================================
   11. TILGJENGELIGHET
   ========================================================================== */

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

*:focus-visible {
    outline: 2px solid var(--hhh-moss);
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}