/*!
 * CraftyWorth Responsive System
 * Edit this file to change responsive behavior site-wide.
 *
 * BREAKPOINTS:
 *   Mobile:  max-width 768px
 *   Tablet:  max-width 1024px
 *   Desktop: min-width 1025px
 *
 * TOKENS (defined in design-system.css :root):
 *   --page-pad  = horizontal padding
 *   --page-max  = max container width
 *   --text-*    = fluid font sizes
 *   --space-*   = fluid spacing
 */

/* ===========================================
   GLOBAL SAFETY NET
=========================================== */
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe, svg { max-width: 100%; height: auto; }

/* Touch targets */
a, button, [role="button"], label, select {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(160,41,62,.1);
}

/* ===========================================
   CONTAINERS - edit once, applies everywhere
=========================================== */
.cw-container {
  width: 100%;
  max-width: var(--page-max, 1320px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-pad, 40px);
  padding-right: var(--page-pad, 40px);
}

/* ===========================================
   TABLET <=1024px
=========================================== */
@media (max-width: 1024px) {
  .cw-container { --page-pad: 24px; }

  /* 2-col -> 2-col (no change) but tighter */
  .cw-product-studio__hero-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .cwpdp__hero { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* ===========================================
   MOBILE <=768px - ALL mobile rules here
=========================================== */
@media (max-width: 768px) {

  /* -- Container -- */
  .cw-container { --page-pad: 14px; }

  /* -- Typography -- */
  input, select, textarea { font-size: 16px !important; }

  /* -- Touch targets -- */
  button, .button, a.button, .cw-btn,
  .woocommerce-button, input[type="submit"] {
    min-height: 44px;
  }

  /* -- Tables -> scrollable -- */
  .woocommerce-table,
  .shop_table,
  .woocommerce-orders-table,
  .woocommerce-cart-form__cart-item {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* -- Forms -> full width -- */
  .woocommerce-checkout form,
  .woocommerce-cart form,
  .woocommerce input[type="text"],
  .woocommerce input[type="email"],
  .woocommerce input[type="tel"],
  .woocommerce input[type="password"],
  .woocommerce textarea,
  .woocommerce select {
    width: 100% !important;
    max-width: 100%;
  }

  /* -- HEADER -- */
  .cw-header__inner {
    height: 56px !important;
    padding: 0 12px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
  }
  .cw-ham {
    order: 1; flex-shrink: 0;
    width: 44px; height: 44px;
    display: inline-flex !important;
  }
  .cw-logo {
    /* flex layout — no absolute positioning to prevent merge with ham/icons */
    position: static !important;
    left: auto !important;
    transform: none !important;
    order: 1;
    flex: 1;
    justify-content: center;
    max-width: none;
    min-width: 0;
    overflow: visible;
    pointer-events: auto;
  }
  .cw-logo img { height: 30px; width: auto; max-width: 120px; object-fit: contain; }
  .cw-logo__text b { font-size: 16px; white-space: nowrap; }
  .cw-logo__text small { display: none !important; }
  .cw-search-wrap { display: none !important; }
  .cw-search-trigger {
    display: inline-flex !important;
    margin-left: auto !important;
    order: 3; flex-shrink: 0;
    width: 44px; height: 44px;
  }
  .cw-hicons {
    order: 4; gap: 0;
    margin-left: 0 !important;
  }
  .cw-hicon {
    width: 44px; height: 44px;
    padding: 0;
    justify-content: center;
    flex-shrink: 0;
  }
  .cw-hicon span { display: none !important; }
  .cw-hicon[data-hide-mobile] { display: none !important; }
  .cw-catnav { display: none !important; }
  /* Shrink disabled on mobile */
  .cw-header.is-shrunk .cw-header__inner { height: 56px !important; }
  .cw-header.is-shrunk .cw-catnav { display: none !important; }

  /* -- ANNOUNCEMENT BAR -- */
  .cw-announce {
    font-size: 11px;
    min-height: 32px;
    height: auto;
    white-space: normal;
    padding: 6px 40px 6px 12px;
    text-overflow: clip;
    overflow: visible;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
  }
  .cw-announce a { font-size: 11px; }
  .cw-announce__close {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* -- PRODUCT CARDS -- */
  .cw-card, ul.products li.product, .products .product { min-width: 0; }
  .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* -- PRODUCT PAGE -- */
  .cwpdp__hero,
  .cw-product-studio__hero-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding-top: 0 !important;
  }
  .cwpdp__gallery,
  .cw-product-gallery { position: static !important; top: auto !important; }
  .cwpdp__main-wrap { border-radius: 0 !important; }
  .cwpdp__sum,
  .cw-product-summary { padding: 16px !important; position: static !important; max-height: none !important; }
  .cwpdp__timeline { grid-template-columns: repeat(2, 1fr) !important; }
  .cwpdp form.cart,
  .cw-product-summary__cart form.cart { display: flex !important; flex-direction: column !important; gap: 10px !important; }
  .cwpdp .quantity,
  .cwpdp .quantity .qty { width: 100% !important; }
  .cwpdp .single_add_to_cart_button {
    width: 100% !important; height: 52px !important;
    border-radius: 999px !important; margin: 0 !important;
  }

  /* -- QUICK VIEW MODAL -- */
  .cwv2-qv-overlay { padding: 0; align-items: flex-end; }
  .cwv2-qv-modal {
    border-radius: 16px 16px 0 0;
    max-height: 90dvh !important;
    width: 100%;
    max-width: 100%;
  }
  .cwv2-qv-inner { grid-template-columns: 1fr !important; }
  .cwv2-qv-body { padding: 16px; }

  /* -- SIDE CART DRAWER -- */
  .cwv2-cart-drawer__panel {
    width: 100vw !important;
    max-width: 100vw !important;
    right: 0 !important;
    border-radius: 0 !important;
  }

  /* -- MY ACCOUNT -- */
  .cw-login-page { grid-template-columns: 1fr !important; min-height: auto !important; }
  .cw-login-visual { min-height: 200px !important; padding: 28px 20px !important; }
  .cw-login-form-wrap { padding: 0 !important; }
  .cw-login-form { padding: 24px 16px !important; }
  .cw-login-card { grid-template-columns: 1fr !important; border-radius: 0 !important; box-shadow: none !important; }
  .cw-login-wrap { padding: 0 !important; margin: 0 !important; }
  .cw-acct-grid { grid-template-columns: 1fr !important; }
  .cw-acct-nav { position: static !important; top: auto !important; }
  .cw-acct-nav ul {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    gap: 4px !important;
  }
  .cw-acct-nav ul::-webkit-scrollbar { display: none; }
  .cw-acct-nav a { white-space: nowrap; flex-shrink: 0; min-height: 44px; }

  /* -- QUOTE REQUEST -- */
  .cw-quote-page { padding: 0 !important; }
  .cw-quote-hero { padding: 32px 16px !important; }
  .cw-quote-hero__inner { grid-template-columns: 1fr !important; gap: 20px !important; }
  .cw-quote-body { grid-template-columns: 1fr !important; padding: 20px 16px !important; }
  .cw-quote-sidebar { order: -1; }

  /* -- FOOTER -- */
  .cw-footer__main {
    grid-template-columns: 1fr !important;
    padding: 40px 16px 24px !important;
    gap: 24px !important;
  }
  .cw-footer__brand { grid-column: 1 / -1; }
  .cw-footer__bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
    padding: 14px 16px calc(80px + env(safe-area-inset-bottom)) !important;
  }
  .cw-footer__trust, .cw-footer__pay {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  /* -- SCROLL TO TOP -- */
  .cwv2-scroll-top { bottom: 76px !important; right: 12px !important; }

  /* -- CART/CHECKOUT -- */
  .woocommerce-cart .woocommerce,
  .woocommerce-checkout .woocommerce { padding: 0 14px !important; }
  .cart-collaterals { width: 100% !important; }
  .woocommerce-checkout #payment { border-radius: 8px; }

  /* -- CW ADMIN -- */
  .cw-final-admin-sidebar {
    position: fixed; left: -100%; width: 88vw;
    transition: left .25s; z-index: 999;
  }
  .cw-final-admin-sidebar.open { left: 0; }
  .cw-final-admin-content { padding: 12px !important; }
  .cw-admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cw-prod-kpi { grid-template-columns: repeat(2, 1fr) !important; }

  /* -- HOMEPAGE -- */
  .cw-hero { min-height: 380px !important; }
  .cw-hero__title { font-size: clamp(22px, 6vw, 32px) !important; }
  .cw-trust__inner { grid-template-columns: repeat(2, 1fr) !important; }
  .cw-cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* -- ELEMENTOR SLOTS -- */
  .cw-elementor-slot,
  .elementor-section,
  .elementor-container,
  .elementor-row {
    max-width: 100% !important;
    overflow-x: hidden;
  }

  /* -- SAFE AREAS -- */
  .cwpdp__sticky, .cw-sticky-cta {
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
  .cw-tabbar {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
}

/* ===========================================
   SMALL PHONES <=420px
=========================================== */
@media (max-width: 420px) {
  .cwpdp__timeline { grid-template-columns: 1fr !important; }
  .cwpdp__mini { grid-template-columns: 1fr !important; }
  .cw-acct-hero { padding: 14px !important; }
  .cw-tile-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .cw-login-tabs button { font-size: 12px; padding: 0 8px; }
}

/* ===========================================
   VISIBILITY HELPERS - use in HTML for single-edit control
=========================================== */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
  .show-mobile-flex { display: flex !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
  .show-desktop { display: block !important; }
  .show-desktop-flex { display: flex !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .hide-tablet { display: none !important; }
  .show-tablet { display: block !important; }
}

/* ===========================================
   CRASH/OVERLAP/Z-INDEX FIXES (audit 2026-05-18)
=========================================== */

/* ── Fix 1: Product grid — 3 columns on tablet (1024px) ── */
@media (max-width: 1024px) and (min-width: 641px) {
  .cw-products { grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important; }
}

/* ── Fix 2: My Account nav — momentum scrolling on iOS ── */
@media (max-width: 820px) {
  .cw-acct-nav ul {
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
  }
  .cw-acct-nav li a {
    scroll-snap-align: start !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-height: 44px !important;
  }
}

/* ── Fix 3: Login page — no horizontal scroll on 320px phones ── */
@media (max-width: 768px) {
  .cw-login-page {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    overflow-x: hidden !important;
  }
  .cw-login-visual {
    min-height: 160px !important;
    padding: 24px var(--px) !important;
  }
}

/* ── Fix 4: Sticky CTA clears tabbar on product pages ── */
@media (max-width: 768px) {
  .cwpdp__sticky.vis {
    bottom: calc(62px + env(safe-area-inset-bottom, 0)) !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0)) !important;
  }
}

/* ── Fix 5: Quick View modal clears admin bar ── */
body.admin-bar .cwv2-qv-overlay {
  top: 32px !important;
}
@media (max-width: 782px) {
  body.admin-bar .cwv2-qv-overlay {
    top: 46px !important;
  }
}

/* ── Fix 6: Announcement bar close button stays top-right ── */
.cw-announce__close {
  position: absolute !important;
  right: 6px !important;
  top: 8px !important;
  transform: none !important;
  padding: 6px !important;
}
.cw-announce {
  position: relative !important;
  padding-right: 44px !important;
}

/* ── Fix 7: Z-index harmony — prevent overlap conflicts ── */
.cw-header        { z-index: 100 !important; }
.cw-sdrop         { z-index: 150 !important; }
.cw-backdrop      { z-index: 200 !important; }
.cw-drawer        { z-index: 210 !important; }
.cw-search-overlay{ z-index: 220 !important; }
.cw-tabbar        { z-index: 102 !important; } /* above header */
.cw-wa            { z-index: 103 !important; } /* above tabbar */
.cwv2-cart-drawer__panel { z-index: 300 !important; }
.cwv2-qv-overlay  { z-index: 400 !important; }
.cw-cookie        { z-index: 500 !important; }

/* ── Fix 8: Footer — clear tabbar on mobile ── */
@media (max-width: 768px) {
  .cw-footer__bottom {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0)) !important;
  }
}

/* ── Homepage overflow guard (merged from cw-mobile-home-products-fix mu-plugin) ── */
@media (max-width: 640px) {
  body.home, body.front-page {
    overflow-x: hidden;
  }
  body.home section, body.front-page section {
    max-width: 100%;
  }
  /* cw-product-slider uses horizontal scroll by default — no changes needed */
  /* Individual card sizes handled by product-card.css */
}

/* ── Footer mobile phone number nowrap + single column fix ── */
@media (max-width: 480px) {
  .cw-footer__main {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .cw-footer__col { width: 100%; }
  .cw-footer a[href*="wa.me"],
  .cw-footer a[style*="flex"] {
    white-space: nowrap !important;
  }
}