/* ═══════════════════════════════════════════════════════════════
   HariyaliBasket — Product Card "D" (v4.22.0)
   Sirf .hb-card-d par lagta hai (assets/js/products.js → HBProducts.cardHtml).
   Brand tokens base.css se. Purane card styles (products.css / ui-refresh)
   ko yahan override kiya hai — un files ko chhua nahi.
   ═══════════════════════════════════════════════════════════════ */

.hb-pcard.hb-card-d{
  --hbd-card:   #eaf6ee;
  --hbd-line:   #d3ebdc;
  --hbd-ink:    var(--green-deep, #0d3320);
  --hbd-btn:    var(--green-mid, #25834f);
  --hbd-btn-sh: var(--green-deep, #0d3320);
  --hbd-chip:   #fdf0cf;
  --hbd-chip-sh:#f1d68f;
  position: relative;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  padding: 6px 6px 10px !important;
  background: var(--hbd-card) !important;
  border: 1px solid var(--hbd-line) !important;
  border-radius: 22px !important;
  box-shadow: 0 6px 16px rgba(13,51,32,.07) !important;
  overflow: visible !important;
  font-family: 'Nunito', system-ui, sans-serif;
  color: #1f2937;
  text-align: left;
  min-width: 0;
}
/* ui-refresh ka hover-uchhal is card par nahi (layout jump) */
.hb-pcard.hb-card-d:hover{ transform: none !important; box-shadow: 0 10px 24px rgba(13,51,32,.12) !important; }
.hb-pcard.hb-card-d:hover img{ transform: none !important; }

/* ── Photo ── */
.hb-card-d .hbd-media{ position: relative; }
.hb-card-d .hb-p-media-link{ display: block; text-decoration: none; }
.hb-card-d .hb-p-img{
  position: relative;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border: 4px solid #ffffff;
  border-radius: 18px !important;
  background: #ffffff;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  margin: 0 !important;
}
.hb-card-d .hb-p-img img{ width: 100% !important; height: 100% !important; object-fit: cover; display: block; border-radius: 0 !important; }
.hb-card-d .hb-p-emoji{ font-size: 52px; line-height: 1; }

/* Tircha sticker */
.hb-card-d .hbd-sticker{
  position: absolute; top: 9px; left: 7px; z-index: 2;
  transform: rotate(-6deg);
  height: 24px; padding: 0 10px;
  display: inline-flex; align-items: center;
  border-radius: 999px;
  background: var(--amber, #f59e0b); color: var(--hbd-ink);
  font-size: 11.5px; font-weight: 900; letter-spacing: .01em;
  box-shadow: 0 2px 0 rgba(13,51,32,.25);
  pointer-events: none;
}
.hb-card-d .hbd-sticker-fresh{ background: var(--green-deep, #0d3320); color: var(--green-glow, #4dda85); }
.hb-card-d .hbd-sticker-oos{ background: #4b5563; color: #ffffff; }

/* ❤️ Wishlist */
.hb-card-d .hbd-heart{
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%;
  background: #ffffff; color: #1f2937;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  cursor: pointer;
}
.hb-card-d .hbd-heart svg{ fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hb-card-d .hbd-heart.is-on{ color: var(--red, #ef4444); }
.hb-card-d .hbd-heart.is-on svg{ fill: currentColor; }
/* 44px tap area, button chhota dikhta rahe */
.hb-card-d .hbd-heart::after{ content: ''; position: absolute; inset: -4px; }

.hb-card-d .hbd-oos-note{
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2;
  height: 26px; padding: 0 12px; border-radius: 999px;
  background: rgba(31,41,55,.85); color: #ffffff;
  font-size: 11.5px; font-weight: 800; white-space: nowrap;
  display: flex; align-items: center;
}
.hb-card-d.hb-out-stock .hb-p-img img,
.hb-card-d.hb-out-stock .hb-p-emoji{ opacity: .45; filter: grayscale(.4); }

/* ── Text ── */
.hb-card-d .hbd-body{ display: flex; flex-direction: column; gap: 7px; padding: 0 4px; flex-grow: 1; min-width: 0; }
.hb-card-d .hb-p-name-link{ text-decoration: none; color: inherit; }
.hb-card-d .hbd-name{
  margin: 0 !important;
  font-family: 'Nunito', system-ui, sans-serif !important;
  font-weight: 900 !important; font-size: 16.5px !important; line-height: 20px !important;
  color: var(--hbd-ink) !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hb-card-d .hbd-desc{
  margin: -3px 0 0 !important; padding: 0 !important; background: none !important;
  font-size: 12.5px !important; font-weight: 700 !important; line-height: 16px;
  color: #3f6b52 !important;
}

/* ── Price ── */
.hb-card-d .hbd-price{ display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.hb-card-d .hbd-price-chip{
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 11px;
  border-radius: 10px;
  background: var(--hbd-chip);
  box-shadow: 0 2px 0 var(--hbd-chip-sh);
  transform: rotate(-2deg);
  max-width: 100%;
}
.hb-card-d .hbd-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--amber-deep, #d97706); flex-shrink: 0; }
.hb-card-d .hbd-sp{
  font-family: 'Sora', system-ui, sans-serif !important;
  font-weight: 800 !important; font-size: 18px !important;
  color: var(--hbd-ink) !important;
  font-variant-numeric: tabular-nums;
}
.hb-card-d .hbd-per{ font-size: 12px; font-weight: 800; color: #6b4b12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-card-d .hbd-price-meta{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; font-size: 12px; font-weight: 800; color: #4b5563; }
.hb-card-d .hbd-mrp{ text-decoration: line-through; color: #8a948c !important; font-size: 12px !important; font-weight: 700 !important; }
.hb-card-d .hbd-off{ color: #1f7a3e; }
.hb-card-d .hbd-rate{ color: #4b5563; }
.hb-card-d .hbd-muted{ font-size: 12.5px; font-weight: 700; color: #4b5563; background: none !important; padding: 0 !important; }

/* ── Size pills (hamara variant system) ── */
.hb-card-d .hbd-sizes{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin: 0 !important; }
.hb-card-d .hbd-sizes:has(> :nth-child(3)){ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hb-card-d .hbd-size{
  min-height: 34px; padding: 0 4px !important; margin: 0 !important;
  border-radius: 999px !important;
  border: 2px solid #bfe0cb !important;
  background: #ffffff !important; color: var(--green-dark, #1a5c38) !important;
  font-family: inherit; font-size: 12px !important; font-weight: 900 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.hb-card-d .hbd-size.active{ background: var(--hbd-ink) !important; border-color: var(--hbd-ink) !important; color: #ffffff !important; }

/* ── Add to cart / stepper ── */
.hb-card-d .hbd-cta{ margin-top: auto; padding-top: 2px; }
.hb-card-d .hbd-add{
  width: 100% !important; height: 46px !important; margin: 0 !important;
  border: 0 !important; border-radius: 999px !important;
  background: var(--hbd-btn) !important; color: #ffffff !important;
  font-family: inherit; font-weight: 900 !important; font-size: 15px !important; letter-spacing: .01em;
  display: flex !important; align-items: center; justify-content: center; gap: 7px;
  box-shadow: 0 4px 0 var(--hbd-btn-sh) !important;
  transition: transform .08s ease, box-shadow .08s ease;
  cursor: pointer;
}
.hb-card-d .hbd-add:active{ transform: translateY(3px) !important; box-shadow: 0 1px 0 var(--hbd-btn-sh) !important; }

.hb-card-d .hbd-stepwrap{ display: flex; flex-direction: column; gap: 6px; }
.hb-card-d .hbd-step{
  width: 100% !important; height: 46px !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 999px !important;
  background: var(--hbd-ink) !important; color: #ffffff !important;
  display: flex !important; align-items: center; justify-content: space-between;
  box-shadow: 0 4px 0 var(--hbd-btn) !important;
}
.hb-card-d .hbd-step .hb-qty-btn{
  width: 46px !important; height: 46px !important; min-width: 46px;
  border: 0 !important; background: transparent !important;
  color: var(--green-glow, #4dda85) !important;
  font-size: 22px !important; font-weight: 900 !important; line-height: 1;
  border-radius: 999px !important; cursor: pointer;
}
.hb-card-d .hbd-amt{
  font-family: 'Sora', system-ui, sans-serif !important;
  font-weight: 800 !important; font-size: 15.5px !important;
  color: #ffffff !important; background: none !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.hb-card-d .hbd-sub{ font-size: 11.5px; font-weight: 800; color: var(--green-dark, #1a5c38); text-align: center; }

.hb-card-d button:focus-visible,
.hb-card-d a:focus-visible{ outline: 3px solid var(--green-light, #38b26a); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  .hb-card-d .hbd-sticker, .hb-card-d .hbd-price-chip{ transform: none; }
  .hb-card-d .hbd-add{ transition: none; }
}
/* Chhoti screen (320–359px): thoda tight */
@media (max-width: 359px){
  .hb-card-d .hbd-name{ font-size: 15px !important; }
  .hb-card-d .hbd-add{ font-size: 14px !important; }
  .hb-card-d .hbd-sp{ font-size: 16.5px !important; }
}