/* ==========================================================================
   Stage Pills — trulygood-components.css
   ========================================================================== */

@font-face {
    font-family: 'Bliss2';
    src: url('../fonts/Bliss2-Heavy.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Stage colours — update hex values here if packaging colours change. Approved by Ané van Eeden. */
:root {
    --stage-gentle: #2AADA8;
    --stage-gentle-light: #C8E6C9;
    --stage-gentle-dark: #228A86;
    --stage-core: #D93B2B;
    --stage-core-light: #FDF0EE;
    --stage-core-dark: #AE2F22;
    --stage-freedom: #5AB030;
    --stage-freedom-light: #EEF7E8;
    --stage-freedom-dark: #488D26;

    /* Warm premium palette */
    --tg-bg: #FDFBF7;
    --tg-surface: #FFFFFF;
    --tg-text: #1A1A1A;
    --tg-text-secondary: #6B6B6B;
    --tg-border: #E8E4DF;
    --tg-border-light: #F0ECE6;
    --tg-hover-bg: #F5F2ED;
    --tg-accent: #23A74A;
    --tg-accent-hover: #1E9340;
    --tg-accent-glow: rgba(35, 167, 74, 0.12);
    --tg-dark: #1A1A1A;
    --tg-allergen-bg: #FFF0F2;
    --tg-allergen-text: #C0003C;
}

.tg-stage-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tg-stage-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border: 1px solid var(--tg-border);
    border-radius: 100px;
    background: var(--tg-surface);
    color: var(--tg-text);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.tg-stage-pill:hover {
    background: var(--tg-hover-bg);
    border-color: #D4CFC7;
}

.tg-stage-pill.active {
    background: var(--tg-accent);
    border-color: var(--tg-accent);
    color: #FFFFFF;
}

.tg-stage-pill[data-stage="gentle"].active {
    background: var(--stage-gentle);
    border-color: var(--stage-gentle);
}

.tg-stage-pill[data-stage="core"].active {
    background: var(--stage-core);
    border-color: var(--stage-core);
}

.tg-stage-pill[data-stage="freedom"].active {
    background: var(--stage-freedom);
    border-color: var(--stage-freedom);
}

.tg-stage-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0.85;
}

.tg-stage-pill.active .tg-stage-pill-dot {
    background: rgba(255,255,255,0.7) !important;
}

/* ==========================================================================
   Allergen Pills
   ========================================================================== */

.tg-allergen-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 100px;
    background: var(--tg-allergen-bg);
    color: var(--tg-allergen-text);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
}

.tg-allergen-pill i {
    font-size: 13px;
    color: var(--tg-allergen-text);
}

.tg-allergen-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* ==========================================================================
   Macro Display
   ========================================================================== */

.tg-macros {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tg-macro {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12px;
    color: var(--tg-text-secondary);
}

.tg-macro i {
    font-size: 14px;
    color: var(--tg-text-secondary);
}

.tg-macro-value {
    font-weight: 700;
    color: var(--tg-text);
}

.tg-macro-label {
    font-weight: 500;
}

/* ==========================================================================
   Quiz Page Shell
   ========================================================================== */

body.tg-quiz-page {
    margin: 0;
    padding: 0;
    background: #FFFFFF;
    min-height: 100vh;
}

.tgm-address-gate {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #F8F8F6;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 1;
    transition: opacity 300ms ease;
}

.tgm-address-gate--exiting {
    opacity: 0;
    pointer-events: none;
}

.tgm-address-gate--hidden {
    display: none;
}

.tgm-gate-card {
    width: 100%;
    max-width: 480px;
}

.tgm-gate-screen {
    width: 100%;
}

.tgm-gate-screen--hidden {
    display: none;
}

.tgm-quiz-hidden {
    display: none;
}

.tgm-gate-eyebrow {
    display: block;
    margin: 0 0 12px;
    color: #23A74A;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tgm-gate-heading {
    margin: 0 0 10px;
    color: #0A0A0A;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 1.15;
}

.tgm-gate-subline {
    margin: 0 0 20px;
    color: #0A0A0A;
    opacity: 0.7;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.55;
}

.tgm-gate-fallback-label {
    display: block;
    margin: 0 0 8px;
    color: #0A0A0A;
    opacity: 0.75;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 13px;
}

.tgm-gate-input {
    width: 100%;
    height: 52px;
    border: 1.5px solid #0A0A0A20;
    border-radius: 8px;
    padding: 0 16px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    color: #0A0A0A;
    outline: none;
    box-sizing: border-box;
    background: #FFFFFF;
}

.tgm-gate-input:focus {
    border: 1.5px solid #23A74A;
}

.tgm-gate-btn {
    width: 100%;
    height: 52px;
    margin-top: 12px;
    border: 0;
    border-radius: 8px;
    background: #23A74A;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
}

.tgm-gate-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.tgm-gate-btn-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #FFFFFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: tgmGateSpin 700ms linear infinite;
    display: none;
}

.tgm-gate-btn--loading .tgm-gate-btn-label {
    visibility: hidden;
}

.tgm-gate-btn--loading .tgm-gate-btn-spinner {
    display: block;
}

@keyframes tgmGateSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.tgm-gate-note {
    margin: 10px 0 0;
    color: #0A0A0A;
    opacity: 0.6;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.4;
}

.tgm-gate-skip {
    color: #23A74A;
    font-size: 14px;
    text-align: center;
    display: block;
    margin-top: 16px;
    text-decoration: none;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
}

.tgm-gate-skip:hover {
    text-decoration: underline;
    color: #23A74A;
}

.tgm-gate-error {
    min-height: 18px;
    margin: 8px 0 0;
    color: #DC0032;
    font-size: 13px;
    font-family: 'Nunito Sans', sans-serif;
}

.tgm-gate-success {
    min-height: 20px;
    margin: 8px 0 0;
    color: #23A74A;
    font-size: 14px;
    font-family: 'Nunito Sans', sans-serif;
}

@media (max-width: 480px) {
    .tgm-address-gate {
        padding: 20px;
    }

    .tgm-gate-heading {
        font-size: 28px;
    }

    .tgm-gate-subline {
        font-size: 15px;
    }
}

@media (min-width: 768px) {
    .tgm-gate-card {
        background: #FFFFFF;
        border-radius: 16px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
        padding: 40px;
    }
}

.tg-quiz-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 24px 48px;
}

/* ── Progress Bar ── */
.tg-quiz-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
    position: sticky;
    top: 0;
    background: #FFFFFF;
    z-index: 10;
}

.tg-quiz-back {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #0A0A0A;
    opacity: 0.4;
    font-size: 20px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    visibility: hidden; /* hidden on screen 0, shown via JS */
}

.tg-quiz-logo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #0A0A0A;
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
}

.tg-quiz-logo:hover {
    color: #0A0A0A;
    text-decoration: none;
}

.tg-quiz-progress-track {
    flex: 1;
    height: 3px;
    background: #F0F0EE;
    border-radius: 100px;
    overflow: hidden;
}

.tg-quiz-progress-fill {
    height: 100%;
    background: #23A74A;
    border-radius: 100px;
    transition: width 300ms ease;
    width: 0%;
}

.tg-quiz-step-label {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #0A0A0A;
    opacity: 0.5;
    flex-shrink: 0;
}

/* ── Screens ── */
.tg-quiz-screens {
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* Base state — transitions applied by JS inline styles */
.tg-quiz-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateX(24px);
    pointer-events: none;
}

.tg-quiz-screen.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
    position: relative;
}

/* ── Content ── */
.tg-quiz-content {
    padding-top: 32px;
}

.tg-quiz-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 28px;
    color: #0A0A0A;
    margin: 0 0 8px;
    line-height: 1.2;
}

.tg-quiz-subline {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.6;
    margin: 0 0 32px;
}

/* ── Option Cards ── */
.tg-quiz-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Full-width clickable card */
.tg-quiz-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border: 1.5px solid #E8E8E6;
    border-radius: 12px;
    background: #FFFFFF;
    cursor: pointer;
    text-align: left;
    transition: border-color 200ms ease, background 200ms ease;
    width: 100%;
    min-height: 72px;
    position: relative;
    box-sizing: border-box;
}

.tg-quiz-option:hover {
    border-color: #66B37A;
}

.tg-quiz-option.selected {
    border-width: 2px;
    border-style: solid;
    background-color: #FFFFFF;
}

/* ── Icon area (44 × 44, centred) ── */
.tg-quiz-option-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #23A74A; /* default; overridden by stage classes */
}

.tg-quiz-option-icon i {
    font-size: 28px;
    color: inherit;
}

.tg-quiz-option-icon svg {
    width: 28px;
    height: 28px;
}

.tg-quiz-option--stage .tg-quiz-option-icon svg {
    width: 40px;
    height: 40px;
}

/* ── Stage-specific icon colours ── */
.tg-quiz-option--gentle .tg-quiz-option-icon { color: var(--stage-gentle); }
.tg-quiz-option--core   .tg-quiz-option-icon { color: var(--stage-core);   }
.tg-quiz-option--freedom .tg-quiz-option-icon { color: var(--stage-freedom); }

/* ── Text area ── */
.tg-quiz-option-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tg-quiz-option .tg-option-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #0A0A0A;
    display: block;
}

.tg-quiz-option .tg-option-desc {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.55;
    display: block;
}

/* ── Radio indicator (right edge) ── */
.tg-quiz-option-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid #E8E8E6;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms ease, border-color 200ms ease;
    background: #FFFFFF;
}

/* Checkmark SVG hidden by default; revealed on selection */
.tg-quiz-option-radio svg {
    opacity: 0;
    transition: opacity 150ms ease;
    display: block;
    flex-shrink: 0;
}

/* Selected radio — brand green default */
.tg-quiz-option.selected .tg-quiz-option-radio {
    background: #23A74A;
    border-color: #23A74A;
}

/* Show checkmark SVG when card is selected */
.tg-quiz-option.selected .tg-quiz-option-radio svg {
    opacity: 1;
}

/* ── Stage-specific selection colours ── */
.tg-quiz-option.tg-quiz-option--gentle.selected {
    border-color: #66B37A;
}
.tg-quiz-option.tg-quiz-option--gentle.selected .tg-quiz-option-radio {
    background: #66B37A;
    border-color: #66B37A;
}

.tg-quiz-option.tg-quiz-option--core.selected {
    border-color: var(--stage-core);
}
.tg-quiz-option.tg-quiz-option--core.selected .tg-quiz-option-radio {
    background: var(--stage-core);
    border-color: var(--stage-core);
}

.tg-quiz-option.tg-quiz-option--freedom.selected {
    border-color: var(--stage-freedom);
}
.tg-quiz-option.tg-quiz-option--freedom.selected .tg-quiz-option-radio {
    background: var(--stage-freedom);
    border-color: var(--stage-freedom);
}

/* ── Stage-specific selection colours with !important for override ── */
.tg-quiz-option--gentle.selected,
.tg-quiz-option--gentle.tg-selected {
  border-color: #66B37A !important;
  background-color: var(--stage-gentle-light) !important;
}

.tg-quiz-option--core.selected,
.tg-quiz-option--core.tg-selected {
  border-color: #D93B2B !important;
  background-color: var(--stage-core-light) !important;
}

.tg-quiz-option--freedom.selected,
.tg-quiz-option--freedom.tg-selected {
  border-color: #5AB030 !important;
  background-color: var(--stage-freedom-light) !important;
}

/* ── Coming Soon card treatment ── */
.tg-quiz-option--coming-soon {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.tg-coming-soon-badge {
    position: absolute;
    top: -9px;
    right: 16px;
    background: #0A0A0A;
    color: #FFFFFF;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 100px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Stage Card Collapsed/Expanded Layout ── */
.tg-quiz-option--stage {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
}

/* Collapsed layer — always visible */
.tg-quiz-option-collapsed {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    min-height: 64px;
}

.tg-quiz-option-collapsed .tg-quiz-option-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tg-quiz-option-collapsed .tg-quiz-option-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    align-items: center;
    text-align: center;
}

.tg-quiz-option-collapsed .tg-option-eyebrow {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0A0A0A;
    opacity: 0.4;
    display: block;
}

.tg-quiz-option-collapsed .tg-option-label {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #0A0A0A;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Expanded layer — hidden by default, expands on selection */
.tg-quiz-option-expanded {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    transition: max-height 350ms cubic-bezier(0.16, 1, 0.3, 1), padding 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tg-quiz-option--stage.selected .tg-quiz-option-expanded {
    max-height: 400px;
    padding: 0 20px 20px;
}

.tg-quiz-option--stage .tg-quiz-option-icon {
    margin-top: 0;
}

.tg-option-eyebrow {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0A0A0A;
    opacity: 0.4;
    display: block;
    margin-bottom: 2px;
}

.tg-option-identifier {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #0A0A0A;
    opacity: 0.7;
    display: block;
    margin-top: 4px;
    line-height: 1.5;
    transition: opacity 200ms ease;
}

.tg-quiz-option--stage.selected .tg-option-identifier {
    opacity: 1;
}

.tg-option-body {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.65;
    display: block;
    line-height: 1.7;
}

.tg-option-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}

.tg-option-tag {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #0A0A0A;
    background: #F8F8F6;
    border: 0.5px solid #E8E8E6;
    border-radius: 100px;
    padding: 3px 10px;
    display: inline-flex;
    align-items: center;
}

/* ── SVG Icon Styles ── */
.tg-icon-gentle-droplet {
    stroke: var(--stage-gentle);
    transition: stroke 200ms ease, transform 200ms ease;
}

.tg-icon-core-shield {
    stroke: var(--stage-core);
    transition: stroke 200ms ease, transform 200ms ease;
}

.tg-icon-freedom-arrow {
    stroke: var(--stage-freedom);
    transition: stroke 200ms ease, transform 200ms ease;
}

/* ── Hover: All icons lift up ── */
.tg-quiz-option--stage:hover .tg-icon-gentle-droplet,
.tg-quiz-option--stage:hover .tg-icon-core-shield,
.tg-quiz-option--stage:hover .tg-icon-freedom-arrow {
    transform: translateY(-3px);
}

/* ── Selection: icon colour darkens ── */
.tg-quiz-option--gentle.selected .tg-icon-gentle-droplet {
    stroke: var(--stage-gentle-dark);
}

.tg-quiz-option--core.selected .tg-icon-core-shield {
    stroke: var(--stage-core-dark);
}

.tg-quiz-option--freedom.selected .tg-icon-freedom-arrow {
    stroke: var(--stage-freedom-dark);
}

/* ── Continue Button ── */
.tg-quiz-continue-btn {
    display: none;
    width: 100%;
    padding: 14px;
    background: #23A74A;
    color: #F8F8F6;
    border: none;
    border-radius: 100px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    margin-top: 16px;
}

.tg-quiz-continue-btn:hover {
    opacity: 0.88;
}

.tg-quiz-continue-btn:hover {
    opacity: 0.88;
}

/* ── Email Capture Screen ── */
.tg-quiz-email {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 480px;
    margin: 0 auto;
    text-align: left;
}

.tg-quiz-email-input {
    width: 100%;
    padding: 16px 20px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #0A0A0A;
    border: 1.5px solid #E8E8E6;
    border-radius: 10px;
    background: #FFFFFF;
    outline: none;
    transition: border-color 200ms ease;
    box-sizing: border-box;
}

.tg-quiz-email-input::placeholder {
    color: #0A0A0A;
    opacity: 0.35;
}

.tg-quiz-email-input:focus {
    border-color: #23A74A;
}

.tg-quiz-email-error {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    color: #DC0032;
    display: block;
    min-height: 0;
}

.tg-quiz-email-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tg-quiz-email-save {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    background: #23A74A;
    color: #F8F8F6;
    border: none;
    border-radius: 100px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    transition: opacity 200ms ease;
    white-space: nowrap;
}

.tg-quiz-email-save:hover {
    opacity: 0.88;
}

.tg-quiz-email-skip {
    background: none;
    border: none;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.45;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

.tg-quiz-email-skip:hover {
    opacity: 0.7;
}

@media (max-width: 480px) {
    .tg-quiz-email-actions {
        flex-direction: column;
        gap: 12px;
    }
    .tg-quiz-email-save {
        width: 100%;
        justify-content: center;
    }
}

/* Mobile: reduce minimum height */
@media (max-width: 480px) {
    .tg-quiz-option {
        min-height: 64px;
        padding: 16px 20px;
    }

    /* Stage card mobile styles */
    .tg-quiz-option--stage {
        padding: 0;
    }

    .tg-quiz-option-collapsed {
        padding: 14px 16px;
        min-height: 56px;
        gap: 12px;
    }

    .tg-quiz-option-collapsed .tg-quiz-option-icon {
        width: 36px;
        height: 36px;
    }

    .tg-quiz-option-collapsed .tg-quiz-option-icon svg {
        width: 32px;
        height: 32px;
    }

    .tg-quiz-option-collapsed .tg-option-label {
        font-size: 18px;
    }

    .tg-quiz-option-expanded {
        padding: 0 16px;
    }

    .tg-quiz-option--stage.selected .tg-quiz-option-expanded {
        padding: 0 16px 16px;
    }

    .tg-option-identifier {
        font-size: 13px;
    }

    .tg-option-body {
        font-size: 13px;
    }

    .tg-option-tags {
        gap: 4px;
        margin-top: 12px;
    }

    .tg-option-tag {
        font-size: 10px;
        padding: 2px 8px;
    }

    .tg-quiz-continue-btn {
        padding: 12px;
        font-size: 14px;
    }
}

/* ── Centred variant (first name screen) ── */
.tg-quiz-heading--centered  { text-align: center; }
.tg-quiz-subline--centered  { text-align: center; }
.tg-quiz-content--centered  { text-align: center; }

/* ── Continue Button ── */
.tg-quiz-next {
    margin-top: 24px;
    width: 100%;
    padding: 16px;
    background: #23A74A;
    color: #F8F8F6;
    border: none;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    transition: opacity 200ms ease;
}

.tg-quiz-next:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ── First Name Capture Screen ── */
.tg-quiz-firstname {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
}

.tg-quiz-firstname-input {
    width: 100%;
    padding: 16px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #0A0A0A;
    border: 1.5px solid #E8E8E6;
    border-radius: 10px;
    background: #FFFFFF;
    outline: none;
    transition: border-color 200ms ease;
    box-sizing: border-box;
}

.tg-quiz-firstname-input::placeholder {
    color: #0A0A0A;
    opacity: 0.35;
}

.tg-quiz-firstname-input:focus {
    border-color: #23A74A;
}

.tg-quiz-firstname-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tg-quiz-firstname-continue {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    background: #23A74A;
    color: #F8F8F6;
    border: none;
    border-radius: 100px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    transition: opacity 200ms ease;
    white-space: nowrap;
}

.tg-quiz-firstname-continue:hover {
    opacity: 0.88;
}

.tg-quiz-firstname-skip {
    background: none;
    border: none;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.5;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

.tg-quiz-firstname-skip:hover {
    opacity: 0.7;
}

/* Responsive: scale heading on mobile */
@media (max-width: 480px) {
    .tg-quiz-heading {
        font-size: 24px;
    }
}

/* ==========================================================================
   Quiz — Results Screen (Screen 5)
   ========================================================================== */

/* Loading spinner */
.tg-results-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 0;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    color: #0A0A0A;
    opacity: 0.6;
}

.tg-results-loading i {
    font-size: 24px;
    animation: tgSpin 1s linear infinite;
}

@keyframes tgSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Warning banner */
.tg-results-warning {
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #FFF8E1;
    border: 1px solid #F9A825;
    border-radius: 10px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #5D4037;
    line-height: 1.5;
}

/* Meal grid */
.tg-results-meals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

@media (max-width: 400px) {
    .tg-results-meals {
        grid-template-columns: 1fr;
    }
}

.tg-meal-card {
    border: 1px solid #E2E8E2;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.tg-meal-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.tg-meal-info {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tg-meal-title {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #0A0A0A;
    line-height: 1.4;
}

.tg-meal-protein {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 11px;
    color: #23A74A;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tg-no-meals {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #0A0A0A;
    opacity: 0.6;
    text-align: center;
    padding: 24px 0;
}

/* Action buttons */
.tg-results-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.tg-results-checkout-btn {
    display: block;
    width: 100%;
    padding: 16px;
    background: #23A74A;
    color: #F8F8F6;
    border: none;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 200ms ease;
}

.tg-results-checkout-btn:hover {
    opacity: 0.9;
    color: #F8F8F6;
    text-decoration: none;
}

.tg-results-retake-btn {
    display: block;
    width: 100%;
    padding: 12px;
    background: transparent;
    color: #0A0A0A;
    border: 1px solid #E2E8E2;
    border-radius: 12px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 200ms ease;
}

.tg-results-retake-btn:hover {
    background: #F0FAF4;
}

/* ── Meals Page ── */
.tg-meals-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px 120px;
    background: var(--tg-bg);
}

/* Ensure full-width warm background behind constrained content */
body.page-template-page-meals,
body.page-template-page-meals .site-content,
body.page-template-page-meals .content-area,
body.page-template-page-meals .site-main {
    background: var(--tg-bg);
}

/* ── Filter Bar ── */
.tg-meals-filter-bar {
    position: sticky;
    top: 0;
    background: var(--tg-bg);
    z-index: 20;
    padding: 16px 0 14px;
    border-bottom: 1px solid var(--tg-border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.tg-meals-filter-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tg-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border: 1px solid var(--tg-border);
    border-radius: 100px;
    background: var(--tg-surface);
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--tg-text);
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.tg-filter-chip:hover {
    background: var(--tg-hover-bg);
    border-color: #D4CFC7;
}

.tg-filter-chip.active {
    background: var(--tg-accent);
    border-color: var(--tg-accent);
    color: #FFFFFF;
}

.tg-protein-filter,
.tg-allergen-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tg-filter-label {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--tg-text-secondary);
}

/* ── Price Info (merged into filter bar) ── */
.tg-meals-price-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--tg-border-light);
    flex-wrap: wrap;
    gap: 6px;
}

.tg-price-info-text {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--tg-text-secondary);
}

.tg-price-info-text .woocommerce-Price-amount,
.tg-price-info-text bdi {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: var(--tg-accent);
}

.tg-price-info-sep {
    opacity: 0.4;
    margin: 0 4px;
}

.tg-price-info-right {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: var(--tg-text);
}

.tg-price-info-right .woocommerce-Price-amount,
.tg-price-info-right bdi {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: var(--tg-text);
}

.tg-price-info-month {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: var(--tg-text-secondary);
    margin-left: 1px;
}

/* ── Progress Section ── */
.tg-meals-progress-section {
    padding: 20px 0 12px;
}

.tg-meals-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.tg-meals-count {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--tg-text);
    margin: 0;
}

.tg-meals-count span {
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
}

.tg-meals-box-label {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--tg-accent);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tg-meals-progress-track {
    height: 4px;
    background: var(--tg-border);
    border-radius: 100px;
    overflow: hidden;
}

.tg-meals-progress-fill {
    height: 100%;
    background: var(--tg-accent);
    border-radius: 100px;
    width: 0%;
    transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tg-meals-progress-fill.complete {
    animation: tgProgressGlow 1.5s ease infinite;
}

@keyframes tgProgressGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(35, 167, 74, 0); }
    50%       { box-shadow: 0 0 8px 2px rgba(35, 167, 74, 0.4); }
}

/* ── Protein Cap Indicators ── */
.tg-protein-indicators {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--tg-border);
}

.tg-protein-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--tg-text-secondary);
    background: var(--tg-surface);
    border: 1px solid var(--tg-border);
    border-radius: 100px;
    padding: 3px 10px 3px 7px;
    transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}

.tg-protein-indicator.at-cap {
    background: #FFF3F0;
    border-color: #F5C5BC;
    color: #C13B2E;
}

.tg-protein-ind-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.tg-protein-ind-num {
    font-weight: 700;
    color: var(--tg-text);
}

.tg-protein-ind-num.full {
    color: #C13B2E;
}

/* ── Meal Grid ── */
.tg-meals-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 20px;
}

@media (min-width: 560px) {
    .tg-meals-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .tg-meals-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (min-width: 1024px) {
    .tg-meals-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ── Meal Card ── */
.tg-meal-card {
    border: 1px solid var(--tg-border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--tg-surface);
    position: relative;
    transition: box-shadow 250ms ease, border-color 250ms ease, transform 250ms ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.tg-meal-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transform: translateY(-2px);
    border-color: #D4CFC7;
}

.tg-meal-card.selected {
    border-color: var(--tg-accent);
    border-width: 2px;
    box-shadow: 0 0 0 3px var(--tg-accent-glow), 0 4px 16px rgba(0,0,0,0.06);
}

.tg-meal-card.selected:hover {
    box-shadow: 0 0 0 3px var(--tg-accent-glow), 0 8px 24px rgba(0,0,0,0.10);
}

.tg-meal-card-photo-link {
    display: block;
    line-height: 0;
    cursor: pointer;
    position: relative;
}
.tg-meal-card-photo-link:hover .tg-meal-card-photo {
    opacity: 0.88;
    transition: opacity 0.15s ease;
}

.tg-meal-card-photo {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    background: #F5F2ED;
    display: block;
    border-radius: 16px 16px 0 0;
    transition: opacity 0.15s ease;
}

.tg-meal-card-photo-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    background: #F5F2ED;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px 16px 0 0;
    position: relative;
}

.tg-meal-card-photo-placeholder i {
    font-size: 40px;
    color: var(--tg-text);
    opacity: 0.15;
}

.tg-stage-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(255,255,255,0.92);
    border-radius: 100px;
    padding: 3px 8px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #0A0A0A;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tg-meal-card-body {
    padding: 14px 16px 16px;
}

.tg-meal-card-name-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.tg-meal-card-name-link:hover .tg-meal-card-name {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tg-meal-card-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--tg-text);
    margin: 0 0 8px;
    line-height: 1.35;
}

.tg-meal-card-allergens {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}

.tg-meal-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 8px;
}

.tg-meal-card-footer-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ── Qty Stepper ── */
.tg-qty-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tg-qty-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--tg-border);
    background: var(--tg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    color: var(--tg-text);
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
    padding: 0;
    line-height: 1;
}

.tg-qty-btn.tg-qty-plus:hover {
    background: var(--tg-accent);
    border-color: var(--tg-accent);
    color: #FFFFFF;
}

.tg-qty-btn.tg-qty-minus:hover {
    background: var(--tg-allergen-bg);
    border-color: var(--tg-allergen-text);
    color: var(--tg-allergen-text);
}

.tg-qty-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.tg-qty-value {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--tg-text);
    min-width: 18px;
    text-align: center;
}

/* ── Meal Constraint Text ── */
.tg-meal-constraint {
    display: none;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #C13B2E;
    margin-top: 6px;
    padding: 4px 8px;
    background: #FFF3F0;
    border-radius: 6px;
    line-height: 1.3;
}

/* ── Max Repeat Badge ── */
.tg-max-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(10, 10, 10, 0.75);
    color: #FFFFFF;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 2;
}

/* ── Meal Card Pulse Animation ── */
@keyframes tgPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

.tg-meal-card.pulse {
    animation: tgPulse 200ms ease;
}

/* ── Empty State ── */
.tg-meals-empty {
    text-align: center;
    padding: 64px 24px;
    color: var(--tg-text);
}

.tg-meals-empty i {
    font-size: 64px;
    color: #D4CFC7;
    opacity: 0.6;
    display: block;
    margin-bottom: 16px;
}

.tg-meals-empty p {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--tg-text-secondary);
    margin: 0 0 20px;
}

.tg-reset-filters {
    background: var(--tg-dark);
    border: none;
    border-radius: 12px;
    padding: 10px 24px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: #FFFFFF;
    transition: opacity 200ms ease;
}

.tg-reset-filters:hover {
    opacity: 0.85;
}

/* ── Sticky Bottom Bar ── */
.tg-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--tg-dark);
    border-top: none;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
    border-radius: 20px 20px 0 0;
    z-index: 30;
    transform: translateY(100%);
    transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tg-sticky-bar.visible {
    transform: translateY(0);
}

.tg-sticky-progress {
    height: 3px;
    background: #2E2E2E;
    width: 100%;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}

.tg-sticky-fill {
    height: 100%;
    background: var(--tg-accent);
    transition: width 300ms ease;
    width: 0%;
}

.tg-sticky-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 24px;
    flex-wrap: wrap;
}

.tg-sticky-constraint {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #FEF3C7;
    background: rgba(180, 83, 9, 0.6);
    border-radius: 6px;
    padding: 4px 10px;
    text-align: center;
    width: 100%;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.tg-sticky-info {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tg-sticky-divider {
    opacity: 0.3;
}

.tg-sticky-cta {
    background: var(--tg-accent);
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    padding: 14px 28px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background 200ms ease, opacity 200ms ease;
    letter-spacing: 0.01em;
}

.tg-sticky-cta:hover:not(:disabled) {
    background: var(--tg-accent-hover);
}

.tg-sticky-cta:disabled {
    background: #444444;
    opacity: 0.7;
    cursor: default;
}

/* ==========================================================================
   Quiz Loading State (Screen 4 inline spinner)
   ========================================================================== */

.tg-quiz-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 8px;
}

.tg-quiz-loading img {
    width: 200px;
    height: 160px;
}

.tg-quiz-loading p {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #0A0A0A;
    opacity: 0.6;
    margin: 0;
}

.tg-spin {
    animation: tgSpin 800ms linear infinite;
}

/* ==========================================================================
   Warning Banner (Meals page — pre-selection shortfall)
   ========================================================================== */

.tg-warning-banner {
    background: #FFF8EE;
    border: 1px solid #F0D9A8;
    border-left: 3px solid #E5A430;
    border-radius: 12px;
    padding: 12px 16px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #5A4A2B;
    margin-bottom: 16px;
}

.tg-loading-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    color: #0A0A0A;
    margin: 0 0 8px;
    text-align: center;
    line-height: 1.2;
}

.tg-loading-subline {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #0A0A0A;
    opacity: 0.5;
    margin: 0;
    text-align: center;
}

/* ══════════════════════════════════════
   GLOBAL HOMEPAGE UTILITIES
══════════════════════════════════════ */

.tg-section-label {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.tg-section-label span {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #23A74A;
    padding: 6px 14px;
    border: 1px solid #23A74A;
    border-radius: 100px;
}

.tg-section-eyebrow {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #23A74A;
    display: block;
    margin-bottom: 16px;
}

.tg-section-eyebrow--dark {
    color: #FFFFFF;
}

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */

.tg-hero {
    background: #F8F8F6;
    min-height: auto;
    max-height: none;
    overflow: hidden;
    position: relative;
}

.tg-hero-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
}

@media (min-width: 768px) {
    .tg-hero-inner {
        grid-template-columns: 45fr 55fr;
    }
}

/* ══════════════════════════════════════
   HOMEPAGE NAV - Constrain nav to image column on desktop
══════════════════════════════════════ */

@media (min-width: 768px) {
    /* Homepage nav uses same grid as hero to align nav with image column */
    body.page-template-page-home .tg-nav--transparent .tg-nav-inner {
        max-width: 1400px;
        display: grid;
        grid-template-columns: 45fr 55fr;
        gap: 0;
        padding: 0;
    }

    /* Logo stays in left column, naturally left-aligned */
    body.page-template-page-home .tg-nav--transparent .tg-nav-logo {
        padding-left: 48px;
    }

    /* Desktop nav goes in right column */
    body.page-template-page-home .tg-nav--transparent .tg-nav-desktop {
        padding-right: 48px;
        justify-content: flex-end;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    body.page-template-page-home .tg-nav--transparent .tg-nav-logo {
        padding-left: 24px;
    }

    body.page-template-page-home .tg-nav--transparent .tg-nav-desktop {
        padding-right: 24px;
        gap: 20px;
    }

    body.page-template-page-home .tg-nav--transparent .tg-nav-links {
        gap: 20px;
    }
}

/* When nav is scrolled on homepage, revert to full-width centered layout */
@media (min-width: 768px) {
    body.page-template-page-home .tg-nav--scrolled .tg-nav-inner {
        display: flex;
        max-width: 1200px;
        padding: 0 24px;
    }

    body.page-template-page-home .tg-nav--scrolled .tg-nav-logo {
        padding-left: 0;
    }

    body.page-template-page-home .tg-nav--scrolled .tg-nav-desktop {
        padding-right: 0;
    }
}

.tg-hero-content {
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 768px) {
    .tg-hero-content {
        padding: 64px 48px 64px 64px;
    }
}

.tg-hero-eyebrow-text {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #23A74A;
    margin: 0 0 20px;
}

.tg-hero-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.1;
    color: #0A0A0A;
    margin: 0 0 24px;
    letter-spacing: -0.02em;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tg-hero-headline.tg-hero-visible {
    opacity: 1;
    transform: translateY(0);
}

.tg-hero-headline-with {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-style: italic;
    color: #23A74A;
}

.tg-hero-headline--desktop {
    display: block;
}

.tg-hero-headline--mobile {
    display: none;
}

.tg-hero-subline {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0;
    transform: translateY(20px);
    line-height: 1.65;
    margin: 0 0 32px;
    max-width: 440px;
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tg-hero-subline.tg-hero-visible {
    opacity: 0.65;
    transform: translateY(0);
}

.tg-hero-cta-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tg-hero-cta-row.tg-hero-visible {
    opacity: 1;
    transform: translateY(0);
}

.tg-btn-hero {
    display: inline-flex;
    align-items: center;
    padding: 16px 36px;
    background: #23A74A;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
    border-radius: 100px;
    text-decoration: none;
    transition: opacity 200ms ease, transform 200ms ease;
    white-space: nowrap;
}

.tg-btn-hero:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    color: #FFFFFF;
    text-decoration: none;
}

.tg-hero-signin {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 200ms ease;
    white-space: nowrap;
}

.tg-hero-signin:hover {
    opacity: 0.8;
    color: #FFFFFF;
}

.tg-hero-trust {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.45;
}

.tg-hero-trust--bold {
    font-weight: 800;
    font-size: 18px;
    opacity: 0.85;
    letter-spacing: 0.01em;
}

.tg-hero-subline--heading {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.65;
    color: #0A0A0A;
    opacity: 0.8;
    max-width: 480px;
    margin: 0 0 28px;
}

.tg-hero-subline--heading.tg-hero-visible {
    opacity: 0.8;
}

@media (max-width: 767px) {
    .tg-hero-subline--heading {
        font-size: 16px;
    }
}

/* Medical Icons Grid */
.tg-hero-medical-icons {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 8px;
    margin-bottom: 24px;
    max-width: 440px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tg-hero-medical-icons.tg-hero-visible {
    opacity: 1;
    transform: translateY(0);
}

.tg-medical-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.tg-medical-icon-item i {
    font-size: 28px;
    color: #23A74A;
}

.tg-medical-icon-item span {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 9px;
    font-weight: 600;
    color: #0A0A0A;
    opacity: 0.6;
    line-height: 1.2;
}

/* TrulyMetabolic Placeholder */
.tg-hero-trulymetabolic {
    margin-bottom: 20px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tg-hero-trulymetabolic.tg-hero-visible {
    opacity: 1;
    transform: translateY(0);
}

.tg-trulymetabolic-placeholder {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    border: 1px dashed #23A74A;
    border-radius: 12px;
    padding: 12px 20px;
}

.tg-trulymetabolic-logo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #23A74A;
}

.tg-trulymetabolic-tagline {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #0A0A0A;
    opacity: 0.6;
}

/* Collaboration Line */
.tg-hero-collaboration {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #0A0A0A;
    opacity: 0.5;
    font-style: italic;
    margin: 0;
}

.tg-hero-stats {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-top: 24px;
    border-top: 0.5px solid #E8E8E6;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tg-hero-stats.tg-hero-visible {
    opacity: 1;
    transform: translateY(0);
}

.tg-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tg-hero-stat-num {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 26px;
    color: #0A0A0A;
    letter-spacing: -0.02em;
}

.tg-hero-stat-label {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.5;
}

.tg-hero-stat-divider {
    width: 0.5px;
    height: 40px;
    background: #E8E8E6;
}

.tg-hero-image-container {
    position: relative;
    min-height: 300px;
    max-height: 600px;
    order: -1;
}

@media (min-width: 768px) {
    .tg-hero-image-container {
        order: 0;
        min-height: auto;
        max-height: 700px;
    }
}

/* Dark overlay for nav contrast */
.tg-hero-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.tg-hero-image {
    width: 100%;
    height: 100%;
    max-height: 600px;
    min-height: 300px;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

@media (min-width: 768px) {
    .tg-hero-image {
        min-height: auto;
        max-height: 700px;
        border-radius: 16px 0 0 16px;
    }
}

/* ══════════════════════════════════════
   MOBILE HERO - Stacked layout
══════════════════════════════════════ */

@media (max-width: 767px) {
    .tg-hero {
        min-height: auto;
        background: #F8F8F6;
    }

    .tg-hero-inner {
        display: flex;
        flex-direction: column;
    }

    /* Image container - taller on mobile to accommodate headline overlay */
    .tg-hero-image-container {
        min-height: 380px;
        max-height: 420px;
        order: -1;
        position: relative;
        width: 100%;
    }

    /* Hide the top-only overlay on mobile */
    .tg-hero-image-overlay {
        display: none;
    }

    /* Bottom gradient for headline readability */
    .tg-hero-image-container::after {
        display: block;
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 220px;
        background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 50%, transparent 100%);
        pointer-events: none;
        z-index: 1;
    }

    .tg-hero-image {
        width: 100%;
        height: 100%;
        min-height: 380px;
        max-height: 420px;
        object-fit: cover;
        position: relative;
        border-radius: 0;
    }

    /* Content below image with light background */
    .tg-hero-content {
        position: relative;
        padding: 32px 24px 40px;
        text-align: left;
        background: #F8F8F6;
    }

    .tg-hero-eyebrow-text {
        color: #23A74A;
        text-shadow: none;
        margin-bottom: 12px;
        font-size: 11px;
    }

    .tg-hero-headline--desktop {
        display: none;
    }

    .tg-hero-headline--mobile {
        display: block;
        position: absolute;
        bottom: 24px;
        left: 24px;
        right: 24px;
        color: #FFFFFF;
        font-size: 32px;
        line-height: 1.1;
        margin: 0;
        text-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
        z-index: 2;
    }

    .tg-hero-headline--mobile .tg-hero-headline-with {
        color: #FFFFFF;
        text-shadow: 0 2px 12px rgba(0,0,0,0.5);
    }

    .tg-hero-subline {
        color: #0A0A0A;
        opacity: 0.7;
        font-size: 16px;
        max-width: 100%;
        margin-bottom: 24px;
        text-shadow: none;
        line-height: 1.5;
    }

    .tg-hero-cta-row {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 24px;
        align-items: stretch;
    }

    .tg-btn-hero {
        width: 100%;
        justify-content: center;
        padding: 16px 24px;
    }

    .tg-hero-signin {
        color: #0A0A0A;
        text-align: center;
    }

    .tg-hero-trust {
        color: #0A0A0A;
        opacity: 0.6;
        font-size: 13px;
        text-align: center;
    }

    /* Stats row */
    .tg-hero-stats {
        justify-content: flex-start;
        gap: 20px;
        padding-top: 20px;
        border-top: 1px solid #E8E8E6;
    }

    .tg-hero-stat {
        align-items: flex-start;
    }

    .tg-hero-stat-num {
        color: #0A0A0A;
        font-size: 24px;
    }

    .tg-hero-stat-label {
        color: #0A0A0A;
        opacity: 0.6;
        font-size: 12px;
    }

    .tg-hero-stat-divider {
        background: #E8E8E6;
        height: 36px;
    }

    .tg-hero-medical-icons {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        max-width: 100%;
    }

    .tg-medical-icon-item i {
        font-size: 24px;
    }

    .tg-medical-icon-item span {
        font-size: 11px;
    }

    .tg-hero-subline--heading {
        font-size: 15px;
        max-width: 100%;
    }

    .tg-hero-trulymetabolic {
        margin-bottom: 16px;
    }

    .tg-trulymetabolic-placeholder {
        flex-direction: column;
        gap: 6px;
        padding: 10px 16px;
        text-align: center;
    }

    .tg-hero-collaboration {
        font-size: 11px;
        text-align: center;
    }
}

/* ══════════════════════════════════════
   SHARED BUTTONS
══════════════════════════════════════ */

.tg-btn-primary {
    display: inline-block;
    padding: 14px 28px;
    background: #23A74A;
    color: #F8F8F6;
    border: none;
    border-radius: 100px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    width: fit-content;
    transition: opacity 200ms ease;
}

.tg-btn-primary:hover {
    opacity: 0.88;
    color: #F8F8F6;
    text-decoration: none;
}

.tg-btn-large {
    padding: 18px 36px;
    font-size: 17px;
}

/* ══════════════════════════════════════
   MARQUEE
══════════════════════════════════════ */

.tg-marquee {
    background: #23A74A;
    overflow: hidden;
    padding: 14px 0;
    white-space: nowrap;
}

.tg-marquee-track {
    display: inline-flex;
    gap: 24px;
    animation: tgMarquee 80s linear infinite;
}

.tg-marquee-track span {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tg-marquee-dot {
    opacity: 0.5;
}

@keyframes tgMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ══════════════════════════════════════
   FON LOGO & CAROUSEL (What & Why)
══════════════════════════════════════ */

.tg-fon-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 24px;
}

.tg-fon-logo-wordmark {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    color: #1D3A1B;
}

.tg-fon-logo-line1,
.tg-fon-logo-line2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 42px;
    color: #1D3A1B;
    letter-spacing: -0.01em;
}

.tg-fon-logo-line1 em {
    font-style: italic;
    font-weight: 700;
}

.tg-fon-logo-line2 sup {
    font-size: 0.45em;
    vertical-align: super;
    font-weight: 400;
}

.tg-fon-logo-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 32px;
    color: #0A0A0A;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.tg-fon-logo-tagline {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 16px;
    color: #23A74A;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tg-fon-carousel-wrapper {
    margin-top: 40px;
}

.tg-fon-carousel {
    position: relative;
    overflow: hidden;
}

.tg-fon-carousel-track {
    display: flex;
    transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.tg-fon-carousel-slide {
    flex: 0 0 33.333%;
    padding: 0 10px;
    box-sizing: border-box;
}

.tg-fon-carousel-card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 32px 28px;
    text-align: center;
    border: 0.5px solid #E8E8E6;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.tg-fon-carousel-text {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #0A0A0A;
    line-height: 1.7;
    margin: 0;
    opacity: 0.8;
}

.tg-fon-carousel-cta {
    color: #23A74A;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 200ms ease;
}

.tg-fon-carousel-cta:hover {
    color: #1a8038;
}

.tg-fon-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0.5px solid #E8E8E6;
    background: #FFFFFF;
    color: #0A0A0A;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: background 200ms ease, transform 200ms ease;
    z-index: 2;
}

.tg-fon-carousel-btn:hover {
    background: #F8F8F6;
    transform: translateY(-50%) scale(1.05);
}

.tg-fon-carousel-btn--prev { left: 8px; }
.tg-fon-carousel-btn--next { right: 8px; }

.tg-fon-carousel-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    transform: translateY(-50%);
}

.tg-fon-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.tg-fon-carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: #E8E8E6;
    cursor: pointer;
    transition: background 200ms ease, transform 200ms ease;
    padding: 0;
}

.tg-fon-carousel-dot.active {
    background: #23A74A;
    transform: scale(1.2);
}

/* ══════════════════════════════════════
   3 TIERS — 1 JOURNEY
══════════════════════════════════════ */

.tg-tiers-journey {
    padding: 80px 24px;
    background: #FFFFFF;
}

.tg-tiers-journey-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.tg-tiers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
    text-align: left;
}

.tg-tier-card {
    background: #F8F8F6;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 300ms ease, box-shadow 300ms ease;
}

.tg-tier-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}



.tg-tier-card-image {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #E8E8E6;
    overflow: hidden;
}

.tg-tier-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
    display: block;
}

.tg-tier-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 11px;
    padding: 6px 14px;
    border-radius: 100px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tg-tier-card-content {
    padding: 24px;
}

.tg-tier-card-name {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 8px;
    color: #0A0A0A;
    text-align: center;
}

.tg-tier-card--gentle .tg-tier-card-name { color: var(--stage-gentle, #2AADA8); }
.tg-tier-card--core .tg-tier-card-name { color: var(--stage-core, #D93B2B); }
.tg-tier-card--freedom .tg-tier-card-name { color: var(--stage-freedom, #5AB030); }

.tg-tier-card-intro {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.8;
    line-height: 1.6;
    margin: 0 0 16px;
}

.tg-tier-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tg-tier-card-list li {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #0A0A0A;
    padding-left: 24px;
    position: relative;
    line-height: 1.5;
}

.tg-tier-card-list li i {
    display: none;
}

.tg-tier-card-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-weight: 800;
    font-size: 14px;
}

.tg-tier-card--gentle .tg-tier-card-list li::before { color: var(--stage-gentle, #2AADA8); }
.tg-tier-card--core .tg-tier-card-list li::before { color: var(--stage-core, #D93B2B); }
.tg-tier-card--freedom .tg-tier-card-list li::before { color: var(--stage-freedom, #5AB030); }

@media (min-width: 769px) and (max-width: 1024px) {
    .tg-fon-carousel-slide {
        flex: 0 0 50%;
    }
}

@media (max-width: 768px) {
    .tg-fon-logo-text {
        font-size: 24px;
    }

    .tg-fon-carousel-slide {
        flex: 0 0 100%;
        padding: 0 4px;
    }

    .tg-fon-carousel-card {
        padding: 24px 20px;
    }

    .tg-fon-carousel-text {
        font-size: 14px;
    }

    .tg-fon-carousel-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .tg-fon-carousel-btn--prev { left: 4px; }
    .tg-fon-carousel-btn--next { right: 4px; }

    .tg-tiers-journey {
        padding: 48px 16px;
    }

    .tg-tiers-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 32px;
    }

    .tg-tier-card-name {
        font-size: 20px;
    }
}

/* --------------------------------------
   MEAL MENU PREVIEW
-------------------------------------- */

.tg-meal-preview {
    padding: 80px 24px 100px;
    background: #F3F4EF;
}

.tg-meal-preview-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header: split layout � text left, logo right */
.tg-meal-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 48px;
}

.tg-meal-preview-header-left {
    flex: 1;
}

.tg-meal-preview-header-left .tg-section-heading {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    margin: 8px 0 16px;
    text-align: left;
}

.tg-meal-preview-header-left .tg-section-subline {
    text-align: left;
    max-width: 380px;
    margin: 0 0 28px;
}

.tg-meal-preview-header-right {
    flex-shrink: 0;
}

.tg-meal-preview-brand-logo {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

/* Cards grid */
.tg-meal-preview-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 36px;
}

@media (min-width: 768px) {
    .tg-meal-preview-cards {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
}

/* Individual meal card (rendered by JS) */
.tg-meal-card {
    background: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tg-meal-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

.tg-meal-card-img-wrap {
    position: relative;
    overflow: hidden;
}

.tg-meal-card-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #EFEFED;
    display: block;
    transition: transform 0.4s ease;
}

.tg-meal-card:hover .tg-meal-card-img {
    transform: scale(1.04);
}

.tg-meal-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #2D6A4F;
    color: #fff;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
}

.tg-meal-card-body {
    padding: 14px 16px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tg-meal-card-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #0A0A0A;
    margin: 0;
    line-height: 1.35;
}

.tg-meal-card-desc {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 11px;
    color: #555;
    margin: 0;
    line-height: 1.5;
    flex: 1;
}

.tg-meal-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.tg-meal-card-price {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #2D6A4F;
}

.tg-meal-card-allergens {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #888;
    background: #E8EBE4;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

/* Skeleton loaders */
.tg-meal-card-skeleton {
    background: #E5E6E1;
    border-radius: 16px;
    aspect-ratio: 4 / 5;
    animation: tgSkeleton 1.4s ease-in-out infinite;
}

@keyframes tgSkeleton {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

/* CTA */
.tg-meal-preview-cta {
    text-align: center;
}

.tg-meal-preview-cta-desktop {
    display: inline-flex;
}

.tg-meal-preview-cta-mobile {
    display: none;
    text-align: center;
}

@media (max-width: 767px) {
    .tg-meal-preview-header {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 32px;
    }

    .tg-meal-preview-brand-logo {
        width: 80px;
        height: 80px;
    }

    .tg-meal-preview-header-left .tg-section-heading {
        font-size: 1.75rem;
    }

    .tg-meal-preview-cta-desktop {
        display: none;
    }

    .tg-meal-preview-cta-mobile {
        display: block;
    }
}

/* ══════════════════════════════════════
   MEDICAL PARTNERS
══════════════════════════════════════ */

.tg-medical {
    padding: 100px 0;
    background: #FFFFFF;
}

.tg-medical-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Editorial two-col layout */
.tg-medical-editorial {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: start;
}

@media (min-width: 768px) {
    .tg-medical-editorial {
        grid-template-columns: 1fr 1fr;
        gap: 80px;
    }
}

/* Left claim */
.tg-medical-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.1;
    color: #0A0A0A;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
}

.tg-medical-highlight {
    color: #23A74A;
}

.tg-medical-body {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.65;
    line-height: 1.75;
    margin: 0;
}

/* Right credentials */
.tg-medical-credentials {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tg-credential-card {
    background: #F8F8F6;
    border-radius: 16px;
    border: 0.5px solid #E8E8E6;
    padding: 28px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.tg-credential-icon {
    font-size: 36px;
    color: #23A74A;
    flex-shrink: 0;
    line-height: 1;
}

.tg-credential-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #0A0A0A;
    margin: 0 0 8px;
    line-height: 1.3;
}

.tg-credential-desc {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.6;
    line-height: 1.65;
    margin: 0;
}

/* ══════════════════════════════════════
   FINAL CTA
══════════════════════════════════════ */

.tg-final-cta {
    background: #0A0A0A;
    padding: 100px 0;
}

.tg-final-cta-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: center;
}

@media (min-width: 768px) {
    .tg-final-cta-inner {
        grid-template-columns: 1fr auto;
        gap: 80px;
    }
}

/* Section label variant for dark background */
.tg-section-label--dark span {
    color: #ADCB3E;
    border-color: #ADCB3E;
}

.tg-final-cta-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.05;
    color: #FFFFFF;
    letter-spacing: -0.02em;
    margin: 0 0 40px;
}

.tg-final-cta-benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tg-final-cta-benefits li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #FFFFFF;
    opacity: 0.75;
    line-height: 1.4;
}

.tg-final-cta-benefits li i {
    font-size: 20px;
    color: #23A74A;
    flex-shrink: 0;
}

/* CTA action column */
.tg-final-cta-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

@media (min-width: 768px) {
    .tg-final-cta-action {
        align-items: center;
        min-width: 280px;
    }
}

.tg-btn-cta-dark {
    display: inline-flex;
    align-items: center;
    padding: 18px 36px;
    background: #23A74A;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    border-radius: 100px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 200ms ease, transform 200ms ease;
}

.tg-btn-cta-dark:hover {
    opacity: 0.88;
    transform: translateY(-2px);
    color: #FFFFFF;
    text-decoration: none;
}

.tg-final-cta-trust {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #FFFFFF;
    opacity: 0.35;
    margin: 0;
    text-align: center;
}

.tg-final-cta-signin {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 200ms ease;
    text-align: center;
}

.tg-final-cta-signin:hover {
    opacity: 0.8;
    color: #FFFFFF;
}

/* ══════════════════════════════════════
   SHARED SECTION STYLES
══════════════════════════════════════ */

.tg-section-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 32px;
    color: #0A0A0A;
    margin: 0 0 12px;
    line-height: 1.15;
}

.tg-section-subline {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.6;
    margin: 0 0 40px;
    line-height: 1.6;
}

.tg-centered {
    text-align: center;
}

@media (min-width: 768px) {
    .tg-section-heading {
        font-size: 40px;
    }
}

/* ══════════════════════════════════════
   WHY AND WHAT
══════════════════════════════════════ */

.tg-why-what {
    padding: 64px 0 100px;
    background: #FFFFFF;
}

@media (max-width: 767px) {
    .tg-why-what {
        padding: 48px 0 80px;
    }
}

.tg-why-what-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Problem statement */
.tg-why-statement {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 80px;
    padding-bottom: 80px;
    border-bottom: 0.5px solid #E8E8E6;
}

@media (min-width: 768px) {
    .tg-why-statement {
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: center;
    }
}

.tg-why-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.1;
    color: #0A0A0A;
    letter-spacing: -0.02em;
    margin: 0;
}

.tg-why-highlight {
    color: #23A74A;
}

.tg-why-body {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.65;
    line-height: 1.7;
    margin: 0;
    padding-top: 8px;
}

/* Three pillars */
.tg-why-pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 80px;
}

@media (min-width: 768px) {
    .tg-why-pillars {
        grid-template-columns: repeat(3, 1fr);
    }
}

.tg-why-pillar {
    padding: 32px;
    background: #F8F8F6;
    border-radius: 16px;
    border: 0.5px solid #E8E8E6;
    position: relative;
    overflow: hidden;
}

.tg-why-pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #23A74A, #ADCB3E);
}

.tg-why-pillar-icon {
    font-size: 32px;
    color: #23A74A;
    margin-bottom: 16px;
}

.tg-why-pillar-num {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: #0A0A0A;
    opacity: 0.25;
    margin-bottom: 10px;
}

.tg-why-pillar-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #0A0A0A;
    margin: 0 0 10px;
    line-height: 1.3;
}

.tg-why-pillar-body {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.6;
    line-height: 1.65;
    margin: 0;
}

/* Stage cards */
.tg-why-stages {
    padding-top: 80px;
    border-top: 0.5px solid #E8E8E6;
}

.tg-stage-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .tg-stage-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.tg-stage-card {
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: transform 200ms ease;
    box-shadow: inset 0 -60px 80px rgba(0,0,0,0.15);
}

.tg-stage-card:hover {
    transform: translateY(-4px);
}

.tg-stage-card--gentle {
    background: var(--stage-gentle);
}

.tg-stage-card--core {
    background: var(--stage-core);
}

.tg-stage-card--freedom {
    background: var(--stage-freedom);
}

.tg-stage-card-icon {
    font-size: 36px;
    color: rgba(255,255,255,0.9);
}

.tg-stage-card-icon svg {
    width: 40px;
    height: 40px;
}

.tg-stage-card-tag {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
    color: rgba(255,255,255,0.5);
}

.tg-stage-card-name {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 8px;
    color: #FFFFFF;
}

.tg-stage-card-desc {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    margin: 0;
    color: rgba(255,255,255,0.75);
}

/* ── Range Intro (Two-column) ── */
.tg-range-intro {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    margin-bottom: 80px;
    padding-bottom: 80px;
    border-bottom: 0.5px solid #E8E8E6;
}

@media (min-width: 768px) {
    .tg-range-intro {
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: start;
    }
}

.tg-range-intro-content {
    max-width: 540px;
}

.tg-range-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    color: #0A0A0A;
    margin: 0 0 24px;
}

.tg-range-headline em {
    font-style: italic;
    font-weight: 400;
    color: var(--stage-freedom);
}

.tg-range-body {
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.65;
    line-height: 1.7;
    margin: 0;
}

.tg-range-intro-image {
    display: flex;
    justify-content: center;
}

.tg-range-photo {
    width: 100%;
    max-width: 480px;
    height: auto;
    border-radius: 20px;
    object-fit: cover;
}

/* ── Range Stages ── */
.tg-range-stages {
    margin-bottom: 80px;
}

.tg-range-note {
    text-align: center;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #0A0A0A;
    opacity: 0.6;
    margin-top: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Box Size Band ── */
.tg-range-boxes {
    background: #F8F8F6;
    border-radius: 20px;
    padding: 48px 32px;
    text-align: center;
    margin-bottom: 80px;
}

.tg-range-boxes-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 28px;
    color: #0A0A0A;
    margin: 0 0 32px;
}

.tg-range-boxes-options {
    display: flex;
    justify-content: center;
    gap: 64px;
    flex-wrap: wrap;
}

.tg-range-box-option {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tg-range-box-num {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 64px;
    color: var(--stage-freedom);
    line-height: 1;
}

.tg-range-box-option--coming .tg-range-box-num {
    color: #0A0A0A;
    opacity: 0.3;
}

.tg-range-box-label {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #0A0A0A;
    opacity: 0.6;
    margin-top: 8px;
}

/* ── Product Photo Strip ── */
.tg-range-photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 767px) {
    .tg-range-photos {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.tg-range-photo-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.tg-range-photo-item img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}

@media (max-width: 767px) {
    .tg-range-photo-item img {
        height: 220px;
    }
}

.tg-range-photo-label {
    position: absolute;
    bottom: 16px;
    left: 16px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: #FFFFFF;
    padding: 6px 14px;
    border-radius: 100px;
}

/* ══════════════════════════════════════
   HOW IT WORKS
══════════════════════════════════════ */

.tg-how-it-works {
    background: #F8F8F6;
    padding: 100px 0;
}

.tg-how-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.tg-how-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(32px, 4vw, 52px);
    color: #0A0A0A;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 60px;
}

.tg-how-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    position: relative;
}

@media (min-width: 768px) {
    .tg-how-steps {
        grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
        align-items: stretch;
        gap: 0;
    }
}

.tg-how-step {
    background: #444444;
    border: 0.5px solid #555555;
    border-radius: 16px;
    padding: 28px;
    position: relative;
}

.tg-how-step-num {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(36px, 4vw, 56px);
    letter-spacing: -0.02em;
    color: #23A74A;
    margin-bottom: 20px;
    line-height: 1;
}

.tg-how-step-icon {
    display: none;
}

.tg-how-step-title {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #FFFFFF;
    margin: 0 0 8px;
    line-height: 1.5;
}

.tg-how-step-body {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #FFFFFF;
    opacity: 0.65;
    line-height: 1.65;
    margin: 0;
}

.tg-how-connector {
    display: none;
}

@media (min-width: 768px) {
    .tg-how-connector {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
        margin-top: 40px;
    }

    .tg-how-connector::after {
        content: '';
        display: block;
        width: 32px;
        height: 1.5px;
        background: linear-gradient(90deg, #23A74A, #ADCB3E);
    }
}

@media (max-width: 767px) {
    .tg-how-step {
        margin-bottom: 12px;
    }
}

/* ══════════════════════════════════════
   PROGRAMMES
══════════════════════════════════════ */

.tg-programmes {
    padding: 80px 24px;
    background: #FFFFFF;
}

.tg-programmes-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.tg-programme-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.tg-programme-card {
    padding: 32px 24px;
    border: 0.5px solid #0A0A0A;
    border-radius: 16px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: background 300ms ease, border-color 300ms ease;
}

.tg-programme-card:hover {
    background: #23A74A;
    border-color: #23A74A;
}

.tg-programme-card:hover .tg-programme-name,
.tg-programme-card:hover .tg-programme-desc {
    color: #F8F8F6;
}

.tg-programme-card:hover .tg-programme-icon i {
    color: #F8F8F6;
}

.tg-programme-card:hover .tg-programme-cta {
    background: #F8F8F6;
    color: #23A74A;
}

.tg-programme-soon {
    border-style: dashed;
    opacity: 0.6;
}

.tg-programme-soon:hover {
    background: #FFFFFF;
    border-color: #0A0A0A;
}

.tg-programme-soon:hover .tg-programme-name,
.tg-programme-soon:hover .tg-programme-desc {
    color: #0A0A0A;
}

.tg-programme-icon {
    margin-bottom: 16px;
}

.tg-programme-icon i {
    font-size: 40px;
    color: #23A74A;
}

.tg-programme-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: #0A0A0A;
    margin: 0 0 12px;
    transition: color 300ms ease;
}

.tg-programme-desc {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.7;
    margin: 0 0 24px;
    line-height: 1.6;
    flex: 1;
    transition: color 300ms ease;
}

.tg-programme-cta {
    display: inline-block;
    padding: 10px 20px;
    background: #23A74A;
    color: #F8F8F6;
    border-radius: 100px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
    text-decoration: none;
    transition: background 300ms ease, color 300ms ease;
}

.tg-cta-waitlist {
    background: #F8F8F6;
    color: #0A0A0A;
    border: 0.5px solid #0A0A0A;
}

@media (min-width: 768px) {
    .tg-programme-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .tg-programme-cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ══════════════════════════════════════
   REVIEWS
══════════════════════════════════════ */

.tg-reviews {
    padding: 100px 0;
    background: #F8F8F6;
}

.tg-reviews-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Top row: headline left, aggregate right */
.tg-reviews-top {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 60px;
}

@media (min-width: 768px) {
    .tg-reviews-top {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

.tg-reviews-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.1;
    color: #0A0A0A;
    letter-spacing: -0.02em;
    margin: 0;
}

.tg-reviews-aggregate {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.tg-reviews-score {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 56px;
    color: #0A0A0A;
    letter-spacing: -0.04em;
    line-height: 1;
}

.tg-reviews-aggregate-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tg-reviews-stars {
    color: #23A74A;
    font-size: 18px;
    letter-spacing: 3px;
    line-height: 1;
}

.tg-reviews-count {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.5;
}

/* Modern Reviews Showcase - Single Slide */
.tg-reviews-showcase {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 60px;
}

@media (min-width: 768px) {
    .tg-reviews-showcase {
        padding: 0 80px;
    }
}

.tg-showcase-viewport {
    overflow: hidden;
}

.tg-showcase-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.tg-showcase-slide {
    flex: 0 0 100%;
    min-width: 100%;
    padding: 8px;
}

/* Modern Card Design */
.tg-showcase-card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 48px 40px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    position: relative;
}

@media (min-width: 768px) {
    .tg-showcase-card {
        padding: 64px 56px;
    }
}

.tg-showcase-quote-mark {
    font-family: 'Georgia', serif;
    font-size: 120px;
    color: #23A74A;
    opacity: 0.1;
    line-height: 1;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    user-select: none;
}

.tg-showcase-quote {
    font-family: 'Nunito Sans', sans-serif;
    font-size: clamp(18px, 3vw, 24px);
    font-weight: 400;
    color: #0A0A0A;
    line-height: 1.6;
    margin: 0 0 32px;
    position: relative;
    z-index: 1;
}

.tg-showcase-stars {
    color: #23A74A;
    font-size: 20px;
    letter-spacing: 4px;
    margin-bottom: 32px;
    display: block;
}

.tg-showcase-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

@media (max-width: 767px) {
    .tg-showcase-card {
        padding: 32px 24px;
        border-radius: 20px;
    }

    .tg-showcase-quote {
        font-size: 16px;
        margin-bottom: 20px;
        line-height: 1.5;
    }

    .tg-showcase-stars {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .tg-showcase-author {
        flex-direction: column;
        gap: 10px;
    }

    .tg-showcase-meta {
        align-items: center;
        text-align: center;
    }

    .tg-showcase-avatar {
        width: 48px;
        height: 48px;
    }

    .tg-showcase-avatar i {
        font-size: 28px;
    }

    .tg-showcase-name {
        font-size: 14px;
    }

    .tg-showcase-location {
        font-size: 12px;
    }

    .tg-showcase-quote-mark {
        font-size: 64px;
        top: 8px;
    }

    .tg-reviews-showcase {
        padding: 0 40px;
    }
}

.tg-showcase-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #23A74A 0%, #1E8A3C 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tg-showcase-avatar i {
    font-size: 32px;
    color: #FFFFFF;
}

.tg-showcase-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.tg-showcase-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #0A0A0A;
}

.tg-showcase-location {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.5;
}

/* Showcase Navigation Buttons */
.tg-showcase-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: #FFFFFF;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}

.tg-showcase-btn:hover {
    background: #23A74A;
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 4px 16px rgba(35, 167, 74, 0.3);
}

.tg-showcase-btn:hover i {
    color: #FFFFFF;
}

.tg-showcase-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    box-shadow: none;
}

.tg-showcase-btn:disabled:hover {
    background: #FFFFFF;
    transform: translateY(-50%);
}

.tg-showcase-btn:disabled:hover i {
    color: #0A0A0A;
}

.tg-showcase-btn i {
    font-size: 24px;
    color: #0A0A0A;
    transition: color 0.2s ease;
}

.tg-showcase-prev {
    left: 0;
}

.tg-showcase-next {
    right: 0;
}

/* Showcase Dots */
.tg-showcase-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.tg-showcase-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: #E0E0DE;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.tg-showcase-dot:hover {
    background: #B8B8B6;
}

.tg-showcase-dot.active {
    background: #23A74A;
    width: 32px;
    border-radius: 5px;
}

.tg-reviews-disclaimer {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.4;
    margin: 24px 0 0;
    text-align: center;
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */

.tg-footer {
    background: #F8F8F6;
    border-top: 0.5px solid #E8E8E6;
    padding: 64px 24px 0;
}

.tg-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding-bottom: 48px;
}

.tg-footer-col:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tg-footer-brand {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: #0A0A0A;
    margin: 0 0 4px;
}

.tg-footer-logo {
    height: 48px;
    width: auto;
    display: block;
    margin-bottom: 12px;
    border-radius: 4px;
}

.tg-footer-tagline {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #23A74A;
    margin: 0 0 12px;
}

.tg-footer-desc {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.6;
    margin: 0;
    line-height: 1.6;
}

.tg-footer-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #0A0A0A;
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tg-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tg-footer-links a {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.7;
    text-decoration: none;
    transition: opacity 200ms ease;
}

.tg-footer-links a:hover {
    opacity: 1;
}

.tg-footer-bottom {
    border-top: 0.5px solid #E8E8E6;
    padding: 16px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.tg-footer-bottom p {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.4;
    margin: 0;
    line-height: 1.6;
}

.tg-footer-bottom a {
    color: #0A0A0A;
    opacity: 0.6;
    text-decoration: none;
}

@media (min-width: 768px) {
    .tg-footer-inner {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

/* ── Custom scrollbar ── */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #F8F8F6;
}

::-webkit-scrollbar-thumb {
    background: #23A74A;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #0A0A0A;
}

/* ══════════════════════════════════════
   CHECKOUT PAGE
══════════════════════════════════════ */

.tg-checkout-page {
    max-width: 100%;
    background: #FFFFFF;
}

.tg-checkout-intro {
    background: #F8F8F6;
    padding: 48px 24px;
    border-bottom: 0.5px solid #E8E8E6;
}

.tg-checkout-intro-inner {
    max-width: 760px;
    margin: 0 auto;
}

.tg-checkout-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 32px;
    color: #0A0A0A;
    margin: 0 0 12px;
}

.tg-checkout-subline {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.7;
    margin: 0 0 24px;
    line-height: 1.7;
}

/* Trust pills */
.tg-checkout-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tg-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 0.5px solid #23A74A;
    border-radius: 100px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #0A0A0A;
    background: #FFFFFF;
}

.tg-trust-pill i {
    font-size: 16px;
    color: #23A74A;
}

/* ══════════════════════════════════════
   CHECKOUT MEAL THUMBNAILS
══════════════════════════════════════ */

.tg-checkout-meals {
    background: #F8F8F6;
    padding: 24px;
    border-bottom: 0.5px solid #E8E8E6;
}

.tg-checkout-meals-inner {
    max-width: 760px;
    margin: 0 auto;
}

.tg-checkout-meals-label {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #0A0A0A;
    opacity: 0.5;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tg-checkout-meal-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tg-checkout-meal-thumb {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    border: 0.5px solid #E8E8E6;
    flex-shrink: 0;
}

.tg-checkout-meal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tg-checkout-meal-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: #F0F0EE;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tg-checkout-meal-thumb-placeholder i {
    font-size: 20px;
    color: #0A0A0A;
    opacity: 0.2;
}

.tg-checkout-meals-empty {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #0A0A0A;
    opacity: 0.5;
    margin: 0;
}

/* ══════════════════════════════════════
   CHECKOUT TRUST SIGNALS
══════════════════════════════════════ */

.tg-checkout-trust-signals {
    padding: 32px 24px;
    background: #FFFFFF;
    border-bottom: 0.5px solid #E8E8E6;
}

.tg-checkout-trust-signals-inner {
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .tg-checkout-trust-signals-inner {
        grid-template-columns: repeat(3, 1fr);
    }
}

.tg-trust-signal {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.tg-trust-signal i {
    font-size: 28px;
    color: #23A74A;
    flex-shrink: 0;
    margin-top: 2px;
}

.tg-trust-signal h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #0A0A0A;
    margin: 0 0 4px;
}

.tg-trust-signal p {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.6;
    margin: 0;
    line-height: 1.5;
}

/* WooCommerce checkout wrapper */
.tg-checkout-form {
    padding: 48px 24px;
}

.tg-checkout-form-inner {
    max-width: 760px;
    margin: 0 auto;
}

/* Cancel reminder */
.tg-cancel-reminder {
    padding: 24px;
    background: #F0FAF4;
    border-top: 0.5px solid #23A74A;
}

.tg-cancel-reminder-inner {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.tg-cancel-reminder i {
    font-size: 24px;
    color: #23A74A;
    flex-shrink: 0;
}

.tg-cancel-reminder p {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #0A0A0A;
    margin: 0;
}

@media (min-width: 768px) {
    .tg-checkout-heading {
        font-size: 40px;
    }
}

/* ── WooCommerce checkout overrides ── */
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
    background: #23A74A !important;
    color: #F8F8F6 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    border-radius: 100px !important;
    border: none !important;
    padding: 16px 32px !important;
    font-size: 15px !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: opacity 200ms ease !important;
}

.woocommerce #payment #place_order:hover,
.woocommerce-page #payment #place_order:hover {
    opacity: 0.88 !important;
}

/* Hide coupon bar */
.woocommerce-form-coupon-toggle,
.checkout_coupon,
.woocommerce-info {
    display: none !important;
}

/* ══════════════════════════════════════
   CUSTOMER PORTAL
══════════════════════════════════════ */

.tg-portal {
    min-height: 100vh;
    background: #F8F8F6;
    margin-top: 0 !important;
}

@media (min-width: 768px) {
    .tg-portal {
        padding-top: 64px;
    }
}

/* ── Portal Nav ── */
.tg-portal-nav {
    background: #FFFFFF;
    border-bottom: 0.5px solid #E8E8E6;
    position: sticky;
    top: 0 !important;
    z-index: 100;
}

.admin-bar .tg-portal-nav {
    top: 32px !important;
}

.tg-portal-nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tg-portal-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.tg-portal-logo-img {
    height: 40px;
    width: auto;
    display: block;
    border-radius: 4px;
}

.tg-portal-nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tg-portal-nav-link {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #0A0A0A;
    opacity: 0.45;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 100px;
    transition: opacity 200ms ease, background 200ms ease;
}

.tg-portal-nav-link:hover {
    opacity: 1;
    background: #F8F8F6;
}

.tg-portal-nav-link.active {
    opacity: 1;
    background: #F0FAF4;
    color: #23A74A;
}

.tg-portal-logout {
    color: #DC0032 !important;
    opacity: 0.7 !important;
}

.tg-portal-logout:hover {
    background: #FFF0F0 !important;
    opacity: 1 !important;
}

/* ── Portal Body ── */
.tg-portal-body {
    max-width: 1100px;
    margin: 0 auto;
    padding: 64px 24px 80px;
}

/* ── Tabs ── */
.tg-portal-tab {
    display: none;
}

.tg-portal-tab.active {
    display: block;
}

/* ── Status Strip ── */
.tg-portal-status-strip {
    background: #FFFFFF;
    border-radius: 12px;
    border: 0.5px solid #E8E8E6;
    margin-bottom: 20px;
    padding: 16px 24px;
}

.tg-portal-status-strip-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.tg-portal-greeting {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #0A0A0A;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tg-sub-badge {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 100px;
    background: #F0FAF4;
    color: #23A74A;
}

.tg-sub-badge.tg-sub-on-hold {
    background: #FFF8E1;
    color: #B8860B;
}

.tg-sub-badge.tg-sub-cancelled {
    background: #FFF0F0;
    color: #DC0032;
}

.tg-portal-cutoff-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tg-cutoff-badge {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 100px;
}

.tg-cutoff-open {
    background: #F0FAF4;
    color: #23A74A;
}

.tg-cutoff-locked {
    background: #F8F8F6;
    color: #0A0A0A;
    opacity: 0.6;
}

.tg-cutoff-countdown {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #0A0A0A;
    opacity: 0.5;
}

/* ── Portal Main Layout ── */
.tg-portal-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Portal Card ── */
.tg-portal-card {
    background: #FFFFFF;
    border-radius: 16px;
    border: 0.5px solid #E8E8E6;
    padding: 28px;
}

.tg-portal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}

.tg-portal-card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: #0A0A0A;
    margin: 0 0 4px;
}

.tg-portal-card-sub {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.5;
    margin: 0;
}

.tg-portal-locked-msg {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #0A0A0A;
    opacity: 0.4;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Meal Grid ── */
.tg-portal-meal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (min-width: 600px) {
    .tg-portal-meal-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) {
    .tg-portal-meal-grid {
        grid-template-columns: repeat(7, 1fr);
    }
}

.tg-portal-meal-card {
    border: 0.5px solid #E8E8E6;
    border-radius: 10px;
    overflow: hidden;
    background: #FFFFFF;
}

.tg-portal-meal-photo {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
}

.tg-portal-meal-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    background: #F8F8F6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tg-portal-meal-placeholder i {
    font-size: 28px;
    color: #0A0A0A;
    opacity: 0.15;
}

.tg-portal-meal-body {
    padding: 8px;
}

.tg-portal-meal-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 10px;
    color: #0A0A0A;
    margin: 0 0 4px;
    line-height: 1.3;
}

.tg-portal-meal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 4px;
}

.tg-portal-qty-badge {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #23A74A;
}

.tg-portal-no-meals {
    text-align: center;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.tg-portal-no-meals i {
    font-size: 40px;
    color: #0A0A0A;
    opacity: 0.15;
}

.tg-portal-no-meals p {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #0A0A0A;
    opacity: 0.5;
    margin: 0;
}

/* ── Actions ── */
.tg-portal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.tg-portal-action-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 0.5px solid #E8E8E6;
    border-radius: 12px;
    background: #FFFFFF;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 200ms ease, background 200ms ease;
    text-align: left;
    width: 100%;
    min-height: 44px;
}

.tg-portal-action-btn:hover {
    border-color: #0A0A0A;
    background: #F8F8F6;
}

.tg-portal-action-btn i {
    font-size: 24px;
    color: #23A74A;
    flex-shrink: 0;
}

.tg-portal-action-btn strong {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #0A0A0A;
    margin-bottom: 2px;
}

.tg-portal-action-btn span {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.5;
}

.tg-portal-action-btn.tg-action-danger {
    border-color: #FFF0F0;
    background: #FFF0F0;
}

.tg-portal-action-btn.tg-action-danger:hover {
    border-color: #DC0032;
}

.tg-portal-action-btn.tg-action-danger i {
    color: #DC0032;
}

.tg-portal-action-btn.tg-action-danger strong {
    color: #DC0032;
}

.tg-portal-action-btn.tg-action-primary {
    border-color: #23A74A;
    background: #F0FAF4;
}

.tg-portal-action-btn.tg-action-primary i {
    color: #23A74A;
}

/* ── Feedback ── */
.tg-portal-feedback {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.tg-feedback-success {
    background: #F0FAF4;
    color: #23A74A;
}

.tg-feedback-error {
    background: #FFF0F0;
    color: #DC0032;
}

/* ── Order History ── */
.tg-portal-order-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tg-portal-order-row {
    padding: 16px;
    border: 0.5px solid #E8E8E6;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.tg-portal-order-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tg-portal-order-date {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #0A0A0A;
}

.tg-portal-order-num {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    color: #0A0A0A;
    opacity: 0.4;
}

.tg-order-status-badge {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 100px;
    background: #F0FAF4;
    color: #23A74A;
}

.tg-portal-order-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tg-portal-order-thumbs {
    display: flex;
    gap: 4px;
}

.tg-portal-order-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 0.5px solid #E8E8E6;
    overflow: hidden;
    background: #F8F8F6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tg-portal-order-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tg-portal-order-thumb i {
    font-size: 14px;
    color: #0A0A0A;
    opacity: 0.2;
}

.tg-thumb-more {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #0A0A0A;
    opacity: 0.4;
}

.tg-portal-order-total {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0A0A0A;
    white-space: nowrap;
}

/* ── Account ── */
.tg-portal-account-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

@media (min-width: 600px) {
    .tg-portal-account-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.tg-portal-account-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tg-account-label {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #0A0A0A;
    opacity: 0.4;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tg-account-value {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #0A0A0A;
}

.tg-portal-inline-link {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #23A74A;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tg-portal-inline-link:hover {
    text-decoration: underline;
}

/* ── Empty states ── */
.tg-portal-empty-state {
    text-align: center;
    padding: 64px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.tg-portal-empty-state i {
    font-size: 56px;
    color: #0A0A0A;
    opacity: 0.12;
}

.tg-portal-empty-state h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: #0A0A0A;
    margin: 0;
}

.tg-portal-empty-state p {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    color: #0A0A0A;
    opacity: 0.5;
    margin: 0;
}

.tg-portal-cancelled-msg {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #FFF8E1;
    border-radius: 10px;
}

.tg-portal-cancelled-msg i {
    font-size: 20px;
    color: #B8860B;
    flex-shrink: 0;
}

.tg-portal-cancelled-msg p {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #0A0A0A;
    margin: 0;
}

.tg-muted {
    opacity: 0.4 !important;
}

/* ── Portal: remove Storefront header space ── */
body.page-template-page-portal .site,
body.page-template-page-portal .site-content,
body.page-template-page-portal #page {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.page-template-page-portal .tg-portal-nav {
    margin-top: 0 !important;
}

/* ── Portal: fix admin bar and header offsets ── */
/* Reset ALL margins/padding on html/body for portal */
body.page-template-page-portal,
body.page-template-page-portal.admin-bar {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.page-template-page-portal.admin-bar #wpadminbar {
    position: fixed !important;
}

body.page-template-page-portal .tg-portal {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.page-template-page-portal .tg-portal-nav {
    margin-top: 0 !important;
}

/* ══════════════════════════════════════
   PORTAL PREFERENCES
══════════════════════════════════════ */

.tg-pref-section {
    margin-bottom: 24px;
}

.tg-pref-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #0A0A0A;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tg-pref-sublabel {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #0A0A0A;
    opacity: 0.5;
    margin: 0 0 12px;
}

.tg-pref-stage-pills,
.tg-pref-allergen-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tg-pref-stage-btn,
.tg-pref-allergen-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 0.5px solid #E8E8E6;
    border-radius: 100px;
    background: #FFFFFF;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #0A0A0A;
    cursor: pointer;
    transition: all 200ms ease;
    min-height: 44px;
}

.tg-pref-stage-btn i,
.tg-pref-allergen-btn i {
    font-size: 18px;
    color: #23A74A;
    transition: color 200ms ease;
}

.tg-pref-stage-btn:hover,
.tg-pref-allergen-btn:hover {
    border-color: #23A74A;
    background: #F0FAF4;
}

.tg-pref-stage-btn.active,
.tg-pref-allergen-btn.active {
    border-color: #23A74A;
    border-width: 1.5px;
    background: #F0FAF4;
    color: #23A74A;
    font-weight: 700;
}

.tg-pref-stage-btn.active i,
.tg-pref-allergen-btn.active i {
    color: #23A74A;
}

/* ==========================================================================
   SITE NAVIGATION — appears on all public pages except quiz, checkout, and portal.
   ========================================================================== */

/* ── Nav Container ── */
.tg-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
    height: 64px;
    transition: background-color 200ms ease, box-shadow 200ms ease;
}

.tg-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Logo ── */
.tg-nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 200ms ease;
}

.tg-nav-logo:hover {
    opacity: 0.85;
}

.tg-nav-logo-img {
    height: 52px;
    width: auto;
    display: block;
    border-radius: 4px;
}

@media (max-width: 767px) {
    .tg-nav-logo-img {
        height: 44px;
    }
}

/* ── Desktop Navigation ── */
.tg-nav-desktop {
    display: flex;
    align-items: center;
    gap: 32px;
}

.tg-nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tg-nav-links li {
    margin: 0;
    padding: 0;
}

.tg-nav-link {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #0A0A0A;
    text-decoration: none;
    transition: opacity 200ms ease, color 200ms ease;
    display: block;
}

.tg-nav-link:hover {
    opacity: 0.7;
}

.tg-nav-link--active {
    color: #23A74A;
    font-weight: 700;
}

/* ── Sign In Link (desktop) ── */
.tg-nav-signin {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: opacity 200ms ease;
    white-space: nowrap;
    margin-right: 8px;
}

.tg-nav-signin:hover {
    opacity: 0.7;
}

/* ── CTA Button ── */
.tg-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
    padding: 10px 20px;
    border-radius: 100px;
    text-decoration: none;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
    white-space: nowrap;
}

.tg-nav-cta i {
    font-size: 16px;
}

/* ── Transparent State (Homepage hero) ── */
.tg-nav--transparent {
    background: transparent;
    box-shadow: none;
}

.tg-nav--transparent .tg-nav-logo {
    color: #FFFFFF;
}

.tg-nav--transparent .tg-nav-link {
    color: #FFFFFF;
}

.tg-nav--transparent .tg-nav-signin {
    color: #FFFFFF;
}

.tg-nav--transparent .tg-nav-cta {
    background: transparent;
    color: #FFFFFF;
    border: 1.5px solid #FFFFFF;
}

.tg-nav--transparent .tg-nav-cta:hover {
    background: rgba(255, 255, 255, 0.1);
}

.tg-nav--transparent .tg-nav-hamburger {
    color: #FFFFFF;
}

/* ── Scrolled State (Homepage scrolled, or any other page) ── */
.tg-nav--scrolled {
    background: #FFFFFF;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.tg-nav--scrolled .tg-nav-logo {
    color: #0A0A0A;
}

.tg-nav--scrolled .tg-nav-link {
    color: #0A0A0A;
}

.tg-nav--scrolled .tg-nav-signin {
    color: #0A0A0A;
}

.tg-nav--scrolled .tg-nav-cta {
    background: #23A74A;
    color: #FFFFFF;
    border: 1.5px solid #23A74A;
}

.tg-nav--scrolled .tg-nav-cta:hover {
    background: #1e8f3f;
    border-color: #1e8f3f;
}

.tg-nav--scrolled .tg-nav-hamburger {
    color: #0A0A0A;
}

/* ── Hamburger Button ── */
.tg-nav-hamburger {
    display: none;
    width: 40px;
    height: 40px;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    transition: color 200ms ease;
}

.tg-nav-hamburger span {
    display: block;
    width: 20px;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 200ms ease, opacity 200ms ease;
}

/* Hamburger animation to X when drawer is open */
.tg-nav-drawer--open + .tg-nav-overlay ~ .tg-nav .tg-nav-hamburger span:nth-child(1),
.tg-nav:has(~ .tg-nav-drawer.tg-nav-drawer--open) .tg-nav-hamburger span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.tg-nav-drawer--open + .tg-nav-overlay ~ .tg-nav .tg-nav-hamburger span:nth-child(2),
.tg-nav:has(~ .tg-nav-drawer.tg-nav-drawer--open) .tg-nav-hamburger span:nth-child(2) {
    opacity: 0;
}

.tg-nav-drawer--open + .tg-nav-overlay ~ .tg-nav .tg-nav-hamburger span:nth-child(3),
.tg-nav:has(~ .tg-nav-drawer.tg-nav-drawer--open) .tg-nav-hamburger span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ── Mobile Drawer ── */
.tg-nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100vh;
    background: #FFFFFF;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.tg-nav-drawer--open {
    transform: translateX(0);
}

/* ── Drawer Overlay ── */
.tg-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1), visibility 300ms;
}

.tg-nav-overlay--visible,
.tg-nav-drawer--open + .tg-nav-overlay {
    opacity: 1;
    visibility: visible;
}

/* ── Drawer Header ── */
.tg-nav-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 0.5px solid #E8E8E6;
    flex-shrink: 0;
}

.tg-nav-drawer-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #0A0A0A;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tg-nav-drawer-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #0A0A0A;
    font-size: 20px;
    transition: color 200ms ease;
}

.tg-nav-drawer-close:hover {
    color: #23A74A;
}

/* ── Drawer Navigation ── */
.tg-nav-drawer-nav {
    flex: 1;
    padding: 48px 24px 24px;
    overflow-y: auto;
}

.tg-nav-drawer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.tg-nav-drawer-links li {
    margin: 0;
    padding: 0;
}

.tg-nav-drawer-link {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #0A0A0A;
    text-decoration: none;
    display: block;
    transition: color 200ms ease;
}

.tg-nav-drawer-link:hover {
    color: #23A74A;
}

/* ── Drawer Footer (CTA) ── */
.tg-nav-drawer-footer {
    padding: 24px;
    border-top: 0.5px solid #E8E8E6;
    flex-shrink: 0;
}

.tg-nav-drawer-signin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: transparent;
    color: #0A0A0A;
    border: 1.5px solid #E8E8E6;
    border-radius: 100px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: background-color 200ms ease, border-color 200ms ease;
}

.tg-nav-drawer-signin:hover {
    background: #F8F8F6;
    border-color: #D0D0CE;
}

.tg-nav-drawer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    background: #23A74A;
    color: #FFFFFF;
    border-radius: 100px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    text-decoration: none;
    transition: background-color 200ms ease;
}

.tg-nav-drawer-cta:hover {
    background: #1e8f3f;
    color: #FFFFFF;
}

.tg-nav-drawer-cta i {
    font-size: 18px;
}

/* ── Body Padding for Fixed Nav ── */
body.tg-has-nav {
    padding-top: 64px;
}

@media (max-width: 767px) {
    .tg-nav {
        height: 56px;
    }

    .tg-nav-desktop {
        display: none;
    }

    .tg-nav-hamburger {
        display: flex;
    }

    body.tg-has-nav {
        padding-top: 56px;
    }
}

/* Mobile nav on homepage hero - white background for visibility */
@media (max-width: 767px) {
    body.page-template-page-home .tg-nav--transparent {
        background: #FFFFFF;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
    }

    body.page-template-page-home .tg-nav--transparent .tg-nav-hamburger {
        color: #0A0A0A;
    }
}

@media (min-width: 768px) {
    .tg-nav-drawer,
    .tg-nav-overlay {
        display: none !important;
    }

    .tg-nav-hamburger {
        display: none !important;
    }
}

/* ==========================================================================
   SHARED PAGE STYLES — applies to all inner pages
   ========================================================================== */

/* ── Page Header ── */
.tg-page-header {
    background: #FFFFFF;
    border-bottom: 0.5px solid #E8E8E6;
    padding: 72px 24px 64px;
    text-align: center;
}

.tg-page-header-inner {
    max-width: 720px;
    margin: 0 auto;
}

.tg-page-header-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.1;
    color: #0A0A0A;
    margin: 12px 0 20px;
}

.tg-page-header-subline {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: #555;
    margin: 0;
}

.tg-page-header-subline a {
    color: #23A74A;
    text-decoration: underline;
}

/* ── CTA Band ── */
.tg-cta-band {
    background: #F0FAF3;
    border-top: 0.5px solid #C9EDD5;
    padding: 64px 24px;
}

.tg-cta-band--dark {
    background: #0A0A0A;
    border-top: none;
}

.tg-cta-band--dark .tg-cta-band-headline,
.tg-cta-band--dark .tg-cta-band-subline {
    color: #FFFFFF;
}

.tg-cta-band-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.tg-cta-band-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(22px, 3vw, 30px);
    color: #0A0A0A;
    margin: 0 0 8px;
    line-height: 1.2;
}

.tg-cta-band-subline {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    color: #555;
    margin: 0;
}

/* ── Shared form elements ── */
.tg-form-input,
.tg-form-select,
.tg-form-textarea {
    width: 100%;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    color: #0A0A0A;
    background: #FFFFFF;
    border: 1.5px solid #D4D4D0;
    border-radius: 10px;
    padding: 14px 16px;
    transition: border-color 200ms ease, box-shadow 200ms ease;
    outline: none;
    box-sizing: border-box;
}

.tg-form-input:focus,
.tg-form-select:focus,
.tg-form-textarea:focus {
    border-color: #23A74A;
    box-shadow: 0 0 0 3px rgba(35, 167, 74, 0.12);
}

.tg-form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23555' viewBox='0 0 256 256'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.tg-form-label {
    display: block;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #0A0A0A;
    margin-bottom: 6px;
}

.tg-form-row {
    margin-bottom: 20px;
}

.tg-form-row--two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.tg-form-field {
    margin-bottom: 20px;
}

.tg-form-textarea {
    resize: vertical;
    min-height: 140px;
}

.tg-btn-form-submit {
    width: 100%;
    margin-top: 4px;
}

/* ── Form notices ── */
.tg-form-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 10px;
    margin-bottom: 24px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

.tg-form-notice i {
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 1px;
}

.tg-form-notice p {
    margin: 0;
}

.tg-form-notice--success {
    background: #F0FAF3;
    border: 1px solid #C9EDD5;
    color: #1a5c30;
}

.tg-form-notice--success i {
    color: #23A74A;
}

.tg-form-notice--error {
    background: #FFF3F3;
    border: 1px solid #F5C6C6;
    color: #7a1a1a;
}

.tg-form-notice--error i {
    color: #DC3030;
}

/* ── Button outline ── */
.tg-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border: 2px solid #0A0A0A;
    border-radius: 100px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #0A0A0A;
    text-decoration: none;
    transition: background-color 200ms ease, color 200ms ease;
}

.tg-btn-outline:hover {
    background: #0A0A0A;
    color: #FFFFFF;
}

/* ── Section heading / subline (shared) ── */
.tg-section-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(26px, 3.5vw, 40px);
    line-height: 1.15;
    color: #0A0A0A;
    margin: 12px 0 20px;
}

.tg-section-subline {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: #555;
    margin: 0 0 48px;
}

.tg-section-heading.tg-centered,
.tg-section-subline.tg-centered {
    text-align: center;
}

/* ==========================================================================
   FAQ PAGE
   ========================================================================== */

.tg-faq-section {
    padding: 80px 24px;
}

.tg-faq-section--light {
    background: #FFFFFF;
    border-top: 0.5px solid #E8E8E6;
    border-bottom: 0.5px solid #E8E8E6;
}

.tg-faq-inner {
    max-width: 760px;
    margin: 0 auto;
}

.tg-faq-category {
    margin-bottom: 56px;
}

.tg-faq-category-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: #0A0A0A;
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid #23A74A;
    display: inline-block;
}

.tg-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 0.5px solid #E8E8E6;
}

.tg-faq-item {
    border-bottom: 0.5px solid #E8E8E6;
}

.tg-faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 20px 0;
    text-align: left;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 17px;
    color: #0A0A0A;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    line-height: 1.4;
    transition: color 200ms ease;
}

.tg-faq-question:hover {
    color: #23A74A;
}

.tg-faq-icon {
    flex-shrink: 0;
    font-size: 18px;
    color: #23A74A;
    transition: transform 300ms ease;
}

.tg-faq-item--open .tg-faq-icon {
    transform: rotate(180deg);
}

/* CSS grid-row accordion animation */
.tg-faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 300ms ease;
    overflow: hidden;
}

.tg-faq-answer-inner {
    overflow: hidden;
}

.tg-faq-answer-inner p {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    margin: 0 0 20px;
    padding-bottom: 4px;
}

.tg-faq-answer-inner p:last-child {
    margin-bottom: 20px;
}

.tg-faq-answer-inner a {
    color: #23A74A;
    text-decoration: underline;
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

.tg-contact-section {
    padding: 80px 24px;
}

.tg-contact-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    align-items: start;
}

.tg-contact-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.tg-contact-card {
    background: #FFFFFF;
    border: 0.5px solid #E8E8E6;
    border-radius: 16px;
    padding: 28px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    transition: box-shadow 200ms ease;
}

.tg-contact-card:hover {
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.tg-contact-card-icon {
    width: 48px;
    height: 48px;
    background: #F0FAF3;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 24px;
    color: #23A74A;
}

.tg-contact-card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #0A0A0A;
    margin: 0 0 6px;
}

.tg-contact-card-desc {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 0 0 10px;
}

.tg-contact-card-link {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #23A74A;
    text-decoration: none;
    border-bottom: 1px solid rgba(35,167,74,0.3);
    transition: border-color 200ms;
}

.tg-contact-card-link:hover {
    border-color: #23A74A;
}

.tg-contact-form-wrap {
    background: #FFFFFF;
    border: 0.5px solid #E8E8E6;
    border-radius: 20px;
    padding: 40px;
}

.tg-contact-form {
    display: flex;
    flex-direction: column;
}

@media (max-width: 900px) {
    .tg-contact-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .tg-form-row--two {
        grid-template-columns: 1fr;
    }

    .tg-contact-form-wrap {
        padding: 28px 20px;
    }
}

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */

.tg-about-editorial {
    padding: 80px 24px;
    background: #FFFFFF;
    border-bottom: 0.5px solid #E8E8E6;
}

.tg-about-editorial-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.tg-about-editorial-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(26px, 3.5vw, 40px);
    line-height: 1.15;
    color: #0A0A0A;
    margin: 12px 0 24px;
}

.tg-about-editorial-headline em {
    font-style: italic;
    color: #23A74A;
}

.tg-about-body {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 17px;
    line-height: 1.8;
    color: #444;
    margin: 0 0 20px;
}

.tg-about-photo {
    width: 100%;
    border-radius: 20px;
    display: block;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.tg-about-solution {
    padding: 80px 24px;
    background: #F8F8F6;
}

.tg-about-solution-inner {
    max-width: 1140px;
    margin: 0 auto;
    text-align: center;
}

.tg-about-solution-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(26px, 3.5vw, 38px);
    color: #0A0A0A;
    margin: 12px 0 20px;
    line-height: 1.15;
}

.tg-about-solution-body {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 17px;
    line-height: 1.8;
    color: #555;
    max-width: 640px;
    margin: 0 auto 56px;
}

.tg-about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.tg-about-stat-card {
    background: #FFFFFF;
    border: 0.5px solid #E8E8E6;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
}

.tg-about-stat-num {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 48px;
    color: #23A74A;
    line-height: 1;
    margin-bottom: 8px;
}

.tg-about-stat-label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #0A0A0A;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.tg-about-stat-desc {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

.tg-about-team {
    padding: 80px 24px;
    background: #FFFFFF;
    border-top: 0.5px solid #E8E8E6;
    text-align: center;
}

.tg-about-team-inner {
    max-width: 720px;
    margin: 0 auto;
}

.tg-about-team-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(24px, 3vw, 36px);
    color: #0A0A0A;
    margin: 12px 0 20px;
}

.tg-about-team-body {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 17px;
    line-height: 1.8;
    color: #555;
    margin: 0 0 40px;
}

.tg-about-team-placeholder {
    background: #F8F8F6;
    border: 1.5px dashed #D4D4D0;
    border-radius: 16px;
    padding: 48px 24px;
}

.tg-about-team-placeholder-text {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    color: #999;
    margin: 0;
}

@media (max-width: 900px) {
    .tg-about-editorial-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .tg-about-stats {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   DELIVERY PAGE
   ========================================================================== */

.tg-delivery-how {
    padding: 80px 24px;
    background: #FFFFFF;
    border-bottom: 0.5px solid #E8E8E6;
}

.tg-delivery-how-inner {
    max-width: 1140px;
    margin: 0 auto;
    text-align: center;
}

.tg-delivery-areas {
    padding: 80px 24px;
    background: #F8F8F6;
}

.tg-delivery-areas-inner {
    max-width: 1140px;
    margin: 0 auto;
    text-align: center;
}

.tg-delivery-areas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 40px 0 56px;
    text-align: left;
}

.tg-delivery-area-card {
    background: #FFFFFF;
    border: 0.5px solid #E8E8E6;
    border-radius: 16px;
    padding: 28px 24px;
}

.tg-delivery-area-icon {
    font-size: 28px;
    color: #23A74A;
    display: block;
    margin-bottom: 12px;
}

.tg-delivery-area-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #0A0A0A;
    margin: 0 0 8px;
}

.tg-delivery-area-suburbs {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 0 0 16px;
}

.tg-delivery-area-status {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 12px;
    border-radius: 100px;
}

.tg-delivery-area-status--live {
    background: #F0FAF3;
    color: #1a6b32;
}

.tg-delivery-area-status--soon {
    background: #F5F5F3;
    color: #666;
}

.tg-delivery-waitlist {
    background: #FFFFFF;
    border: 0.5px solid #E8E8E6;
    border-radius: 20px;
    padding: 40px;
    max-width: 640px;
    margin: 0 auto;
    text-align: left;
}

.tg-delivery-waitlist-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: #0A0A0A;
    margin: 0 0 8px;
}

.tg-delivery-waitlist-sub {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    color: #666;
    margin: 0 0 24px;
}

.tg-delivery-waitlist-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.tg-delivery-waitlist-row .tg-form-input {
    flex: 1;
    min-width: 180px;
}

.tg-delivery-waitlist-row .tg-btn-primary {
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .tg-delivery-areas-grid {
        grid-template-columns: 1fr;
    }

    .tg-delivery-waitlist {
        padding: 28px 20px;
    }
}

/* ==========================================================================
   GLP-1 PAGE
   ========================================================================== */

.tg-glp1-editorial {
    padding: 80px 24px;
    background: #FFFFFF;
    border-bottom: 0.5px solid #E8E8E6;
}

.tg-glp1-editorial-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.tg-glp1-editorial-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(26px, 3.5vw, 40px);
    line-height: 1.15;
    color: #0A0A0A;
    margin: 12px 0 24px;
}

.tg-glp1-editorial-headline em {
    font-style: italic;
    color: #23A74A;
}

.tg-glp1-body {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 17px;
    line-height: 1.8;
    color: #444;
    margin: 0 0 20px;
}

.tg-glp1-photo {
    width: 100%;
    border-radius: 20px;
    display: block;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.tg-glp1-risks {
    padding: 80px 24px;
    background: #F8F8F6;
    border-bottom: 0.5px solid #E8E8E6;
}

.tg-glp1-risks-inner {
    max-width: 1140px;
    margin: 0 auto;
    text-align: center;
}

.tg-glp1-risk-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
    text-align: left;
}

.tg-glp1-risk-card {
    background: #FFFFFF;
    border: 0.5px solid #E8E8E6;
    border-radius: 16px;
    padding: 32px 24px;
}

.tg-glp1-risk-icon {
    width: 52px;
    height: 52px;
    background: #F0FAF3;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #23A74A;
    margin-bottom: 16px;
}

.tg-glp1-risk-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: #0A0A0A;
    margin: 0 0 12px;
}

.tg-glp1-risk-desc {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin: 0;
}

.tg-glp1-stages {
    padding: 80px 24px;
    background: #FFFFFF;
    border-bottom: 0.5px solid #E8E8E6;
}

.tg-glp1-disclaimer {
    padding: 40px 24px;
    background: #F8F8F6;
    border-top: 0.5px solid #E8E8E6;
    border-bottom: 0.5px solid #E8E8E6;
}

.tg-glp1-disclaimer-inner {
    max-width: 760px;
    margin: 0 auto;
}

.tg-glp1-disclaimer-text {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: #888;
    margin: 0;
}

@media (max-width: 900px) {
    .tg-glp1-editorial-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .tg-glp1-risk-cards {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   LEGAL PAGE
   ========================================================================== */

.tg-legal-page {
    background: #F8F8F6;
}

.tg-legal-content {
    padding: 64px 24px 80px;
}

.tg-legal-inner {
    max-width: 760px;
    margin: 0 auto;
}

.tg-legal-header {
    margin-bottom: 48px;
}

.tg-legal-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    margin-bottom: 32px;
    transition: color 200ms;
}

.tg-legal-back:hover {
    color: #23A74A;
}

.tg-legal-back i {
    font-size: 16px;
}

.tg-legal-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(28px, 4vw, 44px);
    color: #0A0A0A;
    margin: 0 0 12px;
    line-height: 1.1;
}

.tg-legal-updated {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #999;
    margin: 0;
}

.tg-legal-body {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    background: #FFFFFF;
    border: 0.5px solid #E8E8E6;
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 40px;
}

.tg-legal-body h2,
.tg-legal-body h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: #0A0A0A;
    margin-top: 36px;
    margin-bottom: 12px;
}

.tg-legal-body h2 {
    font-size: 20px;
}

.tg-legal-body h3 {
    font-size: 17px;
}

.tg-legal-body p {
    margin: 0 0 16px;
}

.tg-legal-body ul,
.tg-legal-body ol {
    padding-left: 24px;
    margin: 0 0 16px;
}

.tg-legal-body li {
    margin-bottom: 8px;
}

.tg-legal-body a {
    color: #23A74A;
    text-decoration: underline;
}

.tg-legal-footer-links {
    background: #FFFFFF;
    border: 0.5px solid #E8E8E6;
    border-radius: 16px;
    padding: 28px 32px;
}

.tg-legal-footer-links p {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 12px;
}

.tg-legal-footer-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.tg-legal-footer-links li {
    margin: 0;
    padding: 0;
}

.tg-legal-footer-links a {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    color: #23A74A;
    text-decoration: none;
    border-bottom: 1px solid rgba(35,167,74,0.3);
    transition: border-color 200ms;
}

.tg-legal-footer-links a:hover {
    border-color: #23A74A;
}

/* ==========================================================================
   404 PAGE
   ========================================================================== */

.tg-404-section {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    background: #F8F8F6;
}

.tg-404-inner {
    text-align: center;
    max-width: 520px;
}

.tg-404-number {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 120px;
    line-height: 1;
    color: #23A74A;
    margin-bottom: 16px;
    letter-spacing: -0.04em;
}

.tg-404-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(24px, 3.5vw, 36px);
    color: #0A0A0A;
    margin: 0 0 16px;
    line-height: 1.2;
}

.tg-404-subline {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: #666;
    margin: 0 0 40px;
}

.tg-404-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .tg-404-number {
        font-size: 80px;
    }

    .tg-404-section {
        min-height: calc(100vh - 56px);
    }
}

/* ==========================================================================
   FULL ON BALANCE (Coming Soon)
   ========================================================================== */

.tg-balance-page {
    background: #F8F8F6;
}

.tg-balance-section {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
}

.tg-balance-inner {
    max-width: 640px;
    text-align: center;
}

.tg-balance-back {
    display: block;
    text-align: left;
    margin-bottom: 48px;
}

.tg-balance-headline {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(44px, 7vw, 80px);
    color: #0A0A0A;
    line-height: 1.05;
    margin: 12px 0 24px;
    letter-spacing: -0.02em;
}

.tg-balance-subline {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 17px;
    line-height: 1.8;
    color: #555;
    margin: 0 0 48px;
}

.tg-balance-form-wrap {
    background: #FFFFFF;
    border: 0.5px solid #E8E8E6;
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 20px;
}

.tg-balance-form-label {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #0A0A0A;
    margin: 0 0 16px;
    text-align: center;
}

.tg-balance-form-row {
    display: flex;
    gap: 12px;
}

.tg-balance-form-row .tg-form-input {
    flex: 1;
}

.tg-balance-form-row .tg-btn-primary {
    white-space: nowrap;
    flex-shrink: 0;
}

.tg-balance-trust {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    color: #999;
    margin: 0;
    text-align: center;
}

@media (max-width: 600px) {
    .tg-balance-form-row {
        flex-direction: column;
    }

    .tg-balance-section {
        min-height: calc(100vh - 56px);
    }
}

/* ==========================================================================
   DELIVERY HOW-IT-WORKS section (reuses tg-how-* classes from homepage)
   ========================================================================== */

.tg-delivery-how .tg-how-steps {
    margin-top: 48px;
}

/* ==========================================================================
   Price Band — meals page (DEPRECATED: replaced by .tg-meals-price-info inside filter bar)
   Kept for backward-compatibility; hidden via display:none on the template.
   ========================================================================== */

.tg-meals-price-band {
    display: none;
}

.tg-price-band-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tg-price-band-meals {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #0A0A0A;
    opacity: 0.6;
}

.tg-price-band-sep {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #0A0A0A;
    opacity: 0.3;
    margin: 0 2px;
}

.tg-price-band-per-meal-value {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #23A74A;
}

/* WooCommerce wraps formatted price in a <span> — ensure font inherits */
.tg-price-band-per-meal-value .woocommerce-Price-amount,
.tg-price-band-per-meal-value bdi {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #23A74A;
}

.tg-price-band-per-meal-label {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #0A0A0A;
    opacity: 0.5;
}

.tg-price-band-right {
    display: flex;
    align-items: center;
    gap: 3px;
}

.tg-price-band-total {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #0A0A0A;
}

.tg-price-band-total .woocommerce-Price-amount,
.tg-price-band-total bdi {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #0A0A0A;
}

.tg-price-band-month {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #0A0A0A;
    opacity: 0.5;
}

/* ── Info tooltip ── */
.tg-price-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    cursor: pointer;
}

.tg-price-tooltip > i {
    font-size: 15px;
    color: var(--tg-text-secondary);
    opacity: 0.6;
    transition: opacity 150ms ease;
}

.tg-price-tooltip:hover > i {
    opacity: 1;
}

.tg-price-tooltip-text {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--tg-surface);
    border: 1px solid var(--tg-border);
    border-radius: 10px;
    padding: 8px 12px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: var(--tg-text);
    line-height: 1.5;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
}

.tg-price-tooltip:hover .tg-price-tooltip-text {
    display: block;
}

/* Touch: show tooltip on tap via :focus-within */
.tg-price-tooltip:focus-within .tg-price-tooltip-text {
    display: block;
}

/* ==========================================================================
   Personalised Stage Banner (quiz handoff) — above price band
   ========================================================================== */

.tg-meals-stage-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-left: 3px solid;  /* colour set inline via PHP */
    border-radius: 12px;
    margin-bottom: 4px;
}

.tg-stage-banner-text {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #0A0A0A;
    margin: 0;
    line-height: 1.5;
    flex: 1;
}

.tg-stage-banner-dismiss {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
    border: none;
    color: #0A0A0A;
    opacity: 0.4;
    flex-shrink: 0;
    margin-left: 12px;
    padding: 0;
    transition: opacity 150ms ease;
}

.tg-stage-banner-dismiss:hover {
    opacity: 1;
}

.tg-stage-banner-dismiss i {
    font-size: 18px;
    pointer-events: none;
}

/* ==========================================================================
   Sticky Bar — Box Price display
   ========================================================================== */

.tg-sticky-box-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    flex-shrink: 0;
}

.tg-sticky-price-amount {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #FFFFFF;
}

/* WooCommerce price wrapper */
.tg-sticky-price-amount .woocommerce-Price-amount,
.tg-sticky-price-amount bdi {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #FFFFFF;
}

.tg-sticky-price-month {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: rgba(255,255,255,0.55);
}

/* ==========================================================================
   Meal Constraint Tooltip
   ========================================================================== */

.tg-qty-stepper {
    position: relative;
}

.tg-meal-tooltip {
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--tg-dark);
    color: #F8F8F8;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 100px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease;
}

.tg-meal-tooltip.visible {
    opacity: 1;
}

.tg-meal-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #0A0A0A transparent transparent transparent;
}

.tgm-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(10, 10, 10, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.tgm-modal-overlay--hidden {
    display: none;
}

.tgm-modal {
    background: var(--tg-surface);
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.16);
    width: 100%;
    max-width: 440px;
    padding: 32px 24px;
    position: relative;
}

.tgm-modal-tabs {
    display: flex;
    border-bottom: 1px solid var(--tg-border);
    margin-bottom: 24px;
}

.tgm-modal-tab {
    flex: 1;
    padding: 12px;
    background: none;
    border: none;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--tg-text-secondary);
    cursor: pointer;
    transition: color 200ms ease;
}

.tgm-modal-tab--active {
    color: var(--tg-text);
    border-bottom: 2px solid var(--tg-accent);
    font-weight: 700;
}

.tgm-modal-panel--hidden {
    display: none;
}

.tgm-modal-subline {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--tg-text-secondary);
    margin-bottom: 20px;
}

.tgm-modal-input {
    width: 100%;
    height: 48px;
    border: 1.5px solid var(--tg-border);
    border-radius: 10px;
    padding: 0 14px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    margin-bottom: 12px;
    outline: none;
    box-sizing: border-box;
    background: var(--tg-bg);
    color: var(--tg-text);
    transition: border-color 200ms ease;
}

.tgm-modal-input:focus {
    border-color: var(--tg-accent);
    background: var(--tg-surface);
}

.tgm-modal-btn {
    width: 100%;
    height: 52px;
    background: var(--tg-accent);
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    margin-top: 4px;
    transition: background 200ms ease;
}

.tgm-modal-btn:hover {
    background: var(--tg-accent-hover);
}

.tgm-modal-btn:disabled {
    opacity: 0.45;
}

.tgm-modal-error {
    color: var(--tg-allergen-text);
    font-size: 13px;
    margin-bottom: 12px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
}

.tgm-modal-error--hidden {
    display: none;
}

.tgm-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--tg-text-secondary);
    line-height: 1;
    transition: color 150ms ease;
}

.tgm-modal-close:hover {
    color: var(--tg-text);
}

.tgm-modal-forgot {
    display: block;
    text-align: center;
    font-size: 13px;
    color: var(--tg-accent);
    margin-top: 12px;
}

.tgm-modal-legal {
    font-size: 12px;
    color: var(--tg-text-secondary);
    text-align: center;
    margin-top: 16px;
}

.tgm-modal-legal a {
    color: var(--tg-accent);
}

/* ==========================================================================
   ORDER CONFIRMATION PAGE
   ========================================================================== */

.tgm-confirmation-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 16px;
}

.tgm-confirmation-header {
    text-align: center;
    margin-bottom: 24px;
}

.tgm-confirmation-check {
    display: block;
    margin: 0 auto 24px;
    width: 64px;
    height: 64px;
}

.tgm-check-circle {
    stroke-dasharray: 184;
    stroke-dashoffset: 184;
    animation: tgmCheckDraw 600ms ease forwards;
}

.tgm-check-mark {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: tgmCheckDraw 600ms ease forwards;
    animation-delay: 120ms;
}

@keyframes tgmCheckDraw {
    to {
        stroke-dashoffset: 0;
    }
}

.tgm-confirmation-title {
    margin: 0 0 10px;
    color: #0A0A0A;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 34px;
    line-height: 1.15;
}

.tgm-confirmation-subline {
    margin: 0;
    color: #0A0A0A;
    opacity: 0.7;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
}

.tgm-confirmation-card {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    padding: 24px;
    margin-bottom: 24px;
}

.tgm-confirmation-card-title {
    margin: 0 0 14px;
    color: #0A0A0A;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 1.25;
}

.tgm-confirmation-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #0A0A0A08;
}

.tgm-confirmation-row:last-child {
    border-bottom: 0;
}

.tgm-confirmation-label {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.45;
    color: #0A0A0A80;
}

.tgm-confirmation-value {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.45;
    color: #0A0A0A;
    text-align: right;
    max-width: 60%;
}

.tgm-confirmation-meal-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tgm-confirmation-meal-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid #0A0A0A08;
}

.tgm-confirmation-meal-row:last-child {
    border-bottom: 0;
}

.tgm-confirmation-meal-qty {
    color: #23A74A;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

.tgm-confirmation-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tgm-confirmation-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid #0A0A0A08;
}

.tgm-confirmation-step:last-child {
    border-bottom: 0;
}

.tgm-confirmation-step-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #23A74A;
    font-size: 24px;
    line-height: 1;
}

.tgm-confirmation-step-text {
    margin: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55;
    color: #0A0A0A;
}

.tgm-confirmation-note {
    margin: 14px 0 0;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55;
    color: #0A0A0A60;
}

.tgm-confirmation-muted {
    margin: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55;
    color: #0A0A0A60;
}

.tgm-confirmation-btn {
    display: inline-flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    padding: 14px 24px;
    border-radius: 100px;
    border: 0;
    background: #23A74A;
    color: #FFFFFF;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
    transition: opacity 200ms ease;
}

.tgm-confirmation-btn:hover {
    opacity: 0.88;
    color: #FFFFFF;
    text-decoration: none;
}

.tgm-confirmation-share {
    text-align: center;
}

@media (min-width: 768px) {
    .tgm-confirmation-wrap {
        padding-top: 56px;
        padding-bottom: 56px;
    }

.tgm-confirmation-btn {
        width: auto;
    }
}

.tgm-product-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.tgm-product-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
    padding: 24px 0;
}

.tgm-product-image-wrap {
    border-radius: 12px;
    overflow: hidden;
}

.tgm-product-image-placeholder {
    background: #F0F0EE;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    text-align: center;
    padding: 24px;
    gap: 8px;
}

.tgm-product-image-placeholder--small {
    min-height: 200px;
}

.tgm-product-image-placeholder-label {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #0A0A0A40;
}

.tgm-product-stage-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.tgm-product-stage-badge {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    color: #FFFFFF;
}

.tgm-product-title {
    margin: 0 0 12px;
    color: #0A0A0A;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 1.2;
}

.tgm-product-short-desc {
    color: #0A0A0A80;
    margin-bottom: 20px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
}

.tgm-product-short-desc p {
    margin: 0;
}

.tgm-product-stats {
    opacity: 1;
    transform: none;
    margin-bottom: 16px;
}

.tgm-product-weight {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #0A0A0A60;
    margin: 0 0 16px;
}

.tgm-product-allergens {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.tgm-product-empty-allergens,
.tgm-product-no-allergens {
    margin: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #0A0A0A60;
}

.tgm-product-no-allergens {
    font-size: 14px;
}

.tgm-product-cta {
    background: #23A74A;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    border: none;
    border-radius: 8px;
    height: 52px;
    padding: 0 32px;
    cursor: pointer;
    width: 100%;
}

.tgm-product-portal-link {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #23A74A;
}

.tgm-product-section {
    padding: 40px 0;
}

.tgm-product-section--grey {
    background: #F8F8F6;
}

.tgm-product-description {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: #0A0A0A;
}

.tgm-product-description p {
    margin: 0 0 16px;
}

.tgm-product-description p:last-child {
    margin-bottom: 0;
}

.tgm-product-nutrition-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.tgm-product-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

.tgm-product-card-headline {
    margin: 0 0 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #0A0A0A;
}

.tgm-product-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #0A0A0A06;
    gap: 12px;
}

.tgm-product-card-row:last-child {
    border-bottom: 0;
}

.tgm-product-card-label {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #0A0A0A80;
}

.tgm-product-card-value {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #0A0A0A;
}

.tgm-product-card-value--pending {
    color: #0A0A0A40;
}

.tgm-product-card-note {
    margin: 12px 0 0;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #0A0A0A60;
}

.tgm-product-prepare-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.tgm-product-step {
    padding: 24px;
    background: #FFFFFF;
    border-radius: 12px;
}

.tgm-product-step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #23A74A;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.tgm-product-step-title {
    margin: 0 0 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #0A0A0A;
}

.tgm-product-step-body {
    margin: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #0A0A0A80;
    line-height: 1.6;
}

.tgm-product-stage-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.tgm-product-stage-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 20px;
    border-top: 3px solid;
}

.tgm-product-stage-card--gentle {
    border-color: var(--stage-gentle);
}

.tgm-product-stage-card--core {
    border-color: var(--stage-core);
}

.tgm-product-stage-card--freedom {
    border-color: var(--stage-freedom);
}

.tgm-product-stage-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
}

.tgm-product-stage-name {
    margin: 0 0 8px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 16px;
}

.tgm-product-stage-desc {
    margin: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #0A0A0A80;
}

.tgm-product-related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.tgm-product-related-card {
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
}

.tgm-product-related-image {
    aspect-ratio: 4/3;
    background: #F0F0EE;
    overflow: hidden;
}

.tgm-product-related-body {
    padding: 16px;
}

.tgm-product-related-name {
    margin: 0 0 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #0A0A0A;
}

.tgm-product-related-link {
    display: inline-block;
    margin-top: 12px;
    color: #23A74A;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
}

.tgm-product-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
}

.tgm-product-qr-label {
    margin-top: 8px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #0A0A0A60;
}

@media (min-width: 768px) {
    .tgm-product-hero {
        grid-template-columns: 55% 45%;
        gap: 48px;
        padding: 48px 0;
    }

    .tgm-product-image-placeholder {
        min-height: 420px;
    }

    .tgm-product-title {
        font-size: 32px;
    }

    .tgm-product-cta {
        width: auto;
    }

    .tgm-product-portal-link {
        text-align: left;
    }

    .tgm-product-section {
        padding: 64px 0;
    }

    .tgm-product-nutrition-grid {
        grid-template-columns: 1fr 1fr;
    }

    .tgm-product-prepare-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tgm-product-stage-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tgm-product-related-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* === PRODUCT PAGE === */

/* Hero grid */
.tgm-product-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    padding: 32px 0 40px;
}
@media (max-width: 768px) {
    .tgm-product-hero { grid-template-columns: 1fr; gap: 24px; padding: 20px 0 24px; }
}

/* Right column sticky on desktop */
.tgm-product-hero-right {
    position: sticky;
    top: 24px;
    align-self: start;
}
@media (max-width: 768px) {
    .tgm-product-hero-right { position: static; }
}

/* Left column: thumbnail strip on left, main image on right */
.tgm-product-hero-left {
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: 12px;
    align-items: start;
}
@media (max-width: 768px) {
    .tgm-product-hero-left { grid-template-columns: 1fr; }
}

/* Main image */
.tgm-carousel-main {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 16px;
    background: #F8F8F6;
    border: 1px solid #E8E8E6;
    position: relative;
}
.tgm-carousel-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tgm-carousel-main--placeholder { display: flex; align-items: center; justify-content: center; }
.tgm-carousel-main--placeholder i { font-size: 80px; color: #C8C8C4; }
@media (max-width: 768px) {
    .tgm-carousel-main { grid-column: 1; grid-row: 1; border-radius: 12px; }
}

/* Vertical thumbnail strip */
.tgm-carousel-thumbnails {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0;
}
.tgm-carousel-thumb {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    flex-shrink: 0;
    transition: border-color 0.15s;
}
.tgm-carousel-thumb:hover { border-color: rgba(35,167,74,0.4); }
.tgm-carousel-thumb.active { border-color: #23A74A; }
.tgm-carousel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 768px) {
    .tgm-carousel-thumbnails {
        grid-column: 1;
        grid-row: 2;
        flex-direction: row;
        margin-top: 10px;
    }
    .tgm-carousel-thumb { width: 60px; height: 60px; }
}

/* Stage selector */
.tgm-stage-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.tgm-stage-btn {
    padding: 6px 16px;
    border-radius: 100px;
    border: 1.5px solid var(--stage-colour);
    background: transparent;
    color: var(--stage-colour);
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    cursor: pointer;
    opacity: 0.55;
    transition: background 180ms ease, color 180ms ease, opacity 180ms ease;
}

.tgm-stage-btn.tgm-stage-btn--active {
    background: var(--stage-colour);
    color: #FFFFFF;
    opacity: 1;
}

/* Title & size */
.tgm-product-title { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 28px; color: #0A0A0A; margin: 0 0 6px; line-height: 1.2; }
.tgm-product-size { font-family: 'Nunito Sans', sans-serif; font-weight: 400; font-size: 14px; color: #0A0A0A; opacity: 0.5; margin: 0 0 16px; }
@media (max-width: 768px) { .tgm-product-title { font-size: 22px; } }

/* Allergens */
.tgm-allergen-block { margin: 14px 0; }
.tgm-allergen-label { color: #DC0032; font-family: 'Nunito Sans', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; display: block; margin-bottom: 8px; }
.tgm-allergen-icons { display: flex; gap: 12px; flex-wrap: wrap; }

.tgm-allergen-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #DC0032;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
}

.tgm-allergen-item i {
    font-size: 14px;
    color: #DC0032;
    flex-shrink: 0;
}

/* Macro strip */
.tgm-macro-strip {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0 0 24px 0;
}

.tgm-macro-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 20px 0 0;
}

.tgm-macro-item:first-child {
    padding-left: 0;
}

.tgm-macro-value {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: #0A0A0A;
    line-height: 1.1;
}

.tgm-macro-number {
    color: #0A0A0A;
}

.tgm-macro-unit {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: rgba(10,10,10,0.4);
}

.tgm-macro-label {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: rgba(10,10,10,0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 3px;
}

.tgm-macro-divider {
    width: 1px;
    height: 32px;
    background: rgba(10,10,10,0.08);
    margin: 0 20px;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .tgm-stage-selector {
        gap: 6px;
        flex-wrap: nowrap;
    }

    .tgm-stage-btn {
        padding: 6px 12px;
        font-size: 12px;
    }

    .tgm-macro-strip {
        gap: 0;
    }

    .tgm-macro-item {
        padding: 0 12px 0 0;
    }

    .tgm-macro-divider {
        margin: 0 12px;
    }

    .tgm-macro-value {
        font-size: 17px;
    }
}

/* GLP-1 badge */
.tgm-product-glp1-badge { display: flex; align-items: center; gap: 10px; margin: 16px 0; }
.tgm-product-glp1-img { width: 44px; height: auto; }
.tgm-product-glp1-text { font-family: 'Nunito Sans', sans-serif; font-weight: 700; font-size: 13px; color: #0A0A0A; opacity: 0.7; }

/* CTA */
.tgm-product-cta {
    display: inline-block;
    background: #23A74A;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
    border-radius: 100px;
    padding: 16px 32px;
    text-decoration: none;
    text-align: center;
    margin-top: 8px;
    transition: background 0.15s, transform 0.15s;
}
.tgm-product-cta:hover { background: #1e9040; transform: translateY(-1px); color: #fff; }
@media (max-width: 768px) { .tgm-product-cta { display: block; width: 100%; box-sizing: border-box; } }

/* Floating sticky CTA (mobile only) */
.tgm-sticky-cta { display: none; }
@media (max-width: 768px) {
    .tgm-sticky-cta {
        display: block;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        background: rgba(255,255,255,0.96);
        backdrop-filter: blur(8px);
        border-top: 1px solid #E8E8E6;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
        z-index: 200;
        transform: translateY(110%);
        transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
    }
    .tgm-sticky-cta.visible { transform: translateY(0); }
    .tgm-sticky-cta .tgm-product-cta { display: block; width: 100%; box-sizing: border-box; margin-top: 0; }
}

/* Description */
.tgm-product-description-section { padding: 24px 0; border-top: 1px solid #F0F0EE; }
.tgm-product-description { font-family: 'Nunito Sans', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.8; color: #0A0A0A; max-width: 680px; }
@media (max-width: 768px) { .tgm-product-description { max-width: 100%; } }

/* Tabs section */
.tgm-product-tabs-section { padding: 24px 0; border-top: 1px solid #F0F0EE; }
.tgm-tabs-nav { display: flex; border-bottom: 1.5px solid #E8E8E6; margin-bottom: 24px; gap: 4px; }
.tgm-tab-btn { padding: 12px 20px; font-family: 'Nunito Sans', sans-serif; font-weight: 700; font-size: 14px; background: none; border: none; color: rgba(10,10,10,0.4); cursor: pointer; border-bottom: 2.5px solid transparent; white-space: nowrap; transition: color 0.15s; }
.tgm-tab-btn:hover { color: rgba(10,10,10,0.7); }
.tgm-tab-btn.active { color: #0A0A0A; border-bottom-color: #23A74A; }
@media (max-width: 768px) { .tgm-tabs-nav { display: none; } }

/* Tab panels — desktop */
.tgm-tab-panel { display: none; }
.tgm-tab-panel.active { display: block; }

/* Accordion — mobile only */
.tgm-accordion-header { display: none; }
@media (max-width: 768px) {
    .tgm-tab-panel { display: block !important; border-top: 1px solid #E8E8E6; }
    .tgm-tab-panel:first-child { border-top: none; }
    .tgm-accordion-body { display: none; padding: 16px 0; }
    .tgm-tab-panel.accordion-open .tgm-accordion-body { display: block; }
    .tgm-accordion-header {
        display: flex;
        width: 100%;
        background: none;
        border: none;
        padding: 16px 0;
        font-family: 'Nunito Sans', sans-serif;
        font-weight: 700;
        font-size: 15px;
        color: #0A0A0A;
        cursor: pointer;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }
    .tgm-accordion-header i {
        font-size: 18px;
        color: #23A74A;
        transition: transform 0.2s;
        flex-shrink: 0;
    }
    .tgm-tab-panel.accordion-open .tgm-accordion-header i { transform: rotate(180deg); }
}

/* Nutrition table */
.tgm-nutrition-table { width: 100%; border-collapse: collapse; }
.tgm-nutrition-table tr:nth-child(even) { background: #F8F8F6; }
.tgm-nutrition-table td { padding: 10px 14px; font-family: 'Nunito Sans', sans-serif; font-size: 14px; border-bottom: 0.5px solid #E8E8E6; }
.tgm-nutrition-protein { border-left: 3px solid #23A74A; background: rgba(35,167,74,0.06) !important; }

/* Instructions */
.tgm-instructions-list { padding-left: 0; list-style: none; margin: 0; counter-reset: steps; }
.tgm-instructions-list li { font-family: 'Nunito Sans', sans-serif; font-size: 15px; line-height: 1.8; color: #0A0A0A; margin-bottom: 10px; padding-left: 0; display: flex; gap: 10px; align-items: flex-start; }
.tgm-instructions-list li:not(.tgm-instruction-warning)::before { content: counter(steps); counter-increment: steps; background: #F0F0EE; color: #0A0A0A; width: 24px; height: 24px; border-radius: 50%; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 4px; }
.tgm-instruction-warning { background: rgba(220,0,50,0.06); border-left: 3px solid #DC0032; padding: 10px 14px; border-radius: 8px; color: #DC0032; font-family: 'Nunito Sans', sans-serif; font-size: 14px; line-height: 1.6; align-items: center; gap: 8px; margin-bottom: 14px; }
.tgm-storage-note { font-family: 'Nunito Sans', sans-serif; font-weight: 400; font-size: 13px; opacity: 0.45; margin-top: 14px; border-top: 1px solid #F0F0EE; padding-top: 12px; }

/* Health disclaimer — inline below tabs */
.tgm-health-section { padding: 0 0 24px; }
.tgm-health-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0;
    margin: 16px 0;
    background: none;
    border: none;
}

.tgm-health-disclaimer i {
    color: #DC0032;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

.tgm-health-disclaimer p {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: rgba(10,10,10,0.45);
    line-height: 1.6;
    margin: 0;
}

/* USP section */
.tgm-usp-section { padding: 32px 0; border-top: 1px solid #F0F0EE; }
.tgm-usp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; text-align: center; }
@media (max-width: 768px) {
    .tgm-usp-grid {
        display: flex;
        overflow-x: auto;
        gap: 20px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tgm-usp-grid::-webkit-scrollbar { display: none; }
    .tgm-usp-item { min-width: 72px; flex-shrink: 0; }
}
.tgm-usp-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tgm-usp-label { font-family: 'Nunito Sans', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #0A0A0A; }

/* Marquee */
.tgm-marquee-section { width: 100%; margin: 8px 0; }
.tgm-marquee-wrapper { background: #23A74A; overflow: hidden; padding: 14px 0; }
.tgm-marquee-track { display: inline-block; white-space: nowrap; animation: tgmMarquee 80s linear infinite; }
.tgm-marquee-wrapper:hover .tgm-marquee-track { animation-play-state: paused; }
@keyframes tgmMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tgm-marquee-text { color: white; font-family: 'Nunito Sans', sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em; padding: 0 24px; display: inline; }

/* Reviews */
.tgm-reviews-section { padding: 32px 0; border-top: 1px solid #F0F0EE; }
.tgm-reviews-empty { text-align: center; font-family: 'Nunito Sans', sans-serif; font-weight: 400; font-size: 14px; opacity: 0.4; padding: 24px 0; }
.tgm-reviews-section .commentlist { list-style: none; padding: 0; margin: 0; }
.tgm-reviews-section .comment { background: white; border: 0.5px solid #E8E8E6; border-radius: 12px; padding: 20px 24px; margin-bottom: 16px; }
.tgm-reviews-section .woocommerce-review__author { font-family: 'Nunito Sans', sans-serif; font-weight: 700; font-size: 14px; color: #0A0A0A; margin: 0 0 4px; display: block; }
.tgm-reviews-section .star-rating { color: #23A74A; margin-bottom: 8px; }
.tgm-reviews-section .description { font-family: 'Nunito Sans', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.7; color: #0A0A0A; }
.tgm-reviews-section .description p { margin: 0; }

/* Related meals */
.tgm-related-section { padding: 32px 0; border-top: 1px solid #F0F0EE; }
.tgm-related-headline { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 22px; color: #0A0A0A; margin: 0 0 20px; }
.tgm-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 768px) {
    .tgm-related-grid { display: flex; overflow-x: auto; gap: 14px; padding-bottom: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .tgm-related-grid::-webkit-scrollbar { display: none; }
    .tgm-related-grid .tgm-related-card { min-width: 180px; }
}
.tgm-related-card { background: white; border: 1px solid #E8E8E6; border-radius: 14px; overflow: hidden; transition: box-shadow 0.2s, transform 0.2s; }
.tgm-related-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }
.tgm-related-image-link { display: block; }
.tgm-related-image { aspect-ratio: 4/3; background: #F8F8F6; overflow: hidden; }
.tgm-related-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.tgm-related-card:hover .tgm-related-image img { transform: scale(1.03); }
.tgm-related-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.tgm-related-body { padding: 14px; }
.tgm-related-name { font-family: 'Nunito Sans', sans-serif; font-weight: 700; font-size: 14px; color: #0A0A0A; margin: 0 0 6px; line-height: 1.3; }
.tgm-related-macros { display: flex; gap: 10px; font-family: 'Nunito Sans', sans-serif; font-size: 12px; color: #0A0A0A; opacity: 0.55; margin-bottom: 10px; flex-wrap: wrap; }
.tgm-related-macros span { display: flex; align-items: center; gap: 3px; }
.tgm-related-allergens { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.tgm-related-cta { display: inline-block; font-family: 'Nunito Sans', sans-serif; font-weight: 700; font-size: 13px; color: #23A74A; text-decoration: none; border: 1.5px solid #23A74A; border-radius: 100px; padding: 6px 14px; transition: background 0.15s, color 0.15s; }
.tgm-related-cta:hover { background: #23A74A; color: white; }

/* Why section */
.tgm-why-section { background: #F8F8F6; padding: 64px 24px; text-align: center; }
.tgm-why-logo { margin-bottom: 12px; }
.tgm-why-logo-image { max-width: 200px; height: auto; }
.tgm-why-headline { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 28px; color: #0A0A0A; margin: 0 0 8px; }
.tgm-stage-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 32px 0; text-align: left; }
@media (max-width: 768px) { .tgm-stage-cards { grid-template-columns: 1fr; } }
.tgm-stage-card-why { background: white; border-radius: 12px; padding: 24px; border: 0.5px solid #E8E8E6; }
.tgm-stage-banner { width: 100%; max-width: 180px; height: auto; margin-bottom: 10px; display: block; }
.tgm-stage-card-name { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 15px; margin: 0 0 6px; }
.tgm-stage-card-desc { font-family: 'Nunito Sans', sans-serif; font-weight: 400; font-size: 14px; color: #0A0A0A; opacity: 0.7; margin: 0; line-height: 1.6; }
.tgm-why-cta { display: inline-block; background: #23A74A; color: #FFFFFF; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 15px; border-radius: 100px; padding: 14px 32px; text-decoration: none; margin-top: 40px; transition: background 0.15s, transform 0.15s; }
.tgm-why-cta:hover { background: #1e9040; transform: translateY(-1px); color: #fff; }

/* ------------------------------
   NEW IMAGE PLACEMENT STYLES
   ------------------------------ */

/* Screen reader only */
.tg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Homepage Hero Badges */
.tg-hero-badges {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.tg-hero-glp1-badge {
    width: 80px;
    height: auto;
}

/* FON Logo Replacement */
.tg-fon-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
@media (max-width: 767px) {
    .tg-fon-logo {
        flex-direction: column;
        gap: 12px;
    }
}
.tg-fon-logo-image {
    max-width: 220px;
    height: auto;
}
.tg-fon-logo-badge {
    width: 70px;
    height: auto;
}

/* Stage Banner Images */
.tg-stage-banner-image {
    width: 100%;
    height: auto;
    border-radius: 4px;
}
.tg-stage-banner-image--tier {
    width: 100%;
    display: block;
    margin-bottom: 0;
}
@media (max-width: 767px) {
    .tg-stage-banner-image--tier {
        width: 100%;
    }
}

.tg-tier-card-subtitle {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #0A0A0A;
    margin: 0 0 10px;
    line-height: 1.4;
}

.tg-tier-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFFFFF;
    border: 1px solid #E0E0DE;
    border-radius: 100px;
    padding: 5px 14px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #0A0A0A;
    margin-bottom: 16px;
}

.tg-tier-pill i {
    font-size: 15px;
    color: #0A0A0A;
}

/* Meal Preview Brand */
.tg-meal-preview-brand {
    margin-bottom: 16px;
    text-align: center;
}
.tg-meal-preview-brand-logo {
    max-width: 180px;
    height: auto;
}

/* Footer GLP-1 Badge */
.tg-footer-glp1-badge {
    width: 50px;
    height: auto;
    margin-bottom: 8px;
    mix-blend-mode: multiply;
}

/* GLP-1 Page Header Badge */
.tg-glp1-header-badge {
    width: 100px;
    height: auto;
    margin-top: 20px;
}

/* GLP-1 Editorial Brand */
.tg-glp1-editorial-brand {
    margin-bottom: 16px;
}
.tg-glp1-editorial-logo {
    max-width: 200px;
    height: auto;
}

/* Stage Card Banners */
.tg-stage-card-banner {
    max-width: 160px;
    margin-bottom: 6px;
}

/* Quiz Stage Banners */
.tg-quiz-stage-banner {
    display: block;
    width: auto;
    max-width: 140px;
    height: 36px;
    object-fit: contain;
    margin: 4px 0;
}

/* About Page Brand */
.tg-about-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.tg-about-brand-logo {
    max-width: 200px;
    height: auto;
}
.tg-about-brand-badge {
    width: 70px;
    height: auto;
}

/* Checkout GLP-1 */
.tg-checkout-glp1 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 24px;
    padding: 12px;
    background: white;
    border-radius: 8px;
}
.tg-checkout-glp1-badge {
    width: 50px;
    height: auto;
    flex-shrink: 0;
}
.tg-checkout-glp1-text {
    margin: 0;
    font-size: 13px;
    opacity: 0.8;
}
.tg-trust-signal--badge {
    align-items: center;
}
.tg-trust-signal-badge {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Product Page GLP-1 Badge */
.tgm-product-glp1-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
}
.tgm-product-glp1-img {
    width: 60px;
    height: auto;
}
.tgm-product-glp1-text {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.8;
}

/* Meals Page Stage Pills — legacy banner image class (kept for safety, no longer in template) */
.tg-stage-pill-banner {
    display: none;
}

/* White background workaround for JPG images */
.tg-white-bg-img {
    background: white;
    border-radius: 6px;
    padding: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* ==========================================================================
   Meals Page — Mobile Refinements
   ========================================================================== */

/* Horizontal-scroll filter rows on small screens */
@media (max-width: 559px) {
    .tg-stage-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .tg-stage-pills::-webkit-scrollbar {
        display: none;
    }

    .tg-protein-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .tg-protein-filter::-webkit-scrollbar {
        display: none;
    }

    .tg-stage-pill,
    .tg-filter-chip {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Protein indicators: compact on mobile */
    .tg-protein-indicators {
        gap: 6px 10px;
    }

    .tg-protein-indicator {
        font-size: 10px;
        padding: 2px 8px 2px 5px;
    }

    .tg-protein-ind-dot {
        width: 5px;
        height: 5px;
    }

    /* Larger tap targets */
    .tg-qty-btn {
        width: 36px;
        height: 36px;
    }

    /* Full safe-area padding on sticky bar */
    .tg-sticky-inner {
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }

    /* Single column forced */
    .tg-meals-grid {
        grid-template-columns: 1fr;
    }

    /* More breathing room in cards on mobile */
    .tg-meal-card-body {
        padding: 14px 14px 14px;
    }

    /* Stage banner compact on mobile */
    .tg-meals-stage-banner {
        padding: 12px 14px;
    }

    /* Price info stack on very small screens */
    .tg-meals-price-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* Tablet — 2 column, comfortable spacing */
@media (min-width: 560px) and (max-width: 1023px) {
    .tg-meals-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

/* ==========================================================================
   GLP-1 PAGE — REDESIGNED (v2)
   Editorial, magazine-style layout. No AI-default aesthetics.
   ========================================================================== */

/* ── Hero: Asymmetric split with bold typography ── */
.tg-glp1-hero {
    background: #0A0A0A;
    padding: 120px 24px 80px;
    position: relative;
    overflow: hidden;
}

.tg-glp1-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 45%;
    height: 100%;
    background: #111111;
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}

.tg-glp1-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .tg-glp1-hero-inner {
        grid-template-columns: 1.2fr 1fr;
        gap: 80px;
        align-items: end;
    }
}

.tg-glp1-hero-eyebrow {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #23A74A;
    display: block;
    margin-bottom: 20px;
}

.tg-glp1-hero-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.05;
    color: #FFFFFF;
    margin: 0 0 24px;
    letter-spacing: -0.03em;
}

.tg-glp1-hero-accent {
    color: #ADCB3E;
}

.tg-glp1-hero-lead {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255,255,255,0.55);
    margin: 0 0 32px;
    max-width: 480px;
}

.tg-glp1-hero-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tg-glp1-hero-badge {
    width: 52px;
    height: auto;
}

.tg-glp1-hero-meta-text {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.02em;
}

/* Right column: stat row */
.tg-glp1-hero-stat-row {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 768px) {
    .tg-glp1-hero-stat-row {
        align-items: flex-end;
        padding-bottom: 8px;
    }
}

.tg-glp1-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media (min-width: 768px) {
    .tg-glp1-hero-stat {
        align-items: flex-end;
        text-align: right;
    }
}

.tg-glp1-hero-stat-num {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(32px, 4vw, 48px);
    color: #FFFFFF;
    letter-spacing: -0.02em;
    line-height: 1;
}

.tg-glp1-hero-stat-label {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

@media (max-width: 767px) {
    .tg-glp1-hero {
        padding: 100px 24px 48px;
    }

    .tg-glp1-hero::before {
        display: none;
    }

    .tg-glp1-hero-stat-row {
        flex-direction: row;
        gap: 32px;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 24px;
    }

    .tg-glp1-hero-stat-num {
        font-size: 28px;
    }
}

/* ── Editorial v2: Magazine two-column with pull quote ── */
.tg-glp1-editorial-v2 {
    padding: 100px 24px;
    background: #FFFFFF;
}

.tg-glp1-editorial-v2-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}

@media (min-width: 768px) {
    .tg-glp1-editorial-v2-inner {
        grid-template-columns: 1fr 1.2fr;
        gap: 100px;
        align-items: start;
    }
}

.tg-glp1-editorial-v2-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(28px, 3.5vw, 42px);
    line-height: 1.15;
    color: #0A0A0A;
    margin: 16px 0 0;
    letter-spacing: -0.02em;
}

.tg-glp1-editorial-v2-body {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    margin: 0 0 20px;
}

.tg-glp1-editorial-v2-quote {
    margin: 32px 0;
    padding: 24px 0 24px 24px;
    border-left: 3px solid #23A74A;
    background: none;
}

.tg-glp1-editorial-v2-quote p {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 20px;
    line-height: 1.5;
    color: #0A0A0A;
    margin: 0;
}

.tg-glp1-editorial-v2-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #E8E8E6;
}

.tg-glp1-editorial-v2-logo {
    max-width: 160px;
    height: auto;
}

.tg-glp1-editorial-v2-brand span {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #888;
}

@media (max-width: 767px) {
    .tg-glp1-editorial-v2 {
        padding: 64px 24px;
    }

    .tg-glp1-editorial-v2-quote p {
        font-size: 18px;
    }

    .tg-glp1-editorial-v2-brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ── Risks v2: Dark horizontal band with numbered items ── */
.tg-glp1-risks-v2 {
    background: #111111;
    padding: 100px 24px;
}

.tg-glp1-risks-v2-inner {
    max-width: 1140px;
    margin: 0 auto;
}

.tg-glp1-risks-v2-header {
    margin-bottom: 64px;
}

.tg-glp1-risks-v2-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(28px, 3.5vw, 40px);
    line-height: 1.15;
    color: #FFFFFF;
    margin: 16px 0 0;
    letter-spacing: -0.02em;
}

.tg-glp1-risks-v2-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tg-glp1-risk-v2-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 32px;
    padding: 40px 0;
    align-items: start;
}

.tg-glp1-risk-v2-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
}

.tg-glp1-risk-v2-num {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #23A74A;
    letter-spacing: 0.1em;
    padding-top: 4px;
}

.tg-glp1-risk-v2-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: #FFFFFF;
    margin: 0 0 12px;
}

.tg-glp1-risk-v2-desc {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,0.5);
    margin: 0 0 16px;
    max-width: 600px;
}

.tg-glp1-risk-v2-desc strong {
    color: rgba(255,255,255,0.75);
    font-weight: 600;
}

.tg-glp1-risk-v2-solution {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(35, 167, 74, 0.12);
    border: 1px solid rgba(35, 167, 74, 0.25);
    border-radius: 8px;
}

.tg-glp1-risk-v2-solution i {
    font-size: 18px;
    color: #23A74A;
}

.tg-glp1-risk-v2-solution span {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}

.tg-glp1-risk-v2-solution strong {
    color: #FFFFFF;
    font-weight: 700;
}

@media (max-width: 767px) {
    .tg-glp1-risks-v2 {
        padding: 64px 24px;
    }

    .tg-glp1-risk-v2-item {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 32px 0;
    }

    .tg-glp1-risks-v2-header {
        margin-bottom: 24px;
    }
}

/* ── Stages v2: Vertical timeline instead of cards ── */
.tg-glp1-stages-v2 {
    padding: 100px 24px;
    background: #F8F8F6;
}

.tg-glp1-stages-v2-inner {
    max-width: 800px;
    margin: 0 auto;
}

.tg-glp1-stages-v2-header {
    text-align: center;
    margin-bottom: 64px;
}

.tg-glp1-stages-v2-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(28px, 3.5vw, 40px);
    line-height: 1.15;
    color: #0A0A0A;
    margin: 16px 0 12px;
    letter-spacing: -0.02em;
}

.tg-glp1-stages-v2-sub {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #666;
    margin: 0;
}

.tg-glp1-stages-v2-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tg-glp1-stage-v2 {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 32px;
    padding: 40px 0;
    align-items: start;
}

.tg-glp1-stage-v2-connector {
    width: 2px;
    height: 48px;
    background: #E0E0DE;
    margin-left: 27px;
}

.tg-glp1-stage-v2-marker {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tg-glp1-stage-v2-marker--gentle { background: var(--stage-gentle); }
.tg-glp1-stage-v2-marker--core { background: var(--stage-core); }
.tg-glp1-stage-v2-marker--freedom { background: var(--stage-freedom); }

.tg-glp1-stage-v2-tag {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #888;
    display: block;
    margin-bottom: 8px;
}

.tg-glp1-stage-v2-banner {
    max-width: 140px;
    height: auto;
    margin-bottom: 12px;
    display: block;
}

.tg-glp1-stage-v2-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: #0A0A0A;
    margin: 0 0 10px;
    line-height: 1.3;
}

.tg-glp1-stage-v2-desc {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin: 0;
}

@media (max-width: 767px) {
    .tg-glp1-stages-v2 {
        padding: 64px 24px;
    }

    .tg-glp1-stage-v2 {
        grid-template-columns: 48px 1fr;
        gap: 20px;
        padding: 32px 0;
    }

    .tg-glp1-stage-v2-marker {
        width: 48px;
        height: 48px;
    }

    .tg-glp1-stage-v2-connector {
        margin-left: 23px;
        height: 36px;
    }
}

/* ── Trust: Full-bleed image + text band ── */
.tg-glp1-trust {
    background: #FFFFFF;
}

.tg-glp1-trust-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .tg-glp1-trust-inner {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
}

.tg-glp1-trust-image {
    position: relative;
    min-height: 320px;
}

.tg-glp1-trust-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 320px;
}

.tg-glp1-trust-content {
    padding: 64px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tg-glp1-trust-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.2;
    color: #0A0A0A;
    margin: 0 0 20px;
    letter-spacing: -0.02em;
}

.tg-glp1-trust-body {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    margin: 0 0 28px;
}

.tg-glp1-trust-cta {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    background: #0A0A0A;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
    border-radius: 100px;
    transition: background 200ms ease, transform 200ms ease;
    width: fit-content;
}

.tg-glp1-trust-cta:hover {
    background: #23A74A;
    color: #FFFFFF;
    text-decoration: none;
    transform: translateY(-1px);
}

@media (max-width: 767px) {
    .tg-glp1-trust-content {
        padding: 48px 24px;
    }
}

/* ── Disclaimer v2: Clean inline notice ── */
.tg-glp1-disclaimer-v2 {
    padding: 48px 24px;
    background: #F0F0EE;
}

.tg-glp1-disclaimer-v2-inner {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.tg-glp1-disclaimer-v2-inner i {
    font-size: 20px;
    color: #888;
    flex-shrink: 0;
    margin-top: 2px;
}

.tg-glp1-disclaimer-v2-inner p {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.7;
    color: #777;
    margin: 0;
}

.tg-glp1-disclaimer-v2-inner strong {
    color: #555;
    font-weight: 600;
}

/* ── CTA: Full-bleed dark finale ── */
.tg-glp1-cta {
    background: #0A0A0A;
    padding: 120px 24px;
    text-align: center;
}

.tg-glp1-cta-inner {
    max-width: 640px;
    margin: 0 auto;
}

.tg-glp1-cta-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    color: #FFFFFF;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}

.tg-glp1-cta-sub {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 17px;
    color: rgba(255,255,255,0.4);
    margin: 0 0 40px;
}

.tg-glp1-cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 18px 40px;
    background: #23A74A;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    text-decoration: none;
    border-radius: 100px;
    transition: background 200ms ease, transform 200ms ease;
}

.tg-glp1-cta-btn:hover {
    background: #1e8f3f;
    color: #FFFFFF;
    text-decoration: none;
    transform: translateY(-2px);
}

@media (max-width: 767px) {
    .tg-glp1-cta {
        padding: 80px 24px;
    }

    .tg-glp1-cta-btn {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }
}

/* ============================================================
   GLOBAL OVERRIDE — Stop dark green following the cursor
   (Storefront parent theme inherits accent colour for
   ::selection, focus outlines and tap highlights.)
   ============================================================ */

::selection {
    background: rgba(35, 167, 74, 0.22) !important;
    color: inherit !important;
    text-shadow: none !important;
}
::-moz-selection {
    background: rgba(35, 167, 74, 0.22) !important;
    color: inherit !important;
    text-shadow: none !important;
}

/* ---- Kill Storefront's dark-green button hover / active ---- */
body button:hover,
body button:focus,
body button:active,
body .tg-faq-question:hover,
body .tg-faq-question:focus,
body .tg-faq-question:active,
body .tg-faq-question.open,
body .tg-faq-item--open .tg-faq-question,
.tg-faq-question:hover,
.tg-faq-question:focus,
.tg-faq-question:active,
.tg-faq-question.open,
.tg-faq-item--open .tg-faq-question {
    background-color: rgba(35, 167, 74, 0.06) !important;
    background: rgba(35, 167, 74, 0.06) !important;
    color: #0A0A0A !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ---- Focus outline — subtle green, not dark fill ---- */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus {
    outline: 2px solid rgba(35, 167, 74, 0.35) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* ---- Mobile tap flash ---- */
button,
a,
[role="button"],
.tg-faq-question {
    -webkit-tap-highlight-color: rgba(35, 167, 74, 0.10) !important;
}

/* ==========================================================================
   CUSTOMER LOGIN PAGE
   ========================================================================== */

.tg-login-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 80px);
    padding: 60px 20px 80px;
}

.tg-login-card {
    max-width: 480px;
    width: 100%;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
}

.tg-login-eyebrow {
    display: block;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #23A74A;
    margin-bottom: 8px;
}

.tg-login-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 28px;
    color: #0A0A0A;
    margin: 0 0 32px;
    line-height: 1.2;
}

/* -- WooCommerce form overrides inside login card -- */

.tg-login-card .u-columns {
    display: block;
}

.tg-login-card .u-column1 {
    width: 100%;
}

.tg-login-card .u-column2,
.tg-login-card .col-2 {
    display: none;
}

.tg-login-card .u-column1 h2 {
    display: none;
}

.woocommerce-form-login .woocommerce-form__label {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #0A0A0A;
    display: block;
    margin-bottom: 6px;
}

.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-login input[type="email"] {
    width: 100%;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 16px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.woocommerce-form-login input[type="text"]:focus,
.woocommerce-form-login input[type="password"]:focus,
.woocommerce-form-login input[type="email"]:focus {
    border-color: #23A74A;
    box-shadow: 0 0 0 3px rgba(35, 167, 74, 0.15);
}

.woocommerce-form-login .woocommerce-button {
    background: #23A74A;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 14px 24px;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    transition: background 200ms ease;
    text-shadow: none;
    box-shadow: none;
}

.woocommerce-form-login .woocommerce-button:hover,
.woocommerce-form-login .woocommerce-button:focus {
    background: #1d8f3f;
    color: #FFFFFF;
    box-shadow: none;
    text-shadow: none;
}

.woocommerce-form-login .woocommerce-LostPassword {
    font-size: 13px;
    color: #23A74A;
    text-align: right;
    display: block;
    margin-top: 8px;
}

.woocommerce-form-login .woocommerce-LostPassword a {
    color: #23A74A;
    text-decoration: none;
}

.woocommerce-form-login .woocommerce-LostPassword a:hover {
    text-decoration: underline;
}

.woocommerce-form-login .woocommerce-form__label-for-checkbox {
    font-size: 13px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
}

.woocommerce-form-login .woocommerce-privacy-policy-text {
    display: none;
}

.tg-login-register-link {
    text-align: center;
    margin-top: 24px;
}

.tg-login-register-link a {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #23A74A;
    text-decoration: none;
    transition: color 200ms ease;
}

.tg-login-register-link a:hover {
    text-decoration: underline;
    color: #1d8f3f;
}

/* -- WooCommerce form row cleanup inside login card -- */

.tg-login-card .woocommerce-form-row {
    width: 100%;
    float: none;
    margin-bottom: 16px;
}

.tg-login-card .form-row {
    width: 100%;
    float: none;
    margin-bottom: 16px;
}

.tg-login-card .woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.tg-login-card .clear {
    display: none;
}

/* -- Mobile: tighter card padding -- */

@media screen and (max-width: 480px) {
    .tg-login-card {
        padding: 24px;
    }

    .tg-login-heading {
        font-size: 24px;
    }

    .tg-login-section {
        padding: 40px 16px 60px;
    }
}

/* === CUSTOMER PORTAL REDESIGN === */

/* FIX 1 — Hide admin bar offset */
html.wp-toolbar {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#wpadminbar {
    display: none !important;
}

.page-template-page-portal,
.page-template-page-portal body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* FIX 2 — Desktop tab navigation */
.tgm-portal-top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
    background: white;
    border-bottom: 1px solid #EFEFEF;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.tgm-portal-top-nav .tg-portal-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tgm-portal-top-nav .tg-portal-nav-links {
    display: flex;
    align-items: center;
    gap: 0;
}
.tgm-portal-top-nav .tg-portal-nav-link {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #0A0A0A;
    opacity: 1;
    text-decoration: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    margin-left: 32px;
    border-radius: 0;
    transition: color 200ms ease, border-color 200ms ease;
    line-height: 64px;
    display: inline-block;
}
.tgm-portal-top-nav .tg-portal-nav-link:hover {
    background: none;
    opacity: 1;
    color: #23A74A;
}
.tgm-portal-top-nav .tg-portal-nav-link.active {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: #23A74A;
    background: none;
    border-bottom: 2px solid #23A74A;
}
.tgm-portal-top-nav .tg-portal-logout {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    color: #DC0032 !important;
    opacity: 1 !important;
}
.tgm-portal-top-nav .tg-portal-logout:hover {
    background: none !important;
    opacity: 1 !important;
    color: #DC0032 !important;
}

/* FIX 3 — Mobile bottom navigation */
.tgm-portal-bottom-nav {
    display: none;
}
@media (max-width: 767px) {
    .tgm-portal-top-nav {
        display: none;
    }
    .tgm-portal-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: white;
        border-top: 1px solid #EFEFEF;
        height: 64px;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .tgm-portal-bottom-nav-inner {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        height: 100%;
    }
    .tgm-portal-bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        flex: 1;
        height: 100%;
        text-decoration: none;
        color: #888888;
        background: none;
        border: none;
        border-radius: 0;
        cursor: pointer;
        padding: 0;
        font-family: 'Nunito Sans', sans-serif;
        font-weight: 500;
        font-size: 10px;
        line-height: 1;
        opacity: 1;
    }
    .tgm-portal-bottom-nav-item i {
        font-size: 22px;
    }
    .tgm-portal-bottom-nav-item:hover {
        background: none;
        color: #888888;
    }
    .tgm-portal-bottom-nav-item.active {
        color: #23A74A;
    }
    .tgm-portal-bottom-nav-item.active:hover {
        color: #23A74A;
    }
    .tgm-portal-bottom-nav-item.tgm-portal-bottom-nav-logout {
        color: #DC0032;
    }
    .tgm-portal-bottom-nav-item.tgm-portal-bottom-nav-logout:hover {
        color: #DC0032;
    }
    .tg-portal-body {
        padding-top: 0;
        padding-bottom: 80px;
    }
}

/* FIX 4 — My Box section */
body.page-template-page-portal {
    background: #F8F8F6;
}

/* Welcome banner */
.tg-portal-status-strip {
    background: #FFFFFF;
    border-radius: 12px;
    border: none;
    padding: 20px 24px;
    margin-bottom: 20px;
}
.tg-portal-status-strip-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.tg-portal-greeting {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 28px;
    color: #0A0A0A;
    gap: 12px;
}
.tg-sub-badge {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
    background: rgba(35,167,74,0.1);
    color: #23A74A;
    border-radius: 20px;
    padding: 3px 10px;
}
.tg-sub-badge.tg-sub-on-hold {
    background: rgba(184,134,11,0.1);
    color: #B8860B;
}
.tg-sub-badge.tg-sub-cancelled {
    background: rgba(220,0,50,0.08);
    color: #DC0032;
}
.tg-portal-cutoff-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    margin-top: 0;
}
.tg-cutoff-badge {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 100px;
    background: #F0FAF4;
    color: #23A74A;
}
.tg-cutoff-locked {
    background: #F8F8F6;
    color: #0A0A0A;
    opacity: 0.6;
}
.tg-cutoff-countdown {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #888888;
    opacity: 1;
    white-space: nowrap;
}

/* Upcoming box card */
.tg-portal-card {
    background: #FFFFFF;
    border-radius: 12px;
    border: none;
    padding: 24px;
}
.tg-portal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}
.tg-portal-card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: #0A0A0A;
    margin: 0 0 4px;
}
.tg-portal-card-sub {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #888888;
    opacity: 1;
    margin: 0;
}
.tg-portal-card-header .tg-btn-secondary,
.tg-portal-card-header .tg-portal-locked-msg {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #23A74A;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
}
.tg-portal-card-header .tg-portal-locked-msg {
    color: #888888;
}
.tg-portal-card-header .tg-btn-secondary i,
.tg-portal-card-header .tg-portal-locked-msg i {
    font-size: 16px;
}

/* Meal grid */
.tg-portal-meal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 768px) {
    .tg-portal-meal-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (min-width: 1024px) {
    .tg-portal-meal-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.tg-portal-meal-card {
    background: #FFFFFF;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #F0F0F0;
    position: relative;
}
.tg-portal-meal-img-wrap {
    position: relative;
    width: 100%;
}
.tg-portal-meal-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.tg-portal-meal-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #F8F8F6;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tg-portal-meal-body {
    padding: 10px 10px 8px;
}
.tg-portal-meal-name {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #0A0A0A;
    margin: 0 0 4px;
    line-height: 1.3;
}
.tg-portal-meal-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
    margin: 0;
}
.tg-portal-meal-tags .tg-allergen-pill {
    background: rgba(220,0,50,0.08);
    color: #DC0032;
    font-size: 11px;
    border-radius: 4px;
    padding: 2px 6px;
    border: none;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
}
.tg-portal-qty-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: #23A74A;
    color: #FFFFFF;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 11px;
    border-radius: 4px;
    padding: 2px 6px;
    z-index: 2;
}

/* FIX 5 — Manage Subscription section */
.tg-portal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
.tg-portal-action-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid #F0F0F0;
    border-radius: 12px;
    background: #FFFFFF;
    cursor: pointer;
    text-decoration: none;
    transition: background 200ms ease;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}
.tg-portal-action-btn:hover,
.tg-portal-action-btn:focus {
    border-color: #F0F0F0 !important;
    background: #FAFAFA;
    outline: none;
}
.tg-portal-action-btn i {
    font-size: 24px;
    color: #23A74A;
    flex-shrink: 0;
}
.tg-portal-action-btn strong {
    display: block;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #0A0A0A;
    margin-bottom: 2px;
}
.tg-portal-action-btn span {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #888888;
    opacity: 1;
}
/* Chevron via inline SVG pseudo-element */
.tg-portal-action-btn::after {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23CCCCCC' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80A8,8,0,0,1,88,208V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: auto;
    flex-shrink: 0;
}
/* Cancel subscription card */
.tg-portal-action-btn.tg-action-danger {
    margin-top: 8px;
    background: rgba(220,0,50,0.04);
    border: 1px solid rgba(220,0,50,0.12);
}
.tg-portal-action-btn.tg-action-danger:hover,
.tg-portal-action-btn.tg-action-danger:focus {
    background: rgba(220,0,50,0.08);
    border-color: rgba(220,0,50,0.12) !important;
}
.tg-portal-action-btn.tg-action-danger i {
    color: #DC0032;
}
.tg-portal-action-btn.tg-action-danger strong {
    color: #DC0032;
}
.tg-portal-action-btn.tg-action-danger::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23CCCCCC' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80A8,8,0,0,1,88,208V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E");
}
.tg-portal-action-btn.tg-action-primary {
    border: 1px solid #F0F0F0;
    background: #FFFFFF;
}
.tg-portal-action-btn.tg-action-primary:hover {
    background: #FAFAFA;
}
.tg-portal-action-btn.tg-action-primary i {
    color: #23A74A;
}

/* FIX 6 — Order History section */
.tg-portal-order-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tg-portal-order-row {
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #F0F0F0;
    padding: 16px 20px;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
}
.tg-portal-order-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 1;
    min-width: 0;
}
.tg-portal-order-date {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #888888;
}
.tg-portal-order-num {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0A0A0A;
    opacity: 1;
}
.tg-order-status-badge {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 100px;
    background: #F0F0F0;
    color: #888888;
}
.tg-order-status-badge.tg-status-processing {
    background: rgba(35,167,74,0.1);
    color: #23A74A;
}
.tg-order-status-badge.tg-status-cancelled {
    background: #F0F0F0;
    color: #888888;
}
.tg-portal-order-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.tg-portal-order-thumbs {
    display: flex;
    gap: 0;
}
.tg-portal-order-thumb {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    overflow: hidden;
    background: #F8F8F6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: -8px;
}
.tg-portal-order-thumb:first-child {
    margin-left: 0;
}
.tg-portal-order-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tg-portal-order-thumb i {
    font-size: 14px;
    color: #0A0A0A;
    opacity: 0.2;
}
.tg-thumb-more {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #888888;
    opacity: 1;
    background: #F0F0F0;
}
.tg-portal-order-total {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #0A0A0A;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .tg-portal-order-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .tg-portal-order-right {
        width: 100%;
        justify-content: space-between;
    }
}

/* Order history expandable details */
.tg-portal-order-row {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    cursor: pointer;
}
.tg-portal-order-row:hover {
    border-color: #E0E0E0;
}
.tg-portal-order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 16px 20px;
}
.tg-portal-order-toggle {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: #F0F0F0;
    color: #0A0A0A;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.3s ease;
}
.tg-portal-order-toggle:hover {
    background: #E0E0E0;
}
.tg-portal-order-toggle i {
    font-size: 16px;
    transition: transform 0.3s ease;
}
.tg-portal-order-row.is-open .tg-portal-order-toggle i {
    transform: rotate(180deg);
}
.tg-portal-order-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    border-top: 1px solid transparent;
}
.tg-portal-order-row.is-open .tg-portal-order-details {
    max-height: 1200px;
    border-top-color: #F0F0F0;
}
.tg-portal-order-details-inner {
    padding: 20px;
}
.tg-portal-order-details-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}
.tg-portal-order-details-addresses {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 0;
}
.tg-portal-order-details-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #0A0A0A;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tg-portal-order-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tg-portal-order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #F8F8F6;
    border-radius: 8px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #0A0A0A;
}
.tg-portal-order-item-name {
    font-weight: 600;
}
.tg-portal-order-item-qty {
    font-weight: 500;
    color: #888888;
    margin-left: 4px;
}
.tg-portal-order-item-price {
    font-weight: 700;
    white-space: nowrap;
}
.tg-portal-order-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tg-portal-order-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #555555;
    padding: 4px 0;
}
.tg-portal-order-summary-row span:last-child {
    font-weight: 600;
    white-space: nowrap;
}
.tg-portal-order-grand-total {
    border-top: 1px solid #F0F0F0;
    margin-top: 4px;
    padding-top: 12px;
    font-size: 16px;
    font-weight: 700;
    color: #0A0A0A;
}
.tg-portal-order-discount {
    color: #23A74A;
}
.tg-portal-order-address {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #555555;
    font-style: normal;
}
@media (max-width: 767px) {
    .tg-portal-order-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .tg-portal-order-right {
        width: 100%;
        justify-content: space-between;
    }
    .tg-portal-order-details-grid {
        grid-template-columns: 1fr;
    }
    .tg-portal-order-details-addresses {
        grid-template-columns: 1fr;
    }
}

/* FIX 7 — Account section */
.tg-portal-account-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
@media (min-width: 600px) {
    .tg-portal-account-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.tg-portal-account-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tg-account-label {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 1;
}
.tg-account-value {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #0A0A0A;
}
.tg-portal-inline-link {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #23A74A;
    text-decoration: none;
}
.tg-portal-inline-link:hover {
    text-decoration: underline;
}
/* Password bullet placeholder */
.tg-password-dots {
    font-size: 0;
}
.tg-password-dots::before {
    content: '••••••••';
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #CCCCCC;
    letter-spacing: 2px;
}
/* Phone not set prompt */
.tg-phone-not-set {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #0A0A0A;
}
.tg-phone-not-set a {
    color: #23A74A;
    text-decoration: none;
    font-weight: 600;
}
.tg-phone-not-set a:hover {
    text-decoration: underline;
}

/* Portal body max-width and padding */
.tg-portal-body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 80px;
}
@media (max-width: 767px) {
    .tg-portal-body {
        padding: 16px 16px 80px;
    }
}