/* Build Your Own Bundle — misma estructura que jennifer-bags.com, colores de Pearl & Piper */
.bb-trust { background: #faf6f1; padding: 26px 0 22px; font-family: var(--font-body-family); }
.bb-trust__list { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.bb-trust__list li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 10px; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #241f1a; }
.bb-trust__list li + li { border-left: 1px solid #e8e4df; }
.bb-trust__list svg { width: 22px; height: 22px; color: #241f1a; }
.bb-quote { padding: 40px 0; }
.bb-quote__in { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: 1100px; }
.bb-quote__img { width: 100%; height: auto; max-height: 420px; object-fit: cover; border-radius: 10px; }
.bb-quote__txt { text-align: center; }
.bb-quote__h { margin: 0 0 14px; font-family: var(--font-body-family); font-size: 30px; font-weight: 700; line-height: 1.25; color: #241f1a; }
.bb-quote__txt p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: #241f1a; }
.bb-quote__txt .bb-quote__left { font-size: 14px; color: #b8241c; }
.bb-steps { background: #faf6f1; padding: 32px 0; }
.bb-steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.bb-steps__h { margin: 0 0 6px; font-size: 18px; font-weight: 700; line-height: 1.3; color: #241f1a; }
.bb-steps__s { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: #b8241c; }
.bb-steps__t { margin: 0; font-size: 15px; line-height: 1.5; color: #2a211b; }
.box-builder { padding-top: 34px; padding-bottom: 120px; font-family: var(--font-body-family); }
.bb-step-label { margin: 0 0 16px; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #241f1a; }
.bb-sizes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.bb-size-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 104px; padding: 12px 16px; border: 1.5px solid #e8e4df; border-radius: 10px; background: #fff; color: #241f1a; font: inherit; cursor: pointer; transition: all .15s; }
.bb-size-btn__label { font-size: 15px; font-weight: 700; }
.bb-size-btn__price { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: #b8241c; }
.bb-size-btn:hover { border-color: #241f1a; }
.bb-size-btn.is-active { border-color: #111; background: #111; color: #fff; }
.bb-size-btn.is-active .bb-size-btn__price { color: #fff; }
.bb-divider { margin: 30px 0; border: 0; border-top: 1px solid #e8e4df; }
.bb-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 24px; }
.bb-cat-btn { padding: 10px 20px; border: 1px solid #e8e4df; border-radius: 999px; background: #fff; color: #241f1a; font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; cursor: pointer; }
.bb-cat-btn.is-active { border-color: #241f1a; background: #241f1a; color: #fff; }
.bb-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 16px; }
.bb-card[hidden] { display: none; }
.bb-card__image { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: #faf6f1; }
.bb-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bb-card__badge { position: absolute; top: 8px; right: 8px; z-index: 1; padding: 3px 7px; border-radius: 3px; background: #241f1a; color: #fff; font-size: 11px; font-weight: 700; }
.bb-card__info { display: flex; flex-direction: column; gap: 8px; padding-top: 9px; }
.bb-card__title { margin: 0; min-height: 2.6em; font-family: var(--font-body-family); font-size: 13px; font-weight: 400; line-height: 1.3; color: #241f1a; }
.bb-card__price { font-size: 13px; }
.bb-card__was { opacity: .55; margin-right: 4px; }
.bb-card__now { font-weight: 700; color: #b8241c; }
.bb-card__size { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #ddd; border-radius: 6px; background: #fff; font: inherit; font-size: 13px; color: #241f1a; }
.bb-add { height: 40px; border: 1.5px solid #111; border-radius: 6px; background: #fff; color: #111; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.bb-add:hover { background: #111; color: #fff; }
.bb-add.is-in { background: #111; color: #fff; }
.bb-add[disabled] { opacity: .4; cursor: default; }
.bb-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -6px 24px rgba(0,0,0,.12); font-family: var(--font-body-family); }
.bb-bar__in { display: flex; align-items: center; gap: 14px; max-width: 900px; margin: 0 auto; }
.bb-bar__picks { display: flex; gap: 6px; flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; }
.bb-pick { position: relative; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 6px; overflow: hidden; border: 1px dashed #d6cec6; background: #faf6f1; }
.bb-pick img { width: 100%; height: 100%; object-fit: cover; }
.bb-pick button { position: absolute; top: 1px; right: 1px; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; line-height: 16px; cursor: pointer; }
.bb-bar__count { flex: 1 1 auto; margin: 0; font-size: 14px; font-weight: 600; color: #241f1a; white-space: nowrap; }
.bb-bar__btn { flex: 0 0 auto; height: 46px; padding: 0 26px; border: 0; border-radius: 6px; background: #111; color: #fff; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; }
.bb-bar__btn[disabled] { background: #bdbdbd; cursor: default; }
@media (max-width: 989px) { .bb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 749px) {
  .bb-trust__list { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .bb-trust__list li:nth-child(3) { border-left: 0; }
  .bb-quote__in { grid-template-columns: 1fr; gap: 22px; }
  .bb-quote__h { font-size: 23px; }
  .bb-steps__grid { grid-template-columns: 1fr; }
  .bb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .bb-size-btn { min-width: 92px; padding: 10px 12px; }
  .bb-bar__picks { display: none; }
  .bb-bar__btn { padding: 0 18px; font-size: 12px; }
}