/*
 * Shree Kuber Products — shared mobile layout safeguards.
 *
 * This file intentionally contains layout-only rules. Page colours, typography
 * and business-specific components remain owned by their existing stylesheets.
 */

:root {
  --skp-mobile-gutter: clamp(10px, 3.5vw, 18px);
  --skp-mobile-touch: 44px;
}

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

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

iframe {
  border: 0;
}

:where(main, article, section, aside, header, footer, nav, form, fieldset, .panel, .card) {
  min-width: 0;
}

:where(h1, h2, h3, h4, p, a, button, label, legend, th, td, .page-title, .card-title) {
  overflow-wrap: anywhere;
}

:where(input, select, textarea, button) {
  max-width: 100%;
}

:where(.admin-content, .skp-content, .cw, .page-wrap, .public-premium-page main) :where(pre, code) {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

:where(.admin-table-scroll, .table-responsive, .table-scroll, .data-table, .responsive-table) {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

:where(dialog, [role="dialog"], .modal-dialog, .popup, .drawer-panel) {
  max-width: calc(100vw - 20px) !important;
  max-height: calc(100dvh - 20px);
}

@media (max-width: 900px) {
  .admin-main,
  .skp-main {
    width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
  }

  .admin-sidebar,
  .skp-sidebar {
    width: min(86vw, 290px) !important;
    max-width: 290px;
  }

  .admin-content,
  .skp-content {
    width: 100%;
    padding-inline: var(--skp-mobile-gutter) !important;
  }

  .admin-topbar,
  .skp-topbar {
    width: 100%;
    max-width: 100%;
  }

  .admin-content :where(.panel, .card, .stat),
  .skp-content :where(.panel, .card, .skp-stat) {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-height: 100dvh;
  }

  :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    width: 100%;
    min-height: var(--skp-mobile-touch);
    font-size: 16px !important;
  }

  :where(button, .btn, .primary-btn, .login-btn, [role="button"]) {
    min-height: var(--skp-mobile-touch);
  }

  :where(.admin-content, .skp-content, .cw, .page-wrap, .public-premium-page main) table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  :where(.admin-content, .skp-content, .cw, .page-wrap, .public-premium-page main) table :where(th, td) {
    white-space: nowrap;
  }

  :where(.admin-content, .skp-content, .cw, .page-wrap, .public-premium-page main) table :where(p, .wrap, [data-wrap]) {
    white-space: normal;
  }

  :where(.admin-content, .skp-content, .cw, .page-wrap) :where(.modal, [role="dialog"], dialog) {
    padding: 10px;
  }

  :where(dialog, [role="dialog"], .modal-dialog, .popup, .drawer-panel) {
    width: calc(100vw - 20px) !important;
    margin: 10px auto !important;
    overflow-y: auto;
  }

  /* Classic and Bootstrap admin shells. */
  .admin-content [style*="display:flex"],
  .admin-content [style*="display: flex"],
  .skp-content [style*="display:flex"],
  .skp-content [style*="display: flex"] {
    max-width: 100%;
    flex-wrap: wrap !important;
  }

  .admin-content :where(.toolbar, .filters, .filter-row, .actions, .form-actions, .page-actions, .card-actions),
  .skp-content :where(.toolbar, .filters, .filter-row, .actions, .form-actions, .page-actions, .card-actions) {
    display: flex;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }

  .admin-content :where(.grid, .stats-grid, .dashboard-grid, .kpi-grid),
  .skp-content :where(.grid, .stats-grid, .dashboard-grid, .kpi-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .admin-content :where(.form-grid, .filters-grid),
  .skp-content :where(.form-grid, .filters-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-content :where(.form-grid, .filters-grid) > *,
  .skp-content :where(.form-grid, .filters-grid) > * {
    grid-column: auto !important;
  }

  .admin-content :where(.panel, .card),
  .skp-content :where(.panel, .card) {
    padding: clamp(12px, 3.5vw, 18px);
  }

  .admin-topbar .top-actions,
  .skp-topbar .skp-top-actions {
    max-width: 100%;
    flex-wrap: wrap;
  }

  /* Customer account shell and all account modules. */
  .cw {
    width: calc(100% - (var(--skp-mobile-gutter) * 2)) !important;
    margin: 10px auto 90px !important;
  }

  .customer-shell {
    border-radius: 20px !important;
    padding: 14px !important;
  }

  .customer-shell .ch,
  .customer-shell .customer-tools {
    width: 100%;
    max-width: 100%;
  }

  .customer-shell .customer-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .customer-shell .welcome-chip {
    grid-column: 1 / -1;
    width: 100%;
  }

  .customer-shell .lang-select {
    width: 100% !important;
    min-width: 0 !important;
  }

  .cn {
    width: 100%;
    max-width: 100%;
    scroll-snap-type: x proximity;
  }

  .cn a {
    min-height: var(--skp-mobile-touch);
    scroll-snap-align: start;
  }

  .cw [style*="display:flex"],
  .cw [style*="display: flex"] {
    max-width: 100%;
    flex-wrap: wrap !important;
  }

  .cw :where(.grid, .dashboard-grid, .stats-grid, .orders-grid, .address-grid, .offer-grid, .reward-grid, .wishlist-grid, .product-grid, .form-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .cw :where(.panel, .card, .order-card, .address-card, .offer-card, .reward-card) {
    max-width: 100%;
    padding: clamp(14px, 4vw, 20px);
  }

  .customer-bottom-nav {
    max-width: 100vw;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  /* Public storefront and content pages. */
  .page-wrap,
  .public-premium-page main,
  .search-page,
  .product-page,
  .category-page,
  .brand-page {
    width: calc(100% - (var(--skp-mobile-gutter) * 2)) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  :where(.site-header, .public-header, .main-header, .header-inner, .header-top, .header-main) {
    max-width: 100%;
  }

  :where(.site-header, .public-header, .main-header) :where(.header-inner, .header-top, .header-main, .header-actions) {
    flex-wrap: wrap;
  }

  :where(.main-nav, .category-nav, .public-nav, .mobile-scroll-nav) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  :where(.product-layout, .product-detail-grid, .search-layout, .category-layout, .brand-layout, .content-grid, .contact-grid, .footer-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(.product-gallery, .product-summary, .search-sidebar, .category-sidebar) {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  :where(.product-grid, .products-grid, .category-grid, .brand-grid, .offers-grid) {
    max-width: 100%;
  }

  :where(.product-card, .category-card, .brand-card, .offer-card) {
    min-width: 0 !important;
    max-width: 100%;
  }

  :where(.hero, .banner, .campaign-hero, .page-hero) {
    max-width: 100%;
    overflow: hidden;
  }

  .auth-shell,
  .auth-wrap {
    width: calc(100% - (var(--skp-mobile-gutter) * 2)) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .auth-card,
  .login,
  .box {
    max-width: 100% !important;
  }
}

@media (max-width: 560px) {
  h1 {
    font-size: clamp(1.55rem, 8vw, 2rem);
  }

  h2 {
    font-size: clamp(1.3rem, 6.5vw, 1.7rem);
  }

  .admin-content [style*="grid-template-columns"],
  .skp-content [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-content :where(.grid, .stats-grid, .dashboard-grid, .kpi-grid),
  .skp-content :where(.grid, .stats-grid, .dashboard-grid, .kpi-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(.admin-content, .skp-content, .cw) :where(.actions, .form-actions, .page-actions, .card-actions, .order-actions, .reminder-actions, .filter-actions) > :where(a, button, .btn, input[type="submit"]) {
    flex: 1 1 100%;
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .admin-content :where(.filters, .filter-row) > *,
  .skp-content :where(.filters, .filter-row) > * {
    flex: 1 1 100%;
    width: 100%;
  }

  .customer-shell .ch {
    align-items: stretch !important;
  }

  .customer-shell .brand-lockup {
    width: 100%;
  }

  .customer-shell .brand-copy b {
    font-size: 17px;
  }

  .customer-shell .brand-logo {
    width: 56px;
    height: 56px;
  }

  :where(.product-grid, .products-grid, .category-grid, .brand-grid, .offers-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(.product-actions, .purchase-actions, .cart-actions, .checkout-actions) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }

  :where(.product-actions, .purchase-actions, .cart-actions, .checkout-actions) > :where(a, button, .btn) {
    width: 100%;
    justify-content: center;
  }

  .page-wrap,
  .public-premium-page main {
    padding-inline: 0 !important;
  }

  .auth-card,
  .login,
  .box {
    width: calc(100% - 20px) !important;
    padding: 20px 16px !important;
    border-radius: 18px !important;
  }
}

/* Mobile-friendly previews for invoices, statements and receipts. */
@media screen and (max-width: 768px) {
  .skp-print-page {
    margin: 0 !important;
    padding: 12px !important;
    background: #fff !important;
  }

  .skp-print-page :where(.head, .receipt .head) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
  }

  .skp-print-page > table,
  .skp-print-page .receipt table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .skp-print-page .receipt {
    width: 100% !important;
    max-width: 100%;
    margin: 0 auto !important;
    padding: 16px !important;
  }

  .skp-print-page .actions,
  .skp-print-page > button {
    position: sticky;
    top: 8px;
    z-index: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}