/* Bhakti House console skin ("My BHIO").
   Loaded globally from App.razor but scoped entirely to `.console`, so the public
   marketing site is untouched by every rule in this file.

   How it works: CSS custom properties inherit. Redeclaring the tokens from
   bhio-ui/css/tokens.css on `.console` re-skins every brand.css class inside that
   subtree without touching a single line of markup, which is what lets the whole
   admin area change look by swapping one @layout line.

   What that does NOT cover, and the reason the second half of this file exists:
   Bootstrap 5.3 compiles literal hex into its component classes
   (.btn-primary sets --bs-btn-bg:#0d6efd, .form-control:focus hardcodes #86b7fe).
   tokens.css sets --bs-primary and nothing in Bootstrap reads it. Those components
   must be overridden explicitly or they stay Bootstrap blue.

   Palette: near-black on white, a neutral gray ramp, brand purple as the single
   accent. Load order: bootstrap -> tokens -> brand -> console -> scoped page css. */

.console {
  /* ---- Private ramp. Not for use outside this file; the mappings below are the API. ---- */
  --n-0:   #ffffff;
  --n-25:  #fcfcfd;
  --n-50:  #f8f9fa;
  --n-100: #f1f3f5;
  --n-200: #e9ecef;
  --n-300: #dee2e6;
  --n-400: #ced4da;
  --n-500: #adb5bd;
  --n-600: #6c757d;
  --n-700: #495057;
  --n-800: #343a40;
  --n-900: #1a1d20;
  --n-950: #0b0c0d;

  --a-500: #55185D;
  --a-600: #431349;
  --a-700: #290849;
  --a-tint: rgba(85, 24, 93, 0.08);
  --a-ring: rgba(85, 24, 93, 0.25);

  --sem-danger:  #b42318;
  --sem-success: #067647;
  --sem-warning: #b54708;
  --sem-info:    #175cd3;

  /* ================================================================
     Token overrides - these re-skin brand.css by inheritance
     ================================================================ */

  /* Raw brand palette. Gold becomes purple: the console has one accent, not two. */
  --purple-900: var(--a-700);
  --purple-700: var(--a-500);
  --gold-600: var(--a-500);
  --yellow-400: var(--a-600);

  /* Warm surfaces flatten to the neutral ramp. */
  --sand-300: var(--n-100);
  --cream-200: var(--n-50);
  --cream-100: var(--n-0);
  --cream-50: var(--n-0);
  --cream-0: var(--n-0);
  --lavender-50: var(--n-25);

  --ink-900: var(--n-950);
  --ink-700: var(--n-800);
  --ink-600: var(--n-900);
  --ink-500: var(--n-600);
  --ink-400: var(--n-600);
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, 0.85);

  --line-purple: var(--n-200);
  --line-gold: var(--n-200);
  --line-neutral: var(--n-200);

  --brand-primary: var(--a-500);
  --brand-primary-strong: var(--a-700);
  --brand-accent: var(--a-500);
  --brand-accent-bright: var(--a-600);

  --surface-page: var(--n-0);
  --surface-page-alt: var(--n-50);
  --surface-card: var(--n-0);
  --surface-well: var(--n-50);
  --surface-hero: var(--n-50);
  --surface-invert: var(--n-950);

  --text-heading: var(--n-950);
  --text-body: var(--n-900);
  --text-muted: var(--n-600);
  --text-link: var(--a-500);
  --text-on-invert: #ffffff;

  --border-accent: var(--a-500);
  --divider: var(--n-200);

  /* Gradients go flat. A console does not need a gradient. */
  --grad-gold: var(--a-500);
  --grad-purple: var(--n-950);
  --tint-accent-soft: var(--a-tint);

  /* ---- Typography: one family, a tighter scale than the marketing site ---- */
  --font-display: var(--font-body);

  --text-hero: 2rem;
  --text-display: 1.875rem;
  --text-h1: 1.75rem;
  --text-h2: 1.375rem;
  --text-h3: 1.125rem;
  --text-h4: 1rem;

  --text-lead: 1.05rem;
  --text-base: 0.95rem;
  --text-sm: 0.875rem;
  --text-xs: 0.8125rem;

  --lh-body: 1.6;
  --lh-ui: 1.5;

  --section-pad-y: 1.5rem;
  --section-pad-y-lg: 2rem;
  --content-max: 42rem;

  /* ---- Effects: square-ish corners, hairlines instead of shadows, no motion ---- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-3xl: 12px;
  /* Every gold pill in brand.css gets its shape from this. 6px turns them all into
     standard rectangular buttons without touching a single rule. */
  --radius-pill: 6px;

  --border-card: 1px solid var(--n-200);

  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 4px 12px rgba(11, 12, 13, 0.08);
  --shadow-xl: 0 12px 32px rgba(11, 12, 13, 0.12);
  --shadow-purple: none;
  --shadow-gold: none;
  --shadow-card: none;
  --shadow-card-hover: none;
  --shadow-divider: none;
  --shadow-brand-btn: none;
  --shadow-brand-btn-hover: none;
  --shadow-brand-soft: none;
  --shadow-accent-tint: none;
  --shadow-social-hover: none;
  --text-shadow-mantra: none;

  /* Cards and buttons do not move under the cursor in a console. */
  --lift-hover: none;
  --lift-card: none;

  /* ================================================================
     Bootstrap bridge. These ARE read by Bootstrap 5.3.
     ================================================================ */
  --bs-body-bg: var(--n-0);
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: var(--n-900);
  --bs-body-color-rgb: 26, 29, 32;
  --bs-emphasis-color: var(--n-950);
  --bs-emphasis-color-rgb: 11, 12, 13;
  --bs-secondary-color: var(--n-600);
  --bs-secondary-bg: var(--n-100);
  --bs-tertiary-color: var(--n-600);
  --bs-tertiary-bg: var(--n-50);
  --bs-heading-color: var(--n-950);
  --bs-border-color: var(--n-200);
  --bs-border-color-translucent: var(--n-200);

  --bs-link-color: var(--a-500);
  --bs-link-color-rgb: 85, 24, 93;
  --bs-link-hover-color: var(--a-700);

  --bs-primary: var(--a-500);
  --bs-primary-rgb: 85, 24, 93;
  --bs-secondary: var(--n-600);
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success: var(--sem-success);
  --bs-success-rgb: 6, 118, 71;
  --bs-danger: var(--sem-danger);
  --bs-danger-rgb: 180, 35, 24;
  --bs-warning: var(--sem-warning);
  --bs-warning-rgb: 181, 71, 8;
  --bs-info: var(--sem-info);
  --bs-info-rgb: 23, 92, 211;

  /* Alerts and badges resolve through the -subtle trio. */
  --bs-primary-text-emphasis: var(--a-700);
  --bs-primary-bg-subtle: var(--a-tint);
  --bs-primary-border-subtle: rgba(85, 24, 93, 0.25);
  --bs-success-text-emphasis: #054f31;
  --bs-success-bg-subtle: #ecfdf3;
  --bs-success-border-subtle: #abefc6;
  --bs-danger-text-emphasis: #912018;
  --bs-danger-bg-subtle: #fef3f2;
  --bs-danger-border-subtle: #fecdca;
  --bs-warning-text-emphasis: #93370d;
  --bs-warning-bg-subtle: #fffaeb;
  --bs-warning-border-subtle: #fedf89;
  --bs-info-text-emphasis: #124ea8;
  --bs-info-bg-subtle: #eff8ff;
  --bs-info-border-subtle: #b2ddff;
  --bs-secondary-bg-subtle: var(--n-50);
  --bs-secondary-border-subtle: var(--n-200);

  --bs-focus-ring-color: var(--a-ring);

  /* Shell geometry. Exposed as tokens because page-level fixed/sticky elements have to
     offset against the topbar and sidebar - see the block at the end of this file. */
  --console-topbar-h: 56px;
  --console-sidebar-w: 15rem;

  /* ---- The shell paints itself: body is outside .console and keeps the public theme ---- */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--n-0);
  color: var(--n-900);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-ui);
}

.console h1, .console h2, .console h3,
.console h4, .console h5, .console h6 {
  font-family: var(--font-body);
  color: var(--n-950);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}

.console a { text-decoration: none; }
.console a:hover { text-decoration: underline; }

/* ================================================================
   Bootstrap components that hardcode hex and cannot inherit
   ================================================================ */

.console .btn {
  --bs-btn-font-size: var(--text-sm);
  --bs-btn-font-weight: var(--fw-medium);
  --bs-btn-border-radius: var(--radius-md);
  --bs-btn-padding-y: 0.4375rem;
  --bs-btn-padding-x: 0.875rem;
}

.console .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--a-500);
  --bs-btn-border-color: var(--a-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--a-600);
  --bs-btn-hover-border-color: var(--a-600);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--a-700);
  --bs-btn-active-border-color: var(--a-700);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--a-500);
  --bs-btn-disabled-border-color: var(--a-500);
  --bs-btn-focus-shadow-rgb: 85, 24, 93;
}

.console .btn-outline-primary {
  --bs-btn-color: var(--a-500);
  --bs-btn-border-color: var(--a-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--a-500);
  --bs-btn-hover-border-color: var(--a-500);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--a-600);
  --bs-btn-active-border-color: var(--a-600);
  --bs-btn-disabled-color: var(--n-500);
  --bs-btn-disabled-border-color: var(--n-300);
  --bs-btn-focus-shadow-rgb: 85, 24, 93;
}

.console .btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--n-700);
  --bs-btn-border-color: var(--n-700);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--n-800);
  --bs-btn-hover-border-color: var(--n-800);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--n-900);
  --bs-btn-active-border-color: var(--n-900);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--n-500);
  --bs-btn-disabled-border-color: var(--n-500);
  --bs-btn-focus-shadow-rgb: 73, 80, 87;
}

/* The workhorse: 66 usages across the admin area. A white button with a hairline
   border, which is what a secondary action should look like beside a purple primary. */
.console .btn-outline-secondary {
  --bs-btn-color: var(--n-900);
  --bs-btn-bg: var(--n-0);
  --bs-btn-border-color: var(--n-300);
  --bs-btn-hover-color: var(--n-950);
  --bs-btn-hover-bg: var(--n-50);
  --bs-btn-hover-border-color: var(--n-400);
  --bs-btn-active-color: var(--n-950);
  --bs-btn-active-bg: var(--n-100);
  --bs-btn-active-border-color: var(--n-400);
  --bs-btn-disabled-color: var(--n-500);
  --bs-btn-disabled-bg: var(--n-0);
  --bs-btn-disabled-border-color: var(--n-200);
  --bs-btn-focus-shadow-rgb: 73, 80, 87;
}

.console .btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sem-danger);
  --bs-btn-border-color: var(--sem-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #912018;
  --bs-btn-hover-border-color: #912018;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #7a1b14;
  --bs-btn-active-border-color: #7a1b14;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--sem-danger);
  --bs-btn-disabled-border-color: var(--sem-danger);
  --bs-btn-focus-shadow-rgb: 180, 35, 24;
}

.console .btn-outline-danger {
  --bs-btn-color: var(--sem-danger);
  --bs-btn-border-color: #fecdca;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sem-danger);
  --bs-btn-hover-border-color: var(--sem-danger);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #912018;
  --bs-btn-active-border-color: #912018;
  --bs-btn-disabled-color: var(--n-500);
  --bs-btn-disabled-border-color: var(--n-200);
  --bs-btn-focus-shadow-rgb: 180, 35, 24;
}

.console .btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sem-success);
  --bs-btn-border-color: var(--sem-success);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #054f31;
  --bs-btn-hover-border-color: #054f31;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #044229;
  --bs-btn-active-border-color: #044229;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--sem-success);
  --bs-btn-disabled-border-color: var(--sem-success);
  --bs-btn-focus-shadow-rgb: 6, 118, 71;
}

.console .btn-light {
  --bs-btn-color: var(--n-900);
  --bs-btn-bg: var(--n-50);
  --bs-btn-border-color: var(--n-200);
  --bs-btn-hover-color: var(--n-950);
  --bs-btn-hover-bg: var(--n-100);
  --bs-btn-hover-border-color: var(--n-300);
}

/* Forms: the focus ring and the checked box are literal #86b7fe / #0d6efd. */
.console .form-control,
.console .form-select {
  border-color: var(--n-300);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  padding: 0.4375rem 0.75rem;
  color: var(--n-900);
}

.console .form-control::placeholder { color: var(--n-500); }

.console .form-control:focus,
.console .form-select:focus,
.console .form-check-input:focus {
  border-color: var(--a-500);
  box-shadow: 0 0 0 3px var(--a-ring);
}

.console .form-check-input:checked {
  background-color: var(--a-500);
  border-color: var(--a-500);
}

.console .form-check-input { border-color: var(--n-400); }

.console .form-label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--n-800);
  margin-bottom: 0.3125rem;
}

.console .form-control:disabled,
.console .form-select:disabled {
  background-color: var(--n-50);
  color: var(--n-600);
}

.console .form-floating > label { color: var(--n-600); }

.console .text-danger { color: var(--sem-danger) !important; }
.console .validation-message { color: var(--sem-danger); font-size: var(--text-xs); }

.console .table {
  --bs-table-border-color: var(--n-200);
  font-size: var(--text-sm);
}

.console .table > thead th {
  font-weight: var(--fw-semibold);
  color: var(--n-700);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.console .alert {
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  padding: 0.75rem 1rem;
}

.console .badge { font-weight: var(--fw-medium); }

.console .nav-tabs {
  --bs-nav-tabs-link-active-color: var(--a-500);
  --bs-nav-tabs-link-active-border-color: var(--n-200) var(--n-200) var(--n-0);
}

.console .modal-content {
  border-radius: var(--radius-lg);
  border: 1px solid var(--n-200);
}

/* ================================================================
   brand.css classes that need more than a token swap
   ================================================================ */

/* .card-brand is the most-used brand class in the admin area (42 usages).
   Flatten it: hairline border, no shadow, no lift, tighter padding. */
.console .card-brand,
.console .card-brand-topline,
.console .card-brand-outline,
.console .card-brand-well,
.console .card-brand-feature {
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: 1.25rem;
  transition: border-color var(--dur-fast) ease;
}

.console .card-brand:hover,
.console .card-brand-topline:hover,
.console .card-brand-outline:hover,
.console .card-brand-well:hover,
.console .card-brand-feature:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--n-300);
}

.console .card-brand-well { background: var(--n-50); }

.console .card-brand-dark {
  background: var(--n-950);
  border: 1px solid var(--n-950);
  color: #fff;
}

.console .card-brand-title {
  font-family: var(--font-body);
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  color: var(--n-950);
}

.console .card-brand-text {
  font-size: var(--text-sm);
  color: var(--n-600);
  line-height: var(--lh-ui);
}

/* The gold gradient on .btn-brand flattens to purple via --grad-gold, but its :hover
   swaps to background:--brand-primary-strong / color:--brand-accent, which in this
   palette is purple text on purple. Override both states explicitly. */
.console .btn-brand,
.console .btn-brand-lg,
.console .btn-brand-sm,
.console .btn-brand-dark {
  background: var(--a-500);
  color: #fff;
  border: 1px solid var(--a-500);
  box-shadow: none;
  font-weight: var(--fw-medium);
}

.console .btn-brand:hover,
.console .btn-brand-lg:hover,
.console .btn-brand-sm:hover,
.console .btn-brand-dark:hover {
  background: var(--a-600);
  border-color: var(--a-600);
  color: #fff;
  transform: none;
  box-shadow: none;
}

.console .btn-brand-outline,
.console .btn-brand-outline-dark {
  background: var(--n-0);
  color: var(--n-900);
  border: 1px solid var(--n-300);
  box-shadow: none;
}

.console .btn-brand-outline:hover,
.console .btn-brand-outline-dark:hover {
  background: var(--n-50);
  border-color: var(--n-400);
  color: var(--n-950);
  transform: none;
}

/* IconCircle (10 usages, all on the dashboard) fills with --grad-gold and draws its
   glyph in --brand-primary-strong: purple on purple once the tokens swap. */
.console .icon-circle,
.console .icon-circle-sm,
.console .icon-circle-lg {
  background: var(--a-tint);
  color: var(--a-500);
  box-shadow: none;
}

/* The gold underline bar under SectionHeading reads as decoration here. */
.console .section-heading {
  font-family: var(--font-body);
  font-size: var(--text-h2);
  font-weight: var(--fw-semibold);
  color: var(--n-950);
}

.console .section-heading::after { display: none; }

.console .page-header {
  background: transparent;
  border-bottom: 1px solid var(--n-200);
  padding: 0 0 1rem;
}

.console .section-divider { display: none; }

.console .callout {
  background: var(--n-50);
  border-left: 3px solid var(--a-500);
  border-radius: var(--radius-md);
  padding: 1rem;
}

.console .gold-link,
.console .text-gold { color: var(--a-500); }

/* Focus visibility: brand.css sets a 3px gold outline. Keep the behaviour, change the hue. */
.console :focus-visible {
  outline: 2px solid var(--a-500);
  outline-offset: 2px;
}

/* ================================================================
   Page elements that must offset against the shell

   These pages were written for the old full-width top-nav layout, where a fixed bar at
   left:0 and a sticky banner at top:0 were both correct. Under the sidebar shell they
   would slide beneath the sidebar and beneath the topbar respectively. The selectors are
   global on purpose: the elements carry a Blazor scope attribute, but they still carry
   their class, so a global rule matches. Both are phone-first screens, so the sidebar
   offset applies only from lg up, where the drawer becomes a column.
   ================================================================ */

.console .position-banner {
  top: var(--console-topbar-h);
}

@media (min-width: 992px) {
  .console .cart-bar {
    left: var(--console-sidebar-w);
  }
}

/* brand.css insets the DataGrid search field to clear its magnifier icon
   (.data-grid-search .form-control { padding-left: 2.4rem }). The generic form-control
   padding above matches at the same specificity and loads later, so it would undo that
   and drop the icon on top of the placeholder. Restore it at higher specificity. */
.console .data-grid-search .form-control {
  padding-left: 2.4rem;
}

/* ================================================================
   The giving store

   Global rather than scoped, because these classes are shared across the store pages and the
   StoreCard component - scoped CSS would stamp each page separately and the card would fall
   outside its parent page scope. Everything resolves from the .console tokens above.
   ================================================================ */

.store-hero {
  margin-bottom: 2rem;
}

.store-title {
  font-size: 1.75rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

.store-lead {
  color: var(--n-600);
  max-width: 44rem;
  margin: 0;
}

.store-section-heading {
  font-size: 1.0625rem;
  font-weight: 650;
  margin: 0 0 1rem;
}

/* ---- Search ---- */
.store-search {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.store-search-field {
  position: relative;
  flex: 1 1 auto;
  max-width: 26rem;
}

.store-search-field > i {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--n-500);
  font-size: 0.875rem;
  pointer-events: none;
}

.store-search-field .form-control {
  padding-left: 2.375rem;
}

/* ---- Shelves ---- */
.store-shelves {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.store-shelf {
  display: inline-flex;
  align-items: center;
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--n-200);
  border-radius: 999px;
  background: var(--n-0);
  color: var(--n-700);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}

.store-shelf:hover {
  border-color: var(--n-400);
  color: var(--n-950);
  text-decoration: none;
}

.store-shelf.active {
  background: var(--a-500);
  border-color: var(--a-500);
  color: #fff;
}

.store-shelf-count {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  opacity: 0.7;
}

/* ---- Product grid ---- */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.25rem;
}

.store-grid-featured {
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.store-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--n-0);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.store-card:hover {
  border-color: var(--n-400);
  box-shadow: 0 4px 12px rgba(11, 12, 13, 0.06);
  text-decoration: none;
}

.store-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--n-50);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.store-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-card-icon {
  font-size: 2rem;
  color: var(--a-500);
  opacity: 0.5;
}

.store-card-tag {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-sm);
  background: rgba(11, 12, 13, 0.75);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.store-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1rem;
}

.store-card-category {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--n-500);
  margin-bottom: 0.25rem;
}

.store-card-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.375rem;
  color: var(--n-950);
}

.store-card-blurb {
  font-size: 0.875rem;
  color: var(--n-600);
  margin: 0 0 1rem;
  line-height: 1.45;
}

.store-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
}

.store-card-price {
  font-weight: 650;
  color: var(--n-950);
}

.store-card-price-note {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--n-500);
}

.store-card-cta {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--a-500);
  white-space: nowrap;
}

/* ---- Item detail ---- */
.store-back {
  font-size: 0.875rem;
  color: var(--n-600);
  text-decoration: none;
}

.store-detail {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

.store-detail-media {
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--n-50);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.store-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-detail-icon {
  font-size: 3.5rem;
  color: var(--a-500);
  opacity: 0.45;
}

.store-detail-title {
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

.store-detail-blurb {
  color: var(--n-600);
  margin-bottom: 1rem;
}

.store-detail-text {
  color: var(--n-700);
  line-height: 1.6;
}

.store-buy {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  background: var(--n-25);
}

/* ---- Give any amount ----
   The shortcut past the shelves, and the first thing on the storefront. Tinted rather than
   outlined so it reads as the action on a page otherwise made of cards. */
.store-cta {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid var(--a-ring);
  border-radius: var(--radius-lg);
  background: var(--a-tint);
}

.store-cta-title {
  font-size: 1.125rem;
  font-weight: 650;
  margin: 0;
}

.store-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.store-cta-button {
  white-space: nowrap;
}

/* ---- Amount presets ----
   Links, not script: the store works with JavaScript off, so filling in the box costs a round
   trip. Sized as proper touch targets - this is the row most gifts are chosen from. */
.store-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.store-amount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--n-300);
  border-radius: 999px;
  background: var(--n-0);
  color: var(--n-800);
  font-weight: 600;
  text-decoration: none;
}

.store-amount:hover {
  border-color: var(--a-500);
  color: var(--a-500);
  text-decoration: none;
}

.store-amount.active {
  background: var(--a-500);
  border-color: var(--a-500);
  color: #fff;
}

/* ---- The giving form on its own page ---- */
.store-give-page {
  max-width: 34rem;
  margin: 0 auto;
}

/* ---- Thank you ---- */
.store-thanks {
  max-width: 34rem;
  margin: 2rem auto;
  text-align: center;
}

.store-thanks-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--a-tint);
  color: var(--a-500);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.store-thanks-offer {
  margin-top: 2rem;
  padding: 1.25rem;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  background: var(--n-25);
  text-align: left;
}

@media (min-width: 768px) {
  .store-detail {
    grid-template-columns: 5fr 6fr;
    align-items: start;
  }

  .store-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }

  .store-cta-actions {
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
  }

  /* The presets sit beside the button here, so the stacked spacing would double up. */
  .store-cta-actions .store-amounts {
    margin-bottom: 0;
  }

  .store-title {
    font-size: 2rem;
  }
}

/* ================================================================
   The console/store top bar

   Global rather than scoped because two layouts share it - ConsoleLayout for the
   portal and StoreLayout for the giving store. Blazor scoped CSS stamps only the
   component that declares it, so a scoped copy would style one and not the other.
   ================================================================ */

.console-burger {
    background: none;
    border: none;
    color: var(--text-body);
    font-size: 1.125rem;
    padding: 0.25rem 0.5rem;
    margin-left: -0.5rem;
    border-radius: var(--radius-md);
}

.console-burger:hover {
    background: var(--surface-well);
}

.console-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    min-width: 0;
}

.console-brand:hover {
    text-decoration: none;
}

.console-logo {
    height: 28px;
    width: auto;
}

.console-wordmark {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-heading);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.console-topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.console-topbar-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-decoration: none;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-md);
}

.console-topbar-link:hover {
    color: var(--text-body);
    background: var(--surface-well);
    text-decoration: none;
}

.console-user {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 1px solid var(--divider);
    border-radius: var(--radius-md);
    padding: 0.3125rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--text-body);
    max-width: 16rem;
}

.console-user:hover {
    background: var(--surface-well);
}

.console-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.console-user-caret {
    font-size: 0.625rem;
    color: var(--text-muted);
}

.console-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: var(--console-topbar-h);
    padding: 0 1rem;
    background: var(--surface-page);
    border-bottom: 1px solid var(--divider);
}