/* Precision Labs — cart drawer.

   The panel that opens when something is added to the cart, and when the header
   cart button is pressed. It is a narrow version of the cart page: the line-item
   grid, the .pl-qty stepper and the .pl-nudge free-shipping strip are all
   cart.css's, reused rather than restated, so the two cannot drift apart.

   Colours: tokens only. Corners: border-radius 0 everywhere, by decision.

   This file is enqueued last (see inc/woocommerce.php), which means it comes
   after mobile.css and nothing downstream can correct it. Every touch target and
   type size inside the drawer is therefore held to the floors here, not left to
   a sheet that has never heard of .pl-drawer.

   Motion. Two rules:
     - The resting state is the FINISHED state. The panel sits at translateX(0)
       and the scrim at opacity 1 with no animation at all; the slide and the
       fade only exist inside `.is-anim`, a class theme.js adds solely when the
       visitor has not asked for reduced motion. Reduced motion therefore gets an
       instant, correct drawer rather than a suppressed animation.
     - Only transform and opacity are animated. Never width, never left — those
       relayout the whole page on every frame.
   base.css already neutralises durations under prefers-reduced-motion; the
   explicit block at the foot of this file is the belt to that pair of braces. */

/* ── shell ──────────────────────────────────────── */

.pl-drawer {
  position: fixed;
  inset: 0;
  z-index: 920;               /* over the lab modal (900), under the age gate (950) */
  display: flex;
  justify-content: flex-end;
}

/* [hidden] has to beat the display rules above, exactly as it does for the
   overlays in lab.css: the UA sheet's [hidden]{display:none} loses to any author
   display rule, and the drawer would then sit on screen permanently. */
.pl-drawer[hidden],
.pl-drawer [hidden] { display: none !important; }

.pl-drawer__scrim {
  position: absolute;
  inset: 0;
  background: var(--pl-scrim-72);
}

.pl-drawer__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(400px, 100%);
  max-width: 100%;
  height: 100%;
  background: var(--pl-surface);
  color: var(--pl-ink);
  border-left: 1px solid var(--pl-bd);
  border-radius: 0;
  box-shadow: -24px 0 60px rgba(9, 13, 24, .35);
}

/* The panel is focused programmatically on open so the title is announced. The
   drawer appearing is its own focus indicator; children keep their rings. */
.pl-drawer__panel:focus { outline: none; }

.pl-drawer.is-anim .pl-drawer__panel {
  animation: pl-drawer-in 260ms cubic-bezier(.16, .84, .44, 1) both;
}
.pl-drawer.is-anim .pl-drawer__scrim {
  animation: pl-drawer-scrim 260ms ease-out both;
}

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

/* ── head ───────────────────────────────────────── */

.pl-drawer__head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--pl-bd);
}
.pl-drawer__ident { min-width: 0; }
.pl-drawer__title {
  margin-top: 5px;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ── scroll region ──────────────────────────────── */

/* The list scrolls; the subtotal and the two buttons stay pinned. min-height:0
   on every flex ancestor or the list refuses to shrink and pushes the footer off
   the bottom of the panel. */
.pl-drawer__mount,
.pl-drawer__fragment {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.pl-drawer__mount { overflow: hidden; }

.pl-drawer__items {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  list-style: none;
  margin: 0;
  padding: 0 22px;
}

.pl-drawer__empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 30px 22px;
  text-align: center;
}

/* ── line item ──────────────────────────────────── */

.pl-drawer__row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--pl-bd);
}
.pl-drawer__row:last-child { border-bottom: 0; }

.pl-drawer__thumb {
  width: 64px;
  height: 64px;
  background: var(--pl-canvas);
}
.pl-drawer__thumb img { width: 100%; height: 100%; object-fit: contain; }

.pl-drawer__info { min-width: 0; }

.pl-drawer__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.pl-drawer__name {
  font-size: 14.5px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -.01em;
  min-width: 0;
  /* A compound name with no spaces must wrap rather than widen the panel. */
  overflow-wrap: anywhere;
}
.pl-drawer__name a:hover { color: var(--pl-navy); }

.pl-drawer__total {
  flex: none;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.pl-drawer__spec {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--pl-muted);
  overflow-wrap: anywhere;
}

.pl-drawer__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

/* cart.css sizes .pl-qty for a 120px table column and wraps its input in Woo's
   .quantity div. There is no wrapper here, so the input has to be told to flex
   itself; without min-width:0 it keeps its intrinsic width and pushes the + out
   of the box. */
.pl-drawer__qty { width: 106px; }
.pl-drawer__qty input.qty {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 44px;
}

.pl-drawer__remove {
  flex: none;
  padding: 6px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: 600 12.5px/1.4 var(--pl-font);
  color: var(--pl-faint);
  transition: color .16s;
}
.pl-drawer__remove:hover { color: var(--pl-ink); }

/* The line that was just added, so the shopper can see WHAT landed in the cart
   rather than only that the number went up. theme.js removes .is-new after
   1400ms, which is why the keyframe holds and then releases. */
.pl-drawer__row.is-new {
  animation: pl-drawer-flash 1400ms ease-out both;
}
@keyframes pl-drawer-flash {
  0%   { background-color: var(--pl-info-bg); }
  70%  { background-color: var(--pl-info-bg); }
  100% { background-color: transparent; }
}

/* ── foot ───────────────────────────────────────── */

.pl-drawer__foot {
  flex: none;
  padding: 16px 22px 20px;
  border-top: 1px solid var(--pl-bd);
  background: var(--pl-surface);
}

/* .pl-nudge is cart.css's strip; only the box it sits in changes. */
.pl-drawer__ship {
  margin: 0 0 14px;
  padding: 12px 14px;
}

.pl-drawer__sub {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.pl-drawer__subtotal { font-size: 20px; }
.pl-drawer__note {
  margin-top: 4px;
  font-size: 12px;
  color: var(--pl-faint);
}

/* auto-fit, so the pair drops to one column on a narrow phone instead of
   overflowing the panel. */
.pl-drawer__go {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.pl-drawer__go .pl-btn {
  padding-left: 14px;
  padding-right: 14px;
  min-height: 48px;
}

/* ── in flight ──────────────────────────────────── */

/* A quantity on screen that the server has not agreed to yet is a lie, and
   Checkout pressed mid-update would carry it through. Both are held until the
   response lands. */
.pl-drawer.is-busy .pl-drawer__items,
.pl-drawer.is-busy .pl-drawer__foot {
  opacity: .55;
  pointer-events: none;
  transition: opacity .16s;
}

/* ── header cart count ──────────────────────────── */

.pl-cartbtn.is-bumped { animation: pl-cart-bump 420ms ease-out; }
@keyframes pl-cart-bump {
  0%   { transform: none; }
  35%  { transform: scale(1.06); }
  100% { transform: none; }
}

/* ── no-JavaScript confirmation ─────────────────── */

/* Only ever parsed inside <noscript>. See template-parts/cart-drawer.php. */
.pl-drawer__noscript {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 880;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px var(--pl-gutter);
  background: var(--pl-ok-bg);
  color: var(--pl-ok-fg);
  border-top: 1px solid var(--pl-bd-strong);
  font-size: 14px;
  font-weight: 600;
}

/* ── touch targets ──────────────────────────────── */

/* Touch, not width, is what makes a 40px target too small, so the floor runs the
   whole way to the desktop breakpoint — the same reasoning mobile.css uses. */
@media (max-width: 1199px) {
  .pl-drawer .pl-modal__x { width: 44px; height: 44px; }

  .pl-drawer__qty { width: 132px; }
  .pl-drawer__qty .pl-qty__btn { width: 44px; height: 44px; }

  .pl-drawer__remove {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .pl-drawer__name a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .pl-drawer__go .pl-btn,
  .pl-drawer__empty .pl-btn,
  .pl-drawer__noscript .pl-btn { min-height: 48px; }
}

/* ── phone ──────────────────────────────────────── */

@media (max-width: 767px) {
  .pl-drawer__panel {
    width: 100%;
    border-left: 0;
  }

  .pl-drawer__head { padding: 16px 18px 14px; }
  .pl-drawer__items { padding: 0 18px; }
  .pl-drawer__foot { padding: 14px 18px 18px; }
  .pl-drawer__empty { padding: 26px 18px; }

  /* Nothing in the drawer below the 12px legibility floor. */
  .pl-drawer__name { font-size: 15px; }
  .pl-drawer__total { font-size: 15px; }
  .pl-drawer__spec,
  .pl-drawer__remove { font-size: 12.5px; }
  .pl-drawer__note { font-size: 12px; }
  .pl-drawer__title { font-size: 18px; }
}

/* ── reduced motion ─────────────────────────────── */

/* base.css already clamps every duration to .01ms with !important, and theme.js
   never adds .is-anim or .is-bumped for these visitors. This block is the third
   guard, and the only one that also states the resting appearance of a
   just-added row — a still tint rather than a fade, so the shopper still sees
   which line is new. */
@media (prefers-reduced-motion: reduce) {
  .pl-drawer.is-anim .pl-drawer__panel,
  .pl-drawer.is-anim .pl-drawer__scrim,
  .pl-cartbtn.is-bumped { animation: none; }

  .pl-drawer.is-busy .pl-drawer__items,
  .pl-drawer.is-busy .pl-drawer__foot { transition: none; }

  .pl-drawer__row.is-new {
    animation: none;
    background-color: var(--pl-info-bg);
  }
}