/* ================================================================
   PRIDE OF BIHAR - STOREFRONT LUXURY ENHANCEMENT STYLESHEET
   Fixes: Hero Slideshow, Logo, Product Card Layout & Cart Drawer
   ================================================================ */

/* ── 1. GLOBAL & HEADER LOGO ──────────────────────────────────── */
.header__heading-logo,
.header__heading-logo-wrapper img,
.header__heading-link img {
  height: 46px !important;
  max-height: 46px !important;
  width: auto !important;
  object-fit: contain !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.header__heading-link {
  display: flex !important;
  align-items: center !important;
}

/* ── 2. HERO SLIDESHOW ────────────────────────────────────────── */
.slideshow.banner {
  min-height: 420px !important;
  background-color: #f4f6f5 !important;
}

.slideshow__slide .banner__media {
  min-height: 420px !important;
  background-size: cover !important;
  background-position: center !important;
}

.slideshow__slide picture img {
  width: 100% !important;
  height: 100% !important;
  max-height: 480px !important;
  object-fit: cover !important;
  display: block !important;
}

/* ── 3. PRODUCT CARDS & GRID OVERRIDE (ELIMINATES VERTICAL GAP) ─ */
.menu-product-grid,
ul.product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 20px !important;
  padding: 10px 0 30px !important;
  margin: 0 !important;
  list-style: none !important;
}

.menu-product-grid .grid__item,
ul.product-grid .grid__item {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.card-wrapper,
.product-card-wrapper {
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid #eef0f2 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.card-wrapper:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1) !important;
  border-color: #d1fae5 !important;
}

.card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #ffffff !important;
}

/* Image Container */
.card__inner {
  position: relative !important;
  width: 100% !important;
  height: 230px !important;
  min-height: 230px !important;
  background: #fbfdfc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-bottom: 1px solid #f3f4f6 !important;
}

.card__inner:before {
  display: none !important;
}

.card__inner > a,
.card__inner a {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  text-decoration: none !important;
}

.card__inner .card__media,
.card__inner .media {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.card__inner img,
.card__media img,
.card__inner .media > img {
  max-height: 200px !important;
  width: auto !important;
  max-width: 90% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: auto !important;
  position: static !important;
  transition: transform 0.3s ease !important;
}

.card__inner .media.media--hover-effect > img + img {
  display: none !important;
}

.card-wrapper:hover .card__inner img {
  transform: scale(1.04) !important;
}

/* Badges - Plain Understated Luxury */
.custom-badge,
.sale-badge {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 5 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  color: #0b3d2e !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 3px 9px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(11, 61, 46, 0.18) !important;
}

.sale-badge {
  left: auto !important;
  right: 10px !important;
  background: #0b3d2e !important;
  color: #e2c077 !important;
  border-color: rgba(226, 192, 119, 0.4) !important;
}

/* Content & Information */
.card__content {
  padding: 14px 16px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  gap: 6px !important;
}

.card-sections-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.quick-add.quick-add-top {
  display: flex !important;
  justify-content: flex-end !important;
  margin: 0 0 4px !important;
}

.quick-add.quick-add-top button,
.blinkit-variant-btn {
  background: #00584b !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 6px 18px !important;
  border-radius: 20px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 3px 8px rgba(0, 88, 75, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

.quick-add.quick-add-top button:hover,
.blinkit-variant-btn:hover {
  background: #00443a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 12px rgba(0, 88, 75, 0.4) !important;
}

.card__heading {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  line-height: 1.35 !important;
  margin: 2px 0 4px !important;
  min-height: auto !important;
  max-height: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.card-rating-section {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #666 !important;
}

.card-price-section {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  margin-top: 6px !important;
  padding-top: 6px !important;
  border-top: 1px dashed #f0f0f0 !important;
}

.price-item--sale,
.price-item--regular {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #00584b !important;
}

.price-item--mrp {
  font-size: 13px !important;
  color: #9ca3af !important;
  text-decoration: line-through !important;
  margin-right: 6px !important;
}

/* ── 4. CATEGORY TABS ─────────────────────────────────────────── */
.menu-collection-tab.active,
.collection-tab-btn.active {
  background: #00584b !important;
  color: #ffffff !important;
  border-color: #00584b !important;
}

/* ── 5. ADMIN LAUNCHER BADGE (HIDDEN ON PUBLIC STOREFRONT) ─────── */
#pob-admin-badge {
  display: none !important;
}

/* ── 6. HEADER & MOBILE DRAWER STABILITY ───────────────────────── */
header-drawer {
  display: none !important;
}

@media screen and (max-width: 989px) {
  header-drawer {
    display: flex !important;
    align-items: center !important;
  }
}

/* Ensure menu-drawer is NEVER in normal static flow */
.menu-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 320px !important;
  max-width: 85vw !important;
  height: 100vh !important;
  background: #ffffff !important;
  z-index: 999999 !important;
  transform: translateX(-100%) !important;
  visibility: hidden !important;
  opacity: 0 !important;
  box-shadow: 4px 0 25px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease, opacity 0.3s ease !important;
  overflow-y: auto !important;
}

details[open] > .menu-drawer {
  transform: translateX(0) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media screen and (min-width: 990px) {
  .menu-drawer-container {
    display: none !important;
  }
  .header__inline-menu {
    display: flex !important;
    align-items: center !important;
  }
}

/* Ensure header links look clean and styled */
.list-menu__item,
.header__menu-item {
  text-decoration: none !important;
  color: #1a1a1a !important;
  font-family: 'Figtree', 'Jost', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.list-menu__item:hover,
.header__menu-item:hover {
  color: #00584b !important;
}

/* Announcement Bar Clean Display */
.announcement-bar-section {
  background: #00584b !important;
  color: #ffffff !important;
  text-align: center !important;
  font-family: 'Figtree', sans-serif !important;
}

.announcement-bar__message {
  font-size: 13px !important;
  color: #ffffff !important;
  letter-spacing: 0.5px !important;
  margin: 0 !important;
  padding: 4px 0 !important;
}
/* ── 7. AUTHENTIC ANVESHAN LUXURY FOOTER DESIGN ───────────────── */
footer.footer,
.footer {
  background: linear-gradient(180deg, #004d41 0%, #00332a 100%) !important;
  color: #ffffff !important;
  position: relative !important;
  overflow: hidden !important;
  margin-top: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: 'Figtree', 'Jost', -apple-system, sans-serif !important;
}

footer.footer > .footer__content-top,
footer.footer > .footer__content-bottom,
.footer .footer__content-top,
.footer .footer__content-bottom {
  position: relative !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
}

.footer__content-top.page-width,
.footer__content-top {
  display: block !important;
  max-width: 1240px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 48px 24px 32px !important;
  box-sizing: border-box !important;
}

.footer-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  padding: 0 0 28px !important;
  border-bottom: 1px solid rgba(208, 189, 128, 0.28) !important;
  margin-bottom: 36px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.footer-logo {
  display: flex !important;
  align-items: center !important;
}

.footer-logo img {
  height: 48px !important;
  max-height: 48px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  display: inline-block !important;
}

.footer-cert-badges {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.footer-cert-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(208, 189, 128, 0.35) !important;
  padding: 7px 16px !important;
  border-radius: 20px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #d0bd80 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transition: all 0.25s ease !important;
}

.footer-cert-badge:hover {
  background: rgba(208, 189, 128, 0.15) !important;
  border-color: #d0bd80 !important;
  transform: translateY(-1px) !important;
}

/* 4-Column Responsive Layout */
footer.footer .footer__blocks-wrapper,
.footer .footer__blocks-wrapper,
.footer__blocks-wrapper.grid {
  display: grid !important;
  grid-template-columns: 1.15fr 1.15fr 1.35fr 1.85fr !important;
  column-gap: 36px !important;
  row-gap: 32px !important;
  width: 100% !important;
  margin: 0 0 36px 0 !important;
  padding: 0 !important;
  list-style: none !important;
  align-items: start !important;
  justify-content: stretch !important;
  box-sizing: border-box !important;
}

@media screen and (max-width: 989px) {
  footer.footer .footer__blocks-wrapper,
  .footer .footer__blocks-wrapper,
  .footer__blocks-wrapper.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 28px !important;
    row-gap: 32px !important;
  }
}

@media screen and (max-width: 640px) {
  footer.footer .footer__blocks-wrapper,
  .footer .footer__blocks-wrapper,
  .footer__blocks-wrapper.grid {
    grid-template-columns: 1fr !important;
    row-gap: 24px !important;
  }
}

/* Every single footer column block must span full cell and NEVER shrink into narrow strips */
footer.footer .footer-block,
footer.footer .footer-block.grid__item,
footer.footer .footer-block--menu,
footer.footer .footer-block._need,
footer.footer .footer-block._need-help,
footer.footer .footer-block._office,
footer.footer .footer-block._services,
footer.footer .footer-block._policies,
footer.footer .footer-block._,
.footer .footer-block,
.footer-block {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Column Headings */
footer.footer .footer-block__heading,
.footer .footer-block__heading,
.footer h4.footer-block__heading,
.footer-block__heading {
  font-family: 'Roboto Slab', 'Jost', serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #d0bd80 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  margin: 0 0 16px 0 !important;
  line-height: 1.3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Link Lists */
footer.footer .footer-block__details-content,
.footer .footer-block__details-content,
.footer-block__details-content {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

footer.footer .footer-block__details-content li,
.footer .footer-block__details-content li,
.footer-block__details-content li {
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: block !important;
}

footer.footer .footer-block__details-content a.list-menu__item--link,
footer.footer .footer-block__details-content a,
.footer .footer-block__details-content a {
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  word-break: normal !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
}

footer.footer .footer-block__details-content a:hover,
.footer .footer-block__details-content a:hover {
  color: #d0bd80 !important;
  transform: translateX(4px) !important;
}

@media screen and (max-width: 749px) {
  footer.footer .footer-block--menu ul,
  .footer .footer-block--menu ul {
    display: block !important;
  }
}

/* Need Help Button */
.need-help {
  margin-bottom: 16px !important;
  display: block !important;
}

.need-help .btn {
  background: #d0bd80 !important;
  color: #00443a !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-radius: 25px !important;
  padding: 10px 24px !important;
  display: inline-block !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s ease !important;
  border: none !important;
  width: auto !important;
  max-width: none !important;
}

.need-help .btn:hover {
  background: #e8d998 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important;
}

/* Social icons */
ul.footer__list-social {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 !important;
  max-width: none !important;
}

ul.footer__list-social li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

ul.footer__list-social li a {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #d0bd80 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  padding: 0 !important;
}

ul.footer__list-social li a:hover {
  background: #ffffff !important;
  transform: translateY(-2px) scale(1.05) !important;
}

ul.footer__list-social li a svg {
  width: 17px !important;
  height: 17px !important;
  fill: #00443a !important;
  color: #00443a !important;
  display: block !important;
}

/* App Download Badges */
.app-download {
  margin-top: 18px !important;
  display: block !important;
}

.app-download h5 {
  color: #d0bd80 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin: 0 0 8px 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Newsletter Section */
.footer-block__newsletter {
  width: 100% !important;
  margin-top: 14px !important;
}

.footer-block__newsletter form {
  position: relative !important;
  width: 100% !important;
  max-width: 380px !important;
  margin-top: 10px !important;
}

.footer-block__newsletter .field {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.footer-block__newsletter input.field__input {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(208, 189, 128, 0.4) !important;
  border-radius: 25px !important;
  padding: 12px 48px 12px 18px !important;
  font-size: 13px !important;
  color: #ffffff !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.footer-block__newsletter input.field__input::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.footer-block__newsletter input.field__input:focus {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: #d0bd80 !important;
  box-shadow: 0 0 12px rgba(208, 189, 128, 0.3) !important;
}

.footer-block__newsletter button.field__button {
  position: absolute !important;
  right: 5px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  background: #d0bd80 !important;
  border: none !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.footer-block__newsletter button.field__button:hover {
  background: #ffffff !important;
  transform: translateY(-50%) scale(1.05) !important;
}

.footer-block__newsletter button.field__button svg {
  fill: #00443a !important;
  width: 14px !important;
  height: 14px !important;
  transform: rotate(-90deg) !important;
  display: block !important;
}

/* Background Silhouette Art */
.footer-bg-image {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-height: 220px !important;
  object-fit: cover !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.15 !important;
}

/* Bottom Copyright Section */
footer.footer .footer__content-bottom,
.footer .footer__content-bottom {
  border-top: 1px solid rgba(208, 189, 128, 0.25) !important;
  padding: 22px 0 28px !important;
  margin-top: 20px !important;
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
}

.footer__content-bottom-wrapper {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  box-sizing: border-box !important;
}

.footer__copyright {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  text-align: left !important;
  height: auto !important;
  margin: 0 !important;
}

.copyright__content {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.footer-bottom-trust {
  font-size: 12px !important;
  color: #d0bd80 !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
}


/* ═════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION BAR (< 768px) & SINGLE WHATSAPP FLOAT
   ═════════════════════════════════════════════════════════════ */
@media screen and (max-width: 768px) {
  .mobile-bottom-nav,
  #mobile-bottom-nav,
  #shopify-section-sections--mobile-menu {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 60px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid #e8e2d5 !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
    z-index: 99990 !important;
    padding: 0 !important;
    margin: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  
  .mobile-bottom-nav ul,
  #mobile-bottom-nav ul {
    display: flex !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 60px !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-around !important;
  }
  
  .mobile-bottom-nav li,
  #mobile-bottom-nav li {
    flex: 1 !important;
    height: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .mobile-bottom-nav a,
  #mobile-bottom-nav a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    gap: 3px !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1px !important;
    transition: color 0.15s ease, transform 0.15s ease !important;
    background: transparent !important;
  }
  
  .mobile-bottom-nav a svg,
  #mobile-bottom-nav a svg {
    width: 22px !important;
    height: 22px !important;
    fill: currentColor !important;
    transition: transform 0.2s ease !important;
  }
  
  .mobile-bottom-nav li.is-active a,
  .mobile-bottom-nav li.active a,
  #mobile-bottom-nav li.is-active a,
  #mobile-bottom-nav li.active a,
  .mobile-bottom-nav a:hover,
  #mobile-bottom-nav a:hover {
    color: #00584b !important;
  }
  
  .mobile-bottom-nav li.is-active a svg,
  .mobile-bottom-nav li.active a svg,
  #mobile-bottom-nav li.is-active a svg,
  #mobile-bottom-nav li.active a svg {
    transform: scale(1.1) !important;
  }
  
  .mobile-bottom-nav li.is-active::before,
  .mobile-bottom-nav li.active::before,
  #mobile-bottom-nav li.is-active::before,
  #mobile-bottom-nav li.active::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 32px !important;
    height: 3px !important;
    background: #00584b !important;
    border-radius: 0 0 3px 3px !important;
  }

  .mob-nav-badge {
    position: absolute !important;
    top: 6px !important;
    right: 22% !important;
    background: #dc2626 !important;
    color: #ffffff !important;
    font-size: 0.62rem !important;
    font-weight: 900 !important;
    min-width: 16px !important;
    height: 16px !important;
    line-height: 14px !important;
    border-radius: 10px !important;
    padding: 0 4px !important;
    text-align: center !important;
    border: 1.5px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
  }
  
  body {
    padding-bottom: 68px !important;
  }

  /* Position WhatsApp on the LEFT SIDE on mobile to guarantee ZERO overlap with Account icon (on the right) */
  .whatsapp-float,
  #wa-float-btn,
  a.whatsapp-float {
    position: fixed !important;
    bottom: 78px !important;
    left: 16px !important;
    right: auto !important;
    width: 48px !important;
    height: 48px !important;
    z-index: 99995 !important;
  }
}

@media screen and (min-width: 769px) {
  .mobile-bottom-nav,
  #mobile-bottom-nav,
  #shopify-section-sections--mobile-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  body {
    padding-bottom: 0 !important;
  }

  .whatsapp-float,
  #wa-float-btn {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    left: auto !important;
    width: 56px !important;
    height: 56px !important;
  }
}

/* ── EXACTLY ONE WHATSAPP FLOATING BUTTON (SITEWIDE) ────────── */
.whatsapp-float,
#wa-float-btn {
  position: fixed !important;
  background: #25D366 !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.45) !important;
  z-index: 99995 !important;
  text-decoration: none !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.whatsapp-float:hover,
#wa-float-btn:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.65) !important;
}

/* ── Mobile Menu & Drawer Fallback Fix ───────────────────────── */
.mobile-menu-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 99998 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

.mobile-menu-overlay.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.mobile-menu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: min(320px, 85vw) !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #ffffff !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateX(-100%) !important;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 6px 0 40px rgba(0,0,0,0.22) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.mobile-menu.open {
  transform: translateX(0) !important;
}

@media screen and (min-width: 990px) {
  .mobile-menu,
  .mobile-menu-overlay {
    display: none !important;
  }
}

/* Ensure all footer blocks and triggers are 100% visible and never hidden by scroll triggers */
footer.footer .scroll-trigger,
.footer .scroll-trigger,
footer.footer .scroll-trigger.animate--slide-in,
.footer .scroll-trigger.animate--slide-in,
footer.footer .scroll-trigger.animate--fade-in,
.footer .scroll-trigger.animate--fade-in {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  visibility: visible !important;
}

/* ── TOAST NOTIFICATION ─────────────────────────────────────────── */
#pob-toast {
  position: fixed !important;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(120%) !important;
  background: #1a2e1c !important;
  color: #ffffff !important;
  padding: 12px 22px !important;
  border-radius: 50px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.3) !important;
  z-index: 3000000 !important;
  white-space: nowrap !important;
  max-width: 90vw !important;
  text-align: center !important;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.35s ease !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
#pob-toast.show {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
}
#pob-toast.success { background: #1a6b44 !important; }
#pob-toast.error { background: #c0392b !important; }
#pob-toast.info { background: #1a3a6b !important; }

/* ── LOADING SKELETON ─────────────────────────────────────────── */
.skeleton-card {
  background: linear-gradient(90deg, #f0ede8 25%, #e8e3da 50%, #f0ede8 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 14px;
  min-height: 280px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── BREADCRUMB ─────────────────────────────────────────────────── */
.pob-breadcrumb {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px 6px !important;
  padding: 10px 0 !important;
  margin-bottom: 4px !important;
  font-size: 0.82rem !important;
  color: #888 !important;
  list-style: none !important;
}
.pob-breadcrumb a {
  color: #00584b !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
.pob-breadcrumb a:hover { text-decoration: underline !important; }
.pob-breadcrumb-sep { color: #ccc !important; }

/* ── PAGE TRANSITION ─────────────────────────────────────────────── */
.page-transition-enter {
  animation: pageEnter 0.4s ease forwards;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── FORM VALIDATION STATES ──────────────────────────────────────── */
input:user-invalid,
textarea:user-invalid,
select:user-invalid {
  border-color: #e53e3e !important;
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.15) !important;
}
input:user-valid,
textarea:user-valid {
  border-color: #38a169 !important;
}

/* ── ACCESSIBILITY: FOCUS VISIBLE ────────────────────────────────── */
*:focus-visible {
  outline: 2px solid #00584b !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* ── BACK TO TOP BUTTON ──────────────────────────────────────────── */
#back-to-top {
  position: fixed !important;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  right: 16px !important;
  width: 44px !important;
  height: 44px !important;
  background: #00584b !important;
  color: white !important;
  border: none !important;
  border-radius: 50% !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition: opacity 0.3s, transform 0.3s !important;
  pointer-events: none !important;
}
#back-to-top.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
#back-to-top:hover {
  background: #004d41 !important;
  transform: translateY(-2px) !important;
}

/* ── SUBSCRIPTION SUCCESS STATE ──────────────────────────────────── */
.contact-subscribed-banner {
  background: linear-gradient(135deg, #004d41, #00695c) !important;
  color: white !important;
  padding: 16px 24px !important;
  border-radius: 12px !important;
  text-align: center !important;
  margin: 20px 0 !important;
  font-weight: 700 !important;
  display: none !important;
}

/* ── PREMIUM IMAGE LAZY LOAD ─────────────────────────────────────── */
img[loading="lazy"] {
  background: #f5f0e8;
}
img.lazy-loaded {
  animation: fadeIn 0.4s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── GLOBAL BUTTON HOVER IMPROVEMENTS ───────────────────────────── */
button, [role="button"] {
  cursor: pointer !important;
}
.btn, button.btn {
  transition: all 0.2s ease !important;
}

/* ── MOBILE FIXES: SAFE AREA & OVERFLOW ─────────────────────────── */
body {
  overscroll-behavior-y: none;
}
.modal-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
}

/* ── PRINT STYLES ────────────────────────────────────────────────── */
@media print {
  .mobile-nav-bar,
  .mobile-menu-overlay,
  .mobile-menu,
  #pob-toast,
  #back-to-top,
  .whatsapp-fab,
  .cart-drawer { display: none !important; }
  body { font-size: 12pt !important; }
}

/* ── UNIVERSAL MOBILE VIEWPORT HARDENING (< 768px) ──────────────── */
@media screen and (max-width: 768px) {
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative !important;
    -webkit-text-size-adjust: 100% !important;
  }
  
  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
  }

  button, 
  a.btn, 
  .btn,
  .cart-btn-nav,
  .hamburger-btn {
    min-height: 42px;
    touch-action: manipulation;
  }

  img, video, iframe {
    max-width: 100% !important;
    height: auto;
  }

  .cart-drawer,
  #cart-drawer {
    max-width: 100vw !important;
    width: 100vw !important;
  }

  .auth-modal-content,
  #auth-modal-box {
    width: 92% !important;
    max-width: 380px !important;
    margin: auto !important;
  }
}