/* VELORA responsive foundation: one predictable layout across phones,
   tablets, laptops, and wide screens. Loaded after legacy overrides. */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, video, svg, canvas { max-width: 100%; }

.app-shell,
.main-content,
.dynamic-page,
.page-heading,
.page-actions,
.product-layout,
.store-grid,
.category-product-grid,
.catalog-grid,
.wishlist-grid,
.customer-offer-cards,
.customer-offer-card,
.store-card,
.category-product-card,
.catalog-card,
.live-product-card { min-width: 0; max-width: 100%; }

.page-actions { flex-wrap: wrap; }
.store-card img,
.category-product-card > img { display: block; width: 100%; object-fit: contain; }
.catalog-image-wrap img,
.live-product-card > img { display: block; max-width: 100%; object-fit: contain; }
.store-card button,
.live-card-actions button,
.catalog-actions button,
.customer-detail-actions button { max-width: 100%; }
.live-card-actions,
.catalog-actions,
.customer-detail-actions { min-width: 0; flex-wrap: wrap; }

@media (max-width: 900px) {
  body { min-width: 0 !important; }
  .app-shell { display: block; width: 100%; min-width: 0; padding: 6px; }
  .sidebar { width: min(86vw, 320px); max-width: 100%; }
  .main-content { width: 100%; min-width: 0; padding: 10px 0 28px !important; }
  .topbar { height: auto; min-width: 0; flex-wrap: wrap; }
  .welcome, .top-actions, .search { min-width: 0; max-width: 100%; }
  .top-actions, .search { width: 100%; }
  .page-heading { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
  .page-actions { width: 100%; }
  .store-grid,
  .category-product-grid,
  .wishlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .catalog-card { width: 100%; }
  .products-table,
  .sales-table-wrap,
  .customers-table,
  .admin-ops-panel { max-width: 100%; overflow-x: auto; }
  .product-layout,
  .sales-main-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .customer-mode .customer-offer-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-mode .customer-offer-card { width: 100%; }
}

/* Tablets should show a readable live card, not the desktop preview effect.
   The old 550px carousel cards were scaled to 52% between 901 and 1100px. */
@media (min-width: 561px) and (max-width: 1100px) {
  .customer-mode .carousel-shell .customer-offer-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    padding: 0 8px 12px !important;
    overflow: visible;
  }
  .customer-mode .carousel-shell .customer-offer-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex: initial;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    animation: none !important;
  }
  .customer-mode .carousel-shell .live-product-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
  }
}

@media (max-width: 560px) {
  .app-shell { padding: 4px; }
  .main-content { padding-inline: 0 !important; }
  .store-grid,
  .category-product-grid,
  .wishlist-grid,
  .catalog-grid,
  .customer-mode .customer-offer-cards { grid-template-columns: minmax(0, 1fr) !important; gap: 10px; }
  .store-card,
  .category-product-card,
  .catalog-card,
  .wishlist-card,
  .customer-mode .customer-offer-card { width: 100%; max-width: 100%; }
  .store-card img,
  .category-product-card > img { height: auto !important; aspect-ratio: 4 / 3; }
  .catalog-card { grid-template-rows: auto auto !important; }
  .catalog-image-wrap { min-height: 0 !important; height: auto !important; aspect-ratio: 1 / 1; }
  .catalog-image-wrap > .catalog-product-link { height: 100%; }
  .customer-mode .live-product-card { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .customer-mode .live-product-card > img { width: 100%; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 4 / 3; }
  .live-card-actions,
  .catalog-actions,
  .customer-detail-actions { width: 100%; gap: 6px; }
  .live-card-actions .live-view-button { flex: 1 1 120px; min-width: 0; }
  .live-card-actions .live-cart-button,
  .live-card-actions .live-share-button,
  .live-card-actions .live-copy-button,
  .live-card-actions .live-wishlist-button { flex: 0 0 32px; width: 32px; min-width: 32px; }
  .catalog-actions { grid-template-columns: minmax(0, 1fr) repeat(4, 32px) !important; }
  .catalog-actions .gold-button { min-width: 0 !important; width: 100% !important; }
  .page-actions > *,
  .customer-detail-actions > * { min-width: 0; max-width: 100%; }
  .premium-two-col,
  .auth-form-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* iPad/tablet navigation: use the same drawer pattern as phones. The old
   breakpoint stopped at 768px, leaving iPad Air widths with the sidebar in
   normal document flow above the customer content. */
@media (min-width: 769px) and (max-width: 1100px) {
  .app-shell { position: relative; display: block; width: 100%; padding: 58px 0 0; }
  .mobile-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: fixed;
    top: 10px;
    left: 12px;
    z-index: 1002;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid #73501f;
    border-radius: 10px;
    background: linear-gradient(135deg,#2a1c0d,#130f0b);
    color: #f0bd6b;
    font: 600 13px 'DM Sans', sans-serif;
    cursor: pointer;
    box-shadow: 0 8px 20px #0005;
  }
  .mobile-menu-icon { font-size: 18px; line-height: 1; }
  .sidebar {
    position: fixed;
    z-index: 1001;
    inset: 0 auto 0 0;
    width: min(320px, calc(100vw - 44px));
    min-height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 18px 14px 14px;
    border-radius: 0 18px 18px 0;
    transform: translateX(-105%);
    transition: transform .25s ease;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 18px 0 45px #0009;
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-scrim { position: fixed; z-index: 1000; inset: 0; background: rgba(0,0,0,.68); backdrop-filter: blur(2px); }
  .sidebar-scrim:not([hidden]) { display: block; }
  .main-content { width: 100%; max-width: 100%; min-width: 0; height: calc(100dvh - 58px); overflow-y: auto; padding: 10px 16px 28px; }
  .nav-list { display: grid; gap: 6px; margin-top: 10px; }
  .nav-item { width: 100%; height: 48px; flex: none; }
}