/* ════════════════════════════════════════════════════════════
   Dehli Organic Spices — Desi layer
   Mughal jali patterns, paisley dividers, banner carousel,
   full-width header, regional section, Urdu accents.
   Loads after main.css + home.css.
   ════════════════════════════════════════════════════════════ */

:root {
  /* Mughal jali (lattice) tile — subtle brand-green on dark */
  --pat-jali: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%237DC832' stroke-width='1' stroke-opacity='0.5'%3E%3Cpath d='M30 0l8 8-8 8-8-8zM30 44l8 8-8 8-8-8zM0 30l8-8 8 8-8 8zM44 30l8-8 8 8-8 8z'/%3E%3Ccircle cx='30' cy='30' r='6'/%3E%3C/g%3E%3C/svg%3E");
  --pat-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='1.2' fill='%23E8B835' fill-opacity='0.5'/%3E%3C/svg%3E");
}

/* Urdu sub-label under an eyebrow / heading */
.urdu-sub { font-family: var(--font-urdu); color: var(--color-gold); font-weight: 500; font-size: 1.05rem; line-height: 2.2; display: block; opacity: 0.92; }
.section-head .urdu-sub { margin-top: 4px; }
.center .urdu-sub { text-align: center; }
.eyebrow.no-line::before { display: none; }

/* Decorative paisley / mehndi divider between sections */
.desi-divider { position: relative; height: 46px; display: flex; align-items: center; justify-content: center; gap: 16px; opacity: 0.8; }
.desi-divider::before, .desi-divider::after { content: ""; height: 1px; flex: 1; max-width: 240px; background: linear-gradient(90deg, transparent, rgba(125,200,50,0.35)); }
.desi-divider::after { background: linear-gradient(90deg, rgba(125,200,50,0.35), transparent); }
.desi-divider svg { width: 40px; height: 26px; color: var(--color-lime-600); flex: none; }

/* Jali pattern wash applied to a section */
.has-jali { position: relative; }
.has-jali::before { content: ""; position: absolute; inset: 0; background-image: var(--pat-jali); background-size: 60px 60px; opacity: 0.05; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }

/* ════════════════════════════════════════════════════════════
   HEADER — full width, category bar
   ════════════════════════════════════════════════════════════ */
/* Category bar (second row) — flat, full-width */
.cat-bar { background: var(--color-bg-card); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); position: relative; z-index: 90; }
.cat-bar__inner { display: flex; align-items: center; gap: 2px; height: 48px; overflow-x: auto; scrollbar-width: none; }
.cat-bar__inner::-webkit-scrollbar { display: none; }
.cat-bar a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 16px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; transition: color var(--dur-base) var(--ease-out); }
.cat-bar a:hover { color: var(--color-primary); }
.cat-bar__all { color: var(--color-lime-600) !important; }
.cat-bar__note { margin-left: auto; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-faint); white-space: nowrap; padding-left: 20px; }
@media (max-width: 980px) { .cat-bar { display: none; } }

/* ════════════════════════════════════════════════════════════
   HERO BANNER CAROUSEL — full-bleed, clickable slides
   ════════════════════════════════════════════════════════════ */
.hero-carousel { position: relative; overflow: hidden; background: var(--color-bg-dark); }
/* Warm glow from the lower-left + a bottom fade that bleeds the banner into
   the cream section below — one continuous space, not stacked blocks. */
.hero-carousel::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at 30% 60%, rgba(30,86,49,0.08) 0%, transparent 65%);
  box-shadow: inset 0 -70px 60px -10px rgba(252,252,250,0.96);
}
.hero-carousel__viewport { display: flex; transition: transform var(--dur-slow) var(--ease-out); will-change: transform; }
.hero-slide { position: relative; min-width: 100%; display: block; line-height: 0; }
.hero-slide img { width: 100%; height: clamp(360px, 46vw, 640px); object-fit: cover; object-position: center; display: block; }

.hero-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 48px; height: 48px; border-radius: var(--radius-btn); background: rgba(12,14,9,0.55); border: 1px solid var(--hairline); color: var(--color-gold-100); display: grid; place-items: center; transition: background var(--dur-base), color var(--dur-base); }
.hero-nav:hover { background: var(--color-primary); color: #fff; }
.hero-nav--prev { left: 18px; } .hero-nav--next { right: 18px; }
.hero-nav svg { width: 22px; height: 22px; }
.hero-dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 8px; }
.hero-dots button { width: 9px; height: 9px; border: none; background: rgba(242,245,238,0.4); cursor: pointer; transition: all var(--dur-base) var(--ease-out); }
.hero-dots button.is-active { width: 28px; background: var(--color-gold); }
@media (max-width: 600px) { .hero-nav { width: 40px; height: 40px; } .hero-slide img { height: clamp(300px, 64vw, 460px); } }

/* ════════════════════════════════════════════════════════════
   TRUST STRIP v2 — integrated, custom icons, jali wash
   ════════════════════════════════════════════════════════════ */
/* Printed tin-ribbon — double rules top/bottom, ✦ ornaments between items.
   Deliberately NOT a 4-box card row. */
.trust2 { background: var(--color-bg-tint); border-top: 3px double var(--hairline); border-bottom: 3px double var(--hairline); }
.trust2__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust2__item { display: flex; align-items: center; justify-content: center; gap: 13px; padding: 24px 20px; position: relative; }
.trust2__item:not(:last-child)::after {
  content: "✦"; position: absolute; right: -7px; top: 50%; transform: translateY(-50%);
  width: auto; height: auto; background: none;
  color: var(--color-sage); font-size: 0.8rem; line-height: 1;
}
/* Icons — ink stamps, not vector illustrations */
.trust2__ico { width: 33px; height: 33px; flex: none; display: inline-grid; place-content: center; color: var(--color-primary); opacity: 0.9; }
.trust2__ico svg { width: 26px; height: 26px; display: block; }
.trust2__item > div { display: flex; flex-direction: column; gap: 1px; }
/* Wide-tracked uppercase — signage secondary info */
.trust2__item strong { color: var(--text-primary); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.trust2__item span { color: var(--text-faint); font-size: 0.78rem; }
.trust2__item .udu { font-family: var(--font-urdu); color: var(--color-lime-600); font-size: 0.8rem; opacity: 0.95; line-height: 1.7; }
@media (max-width: 860px) { .trust2__grid { grid-template-columns: repeat(2, 1fr); } .trust2__item:nth-child(2)::after { display: none; } }
@media (max-width: 480px) { .trust2__grid { grid-template-columns: 1fr; } .trust2__item::after { display: none !important; } }

/* ════════════════════════════════════════════════════════════
   SPICES KA SAFAR — regional origins (replaces Masala Dabba)
   ════════════════════════════════════════════════════════════ */
.safar { position: relative; }
.safar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.safar-card { position: relative; height: 380px; border-radius: var(--radius-card); overflow: hidden; display: flex; align-items: flex-end; border: 1px solid var(--line); }
.safar-card:hover { border-color: var(--hairline); }
/* Archival color grade: one dark-olive multiply wash + crunched contrast
   unifies four different stock photographers under the brand */
.safar-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); filter: contrast(1.1) saturate(0.9); }
.safar-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(42,50,30,0.5); mix-blend-mode: multiply; pointer-events: none; }
.safar-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,18,0.1) 25%, rgba(20,22,18,0.55) 55%, rgba(20,22,18,0.96)); }
.safar-card__body { position: relative; z-index: 2; padding: var(--sp-6); width: 100%; transform: translateY(14px); transition: transform var(--dur-slow) var(--ease-out); }
/* NOTE: safar cards are photos with a dark bottom scrim — text stays LIGHT
   regardless of the page's light theme. */
.safar-card__udu { font-family: var(--font-urdu); color: var(--color-gold-100); font-size: 1.2rem; line-height: 1.6; }
/* Region name like the labels on old Pakistani food tins */
.safar-card h3 { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin: 2px 0 4px; }
.safar-card__spice { font-size: 0.84rem; color: rgba(255,255,255,0.82); }
.safar-card__go { display: block; overflow: hidden; max-height: 0; opacity: 0; color: var(--color-sage-100); font-size: 0.84rem; font-weight: 600; margin-top: 10px; transition: all var(--dur-slow) var(--ease-out); }
.safar-card:hover img { transform: scale(1.08); }
.safar-card:hover .safar-card__body { transform: translateY(0); }
.safar-card:hover .safar-card__go { max-height: 30px; opacity: 1; }
@media (max-width: 980px) { .safar__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .safar__grid { grid-template-columns: 1fr; } .safar-card { height: 300px; } }

/* Category count → plain label (kill the pill look). Sits on the dark image
   scrim, so it stays a LIGHT green. */
.cat-card__count { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-lime-100); font-weight: 700; }