/* ==========================================================================
   AllBrands.com — 2026 brand refresh (page layer)

   Imported at the top of /css/responsive.css. Every rule is inside one scope
   selector (see "Scope" below), so on pages that are not opted in this sheet
   does nothing and style.css / responsive.css stay authoritative. Rolling
   back means removing the @import line.

   Colors, type, spacing and radii follow the v3 brand kit
   (AllBrands Brand & Identity System 3.0, September 2026):
     Cardinal #C22837 for the purchase action, Oxford Blue #102542 for
     structure, AllBrands Blue #005CAA for links and secondary actions,
     Jost for display, Lato for body, the dashed stitch as the graphic device.
   ========================================================================== */

/* --- Fonts (SIL OFL; files and licenses in /brand/fonts) ------------------ */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/brand/fonts/lato-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/brand/fonts/lato-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/brand/fonts/lato-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/brand/fonts/jost-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/brand/fonts/jost-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/brand/fonts/jost-latin-700-normal.woff2') format('woff2'); }

/* --- Tokens (from branding_updates/03-color/allbrands-tokens.css) --------- */
:root {
  --ab-red: #ED1C24;          /* Logo red: graphics and large display only */
  --ab-red-action: #C22837;   /* Cardinal: buttons, sale labels. 5.75:1 */
  --ab-red-deep: #9E1B24;     /* Cardinal hover/pressed */
  --ab-navy: #102542;
  --ab-blue: #005CAA;
  --ab-blue-indigo: #144669;
  --ab-blue-jeans: #65AFE1;   /* stitch threads, fills — never text on white */
  --ab-blue-baby: #6CD4FF;
  --ab-blue-uranian: #B2DDF7;
  --ab-ink: #221D23;
  --ab-slate: #5A6473;
  --ab-mist: #A8BACE;
  --ab-line: #D9DEE5;
  --ab-cloud: #F2F5F8;
  --ab-white: #FFFFFF;
  --ab-success: #1B7F4B;
  --ab-warning: #9A5B00;

  --ab-font-display: 'Jost', 'Avenir Next', 'Montserrat', system-ui, sans-serif;
  --ab-font-body: 'Lato', 'Helvetica Neue', Arial, sans-serif;

  --ab-radius-sm: 4px;
  --ab-radius-md: 8px;
  --ab-radius-pill: 999px;
  --ab-shadow-md: 0 4px 16px rgba(16, 37, 66, 0.10);
  --ab-shadow-lg: 0 16px 48px rgba(16, 37, 66, 0.14);
  --ab-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Layout */
  --ab-bar-h: 60px;          /* product bar height */
  --ab-sticky-top: 0px;      /* becomes the bar height while the bar shows */
  --ab-tabs-h: 49px;         /* sticky tab strip height */
  --ab-content: 1200px;
  --ab-gutter: 40px;
  --ab-bleed: max(var(--ab-gutter), (100% - var(--ab-content)) / 2);
  /* The stitch: dashed thread, ~18px on / 12px off, 3px stroke */
  --ab-stitch: repeating-linear-gradient(90deg, var(--ab-blue-jeans) 0 18px, transparent 18px 30px);
}
@media screen and (max-width: 1024px) { :root { --ab-gutter: 24px; } }
@media screen and (max-width: 600px)  { :root { --ab-gutter: 16px; --ab-bar-h: 56px; } }
/* Pinned headers tuck 1px under the bar so no sliver of content shows between them. */
html.ab-bar-on { --ab-sticky-top: calc(var(--ab-bar-h) - 1px); }

/* --- Icons: stroke glyphs used as CSS masks (they take currentColor) ------ */
:root {
  --ab-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  --ab-i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
  --ab-i-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E");
  --ab-i-twitter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z'/%3E%3C/svg%3E");
  --ab-i-youtube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z'/%3E%3Cpath d='m9.75 15.02 5.75-3.27-5.75-3.27z'/%3E%3C/svg%3E");
  --ab-i-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E");
  --ab-i-pinterest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M10.5 21.5 12.2 14'/%3E%3Cpath d='M9.2 12.6c-.6-2.6 1.1-5.1 3.6-5.1 2.3 0 3.7 1.6 3.7 3.7 0 2.5-1.4 4.6-3.3 4.6-1 0-1.7-.7-1.5-1.6l.8-3.2'/%3E%3C/svg%3E");
  --ab-i-blog: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
  --ab-i-forum: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E");
  --ab-i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  --ab-i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E");
  --ab-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --ab-i-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2'/%3E%3Cpath d='M1 10h22'/%3E%3C/svg%3E");
  --ab-i-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
  --ab-i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  --ab-i-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
  --ab-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  --ab-i-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98'/%3E%3C/svg%3E");
  --ab-i-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z'/%3E%3C/svg%3E");
  --ab-i-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --ab-i-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  --ab-i-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E");
  --ab-i-chevron-right-mist: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8BACE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --ab-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --ab-i-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h15v13H1zM16 8h4l3 3v5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
  --ab-i-search-slate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6473' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  --ab-i-chevron-down-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23221D23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --ab-i-cart-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
  --ab-i-truck-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005CAA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h15v13H1zM16 8h4l3 3v5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Scope. The refresh now applies site-wide. This sheet is linked in the
   layout head, so it is render-blocking and the legacy design never flashes
   first. `html.ab-legacy` (set by /js/responsive.js for ?brand=old) turns it
   off again for side-by-side checks; because that script is deferred, an
   opted-out page shows the new design for a moment first.
   The --ab-on sentinel tells responsive.js the layer really applied (it needs
   CSS nesting and :has()); the script runs its enhancements only then, and
   adds html.ab-js when it has.
   ========================================================================== */
/* Used by the fallback reveal inside the scope (keyframes cannot be nested). */
@keyframes ab-fallback-reveal { from { visibility: hidden; } to { visibility: visible; } }

html:not(.ab-legacy) {
  /* ==========================================================================
     Base
     ========================================================================== */
  /* Legacy pieces that responsive.js replaces stay invisible (space held) only
     while it runs; if it never adds html.ab-js they reappear after 4s, so a
     failed script degrades to the old content rather than to nothing. */
  & { --ab-on: 1; background: var(--ab-white); text-align: left; font-family: var(--ab-font-body); color: var(--ab-ink); }
  & body { background: var(--ab-white); font-family: var(--ab-font-body); color: var(--ab-ink); }
  & #greybar, & #site_nav, & #footer_block, & .ab-buybar-top { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  & #kontainer { position: static; min-width: 0; text-align: left; background: var(--ab-white); isolation: isolate; }
  & #lbg, & #wbg, & #cbg { background: none; }
  & #page_content { width: auto; margin: 0; padding: 0; background: none; }

  /* Page regions share one centered measure; the nav and footer bleed full width. */
  & #header,
  & #breadcrumbs,
  & #specials_and_promotions,
  & #page_innards,
  & #footnotes_holder,
  & #greybar .shrinkwrap {
    box-sizing: border-box; width: auto;
    max-width: calc(var(--ab-content) + 2 * var(--ab-gutter));
    margin-inline: auto; padding-inline: var(--ab-gutter);
  }

  & :focus-visible { outline: 3px solid var(--ab-blue); outline-offset: 2px; }
  & #greybar :focus-visible,
  & #site_nav :focus-visible,
  & #footer_block :focus-visible { outline-color: var(--ab-blue-baby); }

  /* Shared: mask icons take the current text color. */
  & .ab-icon::before,
  & #greybar ul.cpnav li a span,
  & #greybar ul li.contactnav a,
  & #footer_block div.contact_icons a,
  & #the_product p.share_wish_email a span {
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
    background: currentColor !important;
  }

  /* ==========================================================================
     Utility bar (#greybar)
     ========================================================================== */
  & #greybar { min-width: 0; height: auto; background: var(--ab-navy); text-align: left; }
  & #greybar #topnav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; min-height: 40px; }
  & #greybar #tn_left,
  & #greybar #tn_right { position: static; min-width: 0; text-align: left; }
  & #greybar ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; }
  & #greybar ul li { display: flex; align-items: center; padding: 0; color: var(--ab-mist); text-shadow: none; font: 400 13px/1 var(--ab-font-body); }
  & #greybar ul li a { display: inline-flex; align-items: center; gap: 7px; min-height: 0; padding: 12px 0; background: none; color: var(--ab-white); text-shadow: none; font: 400 13px/16px var(--ab-font-body); text-decoration: none; }
  & #greybar ul li a:hover { color: var(--ab-white); text-decoration: underline; text-underline-offset: 3px; }
  & #greybar ul li.contactnav { gap: 12px; }
  & #greybar ul li.contactnav a { top: 0; width: 16px; height: 16px; margin: 0; padding: 0; color: var(--ab-mist); overflow: hidden; }
  & #greybar ul li.contactnav a:hover { color: var(--ab-white); }
  & #greybar ul.cpnav li a span { top: 0; float: none; width: 16px; height: 16px; margin: 0; padding: 0; color: var(--ab-mist); }
  & #greybar ul.cpnav li a:hover span { color: var(--ab-white); }
  & #greybar ul.cpnav li a:hover { text-decoration: underline; }
  & #greybar a.ph, & #footer_block a.ph { --icon: var(--ab-i-phone); }
  & #greybar a.em, & #footer_block a.em { --icon: var(--ab-i-mail); }
  & #greybar a.fb, & #footer_block a.fb { --icon: var(--ab-i-facebook); }
  & #greybar a.tw, & #footer_block a.tw { --icon: var(--ab-i-twitter); }
  & #greybar a.wl span { --icon: var(--ab-i-heart); }
  & #greybar a.ma span { --icon: var(--ab-i-user); }
  & #greybar a.mc span { --icon: var(--ab-i-cart); }

  /* ==========================================================================
     Header: logo · search · phone
     ========================================================================== */
  & #header {
    display: grid; position: relative; height: auto; min-height: 0; border: 0;
    grid-template-columns: auto minmax(260px, 1fr) auto;
    grid-template-areas: "dev dev dev" "logo search phone" "logo quote stores";
    align-items: center; gap: 2px 40px; padding-block: 14px 12px;
  }
  & #header:has(> #dev_banner) { padding-top: 26px; }
  /* Wraps rather than widening the page: with the compare link it is wider
     than a phone, and a nowrap banner would put the whole site in horizontal
     scroll. */
  & #header #dev_banner { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 1; box-sizing: border-box; width: auto; max-width: 100%; margin: 0; padding: 2px 10px; border-radius: var(--ab-radius-pill); background: #FFF4DB; color: var(--ab-warning); font: 700 11px/1.4 var(--ab-font-body); text-align: center; letter-spacing: .06em; text-transform: uppercase; }
  & #header #dev_banner .ab-dev-compare { margin-left: 8px; color: var(--ab-blue); font-weight: 700; text-decoration: underline; text-underline-offset: .18em; white-space: nowrap; }
  & #header #logo { grid-area: logo; position: static; width: auto; height: auto; margin: 0; padding: 0; }
  & #header #logo a {
    position: static; display: block; transform: none; width: 240px; height: 46px; aspect-ratio: auto;
    background: url('/brand/logos/allbrands-logo-primary.svg') left center / contain no-repeat;
    text-indent: -9999px; overflow: hidden;
  }
  & #header #search { grid-area: search; position: static; width: auto; height: auto; margin: 0; transform: none; background: none; }
  & #header #search form { position: static; display: flex; width: 100%; height: auto; }
  & #header #search input#searchbar {
    position: static; box-sizing: border-box; flex: 1; min-width: 0; width: auto; height: 48px; margin: 0;
    padding: 0 14px 0 44px !important; border: 1px solid var(--ab-slate); border-right: 0; border-radius: var(--ab-radius-sm) 0 0 var(--ab-radius-sm);
    background: var(--ab-white) var(--ab-i-search-slate) 14px center / 18px no-repeat;
    color: var(--ab-ink); font: 400 16px/1 var(--ab-font-body);
  }
  & #header #search input#searchbar::placeholder { color: var(--ab-slate); opacity: 1; font-weight: 400; }
  & #header #search input#searchbar:focus { outline: 3px solid var(--ab-blue); outline-offset: -1px; border-color: var(--ab-blue); }
  & #header #search input#search_submit {
    position: static; flex: none; width: auto; height: 48px; margin: 0; padding: 0 22px; text-indent: 0;
    border: 0; border-radius: 0 var(--ab-radius-sm) var(--ab-radius-sm) 0; background: var(--ab-navy);
    color: var(--ab-white); font: 600 16px/1 var(--ab-font-display); letter-spacing: .01em; cursor: pointer;
  }
  & #header #search input#search_submit:hover { background: var(--ab-blue-indigo); }
  & #header #site_description { display: contents; color: var(--ab-ink); }
  & #header #site_description h4 {
    grid-area: phone; justify-self: end; margin: 0; text-align: right;
    color: var(--ab-slate); font: 500 13px/1.2 var(--ab-font-display); letter-spacing: .02em;
  }
  & #header #site_description h4 .lmc_allbrands { display: block; margin-top: 2px; color: var(--ab-navy); font: 600 24px/1.15 var(--ab-font-display); letter-spacing: -.01em; white-space: nowrap; }
  & #header #site_description > p { grid-area: stores; justify-self: end; margin: 0; font: 400 14px/1.4 var(--ab-font-body); }
  & #header #site_description > p a { color: var(--ab-blue); text-decoration: underline; text-underline-offset: .18em; }
  /* The legacy jQuery rotator keeps running unseen; .ab-quotes (built in
     responsive.js) replaces it. All quotes share one grid cell, so the row is
     always as tall as the longest one and nothing shifts while they fade. */
  & #header #site_description div.quote { grid-area: quote; align-self: start; min-width: 0; height: 19px; margin: 4px 0 0; overflow: hidden; }
  & #header #site_description div.quote p { margin: 0 0 200px; color: var(--ab-slate); font: italic 400 13px/1.45 var(--ab-font-body); text-align: left; }
  &.ab-js #header #site_description div.quote { display: none !important; }
  & #header .ab-quotes { display: grid; grid-area: quote; align-self: start; min-width: 0; margin: 4px 0 0; }
  & #header .ab-quotes p {
    grid-area: 1 / 1; margin: 0; text-align: left; color: var(--ab-slate); font: italic 400 13px/1.45 var(--ab-font-body);
    opacity: 0; visibility: hidden; transition: opacity 600ms var(--ab-ease), visibility 0s linear 600ms;
  }
  & #header .ab-quotes p.is-active { opacity: 1; visibility: visible; transition: opacity 600ms var(--ab-ease) 300ms; }

  /* ==========================================================================
     Main navigation — full-bleed navy band
     ========================================================================== */
  & #site_nav { position: relative; z-index: 1000; width: auto; height: auto; margin: 0; padding-inline: var(--ab-bleed); background: var(--ab-navy); }
  & #site_nav #nav { position: relative; display: block; width: auto; }
  & #site_nav ul#main { display: flex; justify-content: center; width: auto; margin: 0; padding: 0; text-align: left; }
  & #site_nav ul#main li.tl { position: relative; display: block; flex: 0 0 auto; background: none !important; }
  & #site_nav ul#main li.tl a.tl {
    position: relative; width: auto !important; padding: 16px 18px; background: none !important;
    color: var(--ab-white) !important; text-shadow: none !important; filter: none;
    font: 500 16px/22px var(--ab-font-display); letter-spacing: .01em;
  }
  /* The end-cap sprites also have .hover/:hover variants in style.css, which
     carry one more class than the plain rule; match them or they come back. */
  & #site_nav ul#main li#sewing a.tl,
  & #site_nav ul#main li#all a.tl,
  & #site_nav.hover ul#main li#sewing.hover a.tl,
  & #site_nav.hover ul#main li#all.hover a.tl,
  & #site_nav.nojs ul#main li#sewing:hover a.tl,
  & #site_nav.nojs ul#main li#all:hover a.tl { background: none !important; }
  & #site_nav ul#main li.tl a.tl::after {
    content: ''; position: absolute; left: 18px; right: 18px; bottom: 9px; height: 3px; border-radius: 2px;
    background: var(--ab-red); transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--ab-ease);
  }
  & #site_nav.hover ul#main li.tl.hover a.tl::after,
  & #site_nav.nojs ul#main li.tl:hover a.tl::after,
  & #site_nav ul#main li.tl a.tl:focus-visible::after { transform: scaleX(1); }

  /* Mega-menu panels: white, lifted, anchored to their department. */
  & #site_nav ul#main ul.subnav {
    box-sizing: border-box; padding: 8px 0 12px; border: 0; border-top: 3px solid var(--ab-red);
    border-radius: 0 0 var(--ab-radius-md) var(--ab-radius-md); background: var(--ab-white); box-shadow: var(--ab-shadow-lg);
    font-family: var(--ab-font-body); overflow: hidden;
  }
  & #site_nav.hover ul#main li.tl.hover ul.subnav,
  & #site_nav.nojs ul#main li.tl:hover ul.subnav { top: 100% !important; left: var(--ab-sub-x, 0px) !important; right: auto !important; }
  & #site_nav ul#main ul.subnav li.navcol h4,
  & #site_nav ul#main ul.subnav li.navcol strong { margin: 14px 0 6px; }
  & #site_nav ul#main ul.subnav li.navcol h4 a,
  & #site_nav ul#main ul.subnav li.navcol strong {
    color: var(--ab-navy); font: 600 12px/1.3 var(--ab-font-display); letter-spacing: .12em; text-transform: uppercase;
  }
  & #site_nav ul#main ul.subnav li.navcol a { display: block; padding: 4px 0; color: var(--ab-ink); font: 400 14px/1.35 var(--ab-font-body); }
  & #site_nav ul#main ul.subnav li.navcol a:hover { color: var(--ab-blue); text-decoration: underline; text-underline-offset: .18em; }
  & #site_nav ul#main ul.subnav li.last { background: var(--ab-cloud); border-left: 1px solid var(--ab-line); }
  & #site_nav ul#main ul.subnav li.specials_link { box-sizing: border-box; width: 233px; background: var(--ab-navy); border-top: 0; text-shadow: none; }
  & #site_nav ul#main ul.subnav li.specials_link a { width: auto; color: var(--ab-white); text-shadow: none; font: 600 15px/1.3 var(--ab-font-display); }
  & #site_nav ul#main ul.subnav li.specials_link a:hover { color: var(--ab-white); text-decoration: underline; }

  /* ==========================================================================
     Breadcrumbs
     ========================================================================== */
  & #breadcrumbs { height: auto; margin-top: 0; padding-block: 10px 0; background: none; overflow: hidden !important; }
  & #breadcrumbs #ebc { position: static; float: none; display: flex; flex-wrap: nowrap; align-items: center; width: auto; min-width: 0; margin: 0; padding: 0; }
  & #breadcrumbs #ebc li { min-width: 4.5em; flex: 0 12 auto; }
  & #breadcrumbs #ebc li:first-of-type { min-width: 0; flex-shrink: 0; }
  & #breadcrumbs #ebc li:last-of-type { flex-shrink: 1; }
  & #breadcrumbs #ebc li:hover,
  & #breadcrumbs #ebc li:focus-within { flex-shrink: 0; }
  & #breadcrumbs #ebc li > a { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  & #breadcrumbs #ebc li { display: flex; align-items: center; float: none; padding: 0 !important; background: none !important; }
  & #breadcrumbs #ebc li + li::before {
    content: ''; width: 14px; height: 14px; margin: 0 6px; flex: none; color: var(--ab-mist);
    background: currentColor; -webkit-mask: var(--ab-i-chevron-right) center / contain no-repeat; mask: var(--ab-i-chevron-right) center / contain no-repeat;
  }
  & #breadcrumbs #ebc li a,
  & #breadcrumbs #ebc li a:visited {
    width: auto !important; overflow: hidden !important; text-overflow: ellipsis; padding: 2px 0; color: var(--ab-slate);
    text-shadow: none; font: 400 14px/1.4 var(--ab-font-body); text-decoration: none; white-space: nowrap;
  }
  & #breadcrumbs #ebc li a:hover { color: var(--ab-blue); text-decoration: underline; text-underline-offset: .18em; }
  & #breadcrumbs #ebc li:last-of-type a { color: var(--ab-ink); }



  /* ==========================================================================
     Cart option screens: /cart/add_item (confirm the options before the line
     is created) and /cart/edit_item (change them afterwards). The two forms
     carry the same blocks, so they share everything here.
     ========================================================================== */
  /* The page's own <style> boxes the whole form in 1px black. The blocks
     inside carry their own edges, so the box goes. */
  & form.add_item,
  & form.edit_item { box-sizing: border-box; margin: 0 0 8px; padding: 0; border: 0; background: none; }

  & form.add_item > strong,
  & form.edit_item > h2 {
    display: block; margin: 0 0 4px; color: var(--ab-navy); letter-spacing: -.01em;
    font: 600 clamp(18px, .95rem + .6vw, 22px)/1.3 var(--ab-font-display);
  }
  /* "Please select a value for all available options" */
  & .add_errors {
    margin: 14px 0 0; padding: 11px 16px;
    border: 1px solid #F0C4C8; border-left: 4px solid var(--ab-red-action); border-radius: var(--ab-radius-md);
    background: #FDF0F1; color: var(--ab-red-deep); font: 700 14px/1.5 var(--ab-font-body);
  }
  & .add_errors:empty { display: none; }
  /* The unclassed line of instructions that follows it. */
  & form.add_item > div:not([class]) { margin: 12px 0 20px; color: var(--ab-slate); font: 400 14px/1.55 var(--ab-font-body); }

  /* One option per row, label above its control. The rows inside .ss-item are
     an accessory's own options and keep their card; these are the product's. */
  & form.add_item > .detail_block,
  & form.edit_item > .detail_block {
    display: grid; gap: 6px; max-width: 520px; margin: 0 0 14px; padding: 0;
  }
  & form.add_item > .detail_block > label,
  & form.edit_item > .detail_block > label {
    float: none; display: block; width: auto; margin: 0;
    color: var(--ab-ink); font: 700 14px/1.4 var(--ab-font-body);
  }

  /* The "you still have to choose" state is a pink box around the control.
     Keep the signal, put it on the control as a red ring. */
  & .highlight_fields .option_input,
  & .highlight_fields .option_radio_list {
    display: block; width: auto; margin: 0; padding: 0; border: 0; background: none; text-align: left;
  }
  /* highlight_fields marks a field as required, not as unanswered — edit_item
     carries it on rows that already have a value. "Please Choose" is always
     value="-1", so ring only those, and the ring clears as soon as one is
     picked rather than waiting for a round trip. */
  & .highlight_fields .option_input select:has(option[value="-1"]:checked) {
    border-color: var(--ab-red-action); box-shadow: 0 0 0 3px rgba(194, 40, 55, .12);
  }
  & .highlight_fields .option_input.optional select {
    border-color: var(--ab-slate); box-shadow: none;
  }

  /* Controls match the product page's buy box. The page's own <style> pins
     these to 200px, hence the option_input in the selector. */
  & form.add_item .option_input select,
  & form.edit_item .option_input select,
  & form.add_item .option_input input[type="text"],
  & form.edit_item .option_input input[type="text"] {
    box-sizing: border-box; display: block; width: 100%; max-width: 340px; min-height: 46px;
    margin: 0; padding: 10px 14px; border: 1px solid var(--ab-slate); border-radius: var(--ab-radius-sm);
    background: var(--ab-white); color: var(--ab-ink); font: 400 15px/1.3 var(--ab-font-body);
  }
  & form.add_item .option_input select,
  & form.edit_item .option_input select {
    appearance: none; -webkit-appearance: none; padding-right: 40px;
    background: var(--ab-white) var(--ab-i-chevron-down-ink) right 14px center / 16px no-repeat;
  }
  & form.add_item .option_input select:hover,
  & form.edit_item .option_input select:hover { border-color: var(--ab-navy); }

  /* Accessory rows: the checkbox is the control, so give it a real target. */
  & form.add_item .ss-item input.select_item,
  & form.edit_item .ss-item input.select_item { width: 17px; height: 17px; accent-color: var(--ab-red-action); }

  /* Submit. Both are image buttons or bare defaults in the legacy design. */
  & form.add_item input.add_to_cart,
  & form.edit_item input[type="submit"] {
    box-sizing: border-box; width: auto; min-width: 200px; height: auto; min-height: 52px;
    margin: 4px 0; padding: 0 28px; border: 2px solid var(--ab-red-action); border-radius: var(--ab-radius-sm);
    background: var(--ab-red-action); color: var(--ab-white); cursor: pointer;
    text-indent: 0; overflow: visible; line-height: 1; text-align: center;
    margin-right: 14px; font: 600 17px/1 var(--ab-font-display);
    transition: background-color 200ms var(--ab-ease), border-color 200ms var(--ab-ease);
  }
  & form.add_item input.add_to_cart:hover,
  & form.add_item input.add_to_cart.hover,
  & form.edit_item input[type="submit"]:hover {
    border-color: var(--ab-red-deep); background-color: var(--ab-red-deep); background-position: 0 0;
  }
  /* "or Cancel" sits beside the submit; on add_item it goes back to the
     product, on edit_item to the cart, so match the position not the href. */
  & form.add_item input.add_to_cart,
  & form.edit_item input[type="submit"],
  & form.add_item > a,
  & form.edit_item > a { vertical-align: middle; }
  & form.add_item > a,
  & form.edit_item > a {
    display: inline-block; margin-left: 10px; color: var(--ab-blue);
    font: 600 15px/1 var(--ab-font-display); text-underline-offset: .18em;
  }
  & form.add_item > a:hover,
  & form.edit_item > a:hover { color: var(--ab-navy); }

  @media screen and (max-width: 600px) {
    & form.add_item .option_input select,
    & form.edit_item .option_input select,
    & form.add_item .option_input input[type="text"],
    & form.edit_item .option_input input[type="text"] { max-width: none; min-height: 44px; font-size: 16px; }
    & form.add_item input.add_to_cart,
    & form.edit_item input[type="submit"] { width: 100%; min-width: 0; }
  }

  /* ==========================================================================
     Flash messages + the shipping/coupon loading overlay. Both are shared with
     checkout and account pages, so they sit outside the cart section.
     ========================================================================== */
  /* The legacy banner is a full-bleed 5px-bordered strip; bring it inside the
     page measure and give each state a readable tint. */
  & div.flash_message {
    box-sizing: border-box; margin: 6px var(--ab-bleed) 18px; padding: 12px 18px;
    border: 1px solid var(--ab-line); border-left: 4px solid var(--ab-slate); border-top-width: 1px;
    border-radius: var(--ab-radius-md); background: var(--ab-cloud);
    color: var(--ab-ink); font: 400 14px/1.5 var(--ab-font-body);
  }
  & div.flash_message.alert { border-color: #EFDCAE; border-left-color: var(--ab-warning); background: #FDF6E6; color: #6B4200; }
  & div.flash_message.notice { border-color: #BFE3CD; border-left-color: var(--ab-success); background: #EDF7F1; color: #14603A; }
  & div.flash_message.error { border-color: #F0C4C8; border-left-color: var(--ab-red-action); background: #FDF0F1; color: var(--ab-red-deep); }
  & div.flash_message a { color: inherit; text-underline-offset: .18em; }

  /* The cart's overlay is positioned at 35% of the *document*, so on a long
     page it can be well off-screen exactly when it is meant to be seen. Pin it
     to the viewport instead. jQuery toggles `display` inline, so the centering
     lives on the image rather than on a display mode this rule would lose. */
  & #loading_overlay {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 900;
    width: auto; height: auto; margin: 0; transform: none;
    background: rgba(16, 37, 66, .45);
  }
  & #loading_overlay img {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    padding: 22px; border-radius: var(--ab-radius-md);
    background: var(--ab-white); box-shadow: var(--ab-shadow-lg);
  }

  /* ==========================================================================
     Connect strip (built from the legacy image map) + promotion banner
     ========================================================================== */
  & #specials_and_promotions { display: grid; gap: 10px; padding-block: 10px 0; text-align: left !important; }
  & #specials_and_promotions img[usemap] { display: block; max-width: 100%; height: auto; margin-inline: auto; animation: ab-fallback-reveal 0s linear 4s both; }
  &.ab-js #specials_and_promotions img[usemap] { display: none; }
  /* The promotions link keeps its original look — a black bar with white caps —
     but as live text that scales and wraps instead of a fixed 950px image. */
  /* One line, never taller than 40px: the type is at most 21px and otherwise
     scales with the section width (cqi) so the sentence always fits. */
  & #specials_and_promotions { container-type: inline-size; }
  & #specials_and_promotions > a {
    box-sizing: border-box; display: block; justify-self: center; width: 100%;
    height: 40px; padding: 0 12px; overflow: hidden; background: #000; color: var(--ab-white);
    text-align: center; text-decoration: none; white-space: nowrap; text-overflow: ellipsis;
    box-shadow: 0 6px 6px -4px rgba(0, 0, 0, .35);
    font: 600 min(21px, calc(3.2cqi - 1px))/40px var(--ab-font-display); letter-spacing: .03em; text-transform: uppercase;
  }
  & #specials_and_promotions > a:hover { text-decoration: underline; text-underline-offset: .18em; }
  & #specials_and_promotions > a img { display: block; width: auto; max-width: 100%; height: 40px; margin: 0 auto; object-fit: contain; animation: ab-fallback-reveal 0s linear 4s both; }
  &.ab-js #specials_and_promotions > a.ab-promo-text img { display: none; }
  /* Any other promo image (e.g. a campaign graphic) is shown as-is. */
  &.ab-js #specials_and_promotions > a:not(.ab-promo-text) { height: auto; padding: 0; background: none; box-shadow: none; }
  &.ab-js #specials_and_promotions > a:not(.ab-promo-text) img { height: auto; animation: none; }

  & .ab-connect {
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 16px;
    padding: 3px 6px 3px 14px; border-radius: var(--ab-radius-md); background: var(--ab-cloud);
    overflow-x: auto; scrollbar-width: none;
  }
  & .ab-connect::-webkit-scrollbar { display: none; }
  /* When the strip cannot fit, arrow buttons (and an edge fade) appear so it
     can be scrolled without a trackpad; see responsive.js. */
  & .ab-connect-wrap { position: relative; min-width: 0; }
  & .ab-connect-wrap.can-scroll-next .ab-connect { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent calc(100% - 8px)); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent calc(100% - 8px)); }
  & .ab-connect-wrap.can-scroll-prev .ab-connect { -webkit-mask-image: linear-gradient(90deg, transparent 8px, #000 56px); mask-image: linear-gradient(90deg, transparent 8px, #000 56px); }
  & .ab-connect-wrap.can-scroll-prev.can-scroll-next .ab-connect { -webkit-mask-image: linear-gradient(90deg, transparent 8px, #000 56px, #000 calc(100% - 56px), transparent calc(100% - 8px)); mask-image: linear-gradient(90deg, transparent 8px, #000 56px, #000 calc(100% - 56px), transparent calc(100% - 8px)); }
  & .ab-connect-scroll {
    position: absolute; top: 50%; z-index: 1; display: none; align-items: center; justify-content: center;
    width: 30px; height: 30px; margin-top: -15px; padding: 0; border: 1px solid var(--ab-line); border-radius: 50%;
    background: var(--ab-white); color: var(--ab-navy); cursor: pointer; box-shadow: 0 1px 2px rgba(16, 37, 66, .12);
  }
  & .ab-connect-scroll::before { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ab-i-chevron-right) center / contain no-repeat; mask: var(--ab-i-chevron-right) center / contain no-repeat; }
  & .ab-connect-scroll.is-prev { left: 4px; }
  & .ab-connect-scroll.is-prev::before { -webkit-mask-image: var(--ab-i-chevron-left); mask-image: var(--ab-i-chevron-left); }
  & .ab-connect-scroll.is-next { right: 4px; }
  & .ab-connect-wrap.can-scroll-prev .ab-connect-scroll.is-prev,
  & .ab-connect-wrap.can-scroll-next .ab-connect-scroll.is-next { display: flex; }
  @media screen and (max-width: 1199px) { & .ab-connect-label { display: none; } }
  & .ab-connect ul { display: flex; flex: none; flex-wrap: nowrap; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
  & .ab-connect li { margin: 0; padding: 0; list-style: none; }
  & .ab-connect-label { margin-right: 6px; color: var(--ab-slate); font: 600 12px/1 var(--ab-font-display); letter-spacing: .14em; text-transform: uppercase; }
  & .ab-connect a { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--ab-radius-sm); color: var(--ab-navy); text-decoration: none; }
  & .ab-connect a::before { content: ''; width: 18px; height: 18px; flex: none; }
  & .ab-connect .ab-connect-social a { justify-content: center; width: 34px; height: 34px; }
  & .ab-connect .ab-connect-social a.ab-connect-text { width: auto; padding: 0 8px; white-space: nowrap; font: 500 14px/1 var(--ab-font-display); }
  & .ab-connect .ab-connect-links a { min-height: 34px; padding: 0 10px; white-space: nowrap; font: 500 14px/1 var(--ab-font-display); }
  & .ab-connect a:hover { background: var(--ab-white); color: var(--ab-blue); box-shadow: 0 1px 2px rgba(16, 37, 66, .08); }
  & .ab-connect .ab-connect-links a:hover { text-decoration: underline; text-underline-offset: .18em; }
  & .ab-connect a:not([data-icon])::before { display: none; }
  & .ab-connect a[data-icon="facebook"] { --icon: var(--ab-i-facebook); }
  & .ab-connect a[data-icon="youtube"] { --icon: var(--ab-i-youtube); }
  & .ab-connect a[data-icon="instagram"] { --icon: var(--ab-i-instagram); }
  & .ab-connect a[data-icon="pinterest"] { --icon: var(--ab-i-pinterest); }
  & .ab-connect a[data-icon="twitter"] { --icon: var(--ab-i-twitter); }
  & .ab-connect a[data-icon="blog"] { --icon: var(--ab-i-blog); }
  & .ab-connect a[data-icon="forum"] { --icon: var(--ab-i-forum); }
  & .ab-connect a[data-icon="calendar"] { --icon: var(--ab-i-calendar); }
  & .ab-connect a[data-icon="events"] { --icon: var(--ab-i-star); }
  & .ab-connect a[data-icon="stores"] { --icon: var(--ab-i-pin); }
  & .ab-connect a[data-icon="financing"] { --icon: var(--ab-i-card); }
  & .ab-connect a[data-icon]::before {
    background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
  }
  & .ab-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  /* ==========================================================================
     Product hero: gallery + buy box
     ========================================================================== */
  & #page_innards { padding-top: 20px; }
  & #the_product {
    display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 48px; align-items: start;
    padding: 0; font-family: var(--ab-font-body); color: var(--ab-ink);
  }
  & #the_product > .clearfix { display: none; }

  /* Gallery */
  & #the_product #product_stage { width: auto; float: none; margin: 0; background: none; }
  & #the_product #product_stage #product_picture {
    box-sizing: border-box; display: flex; align-items: center; justify-content: center;
    width: 100%; height: 520px; padding: 32px;
    border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md); background: var(--ab-white);
  }
  & #the_product #product_stage #product_picture > span:empty { display: none; }
  & #the_product #product_stage #product_picture a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
  & #the_product #product_stage #product_picture img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
  & #the_product #product_stage #product_thumbnails { width: 100%; padding-top: 12px; }
  & #the_product #product_stage #product_thumbnails ul { display: flex; flex-wrap: wrap; gap: 10px; }
  & #the_product #product_stage #product_thumbnails ul li { flex: 0 0 76px; width: 76px; float: none; }
  & #the_product #product_stage #product_thumbnails a {
    right: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
    width: 76px; height: 76px; min-height: 0; margin: 0; padding: 5px;
    border: 1px solid var(--ab-line); border-radius: var(--ab-radius-sm); background: var(--ab-white);
    transition: border-color 200ms var(--ab-ease);
  }
  & #the_product #product_stage #product_thumbnails a:hover { border-color: var(--ab-navy); }
  & #the_product #product_stage #product_thumbnails img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
  & #the_product #product_stage #product_thumbnails .clearfix { display: none; }

  /* Buy box */
  & #the_product #product_description { position: relative; float: none; width: auto; min-width: 0; margin: 0; padding-top: 4px; font-family: var(--ab-font-body); }
  & #the_product #product_logo { display: block; width: auto; max-width: 100%; height: auto; max-height: 72px; margin: 0 0 14px; }
  & #the_product #product_description .pd_upc { margin: 0 0 8px; color: var(--ab-slate); font: 400 12px/1.4 var(--ab-font-body); letter-spacing: .03em; }
  & #the_product #product_description h1.product_title {
    margin: 0 0 14px; color: var(--ab-navy); font: 600 24px/1.3 var(--ab-font-display); letter-spacing: -.01em;
    overflow-wrap: anywhere; text-wrap: pretty;
  }
  & #the_product #product_description h1.product_title:focus:not(:focus-visible) { outline: none; }
  & #the_product #product_description p.stage_review { margin: 0 0 26px; color: var(--ab-slate); font: 400 15px/1.55 var(--ab-font-body); }
  & #the_product #product_description p.stage_review a { color: var(--ab-blue); font-weight: 700; text-decoration: underline; text-underline-offset: .18em; }

  /* A block element in the summary copy (a <center> wrapping a banner, as on
     95985) closes p.stage_review early, so its bottom margin lands hundreds of
     pixels above where the text -- and "Read More" -- actually end, and the
     card butted straight up against the link. A top margin here holds the gap
     whatever precedes it; where stage_review is intact the two collapse and
     the spacing is unchanged. */
  & #the_product #product_description #price_box {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; align-items: start;
    margin: 18px 0 20px; padding: 20px 22px; border-radius: var(--ab-radius-md); background: var(--ab-cloud);
  }
  & #the_product #product_description #price_box > .clearfix { display: none; }
  /* Discontinued products render #price_box with nothing but schema.org
     <meta>/<link> inside, which would otherwise draw an empty grey bar. */
  & #the_product #product_description #price_box:not(:has(h3, p, a, del)) { display: none; }
  /* With no "our price" there is nothing for the card to frame, and a lone
     list price floating at its right edge reads as a mistake. Drop the card
     and set the prices against the left margin with the rest of the copy. */
  & #the_product #product_description #price_box:not(:has(.the_price)) {
    display: block; padding: 0; background: none;
  }
  & #the_product #product_description #price_box:not(:has(.the_price)) .rprice { text-align: left; }
  /* "This product cannot be added to your cart at this time" — a grey dashed
     box in the legacy design, and the only thing standing in for the buy
     button on those pages, so it should read as a real notice. */
  & #the_product #product_description .stage_buttons2 {
    box-sizing: border-box; clear: none; width: auto; margin: 0 0 6px; padding: 14px 18px;
    border: 1px solid var(--ab-line); border-left: 4px solid var(--ab-slate);
    border-radius: var(--ab-radius-md); background: var(--ab-cloud);
    color: var(--ab-navy); text-align: left; font: 600 15px/1.45 var(--ab-font-body);
  }
  & #the_product #product_description #price_box .lprice { float: none; margin: 0; min-width: 0; }
  & #the_product #product_description #price_box .lprice .the_price {
    margin: 0; color: var(--ab-slate); font: 600 12px/1.2 var(--ab-font-display); letter-spacing: .14em; text-transform: uppercase;
  }
  /* Some products carry no figure: .the_price holds "Add to Cart for Pricing"
     with no inner span, and the small uppercase label treatment above left it
     grey on grey. Give it the weight of the price it stands in for. */
  & #the_product #product_description #price_box .lprice .the_price:not(:has(span)) {
    color: var(--ab-ink); font: 700 21px/1.3 var(--ab-font-display);
    letter-spacing: -.01em; text-transform: none;
  }
  & #the_product #product_description #price_box .lprice .the_price span {
    display: block; margin-top: 6px; color: var(--ab-ink); font: 700 40px/1.05 var(--ab-font-display);
    letter-spacing: -.02em; text-transform: none; font-variant-numeric: tabular-nums;
  }
  & .ab-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--ab-radius-sm);
    font: 600 12px/1.2 var(--ab-font-display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  }
  & .ab-badge--save { background: var(--ab-red-action); color: var(--ab-white); }
  & .ab-badge--neutral { background: var(--ab-white); color: var(--ab-slate); box-shadow: inset 0 0 0 1px var(--ab-line); }
  & #price_box .ab-price-save { display: block; margin: 10px 0 12px; }
  & #the_product #product_description #price_box .financing {
    display: inline-block; margin: 2px 0 10px; color: var(--ab-blue) !important; font: 400 15px/1.4 var(--ab-font-body);
    text-decoration: underline; text-underline-offset: .18em;
  }
  & #the_product #product_description #price_box .financing .amt { font-weight: 700; }
  & #the_product #product_description #price_box .lprice p { margin: 0; color: var(--ab-slate); font: 400 13px/1.5 var(--ab-font-body); }
  & #the_product #product_description #price_box .lprice p em { font-style: normal; }
  & #the_product #product_description #price_box .lprice a:not(.financing) { color: var(--ab-blue); font: 400 13px/1.5 var(--ab-font-body); text-decoration: underline; text-underline-offset: .18em; }
  & #the_product #product_description #price_box .rprice { float: none; text-align: right; padding: 0; }
  & #the_product #product_description #price_box .rprice p { margin: 0; color: var(--ab-slate); font: 400 13px/1.4 var(--ab-font-body); }
  & #the_product #product_description #price_box .rprice del { display: block; width: auto; margin-top: 2px; color: var(--ab-slate); font: 500 17px/1.3 var(--ab-font-display); font-variant-numeric: tabular-nums; }

  /* Options */
  /* The options and questions that have to be answered before adding to the
     cart. The legacy design groups them in a khaki panel sitting on top of the
     buy buttons; without that grouping a lone question reads as though it were
     stranded below the buy area. Same job, brand colours. */
  & #the_product #product_description div.stage_purchase_details {
    box-sizing: border-box; width: auto; margin: 0 0 14px; padding: 16px 18px;
    border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md);
    background: var(--ab-cloud); color: var(--ab-ink);
  }
  & #the_product #product_description div.stage_purchase_details .detail_block:last-child { margin-bottom: 0; }
  & #the_product #product_description div.stage_purchase_details .iecorner { display: none; }
  & #the_product #product_description div.stage_purchase_details .detail_block { margin: 0 0 14px; font: 400 14px/1.45 var(--ab-font-body); color: var(--ab-ink); }
  & #the_product #product_description div.stage_purchase_details .detail_block::before,
  & #the_product #product_description div.stage_purchase_details .detail_block::after { display: none; }
  & #the_product #product_description div.stage_purchase_details .detail_block > label { display: block; margin-bottom: 6px; font: 700 14px/1.4 var(--ab-font-body); color: var(--ab-ink); }
  & #the_product #product_description div.stage_purchase_details .option_input { display: block; }
  & #the_product #product_description div.stage_purchase_details input[type="text"],
  & #the_product #product_description div.stage_purchase_details textarea { float: none; box-sizing: border-box; width: 100%; max-width: 100%; min-height: 48px; margin: 6px 0 0; padding: 10px 14px; border: 1px solid var(--ab-slate); border-radius: var(--ab-radius-sm); font: 400 16px/1.3 var(--ab-font-body); color: var(--ab-ink); }
  & #the_product #product_description div.stage_purchase_details input[type="radio"],
  & #the_product #product_description div.stage_purchase_details input[type="checkbox"] { float: none; margin: 0 8px 0 0; accent-color: var(--ab-navy); }

  & #the_product select,
  & #the_product #product_description div.stage_purchase_details select,
  & #main_body .ss-item select {
    float: none; box-sizing: border-box; width: 100%; max-width: 100%; min-height: 48px; margin: 0;
    padding: 10px 42px 10px 14px; border: 1px solid var(--ab-slate); border-radius: var(--ab-radius-sm);
    background: var(--ab-white) var(--ab-i-chevron-down-ink) right 14px center / 16px no-repeat;
    -webkit-appearance: none; appearance: none; color: var(--ab-ink); font: 400 16px/1.3 var(--ab-font-body); cursor: pointer;
  }
  & #main_body .ss-item select { min-height: 44px; margin-top: 4px; font-size: 15px; }
  & #the_product select:hover,
  & #main_body .ss-item select:hover { border-color: var(--ab-navy); }

  /* Desktop: label beside its control rather than above it. Stacking put five
     options at 74px a row where the legacy design took 17, and the buy box has
     to stay near the price. Sits after the base rules above so it can override
     their control heights and margins. Tablet and phone keep the stack, where
     there is no spare width to put a label in. */
  @media screen and (min-width: 1025px) {
    & #the_product #product_description div.stage_purchase_details { padding: 12px 14px; }
    & #the_product #product_description div.stage_purchase_details .detail_block {
      display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 250px);
      align-items: center; gap: 2px 18px; margin: 0 0 10px;
    }
    & #the_product #product_description div.stage_purchase_details .detail_block:last-child { margin-bottom: 0; }
    /* A label that wraps needs its own leading and a clear gap to the next
       row, or the rows read as one block of text. */
    & #the_product #product_description div.stage_purchase_details .detail_block > label {
      margin: 0; font: 700 13px/1.5 var(--ab-font-body);
    }
    & #the_product #product_description div.stage_purchase_details .option_input { margin: 0; }
    & #the_product #product_description div.stage_purchase_details select,
    & #the_product #product_description div.stage_purchase_details input[type="text"],
    & #the_product #product_description div.stage_purchase_details textarea {
      min-height: 34px; margin: 0; padding: 5px 12px; font-size: 14px;
    }
    & #the_product #product_description div.stage_purchase_details select { padding-right: 34px; background-position: right 10px center; background-size: 14px; }
    /* A radio list, or a block of explanatory copy, needs the full row. */
    & #the_product #product_description div.stage_purchase_details .detail_block:has(.option_radio_list),
    & #the_product #product_description div.stage_purchase_details .detail_block:has(> p) {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Purchase buttons (also repeated below the accessory lists) */
  & .stage_buttons { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; height: auto; clear: both; }
  & .stage_buttons input.add_to_cart,
  & .stage_buttons input.calculate_shipping {
    float: none; box-sizing: border-box; width: auto; min-width: 0; height: 54px; margin: 0; padding: 0 12px;
    border-radius: var(--ab-radius-sm); text-indent: 0; text-align: center; cursor: pointer;
    font: 600 17px/1 var(--ab-font-display); letter-spacing: .01em;
    transition: background-color 200ms var(--ab-ease), border-color 200ms var(--ab-ease), color 200ms var(--ab-ease);
  }
  & .stage_buttons input.add_to_cart {
    padding-left: 40px; border: 2px solid var(--ab-red-action); color: var(--ab-white);
    background: var(--ab-red-action) var(--ab-i-cart-white) calc(50% - 50px) center / 20px no-repeat;
  }
  & .stage_buttons input.add_to_cart:hover,
  & .stage_buttons input.add_to_cart.hover { border-color: var(--ab-red-deep); background-color: var(--ab-red-deep); background-position: calc(50% - 50px) center; }
  & .stage_buttons input.calculate_shipping { border: 2px solid var(--ab-blue); background: var(--ab-white); color: var(--ab-blue); font-size: 16px; }
  & .stage_buttons input.calculate_shipping:hover { background: var(--ab-blue); color: var(--ab-white); }
  & div.ss_purchase_details { box-sizing: border-box; width: auto; max-width: 560px; margin: 40px auto 0; }

  /* Availability / condition / returns / coupons */
  & #the_product #product_description #product_details { float: none; clear: none; width: auto; margin: 18px 0 0; padding: 0 0 12px; border-bottom: 1px solid var(--ab-line); font: 400 14px/1.45 var(--ab-font-body); }
  & #the_product #product_description #product_details p { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; margin: 0; padding: 5px 0; }
  /* "Free Ground Shipping to the Contiguous USA" is green in the legacy
     design; the row's value colour was overriding it. */
  & #the_product #product_description #product_details .freeship { color: var(--ab-success); font-weight: 700; }
  & #the_product #product_description #product_details p::before,
  & #the_product #product_description #product_details p::after { display: none; }
  & #the_product #product_description #product_details p strong { float: none; width: auto; color: var(--ab-slate); font-weight: 400; }
  & #the_product #product_description #product_details p span { float: none; width: auto; color: var(--ab-ink); }
  & #the_product #product_description #product_details p span a { color: var(--ab-blue); text-decoration: underline; text-underline-offset: .18em; }

  & #the_product #product_description p.share_wish_email { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0; clear: none; }
  & #the_product #product_description p.share_wish_email a {
    display: inline-flex; align-items: center; gap: 8px; float: none; padding: 4px 0; color: var(--ab-blue);
    font: 400 14px/1.4 var(--ab-font-body); text-decoration: none;
  }
  & #the_product #product_description p.share_wish_email a:hover { text-decoration: underline; text-underline-offset: .18em; }
  & #the_product p.share_wish_email a span { position: static; top: 0; float: none; display: block; width: 18px !important; height: 18px; margin: 0; padding: 0; }
  & #the_product p.share_wish_email a.st span { --icon: var(--ab-i-share); }
  & #the_product p.share_wish_email a.wl span { --icon: var(--ab-i-heart); }
  & #the_product p.share_wish_email a.ea span { --icon: var(--ab-i-chat); }
  & #the_product #product_description p.write_a_review { width: auto; margin: 6px 0 0; padding: 0; text-align: left; }
  & #the_product #product_description p.write_a_review a { color: var(--ab-blue); font: 400 14px/1.4 var(--ab-font-body); text-decoration: underline; text-underline-offset: .18em; }

  /* ==========================================================================
     Sections: Includes · Bundle & Save · Recommended Accessories · Tabs
     ========================================================================== */
  & #main_body { min-width: 0; }
  & .subsection { background: none; color: var(--ab-ink); font: 400 15px/1.6 var(--ab-font-body); }
  & #main_body > .subsection { margin-top: 64px; }
  & #main_body > .subsection > .clearfix { display: none; }
  & .subsection .subsection_header { float: none; position: static; box-sizing: border-box; max-width: none; height: auto; margin: 0 0 22px; padding: 0; background: none; }
  /* Section titles carry the stitch — the brand's one graphic device. */
  & .subsection .subsection_header h3,
  & #related_items h3#new_featured_items {
    display: flex; align-items: center; gap: 20px; position: static; margin: 0; padding: 0; background: none;
    color: var(--ab-navy); font: 600 28px/1.2 var(--ab-font-display); letter-spacing: -.01em; text-transform: none;
  }
  & .subsection .subsection_header h3::after,
  & #related_items h3#new_featured_items::after { content: ''; flex: 1; min-width: 40px; height: 3px; border-radius: 2px; background: var(--ab-stitch); }
  /* Sticky section titles: they hold under the product bar while their section is on screen. */
  & { scroll-padding-top: calc(var(--ab-sticky-top) + var(--ab-tabs-h) + 64px); }
  & #main_body > .subsection > .subsection_header,
  & #product_tabs > ul.nav,
  & #product_tabs .subsubsection_header {
    position: sticky; top: var(--ab-sticky-top); z-index: 20; background-color: var(--ab-white);
    transition: top 200ms var(--ab-ease);
  }
  & #main_body > .subsection > .subsection_header { margin-bottom: 10px; padding-block: 10px; }
  & #product_tabs .subsubsection_header { top: calc(var(--ab-sticky-top) + var(--ab-tabs-h) - 1px); z-index: 19; }
  /* Once stuck, the white band runs full width with a hairline under it. */
  & .ab-stuck { box-shadow: 0 0 0 100vmax var(--ab-white), 0 1px 0 100vmax var(--ab-line); clip-path: inset(0 -100vmax -1px); }
  & .subsection .subsection_body { float: none; clear: none; box-sizing: border-box; width: auto; padding: 0; font: 400 15px/1.6 var(--ab-font-body); }
  & .subsection .subsection_body .subsection_body_desc { grid-column: 1 / -1; padding: 0; }
  & .subsection .subsection_body .subsection_body_desc p { margin: -8px 0 4px; color: var(--ab-slate); }
  & .subsection strong { color: inherit; }
  & .subsection em { color: inherit; }

  & #ss_included > .subsection_body,
  & #ss_bundle_save > .subsection_body,
  & #ss_related_accessories > .subsection_body {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; padding: 0;
  }
  & #ss_included > .subsection_body > .clearfix,
  & #ss_bundle_save > .subsection_body > .clearfix,
  & #ss_related_accessories > .subsection_body > .clearfix { display: none; }

  & .ss-item {
    box-sizing: border-box; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: start;
    float: none; width: auto; min-width: 0; margin: 0; padding: 16px;
    border: 1px solid #F2F2F2; border-radius: var(--ab-radius-md); background: var(--ab-white);
    transition: border-color 200ms var(--ab-ease), box-shadow 200ms var(--ab-ease);
  }
  /* responsive.css makes Bundle & Save items flow-root below 1024px (an id
     selector); keep them on the same card grid as the other sections. */
  & #ss_bundle_save .ss-item { display: grid; }
  & .ss-item:hover { border-color: var(--ab-mist); }
  & .ss-item:has(input.select_item:checked) { border-color: var(--ab-navy); box-shadow: inset 0 0 0 1px var(--ab-navy); }
  & .ss-item .ss-item-imglink {
    display: flex; align-items: center; justify-content: center; float: none; width: 88px; height: 88px;
    border-radius: var(--ab-radius-sm); background: var(--ab-cloud); overflow: hidden;
  }
  & .ss-item .ss-item-imglink img { display: block; max-width: 78px; max-height: 78px; width: auto; height: auto; mix-blend-mode: multiply; }
  & .ss-item div.ss-item-desc { min-width: 0; margin: 0; overflow-wrap: anywhere; }
  & .ss-item div.ss-item-desc p { margin: 0; color: var(--ab-slate); font: 400 14px/1.45 var(--ab-font-body); }
  & .ss-item div.ss-item-desc p > a { color: var(--ab-ink); font-weight: 700; text-decoration: none; }
  & .ss-item div.ss-item-desc p > a:hover { color: var(--ab-blue); text-decoration: underline; text-underline-offset: .18em; }
  & .ss-item div.ss-item-desc p > strong:first-child {
    display: flex; align-items: center; gap: 5px; margin-bottom: 4px; color: var(--ab-success);
    font: 600 11px/1.3 var(--ab-font-display); letter-spacing: .14em; text-transform: uppercase;
  }
  & .ss-item div.ss-item-desc p > strong:first-child::before {
    content: ''; width: 13px; height: 13px; background: currentColor;
    -webkit-mask: var(--ab-i-check) center / contain no-repeat; mask: var(--ab-i-check) center / contain no-repeat;
  }
  & .ss-item input.select_item {
    float: none; width: 20px; height: 20px; margin: 0 10px 0 0; vertical-align: -4px; accent-color: var(--ab-navy); cursor: pointer;
  }
  & .ss-item .ab-item-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
  & .ss-item .ab-item-price { color: var(--ab-ink); font: 700 17px/1.2 var(--ab-font-display); font-variant-numeric: tabular-nums; }
  & .ss-item div.ss-item-desc p > nobr { display: block; margin-top: 6px; color: var(--ab-slate); font: italic 400 13px/1.4 var(--ab-font-body); }
  & .ss-item .ab-item-note { color: var(--ab-slate); font: italic 400 13px/1.4 var(--ab-font-body); }
  & .ss-item .detail_block { margin-top: 12px; font: 400 14px/1.4 var(--ab-font-body); color: var(--ab-ink); }
  & .ss-item .detail_block label { display: block; font-weight: 700; }
  & .ss-item input[type="text"] { box-sizing: border-box; width: 100%; max-width: 100%; min-height: 44px; margin-top: 4px; padding: 8px 12px; border: 1px solid var(--ab-slate); border-radius: var(--ab-radius-sm); font: 400 15px/1.3 var(--ab-font-body); }

  /* Tabs */
  & #product_tabs { margin-top: 72px; background: none; }
  & #product_tabs ul.nav { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; margin: 0; padding: 0; border-bottom: 1px solid var(--ab-line); scrollbar-width: none; }
  & #product_tabs ul.nav li { float: none; flex: 0 0 auto; margin: 0; list-style: none; }
  & #product_tabs ul.nav li a,
  & #product_tabs ul.nav li a:hover,
  & #product_tabs ul.nav li a:focus {
    float: none; box-sizing: border-box; display: block; height: auto; min-height: 48px; margin: 0 0 -1px; padding: 12px 18px;
    border: 0; border-bottom: 3px solid transparent; background: none !important; box-shadow: none; text-shadow: none;
    color: var(--ab-slate); font: 600 18px/1.3 var(--ab-font-display); white-space: nowrap;
  }
  & #product_tabs ul.nav li:first-child a { padding-left: 0; }
  & #product_tabs ul.nav li a:hover { color: var(--ab-navy); }
  & #product_tabs ul.nav li a.current,
  & #product_tabs ul.nav li a.current:hover,
  & #product_tabs ul.nav li a.current:focus { color: var(--ab-navy); border-bottom-color: var(--ab-red); }
  & #product_tabs .list-wrap { margin: 0; padding: 32px 0 0; }
  & #product_tabs .tab_item .subsection_body { float: none; padding: 0; color: var(--ab-ink); font: 400 16px/1.5 var(--ab-font-body); overflow-wrap: break-word; }
  & #product_tabs .legacy { color: var(--ab-ink); font-size: 16px !important; line-height: 1.45 !important; }
  & #product_tabs .legacy h1,
  & #product_tabs .legacy h2 { margin: 32px 0 12px; color: var(--ab-navy); font-family: var(--ab-font-display); font-weight: 600; line-height: 1.25; }
  & #product_tabs .legacy h1 { font-size: 24px !important; }
  & #product_tabs .legacy h2 { font-size: 20px !important; }
  & #product_tabs .tab_item .subsection_body a { color: var(--ab-blue); text-decoration: underline; text-underline-offset: .18em; }
  & #product_tabs .tab_item .subsection_body b,
  & #product_tabs .tab_item .subsection_body strong { color: var(--ab-ink); font-weight: 700; }
  & #product_tabs .tab_item .subsection_body ul { margin: 0 0 16px; padding-left: 1.25em; }
  & #product_tabs .tab_item .subsection_body ul li { margin: 0 0 4px; list-style: disc outside; }
  & #product_tabs .tab_item .subsection_body ul li::marker { color: var(--ab-slate); }
  & #product_tabs .subsubsection_header {
    margin: 40px 0 10px; padding: 10px 0 18px; border: 0; color: var(--ab-navy);
    font: 600 22px/1.25 var(--ab-font-display); letter-spacing: -.01em;
    background-image: var(--ab-stitch); background-position: left bottom 6px; background-size: 100% 3px; background-repeat: no-repeat;
  }
  & #main_body iframe { max-width: 100%; border: 0; }
  & #main_body iframe[src*="youtube"],
  & #main_body iframe[src*="vimeo"] { display: block; width: 100%; max-width: 720px; height: auto; aspect-ratio: 16 / 9; border-radius: var(--ab-radius-md); }
  & #main_body img { max-width: 100%; height: auto; }
  /* Merchandising sometimes drops a full-width banner into the description
     field, which is a 600px column here; without this the page gains a
     horizontal scrollbar (e.g. product 95985). */
  & #the_product #product_description img { max-width: 100%; height: auto; }
  & #main_body .spec_image { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; max-width: 900px; margin: 0 0 20px; }
  & #main_body .spec_image span.img { display: block; flex: 0 1 auto; max-width: 100%; }
  & #main_body .spec_image span.img img { display: block; max-width: 100%; height: auto; }
  & #main_body .spec_image span.caption { display: block; flex: 1 1 200px; padding: 0; color: var(--ab-ink); font: 400 16px/1.45 var(--ab-font-body); }

  & #tab_related_categories ul { margin: 0; padding: 0; }
  & #tab_related_categories ul li { display: flex; align-items: center; gap: 16px; float: none; margin: 0 0 12px; list-style: none; }
  & #tab_related_categories ul li img { float: none; margin: 0; border-radius: var(--ab-radius-sm); }
  & #tab_related_categories ul li .related_cat_item_det { margin: 0; }
  & #tab_related_categories ul li .related_cat_item_det p { margin: 0; }
  & #tab_related_categories ul li .related_cat_item_det p.bc { padding: 6px 12px; border: 0; border-radius: var(--ab-radius-sm); background: var(--ab-cloud); line-height: 1.5; }
  & #tab_related_categories ul li .related_cat_item_det p.bc a { padding: 0 6px 0 0; background: none; }

  /* ==========================================================================
     Related products — native scroll row at every width
     ========================================================================== */
  & #related_items.slider { position: relative; width: auto; max-width: none; height: auto; margin: 72px 0 0; }
  & #related_items .top_bg,
  & #related_items .bottom_bg { position: static; width: auto; height: auto; background: none; }
  & #related_items h3#new_featured_items { margin: 0 0 22px; padding-right: 104px; }
  & #related_items .jcarousel-container-horizontal { position: static !important; width: auto; margin: 0; padding: 0; }
  & #related_items .jcarousel-clip-horizontal { width: 100%; height: auto; margin: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
  & #related_items .jcarousel-clip-horizontal::-webkit-scrollbar { display: none; }
  & #related_items ul.carousel { display: flex; gap: 16px; width: max-content !important; height: auto; left: 0 !important; padding: 2px 2px 6px !important; }
  /* If jCarousel never initializes (script error), the bare list scrolls itself. */
  & #related_items .bottom_bg > ul.carousel { width: auto !important; max-width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; }
  & #related_items ul.carousel > li { flex: 0 0 auto; float: none !important; width: 228px; height: auto; margin: 0 !important; scroll-snap-align: start; text-align: left; }
  & #related_items ul.carousel > li > a {
    box-sizing: border-box; display: flex; flex-direction: column; width: auto; height: 100%; padding: 12px;
    border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md); background: var(--ab-white);
    color: var(--ab-ink); font: 400 14px/1.4 var(--ab-font-body); text-decoration: none;
    transition: border-color 200ms var(--ab-ease), box-shadow 200ms var(--ab-ease);
  }
  & #related_items ul.carousel > li > a:hover { border-color: var(--ab-mist); box-shadow: var(--ab-shadow-md); }
  & #related_items .square_image { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; margin-bottom: 12px; border-radius: var(--ab-radius-sm); background: var(--ab-cloud); }
  & #related_items .square_image img { position: static !important; max-width: 80%; max-height: 80%; width: auto; height: auto; margin: 0; mix-blend-mode: multiply; }
  & #related_items ul.carousel > li p { display: flex; flex: 1; flex-direction: column; width: auto; margin: 0; color: var(--ab-ink); font: 700 14px/1.4 var(--ab-font-body); }
  & #related_items ul.carousel > li p br { display: none; }
  & #related_items ul.carousel > li p em { margin-top: auto; padding-top: 10px; color: var(--ab-ink); font: 700 18px/1.2 var(--ab-font-display); font-style: normal; font-variant-numeric: tabular-nums; }
  & #related_items ul.carousel > li p em:empty { display: none; }
  & #related_items ul.carousel > li p .shipping_text:empty { display: none; }
  /* Legacy #009900, onto the brand's green. */
  & #related_items ul.carousel > li p .shipping_text,
  & .ss-item .shipping_text { color: var(--ab-success); font-weight: 700; }
  & #related_items ul.carousel > li p .condition_text { align-self: flex-start; margin-top: auto; padding: 3px 8px; border-radius: var(--ab-radius-sm); background: var(--ab-cloud); color: var(--ab-slate); font: 600 11px/1.3 var(--ab-font-display); letter-spacing: .1em; text-transform: uppercase; }
  & #related_items ul.carousel > li p em:not(:empty) ~ .condition_text { margin-top: 8px; }
  & #related_items .jcarousel-prev,
  & #related_items .jcarousel-next { display: none !important; }
  & #related_items .responsive-related-prev,
  & #related_items .responsive-related-next {
    display: flex; align-items: center; justify-content: center; position: absolute; top: 0; transform: none;
    box-sizing: border-box; width: 40px; height: 40px; min-height: 0; padding: 0;
    border: 1px solid var(--ab-line); border-radius: 50%; background: var(--ab-white); color: var(--ab-navy);
    font-size: 0; cursor: pointer; transition: border-color 200ms var(--ab-ease);
  }
  & #related_items .responsive-related-prev { right: 52px; left: auto; }
  & #related_items .responsive-related-next { right: 0; }
  & #related_items .responsive-related-prev::before,
  & #related_items .responsive-related-next::before {
    content: ''; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: var(--ab-i-chevron-right) center / contain no-repeat; mask: var(--ab-i-chevron-right) center / contain no-repeat;
  }
  & #related_items .responsive-related-prev::before { -webkit-mask-image: var(--ab-i-chevron-left); mask-image: var(--ab-i-chevron-left); }
  & #related_items .responsive-related-prev:hover:not(:disabled),
  & #related_items .responsive-related-next:hover:not(:disabled) { border-color: var(--ab-navy); }
  & #related_items .responsive-related-prev:disabled,
  & #related_items .responsive-related-next:disabled { opacity: .35; cursor: default; }

  /* ==========================================================================
     Footer — full-bleed navy with a stitched seam along the top
     ========================================================================== */
  & #page_content { margin-bottom: 0; }
  & #footer_block {
    box-sizing: border-box; position: relative; overflow: hidden; width: auto; height: auto; min-height: 0;
    margin-top: 96px; padding: 64px var(--ab-bleed) 36px; color: var(--ab-mist);
    /* AllBrands sewing-icons tile (the source GIF quantised to 4 greys and
       saved as WebP: 53KB -> 16KB, no visible difference at this scale),
       recolored to Oxford Blue: the blend keeps the tile's light/dark (its
       line art) and takes hue from the navy beneath. */
    background: var(--ab-navy) url('/brand/patterns/footer-icons-bg.webp') left top / 400px repeat;
    background-blend-mode: luminosity;
    display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr);
    grid-template-areas:
      "logo  col1 col2 col3 col4"
      "news  col1 col2 col3 col4"
      "pay   accr fine fine social";
    grid-template-rows: auto 1fr auto;
    gap: 20px 40px; font: 400 14px/1.5 var(--ab-font-body);
  }
  & #footer_block > * { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; }
  & #footer_block #footer_logo { grid-area: logo; min-height: 0; }
  & #footer_block #footer_logo a {
    position: static; display: block; width: 200px; height: 38px; text-indent: -9999em; overflow: hidden;
    background: url('/brand/logos/allbrands-logo-white.svg') left center / contain no-repeat;
  }
  & #footer_block #newsletter { grid-area: news; }
  & #footer_block #newsletter h4 { margin: 8px 0 12px; font: 600 18px/1.3 var(--ab-font-display); }
  & #footer_block #newsletter h4 a { color: var(--ab-white); text-decoration: none; }
  & #footer_block #newsletter h4 a:hover { text-decoration: underline; text-underline-offset: .18em; }
  & #footer_block #newsletter h4 br { display: none; }
  & #footer_block #newsletter form { position: static; display: flex; width: 100%; max-width: 340px; height: auto; background: none; }
  & #footer_block #newsletter form > div { display: none; }
  & #footer_block #newsletter form #subscription_email {
    position: static; box-sizing: border-box; flex: 1; min-width: 0; width: auto; height: 46px; padding: 0 14px;
    border: 0; border-radius: var(--ab-radius-sm) 0 0 var(--ab-radius-sm); background: var(--ab-white);
    color: var(--ab-ink); font: 400 16px/1 var(--ab-font-body) !important; font-style: normal;
  }
  & #footer_block #newsletter form #subscription_email::placeholder { color: var(--ab-slate); font-style: normal; font-weight: 400; }
  & #footer_block #newsletter form #subscription_submit {
    position: static; display: block; flex: none; width: auto; height: 46px; padding: 0 18px; text-indent: 0; border: 0;
    border-radius: 0 var(--ab-radius-sm) var(--ab-radius-sm) 0; background: var(--ab-red-action); color: var(--ab-white);
    font: 600 16px/1 var(--ab-font-display); cursor: pointer;
  }
  & #footer_block #newsletter form #subscription_submit:hover { background: var(--ab-red-deep); }
  & #footer_block #col1 { grid-area: col1; }
  & #footer_block #col2 { grid-area: col2; }
  & #footer_block #col3 { grid-area: col3; }
  & #footer_block #col4 { grid-area: col4; }
  & #footer_block .fcol { font-size: 14px; }
  & #footer_block .fcol h5 { margin: 0 0 12px; color: var(--ab-white); font: 600 16px/1.3 var(--ab-font-display); }
  & #footer_block .fcol h6 { margin: 18px 0 6px; color: var(--ab-white); font: 600 12px/1.3 var(--ab-font-display); letter-spacing: .12em; text-transform: uppercase; }
  & #footer_block .fcol h6 a { color: inherit !important; }
  & #footer_block .fcol ul { margin: 0; padding: 0; }
  & #footer_block .fcol ul li,
  & #footer_block .fcol p,
  & #footer_block .fcol a,
  & #footer_block #col1 p,
  & #footer_block #col4 p,
  & #footer_block #col4 ul li,
  & #footer_block #col4 ul li a,
  & #footer_block #col1 a {
    margin: 0; color: var(--ab-mist); font: 400 14px/1.5 var(--ab-font-body); list-style: none; text-decoration: none;
  }
  & #footer_block .fcol ul li { margin-bottom: 6px; }
  & #footer_block .fcol a:hover { color: var(--ab-white); text-decoration: underline; text-underline-offset: .18em; }
  & #footer_block #col1 p strong { color: var(--ab-white); font-weight: 700; }
  & #footer_block #payment_methods {
    grid-area: pay; align-self: start; width: 218px; height: 68px; margin: 8px 8px 0; border-radius: 4px;
    background-color: var(--ab-white); box-shadow: 0 0 0 8px var(--ab-white);
  }
  & #footer_block #accredidation { grid-area: accr; align-self: start; justify-self: start; }
  & #footer_block #accredidation img { display: block; padding: 6px 8px; border-radius: var(--ab-radius-md); background: var(--ab-white); }
  & #footer_block .fine_print {
    grid-area: fine; align-self: start; padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .14);
  }
  & #footer_block .fine_print p { margin: 0 0 10px; color: var(--ab-mist); font: 400 12px/1.55 var(--ab-font-body); }
  & #footer_block .fine_print p i { font-size: 12px; font-style: normal; }
  & #footer_block .fine_print p strong { color: var(--ab-white); font-weight: 700; }
  & #footer_block .fine_print br { display: none; }
  & #footer_block div.contact_icons { grid-area: social; display: flex; gap: 16px; align-self: start; justify-self: end; }
  & #footer_block div.contact_icons a { top: 0; width: 22px; height: 22px; margin: 0; color: var(--ab-mist); overflow: hidden; }
  & #footer_block div.contact_icons a:hover { color: var(--ab-white); }
  & #footer { min-width: 0; height: auto; margin: 0; background: none; }
  & #footer #fbg { height: auto; background: none; }

  /* Product bar: appears once the buy box's Add to Cart scrolls out of view. */
  & .ab-buybar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1100; padding-inline: var(--ab-bleed);
    background: var(--ab-white); box-shadow: 0 1px 0 var(--ab-line), var(--ab-shadow-md);
    transform: translateY(-100%); visibility: hidden;
    transition: transform 200ms var(--ab-ease), visibility 0s linear 200ms;
  }
  & .ab-buybar.is-visible { transform: none; visibility: visible; transition: transform 200ms var(--ab-ease); }
  & .ab-buybar-inner { display: flex; align-items: center; gap: 14px; height: var(--ab-bar-h); }
  & .ab-buybar-thumb { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--ab-radius-sm); background: var(--ab-cloud); overflow: hidden; }
  & .ab-buybar-thumb img { max-width: 40px; max-height: 40px; mix-blend-mode: multiply; }
  & .ab-buybar-title { flex: 1; min-width: 0; margin: 0; overflow: hidden; color: var(--ab-navy); font: 600 16px/1.3 var(--ab-font-display); text-overflow: ellipsis; white-space: nowrap; }
  & .ab-buybar-price { flex: none; color: var(--ab-ink); font: 700 20px/1 var(--ab-font-display); font-variant-numeric: tabular-nums; }
  & .ab-buybar-top {
    flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 0;
    border-radius: var(--ab-radius-sm); background: var(--ab-red-action); color: var(--ab-white);
    font: 600 16px/1 var(--ab-font-display); cursor: pointer;
  }
  & .ab-buybar-top:hover { background: var(--ab-red-deep); }
  & .ab-buybar-top::before {
    content: ''; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: var(--ab-i-arrow-up) center / contain no-repeat; mask: var(--ab-i-arrow-up) center / contain no-repeat;
  }

  /* Cookie notice on brand */
  & .cc-window { font-family: var(--ab-font-body) !important; background: var(--ab-navy) !important; color: var(--ab-white) !important; border-radius: var(--ab-radius-md); box-shadow: var(--ab-shadow-lg); }
  & .cc-window .cc-link { color: var(--ab-white) !important; }
  & .cc-window .cc-btn { border: 0 !important; border-radius: var(--ab-radius-sm); background: var(--ab-white) !important; color: var(--ab-navy) !important; font: 600 16px/1 var(--ab-font-display) !important; }

  /* ==========================================================================
     Tablet (601–1024): legacy responsive.css handles the menu and stacking;
     this layer restyles its pieces and relaxes the grids.
     ========================================================================== */
  @media screen and (max-width: 1024px) {
    /* One row: contact icons repeat the header phone number and the footer. */
    & #greybar #topnav { flex-wrap: nowrap; justify-content: space-between; gap: 0 24px; }
    & #greybar ul li.contactnav { display: none; }
    & #greybar ul { flex-wrap: nowrap; white-space: nowrap; }
    & #greybar ul li a { padding-block: 12px; }

    & #header {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas: "dev dev" "logo phone" "logo stores" "search search" "quote quote";
      gap: 4px 24px; padding-block: 12px;
    }
    & #header #logo a { width: 210px; height: 40px; }
    & #header #search { margin-top: 12px; }
  }
  @media screen and (min-width: 601px) and (max-width: 767px) {
    & #greybar #tn_left li:has(> a[href*="categories/604"]),
    & #greybar #tn_right li:has(> a.wl) { display: none; }
  }
  /* Wide tablets have room for the desktop's one-row header. */
  @media screen and (min-width: 768px) and (max-width: 1024px) {
    & #header {
      grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas: "dev dev dev" "logo search phone" "logo quote stores";
      gap: 2px 24px;
    }
    & #header #logo a { width: 180px; height: 35px; }
    & #header #search { margin-top: 0; }
    & #header #site_description > p { font-size: 13px; }
    & #header #site_description h4 .lmc_allbrands { font-size: 21px; }
  }
  @media screen and (max-width: 1024px) {
    & #header .ab-quotes { margin-top: 6px; }

    & #site_nav { padding-inline: 0; }
    & #site_nav.responsive-ready #nav { display: none; }
    & #site_nav.responsive-ready.menu-open #nav { display: block; }
    & #site_nav .responsive-menu-toggle { padding-inline: var(--ab-gutter); background: var(--ab-navy); color: var(--ab-white); font: 500 17px/1.2 var(--ab-font-display); }
    /* Tablet draws the toggle with a light ☰ character that reads far smaller
       than the solid bars the phone bar gets. Same drawn bars here, a size up to
       suit the taller bar and its 17px label. */
    @media screen and (min-width: 601px) {
      & #site_nav .responsive-menu-toggle { display: flex; align-items: center; gap: 12px; }
      & #site_nav .responsive-menu-toggle::before {
        content: ''; flex: none; width: 26px; height: 17px;
        background: linear-gradient(to bottom, currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px, transparent 10px 14px, currentColor 14px 17px);
      }
      & #site_nav.menu-open .responsive-menu-toggle::before {
        content: '\00d7'; display: flex; align-items: center; justify-content: center;
        height: auto; background: none; font: 400 34px/1 var(--ab-font-body);
      }
    }
    & #site_nav ul#main { display: block; }
    & #site_nav ul#main li.tl { background: var(--ab-navy) !important; border-top: 1px solid rgba(255, 255, 255, .14); }
    & #site_nav ul#main li.tl:first-child a.tl,
    & #site_nav ul#main li.tl a.tl { padding: 16px 84px 16px var(--ab-gutter); font-size: 17px; }
    & #site_nav ul#main li.tl a.tl::after { display: none; }
    & #site_nav .responsive-submenu-toggle { right: 0; border-color: rgba(255, 255, 255, .2); background: transparent; color: var(--ab-white); }
    & #site_nav ul#main li.tl ul.subnav { border-top: 0; border-radius: 0; box-shadow: none; }
    & #site_nav ul#main li.tl.submenu-open ul.subnav { padding-inline: calc(var(--ab-gutter) - 12px); }
    & #site_nav ul#main ul.subnav li.navcol a { font-size: 15px; }



    & #the_product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 0; }
    & #the_product #product_stage #product_picture { height: 420px; padding: 20px; }
    & #the_product #product_description { padding-top: 0; }
    & #the_product #product_description h1.product_title { font-size: 22px; }
    & #the_product #product_description #price_box .lprice .the_price span { font-size: 34px; }
    & .stage_buttons { grid-template-columns: minmax(0, 1fr); }
    & .stage_buttons input.add_to_cart,
    & .stage_buttons input.calculate_shipping { width: 100%; }
    & #the_product #product_description #product_details p { display: grid; }

    & #main_body > .subsection { margin-top: 48px; }
    & .subsection .subsection_header h3,
    & #related_items h3#new_featured_items { padding-left: 0; font-size: 24px; }
    & #related_items h3#new_featured_items { padding-right: 104px; }
    & #product_tabs ul.nav { padding: 0; }
    & #product_tabs .tab_item .subsection_body { padding: 0; }

    & #footer_block {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-template-areas:
        "logo logo news news"
        "col1 col2 col3 col4"
        "fine fine fine fine"
        "pay  pay  accr social";
      grid-template-rows: none;
      gap: 28px 24px; padding: 56px var(--ab-gutter) 32px;
    }
    /* responsive.css spans these by column; keep them in the named areas. */
    & #footer_block #footer_logo { grid-area: logo; }
    & #footer_block #newsletter { grid-area: news; }
    & #footer_block .contact_icons { grid-area: social; }
    & #footer_block .fine_print { grid-area: fine; }
    & #footer_block #payment_methods { grid-area: pay; }
    & #footer_block #accredidation { grid-area: accr; }
    & #footer_block .fine_print { padding: 20px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
  }

  /* ==========================================================================
     Phone (≤600)
     ========================================================================== */
  @media screen and (max-width: 600px) {
    & #greybar #topnav { flex-wrap: nowrap; justify-content: space-between; gap: 16px; }
    & #greybar #tn_left li:not(:first-child),
    & #greybar #tn_right li:has(> a.wl) { display: none; }
    & #greybar ul.cpnav { gap: 0 16px; }
    & #greybar ul li a { font-size: 13px; }

    & #header {
      display: grid; flex-direction: initial;
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas: "dev dev" "logo phone" "search search" "stores stores" "quote quote";
      gap: 10px 16px; padding-block: 10px;
    }
    & #header #logo { order: 0; width: auto; }
    & #header #logo a { width: 150px; height: 29px; }
    /* responsive.css caps the box at 345px, so on the wider phones it stopped
       short of the right gutter with a growing gap on the right. Let it fill
       the row, as it does on tablets. */
    & #header #search { order: 0; width: 100%; max-width: none; margin-top: 0; }
    & #header #search input#searchbar { width: auto; }
    & #header #site_description { order: 0; padding: 0; }
    & #header #site_description h4 { font-size: 11px; }
    & #header #site_description h4 .lmc_allbrands { font-size: 17px; }
    & #header #site_description > p { justify-self: center; margin: 0; font-size: 13px; }
    & #header .ab-quotes { margin: 0; }
    & #header .ab-quotes p { text-align: center; font-size: 12.5px; }

    & #site_nav > .responsive-menu-toggle { min-height: 50px; padding-inline: var(--ab-gutter); font: 500 17px/1.2 var(--ab-font-display); }
    & .responsive-phone-menu[open] { font-family: var(--ab-font-body); color: var(--ab-ink); }
    & .responsive-phone-menu .responsive-phone-header { background: var(--ab-navy); }
    & .responsive-phone-menu .responsive-phone-header strong { font: 600 19px/1.2 var(--ab-font-display); }
    & .responsive-phone-menu .responsive-phone-back { background: var(--ab-cloud); border-bottom-color: var(--ab-line); color: var(--ab-navy); font-family: var(--ab-font-display); font-weight: 500; }
    & .responsive-phone-menu h2 { color: var(--ab-navy); font: 600 24px/1.25 var(--ab-font-display); }
    & .responsive-phone-menu li { border-bottom-color: var(--ab-line); }
    & .responsive-phone-menu li > a,
    & .responsive-phone-menu li > button { color: var(--ab-ink); }
    & .responsive-phone-next::after { color: var(--ab-slate); }
    & .responsive-phone-menu a.responsive-phone-all { background: var(--ab-cloud); color: var(--ab-navy); font-family: var(--ab-font-display); font-weight: 600; }
    & .responsive-phone-menu li > a:active,
    & .responsive-phone-menu li > button:active { background: var(--ab-cloud); }

    & .ab-connect { padding-inline: 4px; gap: 8px; }
    & .category_header > table.struct { flex-wrap: wrap; gap: 12px; }
    & .category_products .category_products_title { font-size: 22px; gap: 14px; }
    /* Long breadcrumb trails collapse so the current page always shows.
       (*-of-type: the legacy list ends in a stray <p>.) */
    & #breadcrumbs #ebc > li:not(:first-of-type):not(:nth-last-of-type(-n+2)) { display: none; }
    & #breadcrumbs #ebc:has(> li:nth-of-type(4)) > li:first-of-type::after {
      content: '\2026'; flex: none; padding-left: 26px; color: var(--ab-slate);
      background: var(--ab-i-chevron-right-mist) 6px center / 14px no-repeat;
    }
    & #breadcrumbs #ebc > li:last-of-type { min-width: 6em; }
    & .ab-connect .ab-connect-links a { padding: 0 8px; font-size: 13px; }
    & .ab-connect .ab-connect-social a.ab-connect-text { padding: 0 6px; font-size: 13px; }

    & #page_innards { padding-top: 14px; }
    & #the_product { display: block; padding: 0; }
    & #the_product #product_stage #product_picture { aspect-ratio: 1 / 1; height: auto; padding: 16px; }
    & #the_product #product_stage #product_thumbnails { overflow-x: auto; padding: 10px 0 2px; scrollbar-width: none; }
    & #the_product #product_stage #product_thumbnails ul { flex-wrap: nowrap; }
    & #the_product #product_stage #product_thumbnails ul li { flex: 0 0 64px; }
    & #the_product #product_stage #product_thumbnails a { width: 64px; height: 64px; }
    & #the_product #product_description { margin: 0; padding-top: 22px; }
    & #the_product #product_logo { max-height: 56px; }
    & #the_product #product_description h1.product_title { font-size: 21px; }
    & #the_product #product_description #price_box { padding: 16px; }
    & #the_product #product_description #price_box .lprice .the_price span { font-size: 32px; }
    & #the_product #product_description #price_box .rprice { padding-top: 0; }

    & .ss-item { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px; }
    & .ss-item .ss-item-imglink { width: 72px; height: 72px; }
    & .ss-item .ss-item-imglink img { max-width: 64px; max-height: 64px; }
    & .subsection .subsection_header h3,
    & #related_items h3#new_featured_items { font-size: 22px; gap: 14px; }
    & #product_tabs { margin-top: 48px; }
    & #product_tabs ul.nav li a { padding-inline: 12px; font-size: 16px; }
    & #product_tabs .list-wrap { padding-top: 24px; }
    & #product_tabs .tab_item .subsection_body { font-size: 16px; overflow-wrap: anywhere; }
    & #related_items ul.carousel > li { width: 180px; }
    & #related_items h3#new_featured_items::after { display: none; }
    & .ab-buybar-inner { gap: 10px; }
    & .ab-buybar-thumb { display: none; }
    & .ab-buybar-title { font-size: 14px; }
    & .ab-buybar-price { font-size: 17px; }
    & .ab-buybar-top { height: 40px; padding: 0 12px; font-size: 15px; }
    & #main_body > .subsection > .subsection_header { padding-block: 8px; }
    & #product_tabs .subsubsection_header { margin-top: 32px; padding-top: 8px; font-size: 19px; }

    & #footer_block {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-areas: "logo logo" "news news" "col1 col1" "col2 col3" "col4 col4" "fine fine" "pay pay" "accr social";
      gap: 28px 16px; margin-top: 72px; padding-top: 48px;
    }
    & #footer_block #payment_methods { transform: scale(.85); transform-origin: left top; }
  }

  /* ==========================================================================
     Category pages: header, "Narrow your search", product grid
     ========================================================================== */
  & .category_header { margin: 0 0 8px; }
  & .category_header .category_banner_html { margin-bottom: 20px; }
  & .category_header .category_banner_html img { display: block; width: 100%; height: auto; border-radius: var(--ab-radius-md); }
  & .category_header .category_banner_html center { display: block; }
  /* The legacy layout tables become flow boxes. */
  & .category_header > table.struct { display: flex; align-items: center; gap: 20px; width: auto; margin: 0 0 20px; }
  & .category_header > table.struct tbody,
  & .category_header > table.struct tr { display: contents; }
  & .category_header > table.struct td { display: block; width: auto; padding: 0; }
  & .category_header > table.struct td img { display: block; max-width: 180px; max-height: 60px; width: auto; height: auto; }
  & .category_header h1.title {
    margin: 0; padding: 0; text-align: left; color: var(--ab-navy); letter-spacing: -.01em;
    font: 600 clamp(22px, 1.1rem + 1.2vw, 32px)/1.2 var(--ab-font-display);
  }
  & .category_header .subcats_and_description {
    display: grid; gap: 14px; margin: 0; padding: 18px 20px;
    border: 1px solid #F2F2F2; border-radius: var(--ab-radius-md); background: var(--ab-white);
  }
  & .category_header .category_subcategories_title {
    padding: 0; border: 0; background: none; color: var(--ab-slate);
    font: 600 12px/1.2 var(--ab-font-display); letter-spacing: .14em; text-transform: uppercase;
  }
  & .category_subcategories { padding: 0; }
  & .category_subcategories table.struct { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 0 24px; width: auto; }
  & .category_subcategories table.struct tbody,
  & .category_subcategories table.struct tr { display: contents; }
  & .category_subcategories table.struct td {
    display: flex; align-items: flex-start; gap: 8px; width: auto; padding: 5px 0; background: none;
  }
  & .category_subcategories table.struct td:not(:has(a)) { display: none; }
  & .category_subcategories table.struct td:not(.nobullet)::before {
    content: ''; flex: none; width: 14px; height: 14px; margin-top: 4px; background: currentColor; color: var(--ab-mist);
    -webkit-mask: var(--ab-i-chevron-right) center / contain no-repeat; mask: var(--ab-i-chevron-right) center / contain no-repeat;
  }
  & .category_subcategories td a { color: var(--ab-ink); font: 400 15px/1.45 var(--ab-font-body); text-decoration: none; }
  & .category_subcategories td a:hover { color: var(--ab-blue); text-decoration: underline; text-underline-offset: .18em; }
  & .category_header .category_description { padding: 0; color: var(--ab-ink); font: 400 15px/1.6 var(--ab-font-body); }
  & .category_header .category_description a { color: var(--ab-blue); text-decoration: underline; text-underline-offset: .18em; }
  /* Folded copy (responsive.js builds the preview and the Read more/less
     disclosure on phones): while it is collapsed, the last lines fade out so
     it reads as text continuing under the link rather than ending there.
     The preview carries [hidden] once the disclosure is open. */
  & .category_description .responsive-category-preview:not([hidden]) {
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, rgba(0, 0, 0, .15) 100%);
    mask-image: linear-gradient(to bottom, #000 45%, rgba(0, 0, 0, .15) 100%);
  }
  & .category_description .responsive-category-disclosure > summary { color: var(--ab-blue); font: 700 15px/1.4 var(--ab-font-body); }

  & .category_products { margin: 0; }
  & .category_products .category_products_title {
    display: flex; align-items: center; gap: 20px; margin: 36px 0 18px; padding: 0; border: 0; background: none;
    color: var(--ab-navy); font: 600 26px/1.2 var(--ab-font-display); letter-spacing: -.01em;
  }
  & .category_products .category_products_title::after { content: ''; flex: 1; min-width: 40px; height: 3px; border-radius: 2px; background: var(--ab-stitch); }
  & .category_products table.pgrid { display: block; width: auto; font-size: inherit; }
  & .category_products table.pgrid > tbody {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px;
  }
  & .category_products table.pgrid > tbody::after { display: none; }
  & .category_products table.pgrid > tbody > tr { display: contents; }
  & .category_products table.pgrid td.p {
    box-sizing: border-box; display: flex; width: auto; min-width: 0; padding: 12px;
    border: 1px solid #F2F2F2 !important; border-radius: var(--ab-radius-md); background: var(--ab-white);
    transition: border-color 200ms var(--ab-ease), box-shadow 200ms var(--ab-ease);
  }
  & .category_products table.pgrid td.p:hover { border-color: var(--ab-mist) !important; box-shadow: var(--ab-shadow-md); }
  & .category_products table.pgrid td.p:not(:has(table.ps)) { display: none; }
  & .category_products table.pgrid td.p table.ps { display: flex; flex-direction: column; width: 100%; }
  & .category_products table.pgrid td.p table.ps tbody,
  & .category_products table.pgrid td.p table.ps tr { display: contents; }
  & .category_products table.pgrid td.p table.ps td { display: block; width: auto; padding: 0; }
  & .category_products table.pgrid td.p table.ps td.image {
    display: flex; align-items: center; justify-content: center; height: auto; aspect-ratio: 4 / 3;
    margin-bottom: 12px; border-radius: var(--ab-radius-sm); background: var(--ab-cloud);
  }
  & .category_products table.pgrid td.p table.ps td.image img { max-width: 86%; max-height: 86%; width: auto; height: auto; mix-blend-mode: multiply; }
  & .category_products table.pgrid td.p table.ps td.desc {
    flex: 1; height: auto; text-align: left; font: 400 14px/1.4 var(--ab-font-body);
  }
  & .category_products table.pgrid td.p table.ps td.desc a { color: var(--ab-ink); text-decoration: none; }
  & .category_products table.pgrid td.p table.ps td.desc a:hover { color: var(--ab-blue); text-decoration: underline; text-underline-offset: .18em; }
  & .category_products table.pgrid td.p table.ps td.extra { text-align: left; padding-top: 10px; }
  & .category_products table.pgrid td.p table.ps td.extra .price { color: var(--ab-ink); font: 700 18px/1.2 var(--ab-font-display); font-variant-numeric: tabular-nums; }
  & .category_products .was { color: var(--ab-slate); font: 400 14px/1.3 var(--ab-font-body); text-decoration: line-through; }
  & .category_products table.pgrid td.p table.ps td.extra .freeship { margin-top: 4px; color: var(--ab-success); font: 400 13px/1.4 var(--ab-font-body); }
  & .category_products .cat_prod_avail { padding-top: 6px; color: var(--ab-slate); font: 400 13px/1.4 var(--ab-font-body); }
  & #related_categories_list { padding: 26px 0 8px; text-align: left; color: var(--ab-slate); font: 400 14px/2.2 var(--ab-font-body); }
  & #related_categories_list a {
    display: inline-block; margin: 0 6px 6px 0; padding: 5px 12px; border: 1px solid var(--ab-line);
    border-radius: var(--ab-radius-pill); color: var(--ab-navy); font-size: 14px; line-height: 1.3; text-decoration: none;
  }
  & #related_categories_list a:hover { border-color: var(--ab-navy); background: var(--ab-cloud); }
  & .category_print { text-align: left; }

  /* Two per row all the way down to 370, where a card would get too narrow to
     read. The gap and the card padding tighten first so the columns keep as
     much width as possible before that. (These follow the auto-fill rule
     above, which would otherwise drop to one column at about 440.) */
  @media screen and (max-width: 600px) {
    & .category_products table.pgrid > tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    & .category_products table.pgrid td.p { padding: 10px; }
  }
  @media screen and (max-width: 430px) {
    & .category_products table.pgrid > tbody { gap: 8px; }
    & .category_products table.pgrid td.p { padding: 8px; }
  }
  @media screen and (max-width: 370px) {
    & .category_products table.pgrid > tbody { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    & .category_products table.pgrid td.p { padding: 10px; }
  }



  /* ==========================================================================
     Shopping cart: page title, line items, shipping estimate, order rail
     ========================================================================== */

  /* The legacy title is a JPEG of the words "Shopping Cart". The script puts a
     real heading in front of it; this retires the image once that has run. */
  & .ab-page-title {
    margin: 0 0 22px; padding: 0; color: var(--ab-navy); letter-spacing: -.01em;
    font: 600 clamp(22px, 1.1rem + 1.2vw, 32px)/1.2 var(--ab-font-display);
  }
  &.ab-js #page_innards:has(> .ab-page-title) > img[src*="shopping_cart_logo"],
  &.ab-js #page_innards:has(> .ab-page-title) > img[src*="shopping_cart_logo"] + br { display: none; }

  /* The empty cart is a bare 18pt line in the middle of the page. */
  & #page_innards > h3.empty_cart_message {
    margin: 0; padding: 52px 24px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md);
    background: var(--ab-white); color: var(--ab-slate);
    font: 400 18px/1.5 var(--ab-font-body); text-align: center;
  }
  & #page_innards > h3.empty_cart_message::before {
    content: ''; display: block; width: 40px; height: 40px; margin: 0 auto 16px;
    background: var(--ab-mist);
    -webkit-mask: var(--ab-i-cart) center / contain no-repeat;
    mask: var(--ab-i-cart) center / contain no-repeat;
  }

  /* --- Line items ------------------------------------------------------- */
  & #cart {
    margin: 0 0 24px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md);
    border-collapse: separate; border-spacing: 0; background: var(--ab-white);
    /* Fixed, or the long availability sentence and the product title bid against
       each other and the title ends up in a 200px gutter. */
    table-layout: fixed;
  }
  & #cart th {
    padding: 11px 14px; border: 0; border-bottom: 1px solid var(--ab-line);
    background: var(--ab-cloud); color: var(--ab-slate); text-align: left;
    font: 600 11px/1.2 var(--ab-font-display); letter-spacing: .12em; text-transform: uppercase;
  }
  /* Fixed layout reads these as content widths unless the cells are told
     otherwise, and every column would then run 28px wide. */
  & #cart th,
  & #cart td { box-sizing: border-box; }
  & #cart th.actions { width: 74px; }
  & #cart th.availability { width: 146px; }
  & #cart th.qty { width: 80px; text-align: center; }
  & #cart th.qty,
  & #cart td.qty { padding-inline: 10px; }
  /* Wide enough for a six-figure total at the size below; the prices are
     nowrap, so a column that is too narrow spills over the table's edge. */
  & #cart th.price { width: 136px; text-align: right; }
  & #cart th.product { width: auto; }
  & #cart thead th:first-child { border-top-left-radius: var(--ab-radius-md); }
  & #cart thead th:last-child { border-top-right-radius: var(--ab-radius-md); }
  & #cart td { padding: 18px 14px; border: 0; border-top: 1px solid var(--ab-line); vertical-align: top; overflow-wrap: anywhere; }
  & #cart > tbody.lines > tr:first-child > td { border-top: 0; }

  & #cart td.actions { width: 1%; padding-right: 0; text-align: left; white-space: nowrap; }
  & #cart td.actions br { display: none; }
  & #cart td.actions a {
    display: block; padding: 2px 0; color: var(--ab-slate);
    font: 400 13px/1.6 var(--ab-font-body); text-decoration: none;
  }
  & #cart td.actions a:hover { color: var(--ab-red-action); text-decoration: underline; }

  & #cart td.product > img {
    float: left; width: 80px; height: auto; margin: 2px 16px 10px 0; padding: 0;
    border: 1px solid var(--ab-line); border-radius: var(--ab-radius-sm); background: var(--ab-white);
  }
  & #cart td.product > strong { display: block; overflow: hidden; }
  & #cart td.product > strong > a {
    color: var(--ab-ink); font: 700 15px/1.4 var(--ab-font-body); text-decoration: none;
  }
  & #cart td.product > strong > a:hover { color: var(--ab-red-action); text-decoration: underline; }
  & #cart td.product .line_option {
    display: block; overflow: hidden; padding-top: 5px;
    color: var(--ab-slate); font: 400 13px/1.6 var(--ab-font-body);
  }
  & #cart td.product .line_option span[style*="float"] { color: var(--ab-ink); }

  & #cart ul.specials { clear: both; margin: 14px 0 0; padding: 0; list-style: none; }
  & #cart ul.specials li {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 14px; align-items: start;
    clear: both; margin: 0; padding: 9px 0 0; border-top: 1px solid #F2F2F2;
  }
  & #cart ul.specials li:first-child { border-top: 0; padding-top: 0; }
  & #cart ul.specials strong { width: auto; color: var(--ab-slate); font: 400 13px/1.5 var(--ab-font-body); }
  & #cart ul.specials span.specPrice {
    float: none; padding: 2px 9px; border-radius: var(--ab-radius-pill); background: #E8F4EC;
    color: var(--ab-success); font: 700 10px/1.6 var(--ab-font-display);
    letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  }
  & #cart ul.specials .child_line_availability {
    grid-column: 1 / -1; color: var(--ab-slate); font: 400 12px/1.5 var(--ab-font-body); opacity: .85;
  }

  & #cart td.availability { color: var(--ab-slate); font: 400 13px/1.5 var(--ab-font-body); }
  & #cart .shipping_description,
  & #cart .upgrade_description { margin-top: 8px; color: var(--ab-success); font: 700 13px/1.45 var(--ab-font-body); }
  & #cart div.delivDate { clear: both; text-align: left; color: var(--ab-blue); font: 700 13px/1.45 var(--ab-font-body); }

  & #cart td.qty { text-align: center; }
  & #cart input.qty_field {
    box-sizing: border-box; width: 56px; min-height: 40px; padding: 8px 4px;
    border: 1px solid var(--ab-slate); border-radius: var(--ab-radius-sm);
    background: var(--ab-white); color: var(--ab-ink);
    font: 400 15px/1.2 var(--ab-font-body); text-align: center;
  }
  & #cart td.price { text-align: right; color: var(--ab-ink); font: 700 18px/1.35 var(--ab-font-display); white-space: nowrap; }
  & #cart td.price .unit_price_container { color: var(--ab-slate); font: 400 12px/1.6 var(--ab-font-body); }

  /* The "update quantities" control is an <input type=image> of a JPEG button.
     The image is made invisible and the cell draws a real button under it, so
     the input keeps its box, its alt text and the exact same submit behaviour. */
  & #cart > tbody:not(.lines) > tr > td {
    padding: 12px 14px; border-top: 1px solid var(--ab-line); background: var(--ab-cloud); text-align: right;
  }
  & #cart > tbody:not(.lines) > tr > td:first-child { border-bottom-left-radius: var(--ab-radius-md); }
  & #cart > tbody:not(.lines) > tr > td:last-child { position: relative; border-bottom-right-radius: var(--ab-radius-md); }
  & #cart input[type="image"][name="Update"] {
    position: relative; z-index: 1; box-sizing: border-box; width: 178px; height: 42px;
    min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
  }
  & #cart > tbody:not(.lines) > tr > td:has(input[name="Update"])::after {
    content: 'Update quantities'; position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
    display: grid; place-items: center; box-sizing: border-box; width: 178px; height: 42px;
    border: 2px solid var(--ab-blue); border-radius: var(--ab-radius-sm);
    background: var(--ab-white); color: var(--ab-blue); pointer-events: none;
    font: 600 15px/1 var(--ab-font-display);
    transition: background-color 200ms var(--ab-ease), color 200ms var(--ab-ease);
  }
  & #cart > tbody:not(.lines) > tr > td:has(input[name="Update"]:hover)::after { background: var(--ab-blue); color: var(--ab-white); }
  & #cart > tbody:not(.lines) > tr > td:has(input[name="Update"]:focus-visible)::after { outline: 3px solid var(--ab-blue); outline-offset: 2px; }

  /* --- Shipping estimate ------------------------------------------------ */
  & #shipping_quote {
    float: none; box-sizing: border-box; width: auto; max-width: 440px; margin: 0 0 24px; padding: 0 0 18px;
    border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md); background: var(--ab-white);
  }
  & #shipping_quote > strong {
    display: block; padding: 12px 18px; border-bottom: 1px solid var(--ab-line);
    border-radius: var(--ab-radius-md) var(--ab-radius-md) 0 0;
    background: var(--ab-cloud); color: var(--ab-navy);
    font: 600 11px/1.2 var(--ab-font-display); letter-spacing: .12em; text-transform: uppercase;
  }
  /* Rails wraps every form's CSRF token in a bare <div style="display:inline">;
     it would otherwise count as a flex item and open a gap. */
  & #shipping_quote form > div:has(> input[type="hidden"]:only-child),
  & #cart_summary form > div:has(> input[type="hidden"]:only-child) { display: none !important; }
  & #shipping_quote #calculate_form {
    display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 16px 18px 0; text-align: left;
  }
  & #shipping_quote #calculate_form label {
    display: block; margin: 0 0 5px; color: var(--ab-slate); font: 400 12px/1.4 var(--ab-font-body);
  }
  & #shipping_quote #country_container { float: none; flex: 1 1 190px; min-width: 0; max-width: none; margin: 0; text-align: left; }
  & #shipping_quote #zip_container { float: none; flex: 0 0 96px; margin: 0; text-align: left; }
  & #shipping_quote #calculate_form > div:last-child { flex: 0 0 auto; }
  & #shipping_quote select,
  & #shipping_quote #shipping_quote_zip {
    box-sizing: border-box; width: 100%; min-height: 42px; margin: 0; padding: 9px 12px;
    border: 1px solid var(--ab-slate); border-radius: var(--ab-radius-sm);
    background: var(--ab-white); color: var(--ab-ink); font: 400 15px/1.2 var(--ab-font-body);
  }
  & #shipping_quote select {
    appearance: none; -webkit-appearance: none; padding-right: 36px;
    background: var(--ab-white) var(--ab-i-chevron-down-ink) right 12px center / 15px no-repeat;
  }
  & #shipping_quote #shipping_quote_submit {
    box-sizing: border-box; min-height: 42px; margin: 0; padding: 0 18px;
    border: 2px solid var(--ab-blue); border-radius: var(--ab-radius-sm);
    background: var(--ab-white); color: var(--ab-blue); cursor: pointer;
    font: 600 15px/1 var(--ab-font-display);
    transition: background-color 200ms var(--ab-ease), color 200ms var(--ab-ease);
  }
  & #shipping_quote #shipping_quote_submit:hover { background: var(--ab-blue); color: var(--ab-white); }

  & #shipping_quote #rates_form { padding: 16px 18px 0; text-align: left; }
  & #shipping_quote #rates_form #rates { display: grid; gap: 8px; }
  & #shipping_quote #rates_form #rates > div {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    border: 1px solid var(--ab-line); border-radius: var(--ab-radius-sm);
    transition: border-color 160ms var(--ab-ease), background-color 160ms var(--ab-ease);
  }
  & #shipping_quote #rates_form #rates > div:hover { border-color: var(--ab-slate); }
  & #shipping_quote #rates_form #rates > div:has(input:checked) { border-color: var(--ab-blue); background: #F2F8FD; }
  & #shipping_quote #rates_form #rates input[type="radio"] { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--ab-blue); }
  & #shipping_quote #rates_form #rates label {
    flex: 1 1 auto; display: block; margin: 0; cursor: pointer;
    color: var(--ab-ink); font: 400 14px/1.4 var(--ab-font-body);
  }
  & #shipping_quote #rates_form #rates > div:has(input:checked) label { font-weight: 700; }
  & #shipping_quote #shipping_warnings {
    margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid #F2F2F2; list-style: none;
    color: var(--ab-slate); font: 400 12px/1.55 var(--ab-font-body);
  }
  & #shipping_quote #shipping_warnings li { margin: 0 0 5px; padding: 0; }

  /* --- Order summary + checkout ----------------------------------------- */
  & .ab-cart-rail { display: grid; align-content: start; gap: 16px; }
  & .ab-cart-rail > #cart_summary,
  & .ab-cart-rail > #checkout_options { float: none; clear: none; width: auto; max-width: none; margin: 0; }
  & #cart_summary {
    box-sizing: border-box; margin: 0 0 16px; padding: 16px 20px;
    border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md);
    background: var(--ab-white); text-align: left;
  }
  & #cart_summary > div {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; padding: 6px 0;
  }
  & #cart_summary .label { float: none; color: var(--ab-slate); font: 400 14px/1.5 var(--ab-font-body); }
  & #cart_summary .value { color: var(--ab-ink); font: 400 15px/1.5 var(--ab-font-body); text-align: right; }
  & #cart_summary .tax_message {
    flex: 1 0 100%; margin-top: 2px; text-align: left; color: var(--ab-slate); font: 400 12px/1.5 var(--ab-font-body);
  }
  & #cart_summary .tax_message:empty,
  & #cart_summary #coupon_errors:empty { display: none; }
  & #cart_summary .total { margin: 8px 0 0; padding: 14px 0 0; border-top: 1px solid var(--ab-line); }
  & #cart_summary .total .label { color: var(--ab-ink); font: 600 16px/1.3 var(--ab-font-display); }
  & #cart_summary .total .value { color: var(--ab-red-action); font: 700 24px/1.2 var(--ab-font-display); }

  & #cart_summary .coupon { display: block; padding: 12px 0; }
  & #cart_summary .coupon .label { display: block; margin-bottom: 8px; }
  & #cart_summary .coupon .value { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  & #cart_summary .coupon .value > form { flex: 1 1 100%; width: auto; margin: 0; text-align: left; }
  & #cart_summary .coupon .value > form.button-to { flex: 0 0 auto; }
  & #cart_summary .coupon form.edit_order { display: flex; flex-wrap: wrap; gap: 8px; }
  & #cart_summary #order_coupon_code {
    flex: 1 1 140px; box-sizing: border-box; min-width: 0; min-height: 42px; padding: 9px 12px;
    border: 1px solid var(--ab-slate); border-radius: var(--ab-radius-sm);
    background: var(--ab-white); color: var(--ab-ink); text-align: left; font: 400 15px/1.2 var(--ab-font-body);
  }
  & #cart_summary .coupon input[type="submit"] {
    flex: 0 0 auto; box-sizing: border-box; min-height: 42px; margin: 0; padding: 0 16px;
    border: 2px solid var(--ab-blue); border-radius: var(--ab-radius-sm);
    background: var(--ab-white); color: var(--ab-blue); cursor: pointer; text-align: center;
    font: 600 14px/1 var(--ab-font-display);
    transition: background-color 200ms var(--ab-ease), border-color 200ms var(--ab-ease), color 200ms var(--ab-ease);
  }
  & #cart_summary .coupon input[type="submit"]:hover { background: var(--ab-blue); color: var(--ab-white); }
  & #cart_summary .coupon form.button-to input[type="submit"] {
    min-height: 34px; padding: 0 13px; border-width: 1px; border-color: var(--ab-line);
    color: var(--ab-slate); font-size: 13px;
  }
  & #cart_summary .coupon form.button-to input[type="submit"]:hover {
    border-color: var(--ab-red-action); background: var(--ab-white); color: var(--ab-red-action);
  }
  /* Collapsed, the row is just the link; the label and field live in the panel. */
  & #cart_summary .coupon.ab-coupon-collapsed { display: block; padding: 6px 0; }
  & .ab-coupon-toggle {
    display: inline-flex; align-items: center; gap: 7px; padding: 4px 0; border: 0; background: none;
    color: var(--ab-blue); font: 400 13px/1.5 var(--ab-font-body); text-align: left; cursor: pointer;
    text-decoration: underline; text-underline-offset: .18em;
  }
  & .ab-coupon-toggle:hover { color: var(--ab-navy); }
  & .ab-coupon-toggle::before {
    content: ''; flex: none; width: 12px; height: 12px; background: currentColor;
    -webkit-mask: var(--ab-i-chevron-right) center / contain no-repeat;
    mask: var(--ab-i-chevron-right) center / contain no-repeat;
    transition: transform 180ms var(--ab-ease);
  }
  & .ab-coupon-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
  /* The link already says "coupon"; the legacy label would only repeat it.
     It is a <span>, not a <label>, so nothing is associated with the field. */
  & .ab-coupon-panel { padding-top: 10px; }
  & #cart_summary .ab-coupon-panel .label { display: none; }

  & #cart_summary #coupon_value { margin-left: auto; color: var(--ab-success); font: 700 15px/1.5 var(--ab-font-body); white-space: nowrap; }
  & #cart_summary .newsletter_promo { flex: 1 0 100%; margin-top: 4px; color: var(--ab-slate); font: 400 12px/1.55 var(--ab-font-body); }
  & #cart_summary .newsletter_promo a { color: var(--ab-blue); }

  & #checkout_options { box-sizing: border-box; margin: 0; padding: 0; }
  & #checkout_options .checkout_option { margin: 0 0 10px; text-align: center; }
  & #checkout_options a.checkout_button {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    box-sizing: border-box; width: 100%; height: auto; min-height: 54px; padding: 0 18px;
    border: 2px solid var(--ab-red-action); border-radius: var(--ab-radius-sm);
    background: var(--ab-red-action); color: var(--ab-white);
    text-indent: 0; text-decoration: none; overflow: visible;
    font: 600 17px/1.2 var(--ab-font-display);
    transition: background-color 200ms var(--ab-ease), color 200ms var(--ab-ease);
  }
  & #checkout_options a.checkout_button::before {
    content: ''; flex: none; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: var(--ab-i-cart) center / contain no-repeat;
    mask: var(--ab-i-cart) center / contain no-repeat;
  }
  & #checkout_options a.checkout_button:hover,
  & #checkout_options a.checkout_button:active {
    border-color: var(--ab-red-deep); background: var(--ab-red-deep); color: var(--ab-white);
  }
  /* The template repeats the secure-checkout button below the other payment
     methods. It stays (it saves scrolling back up) but the first one leads. */
  & #checkout_options .checkout_option#allbrands_secure_checkout ~ .checkout_option#allbrands_secure_checkout a.checkout_button {
    background: var(--ab-white); color: var(--ab-red-action);
  }
  & #checkout_options .checkout_option#allbrands_secure_checkout ~ .checkout_option#allbrands_secure_checkout a.checkout_button:hover {
    background: var(--ab-red-action); color: var(--ab-white);
  }
  & #checkout_options .between_options {
    display: flex; align-items: center; gap: 12px; clear: none; margin: 0 0 10px; padding: 0;
    color: var(--ab-mist); font: 600 11px/1 var(--ab-font-display); letter-spacing: .14em; text-transform: uppercase;
  }
  & #checkout_options .between_options::before,
  & #checkout_options .between_options::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--ab-line); }
  & #checkout_options input[type="image"],
  & #checkout_options #digital_buy.checkout_option img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
  & #checkout_options #digital_buy.checkout_option img {
    max-width: 100%; border: 1px solid var(--ab-line); border-radius: var(--ab-radius-sm); box-shadow: none;
  }
  & #checkout_options #AmazaonPayButtonContainer { margin: 0 auto; }
  & #checkout_options #checkout_note {
    clear: none; margin: 8px 0 0; text-align: left; color: var(--ab-slate); font: 400 12px/1.55 var(--ab-font-body);
  }
  & #checkout_options > .checkout_option + #checkout_note { margin-top: 16px; padding-top: 14px; border-top: 1px solid #F2F2F2; }
  & #checkout_options #checkout_note strong { color: var(--ab-ink); }

  & #continue_shopping_link {
    display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; clear: both; margin: 4px 0 0;
    padding: 11px 18px 11px 14px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius-sm);
    color: var(--ab-navy); text-decoration: none; font: 600 15px/1 var(--ab-font-display);
    transition: border-color 200ms var(--ab-ease), background-color 200ms var(--ab-ease);
  }
  & #continue_shopping_link::before {
    content: ''; flex: none; width: 15px; height: 15px; background: currentColor;
    -webkit-mask: var(--ab-i-chevron-left) center / contain no-repeat;
    mask: var(--ab-i-chevron-left) center / contain no-repeat;
  }
  & #continue_shopping_link:hover { border-color: var(--ab-navy); background: var(--ab-cloud); }

  /* Items on the left, the order rail beside them. The rail is built by the
     script, so this only applies once that has run; otherwise the legacy
     floats stand and the page still works. */
  @media screen and (min-width: 1260px) {
    &.ab-js #page_innards:has(#cart) {
      display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) minmax(296px, 330px); gap: 0 36px;
    }
    &.ab-js #page_innards:has(#cart) > .ab-page-title { grid-column: 1 / -1; }
    &.ab-js #page_innards:has(#cart) > form[action$="update_quantities"],
    &.ab-js #page_innards:has(#cart) > #shipping_quote,
    &.ab-js #page_innards:has(#cart) > #continue_shopping_link { grid-column: 1; }
    &.ab-js #page_innards:has(#cart) > #continue_shopping_link { justify-self: start; }
    &.ab-js #page_innards:has(#cart) > .ab-cart-rail { grid-column: 2; grid-row: 2 / span 3; }
    & .ab-cart-rail { position: sticky; top: calc(var(--ab-sticky-top) + 16px); }
  }

  /* Touch sizing. These selectors outrank the legacy responsive layer, so its
     16px/44px has to be restated here: under 16px iOS zooms the page whenever a
     field takes focus, and 44px is the tap target. */
  @media screen and (max-width: 1024px) {
    & #cart input.qty_field,
    & #shipping_quote select,
    & #shipping_quote #shipping_quote_zip,
    & #cart_summary #order_coupon_code { min-height: 44px; font-size: 16px; }
    & #shipping_quote #shipping_quote_submit,
    & #cart_summary .coupon input[type="submit"] { min-height: 44px; font-size: 15px; }
    & #cart_summary .coupon form.button-to input[type="submit"] { min-height: 38px; font-size: 14px; }
    & #continue_shopping_link { min-height: 44px; }
    & .ab-coupon-toggle { min-height: 44px; }
  }
  /* 769-1259: too narrow for the rail beside a five-column table, wide enough
     for the estimate and the rail to share a row under it — which also keeps
     the totals on the right at every width where the table is still a table. */
  @media screen and (min-width: 769px) and (max-width: 1259px) {
    &.ab-js #page_innards:has(#cart) {
      display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px;
    }
    &.ab-js #page_innards:has(#cart) > .ab-page-title,
    &.ab-js #page_innards:has(#cart) > form[action$="update_quantities"] { grid-column: 1 / -1; }
    &.ab-js #page_innards:has(#cart) > #shipping_quote { grid-column: 1; max-width: none; }
    &.ab-js #page_innards:has(#cart) > .ab-cart-rail { grid-column: 2; grid-row: 3 / span 2; }
    &.ab-js #page_innards:has(#cart) > #continue_shopping_link { grid-column: 1; justify-self: start; }
  }

  /* Below that the table becomes a stack of cards (legacy responsive.css); this
     keeps the card chrome on brand and lets the rail run the full width. */
  @media screen and (max-width: 768px) {
    & #cart { border: 0; border-radius: 0; background: none; }
    & #cart > tbody.lines > tr {
      margin: 0 0 16px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md);
      background: var(--ab-white); overflow: hidden;
    }
    /* The desktop `width: 1%` shrink-to-fit would leave this grid cell 28px
       wide, so the tint painted a stub and the links spilled out of it. */
    & #cart td.actions {
      width: auto; gap: 4px; padding: 2px 4px !important;
      border-bottom: 1px solid var(--ab-line); background: var(--ab-cloud);
    }
    /* "edit" is only ~22px of text; pad it out to something thumb-sized. */
    & #cart td.actions a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 10px; }
    & #cart td.availability,
    & #cart td.qty,
    & #cart td.price { border-top: 1px solid var(--ab-line) !important; text-align: left; }
    & #cart td[data-responsive-label]::before {
      margin-bottom: 6px; color: var(--ab-slate); font: 600 11px/1.2 var(--ab-font-display);
      letter-spacing: .12em; text-transform: uppercase;
    }
    & #cart td.product > img { width: 72px; margin-right: 12px; }
    & #cart > tbody:not(.lines) > tr > td { padding: 0; border: 0; background: none; text-align: left; }
    & #cart > tbody:not(.lines) > tr > td:has(input[name="Update"])::after {
      position: static; transform: none; width: 100%; max-width: 280px;
    }
    & #cart input[type="image"][name="Update"] { position: absolute; width: 100%; max-width: 280px; }
    & #shipping_quote,
    & #cart_summary,
    & #checkout_options { float: none; clear: both; width: auto; max-width: none; margin: 0 0 16px; }
    & #continue_shopping_link { display: flex; justify-content: center; margin: 8px 0 0; }
  }





  /* ==========================================================================
     Search: /search and /forms/advancedsearch.php. The two share the result
     table, the pagination and the empty state; only the form above differs.
     ========================================================================== */
  /* --- The refine form on /search --------------------------------------- */
  & #page_innards #mini_search {
    box-sizing: border-box; margin: 0 0 14px; padding: 14px 18px;
    border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md); background: var(--ab-cloud);
  }
  & #page_innards #mini_search label { color: var(--ab-slate); font: 400 14px/1.4 var(--ab-font-body); }
  /* One line on desktop. The controls shrink rather than wrap, so the bar
     stays a single row however long the brand names get. Below 1025 the
     legacy responsive layer lays this out as label/control rows, which is
     more compact at those widths -- leave it to do that. */
  @media screen and (min-width: 1025px) {
    & #page_innards #mini_search { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; }
    & #page_innards #mini_search label { flex: 0 0 auto; white-space: nowrap; }
    /* width:100% on the shared control rule would make each of these claim the
       whole bar, so the flex basis does the sizing here instead. Brand gets the
       most room: its options are the long ones. */
    & #page_innards #mini_search #search2 { flex: 1 1 210px; width: auto; min-width: 110px; }
    & #page_innards #mini_search select { width: auto; min-width: 0; }
    & #page_innards #mini_search #brand_id { flex: 1 1 280px; }
    & #page_innards #mini_search #order_by { flex: 0 1 190px; }
    & #page_innards #mini_search input[type="submit"] { flex: 0 0 auto; }
  }

  /* --- The form on /forms/advancedsearch.php ---------------------------- */
  /* Seven stacked label/control rows ran to about 580px before any result was
     visible. The term keeps its own full-width row; the six narrowing options
     are short and sit three across. */
  & #page_innards #advanced_search {
    box-sizing: border-box; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end; gap: 12px 16px; width: auto; max-width: 900px; margin: 0 0 18px; padding: 18px 20px;
    border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md); background: var(--ab-white);
  }
  & #page_innards #advanced_search h1 {
    grid-column: 1 / -1; margin: 0; padding: 0; border: 0; background: none; color: var(--ab-navy); text-align: left;
    font: 600 21px/1.3 var(--ab-font-display); letter-spacing: -.01em;
  }
  & #page_innards #advanced_search > div {
    display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; gap: 5px; margin: 0;
  }
  /* The search term, and the submit row. */
  & #page_innards #advanced_search > div:nth-of-type(1),
  & #page_innards #advanced_search > div:last-child { grid-column: 1 / -1; }
  & #page_innards #advanced_search > div:last-child { justify-items: start; margin-top: 2px; }
  & #page_innards #advanced_search label {
    float: none; width: auto; margin: 0; text-align: left; color: var(--ab-slate);
    font: 400 13px/1.35 var(--ab-font-body);
  }
  & #page_innards #advanced_search > div:nth-of-type(1) label { color: var(--ab-ink); font: 700 14px/1.35 var(--ab-font-body); }
  & #page_innards #advanced_search > div:nth-of-type(1) input[type="text"] { min-height: 50px; font-size: 17px; }

  /* Controls, shared by both forms. */
  & #page_innards #mini_search input[type="text"],
  & #page_innards #mini_search select { min-height: 44px; }
  & #page_innards #mini_search input[type="text"],
  & #page_innards #mini_search select,
  & #page_innards #advanced_search input[type="text"],
  & #page_innards #advanced_search select {
    box-sizing: border-box; width: 100%; min-height: 40px; margin: 0; padding: 8px 12px;
    border: 1px solid var(--ab-slate); border-radius: var(--ab-radius-sm);
    background: var(--ab-white); color: var(--ab-ink); font: 400 15px/1.3 var(--ab-font-body);
  }
  & #page_innards #mini_search select,
  & #page_innards #advanced_search select {
    appearance: none; -webkit-appearance: none; padding-right: 38px;
    background: var(--ab-white) var(--ab-i-chevron-down-ink) right 12px center / 15px no-repeat;
  }
  & #page_innards #mini_search input[type="submit"],
  & #page_innards #advanced_search input[type="submit"] {
    box-sizing: border-box; min-width: 120px; min-height: 44px; margin: 0; padding: 0 20px;
    border: 2px solid var(--ab-red-action); border-radius: var(--ab-radius-sm);
    background: var(--ab-red-action); color: var(--ab-white); cursor: pointer;
    font: 600 15px/1 var(--ab-font-display);
    transition: background-color 200ms var(--ab-ease), border-color 200ms var(--ab-ease);
  }
  & #page_innards #mini_search input[type="submit"]:hover,
  & #page_innards #advanced_search input[type="submit"]:hover { border-color: var(--ab-red-deep); background-color: var(--ab-red-deep); }

  & #advanced_search_blurb { margin: 0 0 16px; color: var(--ab-slate); font: 400 13px/1.5 var(--ab-font-body); text-align: right; }
  & #advanced_search_blurb a { color: var(--ab-blue); }
  & #search_description { margin: 0 0 14px; color: var(--ab-slate); font: 400 14px/1.5 var(--ab-font-body); }
  & #search_description .search_query,
  & #search_description .search_brand { color: var(--ab-ink); font-weight: 700; }

  /* --- Related categories ----------------------------------------------- */
  & .search_subsection {
    margin: 0 0 18px; padding: 14px 18px;
    border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md); background: var(--ab-white);
  }
  & .search_subsection > strong {
    display: block; margin-bottom: 10px; background: none; color: var(--ab-slate);
    font: 600 12px/1.2 var(--ab-font-display); letter-spacing: .12em; text-transform: uppercase;
  }
  & .search_subsection ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
  & .search_subsection li { margin: 0; }
  & .search_subsection a.subcats {
    display: inline-block; padding: 6px 13px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius-pill);
    color: var(--ab-navy); font: 400 14px/1.35 var(--ab-font-body); text-decoration: none;
  }
  & .search_subsection a.subcats:hover { border-color: var(--ab-navy); background: var(--ab-cloud); }
  & .search_subsection a.cat_full_link {
    display: inline-block; margin-top: 10px; color: var(--ab-blue);
    font: 600 13px/1.4 var(--ab-font-body); text-underline-offset: .18em;
  }

  /* --- Pagination -------------------------------------------------------- */
  & .ab_pagination {
    display: flex; flex-wrap: wrap-reverse; align-items: center; justify-content: space-between; gap: 10px 16px;
    margin: 0 0 8px; padding: 10px 0; border-top: 1px solid #F2F2F2; border-bottom: 1px solid #F2F2F2;
  }
  & .ab_pagination .pagination_counts { float: none; color: var(--ab-slate); font: 400 13px/1.4 var(--ab-font-body); }
  & .ab_pagination .pagination_counts b { color: var(--ab-ink); }
  & .ab_pagination .pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
  & .ab_pagination .pagination a,
  & .ab_pagination .pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; min-height: 34px; padding: 0 9px; border-radius: var(--ab-radius-sm);
    color: var(--ab-navy); font: 600 14px/1 var(--ab-font-display); text-decoration: none;
  }
  & .ab_pagination .pagination a:hover { background: var(--ab-cloud); }
  & .ab_pagination .pagination span.current { background: var(--ab-navy); color: var(--ab-white); }
  & .ab_pagination .pagination span.disabled { color: var(--ab-mist); }

  /* --- Result rows ------------------------------------------------------- */
  & #search_results { width: 100%; border-collapse: separate; border-spacing: 0; }
  & #search_results td { padding: 18px 0; border-top: 1px solid #F2F2F2; vertical-align: top; }
  & #search_results tr:first-child td { border-top: 0; }
  & #search_results td.img { width: 118px; padding-right: 20px; }
  & #search_results td.img a {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
    border-radius: var(--ab-radius-sm); background: var(--ab-cloud);
  }
  & #search_results td.img img { max-width: 78%; max-height: 78%; width: auto; height: auto; mix-blend-mode: multiply; }
  & #search_results td.data { min-width: 0; }
  & #search_results a.product_link {
    display: block; color: var(--ab-ink); font: 700 15px/1.4 var(--ab-font-body); text-decoration: none;
  }
  & #search_results a.product_link:hover { color: var(--ab-red-action); text-decoration: underline; text-underline-offset: .18em; }
  & #search_results .price {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 6px 0 0;
    color: var(--ab-ink); font: 700 18px/1.3 var(--ab-font-display);
  }
  & #search_results .price .freeship { font: 700 13px/1.45 var(--ab-font-body); }
  & #search_results .conditionsearch {
    display: inline-block; margin: 6px 0 0; padding: 3px 9px; border-radius: var(--ab-radius-sm);
    background: var(--ab-cloud); color: var(--ab-slate);
    font: 600 11px/1.4 var(--ab-font-display); letter-spacing: .1em; text-transform: uppercase;
  }
  & #search_results .short_description {
    margin: 10px 0 0; padding: 10px 12px; border-radius: var(--ab-radius-sm); background: var(--ab-cloud);
    color: var(--ab-slate); font: 400 13px/1.55 var(--ab-font-body); text-align: left;
  }

  /* --- Nothing found ----------------------------------------------------- */
  /* The message is a bare div with no id or class; every other block on these
     pages has one, so this reaches it without reaching anything else. */
  & .ab-search-empty,
  & #page_innards:has(#mini_search, #advanced_search):not(:has(#search_results)) > div:not([id]):not([class]) {
    margin: 8px 0 0; padding: 44px 24px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md);
    background: var(--ab-white); color: var(--ab-slate); text-align: center;
    font: 400 16px/1.6 var(--ab-font-body);
  }
  & .ab-search-empty::before,
  & #page_innards:has(#mini_search, #advanced_search):not(:has(#search_results)) > div:not([id]):not([class])::before {
    content: ''; display: block; width: 36px; height: 36px; margin: 0 auto 14px; background: var(--ab-mist);
    -webkit-mask: var(--ab-i-search) center / contain no-repeat;
    mask: var(--ab-i-search) center / contain no-repeat;
  }

  @media screen and (max-width: 1024px) {
    /* responsive.css restyles these links as 8px-padded blocks here, which left
       each page number sitting at the top-left of its button instead of in the
       middle of it. Same pills as on desktop, with a roomier tap target. */
    & #page_innards .ab_pagination .pagination > * {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 40px; min-height: 40px; padding: 0 10px;
    }
  }
  @media screen and (max-width: 860px) {
    & #page_innards #advanced_search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media screen and (max-width: 560px) {
    & #page_innards #advanced_search { grid-template-columns: minmax(0, 1fr); }
  }
  @media screen and (max-width: 700px) {
    & #search_results td.img { width: 84px; padding-right: 12px; }
  }

  /* ==========================================================================
     Store locator and store pages. stores.css already inherits Lato and uses a
     near-cloud band, so this only brings the heading, the body colour and the
     links onto the palette. The per-location filter colours on /stores and the
     matching event colours in the calendar encode which store an event belongs
     to, so they are left exactly as they are.
     ========================================================================== */
  & .location { color: var(--ab-ink); }
  & .location h2 {
    margin: 0; padding: 12px 16px; border-radius: var(--ab-radius-md) var(--ab-radius-md) 0 0;
    background: var(--ab-cloud); color: var(--ab-navy); letter-spacing: -.01em;
    font: 600 22px/1.25 var(--ab-font-display);
  }
  /* Addresses, phone numbers and emails read as information here, not as
     navigation; they stay black as in the legacy design. */
  & .location a { color: var(--ab-ink); }
  & .location .address a { text-underline-offset: .18em; }
  & .location .phone { color: var(--ab-ink); font-weight: 700; }
  & .location .extra { color: var(--ab-slate); }
  & .location .classes img { max-width: 100%; height: auto; }
  & #calendars_and_events > h3 {
    margin: 24px 0 0; color: var(--ab-slate); font: 400 15px/1.5 var(--ab-font-body);
  }
  /* The locator floats fixed 300x275 cards, and the taller ones (Houston, San
     Antonio, Shreveport) overflow that height -- invisible while the cards had
     no edge, a clipped "View Class Calendar" button once they did. A grid sizes
     each row to its content and keeps the columns aligned. */
  & #locations {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 20px; padding-top: 16px;
  }
  & #locations .location {
    float: none; box-sizing: border-box; width: auto; height: auto; margin: 0;
    border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md); background: var(--ab-white);
  }
  /* "View Class Calendar": the red image becomes a button with the same
     words -- responsive.js already adds them as .responsive-calendar-label,
     which responsive.css showed only below 1025px. */
  & #locations .location .classes { margin-top: 10px; }
  & #locations .location .classes img { display: none; }
  & .responsive-stores #locations .location .classes a {
    display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px;
    border-radius: var(--ab-radius-md); background: var(--ab-red-deep); color: var(--ab-white);
    font: 700 15px/1.2 var(--ab-font-body); text-decoration: none;
    transition: background-color 150ms var(--ab-ease);
  }
  & .responsive-stores #locations .location .classes a:hover { background: #7E1720; }
  & .responsive-stores #locations .location .classes a::before {
    content: ""; flex: none; width: 17px; height: 17px; background: currentColor;
    -webkit-mask: var(--ab-i-calendar) center / contain no-repeat; mask: var(--ab-i-calendar) center / contain no-repeat;
  }
  & .responsive-stores .responsive-calendar-label { display: inline; }
  /* Cards in a row already stretch to the tallest one, but their contents stop
     where the copy stops, so the buttons sat at seven different heights. Push
     each one to the foot of its card so they read as one row. Phones show one
     card per row, where there is nothing to line up with. */
  @media screen and (min-width: 601px) {
    & .responsive-stores #locations .location { display: flex; flex-direction: column; }
    & .responsive-stores #locations .location .body { display: flex; flex: 1; flex-direction: column; }
    & .responsive-stores #locations .location .classes { margin-top: auto; padding-top: 10px; }
  }
  /* responsive.css underlines the address and phone below 1025px and sets the
     phone in #821719; they read as information, as on desktop. */
  & .responsive-stores #locations :is(.address, .phone) a { color: var(--ab-ink); text-decoration: none; }
  & .responsive-stores #locations .phone a { font-size: 15px; }
  /* Space between the cards and the map. */
  & .responsive-stores #mapcontainer { margin-top: 28px; }

  /* The calendar key: the image's words as text, then the store buttons on
     their own centred line (the image sat inline, so the buttons started
     beside it). Store pages share the key. */
  & .responsive-store-calendar #location_key { text-align: center; }
  /* Desktop: the key sits straight under the section heading. */
  @media screen and (min-width: 1025px) {
    & .responsive-store-calendar #location_key { padding-top: 20px; }
  }
  & .responsive-store-calendar #location_key #filter_calendar_img { display: none; }
  & .responsive-store-calendar #location_key .responsive-calendar-instructions {
    display: block; flex-basis: 100%; margin: 0 0 12px; color: var(--ab-ink); text-align: center;
    font: 600 15px/1.5 var(--ab-font-body);
  }
  & .responsive-store-calendar #location_key .responsive-calendar-instructions strong { font-weight: 800; }
  @media screen and (max-width: 1024px) {
    & .responsive-store-calendar #location_key { justify-content: center; }
  }
  /* Desktop: the floated 300px event cards packed left; centre them. */
  @media screen and (min-width: 1025px) {
    & .responsive-store-calendar #events {
      display: grid; grid-template-columns: repeat(auto-fill, 300px); justify-content: center; align-items: start; gap: 20px;
    }
    & .responsive-store-calendar #events > .event { float: none; margin: 0; }
  }
  /* "Back to calendar": on phones in the legacy design, at every width here. */
  & .responsive-store-calendar-page > a.responsive-calendar-return:not([hidden]) {
    display: block; position: fixed; z-index: 100000;
    /* Bottom left: production's chat widget sits in the bottom right. */
    left: calc(20px + env(safe-area-inset-left)); right: auto; bottom: calc(20px + env(safe-area-inset-bottom));
    box-sizing: border-box; max-width: calc(100% - 32px); min-height: 44px; padding: 12px 18px;
    border: 1px solid var(--ab-line); border-radius: var(--ab-radius-pill); background: var(--ab-white); color: var(--ab-navy);
    box-shadow: var(--ab-shadow-md); font: 700 15px/1.2 var(--ab-font-body); text-decoration: none;
  }
  & .responsive-store-calendar-page > a.responsive-calendar-return:not([hidden]):hover { border-color: var(--ab-navy); }
  @media screen and (max-width: 600px) {
    & .responsive-store-calendar-page > a.responsive-calendar-return:not([hidden]) { left: calc(16px + env(safe-area-inset-left)); bottom: calc(16px + env(safe-area-inset-bottom)); }
  }

  /* "Upcoming Classes & Events" -- legacy 5px #e70c2f rule. */
  & #calendars_and_events h2 {
    border-bottom: 3px solid var(--ab-red-action); color: var(--ab-navy);
    font-family: var(--ab-font-display); font-weight: 600; line-height: 1.25;
  }

  /* ==========================================================================
     Wish lists: a shared public list (/wishlist/<id>), and the search + login
     page at /wishlist/. #login_form is the site's shared sign-in block, so it
     picks this up wherever it appears.
     ========================================================================== */
  /* Headings on these pages are bare h1/h2 with no class, and the page's own
     <style> colours them #900. */
  & #page_innards:has(> .wishlist_item, > a.logout) > h1,
  & #page_innards .wishlist_header h1 {
    margin: 0 0 6px; color: var(--ab-navy); text-align: left; letter-spacing: -.01em;
    font: 600 clamp(22px, 1.05rem + 1vw, 29px)/1.25 var(--ab-font-display);
  }
  & #page_innards:has(> .wishlist_item, > a.logout) > h2,
  & #page_innards .wishlist_header > div {
    margin: 0 0 24px; color: var(--ab-slate); text-align: left;
    font: 400 15px/1.55 var(--ab-font-body);
  }
  & .wishlist_header { margin-top: 32px; }
  & .wishlist_header:first-child { margin-top: 0; }

  /* --- One wish-list line ----------------------------------------------- */
  & .wishlist_item {
    display: grid; grid-template-columns: 96px minmax(0, 1fr) 200px; gap: 0 20px; align-items: start;
    margin: 0 0 12px; padding: 16px 18px;
    border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md); background: var(--ab-white);
  }
  & .wishlist_item > .img { float: none; width: auto; display: flex; align-items: center; justify-content: center; min-width: 0; aspect-ratio: 1; border-radius: var(--ab-radius-sm); background: var(--ab-cloud); }
  & .wishlist_item > .img img { max-width: 78%; max-height: 78%; width: auto; height: auto; mix-blend-mode: multiply; }
  & .wishlist_item > .data { min-width: 0; margin: 0; }
  & .wishlist_item a.product_link {
    display: block; color: var(--ab-ink); font: 700 15px/1.4 var(--ab-font-body); text-decoration: none;
  }
  & .wishlist_item a.product_link:hover { color: var(--ab-blue); text-decoration: underline; text-underline-offset: .18em; }
  & .wishlist_item .price {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 6px 0 0;
    color: var(--ab-ink); font: 700 19px/1.3 var(--ab-font-display);
  }
  & .wishlist_item .price .freeship { font: 700 13px/1.45 var(--ab-font-body); }
  & .wishlist_item .short_description {
    margin: 10px 0 0; padding: 10px 12px; border-radius: var(--ab-radius-sm); background: var(--ab-cloud);
    color: var(--ab-slate); font: 400 13px/1.55 var(--ab-font-body); text-align: left;
  }
  & .wishlist_item > .item_info {
    display: grid; gap: 4px; padding-left: 20px; border-left: 1px solid #F2F2F2;
    color: var(--ab-slate); font: 400 13px/1.5 var(--ab-font-body);
  }
  & .wishlist_item > .item_info strong { color: var(--ab-ink); font-weight: 700; }
  /* The owner's controls (signed-in list): the page's <style> indents this
     column 105px and sets it in 8pt. */
  & .wishlist_item > .item_info { margin: 0; }
  & .wishlist_item > .item_info form.edit_wishlist_item { display: grid; gap: 8px; }
  & .wishlist_item > .item_info form.edit_wishlist_item > div:not([style]) { display: flex; align-items: center; gap: 8px; }
  & .wishlist_item > .item_info label { color: var(--ab-ink); font-size: 13px; font-weight: 700; }
  & .wishlist_item > .item_info input[type="text"],
  & .wishlist_item > .item_info input[type="number"] {
    box-sizing: border-box; width: 68px; min-height: 34px; margin: 0; padding: 4px 4px 4px 10px; text-align: left;
    border: 1px solid var(--ab-slate); border-radius: var(--ab-radius-sm); color: var(--ab-ink); font: 400 14px/1.2 var(--ab-font-body);
  }
  & .wishlist_item > .item_info input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: var(--ab-navy); }
  /* Save / Remove: the GIF buttons become text buttons (responsive.js). */
  & .wishlist_item > .item_info input[type="submit"] {
    justify-self: start; box-sizing: border-box; min-height: 36px; padding: 0 14px; border: 2px solid var(--ab-blue);
    border-radius: var(--ab-radius-sm); background: var(--ab-white); color: var(--ab-blue); cursor: pointer;
    font: 600 14px/1 var(--ab-font-display); text-decoration: none;
  }
  & .wishlist_item > .item_info input[type="submit"]:hover { background: var(--ab-blue); color: var(--ab-white); }
  /* Save appears only once Qty or Make Private has changed (responsive.js). */
  & .wishlist_item > .item_info input[type="submit"][hidden] { display: none; }
  & .wishlist_item > .item_info .remove_wishlist_item_form { margin: 10px 0 0; text-align: left; }

  /* --- The signed-in list ----------------------------------------------- */
  /* Its own <style> sets #page_innards to 97%, which pulls this page off the
     measure every other page uses. */
  & #page_innards:has(> a.logout, > .wishlist_item) { width: auto; }
  & #page_innards > a.logout {
    display: inline-flex; align-items: center; min-height: 40px; margin: 0 0 22px;
    padding: 0 14px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius-sm);
    color: var(--ab-navy); font: 600 14px/1 var(--ab-font-display); text-decoration: none;
  }
  & #page_innards > a.logout:hover { border-color: var(--ab-navy); background: var(--ab-cloud); }
  /* With items, the intro is a plain lead-in above the list. */
  & #page_innards:has(> .wishlist_item) > .my_wishlist_actions {
    margin: 0 0 20px; padding: 0; border: 0; background: none; text-align: left; font-size: 15px;
  }
  & #page_innards:has(> .wishlist_item) > .my_wishlist_actions::before { content: none; }
  /* Empty state, matching the empty cart. */
  & .my_wishlist_actions {
    margin: 0; padding: 40px 24px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md);
    background: var(--ab-white); color: var(--ab-slate); text-align: center;
    font: 400 15px/1.6 var(--ab-font-body);
  }
  & .my_wishlist_actions::before {
    content: ''; display: block; width: 38px; height: 38px; margin: 0 auto 14px; background: var(--ab-mist);
    -webkit-mask: var(--ab-i-heart) center / contain no-repeat;
    mask: var(--ab-i-heart) center / contain no-repeat;
  }
  & .my_wishlist_actions strong {
    display: block; margin-bottom: 8px; color: var(--ab-navy);
    font: 600 19px/1.3 var(--ab-font-display);
  }
  & .my_wishlist_actions img { vertical-align: middle; max-height: 22px; width: auto; margin: 0 2px; }
  /* The product page's Add to Wish List link, as a non-interactive sample. */
  & .my_wishlist_actions .ab-wishlist-sample {
    display: inline-flex; align-items: center; gap: 6px; margin: 0 4px; padding: 2px 10px; vertical-align: middle;
    border-radius: var(--ab-radius-pill); background: var(--ab-cloud); color: var(--ab-blue); font-size: 14px; white-space: nowrap;
  }
  & .my_wishlist_actions .ab-wishlist-sample::before {
    content: ''; width: 16px; height: 16px; background: currentColor;
    -webkit-mask: var(--ab-i-heart) center / contain no-repeat; mask: var(--ab-i-heart) center / contain no-repeat;
  }
  & .my_wishlist_actions a { color: var(--ab-blue); }
  /* Removing a line (signed-in list only). */
  & .remove_wishlist_item_form { grid-column: 1 / -1; margin: 12px 0 0; text-align: right; }
  & .remove_wishlist_item_form input[type="submit"],
  & .remove_wishlist_item_form button {
    box-sizing: border-box; min-height: 36px; padding: 0 13px; border: 1px solid var(--ab-line);
    border-radius: var(--ab-radius-sm); background: var(--ab-white); color: var(--ab-slate);
    cursor: pointer; font: 600 13px/1 var(--ab-font-display);
    transition: border-color 200ms var(--ab-ease), color 200ms var(--ab-ease);
  }
  & .remove_wishlist_item_form input[type="submit"]:hover,
  & .remove_wishlist_item_form button:hover { border-color: var(--ab-red-action); color: var(--ab-red-action); }

  /* --- Search a public list --------------------------------------------- */
  & #wishlist_search_form {
    box-sizing: border-box; width: auto; max-width: 520px; margin: 0 0 8px; padding: 18px 20px;
    border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md); background: var(--ab-white);
  }
  & #wishlist_search_form > div { margin: 0 0 14px; }
  & #wishlist_search_form > div:last-child { margin-bottom: 0; }
  & #wishlist_search_form label {
    display: block; margin-bottom: 6px; color: var(--ab-ink); font: 700 14px/1.4 var(--ab-font-body);
  }

  /* --- Sign in (shared #login_form) ------------------------------------- */
  & #login_form {
    box-sizing: border-box; width: auto; max-width: 520px; margin: 0; padding: 18px 20px;
    border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md); background: var(--ab-white);
  }
  & #login_form h2 {
    margin: 0 0 12px; color: var(--ab-navy); font: 600 16px/1.35 var(--ab-font-display);
  }
  & #login_form form > div { margin: 0 0 18px; }
  & #login_form form > div:last-child { margin-bottom: 0; }
  & #login_form p { margin: 0 0 10px; }
  & #login_form label { display: block; margin-bottom: 6px; color: var(--ab-ink); font: 700 14px/1.4 var(--ab-font-body); }
  /* The radio rows read as one choice each, label beside the control. */
  & #login_form p:has(> input[type="radio"]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
  & #login_form p:has(> input[type="radio"]) label { margin: 0; font-weight: 400; }
  & #login_form input[type="radio"] { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--ab-navy); }
  & #login_form a { display: inline-block; color: var(--ab-blue); font: 400 13px/1.5 var(--ab-font-body); text-underline-offset: .18em; }

  & #wishlist_search_form input[type="text"],
  & #login_form input[type="text"],
  & #login_form input[type="password"] {
    box-sizing: border-box; display: block; width: 100%; max-width: 320px; min-height: 46px;
    margin: 0; padding: 10px 14px; border: 1px solid var(--ab-slate); border-radius: var(--ab-radius-sm);
    background: var(--ab-white); color: var(--ab-ink); font: 400 15px/1.3 var(--ab-font-body);
  }
  & #wishlist_search_form input[type="submit"],
  & #login_form input[type="submit"] {
    box-sizing: border-box; width: auto; min-width: 180px; min-height: 50px; margin: 4px 0 0; padding: 0 24px;
    border: 2px solid var(--ab-red-action); border-radius: var(--ab-radius-sm);
    background: var(--ab-red-action); color: var(--ab-white); cursor: pointer;
    font: 600 16px/1 var(--ab-font-display);
    transition: background-color 200ms var(--ab-ease), border-color 200ms var(--ab-ease);
  }
  & #wishlist_search_form input[type="submit"]:hover,
  & #login_form input[type="submit"]:hover { border-color: var(--ab-red-deep); background-color: var(--ab-red-deep); }
  /* Searching by name is the secondary action of the two. */
  & #wishlist_search_form input[type="submit"] {
    border-color: var(--ab-blue); background: var(--ab-white); color: var(--ab-blue);
  }
  & #wishlist_search_form input[type="submit"]:hover { border-color: var(--ab-blue); background-color: var(--ab-blue); color: var(--ab-white); }

  @media screen and (max-width: 700px) {
    & .wishlist_item { grid-template-columns: 72px minmax(0, 1fr); gap: 0 14px; }
    & .wishlist_item > .item_info { grid-column: 1 / -1; margin-top: 12px; padding: 12px 0 0; border-left: 0; border-top: 1px solid #F2F2F2; }
  }
  @media screen and (max-width: 1024px) {
    & #wishlist_search_form input[type="text"],
    & #login_form input[type="text"],
    & #login_form input[type="password"] { min-height: 44px; font-size: 16px; max-width: none; }
  }

  /* --- /wishlist/search: the form, then "Search Results", a count and a
     long numbered list of names ------------------------------------------ */
  & #page_innards:has(> #wishlist_search_form):not(:has(> #login_form)) { width: auto; max-width: 1000px; margin-inline: auto; }
  /* The search in one row: Last, First, then the button. */
  & #page_innards:not(:has(> #login_form)) > #wishlist_search_form {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; align-items: end; gap: 12px 14px;
    width: auto; max-width: 760px; margin: 0 0 28px;
  }
  & #page_innards:not(:has(> #login_form)) > #wishlist_search_form > div { margin: 0; }
  & #page_innards:not(:has(> #login_form)) > #wishlist_search_form input[type="text"] { max-width: none; }
  & #page_innards:not(:has(> #login_form)) > #wishlist_search_form input[type="submit"] { margin: 0; min-height: 46px; }
  & #page_innards:has(> #wishlist_search_form) > h3 {
    display: inline-block; margin: 0 12px 12px 0; color: var(--ab-navy); font: 600 22px/1.3 var(--ab-font-display);
  }
  & #page_innards:has(> #wishlist_search_form) > h3 + div { display: inline-block; color: var(--ab-slate); font-size: 14px; }
  & #page_innards:has(> #wishlist_search_form) > ol {
    columns: 4 200px; column-gap: 32px; margin: 0; padding: 16px 20px 16px 48px;
    border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md); background: var(--ab-white);
  }
  & #page_innards:has(> #wishlist_search_form) > ol li { break-inside: avoid; padding: 3px 0; list-style: decimal; font-size: 15px; line-height: 1.45; }
  & #page_innards:has(> #wishlist_search_form) > ol li::marker { color: var(--ab-slate); font-size: 13px; }
  & #page_innards:has(> #wishlist_search_form) > ol a { color: var(--ab-blue); text-decoration: none; }
  & #page_innards:has(> #wishlist_search_form) > ol a:hover { text-decoration: underline; text-underline-offset: .18em; }
  @media screen and (max-width: 600px) {
    & #page_innards:not(:has(> #login_form)) > #wishlist_search_form { grid-template-columns: minmax(0, 1fr); }
    & #page_innards:not(:has(> #login_form)) > #wishlist_search_form input[type="submit"] { width: 100%; }
    & #page_innards:has(> #wishlist_search_form) > ol { padding: 12px 14px 12px 40px; columns: 2 130px; column-gap: 20px; }
  }

  /* --- /wishlist/ signed out: search and sign-in side by side ------------ */
  /* The page is two headings and two forms in sequence; the page's <style>
     centres each heading in a 500px box but leaves its text left, so nothing
     lined up. On desktop each task gets a column, heading over its card. */
  & #page_innards:has(> #wishlist_search_form):has(> #login_form) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; align-items: start;
    width: auto; max-width: 1000px; margin-inline: auto;
  }
  & #page_innards:has(> #wishlist_search_form):has(> #login_form) > * { grid-column: 1 / -1; }
  & #page_innards:has(> #wishlist_search_form):has(> #login_form) > .wishlist_header {
    width: auto; margin: 0 0 14px; padding: 0; grid-row: 1;
  }
  & #page_innards:has(> #wishlist_search_form):has(> #login_form) > .wishlist_header:first-of-type { grid-column: 1; }
  & #page_innards:has(> #wishlist_search_form):has(> #login_form) > .wishlist_header:nth-of-type(2) { grid-column: 2; }
  & #page_innards:has(> #wishlist_search_form):has(> #login_form) > #wishlist_search_form { grid-column: 1; grid-row: 2; width: auto; max-width: none; margin: 0; }
  & #page_innards:has(> #wishlist_search_form):has(> #login_form) > #login_form { grid-column: 2; grid-row: 2; width: auto; max-width: none; margin: 0; }
  & #page_innards:has(> #wishlist_search_form):has(> #login_form) .wishlist_header > div { margin: 0; }
  /* The name search: Last and First side by side, the button under them. */
  & #page_innards:has(> #login_form) #wishlist_search_form {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 14px;
  }
  & #page_innards:has(> #login_form) #wishlist_search_form > div { margin: 0; }
  & #page_innards:has(> #login_form) #wishlist_search_form > div:has(> input[type="submit"]) { grid-column: 1 / -1; }
  & #page_innards:has(> #login_form) #wishlist_search_form input[type="text"] { max-width: none; }
  @media screen and (max-width: 900px) {
    & #page_innards:has(> #wishlist_search_form):has(> #login_form) { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
    & #page_innards:has(> #wishlist_search_form):has(> #login_form) > .wishlist_header:first-of-type,
    & #page_innards:has(> #wishlist_search_form):has(> #login_form) > .wishlist_header:nth-of-type(2),
    & #page_innards:has(> #wishlist_search_form):has(> #login_form) > #wishlist_search_form,
    & #page_innards:has(> #wishlist_search_form):has(> #login_form) > #login_form { grid-column: 1; grid-row: auto; }
    & #page_innards:has(> #wishlist_search_form):has(> #login_form) > .wishlist_header:nth-of-type(2) { margin-top: 32px; }
  }
  @media screen and (max-width: 420px) {
    & #page_innards:has(> #login_form) #wishlist_search_form { grid-template-columns: minmax(0, 1fr); }
  }

  /* ==========================================================================
     Content pages (.page_body, .legacy) and message banners.

     Broad strokes only: colour, type and spacing are brought onto the 2026
     palette, and the layout each page already has is left alone — centred
     headings stay centred, floats stay floated, table structure is untouched.
     ========================================================================== */

  /* --- Message banners -------------------------------------------------- */
  /* style.css gives these a 5px solid border in saturated 2009 colours. The
     same states, as a quiet card. .flash_message is handled above; these are
     the standalone ones. */
  & div.notice,
  & div.alert,
  & div.error {
    box-sizing: border-box; padding: 12px 18px;
    border: 1px solid var(--ab-line); border-left: 4px solid var(--ab-slate); border-top-width: 1px;
    border-radius: var(--ab-radius-md); background: var(--ab-cloud);
    color: var(--ab-ink); font: 400 14px/1.5 var(--ab-font-body);
  }
  & div.notice { border-color: #BFE3CD; border-left-color: var(--ab-success); background: #EDF7F1; color: #14603A; }
  & div.alert { border-color: #EFDCAE; border-left-color: var(--ab-warning); background: #FDF6E6; color: #6B4200; }
  & div.error { border-color: #F0C4C8; border-left-color: var(--ab-red-action); background: #FDF0F1; color: var(--ab-red-deep); }

  /* --- Body copy -------------------------------------------------------- */
  /* Type goes on the prose elements, not on the wrapper: .page_body also holds
     pages with their own embedded designs (/top10, /brother-support), and a
     font-size or line-height here leaks into every one of them. */
  & .page_body { padding: 4px 0 28px; color: var(--ab-ink); }
  & .page_body p,
  & .page_body blockquote,
  & .page_body li,
  & .page_body dd,
  & .page_body dt { font-size: 15px; line-height: 1.5; }
  & .page_body p { margin: 0 0 12px; }
  /* style.css indents these under their heading; keep that. */
  & .page_body .h2sections p,
  & .page_body .h2sectionsi p { margin: 0 40px 12px; }
  /* Copy pasted from Word arrives with inline inch margins, and a negative
     right one drags the paragraph past the page and puts the whole document
     into horizontal scroll. The markup is in the CMS, so neutralise it here. */
  & .page_body p[style*="margin-right:-"],
  & .page_body p[style*="margin-right: -"],
  & .page_body div[style*="margin-right:-"],
  & .page_body div[style*="margin-right: -"] { margin-right: 0 !important; }
  & .page_body ol,
  & .page_body ul { margin: 0 0 14px; padding-left: 26px; }
  & .page_body li { margin-bottom: 5px; }
  & .page_body a { color: var(--ab-blue); text-underline-offset: .18em; }
  & .page_body a:hover { color: var(--ab-navy); }

  /* Headings keep the alignment the page gives them; only the type changes. */
  & .page_body h1,
  & .page_body .langlink {
    margin: 0 0 18px; color: var(--ab-navy); letter-spacing: -.01em;
    font: 600 clamp(22px, 1.05rem + 1vw, 29px)/1.25 var(--ab-font-display);
  }
  & .page_body h2 { margin: 30px 0 10px; color: var(--ab-navy); font: 600 20px/1.3 var(--ab-font-display); }
  & .page_body h3 { margin: 24px 0 8px; color: var(--ab-navy); font: 600 17px/1.35 var(--ab-font-display); }
  & .page_body h4,
  & .page_body h5,
  & .page_body h6 { margin: 20px 0 6px; color: var(--ab-navy); font-family: var(--ab-font-display); font-weight: 600; }
  /* The underline reads as a link; a rule does the same job without that. */
  & .page_body h2.list_header {
    padding-bottom: 7px; border-bottom: 1px solid var(--ab-line);
    font-size: 19px; text-decoration: none;
  }
  & .page_body h2.better { border-bottom-color: var(--ab-line); font: 600 19px/1.3 var(--ab-font-display); }

  & .page_body blockquote {
    margin: 14px 0 14px 8px; padding: 2px 0 2px 18px;
    border-left: 3px solid var(--ab-line); color: var(--ab-slate);
  }
  & .page_body .caption,
  & .page_body .image_caption .c { color: var(--ab-slate); }

  /* --- Tables ----------------------------------------------------------- */
  /* Same grid, softer rules and roomier cells. */
  & .page_body table#buzzedit_formats,
  & .page_body table.comparison_chart,
  & .legacy table.comparison_chart { border-color: var(--ab-line); }
  & .page_body table#buzzedit_formats td, & .page_body table#buzzedit_formats th,
  & .page_body table.comparison_chart td, & .page_body table.comparison_chart th,
  & .legacy table.comparison_chart td, & .legacy table.comparison_chart th { border-color: var(--ab-line); }
  /* border1b keeps its black rule — the name is the spec, and the pages using
     it draw diagrams where the hard line is the point. */
  & .page_body table.border1b td, & .page_body table.border1b th,
  & .page_body table#buzzedit_formats td, & .page_body table#buzzedit_formats th,
  & .page_body table.comparison_chart td, & .page_body table.comparison_chart th,
  & .legacy table.comparison_chart td, & .legacy table.comparison_chart th,
  & .legacy table.border1b td, & .legacy table.border1b th { padding: 6px 9px; }

  /* #EFEFCF (pale olive) header cells become the page's own cloud. */
  & .page_body table.comparison_chart th,
  & .page_body table.comparison_chart td:first-child,
  & .page_body table#buzzedit_formats th,
  & .page_body table#buzzedit_formats td.leftheader,
  & .legacy table.comparison_chart th {
    background: var(--ab-cloud); color: var(--ab-navy); font-family: var(--ab-font-display);
  }
  & .page_body table.comparison_chart tr.even,
  & .legacy table.comparison_chart tr.even { background: #F8FAFC; }
  & .page_body table.comparison_chart td.y,
  & .legacy table.comparison_chart td.y { color: var(--ab-success); }
  & .page_body table.comparison_chart td.n,
  & .legacy table.comparison_chart td.n { color: var(--ab-red-action); }

  /* --- Blocks ----------------------------------------------------------- */
  & .page_body .h2sections h2,
  & .page_body .h2sectionsi h2 {
    padding: 8px 12px; border-radius: var(--ab-radius-sm); background: var(--ab-cloud);
    color: var(--ab-navy); font: 600 15px/1.35 var(--ab-font-display);
  }
  /* The gutter between the two columns used to come from .infoBlock's 10px
     side margins, which also inset the cards from the page measure. Put it on
     the columns instead: the gap comes back and the outer edges stay flush. */
  & .page_body div.column { box-sizing: border-box; }
  @media screen and (min-width: 601px) {
    & .page_body div.column:first-of-type { padding-right: 12px; }
    & .page_body div.column:last-of-type { padding-left: 12px; }
  }
  & .page_body .infoBlock {
    margin: 0 0 12px; border: 1px solid var(--ab-line); border-top-color: var(--ab-line);
    border-radius: var(--ab-radius-md); background: var(--ab-white); overflow: hidden;
  }
  & .page_body .infoBlock h2 {
    margin: 0; padding: 7px 14px; background: var(--ab-cloud); color: var(--ab-navy);
    font: 600 13px/1.35 var(--ab-font-display);
  }
  /* A dense list of links. It keeps the legacy size and rhythm — anything
     looser stretches every card and pushes the page well past its old height. */
  & .page_body .infoBlock a { margin: 10px 14px; color: var(--ab-blue); line-height: 1.25; }
  & .page_body #attention_tax { border-color: var(--ab-navy); }
  & .page_body #attention_tax strong { color: var(--ab-red-action); }
  & .page_body #floriani_class h2,
  & .page_body #floriani_class h3 { color: var(--ab-navy); font-family: var(--ab-font-display); }
  & .page_body #floriani_class #bullets { border-color: var(--ab-line); border-radius: var(--ab-radius-sm); background: var(--ab-cloud); }
  & .page_body #floriani_class #bullets li { color: var(--ab-ink); }
  & .page_body #floriani_class #topimage { border-color: var(--ab-line); }
  & .page_body #floriani_class #schedule td,
  & .page_body #floriani_class #schedule th { border-color: var(--ab-line); }
  & .page_body #floriani_class #schedule tr.datetime { background: var(--ab-cloud); }
  & .page_body ul#expert_help li p { border-bottom: 1px solid var(--ab-line); }

  /* --- .legacy imported copy -------------------------------------------- */
  & .legacy { line-height: 1.6em !important; color: var(--ab-ink); }
  & .legacy h1, & .legacy h2, & .legacy h3,
  & .legacy h4, & .legacy h5, & .legacy h6 { color: var(--ab-navy); font-family: var(--ab-font-display); }
  & .legacy a { color: var(--ab-blue); }
  /* table.struct is a layout scaffold and must stay borderless. */
  & .legacy table:not(.struct) { border: 1px solid var(--ab-line); }
  & .legacy table:not(.struct) td,
  & .legacy table:not(.struct) th { border: 1px solid var(--ab-line); padding: 6px 9px; }

  /* --- Odds and ends ---------------------------------------------------- */
  & h1.gallery_title { color: var(--ab-navy); font: 600 18px/1.3 var(--ab-font-display); }
  & h1.gallery_title a { color: inherit; }
  & table.gallery td.thumb { border-color: var(--ab-line); }
  & table.gallery td.thumb.selected { background-color: var(--ab-blue-uranian); }
  & .member_name { color: var(--ab-navy); font: 600 22px/1.25 var(--ab-font-display); }
  & .member_title { color: var(--ab-slate); font: 600 14px/1.4 var(--ab-font-body); }
  & .member_description { font: 400 14px/1.6 var(--ab-font-body); }
  & .jamesize { color: var(--ab-ink); }

  /* ==========================================================================
     Main nav in Cardinal (overrides the navy set in the nav section above).
     ========================================================================== */
  & #site_nav { background: var(--ab-red-action); }
  & #site_nav ul#main li.tl a.tl::after { background: var(--ab-white); }
  & #site_nav ul#main ul.subnav { border-top-color: var(--ab-red-deep); } /* tonal edge, reads as part of the bar */
  & #site_nav :focus-visible { outline-color: var(--ab-white); }
  @media screen and (max-width: 1024px) {
    & #site_nav .responsive-menu-toggle { background: transparent; }
    & #site_nav ul#main li.tl { background: var(--ab-red-action) !important; border-top-color: rgba(255, 255, 255, .22); }
    & #site_nav .responsive-submenu-toggle { border-color: rgba(255, 255, 255, .3); }
  }
  @media screen and (max-width: 600px) {
    & .responsive-phone-menu .responsive-phone-header { background: var(--ab-red-action); }
  }

  /* ==========================================================================
     Account (/account on the secure host). The page's own <style> frames it
     at 645px with #990000 title bars and a black-ruled orders table;
     responsive.js adds .responsive-account and turns rows into cards on
     phones (responsive.css).
     ========================================================================== */
  & #page_content #page_innards.responsive-account {
    box-sizing: border-box; width: auto; max-width: 960px; margin: 8px auto 0;
    color: var(--ab-ink); font: 400 15px/1.5 var(--ab-font-body);
  }
  & #page_innards.responsive-account h2 {
    margin: 0 0 12px; padding: 0; border: 0; background: none; color: var(--ab-navy); text-align: left;
    font: 600 clamp(20px, 1rem + .8vw, 24px)/1.25 var(--ab-font-display);
  }
  & #page_innards.responsive-account a { color: var(--ab-blue); text-underline-offset: .18em; }

  & #page_innards.responsive-account #UserInfo {
    margin: 0 0 24px; padding: 18px 20px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md);
    background: var(--ab-white); line-height: 1.8;
  }
  & #page_innards.responsive-account #UserInfo h2 { display: inline-block; margin: 0 0 8px; border: 0; }
  & #page_innards.responsive-account #UserInfo .logout { float: right; margin: 4px 0 0; font-size: 14px; font-weight: 700; }
  & #page_innards.responsive-account #UserInfo label {
    float: left; clear: left; width: 150px; margin: 0 12px 0 0; text-align: left;
    color: var(--ab-slate); font-weight: 400;
  }
  & #page_innards.responsive-account #UserInfo .edit {
    display: inline-block; margin: 12px 0 0; padding: 8px 18px; border: 2px solid var(--ab-blue); border-radius: var(--ab-radius-sm);
    color: var(--ab-blue); font: 600 15px/1.2 var(--ab-font-display); text-align: center; text-decoration: none;
  }
  & #page_innards.responsive-account #UserInfo .edit:hover { background: var(--ab-blue); color: var(--ab-white); }

  /* The status glossary: quiet reference text in a cloud panel. */
  & #page_innards.responsive-account #status_definitions {
    margin: 0 0 24px; padding: 14px 18px 6px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md); background: var(--ab-cloud);
  }
  & #page_innards.responsive-account #status_definitions h3 { margin: 0 0 8px; color: var(--ab-navy); font: 600 17px/1.3 var(--ab-font-display); }
  & #page_innards.responsive-account #status_definitions ul { margin: 0; padding: 0 0 0 20px; }
  & #page_innards.responsive-account #status_definitions li { margin: 0 0 8px; color: var(--ab-slate); font-size: 14px; line-height: 1.5; list-style: disc; }
  & #page_innards.responsive-account #status_definitions li strong { color: var(--ab-ink); }

  & #page_innards.responsive-account #orders_table {
    width: 100%; border: 1px solid var(--ab-line); border-collapse: separate; border-spacing: 0;
    border-radius: var(--ab-radius-md); background: var(--ab-white); overflow: hidden; font-size: 14px;
  }
  & #page_innards.responsive-account #orders_table th,
  & #page_innards.responsive-account #orders_table td { padding: 9px 12px; border: 0; border-top: 1px solid var(--ab-line); vertical-align: top; }
  & #page_innards.responsive-account #orders_table th {
    border-top: 0; background: var(--ab-cloud); color: var(--ab-navy); text-align: left;
    font: 700 12px/1.4 var(--ab-font-body); letter-spacing: .06em; text-transform: uppercase;
  }
  & #page_innards.responsive-account #orders_table tr:hover > td { background: #F8FAFC; }
  & #page_innards.responsive-account #orders_table td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
  & #page_innards.responsive-account #orders_table .carrier { color: var(--ab-slate); }
  & #page_innards.responsive-account #orders_table .return_link { float: right; font-size: 13px; font-weight: 700; }

  /* Order details (/account/<id>). */
  & #page_innards.responsive-account > br { display: none; }
  & #page_innards.responsive-account > a[href="/account"] {
    display: inline-block; margin: 0 0 14px; font-size: 14px; font-weight: 700;
  }
  & #page_innards.responsive-account #OrderDetails {
    margin: 0 0 20px; padding: 18px 20px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md);
    background: var(--ab-white); line-height: 1.6;
  }
  & #page_innards.responsive-account #OrderDetails h2 { margin: 0 0 12px; border: 0; }
  & #page_innards.responsive-account #OrderDetails label {
    width: 110px; margin: 0 12px 0 0; text-align: left; color: var(--ab-slate); font-weight: 400;
  }
  & #page_innards.responsive-account #OrderDetails > br:last-of-type { display: none; }
  & #page_innards.responsive-account #OrderDetails > table {
    width: 100%; border: 1px solid var(--ab-line); border-collapse: separate; border-spacing: 0;
    border-radius: var(--ab-radius-md); background: var(--ab-white); overflow: hidden; font-size: 14px;
  }
  & #page_innards.responsive-account #OrderDetails > table { margin: 14px 0 0; line-height: 1.45; }
  & #page_innards.responsive-account #OrderDetails > table th,
  & #page_innards.responsive-account #OrderDetails > table td { padding: 9px 12px; border: 0; border-top: 1px solid var(--ab-line); }
  & #page_innards.responsive-account #OrderDetails > table th {
    border-top: 0; background: var(--ab-cloud); color: var(--ab-navy);
    font: 700 12px/1.4 var(--ab-font-body); letter-spacing: .06em; text-transform: uppercase;
  }
  & #page_innards.responsive-account #OrderDetails > table td[align="right"] { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
  & #page_innards.responsive-account #OrderDetails tr.responsive-order-total > td { background: var(--ab-cloud); }
  & #page_innards.responsive-account #OrderDetails tr.responsive-order-total + tr.responsive-order-total > td { border-top: 0; }
  & #page_innards.responsive-account #OrderDetails tr.responsive-order-total strong { font-weight: 400; color: var(--ab-slate); }
  & #page_innards.responsive-account > form { margin: 0 0 20px; }

  /* Request a return (/account/return/<id>). The page's <style> floats
     130px bold labels with <br> clears and a #CCC bar per product. */
  & #page_innards.responsive-account > h1 {
    margin: 0 0 16px; padding: 0; background: none; color: var(--ab-navy); text-align: left; letter-spacing: -.01em;
    font: 600 clamp(24px, 1.1rem + 1.2vw, 30px)/1.2 var(--ab-font-display);
  }
  & #new_return_request { color: var(--ab-ink); font-size: 15px; line-height: 1.5; }
  & #new_return_request br { display: none; }
  & #page_innards.responsive-account #new_return_request h2 { margin: 24px 0 12px; font-size: 20px; }
  & #page_innards.responsive-account #new_return_request > h2:first-of-type { margin-top: 0; }
  & #new_return_request label { float: none; width: auto; margin: 0; padding: 0; line-height: 1.45; }
  & #new_return_request input[type="text"],
  & #new_return_request textarea {
    box-sizing: border-box; float: none; display: block; width: 100%; max-width: 420px; min-height: 40px; margin: 0; padding: 7px 12px;
    border: 1px solid var(--ab-slate); border-radius: var(--ab-radius-sm); background: var(--ab-white);
    color: var(--ab-ink); font: 400 15px/1.4 var(--ab-font-body);
  }
  & #new_return_request textarea { max-width: 100%; min-height: 120px; resize: vertical; }
  & #new_return_request input[type="checkbox"],
  & #new_return_request input[type="radio"] { float: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ab-navy); }
  & #new_return_request a { color: var(--ab-blue); text-underline-offset: .18em; }

  /* Contact rows: label column, then the field. */
  & #new_return_request > div:not([style], #errorExplanation) {
    display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 4px 14px; margin: 0 0 10px;
  }
  & #new_return_request > div:not([style], #errorExplanation) > label { color: var(--ab-slate); font-weight: 700; text-align: left; }
  & #new_return_request .input_set { float: none; padding: 0; }
  & #new_return_request .input_set label { width: auto; font-weight: 400; text-align: left; }
  /* Checkbox and radio lists: control beside its text. */
  & #new_return_request .input_set:has(> input[type="checkbox"], > input[type="radio"], > .fieldWithErrors > input[type="checkbox"]) {
    display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px 10px; align-items: start;
  }

  /* Products: a selectable row each; ticking one reveals its form. */
  & #new_return_request div.order_product {
    display: flex; align-items: flex-start; gap: 12px; margin: 0 0 8px; padding: 12px 14px;
    border: 1px solid var(--ab-line); border-radius: var(--ab-radius-sm); background: var(--ab-white);
  }
  & #new_return_request div.order_product:has(> input:checked) {
    margin-bottom: 0; border-color: var(--ab-navy); border-radius: var(--ab-radius-sm) var(--ab-radius-sm) 0 0;
    background: #F5F8FC; box-shadow: inset 0 0 0 1px var(--ab-navy);
  }
  & #new_return_request div.order_product label { flex: 1; font-weight: 700; text-align: left; cursor: pointer; }
  & #new_return_request div.product_form {
    margin: 0 0 14px; padding: 14px 16px 4px; border: 1px solid var(--ab-navy); border-top: 0;
    border-radius: 0 0 var(--ab-radius-sm) var(--ab-radius-sm); background: var(--ab-white);
  }
  & #new_return_request div.product_form > label {
    float: left; clear: left; width: 160px; padding-top: 1px; color: var(--ab-slate); font-weight: 700; text-align: left;
  }
  & #new_return_request div.product_form > .input_set { margin: 0 0 14px 176px; }
  & #new_return_request div.product_form > .input_set label[for$="_description"] { display: block; margin: 0 0 6px; color: var(--ab-slate); font-size: 14px; }

  & #new_return_request strong.err { color: var(--ab-red-action); font-size: 14px; }
  /* Errors: Rails wraps the invalid controls in div.fieldWithErrors. */
  & #page_innards.responsive-account #new_return_request > #errorExplanation { margin: 0 0 24px; }
  & #new_return_request .fieldWithErrors { display: contents; }
  & #new_return_request .fieldWithErrors label,
  & #new_return_request div.product_form > .input_set .fieldWithErrors label[for$="_description"] { color: var(--ab-red-deep); }
  & #new_return_request .fieldWithErrors input[type="text"],
  & #new_return_request .fieldWithErrors textarea { border-color: var(--ab-red-action); box-shadow: 0 0 0 1px var(--ab-red-action); }
  & #new_return_request .fieldWithErrors input[type="checkbox"] { outline: 2px solid var(--ab-red-action); outline-offset: 1px; }
  & #new_return_request #return_request_submit {
    box-sizing: border-box; min-width: 220px; min-height: 50px; margin: 16px 0 0; padding: 0 28px;
    border: 2px solid var(--ab-red-action); border-radius: var(--ab-radius-sm);
    background: var(--ab-red-action); color: var(--ab-white); cursor: pointer; font: 600 17px/1 var(--ab-font-display);
  }
  & #new_return_request #return_request_submit:hover { border-color: var(--ab-red-deep); background: var(--ab-red-deep); }

  /* Edit account (/account/edit): the fields in pairs, labels above, as on
     the checkout's new-account form. */
  & #page_content #page_innards.responsive-account:has(> form.edit_customer) { max-width: 720px; padding: 0; border: 0; }
  & #page_innards.responsive-account form.edit_customer {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; align-items: start;
    padding: 24px 28px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md); background: var(--ab-white);
  }
  & form.edit_customer > div:has(> input[name="authenticity_token"]) { position: absolute; }
  & #page_innards.responsive-account form.edit_customer > p { min-width: 0; margin: 0; }
  & #page_innards.responsive-account form.edit_customer > #errorExplanation,
  & #page_innards.responsive-account form.edit_customer > p.checkbox,
  & #page_innards.responsive-account form.edit_customer > p:has(> a[href*="privacy"]),
  & #page_innards.responsive-account form.edit_customer > .ab-form-actions { grid-column: 1 / -1; }
  & #page_innards.responsive-account form.edit_customer label {
    display: block; float: none; width: auto; margin: 0 0 6px; text-align: left;
    color: var(--ab-ink); font: 700 14px/1.4 var(--ab-font-body);
  }
  & #page_innards.responsive-account form.edit_customer .fieldWithErrors { display: contents; }
  & #page_innards.responsive-account form.edit_customer .fieldWithErrors label { color: var(--ab-red-deep); }
  & #page_innards.responsive-account form.edit_customer input[type="text"],
  & #page_innards.responsive-account form.edit_customer input[type="password"] {
    box-sizing: border-box; display: block; width: 100%; max-width: none; min-height: 44px; margin: 0; padding: 9px 14px;
    border: 1px solid var(--ab-slate); border-radius: var(--ab-radius-sm); background: var(--ab-white);
    color: var(--ab-ink); font: 400 16px/1.3 var(--ab-font-body);
  }
  & #page_innards.responsive-account form.edit_customer .fieldWithErrors input { border-color: var(--ab-red-action); box-shadow: 0 0 0 1px var(--ab-red-action); }
  & #page_innards.responsive-account form.edit_customer a { display: inline-block; padding: 0; color: var(--ab-blue); font-size: 13px; }
  & #page_innards.responsive-account form.edit_customer a.window_open { margin-top: 6px; }
  & #page_innards.responsive-account form.edit_customer > p.checkbox {
    display: flex; align-items: flex-start; gap: 10px; padding-top: 14px; border-top: 1px solid var(--ab-line);
  }
  & #page_innards.responsive-account form.edit_customer > p.checkbox label { margin: 0; font-weight: 400; font-size: 15px; }
  & #page_innards.responsive-account form.edit_customer input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ab-navy); }
  & #page_innards.responsive-account form.edit_customer > p:has(> a[href*="privacy"]) br { display: none; }
  /* "Update Account or Cancel" (grouped by responsive.js). */
  & #page_innards.responsive-account form.edit_customer > .ab-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--ab-slate); font-size: 14px; }
  & #page_innards.responsive-account form.edit_customer #customer_submit {
    box-sizing: border-box; min-width: 200px; min-height: 50px; margin: 0; padding: 0 28px;
    border: 2px solid var(--ab-red-action); border-radius: var(--ab-radius-sm);
    background: var(--ab-red-action); color: var(--ab-white); cursor: pointer; font: 600 17px/1 var(--ab-font-display);
  }
  & #page_innards.responsive-account form.edit_customer #customer_submit:hover { border-color: var(--ab-red-deep); background: var(--ab-red-deep); }
  & #page_innards.responsive-account form.edit_customer .ab-form-actions a { font-size: 14px; font-weight: 700; }
  & #page_innards.responsive-account #errorExplanation {
    box-sizing: border-box; width: auto; margin: 0; padding: 12px 16px; border: 0; border-left: 4px solid var(--ab-red-action);
    border-radius: var(--ab-radius-sm); background: #FBEAEC; color: var(--ab-ink); font-size: 14px;
  }
  & #page_innards.responsive-account #errorExplanation h2 {
    margin: 0 0 4px; padding: 0; border: 0; background: none; color: var(--ab-red-deep); text-align: left; font: 700 15px/1.4 var(--ab-font-body);
  }
  & #page_innards.responsive-account #errorExplanation p { margin: 0 0 4px; padding: 0; background: none; }
  & #page_innards.responsive-account #errorExplanation ul { margin: 0; padding-left: 20px; }
  & #page_innards.responsive-account #errorExplanation li { list-style: disc; font-size: 14px; }

  @media screen and (max-width: 600px) {
    & #page_innards.responsive-account #UserInfo { padding: 14px 16px; }
    & #page_innards.responsive-account #UserInfo h2 { margin: 0 0 4px; }
    & #page_innards.responsive-account #UserInfo label { float: none; width: auto; margin: 8px 0 0; line-height: 1.4; }
    & #page_innards.responsive-account #orders_table { border: 0; background: none; overflow: visible; }
    & .responsive-account tr.responsive-order-row { border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md); background: var(--ab-white); overflow: hidden; }
    & #page_innards.responsive-account #OrderDetails { padding: 14px 16px; }
    & #new_return_request > div:not([style], #errorExplanation) { grid-template-columns: minmax(0, 1fr); }
    & #new_return_request > div:not([style], #errorExplanation) > label:empty { display: none; }
    & #new_return_request div.product_form > label { float: none; display: block; width: auto; margin: 0 0 6px; }
    & #new_return_request div.product_form > .input_set { margin-left: 0; }
    & #new_return_request #return_request_submit { width: 100%; }
    & #page_innards.responsive-account form.edit_customer { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
    & #page_innards.responsive-account form.edit_customer #customer_submit { width: 100%; }
    & #page_innards.responsive-account #OrderDetails label { float: none; width: auto; margin: 8px 0 0; line-height: 1.4; }
    & #page_innards.responsive-account #OrderDetails > table { border: 0; background: none; overflow: visible; }
    & #page_innards.responsive-account #OrderDetails tr.responsive-order-row > td { border-top: 0; }
    & #page_innards.responsive-account #OrderDetails tr.responsive-order-total { border: 0; border-top: 1px solid var(--ab-line); }
    & #page_innards.responsive-account #orders_table tr.responsive-order-row > td { border-top: 0; }
    & #page_innards.responsive-account #orders_table tr.responsive-order-row > td:nth-child(n+3) { border-top: 1px solid var(--ab-line); }
    & .responsive-account tr.responsive-order-row > td::before { color: var(--ab-slate); font: 700 11px/1.4 var(--ab-font-body); letter-spacing: .06em; text-transform: uppercase; }
  }

  /* ==========================================================================
     Store review prompts (/reviewbatonrouge, /reviewmetairie, ...). A CMS
     page: a 690px white .votebox on a #F5F5F5 band, the thumbs-up (Yelp or
     Google) and thumbs-down (feedback form) images stacked. The thumbs sit
     side by side here, which halves the page's height.
     ========================================================================== */
  & .page_body:has(> .votebox) { padding: 20px 16px 28px; border-radius: var(--ab-radius-md); background: var(--ab-cloud); }
  & .page_body > .votebox {
    box-sizing: border-box; width: auto; max-width: 690px; padding: 0 0 8px;
    border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md); color: var(--ab-ink);
  }
  & .votebox .section { margin: 0 32px; padding: 22px 0; border-bottom-color: var(--ab-line); }
  & .votebox .section:last-child { border-bottom: 0; color: var(--ab-slate); }
  & .votebox h1 { margin: 0 0 10px; color: var(--ab-navy); font: 600 clamp(21px, 1rem + .8vw, 25px)/1.3 var(--ab-font-display); }
  & .votebox p { margin: 0; color: var(--ab-slate); }
  & .votebox .section:has(> .votebutton) { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px; }
  & .votebox .votebutton a { display: block; border-radius: 50%; transition: transform 150ms var(--ab-ease); }
  & .votebox .votebutton a:hover { transform: scale(1.04); }
  & .votebox .votebutton img { display: block; width: 160px; height: auto; }
  @media screen and (max-width: 600px) {
    & .votebox .section { margin: 0 18px; }
    & .votebox .votebutton img { width: 110px; }
    & .votebox .section:has(> .votebutton) { gap: 16px 24px; }
  }

  /* ==========================================================================
     Site map (/info/sitemap.php): ~2,700 links in lists nested six deep,
     unstyled. Give the levels a hierarchy, a rule for each nested branch and
     a readable measure; the shallow top lists run in columns on desktop.
     ========================================================================== */
  & #page_content #page_innards.responsive-sitemap {
    box-sizing: border-box; width: auto; max-width: 1100px; margin: 0 auto;
    color: var(--ab-ink); font: 400 13px/1.4 var(--ab-font-body);
  }
  & #page_innards.responsive-sitemap h1 {
    margin: 0 0 18px; color: var(--ab-navy); letter-spacing: -.01em;
    font: 600 clamp(24px, 1.1rem + 1vw, 30px)/1.25 var(--ab-font-display);
  }
  & #page_innards.responsive-sitemap h2 {
    margin: 32px 0 12px; padding-top: 14px; border-top: 1px solid var(--ab-line);
    color: var(--ab-navy); font: 600 20px/1.3 var(--ab-font-display);
  }
  & #page_innards.responsive-sitemap ul { margin: 0; padding: 0 0 0 16px; list-style: none; }
  & #page_innards.responsive-sitemap li { padding: 0; }
  /* Each nested branch gets a thread, so the six levels stay legible. */
  & #page_innards.responsive-sitemap :is(li, ul) > ul { margin: 0 0 4px; padding-left: 14px; border-left: 1px solid var(--ab-line); }
  & #page_innards.responsive-sitemap a { color: var(--ab-blue); text-decoration: none; }
  & #page_innards.responsive-sitemap a:hover { text-decoration: underline; text-underline-offset: .18em; }
  /* The top level of each section reads as a heading for its branch. */
  & #page_innards.responsive-sitemap > ul > li > a { color: var(--ab-navy); font-weight: 700; }

  /* ==========================================================================
     Small information forms: error reporting (/forms/errorreporting.php),
     unsubscribe (/forms/unsubscribe.php), newsletter sign-up
     (/subscriptions/new), and the review-us page (/reviews). responsive.js
     tags #page_innards (.responsive-support-form, -unsubscribe,
     -subscription, -reviews); responsive.css stacks them at 1024px and below.
     Brand type and controls here, and tighter desktop layouts.
     ========================================================================== */
  & #page_innards:is(.responsive-support-form, .responsive-unsubscribe, .responsive-subscription) { color: var(--ab-ink); font: 400 15px/1.5 var(--ab-font-body); }
  & #page_innards:is(.responsive-support-form, .responsive-unsubscribe, .responsive-subscription) :is(h1, h2) {
    margin: 0 0 8px; padding: 0; border: 0; color: var(--ab-navy); letter-spacing: -.01em;
    font: 600 clamp(24px, 1.1rem + 1vw, 30px)/1.25 var(--ab-font-display);
  }
  & #page_innards:is(.responsive-support-form, .responsive-unsubscribe, .responsive-subscription) form label { color: var(--ab-ink); font: 700 14px/1.4 var(--ab-font-body); }
  & #page_innards:is(.responsive-support-form, .responsive-unsubscribe, .responsive-subscription) form :is(input[type="text"], textarea) {
    box-sizing: border-box; min-height: 42px; margin: 0; padding: 8px 12px; border: 1px solid var(--ab-slate); border-radius: var(--ab-radius-sm);
    background: var(--ab-white); color: var(--ab-ink); font: 400 15px/1.4 var(--ab-font-body);
  }
  & #page_innards:is(.responsive-support-form, .responsive-unsubscribe, .responsive-subscription) form input[type="submit"] {
    box-sizing: border-box; min-width: 160px; min-height: 42px; padding: 0 22px;
    border: 2px solid var(--ab-red-action); border-radius: var(--ab-radius-sm);
    background: var(--ab-red-action); color: var(--ab-white); cursor: pointer; font: 600 16px/1 var(--ab-font-display);
  }
  & #page_innards:is(.responsive-support-form, .responsive-unsubscribe, .responsive-subscription) form input[type="submit"]:hover { border-color: var(--ab-red-deep); background: var(--ab-red-deep); }

  /* Unsubscribe: its <style> set a 3em red heading with a 150px indent and
     an 18pt form. */
  & #page_innards.responsive-unsubscribe #newsletter_disclaimer { color: var(--ab-slate); }
  & #page_innards.responsive-subscription form { font-size: 15px; }

  /* Review us: headings in the display face, store names as labels. */
  & #page_innards.responsive-reviews .page_body h2 { color: var(--ab-navy); font: 600 22px/1.3 var(--ab-font-display); }
  & #page_innards.responsive-reviews .page_body hr { margin: 24px 0; border: 0; border-top: 1px solid var(--ab-line); }
  & #page_innards.responsive-reviews .location th > p { margin: 0 0 6px; }
  /* The CMS table has spacer rows of empty cells, and an empty heading and
     blank paragraphs follow it; none of them carry content. */
  & #page_innards.responsive-reviews .location tr:not(:has(a, img)) { display: none; }
  & #page_innards.responsive-reviews .page_body > .location ~ :is(h2, p, .address, .newsletter) { display: none; }
  & #page_innards.responsive-reviews .location :is(th, td) > p:first-child { margin: 0 0 8px; color: var(--ab-navy); font: 600 16px/1.3 var(--ab-font-display); }
  & #page_innards.responsive-reviews .location td > p { margin: 0 0 6px; }

  @media screen and (min-width: 1025px) {
    /* Error report: the page's 180px right-aligned floats as a label column. */
    & #page_content #page_innards.responsive-support-form { width: auto; max-width: 760px; margin: 0 auto; }
    & #page_innards.responsive-support-form > :is(h1, p) { margin-left: 0; }
    & #page_innards.responsive-support-form > p { margin: 0 0 18px; color: var(--ab-slate); }
    & #page_innards.responsive-support-form form {
      padding: 20px 24px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md); background: var(--ab-white);
    }
    & #page_innards.responsive-support-form form > p {
      display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: start; gap: 0 16px; margin: 0 0 14px;
    }
    & #page_innards.responsive-support-form form > p:last-child { margin-bottom: 0; }
    & #page_innards.responsive-support-form form p label { float: none; width: auto; margin: 0; padding-top: 10px; text-align: left; line-height: 1.35; }
    & #page_innards.responsive-support-form form :is(input[type="text"], textarea) { width: 100%; }
    & #page_innards.responsive-support-form form textarea { min-height: 140px; height: 140px; resize: vertical; }
    & #page_innards.responsive-support-form form input[type="submit"] { grid-column: 2; justify-self: start; margin: 0; }

    /* Unsubscribe and sign-up: the email and its button on one row. */
    & #page_content #page_innards.responsive-unsubscribe { width: auto; max-width: 760px; margin: 0 auto; }
    & #page_innards.responsive-unsubscribe h2 { padding: 0; }
    & #page_innards.responsive-unsubscribe #newsletter_disclaimer { margin: 0 0 18px; }
    & #page_innards:is(.responsive-unsubscribe, .responsive-subscription) form { margin: 0 0 24px; text-align: left; font-size: 15px; }
    & #page_innards:is(.responsive-unsubscribe, .responsive-subscription) form > p {
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font-size: 15px;
    }
    & #page_innards:is(.responsive-unsubscribe, .responsive-subscription) form input[type="text"] { flex: 0 1 340px; width: auto; }
    & #page_innards:is(.responsive-unsubscribe, .responsive-subscription) form input[type="submit"] { margin: 0; }
    & #page_innards.responsive-subscription h1 { margin: 8px 0 14px; text-align: center; }
    & #page_innards.responsive-subscription form > p { justify-content: center; }

    /* Review us: the location table's fixed heights left wide empty rows. */
    & #page_innards.responsive-reviews .location table,
    & #page_innards.responsive-reviews .location :is(th, td) { height: auto; }
    & #page_innards.responsive-reviews .location :is(th, td) { padding: 0 8px 18px; vertical-align: top; }
  }

  /* ==========================================================================
     Product forms: write a review (/comment), found a lower price
     (/lower_price_notice) and e-mail this page (/share_via_email).
     responsive.js tags #page_innards .responsive-product-form plus
     .responsive-<page>; responsive.css stacks them at 1024px and below. Here:
     brand type and controls at every width, and on desktop a compact layout
     in place of the pages' floats and fixed widths.
     ========================================================================== */
  & #page_innards.responsive-product-form { color: var(--ab-ink); font: 400 15px/1.5 var(--ab-font-body); }
  & #page_innards.responsive-product-form :is(h1, h2) {
    margin: 0 0 8px; padding: 0; background: none; color: var(--ab-navy); text-align: left; letter-spacing: -.01em;
    font: 600 clamp(22px, 1.05rem + 1vw, 28px)/1.25 var(--ab-font-display);
  }
  & #page_innards.responsive-product-form form label { color: var(--ab-ink); font: 700 14px/1.4 var(--ab-font-body); }
  & #page_innards.responsive-product-form form :is(input[type="text"], textarea) {
    box-sizing: border-box; min-height: 40px; padding: 7px 12px; border: 1px solid var(--ab-slate); border-radius: var(--ab-radius-sm);
    background: var(--ab-white); color: var(--ab-ink); font: 400 15px/1.4 var(--ab-font-body);
  }
  & #page_innards.responsive-product-form form :is(input[type="checkbox"], input[type="radio"]) { width: 17px; height: 17px; accent-color: var(--ab-navy); }
  & #page_innards.responsive-product-form a { color: var(--ab-blue); text-underline-offset: .18em; }
  & #page_innards.responsive-product-form :is(#product_comment_submit, #lower_price_notice_submit, .submit_button) {
    box-sizing: border-box; min-width: 200px; min-height: 46px; padding: 0 24px;
    border: 2px solid var(--ab-red-action); border-radius: var(--ab-radius-sm);
    background: var(--ab-red-action); color: var(--ab-white); cursor: pointer; font: 600 16px/1 var(--ab-font-display);
  }
  & #page_innards.responsive-product-form :is(#product_comment_submit, #lower_price_notice_submit, .submit_button):hover { border-color: var(--ab-red-deep); background: var(--ab-red-deep); }
  & #page_innards.responsive-product-form .g-recaptcha { margin: 12px 0; }

  /* Review: star ratings drawn as gold stars (the page uses a red raster
     square), each choice a pill; the product header as a quiet lead-in. */
  & #page_innards.responsive-comment table.struct td { vertical-align: middle; }
  & #page_innards.responsive-comment table.struct td > br { display: none; }
  & #page_innards.responsive-comment table.struct h1 { font-size: 22px; }
  & #page_innards.responsive-comment table.struct td:last-child { color: var(--ab-slate); font-size: 14px; }
  & #page_innards.responsive-comment table.struct img { display: block; border-radius: var(--ab-radius-sm); }
  & #page_innards.responsive-comment .rating_radio label {
    display: inline-flex; align-items: center; gap: 1px; float: none; width: auto; padding: 6px 12px;
    border: 1px solid var(--ab-line); border-radius: var(--ab-radius-pill); background: var(--ab-white); cursor: pointer;
  }
  & #page_innards.responsive-comment .rating_radio label:has(input:checked) { border-color: var(--ab-navy); background: #F5F8FC; box-shadow: inset 0 0 0 1px var(--ab-navy); }
  & #page_innards.responsive-comment .rating_radio input[type="radio"] { margin: 0 8px 0 0; }
  & #page_innards.responsive-comment .rating_radio img {
    box-sizing: border-box; width: 17px; height: 17px; padding-left: 17px; overflow: hidden;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E3A008' d='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* Lower price: questions as navy headings, not khaki bars. */
  & #page_innards.responsive-lower_price_notice > p { color: var(--ab-slate); font-size: 14px; }
  & #page_innards.responsive-lower_price_notice > strong { display: block; margin: 0 0 12px; padding: 0; color: var(--ab-ink); }
  & #page_innards.responsive-lower_price_notice > br { display: none; }
  /* Each question is a section: a rule, the question as a heading, then its
     fields; field labels drop to small slate so they read as labels. */
  & #page_innards.responsive-lower_price_notice form#new_lower_price_notice h3 {
    margin: 22px 0 10px; padding: 18px 0 0; border-top: 1px solid var(--ab-line); background: none;
    color: var(--ab-navy); font: 600 17px/1.35 var(--ab-font-display);
  }
  & #page_innards.responsive-lower_price_notice form#new_lower_price_notice h3:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
  & #page_innards.responsive-lower_price_notice form label { color: var(--ab-slate); font-size: 13px; }
  & #page_innards.responsive-lower_price_notice form input[type="checkbox"] + label { color: var(--ab-ink); font-size: 15px; }
  & #page_innards.responsive-lower_price_notice > h2 + p {
    margin: 0 0 16px; padding: 12px 16px; border-left: 4px solid var(--ab-blue); border-radius: var(--ab-radius-sm);
    background: var(--ab-cloud); color: var(--ab-ink); font-size: 14px; line-height: 1.55;
  }
  & #page_innards.responsive-lower_price_notice form h3 a { font-size: 13px; }
  & #page_innards.responsive-lower_price_notice form input[type="checkbox"] + label { font-weight: 400; }
  & #page_innards.responsive-lower_price_notice #src_form p { color: var(--ab-slate); font-size: 12px; }
  /* "-or-" as a labelled divider. */
  & #page_innards.responsive-lower_price_notice #src_form strong {
    display: flex; align-items: center; gap: 12px; margin: 8px 0; color: var(--ab-slate);
    font: 700 12px/1 var(--ab-font-body); letter-spacing: .08em; text-transform: uppercase; text-align: left;
  }
  & #page_innards.responsive-lower_price_notice #src_form strong::before,
  & #page_innards.responsive-lower_price_notice #src_form strong::after { content: ""; flex: 1; height: 1px; background: var(--ab-line); }
  & #page_innards.responsive-lower_price_notice #prod_info {
    padding: 16px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md); background: var(--ab-white);
    font-size: 14px; line-height: 1.5;
  }
  & #page_innards.responsive-lower_price_notice #prod_info > a { display: block; margin: 0 0 10px; color: var(--ab-ink); font-weight: 700; text-decoration: none; }
  & #page_innards.responsive-lower_price_notice #prod_info > a:hover { color: var(--ab-blue); text-decoration: underline; }
  & #page_innards.responsive-lower_price_notice #prod_info > a img { display: block; float: none; margin: 0 0 10px; border-radius: var(--ab-radius-sm); }
  & #page_innards.responsive-lower_price_notice #prod_info > br:nth-of-type(-n+3) { display: none; }
  & #page_innards.responsive-lower_price_notice #prod_info b { color: var(--ab-slate); }

  /* E-mail this page: the preview as a quiet card in the body face. */
  & #page_innards.responsive-share_via_email #email_preview {
    box-sizing: border-box; width: auto; padding: 16px 18px 4px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md);
    background: var(--ab-cloud); font-size: 14px;
  }
  & #page_innards.responsive-share_via_email #email_preview font { font-family: inherit; }
  & #page_innards.responsive-share_via_email form > p:has(+ #email_preview) { color: var(--ab-slate); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

  @media screen and (max-width: 1024px) {
    /* Lower price, stacked: the product it is about comes before the form. */
    & #page_content #page_innards.responsive-lower_price_notice { display: flex; flex-direction: column; }
    & #page_innards.responsive-lower_price_notice > h2 { order: -3; }
    & #page_innards.responsive-lower_price_notice > h2 + p { order: -2; }
    & #page_content #page_innards.responsive-lower_price_notice > #prod_info {
      order: -1; display: flow-root; margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--ab-line);
    }
    & #page_innards.responsive-lower_price_notice #prod_info > a { margin: 0 0 6px; }
    & #page_innards.responsive-lower_price_notice #prod_info > a img { float: left; margin: 0 14px 4px 0; }
  }
  @media screen and (min-width: 1025px) {
    /* Review: header, then one card with a label column; the five ratings
       share a row. The page pins the submit's margin-left at 105px with
       !important, so its row is shifted to line the button up with the fields. */
    & #page_content #page_innards.responsive-comment { width: auto; max-width: 820px; margin: 0 auto; }
    & #page_innards.responsive-comment table.struct { margin: 0 0 18px; }
    & #page_innards.responsive-comment table.struct td:first-child { padding-right: 16px; }
    & #page_innards.responsive-comment #new_product_comment {
      display: grid; grid-template-columns: 130px repeat(5, auto) minmax(0, 1fr); align-items: center; gap: 14px 10px;
      padding: 20px 24px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md); background: var(--ab-white);
    }
    & #new_product_comment > div:has(> input[name="authenticity_token"]) { position: absolute; }
    & #new_product_comment > p:empty { display: none; }
    & #page_innards.responsive-comment #new_product_comment > p {
      grid-column: 1 / -1; display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 0 14px; margin: 0;
    }
    & #page_innards.responsive-comment #new_product_comment > p:has(> label[for="product_comment_rating"]) { grid-column: 1; display: block; }
    & #page_innards.responsive-comment #new_product_comment > p:has(> textarea) { align-items: start; }
    & #page_innards.responsive-comment #new_product_comment > p:has(> #product_comment_email) { grid-template-columns: 130px 260px minmax(0, 1fr); color: var(--ab-slate); font-size: 13px; }
    & #page_innards.responsive-comment #new_product_comment > p:has(> #product_comment_submit) { display: block; margin-left: 39px; color: var(--ab-slate); font-size: 14px; }
    & #page_innards.responsive-comment #new_product_comment p label { float: none; width: auto; padding: 0; text-align: left; }
    & #page_innards.responsive-comment #new_product_comment > p:has(> textarea) label { padding-top: 8px; }
    & #page_innards.responsive-comment .rating_radio { margin: 0; }
    & #page_innards.responsive-comment #product_comment_comment { max-width: 100%; height: 130px; }
    & #page_innards.responsive-comment :is(#product_comment_name, #product_comment_location, #product_comment_email) { width: 260px; max-width: 100%; margin: 0; }

    /* Lower price: the questions in a card, the product beside them. */
    & #page_content #page_innards.responsive-lower_price_notice {
      display: grid; grid-template-columns: minmax(0, 1fr) 260px; grid-auto-flow: row dense; align-items: start; gap: 0 28px;
      width: auto; max-width: 1000px; margin: 0 auto;
    }
    & #page_innards.responsive-lower_price_notice > * { grid-column: 1 / -1; }
    & #page_innards.responsive-lower_price_notice > p { max-width: 860px; margin: 0 0 14px; padding: 0; }
    & #page_innards.responsive-lower_price_notice form#new_lower_price_notice {
      grid-column: 1; float: none; width: auto; margin: 0; padding: 18px 24px 22px;
      border: 1px solid var(--ab-line); border-radius: var(--ab-radius-md); background: var(--ab-white);
    }
    & #page_innards.responsive-lower_price_notice > #prod_info { grid-column: 2; }
    & #page_innards.responsive-lower_price_notice form#new_lower_price_notice > label { padding-right: 8px; }
    & #page_innards.responsive-lower_price_notice form#new_lower_price_notice > input[type="text"] { width: 260px; }
    & #page_innards.responsive-lower_price_notice form input[type="checkbox"] { margin: 0 6px 0 0; vertical-align: -3px; }
    /* Product URL, then -or- a store: City and State share a row. */
    & #page_innards.responsive-lower_price_notice #src_form {
      display: grid; grid-template-columns: 110px minmax(0, 1fr) 110px minmax(0, 1fr); align-items: center; gap: 8px 12px;
    }
    & #page_innards.responsive-lower_price_notice :is(#lower_price_notice_product_url, #lower_price_notice_store_name) { grid-column: span 3; }
    & #page_innards.responsive-lower_price_notice form :is(input[type="text"]) { min-height: 36px; padding-block: 5px; }
    & #page_innards.responsive-lower_price_notice #src_form > br { display: none; }
    & #page_innards.responsive-lower_price_notice #src_form label { float: none; width: auto; padding: 0; text-align: left; }
    & #page_innards.responsive-lower_price_notice #src_form label[for$="_state"] { text-align: right; }
    & #page_innards.responsive-lower_price_notice #src_form p { grid-column: 2 / -1; float: none; margin: -4px 0 0; padding: 0; }
    & #page_innards.responsive-lower_price_notice #src_form strong { grid-column: 1 / -1; text-align: left; }
    & #page_innards.responsive-lower_price_notice #src_form input[type="text"] { width: 100%; }
    & #page_innards.responsive-lower_price_notice #lower_price_notice_submit { margin: 4px 0 0; }

    /* E-mail this page: the fields on the left, the preview beside them. */
    & #page_content #page_innards.responsive-share_via_email { width: auto; max-width: 960px; margin: 0 auto; }
    & #page_innards.responsive-share_via_email h1 { margin: 0 0 16px; }
    & #page_innards.responsive-share_via_email form {
      display: grid; grid-template-columns: minmax(340px, 1.1fr) minmax(0, .9fr); align-items: start; gap: 0 32px;
    }
    & #page_innards.responsive-share_via_email form > * { grid-column: 1; }
    & #page_innards.responsive-share_via_email form > div:has(> input[name="authenticity_token"]) { position: absolute; }
    & #page_innards.responsive-share_via_email form > p { margin: 0 0 10px; }
    & #page_innards.responsive-share_via_email form > p:has(> label) {
      display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 0 12px;
    }
    & #page_innards.responsive-share_via_email form label { float: none; width: auto; margin: 0; text-align: left; }
    & #page_innards.responsive-share_via_email form input[type="text"] { width: 100%; max-width: none; }
    & #page_innards.responsive-share_via_email .submit_button { margin: 0; }
    /* The reCAPTCHA is a fixed 304px; start it at the column edge so it
       never reaches the preview. */
    & #page_innards.responsive-share_via_email form > .g-recaptcha { margin: 6px 0 14px; }
    & #page_innards.responsive-share_via_email form > p:has(+ #email_preview) { grid-column: 2; grid-row: 1; margin: 0 0 8px; }
    & #page_innards.responsive-share_via_email #email_preview { grid-column: 2; grid-row: 2 / span 8; }
  }

  /* ==========================================================================
     Main nav texture: the footer's sewing-icons tile, in red, kept clear of
     the labels.
     ========================================================================== */
  & #site_nav { isolation: isolate; }
  /* The tile is charcoal (35,35,35) with line art at (66,66,66). contrast(1.38)
     takes the charcoal to pure black and brightness(2.1) lifts the lines to
     ~35% grey; a screen blend then leaves the Cardinal untouched except where
     the line art is, which shows as a lighter red. */
  & #site_nav::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url('/brand/patterns/footer-icons-bg.webp') left top / 440px repeat;
    filter: contrast(1.38) brightness(2.1); mix-blend-mode: screen;
  }
  @media screen and (min-width: 1025px) {
    /* The labels sit on a solid, feathered strip exactly as wide as the tabs.
       It is a pseudo-element so its clip (feather sideways only) cannot clip
       the dropdown menus, which live inside the list. */
    & #site_nav ul#main { position: relative; width: max-content; max-width: 100%; margin-inline: auto; padding-inline: 8px; }
    & #site_nav ul#main::before {
      content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
      background: var(--ab-red-action); box-shadow: 0 0 24px 18px var(--ab-red-action); clip-path: inset(0 -48px);
    }
  }
  @media screen and (max-width: 1024px) {
    /* Only the Menu bar gets the pattern, starting clear of its label. */
    & #site_nav::before { inset: 0 0 0 140px;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 60px); mask-image: linear-gradient(90deg, transparent, #000 60px); }
  }
}