/* ============================================================
   MOBILE RESPONSIVENESS FIX — All Pages
   Prevents horizontal overflow and ensures proper stacking
   ============================================================ */

/* ─── GLOBAL OVERFLOW PREVENTION ─────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

/* ─── CONTACT GRID (desktop default) ────────────── */
.contact-grid {
  grid-template-columns: 1fr 1.5fr;
}

/* ─── TABLET (max-width: 900px) ──────────────────── */
@media (max-width: 900px) {
  /* Contact page grid */
  .contact-grid {
    grid-template-columns: 1fr !important;
  }
}

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

  /* === GLOBAL === */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  .section {
    padding: 32px 14px !important;
  }
  .sec-inner {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .sec-title {
    font-size: 22px !important;
  }
  .sec-hdr {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* === HEADER === */
  .header-inner {
    padding: 0 12px !important;
    height: 56px !important;
    gap: 8px !important;
  }
  .logo {
    font-size: 13px !important;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .logo em {
    font-size: 8px !important;
  }
  .search-wrap {
    display: none !important;
  }
  .mob-toggle {
    display: flex !important;
  }
  .hdr-btns {
    gap: 3px !important;
  }
  .hdr-btn {
    padding: 7px 8px !important;
    font-size: 14px !important;
  }
  .hdr-btn span,
  .hdr-btn-text {
    display: none !important;
  }

  /* === NAVBAR & TRUST BAR === */
  .navbar {
    display: none !important;
  }
  .trust-bar {
    display: none !important;
  }
  .announce {
    font-size: 11px !important;
    padding: 7px 12px !important;
  }

  /* === HERO === */
  .hero {
    padding: 0 !important;
  }
  .hero-inner {
    grid-template-columns: 1fr !important;
    padding: 60px 16px 30px !important;
    gap: 20px !important;
  }
  .hero-visual {
    display: none !important;
  }
  .hero h1 {
    font-size: clamp(20px, 6vw, 32px) !important;
  }
  .hero-sub {
    font-size: 12px !important;
    max-width: 100% !important;
  }
  .hero-ctas {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .cta-main, .cta-ghost {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 12px 20px !important;
    font-size: 13px !important;
  }
  .hero-stats {
    gap: 16px !important;
  }
  .hs-num {
    font-size: 22px !important;
  }

  /* === CATEGORY GRID === */
  .cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .cat-card {
    padding: 16px 10px !important;
  }
  .cat-emoji {
    font-size: 28px !important;
    width: 50px !important;
    height: 50px !important;
  }
  .cat-name {
    font-size: 12px !important;
  }
  .cat-count {
    font-size: 11px !important;
  }

  /* === PRODUCT GRID === */
  .prod-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .prod-card {
    max-width: 100% !important;
    width: 100% !important;
  }
  .prod-img-wrap {
    aspect-ratio: 4/3 !important;
    height: auto !important;
  }
  .prod-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  .prod-body {
    padding: 10px !important;
  }
  .prod-brand {
    font-size: 8px !important;
    letter-spacing: 0.5px !important;
  }
  .prod-name {
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .prod-pack {
    font-size: 10px !important;
    margin-bottom: 6px !important;
  }
  .prod-footer {
    margin-bottom: 8px !important;
  }
  .prod-price {
    font-size: 16px !important;
  }
  .prod-exvat {
    font-size: 9px !important;
  }
  .prod-stars {
    font-size: 10px !important;
  }
  .prod-view-btn {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }
  .add-btn {
    padding: 9px !important;
    font-size: 12px !important;
  }

  /* === SHOP PAGE — Sidebar + Main Layout === */
  .shop-sidebar {
    display: none !important;
  }
  .shop-layout {
    flex-direction: column !important;
  }

  /* === PRODUCT DETAIL === */
  .pd-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .pd-img {
    aspect-ratio: 4/3 !important;
    font-size: 80px !important;
  }
  .pd-price {
    font-size: 28px !important;
  }
  .qty-row {
    flex-wrap: wrap !important;
  }

  /* === CART PAGE === */
  .cart-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .cart-item-row {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 14px !important;
  }
  .cart-item-img {
    width: 56px !important;
    height: 56px !important;
  }

  /* === CHECKOUT PAGE === */
  .co-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .co-row2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .co-card {
    padding: 16px !important;
  }
  .co-item-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .btn-checkout {
    font-size: 14px !important;
    padding: 14px !important;
  }

  /* === ACCOUNT PAGE === */
  .panel-hdr {
    padding: 18px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .panel-hdr > div:first-child {
    font-size: 18px !important;
  }
  .account-tabs {
    gap: 3px !important;
    padding: 4px !important;
  }
  .tab-link {
    font-size: 11px !important;
    padding: 8px 6px !important;
    min-width: 0 !important;
  }
  .order-card {
    padding: 14px !important;
  }
  .order-card-hdr {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .order-card-hdr > div:last-child {
    text-align: left !important;
  }

  /* === FORMS === */
  .form-card {
    padding: 18px 14px !important;
    margin: 20px auto !important;
    max-width: 100% !important;
  }
  .form-title {
    font-size: 22px !important;
  }
  .fi-row {
    grid-template-columns: 1fr !important;
  }

  /* === CONTACT PAGE === */
  .sec-inner > div[style*="grid-template-columns: 1fr 1.5fr"],
  .sec-inner > div[style*="grid-template-columns:1fr 1.5fr"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* === FOOTER === */
  .foot-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .foot-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }
  .pay-icons {
    justify-content: center !important;
  }

  /* === HOT DEALS === */
  .hot-section {
    padding: 32px 14px !important;
  }
  .timer-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 10px 12px !important;
    width: 100% !important;
  }
  .t-block {
    min-width: 44px !important;
    padding: 5px 10px !important;
  }
  .t-num {
    font-size: 20px !important;
  }

  /* === PAGINATION === */
  .pagination {
    flex-wrap: wrap !important;
    gap: 5px !important;
  }
  .page-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* === BREADCRUMB === */
  .breadcrumb {
    font-size: 11px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .breadcrumb::-webkit-scrollbar {
    display: none;
  }

  /* === WHATSAPP BUTTON === */
  .whatsapp-btn,
  a[title="Chat on WhatsApp"] {
    bottom: 16px !important;
    right: 16px !important;
    width: 50px !important;
    height: 50px !important;
  }
  .whatsapp-btn::before {
    display: none !important;
  }

  /* === TOAST === */
  .toast,
  #toast {
    max-width: calc(100vw - 32px) !important;
    left: 16px !important;
    right: 16px !important;
    transform: none !important;
    bottom: 16px !important;
  }

  /* === EMPTY STATE === */
  .empty-state {
    padding: 40px 16px !important;
  }

  /* === PAGE TITLES === */
  .page-h1 {
    font-size: 22px !important;
  }
  h1[style*="font-size:30px"],
  h1[style*="font-size:28px"],
  h1[style*="font-size:26px"] {
    font-size: 22px !important;
  }

  /* === REGISTER PAGE — Password Grid === */
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* === MOBILE SEARCH BAR === */
  .mob-search-bar {
    display: block !important;
    padding: 8px 12px !important;
  }

  /* === TRUST GRID (homepage) === */
  .trust-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* === FAQ === */
  .faq-item {
    padding: 16px !important;
  }
  .faq-item h3 {
    font-size: 14px !important;
  }
  .faq-item p {
    font-size: 13px !important;
  }

  /* === STATIC PAGES (About, Privacy, Terms, Delivery) === */
  .sec-inner > div[style*="padding:28px"],
  .sec-inner > div[style*="padding: 28px"] {
    padding: 18px !important;
  }
  .sec-inner h2[style*="display:flex"] {
    font-size: 16px !important;
    gap: 8px !important;
  }
}

/* ─── SMALL MOBILE (max-width: 480px) ────────────── */
@media (max-width: 480px) {
  .section {
    padding: 24px 12px !important;
  }
  .prod-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .prod-card {
    border-radius: 10px !important;
  }
  .prod-img-wrap {
    height: 120px !important;
    aspect-ratio: auto !important;
  }
  .prod-body {
    padding: 8px !important;
  }
  .prod-name {
    font-size: 11px !important;
  }
  .prod-price {
    font-size: 14px !important;
  }
  .add-btn {
    padding: 8px !important;
    font-size: 11px !important;
  }
  .cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .cat-card {
    padding: 12px 8px !important;
    border-radius: 10px !important;
  }
  .cat-emoji {
    font-size: 24px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
  }
  .cat-name {
    font-size: 11px !important;
  }
  .cat-cta {
    font-size: 10px !important;
    padding: 4px 10px !important;
  }
  .hero-inner {
    padding: 40px 12px 24px !important;
  }
  .hero h1 {
    font-size: 20px !important;
  }
  .hero-sub {
    font-size: 11px !important;
  }
  .cta-main, .cta-ghost {
    padding: 10px 16px !important;
    font-size: 12px !important;
  }
  .form-card {
    padding: 16px 12px !important;
  }
  .form-title {
    font-size: 20px !important;
  }
  .fi {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
  .btn-full {
    padding: 12px !important;
    font-size: 14px !important;
  }
  .panel-hdr {
    padding: 14px !important;
    border-radius: 10px !important;
  }
  .account-tabs {
    border-radius: 8px !important;
  }
  .tab-link {
    font-size: 10px !important;
    padding: 7px 4px !important;
    border-radius: 6px !important;
  }
  .order-card {
    padding: 12px !important;
    border-radius: 9px !important;
  }
  .pd-img {
    border-radius: 12px !important;
  }
  .pd-price {
    font-size: 24px !important;
  }
  .breadcrumb {
    font-size: 10px !important;
    margin-bottom: 14px !important;
  }

  /* Footer on very small screens */
  footer > div:nth-child(2) {
    padding: 28px 12px 0 !important;
  }
  footer > div:nth-child(2) > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* ─── EXTRA SMALL (max-width: 360px) ─────────────── */
@media (max-width: 360px) {
  .header-inner {
    padding: 0 8px !important;
    gap: 6px !important;
  }
  .logo {
    font-size: 11px !important;
    max-width: 110px !important;
  }
  .hdr-btn {
    padding: 6px 6px !important;
    font-size: 13px !important;
  }
  .prod-grid {
    gap: 6px !important;
  }
  .prod-body {
    padding: 6px !important;
  }
  .prod-name {
    font-size: 10px !important;
  }
  .prod-price {
    font-size: 13px !important;
  }
  .add-btn {
    padding: 7px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
  }
  .section {
    padding: 20px 10px !important;
  }
  .sec-title {
    font-size: 18px !important;
  }
}