: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: rgb(247,247,247);
	--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: 5px;
--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;
    }
}





















/* =========================================================
   HIGHTCRAFT - WOOCOMMERCE TRACK YOUR ORDER
   ========================================================= */


/* ---------------------------------------------------------
   1. WooCommerce Tracking Form
   --------------------------------------------------------- */

form.woocommerce-form-track-order.track_order,
form.track_order {
    display: block !important;
    width: 100% !important;
    max-width: 620px !important;
    margin: 0 auto !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* ---------------------------------------------------------
   2. Hide WooCommerce default introduction
   --------------------------------------------------------- */

form.woocommerce-form-track-order.track_order > p:first-child,
form.track_order > p:first-child,
.woocommerce-form-track-order > p:first-child,
.woocommerce .track_order > p:first-child:not(.form-row) {
    display: none !important;
}


/* ---------------------------------------------------------
   3. Remove WooCommerce two-column layout
   --------------------------------------------------------- */

form.track_order .form-row,
form.track_order .form-row-first,
form.track_order .form-row-last,
form.woocommerce-form-track-order .form-row,
form.woocommerce-form-track-order .form-row-first,
form.woocommerce-form-track-order .form-row-last {
    display: block !important;

    float: none !important;
    clear: both !important;

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

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ---------------------------------------------------------
   4. Field spacing
   --------------------------------------------------------- */

form.track_order .form-row,
form.woocommerce-form-track-order .form-row {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}


/* ---------------------------------------------------------
   5. Labels
   --------------------------------------------------------- */

form.track_order label,
form.woocommerce-form-track-order label {
    display: block !important;

    margin: 0 0 8px !important;

    color: #3E4C50 !important;

    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;

    text-align: left !important;
}


/* Required mark */
form.track_order .required,
form.woocommerce-form-track-order .required {
    color: #C75A63 !important;
}


/* ---------------------------------------------------------
   6. Input fields
   --------------------------------------------------------- */

form.track_order input.input-text,
form.track_order input[type="text"],
form.track_order input[type="email"],
form.woocommerce-form-track-order input.input-text,
form.woocommerce-form-track-order input[type="text"],
form.woocommerce-form-track-order input[type="email"] {
    display: block !important;

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

    height: 50px !important;
    min-height: 50px !important;

    margin: 0 !important;

    padding: 0 16px !important;

    background-color: #FFFFFF !important;

    border: 1px solid #D8DFE0 !important;
    border-radius: 2px !important;

    box-shadow: none !important;

    color: #304247 !important;

    font-size: 14px !important;
    font-weight: 400 !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease !important;
}


/* Placeholder */
form.track_order input::placeholder,
form.woocommerce-form-track-order input::placeholder {
    color: #A0A9AC !important;
    opacity: 1 !important;
}


/* Hover */
form.track_order input.input-text:hover,
form.woocommerce-form-track-order input.input-text:hover {
    border-color: #BAC5C7 !important;
}


/* Focus */
form.track_order input.input-text:focus,
form.track_order input[type="text"]:focus,
form.track_order input[type="email"]:focus,
form.woocommerce-form-track-order input.input-text:focus,
form.woocommerce-form-track-order input[type="text"]:focus,
form.woocommerce-form-track-order input[type="email"]:focus {
    border-color: #177681 !important;

    box-shadow: 0 0 0 1px #177681 !important;

    outline: none !important;
}


/* ---------------------------------------------------------
   7. Submit row
   --------------------------------------------------------- */

form.track_order .form-row:last-child,
form.track_order .form-row:last-of-type,
form.woocommerce-form-track-order .form-row:last-child,
form.woocommerce-form-track-order .form-row:last-of-type {
    width: 100% !important;
    max-width: 100% !important;

    margin-top: 2px !important;
    margin-bottom: 0 !important;
}


/* ---------------------------------------------------------
   8. TRACK button
   --------------------------------------------------------- */

form.track_order button.button,
form.track_order button[type="submit"],
form.woocommerce-form-track-order button.button,
form.woocommerce-form-track-order button[type="submit"] {
    display: block !important;

    float: none !important;
    clear: both !important;

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

    height: 49px !important;
    min-height: 49px !important;

    margin: 0 !important;
    padding: 0 24px !important;

    background: #177681 !important;

    border: 1px solid #177681 !important;
    border-radius: 3px !important;

    box-shadow: none !important;

    color: #FFFFFF !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    letter-spacing: .4px !important;

    line-height: 47px !important;

    text-align: center !important;
    text-transform: uppercase !important;

    cursor: pointer !important;

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


/* Button hover */
form.track_order button.button:hover,
form.track_order button[type="submit"]:hover,
form.woocommerce-form-track-order button.button:hover,
form.woocommerce-form-track-order button[type="submit"]:hover {
    background: #125E67 !important;
    border-color: #125E67 !important;
    color: #FFFFFF !important;
}


/* ---------------------------------------------------------
   9. Clear WooCommerce floats
   --------------------------------------------------------- */

form.track_order .clear,
form.woocommerce-form-track-order .clear {
    display: none !important;
}


form.track_order::after,
form.woocommerce-form-track-order::after {
    display: table !important;
    clear: both !important;
    content: "" !important;
}


/* ---------------------------------------------------------
   10. WooCommerce notices
   --------------------------------------------------------- */

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    box-shadow: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    form.track_order,
    form.woocommerce-form-track-order.track_order {
        width: 100% !important;
        max-width: 100% !important;
    }


    form.track_order label,
    form.woocommerce-form-track-order label {
        font-size: 13px !important;
    }


    form.track_order input.input-text,
    form.track_order input[type="text"],
    form.track_order input[type="email"],
    form.woocommerce-form-track-order input.input-text,
    form.woocommerce-form-track-order input[type="text"],
    form.woocommerce-form-track-order input[type="email"] {
        height: 48px !important;
        min-height: 48px !important;

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


    form.track_order .form-row,
    form.woocommerce-form-track-order .form-row {
        margin-bottom: 16px !important;
    }


    form.track_order button.button,
    form.track_order button[type="submit"],
    form.woocommerce-form-track-order button.button,
    form.woocommerce-form-track-order button[type="submit"] {
        height: 48px !important;
        min-height: 48px !important;

        line-height: 46px !important;
    }
}



/* =========================================================
   HIGHTCRAFT - REMOVE WOOCOMMERCE DEFAULT TRACKING INTRO
   ========================================================= */

/* WooCommerce 默认说明文字没有 form-row class */
form.track_order p:not(.form-row),
form.woocommerce-form-track-order p:not(.form-row),
.woocommerce-form-track-order.track_order p:not(.form-row) {
    display: none !important;
}

/* =========================================================
   HIGHTCRAFT - CONTACT FORM 7
   FINAL VERSION
   Fields + Turnstile + Button + Messages
   ========================================================= */


/* =========================================================
   01. FORM BASE
   ========================================================= */

.wpcf7 {
    width: 100%;
}

.wpcf7 form {
    width: 100%;
    margin: 0;
}

.wpcf7 .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.wpcf7 form > p {
    margin-top: 0;
}


/* =========================================================
   02. NAME / EMAIL / PHONE INPUTS
   ========================================================= */

.wpcf7 .hightcraft-cf-field {
    display: block !important;

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

    height: 48px !important;
    min-height: 48px !important;

    margin: 0 0 14px 0 !important;
    padding: 0 16px !important;

    background: #FFFFFF !important;
    background-color: #FFFFFF !important;

    border: 1px solid #D9DFE0 !important;
    border-radius: 3px !important;

    box-shadow: none !important;
    outline: none !important;

    color: #304247 !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 46px !important;

    -webkit-appearance: none;
    appearance: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease !important;
}


/* =========================================================
   03. MESSAGE TEXTAREA
   ========================================================= */

.wpcf7 .hightcraft-cf-message {
    display: block !important;

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

    height: 175px !important;
    min-height: 175px !important;

    margin: 0 0 14px 0 !important;
    padding: 14px 16px !important;

    background: #FFFFFF !important;
    background-color: #FFFFFF !important;

    border: 1px solid #D9DFE0 !important;
    border-radius: 3px !important;

    box-shadow: none !important;
    outline: none !important;

    resize: vertical !important;

    color: #304247 !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;

    -webkit-appearance: none;
    appearance: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease !important;
}


/* =========================================================
   04. PLACEHOLDER
   ========================================================= */

.wpcf7 .hightcraft-cf-field::placeholder,
.wpcf7 .hightcraft-cf-message::placeholder {
    color: #9CA6A9 !important;
    opacity: 1 !important;
}


/* =========================================================
   05. CHROME AUTOFILL
   ========================================================= */

.wpcf7 .hightcraft-cf-field:-webkit-autofill,
.wpcf7 .hightcraft-cf-field:-webkit-autofill:hover,
.wpcf7 .hightcraft-cf-field:-webkit-autofill:focus {
    -webkit-text-fill-color: #304247 !important;

    -webkit-box-shadow:
        0 0 0 1000px #FFFFFF inset !important;

    box-shadow:
        0 0 0 1000px #FFFFFF inset !important;

    border: 1px solid #D9DFE0 !important;

    transition:
        background-color 9999s ease-in-out 0s !important;
}


/* =========================================================
   06. FIELD HOVER
   ========================================================= */

.wpcf7 .hightcraft-cf-field:hover,
.wpcf7 .hightcraft-cf-message:hover {
    border-color: #B9C4C6 !important;
}


/* =========================================================
   07. FIELD FOCUS
   ========================================================= */

.wpcf7 .hightcraft-cf-field:focus,
.wpcf7 .hightcraft-cf-message:focus {
    background: #FFFFFF !important;

    border-color: #177681 !important;

    box-shadow:
        0 0 0 1px #177681 !important;

    outline: none !important;
}


/* =========================================================
   08. INVALID FIELDS
   ========================================================= */

.wpcf7 .hightcraft-cf-field.wpcf7-not-valid,
.wpcf7 .hightcraft-cf-message.wpcf7-not-valid {
    border-color: #C75A63 !important;
    box-shadow: none !important;
}

.wpcf7 .wpcf7-not-valid-tip {
    display: block !important;

    margin-top: -7px !important;
    margin-bottom: 10px !important;

    color: #B84E57 !important;

    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}


/* =========================================================
   09. CLOUDFLARE TURNSTILE
   ========================================================= */

.wpcf7 .hc-turnstile-area {
    display: flex !important;

    width: 100% !important;

    margin: 4px 0 14px !important;
    padding: 0 !important;

    align-items: center !important;
    justify-content: flex-start !important;

    background: transparent !important;
    border: 0 !important;

    box-shadow: none !important;
}

.wpcf7 .hc-turnstile-area .cf-turnstile,
.wpcf7 .hc-turnstile-area .cf7-simple-turnstile,
.wpcf7 .hc-turnstile-area [id^="cf-turnstile"] {
    display: block !important;

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

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

    background: transparent !important;
    border: 0 !important;

    box-shadow: none !important;
}

.wpcf7 .hc-turnstile-area iframe {
    display: block !important;

    max-width: 100% !important;

    margin: 0 !important;

    border: 0 !important;

    box-shadow: none !important;
}

.wpcf7 .hc-turnstile-area > p,
.wpcf7 .hc-turnstile-area br {
    margin: 0 !important;
}


/* =========================================================
   10. SEND MESSAGE BUTTON
   ========================================================= */

.wpcf7 input.hightcraft-contact-submit,
.wpcf7 .hightcraft-contact-submit {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    float: none !important;

    width: auto !important;
    max-width: none !important;

    min-width: 155px !important;

    height: 46px !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 0 28px !important;

    background: #177681 !important;
    background-color: #177681 !important;
    background-image: none !important;

    border: 1px solid #177681 !important;
    border-radius: 3px !important;

    box-shadow: none !important;

    color: #FFFFFF !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 44px !important;

    letter-spacing: 0.4px !important;

    text-align: center !important;
    text-transform: uppercase !important;

    text-shadow: none !important;

    cursor: pointer !important;

    -webkit-appearance: none !important;
    appearance: none !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}

.wpcf7 input.hightcraft-contact-submit:hover,
.wpcf7 .hightcraft-contact-submit:hover {
    background: #125E67 !important;
    background-color: #125E67 !important;

    border-color: #125E67 !important;

    color: #FFFFFF !important;
}

.wpcf7 input.hightcraft-contact-submit:focus,
.wpcf7 .hightcraft-contact-submit:focus {
    background: #125E67 !important;

    border-color: #125E67 !important;

    color: #FFFFFF !important;

    outline: none !important;

    box-shadow:
        0 0 0 2px rgba(23, 118, 129, 0.15) !important;
}

.wpcf7 input.hightcraft-contact-submit:active,
.wpcf7 .hightcraft-contact-submit:active {
    background: #0F5259 !important;
    background-color: #0F5259 !important;

    border-color: #0F5259 !important;

    color: #FFFFFF !important;

    box-shadow: none !important;
}

.wpcf7 input.hightcraft-contact-submit:disabled,
.wpcf7 .hightcraft-contact-submit:disabled {
    opacity: 0.62 !important;
    cursor: not-allowed !important;
}


/* =========================================================
   11. CF7 SPINNER
   ========================================================= */

.wpcf7 .wpcf7-spinner {
    margin: 0 0 0 10px !important;
    vertical-align: middle !important;
}


/* =========================================================
   12. RESPONSE MESSAGE - BASE
   ========================================================= */

.wpcf7 form .wpcf7-response-output {
    position: relative !important;

    width: 100% !important;

    margin: 18px 0 0 !important;
    padding: 13px 16px !important;

    background: #F7F7F5 !important;

    border: 1px solid #E0E5E4 !important;
    border-left: 3px solid #177681 !important;

    border-radius: 3px !important;

    box-shadow: none !important;

    color: #536267 !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;

    text-align: left !important;
}

.wpcf7 form .wpcf7-response-output::before,
.wpcf7 form .wpcf7-response-output::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   13. SUCCESS MESSAGE
   ========================================================= */

.wpcf7 form.sent .wpcf7-response-output {
    background: #F3F8F7 !important;

    border-color: #D8E6E3 !important;
    border-left-color: #177681 !important;

    color: #455E62 !important;
}


/* =========================================================
   14. VALIDATION / ERROR MESSAGE
   ========================================================= */

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
    background: #FFF9F8 !important;

    border-color: #EFE3E1 !important;
    border-left-color: #C75A63 !important;

    color: #6E5A5A !important;
}


/* =========================================================
   15. SPAM MESSAGE
   ========================================================= */

.wpcf7 form.spam .wpcf7-response-output {
    background: #FCF8F1 !important;

    border-color: #EAE0CF !important;
    border-left-color: #B98A42 !important;

    color: #665A49 !important;
}


/* =========================================================
   16. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .wpcf7 .hightcraft-cf-field {
        height: 48px !important;
        min-height: 48px !important;

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

        font-size: 14px !important;
    }

    .wpcf7 .hightcraft-cf-message {
        height: 150px !important;
        min-height: 150px !important;

        padding: 13px 14px !important;

        font-size: 14px !important;
    }

    .wpcf7 .hc-turnstile-area {
        margin-top: 2px !important;
        margin-bottom: 14px !important;

        overflow: visible !important;
    }

    .wpcf7 .hc-turnstile-area .cf-turnstile,
    .wpcf7 .hc-turnstile-area .cf7-simple-turnstile,
    .wpcf7 .hc-turnstile-area [id^="cf-turnstile"] {
        max-width: 100% !important;
    }

    .wpcf7 input.hightcraft-contact-submit,
    .wpcf7 .hightcraft-contact-submit {
        width: auto !important;

        min-width: 145px !important;

        height: 46px !important;
        min-height: 46px !important;

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

        font-size: 13px !important;
    }

    .wpcf7 form .wpcf7-response-output {
        margin-top: 16px !important;

        padding: 12px 14px !important;

        font-size: 13px !important;
    }
}