/*
 * ============================================================================
 * AQUARIUS RECORDS — UNIFIED CSS DESIGN SYSTEM
 * ============================================================================
 *
 * Extracted from all 9 HTML templates:
 *   product-listing.html       — catalogue-genre, catalogue-alphabet, search,
 *                                favorites-staff-member, records-of-the-week
 *   homepage.html              — main landing page
 *   favorites-staff-annual.html — annual staff favorites list (width=450)
 *   new-arrivals.html          — new arrivals issues #51+ (1997–2014 era)
 *   new-arrivals-early.html    — new arrivals issues #1–#50 (1995–1996 era)
 *   favorites-customer-annual.html — annual customer favorites list (width=450)
 *   staff-pick-popup.html      — single-product popup window (500×500)
 *   exhibit-detail.html        — in-store art exhibit pages (width=550)
 *   static-info.html           — about/contact/info pages (width=720)
 *
 * Written by someone who loved their record store and knew HTML really well
 * in 1998. A thoughtful developer in 2026 added just enough to make it
 * responsive and accessible without losing the soul.
 * ============================================================================
 */


/* ============================================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================================
   Every color, font, and spatial value found across all 9 templates.
   ============================================================================ */

:root {

  /* --------------------------------------------------------------------------
     Colors — Page / Body
     body[bgcolor], body[text] attrs shared by all templates.
     -------------------------------------------------------------------------- */
  --color-bg:               #fcffd1; /* Pale yellow — page background, all templates */
  --color-text:             #430104; /* Dark red/maroon — body text, all templates */

  /* --------------------------------------------------------------------------
     Colors — Links
     body[link], body[alink], body[vlink] attrs.
     vlink has two variants: tan/gold for catalogue/favorites,
     plain blue (same as link) for search-results, early-era new arrivals,
     customer-faves, and exhibit pages.
     -------------------------------------------------------------------------- */
  --color-link:             #065ee7; /* Cornflower blue — all templates */
  --color-link-active:      #430104; /* Dark red/maroon — same as text, all templates */
  --color-link-visited:     #cc9966; /* Tan/gold — catalogue, favorites, new-arrivals,
                                        staff-pick-popup, static-info, homepage */
  --color-link-visited-alt: #065ee7; /* Blue — search-results, early new-arrivals,
                                        customer-faves, exhibit-detail */

  /* --------------------------------------------------------------------------
     Colors — Chrome / UI
     -------------------------------------------------------------------------- */
  --color-header-bg:        #6699ff; /* Cornflower blue — header banner, all except
                                        early new-arrivals and static-info */
  --color-header-text:      #000000; /* Inherits; rendered black inside blue banner */
  --color-cart-border:      red;     /* Shopping cart widget border, product-listing */
  --color-out-of-print:     red;     /* Out-of-print badge text, product-listing */
  --color-nav-dark:         #430104; /* Genre nav section links (homepage sidebar) */
  --color-accent-blue:      #0440c0; /* Early new-arrivals header (new-arrivals-early) */
  --color-heading-link:     #065ee7; /* static-info page <font size=+3> heading */

  /* --------------------------------------------------------------------------
     Fonts
     face="Verdana, Arial, Helvetica, sans-serif" is used everywhere styled.
     face="monospace" appears in the sidebar wrapper font in product-listing +
       favorites-staff-annual (outer font tag only — inner font overrides it).
     -------------------------------------------------------------------------- */
  --font-primary:   "Verdana", "Arial", "Helvetica", sans-serif;
  --font-mono:      monospace;       /* Sidebar outer wrapper, product-listing */
  --font-pre:       monospace;       /* <pre> block, new-arrivals-early */

  /* --------------------------------------------------------------------------
     Font Sizes
     Original HTML used relative <font size=N> offsets against the browser
     default (typically 16px). Values below are mapped to px equivalents
     assuming a 16px base, matching the original size= attribute mapping:
       size=-5 → ~8px     size=-3 → ~10px    size=-2 → ~11px
       size=-1 → ~13px    size=+1 → ~19px    size=+2 → ~24px    size=+3 → ~32px
     -------------------------------------------------------------------------- */
  --font-size-xxs:  0.5rem;   /* size=-5  (~8px)  — copyright notice, homepage */
  --font-size-xs:   0.625rem; /* size=-3  (~10px) — website warlord line, homepage */
  --font-size-sm:   0.75rem; /* size=-2  (~12px) — primary body text in listings,
                                                      sidebar nav, review text */
  --font-size-md:   0.8125rem;/* size=-1  (~13px) — secondary text, intro letters,
                                                      tagline, mailorder text */
  --font-size-lg:   1.1875rem;/* size=+1  (~19px) — pagination numbers, search label,
                                                      section sub-headings */
  --font-size-xl:   1.5rem;   /* size=+2  (~24px) — header banner title, page headings */
  --font-size-xxl:  2rem;     /* size=+3  (~32px) — early new-arrivals issue header,
                                                      static-info page heading */

  /* --------------------------------------------------------------------------
     Layout — Fixed Widths
     From width= attributes on outer container tables.
     -------------------------------------------------------------------------- */
  --width-homepage:         720px;  /* homepage, static-info outer wrapper */
  --width-exhibit:          550px;  /* exhibit-detail, new-arrivals-early */
  --width-favorites:        450px;  /* favorites-staff-annual, favorites-customer-annual */
  --width-sidebar-nav:      50px;   /* sidebar nav column in product-listing,
                                       favorites-staff-annual */
  --width-sidebar-spacer:   20px;   /* dot.gif spacer column, product-listing */

  /* --------------------------------------------------------------------------
     Layout — Proportional Widths
     From width=% attributes on left/right table columns.
     -------------------------------------------------------------------------- */
  --width-content-main:     70%;    /* Main content table, product-listing, new-arrivals */
  --width-content-sidebar:  28%;    /* Sidebar table, new-arrivals */
  --width-sidebar-right:    33%;    /* Right sidebar, favorites-staff-annual (cellspacing=15) */

  /* --------------------------------------------------------------------------
     Layout — Sidebar fixed widths (responsive)
     Used by .content-sidebar — fixed pixel widths per breakpoint give the
     nav + search column enough room to breathe without hogging the main
     content's horizontal space. --width-sidebar-lg applies ≥1200px;
     --width-sidebar-md applies 600–1199px.
     -------------------------------------------------------------------------- */
  --width-sidebar-lg:       280px;  /* Large screens (desktop / ultra-wide) */
  --width-sidebar-md:       220px;  /* Medium screens (tablet / small laptop) */

  /* --------------------------------------------------------------------------
     Layout — Main content max-width + padding
     Caps the main column so line lengths stay readable on ultra-wide
     screens, and provides fluid internal padding that scales with viewport.
     -------------------------------------------------------------------------- */
  --width-content-max:      1100px; /* Cap on .content-main — keeps reading measure sane */
  --content-padding:        clamp(16px, 2vw, 32px); /* Fluid internal padding */

  /* --------------------------------------------------------------------------
     Layout — Page Container
     Caps the site at ultra-wide screens and provides fluid side gutters.
     -------------------------------------------------------------------------- */
  --width-page-max:         1800px; /* Maximum page width on ultra-wide displays */
  --page-gutter:            clamp(16px, 3vw, 48px); /* Fluid horizontal gutter */
  --column-gap:             calc(var(--page-gutter) / 2); /* Half the page gutter */

  /* --------------------------------------------------------------------------
     Spacing
     From cellpadding= attributes and explicit <br> / margin patterns.
     Keep it tight — the original site crammed content in.
     -------------------------------------------------------------------------- */
  --cell-padding-default:   5px;    /* cellpadding=5 — product-listing, new-arrivals,
                                       exhibit-detail */
  --cell-padding-sm:        1px;    /* cellpadding=1 — new-arrivals-early outer table */
  --cell-padding-sidebar:   15px;   /* cellspacing=15 — favorites-staff-annual sidebar */

  /* --------------------------------------------------------------------------
     Images — Product / UI
     -------------------------------------------------------------------------- */
  --album-cover-height:     100px;  /* album cover img height, product-listing,
                                       staff-pick-popup */
  --album-cover-spacer-w:   10px;   /* dot.gif spacer after album cover */
  --dot-separator-w:        12px;   /* dot.gif field separator width (artist•title•label…) */
  --stream-indent-w:        25px;   /* dot.gif indent before stream link text */
  --popup-width:            500px;  /* popUp() window width, staff-pick-popup */
  --popup-height:           500px;  /* popUp() window height, staff-pick-popup */

  /* --------------------------------------------------------------------------
     Misc
     -------------------------------------------------------------------------- */
  --reddot-size:            5px;    /* reddot.gif bullet icon, static-info contact block */
}


/* ============================================================================
   2. BASE / RESET STYLES
   ============================================================================
   Replaces all inline body[bgcolor], body[text], body[link], body[vlink],
   body[alink] attributes with CSS equivalents.
   The two vlink variants are handled via modifier classes on <body>.
   ============================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  margin: 0;
  padding: 0;
}

/* Links are ALWAYS underlined — this is the 90s web */
a {
  color: var(--color-link);
  text-decoration: underline;
}

a:visited {
  /* Default: catalogue/favorites/new-arrivals/homepage/static-info variant */
  color: var(--color-link-visited);
  text-decoration: underline;
}

a:active {
  color: var(--color-link-active);
}

/* No smooth hover — just the underline that was always there */
a:hover {
  text-decoration: underline;
}

/* Dotted focus outlines: period-appropriate AND accessible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px dotted var(--color-text);
  outline-offset: 1px;
}

/*
 * .vlink-blue — applies the alt visited-link color used on:
 *   search-results pages (product-listing with {{VLINK_COLOR}}=#065ee7),
 *   new-arrivals-early, favorites-customer-annual, exhibit-detail.
 * Add this class to <body> when vlink=#065ee7.
 */
body.vlink-blue a:visited {
  color: var(--color-link-visited-alt);
}

/* Inherit body font in form controls (browsers reset these) */
input,
select,
button,
textarea {
  font-family: inherit;
  font-size: inherit;
}

/* Remove default <pre> overflow clipping to match original display */
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: var(--font-pre);
}

/*
 * <hr> — classic beveled/embossed look.
 * The original browser-default HR had a sunken 3D groove;
 * ridge/inset gives back that period-correct embossed feel.
 */
hr {
  border: none;
  border-top: 2px ridge var(--color-text);
  margin: 0.75rem 0;
}

/*
 * hr.hr-light — subtle separator for content sections.
 * Lighter than the default ridge rule. Use between prose sections,
 * CTA blocks, genre clouds, etc. where a heavy rule is too strong.
 */
hr.hr-light {
  border-top: 1px solid #ccc;
  margin: 1.5rem 0;
}

/* <h4> used in exhibit-detail for exhibit title/dates block */
h4 {
  font-family: var(--font-primary);
  font-size: var(--font-size-md);
  margin: 0.25rem 0;
}

/* <blockquote> used in exhibit-detail description */
blockquote {
  margin-left: 2rem;
  margin-right: 2rem;
}

/* Skip-nav: visually hidden until focused — SR utility + keyboard accessibility */
.skip-nav {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-bg);
  color: var(--color-text);
  border: 2px solid var(--color-text);
  padding: 4px 8px;
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: bold;
  z-index: 100;
  text-decoration: none;
}

.skip-nav:focus {
  top: 0;
}

/* Offset subsequent skip links so they don't stack on top of each other */
.skip-nav + .skip-nav:focus {
  left: 220px;
}

/* Screen-reader-only utility — hides visually but keeps in accessibility tree */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================================
   3. LAYOUT CLASSES
   ============================================================================
   Replaces table-based width= attributes. All widths are extracted directly
   from the template source.
   ============================================================================ */

/*
 * .centered-wide — 720px centered container
 * Used by: homepage (outer table width=720),
 *          static-info (outer table width=720)
 */
.centered-wide {
  max-width: var(--width-homepage);
  width: 100%;
  margin-inline: auto;
}

/*
 * .centered-medium — 550px centered container
 * Used by: exhibit-detail (table width=550 align=center),
 *          new-arrivals-early (table border=0 width=550)
 */
.centered-medium {
  max-width: var(--width-exhibit);
  width: 100%;
  margin-inline: auto;
}

/*
 * .centered-narrow — 450px centered container
 * Used by: favorites-staff-annual (table width=450 align=center),
 *          favorites-customer-annual (table width=450 align=center)
 */
.centered-narrow {
  max-width: var(--width-favorites);
  width: 100%;
  margin-inline: auto;
}

/*
 * .page-container — outer wrapper for full-width page templates.
 * Caps at --width-page-max (1800px) on ultra-wide, centers, and applies
 * fluid side gutters. Drop-in wrapper usable by any template.
 */
.page-container {
  max-width: var(--width-page-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  padding-top: var(--page-gutter);
  padding-bottom: clamp(48px, 6vw, 96px); /* generous breathing room below content */
}

/*
 * .page-layout — two-column flex layout for product-listing and new-arrivals.
 * Replaces the paired <table align=left width=70%> + <table align=right> pattern.
 * On narrow viewports the sidebar stacks below the main content.
 */
.page-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--column-gap);
}

/*
 * .content-main — flexible main column (grows to fill remaining space
 * after the sidebar + gap). Capped so line lengths stay readable on
 * ultra-wide viewports.
 * Used by: product-listing, new-arrivals
 */
.content-main {
  flex: 1 1 0;
  min-width: 0;
  max-width: var(--width-content-max);
  padding: 0;
  line-height: 1.55;
}

/*
 * .content-sidebar — fixed-width right column for search + nav.
 * Default is the large-screen width; overridden at medium and small
 * breakpoints below. Inner content (search, nav, cart) fills the column.
 * Used by: new-arrivals
 */
.content-sidebar {
  flex: 0 0 var(--width-sidebar-lg);
  padding: 0;
}

/* Medium screens: narrower sidebar */
@media (max-width: 1199px) {
  .content-sidebar {
    flex: 0 0 var(--width-sidebar-md);
  }
}

/*
 * .sidebar-right — 33% right sidebar with extra spacing
 * Used by: favorites-staff-annual (table align=right cellspacing=15 width=33%)
 */
.sidebar-right {
  width: var(--width-sidebar-right);
  float: right;
  padding: var(--cell-padding-sidebar);
}

/*
 * .clearfix — clears float children (replaces <br clear=left> / <br clear=all>)
 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive: stack sidebar below main content on small screens */
@media (max-width: 760px) {
  .content-main,
  .content-sidebar,
  .sidebar-right {
    flex: 1 1 100%;
    width: 100%;
    float: none;
  }

  .centered-narrow {
    max-width: 100%;
    padding: 0 var(--cell-padding-default);
  }
}

@media (max-width: 760px) {
  .centered-wide,
  .centered-medium {
    max-width: 100%;
    padding: 0 var(--cell-padding-default);
  }
}


/* ============================================================================
   4. HEADER BANNER
   ============================================================================
   The blue #6699FF header row found in product-listing, favorites-staff-annual,
   new-arrivals, favorites-customer-annual, and exhibit-detail.
   Replaces <td bgcolor=#6699FF> containing the centered page title.
   Hard edges, flat color — no rounding, no shadow.
   ============================================================================ */

/*
 * .header-banner — cornflower-blue header bar
 * Used by: product-listing, new-arrivals, favorites-staff-annual,
 *          favorites-customer-annual, exhibit-detail
 */
.header-banner {
  background-color: var(--color-header-bg);
  color: var(--color-header-text);
  text-align: center;
  padding: var(--content-padding);
  font-family: var(--font-primary);
  font-size: var(--font-size-md); /* size=-1 outer font */
}

.header-banner__title {
  font-size: var(--font-size-xl); /* size=+2 inner title */
  font-weight: bold;
  display: block;
  text-align: center;
  margin: 0; /* reset browser default <h1> margin when used as banner */
}

/*
 * .header-early — right-aligned large blue header for early new-arrivals
 * Used by: new-arrivals-early (font color=#0440c0 size=+3, div align=right)
 */
.header-early {
  color: var(--color-accent-blue);
  font-size: var(--font-size-xxl); /* size=+3 */
  text-align: right;
  display: block;
}


/* ============================================================================
   5. SIDEBAR
   ============================================================================
   The right-side search/nav column. In product-listing it floats right with
   a spacer column. In new-arrivals it occupies the 28% right cell. In
   favorites-staff-annual it is a 33% right table. Shared nav content is the
   same across all these templates.
   ============================================================================ */

/*
 * .sidebar — wrapper for search form + nav links column
 * Used by: product-listing (table align=right), new-arrivals (table align=right),
 *          favorites-staff-annual (table align=right), homepage (td in main table)
 */
.sidebar {
  font-size: var(--font-size-sm); /* size=-2 */
  font-family: var(--font-primary);
  color: var(--color-link); /* #065ee7 — default nav link color in sidebar */
}

/*
 * .sidebar__nav-section — one group of links inside the sidebar
 * (primary links, alphabet nav, genre nav, staff nav)
 */
.sidebar__nav-section {
  font-size: var(--font-size-sm);
  font-family: var(--font-primary);
  color: var(--color-link);
}

/*
 * .sidebar__genre-nav — genre category links that switch to dark-red color
 * Used by: homepage sidebar (font color=#430104 wrapping genre list)
 *          favorites-staff-annual sidebar (same pattern)
 */
.sidebar__genre-nav {
  color: var(--color-nav-dark); /* #430104 */
}

/*
 * .sidebar__sub-item — indented sub-genre or sub-category entry
 * Used by: homepage sidebar (img dot.gif spacer before sub-genre link)
 * In CSS, replaced with left padding rather than inline image.
 */
.sidebar__sub-item {
  padding-left: calc(var(--dot-separator-w) + 4px);
  display: block;
}

/*
 * .sidebar__alphabet-nav — the A-Z single-letter links block
 * Used by: product-listing, favorites-staff-annual, homepage
 * No letter-spacing tweaks — just packed tight like the original.
 */
.sidebar__alphabet-nav {
  font-size: var(--font-size-sm);
  font-family: var(--font-primary);
  font-weight: bold;
  color: var(--color-link);
}

.sidebar__alphabet-nav a {
  margin-right: 0.1em;
}


/* ============================================================================
   6. SEARCH FORM
   ============================================================================
   The search widget (POST to /bin/search.cgi) found in product-listing,
   favorites-staff-annual, new-arrivals, and homepage.
   ============================================================================ */

/*
 * .search-form — search widget container
 * Used by: product-listing, favorites-staff-annual, new-arrivals, homepage
 */
.search-form {
  text-align: center;
  font-size: var(--font-size-sm); /* size=-2 */
  font-family: var(--font-primary);
}

.search-form__label {
  font-weight: bold;
  display: block;
  margin-bottom: 2px;
}

/*
 * Homepage search has a larger "SEARCH by:" label (size=+1)
 */
.search-form__label--large {
  font-size: var(--font-size-lg); /* size=+1 */
}

.search-form select {
  display: block;
  margin: 0 auto 2px;
}

.search-form input[type="text"] {
  display: block;
  margin: 0 auto 2px;
  width: 160px; /* size="20" ~= 20 chars */
}

.search-form input[type="submit"],
.search-form button[type="submit"] {
  display: block;
  margin: 0 auto;
  cursor: pointer;
}

/*
 * Within the sidebar column, vertically space the search form, cart widget
 * and nav blocks so they don't run together. Each block fills the full
 * column width.
 */
.content-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.content-sidebar .search-form,
.content-sidebar .sidebar__nav-section,
.content-sidebar .cart-widget {
  width: 100%;
}

/*
 * In the sidebar, the search input + submit button sit side-by-side on a
 * single row. The label spans the full row above them.
 */
.content-sidebar .search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  text-align: left;
}

.content-sidebar .search-form__label {
  flex: 1 1 100%;
}

.content-sidebar .search-form input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
}

.content-sidebar .search-form button[type="submit"],
.content-sidebar .search-form input[type="submit"] {
  flex: 0 0 auto;
  margin: 0; /* override the centered margin from the base rule */
  box-sizing: border-box;
}

.content-sidebar .search-form select {
  width: 100%;
  box-sizing: border-box;
}

/*
 * Space out the links inside the sidebar nav so they don't collapse into
 * a wall of text.
 */
.content-sidebar .sidebar__nav-section a {
  display: block;
  margin-bottom: 0.4rem;
}

/*
 * Compact inline layout for By Letter and Staff Favourites sections.
 * Links flow horizontally and wrap, separated by a small gap.
 */
.sidebar__nav-group--by-letter a,
.sidebar__nav-group--staff-favourites a {
  display: inline;
  margin-bottom: 0;
  margin-right: 0.3rem;
}


/* ============================================================================
   7. SHOPPING CART WIDGET
   ============================================================================
   Red-bordered table containing the "view shopping cart" link.
   Used in: product-listing (sidebar), homepage (sidebar).
   Hard border, flat — period correct.
   ============================================================================ */

/*
 * .cart-widget — red-border container around cart link
 * Used by: product-listing sidebar, homepage sidebar
 */
.cart-widget {
  display: inline-block;
  border: 2px solid var(--color-cart-border);
  text-align: center;
  padding: 2px 4px;
  font-size: var(--font-size-sm); /* size=-2 */
  font-family: var(--font-primary);
}

.cart-widget a {
  color: var(--color-link);
  font-weight: bold;
  text-decoration: underline;
}


/* ============================================================================
   8. PRODUCT LIST
   ============================================================================
   The main product listing area. Wraps all product-item blocks within an
   add-to-cart <form>. Used in product-listing and new-arrivals templates.
   ============================================================================ */

/*
 * .product-list — container for all product-item blocks
 * Used by: product-listing (inside <form action=/bin/basket.cgi>),
 *          new-arrivals (inside main content td),
 *          staff-pick-popup (single item)
 */
.product-list {
  font-size: var(--font-size-sm); /* size=-2 */
  font-family: var(--font-primary);
}

/*
 * .product-item — individual product block (Pattern A or B)
 * Each item begins with <br clear=left><p> in the original.
 * Tight top margin — the original site packed items closely.
 * Used by: product-listing, new-arrivals, staff-pick-popup
 */
.product-item {
  clear: left;
  margin-top: 2.5rem;
  overflow: hidden; /* contains floated album cover */
}

.product-item:first-child {
  margin-top: 0;
}

/*
 * .product-item__header — the artist•title•label•format•price line
 * Field values separated by dot.gif images (see .dot-separator below).
 */
.product-item__header {
  font-size: var(--font-size-sm);
  font-weight: bold;
  margin: 0; /* align with the top of the floated album cover, no trailing gap */
}

/*
 * Inline spacing between the artist / title / label / format / price spans
 * (replaces the former <span class="dot-separator"> gaps).
 */
.product-item__header > * + * {
  margin-left: 0.6rem;
}

.product-item__header .artist {
  font-weight: bold;
}

.product-item__header .title {
  font-weight: bold;
  font-style: italic;
}

.product-item__header .label {
  font-weight: bold;
}

.product-item__header .format {
  font-weight: bold;
}

.product-item__header .price {
  font-weight: bold;
}

/*
 * .out-of-print — bold red out-of-print / unavailable notice
 * Used by: product-listing (font color=red + <b>)
 */
.out-of-print {
  color: var(--color-out-of-print);
  font-weight: bold;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
}


/* ============================================================================
   9. ALBUM COVER IMAGE
   ============================================================================
   Left-floated 100px album cover followed by a spacer dot.gif.
   Pattern A in product-listing; also used in favorites-staff-annual
   (optional album covers row) and staff-pick-popup.
   ============================================================================ */

/*
 * .album-cover — floated album art thumbnail
 * Used by: product-listing (img height=100 align=left),
 *          staff-pick-popup (img height=100 align=left),
 *          favorites-staff-annual (optional cover images row)
 */
.album-cover {
  float: left;
  height: var(--album-cover-height);
  width: auto;
  vertical-align: top;
  margin-top: 0; /* flush with the product title beside it */
  margin-right: 1rem;  /* breathing room to the right of the cover */
  margin-bottom: 0.75rem; /* breathing room below when text wraps under */
}

/*
 * .album-covers-row — horizontal strip of album cover thumbnails
 * Used by: favorites-staff-annual (optional {{ALBUM_COVERS}} block)
 */
.album-covers-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 0.5rem;
}

.album-covers-row img {
  height: var(--album-cover-height);
  width: auto;
}


/* ============================================================================
   10. DOT SEPARATOR
   ============================================================================
   The [/images/dot.gif] 12px-wide inline image used as a field separator
   between artist, title, label, format, and price on every product line.
   Rendered as a small centered dot — faithful to the original artifact.
   ============================================================================ */

/*
 * .dot-separator — inline visual separator between product fields
 * Replaces <img width=12 border=0 src=/images/dot.gif> in product headers.
 * Used by: product-listing, new-arrivals, staff-pick-popup, homepage (genre nav)
 */
.dot-separator {
  display: inline-block;
  width: var(--dot-separator-w);
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  /* Renders as a centered bullet — matches the original dot.gif appearance */
}

.dot-separator::after {
  content: "\00B7"; /* middle dot · */
  font-weight: bold;
}

/*
 * Convenience: use ::before on a field wrapper to auto-insert separator
 * between adjacent sibling fields without JS:
 *   .product-field + .product-field::before { content: " · "; margin: 0 2px; }
 */

/*
 * .bracket-heading — utility class for the [ heading ] convention used
 * throughout the site for section labels and nav items.
 * Example: [ New Arrivals #312 ]
 */
.bracket-heading::before { content: "[ "; }
.bracket-heading::after  { content: " ]"; }


/* ============================================================================
   11. REVIEW TEXT
   ============================================================================
   The prose description paragraph following the product header line.
   Begins with <br> after the add-to-cart button in the original HTML.
   ============================================================================ */

/*
 * .review-text — product description / editorial review paragraph
 * Used by: product-listing, new-arrivals, staff-pick-popup
 */
.review-text {
  font-size: var(--font-size-sm); /* size=-2 */
  font-family: var(--font-primary);
  margin: 0.25rem 0 0;
  clear: none; /* sits after the floated album cover, inline */
}


/* ============================================================================
   12. STREAM LINKS (Audio)
   ============================================================================
   MPEG/RealAudio stream links that optionally follow each product review.
   Pattern: <br><img width=25 height=1> <b>MPEG Stream: <a href=...>"Track"</a></b>
   The 25px indent is a dot.gif spacer image.
   ============================================================================ */

/*
 * .stream-link — one audio stream line
 * Used by: product-listing, new-arrivals, staff-pick-popup
 */
.stream-link {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: bold;
  padding-left: var(--stream-indent-w); /* replaces dot.gif 25px spacer */
  margin-top: 2px;
}

.stream-link a {
  color: var(--color-link);
}

/*
 * .stream-links — bulleted list of audio clips below a product item.
 * Flush to the left edge of the wrapping container; bullets sit inside
 * the content box so no indent is introduced.
 */
.stream-links {
  list-style: disc inside;
  padding-left: 0;
  margin: 0.5rem 0 0;
}

.stream-links .stream-link {
  padding-left: 0;
  margin-top: 0;
}

/*
 * .streaming-links — "Listen on: Spotify · Deezer" line below audio clips.
 */
.streaming-links {
  font-size: var(--font-size-sm);
  margin-top: 0.4rem;
  padding-left: var(--stream-indent-w);
}

.streaming-link {
  color: var(--color-link);
}


/* ============================================================================
   13. PAGINATION
   ============================================================================
   Three variants found in product-listing:
     Variant 1 — Numbered page links (catalogue pages), size=+1 numbers.
     Variant 2 — "Showing X through Y of Z" + Previous/Next links (search).
     Variant 3 — "top of page" link only (favorites/records-of-week).
   All are center-aligned.
   ============================================================================ */

/*
 * .pagination — bottom navigation / pagination container
 * Used by: product-listing (all three variants, div align=center)
 */
.pagination {
  text-align: center;
  font-size: var(--font-size-sm);
  font-family: var(--font-primary);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/*
 * .pagination__numbers — numbered page links (Variant 1)
 * Original uses <font size=+1> around the number links.
 */
.pagination__numbers {
  font-size: var(--font-size-sm);
  font-weight: bold;
  margin-bottom: 4px;
}

.pagination__numbers a,
.pagination__numbers span {
  margin: 0 0.35em;
}

/* Current-page marker sits non-underlined and in the body color */
.pagination__numbers [aria-current="page"] {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Ellipsis is decorative, not clickable */
.pagination__numbers .pagination__ellipsis {
  margin: 0 0.25em;
  color: var(--color-text);
  letter-spacing: 2px;
}

/*
 * .pagination__context — "Showing X through Y of Z" line (Variant 2)
 */
.pagination__context {
  margin-bottom: 3px;
}

/*
 * .pagination__top-link — "top of page" / "[back to top]" anchor link
 * Used by: product-listing, favorites-staff-annual
 */
.pagination__top-link {
  display: block;
  margin-top: 4px;
}


/* ============================================================================
   14. FOOTER NAV
   ============================================================================
   Bottom navigation links found on various templates.
   ============================================================================ */

/*
 * .footer-nav — bottom navigation link row
 * Used by: new-arrivals-early (home | catalog / list archive),
 *          exhibit-detail (Aquarius home | exhibits archive),
 *          static-info (back to front page),
 *          favorites-staff-annual ([back to top] | home)
 */
.footer-nav {
  text-align: center;
  font-size: var(--font-size-sm);
  font-family: var(--font-primary);
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.footer-nav a {
  margin: 0 0.3em;
}

/*
 * .footer-nav--pipe — pipe-separated variant (a | a | a)
 */
.footer-nav--pipe a + a::before {
  content: " | ";
  color: var(--color-text);
}


/* ============================================================================
   15. POPUP LAYOUT
   ============================================================================
   The staff-pick-popup window is a minimal 500×500 popup (no sidebar, no nav).
   All content is a single product detail block.
   ============================================================================ */

/*
 * .popup-layout — body-level class for staff-pick popup windows
 * Used by: staff-pick-popup
 * The window itself is sized by JavaScript (500×500); CSS just sets typography.
 */
.popup-layout {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-size-sm); /* size=-2 */
  font-family: var(--font-primary);
  padding: 4px;
}

.popup-layout .product-item {
  margin-top: 4px;
}

/*
 * .popup-close — "Close window" link at popup bottom
 */
.popup-close {
  display: block;
  text-align: center;
  margin-top: 0.75rem;
  font-size: var(--font-size-sm);
}


/* ============================================================================
   16. EXHIBIT LAYOUT
   ============================================================================
   Art exhibit pages: 550px centered, two-column (photos left, text right),
   with blue header banner spanning both columns.
   Used by: exhibit-detail
   ============================================================================ */

/*
 * .exhibit-layout — wrapper for exhibit page two-column content
 * Used by: exhibit-detail (table width=550 cellpadding=5 align=center)
 */
.exhibit-layout {
  max-width: var(--width-exhibit);
  width: 100%;
  margin-inline: auto;
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
}

/*
 * .exhibit-layout__photos — left photo column
 */
.exhibit-layout__photos {
  vertical-align: top;
  text-align: center;
}

/*
 * .exhibit-layout__content — right text column (spans 2 rows in original)
 */
.exhibit-layout__content {
  vertical-align: top;
}

/*
 * .exhibit-layout__rule — the decorative horizontal text rule line
 * Original: <P><CENTER>__________________________________________________________</CENTER>
 */
.exhibit-layout__rule {
  text-align: center;
  color: var(--color-text);
  overflow: hidden;
  white-space: nowrap;
  margin: 4px 0;
}

/*
 * .divider-underscores — utility class for the ________ divider pattern
 * used in exhibit pages and any other hand-built text dividers.
 * Outputs a run of underscores as a text decoration pseudo-element
 * so the HTML stays clean.
 */
.divider-underscores {
  display: block;
  text-align: center;
  color: var(--color-text);
  overflow: hidden;
  white-space: nowrap;
  margin: 4px 0;
  font-family: var(--font-mono);
}

/*
 * .exhibit-layout__meta — exhibit title / subtitle / dates block
 * Replaces <H4> centered block.
 */
.exhibit-layout__meta {
  text-align: center;
  font-size: var(--font-size-md); /* <h4> level */
  font-weight: bold;
  margin: 4px 0;
}


/* ============================================================================
   17. NEWSLETTER LAYOUT (New Arrivals — post-1997 era)
   ============================================================================
   new-arrivals.html uses a 70%/28% two-column layout with a blue header
   banner and an intro letter preceding the product list.
   ============================================================================ */

/*
 * .newsletter-layout — wrapper for new arrivals issue page
 * Used by: new-arrivals (float-based 70%/28% layout)
 */
.newsletter-layout {
  font-family: var(--font-primary);
  font-size: var(--font-size-sm); /* size=-2 outer */
  color: var(--color-text);
}

/*
 * .newsletter-layout__issue-header — centered issue number + date block
 */
.newsletter-layout__issue-header {
  text-align: center;
  font-size: var(--font-size-sm);
  margin-bottom: 0.5rem;
}

/*
 * .newsletter-layout__intro — the opening "Beloved customers…" letter
 */
.newsletter-layout__intro {
  font-size: var(--font-size-sm);
  margin-bottom: 0.5rem;
}

/*
 * .newsletter-layout__section-header — bold dashed section dividers
 * Original: <b>----*<br>----* Record of the Week :<br>----*</b>
 */
.newsletter-layout__section-header {
  font-weight: bold;
  font-size: var(--font-size-sm);
  margin: 0.75rem 0 3px;
  display: block;
}

/*
 * .newsletter-layout__footer — bottom mailorder disclaimer line
 * Original: <em>all of these records are available mailorder</em>
 */
.newsletter-layout__footer {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  font-style: italic;
  margin-top: 0.75rem;
}


/* ============================================================================
   18. PRE-CONTENT (Early New Arrivals — 1995–1996 era)
   ============================================================================
   new-arrivals-early.html wraps the entire issue body in a <pre> block
   inside a 550px table. The header is right-aligned in a large blue font.
   ============================================================================ */

/*
 * .pre-content — preformatted issue body block
 * Used by: new-arrivals-early (the <pre> block containing all product text)
 */
.pre-content {
  font-family: var(--font-pre);
  font-size: var(--font-size-sm);
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--color-text);
  margin: 0;
  padding: 0;
}

/*
 * .early-nav — minimal navigation line in early new-arrivals
 * Original: <a href=/index.html>home</a> | <a href=/cat.html>catalog / list archive</a>
 */
.early-nav {
  font-size: var(--font-size-sm); /* size=-2 */
  font-family: var(--font-primary);
  color: var(--color-text);
  font-style: italic;
}

.early-nav a {
  color: var(--color-link);
}


/* ============================================================================
   19. FAVORITES LAYOUT
   ============================================================================
   favorites-staff-annual and favorites-customer-annual share a 450px centered
   table with blue header banner, optional album covers, intro text, and
   per-person sections separated by <hr>.
   favorites-staff-annual adds a right sidebar (33%); customer-faves has none.
   ============================================================================ */

/*
 * .favorites-layout — outer wrapper for annual favorites pages
 * Used by: favorites-staff-annual, favorites-customer-annual
 */
.favorites-layout {
  max-width: var(--width-favorites);
  width: 100%;
  margin-inline: auto;
  font-family: var(--font-primary);
  font-size: var(--font-size-sm); /* size=-2 inner content */
}

/*
 * .favorites-layout__intro — opening letter or preamble
 * Original: <font size=-1> wrapper (~13px)
 */
.favorites-layout__intro {
  font-size: var(--font-size-md); /* size=-1 */
  margin-bottom: 0.5rem;
}

/*
 * .favorites-layout__heading — secondary page heading inside content area
 * Original: <font size=+1><b> (~19px bold)
 */
.favorites-layout__heading {
  font-size: var(--font-size-lg); /* size=+1 */
  font-weight: bold;
  text-align: center;
  margin-bottom: 4px;
}

/*
 * .favorites-section — one staff-member or customer submission section
 * Separated by <hr> in the original. Uses a hard top border, not margin-gap.
 */
.favorites-section {
  margin: 0.75rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-text);
}

.favorites-section:last-child {
  border-bottom: none;
}

/*
 * .favorites-section__name — the bold "From: Name" or staff name heading
 */
.favorites-section__name {
  font-weight: bold;
  font-size: var(--font-size-sm);
  margin-bottom: 3px;
}

/*
 * .favorites-section__list — the album entry list for that person
 */
.favorites-section__list {
  font-size: var(--font-size-sm);
}


/* ============================================================================
   20. HOMEPAGE LAYOUT
   ============================================================================
   The homepage uses a 720px centered outer table with three main zones:
     1. Logo/tagline column (left)
     2. Alert/spacer column (center, optional)
     3. Nav/search sidebar (right, rowspan=2)
   Below that is a featured-content row spanning all columns.
   ============================================================================ */

/*
 * .homepage — standalone full-width page (no sidebar)
 */
.homepage {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.25rem;
  font-family: var(--font-primary);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-primary);
}


/*
 * .site-masthead — top navigation bar (all pages)
 */
.site-masthead {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid #ccc;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.site-masthead a {
  color: var(--color-heading-link);
  text-decoration: none;
  font-weight: 600;
}

.site-masthead a:hover {
  text-decoration: underline;
}

/*
 * .archive-notice — dismissable archive status banner (catalog pages)
 */
.archive-notice {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  max-width: calc(var(--width-content-max) + var(--column-gap) + var(--width-sidebar-lg));
  margin-inline: auto;
  box-sizing: border-box;
  background-color: #fff;
  color: var(--color-text);
  border: 2px solid var(--color-text);
  font-family: var(--font-primary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.archive-notice__logo {
  flex-shrink: 0;
  display: block;
}

.archive-notice__text {
  margin: 0;
  flex: 1;
}

.archive-notice__text strong {
  display: block;
  margin-bottom: 0.2rem;
}

.archive-notice__text a {
  color: var(--color-text);
}

@media (max-width: 480px) {
  .archive-notice__logo {
    display: none;
  }
}

/*
 * .homepage-hero — logo + tagline centered block
 */
.homepage-hero {
  text-align: center;
  padding: 1rem 0;
}

.homepage-logo {
  margin-bottom: 1rem;
}

.homepage-logo img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.homepage-tagline {
  font-size: var(--font-size-md);
  font-family: var(--font-primary);
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
}

.homepage-tagline .est-year {
  color: var(--color-out-of-print);
}

/*
 * .prose — shared readable text block (paragraphs, line-height, font-size).
 * Used by: homepage story, documentary description, any long-form content.
 */
.prose {
  line-height: 1.7;
  font-size: 0.95rem;
}

.prose p {
  margin: 0 0 1rem 0;
}

/*
 * Buttons — standardised styles for the catalog design system.
 * No border-radius, no transitions, no shadows — hard rectangles.
 *
 * .btn-primary — solid blue background, white text
 * .btn-outline — transparent with blue border
 * .btn-small   — compact padding
 */
.btn-primary {
  display: inline-block;
  padding: 0.65rem 2rem;
  background-color: var(--color-link);
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  font-family: var(--font-primary);
  border: 2px outset var(--color-link);
  cursor: pointer;
}

.btn-primary:visited {
  color: #fff;
}

.btn-primary:hover {
  border-style: inset;
  color: #fff;
}

.btn-outline {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background-color: transparent;
  color: var(--color-link);
  text-decoration: none;
  font-weight: bold;
  font-size: 0.95rem;
  font-family: var(--font-primary);
  border: 2px solid var(--color-link);
  cursor: pointer;
}

.btn-outline:visited {
  color: var(--color-link);
}

.btn-outline:hover {
  background-color: var(--color-link);
  color: #fff;
}

.btn-small {
  padding: 0.35rem 1rem;
  font-size: var(--font-size-sm);
}

/*
 * .homepage-cta — subscribe call to action
 */
.homepage-cta {
  text-align: center;
  padding: 0.5rem 0;
}

.homepage-cta p {
  margin: 0 0 0.75rem 0;
  font-size: 0.95rem;
}

/* Homepage responsive */
@media (max-width: 480px) {
  .site-masthead {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .homepage-logo img {
    width: 240px;
  }
}

/*
 * Genre word cloud — homepage visual navigation into catalog
 */
.genre-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.3rem 0.75rem;
  padding: 1rem 0;
  line-height: 1.4;
}

.genre-cloud__tag {
  display: inline-block;
  color: var(--color-heading-link);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.genre-cloud__tag:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
}

@media (max-width: 760px) {
  .genre-cloud {
    --cloud-scale: 0.75;
    gap: 0.25rem 0.5rem;
  }
}

@media (max-width: 480px) {
  .genre-cloud {
    --cloud-scale: 0.6;
    gap: 0.2rem 0.4rem;
  }
}

/*
 * Documentary page — standalone project page (no sidebar)
 */
/*
 * Documentary page content — inherits container from .homepage
 * Typography matches .homepage-story for consistent prose rendering.
 */

.documentary-header {
  text-align: center;
  margin-bottom: 2rem;
}

.documentary-header h1 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

.documentary-subtitle {
  font-size: 1rem;
  color: var(--color-text);
}

.documentary-video {
  margin-bottom: 1.5rem;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-link {
  text-align: center;
  margin-top: 0.75rem;
}

.documentary-description {
  margin: 1.5rem 0;
}

/* documentary hr — uses hr.hr-light class directly, no override needed */
/* (removed .documentary-page hr — now handled by .hr-light) */
}

.screenings h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.screenings-placeholder {
  color: var(--color-text);
  font-style: italic;
}

.documentary-footer {
  text-align: center;
}

.documentary-nav {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.documentary-nav a {
  color: var(--color-link);
  text-decoration: underline;
}

.documentary-credits {
  font-size: var(--font-size-xs);
  color: var(--color-text);
}



/* ============================================================================
   21. STATIC INFO PAGE LAYOUT
   ============================================================================
   static-info.html shares the 720px wrapper with homepage but the content
   is a simple heading + prose + optional contact/gallery layout.
   ============================================================================ */

/*
 * .static-info — content area of about/contact/info pages
 * Used by: static-info (inner table, full width under hero image)
 */
.static-info {
  font-size: var(--font-size-md); /* size=-1 */
  font-family: var(--font-primary);
}

/*
 * .static-info__heading — large blue italic heading
 * Original: <font size=+3 color=#065ee7><i>
 */
.static-info__heading {
  font-size: var(--font-size-xxl); /* size=+3 */
  color: var(--color-heading-link); /* #065ee7 */
  font-style: italic;
  text-align: center;
  display: block;
  margin-bottom: 0.5rem;
}

/*
 * .static-info__prose — main body paragraphs
 * Original uses dot-gif indent paragraphs; in CSS we use text-indent or padding.
 */
.static-info__prose {
  font-size: var(--font-size-md);
  font-family: var(--font-primary);
}

/*
 * .static-info__para — individual indented paragraph
 * Original: <img src=images/dot.gif width=25 height=1>text<br><br>
 */
.static-info__para {
  padding-left: var(--stream-indent-w); /* 25px replaces dot.gif */
  margin-bottom: 0.5rem;
}

/*
 * .contact-block — store contact / hours list
 * Original: reddot.gif bullets for address, hours, tel, email
 */
.contact-block {
  font-size: var(--font-size-md);
  font-family: var(--font-primary);
}

/*
 * .contact-block__item — one reddot.gif-bulleted line
 * In CSS, replaces the 5×5px reddot.gif with a solid red square pseudo-element
 * (square matches the gif artifact better than a circle).
 */
.contact-block__item {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 1px;
}

.contact-block__item::before {
  content: "";
  display: inline-block;
  width: var(--reddot-size);
  height: var(--reddot-size);
  background-color: var(--color-out-of-print);
  flex-shrink: 0;
  margin-top: 0.2em;
}

/*
 * .hero-images — optional store/staff photo row at top of static-info
 */
.hero-images {
  text-align: center;
  margin-bottom: 0.5rem;
}

.hero-images img {
  width: 250px;
  height: auto;
  margin: 0 2px;
}


/* ============================================================================
   22. HOMEPAGE FOOTER (Copyright / Credits)
   ============================================================================
   The copyright block at the bottom of the homepage sidebar.
   Uses three nested size values: size=-1, size=-3, size=-5.
   ============================================================================ */

/*
 * .site-footer — unified footer used on every page
 */
.site-footer {
  text-align: center;
  font-family: var(--font-primary);
  margin-top: clamp(32px, 4vw, 64px);
  padding: 1.5rem 0;
  border-top: 1px solid #ccc;
}

.site-footer p {
  margin: 0.4rem 0;
}

.site-footer__nav {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.site-footer__nav a {
  color: var(--color-heading-link);
  text-decoration: none;
}

.site-footer__nav a:hover {
  text-decoration: underline;
}

.site-footer__text {
  font-size: 0.85rem;
  margin: 0.75rem 0;
  text-wrap: balance;
}

@media (max-width: 480px) {
  .site-footer__nav {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
}


/* ============================================================================
   23. STOCK NOTICE / DISCLAIMER
   ============================================================================
   The italicized stock disclaimer at top of product listing pages.
   Present on catalogue and favorites pages; absent on search results.
   ============================================================================ */

/*
 * .stock-notice — important stock disclaimer block
 * Used by: product-listing ({{#HAS_STOCK_NOTICE}} block)
 */
.stock-notice {
  font-size: var(--font-size-sm);
  font-family: var(--font-primary);
  font-style: italic;
  margin-bottom: 0.5rem;
  clear: left;
}

.stock-notice strong {
  font-style: normal;
}


/* ============================================================================
   24. SEARCH RESULTS HEADER
   ============================================================================
   The "Showing results X through Y of Z" line at top of search result pages.
   ============================================================================ */

/*
 * .search-results-header — centered pagination context line
 * Used by: product-listing ({{#IS_SEARCH_RESULTS}} block)
 */
.search-results-header {
  text-align: center;
  font-size: var(--font-size-sm);
  font-family: var(--font-primary);
  font-weight: bold;
  margin: 1.25rem 0 1.5rem;
}

.search-results-header strong {
  font-weight: 800;
}


/* ============================================================================
   25. TYPOGRAPHY UTILITY CLASSES
   ============================================================================
   Named size classes corresponding to every <font size=N> value found
   across all templates. Use these to replace inline font-size attributes
   in a React rebuild.
   ============================================================================ */

/* size=-5 — copyright notice block */
.text-xxs  { font-size: var(--font-size-xxs); }

/* size=-3 — website credits */
.text-xs   { font-size: var(--font-size-xs);  }

/* size=-2 — primary listing text, sidebar nav, review text, product fields */
.text-sm   { font-size: var(--font-size-sm);  }

/* size=-1 — secondary text, intro letters, tagline, mailorder, exhibit text */
.text-md   { font-size: var(--font-size-md);  }

/* size=+1 — pagination numbers, section headings, homepage search label */
.text-lg   { font-size: var(--font-size-lg);  }

/* size=+2 — header banner title, favorites heading */
.text-xl   { font-size: var(--font-size-xl);  }

/* size=+3 — early-era new arrivals header, static-info page heading */
.text-xxl  { font-size: var(--font-size-xxl); }

/* Font-weight helpers — binary, like the original <b> tag */
.text-bold   { font-weight: bold; }
.text-italic { font-style: italic; }
.text-normal { font-weight: normal; font-style: normal; }

/* Alignment helpers */
.text-center { text-align: center; }
.text-right  { text-align: right;  }
.text-left   { text-align: left;   }

/* Color helpers — all distinct text/link colors used across templates */
.color-text      { color: var(--color-text);      }
.color-link      { color: var(--color-link);       }
.color-visited   { color: var(--color-link-visited); }
.color-red       { color: var(--color-out-of-print); }
.color-accent    { color: var(--color-accent-blue); }
.color-nav-dark  { color: var(--color-nav-dark);   }


/* ============================================================================
   CATEGORY INDEX GRID
   ============================================================================ */

.cat-index-grid {
  list-style: none;
  margin: 1em 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35em 1em;
}

@media (max-width: 1199px) {
  .cat-index-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 760px) {
  .cat-index-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ============================================================================
   SUBSCRIBER UI COMPONENTS
   ============================================================================
   Shared styles for the subscriber-facing pages (subscribe, preferences,
   verify, unsubscribe). These pages load aquarius.css from the website
   bucket and are served under /subscribe/* via CloudFront.
   ============================================================================ */

/*
 * .sub-container — narrower centered content area for subscriber pages.
 * Subscriber forms are narrower than catalog pages (540px vs 720px).
 */
.sub-container {
  max-width: 540px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 0;
}

.sub-container p {
  margin: 0 0 1rem 0;
}

.sub-container h1 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.sub-container .subtitle {
  margin-bottom: 2rem;
}

/* ── Forms ─────────────────────────────────────────────────────────── */

.sub-container label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.sub-container input[type='email'],
.sub-container input[type='text'] {
  display: block;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-text);
  font-size: 1rem;
  font-family: var(--font-primary);
  background: #fff;
  color: var(--color-text);
}

.sub-container input[type='email']:focus,
.sub-container input[type='text']:focus {
  outline: 2px dotted var(--color-link);
  outline-offset: 1px;
}

.field {
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid #ccc;
}

.field:last-of-type {
  border-bottom: none;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.5rem;
  padding-left: 0.25rem;
}

.radio-group label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: normal;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.5;
}

.radio-group input[type='radio'] {
  accent-color: var(--color-link);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.checkbox-label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: normal;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.5;
}

.checkbox-label input[type='checkbox'] {
  accent-color: var(--color-link);
  flex-shrink: 0;
}

/* ── Buttons (subscriber additions) ───────────────────────────────── */

.btn-danger {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background-color: transparent;
  color: red;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.95rem;
  font-family: var(--font-primary);
  border: 2px solid red;
  cursor: pointer;
}

.btn-danger:visited {
  color: red;
}

.btn-danger:hover {
  background-color: red;
  color: #fff;
}

.btn-primary:disabled {
  background-color: #999;
  border-color: #999;
  cursor: not-allowed;
}

/* ── Messages ─────────────────────────────────────────────────────── */

.message {
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  border: 1px solid;
}

.message-success {
  background-color: #e8f5e4;
  color: #2d5a1e;
  border-color: #b8dba8;
}

.message-error {
  background-color: #fde8e8;
  color: #8b2020;
  border-color: #f0b8b8;
}

.message-info {
  background-color: #fcffd1;
  color: var(--color-text);
  border-color: var(--color-text);
}

/* ── Status badges ────────────────────────────────────────────────── */

.status-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.status-active {
  background-color: #e8f5e4;
  color: #2d5a1e;
  border: 1px solid #b8dba8;
}

.status-paused {
  background-color: #fff3cd;
  color: #664d03;
  border: 1px solid #ddc77a;
}

/* ── Info rows (preferences key-value display) ────────────────────── */

.info-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid #ccc;
  font-size: 0.95rem;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  color: var(--color-text);
}

/* ── Actions (stacked button group) ───────────────────────────────── */

.actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.actions button,
.actions .btn {
  width: 100%;
  text-align: center;
}

/* ── Subscriber utilities ─────────────────────────────────────────── */

.hidden { display: none !important; }
.loading { color: var(--color-text); font-style: italic; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-2 { margin-bottom: 1rem; }