/* ---------- Design tokens ---------- */
:root{
  --wbbb-bg: #fff7f3;
  --wbbb-bg-active: #ffe9e2;
  --wbbb-border: #efcfc3;
  --wbbb-border-active: #e08b72;
  --wbbb-text: #3c3c3c;
  --wbbb-muted: #a0a6ad;
  --wbbb-accent: #c04b2b;
  --wbbb-badge: #ffc454;
  --wbbb-radius: 14px;
  --wbbb-pad-y: 18px;
  --wbbb-pad-x: 22px;
  --wbbb-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* ---------- Wrapper ---------- */
.wbbb-buybox{
  display:grid;
  gap:16px;
  margin:16px 0 26px;
}

/* ---------- Card ---------- */
.wbbb-card{ position:relative; display:block; cursor:pointer; border-radius:var(--wbbb-radius); }
.wbbb-card input{ display:none; }

/* Grid areas:
   Desktop:
     [left  right]
     [save  right]
   Mobile:
     [left  right]
     [save  right]
   (same template; we just style alignment differently)
*/
.wbbb-card__inner{
  background: var(--wbbb-bg);
  border:1.5px solid var(--wbbb-border);
  border-radius: var(--wbbb-radius);
  padding: var(--wbbb-pad-y) var(--wbbb-pad-x);
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease, transform .1s ease;
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "left right"
    "save right";
  column-gap: 22px;
  row-gap: 4px;
  align-items:center;
}
.wbbb-card:hover .wbbb-card__inner{ box-shadow: var(--wbbb-shadow); transform: translateY(-1px); }
.wbbb-card.is-selected .wbbb-card__inner,
.wbbb-card input:checked + .wbbb-card__inner{
  background: var(--wbbb-bg-active);
  border-color: var(--wbbb-border-active);
}

/* Left side (title) */
.wbbb-left{ grid-area:left; }
.wbbb-card__qty{
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 800;
  line-height:1.15;
  color: var(--wbbb-text);
}

/* Right side (price + was stacked) */
.wbbb-right{
  grid-area:right;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
}
.wbbb-card__price{
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 800;
  color: var(--wbbb-text);
  white-space: nowrap;
  line-height:1.15;
}
.wbbb-card__was{
  margin-top: 4px;
  color: var(--wbbb-muted);
  font-size: 15px;
  line-height:1;
}
.wbbb-card__was s{
  opacity:.85;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--wbbb-muted);
}

/* Savings (positioned by grid; on desktop appears under price because it shares the row but in the "save" area aligned right) */
.wbbb-save{
  grid-area: save;
  font-size: 17px;
  font-weight: 600; 
  color: var(--wbbb-accent);
  text-align:left;
}

/* Badge */
.wbbb-card__badge{
  position:absolute;
  right: 18px;
  top: -12px;
  background: var(--wbbb-badge);
  color: #323232;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  line-height:1;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

/* ---------- Mobile tweaks (match your screenshot) ---------- */
@media (max-width: 540px){
  .wbbb-card__inner{
    /* keep 2 columns but reduce gaps so it feels compact */
    column-gap: 16px;
    row-gap: 6px;
  }
  /* On mobile, we want: left column shows title AND savings underneath;
     right column shows price and the struck-through price stacked. */
  .wbbb-save{
    text-align: left;            /* move savings label under left block */
    align-self: start;
    font-size: 15px;
  }
  .wbbb-right{
    align-items:flex-end;        /* keep price aligned to the right edge */
  }
  .wbbb-card__price{ font-size: 20px; }
}