/*
 * Targeted visual-consistency fixes layered over the vendored style.css.
 * Scope: small, reversible overrides — no structural changes.
 */

/* ── Quick-add buttons on product cards: brand green, not black ──────────
 * The vendored base `.btn-cart { background: var(--text) !important }` forced
 * every card's "Add" button to pure black, which clashed with the green/gold
 * palette (the PDP's own "Add to Cart" is green). Bring the cards in line. */
.product-card .btn-cart.quickadd,
.gnp-best-card .btn-cart.quickadd,
.m-best-card .btn-cart.quickadd,
.m-daraz-card .btn-cart.quickadd {
  background: var(--forest, #2f6e4c) !important;
  color: #fff !important;
}
.product-card .btn-cart.quickadd:hover,
.gnp-best-card .btn-cart.quickadd:hover,
.m-best-card .btn-cart.quickadd:hover,
.m-daraz-card .btn-cart.quickadd:hover {
  background: var(--forest-deep, #0e3326) !important;
}

/* ── Bestsellers / mobile "Bestseller · New" badge ──────────────────────
 * It was picking up the 17px round notification-dot style from the global
 * `.badge`, cropping the word into a clipped circle. Restore it to a label. */
.gnp-best-card .badge,
.m-best-card .badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 4px 9px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  background: var(--forest-deep, #0e3326) !important;
  color: #fff !important;
}
.gnp-best-card .badge.new,
.m-best-card .badge.new {
  background: var(--gold, #b99a4b) !important;
  color: var(--forest-deep, #0e3326) !important;
}

/* ── Bestsellers rail: fill the row instead of leaving a large void ──────
 * The rail is a fixed-228px flex row built for a long product list; with the
 * handful of homepage picks it left ~half the width empty. Let the cards
 * flex to share the space (it still scrolls if the list grows). */
#gnpBestGrid {
  justify-content: flex-start;
}
#gnpBestGrid .gnp-best-card {
  flex: 1 1 220px !important;
  width: auto !important;
  max-width: 300px !important;
}

/* ── Nav search button: centre the magnifier icon ─────────────────────
 * The vendored rules give the round button `display:flex; align-items:center`
 * but never `justify-content`, so the icon sat left-of-centre. */
.topnav-search button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.topnav-search button svg {
  display: block !important;
}

/* ── "Choose a category" carousel: smooth the coverflow motion (the JS
      now transforms each card individually instead of spinning a ring). */
.cat3d-item {
  transition: transform 0.6s cubic-bezier(0.22, 0.9, 0.25, 1);
  will-change: transform;
}

/* ── Hero: show the live copy over the photo ───────────────────────────
 * The vendored CSS hid `.hero-slide-content` because the original banners
 * had their text baked into the image. With real photos we want the live
 * heading / sub / CTA back, over a left-weighted dark scrim for contrast. */
.hero-slide-content {
  display: flex !important;
}
.hero-slide-overlay {
  background: linear-gradient(
    95deg,
    rgba(9, 20, 14, 0.82) 0%,
    rgba(9, 20, 14, 0.62) 38%,
    rgba(9, 20, 14, 0.28) 68%,
    rgba(9, 20, 14, 0.05) 100%
  ) !important;
}
.hero-slide-title {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
/* the vendored CSS also neutralised the CTA to a dark pill — restore the
   brand-gold button the hero design intends */
.hero-slide-btn {
  background: var(--gold, #b99a4b) !important;
  color: var(--forest-deep, #0e3326) !important;
  font-weight: 800 !important;
}
.hero-slide-btn:hover {
  background: var(--gold-lt, #e8d9ae) !important;
}

/* ── Bestsellers section container ─────────────────────────────────────
 * The vendored CSS has no base `.wrap` rule — only `.cat3d-wrap .wrap` and
 * `.split2-wrap .wrap`. The plain `.gnp-gal-split-section .wrap` (Bestsellers
 * & New Arrivals) therefore had no max-width / gutter and ran full-bleed.
 * Give it the same container the sibling sections use. */
.gnp-gal-split-section .wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2.5rem;
}