/* =========
   Blinkit theme (yellow + black, green as subtle accent)
   ========= */
:root{
  --blinkit-yellow: #F7E300;       /* primary brand */
  --blinkit-yellow-600: #E6D600;   /* hover */
  --blinkit-yellow-700: #D1C300;   /* active */
  --blinkit-black:  #111111;       /* text on yellow */
  --blinkit-green:  #1f6f3f;       /* accent (you had earlier) */
  --blinkit-muted:  #4a4a4a;
  --surface: #ffffff;
  --border:  #e8e8e8;
  --shadow:  0 6px 18px rgba(0,0,0,.06);
  --focus:   rgba(16, 112, 224, .35); /* accessible focus ring */
}

/* =========
   Buttons
   Keep your class name working (.btn-Blinkit), and add a semantic alias (.btn-blinkit)
   ========= */
.btn-Blinkit,
.btn-blinkit{
  background: var(--blinkit-yellow);
  color: var(--blinkit-black);
  border: 1px solid var(--blinkit-yellow);
  font-weight: 700;
  transition: transform .06s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn-Blinkit:hover,
.btn-blinkit:hover{
  background: var(--blinkit-yellow-600);
  border-color: var(--blinkit-yellow-600);
  color: var(--blinkit-black);
  transform: translateY(-1px);
}
.btn-Blinkit:active,
.btn-blinkit:active{
  background: var(--blinkit-yellow-700);
  border-color: var(--blinkit-yellow-700);
  transform: translateY(0);
}
.btn-Blinkit:focus-visible,
.btn-blinkit:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--focus);
}

/* Outline variant (useful for secondary actions) */
.btn-outline-blinkit{
  background: transparent;
  color: var(--blinkit-yellow);
  border: 1.5px solid var(--blinkit-yellow);
  font-weight: 700;
  transition: background-color .15s ease, color .15s ease, transform .06s ease;
}
.btn-outline-blinkit:hover{
  background: var(--blinkit-yellow);
  color: var(--blinkit-black);
  transform: translateY(-1px);
}
.btn-outline-blinkit:active{
  background: var(--blinkit-yellow-700);
  border-color: var(--blinkit-yellow-700);
  color: var(--blinkit-black);
  transform: translateY(0);
}
.btn-outline-blinkit:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--focus);
}

/* Generic success button (green accent) if you still use .btn-dmart */
.btn-dmart{
  background: var(--blinkit-green);
  color:#fff;
  border: 1px solid var(--blinkit-green);
  transition: transform .06s ease, background-color .15s ease;
}
.btn-dmart:hover{ opacity:.95; transform: translateY(-1px); }
.btn-dmart:active{ transform:none; opacity:.9; }
.btn-dmart:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--focus); }

/* =========
   Product card & pricing
   ========= */
.product-card{ box-shadow: var(--shadow); border: 1px solid var(--border); }
.product-card .price{ font-weight: 800; color: var(--blinkit-black); }
.product-card .mrp{ text-decoration:line-through; color:#838383; font-size:.9rem; }
.badge-off{ background:#e11d48; color:#fff; font-weight:700; }

/* Links in footer */
.footer-link{ color: var(--blinkit-muted); text-decoration:none; }
.footer-link:hover{ text-decoration: underline; }

/* =========
   HERO (mobile responsive — full image visible on small screens)
   ========= */
.hero{ width:100%; height:90vh; overflow:hidden; }
.hero img{
  width:100%; height:100%;
  object-fit: cover;          /* desktop: immersive fill */
  object-position: center;
  display:block;
}

/* tablets (≤ 991px) */
@media (max-width: 991.98px){
  .hero{ height: 65vh; }
  .product-card .card-img-top{ height:150px; object-fit:cover; }
}

/* phones (≤ 767px) */
@media (max-width: 767.98px){
  .hero{ height: 52vh; }
  .product-card .card-img-top{ height:130px; }
  .carousel-control-prev,
  .carousel-control-next{ width:10%; }
}

/* very small phones (≤ 575px)
   → show full banner (no cropping) */
@media (max-width: 575.98px){
  .hero{ height: 46vh; background:#fff; }
  .hero img{
    object-fit: contain;      /* entire image visible on tiny screens */
    background:#fff;
  }
  .product-card .card-img-top{ height:120px; }
}

/* =========
   Forms / Inputs accessible focus
   ========= */
.form-control:focus,
.form-select:focus{
  border-color: var(--blinkit-yellow);
  box-shadow: 0 0 0 .2rem rgba(247, 227, 0, .35);
  outline: none;
}

/* =========
   Misc helpers
   ========= */
.text-brand{ color: var(--blinkit-yellow); }
.bg-brand{ background: var(--blinkit-yellow); color: var(--blinkit-black); }
.border-brand{ border-color: var(--blinkit-yellow)!important; }


@media (max-width: 575.98px) {
    .hero {
        height: 25vh!important;
        background: #fff;
    }
}


.offer-banner {
    text-align: center;
    margin-top: 20px;
    border-top: 1px solid #ddd;
    padding-top: 10px;
  }
  .offer-banner span {
    color: red;
    font-weight: bold;
    font-size:24px;
  }
  .product-card .price {
    font-weight: 800;
    color: #198754;
    font-size: 1.65rem!important;
    font-weight: 800;
}