/* ================================================================
   ComfortMed — Mobile Overrides v3
   iPhone SE2 (375px) and all mobile screens
   ================================================================ */

/* ── Account icon (mobile only) ── */
.nav-account-icon { display: none; }
.hamburger { display: none; }

/* ================================================================
   MOBILE  (≤768px)
   ================================================================ */
@media (max-width: 768px) {

  html, body { overflow-x: hidden; max-width: 100vw; }

  /* ── Hamburger ── */
  .hamburger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 38px; height: 38px;
    background: none; border: 1px solid #e5e5e5;
    border-radius: 6px; cursor: pointer; flex-shrink: 0;
  }
  .hamburger span {
    display: block; width: 18px; height: 2px;
    background: var(--dark, #111); border-radius: 2px;
  }
  .nav-account-icon {
    display: flex !important;
    align-items: center; justify-content: center;
    width: 34px; height: 34px; flex-shrink: 0;
  }
  .nav-account-icon svg {
    width: 22px; height: 22px;
    stroke: var(--dark, #111); fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  }

  /* ── Nav drawer — FULLY SCROLLABLE, last items always reachable ── */
  .nav-links {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important; /* dynamic viewport for iOS Safari */
    z-index: 9991 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    background: #fff !important;
    border: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .nav-links.mobile-open {
    display: flex !important;
  }
  .nav-links-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 56px 0 60px !important; /* 60px bottom = safe area for last item */
    gap: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    min-height: min-content !important;
  }
  .nl-link {
    display: block !important;
    padding: 16px 20px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    color: #111 !important;
    text-decoration: none !important;
    min-height: 52px !important;
  }
  .nl-link.active { color: var(--primary, #22c55e) !important; border-left: 3px solid var(--primary, #22c55e) !important; }
  .nl-drop { display: block !important; }
  .nl-drop .nl-dd {
    position: static !important;
    display: none !important;
    background: #f9fafb !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  .nl-drop.open > .nl-dd { display: block !important; }
  .nl-drop > .nl-dd > a {
    padding: 13px 20px 13px 36px !important;
    font-size: 14px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    display: block !important;
  }
  /* Hide desktop-only */
  .cat-box { display: none !important; }
  .nav-lang { display: none !important; }
  .nav-account { display: none !important; }
  .nav-right { gap: 6px !important; }
  .nav-cart-label { display: none !important; }
  .navbar-inner { flex-wrap: nowrap !important; gap: 6px !important; }
  .search-bar { flex: 1 !important; min-width: 0 !important; }
  .search-bar input { font-size: 13px !important; padding: 8px 10px !important; }

  /* ── HERO CAROUSEL — proper mobile height, no black bar ── */
  #hero-carousel {
    margin-top: 12px !important;
    border-radius: 6px !important;
  }
  #hero-track a {
    min-height: unset !important;
  }
  #hero-track img {
    width: 100% !important;
    height: auto !important;         /* let image breathe naturally */
    max-height: 52vw !important;     /* ~195px on 375px screen, proportional */
    min-height: 140px !important;
    object-fit: cover !important;
    display: block !important;
  }
  /* Hide dark filler background when image loads */
  #hero-track a { background: #f0f0f0 !important; }

  /* ── CATEGORY GRID — horizontal scroll on mobile ── */
  .cat-grid-scroll-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .cat-grid-scroll-wrap::-webkit-scrollbar { display: none; }
  .cat-grid-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    min-width: max-content !important;
  }
  .cat-grid-inner a {
    flex: 0 0 90px !important;
    width: 90px !important;
    padding: 12px 6px 10px !important;
  }
  .cat-grid-inner a > div { /* circle */
    width: 62px !important;
    height: 62px !important;
  }
  .cat-grid-inner a span {
    font-size: 11px !important;
    word-break: break-word !important;
  }

  /* ── PRODUCT PAGE ZOOM — disable mouse zoom, enable touch-friendly tap zoom ── */
  .pdp-lens { display: none !important; }
  .pdp-zoom-result { display: none !important; }
  .pdp-zoom-hint { display: none !important; }
  #sp-img-wrap { cursor: default !important; }

  /* Touch-zoom container: allow native pinch-zoom inside */
  .pdp-touch-zoom-wrap {
    overflow: hidden !important;
    touch-action: pinch-zoom !important;
    -webkit-user-select: none !important;
  }
  #pdp-img {
    transition: transform 0.2s ease !important;
    transform-origin: center center !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
  }
  .pdp-mobile-zoom-hint {
    display: block !important;
    font-size: 11px;
    color: #aaa;
    text-align: center;
    padding: 4px 0 2px;
  }

  /* PDP layout */
  .pdp-wrap {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    gap: 0 !important;
  }
  .pdp-left  { order: 1; }
  .pdp-right-sticky { order: 2; position: static !important; }
  .pdp-main-img { max-height: 280px !important; }
  .pdp-thumb { width: 52px !important; height: 52px !important; }
  .pdp-info { border-radius: 0 0 8px 8px !important; }
  .editor-area { min-height: 180px !important; }

  /* ── SPECIAL ARRIVAL — thumbnail row fix ── */
  .sa-mobile-wrap {
    display: flex !important; flex-direction: column !important;
    grid-template-columns: unset !important; min-height: unset !important;
    overflow: hidden !important;
  }
  .sa-mobile-wrap > div:first-child {
    display: flex !important; flex-direction: row !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    border-right: none !important; border-bottom: 1px solid #e5e5e5 !important;
    height: 70px !important; min-height: unset !important;
    padding: 4px 4px !important; gap: 4px !important;
  }
  .sa-mobile-wrap > div:first-child::-webkit-scrollbar { display: none; }
  .sa-mobile-wrap > div:first-child > div {
    min-width: 60px !important; width: 60px !important; height: 60px !important;
    border-radius: 5px !important; flex-shrink: 0 !important;
    border: 2px solid #e5e5e5 !important; border-bottom: none !important;
    border-right: none !important;
  }
  .sa-mobile-wrap > div:nth-child(2) {
    min-height: 200px !important; border-right: none !important;
    border-bottom: 1px solid #e5e5e5 !important;
  }
  .sa-mobile-wrap > div:nth-child(3) { width: 100% !important; padding: 14px !important; }

  /* ── THREE COL PANEL ── */
  .tcp-outer { display: flex !important; flex-direction: column !important; }
  .tcp-outer > div:first-child { padding: 18px !important; width: 100% !important; }
  .tcp-outer > div:nth-child(2) {
    display: grid !important; grid-template-columns: repeat(2,1fr) !important; width: 100% !important;
  }
  div[style*="grid-template-columns:220px 1fr"], div[style*="grid-template-columns: 220px 1fr"] {
    display: flex !important; flex-direction: column !important; grid-template-columns: unset !important;
  }

  /* ── STORE LOCATION ── */
  .sl-outer { display: flex !important; flex-direction: column !important; }
  div[style*="grid-template-columns:280px 1fr"], div[style*="grid-template-columns: 280px 1fr"] {
    display: flex !important; flex-direction: column !important;
  }
  div[style*="grid-template-columns:280px 1fr"] > div:first-child,
  div[style*="grid-template-columns: 280px 1fr"] > div:first-child {
    border-right: none !important; border-bottom: 1px solid #e5e5e5 !important;
    width: 100% !important; padding: 18px !important;
  }
  .sl-outer > div:nth-child(2) { min-height: 160px !important; }

  /* ── ACCOUNT PAGE ── */
  div[style*="grid-template-columns:240px 1fr"],
  div[style*="grid-template-columns: 240px 1fr"] {
    display: flex !important; flex-direction: column !important;
    grid-template-columns: unset !important;
  }
  div[style*="grid-template-columns:240px 1fr"] > div:first-child ul,
  div[style*="grid-template-columns: 240px 1fr"] > div:first-child ul {
    display: flex !important; overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-top: 1px solid #e5e5e5 !important;
    padding: 0 !important; gap: 0 !important;
  }
  div[style*="grid-template-columns:240px 1fr"] > div:first-child li,
  div[style*="grid-template-columns: 240px 1fr"] > div:first-child li {
    border-bottom: none !important; border-right: 1px solid #e5e5e5 !important;
    flex-shrink: 0 !important;
  }
  div[style*="grid-template-columns:240px 1fr"] > div:first-child li a,
  div[style*="grid-template-columns: 240px 1fr"] > div:first-child li a {
    padding: 10px 14px !important; font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* ── CHECKOUT ── */
  .co-layout {
    display: flex !important; flex-direction: column-reverse !important;
    grid-template-columns: unset !important; gap: 16px !important;
  }
  .co-layout > form { order: 2; }
  .co-layout > div  { order: 1; }
  .cart-summary { position: static !important; }

  /* ── PRODUCT GRIDS ── */
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2,1fr) !important; gap: 8px !important;
  }
  div[style*="grid-template-columns:repeat(auto-fill,minmax(188px,1fr))"],
  div[style*="grid-template-columns: repeat(auto-fill, minmax(188px, 1fr))"] {
    grid-template-columns: repeat(2,1fr) !important; gap: 8px !important;
  }
  .pgrid { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
  .pcard-img { height: 155px !important; }
  .pc-name { font-size: 12px !important; min-height: 2.5em !important; }
  .pc-sale { font-size: 14px !important; }
  .pc-actions { gap: 5px !important; }
  .pc-actions .btn { font-size: 11px !important; padding: 7px 3px !important; }

  /* ── BLOG ── */
  .blog-featured {
    display: flex !important; flex-direction: column !important;
    grid-template-columns: unset !important;
  }
  .blog-featured-img { min-height: 180px !important; }
  .blog-grid { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
  .blog-card-img { height: 140px !important; }
  .blog-search { max-width: 100% !important; margin: 12px 0 0 !important; }
  .blog-cats { gap: 6px !important; margin-top: 12px !important; }

  /* ── FAQ ── */
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:24px"],
  div[style*="grid-template-columns:1fr 1fr 1fr"][style*="gap:24px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── CONTACT ── */
  .contact-grid, div[style*="contact-grid"] {
    display: flex !important; flex-direction: column !important;
    grid-template-columns: unset !important; gap: 20px !important;
  }
  .ct-cards { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .ct-form-wrap {
    display: flex !important; flex-direction: column !important;
    grid-template-columns: unset !important; gap: 16px !important;
  }
  .form-grid { grid-template-columns: 1fr !important; }
  .faq-grid  { grid-template-columns: 1fr !important; }
  .ct-hero h1 { font-size: 26px !important; }

  /* ── ABOUT ── */
  .ab-story { display: flex !important; flex-direction: column !important; gap: 24px !important; }
  .ab-values-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .ab-stats-strip-inner { grid-template-columns: 1fr 1fr !important; }
  .ab-stats-strip-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.3) !important; padding: 14px 0 !important; }
  .ab-test-grid { grid-template-columns: 1fr !important; }
  .ab-hero h1 { font-size: 26px !important; }
  .timeline-track::before { left: 16px !important; }
  .timeline-item { grid-template-columns: 24px 1fr !important; }
  .tl-left { display: none !important; }
  .tl-right { padding-left: 16px !important; }

  /* ── TOOLBAR ── */
  .toolbar { flex-wrap: wrap; gap: 8px; }
  .toolbar > div:first-child { width: 100%; }
  .filter-box { position: static !important; top: auto !important; }
}

/* ── Small phones (iPhone SE, 375px) ── */
@media (max-width: 420px) {
  .blog-grid { grid-template-columns: 1fr !important; }
  .ab-values-grid { grid-template-columns: 1fr !important; }
  .ct-cards { grid-template-columns: 1fr !important; }
  .pcard-img { height: 130px !important; }
  .pc-actions { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:14px"] {
    grid-template-columns: 1fr !important;
  }
  #hero-track img {
    max-height: 48vw !important;
    min-height: 120px !important;
  }
  /* Category scroll items slightly smaller on SE */
  .cat-grid-inner a { flex: 0 0 80px !important; width: 80px !important; }
  .cat-grid-inner a > div { width: 56px !important; height: 56px !important; }
}

/* ── Class-based product card fixes ── */
.pcard-img { display: block !important; }
.pcard-body { display: flex !important; flex-direction: column !important; }
.pc-disc { font-size: 11px; font-weight: 700; color: #388e3c; }

/* ── Mobile zoom hint (shown only on touch devices) ── */
.pdp-mobile-zoom-hint { display: none; }
@media (hover: none) and (pointer: coarse) {
  .pdp-mobile-zoom-hint { display: block !important; }
  .pdp-zoom-hint { display: none !important; }
}

/* ── Special Arrival: mobile zoom hints ── */
.sp-mob-hint { display: none; }
@media (hover: none) and (pointer: coarse) {
  .sp-desk-hint { display: none !important; }
  .sp-mob-hint  { display: block !important; }
  #sp-img-wrap  { cursor: default !important; }
}