/**
 * GBB Color Swatch Tabs - Stylesheet v3.0
 * Premium Pill Design — GBB brand colors + 画眼计划 DOS 5-state
 *
 * v3.0 changes:
 * - Text-only tabs → Premium pill buttons with background + border
 * - Inactive: light gray pill #f4f4f4, dark text #444
 * - Active: solid GBB black #191919, white text, gold #b4a996 count badge
 * - Hover: translateY(-2px) + shadow (Material easing)
 * - Focus: 3px gold outline for keyboard accessibility
 * - Font: Poppins 13px weight 600 (brand standard)
 * - Scrollbar thumb hover: gold accent
 *
 * v2.2: Custom scrollbar always visible (iOS/mobile fix)
 */

/* ===== Variations table → block layout ===== */
table.variations {
    display: block !important;
    table-layout: auto !important;
    width: 100% !important;
}

table.variations tbody {
    display: block;
}

table.variations tr {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: flex-start;
}

table.variations th.label {
    width: 70px !important;
    flex-shrink: 0;
}

table.variations td.value {
    flex: 1;
    min-width: 0;
}

/* ===== Tab Navigation — Premium Pill Design v3.0 ===== */
/* GBB brand: Black #191919 + Gold #b4a996 + Poppins */
/* 画眼计划 DOS: 5 states (default/hover/active/press/focus) */

.gbb-swatch-tabs-nav {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
    padding: 4px 0 8px 0 !important;
    border-bottom: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gbb-swatch-tabs-nav::-webkit-scrollbar {
    display: none;
}

/* ===== Custom persistent scrollbar (always visible on all devices) ===== */
.gbb-swatch-scrollbar-wrap {
    width: 100%;
    height: 6px;
    margin-bottom: 14px;
    display: none;
}

.gbb-swatch-scrollbar-track {
    width: 100%;
    height: 6px;
    background: #ececec;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.gbb-swatch-scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 6px;
    min-width: 24px;
    background: #b0b0b0;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.2s ease;
    will-change: transform;
}

.gbb-swatch-scrollbar-thumb:hover {
    background: #b4a996; /* Gold on hover */
}

.gbb-swatch-scrollbar-thumb:active {
    background: #191919;
}

/* ===== Tab Pills — 5 States (画眼计划 §4) ===== */

/* 1. Default state — light pill */
.gbb-swatch-tab {
    flex-shrink: 0;
    background: #f4f4f4 !important;
    border: 1.5px solid #e4e4e4 !important;
    border-radius: 22px !important;
    padding: 8px 22px !important;
    margin: 0 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    color: #444 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    outline: none !important;
    -webkit-appearance: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 2. Hover state — lift + shadow + darker bg */
.gbb-swatch-tab:hover {
    background: #ebebeb !important;
    border-color: #d0d0d0 !important;
    color: #191919 !important;
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

/* 3. Active/Selected state — solid GBB black + gold accent */
.gbb-swatch-tab.gbb-tab-active {
    background: #191919 !important;
    border-color: #191919 !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 3px 14px rgba(25, 25, 25, 0.3);
}

.gbb-swatch-tab.gbb-tab-active:hover {
    background: #191919 !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 18px rgba(25, 25, 25, 0.35);
}

/* 4. Press state */
.gbb-swatch-tab:active {
    transform: scale(0.96);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* 5. Focus state — keyboard accessibility */
.gbb-swatch-tab:focus-visible {
    outline: 3px solid #b4a996;
    outline-offset: 2px;
}

/* ===== Count Badge — gold accent on active ===== */
.gbb-tab-count {
    font-size: 12px !important;
    color: #999 !important;
    font-weight: 500 !important;
    text-transform: none !important;
    margin-left: 4px;
    transition: color 0.3s ease;
}

.gbb-swatch-tab:hover .gbb-tab-count {
    color: #777 !important;
}

/* Active tab: gold count badge (GBB brand accent) */
.gbb-swatch-tab.gbb-tab-active .gbb-tab-count {
    color: #b4a996 !important;
    font-weight: 600 !important;
}

/* ===== Swatch container ===== */
.ep-variation-swatches.gbb-tabs-initialized {
    margin-top: 0 !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.gbb-tabs-initialized .ep-variation-swatches__wrapper,
.gbb-tabs-initialized ul.ep-variation-swatches__wrapper {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
}

/* ===== LARGER SWATCH THUMBNAILS — tighter spacing ===== */
/* v1.0: 34x34 container, 30x30 image, margin 6px → 9/row in 464px */
/* v2.0: 52x52 container, 48x48 image, margin 6px → 9/row in 565px */
/* v2.1: 56x56 container, 52x52 image, margin 4px → 9/row in 565px, +17% image area */
/* v3.0: 64x64 container, 60x60 image, margin 2px → 8/row in 555px, +33% image area */

.ep-variation-swatches__item {
    width: 64px !important;
    height: 64px !important;
    margin: 0 2px 8px 0 !important;
}

.ep-variation-swatches__item img {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover !important;
}

/* Selected swatch — ring */
.ep-variation-swatches__item.selected {
    box-shadow: 0 0 0 2px #1a1a1a !important;
}

/* Hover state */
.ep-variation-swatches__item:hover {
    box-shadow: 0 0 0 2px #ccc !important;
}

/* Size dropdown */
table.variations select {
    width: 100% !important;
    max-width: 100% !important;
}

/* ===== Color row: full-width layout ===== */
table.variations tr:has(label[for="pa_color"]) th.label {
    flex-basis: 100% !important;
    width: 100% !important;
    padding: 0 0 8px 0 !important;
}

table.variations tr:has(label[for="pa_color"]) td.value {
    flex-basis: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .gbb-swatch-tab {
        padding: 6px 18px !important;
        font-size: 12px !important;
    }

    .gbb-swatch-tabs-nav {
        gap: 6px !important;
    }

    .ep-variation-swatches__item {
        width: 56px !important;
        height: 56px !important;
        margin: 0 2px 6px 0 !important;
    }

    .ep-variation-swatches__item img {
        width: 52px !important;
        height: 52px !important;
    }
}