/* ---- 8. Pricing ----------------------------------------------------------- */

#pricing {
  padding-block: 1.5rem 2.5rem;
}

#pricing .grid {
  align-items: stretch;
}

.pricing-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ta-surface);
  border: 1px solid var(--ta-border);
  border-radius: var(--ta-r);
  padding: 1.5rem 1.5rem 1.75rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pricing-tier:hover {
  border-color: var(--ta-border-strong);
  box-shadow: var(--ta-shadow-sm);
}

.pricing-tier h3 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
}

.pricing-tier .price {
  margin: 0.35rem 0 1.25rem;
  font-size: 1.9rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.pricing-tier ul {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-tier li {
  position: relative;
  padding: 0.28rem 0 0.28rem 1.35rem;
  color: var(--ta-muted);
  font-size: 0.95rem;
}

/* a small check mark drawn in pure CSS before each feature */
.pricing-tier li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.5em;
  height: 0.26em;
  border-left: 1.5px solid var(--ta-accent);
  border-bottom: 1.5px solid var(--ta-accent);
  transform: rotate(-45deg);
}

.pricing-tier form {
  margin-top: auto;
  padding-top: 1.5rem;
}

.pricing-tier form button {
  width: 100%;
}

/* The middle tier gets an accent border + a corner tag. The class is added
   by the Pricing component when there are 3+ tiers. */
.pricing-tier.featured {
  border-color: var(--ta-accent);
  box-shadow: 0 0 0 1px var(--ta-accent), var(--ta-shadow-sm);
}

.pricing-tier.featured::after {
  content: "Most popular";
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ta-accent);
}

.pricing-tier.featured h3 {
  padding-right: 6rem;
}

/* ==========================================================================
   PARITY B12 — commerce & billing blocks (shop, charge-composer,
   billing-summary, link-cta rework). This file is B12's owner.
   ========================================================================== */

/* ---- Shared control tokens ported from the reference (app.css) ------------
 * `--h-control` (34px) governs every control height; `--h-control-sm` (22px)
 * is the chip scale. `--glass-fill` is the glass surface at the "well" step
 * (the reference's buttons/steppers sit on it). Additive tokens — used by the
 * charge-composer and the shop's controls via `h-(--h-control)` etc. */
:root {
  --h-control: 34px;
  --h-control-sm: 22px;
  --glass-fill: oklch(1 0 0 / 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --glass-fill: oklch(0.3 0.016 262 / 0.42);
  }
}

:root[data-theme="dark"] {
  --glass-fill: oklch(0.3 0.016 262 / 0.42);
}

/* ---- The reference's lit primary surface (`.accent-grad`, app.css) ---------
 * The ONE saturated fill: a gradient from a lighter stop down to the accent,
 * with an inner light catch + accent-tinted lift. Uses the app's own accent
 * token so per-tenant hue flows through. */
.accent-grad {
  background-color: var(--ta-accent);
  background-image: linear-gradient(
    180deg,
    color-mix(in oklab, var(--ta-accent) 86%, white) 0%,
    var(--ta-accent) 100%
  );
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.25),
    0 4px 12px -2px color-mix(in oklab, var(--ta-accent) 35%, transparent);
}

.accent-grad:hover {
  background-image: linear-gradient(
    180deg,
    color-mix(in oklab, var(--ta-accent) 74%, white) 0%,
    color-mix(in oklab, var(--ta-accent) 92%, white) 100%
  );
}

/* ---- The reference's in-panel field (`.glass-field`, app.css) --------------
 * A solid well with a hairline; focus is the one place box-shadow is allowed. */
.glass-field {
  border: 1px solid var(--ta-border-strong);
  background-color: var(--ta-surface);
  transition:
    border-color 140ms ease-out,
    box-shadow 140ms ease-out,
    background-color 140ms ease-out;
}

.glass-field:focus {
  border-color: color-mix(in oklab, var(--ta-accent) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ta-accent) 18%, transparent);
  outline: none;
}

/* ---- Panel-frame blocks (link-cta, charge-composer, billing-summary) ------
 * These compose `.glass-card` for the MATERIAL but own their box — a card pane
 * is padding-free (the header rule reaches the pane's edges) and sits on the
 * card radius step. Element+class beats the single-class utility regardless of
 * stylesheet order (see the gauge pattern in dashboard.css). */
section.link-cta,
div.charge-composer,
div.billing-summary {
  padding: 0;
  border-radius: var(--ta-r-xl);
  overflow: hidden;
  flex-shrink: 0;
}

/* ---- The storefront product card (the reference's `<ProductCard>`) --------
 * `glass-card` gives the pane material; the card's own body pads itself, so the
 * pane padding is zeroed. The card root is `role="button"`, which the app's
 * global `[role=button]` base (buttons.css §6) would otherwise turn into an
 * inline-flex control — restore the reference's flex-col card face (16px/400,
 * radius-xl, no gap, no justify). */
div.shop-card {
  padding: 0;
  border-radius: var(--ta-r-xl);
  display: flex;
  flex-direction: column;
  /* the global `[role=button]` base centres children; the reference card's
     photo well must stretch full width so its aspect-[4/3] sizes the tile. */
  align-items: stretch;
  gap: normal;
  justify-content: normal;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

div.shop-card h3 {
  /* the reference's `leading-snug` (1.375) — the unlayered text-label above
     sets lh 1.3, so restore the snug step for the card title. */
  line-height: 1.375;
}

/* the photo well's `bg-muted`: the reference's muted is a translucent dark
   tint (oklch 0.3/0.05), not the app's solid surface-2. */
div.shop-card .aspect-\[4\/3\] {
  background-color: oklch(0.3 0.015 260 / 0.05);
}

/* ---- The shop's heading -----------------------------------------------
 * The app's base `h1` (clamp 2rem→3rem, 650) beats the reference's layered
 * `text-3xl font-semibold tracking-tight`; restore the reference's 30px/600
 * hero. Scoped to the storefront's negative-margin wrapper. */
.\-mx-4 h1 {
  font-size: 1.875rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ta-text);
}

/* ---- The shop's category pills -------------------------------------------
 * The reference's pill buttons render at the default 16px — `cn()` (tailwind-
 * merge) drops `text-label` as a text-colour conflict when `text-background` /
 * `text-muted-foreground` join the class list. Match the rendered output. The
 * colours come from the pill's own utilities (`text-background` / muted). */
.\-mx-4 .h-11 span {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

/* ---- The shop's search input -------------------------------------------
 * The app's global `input` rule (forms.css) gives every field a border/well;
 * the reference's search input is transparent inside its box (`bg-transparent
 * py-2 sm:text-sm`). Restore it, scoped to the storefront. */
.\-mx-4 input {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--ta-text);
}

.\-mx-4 input:focus {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}

/* ---- The shop's sort control -------------------------------------------
 * The reference's OptionSelect chip on a native select. */
.\-mx-4 select {
  height: var(--h-control);
  border: 1px solid var(--ta-border);
  border-radius: var(--ta-r);
  background: var(--ta-surface);
  color: var(--ta-text);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  padding: 0 0.625rem;
}

/* ---- The shop's sort control + pills --------------------------------------
 * The reference's `OptionSelect` chip: rounded, hairline, surface fill. */
.shop .sort-select {
  border-color: var(--ta-border);
}

/* ==========================================================================
   B12 — cascade fixes for the reference's Tailwind vocabulary.
   --------------------------------------------------------------------------
   The app's base.css headings (`h2`, `h3`) and its global `button {}` base
   (buttons.css §6) are UNLAYERED rules, so they beat the reference's utility
   classes, which Tailwind compiles into a CSS `@layer`. The reference's
   `text-*` utility classes and its button faces must therefore be re-declared
   UNLAYERED here to win the cascade. Values are the reference's own.
   ========================================================================== */

/* The reference's text utilities, unlayered (the tailwind bundle also carries
   them via @utility — these win because unlayered beats layered). */
.text-headline {
  font-size: 1.0625rem;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.014em;
}

.text-label {
  font-size: 0.8125rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0;
}

.text-caption {
  font-size: 0.75rem;
  line-height: 1.3;
  font-weight: 400;
}

.text-data {
  font-family: var(--ta-mono);
  font-size: 0.875rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.text-data-lg {
  font-family: var(--ta-mono);
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.text-mono-label {
  font-family: var(--ta-mono);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ta-muted);
  font-variant-numeric: tabular-nums;
}

/* The reference's button faces, unlayered. Each restores exactly what the
   reference's classes declared before the global `button {}` base stomped
   them (font-size, weight, gap, radius, border, padding, display). */

/* link-cta — the copy-link button: `rounded-md border px-4 py-2 text-sm
   font-medium text-muted-foreground` (a raw <button>, display block in the
   reference because no flex utility is present). */
section.link-cta button {
  display: block;
  gap: normal;
  justify-content: normal;
  padding: 0.5rem 1rem;
  border: 1px solid var(--ta-border);
  border-radius: var(--ta-r);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--ta-muted);
  background: transparent;
  white-space: nowrap;
}

/* shop — the storefront's add-to-basket button (Button secondary/icon,
   `size-9`): a 36px square on the reference's secondary surface — a subtle
   dark tint (oklch 0.3/0.06), not the app's solid surface-2. */
div.shop-card button {
  width: 2.25rem;
  height: 2.25rem;
  /* !important: the app's unlayered `button`/`[role=button]` base (buttons.css)
     still reports a block-level flex box over this higher-specificity rule for
     reasons we couldn't isolate; the reference face is inline-flex. */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--ta-r);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  background: oklch(0.3 0.015 260 / 0.06);
  color: var(--ta-text);
  flex-shrink: 0;
  white-space: nowrap;
}

/* charge-composer — the ± quantity buttons on a breakdown line:
   `flex size-5 rounded-sm border bg-(--glass-fill)`. */
div.charge-composer li button {
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: normal;
  padding: 0;
  border: 1px solid var(--ta-border);
  border-radius: var(--ta-r-sm);
  font-size: inherit;
  font-weight: 400;
  line-height: 1;
  background: var(--glass-fill);
  color: inherit;
  white-space: normal;
}

/* charge-composer — the accent "+" add-charge button (`.accent-grad.flex`
   is the plus button — the preview link is `accent-grad inline-flex`):
   `accent-grad flex size-(--h-control-sm) rounded-md text-primary-foreground`.
   The reference button carries no font class, so it is 16px/400 with the
   default 1.5 line-height and no border. */
div.charge-composer .accent-grad.flex {
  width: var(--h-control-sm);
  height: var(--h-control-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: normal;
  padding: 0;
  border: 0;
  border-radius: var(--ta-r);
  font-size: inherit;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  white-space: normal;
}

/* charge-composer — the two custom-charge fields (`glass-field
   h-(--h-control-sm) … text-sm`): the app's global `input` rule (forms.css)
   would pad them to the control height with a 0.95rem font; restore the
   reference's 22px chips at 14px/20px with 12px side padding. */
div.charge-composer input {
  height: var(--h-control-sm);
  padding: 0 0.75rem;
  border-radius: var(--ta-r);
  font-size: 0.875rem;
  line-height: 1.25rem;
  background: var(--ta-surface);
  /* the global forms.css input rule forces width:100%, which fights the
     reference's flex-1 name field and w-24 amount field. */
  width: auto;
}

/* the amount field is `font-mono` + `w-24` in the reference; the global input
   `font: inherit` would reset it to the sans face, and the layered `w-24`
   loses to the unlayered width:auto above. */
div.charge-composer input.font-mono {
  width: 6rem;
  font-family: var(--ta-mono);
}

/* charge-composer — the "£1,875.00 due" badge. The reference builds it with
   `cn(...)` which drops `text-caption` (treated as a text-colour) when
   `text-muted-foreground` joins the list, so it renders at the default
   16px/400. Match that. */
div.charge-composer .rounded-full {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
}

/* the breakdown's amount figure carries `text-data … text-xs`: in the
   reference the `text-xs` step wins (12px/16px). */
div.charge-composer li span.text-data {
  font-size: 0.75rem;
  line-height: 1rem;
}

/* charge/billing — the app's base `li { line-height: 1.55 }` beats the
   reference's default 1.5 (and text-xs's 16px on the payments row). */
div.charge-composer li,
div.billing-summary li.enter-rise {
  line-height: 1.5;
}

div.billing-summary li.text-xs {
  line-height: 1rem;
}

/* charge-composer — the "Copy payment link" button (`button.inline-flex` is
   the only inline-flex button on the card):
   `inline-flex h-(--h-control) items-center gap-2 rounded-md border
   bg-(--glass-fill) px-4 text-sm font-medium`. */
div.charge-composer button.inline-flex {
  display: inline-flex;
  align-items: center;
  justify-content: normal;
  gap: 0.5rem;
  height: var(--h-control);
  padding: 0 1rem;
  border: 1px solid var(--ta-border);
  border-radius: var(--ta-r);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  background: var(--glass-fill);
  color: inherit;
  white-space: nowrap;
}