/* Customer storefront only. Desktop and admin retain their existing styles. */
@media (max-width:720px){
  html{scroll-padding-bottom:11rem}
  .container,.intro{padding-left:1rem;padding-right:1rem}
  .container.section{padding:2rem 1rem}
  .panel{padding:1rem}
  .panel.table-wrap,.picker-model{padding:0}
  .form-grid>*,.stack>*,.filters>*,.row>*,.item-row>*{min-width:0}
  input,select,textarea{min-width:0;font-size:1rem}
  .page-title,.row,.item-row,.badge,.notice{overflow-wrap:anywhere}
  .row,.order-summary,.item-row{flex-wrap:wrap;gap:.75rem}
  .section-heading.row{align-items:flex-start}
  .button{min-height:3rem;padding:.75rem 1rem}
  .text-link,.link-button{display:inline-flex;align-items:center;min-height:2.75rem}
  .crumb{flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
  .crumb a{display:inline-flex;align-items:center;min-height:2.75rem}

  /* Keep the brand and account actions together, with a separate navigation row. */
  .nav{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem .75rem;padding-top:.6rem;padding-bottom:0}
  .site-header .logo{font-size:.95rem;min-height:2.75rem}
  .site-header .logo-light{display:block}
  .nav nav{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.25rem .65rem;padding-top:.2rem;justify-content:space-between}
  .nav nav a{display:inline-flex;align-items:center;min-height:2.75rem;font-size:.78rem}
  .account-nav{justify-content:flex-end;gap:0 .75rem;max-width:10rem;margin-left:0}
  .account-nav a,.account-nav .link-button{display:inline-flex;align-items:center;min-height:2.75rem;font-size:.78rem}

  /* Compact the first screen without removing wholesale and approval information. */
  .wholesale-hero{min-height:0;padding:2rem 0}
  .wholesale-hero-inner{padding-top:0;padding-bottom:0}
  .wholesale-hero h1{font-size:clamp(1.9rem,7.7vw,2.45rem);max-width:20ch}
  .wholesale-hero-lead{font-size:.95rem;line-height:1.65;color:#d6e1ef}
  .wholesale-hero .eyebrow{margin-bottom:.75rem}
  .wholesale-hero .intro-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:.65rem;margin-top:1.4rem}
  .how-steps{gap:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
  .how-steps li{display:grid;grid-template-columns:4.25rem minmax(0,1fr);gap:.75rem;border:0;border-radius:0;border-bottom:1px solid var(--line);padding:1rem}
  .how-steps li:last-child{border-bottom:0}
  .how-steps strong{margin:0;font-size:.9rem}
  .how-steps span{font-size:.85rem}
  .section-heading{margin-bottom:1.15rem}
  .tiles{gap:.75rem}
  .tiles-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles-2 .tile-media{min-height:4.5rem;padding:.75rem}
  .tiles-2 .tile-body{padding:.85rem}
  .tiles-2 .tile-body strong{font-size:.9rem;overflow-wrap:anywhere}
  .tiles-2 .tile-body span{font-size:.78rem}
  .tiles:not(.tiles-2)>.tile:not(.tile-text){display:grid;grid-template-columns:6.5rem minmax(0,1fr)}
  .tiles:not(.tiles-2)>.tile:not(.tile-text) .tile-media{aspect-ratio:auto;min-height:7.5rem;border-bottom:0;border-right:1px solid var(--line)}
  .tiles:not(.tiles-2)>.tile:not(.tile-text) .tile-media img{height:6.5rem;align-self:center}
  .tiles:not(.tiles-2)>.tile:not(.tile-text) .tile-body{padding:.85rem 1rem;justify-content:center;min-width:0}
  .tile-body small{letter-spacing:.08em}
  .search-form{width:100%;gap:.5rem}
  .search-form input{min-width:0}
  .sourcing-banner .button{width:100%}

  /* Reduce nested padding so two tip cards remain readable on small phones. */
  .filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem .65rem}
  .filters .text-link{justify-content:center}
  .picker-help{display:grid;gap:.4rem;margin:1rem 0}
  .picker-help span{font-size:.82rem}
  .picker-model-head{grid-template-columns:4.5rem minmax(0,1fr);padding:1rem .85rem .5rem;gap:.75rem}
  .picker-model-head h2{font-size:1.2rem}
  .picker-model-name{font-size:.82rem;overflow-wrap:anywhere}
  .picker-model-head .eyebrow{margin-bottom:.35rem}
  .tip-option-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;padding:.75rem .85rem 1rem}
  .tip-option{min-width:0;padding:.65rem;scroll-margin-bottom:11rem}
  .tip-option-spec{font-size:.9rem;overflow-wrap:anywhere}
  .tip-option-meta{font-size:.72rem;line-height:1.5}
  .tip-qty{width:100%;max-width:none;min-height:2.75rem}
  .tip-lookbook-inline{margin:0 .85rem .25rem;width:auto}
  .tip-lookbook-track{display:flex;gap:.5rem;overflow-x:auto;padding:0 0 .5rem;scroll-snap-type:x proximity}
  .tip-lookbook-tile{flex:0 0 4.6rem;scroll-snap-align:start}
  .picker-list{padding-bottom:1.25rem}
  .picker-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem .75rem;margin:0 -1rem;padding:.65rem 1rem calc(.65rem + env(safe-area-inset-bottom,0px))}
  .picker-bar>div{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:0 .5rem;min-width:0}
  .picker-bar .muted{font-size:.75rem}
  .picker-bar strong{font-size:1rem}
  .picker-bar small{flex-basis:100%;font-size:.7rem;line-height:1.45}
  .picker-bar .button{font-size:.72rem;letter-spacing:.02em;padding:.65rem .75rem}
  .picker-bar .text-link{font-size:.78rem}
  .pdp-grid{gap:1.25rem}
  .pdp-media{padding:.85rem}
  .pdp-photo{max-height:12rem}
  .pdp-tips{padding:0}
  .pdp-series-universal{padding:.75rem .65rem .15rem}
  .pdp-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
  .pdp-actions>div,.pdp-actions>.button{grid-column:1/-1}
  .pdp-actions>.text-link{justify-self:start}

  /* Put the application itself before supporting steps on a narrow screen. */
  .apply-layout{row-gap:1rem}
  .apply-copy{grid-column:1;grid-row:1}
  .apply-copy .lead{margin-bottom:0}
  .apply-form{grid-row:2}
  .apply-aside{grid-row:3;padding:1rem}
  .apply-form .button,.sourcing-form .button,.stack>.button{width:100%}
  .photo-guide{gap:.65rem;margin-bottom:1.25rem}
  .photo-guide-item{grid-template-columns:2.5rem minmax(0,1fr);column-gap:.75rem;row-gap:.15rem;padding:.85rem}
  .photo-guide-art{grid-row:1/span 2;width:2.5rem;height:2.5rem}
  .photo-guide-item strong,.photo-guide-item span:last-child{grid-column:2}
  .photo-guide-item span:last-child{font-size:.82rem}
  .upload-zone{min-width:0;padding:1rem}
  .upload-zone input{max-width:100%;font-size:1rem}
  .auth-card{margin:1.5rem 1rem}
  .empty{padding:1.5rem 1rem}
  .empty .button{width:100%}

  .cart-actions{align-items:stretch;gap:1rem}
  .cart-actions>div{width:100%}
  .cart-actions .actions{display:grid;grid-template-columns:minmax(0,1fr);gap:.65rem}
  .responsive-table tr{padding:.85rem 1rem}
  .responsive-table td{gap:.5rem;overflow-wrap:anywhere}
  .responsive-table td[data-label]:before{flex-basis:4.5rem}
  .responsive-table td input{width:7rem;max-width:100%}
  .responsive-table td small{font-size:.78rem}
  .order-summary>.button{width:100%}
  .next-steps{padding:1rem}
  .step{column-gap:.65rem}
  .step-action{align-items:stretch}
  .step-action .button{width:100%}
  .footer-grid{gap:1rem}
  .footer-grid>div>a:not(.logo){display:flex;align-items:center;min-height:2.75rem;margin-bottom:0}
}
@media (max-width:360px){
  .account-nav{max-width:8rem;gap:0 .5rem}
  .site-header .logo{font-size:.88rem}
  .nav nav a{font-size:.73rem}
  .tiles:not(.tiles-2)>.tile:not(.tile-text){grid-template-columns:5.25rem minmax(0,1fr)}
  .tiles:not(.tiles-2)>.tile:not(.tile-text) .tile-body{padding:.75rem}
  .filters{grid-template-columns:minmax(0,1fr)}
  .filters label:nth-child(3),.filters .button{grid-column:auto}
}
@media (max-width:720px) and (max-height:500px){
  /* Preserve screen space in landscape and when the browser resizes for a keyboard. */
  .picker-bar{position:static}
}