/* ==========================================================================
   PHONE STORE — MOBILE-FIRST OPTIMIZATION LAYER v1.0
   Load AFTER style.css and extended.css. Overrides/augments mobile behavior.
   Targets: 320px, 375-414px, 428-480px, 481-767px, 768-1023px
   ========================================================================== */

/* ==========================================================================
   A. GLOBAL MOBILE FOUNDATIONS
   ========================================================================== */

/* Prevent horizontal scroll & honor safe areas (notch / home indicator) */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  /* Use dynamic viewport height where supported */
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Images should never overflow */
img, video, iframe, svg { max-width: 100%; }

/* Kill tap delay + highlight on touch devices, enable smoother scroll */
a, button, [role="button"], input, select, textarea, .btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(15, 44, 74, 0.08);
}

/* Better mobile scrolling inertia */
.table-wrap, .sub-header .container, .subnav .container,
.product-gallery__thumbs, .scroll-x {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Reduced motion: respect user preference (saves battery, prevents nausea) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .product-card:hover, .btn:hover, .card-hover:hover {
    transform: none !important;
  }
}

/* Hover effects ONLY on devices that actually hover */
@media (hover: none) {
  .btn:hover, .product-card:hover, .card-hover:hover,
  .promo-card:hover, .brand-tile:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
  }
  .product-card:hover .product-card__image img {
    transform: none !important;
  }
}

/* ==========================================================================
   B. TABLET & BELOW (<= 1023px)
   ========================================================================== */
@media (max-width: 1023px) {
  :root {
    --navbar-h: 64px;
  }

  .container { padding-inline: var(--space-4); }
  .section { padding-block: var(--space-12); }
  .section-lg { padding-block: var(--space-16); }

  /* Tables turn into horizontal-scroll containers on tablets */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
  }
}

/* ==========================================================================
   C. PHONE (<= 767px) — CORE MOBILE EXPERIENCE
   ========================================================================== */
@media (max-width: 767px) {

  /* ----- Typography scales (prevents iOS zoom + improves readability) ----- */
  html { font-size: 16px; }
  body { font-size: 16px; line-height: 1.65; }

  h1 { font-size: 26px; line-height: 1.25; }
  h2 { font-size: 22px; line-height: 1.3; }
  h3 { font-size: 19px; line-height: 1.35; }
  h4 { font-size: 17px; }
  h5 { font-size: 16px; }
  h6 { font-size: 15px; }

  .page-title { font-size: 24px !important; }

  /* ----- Container / section spacing ----- */
  .container { padding-inline: 14px; }
  .section { padding-block: 36px; }
  .section-sm { padding-block: 28px; }
  .section-lg { padding-block: 48px; }
  .main { padding-block: 16px 56px; }

  /* ----- Touch targets: enforce 44px minimum ----- */
  .btn {
    min-height: 44px;
    padding: 12px 18px;
    font-size: 15px;
  }
  .btn-sm { min-height: 40px; padding: 10px 14px; font-size: 13px; }
  .btn-lg { min-height: 52px; padding: 14px 22px; font-size: 16px; }
  .btn-xl { min-height: 56px; padding: 16px 24px; font-size: 17px; }
  .btn-icon { min-width: 44px; min-height: 44px; }
  .btn-block { width: 100%; }

  /* All text links in nav/actions should have generous hit area */
  .mobile-nav a, .mobile-drawer a,
  .footer-col__link,
  .sub-header a, .subnav a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* ----- Form inputs: 16px font prevents iOS focus zoom ----- */
  .form-control, .form-select, input, textarea, select {
    font-size: 16px !important;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 10px;
  }
  textarea.form-control { min-height: 96px; }
  .form-label { font-size: 14px; margin-bottom: 6px; }
  .form-group, .form-field { margin-bottom: 16px; }

  /* Full-width form submit buttons feel native on mobile */
  form .btn-primary.form-submit,
  form button[type="submit"].btn-block,
  .auth-form .btn, .form-full .btn {
    width: 100%;
  }

  /* ----- TOPBAR: compact ----- */
  .topbar { font-size: 11px; }
  .topbar .container { padding-block: 6px; gap: 6px; }
  .topbar__right { display: none; }
  .topbar svg { width: 12px; height: 12px; }

  /* ----- HEADER: sleek mobile layout ----- */
  .header {
    position: sticky;
    top: 0;
  }
  .header > .container, .navbar {
    gap: 10px;
    padding-block: 10px;
    min-height: 60px;
    flex-wrap: wrap;
  }
  .navbar-brand, .logo { font-size: 20px; }
  .logo span, .navbar-brand__tld { font-size: 0.6em; }

  /* Search moves to own row, full width, gold button */
  .navbar-search, .header-search {
    order: 5;
    flex: 1 0 100%;
    max-width: 100%;
    border-radius: 999px;
    margin-top: 4px;
  }
  .navbar-search input, .header-search input {
    font-size: 16px;
    padding: 10px 16px;
    min-height: 44px;
  }
  .navbar-search button, .header-search button {
    min-width: 52px;
    min-height: 44px;
  }

  /* Header action pills compact */
  .navbar-actions, .header-actions { gap: 6px; }
  .cart-link {
    padding: 10px 12px !important;
    min-height: 44px;
  }
  .cart-link .label-bold { display: none; }
  .cart-link svg { width: 24px; height: 24px; }
  .cart-count {
    top: -4px;
    inset-inline-start: -4px;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
  }

  .menu-toggle {
    display: flex;
    width: 44px;
    height: 44px;
    padding: 10px;
  }

  /* ----- SUB-NAV: horizontal scroll chips ----- */
  .sub-header, .subnav {
    position: sticky;
    top: 60px;
    z-index: 90;
  }
  .sub-header .container, .subnav .container {
    padding-inline: 14px;
    min-height: 44px;
    gap: 4px;
  }
  .sub-header a, .subnav a {
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
  }
  .sub-header a.active, .subnav a.active {
    background: var(--gold);
    color: var(--navy) !important;
  }

  /* ----- MOBILE DRAWER: silky animations ----- */
  .mobile-nav, .mobile-drawer {
    width: min(320px, 88vw);
    padding-bottom: env(safe-area-inset-bottom);
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }
  .mobile-nav-header, .mobile-drawer__header {
    padding: 20px 18px;
    padding-top: calc(20px + env(safe-area-inset-top));
    font-size: 16px;
  }
  .mobile-nav a, .mobile-drawer a {
    padding: 14px 18px;
    font-size: 15px;
    min-height: 52px;
  }
  .mobile-nav a:active, .mobile-drawer a:active {
    background: var(--primary-light);
    transform: scale(0.98);
  }
  /* Prevent body scroll when drawer open */
  body.drawer-open { overflow: hidden; }

  /* ----- HERO: tighter, punchy on mobile ----- */
  .hero {
    padding: 40px 20px;
    border-radius: 18px;
    margin-bottom: 28px;
  }
  .hero h1, .hero__title {
    font-size: 28px !important;
    line-height: 1.2;
    margin-bottom: 12px;
  }
  .hero p, .hero__subtitle {
    font-size: 15px !important;
    margin-bottom: 22px;
    line-height: 1.6;
  }
  .hero-buttons, .hero__cta {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .hero-buttons > a, .hero__cta > a,
  .btn-hero-primary, .btn-hero-outline {
    width: 100%;
    justify-content: center;
    padding: 14px 22px;
    font-size: 15px;
    min-height: 50px;
  }
  .hero-compact { padding: 32px 18px; }

  /* ----- TRUST BAR: stack 2x2 grid for compactness ----- */
  .trust-bar {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
    margin-bottom: 28px;
  }
  .trust-item { gap: 10px; padding: 4px; }
  .trust-icon { width: 40px; height: 40px; }
  .trust-item h4 { font-size: 13px !important; }
  .trust-item p { font-size: 11px !important; }

  /* ----- PROMO + BRAND TILES ----- */
  .promo-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .promo-card { padding: 16px; }
  .promo-card h3 { font-size: 16px; }
  .promo-card p { font-size: 12px; }
  .brand-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* ----- PRODUCT GRIDS: enforce 2-col (NOT 1) on phones ----- */
  .grid-auto {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
  .grid-3, .grid-4, .grid-5 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  /* Product cards: tighter padding, smaller text */
  .product-card { border-radius: 12px; }
  .product-card__body { padding: 10px 12px 14px; gap: 4px; }
  .product-card__brand { font-size: 10px; }
  .product-card__title {
    font-size: 13px;
    min-height: 2.6em;
    -webkit-line-clamp: 2;
  }
  .product-card__price { font-size: 16px; }
  .product-card__old-price { font-size: 12px; }
  .product-card__installment { font-size: 10px; padding: 2px 8px; }
  .product-card__stock { font-size: 11px; }
  .product-card__badge { font-size: 10px; padding: 3px 8px; top: 8px; }
  .product-card__image img { padding: 10px; }
  .product-card__cta .btn { min-height: 40px; font-size: 13px; }

  /* ----- SECTION HEADERS ----- */
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 20px;
  }
  .section-header h2 {
    font-size: 22px !important;
  }
  .section-header .section-subtitle { font-size: 13px; }

  /* ----- CARDS ----- */
  .card-body { padding: 16px; }
  .card-header { padding: 14px 16px; }
  .card-footer { padding: 12px 16px; }

  /* ----- TABLES: cards on mobile ----- */
  /* Cart table transforms to stacked cards */
  .cart-table, .cart-table thead, .cart-table tbody,
  .cart-table tr, .cart-table td, .cart-table th {
    display: block;
    width: 100%;
  }
  .cart-table thead { display: none; }
  .cart-table tbody tr {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
  }
  .cart-table tbody td {
    padding: 6px 0 !important;
    border: none !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    text-align: start;
  }
  .cart-table tbody td[data-label]::before {
    content: attr(data-label) ":";
    font-weight: 700;
    color: var(--text-light);
    font-size: 12px;
    text-transform: uppercase;
  }
  .cart-item__info { flex: 1; }
  .cart-item__name { font-size: 14px; }

  /* Generic responsive tables: horizontal scroll with indicator */
  .table-premium, .table {
    font-size: 13px;
  }
  .table-wrap {
    margin-inline: -14px;
    padding-inline: 14px;
    overflow-x: auto;
  }

  /* Quantity steppers: large touch targets */
  .qty-stepper, .qty-controls, .quantity-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .qty-stepper button, .qty-controls button,
  .quantity-controls button, .btn-qty {
    min-width: 40px;
    min-height: 40px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 8px;
    background: var(--surface-alt);
    border: 1px solid var(--border-strong);
  }
  .qty-stepper input, .qty-controls input {
    width: 48px !important;
    text-align: center;
    font-size: 16px !important;
    min-height: 40px;
  }

  /* ----- PRODUCT DETAIL PAGE ----- */
  .product-detail.grid-2 {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .product-info__title { font-size: 22px !important; }
  .price-showcase__price { font-size: 28px !important; }

  /* Gallery: horizontal scroll-snap swipe */
  .product-gallery__thumbs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 8px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .product-gallery__thumbs::-webkit-scrollbar { display: none; }
  .product-gallery__thumb {
    flex: 0 0 72px;
    height: 72px;
    scroll-snap-align: start;
    border-radius: 10px;
  }

  /* Sticky bottom CTA bar on product detail */
  .sticky-mobile-cta {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 80;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(15, 44, 74, 0.08);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .sticky-mobile-cta .sticky-mobile-cta__price {
    flex: 0 0 auto;
    font-size: 18px;
    font-weight: 800;
    color: var(--gold-dark);
    line-height: 1.2;
  }
  .sticky-mobile-cta .btn {
    flex: 1;
    min-height: 48px;
  }
  /* Push content up so sticky bar doesn't cover it */
  body.has-sticky-cta .main { padding-bottom: 92px; }

  /* ----- CHECKOUT / ORDER PAGES ----- */
  .checkout-layout, .profile-layout, .terms-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .summary-sticky, .profile-sidebar, .terms-toc {
    position: static !important;
    top: auto !important;
  }
  .checkout-step, .step {
    padding: 8px 10px !important;
    font-size: 11px !important;
  }
  .checkout-steps, .steps-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  /* ----- AUTH PAGES ----- */
  .auth-split {
    grid-template-columns: 1fr !important;
  }
  .auth-split__visual {
    padding: 28px 20px !important;
    min-height: auto !important;
    border-radius: 0;
  }
  .auth-split__form { padding: 24px 18px !important; }
  .auth-split__logo { font-size: 28px !important; }
  .auth-split__tagline { font-size: 15px !important; }
  .auth-split__features { display: none; }
  .auth-centered { padding: 16px; min-height: calc(100dvh - 200px); }
  .auth-centered__card { padding: 28px 20px !important; }
  .auth-form-wrap h1 { font-size: 22px !important; }

  /* ----- FILTERS: convert sidebar to bottom sheet ----- */
  .filters-sidebar, .filter-sidebar, .products-filters {
    /* If page uses drawer toggle, these become a modal */
  }
  .filter-bottomsheet {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    max-height: 80dvh;
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 40px rgba(15, 44, 74, 0.2);
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 150;
    transform: translateY(100%);
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
  }
  .filter-bottomsheet.open { transform: translateY(0); }
  .filter-bottomsheet::before {
    content: '';
    display: block;
    width: 42px;
    height: 4px;
    background: var(--border-strong);
    border-radius: 4px;
    margin: 0 auto 12px;
  }

  /* Floating "Filters" button to open bottom sheet */
  .filter-fab {
    position: fixed;
    bottom: 16px;
    inset-inline-start: 16px;
    z-index: 70;
    background: var(--navy);
    color: #fff;
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 700;
    box-shadow: var(--shadow-xl);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 48px;
  }

  /* ----- MODALS: full-screen on mobile ----- */
  .modal, .modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    min-height: 100dvh;
  }
  .modal-content, .modal-body { border-radius: 0 !important; }

  /* ----- FOOTER ----- */
  .footer-newsletter { padding: 32px 0; }
  .footer-newsletter__grid {
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 16px;
  }
  .footer-newsletter__text h3 { font-size: 20px; }
  .footer-newsletter__form {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .footer-newsletter__form input {
    width: 100%;
    font-size: 16px;
    min-height: 48px;
  }
  .footer-newsletter__form .btn { width: 100%; min-height: 48px; }

  .footer-premium, .footer-main { padding: 36px 0 24px; }
  .footer-grid, .footer-main .container {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    text-align: center;
  }
  .footer-col { text-align: center; }
  .footer-socials { justify-content: center; }
  .footer-payments { justify-content: center; }
  .footer-bottom .container {
    flex-direction: column;
    text-align: center;
    gap: 6px;
  }

  /* ----- ADMIN ----- */
  .admin-layout { grid-template-columns: 1fr !important; }
  .admin-main { padding: 16px !important; }
  .admin-sidebar, .sidebar {
    position: fixed !important;
    top: 0;
    inset-inline-end: 0;
    width: min(290px, 86vw) !important;
    height: 100dvh;
    transform: translateX(100%);
    z-index: 201;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
  }
  html[dir="rtl"] .admin-sidebar,
  html[dir="rtl"] .sidebar { transform: translateX(-100%); }
  .admin-sidebar.open, .sidebar.open { transform: translateX(0); }
  .admin-topbar { padding: 10px 14px; }

  /* ----- UTILITIES ----- */
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
  .text-center-mobile { text-align: center; }
  .stack-mobile { flex-direction: column !important; align-items: stretch !important; }
  .full-mobile { width: 100% !important; }
}

/* ==========================================================================
   D. LARGE PHONES (<= 480px) — REFINEMENTS
   ========================================================================== */
@media (max-width: 480px) {
  .container { padding-inline: 12px; }

  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  h3 { font-size: 18px; }

  .hero { padding: 32px 16px; }
  .hero h1, .hero__title { font-size: 24px !important; }
  .hero p, .hero__subtitle { font-size: 14px !important; }

  .card-body { padding: 14px; }

  /* Promo: 1 column on small phones */
  .promo-grid { grid-template-columns: 1fr; }

  /* Trust bar 2x2 still, slightly smaller */
  .trust-bar { padding: 14px; gap: 10px; }
  .trust-icon { width: 36px; height: 36px; }

  /* Product cards tighter */
  .product-card__body { padding: 8px 10px 12px; }
  .product-card__title { font-size: 12.5px; }
  .product-card__price { font-size: 15px; }
}

/* ==========================================================================
   E. SMALL PHONES (<= 360px) — iPhone SE 1st gen, Galaxy Fold closed
   ========================================================================== */
@media (max-width: 360px) {
  .container { padding-inline: 10px; }

  h1 { font-size: 22px; }
  h2 { font-size: 19px; }

  .navbar-brand, .logo { font-size: 18px; }
  .topbar { font-size: 10px; }

  .hero { padding: 28px 14px; }
  .hero h1, .hero__title { font-size: 22px !important; }

  /* On truly tiny screens, go to 1-column product grid */
  .grid-3, .grid-4, .grid-5, .grid-auto {
    grid-template-columns: 1fr !important;
  }
  .product-card__title { font-size: 14px; }
  .product-card__price { font-size: 18px; }

  /* Brand tiles stay 2-col but tighter */
  .brand-tiles { gap: 8px; }

  .btn { font-size: 14px; padding: 11px 14px; }
}

/* ==========================================================================
   F. MEDIUM TABLETS (768-1023px) — hybrid layout
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid-auto { grid-template-columns: repeat(3, 1fr); }
  .trust-bar { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .promo-grid { grid-template-columns: repeat(3, 1fr); }

  .hero { padding: 56px 40px; }
  .hero h1 { font-size: 36px; }

  /* Tables still scroll horizontally on tablet */
  .cart-table { font-size: 14px; }
}

/* ==========================================================================
   G. LANDSCAPE PHONE — reduce vertical padding
   ========================================================================== */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hero { padding: 24px 20px; }
  .hero h1 { font-size: 22px; }
  .hero p { font-size: 13px; margin-bottom: 14px; }
  .section { padding-block: 24px; }
  .mobile-nav, .mobile-drawer { width: 60vw; }
}

/* ==========================================================================
   H. PRINT — ensure sticky elements hidden (already in style.css but reinforce)
   ========================================================================== */
@media print {
  .sticky-mobile-cta, .filter-fab, .filter-bottomsheet { display: none !important; }
}