/* ============================================================ Cart drawer =
   Brandage look for the theme cart drawer + shared cart line styling
   (drawer and cart page). Loaded by components/cart/cart-drawer.html and
   sections/main-cart-items.
   ========================================================================== */

/* Scrim */
.bd-drawer theme-modal > details[open]::before {
  background-color: rgba(22, 24, 58, 0.55);
}

.bd-drawer .cart-drawer__body {
  width: min(420px, 92vw);
  height: 100vh;
  height: 100dvh;
  background: var(--bd-cream);
  color: var(--bd-ink);
  border-left: var(--bd-border) solid var(--bd-navy);
  font-family: var(--bd-font-body);
}

/* Head */
.bd-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: var(--bd-border) solid var(--bd-navy);
}
.bd-drawer__head::after { display: none; }
.bd-drawer__head h2 {
  margin: 0;
  font-family: var(--bd-font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--bd-ink);
}
.bd-drawer__head h2 span { font-weight: 600; color: var(--bd-muted); }
.bd-drawer .bd-drawer__close {
  position: static;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--bd-navy);
  background: var(--bd-cream);
  color: var(--bd-ink);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
.bd-drawer .bd-drawer__close:hover { background: var(--bd-pale); }

/* Body */
.bd-drawer .bd-drawer__body {
  padding: 8px 22px;
  overflow-y: auto;
  background: var(--bd-cream);
}
.bd-drawer .cart-drawer__loading { background: var(--bd-cream); }

.bd-drawer__empty {
  padding: 40px 0;
  text-align: center;
}
.bd-drawer__empty p {
  margin: 0 0 18px;
  font-size: 16px;
  color: var(--bd-muted);
}

/* Foot */
.bd-drawer__foot {
  border-top: var(--bd-border) solid var(--bd-navy);
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bd-cream);
}
.bd-drawer__foot::before { display: none; }
.bd-drawer__foot .cart-amount { margin: 0; }
.bd-drawer__foot .cart-amount:empty { display: none; }
.bd-drawer__foot .cart-amount > li { margin-block-end: 6px; font-size: 15px; }
.bd-drawer__row {
  display: flex;
  justify-content: space-between;
  font-size: 17px;
  font-weight: 800;
  color: var(--bd-ink);
}
.bd-drawer__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.bd-drawer__actions form { margin: 0; }
.bd-drawer__actions .bd-btn,
.bd-drawer__actions a.bd-btn { min-height: 50px; font-size: 15px; padding: 0 14px; width: 100%; }
@media (max-width: 760px) {
  .bd-drawer__actions { grid-template-columns: 1fr; }
}

.bd-drawer__coupon .field__input,
.bd-drawer__coupon input {
  border-radius: 999px;
}

/* Free-shipping note ------------------------------------------------------- */

.bd-ship-note { display: block; }
.bd-ship-note__text {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--bd-muted);
}
.bd-ship-note--ok .bd-ship-note__text { color: var(--bd-navy); }
.bd-ship-note__bar {
  margin-top: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--bd-pale);
  border: 2px solid var(--bd-navy);
  overflow: hidden;
}
.bd-ship-note__bar span {
  display: block;
  height: 100%;
  background: var(--bd-pink);
  transition: width 0.3s ease;
}
.bd-ship-note--ok .bd-ship-note__bar span { background: var(--bd-yellow); }

/* Cart line (drawer) ------------------------------------------------------- */

.bd-drawer .cart-item {
  padding: 16px 0;
  border-bottom: 2px solid var(--bd-pale);
}
.bd-drawer .cart-item__product {
  column-gap: 14px;
  align-items: flex-start;
}
.bd-drawer .cart-item__picture {
  width: 60px;
}
.bd-drawer .cart-item__picture a,
.bd-drawer .cart-item__picture .placeholder {
  display: block;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 10px;
  border: 2px solid var(--bd-navy);
  background: var(--bd-cream);
}
.bd-drawer .cart-item__picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bd-drawer .cart-item__product-infos { flex: 1 1 auto; min-width: 0; }
.bd-drawer .cart-item__title { font-size: 15.5px; font-weight: 800; line-height: 1.35; }
.bd-drawer .cart-item__title a { color: var(--bd-ink); text-decoration: none; }
.bd-drawer .cart-item__title a:hover { color: var(--bd-pink); }
.bd-drawer .cart-item__total { margin-top: 2px; font-size: 13.5px; }
.bd-drawer .cart-item__total-final { color: var(--bd-muted); font-weight: 700; }
.bd-drawer .cart-item__options { font-size: 13.5px; color: var(--bd-muted); }
.bd-drawer .cart-item__quantity,
.bd-drawer .cart-item__amount { margin-top: 10px; }
.bd-drawer .cart-item__amount-operator { gap: 14px; }

/* Shared quantity pill (drawer + cart page) -------------------------------- */

.bd-drawer theme-input-number,
.main-cart-items theme-input-number {
  display: inline-flex;
  align-items: stretch;
  width: auto;
  height: auto;
  border: var(--bd-border) solid var(--bd-ink);
  border-radius: 999px;
  overflow: hidden;
  background: var(--bd-cream);
}
/* The theme's input component draws its own ring on ::before/::after
   (only loaded in some contexts, e.g. the drawer) — keep just our border. */
.bd-drawer theme-input-number::before,
.bd-drawer theme-input-number::after,
.main-cart-items theme-input-number::before,
.main-cart-items theme-input-number::after {
  display: none !important;
  box-shadow: none !important;
}
.bd-drawer theme-input-number button,
.main-cart-items theme-input-number button {
  width: 38px;
  min-height: 42px;
  border: 0;
  background: var(--bd-cream);
  color: var(--bd-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.bd-drawer theme-input-number button:hover:not([disabled]),
.main-cart-items theme-input-number button:hover:not([disabled]) { background: var(--bd-pale); }
.bd-drawer theme-input-number button svg,
.main-cart-items theme-input-number button svg { width: 14px; height: 14px; }
.bd-drawer theme-input-number button svg path,
.main-cart-items theme-input-number button svg path { stroke-width: 2.5px; }
.bd-drawer theme-input-number input,
.main-cart-items theme-input-number input {
  width: 50px;
  min-height: 42px;
  border: 0;
  border-left: var(--bd-border) solid var(--bd-ink);
  border-right: var(--bd-border) solid var(--bd-ink);
  text-align: center;
  font-family: var(--bd-font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--bd-ink);
  background: var(--bd-cream);
  -moz-appearance: textfield;
}
.bd-drawer theme-input-number input::-webkit-outer-spin-button,
.bd-drawer theme-input-number input::-webkit-inner-spin-button,
.main-cart-items theme-input-number input::-webkit-outer-spin-button,
.main-cart-items theme-input-number input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.bd-drawer .cart-item__remove,
.main-cart-items .cart-item__remove {
  display: inline-flex;
  align-items: center;
  color: var(--bd-navy);
}
.bd-drawer .cart-item__remove svg,
.main-cart-items .cart-item__remove svg { width: 20px; height: 20px; }
.bd-drawer .cart-item__remove:hover,
.main-cart-items .cart-item__remove:hover { color: var(--bd-pink); }

/* Compact quantity stepper — cart drawer only (cart page keeps the full size) */
.bd-drawer theme-input-number { border-width: 2px; }
.bd-drawer theme-input-number button {
  width: 30px;
  min-height: 32px;
}
.bd-drawer theme-input-number button svg { width: 11px; height: 11px; }
.bd-drawer theme-input-number input {
  width: 36px;
  min-height: 32px;
  border-left-width: 2px;
  border-right-width: 2px;
  font-size: 14px;
}
.bd-drawer .cart-item__remove svg { width: 18px; height: 18px; }

/* Store product shots are small pastel boxes on a large white canvas; at
   thumbnail size they read as washed out. Crop in and let the white canvas
   blend into the cream card so the pack fills the frame. */
.bd-drawer .cart-item__picture img,
.main-cart-items .bd-cart-line__img img {
  mix-blend-mode: multiply;
  transform: scale(1.3);
  transform-origin: center;
}