/*
 * Sale Market — Premium Mobile UI
 * Uzum Market / Yandex Market level mobile experience
 * Only activates on mobile/tablet — desktop untouched
 * ---------------------------------------------------
 */

/* ─── GLOBAL MOBILE RESET ──────────────────────────── */
@media (max-width: 1024px) {
  body.market-body,
  body.market-body * {
    box-sizing: border-box;
  }
  body.market-body {
    overflow-x: hidden;
  }
  body.market-body img {
    max-width: 100%;
    height: auto;
  }
}

/* ═══════════════════════════════════════════════════
   HEADER — COMPACT PREMIUM MOBILE
   ═══════════════════════════════════════════════════ */

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

  /* hide topbar promo strip entirely */
  .market-topbar {
    display: none !important;
  }

  /* mainbar padding tighter */
  .market-mainbar {
    padding: 8px 0 !important;
    background: rgba(255, 255, 255, 0.97) !important;
  }

  /* mainbar row: logo | actions | search below */
  .market-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: 0 !important;
    align-items: center;
    padding: 0 12px;
  }

  /* logo — row 1, col 1 */
  .market-logo {
    grid-row: 1;
    grid-column: 1;
    font-size: 17px !important;
    gap: 7px !important;
  }
  .market-logo__mark {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
  }
  .market-logo > span:last-child {
    font-size: 16px !important;
    font-weight: 900;
  }

  /* catalog btn — hide on mobile */
  .market-catalog-btn {
    display: none !important;
  }

  /* actions — row 1, col 2 */
  .market-actions {
    grid-row: 1;
    grid-column: 2;
    display: flex !important;
    align-items: center;
    gap: 4px !important;
  }
  .market-action {
    padding: 7px 8px !important;
    border-radius: 10px !important;
    background: transparent !important;
    min-width: unset;
  }
  .market-action > span:not(.tip):not(.market-cart-tip) {
    display: none !important;
  }
  .market-action i {
    font-size: 18px;
  }
  .market-cart-tip {
    top: -5px !important;
    right: -4px !important;
    min-width: 16px !important;
    height: 16px !important;
    font-size: 10px !important;
  }

  /* search bar — row 2, full width with catalog button to the left */
  .market-search {
    grid-row: 2;
    grid-column: 1 / -1;
    margin: 8px 0 4px !important;
    border-radius: 12px !important;
    border-width: 2px !important;
    box-shadow: 0 4px 14px rgba(255, 212, 0, 0.14) !important;
    order: unset;
    flex: unset;
    width: 100%;
  }
  .market-search input {
    padding: 11px 12px !important;
    font-size: 14px !important;
  }
  .market-search button {
    padding: 0 16px !important;
    font-size: 15px;
  }

  /* Search + catalog button wrapper on row 2 */
  .market-search-row {
    grid-row: 2;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 4px !important;
  }
  /* When wrapped, search takes remaining width */
  .market-search-row .market-search {
    grid-row: unset !important;
    grid-column: unset !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    width: auto !important;
  }
  /* Catalog open button inside search row */
  .market-search-row .mh-catalog-open-btn {
    flex-shrink: 0;
    height: 44px;
    width: 44px;
    min-width: 44px;
    border-radius: 12px !important;
  }

  /* nav — horizontal scroll tabs */
  .market-nav {
    border-top: 1px solid rgba(229, 231, 235, 0.7) !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.97);
  }
  .market-nav .container-fluid {
    padding: 0 !important;
  }
  .market-nav ul {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    gap: 0 !important;
    padding: 0 8px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
  }
  .market-nav ul::-webkit-scrollbar {
    display: none;
  }
  .market-nav ul li {
    flex: 0 0 auto;
  }
  .market-nav a {
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    display: block;
  }
  .market-nav .active a,
  .market-nav a:hover {
    color: #6d28d9 !important;
    border-bottom-color: #6d28d9 !important;
  }

  /* sticky header — must not block content */
  .market-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08) !important;
  }
}

/* ─── 480px extra: minimal header ── */
@media (max-width: 480px) {
  .market-mainbar {
    padding: 6px 0 !important;
  }
  .market-row {
    padding: 0 10px;
    gap: 0 !important;
  }
  .market-logo > span:last-child {
    font-size: 15px !important;
  }
  .market-logo__mark {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
  }
  .market-search input {
    font-size: 13px !important;
    padding: 10px 10px !important;
  }
  .market-nav a {
    padding: 9px 10px !important;
    font-size: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════
   HERO SECTION — COMPACT & PREMIUM
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .market-hero {
    padding: 14px 0 18px !important;
  }
  .market-hero-card {
    min-height: auto !important;
    border-radius: 20px !important;
    padding: 20px 18px 22px !important;
  }
  .market-kicker {
    font-size: 11px !important;
    padding: 6px 10px !important;
    margin-bottom: 12px !important;
  }
  .market-title {
    font-size: 26px !important;
    letter-spacing: -1px !important;
    margin-bottom: 10px !important;
    max-width: 100% !important;
  }
  .market-subtitle {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
    color: rgba(229, 231, 235, 0.9) !important;
  }
  .market-hero-actions {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .market-btn {
    padding: 11px 16px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
  }
  /* Hero visual mockup phone — hide on mobile to save space */
  .market-hero-visual {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .market-hero {
    padding: 10px 0 14px !important;
  }
  .market-hero-card {
    padding: 16px 14px 18px !important;
    border-radius: 16px !important;
  }
  .market-title {
    font-size: 22px !important;
  }
  .market-subtitle {
    font-size: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════
   PAGE HERO / BREADCRUMB — COMPACT
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .market-page-hero,
  .breadcrumb-custom.market-page-hero {
    padding: 24px 0 28px !important;
  }
  .market-page-hero h2 {
    font-size: 24px !important;
    letter-spacing: -0.5px !important;
  }
  .market-page-hero p {
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .market-page-hero,
  .breadcrumb-custom.market-page-hero {
    padding: 18px 0 20px !important;
  }
  .market-page-hero h2 {
    font-size: 20px !important;
  }
}

/* ═══════════════════════════════════════════════════
   CATEGORY GRID — HORIZONTAL SCROLL CHIPS
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .market-section {
    padding: 24px 0 !important;
  }
  .market-section-title {
    margin-bottom: 14px !important;
    flex-wrap: wrap;
    gap: 8px !important;
    align-items: center !important;
  }
  .market-section-title h2,
  .market-section-title h4 {
    font-size: 20px !important;
    letter-spacing: -0.5px !important;
  }
  .market-section-title p {
    font-size: 13px !important;
  }

  /* horizontal scroll category chips */
  .market-category-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px !important;
    padding: 2px 0 10px !important;
  }
  .market-category-grid::-webkit-scrollbar {
    display: none;
  }
  .market-category {
    flex: 0 0 auto !important;
    width: 110px !important;
    min-height: auto !important;
    border-radius: 16px !important;
    padding: 12px 10px !important;
    text-align: center;
  }
  .market-category img {
    width: 52px !important;
    height: 52px !important;
    border-radius: 12px !important;
    margin: 0 auto 8px !important;
  }
  .market-category h5 {
    font-size: 12px !important;
    font-weight: 800 !important;
    margin-bottom: 0 !important;
    line-height: 1.3;
  }
  .market-category p {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .market-category {
    width: 96px !important;
    padding: 10px 8px !important;
  }
  .market-category img {
    width: 44px !important;
    height: 44px !important;
  }
  .market-category h5 {
    font-size: 11px !important;
  }
}

/* ═══════════════════════════════════════════════════
   FLASH SALE STRIP — COMPACT MOBILE
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .market-strip {
    border-radius: 18px !important;
    padding: 16px 14px !important;
  }
  .market-strip h3 {
    font-size: 18px !important;
    margin-bottom: 2px !important;
  }
  .market-strip p {
    font-size: 12px !important;
  }
  .market-strip__inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .market-timer {
    gap: 6px !important;
  }
  .market-timer span {
    min-width: 40px !important;
    height: 40px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }
  .market-strip .market-btn {
    padding: 9px 14px !important;
    font-size: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════
   PRODUCT CARDS — 2-COLUMN PREMIUM GRID
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* 2-column product grid via direct IDs (safe, widely supported) */
  body.market-body #shop-grid,
  body.market-body #new-products,
  body.market-body #featured-products {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* reset Bootstrap col widths inside those grids */
  body.market-body #shop-grid > [class*="col-"],
  body.market-body #new-products > [class*="col-"],
  body.market-body #featured-products > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
  }

  /* product card itself */
  body.market-body .product__item {
    border-radius: 16px !important;
    margin-bottom: 0 !important;
    height: auto !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid #edf2f7 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* product image */
  body.market-body .product__item__pic {
    height: 155px !important;
    border-radius: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    flex: 0 0 auto;
  }

  /* text area */
  body.market-body .product__item__text {
    padding: 10px 10px 12px !important;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  /* product name — max 2 lines */
  body.market-body .product__item__text h6 {
    font-size: 13px !important;
    line-height: 1.35 !important;
    min-height: unset !important;
    margin-bottom: 5px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  body.market-body .product__item__text h6 a {
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  /* rating */
  .market-rating {
    font-size: 11px !important;
    gap: 3px !important;
    margin-bottom: 4px !important;
  }

  /* price */
  body.market-body .product__price {
    font-size: 15px !important;
    margin: 4px 0 8px !important;
    font-weight: 950 !important;
  }
  body.market-body .product__oldprice {
    font-size: 11px !important;
    margin-left: 4px !important;
  }

  /* add to cart button */
  body.market-body .link-btn {
    padding: 9px 8px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin-top: auto !important;
  }

  /* label badge on card */
  body.market-body .product__item__pic .label {
    font-size: 10px !important;
    padding: 4px 7px !important;
  }
}

@media (max-width: 480px) {
  body.market-body #shop-grid,
  body.market-body #new-products,
  body.market-body #featured-products {
    gap: 8px !important;
  }
  body.market-body .product__item__pic {
    height: 140px !important;
  }
  body.market-body .product__item__text {
    padding: 8px 8px 10px !important;
  }
  body.market-body .product__item__text h6 a {
    font-size: 12px !important;
  }
  body.market-body .product__price {
    font-size: 14px !important;
  }
  body.market-body .link-btn {
    font-size: 10px !important;
    height: 32px !important;
    padding: 7px 6px !important;
  }
}

/* ═══════════════════════════════════════════════════
   FEATURES SECTION — 2-col grid mobile
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .market-features {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .market-feature {
    border-radius: 16px !important;
    padding: 14px 12px !important;
    gap: 10px !important;
  }
  .market-feature i {
    width: 36px !important;
    height: 36px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }
  .market-feature h6 {
    font-size: 13px !important;
  }
  .market-feature p {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 480px) {
  .market-features {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════
   SHOP PAGE — CATALOG TOOLBAR
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .market-breadcrumb {
    padding: 20px 0 !important;
  }
  .market-breadcrumb h1 {
    font-size: 22px !important;
  }
  .market-breadcrumb p {
    font-size: 13px !important;
  }

  .market-toolbar {
    border-radius: 16px !important;
    padding: 12px !important;
    margin-bottom: 16px !important;
  }

  /* filter chips — horizontal scroll */
  .market-filter-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
    margin-bottom: 10px !important;
    padding-bottom: 4px;
  }
  .market-filter-row::-webkit-scrollbar {
    display: none;
  }
  body.market-body .filter-btn {
    flex: 0 0 auto !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
    white-space: nowrap;
  }

  /* search + sort stacked */
  .market-control-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .market-control-row input,
  .market-control-row select {
    height: 42px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
    padding: 0 12px !important;
  }
  .market-control-row .market-btn {
    padding: 11px 14px !important;
    font-size: 13px !important;
  }

  /* shop section padding */
  .market-section.market-section--shop,
  .market-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .market-section .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ═══════════════════════════════════════════════════
   CART PAGE — PREMIUM MOBILE UI
   Uzum / Yandex Market level mobile cart experience
   ═══════════════════════════════════════════════════ */

/* ── 768px: tablet + mobile ── */
@media (max-width: 768px) {

  /* stack layout to single column */
  .market-cart-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── Cart list card ── */
  .market-cart-list {
    padding: 14px 14px 8px !important;
    border-radius: 20px !important;
  }

  /* ── Cart header ── */
  .market-cart-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding-bottom: 12px !important;
    flex-wrap: wrap !important;
  }
  .market-cart-head h3 {
    font-size: 17px !important;
    margin-bottom: 2px !important;
  }
  .market-cart-head p {
    font-size: 12px !important;
    margin: 0 !important;
  }
  .market-mini-link {
    font-size: 12px !important;
    padding: 7px 10px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
  }

  /* ── Individual cart item card ── */
  .market-cart-card {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    margin-bottom: 10px !important;
    align-items: flex-start !important;
    background: linear-gradient(180deg, #fff, #fbfdff) !important;
    border: 1px solid #edf2f7 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
    /* kill the hover lift on touch */
    transition: none !important;
  }
  .market-cart-card:hover {
    transform: none !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
  }
  .market-cart-card:last-child {
    margin-bottom: 4px !important;
  }

  /* ── Product image — fixed square, never full-width ── */
  .market-cart-img {
    width: 96px !important;
    height: 96px !important;
    flex: 0 0 96px !important;
    min-width: 96px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    display: block !important;
    margin-bottom: 0 !important;
  }
  .market-cart-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
  }

  /* ── Product info side ── */
  .market-cart-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  /* ── Title row: name + price stacked, not side-by-side ── */
  .market-cart-title-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
  }
  .market-cart-title-row h4 {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    margin: 0 0 2px !important;
    line-height: 1.3 !important;
    /* max 2 lines */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .market-cart-title-row > div:first-child p {
    font-size: 11px !important;
    color: #94a3b8 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ── Price block ── */
  .market-cart-price {
    text-align: left !important;
    margin-top: 2px !important;
  }
  .market-cart-price strong {
    display: block !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #6d28d9 !important;
    line-height: 1.2 !important;
  }
  .market-cart-price span {
    display: block !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    margin-top: 1px !important;
  }

  /* ── Quantity controls row ── */
  .market-cart-controls {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 6px !important;
    flex-wrap: nowrap !important;
  }
  .market-cart-controls > label {
    display: none !important;
  }
  .cart-qty-btn {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    border-radius: 9px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .cart-qty-input,
  .market-cart-controls input[type="number"] {
    width: 44px !important;
    height: 32px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    border-radius: 9px !important;
    text-align: center !important;
    padding: 0 !important;
    border: 1.5px solid #e5e7eb !important;
    background: #f8fafc !important;
    flex: 0 0 44px !important;
    min-width: 0 !important;
  }
  .market-remove {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-left: auto !important;
    padding: 7px 9px !important;
    font-size: 11px !important;
    border-radius: 9px !important;
    background: #fff1f2 !important;
    color: #e11d48 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .market-remove i {
    font-size: 11px !important;
  }

  /* ── Order summary card ── */
  .market-order-summary {
    position: static !important;
    top: unset !important;
    border-radius: 20px !important;
    padding: 16px !important;
  }
  .summary-badge {
    font-size: 11px !important;
    padding: 6px 10px !important;
    margin-bottom: 12px !important;
  }
  .market-order-summary h3 {
    font-size: 17px !important;
    margin-bottom: 12px !important;
  }
  .summary-line,
  .summary-total {
    margin: 10px 0 !important;
    font-size: 13px !important;
  }
  .summary-total strong {
    font-size: 17px !important;
  }
  .summary-note {
    font-size: 11px !important;
    line-height: 1.4 !important;
    margin-top: 10px !important;
  }
  /* hide checkout button in sidebar — sticky bar is primary CTA on mobile */
  .market-order-summary .market-btn--full {
    display: none !important;
  }

  /* ── Empty state ── */
  .market-empty-state {
    padding: 36px 20px !important;
    border-radius: 20px !important;
  }
  .market-empty-icon {
    width: 64px !important;
    height: 64px !important;
    font-size: 26px !important;
    border-radius: 20px !important;
    margin-bottom: 16px !important;
  }
  .market-empty-state h3 {
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }
  .market-empty-state p {
    font-size: 13px !important;
    margin-bottom: 18px !important;
  }

  /* ── No horizontal overflow ── */
  .shop-cart.spad {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }
  .shop-cart .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ── Bottom padding: content clears sticky bar + bottom nav ──
     sticky bar ≈ 68px, bottom nav ≈ 58px, safe area on top */
  body.market-body #cart-root {
    padding-bottom: calc(68px + 58px + env(safe-area-inset-bottom, 0px) + 8px) !important;
  }

  /* ── Sticky checkout bar ── */
  #mb-cart-checkout-bar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    /* sit above bottom nav (58px) */
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1100 !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.10) !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  #mb-cart-checkout-bar .mb-bar-total {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  #mb-cart-checkout-bar .mb-bar-total-label {
    display: block !important;
    font-size: 11px !important;
    color: #6b7280 !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
  }
  #mb-cart-checkout-bar .mb-bar-total-amount {
    display: block !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    color: #111827 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #mb-cart-checkout-bar .mb-bar-btn {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    height: 46px !important;
    padding: 0 20px !important;
    background: linear-gradient(135deg, #ffd400, #fb923c) !important;
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 14px rgba(251, 146, 60, 0.35) !important;
    transition: opacity 0.15s ease !important;
  }
  #mb-cart-checkout-bar .mb-bar-btn:active {
    opacity: 0.85 !important;
  }
  /* hide the bar on empty cart */
  #mb-cart-checkout-bar.mb-bar--hidden {
    display: none !important;
  }
}

/* ── 480px: small phones ── */
@media (max-width: 480px) {
  .market-cart-img {
    width: 88px !important;
    height: 88px !important;
    flex: 0 0 88px !important;
    min-width: 88px !important;
  }
  .market-cart-title-row h4 {
    font-size: 12px !important;
  }
  .market-cart-price strong {
    font-size: 14px !important;
  }
  .market-cart-card {
    padding: 10px !important;
    gap: 10px !important;
  }
  .market-cart-controls {
    gap: 5px !important;
  }
  .cart-qty-btn {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
  }
  .cart-qty-input,
  .market-cart-controls input[type="number"] {
    width: 40px !important;
    height: 30px !important;
    flex: 0 0 40px !important;
    font-size: 13px !important;
  }
  .market-remove {
    padding: 6px 8px !important;
    font-size: 10px !important;
  }
  #mb-cart-checkout-bar .mb-bar-total-amount {
    font-size: 15px !important;
  }
  #mb-cart-checkout-bar .mb-bar-btn {
    height: 42px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
  }
}

/* ── 390px: iPhone-class ── */
@media (max-width: 390px) {
  .market-cart-img {
    width: 80px !important;
    height: 80px !important;
    flex: 0 0 80px !important;
    min-width: 80px !important;
  }
  .market-cart-card {
    padding: 10px 8px !important;
    gap: 8px !important;
  }
  .market-cart-list {
    padding: 12px 10px 6px !important;
  }
  #mb-cart-checkout-bar {
    padding: 8px 12px !important;
  }
  #mb-cart-checkout-bar .mb-bar-total-amount {
    font-size: 14px !important;
  }
  #mb-cart-checkout-bar .mb-bar-btn {
    height: 40px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════
   CHECKOUT PAGE — PREMIUM MOBILE FORM
   Uzum/Yandex Market level polish
   ═══════════════════════════════════════════════════ */

/* ── Global mobile body guard — prevent any horizontal overflow ── */
@media (max-width: 768px) {
  html, body.market-body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

@media (max-width: 768px) {

  /* ── Fix Bootstrap container on checkout ── */
  .checkout.spad {
    padding-top: 28px !important;
    padding-bottom: 80px !important; /* space for bottom nav */
    overflow-x: hidden !important;
  }
  .checkout.spad > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* ── Fix Bootstrap outer row (col-lg-8 + col-lg-4) ──
     Bootstrap .row has margin: 0 -15px — neutralise it */
  .checkout.spad > .container > .row {
    display: flex !important;
    flex-direction: column !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  .checkout.spad > .container > .row > .col-lg-8,
  .checkout.spad > .container > .row > .col-lg-4 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* ── Cards ── */
  body.market-body .checkout__form--custom,
  body.market-body .checkout__order--custom {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 18px !important;
    border-radius: 20px !important;
    margin-bottom: 16px !important;
    /* do NOT use overflow:hidden — it clips inner content on iOS */
    overflow: visible !important;
  }
  body.market-body .checkout__form--custom h5,
  body.market-body .checkout__order--custom h5 {
    font-size: 20px !important;
    font-weight: 950 !important;
    margin-bottom: 18px !important;
    letter-spacing: -0.3px !important;
  }

  /* ── Stack Bootstrap inner two-column row (Ism + Telefon) ──
     Bootstrap .row inside form also has -15px margins — neutralise */
  .checkout__form--custom .row {
    display: flex !important;
    flex-direction: column !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  .checkout__form--custom .row > .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    margin-bottom: 16px !important;
  }
  .checkout__form--custom .row > .col-md-6:last-child {
    margin-bottom: 0 !important;
  }

  /* ── Field group wrapper ── */
  .checkout-field-group {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .checkout-field-group .checkout-label {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }

  /* ── Labels ── */
  body.market-body .checkout-label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
    width: 100% !important;
  }
  body.market-body .checkout-label span {
    color: #ef4444 !important;
    margin-left: 2px !important;
  }

  /* ── All text inputs (explicit selectors beat Bootstrap) ── */
  body.market-body .checkout__form--custom input[type="text"],
  body.market-body .checkout__form--custom input[type="tel"],
  body.market-body .checkout__form--custom input[type="email"],
  body.market-body .checkout__form--custom input[type="search"],
  body.market-body .checkout__form--custom input[type="number"],
  body.market-body .checkout__form--custom input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="submit"]) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 48px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #111827 !important;
    background: #f8fafc !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 12px !important;
    outline: none !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  body.market-body .checkout__form--custom input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="submit"]):focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
    background: #fff !important;
  }
  body.market-body .checkout__form--custom input::placeholder {
    color: #9ca3af !important;
    font-weight: 400 !important;
    opacity: 1 !important;
  }

  /* ── Textarea ── */
  body.market-body .checkout__form--custom textarea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100px !important;
    padding: 13px 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #111827 !important;
    background: #f8fafc !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 12px !important;
    outline: none !important;
    resize: vertical !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  body.market-body .checkout__form--custom textarea:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
    background: #fff !important;
  }
  body.market-body .checkout__form--custom textarea::placeholder {
    color: #9ca3af !important;
    font-weight: 400 !important;
    opacity: 1 !important;
  }

  /* ── Payment type section ── */
  .checkout-payment {
    margin-top: 18px !important;
    padding: 14px !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    border: 1.5px solid #eef2f7 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .checkout-payment h6 {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #334155 !important;
    margin: 0 0 10px !important;
  }
  .checkout-radio-group {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }
  .checkout-radio {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 11px 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    border: 1.5px solid #e5e7eb !important;
    background: #fff !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s, background 0.15s !important;
  }
  .checkout-radio input[type="radio"] {
    /* reset all global input rules for radio */
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 50% !important;
    -webkit-appearance: radio !important;
    appearance: radio !important;
  }
  .checkout-radio:has(input:checked) {
    border-color: #7c3aed !important;
    background: #f3e8ff !important;
    color: #6d28d9 !important;
  }

  /* ── Upload (screenshot) section ── */
  .checkout-upload {
    margin-top: 18px !important;
    padding: 14px !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    border: 1.5px solid #eef2f7 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .checkout-upload .checkout-label {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }
  .checkout-upload input[type="file"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    font-size: 13px !important;
    padding: 10px 12px !important;
    border: 1.5px dashed #c4b5fd !important;
    border-radius: 10px !important;
    background: #faf5ff !important;
    color: #374151 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
  }
  .checkout-help {
    font-size: 12px !important;
    color: #6b7280 !important;
    margin: 6px 0 0 !important;
    line-height: 1.5 !important;
  }

  /* ── Promo code section ──
     KEY FIX: stacked layout on all mobile phones
     Input full-width on top, button full-width below
     This prevents the "tiny input + overlapping button" bug */
  .checkout-promo {
    margin-top: 18px !important;
    padding: 14px !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    border: 1.5px solid #eef2f7 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .checkout-promo > .checkout-label {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }
  .checkout-promo-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* promo input — full width row */
  .checkout-promo-row input#promoCode,
  .checkout-promo-row input[type="text"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 48px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #111827 !important;
    background: #fff !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 12px !important;
    outline: none !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  .checkout-promo-row input#promoCode:focus,
  .checkout-promo-row input[type="text"]:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.10) !important;
    background: #fff !important;
  }
  /* "Qo'llash" button — full width row below input */
  .checkout-promo-row .site-btn,
  .checkout-promo-row button {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 48px !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    line-height: 48px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
  }
  #promoMessage {
    margin-top: 8px !important;
    font-size: 13px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Form messages ── */
  .form-message {
    margin-top: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .checkout-msg {
    display: block !important;
    width: 100% !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
  }
  .checkout-msg--success {
    background: #f0fdf4 !important;
    color: #15803d !important;
    border: 1px solid #bbf7d0 !important;
  }
  .checkout-msg--error {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
  }

  /* ── Action buttons ── */
  .checkout-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .checkout-actions .site-btn,
  .checkout-actions a.site-btn {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 50px !important;
    padding: 0 !important;
    line-height: 50px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    border-radius: 14px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
  }

  /* ── Order summary panel ── */
  .checkout-summary-head {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #eef2f7 !important;
    margin-bottom: 4px !important;
  }
  .checkout-summary-list {
    margin-bottom: 4px !important;
  }
  .checkout-summary-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 13px !important;
    color: #374151 !important;
    line-height: 1.4 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .checkout-summary-row p {
    margin: 0 !important;
    font-size: 13px !important;
  }
  .checkout-summary-row strong {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .checkout-item-meta {
    display: block !important;
    font-size: 11px !important;
    color: #9ca3af !important;
    margin-top: 2px !important;
  }
  .checkout-total-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 13px !important;
    color: #374151 !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .checkout-total-row strong {
    font-weight: 800 !important;
    color: #111827 !important;
  }
  .checkout-grand-total {
    font-size: 16px !important;
    font-weight: 950 !important;
    color: #111827 !important;
    border-bottom: none !important;
    padding-top: 12px !important;
  }
  .checkout-grand-total strong {
    font-size: 18px !important;
    color: #6d28d9 !important;
  }
  .checkout-empty {
    text-align: center !important;
    color: #6b7280 !important;
    padding: 18px 0 !important;
    font-size: 14px !important;
  }
  .checkout-empty__link {
    color: #7c3aed !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }

  /* ── Bottom padding — content clears bottom nav (≈58px) ── */
  body.checkout-clean {
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── 480px: small phones ── */
@media (max-width: 480px) {
  .checkout.spad > .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body.market-body .checkout__form--custom,
  body.market-body .checkout__order--custom {
    padding: 16px !important;
    border-radius: 18px !important;
  }
  body.market-body .checkout__form--custom h5,
  body.market-body .checkout__order--custom h5 {
    font-size: 18px !important;
    margin-bottom: 16px !important;
  }
  body.market-body .checkout__form--custom input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="submit"]) {
    height: 46px !important;
  }
  .checkout-promo-row input#promoCode,
  .checkout-promo-row input[type="text"] {
    height: 46px !important;
  }
  .checkout-promo-row .site-btn,
  .checkout-promo-row button {
    height: 46px !important;
    line-height: 46px !important;
  }
  .checkout-actions .site-btn,
  .checkout-actions a.site-btn {
    height: 48px !important;
    line-height: 48px !important;
    font-size: 14px !important;
  }
  .checkout-grand-total strong {
    font-size: 16px !important;
  }
}

/* ── 390px: iPhone-class ── */
@media (max-width: 390px) {
  .checkout.spad > .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  body.market-body .checkout__form--custom,
  body.market-body .checkout__order--custom {
    padding: 14px !important;
    border-radius: 16px !important;
  }
  body.market-body .checkout__form--custom h5,
  body.market-body .checkout__order--custom h5 {
    font-size: 17px !important;
  }
  body.market-body .checkout__form--custom input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="submit"]) {
    height: 44px !important;
    font-size: 13px !important;
    padding: 0 12px !important;
  }
  body.market-body .checkout__form--custom textarea {
    font-size: 13px !important;
    padding: 11px 12px !important;
  }
  .checkout-promo-row input#promoCode,
  .checkout-promo-row input[type="text"] {
    height: 44px !important;
    font-size: 13px !important;
    padding: 0 12px !important;
  }
  .checkout-promo-row .site-btn,
  .checkout-promo-row button {
    height: 44px !important;
    line-height: 44px !important;
    font-size: 13px !important;
  }
  .checkout-radio {
    font-size: 12px !important;
    padding: 10px 6px !important;
  }
  .checkout-actions .site-btn,
  .checkout-actions a.site-btn {
    height: 46px !important;
    line-height: 46px !important;
    font-size: 14px !important;
  }
  .checkout-summary-row,
  .checkout-total-row {
    font-size: 12px !important;
  }
  .checkout-grand-total strong {
    font-size: 15px !important;
  }
}

/* ═══════════════════════════════════════════════════
   TRACK ORDER PAGE
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .track-card {
    padding: 16px !important;
    border-radius: 20px !important;
  }

  .track-form {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 14px !important;
    border-radius: 16px !important;
  }
  .track-form label {
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }
  .track-form input {
    height: 44px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
  }
  .track-form .site-btn {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
  }

  /* timeline — 2-col on tablet, 1-col on small */
  .track-timeline {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 14px 0 !important;
  }
  .track-step {
    padding: 12px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
  }
  .track-step span {
    width: 28px !important;
    height: 28px !important;
    margin-bottom: 6px !important;
    font-size: 13px !important;
  }
  .track-step strong {
    font-size: 11px !important;
    display: block;
    margin-top: 2px;
  }

  /* status row */
  .track-status {
    border-radius: 16px !important;
    padding: 14px !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .track-status span {
    font-size: 13px !important;
  }
  .track-badge {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  /* info grid */
  .track-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .track-field {
    padding: 12px !important;
    border-radius: 14px !important;
  }
  .track-field span {
    font-size: 10px !important;
  }
  .track-field strong {
    font-size: 14px !important;
  }

  /* items list */
  .track-items li {
    padding: 10px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .track-result h4 {
    font-size: 16px !important;
    margin: 14px 0 8px !important;
  }
}

@media (max-width: 480px) {
  .track-timeline {
    grid-template-columns: 1fr 1fr !important;
  }
  .track-grid {
    grid-template-columns: 1fr !important;
  }
  .track-field strong {
    font-size: 13px !important;
  }
}

/* ═══════════════════════════════════════════════════
   CONTACT PAGE
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* contact cards row — single column */
  .contact.spad .row {
    flex-direction: column !important;
  }
  .contact.spad .col-lg-4,
  .contact.spad .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .contact-card {
    padding: 18px !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
  }
  .contact-card__icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
  }
  .contact-card h5 {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }
  .contact-card a,
  .contact-card p {
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }

  .contact-map-box {
    border-radius: 16px !important;
    margin-top: 4px !important;
  }
  .contact-map-top {
    padding: 14px 16px !important;
  }
  .contact-map-top h5 {
    font-size: 14px !important;
  }
  .contact-map-frame {
    height: 260px !important;
  }
  .contact-map-link {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
}

@media (max-width: 480px) {
  .contact-map-frame {
    height: 220px !important;
  }
  .contact-card {
    padding: 14px !important;
  }
}

/* ═══════════════════════════════════════════════════
   PRODUCT DETAIL PAGE
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .product-detail-wrap {
    padding: 16px 0 24px !important;
  }

  /* back button */
  .pd-back-btn {
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
  }

  /* main image */
  .pd-image-box {
    border-radius: 16px !important;
  }
  .pd-image-box img {
    height: 280px !important;
  }

  /* thumbnails */
  .pd-thumbs {
    gap: 6px !important;
    margin-top: 8px !important;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .pd-thumbs::-webkit-scrollbar { display: none; }
  .pd-thumb {
    width: 60px !important;
    height: 60px !important;
    flex: 0 0 auto;
  }

  /* info box */
  .pd-info-box {
    padding: 14px !important;
    border-radius: 16px !important;
    margin-top: 12px;
  }

  /* product title */
  .pd-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
  }

  /* price */
  .pd-price {
    font-size: 24px !important;
  }
  .pd-old-price {
    font-size: 15px !important;
  }

  /* chips — horizontal scroll */
  .pd-option-list {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    gap: 8px !important;
  }
  .pd-option-list::-webkit-scrollbar { display: none; }
  .pd-chip {
    flex: 0 0 auto !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
    min-width: 44px !important;
  }

  /* meta grid — 2-col */
  .pd-meta-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  /* action buttons */
  .pd-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .pd-btn {
    width: 100% !important;
    padding: 13px 16px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    flex: 0 0 auto !important;
  }

  /* qty */
  .pd-qty-wrap {
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  .pd-qty-input {
    width: 80px !important;
    height: 42px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }

  /* about & review sections */
  .pd-section,
  .pd-reviews {
    padding: 14px !important;
    border-radius: 14px !important;
    margin-top: 12px !important;
  }
  .pd-section-title,
  .pd-reviews h3 {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }

  /* review form */
  .pd-review-form .row {
    flex-direction: column !important;
  }
  .pd-review-form .col-md-4,
  .pd-review-form .col-md-3,
  .pd-review-form .col-md-5 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
  }
  .pd-review-form input,
  .pd-review-form select {
    padding: 10px 12px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }
  .pd-btn.pd-btn-primary[type="submit"] {
    padding: 11px 16px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    width: auto !important;
  }

  /* related products heading */
  #relatedProducts .pd-section-title {
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .pd-image-box img {
    height: 240px !important;
  }
  .pd-title {
    font-size: 18px !important;
  }
  .pd-price {
    font-size: 20px !important;
  }
  .pd-meta-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .pd-info-card span {
    font-size: 10px !important;
  }
  .pd-info-card strong {
    font-size: 13px !important;
  }
}

/* ═══════════════════════════════════════════════════
   FOOTER — COMPACT MOBILE
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .market-footer {
    padding: 28px 0 16px !important;
    margin-top: 24px !important;
  }
  .market-footer .row {
    gap: 16px 0;
  }
  .market-footer .col-lg-5 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .market-footer .market-logo {
    font-size: 16px !important;
  }
  .market-footer .market-logo__mark {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
  }
  .market-footer p {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  .market-footer h6 {
    font-size: 13px !important;
    margin-bottom: 10px !important;
  }
  .market-footer a {
    font-size: 12px !important;
  }
  .market-footer__bottom {
    font-size: 11px !important;
    text-align: center !important;
    padding-top: 12px !important;
    margin-top: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════
   SECTION SPACING — COMPACT MOBILE
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  body.market-body .spad {
    padding-top: 20px !important;
    padding-bottom: 28px !important;
  }
  .shop-cart.spad,
  .checkout.spad,
  .track-section.spad,
  .contact.spad {
    padding-top: 16px !important;
    padding-bottom: 24px !important;
  }

  /* container full padding */
  .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════
   PRELOADER
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  #preloder {
    z-index: 9999;
  }
}

/* ═══════════════════════════════════════════════════
   TOUCH / TAP IMPROVEMENTS
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* minimum touch target: 44px */
  .market-action,
  .market-btn,
  .site-btn,
  .pd-btn,
  .link-btn,
  .filter-btn,
  .cart-qty-btn,
  .market-remove,
  .market-mini-link {
    min-height: 38px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* no text selection on buttons */
  button, a {
    -webkit-user-select: none;
    user-select: none;
  }

  /* form input font size >= 16px to prevent iOS zoom */
  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="tel"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important;
  }
  /* but allow us to override specific small cases without zoom trigger */
  .market-search input {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════
   PREVENT HORIZONTAL OVERFLOW
   ═══════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .market-hero,
  .market-hero-card,
  .market-strip,
  .market-strip__inner,
  .market-section-title,
  .market-footer .row,
  .checkout .row,
  .market-cart-layout {
    max-width: 100% !important;
    overflow-x: hidden;
  }
}

/* ═══════════════════════════════════════════════════
   FORM MESSAGE STYLING
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .form-message {
    margin-top: 10px !important;
    font-size: 13px !important;
  }
  .checkout-msg {
    font-size: 13px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    display: block !important;
  }
}

/* ═══════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .empty-state {
    padding: 32px 16px !important;
    border-radius: 16px !important;
    text-align: center;
  }
  .empty-state img {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 12px !important;
  }
  .empty-state h5 {
    font-size: 16px !important;
  }
  .empty-state p {
    font-size: 13px !important;
  }
}

/* ═══════════════════════════════════════════════════
   BLOG (preserved — no regressions)
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* just ensure blog doesn't overflow */
  .blog-section,
  .blog__item {
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════
   SUCCESS PAGE (if exists)
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .success-section {
    padding: 24px 14px !important;
    min-height: auto !important;
    align-items: flex-start !important;
  }
  .success-card {
    padding: 28px 18px !important;
    border-radius: 22px !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .success-mark {
    width: 56px !important;
    height: 56px !important;
    font-size: 22px !important;
    margin-bottom: 18px !important;
  }
  .success-card h1 {
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }
  .success-card > p {
    font-size: 13px !important;
    margin-bottom: 20px !important;
  }
  .success-details {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
  }
  /* Order ID spans full width */
  .success-details .success-detail:first-child {
    grid-column: 1 / -1 !important;
  }
  .success-detail {
    padding: 11px 10px !important;
    border-radius: 12px !important;
  }
  .success-detail span {
    font-size: 10px !important;
  }
  .success-detail strong {
    font-size: 13px !important;
  }
  .success-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .success-actions .site-btn {
    width: 100% !important;
    flex: none !important;
    height: 48px !important;
    line-height: 1 !important;
    font-size: 14px !important;
    border-radius: 14px !important;
    justify-content: center !important;
  }
}

@media (max-width: 390px) {
  .success-card {
    padding: 22px 14px !important;
    border-radius: 18px !important;
  }
  .success-card h1 {
    font-size: 18px !important;
  }
  .success-mark {
    width: 50px !important;
    height: 50px !important;
    font-size: 20px !important;
  }
}

/* ═══════════════════════════════════════════════════
   BOTTOM NAVIGATION BAR — MOBILE ONLY
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Hide the desktop header nav row ── */
  .market-nav {
    display: none !important;
  }

  /* ── Body padding so content never hides behind fixed bottom nav ── */
  body.market-body {
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── Bottom nav bar ── */
  #mb-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1200 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-around !important;
    height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  /* ── Each tab item ── */
  .mb-nav-item {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 6px 2px !important;
    text-decoration: none !important;
    color: #94a3b8 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    transition: color 0.18s ease !important;
    position: relative !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
  }

  .mb-nav-item:active {
    opacity: 0.75 !important;
  }

  /* ── Icon container ── */
  .mb-nav-icon {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 28px !important;
  }

  .mb-nav-icon .fa {
    font-size: 19px !important;
    line-height: 1 !important;
    transition: transform 0.18s ease, color 0.18s ease !important;
  }

  /* ── Label ── */
  .mb-nav-label {
    max-width: 56px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
  }

  /* ── Active tab ── */
  .mb-nav-item--active {
    color: #6d28d9 !important;
  }

  .mb-nav-item--active .mb-nav-icon .fa {
    transform: translateY(-1px) scale(1.1) !important;
    color: #6d28d9 !important;
  }

  /* ── Active indicator dot ── */
  .mb-nav-item--active::after {
    content: "" !important;
    position: absolute !important;
    top: 3px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 20px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: #6d28d9 !important;
  }

  /* ── Cart badge ── */
  .mb-nav-badge {
    position: absolute !important;
    top: -3px !important;
    right: -2px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: #ffd400 !important;
    color: #0f172a !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    font-style: normal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-shadow: 0 2px 6px rgba(255, 212, 0, 0.35) !important;
  }

  /* ═══════════════════════════════════════════════════
     "KO'PROQ" DRAWER
     ═══════════════════════════════════════════════════ */

  /* ── Overlay behind drawer ── */
  #mb-more-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1198 !important;
    background: rgba(15, 23, 42, 0.32) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease !important;
  }
  #mb-more-overlay.mb-overlay--visible {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* ── Drawer panel (bottom sheet) ── */
  #mb-more-drawer {
    position: fixed !important;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1199 !important;
    transform: translateY(110%) !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  #mb-more-drawer.mb-more-drawer--open {
    transform: translateY(0) !important;
  }

  .mb-more-inner {
    background: rgba(255, 255, 255, 0.99) !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.14) !important;
    padding: 6px 0 16px !important;
    overflow: hidden !important;
  }

  /* ── Drag handle ── */
  .mb-more-handle {
    width: 40px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: #e2e8f0 !important;
    margin: 0 auto 14px !important;
  }

  /* ── Menu list ── */
  .mb-more-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .mb-more-link {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 13px 16px !important;
    border-radius: 16px !important;
    background: rgba(248, 250, 252, 0.9) !important;
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mb-more-link:active {
    transform: scale(0.98) !important;
    background: rgba(243, 232, 255, 0.7) !important;
  }

  .mb-more-link--active {
    color: #6d28d9 !important;
    background: rgba(237, 233, 254, 0.8) !important;
    border-color: rgba(109, 40, 217, 0.2) !important;
  }

  .mb-more-icon {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: rgba(109, 40, 217, 0.08) !important;
    color: #6d28d9 !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
  }

  .mb-more-link--active .mb-more-icon {
    background: linear-gradient(135deg, #6d28d9, #7c3aed) !important;
    color: #fff !important;
  }
}

/* ── Tighten on very small phones ── */
@media (max-width: 390px) {
  #mb-bottom-nav {
    height: calc(54px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .mb-nav-item {
    font-size: 9px !important;
  }
  .mb-nav-icon .fa {
    font-size: 17px !important;
  }
  body.market-body {
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  }
}