@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;500;600;700&display=swap');

/* ============================================
   FAKAHANY - V1.1 + DESIGN UPDATE
   ============================================ */

:root {
  --primary: #0d4a2e;
  --primary-light: #1a6d3f;
  --primary-dark: #083620;
  --accent: #f59e0b;
  --accent-light: #fbbf24;
  --text: #1f2937;
  --text-light: #6b7280;
  --bg: #f8fafc;
  --white: #ffffff;
  --border: #e5e7eb;
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --radius: 16px;
  --fk-bg-dark: #062f1f;
  --fk-bg-mid: #0b4b30;
  --fk-bg-soft: #14633f;
  --fk-green: #22c55e;
  --fk-green-soft: #86efac;
  --fk-orange: #ff8a00;
  --fk-orange-hover: #f07d00;
  --fk-white: #ffffff;
  --fk-text-soft: rgba(255, 255, 255, 0.82);
  --fk-border: rgba(255, 255, 255, 0.16);
  --fk-card: rgba(255, 255, 255, 0.06);
  --fk-card-2: rgba(255, 255, 255, 0.08);
  --fk-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  --muted: #9ca3af;
  --secondary: #6b7280;
  --success: #16a34a;
  --card-bg: #ffffff;
}

body {
  font-family: 'El Messiri', sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.6;
  margin: 0; padding: 0;
}
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ============================================
   NAVBAR - Green Gradient + Logo
   ============================================ */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 0 24px; height: 70px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-brand { display: flex; align-items: center; }
.brand-logo { height: 48px; width: auto; }
.nav-links { display: flex; gap: 8px; align-items: center; }
.nav-links a {
  color: #0d4a2e; text-decoration: none; font-size: 15px;
  font-weight: 600; padding: 8px 14px; border-radius: 8px;
  transition: all 0.25s ease; position: relative;
  min-height: 44px; display: inline-flex; align-items: center;
}
.nav-links a:hover { color: #166534; background: rgba(13,74,46,0.08); }
.nav-links a::after {
  content: ''; position: absolute; bottom: 4px; right: 14px;
  width: 0; height: 2px; background: #f97316;
  transition: width 0.3s ease; border-radius: 2px;
}
.nav-links a:hover::after { width: calc(100% - 28px); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-btn {
  background: var(--fk-orange); border: none;
  color: #fff; width: 44px; height: 44px; border-radius: 12px;
  cursor: pointer; font-size: 18px; display: flex; align-items: center;
  justify-content: center; position: relative; transition: all 0.25s ease;
  min-width: 44px; min-height: 44px;
}
.nav-btn:hover { background: var(--fk-orange-hover); transform: translateY(-2px); }
.badge {
  position: absolute; top: -6px; left: -6px;
  background: #dc2626; color: #fff;
  font-size: 11px; font-weight: 700; width: 20px; height: 20px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.badge.hidden { display: none; }

/* Hamburger */
.hamburger {
  display: none; flex-direction: column; justify-content: center;
  align-items: center; width: 44px; height: 44px;
  background: transparent; border: none; cursor: pointer;
  gap: 5px; padding: 8px; min-width: 44px; min-height: 44px;
}
.hamburger span {
  display: block; width: 24px; height: 2.5px;
  background: #0d4a2e; border-radius: 2px; transition: all 0.3s ease;
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile Menu */
.mobile-menu {
  position: fixed; top: 0; right: -100%; width: 80%; max-width: 320px;
  height: 100vh; background: #fff; box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  z-index: 1000; display: flex; flex-direction: column;
  padding: 80px 24px 24px; gap: 8px; transition: right 0.3s ease;
}
.mobile-menu.open { right: 0; }
.mobile-menu a {
  padding: 14px 16px; border-radius: 12px; color: var(--primary);
  font-weight: 600; font-size: 16px; min-height: 44px;
  display: flex; align-items: center; transition: background 0.2s;
  text-decoration: none;
}
.mobile-menu a:hover { background: #f0fdf4; }
.mobile-menu-close {
  position: absolute; top: 20px; left: 20px; width: 44px; height: 44px;
  border-radius: 50%; border: none; background: #f1f5f9;
  font-size: 20px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
}

/* ============================================
   HERO
   ============================================ */
.fakahany-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 25%, rgba(92, 255, 143, 0.18), transparent 28%),
    radial-gradient(circle at 84% 16%, rgba(92, 255, 143, 0.10), transparent 18%),
    linear-gradient(135deg, var(--fk-bg-dark) 0%, var(--fk-bg-mid) 55%, #063923 100%);
  padding: 40px 24px 48px;
}
.fakahany-hero::before,
.fakahany-hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(8px);
  opacity: 0.7;
  pointer-events: none;
}
.fakahany-hero::before {
  width: 180px; height: 180px; left: -40px; bottom: 30px;
  background: radial-gradient(circle, rgba(142, 255, 122, 0.22), transparent 70%);
}
.fakahany-hero::after {
  width: 180px; height: 180px; right: -30px; top: 20px;
  background: radial-gradient(circle, rgba(130, 255, 170, 0.18), transparent 70%);
}
.hero-shell { max-width: 1360px; margin: 0 auto; position: relative; z-index: 2; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  grid-template-areas: "visual content"; align-items: center;
  gap: 36px; min-height: 620px;
}
.hero-visual {
  grid-area: visual; position: relative;
  display: flex; align-items: center; justify-content: center; min-height: 520px;
}
.hero-visual-glow {
  position: absolute; width: 88%; height: 88%; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(132, 255, 88, 0.45) 0%, rgba(132, 255, 88, 0.12) 45%, transparent 72%);
  filter: blur(8px); z-index: 0;
}
.hero-produce {
  position: relative; z-index: 2; width: min(100%, 760px);
  height: auto; display: block;
  filter: drop-shadow(0 26px 45px rgba(0,0,0,0.28)) drop-shadow(0 10px 20px rgba(0,0,0,0.18));
}
.hero-content {
  grid-area: content; direction: rtl; text-align: right;
  position: relative; z-index: 3; padding-inline-start: 10px;
}
.hero-title {
  margin: 0 0 18px; color: var(--fk-white);
  font-size: clamp(44px, 5.2vw, 82px); line-height: 1.08;
  font-weight: 900; letter-spacing: -0.5px;
}
.hero-title span {
  display: block; color: var(--fk-green-soft);
  text-shadow: 0 0 22px rgba(134, 239, 172, 0.18);
}
.hero-subtitle {
  margin: 0 0 34px; color: var(--fk-text-soft);
  font-size: clamp(20px, 1.7vw, 28px); line-height: 1.7; font-weight: 500;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 34px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 210px; min-height: 68px; border-radius: 18px;
  font-size: 20px; font-weight: 800; text-decoration: none; transition: all 0.25s ease;
}
.btn-primary {
  background: var(--fk-orange); color: var(--fk-white);
  box-shadow: 0 12px 28px rgba(255,138,0,0.28);
}
.btn-primary:hover { background: var(--fk-orange-hover); transform: translateY(-2px); }
.btn-secondary {
  background: transparent; color: var(--fk-white);
  border: 1.5px solid var(--fk-border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}
.btn-secondary:hover { background: rgba(255,255,255,0.05); transform: translateY(-2px); }
.hero-features { display: flex; flex-wrap: wrap; gap: 14px; }
.feature-card {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--fk-card); border: 1px solid rgba(255,255,255,0.06);
  color: var(--fk-white); border-radius: 18px; padding: 14px 18px;
  min-height: 62px; backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.10);
}
.feature-icon { font-size: 22px; line-height: 1; }
.feature-text { font-size: 18px; font-weight: 700; }
@media (max-width: 1100px) {
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "content" "visual";
    gap: 26px; min-height: auto;
  }
  .hero-content { padding-inline-start: 0; }
  .hero-visual { min-height: auto; }
  .hero-produce { width: min(100%, 680px); }
}
@media (max-width: 768px) {
  .fakahany-hero { padding: 28px 16px 34px; }
  .hero-topbar { margin-bottom: 20px; }
  .hero-logo img { height: 44px; }
  .hero-pill { font-size: 15px; padding: 10px 16px; margin-bottom: 20px; }
  .hero-title { font-size: clamp(34px, 9vw, 54px); line-height: 1.15; margin-bottom: 14px; }
  .hero-subtitle { font-size: 17px; margin-bottom: 24px; }
  .hero-actions { flex-direction: column; gap: 12px; margin-bottom: 24px; }
  .btn { width: 100%; min-width: 100%; min-height: 58px; font-size: 18px; }
  .hero-features { gap: 10px; }
  .feature-card { width: 100%; justify-content: center; min-height: 54px; padding: 12px 14px; }
  .feature-text { font-size: 16px; }
}

/* ============================================
   CATEGORY CARDS
   ============================================ */
.categories-section {
   padding: 80px 20px; background: #f0f4f8;
}
.categories-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 1200px; margin: 0 auto;
}
.category-card {
  background: var(--white); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all 0.3s ease !important; cursor: pointer;
  border: 1px solid #e2e8f0; min-height: 44px;
}
.category-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 32px rgba(13,74,46,0.12) !important;
}
.category-img { height: 180px; overflow: hidden; background: #f0fdf4; display: flex; align-items: center; justify-content: center; }
.category-img img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.4s ease; }
.category-card:hover .category-img img { transform: scale(1.08); }
.category-info { padding: 16px; }
.category-info h3 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.category-info p { font-size: 12px; color: var(--text-light); margin-bottom: 10px; }
.category-arrow {
  font-size: 13px; font-weight: 600; color: var(--primary);
  display: inline-flex; align-items: center; gap: 4px;
  transition: gap 0.2s ease;
}
.category-card:hover .category-arrow { gap: 8px; }

/* ============================================
   BANNERS
   ============================================ */
.banners-section { padding: 60px 20px; background: var(--bg); overflow: hidden; }
.banners-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  max-width: 1200px; margin: 0 auto;
}
.banner-card {
  border-radius: var(--radius); overflow: hidden;
  background: var(--white); box-shadow: var(--shadow);
  transition: all 0.3s ease !important;
}
.banner-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12) !important;
}
.banner-card img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 160px; }
.banner-placeholder {
  width: 100%; min-height: 160px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  border-radius: var(--radius); color: #2e7d32; text-align: center; padding: 24px;
}
.banner-placeholder-icon { font-size: 36px; }
.banner-placeholder-text { font-size: 16px; font-weight: 600; }

/* ============================================
   PRODUCTS
   ============================================ */
.products-section { padding: 80px 20px; max-width: 1200px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 40px; }
.section-tag {
  display: inline-block; background: rgba(13, 74, 46, 0.08);
  color: var(--primary); padding: 6px 16px; border-radius: 50px;
  font-size: 13px; font-weight: 600; margin-bottom: 12px;
}
.section-title { font-size: 32px; font-weight: 800; margin-bottom: 8px; color: var(--text); }
.section-subtitle { color: var(--text-light); font-size: 16px; }

.tabs { display: flex; gap: 10px; justify-content: center; margin-bottom: 32px; flex-wrap: wrap; }
.tab {
  padding: 10px 24px; border-radius: 50px; border: 2px solid var(--border);
  background: var(--white); cursor: pointer; font-size: 15px; font-weight: 600;
  color: var(--text-light); transition: all 0.25s ease !important;
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
.tab:hover { border-color: var(--primary); color: var(--primary); }
.tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.products-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
.product-card {
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--border);
  transition: all 0.3s ease !important; cursor: pointer; min-height: 44px;
}
.product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 32px rgba(0,0,0,0.1) !important;
}
.product-img { height: 160px; overflow: hidden; position: relative; }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.product-card:hover .product-img img { transform: scale(1.05); }
.product-info { padding: 16px; }
.product-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.product-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.product-price { font-size: 18px; font-weight: 800; color: var(--primary); }
.product-unit { font-size: 12px; color: var(--text-light); }
.qty-row { display: flex; align-items: center; gap: 8px; }
.qty-btn {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg); cursor: pointer; font-size: 18px; display: flex;
  align-items: center; justify-content: center; transition: all 0.2s;
  min-width: 36px; min-height: 36px;
}
.qty-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.qty-val { font-size: 16px; font-weight: 700; min-width: 24px; text-align: center; }
.add-btn {
  flex: 1; background: var(--primary); color: #fff; border: none;
  padding: 10px; border-radius: 10px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all 0.2s; min-height: 44px;
}
.add-btn:hover { background: var(--primary-dark); }

.btn-large { padding: 14px 32px !important; font-size: 17px !important; border-radius: 14px !important; }
.btn-glow { box-shadow: 0 0 20px rgba(255, 138, 0, 0.35) !important; }

/* ============================================
   ABOUT
   ============================================ */
.about-section { padding: 80px 20px; background: var(--bg); }
.about-content {
  max-width: 1200px; margin: 0 auto; display: flex; gap: 60px; align-items: center;
}
.about-text { flex: 1; }
.about-text h2 { font-size: 32px; margin-bottom: 16px; }
.about-text p { color: var(--text-light); margin-bottom: 24px; line-height: 1.8; }
.about-features { display: flex; flex-direction: column; gap: 12px; }
.af-item {
  display: flex; align-items: center; gap: 10px; font-size: 15px;
  min-height: 44px;
}
.about-visual { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.about-card {
  background: var(--white); border-radius: var(--radius); padding: 28px;
  box-shadow: var(--shadow); border: 1px solid var(--border);
  transition: all 0.3s ease !important;
}
.about-card:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 28px rgba(0,0,0,0.08) !important; }
.about-card-icon { font-size: 36px; margin-bottom: 10px; }
.about-card-title { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.about-card-desc { font-size: 14px; color: var(--text-light); }

/* ============================================
   BOTTOM CTA BAR
   ============================================ */
.bottom-cta {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 50%, #16a34a 100%);
  padding: 40px 20px;
}
.bottom-cta-content {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.bottom-cta-item {
  display: flex; align-items: center; gap: 16px; color: #0d4a2e;
  background: #fff; padding: 20px 24px;
  border-radius: var(--radius);
  border: none; min-height: 44px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: all 0.3s ease !important; cursor: pointer;
}
.bottom-cta-item:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important; }
.bottom-cta-icon { font-size: 28px; }
.bottom-cta-item strong { display: block; font-size: 16px; color: #0d4a2e; }
.bottom-cta-item span { font-size: 14px; color: #333; }
.bottom-cta-item a { color: #0d4a2e; }

/* ============================================
   CART / CHECKOUT / SUCCESS
   ============================================ */
.page { padding: 40px 20px; max-width: 800px; margin: 0 auto; min-height: 60vh; }
.hidden { display: none !important; }
.cart-container { background: var(--white); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); }
.empty-state { text-align: center; padding: 60px 20px; }
.empty-icon { font-size: 64px; margin-bottom: 16px; }
.empty-state h3 { font-size: 20px; margin-bottom: 8px; }
.empty-state p { color: var(--text-light); margin-bottom: 20px; }

.checkout-container { background: var(--white); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); }
.back-btn {
  background: none; border: none; color: var(--primary); font-size: 15px;
  cursor: pointer; margin-bottom: 16px; font-weight: 600; min-height: 44px; min-width: 44px;
}
.order-summary { background: #f0fdf4; border-radius: 12px; padding: 20px; margin-bottom: 24px; border: 1px solid #bbf7d0; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.form-group input, .form-group select {
  width: 100%; padding: 12px 16px; border: 2px solid var(--border); border-radius: 12px;
  font-size: 15px; transition: border-color 0.2s; background: var(--white);
  min-height: 48px;
}
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary); }
.form-row { display: flex; gap: 16px; }
.form-row .form-group { flex: 1; }

/* Mobile Address Repeat + Summary */
.mobile-address-repeat { display: block; }
.mobile-summary {
  display: none; background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: 12px; padding: 16px; margin: 12px 0;
  font-size: 14px; color: #166534;
}
.mobile-summary strong { display: block; margin-bottom: 6px; }

.success-box { text-align: center; padding: 60px 20px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
.success-icon { font-size: 64px; margin-bottom: 16px; }
.success-box h2 { margin-bottom: 8px; }
.success-box p { color: var(--text-light); margin-bottom: 24px; }
.success-order-info { display: flex; justify-content: center; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.success-order-info div { background: #f0fdf4; padding: 10px 20px; border-radius: 50px; font-size: 14px; color: var(--primary); }

/* ============================================
   REVIEWS
   ============================================ */
.star-picker { display: flex; gap: 4px; font-size: 28px; }
.star-picker span { cursor: pointer; opacity: 0.3; transition: opacity 0.2s; }
.star-picker span.active { opacity: 1; }
.product-rating { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.product-rating .stars { font-size: 12px; }
.product-rating .rating-count { font-size: 11px; color: var(--text-light); }
.review-btn {
  background: none; border: 1px solid #e5e7eb; color: #f59e0b;
  padding: 4px 10px; border-radius: 8px; font-size: 12px; cursor: pointer;
  transition: all 0.2s; margin-bottom: 6px;
}
.review-btn:hover { background: #fef3c7; border-color: #f59e0b; }

/* ============================================
   FOOTER
   ============================================ */
.site-footer { background: linear-gradient(135deg, #062f1f 0%, #0b4b30 100%); color: #fff; padding: 60px 20px 0; }
.footer-content {
  max-width: 1200px; margin: 0 auto; display: flex;
  justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.footer-brand { max-width: 300px; }
.footer-logo { height: 40px; width: auto; margin-bottom: 12px; }
.footer-brand p { color: #9ca3af; font-size: 14px; }
.footer-links { display: flex; gap: 60px; }
.fl-col h4 { font-size: 15px; margin-bottom: 16px; color: #fff; }
.fl-col a {
  display: block; color: #9ca3af; text-decoration: none; font-size: 14px;
  margin-bottom: 10px; transition: color 0.2s; min-height: 44px;
}
.fl-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1); margin-top: 40px; padding: 20px;
  text-align: center; color: #6b7280; font-size: 13px;
}

/* ============================================
   TOAST
   ============================================ */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--primary); color: #fff; padding: 12px 24px;
  border-radius: var(--radius); font-size: 14px; opacity: 0;
  transition: all 0.3s; z-index: 200;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .navbar { padding: 0 16px; height: 64px; }
  .brand-logo { height: 40px; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  .categories-grid .category-card:last-child { grid-column: auto; }
  .banners-row { grid-template-columns: 1fr; }
  .banner-card img { min-height: 120px; }
  .bottom-cta-content { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  .about-content { flex-direction: column; }
  .footer-links { flex-direction: column; gap: 24px; }
  .form-row { flex-direction: column; gap: 0; }
  .page { padding: 20px 16px; }
  .checkout-container { padding: 20px; }
}

@media (max-width: 640px) {
  .section-title { font-size: 24px; }
  .categories-grid { grid-template-columns: 1fr 1fr; }
  .category-img { height: 120px; }
  .mobile-address-repeat { display: block; }
  .mobile-summary { display: block; }
}

/* ============================================
   TOUCH TARGETS 44px (Batch 1 Fix)
   ============================================ */
button, a, .tab, .nav-btn, input, select, textarea,
.product-card, .af-item, .category-card,
.qty-btn, .add-btn, .back-btn, .filter-btn, .action-btn {
  min-height: 44px;
}
button, a, .nav-btn, .add-btn, .back-btn, .filter-btn, .action-btn, .tab {
  min-width: 44px;
}

/* ============================================
   CART
   ============================================ */
.cart-item {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.cart-item:last-child { border-bottom: none; }
.cart-emoji {
  width: 56px; height: 56px; border-radius: 12px;
  background: #f0fdf4; display: flex; align-items: center;
  justify-content: center; overflow: hidden; flex-shrink: 0;
}
.cart-emoji img { width: 100%; height: 100%; object-fit: cover; }
.cart-emoji span { font-size: 28px; }
.cart-info { flex: 1; }
.cart-name { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.cart-meta { font-size: 13px; color: var(--text-light); }
.cart-subtotal { font-size: 16px; font-weight: 700; color: var(--primary); white-space: nowrap; }
.cart-total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-top: 1px solid var(--border);
}
.cart-total-label { font-size: 16px; font-weight: 600; }
.cart-total-value { font-size: 18px; font-weight: 800; color: var(--primary); }

/* ============================================
   CHECKOUT SUMMARY
   ============================================ */
.summary-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; font-size: 15px;
}
.summary-row.total {
  border-top: 2px solid var(--primary); padding-top: 12px; margin-top: 8px;
  font-weight: 700; font-size: 18px; color: var(--primary);
}

/* ============================================
   STATUS BADGES (for my-orders.html)
   ============================================ */
.status {
  display: inline-block; padding: 4px 12px;
  border-radius: 20px; font-size: 12px; font-weight: 600;
}
.status-new { background: #fef3c7; color: #92400e; }
.status-preparing { background: #dbeafe; color: #1e40af; }
.status-done { background: #d1fae5; color: #065f46; }
.status-cancelled { background: #fee2e2; color: #991b1b; }
.status-delivering { background: #dbeafe; color: #1e40af; }

/* ============================================
   EXTRA SPACING (+20px)
   ============================================ */
.categories-section { padding-top: 80px !important; padding-bottom: 80px !important; }
.products-section { padding-top: 80px !important; padding-bottom: 80px !important; }
.about-section { padding-top: 80px !important; padding-bottom: 80px !important; }
.banners-section { padding: 60px 20px !important; }

/* ============================================
   CUSTOMER GREETING
   ============================================ */
.greeting-container { margin-bottom: 16px; }
.greeting-box {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border: 1px solid #6ee7b7;
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #065f46;
  animation: greetSlide 0.3s ease;
}
.greeting-box.new-customer {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: #fbbf24;
  color: #92400e;
}
.greeting-wave {
  font-size: 22px;
  animation: wave 0.6s ease;
}
@keyframes greetSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(20deg); }
  75% { transform: rotate(-10deg); }
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.page-btn {
  padding: 10px 18px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 44px;
  min-height: 44px;
}
.page-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #f0fdf4;
}
.page-btn.active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}


/* ============================================
   STOREFRONT UX POLISH - V9
   ============================================ */
.nav-btn.cart-btn {
  width: auto; min-width: 96px; padding: 0 14px; gap: 7px;
  border-radius: 999px; box-shadow: 0 5px 14px rgba(255,138,0,.22);
}
.cart-btn .cart-icon { font-size: 17px; line-height: 1; }
.cart-btn .cart-label { font-size: 14px; font-weight: 800; }
.cart-btn .badge { top: -7px; left: -5px; }

.products-grid { align-items: stretch; }
.product-card {
  display: flex; flex-direction: column; cursor: default;
  border-color: #e7ede9; box-shadow: 0 7px 20px rgba(6,47,31,.07);
}
.product-img { height: 190px; background: #f3f8f5; }
.product-img .emoji {
  width: 100%; height: 100%; display:flex; align-items:center; justify-content:center;
  font-size: 64px;
}
.product-info { padding: 16px; display:flex; flex-direction:column; flex:1; }
.product-name { font-size: 16px; line-height: 1.45; min-height: 46px; margin-bottom: 6px; }
.product-rating { min-height: 22px; margin-bottom: 6px; }
.product-meta { margin-top: auto; margin-bottom: 13px; gap: 8px; }
.product-price-wrap { display:flex; align-items:baseline; gap:4px; flex-wrap:wrap; }
.product-price { font-size: 20px; letter-spacing: -.2px; }
.product-unit { font-size: 12px; background:#f0f7f3; color:#527063; padding:3px 7px; border-radius:999px; }
.review-btn {
  min-width: auto !important; min-height: 32px !important; padding: 5px 8px !important;
  border-radius: 999px !important; font-size: 11px !important; white-space: nowrap;
}
.product-qty-row {
  display:grid; grid-template-columns: 44px 1fr 44px; gap: 8px; width:100%;
  background:#f7faf8; border:1px solid #e4ece7; border-radius:14px; padding:5px;
}
.product-qty-row .qty-btn { width:44px; height:44px; background:#fff; border-radius:11px; }
.product-qty-row .qty-btn-plus { background:var(--primary); color:#fff; border-color:var(--primary); }
.product-qty-row .qty-val { display:flex; align-items:center; justify-content:center; font-size:17px; }

.mobile-cart-bar { display:none; }

@media (max-width: 768px) {
  .nav-btn.cart-btn { min-width: 48px; width:48px; padding:0; border-radius:12px; }
  .cart-btn .cart-label { display:none; }
  .products-section { padding-inline: 12px; }
  .section-header { margin-bottom: 28px; }
  .tabs {
    justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; padding:0 2px 8px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .tabs::-webkit-scrollbar { display:none; }
  .tab { flex:0 0 auto; padding:9px 16px; }
  .products-grid { gap:10px !important; }
  .product-img { height: 145px; }
  .product-info { padding:12px; }
  .product-name { font-size:14px; min-height:42px; }
  .product-price { font-size:17px; }
  .product-unit { font-size:10px; padding:2px 5px; }
  .review-btn { font-size:10px !important; padding:4px 6px !important; }
  .product-qty-row { grid-template-columns:40px 1fr 40px; gap:5px; padding:4px; }
  .product-qty-row .qty-btn { width:40px; height:40px; min-width:40px; min-height:40px; }

  body.has-mobile-cart { padding-bottom: 76px; }
  .mobile-cart-bar {
    position:fixed; display:flex; right:12px; left:12px; bottom:12px; z-index:950;
    min-height:58px; border:0; border-radius:17px; padding:0 18px;
    align-items:center; justify-content:space-between; direction:rtl;
    background:var(--primary); color:#fff; box-shadow:0 12px 30px rgba(6,47,31,.30);
    cursor:pointer;
  }
  .mobile-cart-bar.hidden { display:none !important; }
  .mobile-cart-main { display:flex; align-items:center; gap:8px; }
  .mobile-cart-main strong { font-size:15px; }
  .mobile-cart-count {
    display:inline-flex; align-items:center; justify-content:center; min-width:25px; height:25px;
    padding:0 6px; border-radius:999px; background:var(--fk-orange); color:#fff; font-size:12px; font-weight:800;
  }
  .mobile-cart-total { font-size:15px; font-weight:800; direction:rtl; }
}

@media (max-width: 380px) {
  .products-grid { grid-template-columns: 1fr !important; }
  .product-img { height: 210px; }
}

/* ============================================
   CART + CHECKOUT UX POLISH - V10
   ============================================ */
.cart-container { max-width: 1080px; margin: 0 auto; }
#page-cart { max-width: 1120px; }
.cart-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; }
.cart-kicker, .checkout-kicker { display:block; color:var(--fk-orange); font-size:13px; font-weight:800; margin-bottom:4px; }
.cart-head h2, .checkout-heading h2 { margin:0; font-size:28px; }
.continue-shopping { background:#f4f8f6; border:1px solid #dfe9e3; color:var(--primary); border-radius:12px; padding:10px 14px; font-weight:800; cursor:pointer; }
.cart-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; }
.cart-items-panel { border:1px solid #e5ece8; border-radius:16px; padding:0 18px; background:#fff; }
.cart-summary-card { position:sticky; top:88px; border:1px solid #e5ece8; border-radius:16px; padding:20px; background:#fbfdfc; box-shadow:0 8px 24px rgba(6,47,31,.06); }
.cart-summary-card h3 { margin:0 0 14px; font-size:18px; }
.cart-item { padding:18px 0; gap:16px; }
.cart-emoji { width:68px; height:68px; }
.cart-info { min-width:0; }
.cart-name { font-size:16px; }
.cart-meta strong { color:#314a3f; }
.cart-remove { min-height:auto !important; min-width:auto !important; padding:3px 0; border:0; background:none; color:#b91c1c; font-size:12px; cursor:pointer; margin-top:4px; }
.cart-item-actions { display:flex; align-items:center; gap:18px; }
.cart-qty { display:grid; grid-template-columns:38px 42px 38px; align-items:center; gap:4px; background:#f6faf8; border:1px solid #e2ebe6; border-radius:12px; padding:4px; }
.cart-qty .qty-btn { width:38px; height:38px; min-width:38px; min-height:38px; background:#fff; border-radius:9px; }
.cart-qty .qty-btn-plus { background:var(--primary); color:#fff; border-color:var(--primary); }
.minimum-card { border-radius:12px; padding:12px; margin:10px 0 14px; font-size:13px; }
.minimum-card.warning { background:#fff8e6; border:1px solid #f5d78c; color:#7a5410; }
.minimum-card.success { background:#edf9f2; border:1px solid #bde6cc; color:#17683c; font-weight:700; }
.minimum-copy { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:9px; }
.minimum-copy span { opacity:.8; }
.minimum-track { height:7px; border-radius:999px; background:rgba(122,84,16,.12); overflow:hidden; }
.minimum-track span { display:block; height:100%; background:var(--fk-orange); border-radius:inherit; }
.cart-total-row { border-top:0; padding:8px 0; font-size:14px; }
.cart-total-row.grand { border-top:1px solid #dfe8e3; padding-top:14px; margin-top:6px; }
.cart-total-row.grand .cart-total-label { font-size:17px; font-weight:800; }
.cart-checkout-btn { width:100%; border:0; border-radius:14px; background:var(--fk-orange); color:#fff; padding:13px 16px; margin-top:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:16px; font-weight:900; cursor:pointer; min-height:58px; }
.cart-checkout-btn small { font-size:11px; font-weight:600; opacity:.9; margin-top:2px; }
.cart-checkout-btn.disabled { background:#9ca3af; cursor:not-allowed; opacity:.75; }
.cart-pay-note { text-align:center; color:#667a70; font-size:12px; margin-top:10px; }

.checkout-page { max-width:1180px; }
.checkout-container { padding:30px; }
.checkout-heading { display:flex; align-items:flex-start; gap:18px; margin-bottom:24px; }
.checkout-heading .back-btn { margin:0; flex:0 0 auto; }
.checkout-heading p { margin:5px 0 0; color:var(--text-light); font-size:14px; }
.checkout-layout { display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:28px; align-items:start; }
.checkout-form-panel { min-width:0; }
.checkout-summary-panel { position:sticky; top:88px; background:#fbfdfc; border:1px solid #e4ece7; border-radius:16px; padding:18px; }
.checkout-summary-title { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.checkout-summary-title > span { font-size:22px; }
.checkout-summary-title strong { display:block; font-size:17px; }
.checkout-summary-title small { display:block; color:var(--text-light); font-size:11px; margin-top:2px; }
.order-summary { background:transparent; border:0; border-radius:0; padding:0; margin:0; }
.checkout-section-title { display:flex; align-items:center; gap:10px; margin:22px 0 12px; padding-top:18px; border-top:1px solid #edf1ef; }
.checkout-section-title:first-of-type { margin-top:0; padding-top:0; border-top:0; }
.checkout-section-title > span { width:30px; height:30px; min-width:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#edf8f2; color:var(--primary); font-weight:900; }
.checkout-section-title strong { display:block; font-size:15px; }
.checkout-section-title small { display:block; color:var(--text-light); font-size:11px; margin-top:1px; }
.form-group { margin-bottom:14px; }
.form-group label { font-weight:800; }
.form-group input, .form-group select { background:#fcfdfc; border:1.5px solid #dfe8e3; }
.form-group input:focus, .form-group select:focus { box-shadow:0 0 0 3px rgba(13,74,46,.08); }
.checkout-submit { width:100%; border:0; border-radius:14px; background:var(--fk-orange); color:#fff; margin-top:20px; padding:13px 16px; min-height:60px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:17px; font-weight:900; cursor:pointer; box-shadow:0 8px 20px rgba(255,138,0,.2); }
.checkout-submit small { font-size:11px; font-weight:600; opacity:.9; margin-top:2px; }
.checkout-trust { text-align:center; color:#708177; font-size:11px; margin-top:9px; }
.summary-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid #edf1ef; }
.summary-product { display:flex; align-items:center; gap:9px; min-width:0; }
.summary-product > div { min-width:0; }
.summary-product strong { display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.summary-product small { display:block; color:var(--text-light); font-size:10px; margin-top:2px; }
.summary-thumb, .summary-emoji { width:38px; height:38px; border-radius:9px; flex:0 0 auto; }
.summary-thumb { object-fit:cover; background:#f2f6f4; }
.summary-emoji { display:flex; align-items:center; justify-content:center; background:#f2f6f4; font-size:20px; }
.summary-item-end { display:flex; flex-direction:column; align-items:flex-end; gap:5px; white-space:nowrap; }
.summary-item-end > strong { font-size:12px; color:var(--primary); }
.summary-qty { display:grid; grid-template-columns:26px 30px 26px; align-items:center; gap:2px; }
.summary-qty button { width:26px; height:26px; min-width:26px; min-height:26px; border:1px solid #dbe5df; background:#fff; border-radius:7px; cursor:pointer; }
.summary-qty span { text-align:center; font-size:12px; font-weight:800; }
.summary-divider { height:1px; background:#dfe8e3; margin:10px 0; }
.summary-row { padding:6px 0; font-size:13px; }
.summary-row.muted { color:var(--text-light); }
.summary-row.discount { color:var(--success); font-weight:700; }
.summary-row.total { font-size:18px; margin-top:8px; padding-top:12px; }
.checkout-assurance { border-top:1px solid #e2e9e5; margin-top:14px; padding-top:12px; display:grid; gap:9px; }
.checkout-assurance > div { display:flex; gap:8px; align-items:flex-start; font-size:13px; }
.checkout-assurance strong, .checkout-assurance small { display:block; }
.checkout-assurance small { color:var(--text-light); font-size:10px; margin-top:1px; }
.mobile-summary { display:none !important; }

@media (max-width: 900px) {
  .cart-layout, .checkout-layout { grid-template-columns:1fr; }
  .cart-summary-card, .checkout-summary-panel { position:static; }
  .checkout-summary-panel { order:-1; }
}

@media (max-width: 640px) {
  #page-cart, .checkout-page { padding-inline:10px; }
  .cart-container, .checkout-container { padding:16px; border-radius:16px; }
  .cart-head { align-items:center; margin-bottom:14px; }
  .cart-head h2, .checkout-heading h2 { font-size:22px; }
  .continue-shopping { font-size:12px; padding:8px 10px; }
  .cart-items-panel { padding:0 10px; }
  .cart-item { align-items:flex-start; gap:10px; flex-wrap:wrap; }
  .cart-emoji { width:58px; height:58px; }
  .cart-info { flex:1 1 calc(100% - 72px); }
  .cart-item-actions { width:100%; justify-content:space-between; padding-right:68px; gap:8px; }
  .cart-subtotal { font-size:15px; }
  .cart-summary-card { padding:16px; }
  .checkout-heading { gap:8px; }
  .checkout-heading .back-btn { font-size:0; }
  .checkout-heading .back-btn::after { content:'←'; font-size:20px; }
  .checkout-heading p { font-size:12px; }
  .checkout-summary-panel { padding:14px; }
  .summary-product strong { max-width:120px; }
  .checkout-section-title { margin-top:18px; }
  .mobile-summary { display:none !important; }
}

/* ============================================
   HEADER + HERO VISUAL HIERARCHY - V11
   ============================================ */
.navbar {
  height: 76px;
  padding: 0 max(24px, calc((100vw - 1360px) / 2));
  border-bottom: 1px solid rgba(13,74,46,.08);
  box-shadow: 0 6px 22px rgba(6,47,31,.07);
}
.brand-logo { height: 52px; }
.nav-links {
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: #f6faf8;
  border: 1px solid #e5eee9;
}
.nav-links a {
  padding: 8px 15px;
  border-radius: 999px;
  font-weight: 700;
}
.nav-links a:hover { background:#fff; box-shadow:0 3px 10px rgba(6,47,31,.07); }
.nav-links a::after { display:none; }
.nav-btn.cart-btn {
  background: var(--fk-orange);
  color:#fff;
  border:1px solid rgba(219,109,0,.15);
  box-shadow:0 7px 18px rgba(255,138,0,.28);
}
.nav-btn.cart-btn:hover { background:var(--fk-orange-hover); box-shadow:0 10px 22px rgba(255,138,0,.34); }
.cart-btn .badge { background:var(--primary-dark); border:2px solid #fff; }

.fakahany-hero { padding-top: 34px; padding-bottom: 54px; }
.hero-grid { min-height: 590px; gap: 48px; }
.hero-content { max-width: 650px; justify-self:end; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:#d9fbe5; padding:8px 14px; border-radius:999px;
  font-size:14px; font-weight:800; margin-bottom:18px;
  backdrop-filter:blur(10px);
}
.hero-eyebrow-dot { width:8px; height:8px; border-radius:50%; background:var(--fk-orange); box-shadow:0 0 0 5px rgba(255,138,0,.13); }
.hero-title { font-size:clamp(46px,5vw,76px); max-width:620px; }
.hero-title span { color:#b7f7c9; }
.hero-subtitle { max-width:610px; font-size:clamp(19px,1.55vw,25px); }
.hero-actions { margin-bottom:28px; }
.hero-actions .btn-primary { border:1px solid rgba(255,255,255,.08); }
.hero-actions .btn-secondary { background:rgba(255,255,255,.04); }
.hero-features { gap:10px; }
.feature-card { min-height:54px; padding:11px 15px; border-radius:14px; }
.feature-text { font-size:15px; }
.hero-visual::after {
  content:""; position:absolute; inset:auto 8% 3% 8%; height:38px; border-radius:50%;
  background:rgba(0,0,0,.24); filter:blur(18px); z-index:0;
}

.categories-section { padding-top:68px; }
.section-header { max-width:700px; margin-left:auto; margin-right:auto; }
.section-tag { font-weight:800; letter-spacing:.1px; }
.section-title { letter-spacing:-.3px; }

@media (max-width: 900px) {
  .navbar { padding:0 16px; }
  .nav-links { display:none; }
}

@media (max-width: 768px) {
  .navbar { height:66px; padding:0 12px; }
  .brand-logo { height:44px; }
  .nav-btn.cart-btn {
    background:var(--fk-orange);
    box-shadow:0 5px 14px rgba(255,138,0,.28);
  }
  .fakahany-hero { padding-top:24px; padding-bottom:32px; }
  .hero-grid { grid-template-areas:"content" "visual"; gap:18px; }
  .hero-content { text-align:center; justify-self:stretch; max-width:none; }
  .hero-eyebrow { margin-bottom:14px; }
  .hero-title { margin-left:auto; margin-right:auto; }
  .hero-subtitle { margin-left:auto; margin-right:auto; }
  .hero-actions { max-width:520px; margin-left:auto; margin-right:auto; margin-bottom:20px; }
  .hero-features { justify-content:center; }
  .feature-card { width:auto; flex:1 1 30%; min-width:100px; padding:10px 8px; }
  .feature-icon { font-size:19px; }
  .feature-text { font-size:13px; }
  .hero-visual { margin-top:-2px; }
  .hero-produce { width:min(94%,560px); }

  .mobile-cart-bar {
    background:linear-gradient(135deg, var(--fk-orange), #f47900);
    color:#fff;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 14px 34px rgba(214,104,0,.34);
  }
  .mobile-cart-count {
    background:var(--primary-dark);
    color:#fff;
    border:1px solid rgba(255,255,255,.24);
  }
  .mobile-cart-total {
    background:rgba(6,47,31,.92);
    padding:6px 10px;
    border-radius:10px;
  }
}

@media (max-width: 430px) {
  .hero-eyebrow { font-size:12px; padding:7px 11px; }
  .hero-title { font-size:clamp(32px,9.5vw,44px); }
  .hero-subtitle { font-size:16px; line-height:1.6; }
  .feature-card { min-width:0; }
}


/* ============================================
   V12 — HOMEPAGE RHYTHM & MERCHANDISING
   ============================================ */
:root {
  --fk-surface-soft:#f7faf8;
  --fk-surface-warm:#fffaf3;
  --fk-line-soft:rgba(13,74,46,.10);
}

.categories-section {
  position:relative;
  padding:76px 20px 84px !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,138,0,.08), transparent 26%),
    linear-gradient(180deg,#f8fbf9 0%,#f1f6f3 100%);
  border-top:1px solid rgba(13,74,46,.06);
  border-bottom:1px solid rgba(13,74,46,.06);
}
.categories-section::before {
  content:"";
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(1040px,82%); height:1px;
  background:linear-gradient(90deg,transparent,rgba(13,74,46,.14),transparent);
}
.categories-grid { gap:18px; }
.category-card {
  display:grid;
  grid-template-columns:42% 58%;
  min-height:190px;
  border-radius:22px;
  border:1px solid rgba(13,74,46,.08);
  box-shadow:0 10px 30px rgba(22,63,43,.06);
  background:rgba(255,255,255,.92);
}
.category-card:hover {
  transform:translateY(-4px) !important;
  box-shadow:0 18px 38px rgba(13,74,46,.12) !important;
  border-color:rgba(13,74,46,.18);
}
.category-img {
  height:100%; min-height:190px;
  background:linear-gradient(145deg,#f1faf4,#e4f4e8);
}
.category-img img { width:100%; height:100%; object-fit:contain; padding:12px; }
.category-info { padding:24px 20px; display:flex; flex-direction:column; justify-content:center; }
.category-info h3 { font-size:18px; margin-bottom:7px; color:#173b2c; }
.category-info p { font-size:13px; line-height:1.8; margin-bottom:14px; }
.category-arrow {
  width:max-content; padding:7px 12px; border-radius:999px;
  background:rgba(13,74,46,.07); font-size:12px; font-weight:800;
}

.banners-section {
  padding:72px 20px 78px !important;
  background:var(--fk-surface-warm);
}
.banners-header { margin-bottom:30px; }
.banners-row { gap:24px; }
.banner-card {
  position:relative;
  border-radius:24px;
  border:1px solid rgba(255,138,0,.12);
  box-shadow:0 14px 34px rgba(92,55,16,.08);
  min-height:190px;
}
.banner-card::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  border-radius:inherit;
}
.banner-card img { min-height:190px; }
.banner-placeholder {
  min-height:190px;
  background:linear-gradient(135deg,#fff4df 0%,#fffaf1 55%,#edf8f0 100%);
  border:1px dashed rgba(255,138,0,.28);
  color:#345b48;
}
.banner-placeholder-icon {
  display:grid; place-items:center; width:54px; height:54px;
  border-radius:16px; background:#fff; box-shadow:0 8px 18px rgba(0,0,0,.06);
}
.banner-placeholder-text { font-size:17px; font-weight:800; }

.products-section {
  max-width:none;
  margin:0;
  padding:82px max(20px,calc((100vw - 1200px)/2)) 92px !important;
  background:#fff;
  position:relative;
}
.products-section::before {
  content:"";
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(1080px,86%); height:1px;
  background:linear-gradient(90deg,transparent,rgba(13,74,46,.12),transparent);
}
.products-section .section-header { margin-bottom:30px; }
.tabs {
  width:max-content; max-width:100%; margin:0 auto 34px;
  padding:6px; border-radius:999px;
  background:#f4f7f5; border:1px solid rgba(13,74,46,.08);
}
.tab {
  border:0; background:transparent; padding:10px 20px;
  color:#587065; font-size:14px;
}
.tab:hover { background:#fff; color:var(--primary); }
.tab.active {
  background:#fff; color:var(--primary); border:0;
  box-shadow:0 5px 14px rgba(13,74,46,.12);
}
.products-grid { gap:22px; }
.product-card {
  border-radius:20px;
  border:1px solid rgba(13,74,46,.09);
  box-shadow:0 8px 24px rgba(17,58,39,.065);
  background:#fff;
}
.product-card:hover {
  transform:translateY(-4px) !important;
  box-shadow:0 18px 38px rgba(13,74,46,.12) !important;
}
.product-img { height:188px; background:#f7faf8; }
.product-info { padding:17px; }
.product-name { font-size:16px; color:#183b2c; }
.product-meta { padding-top:8px; border-top:1px solid rgba(13,74,46,.07); }
.product-price { font-size:20px; }

.section-tag {
  box-shadow:inset 0 0 0 1px rgba(13,74,46,.05);
}
.section-title { line-height:1.25; }
.section-subtitle { line-height:1.8; }

@media (max-width: 980px) {
  .category-card { grid-template-columns:1fr; }
  .category-img { min-height:150px; height:150px; }
  .category-info { padding:18px; }
}

@media (max-width: 768px) {
  .categories-section,
  .banners-section,
  .products-section { padding-top:56px !important; padding-bottom:62px !important; }
  .categories-grid { gap:12px; }
  .category-card { min-height:0; border-radius:18px; }
  .category-img { min-height:122px; height:122px; }
  .category-info { padding:14px; }
  .category-info h3 { font-size:15px; }
  .category-info p { font-size:12px; margin-bottom:10px; }
  .category-arrow { font-size:11px; padding:6px 9px; }
  .banners-header { margin-bottom:22px; }
  .banners-row { grid-template-columns:1fr; gap:14px; }
  .banner-card, .banner-card img, .banner-placeholder { min-height:150px; }
  .tabs {
    width:100%; overflow-x:auto; justify-content:flex-start;
    flex-wrap:nowrap; padding:5px; scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar { display:none; }
  .tab { flex:0 0 auto; padding:9px 15px; }
  .products-grid { gap:12px; }
  .product-img { height:164px; }
}

@media (max-width: 480px) {
  .section-title { font-size:27px; }
  .section-subtitle { font-size:14px; }
  .categories-grid { grid-template-columns:1fr 1fr; }
  .category-img { height:112px; min-height:112px; }
  .category-info h3 { font-size:14px; }
  .category-info p { display:none; }
  .category-arrow { margin-top:6px; }
}

/* ============================================
   LOWER HOMEPAGE POLISH — v13
   ============================================ */
.about-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 15%, rgba(255,138,0,.08), transparent 28%),
    linear-gradient(180deg, #fff 0%, #f7fbf8 100%);
}
.about-shell { max-width: 1200px; margin: 0 auto; }
.about-heading { max-width: 720px; margin: 0 auto 36px; text-align: center; }
.about-heading h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1.25; margin: 10px 0 14px; }
.about-heading p { color: var(--text-light); line-height: 1.9; margin: 0; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.trust-card {
  background: rgba(255,255,255,.92); border: 1px solid #e5eee8; border-radius: 20px;
  padding: 24px 20px; box-shadow: 0 8px 28px rgba(13,74,46,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.trust-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(13,74,46,.10); border-color: #cfe5d7; }
.trust-icon {
  width: 50px; height: 50px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center;
  background: #f0f8f3; font-size: 25px; margin-bottom: 16px;
}
.trust-card h3 { font-size: 16px; margin: 0 0 7px; color: #0d4a2e; }
.trust-card p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--text-light); }
.about-story {
  margin-top: 22px; border-radius: 24px; padding: 30px 34px; display: grid; grid-template-columns: 1.35fr .65fr;
  gap: 30px; align-items: center; color: #fff;
  background: linear-gradient(135deg, #0b4b30 0%, #0d5d3b 58%, #116a43 100%);
  box-shadow: 0 16px 40px rgba(6,47,31,.14);
}
.about-mini { color: #ffb454; font-weight: 800; font-size: 13px; }
.about-story-copy h3 { font-size: 27px; margin: 7px 0 8px; }
.about-story-copy p { margin: 0 0 18px; color: rgba(255,255,255,.78); line-height: 1.8; }
.about-shop-link { display: inline-flex; gap: 8px; align-items: center; color: #fff; text-decoration: none; font-weight: 800; }
.about-shop-link span { color: #ff9b21; transition: transform .2s ease; }
.about-shop-link:hover span { transform: translateX(-4px); }
.about-story-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.about-story-badges > div { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); padding: 16px; border-radius: 16px; text-align: center; }
.about-story-badges span { display: block; font-size: 25px; margin-bottom: 6px; }
.about-story-badges strong { display: block; font-size: 13px; }
.about-story-badges small { color: rgba(255,255,255,.66); font-size: 11px; }

.bottom-cta { background: #fff7ed; border-top: 1px solid #ffedd5; border-bottom: 1px solid #ffedd5; padding: 28px 20px; }
.bottom-cta-content { gap: 14px; }
.bottom-cta-item {
  position: relative; background: #fff; color: #0d4a2e; text-decoration: none;
  border: 1px solid #f1e7db; box-shadow: 0 6px 18px rgba(88,55,18,.05); padding: 18px 20px;
}
.bottom-cta-item:hover { border-color: #ffd6a6; box-shadow: 0 10px 25px rgba(88,55,18,.09) !important; }
.bottom-cta-icon { width: 44px; height: 44px; border-radius: 13px; background: #fff3e0; display: inline-flex; align-items:center; justify-content:center; font-size: 22px; flex: 0 0 auto; }
.bottom-cta-item strong { font-size: 15px; }
.bottom-cta-item span { color: #6b7280; font-size: 13px; }
.bottom-cta-item .cta-arrow { margin-right: auto; color: #ff8a00; font-size: 20px; font-weight: 800; }

.site-footer { position: relative; padding-top: 54px; background: linear-gradient(145deg, #05291b 0%, #083c27 58%, #0a472e 100%); }
.footer-topline { position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #ff8a00, #ffb347, #ff8a00); }
.footer-content { align-items: flex-start; }
.footer-brand { max-width: 340px; }
.footer-logo { height: 48px; margin-bottom: 16px; }
.footer-brand p { color: rgba(255,255,255,.66); line-height: 1.85; }
.footer-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.footer-chips span { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(255,255,255,.78); padding: 7px 10px; border-radius: 999px; font-size: 11px; }
.footer-links { gap: 52px; }
.fl-col { min-width: 120px; }
.fl-col h4 { color: #ffb45d; font-size: 14px; letter-spacing: .1px; }
.fl-col a { color: rgba(255,255,255,.65); min-height: 34px; margin-bottom: 6px; }
.fl-col a:hover { color: #fff; transform: translateX(-2px); }
.footer-location { display: block; color: rgba(255,255,255,.55); font-size: 13px; margin-top: 8px; }
.footer-bottom { max-width: 1200px; margin-left: auto; margin-right: auto; display: flex; justify-content: space-between; gap: 16px; color: rgba(255,255,255,.42); }

@media (max-width: 920px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .about-story { grid-template-columns: 1fr; }
  .about-story-badges { max-width: 420px; }
}
@media (max-width: 640px) {
  .about-section { padding-left: 16px !important; padding-right: 16px !important; }
  .about-heading { margin-bottom: 24px; }
  .trust-grid { grid-template-columns: 1fr; gap: 10px; }
  .trust-card { display: flex; gap: 14px; align-items: flex-start; padding: 17px; }
  .trust-icon { margin-bottom: 0; width: 44px; height: 44px; flex: 0 0 auto; }
  .about-story { padding: 24px 20px; border-radius: 20px; }
  .about-story-copy h3 { font-size: 22px; }
  .about-story-badges { grid-template-columns: 1fr 1fr; width: 100%; }
  .bottom-cta { padding: 20px 14px; }
  .bottom-cta-content { gap: 10px; }
  .bottom-cta-item { min-height: 76px; }
  .site-footer { padding: 44px 18px 0; }
  .footer-content { display: block; }
  .footer-brand { margin-bottom: 30px; }
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 22px; }
  .footer-contact { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; text-align: center; margin-top: 28px; padding: 18px 0; }
}


/* ============================================
   PRODUCT EXPERIENCE POLISH - V14
   ============================================ */
body.modal-open { overflow: hidden; }
.product-card { position: relative; }
.product-card-open {
  width: 100%; padding: 0; border: 0; background: transparent; color: inherit;
  text-align: right; font: inherit; cursor: pointer; display: flex; flex-direction: column; flex: 1;
}
.product-card-open:focus-visible { outline: 3px solid rgba(255,138,0,.35); outline-offset: -3px; border-radius: inherit; }
.product-category-chip {
  position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,.92); color: var(--primary);
  border: 1px solid rgba(13,74,46,.12); border-radius: 999px; padding: 5px 9px; font-size: 10px; font-weight: 800;
  box-shadow: 0 4px 12px rgba(6,47,31,.08); backdrop-filter: blur(5px);
}
.product-info-main { width:100%; }
.product-price-card { margin-top: 2px; margin-bottom: 8px; }
.product-details-link {
  display:flex; align-items:center; gap:5px; color:#688076; font-size:11px; font-weight:700; margin-top:2px;
}
.product-card-open:hover .product-details-link { color: var(--primary); }
.product-rating-empty { opacity:.65; }
.product-card-actions { padding: 0 16px 16px; }
.product-card .product-info { padding-bottom: 8px; }

.product-detail-modal { z-index: 1200; padding: 24px; overflow-y:auto; }
.product-detail-content {
  width:min(920px, 100%); max-width:920px !important; padding:0 !important; border-radius:24px !important;
  overflow:hidden; position:relative; background:#fff; margin:20px auto;
  box-shadow:0 28px 80px rgba(4,35,23,.24);
}
.product-detail-close {
  position:absolute; top:16px; left:16px; z-index:5; width:40px; height:40px; border-radius:50%;
  border:1px solid #e5ece8; background:rgba(255,255,255,.94); cursor:pointer; font-size:18px; color:#345247;
  display:flex; align-items:center; justify-content:center; box-shadow:0 5px 14px rgba(0,0,0,.08);
}
.product-detail-grid { display:grid; grid-template-columns:minmax(320px, .9fr) 1.1fr; min-height:390px; }
.product-detail-media {
  background:linear-gradient(145deg,#f1f8f4,#e5f1e9); min-height:390px; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.product-detail-media img { width:100%; height:100%; min-height:390px; object-fit:cover; }
.product-detail-emoji { font-size:110px; }
.product-detail-copy { padding:48px 42px 34px; display:flex; flex-direction:column; justify-content:center; }
.product-detail-category {
  align-self:flex-start; background:#eff7f2; color:var(--primary); border-radius:999px; padding:6px 12px; font-size:12px; font-weight:800; margin-bottom:12px;
}
.product-detail-copy h2 { font-size:30px; line-height:1.35; color:#12261d; margin:0 0 8px; }
.product-detail-rating { display:flex; gap:7px; align-items:center; min-height:30px; margin-bottom:14px; color:#f59e0b; }
.product-detail-rating strong { color:#203d30; font-size:18px; }
.product-detail-rating small { color:#718078; font-size:12px; }
.product-detail-price-row { display:flex; align-items:baseline; gap:7px; margin-bottom:18px; }
.product-detail-price-row strong { color:var(--primary); font-size:28px; }
.product-detail-price-row span { color:#6f7f77; font-size:13px; background:#f2f6f4; border-radius:999px; padding:4px 9px; }
.product-detail-assurances { display:grid; gap:8px; padding:14px 0 18px; border-top:1px solid #edf1ef; border-bottom:1px solid #edf1ef; }
.product-detail-assurances span { color:#52675d; font-size:13px; }
.product-detail-cart-row { display:flex; gap:12px; margin-top:20px; align-items:center; }
.product-detail-qty { display:grid; grid-template-columns:44px 56px 44px; align-items:center; background:#f6faf8; border:1px solid #e0ebe5; border-radius:14px; padding:4px; }
.product-detail-qty button { width:44px; height:44px; border:0; border-radius:11px; background:#fff; font-size:21px; cursor:pointer; color:var(--primary); font-weight:800; }
.product-detail-qty button.plus { background:var(--primary); color:#fff; }
.product-detail-qty strong { text-align:center; font-size:18px; }
.product-detail-review-btn { flex:1; min-height:52px; border-radius:14px; border:1px solid #f3d28a; background:#fff9e8; color:#a86c00; font-weight:800; cursor:pointer; font-family:inherit; }
.product-detail-review-btn:hover { background:#fff2c9; }
.product-reviews-section { padding:28px 34px 34px; border-top:1px solid #e9efec; background:#fbfcfb; }
.product-reviews-title { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:18px; }
.product-reviews-title span { color:var(--fk-orange); font-size:11px; font-weight:800; }
.product-reviews-title h3 { margin:3px 0 0; font-size:21px; color:#173126; }
.product-reviews-title small { color:#819087; font-size:11px; }
.product-detail-reviews { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.product-review-item { background:#fff; border:1px solid #e5ece8; border-radius:16px; padding:15px; box-shadow:0 4px 12px rgba(6,47,31,.035); }
.product-review-head { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:8px; }
.product-review-head strong { color:#203d30; font-size:13px; }
.product-review-head span { font-size:11px; white-space:nowrap; }
.product-review-item p { margin:0 0 8px; font-size:13px; line-height:1.7; color:#52665d; }
.product-review-item small { color:#9aa59f; font-size:10px; }
.product-review-item .review-no-comment { color:#98a49e; font-style:italic; }
.reviews-loading,.reviews-empty { grid-column:1/-1; min-height:100px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:#7a8b82; text-align:center; }
.reviews-empty span { font-size:25px; }.reviews-empty strong{color:#425d51}.reviews-empty small{font-size:12px}

@media (max-width: 768px) {
  .product-card-actions { padding:0 12px 12px; }
  .product-category-chip { top:7px; right:7px; padding:4px 7px; font-size:9px; }
  .product-details-link { font-size:10px; }
  .product-detail-modal { padding:0; align-items:flex-end; }
  .product-detail-content { width:100%; max-width:none !important; margin:0; border-radius:22px 22px 0 0 !important; max-height:94vh; overflow-y:auto; }
  .product-detail-grid { grid-template-columns:1fr; min-height:0; }
  .product-detail-media { min-height:220px; height:220px; }
  .product-detail-media img { min-height:220px; height:220px; }
  .product-detail-emoji { font-size:82px; }
  .product-detail-copy { padding:24px 18px 20px; }
  .product-detail-copy h2 { font-size:24px; padding-left:36px; }
  .product-detail-price-row strong { font-size:24px; }
  .product-detail-cart-row { align-items:stretch; flex-direction:column; }
  .product-detail-qty { grid-template-columns:48px 1fr 48px; width:100%; }
  .product-detail-qty button { width:48px; }
  .product-reviews-section { padding:22px 16px 28px; }
  .product-reviews-title { align-items:flex-start; flex-direction:column; gap:4px; }
  .product-detail-reviews { grid-template-columns:1fr; }
}

/* ============================================
   PRODUCT DISCOVERY — v15
   ============================================ */
.product-discovery {
  max-width: 920px;
  margin: 0 auto 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
}
.product-search {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid rgba(13,74,46,.12);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(13,74,46,.055);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.product-search:focus-within {
  border-color: rgba(255,138,0,.55);
  box-shadow: 0 0 0 4px rgba(255,138,0,.09), 0 10px 28px rgba(13,74,46,.07);
}
.product-search-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #f3f8f5;
  color: var(--primary);
  font-size: 21px;
  font-weight: 900;
}
.product-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #173a2b;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}
.product-search input::placeholder { color: #8aa095; font-weight: 500; }
.product-search input::-webkit-search-cancel-button { display: none; }
.product-search-clear {
  border: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #fff3e5;
  color: #b35d00;
  cursor: pointer;
  font-weight: 900;
}
.product-sort-wrap {
  min-width: 196px;
  min-height: 52px;
  padding: 6px 12px 6px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(13,74,46,.12);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(13,74,46,.055);
}
.product-sort-wrap > span { color: #72877d; font-size: 12px; font-weight: 700; white-space: nowrap; }
.product-sort-wrap select {
  min-width: 0;
  border: 0;
  outline: 0;
  background: #f5f8f6;
  color: #214735;
  border-radius: 10px;
  padding: 9px 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.products-results-bar {
  max-width: 1180px;
  margin: -15px auto 20px;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #73887e;
  font-size: 12px;
  font-weight: 700;
}
.reset-product-filters {
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.products-grid[aria-busy="true"] { opacity: .62; transition: opacity .15s ease; }
.products-empty-state {
  grid-column: 1 / -1;
  min-height: 260px;
  padding: 38px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  border: 1px dashed rgba(13,74,46,.18);
  border-radius: 22px;
  background: linear-gradient(145deg,#fbfdfc,#fffaf3);
  color: #214735;
}
.products-empty-state > span { font-size: 42px; }
.products-empty-state strong { font-size: 18px; }
.products-empty-state small { max-width: 420px; color: #788c82; line-height: 1.8; }
.products-empty-state button {
  margin-top: 8px;
  border: 0;
  border-radius: 12px;
  padding: 10px 18px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
@media (max-width: 768px) {
  .product-discovery {
    grid-template-columns: 1fr;
    gap: 9px;
    margin-bottom: 14px;
  }
  .product-search { min-height: 50px; }
  .product-sort-wrap {
    min-width: 0;
    min-height: 46px;
    justify-content: space-between;
  }
  .product-sort-wrap select { flex: 1; }
  .products-results-bar { margin-top: -8px; margin-bottom: 16px; }
}
@media (max-width: 480px) {
  .product-search { border-radius: 14px; padding-inline: 11px; }
  .product-search input { font-size: 13px; }
  .products-results-bar { align-items: flex-start; }
}

/* v16 launch story + delivery scheduling */
.launch-story-section{padding:34px 20px 10px;background:linear-gradient(180deg,#fffaf2 0%,#fff 100%)}
.launch-story-shell{max-width:1180px;margin:auto;display:grid;gap:22px}.service-announcement{display:flex;gap:14px;align-items:flex-start;padding:18px 22px;background:#fff;border:1px solid #f4d7b0;border-radius:18px;box-shadow:0 8px 28px rgba(79,52,18,.06)}.service-announcement>span{font-size:28px}.service-announcement strong{color:#0d4a2e;font-size:18px}.service-announcement p{margin:4px 0 0;line-height:1.75;color:#5d6d63}
.price-story{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;padding:34px;border-radius:28px;background:#0d4a2e;color:#fff;box-shadow:0 18px 44px rgba(13,74,46,.16)}.price-story h2{font-size:clamp(28px,3vw,42px);margin:12px 0}.price-story p{line-height:1.9;color:#e7f2eb}.story-result{margin-top:18px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.08)}.story-steps{display:grid;gap:12px}.story-steps>div{display:grid;grid-template-columns:42px 1fr;column-gap:12px;padding:15px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:16px}.story-steps span{grid-row:1/3;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#ff8a00;color:#173f2b;font-weight:800}.story-steps small{color:#cfe2d6;margin-top:2px}
.prelaunch-card{display:grid;grid-template-columns:1fr 420px;gap:26px;align-items:center;padding:28px;border-radius:24px;background:#fff;border:1px solid #e8eee9;box-shadow:0 14px 34px rgba(13,74,46,.08)}.prelaunch-badge{display:inline-block;padding:7px 12px;border-radius:999px;background:#fff2df;color:#a95700;font-weight:700}.prelaunch-card h3{font-size:25px;color:#0d4a2e;margin:10px 0 8px}.prelaunch-card p{color:#617067;line-height:1.75}.prelaunch-form{display:grid;gap:9px}.prelaunch-form input[type=tel]{padding:13px 14px;border:1px solid #ccd9d0;border-radius:12px;font:inherit}.prelaunch-form label{font-size:12px;color:#6e7c73}.prelaunch-form button{border:0;border-radius:12px;padding:13px;background:#ff8a00;color:#173f2b;font:inherit;font-weight:800;cursor:pointer}.prelaunch-msg{font-size:13px}.prelaunch-msg.success{color:#178345}.prelaunch-msg.error{color:#c62828}.fixed-service-area{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:13px 14px;background:#f5faf7;border:1px solid #d6e6db;border-radius:12px;color:#0d4a2e}.fixed-service-area small{width:100%;padding-right:25px;color:#718077}.delivery-pickers{display:grid;grid-template-columns:1fr 1fr;gap:12px}.delivery-hint,.delivery-offer-note{padding:10px 12px;border-radius:11px;font-size:13px;margin:-2px 0 12px}.delivery-hint{background:#f4f7f5;color:#647168}.delivery-offer-note{background:#fff4e5;color:#8e4a00;border:1px solid #ffd9a8}
@media(max-width:800px){.price-story,.prelaunch-card{grid-template-columns:1fr}.price-story{padding:24px}.prelaunch-card{padding:20px}.delivery-pickers{grid-template-columns:1fr}.launch-story-section{padding-inline:14px}}


/* ============================================
   V17 — CUSTOMER-FACING VISUAL REVIEW
   El Messiri + lighter story cards + cart icon
   ============================================ */
body,
button,
input,
select,
textarea {
  font-family: 'El Messiri', sans-serif;
}

/* Keep the cart action orange, but make the basket itself unmistakably green. */
.cart-icon,
.mobile-cart-icon,
.cart-icon-green {
  color: var(--primary-dark) !important;
}
.cart-icon svg,
.mobile-cart-icon svg,
.cart-icon-green svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: currentColor;
}
.mobile-cart-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(6,47,31,.10);
}
.mobile-cart-icon svg { width: 18px; height: 18px; }

/* The 24-hour story should feel fresh, not heavy. */
.price-story {
  background:
    radial-gradient(circle at 90% 8%, rgba(255,255,255,.72), transparent 26%),
    linear-gradient(135deg, #eef9e9 0%, #e2f6d9 54%, #f7fce9 100%);
  color: #123d29;
  border: 1px solid #cae9bd;
  box-shadow: 0 16px 38px rgba(13,74,46,.10);
}
.price-story h2 { color: #0d4a2e; }
.price-story p { color: #456356; }
.price-story .section-tag {
  background: #fff7e8;
  color: #9c5a00;
  box-shadow: inset 0 0 0 1px #ffdca6;
}
.story-result {
  background: rgba(255,255,255,.72);
  color: #204d38;
  border: 1px solid rgba(13,74,46,.09);
}
.story-steps > div {
  background: linear-gradient(135deg, #d9f5c9, #ecfbdc);
  border: 1px solid #bfe4ac;
  color: #173f2b;
  box-shadow: 0 5px 16px rgba(13,74,46,.055);
}
.story-steps strong { color: #0d4a2e; }
.story-steps small { color: #587264; }
.story-steps span {
  background: var(--fk-orange);
  color: #0d4a2e;
  box-shadow: 0 4px 10px rgba(255,138,0,.18);
}

/* Lighten the lower brand-story panel as well. */
.about-story {
  color: #173f2b;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.82), transparent 24%),
    linear-gradient(135deg, #eff9e8 0%, #dff5d3 58%, #f7fbe9 100%);
  border: 1px solid #c9e8ba;
  box-shadow: 0 14px 34px rgba(13,74,46,.09);
}
.about-mini { color: #c56b00; }
.about-story-copy h3 { color: #0d4a2e; }
.about-story-copy p { color: #557064; }
.about-shop-link { color: #0d4a2e; }
.about-shop-link span { color: var(--fk-orange); }
.about-story-badges > div {
  background: rgba(255,255,255,.76);
  border: 1px solid #c9e6bb;
  color: #173f2b;
  box-shadow: 0 5px 15px rgba(13,74,46,.05);
}
.about-story-badges strong { color: #0d4a2e; }
.about-story-badges small { color: #657c70; }

/* Feedback/customer-message form: use the available width and keep clean RTL spacing. */
.feedback-page-container { max-width: 760px !important; }
.feedback-page-container form { width: 100%; }
.feedback-page-container .form-row { align-items: flex-start; }
.feedback-page-container .form-group { min-width: 0; }
.feedback-page-container .form-group input,
.feedback-page-container .form-group textarea {
  width: 100%;
  font-family: 'El Messiri', sans-serif;
}
.feedback-page-container textarea.form-input {
  display: block;
  width: 100%;
  min-height: 180px;
  padding: 14px 16px;
  border: 1.5px solid #dfe8e3;
  border-radius: 14px;
  background: #fcfdfc;
  color: var(--text);
  font-size: 15px;
  line-height: 1.9;
  resize: vertical;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.feedback-page-container textarea.form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(13,74,46,.08);
}
.feedback-page-container .btn-large {
  min-width: 140px;
  padding-inline: 26px;
}

@media (max-width: 768px) {
  .feedback-page-container { padding: 28px 16px !important; }
  .feedback-page-container textarea.form-input { min-height: 160px; }
}

/* v18: separate the 24-hour story cards from the section background */
.story-steps > div {
  background: linear-gradient(145deg, #fbfdf7 0%, #f4f9ed 100%);
  border-color: #d2e8c7;
  box-shadow: 0 7px 18px rgba(13,74,46,.07);
}