/* Cart drawer in the Burdock design: the stock drawer (components/cart/cart-drawer.html) and its widgets,
   restyled only — every element and class its scripts use stays as it is. Loaded on every page, because the
   drawer is (layout/theme.html). Scoped to .cart-drawer, so the cart page's own lines are untouched. */

/* panel */
theme-cart-drawer .cart-drawer .cart-drawer__body { width: 440px; max-width: 100vw; background: var(--white); color: var(--ink); font-family: var(--font-ui); }
@media (max-width: 560px) { theme-cart-drawer .cart-drawer .cart-drawer__body { width: 100vw; } }

/* header */
theme-cart-drawer .cart-drawer .cart-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; border-bottom: 1px solid var(--line); }
theme-cart-drawer .cart-drawer .cart-drawer__header::after { display: none; }
theme-cart-drawer .cart-drawer .cart-drawer__header h2 { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: 1.625rem; line-height: 1.1; letter-spacing: -.01em; color: var(--ink); }
theme-cart-drawer .cart-drawer .cart-drawer__close { position: static; display: flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); margin-inline-end: -14px; padding: 0; color: var(--ink); }
theme-cart-drawer .cart-drawer .cart-drawer__close svg { width: 13px; height: 13px; }
theme-cart-drawer .cart-drawer .cart-drawer__close:hover { color: var(--accent); }

/* lines */
theme-cart-drawer .cart-drawer .cart-drawer__inner { padding-inline: 28px; background: var(--white); overflow-y: auto; }
theme-cart-drawer .cart-drawer .cart-item { padding-block: 18px; border-bottom: 1px solid var(--line-soft); }
theme-cart-drawer .cart-drawer .cart-item__product { column-gap: 16px; }
theme-cart-drawer .cart-drawer .cart-item__picture { position: relative; width: 78px; height: 78px; background: var(--bone); overflow: hidden; }
theme-cart-drawer .cart-drawer .cart-item__picture a { position: absolute; inset: 0; }
theme-cart-drawer .cart-drawer .cart-item__picture img { width: 100%; height: 100%; object-fit: cover; }
theme-cart-drawer .cart-drawer .cart-item__product-infos { flex: 1; min-width: 0; }
theme-cart-drawer .cart-drawer .cart-item__product-infos-text { display: flex; flex-direction: column; gap: 6px; }
theme-cart-drawer .cart-drawer .cart-item__title { font-size: .90625rem; line-height: 1.35; font-weight: 400; word-break: normal; }
theme-cart-drawer .cart-drawer .cart-item__title a { color: var(--ink); text-decoration: none; }
theme-cart-drawer .cart-drawer .cart-item__title a:hover { color: var(--accent); }
theme-cart-drawer .cart-drawer .cart-item__total { margin: 0; }
theme-cart-drawer .cart-drawer .cart-item__total-amount { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
theme-cart-drawer .cart-drawer .cart-item__total-final { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 400; color: var(--ink); }
theme-cart-drawer .cart-drawer .cart-item__total-original { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--mute-faint); text-decoration: line-through; }
theme-cart-drawer .cart-drawer .cart-item__option { margin: 0; font-size: var(--fs-xs); color: var(--body-soft); }
theme-cart-drawer .cart-drawer .cart-item__option .font-bold { font-weight: 400; }

/* subscription plan and its discount: one quiet sage line each, as in the design */
theme-cart-drawer .cart-drawer .cart-item__selling-plan .body6,
theme-cart-drawer .cart-drawer .cart-item__discount { font-family: var(--font-mono); font-size: .625rem; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
theme-cart-drawer .cart-drawer .cart-item__selling-plan .font-bold { font-weight: 400; }
theme-cart-drawer .cart-drawer .cart-item__discount { margin: 0; }
theme-cart-drawer .cart-drawer .cart-item__discount > li svg { width: 10px; height: 10px; color: var(--accent); }
/* when the app draws its frequency switcher, that already names the plan */
theme-cart-drawer .cart-drawer .cart-item__product-infos-text:has(.isv-subscription-select select) .cart-item__selling-plan { display: none; }

/* the Subscriptions app's plan switcher on a subscribed line (and its upgrade button on a one-time line):
   a slim outlined control instead of a full-width black block */
theme-cart-drawer .cart-drawer .isv-subscription-cart-row-dom:empty { display: none; }
theme-cart-drawer .cart-drawer .isv-subscription-cart-row-dom { margin-top: 2px; max-width: 100%; }
theme-cart-drawer .cart-drawer .isv-subscription-cart-row-dom.isv-subscription-select > div {
  position: relative; display: inline-flex; align-items: center; max-width: 100%; height: 32px;
  background: var(--white) !important; border: 1px solid var(--sand) !important; border-radius: 0 !important; color: var(--ink) !important;
}
theme-cart-drawer .cart-drawer .isv-subscription-cart-row-dom select {
  height: 30px; max-width: 100%; padding: 0 30px 0 10px; border: 0; background: transparent !important; appearance: none; -webkit-appearance: none;
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 400 !important; line-height: 30px; color: var(--ink) !important; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;
  text-align: left !important; text-align-last: left !important;
}
theme-cart-drawer .cart-drawer .isv-subscription-cart-row-dom.isv-subscription-select > div > span { position: absolute; right: 11px; pointer-events: none; color: var(--ink) !important; border-color: var(--ink) !important; }
theme-cart-drawer .cart-drawer .isv-subscription-cart-row-dom button {
  min-height: 32px; padding: 6px 14px; border-radius: var(--radius-pill) !important;
  font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--ls-button); text-transform: uppercase; line-height: 1.2;
}

/* quantity + remove */
theme-cart-drawer .cart-drawer .cart-item__amount { margin-top: 12px; }
theme-cart-drawer .cart-drawer .cart-item__amount-operator { display: flex; align-items: center; gap: 14px; }
theme-cart-drawer .cart-drawer .cart-item__amount theme-input-number { width: auto; height: 32px; border: 1px solid var(--sand); border-radius: 0; background: transparent; }
theme-cart-drawer .cart-drawer .cart-item__amount theme-input-number::before,
theme-cart-drawer .cart-drawer .cart-item__amount theme-input-number::after { display: none; }
theme-cart-drawer .cart-drawer .cart-item__amount theme-input-number button[name="minus"],
theme-cart-drawer .cart-drawer .cart-item__amount theme-input-number button[name="plus"] { width: 30px; color: var(--body); }
theme-cart-drawer .cart-drawer .cart-item__amount theme-input-number input[type="number"] { width: 26px; flex: none; padding: 0; font-family: var(--font-mono); font-size: .78125rem; color: var(--ink); }
theme-cart-drawer .cart-drawer .cart-item__remove { display: flex; align-items: center; color: var(--mute); cursor: pointer; transition: color var(--dur) var(--ease); }
theme-cart-drawer .cart-drawer .cart-item__remove:hover { color: var(--alert); }
theme-cart-drawer .cart-drawer .cart-item__remove svg { width: 15px; height: 15px; }
theme-cart-drawer .cart-drawer .cart-item__fail-tip { font-size: var(--fs-2xs); color: var(--alert); }

/* coupon and amounts (shown when the store enables them) */
theme-cart-drawer .cart-drawer .cart-drawer__payment::before { inset-inline-start: 0; width: 100%; background: var(--line); }
theme-cart-drawer .cart-drawer .cart-amount > li { font-size: var(--fs-sm); color: var(--body); }
theme-cart-drawer .cart-drawer .cart-amount > li em { font-style: normal; }

/* footer: taxes note, total, checkout */
theme-cart-drawer .cart-drawer .cart-fixed-checkout { background: var(--white); }
theme-cart-drawer .cart-drawer .cart-fixed-checkout__container { box-shadow: none; border-top: 1px solid var(--line); padding: 18px 28px calc(20px + env(safe-area-inset-bottom)); }
theme-cart-drawer .cart-drawer .cart-fixed-checkout .cart-taxes { padding: 0 0 12px; font-size: var(--fs-2xs); color: var(--body-soft); }
theme-cart-drawer .cart-drawer .cart-fixed-checkout .cart-taxes a { color: inherit; }
theme-cart-drawer .cart-drawer .cart-fixed-checkout__main-info { padding: 0; border: 0; }
theme-cart-drawer .cart-drawer .cart-fixed-checkout__total { align-items: baseline; }
theme-cart-drawer .cart-drawer .cart-fixed-checkout__total-text { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 400; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--mute); }
theme-cart-drawer .cart-drawer .cart-fixed-checkout__total-price span { font-family: var(--font-display); font-weight: 300; font-size: 1.375rem; color: var(--ink); }
theme-cart-drawer .cart-drawer .cart-fixed-checkout__total-saved span { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--accent-text); }
theme-cart-drawer .cart-drawer .cart-fixed-checkout__sub-info { padding: 0 0 12px; }
theme-cart-drawer .cart-drawer .cart-fixed-checkout__buttons { margin-top: 14px; }
theme-cart-drawer .cart-drawer .cart-checkout button[name="checkout"] {
  width: 100%; height: var(--control-h); border: 1px solid var(--ink); border-radius: var(--radius-pill); background: var(--ink); color: var(--white);
  font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--ls-button); text-transform: uppercase;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
theme-cart-drawer .cart-drawer .cart-checkout button[name="checkout"]::before,
theme-cart-drawer .cart-drawer .cart-checkout button[name="checkout"]::after { display: none; }
theme-cart-drawer .cart-drawer .cart-checkout button[name="checkout"]:hover { background: var(--accent); border-color: var(--accent); }

/* empty */
theme-cart-drawer .cart-drawer .cart-empty__body { padding-block: 72px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
theme-cart-drawer .cart-drawer .cart-empty__tips { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: 1.375rem; color: var(--ink); }
theme-cart-drawer .cart-drawer .cart-empty__button {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 15px 30px; border: 1px solid var(--ink); border-radius: var(--radius-pill);
  background: var(--ink); color: var(--white); font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--ls-button); text-transform: uppercase; text-decoration: none;
}
theme-cart-drawer .cart-drawer .cart-empty__button::before,
theme-cart-drawer .cart-drawer .cart-empty__button::after { display: none; }

@media (max-width: 560px) {
  theme-cart-drawer .cart-drawer .cart-drawer__header { padding-inline: var(--gutter); }
  theme-cart-drawer .cart-drawer .cart-drawer__inner { padding-inline: var(--gutter); }
  theme-cart-drawer .cart-drawer .cart-fixed-checkout__container { padding-inline: var(--gutter); }
}