html { scrollbar-gutter: stable; } /* short and long carts keep the same column positions */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--cc-bg);
  color: var(--cc-text);
  font-family: var(--cc-font-sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--cc-text-muted); text-decoration: none; }
a:hover { color: var(--cc-text); }

input, select, button { font: inherit; color: inherit; }

button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--cc-accent);
  outline-offset: 1px;
}

button:disabled { opacity: 0.5; cursor: not-allowed; }

@keyframes ccspin { to { transform: rotate(360deg); } }

.cc-glow {
  position: fixed;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 15% 10%, rgba(161, 161, 170, 0.4), transparent 42%),
    radial-gradient(circle at 85% 25%, rgba(113, 113, 122, 0.28), transparent 46%),
    radial-gradient(circle at 50% 95%, rgba(212, 212, 216, 0.35), transparent 42%);
  filter: blur(50px);
  opacity: 0.9;
}

#app { position: relative; z-index: 1; }

/* Glass surfaces */

.cc-glass {
  background: linear-gradient(180deg, var(--cc-glass-fill-top), var(--cc-glass-fill-bottom));
  border: 1px solid var(--cc-glass-border);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--cc-glass-highlight), var(--cc-glass-shadow);
}

.cc-card {
  border-radius: var(--cc-radius-lg);
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
}

.cc-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cc-text-faint);
}

.cc-muted { color: var(--cc-text-muted); }
.cc-faint { color: var(--cc-text-faint); }
.cc-note { color: var(--cc-text-faint); font-size: 12px; margin-top: 12px; text-wrap: pretty; }

/* Buttons */

.cc-btn {
  border-radius: var(--cc-radius-pill);
  font-weight: 600;
  cursor: pointer;
  padding: 7px 14px;
  font-size: 12.5px;
}

.cc-btn-primary {
  border: 1px solid var(--cc-glass-border-primary);
  background: linear-gradient(180deg, var(--cc-glass-fill-primary-top), var(--cc-glass-fill-primary-bottom));
  color: var(--cc-on-primary);
  box-shadow: inset 0 1px 0 var(--cc-glass-highlight), var(--cc-glass-shadow);
}

.cc-btn-glass {
  border: 1px solid var(--cc-glass-border);
  background: linear-gradient(180deg, var(--cc-glass-fill-top), var(--cc-glass-fill-bottom));
  color: var(--cc-text);
  box-shadow: inset 0 1px 0 var(--cc-glass-highlight), var(--cc-glass-shadow);
}

.cc-btn-plain {
  border: 1px solid var(--cc-glass-border);
  background: none;
  color: var(--cc-text-muted);
}

.cc-btn-inset { box-shadow: inset 0 1px 0 var(--cc-glass-highlight); }
.cc-btn-flat { box-shadow: none; }
.cc-btn-block { width: 100%; }
.cc-btn-md { padding: 12px 22px; font-size: 13.5px; }
.cc-btn-lg { padding: 14px 28px; font-size: 14.5px; }

/* Landing */

.cc-landing { max-width: 1040px; margin: 0 auto; padding: 28px 24px 80px; }

.cc-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: var(--cc-radius-pill);
}

.cc-topbar .cc-btn-primary { padding: 8px 18px; }

.cc-brand { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; flex: 1; }

.cc-hero { padding: 96px 0 0; max-width: 760px; }

.cc-pill-label {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--cc-radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cc-text-muted);
  background: linear-gradient(180deg, var(--cc-glass-fill-top), var(--cc-glass-fill-bottom));
  border: 1px solid var(--cc-glass-border);
}

.cc-hero h1 {
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 22px 0 0;
  text-wrap: pretty;
}

.cc-hero p { font-size: 19px; color: var(--cc-text-muted); margin: 22px 0 0; max-width: 600px; text-wrap: pretty; }

.cc-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 34px; }

.cc-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 88px; }
.cc-step { padding: 22px; }
.cc-step-title { font-weight: 700; font-size: 16px; margin-top: 10px; }
.cc-step p { color: var(--cc-text-muted); margin: 8px 0 0; }

/* Sign in */

.cc-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px; }

.cc-signin {
  width: 100%;
  max-width: 400px;
  padding: 34px;
  border-radius: 28px;
  text-align: center;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.cc-signin-title { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; margin-top: 16px; }
.cc-signin-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.cc-signin-actions .cc-btn { padding: 13px 20px; font-size: 14px; }

.cc-signin-email { margin-top: 10px; }

.cc-auth-input {
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-pill);
  padding: 12px 18px;
  font-size: 14px;
  background: var(--cc-surface-hover);
  text-align: center;
  min-width: 0;
}

.cc-auth-error { color: var(--cc-danger); font-size: 13px; margin-top: 14px; text-wrap: pretty; }

.cc-btn-surface {
  border: 1px solid var(--cc-border);
  background: var(--cc-surface);
  color: var(--cc-text);
  box-shadow: var(--cc-shadow-sm);
}

/* App shell */

.cc-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }

.cc-side {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 16px;
  background: linear-gradient(180deg, var(--cc-glass-fill-top), var(--cc-glass-fill-bottom));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-right: 1px solid var(--cc-glass-border);
}

.cc-side-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 0 6px; background: none; border: none; }

.cc-sidenav { display: flex; flex-direction: column; gap: 4px; }

.cc-navlink {
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--cc-radius-pill);
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  background: none;
  color: var(--cc-text-muted);
  white-space: nowrap;
}

.cc-navlink:hover { background: var(--cc-glass-fill-top); color: var(--cc-text); }

.cc-sidefoot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.cc-sidefoot .cc-btn { padding: 9px 14px; }
.cc-saved-card { padding: 14px; border-radius: var(--cc-radius-md); background: var(--cc-surface); border: 1px solid var(--cc-border); }
.cc-saved-card .cc-eyebrow { letter-spacing: 0.05em; }

.cc-main { padding: 26px 30px 96px; min-width: 0; } /* room to scroll past the floating total + estimate bars */

.cc-pagehead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.cc-pagetitle { font-size: 26px; font-weight: 700; letter-spacing: -0.025em; }

.cc-pill {
  border: 1px solid var(--cc-border);
  background-color: var(--cc-surface);
  color: var(--cc-text);
  border-radius: var(--cc-radius-pill);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: var(--cc-shadow-sm);
}

/* Native select arrows sit flush against the edge and ignore the theme; draw our own chevron. */
.cc-select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%2352525b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px;
}

:root[data-theme="dark"] .cc-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23a1a1aa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.cc-select option { background: var(--cc-surface); color: var(--cc-text); }

.cc-total-pill {
  position: fixed;
  left: calc(232px + 30px);
  bottom: 24px;
  z-index: 5;
}

.cc-checkout-all {
  position: fixed;
  right: 30px;
  bottom: 24px;
  z-index: 5;
  padding: 10px 20px;
  font-size: 13.5px;
}

.cc-notice { padding: 20px 22px; margin-bottom: 14px; }

/* Carts dashboard */

.cc-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

/* Cards are <button>s, which centre their content vertically by default. */
.cc-cart-card {
  padding: 20px 22px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.cc-cart-card:hover { border-color: var(--cc-border-strong); box-shadow: var(--cc-shadow-sm); }
.cc-cart-card-head { display: flex; align-items: baseline; gap: 10px; font-weight: 700; font-size: 17px; }
.cc-cart-card-name { letter-spacing: -0.015em; flex: 1; min-width: 0; }
.cc-cart-card-meta { color: var(--cc-text-muted); font-size: 13px; margin-top: 4px; }
/* "+ New cart": a dashed card that turns into a name box in place. */
.cc-new-cart { border-style: dashed; background: none; box-shadow: none; flex-direction: row; align-items: center; justify-content: center; gap: 10px; min-height: 110px; color: var(--cc-text-muted); }
.cc-new-cart .cc-cart-card-name { flex: none; font-weight: 700; font-size: 17px; }
.cc-new-cart:hover { color: var(--cc-text); }
.cc-new-cart-plus { font-size: 22px; line-height: 1; font-weight: 400; }
.cc-new-cart-form { cursor: default; gap: 10px; }
.cc-new-cart-form .cc-cart-card-name { font-weight: 700; font-size: 17px; }
.cc-new-cart-input { height: 38px; box-sizing: border-box; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-pill); padding: 0 14px; font: inherit; font-size: 14px; color: var(--cc-text); background: var(--cc-surface); width: 100%; }
.cc-new-cart-input:focus { outline: 2px solid var(--cc-accent); outline-offset: 1px; }
.cc-new-cart-form .cc-flag { align-self: flex-start; margin-top: 0; }
.cc-new-cart-actions { display: flex; justify-content: flex-end; gap: 8px; }
.cc-btn-small { padding: 8px 16px; font-size: 13px; }
.cc-delete-cart { font-size: 13px; padding: 0 4px; }

.cc-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.cc-chip {
  padding: 5px 11px;
  border-radius: var(--cc-radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cc-text-muted);
  background: var(--cc-surface-hover);
  border: 1px solid var(--cc-border);
}

/* Cart detail + checkout */

.cc-two-col { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.cc-two-col.cc-wide-side { grid-template-columns: minmax(0, 1fr) 320px; }
.cc-stack { display: flex; flex-direction: column; gap: 14px; }

.cc-group { overflow: hidden; }
.cc-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  cursor: pointer;
  border: none;
  border-bottom: 1px solid var(--cc-border);
  background: none;
  width: 100%;
  text-align: left;
}
.cc-group-store { font-weight: 700; font-size: 15px; }
.cc-group-domain { font-size: 11px; color: var(--cc-text-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.cc-caret { color: var(--cc-text-faint); font-size: 12px; width: 16px; text-align: center; }
/* Drawn chevron: the app font has no ▾, so the fallback glyph shrank to a dot. */
.cc-caret::after { content: ''; display: inline-block; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: translateY(-2px) rotate(45deg); }
.cc-caret-closed::after { transform: rotate(-45deg); }

.cc-row { display: flex; gap: 14px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--cc-border); }
/* Drag to reorder: the whole product panel lifts, neighbours glide out of the way. */
[data-store] > .cc-row { position: relative; background: var(--cc-surface); cursor: grab; -webkit-user-select: none; user-select: none; }
[data-store] > .cc-row:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: -2px; }
.cc-stack > .cc-group { position: relative; }
.cc-stack > .cc-group > .cc-group-head { cursor: grab; }
.cc-sorting > * { transition: transform 200ms cubic-bezier(0.2, 0, 0, 1); }
.cc-sorting > .cc-lifted {
  z-index: 2;
  transition: box-shadow 150ms ease, border-radius 150ms ease;
  box-shadow: var(--cc-shadow-lg);
  cursor: grabbing;
}
.cc-sorting > .cc-row.cc-lifted { border-radius: var(--cc-radius-md); border-bottom-color: transparent; }
.cc-sorting > .cc-lifted.cc-settling {
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), box-shadow 200ms ease;
  box-shadow: none;
}
.cc-group:has(.cc-sorting) { overflow: visible; }
body.cc-dragging-active,
body.cc-dragging-active * { cursor: grabbing !important; user-select: none; }
@media (prefers-reduced-motion: reduce) {
  .cc-sorting > *,
  .cc-sorting > .cc-lifted,
  .cc-sorting > .cc-lifted.cc-settling { transition: none; }
}

.cc-item-link {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: var(--cc-radius-sm);
}
a.cc-item-link { cursor: pointer; }
a.cc-item-link:hover { color: inherit; }
a.cc-item-link:hover .cc-item-title { text-decoration: underline; }

.cc-row input[type="checkbox"] { width: 17px; height: 17px; flex-shrink: 0; accent-color: #52525b; cursor: pointer; }

.cc-thumb {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--cc-surface-hover);
  border: 1px solid var(--cc-border);
  flex-shrink: 0;
  object-fit: cover;
  overflow: hidden;
}

.cc-grow { flex: 1; min-width: 0; }
.cc-ellipsis { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-item-variant { color: var(--cc-text-faint); font-size: 12px; margin-top: 2px; }
.cc-item-variant-unsure { color: var(--cc-warn, var(--cc-text-faint)); }

.cc-flag {
  display: inline-block;
  margin-top: 5px;
  padding: 3px 10px;
  border-radius: var(--cc-radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cc-warn);
  background: var(--cc-warn-soft);
}

.cc-qty {
  width: 54px;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-pill);
  padding: 5px 8px;
  font-size: 13px;
  text-align: center;
  background: var(--cc-surface);
}

.cc-variant-picks { display: grid; grid-template-columns: 132px 76px; gap: 8px; align-items: end; flex-shrink: 0; }
.cc-pick-other, .cc-pick-size { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cc-variant-pick select, .cc-variant-free input, .cc-variant-fixed { width: 100%; max-width: none; }
.cc-variant-fixed { height: 32px; box-sizing: border-box; display: flex; align-items: center; padding: 0 10px; border-radius: var(--cc-radius-pill); border: 1px solid transparent; background: var(--cc-surface-hover); color: var(--cc-text); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-variant-pick { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--cc-text-faint); }
.cc-variant-pick select {
  height: 32px;
  box-sizing: border-box;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-pill);
  padding: 5px 10px;
  font-size: 13px;
  color: var(--cc-text);
  background: var(--cc-surface);
  max-width: 140px;
  cursor: pointer;
}
.cc-variant-pick-unsure select { border-color: var(--cc-warn); }
.cc-variant-free input {
  height: 32px;
  box-sizing: border-box;
  border: 1px dashed var(--cc-border);
  border-radius: var(--cc-radius-pill);
  padding: 5px 10px;
  font-size: 13px;
  color: var(--cc-text);
  background: transparent;
}
.cc-variant-free input:focus { border-style: solid; border-color: var(--cc-text-faint); }

.cc-price { font-weight: 700; width: 86px; text-align: right; }

.cc-remove {
  border: none;
  background: none;
  color: var(--cc-danger);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--cc-radius-pill);
}
.cc-remove:hover { background: var(--cc-danger-soft); }

.cc-summary { position: sticky; top: 26px; padding: 22px; border-radius: var(--cc-radius-lg); }
.cc-summary-title { font-weight: 700; font-size: 15px; }
.cc-summary-rows { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.cc-summary-row { display: flex; gap: 10px; font-size: 13.5px; color: var(--cc-text-muted); }
.cc-summary-row > :last-child { font-weight: 600; color: var(--cc-text); }
.cc-fee-toggle { border: none; background: none; padding: 0; width: 100%; text-align: left; cursor: pointer; }
.cc-fee-toggle .cc-caret { display: inline-block; width: auto; margin-left: 2px; }
.cc-fee-toggle:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 3px; border-radius: 6px; }
.cc-fee-parts { display: flex; flex-direction: column; gap: 7px; margin-left: 2px; padding-left: 12px; border-left: 2px solid var(--cc-border); }
.cc-fee-parts .cc-summary-row { font-size: 12.5px; }
.cc-fee-parts .cc-summary-row > :last-child { font-weight: 500; color: var(--cc-text-muted); }
.cc-summary-total {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--cc-glass-border);
  font-weight: 700;
  font-size: 17px;
}
.cc-summary-total.cc-big { font-size: 19px; }
.cc-summary .cc-btn-primary { margin-top: 18px; padding: 13px 20px; font-size: 14px; }
.cc-summary .cc-btn-primary.cc-btn-lg { padding: 14px 20px; font-size: 14.5px; }
.cc-summary .cc-btn-plain { margin-top: 8px; padding: 11px 20px; font-size: 13.5px; }

.cc-panel { padding: 22px; }
.cc-panel-title { font-weight: 700; font-size: 15px; }
.cc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.cc-form input {
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-pill);
  padding: 11px 16px;
  background: var(--cc-surface-hover);
  min-width: 0;
}
.cc-span-2 { grid-column: span 2; }
.cc-panel-note { color: var(--cc-text-muted); font-size: 12.5px; margin-top: 14px; text-wrap: pretty; }

.cc-line { display: flex; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--cc-border); }
.cc-line-meta { font-size: 12.5px; color: var(--cc-text-muted); margin-top: 2px; }

.cc-warnings {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--cc-radius-md);
  background: var(--cc-warn-soft);
  border: 1px solid var(--cc-warn);
}
.cc-warnings-title { font-weight: 700; font-size: 13px; color: var(--cc-warn); }
.cc-warnings-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; font-size: 13px; }

/* Placing */

.cc-placing {
  max-width: 520px;
  margin: 60px auto;
  padding: 40px;
  border-radius: 28px;
  text-align: center;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
.cc-spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border-radius: 999px;
  border: 3px solid var(--cc-border);
  border-top-color: var(--cc-text-muted);
  animation: ccspin 0.9s linear infinite;
}

/* Result + orders */

.cc-result-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.cc-leg { display: flex; gap: 12px; align-items: center; padding: 16px 0; border-top: 1px solid var(--cc-border); flex-wrap: wrap; }
.cc-leg-info { flex: 1; min-width: 140px; }
.cc-status {
  padding: 5px 12px;
  border-radius: var(--cc-radius-pill);
  font-size: 12px;
  font-weight: 700;
  color: var(--cc-text-muted);
  background: var(--cc-surface-hover);
  border: 1px solid var(--cc-border);
}
.cc-amount { font-weight: 700; width: 90px; text-align: right; }
.cc-leg .cc-btn-primary { padding: 8px 16px; }
.cc-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

.cc-order { overflow: hidden; }
.cc-order-head { display: flex; gap: 12px; align-items: baseline; padding: 16px 22px; border-bottom: 1px solid var(--cc-border); flex-wrap: wrap; }
.cc-order-leg { display: flex; gap: 12px; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--cc-border); flex-wrap: wrap; }

@media (max-width: 760px) {
  .cc-shell { grid-template-columns: 1fr; }
  .cc-side { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; }
  .cc-sidenav { flex-direction: row; }
  .cc-sidefoot { display: none; }
  /* Too narrow for the total and the button side by side: the total sits above it. */
  .cc-total-pill { left: 16px; bottom: 68px; }
  .cc-checkout-all { right: 16px; bottom: 16px; }
  .cc-steps, .cc-grid-2, .cc-two-col, .cc-two-col.cc-wide-side { grid-template-columns: 1fr; }
  /* Phones: the nav bar keeps Sign out and the theme toggle; only the account card hides. */
  .cc-side { flex-wrap: wrap; overflow: visible; gap: 8px 12px; }
  .cc-sidefoot { display: flex; flex-direction: row; width: 100%; gap: 8px; }
  .cc-sidefoot .cc-btn { flex: 1; }
  .cc-side-brand span { display: none; } /* logo alone, so the links fit on one line */
  .cc-topbar .cc-btn { white-space: nowrap; padding: 8px 14px; }
  .cc-topbar [data-action="toggleTheme"] { display: none; } /* still in the app menu */
  .cc-sidefoot .cc-saved-card { display: none; }
  .cc-sidefoot .cc-btn { white-space: nowrap; }
  .cc-main { padding: 20px 16px 140px; }
  /* Cart rows: photo and name on the first line, choices + quantity + price + Remove below. */
  .cc-row { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
  .cc-row > .cc-item-link { flex: 1 1 calc(100% - 40px); min-width: 0; }
  .cc-row > .cc-remove { padding: 4px 0 4px 4px; }
  .cc-row > .cc-variant-picks { margin-left: 27px; justify-content: flex-start; max-width: none; }

  .cc-row > .cc-price { margin-left: auto; width: auto; }
}

.cc-waitlist-done { font-size: 13px; line-height: 1.45; padding: 12px 14px; border-radius: var(--cc-radius-md); background: var(--cc-surface); border: 1px solid var(--cc-border); margin: 14px 0 8px; text-wrap: pretty; }
.cc-notice-row { display: flex; align-items: center; gap: 16px; }
.cc-btn-danger { background: #b91c1c; color: #fff; border: 1px solid transparent; } /* same deep red in both themes, readable white text */
.cc-btn-danger:hover { filter: brightness(1.08); }
.cc-link-danger { background: none; border: none; color: var(--cc-text-faint); font-size: 12px; cursor: pointer; padding: 2px 0; }
.cc-link-danger:hover { color: var(--cc-danger); text-decoration: underline; }

/* Display type from the Claude Design handoff (.cc-word): Instrument Sans Bold, tight tracking,
   on the brand, headlines, page/cart/store/panel titles. Everything else stays system sans. */
.cc-word, .cc-brand, .cc-hero h1, .cc-step-title, .cc-signin-title, .cc-pagetitle,
.cc-cart-card-name, .cc-group-store, .cc-summary-title, .cc-panel-title {
  font-family: var(--cc-font-display);
  font-weight: 700;
  letter-spacing: var(--cc-tracking-display);
}

/* Press-and-hold drag on touch: no iOS link preview or text callout while holding a row. */
[data-store] > .cc-row, .cc-group-head { -webkit-touch-callout: none; }

.cc-landing-foot { display: flex; gap: 18px; justify-content: center; margin-top: 48px; font-size: 13px; }
.cc-landing-foot a { color: var(--cc-text-faint); text-decoration: none; }
.cc-landing-foot a:hover { color: var(--cc-text); text-decoration: underline; }
.cc-signin-legal a { color: inherit; text-decoration: underline; }
/* Product names wrap to two lines: with size and colour pickers a one-line name shrank to "Skele…". */
.cc-item-title.cc-ellipsis { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; min-width: 96px; }

/* Read-only (no extension, e.g. a phone): values stay visible, controls can't be changed. */
.cc-readonly .cc-remove, .cc-readonly .cc-variant-free:has(input:placeholder-shown) { display: none; }
.cc-readonly .cc-qty, .cc-readonly .cc-variant-pick select, .cc-readonly .cc-variant-free input { pointer-events: none; opacity: 0.75; }
.cc-readonly [data-store] > .cc-row, .cc-readonly .cc-group-head { cursor: default; }

/* Saved on sale: the pre-sale price struck through and the discount. */
.cc-was { font-size: 11.5px; font-weight: 500; color: var(--cc-text-faint); margin-top: 2px; white-space: nowrap; }
.cc-sale { color: var(--cc-ok, #16a34a); font-weight: 700; }

/* Store header total sits in the same column as the item prices below it. */
.cc-group-head { gap: 14px; }
.cc-group-total { font-weight: 700; }
.cc-group-head .cc-caret { width: 66px; text-align: center; }
.cc-remove { width: 66px; text-align: center; }
@media (max-width: 760px) {
  /* Phone rows: name; options + quantity; price + Remove. */
  .cc-row > .cc-variant-picks { flex: 1 1 0; min-width: 0; margin-left: 27px; grid-template-columns: minmax(0, 1fr) 64px; }
  .cc-row > .cc-variant-picks:has(.cc-pick-other:empty):has(.cc-pick-size:empty) { display: none; }
  .cc-row > .cc-qty-pick { align-self: flex-end; }
  .cc-row > .cc-price { margin-left: 27px; flex: 0 0 calc(100% - 27px - 66px - 20px); text-align: left; }
  .cc-group-head .cc-caret { width: auto; padding-right: 0; }
}

/* Labels above the size, colour and quantity boxes sit centred over them. */
.cc-variant-pick > span { text-align: center; }
.cc-qty-pick { flex-shrink: 0; width: 54px; }