.sv-color-gallery { width: 100%; }
.sv-color-gallery[hidden] { display: none; }
.sv-gallery-hero { position: relative; display: block; width: 100%; padding: 0; border: 1px solid #eee; background: #fff; cursor: zoom-in; }
.sv-gallery-hero img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.sv-gallery-loading { position: absolute; inset: 0; display: grid; place-items: center; background: #ffffff26; opacity: 0; pointer-events: none; transition: opacity 120ms ease; }
.sv-color-gallery[aria-busy="true"] .sv-gallery-loading { opacity: 1; }
.sv-gallery-spinner { width: 30px; height: 30px; border: 3px solid #0003; border-top-color: #222; border-radius: 50%; background: #ffffffc9; box-shadow: 0 0 0 8px #ffffffc9; }
.sv-color-gallery[aria-busy="true"] .sv-gallery-spinner { animation: sv-gallery-spin 700ms linear infinite; }
.sv-color-gallery [aria-disabled="true"] { cursor: progress; }
.sv-gallery-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes sv-gallery-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sv-gallery-loading { transition: none; }
  .sv-color-gallery[aria-busy="true"] .sv-gallery-spinner { animation: none; }
}
.sv-gallery-thumbnails { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px auto 0; }
.sv-gallery-thumbnails button { flex: 0 0 min(25%, 110px); padding: 0; width: min(25%, 110px); border: 1px solid #eee; background: #fff; cursor: pointer; }
/* Keep short galleries generous; dense galleries use roughly half-size views. */
.sv-gallery-thumbnails:has(> button:nth-child(5)) { gap: 8px; }
.sv-gallery-thumbnails:has(> button:nth-child(5)) button { flex-basis: clamp(44px, 8%, 55px); width: clamp(44px, 8%, 55px); }
.sv-gallery-thumbnails button[aria-pressed="true"] { outline: 2px solid #222; outline-offset: 1px; }
.sv-gallery-thumbnails img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.sv-color-gallery button:focus-visible { outline: 3px solid #477dc0; outline-offset: 3px; }
.sv-color-gallery dialog { border: 0; padding: 16px; width: min(90vw, 1000px); max-height: 94vh; background: #fff; }
.sv-color-gallery dialog::backdrop { background: #0009; }
.sv-color-gallery dialog img { display: block; width: 100%; max-height: 82vh; object-fit: contain; }
.sv-color-gallery dialog button { display: block; margin-left: auto; padding: 10px 20px; cursor: pointer; }
@media (max-width: 749px) { .sv-color-gallery { padding: 0 15px; box-sizing: border-box; } }