/**
 * Cart drawer — slide-in panel from the right, opened by the Cart pill in
 * the header. Visual shape mirrors the My Trip drawer (`.hg-td-*`) so the
 * two surfaces feel related.
 *
 * Scoped class prefix: .hg-cd-*  ("cart drawer")
 */

/* ── Cart pill in the header (same shape as .hg-ubar-itin) ── */
.hg-ubar-cart {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.hg-ubar-cart-badge {
  display: inline-block;
  min-width: 18px;
  padding: 0 6px;
  margin-left: 4px;
  background: #c3232f;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* ── Drawer + scrim ── */
/* z-index has to outrank the sticky page nav (.goUS-header z-index:9999),
   the open side nav drill (.nav-drill z-index:100000000036), and the
   global modal scrim (.menu-bg z-index:99999999). Otherwise the drawer's
   green header — including the close X — gets covered by whatever
   else is fixed at the top of the viewport. */
.hg-cd-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 25, 0.55);
  z-index: 100000000040;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.hg-cd-scrim.is-open { opacity: 1; pointer-events: auto; }

.hg-cd-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  background: #f7f9f8;
  z-index: 100000000041;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
}
.hg-cd-drawer.is-open { transform: translateX(0); }

.hg-cd-head {
  flex-shrink: 0;
  padding: 16px 18px 12px;
  background: linear-gradient(180deg, #1a6b4a 0%, #145a3e 100%);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hg-cd-head h2 {
  flex: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  /* Site's global stylesheet has higher-specificity h2 rules that override
     the inherited #fff from .hg-cd-head, so set color explicitly here. */
  color: #fff;
}
.hg-cd-head h2 .fa-shopping-cart { margin-right: 6px; color: #fff; }
.hg-cd-logo {
  flex-shrink: 0;
  display: block;
  width: auto;
  height: 56px;
  max-width: 140px;
  object-fit: contain;
}
.hg-cd-close {
  background: rgba(255, 255, 255, 0.16);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hg-cd-close:hover { background: rgba(255, 255, 255, 0.28); }

.hg-cd-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
}

.hg-cd-empty {
  text-align: center;
  padding: 40px 18px;
  color: #5a6b60;
}
.hg-cd-empty i {
  font-size: 38px;
  color: #c8d4ce;
  display: block;
  margin-bottom: 10px;
}
.hg-cd-empty p { margin: 0 0 14px; font-size: 15px; }
.hg-cd-empty a {
  display: inline-block;
  padding: 8px 16px;
  background: #1a6b4a;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}

.hg-cd-item {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #e3e8e5;
  align-items: flex-start;
}
.hg-cd-item:last-child { border-bottom: none; }
.hg-cd-item-cover {
  flex-shrink: 0;
  display: block;
  width: 64px;
  height: 86px;
  border-radius: 4px;
  overflow: hidden;
  background: #e8f4ee;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hg-cd-item-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hg-cd-item-cover:hover,
.hg-cd-item-cover:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  outline: none;
}
.hg-cd-item-info { flex: 1; min-width: 0; }
.hg-cd-item-name {
  display: block;
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: #1e2e22;
  line-height: 1.3;
  text-decoration: none;
}
a.hg-cd-item-name:hover,
a.hg-cd-item-name:focus-visible {
  color: #1a6b4a;
  text-decoration: underline;
  text-underline-offset: 2px;
  outline: none;
}
.hg-cd-item-price {
  margin: 0 0 8px;
  font-size: 13px;
  color: #5a6b60;
}
.hg-cd-item-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.hg-cd-qty {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hg-cd-qty button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #c8d4ce;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: #1a6b4a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hg-cd-qty button:hover { background: #e8f4ee; }
.hg-cd-qty button:disabled { opacity: 0.4; cursor: not-allowed; }
.hg-cd-qty span {
  min-width: 22px;
  text-align: center;
  font-weight: 700;
  color: #1e2e22;
}
.hg-cd-remove {
  background: none;
  border: none;
  color: #b8262f;
  cursor: pointer;
  font-size: 12px;
  text-decoration: underline;
  padding: 0 0 0 10px;
  margin-left: auto;
}
.hg-cd-remove:hover { color: #800; }

/* Smart upsell — "You might also like" — sits below the cart items
   inside the scrolling body, fills the empty middle space when the
   cart is small. Compact horizontal cards, lower visual weight than
   the actual cart items so the buyer's eye still goes to checkout. */
.hg-cd-suggest-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed #d8e2dd;
}
.hg-cd-suggest-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: #5a6b60;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hg-cd-suggest-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin: 0 0 8px;
  background: #fff;
  border: 1px solid #e3e8e5;
  border-radius: 10px;
}
.hg-cd-suggest-card:last-child { margin-bottom: 0; }
.hg-cd-suggest-cover {
  flex-shrink: 0;
  width: 44px;
  height: 60px;
  border-radius: 4px;
  object-fit: cover;
  background: #e8f4ee;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.hg-cd-suggest-cover-empty { background: #e8f4ee; }
.hg-cd-suggest-info {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.hg-cd-suggest-name {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  color: #1e2e22;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hg-cd-suggest-reason {
  margin: 0 0 4px;
  font-size: 12px;
  color: #5a6b60;
  line-height: 1.35;
}
.hg-cd-suggest-price {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #1a6b4a;
}
.hg-cd-suggest-add {
  flex-shrink: 0;
  background: #fff;
  color: #1a6b4a;
  border: 2px solid #1a6b4a;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}
.hg-cd-suggest-add:hover { background: #e8f4ee; }
.hg-cd-suggest-add.is-added {
  background: #1a6b4a;
  color: #fff;
  border-color: #1a6b4a;
}

/* ── Foot ── */
.hg-cd-foot {
  flex-shrink: 0;
  padding: 14px 18px;
  background: #fff;
  border-top: 1px solid #e3e8e5;
}
.hg-cd-totals {
  display: flex;
  justify-content: space-between;
  margin: 0 0 12px;
  font-size: 15px;
  color: #1e2e22;
}
.hg-cd-totals strong { font-weight: 700; }

/* Multi-buy discount nudge — sits between subtotal and email input.
   Two visual states: "tease" (cart has 1 SKU; nudges adding another)
   and "win" (cart has 2+ SKUs; confirms the discount is locked in). */
.hg-cd-discount {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
}
.hg-cd-discount[data-state="tease"] {
  background: #fff8e1;
  border: 1px solid #f0d97a;
  color: #4a3a18;
}
.hg-cd-discount[data-state="win"] {
  background: #e8f4ee;
  border: 1px solid #b8d8c5;
  color: #145a3e;
}
.hg-cd-discount .fa-check-circle {
  margin-right: 4px;
  color: #1a6b4a;
}
.hg-cd-discount strong { font-weight: 700; }
.hg-cd-email {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  font-size: 15px;
  border: 1px solid #c8d4ce;
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.hg-cd-email:focus {
  outline: none;
  border-color: #1a6b4a;
  box-shadow: 0 0 0 3px rgba(26, 107, 74, 0.15);
}
.hg-cd-checkout {
  width: 100%;
  min-height: 46px;
  background: #1a6b4a;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.hg-cd-checkout:hover { background: #145a3e; }
.hg-cd-checkout:disabled { opacity: 0.55; cursor: wait; }
.hg-cd-feedback {
  min-height: 18px;
  margin: 8px 0 0;
  font-size: 13px;
  color: #b8262f;
}
.hg-cd-feedback[data-state="info"] { color: #5a6b60; }

.hg-cd-gift-toggle {
  display: block;
  margin: 12px 0 8px;
  font-size: 13px;
  color: #1e2e22;
  cursor: pointer;
  user-select: none;
}
.hg-cd-gift-toggle input[type="checkbox"] {
  margin-right: 6px;
  vertical-align: -1px;
  cursor: pointer;
}
.hg-cd-gift-fields {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: #fff8e1;
  border: 1px solid #f0d97a;
  border-radius: 6px;
}
.hg-cd-gift-help {
  margin: 6px 0 0;
  font-size: 12px;
  color: #4a3a18;
  line-height: 1.4;
}

.hg-cd-purchases-link {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
  font-size: 13px;
  color: #1a6b4a;
  text-decoration: none;
  text-align: center;
}
.hg-cd-purchases-link:hover { color: #145a3e; text-decoration: underline; }

/* ── Add-to-cart button helper (for product pages) ── */
.hg-add-to-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: #fff;
  color: #1a6b4a;
  border: 2px solid #1a6b4a;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.hg-add-to-cart-btn:hover { background: #e8f4ee; color: #145a3e; }
.hg-add-to-cart-btn[data-in-cart="true"] {
  background: #e8f4ee;
  color: #145a3e;
}
.hg-add-to-cart-btn[data-in-cart="true"] .hg-add-to-cart-label::before {
  content: "✓ ";
}

@media print {
  .hg-ubar-cart, .hg-cd-scrim, .hg-cd-drawer, .hg-add-to-cart-btn { display: none !important; }
}