/* DeviceBazar Pack Selector.
   Scoped to .dbps* only. Mobile-first stacked cards; horizontal cards once the
   block itself is wide enough (container query, so the col-md-6 buy column
   decides, not the viewport). Accent #3751FF / focus #0020F9 match the product
   page Add to cart button (theme.css, Phase 11.4). */

.dbps{container-type:inline-size;margin:1rem 0 1.25rem;color:#232323;}
.dbps__title{margin:0 0 .5rem;font-size:.9375rem;font-weight:600;line-height:1.3;color:#232323;}
.dbps__list{display:grid;grid-template-columns:1fr;gap:.75rem;margin:0;padding:.5rem 0 0;list-style:none;}
.dbps__item{display:flex;margin:0;padding:0;}

/* Card: mobile row layout — quantity + unit price left, total + action right. */
.dbps__card{
  position:relative;flex:1 1 auto;
  display:grid;grid-template-columns:1fr auto;
  grid-template-areas:"qty price" "unit cta" "save save" "stock stock";
  align-items:baseline;column-gap:.75rem;
  min-height:44px;padding:.75rem .875rem;
  border:1px solid #d6d6d6;border-radius:8px;background:#fff;
  color:#232323;text-decoration:none;line-height:1.3;
  transition:border-color .15s ease,box-shadow .15s ease;
}
a.dbps__card:hover,a.dbps__card:focus{color:#232323;text-decoration:none;}
a.dbps__card:hover{border-color:#3751FF;box-shadow:0 2px 8px rgba(55,81,255,.15);}
a.dbps__card:focus-visible{outline:3px solid #0020F9;outline-offset:2px;box-shadow:0 0 0 4px rgba(55,81,255,.35);}

.dbps__card--current{background:#f4f6ff;border-color:#3751FF;}
.dbps__card--best{border:2px solid #3751FF;padding:calc(.75rem - 1px) calc(.875rem - 1px);}

.dbps__qty{grid-area:qty;font-size:.9375rem;font-weight:600;}
.dbps__price{grid-area:price;font-size:1.0625rem;font-weight:700;text-align:right;white-space:nowrap;}
.dbps__unit{grid-area:unit;font-size:.8125rem;color:#595959;}
.dbps__save{grid-area:save;margin-top:.25rem;font-size:.8125rem;font-weight:600;color:#15703f;}
.dbps__stock{grid-area:stock;margin-top:.25rem;font-size:.8125rem;color:#a4161a;}
.dbps__cta{grid-area:cta;font-size:.8125rem;font-weight:600;color:#3751FF;text-align:right;white-space:nowrap;}
.dbps__card--current .dbps__cta{color:#232323;}
a.dbps__card .dbps__cta::after{
  content:"";display:inline-block;width:.4em;height:.4em;margin-left:.35em;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:translateY(-.1em) rotate(45deg);
}

/* Sits on the card's top border so it never adds height. */
.dbps__badge{
  position:absolute;top:0;left:.75rem;transform:translateY(-50%);
  max-width:calc(100% - 1.5rem);overflow:hidden;text-overflow:ellipsis;
  padding:.125rem .5rem;border-radius:999px;
  background:#3751FF;color:#fff;font-size:.75rem;font-weight:600;line-height:1.4;white-space:nowrap;
}

/* Horizontal cards when the buy column has room for them. */
@container (min-width: 30rem){
  .dbps__list{grid-template-columns:repeat(auto-fit,minmax(6.75rem,1fr));}
  .dbps__card{display:flex;flex-direction:column;align-items:flex-start;padding:1rem .75rem .75rem;}
  .dbps__card--best{padding:calc(1rem - 1px) calc(.75rem - 1px) calc(.75rem - 1px);}
  .dbps__price{margin-top:.125rem;text-align:left;}
  .dbps__unit{margin-top:.125rem;}
  .dbps__cta{margin-top:auto;padding-top:.5rem;text-align:left;}
}

@media (prefers-reduced-motion: reduce){
  .dbps__card{transition:none;}
}