/* ========================================
   ZABOKA — Responsive pass
   Breakpoints:
     Desktop:  ≥ 1025px
     Tablet:   641px – 1024px
     Phone:    ≤ 640px
     Small:    ≤ 400px
   Loaded last so these rules win without !important.
======================================== */

/* ----------------------------------------
   GLOBAL — overflow & readability
---------------------------------------- */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

img, video, svg {
  max-width: 100%;
  height: auto;
}

/* Prevent iOS zoom on focus (all form inputs ≥16px) */
@media (max-width: 1024px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ----------------------------------------
   HEADER — nav vs hamburger visibility
---------------------------------------- */
/* Hamburger hidden on desktop */
@media (min-width: 1025px) {
  #mobile-menu-btn { display: none; }
}

/* Desktop nav hidden on tablet & phone */
@media (max-width: 1024px) {
  .header-nav { display: none !important; }
  .header-inner { height: 60px; padding: 0 16px; }
  .header-logo .site-name { font-size: 1.5rem; }
  .header-actions { gap: 10px; }
  .header-icon { width: 42px; height: 42px; }
}

/* ----------------------------------------
   MOBILE MENU PANEL
---------------------------------------- */
@media (max-width: 640px) {
  .mobile-nav-list li a {
    padding: 18px 0;
    font-size: 1.6rem;
  }
}

/* ----------------------------------------
   CART DRAWER — extend phone rules to 640
---------------------------------------- */
@media (max-width: 640px) {
  .zab-cart-drawer { width: 100vw; }
  .zab-cart-header { padding: 16px 18px; }
  .zab-cart-item {
    grid-template-columns: 72px 1fr auto;
    gap: 12px;
    padding: 16px 18px;
  }
  .zab-cart-item-img { width: 72px; height: 72px; }
  .zab-cart-footer { padding: 16px 18px; }
  .zab-qty-btn { width: 36px; height: 36px; font-size: 16px; }
  .zab-qty-num { width: 36px; height: 36px; line-height: 36px; }
  .zab-cart-btn-checkout { height: 56px; font-size: 1.2rem; }
}

/* ----------------------------------------
   HOMEPAGE — fill the 768–1024 tablet gap
   (existing rules jump from 1100 → 640)
---------------------------------------- */
@media (max-width: 1024px) and (min-width: 641px) {
  .zbk-hero-left { padding: 64px 32px; }
  .zbk-hero-title { font-size: clamp(4.5rem, 12vw, 7rem); }
  .zbk-products-grid,
  .zbk-collections-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .zbk-values-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zbk-section-header { padding: 0 24px; }
}

/* Hero mobile strip — simplify to a single featured tile on phone.
   The multi-tile grid breaks when products lack hero images and the
   .featured span-2 rule leaks into a 1-row grid. */
@media (max-width: 640px) {
  .zbk-hero-mobile-strip {
    height: auto;
    aspect-ratio: 16 / 10;
    min-height: 240px;
    max-height: 360px;
  }
  .zbk-hero-mobile-strip .zbk-hero-grid {
    display: block;
    height: 100%;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: 0;
  }
  /* Show only the featured tile; hide the rest */
  .zbk-hero-mobile-strip .zbk-hero-tile { display: none; }
  .zbk-hero-mobile-strip .zbk-hero-tile.featured {
    display: block;
    width: 100%;
    height: 100%;
    grid-row: auto;
  }
  .zbk-hero-mobile-strip .zbk-hero-tile.featured img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: brightness(0.9);
  }
  .zbk-hero-mobile-strip .zbk-tile-placeholder {
    width: 100%;
    height: 100%;
    min-height: 0;
  }
}

/* Phone tweaks on top of existing 640 rules */
@media (max-width: 640px) {
  .zbk-hero-eyebrow { font-size: 10px; }
  .zbk-cta-row { flex-direction: column; width: 100%; }
  .zbk-cta-primary,
  .zbk-cta-secondary {
    width: 100%;
    justify-content: center;
    min-height: 52px;
  }
  .zbk-identity-tags { gap: 6px; }
  .zbk-tag { font-size: 10px; padding: 4px 10px; }
  .zbk-story-text h2,
  .zbk-section-header h2 { font-size: clamp(2rem, 8vw, 3rem); }
  .zbk-story { padding: 48px 16px !important; }
  .zbk-newsletter { padding: 48px 16px !important; }
  .zbk-newsletter h2 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .zbk-values-inner,
  .zbk-section-header,
  .zbk-products-grid,
  .zbk-collections-grid { padding-left: 16px; padding-right: 16px; }
}

/* ----------------------------------------
   HERO (legacy / alt) — style.css .hero
---------------------------------------- */
@media (max-width: 640px) {
  .hero { min-height: 70vh; }
  .hero-content { padding: 48px 16px; gap: 32px; }
  .hero-cta { flex-direction: column; width: 100%; }
  .hero-cta .btn,
  .hero-cta a { width: 100%; text-align: center; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; }
  .hero-desc { font-size: 14px; }
}

/* ----------------------------------------
   SHOP / ARCHIVE
---------------------------------------- */
@media (max-width: 1024px) {
  .shop-wrap .container { padding-left: 16px; padding-right: 16px; }
  .products-grid,
  .zbk-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .shop-wrap { padding: 24px 0 56px !important; }
  .products-grid,
  .zbk-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  /* Shop header: stack title above result-count/ordering */
  .shop-wrap > .container > div:first-child {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .woocommerce-result-count,
  .woocommerce-ordering { width: 100%; }
  .woocommerce-ordering select {
    width: 100%;
    padding: 12px;
  }
}

@media (max-width: 400px) {
  .products-grid,
  .zbk-products-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------
   SINGLE PRODUCT
---------------------------------------- */
@media (max-width: 1024px) {
  .zbk-product-container { padding: 0 16px !important; }
  .zbk-product-title { font-size: clamp(2.4rem, 6vw, 3.4rem); }
}

@media (max-width: 640px) {
  .zbk-breadcrumb { font-size: 11px; flex-wrap: wrap; }
  .zbk-gallery__thumbs { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .zbk-purchase-card,
  .zbk-detail-card,
  .zbk-shipping-card { padding: 16px !important; }
  .zbk-size-grid .zbk-size-btn,
  .size-grid .size-btn {
    min-width: 48px;
    height: 48px;
    font-size: 14px;
  }
  .zbk-qty-input,
  .zbk-qty input { height: 48px; font-size: 16px; }
  .zbk-related-grid { gap: 12px; }
  .zbk-trust-row { gap: 10px; }
  /* Sticky add-to-cart bar: give it safe-area + big touch target */
  .zbk-sticky-atc {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    gap: 10px;
  }
  .zbk-sticky-atc .zbk-sticky-btn,
  .zbk-sticky-atc button,
  .zbk-sticky-atc a { min-height: 52px; font-size: 14px; }
  /* Make room at bottom so sticky bar doesn't cover page end */
  .zbk-product-wrap { padding-bottom: 80px; }
}

/* ----------------------------------------
   TOUCH TARGETS — 44px minimum everywhere
---------------------------------------- */
@media (max-width: 1024px) {
  .btn,
  .btn-primary,
  .btn-red,
  button.button,
  .woocommerce a.button,
  .woocommerce button.button {
    min-height: 44px;
  }
}

/* ----------------------------------------
   TOAST — keep above iOS bottom bar
---------------------------------------- */
@media (max-width: 640px) {
  .zbk-toast {
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 16px;
    right: 16px;
    transform: translateY(100px);
    width: auto;
    max-width: none;
    font-size: 12px;
    padding: 12px 20px;
  }
  .zbk-toast.show { transform: translateY(0); }
}

/* ----------------------------------------
   TABLES (account / cart / checkout) — horizontal scroll
---------------------------------------- */
@media (max-width: 768px) {
  .woocommerce table.shop_table,
  .woocommerce-cart table.cart,
  .woocommerce-MyAccount-content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/* ----------------------------------------
   CHECKOUT — stack form columns
---------------------------------------- */
@media (max-width: 768px) {
  .woocommerce-checkout .col2-set,
  .woocommerce-checkout form.checkout {
    display: block;
  }
  .woocommerce-checkout .col-1,
  .woocommerce-checkout .col-2 {
    width: 100%;
    max-width: 100%;
    float: none;
  }
  .woocommerce-checkout #order_review,
  .woocommerce-checkout #order_review_heading {
    width: 100%;
  }
}