/* ============================================================
   SnusPatron — Mobile & Responsive Overrides
   Breakpoints: 1100px, 900px, 768px, 600px, 400px
   ============================================================ */

/* ── 1100px: Tablet landscape ── */
@media (max-width: 1100px) {
  .hero-content { gap: 40px; }
  .hero-title { font-size: 4rem; }
  .brand-showcase-grid { grid-template-columns: repeat(3, 1fr); }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
  .footer-grid > div:last-child { grid-column: 1 / -1; }
  .usp-inner { grid-template-columns: repeat(4, 1fr); }
  /* Nav: tighter on tablet so all items fit */
  .nav-link-item { padding: 8px 9px !important; font-size: 0.8rem !important; }
  .nav-links { margin-left: 16px !important; gap: 0 !important; }
}

/* ── 900px: Tablet portrait / large phone ── */
@media (max-width: 900px) {
  /* Navbar */
  .nav-links { display: none !important; }
  .nav-hamburger { display: flex !important; }
  .nav-logo { font-size: 1.5rem; }
  .nav-inner { padding: 0 16px; }

  /* Hero */
  .hero { min-height: 80vh; padding: 48px 0; }
  .hero-content {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 20px;
    text-align: center;
  }
  .hero-title { font-size: 3.5rem; }
  .hero-sub { max-width: 100%; }
  .hero-actions { justify-content: center; }
  .hero-stats { justify-content: center; }
  .can-scene { display: none !important; }

  /* USP Strip */
  .usp-inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .usp-item:nth-child(2) { border-right: none; }
  .usp-item:nth-child(3) { border-top: 1px solid var(--border); }
  .usp-item:nth-child(4) { border-top: 1px solid var(--border); border-right: none; }

  /* Brand showcase */
  .brand-showcase-grid { grid-template-columns: repeat(2, 1fr); }

  /* Product grid */
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* Shop layout */
  .shop-layout { grid-template-columns: 1fr !important; }
  .filter-sidebar { display: none; }
  #filter-mob-btn { display: flex !important; }

  /* Product detail */
  .product-detail-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Trust */
  .trust-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }

  /* Admin */
  .admin-side { width: 180px; padding: 16px 8px; }
  .admin-main { padding: 20px; }

  /* Cart */
  .cart-layout { grid-template-columns: 1fr !important; }
  .cart-summary-box { position: static; }
  .cart-row {
    grid-template-columns: 64px 1fr auto;
    gap: 12px;
  }
  .cart-price { display: none; }
}

/* ── 768px: Large phone ── */
@media (max-width: 768px) {
  /* Container */
  .container { padding: 0 16px; }

  /* Section */
  .section { padding: 48px 0; }
  .section-sm { padding: 36px 0; }

  /* Hero */
  .hero-title { font-size: 2.8rem; }
  .hero-eyebrow { font-size: 0.7rem; }
  .hero-sub { font-size: 0.9rem; }
  .btn-primary-cta, .btn-secondary-outline {
    padding: 12px 24px; font-size: 0.9rem;
  }
  .hero-stat-value { font-size: 1.8rem; }

  /* Section header */
  .section-title { font-size: 1.8rem; }
  .section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* USP */
  .usp-inner { grid-template-columns: 1fr 1fr; }
  .usp-item { padding: 14px 12px; gap: 10px; }
  .usp-icon-wrap { width: 36px; height: 36px; border-radius: 8px; }
  .usp-icon-wrap svg { width: 18px; height: 18px; }
  .usp-text-title { font-size: 0.8rem; }
  .usp-text-sub { font-size: 0.7rem; }

  /* Brand showcase */
  .brand-showcase-grid { grid-template-columns: 1fr 1fr; }
  .brand-showcase-card { min-height: 140px; padding: 20px 16px; }
  .brand-showcase-name { font-size: 1.3rem; }

  /* Product card */
  .product-card-body { padding: 12px; }
  .product-card-name { font-size: 0.82rem; }
  .product-card-price { font-size: 1rem; }
  .btn-add-quick { width: 34px; height: 34px; border-radius: 8px; }
  .btn-add-quick svg { width: 16px; height: 16px; }

  /* Filter toolbar */
  .shop-toolbar {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
  }

  /* Trust */
  .trust-card { padding: 20px 16px; }
  .trust-icon { width: 44px; height: 44px; border-radius: 10px; }
  .trust-icon svg { width: 20px; height: 20px; }

  /* Newsletter */
  .newsletter-inner { padding: 40px 16px; }
  .newsletter-form { flex-direction: column; }
  .newsletter-input { border-radius: 10px !important; border-right: 1px solid var(--border-2) !important; }
  .newsletter-btn { border-radius: 10px !important; margin-top: 8px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
  .footer-social { gap: 6px; }

  /* Product detail */
  .product-title { font-size: 1.8rem; }
  .product-price { font-size: 2rem; }
  .product-details-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .product-atc-row { flex-wrap: wrap; }
  .btn-atc { width: 100%; justify-content: center; }

  /* Cart */
  .cart-row {
    grid-template-columns: 56px 1fr auto;
    gap: 10px;
  }
  .cart-img, .cart-no-img { width: 56px; height: 56px; border-radius: 6px; }
  .cart-name { font-size: 0.85rem; }

  /* Mega menus never show on mobile */
  .mega-menu, .simple-dropdown { display: none !important; }

  /* Admin sidebar off-canvas on mobile */
  .admin-side {
    position: fixed; left: 0; top: 0; bottom: 0;
    z-index: 900;
    transform: translateX(-100%);
    transition: transform 0.3s;
    width: 220px !important;
  }
  .admin-side.open { transform: translateX(0); }
  .admin-main { padding: 16px; }
  .admin-page-title { font-size: 1.5rem; }

  /* Table responsive */
  .data-table { font-size: 0.8rem; }
  .data-table th, .data-table td { padding: 10px 10px; }

  /* Announce bar */
  .announce-bar { font-size: 0.72rem; }
  .announce-msg { font-size: 0.72rem; padding: 8px 32px; white-space: normal; text-align:center; }

  /* Breadcrumb */
  .breadcrumb { font-size: 0.78rem; }

  /* Tabs */
  .tab-btn { padding: 10px 14px; font-size: 0.82rem; }

  /* Pagination */
  .pagination { gap: 4px; }
  .page-btn { width: 34px; height: 34px; font-size: 0.8rem; border-radius: 6px; }
}

/* ── 600px: Phone ── */
@media (max-width: 600px) {
  /* Hero */
  .hero { min-height: 70vh; padding: 40px 0; }
  .hero-title { font-size: 2.4rem; letter-spacing: 0.02em; }
  .hero-actions { flex-direction: column; align-items: center; width: 100%; }
  .btn-primary-cta, .btn-secondary-outline { width: 100%; justify-content: center; }
  .hero-stats { gap: 20px; }
  .hero-stat-value { font-size: 1.6rem; }

  /* USP strip single column */
  .usp-inner { grid-template-columns: 1fr; }
  .usp-item { border-right: none !important; border-bottom: 1px solid var(--border); }
  .usp-item:last-child { border-bottom: none; }

  /* Brand showcase single column */
  .brand-showcase-grid { grid-template-columns: 1fr; }
  .brand-showcase-card { min-height: 120px; }

  /* Product grid 2 cols */
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .product-card-body { padding: 10px; }
  .product-card-brand { font-size: 0.62rem; }
  .product-card-name { font-size: 0.78rem; margin-bottom: 6px; }
  .product-card-meta { gap: 4px; margin-bottom: 8px; }
  .strength-pill, .flavor-pill { font-size: 0.6rem; padding: 2px 6px; }
  .product-card-price { font-size: 0.95rem; }
  .btn-add-quick { width: 32px; height: 32px; border-radius: 7px; }
  .btn-add-quick svg { width: 14px; height: 14px; }

  /* Trust single column */
  .trust-grid { grid-template-columns: 1fr; }

  /* Age gate */
  .age-gate-box { padding: 36px 24px; }
  .age-gate-logo { font-size: 2.2rem; }

  /* Cart summary sticky off */
  .cart-summary-box { position: static !important; }

  /* Cart layout */
  .cart-row {
    display: flex; flex-wrap: wrap; gap: 10px;
    padding: 16px 0;
  }
  .cart-img, .cart-no-img { width: 64px; height: 64px; flex-shrink: 0; }

  /* Product detail */
  .product-details-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .product-detail-chip { padding: 10px 12px; }
  .product-title { font-size: 1.6rem; }
  .product-price { font-size: 1.8rem; }

  /* Nav search hidden on very small */
  .nav-search { display: none !important; }

  /* Filter sidebar on mobile → offcanvas */
  .filter-sidebar { position: static !important; }

  /* Section header buttons */
  .section-header a.btn { font-size: 0.8rem; padding: 6px 12px; }

  /* Announce bar — simplified but visible */
  .announce-msg { font-size: 0.7rem; padding: 7px 20px; }
  .announce-dots { display: none; }
}

/* ════════════════════════════════
   NEUE KOMPONENTEN — MOBILE
   ════════════════════════════════ */

/* Account/Profile Hero */
@media (max-width: 768px) {
  .account-hero-inner { flex-direction: column; gap: 16px; }
  .account-hero-code { width: 100%; }
  .hero-points-row { flex-wrap: wrap; gap: 10px; }
  .account-layout { flex-direction: column !important; grid-template-columns: 1fr !important; }
  .account-sidebar { width: 100% !important; }
  .account-body { padding: 16px !important; }
  .account-main { padding: 0 !important; }
  .section-form .form-row-2 { grid-template-columns: 1fr !important; }
  .account-section { padding: 20px 16px !important; }

  /* Tier all-levels table */
  .tier-benefits-card { margin-bottom: 12px; }

  /* Cart free-can row */
  .cart-row[style*="linear-gradient"] {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 12px !important;
  }

  /* 404 cans collage smaller */
  .e404-cans { width: 200px !important; height: 240px !important; }
  .e404-can.c1 { width: 130px !important; height: 165px !important; }
  .e404-can.c2 { width: 90px !important; height: 115px !important; }
  .e404-can.c3 { width: 82px !important; height: 105px !important; }
  .e404-can.c4 { width: 62px !important; height: 78px !important; }
}

@media (max-width: 600px) {
  /* Navbar announce bar keep simple */
  .announce-bar { min-height: 32px; }

  /* Hero buttons stacked */
  .hero-actions { width: 100%; }

  /* Account layout */
  .account-hero { padding: 24px 16px 20px !important; }
  .account-hero-name { font-size: 1.6rem !important; }
  .hero-points-num { font-size: 2rem !important; }

  /* Cart */
  .cart-layout { gap: 16px !important; }
  .cart-table { gap: 0; }
  .cart-summary-box { padding: 16px !important; }
  .free-ship-bar-wrap { margin-bottom: 12px; }

  /* 404 — full width single column */
  .e404-content { flex-direction: column; text-align: center; gap: 24px; }
  .e404-cans { width: 240px !important; height: 200px !important; margin: 0 auto; }
  .e404-can.c1 { left: 50% !important; transform: translateX(-50%) !important; top: 0 !important; }
  .e404-actions { justify-content: center; }
  .e404-h1 { font-size: clamp(2.2rem,8vw,3.5rem) !important; }
  .e404-bg { grid-template-columns: repeat(3,1fr) !important; }

  /* Product page bundle row */
  .pd-bundle-row { gap: 6px !important; }
  .pd-bundle { padding: 10px 8px !important; min-width: 60px !important; }

  /* Mini fixes */
  .pd-container { padding: 0 12px !important; }
  .pd-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
}

/* ── 400px: Very small phones ── */
@media (max-width: 400px) {
  .hero-title { font-size: 2rem; }
  .nav-logo { font-size: 1.3rem; }
  .product-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .product-card-name { font-size: 0.72rem; }
  .hero-stat-value { font-size: 1.4rem; }
  .brand-showcase-name { font-size: 1.1rem; }
  .footer-badges { display: none; }
  .newsletter-form { gap: 8px; }
}

/* ════════════════════════════════
   MOBILE FILTER OFFCANVAS
   ════════════════════════════════ */
.filter-offcanvas-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(7,7,10,0.85);
  z-index: 800;
  backdrop-filter: blur(4px);
}
.filter-offcanvas-overlay.open { display: block; }

.filter-offcanvas {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(320px, 90vw);
  background: var(--surface);
  border-right: 1px solid var(--border-2);
  z-index: 801;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
}
.filter-offcanvas.open { transform: translateX(0); }

.filter-offcanvas-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--surface); z-index: 1;
}
.filter-offcanvas-title {
  font-family: var(--font-display);
  font-size: 1.2rem; letter-spacing: 0.04em;
}
.filter-offcanvas-close {
  width: 36px; height: 36px;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 8px; cursor: pointer; color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.filter-offcanvas-body { padding: 20px; }
.filter-offcanvas-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex; gap: 10px;
  position: sticky; bottom: 0;
  background: var(--surface);
}

/* ════════════════════════════════
   MOBILE NAV OVERLAY
   ════════════════════════════════ */
#mobile-nav {
  position: fixed; inset: 0;
  z-index: 999;
  background: rgba(7,7,10,0.98);
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
#mobile-nav.open { transform: translateX(0); }

/* ════════════════════════════════
   TOUCH IMPROVEMENTS
   ════════════════════════════════ */
@media (hover: none) {
  /* Remove hover effects that don't work on touch */
  .product-card:hover { transform: none; box-shadow: none; }
  .product-card:active {
    transform: scale(0.98);
    border-color: rgba(200,168,75,0.3);
  }
  .btn-add-quick:hover { transform: none; box-shadow: none; }
  .btn-add-quick:active { transform: scale(0.9); }
  .btn-primary-cta:hover { transform: none; box-shadow: none; }
  .btn-primary-cta:active { transform: scale(0.97); }
  .brand-showcase-card:hover { transform: none; }
  .trust-card:hover { transform: none; border-color: var(--border); }

  /* Larger touch targets */
  .nav-icon-btn { min-width: 44px; min-height: 44px; }
  .qty-btn { min-width: 44px; min-height: 44px; }
  .cart-qty-btn { width: 44px; height: 44px; }
  .filter-check { min-height: 44px; }
  .tab-btn { min-height: 44px; }
  .footer-link { min-height: 36px; display: flex; align-items: center; }

  /* Scrollable horizontal on touch */
  .brands-strip { -webkit-overflow-scrolling: touch; }
}

/* ════════════════════════════════
   PRINT
   ════════════════════════════════ */
@media print {
  .site-nav, .footer, .footer-disclaimer, .announce-bar,
  .cookie-banner, #age-gate, .age-gate, .toast-stack,
  .btn-add-quick, .btn-atc, .hero-actions { display: none !important; }
  body { background: #fff; color: #000; }
  .product-card { border: 1px solid #ccc; }
}