/* Cart line items rendered into the theme's own drawer and cart page.
 *
 * These deliberately borrow the theme's variables (--color-foreground,
 * --color-button, the base font stack) instead of declaring their own palette,
 * so the cart reads as part of the store rather than as a bolted-on widget.
 * The origin's drawer came from the UpCart app, which is stripped at build
 * time; this fills the theme's underlying Dawn drawer in the same visual key.
 */

.rmh-lines {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 0.4rem 0 1.2rem;
}

.rmh-line {
  display: grid;
  grid-template-columns: 8rem 1fr auto;
  gap: 1.4rem;
  align-items: start;
}

.rmh-line__media img {
  width: 8rem;
  height: 8rem;
  object-fit: cover;
  border-radius: 0.6rem;
  display: block;
  background: rgba(var(--color-foreground, 18 18 18), 0.04);
}

.rmh-line__info { min-width: 0; }

.rmh-line__title {
  margin: 0 0 0.2rem;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgb(var(--color-foreground, 18 18 18));
}

.rmh-line__variant {
  margin: 0 0 0.8rem;
  font-size: 1.2rem;
  line-height: 1.3;
  opacity: 0.7;
}

.rmh-line__qty {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.rmh-qty {
  width: 2.8rem;
  height: 2.8rem;
  border: 0.1rem solid rgba(var(--color-foreground, 18 18 18), 0.2);
  background: transparent;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 0.3rem;
}

.rmh-qty:hover { border-color: rgba(var(--color-foreground, 18 18 18), 0.55); }

.rmh-qty__n {
  min-width: 3rem;
  text-align: center;
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
}

.rmh-remove {
  margin-left: 0.8rem;
  border: 0;
  background: none;
  padding: 0;
  font-size: 1.2rem;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
  opacity: 0.65;
  cursor: pointer;
  color: inherit;
}

.rmh-remove:hover { opacity: 1; }

.rmh-line__price {
  font-size: 1.4rem;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rmh-line__was {
  opacity: 0.55;
  font-weight: 400;
  margin-right: 0.4rem;
}

.rmh-foot {
  border-top: 0.1rem solid rgba(var(--color-foreground, 18 18 18), 0.12);
  padding-top: 1.4rem;
}

.rmh-foot__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.rmh-foot__total { font-variant-numeric: tabular-nums; }

.rmh-foot__note {
  margin: 0 0 1.2rem;
  font-size: 1.2rem;
  opacity: 0.7;
}

.rmh-checkout { width: 100%; cursor: pointer; }
.rmh-checkout[disabled] { opacity: 0.6; cursor: default; }

.rmh-foot__err {
  margin: 0.8rem 0 0;
  font-size: 1.2rem;
  color: rgba(var(--color-error, 200 20 20), 1);
}

.rmh-empty {
  padding: 3rem 0;
  text-align: center;
  font-size: 1.6rem;
  opacity: 0.7;
}

/* The theme hides the drawer footer while the cart is empty via .is-empty;
   our footer lives in the same container, so it inherits that behaviour. */
cart-drawer.is-empty .rmh-foot { display: none; }

/* The theme's own empty-state block only ever hides its INNER
 * .cart-drawer__warnings (`cart-drawer:not(.is-empty) .cart-drawer__warnings`),
 * while the wrapper keeps `height: 100%` — so on a full cart it still fills
 * the whole drawer and pushes the line items out of sight. That bug never
 * showed on the origin because the UpCart app replaced this drawer outright and
 * the Dawn one was dead code. We use the Dawn drawer, so the wrapper has to go
 * too. */
cart-drawer:not(.is-empty) .drawer__inner-empty { display: none; }

/* With the empty block gone the inner drawer is a normal column again: header,
   scrolling items, pinned footer. */
cart-drawer:not(.is-empty) .drawer__inner {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

cart-drawer:not(.is-empty) cart-drawer-items {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

cart-drawer:not(.is-empty) .drawer__footer { flex: 0 0 auto; }

/* Subscribe & Save buy box. Accent matches VetPets; 8px cards like Kaching. */
.vp-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 1.2rem;
}

.vp-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(var(--color-foreground, 18 18 18), 0.14);
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
}

.vp-card.is-on {
  border-color: #47B5E9;
  box-shadow: 0 0 0 1px #47B5E9;
}

.vp-card input {
  flex: 0 0 auto;
  accent-color: #47B5E9;
  width: 16px;
  height: 16px;
  margin: 0;
}

.vp-card__body {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.vp-card__title {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
}

.vp-card__price {
  font-size: 1.4rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vp-freqs,
.vp-packs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 2px 4px 28px;
}

.vp-freq,
.vp-pack {
  border: 1px solid rgba(var(--color-foreground, 18 18 18), 0.16);
  background: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font: inherit;
  font-size: 1.3rem;
  line-height: 1.3;
  color: inherit;
  text-align: left;
}

.vp-freq.is-on,
.vp-pack.is-on {
  border-color: #47B5E9;
  color: #0b6a94;
  box-shadow: 0 0 0 1px #47B5E9;
}

.vp-pack__was {
  opacity: 0.55;
  margin-right: 4px;
}

.vp-pack__price { font-weight: 600; }

body.vp-offer-on .kaching-bundles__block,
body.vp-offer-on .kaching-bundles-sticky-atc {
  display: none !important;
}
/* Source drawer proportions and controls, September 28 production refresh. */
cart-drawer .drawer__inner{width:50rem;max-width:100vw;padding:0 1.5rem}cart-drawer .drawer__header{padding:1.1rem 0}cart-drawer .drawer__heading{font-size:1.6rem;font-weight:700}.rmh-lines{gap:2.4rem;padding:2.4rem 0}.rmh-line{grid-template-columns:8rem minmax(0,1fr) auto;gap:1.2rem}.rmh-line__title{font-size:1.45rem;line-height:1.25}.rmh-line__variant{font-size:1.3rem;opacity:1;margin-top:.4rem}.rmh-line__price{color:#60b0d3;align-self:center;font-size:1.65rem}.rmh-line__was{font-size:1.25rem;color:#777;display:block}.rmh-line__qty{gap:0}.rmh-qty{width:2.5rem;height:2.5rem;border-radius:4px;font-size:1.5rem}.rmh-qty__n{min-width:2.5rem}.rmh-remove{margin-left:.7rem}.rmh-savings{color:#58aaa9}.rmh-foot__note{font-size:1.1rem;margin:4px 0}cart-drawer .drawer__footer{background:#f4f4f4;margin:0 -1.5rem;padding:1.2rem 1.5rem}cart-drawer .cart__checkout-button{border-radius:12px;background:#67b5dc;font-weight:700;letter-spacing:.05em}@media(max-width:450px){.rmh-line{grid-template-columns:6.4rem minmax(0,1fr) auto;gap:.8rem}.rmh-line__media img{width:6.4rem;height:6.4rem}.rmh-line__title{font-size:1.3rem}.rmh-line__price{font-size:1.4rem}}

/* Keep purchased items and recommendations in one scrolling column. */
cart-drawer .cart-drawer__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:block}
cart-drawer:not(.is-empty) cart-drawer-items{flex:none;overflow:visible;min-height:auto}
cart-drawer #CartDrawer-Form,cart-drawer #CartDrawer-CartItems{height:auto;min-height:0;overflow:visible}

/* Compact badge and a single, quiet quantity stepper. */
#cart-icon-bubble{position:relative}
#cart-icon-bubble .cart-count-bubble{position:absolute;top:5px;right:3px;bottom:auto;left:auto;display:flex;align-items:center;justify-content:center;min-width:16px;width:auto;height:16px;padding:0 4px;box-sizing:border-box;border-radius:20px;background:#252525;color:white;font:600 10px/1 Arial,sans-serif;letter-spacing:0;box-shadow:0 0 0 2px #dcf6fb}
#cart-icon-bubble .cart-count-bubble[hidden]{display:none}
.rmh-line__qty{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px}
.rmh-stepper{display:inline-flex;align-items:center;border:1px solid #d9dfe2;border-radius:6px;background:white;overflow:hidden;height:34px;flex:none}
.rmh-stepper .rmh-qty{display:flex;align-items:center;justify-content:center;width:30px;height:34px;border:0;border-radius:0;background:transparent;font:400 18px/1 Arial,sans-serif;color:#434a50;padding:0}
.rmh-stepper .rmh-qty:hover{background:#f0f6f8}
.rmh-stepper .rmh-qty:focus-visible{outline:2px solid #419cc5;outline-offset:-3px}
.rmh-stepper .rmh-qty__n{min-width:24px;font-size:13px;font-weight:500;line-height:1}
.rmh-unit-label{font-size:11px;color:#737b80}
.rmh-line__qty .rmh-remove{margin:0 0 0 3px;font-size:11px;color:#737b80;text-decoration:none;opacity:1}
.rmh-line__qty .rmh-remove:hover{text-decoration:underline;color:#252525}
.rmh-line__variant{font-size:12px;line-height:1.5;color:#697177}
/* Compact cart footer: smaller "You save" / "Total" rows, tighter spacing. */
cart-drawer .cart-drawer__totals{gap:2px}
cart-drawer .rmh-foot__row{margin:0;font-size:14px;line-height:1.35}
cart-drawer .rmh-foot__row strong{font-size:15px}
/* Cart reservation timer: full drawer width, as on shopvetpets.com. */
/* The reservation timer sits between the drawer header and the scrolling body
   (moved there by whop-integration.js), spanning the drawer edge to edge. Inside
   the body it was clipped short and made the body scroll sideways. */
cart-drawer .drawer__inner > .cart-timer{margin-left:-15px!important;margin-right:-15px!important;margin-top:0;margin-bottom:0;flex:0 0 auto}
cart-drawer .cart-drawer__body{overflow-x:hidden}

/* ---------------------------------------------------------------- cart milestones + trust checkout */
cart-drawer .drawer__inner > .vpcm{flex:0 0 auto;margin:1.2rem 0 .4rem;padding:12px 16px 8px;background:#fff;border:1px solid rgba(71,181,233,.28);border-radius:12px}
.vpcm[hidden]{display:none!important}
.vpcm__msg{margin:0 0 10px;font-size:1.35rem;line-height:1.35;text-align:center;color:#121212}
.vpcm__msg strong{font-weight:700}
.vpcm__steps{display:flex;align-items:center;margin-bottom:18px}
.vpcm__seg{flex:1;height:6px;border-radius:99px;background:#E3EEF4;overflow:hidden}
.vpcm__seg>i{display:block;height:100%;width:var(--p,0%);background:#47B5E9;border-radius:99px;transition:width .45s ease}
.vpcm__step{position:relative;flex:0 0 auto;width:30px;height:30px;margin:0 2px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid #CFDCE4;color:#8B9AA6}
.vpcm__step svg{width:15px;height:15px}
.vpcm__step.is-done{background:#47B5E9;border-color:#47B5E9;color:#fff}
.vpcm__lbl{position:absolute;top:calc(100% + 4px);right:50%;transform:translateX(50%);white-space:nowrap;font-size:1.05rem;font-weight:600;color:#54646F}
.vpcm__step.is-done .vpcm__lbl{color:#121212}
.vpcm__step:last-child .vpcm__lbl{right:0;transform:none}
#CartDrawer-Checkout.vpco-stacked{flex-direction:column;gap:2px;min-height:5.8rem;padding-top:.9rem;padding-bottom:.9rem}
#CartDrawer-Checkout .vpco-lock{width:1.05em;height:1.05em;margin-right:.45em;vertical-align:-.13em;flex-shrink:0}
#CartDrawer-Checkout .vpco-sub{display:block;font-size:1.15rem;font-weight:500;line-height:1.2;letter-spacing:.03em;text-transform:none;opacity:.8}
.vpco-dispatch{display:flex;align-items:center;justify-content:center;gap:7px;margin:1rem 0 1.2rem;font-size:1.25rem;font-weight:600;line-height:1.3;color:#3E4C57}
.vpco-dispatch svg{width:18px;height:18px;flex-shrink:0;color:#47B5E9}
#CartDrawer-Checkout.vpco-stacked .button__label{font-size:1.15em}
.vpup-sub{margin:-.2rem 0 1.2rem;text-align:center;font-size:1.45rem;font-weight:700;line-height:1.3;color:#47B5E9;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}