/* ==========================================================================
   MOROCCO SAFFRON FARM — MAIN STYLESHEET
   ==========================================================================
   TABLE OF CONTENTS:
   0)  Variables / Global Reset (THE GAP KILLER)
   1)  Top Bar (Premium Dark Purple + Cream Text)
   2)  Full-Width Containers (Padding logic)
   3)  Navbar Base (Bootstrap Reset + Sticky Transitions)
   4)  Brand / Logo (Sizing & Animation)
   5)  Primary Menu (Links, Hover Effects, Colors)
   6)  Dropdown Menus (Desktop Hover Logic)
   7)  Mobile Navigation (Hamburger Menu Styles)
   8)  TripAdvisor Badge (Desktop Only)
   9)  Desktop Initial Layout (Menu Left / Logo Right)
   10) Sticky Header Logic (Fixed Position)
   11) Sticky Header State Changes (Logo Flip, Size Changes)
   12) Home Welcome Section (Agriox Style Layout)
   13) Accessibility (Reduced Motion)
   14) LAPTOP FIXES (992px - 1300px)
   15) HERO ANIMATION (Floating Man)
   17) HERO RESPONSIVE (Mobile Layout Fixes)
   18) FEATURES SECTION (Boxed Checkerboard)
   19) BEST SELLERS SECTION (UPDATED: New Cards + Zoom + Yellow Button)
   20) REVIEWS SECTION (Layout + Arrows)
   21) LUXURY FOOTER
   ========================================================================== */

/* ==================================================
   0) DESIGN TOKENS / VARIABLES & RESET
   Controls global colors and fixes the "White Line" gap.
   ================================================== */
   :root {
    /* --- Colors --- */
    --msf-purple: #863186;
    --msf-yellow: #ffbf06;
    --msf-white: #ffffff;
    --msf-white2: #fcf6f0;
  
    /* --- Dimensions --- */
    --msf-topbar-h: 40px;           /* Height of the dark purple top bar */
    
    /* Initial State (Top of page) */
    --msf-nav-h: 72px;              /* Height of navbar before scrolling */
    --msf-logo-h: 46px;             /* Size of logo before scrolling */
  
    /* Scrolled State (Sticky) */
    --msf-nav-h-sticky: 70px;       /* Height of navbar when scrolling */
    --msf-logo-h-sticky: 45px;      /* LOGO GETS BIGGER when sticky */
  
    /* Spacing */
    --msf-pad-x: 24px;              /* Container padding (mobile/laptop) */
    --msf-pad-x-xl: 40px;           /* Container padding (large screens) */
  
    /* --- Animations --- */
    --msf-sticky-dur: 650ms;        /* How long the sticky slide-down takes */
    --msf-resize-dur: 520ms;        /* How long the height change takes */
    --msf-sticky-ease: cubic-bezier(0.16, 1, 0.3, 1); /* Smooth easing */
    
    /* --- Shadows & Offsets --- */
    --msf-sticky-shadow: 0 12px 38px rgba(0, 0, 0, 0.24);
    --msf-adminbar-h: 0px;          /* Updated by WP if admin bar is present */
  }
  
  .btn {
    cursor: pointer;
  }
  
  /* Adjust for WP Admin Bar */
  body.admin-bar { --msf-adminbar-h: 32px; }
  @media (max-width: 782px) {
    body.admin-bar { --msf-adminbar-h: 46px; }
  }
  
  
  /* --- THE NUCLEAR GAP KILLER (Fixes the vertical pixel line) --- */
  html {
    overflow-x: hidden;
  }
  
  body {
    margin: 0 !important;
    padding: 0 !important;
    
    /* FORCE LAYOUT FIX: Physically pull site 1px left to cover the gap */
    position: relative;
    left: -1px;
    width: calc(100% + 1px);
    
    overflow-x: hidden;
  }
  
  /* Hero Section Fix: Forces the slider to touch the left edge */
  .msf-hero {
    width: 100vw;
    max-width: 100%;
    margin-left: 0 !important;
    padding-left: 0 !important;
    left: 0;
    position: relative;
  }
  
  /* Extra Safety: Ensure the swiper container has no padding */
  .swiper, 
  .swiper-wrapper, 
  .swiper-slide {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  
  /* ==================================================
     1) TOP BAR (Premium Dark Style)
     The strip above the menu containing phone, hours, social.
     ================================================== */
  .site-topbar {
    height: var(--msf-topbar-h);
    background-color: #591b59; /* Dark Purple Background */
    color: #FEEDDB;            /* Cream Text Color */
    font-size: 13px;
    font-family: 'Averia Sans Libre', sans-serif;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  
  .site-topbar .container,
  .site-topbar .row {
    height: 100%;
  }
  
  /* Topbar Links */
  .site-topbar a {
    color: #FEEDDB; /* Cream Links */
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .site-topbar a:hover {
    color: var(--msf-yellow); /* Gold on Hover */
    text-decoration: none;
  }
  
  /* --- ICONS CONFIGURATION --- */
  .site-topbar i.bi {
    font-size: 13px;
    position: relative;
    top: -1px; 
  }
  
  /* Force specific icons (clock, phone) to be gold */
  .site-topbar .text-warning {
     color: var(--msf-yellow) !important;
  }
  
  /* The divider line (|) */
  .site-topbar__sep {
    color: rgba(254, 237, 219, 0.3);
    font-size: 12px;
    margin: 0 4px;
  }
  
  /* --- SOCIAL ICONS (Circles) --- */
  .site-topbar__social-link {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(254, 237, 219, 0.1);
    color: #FEEDDB !important;
    transition: all 0.3s ease;
  }
  
  /* Reset the icon position so it centers perfectly */
  .site-topbar__social-link i {
    top: 0 !important;
    line-height: 1;
    display: block;
  }
  
  .site-topbar__social-link:hover {
    background: var(--msf-yellow);
    color: var(--msf-purple) !important;
    transform: translateY(-2px);
  }
  
  .site-topbar__welcome,
  .site-topbar__hours {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  
  /* ==================================================
     2) FULL-WIDTH CONTAINERS
     Overrides Bootstrap to make the navbar feel wider.
     ================================================== */
  .msf-navbar .container,
  .site-topbar .container {
    max-width: 100%;
    padding-left: var(--msf-pad-x);
    padding-right: var(--msf-pad-x);
  }
  
  @media (min-width: 1400px) {
    .msf-navbar .container,
    .site-topbar .container {
      padding-left: var(--msf-pad-x-xl);
      padding-right: var(--msf-pad-x-xl);
    }
  }
  
  
  /* ==================================================
     3) NAVBAR BASE (Bootstrap 5.3)
     The main container for the menu.
     ================================================== */
  .msf-navbar {
    background: var(--msf-purple);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    z-index: 9999;
  
    /* Remove Bootstrap's default padding */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  
    /* Smooth transitions */
    transition: transform var(--msf-sticky-dur) var(--msf-sticky-ease),
      box-shadow var(--msf-sticky-dur) var(--msf-sticky-ease), 
      background-color 220ms ease;
    
    will-change: transform;
    transform: translateY(0);
  
    position: relative;
    box-shadow: none;
  }
  
  /* Controls the actual height of the bar */
  .msf-navbar .container {
    min-height: var(--msf-nav-h);
    transition: min-height var(--msf-resize-dur) var(--msf-sticky-ease);
  }
  
  /* Mobile Toggle Button Styles */
  .msf-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.35);
  }
  .msf-navbar .navbar-toggler-icon {
    filter: invert(1);
  }
  
  
  /* ==================================================
     4) BRAND (LOGO & TEXT)
     ================================================== */
  .msf-navbar__brand {
    text-decoration: none;
  }
  
  .msf-navbar__logo-img {
    height: var(--msf-logo-h);
    width: auto;
    display: block;
    transition: height var(--msf-resize-dur) var(--msf-sticky-ease),
      transform var(--msf-resize-dur) var(--msf-sticky-ease);
  }
  
  /* Fallback if no image is uploaded */
  .msf-navbar__brand-text {
    font-family: 'Averia Sans Libre', sans-serif;
    font-weight: 700;
    color: var(--msf-yellow);
  }
  
  /* Soften the logo colors to match the dark header */
  .site-logo img {
      filter: saturate(0.6) brightness(1.1);
  }
  
  
  /* ==================================================
     5) PRIMARY MENU (Standard Links)
     Styles for Home, Our Farm, Saffron, etc.
     ================================================== */
  .msf-navbar__menu {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .msf-navbar__menu > li {
    position: relative;
  }
  
  .msf-navbar__menu > li > a {
    font-family: 'Averia Sans Libre', sans-serif;
    font-weight: 700;
    font-size: 18px;
    
    /* DEFAULT COLOR: Cream (Matches Top Bar) */
    color: #FEEDDB; 
    text-decoration: none;
  
    display: inline-flex;
    align-items: center;
    height: var(--msf-nav-h); /* Full height for clicking */
    padding: 0 2px;
    letter-spacing: 0.2px;
  
    transition: color 220ms ease, opacity 220ms ease, 
      height var(--msf-resize-dur) var(--msf-sticky-ease),
      padding var(--msf-resize-dur) var(--msf-sticky-ease);
  }
  
  /* Yellow Underline Animation */
  .msf-navbar__menu > li > a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 18px;
    width: 100%;
    height: 2px;
    background: var(--msf-yellow);
    transform: scaleX(0); /* Hidden by default */
    transform-origin: left;
    transition: transform 320ms var(--msf-sticky-ease);
    opacity: 0.95;
  }
  
  /* HOVER STATE: Text turns Yellow */
  .msf-navbar__menu > li:hover > a {
    color: var(--msf-yellow);
    opacity: 1;
  }
  .msf-navbar__menu > li:hover > a::after {
    transform: scaleX(1); /* Show underline */
  }
  
  /* ACTIVE STATE (Current Page) */
  .msf-navbar__menu > .current-menu-item > a,
  .msf-navbar__menu > .current_page_item > a,
  .msf-navbar__menu > .current-menu-ancestor > a {
    color: var(--msf-yellow);
    opacity: 1;
  }
  .msf-navbar__menu > .current-menu-item > a::after,
  .msf-navbar__menu > .current_page_item > a::after,
  .msf-navbar__menu > .current-menu-ancestor > a::after {
    transform: scaleX(1);
  }
  
  /* Accessibility Focus */
  .msf-navbar__menu > li > a:focus-visible {
    outline: 2px solid var(--msf-yellow);
    outline-offset: 4px;
    border-radius: 6px;
  }
  
  
  /* ==================================================
     6) DROPDOWNS (Desktop Only)
     The sub-menu that appears on hover.
     ================================================== */
  @media (min-width: 992px) {
    .msf-navbar__menu .sub-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 240px;
      margin: 0;
      padding: 10px;
      list-style: none;
      background: var(--msf-white);
      border-radius: 14px;
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
      border: 1px solid rgba(0, 0, 0, 0.06);
      z-index: 9999;
    }
  
    /* Show on hover */
    .msf-navbar__menu > li:hover > .sub-menu {
      display: block;
    }
  
    .msf-navbar__menu .sub-menu li a {
      display: block;
      padding: 10px 12px;
      font-family: 'Averia Sans Libre', sans-serif;
      font-weight: 700;
      font-size: 16px;
      color: var(--msf-purple); /* Purple text inside white dropdown */
      text-decoration: none;
      border-radius: 10px;
      transition: background 220ms ease, color 220ms ease;
    }
  
    .msf-navbar__menu .sub-menu li a:hover {
      background: rgba(255, 191, 6, 0.18);
      color: #6f1f6f;
    }
  }
  
  
  /* ==================================================
     7) MOBILE NAVIGATION & ANIMATED TOGGLER
     ================================================== */
  @media (max-width: 991.98px) {
    
    /* --- A. Layout: Toggler Left / Logo Right --- */
    .msf-navbar .container {
      display: flex;
      align-items: center;
      justify-content: space-between; 
    }
  
    .msf-navbar__brand {
      margin-right: 0; 
    }
  
    /* --- B. Toggler Button Reset --- */
    .msf-navbar .navbar-toggler {
      border: none !important;
      box-shadow: none !important;
      padding: 0;
      margin-right: auto; 
    }
  
    /* --- C. Hamburger-to-X Animation --- */
    .msf-toggler-icon {
      width: 30px;
      height: 24px;
      position: relative;
      transform: rotate(0deg);
      transition: 0.6s ease-in-out;
      cursor: pointer;
    }
  
    .msf-toggler-icon span {
      display: block;
      position: absolute;
      height: 3px;
      width: 100%;
      background: var(--msf-yellow); 
      border-radius: 9px;
      opacity: 1;
      left: 0;
      transform: rotate(0deg);
      transition: 0.5s ease-in-out;
    }
  
    /* State 1: Closed (Hamburger) */
    .msf-toggler-icon span:nth-child(1) { top: 0px; }
    .msf-toggler-icon span:nth-child(2) { top: 10px; }
    .msf-toggler-icon span:nth-child(3) { top: 20px; }
  
    /* State 2: Open (X Icon) */
    .navbar-toggler:not(.collapsed) .msf-toggler-icon span:nth-child(1) {
      top: 10px;
      transform: rotate(135deg); 
    }
  
    .navbar-toggler:not(.collapsed) .msf-toggler-icon span:nth-child(2) {
      opacity: 0; 
      left: -60px; /* Slides away smoothly */
    }
  
    .navbar-toggler:not(.collapsed) .msf-toggler-icon span:nth-child(3) {
      top: 10px;
      transform: rotate(-135deg); 
    }
  
    /* --- D. Mobile Menu Styling --- */
    .msf-navbar .navbar-collapse {
      background: var(--msf-purple);
      padding: 10px 0 16px;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      border-bottom: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
      z-index: 9998;
    }
    
    .msf-navbar__menu {
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      padding: 0 var(--msf-pad-x);
    }
    
    .msf-navbar__menu > li { width: 100%; }
    
    .msf-navbar__menu > li > a {
      height: auto;
      width: 100%;
      padding: 12px 0;
      color: #FEEDDB;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    
    .msf-navbar__menu > li > a::after { display: none; }
    
    .msf-navbar__menu .sub-menu {
      display: block;
      position: static;
      background: transparent;
      box-shadow: none;
      border: 0;
      padding: 0 0 8px 12px;
    }
    
    .msf-navbar__menu .sub-menu li a {
      color: var(--msf-yellow);
      opacity: 0.9;
      padding: 8px 0;
    }
  }
  
  
  /* ==================================================
     8) TRIPADVISOR BADGE (Desktop Only)
     The review widget on the far right.
     ================================================== */
  .msf-navbar__ta {
    margin-left: auto;
    padding-left: 22px;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    gap: 12px;
    overflow: hidden;
    max-width: 520px;
  
    transition: opacity 360ms var(--msf-sticky-ease), 
      transform 360ms var(--msf-sticky-ease),
      max-width 420ms var(--msf-sticky-ease), 
      padding-left 420ms var(--msf-sticky-ease),
      border-left-width 420ms var(--msf-sticky-ease);
  }
  
  .msf-navbar__ta-icon {
    width: 60px;
    height: 60px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #5c8b3d;
    color: #ffffff;
    text-decoration: none;
  }
  .msf-navbar__ta-icon svg { width: 50px; height: 50px; }
  .msf-navbar__ta-icon:hover { opacity: 0.92; }
  
  .msf-navbar__ta-title {
    font-family: 'Averia Sans Libre', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.1;
    color: var(--msf-yellow);
  }
  
  .msf-navbar__ta-link {
    font-family: 'Averia Sans Libre', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.1;
    color: #FEEDDB; 
    text-decoration: none;
    display: inline-block;
    transition: color 0.2s ease;
  }
  
  .msf-navbar__ta-link:hover { 
    color: var(--msf-yellow);
    text-decoration: none; 
  }
  
  
  /* ==================================================
     9) DESKTOP INITIAL LAYOUT
     Controls the visual order: Menu Left | Brand Right | TA Far Right
     ================================================== */
  @media (min-width: 992px) {
    .msf-navbar__brand {
      margin: 0 16px 0 auto; /* Brand pushed before TA */
      order: 2;
    }
    .msf-navbar .navbar-collapse {
      order: 1;
      flex: 1 1 auto;
      justify-content: flex-start; /* Menu aligns left */
    }
    .msf-navbar__ta {
      order: 3;
      margin-left: 0;
    }
  }
  
  
  /* ==================================================
     10) STICKY HEADER LOGIC
     Activates when JS adds 'is-scrolled' to body.
     ================================================== */
  body.is-scrolled .msf-navbar {
    position: fixed;
    top: var(--msf-adminbar-h);
    left: 0;
    right: 0;
    width: 100%;
    box-shadow: var(--msf-sticky-shadow);
    transform: translateY(0);
  }
  
  /* Slide-in animation class */
  body.is-scrolled .msf-navbar.msf-navbar--enter {
    transform: translateY(-120%);
  }
  
  /* Add padding to body to prevent content jumping */
  body.is-scrolled {
    padding-top: calc(var(--nav-h, var(--msf-nav-h)) + var(--msf-adminbar-h));
  }
  
  
  /* ==================================================
     11) STICKY HEADER STATE CHANGES
     What changes visually when stuck (Logo flips, size changes)
     ================================================== */
  body.is-scrolled .msf-navbar .container {
    min-height: var(--msf-nav-h-sticky);
  }
  
  body.is-scrolled .msf-navbar__menu > li > a {
    height: var(--msf-nav-h-sticky);
  }
  
  body.is-scrolled .msf-navbar__logo-img {
    height: var(--msf-logo-h-sticky); 
  }
  
  /* Completely hide TripAdvisor when sticky */
  body.is-scrolled .msf-navbar__ta {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    max-width: 0;
    padding-left: 0;
    border-left-width: 0;
  }
  
  /* LAYOUT SWAP: Logo Moves Left, Menu Moves Right */
  @media (min-width: 992px) {
    body.is-scrolled .msf-navbar__brand {
      margin: 0 auto 0 0; /* Logo resets to far left */
      order: 0;
    }
    body.is-scrolled .msf-navbar .navbar-collapse {
      justify-content: flex-end; /* Menu aligns right */
      margin-left: auto;
      order: 1;
      flex: 1 1 auto;
    }
  }
  
  
  /* ==================================================
     12) HOME: WELCOME SECTION (Agriox Style)
     Styles for the 'About Us' section on the homepage.
     ================================================== */
  .msf-welcome-section {
    padding: 100px 0;
    background-color: #fff;
    overflow: hidden;
  }
  
  .text-purple { color: var(--msf-purple); }
  .tracking-wide { letter-spacing: 2px; font-size: 0.85rem; }
  
  .msf-divider {
    width: 60px;
    height: 3px;
    background-color: var(--msf-yellow);
    border-radius: 2px;
  }
  
  .msf-welcome-images {
    padding-right: 20px;
    padding-bottom: 20px;
  }
  
  /* Floating "100% Organic" Badge */
  .msf-welcome-badge {
    position: absolute;
    bottom: -30px;
    right: 20px;
    z-index: 2;
  }
  
  .msf-year-badge {
    width: 140px;
    height: 140px;
    background: var(--msf-yellow);
    border: 8px solid #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    animation: floatBadge 4s ease-in-out infinite;
  }
  
  .msf-year-num {
    font-family: 'Averia Sans Libre', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
  }
  
  .msf-year-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--msf-purple);
    text-transform: uppercase;
  }
  
  /* Signature Style */
  .msf-signature-text {
    font-family: 'Brush Script MT', cursive;
    font-size: 2rem;
    color: var(--msf-purple);
    opacity: 0.7;
    transform: rotate(-5deg);
    display: inline-block;
  }
  
  @keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  
  @media (max-width: 991px) {
    .msf-welcome-section { padding: 60px 0; }
    .msf-welcome-badge { right: 0; bottom: -20px; }
    .msf-year-badge { width: 100px; height: 100px; }
    .msf-year-num { font-size: 1.5rem; }
  }
  
  
  /* ==================================================
     13) ACCESSIBILITY (Reduced Motion)
     ================================================== */
  @media (prefers-reduced-motion: reduce) {
    .msf-navbar,
    .msf-navbar .container,
    .msf-navbar__logo-img,
    .msf-navbar__menu > li > a,
    .msf-navbar__ta,
    .msf-year-badge {
      transition: none !important;
      animation: none !important;
    }
  }
  
  /* ==================================================
     14) LAPTOP FIXES (992px - 1300px)
     Prevents overcrowding on smaller desktop screens.
     ================================================== */
  @media (min-width: 992px) and (max-width: 1300px) {
    
    /* --- 1. Top Bar Layout --- */
    .site-topbar .col-lg-4:first-child {
      display: none !important;
    }
    .site-topbar .col-lg-4 {
      width: 50%;
    }
    .site-topbar__hours {
      display: inline-block !important;
    }
    
    /* --- 2. FORCE COLORS (Yellow) --- */
    .site-topbar i.bi,
    .site-topbar .text-warning {
      color: var(--msf-yellow) !important;
    }
    .site-topbar__social-link:hover {
      background-color: var(--msf-yellow) !important;
      color: var(--msf-purple) !important;
    }
  
    /* --- 3. Navbar Layout & Colors --- */
    :root {
      --msf-logo-h: 36px;
    }
    .msf-navbar__menu {
      gap: 14px; 
    }
    .msf-navbar__menu > li:hover > a {
      color: var(--msf-yellow) !important;
    }
  
    /* --- 4. TripAdvisor --- */
    .msf-navbar__ta-text {
      display: none !important;
    }
    .msf-navbar__ta {
      padding-left: 0;
      border: none;
      max-width: 70px;
      overflow: visible;
      justify-content: flex-end;
    }
    .msf-navbar__ta-icon {
      flex-shrink: 0;
      transform: scale(0.9);
    }
  }
  
  /* ==================================================
     15) HERO ANIMATION (Floating Man)
     ================================================== */
  .slide-in-img {
    opacity: 0;
    transform: translateX(-150px); /* Starts to the left */
    transition: all 1.2s ease-out;
    max-height: 80vh; /* Prevents him from being too huge on big screens */
    object-fit: contain;
  }
  
  /* When the slide is active, bring him in */
  .swiper-slide-active .slide-in-img {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.3s;
  }
  
  /* Helper to ensure text/image sit above overlay */
  .z-index-2 {
    position: relative;
    z-index: 2;
  }
  
  /* ==================================================
     17) RESPONSIVE HERO STYLES (Mobile & Tablet)
     FIXES: Removed Top Gap, Centered Buttons & Text
     ================================================== */
  @media (max-width: 991px) {
  
      /* 1. Layout: Push content to the top, but center it horizontally */
      .hero-inner .row {
          align-items: flex-start !important; /* Forces content to start at the top */
          justify-content: center !important; /* Centers content horizontally */
          height: auto !important;
          margin-top: 0 !important;
      }
  
      /* 2. Remove the "Big Space" caused by huge padding */
      .hero-slide {
          height: auto !important;
          min-height: 400px; /* Safe minimum height for mobile */
          
          /* FIX: Only 10px top padding as requested */
          padding-top: 10px !important; 
          
          padding-bottom: 40px; /* Space at the bottom for buttons */
          padding-left: 15px;
          padding-right: 15px;
      }
  
      /* 3. Center Text & Elements */
      .hero-content {
          width: 100%;
          text-align: center !important; /* Force text to be centered */
          margin-top: 0 !important;
      }
  
      /* Override any specific left-align classes from desktop */
      .hero-content.text-start {
          text-align: center !important;
      }
  
      /* 4. Center Buttons & Stack Them */
      .hero-cta,
      .hero-cta.justify-content-start {
          justify-content: center !important;
          flex-direction: column; /* Stack buttons vertically */
          gap: 10px;
          margin-top: 1rem;
      }
  
      .hero-cta .btn {
          width: 100%;
          max-width: 280px; /* Good width for phones */
          margin: 0 auto;   /* Center the button itself */
      }
  
      /* 5. Adjust Font Sizes for Mobile */
      .hero-title {
          font-size: 1.8rem; /* Smaller to fit screen */
          line-height: 1.2;
          margin-bottom: 0.5rem;
      }
  
      .hero-subtitle {
          font-size: 1rem;
          margin-bottom: 1rem;
      }
  }
  
  
  /* ==================================================
     18) FEATURES SECTION (Boxed Checkerboard)
     ================================================== */
  .msf-checkerboard {
  background-color: #fff;
  width: 100%;
  
  /* ADDED: Spacing from the slider */
  margin-top: 30px;
  margin-bottom: 30px;
  }
  
  .feature-row {
  min-height: 500px;
  
  /* ADDED: Rounded corners for the "Boxed" look */
  border-radius: 20px;
  overflow: hidden; 
  
  /* Optional: Subtle shadow to make them pop */
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  }
  
  /* --- IMAGE COLUMN --- */
  .feature-img-col {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  }
  
  .feature-img-wrap {
  width: 100%;
  height: 100%;
  }
  
  .feature-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
  }
  
  .feature-row:hover .feature-img-wrap img {
  transform: scale(1.04);
  }
  
  /* --- TEXT COLUMN --- */
  .feature-txt-col {
  background-color: #fdfbf7; /* Light Cream */
  padding: 60px; /* Comfortable padding */
  }
  
  .feature-txt-inner {
  max-width: 480px;
  margin: 0 auto;
  }
  
  .feature-title {
  font-family: 'Averia Sans Libre', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: var(--msf-purple);
  margin-bottom: 20px;
  line-height: 1.2;
  }
  
  .feature-divider {
  width: 60px;
  height: 3px;
  background-color: var(--msf-yellow);
  margin-bottom: 25px;
  }
  
  .feature-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #555;
  margin-bottom: 30px;
  }
  
  /* Button Styling */
  .feature-btn {
  border: 1px solid var(--msf-purple);
  color: var(--msf-purple);
  border-radius: 4px;
  padding: 10px 28px;
  font-family: 'Averia Sans Libre', sans-serif;
  font-weight: 700;
  transition: all 0.3s ease;
  }
  
  .feature-btn:hover {
  background-color: var(--msf-purple);
  color: var(--msf-yellow);
  border-color: var(--msf-purple);
  }
  
  /* --- MOBILE RESPONSIVENESS --- */
  @media (max-width: 991px) {
  
  .msf-checkerboard {
    margin-top: 60px; /* Less spacing on mobile */
    margin-bottom: 60px;
  }
  
  .feature-row {
    min-height: auto;
    border-radius: 12px; /* Smaller radius on mobile */
    margin-bottom: 30px !important; /* Space between cards */
  }
  
  .feature-img-col {
    height: 250px; /* Shorter images on mobile */
  }
  
  .feature-txt-col {
    padding: 40px 20px;
    text-align: center;
  }
  
  .feature-txt-inner {
    margin: 0 auto;
  }
  
  .feature-divider {
    margin-left: auto;
    margin-right: auto;
  }
  }
  /* ==================================================
   19) BEST SELLERS (Zoom + Circle + Button Fix + Averia Title)
   ================================================== */
   .msf-products {
    position: relative;
    padding: 80px 0;
    background-color: #FDFBF7; 
    z-index: 1;
}

/* Background Decor */
.msf-products::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 600px; height: 600px; 
    background-image: url('../img/decor/bg-decor-left.png'); 
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
    opacity: 0.15; 
    z-index: 0;
    pointer-events: none;
}

.msf-products .container { position: relative; z-index: 2; }
.msf-products h2 { font-family: 'Averia Sans Libre', sans-serif; }

/* --- CARD STRUCTURE --- */
.product-card {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    overflow: hidden; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    position: relative; 
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* --- MEDIA WRAPPER --- */
.product-media {
    position: relative;
    overflow: hidden; 
    height: 280px;
    width: 100%;
    z-index: 1; 
}

/* --- THE IMAGE (Layer 2) --- */
.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    z-index: 2; 
}

.product-card:hover .product-img {
    transform: scale(1.12);
}

/* --- THE CIRCLE EFFECT (Layer 5) --- */
.product-media::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: rgba(255, 255, 255, 0.5); 
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none; 
    z-index: 5; 
}

.product-card:hover .product-media::before {
    animation: circle 0.75s ease 0s 1 normal forwards;
}

@keyframes circle {
    0% { width: 0; height: 0; opacity: 0.8; }
    100% { width: 200%; height: 200%; opacity: 0; }
}

/* --- THE BUTTON (Layer 20) --- */
.btn-quick-view {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -20%); 
    background-color: #FFBF06;
    color: #000;
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'Averia Sans Libre', sans-serif;
    font-size: 0.85rem;
    padding: 12px 26px;
    border-radius: 30px;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 20; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.product-card:hover .btn-quick-view {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%); 
}

.btn-quick-view:hover {
    background-color: #e6ac00;
    color: #000;
}

/* --- TEXT CONTENT (Updated Font) --- */
.product-info {
    padding: 25px;
    text-align: center;
    position: relative;
    z-index: 10; 
    background: #fff;
}

/* 1. Target the Link specifically */
.msf-products .product-title a {
  font-family: 'Averia Serif Libre', serif !important; /* The Serif Font */
  font-weight: 600 !important;
  font-size: 1.1rem;
  color: #333;
  text-decoration: none;
  transition: color 0.2s;
  letter-spacing: 0; /* Serif fonts usually need less spacing */
}

/* 2. Target the Heading tag itself (just in case) */
.msf-products .product-title {
  font-family: 'Averia Serif Libre', serif !important;
  margin-bottom: 8px;
}

.product-card:hover .product-title a {
  /*color: #FFBF06 !important;*/
}


/* Price Font */
.msf-products .product-price {
  font-family: 'Averia Sans Libre', sans-serif !important;
  color: var(--msf-yellow);
  font-weight: 600;
  font-size: 1rem;
  margin-top: 8px;
  display: block;
}


.product-price {
    font-family: 'Averia Sans Libre', sans-serif;
    color: var(--msf-yellow);
    font-weight: 700;
}

/* --- SHOP ALL BUTTON --- */
.msf-products .btn-outline-dark {
    background-color: #C70039 !important;
    border-color: #C70039 !important;
    color: #ffffff !important;
    font-family: 'Averia Sans Libre', sans-serif; 
    font-weight: 700;
    transition: all 0.3s ease;
}
.msf-products .btn-outline-dark:hover {
    background-color: #9A1F46 !important;
    transform: translateY(-3px);
}
  
  /* ==================================================
     20) REVIEWS SECTION (FINAL FIX: Layout + Arrows)
     ================================================== */
     .msf-reviews {
      padding: 100px 0;
      background-color: #ffffff; 
      overflow: hidden; /* Hides the "partial" slide on the edge */
  }
  
  /* 1. CONTAINER FIX: Center the slider block */
  .reviews-swiper {
      padding-bottom: 50px !important;
      max-width: 1200px; /* Constrains width so exactly 3 cards fit */
      margin: 0 auto !important; /* Centers the whole block on screen */
  }
  
  /* 2. CARD STYLING */
  .review-card {
      background: #fff;
      padding: 40px 30px;
      border-radius: 12px;
      text-align: center;
      box-shadow: 0 10px 40px rgba(0,0,0,0.06); 
      width: 100%; 
      height: 100%; /* Ensures all cards are same height */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border: 1px solid rgba(0,0,0,0.02);
      transition: transform 0.3s ease;
  }
  
  .review-card:hover { transform: translateY(-5px); box-shadow: 0 15px 50px rgba(0,0,0,0.1); }
  .review-stars { color: var(--msf-yellow); font-size: 1.1rem; letter-spacing: 2px; }
  .review-text { font-size: 1.1rem; font-style: italic; color: #555; line-height: 1.6; font-family: 'Averia Sans Libre', sans-serif; }
  .review-author h5 { font-family: 'Averia Sans Libre', sans-serif; }
  
  /* 3. CONTROL CENTER (Arrows + Dots) */
  .review-controls {
      margin-top: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px; /* Space between arrow and dots */
  }
  
  /* 4. CUSTOM ARROWS (Gold & Purple) */
  /* We use !important to override the default Blue Swiper arrows */
  .msf-reviews .swiper-button-prev,
  .msf-reviews .swiper-button-next {
      position: static !important; /* Forces them to stay in our center group */
      margin: 0 !important;
      width: 50px !important;
      height: 50px !important;
      
      background-image: none !important; /* Kills the blue arrow */
      background-color: transparent;
      
      border: 2px solid var(--msf-yellow);
      border-radius: 50%;
      color: var(--msf-purple);
      
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      cursor: pointer;
  }
  
  /* Hide the default Swiper icon font */
  .msf-reviews .swiper-button-prev::after,
  .msf-reviews .swiper-button-next::after {
      display: none !important;
  }
  
  /* Style our Bootstrap Icon inside */
  .msf-reviews .custom-arrow i {
      font-size: 1.5rem;
      line-height: 0;
  }
  
  /* Hover Effect */
  .msf-reviews .custom-arrow:hover {
      background-color: var(--msf-purple);
      border-color: var(--msf-purple);
      color: var(--msf-yellow);
      transform: scale(1.1);
  }
  
  /* 5. DOTS STYLING */
  .msf-reviews .swiper-pagination {
      position: static !important;
      width: auto !important;
      margin: 0 !important;
      display: flex;
      align-items: center;
  }
  
  .msf-reviews .swiper-pagination-bullet {
      width: 10px;
      height: 10px;
      background: #e0e0e0;
      opacity: 1;
      margin: 0 5px !important;
  }
  
  .msf-reviews .swiper-pagination-bullet-active {
      background: var(--msf-purple);
      transform: scale(1.3);
  }
  
  /* ==================================================
     20) REVIEWS SECTION (Complete Final Version)
     ================================================== */
     .msf-reviews {
      position: relative;
      padding: 100px 0;
      background-color: #ffffff; 
      overflow: hidden; /* Hides partial slides on edges */
      z-index: 1;
  }
  
  /* --- TRIPADVISOR WATERMARK (Background) --- */
  .msf-reviews::before {
      content: "";
      position: absolute;
      top: -30px;
      right: -50px;
      width: 450px; 
      height: 450px;
      
      /* Ensure this path matches your image location */
      background-image: url('../img/decor/tripadvisor.png'); 
      
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      opacity: 0.08; /* Subtle watermark (8%) */
      z-index: -1;
      pointer-events: none;
      transform: rotate(15deg);
  }
  
  /* Mobile Watermark Adjustment */
  @media (max-width: 768px) {
      .msf-reviews::before {
          width: 250px;
          height: 250px;
          top: 0;
          right: -20px;
          opacity: 0.05;
      }
  }
  
  /* --- LAYOUT CONSTRAINT (Centers the 3 cards) --- */
  .reviews-swiper {
      padding-bottom: 50px !important;
      max-width: 1200px; /* Forces exactly 3 cards to fit */
      margin: 0 auto !important; /* Centers the whole block */
  }
  
  /* --- CARD STYLING --- */
  .review-card {
      background: #fff;
      padding: 40px 30px;
      border-radius: 12px;
      text-align: center;
      box-shadow: 0 10px 40px rgba(0,0,0,0.06); 
      width: 100%; 
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border: 1px solid rgba(0,0,0,0.02);
      transition: transform 0.3s ease;
  }
  
  .review-card:hover { 
      transform: translateY(-5px); 
      box-shadow: 0 15px 50px rgba(0,0,0,0.1); 
  }
  
  .review-stars { color: var(--msf-yellow); font-size: 1.1rem; letter-spacing: 2px; }
  .review-text { font-size: 1.1rem; font-style: italic; color: #555; line-height: 1.6; font-family: 'Averia Sans Libre', sans-serif; }
  .review-author h5 { font-family: 'Averia Sans Libre', sans-serif; }
  
  /* --- CONTROL CENTER (Arrows + Dots) --- */
  
  /* 1. Flex Container */
  .review-controls {
      margin-top: 40px;
  }
  
  /* 2. Custom Arrows (Gold & Purple Circles) */
  .msf-reviews .swiper-button-prev,
  .msf-reviews .swiper-button-next {
      position: static !important; /* Removes default absolute positioning */
      margin: 0 !important;
      width: 50px !important;
      height: 50px !important;
      
      /* Reset Default Swiper Styles */
      background-image: none !important; 
      background-color: transparent;
      
      /* Our Custom Style */
      border: 2px solid var(--msf-yellow);
      border-radius: 50%;
      color: var(--msf-purple);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      cursor: pointer;
  }
  
  /* Hide default pseudo-elements */
  .msf-reviews .swiper-button-prev::after,
  .msf-reviews .swiper-button-next::after {
      display: none !important;
  }
  
  /* Icon Size */
  .msf-reviews .custom-arrow i {
      font-size: 1.5rem;
      line-height: 0;
  }
  
  /* Hover Effect */
  .msf-reviews .custom-arrow:hover {
      background-color: var(--msf-purple);
      border-color: var(--msf-purple);
      color: var(--msf-yellow);
      transform: scale(1.1);
  }
  
  /* 3. Pagination Dots (Middle) */
  .msf-reviews .swiper-pagination {
      position: static !important;
      width: auto !important;
      margin: 0 !important;
      display: flex;
      align-items: center;
  }
  
  .msf-reviews .swiper-pagination-bullet {
      width: 10px;
      height: 10px;
      background: #e0e0e0;
      opacity: 1;
      margin: 0 6px !important;
      transition: all 0.3s ease;
  }
  
  .msf-reviews .swiper-pagination-bullet-active {
      background: var(--msf-purple);
      transform: scale(1.3);
  }
  
  /* ==================================================
     SAFFRON RED BUTTON
     ================================================== */
  
  /* Normal State */
  .msf-products .btn-outline-dark {
    /* A rich, deep red like saffron threads */
    background-color: #C70039 !important; 
    border-color: #C70039 !important;
    color: #ffffff !important; /* White text for good contrast */
    transition: all 0.3s ease;
  }
  
  /* Hover State (Slightly darker for effect) */
  .msf-products .btn-outline-dark:hover {
    background-color: #9A1F46 !important; 
    border-color: #9A1F46 !important;
    color: #ffffff !important;
    transform: translateY(-3px); /* Adds a little lift effect */
    box-shadow: 0 5px 15px rgba(199, 0, 57, 0.3); /* Red glow shadow */
  }
  
  /* ==================================================
     21) LUXURY FOOTER
     ================================================== */
     .msf-footer {
      background-color: var(--msf-purple); /* Deep Purple Background */
      color: #fff;
      padding-top: 80px;
      padding-bottom: 30px;
      font-family: 'Averia Sans Libre', sans-serif;
  }
  
  /* Headings */
  .footer-heading {
      font-size: 0.9rem;
      letter-spacing: 2px;
      font-weight: 700;
  }
  
  /* Links */
  .footer-links li {
      margin-bottom: 12px;
  }
  
  .footer-links a {
      color: rgba(255, 255, 255, 0.7);
      text-decoration: none;
      transition: all 0.3s ease;
      font-size: 1.05rem;
  }
  
  .footer-links a:hover {
      color: var(--msf-yellow); /* Gold on Hover */
      padding-left: 5px; /* Subtle movement */
  }
  
  /* Contact Info Links */
  .footer-contact a {
      text-decoration: none;
      transition: color 0.3s ease;
  }
  .footer-contact a:hover {
      color: var(--msf-yellow) !important;
  }
  
  /* Social Icons */
  .social-link {
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      text-decoration: none;
      transition: all 0.3s ease;
      border: 1px solid transparent;
  }
  
  .social-link:hover {
      background: var(--msf-yellow);
      color: var(--msf-purple);
      transform: translateY(-3px);
  }
  
  /* Newsletter Form */
  .newsletter-form .form-control {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #fff;
      border-radius: 30px 0 0 30px; /* Rounded Left */
      padding: 10px 20px;
  }
  
  .newsletter-form .form-control::placeholder {
      color: rgba(255, 255, 255, 0.5);
  }
  
  .newsletter-form .form-control:focus {
      background: rgba(255, 255, 255, 0.2);
      box-shadow: none;
      border-color: var(--msf-yellow);
  }
  
  .newsletter-form .btn-warning {
      border-radius: 0 30px 30px 0; /* Rounded Right */
      background: var(--msf-yellow);
      color: var(--msf-purple);
      border: none;
      padding: 0 20px;
  }
  
  .newsletter-form .btn-warning:hover {
      background: #fff;
  }
  
  /* Bottom Bar */
  .footer-bottom {
      border-color: rgba(255, 255, 255, 0.1) !important;
  }
  
  /* Social Icons (Clean Header Style) */
  .msf-footer .social-link {
    /* Remove the circle/button styles */
    background: none !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    
    /* Icon Styling */
    color: rgba(255, 255, 255, 0.7); /* Muted White */
    font-size: 1.3rem; /* Good readable size */
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
  }
  
  .msf-footer .social-link:hover {
    color: var(--msf-yellow) !important; /* Gold on Hover */
    background: none !important;
    transform: translateY(-3px); /* Slight lift */
  }
  
  
  /* ==================================================
     SECTION DECORATION (Red Gold Section) - FIXED
     ================================================== */
     .msf-checkerboard {
      position: relative;
      overflow: hidden; 
      padding-top: 20px;
      padding-bottom: 20px;
      /* Keeps the white background, but we manage layers below */
      background-color: #fff; 
  }
  
  /* THE WATERMARK IMAGE (Top Right & Bigger) */
  .msf-checkerboard::before {
      content: "";
      position: absolute;
      
      /* CHANGED: Positioned Top-Right and slightly off-screen */
      top: -50px;    
      right: -100px; 
      left: auto; /* Reset left property */
  
      /* CHANGED: Made Bigger (was 600px) */
      width: 800px;
      height: 800px;
      
      /* Ensure this file path is correct! */
      background-image: url('../img/decor/brand-illustration.png'); 
      
      background-repeat: no-repeat;
      
      /* CHANGED: Align image to the right */
      background-position: top right;
      background-size: contain;
      
      opacity: 0.15; 
      
      /* FIX IS HERE: Changed from -1 to 0 */
      /* This brings it in FRONT of the white section background */
      z-index: 0;   
      
      pointer-events: none;
      transform: rotate(-5deg);
  }
  
  /* ENSURE TEXT STAYS ON TOP */
  .msf-checkerboard .container {
      position: relative;
      /* This ensures text floats ABOVE the watermark */
      z-index: 2; 
  }
  
  /* Mobile Adjustment */
  @media (max-width: 768px) {
      .msf-checkerboard::before {
          /* Adjusted mobile size and position */
          width: 400px;
          height: 400px;
          right: -50px;
          opacity: 0.1;
      }
  }
  
  /* ==================================================
     CHECKERBOARD BUTTONS (Match Harvest Red Style)
     ================================================== */
  
  /* Target the specific button class we added in PHP */
  .msf-checkerboard .btn-saffron-red {
    background-color: #C70039 !important; /* Saffron Red */
    border-color: #C70039 !important;
    color: #ffffff !important;
    font-weight: 700;
    transition: all 0.3s ease;
  }
  
  .msf-checkerboard .btn-saffron-red:hover {
    background-color: #9A1F46 !important; /* Darker Red on Hover */
    border-color: #9A1F46 !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(199, 0, 57, 0.3);
  }
  
  /* ==================================================
     ROTATING "ORGANIC" BADGE (Forward & Backward)
     ================================================== */
     .msf-rotating-badge {
      position: absolute;
      top: 20px;
      right: 20px;
      
      width: 130px;
      height: 130px;
      object-fit: contain;
      z-index: 10;
      
      /* ANIMATION CHANGE: 
         - 20s: Slower speed for elegance
         - ease-in-out: Slows down at the start and end (smooth turn)
         - alternate: Goes Forward (0->360) then Backward (360->0) 
      */
      animation: spinBadge 20s ease-in-out infinite alternate;
  }
  
  /* Keyframes (0 to 360 degrees) */
  @keyframes spinBadge {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }
  
  /* Mobile Adjustment */
  @media (max-width: 768px) {
      .msf-rotating-badge {
          width: 90px;
          height: 90px;
          top: 15px;
          right: 15px;
      }
  }
  
  /* ==================================================
     BACK TO TOP BUTTON
     ================================================== */
     .back-to-top {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 50px;
      height: 50px;
      
      /* Brand Colors */
      background-color: var(--msf-purple);
      color: var(--msf-yellow);
      border: 2px solid var(--msf-yellow);
      
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      text-decoration: none;
      z-index: 9999; /* Ensure it's on top of everything */
      
      /* Animation Properties */
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px);
      transition: all 0.4s ease;
      cursor: pointer;
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  }
  
  /* Hover State */
  .back-to-top:hover {
      background-color: var(--msf-yellow);
      color: var(--msf-purple);
      transform: translateY(-5px); /* Slight lift */
  }
  
  /* Active State (Added by JS) */
  .back-to-top.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
  }
  
  /* ==================================================
     IMAGE SHINE EFFECT (Agriox Style)
     ================================================== */
  
  /* 1. Target the image container */
  .msf-checkerboard .position-relative {
    overflow: hidden; /* CRITICAL: Keeps the shine inside the box */
    display: block;   /* Ensures it captures the hover */
    cursor: pointer;  /* Shows it's interactive */
  }
  
  /* 2. Create the "Shine" Bar */
  .msf-checkerboard .position-relative::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%; /* Start completely off-screen to the left */
    width: 50%;  /* Width of the shine beam */
    height: 100%;
    
    /* The Shine Gradient: Transparent -> White -> Transparent */
    background: linear-gradient(
       to right, 
       rgba(255, 255, 255, 0) 0%, 
       rgba(255, 255, 255, 0.3) 100%
    );
    
    /* Tilt it diagonally */
    transform: skewX(-25deg);
    z-index: 5; /* Sit on top of image, but below the Organic Badge (z-10) */
    pointer-events: none; /* Click passes through to the link */
  }
  
  /* 3. Trigger Animation on Hover */
  .msf-checkerboard .position-relative:hover::before {
    animation: shineSlide 1.4s ease-in-out;
  }
  
  /* 4. Define the Animation Movement */
  @keyframes shineSlide {
    100% {
       left: 200%; /* Move all the way to the right */
    }
  }