/* Consolidated pattern CSS — generated by features/_loader/patterns.php. Do not edit. */

/* ==== patterns/archive-control/archive-control-sort-bar/style.css ==== */
/* === Archive sort bar (Type/Region/All recipes archives) === */
.sb-archive-control-sort-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 var(--wp--preset--spacing--lg) calc(var(--wp--preset--spacing--sm-plus) + var(--wp--preset--spacing--xxs));
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--meta);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--wp--preset--color--saddle);
    font-weight: 600;
}
.sb-archive-control-sort-bar__results {
    color: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
    font-weight: 500;
}
.sb-archive-control-sort-bar__form {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.sb-archive-control-sort-bar__label {
    color: var(--wp--preset--color--saddle);
}
.sb-archive-control-sort-bar__form select {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--meta);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 600;
    color: var(--wp--preset--color--saddle);
    background: transparent;
    border: 1.5px solid var(--wp--preset--color--saddle);
    border-radius: 999px;
    padding: calc(var(--wp--preset--spacing--xs) - var(--wp--preset--spacing--xxs) / 2) var(--wp--preset--spacing--md-plus) calc(var(--wp--preset--spacing--xs) - var(--wp--preset--spacing--xxs) / 2) calc(var(--wp--preset--spacing--sm-plus) - var(--wp--preset--spacing--xxs));
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--wp--preset--color--saddle) 50%), linear-gradient(135deg, var(--wp--preset--color--saddle) 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.sb-archive-control-sort-bar__go {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--meta);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 600;
    background: var(--wp--preset--color--saddle);
    color: var(--wp--preset--color--paper);
    border: 0;
    padding: calc(var(--wp--preset--spacing--xs) - var(--wp--preset--spacing--xxs) / 2) calc(var(--wp--preset--spacing--sm-plus) - var(--wp--preset--spacing--xxs));
    border-radius: 999px;
    cursor: pointer;
}

/* === View Transitions name (Task 5) ===
   Named here so the browser crossfades this region independently when the
   axis/term/sort changes. */
@supports (view-transition-name: a) {
    .sb-archive-control-sort-bar { view-transition-name: sb-archive-sort; }
}

/* === Responsive === */
@media (max-width: 800px) {
    .sb-archive-control-sort-bar {
        padding-left: var(--wp--preset--spacing--sm);
        padding-right: var(--wp--preset--spacing--sm);
    }
}


/* ==== patterns/archive-control/archive-control-sub-tabs/style.css ==== */
/* === Archive sub-tabs (By Type / By Region axis toggle) === */
.sb-archive-control-sub-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-bottom: 1px solid var(--wp--preset--color--saddle);
    margin: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md-plus);
}
.sb-archive-control-sub-tabs__tab {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--meta);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-weight: 600;
    color: var(--wp--preset--color--saddle);
    padding: calc(var(--wp--preset--spacing--xs) + var(--wp--preset--spacing--xxs)) var(--wp--preset--spacing--md);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    text-decoration: none;
    transition: color .15s, border-color .15s;
}
.sb-archive-control-sub-tabs__tab:hover { color: var(--wp--preset--color--ink); }
.sb-archive-control-sub-tabs__tab.is-active {
    color: var(--wp--preset--color--ink);
    border-color: var(--wp--preset--color--ink);
}

/* === View Transitions name (Task 5) === */
@supports (view-transition-name: a) {
    .sb-archive-control-sub-tabs { view-transition-name: sb-archive-tabs; }
}

/* === Responsive === */
@media (max-width: 800px) {
    .sb-archive-control-sub-tabs {
        margin: 0 var(--wp--preset--spacing--sm) calc(var(--wp--preset--spacing--sm) + var(--wp--preset--spacing--xxs));
    }
}


/* ==== patterns/archive-control/archive-control-term-chips/style.css ==== */
/* === Archive term chips (sibling terms in the active taxonomy axis) === */
.sb-archive-control-term-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 0 var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
}
.sb-archive-control-term-chips__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--meta);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 600;
    padding: calc(var(--wp--preset--spacing--xs) - var(--wp--preset--spacing--xxs) / 4) calc(var(--wp--preset--spacing--sm-plus) - var(--wp--preset--spacing--xxs));
    border: 1px solid var(--wp--preset--color--saddle);
    border-radius: 999px;
    color: var(--wp--preset--color--saddle);
    background: color-mix(in srgb, var(--wp--preset--color--sugar) 40%, transparent);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.sb-archive-control-term-chips__chip:hover {
    background: var(--wp--preset--color--saddle);
    color: var(--wp--preset--color--paper);
}
.sb-archive-control-term-chips__chip.is-on {
    background: var(--wp--preset--color--saddle);
    color: var(--wp--preset--color--paper);
}
.sb-archive-control-term-chips__chip-count {
    opacity: 0.7;
    font-weight: 500;
    margin-left: calc(var(--wp--preset--spacing--xxs) / 2);
}

/* === View Transitions name (Task 5) === */
@supports (view-transition-name: a) {
    .sb-archive-control-term-chips { view-transition-name: sb-archive-chips; }
}

/* === Responsive === */
@media (max-width: 800px) {
    .sb-archive-control-term-chips {
        padding-left: var(--wp--preset--spacing--sm);
        padding-right: var(--wp--preset--spacing--sm);
    }
}


/* ==== patterns/article/affiliate-disclosure/style.css ==== */
/* === Affiliate disclosure footnote ===================================
 * Quiet paper-on-paper footnote. Insert at the top of any post that
 * contains affiliate links. Reads as a low-key disclosure, not chrome.
 * Distinct from .sb-coffee-tip (Butter sign-off) and .sb-aside-callout
 * (Sugar related-link box). */
.sb-affiliate-disclosure {
    padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg);
}
.sb-affiliate-disclosure p {
    font-family: var(--wp--preset--font-family--lora);
    font-style: italic;
    font-size: var(--wp--preset--font-size--caption);
    line-height: 1.65;
    color: color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent);
    margin: 0;
}
.sb-affiliate-disclosure__mark {
    color: var(--wp--preset--color--saddle);
    opacity: 0.55;
    font-style: normal;
    margin-right: var(--wp--preset--spacing--xxs);
    font-size: var(--wp--preset--font-size--small);
    vertical-align: -1px;
}
.sb-affiliate-disclosure a {
    color: var(--wp--preset--color--saddle);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--saddle) 40%, transparent);
    padding-bottom: 1px;
    font-style: italic;
}
.sb-affiliate-disclosure a:hover {
    border-bottom-color: var(--wp--preset--color--saddle);
}
@media (max-width: 600px) {
    .sb-affiliate-disclosure { padding: var(--wp--preset--spacing--sm); }
}


/* ==== patterns/article/article-aside/style.css ==== */
/* === Article aside (Sugar-Cookie callout) =============================
 * Long-form article aside: a Sugar Cookie box with a saddle left rule,
 * eyebrow + heading + body + "Continue reading" link. Distinct from
 * .sb-aside-callout (the inline-styled simpler cross-link box) — this
 * one is the fuller-blown side note with its own title. */
.sb-article-aside {
    background: var(--wp--preset--color--sugar);
    border-left: 3px solid var(--wp--preset--color--saddle);
    /* 22 = sm-plus (18) + xxs (4);  26 = md (24) + xxs/2 (2) */
    padding: calc(var(--wp--preset--spacing--sm-plus) + var(--wp--preset--spacing--xxs)) calc(var(--wp--preset--spacing--md) + var(--wp--preset--spacing--xxs) / 2);
    /* 32 = md (24) + xs (8) */
    margin: calc(var(--wp--preset--spacing--md) + var(--wp--preset--spacing--xs)) auto;
    max-width: 720px;
    font-family: var(--wp--preset--font-family--cormorant);
}
.sb-article-aside__eyebrow {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--eyebrow);
    text-transform: uppercase;
    letter-spacing: .25em;
    color: var(--wp--preset--color--saddle);
    font-weight: 600;
    /* 6 = xs (8) - xxs/2 (2) */
    margin: 0 0 calc(var(--wp--preset--spacing--xs) - var(--wp--preset--spacing--xxs) / 2);
}
.sb-article-aside__title {
    font-family: var(--wp--preset--font-family--cormorant);
    font-size: var(--wp--preset--font-size--heading);
    font-weight: 600;
    margin: 0 0 var(--wp--preset--spacing--xs);
}
.sb-article-aside p {
    font-family: var(--wp--preset--font-family--lora);
    font-size: var(--wp--preset--font-size--aside-body);
    line-height: 1.65;
    /* 10 = xs (8) + xxs/2 (2) */
    margin: 0 0 calc(var(--wp--preset--spacing--xs) + var(--wp--preset--spacing--xxs) / 2);
    color: var(--wp--preset--color--ink);
}
.sb-article-aside p::first-letter { font-size: inherit; float: none; margin: 0; color: inherit; font-weight: inherit; }
.sb-article-aside__link {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--meta);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .25em;
    color: var(--wp--preset--color--saddle);
    text-decoration: none;
}
.sb-article-aside__link::after { content: " →"; }


/* ==== patterns/article/aside-callout-substitution/style.css ==== */
/* No dedicated CSS — palette comes from block attributes (backgroundColor=pool,
 * inline border-color, inline eyebrow color). Reuses .sb-aside-callout shape. */
.sb-aside-callout-substitution {}


/* ==== patterns/article/aside-callout-warning/style.css ==== */
/* No dedicated CSS — palette comes from block attributes (backgroundColor=rust,
 * inline border-color, inline eyebrow color). Reuses .sb-aside-callout shape. */
.sb-aside-callout-warning {}


/* ==== patterns/article/aside-callout/style.css ==== */
/* No dedicated CSS — styling comes from block attributes (backgroundColor,
 * border, padding) and inline styles on the inner paragraphs. The empty
 * rule below exists so the wrapper-class linter (R1) has something to
 * inspect. */
.sb-aside-callout {}


/* ==== patterns/article/author-bio/style.css ==== */
/* No dedicated CSS — styling comes from block attributes (backgroundColor,
 * border, padding, margin, blockGap) and inline typography styles on each
 * inner block. The empty rule below exists so the wrapper-class linter
 * (R1) has something to inspect. */
.sb-author-bio {}


/* ==== patterns/article/coffee-tip/style.css ==== */
/* === Coffee tip jar (in-body BMAC sign-off) ===========================
 * Butter sign-off — the "author / aside" palette per BRAND.md — so it
 * reads as a personal thank-you rather than chrome. Distinct from
 * .sb-aside-callout (Sugar related-link box) and
 * .sb-affiliate-disclosure (paper-on-paper footnote). Insert near the
 * end of a post, after the recipe block, before the reviews. */
.sb-coffee-tip {
    background-color: var(--wp--preset--color--butter);
    /* 36 = lg */
    padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
    max-width: 520px;
    margin: var(--wp--preset--spacing--lg) auto;
    text-align: center;
}
.sb-coffee-tip__eyebrow {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--eyebrow);
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--wp--preset--color--saddle);
    /* 12 = xs (8) + xxs (4) */
    margin: 0 0 calc(var(--wp--preset--spacing--xs) + var(--wp--preset--spacing--xxs));
}
.sb-coffee-tip__mark {
    /* 6 = xs (8) - xxs/2 (2) */
    margin-right: calc(var(--wp--preset--spacing--xs) - var(--wp--preset--spacing--xxs) / 2);
    opacity: .7;
    /* Snapped from original 11px to the meta token (10) on the ✦ glyph. */
    font-size: var(--wp--preset--font-size--meta);
    vertical-align: -1px;
}
.sb-coffee-tip__body {
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    font-weight: 400;
    font-size: var(--wp--preset--font-size--body);
    line-height: 1.5;
    color: var(--wp--preset--color--ink);
    /* 14 = sm (16) - xxs/2 (2) */
    margin: 0 auto calc(var(--wp--preset--spacing--sm) - var(--wp--preset--spacing--xxs) / 2);
    max-width: 440px;
}
.sb-coffee-tip__cta {
    display: inline-block;
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    font-size: var(--wp--preset--font-size--cta);
    color: var(--wp--preset--color--saddle);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--saddle) 40%, transparent);
    /* 2 = xxs/2 */
    padding-bottom: calc(var(--wp--preset--spacing--xxs) / 2);
}
.sb-coffee-tip__cta:hover {
    border-bottom-color: var(--wp--preset--color--saddle);
}
@media (max-width: 600px) {
    /* 20 = sm-plus (18) + xxs/2 (2) */
    .sb-coffee-tip { padding: var(--wp--preset--spacing--md) calc(var(--wp--preset--spacing--sm-plus) + var(--wp--preset--spacing--xxs) / 2); }
    .sb-coffee-tip__body { font-size: var(--wp--preset--font-size--cta); }
}


/* ==== patterns/article/cookbook-alternating-step/style.css ==== */
/* Alternate row direction so every other row reverses image/text.
 * Desktop only — at mobile widths core Columns already stacks vertically. */
@media (min-width: 782px) {
  .sb-cookbook-alternating-step .sb-cookbook-alternating-step__row:nth-child(even) {
    flex-direction: row-reverse;
  }
}


/* ==== patterns/article/pull-quote-no-attribution/style.css ==== */
/* No dedicated CSS — reuses .sb-pull-quote saddle-rule styling. */
.sb-pull-quote-no-attribution {}


/* ==== patterns/article/pull-quote/style.css ==== */
/* No dedicated CSS — styling comes from block attributes (borders, padding,
 * margin) and inline typography on the inner paragraphs. The empty rule
 * below exists so the wrapper-class linter (R1) has something to inspect. */
.sb-pull-quote {}


/* ==== patterns/article/section-header/style.css ==== */
/* No dedicated CSS — styling comes from block attributes (padding via
 * spacing tokens) and inline typography on the inner heading + paragraphs.
 * The empty rule below exists so the wrapper-class linter (R1) has
 * something to inspect. */
.sb-section-header {}


/* ==== patterns/collection/collection-list/style.css ==== */
/* === Collection roman list ============================================
 *
 * Roman-numeral list of curated items shown on a single-collection page,
 * directly below the hero. Renders recipes (with recipe_type · region
 * eyebrow + total time + rating) and articles (with "Article · {category}"
 * eyebrow, no time/rating). Reads `sb_collection_get_items()` (global
 * helper in features/collections/) — see that feature's README for the
 * data shape.
 *
 * Wrapper class renamed from `.sb-coll-list` → `.sb-collection-list`
 * (R1 wrapper-class compliance against the `collection-list` slug). All
 * BEM children renamed accordingly. Markup is fully PHP-rendered server-
 * side (the pattern returns a `core/html` block), so no saved post content
 * references the old class names — no legacy CSS alias needed.
 *
 * Distinct from:
 *   - patterns/hero/hero-collection/ — single-collection page HEADER
 *     (text + 4:5 lead image, Pool-Water background). This pattern
 *     renders the curated item LIST below the header.
 */
.sb-collection-list { list-style: none; margin: 0; padding: 0; }
.sb-collection-list__item {
    display: grid;
    grid-template-columns: 50px 240px 1fr 100px;
    gap: 24px; align-items: center;
    padding: calc(var(--wp--preset--spacing--sm-plus) + var(--wp--preset--spacing--xxs)) 0;
    border-top: 1px dashed var(--sb-ink-light);
}
.sb-collection-list__item:first-child { border-top: 2px solid var(--wp--preset--color--saddle); }
.sb-collection-list__item:last-child { border-bottom: 2px solid var(--wp--preset--color--saddle); }
.sb-collection-list__num {
    font-family: var(--wp--preset--font-family--italiana);
    font-size: var(--wp--preset--font-size--display); color: var(--wp--preset--color--saddle);
    text-align: center; line-height: 1;
}
.sb-collection-list__pic {
    display: block;
    aspect-ratio: 4/3;
    background-size: cover; background-position: center;
    background-color: var(--wp--preset--color--sugar);
    border: 1px solid var(--sb-ink-light);
}
.sb-collection-list__cat {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--eyebrow); text-transform: uppercase; letter-spacing: .25em;
    color: var(--wp--preset--color--saddle); font-weight: 600;
}
.sb-collection-list__title {
    font-family: var(--wp--preset--font-family--cormorant);
    font-size: var(--wp--preset--font-size--heading); font-weight: 500; line-height: 1.15;
    margin: var(--wp--preset--spacing--xxs) 0 var(--wp--preset--spacing--xs);
}
.sb-collection-list__title a { color: inherit; text-decoration: none; }
.sb-collection-list__excerpt {
    font-family: var(--wp--preset--font-family--lora);
    font-size: var(--wp--preset--font-size--small); line-height: 1.55;
    color: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent); margin: 0;
}
.sb-collection-list__time {
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic; font-size: var(--wp--preset--font-size--aside-body);
    color: var(--wp--preset--color--saddle); text-align: right; line-height: 1.3;
    display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
}
.sb-collection-list__stars {
    color: var(--wp--preset--color--tuscan);
    font-style: normal; letter-spacing: 1px; font-size: var(--wp--preset--font-size--small);
}
@media (max-width: 800px) {
    .sb-collection-list__item { grid-template-columns: 36px 1fr; gap: 14px; }
    .sb-collection-list__pic, .sb-collection-list__time { display: none; }
}


/* ==== patterns/decoration/decoration-nav-rule/style.css ==== */
/* === Nav rule with diamond accents === */
.sb-decoration-nav-rule {
    position: relative;
    height: 2px;
    background: var(--wp--preset--color--ink);
    margin: 0 var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md-plus);
}
.sb-decoration-nav-rule::before,
.sb-decoration-nav-rule::after {
    content: "";
    position: absolute;
    top: -3px;
    width: 8px;
    height: 8px;
    background: var(--wp--preset--color--ink);
    transform: rotate(45deg);
}
.sb-decoration-nav-rule::before { left: -2px; }
.sb-decoration-nav-rule::after  { right: -2px; }
@media (max-width: 600px) {
    .sb-decoration-nav-rule { margin: 0 var(--wp--preset--spacing--sm) var(--wp--preset--spacing--sm-plus); }
}


/* ==== patterns/decoration/decoration-ornamental-rule/style.css ==== */
.sb-decoration-ornamental-rule .wp-block-separator {
  flex-basis: 80px;
}


/* ==== patterns/decoration/decoration-round-seal/style.css ==== */
/* === Round Seal === */
.sb-decoration-round-seal {
    width: 96px;
    height: 96px;
    border: 1.5px solid var(--wp--preset--color--saddle);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--wp--preset--color--saddle);
    background: color-mix(in srgb, var(--wp--preset--color--sugar) 40%, transparent);
    position: relative;
    text-align: center;
    line-height: 1.2;
}
.sb-decoration-round-seal::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid var(--wp--preset--color--saddle);
    border-radius: 50%;
    opacity: 0.4;
}
.sb-decoration-round-seal__line-1,
.sb-decoration-round-seal__line-3 {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--tiny);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
}
.sb-decoration-round-seal__line-2 {
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    font-size: var(--wp--preset--font-size--body);
    margin: var(--wp--preset--spacing--xxs) 0;
    font-weight: 500;
}


/* ==== patterns/decoration/decoration-stripe-tag/style.css ==== */
/* No dedicated CSS — styling comes from block attributes (backgroundColor,
 * border, padding) and inline styles on the inner paragraph. The empty rule
 * below exists so the wrapper-class linter (R1) has something to inspect. */
.sb-decoration-stripe-tag {}


/* ==== patterns/grid/latest-mosaic/style.css ==== */
/* === Latest mosaic — homepage 'latest' section ====================
 *
 * Asymmetric 6-up mosaic: 1 lead (col 1, spans 2 rows) + 4 supporting
 * (cols 2-3, rows 1-2) + 1 P.S. rule + 1 tail (spans all 3 cols, row 3).
 *
 * The shared `.sb-recipe-card` component (and its --lead / --tail
 * typography variants) lives in assets/css/global.css. Grid-layout-
 * specific positioning of those variants is scoped under
 * `.sb-latest-mosaic` here.
 */
.sb-latest-mosaic {
    display: grid;
    gap: var(--wp--preset--spacing--md-plus);
    padding: 0 var(--wp--preset--spacing--lg) calc(var(--wp--preset--spacing--lg) + var(--wp--preset--spacing--xxs));
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: auto;
    row-gap: calc(var(--wp--preset--spacing--md) + var(--wp--preset--spacing--xs));
}

/* Lead card spans col 1, 2 rows. */
.sb-latest-mosaic .sb-recipe-card--lead {
    grid-column: 1 / span 1;
    grid-row: span 2;
}

/* Tail card spans all 3 cols on row 3. */
.sb-latest-mosaic .sb-recipe-card--tail {
    grid-column: 1 / -1;
}

/* --- P.S. rule (above the tail) --- */
.sb-latest-mosaic__ps {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--sm-plus);
    margin: var(--wp--preset--spacing--sm-plus) 0 calc(-1 * var(--wp--preset--spacing--xxs));
    color: var(--wp--preset--color--saddle);
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--tiny);
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}
.sb-latest-mosaic__ps::before,
.sb-latest-mosaic__ps::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--wp--preset--color--saddle);
    opacity: .4;
}
.sb-latest-mosaic__ps span {
    padding: 0 var(--wp--preset--spacing--xs);
    font-style: italic;
    font-family: var(--wp--preset--font-family--cormorant);
    font-size: var(--wp--preset--font-size--body);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--saddle);
}

/* View Transitions naming (formerly attached to .sb-recipe-grid). */
@supports (view-transition-name: a) {
    .sb-latest-mosaic { view-transition-name: sb-latest-mosaic; }
}

@media (max-width: 800px) {
    .sb-latest-mosaic {
        padding: 0 var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
        gap: var(--wp--preset--spacing--sm-plus);
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .sb-latest-mosaic .sb-recipe-card--lead {
        grid-column: 1 / span 2;
        grid-row: span 1;
    }
    .sb-latest-mosaic .sb-recipe-card--tail {
        grid-column: 1 / -1;
    }

    /* Center all card content on mobile. */
    .sb-latest-mosaic .sb-recipe-card__body { text-align: center; }
    .sb-latest-mosaic .sb-recipe-card__meta { justify-content: center; }
    .sb-latest-mosaic .sb-recipe-card--lead .sb-recipe-card__body-top,
    .sb-latest-mosaic .sb-recipe-card--tail .sb-recipe-card__body-top {
        align-items: center;
    }
    /* Stack the tail card's stars + CTA vertically on mobile so each
       row is independently centered (matches the lead card). The
       desktop rule sets flex-direction:row (global.css:190). */
    .sb-latest-mosaic .sb-recipe-card--tail .sb-recipe-card__body-bottom {
        flex-direction: column;
        align-items: center;
        gap: var(--wp--preset--spacing--xs);
    }
    .sb-latest-mosaic .sb-recipe-card__stand {
        margin-left: auto;
        margin-right: auto;
    }
    /* Tail body has asymmetric padding (left:0) for the desktop
       image-left/text-right layout; even it out on mobile single-col. */
    .sb-latest-mosaic .sb-recipe-card--tail .sb-recipe-card__body {
        padding-left: var(--wp--preset--spacing--xxs);
    }
}
@media (max-width: 480px) {
    .sb-latest-mosaic { grid-template-columns: 1fr; }
    /* Explicit longhand reset — the @max-width:800px rule above sets
       `grid-column: 1 / span 2` on the lead. iOS Safari WebKit does
       not always reset `grid-column-end` when a later cascade rule
       uses the `grid-column: 1` shorthand, so the lead card kept
       spanning into an implicit second column on iPhone and
       overflowed the mosaic's right padding (~37px off-center). */
    .sb-latest-mosaic .sb-recipe-card--lead,
    .sb-latest-mosaic .sb-recipe-card--tail {
        grid-column-start: 1;
        grid-column-end: -1;
    }
}


/* ==== patterns/grid/recipe-archive-grid/style.css ==== */
/* === Recipe archive grid — recipe CPT archive ===================
 *
 * 3-column mosaic with a lead card (col 1, spans 2 rows) and supporting
 * cards on the right. Used by the recipe archive — inherits the page's
 * main query so taxonomy/sort/pagination filters apply.
 *
 * The shared `.sb-recipe-card` component (and its --lead typography
 * variant) lives in assets/css/global.css. Grid-layout-specific
 * positioning of those variants is scoped under `.sb-recipe-archive-grid`
 * here.
 */
.sb-recipe-archive-grid {
    display: grid;
    gap: var(--wp--preset--spacing--md);
    padding: 0 var(--wp--preset--spacing--lg) calc(var(--wp--preset--spacing--lg) + var(--wp--preset--spacing--xxs));
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: auto auto auto;
}

/* Archive cards use slightly smaller title than the homepage mosaic. */
.sb-recipe-archive-grid .sb-recipe-card__title { font-size: var(--wp--preset--font-size--card-title); }

/* Lead card spans col 1, 2 rows. */
.sb-recipe-archive-grid .sb-recipe-card--lead {
    grid-column: 1 / span 1;
    grid-row: span 2;
}

/* View Transitions naming (formerly attached to .sb-recipe-grid). */
@supports (view-transition-name: a) {
    .sb-recipe-archive-grid { view-transition-name: sb-recipe-archive-grid; }
}

@media (max-width: 800px) {
    .sb-recipe-archive-grid {
        padding: 0 var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
        gap: var(--wp--preset--spacing--sm-plus);
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .sb-recipe-archive-grid .sb-recipe-card--lead {
        grid-column: 1 / span 2;
        grid-row: span 1;
    }
}
@media (max-width: 480px) {
    .sb-recipe-archive-grid { grid-template-columns: 1fr; }
    /* Longhand reset — iOS Safari doesn't reset grid-column-end via the
       `grid-column: 1` shorthand, so the lead kept spanning a 2nd column
       and overflowed ~37px. Mirrors latest-mosaic/style.css. */
    .sb-recipe-archive-grid .sb-recipe-card--lead {
        grid-column-start: 1;
        grid-column-end: -1;
    }
}


/* ==== patterns/grid/recipe-related/style.css ==== */
/* === Recipe related — single-recipe transitional beat ============
 *
 * 3-up horizontal-card grid sitting between post-content and the
 * recipe-reviews block on single-recipe pages. Image-left/text-right
 * cards (`.sb-related-card`) — visually distinct from the homepage
 * `.sb-recipe-card`. The card component itself lives in
 * assets/css/global.css; this file owns the wrapper, header, and
 * inner-grid layout.
 */
.sb-recipe-related {
    padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg) calc(var(--wp--preset--spacing--lg) + var(--wp--preset--spacing--xxs));
    max-width: 1180px;
    margin: 0 auto;
}
.sb-recipe-related__head {
    text-align: center;
    margin-bottom: var(--wp--preset--spacing--md-plus);
}
.sb-recipe-related__eyebrow {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--tiny);
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--wp--preset--color--saddle);
    margin: 0 0 var(--wp--preset--spacing--xs);
}
.sb-recipe-related__title {
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    font-weight: 500;
    font-size: var(--wp--preset--font-size--subhead);
    line-height: 1.25;
    margin: 0;
    color: var(--wp--preset--color--ink);
}
.sb-recipe-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wp--preset--spacing--md-plus);
    margin: 0;
}

@media (max-width: 800px) {
    .sb-recipe-related { padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--sm) calc(var(--wp--preset--spacing--md) + var(--wp--preset--spacing--xs)); }
    .sb-recipe-related__grid { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--sm-plus); }
}


/* ==== patterns/hero/archive-feature-sparse/style.css ==== */
/* === Archive feature — sparse fallback =================================
 *
 * Layout that REPLACES the category / tag archive grid when there are
 * ≤2 published posts in the queried term. Each post is rendered as a
 * large image-left, body-right "feature article" instead of being lost
 * in a single-card grid. At 3+ posts the pattern falls through to a
 * 3-up `.sb-recipe-card` grid (which uses the shared card component
 * styles in assets/css/global.css; only the wrapper-spacing rule lives
 * here).
 *
 * Lives in the hero/ family per spec §1.2 (sparse-archive HERO swap,
 * even though it occupies the body slot of the template rather than
 * the page top). It does NOT replace the page header — patterns/hero/
 * hero-category/ still sits above it.
 *
 * Distinct from:
 *   - patterns/hero/hero-category/   (default-taxonomy term page HEADER —
 *     this layout sits underneath it as the BODY).
 *   - patterns/grid/recipe-archive-grid/ (recipe CPT archive grid; uses
 *     the same `.sb-recipe-card` cards but in a lead+supporting layout).
 */
.sb-archive-feature-sparse {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--wp--preset--spacing--lg);
    align-items: center;
    padding: var(--wp--preset--spacing--lg) 0 var(--wp--preset--spacing--md-plus);
    border-bottom: 1px solid var(--sb-ink-light);
    max-width: 1180px;
    margin: 0 auto;
}
.sb-archive-feature-sparse__pic {
    display: block;
    aspect-ratio: 4/3;
    background-color: var(--wp--preset--color--sugar);
    border: 1px solid var(--sb-ink-light);
    overflow: hidden;
}
.sb-archive-feature-sparse__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.sb-archive-feature-sparse__cat {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--eyebrow);
    text-transform: uppercase;
    letter-spacing: .28em;
    color: var(--wp--preset--color--saddle);
    font-weight: 600;
    margin: 0 0 var(--wp--preset--spacing--xs);
}
.sb-archive-feature-sparse__title {
    font-family: var(--wp--preset--font-family--cormorant);
    font-size: var(--wp--preset--font-size--display);
    font-weight: 500;
    line-height: 1.05;
    margin: 0 0 var(--wp--preset--spacing--xs);
    text-wrap: balance;
}
.sb-archive-feature-sparse__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.sb-archive-feature-sparse__stand {
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    font-size: var(--wp--preset--font-size--card-title);
    line-height: 1.5;
    color: var(--wp--preset--color--ink);
    margin: 0 0 var(--wp--preset--spacing--sm);
    text-wrap: pretty;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.sb-archive-feature-sparse__read {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--meta);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .25em;
    color: var(--wp--preset--color--saddle);
    text-decoration: none;
}

/* Dense fallback wrapper — at 3+ posts the pattern renders a 3-up grid
   of `.sb-recipe-card` items instead of the feature article. The card
   component itself is styled in assets/css/global.css; this wrapper owns
   the grid positioning only. */
.sb-archive-feature-sparse__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wp--preset--spacing--md);
    max-width: 1180px;
    margin: var(--wp--preset--spacing--lg) auto var(--wp--preset--spacing--xl);
    padding: 0 var(--wp--preset--spacing--md);
}

@media (max-width: 900px) {
    .sb-archive-feature-sparse__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .sb-archive-feature-sparse__grid {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--sm-plus);
    }
}

@media (max-width: 800px) {
    .sb-archive-feature-sparse {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--sm-plus);
        padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm);
    }
}


/* ==== patterns/hero/hero-archive/style.css ==== */
/* === Hero — recipe archive ============================================
 *
 * Top-of-page header for the recipe CPT archive and recipe_type / region
 * term archives. Centered crumbs + Italiana title + italic stand + count
 * line flanked by hairline rules. The wrapper carries
 * `view-transition-name: sb-archive-hero` so the in-place axis/sort swap
 * crossfades this block (see assets/js/archive-axis-swap.js).
 *
 * Distinct from:
 *   - patterns/hero/hero-category/   (default-taxonomy term page header)
 *   - patterns/hero/hero-collection/ (single collection landing hero)
 */
.sb-hero-archive {
    padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
    text-align: center;
}
.sb-hero-archive__inner {
    max-width: 760px;
    margin: 0 auto;
}
.sb-hero-archive__crumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--wp--preset--color--saddle);
    font-weight: 600;
    margin: 0 0 var(--wp--preset--spacing--sm);
}
.sb-hero-archive__crumbs a {
    color: var(--wp--preset--color--saddle);
    text-decoration: none;
}
.sb-hero-archive__crumbs a:hover { text-decoration: underline; }
.sb-hero-archive__crumbs span[aria-hidden="true"] { color: color-mix(in srgb, var(--wp--preset--color--ink) 45%, transparent); }
.sb-hero-archive__title {
    font-family: var(--wp--preset--font-family--italiana);
    font-size: var(--wp--preset--font-size--hero-title-lg);
    letter-spacing: 0.12em;
    line-height: 1;
    margin: 0 0 calc(var(--wp--preset--spacing--sm-plus) - var(--wp--preset--spacing--xxs));
    color: var(--wp--preset--color--ink);
    font-weight: 400;
    text-wrap: balance;
}
.sb-hero-archive__stand {
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    font-size: var(--wp--preset--font-size--card-title);
    line-height: 1.5;
    color: var(--wp--preset--color--ink);
    margin: 0 auto var(--wp--preset--spacing--sm);
    max-width: 580px;
    text-wrap: pretty;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.sb-hero-archive__count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--meta);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--wp--preset--color--saddle);
    font-weight: 600;
}
.sb-hero-archive__count::before,
.sb-hero-archive__count::after {
    content: "";
    height: 1px;
    flex: 0 0 60px;
    background: var(--wp--preset--color--saddle);
    opacity: 0.4;
}

/* Names the wrapper so the in-place archive swap (axis/sort/page change)
   crossfades just this block rather than the whole document. */
@supports (view-transition-name: a) {
    .sb-hero-archive { view-transition-name: sb-archive-hero; }
}

@media (max-width: 800px) {
    .sb-hero-archive { padding: calc(var(--wp--preset--spacing--md) + var(--wp--preset--spacing--xs)) var(--wp--preset--spacing--sm) var(--wp--preset--spacing--sm); }
    .sb-hero-archive__title { font-size: var(--wp--preset--font-size--display); letter-spacing: 0.1em; }
    .sb-hero-archive__stand { font-size: var(--wp--preset--font-size--body); }
}


/* ==== patterns/hero/hero-category/style.css ==== */
/* === Hero — category / tag ============================================
 *
 * Top-of-page header for default-taxonomy term pages: WP `category` and
 * `post_tag`. Visually mirrors patterns/hero/hero-archive/ but reads from
 * the default taxonomies and replaces the breadcrumb row with a single
 * `~ Category ~` / `~ Tag ~` eyebrow. No sub-tabs, no chips — the
 * recipe-archive filtering UI does not apply to editorial categories.
 *
 * Distinct from:
 *   - patterns/hero/hero-archive/    (recipe CPT archive; has crumbs + axis swap)
 *   - patterns/hero/hero-collection/ (single-collection 2-col Pool-Water hero)
 */
.sb-hero-category {
    padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
    text-align: center;
}
.sb-hero-category__inner {
    max-width: 760px;
    margin: 0 auto;
}
.sb-hero-category__eyebrow {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--eyebrow);
    text-transform: uppercase;
    letter-spacing: .3em;
    color: var(--wp--preset--color--saddle);
    font-weight: 600;
    margin: 0 0 calc(var(--wp--preset--spacing--sm-plus) - var(--wp--preset--spacing--xxs));
}
.sb-hero-category__title {
    font-family: var(--wp--preset--font-family--italiana);
    font-size: var(--wp--preset--font-size--hero-title-lg);
    letter-spacing: 0.12em;
    line-height: 1;
    margin: 0 0 calc(var(--wp--preset--spacing--sm-plus) - var(--wp--preset--spacing--xxs));
    color: var(--wp--preset--color--ink);
    font-weight: 400;
    text-wrap: balance;
}
.sb-hero-category__stand {
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    font-size: var(--wp--preset--font-size--card-title);
    line-height: 1.5;
    color: var(--wp--preset--color--ink);
    margin: 0 auto var(--wp--preset--spacing--sm);
    max-width: 580px;
    text-wrap: pretty;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.sb-hero-category__count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--meta);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--wp--preset--color--saddle);
    font-weight: 600;
}
.sb-hero-category__count::before,
.sb-hero-category__count::after {
    content: "";
    height: 1px;
    flex: 0 0 60px;
    background: var(--wp--preset--color--saddle);
    opacity: 0.4;
}

@media (max-width: 800px) {
    .sb-hero-category { padding: calc(var(--wp--preset--spacing--md) + var(--wp--preset--spacing--xs)) var(--wp--preset--spacing--sm) var(--wp--preset--spacing--sm); }
    .sb-hero-category__title { font-size: var(--wp--preset--font-size--display); letter-spacing: 0.1em; }
    .sb-hero-category__stand { font-size: var(--wp--preset--font-size--body); }
}


/* ==== patterns/hero/hero-collection/style.css ==== */
/* === Hero — single collection (Pool Water) ============================
 *
 * Two-column landing-page hero for a single `collection` post. Text-left
 * (crumbs · title · stand · meta) and a 4:5 lead image on the right.
 * Pool-Water background with diamond-corner accents top + bottom.
 *
 * Distinct from:
 *   - patterns/hero/hero-featured-collection/ (homepage editor's-pick
 *     block — same colour story but with a roman-numeral list, not a
 *     single 2-column hero).
 *   - patterns/hero/hero-archive/   (recipe CPT archive top header).
 *   - patterns/hero/hero-category/  (default-taxonomy term header).
 */
.sb-hero-collection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--preset--spacing--lg);
    padding: calc(var(--wp--preset--spacing--xl) + var(--wp--preset--spacing--xxs)) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl);
    background: var(--wp--preset--color--pool);
    border-bottom: 2px solid var(--wp--preset--color--saddle);
    position: relative;
    align-items: center;
}
.sb-hero-collection::before,
.sb-hero-collection::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: var(--wp--preset--color--paper);
    border: 2px solid var(--wp--preset--color--saddle);
}
.sb-hero-collection::before { top: -8px; }
.sb-hero-collection::after  { bottom: -8px; }
.sb-hero-collection__crumbs {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--eyebrow);
    text-transform: uppercase;
    letter-spacing: .28em;
    color: var(--wp--preset--color--saddle);
    font-weight: 600;
    margin: 0 0 var(--wp--preset--spacing--sm);
}
.sb-hero-collection__title {
    font-family: var(--wp--preset--font-family--italiana);
    font-size: clamp(var(--wp--preset--font-size--display), 7vw, var(--wp--preset--font-size--hero-title-lg));
    letter-spacing: .08em;
    line-height: 1;
    margin: 0 0 calc(var(--wp--preset--spacing--sm-plus) - var(--wp--preset--spacing--xxs));
    color: var(--wp--preset--color--ink);
    text-transform: uppercase;
    text-wrap: balance;
}
.sb-hero-collection__stand {
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    font-size: var(--wp--preset--font-size--heading);
    line-height: 1.45;
    color: var(--wp--preset--color--ink);
    margin: 0 0 var(--wp--preset--spacing--md);
    text-wrap: pretty;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.sb-hero-collection__meta {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--meta);
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--wp--preset--color--saddle);
    font-weight: 600;
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
}
.sb-hero-collection__sep { opacity: .4; }
.sb-hero-collection__image {
    aspect-ratio: var(--sb-aspect-hero-photo);
    background-color: var(--wp--preset--color--paper);
    border: 2px solid var(--wp--preset--color--saddle);
    overflow: hidden;
}
.sb-hero-collection__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 800px) {
    .sb-hero-collection { grid-template-columns: 1fr; padding: calc(var(--wp--preset--spacing--md) + var(--wp--preset--spacing--xs)) var(--wp--preset--spacing--sm); }
}


/* ==== patterns/hero/hero-featured-collection/style.css ==== */
/* === Hero — featured collection (homepage Pool-Water block) ===========
 *
 * Editor's-pick block on the homepage. Top: centred header with eyebrow,
 * Italiana title, italic deck. Bottom: 4:5 lead image on the left and a
 * roman-numeral list of recipes on the right (any length — Mark curates
 * per collection). Pool-Water background with saddle 2-px top/bottom
 * borders and diamond-corner accents.
 *
 * Distinct from:
 *   - patterns/hero/hero-collection/ (single-collection landing hero —
 *     same colour story but a 2-column hero, not a header + list).
 *   - patterns/hero/hero-featured-recipe/ (split-feature recipe hero with
 *     seal overlay — different visual + different data source).
 */
.sb-hero-featured-collection {
    background: var(--wp--preset--color--pool);
    border-top: 2px solid var(--wp--preset--color--saddle);
    border-bottom: 2px solid var(--wp--preset--color--saddle);
    padding: 0 var(--wp--preset--spacing--lg);
    position: relative;
}
.sb-hero-featured-collection::before,
.sb-hero-featured-collection::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: var(--wp--preset--color--paper);
    border: 1.5px solid var(--wp--preset--color--saddle);
}
.sb-hero-featured-collection::before { top: -8px; }
.sb-hero-featured-collection::after  { bottom: -8px; }
.sb-hero-featured-collection__header {
    text-align: center;
    padding: var(--wp--preset--spacing--lg) 0 var(--wp--preset--spacing--md);
}
.sb-hero-featured-collection__eyebrow {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--eyebrow);
    text-transform: uppercase;
    letter-spacing: .3em;
    color: var(--wp--preset--color--saddle);
    font-weight: 600;
    margin: 0;
}
.sb-hero-featured-collection__title {
    font-family: var(--wp--preset--font-family--italiana);
    font-size: var(--wp--preset--font-size--display);
    letter-spacing: .12em;
    margin: var(--wp--preset--spacing--xs) 0 var(--wp--preset--spacing--xxs);
    font-weight: 400;
    color: var(--wp--preset--color--ink);
    text-wrap: balance;
}
.sb-hero-featured-collection__deck {
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    font-size: var(--wp--preset--font-size--body);
    color: var(--wp--preset--color--ink);
    max-width: 480px;
    margin: 0 auto;
    text-wrap: pretty;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.sb-hero-featured-collection__body {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--wp--preset--spacing--lg);
    padding: 0 0 calc(var(--wp--preset--spacing--lg) + var(--wp--preset--spacing--xxs));
}
.sb-hero-featured-collection__lead {
    aspect-ratio: var(--sb-aspect-hero-photo);
    border: 2px solid var(--wp--preset--color--saddle);
    background-color: var(--wp--preset--color--paper);
    overflow: hidden;
    align-self: center;
}
.sb-hero-featured-collection__lead-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.sb-hero-featured-collection__list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}
.sb-hero-featured-collection__row {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: var(--wp--preset--spacing--sm);
    padding: calc(var(--wp--preset--spacing--sm-plus) - var(--wp--preset--spacing--xxs)) calc(var(--wp--preset--spacing--sm-plus) - var(--wp--preset--spacing--xxs));
    margin: 0 calc(-1 * (var(--wp--preset--spacing--sm-plus) - var(--wp--preset--spacing--xxs)));
    border-bottom: 1px dashed var(--wp--preset--color--saddle);
    align-items: center;
    transition: background-color .15s ease, transform .15s ease;
    cursor: pointer;
}
.sb-hero-featured-collection__row:hover,
.sb-hero-featured-collection__row:focus-within {
    background-color: color-mix(in srgb, var(--wp--preset--color--paper) 55%, transparent); /* paper @ 55% over Pool */
}
.sb-hero-featured-collection__row:hover .sb-hero-featured-collection__rowtitle,
.sb-hero-featured-collection__row:focus-within .sb-hero-featured-collection__rowtitle {
    color: var(--wp--preset--color--saddle);
}
.sb-hero-featured-collection__row:hover .sb-hero-featured-collection__num,
.sb-hero-featured-collection__row:focus-within .sb-hero-featured-collection__num {
    color: var(--wp--preset--color--ink);
}
.sb-hero-featured-collection__row:last-child { border-bottom: 0; }
.sb-hero-featured-collection__rowtitle {
    transition: color .15s ease;
}
.sb-hero-featured-collection__num {
    transition: color .15s ease;
    font-family: var(--wp--preset--font-family--italiana);
    font-size: var(--wp--preset--font-size--heading);
    color: var(--wp--preset--color--saddle);
    text-align: center;
    line-height: 1;
}
.sb-hero-featured-collection__link { display: block; text-decoration: none; color: inherit; }
.sb-hero-featured-collection__rowtitle {
    display: block;
    font-family: var(--wp--preset--font-family--cormorant);
    font-size: var(--wp--preset--font-size--heading);
    line-height: 1.15;
    color: var(--wp--preset--color--ink);
    font-weight: 500;
}
.sb-hero-featured-collection__rowmeta {
    display: block;
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--eyebrow);
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--wp--preset--color--saddle);
    font-weight: 600;
    margin-top: var(--wp--preset--spacing--xxs);
}
@media (max-width: 800px) {
    .sb-hero-featured-collection { padding: 0 var(--wp--preset--spacing--sm); }
    .sb-hero-featured-collection__body { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--md); padding-bottom: var(--wp--preset--spacing--md); }
}


/* ==== patterns/hero/hero-featured-recipe/style.css ==== */
/* === Hero — featured recipe (homepage) ================================
 *
 * Homepage split-feature hero. Text-left (eyebrow / Cormorant title /
 * italic stand / meta / two pill CTAs) and a 4:5 image-right with a
 * round seal overlay top-right ("InSeason {Month}"). The seal itself
 * is the shared `.sb-seal` component (assets/css/patterns.css head —
 * moves to patterns/decoration/decoration-round-seal/ in a future
 * slice). The `--overlay` modifier here paints it for a photo-on-top
 * context (paper-on-saddle, not saddle-on-paper).
 *
 * Distinct from:
 *   - patterns/hero/hero-featured-collection/ (Pool-Water editor's-pick
 *     block — different background, different layout, different copy).
 *   - patterns/hero/hero-archive/ / hero-category/ / hero-collection/
 *     (top-of-page headers, not split feature blocks).
 */
.sb-hero-featured-recipe {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md-plus);
    background: var(--wp--preset--color--paper);
}
.sb-hero-featured-recipe__text {
    padding: calc(var(--wp--preset--spacing--sm) - var(--wp--preset--spacing--xxs)) var(--wp--preset--spacing--lg) calc(var(--wp--preset--spacing--sm) - var(--wp--preset--spacing--xxs)) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sb-hero-featured-recipe__eyebrow {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--eyebrow);
    text-transform: uppercase;
    letter-spacing: .28em;
    color: var(--wp--preset--color--saddle);
    font-weight: 600;
    margin: 0 0 calc(var(--wp--preset--spacing--sm-plus) - var(--wp--preset--spacing--xxs));
}
.sb-hero-featured-recipe__star { color: var(--wp--preset--color--tuscan); }
.sb-hero-featured-recipe__title {
    font-family: var(--wp--preset--font-family--cormorant);
    font-weight: 500;
    font-size: var(--wp--preset--font-size--hero-title-md);
    line-height: 1.02;
    letter-spacing: -0.01em;
    margin: 0 0 var(--wp--preset--spacing--sm-plus);
    color: var(--wp--preset--color--ink);
    text-wrap: balance;
}
.sb-hero-featured-recipe__title a { color: inherit; text-decoration: none; }
.sb-hero-featured-recipe__title a:hover { color: var(--wp--preset--color--saddle); }
.sb-hero-featured-recipe__stand {
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    font-size: var(--wp--preset--font-size--card-title);
    line-height: 1.5;
    color: var(--wp--preset--color--ink);
    margin: 0 0 var(--wp--preset--spacing--md);
    max-width: 440px;
    text-wrap: pretty;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.sb-hero-featured-recipe__meta {
    font-family: var(--wp--preset--font-family--lora);
    font-style: italic;
    font-size: var(--wp--preset--font-size--small);
    color: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
    margin: 0 0 var(--wp--preset--spacing--md);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.sb-hero-featured-recipe__stars { color: var(--wp--preset--color--tuscan); font-style: normal; letter-spacing: 1px; }
.sb-hero-featured-recipe__sep { color: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent); }
.sb-hero-featured-recipe__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.sb-hero-featured-recipe__image {
    aspect-ratio: var(--sb-aspect-hero-photo);
    position: relative;
    border: 1px solid var(--sb-ink-light);
    background-color: var(--wp--preset--color--sugar);
    overflow: hidden;
}
.sb-hero-featured-recipe__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 800px) {
    .sb-hero-featured-recipe { grid-template-columns: 1fr; padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md); }
    .sb-hero-featured-recipe__text { padding: 0 0 var(--wp--preset--spacing--sm-plus); }
    .sb-hero-featured-recipe__title { font-size: var(--wp--preset--font-size--display); }
}


/* ==== patterns/homepage/browse-by-pantry/style.css ==== */
/* === 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: color-mix(in srgb, var(--wp--preset--color--saddle) 55%, transparent);
    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);
}


/* ==== patterns/homepage/subscribe-block/style.css ==== */
/* === Subscribe block — homepage newsletter signup =====================
 *
 * Tuscan-Sun full-bleed block on the homepage (and on the /subscribe/ WP
 * page, which re-uses this pattern). Renders the `.sb-seal--mailbag`
 * variant of the round-seal decoration, an Italiana heading, an italic
 * Cormorant stand, and a horizontal email form that POSTs to the
 * /wp-json/sb/v1/subscribe REST endpoint registered by features/newsletter/.
 *
 * The form's submit handler lives in assets/js/subscribe.js (to be moved
 * to features/newsletter/view.js in slice 10.3); it binds via the
 * [data-sb-subscribe] / [data-sb-subscribe-status] data attributes, so
 * the BEM class renames in this slice don't affect the JS.
 */
.sb-subscribe-block {
    /* Wrapper background/padding set inline via WP block-group attributes. */
}
.sb-subscribe-block__form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: stretch;
}
.sb-subscribe-block__form-email {
    flex: 1 1 260px;
    max-width: 360px;
    font-family: var(--wp--preset--font-family--lora);
    font-size: var(--wp--preset--font-size--cta);
    padding: calc(var(--wp--preset--spacing--xs) + var(--wp--preset--spacing--xxs)) var(--wp--preset--spacing--sm);
    border: 1.5px solid var(--wp--preset--color--ink);
    background: var(--wp--preset--color--paper);
    border-radius: 999px;
}
.sb-subscribe-block__form-submit {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    padding: calc(var(--wp--preset--spacing--xs) + var(--wp--preset--spacing--xxs)) calc(var(--wp--preset--spacing--md) - var(--wp--preset--spacing--xxs) / 2);
    background: var(--wp--preset--color--ink);
    color: var(--wp--preset--color--paper);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}
/* Light focus ring on the saddle/ink button (was in patterns.css under a
   shared :focus-visible override for ink/saddle backgrounds). */
.sb-subscribe-block__form-submit:focus-visible {
    outline: 2px solid var(--wp--preset--color--paper);
    outline-offset: 3px;
}
.sb-subscribe-block__form-note {
    flex-basis: 100%;
    text-align: center;
    margin: var(--wp--preset--spacing--xs) 0 0;
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    font-size: var(--wp--preset--font-size--caption);
    color: color-mix(in srgb, var(--wp--preset--color--ink) 65%, transparent);
}
.sb-subscribe-block__form-status {
    margin: calc(var(--wp--preset--spacing--sm) - var(--wp--preset--spacing--xxs) / 2) auto 0;
    max-width: 640px;
    text-align: center;
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    font-size: var(--wp--preset--font-size--body);
}
.sb-subscribe-block__form-status.is-ok  { color: var(--wp--preset--color--ink); }
.sb-subscribe-block__form-status.is-err { color: var(--wp--preset--color--rust); /* rust palette token */ }

/* --- Mailbag seal variant ---------------------------------------------
 * This is the `.sb-seal--mailbag` modifier of the generic `.sb-seal`
 * decoration (whose base styles live in assets/css/patterns.css next to
 * the standalone `decoration-round-seal` pattern). Scoped under the
 * subscribe-block wrapper so the wrapper-class linter (R1) is happy.
 * The decoration-round-seal/README.md tracks an eventual unification of
 * the seal variants into proper modifiers of that pattern. */
.sb-subscribe-block .sb-seal--mailbag {
    width: 96px;
    height: 96px;
    margin: 0 auto var(--wp--preset--spacing--sm-plus);
    background: color-mix(in srgb, var(--wp--preset--color--paper) 45%, transparent);
    border: 1.5px solid var(--wp--preset--color--saddle);
    color: var(--wp--preset--color--saddle);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-align: center;
    line-height: 1.2;
    font-weight: 600;
}
.sb-subscribe-block .sb-seal--mailbag::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid var(--wp--preset--color--saddle);
    border-radius: 50%;
    opacity: 0.4;
}
.sb-subscribe-block .sb-seal--mailbag .sb-seal-line-1,
.sb-subscribe-block .sb-seal--mailbag .sb-seal-line-3 {
    color: var(--wp--preset--color--saddle);
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--tiny);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.sb-subscribe-block .sb-seal--mailbag .sb-seal-line-2 {
    color: var(--wp--preset--color--saddle);
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    font-size: var(--wp--preset--font-size--body);
    letter-spacing: 0;
    margin: var(--wp--preset--spacing--xxs) 0;
    font-weight: 500;
}


/* ==== patterns/homepage/two-col-feature/style.css ==== */
/* === Two-column feature — homepage Culture | Tips =====================
 *
 * Side-by-side homepage block: a Culture-Desk column and a Notebook
 * column, each with a Manrope eyebrow, a 16:9 background-image lead, a
 * Cormorant title, an excerpt, and a "Read the …" CTA. One curated post
 * per side (latest from the `culture` / `baking-tips` categories) with a
 * defensive de-dup so a dual-categorised post never wins both columns.
 * Collapses to a single column under 800 px with a horizontal divider
 * between the two cards instead of the vertical one.
 *
 * Class rename (slice 5.7): `.sb-twocol*` → `.sb-two-col-feature*`. The
 * pattern is rendered entirely server-side via this PHP, so no saved
 * post content references the old class names — but the rename is logged
 * as `[REFACTOR-020]` in REDIRECT-TODO.md for posterity.
 */
.sb-two-col-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--sb-ink-light);
    border-bottom: 1px solid var(--sb-ink-light);
    background: var(--wp--preset--color--paper);
}
.sb-two-col-feature__col {
    padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg);
}
.sb-two-col-feature__col + .sb-two-col-feature__col {
    border-left: 1px solid var(--sb-ink-light);
}
.sb-two-col-feature__eyebrow {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--wp--preset--color--saddle);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 var(--wp--preset--spacing--sm-plus);
}
.sb-two-col-feature__eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--wp--preset--color--saddle);
    opacity: 0.4;
}
.sb-two-col-feature__pic {
    display: block;
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
    background-color: var(--wp--preset--color--sugar);
    margin-bottom: var(--wp--preset--spacing--sm);
    border: 1px solid var(--sb-ink-light);
}
.sb-two-col-feature__title {
    font-family: var(--wp--preset--font-family--cormorant);
    font-size: var(--wp--preset--font-size--subhead);
    font-weight: 500;
    line-height: 1.15;
    margin: 0 0 calc(var(--wp--preset--spacing--xs) + var(--wp--preset--spacing--xxs) / 2);
    text-wrap: balance;
}
.sb-two-col-feature__title a {
    color: var(--wp--preset--color--ink);
    text-decoration: none;
}
.sb-two-col-feature__excerpt {
    font-family: var(--wp--preset--font-family--lora);
    font-size: var(--wp--preset--font-size--aside-body);
    line-height: 1.65;
    color: var(--wp--preset--color--ink);
    margin: 0 0 calc(var(--wp--preset--spacing--sm) - var(--wp--preset--spacing--xxs) / 2);
}
.sb-two-col-feature__read {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--meta);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--wp--preset--color--saddle);
    text-decoration: none;
}

@media (max-width: 800px) {
    .sb-two-col-feature {
        grid-template-columns: 1fr;
    }
    .sb-two-col-feature__col + .sb-two-col-feature__col {
        border-left: 0;
        border-top: 1px solid var(--sb-ink-light);
    }
}


/* ==== patterns/photo/inline-photo/style.css ==== */
/* No dedicated CSS — styling comes from block attributes (margin, image
 * border radius) and inline italic-caption styling on the inner paragraph.
 * The caption styling is duplicated across the four photo patterns and will
 * be replaced by the .is-style-caption-italic block style variation in
 * slice 7. The empty rule below exists so the wrapper-class linter (R1) has
 * something to inspect. */
.sb-inline-photo {}


/* ==== patterns/photo/photo-gallery-strip/style.css ==== */
/* Horizontal-scroll gallery override. Scoped to .sb-photo-gallery-strip
 * so it never leaks into other Gallery blocks. */
.sb-photo-gallery-strip .sb-photo-gallery-strip__track {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: var(--wp--preset--spacing--xs);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.sb-photo-gallery-strip .sb-photo-gallery-strip__track > figure.wp-block-image {
  flex: 0 0 auto;
  width: 200px;
  scroll-snap-align: start;
  margin: 0;
}

.sb-photo-gallery-strip .sb-photo-gallery-strip__track > figure.wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: 3px;
}


/* ==== patterns/photo/photo-hero-thumbs/style.css ==== */
/* No dedicated CSS — layout via core blocks. */
.sb-photo-hero-thumbs {}


/* ==== patterns/photo/photo-pair-no-caption/style.css ==== */
/* No dedicated CSS — styling comes from the shared .sb-photo-pair wrapper class
 * (reused via className on the wp:group block). Empty rule below satisfies the
 * wrapper-class linter (R1) requirement for .sb-<slug>. */
.sb-photo-pair-no-caption {}


/* ==== patterns/photo/photo-pair/style.css ==== */
/* No dedicated CSS — styling comes from block attributes (margin, blockGap,
 * image border-radius) and inline italic-caption styling on the caption
 * paragraph. The caption styling is duplicated across the four photo
 * patterns and will be replaced by the .is-style-caption-italic block style
 * variation in slice 7. The empty rule below exists so the wrapper-class
 * linter (R1) has something to inspect. */
.sb-photo-pair {}


/* ==== patterns/photo/photo-stacked-pair/style.css ==== */
/* No dedicated CSS — layout via block stacking. */
.sb-photo-stacked-pair {}


/* ==== patterns/photo/photo-triptych-no-caption/style.css ==== */
/* No dedicated CSS — reuses .sb-photo-triptych layout. */
.sb-photo-triptych-no-caption {}


/* ==== patterns/photo/photo-triptych/style.css ==== */
/* No dedicated CSS — layout via core Columns. */
.sb-photo-triptych {}


/* ==== patterns/photo/process-collage-grid/style.css ==== */
/* No dedicated CSS — layout via core Columns blocks. */
.sb-process-collage-grid {}


/* ==== patterns/photo/process-collage/style.css ==== */
.sb-process-collage .size-large img {
  height: 100%;
  object-fit: cover;
}


/* ==== patterns/photo/wide-photo/style.css ==== */
/* Wide-photo: the figure-level styling (alignwide, top margin, border-radius)
 * comes from block attributes; the caption uses the shared
 * .is-style-caption-italic variation. We add a local margin-bottom override
 * because the figure has no enclosing group to absorb the
 * preset--spacing--md gap that the original inline caption styling provided. */
.sb-wide-photo {}
.sb-wide-photo-caption.is-style-caption-italic {
    margin-bottom: var(--wp--preset--spacing--md);
}


/* ==== patterns/search/search-result-card/style.css ==== */
/* === Search result card — single mixed-content row ====================
 *
 * One row inside the `search-results` grid. A 140px 4:5 thumbnail
 * (`__pic`) sits next to a `__body` column carrying a type badge
 * (`__badge` with `--recipe` / `--culture` / `--tip` / `--collection`
 * modifier), an editorial title, an excerpt, and a meta line of
 * dot-separated bits (recipe type · region · rating; or "N min read · Mar 2024").
 *
 * Wrapper: `.sb-search-result-card` (renamed from `.sb-result` — the
 * old class name was too generic and broke the R1 wrapper-class linter).
 * Inner BEM children keep the `.sb-result__*` names so existing JS hooks
 * and visual-test selectors (`.sb-result__excerpt`, `.sb-result__pic`)
 * keep working — they're scoped descendants here.
 *
 * 1-up list-mode framing (the 200/1fr columns, hairline dividers, etc.)
 * lives in the sibling `search-results/style.css` since that geometry is
 * a property of the container `.sb-results-list`, not of the card.
 */

/* --- Default 2-col grid card (used when not in a 1-up list) -------- */
.sb-search-result-card {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--wp--preset--spacing--sm);
    padding: calc(var(--wp--preset--spacing--sm) - var(--wp--preset--spacing--xxs) / 2);
    border: 1px solid var(--sb-ink-light);
    background: var(--wp--preset--color--paper);
    color: var(--wp--preset--color--ink);
    text-decoration: none;
    transition: border-color .2s, transform .2s;
}
.sb-search-result-card:hover {
    border-color: var(--wp--preset--color--saddle);
    transform: translateY(-2px);
}

/* --- Thumbnail ---------------------------------------------------- */
.sb-search-result-card .sb-result__pic {
    aspect-ratio: 4 / 5;
    background-color: color-mix(in srgb, var(--wp--preset--color--sugar) 50%, transparent);
    border: 1px solid var(--sb-ink-light);
    overflow: hidden;
}
.sb-search-result-card .sb-result__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* --- Body --------------------------------------------------------- */
.sb-search-result-card .sb-result__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

/* --- Badge -------------------------------------------------------- */
.sb-search-result-card .sb-result__badge {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--tiny);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-weight: 600;
    color: var(--wp--preset--color--paper);
    background: var(--wp--preset--color--saddle);
    padding: calc(var(--wp--preset--spacing--xxs) - 1px) calc(var(--wp--preset--spacing--xs) + var(--wp--preset--spacing--xxs) / 4);
    border-radius: 999px;
    display: inline-block;
    margin-bottom: var(--wp--preset--spacing--xs);
}
.sb-search-result-card .sb-result__badge--recipe {
    background: var(--wp--preset--color--saddle);
    color: var(--wp--preset--color--paper);
}
.sb-search-result-card .sb-result__badge--culture {
    background: var(--wp--preset--color--breeze);
    color: var(--wp--preset--color--ink);
}
.sb-search-result-card .sb-result__badge--tip {
    background: var(--wp--preset--color--tuscan);
    color: var(--wp--preset--color--ink);
}
.sb-search-result-card .sb-result__badge--collection {
    background: var(--wp--preset--color--pool);
    color: var(--wp--preset--color--ink);
}

/* --- Title, excerpt, meta ----------------------------------------- */
.sb-search-result-card .sb-result__title {
    font-family: var(--wp--preset--font-family--cormorant);
    /* 19px isn't a token; --card-title (18px) is the closest slot. */
    font-size: var(--wp--preset--font-size--card-title);
    font-weight: 500;
    line-height: 1.15;
    margin: 0 0 calc(var(--wp--preset--spacing--xs) - var(--wp--preset--spacing--xxs) / 2);
    color: var(--wp--preset--color--ink);
}
.sb-search-result-card .sb-result__excerpt {
    font-family: var(--wp--preset--font-family--lora);
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.5;
    color: var(--wp--preset--color--ink);
    margin: 0 0 var(--wp--preset--spacing--xs);
}
.sb-search-result-card .sb-result__meta {
    margin-top: auto;
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--wp--preset--color--saddle);
    font-weight: 600;
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--xs);
    align-items: center;
}
.sb-search-result-card .sb-result__sep {
    color: var(--wp--preset--color--saddle);
    opacity: 0.4;
}

/* --- Responsive --------------------------------------------------- */
@media (max-width: 800px) {
    .sb-search-result-card {
        grid-template-columns: 110px 1fr;
        gap: calc(var(--wp--preset--spacing--sm) - var(--wp--preset--spacing--xxs));
        padding: calc(var(--wp--preset--spacing--sm) - var(--wp--preset--spacing--xxs));
    }
}


/* ==== patterns/search/search-results/style.css ==== */
/* === Search results — search page layout (hero + filter chips + results) ===
 *
 * Full search-results page composition rendered when you hit `/?s=…`. Owns the
 * centered Italiana ask hero (with rule-eyebrow-rule label), the rounded
 * search input + Saddle button, the All / Recipes / Articles / Tips filter
 * chip row, the small italic "N results for term" summary, and the framing
 * for the result grid / 1-up list (the individual cards inside come from
 * the sibling `search-result-card` pattern).
 *
 * Wrapper: `.sb-search-results` (renamed from `.sb-search` for R1
 * compliance). Inner BEM lives under the same names you may already know
 * from the saved-rendered DOM and JS hooks: `.sb-search-hero*`,
 * `.sb-search-filters`, `.sb-chip*`, `.sb-results-summary`,
 * `.sb-results-list`, `.sb-search-empty-hint`, `.sb-search-no-results`.
 * Selectors below are scoped under `.sb-search-results` so the linter R1
 * wrapper-class check passes without renaming each child.
 */
.sb-search-results { display: block; }

/* --- Hero ----------------------------------------------------------- */
.sb-search-results .sb-search-hero {
    padding: calc(var(--wp--preset--spacing--xl) + var(--wp--preset--spacing--xxs)) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg);
    text-align: center;
    background: var(--wp--preset--color--paper);
    border-bottom: 1px solid var(--sb-ink-light);
}
.sb-search-results .sb-search-hero__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: calc(var(--wp--preset--spacing--sm-plus) - var(--wp--preset--spacing--xxs));
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--eyebrow);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--wp--preset--color--saddle);
    font-weight: 600;
}
.sb-search-results .sb-search-hero__line {
    height: 1px;
    flex: 0 0 80px;
    background: var(--wp--preset--color--saddle);
    opacity: 0.4;
}
.sb-search-results .sb-search-hero__eyebrow { white-space: nowrap; }
.sb-search-results .sb-search-hero__ask {
    font-family: var(--wp--preset--font-family--italiana);
    font-size: var(--wp--preset--font-size--display-md);
    letter-spacing: 0.08em;
    line-height: 1;
    margin: 0 0 var(--wp--preset--spacing--md);
    color: var(--wp--preset--color--ink);
    font-weight: 400;
    text-transform: uppercase;
    text-wrap: balance;
}
.sb-search-results .sb-search-input {
    max-width: 580px;
    margin: 0 auto;
    background: var(--wp--preset--color--paper);
    border: 1.5px solid var(--wp--preset--color--saddle);
    border-radius: 999px;
    padding: var(--wp--preset--spacing--xxs);
    display: flex;
    gap: 6px;
    align-items: center;
}
.sb-search-results .sb-search-input input[type="search"] {
    flex: 1;
    border: 0;
    background: transparent;
    font-family: var(--wp--preset--font-family--lora);
    font-style: italic;
    /* 17px isn't a token; --card-title (18px) is the closest slot above and
       hits the same Lora-italic placeholder cadence at 1 px difference. */
    font-size: var(--wp--preset--font-size--card-title);
    padding: calc(var(--wp--preset--spacing--sm) - var(--wp--preset--spacing--xxs)) calc(var(--wp--preset--spacing--md) - var(--wp--preset--spacing--xxs) / 2);
    color: var(--wp--preset--color--ink);
    outline: none;
    min-width: 0;
}
.sb-search-results .sb-search-input input[type="search"]::placeholder {
    color: color-mix(in srgb, var(--wp--preset--color--ink) 45%, transparent);
}
.sb-search-results .sb-search-input button {
    border: 0;
    background: var(--wp--preset--color--saddle);
    color: var(--wp--preset--color--paper);
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--meta);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    padding: calc(var(--wp--preset--spacing--sm) - var(--wp--preset--spacing--xxs)) var(--wp--preset--spacing--md);
    border-radius: 999px;
    cursor: pointer;
    flex: 0 0 auto;
}
.sb-search-results .sb-search-input button:hover { background: var(--wp--preset--color--ink); }

/* --- Filter chips --------------------------------------------------- */
.sb-search-results .sb-search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--xs);
    justify-content: center;
    align-items: center;
    padding: var(--wp--preset--spacing--sm-plus) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
    border-bottom: 1px solid var(--sb-ink-light);
}
.sb-search-results .sb-search-filters__label {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--meta);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
    font-weight: 500;
    margin-right: calc(var(--wp--preset--spacing--xs) - var(--wp--preset--spacing--xxs) / 2);
}
.sb-search-results .sb-search-filters .sb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--meta);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 600;
    padding: calc(var(--wp--preset--spacing--xs) - 1px) calc(var(--wp--preset--spacing--sm-plus) - var(--wp--preset--spacing--xxs));
    border: 1px solid var(--wp--preset--color--saddle);
    border-radius: 999px;
    color: var(--wp--preset--color--saddle);
    background: color-mix(in srgb, var(--wp--preset--color--sugar) 40%, transparent);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.sb-search-results .sb-search-filters .sb-chip:hover {
    background: var(--wp--preset--color--saddle);
    color: var(--wp--preset--color--paper);
}
.sb-search-results .sb-search-filters .sb-chip.is-on {
    background: var(--wp--preset--color--saddle);
    color: var(--wp--preset--color--paper);
}
.sb-search-results .sb-search-filters .sb-chip__count {
    opacity: 0.7;
    font-weight: 500;
    margin-left: calc(var(--wp--preset--spacing--xxs) / 2);
}

/* --- Results summary ------------------------------------------------ */
.sb-search-results .sb-results-summary {
    text-align: center;
    padding: calc(var(--wp--preset--spacing--md) - var(--wp--preset--spacing--xxs) / 2) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--sm);
    margin: 0;
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    font-size: var(--wp--preset--font-size--body);
    color: var(--wp--preset--color--saddle);
}
.sb-search-results .sb-results-summary strong {
    font-family: var(--wp--preset--font-family--italiana);
    font-style: normal;
    color: var(--wp--preset--color--ink);
    font-weight: 400;
    letter-spacing: 0.04em;
    padding: 0 var(--wp--preset--spacing--xxs);
}
.sb-search-results .sb-results-summary em {
    font-style: italic;
    color: var(--wp--preset--color--ink);
}

/* --- Results 1-up index list (Task 10) ------------------------------
 * `.sb-results-list` is the container `search-results` renders around
 * each `search-result-card`. Card-frame rules below intentionally style
 * `.sb-search-result-card` (the card wrapper) inside our list — list
 * geometry belongs to the parent. */
.sb-search-results .sb-results-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 var(--wp--preset--spacing--lg);
}
.sb-search-results .sb-results-list .sb-search-result-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--wp--preset--spacing--md);
    padding: calc(var(--wp--preset--spacing--md) - var(--wp--preset--spacing--xxs) / 2) 0;
    border-bottom: 1px solid var(--sb-ink-light);
    align-items: start;
}
.sb-search-results .sb-results-list .sb-search-result-card:first-child {
    border-top: 1px solid var(--sb-ink-light);
}
.sb-search-results .sb-results-list .sb-search-result-card .sb-result__pic {
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    background-color: var(--wp--preset--color--sugar);
    border: 1px solid var(--sb-ink-light);
}
.sb-search-results .sb-results-list .sb-search-result-card .sb-result__title {
    font-family: var(--wp--preset--font-family--cormorant);
    font-size: var(--wp--preset--font-size--heading);
    font-weight: 500;
    line-height: 1.15;
    margin: var(--wp--preset--spacing--xxs) 0 calc(var(--wp--preset--spacing--xs) - var(--wp--preset--spacing--xxs) / 2);
}
.sb-search-results .sb-results-list .sb-search-result-card .sb-result__excerpt {
    font-family: var(--wp--preset--font-family--lora);
    font-size: var(--wp--preset--font-size--aside-body);
    line-height: 1.55;
    color: var(--wp--preset--color--ink);
    margin: 0 0 var(--wp--preset--spacing--xs);
}

/* --- Empty hint at bottom of populated results --------------------- */
.sb-search-results .sb-search-empty-hint {
    text-align: center;
    padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md-plus);
    margin: 0;
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    color: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
    font-size: var(--wp--preset--font-size--small);
}

/* --- No-results paragraph ------------------------------------------ */
.sb-search-results .sb-search-no-results {
    text-align: center;
    padding: calc(var(--wp--preset--spacing--lg) + var(--wp--preset--spacing--xxs)) var(--wp--preset--spacing--lg) calc(var(--wp--preset--spacing--xl) + var(--wp--preset--spacing--xxs));
    margin: 0;
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    font-size: var(--wp--preset--font-size--card-title);
    color: var(--wp--preset--color--ink);
}

/* --- View Transitions naming -------------------------------------- */
@supports (view-transition-name: a) {
    .sb-search-results .sb-search-filters { view-transition-name: sb-search-filters; }
    .sb-search-results .sb-results-list   { view-transition-name: sb-results-list;   }
}

/* --- Responsive ---------------------------------------------------- */
@media (max-width: 800px) {
    .sb-search-results .sb-search-hero {
        padding: calc(var(--wp--preset--spacing--md) + var(--wp--preset--spacing--xs)) var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
    }
    .sb-search-results .sb-search-hero__ask {
        font-size: var(--wp--preset--font-size--display);
        letter-spacing: 0.06em;
    }
    .sb-search-results .sb-search-hero__line { flex: 0 0 40px; }
    .sb-search-results .sb-search-filters {
        padding: calc(var(--wp--preset--spacing--sm) - var(--wp--preset--spacing--xxs) / 2) var(--wp--preset--spacing--sm) var(--wp--preset--spacing--sm-plus);
    }
}
@media (max-width: 600px) {
    .sb-search-results .sb-results-list .sb-search-result-card { grid-template-columns: 1fr; }
}