/* Mobile storefront refinements — loaded after the page-specific styles. */
@media (max-width: 680px) {
  :root {
    --market-gutter: 12px;
  }

  .mbackmart {
    padding-bottom: calc(66px + env(safe-area-inset-bottom));
  }

  .mbackmart .mobile-shop-nav {
    position: fixed;
    z-index: 1200;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 62px;
    padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
    border-top: 1px solid #e4e8ee;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -5px 18px rgba(7, 26, 49, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .mbackmart .mobile-shop-nav > a {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 48px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 8px;
    color: #6b7685;
    font-size: 10px;
    line-height: 1.1;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mbackmart .mobile-shop-nav > a > i,
  .mbackmart .mobile-shop-nav__icon > i {
    font-size: 19px;
  }

  .mbackmart .mobile-shop-nav > a.is-active {
    color: #d49322;
  }

  .mbackmart .mobile-shop-nav > a:active {
    background: #fff8e8;
    transform: scale(0.96);
  }

  .mbackmart .mobile-shop-nav__icon {
    position: relative;
    display: inline-flex;
  }

  .mbackmart .mobile-shop-nav__icon em {
    position: absolute;
    top: -7px;
    right: -11px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #e53935;
    color: #fff;
    font: 600 9px/12px 'Kanit', sans-serif;
    text-align: center;
    box-sizing: border-box;
  }

  .mbackmart .top {
    position: sticky;
  }

  .mbackmart .top .wrap.head {
    grid-template-columns: minmax(96px, 128px) minmax(0, 1fr);
    gap: 7px 10px;
    padding: 8px 10px 10px;
  }

  .mbackmart .logo {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
    min-width: 0;
  }

  .mbackmart .logo img {
    width: 100%;
    height: auto;
    max-height: 42px;
  }

  .mbackmart .actions {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    gap: 2px;
    justify-content: flex-end;
  }

  .mbackmart .actions .act,
  .mbackmart .market-lang-btn,
  .mbackmart .market-nav-user-btn {
    width: 36px;
    min-width: 36px;
    height: 40px;
    min-height: 40px;
    padding: 2px;
    border-radius: 7px;
  }

  .mbackmart .act i,
  .mbackmart .market-nav-avatar {
    width: 32px;
    font-size: 17px;
  }

  .mbackmart .market-nav-user-btn {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
  }

  .mbackmart .market-nav-user-btn .market-nav-menu-icon {
    color: #fff;
  }

  .mbackmart .market-nav-dropdown {
    position: fixed;
    z-index: 1500;
    top: 58px;
    right: 10px;
    width: min(290px, calc(100vw - 20px));
    min-width: 0;
    max-width: none;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(4, 14, 28, 0.24);
    transform: translateY(-8px) scale(0.98);
    transform-origin: top right;
  }

  .mbackmart .market-nav-dropdown.is-open {
    transform: translateY(0) scale(1);
  }

  .mbackmart .market-nav-mobile-profile {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 6px;
    padding: 11px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0f2744, #173e68);
    color: #fff;
  }

  .mbackmart .market-nav-mobile-avatar {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.68);
    border-radius: 50%;
    background: linear-gradient(135deg, #ffdc78, #d79a35) center/cover;
    color: #0f2744;
    font-size: 16px;
    font-weight: 600;
  }

  .mbackmart .market-nav-mobile-profile > div {
    min-width: 0;
  }

  .mbackmart .market-nav-mobile-profile strong,
  .mbackmart .market-nav-mobile-profile small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mbackmart .market-nav-mobile-profile strong {
    font-size: 14px;
    font-weight: 500;
  }

  .mbackmart .market-nav-mobile-profile small {
    margin-top: 2px;
    color: #cbd9e8;
    font-size: 10px;
  }

  .mbackmart .market-nav-dropdown a,
  .mbackmart .market-nav-logout {
    min-height: 44px;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 9px;
    color: #26384c;
    font-size: 13px;
    box-sizing: border-box;
  }

  .mbackmart .market-nav-dropdown a:hover,
  .mbackmart .market-nav-dropdown a:active {
    background: #f3f6f9;
    color: #0f2744;
  }

  .mbackmart .market-nav-dropdown i {
    width: 22px;
    color: #d49322;
    font-size: 15px;
  }

  .mbackmart .market-nav-logout {
    margin-top: 5px;
    border-top: 1px solid #edf0f4;
    border-radius: 0 0 9px 9px;
    color: #dc3f3f;
  }

  .mbackmart .market-nav-logout i {
    color: #dc3f3f;
  }

  .mbackmart .actions .badge {
    top: 0;
    right: -1px;
  }

  .mbackmart .search {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 42px;
    border-radius: 7px;
  }

  .mbackmart .search input {
    min-width: 0;
    padding: 0 12px;
    font-size: 16px; /* prevents iOS zoom on focus */
  }

  .mbackmart .search button {
    width: 50px;
  }

  .mbackmart .market-lang-dropdown,
  .mbackmart .market-nav-dropdown {
    position: fixed;
    top: 62px;
    right: 10px;
    max-width: calc(100vw - 20px);
  }

  .mbackmart .perkbar {
    display: none;
  }

  .mbackmart .mb-filters,
  .mbackmart .mb-shop-side.mb-filters {
    inset: 0 auto 0 0;
    z-index: 1400;
    width: min(320px, calc(100vw - 44px));
    max-width: none;
    height: 100dvh;
    padding: 0 16px calc(24px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0 16px 16px 0;
    box-shadow: 14px 0 36px rgba(4, 14, 28, 0.22);
    box-sizing: border-box;
    overscroll-behavior: contain;
  }

  .mbackmart .mb-backdrop {
    z-index: 1300;
  }

  .mbackmart .mb-filter-mobile-head {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    margin: 0 -16px 14px;
    padding: max(8px, env(safe-area-inset-top)) 16px 8px;
    border-bottom: 1px solid #e8edf3;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
  }

  .mbackmart .mb-filter-mobile-head strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f2744;
    font-size: 16px;
    font-weight: 500;
  }

  .mbackmart .mb-filter-mobile-head strong i {
    color: #d49322;
    font-size: 14px;
  }

  .mbackmart .mb-filter-mobile-head button {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #f1f4f7;
    color: #334155;
    font-size: 18px;
  }

  .mbackmart .mb-shop-side .mb-filter-block + .mb-filter-block {
    margin-top: 14px;
    padding-top: 14px;
  }

  .mbackmart .mb-shop-side .mb-filter-title {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
  }

  .mbackmart .mb-shop-side .mb-cat-list,
  .mbackmart .mb-shop-side .mb-brand-list {
    gap: 3px;
  }

  .mbackmart .mb-shop-side .mb-cat-list button,
  .mbackmart .mb-shop-side .mb-cat-list a,
  .mbackmart .mb-shop-side .mb-brand-list label,
  .mbackmart .mb-shop-side .mb-rating-filter button {
    width: 100%;
    min-height: 42px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    box-sizing: border-box;
  }

  .mbackmart .mb-shop-side .mb-brand-list label {
    gap: 10px;
  }

  .mbackmart .mb-shop-side .mb-brand-list input {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0;
  }

  .mbackmart .mb-shop-side .mb-price-label {
    margin-bottom: 3px;
  }

  .mbackmart .mb-shop-side .mb-price-range input[type='range'] {
    display: block;
    height: 34px;
    margin: 0;
  }

  .mbackmart .mb-shop-side .mb-rating-filter {
    gap: 3px;
  }

  .mbackmart .mb-shop-side .mb-rating-filter .stars {
    flex: 0 0 auto;
    font-size: 11px;
    letter-spacing: 0;
  }

  .mbackmart--home .hero-grid,
  .mbackmart--home .hero {
    height: 320px;
    min-height: 320px;
    max-height: 320px;
  }

  .mbackmart--home .copy {
    top: 18px;
    left: 16px;
    right: 16px;
    max-width: 355px;
  }

  .mbackmart--home .copy h1 {
    font-size: clamp(2.15rem, 10vw, 2.65rem);
    line-height: 1.06;
  }

  .mbackmart--home .copy p {
    display: inline-flex;
    margin-top: 9px;
    padding: 6px 10px;
    font-size: 13px;
  }

  .mbackmart--home .mini {
    margin-top: 10px;
    gap: 10px;
  }

  .mbackmart--home .mini div {
    gap: 5px;
    font-size: 12px;
  }

  .mbackmart--home .mini div:nth-child(3) {
    display: none;
  }

  .mbackmart--home .mini i {
    font-size: 20px;
  }

  .mbackmart--home .hero-btn {
    margin-top: 20px;
    padding: 7px 13px;
    font-size: 13px;
  }

  .mbackmart--home .visual {
    left: auto;
    right: -28px;
    bottom: 0;
    width: 205px;
    transform: none;
  }

  .mbackmart--home .hero-showcase-img {
    max-height: 165px;
  }

  .mbackmart--home .dots {
    display: none;
  }

  .mbackmart--home .quick {
    display: flex;
    gap: 4px;
    margin: 8px -2px 10px;
    padding: 2px 2px 5px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .mbackmart--home .quick::-webkit-scrollbar {
    display: none;
  }

  .mbackmart--home .quick a {
    flex: 0 0 68px;
    height: 66px;
    gap: 5px;
    padding: 5px 3px;
    border: 0;
    box-shadow: none;
    font-size: 9px;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
    scroll-snap-align: start;
  }

  .mbackmart--home .quick i {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  .mbackmart--home .consignment-cta__copy {
    min-width: 0;
  }

  .mbackmart--home .consignment-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 70px;
    margin: 8px 0 10px;
    padding: 12px 14px;
    border-radius: 9px;
  }

  .mbackmart--home .consignment-cta__eyebrow,
  .mbackmart--home .consignment-cta p {
    display: none;
  }

  .mbackmart--home .consignment-cta h2 {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
  }

  .mbackmart--home .consignment-cta__button {
    width: auto;
    min-height: 36px;
    padding: 0 12px;
    font-size: 0;
    box-sizing: border-box;
  }

  .mbackmart--home .consignment-cta__button::before {
    content: 'ฝากขาย';
    font-size: 11px;
  }

  .mbackmart--home .consignment-cta__button i {
    font-size: 10px;
  }

  .mbackmart--home .banners {
    display: flex;
    gap: 8px;
    margin: 8px -12px 12px;
    padding: 0 12px 5px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .mbackmart--home .banners::-webkit-scrollbar {
    display: none;
  }

  .mbackmart--home .banner,
  .mbackmart--home .banner--shipping {
    flex: 0 0 78vw;
    min-height: 108px;
    padding: 14px 16px;
    scroll-snap-align: center;
  }

  .mbackmart--home .banner h3 {
    font-size: 17px;
  }

  .mbackmart--home .banner h3 strong {
    font-size: 25px;
  }

  .mbackmart--home .banner .btn {
    margin-top: 7px;
    padding: 5px 9px;
    font-size: 9px;
  }

  .mbackmart--home .banner-ship-copy .ship-main {
    font-size: 27px;
  }

  .mbackmart--home .banner-ship-copy .ship-sub {
    font-size: 14px;
  }

  .mbackmart--home .section {
    margin: 12px 0;
  }

  .mbackmart--home .headrow {
    gap: 8px;
  }

  .mbackmart--home .title {
    min-width: 0;
    font-size: 17px;
  }

  .mbackmart--home .timer {
    display: inline-flex;
  }

  .mbackmart--home .home-all-grid,
  .mbackmart--home .products,
  .mbackmart--home .six:not(.home-plara-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .mbackmart--home .six.home-plara-grid {
    grid-auto-columns: minmax(152px, 70vw);
  }

  .mbackmart--home .home-product-actions {
    flex-direction: row;
  }

  .mbackmart--home .home-product-btn {
    min-height: 38px;
  }

  .mbackmart--home .home-product-btn--cart {
    flex: 0 0 38px;
    width: 38px;
  }

  .mbackmart--home .home-product-btn--buy {
    flex: 1 1 auto;
    width: auto;
    padding-inline: 7px;
  }

  /* Compact mobile footer: keep only the information people need on the go. */
  .mbackmart .service {
    margin-top: 16px;
  }

  .mbackmart .service .wrap {
    min-height: 64px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding-block: 10px;
  }

  .mbackmart .service .svc:nth-child(2),
  .mbackmart .service .svc:nth-child(3) {
    display: none;
  }

  .mbackmart .svc {
    justify-content: center;
    gap: 8px;
    padding: 4px 8px;
  }

  .mbackmart .svc:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.16);
  }

  .mbackmart .svc i {
    font-size: 21px;
  }

  .mbackmart .svc b {
    font-size: 12px;
    line-height: 1.3;
  }

  .mbackmart .svc span {
    display: none;
  }

  .mbackmart footer {
    padding-top: 20px;
  }

  .mbackmart .foot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
  }

  .mbackmart .foot > div:first-child {
    grid-column: 1 / -1;
  }

  .mbackmart .foot > div:first-child img {
    width: 145px;
    margin-bottom: 0;
  }

  .mbackmart .foot > div:first-child p,
  .mbackmart .foot > div:nth-child(2),
  .mbackmart .foot > div:nth-child(3) li:nth-child(-n + 2),
  .mbackmart .foot > div:nth-child(4) li:last-child {
    display: none;
  }

  .mbackmart .foot h4 {
    margin-bottom: 7px;
    font-size: 13px;
  }

  .mbackmart .foot ul {
    gap: 3px;
  }

  .mbackmart .foot a,
  .mbackmart .foot li {
    font-size: 12px;
    line-height: 1.55;
  }

  .mbackmart .bottom {
    margin-top: 16px;
    padding: 12px;
    font-size: 10px;
  }

  /* Product listing: two useful cards per row instead of one oversized card. */
  .mbackmart .mb-shop-main {
    width: 100%;
    min-width: 0;
    max-width: 100vw;
    padding-inline: 10px;
    overflow: hidden;
  }

  .mbackmart .mb-shop-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .mbackmart .mb-shop-head h1 {
    font-size: 20px;
  }

  .mbackmart .mb-shop-sort {
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 11px;
  }

  .mbackmart .mb-shop-sort select,
  .mbackmart .ec-sort {
    max-width: 132px;
    min-height: 40px;
    font-size: 12px;
  }

  .mbackmart .mb-list-toolbar {
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  /* Cart page: a deliberate mobile card layout instead of the compressed table. */
  .mbackmart .mb-shop-main--list .mb-mobile-filter,
  .mbackmart .mb-shop-main--list .mb-backdrop {
    display: none;
  }

  .mbackmart .mb-list-page-head {
    margin: 12px 0 14px;
  }

  .mbackmart .mb-list-page-head h1 {
    font-size: 20px;
  }

  .mbackmart .mb-list-page-head p {
    font-size: 12px;
    line-height: 1.45;
  }

  .mbackmart .mb-list-tabs {
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .mbackmart .mb-list-tabs::-webkit-scrollbar {
    display: none;
  }

  .mbackmart .mb-list-tab {
    flex: 0 0 auto;
    gap: 5px;
    padding: 8px 11px;
    font-size: 11px;
    white-space: nowrap;
  }

  .mbackmart .mb-cart-layout {
    gap: 12px;
  }

  .mbackmart .mb-cart-panel {
    border-radius: 9px;
  }

  .mbackmart .mb-cart-panel-head {
    padding: 11px 12px;
    font-size: 13px;
  }

  .mbackmart .mb-cart-row {
    grid-template-columns: 18px 72px minmax(0, 1fr) 34px;
    grid-template-rows: auto auto auto;
    gap: 5px 10px;
    align-items: center;
    padding: 12px 10px;
  }

  .mbackmart .mb-cart-row input[type='checkbox'] {
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: start;
    width: 17px;
    height: 17px;
    margin-top: 2px;
  }

  .mbackmart .mb-cart-thumb {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: start;
    width: 72px;
    height: 72px;
  }

  .mbackmart .mb-cart-info {
    grid-column: 3 / 5;
    grid-row: 1;
    min-width: 0;
  }

  .mbackmart .mb-cart-info a {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .mbackmart .mb-cart-unit {
    grid-column: 3 / 5;
    grid-row: 2;
    font-size: 14px;
  }

  .mbackmart .mb-cart-qty {
    grid-column: 3;
    grid-row: 3;
    justify-self: start;
    width: max-content;
  }

  .mbackmart .mb-cart-qty button {
    width: 30px;
    height: 30px;
  }

  .mbackmart .mb-cart-qty input {
    width: 36px;
    height: 30px;
    padding: 0;
    font-size: 12px;
  }

  .mbackmart .mb-cart-remove {
    grid-column: 4;
    grid-row: 3;
    justify-self: end;
    width: 32px;
    height: 32px;
  }

  .mbackmart .mb-order-summary {
    padding: 14px;
    border-radius: 9px;
  }

  .mbackmart .mb-order-summary h2 {
    margin-bottom: 9px;
    font-size: 15px;
  }

  .mbackmart .mb-summary-line {
    padding: 6px 0;
    font-size: 12px;
  }

  .mbackmart .mb-summary-total {
    padding: 11px 0 12px;
    font-size: 14px;
  }

  .mbackmart .mb-checkout-btn {
    min-height: 44px;
  }

  .mbackmart .mb-list-toolbar::-webkit-scrollbar {
    display: none;
  }

  .mbackmart .mb-type-tabs {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .mbackmart .mb-grid,
  .mbackmart .mb-list-grid {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .mbackmart .mb-card,
  .mbackmart .mb-card-link,
  .mbackmart .mb-card-body {
    min-width: 0;
    max-width: 100%;
  }

  .mbackmart .mb-card {
    overflow: hidden;
  }

  .mbackmart .mb-card-link {
    width: 100%;
    overflow: hidden;
  }

  .mbackmart .mb-card-body {
    padding: 10px;
    overflow: hidden;
  }

  .mbackmart .mb-card-title {
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .mbackmart .mb-card-price-row {
    min-width: 0;
    max-width: 100%;
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
  }

  .mbackmart .mb-card-price {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mbackmart .mb-card-cart {
    width: auto;
    max-width: calc(100% - 16px);
    min-width: 0;
    min-height: 38px;
    margin: 0 8px 8px;
    padding: 7px 6px;
    font-size: 12px;
    line-height: 1.25;
    overflow-wrap: anywhere;
    box-sizing: border-box;
  }

  .mbackmart .mb-card-cart--ghost {
    margin-top: -3px;
  }

  .auth-box,
  .logout-confirm-box {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
  }
}

@media (max-width: 374px) {
  .mbackmart .top .wrap.head {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .mbackmart .actions .act,
  .mbackmart .market-lang-btn,
  .mbackmart .market-nav-user-btn {
    width: 33px;
    min-width: 33px;
  }

  .mbackmart--home .hero {
    min-height: 450px;
  }

  .mbackmart--home .copy h1 {
    font-size: 2rem;
  }

  .mbackmart--home .mini {
    gap: 8px;
  }

  .mbackmart--home .home-all-grid,
  .mbackmart--home .products,
  .mbackmart--home .six:not(.home-plara-grid),
  .mbackmart .mb-grid,
  .mbackmart .mb-list-grid {
    gap: 6px;
  }
}