/* Classic Food premium recipe detail — scoped styles */
.cf-recipe {
    --cf-primary: #639b0b;
    --cf-primary-dark: #477606;
    --cf-primary-light: #e7f3cd;
    --cf-accent: #f2a12a;
    --cf-ink: #30362b;
    color: var(--cf-ink);
    background: #fff;
    padding: 22px 0 64px;
    font-family: Arial, Helvetica, sans-serif;
}
.cf-recipe *, .cf-recipe *::before, .cf-recipe *::after {
    box-sizing: border-box;
}
.cf-recipe a { color: var(--cf-primary-dark); }
.cf-recipe a:focus-visible, .cf-recipe button:focus-visible,
.cf-recipe input:focus-visible {
    outline: 3px solid var(--cf-accent);
    outline-offset: 3px;
}
.cf-recipe-breadcrumb {
    display: flex; flex-wrap: wrap; gap: 9px;
    align-items: center; font-size: 13px;
    color: #69716a; margin: 0 0 24px;
}
.cf-recipe-breadcrumb a { text-decoration: none; }
.cf-recipe-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 290px);
    gap: 30px; align-items: start;
}
.cf-recipe-main, .cf-recipe-sidebar { min-width: 0; }
.cf-recipe-heading { margin-bottom: 24px; }
.cf-recipe-eyebrow {
    margin: 0 0 9px; text-transform: uppercase;
    color: var(--cf-primary-dark); font-weight: 800;
    letter-spacing: .08em; font-size: 12px;
}
.cf-recipe-heading h1 {
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    line-height: 1.13; margin: 0 0 14px;
    font-weight: 800; overflow-wrap: anywhere;
}
.cf-recipe-byline {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px; font-size: 14px; color: #687067;
    margin: 0 0 10px;
}
.cf-recipe-rating {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px; font-size: 14px;
}
.cf-recipe-rating > span:first-child {
    color: #d68a12; font-size: 19px;
}
.cf-recipe-hero {
    margin: 0 0 22px; overflow: hidden;
    background: #f2f0e9;
}
.cf-recipe-hero img {
    display: block; width: 100%;
    max-height: 500px; aspect-ratio: 16 / 10;
    object-fit: cover;
}
.cf-recipe-facts {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    border: 1px solid #e4e8dc;
    margin: 0 0 20px;
}
.cf-recipe-facts > div {
    padding: 14px 8px; text-align: center;
    border-right: 1px solid #e4e8dc;
}
.cf-recipe-facts > div:last-child { border-right: 0; }
.cf-recipe-facts span {
    display: block; color: #697168;
    font-size: 12px; margin-bottom: 6px;
}
.cf-recipe-facts strong { display: block; font-size: 14px; }
.cf-recipe-toolbar {
    display: flex; flex-wrap: wrap; gap: 12px;
    align-items: center; margin-bottom: 26px;
}
.cf-recipe-share-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-recipe-share-actions button,
.cf-serving-controls button, .cf-sidebar-panel button {
    border: 1px solid var(--cf-primary);
    background: var(--cf-primary);
    color: #fff; padding: 8px 13px;
    cursor: pointer; border-radius: 3px;
}
.cf-recipe-share-actions button:hover,
.cf-serving-controls button:hover,
.cf-sidebar-panel button:hover {
    background: var(--cf-primary-dark);
}
.cf-recipe-share-actions button:disabled,
.cf-serving-controls button:disabled { opacity: .5; cursor: not-allowed; }
#recipe-share-status { font-size: 13px; }
.cf-recipe-section {
    padding: 23px 0; border-top: 1px solid #e6e9e0;
}
.cf-recipe-section h2, .cf-recipe-comments h2 {
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    line-height: 1.25; margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--cf-primary);
}
.cf-recipe-section p {
    line-height: 1.75; overflow-wrap: anywhere;
}
.cf-recipe-gallery {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.cf-recipe-gallery img {
    width: 100%; height: 155px; object-fit: cover;
}
.cf-recipe-section-top {
    display: flex; align-items: start;
    justify-content: space-between; gap: 16px;
    flex-wrap: wrap; margin-bottom: 12px;
}
.cf-recipe-section-top h2 { flex: 1; margin-bottom: 0; }
.cf-serving-controls {
    display: flex; flex-wrap: wrap;
    align-items: center; gap: 7px;
    font-size: 12px;
}
.cf-serving-controls button { padding: 5px 9px; }
.cf-serving-controls output { min-width: 25px; text-align: center; font-weight: 700; }
.cf-ingredient-list {
    margin: 0; padding: 0; list-style: none;
    display: grid; gap: 1px;
}
.cf-ingredient-list li {
    display: flex; align-items: start; gap: 12px;
    padding: 13px 10px; background: #f8faf4;
    line-height: 1.55; overflow-wrap: anywhere;
}
.cf-ingredient-list li:nth-child(even) { background: #f0f5e9; }
.cf-check {
    flex: 0 0 21px; display: grid; place-items: center;
    background: var(--cf-primary); color: #fff;
    border-radius: 50%; font-size: 12px;
    height: 21px; margin-top: 2px;
}
.cf-ingredient-list small { color: #677264; }
.cf-recipe-steps {
    list-style: none; counter-reset: cfstep;
    margin: 0; padding: 0;
}
.cf-recipe-steps li {
    position: relative; padding: 0 0 20px 42px;
    margin-bottom: 20px; border-bottom: 1px solid #ebeee5;
}
.cf-recipe-steps h3 {
    margin: 0 0 8px;
    font-size: 17px; font-weight: 800;
}
.cf-recipe-steps p { margin: 0; }
.cf-recipe-steps img {
    margin-top: 12px; max-width: 100%;
    max-height: 320px; object-fit: contain;
}
.cf-recipe-steps li::before {
    counter-increment: cfstep; content: counter(cfstep);
    position: absolute; left: 0; top: 0;
    width: 29px; height: 29px;
    display: grid; place-items: center;
    background: var(--cf-primary);
    color: #fff; border-radius: 50%;
    font-weight: 800;
}
.cf-nutrition-grid {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px; margin: 0;
}
.cf-nutrition-grid > div {
    background: #f6f8f1; padding: 13px 9px;
    text-align: center; min-width: 0;
}
.cf-nutrition-grid dt {
    font-size: 12px; color: #667065;
    margin-bottom: 8px;
}
.cf-nutrition-grid dd {
    font-size: 15px; font-weight: 800;
    margin: 0; overflow-wrap: anywhere;
}
.cf-recipe-tags { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 15px; }
.cf-recipe-tags span {
    padding: 5px 10px; background: var(--cf-primary-light);
    color: var(--cf-primary-dark); font-size: 12px;
}
.cf-recipe-sidebar {
    display: flex; flex-direction: column; gap: 22px;
}
.cf-sidebar-panel {
    border: 1px solid #e2e7dc; padding: 17px;
    overflow-wrap: anywhere;
}
.cf-sidebar-panel h2 {
    font-size: 19px; margin: 0 0 15px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--cf-primary);
}
.cf-sidebar-panel ul { list-style: none; margin: 0; padding: 0; }
.cf-sidebar-panel li {
    padding: 9px 0; border-bottom: 1px solid #e9ece4;
    font-size: 14px;
}
.cf-sidebar-panel li:last-child { border-bottom: 0; }
.cf-sidebar-panel a { text-decoration: none; }
.cf-sidebar-panel form { display: grid; gap: 9px; }
.cf-sidebar-panel label { font-size: 13px; }
.cf-sidebar-panel input {
    width: 100%; min-width: 0;
    padding: 10px; border: 1px solid #bfcaba;
}
.cf-recipe-reviews { padding-top: 26px; max-width: 850px; }
.cf-recipe-comments { max-width: 850px; padding-top: 22px; }
@media (max-width: 960px) {
    .cf-recipe-columns { grid-template-columns: minmax(0, 1fr) 240px; gap: 20px; }
    .cf-recipe-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cf-recipe-facts > div { border-bottom: 1px solid #e4e8dc; }
    .cf-nutrition-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .cf-recipe { padding: 15px 0 40px; }
    .cf-recipe-columns { grid-template-columns: minmax(0, 1fr); }
    .cf-recipe-hero img { max-height: 360px; }
    .cf-recipe-sidebar { display: grid; grid-template-columns: minmax(0, 1fr); }
    .cf-recipe-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cf-recipe-facts > div:nth-child(2n) { border-right: 0; }
    .cf-nutrition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cf-recipe-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
    .cf-recipe-gallery { grid-template-columns: minmax(0, 1fr); }
    .cf-recipe-gallery img { height: auto; max-height: 250px; }
    .cf-recipe-facts strong { font-size: 13px; }
}
@media print {
    .cf-recipe .recipe-no-print,
    .cf-recipe-sidebar, .cf-recipe-toolbar,
    .cf-recipe-reviews, .cf-recipe-comments {
        display: none !important;
    }
    .cf-recipe-columns { display: block; }
    .cf-recipe { padding: 0; color: #000; }
    .cf-recipe-section { break-inside: avoid; }
    .cf-recipe-hero img { max-height: 250px; }
}