/* ==========================================================================
   Bosileaf — Premium Theme CSS (with Dark Mode)
   ========================================================================== */

/* --------------------------- Tokens / Variables --------------------------- */
:root{
  /* Brand */
  --brand:#1E6B26;
  --brand-600:#17571e;
  --accent:#4c36c7;
  --accent-600:#3f2eb5;

  /* Surfaces & Text (light) */
  --surface:#ffffff;
  --surface-2:#fbfffb;
  --ink:#1f2937;
  --muted:#6b7280;

  /* Borders / Effects */
  --ring:#e6ebe6;
  --radius-sm:10px;
  --radius:12px;
  --radius-lg:14px;

  --shadow-sm:0 6px 18px rgba(16,24,40,.06);
  --shadow:   0 10px 28px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.06);
  --shadow-lg:0 18px 36px rgba(16,24,40,.14);

  /* Container max-widths */
  --max: 1280px;
  --max-xl: 1360px;
  --max-xxl:1440px;

  /* Transitions */
  --fast:160ms;
  --easing:cubic-bezier(.2,.6,.2,1);
}

/* --------------------------- Dark Mode Tokens ----------------------------- */
html[data-theme="dark"]{
  --surface:#0f172a;     /* slate-900 */
  --surface-2:#0b1223;
  --ink:#e5e7eb;         /* light text */
  --muted:#94a3b8;       /* slate-400 */
  --ring:#1e293b;        /* slate-800 */
  --shadow-sm:0 6px 18px rgba(0,0,0,.35);
  --shadow:   0 10px 28px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
  --shadow-lg:0 18px 36px rgba(0,0,0,.55);
}

/* ------------------------------ Resets ------------------------------------ */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
img,svg,video,canvas{ max-width:100%; display:block }
:focus{ outline:none }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* ------------------------------ Base -------------------------------------- */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans",sans-serif;
  color:var(--ink);
  background:var(--surface-2);
  line-height:1.5;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:17px;
}
.container{ max-width:var(--max); margin:0 auto; padding:16px }
@media (min-width:1280px){ .container{ max-width:var(--max-xl) } }
@media (min-width:1440px){ .container{ max-width:var(--max-xxl) } }

/* Links */
a{ color:var(--brand); text-decoration:none; transition:color var(--fast) var(--easing) }
a:hover{ color:var(--brand-600); text-decoration:underline }
html[data-theme="dark"] a:hover{ color:#34d399 } /* emerald-400 hover in dark */

/* ------------------------------ Header ------------------------------------ */
.site-header{ background:var(--surface); border-bottom:1px solid var(--ring); position:sticky; top:0; z-index:40 }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.brand{ display:flex; align-items:center; gap:10px; color:var(--brand); text-decoration:none }
.brand img{ height:28px; width:auto }
.brand-name{ font-weight:900; letter-spacing:.2px }
.main-nav{ display:flex; gap:16px; align-items:center }
.main-nav a{ color:var(--brand); font-weight:700; position:relative; padding:4px 2px; border-radius:6px }
.main-nav a:hover{ color:var(--brand-600); text-decoration:none }
.main-nav a:hover::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--brand); border-radius:2px }

/* ------------------------------ Buttons ----------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:120px; padding:10px 16px; height:42px;
  border-radius:999px; font-weight:800;
  background:var(--brand); color:#fff; border:1px solid var(--brand);
  text-decoration:none;
  box-shadow:0 4px 12px rgba(30,107,38,.18);
  transition:transform var(--fast) var(--easing), box-shadow var(--fast) var(--easing), background var(--fast) var(--easing), color var(--fast) var(--easing), border-color var(--fast) var(--easing);
}
.btn:hover{ background:var(--brand-600); border-color:var(--brand-600); transform:translateY(-1px); box-shadow:0 8px 20px rgba(30,107,38,.22) }
.btn:active{ transform:translateY(0) }
.btn.outline{ background:var(--surface); color:var(--brand); border-color:var(--brand); box-shadow:0 2px 8px rgba(30,107,38,.10) }
html[data-theme="dark"] .btn.outline{ color:#34d399; border-color:#34d399; box-shadow:none }

/* ------------------------------ Card-ish base ------------------------------ */
.card,.brand-banner,.cert-card,.tile,.delivery-strip,.usp-card,.why-card{
  border:1px solid var(--ring);
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}

/* ------------------------------ Hero / Swiper ----------------------------- */
.hero{ margin-top:10px }
.hero .hero-swiper{ border-radius:16px; overflow:hidden; border:1px solid var(--ring); box-shadow:var(--shadow) }
.hero .swiper-slide img{ width:100%; height:460px; object-fit:cover; background:var(--surface) }
@media (min-width:1440px){ .hero .swiper-slide img{ height:500px } }
@media (max-width:1024px){ .hero .swiper-slide img{ height:380px } }
@media (max-width:768px){  .hero .swiper-slide img{ height:300px } }
.swiper-pagination-bullet{ background:#dfe6df; opacity:1 }
.swiper-pagination-bullet-active{ background:var(--brand) }
.swiper-button-next,.swiper-button-prev{ color:var(--brand) }

/* ------------------------------ Brand Row --------------------------------- */
.brand-banner{ padding:18px 16px 16px }
.brand-headline{
  margin:0;
  font-family:'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:800; font-size:48px; line-height:1.05; text-align:center;
  text-shadow:0 2px 2px rgba(0,0,0,.18),0 3px 5px rgba(0,0,0,.16);
}
.brand-headline .bosi{ color:#E5C03B }
.brand-headline .leaf{ color:var(--brand) }
.brand-headline .tm{ font-size:.34em; vertical-align:top; margin-left:6px; color:var(--brand) }
.brand-tagline{
  margin-top:6px; text-align:center;
  font-family:'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:700; font-size:22px; color:#2F7F34;
  text-shadow:0 1px 0 rgba(255,255,255,.65),0 2px 2px rgba(0,0,0,.18),0 3px 4px rgba(0,0,0,.16);
}
.brand-actions{ margin-top:12px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap }

/* Trust strip under actions */
.trust-strip{
  margin-top:12px; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:10px 12px; border:1px solid var(--ring); border-radius:12px;
  background:linear-gradient(180deg,#F7FFF9 0%,#FFFFFF 100%); text-align:center;
}
.trust-icon{ flex:0 0 22px; display:flex; align-items:center; justify-content:center }
.trust-text{ font-weight:800; color:#14532d }

/* Certification card */
.cert-card{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:linear-gradient(135deg,#EAF7EB 0%,#FFFFFF 100%); color:#2E7D32; font-weight:700;
  border:1px solid var(--ring); position:relative; overflow:hidden;
  box-shadow:var(--shadow-sm); animation:fadeIn .45s ease-out both .1s;
}
.cert-card::after{ content:""; position:absolute; right:-36px; top:-36px; width:120px; height:120px; background:radial-gradient(closest-side, rgba(165,214,167,.30), transparent 70%) }
.cert-icon{
  flex:0 0 38px; width:38px; height:38px; border-radius:10px; background:#A5D6A7; border:1px solid #96CCA0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.65); transition:transform .18s ease, box-shadow .18s ease;
}
.cert-card:hover .cert-icon{ transform:scale(1.05); box-shadow:inset 0 0 0 2px rgba(255,255,255,.8) }
.cert-title{ font-size:14px } .cert-sub{ font-size:12px; opacity:.95 }

/* -------------------------- Delivery Component ---------------------------- */
.delivery-strip{ margin-top:16px }
.delivery--pill{
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  background:#f3faf3; border:1px solid #d9ead9; border-radius:999px; box-shadow:0 6px 18px rgba(10,122,7,.05);
}
.delivery--pill .delivery-icon{
  flex:0 0 36px; height:36px; width:36px;
  background:#e8f6e8; border:1px solid #d3e9d3; border-radius:10px; display:flex; align-items:center; justify-content:center;
}
.delivery--pill .delivery-text{ display:flex; flex-direction:column; gap:2px }
.delivery-title{ font-size:15px; font-weight:900; color:#14532d; letter-spacing:.2px }
.delivery-details{ font-size:14px; font-weight:600; color:var(--ink); opacity:.92 }

/* ===== Free Delivery rule (matches screenshot) ===== */
.fd-card{
  background: linear-gradient(180deg,#F7FFF9 0%,#FFFFFF 100%);
  border: 1px solid var(--ring,#e6ebe6);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(16,24,40,.06);
  padding: 12px 14px;
}
.fd-head{
  display:flex; align-items:center; gap:8px;
  font-weight:900; color:#14532d;
  margin-bottom: 10px;
}
.fd-icon{
  flex:0 0 28px; width:28px; height:28px; border-radius:8px;
  background:#E9F8E9; border:1px solid #d7f0d7;
  display:flex; align-items:center; justify-content:center;
}

.fd-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 1024px){ .fd-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){  .fd-grid{ grid-template-columns: 1fr; } }

.fd-pill{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:999px;
  background:#fff; border:1px solid #e6efe6;
  box-shadow:0 4px 10px rgba(16,24,40,.05);
}
.fd-pill b{ color:#0b3d25; font-weight:900 }
.fd-pill span{ color:#0b3d25; font-weight:900 }


/* Cards variant (optional if used) */
.delivery--cards{
  background:linear-gradient(180deg,#F7FFF9 0%,#FFFFFF 100%);
  border:1px solid #d9ead9; border-radius:14px; padding:14px; box-shadow:0 8px 22px rgba(10,122,7,.06);
}
.delivery--cards .delivery-title-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px }
.delivery--cards .delivery-icon{
  flex:0 0 34px; height:34px; width:34px; background:#e8f6e8; border:1px solid #d3e9d3; border-radius:10px; display:flex; align-items:center; justify-content:center;
}
.delivery--cards .delivery-title{ margin:0; font-size:18px; font-weight:900; color:#14532d }
.delivery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px }
.delivery-card{
  background:var(--surface); border:1px solid var(--ring); border-radius:12px;
  padding:10px 12px; box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:space-between;
}
.delivery-card .label{ font-weight:800; color:#0f5132; letter-spacing:.1px }
.delivery-card .value{ font-weight:900; color:#0b3d25 }

/* Mobile */
@media (max-width:768px){
  .delivery--pill{ border-radius:14px; flex-direction:column; text-align:center; padding:14px }
  .delivery--cards .delivery-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:480px){ .delivery--cards .delivery-grid{ grid-template-columns:1fr } }

/* ------------------------------ USP Section ------------------------------- */
.usp-section{ margin-top:16px }
.usp-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
@media (max-width:1024px){ .usp-row{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .usp-row{ grid-template-columns:1fr } }
.usp-card{
  display:flex; gap:10px; align-items:flex-start; padding:12px 14px;
  background:linear-gradient(180deg, var(--surface) 0%, rgba(255,255,255,.92) 100%);
}
html[data-theme="dark"] .usp-card{ background:linear-gradient(180deg, #0f172a 0%, #0b1223 100%) }
.usp-icon{
  width:36px; height:36px; border-radius:10px; background:#E9F8E9; border:1px solid #d7f0d7;
  display:flex; align-items:center; justify-content:center;
}
html[data-theme="dark"] .usp-icon{ background:#0b2a18; border-color:#134e2a }
.usp-body h3{ margin:0 0 4px; font-size:16px; font-weight:900; color:var(--brand-600) }
.usp-body p{ margin:0; color:var(--muted) }

/* -------------------------- Why Choose Section ---------------------------- */
.why-choose{ margin-top:18px }
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
@media (max-width:1024px){ .why-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .why-grid{ grid-template-columns:1fr } }
.why-card{ padding:14px }
.why-icon{
  width:44px; height:44px; border-radius:12px; background:#E8F6E8; border:1px solid #d3e9d3;
  display:flex; align-items:center; justify-content:center; margin-bottom:8px;
}
html[data-theme="dark"] .why-icon{ background:#0b2a18; border-color:#134e2a }
.why-card h3{ margin:0 0 6px; font-size:18px; font-weight:900; color:var(--ink) }
.why-card p{ margin:0; color:var(--muted) }

/* ------------------------------ Category Grid ----------------------------- */
.home-section{ margin-top:18px }
.section-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px }
.section-head h2{ margin:0; font-size:24px; font-weight:900; color:#4c36c7 }
.section-head .link{ font-weight:800; text-decoration:none }
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
@media (max-width:1024px){ .grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .grid{ grid-template-columns:1fr } }
.tile{ transition: transform var(--fast) var(--easing), box-shadow var(--fast) var(--easing), border-color var(--fast) var(--easing) }
.tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:#dfe8df }
.tile-cat{ display:flex; flex-direction:column }
.tile-cat-media{ height:220px; overflow:hidden; background:var(--surface); border-bottom:1px solid var(--ring) }
.tile-cat-media img{ width:100%; height:100%; object-fit:cover; display:block }
.tile-body{ padding:12px }
.tile-title{ font-weight:900; font-size:18px; color:var(--ink) }
.tile-sub{ color:var(--muted); font-size:14.5px }

/* ------------------------------ Blogs ------------------------------------- */
.breadcrumbs ol{ list-style:none; display:flex; gap:8px; padding:0; margin:8px 0 16px }
.breadcrumbs a{ color:#17571e; text-decoration:none; font-weight:800 }
.breadcrumbs li::after{ content:"/"; margin:0 6px; color:#94a3b8 }
.breadcrumbs li:last-child::after{ content:"" }
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
@media (max-width:1024px){ .blog-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .blog-grid{ grid-template-columns:1fr } }
.blog-card{ border:1px solid var(--ring); border-radius:12px; background:var(--surface); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .18s, box-shadow .18s }
.blog-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg) }
.blog-card .media{ aspect-ratio: 16/9; border-bottom:1px solid var(--ring) }
.blog-card .media img{ width:100%; height:100%; object-fit:cover; display:block }
.blog-card .body{ padding:12px }
.blog-card .title{ font-weight:900; color:var(--ink); text-decoration:none; display:block }
.blog-card .meta{ color:var(--muted); font-size:13px; margin-top:4px }
.blog-card .excerpt{ color:var(--ink); opacity:.9; margin-top:8px }
.blog-post h1{ font-size:30px; margin-bottom:8px }
.blog-post .meta{ color:var(--muted); margin-bottom:14px }
.blog-post .cover{ aspect-ratio: 16/9; border:1px solid var(--ring); border-radius:12px; overflow:hidden; margin:10px 0 18px; box-shadow:var(--shadow-sm) }
.blog-post .cover img{ width:100%; height:100%; object-fit:cover }
.blog-post .content{ line-height:1.7; color:var(--ink) }
.blog-post .content h2{ margin-top:22px; font-size:22px }
.blog-post .content table{ width:100%; border-collapse:separate; border-spacing:0; margin:12px 0; border:1px solid var(--ring); border-radius:12px; overflow:hidden }
.blog-post .content th, .blog-post .content td{ padding:10px 12px; border-bottom:1px solid var(--ring) }
.blog-post .content tr:last-child td{ border-bottom:0 }
.blog-post .divider{ height:1px; background:var(--ring); margin:18px 0 }
.share-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:16px }
.btn-share{ background:#f1f5f9; border:1px solid #e2e8f0; padding:6px 10px; border-radius:999px; font-weight:800; color:#0f172a; text-decoration:none }
html[data-theme="dark"] .btn-share{ background:#0f172a; border-color:#1e293b; color:#e5e7eb }

/* ------------------------------ Animations -------------------------------- */
@keyframes fadeIn{ from{ opacity:0; transform:translateY(4px) } to{ opacity:1; transform:translateY(0) } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:translateY(0) } }


/* Elegant spacing polish */
.brand-banner { margin-top: 8px; }
.section-head h2 { letter-spacing: .2px; }
.tile-title { letter-spacing: .15px; }
.trust-strip { margin-top: 12px; }

@media (min-width: 1280px){
  .container{ max-width: var(--max-xl, 1360px); }
}
``