/* ===== Phone + small tablet layout ===== */
.mobile-actions { display: none; }
.sticky-buy { display: none; }

@media (max-width: 760px) {
  html.no-scroll { overflow: hidden; }
  .container { padding-left: 16px; padding-right: 16px; }

  /* Compact header: logo left, cart + menu right */
  .header-inner,
  .site-header .header-inner { flex-direction: row; height: 60px; padding: 0 16px; gap: 12px; }
  .logo-img { height: 40px; }
  .mobile-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
  .mobile-actions .cart-link { width: 44px; height: 44px; justify-content: center; color: var(--text); }
  .menu-btn {
    width: 44px; height: 44px; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    background: none; border: 1px solid var(--card-border); border-radius: 8px; cursor: pointer; padding: 0;
  }
  .menu-btn span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
  .menu-open .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-open .menu-btn span:nth-child(2) { opacity: 0; }
  .menu-open .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .main-nav,
  .site-header .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; flex-wrap: nowrap;
    background: var(--bg); border-bottom: 1px solid var(--card-border);
    box-shadow: 0 24px 40px rgba(0,0,0,.55);
    padding: 8px 16px 16px; max-height: calc(100vh - 60px); overflow-y: auto;
  }
  .menu-open .main-nav { display: flex; animation: menuIn .18s ease-out; }
  @keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .main-nav > a, .main-nav .inline-form .link-btn {
    display: flex; align-items: center; min-height: 52px; padding: 0 4px; font-size: 1.05rem; font-weight: 600;
    border-bottom: 1px solid var(--card-border); width: 100%; text-align: left;
  }
  .main-nav .inline-form { display: block; }
  .main-nav .desktop-cart { display: none; }
  .main-nav .btn.btn-small { justify-content: center; margin-top: 12px; border-bottom: 0; min-height: 48px; }
  .site-header { position: sticky; }

  /* Section + owner tabs: one swipeable row with fade edges */
  .section-bar-inner, .admin-nav {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 36px), transparent);
  }
  .section-bar-inner.at-start, .admin-nav.at-start {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }
  .section-bar-inner.at-end, .admin-nav.at-end {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px);
            mask-image: linear-gradient(90deg, transparent 0, #000 18px);
  }
  .section-bar-inner.at-start.at-end, .admin-nav.at-start.at-end { -webkit-mask-image: none; mask-image: none; }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav { margin: 12px -16px 24px; padding: 0 16px; gap: 2px; }
  .admin-nav a { white-space: nowrap; padding: 12px 12px; }
  .section-bar a { padding: 13px 12px; }

  /* Tighter vertical rhythm */
  .home-hero { padding: 28px 0 36px; }
  .home-hero-emblem { max-width: 150px; margin-bottom: -8px; }
  .home-hero h1 { font-size: 2rem; margin-bottom: 14px; }
  .home-hero .hero-sub { margin-bottom: 22px; font-size: 1rem; }
  .home-hero .hero-cta { flex-wrap: wrap; gap: 10px; }
  .home-hero .hero-cta .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
  .page-section { padding: 36px 0; }
  .page-head { padding: 24px 0 22px; }
  .page-head h1 { font-size: 1.75rem; }
  .shop-section, .dashboard-section, .auth-section, .plans, .faq { padding-top: 28px; padding-bottom: 48px; }
  h1 { font-size: 1.8rem; }
  .section-title { font-size: 1.5rem; }
  .section-sub { margin-bottom: 28px; }

  /* Two products per row */
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .product-card { --cut: 10px; }
  .product-thumb { aspect-ratio: 1 / 1; }
  .product-info { padding: 10px 12px 12px; gap: 4px; }
  .product-name { font-size: 0.88rem; line-height: 1.25; }
  .product-short { display: none; }
  .product-price { font-size: 1rem; }
  .product-price-row { margin-top: 2px; gap: 6px; }
  .product-price-row s, .product-price-row .stock-low { font-size: 0.72rem; }
  .type-tag { top: 8px; left: 8px; font-size: 0.6rem; padding: 2px 7px; }
  .sale-tag { top: 8px; right: 8px; font-size: 0.6rem; padding: 2px 7px; }
  .card-swatches span { width: 12px; height: 12px; }

  /* Spotlight banner */
  .spotlight-body { padding: 18px; }
  .spotlight-name { font-size: 1.35rem; }

  /* Search row */
  .shop-search { flex-wrap: wrap; gap: 8px; }
  .shop-search input { flex: 1 1 100%; min-width: 0; }
  .shop-search select, .shop-search .btn { flex: 1 1 auto; }

  /* Product page */
  .product-detail { gap: 20px; margin-bottom: 40px; }
  .product-buy h1 { font-size: 1.6rem; margin-top: 8px; }
  .product-price-row.big .product-price { font-size: 1.7rem; }
  .breadcrumb { margin-bottom: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .color-picker .swatch { min-width: 44px; min-height: 44px; }
  .color-picker { gap: 10px; }
  .variant-picker span { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 46px; }
  .buy-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .buy-actions .btn { width: 100%; justify-content: center; }
  .gallery-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  body.has-sticky-buy .site-footer { padding-bottom: 96px; }
  .sticky-buy {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--card-border);
    transform: translateY(110%); transition: transform .22s ease;
  }
  .sticky-buy.show { transform: none; }
  .sticky-buy-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .sticky-buy-name { font-size: 0.8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sticky-buy .product-price { font-size: 1.1rem; }
  .sticky-buy .btn { flex: 0 0 auto; min-height: 46px; padding: 0 22px; }

  /* Cart + checkout */
  .cart-item { grid-template-columns: 72px 1fr; gap: 12px; padding: 12px; align-items: start; }
  .cart-thumb img { width: 72px; height: 72px; object-fit: cover; }
  .cart-item-total { grid-column: 2; }
  .cart-item-controls { flex-wrap: wrap; gap: 8px 14px; }
  .cart-item-controls input { width: 64px; min-height: 40px; }
  .coupon-form { gap: 8px; }
  .cart-layout, .checkout-layout { gap: 20px; }
  .order-summary .btn, .cart-summary .btn { width: 100%; justify-content: center; }
  input, select, textarea { font-size: 16px; } /* stops iPhone zooming in on focus */

  /* Footer */
  .site-footer { padding-top: 32px; }
  .footer-inner { flex-direction: column; gap: 20px; }
  .footer-links { gap: 4px 18px; }
  .footer-links a { padding: 8px 0; }

  /* Owner panel stats */
  .stats-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-card { padding: 14px 10px; }
  .stat-card-num { font-size: 1.35rem; }

  /* Tables become cards */
  .table-wrap { border: 0; overflow: visible; }
  .data-table.stackable, .data-table.stackable tbody, .data-table.stackable tr, .data-table.stackable td { display: block; width: 100%; }
  .data-table.stackable thead { display: none; }
  .data-table.stackable tr {
    background: var(--card); border: 1px solid var(--card-border); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 10px; position: relative;
  }
  .data-table.stackable td { border: 0; padding: 5px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right; }
  .data-table.stackable td[data-label]::before {
    content: attr(data-label); color: var(--muted); font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; text-align: left; flex: 0 0 auto;
  }
  .data-table.stackable td:not([data-label]) { justify-content: flex-start; text-align: left; }
  .data-table.stackable td:empty { display: none; }
  .data-table.stackable td:has(> .table-thumb) { position: absolute; top: 12px; right: 14px; width: auto; padding: 0; }
  .data-table.stackable td:has(> .table-thumb) + td { padding-right: 76px; text-align: left; justify-content: flex-start; flex-wrap: wrap; }
  .data-table.stackable td:has(> .table-thumb) + td::before { display: none; }
  .data-table.stackable .row-actions { justify-content: flex-start; gap: 8px; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--card-border); }
  .data-table.stackable .row-actions .btn { flex: 1; justify-content: center; text-align: center; }
}

@media (max-width: 380px) {
  .product-grid { gap: 10px; }
  .product-info { padding: 9px 10px 10px; }
  .home-hero h1 { font-size: 1.75rem; }
}