/* ============================================================
   mobile.css — Comprehensive mobile-first responsive layer
   Load AFTER all other CSS files (overrides desktop styles)

   Breakpoints (mobile-first):
     ≤1024px  Tablet (3-col → 2-col grids, hide topbar pills)
     ≤900px   Tablet/large phone (hamburger menu, stack header)
     ≤640px   Phone (single column, tight spacing)
     ≤380px   Small phone (max tighten)
   ============================================================ */

/* ============ GLOBAL — applies everywhere ============ */

* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

html, body {
  overflow-x: hidden;   /* never horizontal scroll */
  -webkit-text-size-adjust: 100%;
}

a, button, .btn, .icon-btn, .nav-link, .nav-mobile-link {
  -webkit-touch-callout: none;
}

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

/* ============ HAMBURGER button (hidden desktop, show ≤900px) ============ */
.hamburger {
  display: none;
  background: transparent;
  border: 0;
  width: 44px; height: 44px;
  padding: 0;
  cursor: pointer;
  position: relative;
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.hamburger-icon, .hamburger-icon::before, .hamburger-icon::after {
  content: '';
  display: block;
  width: 22px; height: 2px;
  background: var(--ink-900);
  border-radius: 2px;
  transition: transform .25s ease, top .25s ease, opacity .15s;
  position: absolute;
}
.hamburger-icon { position: relative; top: 0; }
.hamburger-icon::before { top: -7px; }
.hamburger-icon::after  { top:  7px; }

.hamburger[aria-expanded="true"] .hamburger-icon { background: transparent; }
.hamburger[aria-expanded="true"] .hamburger-icon::before { top: 0; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger-icon::after  { top: 0; transform: rotate(-45deg); }

/* ============ MOBILE NAV drawer (slides from right) ============ */
.nav-mobile {
  position: fixed;
  top: 0; right: 0;
  width: 86%; max-width: 360px;
  height: 100vh; height: 100dvh;
  background: var(--ivory);
  z-index: 199;
  padding: 80px 24px 32px;
  box-shadow: -8px 0 32px rgba(0,0,0,.08);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.nav-mobile.is-open { transform: translateX(0); }

.nav-mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 198;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.nav-mobile-backdrop.is-open { opacity: 1; pointer-events: auto; }

.nav-mobile-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 8px;
  font-size: 16px;
  color: var(--ink-900);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-100, rgba(0,0,0,.06));
  font-weight: 500;
}
.nav-mobile-link:active { background: var(--mint-50); }
.nav-mobile-link.is-active { color: var(--mint-900); font-weight: 600; }
.nav-mobile-link.is-active::before { content: '◆'; color: var(--gold); font-size: 10px; margin-right: 2px; }

.nav-mobile-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-200, rgba(0,0,0,.08));
}
.nav-mobile-label {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-500, #8c8678);
  font-weight: 600;
  margin-bottom: 8px;
  padding-left: 8px;
}

body.nav-locked { overflow: hidden; }

/* ============ ≤1024px — Tablet adjustments ============ */
@media (max-width: 1024px) {
  .container { padding: 0 20px; }

  /* Topbar 2 pills → just 1 (compact) */
  .topbar-pill + .topbar-pill { display: none; }

  /* Hero: smaller text */
  .hero-title { font-size: 40px !important; line-height: 1.05; }
  .hero-sub { font-size: 16px !important; }

  /* Product grids: 3 cols → 2 cols (already in home.css for ≤960, mirror here) */
  .product-grid, .pcard-grid, .pgrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* Footer 4 cols → 2 cols */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
}

/* ============ ≤900px — Hamburger kicks in ============ */
@media (max-width: 900px) {
  /* Hide desktop nav, show hamburger */
  .nav-main { display: none !important; }
  .hamburger { display: inline-flex !important; }

  /* Compact header layout */
  .header-main {
    grid-template-columns: 1fr auto !important;
    padding: 14px 0 !important;
    gap: 12px !important;
  }
  .header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .lang-switch { display: none !important; } /* move into mobile drawer */
  .header-actions .icon-btn:not(:first-child) { display: none; } /* keep search icon only */

  /* Smaller logo */
  .logo img { width: 40px !important; height: 40px !important; }
  .logo-name { font-size: 18px !important; }
  .logo-tag { font-size: 9px !important; letter-spacing: .18em !important; }

  /* Topbar tighter */
  .topbar { font-size: 11px; padding: 6px 0; }
  .topbar-inner { justify-content: center; }
}

/* ============================================================
   HOME PAGE — Aggressive override inline styles trên mobile
   ============================================================ */
@media (max-width: 768px) {
  /* Hero section: bỏ blob giant + padding lớn */
  .hero {
    padding: 16px 0 24px !important;
  }
  .hero-blob { display: none !important; }

  /* Hero poster: nhỏ lại, border-radius vừa phải */
  .hero-poster-wrap {
    margin-bottom: 20px !important;
    border-radius: 18px !important;
  }
  .hero-poster-wrap img {
    border-radius: 18px !important;
  }
  .hero-corner-tl, .hero-corner-br {
    top: 10px !important; left: 10px !important;
    bottom: auto;
    padding: 4px 10px !important;
    font-size: 10px !important;
  }
  .hero-corner-br {
    top: auto !important;
    bottom: 10px !important; right: 10px !important;
    left: auto !important;
    padding: 6px 10px !important;
  }
  .hero-corner-br > div > div:first-child { font-size: 8px !important; letter-spacing: .1em !important; }
  .hero-corner-br > div > div:last-child  { font-size: 11px !important; }
  .hero-corner-br > span { font-size: 16px !important; }

  /* Hero text grid: bỏ 2-col 1.1fr 1fr, ép xuống 1 col */
  .hero .container > div[style*="grid-template-columns:1.1fr"],
  .hero .container > div[style*="grid-template-columns: 1.1fr"] {
    display: block !important;
    gap: 16px !important;
  }
  .hero .container > div[style*="grid-template-columns:1.1fr"] > div + div,
  .hero .container > div[style*="grid-template-columns: 1.1fr"] > div + div {
    margin-top: 20px;
  }

  /* Hero title responsive */
  .hero-title {
    font-size: 32px !important;
    line-height: 1.08 !important;
    margin: 14px 0 0 !important;
    letter-spacing: -.015em !important;
  }
  .hero-eyebrow {
    font-size: 10px !important;
    padding: 5px 12px !important;
    letter-spacing: .08em !important;
  }

  /* Hero paragraph + buttons */
  .hero .container p[style*="font-size:16px"],
  .hero .container p[style*="font-size: 16px"] {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  .hero .container p strong[style*="font-size:18px"],
  .hero .container p strong[style*="font-size: 18px"] {
    font-size: 16px !important;
  }

  /* Hero buttons row: stack vertical */
  .hero .container .btn-pill {
    width: 100%;
    justify-content: center;
    padding: 12px 20px !important;
  }
  .hero div[style*="display:flex"][style*="gap:12px"][style*="flex-wrap:wrap"] {
    flex-direction: column !important;
    width: 100%;
  }

  /* Trust row: stack vertical */
  .hero-trust-row {
    flex-direction: column !important;
    gap: 12px !important;
    padding-top: 16px !important;
  }
  .hero-trust-item {
    width: 100%;
  }

  /* SEARCH BAND */
  .search-band {
    border-radius: 16px !important;
    padding: 12px !important;
  }
  .search-input {
    flex: 1 1 100%;
    padding: 10px 14px !important;
    font-size: 15px !important;
  }
  .search-input input {
    font-size: 16px !important; /* tránh iOS zoom */
  }
  .search-tags {
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }
  .search-tag {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  /* Section + container generic */
  .section { padding: 32px 0 !important; }
  section[style*="padding"][style*="0"] { padding-top: 24px !important; padding-bottom: 24px !important; }
  .section-title { font-size: 26px !important; line-height: 1.15 !important; }
  .section-eyebrow { font-size: 10px !important; letter-spacing: .14em !important; }

  /* Category pills row scrollable horizontal */
  .cat-pills, .category-pills {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    flex-wrap: nowrap !important;
  }
  .cat-pill {
    flex-shrink: 0;
    font-size: 12px !important;
  }
}

@media (max-width: 480px) {
  .hero-title { font-size: 26px !important; }
  .section-title { font-size: 22px !important; }
}

/* ============ ≤640px — Phone ============ */
@media (max-width: 640px) {
  .container { padding: 0 16px; }

  /* Topbar single text + truncate */
  .topbar-pill {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
  }

  /* Logo even smaller */
  .logo img { width: 36px !important; height: 36px !important; }
  .logo-name { font-size: 16px !important; }
  .logo-tag { display: none !important; }

  /* Hero typography mobile-friendly */
  .hero-title { font-size: 32px !important; }
  .hero-sub { font-size: 14px !important; }
  .hero, .hero-section { padding: 32px 0 !important; }

  /* Section spacing */
  section, .section { padding: 32px 0 !important; }
  .section-title { font-size: 24px !important; }

  /* Grids → single column */
  .product-grid, .pcard-grid, .pgrid,
  .post-grid, .blog-grid, .article-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Cards larger touch + readable on mobile */
  .pcard, .product-card, .post-card, .art-card {
    border-radius: 18px !important;
  }
  .pcard-img { aspect-ratio: 4/5 !important; }
  .pcard-title { font-size: 15px !important; line-height: 1.35 !important; }
  .pcard-meta, .pcard-brand { font-size: 11px !important; }
  .pcard-price { font-size: 18px !important; }

  /* Buttons full-width on phone */
  .btn:not(.btn-inline):not(.icon-btn):not(.btn-pill) {
    width: 100% !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    justify-content: center;
  }

  /* Footer: 4 cols → 1 col */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .footer-col h4 {
    font-size: 13px !important;
    margin-bottom: 10px !important;
  }
  .footer-brand { font-size: 22px !important; }
  .footer-brand-sub { font-size: 13px !important; }
  .footer-socials a {
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Breadcrumbs tighter */
  .breadcrumbs { font-size: 11px !important; padding: 10px 0 !important; }

  /* Product detail page tweaks */
  .pd-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .pd-title { font-size: 28px !important; }
  .pd-price { font-size: 32px !important; }
  .pd-fact-grid { grid-template-columns: 1fr 1fr !important; }

  /* Article / post content */
  .article-body, .post-content { font-size: 16px !important; line-height: 1.7 !important; }
  .article-body h1, .post-content h1 { font-size: 26px !important; }
  .article-body h2, .post-content h2 { font-size: 22px !important; }
  .article-body h3, .post-content h3 { font-size: 18px !important; }
  .article-body img, .post-content img { border-radius: 12px !important; }

  /* Search box */
  .search-input, input[type=search], input[type=text], input[type=url], input[type=email] {
    font-size: 16px !important;  /* prevent iOS zoom */
    padding: 12px 14px !important;
  }

  /* Theme toggle button hide on mobile (clutter) */
  .theme-toggle { display: none !important; }
}

/* ============ ≤380px — Small phone ============ */
@media (max-width: 380px) {
  .container { padding: 0 12px; }

  .topbar { display: none; } /* completely hide */
  .logo-name { font-size: 15px !important; }
  .hero-title { font-size: 26px !important; }
  .section-title { font-size: 20px !important; }
  .pcard-price { font-size: 16px !important; }
  .pd-title { font-size: 24px !important; }
}

/* ============ ADMIN MOBILE (admin/* pages) ============ */

/* Mobile top bar (hide desktop, show ≤900px) */
.admin-mobile-bar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 100;
  background: #0a0a0f;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 10px 14px;
  align-items: center;
  gap: 12px;
  height: 56px;
}
.admin-mobile-btn {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: #e8e4dc;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  text-decoration: none;
}
.admin-mobile-btn:active { background: rgba(201,169,110,.15); }
.admin-mobile-icon, .admin-mobile-icon::before, .admin-mobile-icon::after {
  content: ''; display: block;
  width: 18px; height: 2px;
  background: #e8e4dc;
  border-radius: 2px;
  position: absolute;
  transition: transform .25s, top .25s, opacity .15s;
}
.admin-mobile-btn { position: relative; }
.admin-mobile-icon { position: relative; }
.admin-mobile-icon::before { top: -6px; }
.admin-mobile-icon::after  { top:  6px; }
.admin-mobile-btn[aria-expanded="true"] .admin-mobile-icon { background: transparent; }
.admin-mobile-btn[aria-expanded="true"] .admin-mobile-icon::before { top: 0; transform: rotate(45deg); }
.admin-mobile-btn[aria-expanded="true"] .admin-mobile-icon::after  { top: 0; transform: rotate(-45deg); }
.admin-mobile-title {
  flex: 1;
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  color: #e8e4dc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .admin-mobile-bar { display: flex !important; }

  /* Stack sidebar + main */
  .admin-shell {
    grid-template-columns: 1fr !important;
    display: block !important;
  }

  /* Sidebar → off-canvas drawer (slides from left) */
  .admin-aside {
    position: fixed !important;
    top: 56px; left: 0;
    width: 86%;
    max-width: 320px;
    height: calc(100vh - 56px); height: calc(100dvh - 56px);
    z-index: 99;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
    overflow-y: auto;
    padding: 20px 16px !important;
    box-shadow: 8px 0 32px rgba(0,0,0,.4);
    border-right: 1px solid rgba(255,255,255,.08) !important;
  }
  .admin-aside.is-open { transform: translateX(0); }

  /* Backdrop khi mở */
  body.admin-aside-open::before {
    content: '';
    position: fixed;
    inset: 56px 0 0 0;
    background: rgba(0,0,0,.5);
    z-index: 98;
  }
  body.admin-aside-open { overflow: hidden; }

  .admin-nav-item {
    padding: 12px 14px !important;
    font-size: 14px;
    min-height: 44px;
  }
  .admin-main { padding: 16px !important; }
  .admin-topbar {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  .admin-topbar h1 { font-size: 20px !important; }
  .admin-topbar p { font-size: 12px !important; }
  .admin-card {
    padding: 16px !important;
    border-radius: 12px !important;
    margin-bottom: 14px !important;
  }
  .admin-content { padding: 0 !important; }

  /* Admin tables → scrollable horizontal */
  .admin-table-wrapper, .admin-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
  }

  /* Char-refs grid → 2 cols on phone */
  #refs-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Forms on mobile (font-size: 16px tránh iOS zoom) */
  .admin-input, .admin-textarea, .admin-select {
    font-size: 16px !important;
    padding: 12px !important;
    width: 100%;
    box-sizing: border-box;
  }
  .admin-btn-gold, .admin-btn-ghost {
    width: 100%;
    padding: 12px 18px !important;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .admin-mobile-bar { padding: 8px 12px; height: 52px; }
  .admin-aside { top: 52px; height: calc(100vh - 52px); height: calc(100dvh - 52px); }
  body.admin-aside-open::before { top: 52px; }
  .admin-mobile-title { font-size: 13px; }
  .admin-topbar h1 { font-size: 18px !important; }
  #refs-grid { grid-template-columns: 1fr !important; }
}

/* ============ ACCESSIBILITY + UX polish ============ */

/* Larger tap targets for tiny links */
@media (max-width: 640px) {
  a, button, .icon-btn { min-height: 36px; }
  .icon-btn { min-width: 36px; }
  .nav-mobile-link { min-height: 48px; } /* WCAG 2.5.5 */
}

/* Focus visible (better keyboard nav on mobile keyboards too) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Reduce motion if user prefers */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Print friendly (PDF export of bài review) */
@media print {
  .site-header, .site-footer, .hamburger, .nav-mobile,
  .nav-mobile-backdrop, .theme-toggle { display: none !important; }
  body { background: white; }
}

/* ============================================================
   ADDITIONAL RESPONSIVE FIXES
   Covers: grids, home sections, article, about, comparison,
   product tabs, category, footer, search-band, inline-product
   ============================================================ */

/* ---- General utility grids (≤1024px) ---- */
@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 900px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* Article cards at tablet — ensure proper width + no broken word wrap */
  .art-card {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .art-card h3 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  .art-card p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .art-card-img {
    aspect-ratio: 16/10 !important;
  }

  /* Product detail — tab sidebar collapses */
  .pd-tab-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Article — hide TOC sidebar + share rail on tablet */
  .article-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 32px 24px 48px !important;
  }
  .toc { display: none !important; }
  .share-rail { display: none !important; }

  /* Homepage featured split (ảnh lớn + tiles "Đọc ngay") — gộp 1 cột, hết vỡ tiêu đề */
  .home-feature-split {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .home-feature-split h3 { font-size: 24px !important; line-height: 1.2 !important; }
  .home-feature-split h4 { font-size: 18px !important; line-height: 1.25 !important; word-break: normal !important; overflow-wrap: break-word !important; }
}

/* ---- Tablet portrait specifically (641-820px) — extra safety: art-card 2-col is OK but wider ---- */
@media (min-width: 641px) and (max-width: 820px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .art-card h3 { font-size: 17px !important; }
  .art-card p { font-size: 13px !important; }
}

/* ---- Search band ≤900px: stack vertically ---- */
@media (max-width: 900px) {
  .search-band {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 0 16px !important;
  }
  .search-tags {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* ---- ≤640px: all remaining page sections ---- */
@media (max-width: 640px) {

  /* General grids — extra-specific selectors to override any inline grid styles */
  .grid-4, .grid-3, .grid-2,
  div.grid-4, div.grid-3, div.grid-2,
  body .grid-4, body .grid-3, body .grid-2 {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    gap: 14px !important;
    display: grid !important;
  }

  /* Article cards on mobile — proper vertical stack with full-width image */
  .art-card, article.art-card {
    display: block !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }
  .art-card-img {
    width: 100% !important;
    aspect-ratio: 16/10 !important;
    height: auto !important;
  }
  .art-card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  /* Article card text — ensure full width readable */
  .art-card h3,
  .art-card > a > div > h3,
  .art-card > a > div {
    width: 100% !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  .art-card h3 {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
  .art-card p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* --- HOME — hero text columns --- */
  .hero-text-below {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* --- HOME — hero stats row --- */
  .hero-stats {
    gap: 20px !important;
    flex-wrap: wrap !important;
  }
  .hero-stat-num { font-size: 26px !important; }

  /* --- HOME — feature editorial (1.5fr 1fr → 1col) --- */
  .feature-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .feature-side {
    grid-template-rows: auto !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  /* --- HOME — trust strip (4 cols → 2 cols) --- */
  .trust-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  /* --- HOME — expert band (2 cols → 1 col) --- */
  .expert-band {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 28px 20px !important;
  }
  .expert-quote { font-size: 22px !important; }

  /* --- HOME — category pills compact --- */
  .cat-pills { gap: 8px !important; }
  .cat-pill { padding: 8px 14px !important; font-size: 12px !important; }

  /* --- HOME — section head stacks --- */
  .section-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* --- CATEGORY — hero title --- */
  .cat-hero-title { font-size: 30px !important; line-height: 1.1 !important; }
  .cat-hero-sub   { font-size: 14px !important; }
  .cat-hero-meta  { flex-wrap: wrap !important; gap: 10px !important; }

  /* --- ARTICLE / BLOG — hero typography --- */
  .art-h1 { font-size: 30px !important; line-height: 1.1 !important; letter-spacing: -.01em !important; }
  .art-dek { font-size: 16px !important; }
  .article-hero-inner { padding: 0 16px !important; }
  .article-wrap { padding: 24px 16px 40px !important; }

  /* Article meta bar wrap */
  .art-meta-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-top: 16px !important;
  }

  /* --- ARTICLE — inline product embed --- */
  .inline-product {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .inline-product-img { aspect-ratio: 16/9 !important; }

  /* --- ARTICLE — pros/cons box --- */
  .pros-cons-box {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 18px !important;
  }

  /* --- ARTICLE — callout stays 2-col but shrinks icon --- */
  .callout { padding: 16px !important; gap: 12px !important; }
  .callout-ic { width: 32px !important; height: 32px !important; flex-shrink: 0; }

  /* --- ABOUT page --- */
  .about-hero { padding: 40px 0 28px !important; }
  .about-h1   { font-size: 32px !important; line-height: 1.1 !important; }
  .about-sub  { font-size: 16px !important; }
  .about-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    padding: 20px 0 !important;
  }
  .about-stat-num   { font-size: 32px !important; }
  .experts-grid     { grid-template-columns: 1fr !important; }
  .process-num      { font-size: 36px !important; }

  /* --- COMPARISON table — horizontal scroll --- */
  .cmp-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .cmp-row { min-width: 540px; }

  /* --- PRODUCT detail — sticky CTA --- */
  .sticky-cta-inner { gap: 10px !important; }
  .sticky-cta-title { font-size: 13px !important; }
  .sticky-cta-price { font-size: 18px !important; }

  /* --- FOOTER — bottom bar stacks --- */
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
    align-items: center !important;
  }
  .footer-trust {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  /* --- FOOTER — newsletter pill: column on small --- */
  .footer-newsletter {
    flex-direction: column !important;
    border-radius: var(--radius) !important;
    padding: 8px !important;
    gap: 8px !important;
  }
  .footer-newsletter button {
    border-radius: 999px !important;
    width: 100%;
    padding: 10px 16px !important;
  }
}

/* ---- ≤380px: extra tightening ---- */
@media (max-width: 380px) {
  .about-h1     { font-size: 26px !important; }
  .art-h1       { font-size: 26px !important; }
  .expert-band  { padding: 20px 14px !important; }
  .trust-grid   { grid-template-columns: 1fr !important; }
  .about-stats  { grid-template-columns: 1fr !important; }
  .feature-side { grid-template-columns: 1fr !important; }
}

/* ============================================================
   ✨ MOBILE-APP UI PATTERNS (from design handoff folder)
   Auto-shown ≤640px, hidden ≥641px. Standalone class system.
   ============================================================ */

/* Hide mobile-app elements on desktop by default */
.m-promo-bar, .m-tabbar, .m-sticky-cta, .m-flash,
.m-carousel-wrap, .m-cats, .m-toast { display: none; }

/* Mobile-only show */
@media (max-width: 640px) {
  .m-promo-bar, .m-tabbar, .m-sticky-cta, .m-flash,
  .m-carousel-wrap, .m-cats { display: block; }
  .m-tabbar { display: flex; }
  .m-promo-bar { display: block; }

  /* Hide desktop helpers on mobile when mobile-app version is active */
  body.has-mobile-tabbar { padding-bottom: 70px; }  /* reserve space for tabbar */
}

/* ===== Promo marquee bar (top) ===== */
.m-promo-bar {
  background: var(--mint-900);
  color: var(--ivory);
  overflow: hidden;
  white-space: nowrap;
  padding: 8px 0;
  position: relative;
}
.m-promo-track {
  display: inline-flex;
  gap: 36px;
  animation: m-marquee 22s linear infinite;
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.m-promo-track span { display: inline-flex; align-items: center; gap: 8px; }
.m-promo-track .dot { color: var(--gold); }
@keyframes m-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ===== Flash sale card with countdown ===== */
.m-flash {
  margin: 18px 14px 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--mint-900), var(--mint-700));
  color: var(--ivory);
  padding: 20px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.m-flash::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(201,169,97,0.18);
}
.m-flash-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold-soft);
  margin-bottom: 8px;
}
.m-flash-title { font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1.2; margin-bottom: 4px; color: var(--ivory); }
.m-flash-sub { font-size: 12px; color: var(--mint-200); margin-bottom: 16px; }
.m-countdown { display: flex; gap: 8px; align-items: center; }
.m-cd-box {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
  min-width: 48px;
  backdrop-filter: blur(4px);
}
.m-cd-num { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.m-cd-label { font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint-200); margin-top: 4px; }
.m-cd-colon { font-size: 18px; font-weight: 700; opacity: 0.5; color: var(--ivory); }

/* ===== Horizontal product carousel ===== */
.m-carousel-wrap { padding: 0; }
.m-carousel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 24px 18px 14px;
}
.m-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint-700);
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
}
.m-section-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink-900);
}
.m-section-title .it { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--mint-700); }
.m-see-all { font-size: 12px; font-weight: 600; color: var(--mint-700); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; text-decoration: none; }
.m-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 18px 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.m-carousel::-webkit-scrollbar { display: none; }
.m-pcard {
  flex: 0 0 158px;
  scroll-snap-align: start;
  background: var(--ivory);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
  text-decoration: none;
  color: var(--ink-900);
  display: block;
}
.m-pcard:active { transform: scale(0.97); }
.m-pcard-img {
  aspect-ratio: 1;
  position: relative;
  background: var(--mint-50);
  overflow: hidden;
}
.m-pcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-pcard-tag {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--coral);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.m-pcard-body { padding: 10px 12px 12px; }
.m-pcard-brand { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint-700); font-weight: 700; margin-bottom: 4px; }
.m-pcard-name {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 500;
  margin-bottom: 6px;
  min-height: 32px;
  color: var(--ink-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.m-pcard-rating { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-500); margin-bottom: 6px; }
.m-pcard-rating .star { color: var(--gold); }
.m-pcard-price-new { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--mint-900); }
.m-pcard-price-old { font-size: 11px; text-decoration: line-through; color: var(--ink-300); margin-left: 6px; }

/* ===== Category chips row ===== */
.m-cats-head { margin: 24px 18px 14px; }
.m-cats {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 18px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.m-cats::-webkit-scrollbar { display: none; }
.m-cat {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 70px;
  text-decoration: none;
}
.m-cat-ic {
  width: 60px; height: 60px;
  border-radius: 18px;
  background: var(--mint-100);
  border: 1px solid var(--mint-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mint-700);
  font-size: 26px;
  transition: transform 0.2s;
}
.m-cat:active .m-cat-ic { transform: scale(0.92); }
.m-cat-label { font-size: 11px; color: var(--ink-700); text-align: center; font-weight: 500; line-height: 1.25; }

/* ===== Sticky bottom CTA (product detail page) ===== */
.m-sticky-cta {
  position: fixed;
  bottom: 56px; /* clear tabbar */
  left: 0; right: 0;
  background: rgba(251,248,243,0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--ink-200);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 40;
}
.m-sticky-info { flex: 1; min-width: 0; }
.m-sticky-label { font-size: 10px; color: var(--ink-500); letter-spacing: 0.04em; }
.m-sticky-price { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--mint-900); line-height: 1.1; }
.m-sticky-price small { font-size: 12px; color: var(--ink-300); text-decoration: line-through; font-weight: 400; margin-left: 6px; }
.m-cta-btn {
  flex: 1.2;
  background: var(--gold);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 13px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(201,169,97,0.4);
  text-decoration: none;
}
.m-cta-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-20deg);
  animation: m-shine 3s ease-in-out infinite;
}
@keyframes m-shine {
  0% { left: -60%; }
  50%, 100% { left: 140%; }
}

/* ===== Bottom tabbar ===== */
.m-tabbar {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  background: rgba(251,248,243,0.97);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--ink-200);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  z-index: 50;
}
.m-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--ink-300);
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.m-tab:hover, .m-tab:focus { color: var(--mint-700); }
.m-tab.is-on { color: var(--mint-900); }
.m-tab.is-on::after {
  content: '';
  position: absolute;
  bottom: 2px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--mint-900);
}
.m-tab-ic { font-size: 20px; line-height: 1; }

/* ===== Mobile section padding for index ===== */
@media (max-width: 640px) {
  /* When mobile sections are rendered, reduce padding around desktop sections */
  body.has-mobile-tabbar .section,
  body.has-mobile-tabbar .container { padding-bottom: 12px; }

  /* Improve mobile hero compactness */
  body.has-mobile-tabbar .hero { padding: 18px 0 24px !important; }
  body.has-mobile-tabbar .hero-corner-tl,
  body.has-mobile-tabbar .hero-corner-br { display: none; }

  /* Existing product detail sticky CTA — clear bottom tabbar */
  body.has-mobile-tabbar .pd-sticky-cta {
    bottom: 64px !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,.06) !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  }

  /* Existing compare cart button — clear tabbar */
  body.has-mobile-tabbar .compare-cart-btn,
  body.has-mobile-tabbar .compare-fab {
    bottom: 70px !important;
  }

  /* Existing floating banner — clear tabbar */
  body.has-mobile-tabbar .floating-banner,
  body.has-mobile-tabbar .banner-floating {
    bottom: 70px !important;
  }

  /* Hide marquee promo if loaded on listing/article pages (only show on home) */
  body.page-product .m-promo-bar,
  body.page-blog .m-promo-bar,
  body.page-category .m-promo-bar { display: none; }
}