/**
 * cart.css: store cart drawer, cart button, and bundle-tile styles
 * (STEMsaic Research Impacts)
 * (trex-tracker/STORE-CART-SPEC-2026-09-22.md sections 3.10, 7)
 *
 * Every selector is scoped under .cart- or .store-tile.is-bundle. The BTD
 * twin (btd-www/assets/cart.css) is the same file with the token block
 * swapped for the BTD ramp.
 *
 * (c) 2026 STEMsaic Research Impacts LLC. All rights reserved.
 */
:root {
  --cart-ink: #1a2744;
  --cart-bg: #ffffff;
  --cart-line: #dfe5ee;
  --cart-muted: rgba(26,39,68,0.78);
  --cart-label: #2d5a9e;
  --cart-accent: #d4a843;
}

/* The store tiles' .btn-gold/.btn-outline/.store-buy (site.css) set their own
   `display` with equal CSS specificity to the browser's native [hidden]
   default, so an author rule wins and a "hidden" cart-add button or held
   block renders anyway. Restated here at equal specificity plus !important
   so cart.js's hidden-attribute toggle actually hides these. */
.cart-add[hidden],
[data-cart-available-if][hidden] {
  display: none !important;
}

/* ── Cart button (nav) ─────────────────────────────────────────────── */
.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: none;
  color: var(--cart-ink);
  cursor: pointer;
  padding: 0;
}
/* Round-6 gauntlet, craft M3: .cart-btn keeps its own ring, but the
   drawer's Close, Remove and Keep-shopping rings below (formerly
   :focus-visible rules at var(--cart-accent), 2.21:1 on white) are
   DELETED so the higher-specificity site.css rule (a:focus-visible,
   button:focus-visible -- 3px solid #4a90d9, the same ring Checkout
   already uses) applies to all of them instead. */
.cart-btn:focus-visible { outline: 3px solid var(--cart-accent); outline-offset: 2px; }
.cart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cart-accent);
  color: var(--cart-ink);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.cart-btn--mobile { display: none; }
@media (max-width: 819px) {
  .cart-btn--mobile { display: inline-flex; }
}

/* ── Drawer ─────────────────────────────────────────────────────────── */
.cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 24, 46, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-out;
  z-index: 998;
}
.cart-backdrop.is-open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 100vw);
  background: var(--cart-bg);
  color: var(--cart-ink);
  border-left: 1px solid var(--cart-line);
  box-shadow: -12px 0 32px rgba(15, 24, 46, 0.22);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 200ms ease-out;
  z-index: 999;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', system-ui, sans-serif;
}
.cart-drawer.is-open { transform: translateX(0); visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .cart-drawer, .cart-backdrop { transition: none; }
}

.cart-mosaic { width: 100%; height: 40px; display: block; flex: 0 0 auto; }

.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 12px;
}
.cart-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 19px; margin: 0; }
.cart-close {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--cart-ink); cursor: pointer;
  margin-right: -12px;
}

.cart-notice {
  margin: 0 22px 12px;
  padding: 10px 14px;
  background: #f4f8fd;
  border: 1px solid var(--cart-accent);
  border-radius: 2px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cart-ink);
}

.cart-list { flex: 1 1 auto; overflow-y: auto; margin: 0; padding: 0 22px; list-style: none; }
.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--cart-line);
}
.cart-item-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cart-item-label {
  font-family: 'Montserrat', sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 12px; color: var(--cart-label);
}
.cart-item-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14.5px; color: var(--cart-ink); }
.cart-item-price { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.cart-remove {
  background: transparent; border: none; color: var(--cart-muted);
  font-size: 12.5px; text-decoration: underline; cursor: pointer;
  min-height: 44px; padding: 0 4px;
}

.cart-empty { text-align: left; color: var(--cart-muted); font-size: 14.5px; padding: 0 22px 22px; margin: 0; }

.cart-foot { flex: 0 0 auto; padding: 16px 22px 22px; border-top: 1px solid var(--cart-line); }
.cart-subtotal {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 17px; margin-bottom: 8px;
}
.cart-recurring { font-size: 12.5px; color: var(--cart-muted); margin: 0 0 10px; text-align: left; }
.cart-steps { font-size: 12.5px; color: var(--cart-muted); margin: 0 0 14px; text-align: left; }
.cart-checkout {
  width: 100%;
  height: 48px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 15px;
  border-radius: 2px;
  cursor: pointer;
}
.cart-checkout:disabled { opacity: 0.7; cursor: default; }
/* Round-4 gauntlet, shopper M3 / lead ruling 9: add-to-cart and checkout
   keep the site's pale-blue .btn-gold fill with its navy edge -- the
   edge needs an actual border width, since .btn-gold only forces
   border-color, and this rule used to zero the whole border out. */
/* Round-6 gauntlet, brand L2: parity edit with the BTD twin. No visible
   effect today (no plain a.btn-gold sits in a STEMsaic .store-buy row). */
.cart-add, .cart-checkout, .store-buy .btn-gold { border: 1.5px solid; }
.cart-error { color: var(--cart-ink); font-weight: 600; font-size: 13px; margin: 10px 0 0; padding-left: 10px; border-left: 3px solid var(--cart-accent); text-align: left; }
/* Round-4 gauntlet, lead ruling 9: "In cart" is a distinct outlined state
   (white fill instead of the pale-blue add fill) with a check glyph drawn
   in CSS, not a photo or icon font. No CART-LINES override exists for this
   label, so the text itself stays "In cart" (cart.js). */
.cart-add[data-cart-state="in"] {
  background: #ffffff !important;
}
.cart-add[data-cart-state="in"]::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 9px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(1px, -1px);
}
/* Round-4 gauntlet, craft M1: once a bundle is in the cart, every item it
   supersedes shows "Included in <bundle name>" instead of a buy button.
   That text is longer than the slot the row leaves for it, so it wrapped
   and grew the whole row. Rendered as a quiet inline note instead of a
   full-width disabled button. */
.store-buy .cart-add[data-cart-state="included"] {
  flex: 1 1 0;
  min-width: 0;
  white-space: normal;
  text-align: left;
  justify-content: flex-start;
  font-size: 13px !important;
  line-height: 1.15;
  padding: 4px 12px !important;
  min-height: 40px;
  background: transparent !important;
  border: 1px solid var(--cart-line) !important;
  color: var(--cart-muted) !important;
  cursor: default;
}
.cart-keep {
  flex: 0 0 auto;
  background: transparent; border: none; color: var(--cart-muted);
  font-size: 13px; text-decoration: underline; cursor: pointer;
  padding: 12px 22px 20px; text-align: center; width: 100%;
  min-height: 44px;
}

/* ── Bundle tile (section 7) ────────────────────────────────────────── */
.store-tile.is-bundle { border: 0; padding: 2px; background: var(--cart-accent); }
.store-tile.is-bundle:not([open]) > summary, .store-tile.is-bundle[open] > .store-detail{ clip-path: polygon(0 0,100% 0,100% calc(100% - 26.83px),calc(100% - 26.83px) 100%,0 100%); }
/* Round-4 gauntlet, craft H1 / shopper M1 (BTD twin): the page's own
   .store-label rule shares this selector's specificity and can win the
   cascade, painting the chip text the same color as its own background.
   Scoping to .store-tile.is-bundle raises the specificity so
   var(--cart-ink) wins. Padding restored to the spec value (section 7:
   "padding 3px 8px"). */
.store-tile.is-bundle .is-bundle-chip { display: inline-block; background: var(--cart-accent); color: var(--cart-ink); padding: 3px 8px; }
.store-tile.is-bundle .bundle-mosaic { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 20px; display: block; z-index: 2; }
/* Round-6 gauntlet, craft L1: parity edit with the BTD twin. */
.store-includes { font-size: 14px; line-height: 1.3; color: var(--cart-muted); margin: 0; }
/* The bundle carries one more line (store-includes) than a regular tile,
   so its label/name/hook keep a tighter rhythm to bring its price row back
   to the same baseline as its row-mates (charter criterion 7; round-2
   re-measure after H4's SKU stub made buttons, and this gap, visible). */
/* Round-4 gauntlet: H1's chip padding restore (0 8px -> the spec's 3px 8px)
   added height back to the bundle's own label row, which this file's
   rhythm tuning had NOT accounted for (it was tuned against the old,
   collapsed chip). Down to the documented floor of 0 to bring the price
   row back onto the row's shared baseline (brand critic L4 re-check). */
.store-tile.is-bundle .store-label { margin-bottom: 0; }
.store-tile.is-bundle .store-name { margin-bottom: 2px; }
.store-tile.is-bundle .store-hook { margin-bottom: 2px; }

/* Round-6 gauntlet, craft H1: parity edit with the BTD twin -- .cart-item
   was a 3-child flex row with space-between, so each price floated at
   whatever x its own item name left over. Grid gives every price, Remove
   and Subtotal one shared right edge. */
.cart-item{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto 1fr; grid-template-areas:"text price" "text remove"; column-gap:16px; row-gap:0; align-items:start; }
.cart-item-text{ grid-area:text; align-self:center; }
.cart-item-price{ grid-area:price; justify-self:end; text-align:right; }
.cart-remove{ grid-area:remove; justify-self:end; padding:0 0 0 8px; margin-right:0; }

/* Round-6 gauntlet, shopper m2: parity edit with the BTD twin. */
.cart-list:empty { flex: 0 0 auto; }
.cart-list:empty + .cart-empty { flex: 1 1 auto; padding-top: 6px; }