.carousel-header { padding-inline: 1.25rem; text-align: center; }
.collection-title { 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-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; }
.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: 3rem;
  align-items: center;
}
#products .carousel-header { width: 100%; max-width: var(--content-width); padding: 0; margin: 0; text-align: left; }
#products .collection-title { margin: 0; }
#products .collection-description { margin: 1rem 0 0 !important; max-width: 62ch; text-align: left; }
#products .carousel { width: min(100%, 380px); margin: 0 auto; min-width: 0; }
#products .carousel-error { text-align: left; margin-inline: 0; }

.product-showcase { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; width: 100%; margin: 0; align-items: start; }
.product-showcase.is-wide { grid-template-columns: 380px minmax(0, 1fr); gap: 3rem; }
.product-review-column { width: 100%; max-width: 380px; min-width: 0; margin: 0; }
.product-shop-column { width: 100%; max-width: 400px; min-width: 0; margin: 0; }
.product-column-intro { margin: 0 0 1.25rem; color: var(--brand); font-size: 1rem; font-weight: 500; line-height: 1.5; text-align: left; }
.product-badges { display: grid; gap: 1rem; width: 100%; max-width: 400px; margin: 0 auto; padding: 0; list-style: none; }
.product-badge { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: .75rem; align-items: center; padding: .75rem; border: 1px solid #d7c8a3; border-radius: 16px; background: #f3ecd9; color: #244841; text-decoration: none; }
.product-badge:hover { border-color: #244841; background: #ebe1c8; }
.product-badge:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.product-badge img { display: block; width: 100%; height: 90px; object-fit: contain; }
.product-badge h3 { margin: 0 0 .35rem; font: 700 1rem/1.25 var(--font-body, sans-serif); color: inherit; }
.product-badge p { margin: 0 0 .4rem; font-size: .875rem; line-height: 1.4; color: #526052; }
.product-badge-label { font-size: .875rem; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 360px) { .product-badge { padding: .75rem; gap: .625rem; grid-template-columns: 68px minmax(0, 1fr); } }

html[data-theme="dark"] .product-badge { background: var(--bg-soft); border-color: var(--line-strong); color: var(--text); }
html[data-theme="dark"] .product-badge p { color: var(--text-soft); }
html[data-theme="dark"] .product-badge:hover { background: var(--surface-strong); border-color: var(--brand); }