/*
Theme Name: Hello Elementor Child - Lone Star Single Cabs
Theme URI: https://lonestarsinglecab.com/
Description: A premium, modern automotive child theme for Lone Star Single Cabs, custom built for car sales in the USA and UK.
Author: Lone Star Single Cabs
Author URI: https://lonestarsinglecab.com/
Template: hello-elementor
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hello-elementor-child-lssc
*/

/* Custom child theme styles can be added here if needed, but primary layout is built via Elementor */

/* ------------------------------------------------------------------------
   Global Variables & Reset Overrides
   ------------------------------------------------------------------------ */
:root {
    --color-primary: #0A192F;    /* Dark Navy */
    --color-secondary: #1F2937;  /* Charcoal */
    --color-text: #374151;       /* Gray Text */
    --color-accent: #B91C1C;     /* Deep Red */
    --color-light: #F9FAFB;      /* Off-white */
}

/* Base Body typography & color */
body {
    font-family: 'Inter', sans-serif;
    color: var(--color-text);
    overflow-x: hidden !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
    color: var(--color-secondary);
}

/* Global Link styles */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: var(--color-accent);
}

/* ------------------------------------------------------------------------
   Elementor Core Button Styling Overrides
   ------------------------------------------------------------------------ */
.elementor-button,
.elementor-button-wrapper a {
    background-color: var(--color-accent) !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
}
.elementor-button:hover,
.elementor-button-wrapper a:hover {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}

/* ------------------------------------------------------------------------
   WooCommerce Global Element Styling Overrides
   ------------------------------------------------------------------------ */
/* WooCommerce loop product titles */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-loop-product__title a {
    font-family: 'Outfit', sans-serif !important;
    color: var(--color-secondary) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title:hover,
.woocommerce-loop-product__title a:hover {
    color: var(--color-accent) !important;
}

/* WooCommerce loop prices */
.woocommerce ul.products li.product .price,
.woocommerce p.price,
.woocommerce span.price,
.price .amount {
    color: var(--color-accent) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

/* WooCommerce buttons (Add to cart, Checkout, Update cart) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-info a.button,
.woocommerce .woocommerce-error a.button {
    background-color: var(--color-accent) !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    border-radius: 4px !important;
    border: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 14px !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .woocommerce-message a.button:hover,
.woocommerce .woocommerce-info a.button:hover,
.woocommerce .woocommerce-error a.button:hover {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}

/* Cart & Checkout Specifics */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order {
    background-color: var(--color-accent) !important;
    font-size: 16px !important;
    padding: 15px 30px !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #place_order:hover {
    background-color: var(--color-primary) !important;
}

/* Form inputs styling */
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
    border: 1px solid #D1D5DB !important;
    padding: 10px 14px;
    border-radius: 4px !important;
    font-family: 'Inter', sans-serif !important;
    color: var(--color-secondary) !important;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
    border-color: var(--color-primary) !important;
    outline: none !important;
}

/* ------------------------------------------------------------------------
   WooCommerce Pagination Styling Overrides
   ------------------------------------------------------------------------ */
.woocommerce nav.woocommerce-pagination {
    text-align: center;
    margin: 40px 0 20px 0 !important;
    padding: 10px 0 !important;
}
.woocommerce nav.woocommerce-pagination ul {
    display: inline-flex !important;
    border: none !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li {
    border: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 10px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: var(--color-secondary) !important;
    background-color: #ffffff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s ease !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
    background-color: var(--color-accent) !important;
    color: #ffffff !important;
    border-color: var(--color-accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(185, 28, 28, 0.25) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 4px 10px rgba(10, 25, 47, 0.25) !important;
}
.woocommerce nav.woocommerce-pagination ul li a.next,
.woocommerce nav.woocommerce-pagination ul li a.prev {
    font-size: 18px !important;
}

/* ------------------------------------------------------------------------
   WooCommerce Archive Page Title Banner (Shop & Categories)
   ------------------------------------------------------------------------ */
.woocommerce-products-header {
    background-color: var(--color-primary) !important;
    padding: 40px 20px !important;
    margin: 0 0 40px 0 !important;
    text-align: center !important;
    border: none !important;
    
    /* Full-width Breakout */
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}
.woocommerce-products-header .woocommerce-products-header__title.page-title {
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    letter-spacing: 0.5px !important;
    display: block !important;
    text-align: center !important;
}
.woocommerce-products-header .term-description,
.woocommerce-products-header .page-description {
    color: #E5E7EB !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    margin: 12px auto 0 auto !important;
    max-width: 800px !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

/* ------------------------------------------------------------------------
   Header Navigation Dropdown Menu
   ------------------------------------------------------------------------ */
.lssc-dropdown:hover .lssc-dropdown-menu {
    display: block !important;
    animation: lsscFadeIn 0.2s ease-out;
}
.lssc-dropdown-menu a:hover {
    background-color: #F9FAFB !important;
    color: var(--color-accent) !important;
}
@keyframes lsscFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, 5px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}
/* ------------------------------------------------------------------------
   WPForms Contact Form Premium Styling
   ------------------------------------------------------------------------ */
div.wpforms-container {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-top: 4px solid var(--color-accent) !important;
    border-radius: 8px !important;
    padding: 35px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    max-width: 100% !important;
}

/* Style the field labels */
div.wpforms-container .wpforms-field-label {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: var(--color-secondary) !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
}

/* Style input fields */
div.wpforms-container input[type="text"],
div.wpforms-container input[type="email"],
div.wpforms-container textarea {
    background-color: #F9FAFB !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    padding: 12px 16px !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02) !important;
}

/* Focus state for input fields */
div.wpforms-container input[type="text"]:focus,
div.wpforms-container input[type="email"]:focus,
div.wpforms-container textarea:focus {
    background-color: #FFFFFF !important;
    border-color: var(--color-accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1) !important;
}

/* Style the Submit button */
div.wpforms-container button.wpforms-submit {
    background-color: var(--color-accent) !important;
    color: #FFFFFF !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    padding: 14px 28px !important;
    border-radius: 4px !important;
    border: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px rgba(185, 28, 28, 0.15) !important;
}

div.wpforms-container button.wpforms-submit:hover {
    background-color: var(--color-primary) !important;
    box-shadow: 0 4px 6px rgba(10, 25, 47, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* ------------------------------------------------------------------------
   Single Product Page Spacing Overrides
   ------------------------------------------------------------------------ */
.single-product div.product,
.single-product .site-main {
    padding-top: 0 !important;
}
.single-product .site-content {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

@media (max-width: 767px) {
    .single-product .site-content {
        padding-top: 15px !important;
        padding-bottom: 25px !important;
    }
}

/* ------------------------------------------------------------------------
   Mobile Navigation & Hamburger Drawer Styles
   ------------------------------------------------------------------------ */

/* Default Desktop State */
#lssc-hamburger-btn {
    display: none !important;
}

/* Top Bar Centering (Desktop & Mobile) */
.elementor-element-lssc-topbar {
    text-align: center !important;
}
.elementor-element-lssc-topbar .elementor-container {
    justify-content: center !important;
    margin: 0 auto !important;
}
.elementor-element-lssc-topbar .elementor-column,
.elementor-element-lssc-topbar .elementor-widget-wrap,
.elementor-element-lssc-topbar .elementor-widget {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
}
.elementor-element-lssc-topbar p {
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Mobile Devices (< 768px) */
@media (max-width: 767px) {
    /* Hide Desktop Navigation Links on Mobile (Extremely Specific) */
    .lssc-desktop-nav,
    .elementor-location-header nav > a:not(.header-cart-link),
    .elementor-location-header nav > div.lssc-dropdown,
    nav > a:not(.header-cart-link),
    nav > div.lssc-dropdown,
    .lssc-dropdown-menu {
        display: none !important;
    }
    
    /* Main Header Columns Layout on Mobile (Logo Left, Menu Right, CTA Bottom) */
    body section.elementor-element-lssc-main-header .elementor-container,
    body section.elementor-element-lssc-main-header .elementor-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    /* Make the hardcoded HTML Grid on the Homepage Responsive */
    div[style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    body section.elementor-element-lssc-main-header .elementor-container div.elementor-column.elementor-element-header-col-left {
        width: 48% !important;
        max-width: 48% !important;
        flex-basis: 48% !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Ensure the logo scales down so it doesn't break the 48% width limit */
    body section.elementor-element-lssc-main-header .elementor-container div.elementor-column.elementor-element-header-col-left img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    body section.elementor-element-lssc-main-header .elementor-container div.elementor-column.elementor-element-header-col-center {
        width: 48% !important;
        max-width: 48% !important;
        flex-basis: 48% !important;
        display: inline-flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    body section.elementor-element-lssc-main-header .elementor-container div.elementor-column.elementor-element-header-col-right {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
        display: block !important;
        margin-top: 15px !important;
        padding: 0 !important;
    }
    
    .elementor-element-header-col-right .elementor-widget-button .elementor-button {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
    
    /* Ensure the cart/hamburger stay visible */
    .elementor-element-lssc-main-header nav {
        display: flex !important;
        justify-content: flex-end !important;
        width: 100% !important;
        align-items: center !important;
    }
    #lssc-hamburger-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: transparent;
        border: 1px solid #D1D5DB;
        border-radius: 4px;
        color: #1F2937;
        cursor: pointer;
        padding: 0;
        margin-left: 10px;
        vertical-align: middle;
    }
    
    /* Category Cards Grid Responsive */
    .lssc-cat-card {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    
    /* Hero Slider Title & Subtitle Responsive */
    .lssc-slide-title {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }
    .lssc-slide-subtitle {
        font-size: 14px !important;
    }
    
    /* Overlapping Search Filter Form */
    #lssc-filter-form {
        flex-direction: column !important;
        width: 90% !important;
        padding: 15px !important;
        position: relative !important;
        margin-top: -30px !important;
    }
    #lssc-filter-form select,
    #lssc-filter-form button {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    /* Shop Archive Product Grid (2 columns on mobile) */
    .woocommerce ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    .woocommerce ul.products li.product {
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* Footer columns stacking */
    footer .elementor-container,
    footer .footer-columns {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
    }
    
    /* Prevent Left Edge Content Clipping on Mobile Checkout */
    body.woocommerce-checkout {
        overflow-x: hidden !important;
    }
    
    body.woocommerce-checkout .site-content,
    body.woocommerce-checkout .site-main,
    body.woocommerce-checkout .page-content {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .woocommerce-checkout form.checkout,
    .woocommerce-checkout .col-1,
    .woocommerce-checkout .col-2,
    .woocommerce-checkout table.shop_table,
    .woocommerce-checkout #customer_details {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden !important;
        float: none !important;
    }
    
    /* Make Checkout form inputs fill the screen */
    .woocommerce-checkout .form-row {
        width: 100% !important;
        float: none !important;
        display: block !important;
    }
    
    .woocommerce-checkout .form-row input.input-text,
    .woocommerce-checkout .form-row select,
    .woocommerce-checkout .form-row textarea,
    .wc-block-checkout .wc-block-components-text-input input,
    .wc-block-checkout .wc-block-components-select select,
    .wc-block-checkout input[type="text"],
    .wc-block-checkout input[type="email"],
    .wc-block-checkout input[type="tel"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Put first name and last name on their own lines on mobile */
    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
    }
    
    /* Fix WooCommerce Cart Layout on Mobile (Classic Shortcode) */
    body.woocommerce-cart {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    body.woocommerce-cart .site-content,
    body.woocommerce-cart .site-main,
    body.woocommerce-cart .page-content,
    body.woocommerce-cart .post,
    body.woocommerce-cart .woocommerce {
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 15px !important;
        box-sizing: border-box !important;
        position: static !important;
        left: 0 !important;
        transform: none !important;
        overflow-x: hidden !important;
    }
    
    /* Fix WooCommerce Gutenberg Blocks (Cart & Checkout) */
    .wp-block-woocommerce-cart,
    .wp-block-woocommerce-checkout,
    .wc-block-cart,
    .wc-block-checkout,
    .wc-block-components-sidebar,
    .wc-block-cart__sidebar,
    .wc-block-cart-items,
    .wp-block-woocommerce-cart .alignfull,
    .wp-block-woocommerce-cart .alignwide,
    .wp-block-woocommerce-checkout .alignfull,
    .wp-block-woocommerce-checkout .alignwide {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        left: 0 !important;
        position: static !important;
        transform: none !important;
    }
    
    body.woocommerce-cart table.shop_table,
    body.woocommerce-cart table.shop_table_responsive,
    body.woocommerce-cart .cart-collaterals {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        position: static !important;
        left: 0 !important;
    }
    
    body.woocommerce-cart td.product-remove,
    body.woocommerce-cart td.product-thumbnail,
    body.woocommerce-cart td.product-name,
    body.woocommerce-cart td.product-price,
    body.woocommerce-cart td.product-quantity,
    body.woocommerce-cart td.product-subtotal {
        text-align: left !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Force Elementor Columns to stack properly on mobile, excluding Header */
    body:not(.elementor-editor-active) .elementor-section:not(.elementor-location-header) .elementor-column,
    body:not(.elementor-editor-active) .elementor-section:not(.elementor-location-header) .elementor-column-wrap {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
    }
    
    body:not(.elementor-editor-active) .elementor-section:not(.elementor-location-header) .elementor-inner-column {
        width: 100% !important;
    }
    
    /* Fix WooCommerce Products Grid on Mobile */
    .woocommerce ul.products {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 15px !important;
    }
    .woocommerce ul.products li.product {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 30px 0 !important;
        float: none !important;
    }
    
    /* Ensure no horizontal overflow on sections */
    body, html, .elementor-section {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}

/* ------------------------------------------------------------------------
   Contact Form Width Increase
   ------------------------------------------------------------------------ */
.elementor-widget-wpforms {
    width: 100% !important;
}
@media (min-width: 768px) {
    .elementor-widget-wpforms .wpforms-container {
        min-width: 600px !important;
    }
    /* If it's constrained by an Elementor column, force the column to be wider */
    .elementor-column:has(.elementor-widget-wpforms) {
        min-width: 650px !important;
        flex-grow: 1 !important;
    }
}


/* ------------------------------------------------------------------------
   WooCommerce Blocks (Cart & Checkout) Color Overrides
   ------------------------------------------------------------------------ */
/* Text & Links */
.wc-block-components-product-name {
    color: var(--color-primary) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.wc-block-components-product-name:hover {
    color: var(--color-accent) !important;
}

.wc-block-components-product-price,
.wc-block-components-product-sale-price,
.wc-block-components-totals-item__value,
.wc-block-components-formatted-money-amount {
    color: var(--color-accent) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
}

/* Base text */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-components-order-summary {
    color: var(--color-text) !important;
    font-family: 'Inter', sans-serif !important;
}

/* Headings in Blocks */
.wc-block-components-title,
.wc-block-checkout__title {
    color: var(--color-secondary) !important;
    font-family: 'Outfit', sans-serif !important;
}

/* Buttons in Blocks */
.wc-block-components-button:not(.is-link) {
    background-color: var(--color-accent) !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    border: none !important;
}
.wc-block-components-button:not(.is-link):hover {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 6px rgba(10, 25, 47, 0.15) !important;
}

/* Return to shop / secondary links */
.wc-block-components-button.is-link {
    color: var(--color-primary) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.wc-block-components-button.is-link:hover {
    color: var(--color-accent) !important;
}

/* Quantity selector buttons */
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
    background-color: transparent !important;
    color: var(--color-secondary) !important;
    border: none !important;
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover {
    color: var(--color-accent) !important;
}