/* cp-upgrade.css — fixes and polish from the September 2026 site audit.
   Loaded after bundle.css. theme.css loads asynchronously and can arrive
   later, so rules that must win are scoped under `html body`. */

:root {
  --cpbd-dark: #2C1810;
  --cpbd-mid: #4A2C1C;
  --cpbd-gold: #B8860B;
  --cpbd-gold-lt: #C9A84C;
  --cpbd-cream: #FDF6EC;
  --cpbd-cream2: #F5EDE0;
  --cpbd-border: #E5D8C8;
  --cpbd-muted: #7A6250;
  --cpbd-sale: #C0392B;
}

/* ── Header ─────────────────────────────────────────────────────────── */

/* Mobile logo: the theme set width:100% on a square image, so it rendered at
   165x165, covered the search bar and hung over the page while scrolling. */
html body .mobile_logo {
  width: auto !important;
  height: 40px !important;
  max-width: 140px;
  object-fit: contain;
}

/* Desktop logo was 50px — too small to register. */
@media (min-width: 768px) {
  html body .header_section .logo img {
    height: 60px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
  }
}

/* Desktop header scrolled away, leaving no search or cart. */
@media (min-width: 992px) {
  html body .header_section {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    transition: box-shadow .25s ease;
  }
  html body .header_section.cp-scrolled {
    box-shadow: 0 4px 18px rgba(44, 24, 16, .12);
  }
}

/* WhatsApp button sat on top of the 60px mobile bottom nav. */
@media (max-width: 767.98px) {
  html body #wa_float_btn { bottom: 76px !important; }
}

/* ── Hero ───────────────────────────────────────────────────────────── */

/* "Regular price ৳1,200" sticker was tied to no product. */
html body .cpb1-tag { display: none !important; }

/* Quick-category strip under the hero. The markup shipped without any CSS,
   so it rendered as plain text on desktop and mobile alike. */
html body .cp-mobile-hero { display: none; }
@media (max-width: 767.98px) {
  html body .cp-mobile-hero {
    display: block;
    padding: 14px 12px 8px;
    background: #fff;
  }
  html body .cp-mh-headline {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
  }
  html body .cp-mh-tag {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--cpbd-dark);
  }
  html body .cp-mh-sub { margin: 0; font-size: 12px; color: var(--cpbd-muted); }
  html body .cp-mh-cats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  html body .cp-mh-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 66px;
    padding: 10px 4px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: transform .15s ease;
  }
  html body .cp-mh-cat:active { transform: scale(.97); }
  html body .cp-mh-icon { font-size: 22px; line-height: 1; }
}

/* ── Section titles ─────────────────────────────────────────────────── */

html body .c_hpp_cat_title { border-bottom: 2px solid var(--cpbd-gold-lt) !important; }
html body .c_hpp_cat_title a.c_hp_main_cat {
  background: none !important;
  color: var(--cpbd-dark) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 0 0 8px !important;
}
html body .c_hpp_cat_title a.c_hp_main_cat::after,
html body .c_hpp_cat_title a.c_hp_main_cat::before { display: none !important; }
@media (max-width: 767.98px) {
  html body .c_hpp_cat_title a.c_hp_main_cat { font-size: 18px !important; }
}

/* ── Flash Sale countdown ───────────────────────────────────────────── */

html body .cp-flash-timer {
  background: var(--cpbd-dark) !important;
  border-radius: 10px !important;
  padding: 6px 14px !important;
  box-shadow: 0 2px 12px rgba(44, 24, 16, .25) !important;
}
html body .cp-flash-timer .cp-ft-num {
  color: var(--cpbd-gold-lt) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 800 !important;
}
html body .cp-flash-timer .cp-ft-lbl { color: rgba(253, 246, 236, .6) !important; letter-spacing: .08em; }
html body .cp-flash-timer .cp-ft-sep,
html body .cp-flash-timer .cp-ft-colon { color: var(--cpbd-gold-lt) !important; }

/* ── Product cards ──────────────────────────────────────────────────── */

html body .c_hpp_single_pro {
  border-radius: 12px;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2, 0, .1, 1), box-shadow .3s cubic-bezier(.2, 0, .1, 1);
}
html body .c_hpps_thumb { overflow: hidden; }
/* One shape and background for every product photo, whatever it was shot on. */
html body .c_hpps_thumb img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #fff;
  transition: transform .4s ease;
}
@media (hover: hover) {
  html body .c_hpp_single_pro:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(44, 24, 16, .14);
  }
  html body .c_hpp_single_pro:hover .c_hpps_thumb img { transform: scale(1.06); }
}
/* Shimmer while a lazy image is still the SVG placeholder. */
@keyframes cp-shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
html body .c_hpps_thumb img[src^="data:image/svg"] {
  background: linear-gradient(90deg, #f0e8dc 25%, #f9f3ec 50%, #f0e8dc 75%);
  background-size: 800px 100%;
  animation: cp-shimmer 1.4s ease-in-out infinite;
}

/* Add-to-cart ripple (the span is added by cp-upgrade.js). */
html body .cmn_add_cart_btn { position: relative; overflow: hidden; }
html body .cp-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transform: scale(0);
  animation: cp-ripple .6s linear;
  pointer-events: none;
}
@keyframes cp-ripple { to { transform: scale(4); opacity: 0; } }

/* ── "View all" buttons: one style everywhere ───────────────────────── */

html body .c_home_pro_section a.btn.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 26px !important;
  background: transparent !important;
  color: var(--cpbd-dark) !important;
  border: 2px solid var(--cpbd-dark) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
html body .c_home_pro_section a.btn.btn-primary::after { content: '\2192'; }
html body .c_home_pro_section a.btn.btn-primary:hover {
  background: var(--cpbd-dark) !important;
  color: var(--cpbd-cream) !important;
  transform: translateX(3px);
}

/* ── Why choose us ──────────────────────────────────────────────────── */

.cp-why { padding: 28px 0 8px; }
.cp-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cp-why-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--cpbd-border);
  border-radius: 14px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.cp-why-icon { font-size: 28px; line-height: 1; flex: 0 0 auto; }
.cp-why-item h3 {
  margin: 0 0 2px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--cpbd-dark);
}
.cp-why-item p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--cpbd-muted); }
@media (hover: hover) {
  .cp-why-item:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(44, 24, 16, .1); }
}
@media (max-width: 991.98px) { .cp-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) {
  .cp-why { padding: 18px 0 4px; }
  .cp-why-grid { gap: 10px; }
  .cp-why-item { flex-direction: column; text-align: center; padding: 14px 10px; gap: 6px; }
  .cp-why-item h3 { font-size: 13.5px; }
  .cp-why-item p { font-size: 11.5px; }
}

/* ── Trust bar above the footer ─────────────────────────────────────── */

.cp-trust {
  background: var(--cpbd-dark);
  color: var(--cpbd-cream);
  padding: 22px 0;
}
.cp-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.cp-trust-item { display: flex; align-items: center; gap: 12px; font-size: 13px; line-height: 1.4; }
.cp-trust-item strong { display: block; color: var(--cpbd-gold-lt); font-size: 14px; }
.cp-trust-icon { font-size: 26px; line-height: 1; }
@media (max-width: 767.98px) {
  .cp-trust { padding: 18px 0 84px; } /* clear the fixed bottom nav */
  .cp-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cp-trust-item { font-size: 12px; }
}

/* ── Scroll reveal (classes added by cp-upgrade.js, never in markup) ── */

.cp-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.cp-reveal.cp-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cp-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html body .c_hpp_single_pro,
  html body .c_hpps_thumb img,
  .cp-why-item { transition: none !important; }
  html body .c_hpps_thumb img[src^="data:image/svg"] { animation: none; }
}