/* ============================================
   ILERA CARE - RESPONSIVE FIXES
   Horizontal Overflow Prevention & Mobile Optimization
   ============================================ */

/* ============================================
   GLOBAL OVERFLOW PREVENTION
   ============================================ */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative;
}

/* Prevent any element from causing horizontal scroll */
* {
  max-width: 100%;
}

/* ============================================
   HEADER RESPONSIVENESS
   ============================================ */

/* Mobile header adjustments */
@media (max-width: 767px) {
  .header {
    top: 0.5rem !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    border-radius: var(--radius-lg) !important;
  }

  .header-inner {
    padding: 0.5rem 1rem !important;
    height: 52px !important;
    gap: 0.5rem;
  }

  .logo-img {
    height: 32px !important;
  }

  .header-actions {
    gap: 0.25rem;
  }

  .header-icon,
  .header-shop-btn,
  .header-menu-toggle {
    width: 32px !important;
    height: 32px !important;
  }
}

/* Very small screens */
@media (max-width: 359px) {
  .header-inner {
    padding: 0.4rem 0.75rem !important;
  }

  .logo-img {
    height: 28px !important;
  }
}

/* ============================================
   HERO SECTION RESPONSIVENESS
   ============================================ */

@media (max-width: 767px) {
  .hero {
    padding: 5rem 1rem 2rem !important;
    min-height: auto !important;
  }

  .hero-container {
    gap: 1.5rem !important;
  }

  .hero-title {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
  }

  .hero-content-box {
    max-width: 100% !important;
    text-align: center;
  }

  .hero-subtitle {
    font-size: 0.9375rem !important;
  }

  .hero-btn {
    padding: 0.875rem 1.75rem !important;
    font-size: 0.8125rem !important;
  }

  .hero-image-wrapper {
    max-width: 280px !important;
  }

  .hero-main-img {
    border-radius: var(--radius-lg) !important;
  }

  /* Resize decorative leaves */
  .leaf-1 {
    width: 50px !important;
    height: 50px !important;
    left: -5% !important;
  }

  .leaf-2 {
    width: 40px !important;
    height: 40px !important;
  }

  .leaf-3 {
    width: 30px !important;
    height: 30px !important;
  }

  /* Hero right cards */
  .hero-right {
    gap: 0.875rem !important;
  }

  .review-card,
  .sale-card {
    padding: 1rem !important;
  }

  .sale-title {
    font-size: 1rem !important;
  }

  .sale-desc {
    font-size: 0.75rem !important;
  }
}

/* Tablet adjustments */
@media (min-width: 640px) and (max-width: 767px) {
  .hero-container {
    grid-template-columns: 1fr 1fr !important;
  }

  .hero-left {
    order: 1 !important;
  }

  .hero-center {
    order: 2 !important;
  }

  .hero-right {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    order: 3 !important;
  }

  .hero-image-wrapper {
    max-width: 320px !important;
  }
}

/* ============================================
   PHILOSOPHY SECTION RESPONSIVENESS
   ============================================ */

@media (max-width: 767px) {
  .philosophy {
    padding: 3rem 0 !important;
  }

  .philosophy-grid {
    gap: 2rem !important;
  }

  .philosophy-text {
    max-width: 100% !important;
    padding: 0 0.5rem;
  }

  .philosophy-desc {
    font-size: 0.9375rem !important;
  }

  .floating-badge {
    bottom: 1rem !important;
    left: 1rem !important;
    padding: 0.5rem 1rem !important;
  }

  .badge-num {
    font-size: 1rem !important;
  }
}

/* ============================================
   ABOUT SECTION RESPONSIVENESS
   ============================================ */

@media (max-width: 767px) {
  .about {
    min-height: auto !important;
  }

  .about-container {
    padding: 3rem 1rem !important;
  }

  .about-card {
    border-radius: var(--radius-lg) !important;
  }

  .about-img-side {
    min-height: 220px !important;
  }

  .about-text-side {
    padding: 1.5rem !important;
  }

  .about-desc {
    font-size: 0.875rem !important;
  }

  .about-stats {
    gap: 0.75rem !important;
    padding-top: 1rem !important;
  }

  .stat-num {
    font-size: 1.5rem !important;
  }

  .stat-label {
    font-size: 0.625rem !important;
  }
}

/* ============================================
   VISION & MISSION RESPONSIVENESS
   ============================================ */

@media (max-width: 767px) {
  .vision-mission {
    padding: 3rem 0 !important;
  }

  .vm-grid {
    gap: 1.5rem !important;
    margin-top: 2rem !important;
  }

  .vm-card {
    padding: 1.75rem !important;
    border-radius: var(--radius-md) !important;
  }

  .vm-icon {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 1rem !important;
  }

  .vm-card h3 {
    font-size: 1.25rem !important;
  }

  .vm-card p {
    font-size: 0.875rem !important;
  }
}

/* ============================================
   PRODUCTS SHOWCASE RESPONSIVENESS
   ============================================ */

@media (max-width: 767px) {
  .product-showcase {
    min-height: auto !important;
    padding: 3rem 1rem !important;
  }

  .product-showcase-inner {
    gap: 2rem !important;
  }

  .product-img-frame {
    max-width: 300px !important;
  }

  .product-img-frame img {
    max-height: 45vh !important;
  }

  .product-showcase-text {
    max-width: 100% !important;
    text-align: center;
  }

  .product-title {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }

  .product-short {
    font-size: 0.9375rem !important;
  }

  .product-features {
    align-items: center;
  }

  .product-features li {
    font-size: 0.875rem !important;
  }

  .btn-primary {
    padding: 0.875rem 2rem !important;
    font-size: 0.8125rem !important;
  }
}

/* ============================================
   CATEGORIES RESPONSIVENESS
   ============================================ */

@media (max-width: 767px) {
  .cart-drawer {
    top: 0.75rem;
    right: 0.75rem;
    width: calc(100vw - 1.5rem) !important;
    height: calc(100vh - 1.5rem) !important;
  }

  .shop-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem;
  }


  .categories {
    padding: 3rem 0 !important;

  }

  .categories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
    margin-top: 2rem !important;
  }

  .category-card {
    border-radius: var(--radius-md) !important;
  }

  .category-info {
    padding: 1rem !important;
  }

  .category-info h3 {
    font-size: 0.875rem !important;
  }

  .category-count {
    font-size: 0.6875rem !important;
  }
}

/* Very small screens - single column */
@media (max-width: 359px) {
  .categories-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   TEAM SECTION RESPONSIVENESS
   ============================================ */

@media (max-width: 767px) {
  .team {
    padding: 3rem 0 !important;
  }

  .team-grid {
    gap: 1.5rem !important;
    margin-top: 2rem !important;
  }

  .team-card {
    border-radius: var(--radius-md) !important;
  }

  .team-img {
    height: 180px !important;
  }

  .team-img-placeholder {
    width: 64px !important;
    height: 64px !important;
  }

  .team-info {
    padding: 1.25rem !important;
  }

  .team-info h3 {
    font-size: 1rem !important;
  }

  .team-bio {
    font-size: 0.8125rem !important;
  }
}

/* ============================================
   CONTACT SECTION RESPONSIVENESS
   ============================================ */

@media (max-width: 767px) {
  .contact {
    padding: 3rem 0 !important;
  }

  .contact-card {
    border-radius: var(--radius-lg) !important;
  }

  .contact-content {
    padding: 1.75rem !important;
  }

  .contact-desc {
    font-size: 0.9375rem !important;
  }

  .contact-item {
    font-size: 0.875rem !important;
    gap: 0.75rem !important;
  }

  .contact-icon {
    width: 36px !important;
    height: 36px !important;
  }

  .btn-secondary-white {
    padding: 0.875rem 2rem !important;
    font-size: 0.8125rem !important;
  }
}

/* ============================================
   FOOTER RESPONSIVENESS
   ============================================ */

@media (max-width: 767px) {
  .footer {
    padding: 3rem 0 1.5rem !important;
  }

  .footer-grid {
    gap: 2rem !important;
    margin-bottom: 2rem !important;
  }

  .footer-logo img {
    height: 36px !important;
  }

  .footer-desc {
    font-size: 0.8125rem !important;
  }

  .footer-links-col h4,
  .footer-contact-col h4 {
    font-size: 0.75rem !important;
    margin-bottom: 1rem !important;
  }

  .footer-links-col a,
  .footer-contact-col li {
    font-size: 0.8125rem !important;
  }

  .footer-bottom {
    padding-top: 1.5rem !important;
  }
}

/* ============================================
   SECTION LABELS & TITLES RESPONSIVENESS
   ============================================ */

@media (max-width: 767px) {
  .section-label {
    font-size: 0.6875rem !important;
    margin-bottom: 0.5rem !important;
  }

  .section-title {
    font-size: clamp(1.5rem, 5vw, 2rem) !important;
    margin-bottom: 0.75rem !important;
  }

  .section-subtitle {
    font-size: 0.9375rem !important;
    margin-bottom: 1.5rem !important;
  }
}

/* ============================================
   SCROLL REVEAL ADJUSTMENTS FOR MOBILE
   ============================================ */

@media (max-width: 767px) {
  .scroll-reveal,
  .scroll-reveal-item,
  .scroll-reveal-left,
  .scroll-reveal-right {
    transform: translateY(20px) !important;
  }

  .scroll-reveal-left {
    transform: translateX(-20px) translateY(20px) !important;
  }

  .scroll-reveal-right {
    transform: translateX(20px) translateY(20px) !important;
  }

  .scroll-reveal.revealed,
  .scroll-reveal-item.revealed,
  .scroll-reveal-left.revealed,
  .scroll-reveal-right.revealed {
    transform: translateY(0) translateX(0) !important;
  }
}

/* ============================================
   MOBILE MENU IMPROVEMENTS
   ============================================ */

@media (max-width: 767px) {
  .mobile-menu-inner {
    gap: 1.5rem !important;
    padding: 2rem;
  }

  .mobile-menu-inner a {
    font-size: 1.25rem !important;
  }
}

/* ============================================
   IMAGE RESPONSIVENESS FIXES
   ============================================ */

/* Ensure all images don't overflow */
img {
  max-width: 100%;
  height: auto;
}

/* Product images specific */
.product-img-frame img,
.philosophy-img-box img,
.about-img-side img,
.hero-main-img,
.contact-img-wrapper img {
  max-width: 100%;
  height: auto;
}

/* ============================================
   CONTAINER ADJUSTMENTS
   ============================================ */

@media (max-width: 767px) {
  .container {
    padding: 0 1rem !important;
  }
}

@media (max-width: 359px) {
  .container {
    padding: 0 0.75rem !important;
  }
}

/* ============================================
   SAFARI & iOS SPECIFIC FIXES
   ============================================ */

/* Fix for iOS momentum scrolling */
@supports (-webkit-touch-callout: none) {
  body {
    -webkit-overflow-scrolling: touch;
  }
}

/* Fix for iOS input zoom */
@media (max-width: 767px) {
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* ============================================
   REDUCED MOTION RESPECT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal-item,
  .scroll-reveal-left,
  .scroll-reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-leaf {
    animation: none !important;
  }
}

/* ============================================
   LANDSCAPE MODE OPTIMIZATIONS
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: auto !important;
    padding: 4rem 1rem 2rem !important;
  }

  .hero-image-wrapper {
    max-width: 200px !important;
  }

  .about {
    min-height: auto !important;
  }

  .product-showcase {
    min-height: auto !important;
  }
}