/* ============================================================
   AlifWearz - Final consolidated CSS
   Put this in /assets/css/mobile-typography.css (or Customizer)
   ============================================================ */

/* Fonts are enqueued via functions.php */
* { box-sizing: border-box; }

.font-playfair { font-family: 'Playfair Display', serif; }
.font-inter { font-family: 'Inter', sans-serif; }

.gradient-bg { background: linear-gradient(135deg,#ffeef8 0%,#f8e7f0 50%,#f3d4e0 100%); }

.glass-effect { background: rgba(255,255,255,.85); backdrop-filter: saturate(1.4) blur(8px); }

html, body { height: 100%; overflow-x: hidden; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }

/* Hero section styling */
.hero-bg {
  background:
    linear-gradient(135deg,rgba(255,238,248,0.95) 0%,rgba(248,231,240,0.95) 50%,rgba(243,212,224,0.95) 100%),
    url('https://alifwearz.com/wp-content/uploads/2025/03/35bd28fd-a719-4be9-a2c2-bcd9905e8937-scaled.jpeg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg,#c41e3a 0%,#e91e63 100%);
  position: relative;
  overflow: hidden;
  transition: .25s;
}
.btn-primary:before {
  content: "";
  position: absolute;
  inset: 0;
  left: -120%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transition: left .5s;
}
.btn-primary:hover:before { left: 120%; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(196,30,58,.35); }

.btn-secondary {
  background: linear-gradient(135deg,#6b7280 0%,#4b5563 100%);
  position: relative;
  overflow: hidden;
  transition: .25s;
}
.btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(107,114,128,.3); }

/* Card hover */
.card-hover { transition: all .3s ease; cursor: pointer; }
.card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(196,30,58,.15); }

.product-card { transition: all .3s ease; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,.1); }
.product-card img { transition: transform .3s ease; }
.product-card:hover img { transform: scale(1.05); }

/* Animations */
@keyframes fadeInUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
.animate-fade-in-up { animation: fadeInUp 0.8s ease-out; }

@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
.animate-float { animation: float 3s ease-in-out infinite; }

/* Category cards */
.category-card { position: relative; overflow: hidden; border-radius: 1rem; }
.category-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg,rgba(196,30,58,.7),rgba(233,30,99,.5));
  opacity: 0;
  transition: opacity .3s;
}
.category-card:hover .category-overlay { opacity: 1; }
.category-card:hover img { transform: scale(1.1); }

/* Testimonial styling */
.testimonial-card { background: rgba(255,255,255,.9); backdrop-filter: blur(10px); }

/* Newsletter + stats */
.stats-bg { background: linear-gradient(135deg,#c41e3a 0%,#e91e63 100%); }
.newsletter-bg {
  background: linear-gradient(135deg,rgba(196,30,58,0.1) 0%,rgba(233,30,99,0.1) 100%);
  position: relative;
}
.newsletter-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(196,30,58,0.1)"/></svg>');
  background-size: 50px 50px;
  opacity: 0.3;
}

/* Mobile menu styling */
.mobile-menu-overlay {
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
/* Mobile menu content visibility fix */
.flex-1.flex.flex-col.justify-center.px-8.space-y-6 { background-color: white; }

/* Anchor offset for sticky header */
.anchor-offset { scroll-margin-top: 88px; }

/* Thumbnail ratio */
.thumb-img { height: 20rem; object-fit: cover; object-position: top; }
@media (max-width: 640px) { .thumb-img { height: 24rem; } }

/* Scroll reveal */
.scroll-reveal { opacity: 0; transform: translateY(50px); transition: all 0.8s ease; }
.scroll-reveal.revealed { opacity: 1; transform: translateY(0); }

/* Responsive fix for hero on mobile */
@media (max-width: 768px) { .hero-bg { background-attachment: scroll; } }

/* --- Single Product page styles --- */
.thumbnail {
  width: 70px;
  height: 100px;
  border-radius: 12px;
  border: 3px solid transparent;
  object-fit: cover;
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
}
.thumbnail:hover, .thumbnail.active {
  border-color: #c41e3a;
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(196,30,58,.28);
}

/* Related images default (desktop) */
.related-img { height: 320px; object-fit: cover; width: 100%; }

/* main image wrap */
.main-image-wrap {
  aspect-ratio: 3/4;
  max-height: 85vh;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.main-image-wrap img { transition: transform .3s ease; transform-origin: center; }
.main-image-wrap:hover img { transform: scale(1.02); }

.size-btn {
  border: 2px solid #e5e7eb;
  background: #fff;
  color: #374151;
  transition: all .2s ease;
  cursor: pointer;
  z-index: 10;
  position: relative;
}
.size-btn:hover {
  border-color: #c41e3a;
  background: #fef2f2;
  color: #c41e3a;
  transform: translateY(-1px);
}
.size-btn.active { border-color: #c41e3a; background: #c41e3a; color: #fff; box-shadow: 0 4px 12px rgba(196,30,58,0.3); }

.lightbox-backdrop { background: rgba(0,0,0,.8); }
.lightbox-img { max-height: 80vh; object-fit: contain; }
.no-scroll { overflow: hidden; }

.size-guide-content { max-height: 0; overflow: hidden; transition: max-height .3s ease-out; }
.size-guide-content.expanded { max-height: 400px; }

@media (max-width: 640px) { .mobile-qty-control { display: flex !important; } }

/* ----------------------------------------------------------------
   Consolidated mobile overrides — single block (keeps everything tidy)
   - Main image fix
   - Related / shop grid: 2-per-row
   - Image height + spacing + typography adjustments
   ---------------------------------------------------------------- */
@media (max-width: 640px) {

  /* Slightly reduce the base rem so everything scales down a bit */
  html { font-size: 93.75%; /* 15px base instead of 16px */ }

  /* Buttons often use text-lg in your templates—make them friendlier on phones */
  .btn-primary, #stickyBuy, #buyBtn, .menu-item-lg {
    font-size: 1rem !important; /* 16px */
    line-height: 1.4 !important;
  }

  /* --- Product main image: stable frame + fill --- */
  .main-image-wrap {
    aspect-ratio: 3/4;      /* consistent frame */
    max-height: 78vh;
    overflow: hidden;
    line-height: 0;         /* remove inline baseline gap */
    position: relative;
  }
  .main-image-wrap img,
  #mainImage {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center; /* prefer top of image (faces/focal) */
    transform: none;
    border-radius: 0; /* container handles rounding */
  }

  /* --- Related / shop cards: 2 per row --- */
  .related-products-grid,
  .woocommerce .alif-grid,
  .woocommerce-page .alif-grid,
  .post-type-archive-product .alif-grid,
  body.tax-product_cat .alif-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.6rem !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-inline: 0.25rem !important;
  }

  /* Card basic sizing */
  .related-products-grid > a.block,
  .alif-card {
    padding: 0.45rem !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,0.95) !important;
    display: block;
  }

  /* Image heights — tall enough so clothes aren't aggressively cropped */
  .related-products-grid .related-img,
  .alif-card-img-wrap,
  .related-products-grid img {
    height: 200px !important;   /* increase if you want taller images (220) */
    min-height: 200px !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
    border-radius: 10px !important;
  }

  /* Title / description spacing — give breathing room between title and desc */
  .alif-card-title,
  .related-products-grid h4 {
    font-size: 0.98rem !important;
    margin: 0.45rem 0 0.25rem 0 !important;
    line-height: 1.25 !important;
    min-height: 2.25rem !important; /* prevents shifting */
  }
  .alif-card-desc,
  .related-products-grid .text-gray-600,
  .related-products-grid p {
    font-size: 0.82rem !important;
    margin: 0 !important;
    margin-bottom: 0.4rem !important;
    line-height: 1.35 !important;
    min-height: 2.4rem !important;
    color: #4b5563 !important;
  }

  /* Price, badge, and meta sizing */
  .alif-card .text-pink-600.font-bold,
  .related-products-grid .text-pink-600 {
    font-size: 0.95rem !important;
  }
  .alif-badge,
  .related-products-grid .bg-pink-600,
  .related-products-grid .text-xs {
    font-size: 0.67rem !important;
    padding: 0.18rem 0.45rem !important;
  }

  /* Keep related/product cards tidy on small screens (typography) */
  .alif-card .alif-card-title { font-size: 1rem !important; line-height: 1.4 !important; }
  .alif-card .alif-card-desc  { font-size: 0.9375rem !important; line-height: 1.55 !important; } /* ~15px */

  /* Hero subtext paragraphs (frequent text-xl/2xl usage) */
  p.text-xl, p.text-2xl { font-size: 1.0625rem !important; line-height: 1.6 !important; } /* ~17px */

  /* Prevent image hover transforms causing layout jumps */
  .alif-card:hover .alif-card-img-wrap img,
  .related-products-grid .group:hover .related-img,
  .product-card:hover img {
    transform: none !important;
  }

  /* Misc small UI adjustments */
  .related-products-grid h4 { font-size: 0.9rem !important; margin-bottom: 0.25rem !important; }
  .related-products-grid .text-base, .related-products-grid .text-sm { font-size: 0.8rem !important; }
  .related-products-grid .p-4 { padding: 0.5rem !important; }
  .related-products-grid .bg-pink-600.px-3.py-1,
  .related-products-grid .text-xs { font-size: 0.65rem !important; padding: 0.25rem 0.45rem !important; }

  /* Ensure mobile-qty-control visible */
  .mobile-qty-control { display: flex !important; }

  /* Keep consistent spacing for top-level containers */
  .max-w-6xl.mx-auto.px-4.pb-14 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
}

/* End of file */




/* 1) Let grid/flex children shrink (prevents horizontal overflow) */
.single-product .grid > * { min-width: 0; }     /* your 2-column product grid */
.single-product .flex > * { min-width: 0; }     /* inner flex rows (images row etc.) */

/* 2) Belt-and-suspenders: never exceed the viewport width on mobile */
@media (max-width: 640px) {
  .gradient-bg,
  .gradient-bg .max-w-6xl { overflow-x: hidden; max-width: 100vw; }

  /* main image & details columns must be allowed to shrink */
  .main-image-wrap,
  .relative.group.flex-1,
  .space-y-8 { min-width: 0; }

  /* horizontal thumb scroller shouldn't expand page width */
  .md\:hidden.flex.mt-4.overflow-x-auto {
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  /* thumbnails don’t wrap, but also don't force page width */
  .thumbnail { flex: 0 0 auto; }
}

/* 3) Safety: images never exceed container */
img, video { max-width: 100%; height: auto; }