/* mobile-fix.css — minimal mobile-only adjustments (<=768px)
   Purpose: Make pages fit phone width and ensure header nav links are visible/clickable.
   Non-invasive — only applies when viewport <= 768px via media link in each HTML.
*/

/* General page fit */
html, body { width:100%; box-sizing: border-box; -webkit-text-size-adjust:100%; }
body { margin:0; padding:10px; -webkit-font-smoothing:antialiased; }
img, video, iframe { max-width:100% !important; height:auto !important; display:block !important; }

/* Make main container flow nicely on small screens */
main, .container, .home-hero-inner { max-width:100% !important; padding:0 !important; }

/* Header: keep logo and show nav links in a horizontal scrollable row so they're easily clickable */
.header { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:8px; padding:8px 0 !important; }
.header .logo img { max-height:44px; width:auto; }

/* Make the section immediately after the header smaller on mobile
   - Reduce padding/margins for controls and hero areas
   - Limit hero/intro heights so content doesn't push too far down
   This is mobile-only via the file's media link in HTML. */
.controls-bar {
   padding: 6px 8px !important;
   gap: 6px !important;
}

main, .about-hero, .home-hero, .hero-section {
   padding-top: 6px !important;
   padding-bottom: 8px !important;
   margin-top: 0 !important;
}

.about-hero img, .home-hero img, .hero-section img {
   max-height: 160px !important; /* cap large hero images */
   object-fit: cover !important;
}

.about-hero h2, .hero-section h1, .home-hero h1 {
   font-size: 1.25rem !important;
   margin: 8px 0 !important;
}

/* Reduce header logo size slightly to free vertical space */
.header .logo img { max-height:36px !important; }

/* Ensure nav is visible and touch-friendly */
.main-nav { display:flex !important; flex-direction:row !important; gap:8px !important; align-items:center !important; padding:0 4px !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
.main-nav a { padding:8px 10px !important; white-space:nowrap !important; font-size:15px !important; border-radius:8px; text-decoration:none; }

/* Make menu-toggle non-intrusive (leave it present but don't hide functionality) */
.menu-toggle { margin-left:8px; }

/* Hide the hamburger toggle on narrow screens so the nav links are directly accessible */
.menu-toggle { display: none !important; }

/* Controls: Position search in header for mobile, auth buttons + cart side-by-side */
.controls-bar {
   display: flex !important;
   flex-direction: row !important;
   flex-wrap: wrap !important;
   gap: 8px !important;
   padding: 8px 0 !important;
   align-items: center !important;
   padding-top: 60px !important; /* Space for fixed search bar */
}

/* Position search bar in header */
.Search-bar {
   position: fixed !important;
   top: 15px !important;
   right: 60px !important;
   z-index: 1100 !important;
   max-width: 200px !important;
   background: transparent !important;
}

.Search-bar input[type="text"], 
.Search-bar input[type="search"] {
   width: 140px !important;
   padding: 6px 8px !important;
   font-size: 14px !important;
   border-radius: 4px !important;
   border: 1px solid #ddd !important;
   background: white !important;
   box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

.Search-bar button {
   padding: 6px 8px !important;
   font-size: 14px !important;
   border: none !important;
   background: transparent !important;
   color: #2ecc71 !important;
}

/* Auth controls and cart appear on the next row, side-by-side */
.auth-controls { display:flex !important; gap:8px !important; align-items:center !important; }
.auth-controls .auth-btn { font-size:16px !important; padding:10px 14px !important; min-height:44px !important; }
.cart-icon{ position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #4CAF50 !important; color: white !important; padding: 6px 8px !important; border-radius: 6px !important; box-shadow: 0 1px 6px rgba(0,0,0,0.08) !important; z-index: 10 !important; transition: transform 0.15s !important; font-size: 14px !important; }
.cart-icon i, .cart-icon .fa, .cart-icon .fas { font-size: 16px !important; line-height:1 !important; }
.cart-icon .cart-count{ position: relative !important; top: auto !important; right: auto !important; margin-left:6px !important; background:#e74c3c; color:#fff; min-width:18px; height:18px; font-size:11px; padding:0 4px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; }

/* Product lists: single column flow for readability */
.product, .male-product, .shop-main { display:block !important; width:100% !important; padding:8px 0 !important; }
.product .card, .male-product .card { width:100% !important; margin-bottom:14px !important; padding:10px !important; box-sizing:border-box; border-radius:10px; background:#fff; }
.product .card img, .male-product .card img { width:100% !important; height:auto !important; max-height:360px; object-fit:cover; border-radius:8px; }
.product .card h3 { font-size:1.05rem !important; margin:8px 0 !important; }
.product .card p { font-size:0.95rem !important; margin:6px 0 10px !important; color:#333; }

/* Make CTA buttons larger and easier to tap */
.btn-primary, .btn-ghost, .auth-btn { font-size:16px !important; padding:10px 14px !important; min-height:44px !important; }

/* Slightly increase nav link size for easier tapping */
.main-nav a { font-size:16px !important; padding:10px 12px !important; }

/* Footer spacing */
.site-footer { padding:18px 0 !important; }

/* Avoid horizontal scroll caused by fixed elements */
html, body { overflow-x:hidden !important; }

/* Small adjustments for touch targets */
button, .btn-primary, .btn-ghost, .auth-btn, .main-nav a { min-height:40px; }

/* Keep modals usable on mobile */
.modal .modal-content { width:94% !important; max-width:420px !important; margin:0 auto !important; }

/* Minor accessibility: increase font-size for small screens if needed */
body { font-size: 16px; }

/* Homepage: show product lists (both female and male) as horizontal scroll rows on mobile */
.hero-section ~ section .product,
.home-hero ~ section .product,
.hero-section ~ section .male-product,
.home-hero ~ section .male-product {
   display: flex !important;
   flex-direction: row !important;
   gap: 12px !important;
   overflow-x: auto !important;
   -webkit-overflow-scrolling: touch !important;
   padding: 12px 4px !important;
}

.hero-section ~ section .product .card,
.home-hero ~ section .product .card,
.hero-section ~ section .male-product .card,
.home-hero ~ section .male-product .card {
   min-width: 220px !important;
   flex: 0 0 auto !important;
   width: auto !important;
   margin-bottom: 0 !important; /* Remove bottom margin since we're using gap */
}

/* Ensure consistent card styling for male products */
.male-product .card {
   background: #fff !important;
   border-radius: 10px !important;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
   transition: transform 0.2s ease !important;
}

.male-product .card:hover {
   transform: translateY(-2px) !important;
   box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Shop page: collapse categories to top bar and show products as a responsive grid */
   /* Shop page: collapsible categories sidebar for mobile */
   .shop-layout { 
      display: block !important; 
      margin: 0 !important;
      position: relative !important;
   }

   /* Categories toggle button */
   .categories-toggle {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      padding: 8px 12px !important;
      background: #2ecc71 !important;
      color: white !important;
      border: none !important;
      border-radius: 4px !important;
      position: fixed !important;
      left: 10px !important;
      top: 70px !important;
      z-index: 1000 !important;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
      cursor: pointer !important;
   }

   .categories-toggle::before {
      content: "Categories" !important;
      font-size: 14px !important;
   }

   .categories-toggle::after {
      content: "↓" !important;
      font-size: 12px !important;
      transition: transform 0.3s !important;
   }

   /* Categories sidebar */
   .shop-categories {
      position: fixed !important;
      left: 0 !important;
      top: 110px !important; /* Below toggle button */
      width: 200px !important;
      height: calc(100vh - 110px) !important;
      background: white !important;
      box-shadow: 2px 0 5px rgba(0,0,0,0.1) !important;
      transform: translateX(-100%) !important;
      transition: transform 0.3s ease !important;
      z-index: 999 !important;
      padding: 15px !important;
      overflow-y: auto !important;
   }

   /* Categories list styling */
   .shop-categories ul {
      display: flex !important;
      flex-direction: column !important;
      gap: 10px !important;
      padding: 0 !important;
      margin: 0 !important;
   }

   .shop-categories li {
      display: block !important;
   }

   .shop-categories a {
      display: block !important;
      padding: 8px 12px !important;
      color: #333 !important;
      text-decoration: none !important;
      border-radius: 4px !important;
      transition: background-color 0.2s !important;
   }

   .shop-categories a:hover {
      background-color: #f0f0f0 !important;
   }

   /* Show categories when active */
   .shop-categories.active {
      transform: translateX(0) !important;
   }

   /* Rotate arrow when active */
   .categories-toggle.active::after {
      transform: rotate(180deg) !important;
   }
.shop-main { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 12px !important; padding: 0 6px !important; }
.shop-main .card { width:100% !important; margin:0 !important; padding:10px !important; box-sizing:border-box !important; }

/* Ensure product images inside shop grid behave */
.shop-main .card img { width:100% !important; height:auto !important; object-fit:cover !important; border-radius:8px !important; }

/* Mobile: show two products per row in shop-main and prevent overlap */
.shop-main {
   display: grid !important;
   grid-template-columns: repeat(2, 1fr) !important;
   gap: 12px !important;
   align-items: start !important;
}

.shop-main .card {
   width: 100% !important; /* fill grid cell */
   box-sizing: border-box !important;
   display: block !important;
}

/* Ensure any .product / .male-product lists inside shop-main also respect the grid */
.shop-main .product, .shop-main .male-product {
   display: contents !important; /* let cards be direct grid items */
}

/* Make sure images and content do not overlap by giving card inner spacing */
.shop-main .card img {
   display: block !important;
   width: 100% !important;
   height: auto !important;
}

/* For very small screens, switch to single column if needed to avoid cramped layout */
@media (max-width: 420px) {
   .shop-main { grid-template-columns: 1fr !important; }
}

/* Product page: on mobile show the .product list as a horizontal, touch-scrollable
   row (like the female section on the homepage). This is scoped to the .product
   container that Products.js fills on Product.html and is mobile-only via the
   media link in HTML. */
main > section > .product {
   display: flex !important;
   flex-direction: row !important;
   gap: 12px !important;
   overflow-x: auto !important;
   -webkit-overflow-scrolling: touch !important;
   padding: 12px 6px !important;
   box-sizing: border-box !important;
   align-items: flex-start !important;
   /* allow a comfortable touch area at the end */
   padding-bottom: 18px !important;
}

/* Each product is output with .single-product — give a consistent card width */
main > section > .product .single-product {
   min-width: 220px !important;
   flex: 0 0 auto !important;
   width: auto !important;
   margin: 0 !important;
   padding: 10px !important;
   box-sizing: border-box !important;
   background: #fff !important;
   border-radius: 10px !important;
   box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
   text-align: center !important;
}

/* Images and text inside the cards */
main > section > .product .single-product img {
   display: block !important;
   width: 100% !important;
   height: 160px !important;
   object-fit: cover !important;
   border-radius: 8px !important;
}

main > section > .product .single-product h3 {
   font-size: 1rem !important;
   margin: 8px 0 6px !important;
}

main > section > .product .single-product p {
   font-size: 0.95rem !important;
   margin: 4px 0 8px !important;
   color: #333 !important;
}

/* Improve touch-snapping UX */
main > section > .product { scroll-snap-type: x proximity; }
main > section > .product .single-product { scroll-snap-align: start; }

/* Fallback for very small screens: slightly reduce card min-width */
@media (max-width: 420px) {
   main > section > .product .single-product { min-width: 200px !important; }
}