/* Product content uses catalogue values and the shared audio and composition navigation controllers. */
.koshi-products__listen[type="button"] { padding: 0; border: 0; background: transparent; font: inherit; text-align: inherit; cursor: pointer; }
.koshi-products { --koshi-products-gap: 1.5rem; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; }
.koshi-products__items { display: grid; gap: var(--koshi-products-gap); align-items: stretch; }
.koshi-products--gap-small { --koshi-products-gap: .75rem; }
.koshi-products--gap-large { --koshi-products-gap: clamp(1.5rem, 4vw, 3rem); }
.koshi-products__item:not(.qr-figma-tab):not(.home-hero__slide):not(.koshi-products__editorial) { display: flex; flex-direction: column; min-inline-size: 0; overflow: hidden; border-radius: .5rem; background: var(--koshi-paper); }
.koshi-products__media { display: block; min-inline-size: 0; }
.koshi-products__media img { display: block; inline-size: 100%; block-size: auto; max-inline-size: 100%; object-fit: cover; }
.koshi-products--image-ratio-landscape .koshi-products__media img { aspect-ratio: 16 / 9; }
.koshi-products--image-ratio-square .koshi-products__media img { aspect-ratio: 1; }
.koshi-products--image-ratio-portrait .koshi-products__media img { aspect-ratio: 2 / 3; }
.koshi-products--image-fit-contain .koshi-products__media img { object-fit: contain; }
.koshi-products__copy { display: flex; flex: 1; flex-direction: column; align-items: start; gap: .75rem; padding: clamp(1rem, 2vw, 1.5rem); min-inline-size: 0; }
.koshi-products__title { margin: 0; font-family: var(--koshi-serif); font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.25; overflow-wrap: anywhere; }
.koshi-products__title a { color: inherit; text-decoration: none; }
.koshi-products__badge { display: inline-block; max-inline-size: 100%; padding: .25em .5em; background: var(--koshi-sage-soft); overflow-wrap: anywhere; }
.koshi-products__price { margin: 0; }
.koshi-products__button { margin-block-start: auto; }
.koshi-products--alignment-center .koshi-products__copy { align-items: center; text-align: center; }
.koshi-products--alignment-end .koshi-products__copy { align-items: end; text-align: end; }
.koshi-products--columns-1 { --koshi-products-columns: 1; }
.koshi-products--columns-2 { --koshi-products-columns: 2; }
.koshi-products--columns-3 { --koshi-products-columns: 3; }
.koshi-products--columns-4 { --koshi-products-columns: 4; }
.koshi-products--layout-grid .koshi-products__items { grid-template-columns: repeat(var(--koshi-products-columns, 3), minmax(0, 1fr)); }
.koshi-products--image-position-start .koshi-products__item:not(.qr-figma-tab):not(.home-hero__slide) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.koshi-products__item:not(.qr-figma-tab):not(.home-hero__slide):not(:has(.koshi-products__media)) { grid-template-columns: minmax(0, 1fr); }
.koshi-products__item:not(.qr-figma-tab):not(.home-hero__slide):not(:has(.koshi-products__copy)) { grid-template-columns: minmax(0, 1fr); }
.koshi-products__status { margin-block: 0 1rem; }
@media (max-width: 47.99rem) {
  /* The compact hero badge is too small for a readable mobile label. */
  .koshi-products--presentation-compact .home-hero__player-badge { display: none; }
  .koshi-products { --koshi-products-columns: 1; }
  .koshi-products--image-position-start .koshi-products__item:not(.qr-figma-tab):not(.home-hero__slide) { grid-template-columns: minmax(0, 1fr); }
}

/* Scope historical skin classes so they also work outside a page shell. */
.koshi-products__item.home-hero__slide { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .5rem; padding: .5rem; border-radius: .5rem; background: rgb(242 242 242 / 20%); color: inherit; }
.koshi-products--presentation-compact .koshi-products__copy { padding: 0; gap: .5rem; }
.koshi-products--presentation-compact .koshi-products__title { font-size: clamp(1.1rem, 2cqi, 1.5rem); }
.koshi-products--presentation-compact .koshi-products__button { padding: .35em .75em; border: .0625rem solid currentColor; border-radius: .25rem; color: inherit; text-decoration: none; }
.koshi-products__media { position: relative; }
.koshi-products__media img.koshi-products__hover { position: absolute; inset: 0; block-size: 100%; opacity: 0; transition: opacity .2s ease; }
.koshi-products__media--hover:is(:hover, :focus-visible) .koshi-products__hover { opacity: 1; }
.koshi-products__subtitle, .koshi-products__description, .koshi-products__rating, .koshi-products__notes { margin: 0; overflow-wrap: anywhere; }
.koshi-products__features.qr-figma-tab__meta { position: static; display: grid; gap: .5rem; margin: 0; padding-inline-start: 1.25rem; max-inline-size: 100%; }
.koshi-products__panel { min-inline-size: 0; }
.koshi-products__items > .koshi-navigation { min-inline-size: 0; }
.koshi-products { container-type: inline-size; }
/* A composed collection owns its complete width; other detail leaves own their local width. */
.koshi-products--presentation-details { container-name: koshi-products koshi-editorial; }
.koshi-primitive--container.koshi-primitive--profile-collection { container-name: koshi-layout koshi-editorial; }
.koshi-primitive--profile-collection > .koshi-container__layout > .koshi-products--presentation-details,
.koshi-primitive--profile-collection > .koshi-container__layout > .koshi-editor-block > .koshi-products--presentation-details { container-name: koshi-products; }
@container (max-width: 38rem) {
  .koshi-products--layout-grid .koshi-products__items { grid-template-columns: minmax(0, 1fr); }
  .koshi-products--image-position-start .koshi-products__item:not(.qr-figma-tab):not(.home-hero__slide) { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .koshi-products__hover { transition: none; } }

/* Detail anatomy belongs to the shared listening skin; only optional capabilities adapt here. */
.koshi-products__item.qr-figma-tab { max-inline-size: 100%; }
.koshi-products__item.qr-figma-tab:not(:has(> .qr-figma-tab__image)) { grid-template-columns: minmax(0, 1fr); }
.koshi-products__item.qr-figma-tab:not(:has(> .qr-figma-tab__image)) > .qr-figma-tab__content { grid-column: 1; inline-size: auto; padding-inline: 1.75rem; }
.koshi-products__item.qr-figma-tab:not(:has(> .qr-figma-tab__content)) { grid-template-columns: minmax(0, 1fr); }
.koshi-products--image-fit-contain .qr-figma-tab__image { object-fit: contain; }
.koshi-products--alignment-center .qr-figma-tab__content { text-align: center; }
.koshi-products--alignment-end .qr-figma-tab__content { text-align: end; }

/* Apply the existing collection tab skin to controls generated by shared Navigation. */
.koshi-products--presentation-details.koshi-products--layout-tabs > .koshi-products__items > .koshi-navigation--tabs { margin-block-start: 0; border-radius: 1rem; overflow: hidden; }
.koshi-products--presentation-details.koshi-products--layout-tabs > .koshi-products__items > .koshi-navigation--tabs > .koshi-navigation__viewport { order: 0; }
.koshi-products--presentation-details.koshi-products--layout-tabs > .koshi-products__items > .koshi-navigation--tabs > .koshi-composition-navigation { order: 1; margin: 0; gap: 0; align-items: stretch; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(var(--koshi-product-count, 1), 1fr); overflow:hidden; border-radius:0 1rem 1rem 0; }
.koshi-products--presentation-details.koshi-products--layout-tabs .koshi-composition-navigation__button { max-inline-size: none; }
.koshi-products--presentation-details.koshi-products--layout-tabs .koshi-composition-navigation__button:first-child { border-start-end-radius:1rem; }
.koshi-products--presentation-details.koshi-products--layout-tabs .koshi-composition-navigation__button:last-child { border-end-end-radius:1rem; }
@container koshi-editorial (max-width: 83rem) {
  .koshi-products--presentation-details.koshi-products--layout-tabs > .koshi-products__items > .koshi-navigation--tabs > .koshi-composition-navigation { grid-template-rows: none; grid-template-columns: repeat(var(--koshi-product-count, 1), minmax(0, 1fr)); border-radius:0 0 1rem 1rem; }
  .koshi-products--presentation-details.koshi-products--layout-tabs .koshi-composition-navigation__button:first-child { border-start-end-radius:0; border-end-start-radius:1rem; }
}
@container koshi-editorial (max-width: 47.5rem) {
  .koshi-products--presentation-details.koshi-products--layout-tabs > .koshi-products__items > .koshi-navigation--tabs > .koshi-composition-navigation { grid-template-columns: repeat(var(--koshi-product-mobile-columns, 1), minmax(0, 1fr)); }
  .koshi-products--presentation-details.koshi-products--layout-tabs .koshi-composition-navigation__button:first-child { border-end-start-radius:0; }
  .koshi-products--presentation-details.koshi-products--layout-tabs .koshi-composition-navigation__button:nth-last-child(2) { border-end-start-radius:1rem; }
}

/* Compact controller keeps the existing card navigation anatomy. */
.koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-products .koshi-composition-navigation { flex-wrap:nowrap; gap:.5rem; margin-block:.5rem 0; }
.koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-products .koshi-composition-navigation__dot { min-inline-size:0; flex:none; }
.koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-products .koshi-composition-navigation__dot > span { display:none; }
.koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-products :is([data-koshi-navigation-previous],[data-koshi-navigation-next]) { font-size:0; flex:none; order:1; }
.koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-products [data-koshi-navigation-previous] { margin-inline-start:auto; }
.koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-products [data-koshi-navigation-next] { margin-inline-start:-.3125rem; }

/* Shared compact navigation glyphs stay visible without external mask loading. */
.koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-products :is([data-koshi-navigation-previous],[data-koshi-navigation-next])::before {
  content:"";
  display:block;
  inline-size:.4375rem;
  block-size:.4375rem;
  border:solid currentColor;
  border-width:0 1px 1px 0;
  transform:rotate(135deg);
}
.koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-products [data-koshi-navigation-next]::before { transform:rotate(-45deg); }

/* Compact media has an intrinsic frame; optional containment remains effective. */
.koshi-products--presentation-compact .koshi-products__badge { position:absolute; }
.koshi-products--presentation-compact .koshi-products__image { max-inline-size:100%; object-fit:cover; }
.koshi-products--presentation-compact.koshi-products--image-fit-contain .koshi-products__image { object-fit:contain; }
.koshi-products--presentation-compact .koshi-products__item:not(:has(> .koshi-products__image)) { grid-template-columns:minmax(0,1fr); }

.koshi-products__listen { display:inline-flex; align-items:center; gap:.25rem; color:inherit; text-decoration:none; }

/* Editorial references retain the unboxed, single-link anatomy. */
.koshi-products__item.koshi-products__editorial { display:block; background:transparent; border-radius:0; overflow:visible; }
.koshi-products__editorial-link { text-align:center; }
.koshi-products__editorial-link > .koshi-products__title { font-family:var(--koshi-display); font-size:1.25rem; font-weight:400; }
.koshi-products__editorial-link > .koshi-products__subtitle { text-transform:uppercase; letter-spacing:.04em; }
.koshi-products__editorial > .koshi-products__copy { align-items:center; padding:0; margin-block-start:1rem; }
.koshi-products--image-fit-contain .koshi-products__editorial-link > img { object-fit:contain; }

/* Gallery reuses the collection card charter; column and fit choices remain effective. */
.koshi-products--presentation-gallery.koshi-products--columns-1 { --koshi-gallery-columns: 1; }
.koshi-products--presentation-gallery.koshi-products--columns-2 { --koshi-gallery-columns: 2; }
.koshi-products--presentation-gallery.koshi-products--columns-3 { --koshi-gallery-columns: 3; }
.koshi-products--presentation-gallery.koshi-products--columns-4 { --koshi-gallery-columns: 4; }
.koshi-products--presentation-gallery.koshi-products--image-fit-contain[class] .home-element-card__image { object-fit: contain; }

.koshi-products--presentation-hotspots.koshi-products--image-fit-contain .home-earth-card__media > img { object-fit:contain; }

/* Compact listening remains available when the cover stacks on a narrow canvas. */
@container koshi-editorial (max-width: 61.25rem) {
  .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay { display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; gap:1.5rem; padding:6rem 1rem 2rem; height:auto; }
  .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-primitive--container:not(.koshi-primitive--placement-role-background) { position:relative; inset:auto; display:block; width:100%; height:auto; max-width:none; padding:0; transform:none; z-index:2; }
  .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-products--presentation-compact { position:relative; inset:auto; display:block; width:100%; max-width:22.5rem; min-width:0; height:auto; margin-inline:auto; }
  .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-products__items { width:100%; height:auto; }
  .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .home-hero__slide:not([hidden]) { position:relative; display:grid; width:100%; height:auto; grid-template-columns:5.5rem minmax(0,1fr); gap:.875rem; align-items:start; }
  .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-products__copy { min-width:0; }
  .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-products__title { font-size:1.5rem; line-height:1; overflow-wrap:anywhere; }
  .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .home-hero__player-listen { display:inline-flex; align-items:center; gap:.25rem; margin-top:.5rem; color:inherit; }
  .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .home-hero__player-listen svg { width:1.25rem; height:1.25rem; fill:currentColor; }
}