/* =========================================================
   🌿 SFRAMEWORK.CSS
   FreshMarket Storefront CSS Framework
   Author: FreshMarket Dev Team
   ========================================================= */

/* ---------------------------------------------------------
   1. GLOBAL VARIABLES & RESET
--------------------------------------------------------- */
:root {
  --color-primary: #78b332;
  --color-primary-dark: #218838;
  --color-secondary: #155724;
  --color-accent: #f6fdf8;
  --color-text: #222;
  --color-light: #fff;
  --font-family: 'Poppins', sans-serif;
}

/* =======================================================================
   🌈 GLOBAL THEME VARIABLES — Unified for Desktop + Mobile (Official)
   Using the existing MH variables as the universal color system
======================================================================= */

:root {
  --mh-primary: #78b332;
  --mh-primary-dark: #1e7e34;

  --mh-text: #ffffff;
  --mh-icon: #ffffff;
  
  --mh-search-bg: #ffffff;
  --mh-search-text: #333333;

  --mh-cart-badge-bg: #ffffff;
  --mh-cart-badge-text: #28a745;

  /* NEW for desktop UI (extend MH namespace) */
  --mh-header-bg: #ffffff;          /* Desktop menubar + searchbar background */
  --mh-border-light: #e5e5e5;       /* Subtle borders */
  --mh-body-bg: #f8fdf9;            /* Page background */
  --mh-card-bg: #ffffff;            /* Widgets, highlight cards */
  --mh-card-shadow: rgba(0,0,0,0.06);
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================
   🅣 GLOBAL TYPOGRAPHY SYSTEM — STOREFRONT (AUTHORITATIVE)
   Applies storefront-wide. Non-destructive. No logic changes.
   ============================================================ */

/* ---------- Base Text ---------- */
body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
  font-family: var(--font-family);
}

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  font-weight: 600;
  color: #111;
  margin: 0 0 6px 0;
  line-height: 1.25;
}

h1 { font-size: 26px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 13px; }

/* ---------- Paragraph ---------- */
p {
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.55;
  color: #333;
}

/* ---------- Links ---------- */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration: none;
}

/* ---------- Lists ---------- */
ul,
ol {
  margin: 8px 0 8px 20px;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
}

li {
  margin: 4px 0;
}

/* ---------- Text Utilities ---------- */
.sf-text-xs { font-size: 11px; }
.sf-text-sm { font-size: 13px; }
.sf-text-md { font-size: 14px; }
.sf-text-lg { font-size: 16px; }
.sf-text-xl { font-size: 18px; }

.sf-text-light  { font-weight: 400; }
.sf-text-normal { font-weight: 500; }
.sf-text-bold   { font-weight: 600; }
.sf-text-heavy  { font-weight: 700; }

.sf-text-muted  { color: #777; }
.sf-text-dark   { color: #222; }
.sf-text-primary { color: var(--color-primary); }
.sf-text-danger { color: #cf0000; }
.sf-text-warning { color: #b57c00; }
.sf-text-success { color: #28a745; }

/* ---------- Text Utilities Dark BG ---------- */

.sf-dark {
  color: #fff;
}

/* Text elements only */
.sf-dark h1,
.sf-dark h2,
.sf-dark h3,
.sf-dark h4,
.sf-dark h5,
.sf-dark h6,
.sf-dark p,
.sf-dark span,
.sf-dark li,
.sf-dark small {
  color: #fff;
}

/* Muted text */
.sf-dark .sf-text-muted {
  color: rgba(255,255,255,0.7);
}

/* Links */
.sf-dark a:not(.sf-btn):not(.sf-hero-btn) {
  color: #fff;
}


/* ---------- Inline Elements ---------- */
strong {
  font-weight: 600;
  color: #111;
}

small {
  font-size: 12px;
  color: #666;
}

/* ---------- Responsive Scaling ---------- */
@media (max-width: 768px) {
  body { font-size: 13px; }

  h1 { font-size: 22px; }
  h2 { font-size: 19px; }
  h3 { font-size: 16px; }
}

/* ---------------------------------------------------------
   2. LAYOUT WRAPPER
--------------------------------------------------------- */
.storefront-wrapper {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0px 20px;
}

/* ---------------------------------------------------------
   3. NOTIFICATION BAR
   Mobile-only • Two-row layout
   (JS controls FB in-app visibility)
--------------------------------------------------------- */

/* ❌ Desktop / Tablet — never show */
@media (min-width: 769px) {
  .notification-bar {
    display: none !important;
  }
}

/* 📱 Mobile only */
@media (max-width: 768px) {

  .notification-bar {
    position: fixed;
    top: -120px; /* hidden by default */
    left: 0;
    width: 100%;
    background: #1e7e34;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 600;
    transition: top 0.4s ease;
  }

  .notification-bar.show {
    top: 0;
  }

  .notice-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* ── ROW 1: text + close ── */
  .notice-row-top {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  .notice-row-top p {
    margin: 0;
    flex: 1;
    line-height: 1.35;
  }

  .notice-close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
  }

  .notice-close i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
  }

  /* ── ROW 2: action button ── */
  .notice-row-bottom {
    display: flex;
    justify-content: flex-end;
  }

  .notice-open {
    background: #ffffff;
    color: #1e7e34;
    border: none;
    border-radius: 14px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }
}

/* ---------------------------------------------------------
   4. HEADER (LOGO + CART + ACCOUNT)
--------------------------------------------------------- */
header.header {
  background: var(--color-light);
  border-bottom: 1px solid #e5e5e5;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.header-left img.logo {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: contain;
}

.header-left h1.store-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-btn {
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: 0.2s ease;
}

.header-btn:hover {
  color: var(--color-primary);
}
/* ---------------------------------------------------------
   5. TOP BAR (UTILITY LINKS)
   Flat Layout — scrolls normally with the page
--------------------------------------------------------- */
.top-bar {
    position: fixed;
    width: 100%;
    background: var(--color-secondary, #155724);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    z-index: 500;
    box-shadow: none;
    top: 0px;
}

/* --- Links & Buttons --- */
.top-bar a,
.top-bar button {
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease;
}

.top-bar a:hover,
.top-bar button:hover {
  opacity: 0.85;
  text-decoration: underline;
}

/* --- Icons --- */
.top-bar i {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
}

/* --- Responsive (Mobile) --- */
@media (max-width: 768px) {
  .top-bar {
    font-size: 11px;
    gap: 10px;
    padding: 4px 8px;
  }
}

/* ========================================================= 
   DESKTOP MENU BAR — FOLLOW SEARCH BAR ARCHITECTURE
   (Updated to use global theme variables)
========================================================= */

/* Full-width background container */
.sf-menubar-container {
  width: 100%;
  background: var(--mh-primary);
  border-bottom: 1px solid var(--sf-border);
  padding-top: 10px 0;
  padding-bottom: 0px;
}

/* Inner centered 3-column grid */
.sf-menubar-grid {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 0px;

  display: grid;
  grid-template-columns: 240px 1fr 240px; /* SAME AS SEARCH BAR */
  align-items: center;
  gap: 20px;
}

/* Left menubar box EXACT SAME STYLE as right column widgets */
.sf-menubar-left-box {
  background: var(--sf-light);
  padding: 12px 16px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);

  display: flex;
  align-items: center;
  justify-content: flex-start;

  height: 46px;
  box-sizing: border-box;
}

/* LEFT GREEN LABEL — identical to cart box style */
.sf-menubar-left-green {
  background: var(--mh-primary-dark);
  color: var(--sf-text);

  padding: 8px 14px;
  border-radius: 0px;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  font-weight: 600;
  font-size: 14px;

  height: 38px;
  cursor: default;
}

/* text inside */
.sf-menubar-left-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--sf-text);
}

/* Center menu list */
.sf-menubar-center {
  list-style: none;
  display: flex;
  gap: 26px;
  padding: 0;
  margin: 0;
  justify-content: flex-start;
}

.sf-menubar-center a {
  color: var(--mh-text);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.sf-menubar-center a:hover {
  color: var(--sf-primary);
}

/* Right column – Cart Box */
.sf-menu-cart-box {
  background: var(--sf-primary);
  color: var(--sf-text);
  padding: 8px 14px;
  border-radius: 0px;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;

  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.sf-menu-cart-box:hover {
  background: var(--sf-primary-dark);
}

.sf-menu-cart-box i {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

.sf-menu-cart-subtotal {
  font-size: 14px;
}

.sf-menu-cart-count {
  background: var(--mh-text);
  color: var(--mh-primary-dark);
  font-size: 12px;
  font-weight: 700;
  border-radius: 14px;
  padding: 2px 7px;
}

.menu-bar-desktop-grid .menu-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: var(--mh-primary-dark);

}

.menu-right {
  background: var(--mh-primary-dark);

}

/* Hide on mobile */
@media (max-width: 1024px) {
  .sf-menubar-container {
    display: none !important;
  }
}

/* ---------------------------------------------------------
   7. MENU BAR (MOBILE)
--------------------------------------------------------- */
.menu-bar-mobile {
  display: none;
}

@media (max-width: 1024px) {
  .menu-bar-desktop {
    display: none !important;
  }
}

/* =========================================================
   STOREFRONT SEARCH BAR (DESKTOP)
========================================================= */
.sf-searchbar-container {
  background: var(--mh-primary);
  border-bottom: 0px solid #eee;
  padding: 7px 0;
}

.sf-searchbar-grid {
  display: grid;
  grid-template-columns: 240px 1fr 240px; /* ✅ Same as sf-home-grid */
  gap: 28px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 0px;
  align-items: center;
}

.sf-store-logo {
  height: 55px;
  max-width: 100%;
  object-fit: contain;
  display: block;

  /* Force ANY logo to become white */
  filter: brightness(0) invert(1) drop-shadow(0 0 1px rgba(255,255,255,0.8));
}




/* --- Search Form --- */
.sf-search-form {
  display: flex;
  align-items: center;
  background: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  transition: border 0.2s ease;
}
.sf-search-form:focus-within {
  border-color: var(--color-primary, #28a745);
}

.sf-search-input {
  flex: 1;
  padding: 10px 14px;
  border: none;
  outline: none;
  font-size: 15px;
  background: transparent;
}

.sf-search-btn {
  background: var(--color-primary, #28a745);
  color: #fff;
  border: none;
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.sf-search-btn:hover {
  background: #218838;
}

/* --- Icons --- */
.sf-searchbar-right {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

.sf-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #222;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}
.sf-icon-link:hover {
  background: #f3f3f3;
  color: var(--color-primary, #28a745);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .sf-searchbar-container {
    display: none; /* Hide on mobile */
  }
}
.sf-desktop-layout {
  display: grid;
  grid-template-columns: 260px 1fr 260px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  gap: 20px;
}

.sf-center-col {
  max-width: 1200px;
  width: 100%;
}

.sf-menubar-grid {
  box-sizing: content-box !important;
}

.sf-menubar-left,
.sf-menubar-center,
.sf-menubar-right {
  box-sizing: content-box !important;
}

@media (max-width: 1024px) {
  .sf-desktop-layout { display: none !important; }
}


.sf-searchbar-middle {
    position: relative;
}

/* =========================================================
   🔍 STOREFRONT STORE MODE — SEARCH DROPDOWNS (FINAL CLEAN)
   Desktop + Mobile (No conflicts, no duplicates)
========================================================= */

/* ===============================
   DESKTOP SEARCH DROPDOWN
=============================== */
.sf-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    max-height: 320px;
    margin-top: 3px;
    overflow-y: auto;
    display: none; /* hidden by default */
    z-index: 99999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.sf-search-dropdown.active {
    display: block;
}

.sf-search-results {
    display: block;
}

.sf-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.sf-search-item:last-child {
    border-bottom: none;
}

.sf-search-item:hover {
    background: #f8f8f8;
}

.sf-search-thumb {
    width: 45px;
    height: 45px;
    border-radius: 6px;
    object-fit: cover;
}

.sf-search-meta {
    display: flex;
    flex-direction: column;
}

.sf-search-name {
    font-size: 14px;
    font-weight: 500;
    color: #222;
}

.sf-search-price {
    font-size: 13px;
    color: var(--color-primary, #28a745);
    margin-top: 2px;
}

.sf-search-empty {
    padding: 12px;
    text-align: center;
    color: #777;
    font-size: 14px;
}

/* ===============================
   MOBILE SEARCH DROPDOWN
=============================== */
.sf-mobile-search-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
    z-index: 999999;
    display: none;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px 0;
}

.sf-mobile-search-dropdown.active {
    display: block;
}

.sf-mobile-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid #f1f1f1;
}

.sf-mobile-search-item:last-child {
    border-bottom: none;
}

.sf-mobile-search-thumb,
.sf-mobile-search-item img {
    width: 46px;
    height: 46px;
    border-radius: 6px;
    object-fit: cover;
}

.sf-mobile-search-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sf-mobile-search-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.sf-mobile-search-price {
    font-size: 13px;
    color: #28a745;
}

.sf-mobile-search-empty {
    padding: 12px;
    text-align: center;
    color: #777;
    font-size: 14px;
}

/* =========================================================
   DESKTOP LAYOUT — SCROLL (MERGED & FIXED)
========================================================= */

/* BODY scrolls normally */
body {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
}

/* MAIN CONTENT = natural height */
.sf-main-content {
    padding-top: 0px;
}

/* 3-column strict desktop layout */
.sf-home-grid {
    display: grid;
    grid-template-columns: 240px 1fr 240px; /* UPDATED SIZE */
    gap: 20px;
    max-width: 1440px;
    margin: 0 auto;
}

/* Prevent grid children from forcing overflow */
.sf-left-col,
.sf-main-col,
.sf-right-col {
    min-width: 0;       /* CRITICAL FIX */
}

/* LEFT COLUMN — FIXED ON SCROLL */
.sf-left-col {
    position: sticky;
    top: 111px;
    height: calc(100vh - 115px);
    overflow-y: scroll;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

/* Default hidden scrollbar */
.sf-left-col::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/* Reveal scrollbar on hover */
.sf-left-col:hover::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}

.sf-left-col:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.10);
    border-radius: 0;
    transition: background 0.3s ease;
}

/* RIGHT COLUMN — FIXED ON SCROLL */
.sf-right-col {
    position: sticky;
    top: 111px;
    height: calc(100vh - 135px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* CENTER COLUMN — natural flow */
.sf-main-col {
    overflow: visible !important;
}

/* =========================================================
   FIXED DESKTOP HEADER (SEARCHBAR + MENU)
========================================================= */

/* freeze searchbar */
.sf-searchbar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/* freeze menubar directly under searchbar */
.sf-menubar-container {
  position: fixed;
  top: 65px;      /* height of searchbar */
  left: 0;
  width: 100%;
  z-index: 999;
  color: var(--mh-text);

}

/* =========================================================
   FIXED DESKTOP HEADER (SEARCHBAR + MENU)
========================================================= */

/* Desktop only */
@media (min-width: 1025px) {

  .sf-searchbar-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
  }

  .sf-menubar-container {
    position: fixed;
    top: 65px; /* searchbar height */
    left: 0;
    width: 100%;
    z-index: 999;
  }

  /* Desktop ONLY push-down */
  .sf-main-content {
    margin-top: 111px; /* searchbar + menubar combined height */
  }
}

/* =========================================================
   MOBILE HEADER — FIXED (does NOT scroll)
========================================================= */
@media (max-width: 768px) {

  .sf-mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;     /* keep visual consistency */
  }

}

/* =========================================================
   LEFT COLUMN — MODERN FLAT WIDGET STYLE (Elegant v2)
========================================================= */

.sf-left-box {
  background: #ffffff;
  padding: 18px 20px;
  border-radius: 10px;
  margin-bottom: 0px;
  border-bottom: 1px solid #f1f1f1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.sf-left-box:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* First widget: hide title */
.sf-widget-first .sf-box-title {
  display: none !important;
}

/* Titles */
.sf-box-title {
  font-size: 15px;
  font-weight: 600;
  color: #1f7a3f; /* subtle elegant green */
  margin-bottom: 0px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Menu List */
.sf-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf-menu-list li a {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  color: #2d2d2d;
  text-decoration: none;
  border-bottom: 1px solid #f5f5f5;
  transition: color .2s ease, padding-left .2s ease;
}

.sf-menu-list li:last-child a {
  border-bottom: none;
}

.sf-menu-list li a:hover {
  color: var(--color-primary);
  padding-left: 4px;
}

/* Best Sellers */
.sf-bestseller-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sf-bestseller-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  transition: transform .2s ease;
}

.sf-bestseller-item:hover {
  transform: translateX(3px);
}

.sf-bestseller-item img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background: #f4f4f4;
}

.sf-bestseller-name {
  font-size: 14px;
  font-weight: 500;
  color: #222;
}

.sf-bestseller-price {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
}

.sf-bestseller-item {
    text-decoration: none !important;
}

.sf-bestseller-item .sf-bestseller-price,
.sf-bestseller-item .sf-bestseller-name {
    text-decoration: none !important;
}

/* ---------------------------------------------------------
   9. HERO SECTION
--------------------------------------------------------- */
.storefront-hero {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  border-radius: 10px;
  padding: 40px 20px;
  text-align: center;
  margin: 30px 0;
}

.storefront-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 6px;
}

.storefront-subtitle {
  font-size: 15px;
  opacity: 0.9;
}


/* ---------------------------------------------------------
   11. BOTTOM NAVBAR (MOBILE)
--------------------------------------------------------- */
.bottom-navbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f1f5f2;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 55px;
    border-top: 2px solid #e3e0e0;
    z-index: 200000;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
}


/* ✅ Hidden state when scrolling down */
.bottom-navbar.hide-nav {
  transform: translateY(100%);
  opacity: 0;
}

.bottom-navbar button {
  flex: 1;
  background: none;
  border: none;
  color: #8f8d8d;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s ease;
  
}

.bottom-navbar button i {
  width: 20px;
  height: 20px;
  margin-bottom: 2px;
}

.bottom-navbar button:hover {
  opacity: 0.8;
}

.sf-cart-count-bottom {
  position: absolute;
  top: 4px;
  right: 16px;
  background: #ff3b30;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 12px;
  display: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.bottom-navbar button {
  position: relative;
}

/* ======================================================
   🌈 Continuous Multi-Color Bubbles
====================================================== */
@keyframes sf-bubble-rise {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  25%  { opacity: 1; transform: translateY(-10px) scale(1); }
  100% { opacity: 0; transform: translateY(-60px) scale(1.6); }
}

.sf-cart-bubble {
  position: absolute;
  bottom: 26px;
  right: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: sf-bubble-rise 1.6s ease-out forwards;
  z-index: 5;
}

@media (min-width: 769px) {
  .bottom-navbar { display: none; }
}


/* ---------------------------------------------------------
   12. FOOTER
--------------------------------------------------------- */
.storefront-footer {
  background: #0e1b33;
  color: #fff;
  padding: 40px 20px 20px;
  margin-top: 50px;
  font-family: var(--font-family);
}

.sf-footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto 30px;
}

.sf-footer-brand {
  text-align: center;
}

.sf-footer-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.3));
}

.sf-footer-brand h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.sf-footer-brand p {
  font-size: 14px;
  opacity: 0.85;
}

.sf-footer-links h4,
.sf-footer-contact h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sf-footer-links ul,
.sf-footer-contact ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf-footer-links li,
.sf-footer-contact li {
  font-size: 14px;
  margin: 5px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.9;
}

.sf-footer-links a {
  color: #fff;
  text-decoration: none;
}

.sf-footer-links a:hover {
  text-decoration: underline;
}

.sf-footer-contact i {
  width: 16px;
  height: 16px;
}

.sf-footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 12px;
  font-size: 13px;
  opacity: 0.85;
}

/* ---------------------------------------------------------
   🛒 PRODUCT GRID (FEATURED PRODUCTS)
--------------------------------------------------------- */
.storefront-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
  padding: 5px;
}
/* =======================================================================
   HOMEPAGE PRODUCT CARD — CLEAN VERSION
   No Pricelist CSS. No shared markup. Fully isolated.
======================================================================= */

/* CARD WRAPPER */
.storefront-product-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0px;
  gap: 0px;
  position: relative;
  transition: box-shadow .18s ease, transform .18s ease;
}

/* =======================================================================
   TOP BADGES / DISCOUNT / HOT TAG
======================================================================= */

.storefront-product-card {
    position: relative;
}

.sf-card-topbar {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    pointer-events: none; /* tags won't block clicks */
}

.sf-card-topbar .sf-card-badges,
.sf-card-topbar .sf-discount-pill,
.sf-card-topbar .sf-hot-tag {
    pointer-events: auto;
}


/* Badges group */
.sf-card-badges {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sf-badge {
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 2px;
  color: #fff;
  background: #27a844;
}

/* Discount tag */
.sf-discount-pill {
  background: #cc0022;
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 2px;
  font-weight: 600;
}

/* Hot tag */
.sf-hot-tag {
  background: #ff7300;
  color: #fff;
  padding: 2px 5px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 2px;
}

/* =======================================================================
   PRODUCT IMAGE
======================================================================= */
.storefront-product-image img {
    width: 100%;
    object-fit: cover;
    border-radius: 2px;
    transition: transform .25s ease;
    max-height: 190px;
}

/* Zoom ONLY on hover */
.storefront-product-card:hover .storefront-product-image img {
  transform: scale(1.08);
}


/* =======================================================================
   PRODUCT INFO (DESCRIPTION + PRICE + STOCK)
======================================================================= */

.storefront-product-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 2px;
}

/* Smart description (3 lines max) */
.storefront-product-desc {
  font-size: 12px;
  color: #444;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Price area */
.sf-price-area {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.sf-old-price {
  font-size: 11px;
  color: #9b9b9b;
  text-decoration: line-through;
}

.sf-new-price {
  font-size: 15px;
  color: #27a844;
  font-weight: 700;
}

.sf-low-stock {
  font-size: 11px;
  color: #b57c00;
  font-weight: 600;
}

.sf-out-stock {
  font-size: 11px;
  color: #cf0000;
  font-weight: 700;
}

/* =======================================================================
   ACTION AREA (QTY + ADD BUTTON)
======================================================================= */

.sf-row-main-home {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 2px;
    padding: 0px 3px;
}

.sf-pqty-wide {
    flex: 1.4;
    display: flex;
    align-items: center;
}

.sf-add-narrow {
    flex: 1;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* QTY BOX */
.sf-pqty {
    display: flex;
    width: 100%;
    height: 34px;
    border: 2px solid var(--mh-primary-dark);
    border-radius: 15px;
    overflow: hidden;
}

.sf-qty-btn {
  width: 36px;
  height: 100%;
  background: #f3f3f3;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #444;
}

.sf-qty-btn:active {
  background: #e0e0e0;
}

.sf-qty-input {
  flex: 1;
  height: 100%;
  border: none;
  text-align: center;
  font-size: 14px;
  outline: none;
}

/* ADD BUTTON */
.sf-add-btn {
  width: 100%;
  height: 34px;
  background: #28a745;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 2px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  transition: background .18s ease;
}

.sf-add-btn:hover {
  background: #218838;
}

.sf-add-btn:disabled {
  background: #bdbdbd;
  cursor: not-allowed;
}


/* =======================================================================
   DESKTOP TWEAKS
======================================================================= */
@media (min-width: 768px) {
  .storefront-product-image img {
    height: 100%;
    max-height: 180px;
  }
}

/* ---------------------------------------------------------
   HOME CATEGORIES GRID
--------------------------------------------------------- */
.sf-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.sf-category-tile {
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  text-decoration: none;
  color: #222;
  transition: box-shadow .2s ease, transform .2s ease;
}

.sf-category-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.sf-category-thumb img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
}

.sf-category-label {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #222;
}

/* Mobile Optimized */
@media (max-width: 768px) {
  .sf-categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .sf-category-thumb img {
    height: 70px;
  }
}

/* ---------------------------------------------------------
   🖥️ DESKTOP SLIDER
--------------------------------------------------------- */
.sf-slider-desktop {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  width: 100%;
  height: 420px;
}

.sf-slider-track {
  display: flex;
  transition: transform 0.6s ease-in-out;
}

.sf-slide {
  min-width: 100%;
  height: 420px;
}

.sf-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

.sf-slider-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.sf-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background 0.2s;
}

.sf-dot.active {
  background: var(--color-primary, #28a745);
}

/* ---------------------------------------------------------
   🧭 LEFT & RIGHT COLUMN MODULES
--------------------------------------------------------- */
.sf-left-box,
.sf-right-box {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 0px;
  padding: 14px;
}

.sf-right-box:first-child {
  border-top: 0px solid #e5e5e5;
}

.sf-box-title {
  font-size: 15px;
  font-weight: 700;
  color: #155724;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0px;
}

/* --- Menu --- */
.sf-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sf-menu-list li {
  margin-bottom: 0px;
}
.sf-menu-list a {
  text-decoration: none;
  color: #155724;
  font-weight: 500;
}
.sf-menu-list a:hover {
  text-decoration: underline;
}

/* --- Bestsellers --- */
.sf-bestseller-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sf-bestseller-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sf-bestseller-item img {
  width: 45px;
  height: 45px;
  border-radius: 4px;
  object-fit: cover;
}
.sf-bestseller-name {
  font-size: 13px;
  color: #222;
  font-weight: 600;
}
.sf-bestseller-price {
  font-size: 13px;
  color: #28a745;
}

/* --- Right Column --- */
.sf-right-banner {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 8px;
}
.sf-banner-caption {
  font-size: 13px;
  color: #155724;
  text-align: center;
}

.sf-right-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sf-right-links a {
  text-decoration: none;
  font-size: 14px;
  color: #28a745;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sf-right-links a:hover {
  text-decoration: underline;
}

/* --- Newsletter --- */
.sf-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sf-newsletter-form input[type="email"] {
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}
.sf-newsletter-form button {
  align-self: flex-end;
  background: #28a745;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.sf-newsletter-form button:hover {
  background: #218838;
}
.sf-newsletter-note {
  font-size: 12px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ---------------------------------------------------------
   📱 MOBILE SLIDER
--------------------------------------------------------- */
.sf-slider-mobile {
  display: none;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 240px;
  border-radius: 8px;
}

.sf-slider-mobile .sf-slider-track {
  display: flex;
  transition: transform 0.6s ease-in-out;
}

.sf-slider-mobile .sf-slide {
  min-width: 100%;
  height: 240px;
}

.sf-slider-mobile img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 8px;
}

.sf-slider-mobile .sf-slider-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.sf-slider-mobile .sf-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background 0.2s;
}
.sf-slider-mobile .sf-dot.active {
  background: var(--mh-primary);
}
.sf-slider::before {
  content: "";
  position: absolute;
  height: calc(100% - 6px);
  width: calc(50% - 3px);
  left: 3px;
  bottom: 3px;
  background: var(--mh-primary);
  border-radius: 50%;
  transition: transform 0.3s ease;
}
/* ---------------------------------------------------------
   🖥️💚 VIEWPORT VISIBILITY CONTROL
--------------------------------------------------------- */
.sf-desktop-only {
    display: block; /* default */
}

.sf-desktop-only.menu-bar-desktop-grid {
    display: grid !important;
}

.sf-mobile-only {
  display: none;
}

@media (max-width: 1024px) {
  .sf-home-grid {
    grid-template-columns: 1fr;
  }
  .sf-left-col,
  .sf-right-col {
    display: none;
  }
  .storefront-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

@media (max-width: 768px) {
  .sf-desktop-only {
    display: none !important;
  }
  .sf-mobile-only {
    display: block !important;
  }

  .sf-home-grid {
    margin-top: 107px;
    gap: 12px;
  }

  .storefront-product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .storefront-product-image img {
    height: 100%;
  }

  .storefront-product-name {
    font-size: 13px;
  }

  .storefront-product-price {
    font-size: 14px;
  }
}
/* ============================================================
   📱 MOBILE HEADER — FINAL STABLE VERSION (WITH VARIABLES)
============================================================ */

/* Mobile-only wrapper visibility */
.sf-mobile-only {
  display: block !important;
  width: 100%;
  position: relative;
}

/* --- Header Container --- */
.sf-mobile-header {
  position: fixed;
  width: 100%;
  background: var(--mh-primary);
  color: var(--mh-text);
  display: flex;
  flex-direction: column;
  z-index: 500;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* --- Fixed (Sticky) State --- */
.sf-mobile-header.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transform: translateY(0);
}

/* --- Spacer to prevent layout jump --- */
.sf-header-spacer {
  display: none;
  height: 0;
}
.sf-header-spacer.active {
  height: var(--header-height, 90px);
}

/* --- Top Row --- */
.sf-mh-row.sf-mh-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  min-height: 48px;
}

/* Buttons */
.sf-mh-btn {
  background: none;
  border: none;
  color: var(--mh-icon);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sf-mh-btn i {
  width: 22px;
  height: 22px;
  stroke-width: 2;
  color: var(--mh-icon);
}

/* --- Logo --- */
.sf-mh-logo img {
  width: clamp(110px, 38vw, 180px);
  max-height: 44px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: brightness(0) invert(1); /* stays white unless theme modifies */
}

/* --- Cart Count --- */
.sf-cart-btn { position: relative; }
.sf-cart-count {
  position: absolute;
  top: -4px;
  right: -6px;
  background: var(--mh-cart-badge-bg);
  color: var(--mh-cart-badge-text);
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Search Row --- */
.sf-mh-row.sf-mh-search {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 4px 10px 6px;
  background: var(--mh-primary);
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Category Button */
.sf-cat-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--mh-primary-dark);
  color: var(--mh-text);
  border: none;
  padding: 7px 10px;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}
.sf-cat-btn i {
  width: 14px;
  height: 14px;
  color: var(--mh-text);
}

/* Search Input */
.sf-search-input {
  flex: 1;
  height: 36px;
  border: none;
  padding: 0 10px;
  font-size: 14px;
  outline: none;
  color: var(--mh-search-text);
  background: var(--mh-search-bg);
}

/* Search Button */
.sf-search-btn {
  background: var(--mh-primary-dark);
  border: none;
  color: var(--mh-text);
  width: 38px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sf-search-btn i {
  width: 18px;
  height: 18px;
  color: var(--mh-text);
}

/* ============================================================
   📴 Guest Mode — Disabled Toggle Styling
============================================================ */
.sf-mode-toggle.guest-disabled {
  opacity: 0.45;
  filter: grayscale(1);
  pointer-events: none;
  user-select: none;
  cursor: not-allowed;
}

.sf-mode-toggle.guest-disabled .sf-switch {
  cursor: not-allowed !important;
}

.sf-mode-toggle.guest-disabled .sf-slider {
  background: #ccc !important;
  border-color: #ccc !important;
}

/* Slider circle (knob) */
.sf-mode-toggle.guest-disabled .sf-slider:before {
  background: #eee !important;
}

/* Text label */
.sf-mode-toggle.guest-disabled #sf-mode-label {
  opacity: 0.7;
}


/* ---------------------------------------------------------
   CATEGORY DROPDOWN (for Category Filter)
--------------------------------------------------------- */
.sf-cat-dropdown {
  position: absolute;
  top: 110%;
  left: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  z-index: 9999;
  width: 140px;
  overflow: hidden;
}

.sf-cat-item {
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  color: #155724;
  transition: background 0.2s ease, color 0.2s ease;
}

.sf-cat-item:hover {
  background: rgba(40,167,69,0.1);
  color: var(--color-primary-dark, #155724);
}

/* make parent container relative for positioning */
.sf-mh-row.sf-mh-search {
  position: relative;
}

/* Optional: smoother re-entry transition */
.bottom-navbar {
  transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
}

/* Mobile only */
@media (max-width: 768px) {
  .sf-main-content {
    padding-bottom: 60px; /* height of bottom navbar */
  }
}

/* Desktop only */
@media (min-width: 769px) {
  .sf-mobile-header { display: none; }
}

/* Define the height of your top bar */
:root {
  --topbar-height: 24px; /* adjust if your top bar is taller */
}

/* ======================================================
   🛒 Storefront Cart Slider (Mobile / Enhanced Layout)
====================================================== */
.sf-cart-slider {
  position: fixed;
  top: 0;
  right: -85%;
  width: 85%;
  height: 100vh;
  background: #fff;
  box-shadow: -3px 0 12px rgba(0, 0, 0, 0.25);
  transition: right 0.35s ease-in-out;
  z-index: 300000;
  display: flex;
  flex-direction: column;
}

.sf-cart-slider.active {
  right: 0;
}

.sf-cart-body {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 12px;
}

.sf-cart-guest-note {
  padding: 0px 12px;
  border-top: 1px solid #eee;
  background: #fafafa;
  flex-shrink: 0;
  overflow: visible;
}

.sf-cart-guest-note label {
  display: block;
  font-size: .75rem;
  color: #444;
  margin-bottom: 6px;
}

#sf-guest-note {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px;
  resize: none;
  font-size: .75rem;
  overflow-y: hidden !important;
  min-height: 48px;
}

/* ================================
   🖥️ Desktop Cart Slider Width Fix
================================ */
@media (min-width: 1025px) {
  .sf-cart-slider {
    width: 420px !important;
    right: -420px !important;
  }
  .sf-cart-slider.active {
    right: 0 !important;
  }
}


/* ------------------------------------------------------ */
/* Header                                                 */
/* ------------------------------------------------------ */
.sf-cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
  background: var(--mh-primary-dark);
}

.sf-cart-header h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: white;
}

.sf-cart-close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
}

.sf-cart-close i {
  width: 20px;
  height: 20px;
  stroke-width: 1.8px;
  color: white;
}

/* ------------------------------------------------------ */
/* Body / Item list                                       */
/* ------------------------------------------------------ */
.sf-cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 8px;
}

.sf-cart-items {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.sf-cart-empty {
  text-align: center;
  padding: 40px 0;
  color: #777;
  font-size: 14px;
}

/* Cart row (invisible table style) */
.sf-cart-row {
  display: grid;
  grid-template-columns: 52px 1fr 60px 28px;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid #f2f2f2;
  padding: 4px 0;
}

.sf-cart-photo {
  width: 48px;
  height: 48px;
  border-radius: 2px;
  object-fit: cover;
}

.sf-cart-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.sf-cart-name {
  font-size: 14px;
  font-weight: 500;
  color: #222;
  line-height: 1.3;
}

.sf-cart-qty {
  font-size: 13px;
  color: #666;
}

.sf-cart-subtotal {
  font-size: 14px;
  font-weight: 600;
  color: #000;
  text-align: right;
}

.sf-cart-remove {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.sf-cart-instruction-inline {
  font-size: 0.75rem;
  font-style: italic;
  color: #6b6b6b;
  opacity: 0.9;
}

.sf-cart-remove:hover { color: #d33; }

/* ------------------------------------------------------ */
/* Summary section                                        */
/* ------------------------------------------------------ */
.sf-cart-summary {
  border-top: 1px solid #eee;
  padding: 12px 16px;
  background: #fafafa;
}

.sf-summary-row,
.sf-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 14px;
  padding: 0px 0px;
}

.sf-summary-total {
  font-weight: 700;
  color: #28a745;
  margin-top: 6px;
}

/* ------------------------------------------------------ */
/* Action buttons                                         */
/* ------------------------------------------------------ */
.sf-cart-actions {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid #ddd;
  margin-bottom: 50px;
}

.sf-btn {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}

.sf-btn-primary {
  background: #28a745;
  color: #fff;
  border: none;
}
.sf-btn-primary:hover { background: #218838; }

.sf-btn-outline {
  background: #fff;
  border: 1px solid #28a745;
  color: #28a745;
}
.sf-btn-outline:hover { background: #f6fff8; }

/* ------------------------------------------------------ */
/* Overlay (background dim)                               */
/* ------------------------------------------------------ */
.sf-cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 19999;
}
.sf-cart-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Hide scrollbars on mobile */
.sf-cart-body::-webkit-scrollbar {
  width: 4px;
}
.sf-cart-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 2px;
}

/* ======================================================
   Floating Cart Notification Bar (Golden + Green Accent)
====================================================== */
.sf-float-bar {
  position: fixed;
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(40px);
  background: #016423; /* soft, elegant golden tone */
  color: #fcf8f8;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 500;
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
  z-index: 99999;
  max-width: 80%;
  width: auto;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

/* Success state */
.sf-float-bar.success {
  border-color: #28a745;
  color: #fcf8f8;
}

/* Error state */
.sf-float-bar.error {
  background: #F8D97A;
  border-color: #d32f2f; /* red border accent */
  color: #8b0000;
}

/* Show animation */
.sf-float-bar.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ======================================================
   🧩 Product Option Popup — Enhanced UI (StoreMode v2)
====================================================== */

.sf-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  z-index: 9998;
}

.sf-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

.sf-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 90%;
  max-width: 360px;
  background: #fff;
  border-radius: 14px;
  padding: 22px 20px;
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  z-index: 9999;
}

.sf-popup.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* HEADER */
.sf-popup-title {
  font-size: 17px;
  font-weight: 700;
  color: #222;
  margin-bottom: 16px;
  text-align: center;
}

/* OPTION LIST */
#sf-option-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 0 15px;
}

#sf-option-form label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #f8f9fa;
  border: 1px solid #e1e4e8;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

#sf-option-form label:hover {
  background: #eef0f2;
  border-color: #d1d5da;
}

#sf-option-form input[type="radio"] {
  accent-color: var(--color-primary);
  width: 18px;
  height: 18px;
}

/* BUTTONS */
.sf-popup-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

#sf-option-cancel,
#sf-option-confirm {
  flex: 1;
  padding: 12px 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  border: none;
}

/* Cancel Button */
#sf-option-cancel {
  background: #eaecef;
  color: #334155;
}

#sf-option-cancel:active {
  background: #d7dae0;
}

/* Confirm Button */
#sf-option-confirm {
  background: var(--color-primary);
  color: #fff;
}

#sf-option-confirm:active {
  background: var(--color-primary-dark);
}


/* ======================================================
   🌐 Global Notification + Loader Styles (Centered Version)
====================================================== */

/* --- Notification --- */
.sf-notify {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  background: #1e1e1e;
  color: #fff;
  padding: 14px 22px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10010; /* slightly above loader */
  text-align: center;
  max-width: 80%;
  min-width: 200px;
}

.sf-notify.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.sf-notify.success { background: #28a745; }
.sf-notify.error { background: #dc3545; }
.sf-notify.info { background: #007bff; }

.sf-notify-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.sf-notify-content i {
  width: 20px;
  height: 20px;
}

/* --- Loader Overlay --- */
.sf-loader {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.sf-loader.show {
  opacity: 1;
  pointer-events: auto;
}

.sf-loader-content {
  text-align: center;
}

.sf-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(0, 0, 0, 0.15);
  border-top-color: #28a745;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 12px auto;
}

.sf-loader p {
  font-size: 15px;
  color: #333;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

.sf-notify.info { background: #007bff; }
.sf-notify.success { background: #28a745; }
.sf-notify.error { background: #dc3545; }

.sf-message-area {
  margin-top: 8px;
  min-height: 24px;
  font-size: 14px;
}
.sf-msg {
  padding: 8px 10px;
  border-radius: 6px;
  margin-top: 4px;
  line-height: 1.4;
}
.sf-msg.success { background: #e9f9ef; color: #1e7d34; }
.sf-msg.error   { background: #fdecec; color: #a11616; }
.sf-msg.info    { background: #eef4ff; color: #0a3e9c; }

.sf-otp-timer {
  margin-top: 10px;
  font-size: 13px;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sf-btn.small {
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 4px;
}

/* ====== GLOBAL PAGE TRANSITION EFFECT ====== */
.sf-transition-overlay {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 900;                /* lower than cart overlays (which are 1000–1100) */
  pointer-events: none;        /* 🧠 prevents blocking clicks when transparent */
  transform: translateX(100%);
  transition: transform 0.2s ease;
}

.sf-transition-overlay.active {
  transform: translateX(0);
  pointer-events: auto;        /* only blocks clicks during actual transition */
}

.sf-transition-overlay.hidden {
  transform: translateX(-100%);
  pointer-events: none;
}


/* ======================================================
   🔹 Inline Message + Countdown Button Adjustments
====================================================== */
.sf-message-area {
  margin-bottom: 10px;
  min-height: 28px;
  font-size: 14px;
}
.sf-msg {
  padding: 8px 10px;
  border-radius: 6px;
  line-height: 1.4;
}
.sf-msg.success { background: #e9f9ef; color: #1e7d34; }
.sf-msg.error   { background: #fdecec; color: #a11616; }
.sf-msg.info    { background: #eef4ff; color: #0a3e9c; }

.sf-btn-dark {
  background-color: #444;
  color: #fff;
  border: none;
  font-weight: 500;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.sf-btn-dark:hover:not(:disabled) {
  background-color: #2f2f2f;
}
.sf-btn-dark:disabled {
  opacity: 0.8;
  cursor: not-allowed;
}

/* ============================================================
   📄 Storefront — Information Page Typography
   Applies to content inside sf-information-body
   ============================================================ */

.sf-information-body {
  font-size: 14px;
  line-height: 1.65;
  color: #333;
}

.sf-information-body p {
  margin: 12px 0;
}

.sf-information-body ul {
  margin: 12px 0 12px 20px;
  padding: 0;
  list-style-type: disc;
}

.sf-information-body li {
  margin: 6px 0;
  line-height: 1.55;
}

.sf-information-body strong {
  font-weight: 600;
}

.sf-information-body hr {
  border: none;
  border-top: 1px solid #e2e2e2;
  margin: 18px 0;
}

.sf-information-body p strong {
  display: inline-block;
  margin-bottom: 4px;
  color: #111;
}

/* Optional – larger title */
.sf-info-title {
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}


/* ============================================================
   📊 Information Page — Table Styles
   Apply to any <table> inside sf-information-body
   ============================================================ */

.sf-information-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
  background: #fff;
}

.sf-information-body table th,
.sf-information-body table td {
  border: 1px solid #e2e2e2;
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
}

.sf-information-body table th {
  background: #f7f7f7;
  font-weight: 600;
  color: #111;
}

.sf-information-body table tr:nth-child(even) {
  background: #fafafa;
}

/* ============================================================
        Browser Modal
   ============================================================ */

.fm-browser-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999999;
}

.fm-browser-box {
  background: #fff;
  padding: 22px 26px;
  border-radius: 14px;
  width: 90%;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

.fm-browser-text {
  font-size: 15px;
  color: #222;
  margin-bottom: 18px;
  line-height: 1.4;
}

.fm-browser-btn {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 0;
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.fm-browser-btn:hover {
  background: var(--color-primary-dark);
}

/* =========================================================
   SHOPERY HERO SLIDER (FreshDaily Premium Theme + Animated)
========================================================= */
.sf-hero-slider {
  position: relative;
  width: 100%;
  max-height: 440px;
  overflow: hidden;
  border-radius: 5px;
  margin: auto;
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}

.sf-hero-track {
  display: flex;
  transition: transform 0.55s ease;
  height: 100%;
}

.sf-hero-item {
  min-width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* ================================================
   IMAGE ZOOM-IN (already yours but enhanced)
================================================== */
.sf-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 3.6s ease; /* smoother */
}

.sf-hero-item.active .sf-hero-img {
  transform: scale(1.10); /* enhanced zoom effect */
}

/* ================================================
   GRADIENT OVERLAY
================================================== */
.sf-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(0,70,30,0.75) 0%,
      rgba(0,70,30,0.45) 60%,
      rgba(0,70,30,0) 100%
  );
}

/* ================================================
   TEXT CONTAINER
================================================== */
.sf-hero-content {
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translateY(-50%);
  color: #fff;
  max-width: 420px;
  z-index: 10;
}

/* =========================================================
   🔥 NEW ANIMATED TEXT ENTRANCE
   Image loads → Title slides in → Subtitle slides in
========================================================= */
.sf-hero-title,
.sf-hero-subtitle {
  opacity: 0;
  transform: translateY(22px);
  transition: all 0.6s ease;
}

/* Title enters after 0.30s */
.sf-hero-item.active .sf-hero-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.30s;
}

/* Subtitle enters after 0.55s */
.sf-hero-item.active .sf-hero-subtitle {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.55s;
}

/* Title styles (yours) */
.sf-hero-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.2;
}

/* Subtitle styles (yours) */
.sf-hero-subtitle {
  font-size: 17px;
  margin-bottom: 16px;
  opacity: 0.9;
}

/* CTA Button */
.sf-hero-btn {
  display: inline-block;
  padding: 10px 22px;
  background: #ffd83b;
  color: #000;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.sf-hero-btn:hover {
  opacity: 0.85;
}

/* =========================================================
   NAV BUTTONS (kept but hidden now unless you re-enable)
========================================================= */
.sf-hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.9);
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: none; /* hidden as requested */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.sf-hero-prev { left: 14px; }
.sf-hero-next { right: 14px; }

/* =========================================================
   DOTS
========================================================= */
.sf-hero-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
}

.sf-hero-dots div {
  width: 9px;
  height: 9px;
  background: rgba(255,255,255,0.55);
  border-radius: 50%;
  cursor: pointer;
}

.sf-hero-dots .active {
  background: #fff;
}

/* =========================================================
   FORCE TEXT TO SHOW WHEN SLIDE IS ACTIVE (SAFE OVERRIDE)
========================================================= */

/* Title */
.sf-hero-item.active .sf-hero-title {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 0.30s !important;
}

/* Subtitle */
.sf-hero-item.active .sf-hero-subtitle {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 0.55s !important;
}

/* =========================================================
   📱 MOBILE OPTIMIZATION FOR HOME HERO SLIDER
   Overrides desktop size safely (no conflict)
========================================================= */
@media (max-width: 768px) {

  .sf-hero-slider {
    height: 250px;            /* mobile-friendly height */
    border-radius: 0;         /* match full width mobile aesthetic */
  }

  /* Track remains flexible */
  .sf-hero-track {
    height: 100%;
  }

  .sf-hero-item {
    min-width: 100%;
    height: 100%;
  }

  /* Image adjusts automatically */
  .sf-hero-img {
    object-fit: cover;
    object-position: center;
    transform: scale(1);        /* remove zoom on mobile if too heavy */
  }

  /* Optional: keep zoom for premium look */
  .sf-hero-item.active .sf-hero-img {
    transform: scale(1.05);
  }

  /* Overlay stays but softer on mobile */
  .sf-hero-overlay {
    background: linear-gradient(
      90deg,
      rgba(0,70,30,0.55) 0%,
      rgba(0,70,30,0.25) 60%,
      rgba(0,70,30,0) 100%
    );
  }

  /* MOBILE TEXT POSITION */
  .sf-hero-content {
    top: auto;
    bottom: 18px;
    left: 16px;
    transform: none;
    width: calc(100% - 32px);
    max-width: 100%;
  }

  .sf-hero-title {
    font-size: 18px;       /* scaled down */
    line-height: 1.25;
    margin-bottom: 4px;
  }

  .sf-hero-subtitle {
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 10px;
    max-width: 90%;
  }

  .sf-hero-btn {
    padding: 8px 14px;
    font-size: 13px;
  }

  /* DOTS = bigger tap targets */
  .sf-hero-dots {
    bottom: 10px;
    gap: 4px;
  }

  .sf-hero-dots div {
    width: 8px;
    height: 8px;
  }

  /* Navigation arrows hidden on mobile to avoid clutter */
  .sf-hero-prev,
  .sf-hero-next {
    display: none;
  }
}


/* =========================================================
   HOME — HIGHLIGHTS SECTION (Horizontal Slide Reveal)
========================================================= */

.sf-highlights-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px 0 10px 0;
}

/* MAIN CARD */
.sf-highlight-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8e8e8;
  padding: 14px 16px;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;             /* REQUIRED for slide-in */
}

.sf-highlight-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* MAIN ROW */
.sf-highlight-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sf-highlight-main i {
  width: 26px;
  height: 26px;
  stroke-width: 2;
  color: var(--color-primary);
}

.sf-h-texts {
  flex: 1;
}

.sf-h-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 3px;
  color: #222;
}

.sf-h-short {
  font-size: 13px;
  color: #666;
  line-height: 1.3;
  max-height: 36px; /* 2 lines */
  overflow: hidden;
}

/* Arrow icon */
.sf-h-toggle-icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
  color: #888;
  transition: transform 0.25s ease;
}

.sf-highlight-card.active .sf-h-toggle-icon {
  transform: rotate(180deg);
}

/* =========================================================
   HORIZONTAL SLIDE-IN PANEL (RIGHT → LEFT)
========================================================= */

.sf-highlight-more {
  position: absolute;
  top: 0;
  right: -100%;               /* Hidden off-screen */
  width: 100%;
  height: 100%;
  padding: 16px;
  background: #f8fdf9;
  border-left: 2px solid var(--color-primary);
  color: #333;
  font-size: 13px;
  line-height: 1.45;
  transition: right 0.3s ease; /* Slide-in animation */
}

.sf-highlight-card.active .sf-highlight-more {
  right: 0;                   /* Slide INTO view */
}