/* Custom code goes here */

/* Fix: fontello font-display for iOS Safari */
@font-face {
  font-family: 'fontello';
  src: url('fonts/fontello.eot?90007532');
  src: url('fonts/fontello.eot?90007532#iefix') format('embedded-opentype'),
       url('fonts/fontello.woff2?90007532') format('woff2'),
       url('fonts/fontello.woff?90007532') format('woff'),
       url('fonts/fontello.ttf?90007532') format('truetype'),
       url('fonts/fontello.svg?90007532#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.product-quantity .qty {
width: auto;
margin-right: 10px;
}

.product-quantity .qty .bootstrap-touchspin {
width: auto;
}

#wk_quantity_wanted {
width: 80px;
height: 40px;
}

#wk_qty_initial_type {
height: 40px;
}

.wk-product-unit-text,
.wk-product-final-text {
padding-left: 0;
margin-left: -6px;
font-size: 14px;
font-weight: bold;
}

#wk-product-price-box {
float: left;
width: 100%;
margin: 10px 0 6px;
}

span.unit_price_full {
display: block;
font-size: 12px;
font-weight: bold;
line-height: 16px;
}




/* Hide theme's default add-to-cart button on catalog listings
   when wkaddtocart module provides its own (with Kg selector) */
.js-product-miniature .product-bottom > .button-container:not(.wk-atc-btn) {
    display: none;
}

/* ============================================================
 * MOBILE UX IMPROVEMENTS — 2026-03-04
 * Unified horizontal stepper, 2-column grid, better buttons
 * CSS-only approach: no template or JS changes needed
 * Wrapped in @media so desktop is completely untouched
 * ============================================================ */
@media (max-width: 768px) {

    /* --- 2-Column Product Grid (was 3 columns, too cramped) --- */
    .products:not(.bx_prodcat):not(.bx_cross):not(.bx_accessories) .product-miniature {
        width: 50% !important;
        padding: 0 6px 16px !important;
    }

    /* --- Container overflow fix: constrain ALL levels to card width --- */
    .products:not(.bx_prodcat):not(.bx_cross):not(.bx_accessories) .product-miniature {
        overflow: hidden !important;
    }
    .products:not(.bx_prodcat):not(.bx_cross):not(.bx_accessories) .product-miniature .product-description,
    .products:not(.bx_prodcat):not(.bx_cross):not(.bx_accessories) .product-miniature .product-bottom,
    .products:not(.bx_prodcat):not(.bx_cross):not(.bx_accessories) .product-miniature .product-price-and-shipping {
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    .wk-atc-btn {
        overflow: hidden !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }
    .wk-atc-btn form.add-to-cart-or-refresh {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .wk-atc-btn .product-quantity,
    .wk-atc-btn .wk-product-quantity,
    .wk-atc-btn .qty {
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* --- Product card form layout: stack vertically --- */
    .wk-atc-btn .product-quantity {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .wk-atc-btn .wk-product-quantity {
        width: 100% !important;
    }
    .wk-atc-btn .wk-product-quantity .qty {
        width: 100% !important;
    }

    .wk-atc-btn .add {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Product detail page ONLY: stepper and add-to-cart same width */
    .product-quantity .qty,
    .product-quantity .add {
        max-width: 51% !important;
        width: 51% !important;
        box-sizing: border-box !important;
    }
    .product-quantity .bootstrap-touchspin,
    .product-quantity .add-to-cart {
        width: 100% !important;
    }
    /* Override: product cards stay full width */
    .wk-atc-btn .product-quantity .qty,
    .wk-atc-btn .product-quantity .add {
        max-width: 100% !important;
        width: 100% !important;
    }
    /* Override: cart page - give qty row full width */
    .page-cart .product-line-actions .row .col-xs-4.hidden-md-up {
        display: none !important;
    }
    .page-cart .product-line-actions > .row {
        display: flex !important;
        justify-content: flex-end !important;
    }
    .page-cart .product-line-actions .row .col-xs-6 {
        flex: 0 0 auto !important;
        max-width: none !important;
    }
    .page-cart .product-line-actions .row .col-xs-6 .row {
        flex-wrap: nowrap !important;
    }
    .page-cart .qty {
        max-width: 100% !important;
        width: 100% !important;
        flex: 1 !important;
        padding: 0 !important;
    }
    /* Cart: hide the regular touchspin wrapper for grocery items */
    .page-cart .qty > div[style*="display:none"],
    .page-cart .qty > div[style*="display: none"] {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    /* Cart: touchspin must not clip children */
    .page-cart .bootstrap-touchspin {
        overflow: visible !important;
    }
    /* Cart: hide prefix/postfix addon spans */
    .page-cart .bootstrap-touchspin-prefix,
    .page-cart .bootstrap-touchspin-postfix {
        display: none !important;
    }
    /* Cart grocery: dissolve wk-input-group-box wrapper */
    .page-cart .wk-input-group-box {
        display: contents !important;
    }
    /* Cart grocery: style Kg label */
    .page-cart .wk-grocery-cart-line > .input-group-addon:not(.bootstrap-touchspin-prefix):not(.bootstrap-touchspin-postfix) {
        order: 3 !important;
        border: none !important;
        background: transparent !important;
        padding: 0 10px 0 4px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        display: flex !important;
        align-items: center !important;
        white-space: nowrap !important;
    }
    /* Cart grocery input */
    .page-cart .wk-cart-line-quantity {
        order: 2 !important;
        flex: 0 1 auto !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        text-align: center !important;
    }

    /* --- Unified Stepper Container --- */
    /* Both grocery and regular product touchspins become
       a single rounded rectangle: [ − ] 0.5 Kg [ + ]  */
    .bootstrap-touchspin {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        border: 2px solid #ddd !important;
        border-radius: 12px !important;
        overflow: visible !important;
        background: #fff !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    /* Dissolve the vertical button wrapper so children become flex items */
    .input-group-btn-vertical {
        display: contents !important;
    }

    /* --- MINUS button (bootstrap-touchspin-down) → LEFT side --- */
    .bootstrap-touchspin-down {
        order: 1 !important;
        min-width: 36px !important;
        min-height: 42px !important;
        width: 36px !important;
        height: 42px !important;
        background: #f5f5f5 !important;
        border: none !important;
        border-right: 1px solid #e0e0e0 !important;
        border-radius: 0 !important;
        position: relative !important;
        flex-shrink: 0;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        touch-action: manipulation;
        cursor: pointer;
    }

    /* Hide the original arrow icon but keep it clickable for JS event handlers */
    .bootstrap-touchspin-down i {
        font-size: 0 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 2 !important;
        cursor: pointer !important;
    }

    /* Show minus symbol */
    .bootstrap-touchspin-down::after {
        content: '\2212';
        font-size: 22px;
        font-weight: 700;
        color: #333;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    /* --- Quantity input → CENTER --- */
    .wk_quantity_wanted,
    .quantity_wanted,
    .js-cart-line-product-quantity,
    #wk_quantity_wanted,
    #quantity_wanted {
        order: 2 !important;
        flex: 0 1 auto !important;
        height: 42px !important;
        width: auto !important;
        min-width: 0 !important;
        border: none !important;
        text-align: center !important;
        font-size: 17px !important;
        font-weight: 600 !important;
        color: #333 !important;
        background: transparent !important;
        outline: none !important;
        padding: 0 !important;
        margin: 0 !important;
        -moz-appearance: textfield !important;
        -webkit-appearance: none !important;
        box-shadow: none !important;
    }
    .wk_quantity_wanted::-webkit-inner-spin-button,
    .wk_quantity_wanted::-webkit-outer-spin-button,
    .quantity_wanted::-webkit-inner-spin-button,
    .quantity_wanted::-webkit-outer-spin-button,
    .js-cart-line-product-quantity::-webkit-inner-spin-button,
    .js-cart-line-product-quantity::-webkit-outer-spin-button,
    #wk_quantity_wanted::-webkit-inner-spin-button,
    #wk_quantity_wanted::-webkit-outer-spin-button,
    #quantity_wanted::-webkit-inner-spin-button,
    #quantity_wanted::-webkit-outer-spin-button {
        -webkit-appearance: none !important;
        margin: 0 !important;
    }

    /* --- Unit selector (Kg) → looks like plain label inside stepper --- */
    .wk-atc-btn .wk_qty_initial_type,
    #wk_qty_initial_type {
        order: 3 !important;
        height: 42px !important;
        border: none !important;
        background: transparent !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #888 !important;
        width: auto !important;
        min-width: 30px !important;
        margin: 0 !important;
        padding: 0 10px 0 0 !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        text-align: center !important;
        cursor: default;
    }

    /* --- PLUS button (bootstrap-touchspin-up) → RIGHT side --- */
    .bootstrap-touchspin-up {
        order: 4 !important;
        min-width: 36px !important;
        min-height: 42px !important;
        width: 36px !important;
        height: 42px !important;
        background: #f5f5f5 !important;
        border: none !important;
        border-left: 1px solid #e0e0e0 !important;
        border-radius: 0 !important;
        position: relative !important;
        flex-shrink: 0;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        touch-action: manipulation;
        cursor: pointer;
    }

    /* Hide the original arrow icon but keep it clickable for JS event handlers */
    .bootstrap-touchspin-up i {
        font-size: 0 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 2 !important;
        cursor: pointer !important;
    }

    /* Show plus symbol */
    .bootstrap-touchspin-up::after {
        content: '+';
        font-size: 22px;
        font-weight: 700;
        color: #333;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    /* Active/pressed state */
    .bootstrap-touchspin-down:active,
    .bootstrap-touchspin-up:active {
        background: #e0e0e0 !important;
    }

    /* --- Bigger Add-to-Cart Button --- */
    .wk-atc-btn .add-to-cart,
    .wk-atc-btn .wk-addcart-btn,
    .wk-atc-btn .wk-incart-btn,
    .wk-atc-btn .wk-custom-cart-btn {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        background: #ef4937 !important;
        color: #fff !important;
        border: none !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        touch-action: manipulation;
        margin-top: 6px;
        line-height: normal !important;
        padding: 8px 12px !important;
    }
    .wk-atc-btn .add-to-cart:active,
    .wk-atc-btn .wk-addcart-btn:active,
    .wk-atc-btn .wk-custom-cart-btn:active {
        background: #d63a2a !important;
    }

    /* Prevent double-tap zoom on all interactive elements */
    .wk-atc-btn button,
    .wk-atc-btn input,
    .wk-atc-btn select,
    .product-quantity button,
    .product-quantity input,
    .qty button,
    .qty input {
        touch-action: manipulation;
    }
}