/* custom.css */

/* ========== Fix: Duplicate +/- quantity symbols on product page ========== */
/* Nuclear approach: remove ALL content from <i> in TouchSpin buttons,
   render +/- from button ::before instead, hide ALL duplicate wrappers */

/* 1. Kill everything inside the TouchSpin <i> elements */
.product-quantity .input-group-btn-vertical .btn i {
    font-family: inherit !important;
    font-size: 0 !important;
    line-height: 0 !important;
}
.product-quantity .input-group-btn-vertical .btn i::before,
.product-quantity .input-group-btn-vertical .btn i::after {
    content: none !important;
    display: none !important;
}

/* 2. Show +/- via ::before on the buttons themselves */
.product-quantity .input-group-btn-vertical .btn.bootstrap-touchspin-up::before {
    content: "\2b" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    display: block !important;
}
.product-quantity .input-group-btn-vertical .btn.bootstrap-touchspin-down::before {
    content: "\f068" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    display: block !important;
}

/* 3. Hide ALL duplicate .bootstrap-touchspin (nested, sibling, any) */
.product-quantity .bootstrap-touchspin .bootstrap-touchspin {
    display: none !important;
}
.product-quantity .qty > .bootstrap-touchspin + .bootstrap-touchspin {
    display: none !important;
}
.product-quantity .qty > .bootstrap-touchspin ~ .bootstrap-touchspin {
    display: none !important;
}

/* 4. Hide any extra children inside .qty that shouldn't be there */
.product-quantity .qty > :not(:first-child):not(.bootstrap-touchspin) {
    display: none !important;
}

/* ========== Full-width menu bar ========== */
.elementor-73 .elementor-element.elementor-element-acf1a9a > .elementor-container,
.elementor-73 .elementor-element.elementor-element-187a5ea > .elementor-container {
    max-width: 100% !important;
}

/* Main menu: full width (works on local AND staging DBs regardless of section IDs) */
/*.elementor-section:has(#_desktop_top_menu) > .elementor-container {
    max-width: 100% !important;
}*/

/* ========== Menu & Submenu Styles (matching buildingeasy.co.nz) ========== */

.top-menu[data-depth="1"] {
    margin: 0.625rem;
}

.top-menu a[data-depth="1"] {
    font-weight: 700 !important;
    color: #000;
}

.top-menu a:not([data-depth="0"]) {
    display: block;
    padding: 0.625rem;
    color: #7a7a7a;
    font-weight: 400;
    padding-left: 1.625rem;
    padding-top: 0rem;
}

.top-menu a.dropdown-submenu {
    color: #232323;
    text-transform: uppercase;
    font-weight: 600;
}

.top-menu a[data-depth="0"] {
    padding: 1.5625rem 0.750rem;
    font-size: 14px;
    text-transform: uppercase;
    color: #2f3241;
    background-color: transparent;
    font-weight: normal;
    -webkit-transition: all 350ms ease-out;
    -moz-transition: all 350ms ease-out;
    -ms-transition: all 350ms ease-out;
    -o-transition: all 350ms ease-out;
    transition: all 350ms ease-out;
    position: relative;
    font-weight: 700;
}

#header .top-menu a[data-depth="0"]:hover {
    color: #2fb5d2;
    text-decoration: none;
}

.top-menu a[data-depth="1"],
.top-menu a[data-depth="2"] {
    padding: 0 0.625rem 0.625rem 0;
}

.top-menu .collapse {
    display: inherit;
}

.top-menu .sub-menu {
    box-shadow: 2px 1px 11px 2px rgba(0, 0, 0, 0.1);
    border: none;
    width: calc(100% - 30px);
    min-width: calc(100% - 30px);
    z-index: 18;
    display: none;
}

.top-menu .sub-menu.collapse {
    display: none;
}

.top-menu .sub-menu ul[data-depth="1"] > li {
    float: left;
    margin: 0 1.25rem;
}

.top-menu .sub-menu a:hover {
    color: #2fb5d2;
}

.top-menu .popover {
    max-width: inherit;
    border-radius: 0;
}

.popover.bs-tether-element-attached-top {
    margin-top: 0;
}

#_desktop_top_menu .top-menu[data-depth="0"] li:hover .sub-menu {
    display: block !important;
}

/* Mobile menu */
#mobile_top_menu_wrapper {
    padding: 15px;
    background: #fff;
}

#mobile_top_menu_wrapper #top-menu {
    margin-bottom: 0.625rem;
}

#mobile_top_menu_wrapper .top-menu {
    color: #232323;
}

#mobile_top_menu_wrapper .top-menu .collapse-icons[aria-expanded="true"] .add {
    display: none;
}

#mobile_top_menu_wrapper .top-menu .collapse-icons[aria-expanded="true"] .remove {
    display: block;
}

#mobile_top_menu_wrapper .top-menu .collapse-icons .remove {
    display: none;
}

#mobile_top_menu_wrapper .top-menu .navbar-toggler {
    display: inline-block;
    padding: 0;
}

#mobile_top_menu_wrapper .top-menu a[data-depth="0"] {
    padding: 0.625rem;
    border-bottom: 1px solid #f6f6f6;
}

#mobile_top_menu_wrapper .top-menu .collapse {
    display: none;
}

#mobile_top_menu_wrapper .top-menu .collapse.in {
    display: block;
}

#mobile_top_menu_wrapper .top-menu .sub-menu {
    box-shadow: none;
    z-index: inherit;
    display: block;
    position: static;
    overflow: hidden;
    margin-left: 0;
    width: 100%;
    min-width: 100%;
    background: #fff;
}

#mobile_top_menu_wrapper .top-menu .sub-menu.collapse {
    display: none;
}

#mobile_top_menu_wrapper .top-menu .sub-menu.collapse.in {
    display: block;
}

#mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="0"] > li {
    border-bottom: 1px solid #7a7a7a;
}

#mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="1"] {
    margin: 0;
}

#mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="1"] > li {
    float: none;
    margin: 0;
}

#mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="1"] > li a {
    text-transform: none;
}

#mobile_top_menu_wrapper .top-menu .sub-menu ul {
    padding: 0;
}

#mobile_top_menu_wrapper .top-menu .sub-menu li > a {
    padding: 0.625rem;
    border-bottom: 1px solid #fff;
    font-weight: 700;
}

#mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="2"] li a {
    padding-left: 1.25rem;
}

#mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="3"] li a {
    padding-left: 2.5rem;
}

#mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="4"] li a {
    padding-left: 3.75rem;
}

#header .menu,
#header .menu > ul > li {
    display: inline-block;
}