/* ── Mobile ribbon ──────────────────────────────────────── */
.mobile-ribbon {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  background: #FDE9F4;
  border-top: 1px solid rgba(240,148,184,.25);
  box-shadow: 0 -4px 24px rgba(240,148,184,.2);
  padding: .625rem 0 calc(.625rem + env(safe-area-inset-bottom));
  justify-content: space-around;
  align-items: center;
}
@media (max-width: 768px) {
  .mobile-ribbon { display: flex !important; }
  body { padding-bottom: 75px; }
  .whatsapp-fab { bottom: 5.5rem !important; right: 1rem !important; }
}

.ribbon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  text-decoration: none;
  color: #B084A8;
  font-size: .6rem;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  transition: color .2s;
  flex: 1;
}
.ribbon-item.active { color: #C0102A; }
.ribbon-item.active .ribbon-icon {
  background: rgba(192,16,42,.1);
  color: #C0102A;
}

.ribbon-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: all .2s;
  position: relative;
  backdrop-filter: blur(4px);
}
.ribbon-item:hover .ribbon-icon { background: rgba(255,255,255,.9); }

.ribbon-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #C0102A;
  color: #fff;
  border-radius: 999px;
  font-size: .5rem;
  font-weight: 800;
  min-width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 1.5px solid #FDE9F4;
  font-family: 'Poppins', sans-serif;
}

/* ── Mobile navbar ──────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hide desktop nav links */
  .nav-links { display: none !important; }

  /* Navbar inner - logo left, icons+hamburger right */
  .navbar-inner {
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 1rem !important;
    justify-content: space-between !important;
  }

  /* Logo smaller on mobile */
  .logo img {
    height: 52px !important;
    max-height: 52px !important;
    max-width: 140px !important;
  }

  /* Navbar actions - right aligned */
  .navbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: .2rem !important;
    margin-left: auto !important;
  }

  /* Nav toggle (hamburger) */
  .nav-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(61,58,80,.06) !important;
    cursor: pointer !important;
    font-size: 1.1rem !important;
    color: #3D3A50 !important;
    order: 99 !important;
  }

  /* Mobile menu overlay */
  .mobile-nav {
    font-family: 'Poppins', sans-serif !important;
    font-size: .95rem !important;
    font-weight: 500 !important;
  }
  .mobile-nav a {
    font-family: 'Poppins', sans-serif !important;
    font-size: .95rem !important;
    font-weight: 500 !important;
    color: #3D3A50 !important;
    padding: .875rem 1.5rem !important;
    display: block !important;
    border-bottom: 1px solid rgba(61,58,80,.06) !important;
    text-decoration: none !important;
  }

  /* Muslin grid - 2 cols */
  .muslin-grid { grid-template-columns: repeat(2,1fr) !important; gap: .875rem !important; }

  /* Product grid - 2 cols */
  .grid-4, .grid-3 { grid-template-columns: repeat(2,1fr) !important; gap: .75rem !important; }

  /* Shop by collections - 1 col on mobile */
  #shopLayout { grid-template-columns: 1fr !important; }

  /* Footer grid */
  .footer-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; padding: 2rem 1rem 1rem !important; }
  .footer-newsletter { flex-direction: column !important; margin: 0 1rem 1.5rem !important; gap: 1rem !important; }
  .footer-nl-form { width: 100% !important; flex-direction: column !important; }
  .footer-bottom { flex-direction: column !important; align-items: flex-start !important; padding: 1rem !important; }

  /* Page header - single column */
  .container[style*="grid-template-columns:1fr auto 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .container[style*="grid-template-columns:1fr auto 1fr"] > div:nth-child(2) {
    display: none !important;
  }
}

/* ── Product page mobile fixes ───────────────────────────── */
@media (max-width: 768px) {

  /* Product layout - stack vertically */
  #productLayout {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* Product title - fix overflow */
  #productLayout h1 {
    font-size: 1.5rem !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Breadcrumb overflow */
  .breadcrumb, nav[aria-label="breadcrumb"] {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: .78rem !important;
  }

  /* Product image - full width */
  #mainMediaBox {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Size/color buttons grid */
  #productLayout div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: repeat(3,1fr) !important;
    gap: .4rem !important;
  }

  /* Add to cart button - full width */
  #productLayout .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Badges - prevent overflow */
  .badge, [style*="border-radius:999px"] {
    white-space: nowrap !important;
    font-size: .65rem !important;
  }

  /* Product gallery thumbnails */
  #galleryThumbs {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: .5rem !important;
  }

  /* Container no overflow */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* WhatsApp - above ribbon */
  .whatsapp-fab {
    bottom: 5rem !important;
    right: .75rem !important;
    padding: .875rem !important;
    border-radius: 50% !important;
    width: 52px !important;
    height: 52px !important;
    justify-content: center !important;
  }
  .whatsapp-fab span { display: none !important; }
}

/* Bundle section mobile */
@media (max-width: 768px) {
  .bundle-grid {
    grid-template-columns: 1fr !important;
  }
  .bundle-grid > div:last-child {
    min-height: 280px !important;
  }
}