/* ============================================================
   BreakFit — Mobile-First Enhancements
   Extra mobile rules that complement all pages
   ============================================================ */

/* ── Ensure min touch targets across the site ── */
button, [role="button"], a.btn, input[type="submit"] {
  min-height: 44px;
}

/* ── Prevent horizontal overflow on all screens ── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ── Safe area insets for notched phones ── */
body {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ── Better tap highlight ── */
* {
  -webkit-tap-highlight-color: rgba(26, 92, 51, 0.12);
}

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

/* ── Improve touch scrolling ── */
.nav-drawer,
.categories-page-grid,
.cat-pills {
  -webkit-overflow-scrolling: touch;
}

/* ── Sticky bottom cart bar on mobile ── */
.mobile-cart-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--z-fixed) + 10);
  background: linear-gradient(135deg, #1A5C33, #0D3D20);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -4px 24px rgba(26,92,51,0.25);
  border-radius: 20px 20px 0 0;
}

.mobile-cart-bar a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: var(--text-base);
}

.mobile-cart-bar .cart-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-cart-bar i { font-size: 1.4rem; }

.mobile-cart-bar .cart-total {
  background: #D4A853;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: var(--text-sm);
}

@media (max-width: 768px) {
  .mobile-cart-bar {
    display: block;
  }

  /* Push body content up so it's not hidden behind the bar */
  body.has-cart-bar main {
    padding-bottom: 80px;
  }
}

/* ── Section padding adjustments on mobile ── */
@media (max-width: 768px) {
  .section {
    padding-block: var(--space-12);
  }

  .section-header {
    margin-bottom: var(--space-8);
  }

  .section-title {
    font-size: var(--text-3xl);
  }

  .section-subtitle {
    font-size: var(--text-base);
  }
}

@media (max-width: 480px) {
  .section {
    padding-block: var(--space-10);
  }

  .section-title {
    font-size: clamp(1.4rem, 6vw, var(--text-3xl));
  }
}

/* ── Page hero responsive ── */
@media (max-width: 768px) {
  .page-hero {
    padding: var(--space-8) 0;
  }

  .page-hero h1 {
    font-size: var(--text-3xl);
  }
}

/* ── Better form elements on mobile ── */
@media (max-width: 480px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px; /* prevents iOS zoom on focus */
    padding: 14px 16px;
  }

  .btn-lg {
    padding: 14px 24px;
    font-size: var(--text-base);
  }
}

/* ── Quantity selector — bigger on mobile ── */
@media (max-width: 480px) {
  .qty-btn {
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
  }

  .qty-input {
    width: 52px;
    font-size: 1.1rem;
  }
}

/* ── Tabs scrollable on small screens ── */
@media (max-width: 600px) {
  .tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    padding-bottom: 0;
  }

  .tabs::-webkit-scrollbar { display: none; }

  .tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    font-size: var(--text-xs);
  }
}

/* ── Floating "back to top" on mobile ── */
.back-to-top {
  position: fixed;
  bottom: 90px;
  right: 16px;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #1A5C33, #0D3D20);
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-spring);
  z-index: 500;
  box-shadow: 0 4px 16px rgba(26,92,51,0.3);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  transform: scale(1.1) translateY(-2px);
}

/* ── Breadcrumb on mobile ── */
@media (max-width: 480px) {
  .breadcrumb {
    font-size: var(--text-xs);
    gap: var(--space-1);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .breadcrumb::-webkit-scrollbar { display: none; }
}

/* ── Price display ── */
@media (max-width: 480px) {
  .price-current { font-size: var(--text-lg); }
}

/* ── Improved focus styles for accessibility ── */
:focus-visible {
  outline: 3px solid #D4A853;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Loading skeleton improvement ── */
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  [data-animate] { 
    opacity: 1 !important; 
    transform: none !important; 
  }
}

/* ── Toast on mobile ── */
@media (max-width: 480px) {
  #toast-container {
    left: 12px !important;
    right: 12px !important;
    bottom: 80px !important;
    width: auto !important;
  }
}