/* AVYENO custom styling on top of Bootstrap 5.
 * Reads tokens from _tokens.css — no literal colours or fonts in this file.
 */

body {
  background: var(--avyeno-white);
  color: var(--avyeno-black);
  font-family: var(--avyeno-font-body);
}

/* Navigation */

.avyeno-nav {
  border-bottom: 1px solid var(--avyeno-line);
}

.avyeno-wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* A wordmark this wide leaves little room beside it, so the row wraps rather than
   squashing the links (spec 31.16). */
.avyeno-nav .container {
  flex-wrap: wrap;
  gap: var(--avyeno-space-sm);
}

.avyeno-wordmark img {
  display: block;
  /* Sized by width, not height: this wordmark is five times wider than it is tall (5.4:1,
     against 2.8:1 for the AVYENO one it replaced), so at the old 46px height it rendered
     nearly 250px wide before any navigation. 240px is comfortably legible; the cap keeps it
     out of the way of the links on a narrow screen. */
  width: 240px;
  max-width: 45vw;
  height: auto;
}

.avyeno-nav .nav-link {
  color: var(--avyeno-black);
}

/* The Shop menu (spec 31.32).

   Built on <details>, so it opens and closes with no JavaScript at all. That costs two
   things a scripted dropdown gets for free and both are bought back cheaply: the default
   triangle marker, removed below and replaced with a caret that points the way the menu
   moves; and the panel's place in the layout, which `position: absolute` takes out of the
   flow so the nav does not grow taller when the menu opens. */

.avyeno-menu {
  position: relative;
}

.avyeno-menu__toggle {
  cursor: pointer;
  list-style: none;      /* Firefox */
  user-select: none;
}

.avyeno-menu__toggle::-webkit-details-marker {
  display: none;         /* Safari, which ignores list-style here */
}

.avyeno-menu__toggle::after {
  content: "";
  border-top: 0.3em solid currentColor;
  border-inline: 0.3em solid transparent;
  display: inline-block;
  margin-inline-start: 0.4em;
  vertical-align: 0.15em;
}

.avyeno-menu__panel[open] .avyeno-menu__toggle::after {
  transform: rotate(180deg);
}

.avyeno-menu__list {
  background: var(--avyeno-white);
  border: 1px solid var(--avyeno-line);
  border-radius: var(--avyeno-radius);
  list-style: none;
  margin: 0.35rem 0 0;
  min-width: 11rem;
  padding: 0.35rem 0;
  position: absolute;
  /* Above the page, and above the hero's beige band in particular. */
  z-index: 20;
}

.avyeno-menu__link {
  color: var(--avyeno-black);
  display: block;
  padding: 0.45rem 1rem;
  text-decoration: none;
  white-space: nowrap;
}

.avyeno-menu__link:hover,
.avyeno-menu__link:focus {
  background: var(--avyeno-beige-light);
}

/* Hero */

/* The hero ground is the same beige as the logo file, so the transparent lockup sits on
 * it seamlessly. */
.avyeno-hero {
  background: var(--avyeno-beige);
  padding: var(--avyeno-space-md) var(--avyeno-space-md);
  margin-bottom: var(--avyeno-space-lg);
  text-align: center;
}

.avyeno-hero__logo {
  margin: 0 auto var(--avyeno-space-md);
  max-width: 34rem;
}

.avyeno-hero__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.avyeno-hero .lead {
  color: var(--avyeno-ink-muted);
  margin-bottom: var(--avyeno-space-lg);
}

/* The sentence under a page's heading. Held to a readable measure rather than the full
 * width of the grid below it — a line of text that runs the width of four product cards
 * is hard to track back to the start of. */
.avyeno-intro {
  color: var(--avyeno-ink-muted);
  max-width: 46rem;
  margin-bottom: var(--avyeno-space-md);
}

/* Product cards */

.avyeno-card {
  display: flex;
  flex-direction: column;
  gap: var(--avyeno-space-sm);
  text-decoration: none;
  color: var(--avyeno-black);
}

.avyeno-card__brand {
  font-size: 0.75rem;
  letter-spacing: var(--avyeno-tracking-wide);
  text-transform: uppercase;
  color: var(--avyeno-ink-muted);
}

/* Admin */

.avyeno-admin-nav {
  display: flex;
  flex-direction: column;
  /* Between groups. The gap inside a group is smaller, and that difference is the whole of
     the grouping — no rules, no headings (spec 31.22). */
  gap: var(--avyeno-space-md);
  min-width: 12rem;
}

.avyeno-admin-nav__group {
  display: flex;
  flex-direction: column;
  gap: var(--avyeno-space-sm);
}

.avyeno-admin-nav a {
  color: var(--avyeno-black);
  text-decoration: none;
}

.avyeno-form {
  max-width: 24rem;
  display: flex;
  flex-direction: column;
  gap: var(--avyeno-space-sm);
}

/* Footer */

.avyeno-footer {
  background: var(--avyeno-beige);
  margin-top: var(--avyeno-space-xl);
}

.avyeno-footer__logo {
  display: block;
  height: 54px;
  width: auto;
}

.avyeno-footer a {
  color: var(--avyeno-black);
}

/* A rule under the logo row, so the legal identity reads as a separate register from
   the navigation rather than as one more link (spec 31.13). */
.avyeno-footer__identity {
  border-top: 1px solid var(--avyeno-line);
  color: var(--avyeno-ink-muted);
  font-size: 0.875rem;
  margin-block: var(--avyeno-space-md) 0;
  padding-block-start: var(--avyeno-space-md);
}

.avyeno-footer__separator {
  color: var(--avyeno-line);
  padding-inline: 0.25rem;
}

/* Contact and terms */

.avyeno-contact {
  list-style: none;
  margin-block: var(--avyeno-space-md);
  padding-inline-start: 0;
}

.avyeno-contact__identity dt {
  color: var(--avyeno-ink-muted);
  font-size: 0.875rem;
  font-weight: 400;
}

.avyeno-contact__identity dd {
  margin-block-end: var(--avyeno-space-sm);
}

/* Sections */

.avyeno-section {
  padding-block: var(--avyeno-space-lg);
}

.avyeno-section h2 {
  font-family: var(--avyeno-font-display);
  /* Wider and lighter than the rest of the interface, to sit with the logo rather than
     beside it (spec 31.16). The right padding compensates for the trailing letter's
     tracking, which would otherwise push the heading visually off-centre. */
  letter-spacing: var(--avyeno-tracking-display);
  font-weight: var(--avyeno-weight-display);
  text-transform: uppercase;
  font-size: 1rem;
  margin-bottom: var(--avyeno-space-md);
}

.avyeno-selection-link {
  font-weight: 600;
}

/* Product images */

.avyeno-card__image,
.avyeno-product__image {
  display: block;
  width: 100%;
  /* Landscape rather than portrait (spec 31.26): 4/5 made the image 750px tall in a 600px
     column, which pushed the sizes and the buttons off a laptop screen. Shoes are also
     photographed wide, so a tall frame was cropping the sides off them. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--avyeno-radius);
}

.avyeno-card__image--empty,
.avyeno-product__image--empty {
  background: var(--avyeno-beige);
}

/* Product page */

.avyeno-product__brand a {
  font-size: 0.75rem;
  letter-spacing: var(--avyeno-tracking-wide);
  text-transform: uppercase;
  color: var(--avyeno-ink-muted);
  text-decoration: none;
}

.avyeno-product__price {
  font-size: 1.25rem;
  margin-block: var(--avyeno-space-sm);
}

.avyeno-product__description {
  margin-bottom: var(--avyeno-space-md);
}

/* Size buttons */

.avyeno-sizes {
  border: 0;
  padding: 0;
  margin-block: var(--avyeno-space-md);
}

.avyeno-sizes legend {
  font-size: 0.75rem;
  letter-spacing: var(--avyeno-tracking-wide);
  text-transform: uppercase;
  color: var(--avyeno-ink-muted);
}

/* Sizes as a wrapping grid of tiles rather than one row each (spec 31.25). Fourteen sizes
   were fourteen rows, which pushed the buttons off a phone screen entirely. */

.avyeno-sizes__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: var(--avyeno-space-sm);
}

.avyeno-sizes__chosen {
  text-transform: none;
}

/* Which scale the tiles are in (spec 31.31). Deliberately *not* set like the legend above it:
   two lines of the same tracked-out uppercase read as a heading and a sub-heading competing
   with each other. This is an annotation on the grid, so it is sentence case and quiet. */
.avyeno-sizes__system {
  color: var(--avyeno-ink-muted);
  font-size: 0.8125rem;
  margin-block: 0.25rem 0;
}

.avyeno-size {
  align-items: center;
  background: var(--avyeno-beige-light);
  border: 1px solid transparent;
  border-radius: var(--avyeno-radius);
  cursor: pointer;
  display: inline-flex;
  font-weight: 500;
  justify-content: center;
  min-width: 3.25rem;
  padding: 0.5rem 0.75rem;
}

/* The box is hidden but still focusable and still a checkbox, so the keyboard and assistive
   technology keep working and CSS can read its state. */
.avyeno-size input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

/* Availability is for a screen reader; a sighted reader gets the strikethrough alone, since
   the sentence naming the scarce sizes was dropped (spec 31.31). */
.avyeno-size__status {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.avyeno-size:has(input:checked) {
  background: var(--avyeno-black);
  color: var(--avyeno-white);
}

.avyeno-size:has(input:focus-visible) {
  border-color: var(--avyeno-black);
  outline: 2px solid var(--avyeno-black);
  outline-offset: 2px;
}

.avyeno-size--out {
  /* Far fainter than muted text: the gap between a size that can be chosen and one that
     cannot has to be visible at a glance (spec 31.26). */
  color: var(--avyeno-ink-faint);
  cursor: not-allowed;
  text-decoration: line-through;
}

.avyeno-hint {
  color: var(--avyeno-ink-muted);
  font-size: 0.875rem;
  margin-top: var(--avyeno-space-md);
}

/* Filters */

.avyeno-filters {
  display: flex;
  gap: var(--avyeno-space-md);
  align-items: flex-end;
  margin-block: var(--avyeno-space-md) var(--avyeno-space-lg);
}

.avyeno-filters label {
  font-size: 0.75rem;
  letter-spacing: var(--avyeno-tracking-wide);
  text-transform: uppercase;
  color: var(--avyeno-ink-muted);
}

/* Lists */

.avyeno-selection {
  list-style: none;
  padding: 0;
}

.avyeno-selection li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--avyeno-space-md);
  padding-block: var(--avyeno-space-sm);
  border-bottom: 1px solid var(--avyeno-line);
}

.avyeno-selection__brand,
.avyeno-selection__variant {
  display: block;
  font-size: 0.75rem;
  letter-spacing: var(--avyeno-tracking-wide);
  text-transform: uppercase;
  color: var(--avyeno-ink-muted);
}

.avyeno-selection__name {
  display: block;
  font-weight: 600;
}

.avyeno-event-list,
.avyeno-brand-list,
.avyeno-steps {
  padding-left: 0;
  list-style-position: inside;
}

.avyeno-event-list {
  list-style: none;
}

.avyeno-event-list li,
.avyeno-brand-list li {
  padding-block: var(--avyeno-space-sm);
  border-bottom: 1px solid var(--avyeno-line);
}

/* Brand strip: logos come in wildly different proportions, so each sits in a fixed-height
 * box and is contained rather than cropped. */
.avyeno-brand-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--avyeno-space-lg);
  align-items: center;
}

.avyeno-brand-list li {
  border-bottom: 0;
}

.avyeno-brand-list a {
  color: var(--avyeno-black);
  text-decoration: none;
}

.avyeno-brand-list__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.5rem;
  padding-inline: var(--avyeno-space-sm);
}

.avyeno-brand-list__link img {
  max-height: 100%;
  max-width: 12rem;
  width: auto;
  object-fit: contain;
}

.avyeno-brand-list__name {
  letter-spacing: var(--avyeno-tracking-wide);
  text-transform: uppercase;
  font-size: 0.875rem;
}

/* Brand page */

.avyeno-brand-header {
  margin-bottom: var(--avyeno-space-lg);
}

.avyeno-brand-header__logo {
  display: block;
  max-height: 6rem;
  max-width: 18rem;
  width: auto;
  object-fit: contain;
  margin-bottom: var(--avyeno-space-md);
}

.avyeno-event {
  padding-block: var(--avyeno-space-md);
  border-bottom: 1px solid var(--avyeno-line);
}

/* Reservation page */

.avyeno-reservation__meta dt {
  font-size: 0.75rem;
  letter-spacing: var(--avyeno-tracking-wide);
  text-transform: uppercase;
  color: var(--avyeno-ink-muted);
}

.avyeno-error {
  color: var(--avyeno-error);
  font-size: 0.875rem;
}

/* Admin layout */

.avyeno-admin {
  display: flex;
  gap: var(--avyeno-space-lg);
  align-items: flex-start;
}

.avyeno-admin-main {
  flex: 1 1 auto;
  min-width: 0;
}

.avyeno-admin-nav a.active {
  font-weight: 600;
}

.avyeno-admin-thumb {
  max-width: 8rem;
  border-radius: var(--avyeno-radius);
}

.avyeno-checkbox {
  display: flex;
  align-items: center;
  gap: var(--avyeno-space-sm);
}

.avyeno-stats {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--avyeno-space-lg);
}

.avyeno-stats span {
  display: block;
  font-size: 1.75rem;
  font-weight: 600;
}

/* Wide tables must scroll inside themselves, not push the page sideways. */
.avyeno-admin-main .table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

/* Event sales interface */

.avyeno-sales__size {
  font-weight: 600;
}

/* Packing list */

.avyeno-packing {
  padding-block: var(--avyeno-space-md);
  border-bottom: 1px solid var(--avyeno-line);
}

.avyeno-packing h2 {
  font-size: 1rem;
  letter-spacing: var(--avyeno-tracking-wide);
  text-transform: uppercase;
}

.avyeno-packing ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.avyeno-packing__size {
  display: inline-block;
  min-width: 3rem;
  font-weight: 600;
}

.avyeno-login__logo {
  display: block;
  height: 34px;
  width: auto;
  margin-bottom: var(--avyeno-space-md);
}

/* Language switcher */

.avyeno-languages {
  display: flex;
  align-items: center;
  gap: var(--avyeno-space-sm);
  margin-left: var(--avyeno-space-sm);
  padding-left: var(--avyeno-space-md);
  border-left: 1px solid var(--avyeno-line);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.avyeno-languages__current {
  font-weight: 600;
}

.avyeno-languages__switch {
  border: 0;
  background: none;
  padding: 0;
  color: var(--avyeno-ink-muted);
  text-decoration: underline;
  cursor: pointer;
}

.avyeno-languages__switch:hover {
  color: var(--avyeno-black);
}

/* Product gallery */

.avyeno-thumbs {
  list-style: none;
  padding: 0;
  margin-top: var(--avyeno-space-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--avyeno-space-sm);
}

.avyeno-thumb {
  display: block;
  width: 5.5rem;
  border: 1px solid transparent;
  border-radius: var(--avyeno-radius);
  overflow: hidden;
  cursor: pointer;
}

.avyeno-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.avyeno-thumb--current {
  border-color: var(--avyeno-black);
}

/* Colour selector */

.avyeno-colours {
  border: 0;
  padding: 0;
  margin-block: var(--avyeno-space-md);
}

.avyeno-colours legend {
  font-size: 0.75rem;
  letter-spacing: var(--avyeno-tracking-wide);
  text-transform: uppercase;
  color: var(--avyeno-ink-muted);
}

.avyeno-colours__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--avyeno-space-sm);
}

.avyeno-colour {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--avyeno-line);
  border-radius: var(--avyeno-radius);
  text-decoration: none;
  color: var(--avyeno-black);
}

.avyeno-colour--current {
  border-color: var(--avyeno-black);
  background: var(--avyeno-beige);
  font-weight: 600;
}

.avyeno-colour--out .avyeno-colour__name {
  text-decoration: line-through;
}

.avyeno-colour__status {
  font-size: 0.75rem;
  color: var(--avyeno-ink-muted);
}

/* Admin gallery */

.avyeno-gallery-admin {
  margin-top: var(--avyeno-space-lg);
}

/* Admin colours: one checkbox per colour of a product (spec 31.34). Spaced like the
   gallery beside it, since the two are sections of the same page. */
.avyeno-colours-admin {
  margin-top: var(--avyeno-space-lg);
}

/* The field no customer sees (spec 31.35). Moved off-screen rather than `display: none`
   or `hidden`, both of which a script can read as easily as the browser does — this one is
   a normal, visible, focusable input as far as anything reading the markup can tell. It is
   out of the tab order and hidden from a screen reader by attributes on the field itself.

   **Named for nothing.** A class called `avyeno-honeypot` would tell whoever reads the
   markup exactly which field to leave alone, which is the whole trap given away in the one
   place it is certain to be looked at. The field's own label still says "leave this empty",
   and that is deliberate: it is the fallback for a screen reader that ignores aria-hidden,
   and a script clever enough to read labels is one this was never going to stop. */
.avyeno-form__extra {
  height: 0;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  width: 0;
}

/* Stock set aside by hand (inventory spec 39.18). The row is tinted rather than badged:
   a held line is read as one of a list, and the eye finds a shaded row without being told
   where to look. The beige is the page's own, so this reads as the shop and not a warning. */
.avyeno-held > td {
  background: var(--avyeno-beige-light);
}

/* Room for three digits and no more: this column sits among eleven others, and every
   millimetre it takes is one the product name loses on a laptop. */
.avyeno-set-aside input {
  max-width: 4.5rem;
}

/* A table wider than the space it has scrolls inside its own box rather than running off
   the page, which silently loses whichever column is last. */
.avyeno-table-scroll {
  overflow-x: auto;
}

.avyeno-held-banner {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--avyeno-space-sm);
}

.avyeno-gallery-admin__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--avyeno-space-md);
}

.avyeno-gallery-admin__list li {
  width: 9rem;
}

.avyeno-gallery-admin__list img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--avyeno-radius);
}

.avyeno-gallery-admin__badge {
  display: inline-block;
  font-size: 0.6875rem;
  letter-spacing: var(--avyeno-tracking-wide);
  text-transform: uppercase;
  color: var(--avyeno-ink-muted);
}

.avyeno-gallery-admin__actions {
  display: flex;
  gap: var(--avyeno-space-sm);
}

/* Event sales interface */

.avyeno-sale-line {
  padding-block: var(--avyeno-space-md);
  border-bottom: 1px solid var(--avyeno-line);
}

.avyeno-sale-line h2 {
  font-size: 1rem;
  margin-bottom: var(--avyeno-space-sm);
}

/* Consignment */

.avyeno-consignment {
  padding-block: var(--avyeno-space-md);
  border-bottom: 1px solid var(--avyeno-line);
}

.avyeno-consignment h2 {
  font-size: 1rem;
  letter-spacing: var(--avyeno-tracking-wide);
  text-transform: uppercase;
}

.avyeno-owed {
  font-size: 1.25rem;
  font-weight: 600;
}

/* Stock item detail */

.avyeno-item-state {
  font-size: 1.125rem;
}

.avyeno-item-edit {
  padding-block: var(--avyeno-space-md);
  border-top: 1px solid var(--avyeno-line);
}

.avyeno-item-edit h2 {
  font-size: 1rem;
  letter-spacing: var(--avyeno-tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--avyeno-space-sm);
}

/* Error pages (spec 31.11). Roomy rather than alarming: the status code is small print,
   the sentence that helps is the loudest thing. */
.avyeno-error-page {
  max-width: 34rem;
  padding: var(--avyeno-space-lg) 0;
}

.avyeno-error-page__status {
  font-size: 0.75rem;
  letter-spacing: var(--avyeno-tracking-wide);
  text-transform: uppercase;
  color: var(--avyeno-ink-muted);
  margin-bottom: var(--avyeno-space-sm);
}

.avyeno-error-page__message {
  font-size: 1.125rem;
  margin-bottom: var(--avyeno-space-md);
}

.avyeno-error-page__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--avyeno-space-sm);
  margin-top: var(--avyeno-space-lg);
}

/* Year-by-year sales summary (inventory spec 39.15). Figures on the left, the shape of the
   year on the right, the way the old inventory application laid it out. */
.avyeno-year {
  border-top: 1px solid var(--avyeno-line);
  padding-top: var(--avyeno-space-md);
  margin-top: var(--avyeno-space-lg);
}

.avyeno-year__body {
  display: grid;
  grid-template-columns: minmax(18rem, 22rem) 1fr;
  gap: var(--avyeno-space-lg);
  align-items: start;
}

/* Grid items default to min-width:auto, so a table wider than its track spills under the
   next column — which hid every figure in the left-hand table. */
.avyeno-year__body > * {
  min-width: 0;
}

@media (max-width: 900px) {
  .avyeno-year__body {
    grid-template-columns: 1fr;
  }
}

/* A column heading whose unit matters as much as its name: two lines, quietly. */
.avyeno-th-note {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--avyeno-ink-muted);
}

.avyeno-figures {
  margin: 0;
}

.avyeno-figures__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--avyeno-space-md);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--avyeno-line);
}

.avyeno-figures__row dt {
  font-weight: 400;
  color: var(--avyeno-ink-muted);
}

.avyeno-figures__row dd {
  margin: 0;
  text-align: right;
}

.avyeno-figures__row--total {
  border-bottom-width: 2px;
}

/* A bar chart made of elements rather than a library: it prints, it scales, and a reader
   still gets the numbers because each bar carries its count. */
.avyeno-histogram {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  height: 9rem;
  margin-bottom: var(--avyeno-space-md);
}

.avyeno-histogram__bar {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  min-width: 1.5rem;
}

.avyeno-histogram__fill {
  width: 100%;
  background: var(--avyeno-beige-deep);
  border-top: 1px solid var(--avyeno-line);
  min-height: 2px;
}

.avyeno-histogram__count,
.avyeno-histogram__label {
  font-size: 0.75rem;
  color: var(--avyeno-ink-muted);
  line-height: 1.6;
}

.avyeno-histogram__label {
  border-top: 1px solid var(--avyeno-line);
  width: 100%;
  text-align: center;
}

/* Order totals — the postage arithmetic shown rather than one number to trust
   (online spec 5). */

.avyeno-totals {
  border-top: 1px solid var(--avyeno-line);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--avyeno-space-sm) var(--avyeno-space-md);
  margin-block-start: var(--avyeno-space-md);
  padding-block-start: var(--avyeno-space-md);
}

.avyeno-totals dt {
  color: var(--avyeno-ink-muted);
  font-weight: 400;
}

.avyeno-totals dd {
  margin: 0;
  text-align: right;
}

.avyeno-totals__grand {
  border-top: 1px solid var(--avyeno-line);
  color: var(--avyeno-black);
  font-weight: 600;
  padding-block-start: var(--avyeno-space-sm);
}

/* The pre-payment information a distance seller owes the customer (online spec 12).
   Set apart from the hints around it so it reads as terms rather than as reassurance. */

.avyeno-before-you-pay {
  border-left: 2px solid var(--avyeno-line);
  color: var(--avyeno-ink-muted);
  font-size: 0.9375rem;
  list-style: none;
  margin-block: var(--avyeno-space-md);
  padding-inline-start: var(--avyeno-space-md);
}

.avyeno-before-you-pay li {
  margin-block-end: 0.25rem;
}

.avyeno-form__check {
  align-items: start;
  display: flex;
  gap: 0.5rem;
}

/* Two ways to buy, side by side (spec 31.18). Reserve is primary; they wrap rather than
   shrink on a narrow screen, because a button that has to be aimed at is worse than two
   stacked ones. */

.avyeno-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--avyeno-space-sm);
}

/* The quantity control on the buying basket. A number input and a button, no JavaScript. */

.avyeno-selection__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--avyeno-space-md);
}

.avyeno-quantity {
  align-items: center;
  display: flex;
  gap: var(--avyeno-space-sm);
}

.avyeno-quantity__label {
  align-items: center;
  color: var(--avyeno-ink-muted);
  display: flex;
  font-size: 0.875rem;
  gap: 0.5rem;
}

.avyeno-quantity__input {
  width: 4.5rem;
}

/* A customer's own words, kept as typed: line breaks preserved, and set apart from the
   interface text around it so it reads as a quotation (spec 31.19). */

.avyeno-message {
  white-space: pre-line;
}

/* A product description is written in Markdown now (spec 31.20), so it can contain headings,
   lists and emphasis. Styled tightly to the page rather than left to Bootstrap's defaults,
   which would give a description's h3 the same weight as the product name. */

.avyeno-product__description > :first-child {
  margin-block-start: 0;
}

.avyeno-product__description > :last-child {
  margin-block-end: 0;
}

.avyeno-product__description h3,
.avyeno-product__description h4,
.avyeno-product__description h5,
.avyeno-product__description h6 {
  font-family: var(--avyeno-font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: var(--avyeno-tracking-wide);
  margin-block: var(--avyeno-space-md) var(--avyeno-space-sm);
  text-transform: uppercase;
}

.avyeno-product__description ul,
.avyeno-product__description ol {
  margin-block: var(--avyeno-space-sm);
  padding-inline-start: 1.25rem;
}

.avyeno-product__description li {
  margin-block-end: 0.25rem;
}

.avyeno-product__description blockquote {
  border-inline-start: 2px solid var(--avyeno-line);
  color: var(--avyeno-ink-muted);
  margin-inline: 0;
  padding-inline-start: var(--avyeno-space-md);
}

.avyeno-product__description a {
  color: var(--avyeno-black);
}

/* The editor's preview, which uses the same renderer as the shop. */

.avyeno-preview {
  border: 1px solid var(--avyeno-line);
  margin-block: var(--avyeno-space-md);
  padding: var(--avyeno-space-md);
}

.avyeno-preview__heading {
  color: var(--avyeno-ink-muted);
  font-size: 0.75rem;
  letter-spacing: var(--avyeno-tracking-wide);
  margin-block-start: 0;
  text-transform: uppercase;
}

/* An archived brand is still listed, because this page is where archiving is undone — but it
   is not a live part of the shop, so it recedes (spec 31.23). */

.avyeno-archived td {
  color: var(--avyeno-ink-muted);
}

.avyeno-brand-actions {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--avyeno-space-sm);
}