.zz-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid;
  border-radius: 0;
  background-clip: padding-box;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-decoration: none;
  white-space: nowrap;
  background-color: var(--zz-btn-bg);
  border-color: var(--zz-btn-border);
  color: var(--zz-btn-fg);
}
.zz-button__label { display: inline-flex; align-items: center; }
.zz-button__icon { display: inline-flex; flex: none; }
.zz-button__icon > svg { width: 100%; height: 100%; display: block; }
.zz-button__icon svg [fill]:not([fill="none"]) { fill: var(--zz-btn-icon); }
.zz-button__icon svg [stroke]:not([stroke="none"]) { stroke: var(--zz-btn-icon); }
.zz-button[data-size="large"] {
  padding: 12px;
  gap: 8px;
}
.zz-button[data-size="large"] .zz-button__label { gap: 4px; }
.zz-button[data-size="large"] .zz-button__icon { width: 20px; height: 20px; }
.zz-button[data-size="medium"] {
  padding: 8px;
  gap: 8px;
}
.zz-button[data-size="medium"] .zz-button__label { gap: 4px; }
.zz-button[data-size="medium"] .zz-button__icon { width: 20px; height: 20px; }
.zz-button[data-size="small"] {
  padding: 8px;
  gap: 8px;
}
.zz-button[data-size="small"] .zz-button__label { gap: 4px; }
.zz-button[data-size="small"] .zz-button__icon { width: 14px; height: 14px; }
.zz-button[data-size="extra-small"] {
  padding: 4px;
  gap: 2px;
}
.zz-button[data-size="extra-small"] .zz-button__label { gap: 2px; }
.zz-button[data-size="extra-small"] .zz-button__icon { width: 14px; height: 14px; }
.zz-button[data-hierarchy="primary"] {
  --zz-btn-bg: var(--action-primary-background-default);
  --zz-btn-border: var(--action-primary-border-default);
  --zz-btn-fg: var(--text-strong-invert);
  --zz-btn-icon: var(--icon-strong-invert);
}
.zz-button[data-hierarchy="primary"][data-state="hover"] {
  --zz-btn-bg: var(--action-primary-background-hover);
  --zz-btn-border: var(--action-primary-border-hover);
}
@media (hover: hover) {   
  .zz-button[data-hierarchy="primary"]:hover {
    --zz-btn-bg: var(--action-primary-background-hover);
    --zz-btn-border: var(--action-primary-border-hover);
  }
}
.zz-button[data-hierarchy="primary"]:active,
.zz-button[data-hierarchy="primary"][data-state="pressed"] {
  --zz-btn-bg: var(--action-primary-background-pressed);
  --zz-btn-border: var(--action-primary-border-pressed);
}
.zz-button[data-hierarchy="primary"]:disabled,
.zz-button[data-hierarchy="primary"][data-state="disabled"] {
  --zz-btn-bg: var(--action-primary-background-disabled);
  --zz-btn-border: var(--action-primary-border-disabled);
  --zz-btn-fg: var(--text-strong);
  --zz-btn-icon: var(--icon-strong);
}
.zz-button[data-hierarchy="secondary"] {
  --zz-btn-bg: var(--action-secondary-background-default);
  --zz-btn-border: var(--action-secondary-border-default);
  --zz-btn-fg: var(--text-strong);
  --zz-btn-icon: var(--icon-strong);
}
.zz-button[data-hierarchy="secondary"][data-state="hover"] {
  --zz-btn-bg: var(--action-secondary-background-hover);
  --zz-btn-border: var(--action-secondary-border-hover);
}
@media (hover: hover) {
  .zz-button[data-hierarchy="secondary"]:hover {
    --zz-btn-bg: var(--action-secondary-background-hover);
    --zz-btn-border: var(--action-secondary-border-hover);
  }
}
.zz-button[data-hierarchy="secondary"]:active,
.zz-button[data-hierarchy="secondary"][data-state="pressed"] {
  --zz-btn-bg: var(--action-secondary-background-pressed);
  --zz-btn-border: var(--action-secondary-border-pressed);
}
.zz-button[data-hierarchy="secondary"]:disabled,
.zz-button[data-hierarchy="secondary"][data-state="disabled"] {
  --zz-btn-bg: var(--action-secondary-background-disabled);
  --zz-btn-border: var(--action-secondary-border-disabled);
}
.zz-button[data-hierarchy="primary"][data-state="active"],
.zz-button[data-hierarchy="primary"][aria-current="page"] {
  --zz-btn-bg: var(--action-primary-background-active);
  --zz-btn-border: var(--action-primary-border-active);
  --zz-btn-fg: var(--text-strong);
  --zz-btn-icon: var(--icon-strong);
}
.zz-button[data-hierarchy="secondary"][data-state="active"],
.zz-button[data-hierarchy="secondary"][aria-current="page"] {
  --zz-btn-bg: var(--action-secondary-background-active);
  --zz-btn-border: var(--action-secondary-border-active);
}
.zz-button[data-state="active"], .zz-button[aria-current="page"] { cursor: default; }
.zz-button[data-hierarchy="secondary"] {
  --zz-dash-on: 4px;
  --zz-dash-off: 0px;                         
  border-color: transparent;
  background-origin: border-box;
  background-clip: border-box;
  background-repeat: no-repeat;
  background-image:
    repeating-linear-gradient(90deg,  var(--zz-btn-border) 0 var(--zz-dash-on), transparent var(--zz-dash-on) calc(var(--zz-dash-on) + var(--zz-dash-off))),
    repeating-linear-gradient(90deg,  var(--zz-btn-border) 0 var(--zz-dash-on), transparent var(--zz-dash-on) calc(var(--zz-dash-on) + var(--zz-dash-off))),
    repeating-linear-gradient(180deg, var(--zz-btn-border) 0 var(--zz-dash-on), transparent var(--zz-dash-on) calc(var(--zz-dash-on) + var(--zz-dash-off))),
    repeating-linear-gradient(180deg, var(--zz-btn-border) 0 var(--zz-dash-on), transparent var(--zz-dash-on) calc(var(--zz-dash-on) + var(--zz-dash-off)));
  background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  transition: --zz-dash-on 150ms ease-out, --zz-dash-off 150ms ease-out, background-color 150ms ease-out;
}
.zz-button[data-hierarchy="secondary"][data-state="hover"] { --zz-dash-on: 4px; --zz-dash-off: 4px; }   
@media (hover: hover) { .zz-button[data-hierarchy="secondary"]:hover { --zz-dash-on: 4px; --zz-dash-off: 4px; } }
.zz-button[data-hierarchy="secondary"]:active,
.zz-button[data-hierarchy="secondary"][data-state="pressed"] { --zz-dash-on: 2px; --zz-dash-off: 2px; } 
.zz-button[data-hierarchy="secondary"]:disabled,
.zz-button[data-hierarchy="secondary"][data-state="disabled"] { --zz-dash-on: 4px; --zz-dash-off: 0px; } 
.zz-button[data-hierarchy="secondary"][data-state="active"],
.zz-button[data-hierarchy="secondary"][aria-current="page"] { --zz-dash-on: 4px; --zz-dash-off: 0px; } 
@media (prefers-reduced-motion: reduce) { .zz-button[data-hierarchy="secondary"] { transition: none; } }
.zz-button:disabled,
.zz-button[data-state="disabled"] { cursor: not-allowed; }
.zz-button:disabled .zz-button__label,
.zz-button[data-state="disabled"] .zz-button__label { text-decoration: line-through; }
.zz-tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;                 
  margin: 0;
  padding: 0;
}
.zz-tab,
a.zz-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: 8px;
  gap: 8px;
  border: 1px solid;
  border-radius: 0;
  background-origin: border-box;   
  background-clip: border-box;
  background-repeat: no-repeat;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  white-space: nowrap;
  color: var(--text-strong);
  text-decoration: none;
  background-color: var(--tab-background-default);
  border-color: transparent;     
}
.zz-tab__label { display: inline-flex; align-items: center; gap: 4px; }
.zz-tab__icon { display: inline-flex; flex: none; width: 20px; height: 20px; color: var(--icon-strong); }
.zz-tab__icon > svg { width: 100%; height: 100%; display: block; }
@property --zz-dash-on  { syntax: "<length>"; inherits: false; initial-value: 4px; }
@property --zz-dash-off { syntax: "<length>"; inherits: false; initial-value: 0px; }
.zz-tab {
  --zz-dash-color: var(--tab-border-default);
  --zz-dash-on: 4px;
  --zz-dash-off: 0px;                           
  background-image:
    repeating-linear-gradient(90deg,  var(--zz-dash-color) 0 var(--zz-dash-on), transparent var(--zz-dash-on) calc(var(--zz-dash-on) + var(--zz-dash-off))),
    repeating-linear-gradient(90deg,  var(--zz-dash-color) 0 var(--zz-dash-on), transparent var(--zz-dash-on) calc(var(--zz-dash-on) + var(--zz-dash-off))),
    repeating-linear-gradient(180deg, var(--zz-dash-color) 0 var(--zz-dash-on), transparent var(--zz-dash-on) calc(var(--zz-dash-on) + var(--zz-dash-off))),
    repeating-linear-gradient(180deg, var(--zz-dash-color) 0 var(--zz-dash-on), transparent var(--zz-dash-on) calc(var(--zz-dash-on) + var(--zz-dash-off)));
  background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  transition: --zz-dash-on 150ms ease-out, --zz-dash-off 150ms ease-out, background-color 150ms ease-out;
}
@media (prefers-reduced-motion: reduce) { .zz-tab { transition: none; } }
.zz-tab[data-state="hover"] {
  background-color: var(--tab-background-hover);
  --zz-dash-color: var(--tab-border-hover);
  --zz-dash-on: 4px;  --zz-dash-off: 4px;      
}
@media (hover: hover) {   
  .zz-tab:hover {
    background-color: var(--tab-background-hover);
    --zz-dash-color: var(--tab-border-hover);
    --zz-dash-on: 4px;  --zz-dash-off: 4px;
  }
}
.zz-tab:active,
.zz-tab[data-state="pressed"] {
  background-color: var(--tab-background-pressed);
  --zz-dash-color: var(--tab-border-pressed);
  --zz-dash-on: 2px;  --zz-dash-off: 2px;      
}
.zz-tab[aria-selected="true"],
.zz-tab[data-selected="true"],
.zz-tab[data-state="active"] {
  background-color: var(--tab-background-active);
  --zz-dash-color: var(--tab-border-active);
  --zz-dash-on: 4px;  --zz-dash-off: 0px;      
  cursor: default;
}
.zz-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 8px 0 0;            
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  color: var(--text-strong);
  background: var(--surface-accent);   
}
.zz-header__row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;     
}
.zz-header__leading,
.zz-header__trailing {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.zz-header__leading { align-items: flex-start; min-height: 46px; }   
.zz-header__trailing { align-items: center; }
.zz-header__tabs { display: flex; }
.zz-header__logo { flex: none; width: 64px; height: 64px; overflow: hidden; }
.zz-header[data-device="mobile"] .zz-header__logo { width: 48px; height: 48px; }
.zz-header[data-logo="inside"] .zz-header__logo,
.zz-header[data-logo="hidden"] .zz-header__logo { display: none; }
.zz-header__name-logo { display: none; flex: none; width: 36px; height: 36px; overflow: hidden; }
.zz-header__name-logo > img,
.zz-header__name-logo > svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.zz-header[data-logo="inside"] .zz-header__name-logo { display: block; }
.zz-header[data-logo="inside"] .zz-header__name { padding: 0 8px 0 0; }
.zz-header__logo > img,
.zz-header__logo > svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.zz-header__name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 8px;
  gap: 8px;
  border: 1px solid transparent;
  background-origin: border-box;
  background-clip: border-box;
  background-repeat: no-repeat;
  background-image:
    repeating-linear-gradient(90deg,  var(--zz-name-border, var(--border-divider-strong)) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(90deg,  var(--zz-name-border, var(--border-divider-strong)) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(180deg, var(--zz-name-border, var(--border-divider-strong)) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(180deg, var(--zz-name-border, var(--border-divider-strong)) 0 8px, transparent 8px 16px);
  background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  border-radius: 0;
  color: var(--text-strong);
  text-decoration: none;
  white-space: nowrap;
}
.zz-header__name[data-state="active"] { --zz-name-border: var(--tab-border-active); background-color: var(--tab-background-active); }
.zz-header__name[aria-current="page"] { cursor: default; }
.zz-header__rule { height: 1px; width: 100%; background: var(--border-divider-strong); }
.zz-header__search { width: 280px; }
.zz-header[data-device="responsive"] .zz-header__search-link { display: none; }
.zz-header[data-device="responsive"] .zz-header__menu { display: none; }
@media (max-width: 959px) {
  .zz-header[data-device="responsive"] .zz-header__search { display: none; }
  .zz-header[data-device="responsive"] .zz-header__search-link { display: inline-flex; }
  .zz-header[data-device="responsive"] .zz-header__menu { display: inline-flex; }
  .zz-header[data-device="responsive"] .zz-header__tabs { display: none; }
  .zz-header[data-device="responsive"] .zz-header__account { display: none; }   
  .zz-header[data-device="responsive"] .zz-header__logo { width: 48px; height: 48px; }
}
.zz-breadcrumbs { display: flex; flex-direction: column; width: 100%; }
.zz-breadcrumbs__list {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;            
  overflow-x: auto;
  white-space: nowrap;
  gap: 4px;                     
  margin: 0;
  padding: var(--small);        
  list-style: none;
  color: var(--text-strong);
}
.zz-breadcrumbs__item a { color: inherit; text-decoration: none; }
.zz-breadcrumbs__sep, .zz-breadcrumbs__item { flex: none; }
.zz-breadcrumbs__rule { height: 1px; width: 100%; background: var(--border-divider-strong); }
.zz-active-filter { display: flex; flex-direction: column; width: 100%; }
.zz-active-filter[hidden] { display: none; }
.zz-active-filter__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: var(--small); }   
.zz-active-filter__rule { height: 1px; width: 100%; background: var(--border-divider-strong); }   
.zz-active-filter .zz-entity-chip:not([data-size="large"]) { height: 40px; }
.zz-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 0;
  background: var(--surface-support-1);
  color: var(--text-strong);
  white-space: nowrap;
}
a.zz-tag { text-decoration: none; }   
.zz-tag[data-size="extra-small"] { padding: 2px 4px; }
.zz-tag[data-size="small"]       { padding: 4px 8px; }
.zz-tag[data-size="medium"]      { padding: 4px 8px; }
.zz-tag[data-size="large"]       { padding: 4px 8px; }
.zz-tag-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;                 
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}
.zz-tag-group__item { display: contents; }
.zz-player-button {
  display: inline-flex;
  align-items: center;
  gap: 0;                   
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--action-floating-background-default);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  color: var(--action-floating-foreground-default);
  white-space: nowrap;
}
.zz-player-button[data-state="hover"]    { color: var(--action-floating-foreground-hover);    background: var(--action-floating-background-hover); }
@media (hover: hover) { .zz-player-button:hover { color: var(--action-floating-foreground-hover); background: var(--action-floating-background-hover); } }   
.zz-player-button:active,
.zz-player-button[data-state="pressed"]  { color: var(--action-floating-foreground-pressed);  background: var(--action-floating-background-pressed); }
.zz-player-button:disabled,
.zz-player-button[data-state="disabled"] { color: var(--action-floating-foreground-disabled); background: var(--action-floating-background-disabled); cursor: not-allowed; }
.zz-icon-button {
  display: inline-flex;
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--action-floating-background-default);
  color: var(--action-floating-foreground-default);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.zz-icon-button[data-state="hover"]    { color: var(--action-floating-foreground-hover);    background: var(--action-floating-background-hover); }
@media (hover: hover) { .zz-icon-button:hover { color: var(--action-floating-foreground-hover); background: var(--action-floating-background-hover); } }   
.zz-icon-button:active,
.zz-icon-button[data-state="pressed"]  { color: var(--action-floating-foreground-pressed);  background: var(--action-floating-background-pressed); }
.zz-icon-button:disabled,
.zz-icon-button[data-state="disabled"] { color: var(--action-floating-foreground-disabled); background: var(--action-floating-background-disabled); cursor: not-allowed; }
.zz-icon-button__icon { display: inline-flex; width: 100%; height: 100%; color: inherit; }
.zz-icon-button__icon svg { width: 100%; height: 100%; display: block; }
.zz-player-button__icon { display: inline-flex; flex: none; width: 24px; height: 24px; color: inherit; }
.zz-player-button__icon svg { width: 100%; height: 100%; display: block; }
.zz-icon-play, .zz-icon-pause { display: contents; }
[data-playing="true"] .zz-icon-play,
[data-playing="false"] .zz-icon-pause { display: none; }
.zz-player {
  box-sizing: border-box;
  display: grid;
  gap: var(--gutter-small);                       
  padding: 8px var(--page-margin-desktop);        
  background: var(--surface-accent);                
  border-top: 1px solid var(--border-divider-strong);   
  color: var(--text-strong);
  grid-template-columns: auto minmax(0, 1fr) 136px min(800px, calc((100% - 24px - 2 * var(--gutter-small)) / 2)) 24px;
  grid-template-areas: "actions now controls native close";
  align-items: start;
}
.zz-player__now      { grid-area: now; display: flex; gap: 8px; min-width: 0; }
.zz-player__actions  { grid-area: actions; display: flex; gap: 4px; }
.zz-player__controls { grid-area: controls; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.zz-player__native   { grid-area: native; }
.zz-player__close    { grid-area: close; }
.zz-player__image { flex: none; width: 48px; height: 48px; overflow: hidden; }
.zz-player__image > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zz-player__title { display: flex; gap: 8px; min-width: 0; margin: 0; }
.zz-player__number { flex: none; }
.zz-player__names { display: flex; flex-direction: column; min-width: 0; }
.zz-player__sample, .zz-player__product { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zz-player__position { white-space: nowrap; }
.zz-player__transport { display: flex; gap: 8px; }
.zz-player__audio { display: block; width: 100%; height: 32px; }
.zz-player[data-device="mobile"] {
  padding: 8px var(--page-margin-mobile);
  grid-template-columns: auto minmax(0, 1fr) 24px;
  grid-template-areas: "now now close" "actions controls controls" "native native native";
  column-gap: 8px;
  row-gap: 8px;
}
.zz-player[data-device="mobile"] .zz-player__actions,
.zz-player[data-device="mobile"] .zz-player__controls { align-self: center; }
.zz-player[data-device="mobile"] .zz-player__native { padding-bottom: 8px; }
@media (max-width: 959px) {
  .zz-player[data-device="responsive"] {
    padding: 8px var(--page-margin-mobile);
    grid-template-columns: auto minmax(0, 1fr) 24px;
    grid-template-areas: "now now close" "actions controls controls" "native native native";
    column-gap: 8px;
    row-gap: 8px;
  }
  .zz-player[data-device="responsive"] .zz-player__actions,
  .zz-player[data-device="responsive"] .zz-player__controls { align-self: center; }
  .zz-player[data-device="responsive"] .zz-player__native { padding-bottom: 8px; }
}
.zz-product-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   
  gap: 0;
  width: 100%;
  padding-bottom: 64px;   
  color: var(--text-strong);
}
.zz-product-info[data-device="mobile"] { padding-bottom: 32px; }   
@media (max-width: 959px) { .zz-product-info[data-device="responsive"] { padding-bottom: 32px; } }
.zz-product-info p, .zz-product-info :is(h1, h2, h3, h4, h5, h6) { margin: 0; }   
.zz-product-info__details { grid-column: 1 / -1; display: flex; flex-direction: column; }
.zz-product-info__title-block { display: flex; flex-direction: column; padding-bottom: 16px; }
.zz-product-info__title-row { display: flex; flex-direction: row; align-items: flex-start; gap: var(--gutter-small); }
.zz-product-info__name { flex: 1 1 auto; min-width: 0; }
.zz-product-info__price { flex: none; }
.zz-product-info__tags { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; }
.zz-product-info__description-block { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; }
.zz-product-info__samples { grid-column: 2 / 4; display: flex; flex-direction: column; gap: 8px; }
.zz-product-info__samples .zz-player-button { width: 100%; justify-content: flex-start; }
.zz-product-info[data-device="mobile"] .zz-product-info__samples { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 16px; }
.zz-product-info[data-device="mobile"] .zz-product-info__samples .zz-player-button { width: auto; }
@media (max-width: 959px) {
  .zz-product-info[data-device="responsive"] .zz-product-info__samples { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 16px; }
  .zz-product-info[data-device="responsive"] .zz-product-info__samples .zz-player-button { width: auto; }
}
.zz-product-card {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  gap: var(--gutter-small);
  align-items: start;
  color: var(--text-strong);   
}
.zz-product-card[data-state="hover"] { background: var(--surface-hover); }
@media (hover: hover) {
  .zz-product-card:hover { background: var(--surface-hover); }
}
.zz-product-card p, .zz-product-card h1, .zz-product-card h2, .zz-product-card h3, .zz-product-card h4 { margin: 0; }
.zz-product-card__image {
  grid-column: 1 / 3; grid-row: 1 / -1;
  aspect-ratio: 1;   
  overflow: hidden;
  background: var(--surface-support-1);   
}
a.zz-product-card__image { display: block; color: inherit; }
.zz-product-card__image > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zz-product-card__info        { grid-column: 3 / 6; grid-row: 1 / -1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.zz-product-card__title-block { display: flex; flex-direction: column; min-width: 0; }
.zz-product-card__samples     { display: flex; flex-wrap: wrap; gap: 8px; }
.zz-product-card__purchase    { grid-column: 6 / 10; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.zz-product-card__add         { width: 100%; }   
.zz-product-card__description { grid-column: 6 / 10; grid-row: 2; display: flex; flex-direction: column; gap: 4px; }
.zz-product-card[data-device="responsive"] .zz-product-card__add[data-device="mobile"] { display: none; }
.zz-product-card[data-device="mobile"] {
  grid-template-columns: min(calc((100% - 11 * var(--gutter-small)) / 3 + 3 * var(--gutter-small)), 96px) minmax(0, 1fr) auto;   
  grid-template-rows: repeat(4, auto) minmax(16px, 1fr);   
  row-gap: 0;   
}
.zz-product-card[data-device="mobile"] .zz-product-card__image       { grid-column: 1; grid-row: 1 / -1; }
.zz-product-card[data-device="mobile"] .zz-product-card__info        { display: contents; }
.zz-product-card[data-device="mobile"] .zz-product-card__title-block { grid-column: 2; grid-row: 1; }
.zz-product-card[data-device="mobile"] .zz-product-card__description { grid-column: 2; grid-row: 2; margin-top: 8px; }
.zz-product-card[data-device="mobile"] .zz-product-card__tags        { grid-column: 2; grid-row: 3; margin-top: 8px; }
.zz-product-card[data-device="mobile"] .zz-product-card__samples     { grid-column: 2; grid-row: 4; margin-top: 8px; padding-top: 8px; }   
.zz-product-card[data-device="mobile"] .zz-product-card__purchase    { grid-column: 3; grid-row: 1 / -1; align-items: flex-end; }   
.zz-product-card[data-device="mobile"] .zz-product-card__add         { width: auto; }   
@media (max-width: 959px) {
  .zz-product-card[data-device="responsive"] {
    grid-template-columns: min(calc((100% - 11 * var(--gutter-small)) / 3 + 3 * var(--gutter-small)), 96px) minmax(0, 1fr) auto;   
    grid-template-rows: repeat(4, auto) minmax(16px, 1fr);   
    row-gap: 0;   
  }
  .zz-product-card[data-device="responsive"] .zz-product-card__image       { grid-column: 1; grid-row: 1 / -1; }
  .zz-product-card[data-device="responsive"] .zz-product-card__info        { display: contents; }
  .zz-product-card[data-device="responsive"] .zz-product-card__title-block { grid-column: 2; grid-row: 1; }
  .zz-product-card[data-device="responsive"] .zz-product-card__description { grid-column: 2; grid-row: 2; margin-top: 8px; }
  .zz-product-card[data-device="responsive"] .zz-product-card__tags        { grid-column: 2; grid-row: 3; margin-top: 8px; }
  .zz-product-card[data-device="responsive"] .zz-product-card__samples     { grid-column: 2; grid-row: 4; margin-top: 8px; padding-top: 8px; }   
  .zz-product-card[data-device="responsive"] .zz-product-card__purchase    { grid-column: 3; grid-row: 1 / -1; align-items: flex-end; }   
  .zz-product-card[data-device="responsive"] .zz-product-card__add         { width: auto; }   
  .zz-product-card[data-device="responsive"] .zz-product-card__add[data-device="desktop"] { display: none; }
  .zz-product-card[data-device="responsive"] .zz-product-card__add[data-device="mobile"]  { display: inline-flex; }
}
.zz-bag-item {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter-small);                   
  color: var(--text-strong);
  font-family: var(--font-sans);
}
.zz-bag-item p, .zz-bag-item h1, .zz-bag-item h2, .zz-bag-item h3, .zz-bag-item h4 { margin: 0; }
.zz-bag-item__image { flex: none; width: 96px; height: 96px; display: block; }   
.zz-bag-item__image > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zz-bag-item__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--small); }
.zz-bag-item__title-block { display: flex; flex-direction: column; min-width: 0; }
.zz-bag-item__link { color: inherit; text-decoration: none; }
@media (hover: hover) { .zz-bag-item__link:hover { text-decoration: underline; } }   
.zz-bag-item__description { display: flex; flex-direction: column; gap: 4px; }
.zz-bag-item__samples { display: flex; flex-wrap: wrap; gap: 8px; }
.zz-bag-item__purchase { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--small); }
.zz-bag-item:is([data-status="sold"], [data-status="reserved"]) .zz-bag-item__price { display: flex; align-items: center; gap: var(--small); white-space: nowrap; }
.zz-bag-item[data-device="mobile"]:is([data-status="sold"], [data-status="reserved"]) .zz-bag-item__price { flex-direction: column-reverse; align-items: flex-end; }
@media (max-width: 959px) { .zz-bag-item[data-device="responsive"]:is([data-status="sold"], [data-status="reserved"]) .zz-bag-item__price { flex-direction: column-reverse; align-items: flex-end; } }
.zz-bag-item[data-device="mobile"] .zz-bag-item__samples { padding-top: 8px; }
@media (max-width: 959px) { .zz-bag-item[data-device="responsive"] .zz-bag-item__samples { padding-top: 8px; } }
.zz-bag-summary { display: flex; flex-direction: column; gap: var(--small); color: var(--text-strong); font-family: var(--font-sans); }
.zz-bag-summary__ship-to > * { width: 100%; }
.zz-bag-summary__row[hidden] { display: none; }
.zz-bag-summary__rows { display: flex; flex-direction: column; gap: var(--small); margin: 0; }
.zz-bag-summary__row { display: flex; justify-content: space-between; gap: var(--small); }
.zz-bag-summary__row dt, .zz-bag-summary__row dd { margin: 0; }
.zz-bag-summary__row dd { text-align: right; }
.zz-bag-summary__checkout { width: 100%; }   
.zz-bag-summary__note { margin: 0; }
.zz-alert { margin: 0; padding: var(--small); background: var(--surface-alert); color: var(--text-on-alert); font-family: var(--font-sans); }
.zz-alert[data-layout="inline"] { display: inline-flex; padding: 2px 4px; }   
.zz-alert[hidden] { display: none; }
.zz-related-products {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--border-divider-strong);
  box-sizing: border-box;
  color: var(--text-strong);
  min-width: 0;
}
.zz-related-products__title { margin: 0; }
.zz-related-products__list  { display: flex; flex-direction: column; gap: 8px; }
.zz-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--gutter-small);       
  width: 100%;
  max-height: var(--zz-gallery-max-height, none);
  overflow-y: auto;
  scrollbar-width: none;          
}
.zz-gallery::-webkit-scrollbar { display: none; }
.zz-gallery:focus-visible { outline: auto; }   
.zz-gallery__item { flex: 0 0 auto; aspect-ratio: 1 / 1; overflow: hidden; }
.zz-gallery__item > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zz-gallery[data-device="mobile"] {
  display: flex;
  flex-direction: row;
  gap: 1px;                       
  max-height: none;
  overflow-y: hidden;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.zz-gallery[data-device="mobile"]::-webkit-scrollbar { display: none; }
.zz-gallery[data-device="mobile"] {
  width: auto;
  margin-inline: calc(-1 * var(--zz-gallery-bleed, 0px));
  padding-inline: var(--zz-gallery-bleed, 0px);
  scroll-padding-inline: var(--zz-gallery-bleed, 0px);
}
.zz-gallery[data-device="mobile"] .zz-gallery__item { flex: 0 0 100%; scroll-snap-align: start; }
@media (max-width: 959px) {
  .zz-gallery[data-device="responsive"] {
    display: flex;
    flex-direction: row;
    gap: 1px;
    max-height: none;
    overflow-y: hidden;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .zz-gallery[data-device="responsive"]::-webkit-scrollbar { display: none; }
  .zz-gallery[data-device="responsive"] {
    width: auto;
    margin-inline: calc(-1 * var(--zz-gallery-bleed, 0px));
    padding-inline: var(--zz-gallery-bleed, 0px);
    scroll-padding-inline: var(--zz-gallery-bleed, 0px);
  }
  .zz-gallery[data-device="responsive"] .zz-gallery__item { flex: 0 0 100%; scroll-snap-align: start; }
}
.zz-input {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: var(--text-strong);
}
.zz-input__top { display: flex; align-items: flex-start; gap: 8px; }
.zz-input__label { flex: 1 1 0; min-width: 0; color: var(--text-strong); }
.zz-input__optional { flex: none; color: var(--text-moderate); }
.zz-input__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid var(--border-divider-strong);
  border-radius: 0;
  background: var(--surface-accent);
  cursor: text;
}
.zz-input[data-size="compact"] .zz-input__field { gap: 4px; padding: 4px; }
.zz-input[data-variant="text-area"] .zz-input__field { align-items: flex-start; min-height: 120px; }
.zz-input[data-variant="text-area"] .zz-input__control { min-height: 102px; resize: vertical; }
.zz-input__control {
  flex: 1 1 0;
  min-width: 0;
  height: 20px;            
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-strong);
  font: inherit;           
  appearance: none;
  -webkit-appearance: none;
}
@supports selector(:has(*)) {
  .zz-input__control:focus-visible { outline: none; }
  .zz-input__field:has(.zz-input__control:focus-visible) { outline: auto; }
}
.zz-input__control::placeholder { color: var(--text-moderate); opacity: 1; }
.zz-input__control::-webkit-search-decoration,
.zz-input__control::-webkit-search-cancel-button { -webkit-appearance: none; }
.zz-input[data-variant="select"] .zz-input__field { cursor: pointer; }
.zz-input[data-variant="select"] .zz-input__control { cursor: inherit; padding-right: 28px; margin-right: -28px; }   
.zz-input[data-variant="select"] .zz-input__control:has(option[value=""]:checked) { color: var(--text-moderate); }
.zz-input[data-variant="select"][data-size="compact"] .zz-input__control { padding-right: 24px; margin-right: -24px; }
.zz-input__affix { flex: none; color: var(--text-strong); white-space: nowrap; }
.zz-input__icon { display: inline-flex; flex: none; width: 20px; height: 20px; color: var(--icon-strong); }
.zz-input__icon svg { width: 100%; height: 100%; display: block; }
.zz-input__icon--trailing { pointer-events: none; }
.zz-input__action {
  display: inline-flex; flex: none; width: 20px; height: 20px; padding: 0; margin: 0;
  border: 0; background: none; color: var(--icon-strong); cursor: pointer;
}
.zz-input__action svg { width: 100%; height: 100%; display: block; }
.zz-input__clear:has(+ .zz-input__control:placeholder-shown),
.zz-input:has(.zz-input__control:placeholder-shown) .zz-input__clear { display: none; }
.zz-input__support { margin: 0; color: var(--text-strong); }
.zz-input[data-invalid="true"] .zz-input__field { border-color: var(--border-alert); }
.zz-input[data-invalid="true"] .zz-input__support { color: var(--text-alert); }
.zz-input[data-locked="true"] .zz-input__field { border: 0; padding: 8px; background: var(--surface-subtle); cursor: default; }
.zz-input[data-locked="true"][data-size="compact"] .zz-input__field { padding: 4px; }
.zz-input[data-locked="true"] .zz-input__control { color: var(--text-moderate); }
.zz-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 25px 1px;       
  box-sizing: border-box;
  background-color: var(--surface-subtle);
  background-repeat: no-repeat;
  background-image:
    repeating-linear-gradient(90deg,  var(--border-divider-strong) 0 16px, transparent 16px 32px),
    repeating-linear-gradient(90deg,  var(--border-divider-strong) 0 16px, transparent 16px 32px),
    repeating-linear-gradient(180deg, var(--border-divider-strong) 0 16px, transparent 16px 32px),
    repeating-linear-gradient(180deg, var(--border-divider-strong) 0 16px, transparent 16px 32px);
  background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
}
.zz-file-list { position: relative; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }   
.zz-file-list__item { display: block; }
.zz-file-list__item { transition: transform 150ms ease-out; }
@media (prefers-reduced-motion: reduce) { .zz-file-list__item { transition: none; } }
.zz-file-list__item[data-dragged] { position: relative; z-index: 1; transition: none; background: var(--surface-base); }   
.zz-file-list__status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.zz-file-item { display: inline-flex; align-items: flex-start; gap: 16px; color: var(--text-strong); }
.zz-file-item[data-body] { display: flex; }
.zz-file-item__body { display: flex; flex-direction: column; gap: 16px; flex: 1; min-width: 0; }
.zz-file-item__row { display: flex; align-items: flex-start; gap: 16px; }
.zz-file-item__content { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.zz-file-item[data-media="audio"] .zz-file-item__content { align-items: center; }
.zz-file-item__position,
.zz-file-item__featured { flex: none; white-space: nowrap; }
.zz-file-item__name { min-width: 0; overflow-wrap: anywhere; }
.zz-file-item__thumb {
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
  background: var(--surface-support-1);
  overflow: hidden;
}
.zz-file-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zz-file-item__handle {
  display: inline-flex;
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--action-floating-background-default);
  color: var(--action-floating-foreground-default);
  cursor: grab;
  appearance: none;
  -webkit-appearance: none;
}
@media (hover: hover) { .zz-file-item__handle:hover { background: var(--action-floating-background-hover); } }   
.zz-file-item__handle:active { background: var(--action-floating-background-pressed); cursor: grabbing; }
.zz-file-item__handle-icon { display: inline-flex; width: 100%; height: 100%; }
.zz-file-item__handle-icon svg { width: 100%; height: 100%; display: block; }
.zz-checkbox { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--text-strong); cursor: pointer; position: relative; }
.zz-checkbox__control { position: absolute; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: inherit; }
.zz-checkbox__box { display: inline-flex; width: 24px; height: 24px; flex: none; color: var(--icon-strong); }
.zz-checkbox__box svg { width: 100%; height: 100%; display: block; }
.zz-checkbox__box svg:nth-child(n+2),
.zz-checkbox__control:checked + .zz-checkbox__box svg:first-child { display: none; }
.zz-checkbox__control:checked + .zz-checkbox__box svg:nth-child(2) { display: block; }
.zz-checkbox__control:is(:indeterminate, [data-indeterminate]) + .zz-checkbox__box svg { display: none; }
.zz-checkbox__control:is(:indeterminate, [data-indeterminate]) + .zz-checkbox__box svg:nth-child(3) { display: block; }
.zz-checkbox--hide-label .zz-checkbox__label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.zz-checkbox__control:focus-visible + .zz-checkbox__box { outline: auto; }   
.zz-dialog {
  width: min(400px, calc(100vw - 32px)); box-sizing: border-box;
  margin: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 24px;
  background: var(--surface-base);                 
  color: var(--text-strong);
  font-family: var(--font-sans);                   
  border: 1px solid var(--border-divider-strong);
}
.zz-dialog:not([open]) { display: none; }
.zz-dialog::backdrop { background: var(--surface-scrim); }
.zz-dialog__content { display: flex; flex-direction: column; gap: 8px; }
.zz-dialog__title { margin: 0; text-transform: uppercase; }
.zz-dialog__body { margin: 0; }
.zz-dialog__body p { margin: 0; }
.zz-dialog__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.zz-entity-field__field { flex-wrap: wrap; row-gap: 8px; padding: 6px; }
.zz-entity-field__chips { display: contents; list-style: none; margin: 0; padding: 0; }
.zz-entity-field__chips > li { display: contents; }
.zz-entity-field__control { flex: 1 1 96px; height: 24px; }   
.zz-entity-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-left: 8px;
  box-sizing: border-box;
  background: var(--surface-support-1);
  color: var(--text-strong);
  white-space: nowrap;
}
.zz-entity-chip__remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--icon-strong); cursor: pointer;
}
.zz-entity-chip__remove svg { width: 16px; height: 16px; display: block; }
.zz-entity-chip[data-state="hover"] .zz-entity-chip__remove { background: var(--surface-subtle); }
@media (hover: hover) { .zz-entity-chip__remove:hover { background: var(--surface-subtle); } }   
.zz-entity-chip:has(.zz-entity-chip__remove:focus-visible),
.zz-entity-chip[data-state="focus"] { outline: 2px solid var(--text-strong); outline-offset: 0; }
.zz-entity-chip__remove:focus-visible { outline: none; }
.zz-entity-field__menu {
  position: absolute; z-index: 10;
  top: calc(100% + 4px); left: -1px; right: -1px;
  margin: 0; padding: 0; list-style: none;
  max-height: 288px; overflow-y: auto;
  background: var(--surface-base);   
  border: 1px solid var(--border-divider-strong);
}
.zz-entity-field__menu[hidden] { display: none; }
.zz-entity-option {
  display: flex; align-items: center; gap: 8px;
  padding: 8px;
  background: var(--surface-base);
  color: var(--text-strong);
  cursor: pointer;
}
.zz-entity-option[aria-selected="true"] { background: var(--surface-subtle); }
.zz-entity-option__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zz-entity-option__official { flex: none; color: var(--text-moderate); }
.zz-entity-option__icon { display: inline-flex; width: 20px; height: 20px; flex: none; color: var(--icon-strong); }
.zz-entity-option__icon svg { width: 100%; height: 100%; display: block; }
.zz-divider { display: block; height: 1px; margin: 0; border: 0; background: var(--border-divider-strong); }
.zz-action-panel { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--surface-subtle); }
.zz-action-panel > .zz-button { width: 100%; }
.zz-listing-line { display: flex; flex-direction: column; gap: 8px; }
.zz-listing-line__fields { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px 16px; align-items: start; }
.zz-listing-line__fields > * { display: flex; flex-direction: column; min-width: 0; }   
.zz-listing-line__artist   { grid-row: 1; grid-column: 1 / span 4; }
.zz-listing-line__title    { grid-row: 1; grid-column: 5 / span 4; }
.zz-listing-line__spelling { grid-row: 2; grid-column: 1 / span 4; }
.zz-listing-line__credit   { grid-row: 2; grid-column: 5 / span 4; }
.zz-listing-line[data-removable="true"] .zz-listing-line__artist   { grid-column: 1 / span 3; }
.zz-listing-line[data-removable="true"] .zz-listing-line__title    { grid-column: 4 / span 4; }
.zz-listing-line[data-removable="true"] .zz-listing-line__spelling { grid-column: 1 / span 3; }
.zz-listing-line[data-removable="true"] .zz-listing-line__credit   { grid-column: 4 / span 4; }
.zz-listing-line__remove   { grid-row: 1; grid-column: 8; align-items: flex-start; }
.zz-listing-line__sample { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 959px) {   
  .zz-listing-line__fields { grid-template-columns: minmax(0, 1fr); }
  .zz-listing-line[data-removable] .zz-listing-line__fields > * { grid-row: auto; grid-column: auto; }
}
.zz-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.zz-tab__suffix { display: inline; }
.zz-dialog__choices { display: flex; flex-direction: column; }
.zz-radio { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--text-strong); cursor: pointer; position: relative; }
.zz-radio__control { position: absolute; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: inherit; }
.zz-radio__box { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; color: var(--icon-strong); }
.zz-radio__box svg { width: 18px; height: 18px; display: block; }
.zz-radio__box svg:nth-child(2),
.zz-radio__control:checked + .zz-radio__box svg:first-child { display: none; }
.zz-radio__control:checked + .zz-radio__box svg:nth-child(2) { display: block; }
.zz-radio__control:focus-visible + .zz-radio__box { outline: auto; }   
.zz-radio--hide-label .zz-radio__label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.zz-radio-group { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.zz-radio-group__legend { padding: 0; margin: 0 0 8px; }
.zz-filter { display: inline-flex; align-items: center; gap: 8px; color: var(--text-strong); cursor: pointer; position: relative; }
.zz-filter__control { position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin: -8px 0 0; opacity: 0; cursor: inherit; }
.zz-filter__box { display: inline-flex; width: 16px; height: 16px; flex: none; color: var(--icon-strong); }
.zz-filter__box svg { width: 100%; height: 100%; display: block; }
.zz-filter__box svg:nth-child(2),
.zz-filter__control:checked + .zz-filter__box svg:first-child { display: none; }
.zz-filter__control:checked + .zz-filter__box svg:nth-child(2) { display: block; }
.zz-filter__control:focus-visible + .zz-filter__box { outline: auto; }   
.zz-filter__count { color: var(--text-moderate); }
.zz-filter-block { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; border: 0; min-width: 0; }
.zz-filter-block__label { padding: 0; margin: 0; float: left; width: 100%; }   
.zz-filter-block__options { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; clear: both; }
.zz-filters { display: flex; flex-direction: column; gap: 24px; padding: 0 8px; }
@media (max-width: 959px) {
  .zz-filter[data-content="label"] { display: flex; width: 100%; box-sizing: border-box; padding: var(--small) 0; }
  .zz-filter__box { width: 24px; height: 24px; }
  .zz-filter__control { width: 24px; height: 24px; margin-top: -12px; }
}
.zz-button__suffix, .zz-button__prefix { display: inline; }
.zz-icon-button[hidden] { display: none; }
.zz-entity-chip[data-size="large"] { height: 44px; padding-left: var(--medium-small); }
.zz-entity-chip[data-size="large"] .zz-entity-chip__remove { width: 44px; height: 44px; }
.zz-entity-chip[data-size="large"] .zz-entity-chip__remove svg { width: 24px; height: 24px; }
.zz-filter-facet {
  display: flex; align-items: center; gap: var(--small);
  width: 100%; box-sizing: border-box; margin: 0;
  padding: var(--medium-small) 0;
  border: 0; border-bottom: 1px solid var(--border-divider-strong); border-radius: 0;
  background: transparent; color: var(--text-strong); font: inherit; text-align: left; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.zz-filter-facet__label { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.zz-filter-facet__value { flex: 0 1 auto; min-width: 0; color: var(--text-moderate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zz-filter-facet__chevron { display: inline-flex; flex: none; width: 24px; height: 24px; color: var(--icon-strong); }
.zz-filter-facet__chevron svg { width: 100%; height: 100%; display: block; }
.zz-filters-layer { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; background: var(--surface-accent); color: var(--text-strong); }
.zz-filters-layer [hidden] { display: none !important; }
.zz-filters-layer__bar {
  display: flex; align-items: center; gap: var(--small); flex: none;
  padding: var(--medium-small) var(--page-margin-mobile);
  border-bottom: 1px solid var(--border-divider-strong);
}
.zz-filters-layer__title { flex: 1 1 auto; min-width: 0; margin: 0; text-transform: uppercase; }
.zz-filters-layer__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--medium-small);
  padding: var(--medium-small) var(--page-margin-mobile);
}
.zz-filters-layer[data-level="facet"] .zz-filters-layer__body { padding-top: var(--small); }
.zz-filters-layer__applied { display: flex; flex-direction: column; gap: var(--small); }
.zz-filters-layer__applied-label { margin: 0; text-transform: uppercase; }
.zz-filters-layer__chips { display: flex; flex-wrap: wrap; gap: 4px; }   
.zz-filters-layer__actions {
  display: flex; gap: var(--small); flex: none;
  padding: var(--small) var(--page-margin-mobile);
  border-top: 1px solid var(--border-divider-strong);
  background: var(--surface-accent);
}
.zz-filters-layer__apply { flex: 1 1 auto; }
.zz-filters-layer .zz-filter-block__options { gap: 0; align-items: stretch; }
.zz-menu-layer { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; background: var(--surface-accent); color: var(--text-strong); }
.zz-menu-layer__bar {
  display: flex; align-items: center; gap: var(--small); flex: none;
  padding: var(--medium-small) var(--page-margin-mobile);
  border-bottom: 1px solid var(--border-divider-strong);
}
.zz-menu-layer__title { flex: 1 1 auto; min-width: 0; margin: 0; text-transform: uppercase; }
.zz-menu-layer__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 24px;   
  padding: var(--small) var(--page-margin-mobile) var(--medium-small);
}
.zz-menu-group { display: flex; flex-direction: column; }
.zz-menu-item {
  display: flex; align-items: center; gap: var(--small);
  padding: var(--medium-small) var(--small);
  border-bottom: 1px solid var(--border-divider-strong);
  color: var(--text-strong); text-decoration: none;
}
.zz-menu-item[data-state="current"] { background-color: var(--tab-background-active); }
button.zz-menu-item { width: 100%; margin: 0; border-width: 0 0 1px; border-style: solid; border-color: var(--border-divider-strong); background: none; font: inherit; text-align: left; cursor: pointer; }   
.zz-menu-item__label { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.zz-menu-item__detail { flex: 0 1 auto; min-width: 0; color: var(--text-moderate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zz-menu-layer__legal { display: flex; flex-wrap: wrap; gap: var(--small) var(--medium-small); padding: 0 var(--small); }
.zz-menu-layer__legal a { color: var(--text-strong); text-decoration: none; }
.zz-menu-layer__legal a:hover { text-decoration: underline; }
.zz-footer { background: var(--surface-accent); color: var(--text-strong); border-top: 1px solid var(--border-divider-strong); }
.zz-footer__main { display: flex; gap: var(--medium-small); padding: var(--medium-small) 0; }
.zz-footer__main > * { flex: 1 1 0; min-width: 0; }
.zz-footer__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--medium-small); align-items: start; }
.zz-footer__bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--small) var(--medium-small); padding-bottom: var(--medium-small); }
.zz-footer__copyright { margin: 0; }
.zz-footer__legal { display: flex; flex-wrap: wrap; gap: var(--small) var(--medium-small); }
.zz-footer a { color: var(--text-strong); text-decoration: none; }
@media (hover: hover) { .zz-footer a:hover { text-decoration: underline; } }
.zz-footer-links__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--small); }
.zz-footer-newsletter { display: flex; flex-direction: column; gap: var(--small); margin: 0; }
.zz-footer-newsletter__row { display: flex; align-items: flex-end; gap: var(--small); }
.zz-footer-newsletter__input { flex: 1 1 auto; min-width: 0; }
.zz-footer-newsletter__note { margin: 0; }
.zz-footer .zz-footer-newsletter__note a { text-decoration: underline; }
@media (max-width: 959px) {
  .zz-footer__main { flex-direction: column; }
  .zz-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zz-footer__bottom { flex-direction: column-reverse; }
}
.zz-plp-header { display: flex; flex-direction: column; }
.zz-plp-header__controls { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: var(--small) 0; }
.zz-plp-header__rule { height: 1px; background: var(--border-divider-strong); }
.zz-select-button { position: relative; }
.zz-select-button[data-layout="fill"] { display: flex; width: 100%; }   
.zz-select-button__control {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
  font-size: 16px;   
  appearance: none; -webkit-appearance: none;
}
.zz-select-button:has(.zz-select-button__control:focus-visible) { outline: auto; }   
.zz-select-button[data-focus-source="pointer"]:has(.zz-select-button__control:focus-visible) { outline: none; }
.zz-toast-region {
  position: fixed; z-index: 30;
  right: var(--page-margin-desktop);
  top: calc(max(var(--zz-toast-offset, 0px), env(safe-area-inset-top, 0px)) + var(--gutter-small));
  width: min(360px, calc(100vw - 2 * var(--page-margin-desktop)));
  pointer-events: none;   
}
@media (max-width: 959px) {
  .zz-toast-region { left: var(--page-margin-mobile); right: var(--page-margin-mobile); width: auto; }
}
.zz-toast-region__slot:empty { display: none; }
.zz-toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--medium-small);
  padding: calc(var(--medium-small) + 1px); box-sizing: border-box; width: 100%;   
  color: var(--text-strong);
  font-family: var(--font-sans);
  background-color: var(--surface-base);
  background-repeat: no-repeat;
  background-image:
    repeating-linear-gradient(90deg,  var(--border-divider-strong) 0 16px, transparent 16px 32px),
    repeating-linear-gradient(90deg,  var(--border-divider-strong) 0 16px, transparent 16px 32px),
    repeating-linear-gradient(180deg, var(--border-divider-strong) 0 16px, transparent 16px 32px),
    repeating-linear-gradient(180deg, var(--border-divider-strong) 0 16px, transparent 16px 32px);
  background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
}
.zz-toast__message { flex: 1 1 auto; min-width: 0; margin: 0; }
.zz-toast__action, .zz-toast__dismiss { flex: none; }
.zz-toast-region .zz-toast { animation: zz-toast-in 150ms ease-out; }
@keyframes zz-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .zz-toast-region .zz-toast { animation: none; } }
.zz-trade-note { display: flex; flex-direction: column; gap: var(--small); color: var(--text-strong); }
.zz-trade-note__title, .zz-trade-note__signature { margin: 0; }
.zz-trade-note__body p { margin: 0; }
.zz-trade-note__signature { color: var(--text-moderate); }
.zz-discogs-card { display: flex; flex-direction: column; gap: 4px; padding: var(--small); border: 1px solid var(--border-divider-strong); color: var(--text-strong); }
.zz-discogs-card p { margin: 0; }
.zz-discogs-card__label { color: var(--text-moderate); }
.zz-discogs-card__link { color: inherit; text-decoration: underline; align-self: flex-start; }
.zz-trade-step { display: flex; gap: var(--medium-small); color: var(--text-strong); }
.zz-trade-step__number { flex: none; width: 24px; }
.zz-trade-step__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zz-trade-step__title, .zz-trade-step__body { margin: 0; }
.zz-release-list { background: var(--surface-base); border: 1px solid var(--border-divider-strong); color: var(--text-strong); }
.zz-release-list__options { margin: 0; padding: 0; list-style: none; }
.zz-release-list__message, .zz-release-list__source { margin: 0; padding: var(--small); }
.zz-release-list__source { color: var(--text-moderate); }
.zz-release-option, .zz-chosen-release { display: flex; align-items: flex-start; gap: var(--small); padding: var(--small); color: var(--text-strong); }
.zz-release-option { cursor: pointer; background: var(--surface-base); }
.zz-release-option[data-highlighted="true"], .zz-release-option:hover { background: var(--surface-subtle); }
.zz-release-option__thumb { flex: none; display: block; width: 40px; height: 40px; object-fit: cover; background: var(--surface-support-1); }
.zz-release-option__text { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.zz-release-option__meta { color: var(--text-moderate); }
.zz-chosen-release { border: 1px solid var(--border-divider-strong); }
.zz-chosen-release__link { color: inherit; text-decoration: underline; align-self: flex-start; }
.zz-chosen-release__change { flex: none; background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
.zz-progress-bar { position: relative; height: 4px; background: var(--surface-subtle); overflow: hidden; }
.zz-progress-bar__value { height: 100%; background: var(--action-primary-background-default); transition: width 0.3s ease-out; }
@media (prefers-reduced-motion: reduce) { .zz-progress-bar__value { transition: none; } }
.zz-memo-item { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border-divider-strong); color: var(--text-strong); }
.zz-memo-item__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.zz-memo-item__text > p { margin: 0; overflow-wrap: anywhere; }
.zz-memo-item__meta { color: var(--text-moderate); }
.zz-memo-item__link { color: inherit; text-decoration: underline; align-self: flex-start; }
.zz-memo-item__actions { flex: none; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 959px) { .zz-memo-item { flex-direction: column; align-items: stretch; gap: 8px; } }
.zz-admin-bar__desktop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.zz-admin-bar__nav, .zz-admin-bar__account { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zz-admin-bar__email { color: var(--text-moderate); }
.zz-admin-bar__mobile { display: none; }
@media (max-width: 959px) {
  .zz-admin-bar__desktop { display: none; }
  .zz-admin-bar__mobile {
    display: flex; align-items: center; gap: var(--small);
    padding: var(--small) var(--page-margin-mobile);   
    background: var(--surface-accent); border-bottom: 1px solid var(--border-divider-strong);
  }
  .zz-admin-bar__title { flex: 1 1 auto; min-width: 0; margin: 0; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.zz-listing-row { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border-divider-strong); color: var(--text-strong); }
.zz-listing-row__select { flex: none; display: flex; }
.zz-listing-row__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.zz-listing-row__title { color: inherit; overflow-wrap: anywhere; }
.zz-listing-row__meta, .zz-listing-row__price { margin: 0; }
.zz-listing-row__meta { color: var(--text-moderate); }
.zz-listing-row__price { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.zz-action-bar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 8px;
  padding: var(--medium-small);
  background: var(--surface-base); border-top: 1px solid var(--border-divider-strong);
}
.zz-action-bar__actions { display: flex; gap: 8px; }
.zz-action-bar__actions > .zz-button { flex: 1 1 0; min-width: 0; }
.zz-action-bar__status:empty { display: none; }
@media (pointer: coarse) {
  .zz-button[data-size="small"] { position: relative; }
  .zz-button[data-size="small"]::after { content: ""; position: absolute; inset: -6px 0; }
  .zz-checkbox::after { content: ""; position: absolute; inset: -10px; }
}
.zz-section-head { display: flex; flex-direction: column; gap: var(--medium-small); }
.zz-section-head__row { display: flex; align-items: center; justify-content: space-between; gap: var(--small); }
.zz-section-head__title { margin: 0; color: var(--text-strong); }
.zz-section-head__actions { display: flex; gap: var(--small); flex: none; }
.zz-genre-links { display: flex; flex-direction: column; gap: var(--medium-small); }
.zz-genre-links__list { display: flex; flex-wrap: wrap; gap: var(--small); margin: 0; padding: 0; list-style: none; }
.zz-home-about__link { color: var(--text-strong); text-decoration: underline; }
.zz-home-about { display: flex; flex-direction: column; align-items: stretch; gap: var(--medium-small); color: var(--text-strong); }
.zz-home-about__bio { margin: 0; }
.zz-home-about__link { align-self: flex-start; }