:root {
    --fcc-ink:          #1d2733;
    --fcc-soft-ink:     #55606e;
    --fcc-bg:           #f6f1e8;
    --fcc-card:         rgba(255, 252, 247, 0.9);
    --fcc-accent:       #b45f2f;
    --fcc-accent-dark:  #8d4822;
    --fcc-border:       rgba(29, 39, 51, 0.12);
    --fcc-shadow:       0 24px 60px rgba(36, 33, 28, 0.14);
    --fcc-green:        #2f5d50;
    --fcc-red:          #c0392b;
    --fcc-gold:         #d4a017;
    --fcc-font-copy:    "Gill Sans", "Trebuchet MS", sans-serif;
    --fcc-font-heading: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

/* ─── Announce bar ─────────────────────────────────────────────────────────── */
.fcc-announce-bar {
    background: linear-gradient(90deg, #b91c1c 0%, #dc2626 50%, #b91c1c 100%);
    color: #fff;
    text-align: center;
    padding: 11px 16px;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(185,28,28,0.35);
}
.fcc-announce-bar strong { font-weight: 800; }
.fcc-announce-fire { font-size: 1.1em; }

/* ─── Page base ────────────────────────────────────────────────────────────── */
body.fcc-page {
    margin: 0;
    min-height: 100vh;
    color: var(--fcc-ink);
    background:
        radial-gradient(circle at top left,  rgba(242,176,112,0.22), transparent 32%),
        linear-gradient(180deg, #f8f4ed 0%, #efe5d7 100%);
    font-family: var(--fcc-font-copy);
    line-height: 1.6;
    position: relative;
    overflow-x: hidden;
}

.fcc-bg-orb {
    position: fixed;
    width: 32rem; height: 32rem;
    border-radius: 50%;
    filter: blur(22px);
    opacity: 0.45;
    pointer-events: none;
}
.fcc-bg-orb-a { background: rgba(180,95,47,0.18);  top: -10rem; right: -8rem; }
.fcc-bg-orb-b { background: rgba(47,93,80,0.14);   bottom: -12rem; left: -10rem; }

/* ─── Shell ────────────────────────────────────────────────────────────────── */
.fcc-shell {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 40px 0 56px;
    position: relative;
    z-index: 1;
}

/* ─── Card / Panel base ────────────────────────────────────────────────────── */
.fcc-card,
.fcc-panel {
    background: var(--fcc-card);
    border: 1px solid var(--fcc-border);
    border-radius: 28px;
    box-shadow: var(--fcc-shadow);
    backdrop-filter: blur(12px);
}
.fcc-card  { padding: 28px; }
.fcc-panel { padding: 28px; margin-top: 22px; }

/* ─── Topline pills ────────────────────────────────────────────────────────── */
.fcc-topline,
.fcc-chip-list,
.fcc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.fcc-pill,
.fcc-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 8px 14px;
    background: rgba(180,95,47,0.08);
    color: var(--fcc-accent-dark);
    font-size: 0.92rem;
    letter-spacing: 0.02em;
}
.fcc-pill-status {
    background: rgba(47,93,80,0.08);
    color: var(--fcc-green);
}
.fcc-pill-hot {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 14px rgba(185,28,28,0.30);
    animation: fcc-pulse 2s ease-in-out infinite;
}
@keyframes fcc-pulse {
    0%,100% { box-shadow: 0 4px 14px rgba(185,28,28,0.30); }
    50%      { box-shadow: 0 4px 22px rgba(185,28,28,0.55); }
}

/* ─── Hero grid ────────────────────────────────────────────────────────────── */
.fcc-hero-grid {
    display: grid;
    grid-template-columns: minmax(0,1.2fr) minmax(320px,0.8fr);
    gap: 28px;
    margin-top: 24px;
    align-items: start;
}

/* ─── Typography ───────────────────────────────────────────────────────────── */
.fcc-kicker,
.fcc-section-label {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    color: var(--fcc-accent-dark);
    margin: 0 0 10px;
}
.fcc-title,
.fcc-panel h2,
.fcc-steps-grid h3 {
    font-family: var(--fcc-font-heading);
    letter-spacing: -0.02em;
    margin: 0;
}
.fcc-title {
    font-size: clamp(2.1rem, 3.8vw, 3.8rem);
    line-height: 1.05;
}
.fcc-subtitle {
    font-size: 1.08rem;
    color: var(--fcc-soft-ink);
    margin: 14px 0 0;
    max-width: 60ch;
}

/* ─── Stars & rating ───────────────────────────────────────────────────────── */
.fcc-rating { margin: 14px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fcc-stars  { color: #f59e0b; font-size: 1.1rem; letter-spacing: 0.04em; }
.fcc-review-count { color: var(--fcc-soft-ink); font-size: 0.9rem; }

/* ─── Price block ──────────────────────────────────────────────────────────── */
.fcc-price-block {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0 0;
    padding: 16px 20px;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(185,28,28,0.18);
    border-radius: 18px;
}
.fcc-price-orig {
    font-size: 1.25rem;
    color: var(--fcc-soft-ink);
    text-decoration: line-through;
    text-decoration-color: var(--fcc-red);
    text-decoration-thickness: 2px;
}
.fcc-price-now {
    font-size: 2.2rem;
    font-family: var(--fcc-font-heading);
    font-weight: 700;
    color: var(--fcc-red);
    line-height: 1;
}
.fcc-price-badge {
    background: var(--fcc-red);
    color: #fff;
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: 0.06em;
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

/* ─── Egg hint (inline text) ───────────────────────────────────────────────── */
.fcc-egg-hint {
    margin: 12px 0 0;
    font-size: 0.95rem;
    color: var(--fcc-ink);
    background: rgba(212,160,23,0.10);
    border: 1px solid rgba(212,160,23,0.30);
    border-radius: 14px;
    padding: 10px 14px;
    line-height: 1.5;
}

/* ─── Timer ────────────────────────────────────────────────────────────────── */
.fcc-timer {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
    margin: 22px 0;
}
.fcc-timer-cell {
    border: 1px solid rgba(185,28,28,0.18);
    border-radius: 18px;
    padding: 14px 10px;
    text-align: center;
    background: rgba(255,255,255,0.65);
}
.fcc-timer-cell strong {
    display: block;
    font-size: 2rem;
    font-family: var(--fcc-font-heading);
    color: var(--fcc-red);
    line-height: 1;
}
.fcc-timer-cell span {
    display: block;
    margin-top: 6px;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fcc-soft-ink);
}

/* ─── Buttons ──────────────────────────────────────────────────────────────── */
.fcc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 26px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}
.fcc-button:hover { transform: translateY(-2px); }
.fcc-button-primary {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #fff;
    box-shadow: 0 14px 32px rgba(185,28,28,0.35);
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}
.fcc-button-primary:hover {
    box-shadow: 0 18px 40px rgba(185,28,28,0.45);
}
.fcc-button-secondary {
    background: rgba(255,255,255,0.72);
    color: var(--fcc-ink);
    border: 1px solid rgba(29,39,51,0.12);
}
.fcc-button.is-disabled {
    opacity: 0.55;
    pointer-events: none;
    box-shadow: none;
}

.fcc-meta {
    margin: 16px 0 0;
    font-size: 0.88rem;
    color: var(--fcc-soft-ink);
}

/* ─── Visual column ────────────────────────────────────────────────────────── */
.fcc-visual { display: grid; gap: 16px; position: relative; }

/* Discount badge overlay */
.fcc-badge-wrap {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 10;
}
.fcc-discount-badge {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dc2626, #7f1d1d);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--fcc-font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 8px 24px rgba(185,28,28,0.45);
    animation: fcc-spin-in 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
.fcc-discount-badge span {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    font-family: var(--fcc-font-copy);
    font-weight: 800;
}
@keyframes fcc-spin-in {
    from { transform: scale(0) rotate(-30deg); opacity: 0; }
    to   { transform: scale(1) rotate(0deg);  opacity: 1; }
}

.fcc-image-frame {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255,255,255,0.76), rgba(250,237,216,0.92));
    padding: 18px;
    border: 1px solid rgba(29,39,51,0.08);
}
.fcc-image-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    object-fit: cover;
}

/* ─── Egg card ─────────────────────────────────────────────────────────────── */
.fcc-egg-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(254,249,195,0.9), rgba(253,230,138,0.7));
    border: 1px solid rgba(212,160,23,0.40);
    border-radius: 20px;
    padding: 16px 18px;
    box-shadow: 0 6px 20px rgba(212,160,23,0.18);
}
.fcc-egg-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}
.fcc-egg-body strong {
    display: block;
    font-size: 1rem;
    color: #78350f;
    margin-bottom: 4px;
}
.fcc-egg-body p {
    margin: 0;
    font-size: 0.88rem;
    color: #92400e;
    line-height: 1.5;
}

/* ─── Benefits panel ───────────────────────────────────────────────────────── */
.fcc-panel-grid,
.fcc-steps-grid {
    display: grid;
    gap: 24px;
}
.fcc-panel-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

.fcc-benefits {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    display: grid;
    gap: 12px;
}
.fcc-benefits li {
    padding: 14px 18px;
    border-radius: 16px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(29,39,51,0.08);
    position: relative;
    padding-left: 38px;
}
.fcc-benefits li::before {
    content: '✓';
    position: absolute;
    left: 14px;
    top: 14px;
    color: var(--fcc-green);
    font-weight: 700;
}

/* ─── Steps panel ──────────────────────────────────────────────────────────── */
.fcc-panel-steps {
    background: linear-gradient(180deg, rgba(255,252,247,0.95), rgba(246,240,231,0.95));
}
.fcc-steps-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
    margin-top: 16px;
}
.fcc-steps-grid article {
    padding: 20px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(29,39,51,0.08);
}
.fcc-steps-grid article span {
    display: inline-flex;
    width: 38px; height: 38px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: rgba(47,93,80,0.1);
    color: var(--fcc-green);
    font-weight: 700;
    margin-bottom: 14px;
}
.fcc-steps-grid h3 { font-size: 1rem; margin-bottom: 8px; }
.fcc-steps-grid p  { margin: 0; font-size: 0.92rem; color: var(--fcc-soft-ink); }

/* ─── Spider links ─────────────────────────────────────────────────────────── */
.fcc-panel-spider { text-align: center; }
.fcc-spider-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.fcc-spider-list li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(29,39,51,0.1);
    color: var(--fcc-accent-dark);
    text-decoration: none;
    font-size: 0.92rem;
    transition: background 180ms ease, transform 180ms ease;
}
.fcc-spider-list li a:hover {
    background: rgba(180,95,47,0.1);
    transform: translateY(-1px);
}

/* ─── Expired state ────────────────────────────────────────────────────────── */
body.fcc-page.is-expired .fcc-pill-status {
    background: rgba(96,43,34,0.12);
    color: #7b3328;
}
body.fcc-page.is-expired .fcc-timer-cell strong { color: var(--fcc-soft-ink); }

/* ─── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .fcc-shell {
        width: min(100% - 20px, 1120px);
        padding-top: 20px;
        padding-bottom: 32px;
    }
    .fcc-card,
    .fcc-panel { border-radius: 22px; padding: 20px; }
    .fcc-hero-grid,
    .fcc-panel-grid,
    .fcc-steps-grid { grid-template-columns: 1fr; }
    .fcc-badge-wrap { top: -10px; right: -10px; }
    .fcc-discount-badge { width: 64px; height: 64px; font-size: 1.2rem; }
}

@media (max-width: 640px) {
    .fcc-title  { font-size: 2.1rem; }
    .fcc-timer  { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .fcc-button { width: 100%; }
    .fcc-price-now { font-size: 1.8rem; }
    .fcc-announce-bar { font-size: 0.82rem; padding: 9px 12px; }
}