/* ══════════════════════════════════════════════════════════════════
   Wisoma UI — app-wide design layer
   Loaded after the theme block in base.html, so it refines every page:
   cool neutral surfaces, a light top bar and sidebar, calmer components,
   and motion only where it explains something.
   ══════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────── */
:root,
[data-theme="light"] {
  --bg:            #F4F5F7;
  --surface:       #FFFFFF;
  --surface-2:     #F7F8FA;
  --surface-3:     #EEF0F3;
  --border:        #E3E6EB;
  --border-strong: #C9CED6;
  --text:          #111827;
  --text-soft:     #374151;
  --text-muted:    #6B7280;
  --shadow:        0 1px 2px rgba(17,24,39,.04);
  --shadow-md:     0 8px 24px rgba(17,24,39,.08), 0 2px 6px rgba(17,24,39,.04);
  --scrollbar-thumb: #C9CED6;
  --wash-2:        #F4F5F7;
  --ring:          0 0 0 3px rgba(232,101,10,.22);
  --radius:        8px;
  --radius-lg:     12px;
  --nav-h:         60px;
  --sidebar-w:     248px;
  --ease:          cubic-bezier(.2,.8,.2,1);
}
[data-theme="dark"] {
  --bg:            #0E1116;
  --surface:       #151A21;
  --surface-2:     #1B212A;
  --surface-3:     #222935;
  --border:        #2A313C;
  --border-strong: #3A4352;
  --text:          #E8ECF1;
  --text-soft:     #BAC3CF;
  --text-muted:    #8A95A5;
  --shadow:        0 1px 2px rgba(0,0,0,.3);
  --shadow-md:     0 10px 30px rgba(0,0,0,.45);
  --ring:          0 0 0 3px rgba(232,101,10,.35);
}

/* ── Base ───────────────────────────────────────────────────────── */
/* The old rule animated colour changes on EVERY element, which made the
   whole app feel sluggish. Transitions now live on interactive parts only. */
*, *::before, *::after { transition: none; }
html.theme-anim, html.theme-anim *, html.theme-anim *::before {
  transition: background-color .25s ease, color .2s ease, border-color .2s ease !important;
}
body { font-size: 15px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -.015em; }
a { transition: color .15s ease; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }
::selection { background: rgba(232,101,10,.2); }

/* ── Top bar ────────────────────────────────────────────────────── */
.navbar.topbar {
  background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
  -webkit-backdrop-filter: saturate(160%) blur(10px);
          backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: none; padding: 0; height: var(--nav-h);
}
.topbar-inner { display: flex; align-items: center; gap: .75rem; height: 100%; width: 100%; padding: 0 1rem; }
.topbar .navbar-brand { display: flex; align-items: center; gap: .55rem; margin: 0; padding: 0; color: var(--text) !important; font-weight: 800; font-size: 1rem; }
.topbar .navbar-brand img { height: 32px; width: auto; border-radius: 8px; object-fit: contain; }
.topbar .navbar-brand span { color: var(--text); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-links { display: flex; gap: .15rem; list-style: none; margin: 0 0 0 .75rem; padding: 0; }
.tb-links a { display: block; padding: .45rem .75rem; border-radius: 8px; color: var(--text-soft); font-weight: 600; font-size: .9rem; }
.tb-links a:hover { background: var(--surface-3); color: var(--text); }
.tb-right { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.tb-icon-btn { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: var(--text-soft); font-size: 1.1rem; cursor: pointer;
  transition: background .15s ease, color .15s ease; }
.tb-icon-btn:hover { background: var(--surface-3); color: var(--text); }
.tb-dot { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--brand); color: #fff; font-size: .62rem; font-weight: 800; display: inline-grid; place-items: center; line-height: 1; }
.tb-btn { display: inline-flex; align-items: center; gap: .4rem; height: 38px; padding: 0 .9rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 700; font-size: .875rem;
  white-space: nowrap; transition: background .15s ease, border-color .15s ease; }
.tb-btn:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.tb-btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.tb-btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.tb-search { display: flex; align-items: center; gap: .6rem; height: 38px; min-width: 0; flex: 0 1 420px; margin-left: .5rem;
  padding: 0 .75rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted);
  font-size: .9rem; cursor: text; transition: border-color .15s ease, background .15s ease; }
.tb-search:hover { border-color: var(--border-strong); background: var(--surface); }
.tb-search span { flex: 1; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tb-search kbd { font: 600 .68rem 'Plus Jakarta Sans', sans-serif; color: var(--text-muted); background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px; padding: .1rem .4rem; box-shadow: none; }
.tb-user { display: flex; align-items: center; gap: .5rem; height: 40px; padding: 0 .5rem 0 .25rem; border-radius: 999px;
  border: 1px solid transparent; background: transparent; color: var(--text); font-weight: 700; font-size: .875rem; cursor: pointer; }
.tb-user:hover, .tb-user[aria-expanded="true"] { background: var(--surface-3); }
.tb-user .bi-chevron-down { font-size: .7rem; color: var(--text-muted); }
.tb-user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-avatar { width: 32px; height: 32px; font-size: .82rem; background: var(--navy); }
[data-theme="dark"] .user-avatar { background: var(--brand); }
.tb-impersonate { display: inline-flex; gap: .4rem; align-items: center; background: var(--tint-warning); color: var(--fg-warning);
  font-size: .75rem; font-weight: 800; padding: .25rem .6rem; border-radius: 999px; white-space: nowrap; }
.tb-impersonate a { color: inherit; font-weight: 900; }

/* Two modes: workspace pages vs public pages */
body.public-body .tb-app { display: none !important; }
body:not(.public-body) .tb-public { display: none !important; }
body:not(.public-body) .whatsapp-float, body:not(.public-body) .whatsapp-tooltip { display: none !important; }

@media (max-width: 1100px) { .tb-links a { padding: .45rem .55rem; font-size: .85rem; } }
@media (max-width: 991.98px) {
  .tb-links, .tb-user-name, .tb-user .bi-chevron-down { display: none; }
  .tb-search { flex: 1 1 auto; margin-left: 0; }
  .tb-search kbd { display: none; }
}
@media (max-width: 575.98px) {
  .topbar-inner { gap: .4rem; padding: 0 .6rem; }
  .topbar .navbar-brand span { display: none; }
  .tb-hide-xs { display: none !important; }
  body:not(.public-body) .topbar .navbar-brand { display: none; }
}

/* ── Dropdowns ──────────────────────────────────────────────────── */
.dropdown-menu { border-radius: 12px; padding: .4rem; min-width: 220px; box-shadow: var(--shadow-md);
  animation: ui-pop .14s var(--ease); }
.dropdown-header { font-size: .75rem; color: var(--text-muted); padding: .4rem .7rem .5rem; }
.dropdown-item { display: flex; align-items: center; gap: .6rem; border-radius: 8px; padding: .5rem .7rem; font-weight: 600; color: var(--text-soft); }
.dropdown-item i { width: 18px; color: var(--text-muted); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-3); color: var(--text); }
.dropdown-item.text-danger, .dropdown-item.text-danger i { color: var(--danger) !important; }
@keyframes ui-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* ── Sidebar ────────────────────────────────────────────────────── */
.sidebar {
  background: var(--surface); border-right: 1px solid var(--border);
  padding: 1rem .75rem 5rem; width: var(--sidebar-w);
  scrollbar-width: thin;
}
.sb-store { display: flex; align-items: center; gap: .7rem; padding: .35rem .5rem .6rem; }
.sb-store-mark { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-weight: 800; overflow: hidden; }
.sb-store-mark img { width: 100%; height: 100%; object-fit: cover; }
.sb-store-text { min-width: 0; }
.sb-store-name { font-weight: 800; font-size: .92rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-store-meta { font-size: .74rem; color: var(--text-muted); display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.sb-status { font-weight: 800; font-size: .66rem; padding: .05rem .4rem; border-radius: 999px; background: var(--tint-success); color: var(--fg-success); }
.sb-status-trial { background: var(--tint-warning); color: var(--fg-warning); }
.sb-status-suspended, .sb-status-cancelled { background: var(--tint-danger); color: var(--fg-danger); }
.sb-trial { display: block; margin: 0 .5rem .5rem; padding: .4rem .6rem; border-radius: 8px; font-size: .75rem; font-weight: 700;
  background: var(--tint-warning); color: var(--fg-warning); }
.sb-view-store { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: .2rem .5rem .9rem; padding: .45rem;
  border-radius: 9px; border: 1px solid var(--border); font-size: .8rem; font-weight: 700; color: var(--text-soft);
  transition: background .15s ease, border-color .15s ease; }
.sb-view-store:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.sb-primary { padding-bottom: .6rem; margin-bottom: .6rem; border-bottom: 1px solid var(--border); }

.sidebar-label { color: var(--text-muted); letter-spacing: .02em; text-transform: none; font-size: .74rem; padding: .6rem .6rem .25rem; }
.sidebar-link { color: var(--text-soft); font-weight: 600; font-size: .9rem; padding: .48rem .65rem; gap: .65rem;
  border-left: 0 !important; transition: background .12s ease, color .12s ease; }
.sidebar-link i { color: var(--text-muted); font-size: 1.02rem; transition: color .12s ease; }
.sidebar-link:hover { background: var(--surface-3); color: var(--text); }
.sidebar-link:hover i { color: var(--text-soft); }
.sidebar-link.active { background: var(--tint-brand); color: var(--fg-brand); font-weight: 700; padding-left: .65rem !important; }
.sidebar-link.active i { color: var(--brand); }
.sidebar-badge { background: var(--brand); font-size: .66rem; padding: 1px 7px; }
.sidebar-group-btn { color: var(--text-muted); text-transform: none; letter-spacing: 0; font-size: .78rem; font-weight: 700; padding: .55rem .65rem; }
.sidebar-group-btn:hover { background: transparent; color: var(--text); }
.sidebar-group[open] > .sidebar-group-btn { color: var(--text); }
.sidebar-group-body { padding-bottom: .35rem; }
.sidebar-group-body .sidebar-link { padding-left: .65rem; font-size: .88rem; }
.sidebar-group[open] > .sidebar-group-body { animation: ui-fold .18s var(--ease); }
@keyframes ui-fold { from { opacity: 0; transform: translateY(-3px); } }
.sb-foot { margin-top: .75rem; padding-top: .6rem; border-top: 1px solid var(--border); }
.sb-logout, .sb-logout i { color: var(--danger) !important; }
.sb-cta { color: var(--fg-brand) !important; }
.sb-cta i { color: var(--brand) !important; }

.main-content { padding: 1.75rem 2.25rem 3rem; max-width: 1480px; }
.sidebar-overlay { background: rgba(17,24,39,.4); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
@media (max-width: 992px) {
  .sidebar { box-shadow: none; transition: transform .26s var(--ease); }
  .sidebar.show { box-shadow: 8px 0 30px rgba(17,24,39,.18); }
  .main-content { padding: 1rem 1rem 6rem; }
}

/* ── Page header ───────────────────────────────────────────────── */
.page-header { border-bottom: 0; padding-bottom: 0; margin-bottom: 1.5rem; gap: 1rem; }
.page-header h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: .5rem; }
.page-header h1 > i:first-child { font-size: 1.25rem; color: var(--text-muted) !important; }
.page-header .breadcrumb { margin-bottom: .25rem; }

/* ── Cards ──────────────────────────────────────────────────────── */
.card { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.card-header { background: transparent; font-size: .95rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.card-footer { background: transparent; border-top: 1px solid var(--border); }
.stat-card { box-shadow: var(--shadow); border-left-width: 1px !important; }
.stat-card:hover { transform: none; box-shadow: var(--shadow-md); }
.stat-card .stat-label { text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 600; }
.stat-card .stat-value { font-size: 1.7rem; letter-spacing: -.02em; }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn { border-radius: 9px; font-weight: 700; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease; }
.btn:active { transform: translateY(1px); }
.btn-sm { border-radius: 8px; padding: .35rem .75rem; }
.btn-brand { box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.btn-brand:hover { transform: none; box-shadow: 0 4px 14px rgba(232,101,10,.28); }
.btn-outline-brand { border-width: 1.5px; }
.btn-surface { background: var(--surface); border-color: var(--border); color: var(--text-soft); }
.btn-surface:hover { background: var(--surface-2); color: var(--text); }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1.05em; height: 1.05em;
  border: 2px solid currentColor; border-color: rgba(255,255,255,.9) rgba(255,255,255,.9) transparent transparent;
  border-radius: 50%; animation: ui-spin .6s linear infinite; }
.btn-surface.is-loading::after, .btn-outline-brand.is-loading::after { border-color: var(--text-muted) var(--text-muted) transparent transparent; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ── Forms ──────────────────────────────────────────────────────── */
.form-control, .form-select { min-height: 42px; border-width: 1px; border-radius: 9px; font-size: .92rem; background-color: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease; }
.form-control-sm, .form-select-sm { min-height: 34px; border-radius: 8px; }
textarea.form-control { min-height: 0; }
.form-control:hover, .form-select:hover { border-color: var(--border-strong); }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: var(--ring); }
.form-label { font-size: .84rem; font-weight: 700; color: var(--text); }
.form-check-input { width: 1.1em; height: 1.1em; border-color: var(--border-strong); }
.form-check-input:focus { box-shadow: var(--ring); border-color: var(--brand); }
.form-switch .form-check-input { width: 2.2em; }
.invalid-feedback, .errorlist { font-size: .8rem; }

/* ── Tables ─────────────────────────────────────────────────────── */
.table { margin-bottom: 0; --bs-table-bg: transparent; }
.table thead th { background: var(--surface-2); text-transform: none; letter-spacing: 0; font-size: .78rem; font-weight: 700;
  color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.table tbody td { padding: .8rem 1rem; border-color: var(--border); }
.table tbody tr { transition: background-color .1s ease; }
.table tbody tr:hover { background: var(--surface-2); }
.table-responsive { border-radius: var(--radius-lg); }
.card .table thead th:first-child { border-top-left-radius: var(--radius-lg); }
.card .table thead th:last-child { border-top-right-radius: var(--radius-lg); }

/* ── Badges ─────────────────────────────────────────────────────── */
.badge-brand, .badge-surface, .badge-success, .badge-danger, .badge-warning, .badge-info, .badge-accent {
  border-radius: 999px; padding: .2rem .6rem; font-size: .72rem; font-weight: 700; line-height: 1.4; }
.badge-success { background: var(--tint-success); color: var(--fg-success); }
.badge-danger  { background: var(--tint-danger);  color: var(--fg-danger); }
.badge-warning { background: var(--tint-warning); color: var(--fg-warning); }
.badge-info    { background: var(--tint-info);    color: var(--fg-info); }
.badge-surface { background: var(--surface-3); border: 0; }

/* ── Alerts & toasts ────────────────────────────────────────────── */
.alert { border-radius: 10px; font-weight: 600; border-width: 1px; }
.flash-container { top: calc(var(--nav-h) + .75rem); right: 1rem; max-width: 420px; display: grid; gap: .5rem; }
.flash-container .alert { margin: 0 !important; display: flex; align-items: flex-start; gap: .25rem; padding: .8rem 2.6rem .8rem .9rem;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--info);
  box-shadow: var(--shadow-md); animation: ui-toast-in .28s var(--ease); }
.flash-container .alert-success { border-left-color: var(--success); }
.flash-container .alert-danger, .flash-container .alert-error { border-left-color: var(--danger); }
.flash-container .alert-warning { border-left-color: var(--warning); }
.flash-container .alert > i:first-child { margin-top: .1rem; }
.flash-container .alert-success > i:first-child { color: var(--success); }
.flash-container .alert-danger > i:first-child, .flash-container .alert-error > i:first-child { color: var(--danger); }
.flash-container .alert-warning > i:first-child { color: var(--warning); }
.flash-container .alert.is-leaving { animation: ui-toast-out .22s ease forwards; }
@keyframes ui-toast-in { from { opacity: 0; transform: translateX(16px); } }
@keyframes ui-toast-out { to { opacity: 0; transform: translateX(16px); } }

/* ── Pagination ─────────────────────────────────────────────────── */
.pagination { gap: .3rem; }
.pagination .page-link { border-radius: 8px !important; border: 1px solid var(--border); min-width: 36px; text-align: center; }

/* ── Navigation progress bar ────────────────────────────────────── */
.ui-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 2000; background: var(--brand);
  box-shadow: 0 0 8px rgba(232,101,10,.5); opacity: 0; transition: width .4s ease, opacity .3s ease; }
.ui-progress.run { opacity: 1; width: 70%; transition: width 6s cubic-bezier(.1,.6,.2,1), opacity .2s ease; }

/* ── Command palette ────────────────────────────────────────────── */
.palette-backdrop { position: fixed; inset: 0; z-index: 1990; background: rgba(17,24,39,.4);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: none; }
.palette-backdrop.open { display: block; animation: ui-fade .12s ease; }
.palette { position: fixed; z-index: 1991; left: 50%; top: 12vh; width: min(640px, calc(100vw - 2rem)); transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-md); display: none; overflow: hidden; }
.palette.open { display: block; animation: ui-pop .14s var(--ease); }
.palette-input { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border); }
.palette-input i { color: var(--text-muted); }
.palette-input input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 1rem; }
.palette-list { max-height: min(56vh, 440px); overflow-y: auto; padding: .4rem; margin: 0; list-style: none; }
.palette-group { font-size: .72rem; font-weight: 700; color: var(--text-muted); padding: .55rem .7rem .25rem; }
.palette-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 8px; color: var(--text-soft); font-weight: 600; cursor: pointer; }
.palette-item i { color: var(--text-muted); width: 18px; }
.palette-item.on { background: var(--tint-brand); color: var(--fg-brand); }
.palette-item.on i { color: var(--brand); }
.palette-empty { padding: 1.5rem; text-align: center; color: var(--text-muted); }
.palette-foot { display: flex; gap: 1rem; padding: .5rem 1rem; border-top: 1px solid var(--border); font-size: .74rem; color: var(--text-muted); }
@keyframes ui-fade { from { opacity: 0; } }

/* ── Phone tab bar (workspace) ──────────────────────────────────── */
.tabbar { display: none; }
@media (max-width: 767.98px) {
  body:not(.public-body) .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 1002; left: 0; right: 0; bottom: 0;
    background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a, .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .5rem 0 .45rem;
    background: none; border: 0; color: var(--text-muted); font-size: .68rem; font-weight: 700; }
  .tabbar i { font-size: 1.2rem; }
  .tabbar .on { color: var(--brand); }
  .tabbar b { position: absolute; top: .25rem; left: calc(50% + .35rem); background: var(--brand); color: #fff; font-size: .6rem;
    min-width: 16px; height: 16px; border-radius: 8px; display: grid; place-items: center; padding: 0 3px; }
  body:not(.public-body) .flash-container { top: auto; bottom: 76px; }
}

/* ── Page entrance ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .main-content > * { animation: ui-rise .28s var(--ease) both; }
}
@keyframes ui-rise { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ── Drawer (public phone menu) ─────────────────────────────────── */
.base-drawer { transition: transform .26s var(--ease); }

/* ── Product grids: small cards everywhere ─────────────────────── */
/* Columns are a fixed small size and fill the row; a wider screen shows
   more cards instead of bigger ones. Used by the marketplace, deals,
   flash sales, the shop list and "related products". */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 168px), 1fr)); gap: .75rem; }
.card-grid-item { min-width: 0; }
.card-grid-item > * { height: 100%; }
/* Phones: three small cards per row. Each card keeps only what helps a
   quick decision — picture, short name, price and one button. Extras
   (share buttons, platform labels, second buttons) come back on bigger
   screens and on the product page. */
@media (max-width: 575.98px) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
  .card-grid .pc-extra, .card-grid .pc-meta, .card-grid .product-platform,
  .card-grid .discount-badge, .card-grid .badge-accent, .card-grid .badge-brand,
  .card-grid .ghs-badge, .card-grid .badge-info,
  .card-grid .ec-platform-tag, .card-grid .ec-share-row, .card-grid .ec-price-saving,
  .card-grid .ec-badge-ghs, .card-grid .ec-wishlist-btn, .card-grid .flash-timer i { display: none !important; }
  .card-grid .product-card, .card-grid .ec-product-card { border-radius: 8px; }
  .card-grid img { font-size: .6rem; color: transparent; overflow: hidden; }  /* a missing picture never spills its description text */
  .card-grid .product-card:hover { transform: none; }
  .card-grid .product-body, .card-grid .product-card > .p-2 { padding: .35rem .4rem .45rem !important; }
  .card-grid .product-title, .card-grid .pc-name, .card-grid .ec-product-title {
    font-size: .68rem !important; line-height: 1.22 !important; font-weight: 700;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
  .card-grid .product-price, .card-grid .pc-price, .card-grid .ec-price { font-size: .78rem !important; }
  .card-grid .product-original, .card-grid .pc-was, .card-grid .ec-price-original { font-size: .58rem !important; margin-left: 0 !important; }
  .card-grid .btn-sm, .card-grid .ec-btn-buy { font-size: .64rem !important; padding: .3rem .15rem !important; border-radius: 6px; margin-top: .3rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card-grid .btn-sm i, .card-grid .ec-btn-buy i { display: none; }
  .card-grid .d-flex.gap-2 { gap: .25rem !important; }
  .card-grid .mt-2 { margin-top: .3rem !important; }
  .card-grid .deal-badge, .card-grid .ec-badge-deal, .card-grid .ec-badge-discount { font-size: .5rem !important; padding: 0 4px !important; top: 3px !important; left: 3px !important; }
  .card-grid .flash-timer { font-size: .6rem !important; margin-top: .2rem !important; }
  .card-grid .ec-product-body { padding: .35rem .4rem .45rem !important; }
  .card-grid .ec-price-row { margin-bottom: 0 !important; }
  /* Long filter rows scroll sideways instead of filling the screen. */
  .deals-filter-row { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .deals-filter-row::-webkit-scrollbar { display: none; }
  .deals-filter-row > * { flex: 0 0 auto; white-space: nowrap; }
}
/* Very narrow phones fall back to two per row. */
@media (max-width: 299.98px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card-grid .product-card .product-img { height: auto; aspect-ratio: 1; }
.card-grid .product-card .product-body { padding: .7rem .75rem .8rem; }
.card-grid .product-card h5, .card-grid .product-card h6, .card-grid .product-card .card-title { font-size: .86rem; }

/* ── Public pages: smooth scrolling and gentle motion ──────────── */
html { scroll-padding-top: calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.navbar.topbar.is-scrolled { box-shadow: 0 4px 18px rgba(17,24,39,.06); }
[data-reveal].rv-wait { opacity: 0; transform: translateY(14px); }
[data-reveal].rv-in { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease); }
img.img-wait { opacity: 0; }
img { transition: opacity .35s ease; }
.to-top { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 1020; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow-md);
  display: grid; place-items: center; font-size: 1.1rem; cursor: pointer; opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { border-color: var(--border-strong); }
body:has(.whatsapp-float) .to-top { bottom: 5.4rem; right: 1.6rem; }
@media (max-width: 575.98px) { body:has(.whatsapp-float) .to-top { bottom: 4.2rem; right: .9rem; width: 40px; height: 40px; } }
@media (max-width: 768px) {
  body:has(.st-mobile-bar) .to-top, body:has(.lp-sticky-cta) .to-top { bottom: 5rem; right: .9rem; }
}

/* ── Print ──────────────────────────────────────────────────────── */
@media print {
  .topbar, .sidebar, .tabbar, .flash-container, .whatsapp-float { display: none !important; }
  .main-content { margin: 0 !important; padding: 0 !important; }
}

.palette-input input:focus-visible { box-shadow: none; }