/*
 * SAVORE — Food & Recipes HTML Template
 * Version: 1.0
 * Author: ThemeGuri
 *
 * ============================================================
 * TABLE OF CONTENTS
 * ============================================================
 *
 *  1.  CUSTOM PROPERTIES (Design Tokens / CSS Variables)
 *  2.  RESETS & BASE STYLES
 *  3.  LAYOUT ARCHITECTURE (Dashboard, Sidebar, Main Content)
 *  4.  TOP NAVIGATION BAR
 *  5.  HERO SECTION
 *  6.  SIDEBAR NAVIGATION (Accordion, Links, Profile Widget)
 *  7.  RECIPE CARDS & CAROUSELS
 *  8.  MEAL PLAN WIDGETS
 *  9.  FEATURE SECTIONS (Cook Mode, Newsletter, Values)
 * 10.  SHOP & E-COMMERCE (Products, Cart, Checkout, Pricing)
 * 11.  RECIPE PAGES (Single Recipe, Submit Recipe, Reviews)
 * 12.  BLOG / JOURNAL (Single Post, Blog Grid)
 * 13.  AUXILIARY PAGES (Contact, FAQ, About, Services, 404)
 * 14.  AUTHENTICATION PAGES (Login, Register, My Account)
 * 15.  COMING SOON PAGE
 * 16.  COOK MODE (Full-Screen Interactive)
 * 17.  HOME 2 (Light Theme Variant)
 * 18.  HOME 3 (Editorial Dark Variant)
 * 19.  HOME 4 (Cinematic Variant)
 * 20.  MOBILE NAVIGATION & RESPONSIVE OVERRIDES
 * 21.  BACK TO TOP BUTTON
 * 22.  TOAST NOTIFICATIONS & MICRO-INTERACTIONS
 * 23.  AI RECIPE GENERATOR MODAL
 * 24.  SHOP PAGE & CART DRAWER 
 * 25.  UTILITIES & HELPER CLASSES
 *
 * ============================================================
 */

:root {
    /* Colors - Dark Theme */
    --svr-color-bg-dark: #121212;
    --svr-color-sidebar: #0a0a0a;
    --svr-color-text-light: #ffffff;
    --svr-color-text-muted-dark: rgba(255, 255, 255, 0.6);
    --svr-color-border-dark: rgba(255, 255, 255, 0.08);

    /* Colors - Light Theme */
    --svr-color-bg-light: #faf9f6;
    --svr-color-card-light: #ffffff;
    --svr-color-text-dark: #1a1a1a;
    --svr-color-text-muted-light: #666666;
    --svr-color-border-light: rgba(0, 0, 0, 0.08);

    /* Colors - Accents */
    --svr-color-accent-gold: #e6b953;
    --svr-color-accent-green: #2b4c3b;
    --svr-color-accent-green-hover: #1e362a;
    --svr-color-accent-green-light: #f0f7f3;

    /* Typography */
    --svr-font-heading: 'Cormorant', serif;
    --svr-font-body: 'Inter', sans-serif;
    
    /* Radii */
    --svr-radius-sm: 8px;
    --svr-radius-md: 16px;
    --svr-radius-lg: 24px;
    --svr-radius-pill: 9999px;
    
    /* Transitions */
    --svr-transition-fast: 0.2s ease;
}

/* ==========================================================================
   RESETS
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--svr-font-body);
    line-height: 1.5;
    background-color: var(--svr-color-bg-dark);
    color: var(--svr-color-text-light);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

button {
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ==========================================================================
   LAYOUT ARCHITECTURE
   ========================================================================== */

.svr-dashboard {
    display: flex;
    min-height: 100vh;
}

/* 1. Sidebar (Fixed Left) */
.svr-sidebar {
    width: 250px;
    background-color: var(--svr-color-sidebar);
    display: flex;
    flex-direction: column;
    padding: 30px 20px;
    border-right: 1px solid var(--svr-color-border-dark);
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 100;
}

.svr-logo {
    font-family: var(--svr-font-heading);
    font-size: 2.2rem;
    color: var(--svr-color-accent-gold);
    margin-bottom: 40px;
    padding-left: 10px;
    letter-spacing: 0.05em;
}

.svr-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.svr-nav__link {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--svr-radius-md);
    transition: all var(--svr-transition-fast);
    color: var(--svr-color-text-muted-light);
}

.svr-nav__link i {
    width: 20px;
    font-size: 1.1rem;
}

.svr-nav__link:hover, .svr-nav__link--active {
    background: rgba(230, 185, 83, 0.1);
    color: var(--svr-color-accent-gold);
}

.svr-profile-widget {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    margin-bottom: 20px;
}

.svr-profile-widget__img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.svr-profile-widget__info h4 {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.svr-profile-widget__info p {
    font-size: 0.7rem;
    color: var(--svr-color-text-muted-light);
}

.svr-quote-widget {
    padding: 15px;
    border: 1px solid var(--svr-color-border-dark);
    border-radius: var(--svr-radius-md);
    position: relative;
}

.svr-quote-widget p {
    font-size: 0.75rem;
    color: var(--svr-color-text-muted-light);
}

.svr-quote-widget strong {
    display: block;
    font-family: var(--svr-font-heading);
    font-size: 1.1rem;
    color: var(--svr-color-accent-gold);
    margin-top: 5px;
}

/* 2. Main Scrolling Content */
.svr-main-content {
    flex: 1;
    min-height: 100vh;
    background: var(--svr-color-bg-light);
    display: flex;
    flex-direction: column;
    position: relative; /* Fixed absolute positioning bug */
}

/* TOP NAV */
.svr-top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background: var(--svr-color-bg-dark); /* Ensure it matches hero background */
    width: calc(100% - 60px);
    margin: 30px;
    border-radius: 20px;
    z-index: 100;
    position: sticky;
    top: 30px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.svr-top-nav__links {
    display: flex;
    gap: 35px;
}

.svr-top-nav__link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--svr-color-text-light);
    opacity: 0.6;
    transition: all var(--svr-transition-fast);
    position: relative;
    padding-bottom: 5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.svr-top-nav__link:hover, .svr-top-nav__link--active {
    opacity: 1;
    color: var(--svr-color-accent-gold);
}

.svr-top-nav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--svr-color-accent-gold);
    transition: width var(--svr-transition-fast);
}

.svr-top-nav__link:hover::after, .svr-top-nav__link--active::after {
    width: 100%;
}

.svr-top-nav__actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.svr-search-bar {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 10px 20px;
    border-radius: var(--svr-radius-pill);
    color: var(--svr-color-text-light);
}

.svr-search-bar input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--svr-color-text-light);
    margin-left: 10px;
    font-family: var(--svr-font-body);
}

.svr-search-bar input::placeholder {
    color: rgba(255,255,255,0.6);
}

.svr-icon-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--svr-color-text-light);
    position: relative;
    cursor: pointer;
    transition: all var(--svr-transition-fast);
}

.svr-icon-btn:hover {
    background: rgba(255,255,255,0.2);
}

.svr-notification-dot {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 8px;
    height: 8px;
    background: var(--svr-color-accent-green);
    border-radius: 50%;
}

/* HERO SECTION */
.svr-hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 50px;
    background: var(--svr-color-bg-dark);
    color: var(--svr-color-text-light);
}

.svr-hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center !important;
    opacity: 0.9;
    z-index: 1;
}

.svr-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(18,18,18,0.95) 0%, rgba(18,18,18,0.85) 35%, rgba(18,18,18,0.3) 65%, rgba(18,18,18,0) 85%);
    z-index: 2;
}

.svr-hero__content {
    position: relative;
    z-index: 3;
    max-width: 600px;
}

.svr-badge-text {
    color: var(--svr-color-accent-gold);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 15px;
    display: block;
}

.svr-hero__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(3.5rem, 5vw, 5rem);
    line-height: 1.1;
    margin-bottom: 20px;
}

.svr-hero__desc {
    font-size: 1.05rem;
    color: var(--svr-color-text-muted-light);
    line-height: 1.6;
    margin-bottom: 30px;
}

.svr-hero__meta {
    display: flex;
    gap: 25px;
    margin-bottom: 40px;
    font-size: 0.9rem;
    color: var(--svr-color-text-light);
    font-weight: 500;
}

.svr-hero__meta span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.svr-hero__actions {
    display: flex;
    align-items: center;
    gap: 30px;
}

.svr-btn-primary {
    background-color: var(--svr-color-accent-green);
    color: var(--svr-color-text-light);
    padding: 15px 30px;
    border-radius: var(--svr-radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background-color var(--svr-transition-fast);
}

.svr-btn-primary:hover {
    background-color: var(--svr-color-accent-green-hover);
}

.svr-btn-text {
    color: var(--svr-color-text-light);
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: color var(--svr-transition-fast);
}

.svr-btn-text:hover {
    color: var(--svr-color-accent-gold);
}

/* Explore Pill */
.svr-explore-pill {
    position: absolute;
    bottom: -40px; /* Overlaps the bottom section */
    left: 50px;
    right: 50px;
    z-index: 10;
    background: var(--svr-color-text-light);
    border-radius: var(--svr-radius-lg);
    padding: 25px 40px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 40px;
}

.svr-explore-pill__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--svr-color-text-dark);
    text-transform: uppercase;
    width: 100px;
}

.svr-explore-pill__items {
    display: flex;
    justify-content: space-between;
    flex: 1;
}

.svr-mood-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--svr-color-text-muted-light);
    cursor: pointer;
    transition: all var(--svr-transition-fast);
}

.svr-mood-item i {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--svr-color-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all var(--svr-transition-fast);
}

.svr-mood-item:hover {
    color: var(--svr-color-text-dark);
}

.svr-mood-item:hover i {
    background: var(--svr-color-bg-light);
    border-color: var(--svr-color-accent-gold);
    color: var(--svr-color-accent-gold);
}

/* 3. LIGHT DASHBOARD WIDGETS SECTION */
.svr-dashboard-widgets {
    background: var(--svr-color-bg-light);
    padding: 0px 50px 50px 50px; /* Top padding to clear the overlapping pill */
    color: var(--svr-color-text-dark);
}

.svr-widgets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.svr-widgets-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Widget Polish */
.svr-widget {
    background: var(--svr-color-text-light);
    border-radius: var(--svr-radius-md);
    padding: 30px;
    border: 1px solid var(--svr-color-border-light);
}

.svr-widget--premium {
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border: none;
}

.svr-widget--transparent {
    background: transparent;
    border: none;
    padding: 0;
}

.svr-widget__header {
    margin-bottom: 20px;
}

.svr-widget__header h3 {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
}

.svr-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.svr-link-muted {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--svr-color-text-muted-light);
    transition: color var(--svr-transition-fast);
}

.svr-link-muted:hover {
    color: var(--svr-color-accent-gold);
}

.svr-widget__subtitle {
    font-size: 0.85rem;
    color: var(--svr-color-text-muted-light);
    margin-bottom: 20px;
}

.svr-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.svr-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--svr-color-bg-light);
    border: 1px solid var(--svr-color-border-light);
    padding: 8px 15px;
    border-radius: var(--svr-radius-pill);
    font-size: 0.85rem;
    font-weight: 500;
}

.svr-tag i {
    cursor: pointer;
    color: var(--svr-color-text-muted-light);
}

.svr-tag--add {
    background: var(--svr-color-text-light);
    cursor: pointer;
}

.svr-btn-dark {
    background-color: var(--svr-color-text-dark);
    color: var(--svr-color-text-light);
    padding: 12px 25px;
    border-radius: var(--svr-radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background-color var(--svr-transition-fast);
}

.svr-btn-dark:hover {
    background-color: var(--svr-color-text-dark);
}

/* Image Card Widget */
.svr-widget-card {
    position: relative;
    border-radius: var(--svr-radius-md);
    overflow: hidden;
    color: var(--svr-color-text-light);
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 250px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.svr-widget-card__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.svr-widget-card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(18,18,18,0.95), rgba(18,18,18,0.3));
    z-index: 2;
}

.svr-widget-card__content {
    position: relative;
    z-index: 3;
    max-width: 80%;
}

.svr-color-gold {
    color: var(--svr-color-accent-gold) !important;
}

.svr-widget-card__title {
    font-family: var(--svr-font-heading);
    font-size: 2.2rem;
    margin: 15px 0;
    line-height: 1.1;
}

.svr-widget-card__desc {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 20px;
    line-height: 1.5;
}

.svr-btn-gold {
    background-color: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
    padding: 10px 20px;
    border-radius: var(--svr-radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform var(--svr-transition-fast);
}

.svr-btn-gold:hover {
    transform: translateY(-2px);
}

/* Meal List Widget */
.svr-meal-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.svr-meal-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border-radius: var(--svr-radius-md);
    transition: background-color var(--svr-transition-fast);
    cursor: pointer;
}

.svr-meal-item:hover {
    background-color: var(--svr-color-text-light);
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.svr-meal-item__day {
    font-size: 0.8rem;
    font-weight: 700;
    width: 35px;
    color: var(--svr-color-text-dark);
}

.svr-meal-item__img {
    width: 55px;
    height: 55px;
    border-radius: var(--svr-radius-sm);
    object-fit: cover;
}

.svr-meal-item__info h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.svr-meal-item__info p {
    font-size: 0.8rem;
    color: var(--svr-color-text-muted-light);
}

/* ==========================================================================
   FEATURE: POPULAR RIGHT NOW CAROUSEL
   ========================================================================== */

.svr-section-carousel {
    margin-top: 50px;
    margin-bottom: 30px;
}

.svr-carousel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.svr-carousel-header h3 {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--svr-color-text-dark);
}

.svr-carousel-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 20px;
    scroll-behavior: smooth;
    /* Hide scrollbar for a cleaner look */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}

.svr-carousel-track::-webkit-scrollbar {
    display: none;
}

/* RECIPE CARD */
.svr-recipe-card {
    min-width: 260px;
    background: var(--svr-color-text-light);
    border-radius: var(--svr-radius-md);
    border: 1px solid var(--svr-color-border-light);
    overflow: hidden;
    transition: transform var(--svr-transition-fast), box-shadow var(--svr-transition-fast);
    cursor: pointer;
}

.svr-recipe-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}

.svr-recipe-card__media {
    position: relative;
    height: 180px;
}

.svr-recipe-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.svr-recipe-card__bookmark {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--svr-color-text-dark);
    transition: all var(--svr-transition-fast);
}

.svr-recipe-card__bookmark:hover {
    background: var(--svr-color-text-light);
    color: var(--svr-color-accent-gold);
    transform: scale(1.1);
}

.svr-recipe-card__content {
    padding: 20px;
}

.svr-recipe-card__title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--svr-color-text-dark);
    line-height: 1.3;
}

.svr-recipe-card__rating {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--svr-color-text-muted-light);
    margin-bottom: 15px;
}

.svr-recipe-card__rating i {
    color: var(--svr-color-accent-gold);
}

.svr-recipe-card__rating span {
    font-weight: 600;
    color: var(--svr-color-text-dark);
}

.svr-recipe-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--svr-color-border-light);
    padding-top: 15px;
    font-size: 0.75rem;
    color: var(--svr-color-text-muted-light);
    font-weight: 500;
}
/* ==========================================================================
   FEATURE: WEEKLY MEAL PLANNER TIMELINE
   ========================================================================== */

.svr-section-meal-planner {
    background: var(--svr-color-text-light);
    border-radius: var(--svr-radius-lg);
    padding: 40px;
    margin-bottom: 50px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.02);
}

.svr-planner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.svr-planner-header h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--svr-color-text-dark);
}

.svr-timeline {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.svr-timeline::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(0,0,0,0.05);
    z-index: 1;
}

.svr-timeline-node {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.svr-timeline-node__dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--svr-color-text-light);
    border: 2px solid rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--svr-color-text-muted-light);
    transition: all var(--svr-transition-fast);
}

.svr-timeline-node:hover .svr-timeline-node__dot {
    border-color: var(--svr-color-accent-gold);
    color: var(--svr-color-accent-gold);
}

.svr-timeline-node.active .svr-timeline-node__dot {
    background: var(--svr-color-accent-gold);
    border-color: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
    box-shadow: 0 5px 15px rgba(230,185,83,0.3);
}

.svr-timeline-node span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--svr-color-text-muted-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.svr-timeline-node.active span {
    color: var(--svr-color-text-dark);
}

.svr-planner-active-card {
    display: flex;
    gap: 20px;
    background: rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.04);
    padding: 20px;
    border-radius: var(--svr-radius-md);
    align-items: center;
}

.svr-planner-active-card img {
    width: 100px;
    height: 100px;
    border-radius: var(--svr-radius-sm);
    object-fit: cover;
}

.svr-planner-active-card__info h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--svr-color-text-dark);
    margin-bottom: 8px;
}

.svr-planner-active-card__info p {
    font-size: 0.9rem;
    color: var(--svr-color-text-muted-light);
    margin-bottom: 15px;
}

/* ==========================================================================
   FEATURE: MASTERCLASS VIDEO SLIDER
   ========================================================================== */

.svr-section-masterclass {
    background: var(--svr-color-bg-dark);
    border-radius: var(--svr-radius-lg);
    padding: 50px;
    margin-bottom: 50px;
    color: var(--svr-color-text-light);
    overflow: hidden;
}

.svr-masterclass-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px;
}

.svr-masterclass-header h3 {
    font-family: var(--svr-font-heading);
    font-size: 2.2rem;
    color: var(--svr-color-text-light);
    margin: 0;
}

.svr-masterclass-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding-bottom: 20px;
}

.svr-masterclass-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.svr-masterclass-video {
    position: relative;
    border-radius: var(--svr-radius-md);
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    aspect-ratio: 16/9;
    cursor: pointer;
}

.svr-masterclass-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    transition: all 0.5s ease;
}

.svr-masterclass-video:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}

.svr-masterclass-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(230,185,83,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--svr-color-text-dark);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    transition: all var(--svr-transition-fast);
}

.svr-masterclass-video:hover .svr-masterclass-video__play {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--svr-color-accent-gold);
}

.svr-masterclass-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(5px);
    padding: 5px 12px;
    border-radius: var(--svr-radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--svr-color-text-light);
    border: 1px solid rgba(255,255,255,0.1);
}

.svr-masterclass-duration {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0,0,0,0.8);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--svr-color-text-light);
}

.svr-masterclass-info {
    display: flex;
    flex-direction: column;
}

.svr-masterclass-info h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--svr-color-text-light);
    margin-bottom: 5px;
}

.svr-masterclass-info p {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
}

/* ==========================================================================
   FEATURE: DIETARY HUB
   ========================================================================== */

.svr-section-dietary {
    margin-bottom: 50px;
}

.svr-dietary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.svr-dietary-card {
    background: linear-gradient(145deg, #fff, #fafafa);
    border-radius: var(--svr-radius-md);
    padding: 35px 20px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.03);
    transition: box-shadow var(--svr-transition-fast), border-color var(--svr-transition-fast);
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.svr-dietary-card:hover {
    box-shadow: 0 12px 35px rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.08);
}

.svr-dietary-card__icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(0,0,0,0.02);
    transition: background var(--svr-transition-fast);
}

.svr-dietary-card:hover .svr-dietary-card__icon {
    background: rgba(0,0,0,0.05);
}

.svr-dietary-card h4 {
    font-family: var(--svr-font-heading);
    font-size: 1.3rem;
    color: var(--svr-color-text-dark);
    margin: 0;
}

.svr-dietary-card p {
    font-size: 0.85rem;
    color: var(--svr-color-text-muted-light);
    margin: 0;
}

/* ==========================================================================
   FEATURE: SHOP THE KITCHEN (WOOCOMMERCE)
   ========================================================================== */

.svr-section-shop {
    margin-bottom: 50px;
    background: rgba(0,0,0,0.02);
    padding: 40px;
    border-radius: var(--svr-radius-lg);
    border: 1px solid rgba(0,0,0,0.03);
}

.svr-shop-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.svr-shop-card {
    background: var(--svr-color-text-light);
    border-radius: var(--svr-radius-md);
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.03);
    transition: all var(--svr-transition-fast);
}

.svr-shop-card:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

.svr-shop-card__img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.svr-shop-card__content {
    padding: 20px;
}

.svr-shop-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--svr-color-text-dark);
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.svr-shop-card__price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--svr-color-accent-gold);
    margin-bottom: 15px;
}

.svr-shop-card__btn {
    width: 100%;
    padding: 10px;
    background: var(--svr-color-bg-dark);
    color: var(--svr-color-text-light);
    border: none;
    border-radius: var(--svr-radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--svr-transition-fast);
}

.svr-shop-card__btn:hover {
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
}

/* ==========================================================================
   FEATURE: COMMUNITY WALL (MASONRY)
   ========================================================================== */

.svr-section-community {
    margin-bottom: 50px;
}

.svr-masonry-grid {
    column-count: 3;
    column-gap: 20px;
}

.svr-masonry-item {
    background: var(--svr-color-text-light);
    border-radius: var(--svr-radius-md);
    padding: 25px;
    margin-bottom: 20px;
    break-inside: avoid;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.03);
}

.svr-masonry-item__rating {
    color: var(--svr-color-accent-gold);
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.svr-masonry-item__quote {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--svr-color-text-dark);
    font-style: italic;
    margin-bottom: 20px;
}

.svr-masonry-item__user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.svr-masonry-item__user img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.svr-masonry-item__user h5 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--svr-color-text-dark);
    margin-bottom: 2px;
}

.svr-masonry-item__user span {
    font-size: 0.75rem;
    color: var(--svr-color-text-muted-light);
}

.svr-section-creators {
    margin-top: 50px;
    margin-bottom: 50px;
}

.svr-creators-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.svr-creators-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--svr-color-text-dark);
}

.svr-creators-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.svr-creator-card {
    position: relative;
    border-radius: var(--svr-radius-pill);
    overflow: hidden;
    height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 25px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform var(--svr-transition-fast), box-shadow var(--svr-transition-fast);
    cursor: pointer;
}

.svr-creator-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.svr-creator-card__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.5s ease;
}

.svr-creator-card:hover .svr-creator-card__bg {
    transform: scale(1.05);
}

.svr-creator-card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(18,18,18,0.95) 0%, rgba(18,18,18,0.2) 60%, rgba(18,18,18,0) 100%);
    z-index: 2;
}

.svr-creator-card__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.svr-creator-card__name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--svr-color-text-light);
    margin-bottom: 5px;
}

.svr-creator-card__spec {
    font-size: 0.75rem;
    color: var(--svr-color-accent-gold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 15px;
}

.svr-creator-card__btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: var(--svr-color-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    border: 1px solid rgba(255,255,255,0.3);
    transition: all var(--svr-transition-fast);
}

.svr-creator-card:hover .svr-creator-card__btn {
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
    border-color: var(--svr-color-accent-gold);
    transform: scale(1.1);
}

/* ==========================================================================
   FEATURE: GLASSMORPHISM HERO CARD
   ========================================================================== */

.svr-hero-glass-card {
    background: rgba(20, 20, 20, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(230, 185, 83, 0.2);
    border-radius: var(--svr-radius-md);
    padding: 30px;
    max-width: 450px;
    position: relative;
    z-index: 5;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}

.svr-hero-glass-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.svr-hero-glass-card__badge {
    color: var(--svr-color-accent-gold);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.svr-hero-glass-card__bookmark {
    color: rgba(255,255,255,0.7);
    font-size: 1.2rem;
    cursor: pointer;
    transition: color var(--svr-transition-fast);
}

.svr-hero-glass-card__bookmark:hover {
    color: var(--svr-color-accent-gold);
}

/* Flex layout for thumbnail + text */
.svr-hero-glass-card__body {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}

.svr-hero-glass-card__thumb {
    width: 80px;
    height: 80px;
    border-radius: var(--svr-radius-sm);
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.1);
}

.svr-hero-glass-card__title {
    font-family: var(--svr-font-heading);
    font-size: 2.2rem;
    line-height: 1.1;
    color: var(--svr-color-text-light);
    margin-bottom: 5px;
}

.svr-hero-glass-card__meta {
    display: flex;
    gap: 15px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 20px;
}

.svr-hero-glass-card__meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.svr-hero-glass-card__rating {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    color: var(--svr-color-text-light);
}

.svr-hero-glass-card__rating i {
    color: var(--svr-color-accent-gold);
}


/* ==========================================================================
   FEATURE: SMART PANTRY & AI FEATURES
   ========================================================================== */

.svr-section-smart-pantry {
    margin-top: 50px;
    margin-bottom: 50px;
}

.svr-smart-pantry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

/* Pantry Search Box */
.svr-pantry-box {
    background: var(--svr-color-text-light);
    padding: 40px;
    border-radius: var(--svr-radius-md);
    border: 1px solid var(--svr-color-border-light);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.svr-pantry-title {
    font-family: var(--svr-font-heading);
    font-size: clamp(2.2rem, 3vw, 3rem);
    line-height: 1.1;
    margin-bottom: 30px;
    color: var(--svr-color-text-dark);
}

.svr-text-italic-green {
    color: var(--svr-color-accent-green);
    font-style: italic;
    font-weight: 400;
}

.svr-pantry-search {
    display: flex;
    align-items: center;
    background: var(--svr-color-bg-light);
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-pill);
    padding: 15px 25px;
    margin-bottom: 40px;
    transition: border-color var(--svr-transition-fast);
}

.svr-pantry-search:focus-within {
    border-color: var(--svr-color-accent-gold);
}

.svr-pantry-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--svr-color-text-dark);
    font-family: var(--svr-font-body);
    font-size: 0.95rem;
}

.svr-pantry-search i {
    color: var(--svr-color-text-muted-light);
    font-size: 1.1rem;
}

/* Ingredient Circles */
.svr-ingredient-circles {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.svr-ingredient-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform var(--svr-transition-fast);
}

.svr-ingredient-circle:hover {
    transform: translateY(-3px);
}

.svr-ingredient-circle__icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--svr-color-bg-light);
    border: 1px solid var(--svr-color-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all var(--svr-transition-fast);
}

.svr-ingredient-circle:hover .svr-ingredient-circle__icon {
    border-color: var(--svr-color-accent-gold);
    background: var(--svr-color-text-light);
    box-shadow: 0 5px 15px rgba(230, 185, 83, 0.2);
}

.svr-ingredient-circle span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--svr-color-text-muted-light);
    transition: color var(--svr-transition-fast);
}

.svr-ingredient-circle:hover span {
    color: var(--svr-color-text-dark);
}

/* AI & Utility Grid */
.svr-ai-features-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.svr-ai-banner {
    background: var(--svr-color-text-light);
    border-radius: var(--svr-radius-md);
    border: 1px solid var(--svr-color-border-light);
    padding: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    position: relative;
    overflow: hidden;
}

.svr-ai-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    background: radial-gradient(circle, rgba(230,185,83,0.1) 0%, rgba(255,255,255,0) 70%);
}

.svr-ai-banner__content {
    max-width: 60%;
    position: relative;
    z-index: 2;
}

.svr-ai-banner__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--svr-color-text-dark);
    margin-bottom: 10px;
}

.svr-ai-banner__desc {
    font-size: 0.85rem;
    color: var(--svr-color-text-muted-light);
    margin-bottom: 20px;
    line-height: 1.5;
}

.svr-ai-robot {
    font-size: 4rem;
    position: relative;
    z-index: 2;
    animation: svr-float 3s ease-in-out infinite;
}

@keyframes svr-float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.svr-utility-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    flex: 1;
}

.svr-utility-card {
    background: var(--svr-color-text-light);
    border-radius: var(--svr-radius-md);
    border: 1px solid var(--svr-color-border-light);
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
    cursor: pointer;
    transition: all var(--svr-transition-fast);
}

.svr-utility-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
    border-color: var(--svr-color-accent-gold);
}

.svr-utility-card i {
    font-size: 1.5rem;
    color: var(--svr-color-accent-green);
    background: var(--svr-color-accent-green-light);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svr-utility-card h4 {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--svr-color-text-dark);
}

.svr-utility-card p {
    font-size: 0.7rem;
    color: var(--svr-color-text-muted-light);
    line-height: 1.4;
}

/* ==========================================================================
   FEATURE: COOK MODE TEASER BANNER
   ========================================================================== */

.svr-section-cook-mode {
    margin-top: 50px;
    margin-bottom: 50px;
}

.svr-cook-mode-card {
    background: var(--svr-color-bg-dark);
    color: var(--svr-color-text-light);
    border-radius: var(--svr-radius-lg);
    padding: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

.svr-cook-mode-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 80% 50%, rgba(230,185,83,0.15) 0%, rgba(18,18,18,0) 60%);
    z-index: 1;
}

.svr-cook-mode-card__content {
    position: relative;
    z-index: 2;
    max-width: 55%;
}

.svr-cook-mode-card__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--svr-color-text-light);
}

.svr-cook-mode-card__desc {
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 35px;
    line-height: 1.6;
}

.svr-btn-white {
    background-color: var(--svr-color-text-light);
    color: var(--svr-color-text-dark);
    padding: 15px 30px;
    border-radius: var(--svr-radius-pill);
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform var(--svr-transition-fast), box-shadow var(--svr-transition-fast);
}

.svr-btn-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255,255,255,0.2);
}

.svr-cook-mode-card__visual {
    position: relative;
    z-index: 2;
}

.svr-timer-ring {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 2px dashed rgba(230,185,83,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: svr-spin-slow 20s linear infinite;
}

@keyframes svr-spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.svr-timer-icon {
    font-size: 4.5rem;
    color: var(--svr-color-accent-gold);
    animation: svr-pulse-glow 2s ease-in-out infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes svr-pulse-glow {
    0% { filter: drop-shadow(0 0 5px rgba(230,185,83,0.5)); }
    50% { filter: drop-shadow(0 0 20px rgba(230,185,83,0.8)); }
    100% { filter: drop-shadow(0 0 5px rgba(230,185,83,0.5)); }
}

/* ==========================================================================
   FEATURE: PREMIUM RECIPE BODY MODULES
   ========================================================================== */

/* 1. Visual Ingredient Grid */
.svr-ingredient-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 40px;
}

.svr-ingredient-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--svr-radius-md);
    transition: all var(--svr-transition-fast);
}

.svr-ingredient-card:hover {
    background: var(--svr-color-text-light);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transform: translateY(-2px);
}

.svr-ingredient-card__img {
    width: 50px;
    height: 50px;
    border-radius: var(--svr-radius-sm);
    object-fit: cover;
}

.svr-ingredient-card__text {
    display: flex;
    flex-direction: column;
}

.svr-ingredient-card__name {
    font-weight: 600;
    color: var(--svr-color-text-dark);
    font-size: 0.95rem;
}

.svr-ingredient-card__qty {
    font-size: 0.8rem;
    color: var(--svr-color-text-muted-light);
}

/* 2. Nutrition Visualizer */
.svr-nutrition-widget {
    background: var(--svr-color-bg-dark);
    border-radius: var(--svr-radius-md);
    padding: 30px;
    color: var(--svr-color-text-light);
    margin-bottom: 50px;
}

.svr-nutrition-widget h4 {
    color: var(--svr-color-accent-gold);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.svr-nutrition-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.svr-nutrition-item {
    display: flex;
    flex-direction: column;
}

.svr-nutrition-item span {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 5px;
}

.svr-nutrition-item strong {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.svr-nutrition-bar {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: var(--svr-radius-pill);
    overflow: hidden;
}

.svr-nutrition-bar__fill {
    height: 100%;
    border-radius: var(--svr-radius-pill);
}

/* 3. Chef's Secret Callout */
.svr-chef-secret {
    position: relative;
    padding: 35px 40px;
    background: #fdfaf6; /* Very light gold tint */
    border-left: 4px solid var(--svr-color-accent-gold);
    border-radius: 0 var(--svr-radius-md) var(--svr-radius-md) 0;
    margin: 40px 0;
    font-style: italic;
    color: var(--svr-color-text-dark);
}

.svr-chef-secret::before {
    content: "\f10e"; /* FontAwesome quote-left */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 3rem;
    color: rgba(230, 185, 83, 0.15); /* Gold watermark */
}

.svr-chef-secret h5 {
    font-family: var(--svr-font-heading);
    font-size: 1.3rem;
    color: var(--svr-color-accent-gold);
    margin-bottom: 10px;
    font-style: normal;
}

/* 4. Cinematic Instructions */
.svr-instruction-cinematic {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
    align-items: flex-start;
}

.svr-instruction-cinematic__num {
    font-family: var(--svr-font-heading);
    font-size: 4.5rem;
    color: transparent;
    -webkit-text-stroke: 1px var(--svr-color-accent-gold);
    line-height: 0.8;
    flex-shrink: 0;
}

.svr-instruction-cinematic__content {
    flex: 1;
}

.svr-instruction-cinematic__content h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--svr-color-text-dark);
    margin-bottom: 15px;
}

.svr-instruction-cinematic__content p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--svr-color-text-muted-light);
}

.svr-instruction-cinematic__img {
    margin-top: 20px;
    width: 100%;
    border-radius: var(--svr-radius-md);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* ==========================================================================
   PAGE: FULLSCREEN COOK MODE (OVERLAY - PREMIUM REDESIGN)
   ========================================================================== */

body.svr-cook-mode-active {
    overflow: hidden;
}

#svr-cook-mode-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--svr-color-text-dark);
    color: var(--svr-color-text-light);
    z-index: 9999;
    display: none; /* Hidden by default */
    flex-direction: column;
}

body.svr-cook-mode-active #svr-cook-mode-overlay {
    display: flex;
}

/* Cinematic Blurred Background */
.svr-cook-mode-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.18; /* Darkened to increase contrast */
    filter: blur(25px);
    transform: scale(1.15); /* Prevents blur edges from showing */
    z-index: 1;
}

.svr-cook-mode-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background: rgba(10, 10, 10, 0.8); /* Darkened */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.svr-cook-mode-title {
    font-family: var(--svr-font-heading);
    font-size: 1.8rem;
    color: var(--svr-color-text-light);
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.svr-btn-exit {
    background: rgba(230, 185, 83, 0.1);
    color: var(--svr-color-accent-gold);
    border: 1px solid rgba(230, 185, 83, 0.3);
    padding: 10px 25px;
    border-radius: var(--svr-radius-pill);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all var(--svr-transition-fast);
}

.svr-btn-exit:hover {
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
    box-shadow: 0 0 15px rgba(230, 185, 83, 0.4);
}

.svr-cook-mode-layout {
    display: grid;
    grid-template-columns: 350px 1fr;
    flex: 1;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

/* Glass Sidebar */
.svr-cook-mode-sidebar {
    background: rgba(10, 10, 10, 0.6); /* Darkened */
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-right: 1px solid rgba(255,255,255,0.08);
    padding: 40px;
    overflow-y: auto;
    box-shadow: 10px 0 30px rgba(0,0,0,0.4);
}

.svr-cook-mode-sidebar h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--svr-color-accent-gold);
    margin-bottom: 30px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.svr-cook-mode-ingredient {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    cursor: pointer;
}

.svr-cook-mode-ingredient .svr-checkbox {
    width: 26px;
    height: 26px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 6px;
}

.svr-cook-mode-ingredient.checked .svr-checkbox {
    background: var(--svr-color-accent-gold);
    border-color: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
    box-shadow: 0 0 10px rgba(230,185,83,0.3);
}

.svr-cook-mode-ingredient.checked span {
    text-decoration: line-through;
    color: rgba(255,255,255,0.3);
}

.svr-cook-mode-ingredient span {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    transition: color var(--svr-transition-fast);
}

/* Premium Main View */
.svr-cook-mode-main {
    padding: 60px 80px;
    overflow-y: auto;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.svr-cook-mode-step {
    width: 100%;
    max-width: 800px;
    padding: 45px;
    border-radius: var(--svr-radius-md);
    opacity: 0.25;
    transform: scale(0.96);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 60px;
    border: 1px solid transparent;
}

/* The Active Step gets the massive glassmorphism treatment */
.svr-cook-mode-step.active {
    opacity: 1;
    transform: scale(1);
    background: rgba(15, 15, 15, 0.85); /* Darker overlay for extreme readability */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(230, 185, 83, 0.45);
    box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 0 30px rgba(230,185,83,0.08);
}

.svr-cook-mode-step__num {
    font-family: var(--svr-font-heading);
    font-size: 6rem;
    color: transparent;
    -webkit-text-stroke: 1px rgba(230, 185, 83, 0.4);
    margin-bottom: 20px;
    line-height: 0.8;
    transition: all 0.4s ease;
}

.svr-cook-mode-step.active .svr-cook-mode-step__num {
    -webkit-text-stroke: 1px var(--svr-color-accent-gold);
    text-shadow: 0 0 25px rgba(230, 185, 83, 0.35);
}

.svr-cook-mode-step__text {
    font-size: 2.2rem;
    line-height: 1.45;
    font-weight: 300;
    color: var(--svr-color-text-light);
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

/* Inline Timer Button */
.svr-inline-timer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(230, 185, 83, 0.15);
    border: 1px solid var(--svr-color-accent-gold);
    color: var(--svr-color-accent-gold);
    padding: 8px 20px;
    border-radius: var(--svr-radius-pill);
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    vertical-align: middle;
    margin: 0 10px;
    transition: all var(--svr-transition-fast);
}

.svr-inline-timer:hover {
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
    box-shadow: 0 0 15px rgba(230, 185, 83, 0.4);
}

/* ==========================================================================
   PAGE: SINGLE RECIPE DETAILS & WOOCOMMERCE
   ========================================================================== */

.svr-recipe-detail-header {
    position: relative;
    height: 60vh;
    min-height: 400px;
    display: flex;
    align-items: flex-end;
    padding: 60px 50px;
    background: var(--svr-color-bg-dark);
}

.svr-recipe-detail-header__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0.7;
}

.svr-recipe-detail-header__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(18,18,18,1) 0%, rgba(18,18,18,0) 80%);
    z-index: 2;
}

.svr-recipe-detail-header__content {
    position: relative;
    z-index: 3;
    max-width: 800px;
    color: var(--svr-color-text-light);
}

.svr-recipe-detail-header__meta-top {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.svr-recipe-detail-header__author {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
}

.svr-recipe-detail-header__author img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.svr-recipe-detail-header__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(3rem, 4vw, 4rem);
    line-height: 1.1;
    margin-bottom: 25px;
}

.svr-recipe-detail-stats {
    display: flex;
    gap: 40px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 20px 30px;
    border-radius: var(--svr-radius-md);
    display: inline-flex;
}

.svr-recipe-stat {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.svr-recipe-stat span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--svr-color-accent-gold);
    font-weight: 700;
}

.svr-recipe-stat strong {
    font-size: 1.1rem;
    font-weight: 600;
}

/* Recipe Body Grid */
.svr-recipe-detail-body {
    padding: 60px 50px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    background: var(--svr-color-text-light);
}

/* Ingredients */
.svr-recipe-section-title {
    font-family: var(--svr-font-heading);
    font-size: 2rem;
    color: var(--svr-color-text-dark);
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--svr-color-border-light);
}

.svr-ingredient-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 50px;
}

.svr-ingredient-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: var(--svr-color-bg-light);
    border-radius: var(--svr-radius-sm);
    cursor: pointer;
    transition: background var(--svr-transition-fast);
}

.svr-ingredient-item:hover {
    background: #f0f0f0;
}

.svr-checkbox {
    width: 22px;
    height: 22px;
    border: 2px solid var(--svr-color-border-dark);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: all var(--svr-transition-fast);
}

.svr-ingredient-item.checked .svr-checkbox {
    background: var(--svr-color-accent-green);
    border-color: var(--svr-color-accent-green);
    color: var(--svr-color-text-light);
}

.svr-ingredient-item.checked span {
    text-decoration: line-through;
    color: var(--svr-color-text-muted-light);
}

.svr-ingredient-item span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--svr-color-text-dark);
}

/* Instructions */
.svr-instruction-step {
    display: flex;
    gap: 25px;
    margin-bottom: 40px;
}

.svr-instruction-step__number {
    width: 40px;
    height: 40px;
    background: var(--svr-color-bg-dark);
    color: var(--svr-color-accent-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--svr-font-heading);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.svr-instruction-step__content h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--svr-color-text-dark);
}

.svr-instruction-step__content p {
    font-size: 1rem;
    color: var(--svr-color-text-muted-light);
    line-height: 1.7;
}

/* WOOCOMMERCE HOOK CARD */
.svr-woo-hook-card {
    background: var(--svr-color-text-light);
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-md);
    padding: 30px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.03);
    position: sticky;
    top: 100px;
}

.svr-woo-hook-card__title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--svr-color-text-dark);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.svr-woo-product {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--svr-color-border-light);
}

.svr-woo-product:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.svr-woo-product__img {
    width: 60px;
    height: 60px;
    border-radius: var(--svr-radius-sm);
    object-fit: cover;
}

.svr-woo-product__info {
    flex: 1;
}

.svr-woo-product__info h5 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--svr-color-text-dark);
    margin-bottom: 5px;
}

.svr-woo-product__info span {
    font-size: 0.8rem;
    color: var(--svr-color-accent-green);
    font-weight: 700;
}

.svr-btn-woo {
    width: 100%;
    background: var(--svr-color-bg-dark);
    color: var(--svr-color-accent-gold);
    padding: 12px;
    border-radius: var(--svr-radius-sm);
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 20px;
    transition: background var(--svr-transition-fast);
}

.svr-btn-woo:hover {
    background: var(--svr-color-text-dark);
}

/* ==========================================================================
   GLOBAL RESPONSIVENESS
   ========================================================================== */

@media (max-width: 1200px) {
    .svr-widgets-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .svr-hero__inner {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 40px !important;
    }
    
    .svr-explore-pill {
        left: 20px;
        right: 20px;
        padding: 20px;
        gap: 15px;
    }
}

@media (max-width: 1024px) {
    .svr-sidebar {
        width: 80px;
        padding: 20px 10px;
        align-items: center;
    }
    
    .svr-logo {
        font-size: 1rem;
        padding-left: 0;
        text-align: center;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        margin-bottom: 30px;
    }
    
    .svr-nav__link {
        justify-content: center;
        padding: 15px;
    }
    
    .svr-nav__link span {
        display: none;
    }
    
    .svr-profile-widget__info, 
    .svr-profile-widget i,
    .svr-quote-widget {
        display: none;
    }
    
    .svr-explore-pill {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        bottom: -80px;
    }
    
    .svr-explore-pill__items {
        width: 100%;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .svr-creators-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .svr-dietary-grid,
    .svr-shop-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .svr-masonry-grid {
        column-count: 2;
    }
    
    .svr-section-masterclass {
        grid-template-columns: 1fr;
    }
    
    .svr-dashboard-widgets {
        padding-top: 140px; /* clear larger pill */
    }
}

@media (max-width: 768px) {
    .svr-dashboard {
        flex-direction: column;
    }
    
    .svr-sidebar {
        width: 100%;
        height: auto;
        position: fixed;
        bottom: 0;
        top: auto;
        flex-direction: row;
        padding: 10px;
        z-index: 1000;
        border-right: none;
        border-top: 1px solid var(--svr-color-border-dark);
        background: rgba(10,10,10,0.95);
        backdrop-filter: blur(10px);
    }
    
    .svr-logo {
        display: none;
    }
    
    .svr-nav {
        flex-direction: row;
        justify-content: space-around;
        width: 100%;
    }
    
    .svr-main-content {
        height: auto;
        overflow-y: visible;
        padding-bottom: 80px; /* clear bottom nav */
    }
    
    .svr-top-nav {
        flex-direction: column;
        padding: 20px;
        gap: 15px;
    }
    
    .svr-top-nav__links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    
    .svr-hero {
        padding: 180px 20px 80px 20px;
    }
    
    .svr-hero__inner {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 30px !important;
        width: 100% !important;
    }
    
    .svr-hero-glass-card {
        max-width: 100%;
        width: 100%;
    }
    
    .svr-hero__title {
        font-size: 2.8rem;
    }
    
    .svr-hero__actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .svr-widgets-grid {
        grid-template-columns: 1fr;
    }
    
    .svr-creators-grid {
        grid-template-columns: 1fr;
    }
    
    .svr-dietary-grid,
    .svr-shop-grid {
        grid-template-columns: 1fr;
    }
    
    .svr-masonry-grid {
        column-count: 1;
    }
    
    .svr-timeline-node span {
        display: none;
    }
    
    .svr-planner-active-card {
        flex-direction: column;
        text-align: center;
    }
    
    .svr-section-masterclass {
        padding: 30px 20px;
    }
    
    .svr-smart-pantry-grid {
        grid-template-columns: 1fr;
    }
    
    .svr-utility-grid {
        grid-template-columns: 1fr;
    }
    
    .svr-ai-banner {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .svr-ai-banner__content {
        max-width: 100%;
    }
    
    .svr-recipe-detail-body {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .svr-recipe-detail-stats {
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .svr-cook-mode-card {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
        gap: 40px;
    }

    .svr-cook-mode-card__content {
        max-width: 100%;
    }

    .svr-explore-pill {
        display: none; /* Hide on very small screens to save space */
    }
    
    .svr-dashboard-widgets {
        padding: 40px 20px;
    }
}

/* ==========================================================================
   PHASE 13: UNIQUE RESPONSIVE MOBILE MENU & SWIPE NAVIGATION
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Transform Bottom Sidebar into a Floating Glassmorphic Pill Dock */
    .svr-sidebar {
        width: calc(100% - 40px) !important;
        max-width: 500px !important;
        height: 70px !important;
        position: fixed !important;
        bottom: 24px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: auto !important;
        border-radius: 35px !important;
        flex-direction: row !important;
        padding: 0 15px !important;
        z-index: 9999 !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        background: rgba(18, 18, 18, 0.72) !important;
        backdrop-filter: blur(24px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
        box-shadow: 0 15px 35px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.1) !important;
        align-items: center !important;
        justify-content: center !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease !important;
    }

    /* Hide redundant elements inside floating dock */
    .svr-sidebar .svr-profile-widget,
    .svr-sidebar .svr-quote-widget,
    .svr-sidebar .svr-logo {
        display: none !important;
    }

    /* Navigation list formatting inside the dock */
    .svr-nav {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 10px !important;
        gap: 5px !important;
    }

    /* Make nav links look like elegant circular action buttons */
    .svr-nav__link {
        padding: 0 !important;
        margin: 0 !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        color: rgba(255, 255, 255, 0.6) !important;
        font-size: 0 !important; /* Hide text nodes without HTML edits */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative !important;
    }

    /* Hide the label text for mobile menu completely, show only icons */
    .svr-nav__link span {
        display: none !important;
    }

    /* Large icon size inside dock */
    .svr-nav__link i {
        font-size: 1.25rem !important;
        margin: 0 !important;
    }

    /* Active link circular glow state */
    .svr-nav__link--active {
        background: rgba(230, 185, 83, 0.2) !important;
        color: var(--svr-color-accent-gold) !important;
        box-shadow: 0 0 15px rgba(230, 185, 83, 0.3), inset 0 1px 1px rgba(230, 185, 83, 0.2) !important;
        transform: translateY(-4px) scale(1.08) !important;
    }

    /* Hover/Focus mini-scale */
    .svr-nav__link:hover {
        color: var(--svr-color-accent-gold) !important;
        background: rgba(255, 255, 255, 0.05) !important;
    }

    /* 2. Transform Top Nav Links into a Horizontal Swipe track */
    .svr-top-nav__links {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        scrollbar-width: none !important; /* Firefox */
        width: 100% !important;
        gap: 16px !important;
        padding: 5px 0 10px 0 !important;
        margin-bottom: 5px !important;
        -webkit-overflow-scrolling: touch !important; /* Smooth momentum scroll */
    }

    /* Hide webkit scrollbars */
    .svr-top-nav__links::-webkit-scrollbar {
        display: none !important;
    }

    .svr-top-nav__link {
        flex-shrink: 0 !important; /* Prevent collapsing */
        font-size: 0.85rem !important;
        padding: 6px 14px !important;
        border-radius: var(--svr-radius-pill) !important;
        background: rgba(0,0,0,0.03) !important;
        border: 1px solid rgba(0,0,0,0.05) !important;
        transition: all 0.2s ease !important;
    }

    .svr-top-nav__link--active {
        background: var(--svr-color-accent-gold) !important;
        color: var(--svr-color-text-dark) !important;
        border-color: var(--svr-color-accent-gold) !important;
    }

    .svr-top-nav__actions {
        width: 100% !important;
        display: flex !important;
        gap: 10px !important;
    }

    .svr-search-bar {
        flex: 1 !important;
    }

    /* Adjust page container padding to make space for the floating pill dock */
    .svr-main-content {
        padding-bottom: 110px !important;
    }
}

/* ==========================================================================
   PHASES 14, 15, 16: NEW HOMEPAGE SECTIONS
   ========================================================================== */

/* Recipe Collections Styling */
.svr-section-collections {
    margin-top: 50px;
}
.svr-collections-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}
.svr-collections-header h3 {
    font-family: var(--svr-font-heading);
    font-size: 2rem;
    color: var(--svr-color-text-dark);
}
.svr-collections-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.svr-collection-card {
    position: relative;
    border-radius: var(--svr-radius-md);
    overflow: hidden;
    height: 220px;
    display: flex;
    align-items: flex-end;
    padding: 20px;
    box-shadow: 0 10px 30px var(--svr-color-border-light);
    transition: transform var(--svr-transition-fast), box-shadow var(--svr-transition-fast);
}
.svr-collection-card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--svr-color-bg-dark);
    opacity: 0.45;
    z-index: 1;
    transition: opacity var(--svr-transition-fast);
}
.svr-collection-card__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.svr-collection-card__content {
    position: relative;
    z-index: 2;
    color: var(--svr-color-text-light);
}
.svr-collection-card__count {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--svr-color-accent-gold);
    margin-bottom: 5px;
    font-family: var(--svr-font-heading);
}
.svr-collection-card__title {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.svr-collection-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px var(--svr-color-border-dark);
}
.svr-collection-card:hover .svr-collection-card__img {
    transform: scale(1.08);
}
.svr-collection-card:hover .svr-collection-card__overlay {
    opacity: 0.55;
}

/* SavorÃƒÂ© Brand Values Row */
.svr-section-values {
    margin-top: 60px;
    padding: 40px 20px;
    background: var(--svr-color-card-light);
    border-radius: var(--svr-radius-lg);
    border: 1px solid var(--svr-color-border-light);
}
.svr-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.svr-value-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.svr-value-card__icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--svr-color-accent-green-light);
    color: var(--svr-color-accent-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
    box-shadow: 0 8px 20px var(--svr-color-border-light);
}
.svr-value-card__title {
    font-family: var(--svr-font-heading);
    font-size: 1.3rem;
    color: var(--svr-color-text-dark);
    margin-bottom: 10px;
}
.svr-value-card__desc {
    font-size: 0.85rem;
    color: var(--svr-color-text-muted-light);
    line-height: 1.6;
}

/* Newsletter Subscription Banner */
.svr-section-newsletter {
    margin-top: 40px;
    margin-bottom: 20px;
}
.svr-newsletter-card {
    background: #1a1a1a;
    color: var(--svr-color-text-light);
    border-radius: 30px;
    padding: 60px 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
    margin: 0 auto;
    max-width: 1200px;
}

.svr-newsletter-card__content {
    flex: 1;
    position: relative;
    z-index: 2;
}

.svr-newsletter-card__title {
    font-family: var(--svr-font-heading);
    font-size: 3rem;
    margin-bottom: 15px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.svr-newsletter-card__desc {
    font-size: 1.05rem;
    color: #aaaaaa;
    line-height: 1.6;
}

.svr-newsletter-card__form {
    flex: 1;
    display: flex;
    gap: 15px;
    position: relative;
    z-index: 2;
    width: 100%;
    background: #ffffff;
    padding: 10px;
    border-radius: 40px;
}

.svr-newsletter-card__input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 15px 25px;
    border-radius: 30px;
    color: #000000;
    font-size: 1rem;
    outline: none;
    font-family: var(--svr-font-body);
}

.svr-newsletter-card__input::placeholder {
    color: #888888;
}

.svr-newsletter-card__btn {
    background: var(--svr-color-accent-gold);
    color: #111111;
    font-weight: 700;
    padding: 15px 35px;
    border-radius: 30px;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    text-transform: uppercase;
    transition: transform var(--svr-transition-fast), background var(--svr-transition-fast);
    border: none;
    cursor: pointer;
}

.svr-newsletter-card__btn:hover {
    transform: translateY(-2px);
    background: var(--svr-color-text-light);
}

/* Responsive Overrides for Phase 14, 15, and 16 */
@media (max-width: 1024px) {
    .svr-collections-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .svr-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .svr-newsletter-card {
        flex-direction: column;
        text-align: center;
        padding: 40px 30px;
        gap: 30px;
    }
    .svr-newsletter-card__form {
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .svr-collections-grid {
        grid-template-columns: 1fr;
    }
    .svr-values-grid {
        grid-template-columns: 1fr;
    }
    .svr-newsletter-card__form {
        flex-direction: column;
        width: 100%;
    }
    .svr-newsletter-card__btn {
        width: 100%;
    }
    .svr-newsletter-card__title {
        font-size: 1.8rem;
    }
}

/* Phase 17: Visual Fixes and Contrast Adjustments */
.svr-planner-active-card__info p {
    color: var(--svr-color-text-muted-light) !important;
}

.svr-logo {
    display: block;
    text-decoration: none;
}

.svr-logo:hover {
    color: var(--svr-color-accent-gold);
    text-decoration: none;
}

/* Ensure FontAwesome icons in season bar align nicely */
.svr-in-season-items i {
    font-size: 1.3rem;
}

/* Fix Invisible Text Contrast in Light Sections */
.svr-timeline-node__dot {
    color: var(--svr-color-text-muted-light) !important;
}

.svr-timeline-node.active .svr-timeline-node__dot {
    color: var(--svr-color-text-dark) !important;
}

.svr-timeline-node span {
    color: var(--svr-color-text-muted-light) !important;
}

.svr-timeline-node.active span {
    color: var(--svr-color-text-dark) !important;
}

.svr-in-season-info h3 {
    color: var(--svr-color-text-dark) !important;
}

/* ==========================================================================
   INDEX-2 NEW COMPONENTS (1-5)
   ========================================================================== */

/* 1. TASTE PROFILE QUIZ */
.svr-section-taste-quiz {
    padding: 60px 50px;
    background: var(--svr-color-text-light);
    border-bottom: 1px solid var(--svr-color-border-light);
}

.svr-taste-quiz__header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 40px;
}

.svr-taste-quiz__title {
    font-family: var(--svr-font-heading);
    font-size: 2.5rem;
    color: var(--svr-color-text-dark);
    margin: 10px 0;
}

.svr-taste-quiz__desc {
    color: var(--svr-color-text-muted-light);
    font-size: 1rem;
}

.svr-taste-quiz__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.svr-taste-card {
    cursor: pointer;
    position: relative;
}

.svr-taste-card__input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.svr-taste-card__visual {
    background: var(--svr-color-bg-light);
    border: 2px solid transparent;
    border-radius: var(--svr-radius-md);
    padding: 40px 20px;
    text-align: center;
    transition: all var(--svr-transition-fast);
}

.svr-taste-card__icon {
    font-size: 2.5rem;
    color: var(--svr-color-text-muted-light);
    margin-bottom: 15px;
    transition: color var(--svr-transition-fast);
}

.svr-taste-card__label {
    display: block;
    font-weight: 600;
    color: var(--svr-color-text-dark);
}

.svr-taste-card:hover .svr-taste-card__visual {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.svr-taste-card__input:checked ~ .svr-taste-card__visual {
    border-color: var(--svr-color-accent-gold);
    background: var(--svr-color-text-light);
    box-shadow: 0 10px 30px rgba(230, 185, 83, 0.15);
}

.svr-taste-card__input:checked ~ .svr-taste-card__visual .svr-taste-card__icon {
    color: var(--svr-color-accent-gold);
}

/* 2. GLOBAL CUISINE MAP */
.svr-section-global-map {
    padding: 60px 0;
    background: var(--svr-color-bg-light);
}

.svr-global-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 0 50px;
}

.svr-global-card {
    position: relative;
    border-radius: var(--svr-radius-lg);
    overflow: hidden;
    height: 400px;
    cursor: pointer;
}

.svr-global-card__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.svr-global-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 100%);
}

.svr-global-card__content {
    position: absolute;
    bottom: 30px;
    left: 30px;
    color: var(--svr-color-text-light);
}

.svr-global-card__title {
    font-family: var(--svr-font-heading);
    font-size: 2.2rem;
    margin-bottom: 5px;
}

.svr-global-card__count {
    font-size: 0.85rem;
    color: var(--svr-color-accent-gold);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.svr-global-card:hover .svr-global-card__bg {
    transform: scale(1.05);
}

/* 3. KITCHEN CONVERSION CALCULATOR */
.svr-section-converter {
    padding: 60px 50px;
    background: var(--svr-color-text-light);
}

.svr-converter-box {
    background: var(--svr-color-bg-dark);
    border-radius: var(--svr-radius-lg);
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.svr-converter-box__info {
    flex: 1;
    color: var(--svr-color-text-light);
}

.svr-converter-box__title {
    font-family: var(--svr-font-heading);
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.svr-converter-box__desc {
    color: var(--svr-color-text-muted-light);
    font-size: 1rem;
    line-height: 1.6;
}

.svr-converter-box__tool {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255,255,255,0.05);
    padding: 30px;
    border-radius: var(--svr-radius-md);
    border: 1px solid rgba(255,255,255,0.1);
}

.svr-converter-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.svr-converter-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255,255,255,0.2);
    color: var(--svr-color-text-light);
    font-size: 2rem;
    font-weight: 700;
    padding: 5px 0;
    outline: none;
}

.svr-converter-input--readonly {
    color: var(--svr-color-accent-gold);
    border-bottom-color: var(--svr-color-accent-gold);
}

.svr-converter-select {
    background: transparent;
    border: none;
    color: var(--svr-color-text-muted-light);
    font-size: 0.85rem;
    outline: none;
    cursor: pointer;
}

.svr-converter-select option {
    background: var(--svr-color-bg-dark);
    color: var(--svr-color-text-light);
}

.svr-converter-icon {
    color: var(--svr-color-text-muted-light);
    font-size: 1.5rem;
}

/* 4. SEASONAL FORAGING GUIDE */
.svr-section-foraging {
    padding: 60px 50px;
    background: var(--svr-color-bg-light);
}

.svr-section-foraging__heading {
    font-family: var(--svr-font-heading);
    font-size: 2.5rem;
    color: var(--svr-color-text-dark);
    margin-bottom: 40px;
    text-align: center;
}

.svr-foraging-carousel {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    padding-bottom: 20px;
    scrollbar-width: none;
}

.svr-foraging-card {
    min-width: 300px;
    background: var(--svr-color-text-light);
    padding: 30px;
    border-radius: var(--svr-radius-md);
    text-align: center;
    border: 1px solid var(--svr-color-border-light);
    transition: transform var(--svr-transition-fast);
}

.svr-foraging-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}

.svr-foraging-card__img-wrap {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: var(--svr-color-accent-green-light);
    color: var(--svr-color-accent-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.svr-foraging-card h4 {
    font-size: 1.2rem;
    color: var(--svr-color-text-dark);
    margin-bottom: 10px;
}

.svr-foraging-card p {
    font-size: 0.9rem;
    color: var(--svr-color-text-muted-light);
    line-height: 1.5;
}

/* 5. LIVE MASTERCLASS COUNTDOWN */
.svr-section-live-event {
    position: relative;
    padding: 100px 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.svr-live-event__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.svr-live-event__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
    z-index: 2;
}

.svr-live-event__content {
    position: relative;
    z-index: 3;
    max-width: 800px;
    color: var(--svr-color-text-light);
}

.svr-live-event__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,0,0,0.2);
    color: #ff4757;
    padding: 8px 16px;
    border-radius: var(--svr-radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.svr-live-event__badge i {
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

.svr-live-event__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(3rem, 5vw, 4.5rem);
    line-height: 1.1;
    margin-bottom: 10px;
}

.svr-live-event__host {
    font-size: 1.1rem;
    color: var(--svr-color-accent-gold);
    margin-bottom: 40px;
}

.svr-countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.svr-countdown__block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.svr-countdown__num {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(180deg, var(--svr-color-text-light) 0%, rgba(255,255,255,0.5) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.svr-countdown__label {
    font-size: 0.75rem;
    color: var(--svr-color-text-muted-light);
    letter-spacing: 0.1em;
    margin-top: 5px;
}

.svr-countdown__sep {
    font-size: 2.5rem;
    color: rgba(255,255,255,0.2);
    font-weight: 300;
    margin-top: -20px;
}

/* ==========================================================================
   INDEX-2 NEW COMPONENTS (6-10)
   ========================================================================== */

/* 6. INGREDIENT SUBSTITUTION ENGINE */
.svr-section-substitution {
    padding: 60px 50px;
    background: var(--svr-color-text-light);
    border-bottom: 1px solid var(--svr-color-border-light);
}

.svr-sub-engine {
    max-width: 800px;
    margin: 0 auto;
}

.svr-sub-engine__header {
    text-align: center;
    margin-bottom: 40px;
}

.svr-sub-engine__header h2 {
    font-family: var(--svr-font-heading);
    font-size: 2.5rem;
    color: var(--svr-color-text-dark);
    margin: 10px 0;
}

.svr-sub-engine__search {
    position: relative;
    margin-bottom: 30px;
}

.svr-sub-engine__search i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--svr-color-text-muted-light);
    font-size: 1.2rem;
}

.svr-sub-input {
    width: 100%;
    padding: 20px 20px 20px 50px;
    font-size: 1.1rem;
    border: 2px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-pill);
    outline: none;
    transition: border-color var(--svr-transition-fast);
}

.svr-sub-input:focus {
    border-color: var(--svr-color-accent-gold);
}

.svr-sub-results {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.svr-sub-card {
    display: flex;
    align-items: center;
    background: var(--svr-color-bg-light);
    border-radius: var(--svr-radius-md);
    padding: 20px;
    gap: 20px;
}

.svr-sub-card__original, .svr-sub-card__alt {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.svr-sub-card__original strong, .svr-sub-card__alt strong {
    font-size: 1.1rem;
    color: var(--svr-color-text-dark);
    margin-bottom: 5px;
}

.svr-sub-card__original span, .svr-sub-card__alt span {
    font-size: 0.85rem;
    color: var(--svr-color-text-muted-light);
}

.svr-sub-card__alt strong {
    color: var(--svr-color-accent-green);
}

.svr-sub-card__arrow {
    font-size: 1.5rem;
    color: var(--svr-color-accent-gold);
    padding: 0 20px;
}

/* 7. CULINARY GLOSSARY CAROUSEL */
.svr-section-glossary {
    padding: 60px 0;
    background: var(--svr-color-bg-light);
}

.svr-glossary-track {
    display: flex;
    gap: 20px;
    padding: 0 50px 20px;
    overflow-x: auto;
    scrollbar-width: none;
}

.svr-glossary-card {
    min-width: 300px;
    background: var(--svr-color-text-light);
    padding: 40px 30px;
    border-radius: var(--svr-radius-lg);
    border: 1px solid var(--svr-color-border-light);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    transition: transform var(--svr-transition-fast);
}

.svr-glossary-card:hover {
    transform: translateY(-5px);
    border-color: var(--svr-color-accent-gold);
}

.svr-glossary-card__term {
    font-family: var(--svr-font-heading);
    font-size: 2rem;
    color: var(--svr-color-accent-green);
    margin-bottom: 15px;
}

.svr-glossary-card__def {
    font-size: 1rem;
    color: var(--svr-color-text-muted-light);
    line-height: 1.6;
}

/* 8. RECIPE COMPARISON MATRIX */
.svr-section-compare {
    padding: 80px 50px;
    background: var(--svr-color-bg-dark);
}

.svr-compare-container {
    max-width: 1000px;
    margin: 0 auto;
}

.svr-compare-grid {
    display: flex;
    background: rgba(255,255,255,0.05);
    border-radius: var(--svr-radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
}

.svr-compare-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.svr-compare-col:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,0.1);
}

.svr-compare-col--labels {
    flex: 0.8;
    background: rgba(0,0,0,0.2);
}

.svr-compare-col--highlight {
    background: rgba(230, 185, 83, 0.1);
    position: relative;
}

.svr-compare-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: var(--svr-radius-sm);
    letter-spacing: 0.1em;
}

.svr-compare-cell {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: var(--svr-color-text-light);
    font-size: 1rem;
    text-align: center;
    height: 70px;
}

.svr-compare-cell:last-child {
    border-bottom: none;
}

.svr-compare-cell--empty {
    height: 180px;
}

.svr-compare-cell--header {
    height: 180px;
    flex-direction: column;
    gap: 15px;
}

.svr-compare-cell--header img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.2);
}

.svr-compare-cell--header h4 {
    font-size: 1.1rem;
    font-weight: 600;
}

/* 9. ZERO-WASTE KITCHEN HACKS */
.svr-section-zero-waste {
    padding: 80px 50px;
    background: var(--svr-color-text-light);
}

.svr-zero-waste-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.svr-zw-card {
    background: var(--svr-color-bg-light);
    padding: 40px 30px;
    border-radius: var(--svr-radius-md);
    text-align: center;
    border-top: 4px solid var(--svr-color-accent-green);
    transition: transform var(--svr-transition-fast);
}

.svr-zw-card:hover {
    transform: translateY(-5px);
}

.svr-zw-card__icon {
    font-size: 2.5rem;
    color: var(--svr-color-accent-green);
    margin-bottom: 20px;
}

.svr-zw-card h4 {
    font-size: 1.3rem;
    color: var(--svr-color-text-dark);
    margin-bottom: 15px;
}

.svr-zw-card p {
    font-size: 0.95rem;
    color: var(--svr-color-text-muted-light);
    line-height: 1.6;
}

/* 10. CHEF'S KNIFE INTERACTIVE GUIDE */
.svr-section-knife-guide {
    padding: 80px 50px;
    background: var(--svr-color-bg-light);
}

.svr-knife-guide-container {
    background: var(--svr-color-text-light);
    border-radius: var(--svr-radius-lg);
    display: flex;
    align-items: center;
    padding: 60px;
    gap: 50px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}

.svr-knife-guide__info {
    flex: 1;
}

.svr-knife-guide__info h2 {
    font-family: var(--svr-font-heading);
    font-size: 2.5rem;
    color: var(--svr-color-text-dark);
    margin-bottom: 20px;
}

.svr-knife-guide__info p {
    color: var(--svr-color-text-muted-light);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.svr-knife-list {
    list-style: none;
}

.svr-knife-list li {
    font-size: 1rem;
    color: var(--svr-color-text-dark);
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--svr-color-border-light);
}

.svr-knife-list li:last-child {
    border-bottom: none;
}

.svr-knife-guide__visual {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.svr-knife-img {
    width: 100%;
    max-width: 400px;
    transform: rotate(-15deg);
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15));
}

.svr-hotspot {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.svr-hotspot__dot {
    width: 15px;
    height: 15px;
    background: var(--svr-color-accent-gold);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(230, 185, 83, 0.3);
    animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold {
    0% { box-shadow: 0 0 0 0 rgba(230, 185, 83, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(230, 185, 83, 0); }
    100% { box-shadow: 0 0 0 0 rgba(230, 185, 83, 0); }
}

.svr-hotspot__label {
    background: var(--svr-color-bg-dark);
    color: var(--svr-color-accent-gold);
    padding: 5px 12px;
    border-radius: var(--svr-radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0;
    transform: translateX(-10px);
    transition: all var(--svr-transition-fast);
}

.svr-hotspot:hover .svr-hotspot__label {
    opacity: 1;
    transform: translateX(0);
}

/* ==========================================================================
   INDEX-2 NEW COMPONENTS (11-15)
   ========================================================================== */

/* 11. SOMMELIER WINE PAIRING TOOL */
.svr-section-wine-pairing {
    padding: 80px 50px;
    background: var(--svr-color-bg-dark);
}

.svr-wine-container {
    display: flex;
    max-width: 1000px;
    margin: 0 auto;
    gap: 60px;
    align-items: center;
}

.svr-wine-intro {
    flex: 1;
}

.svr-wine-selector {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.svr-wine-select {
    flex: 1;
    padding: 15px 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--svr-color-text-light);
    border-radius: var(--svr-radius-md);
    outline: none;
    font-size: 1rem;
}

.svr-wine-select option {
    background: var(--svr-color-bg-dark);
    color: var(--svr-color-text-light);
}

.svr-wine-result {
    flex: 1;
}

.svr-wine-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--svr-radius-lg);
    padding: 40px;
    display: flex;
    gap: 30px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.svr-wine-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #722F37, var(--svr-color-accent-gold));
}

.svr-wine-card__bottle {
    background: rgba(0,0,0,0.3);
    width: 80px;
    height: 120px;
    border-radius: var(--svr-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.svr-wine-card__details {
    flex: 1;
    color: var(--svr-color-text-light);
}

/* 12. COMMUNITY COOKING CHALLENGES */
.svr-section-challenges {
    padding: 80px 0;
    background: var(--svr-color-text-light);
}

.svr-challenge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 0 50px;
}

.svr-challenge-card {
    background: var(--svr-color-bg-light);
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-lg);
    padding: 40px;
    transition: transform var(--svr-transition-fast);
}

.svr-challenge-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}

.svr-challenge-card__header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.svr-challenge-card__header h3 {
    font-size: 1.4rem;
    color: var(--svr-color-text-dark);
}

.svr-challenge-card__desc {
    color: var(--svr-color-text-muted-light);
    line-height: 1.6;
    margin-bottom: 30px;
}

.svr-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(0,0,0,0.05);
    border-radius: var(--svr-radius-pill);
    overflow: hidden;
}

.svr-progress-bar__fill {
    height: 100%;
    border-radius: var(--svr-radius-pill);
    transition: width 1s ease;
}

/* 13. AUDIO RECIPE PLAYER WIDGET */
.svr-section-audio {
    padding: 80px 50px;
    background: var(--svr-color-bg-light);
    display: flex;
    justify-content: center;
}

.svr-audio-player {
    background: var(--svr-color-bg-dark);
    border-radius: var(--svr-radius-pill);
    padding: 15px 40px 15px 15px;
    display: flex;
    align-items: center;
    gap: 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    max-width: 800px;
    width: 100%;
}

.svr-audio-player__cover {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
}

.svr-audio-player__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}

.svr-audio-player__icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--svr-color-accent-gold);
}

.svr-audio-player__info {
    flex: 1;
    color: var(--svr-color-text-light);
}

.svr-audio-player__info h3 {
    font-size: 1.2rem;
    margin: 5px 0;
}

.svr-audio-player__info p {
    font-size: 0.85rem;
    color: var(--svr-color-text-muted-light);
}

.svr-audio-player__controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

.svr-audio-btn {
    color: var(--svr-color-text-light);
    font-size: 1.2rem;
    opacity: 0.7;
    transition: all var(--svr-transition-fast);
}

.svr-audio-btn:hover {
    opacity: 1;
    color: var(--svr-color-accent-gold);
}

.svr-audio-btn--play {
    width: 50px;
    height: 50px;
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.svr-audio-btn--play:hover {
    transform: scale(1.1);
    color: var(--svr-color-text-dark);
}

/* 14. HOME CHEF GAMIFICATION BADGES */
.svr-section-badges {
    padding: 80px 50px;
    background: var(--svr-color-text-light);
}

.svr-badges-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.svr-badge-item {
    text-align: center;
}

.svr-badge-item__icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    transition: transform var(--svr-transition-fast);
}

.svr-badge-item:hover .svr-badge-item__icon {
    transform: scale(1.05);
}

.svr-badge-item__icon--unlocked {
    background: linear-gradient(135deg, var(--svr-color-accent-gold) 0%, #d4a342 100%);
    color: var(--svr-color-text-light);
    box-shadow: 0 10px 20px rgba(230, 185, 83, 0.3);
}

.svr-badge-item__icon--locked {
    background: var(--svr-color-bg-light);
    color: var(--svr-color-text-muted-light);
    border: 2px dashed var(--svr-color-border-light);
    opacity: 0.5;
}

.svr-badge-item h4 {
    font-size: 1.2rem;
    color: var(--svr-color-text-dark);
    margin-bottom: 5px;
}

.svr-badge-item p {
    font-size: 0.9rem;
    color: var(--svr-color-text-muted-light);
}

/* 15. MEAL PREP SCALING CALCULATOR */
.svr-section-scaling {
    padding: 80px 50px;
    background: var(--svr-color-bg-light);
    display: flex;
    justify-content: center;
}

.svr-scaling-box {
    background: var(--svr-color-text-light);
    border-radius: var(--svr-radius-lg);
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    max-width: 600px;
    width: 100%;
    overflow: hidden;
}

.svr-scaling-box__header {
    background: var(--svr-color-bg-dark);
    padding: 40px;
    color: var(--svr-color-text-light);
    text-align: center;
}

.svr-scaling-box__header h2 {
    font-family: var(--svr-font-heading);
    font-size: 2rem;
    margin-bottom: 30px;
}

.svr-scaling-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.svr-scaling-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--svr-color-text-light);
    transition: all var(--svr-transition-fast);
}

.svr-scaling-btn:hover {
    background: var(--svr-color-accent-gold);
    border-color: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
}

.svr-scaling-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.svr-scaling-ingredients {
    padding: 40px;
}

.svr-scaling-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--svr-color-border-light);
}

.svr-scaling-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.svr-scaling-item__name {
    font-size: 1.1rem;
    color: var(--svr-color-text-dark);
    font-weight: 600;
}

.svr-scaling-item__amount {
    font-size: 1rem;
    color: var(--svr-color-accent-green);
    font-weight: 700;
    background: var(--svr-color-accent-green-light);
    padding: 5px 15px;
    border-radius: var(--svr-radius-pill);
}

/* ==========================================================================
   INDEX-2 NEW COMPONENTS (16-20)
   ========================================================================== */

/* 16. LOCAL FARM-TO-TABLE LOCATOR */
.svr-section-farm-locator {
    padding: 80px 0;
    background: var(--svr-color-text-light);
}

.svr-locator-search {
    display: flex;
    align-items: center;
    background: var(--svr-color-bg-light);
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-pill);
    padding: 5px 5px 5px 25px;
}

.svr-locator-input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 1rem;
    width: 250px;
}

.svr-locator-btn {
    width: 45px;
    height: 45px;
    background: var(--svr-color-accent-green);
    color: var(--svr-color-text-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--svr-transition-fast);
}

.svr-locator-btn:hover {
    background: var(--svr-color-accent-green-hover);
}

.svr-locator-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 0 50px;
}

.svr-locator-card {
    display: flex;
    align-items: center;
    gap: 25px;
    background: var(--svr-color-bg-light);
    padding: 30px;
    border-radius: var(--svr-radius-md);
    border: 1px solid var(--svr-color-border-light);
    transition: box-shadow var(--svr-transition-fast);
}

.svr-locator-card:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.svr-locator-card__map {
    width: 80px;
    height: 80px;
    background: var(--svr-color-text-light);
    border-radius: var(--svr-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--svr-color-accent-green);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.svr-locator-card__info h4 {
    font-size: 1.2rem;
    color: var(--svr-color-text-dark);
    margin-bottom: 5px;
}

.svr-locator-card__info p {
    font-size: 0.9rem;
    color: var(--svr-color-text-muted-light);
    margin-bottom: 15px;
}

.svr-locator-tags {
    display: flex;
    gap: 10px;
}

.svr-locator-tags span {
    background: var(--svr-color-text-light);
    border: 1px solid var(--svr-color-border-light);
    padding: 4px 12px;
    border-radius: var(--svr-radius-pill);
    font-size: 0.75rem;
    color: var(--svr-color-text-dark);
}

/* 17. FLAVOR PAIRING WHEEL */
.svr-section-flavor-wheel {
    padding: 100px 50px;
    background: var(--svr-color-bg-dark);
}

.svr-flavor-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

.svr-flavor-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;
}

.svr-flavor-column h3 {
    color: var(--svr-color-text-muted-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.svr-flavor-column--bridge {
    color: var(--svr-color-accent-gold);
    font-size: 2rem;
    margin-top: 30px;
}

.svr-flavor-item {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--svr-color-text-light);
    padding: 15px 40px;
    border-radius: var(--svr-radius-pill);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all var(--svr-transition-fast);
}

.svr-flavor-item:hover {
    background: rgba(255,255,255,0.1);
}

.svr-flavor-item--active {
    background: var(--svr-color-text-light);
    color: var(--svr-color-text-dark);
    border-color: var(--svr-color-text-light);
    font-weight: 700;
}

/* 18. MACRO NUTRITION VISUALIZER */
.svr-section-macros {
    padding: 80px 50px;
    background: var(--svr-color-text-light);
}

.svr-macros-container {
    display: flex;
    align-items: center;
    gap: 80px;
    max-width: 900px;
    margin: 0 auto;
    background: var(--svr-color-bg-light);
    padding: 60px;
    border-radius: var(--svr-radius-lg);
}

.svr-macros-chart {
    flex: 0.8;
    display: flex;
    justify-content: center;
}

.svr-macros-circle {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 20px solid var(--svr-color-bg-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-top-color: #4facfe;
    border-right-color: #f093fb;
    border-bottom-color: var(--svr-color-accent-gold);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.svr-macros-circle span {
    font-family: var(--svr-font-heading);
    font-size: 3.5rem;
    color: var(--svr-color-text-dark);
    line-height: 1;
}

.svr-macros-circle small {
    font-size: 1rem;
    color: var(--svr-color-text-muted-light);
    letter-spacing: 0.1em;
}

.svr-macros-stats {
    flex: 1;
}

.svr-macros-stats h2 {
    font-family: var(--svr-font-heading);
    font-size: 2.2rem;
    color: var(--svr-color-text-dark);
    margin-bottom: 5px;
}

.svr-macro-bar-group {
    margin-bottom: 25px;
}

.svr-macro-label {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    color: var(--svr-color-text-dark);
    font-weight: 600;
    margin-bottom: 10px;
}

.svr-macro-bar {
    width: 100%;
    height: 10px;
    background: rgba(0,0,0,0.05);
    border-radius: var(--svr-radius-pill);
    overflow: hidden;
}

.svr-macro-bar__fill {
    height: 100%;
    border-radius: var(--svr-radius-pill);
}

/* 19. PRO KITCHEN SETUP TOUR */
.svr-section-kitchen-tour {
    padding: 80px 0;
    background: var(--svr-color-text-light);
}

.svr-tour-header {
    text-align: center;
    margin-bottom: 40px;
}

.svr-tour-interactive {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: var(--svr-radius-lg);
    overflow: hidden;
}

.svr-tour-img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    display: block;
}

.svr-tour-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
}

.svr-tour-hotspot {
    position: absolute;
    z-index: 10;
}

.svr-tour-hotspot__pulse {
    width: 20px;
    height: 20px;
    background: var(--svr-color-text-light);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(255,255,255,0.3);
    cursor: pointer;
    animation: pulse-white 2s infinite;
}

@keyframes pulse-white {
    0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
    70% { box-shadow: 0 0 0 15px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.svr-tour-tooltip {
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--svr-color-text-light);
    padding: 20px;
    border-radius: var(--svr-radius-md);
    width: 250px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    opacity: 0;
    pointer-events: none;
    transition: all var(--svr-transition-fast);
}

.svr-tour-tooltip::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: var(--svr-color-text-light) transparent transparent transparent;
}

.svr-tour-hotspot:hover .svr-tour-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.svr-tour-tooltip h4 {
    font-size: 1.1rem;
    color: var(--svr-color-text-dark);
    margin-bottom: 5px;
}

.svr-tour-tooltip p {
    font-size: 0.85rem;
    color: var(--svr-color-text-muted-light);
}

/* 20. "COOK MODE" IMMERSIVE PREVIEW */
.svr-section-cook-mode {
    position: relative;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('../img/hero-bg.png') center/cover no-repeat;
    background-attachment: fixed;
}

.svr-cook-mode-overlay {
    position: absolute;
    inset: 0;
    background: rgba(18, 18, 18, 0.9);
}

.svr-cook-mode-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    text-align: center;
    color: var(--svr-color-text-light);
}

.svr-cook-mode__badge {
    display: inline-block;
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
    padding: 8px 16px;
    border-radius: var(--svr-radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 30px;
}

.svr-cook-mode__step {
    font-family: var(--svr-font-heading);
    font-size: clamp(3rem, 5vw, 4.5rem);
    margin-bottom: 30px;
    line-height: 1.1;
}

.svr-cook-mode__desc {
    font-size: 1.5rem;
    color: var(--svr-color-text-muted-light);
    line-height: 1.6;
    margin-bottom: 50px;
}

.svr-cook-mode__actions {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.svr-btn-cook {
    background: rgba(255,255,255,0.1);
    color: var(--svr-color-text-light);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 20px 40px;
    border-radius: var(--svr-radius-pill);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all var(--svr-transition-fast);
}

.svr-btn-cook:hover {
    background: rgba(255,255,255,0.2);
}

.svr-btn-cook--next {
    background: var(--svr-color-accent-green);
    border-color: var(--svr-color-accent-green);
}

.svr-btn-cook--next:hover {
    background: var(--svr-color-accent-green-hover);
    border-color: var(--svr-color-accent-green-hover);
}

/* ==========================================================================
   PREMIUM VISUAL OVERHAUL - COMPONENTS 1-5
   ========================================================================== */

/* 1. Taste Profile Quiz Overhaul */
.svr-taste-card__visual {
    background: linear-gradient(145deg, var(--svr-color-bg-light) 0%, #fff 100%);
    box-shadow: 
        inset 0 2px 4px rgba(255,255,255,1),
        0 4px 10px rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
}

.svr-taste-card__visual::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(230, 185, 83, 0.05) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.6s ease;
    transform: scale(0.5);
}

.svr-taste-card:hover .svr-taste-card__visual::before {
    opacity: 1;
    transform: scale(1);
    animation: rotate-slow 10s linear infinite;
}

@keyframes rotate-slow {
    100% { transform: rotate(360deg) scale(1); }
}

.svr-taste-card__input:checked ~ .svr-taste-card__visual {
    background: linear-gradient(145deg, #fff 0%, var(--svr-color-bg-light) 100%);
    box-shadow: 
        inset 0 2px 4px rgba(255,255,255,1),
        0 15px 35px rgba(230, 185, 83, 0.2);
    border-color: var(--svr-color-accent-gold);
    transform: translateY(-8px);
}

.svr-taste-card__icon {
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.svr-taste-card:hover .svr-taste-card__icon {
    transform: scale(1.15) translateY(-5px);
}

/* 2. Global Cuisine Map Overhaul */
.svr-global-card {
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.svr-global-card__overlay {
    background: linear-gradient(to top, rgba(18,18,18,0.95) 0%, rgba(18,18,18,0.4) 40%, transparent 100%);
    transition: background 0.6s ease;
}

.svr-global-card:hover .svr-global-card__overlay {
    background: linear-gradient(to top, rgba(18,18,18,0.95) 0%, rgba(18,18,18,0.6) 60%, rgba(18,18,18,0.2) 100%);
}

.svr-global-card__content {
    left: 20px;
    right: 20px;
    bottom: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--svr-radius-md);
    transform: translateY(10px);
    opacity: 0.9;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.svr-global-card:hover .svr-global-card__content {
    transform: translateY(0);
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(230, 185, 83, 0.4);
}

/* 3. Kitchen Conversion Calculator Overhaul */
.svr-converter-box {
    background: linear-gradient(135deg, var(--svr-color-bg-dark) 0%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
}

.svr-converter-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)"/></svg>');
    opacity: 0.03;
    pointer-events: none;
}

.svr-converter-box__tool {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 
        inset 0 0 20px rgba(0,0,0,0.5),
        0 20px 40px rgba(0,0,0,0.2);
}

.svr-converter-input {
    text-shadow: 0 0 10px rgba(255,255,255,0.2);
    transition: all var(--svr-transition-fast);
}

.svr-converter-input:focus {
    border-bottom-color: var(--svr-color-text-light);
    text-shadow: 0 0 15px rgba(255,255,255,0.5);
}

.svr-converter-input--readonly {
    text-shadow: 0 0 15px rgba(230, 185, 83, 0.4);
}

/* 4. Seasonal Foraging Overhaul */
.svr-foraging-card {
    background: linear-gradient(to bottom, #fff 0%, var(--svr-color-bg-light) 100%);
    border: none;
    box-shadow: 0 10px 20px rgba(0,0,0,0.03);
    position: relative;
}

.svr-foraging-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid transparent;
    background: linear-gradient(135deg, rgba(43,76,59,0.2) 0%, transparent 100%) border-box;
    -webkit-mask: linear-gradient(var(--svr-color-text-light) 0 0) padding-box, linear-gradient(var(--svr-color-text-light) 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.svr-foraging-card:hover::after {
    opacity: 1;
}

.svr-foraging-card__img-wrap {
    background: linear-gradient(135deg, var(--svr-color-accent-green-light) 0%, #e2efe8 100%);
    box-shadow: 
        inset 0 2px 5px rgba(255,255,255,0.8),
        0 8px 15px rgba(43,76,59,0.1);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.svr-foraging-card:hover .svr-foraging-card__img-wrap {
    transform: scale(1.1) rotate(5deg);
}

/* 5. Live Masterclass Overhaul */
.svr-live-event__overlay {
    background: radial-gradient(circle at center, rgba(18,18,18,0.4) 0%, rgba(18,18,18,0.9) 100%);
}

.svr-countdown__num {
    background: linear-gradient(180deg, #fff 0%, var(--svr-color-accent-gold) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 4s ease infinite;
    text-shadow: 0 10px 30px rgba(230, 185, 83, 0.2);
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.svr-live-event__badge {
    background: rgba(255, 71, 87, 0.15);
    border: 1px solid rgba(255, 71, 87, 0.3);
    box-shadow: 0 0 20px rgba(255, 71, 87, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ==========================================================================
   PREMIUM VISUAL OVERHAUL - COMPONENTS 6-10
   ========================================================================== */

/* 6. Ingredient Substitution Engine Overhaul */
.svr-section-substitution {
    background: linear-gradient(180deg, #faf9f6 0%, #fff 100%);
    position: relative;
}

.svr-sub-input {
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    background: var(--svr-color-text-light);
}

.svr-sub-input:focus {
    box-shadow: 0 10px 30px rgba(230, 185, 83, 0.15);
}

.svr-sub-card {
    background: var(--svr-color-text-light);
    border: 1px solid var(--svr-color-border-light);
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.svr-sub-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    border-color: rgba(230, 185, 83, 0.5);
}

.svr-sub-card__arrow {
    background: linear-gradient(90deg, var(--svr-color-accent-gold) 0%, #d4a342 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(230, 185, 83, 0.3));
}

/* 7. Culinary Glossary Overhaul */
.svr-glossary-card {
    position: relative;
    overflow: hidden;
}

.svr-glossary-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--svr-color-accent-green) 0%, var(--svr-color-accent-gold) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.svr-glossary-card:hover::before {
    opacity: 1;
}

.svr-glossary-card__term {
    background: linear-gradient(135deg, var(--svr-color-accent-green) 0%, #1a3024 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 8. Recipe Comparison Matrix Overhaul */
.svr-section-compare {
    background: radial-gradient(circle at center, var(--svr-color-bg-dark) 0%, var(--svr-color-sidebar) 100%);
}

.svr-compare-grid {
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.svr-compare-col--highlight {
    background: linear-gradient(180deg, rgba(230, 185, 83, 0.15) 0%, rgba(230, 185, 83, 0.02) 100%);
    border-left: 1px solid rgba(230, 185, 83, 0.2);
    border-right: 1px solid rgba(230, 185, 83, 0.2);
    box-shadow: inset 0 0 40px rgba(230, 185, 83, 0.05);
}

.svr-compare-badge {
    box-shadow: 0 0 15px rgba(230, 185, 83, 0.4);
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0% { box-shadow: 0 0 10px rgba(230, 185, 83, 0.3); }
    50% { box-shadow: 0 0 20px rgba(230, 185, 83, 0.6); }
    100% { box-shadow: 0 0 10px rgba(230, 185, 83, 0.3); }
}

.svr-compare-cell--header img {
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.svr-compare-col:hover .svr-compare-cell--header img {
    transform: scale(1.1);
    border-color: var(--svr-color-accent-gold);
}

/* 9. Zero-Waste Hacks Overhaul */
.svr-zw-card {
    background: var(--svr-color-text-light);
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    border-top: 4px solid transparent;
    background-image: linear-gradient(var(--svr-color-text-light), var(--svr-color-text-light)), linear-gradient(90deg, var(--svr-color-accent-green), var(--svr-color-accent-gold));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.svr-zw-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.svr-zw-card__icon {
    background: linear-gradient(135deg, var(--svr-color-accent-green-light) 0%, #fff 100%);
    width: 80px; height: 80px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 4px 10px rgba(255,255,255,0.8), 0 5px 15px rgba(43,76,59,0.1);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.svr-zw-card:hover .svr-zw-card__icon {
    transform: scale(1.1) rotate(10deg);
}

/* 10. Chef's Knife Guide Overhaul */
.svr-knife-guide-container {
    background: linear-gradient(135deg, #fff 0%, #faf9f6 100%);
    position: relative;
}

.svr-knife-guide-container::before {
    content: '';
    position: absolute;
    top: 0; right: 0; width: 50%; height: 100%;
    background-image: radial-gradient(var(--svr-color-border-light) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.5;
    pointer-events: none;
}

.svr-knife-img {
    filter: drop-shadow(0 30px 40px rgba(0,0,0,0.2));
    transition: filter 0.5s ease;
}

.svr-knife-guide-container:hover .svr-knife-img {
    filter: drop-shadow(0 35px 50px rgba(230, 185, 83, 0.3));
}

.svr-hotspot__dot {
    background: linear-gradient(135deg, var(--svr-color-text-light) 0%, var(--svr-color-accent-gold) 100%);
}

/* ==========================================================================
   PREMIUM VISUAL OVERHAUL - COMPONENTS 11-15
   ========================================================================== */

/* 11. Sommelier Wine Pairing Tool Overhaul */
.svr-section-wine-pairing {
    background: radial-gradient(circle at right center, #1a1a1a 0%, var(--svr-color-bg-dark) 100%);
}

.svr-wine-select {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}

.svr-wine-select:focus {
    border-color: var(--svr-color-accent-gold);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5), 0 0 20px rgba(230, 185, 83, 0.2);
}

.svr-wine-card {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}

.svr-wine-card__bottle {
    position: relative;
    background: transparent;
    z-index: 1;
}

.svr-wine-card__bottle::after {
    content: '';
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(114, 47, 55, 0.4) 0%, transparent 70%);
    z-index: -1;
    border-radius: 50%;
    animation: pulse-wine 4s ease-in-out infinite;
}

@keyframes pulse-wine {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* 12. Community Challenges Overhaul */
.svr-challenge-card {
    background: linear-gradient(180deg, #fff 0%, var(--svr-color-bg-light) 100%);
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
}

.svr-challenge-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 3px;
    background: var(--svr-color-accent-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.svr-challenge-card:hover::before {
    transform: scaleX(1);
}

.svr-progress-bar__fill {
    background: linear-gradient(90deg, var(--svr-color-accent-green) 0%, #6cdb9b 100%);
    box-shadow: 0 0 10px rgba(43,76,59,0.4);
    position: relative;
    overflow: hidden;
}

.svr-progress-bar__fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer-progress 2s infinite;
}

@keyframes shimmer-progress {
    100% { transform: translateX(100%); }
}

/* 13. Audio Recipe Player Overhaul */
.svr-audio-player {
    background: linear-gradient(135deg, var(--svr-color-bg-dark) 0%, #1a1a1a 100%);
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 
        0 20px 40px rgba(0,0,0,0.4),
        0 0 0 1px rgba(255,255,255,0.05) inset;
}

.svr-audio-player__cover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    border: 2px solid rgba(255,255,255,0.1);
}

.svr-audio-btn--play:hover ~ .svr-audio-player__cover img,
.svr-audio-btn--play:active ~ .svr-audio-player__cover img {
    animation: spin-record 4s linear infinite;
}

@keyframes spin-record {
    100% { transform: rotate(360deg); }
}

/* 14. Gamification Badges Overhaul */
.svr-badge-item__icon--unlocked {
    background: linear-gradient(135deg, var(--svr-color-accent-gold) 0%, var(--svr-color-text-light) 50%, #d4a342 100%);
    box-shadow: 
        0 15px 30px rgba(230, 185, 83, 0.4),
        inset 0 0 15px rgba(255,255,255,0.8);
    border: 4px solid var(--svr-color-text-light);
    position: relative;
}

.svr-badge-item__icon--unlocked::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(230, 185, 83, 0.3);
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    100% { transform: scale(1.3); opacity: 0; }
}

.svr-badge-item__icon--locked {
    background: #f5f5f5;
    box-shadow: inset 0 5px 10px rgba(0,0,0,0.05);
    border: 2px dashed rgba(0,0,0,0.1);
}

/* 15. Scaling Calculator Overhaul */
.svr-scaling-box {
    border: 1px solid var(--svr-color-border-light);
}

.svr-scaling-box__header {
    background: linear-gradient(135deg, var(--svr-color-bg-dark) 0%, #2a2a2a 100%);
    position: relative;
    overflow: hidden;
}

.svr-scaling-box__header::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(230, 185, 83, 0.2) 0%, transparent 70%);
}

.svr-scaling-btn {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.svr-scaling-btn:active {
    transform: scale(0.95);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.svr-scaling-item__amount {
    background: linear-gradient(90deg, var(--svr-color-accent-green-light) 0%, #e2efe8 100%);
    box-shadow: inset 0 1px 3px rgba(255,255,255,0.8);
    border: 1px solid rgba(43,76,59,0.1);
}

/* ==========================================================================
   PREMIUM VISUAL OVERHAUL - COMPONENTS 16-20
   ========================================================================== */

/* 16. Farm Locator Overhaul */
.svr-locator-search {
    background: var(--svr-color-text-light);
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.svr-locator-search:focus-within {
    border-color: var(--svr-color-accent-green);
    box-shadow: 0 10px 30px rgba(43, 76, 59, 0.15);
}

.svr-locator-card {
    background: linear-gradient(145deg, #fff 0%, var(--svr-color-bg-light) 100%);
    box-shadow: inset 0 2px 4px rgba(255,255,255,1), 0 10px 20px rgba(0,0,0,0.02);
}

.svr-locator-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

.svr-locator-card__map {
    background: linear-gradient(135deg, var(--svr-color-accent-green-light) 0%, #fff 100%);
    box-shadow: inset 0 2px 5px rgba(255,255,255,0.8), 0 5px 15px rgba(43,76,59,0.15);
}

/* 17. Flavor Wheel Overhaul */
.svr-section-flavor-wheel {
    background: radial-gradient(circle at center, var(--svr-color-bg-dark) 0%, var(--svr-color-sidebar) 100%);
    position: relative;
    overflow: hidden;
}

.svr-section-flavor-wheel::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.02) 0deg 10deg, transparent 10deg 20deg);
    animation: rotate-slow 60s linear infinite;
    pointer-events: none;
}

.svr-flavor-item--active {
    box-shadow: 0 0 25px rgba(255,255,255,0.2);
    transform: scale(1.05);
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.svr-flavor-column--bridge {
    text-shadow: 0 0 20px var(--svr-color-accent-gold);
    animation: pulse-bridge 2s infinite;
}

@keyframes pulse-bridge {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* 18. Macro Nutrition Visualizer Overhaul */
.svr-macros-circle {
    box-shadow: 
        inset 0 0 40px rgba(0,0,0,0.05),
        0 20px 50px rgba(0,0,0,0.1);
    position: relative;
}

.svr-macros-circle::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px dashed rgba(0,0,0,0.1);
    animation: spin-record 20s linear infinite;
}

.svr-macro-bar__fill {
    position: relative;
    overflow: hidden;
}

.svr-macro-bar__fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer-progress 3s infinite;
}

/* 19. Pro Kitchen Tour Overhaul */
.svr-tour-hotspot__pulse {
    background: linear-gradient(135deg, var(--svr-color-text-light) 0%, #e0e0e0 100%);
    box-shadow: 0 0 0 5px rgba(255,255,255,0.4);
    animation: pulse-pro 2s infinite;
}

@keyframes pulse-pro {
    0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
    70% { box-shadow: 0 0 0 20px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.svr-tour-tooltip {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.svr-tour-tooltip::after {
    border-color: rgba(255,255,255,0.95) transparent transparent transparent;
}

/* 20. Cook Mode Immersive Preview Overhaul */
.svr-section-cook-mode {
    box-shadow: inset 0 0 100px rgba(0,0,0,0.8);
}

.svr-cook-mode__step {
    text-shadow: 0 10px 30px rgba(0,0,0,0.8);
    background: linear-gradient(180deg, #fff 0%, #e0e0e0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.svr-btn-cook {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.svr-btn-cook--next {
    background: linear-gradient(135deg, var(--svr-color-accent-green) 0%, #1a3024 100%);
    border: none;
    box-shadow: 0 15px 30px rgba(43, 76, 59, 0.4);
}

.svr-btn-cook--next:hover {
    background: linear-gradient(135deg, #2a4a39 0%, #0d1a13 100%);
    transform: translateY(-3px);
}

/* ==========================================================================
   HOME 2: BENTO LAYOUT REDESIGN
   ========================================================================== */

.svr-home-2 {
    background-color: #f7f4ec; /* Warm beige background */
    color: var(--svr-color-text-dark);
}

/* 1. Top Navigation */
.svr-topbar {
    background-color: #f7f4ec;
    padding: 20px 40px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.svr-topbar__container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.svr-topnav {
    display: flex;
    gap: 30px;
}

.svr-topnav__link {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--svr-color-text-dark);
    text-decoration: none;
    transition: color 0.3s ease;
}

.svr-topnav__link:hover {
    color: var(--svr-color-accent-green);
}

.svr-topbar__actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.svr-search-bar {
    position: relative;
    background: var(--svr-color-text-light);
    border-radius: 30px;
    padding: 5px 15px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.svr-search-bar__input {
    border: none;
    outline: none;
    padding: 10px;
    width: 250px;
    font-family: var(--svr-font-body);
}

.svr-search-bar__btn {
    background: none;
    border: none;
    color: var(--svr-color-text-muted-light);
    cursor: pointer;
}

.svr-topbar__icon {
    font-size: 1.2rem;
    color: var(--svr-color-text-dark);
}

.svr-topbar__avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* 2. Bento Grid Layout */
.svr-bento-layout {
    max-width: 1400px;
    margin: 20px auto 60px;
    padding: 0 40px;
}

.svr-bento-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas: 
        "hero pantry"
        "mood plan"
        "seasonal plan"
        "bottom bottom";
    gap: 20px;
}

/* Common Bento Card Style */
.svr-bento-hero, .svr-bento-pantry, .svr-bento-mood, .svr-bento-plan, .svr-bento-seasonal {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

/* 3. Hero Recipe Card */
.svr-bento-hero {
    grid-area: hero;
    background: var(--svr-color-text-light);
    display: flex;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.svr-hero-content {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.svr-hero-title {
    font-family: var(--svr-font-heading);
    font-size: 3.5rem;
    line-height: 1.1;
    color: #1a1a1a;
    margin-bottom: 20px;
}

.svr-hero-desc {
    color: var(--svr-color-text-muted-light);
    font-size: 1.1rem;
    margin-bottom: 30px;
    max-width: 90%;
}

.svr-recipe-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--svr-color-text-muted-light);
}

.svr-rating i { color: var(--svr-color-accent-gold); }

.svr-hero-actions {
    display: flex;
    gap: 15px;
}

.svr-hero-actions .svr-btn-primary {
    padding: 15px 30px;
    border-radius: 30px;
    font-weight: 600;
}

.svr-hero-actions .svr-btn-secondary {
    padding: 15px 30px;
    border-radius: 30px;
    background: #f5f5f5;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.svr-hero-actions .svr-btn-secondary:hover {
    background: #e0e0e0;
}

.svr-hero-image {
    flex: 1;
    min-height: 400px;
}

.svr-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 20px 20px 0;
}

/* 4. Pantry Search */
.svr-bento-pantry {
    grid-area: pantry;
    background: #233e21; /* Dark green */
    color: var(--svr-color-text-light);
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.svr-bento-pantry h2 {
    font-family: var(--svr-font-heading);
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.svr-bento-pantry p {
    color: #a4b3a3;
    margin-bottom: 30px;
}

.svr-pantry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.svr-tag {
    background: var(--svr-color-text-light);
    color: #233e21;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.svr-tag--add {
    background: rgba(255,255,255,0.1);
    color: var(--svr-color-text-light);
    border: 1px dashed rgba(255,255,255,0.3);
    cursor: pointer;
}

.svr-btn-pantry {
    background: var(--svr-color-text-dark);
    color: var(--svr-color-text-light);
    border: none;
    padding: 15px 30px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.3s;
}

.svr-btn-pantry:hover {
    background: #1a1a1a;
}

/* 5. Browse By Mood */
.svr-bento-mood {
    grid-area: mood;
    background: var(--svr-color-text-light);
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.svr-mood-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.svr-mood-track {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.svr-mood-track::-webkit-scrollbar { display: none; }

.svr-mood-card {
    min-width: 140px;
    height: 140px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.svr-mood-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.svr-mood-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.2));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    color: var(--svr-color-text-light);
}

.svr-mood-card__save {
    align-self: flex-end;
    background: rgba(255,255,255,0.2);
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.svr-mood-card h4 {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
}

/* 6. Meal Plan */
.svr-bento-plan {
    grid-area: plan;
    background: var(--svr-color-text-light);
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
}

.svr-plan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.svr-plan-select {
    border: none;
    color: var(--svr-color-text-muted-light);
    font-size: 0.85rem;
    font-weight: 600;
    outline: none;
}

.svr-plan-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

.svr-plan-item {
    display: flex;
    gap: 15px;
    align-items: center;
}

.svr-plan-item img {
    width: 70px;
    height: 70px;
    border-radius: 15px;
    object-fit: cover;
}

.svr-day {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--svr-color-accent-gold);
    letter-spacing: 0.1em;
}

.svr-plan-item h4 {
    font-size: 1rem;
    margin: 3px 0;
}

.svr-plan-item p {
    font-size: 0.8rem;
    color: var(--svr-color-text-muted-light);
}

.svr-btn-plan-full {
    display: block;
    text-align: center;
    padding: 15px;
    background: #f9f9f9;
    color: var(--svr-color-text-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 10px;
    margin-top: 20px;
    transition: background 0.3s;
}

.svr-btn-plan-full:hover { background: #f0f0f0; }

/* 7. Seasonal Spotlight */
.svr-bento-seasonal {
    grid-area: seasonal;
    background: #2b4c3b;
    color: var(--svr-color-text-light);
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.svr-seasonal-info h3 {
    font-family: var(--svr-font-heading);
    font-size: 2rem;
}

.svr-seasonal-info p {
    color: #a4b3a3;
    margin: 10px 0 20px;
}

.svr-btn-outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: var(--svr-color-text-light);
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.svr-seasonal-items {
    display: flex;
    gap: 20px;
    z-index: 2;
}

.svr-veg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.svr-veg-icon {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--svr-color-accent-green-light);
    font-size: 1.2rem;
}

.svr-veg span {
    font-size: 0.75rem;
    font-weight: 600;
}

.svr-seasonal-bg {
    position: absolute;
    right: -50px;
    bottom: -50px;
    height: 150%;
    opacity: 0.3;
    pointer-events: none;
}

/* 8. Bottom Cards (Vertical Stack) */
.svr-bento-bottom {
    grid-area: bottom;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.svr-bot-card {
    background: var(--svr-color-text-light);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
}

.svr-bot-card--vertical {
    width: 100%;
}

.svr-bot-card__img {
    width: 80px;
    height: 80px;
    border-radius: 15px;
    object-fit: cover;
}

.svr-bot-card__content {
    flex: 1;
}

.svr-bot-card h4 {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.svr-bot-card p {
    font-size: 0.85rem;
    color: var(--svr-color-text-muted-light);
    margin-bottom: 15px;
}

.svr-bot-link {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--svr-color-text-dark);
    text-decoration: none;
}

.svr-bot-card__icon {
    position: absolute;
    right: -20px;
    bottom: -30px;
    opacity: 0.3;
}

/* Responsive Overrides */
@media (max-width: 1024px) {
    .svr-bento-grid {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "hero"
            "pantry"
            "mood"
            "plan"
            "seasonal"
            "bottom";
    }
    
    .svr-hero-content {
        padding: 30px;
    }
    
    .svr-hero-image {
        display: none;
    }
}

/* ==========================================================================
   RECIPE SINGLE DETAIL UPGRADES
   ========================================================================== */

/* 1. Recipe Detail Layout Adjustments */
.svr-recipe-detail-body {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}
.svr-recipe-detail-main {
    flex: 1;
}
.svr-recipe-detail-sidebar {
    width: 320px;
    position: sticky;
    top: 100px; /* Below top nav */
}

/* 2. Cinematic Instructions (Fixing invisible text) */
.svr-instruction-cinematic {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
    align-items: flex-start;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.svr-instruction-cinematic:last-child {
    border-bottom: none;
}
.svr-instruction-cinematic__num {
    font-family: var(--svr-font-heading);
    font-size: 3rem;
    color: var(--svr-color-accent-gold);
    line-height: 0.8;
    font-style: italic;
    opacity: 0.8;
}
.svr-instruction-cinematic__content {
    flex: 1;
}
.svr-instruction-cinematic__content h4 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--svr-color-text-dark);
}
.svr-instruction-cinematic__content p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--svr-color-text-muted-light);
    margin: 0;
}

/* 3. Table of Contents & Sidebar Widgets */
.svr-toc-widget {
    background: var(--svr-color-text-light);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    margin-bottom: 30px;
}
.svr-toc-widget h3 {
    font-size: 1.1rem;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.svr-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.svr-toc-list a {
    color: var(--svr-color-text-muted-light);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.3s ease;
}
.svr-toc-list a:hover,
.svr-toc-list a.active {
    color: var(--svr-color-accent-gold);
}
.svr-toc-list a i {
    font-size: 0.8rem;
    opacity: 0.5;
}

/* Print Action Button */
.svr-btn-action-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px;
    background: var(--svr-color-surface);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 10px;
    color: var(--svr-color-text-dark);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 15px;
}
.svr-btn-action-block:hover {
    background: var(--svr-color-text-light);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transform: translateY(-2px);
}

/* 4. Chef's Notes Block */
.svr-chefs-notes {
    background: var(--svr-color-surface);
    border-left: 4px solid var(--svr-color-accent-gold);
    padding: 30px;
    border-radius: 0 15px 15px 0;
    margin: 40px 0;
    position: relative;
}
.svr-chefs-notes::before {
    content: '\f10d'; /* quote left */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 3rem;
    color: var(--svr-color-accent-gold);
    opacity: 0.1;
}
.svr-chefs-notes h4 {
    color: var(--svr-color-accent-gold);
    margin-bottom: 10px;
    font-size: 1.1rem;
}
.svr-chefs-notes p {
    font-style: italic;
    color: var(--svr-color-text-muted-light);
    line-height: 1.7;
    margin: 0;
}

/* Responsive for Recipe Single */
@media (max-width: 1024px) {
    .svr-recipe-detail-body {
        flex-direction: column;
    }
    .svr-recipe-detail-sidebar {
        width: 100%;
        position: static;
        order: -1; /* Move TOC to top on mobile */
    }
}

/* 5. Social Share Banner Generator Ã¢â‚¬â€ Canvas-Powered */
.svr-share-generator {
    margin-block-start: 60px;
    padding-block-start: 50px;
    border-top: 1px solid rgba(0,0,0,0.07);
}

.svr-share-generator__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    gap: 20px;
}

.svr-share-generator__header h3 {
    font-family: var(--svr-font-heading);
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    margin-bottom: 6px;
}

.svr-share-generator__header p {
    color: var(--svr-color-text-muted-light);
    font-size: 0.9rem;
    margin: 0;
}

.svr-share-generator__badge {
    background: linear-gradient(135deg, var(--svr-color-accent-gold), #e8a420);
    color: #1a1a1a;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Format Tabs */
.svr-share-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.svr-share-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 18px;
    background: var(--svr-color-text-light);
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--svr-font-body);
    transition: all 0.25s ease;
    min-width: 80px;
}

.svr-share-tab i {
    font-size: 1.2rem;
    color: var(--svr-color-text-muted-light);
    transition: color 0.25s ease;
}

.svr-share-tab span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--svr-color-text-dark);
}

.svr-share-tab small {
    font-size: 0.65rem;
    color: var(--svr-color-text-muted-light);
    font-weight: 400;
}

.svr-share-tab:hover,
.svr-share-tab.active {
    background: var(--svr-color-bg-dark);
    border-color: var(--svr-color-bg-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.svr-share-tab:hover i,
.svr-share-tab.active i {
    color: var(--svr-color-accent-gold);
}

.svr-share-tab:hover span,
.svr-share-tab.active span,
.svr-share-tab:hover small,
.svr-share-tab.active small {
    color: var(--svr-color-text-light);
}

/* Theme Swatches */
.svr-share-themes {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
}

.svr-share-themes__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--svr-color-text-muted-light);
}

.svr-share-swatch {
    padding: 7px 16px;
    border-radius: 20px;
    border: 2px solid transparent;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--svr-font-body);
}

.svr-share-swatch--dark {
    background: #1a1a1a;
    color: #c9a84c;
}

.svr-share-swatch--forest {
    background: #233e21;
    color: #d4e8a0;
}

.svr-share-swatch--cream {
    background: #f7f4ec;
    color: #9c6e1e;
    border-color: rgba(0,0,0,0.1);
}

.svr-share-swatch.active {
    outline: 3px solid var(--svr-color-accent-gold);
    outline-offset: 2px;
    transform: scale(1.06);
}

/* Canvas Preview Area */
.svr-share-preview {
    background: linear-gradient(135deg, #f0ede5, #e8e3d8);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    margin-bottom: 20px;
    position: relative;
}

.svr-share-canvas {
    display: block;
    border-radius: 12px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.25);
    transition: width 0.3s ease, height 0.3s ease;
    max-width: 100%;
}

/* Action Buttons Row */
.svr-share-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.svr-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: all 0.25s ease;
    font-family: var(--svr-font-body);
}

.svr-share-btn--download {
    background: var(--svr-color-bg-dark);
    color: var(--svr-color-accent-gold);
    flex: 1;
    justify-content: center;
}

.svr-share-btn--download:hover {
    background: #111;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.svr-share-btn--ig {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: var(--svr-color-text-light);
}

.svr-share-btn--fb {
    background: #1877f2;
    color: var(--svr-color-text-light);
}

.svr-share-btn--pt {
    background: #e60023;
    color: var(--svr-color-text-light);
}

.svr-share-btn--ig:hover,
.svr-share-btn--fb:hover,
.svr-share-btn--pt:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.svr-share-hint {
    font-size: 0.8rem;
    color: var(--svr-color-text-muted-light);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.svr-share-hint i {
    color: var(--svr-color-accent-gold);
}

/* ==========================================================================
   RECIPE SINGLE Ã¢â‚¬â€ FORCE DARK TEXT (override white body color)
   The body has color:var(--svr-color-text-light) for the dark dashboard. The recipe detail
   section has a white/light card background, so we must hard-reset
   every text element here to dark colours using direct hex values.
   ========================================================================== */

.svr-recipe-detail-body,
.svr-recipe-detail-body p,
.svr-recipe-detail-body h2,
.svr-recipe-detail-body h3,
.svr-recipe-detail-body h4,
.svr-recipe-detail-body h5,
.svr-recipe-detail-body span,
.svr-recipe-detail-body li,
.svr-recipe-detail-body a {
    color: #2d2d2d;
}

/* Specific overrides inside instruction blocks */
.svr-instruction-cinematic__content h4 {
    color: #1a1a1a !important;
    font-size: 1.25rem;
}
.svr-instruction-cinematic__content p {
    color: #4a4a4a !important;
    font-size: 1.05rem;
    line-height: 1.8;
}
.svr-instruction-cinematic__num {
    color: var(--svr-color-accent-gold) !important;
}

/* Chef's notes text */
.svr-chefs-notes h4 {
    color: var(--svr-color-accent-gold) !important;
}
.svr-chefs-notes p {
    color: #555555 !important;
}

/* TOC links */
.svr-toc-list a {
    color: #666666 !important;
}
.svr-toc-list a:hover,
.svr-toc-list a.active {
    color: var(--svr-color-accent-gold) !important;
}
.svr-toc-widget h3 {
    color: #1a1a1a !important;
}

/* Recipe section titles */
.svr-recipe-section-title {
    color: #1a1a1a !important;
}

/* Ingredient cards */
.svr-ingredient-card__name {
    color: #1a1a1a !important;
}
.svr-ingredient-card__qty {
    color: #666666 !important;
}

/* Nutrition widget */
.svr-nutrition-widget h4,
.svr-nutrition-item span,
.svr-nutrition-item strong {
    color: #1a1a1a !important;
}

/* Social share generator text */
.svr-share-generator h3 {
    color: #1a1a1a !important;
}
.svr-share-generator p {
    color: #666666 !important;
}
.svr-share-tab span,
.svr-share-tab small {
    color: #1a1a1a !important;
}
.svr-share-tab:hover span,
.svr-share-tab.active span,
.svr-share-tab:hover small,
.svr-share-tab.active small {
    color: #fff !important;
}
.svr-share-themes__label {
    color: #666666 !important;
}
.svr-share-hint {
    color: #888888 !important;
}

/* Button action block text */
.svr-btn-action-block {
    color: #1a1a1a !important;
}

/* ==========================================================================
   HOME 2 Ã¢â‚¬â€ FULL LAYOUT REDESIGN (uses same .svr-main-content wrapper)
   ========================================================================== */

/* Ã¢â€â‚¬Ã¢â€â‚¬ Shared row wrapper Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬ */
.svr-h2-row {
    padding-inline: 40px;
    margin-bottom: 20px;
}

/* Ã¢â€â‚¬Ã¢â€â‚¬ Label / badge Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬ */
.svr-h2-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--svr-color-text-muted-light);
    display: block;
    margin-bottom: 10px;
}
.svr-h2-label--gold { color: var(--svr-color-accent-gold); }
.svr-h2-label--light { color: rgba(255,255,255,0.6); }

/* Ã¢â€â‚¬Ã¢â€â‚¬ Section header row Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬ */
.svr-h2-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.svr-h2-section-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
}

/* Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â
   ROW 1 Ã¢â‚¬â€ HERO BENTO (3 columns)
   Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â */
.svr-h2-row--hero {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: 20px;
    align-items: stretch;
}

/* 1A. Hero text card Ã¢â‚¬â€ Rich Premium */
.svr-h2-hero-text {
    background: linear-gradient(145deg, #fff 0%, #f9f8f4 100%);
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    border-radius: 20px;
    padding: 40px 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 15px;
    min-height: 360px;
    position: relative;
    overflow: hidden;
}
.svr-h2-ht-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}
.svr-h2-ht-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--svr-color-text-dark);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--svr-color-text-light);
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
.svr-h2-ht-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--svr-color-accent-gold);
    display: inline-block;
}
.svr-h2-ht-cuisine {
    font-family: var(--svr-font-heading);
    font-style: italic;
    color: var(--svr-color-text-muted-light);
    font-size: 1.1rem;
}
.svr-h2-ht-watermark {
    position: absolute;
    top: -20px;
    right: 10px;
    font-family: var(--svr-font-heading);
    font-size: 12rem;
    font-style: italic;
    color: rgba(0,0,0,0.02);
    line-height: 1;
    pointer-events: none;
    z-index: 1;
}
.svr-h2-hero-title {
    font-family: var(--svr-font-heading);
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    color: var(--svr-color-text-dark);
    line-height: 1.05;
    font-weight: 500;
    position: relative;
    z-index: 2;
    margin-top: 10px;
}
.svr-h2-ht-rule {
    width: 60px;
    height: 2px;
    background: var(--svr-color-accent-gold);
    margin: 5px 0 15px;
    position: relative;
    z-index: 2;
}
.svr-h2-ht-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
    z-index: 2;
}
.svr-h2-chip {
    font-size: 0.75rem;
    color: var(--svr-color-text-muted-light);
    background: rgba(0,0,0,0.03);
    padding: 6px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.svr-h2-chip i {
    color: var(--svr-color-accent-gold);
}
.svr-h2-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--svr-color-text-muted-light);
    position: relative;
    z-index: 2;
    margin-top: auto;
}
.svr-h2-stars { color: var(--svr-color-accent-gold); letter-spacing: 2px; font-size: 0.8rem; }
.svr-h2-meta-count { font-weight: 500; }
.svr-h2-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.svr-h2-btn-cook {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--svr-color-accent-green);
    color: var(--svr-color-text-light);
    padding: 14px 22px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.svr-h2-btn-cook:hover { background: var(--svr-color-accent-green-hover); transform: translateY(-1px); }
.svr-h2-btn-watch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1.5px solid rgba(0,0,0,0.12);
    color: var(--svr-color-text-dark);
    padding: 14px 22px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.svr-h2-btn-watch:hover { border-color: var(--svr-color-accent-green); color: var(--svr-color-accent-green); }

/* 1B. Hero image Ã¢â‚¬â€ full bleed */
.svr-h2-hero-img {
    border-radius: 20px;
    overflow: hidden;
    margin: 0;
    position: relative;
    min-height: 360px;
}
.svr-h2-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center !important;
    display: block;
}
.svr-h2-sparkle {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    color: var(--svr-color-text-light);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* 1C. Pantry widget */
.svr-h2-pantry {
    background: var(--svr-color-accent-green);
    border-radius: 20px;
    padding: 40px 30px;
    color: var(--svr-color-text-light);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 360px;
}
.svr-h2-pantry h2 {
    font-family: var(--svr-font-heading);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--svr-color-text-light);
}
.svr-h2-pantry > p { font-size: 0.85rem; color: rgba(255,255,255,0.65); }
.svr-h2-pantry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block: 4px;
}
.svr-h2-tag {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--svr-color-text-light);
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
}
.svr-h2-tag--add {
    background: rgba(255,255,255,0.08);
    border: 1.5px dashed rgba(255,255,255,0.3);
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.svr-h2-btn-find {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1a1a1a;
    color: var(--svr-color-text-light);
    padding: 14px 22px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    border: none;
    cursor: pointer;
    margin-top: auto;
    transition: background 0.2s ease;
}
.svr-h2-btn-find:hover { background: #333; }

/* Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â
   ROW 2 Ã¢â‚¬â€ INSPIRATION + QUICK MEAL PLAN
   Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â */
.svr-h2-row--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}

/* Inspiration banner */
.svr-h2-inspire {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    min-height: 260px;
}
.svr-h2-inspire__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.svr-h2-inspire__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.25) 100%);
}
.svr-h2-inspire__content {
    position: relative;
    padding: 35px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
}
.svr-h2-inspire__content h3 {
    font-family: var(--svr-font-heading);
    font-size: clamp(2rem, 3vw, 2.8rem);
    color: var(--svr-color-text-light);
    line-height: 1.0;
    font-weight: 400;
}
.svr-h2-inspire__content p { font-size: 0.85rem; color: rgba(255,255,255,0.7); }
.svr-h2-btn-explore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--svr-color-accent-gold);
    color: #1a1a1a;
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    align-self: flex-start;
    margin-top: 6px;
    transition: opacity 0.2s ease;
}
.svr-h2-btn-explore:hover { opacity: 0.85; }

/* Quick meal plan */
.svr-h2-mealplan-quick {
    background: var(--svr-color-card-light);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.svr-h2-mq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.svr-h2-mq-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; color: var(--svr-color-text-muted-light); }
.svr-h2-mq-list { display: flex; flex-direction: column; gap: 0; }
.svr-h2-mq-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-block: 14px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.svr-h2-mq-item:last-child { border-bottom: none; }
.svr-h2-mq-item img {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}
.svr-h2-mq-day { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; color: var(--svr-color-text-muted-light); display: block; margin-bottom: 2px; }
.svr-h2-mq-item h4 { font-size: 0.9rem; font-weight: 600; color: var(--svr-color-text-dark); margin-bottom: 2px; }
.svr-h2-mq-item p { font-size: 0.78rem; color: var(--svr-color-text-muted-light); margin: 0; }

/* Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â
   ROW 3 Ã¢â‚¬â€ WEEKLY PLAN CALENDAR
   Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â */
.svr-h2-plan-full {
    background: var(--svr-color-card-light);
    border-radius: 20px;
    padding: 30px 40px;
    margin-inline: 40px;
    margin-bottom: 20px;
}
.svr-h2-plan-full__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.svr-h2-plan-full__header h3 { font-size: 1.2rem; font-weight: 700; color: var(--svr-color-text-dark); }
.svr-h2-plan-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.svr-h2-cal-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.svr-h2-cal-day strong, .svr-h2-cal-day i {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--svr-color-text-dark);
    font-style: normal;
}
.svr-h2-cal-day span {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--svr-color-text-muted-light);
    text-transform: uppercase;
}
.svr-h2-cal-day--done strong, .svr-h2-cal-day--done i {
    background: var(--svr-color-accent-green-light);
    border-color: var(--svr-color-accent-green-light);
    color: var(--svr-color-accent-green);
}
.svr-h2-cal-day--today strong {
    background: var(--svr-color-accent-gold);
    border-color: var(--svr-color-accent-gold);
    color: #1a1a1a;
    font-weight: 700;
}
.svr-h2-cal-day--weekend strong { color: var(--svr-color-text-muted-light); }

/* Tonight card */
.svr-h2-tonight-card {
    display: flex;
    align-items: center;
    gap: 20px;
}
.svr-h2-tonight-card img {
    width: 80px;
    height: 80px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
}
.svr-h2-tonight-card h4 { font-size: 1.1rem; color: var(--svr-color-text-dark); margin-bottom: 4px; }
.svr-h2-tonight-card p { font-size: 0.82rem; color: var(--svr-color-text-muted-light); margin: 0; }

/* Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â
   ROW 4 Ã¢â‚¬â€ BROWSE BY MOOD CAROUSEL
   Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â */
.svr-h2-row--mood { }
.svr-h2-mood-section { }
.svr-h2-mood-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}
.svr-h2-mood-card {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 1;
    cursor: pointer;
}
.svr-h2-mood-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.svr-h2-mood-card:hover img { transform: scale(1.06); }
.svr-h2-mood-card__inner {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px;
}
.svr-h2-mood-save { font-size: 0.9rem; color: var(--svr-color-text-light); align-self: flex-end; }
.svr-h2-mood-card__inner h4 {
    font-family: var(--svr-font-heading);
    font-size: 1.1rem;
    color: var(--svr-color-text-light);
    font-weight: 500;
    line-height: 1.2;
    align-self: flex-end;
}

/* Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â
   ROW 5 Ã¢â‚¬â€ SEASONAL SPOTLIGHT
   Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â */
.svr-h2-seasonal {
    background: var(--svr-color-accent-green);
    border-radius: 20px;
    margin-inline: 40px;
    margin-bottom: 20px;
    padding: 125px 40px;
    display: flex;
    align-items: center;
    gap: 50px;
    position: relative;
    overflow: hidden;
}
.svr-h2-seasonal__bg {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    opacity: 0.2;
}
.svr-h2-seasonal__left { flex-shrink: 0; }
.svr-h2-seasonal__left h3 {
    font-family: var(--svr-font-heading);
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    color: var(--svr-color-text-light);
    margin-bottom: 6px;
    font-weight: 400;
}
.svr-h2-seasonal__left p { font-size: 0.85rem; color: rgba(255,255,255,0.65); margin-bottom: 18px; }
.svr-h2-btn-outline {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.5);
    color: var(--svr-color-text-light);
    padding: 11px 20px;
    border-radius: 30px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.2s ease;
}
.svr-h2-btn-outline:hover { background: rgba(255,255,255,0.1); }
.svr-h2-seasonal__items {
    display: flex;
    gap: 25px;
    align-items: center;
    flex-wrap: wrap;
    position: relative; /* above bg image */
}
.svr-h2-veg { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.svr-h2-veg-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--svr-color-text-light);
    font-size: 1.1rem;
}
.svr-h2-veg span { font-size: 0.75rem; color: rgba(255,255,255,0.7); font-weight: 500; }

/* Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â
   ROW 6 Ã¢â‚¬â€ POPULAR RECIPE CARDS (reuse existing .svr-recipe-card)
   Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â */
.svr-h2-row--popular { }
.svr-h2-cards-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â
   ROW 7 Ã¢â‚¬â€ UTILITY CARDS (3-col)
   Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â */
.svr-h2-utility-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-inline: 40px;
    margin-bottom: 40px;
}
.svr-h2-util-card {
    background: var(--svr-color-card-light);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.svr-h2-util-card--dark {
    background: #1a1a1a;
}
.svr-h2-util-card--green {
    background: var(--svr-color-accent-green);
}
.svr-h2-util-card__img-wrap img {
    width: 80px;
    height: 80px;
    border-radius: 14px;
    object-fit: cover;
}
.svr-h2-util-card__icon-wrap {
    width: 52px;
    height: 52px;
    background: var(--svr-color-accent-green-light);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--svr-color-accent-green);
    font-size: 1.3rem;
}
.svr-h2-util-card__icon-wrap--light {
    background: rgba(255,255,255,0.15);
    color: var(--svr-color-text-light);
}
.svr-h2-util-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.svr-h2-util-card__body h4 {
    font-size: 1.15rem;
    font-weight: 700;
}
.svr-h2-util-card--dark .svr-h2-util-card__body h4 { color: var(--svr-color-text-light); }
.svr-h2-util-card--green .svr-h2-util-card__body h4 { color: var(--svr-color-text-light); }
.svr-h2-util-card__body p {
    font-size: 0.82rem;
    line-height: 1.65;
    color: var(--svr-color-text-muted-light);
    flex: 1;
    margin: 0;
}
.svr-h2-util-card--dark .svr-h2-util-card__body p { color: rgba(255,255,255,0.55); }
.svr-h2-util-card--green .svr-h2-util-card__body p { color: rgba(255,255,255,0.65); }
.svr-h2-util-link {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--svr-color-accent-gold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.2s ease;
}
.svr-h2-util-link:hover { gap: 9px; }
.svr-h2-util-link--dark { color: var(--svr-color-accent-green); }
.svr-h2-util-link--light { color: rgba(255,255,255,0.8); }

/* Ã¢â€â‚¬Ã¢â€â‚¬ Mobile collapse Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬Ã¢â€â‚¬ */
@media (max-width: 1200px) {
    .svr-h2-row--hero { grid-template-columns: 1fr 1fr; }
    .svr-h2-pantry { display: none; } /* simplify on medium screens */
    .svr-h2-mood-track { grid-template-columns: repeat(3, 1fr); }
    .svr-h2-cards-track { grid-template-columns: repeat(2, 1fr); }
    .svr-h2-utility-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .svr-h2-row { padding-inline: 20px; }
    .svr-h2-row--hero { grid-template-columns: 1fr; }
    .svr-h2-pantry { display: flex; }
    .svr-h2-row--split { grid-template-columns: 1fr; }
    .svr-h2-plan-full { margin-inline: 20px; }
    .svr-h2-seasonal { margin-inline: 20px; flex-direction: column; align-items: flex-start; gap: 25px; }
    .svr-h2-mood-track { grid-template-columns: repeat(2, 1fr); }
    .svr-h2-cards-track { grid-template-columns: 1fr; }
    .svr-h2-utility-grid { grid-template-columns: 1fr; padding-inline: 20px; }
}

/* ==========================================================================
   AESTHETIC ENHANCEMENTS - OVERRIDING RULES (APPEND-ONLY)
   ========================================================================== */

/* 1. Hero Text Card */
.svr-h2-hero-text {
    background: radial-gradient(circle at top left, #fff 0%, #f9f9f9 100%);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
}
.svr-h2-ht-watermark {
    text-shadow: 0 0 20px rgba(230, 185, 83, 0.15); /* Subtle gold glow */
}

/* 2. Pantry Widget */
.svr-h2-pantry {
    background: linear-gradient(145deg, var(--svr-color-accent-green) 0%, #152c20 100%) !important;
    box-shadow: inset 0 2px 15px rgba(0,0,0,0.2), 0 10px 30px rgba(0,0,0,0.1);
}
.svr-h2-tag {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    backdrop-filter: blur(4px);
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease !important;
}
.svr-h2-tag:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

/* 3. Weekly Inspiration Banner */
.svr-h2-inspire {
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}
.svr-h2-inspire__overlay {
    background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 100%) !important;
}
.svr-h2-inspire__bg {
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.svr-h2-inspire:hover .svr-h2-inspire__bg {
    transform: scale(1.04);
}

/* 4. Weekly Planner Timeline & Active Card */
.svr-timeline {
    position: relative;
}
.svr-timeline::before {
    content: '';
    position: absolute;
    top: 17px; /* Middle of the 36px dots */
    left: 20px;
    right: 20px;
    height: 2px;
    background: var(--svr-color-border-light);
    z-index: 0;
}
.svr-timeline-node {
    position: relative;
    z-index: 1;
}
.svr-timeline-node__dot {
    background: var(--svr-color-text-light); /* Opaque background over the line */
    box-shadow: 0 0 0 4px var(--svr-color-text-light); /* Space around dot to clear line */
}
.svr-timeline-node--active .svr-timeline-node__dot {
    box-shadow: 0 0 0 4px var(--svr-color-text-light), 0 0 10px rgba(230, 185, 83, 0.3);
}

.svr-planner-active-card {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}
.svr-planner-active-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

/* 5. Utility Cards (AI Chef, Start Planning, Stories) */
.svr-h2-util-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.svr-h2-util-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
}
.svr-h2-util-card--dark {
    background: linear-gradient(135deg, #1f1f1f 0%, #121212 100%) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 15px 30px rgba(0,0,0,0.1);
}
.svr-h2-util-card--green {
    background: linear-gradient(135deg, #2b4c3b 0%, #1b3025 100%) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 15px 30px rgba(0,0,0,0.1);
}
/* Micro animation on utility cards */
.svr-h2-util-card__icon-wrap {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
}
.svr-h2-util-card:hover .svr-h2-util-card__icon-wrap {
    transform: scale(1.08);
}

/* 6. General Layout enhancements */
.svr-h2-mood-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.svr-h2-mood-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* ==========================================================================
   EXTREME AESTHETIC ENHANCEMENTS & ANIMATIONS (APPEND-ONLY)
   ========================================================================== */

/* --- 1. Pantry Floaters --- */
.svr-h2-pantry {
    position: relative;
    overflow: hidden !important; /* contain floaters */
}
.svr-pantry-floaters {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
.svr-h2-pantry > *:not(.svr-pantry-floaters) {
    position: relative;
    z-index: 1;
}
.svr-pf {
    position: absolute;
    color: rgba(255, 255, 255, 0.04);
    font-size: 3rem;
    animation: floatItem 8s ease-in-out infinite;
}
.svr-pf-1 { top: -10%; left: 10%; font-size: 8rem; animation-delay: 0s; }
.svr-pf-2 { bottom: -10%; right: 15%; font-size: 6rem; animation-delay: -2s; animation-duration: 9s; }
.svr-pf-3 { top: 40%; right: -5%; font-size: 10rem; animation-delay: -4s; animation-duration: 12s; }
.svr-pf-4 { bottom: 20%; left: -5%; font-size: 5rem; animation-delay: -1s; animation-duration: 7s; }

@keyframes floatItem {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(15deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* Pulse on buttons */
.svr-h2-btn-find, .svr-h2-btn-cook, .svr-h2-btn-explore {
    animation: gentlePulse 3s infinite;
}
@keyframes gentlePulse {
    0% { box-shadow: 0 0 0 0 rgba(230, 185, 83, 0.4); }
    70% { box-shadow: 0 0 0 12px rgba(230, 185, 83, 0); }
    100% { box-shadow: 0 0 0 0 rgba(230, 185, 83, 0); }
}

/* --- 2. Sliding Glassmorphism Overlays --- */
/* For Recipe Cards and Mood Cards */
.svr-recipe-card__media, .svr-h2-mood-card {
    position: relative;
    overflow: hidden;
}
.svr-recipe-card__media::after, .svr-h2-mood-card::after {
    content: "START COOKING \2192";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--svr-color-text-light);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 10;
}
.svr-recipe-card:hover .svr-recipe-card__media::after,
.svr-h2-mood-card:hover::after {
    transform: translateY(0);
}

/* Scale up images inside cards on hover */
.svr-recipe-card__img, .svr-h2-mood-card img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.svr-recipe-card:hover .svr-recipe-card__img,
.svr-h2-mood-card:hover img {
    transform: scale(1.15) !important;
}

/* --- 3. Extreme Hovers --- */
.svr-recipe-card:hover, .svr-h2-mood-card:hover, .svr-h2-util-card:hover, .svr-planner-active-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15) !important;
}

/* --- 4. Utility Card Watermarks --- */
.svr-h2-util-card {
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.svr-h2-util-card > * {
    position: relative;
    z-index: 2; /* Content above watermark */
}
.svr-util-bg {
    position: absolute;
    bottom: -20px;
    right: -20px;
    font-size: 10rem;
    color: rgba(0, 0, 0, 0.03);
    z-index: 0;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}
.svr-h2-util-card--dark .svr-util-bg { color: rgba(255, 255, 255, 0.03); }
.svr-h2-util-card--green .svr-util-bg { color: rgba(255, 255, 255, 0.04); }

.svr-h2-util-card:hover .svr-util-bg {
    transform: scale(1.4) rotate(-15deg);
}

/* --- 5. Seasonal Spotlight Vegetables Animation --- */
.svr-h2-veg-icon {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease !important;
}
.svr-h2-veg:hover .svr-h2-veg-icon {
    transform: scale(1.3) translateY(-10px) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
}

/* ==========================================================================
   ELEGANT INTERACTIVITY REFINEMENTS (APPEND-ONLY)
   ========================================================================== */

/* 1. Soften the harsh hovers */
.svr-recipe-card:hover, .svr-h2-mood-card:hover, .svr-h2-util-card:hover, .svr-planner-active-card:hover {
    transform: translateY(-3px) scale(1.0) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08) !important;
}

/* Refine image scale to be cinematic and slow */
.svr-recipe-card__img, .svr-h2-mood-card img {
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.svr-recipe-card:hover .svr-recipe-card__img,
.svr-h2-mood-card:hover img {
    transform: scale(1.04) !important;
}

/* Make glassmorphism sliding an elegant fade */
.svr-recipe-card__media::after, .svr-h2-mood-card::after {
    transform: translateY(10px) !important;
    opacity: 0 !important;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.svr-recipe-card:hover .svr-recipe-card__media::after,
.svr-h2-mood-card:hover::after {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* Make Utility Backgrounds rotate slower and elegantly */
.svr-util-bg {
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.svr-h2-util-card:hover .svr-util-bg {
    transform: scale(1.15) rotate(-5deg) !important;
}

/* 2. Meal Plan Quick: Hover Reveal */
.svr-h2-mq-item {
    position: relative;
    overflow: hidden;
    transition: background 0.4s ease, padding-left 0.4s ease;
}
.svr-h2-mq-item:hover {
    background: rgba(0,0,0,0.02);
    padding-left: 5px;
}
.svr-h2-mq-item img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.svr-h2-mq-item:hover img {
    transform: scale(1.08);
}
.svr-h2-mq-cook {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--svr-color-accent-gold);
    opacity: 0;
    transition: opacity 0.4s ease, right 0.4s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    pointer-events: none;
}
.svr-h2-mq-item:hover .svr-h2-mq-cook {
    opacity: 1;
    right: 30px;
}

/* 3. Your Weekly Plan: Timeline and Premium Shimmer */
.svr-timeline-node:hover {
    transform: scale(1.15);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.svr-planner-active-card {
    position: relative;
    overflow: hidden;
}
.svr-planner-active-card::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    animation: premiumShimmer 6s infinite;
    z-index: 10;
    pointer-events: none;
}
@keyframes premiumShimmer {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}

/* 4. Seasonal Spotlight: Cinematic Pan and Gentle Halos */
.svr-h2-seasonal {
    position: relative;
    overflow: hidden;
}
.svr-h2-seasonal__bg {
    transition: transform 20s linear !important; /* Extremely slow cinematic pan */
}
.svr-h2-seasonal:hover .svr-h2-seasonal__bg {
    transform: scale(1.08) translate(-1%, -1%) !important;
}
.svr-h2-veg-icon {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.6s ease, background 0.6s ease !important;
}
.svr-h2-veg:hover .svr-h2-veg-icon {
    transform: translateY(-3px) !important;
    background: rgba(255,255,255,0.1) !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.2), 0 5px 15px rgba(0,0,0,0.1) !important;
}

.svr-seasonal-floaters {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}
.svr-sf {
    position: absolute;
    color: rgba(255,255,255,0.1);
    animation: floatItem 15s ease-in-out infinite; /* Slower */
}
.svr-sf-1 { top: 10%; left: 30%; font-size: 8rem; animation-delay: 0s; }
.svr-sf-2 { bottom: -20%; right: 40%; font-size: 12rem; animation-delay: -5s; animation-duration: 20s; }

/* ==========================================================================
   PREMIUM RECIPE SINGLE REDESIGN (APPEND-ONLY)
   ========================================================================== */

/* 1. Hero Dashboard (Split Layout) */
.svr-premium-hero {
    padding: 60px 40px;
    background: var(--svr-color-bg-dark);
    border-radius: var(--svr-radius-lg);
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
}
.svr-premium-hero__breadcrumb {
    font-size: 0.8rem;
    color: var(--svr-color-text-muted-light);
    margin-bottom: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.svr-premium-hero__breadcrumb a {
    color: var(--svr-color-accent-gold);
    text-decoration: none;
}
.svr-premium-hero__breadcrumb i { margin: 0 10px; font-size: 0.6rem; }
.svr-premium-hero__title {
    font-family: var(--svr-font-serif);
    font-size: clamp(2.5rem, 4vw, 4rem);
    color: var(--svr-color-text-light);
    margin-bottom: 30px;
    line-height: 1.1;
    max-width: 60%;
}
.svr-premium-hero__actions {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
}
.svr-hero-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--svr-color-text-light);
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.svr-hero-btn:hover {
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
    border-color: var(--svr-color-accent-gold);
}
.svr-hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}
.svr-hero-meta img {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid var(--svr-color-accent-gold);
}

.svr-premium-summary-box {
    display: flex;
    background: var(--svr-color-text-light);
    border-radius: var(--svr-radius-md);
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.svr-premium-summary__img {
    width: 60%;
    object-fit: cover;
    min-height: 300px;
}
.svr-premium-summary__stats {
    width: 40%;
    padding: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-content: center;
}
.svr-stat-block {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.svr-stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--svr-color-text-muted-light);
    text-transform: uppercase;
}
.svr-stat-val {
    font-family: var(--svr-font-serif);
    font-size: 1.4rem;
    color: var(--svr-color-text-main-light);
    font-weight: 600;
}

/* Responsive adjustments for hero */
@media (max-width: 992px) {
    .svr-premium-summary-box { flex-direction: column; }
    .svr-premium-summary__img, .svr-premium-summary__stats { width: 100%; }
    .svr-premium-hero__title { max-width: 100%; }
    .svr-premium-hero__actions { flex-wrap: wrap; }
}

/* 2. Interactive Ingredients Checklist */
.svr-recipe-checklist-wrapper {
    background: #fdfdfc;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--svr-radius-md);
    padding: 40px;
    margin-bottom: 50px;
}
.svr-checklist-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.svr-checklist-scaler, .svr-checklist-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
}
.svr-checklist-scaler span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--svr-color-text-muted-light);
}
.svr-checklist-scaler button, .svr-checklist-toggle button {
    background: transparent;
    border: 1px solid rgba(0,0,0,0.1);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.svr-checklist-scaler button.active, .svr-checklist-toggle button.active {
    background: var(--svr-color-bg-dark);
    color: var(--svr-color-text-light);
    border-color: var(--svr-color-bg-dark);
}

.svr-recipe-checklist {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.svr-cl-item {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    padding: 10px;
    border-radius: 6px;
    transition: background 0.3s ease;
}
.svr-cl-item:hover { background: rgba(0,0,0,0.02); }
.svr-cl-item input { display: none; }
.svr-cl-box {
    width: 24px; height: 24px;
    border: 2px solid rgba(0,0,0,0.2);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: all 0.3s ease;
}
.svr-cl-item input:checked + .svr-cl-box {
    background: var(--svr-color-accent-green);
    border-color: var(--svr-color-accent-green);
    color: var(--svr-color-text-light);
}
.svr-cl-text {
    font-size: 1.05rem;
    color: var(--svr-color-text-main-light);
    transition: opacity 0.3s ease;
}
.svr-cl-item input:checked ~ .svr-cl-text {
    opacity: 0.5;
    text-decoration: line-through;
}

/* 3. Premium FDA-Style Nutrition Label */
.svr-premium-nutrition {
    border: 2px solid var(--svr-color-text-dark);
    padding: 20px;
    margin-bottom: 50px;
    background: var(--svr-color-text-light);
    font-family: var(--svr-font-sans);
}
.svr-pn-header h3 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 5px;
    letter-spacing: -0.02em;
}
.svr-pn-header p { font-size: 1rem; margin-bottom: 15px; }
.svr-pn-serving {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    font-weight: 800;
    padding-bottom: 10px;
    border-bottom: 10px solid var(--svr-color-text-dark);
}
.svr-pn-calories {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 15px 0;
    border-bottom: 5px solid var(--svr-color-text-dark);
}
.svr-pn-calories span { font-size: 0.9rem; }
.svr-pn-calories h2 { font-size: 3.5rem; font-weight: 800; line-height: 1; margin: 0; }
.svr-pn-daily {
    text-align: right;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 5px 0;
    border-bottom: 1px solid var(--svr-color-text-dark);
}
.svr-pn-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.svr-pn-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--svr-color-text-dark);
    font-size: 0.95rem;
}
.svr-pn-list li strong { font-weight: 800; margin-right: 5px; }
.svr-pn-list li span { font-weight: 700; }
.svr-pn-list li.sub { padding-left: 20px; }
.svr-pn-footer {
    font-size: 0.75rem;
    color: #666;
    margin-top: 15px;
    line-height: 1.4;
}

/* 4. Sidebar Enhancements */
.svr-sb-widget {
    margin-bottom: 40px;
}
.svr-sb-title {
    font-family: var(--svr-font-serif);
    font-size: 1.8rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.svr-sb-cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.svr-sb-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    background: #fdfdfc;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--svr-radius-md);
    color: var(--svr-color-text-main-light);
    text-decoration: none;
    transition: all 0.3s ease;
}
.svr-sb-cat i { font-size: 1.5rem; color: var(--svr-color-accent-gold); transition: transform 0.3s ease; }
.svr-sb-cat span { font-weight: 600; font-size: 0.85rem; }
.svr-sb-cat:hover {
    background: var(--svr-color-bg-dark);
    color: var(--svr-color-text-light);
    border-color: var(--svr-color-bg-dark);
}
.svr-sb-cat:hover i { transform: translateY(-3px) scale(1.1); }

.svr-sb-trending-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.svr-sb-trend-item {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
}
.svr-sb-trend-item:hover { transform: translateX(5px); }
.svr-sb-trend-item img {
    width: 60px; height: 60px;
    border-radius: 50%;
    object-fit: cover;
}
.svr-sb-trend-item h4 {
    font-size: 1.05rem;
    margin-bottom: 3px;
    transition: color 0.3s ease;
}
.svr-sb-trend-item:hover h4 { color: var(--svr-color-accent-gold); }
.svr-sb-trend-item span {
    font-size: 0.75rem;
    color: var(--svr-color-text-muted-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   PREMIUM LIGHT THEME WIDGETS (Matching the light page body)
   ========================================================================== */

/* 1. Cook Mode Banner (Light Theme) */
.svr-cook-mode-banner {
    background: var(--svr-color-text-light);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 25px 35px;
    border-radius: var(--svr-radius-md);
    margin-bottom: 40px;
    cursor: pointer;
    transition: transform var(--svr-transition-fast), box-shadow var(--svr-transition-fast), border-color var(--svr-transition-fast);
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}
.svr-cook-mode-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-color: var(--svr-color-accent-gold);
}
.svr-cmb-content {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}
.svr-cmb-icon {
    font-size: 2rem;
    color: var(--svr-color-accent-gold);
    background: rgba(200, 169, 116, 0.1);
    padding: 15px;
    border-radius: 50%;
    transition: transform 0.3s ease;
}
.svr-cook-mode-banner:hover .svr-cmb-icon {
    transform: scale(1.1);
}
.svr-cmb-label {
    font-size: 0.75rem;
    color: #666;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.svr-cmb-title {
    font-size: 1.4rem;
    margin-top: 5px;
    margin-bottom: 0;
    color: #111;
}
.svr-cmb-desc {
    margin-top: 15px;
    margin-bottom: 0;
    font-size: 0.9rem;
    color: #666;
    position: relative;
    z-index: 2;
}

/* 2. Premium Nutrition Label (Light Theme) */
.svr-premium-nutrition {
    background: var(--svr-color-text-light) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #111 !important;
    border-radius: var(--svr-radius-md);
    box-shadow: 0 5px 20px rgba(0,0,0,0.05) !important;
}
.svr-pn-header h3 {
    color: #111 !important;
}
.svr-pn-header p {
    color: #666 !important;
}
.svr-pn-serving {
    border-bottom: 2px solid var(--svr-color-accent-gold) !important;
}
.svr-pn-calories {
    border-bottom: 2px solid #111 !important;
}
.svr-pn-daily {
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    color: #666 !important;
}
.svr-pn-list li {
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}
.svr-pn-list li.sub {
    color: #555 !important;
}
.svr-pn-footer {
    color: #888 !important;
}

/* 3. Checklist (Light Theme) */
.svr-recipe-checklist-wrapper {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.svr-cl-item {
    background: var(--svr-color-text-light) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 15px 20px !important;
    border-radius: var(--svr-radius-sm);
    margin-bottom: 10px;
    transition: all var(--svr-transition-fast);
}
.svr-cl-item:hover {
    border-color: var(--svr-color-accent-gold) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
    transform: translateX(5px);
}
.svr-cl-text, 
.svr-cl-text strong, 
.svr-cl-text span {
    color: #111 !important; /* Force all nested spans and strongs to be visible */
}
.svr-cl-box {
    border-color: rgba(0, 0, 0, 0.2) !important;
    color: var(--svr-color-accent-gold) !important;
    flex-shrink: 0;
}
.svr-checklist-controls {
    border-color: rgba(0,0,0,0.05) !important;
}
.svr-checklist-scaler span {
    color: #666 !important;
}
.svr-checklist-scaler button, .svr-checklist-toggle button {
    background: var(--svr-color-text-light) !important;
    color: #666 !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}
.svr-checklist-scaler button.active, .svr-checklist-toggle button.active {
    background: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-text-light) !important;
    border-color: var(--svr-color-accent-gold) !important;
}

/* 4. Sidebar Categories (Light Theme) */
.svr-sb-cat {
    background: var(--svr-color-text-light) !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    color: #111 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
    backdrop-filter: none !important;
}
.svr-sb-cat:hover {
    transform: translateY(-2px);
    border-color: var(--svr-color-accent-gold) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
}
.svr-sb-cat i {
    color: var(--svr-color-accent-gold) !important;
}
.svr-sb-title {
    color: #111 !important;
    border-color: rgba(0,0,0,0.1) !important;
}

/* Fix Nutrition Labels */
.svr-pn-list li,
.svr-pn-list li span,
.svr-pn-header span {
    color: #111 !important;
}

/* ==========================================================================
   INSTRUCTIONS (Premium Editorial Style)
   ========================================================================== */
.svr-recipe-section-title {
    font-family: var(--svr-font-heading);
    font-size: 2.5rem;
    color: #111;
    margin: 60px 0 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(0,0,0,0.05);
}

.svr-instruction-cinematic {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    background: var(--svr-color-text-light);
    padding: 30px;
    border-radius: var(--svr-radius-md);
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
    transition: transform var(--svr-transition-fast), box-shadow var(--svr-transition-fast);
}

.svr-instruction-cinematic:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-color: var(--svr-color-accent-gold);
}

.svr-instruction-cinematic__num {
    font-family: var(--svr-font-heading);
    font-size: 4rem;
    line-height: 1;
    color: var(--svr-color-accent-gold);
    opacity: 0.3;
    font-weight: 700;
    transition: opacity var(--svr-transition-fast);
}

.svr-instruction-cinematic:hover .svr-instruction-cinematic__num {
    opacity: 1;
}

.svr-instruction-cinematic__content h4 {
    font-family: var(--svr-font-heading);
    font-size: 1.5rem;
    color: #111;
    margin-bottom: 15px;
}

.svr-instruction-cinematic__content p {
    color: #555;
    font-size: 1.05rem;
    line-height: 1.8;
}

.svr-instruction-cinematic__img {
    margin-top: 20px;
    width: 100%;
    border-radius: var(--svr-radius-sm);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Chef's Notes */
.svr-chefs-notes {
    background: rgba(200, 169, 116, 0.1);
    border-left: 4px solid var(--svr-color-accent-gold);
    padding: 25px 30px;
    margin: 40px 0;
    border-radius: 0 var(--svr-radius-md) var(--svr-radius-md) 0;
    position: relative;
}
.svr-chefs-notes::before {
    content: '\f10d';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 20px;
    bottom: 10px;
    font-size: 4rem;
    color: var(--svr-color-accent-gold);
    opacity: 0.1;
}
.svr-chefs-notes h4 {
    color: var(--svr-color-accent-gold);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}
.svr-chefs-notes p {
    color: #333;
    font-style: italic;
    font-size: 1.1rem;
    margin: 0;
}

/* ==========================================================================
   SOCIAL SHARE GENERATOR
   ========================================================================== */
.svr-share-generator {
    margin-top: 60px;
    background: var(--svr-color-text-light);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--svr-radius-lg);
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
}

.svr-share-generator__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-bottom: 20px;
}

.svr-share-generator__header h3 {
    font-family: var(--svr-font-heading);
    font-size: 2rem;
    color: #111;
    margin-bottom: 5px;
}

.svr-share-generator__header p {
    color: #666;
    margin: 0;
}

.svr-share-generator__badge {
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-text-light);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.svr-share-tabs {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.svr-share-tab {
    flex: 1;
    background: #f9f9f9;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--svr-radius-md);
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all var(--svr-transition-fast);
}

.svr-share-tab i {
    font-size: 1.5rem;
    color: #333 !important; /* Force visibility */
    transition: color var(--svr-transition-fast);
}

.svr-share-tab span {
    font-weight: 600;
    color: #111 !important;
    font-size: 0.9rem;
}

.svr-share-tab small {
    color: #888;
    font-size: 0.75rem;
}

.svr-share-tab:hover {
    border-color: var(--svr-color-accent-gold);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.svr-share-tab.active {
    background: #111;
    border-color: #111;
}

.svr-share-tab.active i,
.svr-share-tab.active span,
.svr-share-tab.active small {
    color: var(--svr-color-text-light) !important;
}

.svr-sg-row {
    margin-bottom: 25px;
}

.svr-sg-label {
    font-weight: 700;
    font-size: 0.9rem;
    color: #333;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.svr-sg-label i {
    color: var(--svr-color-accent-gold);
}

.svr-share-themes {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.svr-share-preset {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 30px;
    background: var(--svr-color-text-light);
    cursor: pointer;
    transition: all var(--svr-transition-fast);
}

.svr-share-preset:hover {
    border-color: var(--svr-color-accent-gold);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.svr-share-preset.active {
    background: #111;
    border-color: #111;
}

.svr-share-preset.active .svr-preset-name {
    color: var(--svr-color-text-light);
}

.svr-preset-color {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: block;
    border-width: 2px;
    border-style: solid;
}

.svr-preset-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #444;
}

.svr-share-layouts {
    display: flex;
    gap: 10px;
}

.svr-share-layout-btn {
    padding: 10px 20px;
    border-radius: var(--svr-radius-sm);
    border: 1px solid rgba(0,0,0,0.1);
    background: #f9f9f9;
    font-weight: 600;
    font-size: 0.9rem;
    color: #555;
    cursor: pointer;
    transition: all var(--svr-transition-fast);
    display: flex;
    align-items: center;
    gap: 8px;
}

.svr-share-layout-btn:hover {
    border-color: var(--svr-color-accent-gold);
    color: #111;
}

.svr-share-layout-btn.active {
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-text-light);
    border-color: var(--svr-color-accent-gold);
}

.svr-sg-row--controls {
    display: flex;
    gap: 40px;
    align-items: flex-end;
}

.svr-sg-control {
    flex: 1;
}

.svr-sg-slider-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
}

.svr-sg-slider {
    flex: 1;
    -webkit-appearance: none;
    height: 6px;
    background: rgba(0,0,0,0.1);
    border-radius: 3px;
    outline: none;
}

.svr-sg-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--svr-color-accent-gold);
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.svr-sg-slider-val {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--svr-color-accent-gold);
    min-width: 45px;
}

.svr-sg-toggles {
    display: flex;
    gap: 20px;
}

.svr-sg-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.svr-sg-switch input {
    display: none;
}

.svr-sg-switch__box {
    width: 40px;
    height: 22px;
    background: rgba(0,0,0,0.1);
    border-radius: 20px;
    position: relative;
    transition: background var(--svr-transition-fast);
}

/* ==========================================================================
   HOME 2: MEAL PLAN QUICK & FULL PLAN WIDGETS
   ========================================================================== */

/* Shared Styles */
.svr-link-muted {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--svr-color-text-muted-light);
    text-decoration: none;
    transition: color var(--svr-transition-fast);
}

.svr-link-muted:hover {
    color: var(--svr-color-accent-gold);
}

.svr-h2-label--gold {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--svr-color-accent-gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 10px;
}

.svr-h2-btn-cook {
    background: var(--svr-color-accent-forest, #2c4a3b); /* Fallback to forest green if var not present */
    color: var(--svr-color-text-light);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 12px 24px;
    border-radius: var(--svr-radius-sm);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--svr-transition-fast);
}

.svr-h2-btn-cook:hover {
    background: #1e3328;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(44, 74, 59, 0.3);
}

/* Ã¢â€â‚¬Ã¢â€â‚¬ Meal Plan Quick Ã¢â€â‚¬Ã¢â€â‚¬ */
.svr-h2-mealplan-quick {
    background: var(--svr-color-text-light);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--svr-radius-lg);
    padding: 32px;
    box-shadow: 0 4px 40px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
}

/* Header row */
.svr-h2-mq-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.svr-h2-mq-header-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.svr-h2-mq-title {
    font-weight: 800;
    font-size: 0.8rem;
    color: #111;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Progress bar */
.svr-h2-mq-progress-bar {
    width: 180px;
    height: 4px;
    background: #f0f0f0;
    border-radius: 99px;
    overflow: hidden;
}

.svr-h2-mq-progress-fill {
    height: 100%;
    background: var(--svr-color-accent-gold);
    border-radius: 99px;
}

.svr-h2-mq-progress-label {
    font-size: 0.75rem;
    color: #888;
    font-weight: 600;
}

/* List */
.svr-h2-mq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Base row */
/* Base row */
.svr-h2-mq-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 16px;
    border-radius: 12px;
    background: var(--svr-color-text-light);
    border: 1px solid rgba(0,0,0,0.06);
    position: relative;
}

/* Image wrapper */
.svr-h2-mq-img-wrap {
    overflow: visible; /* so badge can peek out */
    border-radius: 10px;
    width: 68px;
    height: 68px;
    flex-shrink: 0;
    position: relative;
    transition: box-shadow 0.4s ease;
}

.svr-h2-mq-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.svr-h2-mq-item:hover .svr-h2-mq-img-wrap img {
    transform: scale(1.05);
}

/* Info column */
.svr-h2-mq-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.svr-h2-mq-day {
    font-size: 0.72rem;
    font-weight: 800;
    color: #999;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.svr-mq-today-badge {
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-text-light);
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.6rem;
    letter-spacing: 0.05em;
}

.svr-h2-mq-info h4 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--svr-color-accent-gold);
    margin: 0;
}

.svr-h2-mq-info p {
    font-size: 0.85rem;
    color: #777;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Difficulty badges */
.svr-mq-diff {
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 0.7rem;
}

.svr-mq-diff--easy {
    background: #eaf3ed;
    color: #2c7a4e;
}

.svr-mq-diff--med {
    background: #fdf5e6;
    color: #b5853b;
}

/* Done badge overlay on image */
.svr-h2-mq-img-wrap {
    position: relative;
    overflow: visible; /* so badge can peek out */
}

.svr-h2-mq-done-badge {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #6eb788; /* Soft green from screenshot */
    color: var(--svr-color-text-light);
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--svr-color-text-light);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    z-index: 2;
}

/* Cooked! Text Label */

.svr-h2-mq-cooked-tag {
    font-size: 0.8rem;
    font-weight: 700;
    color: #79ab8b; /* Desaturated green from screenshot */
    background: #f1f8f3;
    padding: 10px 20px;
    border-radius: 99px;
}

/* CTA Button - Active/WED */
.svr-h2-mq-cta {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--svr-color-accent-gold);
    background: #faf4e8; /* Light beige from screenshot */
    padding: 10px 20px;
    border-radius: 99px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.3s ease, color 0.3s ease;
}

.svr-h2-mq-cta i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.svr-h2-mq-item:hover .svr-h2-mq-cta {
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-text-light);
}

.svr-h2-mq-item:hover .svr-h2-mq-cta i {
    transform: translateX(3px);
}

/* Ã¢â€â‚¬Ã¢â€â‚¬ Full Weekly Plan Calendar Ã¢â€â‚¬Ã¢â€â‚¬ */
.svr-h2-plan-full {
    background: var(--svr-color-text-light);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--svr-radius-lg);
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    margin-top: 50px;
}

.svr-h2-plan-full__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.svr-h2-plan-full__header h3 {
    font-family: var(--svr-font-heading);
    font-size: 1.8rem;
    color: #111;
    margin: 0;
}

.svr-h2-plan-calendar {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    align-items: center;
    position: relative;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    margin-bottom: 30px;
    width: 100% !important;
}

.svr-h2-plan-calendar::before {
    content: '';
    position: absolute;
    top: 22px;
    left: 40px;
    right: 40px;
    height: 1px;
    background: rgba(0,0,0,0.05);
    z-index: 1;
}

.svr-h2-cal-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.svr-h2-cal-day strong, .svr-h2-cal-day i {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--svr-color-text-light);
    border: 1px solid rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    color: #444;
    transition: all var(--svr-transition-fast);
    cursor: pointer;
}

.svr-h2-cal-day span {
    font-size: 0.75rem;
    font-weight: 700;
    color: #888;
    letter-spacing: 0.05em;
}

.svr-h2-cal-day:hover strong {
    border-color: var(--svr-color-accent-gold);
    color: var(--svr-color-accent-gold);
}

.svr-h2-cal-day--done i {
    background: rgba(44, 74, 59, 0.05);
    border-color: rgba(44, 74, 59, 0.2);
    color: var(--svr-color-accent-forest, #2c4a3b);
}

.svr-h2-cal-day--today strong {
    background: var(--svr-color-accent-gold);
    border-color: var(--svr-color-accent-gold);
    color: var(--svr-color-text-light);
    box-shadow: 0 5px 15px rgba(200, 169, 116, 0.4);
}

.svr-h2-cal-day--today span {
    color: #111;
}

.svr-h2-cal-day--weekend strong {
    background: #fafafa;
    color: #aaa;
    border-style: dashed;
}

/* Tonight's Dinner */
.svr-h2-tonight-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: #fdfdfd;
    border: 1px solid rgba(0,0,0,0.03);
    padding: 20px;
    border-radius: var(--svr-radius-md);
    transition: all var(--svr-transition-fast);
}

.svr-h2-tonight-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.06);
}

.svr-h2-tonight-card img {
    border-radius: var(--svr-radius-sm);
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.svr-h2-tonight-card h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111;
    margin: 0 0 5px 0;
}

.svr-h2-tonight-card p {
    font-size: 0.85rem;
    color: #666;
    margin: 0 0 10px 0;
}

@media (max-width: 768px) {
    .svr-h2-plan-calendar {
        overflow-x: auto;
        justify-content: flex-start;
        gap: 30px;
        padding-bottom: 20px;
    }
    .svr-h2-plan-calendar::-webkit-scrollbar {
        height: 4px;
    }
    .svr-h2-plan-calendar::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.1);
        border-radius: 4px;
    }
    .svr-h2-plan-calendar::before {
        min-width: 600px; /* Ensure line spans the scrollable area */
        left: 20px;
        right: 20px;
    }
    .svr-h2-tonight-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .svr-h2-tonight-card img {
        width: 100%;
        height: 180px;
    }
    .svr-h2-plan-full {
        padding: 20px;
    }
    .svr-h2-mealplan-quick {
        padding: 20px;
    }
}

.svr-sg-switch__box::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: var(--svr-color-text-light);
    border-radius: 50%;
    transition: transform var(--svr-transition-fast);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.svr-sg-switch input:checked + .svr-sg-switch__box {
    background: var(--svr-color-accent-gold);
}

.svr-sg-switch input:checked + .svr-sg-switch__box::after {
    transform: translateX(18px);
}

.svr-sg-switch__label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #444;
}

.svr-sg-export-group {
    display: flex;
    align-items: center;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 30px;
    overflow: hidden;
    flex: 2;
}

.svr-sg-export-group .svr-share-btn--download {
    flex: 1;
    border-radius: 0;
    margin: 0;
    border: none;
}

.svr-sg-ext-picker {
    display: flex;
    background: #f9f9f9;
}

.svr-sg-ext {
    padding: 12px 15px;
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: 0.85rem;
    color: #888;
    cursor: pointer;
    transition: all var(--svr-transition-fast);
}

.svr-sg-ext:hover {
    color: #111;
}

.svr-sg-ext.active {
    background: #111;
    color: var(--svr-color-text-light);
}

.svr-share-preview {
    background: #f0f0f0;
    border-radius: var(--svr-radius-md);
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    margin-bottom: 30px;
}

.svr-share-canvas {
    max-width: 100%;
    max-height: 500px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    border-radius: 10px;
}

.svr-share-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.svr-share-btn {
    padding: 12px 25px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all var(--svr-transition-fast);
    text-decoration: none;
    border: none;
}

.svr-share-btn--download {
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
    flex: 2;
    justify-content: center;
}

.svr-share-btn--download:hover {
    background: #d49520;
    transform: translateY(-2px);
}

.svr-share-btn--ig { background: #E1306C; color: var(--svr-color-text-light); flex: 1; justify-content: center; }
.svr-share-btn--fb { background: #1877F2; color: var(--svr-color-text-light); flex: 1; justify-content: center; }
.svr-share-btn--pt { background: #E60023; color: var(--svr-color-text-light); flex: 1; justify-content: center; }

.svr-share-btn--ig:hover, .svr-share-btn--fb:hover, .svr-share-btn--pt:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.svr-share-hint {
    color: #888;
    font-size: 0.85rem;
    text-align: center;
    margin: 0;
}
/* --- Fixes for Home 1 Widget Integrations --- */
.svr-widgets-col .svr-h2-mq-item {
    gap: 12px;
    padding: 14px;
}
.svr-widgets-col .svr-h2-mq-info h4 {
    font-size: 0.95rem;
    line-height: 1.3;
}
.svr-widgets-col .svr-h2-mq-info p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
}
.svr-widgets-col .svr-h2-mq-cooked-tag {
    font-size: 0.65rem;
    padding: 4px 8px;
    white-space: nowrap;
}
.svr-widgets-col .svr-h2-mq-cta {
    padding: 6px 10px;
    font-size: 0.75rem;
}

/* Ensure the weekly plan calendar in Home 1 matches the max-width of other elements */
.svr-dashboard-widgets .svr-h2-plan-full {
    margin: 50px 0 0 0 !important;
    width: auto !important;
    max-width: none !important;
}

/* ==========================================================================
   PREMIUM FDA-STYLE NUTRITION WIDGET (RECIPE SINGLE)
   ========================================================================== */
.svr-premium-nutrition {
    background: var(--svr-color-text-light);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 30px;
    margin: 40px 0;
    font-family: 'Inter', sans-serif;
    color: #1a202c;
    box-shadow: 0 10px 25px rgba(0,0,0,0.02);
}

.svr-pn-header h3 {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 5px 0;
    line-height: 1;
}

.svr-pn-header p {
    font-size: 0.95rem;
    color: #4a5568;
    margin: 0 0 15px 0;
}

.svr-pn-serving {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 8px solid var(--svr-color-text-dark);
}

.svr-pn-serving strong {
    font-size: 1.1rem;
    font-weight: 700;
}

.svr-pn-calories {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 10px 0;
    border-bottom: 4px solid var(--svr-color-text-dark);
}

.svr-pn-calories span {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
}

.svr-pn-calories h2 {
    font-size: 3.5rem;
    font-weight: 800;
    margin: 0;
    line-height: 0.8;
}

.svr-pn-daily {
    text-align: right;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 8px 0;
    border-bottom: 1px solid #cbd5e0;
}

.svr-pn-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.svr-pn-list li {
    display: block; 
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.95rem;
}

.svr-pn-list li.sub {
    padding-left: 1.5rem;
}

.svr-pn-list li strong {
    font-weight: 700;
}

.svr-pn-list li span {
    float: right;
    font-weight: 700;
}

.svr-pn-footer {
    font-size: 0.75rem;
    color: #718096;
    margin-top: 15px;
    line-height: 1.5;
}

/* ==========================================================================
   HOME 3 - WEBGL HERO & DARK CARDS
   ========================================================================== */

/* Typography Utilities */
.svr-cursive {
    font-family: 'Dancing Script', cursive;
}

/* WebGL Hero */
.svr-hero-webgl {
    position: relative;
    padding: clamp(2.25rem, 1.8rem + 2.25vw, 3rem);
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background-color: var(--svr-color-sidebar);
    color: var(--svr-color-text-light);
    border-radius: 16px;
    margin-bottom: 2rem;
    z-index: 1;
}

.svr-hero-webgl::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.2'/%3E%3C/svg%3E");
    opacity: 0.15;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -2;
}

.svr-hero-webgl__bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 85%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.svr-hero-webgl__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, transparent 20%, var(--svr-color-sidebar) 80%);
    pointer-events: none;
}

.svr-hero-webgl__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center !important;
    opacity: 0.85;
    animation: svr-kenburns 30s ease-in-out infinite;
    will-change: transform;
}

@keyframes svr-kenburns {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.svr-hero-webgl__canvas {
    position: absolute;
    top: 5%;
    right: -15%;
    width: 70vh;
    height: 70vh;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
    opacity: 0.9;
}

.svr-hero-webgl__circle-glow {
    position: absolute;
    top: 5%;
    right: -15%;
    width: 70vh;
    height: 70vh;
    border-radius: 50%;
    box-shadow: 
        0 0 60px rgba(212, 175, 55, 0.3),
        0 0 120px rgba(212, 175, 55, 0.2),
        inset 0 0 80px rgba(212, 175, 55, 0.3);
    backdrop-filter: brightness(1.4) contrast(1.1);
    pointer-events: none;
}

.svr-hero-webgl__circle-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 4px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.9) 0%, 
        #d4af37 30%, 
        rgba(212, 175, 55, 0.3) 70%, 
        #e0bc48 100%
    );
    -webkit-mask: linear-gradient(var(--svr-color-text-light) 0 0) content-box, linear-gradient(var(--svr-color-text-light) 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.svr-hero-webgl__content {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.svr-hero-webgl__meta-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: #999999;
    margin-bottom: 1rem;
    padding: 6px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
}

.svr-meta-bracket {
    color: #d4af37;
    opacity: 0.7;
}

.svr-hero-webgl__title {
    font-family: 'Cormorant', serif;
    font-size: clamp(3rem, 2rem + 4vw, 5rem);
    line-height: 1.1;
    font-weight: 300;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.svr-hero-webgl__title--accent {
    font-style: italic;
    font-weight: 300;
    color: #d4af37;
    letter-spacing: 0;
}

.svr-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    padding: 6px 6px 6px 24px;
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 9999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.svr-hero-btn:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
}

.svr-hero-btn__text {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--svr-color-text-light);
}

.svr-hero-btn__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #d4af37;
    color: var(--svr-color-sidebar);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.svr-hero-btn:hover .svr-hero-btn__icon {
    transform: rotate(-45deg);
}

.svr-hero-webgl__badge {
    position: absolute;
    top: 30%;
    right: 15%;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    border: 1px solid #d4af37;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3;
    background: radial-gradient(circle at center, #1f1f1f 0%, var(--svr-color-sidebar) 80%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(0, 0, 0, 0.9);
    transform: rotate(5deg);
    padding: 10px;
}

.svr-badge-text-top, .svr-badge-text-bottom {
    font-family: 'Inter', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--svr-color-text-light);
    line-height: 1;
}

.svr-badge-text-bottom {
    letter-spacing: 0.15em;
}

.svr-badge-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d4af37;
    margin: 6px 0;
}

.svr-badge-icon i { font-size: 0.9rem; }
.svr-badge-plus { font-size: 0.7rem; font-weight: 300; }

.svr-badge-text-mid {
    font-size: 1.2rem;
    color: #d4af37;
    line-height: 0.8;
    margin-bottom: 2px;
}

/* Trending Cards (Home 3) */
.svr-hot-recipes {
    margin-bottom: 3rem;
    background: var(--svr-color-sidebar);
    padding: 2rem;
    border-radius: 16px;
}

.svr-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.svr-card-dark {
    background: linear-gradient(145deg, rgba(30, 30, 30, 0.6) 0%, rgba(15, 15, 15, 0.8) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.svr-card-dark:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 30px rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.3);
}

.svr-card-dark__overlay-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.svr-card-dark__header {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
}

.svr-card-dark__bookmark {
    color: #999999;
    z-index: 3;
}

.svr-card-dark__bookmark:hover {
    color: #d4af37;
}

.svr-card-dark__content {
    padding: 0 1.5rem 1rem;
    color: var(--svr-color-text-light);
}

.svr-card-dark__title {
    font-family: 'Cormorant', serif;
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 500;
    color: var(--svr-color-text-light);
    margin-bottom: 1rem;
}

.svr-card-dark__meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
}

.svr-card-dark__image-container {
    flex: 1 1 0;
    min-height: 180px;
    overflow: hidden;
    position: relative;
    display: flex;
}

.svr-card-dark__image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, rgba(15,15,15,0.8) 0%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

.svr-card-dark__image-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.95) 0%, rgba(10, 10, 10, 0.6) 50%, transparent 100%);
    backdrop-filter: blur(8px);
    mask-image: linear-gradient(to bottom, transparent 0%, black 60%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 60%);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.svr-card-dark:hover .svr-card-dark__image-container::after { opacity: 1; }

.svr-card-dark__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.svr-card-dark:hover .svr-card-dark__img {
    transform: scale(1.1);
}

.svr-card-dark__footer {
    padding: 1.5rem;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}

.svr-card-dark:hover .svr-card-dark__footer {
    opacity: 1;
    transform: translateY(0);
}

.svr-card-dark__link {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--svr-color-text-light);
    display: inline-block;
    transition: all 0.2s ease;
}

.svr-card-dark:hover .svr-card-dark__link {
    color: #d4af37;
    transform: translateX(5px);
}

/* Browse By Ingredient (Home 3) */
.svr-browse-ingredients {
    margin-bottom: 3rem;
    position: relative;
    padding: 2rem;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.15);
    background: rgba(212, 175, 55, 0.05);
    backdrop-filter: blur(10px);
}

.svr-browse-ingredients__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

.svr-section-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.svr-section-meta {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #d4af37;
    text-transform: uppercase;
    opacity: 0.8;
}

.svr-section-heading {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--svr-color-text-light);
    margin-bottom: 0;
    text-transform: uppercase;
}

.svr-browse-ingredients__nav {
    display: flex;
    align-items: center;
    background: rgba(15, 15, 15, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 100px;
    padding: 4px;
    gap: 2px;
    backdrop-filter: blur(10px);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
}

.svr-nav-btn {
    width: 56px;
    height: 36px;
    border-radius: 100px;
    border: none;
    background: transparent;
    color: rgba(212, 175, 55, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    cursor: pointer;
}

.svr-nav-btn:hover {
    background: #d4af37;
    color: var(--svr-color-sidebar);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.svr-ingredients-list {
    display: flex;
    position: relative;
    z-index: 2;
    gap: 1.5rem;
    overflow-x: auto;
    padding: 15px 0;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.svr-ingredient-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 90px;
    padding: 15px 10px;
    background: var(--svr-color-text-light);
    border-radius: 12px;
    scroll-snap-align: start;
    text-decoration: none;
    color: #111111;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.svr-ingredient-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.2);
}

.svr-ingredient-item__icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #c4c4c4; /* Gray circle from screenshot */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #d4af37; /* Gold icon */
    transition: all 0.4s ease;
    position: relative;
}

.svr-ingredient-item:hover .svr-ingredient-item__icon {
    background: #d4af37;
    color: var(--svr-color-text-light);
}

.svr-ingredient-item span {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   HOME 3 - ADDITIONAL UNIQUE SECTIONS
   ========================================================================== */

/* 1. Curated Collections (Bento Grid) */
.svr-bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 250px);
    gap: 1.5rem;
    margin-bottom: 4rem;
}
.svr-bento-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.4s ease;
    display: block;
    text-decoration: none;
}
.svr-bento-item:hover {
    transform: scale(1.02);
}
.svr-bento-item--large {
    grid-column: span 2;
    grid-row: span 2;
}
.svr-bento-item--wide {
    grid-column: span 2;
}
.svr-bento-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    transition: opacity 0.4s ease;
}
.svr-bento-item:hover .svr-bento-item__img {
    opacity: 0.8;
}
.svr-bento-item__content {
    position: absolute;
    inset: 0;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(5,5,5,0.9) 0%, transparent 60%);
}
.svr-bento-item__title {
    font-family: 'Cormorant', serif;
    font-size: 2rem;
    color: var(--svr-color-text-light);
    margin-bottom: 0.5rem;
    line-height: 1.1;
}
.svr-bento-item__count {
    font-size: 0.75rem;
    color: #d4af37;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
}

/* 2. Masterclass Series (Video Layout) */
.svr-masterclass {
    display: flex;
    gap: 2rem;
    margin-bottom: 4rem;
    background: linear-gradient(145deg, #0f0f0f 0%, #050505 100%);
    border: 1px solid rgba(212, 175, 55, 0.1);
    border-radius: 20px;
    padding: 2rem;
}
.svr-mc-video {
    flex: 1.5;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16/9;
}
.svr-mc-video__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}
.svr-mc-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.9);
    color: var(--svr-color-text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
    transition: transform 0.3s ease;
}
.svr-mc-play:hover {
    transform: translate(-50%, -50%) scale(1.1);
}
.svr-mc-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.svr-mc-content__badge {
    color: #d4af37;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    font-weight: 700;
    margin-bottom: 1rem;
    text-transform: uppercase;
}
.svr-mc-content__title {
    font-family: 'Cormorant', serif;
    font-size: 2.5rem;
    color: var(--svr-color-text-light);
    margin-bottom: 1.5rem;
    line-height: 1.1;
}
.svr-mc-chapters {
    list-style: none;
    padding: 0;
    margin: 0;
}
.svr-mc-chapter {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #aaa;
    transition: color 0.3s ease;
    cursor: pointer;
}
.svr-mc-chapter:hover, .svr-mc-chapter.is-active {
    color: var(--svr-color-text-light);
}
.svr-mc-chapter__num {
    font-family: 'Cormorant', serif;
    font-size: 1.2rem;
    color: #d4af37;
    font-style: italic;
}
.svr-mc-chapter__title {
    font-size: 0.9rem;
    font-weight: 500;
}

/* 3. Editor's Picks (List style) */
.svr-editors-picks {
    margin-bottom: 4rem;
}
.svr-ep-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.svr-ep-item {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    text-decoration: none;
}
.svr-ep-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(212, 175, 55, 0.3);
}
.svr-ep-item__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 8px;
    color: #d4af37;
    font-family: 'Cormorant', serif;
    line-height: 1;
}
.svr-ep-item__day { font-size: 1.5rem; font-weight: 600; }
.svr-ep-item__month { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; }
.svr-ep-item__content { flex: 1; }
.svr-ep-item__title {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    color: var(--svr-color-text-light);
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.svr-ep-item__excerpt {
    font-size: 0.85rem;
    color: #888;
    margin: 0;
}
.svr-ep-item__img-wrap {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
}
.svr-ep-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.svr-ep-item:hover .svr-ep-item__img {
    transform: scale(1.1);
}

/* Section Header Utilities */
.svr-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.svr-section-header h3 {
    font-family: 'Cormorant', serif;
    font-size: 2.5rem;
    color: var(--svr-color-text-light);
    font-weight: 400;
    font-style: italic;
    margin: 0;
    line-height: 1;
}
.svr-section-header a {
    color: #d4af37;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.3s ease;
}
.svr-section-header a:hover {
    color: var(--svr-color-text-light);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .svr-bento-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
    .svr-bento-item--large {
        grid-column: span 2;
        grid-row: span 1;
        height: 350px;
    }
    .svr-bento-item--wide {
        grid-column: span 2;
        height: 250px;
    }
    .svr-masterclass {
        flex-direction: column;
    }
}
@media (max-width: 768px) {
    .svr-bento-grid {
        grid-template-columns: 1fr;
    }
    .svr-bento-item {
        grid-column: span 1 !important;
        height: 250px !important;
    }
    .svr-ep-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .svr-ep-item__img-wrap {
        width: 100%;
        height: 150px;
    }
}

/* 4. Community Creations */
.svr-community-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 4rem;
}
.svr-community-item {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}
.svr-community-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.svr-community-item:hover img {
    transform: scale(1.1);
}
.svr-community-item__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--svr-color-text-light);
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 0.85rem;
    font-weight: 600;
}
.svr-community-item:hover .svr-community-item__overlay {
    opacity: 1;
}

/* 5. The Culinary Team */
.svr-team-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 4rem;
}
.svr-team-member {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.3s ease;
}
.svr-team-member:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(212, 175, 55, 0.3);
}
.svr-team-member img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}
.svr-team-member__info {
    flex: 1;
}
.svr-team-member__info h4 {
    font-size: 1.1rem;
    color: var(--svr-color-text-light);
    margin-bottom: 0.2rem;
}
.svr-team-member__info p {
    font-size: 0.8rem;
    color: #888;
    margin: 0;
}
.svr-btn-follow {
    padding: 6px 16px;
    border-radius: 20px;
    background: transparent;
    border: 1px solid #d4af37;
    color: #d4af37;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.3s ease;
}
.svr-btn-follow:hover {
    background: #d4af37;
    color: var(--svr-color-text-dark);
}

/* 6. Premium CTA */
.svr-premium-cta {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 4rem;
    margin-bottom: 4rem;
    background: #111;
}
.svr-premium-cta__content {
    position: relative;
    z-index: 2;
    max-width: 500px;
}
.svr-premium-cta__content h2 {
    font-family: 'Cormorant', serif;
    font-size: 3rem;
    color: var(--svr-color-text-light);
    margin: 0.5rem 0 1rem;
    line-height: 1.1;
}
.svr-premium-cta__content p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}
.svr-premium-cta__form {
    display: flex;
    gap: 0.5rem;
}
.svr-premium-cta__form input {
    flex: 1;
    padding: 12px 20px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.5);
    color: var(--svr-color-text-light);
    outline: none;
}
.svr-premium-cta__form button {
    padding: 12px 30px;
    border-radius: 30px;
    background: #d4af37;
    color: var(--svr-color-text-dark);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
}
.svr-premium-cta__bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    z-index: 1;
}
.svr-premium-cta__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    mask-image: linear-gradient(to right, transparent, black 40%);
    -webkit-mask-image: linear-gradient(to right, transparent, black 40%);
}

@media (max-width: 1024px) {
    .svr-community-grid { grid-template-columns: repeat(3, 1fr); }
    .svr-team-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .svr-community-grid { grid-template-columns: repeat(2, 1fr); }
    .svr-team-list { grid-template-columns: 1fr; }
    .svr-premium-cta { padding: 2rem; }
    .svr-premium-cta__form { flex-direction: column; }
}

/* ==========================================================================
   HOME 4 - SPLIT SCREEN LAYOUT
   ========================================================================== */

.svr-split-body {
    background: #faf9f6;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.svr-split-layout {
    display: flex;
    min-height: 100vh;
}

/* Left Panel (Dark) */
.svr-split-left {
    width: 35%;
    min-width: 400px;
    background: var(--svr-color-sidebar);
    color: var(--svr-color-text-light);
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 40px;
    border-right: 1px solid rgba(212, 175, 55, 0.2);
}

.svr-split-left__bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.05), transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.svr-split-header {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
    margin-bottom: 60px;
}

.svr-menu-toggle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: var(--svr-color-text-light);
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.svr-menu-toggle:hover {
    border-color: #d4af37;
    color: #d4af37;
}

.svr-split-hero {
    position: relative;
    z-index: 2;
    margin-bottom: 60px;
}

.svr-hero-sub {
    font-family: 'Dancing Script', cursive;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 10px;
    display: block;
}

.svr-split-hero .svr-hero-title {
    font-family: 'Cormorant', serif;
    font-size: clamp(3rem, 4vw, 4.5rem);
    line-height: 1.1;
    font-weight: 400;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.svr-split-hero .svr-hero-title em {
    color: #d4af37;
    font-style: italic;
}

.svr-hero-tags {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 30px;
}

.svr-btn-explore-gold {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 12px 24px;
    background: transparent;
    border: 1px solid #d4af37;
    border-radius: 30px;
    color: #d4af37;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
}

.svr-btn-explore-gold i {
    width: 30px;
    height: 30px;
    background: #d4af37;
    color: var(--svr-color-text-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svr-btn-explore-gold:hover {
    background: rgba(212, 175, 55, 0.1);
}

.svr-split-trending {
    position: relative;
    z-index: 2;
    margin-bottom: 60px;
}

.svr-split-section-header h3 {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--svr-color-text-light);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.svr-split-cards {
    display: flex;
    gap: 15px;
}

.svr-split-card {
    flex: 1;
    background: #151515;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
}

.svr-split-card:hover {
    transform: translateY(-5px);
    border-color: rgba(212, 175, 55, 0.3);
}

.svr-split-card img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    opacity: 0.8;
}

.svr-split-card__content {
    padding: 15px;
    position: relative;
}

.svr-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.svr-card-num {
    font-size: 0.8rem;
    font-weight: 700;
    color: #d4af37;
}

.svr-card-tag {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
}

.svr-split-card__content h4 {
    font-size: 1.1rem;
    font-weight: 500;
    font-family: 'Cormorant', serif;
    line-height: 1.2;
    margin-bottom: 10px;
}

.svr-card-meta {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    gap: 10px;
}

.svr-card-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.svr-card-arrow {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: var(--svr-color-text-light);
}

.svr-split-footer {
    position: relative;
    z-index: 2;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
}

.svr-split-newsletter h4 {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin-bottom: 5px;
}

.svr-split-newsletter p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 15px;
}

.svr-newsletter-form {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

.svr-newsletter-form input {
    flex: 1;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 10px 15px;
    color: var(--svr-color-text-light);
    font-size: 0.85rem;
}

.svr-newsletter-form button {
    background: #d4af37;
    color: var(--svr-color-text-dark);
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.svr-split-social {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.svr-split-social span {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
}

.svr-social-icons {
    display: flex;
    gap: 15px;
}

.svr-social-icons a {
    color: var(--svr-color-text-light);
    font-size: 1rem;
    transition: color 0.3s ease;
}

.svr-social-icons a:hover {
    color: #d4af37;
}

/* Right Panel (Light) */
.svr-split-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #faf9f6;
    height: 100vh;
    overflow-y: auto;
}

.svr-split-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 50px;
    background: var(--svr-color-text-light);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 100;
}

.svr-split-nav__links {
    display: flex;
    gap: 30px;
}

.svr-split-nav__links a {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #666;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.svr-split-nav__links a:hover, .svr-split-nav__links a.active {
    color: var(--svr-color-text-dark);
}

.svr-split-nav__actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.svr-nav-search {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 30px;
    padding: 8px 15px;
}

.svr-nav-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.85rem;
    width: 200px;
}

.svr-nav-search button {
    color: #888;
}

.svr-nav-btn-dark {
    background: #111;
    color: var(--svr-color-text-light);
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.svr-icon-btn-light {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.svr-icon-btn-light:hover {
    background: #f5f5f5;
}

.svr-split-content {
    padding: 50px;
}

.svr-featured-recipe {
    display: flex;
    gap: 40px;
    background: var(--svr-color-text-light);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    margin-bottom: 50px;
}

.svr-featured-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.svr-tag-gold {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #d4af37;
    margin-bottom: 15px;
    background: rgba(212, 175, 55, 0.1);
    padding: 6px 12px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}

.svr-featured-info h2 {
    font-family: 'Cormorant', serif;
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #111;
}

.svr-featured-info p {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.6;
}

.svr-featured-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #444;
}

.svr-featured-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.svr-featured-actions {
    display: flex;
    gap: 15px;
}

.svr-btn-dark {
    background: #111;
    color: var(--svr-color-text-light);
    padding: 15px 30px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    transition: background 0.3s ease;
}

.svr-btn-dark:hover {
    background: #333;
}

.svr-btn-outline-dark {
    background: transparent;
    border: 1px solid #ddd;
    color: #111;
    padding: 15px 30px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.3s ease;
}

.svr-btn-outline-dark:hover {
    background: #f5f5f5;
}

.svr-featured-media-container {
    flex: 1.2;
    display: flex;
    gap: 20px;
}

.svr-featured-media {
    flex: 1;
    border-radius: 16px;
    overflow: hidden;
}

.svr-featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.svr-featured-sidebar {
    width: 80px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.svr-fs-btn {
    width: 80px;
    height: 80px;
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #555;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.svr-fs-btn i {
    font-size: 1.2rem;
}

.svr-fs-btn:hover {
    background: var(--svr-color-text-light);
    border-color: #d4af37;
    color: #111;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.svr-saved-count {
    margin-top: auto;
    width: 80px;
    height: 80px;
    background: #2b4c3b;
    color: var(--svr-color-text-light);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.svr-saved-count strong {
    font-size: 1.1rem;
}
.svr-saved-count span {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.svr-split-section {
    margin-bottom: 50px;
}

.svr-section-header-light {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.svr-section-header-light h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111;
    letter-spacing: 0.05em;
}

.svr-nav-arrows {
    display: flex;
    gap: 10px;
}

.svr-arrow-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    transition: all 0.3s ease;
}

.svr-arrow-btn:hover {
    border-color: #111;
    color: #111;
}

.svr-link-dark {
    font-size: 0.75rem;
    font-weight: 700;
    color: #111;
    letter-spacing: 0.1em;
}

.svr-category-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

.svr-category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 10px;
    background: var(--svr-color-text-light);
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.svr-category-item:hover {
    border-color: #d4af37;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.svr-category-icon {
    width: 60px;
    height: 60px;
    background: #faf9f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #444;
}

.svr-category-item h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111;
}

.svr-category-item span {
    font-size: 0.7rem;
    color: #888;
}

.svr-trending-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.svr-light-card {
    background: var(--svr-color-text-light);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

.svr-light-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.svr-light-card__img {
    position: relative;
    height: 180px;
}

.svr-light-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.svr-save-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    background: var(--svr-color-text-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.svr-save-btn:hover {
    color: #d4af37;
}

.svr-light-card__content {
    padding: 20px;
}

.svr-light-card__content h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #111;
}

.svr-light-meta {
    font-size: 0.8rem;
    color: #666;
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.svr-light-rating {
    font-size: 0.8rem;
    font-weight: 600;
    color: #111;
    display: flex;
    align-items: center;
    gap: 5px;
}

.svr-light-rating i {
    color: #d4af37;
}

.svr-utilities-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.svr-util-box {
    background: var(--svr-color-text-light);
    border-radius: 16px;
    padding: 30px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border: 1px solid #eee;
    position: relative;
    overflow: hidden;
}

.svr-util-box__content {
    position: relative;
    z-index: 2;
    max-width: 70%;
}

.svr-util-box h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

.svr-util-box p {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.4;
}

.svr-btn-outline-small {
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #111;
    transition: all 0.3s ease;
}

.svr-btn-outline-small:hover {
    background: #111;
    color: var(--svr-color-text-light);
    border-color: #111;
}

.svr-util-bg-img {
    position: absolute;
    right: -20px;
    bottom: -20px;
    font-size: 6rem;
    color: #f5f5f5;
    z-index: 1;
}

.svr-util-search {
    display: flex;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

.svr-util-search input {
    border: none;
    background: transparent;
    outline: none;
    flex: 1;
    font-size: 0.85rem;
}

.svr-util-box--search {
    background: #fafafa;
}

@media (max-width: 1200px) {
    .svr-split-layout {
        flex-direction: column;
    }
    .svr-split-left {
        width: 100%;
        height: auto;
    }
    .svr-split-right {
        height: auto;
        overflow: visible;
    }
}

/* =========================================
   HOME 4 (AVANT-GARDE PREMIUM DESIGN)
   ========================================= */

/* Hero Section */
.svr-h4-immersive-hero {
    position: relative;
    height: 80vh;
    min-height: 600px;
    margin: 40px 40px 60px;
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: var(--svr-color-sidebar);
}

.svr-h4-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.svr-h4-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center !important;
    opacity: 0.85;
    transition: transform 10s ease;
}

.svr-h4-immersive-hero:hover .svr-h4-hero-bg img {
    transform: scale(1.05);
}

.svr-h4-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.4) 50%, rgba(10,10,10,0) 100%);
}

.svr-h4-hero-watermark {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--svr-font-heading);
    font-size: 15rem;
    line-height: 0.8;
    color: var(--svr-color-text-light);
    opacity: 0.03;
    z-index: 2;
    pointer-events: none;
    text-transform: uppercase;
}

.svr-h4-hero-content {
    position: relative;
    z-index: 3;
    max-width: 600px;
    padding-left: 60px;
}

.svr-h4-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(230, 185, 83, 0.1);
    border: 1px solid rgba(230, 185, 83, 0.3);
    border-radius: var(--svr-radius-pill);
    color: var(--svr-color-accent-gold);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
}

.svr-h4-hero-content h1 {
    font-family: var(--svr-font-heading);
    font-size: 5rem;
    line-height: 1;
    color: var(--svr-color-text-light);
    margin-bottom: 25px;
    text-transform: uppercase;
}

.svr-h4-hero-content h1 em {
    font-family: var(--svr-font-heading);
    font-style: italic;
    color: var(--svr-color-accent-gold);
    text-transform: lowercase;
    font-size: 6rem;
    display: block;
    margin-left: 40px;
}

.svr-h4-hero-content p {
    font-size: 1.1rem;
    color: var(--svr-color-text-muted-light);
    line-height: 1.8;
    margin-bottom: 40px;
    padding-left: 40px;
    border-left: 2px solid var(--svr-color-accent-gold);
}

.svr-h4-hero-actions {
    display: flex;
    align-items: center;
    gap: 40px;
}

.svr-h4-btn-glass {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 15px 30px;
    border-radius: var(--svr-radius-pill);
    color: var(--svr-color-text-light);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    backdrop-filter: blur(15px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.svr-h4-btn-glass:hover {
    background: var(--svr-color-text-light);
    color: var(--svr-color-bg-dark);
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.svr-h4-hero-stats {
    display: flex;
    gap: 20px;
}

.svr-h4-hero-stats span {
    display: flex;
    flex-direction: column;
    font-size: 0.7rem;
    color: var(--svr-color-text-muted-light);
    letter-spacing: 0.1em;
}

.svr-h4-hero-stats strong {
    font-size: 1.2rem;
    color: var(--svr-color-text-light);
    font-family: var(--svr-font-heading);
}

.svr-h4-floating-card {
    position: absolute;
    right: 60px;
    bottom: 60px;
    background: rgba(10,10,10,0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 15px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 4;
    animation: svr-float 6s ease-in-out infinite;
}

@keyframes svr-float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

.svr-h4-floating-card img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.svr-h4-float-info span {
    display: block;
    font-size: 0.7rem;
    color: var(--svr-color-text-muted-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.svr-h4-float-info strong {
    font-size: 1rem;
    color: var(--svr-color-text-light);
}

/* Bento Grid */
.svr-h4-bento-section {
    padding: 40px;
}

.svr-h4-bento-header {
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.svr-h4-bento-header h2 {
    font-family: var(--svr-font-heading);
    font-size: 3rem;
    color: var(--svr-color-text-dark);
    line-height: 1;
}

.svr-h4-bento-header h2 em {
    font-style: italic;
    color: var(--svr-color-accent-gold);
}

.svr-h4-bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 300px);
    gap: 20px;
}

.svr-h4-bento-item {
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    background: var(--svr-color-card-light);
    box-shadow: 0 20px 40px rgba(0,0,0,0.02);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.svr-h4-bento-item:hover {
    transform: scale(0.98);
}

.svr-h4-bento-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.svr-h4-bento-item:hover img {
    transform: scale(1.1);
}

.svr-h4-bento-large {
    grid-column: span 2;
    grid-row: span 2;
}

.svr-h4-bento-tall {
    grid-column: span 1;
    grid-row: span 2;
}

.svr-h4-bento-wide {
    grid-column: span 2;
    grid-row: span 1;
}

.svr-h4-bento-small {
    grid-column: span 1;
    grid-row: span 1;
}

.svr-h4-bento-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
}

.svr-h4-bento-tag {
    align-self: flex-start;
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-bg-dark);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 15px;
}

.svr-h4-bento-overlay h3 {
    color: var(--svr-color-text-light);
    font-family: var(--svr-font-heading);
    font-size: 2rem;
    line-height: 1.1;
    margin-bottom: 15px;
}

.svr-h4-bento-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--svr-color-text-light);
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}

.svr-h4-bento-item:hover .svr-h4-bento-link {
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-bg-dark);
    border-color: var(--svr-color-accent-gold);
}

.svr-h4-bento-dark {
    background: var(--svr-color-bg-dark);
    color: var(--svr-color-text-light);
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svr-h4-bento-text-only {
    text-align: center;
}

.svr-h4-bento-text-only i {
    font-size: 2rem;
    color: var(--svr-color-accent-gold);
    margin-bottom: 15px;
    opacity: 0.5;
}

.svr-h4-bento-text-only p {
    font-family: var(--svr-font-heading);
    font-size: 1.3rem;
    font-style: italic;
    margin-bottom: 15px;
    line-height: 1.4;
}

.svr-h4-bento-text-only span {
    font-size: 0.8rem;
    color: var(--svr-color-text-muted-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.svr-h4-bento-split {
    display: flex;
    height: 100%;
}

.svr-h4-bento-split-text {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.svr-h4-bento-split img {
    width: 40%;
    height: 100%;
}

.svr-h4-bento-split-text h3 {
    font-family: var(--svr-font-heading);
    font-size: 2rem;
    color: var(--svr-color-text-dark);
    margin-bottom: 15px;
}

.svr-h4-bento-split-text p {
    color: var(--svr-color-text-muted-light);
    margin-bottom: 25px;
}

.svr-h4-btn-outline {
    align-self: flex-start;
    padding: 10px 20px;
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
}

.svr-h4-btn-outline:hover {
    background: var(--svr-color-bg-dark);
    color: var(--svr-color-text-light);
}

/* 1. Interactive Parallax Spotlight */
.svr-h4-spotlight {
    padding: 100px 40px;
    display: flex;
    align-items: center;
    gap: 60px;
    background: var(--svr-color-bg-light);
}
.svr-h4-spotlight-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 80px;
}
.svr-h4-spotlight-text {
    flex: 1;
}
.svr-h4-spotlight-text h2 {
    font-family: var(--svr-font-heading);
    font-size: 4rem;
    color: var(--svr-color-text-dark);
    margin-bottom: 20px;
}
.svr-h4-spotlight-text h2 em {
    color: var(--svr-color-accent-gold);
    font-style: italic;
}
.svr-h4-spotlight-text p {
    color: var(--svr-color-text-muted-light);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 40px;
}
.svr-h4-spotlight-visual {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
}
.svr-h4-circle-anim {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: var(--svr-color-card-light);
    z-index: 1;
}
.svr-h4-spotlight-img {
    position: relative;
    z-index: 2;
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
}

/* 2. Expanding Accordion Gallery */
.svr-h4-accordion-section {
    padding: 80px 40px;
}
.svr-h4-accordion-header {
    text-align: center;
    margin-bottom: 60px;
}
.svr-h4-accordion-header h2 {
    font-family: var(--svr-font-heading);
    font-size: 3.5rem;
    color: var(--svr-color-text-dark);
}
.svr-h4-accordion-header h2 em {
    color: var(--svr-color-accent-gold);
    font-style: italic;
}
.svr-h4-accordion-section {
    position: relative;
    background: radial-gradient(circle at top right, rgba(166, 124, 0, 0.1), var(--svr-color-bg-dark) 60%) !important;
}
.svr-h4-accordion-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 500px;
    gap: 20px;
}
.svr-h4-accordion-item {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    text-decoration: none;
}
.svr-h4-accordion-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease, filter 0.8s ease;
    filter: brightness(0.6);
}
.svr-h4-accordion-item:hover img {
    transform: scale(1.05);
    filter: brightness(0.9);
}
.svr-h4-accordion-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent 60%);
}
.svr-h4-accordion-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    z-index: 2;
    color: var(--svr-color-text-light);
}
.svr-h4-accordion-num {
    display: block;
    font-family: var(--svr-font-heading);
    font-size: 1.5rem;
    color: var(--svr-color-accent-gold);
    margin-bottom: 10px;
}
.svr-h4-accordion-content h3 {
    font-family: var(--svr-font-heading);
    font-size: 1.8rem;
    margin-bottom: 5px;
}
.svr-h4-accordion-content p {
    font-size: 1rem;
    color: var(--svr-color-text-muted);
    opacity: 0.8;
}

/* 3. Typography Roster Index */
.svr-h4-roster-section {
    padding: 80px 40px;
    background: var(--svr-color-bg-dark);
    color: var(--svr-color-text-light);
}
.svr-h4-roster-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
}
.svr-h4-roster-header h2 {
    font-family: var(--svr-font-heading);
    font-size: 4rem;
}
.svr-h4-roster-header h2 em {
    color: var(--svr-color-accent-gold);
    font-style: italic;
}
.svr-h4-roster-list {
    border-top: 1px solid rgba(255,255,255,0.1);
}
.svr-h4-roster-item {
    display: flex;
    align-items: center;
    padding: 40px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-decoration: none;
    color: var(--svr-color-text-light);
    position: relative;
    transition: all 0.4s ease;
}
.svr-h4-roster-item:hover {
    border-bottom-color: rgba(255,255,255,0.3);
}
.svr-h4-roster-meta {
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.svr-h4-roster-category {
    color: var(--svr-color-accent-gold);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.svr-h4-roster-time {
    font-size: 0.85rem;
    opacity: 0.6;
}
.svr-h4-roster-title {
    flex: 1;
    font-family: var(--svr-font-heading);
    font-size: 3rem;
    transition: color 0.3s ease;
}
.svr-h4-roster-item:hover .svr-h4-roster-title {
    color: var(--svr-color-accent-gold);
}
.svr-h4-roster-arrow {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}
.svr-h4-roster-item:hover .svr-h4-roster-arrow {
    background: transparent;
    color: var(--svr-color-accent-gold);
    border-color: var(--svr-color-accent-gold);
}
.svr-h4-roster-img {
    position: absolute;
    right: 150px;
    top: 50%;
    transform: translateY(-50%) scale(0.8);
    width: 200px;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 10;
}
.svr-h4-roster-item:hover .svr-h4-roster-img {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    right: 180px;
}

/* 4. Dual Hover Expansion */
.svr-h4-dual-hover-section {
    padding: 80px 40px;
}
.svr-h4-dual-header {
    text-align: center;
    margin-bottom: 60px;
}
.svr-h4-dual-header h2 {
    font-family: var(--svr-font-heading);
    font-size: 4rem;
    color: var(--svr-color-text-dark);
}
.svr-h4-dual-header h2 em {
    color: var(--svr-color-accent-gold);
    font-style: italic;
}
.svr-h4-dual-container {
    display: flex;
    height: 700px;
    border-radius: 30px;
    overflow: hidden;
}
.svr-h4-dual-panel {
    flex: 1;
    position: relative;
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
}
.svr-h4-dual-panel:hover {
    flex: 1.5;
}
.svr-h4-dual-panel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.svr-h4-dual-panel:hover img {
    transform: scale(1.05);
}
.svr-h4-dual-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    transition: background 0.4s ease;
}
.svr-h4-dual-panel:hover .svr-h4-dual-overlay {
    background: rgba(0,0,0,0.3);
}
.svr-h4-dual-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--svr-color-text-light);
    padding: 40px;
    z-index: 2;
}
.svr-h4-dual-content h3 {
    font-family: var(--svr-font-heading);
    font-size: 4rem;
    margin-bottom: 20px;
    transition: transform 0.4s ease;
}
.svr-h4-dual-panel:hover .svr-h4-dual-content h3 {
    transform: translateY(-10px);
}
.svr-h4-dual-content p {
    font-size: 1.2rem;
    max-width: 400px;
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}
.svr-h4-dual-panel:hover .svr-h4-dual-content p {
    opacity: 1;
    transform: translateY(0);
}
.svr-h4-dual-content .svr-h4-btn-outline {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    transition-delay: 0.1s;
    border-color: rgba(255,255,255,0.4);
    color: var(--svr-color-text-light);
}
.svr-h4-dual-panel:hover .svr-h4-dual-content .svr-h4-btn-outline {
    opacity: 1;
    transform: translateY(0);
}
.svr-h4-dual-content .svr-h4-btn-outline:hover {
    background: var(--svr-color-text-light);
    color: var(--svr-color-bg-dark);
}

/* Ultra Premium Footer */
.svr-h4-footer {
    background: var(--svr-color-bg-dark);
    padding: 100px 80px 40px;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    margin-top: 80px;
}
.svr-h4-footer-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 80px;
    padding-bottom: 80px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.svr-h4-footer-brand h2 {
    font-family: var(--svr-font-heading);
    font-size: 4rem;
    color: var(--svr-color-text-light);
    margin-bottom: 20px;
}
.svr-h4-footer-brand p {
    color: var(--svr-color-text-muted-light);
    font-size: 1.1rem;
    max-width: 300px;
}
.svr-h4-footer-links {
    display: flex;
    gap: 80px;
}
.svr-h4-footer-col h4 {
    color: var(--svr-color-accent-gold);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 30px;
}
.svr-h4-footer-col a {
    display: block;
    color: var(--svr-color-text-muted-light);
    text-decoration: none;
    margin-bottom: 15px;
    font-size: 1rem;
    transition: color 0.3s ease;
}
.svr-h4-footer-col a:hover {
    color: var(--svr-color-text-light);
}
.svr-h4-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--svr-color-text-muted-light);
    font-size: 0.85rem;
}
.svr-h4-footer-legal a {
    color: var(--svr-color-text-muted-light);
    text-decoration: none;
    margin-left: 30px;
    transition: color 0.3s ease;
}
.svr-h4-footer-legal a:hover {
    color: var(--svr-color-text-light);
}

/* Editor's Choice Spread */
.svr-h4-editorial-spread {
    display: flex;
    margin: 80px 40px;
    background: var(--svr-color-card-light);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.03);
}

.svr-h4-ed-image {
    flex: 1;
    position: relative;
    min-height: 500px;
}

.svr-h4-ed-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.svr-h4-ed-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--svr-color-text-light);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.svr-h4-ed-play:hover {
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-bg-dark);
    border-color: var(--svr-color-accent-gold);
    transform: translate(-50%, -50%) scale(1.1);
}

.svr-h4-ed-content {
    flex: 1;
    padding: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.svr-h4-ed-tag {
    color: var(--svr-color-accent-gold);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.svr-h4-ed-content h2 {
    font-family: var(--svr-font-heading);
    font-size: 4rem;
    line-height: 1;
    color: var(--svr-color-text-dark);
    margin-bottom: 30px;
}

.svr-h4-ed-content h2 em {
    font-style: italic;
    color: var(--svr-color-accent-gold);
}

.svr-h4-ed-content p {
    color: var(--svr-color-text-muted-light);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 40px;
}

.svr-h4-ed-stats {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--svr-color-border-light);
}

.svr-h4-ed-stat {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.svr-h4-ed-stat strong {
    font-family: var(--svr-font-heading);
    font-size: 2rem;
    color: var(--svr-color-text-dark);
    line-height: 1;
}

.svr-h4-ed-stat span {
    font-size: 0.75rem;
    color: var(--svr-color-text-muted-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Culinary Disciplines Grid */
.svr-h4-disciplines-section {
    padding: 80px 40px;
}

.svr-h4-disciplines-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
}

.svr-h4-disciplines-header h2 {
    font-family: var(--svr-font-heading);
    font-size: 3.5rem;
    color: var(--svr-color-text-dark);
}

.svr-h4-disciplines-header h2 em {
    font-style: italic;
    color: var(--svr-color-accent-gold);
}

.svr-h4-disciplines-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.svr-h4-disc-card {
    text-decoration: none;
    display: block;
}

.svr-h4-disc-img-wrapper {
    width: 100%;
    height: 350px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 25px;
    position: relative;
}

.svr-h4-disc-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.svr-h4-disc-card:hover .svr-h4-disc-img-wrapper img {
    transform: scale(1.05);
}

.svr-h4-disc-info h3 {
    font-family: var(--svr-font-heading);
    font-size: 1.8rem;
    color: var(--svr-color-text-dark);
    margin-bottom: 10px;
    transition: color 0.3s ease;
}
.svr-h4-disc-info p {
    font-size: 1.1rem;
    color: var(--svr-color-text-muted-light);
}

.svr-h4-disc-card:hover .svr-h4-disc-info h3 {
    color: var(--svr-color-accent-gold);
}

.svr-h4-disc-info p {
    color: var(--svr-color-text-muted-light);
    font-size: 1rem;
}

/* =========================================
   HOME 4 PREMIUM UPGRADES (PRO WRAPPERS, TITLES, SECRETS, FOOTER)
   ========================================= */

/* 1. Universal Wrapper Spacing for ALL Sections */
.svr-h4-bento-section,
.svr-h4-accordion-section,
.svr-h4-roster-section,
.svr-h4-dual-hover-section,
.svr-h4-split-profiles,
.svr-h4-disciplines-section,
.svr-h4-chef-secrets {
    margin: 0 40px 80px !important;
    border-radius: 40px !important;
}

/* Ensure inner paddings are balanced now that they are boxed */
.svr-h4-bento-section { padding: 60px; background: var(--svr-color-card-light); }
.svr-h4-accordion-section { padding: 60px; background: var(--svr-color-bg-dark); }
.svr-h4-roster-section { padding: 60px; }
.svr-h4-dual-hover-section { padding: 60px; background: var(--svr-color-sidebar); }
.svr-h4-disciplines-section { padding: 60px; background: var(--svr-color-card-light); }

/* 2. Premium Section Titles Typography Overrides */
.svr-h4-bento-header h2,
.svr-h4-accordion-header h2,
.svr-h4-roster-header h2,
.svr-h4-dual-header h2,
.svr-h4-disc-header h2 {
    position: relative !important;
    padding-left: 30px !important;
    letter-spacing: -0.03em !important;
    text-transform: capitalize !important;
    font-weight: 400 !important;
}
.svr-h4-bento-header h2::before,
.svr-h4-accordion-header h2::before,
.svr-h4-roster-header h2::before,
.svr-h4-dual-header h2::before,
.svr-h4-disc-header h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    height: 70%;
    width: 5px;
    background: linear-gradient(to bottom, var(--svr-color-accent-gold), transparent);
    border-radius: 4px;
}
.svr-h4-bento-header h2 em,
.svr-h4-accordion-header h2 em,
.svr-h4-roster-header h2 em,
.svr-h4-dual-header h2 em,
.svr-h4-disc-header h2 em {
    font-weight: 300 !important;
    text-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
    letter-spacing: 0.05em;
}

/* Fix specific alignment if they were centered before */
.svr-h4-accordion-header, .svr-h4-dual-header, .svr-h4-split-header {
    text-align: left !important;
    margin-bottom: 50px;
}

/* Fix text contrast for dark sections */
.svr-h4-accordion-header h2,
.svr-h4-split-header h2 {
    color: var(--svr-color-text-light) !important;
}

/* 3. New Interactive Chef's Secrets Section */
.svr-h4-chef-secrets {
    display: flex;
    background: var(--svr-color-bg-dark);
    padding: 80px 60px;
    gap: 60px;
    align-items: center;
}
.svr-h4-secrets-left {
    flex: 1;
    color: var(--svr-color-text-light);
}
.svr-h4-secrets-badge {
    color: var(--svr-color-accent-gold);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
}
.svr-h4-secrets-left h2 {
    font-family: var(--svr-font-heading);
    font-size: 5rem;
    line-height: 1;
    margin-bottom: 30px;
}
.svr-h4-secrets-left h2 em {
    font-style: italic;
    color: var(--svr-color-accent-gold);
}
.svr-h4-secrets-left p {
    font-size: 1.1rem;
    color: var(--svr-color-text-muted-light);
    margin-bottom: 40px;
    max-width: 400px;
}
.svr-h4-secrets-right {
    flex: 1.5;
    display: flex;
    gap: 20px;
    perspective: 1000px;
}
.svr-h4-secret-card {
    flex: 1;
    position: relative;
    height: 450px;
    border-radius: 20px;
    overflow: hidden;
    transform-style: preserve-3d;
    transform: rotateY(-15deg) translateZ(0);
    transition: transform 0.5s ease, flex 0.5s ease;
    animation: svr-float-card 6s ease-in-out infinite alternate;
    animation-delay: var(--d);
}
@keyframes svr-float-card {
    0% { transform: rotateY(-15deg) translateY(0); }
    100% { transform: rotateY(-15deg) translateY(-20px); }
}
.svr-h4-secret-card:hover {
    flex: 1.5;
    transform: rotateY(0) translateZ(50px) !important;
    animation-play-state: paused;
    z-index: 10;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}
.svr-h4-secret-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    transition: opacity 0.5s ease;
}
.svr-h4-secret-card:hover img {
    opacity: 1;
}
.svr-h4-secret-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    color: var(--svr-color-text-light);
}
.svr-h4-secret-info span {
    font-family: var(--svr-font-heading);
    font-size: 1.5rem;
    color: var(--svr-color-accent-gold);
    display: block;
    margin-bottom: 5px;
}
.svr-h4-secret-info h4 {
    font-size: 1.2rem;
    font-weight: 500;
}

/* 3.5 Pre-Footer Utilities */
.svr-h4-pre-footer {
    display: flex;
    gap: 30px;
    margin: 0 40px 60px;
}
.svr-h4-pf-card {
    flex: 1;
    background: var(--svr-color-card-light);
    border-radius: 30px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 250px;
}
.svr-h4-pf-content {
    position: relative;
    z-index: 2;
    max-width: 85%;
}
.svr-h4-pf-content h3 {
    font-family: var(--svr-font-heading);
    font-size: 1.8rem;
    color: var(--svr-color-text-dark);
    margin-bottom: 10px;
}
.svr-h4-pf-content p {
    color: var(--svr-color-text-muted-light);
    font-size: 1rem;
    margin-bottom: 25px;
    line-height: 1.5;
}
.svr-h4-pf-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--svr-color-text-dark);
    text-decoration: none;
    letter-spacing: 0.1em;
    border: 1px solid rgba(0,0,0,0.1);
    padding: 12px 25px;
    border-radius: 30px;
    transition: all 0.3s ease;
}
.svr-h4-pf-btn:hover {
    background: var(--svr-color-bg-dark);
    color: var(--svr-color-text-light);
}
.svr-h4-pf-search {
    display: flex;
    background: var(--svr-color-bg-light);
    border-radius: 30px;
    border: 1px solid rgba(0,0,0,0.1);
    overflow: hidden;
    height: 46px;
}
.svr-h4-pf-search input {
    flex: 1;
    border: none;
    padding: 0 20px;
    background: transparent;
    outline: none;
    font-size: 0.9rem;
}
.svr-h4-pf-search button {
    background: var(--svr-color-bg-dark);
    color: var(--svr-color-text-light);
    border: none;
    padding: 0 20px;
    cursor: pointer;
    transition: background 0.3s ease;
}
.svr-h4-pf-search button:hover {
    background: var(--svr-color-accent-gold);
}
.svr-h4-pf-img {
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 250px;
    height: auto;
    z-index: 1;
    object-fit: contain;
    transform: rotate(5deg);
    pointer-events: none;
}
.svr-h4-pf-img-ingredients {
    width: 220px;
    right: -10px;
    bottom: 10px;
    transform: rotate(-10deg);
}
.svr-h4-pf-img-whisk {
    width: 280px;
    right: -30px;
    bottom: -10px;
    transform: rotate(30deg);
}

/* 4. Ultra Premium Pro Footer */
.svr-h4-footer-pro {
    position: relative;
    margin: 0 40px 40px;
    border-radius: 40px;
    padding: 100px 60px 40px; /* Reduced top padding */
    color: var(--svr-color-text-light);
}
.svr-h4-footer-pro::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/Gemini_Generated_Image_32wiw332wiw332wi.png') center/cover no-repeat;
    opacity: 0.15;
    z-index: 1;
    border-radius: 40px;
    overflow: hidden;
}
.svr-h4-footer-pro::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,1) 10%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.4) 100%);
    z-index: 2;
    border-radius: 40px;
    overflow: hidden;
}

/* Modern Typographic Subscription */
.svr-h4-fp-top-mass {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 80px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.svr-h4-fp-huge-text {
    font-family: var(--svr-font-heading);
    font-size: 6rem;
    line-height: 0.9;
    color: var(--svr-color-text-light);
    margin: 0;
}
.svr-h4-fp-huge-text em {
    color: var(--svr-color-accent-gold);
    font-style: italic;
    font-family: var(--svr-font-heading);
}
.svr-h4-fp-sub-inline {
    max-width: 400px;
}
.svr-h4-fp-sub-inline p {
    color: var(--svr-color-text-muted-light);
    font-size: 1.1rem;
    margin-bottom: 20px;
    line-height: 1.6;
}
.svr-h4-fp-inline-form {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 10px;
    transition: border-color 0.3s ease;
}
.svr-h4-fp-inline-form:focus-within {
    border-color: var(--svr-color-accent-gold);
}
.svr-h4-fp-inline-form input {
    background: transparent;
    border: none;
    color: var(--svr-color-text-light);
    font-size: 1rem;
    flex: 1;
    outline: none;
}
.svr-h4-fp-inline-form button {
    background: transparent;
    color: var(--svr-color-accent-gold);
    border: none;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: gap 0.3s ease;
}
.svr-h4-fp-inline-form button:hover {
    gap: 15px;
}

.svr-h4-fp-main, .svr-h4-fp-bottom {
    position: relative;
    z-index: 3;
}
.svr-h4-fp-main {
    display: flex;
    gap: 100px;
    margin-bottom: 80px;
}
.svr-h4-fp-brand {
    flex: 1;
}
.svr-h4-fp-brand h2 {
    font-family: var(--svr-font-heading);
    font-size: 3rem;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
}
.svr-h4-fp-brand p {
    color: var(--svr-color-text-muted-light);
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 350px;
}
.svr-h4-fp-social {
    display: flex;
    gap: 15px;
}
.svr-h4-fp-social a {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    color: var(--svr-color-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}
.svr-h4-fp-social a:hover {
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-bg-dark);
    transform: translateY(-5px);
}
.svr-h4-fp-links {
    flex: 2;
    display: flex;
    gap: 60px;
}
.svr-h4-fp-col h4 {
    color: var(--svr-color-accent-gold);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 30px;
}
.svr-h4-fp-col a {
    display: block;
    color: var(--svr-color-text-muted-light);
    text-decoration: none;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}
.svr-h4-fp-col a:hover {
    color: var(--svr-color-text-light);
    padding-left: 5px;
}
.svr-h4-fp-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: var(--svr-color-text-muted-light);
    font-size: 0.9rem;
}
.svr-h4-fp-legal a {
    color: var(--svr-color-text-muted-light);
    text-decoration: none;
    margin: 0 15px;
    transition: color 0.3s ease;
}
.svr-h4-fp-legal a:hover {
    color: var(--svr-color-text-light);
}
.svr-h4-fp-totop {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: var(--svr-color-text-light);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}
.svr-h4-fp-totop:hover {
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-bg-dark);
}

/* 5. Hero Spacing Adjustments */
.svr-h4-hero-content h1 {
    font-size: 4rem !important;
    line-height: 1.1 !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 20px !important;
}
.svr-h4-hero-content h1 em {
    font-size: 5rem !important;
    line-height: 1 !important;
}
.svr-h4-hero-content {
    padding-left: 80px !important;
}

/* 6. Luxury Split Profiles */
.svr-h4-split-profiles {
    background: var(--svr-color-bg-dark);
    padding: 80px 60px;
    color: var(--svr-color-text-light);
}
.svr-h4-sp-container {
    display: flex;
    gap: 40px;
}
.svr-h4-sp-card {
    flex: 1;
    text-decoration: none;
    color: var(--svr-color-text-light);
    display: flex;
    flex-direction: column;
}
.svr-h4-sp-img {
    width: 100%;
    height: 400px;
    overflow: hidden;
    margin-bottom: 30px;
    border-radius: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.05);
}
.svr-h4-sp-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), filter 0.8s ease;
    filter: brightness(0.85);
}
.svr-h4-sp-card:hover .svr-h4-sp-img img {
    transform: scale(1.03);
    filter: brightness(1);
}
.svr-h4-sp-content {
    position: relative;
    padding-left: 50px;
}
.svr-h4-sp-content span {
    position: absolute;
    left: 0;
    top: 5px;
    font-size: 1.2rem;
    color: var(--svr-color-accent-gold);
    font-family: var(--svr-font-heading);
}
.svr-h4-sp-content h3 {
    font-family: var(--svr-font-heading);
    font-size: 2.5rem;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}
.svr-h4-sp-card:hover .svr-h4-sp-content h3 {
    color: var(--svr-color-accent-gold);
}
.svr-h4-sp-content p {
    color: var(--svr-color-text-muted-light);
    font-size: 1.1rem;
    margin-bottom: 20px;
    line-height: 1.6;
}
.svr-h4-sp-link {
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: gap 0.3s ease;
}
.svr-h4-sp-card:hover .svr-h4-sp-link {
    gap: 15px;
    color: var(--svr-color-accent-gold);
}

/* ==========================================================================
   V2: ULTRA PREMIUM REDESIGN (APPEND ONLY)
   ========================================================================== */

/* 1. Cinematic Split Profiles */
.tft-cin-split {
    display: flex;
    width: 100%;
    height: 90vh;
    min-height: 700px;
    margin: 0;
}
.tft-cin-panel {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-decoration: none;
    transition: flex 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.tft-cin-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.tft-cin-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(0.6) grayscale(30%);
}
.tft-cin-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--svr-color-text-light);
    max-width: 500px;
    padding: 40px;
    transition: transform 0.8s ease;
}
.tft-cin-num {
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    color: var(--svr-color-accent-gold);
    display: block;
    margin-bottom: 20px;
}
.tft-cin-content h3 {
    font-family: var(--svr-font-heading);
    font-size: 5.5rem;
    font-weight: 300;
    font-style: italic;
    margin-bottom: 25px;
}
.tft-cin-content p {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.75);
    margin-bottom: 40px;
}
.tft-cin-btn {
    display: inline-block;
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid var(--svr-color-accent-gold);
    padding-bottom: 8px;
    transition: color 0.4s ease;
}
.tft-cin-panel:hover {
    flex: 1.2;
}
.tft-cin-panel:hover .tft-cin-bg img {
    transform: scale(1.05);
    filter: brightness(1) grayscale(0%);
}

/* 2. Monolith Footer */
.tft-monolith-footer {
    background: var(--svr-color-bg-dark);
    padding: 120px 80px 40px;
    color: var(--svr-color-text-light);
    border-top: 1px solid rgba(255,255,255,0.05);
}
.tft-monolith-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 100px;
}
.tft-monolith-brand h2 {
    font-family: var(--svr-font-heading);
    font-size: 2.5rem;
    letter-spacing: 0.1em;
    margin-bottom: 15px;
}
.tft-monolith-brand p {
    color: var(--svr-color-text-muted-light);
    max-width: 300px;
    line-height: 1.6;
}
.tft-monolith-nav {
    display: flex;
    gap: 80px;
}
.tft-monolith-col h4 {
    color: var(--svr-color-accent-gold);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 30px;
}
.tft-monolith-col a {
    display: block;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    margin-bottom: 15px;
    transition: color 0.4s ease;
}
.tft-monolith-col a:hover {
    color: var(--svr-color-text-light);
}
.tft-monolith-mid {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 40px;
}
.tft-monolith-news h3 {
    font-family: var(--svr-font-heading);
    font-size: 4.5rem;
    font-weight: 300;
    margin-bottom: 20px;
}
.tft-monolith-news h3 em {
    color: var(--svr-color-accent-gold);
    font-style: italic;
}
.tft-monolith-form {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    width: 400px;
    padding-bottom: 10px;
}
.tft-monolith-form input {
    background: transparent;
    border: none;
    color: var(--svr-color-text-light);
    flex: 1;
    font-size: 1rem;
    outline: none;
}
.tft-monolith-form button {
    background: transparent;
    border: none;
    color: var(--svr-color-accent-gold);
    font-size: 1.2rem;
    cursor: pointer;
}
.tft-monolith-social {
    display: flex;
    gap: 15px;
}
.tft-monolith-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    color: var(--svr-color-text-light);
    text-decoration: none;
    font-size: 1.2rem;
    transition: background 0.4s ease;
}
.tft-monolith-social a:hover {
    background: rgba(255,255,255,0.15);
}
.tft-monolith-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.4);
}
.tft-monolith-legal {
    display: flex;
    gap: 30px;
}
.tft-monolith-legal a {
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    transition: color 0.4s ease;
}
.tft-monolith-legal a:hover {
    color: var(--svr-color-text-light);
}
.tft-monolith-totop {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: var(--svr-color-text-light);
    border: none;
    cursor: pointer;
    transition: background 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tft-monolith-totop:hover {
    background: rgba(255,255,255,0.2);
}

/* 3. Pre-Footer Refinements */
.svr-h4-pf-card {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0,0,0,0.03);
}
.svr-h4-pf-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.08);
}
.svr-h4-pf-img {
    width: 140px;
    right: -10px;
    bottom: -10px;
    transform: rotate(5deg) scale(1);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.svr-h4-pf-card:hover .svr-h4-pf-img {
    transform: rotate(10deg) scale(1.08);
}
.svr-h4-pf-img-ingredients {
    width: 150px;
    right: -20px;
    bottom: -20px;
    transform: rotate(-10deg) scale(1);
}
.svr-h4-pf-card:hover .svr-h4-pf-img-ingredients {
    transform: rotate(-15deg) scale(1.08);
}
.svr-h4-pf-img-whisk {
    width: 180px;
    right: -30px;
    bottom: -30px;
    transform: rotate(30deg) scale(1);
}
.svr-h4-pf-card:hover .svr-h4-pf-img-whisk {
    transform: rotate(35deg) scale(1.08);
}

/* ==========================================================================
   V3: PREMIUM VISUAL OVERHAUL (APPEND ONLY)
   ========================================================================== */

/* Ã¢â€â‚¬Ã¢â€â‚¬ 1. Cinematic Split: Gold Divider + Richer Overlays Ã¢â€â‚¬Ã¢â€â‚¬ */
.tft-cin-split {
    margin: 0 40px 80px;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0,0,0,0.3);
    position: relative;
}
.tft-cin-split::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: linear-gradient(to bottom, transparent 0%, var(--svr-color-accent-gold) 30%, var(--svr-color-accent-gold) 70%, transparent 100%);
    z-index: 10;
    pointer-events: none;
}
.tft-cin-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    transition: opacity 0.8s ease;
}
.tft-cin-spp-savory::before,
.tft-cin-panel:first-child::before {
    background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(30,15,5,0.4) 100%);
}
.tft-cin-panel:last-child::before {
    background: linear-gradient(225deg, rgba(0,0,0,0.7) 0%, rgba(20,10,30,0.4) 100%);
}
.tft-cin-panel:hover::before {
    opacity: 0.5;
}
.tft-cin-content {
    z-index: 3;
    text-align: left;
    padding-inline-start: 60px;
    padding-inline-end: 40px;
    align-self: flex-end;
    padding-bottom: 70px;
    width: 100%;
}
.tft-cin-num {
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    color: var(--svr-color-accent-gold);
}
.tft-cin-content h3 {
    font-size: clamp(3.5rem, 5vw, 6rem);
    text-shadow: 0 4px 30px rgba(0,0,0,0.6);
    line-height: 1;
}
.tft-cin-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--svr-color-accent-gold);
    padding-bottom: 6px;
    color: var(--svr-color-accent-gold);
    font-size: 0.75rem;
    letter-spacing: 0.3em;
}
.tft-cin-btn::after {
    content: 'Ã¢â€ â€™';
    transition: transform 0.3s ease;
}
.tft-cin-panel:hover .tft-cin-btn::after {
    transform: translateX(6px);
}

/* Ã¢â€â‚¬Ã¢â€â‚¬ 2. Pre-Footer V2 Cards Ã¢â€â‚¬Ã¢â€â‚¬ */
.tft-pf-v2 {
    margin-block-end: 0;
    border-radius: 0;
    margin-inline: 40px;
    margin-bottom: 0;
}
.tft-pf-eyebrow {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    font-weight: 700;
    color: var(--svr-color-accent-gold);
    margin-bottom: 12px;
}
.tft-pf-dark {
    background: var(--svr-color-bg-dark) !important;
    border-color: rgba(255,255,255,0.05) !important;
    flex: 1.2;
}
.tft-pf-dark h3 {
    color: var(--svr-color-text-light) !important;
    font-size: 2rem !important;
}
.tft-pf-dark p {
    color: rgba(255,255,255,0.55) !important;
}
.tft-pf-dark-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-decoration: none;
    color: var(--svr-color-accent-gold);
    border: 1px solid var(--svr-color-accent-gold);
    padding: 12px 24px;
    border-radius: 30px;
    transition: all 0.4s ease;
}
.tft-pf-dark-btn:hover {
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-bg-dark);
}

/* Ã¢â€â‚¬Ã¢â€â‚¬ 3. Footer V3: Luxury Gradient Ã¢â€â‚¬Ã¢â€â‚¬ */
.tft-monolith-footer {
    margin: 0 40px 0;
    border-radius: 40px 40px 0 0;
    padding: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(230, 185, 83, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(230, 185, 83, 0.05) 0%, transparent 50%),
        #0d0d0d;
    color: var(--svr-color-text-light);
    overflow: hidden;
}
.tft-monolith-top {
    padding: 70px 70px 60px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 0;
}
.tft-monolith-brand h2 {
    font-size: 1.4rem;
    letter-spacing: 0.4em;
    font-weight: 400;
    font-family: var(--svr-font-heading);
    background: linear-gradient(135deg, #fff 0%, var(--svr-color-accent-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 18px;
}
.tft-monolith-brand p {
    color: rgba(255,255,255,0.35);
    max-width: 280px;
    font-size: 0.9rem;
    line-height: 1.7;
}
.tft-monolith-mid {
    padding: 70px 70px 60px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 0;
    position: relative;
}
.tft-monolith-mid::before {
    content: 'SAVORÃƒâ€°';
    position: absolute;
    inset-inline-end: 60px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--svr-font-heading);
    font-size: clamp(6rem, 10vw, 12rem);
    font-weight: 400;
    color: rgba(255,255,255,0.025);
    letter-spacing: 0.1em;
    pointer-events: none;
    user-select: none;
    line-height: 1;
}
.tft-monolith-news h3 {
    font-size: clamp(2.5rem, 4vw, 4.5rem);
    font-weight: 300;
    line-height: 1.1;
    margin-bottom: 30px;
}
.tft-monolith-form {
    width: 480px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding-bottom: 14px;
}
.tft-monolith-form input::placeholder {
    color: rgba(255,255,255,0.3);
}
.tft-monolith-social a {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    width: 46px;
    height: 46px;
}
.tft-monolith-social a:hover {
    background: rgba(230,185,83,0.15);
    border-color: var(--svr-color-accent-gold);
    color: var(--svr-color-accent-gold);
}
.tft-monolith-bottom {
    padding: 28px 70px;
    border-top: 1px solid rgba(255,255,255,0.04);
    font-size: 0.8rem;
}

/* ==========================================================================
   HOTFIX: HOME 4 HOVER OVERFLOW & HORIZONTAL SCROLL
   ========================================================================== */

/* Fix horizontal scroll caused by 100% width combined with 40px margins */
.tft-cin-split {
    width: auto !important;
}

/* Enforce hardware masking to prevent images bleeding out of their border-radius on hover */
.tft-cin-panel,
.svr-h4-disc-img-wrapper,
.svr-h4-bento-item,
.svr-h4-sp-img,
.svr-h4-accordion-item {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    transform: translateZ(0);
    isolation: isolate;
    overflow: hidden !important;
}

/* ==========================================================================
   HOTFIX V2: JUMPING HOVER, SPLIT BORDER & FOOTER VISIBILITY
   ========================================================================== */

/* 1. Fix jumping hover on Art of Plating cards by stopping animation conflict */
.svr-h4-secret-card {
    animation: none !important;
    transform: rotateY(-15deg) translateZ(0) !important;
}
.svr-h4-secret-card:hover {
    transform: rotateY(0) scale(1.05) translateZ(50px) !important;
}

/* 2. Fix gold line crossing issue in Split Profiles */
.tft-cin-split::after {
    display: none !important; /* Remove static center line */
}
.tft-cin-panel:first-child {
    border-right: 2px solid transparent;
    position: relative;
}
.tft-cin-panel:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -1px;
    width: 2px;
    background: linear-gradient(to bottom, transparent 0%, var(--svr-color-accent-gold) 30%, var(--svr-color-accent-gold) 70%, transparent 100%);
    z-index: 10;
    pointer-events: none;
}

/* 3. Force Footer Visibility & Bulletproof Background Syntax */
.tft-monolith-footer {
    display: block !important;
    background-color: #0d0d0d !important;
    background-image: 
        radial-gradient(ellipse at 20% 0%, rgba(230, 185, 83, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(230, 185, 83, 0.05) 0%, transparent 50%) !important;
    min-height: 200px;
    position: relative;
    z-index: 10;
}

/* ==========================================================================
   ULTRA-PREMIUM RECIPE FOOTER V4 (SavorÃƒÂ© Home 4)
   ========================================================================== */
.svr-ultra-footer {
    background: #0d0d0d;
    color: var(--svr-color-text-light);
    border-radius: 40px 40px 0 0;
    margin: 0 40px 0;
    position: relative;
    overflow: hidden;
    height: auto !important;
    max-height: none !important;
    padding-bottom: 40px;
    box-shadow: 0 -20px 50px rgba(0,0,0,0.5);
    display: block !important;
    z-index: 10;
    flex-shrink: 0 !important; /* CRITICAL: Prevent flex parent from shrinking the footer and clipping content */
}

.svr-ultra-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 50% -20%, rgba(230,185,83,0.15) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(230,185,83,0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

/* Marquee */
.svr-uf-marquee {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 25px 0;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    z-index: 2;
    background: rgba(0,0,0,0.3);
}
.svr-uf-marquee-track {
    display: inline-block;
    animation: svr-marquee 40s linear infinite;
}
.svr-uf-marquee-track span {
    font-family: var(--svr-font-heading);
    font-size: 1.1rem;
    letter-spacing: 0.4em;
    color: var(--svr-color-accent-gold);
    text-transform: uppercase;
}
@keyframes svr-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Content */
.svr-uf-content {
    padding: 80px 60px 40px;
    position: relative;
    z-index: 2;
}

.svr-uf-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(40px, 5vw, 60px);
    margin-bottom: clamp(60px, 8vw, 100px);
}

.svr-uf-brand {
    flex: 1 1 300px;
}
.svr-uf-logo {
    font-family: var(--svr-font-heading);
    font-size: 2.5rem;
    color: var(--svr-color-text-light);
    text-decoration: none;
    letter-spacing: 0.2em;
    display: inline-block;
    margin-bottom: 25px;
    background: linear-gradient(135deg, var(--svr-color-text-light), var(--svr-color-accent-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.svr-uf-brand p {
    color: rgba(255,255,255,0.5);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 35px;
    max-width: 380px;
}

.svr-uf-socials {
    display: flex;
    gap: 15px;
}
.svr-uf-socials a {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--svr-color-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.4s ease;
}
.svr-uf-socials a:hover {
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
    border-color: var(--svr-color-accent-gold);
    transform: translateY(-5px);
}

.svr-uf-links-wrapper {
    flex: 2 1 350px;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(40px, 6vw, 80px);
}
.svr-uf-links-col {
    flex: 1 1 150px;
    display: flex;
    flex-direction: column;
}
.svr-uf-links-col h4 {
    color: var(--svr-color-accent-gold);
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 35px;
}
.svr-uf-links-col a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    margin-bottom: 18px;
    font-size: 1rem;
    transition: color 0.3s ease, transform 0.3s ease;
}
.svr-uf-links-col a:hover {
    color: var(--svr-color-text-light);
    transform: translateX(5px);
}

.svr-uf-newsletter {
    flex: 1 1 350px;
}
.svr-uf-news-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 30px;
    padding: 45px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.svr-uf-news-card h4 {
    font-family: var(--svr-font-heading);
    font-size: 2.2rem;
    color: var(--svr-color-text-light);
    margin-bottom: 15px;
    line-height: 1.1;
}
.svr-uf-news-card h4 em {
    color: var(--svr-color-accent-gold);
    font-style: italic;
}
.svr-uf-news-card p {
    color: rgba(255,255,255,0.5);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}
.svr-uf-news-card form {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 12px;
}
.svr-uf-news-card input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--svr-color-text-light);
    flex: 1;
    font-size: 1rem;
}
.svr-uf-news-card input::placeholder {
    color: rgba(255,255,255,0.3);
}
.svr-uf-news-card button {
    background: transparent;
    border: none;
    color: var(--svr-color-accent-gold);
    cursor: pointer;
    font-size: 1.3rem;
    transition: transform 0.3s ease;
}
.svr-uf-news-card button:hover {
    transform: translateX(5px);
}

/* Big Typography */
.svr-uf-big-text {
    text-align: center;
    padding: 60px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 40px;
    user-select: none;
}
.svr-uf-big-text h2 {
    font-family: var(--svr-font-heading);
    font-size: clamp(4rem, 9vw, 12rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    color: rgba(255,255,255,0.04);
}
.svr-uf-big-text h2 em {
    color: var(--svr-color-accent-gold);
    font-style: italic;
    opacity: 0.6;
}

.svr-uf-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    color: rgba(255,255,255,0.3);
    font-size: 0.9rem;
    gap: 30px;
}
.svr-uf-legal {
    display: flex;
    gap: 30px;
}
.svr-uf-legal a {
    color: rgba(255,255,255,0.3);
    text-decoration: none;
    transition: color 0.3s ease;
}
.svr-uf-legal a:hover {
    color: var(--svr-color-text-light);
}
.svr-uf-totop {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    color: var(--svr-color-text-light);
    border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}
.svr-uf-totop:hover {
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
    border-color: var(--svr-color-accent-gold);
    transform: translateY(-5px);
}

/* ==========================================================================
   SPACING & VISUAL IMPROVEMENTS (APPEND ONLY)
   ========================================================================== */

/* 1. Margin below Pre-Footer */
.svr-h4-pre-footer {
    margin-bottom: 80px !important; 
}

/* 2. Margin below Footer */
.svr-ultra-footer {
    margin-bottom: 40px !important;
}

/* 3. Improve White BG Visibility (Borders & Shadows) */
.svr-h4-bento-section,
.svr-h4-disciplines-section,
.svr-h4-pf-card {
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03) !important;
}

/* 4. Improve Pre-Footer Cards & Hovers */
.svr-h4-pf-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease !important;
}
.svr-h4-pf-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}
.svr-h4-pf-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    font-size: 0.85rem;
    color: var(--svr-color-text-muted-light);
    font-weight: 600;
    letter-spacing: 0.05em;
}
.svr-h4-pf-meta span i {
    color: var(--svr-color-accent-gold);
    margin-right: 5px;
}

/* 5. Improve "Master the Disciplines" Cards Hovers & Meta */
.svr-h4-disc-card {
    position: relative;
    padding-bottom: 20px;
}
.svr-h4-disc-img-wrapper {
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.svr-h4-disc-card:hover .svr-h4-disc-img-wrapper {
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.svr-h4-disc-meta {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    font-size: 0.8rem;
    color: var(--svr-color-text-muted-light);
    font-weight: 600;
    letter-spacing: 0.05em;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}
.svr-h4-disc-card:hover .svr-h4-disc-meta {
    opacity: 1;
    transform: translateY(0);
}
.svr-h4-disc-meta span i {
    color: var(--svr-color-accent-gold);
    margin-right: 5px;
}

/* ==========================================================================
   VISIBILITY, FOOTER RADIUS, BENTO & ACCORDION META FIXES
   ========================================================================== */

/* Fix Footer bottom radius */
.svr-ultra-footer {
    border-radius: 40px !important;
}

/* Fix text contrast on white cards */
.svr-h4-pf-meta span, 
.svr-h4-disc-meta span {
    color: #444 !important;
}

/* Fix "Master the Disciplines" description color just in case */
.svr-h4-disc-info p {
    color: #555 !important;
}

/* Bento Meta & Hovers */
.svr-h4-bento-meta {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
    font-weight: 600;
    letter-spacing: 0.05em;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}
.svr-h4-bento-item:hover .svr-h4-bento-meta {
    opacity: 1;
    transform: translateY(0);
}
.svr-h4-bento-meta span i {
    color: var(--svr-color-accent-gold);
    margin-right: 5px;
}

.svr-h4-bento-item {
    transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}
.svr-h4-bento-item:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
    z-index: 5;
}

/* Accordion Meta & Hovers */
.svr-h4-accordion-meta {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
    font-weight: 600;
    letter-spacing: 0.05em;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}
.svr-h4-accordion-item:hover .svr-h4-accordion-meta {
    opacity: 1;
    transform: translateY(0);
}
.svr-h4-accordion-meta span i {
    color: var(--svr-color-accent-gold);
    margin-right: 5px;
}

.svr-h4-accordion-item {
    transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s ease, box-shadow 0.4s ease !important;
}
.svr-h4-accordion-item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3) !important;
}

/* ==========================================================================
   POLISH & SPACING ADJUSTMENTS V3
   ========================================================================== */

/* 1. Footer Bottom Imbalance & To-Top Button Upgrade */
.svr-uf-bottom {
    padding: 40px 0 !important;
}

.svr-uf-totop {
    width: 65px !important;
    height: 65px !important;
    background: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-bg-dark) !important;
    border: none !important;
    font-size: 1.3rem !important;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.25) !important;
}
.svr-uf-totop:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.45) !important;
    background: var(--svr-color-accent-gold) !important;
}

/* 2. Bento Cards Polish & Elements Spacing */
.svr-h4-bento-meta {
    margin-top: 0 !important;
    margin-bottom: 25px !important;
}
.svr-h4-bento-link {
    width: 50px !important;
    height: 50px !important;
    background: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-bg-dark) !important;
    font-size: 1.2rem !important;
    border: none !important;
    transition: transform 0.4s ease !important;
}
.svr-h4-bento-item:hover .svr-h4-bento-link {
    transform: translateX(8px) !important;
}

/* 3. Pre-footer Boxes Polish */
.svr-h4-pf-card {
    padding: 50px !important; /* Provide more elegant breathing room */
}

/* ==========================================================================
   EXPLORE BY MOOD PILL UPGRADE (Home 1)
   ========================================================================== */
.svr-explore-pill {
    padding: 30px 45px !important;
    border-radius: 60px !important;
    box-shadow: 0 25px 60px rgba(0,0,0,0.15) !important;
    align-items: center !important;
}

.svr-explore-pill__label {
    font-weight: 800 !important;
    line-height: 1.4 !important;
    width: auto !important;
    max-width: 110px !important;
    border-right: 1px solid rgba(0,0,0,0.1) !important;
    padding-right: 30px !important;
    margin-right: 10px !important;
    font-size: 0.75rem !important;
}

.svr-mood-item i {
    width: 60px !important;
    height: 60px !important;
    font-size: 1.3rem !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.svr-mood-item span {
    margin-top: 5px !important;
    font-weight: 700 !important;
    transition: color 0.3s ease !important;
}

.svr-mood-item:hover i {
    transform: translateY(-6px) scale(1.05) !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.12) !important;
    color: var(--svr-color-accent-gold) !important;
    border-color: var(--svr-color-accent-gold) !important;
}
.svr-mood-item:hover span {
    color: var(--svr-color-text-dark) !important;
}

/* View All Dark Button Special Hover */
.svr-mood-item .fa-arrow-right {
    background: var(--svr-color-text-dark) !important;
    color: var(--svr-color-text-light) !important;
    border: none !important;
}
.svr-mood-item:hover .fa-arrow-right {
    background: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-text-dark) !important;
}

/* ==========================================================================
   HERO POLISH & BENTO ARROW FIX (Home 4)
   ========================================================================== */

/* 1. Hide Bento Arrows initially and dynamically reveal on hover */
.svr-h4-bento-link {
    opacity: 0 !important;
    transform: translateX(-15px) !important;
    pointer-events: none !important;
}
.svr-h4-bento-item:hover .svr-h4-bento-link {
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
}

/* 2. Hero Contrast & Deep Rich Background */
.svr-h4-hero-bg::after {
    background: linear-gradient(90deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 40%, rgba(0,0,0,0.2) 100%) !important;
}

/* 3. Hero Typography Polish & Hover Animations */
.svr-h4-hero-content h1 {
    text-shadow: 0 10px 40px rgba(0,0,0,0.9) !important;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.svr-h4-hero-content h1 em {
    display: inline-block !important; 
    text-shadow: 0 10px 30px rgba(212, 175, 55, 0.4) !important;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s ease !important;
}

.svr-h4-immersive-hero:hover .svr-h4-hero-content h1 {
    transform: translateX(10px) !important;
}
.svr-h4-immersive-hero:hover .svr-h4-hero-content h1 em {
    transform: translateX(15px) !important;
    color: var(--svr-color-text-light) !important;
}

/* 4. Enhanced Paragraph Readability */
.svr-h4-hero-content p {
    color: #f0f0f0 !important;
    font-weight: 400 !important;
    text-shadow: 0 5px 20px rgba(0,0,0,0.9) !important;
    font-size: 1.15rem !important;
    line-height: 1.9 !important;
    max-width: 500px !important;
}

/* 5. Masterclass Button Upgrade */
.svr-h4-btn-glass {
    border: 1px solid rgba(212, 175, 55, 0.5) !important;
    background: rgba(0, 0, 0, 0.5) !important;
}
.svr-h4-btn-glass i {
    color: var(--svr-color-accent-gold) !important;
    transition: color 0.3s ease !important;
}
.svr-h4-btn-glass:hover {
    background: var(--svr-color-accent-gold) !important;
    border-color: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-text-dark) !important;
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.4) !important;
}
.svr-h4-btn-glass:hover i {
    color: var(--svr-color-text-dark) !important;
}

/* 6. Hero Stats Polish (Using Premium Serif) */
.svr-h4-hero-stats span {
    color: rgba(255,255,255,0.7) !important;
}
.svr-h4-hero-stats strong {
    color: var(--svr-color-text-light) !important;
    font-family: var(--svr-font-heading) !important;
    font-size: 1.8rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-shadow: 0 5px 15px rgba(0,0,0,0.5) !important;
}

/* 7. Badge Refinement */
.svr-h4-hero-badge {
    background: rgba(0,0,0,0.6) !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.4) !important;
}

/* ==========================================================================
   ULTRA-PREMIUM HERO 4 TYPOGRAPHY OVERHAUL & POLISH
   ========================================================================== */

/* 1. Flawless Hero Typography (Fix Alignment & Height) */
.svr-h4-hero-content h1 {
    font-family: var(--svr-font-heading) !important;
    font-size: 5rem !important;
    line-height: 0.9 !important; /* Prevent <br> double spacing */
    letter-spacing: 0.05em !important;
    color: #fff !important;
    text-shadow: 0 5px 30px rgba(0,0,0,0.9) !important; /* Elegant text shadow for contrast */
    transform: none !important;
    font-weight: 400 !important;
    margin-bottom: 25px !important;
    text-align: left !important;
}

.svr-h4-hero-content h1 em {
    display: inline-block !important; /* Fixes layout break that pushed button down */
    font-family: var(--svr-font-heading) !important;
    font-style: italic !important;
    font-weight: 300 !important;
    font-size: 6rem !important;
    color: var(--svr-color-accent-gold) !important;
    letter-spacing: 0 !important;
    text-transform: lowercase !important;
    margin-left: 0 !important; /* Flush left alignment as requested */
    text-shadow: 0 5px 20px rgba(0,0,0,0.8) !important;
    transform: none !important;
}

/* Strictly prevent text movement on hover */
.svr-h4-immersive-hero:hover .svr-h4-hero-content h1,
.svr-h4-immersive-hero:hover .svr-h4-hero-content h1 em {
    transform: none !important;
}
.svr-h4-immersive-hero:hover .svr-h4-hero-content h1 em {
    color: var(--svr-color-accent-gold) !important;
}

/* 2. Premium Paragraph Styling */
.svr-h4-hero-content p {
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
    color: #e2e2e2 !important;
    border-left: 3px solid var(--svr-color-accent-gold) !important;
    padding-left: 25px !important;
    margin-left: 0 !important;
    max-width: 500px !important;
    text-shadow: 0 5px 20px rgba(0,0,0,0.9) !important;
    font-weight: 300 !important;
    text-align: left !important;
}

/* 3. Dynamic & Elegant Background Overlay (Fix boring solid black) */
.svr-h4-hero-bg::after {
    /* Use a beautiful radial gradient to spotlight the text without killing the image */
    background: radial-gradient(ellipse at 25% 50%, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.75) 30%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0) 80%) !important;
}

/* 4. Elegant Hero Hover State */
.svr-h4-hero-bg img {
    transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.svr-h4-immersive-hero:hover .svr-h4-hero-bg img {
    transform: scale(1.04) !important;
}

/* 5. Masterclass Button Restored */
.svr-h4-btn-glass {
    border: 1px solid rgba(212, 175, 55, 0.5) !important;
    background: rgba(0, 0, 0, 0.6) !important;
    color: var(--svr-color-text-light) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
}
.svr-h4-btn-glass i {
    color: var(--svr-color-accent-gold) !important;
}
.svr-h4-btn-glass:hover {
    background: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-text-dark) !important;
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.4) !important;
}
.svr-h4-btn-glass:hover i {
    color: var(--svr-color-text-dark) !important;
}

/* ==========================================================================
   HERO STATS ULTRA-PREMIUM UPGRADE
   ========================================================================== */

.svr-h4-hero-stats {
    display: flex;
    gap: 30px !important;
    align-items: center;
    position: relative;
    padding: 15px 25px !important;
    border-radius: 16px !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden;
    cursor: default;
    border: 1px solid transparent;
}

/* The requested dark gradient overlay from bottom to top on hover */
.svr-h4-hero-stats::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, transparent 100%) !important;
    opacity: 0;
    transition: opacity 0.6s ease !important;
    z-index: 1;
}

.svr-h4-hero-stats:hover {
    border-color: rgba(255,255,255,0.1) !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3) !important;
}

.svr-h4-hero-stats:hover::before {
    opacity: 1 !important;
}

.svr-h4-hero-stats span {
    position: relative;
    z-index: 2;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.15em !important;
    color: rgba(255,255,255,0.6) !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s ease !important;
}

.svr-h4-hero-stats:hover span {
    transform: translateY(-4px) !important;
    color: rgba(255,255,255,0.9) !important;
}

.svr-h4-hero-stats strong {
    font-family: var(--svr-font-heading) !important;
    font-size: 2.2rem !important;
    font-weight: 300 !important;
    color: var(--svr-color-text-light) !important;
    line-height: 1 !important;
    text-shadow: 0 5px 15px rgba(0,0,0,0.6) !important;
    margin-bottom: 6px !important;
    transition: color 0.4s ease, text-shadow 0.4s ease !important;
}

.svr-h4-hero-stats:hover strong {
    color: var(--svr-color-accent-gold) !important;
    text-shadow: 0 8px 20px rgba(212, 175, 55, 0.3) !important;
}

/* 6. Add the missing arrow to Cinematic Split Buttons */
.tft-cin-btn::after {
    content: '\2192';
    margin-left: 12px;
    color: var(--svr-color-accent-gold);
    font-size: 1.2em;
    vertical-align: middle;
    transition: transform 0.4s ease;
    display: inline-block;
}
.tft-cin-panel:hover .tft-cin-btn::after {
    transform: translateX(6px);
}

/* ==========================================================================
   CINEMATIC SPLIT (HERO-LIKE) POLISH
   ========================================================================== */

/* 1. Add the requested dark bottom-to-top gradient overlay */
.tft-cin-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 40%, transparent 100%) !important;
    opacity: 0.6; /* Base dark state for contrast */
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 2;
    pointer-events: none;
}

/* On hover, fade the dark gradient in smoothly for a rich, professional overlay */
.tft-cin-panel:hover .tft-cin-bg::after {
    opacity: 1 !important;
}

/* Override the old brightness filter that washed out the text */
.tft-cin-panel:hover .tft-cin-bg img {
    filter: brightness(0.8) grayscale(0%) !important; /* Keep it dark enough for text */
}

/* Smoothly animate the text block lifting up on hover */
.tft-cin-content {
    z-index: 3 !important;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.tft-cin-panel:hover .tft-cin-content {
    transform: translateY(-10px) !important;
}

/* ==========================================================================
   INDEX-4: PRE-FOOTER CARDS PREMIUM UPGRADE
   ========================================================================== */

.svr-h4-pf-card {
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: linear-gradient(145deg, rgba(20,20,20,0.8) 0%, rgba(10,10,10,0.9) 100%) !important;
    backdrop-filter: blur(10px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateY(0) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    position: relative;
    overflow: hidden;
}

.svr-h4-pf-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.1), transparent 50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.svr-h4-pf-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.8), 0 0 20px rgba(212, 175, 55, 0.1) !important;
}

.svr-h4-pf-card:hover::before {
    opacity: 1;
}

.svr-h4-pf-card i {
    color: rgba(255,255,255,0.7) !important;
    transition: color 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.svr-h4-pf-card:hover i {
    color: var(--svr-color-accent-gold) !important;
    transform: scale(1.1) rotate(5deg) !important;
}

/* ==========================================================================
   INDEX-3: PANTRY ESSENTIALS (TAILWIND-STYLE DARK CONVERSION)
   ========================================================================== */

.svr-ingredient-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    background: #111 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    padding: 24px 16px !important;
    min-width: 120px !important;
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}

.svr-ingredient-item:hover {
    border-color: var(--svr-color-accent-gold) !important;
    transform: translateY(-6px) !important;
    background: rgba(212, 175, 55, 0.05) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4) !important;
}

.svr-ingredient-item__icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255,255,255,0.8) !important;
    font-size: 1.25rem !important;
    transition: all 0.4s ease !important;
    margin-bottom: 0 !important; /* Reset original margin */
}

.svr-ingredient-item:hover .svr-ingredient-item__icon {
    background: rgba(212, 175, 55, 0.15) !important;
    color: var(--svr-color-accent-gold) !important;
}

.svr-ingredient-item span {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.9) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: color 0.4s ease !important;
    margin-top: 0 !important;
}

.svr-ingredient-item:hover span {
    color: var(--svr-color-accent-gold) !important;
}

/* ==========================================================================
   FOOTER BOTTOM & BACK-TO-TOP PREMIUM UPGRADE
   ========================================================================== */

.svr-uf-bottom {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 30px 0 !important;
    margin-top: 50px !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
}

.svr-uf-totop {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--svr-color-text-light) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    cursor: pointer !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

.svr-uf-totop::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--svr-color-accent-gold) !important;
    border-radius: 50% !important;
    transform: scale(0);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 0;
}

.svr-uf-totop i {
    position: relative;
    z-index: 1;
    transition: transform 0.4s ease, color 0.4s ease !important;
}

.svr-uf-totop:hover {
    border-color: var(--svr-color-accent-gold) !important;
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 30px rgba(212, 175, 55, 0.2) !important;
}

.svr-uf-totop:hover::before {
    transform: scale(1) !important;
}

.svr-uf-totop:hover i {
    color: var(--svr-color-text-dark) !important;
    transform: translateY(-4px) !important;
}

/* ==========================================================================
   HERO WEBGL RESPONSIVE & PERFECT CENTERING FIX
   ========================================================================== */

.svr-hero-webgl__bg {
    overflow: hidden !important;
}

.svr-hero-webgl__bg::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to right, #050505 0%, transparent 20%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.svr-hero-webgl__circle-glow,
.svr-hero-webgl__canvas {
    top: 50% !important;
    right: 20vw !important;
    width: clamp(300px, 50vw, 650px) !important;
    height: clamp(300px, 50vw, 650px) !important;
    transform: translate(50%, -50%) !important;
}

.svr-hero-webgl__badge {
    top: 50% !important;
    right: 20vw !important;
    transform: translate(50%, -50%) rotate(5deg) !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
}

@media (max-width: 991px) {
    .svr-hero-webgl {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding-top: 120px !important;
        text-align: center !important;
    }
    
    .svr-hero-webgl__content {
        max-width: 100% !important;
        z-index: 10 !important;
    }
    
    .svr-hero-webgl__title {
        font-size: clamp(2.5rem, 8vw, 3.5rem) !important;
        margin-bottom: 2rem !important;
    }
    
    .svr-hero-btn {
        margin: 0 auto !important;
    }

    .svr-hero-webgl__circle-glow,
    .svr-hero-webgl__canvas,
    .svr-hero-webgl__badge {
        top: 70% !important;
        right: 50vw !important; 
    }
    
    .svr-hero-webgl__bg {
        width: 100% !important;
        opacity: 0.6 !important;
    }
}

/* ==========================================================================
   PANTRY ESSENTIALS BG COLOR FIX
   ========================================================================== */

.svr-ingredient-item {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================================================
   MASTERCLASS KEN BURNS EFFECT
   ========================================================================== */

@keyframes svr-kenburns {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

.svr-mc-video {
    overflow: hidden !important;
    position: relative;
    border-radius: 12px;
}

.svr-mc-video__img {
    animation: svr-kenburns 20s infinite alternate linear !important;
    transition: opacity 0.5s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   HERO STATS REDESIGN (HOME 4)
   ========================================================================== */

/* Hide previous linear gradient from pseudo element */
.svr-h4-hero-stats.svr-premium-stats::before {
    display: none !important;
}

.svr-h4-hero-stats.svr-premium-stats {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    background: rgba(10, 10, 10, 0.4) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 100px !important;
    padding: 8px 25px 8px 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    width: fit-content !important;
    margin-top: 15px !important;
}

.svr-h4-hero-stats.svr-premium-stats:hover {
    border-color: rgba(212, 175, 55, 0.3) !important;
    background: rgba(20, 20, 20, 0.8) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(212, 175, 55, 0.1) !important;
}

.svr-stat-block {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.svr-stat-icon-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(212, 175, 55, 0.05) !important;
    border: 1px solid rgba(212, 175, 55, 0.1) !important;
    transition: all 0.4s ease !important;
}

.svr-h4-hero-stats.svr-premium-stats:hover .svr-stat-icon-box {
    background: rgba(212, 175, 55, 0.15) !important;
    transform: scale(1.05) !important;
}

.svr-stat-data {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

.svr-stat-val {
    font-family: var(--svr-font-heading) !important;
    font-size: 1.4rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: var(--svr-color-text-light) !important;
    margin-bottom: 2px !important;
}

.svr-stat-lbl {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-transform: uppercase !important;
}

.svr-stat-sep {
    width: 1px !important;
    height: 30px !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   MASTERCLASS LIST INTERACTIVITY (INDEX 3)
   ========================================================================== */

.svr-mc-chapter {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-bottom: 4px !important;
}

.svr-mc-chapter::before {
    content: '' !important;
    position: absolute !important;
    left: -100% !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.05), transparent) !important;
    transition: left 0.6s ease !important;
}

.svr-mc-chapter:hover {
    padding-left: 15px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(212, 175, 55, 0.2) !important;
}

.svr-mc-chapter:hover::before {
    left: 100% !important;
}

.svr-mc-chapter.is-active {
    padding-left: 15px !important;
    background: rgba(212, 175, 55, 0.08) !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* ==========================================================================
   BENTO GRID INTERACTIVITY (INDEX 2)
   ========================================================================== */

.svr-h2-hero-text, 
.svr-h2-hero-img, 
.svr-h2-pantry {
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    cursor: pointer !important;
}

.svr-h2-hero-text:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
}

.svr-h2-pantry:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25) !important;
}

.svr-h2-hero-img {
    overflow: hidden !important;
}

.svr-h2-hero-img img {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    will-change: transform;
}

.svr-h2-hero-img:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-8px) !important;
}

.svr-h2-hero-img:hover img {
    transform: scale(1.08) rotate(1.5deg) !important;
}

.svr-h2-tag {
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.svr-h2-tag:hover {
    background: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-text-light) !important;
    transform: translateY(-2px) !important;
}

/* App-like Click States */
.svr-h2-hero-text:active, 
.svr-h2-hero-img:active, 
.svr-h2-pantry:active,
.svr-mc-chapter:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* ==========================================================================
   INDEX 2: BENTO PRO UPGRADES & FIXES
   ========================================================================== */

/* FIX 1: Meal Plan Item Hover Spacing (Prevents thumbnail from hitting left edge) */
.svr-h2-mq-item:hover {
    background: rgba(0,0,0,0.02) !important;
    padding-left: 24px !important; /* Pushes inward smoothly */
}

/* FIX 2: Weekly Calendar Circle Text (Ensures 'TUE' letter is bold and visible) */
.svr-h2-cal-day--today strong {
    color: #111 !important; /* High contrast against gold */
    font-size: 1.2rem !important;
    font-family: var(--svr-font-heading) !important;
    font-weight: 700 !important;
}

/* UPGRADE 1: Pro Utility Grid Cards */
.svr-h2-utility-grid {
    gap: 30px !important;
}

.svr-h2-util-card {
    border-radius: 20px !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    background: var(--svr-color-text-light) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
    position: relative !important;
}

.svr-h2-util-card--dark {
    background: #111 !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
}

.svr-h2-util-card--green {
    background: #233a2f !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
}

.svr-h2-util-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;
}

.svr-h2-util-card__body {
    padding: 35px 30px !important;
    position: relative !important;
    z-index: 2 !important;
}

.svr-util-bg {
    font-size: 14rem !important;
    opacity: 0.03 !important;
    right: -20px !important;
    bottom: -20px !important;
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.svr-h2-util-card:hover .svr-util-bg {
    transform: scale(1.1) rotate(-10deg) !important;
    opacity: 0.06 !important;
}

/* UPGRADE 2: Pro Seasonal Banner */
.svr-h2-seasonal {
    border-radius: 24px !important;
    padding: 40px 50px !important;
    background: linear-gradient(135deg, #2c4a3b 0%, #1a2c23 100%) !important;
    box-shadow: 0 15px 35px rgba(44, 74, 59, 0.3) !important;
    border: none !important;
}

.svr-h2-seasonal__bg {
    opacity: 0.25 !important;
    mix-blend-mode: overlay !important;
}

.svr-h2-seasonal__left h3 {
    font-size: 2.8rem !important;
    margin-bottom: 15px !important;
}

.svr-h2-veg {
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.svr-h2-veg:hover {
    transform: translateY(-6px) !important;
}

.svr-h2-veg-icon {
    width: 65px !important;
    height: 65px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--svr-color-text-light) !important;
    font-size: 1.3rem !important;
    transition: all 0.4s ease !important;
}

.svr-h2-veg:hover .svr-h2-veg-icon {
    background: var(--svr-color-accent-gold) !important;
    border-color: var(--svr-color-accent-gold) !important;
    color: #111 !important;
    transform: scale(1.15) !important;
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3) !important;
}

.svr-h2-veg span {
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    transition: color 0.3s ease !important;
}

.svr-h2-veg:hover span {
    color: var(--svr-color-text-light) !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   URGENT LAYOUT & COLOR FIXES
   ========================================================================== */

/* FIX 1: Home 4 Hero Stats Pill Stacking Issue */
.svr-stat-block {
    display: flex !important;
    flex-direction: row !important; /* Force side-by-side to fix stacking */
    align-items: center !important;
    gap: 12px !important;
}
.svr-stat-data {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}
.svr-h4-hero-stats.svr-premium-stats {
    padding: 10px 25px !important;
    gap: 30px !important; /* More breathing room */
}

/* FIX 2: Index 2 Utility Cards (Clean White Theme) */
.svr-h2-util-card {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04) !important;
}
.svr-h2-util-card h4 {
    color: #111111 !important; /* Force dark text for readability */
    font-weight: 700 !important;
}
.svr-h2-util-card p {
    color: #555555 !important;
    font-weight: 500 !important;
}
.svr-h2-util-card .svr-h2-label {
    background: rgba(212, 175, 55, 0.1) !important;
    color: var(--svr-color-accent-gold) !important;
    border: none !important;
    font-weight: 700 !important;
}
.svr-h2-util-card .svr-h2-util-link {
    color: var(--svr-color-accent-gold) !important;
    font-weight: 700 !important;
}
.svr-h2-util-card--dark {
    background: #111111 !important;
}
.svr-h2-util-card--dark h4, 
.svr-h2-util-card--dark p {
    color: #fff !important;
}
.svr-h2-util-card--dark p {
    color: rgba(255, 255, 255, 0.7) !important;
}
.svr-h2-util-card--green {
    background: #233a2f !important;
}
.svr-h2-util-card--green h4, 
.svr-h2-util-card--green p {
    color: #fff !important;
}
.svr-h2-util-card--green p {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* FIX 3: Index 2 Seasonal Banner Squishing */
.svr-h2-seasonal {
    display: flex !important;
    flex-direction: row !important; /* Prevent column collapse */
    align-items: center !important;
    justify-content: space-between !important;
    padding: 60px 60px !important; /* Give it proper breathing room */
}
.svr-h2-seasonal__left h3 {
    font-size: 2.2rem !important; /* Reduce slightly to prevent clipping */
    line-height: 1.1 !important;
}
/* ==========================================================================
   URGENT: PRE-FOOTER (INDEX-4) AND SEASONAL BANNER HEIGHT FIXES
   ========================================================================== */

/* FIX 1: Restore White Background & Dark Text to Index-4 Pre-Footer Cards */
.svr-h4-pf-card {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06) !important;
    min-height: 480px !important; /* Ensure high height, nothing is cut off */
}

/* Override the dark gradient ::before if it exists */
.svr-h4-pf-card::before {
    display: none !important;
}

/* Force dark text for readability on white background */
.svr-h4-pf-card h3 {
    color: #111111 !important;
    font-weight: 700 !important;
}
.svr-h4-pf-card p {
    color: #555555 !important;
    font-weight: 500 !important;
}
.tft-pf-eyebrow {
    background: rgba(212, 175, 55, 0.1) !important;
    color: var(--svr-color-accent-gold) !important;
    font-weight: 800 !important;
}
.svr-h4-pf-meta span, 
.svr-h4-pf-meta i {
    color: #666666 !important;
}

/* Pre-footer Buttons and Inputs */
.tft-pf-dark-btn, .svr-h4-pf-btn {
    background: #111 !important;
    color: var(--svr-color-text-light) !important;
    border: none !important;
}
.tft-pf-dark-btn:hover, .svr-h4-pf-btn:hover {
    background: var(--svr-color-accent-gold) !important;
}
.svr-h4-pf-search input {
    background: #f9f9f9 !important;
    border: 1px solid #eee !important;
    color: #111 !important;
}
.svr-h4-pf-search button {
    background: #111 !important;
    color: var(--svr-color-text-light) !important;
}

/* Hover fixes for White Cards */
.svr-h4-pf-card:hover {
    border-color: var(--svr-color-accent-gold) !important;
    box-shadow: 0 25px 50px rgba(212, 175, 55, 0.15) !important;
}

/* Fix Card Icons */
.svr-h4-pf-card i {
    color: var(--svr-color-accent-gold) !important;
}

/* FIX 2: Index-2 Seasonal Banner Height */
.svr-h2-seasonal {
    padding: 100px 60px !important; /* Massive height increase */
    min-height: 380px !important; /* Prevent ANY text cutoff */
    border-radius: 24px !important;
}
.svr-h2-seasonal__left h3 {
    font-size: 2.5rem !important;
    margin-bottom: 20px !important;
}
.svr-h2-seasonal__left p {
    font-size: 1.1rem !important;
}

/* ==========================================================================
   URGENT: FINAL UI POLISH (STATS, BACK-TO-TOP, SEARCH BAR, CHAPTER)
   ========================================================================== */

/* FIX 1: Prevent "45 MINS" from clipping in Hero Stats */
.svr-h4-hero-stats {
    overflow: visible !important; /* Fixes text disappearing if it wraps slightly */
}
.svr-stat-data {
    overflow: visible !important;
}

/* FIX 2: Redesign Back to Top Button */
.svr-uf-totop {
    width: 50px !important;
    height: 50px !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--svr-color-text-light) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.4s ease !important;
    cursor: pointer !important;
    box-shadow: none !important;
}
.svr-uf-totop:hover {
    background: var(--svr-color-text-light) !important;
    color: var(--svr-color-text-dark) !important;
    border-color: var(--svr-color-text-light) !important;
    transform: translateY(-5px) !important;
}
.svr-uf-totop::before { display: none !important; }

/* FIX 3: Add Padding to Masterclass Chapter so Play Icon isn't on the edge */
.svr-mc-chapter {
    padding-right: 25px !important; /* Push icon away from the right edge */
}
.svr-mc-chapter:hover {
    padding-right: 20px !important; /* Nice little inward bounce */
}

/* FIX 4: Improve "Explore Spring Recipes" Button Rendering */
.svr-h2-btn-outline {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    color: var(--svr-color-text-light) !important;
    padding: 12px 25px !important;
    border-radius: 50px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}
.svr-h2-btn-outline:hover {
    background: var(--svr-color-text-light) !important;
    color: #111 !important;
    transform: translateY(-2px) !important;
}

/* FIX 5: Interactive Search Bar in Top Nav */
.svr-search-bar {
    display: flex !important;
    align-items: center !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 30px !important;
    padding: 8px 15px !important;
    width: 220px !important;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.svr-search-bar:focus-within {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(212, 175, 55, 0.5) !important;
    width: 280px !important; /* Expands smoothly when clicked */
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.1) !important;
}
.svr-search-bar input {
    background: transparent !important;
    border: none !important;
    color: var(--svr-color-text-light) !important;
    width: 100% !important;
    margin-left: 10px !important;
    outline: none !important;
}
.svr-search-bar input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}
.svr-search-bar i {
    color: rgba(255, 255, 255, 0.6) !important;
    transition: color 0.3s ease !important;
}
.svr-search-bar:focus-within i {
    color: var(--svr-color-accent-gold) !important;
}

/* FIX 6: Perfectly Align Hero Actions (Watch Masterclass & Stats Pill) */
.svr-h4-hero-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    margin-top: 35px !important;
    width: 100% !important;
}

.svr-h4-hero-stats.svr-premium-stats {
    margin-top: 0 !important; /* Remove the aggressive margin pushing it out of alignment */
}

/* ==========================================================================
   PREMIUM REDESIGN - PANTRY & AI, SHOP, REVIEWS
   ========================================================================== */

/* 1. Premium Smart Pantry */
.tft-pantry-hub {
    margin: 100px 0;
    font-family: var(--svr-font-body);
}

.tft-pantry-hub__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: stretch;
}

.tft-pantry-search {
    background: var(--svr-color-card-light);
    border-radius: var(--svr-radius-lg);
    padding: 50px;
    box-shadow: 0 20px 40px var(--svr-color-border-light);
    display: flex;
    flex-direction: column;
}

.tft-pantry-search__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(2rem, 3vw, 2.5rem);
    color: var(--svr-color-text-dark);
    line-height: 1.1;
    margin-bottom: 30px;
}

.tft-pantry-search__title--highlight {
    font-style: italic;
    color: var(--svr-color-accent-green);
    font-weight: 300;
}

.tft-pantry-search__input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid var(--svr-color-accent-gold);
    border-radius: var(--svr-radius-pill);
    padding: 5px 5px 5px 25px;
    margin-bottom: 30px;
    background: var(--svr-color-bg-light);
    transition: box-shadow var(--svr-transition-fast);
}

.tft-pantry-search__input-wrapper:focus-within {
    box-shadow: 0 0 0 3px var(--svr-color-border-light);
}

.tft-pantry-search__input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.95rem;
    color: var(--svr-color-text-dark);
}

.tft-pantry-search__input::placeholder {
    color: var(--svr-color-text-muted-light);
}

.tft-pantry-search__btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--svr-transition-fast);
}

.tft-pantry-search__btn:hover {
    transform: scale(1.05);
}

.tft-pantry-search__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.tft-pantry-search__subtitle {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--svr-color-text-muted-light);
    font-weight: 700;
    margin: 0;
}

.tft-pantry-search__clear {
    font-size: 0.75rem;
    color: var(--svr-color-text-muted-light);
    cursor: pointer;
    transition: color var(--svr-transition-fast);
}

.tft-pantry-search__clear:hover {
    color: var(--svr-color-accent-gold);
}

.tft-pantry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tft-tag {
    padding: 8px 15px;
    border-radius: var(--svr-radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--svr-color-bg-light);
    color: var(--svr-color-text-muted-light);
    border: 1px solid var(--svr-color-border-light);
    cursor: pointer;
    transition: all var(--svr-transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tft-tag:hover {
    background: var(--svr-color-border-light);
}

.tft-tag--active {
    background: var(--svr-color-accent-green-light);
    color: var(--svr-color-accent-green);
    border-color: var(--svr-color-accent-green);
}

.tft-tag--active:hover {
    background: var(--svr-color-accent-green);
    color: var(--svr-color-text-light);
}

/* New Feature: Flavor Grid */
.tft-flavor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.tft-flavor-card {
    position: relative;
    border-radius: var(--svr-radius-md);
    overflow: hidden;
    aspect-ratio: 16/9;
    cursor: pointer;
}

.tft-flavor-card__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--svr-transition-fast);
}

.tft-flavor-card:hover .tft-flavor-card__bg {
    transform: scale(1.05);
}

.tft-flavor-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--svr-color-sidebar), transparent);
    opacity: 0.8;
}

.tft-flavor-card__label {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: var(--svr-color-text-light);
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 2;
}

/* AI Features Premium */
.tft-ai-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tft-ai-banner {
    border-radius: var(--svr-radius-lg);
    padding: 50px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex: 1; /* Makes it take up remaining space to align with left column */
    box-shadow: 0 20px 40px var(--svr-color-border-light);
}

.tft-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: var(--svr-radius-sm);
    margin-bottom: 15px;
}

.tft-badge--green { color: var(--svr-color-accent-green); background: var(--svr-color-accent-green-light); }
.tft-badge--gold { color: var(--svr-color-text-dark); background: var(--svr-color-accent-gold); }

.tft-ai-banner__title {
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.1;
}

.tft-ai-banner__desc {
    font-size: 0.95rem;
    margin-bottom: 25px;
    line-height: 1.6;
    max-width: 90%;
}

.tft-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 25px;
    border-radius: var(--svr-radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    transition: all var(--svr-transition-fast);
}

.tft-btn--gold {
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
}

.tft-btn--gold:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

.tft-btn--dark {
    background: var(--svr-color-text-dark);
    color: var(--svr-color-text-light);
}

.tft-btn--dark:hover {
    background: var(--svr-color-sidebar);
}

.tft-btn--full {
    width: 100%;
}

/* Premium Utility Grid */
.tft-utility-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.tft-utility-card {
    background: var(--svr-color-card-light);
    border-radius: var(--svr-radius-lg);
    padding: 25px 20px;
    text-align: left;
    box-shadow: 0 10px 30px var(--svr-color-border-light);
    transition: transform var(--svr-transition-fast);
    position: relative;
    overflow: hidden;
}

.tft-utility-card:hover {
    transform: translateY(-5px);
}

.tft-utility-card--dark {
    background: var(--svr-color-bg-dark);
}

.tft-utility-card__bg-icon {
    position: absolute;
    right: -10px;
    bottom: -15px;
    font-size: 4rem;
    color: var(--svr-color-border-dark);
    opacity: 0.3;
}

.tft-utility-card__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--svr-color-text-light);
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
}

.tft-utility-card__desc {
    font-size: 0.8rem;
    color: var(--svr-color-text-muted-light);
    position: relative;
    z-index: 2;
}

/* 7. Enhancements & Fixes */

/* Improve Compact Planner Design */
.tft-compact-planner {
    background: linear-gradient(145deg, var(--svr-color-card-light) 0%, #fcfbf9 100%) !important;
    position: relative;
    border: 1px solid var(--svr-color-border-light);
}
.tft-compact-planner::before {
    content: '\f073'; /* Calendar icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 8rem;
    color: var(--svr-color-accent-gold);
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
    transform: rotate(15deg);
}
.tft-compact-planner > * {
    position: relative;
    z-index: 1;
}

/* Fix Meal Plan text wrapping & hover layout jump */
#wp-block-h1-mealplan-quick .svr-h2-mq-info p {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100%;
    display: block;
    margin-right: 0 !important;
}
#wp-block-h1-mealplan-quick .svr-h2-mq-item {
    border: 1px solid transparent !important; /* reserve space for hover border if any */
    transition: all var(--svr-transition-fast) !important;
    box-sizing: border-box !important;
}
#wp-block-h1-mealplan-quick .svr-h2-mq-item:hover {
    border-color: var(--svr-color-border-light) !important;
    transform: translateY(-2px) !important;
}

/* Fix Pantry tags layout jump on hover */
.tft-tag {
    box-sizing: border-box !important;
    border: 1px solid var(--svr-color-border-light); /* Enforce border to prevent jumping */
}
.tft-tag:hover {
    font-weight: normal !important; /* prevent bold text causing width change */
}

/* Fix 8: Planner Typography & Card Sizing */

/* Make default day circles clearly visible (Fixing white-on-white text) */
.tft-planner-day__circle {
    background: #f0f0f0 !important;
    color: #333 !important;
    width: 42px !important;
    height: 42px !important;
    font-size: 1rem !important;
}

/* Ensure 'Done' day maintains its green style */
.tft-planner-day--done .tft-planner-day__circle {
    background: rgba(46, 204, 113, 0.15) !important;
    color: #27ae60 !important;
}

/* Ensure 'Active' day maintains its gold style */
.tft-planner-day--active .tft-planner-day__circle {
    background: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-text-dark) !important;
}

.tft-planner-day__label {
    color: #666 !important;
    font-size: 0.75rem !important;
    margin-top: 4px;
}

/* Expand 'Tonight's Dinner' Card to fill gaps and fix invisible text */
.tft-tonight-card {
    flex: 1 !important; /* Forces it to stretch to the bottom */
    padding: 20px !important;
}
.tft-tonight-card__img {
    width: 90px !important;
    height: 90px !important;
}
.tft-tonight-card__title {
    font-size: 1.3rem !important;
    margin-bottom: 8px !important;
}
.tft-tonight-card__meta {
    color: #666 !important; /* Fixes invisible white text */
    font-size: 0.85rem !important;
    margin-bottom: 12px !important;
}
.tft-tonight-card__btn {
    margin-top: auto; /* Pushes the button gracefully to the bottom */
}

/* Fix 9: Prevent hover clipping on Popular Carousel */
.svr-carousel-track {
    padding-top: 15px !important;
    padding-bottom: 35px !important; /* Gives shadow room to breathe */
}

/* ==========================================================================
   RECIPE SUBMISSION FORM - INTERACTIVE GENIUS DESIGN (LIGHT)
   ========================================================================== */

/* Full Page Wrapper for Background */
.tft-submit-page-wrapper {
    position: relative;
    background: var(--svr-color-bg-light);
    flex-shrink: 0; /* Prevents flexbox from squashing this block and breaking scroll */
}

.tft-submit-page-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Make it extend down */
    object-fit: cover;
    z-index: 0;
}

.tft-submit-page-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Match image height */
    background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 60%, var(--svr-color-bg-light) 100%);
    z-index: 1;
}

/* Header - Hero Style */
.tft-page-header--hero {
    position: relative;
    padding: 100px 5% 120px; /* Reduced from 160px 180px to pull content up */
    text-align: center;
    background: transparent;
    z-index: 2; /* Sit above the wrapper background */
}

.tft-page-header__inner {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

/* Layout Architecture */
.tft-submit-section {
    padding: 0 5% 300px; /* Large bottom padding so last item can scroll into observer bounds */
    position: relative;
    z-index: 3; /* Ensure content is above background */
}

.tft-submit-layout {
    max-width: 1200px;
    margin: -80px auto 0; /* Pull up over the header */
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 50px;
    position: relative;
    z-index: 10;
}

/* Sidebar - Interactive Tracker */
.tft-submit-sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
}

.tft-progress-tracker {
    background: var(--svr-color-card-light);
    border-radius: var(--svr-radius-lg);
    padding: 40px 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
}

.tft-progress-tracker__title {
    font-family: var(--svr-font-heading);
    font-size: 1.5rem;
    color: var(--svr-color-text-dark);
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--svr-color-border-light);
}

.tft-progress-list {
    list-style: none;
    margin-bottom: 40px;
}

.tft-progress-item {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--svr-color-text-muted-light);
    margin-bottom: 25px;
    position: relative;
    transition: all var(--svr-transition-fast);
}

.tft-progress-link {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: inherit;
    transition: all var(--svr-transition-fast);
}

.tft-progress-item--active {
    color: var(--svr-color-text-dark);
    /* Removed transform: translateX(10px) to prevent breaking the vertical connecting line */
}

.tft-progress-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--svr-color-border-light);
    transition: all var(--svr-transition-fast);
    position: relative;
}

.tft-progress-item--active .tft-progress-dot {
    background: var(--svr-color-accent-gold);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2);
}

.tft-progress-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 20px;
    bottom: -20px;
    width: 2px;
    background: var(--svr-color-border-light);
}

/* AI Assist Card */
.tft-ai-assist-card {
    background: linear-gradient(145deg, var(--svr-color-text-light)9eb, var(--svr-color-text-light));
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--svr-radius-md);
    padding: 25px;
    text-align: center;
}

.tft-ai-assist-card i {
    font-size: 1.8rem;
    color: var(--svr-color-accent-gold);
    margin-bottom: 15px;
}

.tft-ai-assist-card h4 {
    font-size: 1.1rem;
    color: var(--svr-color-text-dark);
    margin-bottom: 10px;
}

.tft-ai-assist-card p {
    font-size: 0.85rem;
    color: var(--svr-color-text-muted-light);
    margin-bottom: 15px;
    line-height: 1.4;
}

.tft-btn-text {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--svr-color-accent-gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all var(--svr-transition-fast);
}

.tft-btn-text:hover {
    color: var(--svr-color-text-dark);
}

/* Main Form Area */
.tft-submit-card {
    background: var(--svr-color-card-light);
    border-radius: var(--svr-radius-xl);
    padding: 50px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.03);
    margin-bottom: 40px;
    transition: transform var(--svr-transition-fast), box-shadow var(--svr-transition-fast);
}

.tft-submit-card:hover {
    box-shadow: 0 30px 80px rgba(0,0,0,0.06);
}

.tft-submit-card__title {
    font-family: var(--svr-font-heading);
    font-size: 1.8rem;
    margin-bottom: 40px;
    color: var(--svr-color-text-dark);
}

/* Interactive Floating Label Inputs */
.tft-form-group--interactive {
    position: relative;
    margin-bottom: 35px;
}

.tft-form-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--svr-color-border-light);
    padding: 20px 0 10px;
    font-size: 1.1rem;
    color: var(--svr-color-text-dark);
    font-family: var(--svr-font-body);
    transition: all var(--svr-transition-fast);
    position: relative;
    z-index: 2;
}

textarea.tft-form-input {
    resize: vertical;
    min-height: 80px;
}

.tft-form-floating-label {
    position: absolute;
    left: 0;
    top: 20px;
    font-size: 1.1rem;
    color: var(--svr-color-text-muted-light);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 1;
}

.tft-form-focus-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--svr-color-accent-gold);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 3;
}

.tft-form-input:focus {
    outline: none;
    border-bottom-color: transparent;
}

.tft-form-input:focus ~ .tft-form-floating-label,
.tft-form-input:valid ~ .tft-form-floating-label {
    top: -5px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--svr-color-accent-gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tft-form-input:focus ~ .tft-form-focus-bg {
    width: 100%;
}

.tft-form-row {
    display: flex;
    gap: 30px;
}

/* Custom Select */
.tft-form-select {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-md);
    background: #faf9f6;
    font-size: 1rem;
    color: var(--svr-color-text-dark);
    cursor: pointer;
    transition: all var(--svr-transition-fast);
}

.tft-form-select:focus {
    outline: none;
    border-color: var(--svr-color-accent-gold);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.1);
}

/* Upload Zone */
.tft-upload-zone {
    border: 2px dashed var(--svr-color-border-light);
    border-radius: var(--svr-radius-lg);
    padding: 10px;
    background: #faf9f6;
    transition: all var(--svr-transition-fast);
}

.tft-upload-zone__inner {
    background: var(--svr-color-text-light);
    border-radius: var(--svr-radius-md);
    padding: 60px 20px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    transition: all var(--svr-transition-fast);
}

.tft-upload-zone:hover {
    border-color: var(--svr-color-accent-gold);
}

.tft-upload-zone:hover .tft-upload-zone__inner {
    transform: scale(0.98);
    background: rgba(212, 175, 55, 0.02);
}

.tft-upload-zone i {
    font-size: 3rem;
    color: var(--svr-color-text-muted-light);
    margin-bottom: 20px;
    transition: all var(--svr-transition-fast);
}

.tft-upload-zone:hover i {
    color: var(--svr-color-accent-gold);
    transform: translateY(-5px);
}

.tft-upload-zone h4 {
    font-family: var(--svr-font-heading);
    font-size: 1.4rem;
    color: var(--svr-color-text-dark);
    margin-bottom: 10px;
}

.tft-upload-zone p {
    color: var(--svr-color-text-muted-light);
    font-size: 0.9rem;
}

/* Dynamic Lists */
.tft-ingredient-row, .tft-step-row {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 15px;
    padding: 15px;
    border-radius: var(--svr-radius-md);
    background: #faf9f6;
    transition: all var(--svr-transition-fast);
}

.tft-ingredient-row:hover, .tft-step-row:hover {
    background: var(--svr-color-text-light);
    box-shadow: 0 10px 20px rgba(0,0,0,0.03);
}

.tft-step-number {
    font-family: var(--svr-font-heading);
    font-size: 2.5rem;
    color: rgba(212, 175, 55, 0.3);
    font-weight: 300;
    line-height: 1;
    align-self: flex-start;
    margin-top: 5px;
}

.tft-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--svr-color-text-light);
    color: var(--svr-color-text-muted-light);
    border: 1px solid var(--svr-color-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--svr-transition-fast);
}

.tft-icon-btn:hover {
    background: var(--svr-color-text-light)5f5;
    color: #ff4757;
    border-color: #ff4757;
    transform: rotate(90deg);
}

.tft-btn-outline-dashed {
    width: 100%;
    padding: 15px;
    background: transparent;
    border: 2px dashed var(--svr-color-border-light);
    color: var(--svr-color-text-muted-light);
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: var(--svr-radius-md);
    cursor: pointer;
    transition: all var(--svr-transition-fast);
}

.tft-btn-outline-dashed:hover {
    border-color: var(--svr-color-accent-gold);
    color: var(--svr-color-accent-gold);
    background: rgba(212, 175, 55, 0.05);
}

.tft-submit-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--svr-color-border-light);
}

.tft-terms-text {
    font-size: 0.9rem;
    color: var(--svr-color-text-muted-light);
}

.tft-btn--massive {
    padding: 20px 50px;
    font-size: 1.1rem;
    border-radius: var(--svr-radius-pill);
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-text-light);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all var(--svr-transition-fast);
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
}

.tft-btn--massive:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(212, 175, 55, 0.4);
}

/* 2. Shop Premium */
.tft-shop {
    margin: 100px 0;
}

.tft-shop__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}

.tft-shop__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(2rem, 3vw, 2.5rem);
    color: var(--svr-color-text-dark);
    line-height: 1;
    margin-top: 10px;
}

.tft-shop__link {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--svr-color-text-muted-light);
    transition: color var(--svr-transition-fast);
}

.tft-shop__link:hover {
    color: var(--svr-color-accent-gold);
}

.tft-shop__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.tft-product-card {
    background: var(--svr-color-card-light);
    border-radius: var(--svr-radius-md);
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.02);
    transition: transform var(--svr-transition-fast);
}

.tft-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.tft-product-card__media {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

.tft-product-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.tft-product-card:hover .tft-product-card__img {
    transform: scale(1.05);
}

.tft-product-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.tft-product-card:hover .tft-product-card__overlay {
    opacity: 1;
    transform: translateY(0);
}

.tft-product-card__badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: var(--svr-radius-sm);
    letter-spacing: 0.1em;
}

.tft-product-card__badge--sale {
    background: #e74c3c;
    color: var(--svr-color-text-light);
}

.tft-product-card__content {
    padding: 20px;
    background: var(--svr-color-card-light);
}

.tft-product-card__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--svr-color-text-dark);
    margin-bottom: 8px;
}

.tft-product-card__price {
    font-size: 1rem;
    font-weight: 600;
    color: var(--svr-color-accent-gold);
}

.tft-product-card__price--old {
    color: var(--svr-color-text-muted-light);
    font-size: 0.85rem;
    margin-right: 8px;
}

.tft-product-card__price--new {
    color: var(--svr-color-accent-green);
    text-decoration: none;
}

/* 3. Community Reviews Premium */
.tft-community {
    margin: 100px 0;
    padding: 60px 0;
    background: var(--svr-color-bg-light);
}

.tft-community__header {
    text-align: center;
    margin-bottom: 50px;
}

.tft-community__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(2rem, 3vw, 2.5rem);
    color: var(--svr-color-text-dark);
    margin-bottom: 15px;
}

.tft-community__subtitle {
    font-size: 1rem;
    color: var(--svr-color-text-muted-light);
    max-width: 600px;
    margin: 0 auto;
}

.tft-community__masonry {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.tft-review-card {
    background: var(--svr-color-card-light);
    border-radius: var(--svr-radius-lg);
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
}

.tft-review-card__media {
    width: 100%;
    border-radius: var(--svr-radius-md);
    margin-bottom: 20px;
    object-fit: cover;
    aspect-ratio: 1;
}

.tft-review-card__stars {
    color: var(--svr-color-accent-gold);
    font-size: 0.85rem;
    margin-bottom: 15px;
    display: flex;
    gap: 2px;
}

.tft-review-card__quote {
    font-style: italic;
    font-size: 0.95rem;
    color: var(--svr-color-text-dark);
    line-height: 1.6;
    margin-bottom: 25px;
    flex: 1;
}

.tft-review-card__author {
    display: flex;
    align-items: center;
    gap: 15px;
    border-top: 1px solid var(--svr-color-border-light);
    padding-top: 20px;
}

.tft-review-card__avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

.tft-review-card__name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--svr-color-text-dark);
    margin-bottom: 2px;
}

.tft-review-card__meta {
    font-size: 0.75rem;
    color: var(--svr-color-text-muted-light);
}

/* 4. Dietary Hub Premium */
.tft-dietary-hub {
    margin: 100px 0;
}

.tft-dietary-hub__header {
    text-align: left;
    margin-bottom: 40px;
}

.tft-dietary-hub__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(2rem, 3vw, 2.5rem);
    color: var(--svr-color-text-dark);
}

.tft-dietary-hub__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.tft-diet-card {
    position: relative;
    border-radius: var(--svr-radius-md);
    overflow: hidden;
    aspect-ratio: 1;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    box-shadow: 0 15px 30px var(--svr-color-border-light);
    transition: transform var(--svr-transition-fast), box-shadow var(--svr-transition-fast);
}

.tft-diet-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px var(--svr-color-border-dark);
}

.tft-diet-card__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    z-index: 1;
}

.tft-diet-card:hover .tft-diet-card__bg {
    transform: scale(1.08);
}

.tft-diet-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 60%);
    z-index: 2;
}

.tft-diet-card__content {
    position: relative;
    z-index: 3;
    padding: 30px;
    width: 100%;
}

.tft-diet-card__title {
    color: var(--svr-color-text-light);
    font-family: var(--svr-font-heading);
    font-size: 1.6rem;
    margin-bottom: 5px;
}

.tft-diet-card__desc {
    color: var(--svr-color-text-muted-light);
    font-size: 0.85rem;
    opacity: 0.9;
}

/* 5. Premium Dashboard 3-Column Grid */
.tft-premium-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 100px 0;
    align-items: stretch;
}

.tft-premium-col {
    display: flex;
    flex-direction: column;
}

/* Tall Card Component */
.tft-tall-card {
    background: var(--svr-color-card-light);
    border-radius: var(--svr-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 15px 35px var(--svr-color-border-light);
    position: relative;
    text-decoration: none;
    transition: transform var(--svr-transition-fast), box-shadow var(--svr-transition-fast);
}

.tft-tall-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px var(--svr-color-border-dark);
}

.tft-tall-card__img-wrap {
    height: 220px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.tft-tall-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.tft-tall-card:hover .tft-tall-card__img {
    transform: scale(1.08);
}

.tft-tall-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    z-index: 1;
}

.tft-tall-card__badge-wrap {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
}

.tft-tall-card__content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: var(--svr-color-card-light);
}

.tft-tall-card__title {
    font-family: var(--svr-font-heading);
    font-size: 1.8rem;
    color: var(--svr-color-text-dark);
    line-height: 1.1;
    margin-bottom: 15px;
}

.tft-tall-card__desc {
    font-size: 0.95rem;
    color: var(--svr-color-text-muted-light);
    line-height: 1.6;
    margin-bottom: auto;
}

.tft-tall-card__footer {
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--svr-color-border-light);
    padding-top: 20px;
}

.tft-tall-card__meta {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.8rem;
    color: var(--svr-color-text-muted-light);
    font-weight: 600;
}

.tft-tall-card__meta i {
    color: var(--svr-color-accent-gold);
}

.tft-tall-card__btn {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--svr-color-text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color var(--svr-transition-fast);
}

.tft-tall-card:hover .tft-tall-card__btn {
    color: var(--svr-color-accent-gold);
}

/* 6. Compact Planner Module */
.tft-compact-planner {
    background: var(--svr-color-card-light);
    border-radius: var(--svr-radius-lg);
    box-shadow: 0 15px 35px var(--svr-color-border-light);
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 30px;
    overflow: hidden;
}

.tft-compact-planner__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.tft-compact-planner__title {
    font-family: var(--svr-font-heading);
    font-size: 1.5rem;
    color: var(--svr-color-text-dark);
}

.tft-compact-planner__link {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--svr-color-text-muted-light);
    text-decoration: none;
    font-weight: 600;
}

.tft-compact-planner__days {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--svr-color-border-light);
}

.tft-planner-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.tft-planner-day__circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--svr-color-bg-main);
    color: var(--svr-color-text-muted-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all var(--svr-transition-fast);
}

.tft-planner-day__label {
    font-size: 0.65rem;
    color: var(--svr-color-text-muted-light);
    font-weight: 600;
}

.tft-planner-day--done .tft-planner-day__circle {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
}

.tft-planner-day--active .tft-planner-day__circle {
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3);
}

.tft-planner-day--active .tft-planner-day__label {
    color: var(--svr-color-text-dark);
}

.tft-compact-planner__tonight {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tft-compact-planner__tonight-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--svr-color-accent-gold);
    margin-bottom: 15px;
    display: block;
}

.tft-tonight-card {
    background: var(--svr-color-bg-main);
    border-radius: var(--svr-radius-md);
    padding: 15px;
    display: flex;
    gap: 15px;
    align-items: center;
    text-decoration: none;
    transition: transform var(--svr-transition-fast);
}

.tft-tonight-card:hover {
    transform: translateY(-4px);
}

.tft-tonight-card__img {
    width: 80px;
    height: 80px;
    border-radius: var(--svr-radius-sm);
    object-fit: cover;
}

.tft-tonight-card__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tft-tonight-card__title {
    color: var(--svr-color-text-dark);
    font-family: var(--svr-font-heading);
    font-size: 1.2rem;
    margin-bottom: 5px;
    line-height: 1.2;
}

.tft-tonight-card__meta {
    font-size: 0.8rem;
    color: var(--svr-color-text-muted-light);
    margin-bottom: 10px;
}

.tft-tonight-card__btn {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--svr-color-accent-green);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

@media (max-width: 992px) {
    .tft-template-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .tft-hero-stats {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   MULTI-TEMPLATE ONBOARDING EXPERIENCE
   ========================================================================== */

.tft-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero Stats */
.tft-hero-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 20px;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.tft-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tft-hero-stat strong {
    color: var(--svr-color-accent-gold);
    font-size: 1.5rem;
    font-family: var(--svr-font-heading);
}

.tft-hero-stat span {
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
}

/* Template Cards Grid */
.tft-template-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.tft-template-card {
    background: var(--svr-color-card-light);
    border-radius: var(--svr-radius-lg);
    padding: 40px 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    transition: transform var(--svr-transition-normal), box-shadow var(--svr-transition-normal);
    position: relative;
    border: 1px solid var(--svr-color-border-light);
    overflow: hidden;
}

.tft-template-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
}

.tft-template-card--popular {
    border-color: var(--svr-color-accent-gold);
    box-shadow: 0 20px 50px rgba(230, 185, 83, 0.15);
}

.tft-template-card--popular::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--svr-color-accent-gold);
}

.tft-template-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.tft-template-card__icon {
    font-size: 1.5rem;
}

.tft-template-card__title {
    font-family: var(--svr-font-heading);
    font-size: 1.8rem;
    color: var(--svr-color-text-dark);
    margin-bottom: 15px;
}

.tft-template-card__desc {
    color: var(--svr-color-text-muted-light);
    font-size: 0.95rem;
    margin-bottom: 30px;
    line-height: 1.6;
    min-height: 70px;
}

.tft-template-features {
    list-style: none;
    margin-bottom: 40px;
    flex-grow: 1;
}

.tft-template-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: var(--svr-color-text-dark);
    font-weight: 500;
}

.tft-template-features i {
    color: #4CAF50; /* Green checkmark for standard */
    font-size: 0.9rem;
}

.tft-template-card__footer {
    border-top: 1px solid var(--svr-color-border-light);
    padding-top: 25px;
}

.tft-template-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--svr-color-text-muted-light);
    font-size: 0.85rem;
    margin-bottom: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Switch Notice */
.tft-template-switch-notice {
    background: rgba(230, 185, 83, 0.1);
    border-radius: var(--svr-radius-md);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: var(--svr-color-text-dark);
    text-align: center;
    margin-bottom: 80px;
}

.tft-template-switch-notice i {
    color: var(--svr-color-accent-gold);
    font-size: 1.2rem;
}

/* Comparison Section */
.tft-comparison-section {
    background: var(--svr-color-text-light);
    border-radius: var(--svr-radius-lg);
    padding: 60px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
}

.tft-comparison-table-wrap {
    overflow-x: auto;
}

.tft-comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.tft-comparison-table th {
    font-family: var(--svr-font-heading);
    font-size: 1.2rem;
    color: var(--svr-color-text-dark);
    padding: 20px;
    text-align: center;
    border-bottom: 2px solid var(--svr-color-border-light);
}

.tft-comparison-table th:first-child {
    text-align: left;
}

.tft-comparison-table td {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid var(--svr-color-border-light);
    color: var(--svr-color-text-muted-light);
    font-weight: 500;
}

.tft-comparison-table td:first-child {
    text-align: left;
    color: var(--svr-color-text-dark);
}

.tft-col-highlight {
    background: rgba(230, 185, 83, 0.05);
}

.tft-comparison-table th.tft-col-highlight {
    border-top: 3px solid var(--svr-color-accent-gold);
    border-radius: 8px 8px 0 0;
}

.tft-icon-check {
    color: #4CAF50;
    font-size: 1.2rem;
}

.tft-icon-minus {
    color: #ccc;
    font-size: 1rem;
}

/* Active Form Card Highlight */
.tft-submit-card {
    transition: all var(--svr-transition-normal);
    border: 2px solid transparent; /* Default state */
}

.tft-submit-card--active {
    border-color: var(--svr-color-accent-gold);
    box-shadow: 0 10px 40px rgba(230, 185, 83, 0.15);
    transform: translateX(5px);
}

/* ==========================================================================
   WORKFLOW TABS
   ========================================================================== */
.tft-workflow-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    background: var(--svr-color-card-light);
    padding: 10px;
    border-radius: var(--svr-radius-md);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.tft-workflow-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    border-radius: var(--svr-radius-sm);
    font-family: var(--svr-font-body);
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555;
    transition: all var(--svr-transition-fast);
}

.tft-workflow-tab:hover {
    background: rgba(0,0,0,0.02);
    color: var(--svr-color-text-dark);
}

.tft-workflow-tab--active {
    background: var(--svr-color-bg-dark);
    color: var(--svr-color-accent-gold);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Conditional Field Display Logic based on selected workflow */

/* Quick Template hides Media, Nutrition, and Pro */
form[data-workflow="quick"] #step-media,
form[data-workflow="quick"] #step-nutrition,
form[data-workflow="quick"] #step-pro {
    display: none;
}

/* Creator Template hides Pro */
form[data-workflow="creator"] #step-pro {
    display: none;
}

/* Sidebar Sync Logic */
/* Hide the sidebar links when the blocks are hidden */
body:has(form[data-workflow="quick"]) #nav-step-media,
body:has(form[data-workflow="quick"]) #nav-step-nutrition,
body:has(form[data-workflow="quick"]) #nav-step-pro {
    display: none;
}

body:has(form[data-workflow="creator"]) #nav-step-pro {
    display: none;
}

/* Pro template feature highlights */
form[data-workflow="pro"] #step-pro {
    border-left: 3px solid var(--svr-color-accent-gold);
    background: rgba(230, 185, 83, 0.02);
}

/* ==========================================================================
   ADVANCED UX INTERACTIONS & HOVER STATES
   ========================================================================== */

/* 1. Sidebar AI Card Styling & Animation */
.tft-ai-assist-card {
    margin-top: 50px;
    padding: 30px 20px;
    background: linear-gradient(145deg, var(--svr-color-text-light)cf5 0%, var(--svr-color-text-light) 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: var(--svr-radius-md);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.tft-ai-assist-card i {
    font-size: 2.5rem;
    color: var(--svr-color-accent-gold);
    margin-bottom: 15px;
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.tft-ai-assist-card h4 {
    font-family: var(--svr-font-heading);
    font-size: 1.3rem;
    color: var(--svr-color-text-dark);
    margin-bottom: 8px;
}

.tft-ai-assist-card p {
    font-size: 0.85rem;
    color: var(--svr-color-text-muted-light);
    line-height: 1.5;
    margin-bottom: 20px;
}

.tft-ai-assist-card .tft-btn-text {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--svr-color-accent-gold);
    background: none;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.tft-ai-assist-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 30px rgba(212, 175, 55, 0.15);
    border-color: var(--svr-color-accent-gold);
}

.tft-ai-assist-card:hover i {
    transform: rotate(15deg) scale(1.2);
}

.tft-ai-assist-card:hover .tft-btn-text {
    letter-spacing: 2px;
}

/* 2. Inactive Form Cards - Cinematic Focus Spotlight */
.tft-submit-card {
    opacity: 0.4;
    filter: grayscale(80%);
    transform: scale(0.98);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.tft-submit-card:hover {
    opacity: 0.7;
    filter: grayscale(30%);
}

.tft-submit-card--active,
.tft-submit-card:focus-within {
    opacity: 1 !important;
    filter: grayscale(0%) !important;
    transform: scale(1) translateX(10px) !important;
    border-left: 4px solid var(--svr-color-accent-gold) !important;
    box-shadow: 0 20px 60px rgba(230, 185, 83, 0.15) !important;
    z-index: 10;
}

/* 3. Input Focus Glow */
.tft-form-input:focus {
    background: rgba(212, 175, 55, 0.03);
    border-radius: 4px 4px 0 0;
}

/* 4. Publish Button Epic Hover */
.tft-submit-action .tft-btn--massive {
    position: relative;
    overflow: hidden;
}

.tft-submit-action .tft-btn--massive i {
    transition: transform 0.4s ease;
}

.tft-submit-action .tft-btn--massive:hover i {
    transform: translateX(8px);
}

.tft-submit-action .tft-btn--massive::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}

.tft-submit-action .tft-btn--massive:hover::after {
    left: 150%;
}

/* Ensure the first section is always fully visible */
#step-basic.tft-submit-card {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1);
}

/* Fix for missing --svr-radius-xl variable */
.tft-submit-card {
    border-radius: 24px !important; /* Forces a nice smooth rounded corner */
}

/* ==========================================================================
   AI AUTO-FILL MODAL
   ========================================================================== */
.tft-ai-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.tft-ai-modal--active {
    opacity: 1;
    pointer-events: auto;
}

.tft-ai-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    cursor: pointer;
}

.tft-ai-modal__content {
    position: relative;
    width: 90%;
    max-width: 600px;
    z-index: 10000;
    transform: scale(0.95) translateY(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: var(--svr-color-text-light);
    padding: 40px !important;
}

.tft-ai-modal--active .tft-ai-modal__content {
    transform: scale(1) translateY(0);
}

/* Fix AI Modal Textarea UX */
#ai-raw-text {
    background: #faf9f6;
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-md);
    padding: 20px !important;
    font-size: 0.95rem;
    line-height: 1.6;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.03);
    margin-top: 15px;
}

#ai-raw-text:focus {
    background: var(--svr-color-text-light);
    border-color: var(--svr-color-accent-gold);
    box-shadow: 0 0 0 4px rgba(230, 185, 83, 0.15);
}

/* Hide the floating bottom border in the modal */
.tft-ai-modal .tft-form-focus-bg {
    display: none;
}

/* ==========================================================================
   AUTHENTICATION PAGES (LOGIN & REGISTER)
   ========================================================================== */
.tft-auth-body {
    margin: 0;
    padding: 0;
    background-color: var(--svr-color-bg-light);
    color: var(--svr-color-text-dark);
    font-family: var(--svr-font-body);
    min-height: 100vh;
    overflow-x: hidden;
}

.tft-auth-layout {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.tft-auth-layout--reverse {
    flex-direction: row-reverse;
}

/* --- Split Left: Media --- */
.tft-auth-media {
    flex: 1.2;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding-inline-start: clamp(40px, 6vw, 80px);
    padding-inline-end: clamp(40px, 6vw, 80px);
    padding-block-end: clamp(40px, 6vw, 80px);
}

.tft-auth-media__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.tft-auth-media__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--svr-color-bg-dark);
    opacity: 0.6;
    z-index: 2;
}

.tft-auth-media__content {
    position: relative;
    z-index: 3;
    color: var(--svr-color-text-light);
    max-width: 500px;
}

.tft-auth-media__badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--svr-color-accent-gold);
    margin-block-end: 20px;
    text-transform: uppercase;
}

.tft-auth-media__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(3rem, 5vw, 5rem);
    line-height: 1.1;
    margin-block-end: 20px;
    font-weight: 300;
}

.tft-auth-media__title em {
    font-style: italic;
    color: var(--svr-color-accent-gold);
}

.tft-auth-media__desc {
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    color: var(--svr-color-text-muted-light);
    line-height: 1.6;
}

/* --- Split Right: Form --- */
.tft-auth-form-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--svr-color-card-light);
    position: relative;
    z-index: 10;
}

.tft-auth-top-bar {
    position: absolute;
    inset-block-start: 40px;
    inset-inline-start: clamp(20px, 4vw, 60px);
    inset-inline-end: clamp(20px, 4vw, 60px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 20;
}

.tft-auth-logo {
    font-family: var(--svr-font-heading);
    font-size: 1.8rem;
    color: var(--svr-color-text-dark);
    text-decoration: none;
    letter-spacing: 0.15em;
    font-weight: 600;
}

.tft-auth-back {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--svr-color-text-muted-light);
    text-decoration: none;
    transition: color var(--svr-transition-fast);
    padding: 8px 16px;
    border-radius: var(--svr-radius-pill);
    background-color: transparent;
}

.tft-auth-back:hover {
    color: var(--svr-color-text-dark);
    background-color: var(--svr-color-border-light);
}

.tft-auth-container {
    margin: auto;
    width: 100%;
    max-width: 500px;
    padding-block-start: 100px;
    padding-block-end: 60px;
    padding-inline: 40px;
}

.tft-auth-header {
    margin-block-end: 40px;
}

.tft-auth-header__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(2.5rem, 3vw, 3rem);
    color: var(--svr-color-text-dark);
    margin-block-end: 10px;
    font-weight: 600;
}

.tft-auth-header__desc {
    font-size: 1rem;
    color: var(--svr-color-text-muted-light);
    line-height: 1.5;
}

.tft-auth-row {
    display: flex;
    gap: 20px;
}

.tft-auth-group {
    margin-block-end: 25px;
    width: 100%;
}

.tft-auth-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-end: 8px;
}

.tft-auth-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--svr-color-text-dark);
    margin-block-end: 8px;
}

.tft-auth-forgot {
    font-size: 0.8rem;
    color: var(--svr-color-accent-gold);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--svr-transition-fast);
}

.tft-auth-forgot:hover {
    color: var(--svr-color-text-dark);
}

.tft-auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.tft-auth-icon {
    position: absolute;
    inset-inline-start: 18px;
    color: var(--svr-color-text-muted-light);
    font-size: 1.1rem;
    transition: color var(--svr-transition-fast);
}

.tft-auth-input {
    width: 100%;
    padding-block: 16px;
    padding-inline-start: 45px;
    padding-inline-end: 16px;
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-md);
    background-color: var(--svr-color-bg-light);
    font-family: var(--svr-font-body);
    font-size: 1rem;
    color: var(--svr-color-text-dark);
    transition: all var(--svr-transition-fast);
    outline: none;
}

.tft-auth-input::placeholder {
    color: var(--svr-color-text-muted-light);
}

.tft-auth-input:focus {
    background-color: var(--svr-color-card-light);
    border-color: var(--svr-color-accent-gold);
    box-shadow: 0 0 0 4px var(--svr-color-border-light);
}

.tft-auth-input:focus ~ .tft-auth-icon,
.tft-auth-input:not(:placeholder-shown) ~ .tft-auth-icon {
    color: var(--svr-color-accent-gold);
}

.tft-auth-toggle-pwd {
    position: absolute;
    inset-inline-end: 18px;
    background: none;
    border: none;
    color: var(--svr-color-text-muted-light);
    cursor: pointer;
    font-size: 1.1rem;
    transition: color var(--svr-transition-fast);
    padding: 0;
}

.tft-auth-toggle-pwd:hover {
    color: var(--svr-color-text-dark);
}

/* --- Checkbox --- */
.tft-auth-options {
    margin-block-end: 30px;
}

.tft-auth-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    user-select: none;
}

.tft-auth-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.tft-auth-checkmark {
    width: 20px;
    height: 20px;
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-sm);
    background-color: var(--svr-color-card-light);
    margin-inline-end: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--svr-transition-fast);
}

.tft-auth-checkbox:hover input ~ .tft-auth-checkmark {
    border-color: var(--svr-color-accent-gold);
}

.tft-auth-checkbox input:checked ~ .tft-auth-checkmark {
    background-color: var(--svr-color-accent-gold);
    border-color: var(--svr-color-accent-gold);
}

.tft-auth-checkmark::after {
    content: "";
    display: none;
    width: 5px;
    height: 10px;
    border: solid var(--svr-color-bg-dark);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-block-end: 2px;
}

.tft-auth-checkbox input:checked ~ .tft-auth-checkmark::after {
    display: block;
}

.tft-auth-check-label {
    font-size: 0.9rem;
    color: var(--svr-color-text-muted-light);
}

.tft-auth-check-label a {
    color: var(--svr-color-accent-gold);
    text-decoration: none;
    font-weight: 500;
}

.tft-auth-check-label a:hover {
    text-decoration: underline;
}

/* --- Button --- */
.tft-auth-btn {
    width: 100%;
    padding-block: 18px;
    background-color: var(--svr-color-text-dark);
    color: var(--svr-color-text-light);
    border: none;
    border-radius: var(--svr-radius-md);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all var(--svr-transition-fast);
}

.tft-auth-btn:hover {
    background-color: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
    transform: translateY(-2px);
}

/* --- Dividers & Socials --- */
.tft-auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin-block: 35px;
    color: var(--svr-color-text-muted-light);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.tft-auth-divider::before,
.tft-auth-divider::after {
    content: '';
    flex: 1;
    border-block-end: 1px solid var(--svr-color-border-light);
}

.tft-auth-divider span {
    padding-inline: 15px;
}

.tft-auth-socials {
    display: flex;
    gap: 15px;
    margin-block-end: 35px;
}

.tft-auth-social-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-block: 14px;
    background-color: var(--svr-color-card-light);
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-md);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--svr-color-text-dark);
    cursor: pointer;
    transition: all var(--svr-transition-fast);
}

.tft-auth-social-btn:hover {
    background-color: var(--svr-color-bg-light);
    transform: translateY(-2px);
}

.tft-auth-social-btn i {
    font-size: 1.2rem;
}

/* --- Switch --- */
.tft-auth-switch {
    text-align: center;
    font-size: 0.95rem;
    color: var(--svr-color-text-muted-light);
}

.tft-auth-switch a {
    color: var(--svr-color-accent-gold);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--svr-transition-fast);
}

.tft-auth-switch a:hover {
    color: var(--svr-color-text-dark);
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .tft-auth-layout,
    .tft-auth-layout--reverse {
        flex-direction: column;
    }
    
    .tft-auth-media {
        min-height: 400px;
        flex: none;
        padding-block: 40px;
        padding-inline: 30px;
    }
    
    .tft-auth-logo {
        position: static;
        display: block;
        text-align: center;
        margin-block-start: 40px;
        margin-inline-start: 0;
    }
    
    .tft-auth-container {
        padding-block-start: 40px;
        padding-block-end: 60px;
        padding-inline: 20px;
    }
}

@media (max-width: 480px) {
    .tft-auth-row {
        flex-direction: column;
        gap: 0;
    }
    .tft-auth-socials {
        flex-direction: column;
    }
}

/* ==========================================================================
   WOOCOMMERCE & PAGES: SHOP, SINGLE, BLOG, POST, CONTACT, ABOUT
   ========================================================================== */

/* --- 1. SHOP HEADER --- */
.tft-shop-header {
    position: relative;
    padding: clamp(60px, 10vw, 120px) 40px;
    margin-block-end: 40px;
    border-radius: 0 0 var(--svr-radius-lg) var(--svr-radius-lg);
    overflow: hidden;
    color: var(--svr-color-text-light);
    display: flex;
    align-items: center;
}
.tft-shop-header__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.tft-shop-header__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 100%);
    z-index: 2;
}
.tft-shop-header__content {
    position: relative;
    z-index: 3;
    max-width: 600px;
}
.tft-shop-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--svr-color-accent-gold);
    margin-block-end: 20px;
    text-transform: uppercase;
}
.tft-shop-title {
    font-family: var(--svr-font-heading);
    font-size: clamp(3rem, 5vw, 5rem);
    line-height: 1.1;
    margin-block-end: 20px;
    font-weight: 300;
}
.tft-shop-title em {
    font-style: italic;
    color: var(--svr-color-accent-gold);
}
.tft-shop-desc {
    font-size: 1.1rem;
    color: var(--svr-color-text-muted-light);
}

/* --- 2. SHOP LAYOUT & SIDEBAR --- */
.tft-shop-layout {
    display: flex;
    gap: 40px;
    padding: 0 40px 80px;
}
.tft-shop-sidebar {
    width: 280px;
    flex-shrink: 0;
}
.tft-shop-filter {
    background-color: var(--svr-color-card-light);
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-md);
    padding: 30px;
    margin-block-end: 30px;
}
.tft-shop-filter__title {
    font-family: var(--svr-font-heading);
    font-size: 1.5rem;
    margin-block-end: 20px;
    color: var(--svr-color-text-dark);
}
.tft-shop-filter__list {
    list-style: none;
}
.tft-shop-filter__list li {
    margin-block-end: 15px;
}
.tft-shop-filter__list label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--svr-color-text-muted-light);
    transition: color var(--svr-transition-fast);
}
.tft-shop-filter__list label:hover {
    color: var(--svr-color-text-dark);
}
.tft-shop-filter__list input[type="checkbox"] {
    accent-color: var(--svr-color-accent-gold);
}
.tft-shop-range {
    width: 100%;
    margin-block-end: 15px;
    accent-color: var(--svr-color-accent-gold);
}
.tft-shop-price-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--svr-color-text-muted-light);
}

/* --- 3. SHOP MAIN GRID --- */
.tft-shop-main {
    flex: 1;
}
.tft-shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-end: 30px;
    padding-block-end: 20px;
    border-block-end: 1px solid var(--svr-color-border-light);
}
.tft-shop-result-count {
    color: var(--svr-color-text-muted-light);
    font-size: 0.95rem;
}
.tft-shop-sort {
    padding: 10px 15px;
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-sm);
    background-color: var(--svr-color-bg-light);
    font-family: var(--svr-font-body);
    font-size: 0.95rem;
    outline: none;
}
.tft-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-block-end: 50px;
}
.tft-product-card {
    background-color: var(--svr-color-card-light);
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-lg);
    overflow: hidden;
    transition: transform var(--svr-transition-fast), box-shadow var(--svr-transition-fast);
}
.tft-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}
.tft-product-card__media {
    position: relative;
    height: 300px;
    background-color: var(--svr-color-bg-light);
    overflow: hidden;
}
.tft-product-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.tft-product-card:hover .tft-product-card__img {
    transform: scale(1.05);
}
.tft-product-card__badge {
    position: absolute;
    inset-block-start: 15px;
    inset-inline-start: 15px;
    padding: 5px 12px;
    border-radius: var(--svr-radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    z-index: 2;
}
.tft-product-card__badge--sale {
    background-color: #e74c3c;
    color: var(--svr-color-text-light);
}
.tft-product-card__badge--new {
    background-color: var(--svr-color-text-dark);
    color: var(--svr-color-text-light);
}
.tft-product-card__actions {
    position: absolute;
    inset-block-end: 15px;
    inset-inline-end: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transform: translateX(50px);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 2;
}
.tft-product-card:hover .tft-product-card__actions {
    transform: translateX(0);
    opacity: 1;
}
.tft-product-action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--svr-color-card-light);
    color: var(--svr-color-text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all var(--svr-transition-fast);
}
.tft-product-action-btn:hover {
    background-color: var(--svr-color-accent-gold);
    color: var(--svr-color-text-light);
}
.tft-product-card__info {
    padding: 25px;
    text-align: center;
}
.tft-product-card__cat {
    display: block;
    font-size: 0.8rem;
    color: var(--svr-color-text-muted-light);
    margin-block-end: 8px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.tft-product-card__title {
    font-family: var(--svr-font-heading);
    font-size: 1.4rem;
    margin-block-end: 10px;
}
.tft-product-card__title a {
    color: inherit;
    text-decoration: none;
}
.tft-product-card__rating {
    color: var(--svr-color-accent-gold);
    font-size: 0.85rem;
    margin-block-end: 15px;
}
.tft-product-card__rating span {
    color: var(--svr-color-text-muted-light);
    margin-inline-start: 5px;
}
.tft-product-card__price {
    font-size: 1.2rem;
    font-weight: 600;
    margin-block-end: 20px;
}
.tft-product-card__price del {
    color: var(--svr-color-text-muted-light);
    font-size: 0.9rem;
    margin-inline-end: 10px;
}
.tft-product-card__add {
    width: 100%;
    padding: 12px;
    background-color: transparent;
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-md);
    font-weight: 600;
    transition: all var(--svr-transition-fast);
}
.tft-product-card__add:hover {
    background-color: var(--svr-color-text-dark);
    color: var(--svr-color-text-light);
    border-color: var(--svr-color-text-dark);
}

.tft-shop-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.tft-shop-page {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--svr-color-border-light);
    border-radius: 8px;
    font-weight: 500;
    transition: all var(--svr-transition-fast);
    color: inherit;
    text-decoration: none;
}
.tft-shop-page:hover, .tft-shop-page--current {
    background-color: var(--svr-color-accent-gold);
    color: var(--svr-color-text-light);
    border-color: var(--svr-color-accent-gold);
}

/* --- 4. SINGLE PRODUCT PAGE --- */
.tft-back-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--svr-color-text-muted-light);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color var(--svr-transition-fast);
    text-decoration: none;
}
.tft-back-link:hover {
    color: var(--svr-color-accent-gold);
}
.tft-single-product {
    display: flex;
    gap: 60px;
    padding: 0 40px 60px;
}
.tft-sp-gallery {
    flex: 1;
}
.tft-sp-gallery__main {
    position: relative;
    border-radius: var(--svr-radius-lg);
    overflow: hidden;
    margin-block-end: 20px;
    background-color: var(--svr-color-bg-light);
}
.tft-sp-gallery__main img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.tft-sp-gallery__zoom {
    position: absolute;
    inset-block-start: 20px;
    inset-inline-end: 20px;
    width: 40px;
    height: 40px;
    background-color: var(--svr-color-card-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.tft-sp-gallery__thumbs {
    display: flex;
    gap: 15px;
}
.tft-sp-thumb {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--svr-radius-md);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--svr-transition-fast);
}
.tft-sp-thumb:hover, .tft-sp-thumb--active {
    opacity: 1;
    border: 2px solid var(--svr-color-accent-gold);
}

.tft-sp-summary {
    flex: 1;
}
.tft-sp-breadcrumbs {
    font-size: 0.85rem;
    color: var(--svr-color-text-muted-light);
    margin-block-end: 20px;
}
.tft-sp-breadcrumbs a {
    color: var(--svr-color-text-dark);
    text-decoration: none;
}
.tft-sp-title {
    font-family: var(--svr-font-heading);
    font-size: 3rem;
    line-height: 1.1;
    margin-block-end: 15px;
}
.tft-sp-meta {
    margin-block-end: 20px;
}
.tft-sp-rating {
    color: var(--svr-color-accent-gold);
    font-size: 0.9rem;
}
.tft-sp-rating a {
    color: var(--svr-color-text-muted-light);
    margin-inline-start: 10px;
    text-decoration: none;
}
.tft-sp-price {
    font-size: 2rem;
    font-weight: 600;
    margin-block-end: 30px;
}
.tft-sp-price del {
    color: var(--svr-color-text-muted-light);
    font-size: 1.2rem;
    margin-inline-end: 15px;
}
.tft-sp-excerpt {
    font-size: 1.1rem;
    color: var(--svr-color-text-muted-light);
    line-height: 1.6;
    margin-block-end: 40px;
    padding-block-end: 40px;
    border-block-end: 1px solid var(--svr-color-border-light);
}
.tft-sp-cart-form {
    display: flex;
    gap: 20px;
    margin-block-end: 40px;
}
.tft-sp-qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-md);
    overflow: hidden;
}
.tft-qty-btn {
    width: 40px;
    height: 50px;
    background-color: var(--svr-color-bg-light);
    font-size: 1.2rem;
}
.tft-qty-input {
    width: 50px;
    height: 50px;
    border: none;
    text-align: center;
    font-family: var(--svr-font-body);
    font-size: 1rem;
    -moz-appearance: textfield;
}
.tft-qty-input::-webkit-outer-spin-button, .tft-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.tft-sp-add-btn {
    flex: 1;
    background-color: var(--svr-color-text-dark);
    color: var(--svr-color-text-light);
    border-radius: var(--svr-radius-md);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background-color var(--svr-transition-fast);
}
.tft-sp-add-btn:hover {
    background-color: var(--svr-color-accent-gold);
}
.tft-sp-wishlist-btn {
    width: 50px;
    height: 50px;
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-md);
    font-size: 1.2rem;
    color: var(--svr-color-text-dark);
    transition: all var(--svr-transition-fast);
}
.tft-sp-wishlist-btn:hover {
    border-color: var(--svr-color-accent-gold);
    color: var(--svr-color-accent-gold);
}
.tft-sp-details p {
    margin-block-end: 10px;
    color: var(--svr-color-text-muted-light);
    font-size: 0.95rem;
}
.tft-sp-details strong {
    color: var(--svr-color-text-dark);
    margin-inline-end: 10px;
}
.tft-sp-details a {
    color: inherit;
    text-decoration: none;
}
.tft-sp-details a:hover {
    color: var(--svr-color-accent-gold);
}

.tft-sp-tabs {
    padding: 0 40px 80px;
}
.tft-sp-tabs__nav {
    display: flex;
    gap: 40px;
    border-block-end: 1px solid var(--svr-color-border-light);
    margin-block-end: 40px;
}
.tft-sp-tab-btn {
    padding-block-end: 15px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--svr-color-text-muted-light);
    border-block-end: 2px solid transparent;
    margin-block-end: -1px;
}
.tft-sp-tab-btn--active {
    color: var(--svr-color-text-dark);
    border-color: var(--svr-color-accent-gold);
}
.tft-sp-tab-pane {
    display: none;
    max-width: 800px;
    line-height: 1.7;
    color: var(--svr-color-text-muted-light);
}
.tft-sp-tab-pane h3 {
    color: var(--svr-color-text-dark);
    font-family: var(--svr-font-heading);
    font-size: 2rem;
    margin-block-end: 20px;
}
.tft-sp-tab-pane p {
    margin-block-end: 20px;
}
.tft-sp-tab-pane--active {
    display: block;
}

/* --- 5. BLOG ARCHIVE --- */
.tft-blog-hero {
    padding: clamp(60px, 8vw, 100px) 40px;
    text-align: center;
}
.tft-blog-hero__badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--svr-color-accent-gold);
    margin-block-end: 20px;
}
.tft-blog-hero__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(3.5rem, 6vw, 6rem);
    line-height: 1.1;
    margin-block-end: 20px;
}
.tft-blog-hero__title em {
    color: var(--svr-color-accent-gold);
    font-style: italic;
}
.tft-blog-hero__desc {
    font-size: 1.2rem;
    color: var(--svr-color-text-muted-light);
    max-width: 600px;
    margin: 0 auto;
}

.tft-blog-layout {
    padding: 0 40px 80px;
}
.tft-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 40px;
    margin-block-end: 60px;
}
.tft-post-card {
    display: flex;
    flex-direction: column;
}
.tft-post-card__media {
    position: relative;
    border-radius: var(--svr-radius-lg);
    overflow: hidden;
    height: 250px;
    margin-block-end: 25px;
    display: block;
}
.tft-post-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.tft-post-card:hover .tft-post-card__media img {
    transform: scale(1.05);
}
.tft-post-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}
.tft-post-card__cat {
    position: absolute;
    inset-block-end: 20px;
    inset-inline-start: 20px;
    background-color: var(--svr-color-accent-gold);
    color: var(--svr-color-text-light);
    padding: 5px 15px;
    border-radius: var(--svr-radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    z-index: 2;
}
.tft-post-card__meta {
    font-size: 0.85rem;
    color: var(--svr-color-text-muted-light);
    margin-block-end: 15px;
    display: flex;
    gap: 20px;
}
.tft-post-card__meta i {
    color: var(--svr-color-accent-gold);
    margin-inline-end: 5px;
}
.tft-post-card__title {
    font-family: var(--svr-font-heading);
    font-size: 1.8rem;
    line-height: 1.3;
    margin-block-end: 15px;
}
.tft-post-card__title a {
    color: inherit;
    text-decoration: none;
}
.tft-post-card__excerpt {
    color: var(--svr-color-text-muted-light);
    line-height: 1.6;
    margin-block-end: 20px;
}
.tft-post-card__readmore {
    font-weight: 600;
    color: var(--svr-color-text-dark);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    transition: color var(--svr-transition-fast);
    text-decoration: none;
}
.tft-post-card__readmore:hover {
    color: var(--svr-color-accent-gold);
}
.tft-blog-pagination {
    text-align: center;
}
.tft-btn-loadmore {
    padding: 15px 40px;
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-pill);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all var(--svr-transition-fast);
}
.tft-btn-loadmore:hover {
    background-color: var(--svr-color-text-dark);
    color: var(--svr-color-text-light);
    border-color: var(--svr-color-text-dark);
}

/* --- 6. SINGLE POST --- */
.tft-single-post {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 40px 100px;
}
.tft-post-header {
    text-align: center;
    margin-block-end: 50px;
}
.tft-post-header__meta {
    margin-block-end: 20px;
    font-size: 0.9rem;
    color: var(--svr-color-text-muted-light);
}
.tft-post-cat {
    color: var(--svr-color-accent-gold);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-inline-end: 15px;
    text-decoration: none;
}
.tft-post-title {
    font-family: var(--svr-font-heading);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.2;
    margin-block-end: 30px;
}
.tft-post-author-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.tft-pam-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
.tft-pam-info {
    text-align: left;
}
.tft-pam-info span {
    display: block;
    font-size: 0.8rem;
    color: var(--svr-color-text-muted-light);
}
.tft-pam-share {
    margin-inline-start: 40px;
    display: flex;
    gap: 15px;
}
.tft-pam-share a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--svr-color-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--svr-transition-fast);
    text-decoration: none;
}
.tft-pam-share a:hover {
    color: var(--svr-color-accent-gold);
    border-color: var(--svr-color-accent-gold);
}
.tft-post-featured-media {
    margin-block-end: 60px;
    border-radius: var(--svr-radius-lg);
    overflow: hidden;
}
.tft-post-featured-media img {
    width: 100%;
    height: auto;
}
.tft-post-featured-media figcaption {
    padding: 15px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--svr-color-text-muted-light);
    font-style: italic;
}
.tft-post-content {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--svr-color-text-muted-light);
}
.tft-dropcap {
    float: left;
    font-family: var(--svr-font-heading);
    font-size: 5rem;
    line-height: 0.8;
    margin-inline-end: 15px;
    margin-block-start: 10px;
    color: var(--svr-color-accent-gold);
}
.tft-post-content h2, .tft-post-content h3 {
    font-family: var(--svr-font-heading);
    color: var(--svr-color-text-dark);
    margin-block-start: 50px;
    margin-block-end: 20px;
}
.tft-post-content h2 { font-size: 2.5rem; }
.tft-post-content h3 { font-size: 2rem; }
.tft-post-content p { margin-block-end: 25px; }
.tft-post-content blockquote {
    font-family: var(--svr-font-heading);
    font-size: 2rem;
    font-style: italic;
    color: var(--svr-color-text-dark);
    border-inline-start: 4px solid var(--svr-color-accent-gold);
    padding-inline-start: 30px;
    margin: 40px 0;
    line-height: 1.4;
}
.tft-post-content blockquote cite {
    display: block;
    font-size: 1.1rem;
    font-family: var(--svr-font-body);
    font-style: normal;
    color: var(--svr-color-text-muted-light);
    margin-block-start: 15px;
}
.tft-post-list {
    margin-block-end: 30px;
    padding-inline-start: 20px;
}
.tft-post-list li {
    margin-block-end: 15px;
}
.tft-post-footer {
    margin-block-start: 60px;
    padding-block-start: 30px;
    border-block-start: 1px solid var(--svr-color-border-light);
}
.tft-post-tags a {
    display: inline-block;
    background-color: var(--svr-color-bg-light);
    padding: 8px 15px;
    border-radius: var(--svr-radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    margin-inline-end: 10px;
    margin-block-end: 10px;
    transition: background-color var(--svr-transition-fast);
    text-decoration: none;
    color: inherit;
}
.tft-post-tags a:hover {
    background-color: var(--svr-color-accent-gold);
    color: var(--svr-color-text-light);
}

/* Author Box */
.tft-author-box {
    display: flex;
    gap: 30px;
    background-color: var(--svr-color-card-light);
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-lg);
    padding: 40px;
    margin: 60px 0;
    align-items: flex-start;
}
.tft-ab-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}
.tft-ab-name {
    font-family: var(--svr-font-heading);
    font-size: 1.8rem;
    margin-block-end: 10px;
}
.tft-ab-bio {
    color: var(--svr-color-text-muted-light);
    line-height: 1.6;
    margin-block-end: 20px;
}
.tft-ab-link {
    font-weight: 600;
    color: var(--svr-color-accent-gold);
    text-decoration: none;
}

/* Comments */
.tft-comments-area {
    margin-block-start: 80px;
}
.tft-comments-title {
    font-family: var(--svr-font-heading);
    font-size: 2.2rem;
    margin-block-end: 40px;
}
.tft-comment-list, .tft-children {
    list-style: none;
}
.tft-children {
    padding-inline-start: 60px;
    margin-block-start: 30px;
}
.tft-comment-body {
    display: flex;
    gap: 25px;
    margin-block-end: 30px;
}
.tft-comment-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.tft-comment-content-wrap {
    flex: 1;
    background-color: var(--svr-color-bg-light);
    padding: 25px;
    border-radius: var(--svr-radius-md);
}
.tft-comment-meta {
    margin-block-end: 15px;
}
.tft-comment-author {
    font-size: 1.1rem;
    margin-inline-end: 10px;
}
.tft-comment-badge {
    background-color: var(--svr-color-accent-gold);
    color: var(--svr-color-text-light);
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: var(--svr-radius-pill);
    text-transform: uppercase;
    margin-inline-end: 10px;
}
.tft-comment-date {
    font-size: 0.85rem;
    color: var(--svr-color-text-muted-light);
}
.tft-comment-text {
    line-height: 1.6;
    color: var(--svr-color-text-muted-light);
    margin-block-end: 15px;
}
.tft-comment-reply {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--svr-color-text-dark);
    text-decoration: none;
}
.tft-comment-reply:hover {
    color: var(--svr-color-accent-gold);
}

.tft-comment-respond {
    margin-block-start: 60px;
    background-color: var(--svr-color-card-light);
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-lg);
    padding: 40px;
}
.tft-comment-reply-title {
    font-family: var(--svr-font-heading);
    font-size: 2rem;
    margin-block-end: 10px;
}
.tft-comment-notes {
    color: var(--svr-color-text-muted-light);
    margin-block-end: 30px;
}
.tft-comment-form textarea, .tft-comment-form input {
    width: 100%;
    padding: 15px;
    background-color: var(--svr-color-bg-light);
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-sm);
    font-family: var(--svr-font-body);
    outline: none;
}
.tft-comment-form textarea:focus, .tft-comment-form input:focus {
    border-color: var(--svr-color-accent-gold);
}
.tft-form-row {
    display: flex;
    gap: 20px;
    margin-block-end: 20px;
}
.tft-form-group {
    flex: 1;
}
.tft-form-group--full {
    margin-block-end: 20px;
}
.tft-form-group label {
    display: block;
    margin-block-end: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}
.tft-btn-primary {
    background-color: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
    padding: 15px 30px;
    border-radius: var(--svr-radius-md);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* --- 7. CONTACT & ABOUT PAGES --- */
.tft-contact-wrap {
    display: flex;
    gap: 60px;
    padding: clamp(60px, 8vw, 100px) 40px;
    max-width: 1200px;
    margin: 0 auto;
}
.tft-contact-info {
    flex: 1;
}
.tft-contact-badge {
    color: var(--svr-color-accent-gold);
    font-weight: 700;
    letter-spacing: 0.2em;
    font-size: 0.8rem;
    display: block;
    margin-block-end: 20px;
}
.tft-contact-title {
    font-family: var(--svr-font-heading);
    font-size: clamp(3rem, 5vw, 5rem);
    line-height: 1.1;
    margin-block-end: 20px;
}
.tft-contact-title em {
    color: var(--svr-color-accent-gold);
    font-style: italic;
}
.tft-contact-desc {
    font-size: 1.1rem;
    color: var(--svr-color-text-muted-light);
    line-height: 1.6;
    margin-block-end: 50px;
}
.tft-cd-item {
    display: flex;
    gap: 20px;
    margin-block-end: 30px;
}
.tft-cd-item i {
    width: 50px;
    height: 50px;
    background-color: var(--svr-color-bg-light);
    color: var(--svr-color-accent-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.tft-cd-item h4 {
    font-size: 1.1rem;
    margin-block-end: 5px;
}
.tft-cd-item p {
    color: var(--svr-color-text-muted-light);
}

.tft-contact-form-side {
    flex: 1.2;
    background-color: var(--svr-color-card-light);
    padding: 50px;
    border-radius: var(--svr-radius-lg);
    border: 1px solid var(--svr-color-border-light);
}

.tft-about-hero {
    display: flex;
    align-items: center;
    gap: 60px;
    padding: clamp(60px, 8vw, 100px) 40px;
}
.tft-about-hero__content {
    flex: 1;
}
.tft-about-hero__media {
    flex: 1;
    border-radius: var(--svr-radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}
.tft-about-badge {
    color: var(--svr-color-accent-gold);
    font-weight: 700;
    letter-spacing: 0.2em;
    font-size: 0.8rem;
    display: block;
    margin-block-end: 20px;
}
.tft-about-title {
    font-family: var(--svr-font-heading);
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    line-height: 1.1;
    margin-block-end: 30px;
}
.tft-about-title em {
    color: var(--svr-color-accent-gold);
    font-style: italic;
}
.tft-about-desc {
    font-size: 1.2rem;
    color: var(--svr-color-text-muted-light);
    line-height: 1.7;
}

.tft-about-stats {
    display: flex;
    justify-content: space-around;
    padding: 60px 40px;
    background-color: var(--svr-color-bg-light);
    border-block: 1px solid var(--svr-color-border-light);
}
.tft-stat {
    text-align: center;
}
.tft-stat-num {
    display: block;
    font-family: var(--svr-font-heading);
    font-size: 4rem;
    color: var(--svr-color-accent-gold);
    line-height: 1;
    margin-block-end: 10px;
}
.tft-stat-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--svr-color-text-muted-light);
}

.tft-about-team {
    padding: 100px 40px;
    text-align: center;
}
.tft-team-header h2 {
    font-family: var(--svr-font-heading);
    font-size: 3.5rem;
    margin-block-end: 15px;
}
.tft-team-header h2 em {
    color: var(--svr-color-accent-gold);
    font-style: italic;
}
.tft-team-header p {
    color: var(--svr-color-text-muted-light);
    font-size: 1.1rem;
    margin-block-end: 60px;
}
.tft-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}
.tft-team-member img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    margin-block-end: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.tft-team-member h4 {
    font-size: 1.5rem;
    font-family: var(--svr-font-heading);
    margin-block-end: 5px;
}
.tft-team-member span {
    color: var(--svr-color-accent-gold);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

@media (max-width: 992px) {
    .tft-shop-layout, .tft-single-product, .tft-contact-wrap, .tft-about-hero {
        flex-direction: column;
    }
    .tft-shop-sidebar {
        width: 100%;
    }
}

/* --- 8. ABOUT ME (PERSONAL) & SERVICES --- */

/* About Me */
.tft-about-me-hero {
    padding: clamp(60px, 8vw, 100px) 40px;
    max-width: 1200px;
    margin: 0 auto;
}
.tft-am-layout {
    display: flex;
    align-items: center;
    gap: 80px;
}
.tft-am-image {
    flex: 1;
    position: relative;
}
.tft-am-image img {
    width: 100%;
    border-radius: var(--svr-radius-lg);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.tft-am-badge-float {
    position: absolute;
    inset-block-end: -20px;
    inset-inline-end: -20px;
    background-color: var(--svr-color-accent-gold);
    color: var(--svr-color-text-light);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
}
.tft-am-content {
    flex: 1.2;
}
.tft-am-subtitle {
    color: var(--svr-color-accent-gold);
    font-weight: 700;
    letter-spacing: 0.2em;
    font-size: 0.85rem;
    display: block;
    margin-block-end: 15px;
}
.tft-am-title {
    font-family: var(--svr-font-heading);
    font-size: clamp(3rem, 5vw, 4.5rem);
    line-height: 1.1;
    margin-block-end: 25px;
}
.tft-am-title em {
    font-style: italic;
    color: var(--svr-color-accent-gold);
}
.tft-am-bio {
    font-size: 1.15rem;
    color: var(--svr-color-text-muted-light);
    line-height: 1.7;
    margin-block-end: 40px;
}
.tft-am-signatures {
    display: flex;
    gap: 40px;
    margin-block-end: 40px;
    padding-block: 30px;
    border-block: 1px solid var(--svr-color-border-light);
}
.tft-am-sig-item h3 {
    font-family: var(--svr-font-heading);
    font-size: 2.5rem;
    color: var(--svr-color-text-dark);
    margin-block-end: 5px;
}
.tft-am-sig-item span {
    font-size: 0.85rem;
    color: var(--svr-color-text-muted-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.tft-am-actions {
    display: flex;
    gap: 20px;
}
.tft-btn-secondary {
    padding: 15px 30px;
    border: 1px solid var(--svr-color-text-dark);
    color: var(--svr-color-text-dark);
    border-radius: var(--svr-radius-md);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all var(--svr-transition-fast);
    text-decoration: none;
}
.tft-btn-secondary:hover {
    background-color: var(--svr-color-text-dark);
    color: var(--svr-color-text-light);
}

.tft-am-philosophy {
    background-color: var(--svr-color-card-light);
    padding: 100px 40px;
    text-align: center;
}
.tft-am-phil-content {
    max-width: 800px;
    margin: 0 auto;
}
.tft-am-phil-content h2 {
    font-family: var(--svr-font-heading);
    font-size: 3.5rem;
    margin-block-end: 30px;
}
.tft-am-phil-content h2 em {
    color: var(--svr-color-accent-gold);
    font-style: italic;
}
.tft-am-phil-content p {
    font-size: 1.25rem;
    color: var(--svr-color-text-muted-light);
    line-height: 1.8;
    margin-block-end: 50px;
}
.tft-am-phil-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: var(--svr-radius-lg);
}

/* Services */
.tft-services-header {
    text-align: center;
    padding: clamp(80px, 10vw, 120px) 40px;
}
.tft-sh-badge {
    color: var(--svr-color-accent-gold);
    font-weight: 700;
    letter-spacing: 0.2em;
    font-size: 0.85rem;
    display: block;
    margin-block-end: 15px;
}
.tft-sh-title {
    font-family: var(--svr-font-heading);
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    margin-block-end: 20px;
}
.tft-sh-title em {
    font-style: italic;
    color: var(--svr-color-accent-gold);
}
.tft-sh-desc {
    font-size: 1.2rem;
    color: var(--svr-color-text-muted-light);
    max-width: 600px;
    margin: 0 auto;
}

.tft-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    padding: 0 40px 100px;
    max-width: 1400px;
    margin: 0 auto;
}
.tft-service-card {
    background-color: var(--svr-color-card-light);
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-lg);
    padding: 50px 40px;
    text-align: center;
    transition: transform var(--svr-transition-fast), box-shadow var(--svr-transition-fast);
}
.tft-service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    border-color: var(--svr-color-accent-gold);
}
.tft-sc-icon {
    width: 80px;
    height: 80px;
    background-color: var(--svr-color-bg-light);
    color: var(--svr-color-accent-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 30px;
    transition: all var(--svr-transition-fast);
}
.tft-service-card:hover .tft-sc-icon {
    background-color: var(--svr-color-accent-gold);
    color: var(--svr-color-text-light);
}
.tft-sc-title {
    font-family: var(--svr-font-heading);
    font-size: 1.8rem;
    margin-block-end: 15px;
}
.tft-sc-desc {
    color: var(--svr-color-text-muted-light);
    line-height: 1.6;
    margin-block-end: 30px;
}
.tft-sc-link {
    font-weight: 700;
    color: var(--svr-color-text-dark);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: color var(--svr-transition-fast);
}
.tft-sc-link:hover {
    color: var(--svr-color-accent-gold);
}

@media (max-width: 992px) {
    .tft-am-layout {
        flex-direction: column;
    }
}

/* --- 9. WOOCOMMERCE: CART & CHECKOUT --- */

/* Page Header General */
.tft-page-header {
    text-align: center;
    padding: clamp(60px, 8vw, 100px) 40px;
}
.tft-ph-badge {
    color: var(--svr-color-accent-gold);
    font-weight: 700;
    letter-spacing: 0.2em;
    font-size: 0.85rem;
    display: block;
    margin-block-end: 15px;
}
.tft-page-title {
    font-family: var(--svr-font-heading);
    font-size: clamp(3rem, 5vw, 4.5rem);
    margin-block-end: 20px;
}
.tft-page-title em {
    font-style: italic;
    color: var(--svr-color-accent-gold);
}
.tft-ph-desc {
    font-size: 1.1rem;
    color: var(--svr-color-text-muted-light);
}

/* Cart Layout */
.tft-cart-layout {
    display: flex;
    gap: 60px;
    padding: 0 40px 100px;
    align-items: flex-start;
}
.tft-cart-table-wrap {
    flex: 1.5;
}
.tft-cart-table {
    width: 100%;
    border-collapse: collapse;
    margin-block-end: 40px;
}
.tft-cart-table th {
    text-align: left;
    padding: 20px 15px;
    border-block-end: 1px solid var(--svr-color-border-light);
    color: var(--svr-color-text-muted-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
}
.tft-cart-table td {
    padding: 30px 15px;
    border-block-end: 1px solid var(--svr-color-border-light);
    vertical-align: middle;
}
.tft-ct-remove { width: 50px; }
.tft-remove-btn {
    background: none;
    border: none;
    color: var(--svr-color-text-muted-light);
    font-size: 1.2rem;
    cursor: pointer;
    transition: color var(--svr-transition-fast);
}
.tft-remove-btn:hover { color: #e74c3c; }
.tft-ct-thumbnail { width: 100px; }
.tft-ct-thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--svr-radius-md);
}
.tft-ct-name a {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--svr-color-text-dark);
    text-decoration: none;
    transition: color var(--svr-transition-fast);
}
.tft-ct-name a:hover { color: var(--svr-color-accent-gold); }
.tft-ct-price, .tft-ct-subtotal {
    font-weight: 600;
}
.tft-cart-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tft-coupon-wrap {
    display: flex;
    gap: 15px;
}
.tft-coupon-input {
    padding: 12px 20px;
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-md);
    background-color: var(--svr-color-bg-light);
    font-family: var(--svr-font-body);
    outline: none;
}
.tft-coupon-input:focus { border-color: var(--svr-color-accent-gold); }

.tft-cart-totals {
    flex: 1;
    background-color: var(--svr-color-card-light);
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-lg);
    padding: 40px;
}
.tft-cart-totals h2 {
    font-family: var(--svr-font-heading);
    font-size: 1.8rem;
    margin-block-end: 30px;
}
.tft-totals-table {
    width: 100%;
    border-collapse: collapse;
    margin-block-end: 30px;
}
.tft-totals-table th {
    text-align: left;
    padding: 20px 0;
    border-block-end: 1px solid var(--svr-color-border-light);
    color: var(--svr-color-text-muted-light);
    font-weight: 600;
}
.tft-totals-table td {
    text-align: right;
    padding: 20px 0;
    border-block-end: 1px solid var(--svr-color-border-light);
}
.tft-shipping-methods {
    list-style: none;
    text-align: right;
    margin-block-end: 15px;
}
.tft-shipping-methods li { margin-block-end: 10px; }
.tft-shipping-methods label {
    cursor: pointer;
    font-size: 0.95rem;
}
.tft-shipping-calc {
    font-size: 0.85rem;
    color: var(--svr-color-text-muted-light);
    margin-block-end: 10px;
}
.tft-shipping-change {
    font-size: 0.85rem;
    color: var(--svr-color-accent-gold);
    text-decoration: underline;
}
.tft-tt-total th { font-size: 1.2rem; border: none; }
.tft-tt-total td { font-size: 1.5rem; border: none; color: var(--svr-color-text-dark); }
.tft-checkout-action a {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Checkout */
.tft-checkout-wrap {
    padding: 0 40px 100px;
    margin: 0 auto;
}
.tft-checkout-notice {
    background-color: var(--svr-color-card-light);
    border-inline-start: 4px solid var(--svr-color-accent-gold);
    padding: 20px;
    border-radius: var(--svr-radius-md);
    margin-block-end: 40px;
    color: var(--svr-color-text-muted-light);
}
.tft-checkout-notice i { color: var(--svr-color-accent-gold); margin-inline-end: 10px; }
.tft-checkout-notice a { color: var(--svr-color-text-dark); font-weight: 600; }
.tft-checkout-form {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}
.tft-checkout-billing {
    flex: 1.5;
}
.tft-checkout-billing h3 {
    font-family: var(--svr-font-heading);
    font-size: 1.8rem;
    margin-block-end: 30px;
    padding-block-end: 15px;
    border-block-end: 1px solid var(--svr-color-border-light);
}
.tft-checkout-billing select {
    width: 100%;
    padding: 15px;
    background-color: var(--svr-color-bg-light);
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-sm);
    font-family: var(--svr-font-body);
    outline: none;
    appearance: none;
}
.tft-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
}
.tft-checkbox-label input { accent-color: var(--svr-color-accent-gold); }

.tft-checkout-order {
    flex: 1;
}
.tft-order-review {
    background-color: var(--svr-color-card-light);
    border: 2px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-lg);
    padding: 40px;
}
.tft-order-review h3 {
    font-family: var(--svr-font-heading);
    font-size: 1.5rem;
    margin-block-end: 20px;
}
.tft-checkout-table {
    width: 100%;
    border-collapse: collapse;
    margin-block-end: 30px;
}
.tft-checkout-table th, .tft-checkout-table td {
    padding: 15px 0;
    border-block-end: 1px solid var(--svr-color-border-light);
}
.tft-checkout-table th { text-align: left; color: var(--svr-color-text-muted-light); }
.tft-checkout-table td:last-child, .tft-checkout-table th:last-child { text-align: right; }
.tft-order-total th, .tft-order-total td { font-size: 1.2rem; border: none; }
.tft-order-total td { color: var(--svr-color-text-dark); }

.tft-payment-methods {
    margin-block-end: 30px;
}
.tft-payment-option { margin-block-end: 15px; }
.tft-payment-option label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    cursor: pointer;
}
.tft-cards-img { height: 24px; margin-inline-start: auto; }
.tft-payment-option i { color: #003087; font-size: 1.5rem; margin-inline-start: auto; }
.tft-payment-box {
    background-color: var(--svr-color-bg-light);
    padding: 20px;
    border-radius: var(--svr-radius-sm);
    margin-block-start: 15px;
    font-size: 0.9rem;
    color: var(--svr-color-text-muted-light);
}
.tft-terms-privacy {
    font-size: 0.85rem;
    color: var(--svr-color-text-muted-light);
    margin-block-end: 30px;
    line-height: 1.5;
}
.tft-terms-privacy a { color: var(--svr-color-text-dark); text-decoration: underline; }
.tft-place-order { width: 100%; padding: 20px; font-size: 1.1rem; }

/* --- 10. MY ACCOUNT --- */
.tft-account-wrap {
    display: flex;
    gap: 60px;
    padding: 0 40px 100px;
    max-width: 1200px;
    margin: 0 auto;
}
.tft-account-nav {
    width: 250px;
    flex-shrink: 0;
}
.tft-account-nav ul { list-style: none; }
.tft-account-nav li { margin-block-end: 10px; }
.tft-acc-link {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background-color: var(--svr-color-card-light);
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-md);
    color: var(--svr-color-text-muted-light);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--svr-transition-fast);
}
.tft-acc-link i { color: var(--svr-color-text-muted-light); transition: color var(--svr-transition-fast); }
.tft-acc-link:hover, .tft-acc-link--active {
    background-color: var(--svr-color-text-dark);
    color: var(--svr-color-text-light);
    border-color: var(--svr-color-text-dark);
}
.tft-acc-link:hover i, .tft-acc-link--active i { color: var(--svr-color-accent-gold); }

.tft-account-content {
    flex: 1;
}
.tft-account-content p {
    font-size: 1.1rem;
    color: var(--svr-color-text-muted-light);
    margin-block-end: 20px;
}
.tft-account-content a { color: var(--svr-color-accent-gold); font-weight: 600; }
.tft-acc-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-block-start: 40px;
}
.tft-acc-box {
    background-color: var(--svr-color-card-light);
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-lg);
    padding: 40px;
    text-align: center;
}
.tft-acc-box i {
    font-size: 2.5rem;
    color: var(--svr-color-accent-gold);
    margin-block-end: 20px;
}
.tft-acc-box h3 { font-family: var(--svr-font-heading); font-size: 1.5rem; margin-block-end: 10px; }
.tft-acc-box p { font-size: 0.95rem; margin-block-end: 25px; }

/* --- 11. FAQ & PRICING --- */
/* FAQ */
.tft-faq-wrap {
    display: flex;
    gap: 60px;
    padding: 0 40px 100px;
    max-width: 1000px;
    margin: 0 auto;
}
.tft-faq-container { flex: 1.5; }
.tft-faq-item {
    border-block-end: 1px solid var(--svr-color-border-light);
    margin-block-end: 20px;
    padding-block-end: 20px;
}
.tft-faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.tft-faq-header h3 {
    font-family: var(--svr-font-heading);
    font-size: 1.5rem;
    color: var(--svr-color-text-dark);
}
.tft-faq-icon {
    transition: transform var(--svr-transition-fast);
}
.tft-faq-item--active .tft-faq-icon { transform: rotate(180deg); }
.tft-faq-body {
    display: none;
    margin-block-start: 15px;
    color: var(--svr-color-text-muted-light);
    line-height: 1.6;
}
.tft-faq-sidebar { flex: 1; }
.tft-help-box {
    background-color: var(--svr-color-card-light);
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-lg);
    padding: 40px;
    text-align: center;
}
.tft-help-box i { font-size: 2.5rem; color: var(--svr-color-accent-gold); margin-block-end: 20px; }
.tft-help-box h3 { font-family: var(--svr-font-heading); font-size: 1.5rem; margin-block-end: 15px; }
.tft-help-box p { color: var(--svr-color-text-muted-light); margin-block-end: 25px; }

/* Pricing */
.tft-pricing-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    padding: 0 40px 100px;
    max-width: 1200px;
    margin: 0 auto;
}
.tft-pricing-card {
    background-color: var(--svr-color-card-light);
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-lg);
    padding: 50px 40px;
    text-align: center;
    position: relative;
    transition: transform var(--svr-transition-fast);
}
.tft-pricing-card:hover { transform: translateY(-10px); }
.tft-pricing-card--popular {
    border: 2px solid var(--svr-color-accent-gold);
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}
.tft-pc-badge {
    position: absolute;
    inset-block-start: -15px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    background-color: var(--svr-color-accent-gold);
    color: var(--svr-color-text-light);
    padding: 5px 20px;
    border-radius: var(--svr-radius-pill);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.tft-pc-header { margin-block-end: 30px; padding-block-end: 30px; border-block-end: 1px solid var(--svr-color-border-light); }
.tft-pc-header h3 { font-family: var(--svr-font-heading); font-size: 2rem; margin-block-end: 15px; }
.tft-pc-price { font-family: var(--svr-font-heading); font-size: 4rem; font-weight: 600; color: var(--svr-color-accent-gold); display: flex; justify-content: center; align-items: flex-start; }
.tft-pc-price span { font-size: 1.5rem; margin-block-start: 10px; }
.tft-pc-price span:last-child { margin-block-start: 35px; color: var(--svr-color-text-muted-light); }
.tft-pc-header p { color: var(--svr-color-text-muted-light); margin-block-start: 15px; }
.tft-pc-features { list-style: none; margin-block-end: 40px; text-align: left; }
.tft-pc-features li { margin-block-end: 15px; display: flex; align-items: center; gap: 10px; color: var(--svr-color-text-dark); }
.tft-pc-features li i { color: var(--svr-color-accent-gold); }
.tft-f-disabled { color: var(--svr-color-text-muted-light) !important; text-decoration: line-through; }
.tft-f-disabled i { color: var(--svr-color-text-muted-light) !important; }

/* --- 12. SPECIAL PAGES (404 & COMING SOON) --- */
.tft-special-body {
    background-color: var(--svr-color-bg-dark);
    color: var(--svr-color-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}
.tft-404-layout {
    text-align: center;
    position: relative;
    z-index: 10;
    padding: 40px;
}
.tft-404-bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1;
    overflow: hidden;
}
.tft-404-bg span {
    font-family: var(--svr-font-heading);
    font-size: 40vw;
    font-weight: 700;
    color: rgba(255,255,255,0.03);
    line-height: 1;
}
.tft-404-badge {
    color: var(--svr-color-accent-gold);
    font-weight: 700;
    letter-spacing: 0.3em;
    display: block;
    margin-block-end: 20px;
}
.tft-404-title {
    font-family: var(--svr-font-heading);
    font-size: clamp(4rem, 8vw, 8rem);
    line-height: 1;
    margin-block-end: 30px;
}
.tft-404-title em { font-style: italic; color: var(--svr-color-accent-gold); }
.tft-404-desc {
    font-size: 1.2rem;
    color: var(--svr-color-text-muted-light);
    max-width: 600px;
    margin: 0 auto 40px;
}
.tft-404-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-block-end: 50px;
}
.tft-404-actions .tft-btn-secondary {
    background-color: transparent;
    border-color: rgba(255,255,255,0.2);
    color: var(--svr-color-text-light);
}
.tft-404-actions .tft-btn-secondary:hover { background-color: rgba(255,255,255,0.1); }
.tft-404-search {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
}
.tft-404-search-input {
    width: 100%;
    padding: 20px 60px 20px 30px;
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--svr-radius-pill);
    color: var(--svr-color-text-light);
    font-family: var(--svr-font-body);
    font-size: 1rem;
    outline: none;
}
.tft-404-search button {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 20px;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--svr-color-accent-gold);
    font-size: 1.2rem;
    cursor: pointer;
}

/* Coming Soon */
.tft-cs-layout {
    display: flex;
    width: 100%;
    min-height: 100vh;
}
.tft-cs-media {
    flex: 1;
    position: relative;
}
.tft-cs-img { width: 100%; height: 100%; object-fit: cover; }
.tft-cs-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0.8), transparent); }
.tft-cs-content {
    flex: 1;
    background-color: var(--svr-color-bg-dark);
    padding: 60px;
    display: flex;
    flex-direction: column;
    position: relative;
}
.tft-cs-logo {
    font-family: var(--svr-font-heading);
    font-size: 2rem;
    color: var(--svr-color-text-light);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.tft-cs-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 600px;
}
.tft-cs-badge {
    color: var(--svr-color-accent-gold);
    font-weight: 700;
    letter-spacing: 0.2em;
    font-size: 0.8rem;
    margin-block-end: 20px;
}
.tft-cs-title {
    font-family: var(--svr-font-heading);
    font-size: clamp(3.5rem, 6vw, 5rem);
    line-height: 1.1;
    margin-block-end: 20px;
}
.tft-cs-title em { color: var(--svr-color-accent-gold); font-style: italic; }
.tft-cs-desc {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
    margin-block-end: 40px;
}
.tft-cs-countdown {
    display: flex;
    gap: 30px;
    margin-block-end: 50px;
}
.tft-csc-item {
    text-align: center;
}
.tft-csc-num {
    display: block;
    font-family: var(--svr-font-heading);
    font-size: 3rem;
    color: var(--svr-color-accent-gold);
    line-height: 1;
    margin-block-end: 10px;
}
.tft-csc-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.5);
}
.tft-cs-notify-group {
    display: flex;
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--svr-radius-md);
    overflow: hidden;
}
.tft-cs-notify-group input {
    flex: 1;
    padding: 20px;
    background: transparent;
    border: none;
    color: var(--svr-color-text-light);
    outline: none;
    font-family: var(--svr-font-body);
}
.tft-cs-notify-group button { border-radius: 0; }
.tft-cs-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-block-start: 1px solid rgba(255,255,255,0.1);
    padding-block-start: 30px;
    color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
}
.tft-cs-socials { display: flex; gap: 15px; }
.tft-cs-socials a { color: rgba(255,255,255,0.4); font-size: 1.2rem; transition: color var(--svr-transition-fast); }
.tft-cs-socials a:hover { color: var(--svr-color-accent-gold); }

@media (max-width: 992px) {
    .tft-cart-layout, .tft-checkout-form, .tft-account-wrap, .tft-faq-wrap, .tft-cs-layout {
        flex-direction: column;
    }
    .tft-account-nav { width: 100%; margin-block-end: 40px; }
    .tft-cs-media { display: none; }
    .tft-cs-content { padding: 40px 20px; }
}

/* --- 13. GLOBAL TEXT COLOR FIX FOR LIGHT THEME CONTENT --- */
/* Since body is dark and main-content is light, we must enforce dark text */
.svr-main-content,
.tft-page-header,
.tft-shop-layout,
.tft-sp-layout,
.tft-blog-layout,
.tft-single-post,
.tft-contact-layout,
.tft-about-us,
.tft-am-layout,
.tft-services-grid,
.tft-cart-layout,
.tft-checkout-wrap,
.tft-account-wrap,
.tft-faq-wrap,
.tft-pricing-wrap {
    color: var(--svr-color-text-dark);
}

.tft-page-header h1,
.tft-sh-title,
.tft-contact-title,
.tft-sh-desc {
    color: var(--svr-color-text-dark);
}

.tft-form-group input, 
.tft-form-group textarea,
.tft-form-group select,
.tft-search-form input,
.tft-coupon-input,
.tft-qty-input,
.tft-comment-form input,
.tft-comment-form textarea,
.tft-checkout-billing input,
.tft-checkout-billing select {
    color: var(--svr-color-text-dark);
}

/* --- 14. ULTIMATE WOOCOMMERCE PREMIUM ENHANCEMENTS --- */

/* Global eCommerce Badges & Carts */
.tft-cart-badge {
    position: absolute;
    top: -5px;
    right: -10px;
    background-color: var(--svr-color-accent-gold);
    color: var(--svr-color-text-light);
    font-size: 0.65rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Shop Sidebar Upgrades */
.tft-widget {
    margin-block-end: 40px;
}
.tft-widget-title {
    font-family: var(--svr-font-heading);
    font-size: 1.4rem;
    margin-block-end: 20px;
    padding-block-end: 10px;
    border-block-end: 2px solid var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
    display: inline-block;
}
.tft-widget-categories, .tft-widget-rating {
    list-style: none;
}
.tft-widget-categories li, .tft-widget-rating li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-end: 12px;
}
.tft-widget-categories a, .tft-widget-rating a {
    color: var(--svr-color-text-muted-light);
    text-decoration: none;
    transition: color var(--svr-transition-fast);
}
.tft-widget-categories a:hover, .tft-widget-rating a:hover {
    color: var(--svr-color-accent-gold);
}
.tft-widget .count {
    font-size: 0.85rem;
    color: var(--svr-color-text-muted-light);
    background-color: var(--svr-color-bg-dark);
    color: white;
    padding: 2px 8px;
    border-radius: var(--svr-radius-pill);
}
.tft-widget-rating i {
    color: var(--svr-color-accent-gold);
    font-size: 0.85rem;
}
.tft-widget-rating .fa-regular {
    color: var(--svr-color-text-muted-light);
}

/* Price Slider UI */
.tft-price-slider { margin-block-start: 10px; }
.tft-ps-track {
    height: 4px;
    background-color: var(--svr-color-border-light);
    border-radius: var(--svr-radius-pill);
    position: relative;
    margin-block-end: 20px;
}
.tft-ps-range {
    position: absolute;
    height: 100%;
    background-color: var(--svr-color-accent-gold);
    border-radius: var(--svr-radius-pill);
}
.tft-ps-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background-color: var(--svr-color-text-light);
    border: 2px solid var(--svr-color-accent-gold);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.tft-ps-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--svr-color-text-muted-light);
    font-weight: 500;
}
.tft-btn-filter {
    background-color: var(--svr-color-text-dark);
    color: var(--svr-color-text-light);
    padding: 5px 15px;
    border-radius: var(--svr-radius-sm);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Toolbar Upgrades */
.tft-shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-end: 30px;
    padding-block-end: 15px;
    border-block-end: 1px solid var(--svr-color-border-light);
}
.tft-shop-result-count {
    color: var(--svr-color-text-muted-light);
    font-size: 0.95rem;
}
.tft-orderby {
    padding: 10px 15px;
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-md);
    background-color: var(--svr-color-bg-light);
    font-family: var(--svr-font-body);
    outline: none;
    cursor: pointer;
}

/* Premium Product Cards Hover */
.tft-product-card {
    position: relative;
    overflow: hidden;
    background: var(--svr-color-text-light);
    border: 1px solid transparent;
}
.tft-product-card:hover {
    border-color: var(--svr-color-border-light);
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}
.tft-pc-overlay {
    position: absolute;
    inset: auto 0 0 0;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    transform: translateY(100%);
    transition: transform var(--svr-transition-fast);
}
.tft-product-card:hover .tft-pc-overlay {
    transform: translateY(0);
}
.tft-pc-action {
    width: 40px;
    height: 40px;
    background: var(--svr-color-bg-dark);
    color: var(--svr-color-text-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all var(--svr-transition-fast);
}
.tft-pc-action:hover {
    background: var(--svr-color-accent-gold);
    transform: scale(1.1);
}
.tft-pc-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--svr-color-accent-gold);
    color: var(--svr-color-text-light);
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: var(--svr-radius-sm);
    z-index: 2;
}
.tft-pc-badge--out {
    background-color: #e74c3c;
}
.tft-pc-rating {
    color: var(--svr-color-accent-gold);
    font-size: 0.8rem;
    margin-block-end: 8px;
}

/* Premium Pagination */
.tft-pagination {
    margin-block-start: 60px;
    display: flex;
    justify-content: center;
}
.tft-page-numbers {
    display: flex;
    list-style: none;
    gap: 10px;
}
.tft-page-numbers a, .tft-page-numbers span {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--svr-color-border-light);
    border-radius: 50%;
    text-decoration: none;
    color: var(--svr-color-text-dark);
    font-weight: 600;
    transition: all var(--svr-transition-fast);
}
.tft-page-numbers a:hover, .tft-page-numbers .current {
    background-color: var(--svr-color-text-dark);
    color: var(--svr-color-text-light);
    border-color: var(--svr-color-text-dark);
}

/* Single Product Premium Upgrades */
.tft-breadcrumbs {
    font-size: 0.85rem;
    color: var(--svr-color-text-muted-light);
    margin-block-end: 30px;
}
.tft-breadcrumbs a {
    color: var(--svr-color-text-dark);
    text-decoration: none;
}
.tft-breadcrumbs a:hover { color: var(--svr-color-accent-gold); }

.tft-sp-thumbnails {
    display: flex;
    gap: 15px;
    margin-block-start: 15px;
}
.tft-sp-thumbnails img {
    width: calc(33.333% - 10px);
    border-radius: var(--svr-radius-md);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--svr-transition-fast);
}
.tft-sp-thumbnails img:hover, .tft-sp-thumbnails img.active {
    opacity: 1;
    border: 2px solid var(--svr-color-accent-gold);
}
.tft-sp-main-img { position: relative; }
.tft-sp-zoom {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: var(--svr-color-text-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    color: var(--svr-color-text-dark);
    border: none;
    cursor: pointer;
}

.tft-sp-rating-box {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-block-end: 15px;
}
.tft-sp-review-link {
    font-size: 0.9rem;
    color: var(--svr-color-text-muted-light);
    text-decoration: none;
}
.tft-sp-short-desc {
    margin-block-end: 30px;
    color: var(--svr-color-text-muted-light);
}
.tft-sp-short-desc ul {
    margin-block-start: 15px;
    padding-inline-start: 20px;
}
.tft-sp-short-desc li { margin-block-end: 5px; }

.tft-sp-wishlist {
    width: 50px;
    height: 50px;
    border: 1px solid var(--svr-color-border-light);
    background: transparent;
    border-radius: var(--svr-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--svr-color-text-dark);
    transition: all var(--svr-transition-fast);
}
.tft-sp-wishlist:hover {
    color: #e74c3c;
    border-color: #e74c3c;
}

.tft-related-products { margin-block-start: 80px; padding-block-start: 80px; border-block-start: 1px solid var(--svr-color-border-light); }
.tft-related-title { font-family: var(--svr-font-heading); font-size: 2.5rem; margin-block-end: 40px; text-align: center; }

/* --- 15. ULTIMATE BLOG & JOURNAL PREMIUM ENHANCEMENTS --- */

/* Blog Categories Nav */
.tft-blog-categories-nav {
    display: flex;
    justify-content: center;
    gap: 30px;
    list-style: none;
    margin-block-start: 30px;
}
.tft-blog-categories-nav a {
    color: var(--svr-color-text-muted-light);
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-block-end: 5px;
    border-block-end: 2px solid transparent;
    transition: all var(--svr-transition-fast);
}
.tft-blog-categories-nav a:hover, .tft-blog-categories-nav a.active {
    color: var(--svr-color-accent-gold);
    border-color: var(--svr-color-accent-gold);
}

/* Featured Blog Post */
.tft-blog-featured {
    margin-block-end: 60px;
}
.tft-featured-card {
    display: flex;
    background: var(--svr-color-card-light);
    border-radius: var(--svr-radius-lg);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.tft-fc-image { flex: 1.2; position: relative; overflow: hidden; }
.tft-fc-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.tft-featured-card:hover .tft-fc-image img { transform: scale(1.05); }
.tft-fc-content { flex: 1; padding: 60px; display: flex; flex-direction: column; justify-content: center; }
.tft-fc-cat { font-size: 0.8rem; font-weight: 700; color: var(--svr-color-accent-gold); text-transform: uppercase; letter-spacing: 0.15em; margin-block-end: 15px; }
.tft-fc-title { font-family: var(--svr-font-heading); font-size: 2.5rem; margin-block-end: 20px; line-height: 1.1; }
.tft-fc-excerpt { color: var(--svr-color-text-muted-light); margin-block-end: 30px; line-height: 1.6; }
.tft-fc-meta { display: flex; justify-content: space-between; align-items: center; border-block-start: 1px solid var(--svr-color-border-light); padding-block-start: 20px; }
.tft-author { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.9rem; }
.tft-author img { width: 30px; height: 30px; border-radius: 50%; }

/* Blog Grid */
.tft-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 40px;
}
.tft-post-card {
    background: var(--svr-color-card-light);
    border-radius: var(--svr-radius-md);
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: transform var(--svr-transition-fast), box-shadow var(--svr-transition-fast);
}
.tft-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}
.tft-post-card-img {
    display: block;
    position: relative;
    height: 240px;
    overflow: hidden;
}
.tft-post-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.tft-post-card:hover .tft-post-card-img img { transform: scale(1.05); }
.tft-post-cat {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--svr-color-bg-dark);
    color: var(--svr-color-text-light);
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: var(--svr-radius-sm);
}
.tft-post-card-content { padding: 30px; }
.tft-post-title { font-family: var(--svr-font-heading); font-size: 1.8rem; margin-block-end: 15px; }
.tft-post-excerpt { color: var(--svr-color-text-muted-light); font-size: 0.95rem; margin-block-end: 20px; }
.tft-post-meta { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--svr-color-text-muted-light); }
.tft-post-meta span { display: flex; align-items: center; gap: 6px; }

/* Single Post Dropcap & Blockquote */
.tft-dropcap {
    float: left;
    font-family: var(--svr-font-heading);
    font-size: 5rem;
    line-height: 4.5rem;
    padding-top: 4px;
    padding-right: 15px;
    padding-left: 3px;
    color: var(--svr-color-accent-gold);
}
.tft-blockquote {
    border-inline-start: 4px solid var(--svr-color-accent-gold);
    padding: 30px 40px;
    margin: 40px 0;
    background: var(--svr-color-bg-light);
    font-family: var(--svr-font-heading);
    font-size: 1.8rem;
    font-style: italic;
    color: var(--svr-color-text-dark);
    border-radius: 0 var(--svr-radius-md) var(--svr-radius-md) 0;
}
.tft-blockquote cite {
    display: block;
    font-family: var(--svr-font-body);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 600;
    margin-block-start: 15px;
    color: var(--svr-color-text-muted-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Author Box */
.tft-author-box {
    display: flex;
    gap: 30px;
    background: var(--svr-color-text-light);
    padding: 40px;
    border-radius: var(--svr-radius-lg);
    border: 1px solid var(--svr-color-border-light);
    margin: 60px 0;
}
.tft-author-avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }
.tft-author-name { font-family: var(--svr-font-heading); font-size: 1.8rem; margin-block-end: 10px; }
.tft-author-bio { color: var(--svr-color-text-muted-light); line-height: 1.6; margin-block-end: 15px; }
.tft-author-link { font-weight: 600; color: var(--svr-color-accent-gold); }

/* Threaded Comments Tree */
.tft-comments-area { margin-block-start: 80px; }
.tft-comment-list { list-style: none; margin: 0; padding: 0; }
.tft-comment-list .children { list-style: none; padding-inline-start: clamp(20px, 5vw, 60px); border-inline-start: 2px solid var(--svr-color-border-light); margin-block-start: 20px; margin-inline-start: 30px; }
.tft-comment-body { display: flex; gap: 20px; background: var(--svr-color-text-light); padding: 30px; border-radius: var(--svr-radius-md); box-shadow: 0 5px 15px rgba(0,0,0,0.02); margin-block-end: 20px; }
.tft-comment-avatar { width: 50px; height: 50px; border-radius: 50%; }
.tft-comment-content { flex: 1; }
.tft-comment-meta { display: flex; justify-content: space-between; margin-block-end: 10px; align-items: center; }
.tft-badge-author { background: var(--svr-color-accent-gold); color: var(--svr-color-text-light); font-size: 0.6rem; padding: 2px 6px; border-radius: 4px; margin-inline-start: 5px; vertical-align: middle; }
.tft-comment-time { font-size: 0.8rem; color: var(--svr-color-text-muted-light); }
.tft-comment-reply { display: inline-block; margin-block-start: 10px; font-size: 0.85rem; font-weight: 600; color: var(--svr-color-text-dark); transition: color var(--svr-transition-fast); }
.tft-comment-reply:hover { color: var(--svr-color-accent-gold); }

/* --- 16. ULTIMATE WOOCOMMERCE CART, CHECKOUT & ACCOUNT --- */

/* Cart Layout */
.tft-cart-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 0 40px 60px;
}
.tft-cart-main { flex: 1 1 60%; }
.tft-cart-sidebar { flex: 1 1 30%; }

.tft-cart-table { width: 100%; border-collapse: collapse; margin-block-end: 30px; }
.tft-cart-table th { font-family: var(--svr-font-heading); font-size: 1.2rem; text-align: left; padding: 20px; border-block-end: 2px solid var(--svr-color-border-light); }
.tft-cart-table td { padding: 20px; border-block-end: 1px solid var(--svr-color-border-light); vertical-align: middle; }
.tft-cart-item .product-remove a { color: #e74c3c; font-size: 1.2rem; transition: transform var(--svr-transition-fast); display: inline-block; }
.tft-cart-item .product-remove a:hover { transform: scale(1.2); }
.tft-cart-item .product-thumbnail img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--svr-radius-sm); }
.tft-cart-item .product-name a { font-weight: 600; color: var(--svr-color-text-dark); text-decoration: none; transition: color var(--svr-transition-fast); }
.tft-cart-item .product-name a:hover { color: var(--svr-color-accent-gold); }

.tft-coupon-group { display: flex; gap: 10px; margin-block-start: 20px; }
.tft-coupon-input { padding: 12px 20px; border: 1px solid var(--svr-color-border-light); border-radius: var(--svr-radius-md); font-family: var(--svr-font-body); width: 200px; }

.tft-cart-totals-box { background: var(--svr-color-card-light); padding: 40px; border-radius: var(--svr-radius-lg); box-shadow: 0 10px 30px rgba(0,0,0,0.05); position: sticky; top: 120px; }
.tft-cart-totals-box h2 { font-family: var(--svr-font-heading); font-size: 2rem; margin-block-end: 30px; border-block-end: 2px solid var(--svr-color-accent-gold); padding-block-end: 10px; display: inline-block; }
.tft-totals-table { width: 100%; border-collapse: collapse; margin-block-end: 30px; }
.tft-totals-table th { text-align: left; padding: 15px 0; border-block-end: 1px solid var(--svr-color-border-light); font-weight: 600; }
.tft-totals-table td { text-align: right; padding: 15px 0; border-block-end: 1px solid var(--svr-color-border-light); }
.order-total th, .order-total td { font-size: 1.2rem; border-block-end: none; padding-block-start: 20px; }
.order-total td strong { color: var(--svr-color-accent-gold); }
#shipping_method { list-style: none; text-align: right; margin-block-end: 10px; }
#shipping_method li { margin-block-end: 5px; }
.tft-shipping-destination { font-size: 0.85rem; color: var(--svr-color-text-muted-light); margin-block-end: 10px; }
.tft-shipping-calculator { font-size: 0.85rem; color: var(--svr-color-accent-gold); font-weight: 500; }

.tft-btn-block { display: block; width: 100%; text-align: center; }

/* Checkout Layout */
.tft-checkout-wrap { padding: 0 40px 60px; }
.tft-checkout-notices { background: rgba(230, 185, 83, 0.1); padding: 20px; border-inline-start: 4px solid var(--svr-color-accent-gold); border-radius: 0 var(--svr-radius-md) var(--svr-radius-md) 0; margin-block-end: 40px; color: var(--svr-color-text-dark); font-weight: 500; }
.tft-checkout-notices a { color: var(--svr-color-accent-gold); font-weight: 600; }

.tft-checkout-form { display: flex; flex-wrap: wrap; gap: 40px; }
.tft-checkout-left { flex: 1 1 55%; }
.tft-checkout-right { flex: 1 1 40%; }

.tft-billing-fields h3, .tft-additional-fields h3, #order_review_heading { font-family: var(--svr-font-heading); font-size: 2.2rem; margin-block-end: 30px; border-block-end: 2px solid var(--svr-color-accent-gold); padding-block-end: 10px; display: inline-block; color: var(--svr-color-text-dark); }
.tft-form-row { display: flex; gap: 20px; }
.tft-form-group { flex: 1; margin-block-end: 20px; }
.tft-form-group label { display: block; font-weight: 600; margin-block-end: 8px; font-size: 0.9rem; color: var(--svr-color-text-dark); }
.tft-form-group .required { color: #e74c3c; text-decoration: none; }
.tft-form-group .input-text, .tft-form-group select { width: 100%; padding: 12px 20px; border: 1px solid var(--svr-color-border-light); border-radius: var(--svr-radius-md); font-family: var(--svr-font-body); transition: border-color var(--svr-transition-fast); background: var(--svr-color-text-light); }
.tft-form-group .input-text:focus, .tft-form-group select:focus { border-color: var(--svr-color-accent-gold); outline: none; }

.tft-order-review { background: var(--svr-color-card-light); padding: 40px; border-radius: var(--svr-radius-lg); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.tft-checkout-table { width: 100%; border-collapse: collapse; margin-block-end: 30px; }
.tft-checkout-table th { text-align: left; padding: 15px 0; border-block-end: 2px solid var(--svr-color-border-light); }
.tft-checkout-table td { padding: 15px 0; border-block-end: 1px solid var(--svr-color-border-light); }
.tft-checkout-table .product-total { text-align: right; }
.tft-checkout-table tfoot th, .tft-checkout-table tfoot td { font-weight: 600; }
.tft-checkout-table .order-total th, .tft-checkout-table .order-total td { font-size: 1.2rem; border-block-end: none; padding-block-start: 20px; }
.tft-checkout-table .order-total .amount { color: var(--svr-color-accent-gold); }

.tft-payment-methods { background: var(--svr-color-bg-light); padding: 30px; border-radius: var(--svr-radius-md); border: 1px solid var(--svr-color-border-light); margin-block-end: 30px; }
.payment_methods { list-style: none; margin-block-end: 20px; }
.wc_payment_method { margin-block-end: 15px; }
.wc_payment_method label { font-weight: 600; margin-inline-start: 10px; cursor: pointer; color: var(--svr-color-text-dark); }
.payment_box { background: rgba(0,0,0,0.03); padding: 20px; border-radius: var(--svr-radius-md); margin-block-start: 10px; font-size: 0.9rem; color: var(--svr-color-text-muted-light); line-height: 1.5; }
.tft-privacy-policy-text { font-size: 0.85rem; color: var(--svr-color-text-muted-light); margin-block-end: 20px; line-height: 1.5; }
.tft-privacy-link { color: var(--svr-color-accent-gold); text-decoration: underline; }

/* My Account Layout */
.tft-account-wrap { display: flex; flex-wrap: wrap; gap: 40px; padding: 0 40px 60px; }
.tft-account-nav { flex: 1 1 25%; }
.tft-account-nav ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tft-account-nav a { display: flex; align-items: center; gap: 15px; padding: 15px 25px; border-radius: var(--svr-radius-pill); font-weight: 600; color: var(--svr-color-text-dark); background: var(--svr-color-text-light); box-shadow: 0 2px 10px rgba(0,0,0,0.02); transition: all var(--svr-transition-fast); }
.tft-account-nav a i { width: 20px; color: var(--svr-color-text-muted-light); transition: color var(--svr-transition-fast); }
.tft-account-nav a:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.05); transform: translateX(5px); }
.tft-account-nav a.active { background: var(--svr-color-text-dark); color: var(--svr-color-text-light); }
.tft-account-nav a.active i { color: var(--svr-color-accent-gold); }

.tft-account-content { flex: 1 1 70%; background: var(--svr-color-text-light); border-radius: var(--svr-radius-lg); padding: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
.tft-welcome-msg { font-size: 1.2rem; margin-block-end: 20px; color: var(--svr-color-text-dark); }
.tft-welcome-msg a { color: var(--svr-color-accent-gold); font-weight: 600; }
.tft-account-dashboard p { color: var(--svr-color-text-muted-light); margin-block-end: 40px; font-size: 1rem; line-height: 1.6; }
.tft-account-dashboard a { color: var(--svr-color-text-dark); font-weight: 600; text-decoration: underline; text-decoration-color: var(--svr-color-accent-gold); }

.tft-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.tft-dash-card { border: 1px solid var(--svr-color-border-light); border-radius: var(--svr-radius-md); padding: 40px 30px; text-align: center; transition: all var(--svr-transition-fast); }
.tft-dash-card:hover { border-color: var(--svr-color-accent-gold); box-shadow: 0 10px 30px rgba(230, 185, 83, 0.1); transform: translateY(-5px); }
.tft-dash-card i { font-size: 2.5rem; color: var(--svr-color-accent-gold); margin-block-end: 20px; }
.tft-dash-card h3 { font-family: var(--svr-font-heading); font-size: 1.8rem; margin-block-end: 20px; color: var(--svr-color-text-dark); }

/* --- 17. CORPORATE PREMIUM ENHANCEMENTS (ABOUT & SERVICES) --- */

/* Page Header Centered */
.tft-page-header--center { text-align: center; }
.tft-page-header--center .tft-contact-badge { margin: 0 auto 20px; display: inline-block; }

/* About Us Layout */
.tft-about-us { padding: 0 40px 60px; }
.tft-au-mission { display: flex; gap: 60px; align-items: center; margin-block-end: 80px; }
.tft-au-mission-content { flex: 1; }
.tft-au-mission-content h2 { font-family: var(--svr-font-heading); font-size: 2.5rem; margin-block-end: 20px; color: var(--svr-color-text-dark); line-height: 1.2; }
.tft-au-mission-content p { font-size: 1.1rem; color: var(--svr-color-text-muted-light); margin-block-end: 20px; line-height: 1.6; }
.tft-au-mission-image { flex: 1; position: relative; }
.tft-au-mission-image img { width: 100%; border-radius: var(--svr-radius-lg); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.tft-au-mission-image::after { content: ''; position: absolute; inset: -20px -20px 20px 20px; border: 2px solid var(--svr-color-accent-gold); border-radius: var(--svr-radius-lg); z-index: -1; }

.tft-au-stats { display: flex; justify-content: space-around; background: var(--svr-color-bg-dark); padding: 60px; border-radius: var(--svr-radius-lg); margin-block-end: 80px; text-align: center; color: var(--svr-color-text-light); }
.tft-stat-num { display: block; font-family: var(--svr-font-heading); font-size: 4rem; color: var(--svr-color-accent-gold); line-height: 1; margin-block-end: 10px; }
.tft-stat-label { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.8; }

.tft-au-team { margin-block-end: 40px; }
.tft-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
.tft-team-member { text-align: center; }
.tft-tm-image { position: relative; overflow: hidden; border-radius: var(--svr-radius-lg); margin-block-end: 20px; }
.tft-tm-image img { width: 100%; height: 350px; object-fit: cover; transition: transform var(--svr-transition-fast); }
.tft-team-member:hover .tft-tm-image img { transform: scale(1.05); }
.tft-tm-social { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(50px); opacity: 0; display: flex; gap: 15px; transition: all var(--svr-transition-fast); }
.tft-tm-social a { width: 40px; height: 40px; background: var(--svr-color-bg-dark); color: var(--svr-color-text-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.tft-tm-social a:hover { background: var(--svr-color-accent-gold); }
.tft-team-member:hover .tft-tm-social { transform: translateX(-50%) translateY(0); opacity: 1; }
.tft-tm-name { font-family: var(--svr-font-heading); font-size: 1.8rem; color: var(--svr-color-text-dark); margin-block-end: 5px; }
.tft-tm-role { color: var(--svr-color-accent-gold); font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; }

/* Services Layout */
.tft-services-layout { padding: 0 40px 60px; }
.tft-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-block-end: 80px; }
.tft-service-card { background: var(--svr-color-card-light); padding: 40px; border-radius: var(--svr-radius-lg); box-shadow: 0 10px 30px rgba(0,0,0,0.03); transition: all var(--svr-transition-fast); text-align: center; border: 1px solid transparent; }
.tft-service-card:hover { transform: translateY(-10px); border-color: var(--svr-color-accent-gold); box-shadow: 0 20px 40px rgba(230, 185, 83, 0.1); }
.tft-sc-icon { width: 80px; height: 80px; background: rgba(230, 185, 83, 0.1); color: var(--svr-color-accent-gold); font-size: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; transition: all var(--svr-transition-fast); }
.tft-service-card:hover .tft-sc-icon { background: var(--svr-color-accent-gold); color: var(--svr-color-text-light); }
.tft-sc-title { font-family: var(--svr-font-heading); font-size: 1.8rem; color: var(--svr-color-text-dark); margin-block-end: 15px; }
.tft-sc-desc { color: var(--svr-color-text-muted-light); margin-block-end: 25px; line-height: 1.6; }
.tft-sc-link { font-weight: 600; color: var(--svr-color-text-dark); display: inline-flex; align-items: center; gap: 8px; transition: color var(--svr-transition-fast); }
.tft-sc-link:hover { color: var(--svr-color-accent-gold); }

.tft-cta-banner { background: var(--svr-color-bg-dark); color: var(--svr-color-text-light); padding: 60px; border-radius: var(--svr-radius-lg); text-align: center; }
.tft-cta-banner h2 { font-family: var(--svr-font-heading); font-size: 2.5rem; margin-block-end: 15px; }
.tft-cta-banner p { color: var(--svr-color-text-muted-light); margin-block-end: 30px; font-size: 1.1rem; }

/* --- 18. ABOUT ME & FAQ PREMIUM ENHANCEMENTS --- */

/* About Me Layout */
.tft-about-me-hero { display: flex; gap: 40px; margin-block-end: 80px; align-items: center; padding: 0 40px; }
.tft-amh-content { flex: 1; padding-inline-end: 40px; }
.tft-amh-title { font-family: var(--svr-font-heading); font-size: 3.5rem; color: var(--svr-color-text-dark); margin-block-end: 20px; line-height: 1.1; }
.tft-amh-desc { font-size: 1.1rem; color: var(--svr-color-text-muted-light); margin-block-end: 30px; line-height: 1.6; }
.tft-amh-image { flex: 1; }
.tft-amh-image img { width: 100%; border-radius: var(--svr-radius-lg); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }

.tft-am-layout { padding: 0 40px 60px; }
.tft-am-logos { text-align: center; margin-block-end: 80px; padding-block-start: 60px; border-block-start: 1px solid var(--svr-color-border-light); }
.tft-am-logos span { display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--svr-color-text-muted-light); margin-block-end: 20px; font-weight: 600; }
.tft-am-logo-grid { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; color: var(--svr-color-text-muted-light); opacity: 0.6; }

.tft-am-philosophy { margin-block-end: 40px; }
.tft-philosophy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
.tft-phil-box { background: var(--svr-color-bg-light); padding: 40px; border-radius: var(--svr-radius-md); text-align: center; border: 1px solid var(--svr-color-border-light); transition: all var(--svr-transition-fast); }
.tft-phil-box:hover { background: var(--svr-color-text-light); box-shadow: 0 10px 30px rgba(0,0,0,0.03); transform: translateY(-5px); border-color: var(--svr-color-accent-gold); }
.tft-phil-num { display: inline-block; font-family: var(--svr-font-heading); font-size: 3rem; color: var(--svr-color-accent-gold); opacity: 0.3; margin-block-end: 10px; }
.tft-phil-box h3 { font-family: var(--svr-font-heading); font-size: 1.5rem; margin-block-end: 15px; color: var(--svr-color-text-dark); }
.tft-phil-box p { color: var(--svr-color-text-muted-light); line-height: 1.6; }

/* FAQ Layout */
.tft-faq-wrap { padding: 0 40px 60px; max-width: 900px; margin: 0 auto; }
.tft-faq-category { margin-block-end: 60px; }
.tft-faq-category h2 { font-family: var(--svr-font-heading); font-size: 2rem; color: var(--svr-color-text-dark); border-block-end: 2px solid var(--svr-color-accent-gold); padding-block-end: 10px; margin-block-end: 30px; display: inline-block; }

.tft-faq-item { background: var(--svr-color-text-light); border: 1px solid var(--svr-color-border-light); border-radius: var(--svr-radius-md); margin-block-end: 15px; overflow: hidden; transition: all var(--svr-transition-fast); }
.tft-faq-toggle { display: none; }
.tft-faq-question { display: flex; justify-content: space-between; align-items: center; padding: 20px 30px; font-weight: 600; font-size: 1.1rem; color: var(--svr-color-text-dark); cursor: pointer; transition: all var(--svr-transition-fast); }
.tft-faq-question:hover { color: var(--svr-color-accent-gold); background: var(--svr-color-bg-light); }
.tft-faq-question i { color: var(--svr-color-accent-gold); transition: transform var(--svr-transition-fast); }
.tft-faq-answer { max-height: 0; overflow: hidden; padding: 0 30px; color: var(--svr-color-text-muted-light); line-height: 1.6; transition: all 0.3s ease-in-out; }

.tft-faq-toggle:checked + .tft-faq-question { border-block-end: 1px solid var(--svr-color-border-light); background: var(--svr-color-bg-light); }
.tft-faq-toggle:checked + .tft-faq-question i { transform: rotate(45deg); }
.tft-faq-toggle:checked ~ .tft-faq-answer { max-height: 500px; padding: 20px 30px; }

.tft-faq-contact { text-align: center; margin-block-start: 60px; padding: 40px; background: var(--svr-color-card-light); border-radius: var(--svr-radius-lg); border: 1px solid var(--svr-color-border-light); }
.tft-faq-contact p { font-size: 1.1rem; color: var(--svr-color-text-dark); margin-block-end: 20px; font-weight: 600; }

/* --- 19. PRICING & MEMBERSHIPS ENHANCEMENTS --- */

.tft-pricing-wrap { padding: 0 40px 80px; max-width: 1200px; margin: 0 auto; }
.tft-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; align-items: center; }

.tft-pricing-card { background: var(--svr-color-bg-light); border: 1px solid var(--svr-color-border-light); border-radius: var(--svr-radius-lg); padding: 50px 40px; text-align: center; transition: transform var(--svr-transition-fast), box-shadow var(--svr-transition-fast); position: relative; }
.tft-pricing-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.05); }

.tft-pricing-card--featured { background: var(--svr-color-card-light); border: 2px solid var(--svr-color-accent-gold); box-shadow: 0 10px 30px rgba(230, 185, 83, 0.1); padding: 70px 40px; }
.tft-pricing-card--featured:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(230, 185, 83, 0.2); }

.tft-pc-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--svr-color-accent-gold); color: var(--svr-color-text-light); padding: 6px 15px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; border-radius: var(--svr-radius-pill); }

.tft-pc-name { font-family: var(--svr-font-heading); font-size: 2rem; color: var(--svr-color-text-dark); margin-block-end: 15px; }
.tft-pc-desc { font-size: 0.95rem; color: var(--svr-color-text-muted-light); margin-block-end: 30px; line-height: 1.5; min-height: 45px; }

.tft-pc-price { margin-block-end: 40px; }
.tft-pc-price .currency { font-size: 1.5rem; font-weight: 600; vertical-align: super; color: var(--svr-color-text-dark); }
.tft-pc-price .amount { font-family: var(--svr-font-heading); font-size: 4rem; font-weight: 600; color: var(--svr-color-text-dark); line-height: 1; }
.tft-pc-price .period { font-size: 1rem; color: var(--svr-color-text-muted-light); }

.tft-pc-features { list-style: none; padding: 0; margin: 0 0 40px; text-align: left; }
.tft-pc-features li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; color: var(--svr-color-text-dark); margin-block-end: 15px; line-height: 1.4; }
.tft-pc-features li i { color: var(--svr-color-accent-gold); margin-top: 3px; font-size: 0.9rem; }
.tft-pc-features li.tft-feature-disabled { color: var(--svr-color-text-muted-light); }
.tft-pc-features li.tft-feature-disabled i { color: var(--svr-color-border-light); }

/* Switch Toggle */
.tft-pricing-toggle { display: flex; align-items: center; justify-content: center; gap: 15px; }
.tft-toggle-label { font-size: 0.9rem; color: var(--svr-color-text-muted-light); font-weight: 500; }
.tft-switch { position: relative; display: inline-block; width: 50px; height: 26px; }
.tft-switch input { opacity: 0; width: 0; height: 0; }
.tft-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--svr-color-bg-dark); transition: .4s; }
.tft-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: white; transition: .4s; }
.tft-switch input:checked + .tft-slider { background-color: var(--svr-color-accent-gold); }
.tft-switch input:focus + .tft-slider { box-shadow: 0 0 1px var(--svr-color-accent-gold); }
.tft-switch input:checked + .tft-slider:before { transform: translateX(24px); }
.tft-slider.round { border-radius: 34px; }
.tft-slider.round:before { border-radius: 50%; }

/* --- 20. MISC PAGES ENHANCEMENTS (404, COMING SOON, CONTACT) --- */

/* 404 Page Layout */
.tft-404-wrap { display: flex; align-items: center; justify-content: center; min-height: 70vh; text-align: center; padding: 0 40px; }
.tft-404-content { max-width: 600px; }
.tft-404-number { font-family: var(--svr-font-heading); font-size: clamp(8rem, 15vw, 12rem); font-weight: 300; line-height: 1; color: var(--svr-color-accent-gold); margin-block-end: 20px; text-shadow: 0 10px 30px rgba(230, 185, 83, 0.2); }
.tft-404-title { font-family: var(--svr-font-heading); font-size: 2.5rem; color: var(--svr-color-text-dark); margin-block-end: 15px; }
.tft-404-desc { font-size: 1.1rem; color: var(--svr-color-text-muted-light); margin-block-end: 40px; line-height: 1.6; }

.tft-404-search { position: relative; max-width: 400px; margin: 0 auto 40px; }
.tft-404-search input { width: 100%; padding: 15px 50px 15px 25px; border: 1px solid var(--svr-color-border-light); border-radius: var(--svr-radius-pill); font-family: var(--svr-font-body); font-size: 1rem; color: var(--svr-color-text-dark); background: var(--svr-color-text-light); transition: border-color var(--svr-transition-fast); }
.tft-404-search input:focus { border-color: var(--svr-color-accent-gold); outline: none; }
.tft-404-search button { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--svr-color-accent-gold); font-size: 1.2rem; background: none; border: none; cursor: pointer; }

.tft-404-actions { display: flex; gap: 20px; justify-content: center; }

/* Coming Soon Layout */
.tft-coming-soon-body { margin: 0; padding: 0; min-height: 100vh; font-family: var(--svr-font-body); background: var(--svr-color-bg-dark); }
.tft-coming-soon-layout { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px; }
.tft-cs-bg { position: absolute; inset: 0; z-index: 1; }
.tft-cs-bg img { width: 100%; height: 100%; object-fit: cover; }
.tft-cs-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.7) 100%); z-index: 2; }

.tft-cs-content { position: relative; z-index: 3; max-width: 800px; color: var(--svr-color-text-light); }
.tft-cs-logo { display: inline-block; font-family: var(--svr-font-heading); font-size: 2.5rem; color: var(--svr-color-accent-gold); text-decoration: none; letter-spacing: 0.15em; margin-block-end: 60px; font-weight: 600; }
.tft-cs-title { font-family: var(--svr-font-heading); font-size: clamp(3rem, 6vw, 5rem); line-height: 1.1; margin-block-end: 20px; font-weight: 300; }
.tft-cs-title em { font-style: italic; color: var(--svr-color-accent-gold); }
.tft-cs-desc { font-size: 1.1rem; color: var(--svr-color-text-muted-light); margin-block-end: 60px; line-height: 1.6; max-width: 600px; margin-inline: auto; }

.tft-cs-countdown { display: flex; justify-content: center; gap: clamp(20px, 4vw, 40px); margin-block-end: 60px; }
.tft-cs-time { display: flex; flex-direction: column; align-items: center; }
.tft-cs-num { font-family: var(--svr-font-heading); font-size: clamp(3rem, 5vw, 4rem); font-weight: 600; color: var(--svr-color-text-light); line-height: 1; margin-block-end: 10px; }
.tft-cs-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--svr-color-accent-gold); }

.tft-cs-subscribe { display: flex; max-width: 500px; margin: 0 auto 60px; background: rgba(255,255,255,0.1); border-radius: var(--svr-radius-pill); padding: 5px; border: 1px solid var(--svr-color-border-dark); backdrop-filter: blur(10px); }
.tft-cs-subscribe input { flex: 1; background: transparent; border: none; padding: 15px 25px; color: var(--svr-color-text-light); font-family: var(--svr-font-body); font-size: 1rem; }
.tft-cs-subscribe input::placeholder { color: rgba(255,255,255,0.5); }
.tft-cs-subscribe input:focus { outline: none; }
.tft-cs-subscribe button { background: var(--svr-color-accent-gold); color: var(--svr-color-text-dark); border: none; padding: 15px 30px; border-radius: var(--svr-radius-pill); font-weight: 600; cursor: pointer; transition: background var(--svr-transition-fast); }
.tft-cs-subscribe button:hover { background: var(--svr-color-text-light); }

.tft-cs-social { display: flex; justify-content: center; gap: 20px; }
.tft-cs-social a { color: var(--svr-color-text-muted-light); font-size: 1.2rem; transition: color var(--svr-transition-fast); }
.tft-cs-social a:hover { color: var(--svr-color-accent-gold); }

/* Contact Page Layout */
.tft-contact-layout { padding: 0 40px 60px; max-width: 1200px; margin: 0 auto; }
.tft-contact-grid { display: flex; flex-wrap: wrap; gap: 60px; }
.tft-contact-info-col { flex: 1 1 35%; display: flex; flex-direction: column; gap: 30px; }
.tft-contact-form-col { flex: 1 1 55%; }

.tft-contact-card { background: var(--svr-color-bg-light); padding: 30px; border-radius: var(--svr-radius-md); border: 1px solid var(--svr-color-border-light); display: flex; flex-direction: column; align-items: flex-start; transition: all var(--svr-transition-fast); }
.tft-contact-card:hover { transform: translateX(10px); border-color: var(--svr-color-accent-gold); background: var(--svr-color-text-light); box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
.tft-contact-card i { font-size: 1.5rem; color: var(--svr-color-accent-gold); margin-block-end: 15px; }
.tft-contact-card h3 { font-family: var(--svr-font-heading); font-size: 1.5rem; color: var(--svr-color-text-dark); margin-block-end: 10px; }
.tft-contact-card p { color: var(--svr-color-text-muted-light); line-height: 1.6; }

.tft-contact-social { margin-block-start: 20px; padding-block-start: 30px; border-block-start: 1px solid var(--svr-color-border-light); }
.tft-contact-social span { display: block; font-weight: 600; color: var(--svr-color-text-dark); margin-block-end: 15px; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; }
.tft-social-links { display: flex; gap: 15px; }
.tft-social-links a { width: 40px; height: 40px; background: var(--svr-color-card-light); border: 1px solid var(--svr-color-border-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--svr-color-text-dark); transition: all var(--svr-transition-fast); }
.tft-social-links a:hover { background: var(--svr-color-accent-gold); color: var(--svr-color-text-light); border-color: var(--svr-color-accent-gold); }

.tft-form-wrapper { background: var(--svr-color-card-light); padding: 50px; border-radius: var(--svr-radius-lg); box-shadow: 0 20px 40px rgba(0,0,0,0.04); border: 1px solid var(--svr-color-border-light); }
.tft-form-wrapper h2 { font-family: var(--svr-font-heading); font-size: 2rem; color: var(--svr-color-text-dark); margin-block-end: 30px; border-block-end: 2px solid var(--svr-color-accent-gold); padding-block-end: 10px; display: inline-block; }

/* --- 21. $1 MILLION LUXURY WOOCOMMERCE CATALOG (LIGHT THEME) --- */

.tft-shop-page-wrapper { background-color: var(--svr-color-bg-light); padding-bottom: 60px; color: var(--svr-color-text-dark); }

/* Luxury Hero */
.tft-shop-hero { text-align: center; padding: 60px 20px; border-block-end: 1px solid var(--svr-color-border-light); margin-block-end: 60px; }
.tft-sh-badge { display: inline-block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--svr-color-accent-gold); border: 1px solid var(--svr-color-accent-gold); padding: 5px 15px; border-radius: var(--svr-radius-pill); margin-block-end: 20px; }
.tft-sh-title { font-family: var(--svr-font-heading); font-size: 4rem; color: var(--svr-color-text-dark); line-height: 1.1; margin-block-end: 15px; font-weight: 300; }
.tft-sh-title em { color: var(--svr-color-accent-gold); font-style: italic; }
.tft-sh-desc { max-width: 600px; margin: 0 auto; color: var(--svr-color-text-muted-light); font-size: 1.1rem; line-height: 1.6; }

/* Luxury Shop Layout */
.tft-luxury-shop-layout { display: flex; gap: 60px; padding: 0 40px; width: 100%; max-width: 1400px; margin: 0 auto; }
.tft-luxury-sidebar { flex: 0 0 260px; }
.tft-luxury-main { flex: 1; min-width: 0; width: 100%; }

/* Luxury Sidebar Widgets */
.tft-lux-widget { margin-block-end: 50px; }
.tft-lux-widget-title { font-family: var(--svr-font-heading); font-size: 1.5rem; color: var(--svr-color-text-dark); margin-block-end: 25px; padding-block-end: 15px; border-block-end: 1px solid var(--svr-color-border-light); position: relative; }
.tft-lux-widget-title::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 40px; height: 1px; background: var(--svr-color-accent-gold); }

.tft-lux-categories { list-style: none; padding: 0; margin: 0; }
.tft-lux-categories li { margin-block-end: 15px; display: flex; justify-content: space-between; align-items: center; }
.tft-lux-categories a { color: var(--svr-color-text-muted-light); font-size: 1rem; transition: color var(--svr-transition-fast); text-decoration: none; }
.tft-lux-categories a:hover { color: var(--svr-color-accent-gold); }
.tft-lux-categories .count { font-size: 0.8rem; color: var(--svr-color-text-light); background: var(--svr-color-accent-gold); padding: 2px 8px; border-radius: 10px; font-weight: 600; }

.tft-lux-price-slider .tft-lux-ps-track { height: 2px; background: var(--svr-color-border-light); position: relative; margin: 15px 0 25px; }
.tft-lux-ps-range { position: absolute; height: 100%; background: var(--svr-color-accent-gold); }
.tft-lux-ps-thumb { position: absolute; width: 14px; height: 14px; background: var(--svr-color-accent-gold); border-radius: 50%; top: 50%; transform: translate(-50%, -50%); cursor: pointer; box-shadow: 0 0 10px rgba(230, 185, 83, 0.3); }
.tft-lux-ps-info { display: flex; justify-content: space-between; align-items: center; color: var(--svr-color-text-dark); font-size: 0.9rem; font-weight: 500; }
.tft-btn-gold-outline { background: transparent; border: 1px solid var(--svr-color-accent-gold); color: var(--svr-color-accent-gold); padding: 5px 15px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; border-radius: var(--svr-radius-sm); cursor: pointer; transition: all var(--svr-transition-fast); }
.tft-btn-gold-outline:hover { background: var(--svr-color-accent-gold); color: var(--svr-color-text-light); }

.tft-lux-rating { list-style: none; padding: 0; margin: 0; }
.tft-lux-rating li { margin-block-end: 10px; }
.tft-lux-rating a { color: var(--svr-color-accent-gold); font-size: 0.9rem; letter-spacing: 2px; text-decoration: none; display: flex; align-items: center; gap: 8px; transition: opacity var(--svr-transition-fast); }
.tft-lux-rating a:hover { opacity: 0.7; }

/* Toolbar */
.tft-lux-toolbar { display: flex; justify-content: space-between; align-items: center; margin-block-end: 40px; padding-block-end: 20px; border-block-end: 1px solid var(--svr-color-border-light); }
.tft-lux-result-count { color: var(--svr-color-text-muted-light); font-size: 0.95rem; }
.tft-lux-ordering-wrap { position: relative; }
.tft-lux-ordering-wrap i { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--svr-color-accent-gold); pointer-events: none; font-size: 0.8rem; }
.tft-lux-orderby { appearance: none; background: transparent; border: 1px solid var(--svr-color-border-light); color: var(--svr-color-text-dark); padding: 10px 40px 10px 15px; border-radius: var(--svr-radius-sm); font-family: var(--svr-font-body); font-size: 0.9rem; cursor: pointer; outline: none; }
.tft-lux-orderby option { background: var(--svr-color-card-light); color: var(--svr-color-text-dark); }

/* Grid & Cards */
.tft-lux-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 40px; margin-block-end: 60px; }

.tft-lux-product-card { background: var(--svr-color-card-light); transition: all 0.4s ease; position: relative; border: 1px solid var(--svr-color-border-light); border-radius: var(--svr-radius-md); padding-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.tft-lux-product-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.05); }
.tft-lpc-image { position: relative; aspect-ratio: 1; border-top-left-radius: var(--svr-radius-md); border-top-right-radius: var(--svr-radius-md); overflow: hidden; background: #f5f5f5; margin-block-end: 20px; }
.tft-lpc-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tft-lux-product-card:hover .tft-lpc-image img { transform: scale(1.05); }

.tft-lpc-badge { position: absolute; top: 15px; left: 15px; background: rgba(255,255,255,0.9); color: var(--svr-color-accent-gold); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 5px 12px; border: 1px solid var(--svr-color-accent-gold); border-radius: var(--svr-radius-pill); z-index: 2; backdrop-filter: blur(5px); }
.tft-lpc-badge--out { color: #ff4757; border-color: #ff4757; }

.tft-lpc-overlay { position: absolute; inset: 0; background: rgba(255,255,255,0.6); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; opacity: 0; transition: opacity 0.4s ease; z-index: 3; }
.tft-lux-product-card:hover .tft-lpc-overlay { opacity: 1; }

.tft-lpc-action { background: var(--svr-color-accent-gold); color: var(--svr-color-text-light); display: block; text-align: center; padding: 12px; border-radius: var(--svr-radius-sm); font-weight: 600; text-decoration: none; transform: translateY(20px); transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tft-lpc-action:hover { background: var(--svr-color-text-dark); color: var(--svr-color-text-light); }
.tft-lux-product-card:hover .tft-lpc-action { transform: translateY(0); }

.tft-lpc-action-group { display: flex; justify-content: center; gap: 10px; margin-block-start: 10px; transform: translateY(20px); transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: 0.05s; }
.tft-lux-product-card:hover .tft-lpc-action-group { transform: translateY(0); }
.tft-lpc-action-group a { width: 40px; height: 40px; background: var(--svr-color-text-light); border: 1px solid var(--svr-color-border-light); color: var(--svr-color-text-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all var(--svr-transition-fast); text-decoration: none; }
.tft-lpc-action-group a:hover { background: var(--svr-color-accent-gold); color: var(--svr-color-text-light); border-color: var(--svr-color-accent-gold); }

.tft-lpc-content { text-align: center; padding: 0 15px; }
.tft-lpc-rating { color: var(--svr-color-accent-gold); font-size: 0.75rem; margin-block-end: 10px; letter-spacing: 1px; }
.tft-lpc-title { font-family: var(--svr-font-heading); font-size: 1.4rem; margin-block-end: 10px; font-weight: 400; }
.tft-lpc-title a { color: var(--svr-color-text-dark); text-decoration: none; transition: color var(--svr-transition-fast); }
.tft-lpc-title a:hover { color: var(--svr-color-accent-gold); }
.tft-lpc-price { display: block; color: var(--svr-color-accent-gold); font-size: 1.2rem; font-weight: 500; }
.tft-lpc-price del { color: var(--svr-color-text-muted-light); font-size: 0.9rem; margin-inline-end: 10px; }
.tft-lpc-price ins { text-decoration: none; }

.tft-lpc--out-of-stock .tft-lpc-image img { filter: grayscale(100%); opacity: 0.5; }

/* Pagination */
.tft-lux-pagination { margin-block-start: 60px; padding-block-start: 40px; border-block-start: 1px solid var(--svr-color-border-light); display: flex; justify-content: center; }
.tft-lux-page-numbers { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; align-items: center; }
.tft-lux-page-numbers a, .tft-lux-page-numbers span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: all var(--svr-transition-fast); }
.tft-lux-page-numbers a { color: var(--svr-color-text-dark); background: transparent; border: 1px solid var(--svr-color-border-light); }
.tft-lux-page-numbers a:hover { border-color: var(--svr-color-accent-gold); color: var(--svr-color-accent-gold); }
.tft-lux-page-numbers .current { background: var(--svr-color-accent-gold); color: var(--svr-color-text-light); border: 1px solid var(--svr-color-accent-gold); }

/* --- 21.5 LUXURY SINGLE PRODUCT (LIGHT THEME) --- */
.tft-lux-sp-layout { padding: 0 40px 60px; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 60px; }
.tft-lux-sp-top { display: flex; gap: 60px; }
.tft-lux-sp-gallery { flex: 1 1 50%; }
.tft-lux-sp-main-img { position: relative; border-radius: var(--svr-radius-md); overflow: hidden; background: #f5f5f5; border: 1px solid var(--svr-color-border-light); }
.tft-lux-sp-main-img img { width: 100%; display: block; opacity: 1; }
.tft-lux-sp-zoom { position: absolute; bottom: 20px; right: 20px; width: 50px; height: 50px; background: rgba(255,255,255,0.8); backdrop-filter: blur(5px); color: var(--svr-color-text-dark); border: 1px solid var(--svr-color-border-light); border-radius: 50%; cursor: pointer; font-size: 1.2rem; transition: all var(--svr-transition-fast); }
.tft-lux-sp-zoom:hover { background: var(--svr-color-accent-gold); color: var(--svr-color-text-light); border-color: var(--svr-color-accent-gold); }
.tft-lux-sp-thumbnails { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-block-start: 15px; }
.tft-lux-sp-thumbnails img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--svr-radius-sm); cursor: pointer; opacity: 0.6; transition: all var(--svr-transition-fast); border: 1px solid transparent; background: #f5f5f5; }
.tft-lux-sp-thumbnails img.active, .tft-lux-sp-thumbnails img:hover { opacity: 1; border-color: var(--svr-color-accent-gold); }

.tft-lux-sp-summary { flex: 1 1 50%; }
.tft-lux-breadcrumbs { font-size: 0.85rem; color: var(--svr-color-text-muted-light); margin-block-end: 20px; text-transform: uppercase; letter-spacing: 0.1em; }
.tft-lux-breadcrumbs a { color: var(--svr-color-text-dark); text-decoration: none; transition: color var(--svr-transition-fast); }
.tft-lux-breadcrumbs a:hover { color: var(--svr-color-accent-gold); }
.tft-lux-sp-title { font-family: var(--svr-font-heading); font-size: 3.5rem; color: var(--svr-color-text-dark); margin-block-end: 15px; line-height: 1.1; font-weight: 300; }
.tft-lux-sp-rating-box { display: flex; align-items: center; gap: 15px; margin-block-end: 20px; border-block-end: 1px solid var(--svr-color-border-light); padding-block-end: 20px; }
.tft-lux-sp-price { font-size: 2.5rem; font-weight: 500; color: var(--svr-color-accent-gold); margin-block-end: 30px; }
.tft-lux-sp-short-desc { font-size: 1.15rem; color: var(--svr-color-text-muted-light); line-height: 1.6; margin-block-end: 40px; }
.tft-lux-sp-short-desc ul { margin-block-start: 15px; padding-inline-start: 20px; }
.tft-lux-sp-short-desc li { margin-block-end: 10px; }

.tft-lux-sp-cart-form { display: flex; gap: 15px; margin-block-end: 40px; align-items: center; padding-block-end: 40px; border-block-end: 1px solid var(--svr-color-border-light); }
.tft-lux-sp-qty { display: flex; align-items: center; background: transparent; border: 1px solid var(--svr-color-border-light); border-radius: var(--svr-radius-sm); height: 55px; }
.tft-lux-qty-btn { width: 45px; height: 100%; background: transparent; border: none; cursor: pointer; font-size: 1.2rem; color: var(--svr-color-text-dark); transition: color var(--svr-transition-fast); }
.tft-lux-qty-btn:hover { color: var(--svr-color-accent-gold); }
.tft-lux-qty-input { width: 60px; height: 100%; border: none; background: transparent; text-align: center; font-size: 1.1rem; font-weight: 600; color: var(--svr-color-text-dark); outline: none; -moz-appearance: textfield; }
.tft-lux-qty-input::-webkit-outer-spin-button, .tft-lux-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tft-lux-btn-add { height: 55px; padding: 0 40px; background: var(--svr-color-accent-gold); color: var(--svr-color-text-light); border: none; border-radius: var(--svr-radius-sm); font-weight: 600; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: background var(--svr-transition-fast); }
.tft-lux-btn-add:hover { background: var(--svr-color-text-dark); }
.tft-lux-sp-wishlist { width: 55px; height: 55px; border: 1px solid var(--svr-color-border-light); background: transparent; border-radius: var(--svr-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--svr-color-text-dark); cursor: pointer; transition: all var(--svr-transition-fast); }
.tft-lux-sp-wishlist:hover { color: #ff4757; border-color: #ff4757; }

.tft-lux-sp-meta { font-size: 0.95rem; color: var(--svr-color-text-muted-light); }
.tft-lux-sp-meta span { display: block; margin-block-end: 15px; }
.tft-lux-sp-meta a { color: var(--svr-color-text-dark); text-decoration: none; transition: color var(--svr-transition-fast); }
.tft-lux-sp-meta a:hover { color: var(--svr-color-accent-gold); }

/* Product Tabs */
.tft-lux-sp-tabs-wrapper { margin-block-start: 40px; }
.tft-lux-sp-tabs-nav { display: flex; justify-content: center; gap: 50px; list-style: none; margin-block-end: 50px; border-block-end: 1px solid var(--svr-color-border-light); }
.tft-lux-sp-tabs-nav a { display: block; padding-block-end: 20px; font-weight: 500; font-size: 1.1rem; color: var(--svr-color-text-muted-light); text-transform: uppercase; letter-spacing: 0.1em; border-block-end: 2px solid transparent; transition: all var(--svr-transition-fast); text-decoration: none; }
.tft-lux-sp-tabs-nav a.active, .tft-lux-sp-tabs-nav a:hover { color: var(--svr-color-accent-gold); border-color: var(--svr-color-accent-gold); }
.tft-lux-sp-tab-content { max-width: 900px; margin: 0 auto; color: var(--svr-color-text-muted-light); line-height: 1.8; font-size: 1.05rem; }
.tft-lux-sp-tab-content h2 { font-family: var(--svr-font-heading); font-size: 2.5rem; color: var(--svr-color-text-dark); margin-block-end: 30px; font-weight: 300; }

/* --- 22. GLOBAL TEXT COLOR FIX FOR LIGHT THEME CONTENT --- */
/* Since body is dark and main-content is light, we must enforce dark text globally in the main content area */
.svr-main-content {
    color: var(--svr-color-text-dark);
}

.tft-page-header h1,
.tft-contact-title {
    color: var(--svr-color-text-dark);
}

.tft-form-group input, 
.tft-form-group textarea,
.tft-form-group select,
.tft-search-form input,
.tft-coupon-input,
.tft-qty-input,
.tft-comment-form input,
.tft-comment-form textarea,
.tft-checkout-billing input,
.tft-checkout-billing select {
    color: var(--svr-color-text-dark);
}

.tft-totals-table th,
.tft-totals-table td,
.tft-checkout-table th,
.tft-checkout-table td,
.tft-sp-short-desc,
.tft-faq-body {
    color: var(--svr-color-text-dark);
}


/* --- 23. DROPDOWN MENUS (APPENDED PER RULE 2) --- */
.svr-has-dropdown {
    position: relative;
    padding-bottom: 20px;
    margin-bottom: -20px;
    cursor: pointer;
}

.svr-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #111111; /* Deep dark for premium feel */
    border: 1px solid var(--svr-color-border-dark);
    border-radius: var(--svr-radius-md);
    padding: 15px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 100;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.svr-has-dropdown:hover .svr-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.svr-dropdown-menu a {
    display: block;
    padding: 12px 25px;
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--svr-transition-fast);
    letter-spacing: 0.03em;
}

.svr-dropdown-menu a:hover {
    color: var(--svr-color-accent-gold);
    background: rgba(255,255,255,0.03);
    padding-left: 30px;
}

/* Ensure top link stays active while hovering dropdown */
.svr-has-dropdown:hover > .svr-top-nav__link {
    opacity: 1;
    color: var(--svr-color-accent-gold);
}

.svr-has-dropdown:hover > .svr-top-nav__link::after {
    width: 100%;
}

/* --- 24. SIDEBAR ACCORDIONS --- */
.svr-nav-accordion {
    width: 100%;
}

.svr-nav-accordion summary {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 20px;
    color: var(--svr-color-text-muted-light);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--svr-radius-md);
    transition: all var(--svr-transition-fast);
    list-style: none; /* Hide default arrow */
    position: relative;
}

.svr-nav-accordion summary::-webkit-details-marker {
    display: none;
}

.svr-nav-accordion summary:hover {
    color: var(--svr-color-text-light);
    background: rgba(255, 255, 255, 0.03);
}

.svr-nav-accordion summary i:last-child {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.svr-nav-accordion[open] summary i:last-child {
    transform: rotate(90deg);
}

.svr-nav-accordion[open] summary {
    color: var(--svr-color-accent-gold);
}

.svr-nav-accordion[open] summary i:first-child {
    color: var(--svr-color-accent-gold);
}

.svr-nav-accordion__content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px 0 10px 48px; /* Indented to match icon width */
}

.svr-nav-accordion__link {
    color: var(--svr-color-text-muted-light);
    font-size: 0.85rem;
    text-decoration: none;
    padding: 6px 0;
    transition: all var(--svr-transition-fast);
    display: block;
}

.svr-nav-accordion__link:hover {
    color: var(--svr-color-accent-gold);
    transform: translateX(4px);
}

/* --- 25. WOOCOMMERCE ADVANCED FEATURES --- */

/* View Toggles */
.tft-lux-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tft-lux-view-btn {
    background: transparent;
    border: 1px solid var(--svr-color-border-light);
    color: var(--svr-color-text-muted-light);
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--svr-radius-sm);
    cursor: pointer;
    transition: all var(--svr-transition-fast);
}

.tft-lux-view-btn:hover, .tft-lux-view-btn.active {
    background: var(--svr-color-text-dark);
    color: #fff;
    border-color: var(--svr-color-text-dark);
}

/* Swatches */
.tft-lpc-swatches {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 15px;
}

.tft-swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--svr-color-border-light);
    transition: all var(--svr-transition-fast);
}

.tft-swatch:hover, .tft-swatch.active {
    box-shadow: 0 0 0 1px var(--svr-color-text-dark);
    transform: scale(1.2);
}

/* Promo Banner inside Grid */
.tft-lux-promo-banner {
    display: flex;
    background: var(--svr-color-text-dark);
    border-radius: var(--svr-radius-md);
    overflow: hidden;
    position: relative;
    padding: 40px;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
}

.tft-lpb-content {
    flex: 1;
    max-width: 50%;
    color: #fff;
    position: relative;
    z-index: 2;
}

.tft-lpb-subtitle {
    color: var(--svr-color-accent-gold);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
}

.tft-lpb-content h2 {
    font-family: var(--svr-font-heading);
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: #fff;
}

.tft-lpb-content p {
    color: rgba(255,255,255,0.7);
    margin-bottom: 25px;
    line-height: 1.6;
}

.tft-lpb-countdown {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.tft-lpb-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.6);
}

.tft-lpb-time span {
    font-size: 1.8rem;
    font-family: var(--svr-font-heading);
    color: var(--svr-color-accent-gold);
    font-weight: 600;
    margin-bottom: 5px;
}

.tft-lpb-img {
    position: absolute;
    right: -5%;
    top: -20%;
    width: 60%;
    height: 140%;
    object-fit: contain;
    z-index: 1;
    transform: rotate(5deg);
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));
}

/* Tooltips for Action Group */
.tft-lpc-action-group a {
    position: relative;
}
.tft-lpc-action-group a[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    background: var(--svr-color-text-dark);
    color: #fff;
    padding: 5px 10px;
    font-size: 0.65rem;
    border-radius: var(--svr-radius-sm);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    animation: fadeInTooltip 0.2s forwards;
    letter-spacing: 0.05em;
    font-weight: 600;
}
/* ==========================================================================
   USER OVERRIDES
   ========================================================================== */

/* Disable sticky menu globally per user request */
.svr-top-nav {
    position: relative !important;
    top: auto !important;
}

@keyframes fadeInTooltip {
    to { opacity: 1; transform: translateX(-50%) translateY(-8px); }
}

/* Tooltip Fix */
.tft-lpc-action-group a[title]:hover::after {
    z-index: 100;
}

/* List View Overrides Cleaned */

/* Premium Pill Pagination Overrides */
.tft-lux-pagination {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    width: 100%;
}
.tft-lux-page-numbers {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    list-style: none !important;
    margin: 0 auto !important;
    background: #fff !important;
    border-radius: 50px !important;
    padding: 8px 16px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
    border: 1px solid var(--svr-color-border-light) !important;
}

.tft-lux-page-numbers li a,
.tft-lux-page-numbers li span.current {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    border: none !important;
    background: transparent !important;
    color: var(--svr-color-text-muted) !important;
    position: relative !important;
}

.tft-lux-page-numbers li span.current {
    color: var(--svr-color-text-dark) !important;
    font-weight: 700 !important;
}

/* Elegant dot indicator for active page */
.tft-lux-page-numbers li span.current::after {
    content: '' !important;
    position: absolute !important;
    bottom: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 4px !important;
    height: 4px !important;
    background: var(--svr-color-accent-gold) !important;
    border-radius: 50% !important;
}

.tft-lux-page-numbers li a:hover {
    color: var(--svr-color-accent-gold) !important;
    background: rgba(230, 185, 83, 0.05) !important;
    transform: translateY(-2px) !important;
}

/* List View Width Fix (Ultra Forceful) */
.tft-luxury-main {
    min-width: 0 !important; /* Prevent flex blowout or shrink */
}

.tft-lux-products-grid.tft-lux-products-grid--list {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    clear: both !important;
}

.tft-lux-products-grid--list .tft-lux-product-card {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    align-items: center !important;
    padding: 20px !important;
    margin-bottom: 40px !important;
    box-sizing: border-box !important;
}

.tft-lux-products-grid--list .tft-lux-promo-banner {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    margin-bottom: 40px !important;
    box-sizing: border-box !important;
}

.tft-lux-products-grid--list .tft-lpc-image {
    width: 300px !important;
    min-width: 300px !important;
    flex: 0 0 300px !important;
    margin-block-end: 0 !important;
    border-radius: var(--svr-radius-md) 0 0 var(--svr-radius-md) !important;
}

.tft-lux-products-grid--list .tft-lpc-content {
    flex: 1 1 auto !important;
    width: 100% !important;
    padding: 30px 40px !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

.tft-lux-products-grid--list .tft-lpc-swatches {
    justify-content: flex-start !important;
}

/* Price Slider Overlap Fix */
.tft-lux-ps-track {
    margin: 20px 0 35px !important;
}
.tft-lux-ps-info {
    margin-top: 15px !important;
}

/* Tooltip Edge Clip Fix */
.tft-lpc-action-group a[title]:last-child:hover::after {
    left: auto;
    right: 0;
    transform: translateY(-8px);
}

/* --------------------------------------------------------
   LUXURY WIDGET REFINEMENTS
-------------------------------------------------------- */

/* Widget Title Redesign */
.tft-lux-widget-title {
    font-family: var(--svr-font-heading) !important;
    font-size: 1.15rem !important;
    color: var(--svr-color-text-dark) !important;
    margin-block-end: 35px !important;
    padding-block-end: 0 !important;
    border-block-end: none !important;
    position: relative !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    display: flex !important;
    align-items: center !important;
}
.tft-lux-widget-title::before {
    content: '' !important;
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    background: var(--svr-color-accent-gold) !important;
    transform: rotate(45deg) !important;
    margin-right: 15px !important;
}
.tft-lux-widget-title::after {
    display: none !important;
}

/* Categories Refinement (Dot Leader) */
.tft-lux-categories li {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    transition: transform 0.3s ease !important;
}
.tft-lux-categories li:hover {
    transform: translateX(4px) !important;
}
.tft-lux-categories li::after {
    content: '' !important;
    flex-grow: 1 !important;
    border-bottom: 1px dotted var(--svr-color-border-light) !important;
    margin: 0 10px !important;
    order: 2 !important;
    opacity: 0.6 !important;
    transition: opacity var(--svr-transition-fast) !important;
}
.tft-lux-categories li:hover::after {
    opacity: 1 !important;
    border-bottom-color: var(--svr-color-accent-gold) !important;
}
.tft-lux-categories li a {
    color: var(--svr-color-text-dark) !important;
    transition: color var(--svr-transition-fast) !important;
    order: 1 !important;
    font-weight: 500 !important;
}
.tft-lux-categories li a:hover {
    color: var(--svr-color-accent-gold) !important;
}
.tft-lux-categories li span.count {
    background: transparent !important;
    color: var(--svr-color-text-muted) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    order: 3 !important;
    border: none !important;
    padding: 0 !important;
    transition: transform 0.3s ease, color 0.3s ease !important;
}
.tft-lux-categories li:hover span.count {
    color: var(--svr-color-accent-gold) !important;
    transform: scale(1.1) !important;
}

/* Sidebar Banner */
.tft-lux-sidebar-banner {
    background: var(--svr-color-card-light);
    border: 1px solid var(--svr-color-border-light);
    padding: 40px 30px;
    text-align: center;
    border-radius: var(--svr-radius-md);
    position: relative;
    overflow: hidden;
    margin-top: 20px;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
    cursor: pointer;
}
.tft-lux-sidebar-banner:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    border-color: var(--svr-color-accent-gold);
}
.tft-lux-sidebar-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--svr-color-accent-gold);
}
.tft-lux-sidebar-banner::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
}
@keyframes shineBanner {
    100% { left: 200%; }
}
.tft-lux-sidebar-banner:hover::after {
    animation: shineBanner 1s forwards;
}
.tft-lux-sidebar-banner:hover .tft-btn-gold-outline {
    background: var(--svr-color-accent-gold);
    color: #fff;
}
.tft-lsb-subtitle {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--svr-color-accent-gold);
    margin-bottom: 12px;
    font-weight: 600;
}
.tft-lsb-title {
    font-family: var(--svr-font-heading);
    font-size: 1.8rem;
    color: var(--svr-color-text-dark);
    margin-bottom: 15px;
    line-height: 1.1;
}
.tft-lsb-desc {
    font-size: 0.85rem;
    color: var(--svr-color-text-muted);
    margin-bottom: 25px;
    line-height: 1.6;
}

/* Checkbox List (Collections) */
.tft-lux-checkbox-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tft-lux-checkbox-list li {
    margin-bottom: 12px;
}
.tft-lux-checkbox-list li:last-child {
    margin-bottom: 0;
}
.tft-checkbox-wrap {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--svr-color-text-dark);
    user-select: none;
    transition: all 0.3s ease;
}
.tft-checkbox-wrap:hover {
    color: var(--svr-color-accent-gold);
    transform: translateX(4px);
}
.tft-checkbox-wrap input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.tft-checkmark {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 18px;
    width: 18px;
    background-color: transparent;
    border: 1px solid var(--svr-color-border-light);
    border-radius: 3px;
    transition: all var(--svr-transition-fast);
}
.tft-checkbox-wrap:hover input ~ .tft-checkmark {
    border-color: var(--svr-color-accent-gold);
}
.tft-checkbox-wrap input:active ~ .tft-checkmark {
    transform: translateY(-50%) scale(0.85);
}
.tft-checkbox-wrap input:checked ~ .tft-checkmark {
    background-color: var(--svr-color-accent-gold);
    border-color: var(--svr-color-accent-gold);
    transform: translateY(-50%) scale(1.05);
}
.tft-checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 4px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.tft-checkbox-wrap input:checked ~ .tft-checkmark:after {
    display: block;
    animation: checkpop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes checkpop {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    100% { transform: scale(1) rotate(45deg); opacity: 1; }
}

/* Popular Tags */
.tft-lux-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tft-lux-tags a {
    display: inline-block;
    padding: 6px 15px;
    background: transparent;
    border: 1px solid var(--svr-color-border-light);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--svr-color-text-muted);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tft-lux-tags a:hover {
    background: var(--svr-color-accent-gold);
    color: #fff;
    border-color: var(--svr-color-accent-gold);
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 6px 15px rgba(230, 185, 83, 0.3);
}

/* Rating Widget Refinement */
.tft-lux-rating li a {
    color: var(--svr-color-text-muted);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}
.tft-lux-rating li a:hover {
    color: var(--svr-color-text-dark);
    transform: translateX(5px);
}
.tft-lux-rating li a i {
    color: #f5c518; /* Classic gold star color */
    margin-right: 2px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.tft-lux-rating li a:hover i {
    transform: scale(1.15);
}

/* ==========================================================================
   PRODUCT CARD EDITORIAL REDESIGN
   ========================================================================== */

/* Base Card */
.tft-lux-product-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--svr-color-text-dark) !important;
    box-shadow: none !important;
    padding-bottom: 10px !important;
}
.tft-lux-product-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: none !important;
}

/* Image Wrapper (Radiused) */
.tft-lpc-image {
    border-radius: 24px !important;
    overflow: hidden !important;
    margin-block-end: 24px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
}

/* Overlay (Darker for contrast) */
.tft-lpc-overlay {
    background: rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
}

/* Add to Cart Button (Floating Pill) */
.tft-lpc-action {
    background: #111 !important;
    color: var(--svr-color-accent-gold) !important;
    border-radius: 30px !important;
    position: absolute !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 20px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 14px !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.15em !important;
    transform: translateY(150%) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
    text-align: center !important;
}
.tft-lpc-action:hover {
    background: var(--svr-color-accent-gold) !important;
    color: #fff !important;
    transform: translateY(0) scale(1.02) !important;
}
.tft-lux-product-card:hover .tft-lpc-action {
    transform: translateY(0) !important;
}

/* Action Group (Quick View / Wishlist - Top Right Stack) */
.tft-lpc-action-group {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    flex-direction: column !important;
    margin: 0 !important;
    transform: translateX(30px) !important;
    opacity: 0 !important;
    gap: 10px !important;
}
.tft-lux-product-card:hover .tft-lpc-action-group {
    transform: translateX(0) !important;
    opacity: 1 !important;
}
.tft-lpc-action-group a {
    background: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
}
.tft-lpc-action-group a:hover {
    background: #111 !important;
    color: var(--svr-color-accent-gold) !important;
    transform: scale(1.1) !important;
}

/* Reposition Tooltips to Left of Buttons */
.tft-lpc-action-group a[title]:hover::after {
    bottom: auto !important;
    top: 50% !important;
    left: auto !important;
    right: 100% !important;
    transform: translateY(-50%) translateX(-12px) !important;
    margin-right: 5px !important;
}

/* Badge (Best Seller, etc. - Pill Shape) */
.tft-lpc-badge {
    background: #fff !important;
    color: var(--svr-color-text-dark) !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 6px 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    backdrop-filter: none !important;
    top: 20px !important;
    left: 20px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}
.tft-lpc-badge.tft-lpc-badge--out {
    background: #111 !important;
    color: #fff !important;
}

/* Content Area */
.tft-lpc-content {
    text-align: left !important;
    padding: 0 10px !important;
    margin-top: 10px !important;
}

/* Rating (Gold) */
.tft-lpc-rating {
    font-size: 0.8rem !important;
    margin-block-end: 10px !important;
    color: #f5c518 !important; /* Gold stars */
    letter-spacing: 2px !important;
}

/* Title */
.tft-lpc-title {
    font-family: var(--svr-font-heading) !important;
    font-size: 1.6rem !important;
    margin-block-end: 8px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
}
.tft-lpc-title a {
    color: var(--svr-color-text-dark) !important;
}

/* Price */
.tft-lpc-price {
    font-family: var(--svr-font-body) !important;
    font-size: 1.2rem !important;
    color: var(--svr-color-text-muted) !important;
    font-weight: 400 !important;
}

/* List View Overrides Compatibility */
.tft-lux-products-grid--list .tft-lux-product-card {
    padding: 0 !important;
    border-bottom: 1px solid var(--svr-color-border-light) !important;
    padding-bottom: 50px !important;
    align-items: center !important;
    background: transparent !important;
}
.tft-lux-products-grid--list .tft-lux-product-card:last-child {
    border-bottom: none !important;
}
.tft-lux-products-grid--list .tft-lpc-image {
    margin-block-end: 0 !important;
    width: 320px !important;
    min-width: 320px !important;
    flex: 0 0 320px !important;
    border-radius: 24px !important;
}
.tft-lux-products-grid--list .tft-lpc-content {
    padding-left: 60px !important;
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
}
.tft-lux-products-grid--list .tft-lpc-title {
    font-size: 2.2rem !important;
    margin-block-end: 15px !important;
}
.tft-lux-products-grid--list .tft-lpc-price {
    font-size: 1.4rem !important;
}
.tft-lux-products-grid--list .tft-lpc-rating {
    font-size: 0.9rem !important;
    margin-block-end: 15px !important;
}

/* ==========================================================================
   SINGLE PRODUCT EDITORIAL REDESIGN (TRUE SPLIT SCREEN)
   ========================================================================== */

/* Main Layout - Massive Full Width Split Screen */
.tft-single-product-wrapper {
    max-width: 100% !important;
    padding: 0 !important;
}
.tft-lux-sp-layout {
    max-width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
}
.tft-lux-sp-top {
    gap: 0 !important;
    align-items: flex-start !important; /* Required for sticky to work */
}

/* Gallery Redesign - Edge to Edge Sticky Left */
.tft-lux-sp-gallery {
    flex: 0 0 50vw !important;
    max-width: 50vw !important;
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    align-self: flex-start !important;
    display: flex !important;
    flex-direction: column !important;
}
.tft-lux-sp-main-img {
    height: 100vh !important;
    width: 100% !important;
    border-radius: 0 !important;
    color: var(--svr-color-text-dark) !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
.tft-lux-sp-main-img img {
    height: 100vh !important;
    width: 100% !important;
    object-fit: cover !important;
}
.tft-lux-sp-zoom {
    top: 30px !important;
    right: 30px !important;
    bottom: auto !important;
    background: rgba(255,255,255,0.9) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}

/* Thumbnails floating over main image in glassmorphism pill */
.tft-lux-sp-thumbnails {
    position: absolute !important;
    bottom: 40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(15px) !important;
    padding: 15px !important;
    border-radius: 24px !important;
    gap: 15px !important;
    margin-block-start: 0 !important;
    display: flex !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1) !important;
    z-index: 10 !important;
}
.tft-lux-sp-thumbnails img {
    width: 70px !important;
    height: 70px !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
    border: 2px solid transparent !important;
    opacity: 0.6 !important;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.tft-lux-sp-thumbnails img.active,
.tft-lux-sp-thumbnails img:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
    opacity: 1 !important;
    border-color: var(--svr-color-accent-gold) !important;
}

/* Content Redesign - Scrolling Right Column */
.tft-lux-sp-content-right {
    flex: 0 0 50vw !important;
    max-width: 50vw !important;
    padding: 120px 8% 120px 8% !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    min-height: 100vh !important;
}
.tft-lux-sp-summary {
    position: static !important;
    margin-bottom: 60px !important;
}

/* Typography & Info */
.tft-lux-breadcrumbs {
    display: inline-flex !important;
    align-items: center !important;
    background: #f5f5f5 !important;
    padding: 6px 20px !important;
    border-radius: 50px !important;
    font-size: 0.75rem !important;
    color: var(--svr-color-text-muted) !important;
    margin-bottom: 35px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}
.tft-lux-breadcrumbs a {
    color: var(--svr-color-text-dark) !important;
}
.tft-lux-sp-title {
    font-weight: 400 !important;
    font-size: 4rem !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
    margin-block-end: 25px !important;
}
.tft-lux-sp-rating-box {
    border: none !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
}
.tft-lux-sp-price {
    font-size: 3rem !important;
    color: var(--svr-color-text-dark) !important;
    font-weight: 300 !important;
    margin-block-end: 30px !important;
    font-family: var(--svr-font-heading) !important;
    letter-spacing: -0.02em !important;
}
.tft-lux-sp-short-desc {
    color: var(--svr-color-text-muted) !important;
    font-size: 1.15rem !important;
    line-height: 1.8 !important;
    margin-bottom: 50px !important;
}

/* Form & Actions Redesign */
.tft-lux-sp-cart-form {
    border-block-end: none !important;
    padding-block-end: 0 !important;
    margin-block-end: 40px !important;
    display: flex !important;
    gap: 20px !important;
}
.tft-lux-sp-qty {
    border-radius: 50px !important;
    background: #f5f5f5 !important;
    border: none !important;
    height: 65px !important;
    padding: 0 15px !important;
    min-width: 140px !important;
    justify-content: space-between !important;
}
.tft-lux-qty-btn {
    font-size: 1.5rem !important;
    font-weight: 300 !important;
    color: var(--svr-color-text-muted) !important;
}
.tft-lux-qty-btn:hover {
    color: var(--svr-color-text-dark) !important;
}
.tft-lux-qty-input {
    font-size: 1.2rem !important;
    background: transparent !important;
}
.tft-lux-btn-add {
    border-radius: 50px !important;
    background: #111 !important;
    color: #fff !important;
    height: 65px !important;
    padding: 0 50px !important;
    font-size: 1rem !important;
    letter-spacing: 0.15em !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    flex-grow: 1 !important;
}
.tft-lux-btn-add:hover {
    background: var(--svr-color-accent-gold) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 45px rgba(230, 185, 83, 0.3) !important;
}
.tft-lux-sp-wishlist {
    border-radius: 50% !important;
    width: 65px !important;
    height: 65px !important;
    border: 1px solid var(--svr-color-border-light) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02) !important;
    flex-shrink: 0 !important;
}
.tft-lux-sp-wishlist:hover {
    background: #fff !important;
    color: #ff4757 !important;
    border-color: #fff !important;
    box-shadow: 0 15px 30px rgba(255, 71, 87, 0.2) !important;
    transform: scale(1.1) !important;
}

/* Meta Data */
.tft-lux-sp-meta {
    border-top: 1px solid var(--svr-color-border-light) !important;
    padding-top: 40px !important;
    margin-top: 50px !important;
    font-size: 0.9rem !important;
}

/* ==========================================================================
   BLOG EDITORIAL REDESIGN (PREMIUM ASYMMETRICAL & GRID)
   ========================================================================== */

/* Featured Premium Card Redesign */
.tft-blog-featured-premium {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 80px !important;
    background: #f8f8f8 !important;
    border-radius: 32px !important;
    position: relative !important;
    min-height: 500px !important;
    border: 1px solid var(--svr-color-border-light) !important;
}
.tft-bfp-content {
    flex: 1 !important;
    padding: 60px 80px !important;
    position: relative !important;
    z-index: 2 !important;
}
.tft-bfp-badge {
    background: #111 !important;
    color: #fff !important;
    padding: 6px 16px !important;
    border-radius: 50px !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    margin-bottom: 30px !important;
    display: inline-block !important;
}
.tft-bfp-title {
    font-family: var(--svr-font-heading) !important;
    font-size: 3.5rem !important;
    line-height: 1.1 !important;
    color: var(--svr-color-text-dark) !important;
    margin-bottom: 25px !important;
    letter-spacing: -0.02em !important;
}
.tft-bfp-excerpt {
    font-size: 1.15rem !important;
    color: var(--svr-color-text-muted) !important;
    line-height: 1.8 !important;
    margin-bottom: 40px !important;
}
.tft-bfp-meta-row {
    display: flex !important;
    align-items: center !important;
    gap: 30px !important;
    margin-bottom: 40px !important;
}
.tft-bfp-rating {
    color: var(--svr-color-accent-gold) !important;
    font-size: 0.9rem !important;
}
.tft-bfp-rating span {
    color: var(--svr-color-text-dark) !important;
    margin-left: 10px !important;
    font-weight: 500 !important;
}
.tft-bfp-details {
    display: flex !important;
    gap: 20px !important;
    color: var(--svr-color-text-muted) !important;
    font-size: 0.9rem !important;
}
.tft-bfp-details span i {
    margin-right: 8px !important;
}
.tft-bfp-actions {
    display: flex !important;
    gap: 20px !important;
}
.tft-bfp-actions .tft-btn-primary {
    background: #111 !important;
    color: #fff !important;
    padding: 18px 40px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    transition: all 0.3s ease !important;
}
.tft-bfp-actions .tft-btn-primary:hover {
    background: var(--svr-color-accent-gold) !important;
    transform: translateY(-3px) !important;
}
.tft-bfp-actions .tft-btn-outline {
    background: transparent !important;
    border: 1px solid var(--svr-color-border-light) !important;
    padding: 18px 30px !important;
    border-radius: 50px !important;
    color: var(--svr-color-text-dark) !important;
    font-weight: 500 !important;
}

.tft-bfp-image-wrapper {
    flex: 1 !important;
    height: 100% !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 55% !important;
    overflow: hidden !important;
    border-radius: 0 32px 32px 0 !important;
}
.tft-bfp-image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.tft-bfp-floating-bar {
    position: absolute !important;
    right: -30px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #fff !important;
    border-radius: 20px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 20px 10px !important;
    gap: 20px !important;
    z-index: 10 !important;
}
.tft-bfp-floating-bar button {
    background: none !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--svr-color-text-muted) !important;
    font-size: 0.6rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}
.tft-bfp-floating-bar button i {
    font-size: 1.2rem !important;
    color: var(--svr-color-text-dark) !important;
}
.tft-bfp-floating-bar button:hover i {
    color: var(--svr-color-accent-gold) !important;
}
.tft-bfp-bar-stats {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    border-top: 1px solid var(--svr-color-border-light) !important;
    padding-top: 20px !important;
    margin-top: 10px !important;
}
.tft-bfp-bar-stats strong {
    font-size: 1.2rem !important;
    color: var(--svr-color-text-dark) !important;
}
.tft-bfp-bar-stats span {
    font-size: 0.6rem !important;
    text-transform: uppercase !important;
    color: var(--svr-color-text-muted) !important;
}

/* Grid Cards Minimal Redesign */
.tft-blog-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px !important;
}
.tft-post-card {
    background: transparent !important;
    border-radius: 0 !important;
    color: var(--svr-color-text-dark) !important;
    box-shadow: none !important;
    border: none !important;
}
.tft-post-card:hover {
    transform: none !important;
    box-shadow: none !important;
}
.tft-post-card-img {
    height: 250px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    margin-bottom: 25px !important;
}
.tft-post-card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s ease !important;
}
.tft-post-card:hover .tft-post-card-img img {
    transform: scale(1.05) !important;
}
.tft-post-cat {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    background: rgba(0,0,0,0.8) !important;
    backdrop-filter: blur(5px) !important;
    color: #fff !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}
.tft-post-card-content {
    padding: 0 !important;
}
.tft-post-title {
    font-family: var(--svr-font-heading) !important;
    font-size: 1.6rem !important;
    line-height: 1.3 !important;
    margin-bottom: 15px !important;
    color: var(--svr-color-text-dark) !important;
}
.tft-post-excerpt {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: var(--svr-color-text-muted) !important;
    margin-bottom: 20px !important;
}

/* Pagination Adjustments for Blog */
.tft-blog-layout .tft-lux-pagination {
    margin-top: 80px !important;
    padding-top: 40px !important;
    border-top: 1px solid var(--svr-color-border-light) !important;
}

/* Editorial Scrolling Content (Replaces Tabs) */
.tft-lux-sp-editorial-content {
    margin-top: 60px !important;
}
.tft-lux-sp-section {
    padding-bottom: 50px !important;
}
.tft-lux-sp-section h2 {
    font-size: 2.5rem !important;
    font-family: var(--svr-font-heading) !important;
    font-weight: 300 !important;
    margin-bottom: 30px !important;
    color: var(--svr-color-text-dark) !important;
    letter-spacing: -0.02em !important;
}
.tft-lux-sp-section p {
    font-size: 1.15rem !important;
    line-height: 1.8 !important;
    color: var(--svr-color-text-muted) !important;
}
.tft-lux-divider {
    border: none !important;
    border-top: 1px solid var(--svr-color-border-light) !important;
    margin: 10px 0 60px 0 !important;
}
.tft-lux-specs-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.tft-lux-specs-list li {
    padding: 20px 0 !important;
    border-bottom: 1px solid var(--svr-color-border-light) !important;
    display: flex !important;
    align-items: center !important;
    font-size: 1.1rem !important;
    color: var(--svr-color-text-dark) !important;
}
.tft-lux-specs-list li:last-child {
    border-bottom: none !important;
}
.tft-lux-specs-list li strong {
    width: 200px !important;
    flex-shrink: 0 !important;
    font-weight: 600 !important;
    color: var(--svr-color-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.9rem !important;
}

/* ==========================================================================
   BLOG EDITORIAL BENTO BOXES & COLLECTIONS
   ========================================================================== */

/* Section Headers */
.tft-section-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 60px 0 30px 0 !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid var(--svr-color-border-light) !important;
}
.tft-section-header h3 {
    font-size: 1.5rem !important;
    font-family: var(--svr-font-heading) !important;
    color: var(--svr-color-text-dark) !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
}
.tft-section-header a {
    font-size: 0.8rem !important;
    color: var(--svr-color-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-weight: 600 !important;
}
.tft-section-header a:hover {
    color: var(--svr-color-accent-gold) !important;
}

/* Collections Row */
.tft-collections-row {
    display: flex !important;
    gap: 20px !important;
    overflow-x: auto !important;
    padding-bottom: 20px !important;
}
.tft-collections-row::-webkit-scrollbar {
    height: 4px !important;
}
.tft-collections-row::-webkit-scrollbar-thumb {
    background: var(--svr-color-border-dark) !important;
    border-radius: 10px !important;
}
.tft-collection-card {
    min-width: 180px !important;
    background: #fcfcfc !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
    text-decoration: none !important;
    color: inherit !important;
    border-radius: 16px !important;
    padding: 30px 20px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}
.tft-collection-card:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
    border-color: var(--svr-color-accent-gold) !important;
    transform: translateY(-5px) !important;
}
.tft-collection-card i {
    font-size: 2rem !important;
    color: var(--svr-color-accent-gold) !important;
    margin-bottom: 15px !important;
}
.tft-collection-card h4 {
    font-size: 1rem !important;
    margin-bottom: 5px !important;
}
.tft-collection-card span {
    font-size: 0.8rem !important;
    color: var(--svr-color-text-muted) !important;
}

/* Asymmetrical Magazine Grid */
.tft-blog-grid-asymmetrical {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: minmax(280px, auto) !important;
    gap: 30px !important;
}
.tft-compact-card {
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Modifier: Large Feature Card (spans 2x2) */
.tft-card-large {
    grid-column: span 2 !important;
    grid-row: span 2 !important;
}
.tft-card-large .tft-cc-img {
    height: 480px !important;
}
.tft-card-large .tft-cc-title {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
    margin-bottom: 15px !important;
}
.tft-card-large .tft-cc-excerpt {
    font-size: 1rem !important;
    color: var(--svr-color-text-muted) !important;
    margin-bottom: 15px !important;
    line-height: 1.5 !important;
    display: block !important;
}

/* Modifier: Tall Card (spans 2 rows) */
.tft-card-tall {
    grid-row: span 2 !important;
}
.tft-card-tall .tft-cc-img {
    height: 480px !important;
}

/* Image Wrappers */
.tft-cc-img {
    height: 220px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    position: relative !important;
    margin-bottom: 20px !important;
}
.tft-cc-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
}
.tft-compact-card:hover .tft-cc-img img {
    transform: scale(1.05) !important;
}
.tft-cc-save {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    background: rgba(255,255,255,0.9) !important;
    border: none !important;
    border-radius: 50px !important;
    width: 35px !important;
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    z-index: 5 !important;
}
.tft-cc-save:hover {
    background: var(--svr-color-accent-gold) !important;
    color: #fff !important;
}
.tft-cc-content {
    padding: 0 5px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}
.tft-cc-excerpt {
    display: none !important; /* hidden by default on small cards */
}
.tft-cc-title {
    font-size: 1.25rem !important;
    font-family: var(--svr-font-heading) !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
    color: var(--svr-color-text-dark) !important;
}
.tft-cc-meta {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 0.85rem !important;
    color: var(--svr-color-text-muted) !important;
    margin-top: auto !important;
}

/* Bento Box Section */
.tft-blog-bento-section {
    display: grid !important;
    grid-template-columns: 1fr 1.5fr 1fr !important;
    gap: 20px !important;
    margin-top: 80px !important;
}
.tft-bento-box {
    background: #fcfcfc !important;
    border: 1px solid var(--svr-color-border-light) !important;
    border-radius: 24px !important;
    padding: 40px !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
}
.tft-bb-content {
    position: relative !important;
    z-index: 2 !important;
}
.tft-bb-label {
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-weight: 700 !important;
    color: var(--svr-color-text-dark) !important;
    margin-bottom: 15px !important;
    display: block !important;
}
.tft-bento-box p {
    font-size: 1rem !important;
    color: var(--svr-color-text-muted) !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
    max-width: 80% !important;
}
.tft-bb-btn {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--svr-color-text-dark) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}
.tft-bb-btn i {
    margin-left: 5px !important;
    transition: transform 0.3s ease !important;
}
.tft-bb-btn:hover i {
    transform: translateX(5px) !important;
}
.tft-bb-icon {
    font-size: 4rem !important;
    color: rgba(0,0,0,0.03) !important;
    position: absolute !important;
    right: 20px !important;
    bottom: -10px !important;
    transform: rotate(-15deg) !important;
    z-index: 1 !important;
}
.tft-bento-search {
    background: #fff !important;
}
.tft-bb-search-form {
    display: flex !important;
    width: 100% !important;
    background: #f5f5f5 !important;
    border-radius: 50px !important;
    padding: 5px !important;
    margin-top: 15px !important;
}
.tft-bb-search-form input {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    padding: 10px 20px !important;
    outline: none !important;
    font-size: 0.9rem !important;
}
.tft-bb-search-form button {
    background: #111 !important;
    color: #fff !important;
    border: none !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
}
.tft-bb-search-form button:hover {
    background: var(--svr-color-accent-gold) !important;
}

/* ==========================================================================
   SECTION A — PREMIUM NUMBERED EDITORIAL LIST
   ========================================================================== */
.tft-editorial-list { display: flex !important; flex-direction: column !important; gap: 0 !important; }
.tft-el-row { display: grid !important; grid-template-columns: 40px 140px 1fr 180px !important; align-items: center !important; gap: 30px !important; padding: 30px 0 !important; border-bottom: 1px solid var(--svr-color-border-light) !important; transition: all 0.3s ease !important; }
.tft-el-row:first-child { border-top: 1px solid var(--svr-color-border-light) !important; }
.tft-el-row:hover { background: #fafafa !important; padding-inline-start: 10px !important; }
.tft-el-num { font-family: var(--svr-font-heading) !important; font-size: 1.8rem !important; font-weight: 300 !important; color: var(--svr-color-border-dark) !important; line-height: 1 !important; user-select: none !important; }
.tft-el-thumb { display: block !important; width: 140px !important; height: 100px !important; border-radius: 12px !important; overflow: hidden !important; flex-shrink: 0 !important; }
.tft-el-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.5s ease !important; }
.tft-el-row:hover .tft-el-thumb img { transform: scale(1.07) !important; }
.tft-el-body { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.tft-el-cat { font-size: 0.65rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; color: var(--svr-color-accent-gold) !important; }
.tft-el-title { font-family: var(--svr-font-heading) !important; font-size: 1.4rem !important; font-weight: 400 !important; line-height: 1.2 !important; color: var(--svr-color-text-dark) !important; }
.tft-el-title a { color: inherit !important; text-decoration: none !important; transition: color 0.3s ease !important; }
.tft-el-title a:hover { color: var(--svr-color-accent-gold) !important; }
.tft-el-excerpt { font-size: 0.9rem !important; color: var(--svr-color-text-muted) !important; line-height: 1.6 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.tft-el-meta { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 8px !important; text-align: right !important; }
.tft-el-date { font-size: 0.75rem !important; color: var(--svr-color-text-muted) !important; letter-spacing: 0.05em !important; }
.tft-el-read { font-size: 0.75rem !important; color: var(--svr-color-text-muted) !important; }
.tft-el-bookmark { background: none !important; border: 1px solid var(--svr-color-border-light) !important; border-radius: 50% !important; width: 34px !important; height: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.3s ease !important; color: var(--svr-color-text-muted) !important; }
.tft-el-bookmark:hover { background: var(--svr-color-accent-gold) !important; border-color: var(--svr-color-accent-gold) !important; color: #fff !important; }

/* ==========================================================================
   SECTION B — DARK CINEMATIC EDITORIAL STRIP
   ========================================================================== */
.tft-cinematic-strip { position: relative !important; height: 480px !important; border-radius: 24px !important; overflow: hidden !important; margin: 80px 0 !important; display: flex !important; align-items: flex-end !important; cursor: pointer !important; }
.tft-cs-bg { position: absolute !important; inset: 0 !important; z-index: 1 !important; }
.tft-cs-bg img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; }
.tft-cinematic-strip:hover .tft-cs-bg img { transform: scale(1.04) !important; }
.tft-cs-overlay { position: absolute !important; inset: 0 !important; background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.35) 55%, transparent 100%) !important; z-index: 2 !important; }
.tft-cs-content { position: relative !important; z-index: 3 !important; padding: 50px !important; color: #fff !important; }
.tft-cs-label { display: inline-block !important; background: var(--svr-color-accent-gold) !important; color: #111 !important; font-size: 0.65rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; padding: 6px 16px !important; border-radius: 50px !important; margin-bottom: 20px !important; }
.tft-cs-title { font-family: var(--svr-font-heading) !important; font-size: clamp(2rem, 4vw, 3.5rem) !important; font-weight: 300 !important; line-height: 1.1 !important; color: #fff !important; margin-bottom: 15px !important; }
.tft-cs-sub { font-size: 0.85rem !important; color: rgba(255,255,255,0.65) !important; margin-bottom: 30px !important; letter-spacing: 0.05em !important; }
.tft-cs-btn { display: inline-flex !important; align-items: center !important; gap: 10px !important; background: #fff !important; color: #111 !important; padding: 14px 30px !important; border-radius: 50px !important; font-size: 0.8rem !important; font-weight: 600 !important; text-decoration: none !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; transition: all 0.3s ease !important; }
.tft-cs-btn:hover { background: var(--svr-color-accent-gold) !important; color: #111 !important; }
.tft-cs-scroll-hint { position: absolute !important; right: 40px !important; top: 50% !important; transform: translateY(-50%) rotate(90deg) !important; font-size: 0.6rem !important; letter-spacing: 0.3em !important; color: rgba(255,255,255,0.4) !important; z-index: 3 !important; }

/* ==========================================================================
   SECTION C — TWO-COLUMN EDITORIAL DUO GRID
   ========================================================================== */
.tft-editorial-duo { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 40px 50px !important; }
.tft-duo-card { display: flex !important; flex-direction: column !important; gap: 20px !important; padding-bottom: 40px !important; border-bottom: 1px solid var(--svr-color-border-light) !important; }
.tft-duo-img { display: block !important; height: 260px !important; border-radius: 16px !important; overflow: hidden !important; position: relative !important; text-decoration: none !important; }
.tft-duo-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.6s ease !important; }
.tft-duo-card:hover .tft-duo-img img { transform: scale(1.05) !important; }
.tft-duo-badge { position: absolute !important; top: 16px !important; left: 16px !important; background: rgba(17,17,17,0.82) !important; backdrop-filter: blur(8px) !important; color: #fff !important; font-size: 0.6rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; padding: 6px 14px !important; border-radius: 50px !important; }
.tft-duo-body { display: flex !important; flex-direction: column !important; gap: 12px !important; flex: 1 !important; }
.tft-duo-body h3 { font-family: var(--svr-font-heading) !important; font-size: 1.5rem !important; font-weight: 400 !important; line-height: 1.2 !important; color: var(--svr-color-text-dark) !important; }
.tft-duo-body h3 a { color: inherit !important; text-decoration: none !important; transition: color 0.3s ease !important; }
.tft-duo-body h3 a:hover { color: var(--svr-color-accent-gold) !important; }
.tft-duo-body p { font-size: 0.95rem !important; color: var(--svr-color-text-muted) !important; line-height: 1.65 !important; }
.tft-duo-foot { display: flex !important; align-items: center !important; gap: 20px !important; margin-top: auto !important; padding-top: 15px !important; font-size: 0.8rem !important; color: var(--svr-color-text-muted) !important; }
.tft-duo-foot a { margin-inline-start: auto !important; font-size: 0.8rem !important; font-weight: 600 !important; color: var(--svr-color-text-dark) !important; text-decoration: none !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; transition: color 0.3s ease !important; }
.tft-duo-foot a:hover { color: var(--svr-color-accent-gold) !important; }

/* ==========================================================================
   EDITORIAL TOPICS (IMAGE SLIDER)
   ========================================================================== */
.tft-editorial-topics-slider {
    display: flex !important;
    gap: 20px !important;
    overflow-x: auto !important;
    padding-bottom: 20px !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--svr-color-border-dark) transparent !important;
    -webkit-overflow-scrolling: touch !important;
}
.tft-editorial-topics-slider::-webkit-scrollbar {
    height: 6px !important;
}
.tft-editorial-topics-slider::-webkit-scrollbar-track {
    background: transparent !important;
}
.tft-editorial-topics-slider::-webkit-scrollbar-thumb {
    background-color: var(--svr-color-border-dark) !important;
    border-radius: 20px !important;
}
.tft-et-card {
    position: relative !important;
    min-width: 240px !important;
    height: 320px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 30px 25px !important;
    text-decoration: none !important;
    scroll-snap-align: start !important;
}
.tft-et-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 1 !important;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.tft-et-card:hover .tft-et-bg {
    transform: scale(1.08) !important;
}
.tft-et-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.1) 100%) !important;
    z-index: 2 !important;
}
.tft-et-content {
    position: relative !important;
    z-index: 3 !important;
}
.tft-et-content h4 {
    font-family: var(--svr-font-heading) !important;
    color: #fff !important;
    font-size: 1.4rem !important;
    font-weight: 400 !important;
    margin-bottom: 5px !important;
}
.tft-et-content span {
    font-size: 0.75rem !important;
    color: rgba(255,255,255,0.7) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-weight: 600 !important;
}


/* ==========================================================================
   UI HOTFIXES
   ========================================================================== */
.tft-bfp-content { max-width: 42% !important; padding-right: 20px !important; }
.tft-et-card { flex-shrink: 0 !important; }
.tft-cs-label, .tft-cs-btn { width: fit-content !important; max-width: max-content !important; align-self: flex-start !important; }
.tft-cs-content { display: flex !important; flex-direction: column !important; align-items: flex-start !important; }

/* ==========================================================================
   EDITORIAL TOPICS MASONRY (REPLACED SLIDER)
   ========================================================================== */
.tft-editorial-topics-masonry { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; grid-auto-rows: 180px !important; gap: 20px !important; }
.tft-editorial-topics-masonry .tft-et-card { position: relative !important; border-radius: 16px !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; padding: 30px 25px !important; text-decoration: none !important; min-width: 0 !important; height: auto !important; }
.tft-editorial-topics-masonry .tft-et-card:nth-child(1) { grid-column: span 2 !important; grid-row: span 2 !important; }
.tft-editorial-topics-masonry .tft-et-card:nth-child(2) { grid-column: span 1 !important; grid-row: span 2 !important; }
.tft-editorial-topics-masonry .tft-et-card:nth-child(3) { grid-column: span 1 !important; grid-row: span 1 !important; }
.tft-editorial-topics-masonry .tft-et-card:nth-child(4) { grid-column: span 1 !important; grid-row: span 1 !important; }
.tft-editorial-topics-masonry .tft-et-card:nth-child(5) { grid-column: span 2 !important; grid-row: span 1 !important; }
.tft-editorial-topics-masonry .tft-et-card:nth-child(6) { grid-column: span 1 !important; grid-row: span 1 !important; }
.tft-editorial-topics-masonry .tft-et-card:nth-child(7) { grid-column: span 1 !important; grid-row: span 1 !important; }
.tft-editorial-topics-masonry .tft-et-content h4 { font-size: clamp(1.2rem, 2vw, 1.8rem) !important; }

/* ==========================================================================
   LOOKBOOK FEED (REPLACED HORIZONTAL LIST)
   ========================================================================== */
.tft-lookbook-feed { display: flex !important; flex-direction: column !important; gap: 120px !important; padding: 60px 0 !important; }
.tft-lb-post { display: flex !important; align-items: center !important; position: relative !important; }
.tft-lb-img { display: block !important; width: 65% !important; height: 520px !important; border-radius: 20px !important; overflow: hidden !important; position: relative !important; z-index: 1 !important; }
.tft-lb-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; }
.tft-lb-post:hover .tft-lb-img img { transform: scale(1.05) !important; }
.tft-lb-card { width: 45% !important; background: #fff !important; padding: 60px 70px !important; border-radius: 20px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.06) !important; position: absolute !important; right: 0 !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; gap: 15px !important; }
.tft-lb-reversed .tft-lb-img { margin-left: auto !important; }
.tft-lb-reversed .tft-lb-card { right: auto !important; left: 0 !important; }
.tft-lb-cat { font-size: 0.7rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; color: var(--svr-color-accent-gold) !important; }
.tft-lb-title { font-family: var(--svr-font-heading) !important; font-size: 2.2rem !important; font-weight: 300 !important; line-height: 1.15 !important; color: var(--svr-color-text-dark) !important; margin: 0 !important; }
.tft-lb-title a { color: inherit !important; text-decoration: none !important; transition: color 0.3s ease !important; }
.tft-lb-title a:hover { color: var(--svr-color-accent-gold) !important; }
.tft-lb-excerpt { font-size: 1rem !important; color: var(--svr-color-text-muted) !important; line-height: 1.6 !important; margin-bottom: 10px !important; }
.tft-lb-meta { display: flex !important; justify-content: space-between !important; align-items: center !important; padding-top: 20px !important; border-top: 1px solid var(--svr-color-border-light) !important; }
.tft-lb-meta div { display: flex !important; gap: 15px !important; align-items: center !important; }
.tft-lb-date, .tft-lb-read { font-size: 0.8rem !important; color: var(--svr-color-text-muted) !important; letter-spacing: 0.05em !important; }
.tft-lb-bookmark { background: none !important; border: 1px solid var(--svr-color-border-light) !important; border-radius: 50% !important; width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.3s ease !important; color: var(--svr-color-text-muted) !important; }
.tft-lb-bookmark:hover { background: var(--svr-color-accent-gold) !important; border-color: var(--svr-color-accent-gold) !important; color: #fff !important; }

/* ==========================================================================
   SINGLE POST (EDITORIAL LAYOUT FIX)
   ========================================================================== */
.tft-single-post { max-width: 1000px !important; margin: 0 auto !important; padding: 60px 40px !important; background: transparent !important; }

/* Header */
.tft-sp-header { text-align: center !important; margin-bottom: 50px !important; }
.tft-sp-category { display: inline-block !important; font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; color: var(--svr-color-accent-gold) !important; margin-bottom: 20px !important; font-weight: 700 !important; }
.tft-sp-title { font-family: var(--svr-font-heading) !important; font-size: clamp(2.5rem, 5vw, 4rem) !important; font-weight: 300 !important; line-height: 1.1 !important; color: var(--svr-color-text-dark) !important; margin-bottom: 30px !important; }
.tft-sp-meta { display: flex !important; justify-content: center !important; align-items: center !important; gap: 25px !important; font-size: 0.9rem !important; color: var(--svr-color-text-muted) !important; }
.tft-sp-author { display: flex !important; align-items: center !important; gap: 10px !important; color: var(--svr-color-text-dark) !important; font-weight: 500 !important; }
.tft-sp-author img { width: 35px !important; height: 35px !important; border-radius: 50% !important; object-fit: cover !important; }

/* Featured Media */
.tft-sp-featured-media { width: 100% !important; height: 600px !important; border-radius: 24px !important; overflow: hidden !important; margin-bottom: 60px !important; box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important; }
.tft-sp-featured-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

/* Content */
.tft-sp-content { max-width: 760px !important; margin: 0 auto !important; font-size: 1.15rem !important; line-height: 1.8 !important; color: #333 !important; }
.tft-sp-content p { margin-bottom: 30px !important; }
.tft-sp-content h2, .tft-sp-content h3 { font-family: var(--svr-font-heading) !important; margin: 50px 0 25px !important; color: var(--svr-color-text-dark) !important; }
.tft-sp-content h2 { font-size: 2.2rem !important; font-weight: 400 !important; }
.tft-sp-content h3 { font-size: 1.6rem !important; font-weight: 500 !important; }

/* Dropcap & Blockquote */
.tft-dropcap { float: left !important; font-family: var(--svr-font-heading) !important; font-size: 5rem !important; line-height: 0.8 !important; padding-top: 10px !important; padding-right: 15px !important; color: var(--svr-color-accent-gold) !important; }
.tft-blockquote { font-family: var(--svr-font-heading) !important; font-size: 1.8rem !important; font-style: italic !important; line-height: 1.4 !important; color: var(--svr-color-text-dark) !important; margin: 50px 0 !important; padding: 40px !important; border-left: 4px solid var(--svr-color-accent-gold) !important; background: #fff !important; border-radius: 0 16px 16px 0 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important; }
.tft-blockquote cite { display: block !important; font-family: var(--svr-font-base) !important; font-size: 0.9rem !important; font-style: normal !important; margin-top: 20px !important; color: var(--svr-color-text-muted) !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; }

/* Footer & Author Box */
.tft-sp-footer { max-width: 760px !important; margin: 60px auto 0 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; padding-top: 30px !important; border-top: 1px solid var(--svr-color-border-light) !important; }
.tft-sp-tags a { display: inline-block !important; padding: 6px 16px !important; background: #fff !important; border-radius: 20px !important; font-size: 0.8rem !important; color: var(--svr-color-text-dark) !important; text-decoration: none !important; margin-right: 10px !important; border: 1px solid var(--svr-color-border-light) !important; transition: all 0.3s ease !important; }
.tft-sp-tags a:hover { border-color: var(--svr-color-accent-gold) !important; color: var(--svr-color-accent-gold) !important; }
.tft-sp-share { display: flex !important; align-items: center !important; gap: 15px !important; font-size: 0.9rem !important; color: var(--svr-color-text-muted) !important; }
.tft-sp-share a { color: var(--svr-color-text-dark) !important; transition: color 0.3s ease !important; }
.tft-sp-share a:hover { color: var(--svr-color-accent-gold) !important; }
.tft-author-box { max-width: 760px !important; margin: 60px auto !important; display: flex !important; gap: 30px !important; padding: 40px !important; background: #fff !important; border-radius: 20px !important; box-shadow: 0 10px 40px rgba(0,0,0,0.04) !important; align-items: center !important; }
.tft-author-avatar { width: 100px !important; height: 100px !important; border-radius: 50% !important; object-fit: cover !important; }
.tft-author-info h3 { margin: 0 0 10px !important; font-size: 1.4rem !important; }
.tft-author-bio { font-size: 0.95rem !important; color: var(--svr-color-text-muted) !important; line-height: 1.6 !important; margin-bottom: 15px !important; }
.tft-author-link { font-size: 0.85rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: var(--svr-color-accent-gold) !important; text-decoration: none !important; }

/* Post Nav & Comments */
.tft-post-nav { max-width: 1000px !important; margin: 0 auto 80px !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 30px !important; }
.tft-post-nav a { display: block !important; padding: 40px !important; background: #fff !important; border-radius: 20px !important; text-decoration: none !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; }
.tft-post-nav a:hover { transform: translateY(-5px) !important; box-shadow: 0 15px 40px rgba(0,0,0,0.06) !important; }
.tft-pn-next { text-align: right !important; }
.tft-post-nav span { display: block !important; font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; color: var(--svr-color-text-muted) !important; margin-bottom: 10px !important; }
.tft-post-nav h4 { margin: 0 !important; font-family: var(--svr-font-heading) !important; font-size: 1.4rem !important; color: var(--svr-color-text-dark) !important; }
.tft-comments-area { max-width: 760px !important; margin: 0 auto !important; }
.tft-comments-title { font-family: var(--svr-font-heading) !important; font-size: 2rem !important; margin-bottom: 40px !important; font-weight: 400 !important; }
.tft-comment-list { list-style: none !important; padding: 0 !important; margin: 0 0 60px !important; }
.tft-comment-body { display: flex !important; gap: 20px !important; padding: 30px !important; background: #fff !important; border-radius: 16px !important; margin-bottom: 20px !important; box-shadow: 0 5px 20px rgba(0,0,0,0.02) !important; }
.tft-comment-avatar { width: 50px !important; height: 50px !important; border-radius: 50% !important; }
.tft-comment-content { flex: 1 !important; }
.tft-comment-meta { display: flex !important; justify-content: space-between !important; margin-bottom: 15px !important; }
.tft-comment-author { font-weight: 600 !important; color: var(--svr-color-text-dark) !important; }
.tft-badge-author { background: var(--svr-color-accent-gold) !important; color: #fff !important; font-size: 0.6rem !important; padding: 2px 8px !important; border-radius: 10px !important; margin-left: 10px !important; vertical-align: middle !important; }
.tft-comment-time { font-size: 0.8rem !important; color: var(--svr-color-text-muted) !important; }
.tft-comment-content p { font-size: 0.95rem !important; line-height: 1.6 !important; color: var(--svr-color-text-dark) !important; margin-bottom: 15px !important; }
.tft-comment-reply { font-size: 0.8rem !important; font-weight: 600 !important; color: var(--svr-color-text-dark) !important; text-decoration: none !important; text-transform: uppercase !important; }
.children { list-style: none !important; padding-left: 50px !important; }
.tft-comment-respond { background: #fff !important; padding: 50px !important; border-radius: 20px !important; box-shadow: 0 10px 40px rgba(0,0,0,0.03) !important; }
.tft-reply-title { font-family: var(--svr-font-heading) !important; font-size: 1.8rem !important; margin-bottom: 10px !important; }
.tft-reply-notes { font-size: 0.9rem !important; color: var(--svr-color-text-muted) !important; margin-bottom: 30px !important; }
.tft-form-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
.tft-form-group { margin-bottom: 20px !important; }
.tft-form-group label { display: block !important; font-size: 0.85rem !important; font-weight: 600 !important; margin-bottom: 8px !important; }
.tft-form-group input, .tft-form-group textarea { width: 100% !important; padding: 15px !important; border: 1px solid var(--svr-color-border-light) !important; border-radius: 8px !important; font-family: inherit !important; background: #fafafa !important; }
.tft-btn-primary { background: var(--svr-color-text-dark) !important; color: #fff !important; border: none !important; padding: 15px 30px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; border-radius: 8px !important; cursor: pointer !important; text-transform: uppercase !important; transition: background 0.3s ease !important; }
.tft-btn-primary:hover { background: var(--svr-color-accent-gold) !important; }

/* ==========================================================================
   SINGLE POST NAV THUMBNAILS FIX
   ========================================================================== */
.tft-post-nav { max-width: 760px !important; }
.tft-post-nav a { display: flex !important; align-items: center !important; gap: 20px !important; padding: 25px !important; }
.tft-pn-thumb { width: 80px !important; height: 80px !important; border-radius: 12px !important; object-fit: cover !important; flex-shrink: 0 !important; }
.tft-pn-info { flex: 1 !important; }
.tft-pn-next { text-align: right !important; justify-content: flex-end !important; }

/* ==========================================================================
   PREMIUM CONTACT PAGE UPGRADES
   ========================================================================== */
.tft-contact-card--premium {
    display: flex !important;
    gap: 20px !important;
    background: #fff !important;
    padding: 30px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
    border: none !important;
    margin-bottom: 20px !important;
    transition: transform 0.3s ease !important;
}
.tft-contact-card--premium:hover {
    transform: translateY(-5px) !important;
}
.tft-contact-card--premium i {
    font-size: 1.5rem !important;
    color: var(--svr-color-accent-gold) !important;
    background: var(--svr-color-bg-dark) !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}
.tft-contact-card--premium h3 {
    margin: 0 0 5px !important;
    font-size: 1.2rem !important;
}
.tft-contact-card--premium p {
    margin: 0 !important;
    font-size: 0.95rem !important;
    color: var(--svr-color-text-muted) !important;
    line-height: 1.5 !important;
}
.tft-contact-social--premium {
    background: #fff !important;
    padding: 30px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
    text-align: center !important;
}
.tft-contact-social--premium span {
    display: block !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: var(--svr-color-text-muted) !important;
    margin-bottom: 15px !important;
}
.tft-contact-social--premium .tft-social-links a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: var(--svr-color-card-light) !important;
    color: var(--svr-color-text-dark) !important;
    border-radius: 50% !important;
    margin: 0 5px !important;
    transition: all 0.3s ease !important;
}
.tft-contact-social--premium .tft-social-links a:hover {
    background: var(--svr-color-accent-gold) !important;
    color: #fff !important;
}
.tft-form-wrapper--premium {
    background: #fff !important;
    padding: 50px !important;
    border-radius: 24px !important;
    box-shadow: 0 15px 50px rgba(0,0,0,0.05) !important;
}

/* ==========================================================================
   PREMIUM FAQ ACCORDION
   ========================================================================== */
.tft-faq-item summary::-webkit-details-marker {
    display: none !important;
}
.tft-faq-item summary {
    list-style: none !important;
}
.tft-faq-item[open] summary .tft-faq-chevron {
    transform: rotate(180deg) !important;
}
.tft-faq-item {
    transition: box-shadow 0.3s ease !important;
}
.tft-faq-item:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.06) !important;
}

/* ==========================================================================
   RESPONSIVE BESPOKE CONTACT
   ========================================================================== */
@media (max-width: 992px) {
    .tft-bespoke-contact {
        grid-template-columns: 1fr !important;
    }
    .tft-bespoke-contact__media {
        min-height: 400px !important;
    }
}

/* ==========================================================================
   MINIMALIST FAQ ACCORDION
   ========================================================================== */
.tft-faq-item--minimal[open] summary .tft-faq-icon {
    transform: rotate(45deg) !important;
}
.tft-faq-item--minimal[open] summary {
    color: var(--svr-color-accent-gold) !important;
}
.tft-faq-item--minimal:hover {
    box-shadow: none !important;
}

/* FINAL VISUAL FIXES FOR IMAGES AND CARDS */
.tft-product-card { padding: 0 !important; }
.tft-product-card__media { margin: 0 !important; padding: 0 !important; width: 100% !important; }
.tft-product-card__img { border-radius: 0 !important;
    color: var(--svr-color-text-dark) !important; margin: 0 !important; padding: 0 !important; }
.svr-hero-webgl__bg { width: 100% !important; right: 0 !important; left: 0 !important; }
.svr-card-dark { padding: 0 !important; }
.svr-card-dark__image-container { margin: 0 !important; padding: 0 !important; width: 100% !important; border-radius: 0 !important;
    color: var(--svr-color-text-dark) !important; }


.svr-top-nav { width: auto !important; margin: 30px !important; }
.svr-ingredient-item { color: #fff !important; }
.svr-ingredient-item span, .svr-ingredient-item i { color: #fff !important; }


/* LAYOUT ALIGNMENT FIXES */
.svr-main-content { overflow-x: hidden !important; }
.svr-top-nav { width: auto !important; margin: 30px !important; align-self: stretch !important; }
.svr-avant-home { padding: 0 40px 40px 40px !important; }
.svr-avant-home .tft-container { padding-left: 0 !important; padding-right: 0 !important; }
.svr-avant-home > .svr-hero, .svr-avant-home > .svr-hero-webgl, .svr-avant-home > .svr-h4-immersive-hero { margin-left: -40px !important; margin-right: -40px !important; margin-top: 0 !important; width: auto !important; border-radius: 0 !important;
    color: var(--svr-color-text-dark) !important; }
.svr-avant-home > .svr-hero + *:not(.tft-container), .svr-avant-home > .svr-hero-webgl + *:not(.tft-container), .svr-avant-home > .svr-h4-immersive-hero + *:not(.tft-container) {margin-top: 40px !important;}
.svr-ingredient-item, .svr-ingredient-item span, .svr-ingredient-item i { color: #fff !important; }


/* FIXES: COMPACT PLANNER & NEWSLETTER WIDTH */
.tft-compact-planner { padding: 40px !important; }
.tft-tonight-img { width: 100% !important; height: 180px !important; object-fit: cover !important; border-radius: 12px !important; margin-bottom: 20px !important; display: block; }
.svr-newsletter-card { max-width: 100% !important; width: 100% !important; margin: 0 !important; }


/* FIXES: FOOTER DIVIDER & BALANCE */
.svr-uf-bottom { border-top: none !important; margin-top: 0 !important; padding: 40px 0 !important; }
.svr-uf-big-text { margin-bottom: 0 !important; }

/* ==========================================================================
   FIXES: PREMIUM COMPACT TONIGHT CARD
   ========================================================================== */
.tft-tonight-card--premium {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: var(--svr-radius-md, 12px);
    overflow: hidden;
    height: 180px; /* Restrict height to ensure compactness */
    text-decoration: none;
    color: #fff !important;
    margin-top: auto;
}
.tft-tonight-card--premium__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.tft-tonight-card--premium__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.1) 100%);
    z-index: 2;
}
.tft-tonight-card--premium__content {
    position: relative;
    z-index: 3;
    padding: 15px;
}
.tft-tonight-card--premium__title {
    font-family: var(--svr-font-heading);
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: #fff !important;
    line-height: 1.2;
}
.tft-tonight-card--premium__meta {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    align-items: center;
}
.tft-tonight-card--premium__btn {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--svr-color-accent-gold);
    display: flex;
    align-items: center;
    gap: 5px;
}
.tft-tonight-card--premium:hover .tft-tonight-card--premium__bg {
    transform: scale(1.05);
    transition: transform var(--svr-transition-normal, 0.4s ease);
}
.tft-tonight-card--premium__bg {
    transition: transform var(--svr-transition-normal, 0.4s ease);
}
/* ==========================================================================
   FIXES: MEAL PLAN HOVER JUMP
   ========================================================================== */
.svr-h2-mq-item, .svr-h2-mq-item:hover {
    padding-left: 16px !important;
}
.svr-widgets-col .svr-h2-mq-item, .svr-widgets-col .svr-h2-mq-item:hover {
    padding-left: 14px !important;
}
.svr-h2-mq-info {
    min-width: 0; /* allows text truncation in flex/grid */
}
.svr-h2-mq-info h4 {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-width: 100% !important;
}
/* ==========================================================================
   FIXES: CHECKOUT PAGE LAYOUT WIDTH
   ========================================================================== */
.tft-checkout-wrap {
    padding: 0 !important;
}
/* ==========================================================================
   FIXES: SUBMIT RECIPE FORM INPUTS OVERRIDE
   ========================================================================== */
.tft-form-group--interactive .tft-form-input {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--svr-color-border-light) !important;
    padding: 20px 0 10px !important;
    border-radius: 0 !important;
    color: var(--svr-color-text-dark) !important;
}
.tft-form-group--interactive .tft-form-floating-label {
    position: absolute !important;
    z-index: 5 !important;
    pointer-events: none;
    color: var(--svr-color-text-muted-light) !important;
}
.tft-form-group--interactive input:focus,
.tft-form-group--interactive textarea:focus {
    background: rgba(212, 175, 55, 0.03) !important;
}
.tft-form-group--interactive label {
    margin-bottom: 0 !important;
    display: inline-block !important;
}


.tft-form-group--interactive input:focus ~ .tft-form-floating-label,
.tft-form-group--interactive input:valid ~ .tft-form-floating-label,
.tft-form-group--interactive textarea:focus ~ .tft-form-floating-label,
.tft-form-group--interactive textarea:valid ~ .tft-form-floating-label {
    color: var(--svr-color-accent-gold) !important;
}
.svr-main-content--submit {
    overflow-x: visible !important;
}
/* ==========================================================================
   FIXES: SUBMIT RECIPE PAGE STICKY
   ========================================================================== */
body:has(.tft-submit-sidebar),
html:has(.tft-submit-sidebar) {
    overflow-x: visible !important;
}
.svr-main-content:has(.tft-submit-sidebar),
.svr-dashboard:has(.tft-submit-sidebar) {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}
/* ==========================================================================
   FIXES: SCROLL ALIGNMENT FOR RECIPE BUILDER
   ========================================================================== */
.scrollspy-section {
    scroll-margin-top: 100px;
}
/* ==========================================================================
   FIXES: CUSTOM FORM VALIDATION UI
   ========================================================================== */
.tft-error-msg {
    color: #e74c3c;
    font-size: 0.75rem;
    position: absolute;
    bottom: -18px;
    left: 0;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.tft-form-group--interactive {
    position: relative;
}
.tft-form-input.tft-input-error {
    border-bottom-color: #e74c3c !important;
}
.tft-form-input.tft-input-error ~ .tft-form-floating-label {
    color: #e74c3c !important;
}
/* ==========================================================================
   FIXES: TEXT COLOR VISIBILITY IN LIGHT MODE WRAPPERS
   ========================================================================== */
.svr-hero__title,
.svr-hero__desc,
.svr-hero__meta,
.svr-hero__content .svr-badge-text {
    color: #ffffff !important;
}

.tft-diet-card__title,
.tft-diet-card__desc {
    color: #ffffff !important;
}

.svr-hero-glass-card__title,
.svr-hero-glass-card__meta,
.svr-hero-glass-card__rating,
.svr-hero-glass-card__badge {
    color: #ffffff !important;
}
/* ==========================================================================
   FIXES: FAQ PREMIUM LIGHT MODE DESIGN
   ========================================================================== */
.svr-avant-cart .tft-faq-category h2 {
    color: #1a1a1a !important;
    border-bottom-color: var(--svr-color-accent-gold) !important;
}
.svr-avant-cart .tft-faq-item {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 16px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02) !important;
}
.svr-avant-cart .tft-faq-question {
    color: #1a1a1a !important;
    padding: 25px 30px !important;
}
.svr-avant-cart .tft-faq-toggle:checked + .tft-faq-question {
    background: rgba(0,0,0,0.02) !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}
.svr-avant-cart .tft-faq-answer {
    color: rgba(0,0,0,0.6) !important;
}
.svr-avant-cart .tft-faq-toggle:checked ~ .tft-faq-answer {
    background: #ffffff !important;
}
/* ==========================================================================
   FIXES: HOME 3 HERO VISIBILITY
   ========================================================================== */
.svr-hero-webgl__title {
    color: #ffffff !important;
}
.svr-hero-webgl__title--accent {
    color: var(--svr-color-accent-gold) !important;
}
.svr-hero-webgl__meta {
    color: rgba(255,255,255,0.8) !important;
}
/* ==========================================================================
   FIXES: EDITORIAL POSTS (DUO CARDS) REFINEMENT
   ========================================================================== */
.tft-editorial-duo {
    gap: 60px 50px !important;
}
.tft-duo-card {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    gap: 25px !important;
}
.tft-duo-img {
    height: 300px !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
}
.tft-duo-badge {
    border-radius: 8px !important;
    background: rgba(10,10,10,0.85) !important;
    font-size: 0.65rem !important;
    padding: 8px 16px !important;
    letter-spacing: 0.15em !important;
}
.tft-duo-body h3 {
    font-size: 1.7rem !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
}
.tft-duo-body p {
    font-size: 1rem !important;
    color: rgba(0,0,0,0.6) !important;
}
.tft-duo-foot {
    border-top: 1px solid rgba(0,0,0,0.05) !important;
    padding-top: 20px !important;
}
.tft-duo-foot a {
    color: var(--svr-color-accent-gold) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.tft-duo-foot a i {
    transition: transform 0.3s ease !important;
}
.tft-duo-card:hover .tft-duo-foot a i {
    transform: translateX(5px) !important;
}
/* ==========================================================================
   FIXES: PRICING LIGHT MODE CARD ADAPTATIONS
   ========================================================================== */
.svr-avant-cart .tft-pc-desc {
    color: rgba(0,0,0,0.6) !important;
}
.svr-avant-cart .tft-pc-price .period {
    color: rgba(0,0,0,0.5) !important;
}
.svr-avant-cart .tft-pc-features li {
    color: rgba(0,0,0,0.7) !important;
}
.svr-avant-cart .tft-pc-features li i {
    color: var(--svr-color-accent-gold) !important;
}
.svr-avant-cart .tft-feature-disabled {
    color: rgba(0,0,0,0.3) !important;
    text-decoration: line-through;
}
.svr-avant-cart .tft-feature-disabled i {
    color: rgba(0,0,0,0.2) !important;
}
.svr-avant-cart .tft-pricing-card {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02) !important;
}
.svr-avant-cart .tft-pricing-card--featured {
    background: #faf9f7 !important;
    border: 2px solid var(--svr-color-accent-gold) !important;
    box-shadow: 0 20px 40px rgba(230, 185, 83, 0.15) !important;
}
.svr-avant-cart .tft-pc-badge {
    color: #1a1a1a !important;
}

/* ==========================================================================
   SECTION E — PREMIUM WOOCOMMERCE MY ACCOUNT LAYOUT
   ========================================================================== */
.woocommerce {
    display: flex !important;
    gap: 80px !important;
    width: 100% !important;
}

.woocommerce-MyAccount-navigation {
    flex: 0 0 250px !important;
    background: var(--svr-color-bg-light) !important;
    border: 1px solid var(--svr-color-border-light) !important;
    border-radius: var(--svr-radius-lg) !important;
    padding: 30px 20px !important;
    height: fit-content !important;
    box-shadow: inset 0 2px 4px color-mix(in srgb, var(--svr-color-text-dark) 1%, transparent), 0 10px 30px color-mix(in srgb, var(--svr-color-text-dark) 2%, transparent) !important;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.woocommerce-MyAccount-navigation-link {
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-MyAccount-navigation-link a {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 14px 20px !important;
    border-radius: 14px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    color: var(--svr-color-text-dark) !important;
    opacity: 0.6 !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    border: 1px solid transparent !important;
}

.woocommerce-MyAccount-navigation-link a i {
    font-size: 1.1rem !important;
    width: 20px !important;
    text-align: center !important;
    color: var(--svr-color-text-dark) !important;
    opacity: 0.4 !important;
    transition: all 0.3s ease !important;
}

.woocommerce-MyAccount-navigation-link a:hover {
    color: var(--svr-color-text-dark) !important;
    opacity: 1 !important;
    background: color-mix(in srgb, var(--svr-color-text-dark) 2%, transparent) !important;
    transform: translateX(4px) !important;
}

.woocommerce-MyAccount-navigation-link a:hover i {
    color: var(--svr-color-accent-gold) !important;
    opacity: 1 !important;
}

.woocommerce-MyAccount-navigation-link.is-active a {
    color: var(--svr-color-text-dark) !important;
    opacity: 1 !important;
    background: var(--svr-color-card-light) !important;
    border-color: var(--svr-color-border-light) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--svr-color-text-dark) 3%, transparent) !important;
    position: relative !important;
}

.woocommerce-MyAccount-navigation-link.is-active a::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 25% !important;
    height: 50% !important;
    width: 4px !important;
    background: var(--svr-color-accent-gold) !important;
    border-radius: 0 4px 4px 0 !important;
}

.woocommerce-MyAccount-navigation-link.is-active a i {
    color: var(--svr-color-accent-gold) !important;
    opacity: 1 !important;
}

.woocommerce-MyAccount-content {
    flex: 1 !important;
    min-width: 0 !important;
}

/* Panel Animations and Active States */
.woocommerce-MyAccount-panel {
    display: none !important;
}

.woocommerce-MyAccount-panel.is-active {
    display: block !important;
    animation: tftFadeIn 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

@keyframes tftFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Premium Dashboard Welcome Section */
.tft-dashboard-welcome {
    background: linear-gradient(135deg, var(--svr-color-bg-dark) 0%, var(--svr-color-sidebar) 100%) !important;
    border-radius: var(--svr-radius-lg) !important;
    padding: 40px !important;
    color: var(--svr-color-text-light) !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 20px 40px color-mix(in srgb, var(--svr-color-text-dark) 15%, transparent) !important;
    margin-bottom: 40px !important;
}

.tft-dashboard-welcome::after {
    content: 'SAVORE' !important;
    position: absolute !important;
    right: -20px !important;
    bottom: -30px !important;
    font-size: 8rem !important;
    font-family: var(--svr-font-heading) !important;
    font-weight: 700 !important;
    color: color-mix(in srgb, var(--svr-color-text-light) 2%, transparent) !important;
    pointer-events: none !important;
    letter-spacing: 0.1em !important;
}

.tft-welcome-title {
    font-family: var(--svr-font-heading) !important;
    font-size: 2.5rem !important;
    font-weight: 300 !important;
    color: var(--svr-color-text-light) !important;
    margin: 0 0 15px 0 !important;
}

.tft-welcome-title em {
    font-family: 'Dancing Script', cursive !important;
    color: var(--svr-color-accent-gold) !important;
    font-style: normal !important;
}

.tft-welcome-text {
    font-size: 1.05rem !important;
    color: var(--svr-color-text-light) !important;
    opacity: 0.7 !important;
    line-height: 1.6 !important;
    max-width: none !important;
    margin: 0 !important;
}

.tft-welcome-text a {
    color: var(--svr-color-accent-gold) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.tft-welcome-text a:hover {
    text-decoration: underline !important;
}

/* Premium Dashboard Quick Navigation Cards */
.tft-dashboard-summary-cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 24px !important;
}

.tft-dashboard-card {
    background: var(--svr-color-card-light) !important;
    border: 1px solid var(--svr-color-border-light) !important;
    border-radius: var(--svr-radius-md) !important;
    padding: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.tft-dashboard-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: transparent !important;
    transition: background-color 0.3s ease !important;
}

.tft-dashboard-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px color-mix(in srgb, var(--svr-color-text-dark) 5%, transparent) !important;
    border-color: color-mix(in srgb, var(--svr-color-text-dark) 10%, transparent) !important;
}

.tft-dashboard-card:hover::before {
    background: var(--svr-color-accent-gold) !important;
}

.tft-dashboard-card__icon {
    font-size: 2.2rem !important;
    color: var(--svr-color-accent-gold) !important;
    margin-bottom: 5px !important;
}

.tft-dashboard-card__title {
    font-family: var(--svr-font-heading) !important;
    font-size: 1.4rem !important;
    font-weight: 400 !important;
    color: var(--svr-color-text-dark) !important;
    margin: 0 !important;
}

.tft-dashboard-card__desc {
    font-size: 0.9rem !important;
    color: var(--svr-color-text-dark) !important;
    opacity: 0.5 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.tft-dashboard-card__link {
    align-self: flex-start !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--svr-color-text-dark) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: auto !important;
}

.tft-dashboard-card__link i {
    transition: transform 0.3s ease !important;
}

.tft-dashboard-card:hover .tft-dashboard-card__link i {
    transform: translateX(4px) !important;
}

/* Premium WooCommerce Table */
.tft-table-wrapper {
    background: var(--svr-color-card-light) !important;
    border: 1px solid var(--svr-color-border-light) !important;
    border-radius: var(--svr-radius-md) !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--svr-color-text-dark) 2%, transparent) !important;
}

.tft-woocommerce-table {
    width: 100% !important;
    border-collapse: collapse !important;
    text-align: left !important;
}

.tft-woocommerce-table th {
    background: var(--svr-color-bg-light) !important;
    padding: 18px 24px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--svr-color-text-dark) !important;
    border-bottom: 1px solid var(--svr-color-border-light) !important;
}

.tft-woocommerce-table td {
    padding: 20px 24px !important;
    font-size: 0.95rem !important;
    color: var(--svr-color-text-dark) !important;
    opacity: 0.7 !important;
    border-bottom: 1px solid var(--svr-color-border-light) !important;
    vertical-align: middle !important;
}

.tft-woocommerce-table tr:last-child td {
    border-bottom: none !important;
}

/* Status Badges */
.tft-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
}

.tft-status-badge--processing {
    background: color-mix(in srgb, var(--svr-color-accent-gold) 8%, transparent) !important;
    color: color-mix(in srgb, var(--svr-color-accent-gold) 80%, black) !important;
}

.tft-status-badge--completed {
    background: color-mix(in srgb, var(--svr-color-accent-green) 12%, transparent) !important;
    color: var(--svr-color-accent-green) !important;
}

/* Premium Download List Items */
.tft-downloads-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.tft-download-item {
    background: var(--svr-color-card-light) !important;
    border: 1px solid var(--svr-color-border-light) !important;
    border-radius: var(--svr-radius-md) !important;
    padding: 24px 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.tft-download-item:hover {
    border-color: color-mix(in srgb, var(--svr-color-text-dark) 10%, transparent) !important;
    box-shadow: 0 10px 25px color-mix(in srgb, var(--svr-color-text-dark) 3%, transparent) !important;
    transform: translateY(-2px) !important;
}

.tft-download-item__meta {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

.tft-download-item__icon {
    font-size: 2rem !important;
    color: var(--svr-color-accent-gold) !important;
    background: color-mix(in srgb, var(--svr-color-accent-gold) 10%, transparent) !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tft-download-item__title {
    font-family: var(--svr-font-body) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: var(--svr-color-text-dark) !important;
    margin: 0 0 5px 0 !important;
}

.tft-download-item__sub {
    font-size: 0.8rem !important;
    color: var(--svr-color-text-dark) !important;
    opacity: 0.4 !important;
    margin: 0 !important;
}

/* Premium Addresses Grid */
.tft-addresses-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 30px !important;
}

.tft-address-card {
    background: var(--svr-color-card-light) !important;
    border: 1px solid var(--svr-color-border-light) !important;
    border-radius: var(--svr-radius-md) !important;
    padding: 35px !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

.tft-address-card__title {
    font-family: var(--svr-font-heading) !important;
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    color: var(--svr-color-text-dark) !important;
    border-bottom: 1px solid var(--svr-color-border-light) !important;
    padding-bottom: 12px !important;
    margin: 0 !important;
}

.tft-address-card__content {
    font-style: normal !important;
    line-height: 1.7 !important;
    color: var(--svr-color-text-dark) !important;
    opacity: 0.6 !important;
    font-size: 0.95rem !important;
}

.tft-address-card__link {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--svr-color-accent-gold) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Premium Form Elements */
.tft-form-card {
    background: var(--svr-color-card-light) !important;
    border: 1px solid var(--svr-color-border-light) !important;
    border-radius: var(--svr-radius-lg) !important;
    padding: 40px !important;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--svr-color-text-dark) 2%, transparent) !important;
}

.tft-form-row--two-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
}

@media (max-width: 768px) {
    .tft-form-row--two-col {
        grid-template-columns: 1fr !important;
    }
}

.tft-form-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.tft-form-field label {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--svr-color-text-dark) !important;
    opacity: 0.7 !important;
}

.tft-form-field input {
    background: var(--svr-color-bg-light) !important;
    border: 1px solid var(--svr-color-border-light) !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    font-size: 0.95rem !important;
    color: var(--svr-color-text-dark) !important;
    outline: none !important;
    transition: all 0.3s ease !important;
}

.tft-form-field input:focus {
    border-color: var(--svr-color-accent-gold) !important;
    background: var(--svr-color-card-light) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--svr-color-accent-gold) 10%, transparent) !important;
}

.tft-form-field__help {
    font-size: 0.8rem !important;
    color: var(--svr-color-text-dark) !important;
    opacity: 0.4 !important;
    line-height: 1.4 !important;
}

.tft-fieldset {
    border: 1px solid var(--svr-color-border-light) !important;
    border-radius: var(--svr-radius-md) !important;
    padding: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin: 20px 0 0 0 !important;
}

.tft-fieldset legend {
    font-family: var(--svr-font-heading) !important;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    color: var(--svr-color-text-dark) !important;
    padding: 0 15px !important;
}

.tft-account-submit-btn {
    align-self: flex-start !important;
    background: var(--svr-color-text-dark) !important;
    color: var(--svr-color-text-light) !important;
    padding: 16px 36px !important;
    border: none !important;
    border-radius: var(--svr-radius-pill) !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.tft-account-submit-btn:hover {
    background: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-text-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--svr-color-accent-gold) 20%, transparent) !important;
}

@media (max-width: 992px) {
    .woocommerce {
        flex-direction: column !important;
        gap: 40px !important;
    }
    .woocommerce-MyAccount-navigation {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}

/* TFT sovereign layout override for full-width customer dashboard */
.tft-account-wrap {
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Premium luxury editorial overrides for customer dashboard */
.woocommerce-MyAccount-navigation {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.woocommerce-MyAccount-navigation ul {
    gap: 5px !important;
}

.woocommerce-MyAccount-navigation-link a {
    font-family: var(--svr-font-heading) !important;
    font-size: 1.25rem !important;
    color: var(--svr-color-text-dark) !important;
    opacity: 0.65 !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    padding: 18px 20px !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
}

.woocommerce-MyAccount-navigation-link a i {
    font-size: 1rem !important;
    color: var(--svr-color-text-dark) !important;
    opacity: 0.4 !important;
    transition: all 0.3s ease, transform 0.3s ease !important;
}

.woocommerce-MyAccount-navigation-link a:hover {
    color: var(--svr-color-accent-gold) !important;
    opacity: 1 !important;
    background: rgba(197, 160, 89, 0.03) !important;
    padding-left: 28px !important;
    transform: none !important;
}

.woocommerce-MyAccount-navigation-link a:hover i {
    color: var(--svr-color-accent-gold) !important;
    opacity: 1 !important;
    transform: scale(1.1);
}

.woocommerce-MyAccount-navigation-link.is-active a {
    color: var(--svr-color-accent-gold) !important;
    opacity: 1 !important;
    border-left: 3px solid var(--svr-color-accent-gold) !important;
    background: rgba(197, 160, 89, 0.05) !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

.woocommerce-MyAccount-navigation-link.is-active a::before {
    display: none !important; /* Hide old bar */
}

.woocommerce-MyAccount-navigation-link.is-active a i {
    color: var(--svr-color-accent-gold) !important;
    opacity: 1 !important;
}

/* Beautiful Welcome Card overrides */
.tft-dashboard-welcome {
    background: linear-gradient(145deg, #090807 0%, #151310 100%) !important;
    border: 1px solid rgba(197, 160, 89, 0.12) !important;
    border-radius: 30px !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.15) !important;
    padding: 50px !important;
    position: relative !important;
}

.tft-welcome-title {
    font-family: var(--svr-font-heading) !important;
    font-size: clamp(2rem, 3.5vw, 2.6rem) !important;
    font-weight: 300 !important;
    letter-spacing: -0.01em !important;
    color: var(--svr-color-text-light) !important;
    margin-bottom: 20px !important;
}

.tft-welcome-title em {
    font-family: 'Dancing Script', cursive !important;
    color: var(--svr-color-accent-gold) !important;
    font-size: 1.25em !important;
    text-transform: none !important;
}

.tft-welcome-text {
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
    color: var(--svr-color-text-light) !important;
    opacity: 0.8 !important;
}

/* Luxury Action Cards Grid overrides */
.tft-dashboard-summary-cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 30px !important;
    margin-top: 40px !important;
}

.tft-dashboard-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.01) !important;
    padding: 35px !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tft-dashboard-card::before {
    display: none !important; /* Remove the old top bar line */
}

.tft-dashboard-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 25px 50px rgba(197, 160, 89, 0.07) !important;
    border-color: rgba(197, 160, 89, 0.25) !important;
}

.tft-dashboard-card__icon {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: rgba(197, 160, 89, 0.07) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    font-size: 1.5rem !important;
    color: var(--svr-color-accent-gold) !important;
    transition: all 0.3s ease !important;
}

.tft-dashboard-card:hover .tft-dashboard-card__icon {
    background: rgba(197, 160, 89, 0.15) !important;
    transform: scale(1.05) !important;
}

.tft-dashboard-card__title {
    font-family: var(--svr-font-heading) !important;
    font-size: 1.4rem !important;
    font-weight: 500 !important;
    color: var(--svr-color-text-dark) !important;
    margin-bottom: 12px !important;
}

.tft-dashboard-card__desc {
    font-size: 0.88rem !important;
    line-height: 1.65 !important;
    color: #666666 !important;
    margin-bottom: 25px !important;
}

.tft-dashboard-card__link {
    font-size: 0.75rem !important;
    color: var(--svr-color-accent-gold) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    transition: color 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.tft-dashboard-card__link i {
    transition: transform 0.3s ease !important;
}

.tft-dashboard-card:hover .tft-dashboard-card__link i {
    transform: translateX(4px) !important;
}

.tft-dashboard-card:hover .tft-dashboard-card__link {
    color: var(--svr-color-text-dark) !important;
}

/* Address Card Premium overrides */
.tft-addresses-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 30px !important;
}

.tft-address-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 24px !important;
    padding: 35px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.01) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tft-address-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 40px rgba(197, 160, 89, 0.05) !important;
    border-color: rgba(197, 160, 89, 0.2) !important;
}

.tft-address-card__title {
    font-family: var(--svr-font-heading) !important;
    font-size: 1.4rem !important;
    font-weight: 500 !important;
    color: var(--svr-color-text-dark) !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    padding-bottom: 12px !important;
}

.tft-address-card__content {
    font-style: normal !important;
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    color: #555555 !important;
    margin-bottom: 25px !important;
}

.tft-address-card__link {
    font-size: 0.75rem !important;
    color: var(--svr-color-accent-gold) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: color 0.3s ease !important;
}

.tft-address-card:hover .tft-address-card__link {
    color: var(--svr-color-text-dark) !important;
}

/* Premium Downloads Overrides */
.tft-downloads-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.tft-download-item {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 24px !important;
    padding: 25px 35px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.01) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tft-download-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 40px rgba(197, 160, 89, 0.05) !important;
    border-color: rgba(197, 160, 89, 0.2) !important;
}

.tft-download-item__icon {
    border-radius: 50% !important;
    background: rgba(197, 160, 89, 0.07) !important;
    transition: all 0.3s ease !important;
}

.tft-download-item:hover .tft-download-item__icon {
    background: rgba(197, 160, 89, 0.15) !important;
    color: var(--svr-color-text-dark) !important;
}

.tft-download-item__title {
    font-family: var(--svr-font-heading) !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
}

/* Luxury Table Overrides */
.tft-table-wrapper {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.01) !important;
}

.tft-woocommerce-table th {
    font-family: var(--svr-font-heading) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--svr-color-text-dark) !important;
    border-bottom: 2px solid rgba(197, 160, 89, 0.15) !important;
    padding: 20px 25px !important;
}

.tft-woocommerce-table td {
    padding: 20px 25px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    font-size: 0.95rem !important;
}

.tft-status-badge {
    border-radius: 30px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding: 8px 16px !important;
}

.tft-status-badge--processing {
    background: rgba(197, 160, 89, 0.08) !important;
    color: var(--svr-color-accent-gold) !important;
}

.tft-status-badge--completed {
    background: rgba(46, 117, 89, 0.08) !important;
    color: #2e7559 !important;
}

/* ==========================================================================
   SECTION F — PREMIUM WOOCOMMERCE SHOP OVERRIDES
   ========================================================================== */
.svr-product-card-img-wrap {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.svr-product-card-img-wrap img {
    border-radius: 24px !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.svr-product-card-img-wrap:hover {
    box-shadow: 0 20px 40px rgba(197, 160, 89, 0.08) !important;
    border-color: rgba(197, 160, 89, 0.15) !important;
}

/* Luxury Wishlist Button Pure CSS Overlay */
.svr-product-card-img-wrap::after {
    content: '\f004' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 400 !important;
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 44px !important;
    height: 44px !important;
    background: #ffffff !important;
    color: var(--svr-color-text-dark) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important;
    opacity: 0 !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    z-index: 3 !important;
}

.svr-product-card-img-wrap:hover::after {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.svr-product-card-img-wrap:hover::after:hover {
    background: var(--svr-color-accent-gold) !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
}

/* Glassmorphic Add to Bag Button */
.svr-add-btn {
    bottom: 20px !important;
    left: 20px !important;
    right: 20px !important;
    background: rgba(13, 12, 10, 0.85) !important;
    color: var(--svr-color-accent-gold) !important;
    border: 1px solid rgba(197, 160, 89, 0.25) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 30px !important;
    padding: 16px !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.12em !important;
    font-weight: 700 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}

.svr-add-btn:hover {
    background: var(--svr-color-accent-gold) !important;
    color: #0d0c0a !important;
    border-color: var(--svr-color-accent-gold) !important;
    box-shadow: 0 12px 30px rgba(197, 160, 89, 0.25) !important;
    transform: scale(1.02) !important;
}

/* Product Info & Meta Labels */
.svr-product-card-img-wrap + h3 {
    margin-top: 15px !important;
}

.svr-product-card-img-wrap + h3 a {
    font-family: var(--svr-font-heading) !important;
    font-size: 1.55rem !important;
    font-weight: 400 !important;
    color: var(--svr-color-text-dark) !important;
    transition: color 0.3s ease !important;
    letter-spacing: -0.01em !important;
}

.svr-product-card-img-wrap + h3 a:hover {
    color: var(--svr-color-accent-gold) !important;
}

.svr-product-card-img-wrap + h3 + span {
    font-family: var(--svr-font-body) !important;
    font-weight: 500 !important;
    font-size: 1.15rem !important;
    color: var(--svr-color-text-muted-light) !important;
    margin-top: 5px !important;
    display: block !important;
}

/* Sort By custom style chevron */
.svr-avant-shop select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c5a059' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    background-size: 12px !important;
    padding: 12px 45px 12px 25px !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    font-size: 0.90rem !important;
    color: var(--svr-color-text-dark) !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.01) !important;
    cursor: pointer !important;
    outline: none !important;
}

.svr-avant-shop select:hover {
    border-color: var(--svr-color-accent-gold) !important;
    box-shadow: 0 4px 20px rgba(197, 160, 89, 0.06) !important;
}

/* Categories Overrides */
.svr-avant-shop ul li a {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.svr-avant-shop ul li a:hover {
    color: var(--svr-color-accent-gold) !important;
    padding-left: 6px !important;
}

.svr-avant-shop ul li a span {
    background: rgba(0, 0, 0, 0.03) !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: var(--svr-color-text-muted-light) !important;
    transition: all 0.3s ease !important;
}

.svr-avant-shop ul li a:hover span {
    background: rgba(197, 160, 89, 0.1) !important;
    color: var(--svr-color-accent-gold) !important;
}

/* Filter Input & Button overrides */
.svr-avant-shop input[type="number"] {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    padding: 12px 15px !important;
    font-size: 0.9rem !important;
    transition: all 0.3s ease !important;
}

.svr-avant-shop input[type="number"]:focus {
    border-color: var(--svr-color-accent-gold) !important;
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.1) !important;
}

.svr-avant-shop button {
    background: #0d0c0a !important;
    border: 1px solid rgba(197, 160, 89, 0.15) !important;
    color: var(--svr-color-accent-gold) !important;
    letter-spacing: 0.15em !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 30px !important;
    padding: 15px !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.svr-avant-shop button:hover {
    background: var(--svr-color-accent-gold) !important;
    color: #0d0c0a !important;
    border-color: var(--svr-color-accent-gold) !important;
    box-shadow: 0 10px 25px rgba(197, 160, 89, 0.18) !important;
}

/* Trending Tags Overrides */
.svr-avant-shop h3 + div[style*="flex-wrap: wrap"] a {
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: #ffffff !important;
    color: #555555 !important;
    border-radius: 30px !important;
    padding: 8px 18px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: all 0.3s ease !important;
}

.svr-avant-shop h3 + div[style*="flex-wrap: wrap"] a:hover {
    border-color: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-accent-gold) !important;
    background: rgba(197, 160, 89, 0.03) !important;
    box-shadow: 0 4px 12px rgba(197, 160, 89, 0.05) !important;
}

/* Sidebar Featured banner styling overrides */
.svr-avant-shop div[style*="text-align: center"] {
    background: linear-gradient(145deg, #090807 0%, #151310 100%) !important;
    border: 1px solid rgba(197, 160, 89, 0.15) !important;
    border-radius: 30px !important;
    padding: 40px 30px !important;
    color: #ffffff !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;
}

.svr-avant-shop div[style*="text-align: center"] h4 {
    color: #ffffff !important;
    font-weight: 300 !important;
    font-family: var(--svr-font-heading) !important;
    margin: 0 0 15px !important;
}

.svr-avant-shop div[style*="text-align: center"] p {
    color: rgba(255, 255, 255, 0.6) !important;
    margin-bottom: 25px !important;
}

.svr-avant-shop div[style*="text-align: center"] a {
    color: var(--svr-color-accent-gold) !important;
    border-bottom: 1px solid var(--svr-color-accent-gold) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding-bottom: 3px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.svr-avant-shop div[style*="text-align: center"] a:hover {
    color: #ffffff !important;
    border-bottom-color: #ffffff !important;
}

/* ==========================================================================
   SECTION G — PREMIUM SINGLE PRODUCT & LIGHTBOX OVERRIDES
   ========================================================================== */
/* Toast Notifications */
.tft-toast-container {
    position: fixed !important;
    top: 30px !important;
    right: 30px !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    pointer-events: none !important;
}

.tft-toast {
    background: #0d0c0a !important;
    color: #ffffff !important;
    border: 1px solid rgba(197, 160, 89, 0.2) !important;
    border-radius: 16px !important;
    padding: 16px 24px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2) !important;
    display: flex !important;
    align-items: center !important;
    transform: translateX(100px) !important;
    opacity: 0 !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: auto !important;
    backdrop-filter: blur(10px) !important;
}

.tft-toast.show {
    transform: translateX(0) !important;
    opacity: 1 !important;
}

/* Lightbox Modal */
.tft-lightbox {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(13, 12, 10, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.4s ease !important;
}

.tft-lightbox.show {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.tft-lightbox img {
    max-width: 85% !important;
    max-height: 85% !important;
    object-fit: contain !important;
    transform: scale(0.95) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tft-lightbox.show img {
    transform: scale(1) !important;
}

.tft-lightbox-close {
    position: absolute !important;
    top: 30px !important;
    right: 30px !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 2rem !important;
    cursor: pointer !important;
    opacity: 0.7 !important;
    transition: opacity 0.3s ease !important;
}

.tft-lightbox-close:hover {
    opacity: 1 !important;
}

/* Single Product Page specific transitions */
.tft-lux-sp-main-img img {
    transition: opacity 0.2s ease !important;
}

.tft-lux-sp-thumbnails > div {
    transition: all 0.3s ease !important;
    opacity: 0.6;
}

.tft-lux-sp-thumbnails > div:hover {
    opacity: 1 !important;
    border-color: rgba(197, 160, 89, 0.4) !important;
}

.tft-lux-sp-thumbnails > div.active {
    opacity: 1 !important;
    border-color: var(--svr-color-accent-gold) !important;
}

/* Quantity Input Styles */
.tft-lux-sp-qty {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.01) !important;
    transition: all 0.3s ease !important;
}

.tft-lux-sp-qty:focus-within {
    border-color: var(--svr-color-accent-gold) !important;
    box-shadow: 0 4px 20px rgba(197, 160, 89, 0.08) !important;
}

.tft-lux-sp-qty button {
    transition: all 0.2s ease !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.tft-lux-sp-qty button:hover {
    color: var(--svr-color-accent-gold) !important;
    background: rgba(197, 160, 89, 0.05) !important;
}

/* Add to Cart Premium Overrides */
.tft-lux-sp-cart-form button[type="button"]:not([style*="width: 60px"]) {
    background: #0d0c0a !important;
    color: #ffffff !important;
    border: 1px solid rgba(197, 160, 89, 0.15) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tft-lux-sp-cart-form button[type="button"]:not([style*="width: 60px"]):hover:not(:disabled) {
    background: var(--svr-color-accent-gold) !important;
    color: #0d0c0a !important;
    border-color: var(--svr-color-accent-gold) !important;
    box-shadow: 0 10px 25px rgba(197, 160, 89, 0.18) !important;
}

/* Wishlist Button Single Product */
.tft-lux-sp-cart-form button[style*="width: 60px"] {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: #ffffff !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tft-lux-sp-cart-form button[style*="width: 60px"]:hover {
    background: rgba(197, 160, 89, 0.03) !important;
    border-color: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-accent-gold) !important;
}

/* Premium Responsive Single Product Layout */
.tft-single-product-container {
    margin: clamp(20px, 4vw, 40px) clamp(15px, 3vw, 30px) !important;
    border-radius: clamp(20px, 4vw, 40px) !important;
    background: #ffffff !important;
    color: #0a0a0a !important;
    box-shadow: 0 40px 100px rgba(0,0,0,0.06) !important;
    padding: clamp(30px, 6vw, 80px) clamp(20px, 8vw, 100px) !important;
}

.tft-sp-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 450px), 1fr)) !important;
    gap: clamp(40px, 8vw, 80px) !important;
    align-items: start !important;
}

/* Gallery styling */
.tft-sp-gallery {
    position: sticky !important;
    top: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

@media (max-width: 1024px) {
    .tft-sp-gallery {
        position: relative !important;
        top: 0 !important;
    }
}

.tft-sp-main-img-wrap {
    border-radius: 24px !important;
    overflow: hidden !important;
    background: var(--svr-color-card-light) !important;
    border: 1px solid var(--svr-color-border-light) !important;
    padding: 0 !important;
    height: 480px !important;
    position: relative !important;
    display: block !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.tft-sp-main-img-wrap:hover {
    border-color: rgba(197, 160, 89, 0.2) !important;
    box-shadow: 0 15px 35px rgba(197, 160, 89, 0.04) !important;
}

.tft-sp-main-img-wrap .tft-sp-main-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    z-index: 1 !important;
}

/* Breadcrumbs */
.tft-sp-breadcrumbs {
    font-size: clamp(0.7rem, 1.5vw, 0.78rem) !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #999999 !important;
    margin-bottom: 20px !important;
    font-weight: 600 !important;
}

.tft-sp-breadcrumbs a {
    color: #0a0a0a !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.tft-sp-breadcrumbs a:hover {
    color: var(--svr-color-accent-gold) !important;
}

/* Category Label */
.tft-sp-cat-label {
    font-size: 0.72rem !important;
    letter-spacing: 0.25em !important;
    text-transform: uppercase !important;
    color: var(--svr-color-accent-gold) !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
    display: block !important;
}

/* Title */
.tft-sp-title {
    font-family: var(--svr-font-heading) !important;
    font-size: clamp(2rem, 4vw, 3.5rem) !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    margin: 0 0 15px !important;
    letter-spacing: -0.02em !important;
    font-weight: 300 !important;
}

.tft-sp-title em {
    font-family: 'Cormorant', serif !important;
    font-style: italic !important;
    color: var(--svr-color-accent-gold) !important;
    text-transform: lowercase !important;
}

/* Rating box */
.tft-sp-rating-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 25px !important;
}

.tft-sp-stars {
    color: var(--svr-color-accent-gold) !important;
    font-size: 0.85rem !important;
}

.tft-sp-review-count {
    color: #777777 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* Price */
.tft-sp-price {
    font-family: var(--svr-font-heading) !important;
    font-size: clamp(1.8rem, 3.5vw, 2.5rem) !important;
    font-weight: 400 !important;
    color: #0a0a0a !important;
    margin-bottom: 30px !important;
}

/* Short description */
.tft-sp-short-desc {
    color: #555555 !important;
    line-height: 1.8 !important;
    margin-bottom: 35px !important;
    font-size: 1rem !important;
}

/* Specs Checklist */
.tft-sp-checklist {
    list-style: none !important;
    padding: 0 !important;
    margin: 25px 0 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.tft-sp-checklist li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 0.92rem !important;
    color: #444444 !important;
}

.tft-sp-checklist li i {
    color: var(--svr-color-accent-gold) !important;
    font-size: 0.9rem !important;
}

/* Action forms */
.tft-sp-cart-form-row {
    display: flex !important;
    gap: 16px !important;
    align-items: center !important;
    margin: 40px 0 !important;
    flex-wrap: wrap !important;
}

/* Meta list */
.tft-sp-meta-list {
    border-top: 1px solid rgba(0,0,0,0.05) !important;
    padding-top: 25px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    font-size: 0.85rem !important;
    color: #777777 !important;
}

.tft-sp-meta-list strong {
    color: #0a0a0a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-right: 8px !important;
}

.tft-sp-meta-list a {
    color: var(--svr-color-accent-gold) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.tft-sp-meta-list a:hover {
    color: #0a0a0a !important;
}

/* Tabbed Layout Section */
.tft-sp-tabs-section {
    margin-top: clamp(50px, 8vw, 80px) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding-top: clamp(40px, 6vw, 60px) !important;
}

.tft-sp-tab-nav {
    display: flex !important;
    justify-content: center !important;
    gap: clamp(20px, 4vw, 50px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 40px !important;
    padding-bottom: 15px !important;
}

.tft-sp-tab-btn {
    background: transparent !important;
    border: none !important;
    font-family: var(--svr-font-heading) !important;
    font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #999999 !important;
    cursor: pointer !important;
    padding: 0 5px 12px 5px !important;
    position: relative !important;
    transition: color 0.3s ease !important;
}

.tft-sp-tab-btn::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: var(--svr-color-accent-gold) !important;
    transform: scaleX(0) !important;
    transform-origin: right !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tft-sp-tab-btn.active {
    color: #0a0a0a !important;
}

.tft-sp-tab-btn.active::after {
    transform: scaleX(1) !important;
    transform-origin: left !important;
}

.tft-sp-tab-panel {
    display: none !important;
    animation: tftFadeIn 0.5s ease forwards !important;
}

.tft-sp-tab-panel.active {
    display: block !important;
}

@keyframes tftFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.tft-sp-panel-narrative {
    font-size: 1.05rem !important;
    line-height: 1.8 !important;
    color: #555555 !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}

.tft-sp-panel-narrative p {
    margin-bottom: 20px !important;
}

/* Specifications Table */
.tft-sp-specs-table {
    width: 100% !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    border-collapse: collapse !important;
}

.tft-sp-specs-table tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.tft-sp-specs-table tr:last-child {
    border-bottom: none !important;
}

.tft-sp-specs-table td {
    padding: 16px 0 !important;
    font-size: 0.95rem !important;
}

.tft-sp-specs-table td:first-child {
    font-weight: 700 !important;
    color: #0a0a0a !important;
    width: clamp(150px, 30%, 250px) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.tft-sp-specs-table td:last-child {
    color: #555555 !important;
}

/* Care Guide */
.tft-sp-care-list {
    max-width: 750px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 30px !important;
    list-style: none !important;
    padding: 0 !important;
}

.tft-sp-care-item {
    background: #faf9f7 !important;
    padding: 24px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(197, 160, 89, 0.08) !important;
}

.tft-sp-care-item h4 {
    font-family: var(--svr-font-heading) !important;
    font-size: 1.15rem !important;
    text-transform: uppercase !important;
    margin: 0 0 10px 0 !important;
    color: #0a0a0a !important;
    font-weight: 600 !important;
}

.tft-sp-care-item p {
    font-size: 0.9rem !important;
    color: #555555 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* ==========================================================================
   TFT - LUXURY RESPONSIVE MOBILE NAVIGATION
   ========================================================================== */

/* Toggle Button */
.tft-mobile-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 44px;
    height: 44px;
    padding: 13px 11px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1001;
}

body.svr-dark-theme .tft-mobile-nav-toggle {
    border-color: rgba(255, 255, 255, 0.15);
}

.tft-mobile-nav-toggle-bar {
    width: 100%;
    height: 2px;
    background-color: var(--svr-color-sidebar);
    transition: all 0.3s ease;
    transform-origin: center;
}

body.svr-dark-theme .tft-mobile-nav-toggle-bar {
    background-color: var(--svr-color-text-light);
}

/* Close state animation */
.tft-mobile-nav-toggle.tft-active .tft-mobile-nav-toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
    background-color: var(--svr-color-text-light);
}

.tft-mobile-nav-toggle.tft-active .tft-mobile-nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.tft-mobile-nav-toggle.tft-active .tft-mobile-nav-toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
    background-color: var(--svr-color-text-light);
}

/* Mobile Overlay Menu */
.tft-mobile-overlay-menu {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.tft-mobile-overlay-menu.tft-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.tft-mom-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 40px 30px;
    max-width: 500px;
    margin-inline-start: auto;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.tft-mom-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 36px 24px;
    max-width: 320px;
    margin-inline-start: auto;
    box-shadow: -10px 0 45px rgba(0, 0, 0, 0.55);
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    background: #0d0d0d; /* solid dark background */
}

.tft-mobile-overlay-menu.tft-active .tft-mom-container {
    transform: translateX(0);
}

.tft-mom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.tft-mom-logo {
    font-family: var(--svr-font-heading);
    font-size: 2.0rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--svr-color-accent-gold); /* Gold logo */
}

.tft-mom-close {
    background: transparent;
    border: none;
    font-size: 2.2rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: color 0.3s;
}

.tft-mom-close:hover {
    color: var(--svr-color-accent-gold);
}

.tft-mom-nav {
    flex: 1;
    overflow-y: auto;
    padding-inline-end: 5px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Hide scrollbar for tft-mom-nav */
.tft-mom-nav::-webkit-scrollbar {
    width: 0;
    display: none;
}

.tft-mom-item {
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding-block: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.tft-mom-link {
    font-family: var(--svr-font-heading);
    font-size: 1.05rem;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.05em;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    width: calc(100% - 45px); /* Leave room for toggle */
}

.tft-mom-link i {
    font-size: 0.95rem;
    color: var(--svr-color-accent-gold);
    opacity: 0.8;
}

.tft-mom-link:hover, .tft-mom-link--active {
    color: var(--svr-color-accent-gold);
    background: rgba(230, 185, 83, 0.08); /* warm gold container */
}

.tft-mom-toggle {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 10px;
    transition: all 0.3s;
}

.tft-mom-toggle:hover {
    color: var(--svr-color-accent-gold);
}

.tft-mom-toggle i {
    transition: transform 0.3s ease;
}

.tft-mom-sub {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-inline-start: 46px;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.tft-mom-sub.tft-active {
    max-height: 350px;
    margin-block-start: 10px;
    margin-block-end: 10px;
}

.tft-mom-sub a {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.3s;
}

.tft-mom-sub a:hover, .tft-mom-sub-link--active {
    color: var(--svr-color-accent-gold) !important;
}

/* Profile widget inside mobile menu drawer */
.tft-mom-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    margin-block-start: 25px;
    margin-block-end: 14px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.tft-mom-profile__img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.tft-mom-profile__info h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 2px 0;
}

.tft-mom-profile__info p {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
}

/* Quote card inside mobile menu drawer */
.tft-mom-quote {
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.15);
    position: relative;
}

.tft-mom-quote p {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 4px 0;
}

.tft-mom-quote strong {
    display: block;
    font-family: var(--svr-font-heading);
    font-size: 1.1rem;
    line-height: 1.2;
    color: var(--svr-color-accent-gold);
}

.tft-mom-quote__heart {
    position: absolute;
    right: 18px;
    top: 18px;
    color: var(--svr-color-accent-gold);
    font-size: 0.85rem;
}

/* Responsive Overrides */
@media (max-width: 991px) {
    .svr-top-nav__links {
        display: none !important;
    }
    
    .tft-mobile-nav-toggle {
        display: flex;
    }
    
    .svr-top-nav {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: auto !important;
        margin: 30px 30px 15px !important;
        padding: 15px 30px !important;
    }
    
    .svr-top-nav__actions {
        width: auto !important;
        justify-content: flex-end !important;
        margin-top: 0 !important;
        gap: 15px !important;
    }
}

@media (max-width: 480px) {
    .tft-mom-container {
        padding: 30px 20px;
    }
    
    .tft-mom-logo {
        font-size: 1.8rem;
    }
    
    .tft-mom-link {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   TFT - PREMIUM SINGLE PRODUCT IMAGE GALLERY & LIGHTBOX
   ========================================================================== */

/* Main image frame override */
.tft-sp-main-img-wrap {
    position: relative !important;
    border-radius: var(--svr-radius-lg) !important;
    overflow: hidden !important;
    background: var(--svr-color-card-light) !important;
    border: 1px solid var(--svr-color-border-light) !important;
    padding: 0 !important;
    height: 480px !important;
    display: block !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tft-sp-main-img-wrap:hover {
    border-color: var(--svr-color-accent-gold) !important;
    box-shadow: 0 20px 40px rgba(197, 160, 89, 0.05) !important;
}

.tft-sp-main-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: opacity, transform;
    z-index: 1 !important;
}

.tft-sp-main-img-wrap:hover .tft-sp-main-img {
    transform: scale(1.03) !important;
}

/* Zoom button styling */
.tft-sp-zoom-btn {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background: var(--svr-color-text-light) !important;
    border: 1px solid var(--svr-color-border-light) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--svr-color-text-dark) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 10 !important;
}

.tft-sp-zoom-btn:hover {
    transform: scale(1.1) !important;
    color: var(--svr-color-accent-gold) !important;
    box-shadow: 0 12px 25px rgba(197, 160, 89, 0.15) !important;
}

/* Floating Thumbnails Panel inside Main Image Frame */
.tft-sp-thumbs-panel {
    position: absolute !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    padding: 8px 12px !important;
    border-radius: var(--svr-radius-md) !important;
    display: flex !important;
    gap: 10px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    z-index: 10 !important;
}

.tft-sp-thumb-item {
    width: 56px !important;
    height: 56px !important;
    border-radius: var(--svr-radius-sm) !important;
    background: var(--svr-color-text-light) !important;
    border: 2px solid transparent !important;
    padding: 4px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.7 !important;
}

.tft-sp-thumb-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: calc(var(--svr-radius-sm) - 4px) !important;
}

.tft-sp-thumb-item:hover {
    opacity: 1 !important;
    transform: translateY(-2px) !important;
}

.tft-sp-thumb-item.tft-active {
    border-color: var(--svr-color-accent-gold) !important;
    opacity: 1 !important;
    box-shadow: 0 4px 12px rgba(197, 160, 89, 0.15) !important;
}

/* Luxury Lightbox Zoom Panel */
.tft-sp-lightbox {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(10, 10, 10, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tft-sp-lightbox.tft-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.tft-sp-lightbox-img {
    max-width: 85vw !important;
    max-height: 80vh !important;
    object-fit: contain !important;
    border-radius: var(--svr-radius-md) !important;
    transform: scale(0.96) !important;
    opacity: 0 !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
}

.tft-sp-lightbox.tft-active .tft-sp-lightbox-img {
    transform: scale(1) !important;
    opacity: 1 !important;
}

/* Lightbox navigation controls */
.tft-sp-lightbox-close {
    position: absolute !important;
    top: 30px !important;
    right: 30px !important;
    background: transparent !important;
    border: none !important;
    font-size: 2.8rem !important;
    line-height: 1 !important;
    color: var(--svr-color-text-light) !important;
    cursor: pointer !important;
    transition: color 0.3s ease !important;
    z-index: 100000 !important;
}

.tft-sp-lightbox-close:hover {
    color: var(--svr-color-accent-gold) !important;
}

.tft-sp-lightbox-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    color: var(--svr-color-text-light) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.3rem !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 100000 !important;
}

.tft-sp-lightbox-arrow:hover {
    background: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-bg-dark) !important;
    border-color: var(--svr-color-accent-gold) !important;
    box-shadow: 0 10px 25px rgba(197, 160, 89, 0.3) !important;
}

.tft-sp-lightbox-prev {
    left: 40px !important;
}

.tft-sp-lightbox-next {
    right: 40px !important;
}

@media (max-width: 768px) {
    .tft-sp-lightbox-arrow {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.1rem !important;
    }
    
    .tft-sp-lightbox-prev {
        left: 20px !important;
    }
    
    .tft-sp-lightbox-next {
        right: 20px !important;
    }
    
    .tft-sp-lightbox-close {
        top: 20px !important;
        right: 20px !important;
        font-size: 2.2rem !important;
    }
}

/* Quantity Selector Capsule Override */
.tft-lux-sp-qty {
    display: flex !important;
    align-items: center !important;
    background: var(--svr-color-text-light) !important;
    border: 1px solid var(--svr-color-border-light) !important;
    border-radius: var(--svr-radius-pill) !important;
    height: 56px !important;
    padding: 0 8px !important;
    box-shadow: none !important;
    width: 140px !important;
    justify-content: space-between !important;
}

.tft-lux-sp-qty button {
    background: transparent !important;
    border: none !important;
    color: var(--svr-color-text-dark) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.3rem !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.tft-lux-sp-qty button:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    color: var(--svr-color-accent-gold) !important;
}

.tft-lux-sp-qty input {
    font-family: var(--svr-font-body) !important;
    color: var(--svr-color-text-dark) !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   TFT - HOME WOOCOMMERCE PRODUCT SHOWCASE
   ========================================================================== */

.tft-home-products {
    padding: clamp(50px, 6vw, 80px) clamp(30px, 5vw, 70px);
    background: var(--svr-color-bg-light);
}

.tft-home-products__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-block-end: clamp(30px, 4vw, 50px);
    flex-wrap: wrap;
    gap: 20px;
}

.tft-home-products__eyebrow {
    display: block;
    font-size: clamp(0.65rem, 1.2vw, 0.75rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--svr-color-accent-gold);
    font-weight: 700;
    margin-block-end: 10px;
}

.tft-home-products__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    line-height: 1.1;
    color: var(--svr-color-text-dark);
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
}

.tft-home-products__title em {
    font-style: italic;
    color: var(--svr-color-accent-gold);
}

.tft-home-products__see-all {
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--svr-color-text-dark);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-block-end: 4px;
    border-block-end: 1px solid var(--svr-color-text-dark);
    transition: color 0.3s ease, border-color 0.3s ease;
    white-space: nowrap;
}

.tft-home-products__see-all:hover {
    color: var(--svr-color-accent-gold);
    border-color: var(--svr-color-accent-gold);
}

.tft-home-products__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2vw, 28px);
}

/* === Product Card === */
.tft-hprod-card {
    background: var(--svr-color-card-light);
    border-radius: var(--svr-radius-md);
    overflow: hidden;
    border: 1px solid var(--svr-color-border-light);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.tft-hprod-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

/* === Card Media === */
.tft-hprod-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--svr-color-bg-light);
    margin: 0;
}

.tft-hprod-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    mix-blend-mode: multiply;
    transform: scale(1.1);
}

.tft-hprod-card:hover .tft-hprod-card__img {
    transform: scale(1.18);
}

/* === Hover Overlay: Add to Cart === */
.tft-hprod-card__overlay {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 16px;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.7) 0%, transparent 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.tft-hprod-card:hover .tft-hprod-card__overlay {
    opacity: 1;
    transform: translateY(0);
}

.tft-btn--cart {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--svr-color-text-light);
    color: var(--svr-color-text-dark);
    padding: 12px 22px;
    border-radius: var(--svr-radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.tft-btn--cart:hover {
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-bg-dark);
    border-color: var(--svr-color-accent-gold);
}

/* === Floating Action Buttons (Wish / Quick View) === */
.tft-hprod-card__actions {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-end: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateX(8px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 5;
}

.tft-hprod-card:hover .tft-hprod-card__actions {
    opacity: 1;
    transform: translateX(0);
}

.tft-hprod-card__action-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--svr-color-text-light);
    border: 1px solid var(--svr-color-border-light);
    color: var(--svr-color-text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.tft-hprod-card__action-btn:hover {
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-bg-dark);
    border-color: var(--svr-color-accent-gold);
    transform: scale(1.1);
}

.tft-hprod-card__action-btn--wish.tft-active i {
    font-weight: 900;
    color: #e74c3c;
}

/* === Badges === */
.tft-hprod-card__badge {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-start: 14px;
    padding: 4px 10px;
    border-radius: 30px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    z-index: 5;
}

.tft-hprod-card__badge--new {
    background: var(--svr-color-text-dark);
    color: var(--svr-color-text-light);
}

.tft-hprod-card__badge--sale {
    background: #e74c3c;
    color: var(--svr-color-text-light);
}

.tft-hprod-card__badge--hot {
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-bg-dark);
}

/* === Card Content === */
.tft-hprod-card__content {
    padding: 18px 20px 22px;
}

.tft-hprod-card__stars {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-block-end: 8px;
    color: var(--svr-color-accent-gold);
    font-size: 0.75rem;
}

.tft-hprod-card__reviews {
    color: var(--svr-color-text-muted);
    font-size: 0.72rem;
    margin-inline-start: 4px;
}

.tft-hprod-card__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    font-weight: 600;
    margin: 0 0 6px;
    line-height: 1.3;
    color: var(--svr-color-text-dark);
}

.tft-hprod-card__title a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

.tft-hprod-card__title a:hover {
    color: var(--svr-color-accent-gold);
}

.tft-hprod-card__meta {
    font-size: 0.72rem;
    color: var(--svr-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-block-end: 12px;
}

.tft-hprod-card__price {
    font-family: var(--svr-font-heading);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 700;
    color: var(--svr-color-text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.tft-hprod-card__price--old {
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--svr-color-text-muted);
    text-decoration: line-through;
}

.tft-hprod-card__price--new {
    color: #e74c3c;
    text-decoration: none;
    font-style: normal;
}

/* === Responsive === */
@media (max-width: 1200px) {
    .tft-home-products__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .tft-home-products__grid {
        grid-template-columns: 1fr;
    }

    .tft-home-products {
        padding: 40px 20px;
    }
}

/* ==========================================================================
   AVANT-GARDE PREMIUM BOXED LAYOUT (LOGIN, REGISTER, COMING SOON)
   ========================================================================== */
.svr-avant-auth-container {
    margin: clamp(20px, 4vw, 60px) auto;
    width: 100%;
    max-width: 1060px;
    background-color: var(--svr-color-card-light);
    border-radius: clamp(20px, 3vw, 40px);
    overflow: clip;
    box-shadow: 0 40px 100px color-mix(in srgb, var(--svr-color-text-dark) 6%, transparent);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    animation: svrFadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.tft-auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: clamp(20px, 4vw, 40px) 20px;
    box-sizing: border-box;
    background: radial-gradient(circle at center, var(--svr-color-bg-light) 0%, color-mix(in srgb, var(--svr-color-text-dark) 8%, var(--svr-color-bg-light)) 100%);
}

.svr-avant-auth-container .tft-auth-layout {
    min-height: 680px;
    max-height: 800px;
    height: 100%;
}

/* --- Boxed Coming Soon --- */
.svr-avant-cs-container {
    margin: clamp(20px, 4vw, 60px) auto;
    width: 100%;
    max-width: 1060px;
    background-color: var(--svr-color-bg-dark);
    border-radius: clamp(20px, 3vw, 40px);
    overflow: clip;
    box-shadow: 0 40px 100px color-mix(in srgb, var(--svr-color-text-dark) 30%, transparent);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    animation: svrFadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.tft-coming-soon-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: clamp(20px, 4vw, 40px) 20px;
    box-sizing: border-box;
    background: radial-gradient(circle at center, var(--svr-color-bg-light) 0%, color-mix(in srgb, var(--svr-color-text-dark) 8%, var(--svr-color-bg-light)) 100%);
}

.svr-avant-cs-container .tft-cs-layout {
    min-height: 650px;
    max-height: 750px;
    height: 100%;
}

@keyframes svrFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Split Column Proportion Refinements */
.tft-auth-media,
.tft-cs-media {
    flex: 1.1;
    position: relative;
    overflow: hidden;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Cinematic media overlay */
.tft-auth-media__overlay,
.tft-cs-overlay {
    background: linear-gradient(180deg, color-mix(in srgb, var(--svr-color-text-dark) 10%, transparent) 0%, color-mix(in srgb, var(--svr-color-text-dark) 85%, transparent) 100%);
    opacity: 0.9;
}

.tft-auth-media__content,
.tft-cs-inner {
    position: relative;
    z-index: 5;
    animation: svrFadeIn 1s ease 0.2s both;
}

@keyframes svrFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tft-auth-media__badge,
.tft-cs-badge {
    letter-spacing: 0.25em;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--svr-color-accent-gold);
    display: inline-block;
    margin-block-end: 12px;
}

.tft-auth-media__title,
.tft-cs-title {
    font-family: var(--svr-font-heading);
    font-size: clamp(2.2rem, 3.5vw, 3.2rem);
    line-height: 1.15;
    color: var(--svr-color-text-light);
    margin-block-end: 16px;
    font-weight: 300;
}

.tft-auth-media__desc,
.tft-cs-desc {
    font-size: 0.95rem;
    color: color-mix(in srgb, var(--svr-color-text-light) 70%, transparent);
    line-height: 1.6;
    margin-block-end: 0;
}

/* Form Side Improvements */
.tft-auth-form-side {
    flex: 1;
    background-color: var(--svr-color-card-light);
    padding: 50px clamp(30px, 5vw, 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.tft-auth-container {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
}

/* Logo & Back Button Top Bar */
.tft-auth-top-bar {
    position: absolute;
    inset-block-start: 35px;
    inset-inline-start: 50px;
    inset-inline-end: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

.tft-auth-logo {
    font-family: var(--svr-font-heading);
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    color: var(--svr-color-text-dark);
}

.tft-auth-back {
    font-size: 0.85rem;
    color: var(--svr-color-text-muted-light);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s ease, color 0.2s ease;
}
.tft-auth-back:hover {
    color: var(--svr-color-text-dark);
    transform: translateX(-3px);
    background-color: transparent;
}

/* Header Text Inside Form */
.tft-auth-header {
    margin-block-end: 30px;
}
.tft-auth-header__title {
    font-family: var(--svr-font-heading);
    font-size: 2.2rem;
    font-weight: 500;
    color: var(--svr-color-text-dark);
    margin-block-end: 6px;
}
.tft-auth-header__desc {
    font-size: 0.9rem;
    color: var(--svr-color-text-muted-light);
}

/* Input Fields - Ultra Polished Outline styling */
.tft-auth-group {
    margin-block-end: 18px;
}
.tft-auth-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--svr-color-text-dark);
    margin-block-end: 6px;
    letter-spacing: 0.02em;
}

.tft-auth-input {
    border-radius: 12px;
    padding-block: 12px;
    padding-inline-start: 42px;
    font-size: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 8%, transparent);
    background-color: var(--svr-color-bg-light);
    transition: all 0.25s ease;
}
.tft-auth-icon {
    font-size: 0.95rem;
    inset-inline-start: 16px;
}

.tft-auth-input:focus {
    background-color: var(--svr-color-card-light);
    border-color: var(--svr-color-accent-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--svr-color-accent-gold) 15%, transparent);
}

/* Compact Buttons and Social Logins */
.tft-auth-btn {
    padding-block: 14px;
    border-radius: 12px;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    font-weight: 600;
    margin-block-start: 10px;
}

.tft-auth-divider {
    margin-block: 25px;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
}

.tft-auth-socials {
    margin-block-end: 25px;
    gap: 12px;
}

.tft-auth-social-btn {
    border-radius: 12px;
    padding-block: 10px;
    font-size: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 6%, transparent);
    background-color: var(--svr-color-card-light);
}
.tft-auth-social-btn:hover {
    background-color: var(--svr-color-bg-light);
    border-color: color-mix(in srgb, var(--svr-color-text-dark) 12%, transparent);
}

.tft-auth-switch {
    font-size: 0.85rem;
}

/* --- Coming Soon Styling Refinements --- */
.svr-avant-cs-container .tft-cs-content {
    background-color: var(--svr-color-bg-dark);
    padding: 60px clamp(40px, 6vw, 80px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tft-cs-logo {
    font-size: 1.5rem;
    color: var(--svr-color-text-light);
    letter-spacing: 0.15em;
    font-weight: 600;
}

.tft-cs-inner {
    max-width: 480px;
    margin: auto 0;
}

.tft-cs-title {
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--svr-color-text-light);
    font-weight: 300;
    line-height: 1.2;
}

.tft-cs-desc {
    color: color-mix(in srgb, var(--svr-color-text-light) 60%, transparent);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Timer Clock - Sophisticated Watchmaker style */
.tft-cs-countdown {
    display: flex;
    gap: 20px;
    margin-block-end: 35px;
}

.tft-csc-item {
    flex: 1;
    background: color-mix(in srgb, var(--svr-color-text-light) 2%, transparent);
    border: 1px solid color-mix(in srgb, var(--svr-color-text-light) 5%, transparent);
    border-radius: 16px;
    padding: 15px 10px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.tft-csc-item:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--svr-color-accent-gold) 30%, transparent);
}

.tft-csc-num {
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
    color: var(--svr-color-accent-gold);
    font-weight: 300;
    font-family: var(--svr-font-heading);
}

.tft-csc-label {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    color: color-mix(in srgb, var(--svr-color-text-light) 40%, transparent);
    margin-block-start: 4px;
}

/* Notify Input Group */
.tft-cs-notify-group {
    border-radius: 12px;
    background-color: color-mix(in srgb, var(--svr-color-text-light) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--svr-color-text-light) 8%, transparent);
    transition: border-color 0.25s ease;
    height: 52px;
    display: flex;
    overflow: hidden;
}
.tft-cs-notify-group:focus-within {
    border-color: var(--svr-color-accent-gold);
}

.tft-cs-notify-group input {
    font-size: 0.9rem;
    padding-inline: 18px;
}

.tft-cs-notify-group button.svr-btn-primary {
    font-size: 0.75rem;
    padding-inline: 25px;
    border-radius: 0;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}
.tft-cs-notify-group button.svr-btn-primary:hover {
    opacity: 0.9;
}

.tft-cs-footer {
    border-block-start: 1px solid color-mix(in srgb, var(--svr-color-text-light) 6%, transparent);
    padding-block-start: 25px;
    font-size: 0.75rem;
}

@media (max-width: 992px) {
    body.tft-auth-body,
    body.tft-coming-soon-body {
        padding: 15px;
    }
    
    .svr-avant-auth-container .tft-auth-layout {
        min-height: auto;
        max-height: none;
    }
    
    .tft-auth-form-side {
        padding: 60px 30px;
    }
    
    .tft-auth-top-bar {
        position: relative;
        inset: auto;
        margin-block-end: 40px;
        padding: 0;
    }
}

/* ==========================================================================
   KEN BURNS FULLSCREEN BACKGROUND
   ========================================================================== */
.svr-kenburns-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.svr-kb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    animation: svrKenBurns 20s ease-in-out infinite alternate;
    transform-origin: center;
}

.svr-kb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--svr-color-text-dark) 70%, transparent) 0%,
        color-mix(in srgb, var(--svr-color-text-dark) 40%, transparent) 50%,
        color-mix(in srgb, var(--svr-color-accent-gold) 15%, var(--svr-color-text-dark)) 100%
    );
}

.svr-kb-overlay--dark {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--svr-color-text-dark) 55%, transparent) 0%,
        color-mix(in srgb, var(--svr-color-text-dark) 80%, transparent) 100%
    );
}

@keyframes svrKenBurns {
    0%   { transform: scale(1)    translate(0%, 0%); }
    33%  { transform: scale(1.08) translate(-2%, 1%); }
    66%  { transform: scale(1.12) translate(2%, -1.5%); }
    100% { transform: scale(1.06) translate(-1%, 2%); }
}

/* ==========================================================================
   AUTH BODY — centered viewport
   ========================================================================== */
body.tft-auth-body,
body.tft-coming-soon-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    background: var(--svr-color-bg-light);
    position: relative;
}

/* ==========================================================================
   GLASSMORPHIC AUTH CARD (Login + Register)
   ========================================================================== */
.svr-glass-auth-wrap {
    position: relative;
    z-index: 10;
    display: flex;
    width: 100%;
    max-width: 980px;
    min-height: 600px;
    border-radius: 28px;
    overflow: clip;
    box-shadow: 0 30px 80px color-mix(in srgb, var(--svr-color-text-dark) 40%, transparent),
                0 0 0 1px color-mix(in srgb, var(--svr-color-text-light) 10%, transparent);
    animation: svrFadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Left/Right Brand Panel — dark glass */
.svr-glass-auth-brand {
    flex: 1.1;
    position: relative;
    background: color-mix(in srgb, var(--svr-color-text-dark) 65%, transparent);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-inline-end: 1px solid color-mix(in srgb, var(--svr-color-text-light) 8%, transparent);
    padding: 50px 45px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
}

/* Form Panel — light frosted glass */
.svr-glass-auth-form {
    flex: 1;
    background: color-mix(in srgb, var(--svr-color-card-light) 88%, transparent);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0;
}

.svr-glass-form-topbar {
    padding: 28px 40px 0;
    display: flex;
    justify-content: flex-end;
}

.svr-glass-form-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 45px 40px;
}

/* Logo — Premium with accented dot */
.svr-glass-logo {
    font-family: var(--svr-font-heading);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--svr-color-text-light);
    text-decoration: none;
    display: inline-block;
}

.svr-logo-accent {
    color: var(--svr-color-accent-gold);
    font-style: italic;
}

/* Back button */
.svr-glass-back-btn {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--svr-color-text-muted-light);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    transition: color 0.2s ease, gap 0.2s ease;
}
.svr-glass-back-btn:hover {
    color: var(--svr-color-text-dark);
    gap: 10px;
}

/* Brand copy */
.svr-glass-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--svr-color-accent-gold);
    display: block;
    margin-block-end: 14px;
}

.svr-glass-headline {
    font-family: var(--svr-font-heading);
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 300;
    line-height: 1.15;
    color: var(--svr-color-text-light);
    margin-block-end: 14px;
}

.svr-glass-headline em {
    color: var(--svr-color-accent-gold);
    font-style: italic;
}

.svr-glass-sub {
    font-size: 0.9rem;
    line-height: 1.65;
    color: color-mix(in srgb, var(--svr-color-text-light) 65%, transparent);
}

/* Stats row */
.svr-glass-brand-stats {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-block-start: 20px;
    border-block-start: 1px solid color-mix(in srgb, var(--svr-color-text-light) 10%, transparent);
}

.svr-glass-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.svr-glass-stat strong {
    font-family: var(--svr-font-heading);
    font-size: 1.3rem;
    color: var(--svr-color-text-light);
    font-weight: 400;
}

.svr-glass-stat span {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--svr-color-text-light) 45%, transparent);
}

.svr-glass-stat-divider {
    width: 1px;
    height: 30px;
    background: color-mix(in srgb, var(--svr-color-text-light) 15%, transparent);
}

/* Perks list (register) */
.svr-glass-perks {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-block-start: 20px;
    border-block-start: 1px solid color-mix(in srgb, var(--svr-color-text-light) 10%, transparent);
}

.svr-glass-perk {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.88rem;
    color: color-mix(in srgb, var(--svr-color-text-light) 75%, transparent);
}

.svr-glass-perk i {
    color: var(--svr-color-accent-gold);
    font-size: 0.85rem;
    width: 16px;
    flex-shrink: 0;
}

/* Form Header */
.svr-glass-form-header {
    margin-block-end: 28px;
}

.svr-glass-form-header h2 {
    font-family: var(--svr-font-heading);
    font-size: 2rem;
    font-weight: 500;
    color: var(--svr-color-text-dark);
    margin-block-end: 5px;
}

.svr-glass-form-header p {
    font-size: 0.88rem;
    color: var(--svr-color-text-muted-light);
}

/* === EYE-CATCHING GRADIENT CTA BUTTON === */
.svr-glass-cta-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-block: 15px;
    border: none;
    border-radius: 14px;
    font-family: var(--svr-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    background: linear-gradient(135deg, var(--svr-color-accent-gold) 0%, color-mix(in srgb, var(--svr-color-accent-gold) 70%, #c8860a) 100%);
    color: var(--svr-color-text-dark);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--svr-color-accent-gold) 40%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    margin-block-start: 8px;
    position: relative;
    overflow: hidden;
}

.svr-glass-cta-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--svr-color-text-light) 20%, transparent) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.svr-glass-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px color-mix(in srgb, var(--svr-color-accent-gold) 55%, transparent);
    filter: brightness(1.05);
}

.svr-glass-cta-btn:hover::before {
    opacity: 1;
}

.svr-glass-cta-btn:active {
    transform: translateY(0);
}

.svr-glass-cta-btn i {
    transition: transform 0.2s ease;
}

.svr-glass-cta-btn:hover i {
    transform: translateX(4px);
}

/* ==========================================================================
   COMING SOON — Centered Glass Card
   ========================================================================== */
body.tft-coming-soon-body {
    flex-direction: column;
    gap: 0;
}

.svr-cs-topnav {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 50px;
}

.svr-glass-logo--light {
    color: var(--svr-color-text-light);
}

.svr-cs-back {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: color-mix(in srgb, var(--svr-color-text-light) 70%, transparent);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: color 0.2s ease, gap 0.2s ease;
}
.svr-cs-back:hover {
    color: var(--svr-color-text-light);
    gap: 10px;
}

/* The central glass card */
.svr-cs-glass-card {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 680px;
    background: color-mix(in srgb, var(--svr-color-text-dark) 55%, transparent);
    backdrop-filter: blur(30px) saturate(160%);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    border-radius: 30px;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-light) 10%, transparent);
    box-shadow: 0 40px 100px color-mix(in srgb, var(--svr-color-text-dark) 50%, transparent),
                inset 0 1px 0 color-mix(in srgb, var(--svr-color-text-light) 12%, transparent);
    animation: svrFadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    overflow: hidden;
}

.svr-cs-glass-inner {
    padding: clamp(40px, 6vw, 60px) clamp(35px, 6vw, 60px);
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Eyebrow with pulsing dot */
.svr-cs-eyebrow-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.svr-cs-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--svr-color-accent-gold);
    display: inline-block;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--svr-color-accent-gold) 60%, transparent);
    animation: svrPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes svrPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--svr-color-accent-gold) 60%, transparent); }
    50%       { box-shadow: 0 0 0 8px color-mix(in srgb, var(--svr-color-accent-gold) 0%, transparent); }
}

.svr-cs-eyebrow-text {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--svr-color-accent-gold);
}

/* Hero Headline */
.svr-cs-headline {
    font-family: var(--svr-font-heading);
    font-size: clamp(2.8rem, 6vw, 4rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--svr-color-text-light);
    margin: 0;
}

.svr-cs-headline em {
    color: var(--svr-color-accent-gold);
    font-style: italic;
}

.svr-cs-subtext {
    font-size: 0.95rem;
    line-height: 1.65;
    color: color-mix(in srgb, var(--svr-color-text-light) 60%, transparent);
    margin: 0;
}

/* Countdown: colon style */
.svr-cs-countdown {
    display: flex;
    align-items: center;
    gap: 12px;
}

.svr-csc-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: color-mix(in srgb, var(--svr-color-text-light) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--svr-color-text-light) 8%, transparent);
    border-radius: 14px;
    padding: 14px 18px;
    min-width: 72px;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.svr-csc-block:hover {
    border-color: color-mix(in srgb, var(--svr-color-accent-gold) 40%, transparent);
    transform: translateY(-3px);
}

.svr-csc-num {
    font-family: var(--svr-font-heading);
    font-size: 2.2rem;
    font-weight: 300;
    color: var(--svr-color-text-light);
    line-height: 1;
    min-width: 2ch;
    text-align: center;
}

.svr-csc-label {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    font-weight: 600;
    color: color-mix(in srgb, var(--svr-color-accent-gold) 80%, transparent);
}

.svr-csc-colon {
    font-family: var(--svr-font-heading);
    font-size: 2rem;
    font-weight: 300;
    color: color-mix(in srgb, var(--svr-color-text-light) 30%, transparent);
    line-height: 1;
    margin-block-end: 16px;
}

/* Notify Form */
.svr-cs-form {
    display: flex;
    gap: 10px;
}

.svr-cs-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.svr-cs-input-wrap i {
    position: absolute;
    inset-inline-start: 16px;
    color: color-mix(in srgb, var(--svr-color-text-light) 40%, transparent);
    font-size: 0.9rem;
    pointer-events: none;
}

.svr-cs-input-wrap input {
    width: 100%;
    padding: 15px 16px 15px 42px;
    background: color-mix(in srgb, var(--svr-color-text-light) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--svr-color-text-light) 12%, transparent);
    border-radius: 14px;
    color: var(--svr-color-text-light);
    font-family: var(--svr-font-body);
    font-size: 0.9rem;
    transition: border-color 0.25s ease, background 0.25s ease;
    box-sizing: border-box;
}

.svr-cs-input-wrap input::placeholder {
    color: color-mix(in srgb, var(--svr-color-text-light) 35%, transparent);
}

.svr-cs-input-wrap input:focus {
    outline: none;
    border-color: var(--svr-color-accent-gold);
    background: color-mix(in srgb, var(--svr-color-text-light) 10%, transparent);
}

/* THE CTA BUTTON — eye-catching gradient */
.svr-cs-notify-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 15px 26px;
    border: none;
    border-radius: 14px;
    font-family: var(--svr-font-body);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    background: linear-gradient(135deg, var(--svr-color-accent-gold) 0%, color-mix(in srgb, var(--svr-color-accent-gold) 65%, #b8730a) 100%);
    color: var(--svr-color-text-dark);
    box-shadow: 0 6px 24px color-mix(in srgb, var(--svr-color-accent-gold) 45%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    white-space: nowrap;
}

.svr-cs-notify-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px color-mix(in srgb, var(--svr-color-accent-gold) 60%, transparent);
    filter: brightness(1.06);
}

.svr-cs-notify-btn:hover i {
    animation: svrBtnArrow 0.4s ease forwards;
}

@keyframes svrBtnArrow {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(4px); }
    100% { transform: translateX(0); }
}

/* Footer */
.svr-cs-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block-start: 20px;
    border-block-start: 1px solid color-mix(in srgb, var(--svr-color-text-light) 8%, transparent);
}

.svr-cs-copy {
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--svr-color-text-light) 35%, transparent);
    margin: 0;
}

.svr-cs-socials {
    display: flex;
    gap: 14px;
}

.svr-cs-social-link {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-light) 15%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--svr-color-text-light) 55%, transparent);
    font-size: 0.85rem;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.svr-cs-social-link:hover {
    border-color: var(--svr-color-accent-gold);
    color: var(--svr-color-accent-gold);
    transform: translateY(-2px);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 860px) {
    .svr-glass-auth-wrap {
        flex-direction: column;
        max-width: 480px;
        min-height: auto;
    }

    .svr-glass-auth-brand {
        border-inline-end: none;
        border-block-end: 1px solid color-mix(in srgb, var(--svr-color-text-light) 8%, transparent);
        padding: 35px 35px 30px;
    }

    .svr-glass-brand-stats,
    .svr-glass-perks {
        display: none;
    }

    .svr-glass-form-body {
        padding: 20px 35px 35px;
    }

    .svr-cs-topnav {
        padding: 20px 24px;
    }

    .svr-cs-form {
        flex-direction: column;
    }

    .svr-cs-notify-btn {
        justify-content: center;
    }

    .svr-cs-countdown {
        gap: 8px;
    }

    .svr-csc-block {
        padding: 10px 12px;
        min-width: 58px;
    }

    .svr-csc-num {
        font-size: 1.7rem;
    }
}

@media (max-width: 480px) {
    .svr-cs-glass-card {
        border-radius: 20px;
    }

    .svr-cs-glass-inner {
        gap: 20px;
    }

    .svr-cs-headline {
        font-size: 2.2rem;
    }
}

/* ==========================================================================
   BACK TO TOP GLOBAL STYLES (THEMEFOREST READY)
   ========================================================================== */
.tft-back-to-top {
    position: fixed;
    bottom: 30px;
    inset-inline-end: 30px; /* RTL ready! */
    width: 48px;
    height: 48px;
    background-color: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
    border: none;
    border-radius: var(--svr-radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.tft-back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tft-back-to-top:hover {
    background-color: var(--svr-color-text-light);
    color: var(--svr-color-text-dark);
    transform: translateY(-3px);
}

/* ==========================================================================
   AI RECIPE GENERATOR MODAL STYLES (THEMEFOREST READY)
   ========================================================================== */
.tft-ai-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.tft-ai-modal--active {
    opacity: 1;
    visibility: visible;
}

.tft-ai-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
}

.tft-ai-modal__panel {
    position: relative;
    z-index: 10001;
    width: 90%;
    max-width: 680px;
    max-height: 85vh;
    background-color: var(--svr-color-bg-light);
    color: var(--svr-color-text-dark);
    border-radius: var(--svr-radius-lg);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
    overflow-y: auto;
    padding: 40px;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.tft-ai-modal--active .tft-ai-modal__panel {
    transform: translateY(0);
}

.tft-ai-modal__close {
    position: absolute;
    top: 25px;
    inset-inline-end: 25px; /* RTL ready! */
    background: transparent;
    border: none;
    color: var(--svr-color-text-muted-light);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.tft-ai-modal__close:hover {
    color: var(--svr-color-text-dark);
}

.tft-ai-modal__header {
    margin-bottom: 30px;
}

.tft-ai-modal__title {
    font-family: 'Cormorant', serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 500;
    margin-block-start: 10px;
    margin-block-end: 10px;
}

.tft-ai-modal__subtitle {
    color: var(--svr-color-text-muted-light);
    font-size: 0.95rem;
    line-height: 1.6;
}

.tft-ai-modal__section {
    margin-bottom: 25px;
}

.tft-ai-modal__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--svr-color-accent-gold);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tft-ai-modal__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
    min-height: 40px;
    padding: 10px;
    border: 1px dashed var(--svr-color-border-light);
    border-radius: var(--svr-radius-md);
    background-color: var(--svr-color-card-light);
}

.tft-ai-modal__input-row {
    display: flex;
    gap: 10px;
}

.tft-ai-modal__input {
    flex: 1;
    background-color: var(--svr-color-card-light);
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-sm);
    padding: 12px 16px;
    color: var(--svr-color-text-dark);
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.tft-ai-modal__input:focus {
    outline: none;
    border-color: var(--svr-color-accent-gold);
}

.tft-ai-modal__add-btn {
    background-color: var(--svr-color-text-dark);
    color: var(--svr-color-text-light);
    border: none;
    border-radius: var(--svr-radius-sm);
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.tft-ai-modal__add-btn:hover {
    background-color: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
}

.tft-ai-modal__prefs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tft-ai-pref {
    background-color: var(--svr-color-card-light);
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-pill);
    padding: 8px 16px;
    font-size: 0.85rem;
    color: var(--svr-color-text-muted-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tft-ai-pref:hover {
    border-color: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
}

.tft-ai-pref--active {
    background-color: var(--svr-color-accent-gold);
    border-color: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
    font-weight: 600;
}

.tft-ai-modal__generate-btn {
    width: 100%;
    background-color: var(--svr-color-accent-green);
    color: var(--svr-color-text-light);
    border: none;
    border-radius: var(--svr-radius-md);
    padding: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background-color 0.2s ease, transform 0.2s ease;
    margin-top: 15px;
}

.tft-ai-modal__generate-btn:hover {
    background-color: var(--svr-color-accent-green-hover);
    transform: translateY(-2px);
}

.tft-ai-modal__result {
    margin-top: 30px;
    border-radius: var(--svr-radius-md);
    background-color: var(--svr-color-card-light);
    border: 1px solid var(--svr-color-border-light);
    padding: 30px;
    display: none;
}

.tft-ai-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    gap: 15px;
}

.tft-ai-loading p {
    color: var(--svr-color-accent-gold);
    font-weight: 600;
    font-size: 0.9rem;
}

.tft-ai-loading__dots {
    display: flex;
    gap: 6px;
}

.tft-ai-loading__dots span {
    width: 10px;
    height: 10px;
    background-color: var(--svr-color-accent-gold);
    border-radius: 50%;
    animation: tftDotBounce 1.4s infinite ease-in-out both;
}

.tft-ai-loading__dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.tft-ai-loading__dots span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes tftDotBounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

.tft-ai-recipe__header {
    margin-bottom: 20px;
    border-bottom: 1px solid var(--svr-color-border-light);
    padding-bottom: 20px;
}

.tft-ai-recipe__title {
    font-family: 'Cormorant', serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--svr-color-text-dark);
    margin-bottom: 8px;
}

.tft-ai-recipe__desc {
    color: var(--svr-color-text-muted-light);
    font-size: 0.95rem;
    line-height: 1.5;
}

.tft-ai-recipe__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 25px;
    font-size: 0.85rem;
    color: var(--svr-color-text-muted-light);
    background-color: var(--svr-color-bg-light);
    padding: 12px 20px;
    border-radius: var(--svr-radius-sm);
}

.tft-ai-recipe__meta strong {
    color: var(--svr-color-text-dark);
}

.tft-ai-recipe__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

@media (max-width: 600px) {
    .tft-ai-recipe__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .tft-ai-modal__panel {
        padding: 25px;
    }
}

.tft-ai-recipe__subtitle {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--svr-color-text-dark);
    margin-bottom: 15px;
    border-bottom: 1px solid var(--svr-color-border-light);
    padding-bottom: 8px;
}

.tft-ai-recipe__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tft-ai-recipe__list li {
    font-size: 0.9rem;
    margin-bottom: 10px;
    color: var(--svr-color-text-muted-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

.text-gold {
    color: var(--svr-color-accent-gold);
}

.tft-ai-recipe__steps {
    padding-inline-start: 20px;
    margin: 0;
}

.tft-ai-recipe__steps li {
    font-size: 0.9rem;
    margin-bottom: 12px;
    color: var(--svr-color-text-muted-light);
    line-height: 1.6;
}


/* ==========================================================================
   HOME 2: UNIFIED PANTRY → AI CHEF CARD
   ========================================================================== */

/* Override the base pantry section to use flex column layout */
.svr-h2-pantry--unified {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-radius: var(--svr-radius-lg);
    background: #fff;
    min-height: 380px;
}

/* TOP: Pantry ingredient input area */
.svr-h2-pantry__top {
    position: relative;
    flex: 1;
    padding: 28px 26px 20px;
    overflow: hidden;
}

/* Eyebrow label */
.svr-h2-pantry__eyebrow {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--svr-color-accent-gold);
    margin-block-end: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Title with italic em */
.svr-h2-pantry__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    line-height: 1.15;
    color: var(--svr-color-text-dark);
    margin-block-end: 16px;
    font-weight: 400;
}
.svr-h2-pantry__title em {
    font-family: 'Dancing Script', cursive;
    color: var(--svr-color-accent-gold);
    font-style: normal;
    font-size: 1.15em;
}

/* BOTTOM: AI Chef dark overlay strip */
.svr-h2-pantry__ai-strip {
    position: relative;
    flex-shrink: 0;
    height: 160px;
    overflow: hidden;
}

.svr-h2-pantry__ai-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    filter: brightness(0.45) saturate(0.8);
    transition: transform 0.6s ease, filter 0.6s ease;
}
.svr-h2-pantry--unified:hover .svr-h2-pantry__ai-bg {
    transform: scale(1.04);
    filter: brightness(0.35) saturate(0.7);
}

.svr-h2-pantry__ai-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(10, 10, 10, 0.75) 0%,
        rgba(var(--svr-color-accent-gold-rgb, 193, 154, 107), 0.15) 100%
    );
}

.svr-h2-pantry__ai-content {
    position: relative;
    z-index: 1;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    gap: 8px;
}

.svr-h2-pantry__ai-badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--svr-color-accent-gold);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(var(--svr-color-accent-gold-rgb, 193, 154, 107), 0.3);
    padding: 4px 10px;
    border-radius: 50px;
    width: fit-content;
}

.svr-h2-pantry__ai-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    margin: 0;
    max-width: 85%;
}

/* AI generate button modifier inside the strip */
.svr-h2-btn-find--ai {
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
    border: none;
    padding: 10px 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    border-radius: 50px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.svr-h2-btn-find--ai:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--svr-color-accent-gold-rgb, 193, 154, 107), 0.45);
    background: #e8c97a;
}


/* ==========================================================================
   HOME 2: AI PANTRY HUB — Full-width fusion section
   ========================================================================== */

.svr-h2-ai-hub {
    display: flex;
    margin-inline: 30px;
    margin-block-end: 30px;
    border-radius: var(--svr-radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    min-height: 320px;
}

/* LEFT: Light ingredient picker half */
.svr-h2-ai-hub__left {
    position: relative;
    flex: 0 0 48%;
    padding: 50px 46px;
    background: var(--svr-color-bg-light, #faf9f7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    overflow: hidden;
    /* Subtle bridging gradient on right edge */
    border-inline-end: 1px solid rgba(0, 0, 0, 0.06);
}

/* Decorative floating ingredient icons */
.svr-h2-ai-hub__floaters {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.svr-h2-ai-hub__floaters i {
    position: absolute;
    font-size: 4rem;
    opacity: 0.04;
    color: var(--svr-color-text-dark);
}
.svr-h2-ai-hub__floaters i:nth-child(1) { top: -10%; inset-inline-start: 70%; }
.svr-h2-ai-hub__floaters i:nth-child(2) { bottom: -5%; inset-inline-start: 10%; font-size: 5rem; }
.svr-h2-ai-hub__floaters i:nth-child(3) { top: 30%; inset-inline-start: 85%; font-size: 3rem; }

.svr-h2-ai-hub__eyebrow {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--svr-color-accent-gold);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
}

.svr-h2-ai-hub__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.1;
    color: var(--svr-color-text-dark);
    margin: 0;
    font-weight: 400;
}
.svr-h2-ai-hub__title em {
    font-family: 'Dancing Script', cursive;
    color: var(--svr-color-accent-gold);
    font-style: normal;
    font-size: 1.1em;
}

.svr-h2-ai-hub__tags {
    gap: 8px;
    flex-wrap: wrap;
}

.svr-h2-ai-hub__hint {
    font-size: 0.75rem;
    color: var(--svr-color-text-muted-light, #999);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.5;
}
.svr-h2-ai-hub__hint i {
    color: var(--svr-color-accent-gold);
    flex-shrink: 0;
}

/* RIGHT: Dark cinematic AI Chef half */
.svr-h2-ai-hub__right {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.svr-h2-ai-hub__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    filter: brightness(0.38) saturate(0.7);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.8s ease;
}
.svr-h2-ai-hub:hover .svr-h2-ai-hub__bg {
    transform: scale(1.04);
    filter: brightness(0.3) saturate(0.6);
}

.svr-h2-ai-hub__overlay {
    position: absolute;
    inset: 0;
    /* Gradient bridges left edge to the light half */
    background: linear-gradient(
        to inline-end,
        rgba(250, 249, 247, 0.08) 0%,
        transparent 20%,
        rgba(10, 10, 10, 0.45) 100%
    );
}

.svr-h2-ai-hub__content {
    position: relative;
    z-index: 1;
    padding: 50px 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    gap: 16px;
}

.svr-h2-ai-hub__badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--svr-color-accent-gold);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(193, 154, 107, 0.35);
    padding: 5px 12px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    backdrop-filter: blur(6px);
}

.svr-h2-ai-hub__heading {
    font-family: var(--svr-font-heading);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    color: #fff;
    margin: 0;
    line-height: 1.1;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: -0.01em;
}
.svr-h2-ai-hub__heading em {
    font-family: 'Dancing Script', cursive;
    color: var(--svr-color-accent-gold);
    font-style: normal;
    text-transform: lowercase;
    font-size: 1.15em;
}

.svr-h2-ai-hub__desc {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
    margin: 0;
    max-width: 380px;
    font-weight: 300;
}

.svr-h2-ai-hub__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark, #1a1a1a);
    border: none;
    padding: 14px 28px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 50px;
    cursor: pointer;
    width: fit-content;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.svr-h2-ai-hub__cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(193, 154, 107, 0.5);
    background: #e8c97a;
}

/* Responsive */
@media (max-width: 900px) {
    .svr-h2-ai-hub {
        flex-direction: column;
        margin-inline: 15px;
    }
    .svr-h2-ai-hub__left {
        flex: none;
        padding: 36px 28px;
        border-inline-end: none;
        border-block-end: 1px solid rgba(0, 0, 0, 0.06);
    }
    .svr-h2-ai-hub__right {
        min-height: 260px;
    }
    .svr-h2-ai-hub__content {
        padding: 32px 28px;
    }
}

@media (max-width: 480px) {
    .svr-h2-ai-hub {
        margin-inline: 10px;
    }
    .svr-h2-ai-hub__left {
        padding: 28px 20px;
    }
    .svr-h2-ai-hub__content {
        padding: 28px 20px;
    }
}


/* ==========================================================================
   HOME 1: PANTRY HUB FUSION — Single split container
   ========================================================================== */

/* The single unified wrapper — one border-radius, one shadow */
.tft-pantry-hub__fusion {
    display: flex;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.13);
    min-height: 560px;
}

/* LEFT: White/cream ingredient picker */
.tft-pantry-hub__left {
    flex: 0 0 46%;
    padding: 52px 48px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    border-inline-end: 1px solid rgba(0, 0, 0, 0.06);
}

/* RIGHT: Dark cinematic AI Chef half */
.tft-pantry-hub__right {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Full-bleed background photo */
.tft-pantry-hub__right-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    filter: brightness(0.32) saturate(0.7);
    transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.9s ease;
}
.tft-pantry-hub__fusion:hover .tft-pantry-hub__right-bg {
    transform: scale(1.04);
    filter: brightness(0.26) saturate(0.6);
}

/* Gradient overlay — bridges the left white edge */
.tft-pantry-hub__right-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.04) 0%,
        transparent 15%,
        rgba(5, 5, 5, 0.3) 100%
    );
    pointer-events: none;
}

/* Content sits above image */
.tft-pantry-hub__right-content {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 52px 46px 0;
}

/* AI main text area */
.tft-pantry-hub__ai-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tft-pantry-hub__ai-main .tft-ai-banner__title {
    color: #ffffff;
    font-size: clamp(1.8rem, 2.8vw, 2.6rem);
    line-height: 1.1;
    margin: 0;
}

.tft-pantry-hub__ai-main .tft-ai-banner__desc {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.92rem;
    line-height: 1.7;
    margin: 0;
    max-width: 380px;
    font-weight: 300;
}

/* Utility mini-cards — horizontal row at bottom of dark panel */
.tft-pantry-hub__utility-row {
    display: flex;
    gap: 0;
    margin-block-start: 36px;
    border-block-start: 1px solid rgba(255, 255, 255, 0.08);
}

.tft-pantry-hub__util {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 20px;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.2s ease;
}
.tft-pantry-hub__util:last-child {
    border-inline-end: none;
}
.tft-pantry-hub__util:hover {
    background: rgba(255, 255, 255, 0.04);
}

.tft-pantry-hub__util > i {
    font-size: 1.1rem;
    color: var(--svr-color-accent-gold);
    margin-block-end: 4px;
}

.tft-pantry-hub__util h4 {
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: 0.02em;
}

.tft-pantry-hub__util p {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    line-height: 1.5;
}

/* Responsive: stack on tablet */
@media (max-width: 960px) {
    .tft-pantry-hub__fusion {
        flex-direction: column;
    }
    .tft-pantry-hub__left {
        flex: none;
        padding: 36px 28px;
        border-inline-end: none;
        border-block-end: 1px solid rgba(0, 0, 0, 0.06);
    }
    .tft-pantry-hub__right {
        min-height: 420px;
    }
    .tft-pantry-hub__right-content {
        padding: 36px 28px 0;
    }
    .tft-pantry-hub__utility-row {
        flex-wrap: wrap;
    }
    .tft-pantry-hub__util {
        flex: 0 0 50%;
        border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
    }
    .tft-pantry-hub__util:nth-child(2n) {
        border-inline-end: none;
    }
}

@media (max-width: 480px) {
    .tft-pantry-hub__left {
        padding: 28px 20px;
    }
    .tft-pantry-hub__right-content {
        padding: 28px 20px 0;
    }
    .tft-pantry-hub__util {
        flex: 0 0 100%;
        border-inline-end: none;
    }
}

/* ==========================================================================
   COOK MODE SECTION — border-radius fix
   ========================================================================== */
.svr-section-cook-mode {
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 40px;
}

/* ==========================================================================
   HOME 2: WOOCOMMERCE FEATURED PRODUCTS
   ========================================================================== */
.svr-h2-shop-featured {
    margin-block-end: 64px;
}

.svr-h2-shop-featured__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-block-end: 36px;
    gap: 24px;
}

.svr-h2-shop-featured__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--svr-color-accent-gold);
    letter-spacing: 0.08em;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.svr-h2-shop-featured__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    color: #1a1a1a;
    margin: 0;
    line-height: 1.2;
}

.svr-h2-shop-featured__link {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1a1a1a;
    text-decoration: none;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.25s ease;
    flex-shrink: 0;
}

.svr-h2-shop-featured__link:hover {
    color: var(--svr-color-accent-gold);
}

/* Products Grid */
.svr-h2-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.svr-h2-product-card {
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.svr-h2-product-card:hover {
    transform: translateY(-4px);
}

.svr-h2-product-card__media {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: #fcfcfc;
    border: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    padding: 24px;
}

.svr-h2-product-card__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.svr-h2-product-card:hover .svr-h2-product-card__img {
    transform: scale(1.08);
}

.svr-h2-product-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.svr-h2-product-card:hover .svr-h2-product-card__overlay {
    opacity: 1;
}

.svr-h2-product-card__quick-add {
    background: #ffffff;
    color: #111111;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.svr-h2-product-card__quick-add:hover {
    background: var(--svr-color-accent-gold);
    color: #000000;
    transform: scale(1.05);
}

.svr-h2-product-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 0.6rem;
    font-weight: 800;
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 1;
    letter-spacing: 0.05em;
}

.svr-h2-product-card__badge--hot {
    background: #dd5757;
}

.svr-h2-product-card__badge--new {
    background: #46b278;
}

.svr-h2-product-card__info {
    padding-block-start: 16px;
    display: flex;
    flex-direction: column;
}

.svr-h2-product-card__cat {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--svr-color-accent-gold);
    letter-spacing: 0.05em;
    margin-block-end: 4px;
}

.svr-h2-product-card__name {
    font-family: var(--svr-font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 10px 0;
}

.svr-h2-product-card__name a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.25s ease;
}

.svr-h2-product-card__name a:hover {
    color: var(--svr-color-accent-gold);
}

.svr-h2-product-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.svr-h2-product-card__price {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a1a;
}

.svr-h2-product-card__stars {
    font-size: 0.8rem;
    color: #666666;
    display: flex;
    align-items: center;
    gap: 4px;
}

.svr-h2-product-card__stars i {
    color: var(--svr-color-accent-gold);
}

/* Responsive grid overrides */
@media (max-width: 960px) {
    .svr-h2-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 580px) {
    .svr-h2-shop-featured__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .svr-h2-products-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ==========================================================================
   ALIGN HEADER AND CONTENT WRAPPERS RESPONSIVELY
   ========================================================================== */
@media (min-width: 1025px) {
    .svr-top-nav {
        margin: 30px 70px !important;
        width: calc(100% - 140px) !important;
    }
    .svr-avant-home,
    .svr-avant-shop,
    .svr-avant-cart,
    .svr-avant-submit,
    .svr-avant-services,
    .svr-avant-about,
    .svr-avant-aboutme,
    .svr-avant-contact {
        margin: 0 50px 40px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .svr-top-nav {
        margin: 25px 40px !important;
        width: calc(100% - 80px) !important;
    }
    .svr-avant-home,
    .svr-avant-shop,
    .svr-avant-cart,
    .svr-avant-submit,
    .svr-avant-services,
    .svr-avant-about,
    .svr-avant-aboutme,
    .svr-avant-contact {
        margin: 0 40px 30px !important;
    }
}

@media (max-width: 768px) {
    .svr-top-nav {
        margin: 15px 15px !important;
        width: calc(100% - 30px) !important;
    }
    .svr-avant-home,
    .svr-avant-shop,
    .svr-avant-cart,
    .svr-avant-submit,
    .svr-avant-services,
    .svr-avant-about,
    .svr-avant-aboutme,
    .svr-avant-contact {
        margin: 0 15px 25px !important;
    }
}

/* ==========================================================================
   GLOBAL DARK THEME ENFORCEMENT & SIDEBAR PARITY
   ========================================================================== */

:root {
    --svr-color-sidebar: #0a0a0a !important;
    --svr-color-border-dark: rgba(255, 255, 255, 0.05) !important;
    --svr-color-text-light: #ffffff !important;
    --svr-color-text-muted-dark: rgba(255, 255, 255, 0.6) !important;
    --svr-color-bg-dark: #0e0d0c !important;
    --svr-color-card-dark: rgba(255, 255, 255, 0.03) !important;
}

@media (min-width: 1025px) {
    .svr-sidebar {
        background-color: var(--svr-color-sidebar) !important;
        border-right: 1px solid var(--svr-color-border-dark) !important;
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        overflow-y: auto !important;
    }
}

/* ==========================================================================
   DESKTOP SIDEBAR OVERRIDES (Leaf, Nav, Profile, Quote)
   ========================================================================== */
@media (min-width: 1025px) {
    /* LEAF WATERMARK OVERLAY */
    .svr-sidebar::after {
    content: '';
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 280px;
    height: 280px;
    background-image: url('../img/leaf.png');
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
}

.svr-sidebar .svr-nav {
    position: relative !important;
    z-index: 1 !important;
    gap: 5px !important;
}

.svr-sidebar .svr-nav__link,
.svr-sidebar .svr-nav-accordion summary {
    padding: 10px 15px !important;
    border-radius: 12px !important;
    font-weight: 500 !important;
    color: var(--svr-color-text-light) !important;
    transition: all var(--svr-transition-fast) !important;
}

.svr-sidebar .svr-nav__link i:first-child,
.svr-sidebar .svr-nav-accordion summary i:first-child {
    color: var(--svr-color-accent-gold) !important;
    margin-right: 15px !important;
    width: 20px !important;
    text-align: center !important;
    font-size: 1.1rem !important;
}

.svr-sidebar .svr-nav__link--active {
    background: #eeb34b !important;
    color: #0a0a0a !important;
    box-shadow: 0 4px 15px rgba(238, 179, 75, 0.2) !important;
    border: none !important;
}

.svr-sidebar .svr-nav__link--active i:first-child {
    color: #0a0a0a !important;
}

.svr-sidebar .svr-nav__link:hover:not(.svr-nav__link--active),
.svr-sidebar .svr-nav-accordion summary:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--svr-color-accent-gold) !important;
}

.svr-sidebar .svr-nav-accordion__content {
    padding-left: 20px !important;
    margin-top: 2px !important;
    margin-bottom: 5px !important;
}

.svr-sidebar .svr-nav-accordion__link {
    padding: 8px 20px 8px 35px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.9rem !important;
    position: relative !important;
}

.svr-sidebar .svr-nav-accordion__link::before {
    content: '\25CF' !important; /* Solid small circle */
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--svr-color-accent-gold) !important;
    font-size: 0.5rem !important;
    line-height: 1 !important;
}

.svr-sidebar .svr-nav-accordion__link:hover {
    color: var(--svr-color-text-light) !important;
}

.svr-sidebar .svr-profile-widget {
    border: 1px solid rgba(230, 185, 83, 0.2) !important;
    border-radius: 16px !important;
    padding: 15px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    position: relative !important;
    z-index: 1 !important;
    margin-top: auto !important;
}

.svr-sidebar .svr-profile-widget h4 {
    color: var(--svr-color-text-light) !important;
}

.svr-sidebar .svr-profile-widget i.fa-chevron-right {
    color: var(--svr-color-accent-gold) !important;
}

.svr-sidebar .svr-quote-widget {
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    padding: 20px 20px !important;
    background: rgba(25, 25, 25, 0.4) !important;
    position: relative !important;
    z-index: 1 !important;
    margin-top: 15px !important;
    overflow: hidden !important;
}

/* Fix Quote text colors exactly */
.svr-sidebar .svr-quote-widget p {
    margin-top: 10px !important;
    color: rgba(220, 200, 170, 0.55) !important; /* Warm muted ivory */
    position: relative !important;
    z-index: 1 !important;
    font-size: 1.1rem !important;
}

.svr-sidebar .svr-quote-widget strong {
    color: var(--svr-color-accent-gold) !important;
    font-family: var(--svr-font-heading) !important;
    font-size: 1.4rem !important;
    position: relative !important;
    z-index: 1 !important;
    font-weight: 500 !important;
}

    .svr-sidebar .svr-quote-widget .fa-heart {
        color: var(--svr-color-accent-gold) !important;
        font-weight: 400 !important; /* hollow heart */
    }
} /* END DESKTOP SIDEBAR OVERRIDES */
/* ==========================================================================
   TOP NAV EXACT PARITY OVERRIDES (HEADER MENU COLORS)
   ========================================================================== */

.svr-top-nav {
    background: rgba(12, 12, 12, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    margin: 30px !important;
    width: auto !important;
}

.svr-recipe-detail-header {
    margin: 0 30px 30px 30px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}

.svr-top-nav__links > div > a,
.svr-top-nav__links > a {
    color: var(--svr-color-text-light) !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-decoration: none !important;
    padding-bottom: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.svr-top-nav__links > div:first-child > a,
.svr-top-nav__links > a:first-child {
    color: var(--svr-color-accent-gold) !important;
    border-bottom: 2px solid var(--svr-color-accent-gold) !important;
}

.svr-top-nav__links a:hover {
    color: var(--svr-color-accent-gold) !important;
}

.svr-top-nav__links a i.fa-chevron-down {
    font-size: 0.6rem !important;
    opacity: 0.7 !important;
}

/* Standard Dropdown Redesign */
.svr-dropdown-menu {
    background: rgba(15, 15, 15, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    padding: 10px 0 !important;
    min-width: 200px !important;
}

.svr-dropdown-menu a {
    color: var(--svr-color-accent-gold) !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid rgba(230, 185, 83, 0.2) !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    display: block !important;
    margin: 0 10px !important;
}

.svr-dropdown-menu a:last-child {
    border-bottom: none !important;
}

.svr-dropdown-menu a:hover {
    background: rgba(230, 185, 83, 0.05) !important;
    color: var(--svr-color-accent-gold) !important;
}

/* ==========================================================================
   SIDEBAR WIDTH, SCROLLBAR REMOVAL & NAV/HERO WIDTH PARITY
   ========================================================================== */

/* Wider sidebar — no scrollbar (Desktop only) */
@media (min-width: 1025px) {
    .svr-sidebar {
        width: 290px !important;
        min-width: 290px !important;
        overflow: hidden !important;
    }
}

/* Top nav — force same left/right edge as hero (higher specificity via parent selector) - Desktop Only */
@media (min-width: 1025px) {
    .svr-main-content > .svr-top-nav,
    .svr-main-content > nav.svr-top-nav {
        margin: 20px 50px 15px 50px !important;
        width: calc(100% - 100px) !important;
        box-sizing: border-box !important;
        border-radius: 100px !important;
    }

    /* Hero banner — force identical left/right edge */
    .svr-main-content > .svr-recipe-detail-header,
    .svr-main-content > header.svr-recipe-detail-header {
        margin: 0 50px 30px 50px !important;
        width: calc(100% - 100px) !important;
        box-sizing: border-box !important;
    }
}

/* Brighter active nav link in top bar */
.svr-top-nav__links > div:first-child > a,
.svr-top-nav__links > a:first-child {
    color: #f5c842 !important;
    border-bottom: 2px solid #f5c842 !important;
}

/* ==========================================================================
   PROFILE WIDGET — FULL CLICKABLE ROW, NO BG/BORDER/PADDING (Desktop only)
   ========================================================================== */
@media (min-width: 1025px) {
    a.svr-profile-widget,
    .svr-profile-widget {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 0 !important;        /* side padding removed */
        margin-bottom: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        cursor: pointer !important;
        width: 100% !important;
        box-sizing: border-box !important;
        transition: opacity 0.2s ease !important;
    }

    a.svr-profile-widget:hover,
    .svr-profile-widget:hover {
        opacity: 0.8 !important;
    }

    /* Kill the appended override that re-adds the border */
    .svr-sidebar .svr-profile-widget {
        border: none !important;
        background: transparent !important;
        padding: 10px 0 !important;
        border-radius: 0 !important;
        margin-top: auto !important;
    }
}

/* #faf9f6 background overrides removed — content area stays light */

/* ==========================================================================
   26. DROPDOWN MENU — PREMIUM EDITORIAL REDESIGN (2026)
   ========================================================================== */

/* ── Container: glassmorphic panel with gold accent ── */
.svr-dropdown-menu {
    background: linear-gradient(
        165deg,
        rgba(10, 10, 10, 0.97) 0%,
        rgba(18, 18, 18, 0.97) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--svr-radius-md) !important;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.55),
        0 8px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    padding: 8px 0 !important;
    min-width: 240px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    overflow: hidden !important;
    transform-origin: top center !important;
    /* Reveal animation override */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(12px) scale(0.97) !important;
    transition:
        opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.35s !important;
}

/* Gold accent line at top of dropdown */
.svr-dropdown-menu::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    inset-inline-start: 20px !important;
    inset-inline-end: 20px !important;
    height: 2px !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--svr-color-accent-gold) 30%,
        var(--svr-color-accent-gold) 70%,
        transparent 100%
    ) !important;
    border-radius: 2px !important;
    opacity: 0.6 !important;
}

/* Reveal arrow / caret pointing upward */
.svr-dropdown-menu::after {
    content: '' !important;
    position: absolute !important;
    top: -6px !important;
    inset-inline-start: 28px !important;
    width: 12px !important;
    height: 12px !important;
    background: rgba(10, 10, 10, 0.97) !important;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-block-start: 1px solid rgba(255, 255, 255, 0.06) !important;
    transform: rotate(45deg) !important;
    z-index: -1 !important;
}

/* ── Hover state: reveal ── */
.svr-has-dropdown:hover .svr-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}

/* ── Links: refined editorial typography ── */
.svr-dropdown-menu a {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 11px 22px 11px 22px !important;
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    font-family: var(--svr-font-body) !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
    position: relative !important;
    border-bottom: none !important;
    margin: 0 !important;
    transition:
        color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        padding-inline-start 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.25s ease !important;
}

/* Gold indicator bar on the left — appears on hover */
.svr-dropdown-menu a::before {
    content: '' !important;
    position: absolute !important;
    inset-inline-start: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) scaleY(0) !important;
    width: 3px !important;
    height: 60% !important;
    background: var(--svr-color-accent-gold) !important;
    border-radius: 0 3px 3px 0 !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ── Link hover ── */
.svr-dropdown-menu a:hover {
    color: var(--svr-color-accent-gold) !important;
    background: rgba(230, 185, 83, 0.06) !important;
    padding-inline-start: 28px !important;
}

.svr-dropdown-menu a:hover::before {
    transform: translateY(-50%) scaleY(1) !important;
}

/* Subtle divider between items — finer than a border */
.svr-dropdown-menu a + a::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    inset-inline-start: 18px !important;
    inset-inline-end: 18px !important;
    height: 1px !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Staggered animation removed — container reveal handles visibility */

/* ── Override last-child border removal (legacy rule cleanup) ── */
.svr-dropdown-menu a:last-child {
    border-bottom: none !important;
}

/* ==========================================================================
   27. COOK MODE — IMMERSIVE STEP-BY-STEP PAGE
   ========================================================================== */

.svr-cm-body { margin: 0; padding: 0; background: var(--svr-color-bg-dark); min-height: 100vh; overflow-x: hidden; }
.svr-cm { display: flex; flex-direction: column; min-height: 100vh; position: relative; color: var(--svr-color-text-light); font-family: var(--svr-font-body); }

/* Header */
.svr-cm__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 30px; border-block-end: 1px solid var(--svr-color-border-dark); flex-wrap: wrap; gap: 12px; }
.svr-cm__brand { display: flex; align-items: center; gap: 10px; font-family: var(--svr-font-heading); font-size: 1.3rem; font-weight: 600; color: var(--svr-color-accent-gold); letter-spacing: 0.05em; }
.svr-cm__brand i { font-size: 1.1rem; }
.svr-cm__recipe-name { font-family: var(--svr-font-heading); font-size: clamp(0.85rem, 1.5vw, 1rem); font-weight: 400; color: rgba(255,255,255,0.5); letter-spacing: 0.02em; margin: 0; }
.svr-cm__controls { display: flex; align-items: center; gap: 20px; }
.svr-cm__toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.svr-cm__toggle input { display: none; }
.svr-cm__toggle-text { font-size: 0.75rem; color: rgba(255,255,255,0.5); font-weight: 500; letter-spacing: 0.02em; }
.svr-cm__toggle-track { width: 40px; height: 22px; background: rgba(255,255,255,0.1); border-radius: var(--svr-radius-pill); position: relative; transition: background 0.3s ease; border: 1px solid rgba(255,255,255,0.1); }
.svr-cm__toggle-thumb { width: 16px; height: 16px; background: rgba(255,255,255,0.4); border-radius: 50%; position: absolute; top: 2px; inset-inline-start: 3px; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.svr-cm__toggle input:checked ~ .svr-cm__toggle-track { background: rgba(230, 185, 83, 0.25); border-color: var(--svr-color-accent-gold); }
.svr-cm__toggle input:checked ~ .svr-cm__toggle-track .svr-cm__toggle-thumb { inset-inline-start: 20px; background: var(--svr-color-accent-gold); }
.svr-cm__exit { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all var(--svr-transition-fast); font-size: 1rem; }
.svr-cm__exit:hover { background: rgba(255,255,255,0.12); color: var(--svr-color-text-light); }

/* Progress Bar */
.svr-cm__progress { display: flex; align-items: center; justify-content: center; gap: 0; padding: 24px 40px; position: relative; }
.svr-cm__progress-line { position: absolute; top: 50%; inset-inline-start: 15%; inset-inline-end: 15%; height: 1px; background: rgba(255,255,255,0.08); border-radius: 1px; transform: translateY(-50%); z-index: 0; }
.svr-cm__progress-fill { height: 100%; background: var(--svr-color-accent-gold); border-radius: 3px; width: 0; transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.svr-cm__step-dot { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); background: var(--svr-color-bg-dark); color: rgba(255,255,255,0.35); font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; cursor: pointer; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); margin: 0 clamp(8px, 2vw, 24px); font-family: var(--svr-font-body); }
.svr-cm__step-dot--active { border-color: var(--svr-color-accent-gold); background: var(--svr-color-accent-gold); color: var(--svr-color-bg-dark); transform: scale(1.15); box-shadow: 0 0 20px rgba(230, 185, 83, 0.3); }
.svr-cm__step-dot--done { border-color: var(--svr-color-accent-gold); color: var(--svr-color-accent-gold); background: rgba(230, 185, 83, 0.1); }

/* Main Body */
.svr-cm__body { display: flex; flex: 1; gap: clamp(20px, 4vw, 60px); padding: 0 clamp(20px, 4vw, 60px) 20px; align-items: flex-start; }
.svr-cm__content { flex: 1 1 0%; padding-block-start: 10px; }
.svr-cm__step-counter { font-family: var(--svr-font-heading); font-size: 1.1rem; color: var(--svr-color-accent-gold); font-weight: 600; letter-spacing: 0.05em; display: block; margin-block-end: 12px; }
.svr-cm__instruction { font-family: var(--svr-font-heading); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 400; line-height: 1.15; color: var(--svr-color-text-light); margin-block-end: 20px; }
.svr-cm__description { font-size: clamp(0.9rem, 1.2vw, 1.05rem); color: rgba(255,255,255,0.55); line-height: 1.7; margin-block-end: 30px; }

/* Ingredients in use */
.svr-cm__ingredients { background: rgba(255,255,255,0.04); border: 1px solid var(--svr-color-border-dark); border-radius: var(--svr-radius-md); padding: 20px; }
.svr-cm__ingredients-title { font-family: var(--svr-font-body); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--svr-color-accent-gold); margin-block-end: 14px; display: flex; align-items: center; gap: 8px; }
.svr-cm__ingredients-title i { font-size: 0.85rem; }
.svr-cm__ingredients-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.svr-cm__ingredient-item label { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px 0; }
.svr-cm__ingredient-item input { display: none; }
.svr-cm__ingredient-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.25s ease; color: transparent; font-size: 0.6rem; }
.svr-cm__ingredient-item input:checked ~ .svr-cm__ingredient-check { border-color: var(--svr-color-accent-gold); background: var(--svr-color-accent-gold); color: var(--svr-color-bg-dark); }
.svr-cm__ingredient-item input:checked ~ .svr-cm__ingredient-name { text-decoration: line-through; opacity: 0.4; }
.svr-cm__ingredient-name { font-size: 0.9rem; color: rgba(255,255,255,0.7); transition: all 0.25s ease; }

/* Visual / Image */
.svr-cm__visual { flex: 1 1 0%; position: relative; margin: 0; }
.svr-cm__step-img { width: 100%; height: auto; max-height: 55vh; object-fit: cover; border-radius: var(--svr-radius-lg); transition: opacity 0.3s ease; }

/* Timer Circle */
.svr-cm__timer { position: absolute; top: 20px; inset-inline-end: 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.svr-cm__timer-ring { filter: drop-shadow(0 0 15px rgba(230, 185, 83, 0.2)); }
.svr-cm__timer-display { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -65%); text-align: center; }
.svr-cm__timer-time { font-family: var(--svr-font-heading); font-size: 1.6rem; font-weight: 600; color: var(--svr-color-text-light); display: block; line-height: 1; }
.svr-cm__timer-label { font-size: 0.65rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.08em; }
.svr-cm__timer-btn { background: rgba(230, 185, 83, 0.15); border: 1px solid var(--svr-color-accent-gold); color: var(--svr-color-accent-gold); padding: 5px 18px; border-radius: var(--svr-radius-pill); font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all var(--svr-transition-fast); margin-block-start: 4px; font-family: var(--svr-font-body); }
.svr-cm__timer-btn:hover { background: var(--svr-color-accent-gold); color: var(--svr-color-bg-dark); }
.svr-cm__timer--done { animation: svr-cm-pulse 0.5s ease 3; }
@keyframes svr-cm-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* Navigation */
.svr-cm__nav { display: flex; justify-content: center; gap: 16px; padding: 16px 40px; }
.svr-cm__nav-btn { display: flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: var(--svr-radius-pill); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); border: none; font-family: var(--svr-font-body); }
.svr-cm__nav-btn--prev { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.1); }
.svr-cm__nav-btn--prev:hover:not(:disabled) { background: rgba(255,255,255,0.1); color: var(--svr-color-text-light); }
.svr-cm__nav-btn--prev:disabled { opacity: 0.3; cursor: not-allowed; }
.svr-cm__nav-btn--next { background: var(--svr-color-accent-gold); color: var(--svr-color-bg-dark); }
.svr-cm__nav-btn--next:hover { background: var(--svr-color-text-light); transform: translateX(4px); }

/* Bottom Toolbar */
.svr-cm__toolbar { display: flex; justify-content: center; gap: clamp(8px, 2vw, 16px); padding: 14px 30px; border-block-start: 1px solid var(--svr-color-border-dark); background: rgba(10,10,10,0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.svr-cm__tool { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px clamp(14px, 2vw, 24px); border-radius: var(--svr-radius-md); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); cursor: pointer; transition: all var(--svr-transition-fast); font-family: var(--svr-font-body); min-width: 70px; }
.svr-cm__tool i { font-size: 1.15rem; }
.svr-cm__tool span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; }
.svr-cm__tool-status { font-size: 0.6rem; color: rgba(255,255,255,0.3); font-weight: 500; }
.svr-cm__tool:hover { background: rgba(255,255,255,0.08); color: var(--svr-color-text-light); border-color: rgba(255,255,255,0.1); }
.svr-cm__tool--active { background: rgba(230, 185, 83, 0.12); color: var(--svr-color-accent-gold); border-color: rgba(230, 185, 83, 0.3); }

/* Slide-out Panels */
.svr-cm__panel { position: fixed; top: 0; inset-inline-end: 0; width: 380px; max-width: 90vw; height: 100vh; background: rgba(15,15,15,0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-inline-start: 1px solid var(--svr-color-border-dark); z-index: 1000; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; }
.svr-cm__panel--open { transform: translateX(0); }
.svr-cm__panel-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-block-end: 1px solid var(--svr-color-border-dark); }
.svr-cm__panel-header h3 { font-family: var(--svr-font-heading); font-size: 1.3rem; color: var(--svr-color-accent-gold); display: flex; align-items: center; gap: 10px; margin: 0; }
.svr-cm__panel-close { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--svr-transition-fast); border: none; }
.svr-cm__panel-close:hover { background: rgba(255,255,255,0.12); color: var(--svr-color-text-light); }
.svr-cm__panel-body { padding: 24px; flex: 1; overflow-y: auto; }

/* Notes */
.svr-cm__notes-textarea { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--svr-color-border-dark); border-radius: var(--svr-radius-md); color: var(--svr-color-text-light); padding: 16px; font-family: var(--svr-font-body); font-size: 0.9rem; line-height: 1.6; resize: vertical; min-height: 180px; transition: border-color var(--svr-transition-fast); box-sizing: border-box; }
.svr-cm__notes-textarea:focus { outline: none; border-color: var(--svr-color-accent-gold); }
.svr-cm__notes-textarea::placeholder { color: rgba(255,255,255,0.25); }
.svr-cm__notes-save { margin-block-start: 16px; padding: 10px 24px; background: var(--svr-color-accent-gold); color: var(--svr-color-bg-dark); border: none; border-radius: var(--svr-radius-pill); font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all var(--svr-transition-fast); display: flex; align-items: center; gap: 8px; font-family: var(--svr-font-body); }
.svr-cm__notes-save:hover { background: var(--svr-color-text-light); }
.svr-cm__notes-saved-msg { margin-block-start: 12px; font-size: 0.8rem; color: var(--svr-color-accent-gold); opacity: 0; transition: opacity 0.3s ease; }

/* Tips */
.svr-cm__tip-card { background: rgba(230, 185, 83, 0.06); border: 1px solid rgba(230, 185, 83, 0.15); border-radius: var(--svr-radius-md); padding: 24px; }
.svr-cm__tip-step { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--svr-color-accent-gold); margin-block-end: 12px; }
.svr-cm__tip-card p { color: rgba(255,255,255,0.7); font-size: 0.95rem; line-height: 1.7; }

/* Servings */
.svr-cm__servings-control { display: flex; align-items: center; justify-content: center; gap: 20px; margin-block-end: 8px; }
.svr-cm__servings-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--svr-color-border-dark); background: rgba(255,255,255,0.04); color: var(--svr-color-text-light); font-size: 1rem; cursor: pointer; transition: all var(--svr-transition-fast); display: flex; align-items: center; justify-content: center; }
.svr-cm__servings-btn:hover { background: var(--svr-color-accent-gold); color: var(--svr-color-bg-dark); border-color: var(--svr-color-accent-gold); }
.svr-cm__servings-num { font-family: var(--svr-font-heading); font-size: 3rem; color: var(--svr-color-accent-gold); font-weight: 600; min-width: 50px; text-align: center; }
.svr-cm__servings-label { text-align: center; font-size: 0.8rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.1em; margin-block-end: 30px; }
.svr-cm__servings-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--svr-color-accent-gold); margin-block-end: 16px; padding-block-end: 12px; border-block-end: 1px solid var(--svr-color-border-dark); }
.svr-cm__servings-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.svr-cm__servings-list li { font-size: 0.9rem; color: rgba(255,255,255,0.6); padding: 8px 0; border-block-end: 1px solid rgba(255,255,255,0.04); }
.svr-cm__servings-list li strong { color: var(--svr-color-text-light); margin-inline-end: 4px; }

/* Overlay & Completion */
.svr-cm__overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.svr-cm__overlay--visible { opacity: 1; pointer-events: auto; }
.svr-cm__complete { position: fixed; inset: 0; background: rgba(10,10,10,0.95); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); z-index: 2000; display: flex; align-items: center; justify-content: center; text-align: center; }
.svr-cm__complete-inner { max-width: 500px; padding: 40px; }
.svr-cm__complete-title { font-family: var(--svr-font-heading); font-size: clamp(3rem, 6vw, 4.5rem); color: var(--svr-color-text-light); margin-block-end: 16px; font-weight: 300; }
.svr-cm__complete-desc { color: rgba(255,255,255,0.5); font-size: 1.05rem; line-height: 1.6; margin-block-end: 40px; }
.svr-cm__complete-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.svr-cm__complete-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: var(--svr-radius-pill); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-decoration: none; border: none; font-family: var(--svr-font-body); min-width: 220px; justify-content: center; }
.svr-cm__complete-btn--primary { background: var(--svr-color-accent-gold); color: var(--svr-color-bg-dark); }
.svr-cm__complete-btn--primary:hover { background: var(--svr-color-text-light); }
.svr-cm__complete-btn--secondary { background: rgba(255,255,255,0.08); color: var(--svr-color-text-light); border: 1px solid rgba(255,255,255,0.12); }
.svr-cm__complete-btn--secondary:hover { background: rgba(255,255,255,0.15); }
.svr-cm__complete-btn--ghost { background: transparent; color: rgba(255,255,255,0.5); }
.svr-cm__complete-btn--ghost:hover { color: var(--svr-color-accent-gold); }

/* Responsive */
@media (max-width: 900px) {
    .svr-cm__body { flex-direction: column; }
    .svr-cm__content { order: 2; }
    .svr-cm__visual { order: 1; width: 100%; }
    .svr-cm__step-img { max-height: 40vh; }
    .svr-cm__header { padding: 12px 16px; }
    .svr-cm__recipe-name { display: none; }
    .svr-cm__progress { padding: 16px 20px; }
    .svr-cm__nav { padding: 12px 20px; }
    .svr-cm__timer { top: 10px; inset-inline-end: 10px; }
    .svr-cm__toggle-text { display: none; }
}

@media (max-width: 480px) {
    .svr-cm__step-dot { width: 28px; height: 28px; font-size: 0.7rem; margin: 0 4px; }
    .svr-cm__tool { min-width: 54px; padding: 8px 10px; }
    .svr-cm__tool span { font-size: 0.6rem; }
    .svr-cm__nav-btn { padding: 10px 20px; font-size: 0.8rem; }
}

/* ==========================================================================
   27.1 IMMERSIVE COOK MODE PREMIUM UPGRADE (HIGH FIDELITY AESTHETICS)
   ========================================================================== */

/* ── Ambient Glow Backdrops ── */
.svr-cm__ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.svr-cm__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.12;
}

.svr-cm__orb--1 {
    top: -10%;
    inset-inline-start: -10%;
    width: clamp(300px, 40vw, 600px);
    height: clamp(300px, 40vw, 600px);
    background: var(--svr-color-accent-gold);
}

.svr-cm__orb--2 {
    bottom: -15%;
    inset-inline-end: -5%;
    width: clamp(400px, 50vw, 800px);
    height: clamp(400px, 50vw, 800px);
    background: var(--svr-color-accent-green);
    opacity: 0.08;
}

.svr-cm__orb--3 {
    top: 30%;
    left: 45%;
    width: clamp(200px, 25vw, 400px);
    height: clamp(200px, 25vw, 400px);
    background: var(--svr-color-accent-gold);
    opacity: 0.04;
}

/* Ensure content sits on top of ambient orbs */
.svr-cm {
    position: relative;
    z-index: 1;
}

/* ── Header Styling Refinements ── */
.svr-cm__brand-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(230, 185, 83, 0.1);
    border: 1px solid rgba(230, 185, 83, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--svr-color-accent-gold);
}

.svr-cm__brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.svr-cm__brand-name {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.svr-cm__brand-badge {
    font-size: 0.55rem;
    font-weight: 800;
    color: var(--svr-color-accent-gold);
    background: rgba(230, 185, 83, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.08em;
    width: fit-content;
    margin-block-start: 2px;
}

/* ── Premium Recipe Meta Bar ── */
.svr-cm__meta-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 3vw, 40px);
    padding: 14px 40px;
    background: rgba(255, 255, 255, 0.02);
    border-block-end: 1px solid var(--svr-color-border-dark);
    margin-block-end: 10px;
}

.svr-cm__meta-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.svr-cm__meta-item i {
    font-size: 1.25rem;
    color: var(--svr-color-accent-gold);
    opacity: 0.85;
}

.svr-cm__meta-item div {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.svr-cm__meta-item strong {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--svr-color-text-light);
}

.svr-cm__meta-item span {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
}

.svr-cm__meta-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.06);
}

/* ── Step Progress Indicator Improvements ── */
.svr-cm__step-dot span {
    position: relative;
    z-index: 2;
}

.svr-cm__step-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px dashed rgba(230, 185, 83, 0);
    transition: all 0.35s ease;
}

.svr-cm__step-dot--active::after {
    border-color: rgba(230, 185, 83, 0.5);
    transform: rotate(45deg);
    animation: svr-dot-spin 8s linear infinite;
}

@keyframes svr-dot-spin {
    100% { transform: rotate(405deg); }
}

/* Eyebrow step data */
.svr-cm__step-eyebrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: 16px;
}

.svr-cm__step-timer-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--svr-color-accent-gold);
    background: rgba(230, 185, 83, 0.1);
    padding: 4px 12px;
    border-radius: var(--svr-radius-pill);
}

/* ── Inline Chef Tip Preview ── */
.svr-cm__inline-tip {
    display: flex;
    gap: 14px;
    background: rgba(230, 185, 83, 0.05);
    border-inline-start: 3px solid var(--svr-color-accent-gold);
    border-radius: 0 var(--svr-radius-md) var(--svr-radius-md) 0;
    padding: 16px 20px;
    margin-block-start: 24px;
    align-items: flex-start;
}

.svr-cm__inline-tip-icon {
    font-size: 1.1rem;
    color: var(--svr-color-accent-gold);
    padding-block-start: 1px;
}

.svr-cm__inline-tip p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.65);
}

/* ── Visual Frame & Cinematic Style ── */
.svr-cm__visual-frame {
    position: relative;
    border-radius: var(--svr-radius-lg);
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.06);
}

.svr-cm__visual-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.65) 100%);
    pointer-events: none;
    z-index: 1;
}

.svr-cm__visual-grain {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 0), radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 0);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
    opacity: 0.06;
    pointer-events: none;
    z-index: 2;
}

/* Adjust timer to sit on visual frame */
.svr-cm__timer {
    z-index: 3;
}

/* ── Premium Keyboard Hints ── */
.svr-cm__nav-keys {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
    font-family: var(--svr-font-body);
}

.svr-cm__nav-keys kbd {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    box-shadow: 0 2px 0 rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    font-family: monospace;
    font-size: 0.75rem;
    padding: 3px 6px;
}

/* ── Panel Enhancements ── */
.svr-cm__panel-hint {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    margin-block-end: 18px;
    line-height: 1.5;
}

/* ── Premium Completion Screen ── */
.svr-cm__complete-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    background: var(--svr-color-accent-gold);
    filter: blur(100px);
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
}

.svr-cm__complete-inner {
    position: relative;
    z-index: 1;
}

.svr-cm__complete-eyebrow {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--svr-color-accent-gold);
    margin-block-end: 12px;
}

/* Responsive Overrides */
@media (max-width: 900px) {
    .svr-cm__meta-bar {
        padding: 10px 16px;
        gap: 16px;
        flex-wrap: wrap;
    }
    .svr-cm__meta-divider {
        display: none;
    }
    .svr-cm__nav-keys {
        display: none;
    }
}

/* ==========================================================================
   27.2 FULLSCREEN VIEWPOT OVERRIDES & RECIPE TITLE PROMINENCE
   ========================================================================== */

/* Override recipe name to be highly prominent and premium */
.svr-cm__recipe-name {
    font-family: 'Cormorant', serif !important;
    font-size: clamp(1.2rem, 2.2vw, 1.85rem) !important;
    font-weight: 500 !important;
    font-style: italic !important;
    color: var(--svr-color-accent-gold) !important;
    text-align: center !important;
    letter-spacing: 0.03em !important;
    opacity: 1 !important;
    text-shadow: 0 0 15px rgba(230, 185, 83, 0.15) !important;
    transition: all 0.3s ease !important;
}

/* Strict Desktop Fullscreen Mode - prevents scrollbar and fits all viewport elements */
@media (min-width: 901px) {
    .svr-cm {
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .svr-cm__header {
        flex-shrink: 0 !important;
        padding: 12px 30px !important;
    }
    .svr-cm__meta-bar {
        flex-shrink: 0 !important;
        padding: 10px 40px !important;
        margin-block-end: 6px !important;
    }
    .svr-cm__progress {
        flex-shrink: 0 !important;
        padding: 10px 40px !important;
    }
    .svr-cm__body {
        display: flex !important;
        flex: 1 !important;
        min-height: 0 !important;
        padding: 0 clamp(20px, 4vw, 60px) 10px !important;
        align-items: stretch !important;
        gap: clamp(20px, 3vw, 50px) !important;
    }
    .svr-cm__content {
        height: 100% !important;
        overflow-y: auto !important;
        padding-inline-end: 16px !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(255, 255, 255, 0.15) transparent !important;
    }
    .svr-cm__content::-webkit-scrollbar {
        width: 5px;
    }
    .svr-cm__content::-webkit-scrollbar-track {
        background: transparent;
    }
    .svr-cm__content::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 3px;
    }
    .svr-cm__visual {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        margin: 0 !important;
    }
    .svr-cm__visual-frame {
        height: 100% !important;
        max-height: 48vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .svr-cm__step-img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: var(--svr-radius-lg) !important;
    }
    .svr-cm__nav {
        flex-shrink: 0 !important;
        padding: 8px 40px !important;
    }
    .svr-cm__toolbar {
        flex-shrink: 0 !important;
        padding: 8px 30px !important;
    }
}

/* ==========================================================================
   27.3 INLINE STEP TIMER CARD UX IMPROVEMENTS
   ========================================================================== */

.svr-cm__step-middle {
    display: flex !important;
    gap: 24px !important;
    margin-block: 24px !important;
    align-items: stretch !important;
}

.svr-cm__ingredients {
    flex: 1 !important;
    margin-block-end: 0 !important; /* override old margin */
}

/* Redesigned Timer Widget Card */
.svr-cm__timer {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--svr-radius-md) !important;
    padding: 24px 20px !important;
    width: 220px !important;
    height: auto !important;
    flex-shrink: 0 !important;
    display: flex; /* Allow JS inline styles (e.g. display: none) to override this value */
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(12px) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.svr-cm__timer:hover {
    border-color: rgba(230, 185, 83, 0.3) !important;
    box-shadow: 0 16px 40px rgba(230, 185, 83, 0.05) !important;
}

/* SVG ring overrides for neat containment */
.svr-cm__timer-ring {
    margin-block-end: 16px !important;
    width: 120px !important;
    height: 120px !important;
}

/* Center position the display inside the card */
.svr-cm__timer-display {
    position: absolute !important;
    top: 84px !important; /* Mathematically aligned with the center of the 120px ring (24px top padding + 60px half-height) */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    pointer-events: none !important;
}

/* Bold, high-contrast, premium serif timer typography */
.svr-cm__timer-time {
    font-family: 'Cormorant', serif !important;
    font-size: 2.1rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.1) !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
}

.svr-cm__timer-label {
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: rgba(255, 255, 255, 0.4) !important;
    margin-block-start: 4px !important;
}

/* Highly accessible, clickable Call-To-Action Button */
.svr-cm__timer-btn {
    width: 100% !important;
    margin-block-start: 12px !important;
    padding: 10px 18px !important;
    border-radius: 30px !important;
    background: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-bg-dark) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.svr-cm__timer-btn:hover {
    transform: translateY(-2px) !important;
    background: #ffffff !important;
    color: var(--svr-color-bg-dark) !important;
    box-shadow: 0 6px 20px rgba(230, 185, 83, 0.35) !important;
}

.svr-cm__timer-btn:active {
    transform: translateY(0) !important;
}

.svr-cm__timer-btn i {
    font-size: 0.75rem !important;
}

/* Responsiveness fallback for small screen views */
@media (max-width: 768px) {
    .svr-cm__step-middle {
        flex-direction: column !important;
        gap: 20px !important;
    }
    .svr-cm__timer {
        width: 100% !important;
        max-width: 280px !important;
        margin-inline: auto !important;
    }
}

/* ==========================================================================
   27.4 FLOATING SIDEBAR ACTIONS, SERVINGS STEPPER, AND COLLAPSIBLE INGREDIENTS
   ========================================================================== */

/* Premium Floating Sidebar Actions Strip */
.svr-cm__floating-actions {
    position: fixed !important;
    inset-inline-end: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    z-index: 900 !important;
}

/* Glassmorphic Circular Button design */
.svr-cm__floating-btn {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--svr-color-sidebar) 75%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-light) 8%, transparent) !important;
    color: var(--svr-color-accent-gold) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    position: relative !important;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--svr-color-sidebar) 80%, transparent) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.svr-cm__floating-btn i {
    font-size: 1.15rem !important;
    transition: transform 0.3s ease !important;
}

/* Tooltip hovering logic (Left position in LTR, Right in RTL automatically) */
.svr-cm__floating-tooltip {
    position: absolute !important;
    inset-inline-end: 64px !important;
    top: 50% !important;
    transform: translateY(-50%) scale(0.9) !important;
    background: var(--svr-color-bg-dark) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-light) 10%, transparent) !important;
    color: var(--svr-color-text-light) !important;
    padding: 6px 12px !important;
    border-radius: var(--svr-radius-sm) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--svr-color-sidebar) 60%, transparent) !important;
}

.svr-cm__floating-btn:hover {
    transform: scale(1.08) !important;
    border-color: color-mix(in srgb, var(--svr-color-accent-gold) 40%, transparent) !important;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--svr-color-accent-gold) 15%, transparent) !important;
}

.svr-cm__floating-btn:hover i {
    transform: scale(1.05) !important;
}

.svr-cm__floating-btn:hover .svr-cm__floating-tooltip {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1) !important;
}

/* Active Voice Listening state */
.svr-cm__tool--active {
    background: var(--svr-color-accent-gold) !important;
    border-color: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-bg-dark) !important;
    animation: svr-cm-pulse-gold 1.5s infinite alternate !important;
}

@keyframes svr-cm-pulse-gold {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--svr-color-accent-gold) 50%, transparent); }
    100% { box-shadow: 0 0 16px 6px color-mix(in srgb, var(--svr-color-accent-gold) 25%, transparent); }
}

/* Interactive Servings Stepper (inside the header meta bar) */
.svr-cm__servings-stepper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-block-end: 2px !important;
}

.svr-cm__servings-step-btn {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--svr-color-text-light) 8%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-light) 12%, transparent) !important;
    color: var(--svr-color-text-light) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.65rem !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.svr-cm__servings-step-btn:hover {
    background: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-bg-dark) !important;
    border-color: var(--svr-color-accent-gold) !important;
    transform: scale(1.1) !important;
}

.svr-cm__servings-step-btn:active {
    transform: scale(0.95) !important;
}

.svr-cm__meta-item strong#svr-cm-serv-num {
    font-size: 1.15rem !important;
    color: var(--svr-color-accent-gold) !important;
    min-width: 14px !important;
    text-align: center !important;
    font-weight: 700 !important;
}

/* Collapsible Details Full Ingredients Card */
.svr-cm__full-ingredients {
    background: color-mix(in srgb, var(--svr-color-text-light) 2%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-light) 6%, transparent) !important;
    border-radius: var(--svr-radius-md) !important;
    margin-block-start: 24px !important;
    overflow: hidden !important;
    transition: border-color 0.3s ease, background-color 0.3s ease !important;
}

.svr-cm__full-ingredients[open] {
    border-color: color-mix(in srgb, var(--svr-color-accent-gold) 20%, transparent) !important;
    background: color-mix(in srgb, var(--svr-color-text-light) 3%, transparent) !important;
}

.svr-cm__full-ingredients-summary {
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    color: var(--svr-color-text-light) !important;
    user-select: none !important;
    outline: none !important;
}

.svr-cm__full-ingredients-summary::-webkit-details-marker {
    display: none !important;
}

.svr-cm__full-ingredients-summary i.fa-list-check {
    color: var(--svr-color-accent-gold) !important;
    margin-inline-end: 8px !important;
}

.svr-cm__chevron {
    font-size: 0.8rem !important;
    color: color-mix(in srgb, var(--svr-color-text-light) 40%, transparent) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.svr-cm__full-ingredients[open] .svr-cm__chevron {
    transform: rotate(180deg) !important;
    color: var(--svr-color-accent-gold) !important;
}

.svr-cm__full-ingredients-content {
    padding: 0 20px 20px !important;
    border-top: 1px solid color-mix(in srgb, var(--svr-color-text-light) 4%, transparent) !important;
    animation: svr-cm-slide-down 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes svr-cm-slide-down {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.svr-cm__servings-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
    gap: 12px 24px !important;
    padding-block-start: 16px !important;
}

.svr-cm__servings-list li {
    font-size: 0.88rem !important;
    color: color-mix(in srgb, var(--svr-color-text-light) 75%, transparent) !important;
    display: flex !important;
    gap: 8px !important;
    align-items: baseline !important;
    padding-block-end: 8px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--svr-color-text-light) 2%, transparent) !important;
}

.svr-cm__servings-list li strong {
    color: var(--svr-color-accent-gold) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    min-width: 28px !important;
    display: inline-block !important;
}

/* Hide old bottom padding under main since bottom toolbar was removed */
.svr-cm__body {
    margin-block-end: 0 !important;
    padding-block-end: 20px !important;
}

.svr-cm__nav {
    margin-block-end: 20px !important;
}

/* Responsiveness overrides for small/portrait viewport */
@media (max-width: 992px) {
    .svr-cm__floating-actions {
        position: fixed !important;
        inset-inline-end: 16px !important;
        bottom: 80px !important;
        top: auto !important;
        transform: none !important;
        flex-direction: row !important;
        background: color-mix(in srgb, var(--svr-color-sidebar) 80%, transparent) !important;
        border: 1px solid color-mix(in srgb, var(--svr-color-text-light) 10%, transparent) !important;
        border-radius: 40px !important;
        padding: 8px !important;
        box-shadow: 0 8px 32px color-mix(in srgb, var(--svr-color-sidebar) 90%, transparent) !important;
    }
    
    .svr-cm__floating-btn {
        width: 44px !important;
        height: 44px !important;
    }
    
    .svr-cm__floating-tooltip {
        display: none !important; /* hide tooltips on touch devices */
    }
}

/* ── Glassmorphic Sidebar Actions Column Overrides (Appended to bottom) ── */
.svr-cm__body {
    display: flex !important;
    flex-direction: row !important;
    gap: clamp(16px, 2.5vw, 40px) !important;
    align-items: stretch !important;
}

.svr-cm__content {
    flex: 1 1 0% !important;
}

.svr-cm__visual {
    flex: 1 1 0% !important;
}

.svr-cm__sidebar-actions {
    position: static !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    flex: 0 0 92px !important;
    z-index: 10 !important;
    align-self: flex-start !important;
}

.svr-cm__sidebar-actions .svr-cm__tool {
    width: 90px !important;
    height: 90px !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--svr-color-text-light) 9%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-light) 12%, transparent) !important;
    color: var(--svr-color-text-light) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
    padding: 8px !important;
}

.svr-cm__sidebar-actions .svr-cm__tool-icon {
    font-size: 1.4rem !important;
    color: var(--svr-color-accent-gold) !important;
    opacity: 0.9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    transition: transform 0.25s ease !important;
}

.svr-cm__sidebar-actions .svr-cm__tool-label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: var(--svr-color-text-light) !important;
    text-transform: capitalize !important;
    display: block !important;
    margin-top: 4px !important;
}

.svr-cm__sidebar-actions .svr-cm__tool-status {
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    display: block !important;
    margin-top: 2px !important;
}

.svr-cm__sidebar-actions .svr-cm__tool:hover {
    background: color-mix(in srgb, var(--svr-color-sidebar) 90%, transparent) !important;
    border-color: color-mix(in srgb, var(--svr-color-accent-gold) 35%, transparent) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px color-mix(in srgb, var(--svr-color-accent-gold) 15%, transparent) !important;
}

.svr-cm__sidebar-actions .svr-cm__tool:hover .svr-cm__tool-icon {
    transform: scale(1.1) !important;
    opacity: 1 !important;
}

.svr-cm__sidebar-actions .svr-cm__tool.svr-cm__tool--active {
    background: var(--svr-color-accent-gold) !important;
    border-color: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-bg-dark) !important;
    animation: svr-cm-side-pulse-gold 1.5s infinite alternate !important;
}

.svr-cm__sidebar-actions .svr-cm__tool.svr-cm__tool--active .svr-cm__tool-icon,
.svr-cm__sidebar-actions .svr-cm__tool.svr-cm__tool--active .svr-cm__tool-label,
.svr-cm__sidebar-actions .svr-cm__tool.svr-cm__tool--active .svr-cm__tool-status {
    color: var(--svr-color-bg-dark) !important;
}

@keyframes svr-cm-side-pulse-gold {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--svr-color-accent-gold) 60%, transparent); }
    100% { box-shadow: 0 0 18px 8px color-mix(in srgb, var(--svr-color-accent-gold) 30%, transparent); }
}

@media (max-width: 900px) {
    .svr-cm__body {
        flex-direction: column !important;
    }
    .svr-cm__content {
        order: 3 !important;
        width: 100% !important;
    }
    .svr-cm__visual {
        order: 1 !important;
        width: 100% !important;
    }
    .svr-cm__sidebar-actions {
        order: 2 !important;
        position: static !important;
        transform: none !important;
        flex-direction: row !important;
        width: 100% !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin-block-end: 20px !important;
        flex: 0 0 auto !important;
        align-self: center !important;
    }
    
    .svr-cm__sidebar-actions .svr-cm__tool {
        flex: 1 !important;
        max-width: 82px !important;
        height: 76px !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }
}

@media (max-width: 480px) {
    .svr-cm__sidebar-actions {
        gap: 4px !important;
    }
    .svr-cm__sidebar-actions .svr-cm__tool {
        height: 70px !important;
        border-radius: 12px !important;
        padding: 4px !important;
    }
    .svr-cm__sidebar-actions .svr-cm__tool-icon {
        font-size: 1.15rem !important;
        height: 22px !important;
    }
    .svr-cm__sidebar-actions .svr-cm__tool-label {
        font-size: 0.65rem !important;
    }
    .svr-cm__sidebar-actions .svr-cm__tool-status {
        font-size: 0.58rem !important;
    }
}

/* ── Full-Width Steps Progress Background Strip & Layout Enhancements (Appended to bottom) ── */
.svr-cm__progress {
    background: color-mix(in srgb, var(--svr-color-sidebar) 60%, transparent) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1px solid color-mix(in srgb, var(--svr-color-text-light) 6%, transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--svr-color-text-light) 6%, transparent) !important;
    padding: 16px 40px !important;
    margin-block-end: 24px !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2) !important;
    width: 100% !important;
}

.svr-cm__instruction {
    font-size: clamp(1.6rem, 2.5vw, 2.2rem) !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    margin-block-end: 12px !important;
}

.svr-cm__description {
    font-size: clamp(0.85rem, 1vw, 0.95rem) !important;
    line-height: 1.6 !important;
    margin-block-end: 20px !important;
}

.svr-cm__step-middle {
    margin-block: 16px !important;
    gap: 16px !important;
}

.svr-cm__ingredient-item label {
    padding: 4px 0 !important;
}

.svr-cm__ingredient-name {
    font-size: 0.85rem !important;
}

.svr-cm__inline-tip {
    padding: 10px 14px !important;
    margin-block-start: 16px !important;
}

.svr-cm__full-ingredients {
    margin-block-start: 16px !important;
}

.svr-cm__full-ingredients-summary {
    padding: 10px 16px !important;
    font-size: 0.85rem !important;
}

/* ── Vertical Centering, Glassmorphism, and Matching Column Heights (Appended to bottom) ── */
@media (min-width: 901px) {
    .svr-cm__body {
        align-items: center !important;
        justify-content: center !important;
    }

    .svr-cm__content {
        align-self: center !important;
        flex: 1 1 0% !important;
        max-width: none !important;
        height: 498px !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding-inline-end: 16px !important;
        padding-bottom: 30px !important;
    }

    .svr-cm__content > * {
        flex-shrink: 0 !important;
    }

    /* Pseudo-element spacers to center the contents vertically when space is available */
    .svr-cm__content::before,
    .svr-cm__content::after {
        content: "" !important;
        display: block !important;
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        min-height: 0 !important;
        height: 10px !important;
    }
    
    .svr-cm__visual {
        align-self: center !important;
        flex: 1 1 0% !important;
        max-width: none !important;
    }

    .svr-cm__visual-frame {
        height: 498px !important;
        max-height: 70vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .svr-cm__step-img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 18px !important;
    }

    .svr-cm__sidebar-actions {
        align-self: center !important;
    }
}

/* Custom Styled Thin Scrollbar for Content column (brought back as requested) */
.svr-cm__content::-webkit-scrollbar {
    width: 6px !important;
}

.svr-cm__content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 3px !important;
}

.svr-cm__content::-webkit-scrollbar-track {
    background: transparent !important;
}

/* Cohesive Glassmorphic Design System across all recipe components (preserving original padding/width parameters) */
.svr-cm__ingredients {
    padding: 20px 24px !important;
    background: color-mix(in srgb, var(--svr-color-text-light) 9%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-light) 12%, transparent) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
    border-radius: 18px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.svr-cm__timer {
    width: 220px !important;
    padding: 24px 20px !important;
    background: color-mix(in srgb, var(--svr-color-text-light) 9%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-light) 12%, transparent) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35) !important;
    border-radius: 18px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.svr-cm__timer-ring {
    width: 120px !important;
    height: 120px !important;
    margin-block-end: 16px !important;
}

.svr-cm__timer-display {
    position: absolute !important;
    top: 84px !important; /* Mathematically aligned with the center of the 120px ring (24px top padding + 60px half-height) */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    pointer-events: none !important;
}

.svr-cm__timer-time {
    font-size: 2.1rem !important;
}

.svr-cm__timer-btn {
    margin-block-start: 12px !important;
    padding: 10px 18px !important;
    font-size: 0.85rem !important;
}

.svr-cm__inline-tip, 
.svr-cm__full-ingredients {
    background: color-mix(in srgb, var(--svr-color-text-light) 9%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-light) 12%, transparent) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
    border-radius: 18px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.svr-cm__ingredients:hover, 
.svr-cm__timer:hover, 
.svr-cm__inline-tip:hover, 
.svr-cm__full-ingredients:hover {
    border-color: color-mix(in srgb, var(--svr-color-accent-gold) 25%, transparent) !important;
    box-shadow: 0 8px 30px rgba(230, 185, 83, 0.08) !important;
}

.svr-cm__full-ingredients[open] {
    background: color-mix(in srgb, var(--svr-color-text-light) 13%, transparent) !important;
    border-color: color-mix(in srgb, var(--svr-color-accent-gold) 20%, transparent) !important;
}

/* Accordion internal scroll constraint to keep parent column beautifully centered without cutoffs */
.svr-cm__full-ingredients-content {
    max-height: 200px !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent !important;
}

.svr-cm__full-ingredients-content::-webkit-scrollbar {
    width: 6px !important;
}

.svr-cm__full-ingredients-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 3px !important;
}

.svr-cm__full-ingredients-content::-webkit-scrollbar-track {
    background: transparent !important;
}

@media (max-width: 900px) {
    .svr-cm__body {
        align-items: center !important;
    }
    
    .svr-cm__visual-frame {
        height: auto !important;
        max-height: 40vh !important;
    }
    
    .svr-cm__content {
        max-height: none !important;
        overflow-y: visible !important;
    }
}

/* ── Three-Column Middle Step Layout and Tip Card Overrides ── */
.svr-cm__step-middle {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    align-items: stretch !important;
    margin-block: 20px !important;
}

.svr-cm__step-middle .svr-cm__ingredients {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    background: color-mix(in srgb, var(--svr-color-text-light) 9%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-light) 12%, transparent) !important;
    border-radius: 18px !important;
    padding: 24px 20px !important;
    height: auto !important;
    min-height: 250px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Unique and amazing timer card styled like a premium luxury capsule dashboard dial */
.svr-cm__step-middle .svr-cm__timer {
    flex: 0 0 190px !important;
    width: 190px !important;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--svr-color-accent-gold) 15%, transparent), rgba(15, 15, 15, 0.45)) !important;
    border: 1.5px solid color-mix(in srgb, var(--svr-color-accent-gold) 45%, transparent) !important;
    box-shadow: 0 8px 32px rgba(230, 185, 83, 0.08), inset 0 0 16px rgba(230, 185, 83, 0.12) !important;
    border-radius: 30px !important;
    padding: 24px 16px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 250px !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
}

.svr-cm__step-middle .svr-cm__timer-ring {
    width: 120px !important;
    height: 120px !important;
    margin-block-end: 0 !important;
}

.svr-cm__step-middle .svr-cm__timer-display {
    position: absolute !important;
    top: 84px !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    pointer-events: none !important;
}

.svr-cm__step-middle .svr-cm__timer-btn {
    margin-top: auto !important;
    width: 100% !important;
    background: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-bg-dark) !important;
    border: none !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--svr-color-accent-gold) 40%, transparent) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border-radius: 50px !important;
    padding: 10px 16px !important;
    font-size: 0.8rem !important;
}

.svr-cm__step-middle .svr-cm__timer-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--svr-color-accent-gold) 60%, transparent) !important;
}

.svr-cm__step-middle .svr-cm__timer-btn:active {
    transform: translateY(0) !important;
}

/* Chef's Tip Card */
.svr-cm__step-middle .svr-cm__inline-tip {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    background: color-mix(in srgb, var(--svr-color-text-light) 9%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-light) 12%, transparent) !important;
    border-radius: 18px !important;
    padding: 24px 20px !important;
    margin-block-start: 0 !important;
    height: auto !important;
    min-height: 250px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 12px !important;
}

.svr-cm__step-middle .svr-cm__inline-tip p {
    margin: 0 !important;
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

@media (max-width: 768px) {
    .svr-cm__step-middle {
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .svr-cm__step-middle .svr-cm__ingredients,
    .svr-cm__step-middle .svr-cm__inline-tip {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 0 !important;
    }
    
    .svr-cm__step-middle .svr-cm__timer {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 280px !important;
        margin-inline: auto !important;
        min-height: 220px !important;
    }
}

/* ── UI/UX Hierarchy Improvements for Chef's Tip & Timer ── */

/* Warm helper-tint for Chef's Tip card to distinguish it from the checklist */
.svr-cm__step-middle .svr-cm__inline-tip {
    background: linear-gradient(135deg, color-mix(in srgb, var(--svr-color-accent-gold) 5%, transparent), color-mix(in srgb, var(--svr-color-text-light) 8%, transparent)) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-accent-gold) 18%, transparent) !important;
    box-shadow: 0 8px 32px rgba(230, 185, 83, 0.03) !important;
}

/* Glowing bulb effect on Chef's Tip */
.svr-cm__step-middle .svr-cm__inline-tip i.fa-lightbulb {
    filter: drop-shadow(0 0 6px var(--svr-color-accent-gold)) !important;
    animation: svr-bulb-glow 1.5s infinite alternate !important;
}

@keyframes svr-bulb-glow {
    0% { opacity: 0.85; filter: drop-shadow(0 0 3px var(--svr-color-accent-gold)); }
    100% { opacity: 1; filter: drop-shadow(0 0 8px var(--svr-color-accent-gold)); }
}

/* Glowing dashboard effects on Timer Card progress ring */
.svr-cm__step-middle .svr-cm__timer-circle {
    filter: drop-shadow(0 0 8px var(--svr-color-accent-gold)) !important;
    animation: svr-timer-glow 2s infinite alternate !important;
}

@keyframes svr-timer-glow {
    0% { filter: drop-shadow(0 0 3px var(--svr-color-accent-gold)); }
    100% { filter: drop-shadow(0 0 10px var(--svr-color-accent-gold)); }
}

/* Tactile micro-interactions for the Ingredients checklist */
.svr-cm__ingredient-item label {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
}

.svr-cm__ingredient-item label:hover {
    transform: translateX(6px) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

.svr-cm__ingredient-item label:hover .svr-cm__ingredient-check {
    border-color: var(--svr-color-accent-gold) !important;
    transform: scale(1.1) !important;
}

.svr-cm__ingredient-item input:checked ~ .svr-cm__ingredient-check {
    box-shadow: 0 0 12px color-mix(in srgb, var(--svr-color-accent-gold) 70%, transparent) !important;
    transform: scale(1.05) !important;
}

/* Premium gradient and shadow on Timer button */
.svr-cm__step-middle .svr-cm__timer-btn {
    background: linear-gradient(135deg, var(--svr-color-accent-gold), color-mix(in srgb, var(--svr-color-accent-gold) 80%, #000000)) !important;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--svr-color-accent-gold) 35%, transparent) !important;
}

.svr-cm__step-middle .svr-cm__timer-btn:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--svr-color-accent-gold) 55%, transparent) !important;
}

/* ── Symmetrical Header Grid for Perfect 100% Recipe Title Centering ── */
@media (min-width: 901px) {
    .svr-cm__header {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: center !important;
        justify-content: stretch !important;
    }
    
    .svr-cm__brand {
        justify-self: start !important;
    }
    
    .svr-cm__recipe-name {
        justify-self: center !important;
        text-align: center !important;
    }
    
    .svr-cm__controls {
        justify-self: end !important;
    }
}

/* ── Responsive Overrides for Narrow Desktop Viewports (< 1250px) ── */
@media (max-width: 1250px) {
    /* Stack the 3 middle cards vertically to prevent horizontal clipping/squishing */
    .svr-cm__step-middle {
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .svr-cm__step-middle .svr-cm__ingredients,
    .svr-cm__step-middle .svr-cm__inline-tip {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 0 !important;
    }
    
    .svr-cm__step-middle .svr-cm__timer {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 280px !important;
        margin-inline: auto !important;
        min-height: 220px !important;
    }

    /* Maximize horizontal space for content column by reducing container gaps and paddings */
    .svr-cm__body {
        gap: 20px !important;
        padding-inline: 20px !important;
    }
}

/* ── Voice Commands Guide Inside Drawer ── */
.svr-cm__voice-guide {
    margin-top: 30px !important;
    padding-top: 24px !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.1) !important;
}

.svr-cm__voice-guide-title {
    font-family: var(--svr-font-heading) !important;
    font-size: 1.15rem !important;
    color: var(--svr-color-accent-gold) !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.svr-cm__voice-guide-desc {
    font-size: 0.82rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
}

.svr-cm__voice-commands {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.svr-cm__voice-command-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
}

.svr-cm__voice-cmd {
    font-family: monospace !important;
    font-size: 0.8rem !important;
    color: var(--svr-color-accent-gold) !important;
    font-weight: 600 !important;
    background: rgba(230, 185, 83, 0.1) !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(230, 185, 83, 0.15) !important;
}

.svr-cm__voice-action {
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Voice Sidebar Button Tooltip (Desktop Only) */
@media (min-width: 901px) {
    .svr-cm__tool[id="svr-cm-tool-voice"] {
        position: relative !important;
    }

    .svr-cm__tool[id="svr-cm-tool-voice"]::after {
        content: "Speak: 'Next', 'Back', 'Start', 'Pause'" !important;
        position: absolute !important;
        inset-inline-end: 110% !important;
        top: 50% !important;
        transform: translateY(-50%) scale(0.9) !important;
        background: rgba(18, 18, 18, 0.95) !important;
        color: var(--svr-color-accent-gold) !important;
        border: 1.5px solid color-mix(in srgb, var(--svr-color-accent-gold) 40%, transparent) !important;
        padding: 8px 14px !important;
        border-radius: 10px !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        z-index: 1000 !important;
    }

    .svr-cm__tool[id="svr-cm-tool-voice"]:hover::after {
        opacity: 1 !important;
        transform: translateY(-50%) scale(1) !important;
    }
}

/* ── Horizontal Sleek Timer Overlay (Appended to bottom) ── */
.svr-cm__timer--horizontal {
    position: absolute !important;
    top: 20px !important;
    inset-inline-start: 50% !important;
    transform: translateX(-50%) !important;
    display: flex;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
    background: rgba(18, 18, 18, 0.8) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 40px !important;
    padding: 10px 20px !important;
    width: auto !important;
    min-width: 320px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
    z-index: 50 !important;
    inset-inline-end: auto !important;
    height: auto !important;
}

.svr-cm__timer--horizontal .svr-cm__timer-info {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.svr-cm__timer--horizontal .svr-cm__timer-time {
    font-family: var(--svr-font-heading) !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    color: var(--svr-color-text-light) !important;
    line-height: 1 !important;
}

.svr-cm__timer--horizontal .svr-cm__timer-label {
    font-size: 0.6rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

.svr-cm__timer--horizontal .svr-cm__timer-progress-wrap {
    flex: 1 !important;
    height: 6px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    position: relative !important;
}

.svr-cm__timer--horizontal .svr-cm__timer-progress-bar {
    height: 100% !important;
    background: var(--svr-color-accent-gold) !important;
    width: 100% !important;
    border-radius: 10px !important;
    transition: width 0.3s linear !important;
}

.svr-cm__timer--horizontal .svr-cm__timer-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--svr-color-accent-gold) !important;
    color: #111 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 15px rgba(230, 185, 83, 0.4) !important;
    flex-shrink: 0 !important;
}

.svr-cm__timer--horizontal .svr-cm__timer-btn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(230, 185, 83, 0.6) !important;
}

.svr-cm__timer--horizontal .svr-cm__timer-btn i {
    font-size: 0.9rem !important;
    margin-left: 2px !important;
}
.svr-cm__timer--horizontal .svr-cm__timer-btn i.fa-pause,
.svr-cm__timer--horizontal .svr-cm__timer-btn i.fa-check {
    margin-left: 0 !important;
}

@media (max-width: 768px) {
    .svr-cm__timer--horizontal {
        min-width: 280px !important;
        padding: 8px 15px !important;
        top: 15px !important;
    }
}

/* ==========================================================================
   GLOBAL MOBILE GRID OVERRIDES (FORCE 1 COLUMN ON MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    .tft-premium-grid,
    .svr-creators-grid,
    .svr-collections-grid,
    .tft-dietary-hub__grid,
    .svr-shop-grid,
    .svr-blog-grid,
    .svr-pricing-grid,
    .tft-flavor-grid,
    .svr-footer-top,
    .svr-carousel-track,
    .svr-masterclass-track,
    .tft-shop__grid,
    .svr-values-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Fix hero container on mobile */
    .svr-hero__inner {
        flex-direction: column !important;
    }

    /* Prevent massive paddings from causing horizontal scroll */
    .svr-avant-home {
        margin: 0 15px 30px !important;
        border-radius: 20px !important;
    }
    .svr-dashboard-widgets {
        padding: 30px 15px !important;
    }
    .tft-compact-planner {
        padding: 20px !important;
    }
    .tft-compact-planner__days {
        gap: 5px !important;
    }
    .tft-planner-day__circle {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.7rem !important;
    }

    /* Fix Newsletter form overflow and stack it on mobile */
    .svr-newsletter-card__form {
        flex-direction: column !important;
        background: transparent !important;
        padding: 0 !important;
        gap: 15px !important;
    }
    .svr-newsletter-card__input {
        background: #fff !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .svr-newsletter-card__btn {
        width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 30px !important;
    }

    /* Force mobile top nav spacing */
    .svr-top-nav {
        position: relative !important; /* Disable sticky on mobile so it doesn't block screen */
        top: 0 !important;
        margin: 15px !important;
        width: auto !important;
        padding: 15px !important;
    }
    .svr-top-nav__links {
        flex-direction: column !important;
        align-items: center !important;
    }
    .svr-top-nav__actions {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    .svr-search-bar {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Hide text/dropdown for accordion in mobile dock */
    .svr-sidebar .svr-nav-accordion {
        margin: 0 !important;
        padding: 0 !important;
        width: 44px !important;
        height: 44px !important;
    }
    .svr-sidebar .svr-nav-accordion summary {
        font-size: 0 !important; /* hide 'Recipes' text */
        padding: 0 !important;
        margin: 0 !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        color: rgba(255, 255, 255, 0.6) !important;
        list-style: none !important;
        position: relative !important;
    }
    .svr-sidebar .svr-nav-accordion summary::marker,
    .svr-sidebar .svr-nav-accordion summary::-webkit-details-marker {
        display: none !important;
    }
    .svr-sidebar .svr-nav-accordion summary i:not(:first-child) {
        display: none !important; /* hide chevron */
    }
    .svr-sidebar .svr-nav-accordion summary i:first-child {
        font-size: 1.2rem !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
    }
    .svr-sidebar .svr-nav-accordion__content {
        display: none !important; /* strictly hide dropdown on mobile dock */
    }
    
    /* Ensure icons are perfectly centered and ignore hidden text */
    .svr-nav__link i {
        font-size: 1.2rem !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
    }

    /* Home 2 & Home 4 Mobile Responsiveness Hotfixes */
    .svr-h2-shop-featured > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .svr-h4-bento-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 15px !important;
    }
    .svr-h4-bento-item {
        grid-column: span 1 !important;
        grid-row: auto !important;
        height: 300px !important;
    }
    .svr-h4-bento-overlay {
        padding: 20px !important;
    }
    .svr-h4-bento-overlay h3 {
        font-size: 1.5rem !important;
    }
    .svr-h4-bento-text-only p {
        font-size: 1.2rem !important;
    }
    .svr-h4-accordion-container {
        grid-template-columns: 1fr !important;
        height: auto !important;
        gap: 15px !important;
    }
    .svr-h4-accordion-item {
        height: 250px !important;
    }
    .svr-h4-roster-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 25px 0 !important;
        gap: 10px !important;
    }
    .svr-h4-roster-meta {
        width: 100% !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    .svr-h4-roster-title {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
    }
    .svr-h4-roster-arrow {
        display: none !important;
    }
    .svr-h4-roster-img {
        display: none !important;
    }
    .tft-cin-split {
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
        margin: 0 15px 40px !important;
        border-radius: 20px !important;
        overflow: hidden !important;
    }
    .tft-cin-panel {
        height: 350px !important;
        flex: none !important;
    }
    .svr-h4-chef-secrets {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 30px !important;
    }
    .svr-h4-secrets-right {
        flex-direction: column !important;
        height: auto !important;
    }
    .svr-h4-secret-card {
        height: 250px !important;
        transform: none !important;
    }
    .svr-h4-secrets-left h2 {
        font-size: 2.8rem !important;
    }
    .svr-h4-immersive-hero {
        margin: 15px 15px 40px !important;
        height: auto !important;
        min-height: 500px !important;
        border-radius: 20px !important;
        padding: 40px 20px !important;
        align-items: flex-end !important;
    }
    .svr-h4-hero-content {
        padding-left: 0 !important;
    }
    .svr-h4-hero-content h1 {
        font-size: 3rem !important;
        line-height: 1.1 !important;
    }
    .svr-h4-hero-content h1 em {
        font-size: 3.5rem !important;
        margin-left: 0 !important;
        display: inline !important;
    }
    .svr-h4-hero-content p {
        padding-left: 15px !important;
        font-size: 1rem !important;
    }
    .svr-h4-hero-actions {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }
    .svr-h4-hero-stats {
        width: 100% !important;
        justify-content: flex-start !important;
    }
    .svr-h4-floating-card {
        display: none !important;
    }
    .svr-h4-bento-section,
    .svr-h4-accordion-section,
    .svr-h4-roster-section,
    .svr-h4-dual-hover-section,
    .svr-h4-split-profiles,
    .svr-h4-disciplines-section,
    .svr-h4-chef-secrets {
        margin: 0 15px 40px !important;
        border-radius: 20px !important;
        padding: 25px 20px !important;
    }
    .svr-h4-editorial-spread {
        flex-direction: column !important;
        margin: 0 15px 40px !important;
        border-radius: 20px !important;
    }
    .svr-h4-ed-image {
        min-height: 300px !important;
        height: 300px !important;
        flex: none !important;
    }
    .svr-h4-ed-content {
        padding: 30px 20px !important;
    }
    .svr-h4-ed-content h2 {
        font-size: 2.5rem !important;
    }
    .svr-h4-disciplines-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .svr-h4-disc-img-wrapper {
        height: 250px !important;
    }
    .svr-h4-disciplines-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }
    .svr-h4-disciplines-header h2 {
        font-size: 2.5rem !important;
    }
    .svr-h4-pre-footer {
        flex-direction: column !important;
        margin: 0 15px 40px !important;
        gap: 20px !important;
    }
    .svr-h4-pf-card {
        padding: 30px 20px !important;
    }
    .svr-h4-pf-img {
        max-height: 120px !important;
        width: auto !important;
    }
    .svr-top-nav {
        position: relative !important;
        top: 0 !important;
        margin: 15px !important;
        width: auto !important;
        padding: 18px 20px !important;
        border-radius: 24px !important;
        background: rgba(15, 15, 15, 0.95) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    }
    .svr-top-nav__actions {
        display: grid !important;
        grid-template-columns: auto 1fr auto auto auto !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }
    .tft-mobile-nav-toggle {
        display: flex !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 45px !important;
        height: 45px !important;
        padding: 14px 12px !important;
        background: rgba(255, 255, 255, 0.07) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        z-index: 1001 !important;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .tft-mobile-nav-toggle-bar {
        background-color: var(--svr-color-text-light) !important;
        width: 100% !important;
        height: 2px !important;
        transition: all 0.3s ease !important;
    }
    .tft-mobile-nav-toggle:hover {
        background: rgba(255, 255, 255, 0.15) !important;
        border-color: var(--svr-color-accent-gold) !important;
    }
    .tft-mobile-nav-toggle:hover .tft-mobile-nav-toggle-bar {
        background-color: var(--svr-color-accent-gold) !important;
    }
    .tft-mobile-nav-toggle.tft-active .tft-mobile-nav-toggle-bar:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
        background-color: var(--svr-color-accent-gold) !important;
    }
    .tft-mobile-nav-toggle.tft-active .tft-mobile-nav-toggle-bar:nth-child(2) {
        opacity: 0 !important;
    }
    .tft-mobile-nav-toggle.tft-active .tft-mobile-nav-toggle-bar:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
        background-color: var(--svr-color-accent-gold) !important;
    }
    .svr-top-nav__actions .svr-btn-primary {
        grid-column: 3 !important;
        grid-row: 1 !important;
        font-size: 0 !important;
        padding: 0 !important;
        border-radius: 50% !important;
        width: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .svr-top-nav__actions .svr-btn-primary i {
        font-size: 1.1rem !important;
        margin: 0 !important;
    }
    .svr-top-nav__actions a[href="my-account.html"] {
        grid-column: 4 !important;
        grid-row: 1 !important;
    }
    .svr-top-nav__actions a[href="cart.html"] {
        grid-column: 5 !important;
        grid-row: 1 !important;
    }
    .svr-top-nav__actions .svr-search-bar {
        grid-column: 1 / span 5 !important;
        grid-row: 2 !important;
        width: 100% !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 16px !important;
        padding: 12px 20px !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    }
    .svr-top-nav__actions .svr-search-bar input {
        color: #ffffff !important;
    }
    .svr-avant-home {
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }
    .svr-avant-home > .svr-hero,
    .svr-avant-home > .svr-hero-webgl,
    .svr-avant-home > .svr-h4-immersive-hero {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: auto !important;
    }
    .svr-hero__title {
        font-size: clamp(2rem, 8vw, 2.8rem) !important;
        word-break: break-word !important;
    }
    .svr-h2-shop-featured {
        padding: 25px 20px !important;
    }
    /* Home 3 Mobile Margins & Paddings Overrides */
    .svr-hot-recipes,
    .svr-browse-ingredients,
    .svr-bento-grid,
    .svr-masterclass,
    .svr-editors-picks,
    .svr-community-grid,
    .svr-team-list,
    .svr-premium-cta {
        margin-left: 15px !important;
        margin-right: 15px !important;
        margin-bottom: 30px !important;
        width: auto !important;
    }
    .svr-section-header {
        margin-left: 15px !important;
        margin-right: 15px !important;
        margin-bottom: 15px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .svr-hot-recipes {
        padding: 20px 15px !important;
        border-radius: 16px !important;
    }
    .svr-masterclass {
        padding: 20px 15px !important;
        border-radius: 20px !important;
    }

    /* Mobile Bottom Dock Tooltips */
    .svr-sidebar {
        overflow: visible !important;
    }
    .svr-sidebar .svr-nav-accordion {
        position: relative !important;
    }
    .svr-nav__link::after,
    .svr-sidebar .svr-nav-accordion::after {
        position: absolute !important;
        bottom: 60px !important;
        left: 50% !important;
        transform: translate(-50%, 8px) scale(0.9) !important;
        background: var(--svr-color-accent-gold) !important;
        color: var(--svr-color-text-dark) !important;
        padding: 6px 12px !important;
        border-radius: 8px !important;
        font-family: var(--svr-font-body) !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 10002 !important;
    }
    .svr-nav__link::before,
    .svr-sidebar .svr-nav-accordion::before {
        content: "" !important;
        position: absolute !important;
        bottom: 54px !important;
        left: 50% !important;
        transform: translate(-50%, 8px) !important;
        border-width: 6px 6px 0 6px !important;
        border-style: solid !important;
        border-color: var(--svr-color-accent-gold) transparent transparent transparent !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 10002 !important;
    }

    .svr-nav__link[href*="index.html"]::after { content: "Home" !important; }
    .svr-sidebar .svr-nav-accordion::after { content: "Recipes" !important; }
    .svr-nav__link[href*="shop.html"]::after { content: "Shop" !important; }
    .svr-nav__link[href*="blog.html"]::after { content: "Journal" !important; }
    .svr-nav__link[href*="contact.html"]::after { content: "Contact" !important; }

    .svr-nav__link:hover::after,
    .svr-sidebar .svr-nav-accordion:hover::after,
    .svr-nav__link:focus::after,
    .svr-sidebar .svr-nav-accordion:focus::after,
    .svr-nav__link:active::after,
    .svr-sidebar .svr-nav-accordion:active::after {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate(-50%, 0) scale(1) !important;
    }
    .svr-nav__link:hover::before,
    .svr-sidebar .svr-nav-accordion:hover::before,
    .svr-nav__link:focus::before,
    .svr-sidebar .svr-nav-accordion:focus::before,
    .svr-nav__link:active::before,
    .svr-sidebar .svr-nav-accordion:active::before {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate(-50%, 0) !important;
    }
}

/* ==========================================================================
   TFT - PREMIUM RESPONSIVE & MOBILE OVERRIDES (APPEND-ONLY)
   ========================================================================== */

/* 1. Global & Column Stacking (max-width: 992px) */
@media (max-width: 992px) {
    .tft-cart-main,
    .tft-cart-sidebar,
    .tft-checkout-left,
    .tft-checkout-right,
    .tft-account-nav,
    .tft-account-content {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    .tft-account-wrap {
        padding: 0 15px 40px !important;
    }
    .tft-checkout-wrap {
        padding: 0 15px 40px !important;
    }
}

/* 2. Layout, Grid, Padding & Component Tuning (max-width: 768px) */
@media (max-width: 768px) {
    /* Override massive inline paddings */
    .svr-avant-cart,
    .svr-avant-shop,
    .svr-avant-submit,
    .svr-avant-services,
    .svr-avant-about,
    .svr-avant-aboutme,
    .svr-avant-contact {
        padding: 40px 15px !important;
        margin: 0 10px 30px !important;
        border-radius: 20px !important;
    }
    .svr-avant-contact__content {
        padding: 40px 20px !important;
    }

    /* TFT-OVERRIDE: Blog categories/tabs vertical stacking on mobile */
    .tft-blog-categories-nav {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 0 !important;
        margin-top: 25px !important;
    }
    .tft-blog-categories-nav li {
        width: 100% !important;
        flex: 1 1 auto !important;
    }
    .tft-blog-categories-nav a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 12px 20px !important;
        box-sizing: border-box !important;
        border-radius: 30px !important;
        border: 1px solid rgba(0,0,0,0.06) !important;
        background: #fbfbfb !important;
        color: rgba(0,0,0,0.6) !important;
        font-size: 0.85rem !important;
        letter-spacing: 0.05em !important;
        transition: all 0.3s ease !important;
    }
    .tft-blog-categories-nav a.active {
        background: #1a1a1a !important;
        color: var(--svr-color-accent-gold) !important;
        border-color: #1a1a1a !important;
    }

    /* Clean, flat featured blog mobile layout (title top, image below, no nested borders) */
    .tft-blog-featured-premium {
        flex-direction: column !important;
        min-height: auto !important;
        align-items: stretch !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-bottom: 40px !important;
    }
    .tft-bfp-content {
        padding: 20px 0 !important;
        width: 100% !important;
    }
    .tft-bfp-title {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 15px !important;
    }
    .tft-bfp-excerpt {
        margin-bottom: 25px !important;
    }
    .tft-bfp-meta-row {
        margin-bottom: 25px !important;
    }
    .tft-bfp-image-wrapper {
        position: relative !important;
        width: 100% !important;
        height: 280px !important;
        border-radius: 20px !important;
        right: auto !important;
        top: auto !important;
        order: 2 !important;
    }

    /* Editorial Topics Grid Fix: 1 item per row */
    .tft-editorial-topics-masonry {
        grid-template-columns: 1fr !important;
        grid-auto-rows: 150px !important;
        gap: 15px !important;
    }
    .tft-editorial-topics-masonry .tft-et-card,
    .tft-editorial-topics-masonry .tft-et-card:nth-child(n) {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    /* Lookbook Feed Overlay Stacking */
    .tft-lookbook-feed {
        gap: 40px !important;
        padding: 20px 0 !important;
    }
    .tft-lb-post {
        flex-direction: column !important;
        align-items: stretch !important;
        height: auto !important;
    }
    .tft-lb-img {
        width: 100% !important;
        height: 250px !important;
    }
    .tft-lb-card {
        width: 100% !important;
        position: relative !important;
        right: auto !important;
        left: auto !important;
        padding: 20px 15px !important;
        margin-top: -30px !important;
        z-index: 2 !important;
    }

    /* Top Nav Action Icons Position Fail-safe */
    .svr-top-nav__actions > :nth-child(4) {
        grid-column: 4 !important;
        grid-row: 1 !important;
    }
    .svr-top-nav__actions > :nth-child(5) {
        grid-column: 5 !important;
        grid-row: 1 !important;
    }

    /* Form Rows & Inputs Stacking */
    .tft-form-row {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Order Review Card Padding Tune-down */
    .tft-order-review {
        padding: 25px 20px !important;
    }

    /* Shopping Cart Inline Flex Layout Fixes */
    .svr-avant-cart > div[style*="display: flex"] {
        gap: 30px !important;
    }
    .tft-cart-items-list {
        min-width: 100% !important;
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    .svr-avant-cart div[style*="flex: 0 0 400px"] {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        width: 100% !important;
        padding: 30px 20px !important;
    }
    .tft-cart-item h3 {
        font-size: 1.5rem !important;
    }

    /* Shop Page Flex Layout Overrides */
    .svr-avant-shop > div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 40px !important;
    }
    .svr-avant-shop div[style*="flex: 0 0 250px"] {
        flex: 1 1 100% !important;
        width: 100% !important;
        position: relative !important;
        top: auto !important;
    }

    /* Customer Account Dashboard Navigation Overrides */
    .tft-account-nav ul {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    .tft-account-nav a {
        padding: 10px 15px !important;
        font-size: 0.85rem !important;
    }

    /* Avant-Garde Contact Page Stacking */
    .svr-avant-contact {
        flex-direction: column !important;
        min-height: auto !important;
    }
    .svr-avant-contact__visual {
        flex: 1 1 100% !important;
        width: 100% !important;
        height: 300px !important;
        border-radius: 20px 20px 0 0 !important;
    }
    .svr-avant-contact__content {
        flex: 1 1 100% !important;
        width: 100% !important;
        padding: 40px 20px !important;
    }
    .svr-avant-about {
        padding-bottom: 40px !important;
    }

    /* Single Post Layout Adjustments */
    .tft-single-post {
        padding: 30px 15px !important;
    }
    .tft-sp-featured-media {
        height: 300px !important;
        margin-bottom: 30px !important;
    }
    .tft-post-nav {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

/* 3. Small Screen Cart Items Layout (max-width: 600px) */
@media (max-width: 600px) {
    .tft-cart-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        position: relative !important;
    }
    .tft-cart-item > div[style*="width: 150px"] {
        width: 100% !important;
        height: 200px !important;
    }
    .tft-cart-item .tft-remove-item {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
    }
    .tft-form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
}

/* 4. Desktop Sidebar Margin & Spacing Consistency (min-width: 769px) */
@media (min-width: 769px) {
    .svr-avant-home > .svr-hot-recipes,
    .svr-avant-home > .svr-browse-ingredients,
    .svr-avant-home > .svr-section-header,
    .svr-avant-home > .svr-bento-grid,
    .svr-avant-home > .svr-masterclass,
    .svr-avant-home > .svr-editors-picks,
    .svr-avant-home > .svr-community-grid,
    .svr-avant-home > .svr-team-list,
    .svr-avant-home > .svr-premium-cta {
        margin-left: 60px !important;
        margin-right: 60px !important;
        width: auto !important;
    }
}

/* 5. Custom Premium Spring-Reveal Bottom Dock Tooltips (max-width: 768px) */
@media (max-width: 768px) {
    .svr-nav__link::after,
    .svr-sidebar .svr-nav-accordion::after {
        background: var(--svr-color-sidebar) !important;
        color: var(--svr-color-accent-gold) !important;
        border: 1px solid var(--svr-color-border-dark) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        padding: 8px 16px !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
        transform: translate(-50%, 15px) scale(0.8) rotate(-3deg) !important;
        transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    
    .svr-nav__link::before,
    .svr-sidebar .svr-nav-accordion::before {
        border-color: var(--svr-color-border-dark) transparent transparent transparent !important;
        transform: translate(-50%, 15px) scale(0.8) !important;
        transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    
    .svr-nav__link:hover::after,
    .svr-sidebar .svr-nav-accordion:hover::after,
    .svr-nav__link:focus::after,
    .svr-sidebar .svr-nav-accordion:focus::after,
    .svr-nav__link:active::after,
    .svr-sidebar .svr-nav-accordion:active::after {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate(-50%, 0) scale(1) rotate(0deg) !important;
    }
    
    .svr-nav__link:hover::before,
    .svr-sidebar .svr-nav-accordion:hover::before,
    .svr-nav__link:focus::before,
    .svr-sidebar .svr-nav-accordion:focus::before,
    .svr-nav__link:active::before,
    .svr-sidebar .svr-nav-accordion:active::before {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate(-50%, 0) scale(1) !important;
    }
}

/* ==========================================================================
   GLOBAL FORM LAYOUT FIXES
   ========================================================================== */
/* Force ingredient row to ignore global form-row grid and render as flex */
.tft-ingredient-row {
    display: flex !important;
}

/* ==========================================================================
   MY ACCOUNT PAGE MOBILE REFINE (PREVENTS NESTED BOXES)
   ========================================================================== */
@media (max-width: 768px) {
    .tft-dashboard-welcome {
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        color: var(--svr-color-text-dark) !important;
        margin-bottom: 35px !important;
    }
    .tft-dashboard-welcome::after {
        display: none !important;
    }
    .tft-welcome-title {
        color: var(--svr-color-text-dark) !important;
        font-size: 2rem !important;
    }
    .tft-welcome-title em {
        color: var(--svr-color-accent-gold) !important;
    }
    .tft-welcome-text {
        color: var(--svr-color-text-muted-light) !important;
    }
    .tft-dashboard-summary-cards {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

/* ==========================================================================
   SUBMIT RECIPE PAGE RESPONSIVE REDESIGN
   ========================================================================== */
@media (max-width: 992px) {
    .tft-submit-layout {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        margin-top: 0 !important;
    }
    .tft-submit-sidebar {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
    }
    .tft-progress-tracker {
        padding: 30px 20px !important;
    }
}

@media (max-width: 768px) {
    /* Limit the background hero height to prevent huge clipping lines */
    .tft-submit-page-bg,
    .tft-submit-page-overlay {
        height: 600px !important;
    }
    
    /* Hide scrollspy timeline on mobile to keep form layout clean */
    .tft-progress-list {
        display: none !important;
    }
    .tft-progress-tracker__title {
        display: none !important;
    }
    .tft-progress-tracker {
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        border: none !important;
    }
    .tft-ai-assist-card {
        margin-top: 0 !important;
        background: var(--svr-color-card-light) !important;
    }
    
    /* Form sections spacing and layout */
    .tft-submit-section {
        padding: 0 15px 80px !important;
    }
    .tft-submit-card {
        padding: 30px 20px !important;
        border-radius: 20px !important;
        margin-bottom: 25px !important;
    }
    .tft-submit-card__title {
        font-size: 1.5rem !important;
        margin-bottom: 25px !important;
    }
    
    /* Stack form row input fields vertically */
    .tft-submit-form .tft-form-row {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Realign dynamic ingredient rows to stack beautifully */
    .tft-ingredient-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
        padding: 20px 15px !important;
    }
    .tft-ingredient-row > .tft-form-group {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    .tft-ingredient-row > .tft-icon-btn {
        align-self: flex-end !important;
    }
    
    /* Realign instruction step rows */
    .tft-step-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
        padding: 20px 15px !important;
    }
    .tft-step-row > .tft-form-group {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    .tft-step-row > .tft-icon-btn {
        align-self: flex-end !important;
    }
    
    /* AI Auto-fill Modal sizing */
    .tft-ai-modal__content {
        width: 90% !important;
        max-width: 450px !important;
        padding: 25px 20px !important;
    }
}

@media (max-width: 600px) {
    .tft-workflow-tab {
        padding: 12px 10px !important;
        font-size: 0.85rem !important;
        gap: 6px !important;
    }
}

/* ==========================================================================
   SHOP PAGE RESPONSIVE OVERRIDES
   ========================================================================== */
@media (max-width: 768px) {
    /* Set product grid order to 1 (top) and sidebar to 2 (bottom) on mobile */
    .svr-avant-shop > div[style*="display: flex"] {
        display: flex !important;
        flex-direction: column !important;
    }
    .svr-avant-shop > div[style*="display: flex"] > div[style*="flex: 0 0 250px"] {
        order: 2 !important;
    }
    .svr-avant-shop > div[style*="display: flex"] > div[style*="flex: 1"] {
        order: 1 !important;
    }

    /* Prevent pagination container from stacking vertically due to broad selectors */
    .svr-avant-shop > div[style*="justify-content: center"] {
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
    }

    /* Scale product grid columns to 1-column layout on mobile */
    .svr-avant-shop div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    /* Scale down product image wrap height */
    .svr-product-card-img-wrap {
        height: 280px !important;
    }

    /* Force the "Add to Bag" button to be visible on touch/mobile screens */
    .svr-add-btn {
        opacity: 1 !important;
        transform: translateY(0) !important;
        bottom: 15px !important;
        left: 15px !important;
        right: 15px !important;
        padding: 10px !important;
        font-size: 0.7rem !important;
    }

    /* Clean up Shop Hero heading and spacing */
    .svr-avant-shop h1 {
        font-size: 2.2rem !important;
    }
    .svr-avant-shop h1 em {
        font-size: 1.1em !important;
    }
}

/* ==========================================================================
   TFT/SVR RESPONSIVE OVERRIDES (ThemeForest & WordPress Readiness)
   ========================================================================== */

/* 1. Shop Page Responsive Enhancements */
@media (max-width: 768px) {
    /* Align Hero Title & Subtitle Left */
    .svr-avant-shop > div[style*="border-bottom"],
    .svr-avant-shop > div[style*="display: flex"] {
        align-items: flex-start !important;
        text-align: left !important;
        justify-content: flex-start !important;
    }
    
    .svr-avant-shop > div[style*="border-bottom"] > div,
    .svr-avant-shop > div[style*="display: flex"] > div {
        text-align: left !important;
        width: 100% !important;
    }

    /* Make Hero Title Larger */
    .svr-avant-shop h1 {
        font-size: clamp(2.8rem, 8vw, 3.8rem) !important;
        text-align: left !important;
        line-height: 1.15 !important;
    }
    
    .svr-avant-shop h1 em {
        display: inline-block !important;
        text-align: left !important;
    }
}

/* 2. Recipe Single Page Mobile & Tablet Fixes */
@media (max-width: 1024px) {
    /* Main Content first, Sidebar below it (no intrusive pushed down content) */
    .svr-recipe-detail-body {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .svr-recipe-detail-main {
        order: 1 !important;
        width: 100% !important;
    }
    
    .svr-recipe-detail-sidebar {
        order: 2 !important;
        width: 100% !important;
        position: static !important;
        margin-top: 50px !important;
    }
}

@media (max-width: 768px) {
    /* Remove huge left/right layout paddings on mobile */
    .svr-recipe-detail-body {
        padding: 30px 15px !important;
    }
    
    /* Adjust Recipe Detail Header Margins for Mobile */
    .svr-recipe-detail-header {
        margin: 0 10px 20px 10px !important;
        border-radius: 16px !important;
    }
    
    /* Grid system for Share Tabs, Themes, and Layouts to prevent cutoff/overflow */
    .svr-share-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 25px !important;
    }
    
    .svr-share-tab {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 14px 10px !important;
        margin: 0 !important;
    }
    
    .svr-share-themes {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .svr-share-preset {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        justify-content: flex-start !important;
        padding: 8px 12px !important;
    }
    
    .svr-share-layouts {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    
    .svr-share-layout-btn {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 10px 6px !important;
        font-size: 0.8rem !important;
        justify-content: center !important;
        gap: 4px !important;
    }
    
    /* Overlay Sliders & Toggles stack */
    .svr-sg-row--controls {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 20px !important;
    }
    
    .svr-sg-toggles {
        justify-content: space-between !important;
        width: 100% !important;
    }
    
    /* Social Share Canvas Preview */
    .svr-share-preview {
        padding: 15px !important;
        min-height: 250px !important;
        margin-bottom: 20px !important;
    }
    
    .svr-share-canvas {
        max-height: 350px !important;
    }
    
    /* Social Share Actions buttons stack beautifully */
    .svr-share-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .svr-share-actions > *,
    .svr-sg-export-group {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* 3. Fullscreen Cook Mode Responsive Overrides */
@media (max-width: 1024px) {
    .svr-cook-mode-layout {
        grid-template-columns: 1fr !important;
        overflow-y: auto !important;
    }
    
    .svr-cook-mode-sidebar {
        border-right: none !important;
        border-bottom: 1px solid var(--svr-color-border-dark) !important;
        max-height: 250px !important;
        padding: 25px 20px !important;
    }
    
    .svr-cook-mode-main {
        padding: 30px 20px !important;
    }
    
    .svr-cook-mode-step {
        padding: 25px !important;
    }
    
    .svr-cook-mode-step__num {
        font-size: 4rem !important;
        margin-bottom: 10px !important;
    }
    
    .svr-cook-mode-step__text {
        font-size: 1.45rem !important;
        line-height: 1.4 !important;
    }
    
    .svr-inline-timer {
        font-size: 0.95rem !important;
        padding: 5px 12px !important;
        margin: 5px 2px !important;
    }
}

/* TFT-OVERRIDE: Ultra-Premium Recipe Footer Big Text Responsive Adjustment */
.svr-uf-big-text h2 {
    font-size: clamp(2rem, 7.5vw, 12rem) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.1 !important;
}

@media (max-width: 768px) {
    .svr-uf-big-text {
        padding: 30px 0 !important;
        margin-bottom: 20px !important;
    }
    .svr-uf-big-text h2 {
        font-size: clamp(1.8rem, 8vw, 4rem) !important;
    }
}

@media (max-width: 480px) {
    .svr-uf-big-text h2 {
        font-size: clamp(1.6rem, 9vw, 3rem) !important;
        line-height: 1.2 !important;
    }
}

/* TFT-OVERRIDE: Hero side margins and rounded corners on all homepages (index.html, index-3.html, index-4.html) */
@media (min-width: 1025px) {
    .svr-avant-home > .svr-hero,
    .svr-avant-home > .svr-hero-webgl,
    .svr-avant-home > .svr-h4-immersive-hero {
        margin-left: -40px !important;
        margin-right: -40px !important;
        margin-top: 0 !important;
        margin-bottom: 30px !important;
        border-top-left-radius: 40px !important;
        border-top-right-radius: 40px !important;
        border-bottom-left-radius: 24px !important;
        border-bottom-right-radius: 24px !important;
        overflow: visible !important; /* Prevent bottom overlays/explore pill from clipping */
    }
    .svr-hero__bg,
    .svr-hero__overlay,
    .svr-hero-webgl__bg,
    .svr-hero-webgl__bg-img,
    .svr-hero-webgl__canvas,
    .svr-h4-hero-bg,
    .svr-h4-hero-bg img {
        border-top-left-radius: 40px !important;
        border-top-right-radius: 40px !important;
        border-bottom-left-radius: 24px !important;
        border-bottom-right-radius: 24px !important;
        overflow: hidden !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .svr-avant-home > .svr-hero,
    .svr-avant-home > .svr-hero-webgl,
    .svr-avant-home > .svr-h4-immersive-hero {
        margin-left: -40px !important;
        margin-right: -40px !important;
        margin-top: 0 !important;
        margin-bottom: 30px !important;
        border-top-left-radius: 40px !important;
        border-top-right-radius: 40px !important;
        border-bottom-left-radius: 24px !important;
        border-bottom-right-radius: 24px !important;
        overflow: visible !important; /* Prevent bottom overlays/explore pill from clipping */
    }
    .svr-hero__bg,
    .svr-hero__overlay,
    .svr-hero-webgl__bg,
    .svr-hero-webgl__bg-img,
    .svr-hero-webgl__canvas,
    .svr-h4-hero-bg,
    .svr-h4-hero-bg img {
        border-top-left-radius: 40px !important;
        border-top-right-radius: 40px !important;
        border-bottom-left-radius: 24px !important;
        border-bottom-right-radius: 24px !important;
        overflow: hidden !important;
    }
}

@media (max-width: 768px) {
    .svr-avant-home > .svr-hero,
    .svr-avant-home > .svr-hero-webgl,
    .svr-avant-home > .svr-h4-immersive-hero {
        margin-left: 15px !important;
        margin-right: 15px !important;
        margin-top: 15px !important;
        border-radius: 20px !important;
    }
}

/* TFT-OVERRIDE: submit-recipe.html header border-radius and publish button single-row style */
.tft-submit-page-wrapper {
    border-top-left-radius: 40px !important;
    border-top-right-radius: 40px !important;
    overflow: hidden !important;
}
.tft-submit-page-bg {
    border-top-left-radius: 40px !important;
    border-top-right-radius: 40px !important;
}

@media (max-width: 992px) {
    .tft-submit-page-wrapper {
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
    }
    .tft-submit-page-bg {
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
    }
}

@media (max-width: 768px) {
    .tft-submit-action {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        text-align: center !important;
        width: 100% !important;
    }
    .tft-submit-action .tft-terms-text {
        margin-bottom: 0 !important;
        font-size: 0.85rem !important;
    }
    .tft-submit-action .tft-btn--massive {
        width: 100% !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        justify-content: center !important;
        display: inline-flex !important;
        font-size: 1rem !important;
        padding: 15px 30px !important;
        box-sizing: border-box !important;
    }

    /* TFT-OVERRIDE: Unified Mobile/Tablet Layout Spacing & Gap Alignment */
    .svr-avant-shop,
    .svr-avant-cart,
    .svr-avant-submit,
    .svr-avant-services,
    .svr-avant-about,
    .svr-avant-aboutme,
    .svr-avant-contact {
        margin: 0 15px 30px 15px !important;
        padding: 40px 20px !important;
        border-radius: 20px !important;
    }

    .svr-recipe-detail-header {
        margin: 15px 15px 25px 15px !important;
        border-radius: 20px !important;
    }
    
    .svr-recipe-detail-body {
        margin: 0 15px 35px 15px !important;
        border-radius: 20px !important;
        padding: 40px 20px !important;
    }

    /* Journal/Blog Page layout enhancements */
    .tft-editorial-duo {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }
    
    .tft-blog-featured-premium {
        padding: 0 !important;
        margin-bottom: 35px !important;
    }
    
    .tft-bfp-content {
        padding: 20px 5px !important;
    }

    /* TFT-OVERRIDE: Customer Account Dashboard Button Stacking */
    .tft-account-nav ul {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .tft-account-nav li {
        width: 100% !important;
        margin-block-end: 0 !important;
    }
    .tft-account-nav a {
        width: 100% !important;
        box-sizing: border-box !important;
        justify-content: flex-start !important;
        padding: 15px 20px !important;
        font-size: 0.95rem !important;
    }

    /* TFT-OVERRIDE: Force all Homepage Heroes to match Top Navigation margins and rounded corners on mobile */
    .svr-hero,
    .svr-hero-webgl,
    .svr-h4-immersive-hero {
        margin-left: 15px !important;
        margin-right: 15px !important;
        margin-top: 15px !important;
        width: calc(100% - 30px) !important;
        box-sizing: border-box !important;
        border-radius: 20px !important;
    }

    /* TFT-OVERRIDE: Prevent recipe header title from hiding on top by expanding container height dynamically */
    .svr-recipe-detail-header {
        height: auto !important;
        min-height: auto !important;
        padding: 80px 20px 30px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
    }
    .svr-recipe-detail-header__title {
        font-size: clamp(2rem, 6vw, 3rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
    }

    /* TFT-OVERRIDE: Force recipe header action buttons to fit in 1 row on mobile */
    .tft-recipe-actions {
        gap: 8px !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        justify-content: center !important;
    }
    .tft-btn-action {
        flex: 1 !important;
        max-width: 150px !important;
        padding: 10px 12px !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
        justify-content: center !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* TFT-OVERRIDE: Prevent share generator header contents and live preview badge from squeezing on mobile */
    .svr-share-generator {
        padding: 20px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .svr-share-generator__header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        border-bottom: 1px solid rgba(0,0,0,0.05) !important;
        padding-bottom: 20px !important;
    }
    .svr-share-generator__header h3 {
        font-size: 1.5rem !important;
    }
    .svr-share-generator__header p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
    .svr-share-generator__badge {
        align-self: flex-start !important;
        margin-top: 5px !important;
    }

    /* TFT-OVERRIDE: Single Product tabs vertical stacking on mobile */
    .tft-sp-tab-nav {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
        margin-bottom: 25px !important;
    }
    .tft-sp-tab-btn {
        width: 100% !important;
        text-align: center !important;
        font-size: 1rem !important;
        padding: 12px 20px !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(0,0,0,0.06) !important;
        border-radius: 30px !important;
        background: #fbfbfb !important;
        color: #999999 !important;
        position: relative !important;
    }
    .tft-sp-tab-btn.active {
        background: #1a1a1a !important;
        color: var(--svr-color-accent-gold) !important;
        border-color: #1a1a1a !important;
    }
    .tft-sp-tab-btn::after {
        display: none !important;
    }
}

/* TFT-OVERRIDE: Mobile layouts optimization for blog, cinematic strip, meta-rows, and inspire sections */
@media (max-width: 768px) {
    /* 1. Squeezed text and layout spacing fix on blog.html */
    .tft-blog-header {
        padding: 40px 15px !important;
    }
    .tft-blog-featured-premium {
        flex-direction: column !important;
        min-height: auto !important;
        align-items: stretch !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-bottom: 35px !important;
    }
    .tft-bfp-content {
        width: 100% !important;
        padding: 20px 0 !important;
        box-sizing: border-box !important;
        flex: none !important;
    }
    .tft-bfp-title {
        font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 15px !important;
    }
    .tft-bfp-excerpt {
        margin-bottom: 20px !important;
    }
    
    /* 2. Meta row and buttons stacking: 1 button/item per row */
    .tft-bfp-meta-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        margin-bottom: 25px !important;
    }
    .tft-bfp-details {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .tft-bfp-actions {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
    .tft-bfp-actions .tft-btn-primary,
    .tft-bfp-actions .tft-btn-outline {
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        justify-content: center !important;
        display: inline-flex !important;
        padding: 15px 20px !important;
        margin: 0 !important;
    }
    
    /* 3. Image wrapper and floating bar fixes on mobile */
    .tft-bfp-image-wrapper {
        position: relative !important;
        width: 100% !important;
        height: 280px !important;
        border-radius: 20px !important;
        right: auto !important;
        top: auto !important;
        order: 2 !important;
        display: block !important;
        margin-top: 20px !important;
    }
    .tft-bfp-image-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .tft-bfp-floating-bar {
        display: none !important;
    }
    
    /* 4. Cinematic strip image layout & overlay visibility */
    .tft-cinematic-strip {
        height: 380px !important;
        margin: 40px 0 !important;
    }
    .tft-cs-overlay {
        background: color-mix(in srgb, var(--svr-color-sidebar) 60%, transparent) !important;
    }
    .tft-cs-content {
        padding: 30px 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .tft-cs-title {
        font-size: clamp(1.6rem, 5vw, 2.2rem) !important;
        line-height: 1.2 !important;
    }
    .tft-cs-scroll-hint {
        display: none !important;
    }
    
    /* 5. Home 2 & 1 spacing & margins layout consistency */
    .svr-avant-home {
        margin: 0 15px 30px !important;
    }
    .svr-h2-inspire {
        min-height: 240px !important;
    }
    .svr-h2-inspire__overlay {
        background: color-mix(in srgb, var(--svr-color-sidebar) 60%, transparent) !important;
    }

    /* 6. Hero and explore pill mobile improvements */
    .svr-hero {
        padding: 40px 20px !important;
        min-height: auto !important;
        height: auto !important;
    }
    .svr-hero__overlay {
        background: color-mix(in srgb, var(--svr-color-sidebar) 75%, transparent) !important;
    }
    .svr-hero__title {
        font-size: clamp(2rem, 7vw, 2.8rem) !important;
        line-height: 1.15 !important;
        word-break: break-word !important;
    }
    .svr-hero__meta {
        flex-wrap: wrap !important;
        gap: 12px 18px !important;
        margin-bottom: 30px !important;
    }
    .svr-hero__meta span {
        font-size: 0.85rem !important;
    }
    .svr-explore-pill {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        margin: 35px 0 0 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px !important;
    }
    .svr-explore-pill__items {
        width: 100% !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }
    
    /* 7. Community Masonry Mobile Grid - 1 card per row */
    .tft-community {
        padding: 40px 15px !important;
    }
    .tft-community__masonry {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* 8. Align hero margins exactly with header margins on mobile */
    .svr-avant-home > .svr-hero,
    .svr-avant-home > .svr-hero-webgl,
    .svr-avant-home > .svr-h4-immersive-hero {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        overflow: hidden !important;
    }

    /* 9. Remove big white gap under hero on mobile */
    .tft-premium-grid {
        margin: 20px 0 !important;
    }

    /* 10. Prevent text truncation in mobile meal planner */
    .svr-h2-mq-info h4 {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* 11. Prevent cook mode teaser card cutoff on mobile */
    .svr-section-cook-mode {
        height: auto !important;
        min-height: auto !important;
        display: block !important;
    }

    /* 12. Center edit/submit icon inside the mobile header gold circle */
    .svr-top-nav__actions .svr-btn-primary {
        position: relative !important;
    }
    .svr-top-nav__actions .svr-btn-primary i {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-size: 1.1rem !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
    }

    /* 13. Align Home 2 bento grid/hero rows edge-to-edge with the header and standardize paddings */
    .svr-avant-home .svr-h2-row {
        padding-inline: 0 !important;
    }
    .svr-avant-home .svr-h2-row--hero {
        padding-top: 0 !important;
    }
    .svr-avant-home .svr-h2-hero-text,
    .svr-avant-home .svr-h2-pantry,
    .svr-avant-home .svr-h2-mealplan-quick,
    .svr-avant-home .svr-h2-shop-featured {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* 14. Fix Home 2 Seasonal Spotlight Banner mobile alignment, centering, and paddings */
    .svr-avant-home .svr-h2-seasonal {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 40px 20px !important;
        min-height: auto !important;
        margin-inline: 0 !important;
        gap: 30px !important;
    }
    .svr-h2-seasonal__left {
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .svr-h2-seasonal__items {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
        width: 100% !important;
    }
}

/* TFT-OVERRIDE: Align Home 2 hero section edge-to-edge with header on desktop/tablet */
@media (min-width: 1025px) {
    .svr-avant-home .svr-h2-row--hero {
        margin-left: -40px !important;
        margin-right: -40px !important;
        margin-top: 0 !important;
        margin-bottom: 30px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .svr-avant-home .svr-h2-row--hero {
        margin-left: -40px !important;
        margin-right: -40px !important;
        margin-top: 0 !important;
        margin-bottom: 30px !important;
    }
}

/* TFT-OVERRIDE: Restore grid layout for recipe single page detail body in desktop mode to prevent left content columns from squeezing */
@media (min-width: 1025px) {
    .svr-recipe-detail-body {
        display: grid !important;
        grid-template-columns: 2.2fr 1fr !important;
        gap: 60px !important;
    }
    .svr-recipe-detail-main {
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
    }
    .svr-recipe-detail-sidebar {
        width: 100% !important;
        max-width: none !important;
        position: sticky !important;
        top: 100px !important;
        flex: none !important;
    }
    .svr-instruction-cinematic__num {
        flex-shrink: 0 !important;
    }
}

/* ==========================================================================
   TFT-OVERRIDE: Unique Responsive Mobile Menu Styles & Overlap Fixes
   ========================================================================== */

/* 1. Hide active link side indicators (triangle arrows/circles) on mobile/tablet viewports to prevent layout overlap/misalignment in sidebar and floating dock */
@media (max-width: 1024px) {
    .svr-nav__link::before,
    .svr-nav__link::after,
    .svr-nav__link--active::before,
    .svr-nav__link--active::after {
        display: none !important;
        opacity: 0 !important;
    }
}

/* 2. Mobile Navigation Toggle Button Styling */
.tft-mobile-nav-toggle {
    display: none;
}

@media (max-width: 768px) {
    .tft-mobile-nav-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 26px !important;
        height: 18px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        z-index: 10000 !important;
        color: var(--svr-color-text-light) !important;
        margin-inline-end: 10px !important;
        flex-shrink: 0 !important;
    }

    .tft-mobile-nav-toggle-bar {
        display: block !important;
        width: 100% !important;
        height: 2px !important;
        background-color: currentColor !important;
        border-radius: 2px !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important;
    }

    /* Transform burger icon into 'X' when active */
    .tft-mobile-nav-toggle.tft-active .tft-mobile-nav-toggle-bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg) !important;
    }

    .tft-mobile-nav-toggle.tft-active .tft-mobile-nav-toggle-bar:nth-child(2) {
        opacity: 0 !important;
    }

    .tft-mobile-nav-toggle.tft-active .tft-mobile-nav-toggle-bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg) !important;
    }
    
    /* Make search and toggle look balanced in header */
    .svr-top-nav__actions {
        align-items: center !important;
    }
}

/* 3. Premium Glassmorphic Mobile Overlay Menu */
.tft-mobile-overlay-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: rgba(10, 10, 10, 0.94) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    z-index: 9998 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    color: var(--svr-color-text-light) !important;
}

.tft-mobile-overlay-menu.tft-active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.tft-mom-container {
    width: 100% !important;
    max-width: 500px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 50px 30px 40px 30px !important;
    overflow-y: auto !important;
    transform: translateY(30px) !important;
    opacity: 0 !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease !important;
}

.tft-mobile-overlay-menu.tft-active .tft-mom-container {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

.tft-mom-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 35px !important;
    flex-shrink: 0 !important;
}

.tft-mom-logo {
    font-family: var(--svr-font-heading) !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    color: var(--svr-color-accent-gold) !important;
    letter-spacing: 0.05em !important;
}

.tft-mom-close {
    font-size: 2.8rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: color var(--svr-transition-fast), transform var(--svr-transition-fast) !important;
    line-height: 1 !important;
    padding: 0 !important;
}

.tft-mom-close:hover {
    color: var(--svr-color-accent-gold) !important;
    transform: scale(1.1) !important;
}

.tft-mom-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    margin-bottom: 40px !important;
}

.tft-mom-item {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

.tft-mom-link {
    font-size: 1.35rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    transition: color var(--svr-transition-fast), border-color var(--svr-transition-fast) !important;
    text-transform: capitalize !important;
}

.tft-mom-link i {
    font-size: 1.15rem !important;
    color: var(--svr-color-accent-gold) !important;
    width: 24px !important;
    text-align: center !important;
}

.tft-mom-link:hover,
.tft-mom-link--active {
    color: var(--svr-color-accent-gold) !important;
    border-color: rgba(230, 185, 83, 0.35) !important;
}

.tft-mom-toggle {
    position: absolute !important;
    right: 0 !important;
    top: 10px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, 0.4) !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: color var(--svr-transition-fast) !important;
}

.tft-mom-toggle i {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tft-mom-toggle:hover {
    color: var(--svr-color-accent-gold) !important;
}

.tft-mom-sub {
    max-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding-left: 40px !important;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding-block 0.4s ease !important;
}

.tft-mom-sub.tft-active {
    max-height: 350px !important;
    padding-block: 15px 10px !important;
}

.tft-mom-sub a {
    font-size: 1rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none !important;
    transition: color var(--svr-transition-fast), padding-left var(--svr-transition-fast) !important;
}

.tft-mom-sub a:hover,
.tft-mom-sub a.tft-mom-sub-link--active {
    color: var(--svr-color-accent-gold) !important;
    padding-left: 8px !important;
}

/* 4. Bottom elements inside Overlay (Chef Profile & Quote) */
.tft-mom-profile {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 20px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--svr-radius-md) !important;
    margin-top: auto !important;
    margin-bottom: 20px !important;
    flex-shrink: 0 !important;
}

.tft-mom-profile__img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.tft-mom-profile__info h4 {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: var(--svr-color-text-light) !important;
    margin-bottom: 2px !important;
}

.tft-mom-profile__info p {
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.45) !important;
}

.tft-mom-quote {
    background: rgba(230, 185, 83, 0.05) !important;
    border: 1px solid rgba(230, 185, 83, 0.12) !important;
    padding: 20px !important;
    border-radius: var(--svr-radius-md) !important;
    position: relative !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

.tft-mom-quote__heart {
    position: absolute !important;
    right: 20px !important;
    top: 20px !important;
    color: var(--svr-color-accent-gold) !important;
    font-size: 0.9rem !important;
}

.tft-mom-quote p {
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 5px !important;
}

.tft-mom-quote strong {
    font-family: var(--svr-font-heading) !important;
    font-size: 1.55rem !important;
    color: var(--svr-color-accent-gold) !important;
    line-height: 1.25 !important;
    font-style: italic !important;
}

/* 5. Responsive Button Actions Group on Single Recipe */
@media (max-width: 480px) {
    .tft-recipe-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        padding-inline: 15px !important;
    }
    .tft-recipe-actions .tft-btn-action {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
}

/* ==========================================================================
   TFT-OVERRIDE: Premium Elements bottom, cook-mode banner & 50/50 generator
   ========================================================================== */

/* 1. Cook Mode Banner Overlap & Typography Fixes */
a.svr-cook-mode-banner {
    display: block !important;
    background: var(--svr-color-text-light) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 5%, transparent) !important;
    padding-block: 24px !important;
    padding-inline: 30px !important;
    border-radius: var(--svr-radius-md) !important;
    margin-block-end: 40px !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03) !important;
    transition: transform var(--svr-transition-fast), box-shadow var(--svr-transition-fast), border-color var(--svr-transition-fast) !important;
}

a.svr-cook-mode-banner:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.06) !important;
    border-color: var(--svr-color-accent-gold) !important;
}

.svr-cmb-content {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-block-end: 12px !important;
}

.svr-cmb-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 1.1rem !important;
    color: var(--svr-color-accent-gold) !important;
    background: color-mix(in srgb, var(--svr-color-accent-gold) 10%, transparent) !important;
    border-radius: var(--svr-radius-pill) !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s ease !important;
}

a.svr-cook-mode-banner:hover .svr-cmb-icon {
    transform: scale(1.1) rotate(90deg) !important;
}

.svr-cmb-label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    color: var(--svr-color-text-muted-light) !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
}

.svr-cmb-title {
    font-family: var(--svr-font-heading) !important;
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    color: var(--svr-color-text-dark) !important;
    line-height: 1.25 !important;
    margin-block-start: 3px !important;
}

.svr-cmb-desc {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    color: var(--svr-color-text-muted-light) !important;
    margin-block-start: 0 !important;
    padding-inline-start: 60px !important;
}

@media (max-width: 480px) {
    a.svr-cook-mode-banner {
        padding-block: 20px !important;
        padding-inline: 20px !important;
    }
    .svr-cmb-desc {
        padding-inline-start: 0 !important;
        margin-block-start: 10px !important;
    }
}

/* 2. Redesigned Social Share Generator (50/50 Desktop Split) */
.svr-share-generator {
    margin-block-start: 40px !important;
    margin-block-end: 60px !important;
    width: 100% !important;
}

.svr-share-generator__body {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    align-items: start !important;
    margin-block-start: 30px !important;
}

.svr-share-generator__left,
.svr-share-generator__right {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
}

.svr-share-generator__left .svr-sg-row {
    margin-block-end: 0 !important;
    padding-block-end: 20px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 4%, transparent) !important;
}

.svr-share-generator__left .svr-sg-row:last-child {
    border-bottom: none !important;
    padding-block-end: 0 !important;
}

.svr-share-preview {
    background: color-mix(in srgb, var(--svr-color-text-dark) 2%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 6%, transparent) !important;
    border-radius: var(--svr-radius-md) !important;
    padding: 16px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 380px !important;
}

@media (max-width: 1024px) {
    .svr-share-generator__body {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}

/* 3. Clickable WooCommerce Sidebar Product Cards */
a.svr-woo-product {
    display: flex !important;
    gap: 15px !important;
    align-items: center !important;
    padding-block: 12px !important;
    padding-inline: 16px !important;
    margin-inline-start: -16px !important;
    margin-inline-end: -16px !important;
    border-radius: var(--svr-radius-md) !important;
    text-decoration: none !important;
    border-bottom: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 4%, transparent) !important;
    transition: background var(--svr-transition-fast), transform var(--svr-transition-fast), box-shadow var(--svr-transition-fast) !important;
}

a.svr-woo-product:last-of-type {
    border-bottom: none !important;
    margin-block-end: 15px !important;
}

a.svr-woo-product:hover {
    background: color-mix(in srgb, var(--svr-color-accent-gold) 4%, transparent) !important;
    transform: translateX(4px) !important;
}

a.svr-woo-product:hover .svr-woo-product__img {
    transform: scale(1.05) !important;
}

.svr-woo-product__img {
    transition: transform var(--svr-transition-fast) !important;
}

a.svr-woo-product .svr-woo-product__info h5 {
    color: var(--svr-color-text-dark) !important;
    margin: 0 !important;
    margin-block-end: 4px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    transition: color var(--svr-transition-fast) !important;
}

a.svr-woo-product:hover .svr-woo-product__info h5 {
    color: var(--svr-color-accent-gold) !important;
}

a.svr-woo-product .svr-woo-product__info span {
    font-size: 0.85rem !important;
    color: var(--svr-color-accent-green) !important;
    font-weight: 700 !important;
}

/* 4. Typography Selection Buttons */
.svr-share-fonts {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.svr-share-font-btn {
    padding-block: 8px !important;
    padding-inline: 16px !important;
    background: var(--svr-color-card-light) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 8%, transparent) !important;
    border-radius: var(--svr-radius-sm) !important;
    color: var(--svr-color-text-dark) !important;
    font-family: var(--svr-font-body) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all var(--svr-transition-fast) !important;
}

.svr-share-font-btn:hover {
    border-color: var(--svr-color-accent-gold) !important;
    background: color-mix(in srgb, var(--svr-color-accent-gold) 4%, transparent) !important;
}

.svr-share-font-btn.active {
    background: var(--svr-color-text-dark) !important;
    border-color: var(--svr-color-text-dark) !important;
    color: var(--svr-color-text-light) !important;
}

/* 5. Toggles Grid & Switches Styling */
.svr-sg-toggles {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
}

@media (max-width: 480px) {
    .svr-sg-toggles {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* 6. Fix for Download Picker Squishing and Gaps */
.svr-sg-export-group {
    display: flex !important;
    align-items: stretch !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 10%, transparent) !important;
    border-radius: var(--svr-radius-pill) !important;
    overflow: hidden !important;
    background: var(--svr-color-card-light) !important;
}

.svr-sg-export-group .svr-share-btn--download {
    flex: 1 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.svr-sg-ext-picker {
    display: flex !important;
    flex-shrink: 0 !important;
    background: color-mix(in srgb, var(--svr-color-text-dark) 5%, transparent) !important;
}

.svr-sg-ext {
    padding-block: 12px !important;
    padding-inline: 15px !important;
    border: none !important;
    background: transparent !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    color: var(--svr-color-text-muted-light) !important;
    cursor: pointer !important;
    transition: all var(--svr-transition-fast) !important;
}

.svr-sg-ext:hover {
    color: var(--svr-color-text-dark) !important;
}

.svr-sg-ext.active {
    background: var(--svr-color-text-dark) !important;
    color: var(--svr-color-text-light) !important;
}

/* 7. Glassmorphic Toast Notifications */
#svr-toast-container {
    position: fixed !important;
    inset-block-end: 30px !important;
    inset-inline-end: 30px !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    pointer-events: none !important;
}

.svr-toast-message {
    background: color-mix(in srgb, var(--svr-color-text-dark) 92%, transparent) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-accent-gold) 20%, transparent) !important;
    color: var(--svr-color-text-light) !important;
    padding-block: 14px !important;
    padding-inline: 20px !important;
    border-radius: var(--svr-radius-md) !important;
    font-family: var(--svr-font-body) !important;
    font-size: 0.88rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(20px) !important;
    opacity: 0 !important;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease !important;
    max-width: 380px !important;
    pointer-events: auto !important;
}

.svr-toast-message.visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* 8. Theme Color Swatch Preview Circles */
.svr-color-preview--sovereign {
    background: var(--svr-color-text-dark) !important;
    border-color: var(--svr-color-accent-gold) !important;
}

.svr-color-preview--pearl {
    background: var(--svr-color-text-light) !important;
    border-color: var(--svr-color-border-light) !important;
}

.svr-color-preview--tuscan {
    background: color-mix(in srgb, var(--svr-color-accent-gold) 60%, var(--svr-color-accent-green-hover)) !important;
    border-color: var(--svr-color-accent-green-light) !important;
}

.svr-color-preview--botanical {
    background: var(--svr-color-accent-green) !important;
    border-color: var(--svr-color-accent-green-light) !important;
}

.svr-color-preview--midnight {
    background: color-mix(in srgb, var(--svr-color-accent-green-hover) 40%, var(--svr-color-text-dark)) !important;
    border-color: var(--svr-color-accent-gold) !important;
}

.svr-color-preview--champagne {
    background: var(--svr-color-accent-green-light) !important;
    border-color: var(--svr-color-accent-gold) !important;
}

.svr-color-preview--matcha {
    background: var(--svr-color-accent-green-hover) !important;
    border-color: var(--svr-color-bg-light) !important;
}

.svr-color-preview--monochrome {
    background: var(--svr-color-text-dark) !important;
    border-color: var(--svr-color-text-light) !important;
}

/* 9. File Format Selector & Full Width Download CTA */
.svr-share-exts {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.svr-share-ext-btn {
    padding-block: 8px !important;
    padding-inline: 16px !important;
    background: var(--svr-color-card-light) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 8%, transparent) !important;
    border-radius: var(--svr-radius-sm) !important;
    color: var(--svr-color-text-dark) !important;
    font-family: var(--svr-font-body) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all var(--svr-transition-fast) !important;
}

.svr-share-ext-btn:hover {
    border-color: var(--svr-color-accent-gold) !important;
    background: color-mix(in srgb, var(--svr-color-accent-gold) 4%, transparent) !important;
}

.svr-share-ext-btn.active {
    background: var(--svr-color-text-dark) !important;
    border-color: var(--svr-color-text-dark) !important;
    color: var(--svr-color-text-light) !important;
}

.svr-share-btn--download-full {
    width: 100% !important;
    justify-content: center !important;
    background: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-text-dark) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    border-radius: var(--svr-radius-pill) !important;
    padding-block: 14px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all var(--svr-transition-fast) !important;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--svr-color-accent-gold) 15%, transparent) !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.svr-share-btn--download-full:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--svr-color-accent-gold) 30%, transparent) !important;
    background: color-mix(in srgb, var(--svr-color-accent-gold) 90%, var(--svr-color-text-light)) !important;
}

.svr-share-btn--download-full i {
    font-size: 1.05rem !important;
}

/* 10. Layout Tabs wrap */
.svr-share-layouts {
    flex-wrap: wrap !important;
}

/* 11. Accent Tone Picker & Fine Tuning Controls */
.svr-share-accents {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-block: 6px !important;
}

.svr-share-accent-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: 2px solid var(--svr-color-text-light) !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15) !important;
    cursor: pointer !important;
    transition: all var(--svr-transition-fast) !important;
    padding: 0 !important;
}

.svr-share-accent-btn:hover {
    transform: scale(1.12) !important;
}

.svr-share-accent-btn.active {
    box-shadow: 0 0 0 2px var(--svr-color-text-dark) !important;
    transform: scale(1.15) !important;
}

.svr-sg-control {
    margin-block-end: 14px !important;
}

.svr-sg-sublabel {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--svr-color-text-dark) !important;
    margin-block-end: 6px !important;
    font-family: var(--svr-font-body) !important;
    display: block !important;
}

/* Category Tabs and Sections */
.svr-sg-tabs {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
    border-bottom: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 8%, transparent) !important;
    padding-block-end: 14px !important;
    margin-block-end: 10px !important;
}

.svr-sg-tabs__btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 8px !important;
    background: color-mix(in srgb, var(--svr-color-text-dark) 2%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 6%, transparent) !important;
    border-radius: var(--svr-radius-sm) !important;
    color: var(--svr-color-text-dark) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    font-family: var(--svr-font-body) !important;
    cursor: pointer !important;
    transition: all var(--svr-transition-fast) !important;
}

.svr-sg-tabs__btn:hover {
    background: color-mix(in srgb, var(--svr-color-text-dark) 5%, transparent) !important;
    border-color: color-mix(in srgb, var(--svr-color-text-dark) 12%, transparent) !important;
}

.svr-sg-tabs__btn--active {
    background: var(--svr-color-accent-gold) !important;
    border-color: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-text-light) !important;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--svr-color-accent-gold) 20%, transparent) !important;
}

.svr-sg-section {
    display: none !important;
}

.svr-sg-section--active {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

/* Sticky Preview Container on Desktop Viewports */
@media (min-width: 1025px) {
    .svr-share-generator__right {
        position: sticky !important;
        top: 120px !important;
        z-index: 10 !important;
    }
}

/* Custom Inputs and Contained Controls styling */
.svr-sg-control-grid {
    display: flex !important;
    gap: 12px !important;
    margin-block-end: 12px !important;
}

.svr-sg-control-grid .svr-sg-control {
    flex: 1 !important;
    margin-block-end: 0 !important;
}

.svr-sg-textarea,
.svr-sg-input {
    width: 100% !important;
    background: color-mix(in srgb, var(--svr-color-text-dark) 3%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 10%, transparent) !important;
    border-radius: var(--svr-radius-sm) !important;
    color: var(--svr-color-text-dark) !important;
    font-family: var(--svr-font-body) !important;
    padding: 10px 12px !important;
    font-size: 0.85rem !important;
    transition: all var(--svr-transition-fast) !important;
    outline: none !important;
    resize: none !important;
}

.svr-sg-textarea:focus,
.svr-sg-input:focus {
    border-color: var(--svr-color-accent-gold) !important;
    background: color-mix(in srgb, var(--svr-color-text-dark) 1%, transparent) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--svr-color-accent-gold) 15%, transparent) !important;
}

.svr-share-border-styles,
.svr-share-seal-positions {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.svr-share-btn-accent {
    padding: 8px 12px !important;
    background: color-mix(in srgb, var(--svr-color-text-dark) 2%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 6%, transparent) !important;
    border-radius: var(--svr-radius-sm) !important;
    color: var(--svr-color-text-dark) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all var(--svr-transition-fast) !important;
}

.svr-share-btn-accent:hover {
    background: color-mix(in srgb, var(--svr-color-text-dark) 5%, transparent) !important;
}

.svr-share-btn-accent.active {
    background: var(--svr-color-accent-gold) !important;
    border-color: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-text-light) !important;
}

/* Compact Generator UI Overrides for height efficiency */
.svr-share-generator__left {
    gap: 8px !important;
}

.svr-sg-row {
    margin-block-end: 8px !important;
}

.svr-sg-label {
    font-size: 0.78rem !important;
    margin-block-end: 4px !important;
}

/* Compact Format selector - horizontal row items */
.svr-share-tabs {
    gap: 4px !important;
}

.svr-share-tab {
    flex-direction: row !important;
    gap: 5px !important;
    padding: 5px 8px !important;
    min-height: auto !important;
    border-radius: var(--svr-radius-sm) !important;
}

.svr-share-tab i {
    font-size: 0.8rem !important;
    margin-block-end: 0 !important;
}

.svr-share-tab span {
    font-size: 0.74rem !important;
}

.svr-share-tab small {
    display: inline !important;
    margin-inline-start: 2px !important;
    font-size: 0.65rem !important;
    opacity: 0.75 !important;
}

/* Compact Color Presets - Swatches only, no text labels */
.svr-share-themes {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.svr-share-preset {
    padding: 3px !important;
    border-radius: 50% !important;
    width: 26px !important;
    height: 26px !important;
    min-width: auto !important;
    justify-content: center !important;
    align-items: center !important;
    border: 2px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

.svr-share-preset.active {
    border-color: var(--svr-color-accent-gold) !important;
    transform: scale(1.1) !important;
}

.svr-share-preset .svr-preset-name {
    display: none !important; /* hide names to save space */
}

.svr-share-preset .svr-preset-color {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    margin-block-end: 0 !important;
}

/* Compact Layout and Typography buttons */
.svr-share-layouts, .svr-share-fonts {
    gap: 4px !important;
}

.svr-share-layout-btn, .svr-share-font-btn {
    padding: 5px 8px !important;
    font-size: 0.74rem !important;
}

/* Compact Custom Content Controls */
.svr-sg-control {
    margin-block-end: 4px !important;
}

.svr-sg-sublabel {
    font-size: 0.72rem !important;
    margin-block-end: 2px !important;
}

.svr-sg-textarea, .svr-sg-input {
    padding: 5px 8px !important;
    font-size: 0.78rem !important;
}

/* Compact switches grid in Accents tab */
.svr-sg-toggles {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
}

.svr-sg-switch {
    margin-block-end: 0 !important;
    padding: 3px 5px !important;
    background: color-mix(in srgb, var(--svr-color-text-dark) 2%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 5%, transparent) !important;
    border-radius: var(--svr-radius-sm) !important;
    gap: 6px !important;
}

.svr-sg-switch__box {
    width: 26px !important;
    height: 14px !important;
}

.svr-sg-switch__box::after {
    width: 10px !important;
    height: 10px !important;
}

.svr-sg-switch input:checked + .svr-sg-switch__box::after {
    transform: translateX(12px) !important;
}

.svr-sg-switch__label {
    font-size: 0.7rem !important;
    font-weight: 500 !important;
}

/* Small Segment Buttons for Border Style, Seal Position, File Format */
.svr-share-border-styles, .svr-share-seal-positions, .svr-share-exts {
    gap: 4px !important;
}

.svr-share-btn-accent, .svr-share-ext-btn {
    padding: 4px 6px !important;
    font-size: 0.72rem !important;
}

/* Smaller sliders gap */
.svr-sg-slider-wrap {
    gap: 8px !important;
}

.svr-sg-slider-val {
    font-size: 0.72rem !important;
    min-width: 30px !important;
}

/* Two-column row grouping for compact side-by-side control blocks */
.svr-sg-two-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-block-end: 8px !important;
}

/* 2-column slider grid for Fine Tuning section */
.svr-sg-slider-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 16px !important;
}

/* Ensure swatch-only color buttons are circular and tight */
.svr-sg-compact .svr-share-preset {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    padding: 2px !important;
    min-width: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 2px solid transparent !important;
}

.svr-sg-compact .svr-share-preset.active {
    border-color: var(--svr-color-accent-gold) !important;
    outline: 1px solid var(--svr-color-accent-gold) !important;
    outline-offset: 1px !important;
}

.svr-sg-compact .svr-preset-color {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    display: block !important;
}

/* Compact format tabs - inline pill shape */
.svr-sg-compact .svr-share-tab {
    flex-direction: row !important;
    gap: 4px !important;
    padding: 4px 8px !important;
    border-radius: 20px !important;
    min-height: auto !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
}

.svr-sg-compact .svr-share-tab i {
    font-size: 0.7rem !important;
    margin-block-end: 0 !important;
}

.svr-sg-compact .svr-share-tab small {
    opacity: 0.65 !important;
    font-size: 0.6rem !important;
}

/* Compact layout + font buttons */
.svr-sg-compact .svr-share-layout-btn,
.svr-sg-compact .svr-share-font-btn {
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
}

/* Compact toggle grid — 3 columns */
.svr-sg-compact .svr-sg-toggles {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important;
}

.svr-sg-compact .svr-sg-switch {
    padding: 4px 6px !important;
    gap: 5px !important;
    border-radius: var(--svr-radius-sm) !important;
    background: color-mix(in srgb, var(--svr-color-text-dark) 3%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 6%, transparent) !important;
}

.svr-sg-compact .svr-sg-switch__box {
    width: 24px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
}

.svr-sg-compact .svr-sg-switch__box::after {
    width: 9px !important;
    height: 9px !important;
}

.svr-sg-compact .svr-sg-switch input:checked + .svr-sg-switch__box::after {
    transform: translateX(11px) !important;
}

.svr-sg-compact .svr-sg-switch__label {
    font-size: 0.68rem !important;
}

/* Remove section-level padding to collapse vertical whitespace */
.svr-sg-compact .svr-sg-section {
    gap: 6px !important;
}

.svr-sg-compact .svr-sg-row {
    margin-block-end: 6px !important;
}

.svr-sg-compact .svr-sg-label {
    margin-block-end: 4px !important;
    font-size: 0.75rem !important;
}

.svr-sg-compact .svr-sg-sublabel {
    font-size: 0.68rem !important;
    margin-block-end: 2px !important;
}

.svr-sg-compact .svr-sg-input,
.svr-sg-compact .svr-sg-textarea {
    padding: 5px 8px !important;
    font-size: 0.76rem !important;
}

.svr-sg-compact .svr-share-btn-accent,
.svr-sg-compact .svr-share-ext-btn {
    padding: 4px 7px !important;
    font-size: 0.7rem !important;
}

.svr-sg-compact .svr-sg-slider-val {
    font-size: 0.68rem !important;
    min-width: 28px !important;
}

.svr-sg-compact .svr-share-accents {
    gap: 5px !important;
}

/* ═══════════════════════════════════════════════════════
   PREMIUM GENERATOR PANEL — COMPLETE REDESIGN
   ═══════════════════════════════════════════════════════ */

/* Block card — the main grouping unit */
.svr-sg-block {
    background: color-mix(in srgb, var(--svr-color-text-dark) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 7%, transparent);
    border-radius: var(--svr-radius-md);
    padding: 10px 12px;
    margin-block-end: 8px;
}

.svr-sg-block-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--svr-color-accent-gold);
    margin-block-end: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Format chips — icon + text, pill shaped, wrapping row */
.svr-format-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

.svr-format-chips .svr-share-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-direction: row !important;
    padding: 4px 9px !important;
    border-radius: 20px !important;
    font-size: 0.71rem !important;
    font-weight: 500 !important;
    min-height: auto !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 12%, transparent) !important;
    background: transparent !important;
    color: var(--svr-color-text-dark) !important;
    transition: all 0.18s ease !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.svr-format-chips .svr-share-tab i {
    font-size: 0.68rem !important;
}

.svr-share-generator {
    padding-inline: 50px !important;
    padding-block: 60px 40px !important;
    box-sizing: border-box !important;
    background: var(--svr-color-text-light) !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-radius: var(--svr-radius-lg) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
    margin: 0 50px 60px 50px !important;
    width: calc(100% - 100px) !important;
}

@media (max-width: 1024px) {
    .svr-share-generator {
        margin: 0 !important;
        width: 100% !important;
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}

.svr-format-chips .svr-share-tab span {
    font-size: 0.71rem !important;
}

.svr-format-chips .svr-share-tab:hover {
    background: color-mix(in srgb, var(--svr-color-accent-gold) 10%, transparent) !important;
    border-color: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-accent-gold) !important;
}

.svr-format-chips .svr-share-tab.active {
    background: var(--svr-color-text-dark) !important;
    border-color: var(--svr-color-text-dark) !important;
    color: var(--svr-color-bg-light) !important;
}

/* Swatch-only color themes in compact block */
.svr-sg-block .svr-share-themes {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.svr-sg-block .svr-share-preset {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    padding: 2px !important;
    border: 2px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, border-color 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.svr-sg-block .svr-share-preset .svr-preset-color {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    display: block !important;
}

.svr-sg-block .svr-share-preset:hover {
    transform: scale(1.2) !important;
}

.svr-sg-block .svr-share-preset.active {
    border-color: var(--svr-color-accent-gold) !important;
    transform: scale(1.15) !important;
    outline: 1.5px solid color-mix(in srgb, var(--svr-color-accent-gold) 40%, transparent) !important;
    outline-offset: 1px !important;
}

/* Typeface buttons — styled with their own font */
.svr-sg-block .svr-share-fonts {
    display: flex !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
}

.svr-sg-block .svr-share-font-btn {
    padding: 4px 9px !important;
    font-size: 0.78rem !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 12%, transparent) !important;
    border-radius: var(--svr-radius-sm) !important;
    background: transparent !important;
    color: var(--svr-color-text-dark) !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
}

.svr-sg-block .svr-share-font-btn:hover {
    background: color-mix(in srgb, var(--svr-color-accent-gold) 10%, transparent) !important;
    border-color: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-accent-gold) !important;
}

.svr-sg-block .svr-share-font-btn.active {
    background: var(--svr-color-text-dark) !important;
    border-color: var(--svr-color-text-dark) !important;
    color: var(--svr-color-bg-light) !important;
}

/* Layout style buttons */
.svr-sg-block .svr-share-layouts {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
}

.svr-sg-block .svr-share-layout-btn {
    padding: 4px 8px !important;
    font-size: 0.71rem !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 12%, transparent) !important;
    border-radius: var(--svr-radius-sm) !important;
    background: transparent !important;
    color: var(--svr-color-text-dark) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.18s ease !important;
}

.svr-sg-block .svr-share-layout-btn:hover {
    background: color-mix(in srgb, var(--svr-color-accent-gold) 10%, transparent) !important;
    border-color: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-accent-gold) !important;
}

.svr-sg-block .svr-share-layout-btn.active {
    background: var(--svr-color-accent-gold) !important;
    border-color: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-text-light) !important;
}

/* Meta input grid — 2-col */
.svr-sg-meta-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-block-start: 6px !important;
}

.svr-sg-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.svr-sg-field-label {
    font-size: 0.63rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: color-mix(in srgb, var(--svr-color-text-dark) 50%, transparent) !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
}

/* Chip-grid toggles — 3 per row, checkbox-as-chip */
.svr-sg-chip-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important;
}

.svr-sg-chip {
    cursor: pointer !important;
}

.svr-sg-chip input[type="checkbox"] {
    display: none !important;
}

.svr-sg-chip__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 5px 6px !important;
    border-radius: var(--svr-radius-sm) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 10%, transparent) !important;
    background: transparent !important;
    font-size: 0.67rem !important;
    font-weight: 500 !important;
    color: color-mix(in srgb, var(--svr-color-text-dark) 65%, transparent) !important;
    transition: all 0.18s ease !important;
    user-select: none !important;
    text-align: center !important;
    line-height: 1 !important;
}

.svr-sg-chip__inner i {
    font-size: 0.6rem !important;
}

.svr-sg-chip:hover .svr-sg-chip__inner {
    border-color: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-accent-gold) !important;
    background: color-mix(in srgb, var(--svr-color-accent-gold) 6%, transparent) !important;
}

.svr-sg-chip input[type="checkbox"]:checked + .svr-sg-chip__inner {
    background: var(--svr-color-text-dark) !important;
    border-color: var(--svr-color-text-dark) !important;
    color: var(--svr-color-bg-light) !important;
}

/* Accent color dot buttons */
.svr-sg-block .svr-share-accents {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.svr-sg-block .svr-share-accent-btn {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, border-color 0.15s ease !important;
}

.svr-sg-block .svr-share-accent-btn:hover {
    transform: scale(1.25) !important;
}

.svr-sg-block .svr-share-accent-btn.active {
    border-color: var(--svr-color-text-dark) !important;
    box-shadow: 0 0 0 2px var(--svr-color-accent-gold) !important;
}

/* Output format + border/seal segment buttons */
.svr-sg-block .svr-share-exts,
.svr-sg-block .svr-share-border-styles,
.svr-sg-block .svr-share-seal-positions {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
}

.svr-sg-block .svr-share-ext-btn,
.svr-sg-block .svr-share-btn-accent {
    padding: 4px 8px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 12%, transparent) !important;
    border-radius: var(--svr-radius-sm) !important;
    background: transparent !important;
    color: var(--svr-color-text-dark) !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
}

.svr-sg-block .svr-share-ext-btn:hover,
.svr-sg-block .svr-share-btn-accent:hover {
    background: color-mix(in srgb, var(--svr-color-accent-gold) 10%, transparent) !important;
    border-color: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-accent-gold) !important;
}

.svr-sg-block .svr-share-ext-btn.active,
.svr-sg-block .svr-share-btn-accent.active {
    background: var(--svr-color-text-dark) !important;
    border-color: var(--svr-color-text-dark) !important;
    color: var(--svr-color-bg-light) !important;
}

/* Value badge pill */
.svr-sg-val-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 1px 6px !important;
    background: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-text-light) !important;
    border-radius: 20px !important;
    font-size: 0.63rem !important;
    font-weight: 700 !important;
    margin-inline-start: auto !important;
    min-width: 28px !important;
    justify-content: center !important;
}

/* Slider items with header row */
.svr-sg-slider-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 14px !important;
}

.svr-sg-slider-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.svr-sg-slider-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 0.66rem !important;
    font-weight: 500 !important;
    color: color-mix(in srgb, var(--svr-color-text-dark) 60%, transparent) !important;
}

/* Textarea inside block */
.svr-sg-block .svr-sg-textarea {
    width: 100% !important;
    padding: 6px 9px !important;
    font-size: 0.77rem !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 10%, transparent) !important;
    border-radius: var(--svr-radius-sm) !important;
    background: color-mix(in srgb, var(--svr-color-text-dark) 2%, transparent) !important;
    color: var(--svr-color-text-dark) !important;
    resize: none !important;
    font-family: var(--svr-font-heading) !important;
    transition: border-color 0.18s ease !important;
    box-sizing: border-box !important;
}

.svr-sg-block .svr-sg-textarea:focus {
    outline: none !important;
    border-color: var(--svr-color-accent-gold) !important;
}

/* Input field inside meta-grid */
.svr-sg-block .svr-sg-input {
    width: 100% !important;
    padding: 5px 8px !important;
    font-size: 0.74rem !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 10%, transparent) !important;
    border-radius: var(--svr-radius-sm) !important;
    background: color-mix(in srgb, var(--svr-color-text-dark) 2%, transparent) !important;
    color: var(--svr-color-text-dark) !important;
    transition: border-color 0.18s ease !important;
    box-sizing: border-box !important;
}

.svr-sg-block .svr-sg-input:focus {
    outline: none !important;
    border-color: var(--svr-color-accent-gold) !important;
}

/* TFT_APPEND_START */
/* TFT-OVERRIDE: Set desktop horizontal padding for the generator wrapper to align with recipe header/body */
.svr-share-generator {
    padding-inline: 50px !important;
    padding-block: 60px 40px !important;
    box-sizing: border-box !important;
    background: var(--svr-color-text-light) !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-radius: var(--svr-radius-lg) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
    margin: 0 50px 60px 50px !important;
    width: calc(100% - 100px) !important;
}

@media (max-width: 1024px) {
    .svr-share-generator {
        margin: 0 !important;
        width: 100% !important;
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}

/* TFT-OVERRIDE: Hover state contrast fixes for Platform/Format chips */
.svr-format-chips .svr-share-tab:hover span,
.svr-format-chips .svr-share-tab:hover i {
    color: var(--svr-color-accent-gold) !important;
}

.svr-format-chips .svr-share-tab.active span,
.svr-format-chips .svr-share-tab.active i {
    color: var(--svr-color-bg-light) !important;
}

/* Responsive padding override for mobile */
@media (max-width: 480px) {
    .svr-share-generator {
        padding-inline: 20px !important;
        padding-block: 40px 30px !important;
    }
}
/* TFT_APPEND_END */

/* ══ TFT-REDESIGN: Premium Generator UI Overrides ══ */
.svr-sg-tabs {
    display: flex !important;
    gap: 4px !important;
    width: 100% !important;
    background: rgba(0, 0, 0, 0.03) !important;
    padding: 4px !important;
    border-radius: 30px !important;
    border-bottom: none !important;
    margin-block-end: 20px !important;
    box-sizing: border-box !important;
}

.svr-sg-tabs__btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 26px !important;
    color: rgba(0, 0, 0, 0.6) !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.svr-sg-tabs__btn:hover {
    background: rgba(255, 255, 255, 0.6) !important;
    color: #000000 !important;
}

.svr-sg-tabs__btn--active {
    background: var(--svr-color-accent-gold) !important;
    color: #000000 !important;
    box-shadow: 0 4px 15px rgba(200, 169, 116, 0.25) !important;
}

.svr-sg-block {
    background: var(--svr-color-text-light) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: var(--svr-radius-lg) !important;
    padding: 16px 20px !important;
    margin-block-end: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease !important;
}

.svr-sg-block:hover {
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.svr-sg-block-label {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--svr-color-text-dark) !important;
    margin-block-end: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-left: 2.5px solid var(--svr-color-accent-gold) !important;
    padding-left: 8px !important;
    line-height: 1 !important;
}

.svr-sg-block-label i {
    color: var(--svr-color-accent-gold) !important;
    font-size: 0.75rem !important;
}

.svr-format-chips .svr-share-tab {
    padding: 6px 14px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: rgba(0, 0, 0, 0.02) !important;
    color: var(--svr-color-text-dark) !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.svr-format-chips .svr-share-tab:hover {
    background: color-mix(in srgb, var(--svr-color-accent-gold) 8%, transparent) !important;
    border-color: var(--svr-color-accent-gold) !important;
}

.svr-format-chips .svr-share-tab.active {
    background: var(--svr-color-text-dark) !important;
    border-color: var(--svr-color-text-dark) !important;
    color: var(--svr-color-text-light) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

.svr-sg-block .svr-share-layout-btn,
.svr-sg-block .svr-share-font-btn {
    padding: 6px 12px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: rgba(0, 0, 0, 0.02) !important;
    color: var(--svr-color-text-dark) !important;
    font-size: 0.74rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.svr-sg-block .svr-share-layout-btn:hover,
.svr-sg-block .svr-share-font-btn:hover {
    background: color-mix(in srgb, var(--svr-color-accent-gold) 8%, transparent) !important;
    border-color: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-accent-gold) !important;
}

.svr-sg-block .svr-share-layout-btn.active,
.svr-sg-block .svr-share-font-btn.active {
    background: var(--svr-color-text-dark) !important;
    border-color: var(--svr-color-text-dark) !important;
    color: var(--svr-color-text-light) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
}

.svr-sg-block .svr-share-preset {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    padding: 2px !important;
    border: 2px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, border-color 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.svr-sg-block .svr-share-preset:hover {
    transform: scale(1.2) !important;
}

.svr-sg-block .svr-share-preset.active {
    transform: scale(1.2) !important;
    border-color: var(--svr-color-accent-gold) !important;
    box-shadow: 0 0 0 2px var(--svr-color-text-light), 0 0 0 4px var(--svr-color-accent-gold) !important;
}

.svr-sg-block .svr-sg-input,
.svr-sg-block .svr-sg-textarea {
    width: 100% !important;
    padding: 8px 12px !important;
    font-size: 0.76rem !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 6px !important;
    background: rgba(0, 0, 0, 0.01) !important;
    color: var(--svr-color-text-dark) !important;
    font-family: var(--svr-font-body) !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.svr-sg-block .svr-sg-input:focus,
.svr-sg-block .svr-sg-textarea:focus {
    outline: none !important;
    border-color: var(--svr-color-accent-gold) !important;
    background: var(--svr-color-text-light) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--svr-color-accent-gold) 12%, transparent) !important;
}

.svr-sg-slider-item .svr-sg-slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    height: 4px !important;
    background: rgba(0, 0, 0, 0.08) !important;
    border-radius: 4px !important;
    outline: none !important;
    margin-block: 8px !important;
    transition: background 0.2s ease !important;
}

.svr-sg-slider-item .svr-sg-slider:hover {
    background: rgba(0, 0, 0, 0.12) !important;
}

.svr-sg-slider-item .svr-sg-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: var(--svr-color-accent-gold) !important;
    cursor: pointer !important;
    border: 2px solid var(--svr-color-text-light) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16) !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
}

.svr-sg-slider-item .svr-sg-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2) !important;
    background: #e5c38d !important;
}

.svr-sg-slider-item .svr-sg-slider::-moz-range-thumb {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: var(--svr-color-accent-gold) !important;
    cursor: pointer !important;
    border: 2px solid var(--svr-color-text-light) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16) !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
}

.svr-sg-slider-item .svr-sg-slider::-moz-range-thumb:hover {
    transform: scale(1.2) !important;
    background: #e5c38d !important;
}

.svr-sg-val-badge {
    background: color-mix(in srgb, var(--svr-color-accent-gold) 15%, transparent) !important;
    color: var(--svr-color-accent-gold) !important;
    border-radius: 20px !important;
    font-size: 0.64rem !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    min-width: 30px !important;
    justify-content: center !important;
    display: inline-flex !important;
}

/* TFT-REDESIGN: Collapse Generator Vertical Whitespace & Increase Text Readability */

/* 1. Prevent vertical stretch of left column & collapse empty spaces */
.svr-share-generator__left {
    align-self: start !important;
    height: fit-content !important;
}

.svr-sg-section--active {
    height: auto !important;
    flex-grow: 0 !important;
}

.svr-sg-block {
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
    padding: 16px 20px !important;
    margin-block-end: 16px !important;
}

/* Collapse redundant margins inside the control block card */
.svr-sg-block .svr-share-tabs {
    margin-bottom: 12px !important;
}

.svr-sg-block .svr-share-themes,
.svr-sg-block .svr-share-fonts,
.svr-sg-block .svr-share-layouts,
.svr-sg-block .svr-share-accents,
.svr-sg-block .svr-share-exts,
.svr-sg-block .svr-share-border-styles,
.svr-sg-block .svr-share-seal-positions {
    margin-bottom: 0 !important;
}

/* 2. Elevate font-sizes for superior readability */
.svr-sg-block-label {
    font-size: 0.82rem !important;
    letter-spacing: 0.06em !important;
}

.svr-sg-block-label i {
    font-size: 0.88rem !important;
}

.svr-format-chips .svr-share-tab {
    font-size: 0.8rem !important;
    padding: 6px 12px !important;
}

.svr-sg-block .svr-share-font-btn, 
.svr-sg-block .svr-share-layout-btn,
.svr-sg-block .svr-share-btn-accent,
.svr-sg-block .svr-share-ext-btn {
    font-size: 0.8rem !important;
    padding: 6px 12px !important;
}

.svr-sg-block .svr-sg-input, 
.svr-sg-block .svr-sg-textarea {
    font-size: 0.84rem !important;
    padding: 8px 12px !important;
}

.svr-sg-field-label {
    font-size: 0.78rem !important;
    letter-spacing: 0.03em !important;
}

.svr-sg-chip__inner {
    font-size: 0.78rem !important;
    padding: 6px 10px !important;
}

.svr-sg-chip__inner i {
    font-size: 0.72rem !important;
}

.svr-sg-slider-header {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
}

.svr-sg-val-badge {
    font-size: 0.7rem !important;
    padding: 2px 8px !important;
}

.svr-sg-tabs__btn {
    font-size: 0.82rem !important;
    padding: 10px 14px !important;
}

/* ══ TFT-REDESIGN: Premium High-Fidelity Print Styling ══ */
@media print {
    /* 1. Global Reset & Print Layout Optimization */
    @page {
        margin: 1.5cm;
    }
    
    body {
        background: #ffffff !important;
        color: #111111 !important;
        font-family: 'Inter', sans-serif !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* 2. Hide Web App UI Elements & Navigation */
    .svr-sidebar,
    .svr-top-nav,
    .tft-recipe-actions,
    .svr-cook-mode-banner,
    .svr-recipe-detail-sidebar,
    #svr-share-generator,
    .svr-checklist-controls,
    .svr-bottom-nav,
    .tft-mobile-nav-toggle,
    .tft-mobile-overlay-menu,
    .svr-icon-btn,
    .svr-cmb-content,
    .svr-cmb-desc,
    .svr-quote-widget,
    iframe,
    button,
    footer,
    a[href^="http"]::after,
    a[href^="https"]::after {
        display: none !important;
    }

    /* 3. Main Container Layout Overrides */
    .svr-dashboard {
        display: block !important;
        min-height: 0 !important;
        background: #ffffff !important;
    }

    .svr-main-content {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }

    .svr-recipe-detail-body {
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        background: #ffffff !important;
    }

    .svr-recipe-detail-main {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* 4. Recipe Header Formatting */
    .svr-recipe-detail-header {
        background: transparent !important;
        color: #111111 !important;
        padding: 0 0 20px 0 !important;
        margin-bottom: 25px !important;
        border-bottom: 2px solid #111111 !important;
        height: auto !important;
        min-height: 0 !important;
        position: relative !important;
        display: block !important;
    }

    .svr-recipe-detail-header__bg,
    .svr-recipe-detail-header__overlay {
        display: none !important;
    }

    .svr-recipe-detail-header__content {
        padding: 0 !important;
        margin: 0 !important;
    }

    .svr-recipe-detail-header__meta-top {
        color: #555555 !important;
        margin-bottom: 12px !important;
        font-size: 0.9rem !important;
    }

    .svr-recipe-detail-header__author img {
        display: none !important;
    }

    .svr-recipe-detail-header__title {
        color: #111111 !important;
        font-size: 2.5rem !important;
        font-family: 'Cormorant', serif !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
    }

    .svr-recipe-detail-stats {
        display: flex !important;
        flex-direction: row !important;
        gap: 30px !important;
        border: 1px solid #e1e1e1 !important;
        padding: 12px 20px !important;
        border-radius: 6px !important;
        background: #fafafa !important;
        margin-top: 15px !important;
    }

    .svr-recipe-stat {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    .svr-recipe-stat span {
        font-size: 0.75rem !important;
        color: #666666 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
    }

    .svr-recipe-stat strong {
        font-size: 1.1rem !important;
        color: #111111 !important;
        font-weight: 600 !important;
        margin-top: 2px !important;
    }

    /* 5. Ingredients & Nutrition facts Side-by-Side */
    .svr-recipe-checklist-wrapper {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 40px !important;
        margin-bottom: 40px !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .svr-recipe-checklist {
        flex: 1 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Elegant Printable Checkboxes */
    .svr-cl-item {
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        text-decoration: none !important;
        color: #111111 !important;
        font-size: 0.95rem !important;
    }

    .svr-cl-item.checked .svr-cl-text {
        text-decoration: none !important;
        color: #111111 !important;
    }

    .svr-cl-box {
        display: inline-block !important;
        width: 14px !important;
        height: 14px !important;
        border: 1px solid #111111 !important;
        border-radius: 2px !important;
        background: #ffffff !important;
        margin-right: 10px !important;
        flex-shrink: 0 !important;
    }

    .svr-cl-box i {
        display: none !important;
    }

    /* Nutrition Widget Frame */
    .svr-premium-nutrition {
        width: 280px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        border: 2px solid #111111 !important;
        background: #ffffff !important;
        color: #111111 !important;
        padding: 15px !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* 6. Instructions cinematic steps */
    .svr-instruction-cinematic {
        display: flex !important;
        flex-direction: row !important;
        gap: 20px !important;
        margin-bottom: 25px !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        background: transparent !important;
        padding: 0 !important;
        border: none !important;
    }

    .svr-instruction-cinematic__num {
        font-size: 1.8rem !important;
        font-weight: 700 !important;
        color: var(--svr-color-accent-gold) !important;
        min-width: 35px !important;
    }

    .svr-instruction-cinematic__content {
        flex: 1 !important;
    }

    .svr-instruction-cinematic__content h4 {
        font-size: 1.2rem !important;
        color: #111111 !important;
        margin-bottom: 8px !important;
        font-family: 'Cormorant', serif !important;
        font-weight: 600 !important;
    }

    .svr-instruction-cinematic__content p {
        font-size: 0.95rem !important;
        color: #222222 !important;
        line-height: 1.6 !important;
    }

    .svr-instruction-cinematic__img {
        max-width: 100% !important;
        height: 180px !important;
        object-fit: cover !important;
        border-radius: 4px !important;
        margin-top: 10px !important;
        display: block !important;
    }

    /* Chef's Notes box */
    .svr-chefs-notes {
        margin: 20px 0 !important;
        padding: 15px 20px !important;
        border-left: 4px solid var(--svr-color-accent-gold) !important;
        background: #fdfaf4 !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .svr-chefs-notes h4 {
        color: var(--svr-color-accent-gold) !important;
        font-size: 0.9rem !important;
        margin-bottom: 6px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        font-weight: 700 !important;
    }

    .svr-chefs-notes p {
        font-size: 0.9rem !important;
        color: #333333 !important;
        line-height: 1.5 !important;
    }

    /* 7. Typography settings & Section Headers */
    .svr-recipe-section-title {
        color: #111111 !important;
        font-family: 'Cormorant', serif !important;
        font-size: 1.8rem !important;
        border-bottom: 1.5px solid #111111 !important;
        padding-bottom: 8px !important;
        margin-top: 35px !important;
        margin-bottom: 20px !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    /* 8. Elegant generated watermark footer */
    .svr-recipe-detail-main::after {
        content: "Printed from SAVORÉ Culinary Journey • savore.com" !important;
        display: block !important;
        text-align: center !important;
        font-size: 0.8rem !important;
        color: #888888 !important;
        margin-top: 50px !important;
        border-top: 1px solid #eeeeee !important;
        padding-top: 15px !important;
    }
}

/* TFT-REDESIGN: Remove double outline border from active color theme presets */
.svr-sg-block .svr-share-preset {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    outline: none !important;
}

.svr-sg-block .svr-share-preset .svr-preset-color {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-sizing: border-box !important;
    transition: transform 0.15s ease, border-color 0.15s ease !important;
}

.svr-sg-block .svr-share-preset.active {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    transform: none !important;
}

.svr-sg-block .svr-share-preset.active .svr-preset-color {
    border: 2px solid var(--svr-color-accent-gold) !important;
    transform: scale(1.15) !important;
}

/* TFT-REDESIGN: Remove left border and padding from titles */
.svr-sg-block-label {
    border-left: none !important;
    padding-left: 0 !important;
}

/* TFT-REDESIGN: Canvas preview height preservation to prevent vertical stretching */
.svr-share-canvas {
    max-width: 100% !important;
    height: auto !important;
}

/* TFT-REDESIGN: Reset flex and min-width constraints on format chips to allow wrapping */
.svr-format-chips .svr-share-tab {
    flex: none !important;
    min-width: 0 !important;
    width: auto !important;
}

/* TFT-REDESIGN: Mobile Responsive Layout Overrides */
@media (max-width: 768px) {
    /* 1. Stack side-by-side blocks (e.g. COLOR THEME / TYPEFACE) to 1 item per row */
    .svr-sg-two-col {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* 2. Stack meta inputs (e.g. AUTHOR / RATING / PREP TIME / CALORIES) to 1 item per row */
    .svr-sg-meta-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* 3. Stack design layers checkboxes (e.g. Meta Info / Rating / Watermark) to 1 item per row */
    .svr-sg-chip-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* 4. Stack fine-tuning sliders (e.g. Line Height / Font Size Scale / Photo Blur) to 1 item per row */
    .svr-sg-slider-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* 5. Stack cinematic instruction step number and content vertically */
    .svr-instruction-cinematic {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }

    .svr-instruction-cinematic__num {
        line-height: 1 !important;
        margin-bottom: 0 !important;
        font-size: 3.5rem !important;
    }

    /* 6. Adapt FDA-style nutrition widget to fit mobile screens and prevent clipping */
    .svr-premium-nutrition {
        padding: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .svr-pn-header h3 {
        font-size: 1.8rem !important;
    }

    .svr-pn-serving {
        font-size: 0.95rem !important;
        flex-direction: column !important;
        gap: 4px !important;
        align-items: flex-start !important;
    }

    .svr-pn-calories {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }

    .svr-pn-calories h2 {
        font-size: 2.8rem !important;
    }
}

@media (max-width: 576px) {
    /* 1. Stack recipe action buttons (Jump to Recipe, Print, Generate Social Banner) vertically */
    .tft-recipe-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .tft-recipe-actions .tft-btn-action {
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        white-space: normal !important; /* Allow wrapping on small screens to prevent clipping */
        padding-inline: 16px !important;
    }

    /* 2. Adapt share generator preview container spacing */
    .svr-share-preview {
        padding: 12px !important;
        min-height: auto !important;
    }

    /* 3. Stack tab selector buttons vertically on mobile */
    .svr-sg-tabs {
        flex-direction: column !important;
        border-radius: 12px !important;
        padding: 6px !important;
    }

    .svr-sg-tabs__btn {
        width: 100% !important;
        border-radius: 8px !important;
        padding: 10px 14px !important;
    }

    /* 4. Stack category grid widget on mobile */
    .svr-sb-cat-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   TFT RECIPE ACTIONS & BOTTOM OVERRIDES (THEMEFOREST STANDARDS)
   ========================================================================== */
.tft-recipe-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 30px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.tft-btn-action {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 10px 15px;
    font-size: 0.8rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tft-btn-action:hover {
    background: var(--svr-color-accent-gold) !important;
    color: #000 !important;
    border-color: var(--svr-color-accent-gold) !important;
}

.tft-btn-action--primary {
    background: linear-gradient(135deg, var(--svr-color-accent-gold) 0%, #E5C38D 100%);
    border: none;
    border-radius: 50px;
    padding: 10px 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #000;
    box-shadow: 0 4px 15px rgba(200, 169, 116, 0.4);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tft-btn-action--primary:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(200, 169, 116, 0.6);
}

.tft-author-meta__bullet {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.tft-author-meta__date {
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

.tft-recipe-end {
    text-align: center;
    margin-top: 100px;
    padding-bottom: 100px;
    width: 100%;
}

.tft-recipe-end__title {
    font-family: var(--svr-font-heading);
    font-size: 3.5rem;
    color: var(--svr-color-accent-gold);
    margin-bottom: 20px;
}

.tft-recipe-end__btn {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 15px 40px;
    font-size: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tft-recipe-end__btn:hover {
    background-color: var(--svr-color-accent-gold);
    color: #000;
    border-color: var(--svr-color-accent-gold);
}

/* ==========================================================================
   TFT-RESPONSIVE: Tablet & Mobile Navigation, Layout and Prevention of Stretching Overrides
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Prevent sidebar logo text overlap and fix rotation/writing mode */
    .svr-sidebar .svr-logo span {
        display: none !important;
    }
    
    .svr-sidebar .svr-logo div {
        margin-top: 10px !important;
        margin-bottom: 15px !important;
        gap: 0 !important;
    }

    .svr-sidebar .svr-logo {
        writing-mode: horizontal-tb !important;
        transform: none !important;
        display: block !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }

    /* Collapse sidebar text and menus on tablet */
    .svr-nav__link {
        font-size: 0 !important;
        justify-content: center !important;
        padding: 15px !important;
    }
    
    .svr-nav__link i {
        font-size: 1.25rem !important;
        margin: 0 !important;
        width: auto !important;
    }

    .svr-sidebar .svr-nav-accordion {
        margin: 0 !important;
        padding: 0 !important;
        width: 44px !important;
        height: 44px !important;
        display: block !important;
    }
    
    .svr-sidebar .svr-nav-accordion summary {
        font-size: 0 !important; /* Hide 'Recipes' text */
        padding: 0 !important;
        margin: 0 !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        color: rgba(255, 255, 255, 0.6) !important;
        list-style: none !important;
        position: relative !important;
    }
    
    .svr-sidebar .svr-nav-accordion summary::marker,
    .svr-sidebar .svr-nav-accordion summary::-webkit-details-marker {
        display: none !important;
    }
    
    .svr-sidebar .svr-nav-accordion summary i:not(:first-child) {
        display: none !important;
    }
    
    .svr-sidebar .svr-nav-accordion summary i:first-child {
        font-size: 1.25rem !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
    }
    
    .svr-sidebar .svr-nav-accordion__content {
        display: none !important;
    }

    .svr-sidebar {
        width: 80px !important;
        min-width: 80px !important;
        padding: 20px 10px !important;
        align-items: center !important;
        overflow: hidden !important;
    }
    
    .svr-nav {
        width: 100% !important;
        align-items: center !important;
        gap: 15px !important;
        flex: 1 !important;
    }
}

@media (max-width: 1024px) {
    /* Hide desktop navigation links and force hamburger toggle button */
    .svr-top-nav__links {
        display: none !important;
    }

    .tft-mobile-nav-toggle {
        display: flex !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 45px !important;
        height: 45px !important;
        padding: 14px 12px !important;
        background: rgba(255, 255, 255, 0.07) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        z-index: 10000 !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .tft-mobile-nav-toggle-bar {
        display: block !important;
        width: 100% !important;
        height: 2px !important;
        background-color: var(--svr-color-text-light) !important;
        transition: all 0.3s ease !important;
    }

    body.svr-dark-theme .tft-mobile-nav-toggle-bar {
        background-color: var(--svr-color-text-light) !important;
    }

    /* Align header actions in grid mode for tablet viewports */
    .svr-top-nav__actions {
        display: grid !important;
        grid-template-columns: auto 1fr auto auto auto !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .svr-top-nav__actions .svr-btn-primary {
        grid-column: 3 !important;
        grid-row: 1 !important;
        font-size: 0 !important;
        position: relative !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .svr-top-nav__actions .svr-btn-primary i {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-size: 1.1rem !important;
        margin: 0 !important;
    }

    .svr-top-nav__actions a[href="my-account.html"] {
        grid-column: 4 !important;
        grid-row: 1 !important;
    }

    .svr-top-nav__actions a[href="cart.html"] {
        grid-column: 5 !important;
        grid-row: 1 !important;
    }

    .svr-top-nav__actions .svr-search-bar {
        grid-column: 1 / span 5 !important;
        grid-row: 2 !important;
        width: 100% !important;
        margin-top: 5px !important;
    }

    .svr-top-nav__actions .svr-search-bar input {
        color: #ffffff !important;
        width: 100% !important;
    }

    /* Adjust page-level container layout rules to prevent overflow */
    .svr-top-nav {
        position: relative !important;
        top: 0 !important;
        margin: 15px !important;
        width: auto !important;
        padding: 18px 20px !important;
        border-radius: 24px !important;
        background: rgba(15, 15, 15, 0.95) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    }

    /* Cinematic steps layout: Stack step numbers and descriptions vertically on tablet */
    .svr-instruction-cinematic {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }

    .svr-instruction-cinematic__num {
        line-height: 1 !important;
        margin-bottom: 0 !important;
        font-size: 3.5rem !important;
        min-width: 0 !important;
    }

    /* Fluid shop layout: 2 columns on tablet */
    .tft-shop__grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 24px !important;
    }
}

@media (max-width: 768px) {
    /* Stack share actions download buttons vertically to avoid text overflow */
    .svr-share-btn {
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        padding-inline: 16px !important;
    }

    /* Adjust dynamic canvas container preview to scale with aspect-ratio */
    .svr-share-preview {
        min-height: auto !important;
        height: auto !important;
        padding: 15px !important;
        aspect-ratio: auto !important;
    }
}

@media (max-width: 600px) {
    /* Fluid shop layout: 1 column on mobile screens */
    .tft-shop__grid {
        grid-template-columns: 1fr !important;
    }
}

/* Fail-safe aspect-ratio preservation for social image generator canvas */
.svr-share-canvas {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
}

/* Horizontal scrolling wrapper for cart / checkout shop tables on mobile */
.tft-cart-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* TFT-RESPONSIVE: Explore Mood and Premium Dashboard Grid tablet overrides (max-width: 1200px) */
@media (max-width: 1200px) {
    /* Prevent Explore Mood Pill absolute positioning overflow */
    .svr-explore-pill {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        margin: 30px 0 0 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 25px 20px !important;
        border-radius: 24px !important;
    }
    
    .svr-explore-pill__items {
        width: 100% !important;
        gap: 12px !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
    }

    /* Force dashboard 3-column grid to stack cleanly in 1 column to prevent horizontal layout break */
    .tft-premium-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}

/* TFT-RESPONSIVE: Glassmorphism Hero Card size and typography tweaks to prevent text overflow */
@media (min-width: 769px) {
    .svr-hero-glass-card {
        flex-shrink: 0 !important;
        min-width: 340px !important;
    }
}

@media (max-width: 768px) {
    .svr-hero-glass-card {
        width: 100% !important;
        min-width: 0 !important;
    }
}

.svr-hero-glass-card__title {
    font-size: clamp(1.3rem, 2.2vw, 1.8rem) !important;
    word-break: break-word !important;
}

/* TFT-RESPONSIVE: Preserve premium card-in-card avant-garde border radius and margins on mobile/tablet screens */
@media (max-width: 768px) {
    .svr-avant-home {
        margin: 12px 12px 24px !important;
        border-radius: 24px !important;
        overflow: hidden !important;
    }
}

/* TFT-RESPONSIVE: Home 4 section margins, paddings, and 1-column layout overrides (max-width: 1350px) */
@media (max-width: 1350px) {
    /* Minimize margins and paddings to remove massive gaps */
    .svr-h4-bento-section,
    .svr-h4-accordion-section,
    .svr-h4-roster-section,
    .svr-h4-dual-hover-section,
    .svr-h4-split-profiles,
    .svr-h4-disciplines-section,
    .svr-h4-chef-secrets,
    .svr-h4-editorial-spread {
        margin: 0 15px 30px !important;
        border-radius: 20px !important;
        padding: 30px 20px !important;
    }

    /* Force grids/flex columns to stack 1 item per row to prevent squishing */
    .svr-h4-bento-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 15px !important;
    }
    
    .svr-h4-bento-item {
        grid-column: span 1 !important;
        grid-row: auto !important;
        height: 300px !important;
    }

    .svr-h4-accordion-container {
        grid-template-columns: 1fr !important;
        height: auto !important;
        gap: 15px !important;
    }

    .svr-h4-accordion-item {
        height: 250px !important;
    }

    .svr-h4-chef-secrets {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 30px !important;
    }

    .svr-h4-secrets-right {
        flex-direction: column !important;
        height: auto !important;
        gap: 20px !important;
    }

    .svr-h4-secret-card {
        height: 250px !important;
        transform: none !important;
    }

    .tft-cin-split {
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
        margin: 0 15px 40px !important;
        border-radius: 20px !important;
        overflow: hidden !important;
    }

    .tft-cin-panel {
        height: 350px !important;
        flex: none !important;
    }

    .svr-h4-editorial-spread {
        flex-direction: column !important;
    }

    .svr-h4-ed-image {
        min-height: 300px !important;
        height: 300px !important;
        flex: none !important;
    }

    .svr-h4-ed-content {
        padding: 30px 20px !important;
    }

    .svr-h4-disciplines-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
}


/* TFT-FIX: Prevent Share Generator Buttons & Chips from stacking 1 per row on mobile */
@media (max-width: 768px) {
    .svr-share-border-styles {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }
    .svr-share-seal-positions {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    .svr-share-btn-accent {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 8px 4px !important;
    }
    .svr-sg-chip-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* TFT-FIX: Dark Mode Overrides for Blog Page */
.svr-dashboard .tft-blog-featured-premium { background: color-mix(in srgb, var(--svr-color-bg-dark) 80%, white) !important; border-color: rgba(255,255,255,0.1) !important; color: #fff !important; }
.svr-dashboard .tft-bfp-title, .svr-dashboard .tft-bfp-excerpt, .svr-dashboard .tft-bfp-details span, .svr-dashboard .tft-bfp-rating span { color: #fff !important; }
.svr-dashboard .tft-editorial-topics-masonry .tft-et-content h4 { color: #fff !important; }
.svr-dashboard .tft-lb-card { background: color-mix(in srgb, var(--svr-color-bg-dark) 80%, white) !important; color: #fff !important; border-color: rgba(255,255,255,0.1) !important; }
.svr-dashboard .tft-lb-title a, .svr-dashboard .tft-lb-excerpt { color: #fff !important; }
.svr-dashboard .tft-section-header h3 { color: #1a1a1a !important; }
.svr-dashboard .tft-section-header a { color: rgba(26,26,26,0.6) !important; }
.svr-dashboard .tft-btn-outline { color: #fff !important; border-color: rgba(255,255,255,0.2) !important; }
.svr-dashboard .tft-bfp-floating-bar { background: var(--svr-color-bg-dark) !important; border-color: rgba(255,255,255,0.1) !important; color: #fff !important; }
.svr-dashboard .tft-bfp-floating-bar button { color: #fff !important; }
.svr-dashboard .tft-bfp-floating-bar .tft-bfp-bar-stats strong, .svr-dashboard .tft-bfp-floating-bar .tft-bfp-bar-stats span { color: #fff !important; }

/* ==========================================================================
   TFT-RESPONSIVE: Enforce Premium 1-Item-Per-Row Responsive Stacking (max-width: 1440px)
   ========================================================================== */
@media (max-width: 1440px) {
    .tft-premium-grid,
    .svr-creators-grid,
    .svr-collections-grid,
    .tft-dietary-hub__grid,
    .svr-shop-grid,
    .svr-blog-grid,
    .svr-pricing-grid,
    .tft-flavor-grid,
    .svr-carousel-track,
    .svr-masterclass-track,
    .tft-shop__grid,
    .svr-values-grid,
    .tft-community__masonry,
    .tft-home-products__grid,
    .tft-editorial-topics-masonry {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .tft-pantry-hub__fusion,
    .tft-lb-post,
    .svr-cook-mode-card,
    .svr-footer-top {
        flex-direction: column !important;
    }

    .tft-lb-post {
        align-items: stretch !important;
        height: auto !important;
    }
    .tft-lb-img {
        width: 100% !important;
        height: 300px !important;
    }
    .tft-lb-card {
        width: 100% !important;
        position: relative !important;
        right: auto !important;
        left: auto !important;
        padding: 30px 24px !important;
        margin-top: -30px !important;
        z-index: 2 !important;
    }

    .tft-blog-featured-premium {
        flex-direction: column !important;
        min-height: auto !important;
        align-items: stretch !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-bottom: 40px !important;
    }
    .tft-bfp-content {
        padding: 20px 0 !important;
        width: 100% !important;
    }
    .tft-bfp-image-wrapper {
        position: relative !important;
        width: 100% !important;
        height: 380px !important;
        border-radius: 20px !important;
        right: auto !important;
        top: auto !important;
        order: 2 !important;
    }

    .tft-editorial-topics-masonry {
        grid-auto-rows: auto !important;
    }
    .tft-editorial-topics-masonry .tft-et-card {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
        height: 180px !important;
    }

    .tft-pantry-hub__left {
        flex: none !important;
        width: 100% !important;
        border-inline-end: none !important;
        border-block-end: 1px solid rgba(0, 0, 0, 0.06) !important;
        padding: 40px 24px !important;
    }
    .tft-pantry-hub__right {
        width: 100% !important;
        min-height: 450px !important;
    }
    .tft-pantry-hub__right-content {
        padding: 40px 24px 0 !important;
    }
    .tft-pantry-hub__utility-row {
        flex-wrap: wrap !important;
    }
    .tft-pantry-hub__util {
        flex: 0 0 100% !important;
        border-inline-end: none !important;
        border-block-end: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding-block-end: 15px !important;
        margin-block-end: 15px !important;
    }
    .tft-pantry-hub__util:last-child {
        border-block-end: none !important;
        margin-block-end: 0 !important;
    }

    .svr-creators-grid {
        grid-template-columns: 1fr !important;
    }
    .svr-creator-card {
        height: 250px !important;
    }

    /* Fix Newsletter Card wrapping on tablet screen sizes to prevent subscribe button text clipping */
    .svr-newsletter-card {
        flex-direction: column !important;
        text-align: center !important;
        padding: 40px 30px !important;
        gap: 30px !important;
    }
    .svr-newsletter-card__form {
        max-width: 500px !important;
        margin: 0 auto !important;
        width: 100% !important;
    }
    .svr-newsletter-card__btn {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}

/* ==========================================================================
   TFT-RECIPES: Custom Recipe Layouts (Grid, List, Masonry)
   ========================================================================== */
.svr-recipes-grid-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    margin: 40px auto !important;
    padding: 0 40px 60px !important;
}
@media (max-width: 1440px) {
    .svr-recipes-grid-container {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 0 20px 40px !important;
    }
}

.svr-recipes-list-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    margin: 40px auto !important;
    padding: 0 40px 60px !important;
}
.svr-recipe-list-card {
    display: flex !important;
    background: var(--svr-color-card-light, #ffffff);
    border-radius: var(--svr-radius-lg, 24px);
    overflow: hidden;
    box-shadow: 0 15px 35px var(--svr-color-border-light, rgba(0,0,0,0.05));
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.svr-recipe-list-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px var(--svr-color-border-light, rgba(0,0,0,0.1));
}
.svr-recipe-list-card__media {
    width: 320px;
    height: 240px;
    flex-shrink: 0;
}
.svr-recipe-list-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.svr-recipe-list-card__content {
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.svr-recipe-list-card__cat {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--svr-color-accent-gold);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.svr-recipe-list-card__title {
    font-family: var(--svr-font-heading);
    font-size: 1.8rem;
    color: var(--svr-color-text-dark, #1a1a1a);
    margin: 0 0 12px;
}
.svr-recipe-list-card__desc {
    color: rgba(26,26,26,0.7);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 20px;
}
.svr-recipe-list-card__meta {
    display: flex;
    gap: 20px;
    font-size: 0.85rem;
    color: rgba(26,26,26,0.5);
}
.svr-recipe-list-card__meta i {
    color: var(--svr-color-accent-gold);
    margin-right: 5px;
}
@media (max-width: 1440px) {
    .svr-recipes-list-container {
        padding: 0 20px 40px !important;
        gap: 30px !important;
    }
    .svr-recipe-list-card {
        flex-direction: column !important;
    }
    .svr-recipe-list-card__media {
        width: 100% !important;
        height: 250px !important;
    }
    .svr-recipe-list-card__content {
        padding: 24px 20px !important;
    }
}

.svr-recipes-masonry-container {
    column-count: 3;
    column-gap: 30px;
    padding: 0 40px 60px !important;
    margin: 40px auto !important;
}
.svr-recipes-masonry-card {
    break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin-bottom: 30px;
    background: var(--svr-color-card-light, #ffffff);
    border-radius: var(--svr-radius-lg, 24px);
    overflow: hidden;
    box-shadow: 0 15px 35px var(--svr-color-border-light, rgba(0,0,0,0.05));
    transition: transform 0.3s ease;
}
.svr-recipes-masonry-card:hover {
    transform: translateY(-5px);
}
.svr-recipes-masonry-card img {
    width: 100%;
    display: block;
    object-fit: cover;
}
.svr-recipes-masonry-card__content {
    padding: 24px;
}
.svr-recipes-masonry-card__cat {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--svr-color-accent-gold);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
}
.svr-recipes-masonry-card__title {
    font-family: var(--svr-font-heading);
    font-size: 1.4rem;
    color: var(--svr-color-text-dark, #1a1a1a);
    margin: 0 0 10px;
}
.svr-recipes-masonry-card__meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: rgba(26,26,26,0.5);
    margin-top: 15px;
}
@media (max-width: 1440px) {
    .svr-recipes-masonry-container {
        column-count: 1 !important;
        padding: 0 20px 40px !important;
    }
}

/* ==========================================================================
   TFT-RECIPES-GRID: Recipe Card Component
   ========================================================================== */
.tft-rg-card {
    background: var(--svr-color-card-light, #ffffff);
    border-radius: var(--svr-radius-lg, 24px);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease;
    display: flex;
    flex-direction: column;
}
.tft-rg-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 50px rgba(0,0,0,0.12);
}
.tft-rg-card__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4/3;
}
.tft-rg-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.tft-rg-card:hover .tft-rg-card__media img { transform: scale(1.06); }
.tft-rg-card__cat {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-start: 16px;
    background: var(--svr-color-accent-gold);
    color: #1a1a1a;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 50px;
}
.tft-rg-card__diff {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 50px;
    color: #fff;
}
.tft-rg-card__diff--easy   { background: rgba(34,197,94,0.85); }
.tft-rg-card__diff--medium { background: rgba(234,179,8,0.85); color: #1a1a1a; }
.tft-rg-card__diff--hard   { background: rgba(239,68,68,0.85); }
.tft-rg-card__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.tft-rg-card__title {
    font-family: var(--svr-font-heading);
    font-size: 1.35rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.25;
    color: var(--svr-color-text-dark, #1a1a1a);
}
.tft-rg-card__title a { color: inherit; text-decoration: none; transition: color 0.2s; }
.tft-rg-card__title a:hover { color: var(--svr-color-accent-gold); }
.tft-rg-card__desc {
    font-size: 0.88rem;
    color: rgba(26,26,26,0.6);
    line-height: 1.6;
    margin: 0;
}
.tft-rg-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.8rem;
    color: rgba(26,26,26,0.5);
    margin-block-start: auto;
    padding-block-start: 10px;
    border-block-start: 1px solid rgba(0,0,0,0.06);
}
.tft-rg-card__meta i { color: var(--svr-color-accent-gold); margin-inline-end: 4px; }
.tft-rg-filter {
    background: rgba(26,26,26,0.06);
    border: 1px solid rgba(26,26,26,0.1);
    border-radius: 50px;
    padding: 10px 22px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(26,26,26,0.7);
    cursor: pointer;
    transition: all 0.25s ease;
}
.tft-rg-filter:hover { background: rgba(26,26,26,0.1); color: #1a1a1a; }
.tft-rg-filter--active {
    background: var(--svr-color-accent-gold) !important;
    border-color: var(--svr-color-accent-gold) !important;
    color: #1a1a1a !important;
}
/* Blog featured card text readability fix */
.tft-blog-featured-premium .tft-bfp-title,
.tft-blog-featured-premium .tft-bfp-excerpt {
    color: var(--svr-color-text-light, #ffffff) !important;
}
.tft-blog-featured-premium .tft-bfp-meta-row,
.tft-blog-featured-premium .tft-bfp-meta-row span,
.tft-blog-featured-premium .tft-bfp-meta-row a {
    color: rgba(255,255,255,0.75) !important;
}

/* ============================================================
   ACCESSIBILITY FIXES – appended only (never modify above)
   ============================================================ */

/* Visually hidden – screen-reader only, WCAG 2.1 compliant */
.tft-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Ensure .svr-btn-primary works as a styled <a> (no button needed) */
a.svr-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Rating stars role="img" divs */
.tft-hprod-card__stars[role="img"] {
    display: flex;
    align-items: center;
    gap: 3px;
}

/* Profile widget name – replaces h4 to avoid heading-hierarchy pollution */
.svr-profile-widget__name {
    font-family: var(--svr-font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--svr-color-text-light);
    margin: 0;
    line-height: 1.3;
}

/* ============================================================
   TFT CONVERSION & RESPONSIVE POLISH (APPENDED FIXES)
   ============================================================ */

/* Fix Shop Cards Absolute Context & Button Visibility */
.svr-product-card-img-wrap {
    position: relative !important;
    width: 100% !important;
}
.svr-product-card-img-wrap .svr-add-btn {
    position: absolute !important;
    opacity: 0 !important;
    transform: translateY(10px) !important;
    text-align: center !important;
    text-decoration: none !important;
    z-index: 3 !important;
    display: block !important;
}
.svr-product-card-img-wrap:hover .svr-add-btn {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Force Home 2 Hero Row to precisely match header width (Desktop Only) */
/* NOTE: We only zero the padding on the specific row, NOT on .svr-avant-home itself,
   to preserve the -40px negative-margin hero alignment system for index.html & index-3 */
@media (min-width: 1025px) {
    .svr-avant-home .svr-h2-row--hero {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }
}

/* Fix Mobile Overlay Menu Padding & Pill Shape */
.tft-mom-link {
    padding: 12px 20px !important;
    border-bottom: none !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.tft-mom-link:hover,
.tft-mom-link--active {
    background: rgba(230, 185, 83, 0.12) !important;
}

/* Fix Blog Responsive Layout Overflow */
@media (max-width: 768px) {
    .svr-dashboard .tft-blog-featured-premium {
        padding: 30px 20px !important;
        background: var(--svr-color-bg-dark) !important;
        border-radius: 20px !important;
        margin-left: 20px !important;
        margin-right: 20px !important;
        width: auto !important;
        box-sizing: border-box !important;
    }
    .tft-blog-featured-premium .tft-bfp-content {
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .tft-blog-featured-premium .tft-bfp-title {
        font-size: 1.8rem !important;
        line-height: 1.25 !important;
        word-wrap: break-word !important;
    }
    .tft-blog-featured-premium .tft-bfp-excerpt {
        font-size: 1rem !important;
    }
}

/* Fix Recipe Builder Sticky Sidebar (Remove Scroll-breaking Overflow) */
.tft-submit-page-wrapper {
    overflow: visible !important;
}

/* ── Centering and Alignment Overrides for Responsive Navigation and WebGL Hero ── */
@media (max-width: 991px) {
    /* Prevent badge and WebGL canvas/glow from overlapping hero content on mobile */
    .svr-hero-webgl {
        padding-bottom: 180px !important;
    }
    .svr-hero-webgl__circle-glow, 
    .svr-hero-webgl__canvas {
        top: auto !important;
        bottom: -42px !important;
        inset-inline-start: 50% !important;
        inset-inline-end: auto !important;
        transform: translateX(-50%) !important;
    }
    .svr-hero-webgl__badge {
        top: auto !important;
        bottom: 30px !important;
        inset-inline-start: 50% !important;
        inset-inline-end: auto !important;
        transform: translate(-50%, 0) rotate(5deg) !important;
    }
}

@media (max-width: 768px) {
    /* Ensure floating dock container uses proper box-sizing and centers navigation */
    .svr-sidebar {
        box-sizing: border-box !important;
        height: 70px !important;
        padding-block: 0 !important;
        padding-inline: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .svr-sidebar *,
    .svr-sidebar *::before,
    .svr-sidebar *::after {
        box-sizing: border-box !important;
    }

    /* Reset navigation container spacing and layout inside the floating dock */
    .svr-nav {
        margin: 0 !important;
        padding-block: 0 !important;
        padding-inline: 10px !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Force all links and accordion details to be perfectly centered circular action buttons */
    .svr-nav__link,
    .svr-sidebar .svr-nav-accordion,
    .svr-sidebar .svr-nav-accordion summary {
        height: 44px !important;
        width: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }

    /* Remove vertical translation on active navigation link to keep it vertically centered */
    .svr-nav__link--active {
        transform: scale(1.08) !important;
    }

    /* Center navigation icons inside circles using absolute positioning */
    .svr-nav__link i,
    .svr-sidebar .svr-nav-accordion summary i:first-child {
        position: absolute !important;
        top: 50% !important;
        inset-inline-start: 50% !important;
        inset-inline-end: auto !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        line-height: 1 !important;
    }
}

/* ── Home 4 Typography, Overflow, and Responsive Layout Adjustments ── */
/* Fluid Typography for Home 4 section headers to prevent overflow/clipping on mobile */
.svr-h4-bento-header h2, 
.svr-h4-accordion-header h2, 
.svr-h4-disc-header h2,
.svr-h4-split-header h2 {
    font-size: clamp(1.8rem, 1.2rem + 3vw, 3.5rem) !important;
    padding-inline-start: 30px !important;
    padding-inline-end: 0 !important;
}

.svr-h4-bento-header h2::before, 
.svr-h4-accordion-header h2::before, 
.svr-h4-roster-header h2::before, 
.svr-h4-dual-header h2::before, 
.svr-h4-disc-header h2::before,
.svr-h4-split-header h2::before {
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
}

.svr-h4-roster-header h2, 
.svr-h4-dual-header h2 {
    font-size: clamp(2rem, 1.4rem + 3vw, 4rem) !important;
    padding-inline-start: 30px !important;
    padding-inline-end: 0 !important;
}

@media (max-width: 768px) {
    /* Responsive typography and spacing for Expanding Accordion items to prevent text clipping */
    .svr-h4-accordion-item {
        height: 280px !important; /* Slightly increase height on mobile for breathing room */
    }
    .svr-h4-accordion-content {
        padding: 20px 15px !important; /* Reduce padding to maximize content area */
    }
    .svr-h4-accordion-num {
        font-size: 1.2rem !important;
        margin-bottom: 6px !important;
    }
    .svr-h4-accordion-content h3 {
        font-size: 1.4rem !important;
        margin-bottom: 4px !important;
    }
    .svr-h4-accordion-content p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }
    .svr-h4-accordion-meta {
        margin-top: 10px !important;
    }
}

/* Ensure the accordion section has a solid dark background for readability on mobile/tablet */
@media (max-width: 991px) {
    .svr-h4-accordion-section {
        background: var(--svr-color-bg-dark) !important;
    }
}

/* Prevent side-by-side header content collisions on mobile */
@media (max-width: 768px) {
    .svr-h4-bento-header,
    .svr-h4-accordion-header,
    .svr-h4-roster-header,
    .svr-h4-dual-header,
    .svr-h4-disc-header,
    .svr-h4-split-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        margin-bottom: 30px !important;
    }
}

/* Fix description paragraph contrast on dark sections in Home 4 for both mobile and desktop */
.svr-h4-accordion-header p,
.svr-h4-roster-header p,
.svr-h4-split-header p {
    color: var(--svr-color-text-muted-dark) !important;
}

/* Centering and Alignment for Collapsed Sidebar in Tablet Mode (max-width: 1024px and min-width: 769px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .svr-sidebar .svr-logo a {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }
    
    .svr-sidebar .svr-profile-widget {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        background: transparent !important;
        padding: 10px 0 !important;
    }

    .svr-nav__link,
    .svr-sidebar .svr-nav-accordion,
    .svr-sidebar .svr-nav-accordion summary {
        width: 48px !important;
        height: 48px !important;
        margin: 5px auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    .svr-nav__link i,
    .svr-sidebar .svr-nav-accordion summary i:first-child {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        font-size: 1.25rem !important;
        width: auto !important;
        height: auto !important;
        line-height: 1 !important;
    }
}

/* Improve footer watermark text readability on both desktop and mobile */
.svr-uf-big-text h2 {
    color: rgba(255, 255, 255, 0.25) !important;
}
.svr-uf-big-text h2 em {
    opacity: 0.95 !important;
}

/* Fix Cinematic Split Card height and content cutoff on small screens */
@media (max-width: 768px) {
    .tft-cin-panel {
        height: auto !important;
        min-height: 380px !important;
    }
    
    .tft-cin-content {
        padding-inline-start: 24px !important;
        padding-inline-end: 24px !important;
        padding-bottom: 30px !important;
    }

    .tft-cin-content h3 {
        font-size: clamp(2rem, 8vw, 2.85rem) !important;
        margin-bottom: 15px !important;
    }

    .tft-cin-content p {
        font-size: 0.95rem !important;
        margin-bottom: 20px !important;
    }

    .tft-cin-num {
        margin-bottom: 12px !important;
    }
}

/* Fix footer margins and column layouts on tablet/mobile screens to prevent cutoffs */
@media (max-width: 1350px) {
    .svr-ultra-footer {
        margin-left: 15px !important;
        margin-right: 15px !important;
    }
}

@media (max-width: 768px) {
    .svr-ultra-footer {
        margin-left: 15px !important;
        margin-right: 15px !important;
        margin-bottom: 100px !important; /* Clear bottom floating nav dock */
        border-radius: 24px !important;
    }
    .svr-uf-content {
        padding: 40px 20px 30px !important;
    }
    .svr-uf-brand, 
    .svr-uf-links-wrapper, 
    .svr-uf-newsletter {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    .svr-uf-news-card {
        padding: 25px 20px !important;
        border-radius: 20px !important;
    }
    .svr-uf-news-card h4 {
        font-size: 1.8rem !important;
    }
}

/* Centering the pagination navigation and preventing offset shifts */
.tft-lux-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Submit Recipe Layout Spacing & Interaction Overrides for Responsive Viewports */
@media (max-width: 992px) {
    /* Remove outer wrapper backgrounds and paddings, and standardize margins and border-radius to align with the header menu */
    .svr-avant-submit {
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 15px 30px !important;
        border-radius: 24px !important;
    }
    
    .tft-submit-page-wrapper {
        border-radius: 24px !important;
        overflow: hidden !important;
    }

    .tft-submit-page-bg,
    .tft-submit-page-overlay {
        border-radius: 24px !important;
    }

    /* Prevent recipe submit cards from translating/pushing to the right on hover, focus, or click */
    .tft-submit-card:hover,
    .tft-submit-card--active,
    .tft-submit-card:focus-within {
        transform: none !important;
    }
}

/* Contact Page Layout & Typographic Responsiveness Overrides */
@media (max-width: 768px) {
    /* Stack the Headquarters and Connect columns to prevent overlap and text clipping */
    .tft-contact-info-grid {
        grid-template-columns: 1fr !important;
        gap: 45px !important;
        padding-top: 40px !important;
    }

    /* Fluid typography overrides for madlibs form to prevent layout overflows on mobile */
    .svr-avant-contact__content div[style*="font-size: 2.5rem"] {
        font-size: clamp(1.4rem, 6.5vw, 2.2rem) !important;
        line-height: 1.5 !important;
        gap: 12px 15px !important;
    }

    /* Scale down the handwritten inputs to fit mobile viewports nicely */
    .svr-madlibs-input {
        font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
    }

    .svr-madlibs-input::placeholder {
        font-size: clamp(1.3rem, 6vw, 1.8rem) !important;
    }
}

/* ==========================================================================
   Recipe Category Discovery Bar — Top Nav Strip
   Styled as horizontal scrollable pill tabs, clearly distinct from sidebar nav.
   ========================================================================== */

/* Override the links strip to behave as a category pill row */
.svr-top-nav__links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding-block: 4px !important;
}

.svr-top-nav__links::-webkit-scrollbar { display: none !important; }

/* Category pill base style — distinct from old page-link style */
.svr-top-nav__link--cat {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 16px !important;
    border-radius: var(--svr-radius-pill) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: rgba(255, 255, 255, 0.65) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
    white-space: nowrap !important;
}

/* Hover state — subtle warm gold tint */
.svr-top-nav__link--cat:hover {
    background: rgba(230, 185, 83, 0.15) !important;
    color: var(--svr-color-accent-gold) !important;
    border-color: rgba(230, 185, 83, 0.35) !important;
}

/* Active / current category pill — full gold fill */
.svr-top-nav__link--cat.svr-top-nav__link--active,
.svr-top-nav__link--cat:focus-visible {
    background: var(--svr-color-accent-gold) !important;
    color: #1a1a1a !important;
    border-color: var(--svr-color-accent-gold) !important;
    outline: none !important;
}

/* On light-background pages (index-2), darken the pill text slightly */
.svr-main-content--light .svr-top-nav__link--cat {
    color: rgba(26, 26, 26, 0.65) !important;
    background: rgba(26, 26, 26, 0.06) !important;
    border-color: rgba(26, 26, 26, 0.1) !important;
}
.svr-main-content--light .svr-top-nav__link--cat:hover {
    color: var(--svr-color-accent-gold) !important;
    background: rgba(230, 185, 83, 0.12) !important;
    border-color: rgba(230, 185, 83, 0.3) !important;
}

/* Mobile: full-width scroll strip with slight padding so edges peek */
@media (max-width: 768px) {
    .svr-top-nav__links {
        padding-inline-start: 5px !important;
        padding-inline-end: 20px !important;
        gap: 8px !important;
        /* Fade right edge to hint at scroll */
        -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%) !important;
        mask-image: linear-gradient(to right, black 80%, transparent 100%) !important;
    }
    .svr-top-nav__link--cat {
        font-size: 0.72rem !important;
        padding: 6px 13px !important;
    }
}

/* ==========================================================================
   Minimal Top Nav — Matches Mockup Design
   Minimal Cream bg · Search · Login · Register · Submit Recipe
   ========================================================================== */

/* ── Image strip lives on the PARENT section, not on the nav ─────────
   This lets the decoration (leaves, gold stars) breathe ABOVE the
   search bar row and fade naturally into the body background.
   ──────────────────────────────────────────────────────────────────── */
.svr-main-content {
    position: relative !important;
    overflow: visible !important;
}

/* Dedicated image banner — absolutely positioned behind the nav */
.svr-main-content::before {
    content: '' !important;
    position: absolute !important;
    inset-block-start: 0 !important;
    inset-inline-start: 0 !important;
    width: 100% !important;
    height: 120px !important;
    background-color: var(--svr-color-bg-light) !important;
    background-image:
        linear-gradient(to bottom, transparent 55%, var(--svr-color-bg-light) 100%),
        url('../img/header-bg.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* Nav sits ON TOP of the ::before strip — fully transparent */
.svr-top-nav--minimal {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 56px 32px 14px !important;
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
}


/* Floating actions row */
.svr-top-nav__floating-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

/* ── Search Bar ──────────────────────────────────────────────── */
.svr-top-nav__search {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: color-mix(in srgb, var(--svr-color-card-light) 72%, transparent) !important;
    border: 1.5px solid color-mix(in srgb, var(--svr-color-accent-gold) 40%, transparent) !important;
    border-radius: var(--svr-radius-pill) !important;
    padding: 10px 16px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
    flex: 1 1 auto !important;
    min-width: 180px !important;
    max-width: none !important;
}

.svr-top-nav__search:focus-within {
    border-color: var(--svr-color-accent-gold) !important;
    background: color-mix(in srgb, var(--svr-color-card-light) 90%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--svr-color-accent-gold) 15%, transparent) !important;
}

.svr-top-nav__search-icon {
    color: color-mix(in srgb, var(--svr-color-text-dark) 55%, transparent) !important;
    font-size: 0.82rem !important;
    flex-shrink: 0 !important;
}

.svr-top-nav__search-input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--svr-color-text-dark) !important;
    font-family: var(--svr-font-body) !important;
    font-size: 0.875rem !important;
    width: 100% !important;
    letter-spacing: 0.01em !important;
}

.svr-top-nav__search-input::placeholder {
    color: color-mix(in srgb, var(--svr-color-text-dark) 48%, transparent) !important;
    font-style: normal !important;
}

/* Filter / sliders icon button inside search */
.svr-top-nav__search-filter {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 2px 0 !important;
    color: color-mix(in srgb, var(--svr-color-text-dark) 50%, transparent) !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    transition: color 0.2s ease !important;
}
.svr-top-nav__search-filter:hover {
    color: var(--svr-color-accent-gold) !important;
}

/* ── Auth Buttons ──────────────────────────────────────────────── */
.svr-top-nav__auth-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-family: var(--svr-font-body) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: var(--svr-radius-pill) !important;
    padding: 10px 18px !important;
    white-space: nowrap !important;
    transition: all 0.22s ease !important;
    flex-shrink: 0 !important;
}

/* LOGIN — dark/charcoal pill (matches mockup) */
.svr-top-nav__auth-btn--dark {
    background: var(--svr-color-text-dark) !important;
    border: 1.5px solid var(--svr-color-text-dark) !important;
    color: var(--svr-color-text-light) !important;
}
.svr-top-nav__auth-btn--dark:hover {
    background: color-mix(in srgb, var(--svr-color-text-dark) 85%, var(--svr-color-text-light)) !important;
    border-color: color-mix(in srgb, var(--svr-color-text-dark) 85%, var(--svr-color-text-light)) !important;
    transform: translateY(-1px) !important;
}

/* REGISTER — outline pill (matches mockup) */
.svr-top-nav__auth-btn--outline {
    background: transparent !important;
    border: 1.5px solid color-mix(in srgb, var(--svr-color-text-dark) 35%, transparent) !important;
    color: var(--svr-color-text-dark) !important;
}
.svr-top-nav__auth-btn--outline:hover {
    background: color-mix(in srgb, var(--svr-color-text-dark) 6%, transparent) !important;
    border-color: color-mix(in srgb, var(--svr-color-text-dark) 60%, transparent) !important;
}

/* ── Submit Recipe CTA ─────────────────────────────────────────── */
.svr-top-nav__submit-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-text-dark) !important;
    font-family: var(--svr-font-body) !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 11px 22px !important;
    border-radius: var(--svr-radius-pill) !important;
    border: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
.svr-top-nav__submit-btn:hover {
    opacity: 0.88 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--svr-color-accent-gold) 40%, transparent) !important;
}

/* ── Tablet (≤1200px) — hide auth labels, keep icons ────────────── */
@media (max-width: 1200px) {
    .svr-top-nav--minimal {
        padding: 11px 22px !important;
        margin: 0 !important;
    }
    .svr-top-nav__search {
        max-width: 280px !important;
    }
}

@media (max-width: 991px) {
    .svr-top-nav__auth-btn span {
        display: none !important;
    }
    .svr-top-nav__auth-btn {
        padding: 10px 13px !important;
        gap: 0 !important;
    }
    .svr-top-nav__submit-btn span {
        display: none !important;
    }
    .svr-top-nav__submit-btn {
        padding: 10px 14px !important;
        gap: 0 !important;
    }
}

/* ── Mobile (≤768px) — search takes full width, icons only ──────── */
@media (max-width: 768px) {
    .svr-top-nav--minimal {
        border-radius: 0 !important;
        padding: 10px 16px !important;
        margin: 0 !important;
        justify-content: stretch !important;
    }
    .svr-top-nav__floating-actions {
        gap: 8px !important;
    }
    .svr-top-nav__search {
        flex: 1 1 auto !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 9px 13px !important;
    }
    /* Icon-only circles for auth */
    .svr-top-nav__auth-btn {
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        justify-content: center !important;
    }
    .svr-top-nav__submit-btn {
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        justify-content: center !important;
    }
}

/* ── Very small (≤420px) ─────────────────────────────────────────── */
@media (max-width: 420px) {
    .svr-top-nav--minimal {
        margin: 0 !important;
        padding: 9px 12px !important;
        border-radius: 0 !important;
        gap: 6px !important;
    }
    .svr-top-nav__floating-actions {
        gap: 6px !important;
    }
    .svr-top-nav__auth-btn,
    .svr-top-nav__submit-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.75rem !important;
    }
}

/* ==========================================================================
   Hero Featured Recipe Card Overrides (Mockup Polish)
   ========================================================================== */

/* Gold badge color & alignment */
.svr-hero__content .svr-badge-text {
    color: var(--svr-color-accent-gold) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Badge star animation/shine effect */
.svr-hero__badge-star {
    color: var(--svr-color-accent-gold) !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
}

/* Second line of hero title: contains highlighted word and swoosh underline */
.svr-hero__title-line-2 {
    position: relative !important;
    display: inline-block !important;
}

/* Sketchy hand-drawn swoosh underline under "Prawn Linguine" */
/* Note: currentColor does NOT work in background-image data URIs, so the gold hex is hardcoded here.
   --svr-color-accent-gold = #e6b953 */
.svr-hero__title-line-2::after {
    content: '' !important;
    position: absolute !important;
    left: -2px !important;
    bottom: -10px !important;
    width: calc(100% + 4px) !important;
    height: 14px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 14' preserveAspectRatio='none'%3E%3Cpath d='M2,10 C18,4 35,13 55,9 C75,5 90,12 110,8 C130,4 148,11 168,8 C188,5 205,12 225,8 C245,4 262,11 282,7 C298,4 310,9 318,7' stroke='%23e6b953' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4,12 C30,10 60,13 90,11 C120,9 150,12 180,10 C210,8 240,12 270,10 C290,9 308,11 316,10' stroke='%23e6b953' stroke-width='1.2' fill='none' stroke-linecap='round' opacity='0.45'/%3E%3C/svg%3E") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
}

/* Gold highlighted text (Prawn) */
.svr-hero__title-highlight {
    color: var(--svr-color-accent-gold) !important;
}

/* ==========================================================================
   FLUSH NAV — Remove top padding / banner height so the nav row sits
   on the same visual baseline as the hero (no gap above the search bar).
   ========================================================================== */

/* Collapse the decorative banner strip to only what the nav needs */
.svr-main-content::before {
    height: 68px !important;
}

/* Flatten the large top-padding so the search bar is flush at the top */
.svr-top-nav--minimal {
    padding-block-start: 14px !important;   /* was 56px — now matches bottom */
    padding-block-end: 14px !important;
    padding-inline: 32px !important;
}

/* Responsive: keep symmetrical at tablet */
@media (max-width: 1200px) {
    .svr-top-nav--minimal {
        padding-block-start: 12px !important;
        padding-block-end: 12px !important;
    }
    .svr-main-content::before {
        height: 60px !important;
    }
}

/* Responsive: mobile — fully flush */
@media (max-width: 768px) {
    .svr-top-nav--minimal {
        padding-block-start: 10px !important;
        padding-block-end: 10px !important;
    }
    .svr-main-content::before {
        height: 58px !important;
    }
}


/* ==========================================================================
   KILL GREEN STRIP � Remove the header-bg banner entirely.
   Nav floats directly over the hero with zero visible background.
   ========================================================================== */

/* Hide the decorative ::before banner strip completely */
.svr-main-content::before {
    display: none !important;
}

/* Nav is fully transparent � no background, minimal padding */
.svr-top-nav--minimal {
    background: transparent !important;
    background-image: none !important;
    padding-block-start: 12px !important;
    padding-block-end: 12px !important;
    padding-inline: 24px !important;
}

@media (max-width: 1200px) {
    .svr-top-nav--minimal {
        padding-block-start: 10px !important;
        padding-block-end: 10px !important;
    }
}

@media (max-width: 768px) {
    .svr-top-nav--minimal {
        padding-block-start: 8px !important;
        padding-block-end: 8px !important;
        padding-inline: 14px !important;
    }
}

/* ==========================================================================
   ALIGN NAV TO HERO EDGE � Match the avant-home wrapper's 30px side margin
   so the search bar left-edge is pixel-perfect with the hero left border.
   ========================================================================== */
.svr-top-nav--minimal {
    padding-inline-start: 30px !important;
    padding-inline-end: 30px !important;
}

@media (max-width: 1200px) {
    .svr-top-nav--minimal {
        padding-inline-start: 20px !important;
        padding-inline-end: 20px !important;
    }
}

@media (max-width: 768px) {
    .svr-top-nav--minimal {
        padding-inline-start: 12px !important;
        padding-inline-end: 12px !important;
    }
}

/* ==========================================================================
   FINAL ALIGNMENT FIX � Nav must use margin-inline:30px (same as
   .svr-avant-home wrapper) + width:auto so its left/right edges are
   pixel-perfect with the hero box on all screen sizes.
   ========================================================================== */
.svr-top-nav--minimal {
    width: auto !important;
    margin-inline-start: 30px !important;
    margin-inline-end: 30px !important;
    margin-block: 0 !important;
    padding-inline: 20px !important;
}

@media (max-width: 1200px) {
    .svr-top-nav--minimal {
        margin-inline-start: 20px !important;
        margin-inline-end: 20px !important;
        padding-inline: 16px !important;
    }
}

@media (max-width: 768px) {
    .svr-top-nav--minimal {
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
        padding-inline: 12px !important;
    }
}

/* ==========================================================================
   DEFINITIVE NAV ALIGNMENT � Matches avant-home wrapper margin: 0 30px
   width:calc(100%-60px) + margin-inline:30px = same left/right edge as hero
   ========================================================================== */
.svr-top-nav--minimal {
    width: calc(100% - 60px) !important;
    margin-inline-start: 30px !important;
    margin-inline-end: 30px !important;
    margin-block: 0 !important;
    padding-inline: 16px !important;
    padding-block: 12px !important;
    box-sizing: border-box !important;
    position: static !important;
    top: unset !important;
}

@media (max-width: 900px) {
    .svr-top-nav--minimal {
        width: calc(100% - 32px) !important;
        margin-inline-start: 16px !important;
        margin-inline-end: 16px !important;
        padding-inline: 12px !important;
    }
}

@media (max-width: 600px) {
    .svr-top-nav--minimal {
        width: 100% !important;
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
        padding-inline: 10px !important;
    }
}

/* ==========================================================================
   MOBILE NAV DRAWER � Hamburger + full-screen slide-in panel
   ========================================================================== */

/* Hamburger button � hidden on desktop, visible on mobile */
.svr-top-nav__hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--svr-radius-pill);
    background: color-mix(in srgb, var(--svr-color-text-dark) 8%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--svr-color-text-dark) 15%, transparent);
    color: var(--svr-color-text-dark);
    font-size: 1rem;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.2s ease;
    order: -1;
}
.svr-top-nav__hamburger:hover {
    background: color-mix(in srgb, var(--svr-color-accent-gold) 15%, transparent);
    border-color: var(--svr-color-accent-gold);
    color: var(--svr-color-accent-gold);
}

/* Dimmed backdrop */
.svr-mob-drawer__overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1998;
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.svr-mob-drawer__overlay--visible {
    opacity: 1;
}

/* Drawer panel � slides in from left */
.svr-mob-drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(320px, 88vw);
    background: var(--svr-color-sidebar);
    z-index: 1999;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow-y: auto;
    transform: translateX(-110%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 8px 0 40px rgba(0,0,0,0.4);
}
.svr-mob-drawer--open {
    transform: translateX(0);
}

/* Header row: logo + close */
.svr-mob-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 20px 20px;
    border-block-end: 1px solid var(--svr-color-border-dark);
}
.svr-mob-drawer__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--svr-color-accent-gold);
}
.svr-mob-drawer__logo i {
    font-size: 1.4rem;
}
.svr-mob-drawer__logo span {
    font-family: var(--svr-font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.svr-mob-drawer__close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--svr-color-border-dark);
    border: none;
    color: var(--svr-color-text-muted-dark);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.svr-mob-drawer__close:hover {
    background: rgba(230,185,83,0.15);
    color: var(--svr-color-accent-gold);
}

/* Nav section */
.svr-mob-drawer__nav {
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    flex: 1;
}

/* Accordion items */
.svr-mob-drawer__accordion {
    border-block-end: 1px solid var(--svr-color-border-dark);
}
.svr-mob-drawer__accordion summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    list-style: none;
    transition: color 0.2s ease, background 0.2s ease;
    user-select: none;
}
.svr-mob-drawer__accordion summary::-webkit-details-marker { display: none; }
.svr-mob-drawer__accordion summary i:first-child {
    width: 18px;
    text-align: center;
    font-size: 0.95rem;
    color: var(--svr-color-accent-gold);
}
.svr-mob-drawer__chevron {
    margin-inline-start: auto;
    font-size: 0.65rem;
    transition: transform 0.25s ease;
    color: rgba(255,255,255,0.3);
}
.svr-mob-drawer__accordion[open] > summary .svr-mob-drawer__chevron {
    transform: rotate(90deg);
}
.svr-mob-drawer__accordion summary:hover {
    color: var(--svr-color-accent-gold);
    background: rgba(230,185,83,0.06);
}
.svr-mob-drawer__accordion[open] > summary {
    color: var(--svr-color-accent-gold);
}

/* Sub-links */
.svr-mob-drawer__submenu {
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,0.25);
    padding-block: 6px;
}
.svr-mob-drawer__submenu a {
    padding: 10px 20px 10px 52px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.55);
    transition: color 0.2s ease, background 0.2s ease;
}
.svr-mob-drawer__submenu a:hover {
    color: var(--svr-color-accent-gold);
    background: rgba(230,185,83,0.06);
}

/* Standalone contact link */
.svr-mob-drawer__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    transition: color 0.2s ease, background 0.2s ease;
}
.svr-mob-drawer__link i {
    width: 18px;
    text-align: center;
    color: var(--svr-color-accent-gold);
}
.svr-mob-drawer__link:hover {
    color: var(--svr-color-accent-gold);
    background: rgba(230,185,83,0.06);
}

/* Profile widget at the bottom */
.svr-mob-drawer__profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-block-start: 1px solid var(--svr-color-border-dark);
    text-decoration: none;
    transition: background 0.2s ease;
}
.svr-mob-drawer__profile:hover {
    background: rgba(230,185,83,0.06);
}
.svr-mob-drawer__profile img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.svr-mob-drawer__profile div {
    flex: 1;
}
.svr-mob-drawer__profile strong {
    display: block;
    font-size: 0.88rem;
    color: var(--svr-color-text-light);
}
.svr-mob-drawer__profile span {
    font-size: 0.72rem;
    color: var(--svr-color-text-muted-dark);
}
.svr-mob-drawer__profile > i {
    color: var(--svr-color-text-muted-dark);
    font-size: 0.7rem;
}

/* Show hamburger + overlay only on mobile (sidebar is hidden on mobile) */
@media (max-width: 768px) {
    .svr-top-nav__hamburger {
        display: flex;
    }
    .svr-mob-drawer__overlay {
        display: block;
    }
}

/* ==========================================================================
   MOBILE NAV � Pointer-events fix (overlay was blocking hamburger clicks)
   ========================================================================== */
.svr-mob-drawer__overlay {
    pointer-events: none !important;
}
.svr-mob-drawer__overlay--visible {
    pointer-events: auto !important;
}

/* ==========================================================================
   REMOVE BOTTOM DOCK � Sidebar hidden on mobile; drawer handles navigation
   ========================================================================== */
@media (max-width: 768px) {
    .svr-sidebar {
        display: none !important;
    }
    .svr-main-content {
        padding-bottom: 0 !important;
    }
}


/* ==========================================================================
   TFT-RESPONSIVE: LAYOUT ALIGNMENT & MOBILE OVERRIDES (APPEND ONLY)
   ========================================================================== */

/* 1. FLEX CONTAINMENT & HORIZONTAL STRETCHING FIX */
.svr-main-content {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.svr-avant-home {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.svr-journal-wrapper {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* 2. GLOBAL RESPONSIVE SPACING & CARD MARGINS */
@media (max-width: 768px) {
    .svr-avant-home {
        margin-inline: 12px !important;
        margin-block: 12px 24px !important;
        padding-inline: 15px !important;
        padding-block: 20px !important;
        border-radius: var(--svr-radius-md) !important;
    }
    .svr-journal-wrapper {
        margin-inline: 12px !important;
        margin-block: 12px 24px !important;
        padding-inline: 15px !important;
        padding-block: 20px !important;
        border-radius: var(--svr-radius-md) !important;
    }
    .svr-avant-cart {
        margin-inline: 12px !important;
        margin-block: 12px 24px !important;
        padding-inline: 15px !important;
        padding-block: 20px !important;
        border-radius: var(--svr-radius-md) !important;
    }
    #wp-block-recipes-hero {
        padding-inline: 10px !important;
        padding-block: 0 40px !important;
        margin-block-end: 30px !important;
    }
    #tft-recipes-grid-filters {
        gap: 8px !important;
    }
    .tft-rg-filter {
        padding-inline: 16px !important;
        padding-block: 8px !important;
        font-size: 0.75rem !important;
    }
}

/* 3. CART PAGE RESPONSIVE OVERRIDES (cart.html) */
@media (max-width: 1024px) {
    .svr-avant-cart > div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 40px !important;
    }
    .tft-cart-items-list {
        min-width: 0 !important;
        width: 100% !important;
    }
    .svr-avant-cart > div[style*="display: flex"] > div:nth-child(2) {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        position: static !important;
        padding-inline: 20px !important;
        padding-block: 30px !important;
    }
}

@media (max-width: 768px) {
    .tft-cart-item {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
        padding-block-end: 25px !important;
    }
    .tft-cart-item > div:first-child {
        width: 100% !important;
        height: 200px !important;
    }
    .tft-cart-item h2, .tft-cart-item h3 {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .tft-cart-items-list > div[style*="display: flex"]:last-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .tft-cart-items-list > div[style*="display: flex"]:last-child input {
        max-width: 100% !important;
    }
}

/* 4. CHECKOUT PAGE RESPONSIVE OVERRIDES (checkout.html) */
@media (max-width: 1024px) {
    .tft-checkout-form {
        flex-direction: column !important;
    }
    .tft-checkout-left,
    .tft-checkout-right {
        flex: none !important;
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .tft-checkout-wrap {
        padding-inline: 15px !important;
        padding-block: 0 30px !important;
    }
    .tft-form-row {
        grid-template-columns: 1fr !important;
    }
}

/* 5. MY ACCOUNT PAGE RESPONSIVE OVERRIDES (my-account.html) */
@media (max-width: 768px) {
    .tft-account-wrap {
        padding-inline: 15px !important;
        padding-block: 0 30px !important;
        flex-direction: column !important;
    }
    .tft-account-nav {
        flex: none !important;
        width: 100% !important;
    }
    .tft-account-content {
        flex: none !important;
        width: 100% !important;
    }
    .tft-dashboard-summary-cards {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    .tft-table-wrapper {
        overflow-x: auto !important;
    }
}

/* 6. CONTACT PAGE RESPONSIVE OVERRIDES (contact.html) */
@media (max-width: 1024px) {
    .svr-avant-contact {
        flex-direction: column !important;
        margin-inline: 12px !important;
        margin-block: 12px 24px !important;
        border-radius: var(--svr-radius-md) !important;
        min-height: auto !important;
    }
    .svr-avant-contact__visual {
        flex: none !important;
        width: 100% !important;
        height: 350px !important;
        border-start-start-radius: var(--svr-radius-md) !important;
        border-start-end-radius: var(--svr-radius-md) !important;
        border-end-start-radius: 0 !important;
        border-end-end-radius: 0 !important;
    }
    .svr-avant-contact__visual > div {
        height: 350px !important;
        border-start-start-radius: var(--svr-radius-md) !important;
        border-start-end-radius: var(--svr-radius-md) !important;
        border-end-start-radius: 0 !important;
        border-end-end-radius: 0 !important;
        position: relative !important;
        inset-block-start: 0 !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
    .svr-avant-contact__visual img {
        border-start-start-radius: var(--svr-radius-md) !important;
        border-start-end-radius: var(--svr-radius-md) !important;
        border-end-start-radius: 0 !important;
        border-end-end-radius: 0 !important;
    }
    .svr-avant-contact__visual h1 {
        font-size: clamp(3rem, 10vw, 5rem) !important;
        inset-inline-start: 5% !important;
    }
    .svr-avant-contact__content {
        flex: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding-inline: 20px !important;
        padding-block: 40px !important;
    }
    .tft-contact-info-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        padding-block-start: 40px !important;
        margin-block-start: 20px !important;
    }
}

@media (max-width: 768px) {
    .svr-avant-contact__content form > div {
        margin-block-end: 40px !important;
    }
    .svr-avant-contact__content h1,
    .svr-avant-contact__content h2,
    .svr-avant-contact__content p {
        word-break: break-word !important;
    }
    .svr-madlibs-input {
        font-size: clamp(1.4rem, 4.5vw, 1.8rem) !important;
    }
    .svr-madlibs-input::placeholder {
        font-size: clamp(1.2rem, 4vw, 1.5rem) !important;
    }
}

/* 7. SINGLE POST PAGE RESPONSIVE OVERRIDES (single.html) */
@media (max-width: 768px) {
    .tft-author-box {
        flex-direction: column !important;
        text-align: center !important;
        align-items: center !important;
        padding-inline: 20px !important;
        padding-block: 30px !important;
    }
    .tft-author-avatar {
        margin-inline-end: 0 !important;
        margin-block-end: 20px !important;
    }
    .tft-post-nav {
        flex-direction: column !important;
        gap: 20px !important;
    }
    .tft-pn-prev, .tft-pn-next {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .tft-comment-body {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .tft-comment-avatar {
        margin-block-end: 15px !important;
    }
}

/* 8. NEWSLETTER CARD MOBILE PADDING FIX */
@media (max-width: 768px) {
    .svr-uf-news-card {
        padding-inline: 20px !important;
        padding-block: 25px !important;
        border-radius: var(--svr-radius-md) !important;
    }
}


/* ==========================================================================
   TFT-RESPONSIVE: PREMIUM BUTTON INTERACTIONS (APPEND ONLY)
   ========================================================================== */

/* Add transitions for icons inside the buttons */
.svr-top-nav__auth-btn i,
.svr-top-nav__submit-btn i {
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 1. LOGIN BUTTON (Dark Pill) */
.svr-top-nav__auth-btn--dark {
    position: relative !important;
    overflow: hidden !important;
}
.svr-top-nav__auth-btn--dark:hover {
    background: var(--svr-color-text-dark) !important;
    border-color: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-accent-gold) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--svr-color-text-dark) 30%, transparent) !important;
}
.svr-top-nav__auth-btn--dark:hover i {
    transform: translateY(-1px) scale(1.1) !important;
}
.svr-top-nav__auth-btn--dark:active {
    transform: translateY(0) scale(0.96) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--svr-color-text-dark) 20%, transparent) !important;
}

/* 2. REGISTER BUTTON (Outline Pill) */
.svr-top-nav__auth-btn--outline:hover {
    background: var(--svr-color-text-dark) !important;
    border-color: var(--svr-color-text-dark) !important;
    color: var(--svr-color-text-light) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--svr-color-text-dark) 15%, transparent) !important;
}
.svr-top-nav__auth-btn--outline:hover i {
    transform: scale(1.18) rotate(-5deg) !important;
}
.svr-top-nav__auth-btn--outline:active {
    transform: translateY(0) scale(0.96) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--svr-color-text-dark) 10%, transparent) !important;
}

/* 3. SUBMIT RECIPE BUTTON (Gold Pill) */
.svr-top-nav__submit-btn:hover {
    opacity: 1 !important;
    background: color-mix(in srgb, var(--svr-color-accent-gold) 90%, var(--svr-color-text-light)) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--svr-color-accent-gold) 35%, transparent) !important;
}
.svr-top-nav__submit-btn:hover i {
    transform: rotate(12deg) scale(1.15) !important;
}
.svr-top-nav__submit-btn:active {
    transform: translateY(0) scale(0.97) !important;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--svr-color-accent-gold) 20%, transparent) !important;
}

/* 4. SEARCH BAR (Premium Interaction) */
.svr-top-nav__search {
    transition: all 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.svr-top-nav__search:hover {
    border-color: color-mix(in srgb, var(--svr-color-text-dark) 35%, transparent) !important;
    background: color-mix(in srgb, var(--svr-color-card-light) 95%, transparent) !important;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--svr-color-text-dark) 4%, transparent) !important;
}
.svr-top-nav__search:focus-within {
    border-color: var(--svr-color-accent-gold) !important;
    background: var(--svr-color-card-light) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--svr-color-accent-gold) 15%, transparent) !important;
}
.svr-top-nav__search:hover .svr-top-nav__search-icon {
    color: var(--svr-color-accent-gold) !important;
    transform: scale(1.1) !important;
}
.svr-top-nav__search-icon {
    transition: color 0.25s ease, transform 0.25s ease !important;
}


/* ==========================================================================
   TFT-RESPONSIVE: PREMIUM MOBILE APP HEADER LAYOUT (APPEND ONLY)
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Container adjustments for two-row layout */
    .svr-top-nav--minimal {
        height: auto !important;
        padding-inline: 16px !important;
        padding-block: 14px !important;
        background: var(--svr-color-bg-light) !important;
        border-block-end: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 8%, transparent) !important;
        box-shadow: 0 4px 20px color-mix(in srgb, var(--svr-color-text-dark) 2%, transparent) !important;
    }

    .svr-top-nav__floating-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px 8px !important;
        width: 100% !important;
    }

    /* 2. Dynamically inject the premium Brand Name Logo */
    .svr-top-nav__floating-actions::before {
        content: "SAVORÉ" !important;
        order: 1 !important;
        font-family: var(--svr-font-heading) !important;
        font-weight: 700 !important;
        font-size: 1.35rem !important;
        letter-spacing: 0.08em !important;
        color: var(--svr-color-text-dark) !important;
        margin-inline-start: 10px !important;
        margin-inline-end: auto !important;
        pointer-events: none !important;
        display: block !important;
        line-height: 1 !important;
    }

    /* 3. Re-order and size controls */
    .svr-top-nav__hamburger {
        order: 0 !important;
        margin: 0 !important;
        width: 38px !important;
        height: 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
    }

    .svr-top-nav__auth-btn--dark {
        order: 2 !important;
        width: 38px !important;
        height: 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        margin: 0 !important;
    }

    .svr-top-nav__auth-btn--outline {
        order: 3 !important;
        width: 38px !important;
        height: 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        margin: 0 !important;
    }

    .svr-top-nav__submit-btn {
        order: 4 !important;
        width: 38px !important;
        height: 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        margin: 0 !important;
    }

    /* 4. Full-width search bar on second row */
    .svr-top-nav__search {
        order: 5 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        margin: 0 !important;
        margin-block-start: 4px !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 420px) {
    .svr-top-nav--minimal {
        padding-inline: 12px !important;
        padding-block: 12px !important;
    }

    .svr-top-nav__floating-actions::before {
        font-size: 1.2rem !important;
        margin-inline-start: 6px !important;
    }

    .svr-top-nav__hamburger,
    .svr-top-nav__auth-btn--dark,
    .svr-top-nav__auth-btn--outline,
    .svr-top-nav__submit-btn {
        width: 35px !important;
        height: 35px !important;
    }

    .svr-top-nav__floating-actions {
        gap: 10px 6px !important;
    }
}


/* ==========================================================================
   TFT-RESPONSIVE: MOBILE HEADER PARITY CORRECTION (100% MATCH TO MOCKUP)
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Reset container to flat, clean, bottom-bordered banner */
    .svr-top-nav--minimal {
        height: auto !important;
        padding-inline: 16px !important;
        padding-block: 12px !important;
        background: var(--svr-color-bg-light) !important;
        border-radius: 0 !important;
        margin: 0 !important;
        border-block-end: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 8%, transparent) !important;
        box-shadow: none !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }

    /* 2. Flex row wrapping and centering */
    .svr-top-nav__floating-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0 !important; /* Handled via precise margins */
        width: 100% !important;
    }

    /* 3. Injected Brand Logo Centered-Left */
    .svr-top-nav__floating-actions::before {
        content: "SAVORÉ" !important;
        order: 1 !important;
        font-family: var(--svr-font-heading) !important;
        font-weight: 700 !important;
        font-size: 1.35rem !important;
        letter-spacing: 0.08em !important;
        color: var(--svr-color-text-dark) !important;
        margin: 0 !important;
        margin-inline-start: 12px !important;
        margin-inline-end: auto !important;
        pointer-events: none !important;
        display: inline-flex !important;
        align-items: center !important;
        height: 38px !important;
        line-height: 1 !important;
    }

    /* 4. Hamburger Trigger button */
    .svr-top-nav__hamburger {
        order: 0 !important;
        width: 38px !important;
        height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background: color-mix(in srgb, var(--svr-color-text-dark) 6%, transparent) !important;
        border: 1.5px solid color-mix(in srgb, var(--svr-color-text-dark) 12%, transparent) !important;
        color: var(--svr-color-text-dark) !important;
        font-size: 0.95rem !important;
    }

    /* 5. Action Buttons (Login, Register, Submit) */
    .svr-top-nav__auth-btn,
    .svr-top-nav__submit-btn {
        width: 38px !important;
        height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        vertical-align: middle !important;
    }

    .svr-top-nav__auth-btn--dark {
        order: 2 !important;
        margin: 0 0 0 8px !important;
    }

    .svr-top-nav__auth-btn--outline {
        order: 3 !important;
        margin: 0 0 0 8px !important;
        background: transparent !important;
        border: 1.5px solid color-mix(in srgb, var(--svr-color-text-dark) 18%, transparent) !important;
        color: var(--svr-color-text-dark) !important;
    }

    .svr-top-nav__submit-btn {
        order: 4 !important;
        margin: 0 0 0 8px !important;
    }

    /* Hide text labels entirely */
    .svr-top-nav__auth-btn span,
    .svr-top-nav__submit-btn span {
        display: none !important;
    }

    /* Centered Icons */
    .svr-top-nav__auth-btn i,
    .svr-top-nav__submit-btn i {
        font-size: 0.85rem !important;
        margin: 0 !important;
    }

    /* 6. Full-Width Search Input Bar on Second Row */
    .svr-top-nav__search {
        order: 5 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        margin: 0 !important;
        margin-block-start: 10px !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        height: 42px !important;
        padding-inline: 16px !important;
        background: color-mix(in srgb, var(--svr-color-card-light) 75%, transparent) !important;
        border: 1.5px solid color-mix(in srgb, var(--svr-color-accent-gold) 35%, transparent) !important;
        border-radius: var(--svr-radius-pill) !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    /* Always Gold magnifying glass icon in mockup */
    .svr-top-nav__search-icon {
        color: var(--svr-color-accent-gold) !important;
        font-size: 0.9rem !important;
        margin: 0 !important;
    }

    .svr-top-nav__search-input {
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.875rem !important;
    }

    .svr-top-nav__search-filter {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        margin: 0 !important;
        color: color-mix(in srgb, var(--svr-color-text-dark) 55%, transparent) !important;
        font-size: 0.9rem !important;
    }
}

/* 7. Extra Small Mobile adjustments */
@media (max-width: 420px) {
    .svr-top-nav--minimal {
        padding-inline: 12px !important;
        padding-block: 10px !important;
    }

    .svr-top-nav__floating-actions::before {
        font-size: 1.2rem !important;
        margin-inline-start: 6px !important;
        height: 35px !important;
    }

    .svr-top-nav__hamburger,
    .svr-top-nav__auth-btn,
    .svr-top-nav__submit-btn {
        width: 35px !important;
        height: 35px !important;
    }

    .svr-top-nav__auth-btn--dark {
        margin: 0 0 0 6px !important;
    }

    .svr-top-nav__auth-btn--outline {
        margin: 0 0 0 6px !important;
    }

    .svr-top-nav__submit-btn {
        margin: 0 0 0 6px !important;
    }
}


/* ==========================================================================
   TFT-RESPONSIVE: MOBILE HEADER MOCKUP POLISH V3 (100% MATCH TO DETAILED VIEW)
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Card-like sticky top banner with rounded bottom corners and shadow */
    .svr-top-nav--minimal {
        height: auto !important;
        padding-inline: 16px !important;
        padding-block-start: 14px !important;
        padding-block-end: 18px !important;
        background: var(--svr-color-bg-light) !important;
        border-radius: 0 0 28px 28px !important;
        margin: 0 !important;
        border-block-end: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 6%, transparent) !important;
        box-shadow: 0 12px 32px color-mix(in srgb, var(--svr-color-text-dark) 5%, transparent) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }

    /* 2. Hamburger button styled as dark squircle/circle with gold dot */
    .svr-top-nav__hamburger {
        position: relative !important;
        order: 0 !important;
        width: 38px !important;
        height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background: var(--svr-color-text-dark) !important;
        border: none !important;
        color: var(--svr-color-text-light) !important;
        box-shadow: 0 3px 8px color-mix(in srgb, var(--svr-color-text-dark) 10%, transparent) !important;
    }
    
    .svr-top-nav__hamburger::after {
        content: "" !important;
        position: absolute !important;
        top: 3px !important;
        right: 3px !important;
        width: 8px !important;
        height: 8px !important;
        background-color: var(--svr-color-accent-gold) !important;
        border-radius: 50% !important;
        border: 1.5px solid var(--svr-color-text-dark) !important;
        box-shadow: none !important;
        display: block !important;
    }

    /* 3. Inject Brand Logo */
    .svr-top-nav__floating-actions::before {
        content: "SAVORÉ" !important;
        order: 1 !important;
        font-family: var(--svr-font-heading) !important;
        font-weight: 700 !important;
        font-size: 1.35rem !important;
        letter-spacing: 0.08em !important;
        color: var(--svr-color-text-dark) !important;
        margin: 0 !important;
        margin-inline-start: 12px !important;
        margin-inline-end: auto !important;
        pointer-events: none !important;
        display: inline-flex !important;
        align-items: center !important;
        height: 38px !important;
        line-height: 1 !important;
    }

    /* 4. Action Buttons (Login, Register, Submit) with soft shadows */
    .svr-top-nav__auth-btn,
    .svr-top-nav__submit-btn {
        width: 38px !important;
        height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        vertical-align: middle !important;
        box-shadow: 0 3px 8px color-mix(in srgb, var(--svr-color-text-dark) 8%, transparent) !important;
    }

    .svr-top-nav__auth-btn--dark {
        order: 2 !important;
        margin: 0 0 0 8px !important;
        background: var(--svr-color-text-dark) !important;
        border: none !important;
        color: var(--svr-color-text-light) !important;
    }

    .svr-top-nav__auth-btn--outline {
        order: 3 !important;
        margin: 0 0 0 8px !important;
        background: transparent !important;
        border: 1.5px solid color-mix(in srgb, var(--svr-color-text-dark) 18%, transparent) !important;
        color: var(--svr-color-text-dark) !important;
        box-shadow: none !important; /* outlines don't need strong shadows */
    }

    .svr-top-nav__submit-btn {
        order: 4 !important;
        margin: 0 0 0 8px !important;
        background: var(--svr-color-accent-gold) !important;
        border: none !important;
        color: var(--svr-color-text-dark) !important;
        box-shadow: 0 3px 10px color-mix(in srgb, var(--svr-color-accent-gold) 35%, transparent) !important;
    }

    /* Hide text labels entirely */
    .svr-top-nav__auth-btn span,
    .svr-top-nav__submit-btn span {
        display: none !important;
    }

    /* Centered Icons */
    .svr-top-nav__auth-btn i,
    .svr-top-nav__submit-btn i {
        font-size: 0.85rem !important;
        margin: 0 !important;
    }

    /* 5. White Search Input Bar with soft shadow */
    .svr-top-nav__search {
        order: 5 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        margin: 0 !important;
        margin-block-start: 10px !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        height: 42px !important;
        padding-inline: 16px !important;
        background: var(--svr-color-card-light) !important; /* solid white background */
        border: 1px solid color-mix(in srgb, var(--svr-color-text-dark) 8%, transparent) !important;
        border-radius: var(--svr-radius-pill) !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        box-shadow: 0 4px 14px color-mix(in srgb, var(--svr-color-text-dark) 4%, transparent) !important;
    }

    .svr-top-nav__search-icon {
        color: var(--svr-color-accent-gold) !important;
        font-size: 0.9rem !important;
        margin: 0 !important;
    }

    .svr-top-nav__search-input {
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.875rem !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
    }

    .svr-top-nav__search-filter {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        margin: 0 !important;
        color: color-mix(in srgb, var(--svr-color-text-dark) 55%, transparent) !important;
        font-size: 0.9rem !important;
        background: none !important;
        border: none !important;
    }
}

/* Extra Small mobile viewport scaling */
@media (max-width: 420px) {
    .svr-top-nav--minimal {
        padding-inline: 12px !important;
        padding-block-start: 10px !important;
        padding-block-end: 14px !important;
        border-radius: 0 0 24px 24px !important;
    }

    .svr-top-nav__floating-actions::before {
        font-size: 1.2rem !important;
        margin-inline-start: 6px !important;
        height: 35px !important;
    }

    .svr-top-nav__hamburger,
    .svr-top-nav__auth-btn,
    .svr-top-nav__submit-btn {
        width: 35px !important;
        height: 35px !important;
    }
    
    .svr-top-nav__hamburger::after {
        top: 2px !important;
        right: 2px !important;
        width: 7px !important;
        height: 7px !important;
    }

    .svr-top-nav__auth-btn--dark {
        margin: 0 0 0 6px !important;
    }

    .svr-top-nav__auth-btn--outline {
        margin: 0 0 0 6px !important;
    }

    .svr-top-nav__submit-btn {
        margin: 0 0 0 6px !important;
    }
}


/* ==========================================================================
   TFT-RESPONSIVE: MOBILE HEADER MOCKUP POLISH V4 (PIXEL-TO-PIXEL MATCH)
   ========================================================================== */

@media (max-width: 768px) {
    /* Hide the legacy mobile menu toggle button completely to avoid duplicate/ghost icons */
    .tft-mobile-nav-toggle {
        display: none !important;
    }

    /* 1. Header Container: Rounded bottom corners, soft shadow, warm cream background */
    .svr-top-nav--minimal {
        height: auto !important;
        padding-inline: 16px !important;
        padding-block-start: 18px !important;
        padding-block-end: 22px !important;
        background: #fbf9f4 !important; /* Slightly warmer cream/off-white */
        border-radius: 0 0 32px 32px !important;
        margin: 0 !important;
        border-block-end: 1px solid rgba(0, 0, 0, 0.03) !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }

    /* 2. Floating Actions Row */
    .svr-top-nav__floating-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0 !important;
        width: 100% !important;
    }

    /* 3. Injected Brand Logo Centered-Left */
    .svr-top-nav__floating-actions::before {
        content: "SAVORÉ" !important;
        order: 1 !important;
        font-family: var(--svr-font-heading) !important;
        font-weight: 700 !important;
        font-size: 1.45rem !important;
        letter-spacing: 0.08em !important;
        color: var(--svr-color-text-dark) !important;
        margin: 0 !important;
        margin-inline-start: 14px !important;
        margin-inline-end: auto !important;
        pointer-events: none !important;
        display: inline-flex !important;
        align-items: center !important;
        height: 42px !important;
        line-height: 1 !important;
    }

    /* 4. Hamburger Trigger button (Squircle with Gold Dot) */
    .svr-top-nav__hamburger {
        position: relative !important;
        order: 0 !important;
        width: 42px !important;
        height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important; /* Modern Squircle Shape */
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background: var(--svr-color-text-dark) !important;
        border: none !important;
        color: var(--svr-color-text-light) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    }
    
    /* Gold notification dot positioned at the top-right corner of the squircle */
    .svr-top-nav__hamburger::after {
        content: "" !important;
        position: absolute !important;
        top: -2px !important;
        right: -2px !important;
        width: 10px !important;
        height: 10px !important;
        background-color: var(--svr-color-accent-gold) !important;
        border-radius: 50% !important;
        border: 2px solid #fbf9f4 !important; /* Blends with header background */
        box-shadow: none !important;
        display: block !important;
        z-index: 10 !important;
    }

    /* 5. Action Buttons (Login, Register, Submit CTA - Squircles) */
    .svr-top-nav__auth-btn,
    .svr-top-nav__submit-btn {
        width: 42px !important;
        height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important; /* Modern Squircle Shape */
        padding: 0 !important;
        box-sizing: border-box !important;
        vertical-align: middle !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    }

    .svr-top-nav__auth-btn--dark {
        order: 2 !important;
        margin: 0 0 0 10px !important;
        background: var(--svr-color-text-dark) !important;
        border: none !important;
        color: var(--svr-color-text-light) !important;
    }

    .svr-top-nav__auth-btn--outline {
        order: 3 !important;
        margin: 0 0 0 10px !important;
        background: transparent !important;
        border: 1.5px solid color-mix(in srgb, var(--svr-color-text-dark) 18%, transparent) !important;
        color: var(--svr-color-text-dark) !important;
        box-shadow: none !important;
    }

    .svr-top-nav__submit-btn {
        order: 4 !important;
        margin: 0 0 0 10px !important;
        background: var(--svr-color-accent-gold) !important;
        border: none !important;
        color: var(--svr-color-text-dark) !important;
        box-shadow: 0 4px 14px color-mix(in srgb, var(--svr-color-accent-gold) 35%, transparent) !important;
    }

    /* Hide text labels entirely */
    .svr-top-nav__auth-btn span,
    .svr-top-nav__submit-btn span {
        display: none !important;
    }

    /* Centered Icons */
    .svr-top-nav__auth-btn i,
    .svr-top-nav__submit-btn i {
        font-size: 0.9rem !important;
        margin: 0 !important;
    }

    /* 6. White Search Input Bar with soft shadow */
    .svr-top-nav__search {
        order: 5 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        margin: 0 !important;
        margin-block-start: 14px !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        height: 44px !important;
        padding-inline: 18px !important;
        background: #ffffff !important; /* Pure white search container */
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
        border-radius: var(--svr-radius-pill) !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03) !important;
    }

    .svr-top-nav__search-icon {
        color: var(--svr-color-accent-gold) !important;
        font-size: 0.95rem !important;
        margin: 0 !important;
    }

    .svr-top-nav__search-input {
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.9rem !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
    }

    .svr-top-nav__search-filter {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        margin: 0 !important;
        color: color-mix(in srgb, var(--svr-color-text-dark) 45%, transparent) !important;
        font-size: 0.95rem !important;
        background: none !important;
        border: none !important;
    }
}

/* Extra Small mobile viewport scaling */
@media (max-width: 420px) {
    .svr-top-nav--minimal {
        padding-inline: 12px !important;
        padding-block-start: 12px !important;
        padding-block-end: 16px !important;
        border-radius: 0 0 24px 24px !important;
    }

    .svr-top-nav__floating-actions::before {
        font-size: 1.25rem !important;
        margin-inline-start: 8px !important;
        height: 38px !important;
    }

    .svr-top-nav__hamburger,
    .svr-top-nav__auth-btn,
    .svr-top-nav__submit-btn {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
    }
    
    .svr-top-nav__hamburger::after {
        top: -1px !important;
        right: -1px !important;
        width: 8px !important;
        height: 8px !important;
    }

    .svr-top-nav__auth-btn--dark {
        margin: 0 0 0 8px !important;
    }

    .svr-top-nav__auth-btn--outline {
        margin: 0 0 0 8px !important;
    }

    .svr-top-nav__submit-btn {
        margin: 0 0 0 8px !important;
    }
    
    .svr-top-nav__search {
        height: 40px !important;
        margin-block-start: 10px !important;
        padding-inline: 14px !important;
    }
}


/* ==========================================================================
   TFT-RESPONSIVE: CLICKABLE MOBILE LOGO STYLING (APPEND ONLY)
   ========================================================================== */

@media (max-width: 768px) {
    /* Hide the old static text pseudo-element logo */
    .svr-top-nav__floating-actions::before {
        display: none !important;
        content: none !important;
    }

    /* Style the new clickable link logo */
    .svr-top-nav__mob-logo {
        order: 1 !important;
        font-family: var(--svr-font-heading) !important;
        font-weight: 700 !important;
        font-size: 1.45rem !important;
        letter-spacing: 0.08em !important;
        color: var(--svr-color-text-dark) !important;
        margin: 0 !important;
        margin-inline-start: 14px !important;
        margin-inline-end: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        height: 42px !important;
        line-height: 1 !important;
        text-decoration: none !important;
        transition: opacity 0.2s ease !important;
    }

    .svr-top-nav__mob-logo:hover,
    .svr-top-nav__mob-logo:active {
        opacity: 0.85 !important;
        color: var(--svr-color-accent-gold) !important;
    }
}

@media (max-width: 420px) {
    .svr-top-nav__mob-logo {
        font-size: 1.25rem !important;
        margin-inline-start: 8px !important;
        height: 38px !important;
    }
}


/* ==========================================================================
   TFT-RESPONSIVE: PREMIUM DESKTOP & MOBILE NAV MENU OVERHAUL
   ========================================================================== */

/* 1. Global Gold Gradient Icon styling */
.svr-sidebar .svr-nav-accordion summary i:first-child,
.svr-sidebar .svr-nav__link i:first-child,
.svr-mob-drawer__accordion summary i:first-child,
.svr-mob-drawer__link i:first-child {
    background: linear-gradient(135deg, #ffe082 0%, #e2b43b 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block !important;
}

/* 2. Desktop Sidebar Navigation Item Squircles */
.svr-sidebar .svr-nav {
    position: relative !important;
    z-index: 1 !important;
    gap: 8px !important;
}

.svr-sidebar .svr-nav__link,
.svr-sidebar .svr-nav-accordion summary {
    display: flex !important;
    align-items: center !important;
    height: 52px !important;
    padding-inline: 18px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: rgba(255, 255, 255, 0.015) !important;
    margin-bottom: 8px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease !important;
    cursor: pointer !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

.svr-sidebar .svr-nav-accordion summary::-webkit-details-marker {
    display: none !important;
}

.svr-sidebar .svr-nav__link i:first-child,
.svr-sidebar .svr-nav-accordion summary i:first-child {
    margin-right: 14px !important;
    width: 20px !important;
    text-align: center !important;
    font-size: 1.15rem !important;
}

/* Hide duplicate HTML chevrons in desktop sidebar to prevent double arrows */
.svr-sidebar .svr-nav-accordion summary i.fa-chevron-right {
    display: none !important;
}

/* CSS-generated chevron positioning and rotations on desktop */
.svr-sidebar .svr-nav-accordion summary::after {
    content: "\f054" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    margin-inline-start: auto !important;
    font-size: 0.7rem !important;
    color: rgba(255, 255, 255, 0.3) !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
}

.svr-sidebar .svr-nav-accordion[open] > summary::after {
    transform: rotate(90deg) !important;
    color: var(--svr-color-accent-gold) !important;
}

/* Hover and Active squircle states on desktop */
.svr-sidebar .svr-nav__link--active,
.svr-sidebar .svr-nav__link:hover:not(.svr-nav__link--active),
.svr-sidebar .svr-nav-accordion summary:hover,
.svr-sidebar .svr-nav-accordion[open] > summary {
    border: 1.5px solid var(--svr-color-accent-gold) !important;
    background: radial-gradient(circle at 10% 50%, rgba(226, 180, 59, 0.12), rgba(0, 0, 0, 0.1) 80%), rgba(255, 255, 255, 0.03) !important;
    box-shadow: 0 4px 15px rgba(226, 180, 59, 0.1) !important;
    color: #ffffff !important;
}

.svr-sidebar .svr-nav__link--active::after,
.svr-sidebar .svr-nav__link:hover:not(.svr-nav__link--active)::after,
.svr-sidebar .svr-nav-accordion summary:hover::after,
.svr-sidebar .svr-nav-accordion[open] > summary::after {
    color: var(--svr-color-accent-gold) !important;
}

/* Desktop Submenus styling */
.svr-sidebar .svr-nav-accordion__content {
    padding-left: 20px !important;
    background: transparent !important;
    border-left: 1px solid rgba(226, 180, 59, 0.2) !important;
    margin-left: 27px !important;
    margin-top: 4px !important;
    margin-bottom: 12px !important;
}

.svr-sidebar .svr-nav-accordion__link {
    display: block !important;
    padding: 8px 12px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.88rem !important;
    transition: color 0.2s ease !important;
}

.svr-sidebar .svr-nav-accordion__link::before {
    display: none !important; /* Hide old dots */
}

.svr-sidebar .svr-nav-accordion__link:hover {
    color: var(--svr-color-accent-gold) !important;
}

/* Desktop Sidebar Nav Divider with central star (CSS gradient trick) */
.svr-sidebar .svr-nav::after {
    content: "\2726" !important; /* Elegant 4-point diamond star (Unicode U+2726) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-block-start: 35px !important;
    margin-block-end: 20px !important;
    color: var(--svr-color-accent-gold) !important;
    font-size: 0.85rem !important;
    text-shadow: 0 0 10px rgba(226, 180, 59, 0.5) !important;
    background: 
        linear-gradient(to right, transparent, rgba(226, 180, 59, 0.45)) no-repeat left center / calc(50% - 20px) 1px,
        linear-gradient(to right, rgba(226, 180, 59, 0.45), transparent) no-repeat right center / calc(50% - 20px) 1px !important;
    width: 100% !important;
    height: 20px !important;
    line-height: 20px !important;
    box-sizing: border-box !important;
}

/* 3. Divider line with central star under Desktop Sidebar Logo */
.svr-sidebar .svr-logo > div {
    margin-bottom: 15px !important;
}

.svr-sidebar .svr-logo::after {
    content: "\2726" !important; /* Elegant 4-point diamond star */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-block-start: 15px !important;
    margin-block-end: 5px !important;
    color: var(--svr-color-accent-gold) !important;
    font-size: 0.85rem !important;
    text-shadow: 0 0 10px rgba(226, 180, 59, 0.5) !important;
    background: 
        linear-gradient(to right, transparent, rgba(226, 180, 59, 0.45)) no-repeat left center / calc(50% - 20px) 1px,
        linear-gradient(to right, rgba(226, 180, 59, 0.45), transparent) no-repeat right center / calc(50% - 20px) 1px !important;
    width: 100% !important;
    height: 20px !important;
    line-height: 20px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}


/* 4. Mobile Navigation Drawer Refinement */
.svr-mob-drawer {
    background-color: #0d0d0d !important; /* Rich charcoal black */
    background-image: radial-gradient(circle at 0% 0%, rgba(226, 180, 59, 0.1), transparent 50%) !important; /* Gold aura */
    border-radius: 0 35px 35px 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding-inline: 20px !important;
    box-sizing: border-box !important;
}

/* Header & Centered Medallion Logo */
.svr-mob-drawer__header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 40px !important;
    padding-bottom: 25px !important;
    position: relative !important;
    border-bottom: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.svr-mob-drawer__close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
    z-index: 10 !important;
}

.svr-mob-drawer__close:hover {
    background: var(--svr-color-accent-gold) !important;
    color: #000000 !important;
    transform: scale(1.05) !important;
}

.svr-mob-drawer__medallion {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}

.svr-mob-drawer__medallion-circle {
    width: 86px !important;
    height: 86px !important;
    border-radius: 50% !important;
    border: 2.5px solid var(--svr-color-accent-gold) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
    background: rgba(226, 180, 59, 0.03) !important;
    box-shadow: 0 0 20px rgba(226, 180, 59, 0.15) !important;
}

.svr-mob-drawer__logo-text {
    font-family: var(--svr-font-heading) !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    color: var(--svr-color-accent-gold) !important;
    line-height: 1 !important;
    margin-bottom: 12px !important;
}

.svr-mob-drawer__logo-divider {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 140px !important;
}

.svr-mob-drawer__divider-line {
    flex: 1 !important;
    height: 1px !important;
    background: linear-gradient(to right, transparent, rgba(226, 180, 59, 0.4), transparent) !important;
}

.svr-mob-drawer__divider-star {
    color: var(--svr-color-accent-gold) !important;
    font-size: 0.65rem !important;
}

/* Nav items squircles inside Mobile Drawer */
.svr-mob-drawer__nav {
    display: flex !important;
    flex-direction: column !important;
    padding-block-start: 10px !important;
    padding-block-end: 20px !important;
}

.svr-mob-drawer__accordion,
.svr-mob-drawer__link {
    border: none !important;
    margin-bottom: 0 !important;
}

.svr-mob-drawer__accordion summary,
.svr-mob-drawer__link {
    display: flex !important;
    align-items: center !important;
    height: 52px !important;
    padding-inline: 18px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: rgba(255, 255, 255, 0.015) !important;
    margin-bottom: 8px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease !important;
    cursor: pointer !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

.svr-mob-drawer__accordion summary::-webkit-details-marker {
    display: none !important;
}

.svr-mob-drawer__accordion summary i:first-child,
.svr-mob-drawer__link i:first-child {
    margin-right: 14px !important;
    width: 20px !important;
    text-align: center !important;
    font-size: 1.15rem !important;
}

.svr-mob-drawer__chevron {
    margin-inline-start: auto !important;
    font-size: 0.7rem !important;
    color: rgba(255, 255, 255, 0.3) !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
}

.svr-mob-drawer__accordion[open] > summary .svr-mob-drawer__chevron {
    transform: rotate(90deg) !important;
    color: var(--svr-color-accent-gold) !important;
}

/* Hover and Active squircle states inside Mobile Drawer */
.svr-mob-drawer__accordion summary:hover,
.svr-mob-drawer__accordion[open] > summary,
.svr-mob-drawer__link:hover {
    border: 1.5px solid var(--svr-color-accent-gold) !important;
    background: radial-gradient(circle at 10% 50%, rgba(226, 180, 59, 0.12), rgba(0, 0, 0, 0.1) 80%), rgba(255, 255, 255, 0.03) !important;
    box-shadow: 0 4px 15px rgba(226, 180, 59, 0.1) !important;
    color: #ffffff !important;
}

.svr-mob-drawer__accordion summary:hover .svr-mob-drawer__chevron,
.svr-mob-drawer__accordion[open] > summary .svr-mob-drawer__chevron,
.svr-mob-drawer__link:hover .svr-mob-drawer__chevron {
    color: var(--svr-color-accent-gold) !important;
}

/* Mobile Drawer Submenus styling */
.svr-mob-drawer__submenu {
    padding-left: 20px !important;
    background: transparent !important;
    border-left: 1px solid rgba(226, 180, 59, 0.2) !important;
    margin-left: 27px !important;
    margin-top: 4px !important;
    margin-bottom: 12px !important;
}

.svr-mob-drawer__submenu a {
    display: block !important;
    padding: 8px 12px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.88rem !important;
    transition: color 0.2s ease !important;
}

.svr-mob-drawer__submenu a:hover {
    color: var(--svr-color-accent-gold) !important;
    background: transparent !important;
}

/* Mobile Drawer Divider line with star */
.svr-mob-drawer__nav-divider {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-block-start: 25px !important;
    margin-block-end: 15px !important;
    color: var(--svr-color-accent-gold) !important;
    font-size: 0.85rem !important;
    text-shadow: 0 0 10px rgba(226, 180, 59, 0.5) !important;
    background: 
        linear-gradient(to right, transparent, rgba(226, 180, 59, 0.45)) no-repeat left center / calc(50% - 20px) 1px,
        linear-gradient(to right, rgba(226, 180, 59, 0.45), transparent) no-repeat right center / calc(50% - 20px) 1px !important;
    width: 100% !important;
    height: 20px !important;
    line-height: 20px !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* Premium Profile Widget at the bottom of the drawer */
.svr-mob-drawer__profile-container {
    padding-top: 15px !important;
    padding-bottom: 25px !important;
    margin-top: auto !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.svr-mob-drawer__profile {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 18px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: rgba(255, 255, 255, 0.01) !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.svr-mob-drawer__profile:hover {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(226, 180, 59, 0.3) !important;
}

/* Circular elements inside Mobile Drawer Profile */
.svr-mob-drawer__profile-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1.5px solid var(--svr-color-accent-gold) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: #000000 !important;
    box-sizing: border-box !important;
}

.svr-mob-drawer__profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.svr-mob-drawer__profile-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.svr-mob-drawer__profile-info strong {
    font-family: var(--svr-font-heading) !important;
    color: var(--svr-color-accent-gold) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

.svr-mob-drawer__profile-info span {
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.4) !important;
    margin-top: 2px !important;
}

.svr-mob-drawer__profile-arrow {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--svr-color-accent-gold) !important;
    font-size: 0.75rem !important;
    transition: all 0.25s ease !important;
}

.svr-mob-drawer__profile:hover .svr-mob-drawer__profile-arrow {
    background: var(--svr-color-accent-gold) !important;
    color: #000000 !important;
    transform: none !important;
}


/* 5. Metallic Gold Gradient on Logo Symbol and Brand Text */
.svr-logo i,
.svr-logo span:first-of-type,
.svr-mob-drawer__medallion-circle i,
.svr-mob-drawer__logo-text {
    background: linear-gradient(135deg, #ffe082 0%, #e2b43b 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block !important;
}

/* ==========================================================================
   TFT-RESPONSIVE: DESKTOP & MOBILE PROFILE CARD EGG SHAPES
   ========================================================================== */

/* Apply circular shape to both desktop sidebar and mobile drawer avatars */
.svr-profile-widget .svr-profile-widget__img,
.svr-mob-drawer__profile-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1.5px solid var(--svr-color-accent-gold) !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: #000000 !important;
    box-sizing: border-box !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

.svr-profile-widget .svr-profile-widget__img img,
.svr-mob-drawer__profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Apply circular button to both desktop sidebar and mobile drawer chevrons */
.svr-profile-widget i.fa-chevron-right,
.svr-mob-drawer__profile-arrow {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--svr-color-accent-gold) !important;
    font-size: 0.75rem !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* Hover and active states for the profile card buttons */
.svr-profile-widget:hover i.fa-chevron-right,
.svr-mob-drawer__profile:hover .svr-mob-drawer__profile-arrow {
    background: var(--svr-color-accent-gold) !important;
    color: #000000 !important;
    transform: none !important;
}


/* ==========================================================================
   TFT-RESPONSIVE: HIGH-FIDELITY MOBILE HEADER UPDATE (100% MATCH TO CROP 2)
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Hamburger button gold border and gold icon */
    .svr-top-nav__hamburger {
        border: 1.5px solid var(--svr-color-accent-gold) !important;
        color: var(--svr-color-accent-gold) !important;
        background: var(--svr-color-text-dark) !important;
    }

    /* 2. Brand Logo styling with Two Lines */
    .svr-top-nav__mob-logo {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 0 !important;
        margin: 0 !important;
        margin-inline-start: 14px !important;
        margin-inline-end: auto !important;
        height: 42px !important;
        line-height: 1.1 !important;
        text-decoration: none !important;
    }

    .svr-top-nav__mob-logo-title {
        font-family: var(--svr-font-heading) !important;
        font-weight: 700 !important;
        font-size: 1.35rem !important;
        letter-spacing: 0.08em !important;
        line-height: 1 !important;
        background: linear-gradient(135deg, #ffe082 0%, #e2b43b 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        display: inline-block !important;
    }

    .svr-top-nav__mob-logo-sub {
        font-size: 0.5rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.22em !important;
        color: var(--svr-color-accent-gold) !important;
        text-transform: uppercase !important;
        display: block !important;
        margin-top: 1px !important;
        line-height: 1 !important;
    }

    /* 3. Action buttons (Login, Register, Submit CTA) */
    .svr-top-nav__auth-btn--dark {
        background: var(--svr-color-text-dark) !important;
        border: 1.5px solid rgba(226, 180, 59, 0.25) !important;
        color: var(--svr-color-accent-gold) !important;
    }
    
    .svr-top-nav__auth-btn--dark i {
        background: linear-gradient(135deg, #ffe082 0%, #e2b43b 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        display: inline-block !important;
    }

    .svr-top-nav__auth-btn--outline {
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        color: var(--svr-color-text-dark) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    }

    .svr-top-nav__auth-btn--outline i {
        color: var(--svr-color-text-dark) !important;
    }

    .svr-top-nav__submit-btn {
        background: var(--svr-color-accent-gold) !important;
        border: none !important;
        color: var(--svr-color-text-dark) !important;
    }

    .svr-top-nav__submit-btn i {
        color: var(--svr-color-text-dark) !important;
    }
}

@media (max-width: 420px) {
    .svr-top-nav__mob-logo {
        margin-inline-start: 8px !important;
        height: 38px !important;
    }
    .svr-top-nav__mob-logo-title {
        font-size: 1.15rem !important;
    }
    .svr-top-nav__mob-logo-sub {
        font-size: 0.45rem !important;
        letter-spacing: 0.18em !important;
    }
}


/* ==========================================================================
   TFT-RESPONSIVE: SAFARI MOBILE CLIPPING FIX FOR EGG SHAPES
   ========================================================================== */

.svr-mob-drawer__profile-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
}

.svr-mob-drawer__profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.svr-mob-drawer__profile-arrow {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}


/* ==========================================================================
   TFT-RESPONSIVE: PROFILE CARD CIRCLES FOR DESKTOP & MOBILE
   ========================================================================== */

/* Force avatars to be perfect circles */
.svr-profile-widget .svr-profile-widget__img,
.svr-mob-drawer__profile-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1.5px solid var(--svr-color-accent-gold) !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: #000000 !important;
    box-sizing: border-box !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
}

.svr-profile-widget .svr-profile-widget__img img,
.svr-mob-drawer__profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Force chevron buttons to be perfect circles */
.svr-profile-widget i.fa-chevron-right,
.svr-mob-drawer__profile-arrow {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--svr-color-accent-gold) !important;
    font-size: 0.75rem !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* Hover and active states for the profile card buttons */
.svr-profile-widget:hover i.fa-chevron-right,
.svr-mob-drawer__profile:hover .svr-mob-drawer__profile-arrow {
    background: var(--svr-color-accent-gold) !important;
    color: #000000 !important;
    transform: none !important;
}


/* ==========================================================================
   TFT-RESPONSIVE: HIGH-FIDELITY MOBILE HEADER UPDATE (100% PARITY TO MOCKUP)
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Hamburger button: Gold border, gold dot, and gold gradient icon bars */
    .svr-top-nav__hamburger {
        position: relative !important;
        border: 1.5px solid var(--svr-color-accent-gold) !important;
        background: #111111 !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16) !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        padding: 0 !important;
    }

    .svr-top-nav__hamburger i {
        background: linear-gradient(135deg, #ffe082 0%, #e2b43b 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        display: inline-block !important;
        font-size: 1.05rem !important;
    }

    /* Small gold dot on the top right of the hamburger */
    .svr-top-nav__hamburger::after {
        content: "" !important;
        position: absolute !important;
        top: -3px !important;
        right: -3px !important;
        width: 8px !important;
        height: 8px !important;
        background: linear-gradient(135deg, #ffd54f 0%, #e2b43b 100%) !important;
        border-radius: 50% !important;
        border: 1px solid #fcf9f4 !important;
        box-shadow: 0 0 5px rgba(226, 180, 59, 0.7) !important;
        z-index: 2 !important;
    }

    /* 2. Brand Logo: Dark Serif title with gold tagline stacked underneath */
    .svr-top-nav__mob-logo {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 0 !important;
        margin: 0 !important;
        margin-inline-start: 14px !important;
        margin-inline-end: auto !important;
        height: 42px !important;
        line-height: 1.1 !important;
        text-decoration: none !important;
    }

    .svr-top-nav__mob-logo-title {
        font-family: var(--svr-font-heading) !important;
        font-weight: 700 !important;
        font-size: 1.35rem !important;
        letter-spacing: 0.06em !important;
        line-height: 1 !important;
        color: #1a1a1a !important; /* Rich Dark Charcoal from mockup */
        background: none !important;
        -webkit-background-clip: initial !important;
        -webkit-text-fill-color: initial !important;
        display: inline-block !important;
    }

    .svr-top-nav__mob-logo-sub {
        font-size: 0.52rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.18em !important;
        color: var(--svr-color-accent-gold) !important; /* Gold stacked subtitle */
        text-transform: uppercase !important;
        display: block !important;
        margin-top: 2px !important;
        line-height: 1 !important;
    }

    /* 3. Dark Login squircle: Gold border, gold gradient icon, shadow */
    .svr-top-nav__auth-btn--dark {
        background: #111111 !important;
        border: 1.5px solid rgba(226, 180, 59, 0.3) !important;
        color: var(--svr-color-accent-gold) !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16) !important;
        transition: all 0.2s ease !important;
        margin: 0 0 0 8px !important;
    }

    .svr-top-nav__auth-btn--dark i {
        background: linear-gradient(135deg, #ffe082 0%, #e2b43b 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        display: inline-block !important;
        font-size: 1.05rem !important;
    }

    /* Hide text labels inside squircles on mobile nav bar */
    .svr-top-nav__auth-btn span,
    .svr-top-nav__submit-btn span {
        display: none !important;
    }

    /* 4. White Register squircle: Subtle border and shadow */
    .svr-top-nav__auth-btn--outline {
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        color: #111111 !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05) !important;
        transition: all 0.2s ease !important;
        margin: 0 0 0 8px !important;
    }

    .svr-top-nav__auth-btn--outline i {
        color: #111111 !important;
        font-size: 1.05rem !important;
    }

    /* 5. Gold Submit CTA squircle: Gold gradient background, dark icon, shadow */
    .svr-top-nav__submit-btn {
        background: linear-gradient(135deg, #ffe082 0%, #e2b43b 100%) !important;
        border: none !important;
        color: #111111 !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 6px 16px rgba(226, 180, 59, 0.25) !important;
        transition: all 0.2s ease !important;
        margin: 0 0 0 8px !important;
    }

    .svr-top-nav__submit-btn i {
        color: #111111 !important;
        font-size: 1.05rem !important;
    }
}

@media (max-width: 420px) {
    .svr-top-nav__mob-logo {
        margin-inline-start: 10px !important;
    }
    .svr-top-nav__mob-logo-title {
        font-size: 1.2rem !important;
    }
    .svr-top-nav__mob-logo-sub {
        font-size: 0.48rem !important;
        letter-spacing: 0.16em !important;
    }
}

/* TFT-RESPONSIVE: HIDE MOBILE LOGO ON DESKTOP & FIX RESPONSIVE GRID PADDINGS */
.svr-top-nav__mob-logo {
    display: none;
}

@media (max-width: 768px) {
    .svr-avant-home .svr-h2-utility-grid {
        padding-inline: 0 !important;
    }
    .svr-avant-home .svr-h2-plan-full {
        margin-inline: 0 !important;
    }
    .svr-hot-recipes {
        padding-inline: 0 !important;
    }
    .svr-browse-ingredients {
        padding: 24px 20px !important;
    }
    .svr-masterclass {
        padding: 24px 20px !important;
    }
    .svr-browse-ingredients__header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        width: 100% !important;
    }
    .svr-browse-ingredients__nav {
        align-self: flex-start !important;
        width: auto !important;
    }

    /* Fix Hero Stats Capsule cutoff on Mobile */
    .svr-h4-hero-stats.svr-premium-stats {
        padding: 8px 16px 8px 10px !important;
        gap: 15px !important;
        max-width: calc(100% - 10px) !important;
    }
    .svr-h4-hero-stats.svr-premium-stats .svr-stat-icon-box {
        width: 32px !important;
        height: 32px !important;
    }
    .svr-h4-hero-stats.svr-premium-stats .svr-stat-val {
        font-size: 1.15rem !important;
    }
    .svr-h4-hero-stats.svr-premium-stats .svr-stat-block {
        gap: 8px !important;
    }

    /* Fix Editorial Stats block cutoff on Mobile */
    .svr-h4-ed-stats {
        gap: 20px !important;
        flex-wrap: wrap !important;
        padding-bottom: 25px !important;
        margin-bottom: 25px !important;
    }

    /* Clean, centered footer bottom layout on Mobile */
    .svr-uf-bottom {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        gap: 20px !important;
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
    .svr-uf-legal {
        justify-content: center !important;
        gap: 15px !important;
        flex-wrap: wrap !important;
    }
    .svr-uf-legal a {
        font-size: 0.8rem !important;
    }
    .svr-uf-copy {
        font-size: 0.8rem !important;
        width: 100% !important;
        text-align: center !important;
    }
}

/* ==========================================================================
   TFT - ABOUT US PAGE STYLES (APPEND-ONLY)
   ========================================================================== */
.svr-about-experience {
    display: flex;
    flex-direction: column;
    background: var(--svr-color-bg-dark);
    color: var(--svr-color-text-light);
    overflow: hidden;
    position: relative;
    border-radius: 40px;
    margin: 0 30px 40px;
    box-shadow: 0 40px 100px color-mix(in srgb, var(--svr-color-sidebar) 60%, transparent);
    padding-bottom: 120px;
}

.svr-about-manifesto {
    padding: clamp(80px, 12vw, 180px) clamp(20px, 7vw, 100px);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 8vw, 100px);
    align-items: center;
}
.svr-about-manifesto__content {
    position: relative;
}
.svr-about-manifesto__eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--svr-color-accent-gold);
    margin-bottom: 30px;
    display: block;
    font-weight: 600;
}
.svr-about-manifesto__title {
    font-size: clamp(3rem, 7vw, 6rem);
    font-family: var(--svr-font-heading);
    line-height: 0.9;
    text-transform: uppercase;
    margin: 0 0 40px;
    letter-spacing: -0.02em;
}
.svr-about-manifesto__title-italic {
    font-family: 'Dancing Script', cursive;
    color: var(--svr-color-accent-gold);
    font-style: normal;
    text-transform: lowercase;
    font-size: 1.2em;
    display: block;
    margin: 10px 0;
}
.svr-about-manifesto__divider {
    width: 100px;
    height: 1px;
    background: color-mix(in srgb, var(--svr-color-accent-gold) 50%, transparent);
    margin-bottom: 40px;
}
.svr-about-manifesto__text {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: var(--svr-color-text-muted-dark);
    line-height: 2;
    max-width: 500px;
    font-weight: 300;
}
.svr-about-manifesto__image-container {
    position: relative;
    height: clamp(400px, 50vw, 700px);
    border-radius: 20px;
    overflow: hidden;
}
.svr-about-manifesto__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(20%) sepia(20%) contrast(1.1);
}
.svr-about-manifesto__image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--svr-color-sidebar) 80%, transparent), transparent);
}
.svr-about-manifesto__image-text {
    position: absolute;
    bottom: 40px;
    left: 40px;
    right: 40px;
    font-family: 'Dancing Script', cursive;
    color: var(--svr-color-accent-gold);
    font-size: clamp(1.8rem, 3vw, 3rem);
    margin: 0;
}

.svr-about-masters {
    padding: 0 clamp(20px, 7vw, 100px) clamp(60px, 10vw, 100px);
}
.svr-about-masters__eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--svr-color-text-light) 30%, transparent);
    margin-bottom: clamp(40px, 6vw, 80px);
    display: block;
    font-weight: 600;
    text-align: center;
}
.svr-about-masters__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 4vw, 40px);
}
.svr-about-masters__card {
    position: relative;
    height: clamp(500px, 60vw, 800px);
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.svr-about-masters__card:hover {
    transform: translateY(-20px);
}
.svr-about-masters__card--offset {
    margin-top: 80px;
}
.svr-about-masters__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}
.svr-about-masters__card:hover .svr-about-masters__card-img {
    filter: grayscale(0%);
}
.svr-about-masters__card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--svr-color-sidebar) 90%, transparent) 0%, transparent 60%);
}
.svr-about-masters__card-role {
    position: absolute;
    left: 30px;
    top: 40px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: color-mix(in srgb, var(--svr-color-text-light) 20%, transparent);
    font-size: 0.8rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
}
.svr-about-masters__card-info {
    position: absolute;
    bottom: 40px;
    left: 40px;
    right: 40px;
}
.svr-about-masters__card-title {
    font-family: var(--svr-font-heading);
    font-size: clamp(2rem, 3.5vw, 3.5rem);
    line-height: 1;
    text-transform: uppercase;
    margin: 0 0 10px;
    color: var(--svr-color-text-light);
}
.svr-about-masters__card-socials {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}
.svr-about-masters__card-socials a {
    color: var(--svr-color-accent-gold);
    font-size: 1.2rem;
    transition: color 0.3s ease;
}
.svr-about-masters__card-socials a:hover {
    color: var(--svr-color-text-light);
}

.svr-about-method {
    padding: clamp(60px, 10vw, 150px) clamp(20px, 7vw, 100px);
    border-top: 1px solid var(--svr-color-border-dark);
    margin-top: 50px;
}
.svr-about-method__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: clamp(60px, 8vw, 120px);
}
.svr-about-method__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(3rem, 6vw, 5rem);
    text-transform: uppercase;
    margin: 0;
    line-height: 0.9;
}
.svr-about-method__title-italic {
    font-family: 'Dancing Script', cursive;
    color: var(--svr-color-accent-gold);
    font-size: 1.2em;
    text-transform: lowercase;
}
.svr-about-method__header-desc {
    color: color-mix(in srgb, var(--svr-color-text-light) 50%, transparent);
    font-size: 1.2rem;
    max-width: 400px;
    text-align: right;
    margin: 0;
    line-height: 1.6;
}
.svr-about-method__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(40px, 6vw, 80px);
}
.svr-about-method__item {
    position: relative;
}
.svr-about-method__watermark {
    font-family: var(--svr-font-heading);
    font-size: clamp(8rem, 10vw, 12rem);
    color: var(--svr-color-card-dark);
    position: absolute;
    top: -100px;
    left: -20px;
    z-index: 0;
    line-height: 1;
    user-select: none;
    pointer-events: none;
}
.svr-about-method__content {
    position: relative;
    z-index: 1;
}
.svr-about-method__heading {
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--svr-color-accent-gold);
    margin-bottom: 20px;
}
.svr-about-method__text {
    color: var(--svr-color-text-muted-dark);
    line-height: 1.8;
    font-size: 1.1rem;
    font-weight: 300;
}

.svr-about-accolades {
    padding: clamp(50px, 8vw, 100px) clamp(20px, 5vw, 60px);
    background: var(--svr-color-sidebar);
    text-align: center;
    border-radius: 40px;
    margin: 40px;
}
.svr-about-accolades__star {
    color: var(--svr-color-accent-gold);
    font-size: 2rem;
    margin-bottom: 30px;
}
.svr-about-accolades__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    text-transform: uppercase;
    margin: 0 0 40px;
}
.svr-about-accolades__list {
    display: flex;
    justify-content: center;
    gap: clamp(30px, 6vw, 80px);
    flex-wrap: wrap;
    opacity: 0.6;
}
.svr-about-accolades__item {
    font-size: clamp(1rem, 2vw, 1.2rem);
    letter-spacing: 0.3em;
    font-weight: 300;
    text-transform: uppercase;
}

/* Responsive Media Queries for About Us Page */
@media (max-width: 992px) {
    .svr-about-masters__grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 30px !important;
    }
    .svr-about-masters__card--offset {
        margin-top: 0 !important;
    }
    .svr-about-masters__card {
        height: 600px !important;
    }
    .svr-about-method__header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
    }
    .svr-about-method__header-desc {
        text-align: left !important;
        max-width: 100% !important;
    }
    .svr-about-method__grid {
        grid-template-columns: 1fr !important;
        gap: 60px !important;
    }
}

@media (max-width: 768px) {
    .svr-about-experience {
        margin: 0 15px 40px !important;
        border-radius: 20px !important;
        padding-bottom: 60px !important;
    }
    .svr-about-manifesto {
        grid-template-columns: 1fr !important;
        padding: 40px 20px !important;
        gap: 40px !important;
    }
    .svr-about-manifesto__title {
        margin-bottom: 20px !important;
    }
    .svr-about-manifesto__divider {
        margin-bottom: 25px !important;
    }
    .svr-about-manifesto__image-container {
        height: 380px !important;
    }
    .svr-about-manifesto__image-text {
        bottom: 25px !important;
        left: 25px !important;
        right: 25px !important;
    }
    .svr-about-masters {
        padding: 0 20px 40px !important;
    }
    .svr-about-masters__grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    .svr-about-masters__card {
        height: 480px !important;
    }
    .svr-about-masters__card:hover {
        transform: none !important;
    }
    .svr-about-masters__card-info {
        bottom: 25px !important;
        left: 25px !important;
        right: 25px !important;
    }
    .svr-about-masters__card-title {
        font-size: 2.2rem !important;
    }
    .svr-about-method {
        padding: 50px 20px !important;
        margin-top: 30px !important;
    }
    .svr-about-method__watermark {
        top: -60px !important;
    }
    .svr-about-accolades {
        margin: 20px !important;
        border-radius: 20px !important;
        padding: 40px 20px !important;
    }
    .svr-about-accolades__list {
        flex-direction: column !important;
        gap: 20px !important;
    }
    .svr-about-accolades__title {
        margin-bottom: 30px !important;
    }
}

/* TFT-RESPONSIVE: Prevent experience wrapper from stacking directly against the sticky top nav on mobile devices */
@media (max-width: 768px) {
    .svr-about-experience {
        margin-block-start: 12px !important;
    }
}

/* TFT-RESPONSIVE: Increase top margin offset by 10px to prevent header collision */
@media (max-width: 768px) {
    .svr-about-experience {
        margin-block-start: 22px !important;
    }
}

/* ==========================================================================
   TFT - ABOUT ME PAGE STYLES (APPEND-ONLY)
   ========================================================================== */
.svr-avant-aboutme {
    display: flex;
    flex-direction: column;
    background: var(--svr-color-sidebar);
    color: var(--svr-color-text-light);
    overflow: hidden;
    position: relative;
    border-radius: 40px;
    margin: 0 30px 40px;
    box-shadow: 0 40px 100px color-mix(in srgb, var(--svr-color-sidebar) 60%, transparent);
}

.svr-about-me-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 80vh;
}

.svr-about-me-hero__content {
    flex: 1;
    min-width: 400px;
    padding: clamp(40px, 6vw, 100px);
    position: relative;
}

.svr-about-me-hero__eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--svr-color-accent-gold);
    margin-bottom: 20px;
    display: block;
    font-weight: 600;
}

.svr-about-me-hero__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 0.9;
    text-transform: uppercase;
    margin: 0 0 30px;
    letter-spacing: -0.02em;
}

.svr-about-me-hero__title-italic {
    font-family: 'Dancing Script', cursive;
    color: var(--svr-color-accent-gold);
    font-size: 1.2em;
    font-style: normal;
    text-transform: lowercase;
    display: block;
    margin-top: 10px;
}

.svr-about-me-hero__text {
    font-size: clamp(1.1rem, 2vw, 1.2rem);
    color: color-mix(in srgb, var(--svr-color-text-light) 70%, transparent);
    line-height: 1.8;
    font-weight: 300;
    max-width: 500px;
    margin-bottom: 40px;
}

.svr-about-me-hero__socials {
    display: flex;
    gap: 20px;
}

.svr-about-me-hero__social-link {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--svr-color-accent-gold) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--svr-color-accent-gold);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.svr-about-me-hero__social-link:hover {
    background-color: var(--svr-color-accent-gold);
    color: var(--svr-color-sidebar);
    border-color: var(--svr-color-accent-gold);
}

.svr-about-me-hero__image-wrapper {
    flex: 1;
    min-width: 400px;
    height: 80vh;
    position: relative;
}

.svr-about-me-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(20%) contrast(1.1);
}

.svr-about-me-hero__image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--svr-color-sidebar) 0%, transparent 20%);
}

.svr-about-me-philosophy {
    padding: clamp(50px, 8vw, 100px);
    border-top: 1px solid color-mix(in srgb, var(--svr-color-text-light) 5%, transparent);
    background: color-mix(in srgb, var(--svr-color-sidebar) 95%, white);
}

.svr-about-me-philosophy__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(30px, 5vw, 60px);
}

.svr-about-me-philosophy__icon {
    font-size: 2.5rem;
    color: var(--svr-color-accent-gold);
    margin-bottom: 20px;
    display: inline-block;
}

.svr-about-me-philosophy__title {
    font-size: 1.5rem;
    font-family: var(--svr-font-heading);
    text-transform: uppercase;
    margin-bottom: 15px;
    color: var(--svr-color-text-light);
}

.svr-about-me-philosophy__text {
    color: color-mix(in srgb, var(--svr-color-text-light) 60%, transparent);
    line-height: 1.7;
    font-weight: 300;
    font-size: 1rem;
}

.svr-about-me-spotlight {
    position: relative;
    padding: clamp(80px, 12vw, 150px) clamp(20px, 6vw, 100px);
    text-align: center;
    overflow: hidden;
}

.svr-about-me-spotlight__bg-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.svr-about-me-spotlight__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(5px) grayscale(50%) brightness(0.3);
}

.svr-about-me-spotlight__content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.svr-about-me-spotlight__eyebrow {
    font-family: 'Dancing Script', cursive;
    color: var(--svr-color-accent-gold);
    font-size: clamp(2rem, 4vw, 3rem);
    display: block;
    margin-bottom: 10px;
}

.svr-about-me-spotlight__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(2.5rem, 6vw, 5rem);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 30px;
}

.svr-about-me-spotlight__text {
    font-size: clamp(1.1rem, 2vw, 1.2rem);
    color: color-mix(in srgb, var(--svr-color-text-light) 80%, transparent);
    line-height: 1.8;
    font-weight: 300;
    margin-bottom: 40px;
}

.svr-about-me-spotlight__btn {
    display: inline-block;
    padding: 15px 40px;
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-sidebar);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 30px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    text-decoration: none;
}

.svr-about-me-spotlight__btn:hover {
    transform: scale(1.05);
    background-color: color-mix(in srgb, var(--svr-color-accent-gold) 85%, white);
}

/* ==========================================================================
   TFT - ABOUT ME RESPONSIVE OVERRIDES
   ========================================================================== */
@media (max-width: 992px) {
    .svr-about-me-philosophy__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .svr-about-me-hero__content {
        padding: 50px 40px;
    }
}

@media (max-width: 768px) {
    .svr-avant-aboutme {
        margin-block-start: 22px !important;
        margin-inline: 15px !important;
        margin-block-end: 40px !important;
        border-radius: 20px !important;
    }
    
    .svr-about-me-hero {
        flex-direction: column;
    }
    
    .svr-about-me-hero__content {
        min-width: 0;
        width: 100%;
        padding: 40px 20px;
    }
    
    .svr-about-me-hero__image-wrapper {
        min-width: 0;
        width: 100%;
        height: 50vh;
    }
    
    .svr-about-me-hero__image-overlay {
        background: linear-gradient(to bottom, var(--svr-color-sidebar) 0%, transparent 20%);
    }
    
    .svr-about-me-philosophy {
        padding: 40px 20px;
    }
    
    .svr-about-me-spotlight {
        padding: 80px 20px;
    }
}

@media (max-width: 480px) {
    .svr-about-me-hero__image-wrapper {
        height: 40vh;
    }
}

/* ==========================================================================
   TFT - SERVICES PAGE STYLES (APPEND-ONLY)
   ========================================================================== */
.svr-avant-services {
    display: flex;
    flex-direction: column;
    background: var(--svr-color-sidebar);
    color: var(--svr-color-text-light);
    overflow: hidden;
    position: relative;
    border-radius: 40px;
    margin: 0 30px 40px;
    box-shadow: 0 40px 100px color-mix(in srgb, var(--svr-color-sidebar) 60%, transparent);
    padding-bottom: 20px;
}

.svr-services-hero {
    padding: clamp(80px, 12vw, 150px) clamp(20px, 6vw, 100px) clamp(60px, 8vw, 100px);
    text-align: center;
    border-bottom: 1px solid color-mix(in srgb, var(--svr-color-text-light) 5%, transparent);
}

.svr-services-hero__eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--svr-color-accent-gold);
    margin-bottom: 30px;
    display: block;
    font-weight: 600;
}

.svr-services-hero__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 0.9;
    text-transform: uppercase;
    margin: 0 0 20px;
    letter-spacing: -0.02em;
}

.svr-services-hero__title-italic {
    font-family: 'Dancing Script', cursive;
    color: var(--svr-color-accent-gold);
    font-size: 1.2em;
    font-style: normal;
    text-transform: lowercase;
    display: inline-block;
    margin-top: 10px;
}

.svr-services-hero__text {
    font-size: clamp(1.1rem, 2vw, 1.2rem);
    color: color-mix(in srgb, var(--svr-color-text-light) 50%, transparent);
    line-height: 1.8;
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto;
}

.svr-services-list {
    display: flex;
    flex-direction: column;
}

.svr-service-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: clamp(40px, 6vw, 100px);
    border-bottom: 1px solid color-mix(in srgb, var(--svr-color-text-light) 5%, transparent);
    gap: clamp(40px, 6vw, 80px);
}

.svr-service-item--reverse {
    flex-direction: row-reverse;
}

.svr-service-item__content-col {
    flex: 1;
    min-width: 300px;
    position: relative;
}

.svr-service-item__watermark {
    font-family: var(--svr-font-heading);
    font-size: clamp(8rem, 12vw, 12rem);
    color: color-mix(in srgb, var(--svr-color-text-light) 3%, transparent);
    position: absolute;
    top: -80px;
    left: -40px;
    z-index: 0;
    line-height: 1;
    user-select: none;
    pointer-events: none;
}

.svr-service-item__body {
    position: relative;
    z-index: 1;
}

.svr-service-item__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 30px;
}

.svr-service-item__text {
    font-size: clamp(1rem, 2vw, 1.1rem);
    color: color-mix(in srgb, var(--svr-color-text-light) 70%, transparent);
    line-height: 1.8;
    font-weight: 300;
    margin-bottom: 40px;
}

.svr-service-item__link {
    color: var(--svr-color-accent-gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.svr-service-item__link:hover {
    transform: translateX(5px);
}

.svr-service-item__image-col {
    flex: 1;
    min-width: 300px;
    height: clamp(350px, 40vw, 500px);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.svr-service-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(50%);
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.5s ease;
}

.svr-service-item__image-col:hover .svr-service-item__img {
    transform: scale(1.05);
    filter: grayscale(0%);
}

.svr-services-cta {
    padding: clamp(50px, 8vw, 100px);
    text-align: center;
    background: color-mix(in srgb, var(--svr-color-sidebar) 90%, black);
    margin: 40px;
    border-radius: 30px;
}

.svr-services-cta__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    text-transform: uppercase;
    margin: 0 0 20px;
}

.svr-services-cta__text {
    font-size: clamp(1rem, 2vw, 1.1rem);
    color: color-mix(in srgb, var(--svr-color-text-light) 50%, transparent);
    font-weight: 300;
    margin-bottom: 40px;
}

.svr-services-cta__btn {
    display: inline-block;
    padding: 15px 40px;
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-sidebar);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 30px;
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.svr-services-cta__btn:hover {
    transform: scale(1.05);
    background-color: color-mix(in srgb, var(--svr-color-accent-gold) 85%, white);
}

/* ==========================================================================
   TFT - SERVICES RESPONSIVE OVERRIDES
   ========================================================================== */
@media (max-width: 992px) {
    .svr-service-item {
        padding: 60px 40px;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .svr-avant-services {
        margin-block-start: 22px !important;
        margin-inline: 15px !important;
        margin-block-end: 40px !important;
        border-radius: 20px !important;
    }
    
    .svr-services-hero {
        padding: 60px 20px 40px;
    }
    
    .svr-service-item {
        flex-direction: column !important;
        padding: 40px 20px;
        gap: 30px;
    }
    
    .svr-service-item__content-col,
    .svr-service-item__image-col {
        width: 100%;
        min-width: 0;
    }
    
    .svr-service-item__image-col {
        height: 300px;
    }
    
    .svr-service-item__watermark {
        top: -60px;
        left: -10px;
    }
    
    .svr-services-cta {
        margin: 20px;
        padding: 40px 20px;
        border-radius: 20px;
    }
}

/* ==========================================================================
   OUTSTANDING MOBILE LAYOUT RESPONSIVE REFINEMENTS (JUNE 2026)
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. My Account Responsive Clipping Fixes */
    .tft-account-content {
        padding-inline: 15px !important;
        padding-block: 20px !important;
    }
    
    .tft-welcome-title {
        font-size: clamp(1.8rem, 5vw, 2.5rem) !important;
        line-height: 1.2 !important;
        margin-block-end: 15px !important;
    }
    
    .tft-welcome-title em {
        font-size: clamp(1.5rem, 4vw, 2.2rem) !important;
    }

    /* 2. Blog Featured Post Mobile Text Compression Override */
    .tft-bfp-content {
        max-width: none !important;
        width: 100% !important;
        padding-inline: 20px !important;
        padding-block: 25px !important;
    }

    /* 3. Single Blog Post List & Text Clipping Fixes */
    .tft-sp-content ul,
    .tft-sp-content ol {
        padding-inline-start: 25px !important;
        margin-inline: 0 !important;
    }

    .tft-sp-content li {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        margin-block-end: 10px !important;
    }

    .tft-sp-content p,
    .tft-sp-content h2,
    .tft-sp-content h3,
    .tft-sp-content blockquote {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
}


/* ==========================================================================
   TFT - SEARCH DROPDOWN Z-INDEX ELEVATION FIX
   ========================================================================== */
.svr-top-nav,
[class*="svr-top-nav__floating"],
[class*="top-nav"] {
    position: relative !important;
    z-index: 9999 !important;
}

.svr-top-nav__search {
    position: relative !important;
    z-index: 99999 !important;
    isolation: isolate !important;
}

.tft-search-dropdown {
    z-index: 2147483647 !important;
    position: absolute !important;
}

.tft-search-suggestions-list {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}


/* ==========================================================================
   TFT - MOBILE DRAWER Z-INDEX OVERRIDE
   Ensuring mobile drawer overlay and panel render on top of the elevated header
   ========================================================================== */
.svr-mob-drawer__overlay {
    z-index: 100000 !important;
}

.svr-mob-drawer {
    z-index: 100001 !important;
}


/* ==========================================================================
   TFT - PREMIUM MOBILE DRAWER SUBMENU LINK HOVER INTERACTIONS
   ========================================================================== */

/* Base reset for submenu links -- ensure proper layer for pseudos */
.svr-mob-drawer__submenu a {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    padding-left: 12px !important; /* Start at 12px left padding, matching user design */
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Animated gold left border -- scales in from center */
.svr-mob-drawer__submenu a::before {
    content: '' !important;
    position: absolute !important;
    top: 4px !important;
    bottom: 4px !important;
    left: 0 !important; /* Sits exactly on the vertical border-left line */
    width: 2px !important;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--svr-color-accent-gold) 60%, transparent),
        var(--svr-color-accent-gold),
        color-mix(in srgb, var(--svr-color-accent-gold) 60%, transparent)
    ) !important;
    transform: scaleY(0) !important;
    transform-origin: center !important;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
    border-radius: 2px !important;
    z-index: 1 !important;
}

.svr-mob-drawer__submenu a:hover::before,
.svr-mob-drawer__submenu a:focus-visible::before {
    transform: scaleY(1) !important;
}

/* Gold arrow that slides in from right on hover */
.svr-mob-drawer__submenu a::after {
    content: '\2192' !important;
    position: absolute !important;
    inset-block-start: 50% !important;
    inset-inline-end: 18px !important;
    transform: translateY(-50%) translateX(8px) !important;
    opacity: 0 !important;
    color: var(--svr-color-accent-gold) !important;
    font-size: 0.8rem !important;
    transition:
        opacity 0.25s ease,
        transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
    pointer-events: none !important;
}

.svr-mob-drawer__submenu a:hover::after,
.svr-mob-drawer__submenu a:focus-visible::after {
    opacity: 1 !important;
    transform: translateY(-50%) translateX(0) !important;
}

/* The full hover state */
.svr-mob-drawer__submenu a:hover,
.svr-mob-drawer__submenu a:focus-visible {
    color: var(--svr-color-accent-gold) !important;
    padding-left: 22px !important; /* Shift right smoothly on hover */
    background: color-mix(in srgb, var(--svr-color-accent-gold) 8%, transparent) !important;
    letter-spacing: 0.025em !important;
    text-shadow: 0 0 20px color-mix(in srgb, var(--svr-color-accent-gold) 40%, transparent) !important;
}

/* Active/current page link -- always gold, always with border */
.svr-mob-drawer__submenu a.tft-mom-sub-link--active {
    color: var(--svr-color-accent-gold) !important;
    padding-left: 22px !important;
    background: color-mix(in srgb, var(--svr-color-accent-gold) 10%, transparent) !important;
}

.svr-mob-drawer__submenu a.tft-mom-sub-link--active::before {
    transform: scaleY(1) !important;
}

/* Stagger animation for submenu items when opening */
.svr-mob-drawer__accordion[open] .svr-mob-drawer__submenu a {
    animation: tftDrawerLinkFadeIn 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
    opacity: 0; /* Removed !important to allow animation keyframe to override */
}

.svr-mob-drawer__accordion[open] .svr-mob-drawer__submenu a:nth-child(1) { animation-delay: 0.04s !important; }
.svr-mob-drawer__accordion[open] .svr-mob-drawer__submenu a:nth-child(2) { animation-delay: 0.09s !important; }
.svr-mob-drawer__accordion[open] .svr-mob-drawer__submenu a:nth-child(3) { animation-delay: 0.14s !important; }
.svr-mob-drawer__accordion[open] .svr-mob-drawer__submenu a:nth-child(4) { animation-delay: 0.19s !important; }
.svr-mob-drawer__accordion[open] .svr-mob-drawer__submenu a:nth-child(5) { animation-delay: 0.24s !important; }
.svr-mob-drawer__accordion[open] .svr-mob-drawer__submenu a:nth-child(6) { animation-delay: 0.29s !important; }

@keyframes tftDrawerLinkFadeIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ==========================================================================
   TFT - DESKTOP SIDEBAR ACCORDION LINKS PREMIUM HOVER INTERACTIONS
   ========================================================================== */

.svr-sidebar .svr-nav-accordion__link {
    position: relative !important;
    padding-left: 12px !important; /* Base padding of desktop sidebar is 12px */
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Gold left-line indicator -- sits exactly on the border-left line */
.svr-sidebar .svr-nav-accordion__link::before {
    content: '' !important;
    display: block !important; /* Override display: none */
    position: absolute !important;
    top: 4px !important;
    bottom: 4px !important;
    left: 0 !important;
    width: 2px !important;
    background: var(--svr-color-accent-gold) !important;
    transform: scaleY(0) !important;
    transform-origin: center !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    border-radius: 2px !important;
}

.svr-sidebar .svr-nav-accordion__link:hover::before {
    transform: scaleY(1) !important;
}

/* Gold arrow sliding from the right */
.svr-sidebar .svr-nav-accordion__link::after {
    content: '\2192' !important;
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) translateX(8px) !important;
    opacity: 0 !important;
    color: var(--svr-color-accent-gold) !important;
    font-size: 0.75rem !important;
    transition: 
        opacity 0.25s ease,
        transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
    pointer-events: none !important;
}

.svr-sidebar .svr-nav-accordion__link:hover::after {
    opacity: 1 !important;
    transform: translateY(-50%) translateX(0) !important;
}

/* Hover state overrides */
.svr-sidebar .svr-nav-accordion__link:hover {
    color: var(--svr-color-accent-gold) !important;
    padding-left: 22px !important; /* Shift right smoothly on hover */
    background: color-mix(in srgb, var(--svr-color-accent-gold) 8%, transparent) !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 0 10px color-mix(in srgb, var(--svr-color-accent-gold) 30%, transparent) !important;
    transform: none !important; /* Override default translateX translation */
}


/* ==========================================================================
   TFT - RESPONSIVE MOBILE PROFILE EGG-SHAPE FIX
   Preventing flex: 1 from stretching avatar and arrow wrappers into ovals
   ========================================================================== */
.svr-mob-drawer__profile div {
    flex: none !important; /* Reset generic descendant selector */
}

.svr-mob-drawer__profile-info {
    flex: 1 !important; /* Only let the text container expand */
}

.svr-mob-drawer__profile-avatar,
.svr-mob-drawer__profile-arrow {
    flex: none !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    border-radius: 50% !important;
}

.svr-mob-drawer__profile-arrow {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    border-radius: 50% !important;
    background: var(--svr-color-border-dark) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.svr-mob-drawer__profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* ==========================================================================
   TFT - REDESIGNED ENTER COOK MODE BANNER (CREAM/GOLD THEME)
   ========================================================================== */
.svr-cmb-new {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(20px, 4vw, 40px) !important;
    background: radial-gradient(circle at 15% 50%, color-mix(in srgb, var(--svr-color-accent-gold) 4%, transparent) 0%, transparent 70%), var(--svr-color-bg-light) !important;
    border: 1px solid var(--svr-color-border-light) !important;
    border-radius: var(--svr-radius-lg) !important;
    padding: clamp(30px, 4vw, 45px) 70px clamp(30px, 4vw, 45px) clamp(30px, 4vw, 45px) !important;
    margin-block: 40px !important;
    overflow: visible !important; /* Allow hints to absolute hover slightly out */
    box-shadow: 0 10px 30px color-mix(in srgb, var(--svr-color-text-dark) 2%, transparent) !important;
    position: relative !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease, box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.svr-cmb-new:hover {
    transform: translateY(-4px) !important;
    border-color: var(--svr-color-accent-gold) !important;
    box-shadow: 
        0 15px 35px color-mix(in srgb, var(--svr-color-accent-gold) 15%, transparent),
        0 0 0 1px var(--svr-color-accent-gold) !important;
}

/* Image Container */
.svr-cmb-new__left {
    flex: none !important;
    width: clamp(200px, 25vw, 270px) !important;
    height: 190px !important;
    overflow: hidden !important;
    border-radius: var(--svr-radius-md) !important;
    border: 1px solid var(--svr-color-border-light) !important;
    box-shadow: inset 0 2px 8px color-mix(in srgb, var(--svr-color-text-dark) 5%, transparent) !important;
}

.svr-cmb-new__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.svr-cmb-new:hover .svr-cmb-new__img {
    transform: scale(1.05) !important;
}

/* Typography & Content Block */
.svr-cmb-new__middle {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.svr-cmb-new__subtitle {
    font-size: clamp(0.7rem, 1.5vw, 0.8rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    color: var(--svr-color-accent-gold) !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
}

.svr-cmb-new__title {
    font-family: var(--svr-font-heading) !important;
    font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important;
    font-weight: 600 !important;
    color: var(--svr-color-text-dark) !important;
    margin: 0 !important;
    line-height: 1.15 !important;
}

.tft-serif-highlight {
    font-family: var(--svr-font-heading) !important;
    font-style: italic !important;
    color: var(--svr-color-accent-gold) !important;
    font-weight: 400 !important;
}

/* Star-Line Divider */
.svr-cmb-new__divider {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-block: 10px !important;
}

.svr-cmb-new__divider::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: linear-gradient(to right, color-mix(in srgb, var(--svr-color-accent-gold) 35%, transparent), transparent) !important;
}

.svr-cmb-new__star {
    color: var(--svr-color-accent-gold) !important;
    font-size: 0.75rem !important;
    text-shadow: 0 0 8px color-mix(in srgb, var(--svr-color-accent-gold) 60%, transparent) !important;
}

.svr-cmb-new__desc {
    font-size: 0.88rem !important;
    color: var(--svr-color-text-muted-light) !important;
    margin-bottom: 16px !important;
    line-height: 1.5 !important;
}

/* Feature Badges */
.svr-cmb-new__pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.svr-cmb-new__pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    background: var(--svr-color-card-light) !important;
    border: 1px solid var(--svr-color-border-light) !important;
    border-radius: var(--svr-radius-pill) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: var(--svr-color-text-dark) !important;
    box-shadow: 0 2px 5px color-mix(in srgb, var(--svr-color-text-dark) 2%, transparent) !important;
    transition: all 0.25s ease !important;
}

.svr-cmb-new__pill i {
    color: var(--svr-color-accent-gold) !important;
    font-size: 0.7rem !important;
}

.svr-cmb-new__pill:hover {
    border-color: var(--svr-color-accent-gold) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--svr-color-accent-gold) 8%, transparent) !important;
}

/* Action Trigger Column */
.svr-cmb-new__right {
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    gap: clamp(15px, 3vw, 30px) !important;
}

.svr-cmb-new__separator {
    width: 1px !important;
    height: 100px !important;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--svr-color-text-dark) 8%, transparent), transparent) !important;
}

.svr-cmb-new__action-wrapper {
    position: relative !important;
}

.svr-cmb-new__action {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: center !important;
}

/* Big Gold Target Button */
.svr-cmb-new__btn {
    position: relative !important;
    width: clamp(70px, 8vw, 80px) !important;
    height: clamp(70px, 8vw, 80px) !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--svr-color-accent-gold) 20%, var(--svr-color-card-light)), var(--svr-color-accent-gold)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 
        0 8px 24px color-mix(in srgb, var(--svr-color-accent-gold) 35%, transparent),
        inset 0 2px 4px var(--svr-color-card-light) !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.svr-cmb-new__btn-icon {
    font-size: 1.4rem !important;
    color: var(--svr-color-text-dark) !important;
    transition: transform 0.4s ease !important;
}

/* Outer Pulsing Aura */
.svr-cmb-new__btn::after {
    content: '' !important;
    position: absolute !important;
    inset: -6px !important;
    border-radius: 50% !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-accent-gold) 35%, transparent) !important;
    animation: tftPulseBanner 2.5s infinite !important;
}

@keyframes tftPulseBanner {
    0% {
        transform: scale(0.98);
        opacity: 0.8;
    }
    70% {
        transform: scale(1.1);
        opacity: 0;
    }
    100% {
        transform: scale(0.98);
        opacity: 0;
    }
}

.svr-cmb-new__action:hover .svr-cmb-new__btn {
    transform: scale(1.06) !important;
    box-shadow: 
        0 12px 30px color-mix(in srgb, var(--svr-color-accent-gold) 45%, transparent),
        inset 0 2px 4px var(--svr-color-card-light) !important;
}

.svr-cmb-new__action:hover .svr-cmb-new__btn-icon {
    transform: rotate(90deg) !important;
}

.svr-cmb-new__btn-label {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.svr-cmb-new__btn-label strong {
    font-size: 0.8rem !important;
    letter-spacing: 0.08em !important;
    color: var(--svr-color-text-dark) !important;
}

.svr-cmb-new__btn-label span {
    font-size: 0.7rem !important;
    color: var(--svr-color-text-muted-light) !important;
    white-space: nowrap !important;
}

/* Arrow hint overlay */
.svr-cmb-new__hint {
    position: absolute !important;
    left: calc(50% + 42px) !important; /* Position just to the right of the centered button */
    top: -35px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Left-align components inside the hint container */
    color: var(--svr-color-text-muted-light) !important;
    pointer-events: none !important;
}

.svr-cmb-new__hint span {
    font-family: var(--svr-font-heading) !important;
    font-style: italic !important;
    font-size: 0.8rem !important;
    color: var(--svr-color-accent-gold) !important;
    white-space: nowrap !important;
    transform: rotate(8deg) !important;
}

.svr-cmb-new__hint-svg {
    color: var(--svr-color-accent-gold) !important;
    opacity: 0.75 !important;
    margin-block-start: 2px !important;
    transform: rotate(-10deg) !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN (FLUID BREAKPOINTS)
   ========================================================================== */
@media (max-width: 991px) {
    .svr-cmb-new {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 24px !important;
        gap: 20px !important;
    }
    
    .svr-cmb-new__left {
        width: 100% !important;
        height: 180px !important;
    }
    
    .svr-cmb-new__divider {
        justify-content: center !important;
    }
    
    .svr-cmb-new__divider::after {
        display: none !important;
    }
    
    .svr-cmb-new__pills {
        justify-content: center !important;
    }
    
    .svr-cmb-new__right {
        flex-direction: column !important;
        width: 100% !important;
        gap: 15px !important;
    }
    
    .svr-cmb-new__separator {
        width: 100% !important;
        height: 1px !important;
        background: linear-gradient(to right, transparent, color-mix(in srgb, var(--svr-color-text-dark) 8%, transparent), transparent) !important;
    }
    
    .svr-cmb-new__hint {
        display: none !important; /* Hide floating absolute arrows on mobile viewport bounds */
    }
}
/* Spacing Adjustment for Nutrition Widget at the bottom */
.svr-premium-nutrition {
    margin-block: 40px 50px !important;
}


/* ==========================================================================
   TFT - PREMIUM CULINARY REVIEWS & FEEDBACK STYLES
   ========================================================================== */
.tft-rv-wrapper {
    background: var(--svr-color-bg-light) !important;
    border: 1px solid var(--svr-color-border-light) !important;
}

/* Hero Section */
.tft-rv-hero {
    position: relative !important;
    height: clamp(180px, 20vw, 240px) !important;
    width: 100% !important;
    overflow: hidden !important;
}

.tft-rv-hero__bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

.tft-rv-hero__overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to right, rgba(20, 20, 20, 0.85) 0%, rgba(20, 20, 20, 0.4) 100%) !important;
}

.tft-rv-hero__content {
    position: absolute !important;
    inset-inline-start: clamp(20px, 4vw, 50px) !important;
    inset-block-end: clamp(20px, 3vw, 40px) !important;
    z-index: 2 !important;
    max-width: 600px !important;
    color: #ffffff !important;
}

.tft-rv-hero__title {
    font-family: var(--svr-font-heading) !important;
    font-size: clamp(2rem, 4vw, 2.8rem) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-block: 8px 12px !important;
    line-height: 1.15 !important;
}

.tft-rv-hero__desc {
    font-size: clamp(0.85rem, 1.6vw, 0.95rem) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

/* Badge Layout */
.tft-badge {
    display: inline-block !important;
    padding: 4px 10px !important;
    border-radius: var(--svr-radius-sm) !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
}

.tft-badge--gold {
    background: rgba(230, 185, 83, 0.15) !important;
    border: 1px solid var(--svr-color-accent-gold) !important;
    color: var(--svr-color-accent-gold) !important;
}

/* Body Content Padding */
.tft-rv-body {
    padding: clamp(20px, 4vw, 50px) !important;
}

/* Statistics Distribution Widget */
.tft-rv-stats-row {
    display: grid !important;
    grid-template-columns: 240px 1fr !important;
    gap: clamp(20px, 4vw, 50px) !important;
    background: color-mix(in srgb, var(--svr-color-border-light) 12%, transparent) !important;
    border: 1px solid var(--svr-color-border-light) !important;
    border-radius: var(--svr-radius-md) !important;
    padding: clamp(20px, 3vw, 35px) !important;
    margin-block-end: 45px !important;
}

.tft-rv-stat-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-inline-end: 1px solid var(--svr-color-border-light) !important;
    padding-inline-end: clamp(20px, 3vw, 50px) !important;
}

.tft-rv-stat-score h2 {
    font-family: var(--svr-font-heading) !important;
    font-size: 4rem !important;
    font-weight: 700 !important;
    color: var(--svr-color-text-dark) !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.tft-rv-stat-stars {
    color: var(--svr-color-accent-gold) !important;
    font-size: 1.1rem !important;
    margin-block: 8px !important;
    display: flex !important;
    gap: 4px !important;
    justify-content: center !important;
}

.tft-rv-stat-score span {
    font-size: 0.8rem !important;
    color: var(--svr-color-text-muted-light) !important;
}

.tft-rv-stat-bars {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 8px !important;
}

.tft-rv-bar-item {
    display: grid !important;
    grid-template-columns: 60px 1fr 40px !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 0.78rem !important;
    color: var(--svr-color-text-dark) !important;
}

.tft-rv-bar-track {
    height: 6px !important;
    background: color-mix(in srgb, var(--svr-color-text-dark) 8%, transparent) !important;
    border-radius: var(--svr-radius-pill) !important;
    overflow: hidden !important;
}

.tft-rv-bar-fill {
    height: 100% !important;
    background: var(--svr-color-accent-gold) !important;
    border-radius: var(--svr-radius-pill) !important;
}

/* Grid Layout Column Split */
.tft-rv-split {
    display: grid !important;
    grid-template-columns: 460px 1fr !important;
    gap: clamp(20px, 4vw, 50px) !important;
    align-items: start !important;
}

.tft-rv-card {
    background: var(--svr-color-card-light) !important;
    border: 1px solid var(--svr-color-border-light) !important;
    border-radius: var(--svr-radius-md) !important;
    padding: clamp(20px, 3vw, 35px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01) !important;
    position: relative !important;
}

.tft-rv-card__title {
    font-family: var(--svr-font-heading) !important;
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    color: var(--svr-color-text-dark) !important;
    margin-block: 0 6px !important;
}

.tft-rv-card__subtitle {
    font-size: 0.82rem !important;
    color: var(--svr-color-text-muted-light) !important;
    line-height: 1.45 !important;
    margin-block-end: 25px !important;
}

/* Interactive Form Styling */
.tft-rv-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}

.tft-rv-form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.tft-rv-form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
}

.tft-rv-label {
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--svr-color-text-dark) !important;
}

.tft-rv-input,
.tft-rv-select,
.tft-rv-textarea {
    width: 100% !important;
    padding: 11px 14px !important;
    font-size: 0.85rem !important;
    border: 1px solid var(--svr-color-border-light) !important;
    border-radius: var(--svr-radius-sm) !important;
    background: var(--svr-color-bg-light) !important;
    color: var(--svr-color-text-dark) !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.tft-rv-input:focus,
.tft-rv-select:focus,
.tft-rv-textarea:focus {
    outline: none !important;
    border-color: var(--svr-color-accent-gold) !important;
    box-shadow: 0 0 0 3px rgba(230, 185, 83, 0.08) !important;
}

.tft-rv-textarea {
    resize: vertical !important;
}

/* Interactive Star Rating Picker */
.tft-rv-star-picker {
    display: flex !important;
    gap: 8px !important;
    margin-block: 4px !important;
}

.tft-rv-picker-star {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-size: 1.4rem !important;
    color: color-mix(in srgb, var(--svr-color-text-dark) 15%, transparent) !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, color 0.15s ease !important;
}

.tft-rv-picker-star:hover {
    transform: scale(1.15) !important;
}

.tft-rv-picker-star.active {
    color: var(--svr-color-accent-gold) !important;
    text-shadow: 0 0 10px rgba(230, 185, 83, 0.25) !important;
}

/* Mock Image Upload Dragzone */
.tft-rv-upload-zone {
    border: 2px dashed var(--svr-color-border-light) !important;
    border-radius: var(--svr-radius-sm) !important;
    padding: 20px !important;
    background: color-mix(in srgb, var(--svr-color-border-light) 5%, transparent) !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

.tft-rv-upload-zone:hover,
.tft-rv-upload-zone.dragover {
    border-color: var(--svr-color-accent-gold) !important;
    background: rgba(230, 185, 83, 0.02) !important;
}

.tft-rv-upload-prompt {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--svr-color-text-muted-light) !important;
}

.tft-rv-upload-prompt i {
    font-size: 1.6rem !important;
    color: var(--svr-color-accent-gold) !important;
}

.tft-rv-upload-prompt span {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: var(--svr-color-text-dark) !important;
}

.tft-rv-upload-prompt small {
    font-size: 0.7rem !important;
}

.tft-rv-upload-preview {
    position: relative !important;
    display: inline-block !important;
    max-width: 100% !important;
    border-radius: var(--svr-radius-sm) !important;
    overflow: hidden !important;
}

.tft-rv-upload-preview img {
    max-height: 120px !important;
    display: block !important;
    border-radius: var(--svr-radius-sm) !important;
}

.tft-rv-remove-preview {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border: none !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.tft-rv-remove-preview:hover {
    background: rgba(0, 0, 0, 0.85) !important;
}

/* Submit Action Button */
.tft-rv-btn-submit {
    background: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-bg-dark) !important;
    border: none !important;
    border-radius: var(--svr-radius-sm) !important;
    padding: 13px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    box-shadow: 0 4px 15px rgba(230, 185, 83, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 10px !important;
}

.tft-rv-btn-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(230, 185, 83, 0.35) !important;
}

/* Validation Error Message Layout */
.tft-input-error {
    border-color: #e57373 !important;
    background: rgba(229, 115, 115, 0.02) !important;
}

.tft-error-msg {
    color: #d32f2f !important;
    font-size: 0.72rem !important;
    margin-top: 2px !important;
    font-weight: 500 !important;
}

/* Success Card View */
.tft-rv-success-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 30px 10px !important;
}

.tft-rv-success-card i {
    font-size: 3.5rem !important;
    color: #4caf50 !important;
    margin-block-end: 20px !important;
}

.tft-rv-success-card h3 {
    font-family: var(--svr-font-heading) !important;
    font-size: 1.8rem !important;
    color: var(--svr-color-text-dark) !important;
    margin-block: 0 10px !important;
}

.tft-rv-success-card p {
    font-size: 0.88rem !important;
    color: var(--svr-color-text-muted-light) !important;
    line-height: 1.5 !important;
    margin-block-end: 30px !important;
}

.tft-rv-btn-reset {
    background: none !important;
    border: 1px solid var(--svr-color-border-light) !important;
    color: var(--svr-color-text-dark) !important;
    padding: 10px 20px !important;
    border-radius: var(--svr-radius-pill) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.tft-rv-btn-reset:hover {
    border-color: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-accent-gold) !important;
}

/* Feed Column Controls */
.tft-rv-feed-controls {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    border-bottom: 1px solid var(--svr-color-border-light) !important;
    padding-bottom: 18px !important;
    margin-bottom: 25px !important;
}

.tft-rv-feed-filter-chips {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.tft-rv-filter-chip {
    background: var(--svr-color-card-light) !important;
    border: 1px solid var(--svr-color-border-light) !important;
    border-radius: var(--svr-radius-pill) !important;
    padding: 6px 14px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: var(--svr-color-text-dark) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.tft-rv-filter-chip i {
    font-size: 0.65rem !important;
    color: var(--svr-color-accent-gold) !important;
}

.tft-rv-filter-chip:hover {
    border-color: var(--svr-color-accent-gold) !important;
}

.tft-rv-filter-chip.active {
    background: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-bg-dark) !important;
    border-color: var(--svr-color-accent-gold) !important;
}

.tft-rv-filter-chip.active i {
    color: var(--svr-color-bg-dark) !important;
}

.tft-rv-select-sm {
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
    border: 1px solid var(--svr-color-border-light) !important;
    border-radius: var(--svr-radius-sm) !important;
    background: var(--svr-color-bg-light) !important;
    color: var(--svr-color-text-dark) !important;
    outline: none !important;
}

/* Reviews Feed Feed List */
.tft-rv-feed-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important;
}

.tft-rv-item {
    background: var(--svr-color-card-light) !important;
    border: 1px solid var(--svr-color-border-light) !important;
    border-radius: var(--svr-radius-md) !important;
    padding: 25px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.005) !important;
    transition: transform 0.2s ease !important;
}

.tft-rv-item:hover {
    transform: translateY(-2px) !important;
}

.tft-rv-item__header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    margin-bottom: 15px !important;
}

.tft-rv-item__user {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.tft-rv-item__avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 1px solid var(--svr-color-border-light) !important;
}

.tft-rv-item__user h4 {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: var(--svr-color-text-dark) !important;
    margin: 0 !important;
}

.tft-rv-item__meta {
    font-size: 0.72rem !important;
    color: var(--svr-color-text-muted-light) !important;
    display: block !important;
    margin-top: 2px !important;
}

.tft-rv-item__rating {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 4px !important;
}

.tft-rv-item__stars {
    color: var(--svr-color-accent-gold) !important;
    font-size: 0.85rem !important;
    display: flex !important;
    gap: 2px !important;
}

.tft-rv-item__tag {
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    color: var(--svr-color-accent-gold) !important;
    background: rgba(230, 185, 83, 0.06) !important;
    padding: 3px 8px !important;
    border-radius: var(--svr-radius-sm) !important;
}

.tft-rv-item__body h5 {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--svr-color-text-dark) !important;
    margin-block: 0 8px !important;
}

.tft-rv-item__body p {
    font-size: 0.84rem !important;
    color: var(--svr-color-text-muted-light) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

.tft-rv-item__attached-media {
    margin-block-start: 15px !important;
    border-radius: var(--svr-radius-sm) !important;
    overflow: hidden !important;
    max-width: 240px !important;
    border: 1px solid var(--svr-color-border-light) !important;
}

.tft-rv-item__photo {
    width: 100% !important;
    display: block !important;
    max-height: 160px !important;
    object-fit: cover !important;
}

.tft-rv-item__footer {
    display: flex !important;
    gap: 15px !important;
    margin-block-start: 18px !important;
    border-top: 1px solid color-mix(in srgb, var(--svr-color-border-light) 50%, transparent) !important;
    padding-block-start: 12px !important;
}

.tft-rv-btn-like,
.tft-rv-btn-reply {
    background: none !important;
    border: none !important;
    color: var(--svr-color-text-muted-light) !important;
    font-size: 0.74rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 0 !important;
    transition: color 0.2s ease !important;
}

.tft-rv-btn-like:hover,
.tft-rv-btn-like.liked {
    color: var(--svr-color-accent-gold) !important;
}

.tft-rv-btn-reply:hover {
    color: var(--svr-color-text-dark) !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN (REVIEWS ADAPTATION)
   ========================================================================== */
@media (max-width: 1199px) {
    .tft-rv-split {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
}

@media (max-width: 991px) {
    .tft-rv-wrapper {
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
    }
    
    .tft-rv-stats-row {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        text-align: center !important;
    }
    
    .tft-rv-stat-box {
        border-inline-end: none !important;
        border-block-end: 1px solid var(--svr-color-border-light) !important;
        padding-inline-end: 0 !important;
        padding-block-end: 25px !important;
    }
    
    .tft-rv-item__header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    
    .tft-rv-item__rating {
        align-items: flex-start !important;
    }
}

@media (max-width: 480px) {
    .tft-rv-form-row {
        grid-template-columns: 1fr !important;
    }
    
    .tft-rv-feed-controls {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

/* ==========================================================================
   TFT - DYNAMIC SHIMMERING MENU BORDER OVERRIDES
   ========================================================================== */
/* Base state transition setup - scoped to exclude active items */
.svr-sidebar .svr-nav__link:not(.svr-nav__link--active),
.svr-sidebar .svr-nav-accordion summary {
    position: relative !important;
    isolation: isolate !important;
    border: 1.5px solid transparent !important;
    transition: color 0.6s ease !important;
}

/* Static open state when not hovered */
.svr-sidebar .svr-nav-accordion[open] > summary:not(:hover) {
    border: 1.5px solid var(--svr-color-accent-gold) !important;
    background: radial-gradient(circle at 10% 50%, color-mix(in srgb, var(--svr-color-accent-gold) 12%, transparent), transparent 80%), color-mix(in srgb, var(--svr-color-text-light) 3%, transparent) !important;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--svr-color-accent-gold) 10%, transparent) !important;
    color: var(--svr-color-text-light) !important;
}

/* Pseudo-element holding the shimmer design with premium slow 0.6s transition */
.svr-sidebar .svr-nav__link::after,
.svr-sidebar .svr-nav-accordion summary::after {
    content: "" !important;
    position: absolute !important;
    inset: -1.5px !important; /* Align perfectly over transparent border-box */
    border-radius: 12px !important;
    border: 1.5px solid transparent !important;
    background: 
        radial-gradient(circle at 10% 50%, color-mix(in srgb, var(--svr-color-accent-gold) 15%, transparent), transparent 80%) padding-box, 
        linear-gradient(color-mix(in srgb, var(--svr-color-text-light) 3%, transparent), color-mix(in srgb, var(--svr-color-text-light) 3%, transparent)) padding-box, 
        linear-gradient(var(--svr-color-sidebar), var(--svr-color-sidebar)) padding-box,
        linear-gradient(135deg, 
            var(--svr-color-accent-gold) 0%, 
            color-mix(in srgb, var(--svr-color-accent-gold) 20%, transparent) 25%, 
            var(--svr-color-accent-gold) 50%, 
            color-mix(in srgb, var(--svr-color-accent-gold) 20%, transparent) 75%, 
            var(--svr-color-accent-gold) 100%
        ) border-box !important;
    background-size: auto, auto, auto, 200px 200px !important;
    animation: tft-menu-border-shimmer 3s linear infinite !important;
    box-shadow: 
        0 4px 15px color-mix(in srgb, var(--svr-color-accent-gold) 15%, transparent),
        0 0 10px color-mix(in srgb, var(--svr-color-accent-gold) 5%, transparent) !important;
    opacity: 0 !important;
    transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* Trigger transition */
.svr-sidebar .svr-nav__link:hover:not(.svr-nav__link--active)::after,
.svr-sidebar .svr-nav-accordion summary:hover::after {
    opacity: 1 !important;
}

.svr-sidebar .svr-nav__link:hover:not(.svr-nav__link--active),
.svr-sidebar .svr-nav-accordion summary:hover {
    color: var(--svr-color-text-light) !important;
}

/* Make open summaries background transparent on hover so ::after renders cleanly */
.svr-sidebar .svr-nav-accordion[open] > summary:hover {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

@keyframes tft-menu-border-shimmer {
    0% {
        background-position: 0% 0%, 0% 0%, 0% 0%, 0px 0px;
    }
    100% {
        background-position: 0% 0%, 0% 0%, 0% 0%, 200px 200px;
    }
}

/* ==========================================================================
   TFT - SEARCH FILTER REMOVAL OVERRIDES
   ========================================================================== */
/* Completely hide the filter slider icon in the search bar */
.svr-top-nav__search-filter {
    display: none !important;
}

/* Completely hide the Dietary & Course Filters panel inside the suggestions dropdown */
.tft-search-filter-panel {
    display: none !important;
}

/* Active style for navigation accordion sub-links */
.svr-sidebar .svr-nav-accordion__link--active {
    color: var(--svr-color-accent-gold) !important;
    font-weight: 600 !important;
    background: rgba(226, 180, 59, 0.08) !important;
    border-radius: 8px !important;
}

/* ==========================================================================
   TFT - SIDEBAR ACCORDION HEIGHT OVERRIDE & CHEVRON VISIBILITY FIX
   ========================================================================== */
/* Fix details/summary pseudo-element stretching vertically when details is open */
.svr-sidebar .svr-nav-accordion summary::after {
    height: 52px !important;
    bottom: auto !important;
    top: 0 !important;
}

@media (max-width: 1024px) and (min-width: 769px) {
    .svr-sidebar .svr-nav-accordion summary::after {
        height: 48px !important;
        bottom: auto !important;
        top: 0 !important;
    }
}

/* Prevent rotation and keep visibility of the active border overlay when details is open */
.svr-sidebar .svr-nav-accordion[open] > summary::after {
    transform: none !important;
    opacity: 1 !important;
}

/* Restore chevron arrow indicators for dropdown menus */
.svr-sidebar .svr-nav-accordion summary i.fa-chevron-right {
    display: block !important;
    margin-inline-start: auto !important;
    font-size: 0.7rem !important;
    color: var(--svr-color-text-muted-dark) !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
}

/* Rotate chevron arrow on open */
.svr-sidebar .svr-nav-accordion[open] > summary i.fa-chevron-right {
    transform: rotate(90deg) !important;
    color: var(--svr-color-accent-gold) !important;
}

/* ==========================================================================
   SVR-MOBILE-NAV: PREMIUM RESPONSIVE HEADER & DRAWER OVERRIDES
   ========================================================================== */

@media (max-width: 768px) {
    /* Hide top nav items to declutter */
    .svr-top-nav__auth-btn,
    .svr-top-nav__submit-btn {
        display: none !important;
    }

    /* Center mobile logo */
    .svr-top-nav__mob-logo {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-inline: auto !important;
        text-align: center !important;
    }

    /* Compact circular search toggle */
    .svr-top-nav__search {
        position: relative !important;
        inline-size: 40px !important;
        block-size: 40px !important;
        min-inline-size: 40px !important;
        max-inline-size: 40px !important;
        padding-inline: 0 !important;
        padding-block: 0 !important;
        border-radius: var(--svr-radius-pill) !important;
        justify-content: center !important;
        background: color-mix(in srgb, var(--svr-color-text-light) 5%, transparent) !important;
        border: 1px solid color-mix(in srgb, var(--svr-color-text-light) 10%, transparent) !important;
        overflow: hidden !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        cursor: pointer !important;
    }

    .svr-top-nav__search-input {
        inline-size: 0 !important;
        opacity: 0 !important;
        padding-inline: 0 !important;
        transition: all 0.3s ease !important;
    }

    .svr-top-nav__search-filter {
        display: none !important;
    }

    /* Active expanded full-width search overlay */
    .svr-top-nav__search.svr-top-nav__search--active {
        position: absolute !important;
        inset-inline: 16px !important;
        inline-size: calc(100% - 32px) !important;
        max-inline-size: none !important;
        border-radius: var(--svr-radius-md) !important;
        padding-inline: 16px !important;
        background: var(--svr-color-bg-light) !important;
        border: 1.5px solid var(--svr-color-accent-gold) !important;
        z-index: 100 !important;
        justify-content: flex-start !important;
    }

    .svr-top-nav__search.svr-top-nav__search--active .svr-top-nav__search-input {
        inline-size: 100% !important;
        opacity: 1 !important;
        padding-inline-start: 12px !important;
        color: var(--svr-color-text-dark) !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
    }

    .svr-top-nav__search.svr-top-nav__search--active .svr-top-nav__search-icon {
        color: var(--svr-color-accent-gold) !important;
    }

    /* Outer wrapper responsive margins */
    .svr-avant-home {
        margin-inline: 10px !important;
        margin-block: 0 20px !important;
        border-radius: var(--svr-radius-md) !important;
    }
}

@media (max-width: 480px) {
    .svr-avant-home {
        margin-inline: 0 !important;
        margin-block: 0 10px !important;
        border-radius: 0 !important;
    }
}

/* Premium Drawer Search Input */
.svr-mob-drawer__search {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: color-mix(in srgb, var(--svr-color-text-light) 3%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-light) 10%, transparent) !important;
    border-radius: var(--svr-radius-md) !important;
    margin-inline: 20px !important;
    margin-block: 15px 5px !important;
    padding-inline: 16px !important;
    padding-block: 12px !important;
    transition: border-color var(--svr-transition-fast), background var(--svr-transition-fast) !important;
}

.svr-mob-drawer__search:focus-within {
    border-color: var(--svr-color-accent-gold) !important;
    background: color-mix(in srgb, var(--svr-color-text-light) 6%, transparent) !important;
}

.svr-mob-drawer__search i {
    color: var(--svr-color-text-muted-dark) !important;
    font-size: 0.95rem !important;
}

.svr-mob-drawer__search-input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--svr-color-text-light) !important;
    font-family: var(--svr-font-body) !important;
    font-size: 0.9rem !important;
    inline-size: 100% !important;
}

.svr-mob-drawer__search-input::placeholder {
    color: color-mix(in srgb, var(--svr-color-text-light) 35%, transparent) !important;
}

/* Premium Drawer Action Buttons */
.svr-mob-drawer__actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-inline: 20px !important;
    padding-block-end: 20px !important;
}

.svr-mob-drawer__submit-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-bg-dark) !important;
    font-family: var(--svr-font-body) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    block-size: 48px !important;
    border-radius: var(--svr-radius-md) !important;
    transition: opacity var(--svr-transition-fast), transform var(--svr-transition-fast) !important;
}

.svr-mob-drawer__submit-btn:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}

.svr-mob-drawer__auth-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.svr-mob-drawer__auth-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-family: var(--svr-font-body) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    block-size: 44px !important;
    border-radius: var(--svr-radius-md) !important;
    transition: all var(--svr-transition-fast) !important;
}

.svr-mob-drawer__auth-btn--dark {
    background: color-mix(in srgb, var(--svr-color-text-light) 8%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-light) 12%, transparent) !important;
    color: var(--svr-color-text-light) !important;
}

.svr-mob-drawer__auth-btn--dark:hover {
    background: color-mix(in srgb, var(--svr-color-text-light) 15%, transparent) !important;
}

.svr-mob-drawer__auth-btn--outline {
    background: transparent !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-text-light) 20%, transparent) !important;
    color: var(--svr-color-text-muted-dark) !important;
}

.svr-mob-drawer__auth-btn--outline:hover {
    border-color: var(--svr-color-accent-gold) !important;
    color: var(--svr-color-text-light) !important;
}

/* Accordion indicator arrow behaviors inside Mobile Drawer */
.svr-mob-drawer__accordion summary i.svr-mob-drawer__chevron {
    margin-inline-start: auto !important;
    font-size: 0.75rem !important;
    transition: transform var(--svr-transition-fast) !important;
}

.svr-mob-drawer__accordion[open] > summary i.svr-mob-drawer__chevron {
    transform: rotate(90deg) !important;
}

/* ==========================================================================
   25. HOVER UTILITIES (replaces inline onmouseover handlers)
   ========================================================================== */

/* Generic gold hover link */
.svr-hover-gold { color: inherit; text-decoration: none; transition: color 0.3s ease; }
.svr-hover-gold:hover { color: var(--svr-color-accent-gold); }

/* Dark/gold button hover */
.svr-btn-dark-hover { background: var(--svr-color-text-dark); color: var(--svr-color-text-light); transition: background 0.3s ease, color 0.3s ease; }
.svr-btn-dark-hover:hover { background: var(--svr-color-accent-gold); color: var(--svr-color-text-dark); }

/* Lift hover */
.svr-hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.svr-hover-lift:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.15); }

/* Empty cart return button */
.tft-empty-cart-state { text-align: center; padding: 80px 0; opacity: 0; transform: translateY(20px); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.tft-empty-cart-state--visible { opacity: 1; transform: translateY(0); }
.tft-empty-cart-state__icon { font-size: 5rem; color: var(--svr-color-accent-gold); margin-block-end: 30px; }
.tft-empty-cart-state__title { font-family: var(--svr-font-heading); font-size: clamp(2rem, 5vw, 3rem); margin-block-end: 15px; text-transform: uppercase; letter-spacing: -0.01em; }
.tft-empty-cart-state__msg { color: var(--svr-color-text-muted-light); font-size: 1.1rem; margin-block-end: 40px; }

/* Social links in dark sections */
.svr-social-link-hover { display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; border: 1px solid rgba(255,255,255,0.2); color: var(--svr-color-text-light); border-radius: 50%; font-size: 1.2rem; transition: all 0.3s ease; text-decoration: none; }
.svr-social-link-hover:hover { background: var(--svr-color-accent-gold); border-color: var(--svr-color-accent-gold); color: var(--svr-color-text-dark); }

/* Clickable card cursor (data-href pattern replaces onclick) */
[data-href] { cursor: pointer; }


/* === SHOP PAGE & CART DRAWER === */

/* ==========================================================================
   SVR SHOP PAGE — All selectors scoped to shop BEM classes + cart sidebar
   ========================================================================== */

/* 1. SHOP WRAPPER */
.svr-avant-shop {
    margin: clamp(16px, 3vw, 40px) 30px 40px;
    margin-block-start: clamp(16px, 3vw, 40px) !important;
    border-radius: 40px;
    background: var(--svr-color-card-light);
    color: var(--svr-color-text-dark);
    box-shadow: 0 40px 100px color-mix(in srgb, var(--svr-color-text-dark) 10%, transparent);
    padding: clamp(40px, 6vw, 80px) clamp(20px, 7vw, 100px);
}

/* 2. SHOP HERO */
.svr-shop-hero {
    border-block-end: 1px solid var(--svr-color-border-light);
    padding-block-end: 40px;
    margin-block-end: 60px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
}
.svr-shop-hero__eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--svr-color-accent-gold);
    margin-block-end: 15px;
    display: block;
    font-weight: 700;
}
.svr-shop-hero__title {
    font-family: var(--svr-font-heading);
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: -0.02em;
    color: var(--svr-color-text-dark);
}
.svr-shop-hero__title-italic {
    font-family: 'Dancing Script', cursive;
    color: var(--svr-color-accent-gold);
    text-transform: lowercase;
    font-size: 1.2em;
    font-style: italic;
}
.svr-shop-hero__sort { display: flex; gap: 15px; align-items: center; }
.svr-shop-hero__sort-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--svr-color-text-muted-light);
}
.svr-shop-hero__select {
    padding: 12px 25px;
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-pill);
    background: var(--svr-color-bg-light);
    font-family: var(--svr-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    color: var(--svr-color-text-dark);
    transition: border-color 0.3s ease;
}
.svr-shop-hero__select:hover { border-color: var(--svr-color-text-dark); }

/* 3. SHOP LAYOUT */
.svr-shop-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    align-items: flex-start;
}

/* 4. FILTER SIDEBAR */
.svr-shop-sidebar {
    flex: 0 0 240px;
    position: sticky;
    top: 40px;
}
.svr-shop-widget { margin-block-end: 50px; }
.svr-shop-widget__title {
    font-family: var(--svr-font-heading);
    font-size: 1.5rem;
    text-transform: uppercase;
    margin: 0 0 20px;
    border-block-end: 1px solid var(--svr-color-border-light);
    padding-block-end: 15px;
    color: var(--svr-color-text-dark);
}
.svr-shop-categories {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.svr-shop-categories__link {
    color: var(--svr-color-text-muted-light);
    text-decoration: none;
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    transition: color 0.3s ease;
}
.svr-shop-categories__link:hover,
.svr-shop-categories__link--active {
    color: var(--svr-color-text-dark);
    font-weight: 600;
}
.svr-shop-categories__count { color: var(--svr-color-text-muted-light); font-weight: 400; }
.svr-shop-filter-range { display: flex; gap: 10px; align-items: center; }
.svr-shop-filter-input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--svr-color-border-light);
    border-radius: var(--svr-radius-sm);
    background: var(--svr-color-bg-light);
    outline: none;
    font-family: var(--svr-font-body);
    color: var(--svr-color-text-dark);
    transition: border-color 0.3s ease;
}
.svr-shop-filter-input:focus { border-color: var(--svr-color-accent-gold); }
.svr-shop-filter-btn {
    width: 100%;
    padding: 15px;
    margin-block-start: 15px;
    background: var(--svr-color-text-dark);
    color: var(--svr-color-text-light);
    border: none;
    border-radius: var(--svr-radius-pill);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    font-family: var(--svr-font-body);
}
.svr-shop-filter-btn:hover { background: var(--svr-color-accent-gold); color: var(--svr-color-text-dark); }
.svr-shop-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.svr-shop-tags__link {
    padding: 8px 15px;
    border: 1px solid var(--svr-color-border-light);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--svr-color-text-muted-light);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}
.svr-shop-tags__link:hover { border-color: var(--svr-color-text-dark); color: var(--svr-color-text-dark); }
.svr-shop-promo {
    background: var(--svr-color-bg-light);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid var(--svr-color-border-light);
}
.svr-shop-promo__eyebrow { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--svr-color-accent-gold); display: block; margin-block-end: 10px; }
.svr-shop-promo__title { font-family: var(--svr-font-heading); font-size: 1.8rem; margin: 0 0 15px; color: var(--svr-color-text-dark); }
.svr-shop-promo__text { font-size: 0.9rem; color: var(--svr-color-text-muted-light); margin-block-end: 20px; }
.svr-shop-promo__link { font-size: 0.8rem; font-weight: 700; color: var(--svr-color-text-dark); text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; border-block-end: 1px solid var(--svr-color-text-dark); padding-block-end: 3px; transition: color 0.3s ease, border-color 0.3s ease; }
.svr-shop-promo__link:hover { color: var(--svr-color-accent-gold); border-color: var(--svr-color-accent-gold); }

/* 5. PRODUCT GRID */
.svr-shop-grid {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 50px;
}

/* 6. PRODUCT CARD */
.svr-product-card { display: flex; flex-direction: column; }
.svr-product-card-img-wrap {
    position: relative;
    width: 100%;
    height: 350px;
    border-radius: var(--svr-radius-lg) !important;
    overflow: hidden !important;
    background: var(--svr-color-bg-light);
    margin-block-end: 20px;
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
}
.svr-product-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translate3d(0,0,0) scale(1);
    backface-visibility: hidden;
    will-change: transform;
}
.svr-product-card-img-wrap:hover .svr-product-card__img { transform: translate3d(0,0,0) scale(1.04); }
.svr-product-card__badge {
    position: absolute;
    top: 15px;
    inset-inline-start: 15px;
    background: var(--svr-color-accent-gold);
    color: var(--svr-color-text-dark);
    padding: 5px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 20px;
    z-index: 2;
}
.svr-product-card__badge--new { background: var(--svr-color-text-dark); color: var(--svr-color-text-light); }
.svr-product-card__title { font-family: var(--svr-font-heading); font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 0 0 5px; color: var(--svr-color-text-dark); }
.svr-product-card__link { color: var(--svr-color-text-dark); text-decoration: none; transition: color 0.3s ease; }
.svr-product-card__link:hover { color: var(--svr-color-accent-gold); }
.svr-product-card__price { font-weight: 600; font-size: 1.2rem; color: var(--svr-color-text-muted-light); }

/* Add to Bag button */
.svr-add-btn {
    position: absolute;
    bottom: 20px;
    inset-inline-start: 20px;
    inset-inline-end: 20px;
    background: color-mix(in srgb, var(--svr-color-text-dark) 90%, transparent) !important;
    color: var(--svr-color-accent-gold) !important;
    border: 1px solid color-mix(in srgb, var(--svr-color-accent-gold) 25%, transparent) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-align: center;
    padding: 16px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    font-size: 0.78rem !important;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 3;
    box-shadow: 0 10px 25px color-mix(in srgb, var(--svr-color-text-dark) 15%, transparent) !important;
}
.svr-product-card-img-wrap:hover .svr-add-btn { opacity: 1 !important; transform: translateY(0) !important; }
.svr-add-btn:hover { background: var(--svr-color-accent-gold) !important; color: var(--svr-color-text-dark) !important; border-color: var(--svr-color-accent-gold) !important; box-shadow: 0 12px 30px color-mix(in srgb, var(--svr-color-accent-gold) 30%, transparent) !important; }

/* 7. PAGINATION */
.svr-shop-pagination {
    margin-block-start: 80px;
    padding-block-start: 40px;
    border-block-start: 1px solid var(--svr-color-border-light);
    display: flex;
    justify-content: center;
    gap: 10px;
}
.svr-shop-pagination__link {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--svr-color-bg-light);
    color: var(--svr-color-text-dark);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
}
.svr-shop-pagination__link:hover { background: color-mix(in srgb, var(--svr-color-text-dark) 10%, transparent); }
.svr-shop-pagination__link--active { background: var(--svr-color-text-dark); color: var(--svr-color-text-light); }

/* 8. CART DRAWER */
.svr-cart-trigger {
    position: relative; width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--svr-color-border-light);
    background: var(--svr-color-card-light);
    color: var(--svr-color-text-dark);
    cursor: pointer; font-size: 1rem;
    transition: all 0.25s ease;
    text-decoration: none; flex-shrink: 0;
}
.svr-cart-trigger:hover { border-color: var(--svr-color-accent-gold); color: var(--svr-color-accent-gold); transform: translateY(-1px); }
.svr-cart-trigger__count {
    position: absolute; top: -4px; inset-inline-end: -4px;
    background: var(--svr-color-accent-gold); color: var(--svr-color-text-dark);
    font-size: 0.6rem; font-weight: 800;
    width: 16px; height: 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.svr-cart-overlay {
    position: fixed; inset: 0;
    background: color-mix(in srgb, var(--svr-color-text-dark) 40%, transparent);
    z-index: 9998; opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
}
.svr-cart-overlay--active { opacity: 1; pointer-events: all; }
.svr-cart-drawer {
    position: fixed; top: 0; inset-inline-end: 0;
    width: min(420px, 100vw); height: 100%;
    background: var(--svr-color-card-light);
    z-index: 9999; display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -20px 0 60px color-mix(in srgb, var(--svr-color-text-dark) 12%, transparent);
}
.svr-cart-drawer--open { transform: translateX(0); }
.svr-cart-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 28px 30px 24px;
    border-block-end: 1px solid var(--svr-color-border-light);
    flex-shrink: 0;
}
.svr-cart-drawer__title { font-family: var(--svr-font-heading); font-size: 1.8rem; font-weight: 700; color: var(--svr-color-text-dark); margin: 0; letter-spacing: -0.01em; }
.svr-cart-drawer__close {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--svr-color-border-light);
    background: transparent; color: var(--svr-color-text-dark);
    cursor: pointer; font-size: 0.9rem; transition: all 0.2s ease;
}
.svr-cart-drawer__close:hover { background: var(--svr-color-text-dark); color: var(--svr-color-text-light); border-color: var(--svr-color-text-dark); }
.svr-cart-drawer__items { flex: 1; overflow-y: auto; padding: 20px 30px; display: flex; flex-direction: column; gap: 20px; }
.svr-cart-drawer__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--svr-color-text-muted-light); text-align: center; padding: 40px; }
.svr-cart-drawer__empty i { font-size: 3rem; color: color-mix(in srgb, var(--svr-color-text-dark) 15%, transparent); }
.svr-cart-drawer__empty p { font-size: 1rem; margin: 0; }
.svr-cart-item { display: flex; gap: 16px; align-items: flex-start; padding-block-end: 20px; border-block-end: 1px solid var(--svr-color-border-light); }
.svr-cart-item__img-wrap { width: 80px; height: 80px; border-radius: var(--svr-radius-sm); overflow: hidden; flex-shrink: 0; background: var(--svr-color-bg-light); }
.svr-cart-item__img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.svr-cart-item__info { flex: 1; min-width: 0; }
.svr-cart-item__name { font-family: var(--svr-font-heading); font-size: 1.1rem; font-weight: 600; color: var(--svr-color-text-dark); margin: 0 0 4px; line-height: 1.2; }
.svr-cart-item__price { font-size: 0.95rem; color: var(--svr-color-text-muted-light); font-weight: 500; }
.svr-cart-item__qty { display: flex; align-items: center; gap: 10px; margin-block-start: 10px; }
.svr-cart-item__qty-btn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--svr-color-border-light); background: transparent; color: var(--svr-color-text-dark); cursor: pointer; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; }
.svr-cart-item__qty-btn:hover { background: var(--svr-color-text-dark); color: var(--svr-color-text-light); border-color: var(--svr-color-text-dark); }
.svr-cart-item__qty-num { font-weight: 700; font-size: 0.95rem; min-width: 20px; text-align: center; color: var(--svr-color-text-dark); }
.svr-cart-item__remove { background: none; border: none; color: var(--svr-color-text-muted-light); cursor: pointer; font-size: 0.8rem; padding: 4px; transition: color 0.2s ease; flex-shrink: 0; }
.svr-cart-item__remove:hover { color: var(--svr-color-text-dark); }
.svr-cart-drawer__foot { padding: 24px 30px 30px; border-block-start: 1px solid var(--svr-color-border-light); flex-shrink: 0; }
.svr-cart-drawer__total-row { display: flex; justify-content: space-between; align-items: center; margin-block-end: 20px; }
.svr-cart-drawer__total-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--svr-color-text-muted-light); }
.svr-cart-drawer__total-price { font-family: var(--svr-font-heading); font-size: 2rem; font-weight: 700; color: var(--svr-color-text-dark); }
.svr-cart-drawer__checkout-btn { display: block; width: 100%; padding: 18px; background: var(--svr-color-accent-gold); color: var(--svr-color-text-dark); border: none; border-radius: var(--svr-radius-pill); font-family: var(--svr-font-body); font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; text-align: center; text-decoration: none; cursor: pointer; transition: all 0.3s ease; margin-block-end: 12px; }
.svr-cart-drawer__checkout-btn:hover { background: color-mix(in srgb, var(--svr-color-accent-gold) 85%, var(--svr-color-text-dark)); transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--svr-color-accent-gold) 35%, transparent); }
.svr-cart-drawer__continue { display: block; text-align: center; font-size: 0.8rem; color: var(--svr-color-text-muted-light); text-decoration: none; letter-spacing: 0.05em; transition: color 0.2s ease; }
.svr-cart-drawer__continue:hover { color: var(--svr-color-text-dark); }

/* 9. RESPONSIVE — TABLET */
@media (max-width: 1200px) {
    .svr-avant-shop { margin: 0 15px 30px; padding: clamp(30px, 4vw, 60px) clamp(20px, 4vw, 60px); }
    .svr-shop-sidebar { flex: 0 0 200px; }
    .svr-shop-layout { gap: 40px; }
}

/* 10. RESPONSIVE — MOBILE */
@media (max-width: 900px) {
    .svr-avant-shop { margin: clamp(16px, 3vw, 30px) 6px 20px; margin-block-start: clamp(16px, 3vw, 30px) !important; border-radius: var(--svr-radius-lg); padding-block: 24px; padding-inline: 0; }
    .svr-shop-hero, .svr-shop-sidebar, .svr-shop-pagination { padding-inline: 20px; }
    .svr-shop-layout { flex-direction: column; gap: 30px; padding-inline: 0; }
    .svr-shop-sidebar { flex: none; width: 100%; position: static; box-sizing: border-box; }
    .svr-shop-hero { flex-direction: column; align-items: flex-start; gap: 20px; margin-block-end: 30px; padding-block-end: 24px; }
    .svr-shop-hero__sort { width: 100%; }
    .svr-shop-hero__select { flex: 1; }
    .svr-shop-grid { grid-template-columns: 1fr 1fr; gap: 0; width: 100%; }
    .svr-product-card { padding: 12px; box-sizing: border-box; }
    .svr-product-card-img-wrap { height: 220px; border-radius: var(--svr-radius-md) !important; }
    .svr-add-btn { opacity: 1 !important; transform: translateY(0) !important; }
}

/* 11. RESPONSIVE — SMALL MOBILE */
@media (max-width: 600px) {
    .svr-shop-grid { grid-template-columns: 1fr 1fr; gap: 0; }
    .svr-product-card { padding: 10px; }
    .svr-product-card-img-wrap { height: 200px; border-radius: var(--svr-radius-md) !important; }
    .svr-product-card__title { font-size: 1.05rem; }
    .svr-product-card__price { font-size: 0.95rem; }
    .svr-add-btn { font-size: 0.68rem !important; padding: 10px !important; opacity: 1 !important; transform: translateY(0) !important; inset-inline-start: 10px !important; inset-inline-end: 10px !important; bottom: 10px !important; }
    .svr-shop-pagination { margin-block-start: 30px; padding-inline: 20px; }
    .svr-cart-drawer { width: 100vw; }
    .svr-shop-hero__sort-label { display: none !important; }
    .svr-shop-hero__sort, .svr-shop-hero__select { width: 100%; box-sizing: border-box; }
}

/* 12. CART TRIGGER MOBILE */
@media (max-width: 768px) { .svr-cart-trigger { width: 38px; height: 38px; font-size: 0.9rem; margin-inline-start: 6px !important; } }
@media (max-width: 420px) { .svr-cart-trigger { width: 35px; height: 35px; } }
@media (max-width: 380px) {
    .svr-top-nav__submit-btn { display: none !important; }
    .svr-cart-trigger { width: 33px !important; height: 33px !important; margin-inline-start: 5px !important; }
}

/* 13. SIDEBAR LOGO COLLAPSE */
@media (max-width: 1100px) {
    .svr-sidebar .svr-logo span { display: none !important; }
    .svr-sidebar .svr-logo i { font-size: 1.4rem !important; }
    .svr-sidebar .svr-logo > div { gap: 0 !important; margin-block-end: 16px !important; margin-block-start: 6px !important; }
}