.barbed-cc {
  --bcc-columns: 4;
  --bcc-gap: 24px;
  --bcc-ratio: .729;
  --bcc-fit: cover;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 150px 15px;
  background: #fff;
  color: #171717;
  font-family: Arial, Helvetica, sans-serif;
}
.barbed-cc *, .barbed-cc *::before, .barbed-cc *::after { box-sizing: border-box; }
.barbed-cc .barbed-cc__head {
  width: 74%;
  margin: 0 auto 72px;
  display: flex;
  align-items: center;
  gap: clamp(16px, 4vw, 80px);
}
.barbed-cc__copy { margin-right: auto; min-width: 0; }
.barbed-cc .barbed-cc__title {
  padding: 0;
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.04em;
  color: inherit;
}
.barbed-cc .barbed-cc__subtitle { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: #777; }
.barbed-cc .barbed-cc__shop { flex-shrink: 0; font-size: 14px; line-height: 1.4; color: inherit; text-decoration: underline; text-underline-offset: 2px; transition: color .2s ease; }
.barbed-cc__nav { display: flex; align-items: center; gap: 3px; color: #777; flex-shrink: 0; }
.barbed-cc__count { font-size: 20px; font-variant-numeric: tabular-nums; line-height: 1; padding: 0 6px; }
.barbed-cc .barbed-cc__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  width: 36px;
  min-width: 36px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease;
}
.barbed-cc .barbed-cc__button:hover { color: #111; }
.barbed-cc .barbed-cc__button:disabled { opacity: .35; cursor: default; }
.barbed-cc__button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.barbed-cc .barbed-cc__button[hidden], .barbed-cc .barbed-cc__play-icon { display: none; }
.barbed-cc .barbed-cc__pause[aria-pressed="true"] .barbed-cc__play-icon { display: block; }
.barbed-cc .barbed-cc__pause[aria-pressed="true"] .barbed-cc__pause-icon { display: none; }
.barbed-cc__viewport { width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; direction: ltr; overscroll-behavior-x: contain; }
.barbed-cc.is-ready .barbed-cc__viewport { overflow: hidden; }
.barbed-cc--swipe.is-ready .barbed-cc__viewport { touch-action: pan-y pinch-zoom; cursor: grab; }
.barbed-cc--swipe.is-dragging .barbed-cc__viewport { cursor: grabbing; user-select: none; }
.barbed-cc__track { display: flex; width: 100%; gap: var(--bcc-gap); align-items: flex-start; }
.barbed-cc.is-ready .barbed-cc__track { will-change: transform; }
.barbed-cc .barbed-cc__slide {
  flex: 0 0 calc((100% - (var(--bcc-columns) - 1) * var(--bcc-gap)) / var(--bcc-columns));
  min-width: 0;
  margin: 0;
  padding: 0;
}
.barbed-cc .barbed-cc__product { display: block; color: inherit; text-decoration: none; -webkit-user-drag: none; }
.barbed-cc .barbed-cc__media { display: block; position: relative; overflow: hidden; aspect-ratio: var(--bcc-ratio); background: #ede4da; }
.barbed-cc .barbed-cc__media img { display: block; position: absolute; width: 100%; height: 100%; max-width: none; padding: 0; margin: 0; border: 0; border-radius: 0; object-fit: var(--bcc-fit); object-position: var(--bcc-position, center center); transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.barbed-cc .barbed-cc__name { display: block; margin-top: 12px; font-size: 14px; line-height: 1.4; }
.barbed-cc :is(a,button,.barbed-cc__viewport):focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
.barbed-cc__status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.barbed-cc__empty { padding: 32px; background: #f4f4f4; text-align: center; }
@media (hover: hover) {
  .barbed-cc--zoom:not(.is-dragging) .barbed-cc__product:hover .barbed-cc__media img { transform: scale(1.025); }
}
@media (max-width: 1024px) {
  .barbed-cc { --bcc-columns: 2.3; --bcc-gap: 18px; padding: 80px 15px; }
  .barbed-cc .barbed-cc__head { width: 90%; gap: 20px; }
}
@media (max-width: 767px) {
  .barbed-cc { --bcc-columns: 1.35; --bcc-gap: 12px; padding: 40px 12px; }
  .barbed-cc .barbed-cc__head { width: 100%; margin-bottom: 28px; flex-wrap: wrap; gap: 12px 16px; }
  .barbed-cc__copy { flex: 1 1 100%; }
  .barbed-cc .barbed-cc__title { font-size: 18px; }
  .barbed-cc .barbed-cc__shop { font-size: 12px; }
  .barbed-cc__nav { margin-left: auto; }
  .barbed-cc__count { font-size: 16px; padding: 0 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .barbed-cc .barbed-cc__media img, .barbed-cc .barbed-cc__button { transition: none; }
  .barbed-cc--zoom .barbed-cc__product:hover .barbed-cc__media img { transform: none; }
}