@media (max-width:1024px){
  .main-nav{display:none}
  .menu-btn{display:inline-grid}
  .header-inner{gap:8px}
  .logo{margin-inline-end:auto}
  .header-tools{margin-inline-start:0}
  .desktop-only{display:none}
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero-visual{min-height:440px;max-width:520px;width:100%;margin-inline:auto}
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .story-grid{grid-template-columns:1fr;gap:32px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  body{font-size:15.5px}
  .container{width:calc(100% - 28px)}
  .section{padding:56px 0}
  .section-head{margin-bottom:28px}
  .hero{padding:24px 0 48px}
  .hero-visual{min-height:380px}
  .hero-actions .btn{flex:1}
  .product-grid{grid-template-columns:repeat(2,1fr);gap:22px 12px}
  .pc-body{padding-inline:2px}
  .pc-title{font-size:.92rem}
  .btn-sm{padding:0 10px;font-size:.86rem}
  .cat-grid{gap:12px}
  .cat-info{inset-inline:6px;bottom:6px;padding:10px 12px}.cat-info p{display:none}
  .steps{grid-template-columns:1fr}
  .steps li{padding:24px}
  .gallery-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .newsletter{padding:44px 18px;border-radius:22px}
  .newsletter form,.search-panel form{flex-direction:column}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .auth-card{padding:28px 20px}
  .cart-drawer{width:100vw}
  .announce{font-size:.8rem}
}

/* ===== v3 responsive ===== */
@media (max-width:1024px){
  .pp-grid{grid-template-columns:1fr;gap:28px}.pp-gallery,.cart-summary,.sticky-card{position:static}
  .cart-layout,.checkout-grid,.order-grid,.account-grid,.contact-grid,.reviews-grid{grid-template-columns:1fr}
  .benefits ul{grid-template-columns:repeat(2,1fr)}
  .listing-grid{grid-template-columns:1fr}.filters-toggle{display:inline-flex}
  .filters-panel{position:fixed;inset-inline:0;bottom:0;top:auto;z-index:95;border-radius:24px 24px 0 0;max-height:82vh;overflow:auto;transform:translateY(105%);visibility:hidden;transition:transform .3s var(--ease),visibility .3s}
  .filters-panel.is-open{transform:none;visibility:visible}.fp-head{display:flex}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  [data-filters-overlay]{position:fixed;inset:0;background:rgba(48,42,40,.45);z-index:90}
}
@media (max-width:640px){
  body{padding-bottom:68px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;inset-inline:0;bottom:0;z-index:75;background:rgba(255,249,242,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a,.tabbar button{position:relative;display:grid;justify-items:center;gap:2px;background:none;border:0;font-size:.7rem;color:var(--muted);padding:4px 0;min-height:48px;cursor:pointer}
  .tabbar .is-active{color:var(--ink);font-weight:600}.tabbar .badge-count{top:0;inset-inline-start:calc(50% + 4px)}
  .to-top{bottom:84px}.toast-wrap{bottom:84px}
  .grid-3,.product-grid{grid-template-columns:repeat(2,1fr)}
  .benefits ul{grid-template-columns:1fr 1fr;gap:10px}.benefits li{padding:12px}.benefits small{display:none}
  .marquee{margin-top:36px}
  .cart-line{grid-template-columns:72px 1fr auto;gap:12px}.cart-line img{width:72px;height:90px}.cl-total{grid-column:2/3;grid-row:2}
  .grid-2{grid-template-columns:1fr}.account-tiles{gap:8px}
  .qv-grid{grid-template-columns:1fr}.qv-grid img{max-width:220px;margin-inline:auto}
  .sticky-atc{position:fixed;inset-inline:0;bottom:64px;z-index:70;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--white);padding:10px 16px;box-shadow:0 -6px 24px rgba(48,42,40,.1);transform:translateY(160%);transition:transform .3s var(--ease)}
  .sticky-atc.is-visible{transform:none}.sticky-atc div{display:grid;min-width:0}.sticky-atc small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pp-buy{flex-wrap:wrap}.pp-add{flex-basis:100%;order:3}
  .stepper li{font-size:.7rem}.nf-code{font-size:4.5rem}
}

/* ===== v5: compact mobile header (tab bar already covers search / cart / account) ===== */
@media (max-width:1024px){.header-inner{min-height:60px}}
@media (max-width:640px){
  .announce{font-size:.72rem;line-height:1.5;padding:5px 10px}
  .site-header{transition:transform .3s var(--ease),box-shadow .25s,border-color .25s}
  .site-header.is-hidden{transform:translateY(-110%)}
  .header-inner{min-height:52px;gap:2px}
  .logo{font-size:1.25rem}.logo-heart{font-size:1rem}.logo img{max-height:30px;width:auto}
  .icon-btn{width:40px;height:40px}
  .hide-sm{display:none!important}
  .search-panel{padding:10px 0}
}

/* ===== v5 responsive: timeline becomes vertical on phones ===== */
@media (max-width:1024px){.support-grid{grid-template-columns:1fr}.support-side{position:static;order:-1}.help-grid{grid-template-columns:1fr}.account-tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .track-hero{padding:36px 0 48px}.track-form{flex-direction:column;border-radius:24px;padding:12px}.track-form .btn{width:100%}
  .track-card{padding:20px 16px}.track-meta{gap:16px}
  .code-chip{flex-wrap:wrap;justify-content:center;width:100%}.code-chip b{font-size:1.05rem}
  .otl:not(.otl-compact){flex-direction:column;gap:0}
  .otl:not(.otl-compact) .otl-step{flex-direction:row;text-align:start;align-items:flex-start;gap:14px;padding-bottom:22px}
  .otl:not(.otl-compact) .otl-step::before,.otl:not(.otl-compact) .otl-step::after{top:58px;bottom:0;inset-inline-start:26px;width:4px;height:auto;transform-origin:top center}
  .otl:not(.otl-compact) .otl-step::after{transform:scaleY(0)}.otl:not(.otl-compact) .otl-step.is-done::after{transform:scaleY(1);animation-name:growY}
  .otl:not(.otl-compact) .otl-body{justify-items:start;padding-top:6px}.otl:not(.otl-compact) .otl-body p{max-width:none}
  .msg{max-width:96%}.ticket-state{justify-items:start}
  .composer-bar{flex-wrap:wrap}.composer-bar .btn{flex:1}
  .oc-steps{font-size:.66rem}
}