/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

:root {
    --color-primary: #141414;
    --color-secondary: #e9e9e9;
    --white: #ffffff;
    --transparent: transparent;
}

.wd-header-cats .menu-opener {
    background: var(--transparent) !important;
}

.wd-product.wd-hover-standard .wd-add-btn>a {
    background: var(--color-primary) !important;
}

.amount {
    color: var(--color-primary) !important;
    font-weight: 600;
}

.wd-product.product-grid-item p.wd-product-stock,
.wd-product.product-grid-item .wd-product-sku {
    display: none !important;
}

.products:not(.wd-img-width) .cat-design-alt img {
    aspect-ratio: 1;
    object-fit: cover;
    width: 100%;
}

.wd-tools-element:is(.wd-design-2, .wd-design-5) .wd-tools-count {
    background-color: var(--white) !important;
    color: var(--color-primary) !important;
}

.wd-nav[class*=wd-style-underline] .nav-link-text:after {
    background-color: var(--color-primary) !important;
}

.widget_price_filter .ui-slider .ui-slider-handle:after,
.widget_price_filter .ui-slider .ui-slider-handle:after,
.widget_price_filter .ui-slider .ui-slider-range {
    background-color: var(--color-primary) !important;
}

:where(.wd-loop-builder-off) .product-labels {
    right: 0px !important;
    left: unset !important;
}

.wd-footer {
    background-color: var(--color-primary) !important;
}

#dlsc-calculator-1.dlsc-calculator {
    margin-top: 0px !important;
}

.scrollToTop {
    bottom: 180px !important;
    background-color: var(--color-primary) !important;
    color: var(--white) !important;
}

.dlaf-widget button.dlaf-nudge {
    display: flex !important;
    flex-direction: column !important;
    align-content: flex-start !important;
    align-items: flex-start !important;
}

.dlaf-match-reason p {
    text-transform: uppercase;
}

.wd-product-info.wd-visits-count.wd-style-with-bg {
    display: none !important;
}

.product-label.onsale {
    background-color: var(--color-primary) !important;
}

/* .inlineBikeFitment form {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.inlineBikeFitment .wpce-field{
    width: 100% !important;
} */

/* =========================================================
   DIRTLAB BIKE FITMENT FORM
   ========================================================= */

.inlineBikeFitment {
    width: 100%;
}

/* Reset plugin wrappers */
.inlineBikeFitment .wpce-filter-widget-inner,
.inlineBikeFitment .elementor-shortcode {
    width: 100%;
}

.inlineBikeFitment ul.select2-results__options li:first-child {
    display: none !important;
}

/* =========================================================
   FORM GRID
   ========================================================= */

.inlineBikeFitment form {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(150px, 0.9fr);
    gap: 10px;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   FIELD RESET
   This is important because WPCE applies its own widths
   ========================================================= */

.inlineBikeFitment .wpce-field {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Get rid of plugin clearfix becoming a grid item */
.inlineBikeFitment .wpce-clearfix {
    display: none !important;
}

/* =========================================================
   LABEL
   ========================================================= */

.inlineBikeFitment .wpce-field>label {
    position: absolute !important;
    top: 11px;
    left: 16px;
    z-index: 5;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: #141414;
    pointer-events: none;
}

/* =========================================================
   SELECT2 CONTAINER
   Override the inline width="160.797px"
   ========================================================= */

.inlineBikeFitment .wpce-field .select2 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* Select2 adds another wrapper */
.inlineBikeFitment .select2-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Selection wrapper */
.inlineBikeFitment .select2-container .selection {
    display: block !important;
    width: 100% !important;
}

/* =========================================================
   SELECT FIELD
   ========================================================= */

.inlineBikeFitment .select2-container--default .select2-selection--single {
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
    width: 100% !important;
    height: 66px !important;
    box-sizing: border-box !important;
    padding: 0 42px 12px 16px !important;
    background: #ffffff !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    cursor: pointer;
}

/* Hover */
.inlineBikeFitment .select2-container--default .select2-selection--single:hover {
    border-color: #b8b8b8 !important;
}

/* Active / open */
.inlineBikeFitment .select2-container--open .select2-selection--single {
    border-color: #141414 !important;
    box-shadow: 0 0 0 1px #141414 !important;
}

/* =========================================================
   SELECTED TEXT
   ========================================================= */

.inlineBikeFitment .select2-container--default .select2-selection--single .select2-selection__rendered {
    position: absolute !important;
    left: 16px !important;
    right: 42px !important;
    bottom: 12px !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #4a4a4a !important;
    height: fit-content !important;
}

/* =========================================================
   SELECT ARROW
   ========================================================= */

.inlineBikeFitment .select2-container--default .select2-selection--single .select2-selection__arrow {
    position: absolute !important;
    top: 0 !important;
    right: 14px !important;
    width: 18px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hide standard Select2 triangle */
.inlineBikeFitment .select2-selection__arrow b {
    position: static !important;
    width: 8px !important;
    height: 8px !important;
    margin: -4px 0 0 0 !important;
    border: 0 !important;
    border-right: 1.5px solid #141414 !important;
    border-bottom: 1.5px solid #141414 !important;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

/* Arrow when open */
.inlineBikeFitment .select2-container--open .select2-selection__arrow b {
    margin-top: 4px !important;
    transform: rotate(225deg);
}

/* =========================================================
   DISABLED DEPENDENT SELECTS
   ========================================================= */

.inlineBikeFitment .select2-container--disabled .select2-selection--single {
    background: #fafafa !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

.inlineBikeFitment .select2-container--disabled .select2-selection__rendered {
    color: #888888 !important;
}

/* =========================================================
   FIND PARTS BUTTON
   ========================================================= */

.inlineBikeFitment .wpce-field-buttons {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.inlineBikeFitment .wpce-field-buttons input[type="submit"] {
    display: block !important;
    width: 100% !important;
    height: 66px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 20px !important;
    background: #141414 !important;
    border: 1px solid #141414 !important;
    border-radius: 4px !important;
    color: transparent !important;
    font-size: 0 !important;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

/* Replace "Submit" with FIND PARTS */
.inlineBikeFitment .wpce-field-buttons::after {
    content: "FIND PARTS";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    pointer-events: none;
}

.inlineBikeFitment .wpce-field-buttons:hover input[type="submit"] {
    background: #2b2b2b !important;
    border-color: #2b2b2b !important;
}

/* =========================================================
   SELECT2 DROPDOWN
   These dropdowns are appended outside .inlineBikeFitment,
   so don't scope them to the widget.
   ========================================================= */

.select2-container--default .select2-dropdown {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
}

.select2-container--default .select2-results__option {
    padding: 10px 14px;
    font-size: 13px;
    color: #141414;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #141414;
    color: #ffffff;
}

/* Select2 search box */
.select2-container--default .select2-search--dropdown .select2-search__field {
    padding: 8px 10px;
    border: 1px solid #d9d9d9;
    outline: none;
}

/* =========================================================
   TABLET
   2 columns instead of squashing everything
   ========================================================= */

@media (max-width: 1024px) {
    .inlineBikeFitment form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .inlineBikeFitment .wpce-field-buttons {
        grid-column: 1 / -1;
    }
}

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

@media (max-width: 600px) {
    .inlineBikeFitment form {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }

    .inlineBikeFitment .wpce-field-buttons {
        grid-column: auto;
    }
}

/* =========================================================
   FIX LABEL / VALUE OVERLAP
   ========================================================= */

.inlineBikeFitment .select2-container--default .select2-selection--single {
    display: block !important;
    height: 66px !important;
    padding: 0 42px 0 16px !important;
}

/* Move the actual Select2 value lower down */
.inlineBikeFitment .select2-container--default .select2-selection--single .select2-selection__rendered {
    position: absolute !important;
    left: 16px !important;
    right: 42px !important;
    bottom: 12px !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #4a4a4a !important;
    height: fit-content !important;
}

/* Keep label clearly above the value */
.inlineBikeFitment .wpce-field>label {
    top: 12px !important;
    left: 16px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: #2a2a2a !important;
}

/* Arrow alignment */
.inlineBikeFitment .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0 !important;
    right: 14px !important;
    height: 66px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Disabled fields should still look clean */
.inlineBikeFitment .select2-container--disabled .select2-selection__rendered {
    color: #777777 !important;
}

/* =========================================================
   OPTIONAL: CLEAN UP PLACEHOLDER TEXT
   Removes the ugly "-- Select ..." appearance visually
   ========================================================= */

.inlineBikeFitment .select2-selection__rendered {
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* =========================================================
   MAKE ALL FIELDS/BUTTON SAME HEIGHT
   ========================================================= */

.inlineBikeFitment .wpce-field,
.inlineBikeFitment .wpce-field-buttons,
.inlineBikeFitment .select2-container,
.inlineBikeFitment .select2-selection--single,
.inlineBikeFitment .wpce-field-buttons input[type="submit"] {
    height: 66px !important;
}

/* =========================================================
   SLIGHTLY BETTER GRID PROPORTIONS
   ========================================================= */

.inlineBikeFitment form {
    grid-template-columns:
        minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(150px, 0.95fr);
    gap: 10px !important;
}

.bikePic img {
    aspect-ratio: 16/10;
    object-fit: cover;
    object-position: bottom center;
}

.whb-sticked .whb-header-bottom .wd-dropdown:not(.sub-sub-menu) {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14) !important;
}

.wd-copyrights .wd-col-start.reset-last-child,
.wd-copyrights .wd-col-start.reset-last-child a {
    color: #fff;
    font-size: 14px;
}

header form.searchform input.s {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

nav[class*=-pagination] li .current {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

.wd-side-hidden.wd-opened {
    z-index: 9999999 !important;
}

.wd-page-title {
    background-color: var(--color-secondary) !important;
}

.wd-checkout-steps li,
:root :is(.woocommerce-form-coupon-toggle, .woocommerce-form-login-toggle)>div :is(.showlogin, .showcoupon),
.cart-totals-inner .shipping-calculator-button,
.wd-page-title .title,
.wd-breadcrumbs,
.wd-breadcrumbs a,
.wd-breadcrumbs .wd-last {
    color: var(--color-primary) !important;
}

.wd-checkout-steps .step-active>:is(a, span) {
    text-decoration: underline 2px solid var(--color-primary) !important;
}

.wd-progress-bar .progress-bar,
#place_order,
.woocommerce-form-coupon .button,
.woocommerce-mini-cart__buttons .checkout,
.cart-totals-inner .checkout-button,
.btn.btn-accent,
button[name=save_account_details],
button[name=save_address] {
    background-color: var(--color-primary) !important;
}

:is(.woocommerce-error, .woocommerce-info) {
    background-color: var(--color-primary) !important;
    color: var(--white) !important;
}

/*** NEW MEDIA QUERIES ***/
@media screen and (min-width: 1200px) {
    .desktop-only {
        display: block !important;
    }

    .mobile-only {
        display: none !important;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1200px) {
    .desktop-only {
        display: block !important;
    }

    .mobile-only {
        display: none !important;
    }
}

@media screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {
    .desktop-only {
        display: block !important;
    }

    .mobile-only {
        display: none !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .desktop-only {
        display: block !important;
    }

    .mobile-only {
        display: none !important;
    }
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }

    .inlineBikeFitment form {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}