/* =========================================================
   PURE FIELD FOODS — Core Stylesheet
   "Pure Taste. Trusted Quality."
   Design system: deep field-green + saffron gold, with a
   recurring "Spice Swatch" motif (pigment chips drawn from
   real spice colours) as the site's signature device.
   ========================================================= */

:root{
  /* Brand */
  --pf-green:        #1D5E3A;
  --pf-green-dark:   #123D26;
  --pf-green-soft:   #EAF2ED;
  --pf-gold:         #D4A017;
  --pf-gold-light:   #E8C25C;
  --pf-bg:           #FFFFFF;
  --pf-accent:       #F7F5EF;
  --pf-ink:          #1A2420;
  --pf-ink-60:       rgba(26,36,32,.62);
  --pf-line:         #E4E1D6;

  /* Spice swatch palette — signature accent chips */
  --spice-turmeric:  #D4A017;
  --spice-paprika:   #B23A24;
  --spice-cumin:     #8C6239;
  --spice-coriander: #6E7F3C;
  --spice-chili:     #8E1F12;

  /* Type */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Work Sans', sans-serif;

  /* Radii / shadow */
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 8px;
  --shadow-soft: 0 10px 30px rgba(18,61,38,.08);
  --shadow-lift: 0 20px 45px rgba(18,61,38,.14);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  color: var(--pf-ink);
  background: var(--pf-bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-display);
  font-weight:600;
  color: var(--pf-green-dark);
  line-height:1.18;
  letter-spacing:-.01em;
}

a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }

.container-xl{ max-width:1280px; margin:0 auto; padding:0 24px; }

::selection{ background: var(--pf-gold-light); color:var(--pf-green-dark); }

:focus-visible{ outline:3px solid var(--pf-gold); outline-offset:2px; }

/* ---------- Spice stripe — the signature element ----------
   A thin 5-colour band made from real spice pigments.
   Appears under the header, above the footer, and as a
   card-corner accent. It is the one place the design allows
   itself full saturation. */
.spice-stripe{
  height:5px;
  width:100%;
  background: linear-gradient(90deg,
    var(--spice-turmeric) 0 20%,
    var(--spice-paprika) 20% 40%,
    var(--spice-cumin) 40% 60%,
    var(--spice-coriander) 60% 80%,
    var(--spice-chili) 80% 100%);
}

.swatch-dot{
  display:inline-block;
  width:9px; height:9px; border-radius:50%;
  margin-right:8px; flex-shrink:0;
}
.swatch-dot.turmeric{ background:var(--spice-turmeric); }
.swatch-dot.paprika{ background:var(--spice-paprika); }
.swatch-dot.cumin{ background:var(--spice-cumin); }
.swatch-dot.coriander{ background:var(--spice-coriander); }
.swatch-dot.chili{ background:var(--spice-chili); }

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  display:inline-flex; align-items:center;
  font-family: var(--font-display);
  font-size:.78rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--pf-green);
  margin-bottom:14px;
}

.section-pad{ padding:88px 0; }
@media (max-width:768px){ .section-pad{ padding:56px 0; } }

.bg-accent{ background: var(--pf-accent); }
.bg-forest{ background: var(--pf-green-dark); color:#F3F1E8; }
.bg-forest h1,.bg-forest h2,.bg-forest h3{ color:#fff; }

.section-head{ max-width:680px; margin-bottom:48px; }
.section-head p{ color:var(--pf-ink-60); font-size:1.05rem; }

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-display);
  font-weight:600; font-size:.92rem;
  border-radius:100px;
  padding:13px 30px;
  display:inline-flex; align-items:center; gap:8px;
  transition:.25s ease;
  border:1.5px solid transparent;
}
.btn-pf-primary{ background:var(--pf-green); color:#fff; }
.btn-pf-primary:hover{ background:var(--pf-green-dark); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.btn-pf-gold{ background:var(--pf-gold); color:var(--pf-green-dark); }
.btn-pf-gold:hover{ background:var(--pf-gold-light); color:var(--pf-green-dark); transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.btn-pf-outline{ background:transparent; border-color:var(--pf-green); color:var(--pf-green); }
.btn-pf-outline:hover{ background:var(--pf-green); color:#fff; }
.btn-pf-outline-light{ background:transparent; border-color:rgba(255,255,255,.5); color:#fff; }
.btn-pf-outline-light:hover{ background:#fff; color:var(--pf-green-dark); border-color:#fff; }
.btn-sm{ padding:9px 20px; font-size:.82rem; }
.btn-wa{ background:#25D366; color:#fff; }
.btn-wa:hover{ background:#1EBE57; color:#fff; }

/* ---------- Header ---------- */
.pf-topbar{
  background:var(--pf-green-dark); color:#DCE8DF;
  font-size:.82rem; padding:8px 0;
}
.pf-topbar a{ color:#DCE8DF; }
.pf-topbar .container-xl{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.pf-topbar .topbar-links{ display:flex; gap:22px; align-items:center; }
.pf-topbar .topbar-links i{ margin-right:6px; color:var(--pf-gold); }

.pf-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--pf-line);
}
.pf-header .container-xl{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; gap:24px; }

.pf-logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); }
.pf-logo .mark{
  width:42px; height:42px; border-radius:12px;
  background:var(--pf-green);
  display:flex; align-items:center; justify-content:center;
  color:var(--pf-gold); font-weight:700; font-size:1.1rem;
  flex-shrink:0;
}
.pf-logo .word{ line-height:1.1; }
.pf-logo .word strong{ display:block; font-size:1.12rem; color:var(--pf-green-dark); font-weight:700; }
.pf-logo .word span{ display:block; font-size:.68rem; letter-spacing:.08em; color:var(--pf-gold); text-transform:uppercase; font-weight:600; }

.pf-nav{ display:flex; align-items:center; gap:30px; }
.pf-nav > ul{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
.pf-nav > ul > li{ position:relative; }
.pf-nav > ul > li > a{
  font-family:var(--font-display); font-weight:600; font-size:.92rem;
  color:var(--pf-ink); padding:10px 2px; display:inline-flex; align-items:center; gap:6px;
}
.pf-nav > ul > li > a:hover, .pf-nav > ul > li.active > a{ color:var(--pf-green); }
.pf-nav > ul > li > a i{ font-size:.7rem; }

/* Mega menu */
.mega-menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  width:640px; background:#fff; border-radius:var(--r-md);
  box-shadow:var(--shadow-lift); border:1px solid var(--pf-line);
  padding:26px; display:grid; grid-template-columns:1.3fr 1fr; gap:18px;
  opacity:0; visibility:hidden; transition:.2s ease;
  z-index:1200;
}
.pf-nav li.has-mega:hover .mega-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.mega-col h6{ font-family:var(--font-display); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--pf-gold); margin-bottom:12px; }
.mega-col a{ display:flex; align-items:center; gap:10px; padding:8px 0; font-size:.9rem; color:var(--pf-ink); }
.mega-col a:hover{ color:var(--pf-green); }
.mega-promo{ background:var(--pf-accent); border-radius:var(--r-sm); padding:18px; }
.mega-promo h6{ color:var(--pf-green-dark); font-size:.95rem; margin-bottom:6px; }
.mega-promo p{ font-size:.82rem; color:var(--pf-ink-60); margin-bottom:12px; }

.pf-header-actions{ display:flex; align-items:center; gap:14px; }
.icon-btn{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--pf-accent); color:var(--pf-green-dark); font-size:.95rem; border:none; }
.icon-btn:hover{ background:var(--pf-green); color:#fff; }
.lang-select{ border:1px solid var(--pf-line); border-radius:100px; padding:8px 14px; font-size:.82rem; font-family:var(--font-display); font-weight:600; background:#fff; color:var(--pf-ink); }

.nav-toggle{ display:none; background:none; border:none; font-size:1.4rem; color:var(--pf-green-dark); }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--pf-green-dark);
  padding:100px 0 90px;
}
.hero .container-xl{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero-copy .eyebrow{ color:var(--pf-gold-light); }
.hero h1{ color:#fff; font-size:3.2rem; margin-bottom:20px; }
.hero h1 em{ font-style:normal; color:var(--pf-gold-light); }
.hero p.lead{ color:rgba(255,255,255,.78); font-size:1.12rem; max-width:520px; margin-bottom:32px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px; }
.hero-stats{ display:flex; gap:36px; flex-wrap:wrap; }
.hero-stats .stat b{ display:block; font-family:var(--font-display); font-size:1.9rem; color:#fff; }
.hero-stats .stat span{ font-size:.8rem; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.06em; }

.hero-media{ position:relative; }
.hero-media .frame{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-lift);
}
.hero-media .frame img{ width:100%; height:460px; object-fit:cover; }
.hero-media .frame .spice-stripe{ position:absolute; bottom:0; left:0; }
.hero-media .float-card{
  position:absolute; bottom:-24px; left:-24px;
  background:#fff; border-radius:var(--r-md); padding:16px 20px;
  box-shadow:var(--shadow-lift); display:flex; align-items:center; gap:12px;
}
.hero-media .float-card i{ color:var(--pf-gold); font-size:1.4rem; }
.hero-media .float-card b{ display:block; font-family:var(--font-display); font-size:.95rem; color:var(--pf-green-dark); }
.hero-media .float-card span{ font-size:.76rem; color:var(--pf-ink-60); }

@media (max-width:991px){
  .hero .container-xl{ grid-template-columns:1fr; }
  .hero h1{ font-size:2.3rem; }
  .hero-media{ margin-top:20px; }
}

/* ---------- Page (inner) hero ---------- */
.page-hero{
  background:var(--pf-green-dark); color:#fff; padding:64px 0 54px; position:relative;
}
.page-hero .eyebrow{ color:var(--pf-gold-light); }
.page-hero h1{ color:#fff; margin-bottom:10px; font-size:2.5rem; }
.breadcrumb-pf{ display:flex; gap:8px; list-style:none; padding:0; margin:0; font-size:.86rem; color:rgba(255,255,255,.65); }
.breadcrumb-pf a{ color:rgba(255,255,255,.85); }
.breadcrumb-pf li:not(:last-child)::after{ content:'/'; margin-left:8px; color:rgba(255,255,255,.4); }

/* ---------- Cards ---------- */
.pf-card{
  background:#fff; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-soft); border:1px solid var(--pf-line);
  transition:.3s ease; position:relative;
}
.pf-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.pf-card .img-wrap{ position:relative; overflow:hidden; height:200px; }
.pf-card .img-wrap img{ width:100%; height:100%; object-fit:cover; transition:.5s ease; }
.pf-card:hover .img-wrap img{ transform:scale(1.07); }
.pf-card .body{ padding:22px; }
.pf-card h3, .pf-card h5{ margin-bottom:8px; font-size:1.08rem; }
.pf-card p{ color:var(--pf-ink-60); font-size:.9rem; margin-bottom:14px; }
.pf-card .spice-stripe{ position:absolute; top:0; left:0; }

.badge-pl{
  position:absolute; top:14px; right:14px;
  background:var(--pf-gold); color:var(--pf-green-dark);
  font-family:var(--font-display); font-weight:600; font-size:.68rem;
  padding:5px 12px; border-radius:100px; letter-spacing:.04em; z-index:2;
}
.meta-row{ display:flex; justify-content:space-between; font-size:.78rem; color:var(--pf-ink-60); border-top:1px dashed var(--pf-line); padding-top:12px; margin-bottom:14px; }
.meta-row b{ color:var(--pf-green-dark); display:block; font-size:.86rem; }

/* Category card */
.cat-card{
  border-radius:var(--r-lg); overflow:hidden; position:relative; height:260px;
  box-shadow:var(--shadow-soft);
}
.cat-card img{ width:100%; height:100%; object-fit:cover; transition:.5s ease; }
.cat-card:hover img{ transform:scale(1.08); }
.cat-card .overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,61,38,0) 30%, rgba(18,61,38,.88) 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:22px;
}
.cat-card h5{ color:#fff; margin-bottom:4px; }
.cat-card span{ color:var(--pf-gold-light); font-size:.8rem; font-weight:600; }

/* ---------- Counters / stats strip ---------- */
.stat-strip{ background:var(--pf-accent); border-radius:var(--r-lg); padding:44px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.stat-strip .stat b{ font-family:var(--font-display); font-size:2.4rem; color:var(--pf-green); display:block; }
.stat-strip .stat span{ font-size:.82rem; color:var(--pf-ink-60); text-transform:uppercase; letter-spacing:.05em; }
@media (max-width:768px){ .stat-strip{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Feature list ---------- */
.feature-row{ display:flex; gap:18px; margin-bottom:28px; }
.feature-row .icon{
  width:52px; height:52px; border-radius:14px; background:var(--pf-green-soft);
  color:var(--pf-green); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0;
}
.feature-row h5{ margin-bottom:6px; font-size:1.02rem; }
.feature-row p{ color:var(--pf-ink-60); font-size:.9rem; margin:0; }

/* ---------- Timeline ---------- */
.pf-timeline{ position:relative; padding-left:34px; border-left:2px solid var(--pf-line); }
.pf-timeline .tl-item{ position:relative; padding-bottom:38px; }
.pf-timeline .tl-item::before{
  content:''; position:absolute; left:-42px; top:2px; width:16px; height:16px; border-radius:50%;
  background:var(--pf-gold); border:3px solid var(--pf-bg); box-shadow:0 0 0 2px var(--pf-gold);
}
.pf-timeline .tl-year{ font-family:var(--font-display); color:var(--pf-green); font-weight:700; font-size:.85rem; letter-spacing:.05em; }

/* ---------- Testimonials ---------- */
.testi-card{ background:#fff; border:1px solid var(--pf-line); border-radius:var(--r-lg); padding:30px; box-shadow:var(--shadow-soft); height:100%; }
.testi-card .stars{ color:var(--pf-gold); margin-bottom:14px; font-size:.85rem; }
.testi-card p{ font-style:italic; color:var(--pf-ink); margin-bottom:20px; }
.testi-person{ display:flex; align-items:center; gap:12px; }
.testi-person img{ width:46px; height:46px; border-radius:50%; object-fit:cover; border:2px solid var(--pf-gold-light); }
.testi-person b{ display:block; font-size:.9rem; }
.testi-person span{ font-size:.78rem; color:var(--pf-ink-60); }

/* ---------- Forms ---------- */
.pf-form label{ font-family:var(--font-display); font-weight:600; font-size:.84rem; margin-bottom:6px; display:block; color:var(--pf-green-dark); }
.pf-form .form-control, .pf-form .form-select{
  border:1.5px solid var(--pf-line); border-radius:var(--r-sm); padding:12px 14px; font-size:.92rem;
}
.pf-form .form-control:focus, .pf-form .form-select:focus{ border-color:var(--pf-green); box-shadow:0 0 0 3px rgba(29,94,58,.12); }
.form-file-drop{
  border:2px dashed var(--pf-line); border-radius:var(--r-md); padding:26px; text-align:center; color:var(--pf-ink-60); font-size:.85rem;
}

.pf-card-form{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-lift); border:1px solid var(--pf-line); padding:40px; }

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--pf-green); border-radius:var(--r-lg); padding:56px; color:#fff;
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta-band h2{ color:#fff; margin-bottom:8px; }
.cta-band p{ color:rgba(255,255,255,.78); margin:0; }

/* ---------- Newsletter ---------- */
.newsletter-box{ background:var(--pf-accent); border-radius:var(--r-lg); padding:40px; }
.newsletter-form{ display:flex; gap:10px; max-width:440px; }
.newsletter-form input{ flex:1; border-radius:100px; border:1.5px solid var(--pf-line); padding:12px 18px; }

/* ---------- Footer ---------- */
.pf-footer{ background:var(--pf-green-dark); color:rgba(255,255,255,.72); padding-top:64px; }
.pf-footer h6{ color:#fff; font-family:var(--font-display); font-size:.95rem; margin-bottom:18px; }
.pf-footer a{ color:rgba(255,255,255,.68); font-size:.9rem; }
.pf-footer a:hover{ color:var(--pf-gold-light); }
.pf-footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer-logo{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.footer-logo strong{ color:#fff; font-family:var(--font-display); font-size:1.1rem; }
.social-row{ display:flex; gap:10px; margin-top:18px; }
.social-row a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
.social-row a:hover{ background:var(--pf-gold); color:var(--pf-green-dark); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:44px; padding:20px 0; font-size:.82rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.footer-bottom a{ margin-left:18px; }

/* ---------- WhatsApp float ---------- */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:1500;
  width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  box-shadow:0 8px 24px rgba(37,211,102,.5);
  animation:wa-pulse 2.4s infinite;
}
@keyframes wa-pulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{ box-shadow:0 0 0 14px rgba(37,211,102,0);} 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} }

/* ---------- Sticky quote bar (product detail) ---------- */
.sticky-quote{
  position:sticky; bottom:0; left:0; right:0; z-index:900;
  background:#fff; border-top:1px solid var(--pf-line); box-shadow:0 -8px 20px rgba(0,0,0,.06);
  padding:14px 0; display:flex; justify-content:space-between; align-items:center; gap:14px;
}

/* ---------- Utility ---------- */
.text-gold{ color:var(--pf-gold) !important; }
.text-green{ color:var(--pf-green) !important; }
.divider-dash{ border-top:1px dashed var(--pf-line); margin:32px 0; }
.pill{ display:inline-flex; align-items:center; gap:6px; background:var(--pf-green-soft); color:var(--pf-green); font-size:.78rem; font-weight:600; font-family:var(--font-display); padding:6px 14px; border-radius:100px; }
.table-specs td, .table-specs th{ padding:12px 14px; font-size:.9rem; border-color:var(--pf-line); }
.table-specs th{ width:35%; background:var(--pf-accent); font-family:var(--font-display); color:var(--pf-green-dark); font-weight:600; }

.success-box{ background:var(--pf-green-soft); border:1px solid var(--pf-green); border-radius:var(--r-md); padding:24px; display:none; align-items:center; gap:14px; }
.success-box i{ font-size:1.6rem; color:var(--pf-green); }

.map-placeholder{ background:var(--pf-accent); border-radius:var(--r-lg); height:340px; display:flex; align-items:center; justify-content:center; flex-direction:column; color:var(--pf-ink-60); border:1px dashed var(--pf-line); }

.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px; }
.filter-chip{ padding:9px 18px; border-radius:100px; border:1.5px solid var(--pf-line); font-family:var(--font-display); font-size:.84rem; font-weight:600; color:var(--pf-ink-60); background:#fff; }
.filter-chip.active, .filter-chip:hover{ background:var(--pf-green); border-color:var(--pf-green); color:#fff; }

/* ---------- Mobile nav (JS toggled) ---------- */
@media (max-width:991px){
  .pf-nav.mobile-open > ul{
    display:flex; flex-direction:column; gap:0;
    position:fixed; top:118px; left:0; right:0; bottom:0;
    background:#fff; padding:10px 24px 40px; overflow-y:auto; z-index:999;
  }
  .pf-nav.mobile-open > ul > li{ border-bottom:1px solid var(--pf-line); }
  .pf-nav.mobile-open > ul > li > a{ padding:16px 0; justify-content:space-between; width:100%; }
  .mega-menu{ position:static; width:100%; transform:none; box-shadow:none; border:none; padding:0 0 16px; grid-template-columns:1fr; display:none; opacity:1; visibility:visible; }
  li.mega-open .mega-menu{ display:grid; }
  .mega-promo{ display:none; }
}

/* ---------- Search overlay ---------- */
.search-overlay{
  position:fixed; inset:0; background:rgba(18,61,38,.92); z-index:2000;
  display:flex; align-items:flex-start; justify-content:center; padding-top:14vh;
  opacity:0; visibility:hidden; transition:.25s ease;
}
.search-overlay.open{ opacity:1; visibility:visible; }
.search-overlay .search-box{ width:min(560px,92vw); position:relative; }
.search-overlay input{
  width:100%; padding:18px 50px 18px 22px; border-radius:100px; border:none; font-size:1.1rem;
}
.search-overlay .search-close{
  position:absolute; top:-52px; right:0; background:none; border:none; color:#fff; font-size:1.6rem;
}

/* Grid item wrapper used for filterable product grid */
.grid-item{ margin-bottom:28px; }

/* Back to top */
.back-to-top{
  position:fixed; bottom:24px; right:94px; z-index:1400;
  width:46px; height:46px; border-radius:50%; background:#fff; color:var(--pf-green);
  border:1.5px solid var(--pf-line); display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:.25s ease; box-shadow:var(--shadow-soft);
}
@media (max-width:480px){ .back-to-top{ right:78px; bottom:16px; width:40px; height:40px; } }