/*
 * Cart drawer.
 *
 * ⚠️ EVERY CLASS IS PREFIXED, AND THE DESIGN'S WERE NOT.
 *
 * partials/cart-drawer.html uses `.cart`, `.line`, `.qty`, `.ladder`, `.suggest`
 * and `.promo-code`. On a static mockup those are fine. In a WooCommerce install
 * they are a collision waiting to happen — WooCommerce ships `.cart` on its own
 * add-to-cart form and `.quantity` on every quantity box, and any plugin may
 * claim `.line` or `.suggest`. The names below are the same design under
 * `x-drawer__*`, which nothing else on the site touches.
 *
 * ⚠️ LOADED ON EVERY PAGE THE DRAWER EXISTS ON — which is every page except the
 * cart and checkout, where xyvira_cart_drawer() deliberately does not render.
 *
 * Palette and type come from brand.css.
 */

/* ── Shell ───────────────────────────────────────────────────────────────── */

.x-drawer[hidden] { display: none; }

.x-drawer__scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  border: 0;
  padding: 0;
  background: rgba(14, 42, 30, .45);
  cursor: pointer;
  animation: x-drawer-fade .3s ease both;
}

@supports (backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px)) {
  .x-drawer__scrim {
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
  }
}

.x-drawer__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  width: min(420px, 90%);
  /*
   * A fixed-height flex column: head and foot hold their size and the body is
   * the only scrolling region. `min-height: 0` on the body is what lets it
   * shrink — without it a long bag pushes the checkout button off-screen, which
   * is the single worst bug this component can have.
   */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--xg-cream);
  color: var(--xg-green);
  font-family: var(--xg-sans);
  box-shadow: -24px 0 60px rgba(14, 42, 30, .22);
  animation: x-drawer-in .42s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes x-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes x-drawer-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .x-drawer__panel,
  .x-drawer__scrim { animation: none; }
}

/* ── Head ────────────────────────────────────────────────────────────────── */

.x-drawer__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(18, 48, 35, .1);
}

.x-drawer__title {
  flex: 1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  font-family: var(--xg-serif);
  font-weight: 400;
  font-size: 27px;
  line-height: 1;
}

.x-drawer__count { font-family: var(--xg-sans); font-size: 12.5px; color: var(--xg-ink-60); }

.x-drawer__close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(18, 48, 35, .16);
  background: #fff;
  color: var(--xg-green);
  cursor: pointer;
}

.x-drawer__close:hover { background: var(--xg-cream-2); }

/* ── Reward ladder ───────────────────────────────────────────────────────── */

/*
 * ⚠️ THE LADDER IS RESHAPED TO THE DESIGN: A THIN BAR, LABELS AT THE ENDS.
 *
 * An earlier pass kept the old geometry — big circular badges sitting ON the
 * track with labels centred beneath each one — on the grounds that it was
 * richer. It is richer, and it is not what was asked for; side by side the
 * difference is the first thing you see.
 *
 * The design also happens to solve a problem the old shape needed extra code
 * for. Rungs positioned by value could sit close enough for their labels to
 * collide, which is why mobile.css staggers them onto two lines. Justified to
 * the two ENDS instead, two labels can never overlap at any width, and that
 * stagger becomes dead weight.
 *
 * All of this is done in CSS over the existing markup — the rungs still carry
 * their `--x-at` positions and their icons, both simply stop being used here.
 * Nothing in the PHP or the ladder logic changed.
 */

.x-drawer__ladder,
.x-drawer__ladder.is-earned {
  background: linear-gradient(135deg, var(--xg-green), #1c4632 70%, #2c5c42);
  border-bottom: 0;
  color: var(--xg-cream-ink);
}

.x-drawer__laddertext { color: rgba(244, 237, 223, .9); font-size: 14px; }
.x-drawer__laddertext strong { color: var(--xg-cream-ink); }
.x-drawer__laddericon { color: var(--xg-accent-hi); }
.x-drawer__saved { color: var(--xg-accent-soft); }
.x-drawer__ladderor { color: rgba(244, 237, 223, .75); }

/* The track becomes: a 6px bar, then a row of labels beneath it. */
/*
 * ⚠️ THE TRACK IS NOW ONLY THE BAR. IT USED TO CONTAIN THE LABELS TOO.
 *
 * It was a flex row holding a label under each end, with the rail and fill
 * absolutely positioned across it. There is one label now and it sits after the
 * track, so this is a plain 6px bar and nothing else.
 */
.x-drawer__track {
  position: relative;
  height: 6px;
  margin: 0;
}

.x-drawer__rail,
.x-drawer__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 6px;
  border-radius: 99px;
}

.x-drawer__rail { right: 0; background: rgba(244, 237, 223, .24); }

.x-drawer__fill {
  width: var(--x-pct, 0%);
  background: linear-gradient(90deg, var(--xg-accent-hi), var(--xg-accent-soft));
}

/*
 * The one label, under the full end of the bar — it names what 100% means.
 * Right-aligned because that is where the bar finishes.
 */
.x-drawer__laddergoal {
  margin: 7px 0 0;
  text-align: right;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--xg-accent-soft);
}

/* Once everything is won the bar is full, so the label is a statement. */
.x-drawer__ladder.is-complete .x-drawer__laddergoal { color: var(--xg-cream-ink); }
.x-drawer__ladder.is-complete .x-drawer__laddergoal::before { content: "\2713\00a0"; }


/* ── Scrolling region ────────────────────────────────────────────────────── */

.x-drawer__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── Lines ───────────────────────────────────────────────────────────────── */

/*
 * ⚠️ THE STRETCH MOVES FROM THE LIST TO THE FOOTER.
 *
 * woocommerce.css gives `.x-drawer__items` `flex: 1 1 auto` so that a short bag
 * still pushes the totals to the bottom of the panel. That was right when the
 * list was the last thing before the footer. It is not any more: the suggestion
 * and the promo chip now sit between them, so the stretching list shoved both
 * of them to the bottom and opened a wide empty band under a single-item bag.
 *
 * Letting the FOOTER claim the space instead keeps the totals pinned low and
 * the list, suggestion and chip grouped together under the items where they
 * belong.
 */
.x-drawer__items { list-style: none; margin: 0; padding: 4px 18px 0; flex: 0 0 auto; }
.x-drawer__foot { margin-top: auto; }

/*
 * The "any 2" bundle, drawn as one block around the lines it covers.
 *
 * ⚠️ A TINT AND A HAIRLINE, NOT A CARD.
 *
 * The two items are already rows in a list; a solid card, a shadow or the
 * accent at full strength turned the bag into two competing lists and made the
 * Ritual beneath look excluded rather than simply separate. A 6% wash and a
 * hairline is enough to read as "these go together" at a glance.
 *
 * ⚠️ THE BLOCK IS INSET FROM THE LIST, AND ITS ROWS ARE INSET FROM THE BLOCK.
 *
 * `.x-drawer__items` carries the drawer's 18px side padding and its rows have
 * none of their own, so dropping them straight into this block left the
 * thumbnails flush against the border with the text hard up against the edge.
 * The block pulls out to the panel edge and gives the padding back on the
 * inside, which keeps the rows aligned with the ungrouped ones beneath.
 */
.x-drawer__bundle {
  list-style: none;
  /*
   * ⚠️ THE NEGATIVE MARGIN AND THE INNER PADDING HAVE TO CANCEL.
   *
   * The list pads its sides by 18px and its rows have none of their own, so a
   * grouped row is inset by (this margin + 1px border + the padding below).
   * At -6px/12px that came to +7px and the grouped thumbnails sat visibly
   * right of the ungrouped ones underneath — a seven pixel step down the bag.
   * -13 + 1 + 12 = 0 puts them back on the same line, and the block itself
   * bleeds to within 5px of the panel edge.
   */
  margin: 8px -13px 12px;
  border: 1px solid rgba(185, 143, 66, .3);
  border-radius: 14px;
  background: rgba(185, 143, 66, .055);
  overflow: hidden;
}

/*
 * ⚠️ A FOOTER, SO IT IS READ AFTER THE ITEMS IT DESCRIBES.
 *
 * `border-top` rather than `border-bottom`, and the tint sits below the rows
 * instead of above them, so the block reads items-then-total the way the bag's
 * own summary does a few rows further down.
 */
/*
 * "1 of 2 in this offer" — only on a line the bundle covers in part.
 * Quiet, and in the accent so it reads as part of the block around it.
 */
/*
 * "1 in the offer" — where the stepper would be on an ordinary row.
 *
 * The bundled row is a statement, not a control: two steppers for one cart line
 * would be two ways to set one number, and a Remove inside the block would
 * delete the line the block is describing.
 */
.x-drawer__bundleqty {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--xg-accent-ink, #7e5320);
  opacity: .9;
}


.x-drawer__bundlefoot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 9px 12px 10px;
  background: rgba(185, 143, 66, .08);
  border-top: 1px solid rgba(185, 143, 66, .22);
}

.x-drawer__bundlename {
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--xg-accent-ink, #7e5320);
}

.x-drawer__bundlesums {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 9px;
}

/* The saving is context; the price is the number being stated. */
.x-drawer__bundlesave { font-size: 12px; color: var(--xg-accent-ink, #7e5320); opacity: .8; }

.x-drawer__bundletotal {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--xg-green, #123023);
  font-variant-numeric: tabular-nums;
}

.x-drawer__bundleitems {
  list-style: none;
  margin: 0;
  padding: 0 12px;
}

/*
 * The block's own edge already separates the group from the bag, so a row's
 * bottom rule would draw a second line right beside it. Rows inside are
 * divided from each other only.
 */
.x-drawer__bundleitems .x-drawer__item { border-bottom: 0; }

.x-drawer__bundleitems .x-drawer__item + .x-drawer__item {
  border-top: 1px solid rgba(185, 143, 66, .2);
}

.x-drawer__item { border-bottom: 0; }
.x-drawer__bundleitems .x-drawer__item + .x-drawer__item { border-top: 1px solid rgba(185, 143, 66, .18); }

.x-drawer__item {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(18, 48, 35, .09);
}

.x-drawer__thumb {
  flex: 0 0 74px;
  height: 86px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--xg-cream-2);
}

.x-drawer__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/*
 * ⚠️ A TINTED BLOCK WHERE THERE IS NO PHOTOGRAPH.
 *
 * Every product currently falls back to WooCommerce's placeholder — a grey
 * picture-frame icon repeated down the bag, which reads as broken images rather
 * than as products awaiting photography. The design fills that space with a
 * soft tint instead, which is quiet and looks deliberate.
 *
 * This disappears by itself the moment real images are uploaded.
 */
.x-drawer__thumb--empty {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--x-tint, #b98f42) 10%, #fff),
    color-mix(in srgb, var(--x-tint, #b98f42) 24%, #fff));
}

@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .x-drawer__thumb--empty { background: var(--xg-cream-2); }
}

.x-drawer__detail { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.x-drawer__format {
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--xg-accent-ink);
}

/*
 * ⚠️ `display: block` IS LOAD-BEARING — text-overflow DOES NOTHING ON AN INLINE BOX.
 *
 * This is an <a>, so without it the name simply wraps and no ellipsis appears.
 * The clipping also depends on `min-width: 0` on .x-drawer__detail above: a flex
 * item's default `min-width: auto` refuses to shrink below its content, so the
 * name would push the row wider instead of truncating.
 *
 * The full name stays available on hover and to assistive tech via `title`.
 */
.x-drawer__name {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--xg-green);
}
.x-drawer__name:hover { color: var(--xg-accent-ink); }

.x-drawer__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 9px;
}

.x-drawer__price { font-size: 14.5px; font-weight: 500; margin-left: auto; }

.x-drawer__qty {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(18, 48, 35, .2);
  border-radius: 999px;
  background: #fff;
}

.x-drawer__step {
  width: 34px;
  height: 34px;
  border: 0;
  background: none;
  color: var(--xg-green);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.x-drawer__step:hover { background: var(--xg-cream-2); }
.x-drawer__step[disabled] { opacity: .35; cursor: default; }
.x-drawer__n { min-width: 26px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }

.x-drawer__remove {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--xg-ink-60);
  cursor: pointer;
  border-bottom: 1px solid rgba(18, 48, 35, .25);
}

.x-drawer__remove:hover { color: var(--xg-green); }

/* ── Empty state ─────────────────────────────────────────────────────────── */

/*
 * ⚠️ TOP-ALIGNED AND LEFT-ALIGNED — woocommerce.css CENTRES BOTH.
 *
 * Its rule vertically centres the empty state in the panel and centres the
 * text. The design does neither: the mark sits near the top and everything
 * reads left, so the heading, the paragraph and the two calls to action share
 * one left edge with the rest of the drawer.
 *
 * Both have to be undone explicitly. Overriding only `align-items` left the
 * block floating in the middle of a tall panel with centred prose, which is
 * what the first version did.
 */
.x-drawer__empty {
  padding: 32px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  gap: 16px;
}

.x-drawer__empty-mark {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--xg-cream-2);
  color: var(--xg-accent-ink);
}

.x-drawer__empty h3 {
  margin: 0;
  font-family: var(--xg-serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
}

.x-drawer__empty p { margin: 0; font-size: 14.5px; line-height: 1.6; font-weight: 300; color: var(--xg-ink-72); }

.x-drawer__empty-link {
  font-size: 13px;
  color: var(--xg-ink-72);
  border-bottom: 1px solid rgba(18, 48, 35, .3);
  padding-bottom: 2px;
}

/* ── Suggestion ──────────────────────────────────────────────────────────── */

.x-drawer__suggest { padding: 16px 18px 0; }

.x-drawer__suggest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.x-drawer__kicker {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--xg-accent-ink);
}

.x-drawer__suggest-head a {
  font-size: 12px;
  white-space: nowrap;
  color: var(--xg-ink-60);
  border-bottom: 1px solid rgba(18, 48, 35, .25);
  padding-bottom: 1px;
}

.x-drawer__sugg {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 10px;
  border: 1px solid rgba(18, 48, 35, .09);
  border-radius: 14px;
  background: #fff;
}

.x-drawer__sugg-media {
  flex: 0 0 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--xg-cream-2);
}

.x-drawer__sugg-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.x-drawer__sugg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.x-drawer__sugg-role {
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--xg-accent-ink);
}

.x-drawer__sugg-name { font-size: 13.5px; font-weight: 500; line-height: 1.25; }
.x-drawer__sugg-price { font-size: 12px; font-weight: 300; color: var(--xg-ink-60); }

/* A saving is the reason to accept a bundle swap, so it gets weight. */
.x-drawer__sugg-save { font-size: 12px; font-weight: 500; color: var(--xg-accent-ink); }

/* ── Promo chip ──────────────────────────────────────────────────────────── */

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.x-drawer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 16px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}

.x-drawer__btn--dark { background: var(--xg-green); color: var(--xg-cream-ink); }
.x-drawer__btn--dark:hover { background: var(--xg-green-mid); color: var(--xg-cream-ink); }

.x-drawer__btn--ghost {
  background: transparent;
  color: var(--xg-green);
  border: 1px solid rgba(18, 48, 35, .25);
}

.x-drawer__btn--ghost:hover { background: var(--xg-cream-2); }
.x-drawer__btn--mini { min-height: 36px; padding: 9px 15px; font-size: 11.5px; white-space: nowrap; }
.x-drawer__btn--inline { align-self: flex-start; }

/*
 * ⚠️ THE GAP IS REQUIRED, NOT COSMETIC PADDING.
 *
 * This button holds two things — the word "Checkout" and the total — and
 * `.x-drawer__btn` is `inline-flex`. In a flex container the whitespace between
 * two items is not rendered, so the newline the template has between them
 * disappeared and the button read "CHECKOUT₹519" with the price welded to the
 * label. A flex container has to be told about the space explicitly.
 *
 * In `em` so it tracks the 14px label rather than needing a second value at
 * every breakpoint.
 */
.x-drawer__btn--checkout {
  width: 100%;
  min-height: 52px;
  font-size: 14px;
  letter-spacing: .07em;
  gap: .6em;

  /*
   * ⚠️ THIS GAP USED TO COME FROM SOMETHING ELSE.
   *
   * "Shipping calculated at checkout." sat between the total and this button,
   * and its `margin: 5px 0 12px` was doing the separating. With that line
   * removed the total collapsed onto the button. Stating the space here means
   * it no longer depends on an optional sentence being present.
   */
  margin-top: 14px;
}

/*
 * Centres "View bag" without making the link itself a block — see the note in
 * inc/cart-drawer.php. A block link turns its underline into a full-width rule.
 */
.x-drawer__viewbag { margin-top: 12px; text-align: center; }

/* ── Totals ──────────────────────────────────────────────────────────────── */

.x-drawer__foot {
  flex: 0 0 auto;
  border-top: 1px solid rgba(18, 48, 35, .12);
  background: #fff;
  /*
   * ⚠️ safe-area PADDING, OR THE CHECKOUT BUTTON SITS UNDER THE HOME BAR.
   * On an iPhone the gesture bar overlaps the bottom of a fixed panel, and this
   * is the primary action of the whole component.
   */
  padding: 13px 18px calc(13px + env(safe-area-inset-bottom));
}

.x-drawer__tot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 15px;
  color: var(--xg-ink-72);
}

.x-drawer__tot--save { padding-top: 8px; color: var(--xg-accent-ink); }

.x-drawer__tot--grand {
  align-items: baseline;
  padding-top: 9px;
  margin-top: 9px;
  border-top: 1px solid rgba(18, 48, 35, .12);
}

.x-drawer__tot--grand span:first-child { font-size: 16px; font-weight: 500; }

.x-drawer__tot--grand span:last-child {
  font-size: clamp(23px, 6vw, 28px);
  font-weight: 500;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}


/* ── Focus ───────────────────────────────────────────────────────────────── */

.x-drawer a:focus-visible,
.x-drawer button:focus-visible {
  outline: 2px solid var(--xg-accent-ink);
  outline-offset: 2px;
}