/**
 * Kaachvalaym Product UI Enhancement Stylesheet
 * Scoped strictly to single product pages (body.single-product)
 * Brand Palette:
 *   - Primary Dark Purple: #3b2749
 *   - Hover Dark Purple:   #4e2e6b
 *   - Light Purple Tint:   #f7f3fa
 *   - Light Purple Border: #e6ddf0 / #d1c2e0
 */

:root {
    --kv-purple-main: #3b2749;
    --kv-purple-hover: #4e2e6b;
    --kv-purple-active: #2b1c35;
    --kv-purple-light: #f7f3fa;
    --kv-purple-border: #e6ddf0;
    --kv-purple-border-hover: #9c7cb3;
    --kv-purple-glow: rgba(59, 39, 73, 0.22);
    
    --kv-text-heading: #1f1f1f;
    --kv-text-body: #4b5563;
    --kv-text-muted: #6b7280;
    --kv-text-disabled: #9ca3af;
    
    --kv-stock-green: #059669;
    --kv-stock-green-bg: #ecfdf5;
    --kv-stock-green-border: #a7f3d0;
    
    --kv-stock-amber: #d97706;
    --kv-stock-amber-bg: #fffbeb;
    --kv-stock-amber-border: #fde68a;
    
    --kv-stock-red: #dc2626;
    --kv-stock-red-bg: #fef2f2;
    --kv-stock-red-border: #fecaca;
    
    --kv-radius-sm: 6px;
    --kv-radius-md: 8px;
    --kv-radius-lg: 10px;
    --kv-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   1. SINGLE PRODUCT GENERAL REFINEMENTS
   ========================================================================== */

body.single-product .summary.entry-summary {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--kv-text-body);
}

body.single-product .summary.entry-summary .product_title.entry-title {
    font-family: 'Poppins', serif;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--kv-text-heading) !important;
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
    letter-spacing: -0.2px;
}

body.single-product .summary.entry-summary p.price {
    margin-bottom: 18px !important;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

body.single-product .summary.entry-summary p.price .woocommerce-Price-amount {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--kv-purple-main) !important;
}

body.single-product .summary.entry-summary p.price del .woocommerce-Price-amount {
    font-size: 18px !important;
    font-weight: 400 !important;
    color: var(--kv-text-muted) !important;
    text-decoration: line-through;
}

body.single-product .woocommerce-breadcrumb {
    font-size: 13px !important;
    color: var(--kv-text-muted) !important;
    margin-bottom: 16px !important;
    line-height: 1.6;
}

body.single-product .woocommerce-breadcrumb a {
    color: var(--kv-text-muted) !important;
    transition: color 0.15s ease;
}

body.single-product .woocommerce-breadcrumb a:hover {
    color: var(--kv-purple-main) !important;
    text-decoration: underline;
}

/* ==========================================================================
   2. VARIATIONS TABLE & ATTRIBUTE ROWS
   ========================================================================== */

body.single-product form.variations_form {
    margin-top: 15px !important;
    margin-bottom: 25px !important;
}

body.single-product form.variations_form table.variations {
    width: 100% !important;
    border: none !important;
    margin-bottom: 16px !important;
}

body.single-product form.variations_form table.variations tbody,
body.single-product form.variations_form table.variations tr {
    display: block !important;
    width: 100% !important;
    border: none !important;
}

body.single-product form.variations_form table.variations tr {
    margin-bottom: 16px !important;
    padding-bottom: 14px;
    border-bottom: 1px solid #f1f1f5 !important;
}

body.single-product form.variations_form table.variations tr:last-child {
    border-bottom: none !important;
    padding-bottom: 0;
}

body.single-product form.variations_form table.variations th.label {
    display: block !important;
    padding: 0 !important;
    text-align: left !important;
    border: none !important;
    margin-bottom: 10px !important;
}

body.single-product form.variations_form table.variations td.value {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 0 !important;
    text-align: left !important;
    border: none !important;
    position: relative !important;
}

body.single-product form.variations_form table.variations th.label label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--kv-text-heading) !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Suppress duplicate attribute badge since swatch plugin already updates label text */
.kv-attribute-selected-badge {
    display: none !important;
}

/* ==========================================================================
   3. PRODUCT SIZE SELECTION BUTTONS (PHASE 2)
   Overriding and elevating Variation Swatches for WooCommerce (.cfvsw-*)
   ========================================================================== */

/* Swatches container */
body.single-product .cfvsw-swatches-container,
body.single-product .kv-custom-swatches-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}

/* Size Option Buttons */
body.single-product .cfvsw-swatches-container[swatches-attr="attribute_pa_size"] .cfvsw-swatches-option,
body.single-product .cfvsw-swatches-option.cfvsw-label-option,
body.single-product .kv-size-btn {
    min-width: 54px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    border-radius: var(--kv-radius-md) !important;
    
    /* State 1: Available Unselected */
    background: #ffffff !important;
    border: 2px solid var(--kv-purple-border) !important;
    color: var(--kv-text-heading) !important;
    
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 40px !important;
    text-align: center !important;
    
    cursor: pointer !important;
    position: relative !important;
    box-shadow: 0 1px 3px rgba(59, 39, 73, 0.05) !important;
    transition: var(--kv-transition) !important;
    user-select: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.single-product .cfvsw-swatches-container[swatches-attr="attribute_pa_size"] .cfvsw-swatches-option .cfvsw-swatch-inner,
body.single-product .cfvsw-swatches-option.cfvsw-label-option .cfvsw-swatch-inner {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: inherit !important;
    color: inherit !important;
    background: transparent !important;
}

/* State 1 Hover: Available, unselected */
body.single-product .cfvsw-swatches-container[swatches-attr="attribute_pa_size"] .cfvsw-swatches-option:not(.cfvsw-selected-swatch):not(.cfvsw-swatches-disabled):not(.kv-out-of-stock):hover,
body.single-product .cfvsw-swatches-option.cfvsw-label-option:not(.cfvsw-selected-swatch):not(.cfvsw-swatches-disabled):not(.kv-out-of-stock):hover,
body.single-product .kv-size-btn:not(.kv-selected):not(.kv-out-of-stock):hover {
    background-color: var(--kv-purple-light) !important;
    border-color: var(--kv-purple-border-hover) !important;
    color: var(--kv-purple-main) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px var(--kv-purple-glow) !important;
}

/* State 1 Keyboard Focus */
body.single-product .cfvsw-swatches-option:focus-visible,
body.single-product .kv-size-btn:focus-visible {
    outline: 2px solid var(--kv-purple-main) !important;
    outline-offset: 2px !important;
}

/* State 2: Selected Size */
body.single-product .cfvsw-swatches-container[swatches-attr="attribute_pa_size"] .cfvsw-swatches-option.cfvsw-selected-swatch,
body.single-product .cfvsw-swatches-option.cfvsw-label-option.cfvsw-selected-swatch,
body.single-product .cfvsw-swatches-option.cfvsw-selected-swatch,
body.single-product .kv-size-btn.kv-selected {
    background-color: var(--kv-purple-main) !important;
    border-color: var(--kv-purple-main) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px var(--kv-purple-glow) !important;
    transform: scale(1.02);
}

body.single-product .cfvsw-swatches-option.cfvsw-selected-swatch .cfvsw-swatch-inner,
body.single-product .kv-size-btn.kv-selected .cfvsw-swatch-inner {
    color: #ffffff !important;
}

/* State 3: Out of Stock Size */
body.single-product .cfvsw-swatches-container[swatches-attr="attribute_pa_size"] .cfvsw-swatches-option.cfvsw-swatches-disabled,
body.single-product .cfvsw-swatches-container[swatches-attr="attribute_pa_size"] .cfvsw-swatches-option.cfvsw-swatches-blur,
body.single-product .cfvsw-swatches-container[swatches-attr="attribute_pa_size"] .cfvsw-swatches-option.kv-out-of-stock,
body.single-product .cfvsw-swatches-option.cfvsw-label-option.kv-out-of-stock,
body.single-product .kv-size-btn.kv-out-of-stock {
    background-color: #f3f4f6 !important;
    border: 1.5px dashed #d1d5db !important;
    color: var(--kv-text-disabled) !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    opacity: 0.8 !important;
    position: relative !important;
    overflow: hidden !important;
}

body.single-product .cfvsw-swatches-option.kv-out-of-stock .cfvsw-swatch-inner,
body.single-product .cfvsw-swatches-option.cfvsw-swatches-disabled .cfvsw-swatch-inner {
    color: var(--kv-text-disabled) !important;
}

/* Diagonal strike-through line for out-of-stock indication (non-color visual cue) */
body.single-product .cfvsw-swatches-option.kv-out-of-stock::after,
body.single-product .cfvsw-swatches-option.cfvsw-swatches-disabled::after,
body.single-product .kv-size-btn.kv-out-of-stock::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 10% !important;
    width: 80% !important;
    height: 1.5px !important;
    background-color: #9ca3af !important;
    transform: rotate(-30deg) !important;
    transform-origin: center center !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* ==========================================================================
   CLEAR VARIATIONS & ROGUE ICONS / SELECT ARROWS REMOVAL
   Eradicates Divi pseudo-element arrows and native select dropdown indicators
   ========================================================================== */

/* Completely hide all native selects replaced by swatches and prevent native arrow display */
body.single-product .cfvsw-hidden-select,
body.single-product .cfvsw-hidden-select select,
body.single-product table.variations td.value .cfvsw-hidden-select,
body.single-product table.variations td.value select.cfvsw-hidden-select,
body.single-product table.variations td.value select,
body.single-product form.variations_form select[name^="attribute_"],
.et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td select {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    pointer-events: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
}

/* Eradicate Divi theme pseudo-elements on variations cells, spans, and links (the two arrows above Clear) */
.et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value span:after,
.et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value span:before,
.et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value:after,
.et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value:before,
.et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td:after,
.et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td:before,
.et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value *:not(.cfvsw-swatches-option):not(.kv-size-btn):after,
.et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value *:not(.cfvsw-swatches-option):not(.kv-size-btn):before,
body.single-product table.variations td.value span::after,
body.single-product table.variations td.value span::before,
body.single-product table.variations td.value::after,
body.single-product table.variations td.value::before,
body.single-product table.variations td::after,
body.single-product table.variations td::before,
body.single-product table.variations tr::after,
body.single-product table.variations tr::before,
body.single-product .reset_variations::before,
body.single-product .reset_variations::after,
body.single-product a.reset_variations::before,
body.single-product a.reset_variations::after,
.et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value .reset_variations::before,
.et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value .reset_variations::after,
body.single-product .reset_variations_alert {
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: none !important;
}

/* Clean "Clear" variations button positioning and typography */
body.single-product .reset_variations,
body.single-product a.reset_variations,
.et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value .reset_variations {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 6px 0 6px 12px !important;
    padding: 4px 6px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--kv-text-muted) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    line-height: 1 !important;
    transition: color 0.15s ease !important;
    vertical-align: middle !important;
}

body.single-product .reset_variations:hover,
body.single-product a.reset_variations:hover {
    color: var(--kv-purple-main) !important;
    text-decoration: underline !important;
}

/* When WooCommerce hides Clear, ensure it takes zero space */
body.single-product .reset_variations[style*="visibility: hidden"],
body.single-product a.reset_variations[style*="visibility: hidden"],
.et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value .reset_variations[style*="visibility: hidden"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   4. STOCK NOTICES SUPPRESSION (REMOVES "ONLY X LEFT IN STOCK" COMPLETELY)
   ========================================================================== */

#kv-stock-feedback,
.kv-stock-feedback-badge,
body.single-product .woocommerce-variation-availability,
body.single-product .woocommerce-variation.single_variation p.stock,
body.single-product p.stock,
body.single-product .stock.in-stock,
body.single-product .stock.out-of-stock,
body.single-product div.product p.stock,
body.single-product .single_variation_wrap .stock,
.et-db #et-boc .et-l .et_pb_wc_add_to_cart .stock {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* ==========================================================================
   5. QUANTITY SELECTOR & ADD TO CART BAR (PHASE 3)
   ========================================================================== */

/* Unified purchase container */
body.single-product .woocommerce-variation-add-to-cart,
body.single-product form.cart .woocommerce-variation-add-to-cart,
body.single-product form.cart:not(.variations_form) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 20px !important;
    margin-bottom: 15px !important;
}

/* Reset Divi's aggressive floats and default widths */
body.single-product div.product form.cart div.quantity,
body.single-product div.product form.cart .quantity,
body.single-product .woocommerce-variation-add-to-cart div.quantity {
    float: none !important;
    margin: 0 !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: stretch !important;
}

/* Custom Quantity Stepper Wrapper */
.kv-qty-stepper-wrap {
    display: inline-flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 2px solid var(--kv-purple-border) !important;
    border-radius: var(--kv-radius-lg) !important;
    height: 48px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(59, 39, 73, 0.05) !important;
    transition: var(--kv-transition) !important;
}

.kv-qty-stepper-wrap:focus-within,
.kv-qty-stepper-wrap:hover {
    border-color: var(--kv-purple-border-hover) !important;
    box-shadow: 0 2px 8px var(--kv-purple-glow) !important;
}

/* Minus & Plus Buttons */
.kv-qty-btn {
    width: 44px !important;
    height: 100% !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: none !important;
    color: var(--kv-purple-main) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    user-select: none !important;
}

.kv-qty-btn:hover:not(:disabled) {
    background-color: var(--kv-purple-light) !important;
    color: var(--kv-purple-hover) !important;
}

.kv-qty-btn:active:not(:disabled) {
    background-color: var(--kv-purple-border) !important;
}

.kv-qty-btn:disabled,
.kv-qty-btn[disabled] {
    color: #d1d5db !important;
    cursor: not-allowed !important;
    background-color: transparent !important;
}

/* Quantity Input inside stepper */
body.single-product .kv-qty-stepper-wrap input.qty,
body.single-product div.product form.cart .kv-qty-stepper-wrap input.qty {
    width: 48px !important;
    max-width: 48px !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--kv-text-heading) !important;
    text-align: center !important;
    box-shadow: none !important;
    -moz-appearance: textfield !important;
    -webkit-appearance: none !important;
    outline: none !important;
}

/* Hide browser default spin arrows */
body.single-product .kv-qty-stepper-wrap input.qty::-webkit-outer-spin-button,
body.single-product .kv-qty-stepper-wrap input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* ==========================================================================
   6. ADD TO CART BUTTON (PHASE 3)
   ========================================================================== */

body.single-product button.single_add_to_cart_button,
body.single-product .woocommerce button.button.single_add_to_cart_button.alt,
body.single-product form.cart button.single_add_to_cart_button {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 34px !important;
    margin: 0 !important;
    
    background-color: var(--kv-purple-main) !important;
    border: 2px solid var(--kv-purple-main) !important;
    border-radius: var(--kv-radius-lg) !important;
    
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    
    cursor: pointer !important;
    box-shadow: 0 4px 14px var(--kv-purple-glow) !important;
    transition: var(--kv-transition) !important;
    position: relative !important;
    line-height: 44px !important;
}

/* Add to Cart Hover state */
body.single-product button.single_add_to_cart_button:hover:not(:disabled):not(.disabled),
body.single-product .woocommerce button.button.single_add_to_cart_button.alt:hover:not(:disabled):not(.disabled) {
    background-color: var(--kv-purple-hover) !important;
    border-color: var(--kv-purple-hover) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(59, 39, 73, 0.32) !important;
    padding: 0 34px !important; /* Prevent Divi hover padding jump */
}

/* Add to Cart Active/Click state */
body.single-product button.single_add_to_cart_button:active:not(:disabled):not(.disabled) {
    background-color: var(--kv-purple-active) !important;
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(59, 39, 73, 0.2) !important;
}

/* Add to Cart Disabled state */
body.single-product button.single_add_to_cart_button:disabled,
body.single-product button.single_add_to_cart_button.disabled,
body.single-product .woocommerce button.button.single_add_to_cart_button.alt.disabled,
body.single-product .woocommerce button.button.single_add_to_cart_button.alt:disabled {
    background-color: #9ca3af !important;
    border-color: #9ca3af !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
    opacity: 0.65 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Remove Divi pseudo-icon jump on button */
body.single-product button.single_add_to_cart_button::after,
body.single-product button.single_add_to_cart_button::before {
    display: none !important;
}

/* Bag / Cart Icon SVG inside Add to Cart */
.kv-cart-icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: inline-block;
    vertical-align: middle;
}

/* Success notification message when added to cart */
.kv-added-toast {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--kv-stock-green-bg);
    border: 1px solid var(--kv-stock-green-border);
    color: var(--kv-stock-green);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--kv-radius-md);
    margin-top: 10px;
    animation: kvFadeIn 0.25s ease-out;
}

/* ==========================================================================
   7. COLOR ATTRIBUTE SWATCHES POLISH (IF MULTI-ATTRIBUTE)
   ========================================================================== */

body.single-product .cfvsw-swatches-container[swatches-attr="attribute_color"] .cfvsw-swatches-option {
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: var(--kv-radius-sm) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border: 1.5px solid var(--kv-purple-border) !important;
    transition: var(--kv-transition) !important;
}

body.single-product .cfvsw-swatches-container[swatches-attr="attribute_color"] .cfvsw-swatches-option.cfvsw-selected-swatch {
    background-color: var(--kv-purple-main) !important;
    border-color: var(--kv-purple-main) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   8. RESPONSIVE DESIGN (PHASE 6)
   ========================================================================== */

@media (max-width: 768px) {
    body.single-product .summary.entry-summary .product_title.entry-title {
        font-size: 24px !important;
    }
    
    body.single-product .summary.entry-summary p.price .woocommerce-Price-amount {
        font-size: 22px !important;
    }
    
    body.single-product .cfvsw-swatches-container[swatches-attr="attribute_pa_size"] .cfvsw-swatches-option,
    body.single-product .kv-size-btn {
        min-width: 50px !important;
        height: 42px !important;
        font-size: 14px !important;
        padding: 0 14px !important;
    }
    
    body.single-product .woocommerce-variation-add-to-cart,
    body.single-product form.cart .woocommerce-variation-add-to-cart {
        gap: 10px !important;
    }
    
    body.single-product button.single_add_to_cart_button {
        flex: 1 1 auto;
        padding: 0 24px !important;
    }
}

@media (max-width: 480px) {
    body.single-product .woocommerce-variation-add-to-cart,
    body.single-product form.cart .woocommerce-variation-add-to-cart {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
    }
    
    .kv-qty-stepper-wrap {
        flex: 0 0 auto;
    }
    
    body.single-product button.single_add_to_cart_button {
        flex: 1 1 auto;
        width: auto !important;
        font-size: 14px !important;
        padding: 0 18px !important;
    }
    
    .kv-stock-feedback-badge {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}