/** Shopify CDN: Minification failed

Line 1678:56 Unexpected "*"

**/
/* ==========================================================================
   SAM Controllers — design tokens and core utilities.
   Applied on top of Dawn. Overrides Dawn's color scheme + typography defaults
   via CSS custom properties; adds industrial-technical utilities.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Color — neutral dominant, one industrial accent */
  --sam-bg:            #ffffff;
  --sam-fg:            #0f172a;    /* near-black, warm */
  --sam-fg-muted:      #475569;    /* body-secondary */
  --sam-fg-faint:      #94a3b8;    /* captions, placeholders */
  --sam-border:        #e2e8f0;
  --sam-border-strong: #cbd5e1;
  --sam-surface:       #f8fafc;    /* very light gray for spec-table stripes */
  --sam-surface-2:     #f1f5f9;

  --sam-accent:        #1268ff;    /* main brand blue */
  --sam-accent-hover:  #0f56d6;    /* darker for hover/active */
  --sam-accent-fg:     #ffffff;

  --sam-warn:          #9a3412;    /* rust — compliance warnings */
  --sam-ok:            #14532d;    /* deep green — certifications */
  --sam-ok-bg:         #ecfdf5;
  --sam-warn-bg:       #fef3c7;

  /* Typography — Geist (sans) + JetBrains Mono. Inter explicitly banned
     per DESIGN.md §3. Geist preferred for premium / dashboard contexts. */
  --sam-font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system,
                   'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --sam-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
                   Consolas, monospace;

  /* Type scale — every value 14px+ minimum so no text on the page
     reads under 12pt-equivalent at standard zoom. Bumped per user
     directive 'all the text is way too small needs to be 12+'. */
  --sam-fs-xs:   0.875rem;    /* 14 */
  --sam-fs-sm:   1rem;        /* 16 */
  --sam-fs-base: 1.125rem;    /* 18 */
  --sam-fs-md:   1.25rem;     /* 20 */
  --sam-fs-lg:   1.4375rem;   /* 23 */
  --sam-fs-xl:   1.625rem;    /* 26 */
  --sam-fs-2xl:  2rem;        /* 32 */
  --sam-fs-3xl:  2.5rem;      /* 40 */
  --sam-fs-4xl:  3.25rem;     /* 52 */

  --sam-lh-tight:   1.2;
  --sam-lh-snug:    1.35;
  --sam-lh-normal:  1.5;
  --sam-lh-relaxed: 1.65;

  --sam-fw-normal:   400;
  --sam-fw-medium:   500;
  --sam-fw-semibold: 600;
  --sam-fw-bold:     700;

  /* Spacing — full scale (sequential; no gaps so var() lookups never fall back to 0). */
  --sam-space-1:  0.25rem;
  --sam-space-2:  0.5rem;
  --sam-space-3:  0.75rem;
  --sam-space-4:  1rem;
  --sam-space-5:  1.25rem;    /* previously missing — caused header nav to jam */
  --sam-space-6:  1.5rem;
  --sam-space-7:  1.75rem;    /* previously missing */
  --sam-space-8:  2rem;
  --sam-space-9:  2.25rem;
  --sam-space-10: 2.5rem;
  --sam-space-11: 2.75rem;
  --sam-space-12: 3rem;
  --sam-space-16: 4rem;
  --sam-space-20: 5rem;
  --sam-space-24: 6rem;
  --sam-space-32: 8rem;

  /* Layout */
  --sam-max-w-prose:   65ch;
  --sam-max-w-content: 72rem;
  --sam-max-w-narrow:  50rem;

  /* Borders + radii */
  --sam-radius-sm: 2px;
  --sam-radius-md: 4px;
  --sam-radius-lg: 6px;

  --sam-border-thin:   1px solid var(--sam-border);
  --sam-border-medium: 1px solid var(--sam-border-strong);
  --sam-border-fg:     1px solid var(--sam-fg);

  /* Motion — minimal. Subtle focus + hover transitions only. */
  --sam-transition-fast: 120ms ease;
  --sam-transition-med:  200ms ease;
}

/* Respect reduced-motion preference globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Body + typography -------------------------------------------------- */

/* DESIGN.md §3: force Geist site-wide. Shopify's settings.body_font emits
   a body { font-family: ... } rule that wins over our CSS variable, so
   we override with !important on the canonical text-bearing elements. */
body, button, input, textarea, select, optgroup, option {
  font-family: var(--sam-font-sans) !important;
}
body {
  font-size: var(--sam-fs-base);
  line-height: var(--sam-lh-normal);
  color: var(--sam-fg);
  background: var(--sam-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sam-font-sans) !important;
  font-weight: var(--sam-fw-semibold);
  line-height: var(--sam-lh-tight);
  color: var(--sam-fg);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--sam-fs-4xl); letter-spacing: -0.02em; }
h2 { font-size: var(--sam-fs-3xl); letter-spacing: -0.015em; }
h3 { font-size: var(--sam-fs-2xl); }
h4 { font-size: var(--sam-fs-xl); }
h5 { font-size: var(--sam-fs-lg); }
h6 { font-size: var(--sam-fs-base); font-weight: var(--sam-fw-medium); }

@media (max-width: 749px) {
  h1 { font-size: var(--sam-fs-3xl); }
  h2 { font-size: var(--sam-fs-2xl); }
}

p {
  max-width: var(--sam-max-w-prose);
  margin: 0 0 var(--sam-space-4);
  line-height: var(--sam-lh-relaxed);
  color: var(--sam-fg);
}

a {
  color: var(--sam-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 0.5px;
  transition: color var(--sam-transition-fast);
}
a:hover { color: var(--sam-accent-hover); }
a:focus-visible {
  outline: 2px solid var(--sam-accent);
  outline-offset: 2px;
  border-radius: var(--sam-radius-sm);
}

code, kbd, samp, pre,
.sam-mono {
  font-family: var(--sam-font-mono);
  font-size: 0.95em;
}

/* --- Spec table --------------------------------------------------------- */

.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sam-space-6) 0;
  background: var(--sam-bg);
  border: var(--sam-border-thin);
  border-radius: var(--sam-radius-sm);
  overflow: hidden;
  font-size: var(--sam-fs-sm);
}

.spec-table caption {
  caption-side: top;
  text-align: left;
  font-weight: var(--sam-fw-semibold);
  font-size: var(--sam-fs-sm);
  color: var(--sam-fg-muted);
  padding: var(--sam-space-2) 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.spec-table tr {
  border-bottom: var(--sam-border-thin);
}
.spec-table tr:last-child { border-bottom: 0; }
.spec-table tbody tr:nth-child(odd) { background: var(--sam-surface); }

.spec-table th,
.spec-table td {
  padding: var(--sam-space-3) var(--sam-space-4);
  text-align: left;
  vertical-align: top;
}

.spec-table th {
  font-weight: var(--sam-fw-medium);
  color: var(--sam-fg-muted);
  width: 34%;
  font-size: var(--sam-fs-sm);
}

.spec-table td {
  font-family: var(--sam-font-mono);
  font-size: var(--sam-fs-sm);
  color: var(--sam-fg);
  word-break: break-word;
}

/* --- Compliance badges -------------------------------------------------- */

.compliance-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sam-space-2);
  margin: var(--sam-space-4) 0;
  padding: 0;
  list-style: none;
}

.compliance-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sam-space-1);
  padding: var(--sam-space-1) var(--sam-space-3);
  font-size: var(--sam-fs-xs);
  font-weight: var(--sam-fw-medium);
  font-family: var(--sam-font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sam-ok);
  background: var(--sam-ok-bg);
  border: 1px solid rgba(20, 83, 45, 0.15);
  border-radius: var(--sam-radius-sm);
}

/* --- Price + quote -------------------------------------------------------- */

.price-block {
  display: flex;
  flex-direction: column;
  gap: var(--sam-space-1);
  margin: var(--sam-space-4) 0;
}

.price-block .price {
  font-size: var(--sam-fs-2xl);
  font-weight: var(--sam-fw-semibold);
  color: var(--sam-fg);
  font-variant-numeric: tabular-nums;
}

.price-block .lead-time {
  font-size: var(--sam-fs-sm);
  color: var(--sam-fg-muted);
}

/* --- Buttons ------------------------------------------------------------ */

.btn,
button.btn,
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sam-space-2);
  padding: var(--sam-space-3) var(--sam-space-6);
  font-family: var(--sam-font-sans);
  font-size: var(--sam-fs-base);
  font-weight: var(--sam-fw-medium);
  line-height: 1;
  text-decoration: none;
  border: var(--sam-border-medium);
  background: var(--sam-bg);
  color: var(--sam-fg);
  border-radius: var(--sam-radius-sm);
  cursor: pointer;
  transition: background var(--sam-transition-fast),
              color var(--sam-transition-fast),
              border-color var(--sam-transition-fast);
}

.btn:hover {
  border-color: var(--sam-fg);
}

.btn-primary {
  background: var(--sam-accent);
  color: var(--sam-accent-fg);
  border-color: var(--sam-accent);
}
.btn-primary:hover {
  background: var(--sam-accent-hover);
  border-color: var(--sam-accent-hover);
}

.btn-quote {
  background: var(--sam-fg);
  color: var(--sam-bg);
  border-color: var(--sam-fg);
}
.btn-quote:hover {
  background: var(--sam-accent);
  border-color: var(--sam-accent);
}

.btn-datasheet {
  background: var(--sam-bg);
  color: var(--sam-fg);
  border-color: var(--sam-border-strong);
}

.btn-block { display: flex; width: 100%; }

/* --- Datasheet CTA row -------------------------------------------------- */

.datasheet-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sam-space-2);
  padding: var(--sam-space-3) var(--sam-space-4);
  border: var(--sam-border-medium);
  border-radius: var(--sam-radius-sm);
  color: var(--sam-fg);
  text-decoration: none;
  font-weight: var(--sam-fw-medium);
  transition: border-color var(--sam-transition-fast);
}
.datasheet-link:hover {
  border-color: var(--sam-fg);
  color: var(--sam-fg);
}
.datasheet-link .icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

/* --- Section wrappers --------------------------------------------------- */

.section-padding {
  padding-block: var(--sam-space-12);
}
@media (min-width: 750px) {
  .section-padding {
    padding-block: var(--sam-space-16);
  }
}

.content-wrapper {
  max-width: var(--sam-max-w-content);
  margin: 0 auto;
  padding-inline: var(--sam-space-4);
}
@media (min-width: 750px) {
  .content-wrapper { padding-inline: var(--sam-space-8); }
}

/* --- Product hero ------------------------------------------------------- */

.product-hero {
  display: grid;
  gap: var(--sam-space-8);
  align-items: start;
}
@media (min-width: 990px) {
  .product-hero {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--sam-space-16);
  }
}

.product-hero__title {
  font-size: var(--sam-fs-3xl);
  margin: 0 0 var(--sam-space-3);
}

.product-hero__summary {
  font-size: var(--sam-fs-lg);
  color: var(--sam-fg-muted);
  line-height: var(--sam-lh-relaxed);
  margin: 0 0 var(--sam-space-6);
}

.product-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sam-space-3);
  margin-top: var(--sam-space-6);
}

/* --- Product categories (homepage) -------------------------------------- */

.product-categories {
  display: grid;
  gap: var(--sam-space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 750px) {
  .product-categories {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 990px) {
  .product-categories {
    grid-template-columns: repeat(3, 1fr);
  }
}

.category-card {
  display: flex;
  flex-direction: column;
  padding: var(--sam-space-6);
  border: var(--sam-border-thin);
  background: var(--sam-bg);
  transition: border-color var(--sam-transition-fast);
  text-decoration: none;
  color: var(--sam-fg);
}
.category-card:hover {
  border-color: var(--sam-fg);
  color: var(--sam-fg);
}

.category-card__title {
  font-size: var(--sam-fs-lg);
  font-weight: var(--sam-fw-semibold);
  margin: 0 0 var(--sam-space-2);
}

.category-card__desc {
  font-size: var(--sam-fs-sm);
  color: var(--sam-fg-muted);
  line-height: var(--sam-lh-relaxed);
  margin: 0;
}

/* --- Forms -------------------------------------------------------------- */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--sam-space-1);
  margin-bottom: var(--sam-space-4);
}

.form-field label {
  font-size: var(--sam-fs-sm);
  font-weight: var(--sam-fw-medium);
  color: var(--sam-fg);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field textarea,
.form-field select {
  font-family: var(--sam-font-sans);
  font-size: var(--sam-fs-base);
  padding: var(--sam-space-3);
  border: var(--sam-border-medium);
  background: var(--sam-bg);
  color: var(--sam-fg);
  border-radius: var(--sam-radius-sm);
  transition: border-color var(--sam-transition-fast);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--sam-accent);
}

.form-field textarea { min-height: 120px; resize: vertical; }

.form-field .hint {
  font-size: var(--sam-fs-xs);
  color: var(--sam-fg-faint);
}

/* --- Visually-hidden utility ------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   PDP Adafruit-style overrides (2026-04-24)
   Target the ported .pdp-hero sections from site-build -> port_pdps_to_liquid.py
   so the right column sticks as the user scrolls through the content.
   Class names match sam-design.css — these are additive rules, not replacements.
   ========================================================================= */
@media (min-width: 960px) {
  .pdp-hero > div:nth-child(2) {
    position: sticky;
    top: 5rem;
    align-self: start;
    padding: 1.25rem;
    border: 1px solid var(--sam-border, rgba(15, 23, 42, 0.12));
    border-radius: 4px;
    background: var(--sam-surface, #f8fafc);
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .pdp-hero > div:first-child {
    scroll-margin-top: 5rem;
  }
}

/* Global smooth-scroll with reduced-motion escape. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Bigger body / lede type for industrial readability */
body { font-size: var(--sam-fs-base); }
.lede,
.product-main__summary,
.hero-home__subheading {
  font-size: var(--sam-fs-lg);
  line-height: 1.55;
}

/* Header styles are owned by sections/header.liquid — do not duplicate
 * here. Earlier rules at this location used flex-wrap: wrap on the
 * menu and were forcing the menu to break into two rows; removed
 * 2026-04-28 so the section's source-of-truth styles can apply. */

/* =========================================================================
   PDP polish round 2 (2026-04-25)
   - Long product titles must wrap inside the right column
   - Collection page styles to fix flush-left + missing card styling
   ========================================================================= */
.pdp-hero h1,
.product-main__title {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}
.pdp-hero > div:nth-child(2) {
  min-width: 0;
}

/* =========================================================================
   Support / generic page redesign. The support page uses Dawn's default
   page.json template with `.page-width.page-width--narrow > h1.main-page-title
   + .rte > .product-main__prose.page-prose > .prose-block` markup. This
   overrides Dawn's narrow column to a comfortable 1180px and gives every
   prose-block a card treatment matching the homepage / about / contact
   sections. Scoped via the body class added by theme.liquid.
   ========================================================================= */

.template-page main .page-width,
.template-page main .page-width.page-width--narrow,
body.template-page main .page-width--narrow {
  max-width: 1180px !important;
  margin-inline: auto !important;
  padding-inline: 2.4rem !important;
  width: 100%;
}

/* Dawn wraps page-content in a `.rte` element with its own max-width
   that's narrower than what we want for our prose-block layout. Lift
   that constraint so the constrained 1180px page-width above wins. */
.template-page main .rte {
  max-width: none !important;
  width: 100% !important;
}

/* Hide the duplicate <h2>Support</h2> in the lead prose-block, since
   the Dawn page-title <h1> already shows the page title. */
.template-page main .product-main__prose .prose-block--lead > h2 {
  display: none;
}

/* Dawn page title — bigger + tied to the hero band */
.template-page main .main-page-title,
.template-page main h1.page-title {
  font-size: clamp(3.6rem, 2.8rem + 2vw, 5.6rem) !important;
  font-weight: 800 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.022em !important;
  margin: 0 0 3.2rem !important;
  color: var(--sam-fg) !important;
  max-width: 24ch;
}

/* Lead paragraph (the intro right under the title) */
.template-page main .product-main__prose .prose-block--lead {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 6.4rem !important;
}
.template-page main .product-main__prose .prose-block--lead p {
  font-size: 2rem !important;
  line-height: 1.55 !important;
  color: var(--sam-fg-muted) !important;
  margin: 0 !important;
  max-width: 70rem !important;
}
.template-page main .product-main__prose .prose-block--lead a {
  color: var(--sam-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  font-weight: 600;
}

/* Each non-lead prose-block becomes a styled card */
.template-page main .product-main__prose .prose-block {
  margin: 0 0 3.2rem !important;
  padding: 3.2rem !important;
  background: var(--sam-bg);
  border: 1px solid var(--sam-border);
  border-radius: 12px;
  max-width: none !important;
}

.template-page main .product-main__prose .prose-block h2,
.template-page main .product-main__prose .prose-block h3 {
  margin: 0 0 2rem !important;
  font-size: 2.4rem !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  color: var(--sam-fg) !important;
  letter-spacing: -0.016em !important;
  padding-bottom: 1.4rem !important;
  border-bottom: 1px solid var(--sam-border) !important;
  max-width: none !important;
}

.template-page main .product-main__prose .prose-block p,
.template-page main .product-main__prose .prose-block li {
  font-size: 1.65rem !important;
  line-height: 1.65 !important;
  color: var(--sam-fg) !important;
  max-width: 70ch !important;
}
.template-page main .product-main__prose .prose-block p {
  margin: 0 0 1.4rem !important;
  padding: 0 !important;
}
.template-page main .product-main__prose .prose-block p:last-child { margin: 0 !important; }
.template-page main .product-main__prose .prose-block ul,
.template-page main .product-main__prose .prose-block ol {
  margin: 0 0 1.4rem !important;
  padding-left: 2.4em !important;
}
.template-page main .product-main__prose .prose-block li {
  margin-bottom: 0.6rem !important;
}
.template-page main .product-main__prose .prose-block strong {
  color: var(--sam-fg);
  font-weight: 700;
}
.template-page main .product-main__prose .prose-block a {
  color: var(--sam-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Response-window table */
.template-page main .product-main__prose .prose-block table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.4rem 0 1.6rem;
  font-size: 1.55rem;
}
.template-page main .product-main__prose .prose-block thead th {
  text-align: left;
  font-family: var(--sam-font-mono);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sam-fg-muted);
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--sam-border);
  font-weight: 700;
}
.template-page main .product-main__prose .prose-block tbody td {
  padding: 1.4rem 1.4rem;
  border-bottom: 1px solid var(--sam-border);
  vertical-align: top;
  font-size: 1.55rem;
}
.template-page main .product-main__prose .prose-block tbody tr:last-child td {
  border-bottom: none;
}

/* FAQ accordions on support — pdp-faq class re-styled */
.template-page main .product-main__prose .pdp-faq {
  background: var(--sam-surface) !important;
  border: 1px solid var(--sam-border) !important;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0 1.2rem !important;
  transition: border-color 160ms ease;
}
.template-page main .product-main__prose .pdp-faq[open] {
  border-color: var(--sam-accent) !important;
}
.template-page main .product-main__prose .pdp-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.6rem 5rem 1.6rem 1.8rem !important;
  font-size: 1.6rem !important;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sam-fg) !important;
  position: relative;
  border: none !important;
}
.template-page main .product-main__prose .pdp-faq summary::-webkit-details-marker { display: none; }
.template-page main .product-main__prose .pdp-faq summary::after {
  content: "";
  position: absolute;
  right: 1.4rem;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231268ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat center / 16px;
  transition: transform 200ms ease;
}
.template-page main .product-main__prose .pdp-faq[open] summary::after {
  transform: rotate(180deg);
}
.template-page main .product-main__prose .pdp-faq summary:hover {
  color: var(--sam-accent) !important;
}
.template-page main .product-main__prose .pdp-faq p {
  padding: 0 1.8rem 1.6rem !important;
  font-size: 1.55rem !important;
  margin: 0 !important;
  max-width: none !important;
}

/* "Still stuck? Open a ticket" CTA — dark bookend block */
.template-page main .product-main__prose .prose-block--docs {
  background: #0b0b0c !important;
  color: #e2e8f0;
  border: none !important;
  padding: 4rem !important;
}
.template-page main .product-main__prose .prose-block--docs h3 {
  color: #ffffff !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}
.template-page main .product-main__prose .prose-block--docs p {
  color: #cbd5e1 !important;
  font-size: 1.7rem !important;
}
.template-page main .product-main__prose .prose-block--docs .doc-buttons-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 2.4rem;
}
.template-page main .product-main__prose .prose-block--docs .doc-buttons-row a {
  display: inline-flex !important;
  align-items: center;
  padding: 1.4rem 2.4rem;
  border-radius: 8px;
  font-weight: 800;
  font-size: 1.6rem;
  text-decoration: none !important;
  transition: background 160ms ease, transform 160ms ease;
}
.template-page main .product-main__prose .prose-block--docs .doc-buttons-row a:first-child {
  background: var(--sam-accent);
  color: #ffffff !important;
  border: 2px solid var(--sam-accent);
}
.template-page main .product-main__prose .prose-block--docs .doc-buttons-row a:first-child:hover {
  background: var(--sam-accent-hover);
  transform: translateY(-1px);
}
.template-page main .product-main__prose .prose-block--docs .doc-buttons-row a:not(:first-child) {
  background: transparent;
  color: #ffffff !important;
  border: 2px solid #ffffff;
}
.template-page main .product-main__prose .prose-block--docs .doc-buttons-row a:not(:first-child):hover {
  background: #ffffff;
  color: #0b0b0c !important;
}

/* =========================================================================
   Legacy support-hero-injected styles (kept in case the body_html
   hero injection eventually propagates; currently overridden by the
   above default-template styling).
   ========================================================================= */
.support-hero-injected {
  margin: 0 0 6.4rem;
  padding: 0;
}
.support-hero-injected .sh-eyebrow {
  font-family: var(--sam-font-mono);
  font-size: 1.4rem !important;
  color: var(--sam-accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  margin: 0 0 2rem !important;
  padding-left: 4rem;
  position: relative;
  max-width: none !important;
}
.support-hero-injected .sh-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3.2rem;
  height: 2px;
  background: var(--sam-accent);
  margin-top: -1px;
}
.support-hero-injected .sh-heading {
  margin: 0 0 2rem !important;
  font-size: clamp(3.2rem, 2.4rem + 2vw, 5rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.022em !important;
  color: var(--sam-fg);
  max-width: 24ch;
}
.support-hero-injected .sh-sub {
  font-size: 1.9rem !important;
  color: var(--sam-fg-muted) !important;
  line-height: 1.55 !important;
  margin: 0 0 4.8rem !important;
  max-width: 70rem;
}
.support-hero-injected .sh-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  margin: 0;
}
@media (min-width: 750px) {
  .support-hero-injected .sh-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.support-hero-injected .sh-card {
  display: flex !important;
  flex-direction: column;
  gap: 1.4rem;
  background: #ffffff;
  border: 1px solid var(--sam-border);
  border-radius: 14px;
  padding: 3.2rem 2.8rem;
  text-decoration: none !important;
  color: inherit !important;
  border-top: 4px solid var(--sam-accent);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.support-hero-injected .sh-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -10px rgba(18, 104, 255, 0.22);
}
.support-hero-injected .sh-card__num {
  font-family: var(--sam-font-mono);
  font-size: 1.4rem !important;
  color: var(--sam-accent);
  letter-spacing: 0.12em;
  font-weight: 700;
}
.support-hero-injected .sh-card__title {
  margin: 0 !important;
  font-size: 2.1rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: var(--sam-fg);
  letter-spacing: -0.012em;
  border: none !important;
  padding: 0 !important;
}
.support-hero-injected .sh-card__body {
  margin: 0 !important;
  font-size: 1.55rem !important;
  line-height: 1.55;
  color: var(--sam-fg-muted) !important;
  flex: 1 1 auto;
  max-width: none !important;
}
.support-hero-injected .sh-card__cta {
  margin-top: 0.6rem;
  font-family: var(--sam-font-sans);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--sam-accent);
}

/* Style the rest of the support page body (template default page.json). */
.template-page main .page-width .prose-block {
  margin: 0 0 4rem !important;
  padding: 3.2rem !important;
  background: var(--sam-bg);
  border: 1px solid var(--sam-border);
  border-radius: 12px;
  max-width: none !important;
}
.template-page main .page-width .prose-block--lead {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 4.8rem !important;
}
.template-page main .page-width .prose-block h2 {
  margin: 0 0 1.6rem !important;
  font-size: 2.6rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.018em;
}
.template-page main .page-width .prose-block h3 {
  margin: 0 0 1.6rem !important;
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  line-height: 1.2;
  color: var(--sam-fg) !important;
  letter-spacing: -0.012em;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--sam-border);
}
.template-page main .page-width .prose-block table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0 1.6rem;
  font-size: 1.5rem;
}
.template-page main .page-width .prose-block thead th {
  text-align: left;
  font-family: var(--sam-font-mono);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sam-fg-muted);
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--sam-border);
  font-weight: 700;
}
.template-page main .page-width .prose-block tbody td {
  padding: 1.4rem 1.2rem;
  border-bottom: 1px solid var(--sam-border);
  vertical-align: top;
  font-size: 1.5rem;
}
.template-page main .page-width .prose-block tbody tr:last-child td { border-bottom: none; }
.template-page main .page-width .pdp-faq {
  background: var(--sam-surface);
  border: 1px solid var(--sam-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.2rem;
  transition: border-color 160ms ease;
}
.template-page main .page-width .pdp-faq[open] { border-color: var(--sam-accent); }
.template-page main .page-width .pdp-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.6rem 5rem 1.6rem 1.8rem;
  font-size: 1.6rem !important;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sam-fg);
  position: relative;
}
.template-page main .page-width .pdp-faq summary::-webkit-details-marker { display: none; }
.template-page main .page-width .pdp-faq summary::after {
  content: "";
  position: absolute;
  right: 1.4rem;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231268ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat center / 16px;
  transition: transform 200ms ease;
}
.template-page main .page-width .pdp-faq[open] summary::after { transform: rotate(180deg); }
.template-page main .page-width .pdp-faq p {
  margin: 0 !important;
  padding: 0 1.8rem 1.6rem !important;
  font-size: 1.55rem !important;
  line-height: 1.65;
  color: var(--sam-fg) !important;
}
.template-page main .page-width .prose-block--docs {
  background: #0b0b0c !important;
  color: #e2e8f0;
  border: none !important;
}
.template-page main .page-width .prose-block--docs h3 {
  color: #ffffff !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}
.template-page main .page-width .prose-block--docs p {
  color: #cbd5e1 !important;
  font-size: 1.7rem !important;
}
.template-page main .page-width .prose-block--docs .doc-buttons-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 2.4rem;
}
.template-page main .page-width .prose-block--docs .doc-buttons-row a {
  display: inline-flex !important;
  align-items: center;
  padding: 1.4rem 2.4rem;
  border-radius: 8px;
  font-weight: 800;
  font-size: 1.6rem;
  text-decoration: none !important;
  transition: background 160ms ease, transform 160ms ease;
}
.template-page main .page-width .prose-block--docs .doc-buttons-row a:first-child {
  background: var(--sam-accent);
  color: #ffffff !important;
  border: 2px solid var(--sam-accent);
}
.template-page main .page-width .prose-block--docs .doc-buttons-row a:first-child:hover {
  background: var(--sam-accent-hover);
}
.template-page main .page-width .prose-block--docs .doc-buttons-row a:not(:first-child) {
  background: transparent;
  color: #ffffff !important;
  border: 2px solid #ffffff;
}
.template-page main .page-width .prose-block--docs .doc-buttons-row a:not(:first-child):hover {
  background: #ffffff;
  color: #0b0b0c !important;
}

/* =========================================================================
   prose-block figures — used in PDP descriptions for inline diagrams,
   integration shots, and lifestyle imagery harvested from WP.
   ========================================================================= */
.product-main__prose .prose-block__figure {
  margin: 2.4rem 0;
  padding: 0;
  text-align: center;
}
.product-main__prose .prose-block__figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  border: 1px solid var(--sam-border);
  background: var(--sam-surface);
}

/* =========================================================================
   FAQ grid (used by Compressor PDP descriptionHtml + about page FAQ).
   Two topic-segment columns; collapses to 1 col under 750px.
   ========================================================================= */
.pdp-faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 2rem 0 3rem;
}
@media (min-width: 750px) {
  .pdp-faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.6rem;
  }
}
.pdp-faq-col {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.pdp-faq-col__title {
  font-family: var(--sam-font-mono);
  font-size: 1.4rem !important;
  font-weight: 700;
  color: var(--sam-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.4rem !important;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--sam-border);
}
.pdp-faq-grid .pdp-faq {
  background: var(--sam-bg);
  border: 1px solid var(--sam-border);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 !important;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.pdp-faq-grid .pdp-faq[open] { border-color: var(--sam-accent); }
.pdp-faq-grid .pdp-faq:hover { border-color: var(--sam-border-strong); }
.pdp-faq-grid .pdp-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.6rem 5rem 1.6rem 1.8rem !important;
  font-size: 1.6rem !important;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sam-fg);
  position: relative;
}
.pdp-faq-grid .pdp-faq summary::-webkit-details-marker { display: none; }
.pdp-faq-grid .pdp-faq summary::after {
  content: "";
  position: absolute;
  right: 1.4rem;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231268ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat center / 16px;
  transition: transform 200ms ease;
}
.pdp-faq-grid .pdp-faq[open] summary::after { transform: rotate(180deg); }
.pdp-faq-grid .pdp-faq summary:hover { color: var(--sam-accent); }
.pdp-faq-grid .pdp-faq__body {
  padding: 0 1.8rem 1.6rem !important;
  font-size: 1.5rem !important;
  line-height: 1.65;
  color: var(--sam-fg);
}
.pdp-faq-grid .pdp-faq__body p {
  margin: 0 0 1rem !important;
  font-size: 1.5rem !important;
  line-height: 1.65;
  padding: 0 !important;
  max-width: none !important;
}
.pdp-faq-grid .pdp-faq__body p:last-child { margin: 0 !important; }
.pdp-faq-grid .pdp-faq__body a { color: var(--sam-accent); text-decoration: underline; }

/* =========================================================================
   Hide Dawn's announcement / utility bar above the header. The section
   wrapper renders ~29px tall with a 19px dark utility bar inside; the
   leftover 10px shows the body's white background as a visible strip
   under the header. The SAM rebuild header is the brand bar; an
   above-it announcement is not part of the design.
   ========================================================================= */
.shopify-section-group-header-group.announcement-bar-section,
[id*="__announcement-bar"],
.utility-bar {
  display: none !important;
}

/* =========================================================================
   Default page (about / support / contact / generic) — wider container,
   bigger prose, stronger title hierarchy. Roughly +30% from Dawn defaults
   to match the Compressor PDP treatment and the rest of the rebuild.
   Unscoped because pre-cache HTML may lack template-* class on body.
   ========================================================================= */

main .page-width,
.shopify-section--page .page-width,
.shopify-section [class*="main-page"] .page-width {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 2.4rem;
}

/* NOTE: theme root font-size is 10px (62.5%). All rem values resolve at
   10px/rem — so 1.8rem = 18px, 3.6rem = 36px. Use rem multiplied by 10. */

/* Page title (Dawn's default <h1>) */
.page-title,
main .page-width > h1,
[class*="main-page"] h1 {
  font-size: clamp(3.2rem, 2.4rem + 2vw, 5.4rem) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 3.2rem !important;
  color: var(--sam-fg) !important;
}

/* Page rich-text body — readable, generous, professional */
main .page-width .rte,
[class*="main-page"] .rte,
.shopify-section--page .rte {
  font-size: 1.8rem !important;
  line-height: 1.7 !important;
  color: var(--sam-fg);
  max-width: 72ch;
}
main .page-width .rte p,
[class*="main-page"] .rte p,
.shopify-section--page .rte p {
  font-size: 1.8rem !important;
  line-height: 1.7 !important;
  margin: 0 0 1.8rem !important;
  max-width: 72ch;
}
main .page-width .rte h2,
[class*="main-page"] .rte h2,
.shopify-section--page .rte h2 {
  font-size: 3rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.012em;
  margin: 4.8rem 0 1.6rem !important;
  color: var(--sam-fg);
}
main .page-width .rte h3,
[class*="main-page"] .rte h3,
.shopify-section--page .rte h3 {
  font-size: 2.3rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 3.6rem 0 1.2rem !important;
  color: var(--sam-fg);
}
main .page-width .rte ul,
main .page-width .rte ol,
[class*="main-page"] .rte ul,
[class*="main-page"] .rte ol,
.shopify-section--page .rte ul,
.shopify-section--page .rte ol {
  font-size: 1.8rem;
  line-height: 1.7;
  padding-left: 2.4em;
  margin: 0 0 1.8rem;
}
main .page-width .rte li,
[class*="main-page"] .rte li,
.shopify-section--page .rte li {
  margin-bottom: 0.6rem;
  font-size: 1.8rem !important;
  line-height: 1.7;
}
main .page-width .rte a,
[class*="main-page"] .rte a,
.shopify-section--page .rte a {
  color: var(--sam-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
main .page-width .rte strong,
[class*="main-page"] .rte strong,
.shopify-section--page .rte strong {
  font-weight: 700;
  color: var(--sam-fg);
}

/* About-hero specific: bigger title + prose */
.section-about-hero .about-hero__title {
  font-size: clamp(3.6rem, 2.6rem + 2vw, 5.6rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.022em !important;
  margin-bottom: 2.4rem !important;
}
.section-about-hero .about-hero__body,
.section-about-hero .about-hero__body p {
  font-size: 2rem !important;
  line-height: 1.65 !important;
  max-width: 72ch !important;
}
.section-about-hero .about-fact dt {
  font-size: 1.3rem !important;
  letter-spacing: 0.08em;
}
.section-about-hero .about-fact dd {
  font-size: 2.2rem !important;
  font-weight: 700 !important;
}

/* Contact-form section — bigger heading + label/input typography */
.section-contact-form h1,
.section-contact-form h2,
.contact-form h1,
.contact-form h2 {
  font-size: clamp(3.2rem, 2.4rem + 2vw, 5rem) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 2.4rem !important;
}
.section-contact-form label,
.contact-form label,
.section-contact-form .field__label,
.contact-form .field__label {
  font-family: var(--sam-font-mono) !important;
  font-size: 1.3rem !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sam-fg-muted) !important;
}
.section-contact-form input[type="text"],
.section-contact-form input[type="email"],
.section-contact-form input[type="tel"],
.section-contact-form textarea,
.contact-form input,
.contact-form textarea {
  font-size: 1.7rem !important;
  padding: 1.4rem 1.6rem !important;
  border: 1px solid var(--sam-border-strong) !important;
  border-radius: 6px !important;
}
.section-contact-form button[type="submit"],
.contact-form button[type="submit"] {
  font-size: 1.6rem !important;
  padding: 1.6rem 3.2rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

/* Collection page — wide container matching the header (1400px max).
   Unscoped because pre-cache HTML may lack .template-collection on body. */
.collection,
#ProductGridContainer,
.section-collection-header .content-wrapper,
.section-collection-header > div,
.shopify-section.section section .page-width,
[id^="shopify-section-template"][id$="__product-grid"] .page-width {
  max-width: 1400px !important;
  margin-inline: auto !important;
  padding-inline: 2.4rem;
}
#ProductGridContainer {
  padding-block: 2rem 4rem;
}

/* =========================================================================
   Collection page polish — light-touch overlays on Dawn's product-grid
   without breaking its built-in layout. Avoid restyling .card__media etc.
   directly; Dawn's classes vary by version and overriding can hide the
   image / break sizing. Only safe targets here.
   ========================================================================= */

/* Hide Dawn's default hero — we use our custom collection-header */
.template-collection .collection-hero { display: none; }

/* Constrain stray SVG icons inside the facets sidebar so the chevron
   never blows up to container size if its width/height attrs are missing. */
.template-collection facet-filters-form svg,
.template-collection .facets svg,
.template-collection .facets__summary svg,
.template-collection details svg {
  max-width: 18px;
  max-height: 18px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Card price in accent blue, card title hover — these are safe to
   override because they target SAM's intended emphasis. */
.template-collection .price__regular .price-item,
.template-collection .price-item--regular {
  color: var(--sam-accent);
  font-weight: 700;
}
.template-collection .card__heading a:hover,
.template-collection .card-information .card__heading a:hover {
  color: var(--sam-accent);
}

/* Whole-card click target — the heading link gets a stretched
   ::after pseudo that covers the entire card-wrapper, so clicking
   anywhere on the card (image, title, price) navigates to the PDP. */
.template-collection .card-wrapper {
  position: relative;
  transition: transform 160ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow 160ms cubic-bezier(0.2, 0, 0, 1);
}
.template-collection .card-wrapper .card__heading a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Invisible click overlay; aria-hidden equivalent — text inside is
     still readable, the title link still focuses normally. */
}
.template-collection .card-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(18, 104, 255, 0.25);
}
.template-collection .card-wrapper:hover .card__heading a {
  color: var(--sam-accent);
  text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
  .template-collection .card-wrapper { transition: none; }
  .template-collection .card-wrapper:hover { transform: none; }
}

/* Breathing room between header + grid */
.template-collection main { padding-bottom: var(--sam-space-12); }

/* =========================================================================
   Product card grid — full re-layout. Dawn's base.css (which we replaced)
   originally provided .grid display:grid + column counts. Without it, the
   product-grid renders as a plain bullet list with 0x0 images. Restore the
   grid + give the cards proper SAM-styled chrome (white, soft border,
   accent-blue price + hover lift).
   ========================================================================= */

ul.grid,
ul.product-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sam-space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  ul.grid, ul.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 990px) {
  ul.grid, ul.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  ul.grid.grid--4-col-desktop, ul.product-grid.grid--4-col-desktop {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
ul.grid > li.grid__item,
ul.product-grid > li.grid__item {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* The card itself — white, soft border, hover lift */
/* Auto-fit columns: behaves like 1/2/3/4 column at common widths but lets
   each card stay a reasonable size when there are only 1-2 in the grid. */
ul.product-grid,
#ProductGridContainer ul.grid,
#ProductGridContainer ul.product-grid {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  gap: 2.4rem !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}
@media (min-width: 1100px) {
  ul.product-grid,
  #ProductGridContainer ul.grid,
  #ProductGridContainer ul.product-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  }
}
ul.product-grid > li.grid__item,
#ProductGridContainer ul > li.grid__item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  display: block !important;
  flex: none !important;
  max-width: none !important;
}

/* Unscoped because pre-cache HTML lacks .template-collection on body.
   Selectors target Dawn product-card classes which only appear in product
   grids — collisions elsewhere are unlikely. */
ul.product-grid .card-wrapper,
ul.grid .card-wrapper {
  display: block;
  height: 100%;
}
ul.product-grid .card,
ul.grid .card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--sam-border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1),
              border-color 200ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
}
ul.product-grid .card-wrapper:hover .card,
ul.grid .card-wrapper:hover .card {
  transform: translateY(-3px);
  border-color: var(--sam-accent);
  box-shadow: 0 12px 28px -10px rgba(18, 104, 255, 0.22);
}

/* Card inner / media — square aspect ratio, image fits cleanly. Override
   Dawn's .ratio class which relied on Dawn's deleted base.css. */
ul.product-grid .card__inner,
ul.grid .card__inner,
ul.product-grid .card--media .card__inner,
ul.grid .card--media .card__inner {
  position: relative !important;
  width: 100% !important;
  background: var(--sam-surface);
  aspect-ratio: 1 / 1;
  display: block;
  padding: 0 !important;
}
ul.product-grid .card--text .card__inner,
ul.grid .card--text .card__inner {
  aspect-ratio: 1 / 1;
  background: var(--sam-surface);
}
ul.product-grid .card__media,
ul.grid .card__media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block;
  overflow: hidden;
}
ul.product-grid .card__media .media,
ul.grid .card__media .media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  padding: 0 !important;
}
ul.product-grid .card__media img,
ul.grid .card__media img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 1.6rem !important;
  margin: 0 !important;
  transition: transform 300ms cubic-bezier(0.2, 0, 0, 1);
}
ul.product-grid .card-wrapper:hover .card__media img,
ul.grid .card-wrapper:hover .card__media img {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  ul.product-grid .card,
  ul.grid .card,
  ul.product-grid .card__media img,
  ul.grid .card__media img,
  ul.product-grid .card-wrapper:hover .card,
  ul.grid .card-wrapper:hover .card,
  ul.product-grid .card-wrapper:hover .card__media img,
  ul.grid .card-wrapper:hover .card__media img { transition: none; transform: none; }
}

/* Card content — title + price below image */
ul.product-grid .card__content,
ul.grid .card__content {
  display: flex;
  flex-direction: column;
  gap: var(--sam-space-2);
  padding: var(--sam-space-5);
  border-top: 1px solid var(--sam-border);
  flex: 1 1 auto;
  position: relative;
}
ul.product-grid .card__information,
ul.grid .card__information {
  display: flex;
  flex-direction: column;
  gap: var(--sam-space-2);
}
ul.product-grid .card__heading,
ul.grid .card__heading {
  margin: 0;
  font-size: 1.7rem !important;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.005em;
}
ul.product-grid .card__heading a,
ul.grid .card__heading a {
  color: var(--sam-fg);
  text-decoration: none;
  display: inline-block;
  position: static;
}
/* Stretched click target — every part of the card-wrapper navigates to the
   PDP. The heading link's ::after pseudo overlays the entire card. */
ul.product-grid .card-wrapper,
ul.grid .card-wrapper {
  position: relative;
}
ul.product-grid .card__heading a::after,
ul.grid .card__heading a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
}
/* The image, title text, and price are all "below" the overlay (z-index:2).
   The overlay catches clicks anywhere on the card. Internal links would be
   blocked, but cards have no internal links — only title + price text. */
ul.product-grid .card-wrapper:hover .card__heading a,
ul.grid .card-wrapper:hover .card__heading a {
  color: var(--sam-accent);
  text-decoration: none;
}
ul.product-grid .price,
ul.grid .price,
ul.product-grid .card__information .price,
ul.grid .card__information .price {
  font-size: 1.6rem !important;
  font-weight: 700;
  color: var(--sam-accent);
  font-family: var(--sam-font-mono);
  margin: 0;
}
ul.product-grid .price .price-item,
ul.grid .price .price-item,
ul.product-grid .price__regular .price-item,
ul.grid .price__regular .price-item,
ul.product-grid .price-item--regular,
ul.grid .price-item--regular {
  color: var(--sam-accent) !important;
  font-weight: 700;
}

/* Sold-out / unavailable badge — only show when it has actual text content.
   Empty badges (Dawn's placeholder) collapse to a 1-line black square — hide. */
ul.product-grid .card__badge,
ul.grid .card__badge {
  display: none;
}
ul.product-grid .card__badge:not(:empty),
ul.grid .card__badge:not(:empty) {
  position: absolute;
  top: var(--sam-space-3);
  left: var(--sam-space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  font-family: var(--sam-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(15, 23, 42, 0.85);
  color: #ffffff;
  border-radius: 4px;
}

/* Hide Dawn's collection-hero (no body-class scope so it works pre-flush) */
.collection-hero { display: none !important; }
.section-collection-header ~ #shopify-section-template--*__banner { display: none; }

/* Tame facets bar */
.facets-container,
facet-filters-form {
  font-family: var(--sam-font-sans);
}
.facets__heading,
.facets__summary {
  font-family: var(--sam-font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sam-fg);
}
.facets__summary {
  cursor: pointer;
  padding: var(--sam-space-2) var(--sam-space-3);
  border: 1px solid var(--sam-border);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: var(--sam-space-2);
}
.facets__summary:hover { border-color: var(--sam-accent); color: var(--sam-accent); }
facet-filters-form svg,
.facets svg,
.facets__summary svg,
.facets details svg {
  max-width: 18px !important;
  max-height: 18px !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
}
.product-count,
.product-count__text,
.collection__count,
.product-count-vertical {
  font-family: var(--sam-font-mono);
  font-size: 0.8125rem;
  color: var(--sam-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* =========================================================================
   Lead-time pill — formerly inlined in snippets/lead-time.liquid (which
   leaked an empty <style> when the snippet rendered nothing).
   ========================================================================= */
.lead-time {
  display: inline-flex;
  align-items: center;
  gap: var(--sam-space-2);
  font-size: var(--sam-fs-sm);
  color: var(--sam-fg-muted);
}
.lead-time__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--sam-ok);
  display: inline-block;
  flex-shrink: 0;
}
.lead-time__dot--lead { background: var(--sam-warn); }

/* =========================================================================
   Description prose normalization for WP / Shopify Magic imports.
   These imports embed Tailwind utility classes (whitespace-pre-wrap,
   space-y-2, list-disc, pl-8, etc.) and custom callout sections. We don't
   load Tailwind, so we override at the prose-container level so embedded
   markup looks intentional.
   ========================================================================= */

/* sam-roi-impact: an editorial ROI callout that the WP imports use as
   the lead block of many descriptions. Treat it as a card with a left
   accent rule so it stands apart from the rest of the prose. */
.product-main__prose .sam-roi-impact {
  background: var(--sam-surface);
  border-left: 3px solid var(--sam-accent);
  padding: var(--sam-space-5) var(--sam-space-6);
  margin: 0 0 var(--sam-space-6);
}
.product-main__prose .sam-roi-impact > p:first-child {
  font-family: var(--sam-font-mono);
  font-size: var(--sam-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sam-fg-muted);
  margin: 0 0 var(--sam-space-2);
}
.product-main__prose .sam-roi-impact h2 {
  font-size: 1.5rem;             /* 24px */
  margin: 0 0 var(--sam-space-3);
  padding: 0;
  border: 0;
  line-height: 1.25;
  font-weight: 700;
}
.product-main__prose .sam-roi-impact ul {
  margin: var(--sam-space-3) 0 0;
  padding-left: 1.25em;
}
.product-main__prose .sam-roi-impact li {
  margin-bottom: var(--sam-space-2);
  font-size: 1.125rem;            /* 18px */
  line-height: 1.6;
}
.product-main__prose .sam-roi-impact p {
  font-size: 1.125rem;
  line-height: 1.6;
}

/* Tailwind-style classes that the imports use but we don't ship. Force
   sane defaults so lists indent, paragraphs stack, etc. */
.product-main__prose ul,
.product-main__prose ol {
  list-style-position: outside !important;
  padding-left: 1.5em !important;
  margin: 0 0 var(--sam-space-4) !important;
}
.product-main__prose ul.list-disc { list-style-type: disc !important; }
.product-main__prose ul[class*="space-y-2"] > li,
.product-main__prose ol[class*="space-y-2"] > li {
  margin-top: var(--sam-space-2) !important;
}
.product-main__prose .whitespace-pre-wrap { white-space: normal; }
.product-main__prose .break-words { overflow-wrap: anywhere; }
.product-main__prose [class*="pl-8"] { padding-left: 2rem !important; }
.product-main__prose [class*="-mt-1"] { margin-top: 0 !important; }

/* Embedded H2s in description should not duplicate the section H2 style.
   Step the size down so there's a single anchor heading per section. */
.product-main__prose h2 {
  font-size: 1.875rem;         /* 30px */
  font-weight: 700;
  margin-top: var(--sam-space-8);
  margin-bottom: var(--sam-space-4);
  padding-bottom: 0;
  border-bottom: none;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.product-main__prose h3 {
  font-size: 1.625rem;         /* 26px */
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* Section card surfaces. Each <section class="prose-block"> in the
   description body becomes a bordered card that picks up the same
   visual language as the right-sidebar trust strip / jump-link card.
   Together they read as one design system, not two. */
.product-main__prose .prose-block {
  background: var(--sam-bg);
  border: 1px solid var(--sam-border);
  border-radius: 12px;
  padding: var(--sam-space-5) var(--sam-space-5);
  margin: 0 0 var(--sam-space-5);
}
@media (min-width: 750px) {
  .product-main__prose .prose-block {
    padding: var(--sam-space-6) var(--sam-space-6);
  }
}
.product-main__prose .prose-block--lead {
  background: var(--sam-surface);
  border-color: var(--sam-border-strong);
}
.product-main__prose .prose-block--docs {
  background: var(--sam-surface);
}

/* DOE / Pecan Street efficiency claims block — sits in the lead card.
   Three big-number callouts in a flex row + a small attribution line. */
.product-main__prose .doe-claims {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sam-space-4);
  margin: var(--sam-space-6) 0 var(--sam-space-3);
}
.product-main__prose .doe-claim {
  text-align: center;
  padding: var(--sam-space-4) var(--sam-space-3);
  background: var(--sam-bg);
  border: 1px solid var(--sam-border);
  border-radius: 10px;
}
.product-main__prose .doe-claim__num {
  display: block;
  font-family: var(--sam-font-sans);
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.625rem);
  font-weight: 800;
  color: var(--sam-accent);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: var(--sam-space-2);
}
.product-main__prose .doe-claim__label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--sam-fg-muted);
  line-height: 1.3;
}
.product-main__prose .doe-attribution {
  font-size: 0.9375rem;
  color: var(--sam-fg-muted);
  font-style: italic;
  margin: 0;
}
@media (max-width: 600px) {
  .product-main__prose .doe-claims {
    grid-template-columns: 1fr;
  }
}

/* Install video + numbered steps split — video on the left, ordered
   step list on the right at >=750px. Stacks below that. */
.product-main__prose .install-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sam-space-5);
  margin-top: var(--sam-space-3);
}
@media (min-width: 750px) {
  .product-main__prose .install-split {
    grid-template-columns: 1fr 1fr;
    gap: var(--sam-space-6);
    align-items: start;
  }
}
.product-main__prose .install-split__video {
  align-self: flex-start;
}
.product-main__prose .install-video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}
.product-main__prose .install-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.product-main__prose .install-split__steps ol {
  margin: 0 0 var(--sam-space-4);
  padding-left: 1.5em;
}
.product-main__prose .install-split__steps li {
  margin-bottom: var(--sam-space-2);
  font-size: 1.0625rem;
  line-height: 1.55;
}
.product-main__prose .install-split__time {
  font-size: 1.0625rem;
  color: var(--sam-fg-muted);
  margin: 0;
}

/* Logo marquee — horizontal infinite scroll. Track holds the logo
   image duplicated 8 times; the animation translates the track 50%
   to the left and seamlessly loops. */
.product-main__prose .logo-marquee {
  margin-top: var(--sam-space-5);
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.product-main__prose .logo-marquee__track {
  display: flex;
  align-items: center;
  gap: var(--sam-space-8);
  width: max-content;
  animation: logoMarquee 28s linear infinite;
}
.product-main__prose .logo-marquee__track img {
  display: block;
  height: 84px;
  width: auto;
  max-width: none;
  flex-shrink: 0;
  opacity: 0.85;
}
.product-main__prose .logo-marquee:hover .logo-marquee__track {
  animation-play-state: paused;
}
@keyframes logoMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .product-main__prose .logo-marquee__track { animation: none; }
}

/* Anchor scroll-margin so jump-link landings sit comfortably below
   the sticky header bar. */
.product-main__prose .prose-block[id] {
  scroll-margin-top: 96px;
}
/* Reset spacing on the FIRST heading inside each section card so the
   card padding controls top breathing room (not the heading margin). */
.product-main__prose .prose-block > h2:first-child,
.product-main__prose .prose-block > h3:first-child {
  margin-top: 0;
}
/* Reset spacing on the LAST element inside each section card so
   the card padding controls bottom breathing room. */
.product-main__prose .prose-block > :last-child { margin-bottom: 0; }
@media (min-width: 750px) {
  .product-main__prose .prose-block {
    padding: var(--sam-space-8) var(--sam-space-8);
  }
}
/* Section H3s sitting INSIDE a .prose-block don't need the big
   margin-top — the card spacing already provides separation between
   sections, and a big margin would push the heading off the card top. */
.product-main__prose .prose-block > h3 {
  margin-top: 0;
  font-size: 1.625rem;          /* 26px */
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: var(--sam-space-4);
}
.product-main__prose .prose-block > h2 {
  margin-top: 0;
  font-size: 1.875rem;          /* 30px */
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--sam-space-4);
}

/* FAQ accordion (rendered inline as <details class="pdp-faq">). */
.product-main__prose .pdp-faq {
  border: 1px solid var(--sam-border);
  border-radius: 10px;
  background: var(--sam-bg);
  margin: 0 0 var(--sam-space-3);
  overflow: hidden;
  transition: border-color 160ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow 160ms cubic-bezier(0.2, 0, 0, 1);
}
.product-main__prose .pdp-faq:hover {
  border-color: var(--sam-border-strong);
}
.product-main__prose .pdp-faq[open] {
  border-color: var(--sam-accent);
  box-shadow: 0 2px 10px -3px rgba(18, 104, 255, 0.18);
}
.product-main__prose .pdp-faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.25rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sam-space-4);
  padding: var(--sam-space-4) var(--sam-space-5);
  color: var(--sam-fg);
  line-height: 1.35;
  transition: background 160ms cubic-bezier(0.2, 0, 0, 1);
}
.product-main__prose .pdp-faq summary:hover {
  background: var(--sam-surface);
}
.product-main__prose .pdp-faq[open] summary {
  background: var(--sam-surface);
  border-bottom: 1px solid var(--sam-border);
}
.product-main__prose .pdp-faq summary::-webkit-details-marker { display: none; }
.product-main__prose .pdp-faq summary::after {
  content: "";
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sam-surface);
  border: 2px solid var(--sam-border-strong);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231268ff' stroke-width='3' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 220ms cubic-bezier(0.2, 0, 0, 1),
              background-color 160ms cubic-bezier(0.2, 0, 0, 1),
              border-color 160ms cubic-bezier(0.2, 0, 0, 1);
}
.product-main__prose .pdp-faq[open] summary::after {
  background: var(--sam-accent);
  border-color: var(--sam-accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'><path d='M5 12h14'/></svg>");
  transform: rotate(180deg);
}
.product-main__prose .pdp-faq p {
  margin: 0;
  padding: var(--sam-space-4) var(--sam-space-5);
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--sam-fg);
}

/* Document download buttons block (rendered inline in the
   description body via a <div class="doc-buttons-row"> ... </div>). */
.product-main__prose .doc-buttons-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sam-space-3);
  margin: var(--sam-space-6) 0 var(--sam-space-8);
  padding: 0;
  list-style: none;
}
.product-main__prose .doc-buttons-row a {
  display: inline-flex;
  align-items: center;
  gap: var(--sam-space-2);
  padding: var(--sam-space-3) var(--sam-space-5);
  background: var(--sam-bg);
  border: 2px solid var(--sam-accent);
  color: var(--sam-accent);
  text-decoration: none;
  font-size: 1.125rem;          /* 18px buttons - readable */
  font-weight: 600;
  border-radius: 8px;
  transition: background 160ms cubic-bezier(0.2, 0, 0, 1),
              color 160ms cubic-bezier(0.2, 0, 0, 1);
  line-height: 1.2;
}
.product-main__prose .doc-buttons-row a::before {
  content: "↓";
  display: inline-block;
  font-weight: 700;
  margin-right: 4px;
}
.product-main__prose .doc-buttons-row a:hover {
  background: var(--sam-accent);
  color: var(--sam-accent-fg);
}

/* Strip alarming inline color/style that some Magic imports inject —
   this is a soft override; specific inline styles still win. */
.product-main__prose [style*="color:#ff"] { color: inherit !important; }
.product-main__prose [style*="background-color:yellow"] { background: transparent !important; }

/* Tables embedded in WP imports (comparison charts) — give them industrial
   styling that matches the spec table. */
.product-main__prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sam-space-6) 0;
  font-size: 1.0625rem;        /* 17px tables */
  line-height: 1.5;
}
.product-main__prose table th,
.product-main__prose table td {
  border-bottom: var(--sam-border-thin);
  padding: var(--sam-space-3) var(--sam-space-4);
  text-align: left;
  vertical-align: top;
}
.product-main__prose table th {
  background: var(--sam-surface);
  font-weight: 600;
  color: var(--sam-fg);
  font-family: var(--sam-font-sans);
  font-size: var(--sam-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--sam-border-strong);
}
.product-main__prose table tr:nth-child(even) td {
  background: var(--sam-surface);
}
.product-main__prose table td:first-child {
  font-weight: 600;
}
/* For the edition-comparison table, center the check/dash columns
   and color the checkmarks accent-blue so the included column stands
   out from "—" cells. */
.product-main__prose table td:not(:first-child),
.product-main__prose table th:not(:first-child) {
  text-align: center;
}
.product-main__prose table td:not(:first-child) {
  font-weight: 700;
  color: var(--sam-accent);
  font-size: 1.25rem;
}
@media (max-width: 749px) {
  .product-main__prose table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =============================================================
   .page-prose — generic prose-block styling for Pages (not PDPs).
   Mirrors .product-main__prose .prose-block treatment so support /
   about / etc bodies share the same bordered-card visual language.
   ============================================================= */
.page-prose {
  max-width: 980px;
  margin: 0 auto;
  padding: var(--sam-space-6) var(--sam-space-4);
  font-size: 1.5rem;
  line-height: 1.65;
  color: var(--sam-fg);
}
.page-prose .prose-block {
  background: var(--sam-bg);
  border: 1px solid var(--sam-border);
  border-radius: 12px;
  padding: var(--sam-space-6) var(--sam-space-6);
  margin: 0 0 var(--sam-space-5);
}
.page-prose .prose-block--lead {
  background: var(--sam-surface);
  border-color: var(--sam-border-strong);
}
.page-prose .prose-block--docs {
  background: var(--sam-surface);
}
.page-prose .prose-block > h2,
.page-prose .prose-block > h3 {
  margin-top: 0;
  margin-bottom: var(--sam-space-4);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.page-prose .prose-block > h2 {
  font-size: 2.45rem;
  line-height: 1.2;
}
.page-prose .prose-block > h3 {
  font-size: 2rem;
  line-height: 1.25;
}
.page-prose .prose-block p,
.page-prose .prose-block li {
  font-size: 1.5rem;
  line-height: 1.6;
}
.page-prose .prose-block > :last-child { margin-bottom: 0; }
.page-prose .prose-block ul,
.page-prose .prose-block ol {
  padding-left: 1.5em;
  margin: 0 0 var(--sam-space-4);
}
.page-prose .prose-block li { margin-bottom: var(--sam-space-3); }
.page-prose .prose-block a {
  color: var(--sam-accent);
  text-decoration: underline;
}
.page-prose .prose-block strong { font-weight: 700; }
.page-prose .prose-block table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sam-space-4) 0;
  font-size: 1.375rem;
}
.page-prose .prose-block th,
.page-prose .prose-block td {
  padding: var(--sam-space-3) var(--sam-space-3);
  border-bottom: 1px solid var(--sam-border);
  text-align: left;
}
.page-prose .prose-block th {
  background: var(--sam-surface);
  font-weight: 700;
  font-family: var(--sam-font-mono);
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sam-fg-muted);
}

/* FAQ accordion on Pages. */
.page-prose .pdp-faq {
  border: 1px solid var(--sam-border);
  border-radius: 10px;
  background: var(--sam-bg);
  margin: 0 0 var(--sam-space-3);
  overflow: hidden;
}
.page-prose .pdp-faq[open] {
  border-color: var(--sam-accent);
  box-shadow: 0 2px 10px -3px rgba(18, 104, 255, 0.18);
}
.page-prose .pdp-faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.5rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sam-space-4);
  padding: var(--sam-space-4) var(--sam-space-5);
  color: var(--sam-fg);
  line-height: 1.35;
  transition: background 160ms cubic-bezier(0.2, 0, 0, 1);
}
.page-prose .pdp-faq summary:hover { background: var(--sam-surface); }
.page-prose .pdp-faq[open] summary {
  background: var(--sam-surface);
  border-bottom: 1px solid var(--sam-border);
}
.page-prose .pdp-faq summary::-webkit-details-marker { display: none; }
.page-prose .pdp-faq summary::after {
  content: "";
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sam-surface);
  border: 2px solid var(--sam-border-strong);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231268ff' stroke-width='3' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 220ms cubic-bezier(0.2, 0, 0, 1),
              background-color 160ms, border-color 160ms;
}
.page-prose .pdp-faq[open] summary::after {
  background: var(--sam-accent);
  border-color: var(--sam-accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'><path d='M5 12h14'/></svg>");
  transform: rotate(180deg);
}
.page-prose .pdp-faq p {
  margin: 0;
  padding: var(--sam-space-4) var(--sam-space-5);
  font-size: 1.375rem;
  line-height: 1.65;
  color: var(--sam-fg);
}

.page-prose .doc-buttons-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sam-space-3);
  margin: var(--sam-space-4) 0 0;
}
.page-prose .doc-buttons-row a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.4em;
  border: 2px solid var(--sam-accent);
  border-radius: 8px;
  background: transparent;
  color: var(--sam-accent);
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 700;
  transition: background 160ms ease, color 160ms ease;
}
.page-prose .doc-buttons-row a:hover {
  background: var(--sam-accent);
  color: #ffffff;
}
.page-prose .doc-buttons-row a::before {
  content: "↓";
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  .page-prose .pdp-faq summary::after,
  .page-prose .doc-buttons-row a { transition: none; }
}