/* Mobile refinements; desktop art direction stays in styles.css. */
#mobile-favorites{display:none}
.product-card,.product-info,.section-heading>div,.bag-item>div{min-width:0}
.product-media>.product-open{height:100%}
body.modal-open{position:fixed;width:100%;overflow:hidden}
dialog{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#search-form input{min-width:0}

@media(max-width:960px){
  .header{height:68px;padding-inline:4%}
  .header nav{display:none;position:absolute;top:68px;inset-inline:0;height:auto;max-height:calc(100dvh - 68px);overflow-y:auto;padding:16px 5%;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 12px 20px #302b250a}
  .header nav.open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 20px}
  .header nav>a,.header nav>#mobile-favorites{display:flex;align-items:center;min-height:48px;height:auto;font-size:13px;text-align:left;padding:0 8px;letter-spacing:1px}
  .header nav>a.active:after{bottom:6px;left:8px;right:auto;width:26px}
  .header nav i{position:static;margin-left:6px;font-size:8px}
  .header-actions{gap:2px;flex-shrink:0}
  .header-actions>.icon-btn{width:44px;height:44px}
  .menu-button{display:inline-flex}
  #favorites-toggle{display:none}
  .bag-button{position:relative}
  .bag-button b{position:absolute;right:0;top:1px;min-width:16px;padding:2px;border-radius:9px;background:var(--paper);font-size:9px}
  html{scroll-padding-top:84px}
}

@media(max-width:760px){
  body{font-size:14px}
  .announcement{height:auto;min-height:28px;padding:5px 12px;line-height:1.7;letter-spacing:1px;font-size:10px}
  .announcement>span{display:none}
  .header{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .header .brand{font-size:28px;letter-spacing:3px;gap:10px;white-space:nowrap}
  .header .brand>span{font-size:11px;letter-spacing:2px;padding-left:10px}
  .hero{height:auto;display:flex;flex-direction:column;background:#eee7dc}
  .hero>img{position:static;height:clamp(240px,68vw,400px);object-position:85% center}
  .hero:after{display:none}
  .hero-content{position:static;padding:28px 6% 24px}
  .hero .eyebrow{font-size:10px;letter-spacing:2px}
  .hero h1{font-size:clamp(30px,7vw,40px);line-height:1.45;letter-spacing:4px;margin:12px 0}
  .hero h1 br{display:none}
  .hero p{font-size:12px;line-height:1.9;letter-spacing:.3px}
  .hero .button{min-height:46px;margin-top:20px;font-size:12px}
  .hero-bottom{position:static;padding:0 6% 19px;font-size:8px;gap:10px;flex-wrap:wrap}
  .hero-bottom .hero-page{margin-left:auto}
  .values{padding:20px 4%;gap:16px 5px}
  .values>span{font-size:11px;gap:7px;letter-spacing:0}
  .section{padding:36px 4% 0}
  .section-heading{gap:12px;flex-wrap:wrap;margin-bottom:20px}
  .section-heading h2{font-size:24px;line-height:1.5;letter-spacing:1px}
  .eyebrow{font-size:10px;letter-spacing:1.6px}
  .category-grid,.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
  .category-grid>a{height:auto;aspect-ratio:3/4}
  .category-grid a>div{left:13px;right:13px;bottom:17px}
  .category-grid h3{font-size:20px;letter-spacing:2px}
  .category-grid b{font-size:21px}
  .category-grid div>span{font-size:8px;letter-spacing:.6px}
  .new-arrivals .section-heading{align-items:flex-start}
  .new-arrivals .text-link{font-size:12px;min-height:44px;gap:14px;padding:8px 0}
  .filter-bar{margin-bottom:18px;border:0}
  .tabs{justify-content:flex-start;gap:8px;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:0 0 3px;border-bottom:1px solid var(--line)}
  .tabs>button{flex:0 0 auto;min-height:44px;min-width:48px;padding:10px 8px;font-size:13px}
  .tabs>button.selected:after{bottom:0}
  #result-count{position:static;text-align:right;font-size:11px;margin:0;padding:12px 0 0}
  .product-grid{margin-top:0}
  .product-tag{max-width:calc(100% - 55px);font-size:7px;padding:4px 5px;letter-spacing:.4px;left:7px;top:14px}
  .favorite{width:44px;height:44px;top:2px;right:2px;background:transparent}
  .favorite:before{content:"";position:absolute;inset:7px;border-radius:50%;background:#fffefaaf}
  .favorite svg{position:relative;width:18px;height:18px}
  .product-info{padding-top:12px}
  .product-sub{font-size:9px;letter-spacing:.2px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .product-info>.product-open{min-height:50px}
  .product-info h3{font-size:13px;line-height:1.65;letter-spacing:0;margin:6px 0}
  .product-bottom{gap:6px;flex-wrap:wrap}
  .price{font-size:14px;white-space:nowrap}
  .price del{font-size:11px}
  .swatches i{width:8px;height:8px}
  .collection-note{gap:12px;flex-wrap:wrap}
  .collection-note p{font-size:11px}
  .story{margin:0 4%}
  .story-image{min-height:0;aspect-ratio:3/2}
  .story-copy{padding:30px 7%}
  .story h2{font-size:27px;letter-spacing:2px}
  .story p{font-size:13px;line-height:2}
  .story p br{display:none}
  .story .text-link{min-height:44px;font-size:12px;margin-top:4px}
  .closing{padding:38px 4%}
  .closing h2{font-size:22px;letter-spacing:1px;line-height:1.6}
  .closing a{display:inline-flex;align-items:center;min-height:44px;font-size:12px}
  footer{padding:32px max(5%,env(safe-area-inset-left)) max(12px,env(safe-area-inset-bottom))}
  .footer-top{gap:24px;padding-bottom:24px}
  .footer-top h4{font-size:13px;margin-bottom:8px}
  .footer-top p{font-size:12px}
  .footer-top>div>a:not(.brand),.footer-top>div>button{font-size:12px;min-height:44px;display:flex;align-items:center;margin:0}
  .footer-bottom{font-size:10px;line-height:1.8;gap:8px}
  .footer-bottom>span:nth-child(2){margin-left:0}
  #search-panel{position:sticky;top:68px;z-index:14;padding:18px 5%;box-shadow:0 8px 16px #302b2508;scroll-margin-top:68px}
  #search-form label{font-size:13px}
  #search-form input{font-size:16px;min-height:48px}
  #search-form button{min-width:62px;min-height:48px;font-size:13px}
  #product-dialog{width:100%;max-width:100%;max-height:94vh;max-height:94dvh;margin:auto 0 0;border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  #product-dialog>.dialog-close{position:sticky;top:10px;margin:10px 10px -54px auto;width:44px;height:44px;box-shadow:0 2px 12px #302b2514}
  #product-detail{display:block}
  #product-detail>img{height:clamp(260px,53vh,440px);height:clamp(260px,53dvh,440px);object-fit:contain;background:#e7e3db;max-height:none}
  .detail-copy{padding:24px 6%}
  .detail-copy h2{font-size:24px;letter-spacing:0}
  .detail-description{font-size:14px;line-height:1.9}
  .detail-copy label{font-size:13px}
  .sizes{gap:10px;flex-wrap:wrap}
  .sizes button{width:52px;height:48px;font-size:14px}
  .detail-copy .button{height:50px;font-size:14px}
  .detail-note{font-size:12px;line-height:1.8}
  #bag-dialog{width:100%;max-width:100%;max-height:100vh;max-height:100dvh;padding:18px max(18px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
  .drawer-heading{position:sticky;top:-18px;z-index:2;background:var(--paper);padding:12px 0}
  .drawer-heading .icon-btn{width:44px;height:44px}
  .bag-note{font-size:12px;line-height:1.8;margin-top:6px}
  .bag-item{grid-template-columns:72px minmax(0,1fr);gap:12px}
  .bag-item img{height:100px}
  .bag-item h3{font-size:13px;line-height:1.7}
  .bag-item p{font-size:12px;line-height:1.7}
  .bag-item-controls{gap:8px;flex-wrap:wrap}
  .quantity button{width:44px;height:44px;padding:0;font-size:16px}
  .quantity span{font-size:13px;min-width:24px;text-align:center}
  .quantity button:disabled{opacity:.35}
  .remove-item{min-width:44px;min-height:44px;font-size:12px}
  #bag-summary p{font-size:12px}
  .toast{bottom:max(20px,env(safe-area-inset-bottom));white-space:normal;font-size:13px;line-height:1.7;width:max-content;max-width:calc(100% - 32px);padding:12px 18px}
}
@media(max-width:360px){
  .hero h1{font-size:27px;letter-spacing:2px}
  .header .brand{font-size:26px;gap:8px}
  .header .brand>span{padding-left:8px}
  .header-actions{gap:0}
  .values>span{font-size:10px}
  .category-grid,.product-grid{column-gap:10px}
  .category-grid h3{font-size:18px}
  .category-grid div>span{font-size:7px}
  .story h2{font-size:24px}
}
@media(hover:none){
  .product-media:hover img,.category-grid a:hover img{transform:none}
}