/* Selection page */

body.page-selection .site-logo svg {
  fill: var(--pi-fill);
  color: var(--pi-fill);
}


/* ── Layout ─────────────────────────────────────────────────────────────────── */

.sel-layout {
  height: 100%;
  column-gap: 0;
}

/* ── Side columns (carousels) ───────────────────────────────────────────────── */

.sel-col--side {
  position: relative;
  height: 100%;
  background: #fff;
}

/* ── Carousel fills the full column ─────────────────────────────────────────── */

.sel-carousel {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sel-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

}

.sel-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.sel-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* ── Arrows — float above the carousel ──────────────────────────────────────── */

.sel-arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 3rem;
  color: var(--pi-fill, #3B6FE0);
  padding: 1rem;
  line-height: 1;
  font-family: var(--font-gauche);
  font-weight: 950;
}

.sel-arrow--up   { top: 1vh; }
.sel-arrow--down { bottom: 1vh; }

.sel-arrow:hover { opacity: 0.6; }

/* ── Middle panel ───────────────────────────────────────────────────────────── */

.sel-col--middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  background: var(--pi-bg, #A07850);
  padding: 2vh 15%;
}

/* ── Middle buttons group ───────────────────────────────────────────────────── */

.sel-middle-buttons {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

/* ── Shuffle button ─────────────────────────────────────────────────────────── */

.sel-shuffle {
  color: var(--ui-color, white);
  transition: color 0.2s, opacity 0.2s;
}

.sel-shuffle:hover {
  opacity: 1;
  color: var(--pi-bg);
}

.sel-shuffle:hover .btn-border path {
  fill: var(--ui-color);
  stroke: var(--ui-color);
}

/* ── Add pair to cart button ────────────────────────────────────────────────── */

.sel-add-pair {
  color: var(--ui-color, white);
  transition: color 0.2s, opacity 0.2s;
}

.sel-add-pair:hover {
  opacity: 1;
  color: var(--pi-bg);
}

.sel-add-pair:hover .btn-border path {
  fill: var(--ui-color);
  stroke: var(--ui-color);
}


.menu a,
.menu {
  color: var(--pi-fill);
}



@media only screen and (max-width: 800px) {

  /* Stack columns vertically: left on top, middle in centre, right on bottom */
  .sel-layout {
    display: flex !important;
    flex-direction: column;
  }

  .sel-col--side {
    flex: 1;
    min-height: 0;
    height: auto;
    width: 100%;
  }

  .sel-col--middle {
    flex-shrink: 0;
    height: auto;
    width: 100%;
    background: transparent;
    padding: 0.8vh 0;
    justify-content: center;
  }

  /* Reposition arrows to left/right sides, vertically centred */
  .sel-arrow {
    top: 50%;
    left: auto;
    transform: translateY(-50%);
  }

  .sel-arrow--up   { left: 1vw; top: 50%; bottom: auto; }
  .sel-arrow--down { right: 1vw; top: 50%; left: auto; bottom: auto; }

  body.page-selection .site-logo {
    color: var(--pi-bg) !important;
    fill:  var(--pi-bg) !important;
  }

  body.page-selection .site-logo svg path,
  body.page-selection .site-logo svg text,
  body.page-selection .site-logo svg polygon,
  body.page-selection .site-logo svg circle,
  body.page-selection .site-logo svg ellipse {
    fill: var(--pi-bg) !important;
  }

  body.page-selection .site-logo svg rect {
    stroke: var(--pi-bg) !important;
  }

  body.page-selection .menu a,
  body.page-selection .menu {
    color: var(--pi-bg);
  }

  /* the menu sits above the white carousel columns (they used to cover it) */
  body.page-selection .menu {
    z-index: 20;
  }

}

/* Ordering unavailable (invitation only / paused) */
.sel-add-pair[disabled] {
  opacity: 0.5;
  pointer-events: none;
}