/* ============================================================
   PSS Seals theme — navy + red, mirroring the PSS (shaftseal.com)
   brand.
   ============================================================ */

/* -------------- Inter, self-hosted --------------
   Inter 4.1 from the official rsms/inter GitHub release (its web WOFF2, the
   same files rsms.me served), SIL Open Font License 1.1 - see
   ../fonts/pss_seals_theme/LICENSE-Inter.txt. Subset with fontTools pyftsubset to
   the unicode-range below, keeping the default OpenType features plus
   cv11/ss01/ss03, tnum and case, so glyphs, metrics
   and kerning are unchanged. Only the faces the storefront CSS uses.
   Sprockets rewrites each url() to the digested asset path; the regular
   face is preloaded by the layout. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/pss_seals_theme/Inter-Regular-265337bf1dd1401a621d2adec0b204193a63069dfc0c735c52b376b06d8e72c4.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0100-017F, U+0218-021B, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2126, U+2150-215F, U+2190-2193, U+2212, U+2215, U+2300, U+25CB, U+25CF, U+26A0, U+2713, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/pss_seals_theme/Inter-Italic-b420a3a83d0901a3cd0b7acf65f8bcd2ddb584136e109649cb21c2800cc18ebc.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0100-017F, U+0218-021B, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2126, U+2150-215F, U+2190-2193, U+2212, U+2215, U+2300, U+25CB, U+25CF, U+26A0, U+2713, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/pss_seals_theme/Inter-Medium-78a67e083216014d2706c5aab0666d9d4a6a9c2bb9cf0939a45a0d29e0e5b5c9.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0100-017F, U+0218-021B, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2126, U+2150-215F, U+2190-2193, U+2212, U+2215, U+2300, U+25CB, U+25CF, U+26A0, U+2713, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/pss_seals_theme/Inter-SemiBold-b06973434a3bc34ba03505e82f48ba2aa36fd5f39d5c58c032220feb83bc2289.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0100-017F, U+0218-021B, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2126, U+2150-215F, U+2190-2193, U+2212, U+2215, U+2300, U+25CB, U+25CF, U+26A0, U+2713, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/pss_seals_theme/Inter-Bold-d073d39cd031064c1e0a603d09fd95c6dde92cb1379d861fb3f0077f4e5595b7.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0100-017F, U+0218-021B, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2126, U+2150-215F, U+2190-2193, U+2212, U+2215, U+2300, U+25CB, U+25CF, U+26A0, U+2713, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/pss_seals_theme/Inter-ExtraBold-101071f21f2e8f37382338473a2a7f59e7037c0be2cee89973b9f43e64c40f7a.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0100-017F, U+0218-021B, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2126, U+2150-215F, U+2190-2193, U+2212, U+2215, U+2300, U+25CB, U+25CF, U+26A0, U+2713, U+FEFF, U+FFFD;
}

:root {
  --pss-primary:       #19283f;
  --pss-primary-dark:  #0f1929;
  --pss-primary-light: #e8edf3;
  --pss-accent:        #cc2a2a;
  --pss-accent-dark:   #a81f1f;
  --pss-ink:           #1f2733;
  --pss-ink-soft:      #4a5563;
  --pss-ink-muted:     #7a838f;
  --pss-bg:            #eef0f2;
  --pss-surface:       #ffffff;
  --pss-border:        #d8dce1;
  --pss-border-strong: #c2c8cf;
  --pss-success:       #15803d;
  --pss-radius-sm:     6px;
  --pss-radius:        10px;
  --pss-radius-lg:     16px;
  --pss-shadow-sm:     0 1px 2px rgba(25, 40, 63, .06);
  --pss-shadow:        0 6px 20px rgba(25, 40, 63, .10);
  --pss-shadow-lg:     0 16px 40px rgba(25, 40, 63, .16);
  --pss-font:          "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Arial, sans-serif;
}

/* The cart, checkout and order-confirmation pages are shared Solidus views
   styled by shop_components.css, which is written against the --cb-*
   properties. Mapping them onto the PSS palette here is what makes those
   pages come out in PSS navy-and-red - no duplicated CSS, no forked
   markup. */
:root {
  --cb-primary:       var(--pss-primary);
  --cb-primary-dark:  var(--pss-primary-dark);
  --cb-primary-light: var(--pss-primary-light);
  --cb-accent:        var(--pss-accent);
  --cb-accent-dark:   var(--pss-accent-dark);
  --cb-ink:           var(--pss-ink);
  --cb-ink-soft:      var(--pss-ink-soft);
  --cb-ink-muted:     var(--pss-ink-muted);
  --cb-bg:            var(--pss-bg);
  --cb-surface:       var(--pss-surface);
  --cb-border:        var(--pss-border);
  --cb-border-strong: var(--pss-border-strong);
  --cb-success:       var(--pss-success);
  --cb-success-bg:    #dcfce7;
  --cb-warning:       #b45309;
  --cb-warning-bg:    #fef3c7;
  --cb-danger:        #b91c1c;
  --cb-danger-bg:     #fee2e2;
  --cb-radius-sm:     var(--pss-radius-sm);
  --cb-radius:        var(--pss-radius);
  --cb-radius-lg:     var(--pss-radius-lg);
  --cb-shadow-sm:     var(--pss-shadow-sm);
  --cb-shadow:        var(--pss-shadow);
  --cb-shadow-lg:     var(--pss-shadow-lg);
  --cb-font-sans:     var(--pss-font);
  /* SKUs on the cart and order pages render monospaced. */
  --cb-font-mono:     ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
.pss-body {
  margin: 0;
  font-family: var(--pss-font);
  background: var(--pss-bg);
  color: var(--pss-ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Base element defaults — wrapped in :where() so they carry ZERO specificity
   and never override component classes (the .pss-body prefix used to win at
   (0,1,1), clobbering custom colours/margins and causing dark-on-dark text
   and lost spacing on the content pages). */
:where(.pss-body) h1, :where(.pss-body) h2, :where(.pss-body) h3, :where(.pss-body) h4 { line-height: 1.18; color: var(--pss-ink); }
:where(.pss-body) p { margin: 0 0 1rem; color: var(--pss-ink-soft); }
:where(.pss-body) a { color: var(--pss-primary); text-decoration: none; transition: color .15s; }
:where(.pss-body) a:hover { color: var(--pss-accent); }
.pss-container { max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; }
.pss-skip { position: absolute; left: -9999px; }
.pss-skip:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 200; border-radius: var(--pss-radius-sm); }

/* Interactive elements always show a pointer cursor */
a[href], button, [type="button"], [type="submit"], [type="reset"],
.pss-btn, select, summary, label[for], [role="button"] { cursor: pointer; }
button:disabled, .pss-btn:disabled, select:disabled, [disabled] { cursor: not-allowed; }

/* Buttons */
.pss-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .8rem 1.4rem; border-radius: var(--pss-radius);
  font-weight: 700; font-size: .95rem; border: 2px solid transparent;
  cursor: pointer; transition: background .15s, color .15s, transform .1s, border-color .15s;
  text-decoration: none !important; white-space: nowrap;
}
.pss-btn--primary { background: var(--pss-primary); color: #fff !important; }
.pss-btn--primary:hover { background: var(--pss-primary-dark); color: #fff !important; transform: translateY(-1px); }
.pss-btn--accent { background: var(--pss-accent); color: #fff !important; }
.pss-btn--accent:hover { background: var(--pss-accent-dark); color: #fff !important; transform: translateY(-1px); }
.pss-btn--outline { background: transparent; color: var(--pss-primary) !important; border-color: var(--pss-border-strong); }
.pss-btn--outline:hover { border-color: var(--pss-primary); color: var(--pss-primary) !important; }
.pss-btn--lg { padding: 1rem 2rem; font-size: 1.05rem; }

/* ---------------- Header ---------------- */
.pss-siteheader { background: #fff; border-bottom: 1px solid var(--pss-border); position: sticky; top: 0; z-index: 100; box-shadow: var(--pss-shadow-sm); }
.pss-siteheader__top { background: var(--pss-primary); color: #fff; font-size: .82rem; }
.pss-siteheader__topinner { display: flex; gap: .5rem 2rem; justify-content: space-between; align-items: center; padding: .55rem 1.5rem; flex-wrap: wrap; }
.pss-topmsg { opacity: .9; }
.pss-toptel { display: inline-flex; align-items: center; gap: .5rem; color: #fff !important; font-weight: 600; }
.pss-toptel:hover { color: #fff !important; opacity: .82; }
.pss-toptel strong { font-weight: 800; letter-spacing: .01em; }
.pss-toptel__hours { opacity: .68; font-size: .78rem; }
.pss-topcompact { display: none; }
.pss-siteheader__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1rem 1.5rem; }

.pss-brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--pss-ink) !important; }
.pss-brand__mark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--pss-primary); color: #fff; border-radius: var(--pss-radius); }
.pss-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.pss-brand__text strong { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.pss-brand__text small { font-size: .68rem; color: var(--pss-ink-muted); text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }
.pss-brand--light .pss-brand__text strong { color: #fff; }
.pss-brand--light .pss-brand__text small { color: rgba(255,255,255,.7); }
.pss-brand--light .pss-brand__mark { background: #fff; color: var(--pss-primary-dark); }

.pss-sitenav { display: flex; gap: 1.6rem; align-items: center; }
.pss-sitenav a { color: var(--pss-ink-soft); font-weight: 600; font-size: .92rem; }
.pss-sitenav a:hover { color: var(--pss-primary); }
.pss-sitenav__cta { color: var(--pss-accent) !important; font-weight: 700 !important; }
.pss-siteheader__actions { display: flex; align-items: center; gap: .8rem; }
.pss-cart-link { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; background: var(--pss-primary); color: #fff !important; border-radius: var(--pss-radius); font-weight: 600; font-size: .85rem; position: relative; }
.pss-cart-link:hover { background: var(--pss-primary-dark); color: #fff !important; }
.pss-cart-link__badge { background: var(--pss-accent); color: #fff; border-radius: 999px; min-width: 1.3rem; height: 1.3rem; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; padding: 0 .35rem; }

/* Mobile menu */
.pss-menu-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 1px solid var(--pss-border); border-radius: var(--pss-radius); color: var(--pss-ink); cursor: pointer; }
.pss-menu-btn:hover { background: var(--pss-primary-light); color: var(--pss-primary); border-color: var(--pss-primary); }
.pss-menu-btn__close { display: none; }
.is-menu-open .pss-menu-btn__open { display: none; }
.is-menu-open .pss-menu-btn__close { display: block; }
.pss-mobile-nav { display: none; flex-direction: column; width: 100%; background: #fff; border-top: 1px solid var(--pss-border); padding: .5rem 0; }
.pss-mobile-nav a { display: block; padding: .85rem 1.5rem; color: var(--pss-ink); font-weight: 600; border-bottom: 1px solid var(--pss-border); }
.pss-mobile-nav a:last-child { border-bottom: none; }
.pss-mobile-nav a:hover { background: var(--pss-primary-light); color: var(--pss-primary); }

/* Flash */
.pss-flash { padding: .75rem 0; font-size: .9rem; }
.pss-flash--notice { background: var(--pss-primary-light); color: var(--pss-primary-dark); }
.pss-flash--error, .pss-flash--alert { background: #fee2e2; color: #991b1b; }

/* ---------------- Hero ---------------- */
.pss-hero { background: linear-gradient(160deg, var(--pss-primary) 0%, var(--pss-primary-dark) 100%); color: #fff; padding: 4rem 0 4.5rem; }
.pss-hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.pss-eyebrow { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--pss-accent); padding: .35rem .8rem; border-radius: 999px; margin-bottom: 1.1rem; box-shadow: 0 4px 12px rgba(204,42,42,.35); }
.pss-hero .pss-hero__title { font-size: 2.5rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 1rem; color: #fff; }
.pss-hero .pss-hero__lede { font-size: 1.1rem; color: rgba(255,255,255,.92); max-width: 38ch; margin-bottom: 1.75rem; }
.pss-hero__lede strong { color: #fff; }

/* Quick finder form */
.pss-finder { background: #fff; border-radius: var(--pss-radius-lg); padding: 1.85rem; box-shadow: var(--pss-shadow-lg); }
.pss-finder__row { display: grid; grid-template-columns: 1fr 1fr auto; gap: .85rem; align-items: end; }
.pss-finder__field { display: flex; flex-direction: column; gap: .35rem; }
.pss-finder__field label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pss-ink-soft); }
.pss-finder__field input { padding: .8rem .9rem; border: 2px solid var(--pss-border-strong); border-radius: var(--pss-radius); font-size: 1rem; font-weight: 600; color: var(--pss-ink); }
.pss-finder__field input:focus { outline: none; border-color: var(--pss-primary); box-shadow: 0 0 0 4px var(--pss-primary-light); }
.pss-finder__go { height: 3.1rem; }
.pss-finder__hint { margin: 2rem 0 .15rem; font-size: .85rem; color: var(--pss-ink-muted); line-height: 1.7; }
.pss-finder--page { max-width: 760px; margin: 0 auto; }

/* Hero diagram */
.pss-hero__diagram { display: flex; justify-content: center; }
.pss-diagram { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: var(--pss-radius-lg); padding: 1.5rem; width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: .6rem; }
.pss-diagram > div { border-radius: var(--pss-radius-sm); padding: .7rem .9rem; font-size: .82rem; font-weight: 600; color: #fff; }
.pss-diagram > div small { font-weight: 400; color: rgba(255,255,255,.75); }
.pss-diagram__shaft { background: rgba(255,255,255,.16); }
.pss-diagram__rotor { background: var(--pss-accent); }
.pss-diagram__bellows { background: rgba(255,255,255,.22); }
.pss-diagram__tube { background: rgba(255,255,255,.12); }

/* ---------------- Values ---------------- */
.pss-values { padding: 3.5rem 0; }
.pss-values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.pss-value { background: #fff; border: 1px solid var(--pss-border); border-top: 3px solid var(--pss-accent); border-radius: var(--pss-radius); padding: 1.5rem; box-shadow: var(--pss-shadow-sm); }
/* Icon badge (PssSealsTheme::IconHelper#pss_icon) — replaced emoji. */
.pss-value__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--pss-radius); background: var(--pss-primary-light); color: var(--pss-primary); margin-bottom: .85rem; }
.pss-value h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
.pss-value p { font-size: .9rem; margin: 0; }

/* ---------------- Steps ---------------- */
.pss-steps { padding: 1rem 0 4rem; }
.pss-section-title { text-align: center; font-size: 1.9rem; font-weight: 800; margin: 0 0 2rem; }
.pss-section-title::after { content: ""; display: block; width: 64px; height: 4px; background: var(--pss-accent); border-radius: 2px; margin: .85rem auto 0; }
.pss-steps__list { list-style: none; padding: 0; margin: 0 0 2.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.pss-step { background: #fff; border: 1px solid var(--pss-border); border-radius: var(--pss-radius); padding: 1.75rem; position: relative; }
.pss-step__num { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 999px; background: var(--pss-accent); color: #fff; font-weight: 800; margin-bottom: .8rem; box-shadow: 0 4px 12px rgba(204,42,42,.3); }
.pss-step h3 { font-size: 1.1rem; margin: 0 0 .5rem; }
.pss-step p { font-size: .92rem; margin: 0; }
.pss-steps__cta { text-align: center; }

/* ---------------- Finder page + results ---------------- */
.pss-finderpage { padding: 3rem 0 4rem; }
.pss-finderpage__head { text-align: center; max-width: 640px; margin: 0 auto 2rem; }
.pss-finderpage__head h1 { font-size: 2.1rem; font-weight: 800; margin: 0 0 .75rem; }
.pss-finderpage__head h1::after { content: ""; display: block; width: 64px; height: 4px; background: var(--pss-accent); border-radius: 2px; margin: .85rem auto .2rem; }
.pss-results { max-width: 760px; margin: 2.5rem auto 0; }
.pss-results__intro { text-align: center; color: var(--pss-ink-muted); }
.pss-results__pending { background: #fff; border: 1px solid var(--pss-border); border-left: 4px solid var(--pss-accent); border-radius: var(--pss-radius); padding: 1.75rem; }
.pss-results__pending h2 { font-size: 1.25rem; margin: 0 0 .75rem; }

/* ---------------- Article pages ---------------- */
.pss-article { padding: 3rem 0 4rem; }
.pss-article__inner { max-width: 720px; margin: 0 auto; }
.pss-article h1 { font-size: 2.1rem; font-weight: 800; margin: 0 0 1rem; }

/* ---------------- Footer ---------------- */
.pss-sitefooter { background: var(--pss-primary-dark); color: rgba(255,255,255,.8); margin-top: 2rem; border-top: 3px solid var(--pss-accent); }
.pss-sitefooter__grid { display: grid; grid-template-columns: 1.8fr 1fr 1.2fr 1fr 1fr; gap: 2.75rem 1.75rem; padding: 3.75rem 1.5rem; }
.pss-sitefooter .pss-brand { margin-bottom: 1.2rem; }
/* Footer column titles are <h2>s (an <h4> skipped heading levels on every
   page); the class sets every property that differs from an h4, so they look the same. */
.pss-sitefooter__heading { color: #fff; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 1.15rem; }
.pss-sitefooter__col ul { list-style: none; padding: 0; margin: 0; }
.pss-sitefooter__col li { margin-bottom: .75rem; }
.pss-sitefooter__col a { color: rgba(255,255,255,.8); font-size: .9rem; }
.pss-sitefooter__col a:hover { color: #fff; }
.pss-sitefooter__col p { color: rgba(255,255,255,.7); font-size: .9rem; }
.pss-sitefooter__bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 1.25rem 0; }
.pss-sitefooter__bottom p { font-size: .78rem; color: rgba(255,255,255,.55); margin: .2rem 0; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1000px) {
  .pss-sitenav { display: none; }
  .pss-menu-btn { display: inline-flex; }
  .is-menu-open .pss-mobile-nav { display: flex; }
  .pss-hero__inner { grid-template-columns: 1fr; gap: 2rem; }
  .pss-hero__diagram { order: -1; }
  .pss-values__grid { grid-template-columns: 1fr 1fr; }
  .pss-steps__list { grid-template-columns: 1fr; }
  .pss-sitefooter__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .pss-topfull { display: none; }
  .pss-topcompact { display: inline; }
  .pss-siteheader__topinner { padding: .4rem 1rem; }
  .pss-siteheader__inner { gap: .5rem; padding: .7rem 1rem; }
  .pss-brand__text small { display: none; }
  .pss-cart-link__text { display: none; }
  .pss-hero { padding: 2.5rem 0 3rem; }
  .pss-hero__title { font-size: 1.85rem; }
  .pss-finder__row { grid-template-columns: 1fr; }
  .pss-finder__go { width: 100%; }
  .pss-values__grid { grid-template-columns: 1fr; }
  .pss-sitefooter__grid { grid-template-columns: 1fr; }
}

/* ---------------- Sizing configurator ---------------- */
.pss-configurator { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--pss-border); border-radius: var(--pss-radius-lg); padding: 1.75rem; box-shadow: var(--pss-shadow); }
.pss-config__inputs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: end; }
.pss-config__field { display: flex; flex-direction: column; gap: .4rem; }
.pss-config__field label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pss-primary); }
.pss-config__field select {
  padding: .85rem 1rem; border: 2px solid var(--pss-border-strong); border-radius: var(--pss-radius);
  font-size: 1.05rem; font-weight: 600; color: var(--pss-ink); background: #fff; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2319283f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.pss-config__field select:focus { outline: none; border-color: var(--pss-primary); box-shadow: 0 0 0 4px var(--pss-primary-light); }
.pss-config__field select:disabled { background-color: var(--pss-bg); color: var(--pss-ink-muted); cursor: not-allowed; }
.pss-config__arrow { color: var(--pss-ink-muted); font-size: 1.4rem; padding-bottom: .7rem; }
.pss-config__hint { text-align: center; margin: 1.25rem 0 0; font-size: .9rem; color: var(--pss-ink-muted); }

.pss-config__result { margin-top: 1.5rem; padding: 1.5rem; border: 1px solid var(--pss-border); border-left: 4px solid var(--pss-accent); border-radius: var(--pss-radius); background: var(--pss-bg); }
.pss-result__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; }
.pss-result__sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; font-weight: 700; color: var(--pss-ink-muted); letter-spacing: .03em; }
.pss-result__name { font-size: 1.15rem; margin: .2rem 0 0; }
.pss-result__price { font-size: 1.7rem; font-weight: 800; color: var(--pss-primary); white-space: nowrap; text-align: right; }
.pss-result__price small { display: block; font-size: .65rem; font-weight: 500; color: var(--pss-ink-muted); text-transform: uppercase; letter-spacing: .05em; }
.pss-result__band { font-size: .85rem; color: var(--pss-ink-soft); margin: .5rem 0 0; }
.pss-result__cart { margin-top: 1.25rem; }
.pss-result__cart .pss-btn { width: 100%; }

.pss-pill { display: inline-block; font-size: .82rem; font-weight: 700; padding: .35rem .8rem; border-radius: 999px; }
.pss-pill--stock { background: #dcfce7; color: #15803d; }
.pss-pill--order { background: #fef3c7; color: #b45309; }

@media (max-width: 640px) {
  .pss-config__inputs { grid-template-columns: 1fr; gap: .85rem; }
  .pss-config__arrow { display: none; }
  .pss-result__head { flex-direction: column; }
  .pss-result__price { text-align: left; }
}

/* ---------------- Homepage finder dropdowns ---------------- */
.pss-finder__field select {
  padding: .8rem .9rem; padding-right: 2.4rem;
  border: 2px solid var(--pss-border-strong); border-radius: var(--pss-radius);
  font-size: 1rem; font-weight: 600; color: var(--pss-ink); background-color: #fff;
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2319283f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center;
}
.pss-finder__field select:focus { outline: none; border-color: var(--pss-primary); box-shadow: 0 0 0 4px var(--pss-primary-light); }
.pss-finder__field select:disabled { background-color: var(--pss-bg); color: var(--pss-ink-muted); cursor: not-allowed; }

/* ---------------- Hero seal figure + footer logo ---------------- */
.pss-hero__figure { display: flex; justify-content: center; }
.pss-seal-figure { margin: 0; max-width: 440px; width: 100%; }
.pss-seal-figure__img { width: 100%; height: auto; display: block; background: #fff; border-radius: var(--pss-radius-lg); box-shadow: var(--pss-shadow-lg); }
.pss-seal-figure__cap { margin: .9rem 0 0; font-size: .85rem; color: rgba(255,255,255,.82); text-align: center; }

/* ---------------- Representative product photo ----------------
   PSS parts have no photos of their own, so product pages and line items
   show one genuine Type A photo (PssSealsTheme::ProductImage). */
.pss-product-figure { margin: 0; }
.pss-product-figure__img { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--pss-border); border-radius: var(--pss-radius-lg); }
/* --pss-ink-soft is 7.5:1 on white and 6.6:1 on the page background (WCAG
   AA needs 4.5:1 for this small text); --pss-ink-muted was 3.4:1. */
.pss-product-figure__cap { margin: .75rem 0 0; font-size: .85rem; color: var(--pss-ink-soft); text-align: center; }
/* Cart / checkout thumbnail. Floats beside the cart's product cell text;
   inside the checkout summary's flex row the float is simply ignored. */
.pss-line-thumb { float: left; width: 56px; height: 56px; margin: 0 .75rem .25rem 0; object-fit: contain; background: #fff; border: 1px solid var(--pss-border); border-radius: var(--pss-radius-sm); flex-shrink: 0; }

.pss-footer-contact { margin: 1.4rem 0 0; }
.pss-sitefooter .pss-footer-phone { display: inline-flex; align-items: center; gap: .55rem; color: #fff !important; font-weight: 800; font-size: 1.2rem; letter-spacing: .01em; }
.pss-footer-phone svg { color: var(--pss-accent); }
.pss-footer-phone:hover { color: var(--pss-accent) !important; }
.pss-footer-contact__sub { display: block; margin-top: .45rem; font-size: .82rem; color: rgba(255,255,255,.6); }
.pss-footer-contact__sub a { color: rgba(255,255,255,.82); }
.pss-footer-contact__sub a:hover { color: #fff; }

.pss-footer-by { margin-top: 1.85rem; }
.pss-footer-by__label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.5); margin-bottom: .6rem; }
.pss-footer-by__logo { display: inline-block; background: #fff; border-radius: var(--pss-radius); padding: .7rem 1rem; line-height: 0; }
.pss-footer-by__img { height: 40px; width: auto; display: block; }

/* ---------------- Shaft -> seals list selector ---------------- */
.pss-finder__row--single { grid-template-columns: 1fr auto; }
@media (max-width: 640px) {
  .pss-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .pss-hero__copy, .pss-hero__figure, .pss-finder__field { min-width: 0; }
  .pss-finder__row--single { grid-template-columns: minmax(0, 1fr); }
  .pss-finder__field select { width: 100%; min-width: 0; }
}

.pss-selector { max-width: 880px; margin: 0 auto; }
.pss-selector__shaft { max-width: 420px; margin: 0 auto 1.75rem; display: flex; flex-direction: column; gap: .45rem; }
.pss-selector__shaft label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pss-primary); }
.pss-selector__shaft select {
  padding: .9rem 1rem; padding-right: 2.5rem; border: 2px solid var(--pss-border-strong); border-radius: var(--pss-radius);
  font-size: 1.1rem; font-weight: 600; color: var(--pss-ink); background-color: #fff; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2319283f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.pss-selector__shaft select:focus { outline: none; border-color: var(--pss-primary); box-shadow: 0 0 0 4px var(--pss-primary-light); }
.pss-selector__placeholder { text-align: center; color: var(--pss-ink-muted); font-size: 1rem; padding: 1.5rem 0; }
.pss-selector__lead { font-size: 1.05rem; margin: 0 0 1rem; color: var(--pss-ink-soft); }
.pss-selector__lead strong { color: var(--pss-ink); }
.pss-selector__note { font-size: .9rem; color: var(--pss-ink-muted); margin: 1rem 0 0; }

.pss-seals-table__wrap { overflow-x: auto; border: 1px solid var(--pss-border); border-radius: var(--pss-radius); background: #fff; box-shadow: var(--pss-shadow-sm); }
.pss-seals-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 580px; }
.pss-seals-table thead th { text-align: left; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--pss-primary); padding: .8rem 1rem; border-bottom: 3px solid var(--pss-accent); }
.pss-seals-table thead th:last-child { text-align: right; }
.pss-seals-table tbody td { padding: .85rem 1rem; border-top: 1px solid var(--pss-border); vertical-align: middle; }
.pss-seals-table tbody tr:hover { background: var(--pss-primary-light); }
.pss-seals-table__st strong { font-size: 1.05rem; color: var(--pss-ink); }
.pss-seals-table__sku { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; color: var(--pss-ink-muted); margin-top: 2px; }
.pss-seals-table__fit { white-space: nowrap; }
.pss-fit__in { display: block; font-weight: 700; color: var(--pss-ink); font-size: 1.05rem; line-height: 1.3; }
.pss-fit__mm { display: block; font-weight: 600; color: var(--pss-accent); font-size: .8rem; margin-top: 1px; }
.pss-seals-table__price { font-weight: 700; color: var(--pss-ink); white-space: nowrap; }
.pss-seals-table__price span { display: block; font-size: .68rem; font-weight: 400; color: var(--pss-ink-muted); text-transform: uppercase; }
.pss-seals-table__add { text-align: right; }
.pss-seals-table__add .pss-btn { padding: .55rem 1.1rem; font-size: .9rem; }
.pss-tag { display: inline-block; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--pss-accent-dark); background: #fbe9e9; padding: .15rem .45rem; border-radius: var(--pss-radius-sm); vertical-align: middle; margin-left: .35rem; }
.pss-sr { position: absolute; left: -9999px; }

/* ---------------- Results as cards on phones ----------------
   The finder results and the size chart opt in with .pss-seals-table--cards
   (+ __wrap--cards). Desktop keeps the table exactly as above; at <= 640px
   each row becomes a stacked card, so price, availability and a full-width
   Add button are on screen with no sideways scrolling (the 580px table used
   to push them off a 375px phone). The comparison tables on the content
   pages don't opt in and are unchanged.
   Card-only labels (.pss-seals-table__label) are aria-hidden in the markup;
   the column headings stay in the accessibility tree. */
.pss-seals-table__label { display: none; }
/* " to cart" on the finder's Add button: read by screen readers everywhere,
   shown to sighted users only on the roomier phone button. */
.pss-seals-table__addmore { position: absolute; left: -9999px; }

@media (max-width: 640px) {
  .pss-seals-table__wrap--cards { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .pss-seals-table--cards { display: block; min-width: 0; }
  .pss-seals-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .pss-seals-table--cards tbody { display: grid; gap: .85rem; }
  .pss-seals-table--cards tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem 1rem;
    grid-template-areas: "st price" "fit fit" "avail avail" "add add";
    padding: 1rem 1.1rem 1.1rem; background: #fff;
    border: 1px solid var(--pss-border); border-left: 4px solid var(--pss-accent);
    border-radius: var(--pss-radius); box-shadow: var(--pss-shadow-sm);
  }
  .pss-seals-table--cards tbody tr:hover { background: #fff; }
  .pss-seals-table--cards tbody td { display: block; min-width: 0; padding: 0; border: 0; }
  .pss-seals-table--cards .pss-seals-table__label { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pss-ink-muted); margin-bottom: .15rem; }
  /* Size cell wraps as a flex row so the OVERSIZED tag lines up neatly when
     a narrow phone pushes it under the size. */
  .pss-seals-table--cards td.pss-seals-table__st,
  .pss-seals-table--cards td.pss-sizes-table__st { display: flex; flex-wrap: wrap; align-items: center; column-gap: .45rem; }
  .pss-seals-table--cards td.pss-seals-table__st .pss-seals-table__label,
  .pss-seals-table--cards td.pss-sizes-table__st .pss-seals-table__label,
  .pss-seals-table--cards td.pss-seals-table__st .pss-seals-table__sku { flex-basis: 100%; }
  .pss-seals-table--cards .pss-tag { margin-left: 0; }

  /* Finder card: size + price, fit range, availability, Add to cart. */
  .pss-seals-table--cards td.pss-seals-table__st { grid-area: st; }
  .pss-seals-table--cards td.pss-seals-table__st strong { font-size: 1.3rem; line-height: 1.2; }
  .pss-seals-table--cards td.pss-seals-table__price { grid-area: price; align-self: start; text-align: right; font-size: 1.2rem; }
  .pss-seals-table--cards td.pss-seals-table__fit { grid-area: fit; white-space: normal; padding-top: .75rem; border-top: 1px solid var(--pss-border); }
  .pss-seals-table--cards td.pss-seals-table__fit .pss-fit__in,
  .pss-seals-table--cards td.pss-seals-table__fit .pss-fit__mm { display: inline-block; margin: 0 .6rem 0 0; }
  .pss-seals-table--cards td.pss-seals-table__avail { grid-area: avail; }
  .pss-seals-table--cards td.pss-seals-table__add { grid-area: add; text-align: left; }
  .pss-seals-table--cards td.pss-seals-table__add form { margin: 0; }
  .pss-seals-table--cards td.pss-seals-table__add .pss-btn { width: 100%; min-height: 48px; padding: .8rem 1rem; font-size: 1rem; }
  .pss-seals-table__addmore { position: static; }

  /* Size chart card: size + price, part number, fit range, availability. */
  .pss-sizes-table tbody tr { grid-template-areas: "st price" "sku sku" "fit fit" "avail avail"; }
  .pss-seals-table--cards td.pss-sizes-table__st { grid-area: st; }
  .pss-seals-table--cards td.pss-sizes-table__st strong { font-size: 1.3rem; line-height: 1.2; }
  .pss-seals-table--cards td.pss-sizes-table__sku { grid-area: sku; margin-top: -.5rem; font-size: .8rem; }
  .pss-seals-table--cards td.pss-sizes-table__sku code { white-space: nowrap; }
  .pss-seals-table--cards td.pss-sizes-table__sku .pss-seals-table__label { display: inline; margin-right: .35rem; }
  .pss-seals-table--cards td.pss-sizes-table__price { grid-area: price; align-self: start; text-align: right; font-weight: 700; font-size: 1.2rem; white-space: nowrap; color: var(--pss-ink); }
  .pss-seals-table--cards td.pss-sizes-table__price .pss-seals-table__label { margin: .1rem 0 0; }
  .pss-seals-table--cards td.pss-sizes-table__fit { grid-area: fit; padding-top: .75rem; border-top: 1px solid var(--pss-border); font-weight: 600; color: var(--pss-ink); }
  .pss-seals-table--cards td.pss-sizes-table__avail { grid-area: avail; }
}

/* ---------------- Sizes & prices chart (/pss-shaft-seal-sizes) ---------------- */
.pss-sizes__shaft { text-align: center; font-size: 1.25rem; margin: 2.25rem 0 .75rem; }
.pss-sizes__shaft a { font-size: .85rem; font-weight: 600; }
/* The header is sticky, so an in-page link such as a product breadcrumb to
   /pss-shaft-seal-sizes#shaft-25mm or /how-it-works#measure would otherwise
   land its heading underneath it. Below 1001px the header's top bar wraps
   on some widths and the header measures 100-149px; above that it is one
   row each, about 115px. These leave roughly 20-70px clear below it.
   This file is only linked from the PSS layout. */
html { scroll-padding-top: 10.5rem; }
@media (min-width: 1001px) { html { scroll-padding-top: 8.5rem; } }

/* ---------------- Seal finder guide (sizing/index) ---------------- */
.pss-finder-shafts { padding-left: 1.25rem; margin: 0 0 1rem; color: var(--pss-ink-soft); }
.pss-finder-guide { margin-top: 3rem; }
.pss-finder-shafts { columns: 2 16rem; column-gap: 2rem; }
.pss-finder-shafts li { break-inside: avoid; margin: 0 0 .35rem; }

/* ---------------- Product page (shared/_product_detail) ----------------
   A white hero with the photo beside the buying panel (title, fit, price,
   add to cart), then the fit check, the other stern-tube sizes for the
   shaft, how the seal is built, delivery and returns, and a call band.
   The grid areas put the title above the photo on phones and beside it
   on desktop, with the H1 first in the markup either way. */
.pss-crumbs { font-size: .9rem; color: var(--pss-ink-soft); margin: 0 0 .75rem; }
.pss-pdp-hero { background: #fff; border-bottom: 1px solid var(--pss-border); padding: 1.5rem 0 3.25rem; }
.pss-pdp-hero .pss-crumbs { margin-bottom: 1.75rem; }
.pss-pdp-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3.5rem;
  grid-template-areas: "media head" "media buy"; grid-template-rows: auto 1fr; align-items: start;
}
.pss-pdp-head { grid-area: head; }
.pss-pdp-media { grid-area: media; position: sticky; top: 8.5rem; }
.pss-pdp-buy { grid-area: buy; display: flex; flex-direction: column; }

.pss-pdp-head__eyebrow { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pss-accent-dark); background: #fbe9e9; padding: .32rem .75rem; border-radius: 999px; margin: 0 0 .9rem; }
.pss-pdp-head h1 { font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 .65rem; }
.pss-pdp-head__sku { font-size: .9rem; color: var(--pss-ink-soft); margin: 0 0 1.1rem; }
.pss-pdp-head__sku strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88rem; color: var(--pss-ink); background: var(--pss-bg); border: 1px solid var(--pss-border); padding: .12rem .45rem; border-radius: var(--pss-radius-sm); }

.pss-pdp-media .pss-product-figure__img,
.pss-pdp-media__frame { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: 1.75rem; background: #fff; border: 1px solid var(--pss-border); border-radius: var(--pss-radius-lg); box-shadow: var(--pss-shadow); }
.pss-pdp-media__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pss-pdp-media__facts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; padding: 0; margin: 1rem 0 0; }
.pss-pdp-media__facts li { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; color: var(--pss-ink-soft); background: var(--pss-bg); border-radius: 999px; padding: .3rem .7rem .3rem .55rem; }
.pss-pdp-media__facts svg { color: var(--pss-success); flex: none; }

.pss-pdp-buy .pss-product-lede { font-size: 1.02rem; color: var(--pss-ink-soft); margin: 0 0 1.35rem; }
.pss-pdp-sizes { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, .85fr) minmax(0, 1.3fr); gap: .6rem; margin: 0 0 1.35rem; }
.pss-pdp-size { background: var(--pss-primary-light); border-radius: var(--pss-radius); padding: .8rem .9rem; }
.pss-pdp-size dt { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pss-ink-soft); }
.pss-pdp-size dd { margin: .2rem 0 0; font-size: 1.2rem; font-weight: 800; line-height: 1.2; color: var(--pss-ink); }
.pss-pdp-size--fit dd { font-size: 1.1rem; }
.pss-pdp-size dd small { display: block; margin-top: .2rem; font-size: .78rem; font-weight: 600; color: var(--pss-accent-dark); }

.pss-pdp-switch { margin: 0 0 1.5rem; }
.pss-pdp-switch__label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pss-ink-soft); margin: 0 0 .55rem; }
.pss-pdp-switch__list { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 0; }
.pss-pdp-switch__chip { display: inline-flex; align-items: center; min-height: 42px; padding: .4rem .9rem; border: 2px solid var(--pss-border-strong); border-radius: var(--pss-radius); background: #fff; font-size: .95rem; font-weight: 700; color: var(--pss-ink) !important; }
a.pss-pdp-switch__chip:hover { border-color: var(--pss-primary); background: var(--pss-primary-light); }
.pss-pdp-switch__chip.is-current { background: var(--pss-primary); border-color: var(--pss-primary); color: #fff !important; }
.pss-pdp-switch__chip.is-disabled { color: var(--pss-ink-muted) !important; border-style: dashed; }

.pss-pdp-offer { background: #fff; border: 1px solid var(--pss-border); border-radius: var(--pss-radius-lg); box-shadow: var(--pss-shadow); padding: 1.4rem 1.5rem 1.5rem; }
.pss-pdp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; margin: 0 0 .8rem; }
.pss-pdp-price__amount { font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--pss-ink); }
.pss-pdp-price__note { font-size: .88rem; color: var(--pss-ink-soft); }
.pss-pdp-stock { margin: 0 0 1.2rem; }
.pss-pdp-stock p { margin: .55rem 0 0; font-size: .9rem; color: var(--pss-ink-soft); }
.pss-pdp-cart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: end; }
.pss-pdp-qty { display: flex; flex-direction: column; gap: .3rem; }
.pss-pdp-qty label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pss-ink-soft); }
.pss-pdp-qty input { width: 5.5rem; height: 3.25rem; padding: 0 .5rem; border: 2px solid var(--pss-border-strong); border-radius: var(--pss-radius); font: inherit; font-size: 1.05rem; font-weight: 700; color: var(--pss-ink); text-align: center; background: #fff; }
.pss-pdp-qty input:focus { outline: none; border-color: var(--pss-primary); box-shadow: 0 0 0 4px var(--pss-primary-light); }
.pss-pdp-cart__add { width: 100%; height: 3.25rem; font-size: 1.05rem; }
.pss-pdp-offer__poa { margin: 0; font-weight: 700; }
.pss-pdp-assure { list-style: none; display: grid; gap: .7rem; padding: 1.15rem 0 0; margin: 1.25rem 0 0; border-top: 1px solid var(--pss-border); }
.pss-pdp-assure li { display: flex; align-items: flex-start; gap: .7rem; font-size: .9rem; color: var(--pss-ink-soft); }
.pss-pdp-assure svg { flex: none; margin-top: .05rem; color: var(--pss-accent); }
.pss-pdp-assure strong, .pss-pdp-assure a { color: var(--pss-ink); font-weight: 700; }
.pss-pdp-assure a:hover { color: var(--pss-accent); }

/* Sections below the hero */
.pss-pdp-section { padding: 3.75rem 0 0; }
.pss-pdp-section__head { max-width: 720px; margin: 0 0 1.6rem; }
.pss-pdp-section__head h2 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.pss-pdp-section__head h2::after { content: ""; display: block; width: 48px; height: 4px; margin-top: .7rem; background: var(--pss-accent); border-radius: 2px; }
.pss-pdp-section__head p { margin: 1rem 0 0; font-size: 1.02rem; }
.pss-pdp-section__more { margin: 1.1rem 0 0; font-size: .95rem; }
.pss-pdp-card { background: #fff; border: 1px solid var(--pss-border); border-radius: var(--pss-radius-lg); box-shadow: var(--pss-shadow-sm); padding: 1.6rem; }
.pss-pdp-card h3 { font-size: 1.15rem; font-weight: 800; margin: 0 0 1rem; }
.pss-pdp-fit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }

.pss-spec-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.pss-spec-table caption { text-align: left; font-size: 1.15rem; font-weight: 800; color: var(--pss-ink); padding: 0 0 1rem; }
.pss-spec-table th, .pss-spec-table td { text-align: left; vertical-align: top; padding: .75rem .9rem; border-top: 1px solid var(--pss-border); }
.pss-spec-table tr:last-child th, .pss-spec-table tr:last-child td { border-bottom: 1px solid var(--pss-border); }
.pss-spec-table tr:nth-child(odd) { background: #f6f7f9; }
.pss-spec-table th { width: 46%; font-weight: 600; color: var(--pss-ink-soft); }
.pss-spec-table td { font-weight: 700; color: var(--pss-ink); }

.pss-pdp-diagram { margin: 0 0 1.4rem; padding: .9rem 1rem .5rem; background: #f6f7f9; border-radius: var(--pss-radius); }
.pss-pdp-diagram svg { display: block; width: 100%; height: auto; max-width: 440px; margin: 0 auto; }
.pss-pdp-diagram__label { font: 600 12px var(--pss-font); fill: var(--pss-ink-soft); }
.pss-pdp-diagram__text { font: 700 13px var(--pss-font); fill: var(--pss-ink); }
.pss-pdp-diagram__num { font: 800 12px var(--pss-font); fill: #fff; }
.pss-product-steps { list-style: none; counter-reset: pss-measure; display: grid; gap: .9rem; padding: 0; margin: 0 0 1.1rem; }
.pss-product-steps li { counter-increment: pss-measure; position: relative; padding-left: 2.6rem; font-size: .95rem; color: var(--pss-ink-soft); }
.pss-product-steps li::before { content: counter(pss-measure); position: absolute; left: 0; top: -.1rem; display: flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; border-radius: 999px; background: var(--pss-accent); color: #fff; font-size: .85rem; font-weight: 800; }
.pss-product-steps strong { color: var(--pss-ink); }
.pss-pdp-measure__more { margin: 0; font-size: .92rem; }
.pss-pdp-measure__more + .pss-pdp-measure__more { margin-top: .75rem; }

/* Sizes for the same shaft: the finder's table (and its phone cards). */
.pss-pdp-sizes-table .pss-fit__in { font-size: 1rem; }
.pss-pdp-sizes-table tbody tr.is-current { background: var(--pss-primary-light); box-shadow: inset 4px 0 0 var(--pss-accent); }
.pss-pdp-sizes-table .pss-seals-table__add .pss-btn { padding: .5rem 1.1rem; font-size: .88rem; }
.pss-pdp-current { display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--pss-primary); background: #fff; border: 2px solid var(--pss-primary); border-radius: 999px; padding: .3rem .75rem; white-space: nowrap; }

.pss-pdp-parts { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 0 0 1.25rem; }
.pss-pdp-part { background: #fff; border: 1px solid var(--pss-border); border-top: 3px solid var(--pss-accent); border-radius: var(--pss-radius); box-shadow: var(--pss-shadow-sm); padding: 1.35rem; }
.pss-pdp-part h3 { font-size: 1.02rem; margin: 0 0 .5rem; }
.pss-pdp-part p { font-size: .9rem; margin: 0; }
.pss-pdp-note { display: flex; align-items: flex-start; gap: .9rem; background: #fff; border: 1px solid var(--pss-border); border-left: 4px solid var(--pss-primary); border-radius: var(--pss-radius); padding: 1.1rem 1.3rem; }
.pss-pdp-note__icon { flex: none; color: var(--pss-primary); margin-top: .1rem; }
.pss-pdp-note p { margin: 0; font-size: .95rem; }

.pss-pdp-delivery { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 0; }
.pss-pdp-deliv { display: flex; align-items: flex-start; gap: 1rem; background: #fff; border: 1px solid var(--pss-border); border-radius: var(--pss-radius); box-shadow: var(--pss-shadow-sm); padding: 1.25rem 1.35rem; }
.pss-pdp-deliv__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: var(--pss-radius); background: var(--pss-primary-light); color: var(--pss-primary); }
.pss-pdp-deliv h3 { font-size: 1rem; margin: 0 0 .3rem; }
.pss-pdp-deliv p { font-size: .9rem; margin: 0; }
.pss-pdp-deliv strong { color: var(--pss-ink); }

/* The negative bottom margin cancels the footer's 2rem top margin, so the
   band meets the footer's red top border instead of leaving a grey strip. */
.pss-pdp-cta { background: linear-gradient(160deg, var(--pss-primary) 0%, var(--pss-primary-dark) 100%); color: #fff; padding: 3.25rem 0; margin: 4.5rem 0 -2rem; }
.pss-pdp-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; }
.pss-pdp-cta h2 { color: #fff; font-size: 1.6rem; font-weight: 800; margin: 0 0 .5rem; }
.pss-pdp-cta p { color: rgba(255,255,255,.88); margin: 0; max-width: 56ch; }
.pss-pdp-cta__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.pss-pdp-cta__actions .pss-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.pss-pdp-cta__call { background: rgba(255,255,255,.06); color: #fff !important; border-color: rgba(255,255,255,.55); }
.pss-pdp-cta__call:hover { background: #fff; color: var(--pss-primary-dark) !important; border-color: #fff; }

@media (max-width: 1000px) {
  .pss-pdp-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "buy"; grid-template-rows: none; }
  .pss-pdp-media { position: static; width: 100%; max-width: 420px; margin: 0 auto 1.75rem; }
  .pss-pdp-fit { grid-template-columns: minmax(0, 1fr); }
  .pss-pdp-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pss-pdp-hero { padding: 1rem 0 2.25rem; }
  .pss-pdp-hero .pss-crumbs { margin-bottom: 1rem; font-size: .85rem; }
  .pss-pdp-head h1 { font-size: 1.6rem; }
  /* Phones: a smaller photo, and the fit, price and Add to cart before the
     long description, so the buying panel is not three screens down. */
  .pss-pdp-media { max-width: 230px; margin-bottom: 1.25rem; }
  .pss-pdp-media .pss-product-figure__img, .pss-pdp-media__frame { padding: .75rem; }
  .pss-pdp-media__facts { display: none; }
  .pss-pdp-buy .pss-product-lede { order: 1; margin: 1.25rem 0 0; }
  .pss-pdp-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pss-pdp-size--fit { grid-column: 1 / -1; }
  .pss-pdp-offer { padding: 1.15rem; }
  .pss-pdp-price__amount { font-size: 1.9rem; }
  .pss-pdp-section { padding-top: 2.75rem; }
  .pss-pdp-section__head h2 { font-size: 1.45rem; }
  .pss-pdp-card { padding: 1.2rem; }
  .pss-spec-table th, .pss-spec-table td { padding: .65rem .6rem; }
  .pss-pdp-parts, .pss-pdp-delivery { grid-template-columns: minmax(0, 1fr); }
  .pss-pdp-sizes-table.pss-seals-table--cards tbody tr.is-current { background: var(--pss-primary-light); box-shadow: none; border-left-color: var(--pss-primary); }
  .pss-pdp-cta { margin-top: 3rem; padding: 2.5rem 0; }
  .pss-pdp-cta__actions { width: 100%; }
  .pss-pdp-cta__actions .pss-btn { width: 100%; }
}

/* ============================================================
   Content pages — How It Works, Installation, About, Contact
   ============================================================ */
/* ---------------- How It Works & Measuring page ---------------- */
.pss-hiw-herocta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.1rem; }
.pss-hiw-herocta__ghost { background: rgba(255,255,255,.06); color: #fff !important; border-color: rgba(255,255,255,.45); }
.pss-hiw-herocta__ghost:hover { border-color: #fff; color: #fff !important; }
.pss-hiw-herohint { font-size: .9rem; color: rgba(255,255,255,.8); margin: 0; }
.pss-hiw-herohint a { color: #fff; font-weight: 700; text-decoration: underline; }
.pss-hiw-herohint a:hover { color: var(--pss-accent); }

.pss-hiw-lead { max-width: 62ch; margin: 0 auto 2rem; font-size: 1.1rem; color: var(--pss-ink-soft); text-align: center; }
.pss-hiw-lead strong { color: var(--pss-ink); }
.pss-hiw-lead--centre { margin-top: -1rem; }

.pss-hiw-why { padding-top: .5rem; background: var(--pss-primary-light); }

/* "Why a range" explainer band */
.pss-hiw-band {
  display: flex; gap: 1.25rem; align-items: flex-start;
  max-width: 880px; margin: 2.5rem auto 0; padding: 1.5rem 1.75rem;
  background: #fff; border: 1px solid var(--pss-border); border-left: 4px solid var(--pss-accent);
  border-radius: var(--pss-radius); box-shadow: var(--pss-shadow-sm);
}
.pss-hiw-band__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--pss-radius); background: #fff; color: var(--pss-accent); box-shadow: var(--pss-shadow-sm); }
.pss-hiw-band__body h3 { font-size: 1.1rem; margin: 0 0 .5rem; }
.pss-hiw-band__body p { font-size: .95rem; margin: 0; }
.pss-hiw-band__body strong { color: var(--pss-ink); }

.pss-hiw-meas { display: inline-flex; flex-direction: column; vertical-align: middle; line-height: 1.1; margin: 0 .15rem; }
.pss-hiw-meas__mm { color: var(--pss-accent); }
.pss-hiw-meas__in { font-size: .75rem; color: var(--pss-ink-muted); font-weight: 400; }

/* Final reassurance CTA band */
.pss-hiw-cta { background: linear-gradient(160deg, var(--pss-primary) 0%, var(--pss-primary-dark) 100%); color: #fff; padding: 4rem 0; margin-top: 2rem; }
.pss-hiw-cta__inner { max-width: 680px; margin: 0 auto; text-align: center; }
.pss-hiw-cta h2 { color: #fff; font-size: 1.9rem; font-weight: 800; margin: 1rem 0 .75rem; }
.pss-hiw-cta p { color: rgba(255,255,255,.9); font-size: 1.05rem; margin: 0 auto 1.5rem; max-width: 56ch; }
.pss-hiw-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.pss-hiw-cta__call { background: rgba(255,255,255,.06); color: #fff !important; border-color: rgba(255,255,255,.55); }
.pss-hiw-cta__call:hover { background: #fff; color: var(--pss-primary-dark) !important; border-color: #fff; }
.pss-hiw-cta__meta { font-size: .9rem; color: rgba(255,255,255,.75); margin: 1.75rem auto 0; }
.pss-hiw-cta__meta a { color: #fff; font-weight: 600; text-decoration: underline; }
.pss-hiw-cta__meta a:hover { color: var(--pss-accent); }

@media (max-width: 640px) {
  .pss-hiw-band { flex-direction: column; gap: .85rem; padding: 1.35rem; }
  .pss-hiw-cta { padding: 3rem 0; }
  .pss-hiw-cta h2 { font-size: 1.6rem; }
  .pss-hiw-cta__actions .pss-btn { width: 100%; }
}
/* ============================================================
   Installation guide page (.pss-install-*)
   ============================================================ */

/* Safety callout */
.pss-install-safety {
  display: flex;
  gap: 1.1rem;
  background: #fbe9e9;
  border: 1px solid var(--pss-accent);
  border-left: 5px solid var(--pss-accent);
  border-radius: var(--pss-radius);
  padding: 1.4rem 1.5rem;
  margin: 2rem 0 .5rem;
  box-shadow: var(--pss-shadow-sm);
}
.pss-install-safety__icon { flex-shrink: 0; color: var(--pss-accent-dark); line-height: 0; padding-top: .1rem; }
.pss-install-safety__title { font-size: 1.15rem; font-weight: 800; color: var(--pss-accent-dark); margin: 0 0 .6rem; }
.pss-install-safety__list { margin: 0; padding-left: 1.1rem; }
.pss-install-safety__list li { margin-bottom: .5rem; color: var(--pss-ink-soft); font-size: .95rem; }
.pss-install-safety__list li:last-child { margin-bottom: 0; }
.pss-install-safety__list strong { color: var(--pss-ink); }

/* Section sub-heading inside article prose */
.pss-install-h2 { font-size: 1.5rem; font-weight: 800; margin: 2.5rem 0 .85rem; }

/* Compression / torque chart */
.pss-install-chart__wrap {
  overflow-x: auto;
  border: 1px solid var(--pss-border);
  border-radius: var(--pss-radius);
  background: var(--pss-surface);
  box-shadow: var(--pss-shadow-sm);
  margin: 1rem 0 .5rem;
}
.pss-install-chart { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 480px; }
.pss-install-chart thead th {
  text-align: left; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: #fff; background: var(--pss-primary); padding: .8rem 1rem; border-bottom: 3px solid var(--pss-accent);
}
.pss-install-chart tbody td { padding: .9rem 1rem; border-top: 1px solid var(--pss-border); color: var(--pss-ink-soft); vertical-align: middle; }
.pss-install-chart tbody td strong { color: var(--pss-accent-dark); font-size: 1.02rem; }
.pss-install-chart tbody tr:hover { background: var(--pss-primary-light); }
.pss-install-chart__note { font-size: .88rem; color: var(--pss-ink-muted); margin: .75rem 0 0; }

/* Guide disclaimer note */
.pss-install-guidenote {
  background: var(--pss-primary-light);
  border: 1px solid var(--pss-border);
  border-left: 4px solid var(--pss-primary);
  border-radius: var(--pss-radius);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0 0;
}
.pss-install-guidenote p { margin: 0; font-size: .95rem; }

/* Final CTA block */
.pss-install-cta {
  background: linear-gradient(160deg, var(--pss-primary) 0%, var(--pss-primary-dark) 100%);
  color: #fff;
  padding: 3.5rem 0;
  border-top: 3px solid var(--pss-accent);
}
.pss-install-cta__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.pss-install-cta__title { font-size: 1.9rem; font-weight: 800; color: #fff; margin: 0 0 .9rem; }
.pss-install-cta__lede { font-size: 1.08rem; color: rgba(255,255,255,.9); margin: 0 auto 1.75rem; max-width: 52ch; }
.pss-install-cta__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.pss-install-cta__hours { font-size: .85rem; color: rgba(255,255,255,.7); margin: 1.5rem 0 0; }

@media (max-width: 640px) {
  .pss-install-safety { flex-direction: column; gap: .6rem; }
  .pss-install-cta__actions .pss-btn { width: 100%; }
}
/* ---------------- Contact page ---------------- */
.pss-contact { padding: 1rem 0 4rem; }
.pss-contact__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 2.5rem; align-items: start; }

/* Left column */
.pss-contact__details { display: flex; flex-direction: column; gap: 1.25rem; }

/* Dominant click-to-call block */
.pss-contact-phone {
  display: block; text-align: center;
  background: linear-gradient(160deg, var(--pss-primary) 0%, var(--pss-primary-dark) 100%);
  color: #fff !important; border-radius: var(--pss-radius-lg);
  padding: 2rem 1.5rem; box-shadow: var(--pss-shadow-lg);
  border: 2px solid transparent; transition: transform .1s, border-color .15s;
}
.pss-contact-phone:hover { transform: translateY(-2px); border-color: var(--pss-accent); color: #fff !important; }
.pss-contact-phone__label { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.75); }
.pss-contact-phone__num { display: block; font-size: 2.4rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; margin: .5rem 0 .4rem; color: #fff; }
.pss-contact-phone__hint { display: block; font-size: .88rem; color: rgba(255,255,255,.82); }

/* Secondary contact cards */
.pss-contact-cards { display: flex; flex-direction: column; gap: 1rem; }
.pss-contact-card {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--pss-surface); border: 1px solid var(--pss-border);
  border-left: 3px solid var(--pss-accent); border-radius: var(--pss-radius);
  padding: 1.1rem 1.25rem; box-shadow: var(--pss-shadow-sm);
  color: var(--pss-ink) !important;
}
a.pss-contact-card:hover { border-color: var(--pss-border-strong); border-left-color: var(--pss-accent); box-shadow: var(--pss-shadow); color: var(--pss-ink) !important; }
.pss-contact-card__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--pss-radius); background: var(--pss-primary-light); color: var(--pss-primary); }
.pss-contact-card__body { display: flex; flex-direction: column; gap: .15rem; }
.pss-contact-card__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--pss-ink-muted); }
.pss-contact-card__value { font-size: 1.05rem; font-weight: 700; color: var(--pss-ink); }
.pss-contact-card__link { display: inline-block; margin-top: .35rem; font-size: .9rem; font-weight: 700; color: var(--pss-accent) !important; }
.pss-contact-card__link:hover { color: var(--pss-accent-dark) !important; }
.pss-contact__since { font-size: .85rem; color: var(--pss-ink-muted); margin: .5rem 0 0; }

/* Right column — form */
.pss-contact__formcol {
  background: var(--pss-surface); border: 1px solid var(--pss-border);
  border-top: 3px solid var(--pss-accent); border-radius: var(--pss-radius-lg);
  padding: 1.75rem; box-shadow: var(--pss-shadow);
}
.pss-contact__formtitle { font-size: 1.5rem; font-weight: 800; margin: 0 0 .5rem; }
.pss-contact__formlede { font-size: .92rem; color: var(--pss-ink-soft); margin: 0 0 1.5rem; }

.pss-contact-thanks {
  background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0;
  border-left: 4px solid var(--pss-success); border-radius: var(--pss-radius);
  padding: 1rem 1.25rem; margin: 0 0 1.5rem; font-weight: 600;
}

.pss-contact-form { display: flex; flex-direction: column; gap: 1.1rem; }
.pss-contact-field { display: flex; flex-direction: column; gap: .4rem; }
.pss-contact-field label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pss-ink-soft); }
.pss-contact-req { color: var(--pss-accent); }
.pss-contact-field input,
.pss-contact-field textarea {
  padding: .8rem .9rem; border: 2px solid var(--pss-border-strong); border-radius: var(--pss-radius);
  font-size: 1rem; font-weight: 600; color: var(--pss-ink); background: #fff;
  font-family: inherit; width: 100%;
}
.pss-contact-field textarea { font-weight: 500; resize: vertical; min-height: 7rem; }
.pss-contact-field input::placeholder,
.pss-contact-field textarea::placeholder { color: var(--pss-ink-muted); font-weight: 500; }
.pss-contact-field input:focus,
.pss-contact-field textarea:focus { outline: none; border-color: var(--pss-primary); box-shadow: 0 0 0 4px var(--pss-primary-light); }

.pss-contact-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.pss-contact-submit { width: 100%; margin-top: .25rem; }
.pss-contact-form__note { font-size: .82rem; color: var(--pss-ink-muted); margin: .25rem 0 0; }

/* Honeypot — visually hidden, off-screen */
.pss-contact-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Final CTA */
.pss-contact-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.pss-contact-cta__hint { text-align: center; color: var(--pss-ink-muted); font-size: .9rem; margin: 1.25rem 0 0; }

@media (max-width: 1000px) {
  .pss-contact__grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 640px) {
  .pss-contact-phone__num { font-size: 2rem; }
  .pss-contact-field-row { grid-template-columns: 1fr; }
  .pss-contact__formcol { padding: 1.25rem; }
  .pss-contact-cta .pss-btn { width: 100%; }
}
/* About page — story intro, brands strip and CTA block.
   Reuses .pss-article, .pss-values, .pss-steps, .pss-section-title,
   .pss-eyebrow and .pss-btn; only the below are new. */

.pss-about-eyebrow { margin-bottom: 1rem; }

.pss-about-lede {
  font-size: 1.1rem;
  color: var(--pss-ink-soft);
  margin-bottom: 2rem;
}
.pss-about-lede strong { color: var(--pss-ink); }

.pss-about .pss-article__inner h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 2.5rem 0 .85rem;
}

/* Brands strip */
.pss-about-brands { padding: 1rem 0 3.5rem; }
.pss-about-brands__intro {
  max-width: 640px;
  margin: 0 auto 1.75rem;
  text-align: center;
}
.pss-about-brands__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .85rem;
}
.pss-about-brand {
  background: var(--pss-surface);
  border: 1px solid var(--pss-border);
  border-bottom: 3px solid var(--pss-accent);
  border-radius: var(--pss-radius);
  padding: .85rem 1.6rem;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .01em;
  color: var(--pss-primary);
  box-shadow: var(--pss-shadow-sm);
}

/* CTA block */
.pss-about-cta {
  background: linear-gradient(160deg, var(--pss-primary) 0%, var(--pss-primary-dark) 100%);
  border-radius: var(--pss-radius-lg);
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: var(--pss-shadow-lg);
}
.pss-about-cta__title {
  color: #fff;
  font-size: 1.9rem;
  font-weight: 800;
  margin: 0 0 .75rem;
}
.pss-about-cta__lede {
  color: rgba(255, 255, 255, .9);
  font-size: 1.05rem;
  max-width: 52ch;
  margin: 0 auto 1.75rem;
}
.pss-about-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.pss-about-cta__note {
  margin: 1.5rem 0 0;
  font-size: .9rem;
  color: rgba(255, 255, 255, .75);
}
.pss-about-cta__note a { color: #fff; text-decoration: underline; }
.pss-about-cta__note a:hover { color: #fff; opacity: .85; }

@media (max-width: 640px) {
  .pss-about-cta { padding: 2.25rem 1.25rem; }
  .pss-about-cta__title { font-size: 1.55rem; }
  .pss-about-cta__actions .pss-btn { width: 100%; }
}

/* ---------------- Drivetrain animation (shared/_drivetrain) ----------------
   Spinning parts are seen edge-on: each bolt, set screw and shaft streak is
   a .pss-drive__orbit that rides up the front face on a sine curve and is
   hidden on the way back round, while its .pss-drive__face shrinks towards
   the edges (foreshortening). One period for every orbit keeps the
   drivetrain turning as one; --phase spaces parts round the shaft. */
.pss-drive { --pss-rev: 1.4s; margin: 0; }
.pss-drive__svg { display: block; width: 100%; height: auto; }
.pss-drive__orbit { animation: pss-drive-orbit var(--pss-rev) linear infinite; animation-delay: calc(var(--phase, 0) * var(--pss-rev) * -1); }
.pss-drive__face { transform-box: fill-box; transform-origin: center; animation: pss-drive-face var(--pss-rev) linear infinite; animation-delay: inherit; }
.pss-drive__wave { animation: pss-drive-wave 3.2s ease-in-out infinite; animation-delay: calc(var(--d, 0) * -1.1s); }
.pss-drive.is-paused .pss-drive__orbit, .pss-drive.is-paused .pss-drive__face, .pss-drive.is-paused .pss-drive__wave { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .pss-drive__orbit, .pss-drive__face, .pss-drive__wave { animation-play-state: paused; }
}
@keyframes pss-drive-orbit {
  0% { transform: translateY(calc(var(--r) * -1px)); opacity: 1; animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  49.9% { opacity: 1; }
  50% { transform: translateY(calc(var(--r) * 1px)); opacity: 0; animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  100% { transform: translateY(calc(var(--r) * -1px)); opacity: 0; }
}
@keyframes pss-drive-face {
  0% { transform: scaleY(.15); animation-timing-function: cubic-bezier(.61, 1, .88, 1); }
  25% { transform: scaleY(1); animation-timing-function: cubic-bezier(.12, 0, .39, 0); }
  50%, 100% { transform: scaleY(.15); }
}
@keyframes pss-drive-wave {
  0%, 100% { transform: translateX(0); opacity: .25; }
  50% { transform: translateX(-14px); opacity: .7; }
}
.pss-drive__bed { fill: #d8dce1; }
.pss-drive__hull { fill: #dfe6ee; stroke: #8f9cab; stroke-width: 1.5; }
.pss-drive__num { font: 800 15px var(--pss-font); fill: #fff; }
.pss-drive__label { font: 700 16px var(--pss-font); fill: var(--pss-ink); }
.pss-drive__label--muted { font-weight: 600; fill: var(--pss-ink-soft); }
.pss-drive__legend ol { list-style: none; counter-reset: pss-drive; display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .5rem 1.25rem; padding: 0; margin: 1.25rem 0 0; }
.pss-drive__legend li { counter-increment: pss-drive; display: flex; flex-direction: column; position: relative; padding-left: 2.1rem; font-size: .9rem; line-height: 1.3; }
.pss-drive__legend li::before { content: counter(pss-drive); position: absolute; left: 0; top: .05rem; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--pss-accent); color: #fff; font-size: .78rem; font-weight: 800; }
.pss-drive__legend strong { color: var(--pss-ink); }
.pss-drive__legend span { color: var(--pss-ink-soft); font-size: .84rem; }
/* Below ~720px the drawing is too small for its text labels: the numbered
   badges and the legend carry them instead. */
@media (max-width: 720px) {
  .pss-drive__label { display: none; }
  .pss-drive__badge { transform: scale(1.9); transform-box: fill-box; transform-origin: center; }
}

.pss-selector__placeholder-icon { vertical-align: -3px; margin-right: .25rem; color: var(--pss-accent); }

/* ---------------- Homepage (pages/home) ---------------- */
.pss-hero__trust { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; padding: 0; margin: 1.5rem 0 0; font-size: .88rem; color: rgba(255,255,255,.86); }
.pss-hero__trust li { display: inline-flex; align-items: center; gap: .45rem; }
.pss-hero__trust svg { flex: none; color: #ff8a8a; }
.pss-hero__trust a { color: #fff; font-weight: 700; }
.pss-hero__trust a:hover { color: #fff; text-decoration: underline; }

.pss-home-trust { background: #fff; border-bottom: 1px solid var(--pss-border); }
.pss-home-trust__list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.5rem; margin: 0 auto; padding-top: 1.35rem; padding-bottom: 1.35rem; }
.pss-home-trust__list li { display: flex; align-items: center; gap: .8rem; font-size: .86rem; color: var(--pss-ink-soft); line-height: 1.35; }
.pss-home-trust__list strong { display: block; font-size: .95rem; color: var(--pss-ink); }
.pss-home-trust__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 999px; background: var(--pss-primary-light); color: var(--pss-primary); }

.pss-home-section { padding: 4rem 0 0; }
.pss-home-head { max-width: 720px; margin: 0 auto 2rem; text-align: center; }
.pss-home-head .pss-section-title { margin-bottom: 1rem; }
.pss-home-head p { font-size: 1.05rem; margin: 0; }
.pss-home-more { text-align: center; margin: 1.5rem 0 0; font-size: .95rem; font-weight: 600; }

.pss-home-work__stage { background: linear-gradient(180deg, #fff 0%, #f6f8fb 100%); border: 1px solid var(--pss-border); border-radius: var(--pss-radius-lg); box-shadow: var(--pss-shadow); padding: 1.75rem 1.75rem 1.5rem; }
.pss-home-work__points { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; padding: 0; margin: 1.75rem 0 0; }
.pss-home-work__points li { background: #fff; border: 1px solid var(--pss-border); border-top: 3px solid var(--pss-accent); border-radius: var(--pss-radius); padding: 1.35rem; box-shadow: var(--pss-shadow-sm); }
.pss-home-work__points h3 { font-size: 1.05rem; margin: 0 0 .45rem; }
.pss-home-work__points p { font-size: .92rem; margin: 0; }

.pss-home-shafts { margin: 0 0 1.5rem; }
.pss-home-shafts__title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pss-ink-soft); margin: 0 0 .6rem; }
.pss-home-shafts__list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
.pss-home-shaft { display: inline-flex; flex-direction: column; min-width: 5.6rem; padding: .55rem .85rem; background: #fff; border: 1px solid var(--pss-border); border-radius: var(--pss-radius); box-shadow: var(--pss-shadow-sm); color: var(--pss-ink) !important; transition: border-color .15s, transform .15s; }
.pss-home-shaft strong { font-size: 1.02rem; }
.pss-home-shaft span { font-size: .74rem; color: var(--pss-ink-soft); }
.pss-home-shaft:hover { border-color: var(--pss-primary); transform: translateY(-1px); }
.pss-home-stock { margin-top: 2.5rem; }
.pss-home-stock__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1.5rem; margin: 0 0 1rem; }
.pss-home-stock__head h3 { font-size: 1.25rem; margin: 0; }
.pss-home-stock__head p { margin: 0; font-size: .92rem; }
.pss-home-stock__grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 0; }
.pss-home-seal { display: flex; flex-direction: column; gap: .35rem; height: 100%; background: #fff; border: 1px solid var(--pss-border); border-radius: var(--pss-radius); padding: 1.1rem 1.2rem; box-shadow: var(--pss-shadow-sm); color: var(--pss-ink) !important; transition: border-color .15s, box-shadow .15s, transform .15s; }
.pss-home-seal:hover { border-color: var(--pss-primary); box-shadow: var(--pss-shadow); transform: translateY(-2px); }
.pss-home-seal__size { font-weight: 800; font-size: 1rem; line-height: 1.3; }
.pss-home-seal__size span { color: var(--pss-accent); padding: 0 .1rem; }
.pss-home-seal__sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; color: var(--pss-ink-soft); }
.pss-home-seal__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .6rem; }
.pss-home-seal__price { font-weight: 800; font-size: 1.1rem; }

.pss-home-guides__grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 0; }
.pss-home-guide { display: flex; flex-direction: column; gap: .4rem; height: 100%; background: #fff; border: 1px solid var(--pss-border); border-radius: var(--pss-radius); padding: 1.35rem; box-shadow: var(--pss-shadow-sm); color: var(--pss-ink-soft) !important; font-size: .92rem; transition: border-color .15s, box-shadow .15s; }
.pss-home-guide strong { font-size: 1.05rem; color: var(--pss-ink); }
.pss-home-guide__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: var(--pss-radius); background: var(--pss-primary-light); color: var(--pss-primary); margin-bottom: .35rem; }
.pss-home-guide__more { display: inline-flex; align-items: center; gap: .3rem; margin-top: auto; padding-top: .5rem; font-weight: 700; color: var(--pss-accent); }
.pss-home-guide:hover { border-color: var(--pss-primary); box-shadow: var(--pss-shadow); }

.pss-home-faq__list { max-width: 820px; margin: 0 auto; display: grid; gap: .75rem; }
.pss-home-faq details { background: #fff; border: 1px solid var(--pss-border); border-radius: var(--pss-radius); box-shadow: var(--pss-shadow-sm); }
.pss-home-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.25rem; font-weight: 700; color: var(--pss-ink); }
.pss-home-faq summary::-webkit-details-marker { display: none; }
.pss-home-faq summary::after { content: "+"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 999px; background: var(--pss-primary-light); color: var(--pss-primary); font-size: 1.15rem; font-weight: 700; }
.pss-home-faq details[open] summary::after { content: "–"; }
.pss-home-faq details p { margin: 0; padding: 0 1.25rem 1.2rem; font-size: .95rem; }

/* The negative bottom margin cancels the footer's 2rem top margin, so the
   band meets the footer's red top border. */
.pss-home-cta { background: linear-gradient(160deg, var(--pss-primary) 0%, var(--pss-primary-dark) 100%); color: #fff; padding: 3.25rem 0; margin: 4.5rem 0 -2rem; }
.pss-home-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; }
.pss-home-cta h2 { color: #fff; font-size: 1.6rem; font-weight: 800; margin: 0 0 .5rem; }
.pss-home-cta p { color: rgba(255,255,255,.88); margin: 0; max-width: 56ch; }
.pss-home-cta__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.pss-home-cta__actions .pss-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.pss-home-cta__call { background: rgba(255,255,255,.06); color: #fff !important; border-color: rgba(255,255,255,.55); }
.pss-home-cta__call:hover { background: #fff; color: var(--pss-primary-dark) !important; border-color: #fff; }
/* .pss-steps sits between sections that carry their own top padding. */
.pss-home-guides + .pss-home-faq, .pss-steps + .pss-home-guides { padding-top: 3rem; }

@media (max-width: 1000px) {
  .pss-home-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pss-home-stock__grid, .pss-home-guides__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pss-home-work__points { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pss-hero__trust { flex-direction: column; gap: .5rem; }
  .pss-home-trust__list { grid-template-columns: minmax(0, 1fr); gap: .85rem; }
  .pss-home-section { padding-top: 3rem; }
  .pss-home-work__stage { padding: 1rem .75rem; }
  .pss-home-stock__grid, .pss-home-guides__grid { grid-template-columns: minmax(0, 1fr); }
  .pss-home-cta { margin-top: 3rem; padding: 2.5rem 0; }
  .pss-home-cta__actions, .pss-home-cta__actions .pss-btn { width: 100%; }
}

/* Drivetrain animation on the product and How it works pages. */
.pss-pdp-drive, .pss-hiw-drive { background: linear-gradient(180deg, #fff 0%, #f6f8fb 100%); border: 1px solid var(--pss-border); border-radius: var(--pss-radius-lg); box-shadow: var(--pss-shadow-sm); padding: 1.5rem; margin: 0 0 1.5rem; }
.pss-hiw-drive { margin: 2rem 0 .5rem; }

/* Product page: sticky Add to cart bar on phones (shown by its script). */
.pss-pdp-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--pss-border); box-shadow: 0 -8px 24px rgba(25, 40, 63, .14); }
.pss-pdp-sticky[hidden] { display: none; }
.pss-pdp-sticky__info { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pss-pdp-sticky__info strong { font-size: 1.15rem; color: var(--pss-ink); }
.pss-pdp-sticky__info span { font-size: .8rem; color: var(--pss-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pss-pdp-sticky .pss-btn { flex: none; min-height: 46px; padding: .7rem 1.4rem; }
.has-pss-sticky .pss-sitefooter { padding-bottom: 4.5rem; }
@media (max-width: 640px) {
  .pss-pdp-drive, .pss-hiw-drive { padding: 1rem .75rem; }
}