/* Box picker (components/box-picker.js). Uses the page's color tokens (--coral, --ink, ...). */
.box-picker {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  /* The photo column is sized so the square photo plus thumbnails fit in one screen height. */
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  grid-template-areas:
    "gallery picker"
    "gallery details";
  grid-template-rows: auto 1fr;
  column-gap: 44px;
  text-align: left;
}

.bp-gallery { grid-area: gallery; min-width: 0; }
.bp-picker { grid-area: picker; min-width: 0; }
.bp-details { grid-area: details; min-width: 0; }

/* Gallery: the photos are square, so a square frame with contain shows them whole. */
.bp-main {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
}
/* The photos slide in a strip, the same glide as the box page's gallery. */
.bp-track { display: flex; height: 100%; transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1); }
.bp-slide { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; display: block; }
@media (prefers-reduced-motion: reduce) { .bp-track { transition: none; } }
/* Prev/next arrows on the photo itself, in addition to the ones beside the thumbnails. */
.bp-main-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink-mid);
  opacity: 0.7;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.18s, background 0.18s;
}
.bp-main-arrow svg { width: 15px; height: 15px; }
.bp-main:hover .bp-main-arrow { opacity: 1; }
.bp-main-arrow:hover { background: rgba(255, 255, 255, 0.9); }
.bp-main-arrow:focus-visible { opacity: 1; outline: 2px solid #B0906A; outline-offset: 2px; }
.bp-dots { display: none; }
.bp-main-prev { left: 10px; }
.bp-main-next { right: 10px; }

.bp-thumbs-row { display: flex; align-items: center; gap: 4px; margin-top: 14px; }
.bp-thumbs {
  flex: 1;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 3px;
}
.bp-thumbs::-webkit-scrollbar { display: none; }
.bp-thumb {
  flex: 0 0 60px;
  height: 60px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s;
}
.bp-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bp-thumb:hover { border-color: var(--sand); }
.bp-thumb.active { border-color: var(--coral); }

.bp-arrow {
  flex: 0 0 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-mid);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.bp-arrow:hover { background: var(--cream); }

/* The age dropdown is shared with the gift page: styles/components/age-dropdown.css. */

/* Month pills, the same as the gift page's age pills (.g-pill in styles/pages/gift-a-box.css). */
.bp-options { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--sand); }
.bp-option {
  background: var(--white);
  border: 1.5px solid #EAE0D8;
  border-radius: 99px;
  padding: 9px 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.bp-option:hover { border-color: var(--coral); }
.bp-option:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.bp-option.active { background: #2B211A; border-color: #2B211A; color: var(--white); }
/* "3-4 months+" and "1 year" read as one word in this font without a little more word spacing,
   and its contextual alternates draw the hyphen as a long dash. */
.bp-option { word-spacing: 0.12em; font-feature-settings: "calt" 0; }

/* Selected box details */
.bp-details { padding-top: 22px; display: flex; flex-direction: column; }
/* Stage and description use the box page hero's type (styles/pages/box.css: .bx-stage, .bx-desc). */
.bp-age { font-size: 15px; font-weight: 600; color: var(--ink-mid); margin-bottom: 4px; }
.box-picker .bp-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1.1;
  margin-bottom: 12px;
}
.bp-desc { font-size: 15px; line-height: 1.55; color: var(--ink); margin-bottom: 4px; }
.bp-desc strong { font-weight: 700; }
.bp-continue { margin-top: 26px; }

.bp-continue {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border-radius: 99px;
  background: var(--coral);
  color: var(--white);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s, transform 0.15s;
}
.bp-continue:hover { background: var(--coral-dk); transform: translateY(-2px); }
.bp-browse-all {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bp-browse-all:hover { color: var(--coral-dk); }

/* Phone: pick the age first, then the photos, then the details. */
@media (max-width: 820px) {
  .box-picker {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "picker" "gallery" "details";
    grid-template-rows: auto;
  }
  .bp-options { border-bottom: none; padding-bottom: 16px; }
  .bp-main { max-width: 440px; margin: 0 auto; }
  .bp-thumb { flex-basis: 56px; height: 56px; }
  .bp-arrow { display: none; }
  .bp-details { padding-top: 22px; }
}

/* iPhone-size screens. The photo keeps its own line in a wide frame (contain, so
   nothing is cropped) and swipes, with dots instead of arrows or thumbnails. */
@media (max-width: 560px) {
  .bp-main { max-width: none; aspect-ratio: auto; height: 190px; border-radius: 12px; }
  .bp-thumbs-row { display: none; }
  .bp-main-arrow { display: none; }
  .bp-main { touch-action: pan-y; }
  .bp-dots { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }

  /* The box buttons in a grid, three across ("11-12 months+" needs the room), styled like the
     gift page's phone pills. */
  .bp-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding-bottom: 10px; }
  .bp-option { padding: 6px 0; font-size: 13.5px; border-radius: 14px; text-align: center; }
  .bp-option.active { background: var(--coral-lt); border-color: #A9431F; color: #A9431F; }

  .bp-details { padding-top: 10px; }
  /* The age selector above already says the age. */
  .bp-age { display: none; }
  .box-picker .bp-name { font-size: 24px; margin-bottom: 6px; }
  .bp-desc { font-size: 14px; line-height: 1.45; margin-bottom: 2px; }
  .bp-continue { height: 44px; font-size: 16px; margin-top: 12px; }
  .bp-browse-all { font-size: 14px; margin-top: 8px; }
}