/* SgBrandWall — "sg-bw". The live store's brand wall in the theme palette: accent stripe on
   top, tag · title · short line over a hairline, faint rotated watermark words, endless lanes
   of brand chips (logo + name). Lanes run edge to edge; the head follows the width setting. */

.cc_b3eorip4_U4pYCMUSHh .sg-bw {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--sg-line);
  background: #fff;
}
.cc_b3eorip4_U4pYCMUSHh .sg-bw--stripe { border-top: 5px solid var(--sg-accent); }

/* ---------------------------------------------------------------- watermark words */
.cc_b3eorip4_U4pYCMUSHh .sg-bw__wm {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--sg-text, var(--sg-ink)) 4%, transparent);
  font-family: var(--sg-font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}
.cc_b3eorip4_U4pYCMUSHh .sg-bw__wm span { position: absolute; white-space: nowrap; }
.cc_b3eorip4_U4pYCMUSHh .sg-bw__wm span:nth-child(1) { left: -25px; top: 82px; font-size: 47px; transform: rotate(-8deg); }
.cc_b3eorip4_U4pYCMUSHh .sg-bw__wm span:nth-child(2) { left: 21%; top: 68px; font-size: 39px; transform: rotate(90deg); transform-origin: left top; }
.cc_b3eorip4_U4pYCMUSHh .sg-bw__wm span:nth-child(3) { left: 37%; bottom: -7px; font-size: 50px; transform: rotate(-7deg); }
.cc_b3eorip4_U4pYCMUSHh .sg-bw__wm span:nth-child(4) { right: 28%; top: 62px; font-size: 35px; transform: rotate(90deg); transform-origin: left top; }
.cc_b3eorip4_U4pYCMUSHh .sg-bw__wm span:nth-child(5) { right: -35px; top: 96px; font-size: 45px; transform: rotate(-9deg); }
.cc_b3eorip4_U4pYCMUSHh .sg-bw__wm span:nth-child(6) { left: 55%; top: 88px; font-size: 31px; transform: rotate(7deg); }

/* ---------------------------------------------------------------- head */
.cc_b3eorip4_U4pYCMUSHh .sg-bw__headrow {
  position: relative;
  z-index: 3;
  border-bottom: 1px solid var(--sg-line);
  background-color: inherit; /* hides the watermark words behind the head */
}
.cc_b3eorip4_U4pYCMUSHh .sg-bw__head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding-block: 7px;
}
.cc_b3eorip4_U4pYCMUSHh .sg-bw__tag {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  background: var(--sg-accent);
  color: var(--sg-on-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}
.cc_b3eorip4_U4pYCMUSHh .sg-bw__title {
  min-width: 0;
  margin: 0;
  color: var(--sg-text, var(--sg-ink));
  font-family: var(--sg-font-body);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.cc_b3eorip4_U4pYCMUSHh .sg-bw__desc {
  flex: 0 1 auto;
  margin: 0 0 0 auto;
  color: var(--sg-text-2, var(--sg-ink-2));
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-align: right;
}

/* ---------------------------------------------------------------- lanes */
.cc_b3eorip4_U4pYCMUSHh .sg-bw__lanes { position: relative; z-index: 2; padding-top: 2px; }
.cc_b3eorip4_U4pYCMUSHh .sg-bw__lane {
  position: relative;
  display: flex;
  align-items: center;
  height: 62px;
  overflow: hidden;
  touch-action: pan-y; /* vertical swipes scroll the page, horizontal ones drag the lane */
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.cc_b3eorip4_U4pYCMUSHh .sg-bw__lane.is-dragging { cursor: grabbing; }
.cc_b3eorip4_U4pYCMUSHh .sg-bw__lane.is-js .sg-bw__track { animation: none; }
.cc_b3eorip4_U4pYCMUSHh .sg-bw__belt {
  position: relative;
  display: flex;
  flex-shrink: 0;
  will-change: transform;
}
/* the global marquee track spaces with a gap + right padding: chips set their own spacing */
/* (and its min-width: 100% would resolve against the belt here — twice the content — and
   leave an empty half) */
.cc_b3eorip4_U4pYCMUSHh .sg-bw .sg-bw__track { gap: 0; min-width: 0; padding-right: 0; }
.cc_b3eorip4_U4pYCMUSHh .sg-bw__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  padding: 4px 5px;
}

/* reduced motion: one still row that scrolls sideways */
.cc_b3eorip4_U4pYCMUSHh .sg-bw__lane--still {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: auto;
}
.cc_b3eorip4_U4pYCMUSHh .sg-bw__lane--still::-webkit-scrollbar { display: none; }
.cc_b3eorip4_U4pYCMUSHh .sg-bw__lane--still .sg-bw__group { padding-inline: var(--sg-gutter); }

/* ---------------------------------------------------------------- chips */
.cc_b3eorip4_U4pYCMUSHh .sg-bw__chip {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 17px;
  border: 1px solid var(--sg-line);
  border-radius: 12px;
  background: #fff;
  color: var(--sg-ink);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(17, 19, 21, 0.04);
  transition: color var(--sg-t-fast), border-color var(--sg-t-fast), background-color var(--sg-t-fast), box-shadow var(--sg-t-fast), translate var(--sg-t-fast);
  -webkit-user-drag: none;
}
.cc_b3eorip4_U4pYCMUSHh .sg-bw--caps .sg-bw__chip { letter-spacing: 0.07em; } /* capitals are written by the component (locale per word) */
.cc_b3eorip4_U4pYCMUSHh .sg-bw__chip.is-accent { border-left: 3px solid var(--sg-accent); }
.cc_b3eorip4_U4pYCMUSHh .sg-bw__chip.has-logo { padding-left: 7px; }
.cc_b3eorip4_U4pYCMUSHh .sg-bw__chip.has-logo.is-accent { padding-left: 5px; }
/* the logo sits on its own white plate, so the yellow hover never clashes with it */
.cc_b3eorip4_U4pYCMUSHh .sg-bw__logo {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  height: calc(var(--bw-logo, 24px) + 8px);
  padding: 0 6px;
  border-radius: 8px;
  background: #fff;
}
.cc_b3eorip4_U4pYCMUSHh .sg-bw__logo img {
  display: block;
  width: auto;
  max-width: calc(var(--bw-logo, 24px) * 4);
  height: var(--bw-logo, 24px);
  object-fit: contain;
  pointer-events: none;
  transition: filter var(--sg-t-mid), opacity var(--sg-t-mid);
}
.cc_b3eorip4_U4pYCMUSHh .sg-bw--gray .sg-bw__logo img { filter: grayscale(1); opacity: 0.75; }
.cc_b3eorip4_U4pYCMUSHh .sg-bw__chip.has-logo:not(:has(.sg-bw__name)) { padding-right: 7px; }
@media (hover: hover) {
  .cc_b3eorip4_U4pYCMUSHh .sg-bw__chip:hover {
    z-index: 4;
    border-color: var(--sg-accent);
    background: var(--sg-accent);
    color: var(--sg-on-accent);
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--sg-accent) 70%, transparent);
    translate: 0 -1px;
  }
  .cc_b3eorip4_U4pYCMUSHh .sg-bw--gray .sg-bw__chip:hover .sg-bw__logo img { filter: none; opacity: 1; }
}
.cc_b3eorip4_U4pYCMUSHh .sg-scope .sg-bw__chip:focus-visible {
  z-index: 4;
  border-color: var(--sg-accent);
  border-radius: 12px;
  background: var(--sg-accent);
  color: var(--sg-on-accent);
}
.cc_b3eorip4_U4pYCMUSHh .sg-bw--gray .sg-bw__chip:focus-visible .sg-bw__logo img { filter: none; opacity: 1; }

.cc_b3eorip4_U4pYCMUSHh .sg-bw__empty { position: relative; z-index: 2; padding-block: 20px; }

/* ---------------------------------------------------------------- phone */
@media (max-width: 767px) {
  .cc_b3eorip4_U4pYCMUSHh .sg-bw__wm { opacity: 0.8; }
  .cc_b3eorip4_U4pYCMUSHh .sg-bw__wm span:nth-child(1), .cc_b3eorip4_U4pYCMUSHh .sg-bw__wm span:nth-child(3), .cc_b3eorip4_U4pYCMUSHh .sg-bw__wm span:nth-child(5) { font-size: 36px; }
  .cc_b3eorip4_U4pYCMUSHh .sg-bw__head { gap: 9px; min-height: 48px; padding-block: 6px; }
  .cc_b3eorip4_U4pYCMUSHh .sg-bw__tag { height: 22px; padding: 0 7px; font-size: 9px; }
  .cc_b3eorip4_U4pYCMUSHh .sg-bw__title { font-size: 13px; }
  .cc_b3eorip4_U4pYCMUSHh .sg-bw__desc { display: none; }
  .cc_b3eorip4_U4pYCMUSHh .sg-bw__lane { height: 58px; }
  .cc_b3eorip4_U4pYCMUSHh .sg-bw__group { gap: 8px; }
  .cc_b3eorip4_U4pYCMUSHh .sg-bw__chip { height: 40px; padding: 0 13px; font-size: 10.5px; }
  .cc_b3eorip4_U4pYCMUSHh .sg-bw__chip.has-logo { padding-left: 5px; }
  .cc_b3eorip4_U4pYCMUSHh .sg-bw__logo { height: calc(var(--bw-logo-m, 20px) + 8px); padding: 0 5px; }
  .cc_b3eorip4_U4pYCMUSHh .sg-bw__logo img { height: var(--bw-logo-m, 20px); max-width: calc(var(--bw-logo-m, 20px) * 4); }
}
@media (prefers-reduced-motion: reduce) {
  .cc_b3eorip4_U4pYCMUSHh .sg-bw__chip, .cc_b3eorip4_U4pYCMUSHh .sg-bw__logo img { transition: none; }
}