/* ============================================================
   WEB Variation Swatches — Frontend Styles
   ============================================================ */

/* ── Wrapper replaces the <select> row ────────────────────── */
.web-swatch-row {
    margin-bottom: 12px;
}

.web-swatch-row-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: inherit;
}

.web-swatch-row-label .web-swatch-selected-name {
    font-weight: 400;
    opacity: 0.7;
    margin-left: 4px;
}

/* ── Swatch button list ───────────────────────────────────── */
.web-swatch-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── Base swatch button ──────────────────────────────────── */
.web-swatch-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;      /* overridden inline from PHP settings */
    height: 36px;
    cursor: pointer;
    border: 2px solid transparent;
    outline: none;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.1s, opacity 0.15s;
    background: none;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.web-swatch-btn:hover {
    transform: scale(1.06);
}

/* ── Shape modifiers ─────────────────────────────────────── */
.web-swatch-btn.web-shape-square {
    border-radius: 3px;
}

.web-swatch-btn.web-shape-rounded {
    border-radius: 8px;
}

.web-swatch-btn.web-shape-circle {
    border-radius: 50%;
}

/* ── Color swatch ────────────────────────────────────────── */
.web-swatch-btn.web-swatch-color .web-swatch-color-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* ── Image swatch ────────────────────────────────────────── */
.web-swatch-btn.web-swatch-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

/* ── Label swatch ────────────────────────────────────────── */
.web-swatch-btn.web-swatch-label {
    background: #f0f0f0;
    border-color: #d0d0d0;
    color: #333;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    padding: 0 10px;
    width: auto;        /* label swatches size to their text */
    min-width: 36px;
}

.web-swatch-btn.web-swatch-label:hover {
    border-color: #999;
    background: #e5e5e5;
}

/* ── Selected state ──────────────────────────────────────── */
.web-swatch-btn.web-swatch-selected {
    border-color: #111 !important;
    box-shadow: 0 0 0 1px #111;
}

.web-swatch-btn.web-swatch-label.web-swatch-selected {
    background: #111;
    color: #fff;
    border-color: #111 !important;
}

/* ── Out-of-stock: cross-out ─────────────────────────────── */
.web-swatch-btn.web-swatch-oos-cross {
    opacity: 0.45;
    cursor: not-allowed;
}

.web-swatch-btn.web-swatch-oos-cross::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom right,
        transparent calc(50% - 1px),
        rgba(180,0,0,0.55) calc(50% - 1px),
        rgba(180,0,0,0.55) calc(50% + 1px),
        transparent calc(50% + 1px)
    );
    pointer-events: none;
    border-radius: inherit;
}

/* ── Out-of-stock: hidden ────────────────────────────────── */
.web-swatch-btn.web-swatch-oos-hidden {
    display: none !important;
}

/* ── Tooltip ─────────────────────────────────────────────── */
.web-swatch-btn[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.78);
    color: #fff;
    font-size: 11px;
    white-space: nowrap;
    padding: 3px 8px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 99;
}

.web-swatch-btn[data-tooltip]::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(0,0,0,0.78);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 99;
}

.web-swatch-btn[data-tooltip]:hover::before,
.web-swatch-btn[data-tooltip]:hover::after {
    opacity: 1;
}

/* ── Hide tooltip globally when disabled ─────────────────── */
.web-swatches-no-tooltip .web-swatch-btn[data-tooltip]::before,
.web-swatches-no-tooltip .web-swatch-btn[data-tooltip]::after {
    display: none !important;
}

/* ── Hide the original <select> (we replace it) ─────────── */
.web-swatch-select-hidden {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* ── Gallery transition ──────────────────────────────────── */

/* Desktop: stacked image column */
.web-d-gallery-stack {
    transition: opacity 0.25s ease;
}
.web-d-gallery-stack.web-gallery-loading {
    opacity: 0.4;
    pointer-events: none;
}

/* Mobile: slider track swap */
.web-mob-slider-track {
    transition: opacity 0.2s ease;
}
.web-mob-slider.web-gallery-loading .web-mob-slider-track {
    opacity: 0.35;
}

/* ── Responsive: slightly smaller swatches on very narrow screens ── */
@media ( max-width: 400px ) {
    .web-swatch-btn {
        min-width: 30px;
        min-height: 30px;
    }
}

/* ============================================================
   Mobile sticky bar — swatch row overrides
   Ensure our injected swatch rows display correctly inside
   the WC variations table when it is inside the sticky bar
   ============================================================ */

/* Make sure the native hidden select doesn't take space in mobile */
.web-mob-wc-form-wrap .web-swatch-select-hidden {
    display: none !important;
    height: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* Swatch row wrapper inside mobile sticky bar */
.web-mob-wc-form-wrap .web-swatch-row {
    display: block !important;
    width: 100% !important;
    margin-bottom: 2px !important;
}

/* Label row inside mobile */
.web-mob-wc-form-wrap .web-swatch-row-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #111 !important;
    margin-bottom: 6px !important;
}

/* Swatch list inside mobile sticky bar — wrap if needed */
.web-mob-wc-form-wrap .web-swatch-list {
    flex-wrap: wrap !important;
    gap: 5px !important;
}

/* Slightly smaller swatches on mobile to fit the bar */
.web-mob-wc-form-wrap .web-swatch-btn {
    min-width: 32px !important;
    min-height: 32px !important;
}

/* Label type swatches on mobile — compact */
.web-mob-wc-form-wrap .web-swatch-btn.web-swatch-label {
    padding: 0 10px !important;
    font-size: 12px !important;
    min-height: 32px !important;
    line-height: 32px !important;
}

/* ── Sticky bar: compact swatches ── */
.web-mob-sticky-bar .web-swatch-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
}

.web-mob-sticky-bar .web-swatch-btn.web-swatch-label {
    font-size: 11px !important;
    padding: 0 8px !important;
    min-height: 28px !important;
    line-height: 28px !important;
    width: auto !important;
    min-width: 28px !important;
}

.web-mob-sticky-bar .web-swatch-row-label {
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 4px !important;
}

.web-mob-sticky-bar .web-swatch-row {
    gap: 4px !important;
    margin-bottom: 6px !important;
}