/* ══════════════════════════════════════════════════════════════
   01  BOX-MODEL & OVERFLOW RESET
   ══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}
body {
  overflow-x: hidden;
  max-width: 100%;
  min-width: 320px;
}
body.nav-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}
img { max-width: 100%; height: auto; display: block; }

.container, main, section, article, aside, header, footer { max-width: 100%; }

/* Prevent iOS zoom on input focus */
@media (max-width: 768px) {
  input.form-control,
  select.form-control,
  textarea.form-control { font-size: 16px !important; }
}


/* ══════════════════════════════════════════════════════════════
   02  CSS CUSTOM-PROPERTY OVERRIDES
   ══════════════════════════════════════════════════════════════ */

:root {
  --nav-height : 64px;
  --cont-px    : clamp(1rem, 4vw, 2rem);
  --section-py : clamp(2rem, 5vw, 3.5rem);
  --card-gap   : clamp(.75rem, 2vw, 1.5rem);
}


/* ══════════════════════════════════════════════════════════════
   03  CONTAINER
   ══════════════════════════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--cont-px);
  padding-right: var(--cont-px);
}

/* Narrow centred containers used on buyer/company/messages pages
   collapse to full-width on mobile, restore cap on larger screens */
@media (max-width: 700px) {
  [style*="max-width:900px"],[style*="max-width:860px"],
  [style*="max-width:780px"],[style*="max-width:800px"],
  [style*="max-width:600px"],[style*="max-width:980px"] {
    max-width: 100% !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   04  TYPOGRAPHY SCALE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  body           { font-size: 15px; line-height: 1.65; }
  h1, .h1        { font-size: clamp(1.3rem, 5.5vw, 1.75rem); }
  h2, .h2        { font-size: clamp(1.1rem, 4.5vw, 1.4rem);  }
  h3, .h3        { font-size: clamp(1rem,   3.5vw, 1.15rem); }
  .section-title { font-size: clamp(1.2rem, 5vw, 1.5rem); }
  .page-header h1{ font-size: clamp(1.2rem, 5vw, 1.6rem); }
  .page-header   { padding: 1.1rem 0; }
  .page-header--sm { padding: .75rem 0; }
}
@media (max-width: 480px) {
  body { font-size: 14px; }
}


/* ══════════════════════════════════════════════════════════════
   05  NAVBAR — RESPONSIVE OVERRIDES
   ══════════════════════════════════════════════════════════════
   Base navbar styles live in main.css section 5.
   This section handles ONLY breakpoint-specific overrides.
   ══════════════════════════════════════════════════════════════ */

/* ── Logo scales fluidly ── */
.navbar__logo-img { height: clamp(30px, 4.5vw, 46px); }

/* ── Search-toggle button hidden by default (desktop has inline bar) ── */
.navbar__search-toggle { display: none; }

/* ══════════════════════════════════════════════════════════════
   MOBILE  ≤ 768px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Bar height tightens slightly */
  .navbar__inner { height: 60px !important; gap: .5rem; }

  /* Show hamburger */
  .hamburger { display: flex; }

  /* Hide desktop centre search bar */
  .navbar__search { display: none; }

  /* Show mobile search toggle icon */
  .navbar__search-toggle { display: flex; }

  /* Hide desktop-only elements: nav links, separator, dropdown, login links */
  .navbar__nav              { display: none !important; }
  .navbar__sep              { display: none !important; }
  .navbar__dropdown--desktop{ display: none !important; }
  .navbar__auth-desktop     { display: none !important; }

  /* Tighten icon spacing */
  .navbar__actions { gap: .125rem; }

  /* Keep cart and icon buttons at touch-friendly sizes */
  .navbar__cart     { width: 42px; height: 42px; }
  .navbar__icon-btn { width: 40px; height: 40px; }
}

/* ══════════════════════════════════════════════════════════════
   SMALL PHONES  ≤ 360px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .navbar__inner    { gap: .25rem; }
  .navbar__logo-img { height: 28px; }
  .navbar__cart     { width: 38px; height: 38px; font-size: .95rem; }
  .navbar__icon-btn { width: 36px; height: 36px; font-size: .875rem; }
}

/* ══════════════════════════════════════════════════════════════
   06  ANNOUNCEMENT BAR
   ══════════════════════════════════════════════════════════════ */

.announcement-bar { height: 32px; overflow: hidden; }
.ticker { font-size: .72rem; white-space: nowrap; }
@media (max-width: 480px) {
  .announcement-bar { height: 28px; }
  .ticker { font-size: .68rem; }
}


/* ══════════════════════════════════════════════════════════════
   07  FLASH MESSAGES
   ══════════════════════════════════════════════════════════════ */

.flash-container {
  top: calc(var(--nav-height) + 32px + .5rem);
  width: min(380px, calc(100vw - 1.5rem));
  right: .75rem; z-index: 600;
}
@media (max-width: 480px) {
  .flash-container { right: .5rem; left: .5rem; width: auto; }
}


/* ══════════════════════════════════════════════════════════════
   08  HOMEPAGE
   ══════════════════════════════════════════════════════════════ */

.hero-v2 { min-height: auto; }

@media (max-width: 860px) {
  .hero-v2__inner {
    grid-template-columns: 1fr !important;
    gap: 1.5rem; padding: 2rem 0 1.5rem;
  }
  .hero-card { display: none; }
  .hero-v2__title { font-size: clamp(1.55rem, 5.5vw, 2.4rem); }
  .hero-v2__stats { flex-wrap: wrap; gap: 1rem; }
}
@media (max-width: 480px) {
  .hero-v2__inner  { padding: 1.5rem 0 1rem; }
  .hero-v2__title  { font-size: clamp(1.4rem, 7vw, 1.75rem); }
  .hero-v2__sub    { font-size: .875rem; margin-bottom: 1.25rem; }
  .hero-v2__actions { flex-direction: column; gap: .625rem; align-items: stretch; }
  .hero-v2__actions .btn--lg,
  .hero-v2__actions a[style] {
    width: 100%; text-align: center !important;
    justify-content: center !important; display: flex !important;
  }
  .hero-v2__stats { gap: .875rem; padding-top: 1rem; }
  .hero-v2__stat strong { font-size: 1.1rem; }
}

/* Trust bar — no wrap, horizontal scroll */
.trust-bar__inner {
  overflow-x: auto; flex-wrap: nowrap;
  justify-content: flex-start;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.trust-bar__inner::-webkit-scrollbar { display: none; }
@media (max-width: 640px) {
  .trust-item { padding: .55rem .8rem; font-size: .74rem; white-space: nowrap; flex-shrink: 0; }
}

.cat-row { -webkit-overflow-scrolling: touch; }
@media (max-width: 480px) {
  .cat-pill { min-width: 80px; padding: .75rem .65rem; }
  .cat-pill__icon { font-size: 1.5rem; }
  .cat-pill__name { font-size: .68rem; }
}

.sec-hd { flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
@media (max-width: 480px) { .sec-hd h2 { font-size: 1.2rem; } }

@media (max-width: 540px) {
  .seller-grid-home { grid-template-columns: repeat(2,1fr) !important; gap: .75rem; }
}
@media (max-width: 600px) {
  .promo { flex-direction: column; text-align: center; padding: 1.5rem 1.25rem; }
  .promo h3 { font-size: 1.2rem; }
  .promo .btn { align-self: center; }
}


/* ══════════════════════════════════════════════════════════════
   09  SHOP — SIDEBAR DRAWER + TOOLBAR
   ══════════════════════════════════════════════════════════════ */

.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.4); z-index: 999;
}
.sidebar-overlay.show { display: block; animation: ov-in .2s ease; }

@media (max-width: 900px) {
  .shop-wrap, .shop-layout { grid-template-columns: 1fr !important; }
  .shop-sidebar {
    position: fixed; left: -105%; top: 0;
    height: 100dvh; height: 100vh;
    width: min(290px, 88vw);
    z-index: 1000; border-radius: 0; max-height: 100%;
    transition: left .3s cubic-bezier(.4,0,.2,1); box-shadow: none;
  }
  .shop-sidebar.open { left: 0; box-shadow: 4px 0 32px rgba(0,0,0,.2); }
  .sidebar-close      { display: block !important; }
  .toolbar-filter-btn { display: flex  !important; }
}
@media (max-width: 480px) {
  .shop-toolbar { padding: .5rem .75rem; flex-wrap: wrap; }
  .shop-count   { font-size: .78rem; }
  .toolbar-sort select { font-size: .8rem; padding: .4rem .6rem; }
}


/* ══════════════════════════════════════════════════════════════
   10  PRODUCT CARD GRID
   ══════════════════════════════════════════════════════════════ */

.product-grid { display: grid; gap: var(--card-gap); }

@media (min-width: 1025px)                       { .product-grid { grid-template-columns: repeat(4,1fr); } }
@media (min-width: 769px) and (max-width: 1024px){ .product-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 481px) and (max-width: 768px) { .product-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) {
  .product-grid { grid-template-columns: repeat(2,1fr); gap: .6rem; }
  .product-card__body { padding: .625rem; }
  .product-card__name { font-size: .82rem; }
  .product-card__price--current { font-size: .95rem; }
  .product-card__add .btn { font-size: .78rem; padding: .45rem .6rem; min-height: 40px; }
}


/* ══════════════════════════════════════════════════════════════
   11  PRODUCT DETAIL
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .pd-grid { grid-template-columns: 1fr !important; gap: 1.75rem; }
  .rating-overview { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  .pd-specs  { grid-template-columns: 1fr !important; }
  .pd-name   { font-size: 1.3rem !important; }
  .pd-price  { font-size: 1.7rem !important; }
  .pd-buy-box{ position: static !important; top: auto; }
  .gallery-thumbs { gap: .45rem; }
  .gallery-thumb  { width: 56px; height: 56px; }
  .qty-row   { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .pd-wrap   { padding: 1rem 0 2.5rem; }
  .pd-price  { font-size: 1.5rem !important; }
}


/* ══════════════════════════════════════════════════════════════
   12  CART
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr !important; gap: 1.25rem; padding: 1.25rem 0 2rem; }
  .cart-summary{ position: static !important; }
}
@media (max-width: 768px) {
  .cart-table-head  { display: none !important; }
  .cart-row {
    grid-template-columns: 1fr auto !important;
    gap: .625rem; padding: .875rem;
  }
  .cart-row__product  { grid-column: 1/2; min-width: 0; }
  .cart-row__qty      { grid-column: 1/2; justify-self: start; }
  .cart-row__remove   { grid-column: 2/3; grid-row: 1/3; align-self: center; }
  .cart-row__price, .cart-row__subtotal { display: none !important; }
  .cart-row__mobile-price { display: block !important; }
  .cart-row__img { width: 58px; height: 58px; }
  .cart-row__details h4 { max-width: none; }
}
@media (max-width: 480px) {
  .cart-actions { flex-direction: column; gap: .625rem; }
  .cart-actions .btn { width: 100%; justify-content: center; }
}


/* ══════════════════════════════════════════════════════════════
   13  CHECKOUT
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  .checkout-wrap {
    grid-template-columns: 1fr !important;
    gap: 1.25rem; padding: 1.25rem .25rem 3rem;
  }
  .order-summary { position: static !important; }
}
@media (max-width: 540px) {
  .form-row { grid-template-columns: 1fr !important; gap: .75rem; }
  .pay-methods { grid-template-columns: 1fr !important; }
  .pay-method {
    text-align: left; display: flex; align-items: center;
    gap: 1rem; padding: .875rem 1rem;
  }
  .pay-method__icon { font-size: 1.5rem; margin: 0; flex-shrink: 0; }
  .pay-method__check { top: 50%; right: .875rem; transform: translateY(-50%); }
}
@media (max-width: 480px) {
  input[style*="width:150px"] { width: 100% !important; }
}


/* ══════════════════════════════════════════════════════════════
   14  AUTH
   ══════════════════════════════════════════════════════════════ */

.auth-page { min-height: calc(100dvh - var(--nav-height) - 32px); padding: 1.5rem var(--cont-px); }
.auth-card { width: 100%; }

@media (max-width: 540px) {
  .auth-card {
    padding: 1.5rem 1.125rem !important;
    max-width: 100% !important;
  }
  .auth-card h1 { font-size: 1.3rem; }
  /* Register name row → single column */
  .auth-card [style*="grid-template-columns:1fr 1fr"],
  .auth-card [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   15  BUYER — DASHBOARD, ORDERS, ORDER DETAIL
   ══════════════════════════════════════════════════════════════ */

/* KPI grid: 3 cols inline → 2 on tablet, 1 on tiny */
@media (max-width: 768px) {
  .kpi-grid[style*="repeat(3,1fr)"],
  .kpi-grid[style*="repeat(3, 1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 400px) {
  .kpi-grid[style*="repeat(3,1fr)"],
  .kpi-grid[style*="repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
  .order-card__header { flex-wrap: wrap; gap: .5rem; }
  .order-card__footer { flex-wrap: wrap; gap: .5rem; }
  .order-card__footer .btn { flex: 1 1 calc(50% - .25rem); min-width: 110px; justify-content: center; }
}

/* Order detail: items/summary side-by-side → stacked */
@media (max-width: 640px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
}


/* ══════════════════════════════════════════════════════════════
   16  COMPANY — DASHBOARD, PROFILE, ORDERS, PRODUCTS
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Seller dashboard stacks */
  .dashboard {
    grid-template-columns: 1fr !important;
    padding: .75rem 0 2rem; gap: 0;
  }
  /* Sidebar → sticky horizontal tab strip */
  .dashboard__sidebar {
    position: sticky; top: var(--nav-height); z-index: 100;
    background: var(--white);
    border-radius: 0 !important; border: none !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.08) !important;
    padding: 0 !important;
  }
  .sidebar-nav {
    display: flex !important; flex-direction: row !important;
    overflow-x: auto !important; overflow-y: visible !important;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding: 0 .5rem;
    border-radius: 0 !important; border: none !important; box-shadow: none !important;
  }
  .sidebar-nav::-webkit-scrollbar { display: none; }
  .sidebar-nav__link {
    flex-shrink: 0 !important; white-space: nowrap;
    border-left: none !important; border-bottom: 3px solid transparent !important;
    padding: .7rem .9rem !important; border-radius: 0 !important;
    font-size: .82rem !important; min-height: 44px;
  }
  .sidebar-nav__link.active {
    border-left-color: transparent !important;
    border-bottom-color: var(--primary) !important;
    background: rgba(200,119,58,.08) !important;
  }
  .sidebar-brand, .sidebar-section, .sidebar-nav hr { display: none !important; }
}

/* Company view_profile */
@media (max-width: 768px) {
  .cp-grid { grid-template-columns: 1fr !important; }
  .cp-banner { height: 140px !important; }
  .cp-logo   { width: 70px !important; height: 70px !important; top: -35px !important; }
  .cp-actions { flex-wrap: wrap; gap: .5rem; }
  .cp-actions .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
}

/* Company products search */
@media (max-width: 640px) {
  .form-control[style*="max-width:280px"],
  .form-control[style*="max-width:260px"] { max-width: 100% !important; width: 100% !important; }
}


/* ══════════════════════════════════════════════════════════════
   17  ADMIN PAGES
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .stats-grid, .kpi-grid, .kpi-grid--wide { grid-template-columns: repeat(2,1fr) !important; }
  .chart-row { grid-template-columns: 1fr !important; }
}
@media (max-width: 360px) {
  .stats-grid, .kpi-grid, .kpi-grid--wide { grid-template-columns: 1fr !important; }
}

/* Admin filter inputs remove fixed widths on small screens */
@media (max-width: 640px) {
  .form-control[style*="max-width:260px"],
  .form-control[style*="max-width:240px"],
  .form-control[style*="max-width:200px"],
  .form-control[style*="max-width:160px"] { max-width: 100% !important; width: 100% !important; }
  th[style*="min-width:200px"] { min-width: 100px !important; }
}

/* Data tables scroll */
@media (max-width: 768px) {
  .data-table-wrap, .pm-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-sm);
  }
  .data-table { min-width: 560px; }
}

/* 3-col metric grid in delivery-partners */
@media (max-width: 480px) {
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: repeat(2,1fr) !important; }
}

/* Order confirm modal */
@media (max-width: 480px) {
  [style*="max-width:360px"] { max-width: calc(100vw - 2rem) !important; }
}


/* ══════════════════════════════════════════════════════════════
   18  DELIVERY APP
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .delivery-app { padding-bottom: 100px; }
  .order-card--delivery { padding: .875rem; }
}


/* ══════════════════════════════════════════════════════════════
   19  MESSAGES / CHAT
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .chat-page { grid-template-columns: 1fr !important; height: auto !important; }
  .chat-sidebar { display: none; }
  .chat-main { height: calc(100dvh - var(--nav-height) - 32px); }
  .chat-bubble { max-width: 88%; }
}
@media (max-width: 480px) {
  .thread-messages { max-height: 55dvh; }
  .chat-input-area { padding: .625rem; }
}


/* ══════════════════════════════════════════════════════════════
   20  SELLERS PAGE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .seller-grid, .seller-grid--large { grid-template-columns: repeat(2,1fr) !important; }
  .sell-cta__inner { flex-direction: column; text-align: center; gap: 1rem; }
}
@media (max-width: 540px) {
  .seller-grid, .seller-grid--large { grid-template-columns: 1fr !important; }
  .filter-bar { flex-direction: column !important; align-items: stretch !important; }
  .filter-bar .form-control,
  .filter-bar select { max-width: 100% !important; width: 100%; }
}


/* ══════════════════════════════════════════════════════════════
   21  ORDER TRACKING
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  .track-container { grid-template-columns: 1fr !important; gap: 1rem; }
}
@media (max-width: 480px) {
  .progress-step__label {
    font-size: .58rem; max-width: 46px;
    word-break: break-word; text-align: center;
  }
  .progress-step__dot { width: 26px; height: 26px; font-size: .65rem; }
  .progress-track { left: 12px; right: 12px; }
  .timeline-card, .info-card, .track-header-card { padding: 1rem !important; }
}


/* ══════════════════════════════════════════════════════════════
   22  ABOUT
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .about-story__grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .values-grid       { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 480px) {
  .values-grid { grid-template-columns: 1fr !important; }
}


/* ══════════════════════════════════════════════════════════════
   23  CONTACT
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .contact-form-card { padding: 1.5rem 1rem !important; }
}


/* ══════════════════════════════════════════════════════════════
   24  FOOTER
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .footer__grid { grid-template-columns: 1fr 1fr !important; gap: 2rem; }
}
@media (max-width: 640px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem; row-gap: 2rem;
  }
  .footer__grid > div:first-child { grid-column: 1/-1; }
  .footer__tagline { max-width: 100%; }
}
@media (max-width: 380px) {
  .footer__grid { grid-template-columns: 1fr !important; }
  .footer__grid > div:first-child { grid-column: auto; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: .5rem; }
}
@media (max-width: 480px) {
  .footer { padding-top: 2rem; }
  .footer__brand { font-size: 1.15rem; }
  .footer__link  { font-size: .82rem; margin-bottom: .5rem; }
  .footer__bottom { font-size: .75rem; }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  footer.footer { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
  .navbar { padding-top: env(safe-area-inset-top); }
}


/* ══════════════════════════════════════════════════════════════
   25  TOUCH & ACCESSIBILITY
   ══════════════════════════════════════════════════════════════ */

/* Minimum 44px tap targets */
.btn, .navbar__link, .navbar__icon-btn, .navbar__cart,
.cat-pill, .flash__close, .qty-ctrl button,
input[type="submit"], input[type="button"] { min-height: 44px; }
.btn--xs { min-height: 32px; }
.btn--sm { min-height: 40px; }

/* Larger tap areas on touch devices */
@media (hover: none) and (pointer: coarse) {
  .product-card__add .btn { min-height: 44px; }
  .qty-ctrl button { padding: .5rem .875rem; }
  .qty-ctrl input  { width: 44px; height: 44px; }
}

/* Remove iOS blue tap highlight */
a, button, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

/* Focus rings */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Smooth momentum scrolling in containers */
.cat-row, .color-swatches, .chat-messages,
.thread-messages, .sidebar-nav, .data-table-wrap {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Float chat button — compress on tiny screens */
@media (max-width: 480px) {
  .float-chat-btn { bottom: 1rem; right: 1rem; padding: .625rem .9rem; font-size: .8rem; }
}


/* ══════════════════════════════════════════════════════════════
   26  UTILITY HELPERS
   ══════════════════════════════════════════════════════════════ */

.show-mobile { display: none !important; }

@media (max-width: 768px) {
  .hide-mobile { display: none  !important; }
  .show-mobile { display: block !important; }
}
@media (max-width: 1024px) {
  .hide-desktop { display: none !important; }
}

/* Horizontal scroll strip */
.scroll-row {
  display: flex; gap: .75rem; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: .5rem;
}
.scroll-row::-webkit-scrollbar { display: none; }
.scroll-row > * { flex-shrink: 0; }

@media (max-width: 480px) {
  .text-center-mobile { text-align: center !important; }
}