/* Public media previews and the named media chooser. The gallery tile and the
   frame/caption vocabulary already live in shop.css; this file adds the field,
   the chosen ordered list and the paged library panel around them. */

.shop-media-field{display:grid;gap:10px;min-width:0}
.shop-media-current{min-width:0}
.shop-media-field-actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px}
.shop-media-field-state{margin:0;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.shop-media-field-state:empty{display:none}
.shop-media-field-state.error{color:var(--danger)}
.shop-media-empty{margin:0;font-size:12.5px;color:var(--muted)}

/* One chosen image: the same frame and caption as a gallery tile. */
.shop-media-field .shop-media-single{max-width:14rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);overflow:hidden}
.shop-media-field .shop-media-frame{display:grid;place-items:center;background:color-mix(in srgb,var(--surface) 70%,var(--panel));border-bottom:1px solid var(--line);overflow:hidden}
.shop-media-field .shop-media-single .shop-media-frame{aspect-ratio:4/3}
.shop-media-img{display:block;width:100%;height:100%;object-fit:contain}
.shop-media-state{font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center;padding:0 4px}

/* Ordered gallery selection: position, preview, explicit move/remove. */
.shop-media-chosen{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.shop-media-chosen-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel)}
.shop-media-position{min-width:1.25rem;text-align:right;font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}
.shop-media-thumb{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:10px;margin:0;min-width:0}
.shop-media-thumb .shop-media-frame{width:72px;aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--radius-sm)}
.shop-media-thumb .shop-media-caption{padding:0}
.shop-media-chosen-actions{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.shop-media-field .shop-media-chosen-actions button{min-height:30px;padding:4px 8px;font-size:12.5px}

/* Exact ID fallback. It is the payload the existing review reads, and it keeps
   an unavailable or private current ID visible instead of dropping it. */
.shop-media-exact{font-size:12.5px;max-width:24rem}
.shop-media-exact>summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink-soft);padding:2px 0;list-style-position:inside}
.shop-media-exact>summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.shop-media-exact-label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:12.5px;margin:6px 0 0}

/* Library panel: search on submit, finite page sizes, paged results. */
.shop-media-library{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--surface) 60%,var(--panel))}
.shop-media-library[hidden]{display:none}
.shop-media-search{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.shop-media-search-label{display:flex;flex-direction:column;gap:4px;flex:1 1 16rem;min-width:0;font-size:12.5px;font-weight:600}
.shop-media-size{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600}
.shop-media-search input,.shop-media-size select,.shop-media-exact input{font:inherit;font-size:13px;color:inherit;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:6px 9px;min-height:34px;box-sizing:border-box;width:100%}
.shop-media-search input:disabled,.shop-media-exact input:disabled{color:var(--muted);background:var(--surface)}
.shop-media-size select{min-width:5.5rem;width:auto}

.shop-media-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,132px),1fr));gap:8px;max-height:22rem;overflow:auto;padding:2px}
.shop-media-library .shop-media-choice{display:grid;padding:0;min-height:0;text-align:left;font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;cursor:pointer}
.shop-media-library .shop-media-choice:hover:not(:disabled){background:var(--panel);border-color:color-mix(in srgb,var(--accent) 55%,var(--line-strong))}
.shop-media-library .shop-media-choice[aria-pressed=true]{border-color:var(--accent);background:var(--nav-active)}
.shop-media-choice-body{display:grid}
.shop-media-choice .shop-media-frame{aspect-ratio:4/3}
.shop-media-choice .shop-media-caption{padding:6px 8px 7px}
.shop-media-choice-action{font-size:11.5px;font-weight:650;padding:5px 8px;color:color-mix(in srgb,var(--accent) 82%,var(--ink));border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,var(--panel))}
.shop-media-choice[aria-pressed=true] .shop-media-choice-action{color:var(--ink);background:var(--nav-hover)}

.shop-media-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.shop-media-page{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.shop-media-note{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.shop-media-note:empty{display:none}
.shop-media-note.error{color:var(--danger)}

@media (max-width:600px){
  .shop-media-chosen-row{grid-template-columns:auto minmax(0,1fr);align-items:start}
  .shop-media-chosen-actions{grid-column:1/-1;justify-content:flex-start}
  .shop-media-field .shop-media-single{max-width:100%}
  .shop-media-results{grid-template-columns:repeat(auto-fill,minmax(min(100%,110px),1fr));max-height:18rem}
}