body[data-page-kind] .recipes-hero,
body[data-page-kind] .recipes-occasion,
body[data-page-kind] .recipes-browse,
body[data-page-kind] .recipes-feature { width: min(100%, var(--page-max)); margin-inline: auto; }


body[data-page-kind] .recipes-browse { margin-block-start: 40px; padding: 0 0 56px; }

body[data-page-kind] .recipes-browse > h2 { margin: 0 0 16px; text-align: center; font-size: 28px; }

body[data-page-kind] .recipes-tabs { display: flex; justify-content: center; align-items: flex-end; gap: 0; height: 60px; }

body[data-page-kind] .recipes-tab { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex: 0 0 230px; min-width: 0; height: 52px; padding: 0 14px; border-radius: 0; color: var(--muted); background: transparent; font: 18px/1.15 var(--hand); letter-spacing: .1em; text-align: center; text-transform: uppercase; }

body[data-page-kind] .recipes-tab::before { content: ''; position: absolute; z-index: -1; inset: 0; background: var(--tab-fill); -webkit-mask: url('/assets/recipes/folder-tab-ingredients.svg') center / 100% 100% no-repeat; mask: url('/assets/recipes/folder-tab-ingredients.svg') center / 100% 100% no-repeat; pointer-events: none; }

body[data-page-kind] .recipes-tab[data-recipes-tab='occasions'] { --tab-fill: #F2E1DA; }

body[data-page-kind] .recipes-tab[data-recipes-tab='ingredients'] { --tab-fill: #EBE3D2; }

body[data-page-kind] .recipes-tab[data-recipes-tab='types'] { --tab-fill: #F5E6C8; }

body[data-page-kind] .recipes-tab[aria-selected='true'] { color: var(--brick); z-index: 3; height: 60px; flex-basis: 220px; }

body[data-page-kind] .recipes-tab[aria-selected='true']::before { -webkit-mask-image: url('/assets/recipes/folder-tab-active.svg'); mask-image: url('/assets/recipes/folder-tab-active.svg'); }

body[data-page-kind] .recipes-tab + .recipes-tab { margin-left: -24px; }

body[data-page-kind] .recipes-browse-panel { padding: 24px; background: var(--envelope); }

body[data-page-kind] .recipes-browse-panel[data-recipes-panel='occasions'] { background: #F2E1DA; }

body[data-page-kind] .recipes-browse-panel[data-recipes-panel='ingredients'] { background: #EBE3D2; }

body[data-page-kind] .recipes-browse-panel[data-recipes-panel='types'] { background: #F5E6C8; }

body[data-page-kind] .recipes-browse-grid { display: grid; gap: 16px; }

body[data-page-kind] .recipes-browse-grid-occasions { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 230px; }

body[data-page-kind] .recipes-browse-grid-occasions .recipes-browse-tile:nth-child(-n+3) { grid-column: span 2; }

body[data-page-kind] .recipes-browse-grid-occasions .recipes-browse-tile:nth-child(n+4) { grid-column: span 3; }

body[data-page-kind] .recipes-browse-grid-ingredients,
body[data-page-kind] .recipes-browse-grid-types { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 230px; }

body[data-page-kind] .recipes-browse-tile { position: relative; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; min-width: 0; padding: 14px 12px; overflow: hidden; background: #FFFAF0; }

body[data-page-kind] .recipes-browse-tile-label { align-self: stretch; color: var(--burgundy); font: 24px/1.2 var(--hand); text-transform: uppercase; }

body[data-page-kind] .recipes-browse-tile-label sup { color: var(--muted); font-size: 16px; vertical-align: baseline; }

body[data-page-kind] .recipes-browse-tile-art,
body[data-page-kind] .recipes-browse-tile-art-discovery { width: 48px; height: 48px; object-fit: contain; }

body[data-page-kind] .recipes-browse-tile-motion { display: block; background: transparent; pointer-events: none; }

body[data-page-kind] .recipes-browse-tile-arrow { position: absolute; top: 12px; right: 14px; color: var(--ink); font: 20px/1 var(--hand); }

body[data-page-kind] .recipes-view-all { display: flex; justify-content: center; gap: 12px; padding-top: 24px; color: var(--brick); font: 18px/1.15 var(--hand); letter-spacing: .1em; text-transform: uppercase; }


@media (max-width: 1000px) {
  body[data-page-kind] .recipes-browse { width: 100%; padding-bottom: 32px; }

  body[data-page-kind] .recipes-browse > h2 { font-size: 24px; }

  body[data-page-kind] .recipes-tabs { gap: 2px; }

  body[data-page-kind] .recipes-tab { min-width: 0; flex: 1 1 0; padding: 7px 4px; font-size: clamp(14px, 1.9vw, 17px); letter-spacing: .02em; white-space: nowrap; }

  body[data-page-kind] .recipes-tab[aria-selected='true'] { flex-basis: 0; }

  body[data-page-kind] .recipes-tab + .recipes-tab { margin-left: 0; }

  body[data-page-kind] .recipes-tab:not([aria-selected='true']) { height: 42px; }

  body[data-page-kind] .recipes-browse-panel { padding: 12px; }

  body[data-page-kind] .recipes-browse-grid { gap: 10px; }

  body[data-page-kind] .recipes-browse-grid-occasions,
  body[data-page-kind] .recipes-browse-grid-ingredients,
  body[data-page-kind] .recipes-browse-grid-types { grid-template-columns: 1fr; grid-auto-rows: 150px; }

  body[data-page-kind] .recipes-browse-grid-occasions .recipes-browse-tile:nth-child(n),
  body[data-page-kind] .recipes-browse-grid-ingredients .recipes-browse-tile:nth-child(n),
  body[data-page-kind] .recipes-browse-grid-types .recipes-browse-tile:nth-child(n) { grid-column: auto; }

  body[data-page-kind] .recipes-browse-tile { padding: 10px 12px; }

  body[data-page-kind] .recipes-browse-tile-label { padding-right: 28px; font-size: 18px; line-height: 1.12; word-break: normal; }

  body[data-page-kind] .recipes-browse-tile-art,
  body[data-page-kind] .recipes-browse-tile-art-discovery { width: 48px; height: 48px; }

  body[data-page-kind] .recipes-browse-tile-arrow { top: 10px; right: 12px; }
}


/* Tablet keeps the desktop hero relationship while retaining compact shell chrome. */
@media (min-width: 701px) and (max-width: 1000px) {
  body[data-page-kind] .recipes-tabs { gap: 0; }

  body[data-page-kind] .recipes-tab { flex: 0 0 230px; padding-inline: 14px; }

  body[data-page-kind] .recipes-tab[aria-selected='true'] { flex-basis: 220px; }

  body[data-page-kind] .recipes-tab:not([aria-selected='true']) { height: 52px; }

  body[data-page-kind] .recipes-tab + .recipes-tab { margin-left: -24px; }

  body[data-page-kind] .recipes-browse-panel { padding: 24px; }

  body[data-page-kind] .recipes-browse-grid { gap: 16px; }

  body[data-page-kind] .recipes-browse-grid-occasions { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 180px; }

  body[data-page-kind] .recipes-browse-grid-occasions .recipes-browse-tile:nth-child(-n+3) { grid-column: span 2; }

  body[data-page-kind] .recipes-browse-grid-occasions .recipes-browse-tile:nth-child(n+4) { grid-column: span 3; }

  body[data-page-kind] .recipes-browse-grid-ingredients,
  body[data-page-kind] .recipes-browse-grid-types { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 180px; }

  body[data-page-kind] .recipes-browse-tile-label { font-size: clamp(18px, 2vw, 20px); }
}


/* Folder tabs rise into their selected state without changing layout width. */
body[data-page-kind] .recipes-tab,body[data-page-kind] .recipes-tab[aria-selected='true'],body[data-page-kind] .recipes-tab:not([aria-selected='true']) { height:60px;flex:1 1 0;transition:color 180ms ease-out; }

body[data-page-kind] .recipes-tab::before { transform:scaleY(.86);transform-origin:bottom;transition:transform 220ms cubic-bezier(.22,1,.36,1); }

body[data-page-kind] .recipes-tab[aria-selected='true']::before { transform:scaleY(1); }

@media(hover:hover) and (pointer:fine) { body[data-page-kind] .recipes-tab:hover { color:var(--brick); }
body[data-page-kind] .recipes-tab:not([aria-selected='true']):hover::before { transform:scaleY(.94); }
}

body[data-page-kind] .recipes-tab:active::before { transform:scaleY(.96); }

@media(max-width:600px) { body[data-page-kind] .recipes-tab,body[data-page-kind] .recipes-tab[aria-selected='true'],body[data-page-kind] .recipes-tab:not([aria-selected='true']) { height:48px; }
}

@media(prefers-reduced-motion:reduce) { body[data-page-kind] .recipes-tab,body[data-page-kind] .recipes-tab::before { transition:none; }
}

@media(min-width:1001px){
 body[data-page-kind] .recipes-browse-tile-art,body[data-page-kind] .recipes-browse-tile-art-discovery{width:96px;height:96px}
}

body[data-page-kind] .recipes-tabs:has(:focus-visible) .recipes-tab::before{transition:none}