/* Final responsive layer: retain the existing phone/desktop art direction. */
@media (max-width: 900px) {
  .shop-header {grid-template-columns:44px minmax(0,1fr) auto;padding-left:16px;padding-right:16px}
  .shop-header > nav {display:none}
  .shop-header .shop-brand {justify-self:center;max-width:100%}
  .mobile-menu-button {display:grid;width:44px;height:44px;padding:10px;border:0;background:transparent;align-content:center;gap:6px}
  .mobile-menu-button span {display:block;width:24px;height:1px;background:#111}
  .mobile-menu {position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;padding:20px;padding-bottom:calc(20px + env(safe-area-inset-bottom));background:#fff;overflow-y:auto;visibility:hidden;transform:translateX(-102%);transition:transform .25s ease,visibility .25s}
  .mobile-menu.open {visibility:visible;transform:translateX(0)}
  .mobile-menu-head {display:flex;align-items:center;justify-content:space-between;padding-bottom:30px}
  .mobile-menu-head img {width:132px;max-width:60%}
  .mobile-menu-head button {width:44px;height:44px;border:0;background:transparent;font-size:30px;color:#111}
  .mobile-menu nav {display:grid}
  .mobile-menu nav a {padding:18px 0;border-bottom:1px solid #e8e8e8;color:#111;font:600 27px/1.15 Arial,sans-serif;letter-spacing:-.04em;text-decoration:none}
  .mobile-menu > p {margin:auto 0 8px;padding-top:28px;color:#555;font:600 10px/1.5 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
  .store-visit,.category-intro {grid-template-columns:minmax(0,1fr)}
  .store-copy,.category-intro-copy {min-width:0}
  .category-intro-copy {justify-self:start}
  .store-actions {flex-wrap:wrap}
  .shop-controls,.shop-search,.filter-panel label {min-width:0}
  .shop-search input,.filter-panel select,#shopSort {min-width:0;font-size:16px}
  .shop-search input {width:100%}
  .cart-button {min-height:44px}
  .shop-legal-footer {padding-bottom:calc(100px + env(safe-area-inset-bottom))}
}
body:has(.mobile-menu.open) .sofia-launch,
body:has(.cart-drawer.open) .sofia-launch {visibility:hidden}
@media (prefers-reduced-motion:reduce) {.mobile-menu {transition:none}}
@media (max-width: 560px) {
  main > #tissot {order:4}
}