:root{
  --orange:#F2841D;
  --orange-dark:#D66E0F;
  --orange-light:#FFF1E1;
  --green:#2E9155;
  --green-light:#E7F6EC;
  --red:#E63946;
  --red-light:#FDEBEC;
  --yellow:#F4B400;
  --yellow-light:#FEF6DD;
  --ink:#1B1B1F;
  --muted:#75757F;
  --bg:#FFFFFF;
  --bg-soft:#F7F7F9;
  --line:#ECECF0;

  /* Spices & Flours theme (default) — dark teal + gold, matching the brand catalogue */
  --theme-hero-bg:#0F2C2E;
  --theme-hero-bg-2:#16403F;
  --theme-hero-ink:#FBF3E4;
  --theme-hero-muted:#B9C9C4;
  --theme-accent:#D4A94A;
  --theme-accent-dark:#B48A34;
  --theme-accent-light:#F6ECD2;
  --theme-tabbar-bg:var(--orange-light);
}
[data-theme="cookies"]{
  /* Cookies & Rusks theme — warm bakery cream + chocolate */
  --theme-hero-bg:#FDEEDD;
  --theme-hero-bg-2:#FBDFC4;
  --theme-hero-ink:#4A2E1E;
  --theme-hero-muted:#8A6A54;
  --theme-accent:#C77B4D;
  --theme-accent-dark:#A35F36;
  --theme-accent-light:#FBE7D3;
  --theme-tabbar-bg:var(--theme-accent-light);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%;}
body{font-family:'Plus Jakarta Sans', sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;overflow-x:hidden;max-width:100%;}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans', sans-serif;font-weight:800;line-height:1.1;letter-spacing:-0.02em;}
.mono{font-family:'JetBrains Mono', monospace;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
img,svg{display:block;max-width:100%;}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;}
::selection{background:var(--orange);color:#fff;}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }
.reveal{opacity:0;transform:translateY(22px);transition:opacity 0.6s ease, transform 0.6s ease;}
.reveal.show{opacity:1;transform:translateY(0);}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:200;background:rgba(255,255,255,0.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 32px;max-width:1240px;margin:0 auto;}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;perspective:700px;}
.brand-mark{width:40px;height:40px;border-radius:12px;background:var(--orange);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px;}
.brand-word{font-size:19px;font-weight:800;}
/* Logo intro loop: fades/scales in, holds, then does one full spin with a
   zoom pump at its peak before settling back — repeats forever. */
.brand-logo{height:44px;width:auto;display:block;transform-style:preserve-3d;will-change:transform,opacity;animation:logo-loop 7s ease-in-out infinite;}
@keyframes logo-loop{
  0%   {opacity:0;transform:scale(0.5) rotateY(0deg);}
  12%  {opacity:1;transform:scale(1) rotateY(0deg);}
  45%  {opacity:1;transform:scale(1) rotateY(0deg);}
  62%  {opacity:1;transform:scale(1.18) rotateY(180deg);}
  80%  {opacity:1;transform:scale(1) rotateY(360deg);}
  92%  {opacity:1;transform:scale(1) rotateY(360deg);}
  100% {opacity:0;transform:scale(0.5) rotateY(360deg);}
}
@media (max-width:520px){.brand-logo{height:36px;}}
@media (prefers-reduced-motion: reduce){
  .brand-logo{animation:none;opacity:1;transform:none;}
}
nav.links{display:flex;gap:6px;font-size:14px;font-weight:600;flex-shrink:0;}
nav.links a{padding:9px 14px;border-radius:100px;color:var(--muted);transition:all 0.2s ease;}
nav.links a:hover{background:var(--orange-light);color:var(--orange-dark);}
.nav-search{flex:1;max-width:340px;display:flex;align-items:center;gap:8px;background:var(--bg-soft);border:1px solid var(--line);border-radius:100px;padding:10px 16px;font-size:13.5px;color:var(--muted);}
.nav-search input{border:none;background:none;outline:none;flex:1;font-family:inherit;font-size:13.5px;color:var(--ink);}
.nav-icons{display:flex;gap:10px;align-items:center;flex-shrink:0;}
.icon-btn{width:40px;height:40px;border-radius:100px;display:flex;align-items:center;justify-content:center;background:var(--bg-soft);font-size:16px;position:relative;}
.icon-btn.cart .cart-badge{position:absolute;top:-3px;right:-3px;background:var(--orange);color:#fff;font-size:9px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;}
.nav-cta{background:var(--orange);color:#fff;padding:11px 22px;border-radius:100px;font-size:13.5px;font-weight:700;white-space:nowrap;}
@media (max-width:1050px){ nav.links,.nav-search{display:none;} }
@media (max-width:520px){
  .nav-inner{padding:14px 20px;gap:12px;}
  .wishlist-nav{display:none;}
  .nav-cta{display:none;}
}

/* ================= BOTTOM TAB BAR (mobile only) ================= */
.bottom-tabbar{display:none;}
@media (max-width:900px){
  .bottom-tabbar{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:300;
    background:#fff;border-top:1px solid var(--line);
    padding:8px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 16px rgba(27,27,31,0.08);
  }
  body{padding-bottom:66px;}
}
.bt-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:600;color:var(--muted);position:relative;padding:4px 0;transition:color 0.15s ease, transform 0.15s ease;}
.bt-item:active{transform:scale(0.92);}
.bt-item.active{color:var(--orange);}
.bt-ic{font-size:20px;}
.bt-badge{position:absolute;top:-2px;right:calc(50% - 20px);background:var(--orange);color:#fff;font-size:9px;width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;}

/* ================= SECTION TABS (Spices/Flours vs Cookies) ================= */
.section-tabs-wrap{background:var(--theme-tabbar-bg);padding:14px 0 18px;transition:background 0.4s ease;}
.section-tabs{display:flex;gap:6px;max-width:1240px;margin:0 auto;padding:0 32px;background:rgba(0,0,0,0.05);border-radius:100px;width:fit-content;}
.section-tab{padding:11px 22px;border-radius:100px;font-size:13.5px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:8px;transition:background 0.2s ease, color 0.2s ease;white-space:nowrap;}
.section-tab.active{background:var(--theme-accent);color:#fff;}
@media (max-width:520px){
  .section-tabs{width:100%;padding:0 16px;}
  .section-tab{flex:1;justify-content:center;padding:10px 12px;font-size:12.5px;}
}

/* ================= TRUST STRIP (auto-scrolling marquee ticker) ================= */
.trust-strip{background:var(--ink);color:rgba(255,255,255,0.85);overflow:hidden;}
.trust-strip-track{display:flex;width:max-content;animation:trust-marquee 22s linear infinite;}
.trust-strip:hover .trust-strip-track{animation-play-state:paused;}
.trust-strip-inner{display:flex;gap:28px;padding:8px 32px;white-space:nowrap;font-size:11.5px;font-weight:600;flex-shrink:0;}
.trust-strip-inner span{display:flex;align-items:center;gap:6px;flex-shrink:0;}
@keyframes trust-marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .trust-strip-track{animation:none;}
}

/* ================= TOP SEARCH BAR (standalone, above hero banner) ================= */
.top-search-wrap{background:var(--bg-soft);padding:18px 0;}
.top-search{display:flex;background:#fff;border:1.5px solid var(--line);border-radius:100px;padding:6px 6px 6px 20px;align-items:center;gap:10px;max-width:520px;margin:0 auto;box-shadow:0 8px 20px rgba(27,27,31,0.05);}
.top-search input{border:none;outline:none;flex:1;font-family:inherit;font-size:14px;padding:8px 0;}
.top-search button{background:var(--orange);color:#fff;padding:10px 22px;border-radius:100px;font-size:13.5px;font-weight:700;flex-shrink:0;}

/* ================= WORDMARK HERO (animated, shared by both Spices & Cookies tabs) ================= */
.word-hero{padding:56px 0 44px;text-align:center;overflow:hidden;}
.word-hero-inner{display:flex;flex-direction:column;align-items:center;}
.word-hero-text{display:flex;align-items:center;justify-content:center;gap:2px;margin:0;line-height:1;perspective:1000px;}
.wd-letter{font-size:clamp(40px,9vw,96px);font-weight:800;color:var(--theme-accent,var(--ink));display:inline-block;}
.wd-image-slot{position:relative;width:clamp(52px,11vw,116px);height:clamp(52px,11vw,116px);display:inline-flex;align-items:center;justify-content:center;margin:0 2px;transform-style:preserve-3d;will-change:transform;}
.wd-image-emoji{font-size:clamp(48px,10.5vw,108px);display:inline-block;filter:drop-shadow(0 8px 14px rgba(0,0,0,0.2));}
.word-hero .crumb{position:absolute;font-size:clamp(14px,2.6vw,24px);pointer-events:none;}
.word-hero .crumb1{top:-6%;right:-14%;}
.word-hero .crumb2{bottom:2%;left:-20%;}
.word-hero .crumb3{top:6%;left:-22%;}
.word-hero-sub{color:var(--muted);font-size:15px;margin-top:16px;max-width:44ch;}
.word-scroll-btn{margin-top:26px;background:none;border:none;font-size:22px;color:var(--theme-accent,var(--ink));cursor:pointer;line-height:1;padding:6px;}
@media (max-width:640px){
  .word-hero{padding:40px 0 30px;}
  .word-hero-sub{font-size:13.5px;padding:0 24px;}
}

/* ================= HERO (legacy split hero, kept for reference/reuse) ================= */
.hero{background:var(--theme-hero-bg);background-image:linear-gradient(160deg,var(--theme-hero-bg),var(--theme-hero-bg-2));overflow:hidden;position:relative;transition:background 0.4s ease;}
.hero-inner{max-width:1240px;margin:0 auto;padding:70px 32px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--theme-accent-light);color:var(--theme-accent-dark);font-size:12.5px;font-weight:700;padding:8px 16px;border-radius:100px;margin-bottom:22px;}
.hero h1{font-size:clamp(34px,4.6vw,54px);margin-bottom:18px;color:var(--theme-hero-ink);}
.hero h1 span{color:var(--theme-accent);}
.hero p.lead{font-size:16px;color:var(--theme-hero-muted);max-width:42ch;margin-bottom:28px;}
.hero-search{display:flex;background:#fff;border:1.5px solid var(--line);border-radius:100px;padding:6px 6px 6px 20px;align-items:center;gap:10px;max-width:440px;box-shadow:0 10px 30px rgba(0,0,0,0.18);margin-bottom:30px;}
.hero-search input{border:none;outline:none;flex:1;font-family:inherit;font-size:14px;padding:8px 0;}
.hero-search .filter-btn{background:var(--theme-accent);color:#fff;width:42px;height:42px;border-radius:50%;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hero-stats{display:flex;gap:30px;flex-wrap:wrap;}
.hero-stats div b{display:block;font-size:22px;font-weight:800;color:var(--theme-hero-ink);}
.hero-stats div span{font-size:12.5px;color:var(--theme-hero-muted);}

.hero-visual{position:relative;height:400px;display:flex;align-items:center;justify-content:center;}
.hv-glow{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,var(--theme-accent-light),var(--theme-accent) 70%);filter:blur(50px);opacity:0.55;}
.hv-shadow{position:absolute;bottom:30px;width:220px;height:34px;border-radius:50%;background:radial-gradient(ellipse,rgba(27,27,31,0.25),transparent 70%);}
.hv-circle{width:300px;height:300px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 30px 60px rgba(27,27,31,0.12);}
.hv-circle .ic{font-size:130px;filter:drop-shadow(0 16px 20px rgba(0,0,0,0.22));}
.float-card{position:absolute;background:#fff;border-radius:16px;padding:12px 16px;box-shadow:0 14px 30px rgba(27,27,31,0.12);display:flex;align-items:center;gap:10px;animation:bob 5s ease-in-out infinite;}
.float-card .ic{font-size:26px;}
.float-card .txt b{display:block;font-size:12.5px;}
.float-card .txt span{font-size:11px;color:var(--muted);}
.fc1{top:0;left:0;animation-delay:0s;}
.fc2{bottom:20px;right:0;animation-delay:1.2s;}
.fc3{top:40%;right:-10px;animation-delay:2.4s;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.coupon{
  position:absolute;bottom:-10px;left:10px;background:var(--ink);color:#fff;border-radius:14px;padding:10px 16px;
  font-size:11.5px;font-weight:700;display:flex;align-items:center;gap:8px;box-shadow:0 14px 26px rgba(0,0,0,0.25);
}
.coupon .code{background:rgba(255,255,255,0.15);padding:3px 8px;border-radius:6px;font-family:'JetBrains Mono',monospace;color:var(--yellow);}
@media (max-width:900px){ .hero-inner{grid-template-columns:1fr;} .hero-visual{height:280px;} .hv-circle{width:220px;height:220px;} .hv-circle .ic{font-size:80px;} }
@media (max-width:480px){
  .float-card{max-width:calc(50vw - 20px);padding:8px 10px;}
  .float-card .txt b, .float-card .txt span{white-space:normal;}
  .fc3{right:0;}
}
/* Compact, app-like hero on small screens — Blinkit-style density: less
   marketing copy, no decorative illustration, search + stats front and center. */
@media (max-width:640px){
  .hero-inner{padding:22px 20px 28px;gap:16px;}
  .hero-badge{margin-bottom:14px;padding:6px 14px;}
  .hero h1{font-size:26px;margin-bottom:10px;}
  .hero p.lead{display:none;}
  .hero-search{margin-bottom:18px;padding:5px 5px 5px 16px;}
  .hero-stats{gap:18px;}
  .hero-stats div b{font-size:17px;}
  .hero-visual{display:none;}
}

/* ---------- section shell ---------- */
section{padding:88px 0;}
@media (max-width:640px){section{padding:48px 0;}}
.sec-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;max-width:1240px;margin-inline:auto;padding-inline:32px;flex-wrap:wrap;gap:16px;}
.sec-top .eyebrow{color:var(--theme-accent-dark);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;display:block;}
.sec-top h2{font-size:clamp(24px,3vw,34px);}
.sec-top .view-all{font-size:13.5px;font-weight:700;color:var(--orange);display:flex;align-items:center;gap:6px;}
.sec-center{text-align:center;max-width:600px;margin:0 auto 44px;}
.sec-center .eyebrow{color:var(--theme-accent-dark);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;display:block;}
.sec-center h2{font-size:clamp(24px,3vw,34px);}
.sec-center p{color:var(--muted);margin-top:12px;font-size:15px;}

/* ================= OFFER BANNER ================= */
.offer-banner{
  background:linear-gradient(120deg,var(--orange),#FFA94D);border-radius:28px;padding:44px 48px;
  display:flex;align-items:center;justify-content:space-between;gap:30px;color:#fff;position:relative;overflow:hidden;
  box-shadow:0 24px 50px rgba(242,132,29,0.28);
}
.ob-tag{background:rgba(255,255,255,0.22);padding:6px 14px;border-radius:100px;font-size:12px;font-weight:700;display:inline-block;margin-bottom:14px;}
.ob-text h2{font-size:clamp(24px,3vw,34px);margin-bottom:14px;color:#fff;}
.ob-text p{font-size:14.5px;opacity:0.92;max-width:42ch;margin-bottom:22px;}
.ob-visual{position:relative;width:180px;height:180px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.ob-glow{position:absolute;inset:0;background:rgba(255,255,255,0.25);border-radius:50%;filter:blur(20px);}
.ob-icon{font-size:110px;position:relative;z-index:2;filter:drop-shadow(0 14px 18px rgba(0,0,0,0.25));}
@media (max-width:800px){.offer-banner{flex-direction:column;text-align:center;padding:36px 28px;} .ob-text p{max-width:100%;}}

/* ================= CATEGORY CIRCLES (photo-style) ================= */
.cat-row-wrap{position:relative;max-width:1240px;margin:0 auto;padding:0 44px;text-align:center;}
.cat-row{display:inline-flex;gap:26px;max-width:100%;overflow-x:auto;scroll-behavior:smooth;padding:4px 2px;}
.cat-arrow{position:absolute;top:42px;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 6px 16px rgba(27,27,31,0.12);display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1;cursor:pointer;z-index:5;transition:transform 0.15s ease, box-shadow 0.15s ease;}
.cat-arrow:hover{box-shadow:0 10px 22px rgba(27,27,31,0.18);}
.cat-arrow:active{transform:translateY(-50%) scale(0.9);}
.cat-arrow-prev{left:0;}
.cat-arrow-next{right:0;}
@media (max-width:680px){.cat-arrow{display:none;}}
.cat-item{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;width:100px;}
.cat-circle{
  width:84px;height:84px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow:0 6px 16px rgba(27,27,31,0.06);
}
.cat-circle .glow{position:absolute;inset:8px;border-radius:50%;filter:blur(14px);opacity:0.55;}
.cat-circle .ic{font-size:34px;position:relative;z-index:2;filter:drop-shadow(0 4px 6px rgba(0,0,0,0.15));}
.cat-item:hover .cat-circle, .cat-item.active .cat-circle{transform:translateY(-4px);box-shadow:0 14px 26px rgba(27,27,31,0.14);border-color:var(--orange);}
.cat-item span.lb{font-size:13px;font-weight:600;text-align:center;}
.g1{background:var(--green);} .g2{background:var(--red);} .g3{background:var(--yellow);}
.g4{background:var(--orange);} .g5{background:#8B5CF6;} .g6{background:#8a5a2b;}

.cat-detail{max-width:1240px;margin:36px auto 0;padding:0 32px;}
.cd-inner{display:flex;gap:0;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;flex-wrap:wrap;box-shadow:0 10px 30px rgba(27,27,31,0.06);}
.cd-visual{width:200px;flex-shrink:0;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;position:relative;}
.cd-visual .glow{position:absolute;width:130px;height:130px;border-radius:50%;filter:blur(30px);opacity:0.5;}
.cd-icon{font-size:64px;position:relative;z-index:2;filter:drop-shadow(0 10px 14px rgba(0,0,0,0.2));}
.cd-body{flex:1;min-width:220px;padding:30px 32px;}
.cd-text h3{font-size:20px;margin-bottom:6px;}
.cd-text p{color:var(--muted);font-size:14px;max-width:56ch;margin-bottom:16px;}
.cd-more{display:flex;gap:10px;margin-bottom:18px;}
.cd-more .mini{width:44px;height:44px;border-radius:50%;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;font-size:19px;border:1px solid var(--line);}
.cd-link{background:var(--ink);color:#fff;padding:12px 24px;border-radius:100px;font-weight:700;font-size:13.5px;white-space:nowrap;display:inline-flex;}

/* ================= PROMO STRIP ================= */
.promo-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1240px;margin:0 auto;padding:0 32px;}
.promo-card{border-radius:22px;padding:30px 28px;position:relative;overflow:hidden;min-height:170px;display:flex;flex-direction:column;justify-content:center;color:#fff;}
.promo-card .tag{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;opacity:0.85;margin-bottom:8px;}
.promo-card h3{font-size:22px;margin-bottom:16px;max-width:14ch;}
.promo-card .go{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.2);width:fit-content;padding:9px 18px;border-radius:100px;font-size:13px;font-weight:700;backdrop-filter:blur(6px);}
.promo-card .deco{position:absolute;font-size:90px;opacity:0.18;right:-10px;bottom:-20px;}
.p1{background:linear-gradient(135deg,#F2841D,#D66E0F);}
.p2{background:linear-gradient(135deg,#2E9155,#1F6B3D);}
.p3{background:linear-gradient(135deg,#E63946,#B92834);}
@media (max-width:900px){.promo-row{grid-template-columns:1fr;}}

/* ================= PRODUCT GRID ================= */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1240px;margin:0 auto;padding:0 32px;}
.prod-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;position:relative;transition:transform 0.25s ease, box-shadow 0.25s ease;transform-style:preserve-3d;will-change:transform;}
.prod-card:hover{box-shadow:0 22px 36px rgba(27,27,31,0.14);}
.prod-card:active{transition:transform 0.1s ease;}
.prod-photo{aspect-ratio:1/1;height:auto;border-radius:14px;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:14px;overflow:hidden;}
.prod-photo .glow{position:absolute;width:100px;height:100px;border-radius:50%;filter:blur(24px);opacity:0.5;}
.prod-photo .shadow{position:absolute;bottom:14px;width:70px;height:12px;border-radius:50%;background:radial-gradient(ellipse,rgba(27,27,31,0.2),transparent 70%);}
.prod-photo .ic{font-size:52px;position:relative;z-index:2;filter:drop-shadow(0 8px 10px rgba(0,0,0,0.18));}
.prod-photo img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 0.3s ease;}
.prod-card:hover .prod-photo img{transform:scale(1.06);}
.wishlist{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;box-shadow:0 4px 10px rgba(27,27,31,0.12);z-index:3;transition:transform 0.15s ease;}
.wishlist:active{transform:scale(0.8);}
.wishlist.active{color:var(--red);}
.sale-badge{position:absolute;top:10px;left:10px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:100px;z-index:3;}
.prod-card .tag{font-size:11px;color:var(--muted);margin-bottom:4px;}
.prod-card h4{font-size:15px;font-weight:700;margin-bottom:4px;min-height:38px;}
.prod-weight{font-size:11.5px;color:var(--muted);margin-bottom:8px;display:block;}
.rating{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);margin-bottom:10px;}
.rating .star{color:var(--yellow);}
.prod-bottom{display:flex;align-items:center;justify-content:space-between;}
.prod-price b{font-size:16px;font-weight:800;}
.prod-price .strike{font-size:12px;color:var(--muted);text-decoration:line-through;margin-left:6px;}
.add-btn{width:38px;height:38px;border-radius:50%;background:var(--orange);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;transition:background 0.2s ease, transform 0.15s ease;}
.add-btn:hover{background:var(--orange-dark);transform:scale(1.08);}
.add-btn:active{transform:scale(0.82);}
@media (max-width:900px){.prod-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){
  .prod-grid{gap:10px;padding:0 14px;}
  .prod-card{padding:8px;}
  .prod-photo{margin-bottom:8px;}
  .prod-photo .ic{font-size:40px;}
  .prod-card .tag{font-size:10px;}
  .prod-card h4{font-size:12.5px;min-height:32px;margin-bottom:2px;}
  .prod-weight{font-size:10px;margin-bottom:4px;}
  .rating{font-size:10.5px;gap:2px;margin-bottom:6px;}
  .prod-price b{font-size:13.5px;}
  .prod-price .strike{font-size:10px;margin-left:4px;}
  .add-btn{width:30px;height:30px;font-size:14px;}
}

/* ---- Spices & Flours: ethnic jali-lattice + dot-trim backdrop, echoing the
   brass-lantern lattice & terracotta dot-work seen in the product photography ---- */
#tabpanel-spices{
  position:relative;
  background-color:#FBF3E1;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='none' stroke='%23B48A34' stroke-width='1.6' opacity='0.22'%3E%3Cpath d='M45 2 L88 45 L45 88 L2 45 Z'/%3E%3Cpath d='M45 24 L66 45 L45 66 L24 45 Z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='1.4' fill='%238a5a2b' opacity='0.35'/%3E%3C/svg%3E");
  background-position:0 0, 11px 11px;
  background-size:90px 90px, 22px 22px;
  background-repeat:repeat, repeat;
  overflow:hidden;
}
.ethnic-deco{position:absolute;font-size:120px;opacity:0.08;pointer-events:none;z-index:0;filter:grayscale(0.3);}
.ethnic-deco-pot{top:40px;left:-20px;transform:rotate(-8deg);}
.ethnic-deco-lamp{top:640px;right:-10px;font-size:100px;transform:rotate(6deg);}
.ethnic-deco-charm{bottom:60px;left:20px;font-size:80px;}
#tabpanel-spices > section{position:relative;z-index:1;}
@media (max-width:640px){
  .ethnic-deco{font-size:80px;}
  .ethnic-deco-lamp{font-size:64px;top:560px;}
  .ethnic-deco-charm{font-size:56px;}
}
body[data-theme="spices"] .prod-card{
  background:#FFFDF8;
  border:1.5px solid var(--theme-accent);
  box-shadow:inset 0 0 0 4px rgba(212,169,74,0.14);
}
body[data-theme="spices"] .prod-card::before{
  content:'';
  position:absolute;
  inset:7px;
  border:1px dashed rgba(180,138,52,0.45);
  border-radius:14px;
  pointer-events:none;
}

/* ================= FEATURES ================= */
.feat-section{background:var(--bg-soft);}
.feat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1240px;margin:0 auto;padding:0 32px;}
.feat-card{background:#fff;border-radius:18px;padding:26px 22px;text-align:center;box-shadow:0 6px 18px rgba(27,27,31,0.05);}
.feat-card .ic-wrap{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px;}
.f1 .ic-wrap{background:var(--green-light);} .f2 .ic-wrap{background:var(--orange-light);} .f3 .ic-wrap{background:var(--yellow-light);} .f4 .ic-wrap{background:var(--red-light);}
.feat-card h4{font-size:15px;margin-bottom:6px;}
.feat-card p{font-size:13px;color:var(--muted);}
@media (max-width:900px){.feat-row{grid-template-columns:1fr 1fr;}}

/* ================= STORY ================= */
.story-inner{max-width:1240px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.story-inner h2{font-size:clamp(26px,3.4vw,38px);margin-bottom:16px;}
.story-inner p{color:var(--muted);font-size:15px;margin-bottom:14px;max-width:50ch;}
.story-badges{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}
.story-badges span{background:var(--bg-soft);padding:9px 16px;border-radius:100px;font-size:13px;font-weight:600;}
.story-visual{position:relative;height:320px;border-radius:24px;background:linear-gradient(135deg,var(--green-light),#fff);display:flex;align-items:center;justify-content:center;}
.story-visual .ic{font-size:100px;}
@media (max-width:900px){.story-inner{grid-template-columns:1fr;}}

/* ================= RECIPES ================= */
.recipe-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1240px;margin:0 auto;padding:0 32px;}
.r-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;transition:transform 0.2s ease;}
.r-card:hover{transform:translateY(-4px);}
.r-card .ic-wrap{width:52px;height:52px;border-radius:14px;background:var(--green-light);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px;}
.r-card h4{font-size:17px;margin-bottom:12px;}
.r-card ol{padding-left:18px;font-size:13.5px;color:var(--muted);}
.r-card ol li{margin-bottom:7px;}
.r-card ol li b{color:var(--ink);}
@media (max-width:900px){.recipe-row{grid-template-columns:1fr;}}

/* ================= TESTIMONIALS (auto-scrolling marquee) ================= */
.testi-marquee{overflow:hidden;max-width:1240px;margin:0 auto;padding:0 32px;}
.testi-track{display:flex;width:max-content;animation:testi-marquee-scroll 32s linear infinite;}
.testi-marquee:hover .testi-track{animation-play-state:paused;}
.testi-row{display:flex;gap:20px;flex-shrink:0;padding-right:20px;}
.t-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;width:270px;flex-shrink:0;}
.t-card .stars{color:var(--yellow);font-size:13px;margin-bottom:10px;}
.t-card p{font-size:13.5px;margin-bottom:16px;}
.t-card .who{display:flex;align-items:center;gap:10px;}
.t-card .av{width:34px;height:34px;border-radius:50%;background:var(--orange-light);display:flex;align-items:center;justify-content:center;font-size:16px;}
.t-card .who b{display:block;font-size:13px;}
.t-card .who span{color:var(--muted);font-size:11.5px;}
@keyframes testi-marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .testi-track{animation:none;}
}
@media (max-width:640px){.t-card{width:230px;}}

/* ---------- newsletter ---------- */
.news{background:var(--ink);color:#fff;text-align:center;}
.news h2{font-size:clamp(24px,3vw,32px);margin-bottom:12px;}
.news p{margin-bottom:26px;opacity:0.7;}
.news-form{display:flex;max-width:420px;margin:0 auto;gap:10px;}
.news-form input{flex:1;padding:14px 18px;border-radius:100px;border:none;font-size:14px;font-family:inherit;}
.news-form button{background:var(--orange);color:#fff;padding:14px 24px;border-radius:100px;font-weight:700;font-size:14px;}

/* ---------- footer ---------- */
footer{background:#fff;border-top:1px solid var(--line);padding:60px 0 28px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;max-width:1240px;margin:0 auto;padding:0 32px;}
.foot-grid h5{font-size:13px;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:16px;font-weight:700;}
.foot-grid ul{list-style:none;font-size:14px;color:var(--muted);}
.foot-grid li{margin-bottom:10px;}
.foot-grid li a:hover{color:var(--orange);}
.foot-brand p{font-size:14px;max-width:32ch;margin-top:14px;color:var(--muted);}
.foot-bottom{max-width:1240px;margin:44px auto 0;padding:22px 32px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);flex-wrap:wrap;gap:10px;}
@media (max-width:800px){.foot-grid{grid-template-columns:1fr 1fr;}}

/* ================= PAGE HEADER (category/product/cart/checkout pages) ================= */
.page-header{background:var(--bg-soft);padding:40px 0;}
.page-header h1{font-size:clamp(26px,3.4vw,36px);}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:10px;}
.breadcrumb a:hover{color:var(--orange);}

/* ================= FILTER / SORT BAR ================= */
.filter-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;max-width:1240px;margin:0 auto 30px;padding:0 32px;}
.filter-bar select{border:1px solid var(--line);border-radius:100px;padding:10px 18px;font-family:inherit;font-size:13.5px;background:#fff;}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:40px;}
.pagination a, .pagination span{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:600;border:1px solid var(--line);}
.pagination a:hover{border-color:var(--orange);color:var(--orange);}
.pagination .active{background:var(--orange);color:#fff;border-color:var(--orange);}

/* ================= FORMS (auth, checkout, admin) ================= */
.form-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:36px;max-width:460px;margin:0 auto;box-shadow:0 10px 30px rgba(27,27,31,0.06);}
.form-group{margin-bottom:18px;}
.form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:8px;}
.form-group input, .form-group select, .form-group textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 16px;font-family:inherit;font-size:14px;outline:none;transition:border-color .2s ease;}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{border-color:var(--orange);}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:100px;font-weight:700;font-size:14px;background:var(--orange);color:#fff;width:100%;}
.btn-primary:hover{background:var(--orange-dark);}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:100px;font-weight:700;font-size:14px;background:var(--bg-soft);color:var(--ink);border:1px solid var(--line);}
.btn-dark{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:100px;font-weight:700;font-size:14px;background:var(--ink);color:#fff;transition:background 0.2s ease, transform 0.15s ease;}
.btn-dark:hover{background:#000;}
.btn-dark:active{transform:scale(0.97);}
.btn-dark:disabled{opacity:0.5;cursor:not-allowed;}
.alert{padding:14px 18px;border-radius:12px;font-size:13.5px;margin-bottom:18px;}
.alert-success{background:var(--green-light);color:var(--green);}
.alert-error{background:var(--red-light);color:var(--red);}

/* ================= CART / CHECKOUT TABLE ================= */
.cart-table{width:100%;border-collapse:collapse;}
.cart-table td{padding:16px 0;border-bottom:1px solid var(--line);vertical-align:middle;}
.cart-row-photo{width:64px;height:64px;border-radius:12px;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;font-size:28px;}
.qty-box{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:100px;padding:6px 10px;width:fit-content;}
.qty-box button{width:24px;height:24px;border-radius:50%;background:var(--bg-soft);font-size:14px;}
.summary-card{background:var(--bg-soft);border-radius:20px;padding:26px;}
.summary-row{display:flex;justify-content:space-between;font-size:14px;margin-bottom:12px;color:var(--muted);}
.summary-row.total{color:var(--ink);font-weight:800;font-size:17px;border-top:1px solid var(--line);padding-top:14px;margin-top:14px;}
.cart-layout{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:start;}
.cart-table-wrap{overflow-x:auto;}
.cart-table{min-width:560px;}
.account-layout{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start;}
@media (max-width:900px){
  .cart-layout{grid-template-columns:1fr;}
  .account-layout{grid-template-columns:1fr;}
}

/* ================= PRODUCT DETAIL PAGE ================= */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;}
.product-detail-photo{aspect-ratio:1/1;height:auto;border-radius:24px;}
@media (max-width:900px){
  .product-detail{grid-template-columns:1fr;gap:24px;}
}

/* ================= PRODUCT A+ CONTENT ================= */
.product-tagline{color:var(--muted);font-size:14.5px;margin-top:-4px;margin-bottom:14px;}
.gallery-thumbs{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.gallery-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:10px;border:2px solid var(--line);cursor:pointer;transition:border-color 0.2s ease;}
.gallery-thumbs img:hover,.gallery-thumbs img.active{border-color:var(--orange);}

.highlight-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.highlight-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 16px;text-align:center;}
.highlight-card .ic-wrap{width:48px;height:48px;border-radius:14px;background:var(--orange-light);display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 12px;}
.highlight-card h4{font-size:14px;margin-bottom:6px;}
.highlight-card p{font-size:12.5px;color:var(--muted);}
@media (max-width:900px){.highlight-row{grid-template-columns:1fr 1fr;}}

.nutrition-table{width:100%;border-collapse:collapse;border-radius:14px;overflow:hidden;border:1px solid var(--line);}
.nutrition-table td{padding:12px 18px;font-size:13.5px;border-bottom:1px solid var(--line);}
.nutrition-table tr:last-child td{border-bottom:none;}
.nutrition-table tr:nth-child(even){background:var(--bg-soft);}
.nutrition-table td:first-child{color:var(--muted);font-weight:600;}
.nutrition-table td:last-child{text-align:right;font-weight:700;}

.prod-story-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
@media (max-width:900px){.prod-story-inner{grid-template-columns:1fr;}}

/* ================= PRODUCT INFO TABS (Highlights / Ingredients / Nutrition / Storage & Safety / Shipping) ================= */
.info-tabs{max-width:760px;margin:0 auto;}
.info-tab-nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;border-bottom:1.5px solid var(--line);margin-bottom:26px;}
.info-tab-nav::-webkit-scrollbar{display:none;}
.info-tab-btn{flex-shrink:0;padding:12px 18px;font-size:13.5px;font-weight:700;color:var(--muted);white-space:nowrap;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;transition:color 0.2s ease, border-color 0.2s ease;}
.info-tab-btn:hover{color:var(--ink);}
.info-tab-btn.active{color:var(--orange);border-color:var(--orange);}
.info-tab-panel{animation:info-tab-fade 0.25s ease;}
@keyframes info-tab-fade{from{opacity:0;}to{opacity:1;}}

/* ================= ADMIN ================= */
.admin-body{background:var(--bg-soft);min-height:100vh;}
.admin-shell{display:flex;min-height:100vh;}
.admin-sidebar{width:230px;background:var(--ink);color:#fff;flex-shrink:0;padding:24px 16px;}
.admin-sidebar .brand-word{color:#fff;}
.admin-sidebar nav{margin-top:30px;display:flex;flex-direction:column;gap:4px;}
.admin-sidebar nav a{padding:11px 14px;border-radius:10px;color:rgba(255,255,255,0.7);font-size:14px;font-weight:600;}
.admin-sidebar nav a:hover, .admin-sidebar nav a.active{background:rgba(255,255,255,0.1);color:#fff;}
.admin-main{flex:1;padding:32px 40px;}
.admin-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:32px;}
.stat-card{background:#fff;border-radius:18px;padding:22px;box-shadow:0 6px 18px rgba(27,27,31,0.05);}
.stat-card span.lbl{font-size:12.5px;color:var(--muted);display:block;margin-bottom:8px;}
.stat-card b{font-size:24px;}
.admin-table{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden;}
.admin-table th, .admin-table td{padding:14px 18px;text-align:left;font-size:13.5px;border-bottom:1px solid var(--line);}
.admin-table th{background:var(--bg-soft);font-weight:700;text-transform:uppercase;font-size:11.5px;letter-spacing:0.04em;color:var(--muted);}
.status-pill{padding:5px 12px;border-radius:100px;font-size:11.5px;font-weight:700;display:inline-block;}
.status-pending{background:var(--yellow-light);color:#8a6d00;}
.status-confirmed{background:var(--green-light);color:var(--green);}
.status-shipped{background:#E6F0FE;color:#1D5FD6;}
.status-delivered{background:var(--green-light);color:var(--green);}
.status-cancelled{background:var(--red-light);color:var(--red);}
@media (max-width:900px){.admin-sidebar{display:none;} .stat-row{grid-template-columns:1fr 1fr;}}