/* ==========================================================================
   Habit CBD – Cart Drawer  v1.0.6
   All rules scoped under #hcd-drawer to defeat theme overrides.
   Critical layout/box properties use !important.
   ========================================================================== */

/* ── Variables (on the drawer root so they're always available) ─────────── */
#hcd-drawer {
  --hcd-green:        #1c3a2c;
  --hcd-green-dark:   #112318;
  --hcd-green-light:  #eaf1eb;
  --hcd-accent:       #2a5c3f;
  --hcd-bg:           #f4f3ef;
  --hcd-surface:      #ffffff;
  --hcd-border:       #e4e2db;
  --hcd-border-soft:  #edebe6;
  --hcd-text:         #1a1a1a;
  --hcd-muted:        #6b6b6b;
  --hcd-light:        #b0aea8;
  --hcd-red:          #c0392b;
  --hcd-badge-bg:     #edf5ee;
  --hcd-badge-border: #c3dac6;
  --hcd-badge-text:   #2a5c3f;
  --hcd-r-sm:   6px;
  --hcd-r-md:   14px;
  --hcd-r-pill: 999px;
  --hcd-font:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hcd-ease:   0.32s cubic-bezier(.4,0,.2,1);
  --hcd-pad:    14px;   /* standard horizontal gutter */
}

/* ── Full reset inside drawer ─────────────────────────────────────────────── */
#hcd-drawer,
#hcd-drawer * {
  box-sizing: border-box !important;
  font-family: var(--hcd-font) !important;
  -webkit-font-smoothing: antialiased;
}
#hcd-drawer *,
#hcd-drawer *::before,
#hcd-drawer *::after {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  text-decoration: none !important;
  list-style: none !important;
  outline: none !important;
}

/* ── Overlay ─────────────────────────────────────────────────────────────── */
.hcd-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99998 !important;
  background: rgba(0,0,0,.52) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity var(--hcd-ease), visibility var(--hcd-ease) !important;
  pointer-events: none !important;
}
.hcd-overlay.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ── Drawer shell ────────────────────────────────────────────────────────── */
#hcd-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: 420px !important;
  max-width: 100vw !important;
  height: 100% !important;
  background: var(--hcd-bg) !important;
  z-index: 99999 !important;
  transform: translateX(100%) !important;
  transition: transform var(--hcd-ease) !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: -8px 0 48px rgba(0,0,0,.18) !important;
  overflow: hidden !important;
}
#hcd-drawer.is-open {
  transform: translateX(0) !important;
}

/* ── Inner scroll container ──────────────────────────────────────────────── */
#hcd-drawer .hcd-drawer-inner {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: 100% !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--hcd-border) transparent !important;
  background: var(--hcd-bg) !important;
  padding: 0 !important;
  margin: 0 !important;
}
#hcd-drawer .hcd-drawer-inner::-webkit-scrollbar       { width: 4px !important; }
#hcd-drawer .hcd-drawer-inner::-webkit-scrollbar-track { background: transparent !important; }
#hcd-drawer .hcd-drawer-inner::-webkit-scrollbar-thumb { background: var(--hcd-border) !important; border-radius: 4px !important; }

/* ── Loading spinner ─────────────────────────────────────────────────────── */
#hcd-drawer .hcd-loading {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  min-height: 240px !important;
  gap: 16px !important;
  padding: 40px 24px !important;
  color: var(--hcd-muted) !important;
  font-size: 14px !important;
  text-align: center !important;
  background: transparent !important;
}
#hcd-drawer .hcd-spinner {
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  border: 3px solid var(--hcd-border) !important;
  border-top-color: var(--hcd-green) !important;
  border-radius: 50% !important;
  animation: hcd-spin .7s linear infinite !important;
  flex-shrink: 0 !important;
  background: transparent !important;
}
@keyframes hcd-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════════════ */
#hcd-drawer .hcd-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px var(--hcd-pad) 16px !important;
  background: var(--hcd-bg) !important;
  border-bottom: 1px solid var(--hcd-border) !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
}
#hcd-drawer .hcd-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--hcd-text) !important;
  letter-spacing: .4px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}
#hcd-drawer .hcd-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: transparent !important;
  color: var(--hcd-text) !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  transition: background .15s !important;
  border: none !important;
}
#hcd-drawer .hcd-close:hover {
  background: var(--hcd-border) !important;
}
#hcd-drawer .hcd-close svg {
  display: block !important;
  flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHIPPING BAR
   ═══════════════════════════════════════════════════════════════════════════ */
#hcd-drawer .hcd-shipping-bar {
  background: var(--hcd-surface) !important;
  margin: 12px var(--hcd-pad) 0 !important;
  padding: 13px 14px 16px !important;
  border-radius: var(--hcd-r-md) !important;
  border: 1px solid var(--hcd-border) !important;
  flex-shrink: 0 !important;
}
#hcd-drawer .hcd-shipping-bar__text {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--hcd-text) !important;
  margin-bottom: 12px !important;
  line-height: 1.4 !important;
  background: transparent !important;
}
#hcd-drawer .hcd-shipping-bar__icon {
  flex-shrink: 0 !important;
  color: var(--hcd-muted) !important;
  display: block !important;
}
#hcd-drawer .hcd-shipping-bar__icon--check { color: var(--hcd-accent) !important; }
#hcd-drawer .hcd-shipping-bar__text strong {
  font-weight: 600 !important;
  color: var(--hcd-text) !important;
  background: transparent !important;
}
#hcd-drawer .hcd-shipping-bar__track {
  position: relative !important;
  height: 8px !important;
  background: #dedad3 !important;
  border-radius: var(--hcd-r-pill) !important;
  overflow: visible !important;
}
#hcd-drawer .hcd-shipping-bar__fill {
  position: absolute !important;
  top: 0 !important; bottom: 0 !important; left: 0 !important;
  background: var(--hcd-green) !important;
  border-radius: var(--hcd-r-pill) !important;
  transition: width .55s cubic-bezier(.4,0,.2,1) !important;
}
#hcd-drawer .hcd-shipping-bar__truck {
  position: absolute !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 34px !important; height: 34px !important;
  background: var(--hcd-green) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  z-index: 2 !important;
  box-shadow: 0 2px 10px rgba(28,58,44,.32) !important;
  transition: left .55s cubic-bezier(.4,0,.2,1) !important;
  padding: 0 !important;
}
#hcd-drawer .hcd-shipping-bar__truck.is-arrived {
  background: #3b8a5c !important;
}
#hcd-drawer .hcd-shipping-bar__truck svg { display: block !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   ITEMS LIST
   ═══════════════════════════════════════════════════════════════════════════ */
#hcd-drawer .hcd-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 12px var(--hcd-pad) 0 !important;
  background: transparent !important;
}

#hcd-drawer .hcd-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 64px 24px !important;
  color: var(--hcd-muted) !important;
  text-align: center !important;
  background: transparent !important;
}
#hcd-drawer .hcd-empty svg { opacity: .28 !important; }
#hcd-drawer .hcd-empty p {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--hcd-muted) !important;
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CART ITEM CARD
   ═══════════════════════════════════════════════════════════════════════════ */
#hcd-drawer .hcd-item {
  background: var(--hcd-surface) !important;
  border: 1px solid var(--hcd-border) !important;
  border-radius: var(--hcd-r-md) !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  transition: opacity .2s !important;
}
#hcd-drawer .hcd-item.is-updating {
  opacity: .4 !important;
  pointer-events: none !important;
}

/* Top grid: image | details */
#hcd-drawer .hcd-item__top {
  display: grid !important;
  grid-template-columns: 96px 1fr !important;
  gap: 12px !important;
  align-items: start !important;
  background: transparent !important;
}

#hcd-drawer .hcd-item__image {
  width: 96px !important;
  height: 96px !important;
  border-radius: var(--hcd-r-sm) !important;
  overflow: hidden !important;
  background: var(--hcd-green-light) !important;
  flex-shrink: 0 !important;
  display: block !important;
}
#hcd-drawer .hcd-item__image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Details: name → meta → price block */
#hcd-drawer .hcd-item__details {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
  background: transparent !important;
}
#hcd-drawer .hcd-item__name {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--hcd-text) !important;
  line-height: 1.38 !important;
  word-break: break-word !important;
  background: transparent !important;
}
#hcd-drawer .hcd-item__meta {
  font-size: 12px !important;
  color: var(--hcd-muted) !important;
  line-height: 1.3 !important;
  background: transparent !important;
}

/* Price block — right-aligned column of: strikethrough, sale price, badge */
#hcd-drawer .hcd-item__price-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 3px !important;
  margin-top: 6px !important;
  background: transparent !important;
}
#hcd-drawer .hcd-item__price {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--hcd-text) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  background: transparent !important;
}
#hcd-drawer .hcd-item__price--regular {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: var(--hcd-light) !important;
  text-decoration: line-through !important;
}
#hcd-drawer .hcd-item__badge {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--hcd-badge-bg) !important;
  color: var(--hcd-badge-text) !important;
  border: 1px solid var(--hcd-badge-border) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: var(--hcd-r-pill) !important;
  white-space: nowrap !important;
  line-height: 1.5 !important;
}

/* ── hcd-item__bottom: [stepper] [price col] [trash] — under name/meta ─── */
#hcd-drawer .hcd-item__bottom {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 8px !important;
  background: transparent !important;
}
/* Price column sits between stepper and trash, right-aligned */
#hcd-drawer .hcd-item__price-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
  flex: 1 !important;
  background: transparent !important;
}

#hcd-drawer .hcd-qty {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--hcd-bg) !important;
  border: 1px solid var(--hcd-border) !important;
  border-radius: var(--hcd-r-pill) !important;
  padding: 3px !important;
  gap: 0 !important;
}
#hcd-drawer .hcd-qty__btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important; height: 32px !important;
  background: var(--hcd-surface) !important;
  color: var(--hcd-text) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  border: none !important;
  transition: background .12s !important;
}
#hcd-drawer .hcd-qty__btn:hover:not(:disabled) { background: var(--hcd-border) !important; }
#hcd-drawer .hcd-qty__btn:disabled {
  opacity: .3 !important;
  cursor: default !important;
}
#hcd-drawer .hcd-qty__btn svg { display: block !important; }
#hcd-drawer .hcd-qty__value {
  min-width: 34px !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--hcd-text) !important;
  user-select: none !important;
  background: transparent !important;
  line-height: 1 !important;
}

#hcd-drawer .hcd-item__remove {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important; height: 34px !important;
  background: transparent !important;
  color: var(--hcd-light) !important;
  cursor: pointer !important;
  border-radius: var(--hcd-r-sm) !important;
  padding: 0 !important;
  border: none !important;
  transition: color .14s, background .14s !important;
}
#hcd-drawer .hcd-item__remove:hover {
  color: var(--hcd-red) !important;
  background: #fdf0f0 !important;
}
#hcd-drawer .hcd-item__remove svg { display: block !important; }

/* ── Subscription frequency pill ─────────────────────────────────────────── */
#hcd-drawer .hcd-sub-freq {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--hcd-bg) !important;
  border: 1px solid var(--hcd-border) !important;
  border-radius: var(--hcd-r-md) !important;
  padding: 10px 13px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--hcd-text) !important;
  position: relative !important;
  cursor: default !important;
  transition: border-color .15s !important;
}
#hcd-drawer .hcd-sub-freq--selectable { cursor: pointer !important; }
#hcd-drawer .hcd-sub-freq--selectable:hover { border-color: var(--hcd-green) !important; }
#hcd-drawer .hcd-sub-freq__icon { flex-shrink: 0 !important; color: var(--hcd-muted) !important; display: block !important; }
#hcd-drawer .hcd-sub-freq__label { flex: 1 !important; background: transparent !important; }
#hcd-drawer .hcd-sub-freq__chevron { flex-shrink: 0 !important; color: var(--hcd-muted) !important; margin-left: auto !important; display: block !important; }
#hcd-drawer .hcd-sub-freq__select {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important; height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  font-size: 14px !important;
  background: transparent !important;
  border: none !important;
}

/* ── Subscription upsell (expandable) ───────────────────────────────────── */
#hcd-drawer .hcd-sub-upsell {
  background: var(--hcd-bg) !important;
  border: 1px solid var(--hcd-border) !important;
  border-radius: var(--hcd-r-md) !important;
  overflow: hidden !important;
  transition: border-color .15s !important;
}
#hcd-drawer .hcd-sub-upsell:hover { border-color: var(--hcd-green) !important; }

/* Trigger button — the always-visible header row */
#hcd-drawer .hcd-sub-upsell__trigger {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 11px 13px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  text-align: left !important;
  color: var(--hcd-text) !important;
  transition: background .15s !important;
}
#hcd-drawer .hcd-sub-upsell__trigger:hover { background: #f0f5f0 !important; }
#hcd-drawer .hcd-sub-upsell__trigger[aria-expanded="true"] { background: #f0f5f0 !important; }
#hcd-drawer .hcd-sub-upsell__trigger[aria-expanded="true"] .hcd-sub-upsell__chevron {
  transform: rotate(180deg) !important;
}

#hcd-drawer .hcd-sub-upsell__leaf  { flex-shrink: 0 !important; color: var(--hcd-accent) !important; display: block !important; }
#hcd-drawer .hcd-sub-upsell__text  { display: flex !important; flex-direction: column !important; gap: 2px !important; background: transparent !important; flex: 1 !important; min-width: 0 !important; }
#hcd-drawer .hcd-sub-upsell__title { font-size: 12.5px !important; font-weight: 600 !important; color: var(--hcd-text) !important; line-height: 1.35 !important; background: transparent !important; }
#hcd-drawer .hcd-sub-upsell__desc  { font-size: 11.5px !important; color: var(--hcd-muted) !important; background: transparent !important; }
#hcd-drawer .hcd-sub-upsell__chevron {
  flex-shrink: 0 !important;
  color: var(--hcd-muted) !important;
  display: block !important;
  transition: transform .22s !important;
}

/* Expandable plans panel */
#hcd-drawer .hcd-sub-upsell__plans {
  border-top: 1px solid var(--hcd-border) !important;
  padding: 10px 13px 12px !important;
  background: var(--hcd-surface) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
#hcd-drawer .hcd-sub-upsell__plans[hidden] { display: none !important; }

#hcd-drawer .hcd-sub-upsell__plans-label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--hcd-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  background: transparent !important;
  margin-bottom: 2px !important;
}

/* Each plan option row */
#hcd-drawer .hcd-sub-upsell__plan-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  background: var(--hcd-bg) !important;
  border: 1px solid var(--hcd-border) !important;
  border-radius: var(--hcd-r-sm) !important;
  cursor: pointer !important;
  text-align: left !important;
  color: var(--hcd-text) !important;
  text-decoration: none !important;
  transition: border-color .14s, background .14s !important;
}
#hcd-drawer .hcd-sub-upsell__plan-btn:hover {
  border-color: var(--hcd-green) !important;
  background: #f0f5f0 !important;
}
#hcd-drawer .hcd-sub-upsell__plan-label {
  flex: 1 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--hcd-text) !important;
  background: transparent !important;
}
#hcd-drawer .hcd-sub-upsell__plan-save {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--hcd-accent) !important;
  background: transparent !important;
  white-space: nowrap !important;
}
#hcd-drawer .hcd-sub-upsell__plan-btn svg {
  display: block !important;
  flex-shrink: 0 !important;
  color: var(--hcd-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COUPON
   ═══════════════════════════════════════════════════════════════════════════ */
#hcd-drawer .hcd-coupon {
  margin: 10px var(--hcd-pad) 0 !important;
  background: var(--hcd-surface) !important;
  border: 1px solid var(--hcd-border) !important;
  border-radius: var(--hcd-r-md) !important;
  padding: 15px !important;
}
#hcd-drawer .hcd-coupon__header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  background: transparent !important;
}
#hcd-drawer .hcd-coupon__icon { flex-shrink: 0 !important; color: var(--hcd-muted) !important; margin-top: 2px !important; display: block !important; }
#hcd-drawer .hcd-coupon__title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--hcd-text) !important;
  margin-bottom: 2px !important;
  line-height: 1.3 !important;
  background: transparent !important;
}
#hcd-drawer .hcd-coupon__desc {
  font-size: 12px !important;
  color: var(--hcd-muted) !important;
  line-height: 1.4 !important;
  background: transparent !important;
}
#hcd-drawer .hcd-coupon__applied { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-bottom: 10px !important; background: transparent !important; }
#hcd-drawer .hcd-coupon__tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: var(--hcd-green-light) !important;
  border: 1px solid var(--hcd-badge-border) !important;
  border-radius: var(--hcd-r-pill) !important;
  padding: 3px 9px 3px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--hcd-accent) !important;
}
#hcd-drawer .hcd-coupon__remove {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important; height: 16px !important;
  background: transparent !important;
  color: var(--hcd-accent) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  padding: 0 !important;
  border: none !important;
  transition: background .12s !important;
}
#hcd-drawer .hcd-coupon__remove:hover { background: var(--hcd-badge-border) !important; }
#hcd-drawer .hcd-coupon__form {
  display: flex !important;
  gap: 7px !important;
  align-items: stretch !important;
  background: transparent !important;
}
#hcd-drawer .hcd-coupon__input {
  flex: 1 !important;
  min-width: 0 !important;
  height: 44px !important;
  border: 1px solid var(--hcd-border) !important;
  border-radius: var(--hcd-r-sm) !important;
  padding: 0 13px !important;
  font-size: 13.5px !important;
  color: var(--hcd-text) !important;
  background: var(--hcd-bg) !important;
  transition: border-color .15s, box-shadow .15s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#hcd-drawer .hcd-coupon__input:focus {
  border-color: var(--hcd-green) !important;
  box-shadow: 0 0 0 3px rgba(28,58,44,.09) !important;
  outline: none !important;
}
#hcd-drawer .hcd-coupon__input::placeholder { color: var(--hcd-light) !important; }
#hcd-drawer .hcd-coupon__apply {
  flex-shrink: 0 !important;
  height: 44px !important;
  padding: 0 18px !important;
  background: var(--hcd-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--hcd-r-sm) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background .15s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#hcd-drawer .hcd-coupon__apply:hover    { background: var(--hcd-green-dark) !important; }
#hcd-drawer .hcd-coupon__apply:disabled { opacity: .55 !important; cursor: not-allowed !important; }
#hcd-drawer .hcd-coupon__msg {
  min-height: 18px !important;
  font-size: 12px !important;
  margin-top: 7px !important;
  line-height: 1.4 !important;
  background: transparent !important;
}
#hcd-drawer .hcd-coupon__msg.is-success { color: var(--hcd-accent) !important; }
#hcd-drawer .hcd-coupon__msg.is-error   { color: var(--hcd-red) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   TOTALS  (flat rows on bg – no card border)
   ═══════════════════════════════════════════════════════════════════════════ */
#hcd-drawer .hcd-totals {
  margin: 0 var(--hcd-pad) !important;
  padding: 16px 0 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: transparent !important;
  border: none !important;
}
#hcd-drawer .hcd-totals__row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 13.5px !important;
  color: var(--hcd-muted) !important;
  background: transparent !important;
}
#hcd-drawer .hcd-totals__row > span:first-child,
#hcd-drawer .hcd-totals__savings-label {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: transparent !important;
  color: var(--hcd-muted) !important;
}
#hcd-drawer .hcd-totals__prices {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: transparent !important;
}
#hcd-drawer .hcd-totals__strike {
  text-decoration: line-through !important;
  color: var(--hcd-light) !important;
  font-size: 12.5px !important;
  background: transparent !important;
}
#hcd-drawer .hcd-totals__current {
  font-weight: 700 !important;
  color: var(--hcd-text) !important;
  font-size: 14px !important;
  background: transparent !important;
}
#hcd-drawer .hcd-totals__savings-amount {
  font-weight: 600 !important;
  color: var(--hcd-red) !important;
  background: transparent !important;
}
#hcd-drawer .hcd-totals__free-ship {
  font-weight: 600 !important;
  color: var(--hcd-accent) !important;
  background: transparent !important;
}
#hcd-drawer .hcd-totals__row--grand {
  padding-top: 12px !important;
  margin-top: 4px !important;
  border-top: 1px solid var(--hcd-border) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--hcd-text) !important;
  background: transparent !important;
}
#hcd-drawer .hcd-totals__grand {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -.6px !important;
  color: var(--hcd-text) !important;
  line-height: 1 !important;
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STICKY ACTION BAR
   ═══════════════════════════════════════════════════════════════════════════ */
#hcd-drawer .hcd-actions {
  flex-shrink: 0 !important;
  padding: 14px var(--hcd-pad) 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  background: var(--hcd-bg) !important;
  border-top: 1px solid var(--hcd-border-soft) !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 10 !important;
}
#hcd-drawer .hcd-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 52px !important;
  border-radius: var(--hcd-r-pill) !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  letter-spacing: .1px !important;
  transition: background .14s, color .14s, transform .08s !important;
  padding: 0 !important;
  border: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#hcd-drawer .hcd-btn:active { transform: scale(.98) !important; }
#hcd-drawer .hcd-btn svg { display: block !important; flex-shrink: 0 !important; }

#hcd-drawer .hcd-btn-checkout {
  background: var(--hcd-green) !important;
  color: #fff !important;
  border: none !important;
}
#hcd-drawer .hcd-btn-checkout:hover { background: var(--hcd-green-dark) !important; }

#hcd-drawer .hcd-btn-continue {
  background: transparent !important;
  color: var(--hcd-text) !important;
  border: 1.5px solid var(--hcd-border) !important;
}
#hcd-drawer .hcd-btn-continue:hover {
  border-color: var(--hcd-green) !important;
  color: var(--hcd-green) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CART COUNT BADGE  (outside drawer, on theme header)
   ═══════════════════════════════════════════════════════════════════════════ */
.hcd-cart-count {
  position: absolute !important;
  top: -6px !important; right: -8px !important;
  background: #1c3a2c !important;
  color: #fff !important;
  font-size: 10px !important; font-weight: 700 !important;
  min-width: 17px !important; height: 17px !important;
  padding: 0 3px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST  (outside drawer)
   ═══════════════════════════════════════════════════════════════════════════ */
.hcd-toast {
  position: fixed !important;
  bottom: 24px !important; left: 50% !important;
  transform: translateX(-50%) translateY(16px) !important;
  background: #1c3a2c !important;
  color: #fff !important;
  font-size: 13.5px !important; font-weight: 500 !important;
  padding: 11px 22px !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.18) !important;
  z-index: 100000 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  transition: opacity .22s, transform .22s !important;
}
.hcd-toast.is-visible {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}
.hcd-toast.is-error { background: #c0392b !important; }

/* Body lock */
body.hcd-body-lock { overflow: hidden !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 600px) {
  #hcd-drawer { width: 440px !important; }
  #hcd-drawer .hcd-title { font-size: 21px !important; }
  #hcd-drawer .hcd-item__top { grid-template-columns: 104px 1fr !important; }
  #hcd-drawer .hcd-item__image { width: 104px !important; height: 104px !important; }
  #hcd-drawer .hcd-item__name { font-size: 14px !important; }
  #hcd-drawer .hcd-totals__grand { font-size: 30px !important; }
}
@media (min-width: 1024px) {
  #hcd-drawer { width: 460px !important; }
}
@media (max-width: 479px) {
  #hcd-drawer { width: 100vw !important; }
  #hcd-drawer .hcd-header  { padding: 16px 12px 14px !important; }
  #hcd-drawer .hcd-title   { font-size: 18px !important; }
  #hcd-drawer .hcd-item__top { grid-template-columns: 78px 1fr !important; }
  #hcd-drawer .hcd-item__image { width: 78px !important; height: 78px !important; }
  #hcd-drawer .hcd-item__name { font-size: 13px !important; }
  #hcd-drawer .hcd-totals__grand { font-size: 24px !important; }
  #hcd-drawer .hcd-btn { height: 50px !important; font-size: 15px !important; }
  #hcd-drawer .hcd-coupon__apply { padding: 0 13px !important; }
  #hcd-drawer .hcd-actions { padding-bottom: 26px !important; }
}
@media (max-width: 359px) {
  #hcd-drawer .hcd-item__top { grid-template-columns: 64px 1fr !important; }
  #hcd-drawer .hcd-item__image { width: 64px !important; height: 64px !important; }
  #hcd-drawer .hcd-totals__grand { font-size: 22px !important; }
  #hcd-drawer .hcd-coupon__apply { padding: 0 10px !important; font-size: 13px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #hcd-drawer,
  .hcd-overlay,
  #hcd-drawer .hcd-shipping-bar__fill,
  #hcd-drawer .hcd-shipping-bar__truck,
  .hcd-toast { transition: none !important; }
  #hcd-drawer .hcd-spinner { animation: none !important; }
}