/* Mobile and Tablet Styles */

@media (max-width: 768px) {
  /* Hide scrollbar */
  body::-webkit-scrollbar {
    display: none !important;
  }
  
  body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }
  
  html::-webkit-scrollbar {
    display: none !important;
  }
  
  html {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }
  
  /* Remove tap highlight on mobile */
  * {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }
  
  /* Ensure HomePage container adapts to content */
  .HomePage {
    height: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    padding-top: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    overflow-x: hidden !important;
  }
  
  /* CRITICAL: Remove absolute positioning from ALL children */
  .HomePage > * {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: -18px auto;
  }
  
  /* Hide ALL desktop absolute elements on mobile */
  .Star2, .Star3, .EscapeToTranquility,
  .Rectangle13, .Rectangle14,
  .Rectangle8, .Rectangle16,
  .AllProducts, .OurCollections, .CandleAccessories, .CustomCandles,
  .Rectangle51, .Rectangle52,
  .AboutUs.absolute,
  .LearnMore.absolute,
  .ContactUs.absolute,
  .Group10.absolute {
    display: none !important;
  }
  
  /* Navigation must be first */
  .nav-container {
    order: 1 !important;
    display: flex !important;
    margin: 0 !important;
    margin-top: -80px !important;
    margin-bottom: 20px !important;
    padding: 10px 15px !important;
  }
  
  /* Order for ALL direct children */
  .mobile-hero { order: 2 !important; }
  .hero-image-wrapper { order: 3 !important; }
  #marquee1 { order: 4 !important; }
  .ShopYourFavorite { order: 5 !important; }
  .products-carousel { order: 6 !important; }
  #marquee2 { order: 7 !important; }
  .GetConnectWithUs { order: 8 !important; }
  .HomePage > div.relative.w-full.overflow-visible:not(.hero-image-wrapper) { order: 9 !important; }
  .HomePage > div.relative.md\:absolute:has(.ContactUs) { order: 10 !important; }
  .AboutUs.md\:hidden { order: 11 !important; }
  .ScentopiaIsAnAmazingFragranceStudioMobile { order: 12 !important; }
  .HomePage > div.relative.md\:absolute:has(.LearnMore) { order: 13 !important; }
  .Group10 { order: 100 !important; }
  
  /* Hero image */
  .Rectangle7 {
    position: relative !important;
    width: 90% !important;
    max-width: 450px !important;
    height: auto !important;
    margin: 20px auto !important;
    display: block !important;
    left: 0 !important;
    top: auto !important;
  }
  
  /* Ellipse on hero image */
  .Ellipse1 {
    display: block !important;
    position: relative !important;
    width: 98% !important;
    height: 218px !important;
    margin: -180px auto 0 auto !important;
    left: auto !important;
    top: -138px !important;
    transform: rotate(-22deg) !important;
    bottom: -70px !important;
  }
  
  /* Frame31 marquee */
  .Frame31 {
    position: relative !important;
    left: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 60px !important;
    margin: 30px 0 !important;
    background-color: #9FB6C4 !important;
  }
  
  .Frame31 .ScentopiaCandleCo {
    font-size: 32px !important;
    font-family: 'Lastochka', cursive !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 2px #F3EFE4 !important;
    height: 60px !important;
    line-height: 60px !important;
    width: 350px !important;
  }  
  .Frame31 .ScentopiaCandleCo:nth-child(1) {
    left: 0 !important;
  }
  
  .Frame31 .ScentopiaCandleCo:nth-child(3) {
    left: 380px !important;
  }
  
  .Frame31 .ScentopiaCandleCo:nth-child(5) {
    left: 760px !important;
  }
  
  .Frame31 .ScentopiaCandleCo:nth-child(7) {
    left: 1140px !important;
  }
  
  /* Show stars on mobile */
  .Frame31 .Star13 {
    display: block !important;
  }
  
  .Frame31 .Star13:nth-child(2) {
    left: 325px !important;
  }
  
  .Frame31 .Star13:nth-child(4) {
    left: 705px !important;
  }
  
  .Frame31 .Star13:nth-child(6) {
    left: 1085px !important;
  }
  
  .Frame31 .Star13:nth-child(8) {
    left: 1465px !important;
  }
  
  .Frame31 .Star13 svg {
    width: 35px !important;
    height: 32px !important;
  }
  
  .Frame31 .Star13 {
    top: 14px !important;
  }
  
  .Frame31 .Star13 svg path {
    fill: #F3EFE4 !important;
  }
  
  .Frame31 {
    height: 60px !important;
  }
  
  .Frame31 .Group19 {
    height: 60px !important;
  }
  
  /* Shop section title */
  .ShopYourFavorite {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    top: auto !important;
    padding: 20px !important;
    text-align: center !important;
  }
  
  /* Products Carousel */
  .products-carousel {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    margin: 20px 0 !important;
  }
  
  .carousel-track {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 20px !important;
    padding: 10px 20px !important;
  }
  
  .carousel-track::-webkit-scrollbar {
    display: none !important;
  }
  
  .carousel-slide {
    flex: 0 0 80% !important;
    scroll-snap-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .carousel-slide img {
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    border-radius: 150px 150px 0 0 !important;
  }
  
  /* Carousel dots */
  .carousel-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 15px !important;
    padding-bottom: 10px !important;
  }
  
  .carousel-dots .dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #ccc !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
  }
  
  .carousel-dots .dot.active {
    background: #7E747F !important;
  }
  
  /* Product images */
  .Rectangle10, .Rectangle17, .Rectangle18, .Rectangle19 {
    position: relative !important;
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    left: 0 !important;
    top: auto !important;
  }
  
  /* About section mobile title */
  .AboutUs.md\:hidden {
    position: relative !important;
    width: 100% !important;
    text-align: center !important;
    padding: 20px !important;
  }
  
  .ScentopiaIsAnAmazingFragranceStudio {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    top: auto !important;
    padding: 20px !important;
  }
  
  .ScentopiaIsAnAmazingFragranceStudioMobile {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    top: auto !important;
    padding: 20px !important;
  }
  
  /* Contact section */
  .GetConnectWithUs {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    top: auto !important;
    padding: 20px !important;
    text-align: center !important;
  }
  
  /* Contact section wrapper */
  .HomePage > div.relative.w-full.overflow-visible {
    position: relative !important;
  }
  
  /* Contact image */
  .Rectangle15 {
    position: relative !important;
    width: 90% !important;
    max-width: 450px !important;
    height: auto !important;
    margin: 20px auto !important;
    display: block !important;
    left: 0 !important;
    top: auto !important;
    z-index: 1 !important;
  }
  
  /* Contact section wrapper */
  .HomePage > div.relative.w-full.overflow-visible:not(.hero-image-wrapper) {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  /* Ellipse on contact image */
  .Ellipse2 {
    display: block !important;
    position: absolute !important;
    width: 100% !important;
    height: 220px !important;
    margin: 0 !important;
    left: 0 !important;
    bottom: 60px !important;
    top: auto !important;
    transform: rotate(-22deg) !important;
    z-index: 5 !important;
  }
  
  /* Buttons wrappers */
  .HomePage > div.relative.md\:absolute {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 0px 0 !important;
  }
  
  /* Contact button spacing */
  .HomePage > div.relative.md\:absolute:has(.ContactUs) {
    margin-top: 20px !important;
  }
  
  /* Learn more button spacing */
  .HomePage > div.relative.md\:absolute:has(.LearnMore) {
    margin-bottom: 30px !important;
  }
  
  /* Footer */
  .Group10.relative {
    position: relative !important;
    width: 100% !important;
    margin-top: 40px !important;
  }
}