/*
Theme Name: Flatsome Child
Theme URI: https://vaithunphusang.com
Description: Flatsome Child Theme
Author: Vai Thun Phu Sang
Author URI: https://vaithunphusang.com
Template: flatsome
Version: 1.0.0
Text Domain: flatsome-child
*/

/* ============================================
   MOBILE OPTIMIZATION - Flatsome Child Theme
   vaithunphusang.com
   ============================================ */

/* === 1. GLOBAL MOBILE BASE === */
@media (max-width: 767px) {

  /* Body & Typography */
  body {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 18px !important; }
  h4 { font-size: 16px !important; }
  p, li, a { font-size: 14px !important; }

  /* Container full width */
  .container, .row {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* === 2. MOBILE HEADER === */
  #header {
    position: sticky !important;
    top: 0;
    z-index: 9999;
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }

  /* Logo size on mobile */
  .header-logo img,
  .logo img {
    max-height: 48px !important;
    width: auto !important;
  }

  /* Mobile nav bar height */
  #mobile-menu .nav-bar,
  .mobile-nav {
    min-height: 56px !important;
  }

  /* Hamburger icon bigger & easier to tap */
  .nav-toggle,
  button.nav-toggle,
  #nav-icon {
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Mobile menu items: dễ bấm hơn */
  .mobile-nav li a,
  #mobile-nav li a {
    font-size: 15px !important;
    padding: 14px 16px !important;
    display: block;
    border-bottom: 1px solid #f0f0f0;
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* Header cart & search icons */
  .header-button a,
  .cart-icon a {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* === 3. HERO / BANNER SECTION === */
  .banner, .section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  .banner h1, .banner h2 {
    font-size: 22px !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
  }

  .banner p {
    font-size: 14px !important;
  }

  /* === 4. PRODUCT GRID (WooCommerce) === */
  /* 2 cột trên mobile */
  .products.columns-4,
  .products.columns-3,
  ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  ul.products li.product {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Product card */
  .product-small .box {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  }

  /* Product title */
  .product-small .name a,
  ul.products .woocommerce-loop-product__title {
    font-size: 13px !important;
    line-height: 1.4 !important;
    padding: 6px 8px !important;
  }

  /* Product price */
  ul.products .price,
  .product-small .price {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #e44d26 !important;
    padding: 0 8px 8px !important;
  }

  /* Product image full width */
  .product-small img,
  ul.products li.product img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    aspect-ratio: 1 / 1;
  }

  /* Add to cart button */
  ul.products .button,
  .product .add_to_cart_button {
    font-size: 12px !important;
    padding: 8px 10px !important;
    width: 100% !important;
    text-align: center !important;
    border-radius: 4px !important;
  }

  /* === 5. SINGLE PRODUCT PAGE === */
  .product .summary {
    padding: 16px 12px !important;
  }

  .product .product_title {
    font-size: 20px !important;
    margin-bottom: 12px !important;
  }

  .product .price {
    font-size: 22px !important;
    color: #e44d26 !important;
  }

  /* Quantity & add to cart on mobile */
  .product form.cart {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: wrap;
  }

  .product form.cart .qty {
    width: 60px !important;
    height: 44px !important;
    font-size: 16px !important;
    text-align: center;
  }

  .product form.cart .single_add_to_cart_button {
    flex: 1;
    min-height: 44px !important;
    font-size: 15px !important;
  }

  /* === 6. CATEGORY PAGE === */
  .shop-title h1,
  .woocommerce-products-header__title {
    font-size: 20px !important;
  }

  /* === 7. SECTIONS & ROWS === */
  .row.large-columns-3 > .col,
  .row.large-columns-4 > .col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* === 8. BUTTONS GLOBAL === */
  .button, button, input[type="submit"] {
    min-height: 44px !important;
    font-size: 14px !important;
    padding: 10px 18px !important;
    cursor: pointer;
  }

  /* === 9. FORMS === */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important; /* Prevent iOS zoom */
    padding: 10px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* === 10. FOOTER === */
  .footer-widgets .col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 20px !important;
  }

  .footer-bottom {
    text-align: center !important;
    font-size: 12px !important;
  }

  /* === 11. TABS (Product description, etc.) === */
  .tabs li a {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  /* === 12. BREADCRUMBS === */
  .breadcrumbs {
    font-size: 12px !important;
    padding: 8px 0 !important;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* === 13. STICKY ADD TO CART (Single product) === */
  .is-sticky-column .product-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background: #fff;
    padding: 10px 16px;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.12);
    display: flex;
    gap: 10px;
    align-items: center;
  }

  /* === 14. HIDE UNNECESSARY ELEMENTS ON MOBILE === */
  .hide-for-small { display: none !important; }
  .show-for-small { display: block !important; }

  /* === 15. SEARCH BAR === */
  .search-form input[type="search"] {
    font-size: 16px !important;
    padding: 12px !important;
    border-radius: 4px !important;
  }

} /* end @media 767px */

/* === TABLET (768px - 1024px) === */
@media (min-width: 768px) and (max-width: 1024px) {

  ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }

  h1 { font-size: 28px !important; }
  h2 { font-size: 24px !important; }

  .row.large-columns-4 > .col {
    width: 33.333% !important;
    flex: 0 0 33.333% !important;
  }

} /* end tablet */