/* ======================================================================
   Product variations picker — Cohort 30 (variations-only mix-in)
   Design: #30 Frosted Capsule (from variation-designs-demo)
   Visual: full-pill capsule with subtle vertical gradient (white → light
   grey) + inner top highlight + soft drop. Active = inverted dark gradient
   (charcoal → ink). Apple-OS / premium SaaS button vibe.
   ====================================================================== */

.product-variations-30 .products-variations-grid { gap: 10px; }

.product-variations-30-pill {
    cursor: pointer; user-select: none;
    background: linear-gradient(180deg, var(--bs-body-bg) 0%, #f4f6fa 100%);
    border: 1px solid var(--bs-border-color); border-radius: 999px;
    padding: 10px 20px; margin: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    display: inline-flex; align-items: center; gap: 6px; position: relative;
    font-size: 0.875rem; color: var(--bs-body-color); line-height: 1.3; font-weight: 600;
}
.product-variations-30-pill:hover { border-color: var(--bs-body-color); }
.product-variations-30-pill.active {
    background: linear-gradient(180deg, #2c3340 0%, #111418 100%);
    border-color: #000;
    color: var(--bs-body-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 6px rgba(0, 0, 0, 0.25);
}
.product-variations-30-pill.active .product-variations-30-pill-text { color: var(--bs-body-bg); }
.product-variations-30-pill .product-variations-30-check { display: none !important; }
.product-variations-30-pill .product-variations-30-meta { display: none; }
.product-variations-30-pill .product-variations-30-discount {
    position: absolute !important; top: -8px !important; right: 6px !important; transform: none !important;
    background: var(--bs-danger) !important; color: var(--bs-body-bg) !important;
    border-radius: 999px; padding: 2px 8px !important; font-size: 0.625rem !important;
    line-height: 1.4; font-weight: 700; box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3); z-index: 2;
}

/* COLOR */
.product-variations-30-pill-color {
    padding: 4px !important; width: 44px; height: 44px;
    min-width: 44px; min-height: 44px;
    border: 1px solid var(--bs-border-color); border-radius: 50% !important;
    background: var(--bs-body-bg); background-clip: content-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.06);
    display: inline-flex !important; align-items: center; justify-content: center;
    box-sizing: border-box; transition: border 0.15s ease, box-shadow 0.15s ease;
}
.product-variations-30-pill-color:hover { border-color: var(--bs-body-color); }
.product-variations-30-pill-color .product-variations-30-swatch {
    width: 100% !important; height: 100% !important;
    border-radius: 50% !important; border: 0 !important; box-shadow: none !important;
    display: block !important; flex-shrink: 0;
}
.product-variations-30-pill-color.active {
    border: 1px solid #000;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 3px 8px rgba(0, 0, 0, 0.3),
                0 0 0 2px var(--bs-body-bg), 0 0 0 3px var(--bs-body-color);
}
.product-variations-30-pill-color .product-variations-30-pill-text {
    position: absolute !important; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* IMAGE */
.product-variations-30-pill-image {
    padding: 4px !important; width: 60px; height: 60px;
    min-width: 60px; min-height: 60px;
    border: 1px solid var(--bs-border-color); border-radius: 14px;
    background: var(--bs-body-bg); background-clip: content-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.06);
    display: inline-flex !important; align-items: center; justify-content: center;
    overflow: hidden; position: relative; box-sizing: border-box;
    transition: border 0.15s ease, box-shadow 0.15s ease;
}
.product-variations-30-pill-image:hover { border-color: var(--bs-body-color); }
.product-variations-30-pill-image .product-variations-30-thumb {
    width: 100% !important; height: 100% !important;
    object-fit: cover; border-radius: 10px; border: 0; margin: 0; display: block;
}
.product-variations-30-pill-image.active {
    border: 1px solid #000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28),
                0 0 0 2px var(--bs-body-bg), 0 0 0 3px var(--bs-body-color);
}
.product-variations-30-pill-image .product-variations-30-pill-text {
    position: absolute !important; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.variation-layout-image .product-variations-30-pill { flex-direction: row; }
.variation-layout-image .product-variations-30-thumb { width: 100%; height: 100%; margin: 0; border-radius: 10px; }
.variation-layout-color .product-variations-30-pill { flex-direction: row; padding: 4px; gap: 0; }

/* DISABLED */
.product-variations-30-pill.is-disabled, .ic-single-row.is-disabled {
    opacity: 0.55; cursor: not-allowed !important; pointer-events: none;
    background: var(--bs-secondary-bg); color: var(--bs-secondary-color);
    border-color: var(--bs-border-color); box-shadow: none;
    text-decoration: line-through; text-decoration-thickness: 1px;
}
.product-variations-30-pill-color.is-disabled, .product-variations-30-pill-image.is-disabled {
    text-decoration: none; opacity: 0.5;
}
.product-variations-30-pill.is-disabled:hover { border-color: var(--bs-border-color) !important; }

/* SELECT */
.product-variations-30-select.form-select {
    max-width: 320px; border: 1px solid var(--bs-border-color); border-radius: 999px;
    padding: 11px 38px 11px 20px;
    font-size: 0.875rem; line-height: 1.3; font-weight: 600;
    background-color: transparent; color: var(--bs-body-color);
    background-image: linear-gradient(180deg, var(--bs-body-bg) 0%, #f4f6fa 100%),
                      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23111418' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-position: 0 0, right 14px center;
    background-repeat: no-repeat, no-repeat;
    background-size: auto, 12px 9px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.04);
    cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.product-variations-30-select.form-select:hover { border-color: var(--bs-body-color); }
.product-variations-30-select.form-select:focus {
    border-color: #000;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 3px 8px rgba(0, 0, 0, 0.15);
    outline: 0;
}
.product-variations-30-select.form-select:disabled { opacity: 0.5; cursor: not-allowed; }

.product-variations-30-axis-head .products-variations-label-text {
    font-size: 0.875rem !important; font-weight: 600 !important; color: var(--bs-body-color) !important;
}
.product-variations-30-axis-head .products-variations-count { font-size: 0.75rem !important; color: var(--bs-secondary-color) !important; }
.product-variations-30-axis-selected.products-variations-axis-selected {
    font-size: 0.75rem !important; color: var(--bs-body-color) !important; font-weight: 700 !important;
}

.bundle-pill.btn.btn-outline-secondary.active,
.bundle-pill.btn.btn-outline-secondary:has(.bundle-pill-input:checked) {
    background: linear-gradient(180deg, #2c3340 0%, #111418 100%);
    border-color: #000; color: var(--bs-body-bg);
}
.product-variations-30-visual { margin: 0; }