/*
 * FoodHitsDifferent Recipes v1.0.2
 * ─────────────────────────────────────────────────────────────────────
 * EASY CUSTOMIZATION
 * Edit the variables below in Appearance → Customize → Additional CSS
 * Example:
 *   .fhd-recipe-card { --fhd-brand: #E85D9A; }
 * ─────────────────────────────────────────────────────────────────────
 */

:root {
    /* ─── Brand colours ─── */
    --fhd-brand:        #C94B0C;   /* main accent — spice orange        */
    --fhd-brand-hover:  #A83A08;
    --fhd-brand-bg:     #FEF0EA;   /* light tint of brand               */

    /* ─── Pink / hearts ─── */
    --fhd-pink:         #F472B6;
    --fhd-pink-dark:    #EC4899;
    --fhd-pink-bg:      #FDF2F8;
    --fhd-pink-border:  #F9A8D4;

    /* ─── Neutrals ─── */
    --fhd-cream:        #FBF7F2;   /* header / ingredient bg            */
    --fhd-white:        #ffffff;
    --fhd-ink:          #2B1810;   /* dark body text                    */
    --fhd-ink-soft:     #5C3D2E;
    --fhd-muted:        #8B7060;
    --fhd-border:       #EAE0D5;
    --fhd-border-mid:   #D4C4B4;

    /* ─── Status ─── */
    --fhd-sage:         #5A8A50;   /* success / checked                 */
    --fhd-gold:         #D97706;

    /* ─── Layout ─── */
    --fhd-radius:       12px;
    --fhd-radius-sm:    8px;
    --fhd-pill:         100px;
    --fhd-shadow:       0 2px 20px rgba(43,24,16,.10), 0 1px 4px rgba(43,24,16,.06);
}

/* ── Jump button ──────────────────────────────────────────────────── */
.fhd-jump-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.5rem 0;
}
.fhd-jump-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--fhd-brand);
    color: #fff !important;
    font-size: .875rem;
    font-weight: 700;
    padding: .55rem 1.4rem;
    border-radius: var(--fhd-pill);
    text-decoration: none !important;
    transition: background .2s, transform .15s;
    box-shadow: 0 2px 8px rgba(201,75,12,.25);
}
.fhd-jump-btn:hover { background: var(--fhd-brand-hover); transform: translateY(-1px); }
.fhd-jump-arrow { font-size: 1rem; }
.fhd-jump-score { font-size: .85rem; color: var(--fhd-ink-soft); display: flex; align-items: center; gap: .35rem; }
.fhd-jump-count  { color: var(--fhd-muted); font-size: .8rem; }


/* ════════════════════════════════════════════════════════════════════
   FHD QUICK-INFO BAR  —  Soft Aesthetic Minimalist · top of post
   ════════════════════════════════════════════════════════════════════ */

.fhd-quickbar {
    width: 100%;
    margin: 0 0 2.25rem;
    font-family: inherit;
}

/* Card container */
.fhd-qb-inner {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--fhd-cream, #FBF7F2);
    border: 1px solid var(--fhd-border, #EAE0D5);
    border-radius: var(--fhd-radius, 14px);
    padding: 0;
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(43,24,16,.05),
        0 4px 16px rgba(43,24,16,.04);
    position: relative;
}

/* Soft top gradient bar */
.fhd-qb-inner::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--fhd-pink, #F472B6) 0%,
        var(--fhd-brand, #C94B0C) 55%,
        var(--fhd-pink, #F472B6) 100%
    );
    opacity: .7;
    border-radius: var(--fhd-radius, 14px) var(--fhd-radius, 14px) 0 0;
}

/* ── Rating block (left accent) ── */
.fhd-qb-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .9rem 1.1rem;
    border-right: 1px solid var(--fhd-border, #EAE0D5);
    flex-shrink: 0;
    background: rgba(244,114,182,.04);
}
.fhd-qb-hearts {
    display: flex;
    gap: 1px;
    line-height: 1;
}
.fhd-qb-heart {
    font-size: .8rem;
    color: var(--fhd-border, #EAE0D5);
    transition: color .15s;
}
.fhd-qb-heart--on {
    color: var(--fhd-pink, #F472B6);
}
.fhd-qb-rating-num {
    font-size: .85rem;
    font-weight: 800;
    color: var(--fhd-ink, #2B1810);
    line-height: 1;
}
.fhd-qb-rating-count {
    font-size: .65rem;
    color: var(--fhd-muted, #8B7060);
    line-height: 1;
}

/* Optional visual divider between rating and meta */
.fhd-qb-divider {
    width: 1px;
    height: 40px;
    background: var(--fhd-border, #EAE0D5);
    flex-shrink: 0;
}

/* ── Meta stats row ── */
.fhd-qb-meta {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    flex: 1;
    min-width: 0;
    padding: 0 .5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.fhd-qb-meta::-webkit-scrollbar { display: none; }

/* Individual stat pill */
.fhd-qb-stat {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .9rem .8rem;
    flex-shrink: 0;
    transition: background .18s;
    border-radius: 8px;
    min-width: 0;
}
.fhd-qb-stat:hover {
    background: rgba(201,75,12,.05);
}

/* Thin separator line between stats */
.fhd-qb-sep {
    width: 1px;
    height: 28px;
    background: var(--fhd-border, #EAE0D5);
    flex-shrink: 0;
    margin: 0 .1rem;
    opacity: .7;
}

/* SVG icon */
.fhd-qb-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--fhd-brand, #C94B0C);
    opacity: .75;
}
.fhd-qb-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Label + value stack */
.fhd-qb-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}
.fhd-qb-label {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fhd-muted, #8B7060);
    white-space: nowrap;
}
.fhd-qb-value {
    font-size: .85rem;
    font-weight: 700;
    color: var(--fhd-ink, #2B1810);
    white-space: nowrap;
}

/* ── Jump to Recipe CTA ── */
.fhd-qb-jump {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
    margin: .65rem .85rem .65rem auto;
    padding: .55rem 1.1rem .55rem .9rem;
    background: var(--fhd-pink, #F472B6);
    color: #fff !important;
    text-decoration: none !important;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    border-radius: 100px;
    box-shadow: 0 2px 12px rgba(244,114,182,.30);
    transition: background .2s, transform .15s, box-shadow .2s;
    white-space: nowrap;
    line-height: 1;
}
.fhd-qb-jump:hover,
.fhd-qb-jump:focus {
    background: var(--fhd-brand, #C94B0C);
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(201,75,12,.30);
    color: #fff !important;
    text-decoration: none !important;
    outline: none;
}
.fhd-qb-jump-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    opacity: .9;
}
.fhd-qb-jump-arrow {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform .2s;
}
.fhd-qb-jump:hover .fhd-qb-jump-arrow {
    transform: translateY(2px);
}

/* ── Responsive ── */
@media (max-width: 680px) {
    .fhd-qb-inner {
        flex-direction: column;
        align-items: stretch;
    }
    .fhd-qb-rating {
        flex-direction: row;
        justify-content: center;
        gap: .5rem;
        border-right: none;
        border-bottom: 1px solid var(--fhd-border, #EAE0D5);
        padding: .7rem 1rem;
        background: rgba(244,114,182,.04);
    }
    .fhd-qb-divider { display: none; }
    .fhd-qb-meta {
        padding: .25rem .75rem;
        justify-content: center;
        flex-wrap: wrap;
        overflow-x: visible;
    }
    .fhd-qb-stat {
        padding: .6rem .5rem;
    }
    .fhd-qb-jump {
        margin: .5rem .75rem .75rem;
        justify-content: center;
        font-size: .82rem;
        padding: .65rem 1.2rem;
    }
}

@media (max-width: 420px) {
    .fhd-qb-sep { display: none; }
    .fhd-qb-meta {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        padding: .4rem .5rem;
    }
    .fhd-qb-stat {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: .2rem;
        padding: .6rem .4rem;
    }
    .fhd-qb-icon { margin: 0 auto; }
}

@media print {
    .fhd-quickbar { display: none !important; }
}

/* ── Card wrapper ─────────────────────────────────────────────────── */
.fhd-recipe-card {
    background: var(--fhd-white);
    border: 1px solid var(--fhd-border);
    border-radius: var(--fhd-radius);
    overflow: hidden;
    box-shadow: var(--fhd-shadow);
    margin: 2rem 0;
    width: 100%;
    box-sizing: border-box;
    color: var(--fhd-ink);
    /* NO font-family or font-size — fully inherits from WordPress theme */
    /* NO max-width — respects theme content column width */
}

/* ── Card header — CREAM bg, dark text, always readable ──────────── */
.fhd-card-header {
    background: var(--fhd-cream);
    border-bottom: 2px solid var(--fhd-brand);
    padding: 1.75rem 2rem;
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
}
@media (max-width: 580px) {
    .fhd-card-header { flex-direction: column-reverse; }
}
.fhd-header-content { flex: 1; min-width: 0; }
.fhd-header-image img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: var(--fhd-radius-sm);
    flex-shrink: 0;
    display: block;
}
@media (max-width: 580px) {
    .fhd-header-image img { width: 100%; height: 220px; }
}
.fhd-recipe-badge {
    display: inline-block;
    background: var(--fhd-brand);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .25rem .75rem;
    border-radius: var(--fhd-pill);
    margin-bottom: .625rem;
}
.fhd-recipe-title {
    font-size: clamp(1.5rem, 3.5vw, 2.1rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--fhd-ink);   /* always dark — no white-on-dark */
    margin: 0 0 .625rem;
}

/* ── Hearts rating row — directly under title ─────────────────────── */
.fhd-rating-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}
.fhd-hearts      { font-size: 1.1rem; letter-spacing: .04rem; line-height: 1; }
.fhd-hearts-empty { opacity: .35; }
.fhd-avg         { font-weight: 700; font-size: .9rem; color: var(--fhd-ink); }
.fhd-rcnt        { color: var(--fhd-muted); font-size: .8rem; }
.fhd-rcnt-cta    { color: var(--fhd-pink); font-weight: 600; font-size: .82rem; }

.fhd-recipe-description {
    font-size: .925rem;
    color: var(--fhd-ink-soft);
    line-height: 1.6;
    margin: 0 0 1rem;
}

/* ── Meta row ──────────────────────────────────────────────────────── */
.fhd-meta-row { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.fhd-meta-item { display: flex; flex-direction: column; gap: .15rem; }
.fhd-meta-label {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--fhd-muted);
}
.fhd-meta-value { font-size: .875rem; font-weight: 600; color: var(--fhd-ink); }
.fhd-meta-total .fhd-meta-value { color: var(--fhd-brand); }

/* ── Card body — two columns ──────────────────────────────────────── */
.fhd-card-body { display: grid; grid-template-columns: 1fr 1.5fr; }
@media (max-width: 620px) {
    .fhd-card-body { grid-template-columns: 1fr; }
    .fhd-ingredients-col { border-right: none !important; border-bottom: 1px solid var(--fhd-border); }
}

/* ── Ingredients ──────────────────────────────────────────────────── */
.fhd-ingredients-col {
    background: var(--fhd-cream);
    border-right: 1px solid var(--fhd-border);
    padding: 1.5rem 1.25rem;
}
.fhd-instructions-col { padding: 1.5rem; }
.fhd-col-title { font-size: 1rem; font-weight: 700; color: var(--fhd-ink); margin: 0 0 1rem; }

.fhd-servings-control {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--fhd-white);
    border: 1px solid var(--fhd-border-mid);
    border-radius: var(--fhd-pill);
    padding: .35rem .75rem;
    margin-bottom: 1rem;
    font-size: .85rem;
    color: var(--fhd-ink-soft);
}
.fhd-servings-btn {
    background: var(--fhd-brand);
    color: #fff;
    border: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    flex-shrink: 0;
}
.fhd-servings-btn:hover { background: var(--fhd-brand-hover); }
.fhd-servings-count { font-weight: 700; color: var(--fhd-ink); min-width: 18px; text-align: center; }
.fhd-servings-label { color: var(--fhd-muted); }

.fhd-ingredient-group { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fhd-brand); margin: 1rem 0 .5rem; }
.fhd-ingredient-list  { list-style: none; margin: 0; padding: 0; }
.fhd-ingredient-item  {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .45rem 0;
    border-bottom: 1px dashed var(--fhd-border);
    font-size: .875rem;
    transition: opacity .2s;
}
.fhd-ingredient-item:last-child { border-bottom: none; }
.fhd-ingredient-item.fhd-checked { opacity: .4; text-decoration: line-through; }
.fhd-ingredient-check {
    width: 18px; height: 18px;
    border: 2px solid var(--fhd-border-mid);
    border-radius: 4px;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    color: #fff;
    transition: all .15s;
}
.fhd-ingredient-item.fhd-checked .fhd-ingredient-check { background: var(--fhd-sage); border-color: var(--fhd-sage); }
.fhd-ingredient-amount { font-weight: 700; color: var(--fhd-brand); min-width: 60px; flex-shrink: 0; }
.fhd-ingredient-name   { color: var(--fhd-ink-soft); flex: 1; line-height: 1.4; }
.fhd-ingredient-notes  { color: var(--fhd-muted); font-style: normal; font-size: .8rem; }

/* ── Instructions ─────────────────────────────────────────────────── */
.fhd-step-group { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fhd-brand); margin: 1rem 0 .5rem; }
.fhd-step-list  { list-style: none; margin: 0; padding: 0; }
.fhd-step-item  { display: flex; gap: .875rem; margin-bottom: 1.5rem; align-items: flex-start; }
.fhd-step-number {
    width: 28px; height: 28px;
    background: var(--fhd-brand);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}
.fhd-step-content { flex: 1; }
.fhd-step-text { font-size: .9rem; color: var(--fhd-ink-soft); line-height: 1.65; margin: 0; }
.fhd-step-tip  {
    display: inline-flex;
    gap: .35rem;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: var(--fhd-radius-sm);
    padding: .4rem .75rem;
    font-size: .8rem;
    color: #92400E;
    margin-top: .6rem;
    line-height: 1.5;
}
.fhd-step-timer {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--fhd-brand-bg);
    border: 1px solid #F9C08A;
    border-radius: var(--fhd-pill);
    padding: .3rem .875rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--fhd-brand);
    cursor: pointer;
    margin-top: .5rem;
    transition: all .2s;
}
.fhd-step-timer.fhd-timer-running { background: var(--fhd-brand); color: #fff; }
.fhd-step-timer.fhd-timer-done   { background: #F0F7EE; color: var(--fhd-sage); border-color: #A7D7A0; }

/* ── Nutrition ────────────────────────────────────────────────────── */
.fhd-nutrition {
    padding: 1rem 1.5rem;
    background: var(--fhd-cream);
    border-top: 1px solid var(--fhd-border);
}
.fhd-nutrition-title { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fhd-muted); margin: 0 0 .625rem; }
.fhd-nutrition-grid  { display: flex; flex-wrap: wrap; gap: .5rem; }
.fhd-nutrition-item  { text-align: center; background: var(--fhd-white); border: 1px solid var(--fhd-border); border-radius: var(--fhd-radius-sm); padding: .5rem .875rem; min-width: 66px; }
.fhd-nutrition-value { display: block; font-size: 1rem; font-weight: 700; color: var(--fhd-ink); }
.fhd-nutrition-label { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fhd-muted); }

/* ── Card footer ──────────────────────────────────────────────────── */
.fhd-card-footer {
    padding: .875rem 1.5rem;
    border-top: 1px solid var(--fhd-border);
    background: var(--fhd-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
}
.fhd-actions-left { display: flex; gap: .5rem; flex-wrap: wrap; }
.fhd-action-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .9rem;
    border-radius: var(--fhd-radius-sm);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
    border: 1px solid var(--fhd-border-mid);
    background: var(--fhd-white);
    color: var(--fhd-ink-soft);
    text-decoration: none !important;
}
.fhd-action-btn:hover { border-color: var(--fhd-brand); color: var(--fhd-brand); background: var(--fhd-brand-bg); }
.fhd-pinterest-btn { background: #E60023; color: #fff !important; border-color: #E60023; }
.fhd-pinterest-btn:hover { background: #C50020; color: #fff !important; }

/* ═══════════════════════════════════════════════════════════════════
   REVIEWS SECTION
═══════════════════════════════════════════════════════════════════ */
.fhd-reviews-section {
    margin: 2rem 0;
    padding: 1.75rem;
    background: var(--fhd-white);
    border: 1px solid var(--fhd-border);
    border-radius: var(--fhd-radius);
    box-shadow: var(--fhd-shadow);
    width: 100%;
    box-sizing: border-box;
}
.fhd-reviews-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fhd-ink);
    margin: 0 0 1.25rem;
}
.fhd-reviews-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .875rem 1.25rem;
    background: var(--fhd-pink-bg);
    border: 1px solid var(--fhd-pink-border);
    border-radius: var(--fhd-radius-sm);
    margin-bottom: 1.25rem;
}
.fhd-rs-score { font-size: 2.25rem; font-weight: 900; color: var(--fhd-ink); line-height: 1; }
.fhd-rs-hearts { font-size: 1.15rem; letter-spacing: .08rem; margin-bottom: .2rem; }
.fhd-rs-label  { font-size: .78rem; color: var(--fhd-muted); }

/* Review items */
.fhd-review-item { padding: .875rem 0; border-bottom: 1px solid var(--fhd-border); }
.fhd-review-item:last-child { border-bottom: none; }
.fhd-review-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.fhd-review-hearts { font-size: .95rem; letter-spacing: .04rem; }
.fhd-review-author { font-weight: 700; font-size: .875rem; color: var(--fhd-ink); }
.fhd-review-date   { font-size: .78rem; color: var(--fhd-muted); margin-left: auto; }
.fhd-review-text   { font-size: .875rem; color: var(--fhd-ink-soft); line-height: 1.6; margin: 0; }

/* Heart picker */
.fhd-rate-widget { margin-top: .5rem; }
.fhd-rate-heading { font-size: 1rem; font-weight: 700; color: var(--fhd-ink); margin: 0 0 .875rem; }
.fhd-heart-picker {
    display: flex;
    gap: .15rem;
    margin-bottom: .5rem;
    /* Reverse so CSS sibling trick works: rightmost = 5, leftmost = 1 */
}
.fhd-heart-btn {
    background: none;
    border: none;
    font-size: 1.85rem;
    cursor: pointer;
    padding: .1rem;
    line-height: 1;
    transition: transform .1s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
/* Hover: scale up hovered heart */
.fhd-heart-btn:hover { transform: scale(1.3); }

/* Selected state */
.fhd-heart-btn.fhd-heart-lit { transform: scale(1.12); }

/* Burst animation on click */
@keyframes fhd-heart-burst {
    0%   { transform: scale(1); }
    25%  { transform: scale(1.55); }
    55%  { transform: scale(0.85); }
    100% { transform: scale(1.12); }
}
.fhd-heart-btn.fhd-heart-burst { animation: fhd-heart-burst .3s cubic-bezier(.36,.07,.19,.97) forwards; }

.fhd-heart-label { font-size: .82rem; color: var(--fhd-muted); margin: 0 0 .875rem; min-height: 1.2em; }

.fhd-review-fields { display: flex; flex-direction: column; gap: .625rem; }
.fhd-review-name,
.fhd-review-textarea {
    width: 100%;
    padding: .625rem .875rem;
    border: 1px solid var(--fhd-border-mid);
    border-radius: var(--fhd-radius-sm);
    font-size: .875rem;
    color: var(--fhd-ink);
    background: var(--fhd-white);
    box-sizing: border-box;
    transition: border-color .15s;
    font-family: inherit;
}
.fhd-review-name:focus, .fhd-review-textarea:focus {
    outline: none;
    border-color: var(--fhd-pink);
    box-shadow: 0 0 0 3px rgba(244,114,182,.12);
}
.fhd-review-submit {
    align-self: flex-start;
    background: var(--fhd-pink);
    color: #fff;
    border: none;
    padding: .625rem 1.5rem;
    border-radius: var(--fhd-pill);
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .15s;
    font-family: inherit;
}
.fhd-review-submit:hover { background: var(--fhd-pink-dark); transform: translateY(-1px); }
.fhd-already-rated { font-size: .875rem; color: var(--fhd-sage); font-weight: 600; margin: 0; }
.fhd-review-thanks { font-size: .875rem; color: var(--fhd-sage); font-weight: 700; margin: 0; }

/* Print */
@media print {
    .fhd-jump-wrap, .fhd-card-footer, .fhd-rate-widget,
    .fhd-reviews-section, .fhd-step-timer { display: none !important; }
    .fhd-recipe-card { box-shadow: none !important; border: 1px solid #ccc !important; }
}

/* ── Story Carousel ─────────────────────────────────────────────── */
.fhd-story-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--fhd-radius) var(--fhd-radius) 0 0;
    background: #111;
    max-height: 480px;
    aspect-ratio: 4/3;
}
.fhd-story-track {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}
.fhd-story-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
}
.fhd-story-slide.active {
    opacity: 1;
    pointer-events: auto;
}
.fhd-story-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fhd-story-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.65));
    color: #fff;
    font-size: .8rem;
    padding: .75rem 1rem .5rem;
    font-style: italic;
}
.fhd-story-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.85);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background .2s, transform .2s;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.fhd-story-arrow:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.1);
}
.fhd-story-prev { left: 10px; }
.fhd-story-next { right: 10px; }
.fhd-story-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}
.fhd-story-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s;
}
.fhd-story-dot.active {
    background: var(--fhd-pink);
    transform: scale(1.3);
}
@media (max-width: 540px) {
    .fhd-story-carousel { aspect-ratio: 3/2; }
    .fhd-story-arrow { width: 30px; height: 30px; font-size: .9rem; }
}