/* ==========================================================================
   THE BASKET — side drawer and cart page.

   The drawer opens from the RIGHT. The nav drawer opens from the left and
   they share the scrim's tier but never a side, so the two are never
   mistaken for one another.

   z-index joins the documented scale: chrome 80, scrim 90, panel 100.
   ========================================================================== */

.hh-cart__scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgb(26 26 24 / .5);
  opacity: 0; transition: opacity var(--hh-mid, .3s) var(--hh-ease);
}
html.hh-cart-open .hh-cart__scrim { opacity: 1; }

.hh-cart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(420px, 100vw);
  display: flex; flex-direction: column;
  background: var(--hh-surface); color: var(--hh-ink);
  outline: none;
  box-shadow: var(--hh-shadow-lg);
  transform: translateX(100%);
  transition: transform var(--hh-mid, .3s) var(--hh-ease);
}
.hh-cart.is-open { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hh-cart, .hh-cart__scrim { transition: none; }
}

/* --- head ---------------------------------------------------------- */
.hh-cart__head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--hh-s3);
  padding: var(--hh-s4) var(--hh-s4) var(--hh-s4) var(--hh-s5);
  border-bottom: 1px solid var(--hh-line);
}
.hh-cart__head h2 { margin: 0; display: flex; align-items: baseline; gap: var(--hh-s3); }
.hh-cart__n {
  font-family: var(--hh-font-body); font-size: var(--hh-t-sm);
  font-weight: 400; letter-spacing: normal; color: var(--hh-ink-600);
}
.hh-cart__close { margin-right: calc(var(--hh-s3) * -1); }

/* --- free delivery -------------------------------------------------
   A delivery fact measured against the basket, not encouragement. */
.hh-cart__ship {
  flex: 0 0 auto;
  padding: var(--hh-s4) var(--hh-s5);
  border-bottom: 1px solid var(--hh-line-soft);
  background: var(--hh-surface-2);
}
.hh-cart__bar { height: 3px; background: var(--hh-ink-100); overflow: hidden; }
.hh-cart__bar span {
  display: block; height: 100%; width: 0;
  background: var(--hh-gold-750);
  transition: width var(--hh-slow, .5s) var(--hh-ease);
}
.hh-cart__ship.is-over .hh-cart__bar span { background: #1c6b45; }
.hh-cart__ship p {
  margin: var(--hh-s3) 0 0;
  font-size: var(--hh-t-sm); color: var(--hh-ink-700);
}
.hh-cart__ship.is-over p { color: #1c6b45; font-weight: 500; }

/* --- body ----------------------------------------------------------- */
.hh-cart__body {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 var(--hh-s5) var(--hh-s5);
}

.hh-cart__items { list-style: none; margin: 0; padding: 0; }

.hh-cartline {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 28px;
  gap: var(--hh-s4);
  padding: var(--hh-s4) 0;
  border-bottom: 1px solid var(--hh-line-soft);
  transition: opacity var(--hh-fast, .2s) var(--hh-ease);
}
.hh-cartline.is-busy { opacity: .45; pointer-events: none; }

.hh-cartline__media {
  display: block; aspect-ratio: 1; background: var(--hh-surface-3);
  overflow: hidden;
}
.hh-cartline__media img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  /* The catalogue photography is shot on pure white; multiply drops that
     into the tinted square the way the product page's stage does. */
  mix-blend-mode: multiply;
}

.hh-cartline__body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.hh-cartline__name {
  font-size: var(--hh-t-sm); font-weight: 500; line-height: var(--hh-lh-snug);
  color: var(--hh-ink); text-decoration: none;
}
.hh-cartline__name:hover { color: var(--hh-gold-750); }

/* Format is the line that stops a single being mistaken for a box of ten. */
.hh-cartline__fmt {
  margin: 0;
  font-size: var(--hh-t-xxs); letter-spacing: var(--hh-ls-wide);
  text-transform: uppercase; color: var(--hh-ink-600);
}

.hh-cartline__foot {
  margin-top: auto; padding-top: var(--hh-s3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--hh-s3);
}
.hh-cartline__price {
  font-size: var(--hh-t-sm); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.hh-qty { display: inline-flex; align-items: center; border: 1px solid var(--hh-line); }
.hh-qty button {
  width: 30px; height: 30px; padding: 0;
  border: 0; background: none; color: var(--hh-ink);
  font: inherit; font-size: var(--hh-t-base); line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.hh-qty button:hover { background: var(--hh-surface-3); }
.hh-qty [data-qty-value] {
  min-width: 28px; text-align: center;
  font-size: var(--hh-t-sm); font-variant-numeric: tabular-nums;
}

.hh-cartline__rm {
  width: 28px; height: 28px; padding: 0; align-self: start;
  border: 0; background: none; color: var(--hh-ink-500); cursor: pointer;
  display: grid; place-items: center;
}
.hh-cartline__rm:hover { color: var(--hh-danger); }

/* --- empty ---------------------------------------------------------- */
.hh-cart__empty {
  padding: var(--hh-s7) 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--hh-s4);
  text-align: center;
}
.hh-cart__empty .hh-icon { color: var(--hh-ink-300); width: 40px; height: 40px; }
.hh-cart__emptylead { margin: 0; font-size: var(--hh-t-lg); font-weight: 500; }
.hh-cart__empty p { margin: 0; color: var(--hh-ink-600); font-size: var(--hh-t-sm); }
.hh-cart__empty .hh-btn { margin-top: var(--hh-s3); }

/* --- cross-sell ------------------------------------------------------ */
.hh-cart__cross { margin-top: var(--hh-s6); }
.hh-cart__crosslist { list-style: none; margin: var(--hh-s4) 0 0; padding: 0; }

.hh-xsell {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 32px;
  align-items: center; gap: var(--hh-s4);
  padding: var(--hh-s3) 0;
}
.hh-xsell__media { display: block; aspect-ratio: 1; background: var(--hh-surface-3); overflow: hidden; }
.hh-xsell__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; display: block; }
.hh-xsell__body { min-width: 0; }
.hh-xsell__name {
  display: block; font-size: var(--hh-t-sm); color: var(--hh-ink); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hh-xsell__name:hover { color: var(--hh-gold-750); }
.hh-xsell__price { margin: 2px 0 0; font-size: var(--hh-t-xs); color: var(--hh-ink-600); }
.hh-xsell__price del { opacity: .6; }

.hh-xsell__add {
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--hh-line-dark); background: none; color: var(--hh-ink);
  display: grid; place-items: center; cursor: pointer; text-decoration: none;
  font-size: var(--hh-t-base); line-height: 1;
  transition: background var(--hh-fast, .2s) var(--hh-ease), color var(--hh-fast, .2s) var(--hh-ease);
}
.hh-xsell__add:hover { background: var(--hh-ink); color: var(--hh-surface); }
.hh-xsell__add .hh-xsell__tick { display: none; }
.hh-xsell__add.is-done { background: #1c6b45; border-color: #1c6b45; color: #fff; }
.hh-xsell__add.is-done .hh-xsell__tick { display: block; }
.hh-xsell__add.is-done span { display: none; }

/* --- foot ------------------------------------------------------------ */
.hh-cart__foot {
  flex: 0 0 auto;
  padding: var(--hh-s4) var(--hh-s5) calc(var(--hh-s5) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hh-line);
  background: var(--hh-surface-2);
}
.hh-cart__sums { margin: 0 0 var(--hh-s4); }
.hh-cart__sums > div {
  display: flex; justify-content: space-between; gap: var(--hh-s4);
  font-size: var(--hh-t-sm); line-height: 2;
}
.hh-cart__sums dt { color: var(--hh-ink-700); }
.hh-cart__sums dd { margin: 0; font-variant-numeric: tabular-nums; }
.hh-cart__sums .is-free { color: #1c6b45; font-weight: 500; }
.hh-cart__totalrow {
  margin-top: var(--hh-s3); padding-top: var(--hh-s3);
  border-top: 1px solid var(--hh-line);
  font-size: var(--hh-t-base) !important; font-weight: 600;
}
.hh-cart__totalrow dt { color: var(--hh-ink) !important; }

.hh-cart__viewcart {
  display: block; margin-top: var(--hh-s3); text-align: center;
  font-size: var(--hh-t-sm); color: var(--hh-ink-700);
}
.hh-cart__viewcart:hover { color: var(--hh-ink); }

.hh-cart__note {
  margin: var(--hh-s4) 0 0;
  display: flex; gap: 8px; align-items: flex-start;
  font-size: var(--hh-t-xs); color: var(--hh-ink-600); line-height: var(--hh-lh-snug);
}
.hh-cart__note .hh-icon { flex: 0 0 auto; margin-top: 1px; }

/* The header basket, when something lands in it. */
.hh-basket.is-bump { animation: hh-bump .45s var(--hh-ease); }
@keyframes hh-bump { 30% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .hh-basket.is-bump { animation: none; } }

html.hh-cart-open { overflow: hidden; }

/* ==========================================================================
   THE CART PAGE

   The drawer is the fast path; this is the considered one. Roomier lines,
   the format stated plainly, and the per-cigar figure on a box — the unit
   the product page argues in, shown where the money is committed.
   ========================================================================== */

.hh-cartpage { padding-block: var(--hh-s6) var(--hh-section); }

.hh-cartpage__head {
  display: flex; align-items: baseline; gap: var(--hh-s4);
  margin-bottom: var(--hh-s5);
}
.hh-cartpage__head h1 { margin: 0; }
.hh-cartpage__n { margin: 0; color: var(--hh-ink-600); font-size: var(--hh-t-sm); }

.hh-cartpage__ship {
  padding: var(--hh-s4) var(--hh-s5);
  background: var(--hh-surface-2); border: 1px solid var(--hh-line);
  margin-bottom: var(--hh-s6);
}
.hh-cartpage__ship p { margin: var(--hh-s3) 0 0; font-size: var(--hh-t-sm); color: var(--hh-ink-700); }
.hh-cartpage__ship.is-over p { color: #1c6b45; font-weight: 500; }
.hh-cartpage__ship.is-over .hh-cart__bar span { background: #1c6b45; }

.hh-cartpage__grid { display: grid; gap: var(--hh-s6); align-items: start; }

.hh-cartpage__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hh-line); }

.hh-cartrow {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  grid-template-areas:
    "media body    rm"
    "media qty     price";
  gap: var(--hh-s3) var(--hh-s4);
  padding: var(--hh-s5) 0;
  border-bottom: 1px solid var(--hh-line);
}
.hh-cartrow__media { grid-area: media; background: var(--hh-surface-3); aspect-ratio: 1; overflow: hidden; }
.hh-cartrow__media img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  mix-blend-mode: multiply;      /* studio shots on pure white */
}
.hh-cartrow__body { grid-area: body; min-width: 0; }
.hh-cartrow__name { margin: 0; font-size: var(--hh-t-base); font-weight: 500; line-height: var(--hh-lh-snug); }
.hh-cartrow__name a { color: var(--hh-ink); text-decoration: none; }
.hh-cartrow__name a:hover { color: var(--hh-gold-750); }
.hh-cartrow__fmt {
  margin: var(--hh-s2) 0 0;
  font-size: var(--hh-t-xxs); letter-spacing: var(--hh-ls-wide);
  text-transform: uppercase; color: var(--hh-ink-600);
}
.hh-cartrow__per { margin: var(--hh-s2) 0 0; font-size: var(--hh-t-sm); color: var(--hh-ink-600); }
.hh-cartrow__oos { margin: var(--hh-s2) 0 0; font-size: var(--hh-t-sm); color: var(--hh-danger); font-weight: 500; }

.hh-cartrow__qty { grid-area: qty; align-self: end; }
.hh-cartrow__qty .quantity input {
  width: 72px; padding: 8px; text-align: center;
  border: 1px solid var(--hh-line); background: var(--hh-surface);
  font: inherit; font-size: var(--hh-t-sm);
}
.hh-cartrow__price {
  grid-area: price; align-self: end; text-align: right;
  font-size: var(--hh-t-base); font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hh-cartrow__rm { grid-area: rm; text-align: right; }
.hh-cartrow__rmlink {
  display: inline-grid; place-items: center; width: 28px; height: 28px;
  color: var(--hh-ink-500); text-decoration: none; font-size: 20px; line-height: 1;
}
.hh-cartrow__rmlink:hover { color: var(--hh-danger); }

.hh-cartpage__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--hh-s4);
  padding-top: var(--hh-s5);
}
.hh-coupon { display: flex; gap: var(--hh-s3); margin-left: auto; }
.hh-coupon input {
  padding: 9px var(--hh-s4); border: 1px solid var(--hh-line);
  background: var(--hh-surface); font: inherit; font-size: var(--hh-t-sm); width: 150px;
}

/* --- summary --------------------------------------------------------- */
.hh-cartsum {
  border: 1px solid var(--hh-line); background: var(--hh-surface-2);
  padding: var(--hh-s5);
}
.hh-cartsum > h2 { margin: 0 0 var(--hh-s4); }
.hh-cartsum table { width: 100%; border-collapse: collapse; font-size: var(--hh-t-sm); }
.hh-cartsum th, .hh-cartsum td {
  padding: var(--hh-s3) 0; text-align: left; font-weight: 400;
  border-bottom: 1px solid var(--hh-line-soft);
}
.hh-cartsum td { text-align: right; font-variant-numeric: tabular-nums; }
.hh-cartsum .order-total th, .hh-cartsum .order-total td {
  font-size: var(--hh-t-base); font-weight: 600; border-bottom: 0;
}
.hh-cartsum .wc-proceed-to-checkout { margin-top: var(--hh-s5); }
.hh-cartsum .wc-proceed-to-checkout > h2,
.hh-cartsum > .cart_totals > h2 {
  font-family: var(--hh-font-display); font-size: var(--hh-t-h4);
  letter-spacing: var(--hh-ls-head); margin: 0 0 var(--hh-s4);
}

/* Woo's own `.woocommerce a.button.alt` is (0,3,1) and ships a purple that
   belongs to no part of this design. Matched at (0,3,1) and won on source
   order, which is why our stylesheets load after Woo's. */
.hh-cartsum .wc-proceed-to-checkout a.checkout-button {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  padding: 15px var(--hh-s5);
  background: var(--hh-gold-500); color: var(--hh-ink);
  border: 1px solid var(--hh-gold-500); text-decoration: none;
  font-size: var(--hh-t-sm); font-weight: 600;
  letter-spacing: var(--hh-ls-btn); text-transform: uppercase;
}
.hh-cartsum .wc-proceed-to-checkout a.checkout-button:hover { background: var(--hh-gold-600); border-color: var(--hh-gold-600); }
.hh-cartsum .shipping-calculator-button { font-size: var(--hh-t-sm); }

.hh-cartpage__cross { margin-top: var(--hh-section); }
.hh-cartpage__cross > h2 { margin: 0 0 var(--hh-s5); }

.hh-cartpage--empty .hh-cart__empty { padding: var(--hh-section) 0; }

@media (min-width: 901px) {
  .hh-cartpage__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--hh-s7); }
  .hh-cartrow {
    /* The name gets what is left, and it needs to be enough for two lines
       of a real cigar name — the median is 34 characters. */
    grid-template-columns: 96px minmax(0, 1fr) 92px 104px 32px;
    grid-template-areas: "media body qty price rm";
    align-items: center;
  }
  .hh-cartrow__qty, .hh-cartrow__price { align-self: center; }
  .hh-cartsum { position: sticky; top: calc(var(--hh-nav-h) + var(--hh-s4)); }
}