/* =========================
   Swatches (theme-aware)
========================= */

/* Base swatch */
.color-swatch,
.product-colors .color-swatch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    /* keep contrast ring even on light colors */
    border: 2px solid color-mix(in srgb, var(--surface-color), var(--default-color) 10%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--default-color), transparent 90%) inset;
    transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.08s ease;
    -webkit-tap-highlight-color: transparent;
}

    /* Keyboard focus only */
    .color-swatch:focus-visible,
    .product-colors .color-swatch:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 75%), 0 0 0 1px color-mix(in srgb, var(--default-color), transparent 88%) inset;
    }

    /* Active (selected) */
    .color-swatch.active,
    .color-swatch[aria-pressed="true"],
    .product-colors .color-swatch.active,
    .product-colors .color-swatch[aria-pressed="true"] {
        transform: scale(1.06);
        border-color: color-mix(in srgb, var(--default-color), transparent 70%);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--default-color), transparent 88%), 0 0 0 1px color-mix(in srgb, var(--default-color), transparent 90%) inset;
    }

    /* Hidden label (if you keep it for screen readers, use .sr-only instead of display:none) */
    .color-swatch .swatch-label,
    .product-colors .color-swatch .swatch-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }

    /* Check icon */
    .product-colors .color-swatch .swatch-check {
        display: none;
        font-size: 14px;
        line-height: 1;
        position: absolute;
        transform: translateY(-1px);
        pointer-events: none;
        /* visible on both dark/light swatches */
        color: #fff;
        text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    }

    /* Show check when selected */
    .product-colors .color-swatch.active .swatch-check,
    .product-colors .color-swatch[aria-pressed="true"] .swatch-check {
        display: block;
    }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .color-swatch,
    .product-colors .color-swatch {
        transition: none;
    }
}


/* =========================
   Size buttons
========================= */
.size-btn {
    min-width: 48px;
}

    .size-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 75%);
    }


/* =========================
   Modal image
========================= */
#addToCartModal .main-image {
    max-height: 220px;
    object-fit: contain;
}


/* =========================
   Quantity controls
========================= */
.quantity-selector .quantity-input {
    width: 64px;
}

.quantity-selector .btn {
    min-width: 44px;
}


/* =========================
   Add-to-cart button (scoped)
   Keep !important only here because Bootstrap/other rules often win.
========================= */
button.add-to-cart-btn,
a.add-to-cart-btn {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: var(--contrast-color, #fff) !important;
    -webkit-tap-highlight-color: transparent;
}

    button.add-to-cart-btn:hover,
    a.add-to-cart-btn:hover {
        background-color: color-mix(in srgb, var(--accent-color), black 10%) !important;
        border-color: color-mix(in srgb, var(--accent-color), black 10%) !important;
    }

    button.add-to-cart-btn:active,
    a.add-to-cart-btn:active,
    button.add-to-cart-btn.active,
    a.add-to-cart-btn.active {
        background-color: color-mix(in srgb, var(--accent-color), black 20%) !important;
        border-color: color-mix(in srgb, var(--accent-color), black 20%) !important;
        transform: translateY(0.4px);
        box-shadow: none !important;
    }

    button.add-to-cart-btn:focus-visible,
    a.add-to-cart-btn:focus-visible {
        outline: none !important;
        box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent-color), transparent 70%) !important;
    }

    /* Disabled */
    button.add-to-cart-btn:disabled,
    button.add-to-cart-btn.disabled,
    a.add-to-cart-btn.disabled {
        background-color: color-mix(in srgb, var(--accent-color), white 70%) !important;
        border-color: color-mix(in srgb, var(--accent-color), white 70%) !important;
        color: color-mix(in srgb, var(--default-color), transparent 10%) !important;
        cursor: not-allowed;
        pointer-events: none;
        opacity: 0.75;
    }


/* =========================
   Modal container style (theme-aware)
========================= */
.modal-style {
    background-color: var(--surface-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
}


#addToCartModal .modal-header,
#addToCartModal .modal-footer {
    border-color: color-mix(in srgb, var(--default-color), transparent 85%);
}

#addToCartModal .product-category,
#addToCartModal .original-price {
    color: var(--muted-color);
}

#addToCartModal .modal-content {
    background: var(--surface-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}