/* ============================================================
   MOBILE-FIRST UX/UI OVERRIDES  (GamingGears Thailand)
   Loaded LAST in <head>; page-level stylesheets are injected
   dynamically at runtime, so conflicting rules use !important.
   Scope: <= 768px (phone), with <= 400px micro tweaks.
   ============================================================ */

/* Filter sheet close button: exists in DOM but hidden on desktop */
.btn-filter-close {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
}

@media (max-width: 768px) {

  /* ============ 1. GLOBAL BASE ============ */
  html, body { overflow-x: hidden !important; }
  * { -webkit-tap-highlight-color: transparent; }
  button, a, .product-card, .filter-chip { touch-action: manipulation; }

  /* ---- Image overflow guard: every image stays inside its frame ---- */
  img { max-width: 100% !important; }
  iframe, video, embed, object { max-width: 100% !important; }

  /* Content HTML (WC descriptions / news / articles / CMS pages) often
     carries fixed width attributes — let it scale proportionally */
  .product-description-html img,
  .news-detail-content img,
  .gg-news-body img,
  .article-detail-content img,
  .cms-page-content img,
  .about-content img,
  .tab-panel img,
  #news-content img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Banner / tile frames: clip anything oversized inside them */
  .hero-slider, .hero-slide,
  .promo-card, .shop-cat-card, .premium-row,
  .top-sell-banner, .flash-sale-banner,
  .large-promo-banner, .tiktok-card,
  .article-card, .news-card,
  .product-card .img-wrap, .explorer-card .ex-img,
  .bs-thumb, .ci-img, .img-main {
    overflow: hidden !important;
  }
  .product-card .img-wrap img,
  .explorer-card .ex-img img,
  .bs-thumb img,
  .ci-img img,
  .img-main img {
    max-width: 100% !important;
    max-height: 100% !important;
  }

  /* Prevent iOS auto-zoom on focus + comfy tap targets */
  input[type="text"], input[type="search"], input[type="email"],
  input[type="password"], input[type="tel"], input[type="number"],
  select, textarea {
    font-size: 16px !important;
  }

  /* ============ 2. SHELL / CHROME ============ */
  .mobile-header-inner { padding: 8px 12px; }
  .mobile-header-btn { width: 40px; height: 40px; font-size: 15px; }
  .mobile-header-logo img { height: 30px !important; }

  /* ============ 3. HOMEPAGE ============ */
  .container-main { padding: 0 12px !important; }

  /* Hero slider: banners are ~21:9 artwork — keep that ratio and show the
     FULL image (contain) instead of cropping ~30% with cover */
  .hero-grid { gap: 12px !important; }
  .hero-slider { aspect-ratio: 21 / 9 !important; border-radius: 14px !important; background: #111 !important; }
  .hero-slide img { object-fit: contain !important; object-position: center !important; }
  .hero-slide-content { padding: 16px !important; }
  .hero-pager-dots { bottom: 8px !important; gap: 5px !important; }
  .hero-pager-dot { width: 6px !important; height: 6px !important; }
  .hero-pager-dot.active { width: 18px !important; }

  /* ---- Best Seller: compact 3D stacked cards (phones only) ----
     Desktop keeps the ranked vertical list; index.js only builds the
     carousel markup inside this breakpoint, so nothing above 768px changes.
     The customer asked for this block to be MUCH smaller: half-width cards
     (so the next one is already peeking in), 52px thumb and 10px type. */
  .bestseller-panel {
    padding: 8px 0 0 !important;
    border-radius: 12px !important;
    max-height: none !important;
    overflow: visible !important;
    /* The panel is a grid item, and its automatic minimum size is the row's
       min-content width (one card + the side padding ≈ 929px), which blew the
       .hero-grid track up to that width and pushed the cards off screen. */
    min-width: 0 !important;
  }
  .bestseller-title {
    padding: 0 10px !important;
    font-size: 12px !important;
    margin-bottom: 4px !important;
    gap: 5px !important;
  }
  /* the base rule puts a 20px "★" glyph in here, which a 3x12 box only mangles
     — on phones it becomes the same plain accent bar the other titles use */
  .bestseller-title::before {
    content: "" !important;
    width: 3px !important;
    height: 12px !important;
    border-radius: 2px;
    background: #ffffff;
  }

  .bs-mobile {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Centre-stage row: the side padding is (rowWidth - cardWidth)/2 so the
       first and last card can still reach the middle. Everything is in vw on
       purpose — .container-main pads 10px per side, so the row is
       (100vw - 20px) wide and the padding is (100vw - 20px - 46vw)/2. A
       percentage here would resolve against an ancestor that can be inflated
       by this very row's min-content. */
    padding: 10px calc(27vw - 10px) 12px;
    scrollbar-width: none;
  }
  .bs-mobile::-webkit-scrollbar { display: none; }

  .bs-mcard {
    position: relative;
    flex: 0 0 46vw;
    scroll-snap-align: center;
    transform: perspective(700px) rotateY(-9deg) scale(.95);
    transform-origin: left center;
    transition: transform .3s ease;
    cursor: pointer;
  }
  .bs-mcard:last-child {
    transform: perspective(700px) rotateY(9deg) scale(.95);
    transform-origin: right center;
  }
  .bs-mcard.is-active { transform: perspective(700px) rotateY(0deg) scale(1); }

  /* the "deck of cards" stacked behind each card */
  .bs-mcard::before,
  .bs-mcard::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    z-index: 0;
    pointer-events: none;
  }
  .bs-mcard::before { transform: translate(3px, 4px) rotate(1.5deg) scale(.98); background: rgba(255,255,255,.34); }
  .bs-mcard::after  { transform: translate(6px, 8px) rotate(3deg) scale(.96); background: rgba(255,255,255,.20); }

  .bs-mcard-body {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 10px;
    padding: 7px 5px 6px;
    box-shadow: 0 6px 16px rgba(0,0,0,.3);
    text-align: center;
  }
  .bs-mrank {
    position: absolute; top: 3px; left: 6px;
    font-family: 'Prompt'; font-weight: 700; font-size: 12px; line-height: 1;
    color: #111;
  }
  .bs-mrank.rank-1 { color: #e60000; }
  .bs-mrank.rank-2 { color: #666666; }
  .bs-mrank.rank-3 { color: #333333; }
  .bs-mthumb {
    width: 52px; height: 52px; margin: 1px auto 4px;
    background: #f3f4f6; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .bs-mthumb img { width: 100%; height: 100%; object-fit: contain; }
  .bs-mbrand {
    font-size: 8px; color: #e60000; font-weight: 600;
    text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .bs-mname {
    font-size: 10px; color: #111; font-weight: 500; line-height: 1.25; margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    min-height: 25px;
  }
  .bs-mprice { margin-top: 3px; font-size: 11px; font-weight: 700; color: #111; }
  .bs-mprice s { font-size: 8.5px; color: #6b7280; font-weight: 400; margin-left: 3px; }

  .bs-mdots { display: flex; justify-content: center; gap: 4px; padding: 0 0 6px; }
  .bs-mdot { width: 4px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.45); transition: all .25s; }
  .bs-mdot.active { width: 12px; background: #ffffff; }

  /* Section headers */
  .section-title-bar { margin-bottom: 12px !important; }
  .section-title { font-size: 16px !important; }
  .section-link { font-size: 12px !important; white-space: nowrap; }

  /* Category icon grid */
  .cat-icon-grid { gap: 8px !important; grid-template-columns: repeat(4, 1fr) !important; }
  .cat-icon-card { border-radius: 12px !important; padding: 10px 4px !important; }
  .cat-icon-card .cat-icon { width: 48px !important; height: 48px !important; font-size: 18px !important; }
  .cat-icon-card .cat-label { font-size: 11px !important; line-height: 1.25 !important; word-break: break-word; }
  .cat-icon-wrap { min-height: 44px; }

  /* Flash sale */
  .flash-sale-banner { border-radius: 14px !important; }
  .countdown-box { border-radius: 8px !important; }
  .countdown-box .num { font-size: 16px !important; }
  .countdown-box .lbl { font-size: 11px !important; }

  /* Shop-by-category tiles */
  .shop-cat-grid { gap: 10px !important; }

  /* Promo banners */
  .promo-2-grid { gap: 10px !important; }
  .promo-card { border-radius: 14px !important; }

  /* Top-seller banner */
  .top-sell-banner { border-radius: 14px !important; }
  .top-sell-tabs { gap: 6px !important; }
  .top-sell-tab { padding: 8px 14px !important; font-size: 12px !important; min-height: 38px; }

  /* Services strip */
  .services-bar { gap: 8px !important; }
  .service-item { padding: 10px 8px !important; font-size: 11px !important; }

  /* Articles / news / tiktok */
  .article-grid, .article-grid.article-grid-4 { gap: 12px !important; }
  .article-card { border-radius: 12px !important; }
  .tiktok-grid { gap: 10px !important; }
  .news-grid { gap: 12px !important; }

  /* Social CTA */
  .social-cta-grid { gap: 10px !important; }
  .line-big-cta { border-radius: 14px !important; padding: 18px 16px !important; }

  /* Brand logo marquee: exactly 3 logos on screen at a time, much smaller.
     min-width is a third of the row (viewport minus the 12px container
     padding on each side) so the strip never shows a part logo at the edge. */
  .marquee-wrap {
    height: 74px !important;
    border-radius: 12px !important;
  }
  .marquee-wrap::before, .marquee-wrap::after { width: 26px !important; }
  .marquee-track { max-height: 74px !important; animation-duration: 26s !important; }
  .brand-logo {
    height: 74px !important;
    min-width: calc((100vw - 30px) / 3) !important;
    padding: 4px 6px !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
  }
  .brand-logo img {
    max-height: 50px !important;
    max-width: calc((100vw - 30px) / 3 - 12px) !important;
    width: auto !important;
  }
  /* lift-on-hover is a mouse affordance; on touch it just leaves cards jumped */
  .brand-logo:hover { transform: none; }

  /* Mercular 3D carousel on phones: the card IS the artwork. No dark frame
     behind it, no sheen/dot overlay tinting it, no ring around the active one.
     Every banner in the deck is 1800x1140, so putting the <img> back in normal
     flow makes the box hug the picture — the whole image is visible, nothing is
     cropped, and `overflow:hidden` rounds the corners of the image itself.
     (The card used to be 288x212 = ratio 1.36 for a 1.58 image, and the spare
     height showed up as the black "frame" the object-fit contain could not fill.)
     The JS still lays the neighbours out as a fanned deck — see mGo(). */
  .mercular-carousel { padding: 6px 0 22px !important; perspective: none !important; }
  .mercular-title {
    font-size: 17px !important;
    margin-bottom: 2px !important;
    letter-spacing: 0.03em !important;
  }
  .mercular-track {
    /* 78vw card at the art's own ratio = ~192px, plus the deck's downward
       lean of the furthest neighbour (18px + half its shrink) */
    height: 212px !important;
    perspective: 900px !important;
    transform-style: flat !important;
  }
  .mercular-slide {
    width: 78% !important;
    height: auto !important;
    background: none !important;
    border: 0 !important;
    border-radius: 18px !important;
    /* depth only — a shadow is what keeps the stacked cards readable, a ring
       is what reads as a frame */
    box-shadow: 0 12px 28px rgba(0, 0, 0, .42) !important;
    overflow: hidden !important;
    transition: transform .5s cubic-bezier(.22,.8,.28,1), opacity .5s ease !important;
  }
  .mercular-slide.active { box-shadow: 0 16px 34px rgba(0, 0, 0, .5) !important; }
  .mercular-slide::before,
  .mercular-slide::after { content: none !important; display: none !important; }
  .mercular-slide img {
    position: static !important;   /* in flow => the card is sized by the image */
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    /* moot while the box follows the art; `contain` also promises no cropping
       if the operator ever uploads a different ratio */
    object-fit: contain !important;
  }
  .mercular-arrow {
    width: 30px !important; height: 30px !important;
    font-size: 11px !important;
  }
  .mercular-arrow.left { left: 6px !important; }
  .mercular-arrow.right { right: 6px !important; }

  /* News / activity slider: the ≤900px stage stacks fixed rows (230px media +
     1fr body) inside a fixed 580px box, so the media must fill its own row
     instead of re-deriving a viewport-based 16:9 height that fought the grid. */
  .gg-news-slider { overflow: hidden !important; }
  .gg-news-card { overflow: hidden !important; }
  .gg-news-media {
    width: 100% !important; max-width: 100% !important;
    height: 100% !important; min-height: 0 !important;
    aspect-ratio: auto !important; background: #111;
  }
  .gg-news-media img, .gg-news-media video, .gg-news-media iframe {
    width: 100% !important; height: 100% !important;
    max-width: 100% !important; object-fit: contain !important;
  }

  /* ============ 4. PRODUCT CARDS (shared home + listing) ============ */
  .product-grid { gap: 10px !important; }
  .product-grid-4 { gap: 10px !important; }

  .product-card { border-radius: 12px !important; }
  .product-card .img-wrap { padding: 10px !important; border-radius: 0; }
  .product-info { padding: 10px !important; }
  .product-name { font-size: 12px !important; min-height: 32px !important; line-height: 1.3 !important; }
  .product-price-row { margin-top: 4px !important; gap: 6px !important; }
  .price-now { font-size: 15px !important; }
  .price-old { font-size: 11px !important; }
  .price-disc { font-size: 9px !important; padding: 2px 5px !important; }
  .product-meta { font-size: 10px !important; }

  /* Brand logo slot inside card: shrink so name/price stay visible */
  .product-brand-inline { height: 34px !important; margin-bottom: 4px !important; }
  .product-brand-inline img, .product-brand-inline svg { max-height: 34px !important; max-width: 60px !important; }

  /* Card action buttons: full tap height */
  .btn-row-blue { margin: 8px 10px 10px !important; gap: 6px !important; }
  .product-card.blue-style .btn-blue-buy {
    padding: 11px 6px !important; font-size: 12px !important;
    border-radius: 8px !important; min-height: 42px;
  }
  .product-wishlist { width: 34px !important; height: 34px !important; }
  .product-view-btn { width: 34px !important; height: 34px !important; top: 50px !important; }

  /* Hover-only CTA overlay is useless on touch */
  .product-hover-ctas { display: none !important; }

  /* Keep 2 columns even on small phones (no 1-col collapse) */
  .product-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .skeleton-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Carousel cards slightly narrower on phones */
  .carousel-viewport .product-grid .product-card,
  .carousel-viewport .product-grid .skeleton-card {
    flex: 0 0 calc(46% - 6px) !important; min-width: 150px !important;
  }
  .carousel-btn { width: 36px !important; height: 36px !important; }

  /* ============ 5. PRODUCTS LISTING PAGE ============ */
  .products-layout { padding: 14px 12px !important; gap: 14px !important; }

  .results-bar { gap: 8px !important; margin-bottom: 12px !important; }
  .results-count { font-size: 12px !important; width: 100%; order: 3; }
  .btn-filter-toggle {
    display: inline-flex !important; flex: 1; justify-content: center;
    min-height: 42px !important; border-radius: 10px !important; font-size: 13px !important;
  }
  .sort-select {
    flex: 1; min-height: 42px !important; border-radius: 10px !important;
    font-size: 13px !important; padding: 8px 12px !important;
  }

  /* Filter: full-screen sheet when opened (covers header + bottom nav) */
  .filter-sidebar.open {
    position: fixed !important; inset: 0 !important; z-index: 999;
    height: 100% !important; width: 100% !important; max-width: none !important;
    overflow-y: auto; border-radius: 0 !important; border: none !important;
    padding: 18px 16px 120px !important; background: var(--bg) !important;
    animation: mobSheetUp .22s ease;
  }
  @keyframes mobSheetUp { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
  .filter-title { font-size: 17px !important; margin-bottom: 14px !important; position: sticky; top: 0; background: var(--bg); padding: 8px 0; z-index: 2; }
  .btn-filter-close { display: inline-flex !important; width: 40px !important; height: 40px !important; font-size: 16px !important; }
  .filter-chip { padding: 10px 14px !important; font-size: 13px !important; margin: 3px !important; }
  .filter-check-row { padding: 9px 0 !important; font-size: 14px !important; }
  .brand-check { width: 20px !important; height: 20px !important; }
  .price-input { padding: 12px !important; font-size: 15px !important; border-radius: 10px !important; }
  .btn-clear-filter { padding: 13px 16px !important; font-size: 14px !important; border-radius: 10px !important; }

  /* Pagination: proper tap targets */
  .pagination { gap: 6px !important; margin-top: 24px !important; flex-wrap: wrap; }
  .page-btn { width: 44px !important; height: 44px !important; border-radius: 10px !important; font-size: 14px !important; }

  /* Category nav inside products body (if rendered) */
  .cat-nav-inner { padding: 8px 0 !important; }
  .cat-link { padding: 9px 14px !important; font-size: 13px !important; }

  /* ============ 6. PRODUCT DETAIL PAGE ============ */
  .detail-layout { padding: 0 12px 110px !important; gap: 18px !important; }

  .breadcrumb { padding: 10px 0 !important; font-size: 12px !important; gap: 4px !important; flex-wrap: nowrap !important; overflow-x: auto; white-space: nowrap; }
  .breadcrumb .current { max-width: 150px !important; }

  .img-main { border-radius: 14px !important; }
  .img-badge { top: 10px; left: 10px; }
  .img-wish { width: 42px !important; height: 42px !important; top: 10px; right: 10px; }

  .quick-row { margin-top: 10px !important; gap: 6px !important; }
  .quick-btn { padding: 12px 6px !important; min-height: 44px; font-size: 11px !important; border-radius: 10px !important; }

  .brand-chip { padding: 6px 12px !important; font-size: 13px !important; }
  .brand-chip img { height: 22px !important; }
  .product-title { font-size: 18px !important; margin-top: 10px !important; line-height: 1.4 !important; }
  .rating-row { margin-top: 6px !important; }

  .price-main { font-size: 26px !important; }
  .price-was { font-size: 14px !important; }
  .save-chip { font-size: 11px !important; }
  .inst-row { font-size: 12px !important; padding: 10px 12px !important; }

  .qty-row { margin-top: 14px !important; }
  .qty-btn { width: 44px !important; height: 44px !important; font-size: 16px !important; }
  .qty-in { width: 56px !important; height: 44px !important; font-size: 16px !important; }

  /* Sticky add-to-cart bar above the bottom nav */
  .detail-layout div:has(> .btn-cart):has(> .btn-buy) {
    position: fixed !important; left: 0; right: 0; z-index: 90;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    margin: 0 !important; gap: 8px !important;
    padding: 10px 12px;
    background: var(--bg);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(0,0,0,.18);
  }
  .btn-cart { min-height: 48px !important; padding: 12px !important; font-size: 14px !important; border-radius: 12px !important; }
  .btn-buy { min-height: 48px !important; padding: 12px !important; font-size: 14px !important; border-radius: 12px !important; }
  .btn-line { min-height: 46px !important; font-size: 13px !important; border-radius: 12px !important; }

  /* Tabs */
  .tab-nav { margin-top: 20px !important; }
  .tab-btn { padding: 12px 14px !important; font-size: 13px !important; min-height: 44px; }
  .tab-panel { padding: 14px 0 !important; }

  /* Spec table */
  .spec-table { font-size: 12px !important; }
  .spec-table td { padding: 9px 10px !important; word-break: break-word; }
  .spec-table td:first-child { width: 40% !important; }

  /* Description HTML content scaling */
  .product-description-html { font-size: 13px !important; }
  .product-description-html img { max-width: 100% !important; height: auto !important; }

  .review-card { padding: 14px !important; }
  .delivery-box { padding: 12px 14px !important; gap: 10px !important; }
  .delivery-row { font-size: 12px !important; }

  /* Related products: keep 2 columns on small phones */
  .related-grid { gap: 10px !important; grid-template-columns: repeat(2, 1fr) !important; }
  .rel-name { font-size: 12px !important; }
  .rel-price { font-size: 14px !important; }

  /* ============ 7. CART / CHECKOUT / PAYMENT ============ */
  .cart-page-wrap { padding: 16px 0 40px !important; }
  .cart-stepper { margin-bottom: 18px !important; gap: 6px !important; }
  .cart-step { font-size: 10px !important; }
  .cart-step .dot { width: 32px !important; height: 32px !important; font-size: 13px !important; }
  .step-line { flex: 0 0 24px !important; }

  .cart-grid { gap: 16px !important; }
  .cart-card { border-radius: 14px !important; }
  .cart-card-head { padding: 14px 16px !important; font-size: 14px !important; }
  .cart-card-body { padding: 14px 16px !important; }

  .ci-row { grid-template-columns: 76px 1fr auto !important; gap: 10px !important; padding: 12px 0 !important; }
  .ci-img { width: 76px !important; height: 76px !important; border-radius: 10px !important; }
  .ci-name { font-size: 13px !important; }
  .ci-price { font-size: 14px !important; }
  .qty-box { margin-top: 8px !important; border-radius: 10px !important; }
  .qty-box button { width: 36px !important; height: 36px !important; font-size: 14px !important; }
  .qty-box span { min-width: 38px !important; font-size: 14px !important; }
  .ci-remove { padding: 10px !important; font-size: 16px !important; }

  .summary-box { position: static !important; padding: 16px !important; border-radius: 14px !important; }
  .coupon-row input { min-height: 44px !important; border-radius: 10px !important; font-size: 15px !important; }
  .coupon-row button { min-height: 44px !important; padding: 10px 16px !important; font-size: 13px !important; }

  .form-group label { font-size: 13px !important; }
  .form-ctrl { padding: 12px 14px !important; min-height: 46px !important; border-radius: 10px !important; font-size: 15px !important; }

  .pay-options { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .pay-opt { padding: 14px 8px !important; min-height: 74px; }
  .pay-opt i { font-size: 20px !important; }

  .empty-cart { padding: 50px 16px !important; }
  .success-box { padding: 40px 16px !important; }

  /* ============ 8. SHARED COMPONENTS ============ */
  /* Toast above bottom nav */
  .toast {
    left: 16px !important; right: 16px !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateY(120px); font-size: 13px !important; padding: 12px 16px !important;
  }
  .toast.show { transform: translateY(0) !important; }

  /* Modal */
  .modal-box {
    width: calc(100vw - 24px) !important; max-width: 100% !important;
    max-height: 85vh !important; border-radius: 16px !important;
    margin: 0 auto;
  }
  .modal-body { padding: 14px !important; overflow-y: auto; }

  /* Generic buttons everywhere: comfy min height */
  .btn-primary, .btn-ghost, .btn-add-cart, .btn-buy-now,
  .btn-line-add, .btn-line-order, .btn-phone-call {
    min-height: 44px !important; border-radius: 10px !important;
  }

  /* Search suggestions dropdown */
  .search-suggestion-item { padding: 10px 12px !important; }
  .search-suggestion-img { width: 44px !important; height: 44px !important; }

  /* Flash sale grid card buttons */
  .flash-link-btn { min-height: 42px; font-size: 13px !important; }
}

/* ============ MICRO PHONES (<= 400px) ============ */
@media (max-width: 400px) {
  .container-main { padding: 0 10px !important; }
  .product-grid, .product-grid-4, .related-grid { gap: 8px !important; }
  .product-info { padding: 8px !important; }
  .product-name { font-size: 11px !important; }
  .price-now { font-size: 14px !important; }
  .product-card.blue-style .btn-blue-buy { font-size: 11px !important; padding: 10px 4px !important; }
  .hero-slider { aspect-ratio: 21 / 9 !important; }
  .product-title { font-size: 16px !important; }
  .price-main { font-size: 23px !important; }
  .section-title { font-size: 15px !important; }
  .pay-options { grid-template-columns: 1fr !important; }
}