/* ============================================
   ORGANIC GROCERY — FRESH FARM MARKET THEME
   Pure CSS3 | No Frameworks | US Market
   ============================================ */

/* ============================================
   1. CSS VARIABLES & RESET
   ============================================ */
:root {
  --cream:         #FAFAF5;
  --cream-dark:    #F2F2EA;
  --white:         #FFFFFF;
  --green-primary: #2E7D32;
  --green-light:   #4CAF50;
  --green-accent:  #66BB6A;
  --green-dark:    #1B5E20;
  --green-bg:      #F1F8E9;
  --orange:        #E65100;
  --orange-light:  #FF6D00;
  --red:           #C62828;
  --text-dark:     #1A1A1A;
  --text-mid:      #444444;
  --text-light:    #777777;
  --text-xlight:   #AAAAAA;
  --border:        #E4E4D8;
  --border-light:  #EEEEEE;
  --shadow-xs:     0 1px 3px rgba(0,0,0,.06);
  --shadow-sm:     0 2px 8px rgba(0,0,0,.08);
  --shadow:        0 4px 16px rgba(0,0,0,.10);
  --shadow-md:     0 6px 24px rgba(0,0,0,.13);
  --shadow-lg:     0 10px 40px rgba(0,0,0,.16);
  --radius-sm:     4px;
  --radius:        8px;
  --radius-md:     7px;
  --radius-lg:     7px;
  --transition:    .22s ease;
}

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

html { scroll-behavior:smooth; font-size:16px; }

body {
  font-family:'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  background:var(--cream);
  color:var(--text-dark);
  line-height:1.6;
  overflow-x:hidden;
}

img  { max-width:100%; height:auto; display:block; }
a    { color:inherit; text-decoration:none; }
ul   { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
input,textarea,select { font-family:inherit; font-size:1rem; outline:none; border:none; }

/* ============================================
   2. TYPOGRAPHY
   ============================================ */
h1,h2,h3,h4,h5,h6 { font-weight:700; line-height:1.3; color:var(--text-dark); }

.section-title    { font-size:clamp(1.4rem,2.8vw,2rem); font-weight:800; margin-bottom:6px; }
.section-subtitle { font-size:.93rem; color:var(--text-light); margin-bottom:32px; }

.section-header        { text-align:center; margin-bottom:40px; }
.section-header .line  { width:56px; height:3px; background:linear-gradient(135deg,var(--green-primary),var(--green-light)); margin:12px auto 14px; border-radius:2px; }

/* ============================================
   3. UTILITIES
   ============================================ */
.container { max-width:1280px; padding:0 20px; }
.section-pad    { padding:12px 0; }
.section-pad-sm { padding:48px 0; }
.bg-white       { background:var(--white); }
.bg-cream       { background:var(--cream); }
.bg-greenlight  { background:var(--green-bg); }
.text-center    { text-align:center; }
.text-green     { color:var(--green-primary); }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:7px; padding:11px 26px; border-radius:var(--radius);
  font-size:.88rem; font-weight:600; cursor:pointer;
  transition:all var(--transition); white-space:nowrap; border:none;
}
.btn-primary {
  background:linear-gradient(135deg,var(--green-primary),var(--green-light));
  color:var(--white);
}
.btn-primary:hover {
  background:linear-gradient(135deg,var(--green-dark),var(--green-primary));
  box-shadow:0 4px 16px rgba(46,125,50,.35);
  transform:translateY(-1px);
}
.btn-outline {
  background:transparent; color:var(--green-primary);
  border:2px solid var(--green-primary);
}
.btn-outline:hover { background:var(--green-primary); color:var(--white); }
.btn-white  { background:var(--white); color:var(--green-primary); }
.btn-white:hover { box-shadow:var(--shadow); background:var(--cream-dark); }
.btn-sm     { padding:7px 16px; font-size:.78rem; }
.btn-lg     { padding:14px 36px; font-size:.98rem; }

/* Badges */
.badge        { display:inline-block; padding:2px 9px; border-radius:20px; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.badge-sale   { background:var(--red); color:#fff; }
.badge-new    { background:var(--green-primary); color:#fff; }
.badge-org    { background:var(--orange); color:#fff; }

/* Stars */
.stars { color:#FFC107; font-size:.82rem; letter-spacing:1px; }

/* Toast */
.toast {
  position:fixed; bottom:28px; left:50%;
  transform:translateX(-50%) translateY(14px);
  background:var(--text-dark); color:#fff;
  padding:10px 22px; border-radius:50px; font-size:.83rem; font-weight:500;
  z-index:9999; opacity:0; pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
  white-space:nowrap;
}
.toast.show  { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.green { background:var(--green-primary); }

/* ============================================
   4. HEADER
   ============================================ */
#header {
  position:sticky; top:0; z-index:1000;
  background:var(--white);
  box-shadow:var(--shadow-xs);
  transition:box-shadow var(--transition);
}
#header.scrolled { box-shadow:var(--shadow-sm); }

/* Top bar */
.top-bar {
  background:var(--green-primary); color:#fff; padding:6px 0; font-size:.8rem;
}
.top-bar .container {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px;
}
.top-bar-left { display:flex; align-items:center; gap:10px; }
.top-bar-left a {
  display:flex; align-items:center; gap:5px;
  color:rgba(255,255,255,.88); transition:color var(--transition);
}
.top-bar-left a:hover { color:#fff; }
.top-bar-center { font-weight:700; font-size:.8rem; letter-spacing:.4px; }
.top-bar-right  { display:flex; align-items:center; gap:10px; }
.top-bar-right a { color:rgba(255,255,255,.8); font-size:.78rem; transition:color var(--transition); }
.top-bar-right a:hover { color:#fff; }

/* Main nav row */
.main-nav { padding:13px 0; }
.main-nav .container { display:flex; align-items:center; gap:10px; }

/* Logo */
.nav-logo {
  display:flex; align-items:center; gap:10px; flex-shrink:0; text-decoration:none;
}
.nav-logo .logo-icon {
  width:42px; height:42px; border-radius:10px;
  background:linear-gradient(135deg,var(--green-primary),var(--green-light));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.3rem; flex-shrink:0;
}
.nav-logo .logo-text strong { display:block; font-size:1.12rem; color:var(--green-primary); font-weight:800; line-height:1.2; }
.nav-logo .logo-text span  { font-size:.68rem; color:var(--text-light); text-transform:uppercase; letter-spacing:1px; }

/* Search */
.nav-search { flex:1; max-width:460px; position:relative; }
.nav-search-inner {
  display:flex; align-items:center; border:2px solid var(--border);
  border-radius:var(--radius); overflow:hidden; background:#fff;
  transition:border-color var(--transition);
}
.nav-search-inner:focus-within { border-color:var(--green-primary); }
.nav-search select {
  padding:10px 12px; background:var(--cream-dark); color:var(--text-mid);
  font-size:.8rem; cursor:pointer; flex-shrink:0;
  border-right:1px solid var(--border);
}
.nav-search input { flex:1; padding:10px 13px; font-size:.86rem; color:var(--text-dark); background:transparent; }
.nav-search input::placeholder { color:var(--text-xlight); }
.nav-search .search-btn {
  padding:10px 17px; background:linear-gradient(135deg,var(--green-primary),var(--green-light));
  color:#fff; font-size:1rem; flex-shrink:0;
}
.nav-search .search-btn:hover { opacity:.9; }

/* Search dropdown */
.search-results {
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-md);
  z-index:200; display:none; max-height:300px; overflow-y:auto;
}
.search-results.active { display:block; }
.search-result-item {
  display:flex; align-items:center; gap:11px; padding:9px 14px;
  cursor:pointer; transition:background var(--transition);
  border-bottom:1px solid var(--border-light);
}
.search-result-item:last-child { border-bottom:none; }
.search-result-item:hover { background:var(--cream); }
.search-result-item img { width:42px; height:42px; object-fit:cover; border-radius:6px; }
.search-result-item .sr-info strong { display:block; font-size:.84rem; }
.search-result-item .sr-info span  { font-size:.78rem; color:var(--green-primary); font-weight:600; }

/* Nav actions */
.nav-actions { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.nav-action-btn {
  position:relative; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:7px 9px; border-radius:var(--radius-sm); cursor:pointer;
  color:var(--text-mid); font-size:1.15rem; text-decoration:none;
  transition:background var(--transition),color var(--transition);
}
.nav-action-btn:hover  { background:var(--cream-dark); color:var(--green-primary); }
.nav-action-btn .lbl  { font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.nav-action-btn .count {
  position:absolute; top:3px; right:2px; width:16px; height:16px;
  background:var(--green-primary); color:#fff; border-radius:50%;
  font-size:.6rem; font-weight:700; display:flex; align-items:center; justify-content:center;
}

/* Nav menu strip */
.nav-menu-wrap {
  background:var(--cream-dark); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.nav-menu { display:flex; align-items:center; gap:1px; }

.nav-item { position:relative; }
.nav-item > a, .nav-item > button {
  display:flex; align-items:center; gap:4px; padding:11px 14px;
  font-size:.86rem; font-weight:600; color:var(--text-dark);
  background:none; cursor:pointer; white-space:nowrap;
  transition:color var(--transition);
}
.nav-item > a:hover,
.nav-item > button:hover,
.nav-item.active > a { color:var(--green-primary); }
.nav-item .chev { font-size:.6rem; transition:transform var(--transition); }
.nav-item:hover .chev { transform:rotate(180deg); }

/* Dropdown */
.dropdown {
  position:absolute; top:100%; left:0; min-width:185px;
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-md);
  z-index:100; opacity:0; visibility:hidden;
  transform:translateY(7px); transition:all var(--transition);
  pointer-events:none;
}
.nav-item:hover .dropdown { opacity:1; visibility:visible; transform:translateY(0); pointer-events:all; }
.dropdown a {
  display:block; padding:9px 18px; font-size:.84rem; color:var(--text-mid);
  border-bottom:1px solid var(--border-light);
  transition:all var(--transition);
}
.dropdown a:last-child { border-bottom:none; }
.dropdown a:hover { background:var(--cream); color:var(--green-primary); padding-left:24px; }

/* Hamburger & Mobile menu */
.hamburger { display:none; flex-direction:column; gap:5px; padding:8px; cursor:pointer; border-radius:var(--radius-sm); margin-left:auto; }
.hamburger span { display:block; width:23px; height:2px; background:var(--text-dark); border-radius:2px; transition:all var(--transition); }
.hamburger.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mobile-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1999; }
.mobile-overlay.active { display:block; }

.mobile-menu {
  display:none; position:fixed; top:0; left:0;
  width:280px; height:100vh; background:#fff;
  z-index:2000; box-shadow:4px 0 24px rgba(0,0,0,.15);
  overflow-y:auto; transform:translateX(-100%); transition:transform .28s ease;
}
.mobile-menu.open { transform:translateX(0); }

.mobile-menu-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 18px; background:var(--green-primary); color:#fff;
}
.mobile-menu-head strong { font-size:.95rem; }
.mobile-menu-head button { color:#fff; font-size:1.3rem; opacity:.85; }
.mobile-menu-head button:hover { opacity:1; }

.mob-nav a {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 20px; font-size:.88rem; font-weight:600; color:var(--text-dark);
  border-bottom:1px solid var(--border-light); transition:all var(--transition);
}
.mob-nav a:hover { background:var(--cream); color:var(--green-primary); padding-left:28px; }
.mob-sub { background:var(--cream); display:none; }
.mob-sub.open { display:block; }
.mob-sub a { padding-left:36px !important; font-weight:500 !important; font-size:.82rem !important; }

/* ============================================
   5. HERO SLIDER
   ============================================ */
.hero-slider { position:relative; height:520px; overflow:hidden; background:#111; }

.hero-slide {
  position:absolute; inset:0; opacity:0;
  background-size:cover; background-position:center;
  transition:opacity .9s ease;
}
.hero-slide.active { opacity:1; }

.hero-slide-overlay {
  position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.18) 55%,transparent 100%);
}
.hero-slide-content {
  position:absolute; inset:0; display:flex; align-items:center;
}
.hero-slide-content .inner { max-width:580px; }


.hero-slide-content h1 {
  font-size:clamp(1.7rem,3.8vw,2.8rem); color:#fff; font-weight:800;
  line-height:1.2; margin-bottom:13px; text-shadow:0 2px 10px rgba(0,0,0,.3);
}
.hero-slide-content p {
  color:rgba(255,255,255,.88); font-size:clamp(.88rem,1.4vw,1.03rem);
  margin-bottom:24px; max-width:400px; line-height:1.65;
}

/* Slider dots */
.slider-dots {
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:10;
}
.s-dot {
  width:10px; height:10px; border-radius:5px; background:rgba(255,255,255,.45);
  border:none; cursor:pointer; transition:all var(--transition);
}
.s-dot.active { background:#fff; width:26px; }

/* Slider arrows */
.s-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:10;
  width:44px; height:44px; background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:50%;
  font-size:1rem; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background var(--transition); backdrop-filter:blur(4px);
}
.s-arrow:hover { background:rgba(255,255,255,.38); }
.s-prev { left:18px; }
.s-next { right:18px; }

/* ============================================
   6. FEATURE STRIP
   ============================================ */
.feature-strip { background:#fff; border-bottom:1px solid var(--border); }
.feature-strip .container { display:grid; grid-template-columns:repeat(4,1fr); }

.feat-item {
  display:flex; align-items:center; gap:14px; padding:18px 22px;
  border-right:1px solid var(--border);
}
.feat-item:last-child { border-right:none; }
.feat-icon {
  width:46px; height:46px; background:var(--green-bg); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; flex-shrink:0; color:var(--green-primary);
}
.feat-item strong { display:block; font-size:.86rem; color:var(--text-dark); margin-bottom:2px; }
.feat-item span   { font-size:.76rem; color:var(--text-light); }

/* ============================================
   7. PRODUCT CARDS
   ============================================ */
.product-card {
  background:#fff; border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-xs); position:relative;
  transition:box-shadow var(--transition), transform var(--transition);
}
.product-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }

.product-img-wrap { position:relative; height:200px; overflow:hidden; background:var(--cream); }
.product-img-wrap .img-primary,
.product-img-wrap .img-hover {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity var(--transition);
}
.product-img-wrap .img-hover   { opacity:0; }
.product-card:hover .img-hover   { opacity:1; }
.product-card:hover .img-primary { opacity:0; }

.p-badges { position:absolute; top:9px; left:9px; display:flex; flex-direction:column; gap:4px; z-index:1; }

.p-actions {
  position:absolute; top:9px; right:9px;
  display:flex; flex-direction:column; gap:6px;
  opacity:0; transform:translateX(6px); transition:all var(--transition); z-index:1;
}
.product-card:hover .p-actions { opacity:1; transform:translateX(0); }

.act-btn {
  width:33px; height:33px; background:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.84rem; cursor:pointer; box-shadow:var(--shadow-sm);
  border:none; color:var(--text-mid); transition:all var(--transition);
}
.act-btn:hover { background:var(--green-primary); color:#fff; }
.act-btn.wished { background:#E53935; color:#fff; }

.product-body { padding:14px 15px 15px; }
.p-cat  { font-size:.7rem; color:var(--green-primary); text-transform:uppercase; font-weight:600; letter-spacing:.5px; margin-bottom:4px; }
.p-name {
  font-size:.9rem; font-weight:600; color:var(--text-dark); margin-bottom:6px;
  line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.p-price-row { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.p-price-cur { font-size:1.08rem; font-weight:700; color:var(--green-primary); }
.p-price-old { font-size:.8rem; color:var(--text-xlight); text-decoration:line-through; }
.p-discount  { font-size:.72rem; font-weight:700; color:var(--red); background:#FFEBEE; padding:2px 7px; border-radius:12px; }

.p-btn-row { display:grid; grid-template-columns:1fr auto; gap:8px; }
.btn-cart {
  background:linear-gradient(135deg,var(--green-primary),var(--green-light));
  color:#fff; padding:9px 12px; border-radius:var(--radius-sm);
  font-size:.8rem; font-weight:600; display:flex; align-items:center;
  justify-content:center; gap:5px; cursor:pointer; border:none;
  transition:opacity var(--transition);
}
.btn-cart:hover { opacity:.88; }
.btn-buy {
  background:var(--orange); color:#fff; padding:9px 12px;
  border-radius:var(--radius-sm); font-size:.8rem; font-weight:600;
  cursor:pointer; border:none; transition:opacity var(--transition); white-space:nowrap;
}
.btn-buy:hover { opacity:.88; }

/* 4-col grid */
.grid-4  { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.grid-3  { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.grid-2  { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }

/* ============================================
   8. PROMO CARDS
   ============================================ */
.promo-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }

.promo-card {
  position:relative; height:215px; border-radius:var(--radius-md); overflow:hidden;
  cursor:pointer; display:flex; align-items:center; text-decoration:none;
}
.promo-card > img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform .4s ease;
}
.promo-card:hover > img { transform:scale(1.05); }
.promo-card-overlay {
  position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.56) 0%,transparent 70%);
}
.promo-card-content { position:relative; z-index:1; padding:28px 30px; color:#fff; }
.promo-card-content .ptag {
  display:inline-block; background:var(--orange); color:#fff;
  padding:3px 10px; border-radius:12px; font-size:.7rem; font-weight:700;
  text-transform:uppercase; margin-bottom:7px;
}
.promo-card-content h3 { font-size:1.2rem; color:#fff; margin-bottom:4px; }
.promo-card-content p  { font-size:.82rem; color:rgba(255,255,255,.85); margin-bottom:13px; }

/* ============================================
   9. NEW ARRIVALS — INFINITE LOOP SLIDER
   ============================================ */
.arrivals-wrap {
  overflow:hidden; position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 80px,#000 calc(100% - 80px),transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 80px,#000 calc(100% - 80px),transparent);
}
.arrivals-track { display:flex; gap:10px; will-change:transform; }

.arr-card {
  flex-shrink:0; width:210px; background:#fff; border-radius:var(--radius-md);
  overflow:hidden; box-shadow:var(--shadow-xs); cursor:pointer;
  transition:box-shadow var(--transition);
}
.arr-card:hover { box-shadow:var(--shadow); }
.arr-card .img-wrap { height:155px; overflow:hidden; background:var(--cream); position:relative; }
.arr-card .img-wrap .img-primary,
.arr-card .img-wrap .img-hover {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity var(--transition);
}
.arr-card .img-wrap .img-hover { opacity:0; }
.arr-card:hover .img-hover   { opacity:1; }
.arr-card:hover .img-primary { opacity:0; }
.arr-card .card-body { padding:11px 13px 13px; }
.arr-card .c-name   { font-size:.84rem; font-weight:600; margin-bottom:4px; }
.arr-card .c-price  { font-size:.9rem; font-weight:700; color:var(--green-primary); }

/* ============================================
   10. TRENDING — SINGLE ROW
   ============================================ */
.trending-row {
  display:flex; gap:10px; overflow-x:auto; padding-bottom:6px;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
.trending-row::-webkit-scrollbar { height:3px; }
.trending-row::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.trend-card {
  flex-shrink:0; width:195px; background:#fff; border-radius:var(--radius-md);
  overflow:hidden; box-shadow:var(--shadow-xs); cursor:pointer;
  transition:box-shadow var(--transition), transform var(--transition);
}
.trend-card:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.trend-card .img-wrap { height:165px; overflow:hidden; background:var(--cream); }
.trend-card .img-wrap img { width:100%; height:100%; object-fit:cover; }
.trend-card .card-body { padding:11px 13px 13px; }
.trend-card .c-name  { font-size:.84rem; font-weight:600; margin-bottom:4px; }
.trend-card .c-price { font-size:.9rem; font-weight:700; color:var(--green-primary); }
.trend-card .c-old   { font-size:.76rem; color:var(--text-xlight); text-decoration:line-through; margin-left:5px; }

/* ============================================
   11. SHOP BY CATEGORY
   ============================================ */
.cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }

.cat-card {
  position:relative; height:240px; border-radius:var(--radius-md); overflow:hidden;
  cursor:pointer; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-end; text-decoration:none;
}
.cat-card .cat-img,
.cat-card .cat-img-h {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity var(--transition);
}
.cat-card .cat-img-h { opacity:0; }
.cat-card:hover .cat-img-h { opacity:1; }
.cat-card:hover .cat-img   { opacity:0; }
.cat-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.08) 55%,transparent 100%);
}
.cat-card-body { position:relative; z-index:1; padding:18px; width:100%; text-align:center; color:#fff; }
.cat-card-body h3 { font-size:.98rem; color:#fff; margin-bottom:3px; }
.cat-card-body span { font-size:.76rem;display:block; margin-bottom:9px; }

/* ============================================
   12. BLOG CARDS
   ============================================ */
.blog-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }

.blog-card {
  background:#fff; border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-xs); transition:box-shadow var(--transition), transform var(--transition);
}
.blog-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.blog-card-img  { height:172px; overflow:hidden; }
.blog-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .38s ease; }
.blog-card:hover .blog-card-img img { transform:scale(1.05); }
.blog-card-body { padding:16px; }
.blog-meta { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.blog-meta span { font-size:.73rem; color:var(--text-xlight); }
.blog-meta .bcat { color:var(--green-primary); font-weight:600; }
.blog-card h3 {
  font-size:.9rem; font-weight:700; margin-bottom:7px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-card p {
  font-size:.8rem; color:var(--text-light); line-height:1.55; margin-bottom:12px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-card .read-more {
  font-size:.8rem; font-weight:600; color:var(--green-primary);
  display:inline-flex; align-items:center; gap:4px;
  transition:gap var(--transition); text-decoration:none;
}
.blog-card .read-more:hover { gap:9px; }

/* ============================================
   13. ABOUT FARM (HOME)
   ============================================ */
.about-home { background:#fff; }
.about-home .container {
  display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center;
}
.about-img-col { position:relative; }
.about-img-col img { width:100%; height:480px; object-fit:cover; border-radius:var(--radius-lg); }
.about-badge {
  position:absolute; bottom:24px; right:-18px; background:#fff;
  border-radius:var(--radius-md); padding:14px 18px;
  box-shadow:var(--shadow-md); text-align:center;
}
.about-badge strong { display:block; font-size:1.9rem; font-weight:800; color:var(--green-primary); }
.about-badge span   { font-size:.74rem; color:var(--text-light); }
.about-txt .atag {
  display:inline-block; color:var(--green-primary); font-weight:700;
  font-size:.78rem; text-transform:uppercase; letter-spacing:1px; margin-bottom:9px;
}
.about-txt h2 { font-size:clamp(1.3rem,2.4vw,1.8rem); font-weight:800; margin-bottom:16px; line-height:1.3; }
.about-txt p  { font-size:.9rem; color:var(--text-mid); line-height:1.78; margin-bottom:13px; }
.about-feats  { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0 22px; }
.af-item { display:flex; align-items:center; gap:9px; font-size:.83rem; font-weight:600; }
.af-item .ic {
  width:30px; height:30px; background:var(--green-bg); border-radius:7px;
  display:flex; align-items:center; justify-content:center; color:var(--green-primary); font-size:.9rem; flex-shrink:0;
}

/* ============================================
   14. REVIEWS SLIDER
   ============================================ */
.reviews-slider-wrap { overflow:hidden; }
.reviews-track { display:flex; transition:transform .5s ease; }
.review-card {
  flex-shrink:0; width:calc(33.333% - 14px); margin-right:20px;
  background:#fff; border-radius:var(--radius-md); padding:24px; box-shadow:var(--shadow-xs);
}
.review-head { display:flex; align-items:center; gap:13px; margin-bottom:13px; }
.review-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.review-author strong { display:block; font-size:.88rem; font-weight:700; }
.review-author span   { font-size:.76rem; color:var(--text-light); }
.review-text { font-size:.86rem; color:var(--text-mid); line-height:1.65; font-style:italic; }
.reviews-nav { display:flex; justify-content:center; gap:10px; margin-top:24px; }
.reviews-nav button {
  width:36px; height:36px; border-radius:50%; background:#fff;
  border:1px solid var(--border); color:var(--text-mid); font-size:.88rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all var(--transition);
}
.reviews-nav button:hover { background:var(--green-primary); color:#fff; border-color:var(--green-primary); }

/* ============================================
   15. FOOTER
   ============================================ */
.footer { background:#192419; color:#BBB; padding:60px 0 0; }
.footer-top {
  display:grid; grid-template-columns:2fr 1fr 1fr 1.6fr; gap:15px;
  padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.07);
}
.footer-logo { display:flex; align-items:center; gap:10px; margin-bottom:14px; text-decoration:none; }
.footer-logo .fli {
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,var(--green-primary),var(--green-light));
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:#fff;
}
.footer-logo strong { font-size:1.08rem; color:#fff; font-weight:800; }
.footer-brand p { font-size:.83rem; color:#888; line-height:1.72; margin-bottom:18px; }
.social-links { display:flex; gap:9px; }
.soc-link {
  width:34px; height:34px; background:rgba(255,255,255,.07);
  border-radius:7px; display:flex; align-items:center; justify-content:center;
  color:#AAA; font-size:.9rem; text-decoration:none; transition:all var(--transition);
}
.soc-link:hover { background:var(--green-primary); color:#fff; }

.footer-col h4 {
  font-size:.84rem; font-weight:700; color:#fff; text-transform:uppercase;
  letter-spacing:1px; margin-bottom:16px;
}
.footer-col ul li { margin-bottom:8px; }
.footer-col ul li a {
  font-size:.82rem; color:#888; text-decoration:none;
  display:flex; align-items:center; gap:5px;
  transition:color var(--transition);
}
.footer-col ul li a:hover { color:var(--green-accent); }

.f-contact-item { display:flex; align-items:flex-start; gap:9px; margin-bottom:11px; }
.f-contact-item .ic { color:var(--green-accent); font-size:.9rem; margin-top:2px; flex-shrink:0; }
.f-contact-item p   { font-size:.8rem; color:#888; line-height:1.5; margin:0; }

.f-newsletter p { font-size:.8rem; color:#888; margin-bottom:9px; margin-top:12px; }
.newsletter-form { display:flex; border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.1); }
.newsletter-form input  { flex:1; padding:10px 13px; background:rgba(255,255,255,.05); color:#fff; font-size:.82rem; }
.newsletter-form input::placeholder { color:#555; }
.newsletter-form button {
  padding:10px 15px; background:linear-gradient(135deg,var(--green-primary),var(--green-light));
  color:#fff; font-size:.8rem; font-weight:600; cursor:pointer; white-space:nowrap;
}
.newsletter-form button:hover { opacity:.9; }

.footer-bottom {
  padding:16px 0; display:flex; align-items:center; justify-content:space-between;
  font-size:.78rem; color:#555; flex-wrap:wrap; gap:10px;
}
.footer-bottom a { color:#666; text-decoration:none; transition:color var(--transition); }
.footer-bottom a:hover { color:var(--green-accent); }
.pay-icons { display:flex; align-items:center; gap:7px; }
.pay-ic { padding:3px 9px; background:rgba(255,255,255,.07); border-radius:4px; font-size:.7rem; color:#AAA; font-weight:700; }

/* ============================================
   16. FLOATING CHATBOT
   ============================================ */
.chatbot-wrap { position:fixed; bottom:20px; right:22px; z-index:900; }

.chatbot-toggle {
  width:54px; height:54px; margin-left:auto;
  background:linear-gradient(135deg,var(--green-primary),var(--green-light));
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.3rem; cursor:pointer; border:none;
  box-shadow:0 4px 16px rgba(46,125,50,.4);
  transition:transform var(--transition);
}
.chatbot-toggle:hover { transform:scale(1.08); }

.chatbot-box {
  position:absolute; bottom:66px; right:0; width:310px;
  background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  flex-direction:column; overflow:hidden; max-height:420px;
  display:none;
}
.chatbot-box.open { display:flex; }

.chatbot-head {
  background:linear-gradient(135deg,var(--green-primary),var(--green-light));
  padding:13px 15px; display:flex; align-items:center; gap:10px; color:#fff;
}
.chatbot-av {
  width:33px; height:33px; background:rgba(255,255,255,.2);
  border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.chatbot-head-info strong { display:block; font-size:.85rem; }
.chatbot-head-info span  { font-size:.7rem; opacity:.85; }
.chatbot-head .cbot-close { margin-left:auto; color:#fff; font-size:1rem; opacity:.8; cursor:pointer; padding:3px; }
.chatbot-head .cbot-close:hover { opacity:1; }

.chatbot-msgs {
  flex:1; overflow-y:auto; padding:14px;
  display:flex; flex-direction:column; gap:11px;
}
.c-msg {
  max-width:88%; padding:9px 13px; border-radius:12px;
  font-size:.81rem; line-height:1.5;
}
.c-msg.bot  { background:var(--cream); color:var(--text-dark); align-self:flex-start; border-radius:0 12px 12px 12px; }
.c-msg.user { background:var(--green-primary); color:#fff; align-self:flex-end; border-radius:12px 0 12px 12px; }

.chatbot-quick {
  padding:8px 14px; display:flex; flex-wrap:wrap; gap:5px;
  border-top:1px solid var(--border-light);
}
.q-btn {
  padding:4px 10px; background:var(--green-bg); color:var(--green-primary);
  border:1px solid var(--green-accent); border-radius:20px; font-size:.71rem; font-weight:600;
  cursor:pointer; transition:all var(--transition);
}
.q-btn:hover { background:var(--green-primary); color:#fff; border-color:var(--green-primary); }

.chatbot-input-row {
  display:flex; border-top:1px solid var(--border); padding:9px 11px; gap:7px;
}
.chatbot-input-row input {
  flex:1; padding:8px 12px; background:var(--cream);
  border-radius:20px; font-size:.81rem; border:1px solid var(--border);
}
.chatbot-input-row input:focus { border-color:var(--green-primary); }
.chatbot-input-row button {
  width:33px; height:33px; border-radius:50%; background:var(--green-primary);
  color:#fff; font-size:.82rem; display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0;
}

/* ============================================
   17. FLOATING CALL BUTTON
   ============================================ */
.float-call { position:fixed; bottom:32px; right:22px; z-index:900; }
.float-call a {
  display:flex; align-items:center; gap:8px;
  background:#1565C0; color:#fff; padding:11px 18px;
  border-radius:50px; text-decoration:none; font-size:.83rem; font-weight:600;
  box-shadow:0 4px 16px rgba(21,101,192,.35);
  transition:transform var(--transition), box-shadow var(--transition);
}
.float-call a:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(21,101,192,.45); }

/* ============================================
   18. STICKY CART SIDEBAR
   ============================================ */
.cart-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:2001; }
.cart-overlay.active { display:block; }

.sticky-cart {
  position:fixed; top:0; right:-380px; width:360px; height:100vh;
  background:#fff; z-index:2002; box-shadow:-4px 0 24px rgba(0,0,0,.12);
  display:flex; flex-direction:column; transition:right .3s ease;
}
.sticky-cart.open { right:0; }

.cart-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:17px 18px; background:var(--green-primary); color:#fff;
}
.cart-head h3   { color:#fff; font-size:.97rem; }
.cart-head-close { font-size:1.2rem; cursor:pointer; opacity:.8; color:#fff; padding:3px; }
.cart-head-close:hover { opacity:1; }

.cart-items-list { flex:1; overflow-y:auto; padding:14px; }

.cart-item-row {
  display:flex; align-items:center; gap:11px; padding:11px 0;
  border-bottom:1px solid var(--border-light);
}
.cart-item-row img { width:58px; height:58px; object-fit:cover; border-radius:7px; flex-shrink:0; }
.ci-info { flex:1; }
.ci-info strong { display:block; font-size:.83rem; margin-bottom:2px; }
.ci-info .ci-price { font-size:.86rem; font-weight:700; color:var(--green-primary); }
.ci-qty { display:flex; align-items:center; gap:5px; margin-top:5px; }
.ci-qty button {
  width:22px; height:22px; border:1px solid var(--border); background:var(--cream);
  border-radius:4px; font-size:.9rem; cursor:pointer; display:flex;
  align-items:center; justify-content:center; color:var(--text-dark); line-height:1;
}
.ci-qty span { font-size:.82rem; font-weight:600; min-width:20px; text-align:center; }
.ci-remove { font-size:1rem; color:var(--text-xlight); cursor:pointer; padding:3px; border:none; background:none; flex-shrink:0; }
.ci-remove:hover { color:var(--red); }

.cart-empty-msg { text-align:center; padding:48px 20px; }
.cart-empty-msg .ei { font-size:3rem; opacity:.35; margin-bottom:10px; }
.cart-empty-msg p   { font-size:.85rem; color:var(--text-light); }

.cart-foot { padding:14px 18px; border-top:1px solid var(--border); background:var(--cream-dark); }
.cart-subtotal { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:.86rem; }
.cart-subtotal strong { font-size:1rem; color:var(--green-primary); }
.cart-foot .btn { width:100%; justify-content:center; margin-bottom:8px; }

/* ============================================
   19. QUICK VIEW MODAL
   ============================================ */
.qv-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  z-index:3000; display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; visibility:hidden; transition:all var(--transition);
}
.qv-overlay.open { opacity:1; visibility:visible; }
.qv-box {
  background:#fff; border-radius:var(--radius-lg); max-width:750px; width:100%;
  max-height:90vh; overflow-y:auto; position:relative;
  transform:scale(.95); transition:transform var(--transition);
}
.qv-overlay.open .qv-box { transform:scale(1); }
.qv-close {
  position:absolute; top:12px; right:12px; width:33px; height:33px;
  background:var(--cream); border:none; border-radius:50%; font-size:1rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--text-mid); z-index:1;
}
.qv-close:hover { background:var(--border); }
.qv-inner { display:grid; grid-template-columns:1fr 1fr; }
.qv-img { height:350px; border-radius:var(--radius-lg) 0 0 var(--radius-lg); overflow:hidden; }
.qv-img img { width:100%; height:100%; object-fit:cover; }
.qv-content { padding:26px; }
.qv-cat   { font-size:.72rem; color:var(--green-primary); font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:7px; }
.qv-content h2 { font-size:1.17rem; margin-bottom:10px; }
.qv-price-row  { display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.qv-cur { font-size:1.35rem; font-weight:700; color:var(--green-primary); }
.qv-old { font-size:.88rem; color:var(--text-xlight); text-decoration:line-through; }
.qv-content p { font-size:.85rem; color:var(--text-mid); line-height:1.7; margin-bottom:16px; }
.qty-row { display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.qty-ctrl { display:flex; align-items:center; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.qty-ctrl button { width:35px; height:35px; background:var(--cream); font-size:1.1rem; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background var(--transition); }
.qty-ctrl button:hover { background:var(--border); }
.qty-ctrl input  { width:46px; text-align:center; font-size:.88rem; font-weight:600; height:35px; border-left:1px solid var(--border); border-right:1px solid var(--border); background:#fff; }
.qv-btns { display:flex; gap:9px; }

/* ============================================
   20. PAGE BANNER
   ============================================ */
.page-banner {
  height:210px; background-size:cover; background-position:center;
  position:relative; display:flex; align-items:center;
}
.page-banner::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(0,0,0,.62),rgba(0,0,0,.28));
}
.page-banner .container { position:relative; z-index:1; }
.page-banner h1 { font-size:clamp(1.4rem,2.8vw,2.1rem); color:#fff; font-weight:800; margin-bottom:8px; }
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:.8rem; color:rgba(255,255,255,.72); }
.breadcrumb a { color:rgba(255,255,255,.72); text-decoration:none; transition:color var(--transition); }
.breadcrumb a:hover { color:#fff; }
.breadcrumb .sep { opacity:.5; }

/* ============================================
   21. SHOP PAGE
   ============================================ */
.shop-layout { display:grid; grid-template-columns:230px 1fr; gap:10px; padding:40px 0; }
.sidebar-widget { background:#fff; border-radius:var(--radius-md); padding:18px; margin-bottom:18px; box-shadow:var(--shadow-xs); }
.sidebar-widget h4 {
  font-size:.84rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--text-dark); padding-bottom:8px; margin-bottom:12px;
  border-bottom:2px solid var(--green-primary); display:inline-block;
}
.filter-list li {
  display:flex; align-items:center; gap:7px; margin-bottom:8px;
  font-size:.84rem; color:var(--text-mid); cursor:pointer; transition:color var(--transition);
}
.filter-list li:hover { color:var(--green-primary); }
.filter-list li input { accent-color:var(--green-primary); width:14px; height:14px; }
.range-wrap { padding:4px 0; }
.range-wrap input[type=range] { width:100%; accent-color:var(--green-primary); }
.range-vals { display:flex; justify-content:space-between; font-size:.78rem; color:var(--text-light); margin-top:4px; }

.shop-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:22px; padding:11px 15px; background:#fff;
  border-radius:var(--radius); box-shadow:var(--shadow-xs);
}
.shop-toolbar span   { font-size:.83rem; color:var(--text-light); }
.shop-toolbar select {
  padding:7px 11px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--cream); font-size:.81rem; color:var(--text-dark); cursor:pointer;
}
.shop-products { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }

/* ============================================
   22. BLOG PAGE
   ============================================ */
.blog-layout { display:grid; grid-template-columns:1fr 275px; gap:10px; padding:40px 0; }
.blog-main-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.blog-sidebar-widget { background:#fff; border-radius:var(--radius-md); padding:18px; margin-bottom:18px; box-shadow:var(--shadow-xs); }
.blog-sidebar-widget h4 { font-size:.84rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid var(--green-primary); display:inline-block; }
.recent-post { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--border-light); }
.recent-post:last-child { border-bottom:none; }
.recent-post img { width:52px; height:52px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.rp-info strong { display:block; font-size:.8rem; font-weight:600; line-height:1.3; margin-bottom:2px; }
.rp-info span   { font-size:.73rem; color:var(--text-xlight); }

/* Blog Detail */
.blog-article-img { width:100%; height:370px; object-fit:cover; border-radius:var(--radius-md); margin-bottom:26px; }
.article-meta { display:flex; align-items:center; gap:16px; font-size:.78rem; color:var(--text-light); margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.article-content { font-size:.9rem; color:var(--text-mid); line-height:1.8; }
.article-content p  { margin-bottom:16px; }
.article-content h2 { font-size:1.18rem; margin:26px 0 11px; color:var(--text-dark); }
.article-content h3 { font-size:1.04rem; margin:20px 0 9px; }
.article-content ul { padding-left:18px; list-style:disc; margin-bottom:14px; }
.article-content ul li { margin-bottom:5px; }
.article-content blockquote {
  border-left:3px solid var(--green-primary); padding:12px 18px;
  background:var(--green-bg); border-radius:0 var(--radius) var(--radius) 0;
  font-style:italic; margin:18px 0;
}

/* ============================================
   23. CONTACT PAGE
   ============================================ */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:48px 0; }
.contact-form-card { background:#fff; border-radius:var(--radius-lg); padding:34px; box-shadow:var(--shadow); }
.contact-form-card h2 { font-size:1.25rem; margin-bottom:20px; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:.8rem; font-weight:600; margin-bottom:5px; }
.form-group input,
.form-group textarea,
.form-group select {
  width:100%; padding:11px 13px; border:1.5px solid var(--border);
  border-radius:var(--radius); font-size:.87rem; background:var(--cream);
  transition:border-color var(--transition), background var(--transition);
}
.form-group input:focus,
.form-group textarea:focus { border-color:var(--green-primary); background:#fff; }
.form-group textarea { resize:vertical; min-height:125px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:13px; }

.contact-info-card {
  background:#fff; border-radius:var(--radius-md); padding:20px;
  margin-bottom:14px; box-shadow:var(--shadow-xs);
  display:flex; align-items:flex-start; gap:13px;
}
.contact-info-card .cic-icon {
  width:42px; height:42px; background:var(--green-bg);
  border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; color:var(--green-primary); flex-shrink:0;
}
.contact-info-card h4 { font-size:.86rem; font-weight:700; margin-bottom:3px; }
.contact-info-card p  { font-size:.8rem; color:var(--text-light); line-height:1.5; }
.contact-info-card a  { color:var(--green-primary); font-weight:600; }
.map-wrap { border-radius:var(--radius-md); overflow:hidden; height:240px; margin-top:18px; }
.map-wrap iframe { width:100%; height:100%; border:none; }

/* Hours table */
.hours-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.hours-table td { padding:6px 0; color:var(--text-mid); }
.hours-table td:last-child { text-align:right; font-weight:600; color:var(--text-dark); }
.hours-table tr { border-bottom:1px solid var(--border-light); }
.hours-table tr:last-child { border-bottom:none; }

/* ============================================
   24. FAQ PAGE
   ============================================ */
.faq-wrap { padding:56px 0; }
.faq-wrap .container { max-width:850px; }
.faq-cat-title {
  font-size:.9rem; font-weight:700; color:var(--green-primary);
  text-transform:uppercase; letter-spacing:1px; margin:32px 0 13px;
  padding-bottom:7px; border-bottom:2px solid var(--green-bg);
}
.faq-cat-title:first-child { margin-top:0; }

.acc-item { border:1px solid var(--border); border-radius:var(--radius); margin-bottom:9px; overflow:hidden; background:#fff; }
.acc-header {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:15px 18px; background:#fff; border:none; cursor:pointer;
  text-align:left; font-size:.88rem; font-weight:600; color:var(--text-dark);
  transition:background var(--transition), color var(--transition); gap:11px;
}
.acc-header:hover { background:var(--cream); color:var(--green-primary); }
.acc-header.open  { background:var(--green-primary); color:#fff; }
.acc-icon { flex-shrink:0; font-size:.82rem; transition:transform var(--transition); }
.acc-header.open .acc-icon { transform:rotate(45deg); }
.acc-body { display:none; padding:15px 18px; font-size:.85rem; color:var(--text-mid); line-height:1.72; border-top:1px solid var(--border-light); background:var(--cream); }
.acc-body.open { display:block; }

/* ============================================
   25. ABOUT PAGE EXTRA
   ============================================ */
.about-story-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:center; margin-bottom:52px; }
.about-story-grid img { width:100%; height:380px; object-fit:cover; border-radius:var(--radius-lg); }
.about-story-txt p { font-size:.9rem; color:var(--text-mid); line-height:1.78; margin-bottom:13px; }

.about-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; padding:32px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin:24px 0; }
.stat-block { text-align:center; }
.stat-block strong { display:block; font-size:1.9rem; font-weight:800; color:var(--green-primary); }
.stat-block span   { font-size:.78rem; color:var(--text-light); }

.mv-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.mv-card { background:#fff; border-radius:var(--radius-md); padding:26px; box-shadow:var(--shadow-xs); }
.mv-card .mv-ic { width:50px; height:50px; background:var(--green-bg); border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:14px; }
.mv-card h3 { font-size:1.05rem; margin-bottom:9px; }
.mv-card p  { font-size:.86rem; color:var(--text-mid); line-height:1.7; }

.farmers-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.farmer-card  { text-align:center; background:#fff; border-radius:var(--radius-md); padding:22px 14px; box-shadow:var(--shadow-xs); }
.farmer-card img  { width:90px; height:90px; border-radius:50%; object-fit:cover; margin:0 auto 11px; border:3px solid var(--green-bg); }
.farmer-card h4   { font-size:.9rem; font-weight:700; margin-bottom:3px; }
.farmer-card span { font-size:.76rem; color:var(--green-primary); font-weight:600; }
.farmer-card p    { font-size:.78rem; color:var(--text-light); margin-top:6px; line-height:1.4; }

.why-strip { background:var(--green-primary); padding:52px 0; }
.why-strip .section-title,
.why-strip .section-subtitle { color:#fff; }
.why-strip .section-header .line { background:rgba(255,255,255,.35); }
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.why-card {
  text-align:center; padding:22px 14px;
  background:rgba(255,255,255,.1); border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.14);
}
.why-card .wi { font-size:1.9rem; margin-bottom:11px; }
.why-card h3 { font-size:.92rem; color:#fff; font-weight:700; margin-bottom:7px; }
.why-card p  { font-size:.78rem; color:rgba(255,255,255,.78); line-height:1.6; }

/* ============================================
   26. BACK TO TOP
   ============================================ */
.back-top {
  position:fixed; bottom:32px; left:22px; width:42px; height:42px;
  background:#fff; border:1px solid var(--border); border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:var(--shadow-sm); color:var(--text-mid); font-size:.95rem;
  z-index:800; opacity:0; visibility:hidden; transition:all var(--transition);
}
.back-top.show { opacity:1; visibility:visible; }
.back-top:hover { background:var(--green-primary); color:#fff; border-color:var(--green-primary); transform:translateY(-2px); }

/* ============================================
   27. RESPONSIVE
   ============================================ */
@media (max-width:1100px) {
  .footer-top { grid-template-columns:1fr 1fr; }
  .about-home .container { gap:40px; }
}
@media (max-width:1024px) {
  .hero-slider { height:420px; }
  .grid-4 { grid-template-columns:repeat(3,1fr); }
  .blog-grid { grid-template-columns:repeat(2,1fr); }
  .cat-grid  { grid-template-columns:repeat(2,1fr); }
  .about-home .container { grid-template-columns:1fr; }
  .about-badge { right:0; }
  .shop-layout  { grid-template-columns:1fr; }
  .shop-sidebar { display:none; }
  .shop-products { grid-template-columns:repeat(3,1fr); }
  .farmers-grid { grid-template-columns:repeat(2,1fr); }
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .about-stats { grid-template-columns:repeat(2,1fr); }
  .about-story-grid { grid-template-columns:1fr; gap:30px; }
  .blog-layout { grid-template-columns:1fr; }
  .blog-layout aside { display:none; }
  .qv-inner { grid-template-columns:1fr; }
  .qv-img   { height:230px; border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
}
@media (max-width:768px) {
  .top-bar-center { display:none; }
  .nav-search,
  .nav-menu-wrap  { display:none; }
  .hamburger { display:flex; }
  .mobile-menu { display:block; }
  .hero-slider { height:320px; }
  .hero-slide-content p { display:none; }
  .feat-strip .container,
  .feature-strip .container { grid-template-columns:repeat(2,1fr); }
  .feat-item:nth-child(2) { border-right:none; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .promo-cards { grid-template-columns:1fr; }
  .blog-grid, .blog-main-grid { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .mv-grid { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; gap:24px; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .nav-action-btn .lbl { display:none; }
}
@media (max-width:480px) {
  .container { padding:0 13px; }
  .section-pad { padding:48px 0; }
  .hero-slider { height:260px; }
  .grid-4, .grid-3 { grid-template-columns:repeat(2,1fr); }
  .cat-grid { grid-template-columns:repeat(2,1fr); }
  .why-grid, .farmers-grid { grid-template-columns:repeat(2,1fr); }
  .about-stats { grid-template-columns:repeat(2,1fr); }
  .form-row { grid-template-columns:1fr; }
  .shop-products { grid-template-columns:repeat(2,1fr); }
}