/**
 * Cart drawer — the right-side slide-over cart, plus the shared quantity
 * stepper (.catnip-stepper) the cart page reuses. This sheet loads on every
 * page except checkout, so the stepper lives here once rather than being
 * duplicated into cart.css.
 *
 * Patterned on Shopify's default cart drawer, wearing the Ocean Calm tokens.
 * Tokens only: hairlines use the `thin` keyword, fixed dimensions use rem.
 */

/* --- Shell ---------------------------------------------------------------- */

.catnip-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
}

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

.catnip-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--deep-ocean) 35%, transparent);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.catnip-drawer.is-open .catnip-drawer-backdrop {
  opacity: 1;
}

.catnip-drawer-panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(30rem, 100%);
  display: flex;
  flex-direction: column;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--duration-normal) var(--ease-out);
}

.catnip-drawer.is-open .catnip-drawer-panel {
  transform: translateX(0);
}

.catnip-drawer-panel:focus {
  outline: none;
}

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

/* Background scroll lock while the drawer is open. */
.catnip-drawer-lock {
  overflow: hidden;
}

/* --- Header --------------------------------------------------------------- */

.catnip-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
}

.catnip-drawer-head h2 {
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--charcoal);
}

.catnip-drawer-close {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  color: var(--graphite);
  transition: background var(--duration-fast), color var(--duration-fast);
}

.catnip-drawer-close:hover {
  background: var(--pebble);
  color: var(--charcoal);
}

/* --- Region --------------------------------------------------------------- */

/* No horizontal padding here. The scrolling list is a child of this region, so
   padding on the region put the scrollbar at the inner edge of that padding —
   hard against the price column, with the thumb visually clipping the cents.
   The region now spans the panel's full width and its children carry their own
   inset, which puts the scrollbar out at the panel edge where it belongs and
   still leaves the prices clear of it. Client direction, 6 Aug 2026. */
.catnip-drawer-region {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  transition: opacity var(--duration-fast);
}

/* Everything except the scrolling list gets the inset directly. */
.catnip-drawer-region > .catnip-drawer-cols,
.catnip-drawer-region > .catnip-drawer-empty,
.catnip-drawer-region > .catnip-drawer-foot {
  padding-inline: var(--space-m);
}

.catnip-drawer-region.is-busy {
  opacity: 0.55;
  pointer-events: none;
}

.catnip-drawer-cols {
  display: flex;
  justify-content: space-between;
  padding-block: var(--space-2xs);
  border-bottom: thin solid var(--hairline);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* --- Line items ----------------------------------------------------------- */

/* The scroll container itself. It keeps the same visual inset as its siblings,
   plus a little extra on the end so the price column clears the scrollbar
   track rather than sitting under it. */
.catnip-drawer-items {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-block: var(--space-2xs);
  padding-inline-start: var(--space-m);
  padding-inline-end: var(--space-s);
}

.catnip-drawer-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-s);
  padding-block: var(--space-s);
}

.catnip-drawer-thumb {
  width: 4.5rem;
}

.catnip-drawer-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: thin solid var(--hairline);
}

.catnip-drawer-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
}

.catnip-drawer-title-link {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-small);
  color: var(--charcoal);
  line-height: 1.3;
  transition: color var(--duration-fast);
}

a.catnip-drawer-title-link:hover {
  color: var(--deep-ocean);
}

.catnip-drawer-unit {
  font-size: var(--text-small);
  color: var(--graphite);
}

.catnip-drawer-item dl.variation {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: var(--text-small);
  color: var(--graphite);
}

.catnip-drawer-item dl.variation dt,
.catnip-drawer-item dl.variation dd,
.catnip-drawer-item dl.variation dd p {
  display: inline;
  margin: 0;
  font-weight: 400;
}

.catnip-drawer-line-total {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-small);
  color: var(--charcoal);
}

.catnip-drawer-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}

.catnip-drawer-remove {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  color: var(--graphite);
  transition: background var(--duration-fast), color var(--duration-fast);
}

.catnip-drawer-remove:hover {
  background: var(--pebble);
  color: var(--charcoal);
}

.catnip-drawer-remove .material-symbols-outlined {
  font-size: 1.25rem;
}

/* --- Quantity stepper (shared with the cart page) ------------------------- */

.catnip-stepper {
  display: inline-flex;
  align-items: center;
  border: thin solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.catnip-stepper button {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.5rem;
  color: var(--graphite);
  transition: color var(--duration-fast), background var(--duration-fast);
}

.catnip-stepper button:hover {
  background: var(--pebble);
  color: var(--charcoal);
}

.catnip-stepper button .material-symbols-outlined {
  font-size: 1.125rem;
}

.catnip-stepper input,
.catnip-stepper .quantity input.qty {
  width: 2.5rem;
  border: none;
  background: none;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-small);
  color: var(--charcoal);
  -moz-appearance: textfield;
  appearance: textfield;
}

.catnip-stepper input::-webkit-outer-spin-button,
.catnip-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.catnip-stepper .quantity {
  display: contents;
}

.catnip-stepper .quantity label {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Footer --------------------------------------------------------------- */

.catnip-drawer-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-block: var(--space-s) var(--space-m);
  border-top: thin solid var(--hairline);
  background: var(--white);
}

.catnip-drawer-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  font-size: var(--text-body);
  color: var(--charcoal);
}

.catnip-drawer-total span {
  font-weight: 600;
}

.catnip-drawer-total strong {
  font-family: var(--font-heading);
  font-weight: 800;
}

.catnip-drawer-note {
  font-size: var(--text-small);
  color: var(--graphite);
}

.catnip-drawer-checkout {
  justify-content: center;
  margin-top: var(--space-2xs);
}

/* --- Free-shipping nudge (dormant until the Woo settings fix at cutover) -- */

.catnip-shipping-nudge {
  margin-top: var(--space-xs);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  background: var(--coastal-soft);
  color: var(--deep-ocean);
  font-size: var(--text-small);
}

/* --- Empty state ---------------------------------------------------------- */

.catnip-drawer-empty {
  margin-block: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  text-align: center;
  padding-block: var(--space-xl);
}

.catnip-drawer-empty > .material-symbols-outlined {
  font-size: 2.75rem;
  color: var(--coastal-blue);
}

.catnip-drawer-empty-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h4);
  color: var(--charcoal);
}

.catnip-drawer-empty-note {
  font-size: var(--text-small);
  color: var(--graphite);
  max-width: 26ch;
}

.catnip-drawer-empty .btn-outline {
  margin-top: var(--space-xs);
}