:root {
	--wd-text-font: "Lora", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #777777;
	--wd-text-font-size: 14px;
	--wd-title-font: "David Libre", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 400;
	--wd-title-color: #242424;
	--wd-entities-title-font: "David Libre", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 400;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Great Vibes", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "David Libre", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 400;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "David Libre", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 500;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 14px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(237,35,83);
	--wd-alternative-color: #fbbc34;
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(237,35,83);
	--btn-accented-bgcolor-hover: rgb(216,32,76);
	--wd-form-brd-width: 1px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
}
.wd-popup.wd-age-verify {
	background-image: url(https://www.hightcraft.com/wp-content/uploads/2024/02/jewelry-bg-slider-2.jpg);
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: rgb(255,255,255);
	background-image: none;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: rgb(246,246,246);
	background-image: none;
	background-repeat: repeat;
	background-size: contain;
	background-position: center center;
}
html .wd-dropdown-menu.wd-design-sized .wd-sub-menu > li > a, body .wd-dropdown-menu.wd-design-full-width .wd-sub-menu > li > a, body .wd-dropdown-menu.wd-design-aside .wd-wp-menu > .sub-sub-menu > li > a, body .wd-dropdown-menu.wd-design-aside .wd-sub-menu .wd-sub-menu > li > a {
	font-family: "Inter", Arial, Helvetica, sans-serif;
	font-weight: 500;
	font-size: 15px;
	text-transform: none;
	color: rgb(37,37,37);
}
html .wd-dropdown-menu.wd-design-sized .wd-sub-menu > li > a:hover, body .wd-dropdown-menu.wd-design-full-width .wd-sub-menu > li > a:hover, body .wd-dropdown-menu.wd-design-aside .wd-wp-menu > .sub-sub-menu  > li > a:hover, body .wd-dropdown-menu.wd-design-aside .wd-sub-menu .wd-sub-menu > li > a:hover {
	color: rgb(7,87,90);
}
html .wd-nav.wd-nav-main > li > a {
	font-family: "Inter", Arial, Helvetica, sans-serif;
	font-weight: 500;
	font-size: 15px;
	text-transform: none;
	color: rgb(36,36,36);
}
html .wd-nav.wd-nav-main > li:hover > a, html .wd-nav.wd-nav-main > li.current-menu-item > a {
	color: #07575A;
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 35px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 35px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 35px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--wd-brd-radius: 0px;
}

@media (min-width: 1222px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: rgb(244,240,233);
}

/* ==========================================================
   HIGHTCRAFT — WOODMART GLOBAL CUSTOM CSS
   RECOVERY / STABLE VERSION
   Paste into:
   WoodMart → Theme Settings → Custom CSS

   Designed to work with child-theme style.css V34.

   IMPORTANT:
   1) This is the FULL WoodMart global Custom CSS.
   2) Shop/category/contact/company-page header structure is
      handled by child-theme style.css V34.
   3) This CSS only restores the mobile Homepage + Our Story
      header exceptions and controls visual styling.
   4) Do not add other header position/sticky rules below it.
   ========================================================== */


/* ==========================================================
   01. HIGHTCRAFT BRAND VARIABLES
   ========================================================== */

:root {
    --hc-primary: #177785;
    --hc-primary-hover: #105F6B;

    --hc-heading: #123F49;
    --hc-text: #26343A;
    --hc-muted: #728086;

    --hc-line: #ECEAE6;
    --hc-soft: #FAFAF8;

    --hc-danger: #D34B53;
}


/* ==========================================================
   02. LOGIN / REGISTER SIDE PANEL
   ========================================================== */

.login-form-side
:is(
    button[type="submit"],
    .woocommerce-form-login__submit
) {
    background: var(--hc-primary) !important;
    color: #FFFFFF !important;

    border-color: var(--hc-primary) !important;
    border-radius: 6px !important;

    box-shadow: none !important;
}


.login-form-side
:is(
    button[type="submit"],
    .woocommerce-form-login__submit
):hover {
    background: var(--hc-primary-hover) !important;
    border-color: var(--hc-primary-hover) !important;
}


.login-form-side
:is(
    .lost_password a,
    .create-account-question a
) {
    color: var(--hc-primary) !important;
}


.login-form-side
:is(
    h3,
    .login-title,
    .wd-heading
) {
    color: var(--hc-heading) !important;
}


/* ==========================================================
   03. MOBILE — HOMEPAGE HEADER RECOVERY
   Homepage only.

   Goal:
   - no boxed outer gap
   - no duplicate sticky clone
   - no white spacer appearing after scroll
   - Header stays in normal document flow
   ========================================================== */

@media (max-width: 1024px) {

    body.home
    header.whb-header,

    body.home
    header.whb-header.whb-boxed,

    body.home
    header.whb-header.whb-overcontent,

    body.home
    header.whb-header.whb-scroll-slide,

    body.home
    header.whb-header.whb-hide-on-scroll {
        display: block !important;

        position: relative !important;

        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
        translate: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        border-radius: 0 !important;

        overflow: visible !important;

        z-index: 100 !important;

        transition: none !important;
    }


    body.home
    .whb-main-header {
        display: block !important;

        position: relative !important;

        top: 0 !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
        translate: none !important;

        border-radius: 0 !important;

        overflow: visible !important;
    }


    body.home
    .whb-main-header::before,

    body.home
    .whb-main-header::after {
        content: none !important;
        display: none !important;

        width: 0 !important;
        height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    body.home
    :is(
        .whb-top-bar,
        .whb-general-header
    ) {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        border-radius: 0 !important;
    }


    body.home
    .whb-general-header {
        background: #FFFFFF !important;

        box-shadow:
            0 2px 8px rgba(25, 42, 48, 0.04) !important;
    }


    body.home
    :is(
        .whb-top-bar > .container,
        .whb-general-header > .container,
        .whb-main-header .container
    ) {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        padding-left: 14px !important;
        padding-right: 14px !important;

        box-sizing: border-box !important;
    }


    /* Disable WoodMart's duplicate sticky Header on Homepage */
    body.home
    :is(
        .whb-sticky-header.whb-clone,
        header.whb-sticky-header.whb-clone
    ) {
        display: none !important;

        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        opacity: 0 !important;
        visibility: hidden !important;

        pointer-events: none !important;
    }


    /* Remove possible sticky placeholder causing white gap */
    body.home
    :is(
        .whb-placeholder,
        .whb-sticky-placeholder,
        .wd-header-placeholder
    ) {
        display: none !important;

        height: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    body.home
    .whb-header-bottom {
        display: none !important;
    }
}


/* ==========================================================
   04. MOBILE — STATIC PAGE HEADER RECOVERY V36

   Applies to ALL normal WordPress pages:
   - Our Story
   - Contact Us
   - FAQ / Shipping / Returns / Policy / company pages
   etc.

   Excludes:
   - Homepage
   - Custom Register page

   IMPORTANT:
   Do NOT exclude .hc-standard-inner-page here.
   Contact Us and many normal pages have that class, which was
   the reason the previous recovery rule did not reach them.
   ========================================================== */

@media (max-width: 1024px) {

    body.page:not(.home):not(.hc-register-mode)
    header.whb-header,

    body.page:not(.home):not(.hc-register-mode)
    header.whb-header.whb-boxed,

    body.page:not(.home):not(.hc-register-mode)
    header.whb-header.whb-overcontent,

    body.page:not(.home):not(.hc-register-mode)
    header.whb-header.whb-scroll-slide,

    body.page:not(.home):not(.hc-register-mode)
    header.whb-header.whb-hide-on-scroll {
        display: block !important;

        position: sticky !important;

        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
        translate: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        border-radius: 0 !important;

        overflow: visible !important;

        z-index: 9999 !important;

        transition: none !important;
        will-change: auto !important;
    }


    body.page:not(.home):not(.hc-register-mode)
    .whb-main-header {
        display: block !important;

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
        translate: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        overflow: visible !important;

        border-radius: 0 !important;
    }


    body.page:not(.home):not(.hc-register-mode)
    .whb-main-header::before,

    body.page:not(.home):not(.hc-register-mode)
    .whb-main-header::after {
        content: none !important;
        display: none !important;
    }


    body.page:not(.home):not(.hc-register-mode)
    :is(
        .whb-top-bar,
        .whb-general-header
    ) {
        display: flex !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        border-radius: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    body.page:not(.home):not(.hc-register-mode)
    .whb-general-header {
        background: #FFFFFF !important;

        box-shadow:
            0 2px 8px rgba(25, 42, 48, 0.04) !important;
    }


    body.page:not(.home):not(.hc-register-mode)
    :is(
        .whb-top-bar > .container,
        .whb-general-header > .container,
        .whb-main-header .container
    ) {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        padding-left: 14px !important;
        padding-right: 14px !important;

        box-sizing: border-box !important;
    }


    /* Disable WoodMart duplicate sticky clone on static pages */
    body.page:not(.home):not(.hc-register-mode)
    :is(
        .whb-sticky-header.whb-clone,
        header.whb-sticky-header.whb-clone
    ) {
        display: none !important;

        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 0 !important;
        visibility: hidden !important;

        overflow: hidden !important;

        pointer-events: none !important;
    }


    /* Remove a possible sticky placeholder / blank strip */
    body.page:not(.home):not(.hc-register-mode)
    :is(
        .whb-placeholder,
        .whb-sticky-placeholder,
        .wd-header-placeholder
    ) {
        display: none !important;

        height: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* Page content / Page Title begins after the real Header */
    body.page:not(.home):not(.hc-register-mode)
    :is(
        .wd-page-wrapper.website-wrapper,
        .main-page-wrapper,
        .page-title,
        .wd-page-title
    ) {
        margin-top: 0 !important;
        transform: none !important;
        translate: none !important;
    }


    body.page:not(.home):not(.hc-register-mode)
    .whb-header-bottom {
        display: none !important;
    }
}


/* ==========================================================
   05. MOBILE OFF-CANVAS MENU — LAYERING
   Applies to all mobile pages.

   The drawer must cover Header + bottom toolbar.
   ========================================================== */

@media (max-width: 1024px) {

    .mobile-nav,

    .mobile-nav.wd-side-hidden {
        position: fixed !important;

        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        height: 100dvh !important;
        max-height: 100dvh !important;

        z-index: 100002 !important;
    }


    .wd-close-side {
        z-index: 100001 !important;
    }
}


/* ==========================================================
   06. MOBILE OFF-CANVAS MENU — VISUAL STYLE
   No large red/teal/beige color block.
   ========================================================== */

@media (max-width: 1024px) {

    .mobile-nav {
        background: #FFFFFF !important;
    }


    /* Search */
    .mobile-nav
    :is(
        .searchform,
        .wd-search-form
    ) {
        background: #FFFFFF !important;

        border-bottom: 1px solid var(--hc-line) !important;
    }


    .mobile-nav
    input:is(
        [type="text"],
        [type="search"]
    ) {
        background: #FFFFFF !important;

        color: var(--hc-text) !important;

        border: 0 !important;

        box-shadow: none !important;
    }


    .mobile-nav
    input::placeholder {
        color: #858A8C !important;
        opacity: 1 !important;
    }


    .mobile-nav
    :is(
        .searchsubmit,
        .wd-search-form button
    ) {
        color: #303A3E !important;
    }


    /* Main menu rows */
    .mobile-nav
    .wd-nav-mobile > li {
        background: #FFFFFF !important;

        border-bottom: 1px solid var(--hc-line) !important;
    }


    .mobile-nav
    .wd-nav-mobile > li > a {
        color: #20272A !important;

        font-weight: 600 !important;

        letter-spacing: 0 !important;
    }


    /* Dropdown button */
    .mobile-nav
    .wd-nav-opener {
        width: 52px !important;
        min-width: 52px !important;

        background: #FFFFFF !important;

        color: #333B3E !important;

        border-left: 0 !important;

        box-shadow: none !important;

        outline: none !important;

        transition:
            background-color .18s ease,
            color .18s ease
            !important;
    }


    .mobile-nav
    .wd-nav-opener::after {
        color: inherit !important;

        font-size: 15px !important;
    }


    /* Open state — almost white */
    .mobile-nav
    .wd-nav-opener.wd-active,

    .mobile-nav
    .wd-nav-opener.wd-active:hover,

    .mobile-nav
    .wd-nav-opener.wd-active:focus,

    .mobile-nav
    .wd-nav-opener.wd-active:active {
        background: #FAFAF8 !important;

        color: var(--hc-heading) !important;

        border-left: 0 !important;

        box-shadow: none !important;

        outline: none !important;
    }


    /* Current/open item */
    .mobile-nav
    .wd-nav-mobile > li:is(
        .wd-opened,
        .current-menu-item,
        .current-menu-parent,
        .current-menu-ancestor
    ) > a {
        color: var(--hc-heading) !important;
    }


    /* Submenu */
    .mobile-nav
    :is(
        .sub-menu,
        .wd-sub-menu
    ) {
        background: #FFFFFF !important;
    }


    .mobile-nav
    :is(
        .sub-menu,
        .wd-sub-menu
    )
    li > a {
        color: #414A4D !important;

        font-weight: 400 !important;
    }


    .mobile-nav
    :is(
        .sub-menu,
        .wd-sub-menu
    )
    li > a:hover {
        color: var(--hc-heading) !important;
    }


    /* Mega-menu section headings */
    .mobile-nav
    :is(
        .sub-menu,
        .wd-sub-menu
    )
    :is(
        .wd-heading,
        h3,
        h4
    ) {
        color: #17282D !important;

        font-weight: 600 !important;

        letter-spacing: 0 !important;
    }
}


/* ==========================================================
   07. MOBILE BOTTOM TOOLBAR — VISUAL ONLY
   ========================================================== */

@media (max-width: 1024px) {

    :is(
        .wd-toolbar,
        .wd-toolbar-shop,
        .wd-toolbar-container
    ) {
        background: #FFFFFF !important;

        border-top: 1px solid var(--hc-line) !important;

        box-shadow:
            0 -2px 8px rgba(25, 42, 48, 0.035) !important;
    }


    :is(
        .wd-toolbar,
        .wd-toolbar-shop,
        .wd-toolbar-container
    )
    a {
        color: #2B3437 !important;
    }
}


/* ==========================================================
   08. FORM / BUTTON MICRO POLISH
   No layout changes.
   ========================================================== */

.woocommerce
:is(
    button.button,
    input.button,
    a.button.alt,
    button.button.alt
) {
    border-radius: 6px;
}


/* ==========================================================
   09. FOCUS STYLE
   ========================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline:
        2px solid rgba(23, 119, 133, 0.28);

    outline-offset: 2px;
}


/* ==========================================================
   10. FINAL MOBILE MENU OVERRIDE
   Keep this block LAST.
   ========================================================== */

@media (max-width: 1024px) {

    .mobile-nav
    .wd-nav-opener.wd-active,

    .mobile-nav
    .wd-nav-opener.wd-active:hover,

    .mobile-nav
    .wd-nav-opener.wd-active:focus,

    .mobile-nav
    .wd-nav-opener.wd-active:active {
        background: #FAFAF8 !important;

        color: #123F49 !important;

        border-left: 0 !important;

        box-shadow: none !important;
    }
}


/* ==========================================================
   11. WOODMART MOBILE HEADER ROW VISIBILITY — FINAL FIX V37

   Root cause of the missing Header on Our Story / Contact:
   the Header container still exists, but WoodMart's responsive
   row classes are not being shown on mobile.

   WoodMart uses:
   - .whb-hidden-desktop / .whb-hidden-lg  -> mobile/tablet rows
   - .whb-hidden-mobile / .whb-visible-lg -> desktop rows

   Restore those responsive visibility rules explicitly.
   Keep this block LAST.
   ========================================================== */

@media (max-width: 1024px) {

    /* Show the mobile/tablet Header rows */
    body
    header.whb-header
    :is(
        .whb-row.whb-hidden-desktop,
        .whb-row.whb-hidden-lg,
        .whb-top-bar.whb-hidden-desktop,
        .whb-general-header.whb-hidden-desktop
    ) {
        display: flex !important;

        opacity: 1 !important;
        visibility: visible !important;

        height: auto !important;
        min-height: 0 !important;

        transform: none !important;
        translate: none !important;
    }


    /* Hide rows intended only for desktop */
    body
    header.whb-header
    :is(
        .whb-row.whb-hidden-mobile,
        .whb-row.whb-visible-lg
    ) {
        display: none !important;
    }


    /* Ensure the two mobile Header rows keep normal width */
    body
    header.whb-header
    :is(
        .whb-top-bar,
        .whb-general-header
    ) {
        width: 100% !important;
        max-width: 100% !important;

        opacity: 1 !important;
        visibility: visible !important;
    }
}


/* ==========================================================
   12. WOODMART MOBILE HEADER HARD RECOVERY — V38
   KEEP THIS BLOCK LAST.

   Why this is needed:
   WoodMart's "Sticky header clone" option adds a real .whb-clone
   element with JavaScript. Earlier rules were hiding selectors
   such as ".whb-sticky-header.whb-clone", but the generated
   element itself is simply ".whb-clone".

   For normal WordPress pages (Our Story / Contact / FAQ /
   Shipping / policy / company pages), force the two visible
   mobile Header rows to real, non-zero heights.

   Shop/category layout remains controlled by style.css V34.
   Register remains excluded.
   ========================================================== */

@media (max-width: 1024px) {

    /* ------------------------------------------------------
       A. Disable the REAL WoodMart generated sticky clone
       ------------------------------------------------------ */

    body:not(.hc-register-mode)
    .whb-clone {
        display: none !important;

        position: static !important;

        width: 0 !important;
        max-width: 0 !important;

        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 0 !important;
        visibility: hidden !important;

        overflow: hidden !important;

        pointer-events: none !important;
    }


    /* ------------------------------------------------------
       B. STATIC WORDPRESS PAGES
       Our Story / Contact / FAQ / policy / company pages
       ------------------------------------------------------ */

    body.page:not(.home):not(.hc-register-mode)
    header.whb-header {
        display: block !important;

        position: sticky !important;
        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 120px !important;
        min-height: 120px !important;
        max-height: 120px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
        translate: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        overflow: visible !important;

        background: transparent !important;

        z-index: 9999 !important;
    }


    body.page:not(.home):not(.hc-register-mode)
    .whb-main-header {
        display: block !important;

        position: relative !important;

        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 120px !important;
        min-height: 120px !important;
        max-height: 120px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
        translate: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        overflow: visible !important;
    }


    /* Black Free Delivery bar */
    body.page:not(.home):not(.hc-register-mode)
    .whb-top-bar {
        display: flex !important;

        position: relative !important;
        top: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
        translate: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        overflow: visible !important;

        background-color: #000000 !important;

        z-index: 2 !important;
    }


    /* White Menu / logo / search / cart row */
    body.page:not(.home):not(.hc-register-mode)
    .whb-general-header {
        display: flex !important;

        position: relative !important;
        top: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 78px !important;
        min-height: 78px !important;
        max-height: 78px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
        translate: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        overflow: visible !important;

        background-color: #FFFFFF !important;

        z-index: 2 !important;
    }


    /* Header Builder inner containers */
    body.page:not(.home):not(.hc-register-mode)
    :is(
        .whb-top-bar > .container,
        .whb-general-header > .container
    ) {
        display: flex !important;

        width: 100% !important;
        max-width: none !important;

        height: 100% !important;
        min-height: 100% !important;

        margin: 0 !important;

        padding-left: 14px !important;
        padding-right: 14px !important;

        box-sizing: border-box !important;
    }


    body.page:not(.home):not(.hc-register-mode)
    :is(
        .whb-top-bar .whb-flex-row,
        .whb-general-header .whb-flex-row
    ) {
        display: flex !important;

        width: 100% !important;

        height: 100% !important;
        min-height: 100% !important;

        align-items: center !important;

        margin: 0 !important;

        transform: none !important;
        translate: none !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* Never allow WoodMart scroll-slide to move a row upward */
    body.page:not(.home):not(.hc-register-mode)
    header.whb-header
    :is(
        .whb-row,
        .whb-flex-row,
        .whb-column,
        .whb-mobile-left,
        .whb-mobile-center,
        .whb-mobile-right
    ) {
        transform: none !important;
        translate: none !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* Hide desktop-only Header row */
    body.page:not(.home):not(.hc-register-mode)
    .whb-header-bottom {
        display: none !important;
    }


    /* Page Title/content begins immediately after 120px Header */
    body.page:not(.home):not(.hc-register-mode)
    :is(
        .wd-page-wrapper.website-wrapper,
        .main-page-wrapper,
        .page-title,
        .wd-page-title
    ) {
        margin-top: 0 !important;

        transform: none !important;
        translate: none !important;
    }
}


/* ==========================================================
   13. MY ACCOUNT LOGIN SIDEBAR LAYER FIX — V39
   KEEP THIS BLOCK LAST.

   The dark .wd-close-side overlay is shared by WoodMart mobile
   navigation and the My Account login sidebar.

   In V38 the overlay sits at z-index 100001, which is correct
   for the mobile menu, but it can cover .login-form-side.
   Result:
   - login panel looks grey/dim
   - taps/clicks hit the overlay instead
   - panel closes when clicking inside it

   Fix:
   raise ONLY the login sidebar above the overlay.
   Clicking outside the panel still closes it normally.
   ========================================================== */

@media (max-width: 1024px) {

    .login-form-side,
    .login-form-side.wd-side-hidden,
    .login-form-side.wd-side-hidden.wd-opened {
        z-index: 100003 !important;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;
    }


    .login-form-side
    :is(
        .wd-heading,
        form,
        .create-account-question,
        input,
        button,
        a,
        label
    ) {
        pointer-events: auto !important;
    }


    /*
     * Keep the shared dark overlay below the login panel
     * and below the mobile navigation panel.
     */
    .wd-close-side {
        z-index: 100001 !important;
    }


    /*
     * Mobile navigation remains above the shared overlay.
     */
    .mobile-nav,
    .mobile-nav.wd-side-hidden {
        z-index: 100002 !important;
    }
}


/* ==========================================================
   14. SHOP / PRODUCT ARCHIVE OFF-CANVAS SIDEBAR LAYER FIX V40
   KEEP THIS BLOCK LAST.

   Symptom:
   - Tap "Show sidebar"
   - Page dark overlay appears
   - Sidebar itself is hidden behind the overlay
   - Tapping anywhere closes it

   Cause:
   .wd-close-side is intentionally high for WoodMart overlays,
   but the Shop off-canvas .wd-side-hidden panel must sit ABOVE it.

   This only affects WooCommerce archive pages.
   ========================================================== */

@media (max-width: 1024px) {

    body:is(
        .post-type-archive-product,
        .tax-product_cat,
        .tax-product_tag,
        .tax-product_brand,
        .woocommerce-shop
    )
    .wd-side-hidden:not(
        .mobile-nav,
        .login-form-side,
        .cart-widget-side,
        .wd-search-full-screen,
        .wd-search-form
    ) {
        z-index: 100003 !important;
        pointer-events: auto !important;
    }


    body:is(
        .post-type-archive-product,
        .tax-product_cat,
        .tax-product_tag,
        .tax-product_brand,
        .woocommerce-shop
    )
    :is(
        .area-sidebar-shop,
        .shop-sidebar,
        .sidebar-container,
        .wd-sidebar
    ).wd-side-hidden {
        z-index: 100003 !important;
        background-color: #FFFFFF !important;
        pointer-events: auto !important;
    }


    .wd-close-side {
        z-index: 100001 !important;
    }


    .mobile-nav,
    .mobile-nav.wd-side-hidden {
        z-index: 100002 !important;
    }


    .login-form-side,
    .login-form-side.wd-side-hidden {
        z-index: 100003 !important;
    }
}