/* Compact Product Card Quantity Controls */

.cart-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.quantity-input-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.quantity-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-neutral-600);
    margin: 0;
}
/* Pricing block (compact, no neon) */
.pricing-display { margin-top: 4px; }
.pricing-display .retail-price { color: var(--color-neutral-500); font-size: 12px; }
.pricing-display .price-crossed { text-decoration: line-through; }
.pricing-display .wholesale-price { color: var(--color-neutral-900); font-weight: 700; font-size: 13px; }
.pricing-display .margin-badge { color: var(--color-neutral-600); font-size: 12px; margin-left: 6px; }
.minimum-notice { color: var(--color-neutral-500); font-size: 12px; margin-top: 2px; }

.product-name a, .product-title a { color: var(--color-neutral-900); text-decoration: none; }
.product-name a:hover, .product-title a:hover { color: var(--color-primary-700); text-decoration: none; }


.quantity-input {
    width: 50px;
    height: 28px;
    border: 1px solid var(--color-neutral-300);
    border-radius: 4px;
    text-align: center;
    font-size: 0.75rem;
    padding: 0.25rem;
    background: white;
    transition: border-color 0.2s ease;
}

.quantity-input:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 2px var(--color-primary-100);
}

.quick-add-btn.compact {
    height: 34px;
    padding: 0 0.75rem;
    font-size: 0.8rem;
    border-radius: 999px;
    border: none;
    background: var(--gradient-primary);
    color: white;
    cursor: pointer;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.quick-add-btn.compact:hover:not(:disabled) {
    background: var(--color-primary-600);
    transform: translateY(-1px);
}

.quick-add-btn.compact:disabled {
    background: var(--color-neutral-300);
    cursor: not-allowed;
    transform: none;
}

.quick-add-btn.compact i {
    font-size: 0.9rem;
}

/* Card carousel */
.card-carousel { position: relative; height: 100%; }
.card-carousel img { width: 100%; height: 220px; object-fit: cover; display: block; }
.container-products { padding-left: 3px; padding-right: 3px; }
@media (max-width: 768px) {
  /* grid overrides removed; rely on .product-grid in root.css */
  .card.product-card { width: 100%; border-radius: var(--radius-lg); }
  .card-carousel img { height: 240px; }
}
.carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; }
.carousel-slide.active { opacity: 1; }
.carousel-prev, .carousel-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.35); color: #fff; border: 0; width: 28px; height: 28px; border-radius: 999px; display: flex; align-items:center; justify-content:center; cursor: pointer; }
.carousel-prev { left: 8px; }
.carousel-next { right: 8px; }
.carousel-dots { position: absolute; bottom: 6px; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; }
.carousel-dots button { width: 6px; height: 6px; border-radius: 999px; border: 0; background: rgba(255,255,255,0.6); cursor: pointer; }
.carousel-dots button.active { background: #fff; }

/* Variation selects */
.variation-selects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.variation-select { width: 100%; height: 30px; border: 1px solid var(--color-neutral-300); border-radius: 6px; padding: 0 8px; font-size: 0.85rem; }
.variation-select:focus { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 3px rgba(217,119,6,0.12); }
.color-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #d1d5db; }