/* ============================================
   FOLD PHONE & NARROW DISPLAY FIXES
   Organic Urban — Responsive for Galaxy Z Fold,
   Flip phones (folded state), and very small screens
   ============================================

   Breakpoints:
   ≤ 360px  — folded fold-phones, small Androids
   ≤ 320px  — extreme small (old iPhones, Galaxy Z Fold folded)
   600-768px — fold phone unfolded (square ~720×720 or portrait tablet-like)
   ============================================ */

/* ============================================
   SMALL PHONES: ≤ 360px
   (Galaxy Z Fold folded = ~280px, S22/S23 = 360px)
   ============================================ */
@media screen and (max-width: 360px) {

  /* ---- Global spacing ---- */
  body {
    font-size: 15px;
  }

  .container,
  .section-inner,
  .content-wrapper {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* ---- Header: tighten on very narrow screens ---- */
  .site-header .header-inner {
    grid-template-columns: 40px 1fr auto !important;
    padding: 0.5rem 0.625rem !important;
    gap: 0.25rem !important;
  }

  #menuToggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 6px !important;
  }

  .logo {
    max-width: 140px !important;
  }

  .logo img,
  .logo picture {
    max-height: 26px !important;
  }

  .header-actions button,
  .header-actions a {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  /* ---- Product grids: force single column ---- */
  .products-grid,
  .product-grid,
  .category-products .product-grid,
  .skincare-products-grid,
  .haircare-products-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Single-column cards look better slightly wider */
  .product-card .product-image,
  .product-card > .product-image {
    min-height: 200px !important;
    aspect-ratio: 4 / 3 !important;
  }

  /* ---- Category grid: single column ---- */
  .shop-by-category .homepage-categories-grid,
  .homepage-categories-grid,
  .category-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .homepage-category-image {
    aspect-ratio: 16 / 9 !important;
  }

  /* ---- Bestsellers carousel: wider cards, show 1 at a time ---- */
  .bestsellers-grid .ou-product-card,
  .bestsellers-grid .bestseller-card {
    flex: 0 0 85% !important;
    min-width: 85% !important;
    max-width: 85% !important;
  }

  .bestseller-image-wrapper {
    aspect-ratio: 4 / 3 !important;
  }

  /* ---- Ubtan ritual cards ---- */
  .ubtans-ritual-grid {
    margin: 0 -0.75rem 2rem -0.75rem !important;
    padding: 0 0.75rem !important;
  }

  .ubtan-ritual-card {
    flex: 0 0 88% !important;
    min-width: 88% !important;
  }

  .ubtan-color-block {
    height: 7rem !important;
  }

  .ubtan-card-content {
    padding: 1.25rem 1rem 1.5rem !important;
  }

  .ubtan-name {
    font-size: 1.2rem !important;
  }

  /* ---- World of clays grid: 2-column stays OK but reduce text ---- */
  .world-of-clays-title {
    font-size: 1.75rem !important;
  }

  .world-of-clays-subtitle {
    font-size: 0.8rem !important;
  }

  /* ---- Section headings ---- */
  .bestsellers-header h2 {
    font-size: 1.75rem !important;
  }

  .ubtans-ritual-title {
    font-size: 1.6rem !important;
  }

  .skincare-title,
  .haircare-title {
    font-size: 1.5rem !important;
  }

  /* ---- Skincare page: skin type cards ---- */
  .skin-types-section {
    padding: 1.5rem 0.75rem !important;
  }

  /* ---- Testimonials ---- */
  .testimonials-section {
    padding: 1.5rem 0.75rem !important;
  }

  .testimonials-grid .testimonial-card {
    padding: 18px !important;
  }

  /* ---- Trust strip ---- */
  .trust-strip-section .trust-item {
    font-size: 0.72rem !important;
    padding: 0.2rem 0.15rem !important;
  }

  /* ---- Cart page ---- */
  .cart-page-body .cart-page {
    padding: 12px 12px 90px !important;
  }

  /* ---- Checkout ---- */
  .checkout-page .checkout-content {
    grid-template-columns: 1fr !important;
  }

  /* ---- Buttons ---- */
  .btn-add-to-cart,
  .btn-primary,
  .btn-secondary {
    font-size: 0.78rem !important;
    padding: 10px 14px !important;
  }

  /* ---- Section padding ---- */
  .bestsellers-section {
    padding: 36px 0 44px !important;
  }

  .ubtans-ritual {
    padding: 2.5rem 0.75rem 3rem !important;
  }

  .shop-by-category {
    padding: 2rem 0.75rem !important;
  }

  .testimonials-section {
    padding: 1.5rem 0.75rem !important;
  }

  /* ---- Hero section ---- */
  .hero-section,
  .skincare-hero,
  .haircare-hero {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* ---- Hero: trust row wraps on tiny screens ---- */
  .hero-trust-row {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    justify-content: center !important;
  }

  .hero-premium-title {
    font-size: 24px !important;
  }

  /* ---- Hero product cluster: show 1.2 cards on narrow screens ---- */
  .hero-product-card {
    flex: 0 0 calc(80% - 0.375rem) !important;
    min-width: calc(80% - 0.375rem) !important;
  }
}

/* ============================================
   EXTREME SMALL: ≤ 320px
   (Galaxy Z Fold closed = ~280px)
   ============================================ */
@media screen and (max-width: 320px) {

  body {
    font-size: 14px;
  }

  /* ---- Header extremely tight ---- */
  .site-header .header-inner {
    grid-template-columns: 36px 1fr auto !important;
    padding: 0.375rem 0.5rem !important;
    gap: 0.125rem !important;
  }

  #menuToggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    font-size: 1.25rem !important;
  }

  .logo {
    max-width: 110px !important;
  }

  .logo img,
  .logo picture {
    max-height: 22px !important;
  }

  .header-actions {
    gap: 0.125rem !important;
  }

  .header-actions button,
  .header-actions a {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  /* ---- Bestsellers: 1 card fills screen ---- */
  .bestsellers-grid .ou-product-card,
  .bestsellers-grid .bestseller-card {
    flex: 0 0 92% !important;
    min-width: 92% !important;
    max-width: 92% !important;
  }

  /* ---- Ubtan cards ---- */
  .ubtan-ritual-card {
    flex: 0 0 92% !important;
    min-width: 92% !important;
  }

  /* ---- Headings ---- */
  .bestsellers-header h2 {
    font-size: 1.5rem !important;
  }

  .ubtans-ritual-title {
    font-size: 1.4rem !important;
  }

  /* ---- Reduce all section paddings further ---- */
  section,
  .shop-by-category,
  .all-products-section,
  .skincare-hero,
  .ubtans-ritual {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .ubtans-ritual-grid {
    margin: 0 -0.5rem 1.5rem -0.5rem !important;
    padding: 0 0.5rem !important;
  }

  /* ---- Product card buttons ---- */
  .product-card .product-link,
  .product-card .btn,
  .product-card button {
    min-height: 40px !important;
    font-size: 0.75rem !important;
    padding: 0.6rem !important;
  }
}

/* ============================================
   FOLD PHONE UNFOLDED / SQUARE DISPLAY: 601px–768px
   (Galaxy Z Fold unfolded inner screen ≈ 720×760)
   This range is often treated as "tablet-ish" but
   should use better-proportioned 2-col layouts.
   ============================================ */
@media screen and (min-width: 601px) and (max-width: 768px) {

  /* ---- Product grids: 2 columns with better sizing ---- */
  .products-grid,
  .product-grid,
  .category-products .product-grid,
  .skincare-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Bigger images for larger viewport ---- */
  .product-card .product-image,
  .product-card > .product-image {
    min-height: 200px !important;
    aspect-ratio: 1 / 1 !important;
  }

  .product-card .product-info h3,
  .product-card .product-info .product-name {
    font-size: 0.9375rem !important;
  }

  /* ---- Bestsellers: show 2 cards with peek ---- */
  .bestsellers-grid {
    padding: 0 24px !important;
    gap: 20px !important;
  }

  .bestsellers-grid .ou-product-card,
  .bestsellers-grid .bestseller-card {
    flex: 0 0 45% !important;
    min-width: 45% !important;
    max-width: 45% !important;
  }

  .bestseller-image-wrapper {
    aspect-ratio: 1 / 1 !important;
  }

  /* ---- Category grid: 2 columns but taller images ---- */
  .shop-by-category .homepage-categories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .homepage-category-image {
    aspect-ratio: 3 / 4 !important;
  }

  /* ---- Ubtan ritual: show 1.4 cards ---- */
  .ubtan-ritual-card {
    flex: 0 0 72% !important;
    min-width: 72% !important;
  }

  /* ---- Section headings ---- */
  .bestsellers-header h2 {
    font-size: 2.2rem !important;
  }

  .ubtans-ritual-title {
    font-size: 1.9rem !important;
  }

  /* ---- Cart: still single column on this range ---- */
  .cart-page-body .cart-content {
    flex-direction: column !important;
  }

  /* ---- Checkout: single column ---- */
  .checkout-page .checkout-content {
    grid-template-columns: 1fr !important;
  }

  /* ---- Trust strip: more items per row ---- */
  .trust-signal {
    min-width: 100px !important;
  }
}

/* ============================================
   LANDSCAPE NARROW PHONES
   (Fold phones in landscape + small phones rotated)
   ============================================ */
@media screen and (max-height: 430px) and (orientation: landscape) {

  /* Reduce hero height drastically in landscape */
  .hero-section,
  .skincare-hero,
  .haircare-hero {
    min-height: auto !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* Single row grid in landscape */
  .products-grid,
  .product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Smaller product images in landscape */
  .product-card .product-image,
  .product-card > .product-image {
    min-height: 100px !important;
    aspect-ratio: 1 / 1 !important;
  }

  /* Bestsellers: show 2.5 cards in landscape */
  .bestsellers-grid .ou-product-card,
  .bestsellers-grid .bestseller-card {
    flex: 0 0 38% !important;
    min-width: 38% !important;
    max-width: 38% !important;
  }

  /* Reduce section padding */
  .bestsellers-section,
  .ubtans-ritual,
  .shop-by-category {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}