/* Divyakriti Masala Shop — scoped styles (.dfm) */
.dfm{
  --dfm-e1:#00a86b; --dfm-e2:#0b8a58; --dfm-mint:#7ce0b5; --dfm-gold:#f7b733;
  --dfm-ink:#0f241c; --dfm-soft:#5b6b66;
  position:relative; width:100%; overflow:hidden;
  padding:clamp(52px,6.5vw,88px) clamp(16px,4vw,28px);
  background:
    radial-gradient(1100px 520px at 12% -12%, rgba(0,168,107,.09), transparent 62%),
    radial-gradient(900px 460px at 92% 112%, rgba(247,183,51,.11), transparent 62%),
    linear-gradient(180deg,#f8fcf9,#ffffff);
  color:var(--dfm-ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  text-align:left; -webkit-font-smoothing:antialiased;
}
.dfm,.dfm *,.dfm *::before,.dfm *::after{ box-sizing:border-box; }
.dfm img{ max-width:100%; }

.dfm .dfm-in{ position:relative; z-index:1; max-width:1180px; margin:0 auto; }

/* ---------- Header ---------- */
.dfm .dfm-head{ max-width:660px; margin:0 auto; text-align:center; }
.dfm .dfm-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:#8a5a00; background:#fff7e2; border:1px solid rgba(247,183,51,.55);
  padding:9px 16px; border-radius:999px;
}
.dfm .dfm-eyebrow svg{ width:13px; height:13px; fill:currentColor; }
.dfm .dfm-title{
  font-family:'Sora','Inter',sans-serif; font-weight:700;
  font-size:clamp(26px,3.3vw,40px); line-height:1.14; letter-spacing:-.015em;
  margin:16px 0 12px; color:var(--dfm-ink);
}
.dfm .dfm-title em{ font-style:normal; color:var(--dfm-e1); }
.dfm .dfm-sub{ font-size:15px; line-height:1.7; color:var(--dfm-soft); margin:0; }

/* ---------- Cart pill ---------- */
.dfm .dfm-tools{ display:flex; justify-content:flex-end; margin:18px 0 -6px; }
.dfm .dfm-cartlink{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:700; color:#087448; text-decoration:none;
  background:#fff; border:1px solid rgba(15,36,28,.08); padding:9px 14px 9px 12px;
  border-radius:999px; box-shadow:0 8px 20px rgba(15,36,28,.05);
  transition:transform .25s ease, box-shadow .25s ease;
}
.dfm .dfm-cartlink:hover{ transform:translateY(-2px); box-shadow:0 14px 26px rgba(15,36,28,.1); }
.dfm .dfm-cartlink svg{
  width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}
.dfm .dfm-cart-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:var(--dfm-e1); color:#fff; font-size:11px; font-weight:800; line-height:1;
}

/* ---------- Grid ---------- */
.dfm .dfm-grid{
  display:grid; gap:22px; margin-top:26px;
  grid-template-columns:repeat(var(--dfm-cols,3),minmax(0,1fr));
}

.dfm .dfm-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid rgba(15,36,28,.07); border-radius:22px;
  box-shadow:0 14px 34px rgba(15,36,28,.06);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.dfm .dfm-card:hover{
  transform:translateY(-6px); border-color:rgba(0,168,107,.22);
  box-shadow:0 26px 54px rgba(15,36,28,.13);
}

.dfm .dfm-media{
  position:relative; display:block; aspect-ratio:1/1; overflow:hidden;
  background:#eef6f1; text-decoration:none;
}
.dfm .dfm-media .dfm-img,
.dfm .dfm-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.dfm .dfm-card:hover .dfm-media img{ transform:scale(1.06); }

.dfm .dfm-flag{
  position:absolute; top:12px; left:12px; z-index:2;
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#eaf7f1; background:rgba(4,17,11,.72); border:1px solid rgba(255,255,255,.2);
  padding:7px 11px; border-radius:8px; backdrop-filter:blur(6px);
}
.dfm .dfm-sale{
  position:absolute; top:12px; right:12px; z-index:2;
  font-size:11px; font-weight:800; color:#231703;
  background:linear-gradient(135deg,var(--dfm-gold),#f0a11a);
  padding:7px 10px; border-radius:8px; box-shadow:0 8px 18px rgba(247,183,51,.35);
}

/* ---------- Card body ---------- */
.dfm .dfm-body{ display:flex; flex-direction:column; gap:9px; flex:1; padding:17px 18px 18px; }
.dfm .dfm-name{
  font-family:'Sora','Inter',sans-serif; font-size:16.5px; line-height:1.32;
  font-weight:700; margin:0; letter-spacing:-.01em;
}
.dfm .dfm-name a{ color:inherit; text-decoration:none; }
.dfm .dfm-name a:hover{ color:var(--dfm-e1); }
.dfm .dfm-desc{ font-size:13px; line-height:1.6; color:var(--dfm-soft); margin:0; }

.dfm .dfm-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:auto; padding-top:8px; flex-wrap:wrap;
}
.dfm .dfm-price{
  font-family:'Sora','Inter',sans-serif; font-size:16px; font-weight:700; color:var(--dfm-ink);
  display:inline-flex; align-items:baseline; gap:6px;
}
.dfm .dfm-price del{ color:#9aa9a2; font-weight:500; font-size:12.5px; text-decoration:line-through; }
.dfm .dfm-price ins{ text-decoration:none; color:var(--dfm-e1); }

.dfm .dfm-add{
  display:inline-flex; align-items:center; gap:8px;
  font-family:inherit; font-size:13px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--dfm-e1),var(--dfm-e2));
  padding:11px 16px; border:0; border-radius:11px;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  box-shadow:0 10px 22px -10px rgba(0,168,107,.75);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, opacity .25s ease;
}
.dfm .dfm-add svg{
  width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.dfm .dfm-add:hover{ transform:translateY(-2px); box-shadow:0 16px 28px -12px rgba(0,168,107,.85); }
.dfm .dfm-add:focus-visible{ outline:3px solid var(--dfm-gold); outline-offset:3px; }
.dfm .dfm-add.is-loading{ opacity:.65; pointer-events:none; }
.dfm .dfm-add.is-done{ background:linear-gradient(135deg,#0b8a58,#087448); }
.dfm .dfm-add--ghost{
  background:#f2f8f4; color:#087448; box-shadow:none; border:1px solid rgba(15,36,28,.1);
}
.dfm .dfm-add--ghost:hover{ background:#eaf5ee; }

.dfm .dfm-sold{
  font-size:12px; font-weight:800; color:#8a5a00;
  background:#fff7e2; border:1px solid rgba(247,183,51,.55);
  padding:9px 14px; border-radius:10px;
}

/* ---------- Footer link ---------- */
.dfm .dfm-more{ margin-top:30px; text-align:center; }
.dfm .dfm-more a{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:700; color:#087448; text-decoration:none;
  border-bottom:1px solid rgba(0,168,107,.35); padding-bottom:3px;
  transition:color .25s ease, border-color .25s ease, gap .25s ease;
}
.dfm .dfm-more a svg{
  width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease;
}
.dfm .dfm-more a:hover{ color:var(--dfm-e1); border-color:var(--dfm-e1); }
.dfm .dfm-more a:hover svg{ transform:translateX(3px); }

/* ---------- Toast ---------- */
.dfm-toast{
  position:fixed; left:50%; bottom:26px; z-index:2147483000;
  transform:translate(-50%,18px); opacity:0; pointer-events:none;
  display:inline-flex; align-items:center; gap:12px;
  background:#04110b; color:#eaf7f1; border:1px solid rgba(124,224,181,.28);
  padding:13px 18px; border-radius:14px; font-family:'Inter',sans-serif;
  font-size:13.5px; font-weight:600; line-height:1.4;
  box-shadow:0 24px 60px rgba(4,17,11,.45);
  transition:opacity .3s ease, transform .3s ease;
}
.dfm-toast.on{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.dfm-toast.is-err{ border-color:rgba(255,120,120,.45); }
.dfm-toast a{ color:var(--dfm-mint,#7ce0b5); font-weight:800; text-decoration:none; }
.dfm-toast a:hover{ text-decoration:underline; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .dfm .dfm-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
}
@media (max-width:560px){
  .dfm .dfm-grid{ grid-template-columns:1fr; }
  .dfm .dfm-tools{ justify-content:center; }
  .dfm .dfm-foot{ align-items:flex-start; }
  .dfm .dfm-add{ width:100%; justify-content:center; }
  .dfm .dfm-sold{ width:100%; text-align:center; }
}

@media (prefers-reduced-motion: reduce){
  .dfm *,.dfm *::before,.dfm *::after,
  .dfm-toast{ animation:none !important; transition:none !important; }
  .dfm .dfm-card:hover{ transform:none; }
  .dfm .dfm-card:hover .dfm-media img{ transform:none; }
}