/* ===== MAMACITTA STORE - CSS FIXES & OVERRIDES ===== */
/* Version: 3.1 - Auto-Fit Any Phone (2026-03-14) */

/* ===== CRITICAL: AUTO-FIT ANY SCREEN ===== */
*, *::before, *::after {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

html {
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100% !important;
}

body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0 !important;
}

/* Make every container respect viewport */
div, section, main, header, footer, nav, article, aside {
  max-width: 100vw !important;
}

/* All images auto-fit */
img, video, svg, canvas, iframe {
  max-width: 100% !important;
  height: auto !important;
}

/* Prevent any element from causing horizontal scroll */
.container, [class*="container"], [class*="max-w-"] {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* ===== FIX: Horizontal Scroll for Category Filters ===== */
.scrollbar-hide,
.overflow-x-auto,
[class*="scrollbar-hide"],
[class*="overflow-x-auto"] {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100vw !important;
}

.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ===== REDESIGN: Category Button Styles ===== */

/* Container - clean centered layout */
.scrollbar-hide.flex.gap-2 {
  gap: 10px !important;
  padding: 14px 20px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  background: linear-gradient(180deg, #f7f8fa 0%, #eef0f4 100%) !important;
  border-radius: 20px !important;
  margin: 4px 12px 12px !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* Hide scroll arrows since we're wrapping */
button[class*="absolute"][class*="left-0"],
button[class*="absolute"][class*="right-0"] {
  display: none !important;
}

/* All category buttons - refined base style */
.scrollbar-hide.flex.gap-2 > button {
  border-radius: 12px !important;
  padding: 8px 16px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  border: 1.5px solid transparent !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;
  transform: scale(1) !important;
  white-space: nowrap !important;
}

/* Hover effect */
.scrollbar-hide.flex.gap-2 > button:hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08) !important;
}

/* Active/pressed */
.scrollbar-hide.flex.gap-2 > button:active {
  transform: translateY(0) scale(0.97) !important;
}

/* "All" button - premium dark gradient */
.scrollbar-hide.flex.gap-2 > button:first-child {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
  color: white !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 3px 12px rgba(15, 52, 96, 0.35), 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* Baby Products - soft pink gradient */
.scrollbar-hide.flex.gap-2 > button:nth-child(2) {
  background: linear-gradient(135deg, #fff0f3 0%, #ffd6e0 100%) !important;
  color: #c2185b !important;
  border-color: rgba(194, 24, 91, 0.12) !important;
}

/* Clothes - elegant purple */
.scrollbar-hide.flex.gap-2 > button:nth-child(3) {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%) !important;
  color: #7b1fa2 !important;
  border-color: rgba(123, 31, 162, 0.12) !important;
}

/* Smart Gadgets - tech blue */
.scrollbar-hide.flex.gap-2 > button:nth-child(4) {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
  color: #1565c0 !important;
  border-color: rgba(21, 101, 192, 0.12) !important;
}

/* Hair & Beauty - warm rose */
.scrollbar-hide.flex.gap-2 > button:nth-child(5) {
  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%) !important;
  color: #c62828 !important;
  border-color: rgba(198, 40, 40, 0.12) !important;
}

/* Bales - warm amber */
.scrollbar-hide.flex.gap-2 > button:nth-child(6) {
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%) !important;
  color: #e65100 !important;
  border-color: rgba(230, 81, 0, 0.12) !important;
}

/* Essential Accessories - rich teal */
.scrollbar-hide.flex.gap-2 > button:nth-child(7) {
  background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%) !important;
  color: #00695c !important;
  border-color: rgba(0, 105, 92, 0.12) !important;
}

/* Emoji icon */
.scrollbar-hide.flex.gap-2 > button > span:first-child {
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Count badge */
.scrollbar-hide.flex.gap-2 > button > span:last-child {
  font-size: 10px !important;
  font-weight: 800 !important;
  min-width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 7px !important;
  padding: 0 5px !important;
  margin-left: 3px !important;
  background: rgba(0,0,0,0.07) !important;
}

.scrollbar-hide.flex.gap-2 > button:first-child > span:last-child {
  background: rgba(255,255,255,0.2) !important;
  color: white !important;
}

/* ================================================================ */
/* ===== MOBILE: AUTO-FIT ANY PHONE (up to 767px) ================ */
/* ================================================================ */
@media (max-width: 767px) {

  /* --- FORCE ALL CONTENT TO FIT SCREEN --- */
  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Every direct child of body/root must fit */
  #root, #root > * {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Touch targets */
  a, button {
    min-height: 40px !important;
    -webkit-tap-highlight-color: rgba(0, 153, 221, 0.1) !important;
  }

  /* --- HERO SECTION --- */
  /* Remove full-screen height on ALL min-h-screen elements */
  .min-h-screen,
  [class*="min-h-screen"] {
    min-height: auto !important;
  }

  /* Hero section specifically */
  section.relative.min-h-screen.overflow-hidden {
    min-height: auto !important;
    height: auto !important;
  }

  /* Hero inner content - reduce massive padding */
  .relative.z-10.flex.flex-col.items-center.justify-center {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    gap: 16px !important;
  }

  /* The main content wrapper - remove bottom padding */
  .flex.flex-col.gap-0.pb-20,
  [class*="pb-20"] {
    padding-bottom: 0 !important;
  }

  /* Hero logo - smaller on mobile */
  img[class*="max-w-"][class*="md:max-w-"] {
    max-width: 180px !important;
    margin: 0 auto 12px !important;
  }

  /* Space between hero elements */
  .text-center.space-y-6,
  .text-center[class*="space-y-"] {
    gap: 12px !important;
  }
  .text-center.space-y-6 > * + *,
  .text-center[class*="space-y-"] > * + * {
    margin-top: 12px !important;
  }

  /* Hero title */
  h1[class*="text-2xl"],
  h1[class*="text-3xl"],
  h1[class*="text-4xl"],
  h1[class*="text-5xl"],
  h1[class*="text-6xl"] {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
    padding: 0 16px !important;
  }

  /* Hero subtitle */
  p[class*="text-gray-600"][class*="max-w"],
  p[class*="text-gray-500"][class*="max-w"] {
    font-size: 14px !important;
    line-height: 1.5 !important;
    padding: 0 20px !important;
    margin-bottom: 16px !important;
  }

  /* Hero CTA buttons - center and full width */
  a[class*="rounded-full"][class*="px-7"],
  a[class*="rounded-full"][class*="sm:px-10"],
  a[class*="rounded-full"][class*="px-8"] {
    padding: 12px 24px !important;
    font-size: 14px !important;
    min-height: 48px !important;
    width: 80% !important;
    max-width: 280px !important;
    justify-content: center !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Center the button container */
  .flex.flex-col.items-center.gap-3,
  .flex.flex-col.items-center.gap-4,
  .flex.gap-3.flex-col,
  .flex.gap-4.flex-col {
    align-items: center !important;
    width: 100% !important;
  }

  /* Hide "Scroll Down" indicator on mobile */
  [class*="animate-bounce"],
  [class*="Scroll"],
  .animate-bounce {
    display: none !important;
  }

  /* Also hide the scroll down text */
  div:has(> [class*="animate-bounce"]) {
    display: none !important;
  }

  /* Trust badges - wrap nicely */
  .flex.items-center.gap-6,
  .flex.items-center.gap-4 {
    gap: 6px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 0 12px !important;
  }

  .flex.items-center.gap-6 span,
  .flex.items-center.gap-4 span {
    font-size: 11px !important;
  }

  /* --- NAVIGATION --- */
  .sticky.top-0 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .sticky img[alt*="logo"],
  .sticky img[src*="logo"],
  header img[alt*="logo"],
  header img[src*="logo"] {
    max-height: 36px !important;
    width: auto !important;
  }

  /* Nav container */
  .container.mx-auto {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* --- SECTION HEADINGS --- */
  h2[class*="text-3xl"],
  h2[class*="text-4xl"] {
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
  }

  h2 + p[class*="text-gray-"] {
    font-size: 13px !important;
    margin-bottom: 12px !important;
    padding: 0 12px !important;
  }

  /* --- SECTION SPACING --- */
  [class*="py-24"] {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  [class*="py-16"] {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  [class*="py-12"] {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  [class*="gap-8"] {
    gap: 14px !important;
  }
  [class*="gap-6"] {
    gap: 10px !important;
  }

  /* --- SHOP BY CATEGORY CARDS --- */
  .grid.grid-cols-2[class*="md:grid-cols-3"] {
    gap: 10px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  [role="listitem"][class*="group"] {
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  [role="listitem"] img {
    height: 100px !important;
    object-fit: cover !important;
  }

  [role="listitem"] h3,
  [role="listitem"] [class*="font-bold"] {
    font-size: 13px !important;
  }

  [role="listitem"] [class*="text-sm"] {
    font-size: 11px !important;
  }

  /* --- SHOP PAGE CATEGORY FILTER BUTTONS --- */
  .scrollbar-hide.flex.gap-2 {
    gap: 8px !important;
    padding: 10px 10px !important;
    margin: 2px 8px 10px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    border-radius: 14px !important;
  }
  .scrollbar-hide.flex.gap-2 > button {
    padding: 7px 12px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
    min-height: 36px !important;
  }
  .scrollbar-hide.flex.gap-2 > button > span:first-child {
    font-size: 14px !important;
  }
  .scrollbar-hide.flex.gap-2 > button > span:last-child {
    font-size: 9px !important;
    min-width: 17px !important;
    height: 17px !important;
  }

  /* --- SHOP PAGE HEADER --- */
  .flex.items-center.justify-between {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* --- PRODUCT GRID --- */
  .grid.grid-cols-2 {
    gap: 8px !important;
    padding: 0 8px !important;
  }

  /* Product cards */
  .group[class*="rounded-2xl"] {
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  /* Product card image - ensure broken images still look ok */
  .group[class*="rounded-2xl"] img,
  .group[class*="rounded-2xl"] .aspect-square img {
    width: 100% !important;
    aspect-ratio: 1/1 !important;
    object-fit: cover !important;
    background-color: #f3f4f6 !important;
  }

  /* Product name */
  .group[class*="rounded-2xl"] h3 {
    font-size: 12px !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Product price */
  .group[class*="rounded-2xl"] [class*="text-primary"] {
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  /* Buy button */
  .group[class*="rounded-2xl"] a[class*="bg-primary"],
  .group[class*="rounded-2xl"] [class*="Buy"] {
    min-height: 32px !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  /* Product badges */
  .group[class*="rounded-2xl"] [class*="absolute"][class*="top-"] {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }

  /* --- NEW ARRIVALS CAROUSEL --- */
  /* Carousel cards */
  a[class*="flex-shrink-0"][class*="w-36"],
  a[class*="flex-shrink-0"][class*="sm:w-44"] {
    width: 140px !important;
    flex-shrink: 0 !important;
  }

  /* View All link */
  a[class*="text-primary"][class*="font-"] {
    font-size: 13px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* "View All Products" CTA */
  a[class*="rounded-full"][class*="bg-gradient"] {
    padding: 12px 24px !important;
    font-size: 14px !important;
    min-height: 48px !important;
  }

  /* --- FEATURES SECTION --- */
  .grid.grid-cols-1[class*="sm:grid-cols-2"] {
    gap: 10px !important;
    padding: 0 12px !important;
  }

  .grid.grid-cols-1[class*="sm:grid-cols-2"] > div {
    padding: 16px !important;
    border-radius: 12px !important;
  }

  .grid.grid-cols-1[class*="sm:grid-cols-2"] > div h3 {
    font-size: 15px !important;
  }

  .grid.grid-cols-1[class*="sm:grid-cols-2"] > div p {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  /* --- NEWSLETTER --- */
  input[type="email"] {
    min-height: 48px !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    width: 100% !important;
  }

  /* Subscribe button */
  button[class*="bg-gradient"],
  button[class*="Subscribe"],
  .flex[class*="max-w"] button {
    min-height: 48px !important;
    font-size: 14px !important;
    padding: 12px 24px !important;
    width: 100% !important;
  }

  /* --- FOOTER --- */
  footer {
    padding-top: 28px !important;
    padding-bottom: 20px !important;
  }

  footer .grid {
    gap: 20px !important;
    padding: 0 16px !important;
    grid-template-columns: 1fr !important;
  }

  footer h3, footer h4, footer [class*="font-bold"] {
    font-size: 15px !important;
    margin-bottom: 8px !important;
  }

  footer a {
    font-size: 14px !important;
    padding: 5px 0 !important;
    display: block !important;
    min-height: 36px !important;
    line-height: 26px !important;
  }

  footer [class*="text-gray-400"],
  footer [class*="text-sm"] {
    font-size: 12px !important;
    text-align: center !important;
  }

  footer [class*="border-t"] {
    padding-top: 14px !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Footer logo */
  footer img {
    max-width: 200px !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* --- CHAT WIDGET --- */
  [class*="fixed"][class*="bottom-"][class*="right-"][class*="z-50"] {
    max-width: calc(100vw - 16px) !important;
  }

  /* Chat window */
  .fixed.bottom-24[class*="w-"] {
    width: calc(100vw - 24px) !important;
    max-width: 360px !important;
    right: 12px !important;
    bottom: 70px !important;
    max-height: 60vh !important;
  }

  /* --- FORMS (Track Order, Request Product) --- */
  textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="url"] {
    min-height: 44px !important;
    font-size: 15px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    width: 100% !important;
  }
  textarea {
    min-height: 100px !important;
  }

  /* --- MODALS / OVERLAYS --- */
  [class*="fixed"][class*="inset-0"][class*="z-50"] {
    padding: 8px !important;
  }
  [class*="fixed"][class*="inset-0"][class*="z-50"] > div {
    border-radius: 16px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    width: 100% !important;
  }
}

/* ================================================================ */
/* ===== VERY SMALL PHONES (320px - 374px) ======================== */
/* ================================================================ */
@media (max-width: 374px) {
  h1[class*="text-2xl"],
  h1[class*="text-3xl"] {
    font-size: 1.2rem !important;
  }

  .scrollbar-hide.flex.gap-2 {
    gap: 6px !important;
    padding: 8px 6px !important;
    margin: 2px 4px 8px !important;
  }
  .scrollbar-hide.flex.gap-2 > button {
    padding: 6px 8px !important;
    font-size: 10px !important;
  }

  .grid.grid-cols-2 {
    gap: 6px !important;
    padding: 0 6px !important;
  }

  footer {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ================================================================ */
/* ===== TABLETS (640px - 1023px) ================================= */
/* ================================================================ */
@media (min-width: 640px) and (max-width: 1023px) {
  .scrollbar-hide.flex.gap-2 {
    gap: 10px !important;
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .scrollbar-hide.flex.gap-2 > button {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }
}

/* ===== SMOOTH SCROLLING ===== */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth !important;
  }
}

/* ===== LANDSCAPE PHONE ===== */
@media (max-height: 500px) and (orientation: landscape) {
  .min-h-screen {
    min-height: auto !important;
  }
  [class*="py-24"] {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

/* ===== SAFE AREA INSETS (iPhone notch/Dynamic Island) ===== */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
  }
  footer {
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }
  .sticky.top-0 {
    padding-top: env(safe-area-inset-top) !important;
  }
}