/*
Theme Name:  Friztyadv Child Theme
Description: Child theme for the Friztyadv theme
Author:      ThemetechMount
Author URI:  https://www.themetechmount.com/
Template:    friztyadv
Version:     0.1
Tags:        light, white, two-columns, three-columns, four-columns, right-sidebar, left-sidebar, responsive, retina
*/


/* NOTE: Main theme's style.css file is already added in head tag. /*

/* =Theme customization starts here
-------------------------------------------------------------- */

/* ==========================================================================
   HUNDDELUX.NO — Design System
   Appended to child theme stylesheet; loaded by functions.php enqueue.
   All rules scoped to avoid fighting the parent theme (frizty-advanced).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
    --hd-primary:      #FCA120;
    --hd-primary-dark: #E07D0E;
    --hd-ink:          #1A1A1A;
    --hd-text:         #3A3A3A;
    --hd-surface:      #FFFFFF;
    --hd-surface-warm: #F6F4F0;
    --hd-border:       #ECE7DF;
    --hd-muted:        #7A7A7A;
    --hd-radius:       12px;
    --hd-radius-btn:   8px;
    --hd-transition:   0.22s ease;
}


/* --------------------------------------------------------------------------
   2. Category Cards — [hunddelux_categories] shortcode output
   -------------------------------------------------------------------------- */
.hd-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.hd-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    background: var(--hd-surface);
    border: 0.5px solid var(--hd-border);
    border-radius: var(--hd-radius);
    padding: 24px 16px;
    text-align: center;
    text-decoration: none;
    color: var(--hd-text);
    transition:
        transform var(--hd-transition),
        border-color var(--hd-transition),
        box-shadow var(--hd-transition);
}

.hd-cat-card:hover,
.hd-cat-card:focus {
    transform: translateY(-4px);
    border-color: var(--hd-primary);
    box-shadow: 0 8px 24px rgba(252, 161, 32, 0.15);
    color: var(--hd-text);
    text-decoration: none;
    outline: none;
}

.hd-cat-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.hd-cat-card__icon {
    font-size: 32px;
    color: var(--hd-primary);
    line-height: 1;
    display: block;
}

.hd-cat-card__thumb {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.hd-cat-card:hover .hd-cat-card__thumb {
    filter: drop-shadow(0 0 5px rgba(252, 161, 32, 0.35));
}

.hd-cat-card__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--hd-ink);
    line-height: 1.3;
    margin: 0;
}

.hd-cat-card__count {
    font-size: 13px;
    color: var(--hd-muted);
    margin: 0;
}


/* --------------------------------------------------------------------------
   3. Product Loop Cards
   Scoped to standard WooCommerce markup; does not touch single-product,
   cart, checkout, or account pages.
   -------------------------------------------------------------------------- */
.main-holder ul.products li.product,
.woocommerce-page:not(.single-product):not(.woocommerce-cart):not(.woocommerce-checkout) ul.products li.product {
    background: var(--hd-surface) !important;
    border: 0.5px solid var(--hd-border) !important;
    border-radius: var(--hd-radius) !important;
    padding: 16px !important;
    transition: transform var(--hd-transition), box-shadow var(--hd-transition) !important;
    overflow: hidden;
}

.main-holder ul.products li.product:hover,
.woocommerce-page:not(.single-product):not(.woocommerce-cart):not(.woocommerce-checkout) ul.products li.product:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Product image */
.main-holder ul.products li.product .woocommerce-loop-product__link img,
.woocommerce-page ul.products li.product .woocommerce-loop-product__link img {
    display: block;
    margin: 0 auto 12px;
    border-radius: 8px;
}

/* Product title — clamp to 2 lines */
.main-holder ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--hd-ink) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.4 !important;
    min-height: 2.8em !important;
    margin-bottom: 8px !important;
}

/* Price */
.main-holder ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
    font-weight: 700 !important;
    color: var(--hd-ink) !important;
    font-size: 16px !important;
}


/* --------------------------------------------------------------------------
   4. Button Unification
   Primary = orange (#FCA120), dark brown text for contrast.
   Frizty already sets letter-spacing: 1px via dynamic CSS; we cap it to 0.5px.
   Secondary / dark buttons keep black background + white text.
   -------------------------------------------------------------------------- */

/* Primary WooCommerce + frizty buttons */
.woocommerce a.button:not(.button-secondary),
.woocommerce button.button:not(.button-secondary),
.woocommerce input.button:not(.button-secondary),
.woocommerce-page a.button:not(.button-secondary),
.woocommerce-page button.button:not(.button-secondary),
.woocommerce-page input.button:not(.button-secondary),
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce-page a.button.alt,
ul.products li.product .button,
ul.products li.product .add_to_cart_button {
    background-color: var(--hd-primary) !important;
    color: #412402 !important;
    border-color: var(--hd-primary) !important;
    border-radius: var(--hd-radius-btn) !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
    transition: background-color var(--hd-transition), border-color var(--hd-transition) !important;
}

.woocommerce a.button:not(.button-secondary):hover,
.woocommerce button.button:not(.button-secondary):hover,
.woocommerce input.button:not(.button-secondary):hover,
.woocommerce-page a.button:not(.button-secondary):hover,
.woocommerce-page button.button:not(.button-secondary):hover,
.woocommerce-page input.button:not(.button-secondary):hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce-page a.button.alt:hover,
ul.products li.product .button:hover,
ul.products li.product .add_to_cart_button:hover {
    background-color: var(--hd-primary-dark) !important;
    border-color: var(--hd-primary-dark) !important;
    color: #412402 !important;
}

/* Secondary / dark buttons — preserve black + white */
.woocommerce a.button.button-secondary,
.woocommerce-page a.button.button-secondary,
.prt-btn.btn-darkgrey,
.woocommerce-page a.button.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    background-color: var(--hd-ink) !important;
    color: #ffffff !important;
    border-color: var(--hd-ink) !important;
    border-radius: var(--hd-radius-btn) !important;
}

.woocommerce a.button.button-secondary:hover,
.woocommerce-page a.button.button-secondary:hover,
.prt-btn.btn-darkgrey:hover,
.woocommerce-page a.button.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: #333333 !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}


/* --------------------------------------------------------------------------
   5. Hide Ukategorisert Everywhere
   -------------------------------------------------------------------------- */
.product-category.cat-item-15,
li.cat-item-15,
.widget_product_categories li.cat-item-15,
a[href*="/product-category/ukategorisert"] {
    display: none !important;
}

/* Temporary: hide the Instagram section until Smash Balloon (or equivalent)
   feed plugin is installed and connected. The Elementor section (data-id 7bfad4c)
   contains only a broken [instagram-feed feed=1] shortcode that renders as
   literal text. Remove this rule once a real feed is active. */
.elementor-element-7bfad4c {
    display: none !important;
}


/* ==========================================================================
   Shop / Category Page Visual Fixes
   ========================================================================== */

/* Fix A — Hide the empty "All Products" carousel on /shop-2/ (page 4814).
   Widget 0c9fc22 is a prt_product_element configured as a carousel; it renders
   .preyantechnosys-boxes-inner:empty, leaving a beige bar above the sidebar
   because its Elementor column (fcd7c61) has background-color #F6F4F0.
   This Elementor widget ID is unique to page 4814. */
.elementor-element-0c9fc22 {
    display: none !important;
}

/* Fix B — Unify sidebar background to transparent on both page types.
   Shop (/shop-2/): sidebar sits inside Elementor container fcd7c61 which
   carries background-color #F6F4F0 from its Elementor settings.
   Category pages: sidebar is <aside id="sidebar-left"> with no background.
   Setting both to transparent makes them consistent; warm #F6F4F0 is
   reserved for banner/hero sections only, not the utility sidebar. */
#sidebar-left.sidebar,
.elementor-element-fcd7c61 {
    background-color: transparent !important;
}

/* Fix C — Normalize the result-count + ordering bar across page types.
   Shop page: .woocommerce-result-count lives inside .woocommerce.columns-3
   (shortcode wrapper). Category page: it lives inside .preyantechnosys-products.
   Both wrappers can pick up an inherited or theme-set background; force
   transparent so the bar sits cleanly on the page background. */
.woocommerce-result-count,
.woocommerce-ordering {
    background: transparent !important;
    margin-top: 0;
    margin-bottom: 20px;
}

.woocommerce.columns-3 {
    background: transparent !important;
}

/* Fix D — Neutralise the theme rule that pulls the first Elementor section
   83 px upward (main.css L11304). That rule was designed to overlap an
   Elementor hero below it; our hero is now the RevSlider inside the header,
   so the pull-up has nothing to absorb it and causes cc229f7 to ride over
   the slider image. Scope to cc229f7 only so other pages are unaffected. */
.elementor-element-cc229f7.elementor-top-section {
    margin-top: 0 !important;
}

/* Fix E — Product card titles: override theme 1-line clamp (main.css L15604)
   with a 2-line clamp. PHP the_title filter (functions.php L175) still caps at
   60 chars; this at least uses both lines fully and keeps the grid aligned. */
.main-holder .site-content ul.products li.product .woocommerce-loop-product__title,
.preyantechnosys-boxes-product .prt-box-col-wrapper .product .woocommerce-loop-product__title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.6em;
    line-height: 1.3;
    font-size: 14px;
    font-weight: 500;
}

/* Fix F — Single product title: remove any CSS-level clamp, set readable size.
   PHP truncation (functions.php L175) still applies; full fix via mu-plugin next. */
.single-product .product_title.entry-title {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    white-space: normal !important;
    font-size: 26px;
    line-height: 1.25;
}
@media (max-width: 600px) {
    .single-product .product_title.entry-title { font-size: 20px; }
}

/* ============================================================
   MOBILE CATEGORY MENU — clean accordion (max-width 991px)
   Selectors confirmed from live HTML and theme JS (functions.js):
   Panel: #site-header-menu #site-navigation div.nav-menu > ul
   slides in from right when nav has class toggled-on.
   Toggle span: .righticon (appended by JS to li:has(ul))
   icon classes: prt-friztyadv-icon-angle-down / angle-up
   Sub-menu hidden: max-height:0; open state: ul.sub-menu.open
   ============================================================ */
@media (max-width: 991px) {

    /* Slide-in panel: orange top border, clean bg */
    #site-header-menu #site-navigation div.nav-menu > ul {
        border-top: none !important; /* open state only — see .toggled-on rule below */
        padding: 0 !important;
        background: #ffffff !important;
    }

    /* Top-level items: rows with divider */
    #site-header-menu #site-navigation div.nav-menu > ul > li {
        border-bottom: 1px solid #ECE7DF !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }
    #site-header-menu #site-navigation div.nav-menu > ul > li:last-child {
        border-bottom: none !important;
    }

    /* Top-level links: bold, ink, full-width tap target (52px) */
    #site-header-menu #site-navigation div.nav-menu > ul > li > a {
        display: flex !important;
        align-items: center !important;
        min-height: 52px !important;
        padding: 14px 56px 14px 20px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #1A1A1A !important;
        border-left: 3px solid transparent !important;
        transition: color 0.2s, border-color 0.2s !important;
    }
    #site-header-menu #site-navigation div.nav-menu > ul > li > a:hover {
        color: #FCA120 !important;
        border-left-color: #FCA120 !important;
    }

    /* Toggle span: orange, right-aligned, full-height tap area */
    #site-header-menu #site-navigation div.nav-menu > ul > li .righticon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        width: 52px !important;
        min-height: 52px !important;
        height: 100% !important;
        cursor: pointer !important;
        border-left: 1px solid #ECE7DF !important;
        z-index: 2 !important;
    }
    #site-header-menu #site-navigation div.nav-menu > ul > li .righticon i {
        color: #FCA120 !important;
        font-size: 13px !important;
        transition: transform 0.25s ease !important;
    }
    #site-header-menu #site-navigation div.nav-menu > ul > li .righticon i.prt-friztyadv-icon-angle-up {
        transform: rotate(180deg) !important;
    }

    /* Sub-menu panel: warm off-white, smooth reveal */
    #site-header-menu #site-navigation div.nav-menu > ul > li > ul.sub-menu {
        overflow: hidden !important;
        max-height: 0 !important;
        transition: max-height 0.3s ease !important;
        background: #F9F7F4 !important;
        border-top: 1px solid #ECE7DF !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    #site-header-menu #site-navigation div.nav-menu > ul > li > ul.sub-menu.open {
        max-height: 2000px !important;
        
    }

    /* Sub-items: indented, 44px min touch target */
    #site-header-menu #site-navigation div.nav-menu > ul > li > ul.sub-menu > li {
        border-bottom: 1px solid #ECE7DF !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #site-header-menu #site-navigation div.nav-menu > ul > li > ul.sub-menu > li:last-child {
        border-bottom: none !important;
    }
    #site-header-menu #site-navigation div.nav-menu > ul > li > ul.sub-menu > li > a {
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important;
        padding: 11px 20px 11px 32px !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #555555 !important;
        border-left: 3px solid transparent !important;
        transition: color 0.2s, background 0.2s, border-color 0.2s !important;
    }
    #site-header-menu #site-navigation div.nav-menu > ul > li > ul.sub-menu > li > a:hover,
    #site-header-menu #site-navigation div.nav-menu > ul > li > ul.sub-menu > li.current-menu-item > a {
        color: #FCA120 !important;
        background: rgba(252,161,32,0.06) !important;
        border-left-color: #FCA120 !important;
    }
}

/* ── Single product: hide duplicate titlebar heading, keep breadcrumb ── */
body.single-product .prt-titlebar .entry-title-wrapper {
    display: none !important;
}

/* ── Mobile menu unification: one hamburger ── */
/* Desktop: hide the injected Produktkategorier item — vertical menu handles categories */
@media (min-width: 992px) {
    .hd-mobile-cats { display: none !important; }
}
/* Mobile: hide the left categories hamburger — categories now live inside the main menu */
@media (max-width: 991px) {
    .verticalmenu-wrapper { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   SINGLE PRODUCT — compact breadcrumb titlebar on mobile
   Hides entry-title-wrapper (done above); reduces padding so the
   remaining breadcrumb-only strip is tight, not full-height.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    body.single-product .prt-titlebar-wrapper {
        min-height: 0 !important;
    }
    body.single-product .prt-titlebar-inner-wrapper {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    body.single-product .prt-titlebar-main {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    body.single-product .prt-titlebar .breadcrumb-wrapper,
    body.single-product .prt-titlebar .breadcrumb-wrapper a {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   FIX 1 — Full-screen mobile menu overlay
   The theme shows nav-menu by toggling max-height on .toggled-on.
   We lift div.nav-menu to position:fixed so it covers the full
   viewport. The close button is re-fixed above the overlay.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    /* Full-viewport white sheet when menu is open */
    #site-header-menu #site-navigation.toggled-on .mainmenu-wrapper div.nav-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: #ffffff !important;
        z-index: 1050 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 72px 0 32px !important;
    }
    /* Remove max-height animation constraint inside the fixed sheet */
    #site-header-menu #site-navigation.toggled-on .mainmenu-wrapper div.nav-menu > ul {
        max-height: none !important;
        overflow: visible !important;
    }
    /* Lift close button above the overlay sheet */
    #site-header-menu #site-navigation.toggled-on .menu-toggle {
        position: fixed !important;
        top: 20px !important;
        right: 16px !important;
        z-index: 1060 !important;
        background: transparent !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   FIX 2 — Clean Scandinavian mobile menu design
   Hierarchy: top-level bold → Hund/Katt semi-bold → sub-cats light.
   Consistent left padding tiers: 16px → 24px → 36px.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    /* Reset theme's 15px sub-menu indent */
    #site-header-menu #site-navigation .mainmenu-wrapper div.nav-menu ul ul {
        padding-left: 0 !important;
    }

    /* Top-level items: bold, ink, 48px tap target, divider */
    #site-header-menu #site-navigation .mainmenu-wrapper div.nav-menu > ul > li > a {
        display: flex !important;
        align-items: center !important;
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #1A1A1A !important;
        line-height: 1.3 !important;
        border-bottom: 1px solid #ECE7DF !important;
        height: auto !important;
    }
    /* Remove duplicate border from theme */
    #site-header-menu #site-navigation .mainmenu-wrapper div.nav-menu > ul > li {
        border-bottom: none !important;
    }

    /* Bedriftskunder sub-items (L2, non-category): 32px indent, lighter */
    #site-header-menu #site-navigation .mainmenu-wrapper div.nav-menu > ul > li:not(.hd-mobile-cats) > ul.sub-menu > li > a {
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important;
        padding: 10px 16px 10px 32px !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        color: #555555 !important;
        border-bottom: 1px solid #ECE7DF !important;
        line-height: 1.3 !important;
        height: auto !important;
    }

    /* Produktkategorier > Hund/Katt (L2): 24px indent, semi-bold group headers */
    #site-header-menu #site-navigation .mainmenu-wrapper div.nav-menu > ul > li.hd-mobile-cats > ul.sub-menu > li.hd-mobile-cats__top > a {
        display: flex !important;
        align-items: center !important;
        min-height: 48px !important;
        padding: 10px 16px 10px 24px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #1A1A1A !important;
        border-bottom: 1px solid #ECE7DF !important;
        line-height: 1.3 !important;
        height: auto !important;
    }

    /* Sub-cats under Hund/Katt (L3): 36px indent, muted, orange hover */
    #site-header-menu #site-navigation .mainmenu-wrapper div.nav-menu > ul > li.hd-mobile-cats > ul.sub-menu > li.hd-mobile-cats__top > ul.sub-menu > li > a {
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important;
        padding: 8px 16px 8px 36px !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        color: #666666 !important;
        border-bottom: 1px solid #ECE7DF !important;
        line-height: 1.3 !important;
        height: auto !important;
    }
    #site-header-menu #site-navigation .mainmenu-wrapper div.nav-menu > ul > li.hd-mobile-cats > ul.sub-menu li a:hover,
    #site-header-menu #site-navigation .mainmenu-wrapper div.nav-menu > ul > li.hd-mobile-cats > ul.sub-menu li.current-menu-item > a {
        color: #FCA120 !important;
        background: rgba(252, 161, 32, 0.05) !important;
    }

    /* Suppress theme's FontAwesome chevron on sub-items */
    #site-header-menu #site-navigation .mainmenu-wrapper div.nav-menu > ul li li a::before {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   FIX 3 — Header logo + search no-overlap on mobile
   Desktop CSS sets float:right on .headerlogo and .prt-header-icon;
   on mobile this causes the search icon to bleed over the logo cell.
   Force flex layout + clear floats so both fit without truncation.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    /* Flex row: logo stretches, nav icons shrink to fit */
    .site-header-main.prt-container-for-header {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }
    .site-branding.prt-wrap-cell {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: visible !important;
    }
    /* Clear float so logo image doesn't drift right */
    .headerlogo {
        float: none !important;
    }
    .headerlogo img.preyantechnosys-logo-img {
        max-height: 38px !important;
        width: auto !important;
        display: block !important;
    }
    /* Nav cell: don't grow — only needs room for icons + hamburger */
    #site-header-menu.site-header-menu.prt-wrap-cell {
        flex: 0 0 auto !important;
    }
    /* Clear floats on icons so they don't overflow left into logo */
    .prt-header-icons,
    .prt-header-icon {
        float: none !important;
    }
    #site-header-menu #site-navigation .prt-header-icons {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        vertical-align: middle !important;
        opacity: 1 !important; /* responsive.css sets opacity:0 at max-420px for infostack-one; restore */
    }
}

/* ── Single product breadcrumb: collapse table-cell layout on mobile ──
   .prt-titlebar-main is display:table-cell and stretches to the full
   table height (250px) even though its content is ~60px. Setting it
   to display:block lets it shrink to content height. */
@media (max-width: 991px) {
    body.single-product .prt-titlebar.entry-header,
    body.single-product .prt-titlebar-inner-wrapper {
        display: block !important;
        height: auto !important;
    }
    body.single-product .prt-titlebar-main {
        display: block !important;
        height: auto !important;
    }
}


/* ══════════════════════════════════════════════════════════════════
   B2B/B2C CONTACT BLOCK — mobile breathing room (max-width 767px)
   Inner section 06485ab: LEFT col 4a1b2c3 (card), RIGHT col 8b9c0d1 (CF7 form).
   On mobile Elementor stacks columns; these rules add vertical air
   above the block and between the card and the form. Desktop: untouched.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Space above the card (top of the 2-col contact section) */
    .elementor-element-06485ab {
        padding-top: 28px !important;
    }

    /* Gap between stacked card column and form column */
    .elementor-element-4a1b2c3 {
        margin-bottom: 32px !important;
    }
}


/* ══════════════════════════════════════════════════════════════════
   MOBILE MENU — Full-width overlay fix (max-width 991px)
   Root cause: dynamic CSS sets div.nav-menu > ul to
     position:absolute; width:350px; right:0; transform:translateX(100%)
   — a desktop off-canvas slide-in. On mobile the open state only resets
   transform:0 leaving a 350px panel on the right, ~70% wide on ~500px screens.
   Secondary cause: .toggled-on li { overflow:hidden } clips .righticon chevrons.
   Fix: reset ul geometry to fill the fixed overlay; unclip the chevron on top li.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

    /* 1. Reset slide-in geometry on the top-level ul — make it fill the overlay.
          Intentionally omit overflow/max-height so theme controls closed-state. */
    #site-header-menu #site-navigation .mainmenu-wrapper div.nav-menu > ul {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        transition: none !important; /* suppress 0.5s slide animation */
    }

    /* 2. Open state: ul is fully visible, no height cap */
    #site-header-menu #site-navigation.toggled-on .mainmenu-wrapper div.nav-menu > ul {
        overflow: visible !important;
        max-height: none !important;
    }

    /* 3. Top-level li: full-width, visible so .righticon is not clipped.
          Overrides inline-CSS .toggled-on li { overflow:hidden }. */
    #site-header-menu #site-navigation.toggled-on div.nav-menu > ul > li {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        position: relative !important;
    }

    /* 4. Sub-menu: keep overflow:hidden for max-height reveal animation */
    #site-header-menu #site-navigation div.nav-menu > ul > li > ul.sub-menu {
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 5. li > a: full-width flex row, right-pad to clear the 52px chevron */
    #site-header-menu #site-navigation.toggled-on div.nav-menu > ul > li > a {
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        padding-right: 64px !important;
    }

    /* 6. Chevron (.righticon): anchored to right edge of the full-width li */
    #site-header-menu #site-navigation.toggled-on div.nav-menu > ul > li > .righticon {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        top: 0 !important;
        width: 52px !important;
        min-height: 48px !important;
        height: 100% !important;
    }
}


/* ══════════════════════════════════════════════════════════════════
   FIX: Orange top border — scope to open overlay only.
   Previously on div.nav-menu > ul always (line ~354), causing a visible
   orange stripe across the header even when the menu was closed.
   Now only renders inside the open fixed overlay.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    #site-header-menu #site-navigation.toggled-on .mainmenu-wrapper div.nav-menu > ul {
        border-top: 3px solid #FCA120 !important;
    }
    /* Suppress sub-nav 0 solid #fca120 hairline (visible on Retina Safari) */
    #site-header-menu #site-navigation div.nav-menu > ul > li > ul {
        border-top: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   FIX: Produktkategorier (hd-mobile-cats) — chevron initial state.
   The sub-menu starts with class "open" (added in PHP mu-plugin) so
   it is expanded by default when the mobile overlay opens.
   JS appends angle-down as the initial icon; we need it to appear
   as ↑ (expanded) when the sub-menu is open. :has() detects this
   combined state without JavaScript.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    /* Initial open state: sub-menu.open + angle-down icon → rotate to appear ↑ */
    #site-header-menu #site-navigation div.nav-menu > ul > li.hd-mobile-cats:has(> ul.sub-menu.open) > .righticon i.prt-friztyadv-icon-angle-down {
        transform: rotate(180deg) !important;
    }
}


/* ══════════════════════════════════════════════════════════════════
   B2B BOX — <details> collapsible banner on single product pages
   Replaces parent theme .b2b-banner (hidden below); no JS, no emoji.
   ══════════════════════════════════════════════════════════════════ */

/* Hide parent theme B2B banner — replaced by hd-b2b-box below */
.b2b-banner {
    display: none !important;
}

.hd-b2b-box {
    border: 1px solid #FCA120;
    border-radius: 8px;
    margin: 16px 0;
    background: #FFF9F0;
    overflow: hidden;
}

.hd-b2b-box > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--hd-ink);
    user-select: none;
    -webkit-user-select: none;
}

.hd-b2b-box > summary::-webkit-details-marker,
.hd-b2b-box > summary::marker {
    display: none;
}

.hd-b2b-chevron {
    flex-shrink: 0;
    color: #FCA120;
    transition: transform 0.2s ease;
}

.hd-b2b-box[open] .hd-b2b-chevron {
    transform: rotate(90deg);
}

.hd-b2b-body {
    padding: 0 16px 14px;
    border-top: 1px solid rgba(252,161,32,0.25);
}

.hd-b2b-body p {
    font-size: 13px;
    color: var(--hd-text);
    margin: 10px 0 8px;
}

.hd-b2b-body a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #FCA120;
    text-decoration: none;
}

.hd-b2b-body a:hover {
    color: var(--hd-primary-dark);
    text-decoration: underline;
}

/* Dagens Tilbud badge: brand orange override (parent theme sets #E30000) */
.about-discount {
    background-color: #FCA120;
}

/* ══════════════════════════════════════════════════════════════════
   SHOP / CATEGORY / TAG ARCHIVE — compact titlebar on mobile
   Mirrors the single-product treatment. Scoped to archive body
   classes so single-product (handled separately above) is untouched.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    body.post-type-archive-product .prt-titlebar-wrapper,
    body.tax-product_cat .prt-titlebar-wrapper,
    body.tax-product_tag .prt-titlebar-wrapper,
    body.woocommerce-shop .prt-titlebar-wrapper {
        min-height: 0 !important;
    }
    body.post-type-archive-product .prt-titlebar.entry-header,
    body.post-type-archive-product .prt-titlebar-inner-wrapper,
    body.tax-product_cat .prt-titlebar.entry-header,
    body.tax-product_cat .prt-titlebar-inner-wrapper,
    body.tax-product_tag .prt-titlebar.entry-header,
    body.tax-product_tag .prt-titlebar-inner-wrapper,
    body.woocommerce-shop .prt-titlebar.entry-header,
    body.woocommerce-shop .prt-titlebar-inner-wrapper {
        display: block !important;
        height: auto !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    body.post-type-archive-product .prt-titlebar-main,
    body.tax-product_cat .prt-titlebar-main,
    body.tax-product_tag .prt-titlebar-main,
    body.woocommerce-shop .prt-titlebar-main {
        display: block !important;
        height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    body.post-type-archive-product .prt-titlebar .breadcrumb-wrapper,
    body.post-type-archive-product .prt-titlebar .breadcrumb-wrapper a,
    body.tax-product_cat .prt-titlebar .breadcrumb-wrapper,
    body.tax-product_cat .prt-titlebar .breadcrumb-wrapper a,
    body.tax-product_tag .prt-titlebar .breadcrumb-wrapper,
    body.tax-product_tag .prt-titlebar .breadcrumb-wrapper a,
    body.woocommerce-shop .prt-titlebar .breadcrumb-wrapper,
    body.woocommerce-shop .prt-titlebar .breadcrumb-wrapper a {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    body.post-type-archive-product .prt-titlebar h1.entry-title,
    body.tax-product_cat .prt-titlebar h1.entry-title,
    body.tax-product_tag .prt-titlebar h1.entry-title,
    body.woocommerce-shop .prt-titlebar h1.entry-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
    }
}

/* Hide infostack contact/info bar on all pages except the front page */
body:not(.home) .header-bottomblock {
    display: none !important;
}

/* Dagens Tilbud banner — "Se Mer" text-link -> solid orange button.
   Scoped to widget 9202edb so no other buttons are affected. */
.elementor-element-9202edb .elementor-button {
    display: inline-block !important;
    background: #FCA120 !important;
    color: #1A1A1A !important;
    padding: 12px 28px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    letter-spacing: 0.5px !important;
    border-bottom: none !important;
}
.elementor-element-9202edb .elementor-button:hover {
    background: #E07D0E !important;
    color: #1A1A1A !important;
}

/* Fix titlebar title casing on product category / archive pages.
   Theme options set text-transform:capitalize globally via inline <style>;
   this overrides it so Norwegian terms like "Helse og pels" render correctly. */
body.tax-product_cat .prt-titlebar h1.entry-title,
body.tax-product_tag .prt-titlebar h1.entry-title,
body.post-type-archive-product .prt-titlebar h1.entry-title,
body.woocommerce-shop .prt-titlebar h1.entry-title {
    text-transform: none !important;
}
body.tax-product_cat .prt-titlebar .breadcrumb-wrapper,
body.tax-product_cat .prt-titlebar .breadcrumb-wrapper a,
body.tax-product_tag .prt-titlebar .breadcrumb-wrapper,
body.tax-product_tag .prt-titlebar .breadcrumb-wrapper a {
    text-transform: none !important;
}

/* ── Cart page: "Fortsett til kassen" button (WooCommerce Blocks version)
   The classic .wc-proceed-to-checkout selector does not apply to the blocks
   cart; the blocks render .wc-block-cart__submit-button instead. ── */
.wc-block-cart__submit-button,
.wc-block-cart__submit-container a.wc-block-cart__submit-button {
    background: #FCA120 !important;
    background-color: #FCA120 !important;
    color: #1A1A1A !important;
    border: none !important;
    outline: none !important;
    padding: 14px 28px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-container a.wc-block-cart__submit-button:hover {
    background: #E07D0E !important;
    background-color: #E07D0E !important;
    color: #1A1A1A !important;
}


/* ═══════════════════════════════════════════════════════════════════
   CART PAGE (WC Blocks) — three desktop polish fixes
   ═══════════════════════════════════════════════════════════════════ */

/* 1. PRODUKT/TOTALT header row: extra top padding so text isnt cramped agent-skills/ apps/ assets/ backups/ byra24-research/ cron-logs/ demos/ feed-survey/ gardu-audit/ hunddelux/ imports/ logs/ migration/ node_modules/ rustdesk/ scrapes/ scripts/ skills/ sologtak/ specs/ uploads-tmp/ work/


/* Cart page (WC Blocks) — three desktop polish fixes */

/* 1. PRODUKT/TOTALT header: add breathing room above text */
.wc-block-cart__main table.wc-block-cart-items th,
table.wc-block-cart-items .wc-block-cart-items__header th {
    padding-top: 18px !important;
    padding-bottom: 14px !important;
}

/* 2. Double border under header row: theme CSS adds border-bottom to th;
   first td already has border-top — nulling th border-bottom removes the duplicate. */
table.wc-block-cart-items .wc-block-cart-items__header th {
    border-bottom: none !important;
}

/* 3. B2B King save-list button (.b2bking_add_cart_to_purchase_list_button).
   Generic button selector gave it dark fill but wrong padding/size.
   Match sizing of the orange checkout button; keep black as secondary CTA. */
button.b2bking_add_cart_to_purchase_list_button {
    background: #1A1A1A !important;
    background-color: #1A1A1A !important;
    color: #ffffff !important;
    border: none !important;
    padding: 14px 28px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    line-height: 1.4 !important;
    display: inline-block !important;
}
button.b2bking_add_cart_to_purchase_list_button:hover {
    background: #333333 !important;
    background-color: #333333 !important;
    color: #ffffff !important;
}




/* Contact section equal-height fix (desktop only).
   height:100% alone fails because intermediate wrappers have auto height
   and are not flex containers — the reference height never exists.
   Solution: make every level in the chain a flex column, use flex:1 1 auto
   so each child grows into the space its flex parent provides. */
@media (min-width: 1025px) {

    /* 1. Stretch both columns to the height of the taller one (the CF7 form) */
    .elementor-element-06485ab .elementor-container {
        align-items: stretch !important;
    }

    /* 2. Left column: become a flex column so height flows into descendants */
    .elementor-element-4a1b2c3 {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 3. Elementor widget-wrap: grow to fill the stretched column */
    .elementor-element-4a1b2c3 .elementor-widget-wrap {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 4. HTML widget div: grow and pass flex context down */
    .elementor-element-d5e6f7a {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 5. Widget container: continue the flex column chain */
    .elementor-element-d5e6f7a .elementor-widget-container {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 6. Card div (inline-styled): grow to fill remaining space.
       Also increase top padding for breathing room (overrides inline 28px). */
    .elementor-element-d5e6f7a .elementor-widget-container > div {
        flex: 1 1 auto !important;
        padding-top: 40px !important;
        box-sizing: border-box !important;
    }
}


/* ── Cart header icon: vertical alignment nudge (desktop only).
   .headercart-icon defaults to vertical-align:baseline while the 32px
   search circle uses vertical-align:middle. A 3px top margin on the
   floated headercart block brings the cart bag visual centre into line.
   No display/float change — margin-only nudge. ── */
@media (min-width: 992px) {
    .headercart {
        margin-top: 3px !important;
    }
}

/* ── Cart table header (PRODUKT/TOTALT): clear top border + reinforce padding.
   Theme CSS adds border-top to th generically; WC blocks @container rule can
   win on padding via source-order. Using the fully-qualified selector beats both. ── */
.wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__header th {
    border-top: none !important;
    border-bottom: none !important;
    padding-top: 18px !important;
    padding-bottom: 14px !important;
}


/* Empty cart block: clear unwanted orange background from both headings.
   Source is likely a theme heading rule touching skincolor/primary.
   Scope to .wp-block-woocommerce-empty-cart-block so no other h2 is affected. */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block .wp-block-heading {
    background: transparent !important;
    background-color: transparent !important;
}