/* ==========================================================================
   BASHI JEWELRY — Responsive Styles
   responsive.css — ALL media queries live here
   ========================================================================== */

/* --------------------------------------------------------------------------
   1280px — Large Desktop
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  :root {
    --container-pad: var(--space-5);
  }

  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }

  .footer-newsletter { /* Newsletter merges into its own row below */
    grid-column: 1 / -1;
    max-width: 500px;
  }
}

/* --------------------------------------------------------------------------
   1024px — Tablet Landscape / Small Laptop
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --section-padding-y: 56px;
    --section-gap: 48px;
  }

  .product-grid { grid-template-columns: repeat(4, 1fr); }
  .category-grid { grid-template-columns: repeat(5, 1fr); }
  .trust-grid { grid-template-columns: repeat(3, 1fr); }

  .page-layout {
    grid-template-columns: 220px 1fr;
    gap: var(--space-6);
  }

  .cart-layout {
    grid-template-columns: 1fr 300px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-8);
  }

  .footer-brand {
    grid-column: 1 / -1;
    max-width: 480px;
  }

  .footer-newsletter {
    grid-column: 1 / -1;
    max-width: 480px;
  }
}

/* --------------------------------------------------------------------------
   768px — Tablet Portrait
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --section-padding-y: 48px;
    --section-gap: 40px;
    --container-pad: var(--space-4);
    --header-main-h: 0px;       /* Desktop header hidden on mobile */
    --header-nav-h: 0px;
  }

  /* Show mobile header, hide desktop */
  .site-header { display: none; }
  .site-header--mobile { display: block; position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-white); border-bottom: var(--border); }
  .primary-nav { display: none; }
  .bottom-nav { display: flex; }

  /* Product Grid */
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap-mobile); }
  .product-grid--6col { grid-template-columns: repeat(3, 1fr); }
  .category-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }

  /* Page layouts go single column */
  .page-layout { grid-template-columns: 1fr; }
  .page-layout__sidebar { display: none; } /* Hidden; replaced by filter drawer */
  .cart-layout { grid-template-columns: 1fr; }

  /* Hero */
  .hero-carousel { height: 420px; }
  .hero-carousel__title { font-size: var(--text-4xl); }
  .hero-carousel__content { padding: var(--space-8); }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-newsletter { grid-column: 1 / -1; }

  /* Section header */
  .section-header__title { font-size: var(--text-2xl); }

  /* Two col */
  .two-col { grid-template-columns: 1fr; }
  .two-col--60-40 { grid-template-columns: 1fr; }

  /* Cart table → simplified */
  .cart-table__head { display: none; }
  .cart-table__row { grid-template-columns: 1fr; gap: var(--space-3); }

  /* Checkout steps */
  .checkout-step__label { display: none; }

  /* Add body padding for bottom nav */
  /* Checkout deliberately skips the bottom-nav bar (distraction-free
     design, see footer.php's is_checkout() guard) -- this padding was
     reserving its 64px anyway, showing up as a big empty box below the
     footer with nothing in it. */
  body:not(.woocommerce-checkout) { padding-bottom: var(--bottom-nav-h); }

  /* Tabs scroll */
  .tabs__tab { padding: var(--space-3) var(--space-4); }
}

/* --------------------------------------------------------------------------
   576px — Large Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
  :root {
    --section-padding-y: 40px;
  }

  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .product-grid--6col { grid-template-columns: repeat(2, 1fr); }
  .category-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }

  .hero-carousel { height: 380px; }
  .hero-carousel__title { font-size: var(--text-3xl); }
  .hero-carousel__sub { font-size: var(--text-base); }
  .hero-carousel__content { padding: var(--space-6); }

  .section-header { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .section-header__title { font-size: var(--text-2xl); }

  /* Cart mini-drawer full width */
  .cart-drawer { width: 100%; }
  .mobile-nav { width: 100%; }
}

/* --------------------------------------------------------------------------
   430px — iPhone Pro Max
   -------------------------------------------------------------------------- */
@media (max-width: 430px) {
  :root {
    --container-pad: var(--space-3);
  }

  .product-grid { gap: 8px; }
  .category-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }

  .hero-carousel { height: 340px; }
  .hero-carousel__title { font-size: var(--text-2xl); }
  .hero-carousel__prev, .hero-carousel__next { display: none; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }

  .cart-table__row { padding: var(--space-3); }

  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
}

/* --------------------------------------------------------------------------
   390px — iPhone 14 Standard
   -------------------------------------------------------------------------- */
@media (max-width: 390px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .category-grid { grid-template-columns: repeat(3, 1fr); }

  .hero-carousel { height: 300px; }
  .hero-carousel__title { font-size: var(--text-2xl); }
}

/* --------------------------------------------------------------------------
   360px — Small Android
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  :root {
    --container-pad: var(--space-2);
    --grid-gap-mobile: 8px;
  }

  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .hero-carousel { height: 280px; }
  .hero-carousel__title { font-size: var(--text-xl); }
  .footer-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .announcement-bar,
  .site-header,
  .site-header--mobile,
  .primary-nav,
  .bottom-nav,
  .cart-drawer,
  .mobile-nav,
  .overlay { display: none !important; }

  body { background: #fff; color: #000; }
  a { color: #000; }
}



/* ==========================================================================
   MOBILE-FIRST RESPONSIVE — Phase 2 Components
   ========================================================================== */

/* ── ≤768px — Tablet/Mobile switch ─────────────────────────────────────── */
@media (max-width: 768px) {

  /* Show mobile header, hide desktop */
  .site-header { display: none !important; }
  .primary-nav { display: none !important; }
  .site-header--mobile { display: block; }
  .bottom-nav { display: flex; }

  /* Category grid: 3 per row on tablet */
  .cat-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }

  /* Reviews: 1 column */
  .reviews-grid { grid-template-columns: 1fr; }

  /* Instagram: 3 cols */
  .insta-grid { grid-template-columns: repeat(3, 1fr); }

  /* Promo banner: stack */
  .promo-banner { padding: var(--space-8) 0; }
  .promo-banner__inner { flex-direction: column; justify-content: flex-start; text-align: center; gap: var(--space-5); }
  .promo-banner__visual { display: none; }
  .promo-banner__body { margin: 0 auto; }
  .promo-banner__actions { justify-content: center; }

  /* Newsletter form: stack */
  .newsletter-form { flex-direction: column; }
  .newsletter-btn { width: 100%; }

  /* Quick view: single col */
  .qv-grid { grid-template-columns: 1fr; }

  /* Cart items: ensure comfortable mobile layout */
  .cart-item__image { width: 72px; height: 72px; }
}

/* ── ≤576px — Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 576px) {

  .cat-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  .cat-card__name { font-size: var(--text-xs); }

  .insta-grid { grid-template-columns: repeat(3, 1fr); }

  .section-tabs { margin-bottom: var(--space-5); }
  .section-tab { padding: var(--space-3) var(--space-4); font-size: var(--text-sm); }

  .promo-banner { padding: var(--space-8) 0; }

  /* Product card quick actions: always visible on mobile (no hover) */
  .product-card__add-to-cart { opacity: 1 !important; }
}

/* ── ≤430px — Small mobile ───────────────────────────────────────────────── */
@media (max-width: 430px) {

  .cat-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }

  .mobile-header__top { height: 52px; }

  /* Cart drawer: full width on very small screens */
  .cart-drawer {
    width: 100%;
    right: 0;
    left: 0;
    top: auto;
    bottom: 0;
    height: 80vh;
    border-radius: var(--radius-xl, 20px) var(--radius-xl, 20px) 0 0;
    transform: translateY(100%);
  }
  .cart-drawer.is-open { transform: translateY(0); }

  .toast { bottom: calc(56px + var(--space-3)); font-size: var(--text-sm); }
}

/* ── ≤390px — iPhone 14 ─────────────────────────────────────────────────── */
@media (max-width: 390px) {

  .cat-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }

  .promo-banner__headline { font-size: var(--text-2xl); }

  .section-tab { padding: var(--space-2) var(--space-3); }
}

/* ── ≤360px — Small Android ─────────────────────────────────────────────── */
@media (max-width: 360px) {

  .mobile-header__top { padding: 0 var(--space-3); }
  .mobile-header__search { padding: var(--space-2) var(--space-3) var(--space-3); }

  .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }

  .cart-item__image { width: 64px; height: 64px; }
}


/* ==========================================================================
   PHASE 9 — Mobile Optimization Pass
   Page-specific mobile fixes for all 23 pages
   ========================================================================== */

/* ── Product Detail Page ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pdp-layout { grid-template-columns: 1fr !important; gap: 0; }
  /* .pdp-gallery's position: sticky (product.css) is for the desktop
     two-column layout, where it pins the image while the info column
     scrolls independently beside it. Once the columns stack into one at
     this breakpoint, that same sticky image stays pinned near the top of
     the viewport while the rest of the (now single) column scrolls
     underneath it — visually and interactively overlapping whatever lands
     there, including the "Add to Cart" button, and intercepting its
     clicks. Sticky only makes sense with a sibling to scroll past. */
  .pdp-gallery { position: static; margin-bottom: 24px; }
  .pdp-gallery__thumbs { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .pdp-gallery__thumb { height: 56px; }
  .pdp-info__title { font-size: 20px; }
  .pdp-price-block__current { font-size: 22px; }
  .pdp-cta { flex-direction: column; gap: 10px; }
  .pdp-cta .btn { width: 100%; }
  .pdp-highlights { grid-template-columns: repeat(2, 1fr); }
  .pdp-tab-content { padding: 16px; }
}

/* ── Shop / Category / Search ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .shop-layout { grid-template-columns: 1fr !important; }
  .filter-sidebar { display: none !important; }
  .mobile-filter-toggle { display: flex !important; }
  .shop-toolbar { flex-wrap: wrap; }
  .active-filters { gap: 6px; }
  .active-filter-chip { font-size: 11px; padding: 4px 10px; }
}

@media (max-width: 576px) {
  .shop-toolbar__count { order: 1; width: 100%; }
  .shop-toolbar__sort { order: 2; width: 100%; }
  .shop-toolbar__sort select { width: 100%; }
  .shop-toolbar__view { order: 3; margin-left: auto; }
  .search-bar-large { max-width: 100%; }
  .search-bar-large__input { font-size: 14px; }
}

/* ── Cart Page ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cart-page-layout { grid-template-columns: 1fr !important; }
  .order-summary { position: static !important; }
}

@media (max-width: 576px) {
  .cart-item { grid-template-columns: 72px 1fr; gap: 12px; }
  .cart-item__price-col {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
  }
  .cart-item__img { width: 72px; height: 72px; }
}

/* ── Wishlist ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) { .wishlist-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .wishlist-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 576px)  { .wishlist-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 360px)  { .wishlist-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* ── Checkout ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .checkout-layout { grid-template-columns: 1fr !important; }
  .co-summary { position: static !important; }
}

@media (max-width: 576px) {
  .checkout-header__inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .checkout-steps { display: none; }
  .checkout-form-card div.form-row { grid-template-columns: 1fr !important; }
  .payment-options { grid-template-columns: 1fr; }
  .checkout-form-card__body { padding: 16px; }
}

/* ── Account Page ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .account-layout { grid-template-columns: 1fr !important; }
  .account-sidebar { position: static; }
  .account-nav__item { padding: 11px 16px; }
}

@media (max-width: 576px) {
  .account-sidebar__avatar { width: 44px; height: 44px; font-size: 16px; }
}

/* ── Auth Pages (login/register) ─────────────────────────────────────────── */
@media (max-width: 576px) {
  .auth-card { padding: 28px 20px; }
  .auth-page { padding: 24px 16px; }
}

/* ── Category Hero ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cat-hero { padding: 28px 0; }
  .cat-hero__title { font-size: 26px; }
  .cat-hero__desc { font-size: 13px; }
  .subcat-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .subcat-tab { padding: 12px 16px; font-size: 12px; }
}

/* ── Info Pages (about, faq, etc.) ───────────────────────────────────────── */
@media (max-width: 576px) {
  .info-hero { padding: 22px 0; }
  .info-hero__title { font-size: 26px; }
  .info-content { margin: 24px auto 48px; }
  .info-content table { font-size: 12px; display: block; overflow-x: auto; }
  .info-content table th, .info-content table td { padding: 9px 10px; }
  .faq-q { font-size: 13px; padding: 14px; }
}

/* ── Collections Grid ────────────────────────────────────────────────────── */
@media (max-width: 900px)  { .collections-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px)  { .collections-grid { grid-template-columns: 1fr; } }

/* ── Listing Pages (new arrivals / sale / best sellers) ─────────────────── */
@media (max-width: 576px) {
  .listing-toolbar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .listing-toolbar__sort { width: 100%; }
  .listing-toolbar__sort select { width: 100%; }
}

/* ── Touch Target Enforcement (WCAG 2.5.5) ──────────────────────────────── */
@media (max-width: 768px) {
  /* All interactive elements minimum 44px tap target */
  button, [role="button"], a.btn, input[type="submit"], input[type="button"],
  .cart-qty__btn, .product-card__wishlist, .product-card__add-to-cart {
    min-height: 44px;
  }
  
  /* Header action buttons */
  .mobile-header__action-btn { min-width: 44px; min-height: 44px; }
  
  /* Filter drawer close button */
  .filter-drawer__close { min-width: 44px; min-height: 44px; }
}

/* ── Safe Area (notch / home indicator) — mobile only ───────────────────── */
@media (max-width: 768px) {
  @supports (padding: env(safe-area-inset-bottom)) {
    body:not(.woocommerce-checkout) { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0)); }
    .bottom-nav { height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0)); padding-bottom: env(safe-area-inset-bottom, 0); }
  }
}
@media (max-width: 430px) {
  @supports (padding: env(safe-area-inset-bottom)) {
    .cart-drawer { padding-bottom: env(safe-area-inset-bottom, 0); }
  }
}

/* ── Overflow Prevention ─────────────────────────────────────────────────── */
* { box-sizing: border-box; }

img, video, iframe, embed, object {
  max-width: 100%;
}

/* Prevent wide table overflow */
.info-content table,
.cart-items-card,
.co-summary__items {
  max-width: 100%;
}

/* Horizontal scroll containers */
.subcat-tabs__inner,
.section-tabs,
.active-filters {
  scrollbar-width: none; /* Firefox */
}
.subcat-tabs__inner::-webkit-scrollbar,
.section-tabs::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* ── Smooth Scroll ───────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Focus Visible (Accessibility) ──────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

:focus:not(:focus-visible) { outline: none; }

/* ── Reduced Motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ── Print overrides ─────────────────────────────────────────────────────── */
@media print {
  .mobile-filter-toggle,
  .filter-drawer,
  .shop-toolbar__view,
  .cart-drawer,
  .overlay,
  .back-to-top,
  .bottom-nav,
  .announcement-bar { display: none !important; }
}