.nav-short{display:none}

@media(max-width:640px){
  :root{--mobile-accent:#2877f0;--mobile-accent-soft:#eaf3ff;--mobile-text:#17191c;--mobile-muted:#81868e;--mobile-line:#eceff3}
  html{scroll-padding-top:126px}
  body{background:#fff;color:var(--mobile-text)}

  .site-header{background:#fff;border-bottom:0;box-shadow:none;backdrop-filter:none}
  .site-header-inner{min-height:58px;gap:10px;border-bottom:1px solid var(--mobile-line)}
  .brand{flex:0 0 auto;gap:8px}
  .brand-mark{width:34px;height:34px;border-radius:11px;background:var(--mobile-accent)}
  .brand-mark svg{width:22px;height:22px}
  .brand-copy small{display:none}
  .brand-name{font-size:16px}
  .site-nav{min-width:0;flex:1;justify-content:flex-end;gap:13px}
  .site-nav a{font-size:12px;color:#5e6268}
  .site-nav .nav-primary{color:var(--mobile-accent)}
  .site-nav .nav-primary:after{display:none}

  .category-bar-wrap{background:var(--mobile-accent);border:0;box-shadow:0 1px 0 rgba(0,0,0,.03)}
  .category-bar-shell{width:100%;padding:0;gap:0;display:block}
  .category-label{display:none}
  .top-category-nav{display:flex;width:100%;gap:0;overflow-x:auto;scrollbar-width:none;padding:0 8px;scroll-snap-type:x proximity}
  .top-category-nav::-webkit-scrollbar{display:none}
  .top-category-btn{flex:0 0 auto;position:relative;border:0;background:transparent;color:rgba(255,255,255,.58);padding:14px 17px 13px;border-radius:0;font-size:13.5px;font-weight:850;scroll-snap-align:center}
  .top-category-btn.active{background:transparent;color:#fff}
  .top-category-btn.active:after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:#fff}
  .mobile-subcategory-nav{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px 12px;background:#fff;border-bottom:1px solid var(--mobile-line)}
  .mobile-subcategory-nav::-webkit-scrollbar{display:none}
  .mobile-subcategory-btn{flex:0 0 auto;border:1px solid #e4e8ee;background:#fff;border-radius:999px;padding:7px 11px;font-size:11.5px;font-weight:750;color:#5f646b}
  .mobile-subcategory-btn.active{border-color:#b9d4ff;background:var(--mobile-accent-soft);color:var(--mobile-accent)}

  .hero-wrap{background:linear-gradient(180deg,#f5f9ff 0%,#fff 100%);border-bottom:1px solid var(--mobile-line)}
  .hero-layout{padding:22px 0 20px}
  .hero-side{display:none}
  .hero-badge{margin-bottom:10px;padding:5px 8px;border-color:#cfe1ff;background:#fff;color:#4d76ad;font-size:10px}
  .hero-badge span{color:var(--mobile-accent)}
  .eyebrow{display:none}
  .section-kicker{font-size:9px;letter-spacing:.14em;margin-bottom:6px}
  .hero-main h1{font-size:34px;line-height:1;letter-spacing:-.055em}
  .hero-copy{margin-top:10px;font-size:13px;line-height:1.5;max-width:35em;color:#62676e}
  .hero-actions{margin-top:14px;gap:12px}
  .hero-cta{padding:9px 12px;border-radius:9px;font-size:11.5px;gap:10px;background:var(--mobile-accent)}
  .hero-sub-link{font-size:11.5px;color:#5f646b}
  .hero-meta{margin-top:10px;font-size:10.5px}

  .content-shell{width:100%;padding:0 12px 38px}
  .disclosure{margin-top:10px;display:grid;grid-template-columns:auto 1fr;padding:11px 12px;border-radius:10px;gap:8px;background:#fffaf0;border:1px solid #f1dfb6;box-shadow:none}
  .disclosure-icon{width:30px;height:30px;border-radius:8px;font-size:8px}
  .disclosure-title{align-self:center}
  .disclosure-title .section-kicker{display:none}
  .disclosure h2{font-size:15px;letter-spacing:-.02em}
  .disclosure-copy{grid-column:1/-1}
  .disclosure-copy p{font-size:10.5px;line-height:1.5;color:#777068}

  .deal-section{padding-top:28px}
  .section-heading h2,.archive-head h2{font-size:23px;letter-spacing:-.045em}
  .split-heading>p,.section-heading>p:last-child,.archive-head p{font-size:10.5px;line-height:1.5;margin-top:6px;color:#8a8f95}
  .topic-nav{padding:11px 0 12px;margin-bottom:16px;border-bottom:1px solid var(--mobile-line)}
  .topic-btn{padding:7px 12px;font-size:11px;border-radius:999px}
  .topic-btn.active{background:var(--mobile-accent);border-color:var(--mobile-accent)}
  .section-head{margin-bottom:11px}
  .section-head h2{font-size:20px;letter-spacing:-.04em}

  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 10px;grid-auto-rows:auto}
  .card{display:block;height:auto;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
  .card-link:hover{transform:none;box-shadow:none;border-color:transparent}
  .card-media{border-radius:8px;overflow:hidden;background:#f4f5f7}
  .card-media img,.card img{aspect-ratio:1/1;object-fit:cover;border-radius:8px}
  .card-media .market-badge{left:6px;top:6px;min-height:20px;padding:3px 6px;border-radius:5px;font-size:8.5px;box-shadow:none}
  .body{padding:7px 0 0;gap:3px;min-width:0}
  .market{display:none}
  .name{font-size:11.5px;font-weight:620;line-height:1.35;letter-spacing:-.02em;min-height:2.7em;-webkit-line-clamp:2}
  .original-price{display:none}
  .price{font-size:14px;font-weight:900;letter-spacing:-.02em;margin-top:2px}
  .facts{gap:3px;margin-top:2px}
  .facts span{background:transparent;padding:0;border-radius:0;font-size:8.5px;color:#8c9197;font-weight:650}
  .facts span:first-child{color:var(--mobile-accent);font-weight:900}
  .comment{display:none}
  .buy{display:none}

  .featured-carousel{margin-bottom:4px}
  .featured-controls{padding:12px 0 0;gap:8px}
  .roll-btn{width:32px;height:32px;padding:0;display:grid;place-items:center;border:1px solid #e5e8ec;border-radius:50%;background:#fff;font-size:11px;color:#6c7178}
  .roll-dot{width:6px;height:6px;background:#d5d9de}
  .roll-dot.active{width:18px;border-radius:999px;background:var(--mobile-accent)}

  .category-title{margin-top:32px}
  .cat{border-top:1px solid var(--mobile-line);scroll-margin-top:126px}
  .cat:last-child{border-bottom:0}
  .cat summary{padding:18px 0 12px;font-size:18px;font-weight:850;gap:7px}
  .cat summary .cat-arrow{font-size:9px;color:var(--mobile-accent)}
  .cat[open] .cat-arrow{transform:rotate(90deg)}
  .cat .grid{padding-bottom:18px}

  .archive-section{padding-top:44px}
  .archive-head{display:block}
  .archive-count{display:inline-flex;margin-top:10px;font-size:9px;background:var(--mobile-accent-soft);color:var(--mobile-accent)}
  .archive-preview{margin-top:13px;gap:8px}
  .archive-card{min-height:145px;padding:16px;border-radius:13px}
  .archive-card strong{margin-top:17px;font-size:20px}
  .archive-card p{font-size:10px;margin:7px 0 14px}
  .archive-card-link{font-size:10px}
  .archive-mini-grid{gap:6px}
  .archive-mini-grid span{padding:10px;border-radius:10px;font-size:9.5px}
  .archive-mini-grid b{font-size:14px}

  .criteria-section{padding-top:44px}
  .criteria-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:14px}
  .criteria-grid article{padding:12px;border-radius:11px;box-shadow:none}
  .criteria-icon{width:27px;height:27px;border-radius:8px;margin-bottom:11px;font-size:11px;background:var(--mobile-accent-soft);color:var(--mobile-accent)}
  .criteria-no{right:10px;top:10px;font-size:8px}
  .criteria-grid h3{font-size:12.5px;margin-bottom:5px}
  .criteria-grid p{font-size:9.5px;line-height:1.5}

  .about-section{padding-top:40px;gap:8px}
  .about-panel,.notice-panel{padding:14px;border-radius:11px;box-shadow:none}
  .about-panel .section-heading h2{font-size:20px}
  .about-copy{gap:7px}
  .about-copy p,.notice-panel ul{font-size:10px;line-height:1.55}
  .notice-panel ul{margin-top:7px}

  .footer-inner{min-height:110px;padding:20px 0;gap:12px}
  .footer-mark{width:29px;height:29px;border-radius:8px}
  .footer-inner strong{font-size:13px}
  .footer-inner span,.footer-inner p{font-size:9.5px}
}

@media(max-width:420px){
  .site-header-inner{width:calc(100% - 14px)}
  .brand-name{display:none}
  .site-nav{gap:9px}
  .site-nav a{font-size:11px}
  .nav-long{display:none}
  .nav-short{display:inline}

  .top-category-btn{padding:13px 15px 12px;font-size:12.5px}
  .hero-main h1{font-size:32px}
  .hero-copy{font-size:12.5px}
  .content-shell{padding-left:10px;padding-right:10px}
  .grid{gap:22px 8px}
  .name{font-size:11px}
  .price{font-size:13.5px}
}

@media(max-width:360px){
  .site-header-inner{width:calc(100% - 12px)}
  .site-nav{gap:7px}
  .site-nav a{font-size:10.5px}
  .top-category-btn{padding-left:13px;padding-right:13px}
  .hero-main h1{font-size:30px}
  .hero-copy{font-size:12px}
  .grid{gap:20px 7px}
  .name{font-size:10.5px}
  .price{font-size:13px}
  .criteria-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:320px){
  .site-nav{gap:5px}
  .site-nav a{font-size:10px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .name{font-size:11px}
  .price{font-size:13.5px}
}