/* Prototype chrome: fonts, hovers, motion. Catalog bindings stay untouched. */

:root {
  --pudl-ink: #141414;
  --pudl-lime: #e2f9a1;
  --pudl-hover: #1f333a;
  --pudl-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pudl-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pudl-pop-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

body {
  font-family: Archivo, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.cta-banner__heading,
.product-card-row__heading,
.contact-intro__heading,
.contact-page__heading,
.faq-accordion__title,
.video-hero__heading,
.centered-intro__heading,
.size-guide__heading,
.founder-band__heading,
.partner-band__heading,
.partner-intro__heading,
.policy-page__heading,
.customise-hero__heading,
.stat-callout__heading,
.story-band__heading,
.values-grid__heading {
  font-family: "Archivo Black", Archivo, sans-serif;
  font-weight: 400;
}

.rte a:hover,
.site-footer a:hover,
.policy-page a:hover,
a.contact-intro__way-link:hover {
  color: var(--pudl-hover);
}

/* Never let the global link color paint nav pills or button labels. */
a.site-header__link:hover,
a.site-header__link.is-active,
.site-header__link:hover,
.site-header__link.is-active {
  color: #fff !important;
}

a.product-card-row__cta,
a.policy-page__cta-button,
a.customise-hero__cta {
  color: #fff !important;
}

a.product-card-row__cta:hover,
a.policy-page__cta-button:hover,
a.customise-hero__cta:hover {
  color: #000 !important;
}

.cta-banner a.cta-banner__cta {
  color: rgb(var(--color-button-text)) !important;
}

.cta-banner a.cta-banner__cta:hover {
  background: var(--pudl-lime) !important;
  color: #000 !important;
}

.video-hero a.video-hero__cta {
  color: #141414 !important;
  background: #fff !important;
}

.video-hero a.video-hero__cta:hover {
  background: var(--pudl-lime) !important;
  color: #000 !important;
}

a.founder-band__cta,
a.founder-band__cta:hover {
  color: #fff !important;
}

a.founder-band__cta:hover {
  background: #fff !important;
  color: #3e4637 !important;
}

a.partner-band__cta {
  color: #000 !important;
}

a.partner-band__cta:hover {
  color: #fff !important;
}

/*
  Stick the body-level chrome that contains the nav.
  Sticky on .site-header itself does nothing: its section wrapper is only 64px tall.
  overflow-x: clip on html also kills position:sticky in Chrome.
*/
body > *:has(.site-header),
#shopline-section-sections--header-group__header,
[id^="shopline-section-"]:has(.site-header) {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
}

/* Black fill → lime. White fill → lime. Lime fill → black. */
.video-hero a.video-hero__cta,
.cta-banner a.cta-banner__cta,
.product-card-row__cta,
.sticky-atc__button,
.customise-hero .customise-hero__cta,
a.policy-page__cta-button,
.partner-band__cta,
.cart-drawer .cart-checkout .button,
.cart-drawer .cart-empty__button.button {
  font-family: Archivo, sans-serif;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.video-hero a.video-hero__cta:hover,
.cta-banner a.cta-banner__cta:hover,
.product-card-row__cta:hover,
.sticky-atc__button:hover,
.customise-hero .customise-hero__cta:hover,
a.policy-page__cta-button:hover,
.cart-drawer .cart-checkout .button:hover,
.cart-drawer .cart-empty__button.button:hover {
  background: var(--pudl-lime);
  color: #000;
}

.partner-band__cta:hover {
  background: var(--pudl-ink);
  color: #fff;
}

.founder-band__cta {
  font-family: Archivo, sans-serif;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.founder-band__cta:hover {
  background: #fff;
  color: #3e4637;
  border-color: #fff;
}

.product-card-row__card {
  transition: border-color 0.18s ease;
}

.product-card-row__card:hover {
  border-color: var(--pudl-ink);
}

.promo-bar__track.js-on > *.is-active {
  animation: pudl-fade-in 0.5s ease;
}

.cart-drawer__title,
.cart-drawer .cart-empty__tips {
  font-family: "Archivo Black", Archivo, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}