/**
 * vsd-frontend.css  v1.4.0
 * Styles for the Variation Tab UI injected before the short description.
 */

/* ── Hide original WooCommerce variation table ────────────────────────────
   Our tab UI fully replaces this. JS also hides it after build, but this
   CSS prevents a flash of the original before JS runs.
   ─────────────────────────────────────────────────────────────────────── */
form.variations_form table.variations {
    display: none !important;
}

/* ── Tab wrapper ──────────────────────────────────────────────────────────── */
.vsd-variation-tabs-wrapper {
    margin: 12px 0 18px;
    font-family: inherit;
}

/* ── One group per attribute (e.g. "Paper Type") ─────────────────────────── */
.vsd-tab-group {
    margin-bottom: 14px;
}

.vsd-tab-group:last-child {
    margin-bottom: 0;
}

/* ── Attribute label (e.g. "PAPER TYPE") ─────────────────────────────────── */
.vsd-tab-attr-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 9px;
}

/* ── Tab grid ─────────────────────────────────────────────────────────────── */
/*
 * MOBILE (default): flex-wrap so wide buttons drop to the next row
 * instead of overflowing the screen edge.
 */
.vsd-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

/* DESKTOP (641px+): same flex behaviour, no change needed. */
@media (min-width: 641px) {
    .vsd-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }
}

/* ── Single tab button ────────────────────────────────────────────────────── */
.vsd-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* auto-size to content on mobile; max-width prevents screen overflow */
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 9px 10px;
    border: 1.5px solid #c8c8c8;
    background: #ffffff;
    color: #2d2d2d;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    border-radius: 2px;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
        box-shadow 0.18s ease;
    line-height: 1.3;
    outline: none;
    box-shadow: none;
    word-break: break-word;
    hyphens: auto;
}

/* On desktop the flex items size to content */
@media (min-width: 641px) {
    .vsd-tab {
        width: auto;
        padding: 8px 18px;
        font-size: 12px;
        word-break: normal;
        hyphens: none;
    }
}

/* Hover */
.vsd-tab:hover:not(.vsd-tab--active) {
    border-color: #1a1a1a;
    background: #f4f4f4;
    color: #1a1a1a;
}

/* Active / selected */
.vsd-tab--active {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.13);
    cursor: default;
}

/* Accessibility focus ring */
.vsd-tab:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 3px;
}