/* === Browse-by-pantry — homepage pantry-category circles ==============
 *
 * Pantry-category nav row on the homepage. Two tabs ("By type", "By region")
 * each swap in a row of circular taxonomy thumbnails (flour, butter, sugar…
 * vs France, Italy, Mexico…). Tabs are driven by hidden radios, so no JS is
 * required — :has() + sibling selectors do the panel toggle.
 */
.sb-browse-by-pantry {
    /* Wrapper padding is set inline via the block-group style attribute. */
}
.sb-browse-by-pantry__tabs {
    display: flex;
    justify-content: center;
    gap: var(--wp--preset--spacing--md);
    margin: 0 0 var(--wp--preset--spacing--sm-plus);
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--caption);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
}
.sb-browse-by-pantry__tab {
    color: rgba(132, 87, 47, 0.55);
    text-decoration: none;
    padding-bottom: var(--wp--preset--spacing--xxs);
    border-bottom: 1.5px solid transparent;
    transition: color 120ms, border-color 120ms;
    cursor: pointer;
}
/* Visually-hide the radios — they exist for state, not visual. */
.sb-browse-by-pantry__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
}
/* Active-tab styling driven by which radio is :checked. */
.sb-browse-by-pantry:has(#tab-by-type:checked) .sb-browse-by-pantry__tab[for="tab-by-type"],
.sb-browse-by-pantry:has(#tab-by-region:checked) .sb-browse-by-pantry__tab[for="tab-by-region"] {
    color: var(--wp--preset--color--saddle);
    border-color: var(--wp--preset--color--saddle);
}
/* Visible focus ring when keyboard-tabbing onto a hidden radio. */
.sb-browse-by-pantry__radio:focus-visible + .sb-browse-by-pantry__radio + .sb-browse-by-pantry__tabs .sb-browse-by-pantry__tab,
.sb-browse-by-pantry__radio:focus-visible ~ .sb-browse-by-pantry__tabs .sb-browse-by-pantry__tab {
    outline: none;
}
.sb-browse-by-pantry:has(#tab-by-type:focus-visible) .sb-browse-by-pantry__tab[for="tab-by-type"],
.sb-browse-by-pantry:has(#tab-by-region:focus-visible) .sb-browse-by-pantry__tab[for="tab-by-region"] {
    outline: 2px solid var(--wp--preset--color--saddle);
    outline-offset: 4px;
    border-radius: 3px;
}

/* Panel toggle — show only the panel matching the checked radio. */
.sb-browse-by-pantry__panel {
    display: none;
}
.sb-browse-by-pantry:has(#tab-by-type:checked)   [data-panel="by-type"],
.sb-browse-by-pantry:has(#tab-by-region:checked) [data-panel="by-region"] {
    display: block;
}
.sb-browse-by-pantry__circles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    padding: 0;
}
.sb-browse-by-pantry__circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}
.sb-browse-by-pantry__circle-disc {
    display: block;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 1.5px solid var(--wp--preset--color--saddle);
    background-color: var(--wp--preset--color--sugar);
    background-size: cover;
    background-position: center;
    transition: transform 120ms ease;
}
.sb-browse-by-pantry__circle:hover .sb-browse-by-pantry__circle-disc {
    transform: scale(1.04);
}
.sb-browse-by-pantry__circle-label {
    font-family: var(--wp--preset--font-family--cormorant);
    font-size: var(--wp--preset--font-size--aside-body);
    font-style: italic;
    color: var(--wp--preset--color--ink);
}