/*
 * Nafiz Store — Mobile Responsiveness Fixes
 * ==========================================
 * SCOPE  : max-width 1023px only
 * POLICY : Desktop (≥1024px) is NOT touched here.
 *          Every rule lives inside a @media block.
 *
 * FIX LOG
 * -------
 * 1.  Global overflow / horizontal scroll prevention
 * 2.  Navbar — hide desktop links, show hamburger
 * 3.  Mobile nav drawer — smooth slide animation
 * 4.  Hero section — single column, centre-aligned
 * 5.  Files/product grid — 2-col (phone), 3-col (tablet)
 * 6.  Product detail page — stacked image + sidebar
 * 7.  Dashboard layout — sidebar hidden, full-width
 * 8.  Stats grid — 2-col phone, 4-col tablet
 * 9.  Footer — single column stacking
 * 10. Forms — 16px font (prevent iOS zoom), full-width
 * 11. Buttons — touch-friendly size, full-width on phone
 * 12. Modals / overlays — proper mobile sizing
 * 13. Stats section (index.php) — 2×2 grid on tablet, 1-col phone
 * 14. Promo / feature banner — stacked
 * 15. Section header — wrap category pills
 * 16. Tables — horizontal scroll wrapper
 * 17. Copy-group — wraps on small screens
 * 18. Mobile bottom-nav — show on ≤768px
 * 19. Timer page fixes
 * 20. Auth cards — comfortable padding
 */

/* ═══════════════════════════════════════════════════
   1. GLOBAL — prevent horizontal overflow
   ═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  html, body {
    overflow-x: hidden;
    /* Note: padding-bottom kept from base stylesheet for mobile-bottom-nav */
  }

  /* Contain all direct children */
  .container-main {
    padding: 0 16px;
    max-width: 100%;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* Reset sticky sidebar stickiness on mobile */
  [style*="position:sticky"], [style*="position: sticky"] {
    position: relative !important;
    top: auto !important;
  }
}

/* ═══════════════════════════════════════════════════
   2. NAVBAR — hide desktop links, show toggler
   ═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Hide the desktop <ul> nav */
  .nav-links {
    display: none !important;
  }

  /* Show the hamburger button */
  .nav-toggler {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--surface2);
    border: 1px solid var(--border2);
    color: var(--text);
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
  }

  .nav-toggler:hover {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
  }

  /* Ensure brand + actions balanced */
  .site-navbar .nav-inner {
    padding: 0 16px;
    gap: 12px;
  }

  .nav-brand {
    font-size: 1.1rem;
    flex: 1;
  }

  /* Shrink action buttons on mobile */
  .nav-actions .btn {
    padding: 6px 12px;
    font-size: 0.8rem;
  }

  /* Hide "Dashboard" text label on very small screens,
     keep icon only to save space */
  .nav-actions .btn span.d-none-mobile {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════
   3. MOBILE NAV DRAWER — smooth slide-down animation
   ═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .mobile-nav-drawer {
    /* Replace instant display:none / display:flex toggle with smooth animation */
    display: flex !important;           /* always in the DOM flow */
    flex-direction: column;
    gap: 4px;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 999;
    padding: 16px;
    overflow-y: auto;
    max-height: calc(100vh - 60px);

    /* Hidden state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    pointer-events: none;
  }

  .mobile-nav-drawer.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .mobile-nav-drawer a {
    font-size: 0.95rem;
    padding: 14px 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    transition: all 0.2s;
    min-height: 48px; /* Touch target */
  }

  .mobile-nav-drawer a:hover,
  .mobile-nav-drawer a.active {
    color: var(--accent);
    background: var(--accent-dim);
  }

  /* Section label inside drawer */
  .mobile-nav-drawer > div[style] {
    font-size: 0.7rem !important;
    padding: 8px 16px !important;
    margin-top: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════
   4. HERO SECTION — single column, centred
   ═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .hero-section {
    padding: 40px 0 32px;
    text-align: center;
  }

  /* The inline-style two-column grid → single column */
  .hero-section > .container-main > div[style] {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }

  /* Hide the hero visual preview cards panel on tablets */
  .hero-visual {
    display: none !important;
  }

  .hero-title {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    letter-spacing: -0.02em;
  }

  .hero-desc {
    margin-left: auto;
    margin-right: auto;
    font-size: 0.95rem;
  }

  .hero-search-wrapper {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* CTA buttons row — centred & wrapping */
  .hero-section > .container-main > div > div > div[style*="display:flex"] {
    justify-content: center !important;
  }

  .hero-stats {
    justify-content: center;
    gap: 20px;
  }

  .hero-labels-top {
    justify-content: center !important;
  }

  /* Hero label badges */
  .hero-label {
    font-size: 0.7rem;
    padding: 4px 10px;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 1.65rem;
  }

  /* Stack hero CTA buttons vertically on phones */
  .hero-section .btn-lg {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════
   5. FILES GRID — 2-col phone, 3-col tablet
   ═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .files-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px;
  }

  /* Related files forced 3-col */
  .files-grid[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .files-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  .file-card-body {
    padding: 10px 12px;
  }

  .file-card-title {
    font-size: 0.85rem;
  }

  .file-card-overlay .btn {
    font-size: 0.75rem;
    padding: 5px 10px;
  }
}

/* ═══════════════════════════════════════════════════
   6. PRODUCT DETAIL PAGE — stack image + action box
   ═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* The inline-style two-column layout on file.php */
  div[style*="grid-template-columns:1fr 340px"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* Action sidebar box — full width */
  div[style*="position:sticky;top:80px"] {
    width: 100% !important;
    position: relative !important;
    top: auto !important;
  }

  /* Gallery image */
  .gallery-container {
    border-radius: 12px;
  }

  .gallery-container img {
    max-height: 50vh;
  }

  /* Buy / Download buttons — full width */
  .btn-block {
    width: 100% !important;
    justify-content: center !important;
  }

  /* File info card */
  div[style*="border-radius:var(--radius-xl);padding:32px"] {
    padding: 20px !important;
  }

  /* Social share row — even distribution */
  div[style*="display:flex; gap:8px"] {
    gap: 8px !important;
  }

  /* Breadcrumb — allow wrapping */
  nav[style*="display:flex;align-items:center;gap:6px"] {
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
    font-size: 0.78rem !important;
  }
}

/* ═══════════════════════════════════════════════════
   7. DASHBOARD LAYOUT — sidebar hidden, full-width
   ═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .dash-layout {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 16px 0 !important;
  }

  /* Hide the desktop sidebar — navigation is in mobile drawer */
  .dash-sidebar {
    display: none !important;
  }

  .dash-content {
    width: 100%;
  }

  /* Dashboard greeting header */
  .card-body[style*="display:flex; align-items:center; justify-content:space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  .card-body[style*="display:flex; align-items:center; justify-content:space-between"] > div:last-child {
    width: 100%;
  }

  .card-body[style*="display:flex; align-items:center; justify-content:space-between"] .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════
   8. STAT CARDS GRID
   ═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .stat-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .stat-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  .stat-card {
    padding: 18px 16px;
  }

  .stat-card-value {
    font-size: 1.3rem;
  }
}

/* ═══════════════════════════════════════════════════
   9. FOOTER — single column
   ═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .footer-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px;
  }

  .site-footer {
    padding: 36px 0 20px;
    margin-top: 48px;
  }
}

@media (max-width: 640px) {
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}

/* ═══════════════════════════════════════════════════
   10. FORMS — 16px inputs (prevent iOS zoom), full-width
   ═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* iOS Safari zooms on font-size < 16px in inputs */
  .form-control,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Full-width all inputs inside forms */
  .form-group {
    margin-bottom: 14px;
  }

  .copy-group {
    flex-wrap: wrap;
    gap: 8px;
  }

  .copy-group .form-control {
    min-width: 0;
    flex: 1 1 auto;
  }

  .copy-group .btn {
    flex-shrink: 0;
  }
}

/* ═══════════════════════════════════════════════════
   11. BUTTONS — touch-friendly (min 44px), readable
   ═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .btn {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 0.875rem;
  }

  .btn-sm {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 0.82rem;
  }

  .btn-lg {
    min-height: 50px;
    padding: 13px 24px;
    font-size: 1rem;
  }

  /* Ensure block buttons span full width cleanly */
  .btn-block {
    display: flex !important;
    width: 100% !important;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════
   12. MODALS / UI OVERLAYS — mobile sizing
   ═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .modal-dialog {
    margin: 12px !important;
    max-width: calc(100vw - 24px) !important;
  }

  .modal-content {
    border-radius: 16px !important;
  }

  /* AdBlock overlay content */
  .adblock-content {
    padding: 28px 20px;
    width: 92%;
    max-width: 92%;
  }

  .adblock-content h3 {
    font-size: 1.2rem;
  }
}

/* ═══════════════════════════════════════════════════
   13. INDEX STATS SECTION (4-col inline grid)
   ═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* inline style: display:grid;grid-template-columns:repeat(4, 1fr) */
  div[style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}

@media (max-width: 480px) {
  div[style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ═══════════════════════════════════════════════════
   14. PROMO / FEATURE BANNER — stacked layout
   ═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .promo-banner {
    grid-template-columns: 1fr !important;
    text-align: center;
    padding: 36px 24px;
  }

  .promo-banner .btn {
    margin: 0 auto;
  }

  /* Feature promo card (inline-style big green CTA) */
  .feature-promo-card {
    flex-direction: column !important;
    text-align: center !important;
    padding: 40px 24px !important;
    gap: 24px !important;
    justify-content: center !important;
  }

  .feature-promo-card h2 {
    font-size: 1.8rem !important;
    letter-spacing: -0.02em !important;
  }

  .feature-promo-card p {
    max-width: 100% !important;
  }

  /* Hide the decorative visual box in the promo card on mobile */
  .feature-promo-visual {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════
   15. SECTION HEADER — wrap category pills
   ═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .section-header {
    flex-wrap: wrap;
    gap: 12px;
  }

  .section-header > div {
    flex: 1 1 100%;
  }

  /* Category filters row */
  .category-filters {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 8px;
    /* Hide the scrollbar visually but keep it scrollable */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .category-filters::-webkit-scrollbar {
    display: none;
  }

  .category-filters .btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ═══════════════════════════════════════════════════
   16. TABLES — horizontal scroll
   ═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .table-wrap,
  .data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
  }

  .data-table,
  .table {
    min-width: 520px; /* prevents text crush; horizontal scroll kicks in */
  }

  .data-table th,
  .table th,
  .data-table td,
  .table td {
    padding: 12px 14px !important;
    font-size: 0.82rem;
  }
}

/* ═══════════════════════════════════════════════════
   17. AUTH PAGES — comfortable padding
   ═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .auth-wrapper {
    padding: 24px 16px;
    align-items: flex-start;
    padding-top: 40px;
  }

  .auth-card {
    padding: 28px 20px;
    border-radius: 16px;
  }

  .auth-title {
    font-size: 1.3rem;
  }
}

/* ═══════════════════════════════════════════════════
   18. MOBILE BOTTOM NAV (Mobile ≤ 768px)
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body {
    padding-bottom: 68px; /* clear space for bottom nav */
  }

  .mobile-bottom-nav {
    display: flex !important;
    height: 62px;
  }

  .mob-nav-item {
    min-width: 56px;
    padding: 8px;
  }

  .mob-nav-item i {
    font-size: 1.2rem;
  }

  .mob-nav-item span {
    font-size: 0.62rem;
    line-height: 1;
    margin-top: 2px;
  }
}

/* ═══════════════════════════════════════════════════
   19. TIMER PAGE — comfortable on small screens
   ═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .timer-page {
    min-height: calc(100svh - 122px);
    padding: 28px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .timer-main-card {
    padding: 32px 20px;
    border-radius: 16px;
  }

  .timer-main-card .btn {
    width: 100%;
    justify-content: center;
  }

  .timer-step-indicator {
    margin-bottom: 24px;
  }

  .circular-progress {
    width: 130px;
    height: 130px;
  }

  .circular-progress .timer-num {
    font-size: 2.2rem;
  }
}

/* ═══════════════════════════════════════════════════
   20. GENERAL SPACING — tighter on mobile
   ═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .section-gap {
    padding: 36px 0;
  }

  .mt-section {
    margin-top: 36px;
  }

  /* Chart container */
  .chart-container {
    padding: 16px;
    margin-bottom: 16px;
  }

  .chart-header {
    font-size: 0.9rem;
    flex-wrap: wrap;
    gap: 8px;
  }

  .chart-title {
    font-size: 0.9rem;
  }
}

/* ═══════════════════════════════════════════════════
   21. FEATURED DROPS SECTION GRID (col-lg-3 col-sm-6)
   — Bootstrap already handles this, but ensure gap
   ═══════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Sellers horizontal scroll list */
  div[style*="display:flex; gap:20px; overflow-x:auto"] {
    gap: 12px !important;
  }

  div[style*="min-width:240px"] {
    min-width: 180px !important;
    padding: 20px !important;
    font-size: 0.9rem;
  }
}

/* ═══════════════════════════════════════════════════
   22. SECTION PADDING — hero sub-sections
   ═══════════════════════════════════════════════════ */
@media (max-width: 640px) {
  section[style*="padding: 80px 0"] {
    padding: 40px 0 !important;
  }

  section[style*="padding: 60px 0"] {
    padding: 32px 0 !important;
  }

  section[style*="padding:40px 0 80px"] {
    padding: 24px 0 40px !important;
  }

  section[style*="padding:0 0 100px"] {
    padding: 0 0 48px !important;
  }
}

/* ═══════════════════════════════════════════════════
   23. MY-ORDERS / MY-LINKS / MY-FILES TABLES
   ═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Wrap table containers that don't already have table-wrap */
  .card .table,
  .card .data-table {
    min-width: 480px;
  }

  .card {
    overflow-x: auto;
  }
}

/* ═══════════════════════════════════════════════════
   24. PAGINATION — wrap & touch targets
   ═══════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .pagination {
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .page-item a,
  .page-item span {
    width: 40px;
    height: 40px;
    font-size: 0.82rem;
  }
}

/* ═══════════════════════════════════════════════════
   25. PROMO/SEARCH BANNER INLINE STYLES OVERRIDE
   ═══════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Search result banner */
  div[style*="display:flex;justify-content:space-between;align-items:center"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
}

/* ═══════════════════════════════════════════════════
   26. SCROLLED NAVBAR STATE — keep backdrop on mobile
   ═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .site-navbar.scrolled {
    background: rgba(10, 10, 10, 0.97);
    border-bottom-color: var(--border2);
  }
}

/* ═══════════════════════════════════════════════════
   27. TYPOGRAPHY — scale down safely on small screens
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  h1 { font-size: clamp(1.5rem, 5vw, 2.2rem); }
  h2 { font-size: clamp(1.3rem, 4vw, 1.8rem); }
  h3 { font-size: clamp(1.1rem, 3.5vw, 1.5rem); }
  h4 { font-size: clamp(1rem, 3vw, 1.2rem); }

  .section-title {
    font-size: 1.15rem;
  }
}

/* ═══════════════════════════════════════════════════
   28. WITHDRAW PAGE — fix broken 2-col balance+form layout
   ═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Collapse the inline-style 1fr 1.2fr grid to single column */
  div[style*="grid-template-columns:1fr 1.2fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Balance card — remove fixed tall padding, readable on mobile */
  div[style*="grid-template-columns:1fr 1.2fr"] > .card:first-child {
    padding: 28px 20px !important;
    text-align: center;
  }

  /* Balance amount — was 3.5rem causing overflow on narrow column */
  div[style*="grid-template-columns:1fr 1.2fr"] > .card:first-child div[style*="font-size:3.5rem"] {
    font-size: 2.6rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Balance label — prevent word-break */
  div[style*="grid-template-columns:1fr 1.2fr"] > .card:first-child .text-uppercase {
    white-space: nowrap;
    letter-spacing: 0.05em !important;
  }

  /* Form card — full width, comfortable inner padding */
  div[style*="grid-template-columns:1fr 1.2fr"] > .card:last-child {
    width: 100%;
  }

  div[style*="grid-template-columns:1fr 1.2fr"] > .card:last-child .card-body {
    padding: 16px !important;
  }

  /* Bootstrap row inside form — stack on phone */
  div[style*="grid-template-columns:1fr 1.2fr"] .col-md-6 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  /* Even tighter balance display on very small phones */
  div[style*="grid-template-columns:1fr 1.2fr"] > .card:first-child div[style*="font-size:3.5rem"] {
    font-size: 2rem !important;
  }
}

@media (max-width: 1023px) {
  /* ═══════════════════════════════════════════════════
     30. INDEX PAGE STATS & PROMO - MOBILE SIZING FIXES
     ═══════════════════════════════════════════════════ */
  .stat-card {
    padding: 15px !important;
  }
  .stat-big-num {
    font-size: 1.5rem !important;
  }
  .stat-label {
    font-size: 0.65rem !important;
    letter-spacing: 0.05em !important;
  }
  
  .feature-promo-card {
    padding: 35px 25px !important;
    text-align: center;
  }
  .promo-title {
    font-size: 1.8rem !important;
  }
  .promo-desc {
    font-size: 0.95rem !important;
    margin-inline: auto !important;
  }
}

/* ═══════════════════════════════════════════════════
   31. SELLER PROFILE / STORE PAGE (user.php)
   ═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .seller-profile-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 30px 20px !important;
    gap: 24px !important;
  }

  .seller-info-group {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .seller-avatar {
    width: 90px !important;
    height: 90px !important;
    font-size: 2rem !important;
  }

  .seller-name {
    font-size: clamp(1.4rem, 6vw, 1.8rem) !important;
    margin-bottom: 8px !important;
  }

  .seller-meta {
    justify-content: center !important;
    font-size: 0.85rem !important;
    gap: 8px 16px !important;
    width: 100% !important;
  }

  /* Hide the "|" separators on mobile to allow natural wrapping */
  .seller-meta span[style*="opacity: 0.3"] {
    display: none !important; 
  }

  .seller-contact-btn {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 5px;
  }
}

@media (max-width: 480px) {
  .seller-profile-header {
    padding: 24px 16px !important;
  }
  
  .seller-avatar {
    width: 80px !important;
    height: 80px !important;
  }
  
  .seller-meta {
    font-size: 0.8rem !important;
    gap: 8px 12px !important;
  }
}