/**
 * Single Product — "Style" picker (button grid above the variations).
 *
 * A 3-column responsive grid of pill buttons. The current product's button
 * is filled (active state); siblings are outlined and link out to their
 * own product page. Sits between the short description and the variations
 * block via the woocommerce_single_product_summary hook at priority 25.
 *
 * Visual reference: a flat button grid like Tee Style → Classic / Heavyweight
 * / Extra-Soft / Streetwear / Premium / V-Neck …
 */

/* ====================================================================
   Section wrapper
   ==================================================================== */
.mypod-sp__styles {
    margin: var(--mypod-space-md) 0 var(--mypod-space-lg);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mypod-sp__styles-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mypod-color-text);
}

.mypod-sp__styles-subtitle {
    margin: 0 0 var(--mypod-space-sm);
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--mypod-color-textSecondary);
}

/* ====================================================================
   Button grid
   ==================================================================== */
.mypod-sp__styles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mypod-space-sm);
    margin-top: var(--mypod-space-xs);
}

@media (max-width: 480px) {
    .mypod-sp__styles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ====================================================================
   Pill buttons
   Both <a> and <button> share .mypod-sp__style-btn — keep them visually
   identical regardless of element type.
   ==================================================================== */
.mypod-sp__style-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 12px 16px;
    border: 1.5px solid var(--mypod-color-border);
    border-radius: var(--mypod-radius-lg, 12px);
    background: var(--mypod-color-surface);
    color: var(--mypod-color-text);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.18s ease,
                background 0.18s ease,
                color 0.18s ease,
                transform 0.12s ease,
                box-shadow 0.18s ease;
    /* Defeat any inherited browser button defaults. */
    appearance: none;
    -webkit-appearance: none;
}

.mypod-sp__style-btn__label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Hover / focus on inactive buttons (only the link variants — the active
   button is disabled and shouldn't react to hover). */
.mypod-sp__style-btn:not(.is-active):hover,
.mypod-sp__style-btn:not(.is-active):focus-visible {
    border-color: var(--mypod-color-text);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.mypod-sp__style-btn:focus-visible {
    outline: 2px solid var(--mypod-color-accent);
    outline-offset: 2px;
}

/* ====================================================================
   Active "you are here" button
   Filled, dark, slight shadow — matches the reference design.
   Use the theme's text color so it adapts to dark mode automatically.
   ==================================================================== */
.mypod-sp__style-btn.is-active {
    background: var(--mypod-color-text);
    color: var(--mypod-color-surface);
    border-color: var(--mypod-color-text);
    cursor: default;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* The disabled <button> element shouldn't look greyed out — it's intentional. */
.mypod-sp__style-btn.is-active[disabled] {
    opacity: 1;
    pointer-events: none;
}