/* ==========================================================================
   Grainman — modernization layer
   --------------------------------------------------------------------------
   Loaded after style.css (see includes/enqueue.php). style.css is generated
   from the original SCSS and carries very deep selectors, so overrides here
   deliberately repeat the legacy chain prefixed with `.csbykp-modernize`
   (added to <body> by includes/csbykp-modernize.php) rather than reaching for
   !important. Nothing in this file removes markup — it only refines it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens

   The whole modernization layer is driven from here. Change a value once and
   it propagates: chrome, hero, cards, forms, footer.

   COLOUR
     --gm-red            Brand red #CF0405. Accents only — not full-bleed washes.
     --gm-red-strong     Same brand red for solid buttons (white text clears AA).
     --gm-red-darker     Hover/active for the above (8.31:1).
     --gm-ink / -soft / --gm-muted   Text ramp, darkest to lightest.
     --gm-line           Hairlines and card borders.
     --gm-surface / --gm-canvas / --gm-canvas-deep   Backgrounds, light to dark.

   SPACE  4px base. --gm-s1 (4) … --gm-s10 (128). Section rhythm uses
          --gm-section-y, which fluidly scales between mobile and desktop.

   RADIUS --gm-r-sm 10 / --gm-r 16 / --gm-r-lg 24 / --gm-r-xl 32 / pill.

   SHADOW Three steps only: -sm resting, default raised, -lift hover.

   TYPE   Arial stack for headings and body (Brand Guide). The --gm-fs-* ramp
          is fluid via clamp().

   MOTION --gm-ease is the single easing curve; --gm-dur-* the three speeds.
          Everything here is disabled under prefers-reduced-motion.
   -------------------------------------------------------------------------- */
:root {
  /* --- colour --- */
  --gm-red: #CF0405;
  --gm-red-strong: #CF0405;
  --gm-red-darker: #8F0203;
  --gm-red-tint: rgba(207, 4, 5, 0.10);

  --gm-ink: #111111;
  --gm-ink-soft: #333333;
  --gm-muted: #6B7280;
  --gm-silver: #C9CED3;
  --gm-line: #D7DADE;
  --gm-line-strong: #C9CED3;

  --gm-surface: #FFFFFF;
  --gm-canvas: #F5F5F5;
  --gm-canvas-alt: #EFEFF1;
  --gm-canvas-deep: #121214;
  --gm-chrome: #0B0B0C;

  /* --- space (4px base) --- */
  --gm-s1: 4px;   --gm-s2: 8px;   --gm-s3: 12px;  --gm-s4: 16px;
  --gm-s5: 24px;  --gm-s6: 32px;  --gm-s7: 48px;  --gm-s8: 64px;
  --gm-s9: 96px;  --gm-s10: 128px;

  --gm-shell: 1240px;
  --gm-gutter: clamp(20px, 4vw, 40px);
  --gm-section-y: clamp(64px, 7.5vw, 128px);

  /* --- radius --- */
  /* Brand Guide: square cards and buttons. */
  --gm-r-sm: 0px;
  --gm-r: 0px;
  --gm-r-lg: 0px;
  --gm-r-xl: 0px;
  --gm-r-pill: 0px;
  /* Legacy aliases — PR #1 names, kept so nothing downstream breaks. */
  --gm-radius-sm: var(--gm-r-sm);
  --gm-radius: var(--gm-r);
  --gm-radius-lg: var(--gm-r-lg);

  /* --- elevation --- */
  --gm-shadow-sm: 0 1px 2px rgba(14, 14, 16, 0.05), 0 2px 8px rgba(14, 14, 16, 0.05);
  --gm-shadow: 0 2px 4px rgba(14, 14, 16, 0.05), 0 12px 28px rgba(14, 14, 16, 0.10);
  --gm-shadow-lift: 0 4px 10px rgba(14, 14, 16, 0.07), 0 24px 48px rgba(14, 14, 16, 0.17);

  /* --- type --- */
  --gm-display: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --gm-body: Arial, "Helvetica Neue", Helvetica, sans-serif;

  --gm-fs-eyebrow: 12px;
  --gm-fs-sm: 14px;
  --gm-fs-base: 16px;
  --gm-fs-lead: clamp(17px, 1.35vw, 20px);
  --gm-fs-h3: clamp(20px, 2.1vw, 25px);
  /* The vw terms are steep enough that the floor releases just above phone
     widths. With the old coefficients a 768px tablet still rendered the hero
     at its 34px minimum — the same size as a 390px phone — so the whole
     600-1100px band read undersized and empty. */
  --gm-fs-h2: clamp(30px, 4.6vw, 52px);
  --gm-fs-h1: clamp(36px, 5.8vw, 64px);
  --gm-fs-hero: clamp(34px, 5.4vw, 60px);

  /* Display type is set tighter the larger it gets — the same tracking that
     reads well at 20px looks loose at 60px. */
  --gm-tracking-tight: -0.028em;
  --gm-tracking-tighter: -0.038em;
  --gm-tracking-wide: 0.14em;

  /* One measure for body copy so no block invents its own. */
  --gm-measure: 62ch;
  --gm-measure-tight: 46ch;

  /* Every section head shares one axis. The legacy sheet centres some blocks
     and left-aligns others, which is most of why the page reads "themed".
     Left matches the hero, so the whole page hangs off one line. To flip the
     site back to centred heads, set both of these together:
       --gm-head-align: center;  --gm-head-x: auto;
     --gm-head-x is the inline margin that puts the kicker rule and the lead's
     measured column on that same axis. */
  --gm-head-align: left;
  --gm-head-x: 0;

  /* --- chrome --- */
  /* Set from JS to the header's real height so nothing hides under it; these
     are the pre-JS fallbacks and must stay close to the rendered value. */
  --gm-header-h: 148px;
  --gm-header-h-compact: 92px;

  /* --- motion --- */
  --gm-ease: cubic-bezier(0.22, 0.72, 0.24, 1);
  --gm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gm-dur-1: 160ms;
  --gm-dur-2: 280ms;
  --gm-dur-3: 460ms;
}

/* --------------------------------------------------------------------------
   2. Accessibility primitives
   -------------------------------------------------------------------------- */

/* The legacy viewport meta locked zoom; the theme now ships a zoomable one.
   Keep motion opt-out honoured across the swipers and hover transitions. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* One visible focus ring for everything, drawn outside the element so it is
   never clipped by the rounded cards. */
.csbykp-modernize :focus-visible {
  outline: 3px solid var(--gm-red);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Dark surfaces (header, footer) need a light ring to stay visible. */
.csbykp-modernize header :focus-visible,
.csbykp-modernize .footer :focus-visible,
.csbykp-modernize .banner :focus-visible {
  outline-color: #FFFFFF;
  box-shadow: 0 0 0 6px rgba(237, 28, 36, 0.55);
}

/* Every control this layer adds gets a ring that is actually visible on the
   surface it sits on. The generic rule above is red-on-light / white-on-dark;
   these are the cases where the control's own fill would swallow it. */
.csbykp-modernize .gm-btn:focus-visible,
.csbykp-modernize .gm-cart:focus-visible,
.csbykp-modernize .gm-menu-toggle:focus-visible,
.csbykp-modernize .category-wrap:focus-visible,
.csbykp-modernize .csbykp-empty-shop__actions a:focus-visible,
.csbykp-modernize .gm-cta-band__actions a:focus-visible,
.csbykp-modernize .slider .project-navigation:focus-visible,
.csbykp-modernize .footer .socials .socials-svg-wrap:focus-visible,
.csbykp-modernize .gm-footer-contact a:focus-visible,
.csbykp-modernize .gm-footer-legal:focus-visible,
/* On light grounds invert it: dark ring, red halo. */
.csbykp-modernize .csbykp-empty-shop__actions a:focus-visible,
.csbykp-modernize .gm-contact-form-card a:focus-visible,
.csbykp-modernize .gm-simple-page__content a:focus-visible,
.csbykp-modernize .gm-error-404__actions a:focus-visible,
.csbykp-modernize .archive-products .product a:focus-visible,
.csbykp-modernize .archive-products .product button:focus-visible {
  outline: 3px solid var(--gm-ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(208, 17, 26, 0.35);
}
/* Form controls: the ring replaces the resting border, so it has to read. */
.csbykp-modernize .acf-form .acf-input input:focus-visible,
.csbykp-modernize .acf-form .acf-input textarea:focus-visible,
.csbykp-modernize .acf-form .acf-input select:focus-visible,
.csbykp-modernize.gm-checkout-page form .form-row input.input-text:focus-visible,
.csbykp-modernize.gm-checkout-page form .form-row textarea:focus-visible {
  outline: 3px solid var(--gm-red-strong);
  outline-offset: 2px;
}
/* The category flyout trigger is an <a role="button"> with no href target. */
.csbykp-modernize .category-wrap:focus-visible { outline-offset: 2px; }

.gm-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--gm-red-strong);
  color: #fff;
  font-family: var(--gm-body);
  font-weight: 600;
  border-bottom-right-radius: var(--gm-radius-sm);
}
.gm-skip-link:focus {
  left: 0;
  outline: 3px solid #fff;
  outline-offset: -6px;
}

.gm-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Shared button vocabulary
   -------------------------------------------------------------------------- */
.gm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gm-s2);
  font-family: var(--gm-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  padding: 15px 28px;
  border-radius: var(--gm-r-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background-color var(--gm-dur-2) var(--gm-ease),
              border-color var(--gm-dur-2) var(--gm-ease),
              color var(--gm-dur-2) var(--gm-ease),
              transform var(--gm-dur-1) var(--gm-ease),
              box-shadow var(--gm-dur-2) var(--gm-ease);
}
.gm-btn:hover { transform: translateY(-2px); }
.gm-btn:active { transform: translateY(0); }
.gm-btn svg { width: 15px; height: 15px; flex: none; transition: transform var(--gm-dur-2) var(--gm-ease); }
.gm-btn:hover svg { transform: translateX(3px); }

.gm-btn--primary {
  background-color: var(--gm-red-strong);
  border-color: var(--gm-red-strong);
  color: #fff;
  box-shadow: 0 6px 18px rgba(208, 17, 26, 0.28);
}
.gm-btn--primary:hover,
.gm-btn--primary:focus-visible {
  background-color: var(--gm-red-darker);
  border-color: var(--gm-red-darker);
  color: #fff;
  box-shadow: 0 10px 26px rgba(160, 6, 16, 0.36);
}

.gm-btn--ghost {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.62);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.gm-btn--ghost:hover,
.gm-btn--ghost:focus-visible {
  background-color: #fff;
  border-color: #fff;
  color: var(--gm-ink);
}

.gm-btn--outline {
  background-color: transparent;
  border-color: var(--gm-red-strong);
  color: var(--gm-red-strong);
}
.gm-btn--outline:hover,
.gm-btn--outline:focus-visible {
  background-color: var(--gm-red-strong);
  color: #fff;
}

/* --------------------------------------------------------------------------
   4. Header / navigation — one sticky shell, not two black bars

   PR #1 left two full-weight black bars stacked (nav + categories/search),
   which read as admin chrome. Nothing is removed here: the second row is
   demoted to a lighter utility strip that collapses away on scroll, so the
   resting state is tall and confident and the scrolled state is one slim bar.
   -------------------------------------------------------------------------- */
.csbykp-modernize header {
  padding: 0 var(--gm-gutter);
  background-color: var(--gm-chrome);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: background-color var(--gm-dur-2) var(--gm-ease),
              box-shadow var(--gm-dur-2) var(--gm-ease);
}
@media (max-width: 767px) {
  .csbykp-modernize header { padding: 0 var(--gm-gutter); }
}

.csbykp-modernize header .inner {
  max-width: var(--gm-shell);
  gap: 0;
}

/* Row 1 — the brand row. */
.csbykp-modernize header .inner .main-header {
  padding: 18px 0 14px;
  gap: var(--gm-s5);
  transition: padding var(--gm-dur-2) var(--gm-ease);
}

/* ---- Logo -----------------------------------------------------------------
   PR #1 capped this at max-width 260px / max-height 56px and Kenny read the
   mark as a postage stamp. The cap is now a floor: the lockup is a wide
   mark + wordmark, so height drives it and width is left free. */
.csbykp-modernize header .inner .main-header .logo-wrap {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: none;
  width: auto;
  line-height: 0;
}
.csbykp-modernize header .inner .main-header .logo-wrap .logo {
  display: block;
  width: auto;
  max-width: min(46vw, 460px);
  max-height: none;
  /* 84px resting. Drops to --gm-header-h-compact's share when scrolled. */
  height: clamp(56px, 6.2vw, 84px);
  object-fit: contain;
  transition: height var(--gm-dur-2) var(--gm-ease);
}
@media (max-width: 991px) {
  .csbykp-modernize header .inner .main-header .logo-wrap .logo { height: 60px; }
}
/* Below 767px the legacy sheet swaps to .mobile-logo; give it real presence
   too rather than the old 42px cap. */
@media (max-width: 767px) {
  .csbykp-modernize header .inner .main-header .logo-wrap { width: auto; }
  .csbykp-modernize header .inner .main-header .logo-wrap .logo { display: none; }
  .csbykp-modernize header .inner .main-header .logo-wrap .mobile-logo {
    display: block;
    width: auto;
    height: 52px;
    max-width: 60vw;
    object-fit: contain;
  }
}

/* Primary nav sits right, with breathing room. */
.csbykp-modernize header .inner .main-header .links-wrap {
  width: auto;
  flex: 1 1 auto;
  gap: var(--gm-s5);
}
.csbykp-modernize header .inner .main-header .links-wrap .pages-links {
  margin-right: 0;
  gap: var(--gm-s2);
}
.csbykp-modernize header .inner .main-header .links-wrap .link {
  position: relative;
  white-space: nowrap;
  margin-right: 0;
  padding: 10px 14px;
  border-radius: var(--gm-r-sm);
  font-family: var(--gm-body);
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  transition: color var(--gm-dur-1) var(--gm-ease),
              background-color var(--gm-dur-1) var(--gm-ease);
}
.csbykp-modernize header .inner .main-header .links-wrap .pages-links .link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--gm-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--gm-dur-2) var(--gm-ease);
}
.csbykp-modernize header .inner .main-header .links-wrap .pages-links .link:hover,
.csbykp-modernize header .inner .main-header .links-wrap .pages-links .link:focus-visible {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.06);
}
.csbykp-modernize header .inner .main-header .links-wrap .pages-links .link:hover::after,
.csbykp-modernize header .inner .main-header .links-wrap .pages-links .link:focus-visible::after {
  transform: scaleX(1);
}

.csbykp-modernize header .inner .main-header .links-wrap .forms-links {
  padding-left: var(--gm-s5);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  gap: var(--gm-s2);
}
.csbykp-modernize header .inner .main-header .links-wrap .forms-links .link { margin-right: 0; }
/* Register/Login: one quiet, one solid — a clear primary. */
.csbykp-modernize header .inner .main-header .links-wrap .forms-links .link:last-child {
  padding: 11px 22px;
  border-radius: var(--gm-r-pill);
  background-color: var(--gm-red-strong);
  font-weight: 600;
  color: #fff;
}
.csbykp-modernize header .inner .main-header .links-wrap .forms-links .link:last-child:hover,
.csbykp-modernize header .inner .main-header .links-wrap .forms-links .link:last-child:focus-visible {
  background-color: var(--gm-red-darker);
  border-color: var(--gm-red-darker);
  color: #fff;
}
.csbykp-modernize header .inner .main-header .links-wrap .forms-links .username {
  padding: 10px 14px;
  font-size: 15px;
  color: #fff;
}

/* Row 2 — utility strip. Lighter surface, not a second black slab. */
.csbykp-modernize header .inner .sub-header {
  align-items: center;
  gap: var(--gm-s5);
  padding: 10px 0 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  transition: opacity var(--gm-dur-2) var(--gm-ease),
              max-height var(--gm-dur-3) var(--gm-ease),
              padding var(--gm-dur-2) var(--gm-ease),
              border-color var(--gm-dur-2) var(--gm-ease);
  max-height: 90px;
  overflow: visible;
}
.csbykp-modernize header .inner .sub-header .category-search-wrap {
  flex: 1 1 auto;
  align-items: center;
  gap: var(--gm-s4);
}
.csbykp-modernize header .inner .sub-header .category-search-wrap .category-wrap {
  padding: 9px 14px 9px 8px;
  border-radius: var(--gm-r-pill);
  background: rgba(255, 255, 255, 0.07);
  transition: background-color var(--gm-dur-1) var(--gm-ease);
}
.csbykp-modernize header .inner .sub-header .category-search-wrap .category-wrap:hover {
  background: rgba(255, 255, 255, 0.13);
}
.csbykp-modernize header .inner .sub-header .category-search-wrap .category-wrap .sub-menu-wrap {
  height: 16px;
  width: 22px;
  padding: 0;
  gap: 4px;
  justify-content: center;
}
.csbykp-modernize header .inner .sub-header .category-search-wrap .category-wrap .sub-menu-wrap span { height: 2px; }
.csbykp-modernize header .inner .sub-header .category-search-wrap .category-wrap .text {
  margin: 0 0 0 10px;
  font-family: var(--gm-body);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
.csbykp-modernize header .inner .sub-header .category-search-wrap .product-cat-wrap {
  top: calc(var(--gm-header-h) - 6px);
  padding: var(--gm-s3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--gm-r);
  background: var(--gm-chrome);
  box-shadow: var(--gm-shadow-lift);
}
.csbykp-modernize header .inner .sub-header .category-search-wrap .product-cat-wrap a {
  padding: 9px 12px;
  margin-bottom: 2px;
  border-bottom: 0;
  border-radius: var(--gm-r-sm);
  font-size: 14px;
}
.csbykp-modernize header .inner .sub-header .category-search-wrap .product-cat-wrap a:hover {
  background-color: var(--gm-red-strong);
  color: #fff;
}

/* Search field — reads as a real control on the dark strip. */
.csbykp-modernize header .aws-container .aws-search-form .aws-wrapper .aws-search-field {
  height: 44px;
  min-width: min(420px, 34vw);
  padding-left: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: var(--gm-r-pill) !important;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-family: var(--gm-body);
  font-size: 14px;
  transition: background-color var(--gm-dur-1) var(--gm-ease),
              border-color var(--gm-dur-1) var(--gm-ease);
}
.csbykp-modernize header .aws-container .aws-search-form .aws-wrapper .aws-search-field::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.csbykp-modernize header .aws-container .aws-search-form .aws-wrapper .aws-search-field:focus {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.csbykp-modernize header .inner .sub-header .buttons-wrap { gap: var(--gm-s2); }
.csbykp-modernize header .inner .sub-header .buttons-wrap div { padding-left: 0; }
.csbykp-modernize header .inner .sub-header .buttons-wrap div:first-child { padding-right: 0; }
.csbykp-modernize header .inner .sub-header .buttons-wrap .account {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  padding-left: var(--gm-s2);
  margin-left: var(--gm-s1);
}
.csbykp-modernize header .inner .sub-header .buttons-wrap div .link {
  padding: 10px 14px;
  border-radius: var(--gm-r-pill);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}
.csbykp-modernize header .inner .sub-header .buttons-wrap div .link:hover { color: #fff; }
.csbykp-modernize header .inner .sub-header .buttons-wrap div .shop-link {
  padding: 11px 22px;
  background-color: var(--gm-red-strong);
  color: #fff;
  font-weight: 600;
}
.csbykp-modernize header .inner .sub-header .buttons-wrap div .shop-link:hover {
  background-color: var(--gm-red-darker);
  border-color: var(--gm-red-darker);
  color: #fff;
}

/* ---- Scrolled state -------------------------------------------------------
   The utility strip collapses and the brand row tightens, so what follows you
   down the page is a single slim bar. This is the "two bars" fix. */
.csbykp-modernize header.gm-header--scrolled {
  background-color: rgba(11, 11, 12, 0.92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.csbykp-modernize header.gm-header--scrolled .inner .main-header { padding: 10px 0; }
.csbykp-modernize header.gm-header--scrolled .inner .main-header .logo-wrap .logo {
  height: clamp(40px, 3.6vw, 52px);
}
.csbykp-modernize header.gm-header--scrolled .inner .sub-header {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden;
  border-top-color: transparent;
  pointer-events: none;
}
/* Never collapse the strip while someone is using something inside it. */
.csbykp-modernize header.gm-header--scrolled .inner .sub-header:focus-within {
  max-height: 90px;
  padding: 10px 0 14px;
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
}
@media (max-width: 1249px) {
  /* The strip is the only place search lives on tablet — keep it put. */
  .csbykp-modernize header.gm-header--scrolled .inner .sub-header {
    max-height: 90px;
    padding: 10px 0 14px;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
  }
}

/* Content clears the fixed header. --gm-header-h is measured in JS; the token
   default covers the pre-JS paint. */
.csbykp-modernize .all { padding-top: var(--gm-header-h); }

/* ---- Mobile drawer -------------------------------------------------------- */
.csbykp-modernize .gm-menu-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 10px;
  margin: 0;
  cursor: pointer;
  color: inherit;
}
@media (max-width: 1249px) {
  .csbykp-modernize header .inner .main-header .menu-shop-wrap .menu-wrap {
    height: 44px;
    width: 48px;
    justify-content: center;
    gap: 6px;
  }
  .csbykp-modernize header .inner .main-header .menu-shop-wrap .menu-wrap span {
    height: 3px;
    border-radius: 3px;
  }
  .csbykp-modernize header .inner .main-header .menu-shop-wrap .cross {
    height: 44px;
    width: 48px;
    gap: 0;
  }
  .csbykp-modernize header .inner .main-header .menu-shop-wrap .cross span { height: 3px; }
  .csbykp-modernize header .inner .main-header .menu-shop-wrap .cross span:nth-child(1) {
    transform: rotate(45deg) translate(1px, 5px);
  }
  .csbykp-modernize header .inner .main-header .menu-shop-wrap .cross span:nth-child(3) {
    transform: rotate(-45deg) translate(0, -5px);
  }

  /* `width: auto` from the desktop nav rule above is (0,5,0) and unscoped, so
     it beat legacy's (0,4,0) `width: calc(100%)` here and the drawer collapsed
     to shrink-to-fit: 294px on a phone (sized by the search field) and a
     147px sliver on a tablet, where search is hidden and the widest child is a
     nav label. Give the panel a real width of its own. */
  .csbykp-modernize header .inner .main-header .links-wrap {
    width: min(380px, 86vw);
    top: var(--gm-header-h);
    height: calc(100vh - var(--gm-header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--gm-s5) var(--gm-s5) var(--gm-s8);
    gap: 0;
    background-color: var(--gm-chrome);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.5);
  }
  /* One drawer, one presentation. Search first, then the shop action, then the
     site nav, then account — by `order`, so desktop keeps its source order.
     Below 768 the shop group is the only part that appears; above it the
     utility strip still carries those, so it stays hidden. */
  .csbykp-modernize header .inner .main-header .links-wrap .search-wrap { order: 1; }
  .csbykp-modernize header .inner .main-header .links-wrap .gm-drawer-shop { order: 2; }
  .csbykp-modernize header .inner .main-header .links-wrap .pages-links { order: 3; }
  .csbykp-modernize header .inner .main-header .links-wrap .forms-links { order: 4; }
  .csbykp-modernize header .inner .main-header .links-wrap[aria-hidden="true"] { visibility: hidden; }
  /* Legacy animates the drawer with `transition: all 0.4s`, which includes
     visibility — so for 400ms after opening, the panel is still
     `visibility: hidden`, and focus() on a hidden element silently does
     nothing. That is why focus never moved into the drawer on open and a
     keyboard user was left on the toggle. Animate the slide, not the
     visibility; the panel becomes focusable the moment it opens. */
  .csbykp-modernize header .inner .main-header .links-wrap,
  .csbykp-modernize header .inner .main-header .active-links {
    transition: right 0.4s ease-in-out;
  }
  @media (prefers-reduced-motion: reduce) {
    .csbykp-modernize header .inner .main-header .links-wrap,
    .csbykp-modernize header .inner .main-header .active-links { transition: none; }
  }

  .csbykp-modernize header .inner .main-header .links-wrap .link {
    width: 100%;
    max-width: none;
    text-align: left;
    padding: 14px 2px;
    margin-bottom: 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 16px;
    font-weight: 500;
  }
  .csbykp-modernize header .inner .main-header .links-wrap .pages-links,
  .csbykp-modernize header .inner .main-header .links-wrap .forms-links { width: 100%; }
  .csbykp-modernize header .inner .main-header .links-wrap .forms-links {
    padding: var(--gm-s5) 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .csbykp-modernize header .inner .main-header .links-wrap .forms-links .link:last-child {
    margin-top: var(--gm-s3);
    border-bottom: 0;
  }
}

/* ---- Cart ---------------------------------------------------------------- */
.csbykp-modernize .gm-cart {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-s2);
  position: relative;
  color: #fff;
  font-family: var(--gm-body);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--gm-r-pill);
  transition: border-color var(--gm-dur-1) var(--gm-ease),
              background-color var(--gm-dur-1) var(--gm-ease);
}
.csbykp-modernize .gm-cart:hover,
.csbykp-modernize .gm-cart:focus-visible {
  border-color: var(--gm-red);
  background-color: rgba(237, 28, 36, 0.16);
  color: #fff;
}
.csbykp-modernize .gm-cart__icon { width: 20px; height: 20px; flex: none; }
.csbykp-modernize .gm-cart__total { white-space: nowrap; }
.csbykp-modernize .gm-cart__count {
  position: absolute;
  top: -7px;
  left: 24px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--gm-r-pill);
  background: var(--gm-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--gm-chrome);
}
.csbykp-modernize .gm-cart__count[hidden] { display: none; }
@media (max-width: 767px) {
  .csbykp-modernize .gm-cart__total { display: none; }
  .csbykp-modernize .gm-cart { padding: 9px 12px; }
}

.csbykp-modernize header .inner .main-header .menu-shop-wrap {
  align-items: center;
  gap: var(--gm-s3);
  flex: 0 0 auto;
}
.csbykp-modernize .gm-cart--compact { display: none; }
/* Compact cart only where the utility strip is gone. 768–1249 still
   shows the strip (and its cart), so a second cart in the brand row
   was the "two shopping carts" leftover on tablet. */
@media (max-width: 767px) {
  .csbykp-modernize .gm-cart--compact { display: inline-flex; }
}
.csbykp-modernize header .inner .main-header .menu-shop-wrap .shop-link {
  background-color: var(--gm-red-strong);
  border-color: var(--gm-red-strong);
  font-weight: 600;
}

/* ---- Small-screen chrome budget -------------------------------------------
   Under 768px the utility strip is hidden outright (see the mobile declutter
   section) and everything it carried moves into the drawer, so row 1 is the
   whole chrome: brand, cart, menu. Row 1 could not hold "Shop Now" as well —
   at 390px the toggle was pushed to x=460 and clipped by the body's
   overflow-x:hidden, leaving no way to open the nav — so it stays out. */
@media (max-width: 767px) {
  .csbykp-modernize header .inner .main-header .logo-wrap .mobile-logo {
    height: auto;
    max-height: 44px;
    max-width: min(50vw, 190px);
  }
  .csbykp-modernize header .inner .main-header .menu-shop-wrap .shop-link { display: none; }
}

/* 768-991px is where the strip is under the most pressure: it still carries
   everything, but the shell is narrow enough that "All Categories", "Shop Now"
   and "My Account" were each wrapping onto two lines (measured 50px, 58px and
   56px tall against 34px, 40px and 38px at 992px). Three wrapped labels in one
   bar is most of why a tablet still read as a busy template. Drop the strip's
   duplicate cart — the brand row's is the one with the live count, the same
   call already made for phones — stop the labels wrapping, and keep the search
   field from eating the row. */
@media (min-width: 768px) and (max-width: 991px) {
  .csbykp-modernize header .inner .sub-header .buttons-wrap .amount { display: none; }
  .csbykp-modernize header .inner .sub-header .category-search-wrap .category-wrap .text,
  .csbykp-modernize header .inner .sub-header .buttons-wrap div .link {
    white-space: nowrap;
  }
  .csbykp-modernize header .aws-container .aws-search-form .aws-wrapper .aws-search-field {
    min-width: min(300px, 30vw);
  }
}

/* Scrolled, the strip stays put at these widths — it is the only place
   "Shop Now" and the category menu live once the brand row has given up its
   own shop link — so tighten it rather than collapsing it out of reach. */
@media (min-width: 768px) and (max-width: 991px) {
  .csbykp-modernize header.gm-header--scrolled .inner .main-header { padding: 8px 0; }
  .csbykp-modernize header.gm-header--scrolled .inner .sub-header {
    max-height: 90px;
    padding: 6px 0 8px;
  }
  .csbykp-modernize header.gm-header--scrolled .inner .main-header .logo-wrap .mobile-logo {
    max-height: 38px;
  }
}

/* iPhone SE and narrower: give the logo a little less so the toggle still
   clears the right edge. */
@media (max-width: 360px) {
  .csbykp-modernize header .inner .main-header .logo-wrap .mobile-logo { max-width: 42vw; }
  .csbykp-modernize header .inner .main-header .menu-shop-wrap { gap: var(--gm-s2); }
  .csbykp-modernize .gm-cart { padding: 9px 10px; }
}

/* Cart affordance: icon + item count bubble, always reachable. */

/* --------------------------------------------------------------------------
   5. Homepage hero — cinematic, and it cannot clip

   Two defects from PR #1, both visible in docs/kenny-review-2026-09-07:

   1. CLIPPING. The legacy sheet gives .banner a fixed inline `height` from
      ACF, .inner `overflow: hidden`, and .content-wrap `justify-content:
      flex-end`. When the headline is taller than that fixed box, flex
      overflows past the START edge and the top of the first line is sliced
      off — which is most of why Kenny read it as "hard to read". The ACF
      value is now a MIN height (banner.php passes it as --gm-hero-h), so the
      hero grows with its content and can never cut type again.

   2. CONTRAST. White on the bright sky/field measured ~3.6:1 at the right
      end of line 1 — under AA even for large text. The scrim below is three
      stacked layers and the text column is capped at 58%, keeping the type
      off the blown-out right side entirely.

   Also drops the "rounded card floating in a grey gutter" look for a
   full-bleed frame with the content on the normal 1240px shell.
   -------------------------------------------------------------------------- */
.csbykp-modernize .banner {
  max-width: none;
  width: 100%;
  /* No bottom margin: every following section brings its own padding, and a
     margin here just shows as a grey band under a full-bleed hero. */
  margin: 0;
  padding: 0;
  /* ACF height becomes a floor, never a ceiling. */
  height: auto !important;
  min-height: max(var(--gm-hero-h, 520px), 62vh);
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
@media (max-width: 767px) {
  .csbykp-modernize .banner {
    margin: 0;
    min-height: max(var(--gm-hero-h, 460px), 74vh);
  }
}

.csbykp-modernize .banner .inner {
  position: absolute;
  inset: 0;
  border-radius: 0;
  height: 100%;
  width: 100%;
}
/* Focal point.
   Going full-bleed made this box LESS wide in aspect than the old 1240px
   card (roughly 3.1 vs 3.9), and object-fit: cover crops whichever axis
   overflows. With a photo wider in aspect than the box it now crops the
   SIDES — which clipped the "Made in USA" stamp off the right of the hero
   (docs/kenny-review/2026-09-07-hero-made-in-usa-clipped.png).
   --gm-hero-pos comes from the optional ACF "Hero focal point" field, so an
   editor can keep edge content in frame without touching CSS. */
.csbykp-modernize .banner .inner .poster,
.csbykp-modernize .banner .inner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--gm-hero-pos, 50% 50%);
}

/* Scrim: horizontal wedge for the text column, a bottom lift for the CTAs,
   and a light overall tint to tame the sky. --gm-hero-scrim (0–1, set from
   the optional ACF "overlay strength" field) scales all three together. */
.csbykp-modernize .banner .inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 0;
  pointer-events: none;
  transition: opacity var(--gm-dur-3) var(--gm-ease);
  background-color: transparent;
  background-image:
    linear-gradient(
      95deg,
      rgba(8, 10, 9, calc(0.90 * var(--gm-hero-scrim, 1))) 0%,
      rgba(8, 10, 9, calc(0.84 * var(--gm-hero-scrim, 1))) 34%,
      rgba(8, 10, 9, calc(0.58 * var(--gm-hero-scrim, 1))) 58%,
      rgba(8, 10, 9, calc(0.18 * var(--gm-hero-scrim, 1))) 82%,
      rgba(8, 10, 9, calc(0.06 * var(--gm-hero-scrim, 1))) 100%
    ),
    linear-gradient(
      to top,
      rgba(8, 10, 9, calc(0.55 * var(--gm-hero-scrim, 1))) 0%,
      rgba(8, 10, 9, calc(0.10 * var(--gm-hero-scrim, 1))) 42%,
      rgba(8, 10, 9, 0) 70%
    ),
    /* Top wash: the sticky header is a solid dark bar, and without this the
       right of the hero — where the wedge has all but run out — meets it on a
       bright strip of sky. Darkening the top edge lets the chrome sit on the
       photograph instead of butting against it. */
    linear-gradient(
      to bottom,
      rgba(8, 10, 9, calc(0.42 * var(--gm-hero-scrim, 1))) 0%,
      rgba(8, 10, 9, calc(0.14 * var(--gm-hero-scrim, 1))) 12%,
      rgba(8, 10, 9, 0) 26%
    ),
    linear-gradient(
      rgba(8, 10, 9, calc(0.22 * var(--gm-hero-scrim, 1))),
      rgba(8, 10, 9, calc(0.22 * var(--gm-hero-scrim, 1)))
    );
}
@media (max-width: 767px) {
  /* Portrait: the column is full width, so the wedge becomes a vertical wash. */
  .csbykp-modernize .banner .inner::before {
    background-image:
      linear-gradient(
        to top,
        rgba(8, 10, 9, calc(0.92 * var(--gm-hero-scrim, 1))) 0%,
        rgba(8, 10, 9, calc(0.80 * var(--gm-hero-scrim, 1))) 42%,
        rgba(8, 10, 9, calc(0.52 * var(--gm-hero-scrim, 1))) 78%,
        rgba(8, 10, 9, calc(0.42 * var(--gm-hero-scrim, 1))) 100%
      ),
      linear-gradient(
        to bottom,
        rgba(8, 10, 9, calc(0.46 * var(--gm-hero-scrim, 1))) 0%,
        rgba(8, 10, 9, calc(0.16 * var(--gm-hero-scrim, 1))) 12%,
        rgba(8, 10, 9, 0) 26%
      ),
      linear-gradient(
        rgba(8, 10, 9, calc(0.30 * var(--gm-hero-scrim, 1))),
        rgba(8, 10, 9, calc(0.30 * var(--gm-hero-scrim, 1)))
      );
  }
}
.csbykp-modernize .banner .inner.fade-out::before { opacity: 0.18; }

/* Content sits on the normal shell so the hero lines up with everything below. */
.csbykp-modernize .banner .content-wrap {
  position: relative;
  inset: auto;
  z-index: 2;
  width: 100%;
  max-width: calc(var(--gm-shell) + (2 * var(--gm-gutter)));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  padding: clamp(64px, 7vw, 104px) var(--gm-gutter);
}
@media (max-width: 767px) {
  .csbykp-modernize .banner .content-wrap {
    justify-content: flex-end;
    align-items: flex-start;
    padding: var(--gm-s8) var(--gm-gutter) var(--gm-s7);
  }
}

.gm-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-s2);
  align-self: flex-start;
  margin: 0 0 var(--gm-s5);
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--gm-r-pill);
  background: rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--gm-body);
  font-size: var(--gm-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--gm-tracking-wide);
  text-transform: uppercase;
}
.gm-hero__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gm-red);
  box-shadow: 0 0 0 4px rgba(237, 28, 36, 0.28);
}

/* The text column stops at 58% so the headline never runs onto the blown-out
   right side of the photo — the measured failure point. */
.csbykp-modernize .banner .content-wrap .heading,
.csbykp-modernize .banner .content-wrap .gm-hero__title {
  width: 100%;
  max-width: 15ch;
  margin: 0;
  font-family: var(--gm-display);
  font-size: var(--gm-fs-hero);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: var(--gm-tracking-tighter);
  color: #fff;
  text-wrap: balance;
  /* Backstop only — the scrim above is what carries the contrast. */
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
/* 66% keeps a long headline on three lines. Measured against the real
   homepage photo the scrim still gives white 8.13:1 at that edge, so
   widening the column costs nothing in contrast. */
@media (min-width: 992px) {
  .csbykp-modernize .banner .content-wrap .heading,
  .csbykp-modernize .banner .content-wrap .gm-hero__title { max-width: 66%; }
}
@media (max-width: 767px) {
  .csbykp-modernize .banner .content-wrap .heading,
  .csbykp-modernize .banner .content-wrap .gm-hero__title {
    max-width: 100%;
    text-align: left;
  }
}

.gm-hero__sub {
  width: 100%;
  max-width: 46ch;
  margin: var(--gm-s5) 0 0;
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--gm-body);
  font-size: var(--gm-fs-lead);
  font-weight: 400;
  line-height: 1.6;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
@media (min-width: 992px) { .gm-hero__sub { max-width: 48%; } }
@media (max-width: 767px) { .gm-hero__sub { max-width: 100%; text-align: left; } }

.gm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gm-s3);
  margin-top: var(--gm-s7);
}
/* Play Video is tertiary; a rule sets it off from the two real CTAs rather
   than letting three pills read as equal weight. */
@media (min-width: 576px) {
  .csbykp-modernize .banner .content-wrap .gm-hero__actions .button {
    margin-left: var(--gm-s3);
    padding-left: calc(var(--gm-s3) + 22px);
    border-left: 0;
    position: relative;
  }
  .csbykp-modernize .banner .content-wrap .gm-hero__actions .button::before {
    content: "";
    position: absolute;
    left: calc(var(--gm-s3) * -1);
    top: 50%;
    width: 1px;
    height: 26px;
    margin-top: -13px;
    background: rgba(255, 255, 255, 0.28);
  }
}
@media (max-width: 575px) {
  .gm-hero__actions { width: 100%; gap: var(--gm-s3); }
  .gm-hero__actions .gm-btn { flex: 1 1 100%; }
}

/* Play Video keeps working but reads as tertiary next to the two real CTAs. */
.csbykp-modernize .banner .content-wrap .button {
  appearance: none;
  font-family: var(--gm-body);
  cursor: pointer;
  margin-top: 0;
  padding: 13px 22px;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.42);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--gm-r-pill);
  transition: background-color var(--gm-dur-1) var(--gm-ease),
              border-color var(--gm-dur-1) var(--gm-ease);
}
.csbykp-modernize .banner .content-wrap .button:hover {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: #fff;
}
.csbykp-modernize .banner .content-wrap .button svg { width: 11px; height: 11px; }

/* A quiet cue that there is more page below. */
.gm-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--gm-s5);
  z-index: 2;
  transform: translateX(-50%);
  width: 22px;
  height: 34px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--gm-r-pill);
  pointer-events: none;
}
.gm-hero__scroll::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
  animation: gm-scroll-hint 1.9s var(--gm-ease) infinite;
}
@keyframes gm-scroll-hint {
  0%, 100% { transform: translateY(0); opacity: 1; }
  55%      { transform: translateY(9px); opacity: 0.15; }
}
@media (max-width: 767px) { .gm-hero__scroll { display: none; } }

/* --------------------------------------------------------------------------
   6. Section rhythm + homepage narrative blocks

   Every ACF block keeps its markup. What changes is the shared rhythm: one
   vertical scale (--gm-section-y), one shell width, one heading treatment.
   That consistency is most of what separates "designed" from "themed".
   -------------------------------------------------------------------------- */
.csbykp-modernize .core-values,
.csbykp-modernize .two-column,
.csbykp-modernize .about-us,
.csbykp-modernize .icon-boxes,
.csbykp-modernize .our-partners,
.csbykp-modernize .title-with-image,
.csbykp-modernize .featured-products,
.csbykp-modernize .applications,
.csbykp-modernize .testimonials,
.csbykp-modernize .our-blogs,
.csbykp-modernize .slider,
.csbykp-modernize .single-blog {
  padding: var(--gm-section-y) var(--gm-gutter);
}
.csbykp-modernize .core-values .inner,
.csbykp-modernize .two-column .inner,
.csbykp-modernize .about-us .inner,
.csbykp-modernize .icon-boxes .inner,
.csbykp-modernize .our-partners .inner,
.csbykp-modernize .featured-products .inner,
.csbykp-modernize .applications .inner,
.csbykp-modernize .testimonials .inner,
.csbykp-modernize .our-blogs .inner,
.csbykp-modernize .slider .inner,
.csbykp-modernize .single-blog .inner {
  max-width: var(--gm-shell);
  margin: 0 auto;
  padding: 0;
}

/* Section headings — one voice across every block. */
.csbykp-modernize .core-values .inner .content-wrap .heading,
.csbykp-modernize .two-column .inner .heading,
.csbykp-modernize .about-us .inner .heading,
.csbykp-modernize .icon-boxes .inner h2,
.csbykp-modernize .our-partners .inner .content-wrap .title,
.csbykp-modernize .featured-products .inner .heading,
.csbykp-modernize .featured-products .inner .heading-slider-wrap .sub-heading,
.csbykp-modernize .applications .inner .heading,
.csbykp-modernize .applications .inner h2,
.csbykp-modernize .testimonials .inner .heading,
.csbykp-modernize .testimonials .inner h2,
.csbykp-modernize .our-blogs .inner .heading,
.csbykp-modernize .our-blogs .inner h2,
.csbykp-modernize .slider .inner .heading-wrap h2,
.csbykp-modernize .single-blog .inner .title {
  font-family: var(--gm-display);
  font-size: var(--gm-fs-h2);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: var(--gm-tracking-tight);
  color: var(--gm-ink);
  text-wrap: balance;
  /* Legacy hands these 40-50px of bottom margin, which puts a bigger gap
     between a heading and its own lead than between the lead and the content
     it introduces. Tighten the pair so they read as one unit. */
  margin: 0 0 var(--gm-s4);
  text-align: var(--gm-head-align);
  /* Several of these heads are flex items in a column their block centres.
     Stretching the item is what lets text-align place the text; without it the
     box shrink-wraps the words and sits mid-section, off the page's axis. */
  align-self: stretch;
}

/* A short red rule above each section head. No markup, no editor step, and it
   is the clearest signal that the page was composed rather than assembled. */
.csbykp-modernize .core-values .inner .content-wrap .heading::before,
.csbykp-modernize .two-column .inner .heading::before,
.csbykp-modernize .about-us .inner .heading::before,
.csbykp-modernize .icon-boxes .inner h2::before,
.csbykp-modernize .our-partners .inner .content-wrap .title::before,
.csbykp-modernize .featured-products .inner .heading::before,
.csbykp-modernize .featured-products .inner .heading-slider-wrap .sub-heading::before,
.csbykp-modernize .applications .inner .heading::before,
.csbykp-modernize .testimonials .inner .heading::before,
.csbykp-modernize .our-blogs .inner .heading::before,
.csbykp-modernize .slider .inner .heading-wrap h2::before,
.csbykp-modernize .single-blog .inner .title::before {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin: 0 var(--gm-head-x) var(--gm-s5);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gm-red) 0%, var(--gm-red-darker) 100%);
}

/* Section leads: one measure, one voice, on the same axis as the heading.
   Only two blocks ship a lead — core values (p.sub-heading) and about us
   (p.description). Featured products' `.sub-heading` is that block's title and
   is styled with the headings above, not here. */
.csbykp-modernize .core-values .inner .content-wrap .sub-heading,
.csbykp-modernize .about-us .inner .content-wrap .description {
  max-width: var(--gm-measure);
  margin: 0 var(--gm-head-x);
  font-family: var(--gm-body);
  font-size: var(--gm-fs-lead);
  line-height: 1.62;
  color: var(--gm-ink-soft);
  text-align: var(--gm-head-align);
  text-wrap: pretty;
}

/* Legacy centres several of these heads with `align-items: center` on a flex
   column, which pins the heading box to its own text width and leaves
   text-align with nothing to do. Stretch the column and let text-align and
   --gm-head-x place everything, so one token really does move the whole page. */
.csbykp-modernize .core-values .inner .content-wrap,
.csbykp-modernize .featured-products .inner .content-wrap,
.csbykp-modernize .applications .inner .content-wrap,
.csbykp-modernize .testimonials .inner .content-wrap,
.csbykp-modernize .our-blogs .inner .content-wrap,
.csbykp-modernize .our-partners .inner .content-wrap { align-items: stretch; align-self: stretch; }

/* Then one generous gap between the head and what it introduces, so the page
   breathes in the same places on every block. */
.csbykp-modernize .core-values .inner .content-wrap { margin-bottom: var(--gm-s7); }
.csbykp-modernize .two-column .inner .heading,
.csbykp-modernize .about-us .inner .heading,
.csbykp-modernize .applications .inner .heading,
.csbykp-modernize .testimonials .inner .heading,
.csbykp-modernize .our-blogs .inner .heading,
.csbykp-modernize .our-partners .inner .content-wrap .title,
.csbykp-modernize .featured-products .inner .heading-slider-wrap .sub-heading,
.csbykp-modernize .slider .inner .heading-wrap h2,
.csbykp-modernize .icon-boxes .inner h2 { margin-bottom: var(--gm-s7); }

/* Alternate section grounds so the page has cadence instead of one flat grey. */
.csbykp-modernize .core-values { background-color: var(--gm-surface); }
.csbykp-modernize .our-partners { background-color: var(--gm-canvas-alt); }

/* Core values → real cards with a numbered rule, not loose paragraphs. */
.csbykp-modernize .core-values .inner .blurbs-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gm-s5);
  counter-reset: gm-value;
}
.csbykp-modernize .core-values .inner .blurbs-wrap .blurb {
  counter-increment: gm-value;
  position: relative;
  /* The legacy sheet sizes these for a flex row (width: calc(50% - 25px)).
     Inside a grid track that resolves to half the column, so the cards
     collapsed to ~174px. The track is the width now. */
  width: auto;
  padding: var(--gm-s6) var(--gm-s5) var(--gm-s5);
  background: var(--gm-canvas);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-r-lg);
  overflow: hidden;
  transition: transform var(--gm-dur-2) var(--gm-ease),
              box-shadow var(--gm-dur-2) var(--gm-ease),
              border-color var(--gm-dur-2) var(--gm-ease);
}
/* Full-height rule at rest — a quarter-height stub read as a stray mark.
   Hover brings it up to full strength instead of full height. */
.csbykp-modernize .core-values .inner .blurbs-wrap .blurb::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--gm-red), rgba(237, 28, 36, 0.12));
  opacity: 0.45;
  transition: opacity var(--gm-dur-2) var(--gm-ease);
}
.csbykp-modernize .core-values .inner .blurbs-wrap .blurb:hover {
  transform: translateY(-3px);
  box-shadow: var(--gm-shadow);
  border-color: var(--gm-line-strong);
}
.csbykp-modernize .core-values .inner .blurbs-wrap .blurb:hover::before { opacity: 1; }
/* The counter was being incremented but never rendered. A quiet index gives
   the row structure without adding chrome. */
.csbykp-modernize .core-values .inner .blurbs-wrap .blurb .blurb-heading {
  position: relative;
  margin: 0 0 var(--gm-s3);
  padding-top: var(--gm-s6);
  font-family: var(--gm-display);
  font-size: var(--gm-fs-h3);
  font-weight: 600;
  line-height: 1.2;
  color: var(--gm-ink);
}
.csbykp-modernize .core-values .inner .blurbs-wrap .blurb .blurb-heading::before {
  content: counter(gm-value, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--gm-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--gm-tracking-wide);
  color: var(--gm-red-strong);
}
.csbykp-modernize .core-values .inner .blurbs-wrap .blurb .blurb-description {
  margin: 0;
  font-family: var(--gm-body);
  font-size: 15px;
  line-height: 1.62;
  color: var(--gm-ink-soft);
}

/* Two-column: the thick red frame stays brand-y but becomes a deliberate
   offset frame rather than a clip-art border. */
.csbykp-modernize .two-column .inner .content {
  gap: clamp(var(--gm-s6), 5vw, var(--gm-s8));
  align-items: center;
}
.csbykp-modernize .two-column .inner .content .image-wrap {
  position: relative;
  /* Creates the stacking context the z-index:-1 frame below needs; without
     it the frame falls behind the section background entirely. */
  z-index: 0;
}
.csbykp-modernize .two-column .inner .content .image-wrap .image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--gm-r-lg);
  box-shadow: var(--gm-shadow);
}
/* .video is NOT a second photo — it is an absolutely positioned overlay badge
   the legacy sheet sizes at 240x260 (200x200 under 1130px). Pass 3 bundled it
   in with .image and gave it width:100%/height:auto, which at (0,6,0) beat the
   legacy (0,5,0) rule and blew the badge up to the full width of the wrapper.
   That is the oversized thumbnail spilling out of the frame in
   docs/kenny-review/2026-09-07-two-column-weird-border-1.png. Size stays with
   the legacy sheet; only the finish is refined here. */
.csbykp-modernize .two-column .inner .content .image-wrap .video {
  border-radius: var(--gm-r);
  box-shadow: var(--gm-shadow-lift);
  object-fit: cover;
}
/* No decorative frame here.
   The theme already ships an editor-controlled red border on this block —
   .bordered-section .inner .content .image-wrap gets `border: 5px solid
   var(--red)` when the ACF "border_enable" toggle is on. The offset frame
   added in Pass 3 drew a SECOND red rectangle over that one, which is the
   "weird borders" in docs/kenny-review/2026-09-07-two-column-weird-border-*.
   The block's own border is the brand device; this layer just gives it a
   softer radius and shadow. */
.csbykp-modernize .two-column .inner .content .image-wrap {
  position: relative;
}
.csbykp-modernize .bordered-section .inner .content .image-wrap {
  border-width: 4px;
  border-radius: var(--gm-r-lg);
  box-shadow: var(--gm-shadow);
  overflow: hidden;
}
.csbykp-modernize .bordered-section .inner .content .image-wrap .image {
  border-radius: calc(var(--gm-r-lg) - 6px);
  display: block;
}

.csbykp-modernize .two-column .inner .content .content-wrap {
  font-family: var(--gm-body);
  font-size: var(--gm-fs-base);
  line-height: 1.68;
  color: var(--gm-ink-soft);
}
.csbykp-modernize .two-column .inner .content .content-wrap .button {
  display: inline-flex;
  align-items: center;
  margin-top: var(--gm-s5);
  padding: 14px 26px;
  border-radius: var(--gm-r-pill);
  background: var(--gm-red-strong);
  color: #fff;
  font-family: var(--gm-body);
  font-size: 15px;
  font-weight: 600;
  transition: background-color var(--gm-dur-1) var(--gm-ease);
}
.csbykp-modernize .two-column .inner .content .content-wrap .button:hover {
  background: var(--gm-red-darker);
  color: #fff;
}

/* Slider heading row shares the section language; its button becomes a real
   pill instead of a bare link. */
.csbykp-modernize .slider .inner .heading-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gm-s4);
  margin-bottom: var(--gm-s6);
}
.csbykp-modernize .slider .inner .heading-wrap .btn a {
  display: inline-flex;
  align-items: center;
  padding: 13px 24px;
  border-radius: var(--gm-r-pill);
  border: 2px solid var(--gm-red-strong);
  background-color: var(--gm-red-strong);
  color: #fff;
  font-family: var(--gm-body);
  font-size: 15px;
  font-weight: 600;
  transition: background-color var(--gm-dur-1) var(--gm-ease),
              border-color var(--gm-dur-1) var(--gm-ease),
              color var(--gm-dur-1) var(--gm-ease);
}
.csbykp-modernize .slider .inner .heading-wrap .btn a:hover,
.csbykp-modernize .slider .inner .heading-wrap .btn a:focus-visible {
  background-color: var(--gm-red-darker);
  border-color: var(--gm-red-darker);
  color: #fff;
}
.csbykp-modernize .slider .project-navigation {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(14, 14, 16, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color var(--gm-dur-1) var(--gm-ease);
}
.csbykp-modernize .slider .project-navigation:hover { background: var(--gm-red-strong); }
.csbykp-modernize .slider .project-navigation::after { display: none; }
.csbykp-modernize .slider .project-navigation svg { width: 16px; height: 16px; }
.csbykp-modernize .slider .swiper-slide img {
  border-radius: var(--gm-r-lg);
  box-shadow: var(--gm-shadow-sm);
}

/* Testimonial / blog cards pick up the same surface as the value cards. */
.csbykp-modernize .testimonials .testimonial,
.csbykp-modernize .our-blogs .blog {
  background: var(--gm-surface);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-r-lg);
  box-shadow: var(--gm-shadow-sm);
  transition: transform var(--gm-dur-2) var(--gm-ease), box-shadow var(--gm-dur-2) var(--gm-ease);
}
.csbykp-modernize .testimonials .testimonial:hover,
.csbykp-modernize .our-blogs .blog:hover {
  transform: translateY(-3px);
  box-shadow: var(--gm-shadow);
}

/* Partner / icon logo rows — even, calm, greyscale until hover.
   Legacy paints each icon as a grey 200×241 card with a drop shadow
   (style.css .icon-boxes). That is the Woo-template leftover Kenny
   screenshotted. Kill the box at every width; the mark + caption is enough. */
.csbykp-modernize .our-partners .inner .image-wrap .logo-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--gm-s6) var(--gm-s5);
  align-items: start;
  justify-items: center;
}
.csbykp-modernize .icon-boxes .inner .icons-group {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 20px;
  align-items: start;
  justify-items: stretch;
}
.csbykp-modernize .icon-boxes .inner .icons-group .icon,
.csbykp-modernize .icon-boxes .inner .icons-group .icon:last-child {
  width: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}
.csbykp-modernize .icon-boxes .inner .icons-group .icon p,
.csbykp-modernize .icon-boxes .inner .icons-group .icon:last-child p {
  margin-top: var(--gm-s3);
  font-family: var(--gm-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gm-ink);
}
.csbykp-modernize .our-partners .inner .image-wrap .logo-group .logo img {
  max-width: 100%;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
}
.csbykp-modernize .icon-boxes .inner .icons-group .icon img {
  max-width: 88px;
  max-height: 88px;
  width: 88px;
  height: 88px;
  object-fit: contain;
  border: 0;
  box-shadow: none;
  background: transparent;
  filter: none;
  opacity: 1;
}
.csbykp-modernize .our-partners .inner .image-wrap .logo-group .logo:hover img,
.csbykp-modernize .icon-boxes .inner .icons-group .icon:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* Applications — legacy draws a 1px black ring on every circular mark. */
.csbykp-modernize .applications .inner .content-wrap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
  width: 100%;
  justify-content: stretch;
}
.csbykp-modernize .applications .inner .content-wrap .image-text-wrap {
  width: auto;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  text-decoration: none;
  color: #111111;
}
.csbykp-modernize .applications .inner .content-wrap .image-text-wrap .image-wrap,
.csbykp-modernize .applications .inner .content-wrap .image-text-wrap .image-wrap .logo {
  border: 0;
  box-shadow: none;
  outline: none;
  padding: 0;
  background: transparent;
}
.csbykp-modernize .applications .inner .content-wrap .image-text-wrap .image-wrap .logo {
  object-fit: contain;
}
.csbykp-modernize .applications .inner .content-wrap .image-text-wrap .name {
  margin-left: 0;
  font-family: var(--gm-display);
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--gm-ink);
}

/* --------------------------------------------------------------------------
   6b. Trust / awards band
   -------------------------------------------------------------------------- */
.gm-trust-band {
  position: relative;
  background: var(--gm-canvas-deep);
  color: #fff;
  border: 0;
  padding: var(--gm-s8) var(--gm-gutter);
}
.gm-trust-band::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(237, 28, 36, 0.9) 0%, rgba(237, 28, 36, 0.10) 55%, rgba(237, 28, 36, 0) 100%);
}
/* On the homepage the band sits directly under the hero. Both are dark, so
   losing the hard seam lets them read as one composed block rather than two
   stacked strips — the single biggest "designed vs themed" tell on this page. */
.csbykp-modernize .banner + .gm-trust-band {
  margin-top: -1px;
  padding-top: var(--gm-s9);
}
.csbykp-modernize .banner + .gm-trust-band::before { opacity: 0.55; }
.csbykp-modernize .banner + .gm-trust-band::after {
  content: "";
  position: absolute;
  inset: -120px 0 auto 0;
  height: 120px;
  pointer-events: none;
  /* Ends on the band's exact colour so the two blocks converge with no step. */
  background: linear-gradient(to bottom, rgba(18, 18, 20, 0) 0%, rgba(18, 18, 20, 0.72) 62%, var(--gm-canvas-deep) 100%);
}
.gm-trust-band__inner {
  max-width: var(--gm-shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gm-s6) var(--gm-s5);
}
.gm-trust-band__title {
  grid-column: 1 / -1;
  margin: 0 0 var(--gm-s2);
  font-family: var(--gm-body);
  font-size: var(--gm-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--gm-tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-align: var(--gm-head-align);
}
.gm-trust-band .gm-trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--gm-s4);
  padding-left: var(--gm-s5);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
/* The divider belongs *between* items, never against the shell's own edge. */
.gm-trust-band .gm-trust-item:first-of-type { padding-left: 0; border-left: 0; }
@media (max-width: 575px) {
  .gm-trust-band .gm-trust-item { padding-left: 0; border-left: 0; }
}
.gm-trust-band .gm-trust-item__icon {
  background: rgba(237, 28, 36, 0.18);
  color: #FF6169;
}
.gm-trust-band .gm-trust-item__label { color: #fff; }
.gm-trust-band .gm-trust-item__meta { color: rgba(255, 255, 255, 0.68); }

.gm-trust-item { display: flex; align-items: flex-start; gap: var(--gm-s4); }
.gm-trust-item__icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--gm-r-sm);
  background: var(--gm-red-tint);
  color: var(--gm-red-strong);
}
.gm-trust-item__icon svg { width: 21px; height: 21px; }
.gm-trust-item__logo { flex: none; max-height: 52px; width: auto; }
.gm-trust-item__label {
  margin: 0;
  font-family: var(--gm-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--gm-ink);
}
.gm-trust-item__meta {
  margin: 5px 0 0;
  font-family: var(--gm-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--gm-ink-soft);
}

/* Compact variant — the single-product trust strip. */
.gm-trust-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--gm-s4);
  margin: var(--gm-s5) 0 0;
  padding: var(--gm-s5);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-r);
  background: var(--gm-canvas);
}
.gm-trust-strip .gm-trust-item__icon { width: 34px; height: 34px; }
.gm-trust-strip .gm-trust-item__icon svg { width: 17px; height: 17px; }
.gm-trust-strip .gm-trust-item__label { font-size: 14px; }
.gm-trust-strip .gm-trust-item__meta { font-size: 13px; }

/* --------------------------------------------------------------------------
   6c. Mid/end page CTA band
   -------------------------------------------------------------------------- */
.gm-cta-band {
  position: relative;
  padding: var(--gm-s9) var(--gm-gutter);
  background:
    radial-gradient(90% 140% at 12% 0%, rgba(237, 28, 36, 0.20) 0%, rgba(237, 28, 36, 0) 60%),
    var(--gm-canvas-deep);
  color: #fff;
  overflow: hidden;
}
.gm-cta-band__inner {
  position: relative;
  max-width: var(--gm-shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gm-s6) var(--gm-s7);
}
.gm-cta-band__copy { flex: 1 1 420px; min-width: 0; }
.gm-cta-band__eyebrow {
  margin: 0 0 var(--gm-s3);
  font-family: var(--gm-body);
  font-size: var(--gm-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--gm-tracking-wide);
  text-transform: uppercase;
  color: #CF0405;
}
.csbykp-modernize .gm-cta-band h2.gm-cta-band__title,
.gm-cta-band__title {
  margin: 0;
  font-family: var(--gm-display);
  font-size: var(--gm-fs-h2);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: var(--gm-tracking-tight);
  color: #F5F6F7;
  text-wrap: balance;
  /* A display line long enough to run into the buttons is a layout accident
     waiting on the next copy edit. Cap the measure instead. */
  max-width: 20ch;
}
.gm-cta-band__sub {
  margin: var(--gm-s4) 0 0;
  max-width: 52ch;
  font-family: var(--gm-body);
  font-size: var(--gm-fs-lead);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.76);
}
.gm-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gm-s3);
  flex: 0 0 auto;
}
@media (max-width: 575px) {
  .gm-cta-band__actions { width: 100%; }
  .gm-cta-band__actions .gm-btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   7. Shop archive + product cards
   -------------------------------------------------------------------------- */
.csbykp-modernize .archive-products { padding-bottom: var(--gm-section-y); }
.csbykp-modernize .archive-products .inner { max-width: var(--gm-shell); }
.csbykp-modernize .archive-products .inner .mega-wrap .title {
  font-family: var(--gm-display);
  font-size: var(--gm-fs-h1);
  font-weight: 700;
  letter-spacing: var(--gm-tracking-tight);
  line-height: 1.04;
  padding-top: var(--gm-s7);
}

.gm-shop-intro {
  max-width: 62ch;
  margin: var(--gm-s3) 0 var(--gm-s2);
  color: var(--gm-ink-soft);
  font-family: var(--gm-body);
  font-size: var(--gm-fs-lead);
  line-height: 1.62;
}
/* Below 575px the legacy sheet pins the archive title and filter bar to the
   viewport, so the intro would collide with them. */
@media (max-width: 575px) {
  .gm-shop-intro { display: none; }
}

.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: start;
  gap: var(--gm-s5);
  padding: var(--gm-s7) 0;
  border-top: 1px solid var(--gm-line);
}
@media (max-width: 575px) {
  .csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products {
    grid-template-columns: 1fr;
  }
}

.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product {
  width: auto;
  margin-bottom: 0;
  padding: 0;
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-r-lg);
  background: var(--gm-surface);
  box-shadow: var(--gm-shadow-sm);
  transition: transform var(--gm-dur-2) var(--gm-ease),
              box-shadow var(--gm-dur-2) var(--gm-ease),
              border-color var(--gm-dur-2) var(--gm-ease);
}
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product:hover,
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--gm-shadow-lift);
  border-color: rgba(237, 28, 36, 0.42);
}
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product .inner {
  border-radius: calc(var(--gm-r-lg) - 1px);
  overflow: hidden;
}
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product .inner .top-wrap { flex: 1; }
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product .inner .top-wrap .logo-price-wrap {
  padding: 0;
  min-height: 0;
}
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product .inner .top-wrap .logo-price-wrap:empty {
  display: none;
}

/* Fixed aspect box on a tinted plate — product shots stop being stretched
   and the grid reads evenly whatever the source crop. */
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product .inner .top-wrap .image {
  width: auto;
  height: auto;
  aspect-ratio: 4 / 3;
  margin: 12px 16px 8px;
  padding: 12px;
  align-items: center;
  z-index: 0;
  border-radius: 0;
  background: #FFFFFF;
  overflow: hidden;
}
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product .inner .top-wrap .image img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  border-radius: 0;
  transition: transform var(--gm-dur-3) var(--gm-ease);
}
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product:hover .inner .top-wrap .image img {
  transform: scale(1.05);
}

.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product .inner .top-wrap .content {
  flex: 1;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  padding: 0 var(--gm-s5);
}
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product .inner .top-wrap .content .product-name,
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product .inner .top-wrap .content .woocommerce-loop-product__title {
  width: 100%;
  text-align: left;
  font-family: var(--gm-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--gm-ink);
  margin-bottom: var(--gm-s2);
}
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product .inner .top-wrap .content .product-desc {
  text-align: left;
  color: var(--gm-ink-soft);
  font-size: 14px;
  line-height: 1.58;
  margin-bottom: var(--gm-s4);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  overflow: hidden;
}

/* Cards in a row share a height, so price row and actions line up. */
.gm-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gm-s1) var(--gm-s3);
  width: 100%;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--gm-line);
}
.gm-card-meta__price {
  font-family: var(--gm-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--gm-ink);
}
.gm-card-meta__price .price { font-size: inherit; color: inherit; }
.gm-card-meta__price del { color: var(--gm-muted); font-weight: 400; font-size: 15px; margin-right: var(--gm-s2); }
.gm-card-meta__price ins { text-decoration: none; }
/* "Price on request" is copy, not a figure — don't set it in the price face. */
.gm-card-meta__price--request {
  font-family: var(--gm-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--gm-muted);
}
.gm-card-meta__stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--gm-body);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.gm-card-meta__stock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.gm-card-meta__stock--in { color: #1E7A4B; }
.gm-card-meta__stock--out { color: var(--gm-muted); }
.gm-card-meta__stock--backorder { color: #96650B; }

.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product .inner .bottom-wrap {
  border-top: 1px solid var(--gm-line);
}
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product .inner .bottom-wrap .cart form .buy-now-button,
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product .inner .bottom-wrap .shop form .buy-now-button,
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product .inner .bottom-wrap .shop .buy-now-button {
  font-family: var(--gm-body);
  font-size: 15px;
  font-weight: 600;
  padding: 16px 0;
  transition: background-color var(--gm-dur-1) var(--gm-ease), color var(--gm-dur-1) var(--gm-ease);
}
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product .inner .bottom-wrap .shop .buy-now-button:hover {
  background-color: var(--gm-red-strong);
  color: #fff;
}

.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .sidebar {
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-r-lg);
  box-shadow: var(--gm-shadow-sm);
}

/* ---- Part numbers (Seedburo-style SKU, Pass 12/13 tokens) ---------------
   Industrial buyers search by QuickBooks item number. Cards and the PDP
   summary print Woo `_sku` as "Part #"; nothing is invented when SKU is empty. */
.gm-part-number {
  margin: 0 0 var(--gm-s2);
  font-family: var(--gm-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: var(--gm-ink-soft);
  text-transform: none;
}
.gm-part-number__label {
  color: var(--gm-muted);
  font-weight: 600;
}
.gm-part-number__value {
  color: var(--gm-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.gm-seller {
  margin: 0 0 var(--gm-s2);
  font-size: 13px;
  line-height: 1.45;
  color: var(--gm-ink);
}
.gm-seller__origin {
  font-weight: 700;
}
.woocommerce-loop-product__title a.gm-card-title {
  color: inherit;
  text-decoration: none;
}
.woocommerce-loop-product__title a.gm-card-title:hover,
.woocommerce-loop-product__title a.gm-card-title:focus {
  color: var(--gm-red, #CF0405);
}
button.btn-lr {
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 18px;
}
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product .inner .top-wrap .content .gm-part-number {
  margin: calc(var(--gm-s2) * -1) 0 var(--gm-s3);
}
.csbykp-modernize .single-product-wrap .summary .gm-part-number--single {
  margin: 0 0 var(--gm-s4);
  font-size: 15px;
}
.csbykp-modernize .single-product-wrap .summary .product_title + .gm-part-number--single {
  margin-top: calc(var(--gm-s3) * -1);
}
.gm-part-number--sticky {
  margin: 0 0 2px;
  font-size: 12px;
}
.gm-sticky-atc .gm-part-number--sticky {
  color: var(--gm-muted);
}
.gm-part-number--upsell {
  margin: 0 0 var(--gm-s2);
}

/* Brand filter — wired to product_brand / pa_brands. */
.gm-brand-filter {
  margin: 0 0 var(--gm-s5);
  padding-bottom: var(--gm-s5);
  border-bottom: 1px solid var(--gm-line);
  font-family: var(--gm-body);
}
.gm-brand-filter__label {
  display: block;
  margin: 0 0 var(--gm-s2);
  font-size: 14px;
  font-weight: 600;
  color: var(--gm-ink);
}
.gm-brand-filter__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gm-s2);
  align-items: stretch;
}
.gm-brand-filter__select {
  flex: 1 1 140px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--gm-line-strong);
  border-radius: var(--gm-r-sm);
  background: var(--gm-surface);
  color: var(--gm-ink);
  font-size: 15px;
}
.gm-brand-filter__select:focus {
  outline: 2px solid var(--gm-red-strong);
  outline-offset: 2px;
}
.gm-brand-filter__apply {
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--gm-r-sm);
  background: var(--gm-red-strong);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.gm-brand-filter__apply:hover {
  background: var(--gm-red-darker);
}
.gm-brand-filter.is-enhanced .gm-brand-filter__apply {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gm-search-hit {
  width: 100%;
  padding: var(--gm-s5);
  margin-bottom: var(--gm-s4);
  background: var(--gm-surface);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-r-lg);
}
.gm-search-hit__title {
  margin: 0 0 var(--gm-s2);
  font-family: var(--gm-display);
  font-size: 20px;
}
.gm-search-hit__title a { color: var(--gm-ink); }
.gm-search-empty { margin-top: var(--gm-s6); }

/* ---- Empty shop ----------------------------------------------------------
   The state staging is actually in until the QB catalog lands, so it has to
   read as a designed placeholder rather than a broken archive. */
.csbykp-empty-shop {
  position: relative;
  max-width: 680px;
  margin: var(--gm-s8) auto var(--gm-s9);
  padding: var(--gm-s8) var(--gm-s7);
  text-align: center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(237, 28, 36, 0.07) 0%, rgba(237, 28, 36, 0) 62%),
    var(--gm-surface);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-r-xl);
  box-shadow: var(--gm-shadow);
  font-family: var(--gm-body);
  color: var(--gm-ink-soft);
  overflow: hidden;
}
.csbykp-empty-shop::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gm-red) 0%, rgba(237, 28, 36, 0.12) 100%);
}
@media (max-width: 575px) {
  .csbykp-empty-shop { margin: var(--gm-s6) auto var(--gm-s8); padding: var(--gm-s7) var(--gm-s5); }
}
.csbykp-empty-shop__mark {
  width: 84px;
  height: 84px;
  margin: 0 auto var(--gm-s5);
  display: grid;
  place-items: center;
  border-radius: var(--gm-r-lg);
  background: linear-gradient(150deg, var(--gm-canvas-deep) 0%, #23232a 100%);
  color: #fff;
  box-shadow: var(--gm-shadow);
  position: relative;
  overflow: hidden;
}
.csbykp-empty-shop__mark::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--gm-red);
}
.csbykp-empty-shop__mark svg { width: 40px; height: 40px; }
.csbykp-empty-shop__assurances {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gm-s3) var(--gm-s5);
  margin: 0 0 var(--gm-s6);
  padding: var(--gm-s5) 0 0;
  border-top: 1px solid var(--gm-line);
}
.csbykp-empty-shop__assurances li {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-s2);
  font-family: var(--gm-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gm-ink-soft);
  white-space: nowrap;
}
.csbykp-empty-shop__assurances svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--gm-red-strong);
}
.csbykp-empty-shop h2 {
  margin: 0 0 var(--gm-s3);
  font-family: var(--gm-display);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: var(--gm-tracking-tight);
  color: var(--gm-ink);
}
.csbykp-empty-shop p {
  margin: 0 auto var(--gm-s4);
  max-width: 46ch;
  font-size: var(--gm-fs-base);
  line-height: 1.62;
}
.csbykp-empty-shop p a {
  color: var(--gm-red-strong);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.csbykp-empty-shop p a:hover { color: var(--gm-red-darker); }
.csbykp-empty-shop__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gm-s3);
  justify-content: center;
  margin: var(--gm-s6) 0 var(--gm-s5);
}
.csbykp-empty-shop__contact {
  margin: 0;
  padding-top: var(--gm-s5);
  border-top: 1px solid var(--gm-line);
  font-size: 14px;
  line-height: 1.6;
  color: var(--gm-muted);
}
.csbykp-empty-shop__contact a { color: var(--gm-red-strong); font-weight: 600; }
.csbykp-empty-shop__contact a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   8. Single product

   The template already lays out gallery (40%) beside summary+tabs (60%);
   this section tightens that grid rather than rebuilding it.
   -------------------------------------------------------------------------- */
.csbykp-modernize .single-product-wrap .single-product { gap: 40px; }
@media (max-width: 991px) {
  .csbykp-modernize .single-product-wrap .single-product { gap: 28px; }
}

.csbykp-modernize .single-product-wrap .single-product .woocommerce-product-gallery {
  width: calc(42% - 20px);
}
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap {
  width: calc(58% - 20px);
  border-radius: var(--gm-radius-lg);
  box-shadow: var(--gm-shadow-sm);
}
@media (max-width: 767px) {
  .csbykp-modernize .single-product-wrap .single-product .woocommerce-product-gallery,
  .csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap { width: 100%; }
}
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner {
  border-radius: calc(var(--gm-radius-lg) - 2px);
}

/* The gallery is short and the summary + tabs column is long, so on desktop
   the imagery follows the reader instead of scrolling away immediately. */
@media (min-width: 992px) {
  .csbykp-modernize .single-product-wrap .single-product .woocommerce-product-gallery {
    position: sticky;
    top: 148px;
    align-self: flex-start;
  }
}

.csbykp-modernize .single-product-wrap .single-product .woocommerce-product-gallery .images-wrap {
  border-radius: var(--gm-radius-lg);
}
.csbykp-modernize .single-product-wrap .single-product .woocommerce-product-gallery .images-wrap .inner {
  border-radius: calc(var(--gm-radius-lg) - 2px);
  background-color: #fff;
  overflow: hidden;
}
/* scale(1.2) on hover pushed the shot outside its frame — keep the zoom
   inside the rounded panel. */
.csbykp-modernize .single-product-wrap .single-product .woocommerce-product-gallery .images-wrap .inner .woocommerce-product-image__wrapper {
  overflow: hidden;
  border-radius: var(--gm-radius);
}
.csbykp-modernize .single-product-wrap .single-product .woocommerce-product-gallery .images-wrap .inner .woocommerce-product-image__wrapper .woocommerce-product-gallery__image:hover {
  scale: 1.06;
}

.csbykp-modernize .single-product-wrap .summary .product_title {
  font-family: var(--gm-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.csbykp-modernize .single-product-wrap .summary .price {
  font-family: var(--gm-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--gm-ink);
  margin: 0 0 18px;
}
.csbykp-modernize .single-product-wrap .summary .price del { color: var(--gm-muted); font-weight: 400; font-size: 20px; }
.csbykp-modernize .single-product-wrap .summary .price ins { text-decoration: none; }
.csbykp-modernize .single-product-wrap .summary .woocommerce-product-details__short-description {
  color: var(--gm-ink-soft);
  font-size: 16px;
  line-height: 1.65;
}

.csbykp-modernize .single-product-wrap .summary form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
}
.csbykp-modernize .single-product-wrap .summary form.cart .quantity input.qty {
  height: 50px;
  padding: 0 10px;
  border: 1px solid #C9C9CD;
  border-radius: var(--gm-radius-sm);
  font-size: 16px;
}
.csbykp-modernize .single-product-wrap .summary button.single_add_to_cart_button,
.csbykp-modernize .single-product-wrap .summary .buy-now-button {
  flex: 1 1 180px;
  min-height: 50px;
  border-radius: 56px;
  background-color: var(--gm-red-strong);
  border: 2px solid var(--gm-red-strong);
  color: #fff;
  font-family: var(--gm-body);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  transition: background-color 0.25s var(--gm-ease), border-color 0.25s var(--gm-ease);
}
.csbykp-modernize .single-product-wrap .summary button.single_add_to_cart_button:hover,
.csbykp-modernize .single-product-wrap .summary .buy-now-button:hover {
  background-color: var(--gm-red-darker);
  border-color: var(--gm-red-darker);
  color: #fff;
}

.csbykp-modernize .single-product-wrap .summary .product_meta {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--gm-line);
  font-size: 14px;
  color: var(--gm-muted);
}

/* Sticky buy bar — appears on every viewport once the real add-to-cart
   controls have scrolled out of view, and drives that same form. */
.gm-sticky-atc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: saturate(140%) blur(6px);
  border-top: 1px solid var(--gm-line);
  box-shadow: 0 -6px 24px rgba(17, 17, 17, 0.14);
  transform: translateY(115%);
  visibility: hidden;
  transition: transform 0.3s var(--gm-ease), visibility 0s linear 0.3s;
}
@media (min-width: 992px) {
  .gm-sticky-atc {
    bottom: 20px;
    left: 20px;
    right: 20px;
    border: 1px solid var(--gm-line);
    border-radius: 56px;
    padding: 12px 14px 12px 28px;
  }
}
.gm-sticky-atc.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.3s var(--gm-ease), visibility 0s;
}
.gm-sticky-atc__text { min-width: 0; }
.gm-sticky-atc__title {
  margin: 0;
  font-family: var(--gm-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--gm-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gm-sticky-atc__price {
  font-family: var(--gm-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--gm-ink);
}
.gm-sticky-atc__price del { font-size: 14px; font-weight: 400; color: var(--gm-muted); }
.gm-sticky-atc__price ins { text-decoration: none; }
.gm-sticky-atc .gm-btn { flex: none; padding: 13px 26px; }

/* Woo pins its notices bottom-right; lift them clear of the bar. */
.csbykp-modernize.gm-single-product .woocommerce-notices-wrapper,
.csbykp-modernize.gm-single-product .woocommerce-error { bottom: 96px; }

/* --------------------------------------------------------------------------
   9. Cart / checkout polish (light touch — Woo templates untouched)

   Scoped to the theme's own gm-cart-page / gm-checkout-page body classes
   rather than `.woocommerce`, which this theme's templates never emit.
   -------------------------------------------------------------------------- */
.csbykp-modernize.gm-cart-page .cart_totals,
.csbykp-modernize.gm-checkout-page #order_review,
.csbykp-modernize.gm-checkout-page .woocommerce-checkout-review-order {
  padding: 24px;
  background: var(--gm-surface);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-lg);
  box-shadow: var(--gm-shadow-sm);
}
.csbykp-modernize.gm-cart-page table.shop_table,
.csbykp-modernize.gm-checkout-page table.shop_table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius);
  overflow: hidden;
}
.csbykp-modernize.gm-cart-page table.shop_table th,
.csbykp-modernize.gm-checkout-page table.shop_table th {
  font-family: var(--gm-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gm-muted);
  padding: 14px 16px;
}
.csbykp-modernize.gm-cart-page table.shop_table td,
.csbykp-modernize.gm-checkout-page table.shop_table td { padding: 16px; }

.csbykp-modernize.gm-cart-page form .form-row label,
.csbykp-modernize.gm-checkout-page form .form-row label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--gm-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--gm-ink);
}
.csbykp-modernize.gm-cart-page form .form-row .required,
.csbykp-modernize.gm-checkout-page form .form-row .required {
  color: var(--gm-red-strong);
  text-decoration: none;
}
.csbykp-modernize.gm-cart-page form .form-row input.input-text,
.csbykp-modernize.gm-cart-page form .form-row textarea,
.csbykp-modernize.gm-cart-page form .form-row select,
.csbykp-modernize.gm-checkout-page form .form-row input.input-text,
.csbykp-modernize.gm-checkout-page form .form-row textarea,
.csbykp-modernize.gm-checkout-page form .form-row select,
.csbykp-modernize.gm-checkout-page .select2-container .select2-selection--single {
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid #C9C9CD;
  border-radius: var(--gm-radius-sm);
  font-family: var(--gm-body);
  font-size: 16px;
  background-color: #fff;
}
.csbykp-modernize.gm-cart-page form .form-row input.input-text:focus,
.csbykp-modernize.gm-cart-page form .form-row textarea:focus,
.csbykp-modernize.gm-cart-page form .form-row select:focus,
.csbykp-modernize.gm-checkout-page form .form-row input.input-text:focus,
.csbykp-modernize.gm-checkout-page form .form-row textarea:focus,
.csbykp-modernize.gm-checkout-page form .form-row select:focus {
  border-color: var(--gm-red-strong);
}

.csbykp-modernize.gm-cart-page a.button,
.csbykp-modernize.gm-cart-page button.button,
.csbykp-modernize.gm-cart-page input.button,
.csbykp-modernize.gm-checkout-page a.button,
.csbykp-modernize.gm-checkout-page button.button,
.csbykp-modernize.gm-checkout-page input.button,
.csbykp-modernize.gm-checkout-page #place_order {
  border-radius: 0;
  padding: 14px 26px;
  font-family: var(--gm-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.csbykp-modernize.gm-cart-page a.button.alt,
.csbykp-modernize.gm-cart-page button.button.alt,
.csbykp-modernize.gm-checkout-page a.button.alt,
.csbykp-modernize.gm-checkout-page button.button.alt,
.csbykp-modernize.gm-checkout-page #place_order {
  background-color: var(--gm-red-strong);
  border-color: var(--gm-red-strong);
  color: #fff;
}
.csbykp-modernize.gm-cart-page a.button.alt:hover,
.csbykp-modernize.gm-cart-page button.button.alt:hover,
.csbykp-modernize.gm-checkout-page a.button.alt:hover,
.csbykp-modernize.gm-checkout-page button.button.alt:hover,
.csbykp-modernize.gm-checkout-page #place_order:hover {
  background-color: var(--gm-red-darker);
  border-color: var(--gm-red-darker);
  color: #fff;
}

/* Page rhythm so cart and checkout sit on the same grid as everything else. */
.csbykp-modernize.gm-cart-page .woocommerce,
.csbykp-modernize.gm-checkout-page .woocommerce {
  max-width: var(--gm-shell);
  margin: 0 auto;
  padding: var(--gm-section-y) var(--gm-gutter);
}
.csbykp-modernize.gm-cart-page h1,
.csbykp-modernize.gm-checkout-page h1,
.csbykp-modernize.gm-cart-page h2,
.csbykp-modernize.gm-checkout-page h2,
.csbykp-modernize.gm-checkout-page h3 {
  font-family: var(--gm-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--gm-tracking-tight);
  color: var(--gm-ink);
}
.csbykp-modernize.gm-cart-page h1,
.csbykp-modernize.gm-checkout-page h1 { font-size: var(--gm-fs-h2); }
.csbykp-modernize.gm-cart-page h2,
.csbykp-modernize.gm-checkout-page h2 { font-size: var(--gm-fs-h3); }

.csbykp-modernize.gm-cart-page table.shop_table tbody tr:not(:last-child) td,
.csbykp-modernize.gm-checkout-page table.shop_table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--gm-line);
}
.csbykp-modernize.gm-cart-page table.shop_table img,
.csbykp-modernize.gm-checkout-page table.shop_table img {
  border-radius: var(--gm-r-sm);
  border: 1px solid var(--gm-line);
}
.csbykp-modernize.gm-cart-page .quantity input.qty {
  min-height: 46px;
  padding: 0 10px;
  border: 1px solid var(--gm-line-strong);
  border-radius: var(--gm-r-sm);
  font-family: var(--gm-body);
  font-size: var(--gm-fs-base);
}
.csbykp-modernize.gm-cart-page .coupon,
.csbykp-modernize.gm-checkout-page .woocommerce-form-coupon {
  padding: var(--gm-s5);
  border: 1px dashed var(--gm-line-strong);
  border-radius: var(--gm-r);
  background: var(--gm-canvas);
}
.csbykp-modernize.gm-checkout-page #payment,
.csbykp-modernize.gm-checkout-page .woocommerce-checkout-payment {
  border-radius: var(--gm-r-lg);
  background: var(--gm-canvas);
  border: 1px solid var(--gm-line);
}
.csbykp-modernize.gm-checkout-page #payment ul.payment_methods {
  border-bottom: 1px solid var(--gm-line);
  padding: var(--gm-s5);
}
.csbykp-modernize.gm-checkout-page #payment div.form-row { padding: var(--gm-s5); }
.csbykp-modernize.gm-checkout-page #place_order { width: 100%; }
.csbykp-modernize.gm-cart-page .cart_totals table.shop_table td,
.csbykp-modernize.gm-cart-page .cart_totals table.shop_table th { padding: 12px 0; }
.csbykp-modernize.gm-cart-page .cart_totals .order-total .amount,
.csbykp-modernize.gm-checkout-page .order-total .amount {
  font-family: var(--gm-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--gm-ink);
}
.csbykp-modernize.gm-cart-page .woocommerce-cart-form__cart-item .product-remove a,
.csbykp-modernize.gm-cart-page a.remove {
  color: var(--gm-muted);
  transition: color var(--gm-dur-1) var(--gm-ease), background-color var(--gm-dur-1) var(--gm-ease);
}
.csbykp-modernize.gm-cart-page a.remove:hover {
  color: #fff;
  background-color: var(--gm-red-strong);
}

/* Empty cart — the state this site is in until the catalog is synced, so it
   gets the same designed placeholder treatment as the empty shop. */
.csbykp-modernize.gm-cart-page .cart-empty,
.csbykp-modernize.gm-cart-page .wc-empty-cart-message .cart-empty {
  max-width: 46ch;
  margin: 0 auto var(--gm-s5);
  font-family: var(--gm-display);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: var(--gm-tracking-tight);
  line-height: 1.15;
  color: var(--gm-ink);
  text-align: center;
}
.csbykp-modernize.gm-cart-page .cart-empty::before { display: none; }
.csbykp-modernize.gm-cart-page .return-to-shop {
  text-align: center;
  margin: 0 auto;
}
.csbykp-modernize.gm-cart-page .return-to-shop .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 15px 30px;
  border-radius: 0;
  background: var(--gm-red-strong);
  border: 2px solid var(--gm-red-strong);
  color: #fff;
  font-family: var(--gm-body);
  font-size: var(--gm-fs-base);
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(208, 17, 26, 0.28);
  transition: background-color var(--gm-dur-2) var(--gm-ease), transform var(--gm-dur-1) var(--gm-ease);
}
.csbykp-modernize.gm-cart-page .return-to-shop .button:hover {
  background: var(--gm-red-darker);
  border-color: var(--gm-red-darker);
  transform: translateY(-2px);
}
.csbykp-modernize.gm-cart-page .woocommerce-info,
.csbykp-modernize.gm-checkout-page .woocommerce-info {
  border-top-color: var(--gm-red-strong);
  border-radius: var(--gm-r-sm);
  background: var(--gm-canvas);
  font-family: var(--gm-body);
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
.csbykp-modernize .footer {
  position: relative;
  padding: var(--gm-s9) 0 0;
  background-color: var(--gm-chrome);
}
/* Finishes the top edge where the footer meets whatever section precedes it. */
.csbykp-modernize .footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gm-red) 0%, rgba(237, 28, 36, 0.10) 62%, rgba(237, 28, 36, 0) 100%);
}
/* The footer pads its own .inner, where every other block pads the section and
   centres a 1240px shell inside it. Widening the shell by the gutter puts the
   footer's content edge on the same vertical line as the rest of the page. */
.csbykp-modernize .footer .inner {
  max-width: calc(var(--gm-shell) + var(--gm-gutter) * 2);
  align-items: flex-start;
  gap: clamp(var(--gm-s6), 5vw, var(--gm-s8));
  padding: 0 var(--gm-gutter);
}
/* Legacy drops .footer .inner to `flex-direction: column` under 1500px, so on
   every ordinary desktop the link columns fall beneath the address block and
   the right half of the footer is dead space. Grid ignores flex-direction, so
   this restores a real two-column footer without an !important. */
@media (min-width: 992px) {
  .csbykp-modernize .footer .inner {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
    justify-content: stretch;
  }
}
/* Legacy also pads the content group by 15px under 1500px, which knocks the
   address block off the axis the rest of the footer sits on. */
.csbykp-modernize .footer .inner .content-group,
.csbykp-modernize .footer .inner .nav-group { width: 100%; padding-left: 0; padding-right: 0; }
.csbykp-modernize .footer .inner .content-group .logo-wrap { width: 260px; max-width: 70%; }
.csbykp-modernize .footer .inner .content-group .logo-wrap img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.csbykp-modernize .footer .inner .content-group .socials {
  align-items: center;
  gap: var(--gm-s2);
  margin: var(--gm-s6) 0 0;
}
.csbykp-modernize .footer .inner .content-group .socials .socials-text {
  margin: 0 var(--gm-s3) 0 0;
  font-family: var(--gm-body);
  font-size: var(--gm-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--gm-tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.csbykp-modernize .footer .inner .content-group .socials .socials-svg-wrap {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--gm-r-sm);
  color: #fff;
  transition: background-color var(--gm-dur-1) var(--gm-ease),
              border-color var(--gm-dur-1) var(--gm-ease),
              transform var(--gm-dur-1) var(--gm-ease);
}
.csbykp-modernize .footer .inner .content-group .socials .socials-svg-wrap:hover,
.csbykp-modernize .footer .inner .content-group .socials .socials-svg-wrap:focus-visible {
  background-color: var(--gm-red-strong);
  border-color: var(--gm-red-strong);
  transform: translateY(-2px);
}
.csbykp-modernize .footer .inner .content-group .socials .socials-svg {
  width: 20px;
  height: 20px;
  margin: 0;
}
.csbykp-modernize .footer .inner .content-group .socials .socials-svg-wrap:hover .socials-svg { transform: none; }

.csbykp-modernize .footer .inner .nav-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gm-s5);
  align-items: start;
}
.csbykp-modernize .footer .inner .nav-group .group {
  padding: 0;
  margin: 0;
}
.csbykp-modernize .footer .inner .nav-group .group .links-group { gap: 0; }
.csbykp-modernize .footer .inner .nav-group .group .title {
  font-family: var(--gm-body);
  font-size: var(--gm-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--gm-tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--gm-s4);
}
.csbykp-modernize .footer .inner .nav-group .group .links-group .link a,
.csbykp-modernize .footer .inner .nav-group .group .links-group .link h4 {
  font-family: var(--gm-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  margin: 7px 0;
  color: rgba(255, 255, 255, 0.82);
  transition: color var(--gm-dur-1) var(--gm-ease);
}
.csbykp-modernize .footer .inner .nav-group .group .links-group .link a:hover { color: var(--gm-red); }

/* Address / phone / email block. */
.gm-footer-contact {
  margin: var(--gm-s6) 0 0;
  font-family: var(--gm-body);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.gm-footer-contact__name {
  margin: 0 0 var(--gm-s3);
  font-family: var(--gm-display);
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}
.gm-footer-contact ul { list-style: none; margin: 0; padding: 0; }
.gm-footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--gm-s3);
  margin-bottom: var(--gm-s3);
}
.gm-footer-contact li svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  color: var(--gm-red);
}
.gm-footer-contact a { color: rgba(255, 255, 255, 0.9); }
.gm-footer-contact a:hover { color: var(--gm-red); text-decoration: underline; }
.gm-footer-contact address { font-style: normal; }

/* Made in USA / since 1975 cue. */
.gm-footer-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-s2);
  margin-top: var(--gm-s5);
  padding: 9px 16px 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--gm-r-pill);
  font-family: var(--gm-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}
.gm-footer-badge svg { width: 17px; height: 17px; color: var(--gm-red); flex: none; }

.gm-footer-bottom {
  margin-top: var(--gm-s8);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.gm-footer-bottom__inner {
  max-width: calc(var(--gm-shell) + var(--gm-gutter) * 2);
  margin: 0 auto;
  padding: var(--gm-s5) var(--gm-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gm-s3);
  font-family: var(--gm-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.58);
}
.gm-footer-bottom__inner p { margin: 0; }
.gm-footer-legal {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gm-footer-legal:hover { color: var(--gm-red); }

.csbykp-modernize .footer .inner .content-group .copyright { display: none; }

/* --------------------------------------------------------------------------
   11. Contact page + ACF form
   -------------------------------------------------------------------------- */
.csbykp-modernize .contact-page {
  max-width: none;
  margin: 0;
  padding: 0 0 var(--gm-section-y);
  font-family: var(--gm-body);
  color: var(--gm-ink-soft);
  background: var(--gm-canvas);
}

/* Page header band, so /contact/ opens like the rest of the site rather
   than a bare H1 on white. */
.gm-page-head {
  position: relative;
  padding: var(--gm-s8) var(--gm-gutter) calc(var(--gm-s8) + var(--gm-s7));
  background:
    radial-gradient(80% 130% at 8% 0%, rgba(237, 28, 36, 0.22) 0%, rgba(237, 28, 36, 0) 58%),
    var(--gm-canvas-deep);
  color: #fff;
}
.gm-page-head__inner {
  max-width: var(--gm-shell);
  margin: 0 auto;
}
.gm-page-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-s2);
  margin: 0 0 var(--gm-s4);
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--gm-r-pill);
  font-size: var(--gm-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--gm-tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
.gm-page-head__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gm-red);
}
.csbykp-modernize .contact-page .gm-page-head h1,
.gm-page-head h1 {
  margin: 0;
  max-width: 18ch;
  font-family: var(--gm-display);
  font-size: var(--gm-fs-h1);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: var(--gm-tracking-tight);
  color: #fff;
}
.gm-page-head__lede {
  max-width: 56ch;
  margin: var(--gm-s5) 0 0;
  font-size: var(--gm-fs-lead);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

/* The two columns lift up over the head band. */
.gm-contact-layout {
  position: relative;
  max-width: var(--gm-shell);
  margin: calc(var(--gm-s7) * -1) auto 0;
  padding: 0 var(--gm-gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.85fr);
  gap: var(--gm-s6);
  align-items: start;
}
@media (max-width: 900px) {
  .gm-contact-layout { grid-template-columns: minmax(0, 1fr); gap: var(--gm-s5); }
}

/* Sits at the top of the form card, above the fields. */
.gm-contact-lede {
  max-width: 60ch;
  margin: 0 0 var(--gm-s6);
  padding-bottom: var(--gm-s5);
  border-bottom: 1px solid var(--gm-line);
  font-size: var(--gm-fs-base);
  line-height: 1.68;
  color: var(--gm-ink-soft);
}
.gm-contact-lede :first-child { margin-top: 0; }
.gm-contact-lede :last-child { margin-bottom: 0; }
.gm-contact-lede:empty { display: none; }

.gm-contact-form-card {
  padding: clamp(24px, 3.4vw, 44px);
  background: var(--gm-surface);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-r-xl);
  box-shadow: var(--gm-shadow);
}

.gm-contact-aside {
  padding: clamp(24px, 3vw, 36px);
  background: var(--gm-canvas-deep);
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--gm-r-xl);
  box-shadow: var(--gm-shadow);
}
.gm-contact-aside h2 {
  margin: 0 0 var(--gm-s5);
  font-family: var(--gm-display);
  font-size: var(--gm-fs-h3);
  font-weight: 600;
  color: #fff;
}
.gm-contact-aside .gm-footer-contact { margin: 0; }
.gm-contact-aside__hours {
  margin: var(--gm-s5) 0 0;
  padding-top: var(--gm-s5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--gm-fs-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.contact-success {
  display: flex;
  align-items: flex-start;
  gap: var(--gm-s3);
  margin: 0 0 var(--gm-s6);
  padding: var(--gm-s4) var(--gm-s5);
  background: #EAF6EE;
  border: 1px solid #2F4C3F;
  border-left-width: 5px;
  border-radius: var(--gm-r-sm);
  color: #204333;
  font-size: 15px;
  line-height: 1.5;
}
.contact-success__icon { flex: none; margin-top: 1px; }

/* ACF frontend form: real labels, consistent inputs, branded submit. */
.csbykp-modernize .acf-form .acf-field { margin-bottom: var(--gm-s5); padding: 0; border: 0; }
.csbykp-modernize .acf-form .acf-label label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--gm-body);
  font-size: var(--gm-fs-sm);
  font-weight: 600;
  color: var(--gm-ink);
}
.csbykp-modernize .acf-form .acf-label label .acf-required { color: var(--gm-red-strong); }
.csbykp-modernize .acf-form .acf-input input[type="text"],
.csbykp-modernize .acf-form .acf-input input[type="email"],
.csbykp-modernize .acf-form .acf-input input[type="url"],
.csbykp-modernize .acf-form .acf-input input[type="tel"],
.csbykp-modernize .acf-form .acf-input input[type="number"],
.csbykp-modernize .acf-form .acf-input textarea,
.csbykp-modernize .acf-form .acf-input select {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border: 1px solid var(--gm-line-strong);
  border-radius: var(--gm-r-sm);
  font-family: var(--gm-body);
  font-size: var(--gm-fs-base);
  line-height: 1.4;
  color: var(--gm-ink);
  background: #fff;
  transition: border-color var(--gm-dur-1) var(--gm-ease), box-shadow var(--gm-dur-1) var(--gm-ease);
}
.csbykp-modernize .acf-form .acf-input textarea { min-height: 170px; resize: vertical; }
.csbykp-modernize .acf-form .acf-input input:focus,
.csbykp-modernize .acf-form .acf-input textarea:focus,
.csbykp-modernize .acf-form .acf-input select:focus {
  border-color: var(--gm-red-strong);
  box-shadow: 0 0 0 3px rgba(208, 17, 26, 0.16);
}
.csbykp-modernize .acf-form .acf-form-submit { margin-top: var(--gm-s2); }
.csbykp-modernize .acf-form .acf-form-submit .button,
.csbykp-modernize .acf-form input.acf-button {
  min-height: 52px;
  padding: 15px 34px;
  border-radius: var(--gm-r-pill);
  background-color: var(--gm-red-strong);
  border: 2px solid var(--gm-red-strong);
  color: #fff;
  font-family: var(--gm-body);
  font-size: var(--gm-fs-base);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(208, 17, 26, 0.28);
  transition: background-color var(--gm-dur-2) var(--gm-ease),
              border-color var(--gm-dur-2) var(--gm-ease),
              transform var(--gm-dur-1) var(--gm-ease);
}
.csbykp-modernize .acf-form .acf-form-submit .button:hover,
.csbykp-modernize .acf-form input.acf-button:hover {
  background-color: var(--gm-red-darker);
  border-color: var(--gm-red-darker);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   12. 404 — same language as the legal / simple pages
   -------------------------------------------------------------------------- */
.csbykp-modernize .gm-page-head + .gm-error-404 { padding-top: 0; }
.gm-error-404 {
  padding: 0 var(--gm-gutter) var(--gm-s9);
  background: var(--gm-canvas);
}
.gm-error-404__inner {
  position: relative;
  max-width: 640px;
  margin: calc(var(--gm-s7) * -1) auto 0;
  padding: clamp(32px, 4vw, 56px);
  text-align: center;
  background: var(--gm-surface);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-r-xl);
  box-shadow: var(--gm-shadow-sm);
  font-family: var(--gm-body);
  color: var(--gm-ink-soft);
}
.gm-error-404__code {
  margin: 0;
  font-family: var(--gm-display);
  font-size: clamp(64px, 12vw, 116px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--gm-red);
  opacity: 0.16;
}
.gm-error-404 h1 {
  margin: -10px 0 var(--gm-s3);
  font-family: var(--gm-display);
  font-size: var(--gm-fs-h2);
  font-weight: 700;
  letter-spacing: var(--gm-tracking-tight);
  color: var(--gm-ink);
}
.gm-error-404__lede {
  margin: 0 auto;
  max-width: 46ch;
  font-size: var(--gm-fs-base);
  line-height: 1.62;
}
.gm-error-404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gm-s3);
  margin: var(--gm-s6) 0 var(--gm-s6);
}
.gm-error-404__contact {
  margin: 0;
  padding-top: var(--gm-s5);
  border-top: 1px solid var(--gm-line);
  font-size: var(--gm-fs-sm);
  color: var(--gm-muted);
}
.gm-error-404__contact a { color: var(--gm-red-strong); font-weight: 600; }
.gm-error-404__contact a:hover { text-decoration: underline; }

/* The native option list inherits the control's colours on some platforms,
   which would render white-on-red and unreadable. Pin it back. */

/* The plugin owns where the widget sits, but a floating placement must not
   land under the sticky header or behind the sticky add-to-cart bar. These
   only apply when the plugin has actually positioned it as a floater. */
/* Lift a bottom-anchored floater above the sticky buy bar. This applies at
   EVERY width, not just mobile: the wow pass made .gm-sticky-atc a desktop
   control too (it sits at bottom:20px there), so the mobile-only guard this
   started as left the two overlapping on desktop. */
@media (max-width: 991px) {
}
/* A top-anchored floater must clear the header, whose height is published
   as --gm-header-h from JS. */
/* In-content placements just need to breathe. */

/* --------------------------------------------------------------------------
   15. Simple / legal pages (no ACF blocks)

   From 161521a on main — page.php falls back to the_content() for classic
   pages like /privacy-policy/, which were rendering blank. Behaviour is
   unchanged; the literal values are just expressed through the token set so
   this page matches the rest of the site as tokens move.
   -------------------------------------------------------------------------- */
.csbykp-modernize .gm-simple-page {
  background: var(--gm-canvas);
  padding: 0 0 var(--gm-s9);
}
/* Head band is full-bleed; the card lifts over it, same device as /contact/. */
.csbykp-modernize .gm-simple-page .gm-page-head {
  padding-bottom: calc(var(--gm-s9) + var(--gm-s7));
}
.csbykp-modernize .gm-simple-page__inner {
  position: relative;
  max-width: 820px;
  margin: calc(var(--gm-s7) * -1) auto 0;
  background: var(--gm-surface);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-r-xl);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--gm-shadow);
}
.csbykp-modernize .gm-simple-page__title {
  margin: 0 0 var(--gm-s5);
  font-family: var(--gm-display);
  font-weight: 700;
  font-size: var(--gm-fs-h2);
  line-height: 1.08;
  letter-spacing: var(--gm-tracking-tight);
  color: var(--gm-ink);
}
.csbykp-modernize .gm-simple-page__content {
  font-family: var(--gm-body);
  font-size: var(--gm-fs-base);
  line-height: 1.7;
  color: var(--gm-ink-soft);
}
.csbykp-modernize .gm-simple-page__content h2,
.csbykp-modernize .gm-simple-page__content h3 {
  font-family: var(--gm-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--gm-ink);
  margin: var(--gm-s6) 0 var(--gm-s3);
}
.csbykp-modernize .gm-simple-page__content h2 { font-size: var(--gm-fs-h3); }
.csbykp-modernize .gm-simple-page__content h3 { font-size: 18px; }
.csbykp-modernize .gm-simple-page__content p { margin: 0 0 var(--gm-s4); }
.csbykp-modernize .gm-simple-page__content ul,
.csbykp-modernize .gm-simple-page__content ol { margin: 0 0 var(--gm-s4); padding-left: var(--gm-s5); }
.csbykp-modernize .gm-simple-page__content li { margin-bottom: var(--gm-s2); }
/* :not(.gm-btn) matters. This selector is (0,3,1) and .gm-btn--primary is
   (0,1,0), so without the exclusion it repaints the button label red on a
   red fill — 1:1 contrast, the "Download Privacy Policy (PDF)" label was
   invisible. Present on main as of 161521a. */
.csbykp-modernize .gm-simple-page__content a:not(.gm-btn) {
  color: var(--gm-red-strong);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.csbykp-modernize .gm-simple-page__content a:not(.gm-btn):hover { color: var(--gm-red-darker); }
.csbykp-modernize .gm-privacy-actions { margin-top: var(--gm-s6); }
.csbykp-modernize .gm-privacy-alt {
  margin-top: var(--gm-s3);
  font-size: var(--gm-fs-sm);
  color: var(--gm-muted);
}

/* --------------------------------------------------------------------------
   16. Motion — one entrance system

   A single, short, eased reveal used everywhere, rather than a different
   animation per block. Elements are tagged by JS (assets/js/grainman-modern.js)
   so no template markup changes, and the whole thing is inert under
   prefers-reduced-motion — the .gm-motion class is only added when motion is
   allowed, so with it off nothing is ever hidden.
   -------------------------------------------------------------------------- */
.gm-motion [data-gm-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--gm-dur-3) var(--gm-ease-out),
              transform var(--gm-dur-3) var(--gm-ease-out);
  transition-delay: var(--gm-reveal-delay, 0ms);
  will-change: opacity, transform;
}
.gm-motion [data-gm-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}
/* Once revealed there is nothing left to animate; drop the hook so printing
   and find-in-page behave. */
.gm-motion [data-gm-reveal].is-revealed { transition-delay: 0ms; }

@media (prefers-reduced-motion: reduce) {
  .gm-motion [data-gm-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   17. Imagery readiness

   Ali is sideloading higher-resolution originals from the live site (see
   docs/IMAGERY-AUDIT.md). These rules mean a sharper file drops straight in
   without any further CSS: every art-directed image already covers or
   contains a defined box, so a bigger source only adds detail, never layout
   shift. No new font or image CDNs are introduced anywhere in this layer.
   -------------------------------------------------------------------------- */
.csbykp-modernize .banner .inner .poster,
.csbykp-modernize .banner .inner video {
  /* A 2400px hero on a 1440 viewport downsamples; keep it crisp. */
  image-rendering: auto;
  will-change: auto;
}
.csbykp-modernize .two-column .inner .content .image-wrap .image,
.csbykp-modernize .about-us img,
.csbykp-modernize .title-with-image img {
  max-width: 100%;
  height: auto;
}
/* Anything the editor drops into content should never blow out its column. */
.csbykp-modernize .gm-simple-page__content img,
.csbykp-modernize .two-column .inner .content .content-wrap img {
  max-width: 100%;
  height: auto;
  border-radius: var(--gm-r);
}

/* --------------------------------------------------------------------------
   18. Account / Register / login — the last legacy-chrome templates

   my-account.php, form-login.php and the register flow were still rendering
   in the old theme's language (hard red 2px borders, loose spacing). Same
   surfaces, radii and controls as the rest of the site now.
   -------------------------------------------------------------------------- */
.csbykp-modernize .my-account-wrapper,
.csbykp-modernize .woocommerce-form-login,
.csbykp-modernize #customer_login {
  max-width: var(--gm-shell);
  margin: 0 auto;
  padding: var(--gm-section-y) var(--gm-gutter);
  gap: var(--gm-s6);
}
.csbykp-modernize .my-account-wrapper .woocommerce-MyAccount-navigation ul {
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-r-lg);
  padding: var(--gm-s3);
  background: var(--gm-surface);
  box-shadow: var(--gm-shadow-sm);
}
.csbykp-modernize .my-account-wrapper .woocommerce-MyAccount-navigation ul li { margin: 0; }
.csbykp-modernize .my-account-wrapper .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 12px 16px;
  border-radius: var(--gm-r-sm);
  font-family: var(--gm-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--gm-ink-soft);
  transition: background-color var(--gm-dur-1) var(--gm-ease), color var(--gm-dur-1) var(--gm-ease);
}
.csbykp-modernize .my-account-wrapper .woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--gm-canvas);
  color: var(--gm-ink);
}
.csbykp-modernize .my-account-wrapper .woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--gm-red-strong);
  color: #fff;
}
.csbykp-modernize .my-account-wrapper .woocommerce-MyAccount-content {
  font-family: var(--gm-body);
  font-size: var(--gm-fs-base);
  line-height: 1.66;
  color: var(--gm-ink-soft);
}

.csbykp-modernize .woocommerce-form-login,
.csbykp-modernize #customer_login .col-1,
.csbykp-modernize #customer_login .col-2 {
  padding: clamp(24px, 3vw, 40px);
  background: var(--gm-surface);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-r-xl);
  box-shadow: var(--gm-shadow-sm);
}
.csbykp-modernize .woocommerce-form-row label,
.csbykp-modernize #customer_login label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--gm-body);
  font-size: var(--gm-fs-sm);
  font-weight: 600;
  color: var(--gm-ink);
}
.csbykp-modernize .woocommerce-Input,
.csbykp-modernize #customer_login input.input-text {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border: 1px solid var(--gm-line-strong);
  border-radius: var(--gm-r-sm);
  font-family: var(--gm-body);
  font-size: var(--gm-fs-base);
  background: #fff;
}
.csbykp-modernize .woocommerce-Input:focus,
.csbykp-modernize #customer_login input.input-text:focus { border-color: var(--gm-red-strong); }
.csbykp-modernize .woocommerce-form-login button.button,
.csbykp-modernize #customer_login button.button {
  min-height: 50px;
  padding: 14px 30px;
  border-radius: var(--gm-r-pill);
  background: var(--gm-red-strong);
  border: 2px solid var(--gm-red-strong);
  color: #fff;
  font-family: var(--gm-body);
  font-size: var(--gm-fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--gm-dur-2) var(--gm-ease), transform var(--gm-dur-1) var(--gm-ease);
}
.csbykp-modernize .woocommerce-form-login button.button:hover,
.csbykp-modernize #customer_login button.button:hover {
  background: var(--gm-red-darker);
  border-color: var(--gm-red-darker);
  transform: translateY(-2px);
}

/* Breadcrumbs + Woo page titles pick up the type ramp instead of browser
   defaults on Products / Resources style archives. */
.csbykp-modernize .woocommerce-breadcrumb {
  max-width: var(--gm-shell);
  margin: 0 auto;
  padding: var(--gm-s5) var(--gm-gutter) 0;
  font-family: var(--gm-body);
  font-size: var(--gm-fs-sm);
  color: var(--gm-muted);
}
.csbykp-modernize .woocommerce-breadcrumb a { color: var(--gm-ink-soft); }
.csbykp-modernize .woocommerce-breadcrumb a:hover { color: var(--gm-red-strong); }
.csbykp-modernize .woocommerce-products-header__title,
.csbykp-modernize .woocommerce-products-header h1 {
  font-family: var(--gm-display);
  font-size: var(--gm-fs-h1);
  font-weight: 700;
  letter-spacing: var(--gm-tracking-tight);
  line-height: 1.05;
  color: var(--gm-ink);
}

/* --------------------------------------------------------------------------
   19. Product archive — remaining legacy bleed

   Category archives were the last place old chrome showed through: the
   duplicate Woo header is detached in includes/wc-functions.php, and these
   cover the controls around the grid (pagination, sorting, result count,
   the filter sidebar) which were still browser/legacy defaults.
   -------------------------------------------------------------------------- */
.csbykp-modernize .woocommerce-pagination {
  width: 100%;
  margin-top: var(--gm-s7);
  padding-top: var(--gm-s6);
  border-top: 1px solid var(--gm-line);
}
.csbykp-modernize .woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gm-s2);
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}
.csbykp-modernize .woocommerce-pagination ul li {
  border: 0;
  margin: 0;
  overflow: visible;
}
.csbykp-modernize .woocommerce-pagination ul li a,
.csbykp-modernize .woocommerce-pagination ul li span {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--gm-s3);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-r-sm);
  background: var(--gm-surface);
  color: var(--gm-ink-soft);
  font-family: var(--gm-body);
  font-size: 15px;
  font-weight: 600;
  transition: background-color var(--gm-dur-1) var(--gm-ease),
              border-color var(--gm-dur-1) var(--gm-ease),
              color var(--gm-dur-1) var(--gm-ease);
}
.csbykp-modernize .woocommerce-pagination ul li a:hover {
  border-color: var(--gm-red-strong);
  color: var(--gm-red-strong);
}
.csbykp-modernize .woocommerce-pagination ul li span.current {
  background: var(--gm-red-strong);
  border-color: var(--gm-red-strong);
  color: #fff;
}
.csbykp-modernize .woocommerce-pagination ul li a svg,
.csbykp-modernize .woocommerce-pagination ul li span svg { display: block; }

/* Sort control + result count. */
.csbykp-modernize .archive-products .filters-wrap {
  padding-bottom: var(--gm-s4);
}
.csbykp-modernize .archive-products .woocommerce-result-count {
  margin: 0;
  font-family: var(--gm-body);
  font-size: var(--gm-fs-sm);
  color: var(--gm-muted);
}
.csbykp-modernize .archive-products .woocommerce-ordering .select2 .selection .select2-selection {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 var(--gm-s3);
  border: 1px solid var(--gm-line) !important;
  border-radius: var(--gm-r-pill) !important;
  background: var(--gm-surface) !important;
}
.csbykp-modernize .archive-products .woocommerce-ordering .select2 .selection .select2-selection .select2-selection__rendered {
  font-family: var(--gm-body);
  font-size: var(--gm-fs-sm);
  font-weight: 500;
  color: var(--gm-ink);
}
.csbykp-modernize .archive-products .mobile-filter-button {
  padding: 11px 20px;
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-r-pill);
  background: var(--gm-surface);
  font-family: var(--gm-body);
  font-size: var(--gm-fs-sm);
  font-weight: 600;
  color: var(--gm-ink);
}

/* Filter sidebar. */
/* Full legacy chain: the generated sheet targets this at (0,7,0) with
   padding: 30px 20px 50px, so a shorter selector here loses. */
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .sidebar .inner {
  padding: var(--gm-s5);
  border-radius: calc(var(--gm-r-lg) - 1px);
}
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .sidebar {
  margin-top: var(--gm-s7);
}
.csbykp-modernize .archive-products .products-filter-wrap .sidebar .inner .title {
  font-family: var(--gm-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--gm-ink);
  margin-bottom: var(--gm-s4);
  padding-bottom: var(--gm-s3);
  border-bottom: 1px solid var(--gm-line);
}

/* Woo's own products header. Detached on category archives (it duplicated the
   theme's title), but shortcodes and plugins can still render loop/header.php,
   so it keeps a sane treatment rather than falling back to browser defaults. */
.csbykp-modernize .woocommerce-products-header {
  max-width: var(--gm-shell);
  margin: 0 auto;
  padding: var(--gm-s7) var(--gm-gutter) 0;
}


/* Hero Made in USA — overlay (not baked into photo), always fully visible */
.csbykp-modernize .banner {
  position: relative;
}
.csbykp-modernize .gm-hero__usa {
  position: absolute;
  right: clamp(16px, 3.5vw, 48px);
  bottom: clamp(56px, 8vh, 96px);
  z-index: 4;
  width: clamp(110px, 14vw, 168px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
.csbykp-modernize .gm-hero__usa-mark {
  display: block;
  width: 100%;
  height: auto;
  opacity: .92;
}
/* Below 992px the hero content is bottom-aligned and the CTAs run full width,
   so a bottom-right badge lands on top of them — measured overlapping at 768,
   390 and 360. The top of the hero is empty at those sizes, so the badge moves
   up there instead of shrinking into the buttons. */
/* Tablet + phone: badge parks top-right, never on the CTA stack.
   Kenny wants Made in USA visible on mobile — do not hide it. */
@media (max-width: 991px) {
  .csbykp-modernize .gm-hero__usa {
    display: block;
    top: 12px;
    bottom: auto;
    right: 12px;
    width: 72px;
    z-index: 5;
  }
  .csbykp-modernize .banner .content-wrap {
    padding-top: 88px; /* clear the badge */
  }
}
@media (max-width: 575px) {
  .csbykp-modernize .gm-hero__usa { width: 64px; top: 10px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .csbykp-modernize .gm-hero__usa { transition: none; }
}


/* ============================================================
   Overnight mobile declutter — $15k site, not Woo template chrome
   Kenny 2026-09-07: mobile "super busy"; triple header + overlaps.
   ============================================================ */
@media (max-width: 767px) {
  /* One chrome bar only: logo · cart · menu. Utility strip is noise on a phone. */
  .csbykp-modernize header .inner .sub-header {
    display: none !important;
  }
  .csbykp-modernize header .inner .main-header {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* Kill duplicate Shop Now on mobile main row if legacy shows it */
  .csbykp-modernize header .inner .main-header .menu-shop-wrap .shop-link {
    display: none !important;
  }
  /* Icon tiles: no boxed template borders */
  .csbykp-modernize .icon-boxes .inner .icons-group .icon,
  .csbykp-modernize .icon-boxes .inner .icons-group .icon img {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    outline: none !important;
  }
  /* Applications / quote CTAs: never dark-on-red */
  .csbykp-modernize .applications .button,
  .csbykp-modernize .applications a.button,
  .csbykp-modernize .slider .button,
  .csbykp-modernize .two-column .button,
  .csbykp-modernize .gm-btn--primary {
    color: #fff !important;
  }
  /* Footer: less accordion density feel */
  .csbykp-modernize .footer .nav-group .group .title {
    font-size: 0.95rem;
    letter-spacing: 0.04em;
  }
}

/* --------------------------------------------------------------------------
   20. Mobile masterpiece (Pass 6)

   Builds on Ali's declutter (2110bb1), which hides the utility strip under
   768px so the phone carries one chrome bar. Everything that strip used to
   hold now lives in the drawer — see the .gm-drawer-shop group added to
   navigation.php — and this section styles it, then works through the three
   things Kenny screenshotted: the language switcher sitting on the hero CTAs,
   an invisible red-on-red quote button, and a footer whose links were simply
   gone on a phone.
   -------------------------------------------------------------------------- */

/* ---- 20a. Drawer -----------------------------------------------------------
   The shop group only exists for the widths where the strip is hidden; above
   that the strip carries these and the drawer would be duplicating it. */
.csbykp-modernize .gm-drawer-shop { display: none; }

@media (max-width: 767px) {
  /* Drawer width, order and row presentation are set once for the whole
     drawer range in section 4; only the shop group is phone-only. */
  .csbykp-modernize .gm-drawer-shop {
    display: block;
    width: 100%;
    align-self: stretch;
    margin: var(--gm-s5) 0 var(--gm-s4);
    padding-bottom: var(--gm-s5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .csbykp-modernize .gm-drawer-shop__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 20px;
    border-radius: var(--gm-r-pill);
    background-color: var(--gm-red-strong);
    color: #fff;
    font-family: var(--gm-body);
    font-size: 16px;
    font-weight: 600;
    transition: background-color var(--gm-dur-1) var(--gm-ease);
  }
  .csbykp-modernize .gm-drawer-shop__cta:hover,
  .csbykp-modernize .gm-drawer-shop__cta:focus-visible {
    background-color: var(--gm-red-darker);
    color: #fff;
  }
  .csbykp-modernize .gm-drawer-shop__account {
    display: block;
    padding: 14px 2px;
    color: rgba(255, 255, 255, 0.86);
    font-family: var(--gm-body);
    font-size: 16px;
    font-weight: 500;
  }
  .csbykp-modernize .gm-drawer-shop__account:hover { color: #fff; }
  .csbykp-modernize .gm-drawer-shop__label {
    margin: var(--gm-s3) 0 var(--gm-s2);
    font-family: var(--gm-body);
    font-size: var(--gm-fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--gm-tracking-wide);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
  }
  .csbykp-modernize .gm-drawer-shop__cats {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .csbykp-modernize .gm-drawer-shop__cats li { margin: 0; }
  .csbykp-modernize .gm-drawer-shop__cats a {
    display: block;
    padding: 11px 2px;
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--gm-body);
    font-size: 15px;
  }
  .csbykp-modernize .gm-drawer-shop__cats a:hover { color: #fff; }

  /* The search field is the drawer's first control, so give it real presence. */
  .csbykp-modernize header .inner .main-header .links-wrap .aws-search-field {
    min-width: 0;
    width: 100%;
  }
}

/* ---- 20b. "Request for a quote" was red on red -----------------------------
   Legacy paints .heading-wrap .btn solid red and expects a plain white link
   inside it. An earlier pass restyled the inner <a> as an outline button —
   red text, red border — without clearing the wrapper's fill, so the label
   was red on red and effectively invisible
   (docs/kenny-review/2026-09-07-mobile-projects-busy.png). The wrapper is not
   a button; the link is. */
.csbykp-modernize .slider .inner .heading-wrap .btn,
.csbykp-modernize .slider .inner .heading-wrap .btn:hover {
  padding: 0;
  margin-top: 0;
  border: 0;
  background-color: transparent;
  border-radius: var(--gm-r-pill);
}
.csbykp-modernize .slider .inner .heading-wrap .btn a {
  background-color: var(--gm-red-strong);
  border-color: var(--gm-red-strong);
  color: #fff;
}
.csbykp-modernize .slider .inner .heading-wrap .btn a:hover,
.csbykp-modernize .slider .inner .heading-wrap .btn a:focus-visible {
  background-color: var(--gm-red-darker);
  border-color: var(--gm-red-darker);
  color: #fff;
}

/* ---- 20c. Projects slider arrows -------------------------------------------
   The glass treatment for these was written at (0,3,0) and legacy holds them
   at (0,4,0), so it never applied and staging kept the 60px black discs
   (same screenshot). Matched to legacy's depth, and smaller on a phone where
   they sit right on the photograph. */
.csbykp-modernize .slider .projects-slider-wrap .projects .project-navigation {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: rgba(14, 14, 16, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.csbykp-modernize .slider .projects-slider-wrap .projects .project-navigation:hover {
  background-color: var(--gm-red-strong);
}
@media (max-width: 767px) {
  .csbykp-modernize .slider .projects-slider-wrap .projects .project-navigation {
    width: 38px;
    height: 38px;
  }
  .csbykp-modernize .slider .projects-slider-wrap .projects .swiper-button-prev { left: 8px; }
  .csbykp-modernize .slider .projects-slider-wrap .projects .swiper-button-next { right: 8px; }
}

/* ---- 20d. Footer links were gone on a phone --------------------------------
   Under 576px legacy hides every .links-group and stamps a "+" on each title,
   but nothing ever opens them: there is no accordion behind it. So the whole
   footer nav — sitemap, hours, contact — was dead on mobile, showing three
   headings with a plus that does nothing
   (docs/kenny-review/2026-09-07-mobile-chrome-overlap.png). Show the links and
   drop the fake affordance. */
@media (max-width: 575px) {
  .csbykp-modernize .footer .inner .nav-group {
    grid-template-columns: 1fr;
    gap: var(--gm-s5);
  }
  .csbykp-modernize .footer .inner .nav-group .group { cursor: auto; }
  .csbykp-modernize .footer .inner .nav-group .group .title {
    margin-bottom: var(--gm-s3);
    position: static;
  }
  .csbykp-modernize .footer .inner .nav-group .group .title::after { content: none; }
  .csbykp-modernize .footer .inner .nav-group .group .links-group { display: flex; }
}

/* ---- 20e. The language switcher ---------------------------------------------
   It stays on the page — switching language is a requirement here — but it was
   styled as a full-size primary button and floated bottom-left, so on a phone
   it read as a third hero CTA and sat on top of the real ones, and lower down
   it covered the footer's own copyright line. It is a system control, so it
   now looks like one: compact, dark glass, quiet. White on rgba(11,11,12,.92)
   is 17.4:1 whatever it floats over. */
/* Pass 6 restyle lives in §13 now (canonical dark-glass at every width).
   Keep the phone size + dock here so a later edit to §13 cannot un-compact
   the control on a 390 screen. */
@media (max-width: 767px) {
  /* Bottom-left, inside the safe area, and the hero and footer both keep
     enough room below their content that it never lands on either. */
}
/* The switcher is fixed, so it always floats over *something*. Give the two
   places it lands — the bottom of the hero and the footer's own bottom bar —
   enough room below their content that it never covers either. */
@media (max-width: 767px) {
  .csbykp-modernize .banner .content-wrap { padding-bottom: var(--gm-s8); }
  .csbykp-modernize .gm-footer-bottom__inner { padding-bottom: var(--gm-s8); }
}

/* ---- 20f. Hero on a phone --------------------------------------------------
   With the chrome down to one bar the hero finally has the screen to itself.
   Tighten the stack so headline, lead and buttons read as one block instead of
   drifting apart, and keep the badge's landing zone clear at the top. */
@media (max-width: 767px) {
  .csbykp-modernize .banner .content-wrap .gm-hero__eyebrow { margin-bottom: var(--gm-s4); }
  .csbykp-modernize .banner .content-wrap .gm-hero__sub {
    margin-top: var(--gm-s4);
    font-size: 16px;
    line-height: 1.55;
  }
  .csbykp-modernize .banner .content-wrap .gm-hero__actions {
    margin-top: var(--gm-s6);
    gap: var(--gm-s3);
  }
  /* Two real choices, then the video as a quiet tertiary — three equal-weight
     full-width pills is what made the stack read as clutter. */
  .csbykp-modernize .banner .content-wrap .gm-hero__actions .button {
    align-self: flex-start;
    border-color: transparent;
    background: transparent;
    padding-left: 0;
    padding-right: var(--gm-s3);
  }
}

/* --------------------------------------------------------------------------
   21. Pass 7 — 390 / 768 / 1440 polish

   Pass 6 shipped the IA (one phone bar, drawer shop group, quiet switcher,
   quote contrast). This pass kills the leftover Woo-template density so the
   three review widths read like a $15k industrial site, not a stacked
   header + card grid. Desktop chrome is left alone except where a leftover
   (boxed icons, black application rings, red-pill language control) was
   leaking at 1440 too.
   -------------------------------------------------------------------------- */

/* ---- 21a. Drawer: agency sheet, not a leftover jQuery menu ---------------- */
.gm-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(8, 8, 10, 0.46);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--gm-dur-2) var(--gm-ease);
}
.gm-drawer-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 1250px) {
  .gm-drawer-backdrop { display: none; }
}

@media (max-width: 767px) {
  .csbykp-modernize header .inner .main-header .links-wrap {
    z-index: 100;
    padding: 20px 20px calc(32px + env(safe-area-inset-bottom, 0px));
    background:
      linear-gradient(180deg, rgba(237, 28, 36, 0.10) 0%, rgba(237, 28, 36, 0) 28%),
      var(--gm-chrome);
  }
  .csbykp-modernize header .inner .main-header .links-wrap .search-wrap {
    width: 100%;
    margin: 0 0 var(--gm-s5);
  }
  .csbykp-modernize header .inner .main-header .links-wrap .aws-container,
  .csbykp-modernize header .inner .main-header .links-wrap .aws-search-form,
  .csbykp-modernize header .inner .main-header .links-wrap .aws-wrapper {
    width: 100%;
  }
  .csbykp-modernize header .inner .main-header .links-wrap .aws-search-field {
    min-height: 48px;
    padding-right: 48px !important;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
  }
  .csbykp-modernize .gm-drawer-shop {
    margin: 0 0 var(--gm-s5);
    padding: 0 0 var(--gm-s5);
  }
  .csbykp-modernize .gm-drawer-shop__cta {
    min-height: 52px;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 22px rgba(208, 17, 26, 0.32);
  }
  .csbykp-modernize .gm-drawer-shop__account {
    padding: 16px 2px 4px;
  }
  .csbykp-modernize .gm-drawer-shop__cats a {
    padding: 12px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .csbykp-modernize .gm-drawer-shop__cats li:last-child a { border-bottom: 0; }
  /* Login / Register already live as My Account in this drawer. */
  .csbykp-modernize header .inner .main-header .links-wrap .forms-links {
    display: none;
  }
  .csbykp-modernize header .inner .main-header .links-wrap .pages-links {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: var(--gm-s2);
  }
  .csbykp-modernize header .inner .main-header .links-wrap .pages-links .link {
    padding: 15px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 17px;
    font-weight: 500;
  }
  .csbykp-modernize header .inner .main-header .links-wrap .pages-links .link::after {
    display: none;
  }
}

/* Phone chrome: one 56px bar. Logo · cart · menu. Nothing else. */
@media (max-width: 767px) {
  .csbykp-modernize header {
    padding: 0 14px;
  }
  .csbykp-modernize header .inner .main-header {
    min-height: 56px;
    padding: 8px 0;
    gap: 10px;
  }
  .csbykp-modernize header .inner .main-header .logo-wrap .mobile-logo {
    height: auto;
    max-height: 40px;
    max-width: min(48vw, 168px);
  }
  .csbykp-modernize header .inner .main-header .menu-shop-wrap {
    gap: 6px;
  }
  .csbykp-modernize header .inner .main-header .menu-shop-wrap .shop,
  .csbykp-modernize header .inner .main-header .menu-shop-wrap .shop-link {
    display: none !important;
  }
  .csbykp-modernize .gm-cart--compact {
    padding: 8px;
    border-color: rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    justify-content: center;
  }
  .csbykp-modernize .gm-cart--compact .gm-cart__count {
    top: -5px;
    left: auto;
    right: -4px;
  }
  .csbykp-modernize header .inner .main-header .menu-shop-wrap .menu-wrap {
    width: 40px;
    height: 40px;
    padding: 10px 8px;
  }
}

/* ---- 21b. Hero + Made in USA — visible, never on the CTAs -----------------
   Badge parks top-right below 992. CTAs stay on the left/bottom stack.
   Extra right inset on the action row so a wrap cannot slide under the mark. */
@media (max-width: 991px) {
  .csbykp-modernize .banner .content-wrap {
    padding-top: 96px;
    padding-right: calc(var(--gm-gutter) + 8px);
  }
  .csbykp-modernize .gm-hero__usa {
    top: 14px;
    right: 14px;
    width: 76px;
    z-index: 3;
  }
  .csbykp-modernize .banner .content-wrap .gm-hero__actions {
    max-width: calc(100% - 4px);
  }
}
@media (max-width: 767px) {
  .csbykp-modernize .banner {
    min-height: max(var(--gm-hero-h, 460px), 78vh);
  }
  .csbykp-modernize .banner .content-wrap {
    padding: 92px var(--gm-gutter) calc(var(--gm-s8) + 28px);
  }
  .csbykp-modernize .banner .content-wrap .heading,
  .csbykp-modernize .banner .content-wrap .gm-hero__title {
    font-size: clamp(30px, 8.4vw, 40px);
    line-height: 1.04;
  }
  .csbykp-modernize .gm-hero__usa {
    width: 62px;
    top: 12px;
    right: 12px;
  }
  .csbykp-modernize .banner .content-wrap .gm-hero__actions .gm-btn {
    min-height: 50px;
  }
}
@media (max-width: 390px) {
  .csbykp-modernize .gm-hero__usa { width: 56px; top: 10px; right: 10px; }
  .csbykp-modernize .banner .content-wrap { padding-right: 16px; }
}

/* ---- 21c. 768 tablet chrome — one cohesive shell, not two Woo bars --------
   Strip stays (it is the only search / Shop / categories at this width).
   Brand row + strip share one surface; the compact cart is already gone. */
@media (min-width: 768px) and (max-width: 991px) {
  .csbykp-modernize header .inner .main-header {
    padding: 12px 0 8px;
  }
  .csbykp-modernize header .inner .sub-header {
    padding: 6px 0 12px;
  }
  .csbykp-modernize header .inner .main-header .logo-wrap .logo {
    height: 52px;
  }
  .csbykp-modernize header .inner .sub-header .buttons-wrap .account {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
  }
}

/* ---- 21d. Projects / applications / icons — no dark-on-red, no rings ------ */
.csbykp-modernize .slider .inner .heading-wrap .btn,
.csbykp-modernize .slider .inner .heading-wrap .btn:hover {
  background-color: transparent;
  border: 0;
  padding: 0;
}
.csbykp-modernize .slider .inner .heading-wrap .btn a,
.csbykp-modernize .applications .button,
.csbykp-modernize .applications a.button,
.csbykp-modernize .two-column .inner .content .content-wrap .button,
.csbykp-modernize .gm-btn--primary {
  color: #fff;
}
.csbykp-modernize .slider .swiper-slide {
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
}
.csbykp-modernize .slider .swiper-slide img {
  border: 0;
}

@media (max-width: 767px) {
  .csbykp-modernize .slider .inner .heading-wrap {
    align-items: flex-start;
    gap: var(--gm-s4);
  }
  .csbykp-modernize .slider .inner .heading-wrap .btn a {
    min-height: 48px;
    padding: 12px 22px;
  }
  .csbykp-modernize .applications .inner .content-wrap {
    grid-template-columns: 1fr 1fr;
    gap: var(--gm-s5) var(--gm-s4);
  }
  .csbykp-modernize .applications .inner .content-wrap .image-text-wrap {
    flex-direction: column;
    text-align: center;
  }
  .csbykp-modernize .icon-boxes .inner .icons-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gm-s5) var(--gm-s3);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .csbykp-modernize .applications .inner .content-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .csbykp-modernize .icon-boxes .inner .icons-group {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- 21e. Footer — one composed column on a phone ------------------------- */
@media (max-width: 767px) {
  .csbykp-modernize .footer .inner {
    gap: var(--gm-s7);
    padding-bottom: var(--gm-s4);
  }
  .csbykp-modernize .footer .inner .content-group .logo-wrap {
    width: 200px;
  }
  .csbykp-modernize .footer .inner .nav-group {
    gap: var(--gm-s6);
  }
  .csbykp-modernize .footer .inner .nav-group .group .title::after {
    content: none;
  }
  .csbykp-modernize .footer .inner .nav-group .group .links-group {
    display: flex;
  }
  .csbykp-modernize .gm-footer-bottom__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gm-s2);
    padding-bottom: calc(var(--gm-s8) + 8px);
  }
}

@media (max-width: 767px) {
}
/* Never sit on the sticky buy bar. */
@media (max-width: 991px) {
}

/* --------------------------------------------------------------------------
   21. AA cleanup for the last #ED1C24 text pairings (Pass 8)

   --gm-red is the brand red and reads correctly as a large field, but white
   text on it is 4.38:1 and it is 4.02:1 as text on the light canvas — both
   under the 4.5:1 AA floor for body-sized type. --gm-red-strong exists for
   exactly this and was already applied to the buttons in Pass 1; these are the
   spots it never reached. Measured on the rendered page, not eyeballed.
   -------------------------------------------------------------------------- */

/* Cart badge: white on --gm-red was 4.38:1. It sits in the header on every
   page, so it is the most-seen of the three. */
.csbykp-modernize .gm-cart__count { background: var(--gm-red-strong); }

/* Blog category chip and "Read more": same white-on-red pairing. */
.csbykp-modernize .our-blogs .inner .blogs-wrap .blog-wrap .content-wrap .categories-group .category,
.csbykp-modernize .our-blogs .inner .blogs-wrap .blog-wrap .content-wrap .button {
  background-color: var(--gm-red-strong);
}

/* The about-us block's copy sits on a red panel (.about-us .inner .wrap), so
   the heading, sub-heading and description were all white on --gm-red: 4.38:1.
   The panel is the thing to change, not the text — white on --gm-red-strong is
   5.56:1 and the block keeps its red. */
.csbykp-modernize .about-us .inner .wrap { background-color: var(--gm-red-strong); }

/* Account content links were --gm-red on --gm-canvas: 4.02:1. Legacy sets this
   at (0,3,0); matching depth plus the modernize class carries it. The
   underline is not decoration — it stops the link being identified by colour
   alone in a paragraph, which colour contrast on its own does not satisfy. */
.csbykp-modernize .my-account-wrapper .woocommerce-MyAccount-content p a,
.csbykp-modernize .my-account-wrapper .woocommerce-MyAccount-content li a {
  color: var(--gm-red-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.csbykp-modernize .my-account-wrapper .woocommerce-MyAccount-content p a:hover,
.csbykp-modernize .my-account-wrapper .woocommerce-MyAccount-content li a:hover {
  color: var(--gm-red-darker);
}

/* --------------------------------------------------------------------------
   22. Two robustness floors (Pass 8)
   -------------------------------------------------------------------------- */

/* The theme has no global image constraint anywhere — not in style.css and not
   in this file — so any image wider than its column overflows, and because the
   body clips overflow-x it is cut off rather than scrollable. Measured on the
   single-product template at 390: a 428px image in a 390px viewport. This is a
   floor at (0,1,1), so every existing sizing rule still outranks it; it only
   catches images nothing else has styled. */
/* `height: auto` belongs with the max-width above: on its own, max-width
   constrains the width while an HTML `height` attribute holds the old height,
   so the image stretches instead of scaling. Measured with a 1920x1080 file
   carrying width="800" height="800" in a 200px column: 200x800 before,
   200x113 after. Anything that means to set its own height does so in CSS at
   (0,2,1) or deeper and still wins; this only corrects heights coming from the
   attribute, which is exactly the case that distorts. */
.csbykp-modernize img { max-width: 100%; height: auto; }

/* WooCommerce's account tables are laid out for a desktop column and there is
   no responsive fallback active here, so at 390 the orders table measured
   62..404 inside a 40..350 container — cut off, not scrollable, with no way to
   reach the last column. Let the region scroll instead of swallowing content. */
@media (max-width: 767px) {
  .csbykp-modernize .my-account-wrapper .woocommerce-MyAccount-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .csbykp-modernize .my-account-wrapper .woocommerce-MyAccount-content .shop_table {
    min-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   23. Single product: the add-to-cart button (Pass 9)

   Legacy paints this one `background-color: red` — the CSS keyword, #FF0000,
   which is not in the palette — with #F5F5F5 text. Measured on the rendered
   page that is 3.67:1, under the 4.5:1 AA floor, on the most important button
   in the shop. It is also 14px in a 50px box where every other primary action
   on the site is 15px in a 48px pill.

   Legacy holds it at (0,8,0), which is why nothing so far has touched it; this
   matches that depth rather than reaching for !important. White on
   --gm-red-strong is 5.56:1, the same pairing the rest of the site's primaries
   already use.
   -------------------------------------------------------------------------- */
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .summary .cart .buttons-wrap .single_add_to_cart_button,
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .summary .cart .buttons-wrap .buy-now-button,
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .summary .cart .buttons-wrap a {
  min-height: 48px;
  padding: 12px 26px;
  background-color: var(--gm-red-strong);
  border-color: var(--gm-red-strong);
  color: #fff;
  font-family: var(--gm-body);
  font-size: 15px;
  font-weight: 600;
}
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .summary .cart .buttons-wrap .single_add_to_cart_button:hover,
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .summary .cart .buttons-wrap .buy-now-button:hover,
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .summary .cart .buttons-wrap a:hover {
  background-color: var(--gm-red-darker);
  border-color: var(--gm-red-darker);
  color: #fff;
}

/* The quantity stepper's +/- controls render at 20x20, under the 24x24 floor
   in WCAG 2.5.8. The icons stay their drawn size; only the hit area grows. */
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .summary .cart .quantity-wrap .decrement,
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .summary .cart .quantity-wrap .increment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
}

/* --------------------------------------------------------------------------
   24. Checkout choice controls (Pass 10)

   Checkout was never in the sweep until now. Its text inputs are fine at 46px,
   but the two choice controls are not: the "create an account" checkbox is
   13x13 inside a label row 16px tall, and the payment-method radio sits in a
   label row 23px tall. Clicking the label does toggle both, so the label is
   the real target — it is just under the 24x24 floor in WCAG 2.5.8, on the
   page where a mis-tap costs an order. Rows get a real height, and the
   controls themselves get enough size to aim at on a phone.
   -------------------------------------------------------------------------- */
.csbykp-modernize .woocommerce-checkout .woocommerce-account-fields label.checkbox,
.csbykp-modernize .woocommerce-checkout .wc_payment_methods label {
  display: flex;
  align-items: center;
  gap: var(--gm-s2);
  min-height: 28px;
  cursor: pointer;
}
.csbykp-modernize .woocommerce-checkout .woocommerce-account-fields input[type="checkbox"],
.csbykp-modernize .woocommerce-checkout .wc_payment_methods input[type="radio"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--gm-red-strong);
}
.csbykp-modernize .woocommerce-checkout .wc_payment_methods li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gm-s2);
}
.csbykp-modernize .woocommerce-checkout .wc_payment_methods li > .payment_box { flex: 1 0 100%; }

/* --------------------------------------------------------------------------
   25. Cart and checkout product thumbnails (Pass 10)

   Both stretch. Legacy pins the thumbnail box to fixed dimensions and then
   gives the image `width: 100%; height: 100%` with no object-fit, so the
   default `fill` distorts any photo whose aspect is not exactly the box's:
   100x100 in the checkout summary, 12.5%x100px in the cart, and under 991px
   the cart box becomes 25%x190px, so the same photo is squeezed differently
   at every width. Grainman's equipment photos are not square.

   No object-fit is declared for either, so this needs no specificity fight —
   `contain` keeps the whole machine visible and letterboxes on a neutral
   ground rather than cropping a product the customer is about to pay for. */
.csbykp-modernize .woocommerce-checkout-review-order .product-thumbnail img,
.csbykp-modernize .woocommerce-cart-form__cart-item .product-thumbnail img,
.csbykp-modernize .woocommerce-cart-form__cart-item .product-thumbnail a img {
  object-fit: contain;
  object-position: center;
  background-color: var(--gm-surface);
}

/* --------------------------------------------------------------------------
   26. Two block-level links under the 24px target floor (Pass 11)

   Everything else in the Pass 11 sweep came back clean, so these are the
   only two measured shortfalls left. Both are standalone block links, not
   text inside a sentence, so WCAG 2.5.8's inline exception does not cover
   them.

   Footer nav links render 22.5px tall: `.link` is `display: flex`, which
   blockifies the anchor, so its box is exactly the 15px/1.5 line box.
   Cart product titles render 21px: legacy sets `display: block` and 18px
   with no line-height, so the box is whatever `normal` computes to.

   Neither legacy rule declares line-height or min-height, so this needs no
   specificity match — a direct declaration beats an inherited value at any
   depth. */
.csbykp-modernize .footer .inner .nav-group .group .links-group .link a {
  display: flex;
  align-items: center;
  min-height: 24px;
}
.csbykp-modernize .cart-product-name {
  line-height: 1.4;
}

/* The header logo link is the third. It is not waiting on a compact mobile
   asset — the harness renders the real 428x51 wordmark, and my own
   `max-width: min(48vw, 168px)` on an 8.4:1 mark simply resolves to 168x20.
   The wordmark stays exactly the size it is; only the link's hit area grows,
   and at 24px it still sits inside the 56px bar (8px padding either side),
   so the phone header height does not move. */
@media (max-width: 767px) {
  .csbykp-modernize header .inner .main-header .logo-wrap {
    align-items: center;
    min-height: 24px;
  }
}

/* --------------------------------------------------------------------------
   27. Product tabs — brand system, and a visible active state (Pass 12)

   Correcting my own Pass 9 note first: I reported that legacy "lays the tabs
   out as a vertical list with every panel open". That was a harness artifact.
   WooCommerce's own wc-single-product.js runs on the real page, hides all but
   one panel and puts `.active` on the current li — nothing in this theme
   dequeues it. Measured with that script present: 1 panel visible, li.active
   set. Eighth harness-fidelity trap.

   The genuine defect is that `.active` receives NO styling at all. Both tabs
   render identically — same colour, same weight, no rule — so nothing tells
   the customer which panel they are reading. That is the "green text dump":
   legacy paints every tab link, panel heading, body copy and attribute cell
   in `--green: #2F4C3F`, an off-brand colour on a red-and-black identity.

   Legacy holds these from (0,7,0) to (0,9,1), so each rule below matches its
   depth with the `.csbykp-modernize` prefix rather than reaching for
   !important. The tabs become a horizontal bar with a baseline rule and a red
   underline on the active tab.

   Both runtime states are handled. With WooCommerce's JS the bar behaves as
   tabs. Without it (script blocked, JS off) every panel is shown and no li is
   active — so the panels keep a top rule and their headings, and the page
   still reads as a deliberate stacked spec sheet rather than a broken tab
   strip. */

/* The strip itself: horizontal, scrollable on phones, with a baseline rule
   the active tab's underline sits on. */
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .tabs {
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--gm-s5);
  margin-bottom: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  border-bottom: 1px solid var(--gm-line);
}
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .tabs::-webkit-scrollbar {
  display: none;
}

/* Under 992 the strip is narrower than its labels (measured 306px of room for
   397px of tabs at 390), so it scrolls. A scrollbar is hidden above, so the
   right edge would otherwise read as a clipped label rather than "there is
   more this way". The mask is anchored to the container box, not the scrolled
   content, so it stays at the edge. Harmless when the tabs already fit — it
   fades a uniform ground. */
@media (max-width: 991px) {
  .csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .tabs {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
}
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .tabs li {
  margin-bottom: 0;
  flex: none;
  border-bottom: 2px solid transparent;
  /* Sits on the strip's 1px baseline rather than above it. */
  margin-bottom: -1px;
  transition: border-color var(--gm-dur-1) var(--gm-ease);
}
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .tabs li.active {
  border-bottom-color: var(--gm-red-strong);
}

/* Tab links. 24px min-height keeps them at the 2.5.8 floor Pass 11 set for
   every other standalone block link; they measured 17px. */
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .tabs li a {
  display: flex;
  align-items: center;
  min-height: 24px;
  padding: var(--gm-s3) 0;
  font-family: var(--gm-body);
  font-size: var(--gm-fs-sm);
  font-weight: 500;
  letter-spacing: var(--gm-tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--gm-muted);
  transition: color var(--gm-dur-1) var(--gm-ease);
}
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .tabs li a:hover,
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .tabs li a:focus-visible {
  color: var(--gm-ink);
}
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .tabs li.active a {
  color: var(--gm-ink);
  font-weight: 600;
}

/* Panels: neutral rule, brand ink, and a reading measure. */
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .woocommerce-Tabs-panel {
  padding-top: var(--gm-s5);
  margin-bottom: var(--gm-s5);
  border-top: 1px solid var(--gm-line);
}
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .woocommerce-Tabs-panel h2 {
  font-family: var(--gm-display);
  font-size: var(--gm-fs-h3);
  font-weight: 600;
  letter-spacing: var(--gm-tracking-tight);
  margin-bottom: var(--gm-s4);
  color: var(--gm-ink);
}
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .woocommerce-Tabs-panel p {
  font-family: var(--gm-body);
  font-size: var(--gm-fs-base);
  font-weight: 400;
  line-height: 1.65;
  max-width: var(--gm-measure);
  color: var(--gm-ink-soft);
}

/* Attribute rows read as a spec table: label in ink, value beside it, a hair
   rule between. Legacy holds the cells at (0,9,1). */
/* The table is shrink-to-fit by default, so the rows have no width to divide
   between label and value. */
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .woocommerce-Tabs-panel .woocommerce-product-attributes {
  width: 100%;
  max-width: var(--gm-measure);
  border-collapse: collapse;
}
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .woocommerce-Tabs-panel .woocommerce-product-attributes tbody .woocommerce-product-attributes-item {
  border-bottom: 1px solid var(--gm-line);
  /* Legacy sets the tbody to `display: flex; column`, which blockifies every
     tr into its own anonymous table — so the label columns never share a
     width and the values start at a different x on each row (measured 116px
     vs 92px labels, values at 164 vs 140). Laying the row out as flex gives
     the labels one column again. Stacked on phones, aligned from 768. */
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .woocommerce-Tabs-panel .woocommerce-product-attributes tbody .woocommerce-product-attributes-item {
    flex-direction: row;
    align-items: baseline;
  }
  .csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .woocommerce-Tabs-panel .woocommerce-product-attributes tbody .woocommerce-product-attributes-item .woocommerce-product-attributes-item__label {
    flex: 0 0 38%;
    max-width: 220px;
    min-width: 0;
  }
  .csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .woocommerce-Tabs-panel .woocommerce-product-attributes tbody .woocommerce-product-attributes-item .woocommerce-product-attributes-item__value {
    flex: 1 1 auto;
  }
}
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .woocommerce-Tabs-panel .woocommerce-product-attributes tbody .woocommerce-product-attributes-item .woocommerce-product-attributes-item__label {
  font-family: var(--gm-body);
  font-size: var(--gm-fs-sm);
  font-weight: 600;
  letter-spacing: var(--gm-tracking-wide);
  text-transform: uppercase;
  padding: var(--gm-s3) var(--gm-s5) 0 0;
  color: var(--gm-ink);
}
@media (min-width: 768px) {
  .csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .woocommerce-Tabs-panel .woocommerce-product-attributes tbody .woocommerce-product-attributes-item .woocommerce-product-attributes-item__label {
    padding-bottom: var(--gm-s3);
  }
}
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .woocommerce-Tabs-panel .woocommerce-product-attributes tbody .woocommerce-product-attributes-item .woocommerce-product-attributes-item__value p {
  font-family: var(--gm-body);
  font-size: var(--gm-fs-base);
  font-weight: 400;
  padding: var(--gm-s1) 0 var(--gm-s3);
  margin-left: 0;
  color: var(--gm-ink-soft);
}
@media (min-width: 768px) {
  .csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .woocommerce-Tabs-panel .woocommerce-product-attributes tbody .woocommerce-product-attributes-item .woocommerce-product-attributes-item__value p {
    padding-top: var(--gm-s3);
  }
}

/* --------------------------------------------------------------------------
   28. Single-product reviews / ratings

   WooCommerce 11 ships the star picker and the .star-rating meter, but every
   rule is scoped to `.woocommerce …`. This theme never emits that class
   (see grainman_body_classes() — flipping it on would light up the rest of
   woocommerce.css across cart and checkout). wc-single-product.js still
   runs: it hides #rating and injects

     <p class="stars"><span role="group">
       <a role="radio" class="star-1">1 of 5 stars</a> …
     </span></p>

   Without the Woo rules those anchors stay browser-default blue text —
   Kenny's screenshot. The review form is the same story: checkout / login
   fields were restyled in this layer, the comment form was not.

   Legacy also hides the Reviews tab itself
   (`li.reviews_tab { display: none }`, (0,8,1)). On a product whose only
   tab is Reviews the panel still prints, so the form dumps into the card
   with no tab chrome. On a product that also has Description, Woo's tab JS
   hides the inactive panel and the hidden tab makes reviews unreachable.
   Restore the tab into the Pass 12 strip; the panel content is styled below.

   Stars use a Unicode ★ rather than the WooCommerce icon font. The font is
   loaded by woocommerce.css, but relying on it from a non-.woocommerce
   selector is brittle (path, font-face, future WC versions). Colour is
   --gm-red-strong on --gm-line-strong so the control meets the same AA
   floor as the rest of the brand system.
   -------------------------------------------------------------------------- */

/* The Reviews tab is a first-class tab again. Same depth as the legacy hide. */
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .tabs li.reviews_tab {
  display: flex;
}

/* Reviews panel: let the form use the card width. Pass 12's panel `p` rule
   caps everything at --gm-measure, which is a reading column, not a form. */
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .woocommerce-Tabs-panel--reviews {
  max-width: none;
}
.csbykp-modernize .single-product-wrap .single-product .summary-tabs-wrap .inner .tabs-wrap .woocommerce-tabs .woocommerce-Tabs-panel--reviews p {
  max-width: none;
}

/* Average rating in the product summary (only renders once a review exists). */
.csbykp-modernize .single-product-wrap .summary .woocommerce-product-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gm-s2) var(--gm-s3);
  margin: 0 0 var(--gm-s4);
}
.csbykp-modernize .single-product-wrap .summary .woocommerce-review-link {
  font-family: var(--gm-body);
  font-size: var(--gm-fs-sm);
  font-weight: 500;
  color: var(--gm-muted);
  text-decoration: none;
}
.csbykp-modernize .single-product-wrap .summary .woocommerce-review-link:hover,
.csbykp-modernize .single-product-wrap .summary .woocommerce-review-link:focus-visible {
  color: var(--gm-ink);
}

/* Display meter. Woo sets span[style="width:N%"] to clip the filled row.
   Unicode ★ widths vary by font, so the track is five identical SVG
   stars (empty on the box, filled on the span). Text inside the span
   is indented off-screen; the accessible name stays on role="img". */
.csbykp-modernize .star-rating {
  --gm-star-slot: 1.3rem;
  --gm-star-empty: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236A6A6E' d='M12 2.5l2.9 6.9 7.4.6-5.6 4.7 1.8 7.2L12 17.8 5.5 21.9l1.8-7.2L1.7 10l7.4-.6L12 2.5z'/%3E%3C/svg%3E");
  --gm-star-filled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D0111A' d='M12 2.5l2.9 6.9 7.4.6-5.6 4.7 1.8 7.2L12 17.8 5.5 21.9l1.8-7.2L1.7 10l7.4-.6L12 2.5z'/%3E%3C/svg%3E");
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: calc(5 * var(--gm-star-slot));
  height: var(--gm-star-slot);
  background-image: var(--gm-star-empty);
  background-repeat: repeat-x;
  background-size: var(--gm-star-slot) var(--gm-star-slot);
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
}
.csbykp-modernize .star-rating span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  background-image: var(--gm-star-filled);
  background-repeat: repeat-x;
  background-size: var(--gm-star-slot) var(--gm-star-slot);
  text-indent: -999px;
  white-space: nowrap;
}

/* The review block itself. */
.csbykp-modernize .single-product-wrap #reviews.woocommerce-Reviews {
  display: flex;
  flex-direction: column;
  gap: var(--gm-s5);
}
.csbykp-modernize .single-product-wrap #reviews .woocommerce-Reviews-title,
.csbykp-modernize .single-product-wrap #reviews .comment-reply-title {
  font-family: var(--gm-display);
  font-size: var(--gm-fs-h3);
  font-weight: 600;
  letter-spacing: var(--gm-tracking-tight);
  color: var(--gm-ink);
  margin: 0 0 var(--gm-s3);
}
.csbykp-modernize .single-product-wrap #reviews .comment-reply-title small a {
  display: inline-block;
  margin-left: var(--gm-s2);
  font-family: var(--gm-body);
  font-size: var(--gm-fs-sm);
  font-weight: 500;
  color: var(--gm-red-strong);
}
.csbykp-modernize .single-product-wrap #reviews .woocommerce-noreviews,
.csbykp-modernize .single-product-wrap #reviews .comment-notes,
.csbykp-modernize .single-product-wrap #reviews .required-field-message {
  font-family: var(--gm-body);
  font-size: var(--gm-fs-sm);
  line-height: 1.55;
  color: var(--gm-ink-soft);
  margin: 0 0 var(--gm-s4);
}
.csbykp-modernize .single-product-wrap #reviews .required {
  color: var(--gm-red-strong);
  font-weight: 700;
  text-decoration: none;
  border: 0;
}

/* Published reviews. */
.csbykp-modernize .single-product-wrap #reviews ol.commentlist {
  list-style: none;
  margin: 0 0 var(--gm-s5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gm-s4);
}
.csbykp-modernize .single-product-wrap #reviews ol.commentlist li {
  margin: 0;
  padding: var(--gm-s5);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-r);
  background: var(--gm-canvas);
}
.csbykp-modernize .single-product-wrap #reviews ol.commentlist li img.avatar {
  float: left;
  width: 40px;
  height: 40px;
  margin: 0 var(--gm-s3) 0 0;
  border-radius: 50%;
  border: 1px solid var(--gm-line);
}
.csbykp-modernize .single-product-wrap #reviews ol.commentlist li .comment-text {
  overflow: hidden;
}
.csbykp-modernize .single-product-wrap #reviews ol.commentlist li .comment-text .star-rating {
  float: right;
  margin: 0 0 var(--gm-s2) var(--gm-s3);
}
.csbykp-modernize .single-product-wrap #reviews ol.commentlist li .comment-text p.meta {
  font-family: var(--gm-body);
  font-size: var(--gm-fs-sm);
  color: var(--gm-muted);
  margin: 0 0 var(--gm-s2);
}
.csbykp-modernize .single-product-wrap #reviews ol.commentlist li .comment-text p.meta strong {
  font-weight: 600;
  color: var(--gm-ink);
}
.csbykp-modernize .single-product-wrap #reviews ol.commentlist li .comment-text .description p {
  font-family: var(--gm-body);
  font-size: var(--gm-fs-base);
  line-height: 1.65;
  color: var(--gm-ink-soft);
  margin: 0;
}

/* The form card — same tokens as checkout / contact, scoped to #review_form
   so cart quantity and add-to-cart in .summary are untouched. */
.csbykp-modernize .single-product-wrap #review_form {
  padding: var(--gm-s5);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-r);
  background: var(--gm-canvas);
}
.csbykp-modernize .single-product-wrap #review_form .comment-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gm-s4);
  margin: 0;
}
@media (min-width: 640px) {
  .csbykp-modernize .single-product-wrap #review_form .comment-form-author,
  .csbykp-modernize .single-product-wrap #review_form .comment-form-email {
    grid-column: auto;
  }
  .csbykp-modernize .single-product-wrap #review_form .comment-form {
    grid-template-columns: 1fr 1fr;
  }
  .csbykp-modernize .single-product-wrap #review_form .comment-notes,
  .csbykp-modernize .single-product-wrap #review_form .comment-form-rating,
  .csbykp-modernize .single-product-wrap #review_form .comment-form-comment,
  .csbykp-modernize .single-product-wrap #review_form .comment-form-cookies-consent,
  .csbykp-modernize .single-product-wrap #review_form .form-submit {
    grid-column: 1 / -1;
  }
}
.csbykp-modernize .single-product-wrap #review_form .comment-form > p,
.csbykp-modernize .single-product-wrap #review_form .comment-form-rating {
  margin: 0;
}
.csbykp-modernize .single-product-wrap #review_form label {
  display: block;
  margin: 0 0 var(--gm-s2);
  font-family: var(--gm-body);
  font-size: var(--gm-fs-sm);
  font-weight: 600;
  color: var(--gm-ink);
}
.csbykp-modernize .single-product-wrap #review_form .comment-form-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gm-s3);
}
.csbykp-modernize .single-product-wrap #review_form .comment-form-rating label {
  margin: 0;
}

/* No-JS fallback: the native <select id="rating"> Woo hides after init. */
.csbykp-modernize .single-product-wrap #review_form select#rating {
  min-height: 50px;
  padding: 13px 16px;
  border: 1px solid var(--gm-line-strong);
  border-radius: var(--gm-r-sm);
  font-family: var(--gm-body);
  font-size: var(--gm-fs-base);
  color: var(--gm-ink);
  background: #fff;
}

/* Interactive stars. Text is indented off-screen (not display:none) so the
   radio name stays available to AT. The glyph lives on ::before. */
.csbykp-modernize .single-product-wrap #review_form p.stars {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.csbykp-modernize .single-product-wrap #review_form p.stars span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.csbykp-modernize .single-product-wrap #review_form p.stars a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 1px;
  line-height: 1;
  color: transparent;
  text-decoration: none;
  text-indent: -999px;
  overflow: hidden;
  border-radius: var(--gm-r-sm);
}
.csbykp-modernize .single-product-wrap #review_form p.stars a::before {
  content: "★";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gm-body);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  text-indent: 0;
  color: var(--gm-muted);
  transition: color var(--gm-dur-1) var(--gm-ease), transform var(--gm-dur-1) var(--gm-ease);
  pointer-events: none;
}
/* Hover preview — fill through the hovered star, empty after it.
   Order matches Woo's own p.stars rules so selected + hover compose. */
.csbykp-modernize .single-product-wrap #review_form p.stars a:hover ~ a::before {
  color: var(--gm-muted);
}
.csbykp-modernize .single-product-wrap #review_form p.stars:hover a::before {
  color: var(--gm-red-strong);
}
.csbykp-modernize .single-product-wrap #review_form p.stars.selected a.active::before {
  color: var(--gm-red-strong);
}
.csbykp-modernize .single-product-wrap #review_form p.stars.selected a.active ~ a::before {
  color: var(--gm-muted);
}
.csbykp-modernize .single-product-wrap #review_form p.stars.selected a:not(.active)::before {
  color: var(--gm-red-strong);
}
.csbykp-modernize .single-product-wrap #review_form p.stars a:hover::before,
.csbykp-modernize .single-product-wrap #review_form p.stars a:focus-visible::before {
  transform: scale(1.08);
}
.csbykp-modernize .single-product-wrap #review_form p.stars a:focus-visible {
  outline: 3px solid var(--gm-red-strong);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .csbykp-modernize .single-product-wrap #review_form p.stars a::before {
    transition: none;
  }
}

.csbykp-modernize .single-product-wrap #review_form input[type="text"],
.csbykp-modernize .single-product-wrap #review_form input[type="email"],
.csbykp-modernize .single-product-wrap #review_form input[type="url"],
.csbykp-modernize .single-product-wrap #review_form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 50px;
  padding: 13px 16px;
  border: 1px solid var(--gm-line-strong);
  border-radius: var(--gm-r-sm);
  font-family: var(--gm-body);
  font-size: var(--gm-fs-base);
  line-height: 1.45;
  color: var(--gm-ink);
  background: #fff;
  transition: border-color var(--gm-dur-1) var(--gm-ease), box-shadow var(--gm-dur-1) var(--gm-ease);
}
.csbykp-modernize .single-product-wrap #review_form textarea {
  min-height: 160px;
  resize: vertical;
}
.csbykp-modernize .single-product-wrap #review_form input[type="text"]:focus,
.csbykp-modernize .single-product-wrap #review_form input[type="email"]:focus,
.csbykp-modernize .single-product-wrap #review_form input[type="url"]:focus,
.csbykp-modernize .single-product-wrap #review_form textarea:focus,
.csbykp-modernize .single-product-wrap #review_form select#rating:focus {
  border-color: var(--gm-red-strong);
  box-shadow: 0 0 0 3px rgba(208, 17, 26, 0.16);
  outline: none;
}
.csbykp-modernize .single-product-wrap #review_form input[type="text"]:focus-visible,
.csbykp-modernize .single-product-wrap #review_form input[type="email"]:focus-visible,
.csbykp-modernize .single-product-wrap #review_form input[type="url"]:focus-visible,
.csbykp-modernize .single-product-wrap #review_form textarea:focus-visible,
.csbykp-modernize .single-product-wrap #review_form select#rating:focus-visible {
  outline: 3px solid var(--gm-red-strong);
  outline-offset: 2px;
}

.csbykp-modernize .single-product-wrap #review_form .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--gm-s3);
}
.csbykp-modernize .single-product-wrap #review_form .comment-form-cookies-consent input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--gm-red-strong);
}
.csbykp-modernize .single-product-wrap #review_form .comment-form-cookies-consent label {
  margin: 0;
  font-weight: 400;
  color: var(--gm-ink-soft);
}

.csbykp-modernize .single-product-wrap #review_form .form-submit {
  margin: var(--gm-s2) 0 0;
}
.csbykp-modernize .single-product-wrap #review_form #submit,
.csbykp-modernize .single-product-wrap #review_form input[type="submit"] {
  min-height: 50px;
  padding: 14px 30px;
  border: 2px solid var(--gm-red-strong);
  border-radius: var(--gm-r-pill);
  background: var(--gm-red-strong);
  color: #fff;
  font-family: var(--gm-body);
  font-size: var(--gm-fs-base);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--gm-dur-1) var(--gm-ease),
              border-color var(--gm-dur-1) var(--gm-ease);
}
.csbykp-modernize .single-product-wrap #review_form #submit:hover,
.csbykp-modernize .single-product-wrap #review_form input[type="submit"]:hover {
  background: var(--gm-red-darker);
  border-color: var(--gm-red-darker);
  color: #fff;
}
.csbykp-modernize .single-product-wrap #review_form #submit:focus-visible,
.csbykp-modernize .single-product-wrap #review_form input[type="submit"]:focus-visible {
  outline: 3px solid var(--gm-ink);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Brand Guide polish
   Shop cards, Industry/About band, applications chips, product-range grid.
   These rules sit last so they beat both the legacy sheet and the shorter
   modernization selectors above. A few use !important only to beat the
   Customizer block that paints the wordmark behind every applications icon.
   -------------------------------------------------------------------------- */

/* Applications chips: the category art only. Never the primary wordmark. */
.csbykp-modernize .applications .inner .content-wrap .image-text-wrap .image-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: transparent !important;
  background-image: none !important;
}
.csbykp-modernize .applications .inner .content-wrap .image-text-wrap .image-wrap .logo,
.csbykp-modernize .applications .image-wrap .logo {
  display: block;
  width: 72px;
  height: 72px;
  max-width: 72px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  object-fit: contain;
  background: transparent !important;
  background-image: none !important;
  background-size: auto !important;
}
.csbykp-modernize .applications .inner .content-wrap .image-text-wrap .name {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
  color: #111111;
}
.csbykp-modernize .applications a.image-text-wrap:hover .name,
.csbykp-modernize .applications a.image-text-wrap:focus-visible .name {
  color: #CF0405;
}
.csbykp-modernize .featured-products .top-branding {
  background-image: none !important;
}

/* Product range: equal cells, real links, consistent icon-to-label gap. */
.csbykp-modernize .icon-boxes .inner .icons-group a.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  text-align: center;
  text-decoration: none;
  color: #111111;
}
.csbykp-modernize .icon-boxes .inner .icons-group a.icon p,
.csbykp-modernize .icon-boxes .inner .icons-group a.icon:last-child p {
  margin: 0;
  color: #111111;
}
.csbykp-modernize .icon-boxes .inner .icons-group a.icon:hover p,
.csbykp-modernize .icon-boxes .inner .icons-group a.icon:focus-visible p {
  color: #CF0405;
}

/* Industry / About: light panel, red accent only, correct mark and seal. */
.csbykp-modernize .about-us {
  --gm-mark-w: min(440px, 100%);
  --gm-seal-w: 176px;
}
.csbykp-modernize .about-us .inner {
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.csbykp-modernize .about-us .inner .wrap {
  background: #FFFFFF;
  color: #111111;
  border-radius: 0;
  border: 1px solid #D7DADE;
  border-top: 4px solid #CF0405;
  box-shadow: none;
}
.csbykp-modernize .about-us .inner .wrap .partner-content-wrap .partner-heading-wrap .heading,
.csbykp-modernize .about-us .inner .wrap h2,
.csbykp-modernize .about-us .inner .wrap h3,
.csbykp-modernize .about-us .inner .wrap h4,
.csbykp-modernize .about-us .inner .wrap .sub-heading,
.csbykp-modernize .about-us .inner .wrap .text-wrap,
.csbykp-modernize .about-us .inner .wrap .text-wrap h4 {
  color: #111111;
}
.csbykp-modernize .about-us .inner .wrap .description,
.csbykp-modernize .about-us .inner .wrap .content-wrap .description,
.csbykp-modernize .about-us .inner .wrap .text-wrap p {
  color: #333333;
}
.csbykp-modernize .about-us .inner .wrap .partner-content-wrap .partner-heading-wrap .anniversary-logo-wrap {
  display: block;
  width: var(--gm-seal-w) !important;
  max-width: var(--gm-seal-w) !important;
  min-width: 0 !important;
  /* Clearspace = half the seal height (seal is 400×336). */
  margin: 0 0 calc(var(--gm-seal-w) * 336 / 400 / 2) !important;
  padding: 0 !important;
}
.csbykp-modernize .about-us .anniversary-logo-wrap .anniversary-logo,
.csbykp-modernize .about-us .inner .wrap .anniversary-logo {
  display: block !important;
  width: 100% !important;
  max-width: var(--gm-seal-w) !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 400 / 336;
  object-fit: contain;
}
.csbykp-modernize .about-us .inner .wrap .main-logo-wrap {
  min-width: 0;
  width: var(--gm-mark-w);
  max-width: 440px;
  margin: calc(var(--gm-seal-w) * 336 / 400 / 2) auto 24px;
}
.csbykp-modernize .about-us .gm-brand-mark {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 79 / 34;
}
.csbykp-modernize .about-us .inner .wrap .aboutus-twocolumns .timeline {
  background-color: #D7DADE;
}
.csbykp-modernize .about-us .inner .wrap .aboutus-twocolumns .twocolumn .circle {
  background-color: #CF0405;
  border-color: #FFFFFF;
}
.csbykp-modernize .about-us .inner .wrap .button-wrap {
  position: static;
  width: auto;
  background: transparent;
  border-radius: 0;
  padding: 8px 0 0;
}
.csbykp-modernize .about-us .inner .wrap .button-wrap .show {
  background: #CF0405;
  color: #FFFFFF;
  border: 0;
  border-radius: 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 700;
  padding: 12px 28px;
  cursor: pointer;
}
.csbykp-modernize .about-us .image,
.csbykp-modernize .about-us .image-wrap .image {
  border-radius: 0;
}
@media (max-width: 767px) {
  .csbykp-modernize .about-us {
    --gm-mark-w: min(320px, 100%);
    --gm-seal-w: 140px;
  }
  .csbykp-modernize .applications .inner .content-wrap,
  .csbykp-modernize .icon-boxes .inner .icons-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Shop cards: one white image well, square, tight, Arial, red accents only. */
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product,
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product .inner {
  border-radius: 0;
}
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product .inner .top-wrap .content {
  padding: 0 16px 8px;
}
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product .inner .top-wrap .content .product-name,
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product .inner .top-wrap .content .woocommerce-loop-product__title {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  margin-bottom: 4px;
}
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product .inner .bottom-wrap .cart,
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product .inner .bottom-wrap .shop {
  border-radius: 0;
}
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .products .product .inner .bottom-wrap .shop .buy-now-button {
  border-radius: 0;
  color: #CF0405;
  background: #FFFFFF;
}
.csbykp-modernize .archive-products .inner .mega-wrap .product-wrap .products-filter-wrap .sidebar {
  border-radius: 0;
}

/* Dark CTA headline must stay light even if a later stylesheet paints h2 ink. */
.csbykp-modernize .gm-cta-band h2.gm-cta-band__title {
  color: #F5F6F7;
}