/*
 * ============================================================================
 * responsive.css — Retail V2 breakpoints + mobile reflow
 * ============================================================================
 * WHAT: Tablet/mobile reflow + mobile type scale. Same brand, mobile-shaped.
 * LOAD: after theme-luxury.css. Scoped under body.retail-v2.
 * BREAKPOINTS: tablet <=1024px, small-tablet <=900px (nav collapses), mobile <=600px.
 * ============================================================================ */

/* ===== TABLET (<=1024px) ===== */
@media (max-width:1024px){
  body.retail-v2 .container{ padding:0 24px; }
  body.retail-v2 .section{ padding:72px 0; }
  body.retail-v2 .grid-4{ grid-template-columns:repeat(3,1fr); }
  body.retail-v2 .grid-3{ grid-template-columns:repeat(2,1fr); }
}

body.retail-v2 .v2-mobile-menu, body.retail-v2 .v2-mobile-overlay{ display:none; }
/* ===== NAV COLLAPSE (<=900px) ===== */
@media (max-width:900px){
  body.retail-v2 .v2-mobile-menu, body.retail-v2 .v2-mobile-overlay{ display:block; }
  body.retail-v2 .v2-nav .nav-links{ display:none; }
  body.retail-v2 .nav-hamburger{ display:inline-flex; }

  /* slide-in mobile drawer */
  body.retail-v2 .v2-mobile-menu{
    position:fixed; inset:0 0 0 auto; width:min(82vw,360px);
    background:var(--bg-elevated); box-shadow:var(--shadow-lg);
    transform:translateX(100%); transition:transform 220ms ease;
    z-index:80; padding:24px; overflow-y:auto;
  }
  body.retail-v2 .v2-mobile-menu.open{ transform:translateX(0); }
  body.retail-v2 .v2-mobile-overlay{
    position:fixed; inset:0; background:rgba(6,23,44,.45);
    opacity:0; visibility:hidden; transition:opacity 200ms ease; z-index:70;
  }
  body.retail-v2 .v2-mobile-overlay.open{ opacity:1; visibility:visible; }
  body.retail-v2 .v2-mobile-menu a{ display:block; padding:14px 4px; font-size:16px; border-bottom:1px solid var(--border-soft); color:var(--text-primary); }
}

/* ===== TABLET PORTRAIT (<=768px) ===== */
@media (max-width:768px){
  body.retail-v2 .grid-4,
  body.retail-v2 .grid-3,
  body.retail-v2 .grid-2{ grid-template-columns:repeat(2,1fr); gap:18px; }
  body.retail-v2 .v2-trust-strip{ justify-content:flex-start; gap:18px 28px; }
}

/* ===== MOBILE (<=600px) ===== */
@media (max-width:600px){
  body.retail-v2{ font-size:15px; }
  body.retail-v2 .container{ padding:0 18px; }
  body.retail-v2 .section{ padding:var(--section-y-mobile) 0; }
  body.retail-v2 .h1-hero{ font-size:clamp(40px,11vw,52px); }
  body.retail-v2 .h1-page{ font-size:clamp(34px,9vw,46px); }
  body.retail-v2 h2{ font-size:clamp(28px,7.5vw,38px); }
  body.retail-v2 h3{ font-size:clamp(22px,6vw,28px); }
  body.retail-v2 .body-lg{ font-size:16px; }

  body.retail-v2 .grid-4,
  body.retail-v2 .grid-3,
  body.retail-v2 .grid-2{ grid-template-columns:1fr; }

  /* tap targets >=44px on mobile */
  body.retail-v2 .btn,
  body.retail-v2 .btn-product{ height:48px; }
  body.retail-v2 .theme-toggle{ width:44px; height:44px; }

  body.retail-v2 .v2-utility-bar{ height:auto; padding:6px 0; }
  body.retail-v2 .v2-utility-bar .container{ justify-content:center; gap:6px 16px; font-size:11px; }

  /* sticky mobile add-to-cart bar (used on product pages, Layer 5) */
  body.retail-v2 .v2-sticky-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--bg-card); border-top:1px solid var(--border);
    box-shadow:0 -8px 24px rgba(6,23,44,.12);
    display:flex; gap:12px; align-items:center; padding:12px 16px;
  }
}

/* hide sticky mobile bar on desktop */
@media (min-width:601px){
  body.retail-v2 .v2-sticky-bar{ display:none; }
}

/* ===== PHONE HEADER / OVERFLOW GUARD ===== */
body.retail-v2{ overflow-x:hidden; }
@media (max-width:520px){
  body.retail-v2 .v2-nav .nav-actions{ gap:10px; }
  body.retail-v2 .nav-wordmark{ white-space:nowrap; font-size:16px; }
  body.retail-v2 .nav-account{ display:none; }
}

/* logged-out header: Sign In + Create Account stay visible on phones */
body.retail-v2 .v2-nav .nav-join{ padding:9px 16px; font-size:14px; white-space:nowrap; }
body.retail-v2 .nav-signin{ white-space:nowrap; }
body.retail-v2 .cart-account-note{ margin:12px 0 0; line-height:1.5; }
@media (max-width:520px){
  body.retail-v2 .v2-nav .nav-actions{ gap:10px; }
  body.retail-v2 .v2-nav .nav-join{ padding:7px 11px; font-size:13px; }
  body.retail-v2 .nav-signin{ font-size:13px; }
  body.retail-v2 .nav-wordtext{ font-size:14px; }
}
@media (max-width:440px){ body.retail-v2 .nav-wordtext{ display:none; } }