/* Keep narrow flex/grid children shrinkable, including long SKU names. */
.banner-preview { width:100%; aspect-ratio:3/1; object-fit:cover; border-radius:12px; display:block; margin:16px 0; }
#banner-status { color:#888; font-size:14px; }
.card>.delete-product { margin-top:10px; color:#c4382b; border-color:#f2cbc5; background:#fff8f6; }
input, textarea, .upload, .card-top>div, .toolbar>div, header>div { min-width:0 }
.spec span, .order small, #store-name, #notice { overflow-wrap:anywhere }
.spec strong { flex-shrink:0 }
button { min-height:44px; touch-action:manipulation }
input:not([type=checkbox]), textarea { font-size:16px }
input[type=file] { max-width:100% }
dialog { max-height:calc(100dvh - 24px) }
#product-form { display:flex; flex-direction:column; max-height:calc(100dvh - 24px) }
.form-body { min-height:0; overscroll-behavior:contain }
.dialog-head, #product-form footer { flex-shrink:0 }
body:has(dialog[open]) { overflow:hidden }
@media (max-width:760px) {
  .login-view { min-height:100dvh; padding:24px 16px; background:linear-gradient(155deg,#fff4ef,#f5f6f8 55%) }
  .login-card { margin:auto; padding:30px 24px; border:1px solid #ece5e1; border-radius:20px; background:white; box-shadow:0 15px 50px #27212708 }
  .login-card h2 { font-size:26px }
  #app aside { position:relative; width:100%; padding:20px 16px 0; border-right:0; border-bottom:1px solid #e7e9ee; padding-top:max(20px,env(safe-area-inset-top)) }
  aside .brand { padding-right:110px; font-size:22px }
  #logout { top:max(20px,env(safe-area-inset-top)); right:16px; padding:9px 12px; font-size:14px }
  nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; margin-top:20px }
  nav button { padding:14px 4px; text-align:center; font-size:14px; border-radius:9px 9px 0 0 }
  main { padding:24px 16px calc(28px + env(safe-area-inset-bottom)); width:100%; min-width:0 }
  header { align-items:flex-start; gap:12px; margin-bottom:24px; padding-bottom:20px }
  header h1 { font-size:25px }
  #store-name { max-width:38%; text-align:right; padding-top:8px }
  .toolbar { gap:14px; margin:20px 0 }
  .toolbar>div { flex:1 1 200px }
  #products-view>.toolbar { align-items:stretch; flex-direction:column }
  #products-view>.toolbar>div { flex:initial }
  #add-product { width:100% }
  .cards { grid-template-columns:minmax(0,1fr); gap:16px }
  .card,.surface,.order { padding:20px 16px }
  .card-top { gap:14px }
  .card h3 { font-size:18px }
  .spec { font-size:15px; align-items:flex-start }
  .surface>.primary,#more-orders { width:100% }
  .empty { padding:44px 20px; line-height:1.8 }
  dialog { width:100%; max-width:100%; margin:auto 0 0; border-radius:20px 20px 0 0; max-height:94dvh }
  #product-form { max-height:94dvh }
  .dialog-head { padding:16px 20px }
  .dialog-head h2 { font-size:21px }
  .dialog-head button { min-width:44px; min-height:44px }
  .form-body { max-height:none; overflow-y:auto; padding:0 20px 12px; flex:1 }
  .two { grid-template-columns:minmax(0,1fr); gap:0 }
  .image-row { align-items:flex-start; flex-direction:column; gap:0 }
  .image-row img { width:100px; height:100px; margin-top:16px }
  .upload { width:100% }
  .upload input { padding:10px 8px; font-size:14px }
  input::file-selector-button { padding:8px; border:0; border-radius:6px; background:#fff0ec; margin-right:8px }
  .sku-row { grid-template-columns:minmax(0,1fr) auto; gap:0 12px; border:1px solid #e7e9ee; border-radius:12px; padding:12px; margin:12px 0; background:#fafbfc }
  .sku-row label:first-child { grid-column:1/-1 }
  .sku-row label:nth-child(2) { grid-column:1 }
  .sku-row button { grid-column:2; margin-bottom:8px; min-width:62px }
  .check { min-height:44px }
  .check input { width:22px; height:22px }
  #product-form footer { padding:14px 20px calc(14px + env(safe-area-inset-bottom)); gap:10px; background:white }
  #cancel-editor { flex:0 0 72px; padding:12px }
  #save-product { flex:1; padding:12px 8px }
}
@media (max-width:360px) {
  main { padding-left:12px; padding-right:12px }
  .login-card { padding:28px 20px }
  .form-body { padding-left:14px; padding-right:14px }
  .dialog-head,#product-form footer { padding-left:14px; padding-right:14px }
  .photo { width:64px; height:64px }
}