/* ==========================================================================
   LEMO × CSB — custom-responsive.css
   Tablet + Mobile breakpoints
   ========================================================================== */

/* ==========================================================================
   LARGE TABLET / SMALL DESKTOP — max 1199px
   ========================================================================== */
@media (max-width: 1199px) {
  body.lemo-csb-mode .woocommerce ul.products,
  body.lemo-csb-mode .products.columns-4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  body.lemo-home .lemo-hero-content { padding: 48px 32px !important; }
  body.lemo-product div.product .summary {
    padding: 36px 32px !important;
  }
}

/* ==========================================================================
   TABLET — max 1024px
   ========================================================================== */
@media (max-width: 1024px) {
  /* Hide desktop nav */
  body.lemo-csb-mode .mnmg-main-menu,
  body.lemo-csb-mode .main-navigation,
  body.lemo-csb-mode .primary-menu-wrapper {
    display: none !important;
  }

  /* Show mobile toggle */
  body.lemo-csb-mode .mobile-menu-toggle,
  body.lemo-csb-mode .nav-toggle,
  body.lemo-csb-mode [data-toggle="mobile-menu"] {
    display: inline-flex !important;
  }

  /* Shop grid: 3 cols */
  body.lemo-csb-mode .woocommerce ul.products,
  body.lemo-csb-mode .products.columns-4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Single product: stacked */
  body.lemo-product div.product,
  body.lemo-product .woocommerce div.product {
    grid-template-columns: 1fr !important;
  }
  body.lemo-product div.product .summary {
    position: static !important;
    max-height: none !important;
    padding: 32px 24px !important;
  }
  body.lemo-product .woocommerce-breadcrumb {
    padding: 16px 24px 0 !important;
  }
  body.lemo-product .woocommerce-product-gallery__wrapper {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Homepage adjustments */
  body.lemo-home .lemo-hero { min-height: 70vh !important; }
  body.lemo-home .lemo-hero-content {
    padding: 32px 24px !important;
    max-width: 100% !important;
  }

  .lemo-collection-grid--featured {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    min-height: auto !important;
  }
  .lemo-coll-card--featured {
    grid-row: auto !important;
    grid-column: 1 / 3 !important;
    min-height: 360px;
  }

  .lemo-review-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .lemo-split-hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .lemo-ig-strip {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .lemo-usp-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .lemo-usp-item:nth-child(2) { border-right: none !important; }
  .lemo-usp-item:nth-child(3), .lemo-usp-item:nth-child(4) {
    border-top: 1px solid var(--lemo-gray-150) !important;
  }

  /* Mega menu hidden on tablet — use mobile drawer */
  body.lemo-csb-mode .mega-menu { display: none !important; }

  /* Cart drawer slightly narrower */
  body.lemo-csb-mode .cart-drawer,
  body.lemo-csb-mode .mnmg-cart-drawer,
  body.lemo-csb-mode .cart-panel {
    width: min(380px, 95vw) !important;
  }
}

/* ==========================================================================
   MOBILE — max 768px
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --lemo-container: 100%;
    --lemo-gutter: 16px;
  }

  body.lemo-csb-mode { font-size: 14px; }

  /* Compact announcement */
  .lemo-announce { height: 32px !important; }
  .lemo-announce-item {
    padding: 0 24px !important;
    font-size: .66rem !important;
    gap: 24px !important;
  }

  /* Header */
  body.lemo-csb-mode .mnmg-header .mnmg-header-inner,
  body.lemo-csb-mode .header__inner {
    min-height: 56px !important;
    padding: 0 12px !important;
  }
  body.lemo-csb-mode .mnmg-header .site-logo img,
  body.lemo-csb-mode .custom-logo {
    max-height: 28px !important;
  }
  body.lemo-csb-mode .header-icon {
    width: 36px !important;
    height: 36px !important;
  }
  body.lemo-csb-mode .header-icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  /* Sticky toolbar adjustment */
  body.lemo-csb-mode .mnmg-shop-toolbar,
  body.lemo-csb-mode .shop-toolbar {
    top: 56px !important;
    padding: 10px 0 !important;
  }

  /* Shop grid: 2 cols mobile */
  body.lemo-csb-mode .woocommerce ul.products,
  body.lemo-csb-mode .products.columns-4,
  body.lemo-csb-mode .products.columns-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1px !important;
  }

  /* Product card mobile */
  body.lemo-csb-mode li.product .product-info,
  body.lemo-csb-mode li.product .product-content {
    padding: 10px 4px 16px !important;
  }
  body.lemo-csb-mode li.product .woocommerce-loop-product__title,
  body.lemo-csb-mode li.product h2,
  body.lemo-csb-mode li.product h3 {
    font-size: .78rem !important;
  }
  body.lemo-csb-mode li.product .price {
    font-size: .76rem !important;
  }

  /* Quick add button always visible on mobile */
  body.lemo-csb-mode li.product .button,
  body.lemo-csb-mode li.product .add_to_cart_button {
    position: static !important;
    transform: none !important;
    height: 38px !important;
    margin-top: 8px !important;
    border-radius: var(--lemo-r-xs) !important;
    font-size: .66rem !important;
  }

  /* Actions (wishlist/quick view) always visible */
  body.lemo-csb-mode .product .product-actions,
  body.lemo-csb-mode .product .wd-buttons {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Hero */
  body.lemo-home .lemo-hero { min-height: 75vh !important; }
  body.lemo-home .lemo-hero-content h1 {
    font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
  }
  body.lemo-home .lemo-hero-content p { font-size: .95rem !important; }
  body.lemo-home .lemo-hero-buttons { flex-direction: column !important; width: 100%; }
  body.lemo-home .lemo-hero-buttons .lemo-btn { width: 100%; }

  /* Collection grid stacks */
  .lemo-collection-grid--3 { grid-template-columns: 1fr 1fr !important; }
  .lemo-collection-grid--featured {
    grid-template-columns: 1fr !important;
  }
  .lemo-coll-card--featured {
    grid-column: 1 !important;
    min-height: 320px;
  }
  .lemo-coll-card { min-height: 240px !important; }

  /* Category chips */
  .lemo-cat-chips {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
  .lemo-cat-chip { padding: 8px 4px !important; }
  .lemo-cat-chip-label { font-size: .72rem !important; }

  /* Reviews */
  .lemo-review-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .lemo-review-card { padding: 20px !important; }

  /* Newsletter */
  .lemo-newsletter { padding: 56px 16px !important; }
  .lemo-newsletter form {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .lemo-newsletter input[type="email"] {
    border-right: 1.5px solid rgba(255,255,255,.3) !important;
    border-radius: var(--lemo-r-xs) !important;
  }
  .lemo-newsletter button {
    width: 100% !important;
    border-radius: var(--lemo-r-xs) !important;
  }

  /* Instagram strip */
  .lemo-ig-strip { grid-template-columns: repeat(2, 1fr) !important; }

  /* USP bar */
  .lemo-usp-grid { grid-template-columns: 1fr 1fr !important; }
  .lemo-usp-item {
    padding: 16px 8px !important;
    font-size: .7rem !important;
  }
  .lemo-usp-item strong { font-size: .74rem !important; }
  .lemo-usp-item span { font-size: .64rem !important; }

  /* Single product */
  body.lemo-product div.product .summary,
  body.lemo-product .entry-summary {
    padding: 24px 16px !important;
  }
  body.lemo-product .woocommerce-breadcrumb {
    padding: 12px 16px 0 !important;
  }
  body.lemo-product .woocommerce-product-gallery__wrapper {
    grid-template-columns: 1fr 1fr !important;
    gap: 2px !important;
  }
  body.lemo-product .woocommerce-product-gallery__image:first-child {
    grid-column: 1 / 3 !important;
  }
  body.lemo-product form.cart {
    flex-wrap: wrap !important;
  }
  body.lemo-product form.cart .quantity { width: auto !important; }
  body.lemo-product form.cart .single_add_to_cart_button {
    width: calc(100% - 62px) !important;
    flex: 1 !important;
  }
  body.lemo-product .yith-wcwl-add-to-wishlist {
    width: 100% !important;
    margin-top: 10px !important;
  }
  body.lemo-product .yith-wcwl-add-to-wishlist a {
    width: 100% !important;
  }

  .lemo-trust-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .lemo-trust-item {
    flex-direction: row !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 6px 0 !important;
  }

  /* Cart page */
  body.lemo-cart-page .woocommerce table.shop_table,
  body.lemo-cart-page .woocommerce table.shop_table thead {
    display: block !important;
  }
  body.lemo-cart-page .woocommerce table.shop_table thead { display: none !important; }
  body.lemo-cart-page .woocommerce table.shop_table tbody { display: block !important; }
  body.lemo-cart-page .woocommerce table.shop_table tr {
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    gap: 12px !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid var(--lemo-gray-150) !important;
  }
  body.lemo-cart-page .woocommerce table.shop_table td {
    border: none !important;
    padding: 2px 0 !important;
    display: block !important;
  }

  /* Search overlay */
  .lemo-search-overlay { padding: 24px 0 40px !important; }
  .lemo-search-head h3 { font-size: .7rem !important; }
  .lemo-search-input {
    font-size: 1.05rem !important;
    padding: 10px 40px 10px 0 !important;
  }

  /* Pagination */
  body.lemo-csb-mode .woocommerce nav.woocommerce-pagination ul li a,
  body.lemo-csb-mode .woocommerce nav.woocommerce-pagination ul li span {
    width: 36px !important;
    height: 36px !important;
    font-size: .78rem !important;
  }
}

/* ==========================================================================
   SMALL MOBILE — max 480px
   ========================================================================== */
@media (max-width: 480px) {
  .lemo-cat-chips { grid-template-columns: repeat(2, 1fr) !important; }

  body.lemo-home .lemo-hero-content h1 {
    font-size: 1.8rem !important;
  }
  .lemo-collection-grid--3 { grid-template-columns: 1fr !important; }
}