@media (max-width: 1199px) {
    .storefront-header-inner {
        grid-template-columns: 190px 175px minmax(240px, 1fr) auto;
        gap: 10px !important;
    }
    .storefront-brand {
        width: 190px !important;
    }
    .storefront-brand img {
        max-width: 180px;
    }
    .storefront-location {
        width: 175px !important;
    }
    .storefront-actions {
        gap: 9px;
    }
    .account-link span {
        display: none;
    }
    .storefront-footer .footer-grid {
        grid-template-columns: 2fr 1fr 1fr !important;
        gap: 34px !important;
    }
    .footer-social .social-tiktok {
        margin-right: 0;
    }
}
@media (max-width: 991px) {
    .storefront-header-inner {
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: 170px minmax(180px, 1fr) auto;
        padding: 12px 0 !important;
    }
    .storefront-brand {
        width: 170px !important;
    }
    .storefront-brand img {
        height: 44px;
        max-width: 160px;
    }
    .storefront-location {
        width: auto !important;
    }
    .storefront-search {
        grid-column: 1/-1;
        grid-row: 2;
    }
    .storefront-tabs {
        height: 56px;
    }
    .service-banner {
        min-height: 96px !important;
    }
    .hero {
        height: 260px !important;
    }
    .category-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .storefront-footer .footer-grid {
        grid-template-columns: 2fr 1fr 1fr !important;
    }
}
@media (max-width: 767px) {
    .storefront-topbar-inner {
        padding: 0 12px;
    }
    .storefront-topbar-inner > span:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .topbar-links {
        gap: 8px;
    }
    .topbar-links a:first-child {
        display: none;
    }
    .storefront-header-inner {
        display: grid !important;
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px !important;
        padding: 12px 0 !important;
    }
    .storefront-brand {
        grid-column: 1;
        grid-row: 1;
        width: auto !important;
    }
.storefront-brand img {
    height: 48px;
    max-width: 150px;
}
    .storefront-actions {
        grid-column: 2;
        grid-row: 1;
        margin-left: 0;
        align-self: center;
    }
    .storefront-location {
        grid-column: 1/-1;
        grid-row: 2;
        width: 100% !important;
    }
    .storefront-search {
        grid-column: 1/-1;
        grid-row: 3;
        width: 100%;
    }
    .container,
    .home-shell,
    .footer-grid,
    .footer-bottom {
        width: calc(100% - 24px);
    }
    .home-shell {
        padding-top: 12px;
    }
    .home-shell > section {
        width: 100%;
    }
    .home-shell {
        max-width: calc(100% - 24px) !important;
    }
    .storefront-footer .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 28px 22px !important;
        padding-bottom: 32px !important;
    }
    .footer-about {
        grid-column: 1/-1;
    }
    .storefront-footer .footer-bottom {
        min-height: 0;
        flex-direction: column;
        gap: 8px;
        padding: 18px 0 !important;
    }
    .storefront-footer {
        padding-top: 36px !important;
    }
    .storefront-tabs {
        width: calc(100% - 24px) !important;
        height: auto;
        padding: 8px 0 !important;
    }
    .storefront-tabs a {
        padding: 9px 7px !important;
    }
    .service-banner {
        min-height: 0 !important;
        padding: 16px !important;
        border-radius: 15px !important;
        gap: 12px;
    }
    .service-banner h2 {
        font-size: 14px !important;
    }
    .service-banner p {
        line-height: 1.45 !important;
    }
    .service-banner button {
        min-width: 0;
        height: 36px;
        padding: 0 12px !important;
    }
    .hero {
        height: 220px !important;
        border-radius: 15px !important;
    }
    .hero-slide {
        padding: 20px !important;
    }
    .hero h1 {
        font-size: 23px !important;
    }
    .section-heading {
        margin: -15px 2px 14px !important;
    }
    .category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .category-card {
        min-height: 110px !important;
    }
    .floating-support {
        right: 14px;
        bottom: 14px;
        width: 52px;
        height: 52px;
        font-size: 21px;
    }
}
@media (max-width: 600px) {
    .service-banner {
        align-items: flex-start !important;
        flex-direction: column;
    }
    .service-banner button {
        align-self: flex-end;
    }
}
@media (max-width: 479px) {
    .storefront-brand img {
        max-width: 138px;
    }
    .storefront-location {
        height: 38px !important;
        padding: 0 9px !important;
    }
    .storefront-location > i:last-child {
        display: none;
    }
    .storefront-actions {
        gap: 8px;
    }
    .account-link span {
        display: none;
    }
    .storefront-tabs a {
        font-size: 10px !important;
    }
    .hero {
        height: 205px !important;
    }
    .hero-slide {
        padding: 17px !important;
    }
    .hero h1 {
        font-size: 21px !important;
    }
    .storefront-footer .footer-grid {
        grid-template-columns: 1fr !important;
    }
    .storefront-footer .footer-grid > * {
        grid-column: auto !important;
        margin-top: 0 !important;
    }
    .footer-description {
        max-width: none;
    }
    .storefront-footer .secure-badge {
        width: 100%;
        max-width: 210px;
    }
}

@media (max-width: 1024px){
  .merchant-detail-shell{padding:18px 18px 50px;}
  .content-grid{grid-template-columns:1fr 280px;gap:24px;}
}

@media (max-width: 900px){
  .content-grid{grid-template-columns:1fr;}
  .order-panel{position:static;margin-top:10px;}
  .order-panel{order:2;}
  .menu-content{order:1;}
}

@media (max-width: 640px){
  .merchant-detail-shell{padding:14px 14px 40px;}

  .merchant-header{gap:12px;}
  .merchant-logo{width:60px;height:60px;border-radius:10px;}
  .merchant-logo i{font-size:20px;}
  .merchant-info h1{font-size:20px;}
  .merchant-meta-row,
  .merchant-rating-row{font-size:12px;}

  .deal-card{max-width:100%;padding:14px;}

  .menu-toolbar{
    flex-direction:column;align-items:stretch;gap:12px;
    top:0;padding:12px 0;
  }
  .menu-search{width:100%;}
  .menu-tabs{
    overflow-x:auto;flex-wrap:nowrap;gap:18px;
    -webkit-overflow-scrolling:touch;padding-bottom:4px;
  }
  .menu-tabs a{flex-shrink:0;}

  .item-grid{grid-template-columns:1fr;}
  .item-card{align-items:stretch;}
  .item-card .thumb{width:96px;}
  .item-card h3{font-size:13.5px;}

  .group-title{font-size:18px;}

  .order-panel{padding:18px 16px;}
}

@media (max-width: 380px){
  .merchant-info h1{font-size:18px;}
  .item-card .thumb{width:84px;}
  .item-card .item-body{padding:10px;}
}

/* ===== merged from public/frontEnd/css/responsive-listing.css ===== */

@media (max-width: 767px) {
    .listing-layout {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .listing-sidebar {
        position: static;
    }
    .listing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .listing-main h1 {
        font-size: 23px;
    }
    .listing-card {
        padding: 14px;
    }
    .listing-card h2 {
        font-size: 13px;
    }
}

/* ===== merged from public/frontEnd/css/responsive-merchant-detail.css ===== */

@media (max-width: 600px) {
    .merchant-profile h1 {
        font-size: 20px;
    }
    .merchant-logo {
        width: 58px;
        height: 58px;
    }
    .deal-grid {
        overflow: auto;
    }
    .deal-card {
        min-width: 190px;
    }
    .menu-item {
        padding: 10px;
    }
    .merchant-detail-shell {
        padding-bottom: 30px;
    }
}

/* ===== merged from public/frontEnd/css/responsive-pages.css ===== */

@media (max-width: 767px) {
    .catalog-page {
        padding: 22px 12px 45px;
    }
    .catalog-hero {
        padding: 22px;
    }
    .catalog-hero h1 {
        font-size: 22px;
    }
    .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .catalog-card {
        padding: 14px;
    }
    .catalog-card h2 {
        font-size: 13px;
    }
    .catalog-list {
        padding: 14px;
    }
}