@import url(/faience.css);

:root { color-scheme: light; font-family: var(--faience-font-sans); color: var(--faience-ink); background: var(--faience-paper); }
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.6; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
.recipe-topbar { background: color-mix(in srgb, var(--faience-paper) 96%, transparent); border-bottom: 1px solid var(--faience-line); position: sticky; top: 0; z-index: 10; }
.recipe-topbar-inner { max-width: 1100px; height: 68px; margin: auto; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.recipe-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 18px/1.2 var(--faience-font-serif); }
.recipe-brand-logo { display: block; height: 36px; width: auto; flex: none; }
.recipe-nav { display: flex; gap: 20px; font-size: 13px; font-weight: 600; }
.recipe-nav a { text-decoration: none; color: var(--faience-soft-ink); }
.recipe-nav a[aria-current="page"], .recipe-nav a:hover { color: var(--faience-link); }
.recipe-shell { max-width: 1000px; margin: auto; padding: 38px 22px 96px; }
.recipe-back { color: var(--faience-link); font-size: 13px; font-weight: 700; text-decoration: none; }
.recipe-back:hover, .recipe-ingredient a:hover { text-decoration: underline; }
.recipe-hero { margin-top: 21px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: center; }
.recipe-photo { width: 100%; height: auto; aspect-ratio: 1 / 1; display: block; object-fit: cover; border-radius: 28px; border: 1px solid var(--faience-line); background: var(--faience-pale); }
.recipe-photo-empty { display: flex; align-items: center; justify-content: center; font: 600 22px var(--faience-font-serif); color: var(--faience-soft-ink); background: var(--faience-pale); }
.recipe-gallery { display: flex; gap: 8px; margin-top: 9px; overflow-x: auto; }
.recipe-gallery img { object-fit: cover; width: 76px; height: 76px; border-radius: 12px; border: 1px solid var(--faience-line); }
.recipe-eyebrow { color: var(--faience-soft-ink); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
h1, h2, h3 { font-family: var(--faience-font-serif); line-height: 1.23; }
h1 { font-size: clamp(32px, 4vw, 51px); margin: 12px 0 18px; }
h2 { font-size: 25px; margin: 0 0 20px; }
h3 { font-size: 18px; }
.recipe-description { color: var(--faience-soft-ink); font-size: 16px; }
.recipe-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 17px 0 20px; }
.recipe-tag { padding: 5px 11px; border-radius: 99px; background: var(--faience-pale); color: var(--faience-ink); font-size: 12px; font-weight: 600; }
.recipe-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 24px 0; }
.recipe-fact { background: var(--faience-white); border: 1px solid var(--faience-line); border-radius: 16px; padding: 11px 14px; font-size: 13px; }
.recipe-fact strong { display: block; font-size: 16px; color: var(--faience-ink); }
.recipe-fact span { color: var(--faience-soft-ink); }
.recipe-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.recipe-button { border: 1px solid var(--faience-blue); background: var(--faience-white); color: var(--faience-ink); text-decoration: none; padding: 10px 15px; border-radius: 99px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.recipe-button:hover { background: var(--faience-pale); border-color: var(--faience-blue); }
.recipe-button-primary { background: var(--faience-cherry); border-color: var(--faience-cherry); color: var(--faience-white); }
.recipe-button-primary:hover { background: var(--faience-cherry); color: var(--faience-white); }
.recipe-button[aria-pressed="true"] { color: var(--faience-link); background: var(--faience-pale); }
.recipe-button-primary[aria-pressed="true"] { color: var(--faience-white); background: var(--faience-cherry); }
.recipe-composition { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; margin-top: 36px; }
.recipe-composition > .recipe-panel { min-width: 0; }
.recipe-composition > .recipe-panel:only-child { grid-column: 1 / -1; }
.recipe-panel { background: var(--faience-white); border: 1px solid var(--faience-line); padding: 25px; border-radius: 26px; box-shadow: 0 10px 30px color-mix(in srgb, var(--faience-ink) 3%, transparent); }
.recipe-ingredients { padding: 0; margin: 0; list-style: none; }
.recipe-ingredient { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--faience-line); padding: 12px 0; font-size: 14px; }
.recipe-ingredient:first-child { padding-top: 0; }
.recipe-ingredient:last-child { border-bottom: none; }
.recipe-ingredient a { color: var(--faience-link); white-space: nowrap; font-size: 12px; text-decoration: none; font-weight: 600; }
.recipe-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.recipe-steps li { counter-increment: step; display: flex; gap: 14px; margin-bottom: 22px; font-size: 15px; }
.recipe-steps li::before { content: counter(step); flex: 0 0 29px; width: 29px; height: 29px; border-radius: 50%; color: var(--faience-white); background: var(--faience-blue); display: grid; place-items: center; font: 700 13px var(--faience-font-sans); }
.recipe-tip { margin-top: 22px; border-radius: 18px; background: var(--faience-ink); padding: 17px 20px; color: var(--faience-paper); }
.recipe-tip strong { display: block; margin-bottom: 5px; color: var(--faience-mustard); }
.recipe-steps-panel { margin-top: 24px; }
.recipe-steps-panel .recipe-steps { display: grid; grid-template-columns: 1fr; }
.recipe-tip-bottom { margin-top: 24px; padding: 22px 26px; }
.recipe-tip-bottom strong { font-family: var(--faience-font-serif); font-size: 21px; }
.recipe-products { list-style: none; padding: 0; margin: 0; }
.recipe-products li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--faience-line); font-size: 14px; }
.recipe-products li:first-child { padding-top: 0; }
.recipe-products li:last-child { border: 0; }
.recipe-product-mark { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; background: var(--faience-pale); color: var(--faience-ink); border-radius: 9px; font-size: 13px; }
.recipe-meta { margin-top: 22px; color: var(--faience-soft-ink); font-size: 13px; }
.recipe-meta a { color: var(--faience-link); }
.recipe-print-header, .recipe-print-footer { display: none; }
.recipe-mobile-nav { display: none; }
@media (max-width: 730px) {
  .recipe-topbar-inner { height: 57px; padding: 0 16px; }
  .recipe-brand { font-size: 16px; }
  .recipe-brand-logo { height: 30px; }
  .recipe-nav { display: none; }
  .recipe-shell { padding: 24px 16px 100px; }
  .recipe-hero { grid-template-columns: 1fr; gap: 20px; }
  .recipe-photo { aspect-ratio: 1 / 1; }
  .recipe-hero { margin-top: 15px; }
  .recipe-panel { padding: 20px; }
  .recipe-composition { grid-template-columns: 1fr; gap: 18px; margin-top: 28px; }
  .recipe-steps-panel, .recipe-tip-bottom { margin-top: 18px; }
  .recipe-steps-panel .recipe-steps { grid-template-columns: 1fr; }
  .recipe-mobile-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; justify-content: space-around; align-items: center; background: var(--faience-paper); border-top: 1px solid var(--faience-line); z-index: 15; padding: 11px 5px calc(11px + env(safe-area-inset-bottom)); }
  .recipe-mobile-nav a { font-size: 11px; font-weight: 600; text-decoration: none; color: var(--faience-soft-ink); }
  .recipe-mobile-nav a[aria-current="page"] { color: var(--faience-link); }
}
@media print {
  @page { size: A4; margin: 4mm 8mm; }
  :root { background: var(--faience-white); color: var(--faience-ink); print-color-adjust: economy; }
  body { font-size: 9pt; line-height: 1.38; }
  .recipe-topbar, .faience-frieze, .recipe-back, .recipe-actions, .recipe-mobile-nav, .recipe-gallery, .recipe-ingredient a { display: none !important; }
  .recipe-shell { max-width: none; padding: 0; }
  .recipe-print-header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: .5pt solid var(--faience-line); padding-bottom: 2mm; margin-bottom: 4mm; font-size: 8pt; color: var(--faience-soft-ink); }
  .recipe-print-header span:first-child { font-family: var(--faience-font-serif); font-size: 9pt; font-weight: 700; color: var(--faience-ink); }
  .recipe-hero { grid-template-columns: 56mm minmax(0, 1fr); align-items: center; margin: 0; gap: 6mm; break-inside: avoid; }
  .recipe-photo { width: 56mm; height: 56mm; aspect-ratio: 1 / 1; border: .5pt solid var(--faience-line); border-radius: 3mm; }
  .recipe-eyebrow { font-size: 7.5pt; margin: 0; color: var(--faience-soft-ink); }
  h1 { font-size: 19pt; line-height: 1.15; margin: 2mm 0; }
  .recipe-description { font-size: 8.5pt; line-height: 1.4; margin: 0; color: var(--faience-soft-ink); }
  .recipe-tags { display: none; }
  .recipe-facts { display: flex; flex-wrap: wrap; gap: 1.5mm 5mm; margin: 3mm 0 0; }
  .recipe-fact { border: 0; padding: 0; border-radius: 0; background: var(--faience-white); font-size: 8pt; }
  .recipe-fact strong { display: inline; font-size: 8pt; color: var(--faience-ink); margin-left: 1mm; }
  .recipe-fact span { color: var(--faience-soft-ink); }
  .recipe-composition { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4mm; margin-top: 4mm; align-items: start; }
  .recipe-panel { border: .6pt solid var(--faience-line); border-radius: 3mm; box-shadow: none; background: var(--faience-white); padding: 2.5mm 3.5mm; break-inside: auto; }
  .recipe-panel h2 { break-after: avoid; }
  h2 { font-size: 13pt; color: var(--faience-ink); margin: 0 0 2mm; }
  .recipe-ingredient, .recipe-products li { padding: .3mm 0; font-size: 8.6pt; line-height: 1.22; border-bottom: .4pt solid var(--faience-line); break-inside: avoid; }
  .recipe-product-mark { width: 4mm; height: 4mm; flex-basis: 4mm; border: 0; background: var(--faience-pale); color: var(--faience-ink); }
  .recipe-products li { gap: 2mm; }
  .recipe-steps-panel, .recipe-tip-bottom { margin-top: 4mm; }
  .recipe-steps-panel .recipe-steps { grid-template-columns: 1fr; }
  .recipe-steps li { gap: 2mm; margin-bottom: 1mm; font-size: 8.8pt; break-inside: avoid; }
  .recipe-steps li:last-child { margin-bottom: 0; }
  .recipe-steps li::before { width: 5mm; height: 5mm; flex-basis: 5mm; border: .6pt solid var(--faience-blue); background: var(--faience-white); color: var(--faience-link); font-size: 8pt; }
  .recipe-tip-bottom { background: var(--faience-ink); color: var(--faience-paper); padding: 3mm 4mm; border: .6pt solid var(--faience-ink); border-radius: 3mm; break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .recipe-tip-bottom strong { font-size: 12pt; color: var(--faience-mustard); margin-bottom: 1mm; }
  .recipe-meta { margin: 2mm 0 0; font-size: 7.5pt; color: var(--faience-soft-ink); }
  .recipe-print-footer { display: flex; align-items: center; gap: 3mm; border-top: .5pt solid var(--faience-line); padding-top: 1mm; margin-top: 1mm; font-size: 8pt; color: var(--faience-soft-ink); break-inside: avoid; }
  .recipe-print-qr, .recipe-print-qr svg { display: block; width: 14mm; height: 14mm; flex: 0 0 14mm; }
}