/* ==========================================================
   Y'allternative Living | Stripe cart drawer
   Loaded only when the Stripe cart is active (see docs/STRIPE-MIGRATION.md).
   Native Popover API drawer -- browser handles light-dismiss, Esc, focus,
   and top-layer stacking; we just style + animate it.
   Uses the site's existing design tokens (--ink, --paper, --rose, --hide).
   ========================================================== */

/* Monoline SVG Icon System */
.yl-icon,
.yl-cart-icon {
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.yl-cart-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 100vw);
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: none;
  border-left: 1px solid var(--hide);
  background: var(--ink-2);
  color: var(--paper);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Slide-in transition (allow-discrete so it animates on show/hide). */
  translate: 100% 0;
  transition:
    translate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    overlay 0.32s allow-discrete,
    display 0.32s allow-discrete;
}
.yl-cart-drawer:popover-open {
  translate: 0 0;
}
@starting-style {
  .yl-cart-drawer:popover-open {
    translate: 100% 0;
  }
}
.yl-cart-drawer::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition:
    opacity 0.32s ease,
    overlay 0.32s allow-discrete,
    display 0.32s allow-discrete;
}
.yl-cart-drawer:popover-open::backdrop {
  opacity: 1;
}
@starting-style {
  .yl-cart-drawer:popover-open::backdrop {
    opacity: 0;
  }
}

/* Fallback for browsers without the Popover API (data-open toggled by JS). */
.yl-cart-drawer[data-open="true"] {
  translate: 0 0;
  z-index: 9999;
}

@media (prefers-reduced-motion: reduce) {
  .yl-cart-drawer,
  .yl-cart-drawer::backdrop {
    transition: none;
  }
}

/* ---- Header ---- */
.yl-cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hide);
  flex: 0 0 auto;
}
.yl-cart-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
}
.yl-cart-close {
  background: none;
  border: none;
  color: var(--paper-dim);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 8px;
}
.yl-cart-close:hover {
  color: var(--paper);
  background: var(--ink-3);
}

/* ---- Seasonal Workshop / Hiatus Notice ---- */
.yl-cart-seasonal-notice {
  flex: 0 0 auto;
  padding: 10px 20px 0;
}
.yl-cart-seasonal-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: oklch(from var(--sage) l c h / 0.15);
  border: 1px solid oklch(from var(--sage) l c h / 0.35);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--paper);
  line-height: 1.35;
  text-align: center;
}
.yl-cart-seasonal-content svg {
  flex-shrink: 0;
  color: var(--sage);
}
.yl-cart-seasonal-content a,
.yl-cart-seasonal-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
:root[data-theme="light"] .yl-cart-seasonal-content,
:root:not([data-theme="dark"]):not([data-theme="light"]) .yl-cart-seasonal-content {
  background: oklch(from var(--sage) l c h / 0.1);
  border-color: oklch(from var(--sage) l c h / 0.3);
  color: var(--paper);
}

/* ---- Dispatch Countdown Badge ---- */
.yl-cart-dispatch-banner {
  flex: 0 0 auto;
  padding: 10px 20px 0;
}
.yl-cart-dispatch-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: oklch(from var(--whiskey) l c h / 0.1);
  border: 1px solid oklch(from var(--whiskey) l c h / 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--whiskey);
  line-height: 1.35;
  text-align: center;
}
.yl-cart-dispatch-badge svg {
  flex-shrink: 0;
  color: var(--whiskey);
}

/* ---- Line items (scrollable) ---- */
.yl-cart-items {
  flex: 1 1 auto;
  overflow-y: auto;
  /* A flex item's default min-height:auto refuses to shrink below its
     content, so a long cart pushed the footer (and its Checkout button) off
     the bottom of the drawer instead of scrolling. */
  min-height: 0;
  padding: 8px 20px;
}
.yl-cart-empty {
  color: var(--paper-dim);
  text-align: center;
  padding: 48px 0;
}
.yl-cart-line {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hide);
  position: relative;
}
.yl-cart-thumb {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--radius-sm, 8px);
  background: var(--ink-3);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.yl-cart-details {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.yl-cart-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.yl-cart-name {
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--paper);
  overflow-wrap: break-word;
  word-break: break-word;
}
.yl-cart-recipient {
  font-size: 0.76rem;
  color: var(--whiskey);
  display: block;
  margin-top: 2px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.yl-cart-remove {
  background: none;
  border: none;
  color: var(--paper-dim);
  padding: 4px;
  margin: -4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition:
    color 0.2s ease,
    background 0.2s ease;
  position: relative;
  flex-shrink: 0;
}
.yl-cart-remove::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.yl-cart-remove:hover {
  color: var(--rose);
  background: oklch(from var(--rose) l c h / 0.15);
}
/* The chosen size/scent inside a gift set, and the contents of a
   build-your-own box -- both used to be invisible on the line (live audit
   C1 / M9). */
.yl-cart-line-contents {
  display: block;
  line-height: 1.35;
}

.yl-cart-variant {
  font-size: 0.78rem;
  color: var(--paper-dim);
  line-height: 1.2;
}
.yl-cart-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}
.yl-cart-qty-pill {
  display: inline-flex;
  align-items: center;
  background: var(--ink-3);
  border: 1px solid var(--hide);
  border-radius: 20px;
  padding: 2px 4px;
  height: 28px;
}
.yl-cart-qty-pill button {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--paper);
  border-radius: 50%;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.yl-cart-qty-pill button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.yl-cart-qty-pill button:hover:not(:disabled) {
  background: oklch(from var(--whiskey) l c h / 0.2);
  color: var(--whiskey);
}
.yl-cart-qty-pill button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.yl-cart-qty-val {
  font-size: 0.85rem;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.yl-cart-price-block {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.yl-cart-line-total {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.yl-cart-unit-price {
  font-size: 0.72rem;
  color: var(--paper-dim);
}

/* ---- Footer (upsell + shipping meter + checkout) ---- */
.yl-cart-foot {
  flex: 0 0 auto;
  /* The footer grew well past a phone viewport (upsells + milestone meter +
     gift note + pick-up + gift card + totals), which pushed the Checkout
     button below the fold with no way to reach it. Cap it and let it scroll
     on its own so the button is always reachable. */
  overflow-y: auto;
  max-height: min(62dvh, 560px);
  /* The bottom padding lives on the sticky ::after strip below, not here:
     the sticky Checkout button pins to the scrollport's content edge, and a
     real padding-bottom left a strip under it where the totals text scrolled
     past half-covered. */
  --yl-cart-foot-pad-b: calc(16px + env(safe-area-inset-bottom, 0px));
  padding: 16px 20px 0;
  border-top: 1px solid var(--hide);
  background: var(--ink-2);
}
/* Last flow child, so it is plain bottom padding when the footer fits, and
   an opaque floor under the pinned Checkout button when the footer scrolls
   (the button sits --yl-cart-foot-pad-b above the scrollport edge, this
   fills the gap so nothing shows through). */
.yl-cart-foot::after {
  content: "";
  display: block;
  position: sticky;
  bottom: 0;
  height: var(--yl-cart-foot-pad-b);
  background: var(--ink-2);
}

/* Landscape phones and short windows: claw back the footer's own padding
   before anything else has to give. */
@media (max-height: 480px) {
  .yl-cart-foot {
    max-height: min(70dvh, 560px);
    --yl-cart-foot-pad-b: calc(8px + env(safe-area-inset-bottom, 0px));
    padding: 8px 16px 0;
  }
}
.yl-cart-upsell {
  margin-bottom: 12px;
  position: relative;
}

/* The row scrolls, but at a fixed 195px per card two items came to 400px in
   ~376px of drawer, so the second was cut flush against the edge with
   nothing to say the row continued -- and in dark theme the 4px scrollbar is
   effectively invisible (live audit L7). Narrow the cards so two fit, and
   fade the right edge when a third is waiting. */
.yl-cart-upsell::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: 6px;
  height: 62px;
  width: 26px;
  pointer-events: none;
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, transparent, var(--ink-2));
}
.yl-cart-upsell-title {
  margin: 0 0 8px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--paper-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}
.yl-cart-upsell-title svg {
  color: var(--whiskey);
}
.yl-cart-upsell-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.yl-cart-upsell-list::-webkit-scrollbar {
  height: 4px;
}
.yl-cart-upsell-list::-webkit-scrollbar-thumb {
  background: var(--hide);
  border-radius: 4px;
}
.yl-cart-upsell-item {
  /* Longhand on purpose: a math function in the `flex` shorthand's basis
     slot is dropped as invalid by the engine, which is how these went back
     to sizing off their own content. */
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 160px;
  /* A flex item's default `min-width: auto` is its min-content width, which
     for these is the longest word in the product name -- so the basis above
     was silently ignored and the cards sized off their own text (318px for
     "Miracle Frankincense Salve"). The inner .yl-cart-upsell-name already
     ellipsises; this is what lets it. */
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--hide);
  border-radius: 10px;
  background: var(--ink-3);
  color: var(--paper);
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.2s ease,
    transform 0.15s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.yl-cart-upsell-item:hover {
  border-color: var(--whiskey);
  background: var(--ink-4, #2a221b);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(214, 155, 92, 0.15);
}
.yl-cart-upsell-item img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--ink-2);
}
.yl-cart-upsell-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.yl-cart-upsell-name {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--paper);
  line-height: 1.25;
}
.yl-cart-upsell-add {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--whiskey);
  background: oklch(from var(--whiskey) l c h / 0.12);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  align-self: flex-start;
  white-space: nowrap;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}
.yl-cart-upsell-item:hover .yl-cart-upsell-add {
  background: var(--whiskey);
  color: var(--ink);
}

/* Loyalty Card & Stored-Value Wallet */
.yl-cart-loyalty-card {
  margin-bottom: 10px;
  background: var(--ink-3);
  border: 1px solid var(--hide);
  border-radius: 8px;
  overflow: hidden;
}
.yl-cart-loyalty-card .yl-cart-points {
  margin-bottom: 0;
  border: none;
  border-bottom: 1px solid oklch(from var(--whiskey) l c h / 0.2);
  border-radius: 0;
}
.yl-cart-wallet-block {
  padding: 8px 12px;
  background: oklch(from var(--whiskey) l c h / 0.04);
}
.yl-cart-wallet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--paper-dim);
}
.yl-cart-wallet-title {
  font-weight: 500;
}
.yl-cart-wallet-balance {
  font-weight: 700;
  color: var(--whiskey);
}
.yl-cart-wallet-balance strong {
  color: var(--paper);
  font-size: 0.95rem;
}
.yl-cart-wallet-redeem-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.yl-cart-redeem-btn {
  flex: 1 1 auto;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  background: oklch(from var(--whiskey) l c h / 0.15);
  border: 1px solid oklch(from var(--whiskey) l c h / 0.4);
  color: var(--whiskey);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.yl-cart-redeem-btn:hover {
  background: var(--whiskey);
  color: var(--ink);
  border-color: var(--whiskey);
}
.yl-cart-wallet-loading {
  font-size: 0.76rem;
  color: var(--whiskey);
  font-style: italic;
}
.yl-cart-wallet-needed {
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--paper-dim);
  text-align: right;
}
.yl-cart-points-error {
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--error);
}

/* Points & Nudges */
.yl-cart-points {
  font-size: 0.84rem;
  color: var(--whiskey);
  background: oklch(from var(--whiskey) l c h / 0.08);
  border: 1px solid oklch(from var(--whiskey) l c h / 0.25);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.35;
}
.yl-cart-points strong {
  color: var(--paper);
  font-weight: 700;
}
.yl-cart-salve-nudge {
  font-size: 0.82rem;
  color: var(--paper);
  background: var(--ink-3);
  border: 1px solid var(--hide);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 500;
  line-height: 1.35;
}
.yl-cart-salve-nudge strong {
  color: var(--whiskey);
}
.yl-cart-salve-nudge-active {
  border-color: oklch(from var(--whiskey) l c h / 0.4);
  background: oklch(from var(--whiskey) l c h / 0.08);
}

/* Local SC Pickup */
.yl-cart-pickup-wrap {
  margin: 10px 0;
  padding: 10px 12px;
  background: var(--ink-3);
  border: 1px solid var(--hide);
  border-radius: 8px;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.yl-cart-pickup-wrap.is-active,
.yl-cart-pickup-wrap:hover {
  border-color: var(--whiskey);
}
.yl-cart-pickup-wrap.is-active {
  background: oklch(from var(--whiskey) l c h / 0.06);
}
.yl-cart-pickup-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
  cursor: pointer;
  color: var(--whiskey);
  margin: 0;
  user-select: none;
}
.yl-cart-pickup-label input[type="checkbox"] {
  accent-color: var(--whiskey);
  cursor: pointer;
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.yl-cart-pickup-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.yl-cart-pickup-title {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--whiskey);
}
.yl-cart-pickup-sub {
  font-size: 0.72rem;
  color: var(--paper-dim);
  font-weight: 400;
}
.yl-cart-pickup-select-container {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid oklch(from var(--whiskey) l c h / 0.15);
}
.yl-cart-pickup-select-label {
  font-size: 0.75rem;
  color: var(--paper-dim);
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
}
.yl-cart-select-wrap {
  position: relative;
}
.yl-cart-pickup-select {
  width: 100%;
  padding: 8px 12px;
  font-size: 0.82rem;
  background: var(--ink-2);
  color: var(--paper);
  border: 1px solid var(--hide);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.yl-cart-pickup-select:focus {
  outline: none;
  border-color: var(--whiskey);
}

/* Multi-Tier Shipping & Reward Milestones Progress Meter */
.yl-cart-milestones,
.yl-cart-ship {
  margin-bottom: 14px;
  padding: 12px 18px 46px;
  background: var(--ink-3);
  border: 1px solid var(--hide);
  border-radius: 8px;
  position: relative;
}
.yl-cart-milestones-msg,
.yl-cart-ship-msg {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--paper-dim);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.yl-cart-milestones-msg .yl-cart-icon,
.yl-cart-ship-msg .yl-cart-icon {
  flex-shrink: 0;
  color: var(--whiskey);
}
.yl-cart-milestones-track,
.yl-cart-ship-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0 8px 6px 8px;
}
/* `>` matters. The track element carries BOTH classes
   (`yl-cart-milestones-track yl-cart-ship-bar`, see cart.js), and the
   milestone pins are appended inside it -- so a descendant selector here gave
   every "$40"/"$60" pin LABEL the progress bar's own whiskey-to-rose
   gradient, display:block, height:100% and border-radius:999px. That is what
   the audit saw as "low-contrast pink discs sitting on the progress track"
   (live audit L7); the labels are text, not bar segments. */
.yl-cart-milestones-fill,
.yl-cart-ship-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--whiskey), var(--rose));
  border-radius: 999px;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 8px oklch(from var(--whiskey) l c h / 0.4);
}
/* The pins used to sit ON the track (top:50% + a -50% Y translate), i.e. a
   dim disc on top of the whiskey-to-rose fill, which is where the "$40 / $60
   markers you can barely see" reading came from (live audit L7). Hang them
   under the track instead, where they have the drawer background behind
   them and the label has room. */
.yl-cart-milestone-pin {
  position: absolute;
  top: 100%;
  transform: translate(-50%, 3px);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 2;
}
.yl-cart-milestone-pin .yl-cart-icon {
  width: 18px;
  height: 18px;
  padding: 3px;
  background: var(--ink-2);
  border: 2px solid var(--paper-dim);
  border-radius: 50%;
  color: var(--paper);
  transition: all 0.25s ease;
  box-sizing: border-box;
}
.yl-cart-milestone-pin span {
  position: absolute;
  top: 100%;
  margin-top: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--paper-dim);
  white-space: nowrap;
  transition: color 0.25s ease;
}
.yl-cart-milestone-pin.is-reached .yl-cart-icon {
  background: var(--whiskey);
  border-color: var(--whiskey);
  color: var(--ink);
  box-shadow: 0 0 8px oklch(from var(--whiskey) l c h / 0.5);
}
.yl-cart-milestone-pin.is-reached span {
  color: var(--whiskey);
  font-weight: 700;
}

:root[data-theme="light"] .yl-cart-milestones,
:root:not([data-theme="dark"]):not([data-theme="light"]) .yl-cart-milestones {
  background: var(--ink-3);
  border-color: var(--hide);
}
:root[data-theme="light"] .yl-cart-milestones-track,
:root:not([data-theme="dark"]):not([data-theme="light"]) .yl-cart-milestones-track {
  background: var(--ink-2);
  border-color: rgba(0, 0, 0, 0.1);
}
:root[data-theme="light"] .yl-cart-milestone-pin .yl-cart-icon,
:root:not([data-theme="dark"]):not([data-theme="light"]) .yl-cart-milestone-pin .yl-cart-icon {
  background: var(--ink-2);
  border-color: var(--paper-dim);
  color: var(--paper);
}
:root[data-theme="light"] .yl-cart-milestone-pin.is-reached .yl-cart-icon,
:root:not([data-theme="dark"]):not([data-theme="light"])
  .yl-cart-milestone-pin.is-reached
  .yl-cart-icon {
  background: var(--whiskey);
  border-color: var(--whiskey);
  color: var(--paper);
}

/* Gift Order & Message */
.yl-cart-giftorder-wrap {
  margin: 10px 0;
  padding: 10px 12px;
  background: var(--ink-3);
  border: 1px solid var(--hide);
  border-radius: 8px;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.yl-cart-giftorder-wrap:hover,
.yl-cart-giftorder-wrap:focus-within {
  border-color: var(--whiskey);
}
.yl-cart-giftorder-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  cursor: pointer;
  color: var(--whiskey);
  margin: 0;
  user-select: none;
  font-size: 0.86rem;
}
.yl-cart-giftorder-label input[type="checkbox"] {
  accent-color: var(--whiskey);
  cursor: pointer;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.yl-cart-giftorder-custom-check {
  display: none;
}
.yl-cart-giftorder-title {
  display: flex;
  align-items: center;
  gap: 6px;
}
.yl-cart-gift-toggle {
  background: none;
  border: none;
  color: var(--whiskey);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.yl-cart-giftmessage-container {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid oklch(from var(--whiskey) l c h / 0.15);
}
.yl-cart-giftmessage-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.82rem;
  font-family: inherit;
  background: var(--ink-2);
  color: var(--paper);
  border: 1px solid var(--hide);
  border-radius: 6px;
  resize: vertical;
  min-height: 52px;
  line-height: 1.4;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.yl-cart-giftmessage-input:focus {
  outline: none;
  border-color: var(--whiskey);
  box-shadow: 0 0 0 2px oklch(from var(--whiskey) l c h / 0.25);
}
.yl-cart-giftmessage-input::placeholder {
  color: var(--paper-dim);
  opacity: 0.8;
}

/* Gift Card / Stored-Value Voucher */
.yl-cart-giftcard-wrap {
  margin: 10px 0;
  padding: 10px 12px;
  background: var(--ink-3);
  border: 1px solid var(--hide);
  border-radius: 8px;
}
.yl-cart-giftcard-toggle {
  background: none;
  border: none;
  color: var(--whiskey);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
}
.yl-cart-giftcard-toggle:hover {
  text-decoration: underline;
}
.yl-cart-giftcard-form {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.yl-cart-giftcard-input-row {
  display: flex;
  gap: 8px;
}
.yl-cart-giftcard-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  font-size: 0.85rem;
  font-family: monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--ink-2);
  color: var(--paper);
  border: 1px solid var(--hide);
  border-radius: 6px;
}
.yl-cart-giftcard-input:focus {
  outline: none;
  border-color: var(--whiskey);
}
.yl-cart-giftcard-btn {
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--whiskey);
  color: var(--ink);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.yl-cart-giftcard-btn:hover {
  opacity: 0.9;
}
.yl-cart-giftcard-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.yl-cart-giftcard-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: oklch(from var(--whiskey) l c h / 0.1);
  border: 1px solid oklch(from var(--whiskey) l c h / 0.3);
  border-radius: 6px;
  font-size: 0.82rem;
}
.yl-cart-giftcard-applied-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.yl-cart-giftcard-applied-code {
  font-weight: 700;
  color: var(--whiskey);
  letter-spacing: 0.05em;
}
.yl-cart-giftcard-applied-bal {
  font-size: 0.74rem;
  color: var(--paper-dim);
}
.yl-cart-giftcard-remove {
  background: none;
  border: none;
  color: var(--paper-dim);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 4px;
  text-decoration: underline;
}
.yl-cart-giftcard-remove:hover {
  color: var(--rose);
}
.yl-cart-giftcard-msg {
  font-size: 0.76rem;
  color: var(--error);
  margin-top: 4px;
  line-height: 1.3;
}

.yl-cart-discount-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--whiskey);
  font-size: 0.92rem;
  margin: 4px 0;
}
.yl-cart-discount-line strong {
  font-variant-numeric: tabular-nums;
}

.yl-cart-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 12px 0 10px;
  font-size: 1rem;
  color: var(--paper-dim);
  padding-top: 8px;
  border-top: 1px solid var(--hide);
}
.yl-cart-subtotal strong {
  font-size: 1.35rem;
  color: var(--paper);
  font-family: var(--font-display, inherit);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
/* Full-width, ≥52px tap target -- impossible to miss on mobile. Sticky at the
   bottom of the footer scroll container so mobile shoppers always see the
   checkout CTA without hunting below upsells. */
.yl-cart-checkout {
  position: sticky;
  bottom: var(--yl-cart-foot-pad-b, 0px);
  z-index: 5;
  min-height: 52px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: var(--radius, 8px);
  box-shadow:
    0 -4px 12px rgba(0, 0, 0, 0.35),
    0 4px 16px oklch(from var(--rose) l c h / 0.35);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.yl-cart-checkout:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px oklch(from var(--rose) l c h / 0.45);
}
/* Share Cart */
.yl-cart-share-wrap {
  margin-top: 10px;
  text-align: center;
}
.yl-cart-share-btn {
  background: transparent;
  border: 1px dashed oklch(from var(--whiskey) l c h / 0.4);
  color: var(--whiskey);
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.yl-cart-share-btn:hover {
  background: oklch(from var(--whiskey) l c h / 0.1);
  border-color: var(--whiskey);
}
.yl-cart-share-btn:focus-visible {
  outline: 2px solid var(--whiskey);
  outline-offset: 2px;
}
.yl-cart-share-toast {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--whiskey);
  font-weight: 600;
}

.yl-cart-note {
  margin: 8px 0 0;
  text-align: center;
  font-size: 0.74rem;
  color: var(--paper-dim);
}

/* One-line notice shown when localStorage refuses the cart (private mode,
   quota exhausted): the cart still works for this page view, it just won't
   survive a reload. See save() in assets/js/cart.js. */
.yl-cart-storage-notice {
  margin: 10px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--hide);
  border-radius: var(--radius, 8px);
  color: var(--paper-dim);
  font-size: 0.76rem;
  line-height: 1.4;
  text-align: center;
}

/* Inline checkout failure notice -- replaces the old blocking window.alert().
   See showCheckoutError() in assets/js/cart.js. */
.yl-cart-error {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--error);
  border-radius: var(--radius, 8px);
  background: oklch(from var(--error) l c h / 0.12);
  color: var(--error);
  font-size: 0.8rem;
  line-height: 1.45;
  text-align: center;
}

/* Lock body scroll behind the drawer (belt-and-suspenders; the popover
   top layer already blocks interaction, but this stops background scroll). */
body:has(.yl-cart-drawer:popover-open) {
  overflow: hidden;
}