/*
 * aymat.org design tokens, ported from the Astro rebuild's
 * src/styles/global.css (source of truth) onto OpenCart's default
 * Bootstrap 5 theme.
 *
 * OpenCart 4 doesn't have a swappable theme-folder system - this file is
 * linked directly in catalog/view/template/common/header.twig, after the
 * core stylesheet.css, so everything below wins on the cascade without
 * needing !important except where Bootstrap's own component rules are
 * unusually specific.
 */

@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Oxanium:wght@400;500;600;700&display=swap');

:root {
  --aymat-color-ink: #2f2e2d;
  --aymat-color-muted: #bababa;
  --aymat-color-subtle: #888581;
  --aymat-color-accent-red: #c64040;
  --aymat-color-link-bg: #afafaf;
}

/* Base */
html, body {
  background-color: var(--aymat-color-muted);
}

/* Highlighted (mouse-selected) text color, matched to the Astro
   rebuild's own ::selection rule verbatim, per Joel's request,
   2026-09-21 - OpenCart had no ::selection rule at all before this,
   so selected text was falling back to the browser's stock blue. */
::selection {
  background-color: #313540;
  color: #c5c9d1;
}
/* The base theme reserves space at the bottom of every page for the
   footer via a sticky-footer trick: footer is position:absolute, pinned
   to #container's bottom edge, so it only avoids covering the tail end
   of the page's own content if #content is padded to match the
   footer's real height - otherwise the footer just overlaps whatever
   content happens to be there (this is what was cutting off page
   content, 2026-09-21). Re-sized here to the 5-column footer's own
   actual rendered height (re-tuned again 2026-09-21 after the Extras
   column was dropped and the Site/logo columns were added, which
   changed the footer's height at both breakpoints) - taller below
   768px where .footer-columns stacks all 5 columns in one, shorter at
   768px+ where they're a single row, plus ~50-60px of breathing room
   past the footer's own height so content doesn't run flush into it
   either. If the footer's content changes again (more/fewer links,
   more columns), re-measure its rendered height at both breakpoints
   and adjust these two values to match - they're not auto-computed.
   #container keeps margin-bottom: 0 - that's just the classic trick's
   full-viewport-height assist for short pages and isn't part of the
   overlap fix. */
#content, #column-left, #column-right {
  padding-bottom: 490px;
}
/* 25px top padding on the main content column, per Joel's request,
   2026-09-21 - gives pages a little breathing room below the header
   now that the breadcrumb bar (which used to create that gap
   incidentally) is gone. Scoped to #content only, not the sidebar
   columns, since this is about the page's own content starting too
   close to the header, not the sidebars.

   Bottom padding gets the same 25px treatment, but it's added ON TOP
   of the shared 490px sticky-footer offset above (515px total) rather
   than replacing it - that 490px isn't just spacing, it's sized to the
   footer's own rendered height so the footer doesn't overlap content
   (see the comment on the shared rule above). If the footer's height
   ever gets re-tuned, re-add this 25px on top of whatever the new
   value becomes, here and in the mobile override below. */
#content {
  padding-top: 25px;
  padding-bottom: 515px;
}
@media (max-width: 767.98px) {
  #content, #column-left, #column-right {
    padding-bottom: 1400px;
  }
  #content {
    padding-bottom: 1425px;
  }
}
#container {
  margin-bottom: 0;
}
body, ul, ol, p, span, div, label, input, select, textarea {
  font-family: 'Oxanium', sans-serif;
  color: var(--aymat-color-ink);
}
/* Body copy size/rhythm - matches the Astro rebuild's global.css base
   type exactly (16px / 1.72em line-height / 0.1em tracking), replacing
   the tighter 0.05em tracking this previously carried. Scoped to
   body/ul/ol/p (same as the source) so it cascades into OpenCart's own
   side-column widgets (column_left/column_right link lists) as well as
   ordinary paragraph copy, 2026-09-14. */
body, ul, ol, p {
  font-size: 16px;
  line-height: 1.72em;
  letter-spacing: 0.1em;
}
a {
  color: var(--aymat-color-accent-red);
  transition: color 0.2s linear, background-color 0.2s linear, border-color 0.2s linear;
}
a:hover {
  color: var(--aymat-color-ink);
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.card-title, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Michroma', sans-serif;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--aymat-color-ink);
  text-transform: uppercase;
}
/* h1 page titles resized to match h2, per Joel's request, 2026-09-21.
   The <h1>{{ heading_title }}</h1> markup itself is hardcoded in
   OpenCart's core twig templates (category/cart/checkout/register/
   compare/information), not admin-editable - kept as a real h1 for
   SEO/accessibility (one h1 per page), just visually sized down to
   22px to match h2 instead of the previous 32px. The single product
   page's own h1.shop-title has its own separate override below and
   is unaffected. */
h1 { font-size: 22px; }
h2 { font-size: 22px; }
h3 { font-size: 16px; }

/* #top (currency/language/account/wishlist/cart/checkout icon bar)
   removed from header.twig per Joel's request, 2026-09-15 - its
   styling here is dead code now, removed alongside it. */
.navbar, #menu {
  background-color: var(--aymat-color-ink) !important;
}
#menu .nav-link {
  color: var(--aymat-color-muted) !important;
  font-family: 'Michroma', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 12px;
  transition: opacity 0.15s ease;
}
/* Dark gray nav item rollover - flat 0.85 opacity dim instead of the
   red-text swap, per Joel's request, 2026-09-15: text color stays the
   same muted gray as the resting state in every rollover state,
   matching every other dark-gray button/nav item site-wide. */
#menu .nav-link:hover,
#menu .nav-link:focus {
  color: var(--aymat-color-muted) !important;
  opacity: 0.85;
}

/* All buttons read in uppercase, site-wide. */
.btn,
.btn-shop {
  text-transform: uppercase;
}

/* "Action" buttons - Add to Cart, checkout, submit, etc. Text styling
   matches .btn-shop (Download Booklet, Buy Now etc.) exactly - same
   10px/0.15em Michroma treatment - so every button on the site reads
   consistently, 2026-09-14. */
.btn-primary {
  /* Bootstrap's own hover/active/disabled button states read from these
     custom properties (defined on .btn-primary in bootstrap.css) rather
     than the plain background-color/border-color/color below - a
     disabled .btn-primary (e.g. Checkout's "Confirm Order" before the
     form is valid) was falling through to Bootstrap's untouched
     --bs-btn-disabled-bg and showing the theme's stock blue instead of
     our dark ink, since :disabled has higher specificity than the
     plain-class overrides. Redeclaring the variables themselves fixes
     every state at once instead of chasing each pseudo-class
     individually, 2026-09-15.
     Hover/active vars are pinned to the SAME ink/muted values as the
     resting state (not a darker shade) per Joel's request, 2026-09-15:
     every dark-gray button/nav item site-wide now keeps its default
     text/bg color in every state and signals rollover with opacity
     alone (see .btn-primary:hover below) - still redeclared rather than
     left to Bootstrap's own hover vars, otherwise the theme's stock
     hover color would flash through the same way the old disabled-blue
     bug did. */
  --bs-btn-color: var(--aymat-color-muted);
  --bs-btn-bg: var(--aymat-color-ink);
  --bs-btn-border-color: var(--aymat-color-ink);
  --bs-btn-hover-color: var(--aymat-color-muted);
  --bs-btn-hover-bg: var(--aymat-color-ink);
  --bs-btn-hover-border-color: var(--aymat-color-ink);
  --bs-btn-active-color: var(--aymat-color-muted);
  --bs-btn-active-bg: var(--aymat-color-ink);
  --bs-btn-active-border-color: var(--aymat-color-ink);
  --bs-btn-disabled-color: var(--aymat-color-muted);
  --bs-btn-disabled-bg: var(--aymat-color-ink);
  --bs-btn-disabled-border-color: var(--aymat-color-ink);
  background-color: var(--aymat-color-ink);
  border-color: var(--aymat-color-ink);
  color: var(--aymat-color-muted);
  border-radius: 0;
  font-family: 'Michroma', sans-serif;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: opacity 0.15s ease;
}
/* Rollover feedback is a flat 0.85 opacity dim, replacing the old
   darken-to-#202020/red-text treatments used across the site, per
   Joel's request, 2026-09-15 - text/bg color stay identical to the
   resting state in every rollover state. */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  opacity: 0.85;
}

/* "Link" style buttons - wishlist/compare/secondary actions */
.btn-light,
.btn-outline-secondary {
  background-color: var(--aymat-color-link-bg);
  border-color: var(--aymat-color-link-bg);
  color: var(--aymat-color-ink);
  border-radius: 0;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-light:hover,
.btn-outline-secondary:hover {
  background-color: transparent;
  border-color: var(--aymat-color-subtle);
  color: var(--aymat-color-accent-red);
}

/* Button sizing, per Joel's request, 2026-09-15: match the Astro site
   build's button logic exactly (localhost:4321/contact/'s .btn/
   .btn-shop/.btn-content: fixed 50px height, flex-centered label,
   rather than Bootstrap's stock text-driven height). Scoped to the
   labeled action/link buttons (Checkout, Continue Shopping, Apply
   Coupon, the coupon Remove button, etc.), not every .btn-* element -
   the small icon-only Update/Remove controls paired with the quantity
   field below reset back to auto height so they stay matched to the
   field's height instead of blowing up to 50px. */
.btn-primary,
.btn-light,
.btn-outline-secondary,
.btn-danger {
  height: 50px;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-group .btn {
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Product/category cards */
.card {
  border-radius: 0;
  border-color: var(--aymat-color-subtle);
  background-color: transparent;
}
.card-footer {
  background-color: transparent;
  border-color: var(--aymat-color-subtle);
}
.price-new {
  color: var(--aymat-color-accent-red);
  font-weight: 600;
}
.price-old {
  color: var(--aymat-color-subtle);
}

/* Product grid cards (.product-thumb - the actual markup OpenCart uses for
   Featured/category/search results, not Bootstrap's .card). Drop the base
   theme's light #ddd border, give the card the site's #afafaf panel
   background, and restyle the cart/wishlist/compare icon row: dark ink
   background, muted icon color, red on hover to match the rest of the
   site's button/link language. */
.product-thumb {
  border: none;
  background-color: var(--aymat-color-link-bg);
  display: flex;
  flex-direction: column;
}
/* Kill the hairline gap that can show up between the image and the card's
   edge (top/sides/bottom) - the base theme's .image wrapper centers an
   inline img-fluid via text-align, which leaves a sub-pixel/baseline gap
   in some browsers/zoom levels. Forcing the image to block + 100% width
   removes the inline-baseline reservation entirely, 2026-09-14. */
.product-thumb .image {
  font-size: 0;
  line-height: 0;
}
.product-thumb .image img {
  display: block;
  width: 100%;
}
.product-thumb .content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-thumb .button button {
  background-color: var(--aymat-color-ink);
  color: var(--aymat-color-muted);
  border: none;
  transition: opacity 0.15s ease;
}
/* Flat 0.85 opacity rollover, replacing the red-text swap, per Joel's
   request, 2026-09-15 - matches every other dark-gray button/nav item
   site-wide. */
.product-thumb .button button:hover {
  background-color: var(--aymat-color-ink);
  color: var(--aymat-color-muted);
  opacity: 0.85;
}
.product-thumb .description {
  margin-bottom: 0;
  /* Match the Astro shop card's content padding exactly (30px top,
     25px sides/bottom) instead of the base theme's flat 15px. */
  padding: 30px 25px 25px 25px;
  /* Column layout so "View Product" (margin-top: auto below) sticks to
     the bottom of the card regardless of excerpt length, same as the
     Astro card's flex-col + mt-auto CTA. */
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* Product name - matches the live site's (aymat.org/shop/) product-title
   h3 size/weight: 16px, weight 400, 1.2 line-height, 0.15em tracking,
   2026-09-14. */
.product-thumb h4 {
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.15em;
}
.product-thumb h4 a {
  color: var(--aymat-color-ink);
}
.product-thumb h4 a:hover {
  color: var(--aymat-color-accent-red);
}
/* Base stylesheet.css sets ".product-thumb .description h4 { font-weight:
   bold; }" - more specific than the rule above, so it needs matching here
   to actually win and bring the weight back to 400 like post-title. */
.product-thumb .description h4 {
  font-weight: 400;
}

/* Category line above the title - matches the Astro shop card's
   .post-title-extras (used there for both the category line and the
   price line: Oxanium, 14px, 0.15em tracking, ink). */
.product-thumb .product-category {
  font-family: 'Oxanium', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.15em;
  color: var(--aymat-color-ink);
  margin-bottom: 10px;
  text-transform: uppercase;
}

/* Price - accent-red per Joel's request, 2026-09-14 (right-justified,
   1.5em, matching the card's other accent-red hover/highlight color). */
.product-thumb .price {
  margin: 10px 0;
  text-align: right;
}
.product-thumb .price .price-new,
.product-thumb .price .price-old {
  font-family: 'Oxanium', sans-serif;
  font-weight: 400;
  font-size: 1.5em;
  letter-spacing: 0.15em;
  color: var(--aymat-color-accent-red);
}

/* Excerpt/description text - matches the Astro card's excerpt paragraph,
   which carries no class of its own there and just inherits the site's
   global body type (16px / 1.72 line-height / 0.1em tracking). */
.product-thumb .product-excerpt {
  font-size: 16px;
  line-height: 1.72em;
  letter-spacing: 0.1em;
}

/* Card footer actions (Details / Add to Cart) - matches the live site's
   shop card footer (aymat.org/shop/): a dashed divider above a row with
   both actions side by side, same text-xs uppercase tracking-[1.6px]
   treatment the old single "View Product" link used. Pinned to the
   bottom of the card via margin-top: auto since .description above is a
   column flex container, 2026-09-15. */
.product-thumb .card-actions {
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px dashed var(--aymat-color-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.product-thumb .card-action {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--aymat-color-ink);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.product-thumb .card-action:hover {
  color: var(--aymat-color-accent-red);
}
.product-thumb .card-action i {
  font-size: 10px;
}
.product-thumb .card-action.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

/* Shop toolbar (Sort By / Show) - a custom dropdown (button + absolutely
   positioned list, wired up in aymat-shop-toolbar.js) matching the live
   site's archive toolbar (aymat.org/shop/) pixel-for-pixel: a native
   <select>'s OPEN option list is drawn by the browser/OS and can't be
   restyled (no border-radius, borders, hover color, row dividers) - only
   the closed control can be themed - so this rebuilds the whole thing
   from real markup instead, 2026-09-14. */
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 25px;
  position: relative;
  z-index: 10;
}
.shop-toolbar-field {
  position: relative;
}
.shop-toolbar-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: var(--aymat-color-ink);
  border: 1px solid var(--aymat-color-subtle);
  border-radius: 0;
  padding: 0 34px 0 13px;
  height: 41px;
  cursor: pointer;
}
.shop-toolbar-trigger:focus {
  outline: none;
  box-shadow: none;
}
.shop-toolbar-label,
.shop-toolbar-current {
  color: var(--aymat-color-muted);
  font-family: 'Oxanium', sans-serif;
  font-size: 12px;
  letter-spacing: 1.6px;
  white-space: nowrap;
}
.shop-toolbar-label {
  font-weight: 400;
}
.shop-toolbar-current {
  font-weight: 700;
}
.shop-toolbar-trigger i {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--aymat-color-muted);
  font-size: 10px;
  pointer-events: none;
  transition: transform 0.15s ease;
}
.shop-toolbar-field.is-open .shop-toolbar-trigger i {
  transform: translateY(-50%) rotate(180deg);
}
.shop-toolbar-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--aymat-color-ink);
  border: 1px solid var(--aymat-color-subtle);
  border-top: none;
  border-radius: 0;
  z-index: 20;
}
.shop-toolbar-field.is-open .shop-toolbar-list {
  display: block;
}
.shop-toolbar-list li {
  border-bottom: 1px solid var(--aymat-color-subtle);
}
.shop-toolbar-list li:last-child {
  border-bottom: none;
}
.shop-toolbar-list li a {
  display: block;
  height: 39px;
  line-height: 39px;
  padding: 0 13px;
  color: var(--aymat-color-muted);
  font-family: 'Oxanium', sans-serif;
  font-size: 12px;
  letter-spacing: 1.6px;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
/* Flat 0.85 opacity rollover, replacing the #3a3937 bg-lighten, per
   Joel's request, 2026-09-15 - matches every other dark-gray
   button/nav item site-wide. */
.shop-toolbar-list li a:hover,
.shop-toolbar-list li a:focus {
  background-color: var(--aymat-color-ink);
  color: var(--aymat-color-muted);
  opacity: 0.85;
  outline: none;
}
.shop-toolbar-list li.current a {
  font-weight: 700;
}

/* Header cart trigger - stripped down to a bare icon and colored the
   site's accent red, replacing the old full "X item(s) - $Y" dark-gray
   button, per Joel's request, 2026-09-21: matches the live WordPress/
   WooCommerce site's own nav cart icon exactly (#c64040, confirmed by
   inspecting it directly). Sits inline in the header nav now instead of
   its own dedicated column - see header.twig for the move. No fixed
   box/background/border at all, just the glyph, same treatment as
   .nav-toggle's icon-only button next to it. 12px matches Astro's own
   .header-cart-trigger exactly, per Joel's request, 2026-09-21 (was
   14px on both). */
.header-cart-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--aymat-color-accent-red);
  font-size: 12px;
  transition: opacity 0.15s ease;
}
/* Neutralizes the base theme's own stylesheet.css #cart { margin-bottom:
   10px; }, per Joel's request, 2026-09-21. That stock rule used to be
   masked by this file's own #cart margin override, back when cart was
   still a full-width button in its own column - once that override was
   removed as no-longer-needed, the stock 10px bottom-only margin was
   left showing through unmasked, which is what was throwing the icon's
   vertical centering off against the nav text next to it (an
   asymmetric margin shifts the flex-centered box, not just adds
   space). Zeroed here instead of restoring a same-looking override, so
   it's clear this exists specifically to cancel the stock rule out. */
#cart {
  margin-bottom: 0;
}
.header-cart-trigger:hover,
.header-cart-trigger:focus {
  opacity: 0.85;
  outline: none;
}

/* Header cart icon's mini-popup (Bootstrap dropdown-menu) - flat panel
   matching the shop's own card treatment: #afafaf background (the same
   panel tone product-thumb cards use), square corners, a plain #858585
   border. The remove-line "X" drops Bootstrap's red button entirely for
   a bare FA glyph, and View Cart/Checkout are restyled to match the
   product card footer's Details/Add to Cart links, 2026-09-14. */
#cart .cart-popup {
  background-color: #afafaf;
  border: 1px solid #858585;
  border-radius: 0;
  max-width: 480px;
}
/* On narrow screens the popup's fixed-width inner table (440px, see
   below) no longer fits between the two edges of the viewport, so the
   popup overflows sideways - since it's right-anchored to the cart
   button (.dropdown-menu-end pins the popup's right edge to the
   button's right edge, which itself sits 24px in from the viewport
   edge - the same 1.5rem gutter .container uses site-wide), the
   overflow runs off the LEFT edge and gets cropped instead of scrolled
   into view. Sizing the popup to (100vw - 48px) makes its own left edge
   land that same 24px in from the viewport's left edge, so the popup
   reads as evenly inset on both sides, matching the page's own margins
   instead of an arbitrary number, 2026-09-15. */
@media (max-width: 576px) {
  #cart .cart-popup {
    width: calc(100vw - 48px);
    max-width: calc(100vw - 48px);
  }
  #cart .cart-popup table.table-striped {
    width: 100%;
  }
}
#cart .cart-popup .img-thumbnail {
  background-color: #afafaf;
  border: none;
  border-radius: 0;
  padding: 0;
}
/* Bootstrap's table-striped paints its own zebra background straight
   onto the cells (a --bs-table-striped-bg var applied via
   tr:nth-of-type(odd) > *), which otherwise shows through lighter than
   the popup's own #afafaf - force every cell back to it. */
#cart .cart-popup .table-striped > tbody > tr > * {
  --bs-table-striped-bg: #afafaf;
  background-color: #afafaf;
  border: none;
}
/* The gap between the product table and the totals table used to show
   as a stray white line (Bootstrap's table margins leaving the popup's
   own background exposed oddly) - replace it with the same dashed
   divider used elsewhere on the card (.card-actions' border-top). */
#cart .cart-popup table.table-striped {
  margin-bottom: 0;
  /* A fixed-layout table with width:auto resolves its used width to the
     GREATER of its containing block's available width and the sum of
     its column widths (CSS2.1 17.5.2) - since that available width is
     effectively the popup's unclamped preferred width, an unconstrained
     table stretches well past what the columns below actually need.
     Giving the table a definite width removes that ambiguity, 2026-09-14. */
  table-layout: fixed;
  width: 440px;
}
#cart .cart-popup .table-striped td {
  overflow-wrap: break-word;
  /* Image / title / remove-X all line up against the top of the row
     instead of the default middle alignment, so a two-line title doesn't
     pull the thumbnail or the X down with it, 2026-09-15. */
  vertical-align: top;
}
/* The base theme's own stylesheet.css carries "#cart .img-thumbnail {
   min-width: 100px; }" - a min-width, not a width, so it doesn't lose to
   our (more specific) width rule below at all; it just clamps the box to
   never go below 100px regardless of what width says, which is exactly
   what was pushing the image past its 90px column. Override that
   min-width here too, pinned to the column's actual content-box (90px
   cell - 8px padding each side = 74px), 2026-09-15. */
#cart .cart-popup .table-striped .img-thumbnail {
  width: 74px;
  height: 74px;
  min-width: 0;
  object-fit: cover;
}
/* Just two explicit column widths now (thumb, remove-X) - the name/
   details column (2nd td) is left unset so it absorbs the rest of the
   table's 440px, giving the title real room to wrap onto two lines
   instead of fighting separate quantity/price columns for space. The
   quantity and price moved down into a second line inside that same
   cell (.cart-popup-qty-price below), matching Joel's reference layout,
   2026-09-15. */
#cart .cart-popup .table-striped td:nth-child(1) {
  width: 90px;
}
#cart .cart-popup .table-striped td:nth-child(3) {
  width: 30px;
  padding-left: 4px;
}
/* Quantity and price sit side by side, both left-justified - the
   quantity (not the price) reads bold, 2026-09-15. */
#cart .cart-popup .cart-popup-qty-price {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 8px;
}
#cart .cart-popup .cart-popup-qty {
  font-weight: 700;
}
#cart .cart-popup .cart-popup-totals {
  border-top: 1px dashed #858585;
  padding-top: 8px;
  margin-top: 8px;
}
/* Every row/column border in the totals table, 2px solid #afafaf (was
   1px, bumped with every other table border site-wide per Joel's
   request, 2026-09-15) - border-collapse can zero out the outer edges
   if only border-color is set, so border-width/style are spelled out
   explicitly here too. */
#cart .cart-popup .table-bordered {
  border-collapse: collapse;
}
#cart .cart-popup .table-bordered td {
  background-color: #afafaf;
  border: 2px solid #afafaf;
}
#cart .cart-popup .cart-popup-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  line-height: 1;
  color: var(--aymat-color-accent-red);
  box-shadow: none;
}
#cart .cart-popup .cart-popup-remove:hover,
#cart .cart-popup .cart-popup-remove:focus {
  background: none;
  color: var(--aymat-color-ink);
  box-shadow: none;
}
#cart .cart-popup .cart-popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}
#cart .cart-popup .cart-popup-action {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--aymat-color-ink);
  text-decoration: none;
}
#cart .cart-popup .cart-popup-action:hover {
  color: var(--aymat-color-accent-red);
}
#cart .cart-popup .cart-popup-action i {
  font-size: 10px;
}

/* Shopping cart page (checkout/cart route) - this was still wearing the
   base theme's default Bootstrap look (white table, stock red danger
   buttons, default accordion) even though the header/nav/buttons
   around it were already on-brand. Reskin it with the same panel
   color, dashed dividers, and button language used everywhere else on
   the site (product cards, cart popup) so it reads as part of the same
   build instead of a bolted-on default page, 2026-09-15.
   The breadcrumb bar this page (and every other page site-wide) used
   to carry above its content was removed entirely per Joel's request,
   2026-09-21 - its only real job, the Home crumb, pointed at OpenCart's
   own shop front page rather than aymat.org's actual home, which read
   as broken/misleading, and now that the header carries a real nav
   bar (added this same request) there's always a way back regardless.
   All 40 templates that carried the <ul class="breadcrumb"> markup had
   it stripped, and the .breadcrumb/.breadcrumb-item rules that used to
   style it are gone from here too - nothing left to hide or override. */

/* Account sidebar (Login/Register/My Account/Address Book/etc - the
   #column-right .list-group module, visible whenever it renders - only
   while logged out on Login/Register, always once logged in) - same
   dark gray button logic as the rest of the site, per Joel's request,
   2026-09-15: ink bg, muted text, square corners (both the item radius
   and the shared --bs-list-group-border-radius the first/last item
   read), a #bababa border between each link, flat 0.85 opacity on
   rollover with text staying the same muted gray in every state - same
   site-wide dark-gray-button/nav-item convention as .btn-primary (this
   replaced an initial red-text-on-hover pass the same day). */
#column-right .list-group {
  --bs-list-group-border-radius: 0;
}
#column-right .list-group-item {
  background-color: var(--aymat-color-ink);
  color: var(--aymat-color-muted);
  border-color: var(--aymat-color-muted);
  border-radius: 0;
  padding: 15px 16px;
  font-family: 'Michroma', sans-serif;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: opacity 0.15s ease;
}
#column-right .list-group-item:hover,
#column-right .list-group-item:focus {
  color: var(--aymat-color-muted);
  opacity: 0.85;
  z-index: 1;
}

/* Alert/confirmation banners (success, error, warning messages like the
   "Invalid token session" or "success" notices) - Bootstrap ships these
   as a tinted-per-variant bg with a matching border and a colored
   box-shadow ring, per Joel's request, 2026-09-15: flatten every
   variant to the same plain #e1e1e1 panel, no border, no border
   radius, no shadow ring - the text/icon color still varies by variant
   (Bootstrap's own success/danger/warning text color) so the message
   type stays distinguishable. Custom properties are redeclared here
   (rather than just background-color) since Bootstrap's own
   .alert-success/.alert-danger/etc. rules set --bs-alert-bg, which the
   base .alert rule's background-color reads - this file loads after
   bootstrap.css so it wins for every variant at once instead of
   needing a rule per variant. */
.alert {
  --bs-alert-bg: #e1e1e1;
  --bs-alert-border-color: transparent;
  --bs-alert-border-radius: 0;
  background-color: #e1e1e1;
  border: none;
  border-radius: 0;
  box-shadow: none !important;
}

/* Table cell borders, site-wide - was Bootstrap's default 1px, per
   Joel's request, 2026-09-15: too thin to read easily, bumped to 2px
   everywhere a table shows dividers (both plain .table row dividers
   and the full .table-bordered grid), current and future alike.
   Overriding border-width directly rather than the shared
   --bs-border-width variable, since buttons/cards/accordions/inputs
   also read that variable and would get a heavier border they were
   never asked for - these selectors mirror Bootstrap's own exactly so
   only tables are touched, and this file loading after bootstrap.css
   is what lets the plain border-width win on equal specificity. */
.table > :not(caption) > * > * {
  border-bottom-width: 2px;
}
.table-bordered > :not(caption) > * {
  border-width: 2px 0;
}
.table-bordered > :not(caption) > * > * {
  border-width: 0 2px;
}

/* Product table - #afafaf panel, #bababa border/dividers, matching the
   cart popup and product cards, replacing Bootstrap's white
   table-bordered look. Border color + the doubled outer border fixed
   per Joel's request, 2026-09-15: the wrapper div's own 1px border was
   stacking directly against table-bordered's own 1px table edge,
   reading as a heavier ~2px outline - the wrapper border is dropped
   entirely below so only the table's own (now #bababa) border shows. */
#checkout-cart #output-cart .table.table-bordered {
  margin-bottom: 50px;
  background-color: var(--aymat-color-link-bg);
  border-color: var(--aymat-color-muted);
}
#checkout-cart #output-cart .table.table-bordered > :not(caption) > * > * {
  background-color: var(--aymat-color-link-bg);
  border-color: var(--aymat-color-muted);
  color: var(--aymat-color-ink);
  vertical-align: middle;
}
#checkout-cart #output-cart thead th {
  font-family: 'Michroma', sans-serif;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 400;
}
#checkout-cart #output-cart tfoot td {
  border-top: 1px dashed var(--aymat-color-muted);
}
#checkout-cart #output-cart .img-thumbnail {
  background-color: var(--aymat-color-link-bg);
  border: 1px solid var(--aymat-color-muted);
  border-radius: 0;
  padding: 0;
  max-width: 80px;
  height: auto;
}

/* Account pages (Reward Points, Order History, Returns, Transactions,
   Downloads, Subscriptions, Wish List, Address Book, etc.) were still
   showing Bootstrap's plain white table-bordered look, per Joel's
   request, 2026-09-21: "Your Reward Points" and the other account
   tables never got the #bababa-panel/dark-header treatment applied to
   the cart's own #output-cart table back on 2026-09-15. Matched here
   exactly, scoped with an attribute selector against every account
   page wrapper div (all of which use id="account-*") rather than one
   id per page, so it covers every current account table and any
   future one without repeating this block. */
[id^="account-"] .table.table-bordered {
  background-color: var(--aymat-color-link-bg);
  border-color: var(--aymat-color-muted);
}
[id^="account-"] .table.table-bordered > :not(caption) > * > * {
  background-color: var(--aymat-color-link-bg);
  border-color: var(--aymat-color-muted);
  color: var(--aymat-color-ink);
  vertical-align: middle;
}
[id^="account-"] .table.table-bordered thead th {
  font-family: 'Michroma', sans-serif;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 400;
}

/* Quantity field, product option dropdown, and the coupon field below
   all go borderless per Joel's request, 2026-09-15 - same #bababa
   panel color as the rest of the cart, just no outline. */
#checkout-cart #output-cart .form-control,
#checkout-cart #output-cart .form-select {
  background-color: var(--aymat-color-muted);
  border: none;
  border-radius: 0;
  color: var(--aymat-color-ink);
}
#checkout-cart #output-cart .form-control:focus,
#checkout-cart #output-cart .form-select:focus {
  background-color: var(--aymat-color-muted);
  box-shadow: none;
}

/* Row remove icon - solid red bg, #bababa icon, no border, no rollover
   state at all per Joel's request, 2026-09-15 (corrected from a bare
   red-on-transparent icon to an actual filled red button). */
#checkout-cart #output-cart .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--aymat-color-accent-red);
  border: none;
  border-radius: 0;
  padding: 0 12px;
  color: var(--aymat-color-muted);
  box-shadow: none;
}
#checkout-cart #output-cart .btn-danger:hover,
#checkout-cart #output-cart .btn-danger:focus {
  background-color: var(--aymat-color-accent-red);
  color: var(--aymat-color-muted);
  box-shadow: none;
}

/* Coupon/voucher/reward accordion - flat panel, square corners, dark
   ink header when expanded (matching .btn-primary's hover language). */
#checkout-cart .accordion-item {
  background-color: var(--aymat-color-link-bg);
  border: 1px solid var(--aymat-color-muted);
  border-radius: 0;
  margin-bottom: 10px;
}
#checkout-cart .accordion-button {
  background-color: var(--aymat-color-link-bg);
  color: var(--aymat-color-ink);
  font-family: 'Michroma', sans-serif;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-radius: 0;
  box-shadow: none;
}
#checkout-cart .accordion-button:not(.collapsed) {
  background-color: var(--aymat-color-ink);
  color: var(--aymat-color-muted);
  box-shadow: none;
}
#checkout-cart .accordion-button:focus {
  box-shadow: none;
  border-color: var(--aymat-color-muted);
}
#checkout-cart .accordion-button:not(.collapsed)::after {
  /* Bootstrap's chevron is a dark-stroke background-image SVG - invert
     it so it stays visible against the now-dark expanded header. */
  filter: invert(1) brightness(2);
}
#checkout-cart .accordion-body {
  background-color: var(--aymat-color-link-bg);
}
#checkout-cart .accordion-body .form-control {
  background-color: var(--aymat-color-muted);
  border: none;
  border-radius: 0;
}
#checkout-cart .accordion-body .form-control:focus {
  box-shadow: none;
}
/* The coupon/voucher "Remove" button - solid red bg, #bababa text, no
   border, no rollover state, matching the row remove icon's treatment
   above, per Joel's request, 2026-09-15. */
#checkout-cart .accordion-body .btn-danger {
  background-color: var(--aymat-color-accent-red);
  border: none;
  color: var(--aymat-color-muted);
  border-radius: 0;
  font-family: 'Michroma', sans-serif;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
#checkout-cart .accordion-body .btn-danger:hover,
#checkout-cart .accordion-body .btn-danger:focus {
  background-color: var(--aymat-color-accent-red);
  border-color: transparent;
  color: var(--aymat-color-muted);
}

/* Continue Shopping button - site-wide .btn-light already goes
   transparent-bg/red-text on hover; this cart page also drops the
   border-color change that came with it, per Joel's request,
   2026-09-15. Scoped to #checkout-cart so every other .btn-light on the
   site (wishlist/compare icons, etc.) keeps its normal hover border. */
#checkout-cart .btn-light:hover {
  border-color: transparent;
}

/* Radio/checkbox accent color - red instead of the theme's stock blue,
   site-wide (register/guest checkout radios, the payment method modal,
   and every other form-check on the site), per Joel's request,
   2026-09-15. Deliberately not scoped to one page since this same "blue
   accents should be red" ask covers every account/checkout page. */
/* Standing rule going forward, per Joel's request, 2026-09-15: every
   radio/checkbox/toggle is #afafaf bg with no border at rest, and red
   is reserved for the checked/focus accent - supersedes the
   checked-only red fix this replaced. */
.form-check-input {
  background-color: var(--aymat-color-link-bg);
  border: none;
}
.form-check-input:checked {
  background-color: var(--aymat-color-accent-red);
  border-color: var(--aymat-color-accent-red);
}
.form-check-input:focus {
  border-color: var(--aymat-color-accent-red);
  box-shadow: 0 0 0 0.25rem rgba(198, 64, 64, 0.25);
}
/* Toggle switches (.form-switch, e.g. Register's "subscribe"/"agree to
   terms" toggles) draw their knob as a separate SVG background-image,
   not the element's own background-color, and Bootstrap bakes a fixed
   light-blue fill into that SVG specifically for the focus state - the
   red border/box-shadow above was already applying, but the knob
   itself stayed blue until focus was replaced here too, per Joel's
   request, 2026-09-15. Split into two cases after Joel flagged the
   first pass: a checked+focused switch (the moment right after you
   click it) was giving the knob the same red as the now-red track,
   making it disappear - checked always gets a #bababa knob instead
   (visible against the red track, focused or not), and red is reserved
   for an unchecked switch gaining focus (visible against the #afafaf
   track). */
.form-switch .form-check-input:checked {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23bababa'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23c64040'/%3e%3c/svg%3e");
}
/* Same white-on-red visibility problem as the toggle switch knob above,
   just for a plain checked radio/checkbox (e.g. Register's "Register
   Account"/"Guest Checkout" radios) - Bootstrap draws the dot/checkmark
   as a white SVG on top of the now-red checked background, so it reads
   as a red circle/box with nothing inside. #bababa instead of white,
   per Joel's request, 2026-09-15. Covers the indeterminate checkbox
   state too (previously the theme's stock blue). */
.form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23bababa'/%3e%3c/svg%3e");
}
.form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23bababa' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--aymat-color-accent-red);
  border-color: var(--aymat-color-accent-red);
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23bababa' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

/* Standing rule, per Joel's request, 2026-09-15: every text field on
   every page (Login and everything after it) is bg #afafaf, no border,
   no border radius - nothing else. Site-wide default so each new page
   doesn't need its own copy of this rule; Cart's own #bababa field
   color (already approved separately, kept as-is) still wins where it
   applies since that rule is scoped more specifically.
   Sizing (padding/font-size) added per Joel's request, 2026-09-15, to
   match the Astro site build's contact form field logic exactly
   (localhost:4321/contact/'s .form-field: px-4 py-3 text-sm = 16px/12px
   padding, 14px type) rather than Bootstrap's stock padding/font-size. */
.form-control,
.form-select,
textarea.form-control {
  background-color: var(--aymat-color-link-bg);
  border: none;
  border-radius: 0;
  padding: 12px 16px;
  font-size: 14px;
}
.form-control:focus,
.form-select:focus {
  background-color: var(--aymat-color-link-bg);
  box-shadow: none;
}

/* Login page (account/login route) - the "New Customer"/"Returning
   Customer" panels use Bootstrap's .border/.rounded utility classes
   (each !important, so this needs !important too to actually win), per
   Joel's request, 2026-09-15. */
#account-login .border {
  border: none !important;
}
#account-login .rounded {
  border-radius: 0 !important;
}

/* Checkout page (checkout/checkout route) - square corners + #afafaf
   fields and a #bababa/#afafaf order-summary table matching every other
   table on the site, per Joel's request, 2026-09-15. The blue Confirm
   Order button and blue radio buttons are fixed above (site-wide
   .btn-primary/.form-check-input fixes) rather than scoped here, since
   both bugs exist wherever those same classes appear, not just on this
   page. */
/* Dashed heading underline - was Checkout-only, but the same bare h1/
   legend markup (and legend's own default solid #e5e5e5 border) appears
   on every other page too (Register was missing it entirely), so this
   is unscoped and applies site-wide, per Joel's request, 2026-09-15. */
h1,
legend {
  padding-bottom: 10px;
  margin-bottom: 25px;
  border-bottom: 1px dashed var(--aymat-color-subtle);
}
/* Standing rule going forward, per Joel's request, 2026-09-15: every
   form field is bg #afafaf, no border, no border radius - nothing else.
   Corrected here from a border-radius-only pass that left Bootstrap's
   default 1px light-gray border in place. */
#checkout-checkout .form-control,
#checkout-checkout .form-select {
  background-color: var(--aymat-color-link-bg);
  border: none;
  border-radius: 0;
}
#checkout-checkout .form-control:focus,
#checkout-checkout .form-select:focus {
  background-color: var(--aymat-color-link-bg);
  box-shadow: none;
}
#checkout-confirm .table.table-bordered {
  border-color: var(--aymat-color-muted);
}
#checkout-confirm .table.table-bordered > :not(caption) > * > * {
  background-color: var(--aymat-color-link-bg);
  border-color: var(--aymat-color-muted);
  color: var(--aymat-color-ink);
}
/* Credit-card icon prefix on the Payment Method field - dark gray,
   matching the site's button color logic (ink bg, muted icon) rather
   than Bootstrap's plain white input-group-text. */
#checkout-payment-method .input-group-text {
  background-color: var(--aymat-color-ink);
  color: var(--aymat-color-muted);
  border: none;
  border-radius: 0;
}
/* Confirm Order sits disabled until the form validates, and Bootstrap's
   default disabled opacity (0.65) was fading the correct dark-ink
   color into a lighter, off-brand gray instead of reading as the same
   solid dark gray button used everywhere else on the site - per Joel's
   request, 2026-09-15, it stays full-strength dark gray whether
   disabled or not, same as every other action button. */
#checkout-payment .btn-primary:disabled,
#checkout-payment .btn-primary.disabled {
  opacity: 1;
}

/* Fullscreen film-grain overlay, ported from the Astro rebuild's
   src/styles/global.css (same grain.png texture, same animation). Sits
   above every page, pointer-events: none so it never blocks clicks. */
.grain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 99999;
}
.grain::after {
  content: '';
  background-image: url('aymat-grain.png');
  height: 300%;
  width: 300%;
  position: fixed;
  opacity: 0.0575;
  animation: 8s steps(10) 0s infinite normal none running aymatAnimateGrain;
}
@keyframes aymatAnimateGrain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, -20%); }
  30% { transform: translate(-5%, -10%); }
  40% { transform: translate(-15%, -20%); }
  50% { transform: translate(-5%, -10%); }
  60% { transform: translate(-15%, -20%); }
  70% { transform: translate(-5%, -10%); }
  80% { transform: translate(-15%, -20%); }
  90% { transform: translate(-5%, -10%); }
}

/* Waveform preview player - ported from the Astro rebuild's
   WaveformPlayer.astro (same look: plain gray play/pause icon, no button
   background, full-width bars that turn red as playback progresses). */
.waveform-player {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 15px 0;
}
.waveform-toggle {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background-color: transparent;
  color: var(--aymat-color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition: color 0.15s ease;
}
.waveform-toggle:hover,
.waveform-toggle:focus {
  color: var(--aymat-color-accent-red);
  outline: none;
}
.waveform-bars {
  cursor: pointer;
  flex: 1;
  display: flex;
  align-items: center;
  height: 40px;
  gap: 2px;
  overflow: hidden;
  min-width: 0;
}
.waveform-bar {
  width: 2px;
  flex-shrink: 0;
  background-color: var(--aymat-color-ink);
  border-radius: 1px;
}
.waveform-bar.is-played {
  background-color: var(--aymat-color-accent-red);
}

/* Page width - match the Astro site's own container (max-w-[1440px] mx-auto
   px-6). Bootstrap's .container has its own max-width per breakpoint
   (540/720/960/1140/1320px); this single unconditioned rule wins on the
   cascade over all of those since this file loads after bootstrap.css, and
   it's harmless below 1440px since max-width never forces anything wider. */
.container {
  max-width: 1440px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Cap product grids (Featured module etc.) at 3 columns instead of
   Bootstrap's 4-up at the xl breakpoint (row-cols-xl-4). Same rule as
   row-cols-md-3, just re-targeted so 3 stays the max at every width from
   md up instead of stepping to 4 at 1200px+. */
.row-cols-xl-4 > * {
  flex: 0 0 auto;
  width: 33.3333333%;
}

/* Single product page - recreates the Astro rebuild's product-detail page
   (src/pages/product/*.astro): hero (image | title/price/specs/intro/
   waveform/buy widget) then a 1/4 sidebar spec-sheet + 3/4 main prose
   column, 2026-09-14. */

/* Hero: image | content, 2-up from the sm breakpoint (640px) same as the
   Astro page's <Columns cols={2}> (grid-cols-1 sm:grid-cols-2), 40px/48px
   gutters matching Tailwind's gap-x-10 gap-y-12. */
.product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px 40px;
}
@media (min-width: 640px) {
  .product-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
/* CSS grid items default to min-width: auto, which lets a child's
   intrinsic content width (the Add to Cart input-group, the waveform
   player's flex row) force the column - and the whole page - wider than
   the viewport instead of actually shrinking on narrow screens. The
   minmax(0, 1fr) tracks above plus this belt-and-suspenders min-width: 0
   on the items themselves is what fixes that, 2026-09-14. */
.product-hero > * {
  min-width: 0;
}
.product-hero-media img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.hero-category {
  font-family: 'Michroma', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 0;
}
/* On mobile, drop to the same font-size as .hero-quickspecs (12px) per
   Joel's request, 2026-09-21 - 16px read too large/competing with the
   .shop-title above it once that was itself sized down to 16px on
   mobile (see the .shop-title mobile rule above). Desktop keeps 16px. */
@media (max-width: 767.98px) {
  .hero-category {
    font-size: 12px;
  }
}
.hero-price {
  margin-top: 15px;
  margin-bottom: 0;
}
.hero-quickspecs {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  margin-top: 15px;
  margin-bottom: 0;
}
.hero-intro {
  margin-top: 20px;
  margin-bottom: 0;
}
.hero-waveform {
  margin: 25px 0;
}
.hero-buy {
  margin-top: 20px;
}
/* Match the Add to Cart row's height to .btn-shop's 50px (Download
   Booklet etc.) so the two read as the same size, 2026-09-14. */
.hero-buy .input-group,
.hero-buy .input-group-text,
.hero-buy #input-quantity,
.hero-buy #button-cart {
  height: 50px;
}
.hero-buy .input-group-text,
.hero-buy #button-cart {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* "Qty" label chip - site's #afafaf panel color with dark ink text and a
   1px right-side divider against the quantity field, per Joel's request,
   2026-09-15. */
.hero-buy .input-group-text {
  background-color: var(--aymat-color-link-bg);
  color: var(--aymat-color-ink);
  border: none;
  border-right: 3px solid #bababa;
  border-radius: 0;
  font-family: 'Michroma', sans-serif;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
/* Add to Cart button - same #afafaf panel color as the Qty chip, dark
   ink text, with a matching 3px #bababa divider (on the left, since it
   sits after the quantity field), per Joel's request, 2026-09-15. */
.hero-buy #button-cart {
  background-color: var(--aymat-color-link-bg);
  border: none;
  border-left: 3px solid #bababa;
  color: var(--aymat-color-ink);
}
/* The global .btn-primary:hover rule sets border-color (all sides,
   !important) to the same #afafaf as the button's own background,
   which would make this left divider disappear on rollover - pin it
   back to #bababa so it stays visible in every state, 2026-09-15.
   Background is also pinned back to the button's own #afafaf here -
   this button is intentionally light gray, not dark ink, so it's
   outside the "dark gray action button" rollover convention (both the
   2026-09-14 darken-color change and the 2026-09-15 flat-opacity
   change that replaced it) that .btn-primary:hover otherwise carries -
   opacity is pinned back to 1 for the same reason. Text color is
   pinned too, to the accent red .btn-primary:hover used before the
   2026-09-15 change (now same-as-default) - this button's own default
   text is dark ink, not #bababa, so following the "same as default"
   rule would put ink-on-afafaf in both states, erasing the rollover
   feedback entirely; keeping the red preserves it. */
.hero-buy #button-cart:hover,
.hero-buy #button-cart:focus,
.hero-buy #button-cart:active {
  background-color: var(--aymat-color-link-bg) !important;
  border-left: 3px solid #bababa !important;
  color: var(--aymat-color-accent-red) !important;
  opacity: 1;
}
/* The quantity number field itself - site's #afafaf panel color, no
   border/radius. */
.hero-buy #input-quantity {
  background-color: var(--aymat-color-link-bg);
  border: none;
  border-radius: 0;
}
.hero-buy #input-quantity:focus {
  background-color: var(--aymat-color-link-bg);
  box-shadow: none;
}
.hero-booklet {
  margin-top: 10px;
}

/* Sidebar + main content split - matches the Astro page's grid-cols-1
   lg:grid-cols-4 (sidebar col-span-1, main col-span-3), lg breakpoint at
   1024px, same 40px/48px gutters. */
.product-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px 40px;
}
@media (min-width: 1024px) {
  .product-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  }
}
/* Same grid min-width: auto fix as .product-hero above - without this,
   the video embed and the Specifications 2-col list can force this
   column wider than the viewport on mobile. */
.product-detail-grid > * {
  min-width: 0;
}
.product-sidebar {
  background-color: var(--aymat-color-link-bg);
  padding: 20px;
  font-size: 14px;
}
.sidebar-field {
  margin-bottom: 24px;
}
.sidebar-field:last-child {
  margin-bottom: 0;
}
.sidebar-label {
  font-weight: bold;
  margin-bottom: 0;
}
.sidebar-value {
  margin-bottom: 0;
}

/* Ported design-token classes from the Astro rebuild's global.css, needed
   now that the product page reuses the actual class names (shop-title/
   shop-price/prose-body/btn-shop/section-divider weren't needed anywhere
   else in OpenCart until this page). */
.shop-title {
  font-size: 28px;
  letter-spacing: 0.125em;
  margin-top: 10px;
}
/* On mobile, drop to the same size/line-height/tracking as the shop
   archive card's own product title (.product-thumb h4: 16px / 1.2
   line-height / 0.15em tracking) per Joel's request, 2026-09-21 -
   28px read too large next to the narrower mobile hero column. Family/
   weight/color/uppercase already match via the shared h1-h6 rule above,
   so only these three need setting here. Desktop (768px+) keeps the
   28px size untouched. */
@media (max-width: 767.98px) {
  .shop-title {
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0.15em;
  }
}
/* Price styling matched to the shop archive card's own price
   (.product-thumb .price .price-new/.price-old: Oxanium 400, 0.15em
   tracking, accent-red) per Joel's request, 2026-09-21 - was bolder
   (700) and tighter-tracked (0.05em) than the card price. Font-size
   set to that price's rendered 24px (its 1.5em against a 16px base)
   rather than copying "1.5em" literally, since this element isn't
   nested in the same 16px-base context. Family and color already
   matched, text-align stays left (this page's price sits in its own
   line under the title, not right-justified in a card like the
   archive's). */
.shop-price {
  font-family: 'Oxanium', sans-serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.15em;
  color: var(--aymat-color-accent-red);
}
.section-divider {
  border: none;
  border-top: 1px dashed var(--aymat-color-subtle);
  margin: 50px 0;
  /* Bootstrap's reboot sets hr { opacity: .25 } by default, which washes
     out the #888581 border color to a much lighter gray than the live
     site's - reset it so the dash reads at full, correct color. */
  opacity: 1;
}
.prose-body p {
  margin-bottom: 1em;
}
.prose-body ul {
  list-style: disc;
  padding-left: 1.5em;
  margin-bottom: 1em;
}
.prose-body ul li + li {
  margin-top: 0.25em;
}
.prose-body h4 {
  font-family: 'Oxanium', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.15em;
  color: var(--aymat-color-ink);
  text-transform: none;
  margin-top: 2.66em;
  margin-bottom: 1.33em;
}
/* Plain <hr>, no special class required - added 2026-09-21 for Joel's
   Information page content (Terms & Conditions etc, via Admin > Catalog
   > Information > Description), which is hand-typed/pasted in CKEditor
   rather than copied verbatim from the Astro source, so it never carries
   the specific class="my-[30px]" the product page's own hr.my-\[30px\]
   rule below expects. Same dashed-line look as .section-divider. */
.prose-body hr {
  border: none;
  border-top: 1px dashed var(--aymat-color-subtle);
  margin: 50px 0;
  opacity: 1;
}
.prose-body a {
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
}
.btn-shop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  font-family: 'Michroma', sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--aymat-color-muted);
  background-color: var(--aymat-color-ink);
  border: none;
  border-radius: 0;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
/* Flat 0.85 opacity rollover, replacing the #202020 darken, per Joel's
   request, 2026-09-15 - matches the same change already made to
   .btn-primary/#cart .btn-dark/etc above and to .btn-shop in the Astro
   site build (this OpenCart copy was missed in that first pass since
   it's not used on any page that pass happened to check). */
.btn-shop:hover,
.btn-shop:focus {
  background-color: var(--aymat-color-ink);
  color: var(--aymat-color-muted);
  opacity: 0.85;
  outline: none;
}




.prose-body a.btn-shop {
  border-bottom: none;
  padding-bottom: 0;
}

/* Small hand-picked Tailwind-compatibility shim, scoped to .prose-body -
   the pasted product Description content (admin > Catalog > Products >
   Description) carries the exact Tailwind utility class names copied
   from the Astro source page's main column (mt-0 on each section
   heading, the dashed hr divider, the Specifications 2-col list, the
   Demo video embed wrapper). This is NOT a general Tailwind port - just
   the specific classes that content actually uses, 2026-09-14. */
.prose-body .mt-0 { margin-top: 0; }
.prose-body .mb-0 { margin-bottom: 0; }
.prose-body hr.my-\[30px\] {
  margin: 30px 0;
  border: none;
  border-top: 1px dashed var(--aymat-color-subtle);
  /* Same Bootstrap hr opacity reset as .section-divider above. */
  opacity: 1;
}
.prose-body .relative { position: relative; }
.prose-body .absolute { position: absolute; }
.prose-body .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.prose-body .w-full { width: 100%; }
.prose-body .h-full { height: 100%; }
.prose-body .overflow-hidden { overflow: hidden; }
.prose-body .aspect-video {
  aspect-ratio: 16 / 9;
}
.prose-body .mt-\[25px\] { margin-top: 25px; }
.prose-body .mt-\[10px\] { margin-top: 10px; }
.prose-body .ml-\[10px\] { margin-left: 10px; }
.prose-body ul.sm\:columns-2 { columns: 1; }
.prose-body .break-inside-avoid { break-inside: avoid; }
@media (min-width: 640px) {
  .prose-body ul.sm\:columns-2 {
    columns: 2;
    column-gap: 40px;
  }
}

/* Product image lightbox - same overlay treatment as the Astro rebuild's
   Lightbox.astro (articles): rgba(47, 46, 45, 0.9) dark ink backdrop,
   image capped to 90vw/90vh, top-right close button. Ported here for the
   shop per Joel's instruction, 2026-09-14. See
   catalog/view/javascript/aymat-lightbox.js for the click wiring - the
   overlay markup below is injected by that script, this just styles it. */
.lightbox-trigger {
  display: block;
  cursor: zoom-in;
}
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(47, 46, 45, 0.9);
  padding: 40px;
  cursor: zoom-out;
  /* Smooth fade-in/out, toggled via the .is-open class in
     aymat-lightbox.js (added a frame after unhiding so the transition
     actually has something to animate from), 2026-09-14. */
  opacity: 0;
  transition: opacity 0.28s ease;
}
.lightbox-overlay.is-open {
  opacity: 1;
}
.lightbox-overlay[hidden] {
  display: none;
}
.lightbox-image {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: default;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  /* Slight scale-up alongside the overlay fade for a softer entrance. */
  transform: scale(0.96);
  transition: transform 0.28s ease;
}
.lightbox-overlay.is-open .lightbox-image {
  transform: scale(1);
}
.lightbox-close {
  position: fixed;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  color: var(--aymat-color-muted);
  font-size: 22px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.lightbox-close:hover,
.lightbox-close:focus {
  color: var(--aymat-color-accent-red);
  outline: none;
}

/* Header - top/bottom padding matched to the Astro rebuild's header
   (py-6 = 24px top and bottom), per Joel's request, 2026-09-21, so the
   two headers read as the same height/spacing even though this is
   still stock Bootstrap markup underneath. */
header {
  padding-top: 24px;
  padding-bottom: 24px;
}
/* The header cart widget's old 15px top/bottom margin (needed when it
   was a full-width button stacked in its own column) is gone now that
   it's an inline icon sitting in the nav row, per Joel's request,
   2026-09-21 - .header-nav's own align-items: center handles vertical
   centering instead. The stock theme's mb-2 utility class was removed
   from header.twig's #cart div back when that margin was added, and
   stays removed - no longer relevant either way. */
/* Stock theme's #logo { margin: 7px 0; } (stylesheet.css) was adding
   extra top/bottom space on top of the header's own 24px padding above
   - zeroed per Joel's request, 2026-09-21, so the logo sits flush
   within the header's padding, matching the Astro header.
   Split evenly top/bottom (7.5px each) rather than all on the bottom
   (was margin-bottom: 15px alone), per Joel's request, 2026-09-21 -
   the logo's own column is the tallest one in the header row and so
   sets the row's height, so an all-bottom margin left the 75px logo
   image sitting above that column's true vertical center, throwing
   off the row's align-items: center (added to the row in header.twig
   this same request) that's meant to center the #cart widget against
   it. Splitting the margin evenly keeps the same 90px total column
   height (no visible header height change) but makes the logo image
   itself sit centered in its own column, which is what the cart
   widget's centering was actually measured against. */
#logo {
  margin-top: 7.5px;
  margin-bottom: 7.5px;
}
/* Logo image size - moved here from an inline style="" on the <img> in
   header.twig (removed, 2026-09-21) so it can be overridden by the
   mobile rule below without fighting inline-style specificity. 75px
   matches the Astro header's own logo size, unchanged from before. */
#logo img {
  width: 75px;
  height: 75px;
}
/* Mobile: centered and sized to match the footer logo's own mobile size
   (.footer-col-logo img at the same breakpoint - 100px), per Joel's
   request, 2026-09-21.
   Updated 2026-09-21 when the desktop nav was added: .header-brand-col
   is now display:flex (needed so the desktop nav list can sit to the
   right of the logo at md+), which means #logo no longer spans the
   full row width by default the way plain block flow used to give it
   for free - it's just as wide as its own content now. So centering
   has to happen on the row itself (.header-brand-col justify-content:
   center below, same fix Astro's own .header-row uses at this same
   breakpoint) rather than on #logo, which only centers content within
   its own box. #logo's own justify-content: center is left in place -
   harmless now, but keeps this working unchanged if #logo ever gets
   its own extra content again. */
@media (max-width: 767.98px) {
  .header-brand-col {
    justify-content: center;
  }
  #logo {
    justify-content: center;
  }
  #logo img {
    width: 100px;
    height: 100px;
  }
}

/* Mobile-only header nav (hamburger toggle + slide-down panel), added
   2026-09-21 per Joel's request - this header previously had no
   navigation at any breakpoint, only the footer's own "Site" column.
   Same design and behavior as the Astro rebuild's own Nav.astro mobile
   toggle (fa-bars/fa-xmark icon swap, same panel colors/hover speed),
   ported onto this file's own CSS custom properties instead of Astro's
   hardcoded hex. .header-brand-col (the logo's own column, marked up
   in header.twig) is the toggle/panel's positioning context, not the
   whole multi-row header, so the panel drops directly under the logo
   without being pushed down by the #cart row that stacks below it on
   mobile - same relationship the toggle has to the logo in Astro's
   single-row header. */
.header-brand-col {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Desktop nav list - Music/About/Coaching/Notes/Contact/Shop, matched
   to the Astro rebuild's own Nav.astro .menu-link exactly (same font/
   size/tracking/color and the same color-shift-to-red hover, not the
   opacity-dim rollover most other nav items on this site use), per
   Joel's request, 2026-09-21. Hidden below md via Bootstrap's own
   d-none/d-md-flex utilities on the <ul> itself (header.twig) rather
   than a rule here, same breakpoint as Astro's own hidden md:flex. */
.header-nav-list {
  gap: 32px;
}
.header-nav-link {
  font-family: 'Michroma', sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--aymat-color-ink);
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s linear;
}
.header-nav-link:hover {
  color: var(--aymat-color-accent-red);
}
/* Gap between the <nav>'s own top-level children - the desktop link
   list and the cart icon at md+ (toggle is hidden there), or the cart
   icon and the toggle below md (link list is hidden there) - same 32px
   rhythm as the link list's own internal gap so cart reads as just
   another item in the row at desktop, tightened to 16px on mobile
   below since it's only two small icons there, not a run of text
   links. Per Joel's request, 2026-09-21. */
.header-nav {
  gap: 32px;
}
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--aymat-color-ink);
}
.nav-toggle-icon {
  font-size: 20px;
  line-height: 1;
}
.nav-toggle-icon-close {
  display: none;
}
.nav-toggle.is-open .nav-toggle-icon-open {
  display: none;
}
.nav-toggle.is-open .nav-toggle-icon-close {
  display: block;
}
/* Full-bleed break-out to the true viewport width, per Joel's request,
   2026-09-21 - .mobile-menu's positioning ancestor is .header-brand-col
   (a padded Bootstrap column, not the full viewport), so width: 100%
   alone rendered it inset by the column's own padding instead of
   edge-to-edge like the Astro header's own dropdown (whose ancestor,
   <header>, has no horizontal padding of its own). left: 50% + width:
   100vw + a matching negative margin re-centers it on the true
   viewport regardless of the column's own padding, since the column is
   itself horizontally centered within the viewport (same math the
   standard CSS "full-bleed" trick relies on). */
.mobile-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 40;
  width: 100vw;
  margin-left: -50vw;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  /* This is a bare <ul>, and OpenCart doesn't carry the kind of global
     list reset Astro's Tailwind base styles give it for free - without
     one here the browser's own UA stylesheet was adding bullet markers
     plus ~40px of padding-left, which broke the full-bleed 100vw width
     above by insetting every .mobile-menu-link from the left only.
     Zeroed out to match the Astro nav's own (already-reset) mobile
     menu, per Joel's request, 2026-09-21. margin-top/bottom only, NOT
     the margin shorthand - this rule already carries margin-left: -50vw
     above as part of the full-bleed trick, and a "margin: 0" here would
     silently stomp it (same rule, later declaration wins). */
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}
.mobile-menu.is-open {
  max-height: 500px;
}
.mobile-menu-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 66px;
  width: 100%;
  background-color: var(--aymat-color-ink);
  color: var(--aymat-color-muted);
  font-family: 'Michroma', sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s linear, background-color 0.2s linear, border-color 0.2s linear;
}
.mobile-menu-link:hover {
  background-color: var(--aymat-color-muted);
  color: var(--aymat-color-accent-red);
}
@media (max-width: 767.98px) {
  /* Positioning moved from .nav-toggle alone to the whole .header-nav
     cluster, per Joel's request, 2026-09-21, when the cart icon joined
     it here - .header-nav-list is d-none below md, so the only two
     children left in flow are the cart icon and the toggle, and this
     pins that pair together at the corner (cart first in DOM order, so
     it lands to the left of the hamburger, matching the live site's
     own mobile layout, confirmed by inspecting it directly) instead of
     positioning each one separately. gap above (32px) is tightened here
     to 16px, plenty for two small icons. */
  .header-nav {
    position: absolute;
    top: 50%;
    /* 12px, not 0 - .header-brand-col (the positioning ancestor) already
       sits 12px in from the true viewport edge (the Bootstrap column's
       own padding), so this lands the icon pair at the same 24px total
       inset the Astro header's own toggle uses (measured against
       <header>, which has no padding of its own), per Joel's request,
       2026-09-21. */
    right: 12px;
    transform: translateY(-50%);
    gap: 16px;
    /* The transform above creates a new stacking context for .header-nav
       (and everything inside it, including the cart popup, which is a
       Bootstrap dropdown-menu at z-index:1000 - but that 1000 is only
       ranked within THIS stacking context, it can't escape it). Without
       an explicit z-index here, that whole context defaults to rank 0
       among its siblings, which loses to .shop-toolbar's z-index: 10
       (the sort/show dropdown on shop listing pages) - so the cart
       popup was rendering underneath it on mobile. z-index: 30 here
       beats .shop-toolbar-list's own 20, so the cart popup always wins,
       per Joel's request, 2026-09-21. */
    z-index: 30;
  }
  /* Bumped up from the desktop 12px to 16px on mobile, per Joel's
     request, 2026-09-21 - easier to tap/see at small sizes. Matches
     the same override in Astro's Nav.astro. */
  .header-cart-trigger {
    font-size: 16px;
  }
  .nav-toggle {
    display: flex;
  }
}

/* Footer */
footer {
  background-color: var(--aymat-color-ink);
  color: var(--aymat-color-muted);
  /* Kills the stock theme's light gray 1px top border (stylesheet.css
     footer { border-top: 1px solid #ddd; }), per Joel's request,
     2026-09-21 - reads as a stray line against the dark footer panel. */
  border-top: none;
}
footer a {
  color: var(--aymat-color-muted);
  transition: opacity 0.15s ease;
}
/* Flat 0.85 opacity rollover, replacing the red-text swap, per Joel's
   request, 2026-09-15 - matches every other dark-gray button/nav item
   site-wide (the footer itself is a dark ink panel). */
footer a:hover {
  color: var(--aymat-color-muted);
  opacity: 0.85;
}
/* Social column icon+label links - new column added 2026-09-21 (same 4
   links as the Astro footer's own Social column: Bandcamp/Mixcloud/
   Facebook/YouTube), styled with this footer's own plain link
   convention (footer a above) rather than porting Astro's Tailwind
   hover-slide button component. Just enough spacing/alignment for the
   icon to sit next to its label. */
.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-social-link i {
  width: 14px;
  text-align: center;
  /* Extra breathing room from the label, on top of the 8px flex gap
     above, per Joel's request, 2026-09-21. */
  margin-right: 8px;
}

/* Footer column headings - matched to the Astro rebuild's .footer-title
   spec exactly (Michroma 12px/400, 0.15em tracking, uppercase, dashed
   bottom border), color changed from the stock white to the same muted
   gray as the link text below rather than Astro's own ink color, since
   this footer is a dark panel (Astro's is on the light page background)
   - per Joel's request, 2026-09-21. */
footer h5 {
  font-family: 'Michroma', sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--aymat-color-muted);
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--aymat-color-subtle);
}

/* Footer column layout - 6 columns (Site / My Account / Information /
   Customer Service / Newsletter / Logo) matching the Astro footer's
   general idea, per Joel's request, 2026-09-21. Site was double width
   at first (matching Astro's own wider Site column) but flattened to
   equal width with the rest, per Joel's follow-up request, 2026-09-21.
   Single column stack on mobile, same as every other responsive grid
   on this site. */
.footer-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-top: 40px;
  padding-bottom: 30px;
}
@media (min-width: 768px) {
  .footer-columns {
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
  }
}

/* Footer newsletter form - ported from the Astro rebuild's own footer
   newsletter form (same email + Subscribe layout), per Joel's request,
   2026-09-21. The Subscribe button intentionally does NOT reuse the
   site's existing "action button" convention (.btn-primary: dark by
   default, opacity-dim on rollover) - Joel asked for this one flipped,
   light by default and dark on rollover, so it's its own class rather
   than reusing .btn-primary or .btn-light. */
.footer-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.form-field {
  background-color: var(--aymat-color-link-bg);
  color: var(--aymat-color-ink);
  border: none;
  border-radius: 0;
  outline: none;
  height: 50px;
  width: 100%;
  padding: 0 16px;
  font-family: 'Oxanium', sans-serif;
  font-size: 14px;
}
.form-field:focus {
  outline: none;
  box-shadow: none;
}
.form-field::placeholder {
  color: var(--aymat-color-ink);
  opacity: 0.7;
}
/* Explicit one-off colors per Joel's request, 2026-09-21, replacing the
   .btn-shop-reversed approach above - #444342 is a new one-off shade (not
   one of the shared design tokens), the text stays the site's muted gray,
   and the rollover swaps only the background to ink, per his spec. */
.footer-newsletter-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  font-family: 'Michroma', sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  cursor: pointer;
  background-color: #444342;
  color: var(--aymat-color-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.footer-newsletter-submit:hover,
.footer-newsletter-submit:focus {
  background-color: var(--aymat-color-ink);
  color: var(--aymat-color-muted);
  outline: none;
}
.footer-col-logo {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.footer-col-logo img {
  width: 150px;
  height: 150px;
  object-fit: contain;
}
@media (max-width: 767.98px) {
  .footer-col-logo img {
    width: 100px;
    height: 100px;
  }
}

/* Copyright line matched to the Astro footer's own copyright paragraph
   (Tailwind text-xs -> 12px, body default weight 400 + 0.1em tracking +
   Oxanium), and to this footer's own link text color, per Joel's request,
   2026-09-21 - previously unstyled, so it fell back to the page's base
   body color/size instead of the footer's muted gray.
   Bottom padding set to 64px to match the Astro footer's own gap below
   its copyright line (measured via getBoundingClientRect, not just the
   guessed "~60px" - it comes from that footer's own 64px padding-bottom,
   Tailwind's py-16). Applied here instead of on Bootstrap's py-3 utility
   class, which was removed from the twig markup - py-3 sets padding via
   !important and would otherwise need fighting with !important of its
   own, same as the header #cart/mb-2 conflict fixed earlier. pt-3 (16px)
   was kept in the markup for the top, since only the bottom was asked
   to change. */
.footer-copyright {
  color: var(--aymat-color-muted);
  font-family: 'Oxanium', sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.1em;
  padding-bottom: 64px;
}