/* -------------------------------------------------------------------
   Project overrides. Loaded last, after style.css and responsive.css.
   ------------------------------------------------------------------- */

/*
 * The product hover bar (add-to-cart / wishlist) is opacity:0 + visibility:hidden
 * until :hover. On touch devices the first tap only resolves the hover state, so
 * the button needed a second tap to actually fire. On any device without a real
 * hover-capable pointer, keep the bar visible so a single tap works.
 */
@media (hover: none), (pointer: coarse) {
    .product-hover-action,
    .ltn__product-item:hover .product-hover-action,
    .ltn__product-item-3 .product-hover-action,
    .ltn__product-item-3:hover .product-hover-action {
        top: 50%;
        opacity: 1;
        visibility: visible;
    }
}

/* Never let a hidden hover bar swallow a tap while it is transitioning out. */
.product-hover-action {
    pointer-events: none;
}

.ltn__product-item:hover .product-hover-action,
.ltn__product-item-3:hover .product-hover-action {
    pointer-events: auto;
}

@media (hover: none), (pointer: coarse) {
    .product-hover-action {
        pointer-events: auto;
    }
}

/* Cart buttons mid-request: show it is working and block a second submit. */
.add-to-cart-items.is-loading {
    pointer-events: none;
    opacity: 0.6;
}

/* -------------------------------------------------------------------
   Product details: size selector + quantity stepper
   ------------------------------------------------------------------- */

/*
 * "Size" was an unstyled inline span sitting to the RIGHT of the dropdown.
 * Make it a real label above the control.
 */
.shop-details-info .control_label,
.product_variants .control_label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--ltn__heading-color);
}

/*
 * .nice-select is float:left (plugins.css), so the size dropdown floated and
 * the quantity row wrapped up alongside it, pushing Add to Cart onto its own
 * indented line. Drop the float and contain the block so each control sits on
 * its own row.
 */
/*
 * flow-root contains the float WITHOUT clipping. Do not use overflow:hidden
 * here — nice-select renders its option list as position:absolute, so a
 * clipping ancestor makes the dropdown open invisibly.
 */
.product_variants {
    display: flow-root;
}

.product_variants .product_variants_item {
    display: block;
}

.product_variants .nice-select,
.product_variants select.product_sizes {
    float: none;
    display: inline-block;
    width: 200px;
    max-width: 100%;
    height: 44px;
    line-height: 42px;
}

/*
 * The row is inline-block list items, so the stepper and the Add to Cart
 * button aligned on their text baselines and sat at different heights.
 */
.ltn__product-details-menu-2 {
    clear: both;
}

.ltn__product-details-menu-2 > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.ltn__product-details-menu-2 > ul > li {
    margin-right: 0;
    display: flex;
    align-items: center;
}

.ltn__product-details-menu-2 .cart-plus-minus {
    width: auto;
    height: auto;
    border: 1px solid var(--border-color-1);
    border-radius: 6px;
    overflow: hidden;
}

.ltn__product-details-menu-2 .product_count {
    margin: 0;
}

.ltn__product-details-menu-2 .product_count td {
    padding: 0;
    vertical-align: middle;
    border: 0;
}

/* Brand green stepper — was hardcoded to #ec1f24 (red) inline */
.qty-btn {
    background-color: var(--ltn__secondary-color);
    color: var(--white, #fff);
    border: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.qty-btn:hover,
.qty-btn:focus {
    background-color: var(--ltn__secondary-color-2);
    color: var(--white, #fff);
}

.qty-btn i {
    color: inherit;
    font-size: 13px;
    line-height: 1;
}

.ltn__product-details-menu-2 input.cart-plus-minus-box {
    max-width: 64px;
    width: 64px;
    height: 42px;
    text-align: center;
    border: 0;
    border-left: 1px solid var(--border-color-1);
    border-right: 1px solid var(--border-color-1);
    background: var(--white, #fff);
    font-weight: 600;
    margin: 0;
}

/* Match the Add to Cart button height to the stepper */
.ltn__product-details-menu-2 .theme-btn-1.btn {
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (max-width: 575px) {
    .ltn__product-details-menu-2 > ul {
        gap: 12px;
    }

    .ltn__product-details-menu-2 .theme-btn-1.btn {
        flex: 1 1 auto;
    }
}

/* -------------------------------------------------------------------
   Slide-out cart: let the item list use the full drawer height
   ------------------------------------------------------------------- */

/*
 * style.css caps the list at `max-height: calc(100% - (60px + 245px))`, but
 * #mini_cart_container is a plain auto-height flex item, so that percentage
 * resolves against almost nothing: the list collapsed into a short scrolling
 * box with the footer and a large empty gap underneath it.
 *
 * Instead make the container a flex column that owns the space below the
 * drawer head. The list takes its natural height (footer sits right under it
 * for a small cart) and only shrinks — and scrolls — once the items would
 * overflow the viewport, at which point the footer is pinned to the bottom.
 */
.ltn__utilize-cart-menu .ltn__utilize-menu-inner {
    /* the list is the scroll region now; a second one here fights it */
    overflow-y: hidden;
}

.ltn__utilize-cart-menu #mini_cart_container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.ltn__utilize-cart-menu .mini-cart-product-area {
    flex: 0 1 auto;
    /* without this a flex item refuses to shrink below its content height */
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

.ltn__utilize-cart-menu .mini-cart-footer {
    flex: 0 0 auto;
}

/* -------------------------------------------------------------------
   Product card: visible "Add to Cart" button
   ------------------------------------------------------------------- */

/*
 * .btn ships with `padding: 15px 40px`, which leaves almost no content width
 * inside a 2-across phone card or a 5-across grid tile, so the label wrapped.
 * Keep the button full width but let the label sit on one line.
 */
.ltn__product-item-3 .btn-wrapper-cart {
    margin-top: 12px !important;
}

.ltn__product-item-3 .btn-wrapper-cart .btn {
    padding: 12px 10px;
    white-space: nowrap;
}

/* Nav "Deals" chip */
.menu-hot-chip {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 6px;
    border-radius: 3px;
    background-color: var(--ltn__secondary-color, #80B500);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
    text-transform: uppercase;
    vertical-align: middle;
}

/*
 * Deal lines in the cart and the slide-out drawer. These live here rather than
 * in deals-styles.blade.php because a deal line shows up on every page through
 * the mini-cart, not only on the deals pages.
 */
.cart-deal-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 3px;
    background-color: var(--ltn__secondary-color, #80B500);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    vertical-align: middle;
}

.cart-deal-components {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    opacity: 0.75;
}

/* -------------------------------------------------------------------
   Quantity stepper (cart page)
   ------------------------------------------------------------------- */

/*
 * Was two flat grey squares and a bare number input with inline styles. This
 * groups them into one bordered control matching the stepper on the product
 * page: neutral at rest, brand green on hover, so the tap targets read as
 * buttons.
 */
.qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-color-1, #e5e5e5);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--white, #fff);
    line-height: 1;
}

.qty-stepper .qty-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: var(--section-bg-1, #f7f8f9);
    color: var(--ltn__heading-color, #071c1f);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.qty-stepper .qty-btn:hover,
.qty-stepper .qty-btn:focus {
    background-color: var(--ltn__secondary-color, #80B500);
    color: var(--white, #fff);
}

/* A press should feel like a press, since the row total updates a beat later. */
.qty-stepper .qty-btn:active {
    background-color: var(--ltn__secondary-color-2, #6d9a00);
    color: var(--white, #fff);
    transform: scale(0.94);
}

.qty-stepper .qty-btn i {
    color: inherit;
    pointer-events: none;
}

.qty-stepper input.qty-stepper-input {
    width: 62px;
    height: 42px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    border-left: 1px solid var(--border-color-1, #e5e5e5);
    border-right: 1px solid var(--border-color-1, #e5e5e5);
    background-color: var(--white, #fff) !important;
    color: var(--ltn__heading-color, #071c1f) !important;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    /* readonly input: the +/- buttons are the control, spinners just add noise */
    -moz-appearance: textfield;
    appearance: textfield;
}

.qty-stepper input.qty-stepper-input::-webkit-outer-spin-button,
.qty-stepper input.qty-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-stepper input.qty-stepper-input:focus {
    outline: 2px solid var(--ltn__secondary-color, #80B500);
    outline-offset: -2px;
}

@media (max-width: 575px) {
    .qty-stepper .qty-btn {
        width: 38px;
        height: 38px;
    }

    .qty-stepper input.qty-stepper-input {
        width: 48px;
        height: 38px;
        font-size: 14px;
    }
}