@charset "UTF-8";
/* Cross-window switcher (TECH-6775, epic TECH-6770).
 *
 * The strip of sibling windows on a child sale's PLP, server-rendered by SaleDetail.java, and the
 * same rows inside the mybag panel, where basket.bundle.js builds them from /api/basket. One
 * stylesheet for both, because the two surfaces must not drift apart visually.
 *
 * It is NOT loaded only where a switcher exists. TemplateHeader links it on every page that has a
 * basket, beside basket-vanilla.css and for the same reason: the panel is built in JS and can open
 * anywhere, so gating its stylesheet would mean a flash of unstyled markup inside an already-open
 * panel. SaleDetail additionally links it conditionally, which is what keeps the PLP strip styled on
 * a page where the basket is hidden. Same href, so one download.
 *
 * STANDALONE, hand-written, like child-sales.css and plp-highlight.css beside it. It is NOT
 * compiled from static/stylus — css-build/compile-css.js only emits shop_1.2, shop-critical,
 * shop-rest, sizeguide and admin — so there is no .styl half to keep in step and editing this
 * file directly is correct here. (Editing static/css/shop*.css directly would not be.)
 *
 * Sizes are rem/px rather than the vw ladder child-sales.css copied out of its React build:
 * nothing is being reproduced byte for byte here, and a scroll strip whose font scales with the
 * viewport is unreadable at 1920 and overflows at 375. */

.mp-sale-switcher {
  margin: 2rem auto;
  padding: 0 1rem;
  max-width: 1200px;
}

.mp-sale-switcher-title {
  margin: 0 0 .75rem;
  font-family: AvenirNext, ヒラギノ角ゴ Pro W4, sans-serif;
  font-size: .875rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-align: center;
}

/* Horizontal, and it WRAPS here while the mobile query below makes it scroll instead. The window
 * count is editorial (five for DHC at launch, and trap 3 of the design review says it may come back
 * higher), so the strip has to survive a count nobody designed for: at desktop widths wrapping to a
 * second line is fine, at 375px it is four rows tall and pushes the products below the fold. */
.mp-sale-switcher-list {
  margin: 0;
  padding: 0 0 .25rem;
  list-style: none;
  display: flex;
  gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.mp-sale-switcher-item { display: flex; }

.mp-sale-switcher-link,
.mp-sale-switcher-current {
  display: block;
  padding: .625rem 1.25rem;
  border: 1px solid #231f20;
  font-family: AvenirNext, ヒラギノ角ゴ Pro W4, sans-serif;
  font-size: .8125rem;
  line-height: 1.2;
  letter-spacing: .02em;
  text-align: center;
  white-space: nowrap;
}

.mp-sale-switcher-link {
  color: #231f20;
  background-color: #fff;
  text-decoration: none;
}

.mp-sale-switcher-link:hover,
.mp-sale-switcher-link:focus-visible {
  color: #fff;
  background-color: #231f20;
}

/* The window the customer is already on. Filled rather than greyed: greyed-out reads as
 * "unavailable", and this one is not unavailable — it is where you are. */
.mp-sale-switcher-current {
  color: #fff;
  background-color: #231f20;
  cursor: default;
}

/* Inside the mybag panel. Narrower, no outer margin, and a top rule instead, because it sits
 * between the item list and the totals rather than on a page of its own. */
.mpb-switcher {
  margin: 0;
  padding: 1rem 1rem .5rem;
  border-top: 1px solid #e5e5e5;
  max-width: none;
}

.mpb-switcher .mp-sale-switcher-title { text-align: left; }

.mpb-switcher .mp-sale-switcher-list { justify-content: flex-start; }

.mpb-switcher .mp-sale-switcher-link { padding: .5rem 1rem; font-size: .75rem; }

@media screen and (max-width: 768px) {
  .mp-sale-switcher { margin: 8vw auto; }

  /* One row that scrolls, not several that wrap: at 375px a wrapped five-window strip is four
   * rows tall and pushes the products below the fold, which is the opposite of the point. */
  .mp-sale-switcher-list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mp-sale-switcher-link,
  .mp-sale-switcher-current { padding: .75rem 1.125rem; font-size: .875rem; }
}