.photo-progress { display:flex; align-items:center; gap:24px; padding:22px 26px; background:#eaf1e5; border-radius:14px; }
.photo-progress strong { font-size:30px; color:var(--forest); display:block; }
.photo-progress span { font-weight:600; }.photo-progress p { color:var(--muted); }
.photo-capture { padding:28px; max-width:900px; width:100%; scroll-margin-top:18px; }
.photo-step { display:flex; align-items:center; gap:12px; margin:6px 0 18px; }
.photo-step b { width:32px; height:32px; flex-shrink:0; border-radius:50%; background:var(--mint); display:grid; place-items:center; color:var(--forest); }
.photo-step h2 { font-size:22px; }.photo-filter-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.photo-missing-toggle { display:flex; align-items:center; gap:10px; margin:0 0 20px; }
.photo-missing-toggle input { min-height:0; width:20px; height:20px; }
.photo-selected-name { border-left:4px solid var(--forest); padding:12px 18px; background:var(--paper); margin:22px 0; }
.photo-selected-name strong { display:block; font-size:22px; overflow-wrap:anywhere; }.photo-selected-name span { display:block; color:var(--muted); margin-top:4px; }
.photo-camera-actions,.photo-submit-actions { display:flex; gap:12px; flex-wrap:wrap; margin:18px 0; }
.photo-camera-actions .button,.photo-submit-actions .button { min-height:52px; font-size:17px; }
.photo-tip { color:var(--muted); line-height:1.6; }.photo-format-note { color:var(--muted); font-size:14px; margin-bottom:20px; }
.photo-start-hint { border:1px dashed #b5c3b7; border-radius:10px; padding:24px; color:var(--muted); margin:18px 0; }
.photo-preview { margin:24px 0; border:1px solid var(--line); border-radius:12px; background:var(--paper); overflow:hidden; }
.photo-preview img { display:block; max-height:440px; width:100%; object-fit:contain; background:#edf0e9; }
.photo-preview figcaption { padding:14px 18px; font-size:15px; }
.photo-current { display:flex; align-items:center; gap:18px; margin:18px 0 28px; }.photo-current img { width:112px; height:112px; object-fit:contain; border:1px solid var(--line); border-radius:10px; background:var(--paper); }
.photo-current span { display:block; color:var(--muted); font-size:14px; }.photo-current p { font-size:14px; margin-top:8px; }
.photo-feedback { padding:16px; border-radius:10px; color:var(--forest); background:var(--mint); margin-top:20px; }
.photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:18px; padding:0 24px 24px; }
.photo-card { display:flex; flex-direction:column; text-align:left; border:1px solid var(--line); border-radius:12px; padding:12px; min-width:0; gap:8px; }
.photo-card:hover { border-color:var(--green); }.photo-card > img { width:100%; aspect-ratio:1; object-fit:contain; border-radius:8px; background:var(--paper); }
.photo-card strong { font-size:16px; overflow-wrap:anywhere; }.photo-card > span:not(.photo-placeholder) { color:var(--muted); font-size:13px; }
.photo-placeholder { display:flex; flex-direction:column; justify-content:center; align-items:center; background:var(--paper); border-radius:8px; width:100%; aspect-ratio:1; gap:12px; color:var(--muted); }.photo-placeholder svg { width:32px; height:32px; }
.photo-empty { padding:20px; grid-column:1/-1; }
.item-photo { display:flex; align-items:center; gap:18px; margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--line); }.item-photo img { width:120px; height:120px; object-fit:contain; border-radius:10px; background:var(--paper); }
.item-photo-empty { display:flex; align-items:center; gap:12px; color:var(--muted); }
.item-thumbnail { width:42px; height:42px; flex-shrink:0; border-radius:8px; object-fit:contain; background:var(--paper); }
.sku-product-photo { max-width:100%; width:220px; height:180px; object-fit:contain; border-radius:12px; margin-bottom:24px; background:var(--paper); }
@media(max-width:600px) {
 .photo-progress { padding:18px; flex-direction:column; align-items:flex-start; gap:8px; }.photo-progress strong { font-size:27px; }
 .photo-capture { padding:18px; }.photo-filter-grid { grid-template-columns:1fr; gap:0; }.photo-step h2 { font-size:20px; }
 .photo-camera-actions .button,.photo-submit-actions .button { flex:1; min-width:125px; padding:12px; }
 .photo-grid { grid-template-columns:1fr 1fr; padding:0 14px 18px; gap:12px; }.photo-card { padding:10px; }
 .photo-current { gap:12px; align-items:flex-start; }.photo-current img { width:85px; height:85px; }
 .photo-preview img { max-height:360px; }.photo-selected-name strong { font-size:20px; }.item-photo { flex-wrap:wrap; }
}

@media(max-width:700px){
  #photos-view .photo-capture{padding:18px 14px;min-width:0}
  #photos-view .photo-filter-grid{grid-template-columns:minmax(0,1fr);gap:0}
  #photos-view .field{min-width:0}
  #photos-view .field input,#photos-view .field select{width:100%;min-width:0;max-width:100%;min-height:48px;font-size:16px}
  #photos-view .photo-missing-toggle{min-height:48px;padding:8px 0;margin-bottom:12px;line-height:1.4;font-size:16px}
  #photos-view .photo-missing-toggle input{width:22px;height:22px;min-height:0;flex-shrink:0}
  #photos-view .photo-selected-name{padding:12px;margin:16px 0}
  #photos-view .photo-selected-name strong{font-size:19px;line-height:1.4}
  #photos-view .photo-current{gap:12px;margin:12px 0 18px;min-width:0}
  #photos-view .photo-current>a{flex-shrink:0}
  #photos-view .photo-current>div{min-width:0;overflow-wrap:anywhere}
  #photos-view .photo-current img{width:76px;height:76px}
  #photos-view .photo-current p{margin:4px 0 0}
  #photos-view .photo-camera-actions,#photos-view .photo-submit-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
  #photos-view .photo-camera-actions .button,#photos-view .photo-submit-actions .button{min-width:0;min-height:54px;padding:10px 8px;font-size:16px}
  #photos-view .photo-preview{margin:18px 0}
  #photos-view .photo-preview img{max-height:45dvh}
  #photos-view .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 12px 16px;gap:10px}
  #photos-view .photo-card{min-width:0;min-height:48px;padding:10px;text-align:left}
  #photos-view .photo-card strong{font-size:16px;line-height:1.35}
  #photos-view .photo-card>span:not(.photo-placeholder){font-size:14px}
}
@media(max-width:700px){
  #photos-view .photo-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end}
  #photos-view .photo-filter-grid label{font-size:14px}
  #photos-view .photo-current p{display:none}
}