/**
 * cart.css: store cart drawer, cart button, and bundle-tile styles
 * (Better Together Diabetes)
 * (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
 * STEMsaic twin (stemsaic-www/assets/cart.css) is the same file with the
 * token block swapped for the STEMsaic ramp.
 *
 * (c) 2026 STEMsaic Research Impacts LLC. All rights reserved.
 */
:root {
  --cart-ink: #1e2a42;
  --cart-bg: #fdf8f2;
  --cart-line: #e8dece;
  --cart-muted: #6b7280;
  --cart-label: #2a5fa8;
  --cart-accent: #2a5fa8;
}

/* 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 (it is not a
   button inside the drawer that also carries the site's default), but
   the drawer's Close, Remove and Keep-shopping rings below (formerly
   :focus-visible rules at var(--cart-accent), 1.97:1 on this drawer's
   background) are DELETED so the higher-specificity site.css rule
   (a:focus-visible, button:focus-visible -- 3px solid #c47a20, 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; }
/* Matches the desktop-nav breakpoint moved to 1150px in site.css (round-2
   gauntlet fix, claude-code-n8xdg, 2026-09-23): the mobile cart icon must
   stay visible for exactly as long as the hamburger nav is the one showing. */
@media (max-width: 1149px) {
  .cart-btn--mobile { display: inline-flex; }
}

/* ── Drawer ─────────────────────────────────────────────────────────── */
.cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(23, 34, 54, 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(23, 34, 54, 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: #f5f0e8;
  border: 1px solid var(--cart-accent);
  border-radius: 6px;
  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.08em; 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: 6px;
  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 / shopper m3: the Aquarium "Get it free" link
   is a plain a.btn-gold, not a .cart-add, so it missed this edge and sat
   flat next to bordered Add-to-cart buttons in the same 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 world it
   supersedes shows "Included in <bundle name>" instead of a buy button.
   That text is longer than the 279px slot the row leaves for it, so it
   wrapped and grew the whole row by 34px. 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: the page's own .store-label rule
   loads after this file and shares the same specificity, so its
   color:#2a5fa8 won the cascade and "BUNDLE" rendered amber on amber
   (1.64:1). Scoping the selector to .store-tile.is-bundle raises the
   specificity so var(--cart-ink) wins. Padding restored to the spec value
   (section 7: "padding 3px 8px") -- it had collapsed to a bare 0px strip. */
.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-4 gauntlet, craft L1: the bundle-mosaic strip covers the bottom
   20px of the media box, so the arrow's default center (on the full box)
   sits 10px below the center of what is actually visible. */
.store-tile.is-bundle .store-arrow { top: calc(50% - 10px); }
/* Round-6 gauntlet, craft L1: this 2px bottom margin was the other half of
   the pass row's 1.7px price-baseline drift (the min-height raise above
   is the other half). */
.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: .cart-item was a 3-child flex row with
   space-between, so each price floated at whatever x its own item name
   left over -- up to 52px of drift between rows, none of it lined up
   with Subtotal. Grid gives every price, Remove and Subtotal one shared
   right edge; Remove drops under its price instead of beside it. */
.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: .cart-list claimed all the free height
   even when empty, so "Your cart is empty." landed at the bottom of the
   drawer with a full screen of blank cream above it. */
.cart-list:empty { flex: 0 0 auto; }
.cart-list:empty + .cart-empty { flex: 1 1 auto; padding-top: 6px; }