/* ============================================================
   SeeGap Recipes — Self-contained Front-end Styles
   BBC Good Food-inspired layout. No ads. Works on any theme.
   ============================================================ */

/* ---- CSS Variables ---- */
:root {
    --sgr-red:      #c0392b;
    --sgr-red-dark: #922b21;
    --sgr-yellow:   #f5a623;
    --sgr-green:    #2d6942;
    --sgr-green-dark: #1e4a2e;
    --sgr-bg:       #f5f5f5;
    --sgr-white:    #ffffff;
    --sgr-border:   #e0e0e0;
    --sgr-text:     #2c2c2c;
    --sgr-muted:    #666666;
    --sgr-heading:  #1a1a1a;
    --sgr-font:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --sgr-radius:   8px;
    --sgr-shadow:   0 2px 12px rgba(0,0,0,.08);
    --sgr-trans:    all .2s ease;
}

/* ============================================================
   RECIPE CARDS
   ============================================================ */

.seegap-recipe-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
}
.seegap-cols-2 { grid-template-columns: repeat(2, 1fr); }
.seegap-cols-4 { grid-template-columns: repeat(4, 1fr); }
.seegap-cols-1 { grid-template-columns: 1fr; }

.seegap-card {
    background: var(--sgr-white);
    border-radius: var(--sgr-radius);
    overflow: hidden;
    box-shadow: var(--sgr-shadow);
    transition: var(--sgr-trans);
    display: flex;
    flex-direction: column;
}
.seegap-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,.14);
    transform: translateY(-2px);
}
.seegap-card__image-wrap {
    position: relative;
    overflow: hidden;
    padding-top: 62%;
}
.seegap-card__image-wrap img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.seegap-card:hover .seegap-card__image-wrap img {
    transform: scale(1.04);
}
.seegap-card__image-placeholder {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #bbb;
}
.seegap-card__badge {
    position: absolute;
    top: 0.75rem; left: 0.75rem;
    background: var(--sgr-red);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 8px;
    border-radius: 3px;
}
.seegap-card__body {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.seegap-card__category {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--sgr-red);
    text-decoration: none;
}
.seegap-card__title {
    font-family: var(--sgr-font);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sgr-heading);
    line-height: 1.3;
    margin: 0;
}
.seegap-card__title a {
    color: inherit;
    text-decoration: none;
}
.seegap-card__title a:hover { color: var(--sgr-red); }

.seegap-card__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px solid var(--sgr-border);
    font-size: 0.78rem;
    color: var(--sgr-muted);
}
.seegap-card__meta-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.seegap-card__meta-item svg { flex-shrink: 0; opacity: .6; }
.seegap-card__rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

/* ============================================================
   SECTION TITLE
   ============================================================ */
.seegap-section-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--sgr-heading);
    margin: 0 0 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--sgr-red);
    display: inline-block;
}

/* ============================================================
   FEATURED HERO RECIPE (homepage)
   ============================================================ */
.seegap-hero {
    position: relative;
    border-radius: var(--sgr-radius);
    overflow: hidden;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    background: #222;
    margin-bottom: 2rem;
}
.seegap-hero__image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover; width: 100%; height: 100%; }
.seegap-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.1) 60%, transparent 100%); }
.seegap-hero__content { position: relative; z-index: 2; padding: 2rem; color: #fff; max-width: 700px; }
.seegap-hero__eyebrow { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--sgr-yellow); margin-bottom: 0.4rem; }
.seegap-hero__title { font-size: 2.2rem; font-weight: 900; line-height: 1.15; margin: 0 0 0.75rem; color: #fff; }
.seegap-hero__title a { color: inherit; text-decoration: none; }
.seegap-hero__title a:hover { text-decoration: underline; }
.seegap-hero__excerpt { font-size: 1rem; opacity: .85; margin-bottom: 1rem; max-width: 500px; }
.seegap-hero__meta { display: flex; gap: 1.5rem; font-size: 0.85rem; opacity: .9; }
.seegap-hero__meta-item { display: flex; align-items: center; gap: 0.4rem; }

/* ============================================================
   CATEGORY GRID
   ============================================================ */
.seegap-category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
.seegap-category-item { position: relative; border-radius: var(--sgr-radius); overflow: hidden; aspect-ratio: 1; background: var(--sgr-bg); display: flex; align-items: flex-end; text-decoration: none; transition: var(--sgr-trans); }
.seegap-category-item:hover { transform: translateY(-2px); box-shadow: var(--sgr-shadow); }
.seegap-category-item__image { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; }
.seegap-category-item__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 60%); }
.seegap-category-item__label { position: relative; z-index: 2; color: #fff; font-weight: 700; font-size: 0.95rem; padding: 0.6rem 0.75rem; width: 100%; text-align: center; }
.seegap-category-item--no-image .seegap-category-item__label { color: var(--sgr-heading); background: var(--sgr-bg); position: static; height: 100%; display: flex; align-items: center; justify-content: center; }

/* ============================================================
   COLLECTIONS
   ============================================================ */
.seegap-collections { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
.seegap-collection-card { border-radius: var(--sgr-radius); overflow: hidden; background: var(--sgr-bg); padding: 1.25rem; text-decoration: none; color: var(--sgr-heading); border: 1px solid var(--sgr-border); transition: var(--sgr-trans); display: flex; align-items: center; gap: 0.75rem; }
.seegap-collection-card:hover { border-color: var(--sgr-red); box-shadow: 0 4px 16px rgba(192,57,43,.12); transform: translateY(-1px); }
.seegap-collection-card__icon { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--sgr-red); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; }
.seegap-collection-card__icon img { width: 100%; height: 100%; object-fit: cover; }
.seegap-collection-card__title { font-weight: 700; font-size: 0.95rem; }
.seegap-collection-card__count { font-size: 0.8rem; color: var(--sgr-muted); }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.seegap-breadcrumb {
    font-size: 0.82rem;
    color: var(--sgr-muted);
    padding: 0.75rem 0;
    margin-bottom: 0;
}
.seegap-breadcrumb a {
    color: var(--sgr-muted);
    text-decoration: none;
}
.seegap-breadcrumb a:hover { text-decoration: underline; }
.seegap-breadcrumb span[aria-current] { color: var(--sgr-text); }

/* ============================================================
   SINGLE RECIPE — OUTER WRAPPER
   ============================================================ */
.seegap-single-recipe {
    font-family: var(--sgr-font);
    color: var(--sgr-text);
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ============================================================
   BBC GF HERO: 2-column (image | info)
   Scoped under .seegap-single-recipe to beat Kadence overrides
   ============================================================ */
.sgr-hero-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2.5rem;
    align-items: start;
    background: var(--sgr-bg);
    padding: 2rem;
    border-radius: var(--sgr-radius);
    margin-bottom: 0;
    width: 100%;
    box-sizing: border-box;
}
/* Extra specificity for Kadence */
.seegap-single-recipe .sgr-hero-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2.5rem !important;
    align-items: start !important;
}

/* Left: image */
.sgr-hero-image {
    position: relative;
    border-radius: var(--sgr-radius);
    overflow: hidden;
    background: #ddd;
    aspect-ratio: 4/3;
}
.sgr-hero-image__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sgr-hero-image__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    background: linear-gradient(135deg, #e8e8e8, #d0d0d0);
    color: #bbb;
}

/* Right: info */
.sgr-hero-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Title */
.sgr-recipe-title {
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1.15;
    color: var(--sgr-heading);
    margin: 0;
    text-align: center;
    font-family: Georgia, 'Times New Roman', serif;
}

/* Author */
.sgr-recipe-author {
    text-align: center;
    font-size: 0.88rem;
    margin: 0;
    color: var(--sgr-muted);
}
.sgr-recipe-author a {
    color: var(--sgr-green);
    text-decoration: none;
    font-weight: 600;
}
.sgr-recipe-author a:hover { text-decoration: underline; }

/* Save button */
.sgr-save-wrap {
    display: flex;
    justify-content: center;
}
.sgr-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--sgr-green);
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 0.6rem 1.4rem;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
    font-family: var(--sgr-font);
}
.sgr-save-btn:hover { background: var(--sgr-green-dark); }

/* ── Meta boxes ── */
.sgr-meta-boxes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.sgr-meta-box {
    border: 1px solid var(--sgr-border);
    border-radius: 6px;
    background: var(--sgr-white);
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sgr-heading);
    text-align: center;
}
.sgr-meta-box--full { width: 100%; box-sizing: border-box; }
.sgr-meta-box-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.sgr-meta-box--half { box-sizing: border-box; }
.sgr-meta-label {
    font-weight: 400;
    color: var(--sgr-text);
    margin-right: 0.2rem;
}
.sgr-meta-val { font-weight: 700; }

/* ── Inline ratings ── */
.sgr-hero-ratings {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.88rem;
}
.sgr-hero-stars { display: inline-flex; gap: 2px; }
.sgr-hero-rating-count { color: var(--sgr-text); }
.sgr-hero-rate-link,
.sgr-hero-comments-link {
    color: var(--sgr-green);
    text-decoration: none;
    font-weight: 600;
}
.sgr-hero-rate-link:hover,
.sgr-hero-comments-link:hover { text-decoration: underline; }

/* ── Description ── */
.sgr-recipe-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--sgr-muted);
    text-align: center;
    margin: 0;
}

/* ── Diet tags ── */
.sgr-diet-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
}
.sgr-diet-tag {
    display: inline-block;
    background: var(--sgr-white);
    border: 1px solid var(--sgr-border);
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sgr-text);
    text-decoration: none;
    transition: border-color .2s, color .2s;
}
.sgr-diet-tag:hover { border-color: var(--sgr-green); color: var(--sgr-green); }

/* ── Hero buttons (Print, Share) ── */
.sgr-hero-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.sgr-outline-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    color: var(--sgr-text);
    border: 2px solid var(--sgr-border);
    border-radius: 24px;
    padding: 0.5rem 1.2rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: var(--sgr-trans);
    font-family: var(--sgr-font);
}
.sgr-outline-btn:hover { border-color: var(--sgr-green); color: var(--sgr-green); }

/* ============================================================
   RELATED RECIPES — Tabbed Carousel (BBC GF style)
   ============================================================ */
.sgr-related-wrap {
    border-top: 1px solid var(--sgr-border);
    border-bottom: 1px solid var(--sgr-border);
    padding: 1.25rem 0;
    margin: 1.5rem 0;
    overflow: hidden;
}

/* Tab nav */
.sgr-related-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--sgr-border);
    margin-bottom: 1.25rem;
}
.sgr-related-tab {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.7rem 1.25rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--sgr-muted);
    cursor: pointer;
    font-family: var(--sgr-font);
    transition: color .2s, border-color .2s;
    margin-bottom: -1px;
}
.sgr-related-tab--active,
.sgr-related-tab:hover {
    color: var(--sgr-heading);
}
.sgr-related-tab--active {
    border-bottom-color: var(--sgr-green);
    color: var(--sgr-heading);
}

/* Panel */
.sgr-rel-panel { display: block; }
.sgr-rel-panel[hidden] { display: none; }

/* Carousel outer */
.sgr-carousel-outer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Arrow buttons */
.sgr-carousel-arrow {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--sgr-border);
    background: var(--sgr-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sgr-text);
    transition: var(--sgr-trans);
    z-index: 2;
}
.sgr-carousel-arrow:hover { border-color: var(--sgr-green); color: var(--sgr-green); }
.sgr-carousel-arrow:disabled { opacity: 0.3; cursor: default; }

/* Track */
.sgr-carousel-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    padding: 0.25rem 0;
}
.sgr-carousel-track::-webkit-scrollbar { display: none; }

/* Individual related card */
.sgr-rel-card {
    flex: 0 0 200px;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: var(--sgr-text);
    border-radius: 6px;
    transition: background .15s;
    padding: 0.4rem;
}
.sgr-rel-card:hover { background: var(--sgr-bg); }
.sgr-rel-card__thumb {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--sgr-bg);
}
.sgr-rel-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sgr-rel-card__thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.sgr-rel-card__body { flex: 1; min-width: 0; }
.sgr-rel-card__title {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--sgr-heading);
}
.sgr-rel-card__rating {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--sgr-muted);
}
.sgr-rel-card__count { color: var(--sgr-muted); font-size: 0.75rem; }

/* ============================================================
   MAIN CONTENT + SIDEBAR  layout
   ============================================================ */
.sgr-content-wrap {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    align-items: start;
    margin-top: 1.5rem;
}
.sgr-content-main { min-width: 0; }
.sgr-content-sidebar { min-width: 0; }

/* Video */
.sgr-recipe-video { margin-bottom: 1.5rem; border-radius: var(--sgr-radius); overflow: hidden; }
.sgr-recipe-video iframe { width: 100%; height: auto; aspect-ratio: 16/9; display: block; }

/* Prose */
.sgr-recipe-prose { margin-bottom: 1.5rem; font-size: 1rem; line-height: 1.7; }

/* ============================================================
   INGREDIENTS — Tabbed box (BBC GF style)
   ============================================================ */
.sgr-ing-wrap {
    background: var(--sgr-white);
    border: 1px solid var(--sgr-border);
    border-radius: var(--sgr-radius);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

/* Tab navigation */
.sgr-tabs {
    display: flex;
    border-bottom: 1px solid var(--sgr-border);
}
.sgr-tab {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 1rem 1.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sgr-muted);
    cursor: pointer;
    font-family: var(--sgr-font);
    transition: color .2s, border-color .2s;
    margin-bottom: -1px;
}
.sgr-tab--active {
    color: var(--sgr-heading);
    border-bottom-color: var(--sgr-green);
}
.sgr-tab:hover { color: var(--sgr-heading); }

/* Tab panels */
.sgr-tab-panel { padding: 1.25rem 1.5rem; }
.sgr-tab-panel[hidden] { display: none; }

/* Serving adjuster */
.sgr-serving-adjuster {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--sgr-muted);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--sgr-border);
}
.sgr-serving-label { font-weight: 600; color: var(--sgr-text); }
.sgr-serving-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--sgr-border);
    background: var(--sgr-white);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    transition: var(--sgr-trans);
    line-height: 1;
    padding: 0;
}
.sgr-serving-btn:hover { border-color: var(--sgr-green); color: var(--sgr-green); }
.sgr-serving-count {
    font-weight: 700;
    font-size: 1rem;
    color: var(--sgr-heading);
    min-width: 24px;
    text-align: center;
}

/* Ingredient group label */
.sgr-ing-group {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--sgr-heading);
    margin: 1.25rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--sgr-border);
}
.sgr-ing-group:first-child { margin-top: 0; border-top: none; padding-top: 0; }

/* Ingredient row */
.sgr-ing-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--sgr-border);
    font-size: 0.95rem;
    line-height: 1.4;
}
.sgr-ing-row:last-child { border-bottom: none; }
.sgr-ing-amount {
    flex-shrink: 0;
    min-width: 3.5rem;
    display: flex;
    gap: 0.2rem;
}
.sgr-ing-qty { font-weight: 700; color: var(--sgr-heading); }
.sgr-ing-unit { color: var(--sgr-muted); font-size: 0.9rem; }
.sgr-ing-name { flex: 1; color: var(--sgr-text); }
.sgr-ing-notes {
    display: block;
    font-size: 0.82rem;
    color: var(--sgr-muted);
    margin-top: 2px;
}

/* ── Nutrition tab panel ── */
.sgr-nutrition-disclaimer {
    font-size: 0.78rem;
    color: var(--sgr-muted);
    margin: 0 0 1rem;
}
.sgr-nutrition-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}
.sgr-nutrition-cell {
    text-align: center;
    padding: 0.6rem 0.25rem;
    background: var(--sgr-bg);
    border-radius: 6px;
}
.sgr-nutrition-val {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--sgr-heading);
}
.sgr-nutrition-lbl {
    display: block;
    font-size: 0.68rem;
    color: var(--sgr-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 2px;
}

/* ============================================================
   METHOD — BBC Good Food style (Step 1, Step 2 …)
   ============================================================ */
.sgr-method-wrap {
    background: var(--sgr-white);
    border: 1px solid var(--sgr-border);
    border-radius: var(--sgr-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.sgr-method-heading {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--sgr-heading);
    margin: 0 0 0.75rem;
    font-family: Georgia, 'Times New Roman', serif;
}
.sgr-method-divider,
.sgr-step-divider {
    border: none;
    border-top: 1px solid var(--sgr-border);
    margin: 0.75rem 0;
}
.sgr-step { padding: 0.75rem 0; }
.sgr-step-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sgr-heading);
    margin: 0 0 0.5rem;
}
.sgr-step-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--sgr-text);
    margin: 0;
}
.sgr-step-image {
    margin-top: 0.75rem;
    border-radius: 6px;
    overflow: hidden;
    max-width: 480px;
}
.sgr-step-image img { width: 100%; height: auto; display: block; }

/* ============================================================
   TIPS
   ============================================================ */
.seegap-tips {
    background: #fffbf0;
    border-left: 4px solid var(--sgr-yellow);
    border-radius: 0 var(--sgr-radius) var(--sgr-radius) 0;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}
.seegap-tips h3 { font-size: 1rem; font-weight: 800; color: var(--sgr-heading); margin: 0 0 0.5rem; }
.seegap-tips p { margin: 0; line-height: 1.6; font-size: 0.95rem; }

/* ============================================================
   STAR RATINGS — used throughout
   ============================================================ */
.seegap-stars {
    display: inline-flex;
    gap: 1px;
    line-height: 1;
}
.seegap-star { font-size: 1.1rem; }
.seegap-star--full  { color: var(--sgr-yellow); }
.seegap-star--half  { color: var(--sgr-yellow); opacity: .6; }
.seegap-star--empty { color: #ddd; }

/* ============================================================
   RATINGS & REVIEWS section
   ============================================================ */
.seegap-ratings {
    margin: 2rem 0;
    padding: 2rem;
    background: var(--sgr-white);
    border: 1px solid var(--sgr-border);
    border-radius: var(--sgr-radius);
}
.seegap-ratings h2 { font-size: 1.4rem; font-weight: 800; margin: 0 0 1.25rem; }
.seegap-ratings__summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--sgr-bg);
    border-radius: var(--sgr-radius);
}
.seegap-ratings__avg-number { font-size: 2.5rem; font-weight: 900; color: var(--sgr-heading); line-height: 1; }
.seegap-ratings__count { font-size: 0.85rem; color: var(--sgr-muted); }

/* Rating form */
.seegap-ratings-form {
    background: var(--sgr-bg);
    border-radius: var(--sgr-radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.seegap-ratings-form h3 { margin: 0 0 1rem; font-size: 1rem; font-weight: 800; }
.seegap-star-select { display: flex; gap: 4px; margin-bottom: 1rem; }
.seegap-star-select__star {
    font-size: 1.8rem;
    cursor: pointer;
    color: #ddd;
    transition: color .15s;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}
.seegap-star-select__star.active,
.seegap-star-select__star:hover { color: var(--sgr-yellow); }
.seegap-ratings-form input[type="text"],
.seegap-ratings-form textarea {
    width: 100%;
    border: 1px solid var(--sgr-border);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    font-family: var(--sgr-font);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    box-sizing: border-box;
}
.seegap-ratings-form textarea { resize: vertical; min-height: 90px; }
.seegap-btn-submit {
    background: var(--sgr-green);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}
.seegap-btn-submit:hover { background: var(--sgr-green-dark); }
.seegap-already-rated { font-size: 0.9rem; color: var(--sgr-muted); }

/* Review list */
.seegap-review { padding: 1rem 0; border-bottom: 1px solid var(--sgr-border); }
.seegap-review:last-child { border-bottom: none; }
.seegap-review__header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.4rem; }
.seegap-review__name { font-weight: 700; font-size: 0.9rem; }
.seegap-review__date { font-size: 0.78rem; color: var(--sgr-muted); margin-left: auto; }
.seegap-review__text { font-size: 0.9rem; line-height: 1.5; color: var(--sgr-text); margin: 0; }

/* ============================================================
   SOCIAL SHARE
   ============================================================ */
.seegap-share { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.seegap-share__label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sgr-muted); }
.seegap-share__buttons { display: flex; gap: 0.5rem; }
.seegap-share__btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: var(--sgr-trans);
    border: none; cursor: pointer; color: #fff;
}
.seegap-share__btn--facebook  { background: #1877f2; }
.seegap-share__btn--twitter   { background: #000; }
.seegap-share__btn--whatsapp  { background: #25d366; }
.seegap-share__btn--pinterest { background: #e60023; }
.seegap-share__btn--copy      { background: var(--sgr-muted); }
.seegap-share__btn:hover { opacity: .85; transform: scale(1.08); }

/* ============================================================
   TAXONOMY TAGS
   ============================================================ */
.seegap-recipe-footer {
    padding: 1.5rem 0;
    border-top: 1px solid var(--sgr-border);
    margin-top: 1rem;
}
.seegap-recipe-tag-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; font-size: 0.85rem; }
.seegap-recipe-tag-label { font-weight: 700; color: var(--sgr-muted); }
.seegap-recipe-tag {
    display: inline-block;
    background: var(--sgr-bg);
    border: 1px solid var(--sgr-border);
    border-radius: 4px;
    padding: 0.2rem 0.55rem;
    font-size: 0.8rem;
    color: var(--sgr-text);
    text-decoration: none;
    transition: var(--sgr-trans);
}
.seegap-recipe-tag:hover { border-color: var(--sgr-green); color: var(--sgr-green); }

/* ============================================================
   OLD META-BAR (kept for back-compat, hidden on single page)
   ============================================================ */
.seegap-recipe-meta-bar {
    display: flex;
    gap: 0;
    border: 1px solid var(--sgr-border);
    border-radius: var(--sgr-radius);
    overflow: hidden;
    margin: 1.5rem 0;
    background: var(--sgr-white);
}
.seegap-recipe-meta-bar__item { flex: 1; text-align: center; padding: 1rem 0.5rem; border-right: 1px solid var(--sgr-border); }
.seegap-recipe-meta-bar__item:last-child { border-right: none; }
.seegap-recipe-meta-bar__label { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sgr-muted); margin-bottom: 0.25rem; }
.seegap-recipe-meta-bar__value { display: block; font-size: 1rem; font-weight: 700; color: var(--sgr-heading); }

/* ============================================================
   ARCHIVE PAGE
   ============================================================ */
.seegap-archive { max-width: 1200px; margin: 0 auto; }
.seegap-archive__header { margin-bottom: 1.5rem; }
.seegap-archive__title  { font-size: 2rem; font-weight: 900; color: var(--sgr-heading); margin: 0 0 0.5rem; }
.seegap-archive__description { color: var(--sgr-muted); font-size: 0.95rem; }
.seegap-filters { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.5rem; padding: 1rem; background: var(--sgr-bg); border-radius: var(--sgr-radius); }
.seegap-filters select,
.seegap-filters input[type="search"] { border: 1px solid var(--sgr-border); border-radius: 4px; padding: 0.45rem 0.75rem; font-size: 0.875rem; background: var(--sgr-white); color: var(--sgr-text); min-width: 150px; }
.seegap-filters__apply { background: var(--sgr-red); color: #fff; border: none; border-radius: 4px; padding: 0.5rem 1.25rem; font-size: 0.875rem; font-weight: 700; cursor: pointer; transition: background .2s; }
.seegap-filters__apply:hover { background: var(--sgr-red-dark); }
.seegap-filters__reset { color: var(--sgr-muted); font-size: 0.825rem; text-decoration: underline; background: none; border: none; cursor: pointer; }
.seegap-sort-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; font-size: 0.875rem; color: var(--sgr-muted); }
.seegap-sort-bar select { border: 1px solid var(--sgr-border); border-radius: 4px; padding: 0.4rem 0.65rem; font-size: 0.875rem; }
.seegap-pagination { display: flex; justify-content: center; align-items: center; gap: 0.35rem; margin-top: 2.5rem; flex-wrap: wrap; }
.seegap-pagination a,
.seegap-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 0.5rem; border: 1px solid var(--sgr-border); border-radius: 4px; font-size: 0.875rem; text-decoration: none; color: var(--sgr-text); transition: var(--sgr-trans); }
.seegap-pagination a:hover { border-color: var(--sgr-red); color: var(--sgr-red); }
.seegap-pagination .current { background: var(--sgr-red); color: #fff; border-color: var(--sgr-red); font-weight: 700; }
.seegap-load-more { display: block; margin: 2rem auto 0; background: transparent; color: var(--sgr-red); border: 2px solid var(--sgr-red); border-radius: 4px; padding: 0.65rem 2rem; font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: var(--sgr-trans); }
.seegap-load-more:hover { background: var(--sgr-red); color: #fff; }

/* ============================================================
   LIVE SEARCH
   ============================================================ */
.seegap-search-wrap { position: relative; }
.seegap-search-input-wrap { display: flex; border: 2px solid var(--sgr-border); border-radius: 4px; overflow: hidden; background: var(--sgr-white); transition: border-color .2s; }
.seegap-search-input-wrap:focus-within { border-color: var(--sgr-red); }
.seegap-search-input { flex: 1; border: none; outline: none; padding: 0.7rem 1rem; font-size: 1rem; font-family: var(--sgr-font); }
.seegap-search-submit { background: var(--sgr-red); color: #fff; border: none; padding: 0 1rem; cursor: pointer; display: flex; align-items: center; }
.seegap-search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--sgr-white); border: 1px solid var(--sgr-border); border-radius: var(--sgr-radius); box-shadow: var(--sgr-shadow); z-index: 100; max-height: 360px; overflow-y: auto; }
.seegap-search-result-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; text-decoration: none; color: var(--sgr-text); border-bottom: 1px solid var(--sgr-border); transition: background .15s; }
.seegap-search-result-item:last-child { border-bottom: none; }
.seegap-search-result-item:hover { background: var(--sgr-bg); }
.seegap-search-result-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.seegap-search-result-item__title { font-weight: 600; font-size: 0.9rem; }
.seegap-search-result-item__time  { font-size: 0.78rem; color: var(--sgr-muted); }
.seegap-no-results { text-align: center; padding: 3rem; color: var(--sgr-muted); font-size: 1rem; }

/* ============================================================
   KADENCE THEME COMPATIBILITY OVERRIDES
   Kadence applies display:inline-block + theme bg to ALL buttons.
   We need !important overrides to reclaim our custom button styles.
   ============================================================ */

/* Hero grid — force 2 columns regardless of theme resets */
.seegap-single-recipe .sgr-hero-wrap,
.seegap-single-recipe div.sgr-hero-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 2rem !important;
    align-items: start !important;
}

/* Content + sidebar layout */
.seegap-single-recipe .sgr-content-wrap,
.seegap-single-recipe div.sgr-content-wrap {
    display: grid !important;
    grid-template-columns: 1fr 320px !important;
    gap: 2rem !important;
    align-items: start !important;
}
@media (max-width: 768px) {
    .seegap-single-recipe .sgr-content-wrap,
    .seegap-single-recipe div.sgr-content-wrap {
        display: block !important;
    }
}

/* Meta boxes — Kadence may strip borders from divs */
.seegap-single-recipe .sgr-meta-box {
    border: 1px solid var(--sgr-border) !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    padding: 0.75rem 1rem !important;
    text-align: center !important;
    display: block !important;
    box-sizing: border-box !important;
}
.seegap-single-recipe .sgr-meta-box-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
}

/* Save recipe button — override Kadence button styles */
.seegap-single-recipe .sgr-save-btn,
button.sgr-save-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    background: var(--sgr-green) !important;
    background-color: var(--sgr-green) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 24px !important;
    padding: 0.6rem 1.4rem !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
.seegap-single-recipe .sgr-save-btn:hover,
button.sgr-save-btn:hover {
    background: var(--sgr-green-dark) !important;
    background-color: var(--sgr-green-dark) !important;
    box-shadow: none !important;
}

/* Related recipe tabs — override Kadence button background */
.seegap-single-recipe .sgr-related-tab,
.sgr-related-tabs button.sgr-related-tab {
    display: inline-block !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    padding: 0.7rem 1.25rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--sgr-muted) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    margin-bottom: -1px !important;
}
.seegap-single-recipe .sgr-related-tab--active,
.sgr-related-tabs button.sgr-related-tab--active {
    color: var(--sgr-heading) !important;
    border-bottom-color: var(--sgr-green) !important;
}
.seegap-single-recipe .sgr-related-tab:hover,
.sgr-related-tabs button.sgr-related-tab:hover {
    color: var(--sgr-heading) !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Ingredients tabs — override Kadence button background */
.sgr-tabs button.sgr-tab,
.seegap-single-recipe .sgr-tab {
    display: inline-block !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    padding: 1rem 1.5rem !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--sgr-muted) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    margin-bottom: -1px !important;
}
.sgr-tabs button.sgr-tab--active,
.seegap-single-recipe .sgr-tab--active {
    color: var(--sgr-heading) !important;
    border-bottom-color: var(--sgr-green) !important;
}
.sgr-tabs button.sgr-tab:hover,
.seegap-single-recipe .sgr-tab:hover {
    color: var(--sgr-heading) !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Serving adjuster buttons */
.seegap-single-recipe .sgr-serving-btn,
button.sgr-serving-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: 1px solid var(--sgr-border) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: var(--sgr-text) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
}
.seegap-single-recipe .sgr-serving-btn:hover,
button.sgr-serving-btn:hover {
    border-color: var(--sgr-green) !important;
    color: var(--sgr-green) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

/* Carousel arrows */
.seegap-single-recipe .sgr-carousel-arrow,
button.sgr-carousel-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid var(--sgr-border) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: var(--sgr-text) !important;
    padding: 0 !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}
.seegap-single-recipe .sgr-carousel-arrow:hover,
button.sgr-carousel-arrow:hover {
    border-color: var(--sgr-green) !important;
    color: var(--sgr-green) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

/* Carousel track — force horizontal flex */
.seegap-single-recipe .sgr-carousel-outer,
.sgr-related-wrap .sgr-carousel-outer {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}
.seegap-single-recipe .sgr-carousel-track,
.sgr-related-wrap .sgr-carousel-track {
    display: flex !important;
    gap: 1rem !important;
    overflow-x: auto !important;
    flex: 1 !important;
}

/* Ingredients / method panels */
.seegap-single-recipe .sgr-ing-wrap,
.seegap-single-recipe .sgr-method-wrap {
    background: #ffffff !important;
    border: 1px solid var(--sgr-border) !important;
    border-radius: var(--sgr-radius) !important;
    overflow: hidden !important;
}
.seegap-single-recipe .sgr-ing-list,
.sgr-ing-wrap .sgr-ing-list {
    display: block !important;
}
.seegap-single-recipe .sgr-ing-row,
.sgr-ing-wrap .sgr-ing-row {
    display: flex !important;
    align-items: baseline !important;
    border-bottom: 1px solid var(--sgr-border) !important;
    padding: 0.65rem 0 !important;
}
.seegap-single-recipe .sgr-ing-row:last-child,
.sgr-ing-wrap .sgr-ing-row:last-child {
    border-bottom: none !important;
}

/* Responsive hero: stack on mobile */
@media (max-width: 768px) {
    .seegap-single-recipe .sgr-hero-wrap,
    .seegap-single-recipe div.sgr-hero-wrap {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    .sgr-hero-btns,
    .sgr-save-wrap,
    .sgr-related-wrap,
    .sgr-content-sidebar,
    .seegap-ratings-form,
    .seegap-share,
    .seegap-pagination { display: none !important; }
    .seegap-single-recipe { max-width: 100%; }
    .sgr-hero-wrap { grid-template-columns: 1fr 1fr; }
    .sgr-content-wrap { grid-template-columns: 1fr; }
    a[href]:after { content: none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
    .sgr-content-wrap { grid-template-columns: 1fr 280px; }
    .seegap-recipe-grid { grid-template-columns: repeat(2, 1fr); }
    .seegap-cols-4      { grid-template-columns: repeat(2, 1fr); }
    .seegap-category-grid { grid-template-columns: repeat(3, 1fr); }
    .seegap-collections { grid-template-columns: repeat(2, 1fr); }
    .sgr-nutrition-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Small tablet / large mobile */
@media (max-width: 768px) {
    .sgr-hero-wrap {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.25rem;
    }
    .sgr-hero-image { aspect-ratio: 16/9; }
    .sgr-recipe-title { font-size: 1.8rem; }
    .sgr-content-wrap { grid-template-columns: 1fr; }
    .sgr-content-sidebar { display: none; } /* hide sidebar on mobile */
    .seegap-recipe-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .seegap-cols-3      { grid-template-columns: repeat(2, 1fr); }
    .seegap-hero__title { font-size: 1.5rem; }
    .seegap-recipe-meta-bar { flex-wrap: wrap; }
    .seegap-recipe-meta-bar__item { flex: 0 0 50%; border-right: none; border-bottom: 1px solid var(--sgr-border); }
    .seegap-category-grid { grid-template-columns: repeat(2, 1fr); }
    .seegap-collections  { grid-template-columns: 1fr; }
    .sgr-nutrition-grid { grid-template-columns: repeat(2, 1fr); }
    .sgr-meta-box-row { grid-template-columns: 1fr 1fr; }
    .sgr-rel-card { flex: 0 0 160px; }
}

/* Mobile */
@media (max-width: 480px) {
    .seegap-recipe-grid { grid-template-columns: 1fr; }
    .seegap-hero { min-height: 300px; }
    .sgr-hero-wrap { padding: 1rem; }
    .sgr-recipe-title { font-size: 1.5rem; }
    .sgr-meta-box-row { grid-template-columns: 1fr 1fr; }
    .sgr-tab { padding: 0.75rem 1rem; font-size: 0.95rem; }
    .sgr-nutrition-grid { grid-template-columns: repeat(2, 1fr); }
    .sgr-rel-card { flex: 0 0 140px; }
}