/* Build-A-Box page - uses the site's own fonts (agenda / proxima) and colors (black + #CDD949) */
.osr-bb {
  --bb-lime: var(--btn-color, #CDD949);
  --bb-ink: var(--osr-primary-color, #000);
  --bb-muted: #6b6b6b;
  --bb-line: #e5e5e5;
  --bb-soft: #f5f5f5;
  font-family: var(--body), proxima, sans-serif;
  color: var(--bb-ink);
  background: #fff;
  padding: calc(var(--bb-hh, 78px) + 24px) 0 80px;
}

.osr-bb h1,
.osr-bb h2,
.osr-bb h3,
.osr-bb__total strong {
  font-family: var(--heading), agenda, sans-serif;
}

/* container comes from the site's .osr-page-width (max-width + side padding) */
.osr-bb__wrap {
  box-sizing: border-box;
}

@media (max-width: 749px) {
  .osr-bb__wrap.osr-page-width {
    padding: 0 1.6rem;
  }
}

/* progress (sticks under the site header) */
.osr-bb__progress {
  position: relative;
  z-index: 1;
  background: #fff;
  border-bottom: 1px solid var(--bb-line);
  padding: 12px 0 12px;
  border-top: 1px solid var(--bb-line);
  margin-top: 20px;
}

.osr-bb__progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.osr-bb__track {
  height: 6px;
  border-radius: 6px;
  background: var(--bb-line);
  overflow: hidden;
}

.osr-bb__fill {
  height: 100%;
  width: 0;
  background: #cdd949;
  border-radius: 6px;
  transition: width .25s ease;
}

.osr-bb__fill.is-done {
  background: var(--bb-lime);
}

.osr-bb__hero {
  padding: 40px 0 28px;
}

.osr-bb__hero h1 {
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
  margin: 0 0 12px;
}

.osr-bb__hero p {
  max-width: 580px;
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #444;
}

.osr-bb__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 36px;
  align-items: start;
}

.osr-bb__group {
  margin-bottom: 40px;
  border-radius: 12px;
  transition: box-shadow .3s;
  scroll-margin-top: 150px;
}

.osr-bb__group.is-flash {
  box-shadow: 0 0 0 4px var(--bb-lime);
}

.osr-bb__group-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--bb-line);
}

.osr-bb__group-head h2 {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 24px;
  margin: 0 0 4px;
  line-height: 1.1;
}

.osr-bb__group-head p {
  margin: 0;
  font-size: 14px;
  color: var(--bb-muted);
}

.osr-bb__badge {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--bb-soft);
  color: #333;
  border-radius: 99px;
  padding: 6px 12px;
}

.osr-bb__badge.is-done {
  background: var(--bb-lime);
  color: #000;
}

.osr-bb__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.osr-bb__card {
  background: #fff;
  border: 1px solid var(--bb-line);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, opacity .15s;
}

.osr-bb__card:hover {
  border-color: #bbb;
}

.osr-bb__card.is-selected {
  border-color: #cdd949;
  box-shadow: 0 0 0 1px #cdd949;
}

.osr-bb__card.is-dim {
  opacity: .5;
  cursor: default;
}

.osr-bb__img {
  margin: 10px;
  background: #fff;
  border-radius: 8px;
  aspect-ratio: 1 / 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.osr-bb__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.osr-bb__card-body {
  padding: 0 12px 14px;
}

.osr-bb__card p {
  font-size: 15px;
  font-weight: 700;
  margin: 4px 0 2px;
  line-height: 1.3;
}

.osr-bb__each {
  display: block;
  font-size: 13px;
  color: var(--bb-muted);
  margin-bottom: 10px;
}

.osr-bb__ctrl button {
  font-family: inherit;
  cursor: pointer;
}

.osr-bb__add {
  width: 100%;
  height: 38px;
  border-radius: 50px;
  border: 1px solid #d8dfe6;
  background: #fff;
  color: #000;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  transition: background .15s, color .15s;
}

.osr-bb__add:hover:not(:disabled) {
  background: #000;
  color: #ffffff;
}

.osr-bb__add:disabled {
  cursor: not-allowed;
  color: #aaa;
  border-color: var(--bb-line);
  background: var(--bb-soft);
}

.osr-bb__step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  border-radius: 50px;
  background: transparent;
  border: 1px solid #d8dfe6;
  color: #000000;
  padding: 0 4px;
}

.osr-bb__step[hidden],
.osr-bb__add[hidden] {
  display: none;
}

.osr-bb__step button {
  width: 30px;
  height: 30px;
  min-height: 0;
  border-radius: 100px;
  border: 0;
  background: #e2e9f0;
  color: #000;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  margin: 0;
}

.osr-bb__step button:hover {
  background: #cdd949;
}

.osr-bb__step button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.osr-bb__qty {
  font-size: 14px;
  font-weight: 700;
}

/* bundle panel */
.osr-bb__panel {
  position: sticky;
  top: calc(var(--bb-top, 70px) + 20px);
  background: #fff;
  border: 1px solid #cdd949;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .07);
}

.osr-bb__panel h2 {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 20px;
  margin: 0 0px;
  width: fit-content;
}

.osr-bb__slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.osr-bb__slot {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1.5px dashed #bbb;
  border-radius: 10px;
  background: var(--bb-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 13px/1 var(--body), proxima, sans-serif;
  color: #777;
  padding: 0;
  margin: 0;
  min-height: 0;
}

.osr-bb__slot.is-empty {
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  transition: border-color .15s, background .15s, color .15s;
}

.osr-bb__slot.is-empty:hover {
  border-color: #000;
  background: var(--bb-lime);
  color: #000;
}

.osr-bb__slot.is-filled {
  border: 1.5px solid #000;
  background: #fff;
}

.osr-bb__slot img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

.osr-bb__x {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  min-width: 0;
  min-height: 0;
  border-radius: 50%;
  border: 0;
  padding: 0;
  margin: 0;
  font-size: 20px;
  line-height: 1.1;
  cursor: pointer;
  background: #000;
  box-shadow: none;
  color: #fff;
}

.osr-bb__x:hover {
  background-color: #333;
}

.osr-bb__lines {
  border-top: 1px solid var(--bb-line);
  padding-top: 12px;
  margin-bottom: 12px;
  font-size: 14px;
}

.osr-bb__empty {
  margin: 0;
  color: var(--bb-muted);
}

.osr-bb__line,
.osr-bb__disc,
.osr-bb__total {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.osr-bb__line {
  padding: 4px 0;
  align-items: center;
}

.osr-bb__line>span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.osr-bb__line img {
  width: 26px;
  height: 32px;
  object-fit: contain;
  background: var(--bb-soft);
  border-radius: 4px;
  flex: none;
}

.osr-bb__totals {
  border-top: 1px solid var(--bb-line);
  padding-top: 12px;
  margin-bottom: 14px;
}

.osr-bb__disc {
  font-size: 14px;
  margin-bottom: 8px;
}

.osr-bb__total {
  align-items: baseline;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.osr-bb__total strong {
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0;
}

.osr-bb__total del {
  color: var(--bb-muted);
  font-weight: 500;
  margin-right: 6px;
  font-size: 14px;
}

.osr-bb__cta {
  display: block;
  width: 100%;
  height: 50px;
  min-height: 0;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 50px;
  background: #cdd949;
  color: #000;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  cursor: not-allowed;
  transition: background .15s, color .15s;
}

.osr-bb__cta.is-ready {
  cursor: pointer;
}

.osr-bb__msg {
  margin: 8px 0 0;
  font-size: 13px;
  color: #b00020;
  text-align: center;
}

.osr-bb__msg:empty {
  display: none;
}

.osr-bb__note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--bb-muted);
  text-align: center;
}

@media (max-width: 949px) {
  .osr-bb__layout {
    grid-template-columns: 1fr;
  }

  .osr-bb__panel {
    position: static;
    order: -1;
    margin-bottom: 8px;
  }

  /* like the Lovable design: bundle panel first on mobile/tablet */
}

@media (max-width: 600px) {
  .osr-bb__wrap {
    padding: 0 16px;
  }

  .osr-bb__hero {
    padding: 28px 0 20px;
  }

  .osr-bb__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .osr-bb__group-head h2 {
    font-size: 20px;
  }
}

/* mobile / tablet: price + add to cart bar fixed to the bottom (like the Lovable design) */
.osr-bb__sticky {
  display: none;
}

@media (max-width: 949px) {
  .osr-bb__sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--bb-line);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
  }

  .osr-bb__sticky-info {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    white-space: nowrap;
  }

  .osr-bb__sticky-info small {
    font-size: 12px;
    color: var(--bb-muted);
  }

  .osr-bb__sticky-info strong {
    font-size: 22px;
    font-weight: 800;
    color: #000;
  }

  .osr-bb__sticky-cta {
    flex: 1;
    height: 48px;
    min-height: 0;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 50px;
    background: #cdd949;
    color: #000;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    cursor: not-allowed;
  }

  .osr-bb__sticky-cta.is-ready {
    cursor: pointer;
  }

  .osr-bb {
    padding-bottom: 84px;
  }
}
/* top image + coming soon + frequency (subscribe & save) */
.osr-bb__top { margin: 0 0 24px; border-radius: 16px; overflow: hidden; }
.osr-bb__top-img { display: block; width: 100%; height: auto; }
.osr-bb__card.is-soon .osr-bb__img { opacity: .75; }
.osr-bb__freq .osr-bb__opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--bb-line); border-radius: 12px; margin-bottom: 10px; cursor: pointer; background: #fff; }
.osr-bb__freq .osr-bb__opt:has(input:checked) { border-color: var(--bb-ink); box-shadow: 0 0 0 1px var(--bb-ink); }
.osr-bb__opt input { margin: 0; accent-color: #000; width: 18px; height: 18px; flex: none; }
.osr-bb__opt-name { flex: 1; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 14px; }
.osr-bb__opt-price { font-size: 16px; white-space: nowrap; }
.osr-bb__opt-was { color: var(--bb-muted); font-size: 13px; margin-right: 4px; }
.osr-bb__days { width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--bb-ink); border-radius: 999px; background: #fff; font: inherit; font-size: 14px; color: var(--bb-ink); }
.osr-bb__days:disabled { opacity: .5; }

/* Your bundle panel - like the Lovable design: soft card, box image with the chosen diffusers placed in a tray on top */
.osr-bb__panel { border: 0; border-radius: 24px; padding: 22px; box-shadow: 0 12px 40px rgba(20, 20, 40, .10), 0 0 0 1px rgba(0, 0, 0, .04); }
.osr-bb__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.osr-bb__panel-head h2 { font-size: 22px; letter-spacing: .01em; }
.osr-bb__boxart { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 18px; background: linear-gradient(135deg, #f3f3f3, #e6e6e6); }
.osr-bb__boxart-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.osr-bb__boxart .osr-bb__slots { position: absolute; left: 4%; right: 4%; bottom: 5%; margin: 0; padding: 7px; display: grid; grid-template-columns: repeat(var(--bb-n, 6), minmax(0, 1fr)); gap: 6px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
.osr-bb__boxart .osr-bb__slot { aspect-ratio: 1 / 2.05; border-radius: 9px; border: 1.5px dashed rgba(190, 120, 140, .55); background: rgba(255, 235, 240, .55); font-size: 11px; font-weight: 700; color: #7a5560; }
.osr-bb__boxart .osr-bb__slot.is-empty:hover { border-color: #000; background: var(--bb-lime); color: #000; }
.osr-bb__boxart .osr-bb__slot.is-filled { border: 0; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); overflow: visible; }
.osr-bb__boxart .osr-bb__slot img { width: 100%; height: 100%; object-fit: contain; border-radius: 9px; }
.osr-bb__boxart .osr-bb__x { top: -6px; right: -6px; width: 18px; height: 18px; font-size: 15px; line-height: 1; z-index: 2; }
.osr-bb__boxart.is-plain { aspect-ratio: auto; min-height: 150px; background: #f6f6f6; }
.osr-bb__boxart.is-plain .osr-bb__slots { position: static; margin: 14px; }
.osr-bb__panel .osr-bb__lines { border-top: 1px solid var(--bb-line); padding-top: 16px; margin-bottom: 16px; }
.osr-bb__panel .osr-bb__empty { color: #666; }
.osr-bb__panel .osr-bb__totals { border-top: 1px solid var(--bb-line); padding-top: 18px; margin-bottom: 18px; }
.osr-bb__panel .osr-bb__total strong { font-size: 30px; }
.osr-bb__panel .osr-bb__cta { height: 56px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; }
.osr-bb__panel .osr-bb__cta::before { content: ""; width: 20px; height: 20px; background: currentColor; flex: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Choose your frequency: inside the "Your bundle" panel */
.osr-bb__panel .osr-bb__freq { border-top: 1px solid var(--bb-line); padding-top: 16px; margin-bottom: 16px; }
.osr-bb__freq-head h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.osr-bb__panel .osr-bb__freq .osr-bb__opt { padding: 11px 12px; gap: 10px; margin-bottom: 8px; border-radius: 12px; }
.osr-bb__panel .osr-bb__opt-name { font-size: 12.5px; letter-spacing: .02em; }
.osr-bb__panel .osr-bb__opt-price { font-size: 14px; }
.osr-bb__panel .osr-bb__days { height: 44px; font-size: 13px; padding: 0 14px; margin: 0; }

/* Your Bundle Variety */
.osr-bb__variety { background: var(--v-bg, #f6f6f1); color: var(--v-text, #000); border-radius: 24px; padding: 20px 14px 14px; margin-top: 16px; text-align: center; box-shadow: 0 12px 40px rgba(20, 20, 40, .08), 0 0 0 1px rgba(0, 0, 0, .04); }
.osr-bb__variety h3 { color: var(--v-text, #000); margin: 0 0 14px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.osr-bb__v-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 18px; margin-bottom: 14px; }
.osr-bb__v { display: flex; align-items: center; gap: 8px; }
.osr-bb__v-ic { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 2px dashed var(--v-idle-line, #b9b9b0); background: rgba(255, 255, 255, .6); display: flex; align-items: center; justify-content: center; flex: none; }
.osr-bb__v-ic img { width: 70%; height: 70%; object-fit: contain; opacity: .45; filter: grayscale(1); }
.osr-bb__v-n { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--v-idle-bg, #fff3a3); color: var(--v-idle-text, #333); font: 700 11px/20px var(--body), proxima, sans-serif; text-align: center; }
.osr-bb__v.is-on .osr-bb__v-ic { border: 2px solid var(--v-active, #000); background: #fff; }
.osr-bb__v.is-on .osr-bb__v-ic img { opacity: 1; filter: none; }
.osr-bb__v.is-on .osr-bb__v-n { background: var(--v-badge-bg, #000); color: var(--v-badge-text, #fff); }
.osr-bb__v-l { color: var(--v-text, #000); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; text-align: left; }
.osr-bb__v-hint { margin: 0; padding: 8px 10px; background: var(--v-hint-bg, #fff); color: var(--v-hint-text, #000); border-radius: 8px; font-size: 12px; font-weight: 600; }

/* sidebar column = panel card + variety card; scrolls inside itself when taller than the screen */
.osr-bb__side { position: sticky; top: calc(var(--bb-top, 70px) + 20px); max-height: calc(100vh - var(--bb-top, 70px) - 30px); overflow-y: auto; padding: 0 10px 30px; margin: 0 -10px; scrollbar-width: none; }
.osr-bb__side::-webkit-scrollbar { display: none; }
.osr-bb__side .osr-bb__panel { position: static; }
@media (max-width: 949px) {
  .osr-bb__side { position: static; order: -1; max-height: none; overflow: visible; padding: 0; margin: 0 0 8px; }
}