/* Renéra · "Added to cart" drawer.
   Design source: claude.ai Design "Product page" prototype (CartDrawer,
   product-components-current.jsx / product-styles.css lines 680–861).
   Content markup lives in template-parts/cart-drawer-contents.php and is
   shared by page load + the WooCommerce fragment refresh. */

.rn-cart-drawer { position: fixed; inset: 0; z-index: 10000; pointer-events: none; }
.rn-cart-drawer.is-open { pointer-events: auto; }

.rn-drawer__scrim {
  position: absolute; inset: 0;
  /* #2b2e22 has no design-system token (nearest, --renera-overlay-scrim, is a
     different hue/alpha) — tokenize when the palette grows a matching value. */
  background: rgba(43, 46, 34, 0.32);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity var(--renera-dur-base) var(--renera-ease);
}
.rn-cart-drawer.is-open .rn-drawer__scrim { opacity: 1; }

.rn-drawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(440px, 92vw);
  background: var(--renera-paper);
  border-left: 1px solid var(--renera-clay-300);
  box-shadow: var(--renera-shadow-lift);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--renera-dur-base) var(--renera-ease);
}
.rn-cart-drawer.is-open .rn-drawer { transform: translateX(0); }

.rn-drawer__sync { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.rn-drawer__flash {
  display: flex; align-items: center; gap: 12px;
  background: var(--renera-olive-700); color: var(--renera-sand-200);
  font-family: var(--renera-font-mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0 24px; max-height: 0; overflow: hidden;
  transition: max-height var(--renera-dur-base) var(--renera-ease),
              padding var(--renera-dur-base) var(--renera-ease);
}
.rn-drawer__flash[data-on="1"] { max-height: 56px; padding: 16px 24px; }
.rn-drawer__flash-icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--renera-olive-300); color: var(--renera-olive-900);
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px;
}

.rn-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 24px 20px;
  border-bottom: 1px solid var(--renera-clay-300);
}
.rn-drawer__title {
  font-family: var(--renera-font-serif); font-weight: 400;
  font-size: 30px; letter-spacing: -0.01em; color: var(--renera-ink);
  margin: 0; display: flex; align-items: baseline; gap: 10px;
}
/* Bare glyph — no disc, no border, no hover fill. Colour is the only affordance. */
.rn-drawer__close {
  width: 30px; height: 30px; flex: 0 0 30px; padding: 0;
  border: 0; border-radius: 0; background: transparent;
  color: var(--renera-olive-700); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--renera-dur-fast) var(--renera-ease),
              opacity var(--renera-dur-fast) var(--renera-ease);
}
.rn-drawer__close svg { flex: 0 0 auto; }
.rn-drawer__close:hover { background: transparent; color: var(--renera-ink); opacity: 0.7; }

.rn-drawer__lines { flex: 1; overflow-y: auto; padding: 8px 24px; }
.rn-drawer__empty {
  padding: 60px 0; text-align: center;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.rn-drawer__empty p {
  font-family: var(--renera-font-serif); font-style: italic;
  font-size: 17px; color: var(--renera-mute); margin: 0; max-width: 260px;
}
.rn-drawer__line {
  display: grid; grid-template-columns: 76px 1fr; gap: 16px;
  padding: 22px 0; border-bottom: 1px solid var(--renera-clay-300);
}
.rn-drawer__line:last-child { border-bottom: 0; }
.rn-drawer__thumb {
  width: 76px; height: 88px; border-radius: var(--renera-r-md);
  background: var(--renera-clay-100); border: 1px solid var(--renera-clay-300);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.rn-drawer__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.rn-drawer__line-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.rn-drawer__line-name {
  font-family: var(--renera-font-serif); font-weight: 400;
  font-size: 18px; letter-spacing: -0.01em; color: var(--renera-ink);
  margin: 0; line-height: 1.25;
}
/* Item name links to the product — same clickable-text hover language as
   the nav / breadcrumbs (ink at rest, olive-700 on hover, no underline). */
.rn-drawer__line-name a {
  color: inherit; text-decoration: none;
  transition: color var(--renera-dur-fast) var(--renera-ease);
}
.rn-drawer__line-name a:hover { color: var(--renera-olive-700); }
.rn-drawer__remove {
  background: none; border: 0; cursor: pointer;
  font-family: var(--renera-font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--renera-mute);
  transition: color var(--renera-dur-fast) var(--renera-ease); flex: 0 0 auto;
}
.rn-drawer__remove:hover { color: var(--renera-olive-700); text-decoration: underline; }
.rn-drawer__line-meta {
  font-family: var(--renera-font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--renera-mute); margin: 6px 0 0;
}
/* Bundle chip (shape in components.css) — .rn-drawer__line-body is a plain
   block, so the pill carries its own top gap here rather than riding a
   parent flex gap the way the /cart/ line's does. */
.rn-drawer__line-body .rn-bundle-chip { margin-top: 8px; }
.rn-drawer__line-bottom {
  display: flex; align-items: center; justify-content: space-between; margin-top: 16px;
}
.rn-drawer__stepper {
  display: inline-flex; align-items: center;
  border: 1px solid var(--renera-clay-300); border-radius: var(--renera-r-sm);
}
.rn-drawer__stepper button {
  width: 36px; height: 36px; background: transparent; border: 0; cursor: pointer;
  /* The theme base sets a global button padding (0.5rem 1rem); without this
     reset it eats the icon's box and squashes the −/+ glyph to a sliver. */
  padding: 0;
  color: var(--renera-olive-700);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--renera-dur-fast) var(--renera-ease);
}
.rn-drawer__stepper button svg { flex: 0 0 auto; }
/* Shared icon-button hover — see --renera-iconbtn-* in design-system.css.
   (hover: hover) keeps it off touch, where :hover sticks after a tap. */
@media (hover: hover) {
  .rn-drawer__stepper button:hover {
    background: var(--renera-iconbtn-bg-hover);
    color: var(--renera-iconbtn-fg-hover);
  }
}
.rn-drawer__stepper span {
  min-width: 26px; text-align: center;
  font-family: var(--renera-font-mono); font-size: 13px; color: var(--renera-ink);
}
.rn-drawer__line-price { text-align: right; }
.rn-drawer__line-price .now {
  font-family: var(--renera-font-serif); font-size: 19px;
  letter-spacing: -0.01em; color: var(--renera-ink);
}
.rn-drawer__line-price .was {
  display: block; font-family: var(--renera-font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-decoration: line-through; color: var(--renera-mute); margin-top: 3px;
}

.rn-drawer__foot {
  border-top: 1px solid var(--renera-clay-300);
  padding: 22px 24px 26px; background: var(--renera-sand-300);
  display: flex; flex-direction: column; gap: 14px;
}
.rn-drawer__row {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--renera-font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--renera-mute);
}
.rn-drawer__subtotal {
  font-family: var(--renera-font-serif); font-size: 26px;
  letter-spacing: -0.01em; color: var(--renera-ink);
}
.rn-drawer__tax {
  font-family: var(--renera-font-sans); font-size: 12px;
  color: var(--renera-mute); margin: 0 0 4px;
}
.rn-drawer__foot .rn-btn { width: 100%; }
.rn-drawer__checkout { width: 100%; text-align: center; text-decoration: none; }
.rn-drawer__viewcart {
  width: 100%; text-align: center; text-decoration: none;
  margin-top: -4px;
}
/* Hover shifts to the olive-500 accent like the site-wide .rn-link-mono
   links; no underline per user preference (2026-07-02). */
.rn-drawer__continue {
  background: none; border: 0; cursor: pointer; padding: 4px;
  font-family: var(--renera-font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--renera-olive-700);
  transition: color var(--renera-dur-fast) var(--renera-ease);
}
.rn-drawer__continue:hover { color: var(--renera-olive-500); }
.rn-drawer__trust {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--renera-font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--renera-mute);
  padding-top: 4px;
}
.rn-drawer__trust span { display: inline-flex; align-items: center; gap: 6px; }
.rn-drawer__trust svg { color: var(--renera-olive-500); }

/* ── Short-viewport tuning ────────────────────────────────────────────────
   The panel is a full-height flex column and `.rn-drawer__lines` (flex: 1)
   is its ONLY flexible region — the flash, head and foot are fixed,
   intrinsic-height blocks totalling 469px at the desktop sizes above
   (54 + 83 + 332). That is more chrome than a phone has screen: on a
   360x640 device the list was left 171px to show a 209px cart line, so the
   quantity stepper and the line price were clipped below the fold the
   moment the drawer opened (and in landscape the list collapsed to 16px).

   Keyed on viewport HEIGHT, not width, because height is the constraint
   actually being violated — a 360px-wide but tall phone has room to spare,
   while a short laptop window has the same squeeze as a handset. */
@media (max-height: 760px) {
  .rn-drawer__flash[data-on="1"] { max-height: 44px; padding: 11px 20px; }

  .rn-drawer__head { padding: 16px 20px 14px; }
  .rn-drawer__title { font-size: 24px; }

  .rn-drawer__lines { padding: 4px 20px; }
  .rn-drawer__line { grid-template-columns: 64px 1fr; gap: 14px; padding: 16px 0; }
  .rn-drawer__thumb { width: 64px; height: 74px; }
  .rn-drawer__thumb img { padding: 6px; }
  .rn-drawer__line-name { font-size: 16px; }
  .rn-drawer__line-bottom { margin-top: 12px; }

  .rn-drawer__foot { padding: 14px 20px 18px; gap: 10px; }
  .rn-drawer__subtotal { font-size: 22px; }
  .rn-drawer__foot .rn-btn { height: 48px; }
}

/* Landscape phones (and any window shorter than ~one drawer's worth of
   chrome) can't fit a pinned footer AND a usable list no matter how tight
   the scale gets. Below this height the layout stops pinning the footer and
   the whole head/list/foot column scrolls as one, so Checkout is always
   reachable instead of being pushed off the panel. The flash banner stays
   above it. */
@media (max-height: 520px) {
  .rn-drawer__sync { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .rn-drawer__lines { flex: 0 0 auto; overflow-y: visible; }
}