.carousel-header { padding-inline: 1.25rem; text-align: center; }
.collection-title { font: clamp(2rem, 5vw, 3rem)/1.1 Georgia, serif; margin: .6rem 0; }
.carousel-header > p:last-child { color: var(--text-soft); margin: .75rem 0 0; }
.carousel { width: min(100% - 2rem, 440px); margin: 2rem auto 0; outline-offset: 6px; }
.carousel-stage { width: 100%; }
.carousel .ivp-time { color: var(--ivp-frame-green); background: color-mix(in srgb, var(--ivp-bg) 84%, transparent); }
.carousel-thumbnails {
  --fade-left: #000; --fade-right: #000;
  display: flex; min-width: 0; gap: .75rem; overflow-x: auto;
  overscroll-behavior-x: contain; padding: .5rem 6px .5rem; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, var(--fade-left), #000 18px, #000 calc(100% - 18px), var(--fade-right));
  mask-image: linear-gradient(to right, var(--fade-left), #000 18px, #000 calc(100% - 18px), var(--fade-right));
}
.carousel-thumbnails::-webkit-scrollbar { display: none; }
.carousel-thumbnails.has-more-left { --fade-left: transparent; }
.carousel-thumbnails.has-more-right { --fade-right: transparent; }
.carousel-thumb { display: flex; flex-direction: column; flex: 0 0 76px; padding: 0; border: 1px solid var(--brand); border-radius: 12px; background: var(--bg-soft); color: var(--text-soft); font: inherit; cursor: pointer; overflow: hidden; }
.carousel-thumb img { display: block; width: 100%; height: 76px; object-fit: cover; object-position: center 35%; pointer-events: none; }
.carousel-thumb span { display: block; padding: .35rem .2rem; font-size: .7rem; font-weight: 600; overflow-wrap: anywhere; }
.carousel-thumb[aria-pressed="true"] { padding: 0; border-width: 2px; border-color: var(--brand-deep); color: var(--brand-deep); box-shadow: -2px -2px 0 var(--brand-deep); }
.carousel-nav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: stretch; gap: .25rem; margin-top: 1.375rem; }
.carousel-nav > button { position: relative; width: 44px; height: 44px; min-height: 44px; align-self: center; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; }
.carousel-arrow-face { position: absolute; inset: 0; display: grid; place-items: center; border: 1px solid var(--accent); border-radius: inherit; background: var(--bg-soft); box-shadow: -3px -3px 0 var(--accent); pointer-events: none; }
.carousel-nav > button svg { width: 22px; height: 22px; fill: none; stroke: var(--brand); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.carousel-caption { margin: 0 auto; text-align: center; }
.carousel-count { color: var(--text-soft); font-size: .75rem; font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.carousel-title { font: 1.35rem/1.3 Georgia, serif; margin: .2rem 0; }
.carousel-note, .carousel-error { margin: 1.5rem 1rem 0; text-align: center; color: var(--text-soft); font-size: .75rem; }
.carousel :focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
/* Compact controls belong only to this carousel; the delivered player is untouched. */
.carousel .ivp-controls { grid-template-columns: 4.25rem 4.25rem minmax(0, 1fr) 44px; align-items: center; gap: .375rem .5rem; padding: .25rem .875rem 1rem; }
.carousel .ivp-controls .ivp-button:not(.ivp-captions) { display: grid; place-items: center; height: 44px; padding-block: 0; line-height: 1; --ivp-control-line: color-mix(in srgb, var(--ivp-frame-green) 45%, transparent); }
.carousel .ivp-seek { width: 100%; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; }
.carousel .ivp-seek::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--ivp-frame-green) 22%, var(--ivp-bg)); }
.carousel .ivp-seek::-moz-range-track { height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--ivp-frame-green) 22%, var(--ivp-bg)); }
.carousel .ivp-seek::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin-top: -4.5px; border: 0; border-radius: 50%; background: var(--ivp-brand); }
.carousel .ivp-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--ivp-brand); }
.carousel .ivp-play, .carousel .ivp-mute { width: 4.25rem; min-width: 4.25rem; }
.carousel .ivp-play { grid-column: 1; grid-row: 2; }
.carousel .ivp-mute { grid-column: 2; grid-row: 2; }
.carousel .ivp-controls .ivp-volume { grid-column: 3; grid-row: 2; width: 100%; }
.carousel .ivp-volume::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -8px; background-size: 14px 14px; }
.carousel .ivp-volume::-moz-range-thumb { width: 18px; height: 18px; background-size: 14px 14px; }
.carousel .ivp .ivp-captions { grid-column: 4; grid-row: 2; width: 32px; min-height: 32px; }

.carousel-collection + .carousel-collection { margin-top: 4rem; }
.collection-description { max-width: 48ch; margin-inline: auto !important; overflow-wrap: anywhere; }
.collection-title { overflow-wrap: anywhere; }

/* Landing-page layout; the player retains its existing visual treatment. */
#products .carousel-collection {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}
#products .carousel-header { width: 100%; padding: 0; margin: 0 auto; text-align: center; }
#products .collection-title { margin: 0; }
#products .collection-description { margin: 1rem auto 0 !important; max-width: 42ch; }
#products .carousel { width: min(100%, 380px); margin: 0 auto; min-width: 0; }
#products .carousel-error { text-align: left; margin-inline: 0; }
@media (max-width: 380px) {
  #products .carousel .ivp-controls {
    grid-template-columns: 3.75rem 3.75rem minmax(0, 1fr) 32px;
    padding-inline: .65rem;
  }
  #products .carousel .ivp-play,
  #products .carousel .ivp-mute { width: 3.75rem; min-width: 3.75rem; }
}

.carousel .ivp-controls--no-captions { grid-template-columns: 4.25rem 4.25rem minmax(0, 1fr); }

/* Keep touch controls usable even in the narrowest supported phone layout. */
@media (max-width: 600px), (pointer: coarse) {
  #products .carousel .ivp-controls { grid-template-columns: 3.75rem 3.75rem minmax(0, 1fr) 44px; column-gap: .375rem; }
  #products .carousel .ivp-controls--no-captions { grid-template-columns: 3.75rem 3.75rem minmax(0, 1fr); }
  #products .carousel .ivp-play, #products .carousel .ivp-mute { width: 3.75rem; min-width: 3.75rem; }
  #products .carousel .ivp-captions { width: 44px; min-height: 44px; }
}