/* ==========================================================================
   Row-based size picker - ported verbatim from foxcigar.com
   (cigaroutlet-themev2-4, assets/css/_single-product.css). Markup:
   custom-files/variation-rows.php, used by add-to-cart/variable.php and
   add-to-cart/simple.php. Loaded on product pages only.
   ========================================================================== */

/* ==========================================================================
   Variable product - row-based variation picker
   Replaces the attribute <select> dropdowns. One row per variation:
   radio | name | discount | price | stock | qty stepper
   Markup: woocommerce/single-product/add-to-cart/variable.php
   ========================================================================== */

/* .single-product .cart is a flex column with align-items:flex-start, so the
   rows need an explicit full width or they collapse to their content. */
.co-variation-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 8px);
    margin: var(--space-md, 16px) 0;
    width: 100%;
}

.co-var-row {
    display: grid;
    grid-template-columns: 20px 85px 55px 130px 85px auto;
    align-items: center;
    gap: var(--space-md, 16px);
    padding: 10px var(--space-md, 16px);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 4px;
    background: var(--color-bg, #fff);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.co-var-row:hover {
    border-color: var(--color-accent, #c13124);
}

.co-var-row.is-selected {
    border-color: var(--color-success, #2e7d32);
    background: var(--color-bg-light, #f8f8f8);
}

/* Out-of-stock rows stay visible but read as unavailable */
.co-var-row.is-oos {
    opacity: .6;
}

.co-var-select {
    display: flex;
    align-items: center;
}

.co-var-select input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--color-success, #2e7d32);
    cursor: pointer;
}

.co-var-name {
    font-weight: 600;
    color: var(--color-text, #333);
}

.co-var-discount .sale-badge {
    position: static;
    display: inline-block;
}

.co-var-price {
    white-space: nowrap;
}

.co-var-price del {
    color: var(--color-text-light, #666);
    margin-right: var(--space-xs, 4px);
    font-weight: 400;
}

.co-var-price ins {
    text-decoration: none;
    font-weight: 700;
    color: var(--color-text, #333);
}

.co-var-stock {
    font-size: var(--font-size-sm, 12px);
    white-space: nowrap;
    font-weight: 600;
}

.co-var-stock.instock {
    color: var(--color-success, #2e7d32);
}

.co-var-stock.almost {
    color: var(--color-almost-gone, #e65100);
}

.co-var-stock.out-of-stock {
    color: var(--color-sale, #c13124);
}

/* Keep the row height stable when a row has no qty stepper (out of stock) */
.co-var-qty {
    min-width: 110px;
    display: flex;
    justify-content: flex-end;
}

/* The site-wide .quantity stepper is 46px tall with a !important right margin,
   which is too heavy for a table row - scale it down inside the picker. */
.co-var-qty .quantity {
    margin: 0 !important;
}

.co-var-qty .qty-btn {
    width: 30px;
    height: 34px;
    font-size: 16px;
}

.woocommerce .co-var-qty .quantity input.qty,
.single-product .co-var-qty .quantity input {
    width: 42px;
    height: 34px;
    padding: 0;
    border: none;
    font-size: var(--font-size-base, 14px);
}

/* Action row - Add To Cart / Notify Me + wishlist */
.co-variation-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md, 16px);
    flex-wrap: wrap;
    width: 100%;
    justify-content: end;
}

/* WooCommerce's .button sets an explicit display, which would otherwise beat
   the [hidden] attribute the picker script toggles these buttons with. */
.co-variation-actions [hidden] {
    display: none !important;
}

.co-variation-actions .co-notify-me {
    background: var(--color-almost-gone, #e65100);
    color: #fff;
}

.co-variation-actions .woosw-btn-has-icon .woosw-btn-icon {
    padding: 13px 18px;
    margin-bottom: 0;
    margin-left: 0;
}

/* Tablet - drop the discount column into the price cell */
@media (max-width: 1024px) {
    .co-var-row {
        grid-template-columns: auto 1fr auto auto;
        row-gap: var(--space-sm, 8px);
    }
    .co-var-stock,
    .co-var-qty {
        grid-column: span 2;
    }
}

/* Mobile - stack into two columns */
@media (max-width: 600px) {
    .co-var-row {
        grid-template-columns: auto 1fr;
        gap: var(--space-sm, 8px) var(--space-md, 16px);
    }
    .co-var-discount,
    .co-var-price,
    .co-var-stock,
    .co-var-qty {
        grid-column: 2;
    }
    .co-var-qty {
        justify-content: flex-start;
    }
}

/* From foxcigar's general responsive block: at <=768px the row wraps as a
   flex line (radio, name, badge, price | stock, qty), overriding the grid. */
@media (max-width: 768px) {
    .co-var-row {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .co-var-name {
        min-width: 85px;
    }
}

@media (max-width: 600px) {
    .woocommerce div.product form.cart.co-variation-form .button {
        padding: 15px 15px;
    }
}

/* Simple products with a pack size use the same row form. Undo the
   side-by-side layout that .product-type-simple form.cart gives the plain
   qty + button form (_cart.css, _woocommerce.css, and inline-block at
   <=370px in _single-product.css), so the row and the actions stack like
   the variable product's form. */
.product-type-simple form.cart.co-variation-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: 0;
}