:root {
  --color-ink: #23272a;
  --color-muted: #6f7681;
  --color-line: #e4e7eb;
  --color-soft: #f5f5f5;
  --color-red: #c23c32;
  --color-accent-red: #e31837;
  --color-red-dark: #a6322a;
  --color-cream: #f7f4ee;
  --color-heading: #141d2c;
  --color-body: #1a1c1b;
  --color-white: #ffffff;
  --shadow-card: 0 18px 48px rgba(15, 18, 20, 0.11);
  --shadow-soft: 0 8px 24px rgba(15, 18, 20, 0.08);
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-button: 1.25rem;
  --container: 65.9375rem;
  --header-container: 75rem;
  --font-sans: "Manrope", sans-serif;
  --font-mono: "Roboto Mono", monospace;
  --motion-fast: 100ms;
  --motion-normal: 200ms;
  --motion-slow: 480ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.35, 0.64, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-ink);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

/* Heading baseline: consistent line heights + vertical rhythm.
   Specific section rules later in the file override as needed. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 1rem;
}

h1 {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

h2 {
  line-height: 1.5;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

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

/* Editor utilities — usable in any heading or WYSIWYG field.
   The red accent previously existed only as .hero h1 .text-red and
   .guide-intro h2 .red-text, so the class did nothing anywhere else.
   Both spellings are supported because both are already in use. */
.text-red,
.red-text {
  color: var(--color-red);
}

.text-center {
  text-align: center;
}

/* A <span> is inline, so it needs to become a block before text-align does
   anything. Scoped to headings so .text-center stays inert on inline runs. */
h1>.text-center,
h2>.text-center,
h3>.text-center,
h4>.text-center {
  display: block;
}

.site-shell {
  width: 100%;
  background: var(--color-white);
  overflow: clip;
}

.container {
  width: min(var(--container), calc(100% - 6rem));
  margin: 0 auto;
}

.announcement {
  height: 2.3125rem;
  display: grid;
  place-items: center;
  padding: 0.625rem 1rem;
  background: var(--color-red);
  color: var(--color-white);
}

.announcement p {
  margin: 0;
  font-family: "Roboto Mono", monospace;
  font-size: 0.6875rem;
  line-height: 1.03125rem;
  letter-spacing: 1.5px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.announcement a {
  font-family: "Arimo", Arial, sans-serif;
  font-weight: 700;
  text-decoration: underline;
}

.site-header {
  height: 4.35rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 0.875rem;
  padding-inline: max(3rem, calc((100% - var(--header-container)) / 2));
  top: 0;
  background: var(--color-white);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  position: sticky;
  z-index: 80;
  transform: translateY(0);
}

.site-header.is-stuck {
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow: 0 0.75rem 2.5rem rgba(15, 18, 20, 0.1);
  -webkit-backdrop-filter: saturate(150%) blur(0.875rem);
  backdrop-filter: saturate(150%) blur(0.875rem);
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

body.admin-bar .site-header {
  top: 32px;
}

@media (min-width: 601px) and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

@media (max-width: 600px) {
  body.admin-bar .site-header {
    top: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .site-header {
    transition:
      transform 220ms cubic-bezier(0.2, 0, 0, 1),
      background-color 180ms ease,
      box-shadow 180ms ease;
  }
}

.brand {
  width: 14.5rem;
  flex: 0 0 14.5rem;
}

.brand img {
  width: 14.5rem;
  height: 3.25rem;
  object-fit: contain;
}

.primary-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding-left: 0.5rem;
  flex: 0 0 auto;
}

.mega-menu {
  position: absolute;
  top: calc(100% + 1rem);
  left: 0;
  z-index: 90;
  display: flex;
  align-items: stretch;
  gap: 2rem;
  width: min(59rem, calc(100vw - 3rem));
  padding: 2rem;
  border: 1px solid #e2e4e9;
  border-radius: 0.5rem;
  background: var(--color-white);
  box-shadow: 0 25px 50px -12px rgba(13, 18, 25, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.375rem);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  transition-delay: 150ms;
}

/* Invisible strip keeps hover active while pointer crosses header gap. */
.mega-menu::before {
  content: "";
  position: absolute;
  top: -1rem;
  left: 0;
  right: 0;
  height: 1rem;
}

/* Open states: JS-driven class, plus a pure-CSS hover fallback so the menu
   works before theme.js loads (footer script). JS adds close-delay + aria. */
/* Focus scope is the Shop link and the panel itself — never the whole nav.
   :focus-within on .primary-nav fired for FAQ/Contact too, so clicking any
   sibling link flashed the Shop panel open on the way to the new page. */
.primary-nav.is-mega-open .mega-menu,
.primary-nav .mega-menu:focus-within,
.primary-nav>a.has-mega:hover~.mega-menu,
.primary-nav .mega-menu:hover {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}

/* Kept in its own rule: an engine without :focus-visible drops the whole
   selector list, and that must not take the hover/JS open states with it. */
.primary-nav>a.has-mega:focus-visible~.mega-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}

.primary-nav>a.has-mega:hover .nav-caret,
.primary-nav>a.has-mega:focus-visible .nav-caret {
  transform: rotate(180deg);
}

/* Figma 30:967 — 900px panel: 3 tight columns + gray promo card. */
.mega-menu-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: max-content;
  gap: 1.75rem 2rem;
  align-content: start;
  align-items: start;
}

.mega-menu-heading {
  margin: 0 0 0.875rem;
}

.mega-menu .mega-menu-heading a,
.mega-menu .mega-menu-heading span {
  height: auto;
  padding-block: 0;
  padding-inline: 0;
  border-radius: 0;
  font-family: "Roboto Mono", monospace;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--color-red);
}

.mega-menu-group ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mega-menu .mega-menu-group ul a {
  display: block;
  height: auto;
  padding: 0.1875rem 0;
  border-radius: 0;
  color: var(--color-body);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  transition: color 140ms ease, transform 140ms ease;
}

.mega-menu .mega-menu-group ul a:hover,
.mega-menu .mega-menu-group ul a:focus-visible {
  background: transparent;
  color: var(--color-red);
  transform: translateX(0.1875rem);
}

.mega-menu .mega-menu-heading a:hover,
.mega-menu .mega-menu-heading a:focus-visible {
  background: transparent;
  color: var(--color-red-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.mega-menu-promo {
  flex: 0 0 16rem;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 20rem;
  padding: 1.75rem 1.625rem;
  border-radius: 0.25rem;
  background: #f0f0f0;
}

.mega-menu-promo__title {
  margin: 0 0 0.875rem;
  color: var(--color-heading);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.mega-menu-promo__text {
  margin: 0 0 1.5rem;
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.mega-menu-promo__text p {
  margin: 0 0 0.5rem;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.mega-menu-promo__text p:last-child {
  margin-bottom: 0;
}

.mega-menu .mega-menu-promo__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  margin-top: auto;
  padding: 0.875rem 1rem;
  border-radius: 0.25rem;
  background: var(--color-red);
  color: var(--color-white);
  font-family: "Roboto Mono", monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  transition: background-color 160ms ease, transform 160ms ease;
}

.mega-menu .mega-menu-promo__cta:hover,
.mega-menu .mega-menu-promo__cta:focus-visible {
  background: var(--color-red-dark);
  color: var(--color-white);
  transform: translateY(-1px);
}

.primary-nav a,
.login-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 2.25rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
}

.nav-caret {
  width: 0.47394rem;
  height: 0.27081rem;
  margin-inline: 0.16925rem;
  flex: 0 0 auto;
  transition: transform 160ms ease;
}

.primary-nav.is-mega-open a[aria-haspopup] .nav-caret {
  transform: rotate(180deg);
}

.primary-nav>a:hover,
.primary-nav>a:focus-visible,
.login-link:hover,
.login-link:focus-visible {
  background: var(--color-soft);
}

.primary-nav>a.has-mega:hover,
.primary-nav>a.has-mega:focus-visible,
.primary-nav.is-mega-open>a.has-mega {
  background: var(--color-soft);
  color: var(--color-red);
}

.site-search {
  flex: 1 1 auto;
  max-width: 25rem;
  height: 2.6rem;
  position: relative;
}

.site-search>img {
  position: absolute;
  top: 0.83125rem;
  left: 1rem;
  width: 0.9375rem;
  height: 0.9375rem;
  z-index: 1;
}

.site-search input {
  width: 100%;
  height: 100%;
  border: 0.8px solid #a4abb7;
  border-radius: 0.625rem;
  background: #f5f5f5;
  padding: 0.675rem 1.05rem 0.675rem 2.625rem;
  color: var(--color-ink);
  outline: none;
}

.site-search input::placeholder {
  color: #b0b4ba;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.login-link {
  color: #9fa3a8;
  white-space: nowrap;
}

.login-link:hover {
  color: var(--color-ink);
}

.header-actions .btn {
  width: 6.73125rem;
  min-height: 2.5rem;
  height: 2.5rem;
  padding: 0.625rem 1.25rem;
  flex: 0 0 6.73125rem;
  font-weight: 700;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.25rem;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.btn:hover,
.add-to-cart:hover {
  transform: translateY(-1px);
}

.btn-dark {
  background: var(--color-ink);
  color: var(--color-white);
}

.btn-dark:hover,
.btn-dark:focus-visible {
  background: var(--color-heading);
  color: var(--color-white);
}

.btn-red {
  border-color: var(--color-red);
  background: var(--color-red);
  color: var(--color-white);
  box-shadow: 0 10px 22px rgba(194, 60, 50, 0.28);
}

.btn-red:hover,
.btn-red:focus-visible {
  border-color: var(--color-red-dark);
  background: var(--color-red-dark);
  color: var(--color-white);
}

.btn-outline-light {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(255, 255, 255, 0.06);
}

.btn-outline-light:hover,
.btn-outline-light:focus-visible {
  border-color: var(--color-white);
  background: var(--color-white);
  color: var(--color-ink);
}

.btn-outline-dark {
  color: var(--color-ink);
  border-color: #cfd4da;
  background: var(--color-white);
}

.btn-outline-dark:hover,
.btn-outline-dark:focus-visible {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-white);
}

.cart-button {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.cart-button span {
  font-size: 1rem;
  line-height: 1;
}

.cart-button img {
  width: 1.25rem;
  height: 1.25rem;
}

.cart-button b {
  width: 1rem;
  min-width: 1rem;
  height: 1rem;
  display: grid;
  place-items: center;
  position: absolute;
  top: -2px;
  left: 1.375rem;
  border-radius: var(--radius-button);
  background: var(--color-red);
  color: var(--color-white);
  font-size: 0.5625rem;
  line-height: 0.84375rem;
  font-weight: 700;
}

/* Logged-in account dropdown */
.header-account {
  position: relative;
  display: flex;
  align-items: center;
}

.header-account__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.header-account__toggle .nav-caret {
  width: 0.625rem;
  height: 0.375rem;
  transition: transform 160ms ease;
}

.header-account:hover .header-account__toggle .nav-caret,
.header-account:focus-within .header-account__toggle .nav-caret {
  transform: rotate(180deg);
}

.account-menu-panel {
  position: absolute;
  top: calc(100% + 1rem);
  right: 0;
  z-index: 50;
  min-width: 12.5rem;
  display: grid;
  padding: 0.5rem;
  border: 0.8px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: 0 24px 60px rgba(15, 18, 20, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.375rem);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

/* Invisible strip bridging the hover gap to the header. */
.account-menu-panel::before {
  content: "";
  position: absolute;
  top: -1rem;
  left: 0;
  right: 0;
  height: 1rem;
}

.header-account:hover .account-menu-panel,
.header-account:focus-within .account-menu-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.account-menu-panel a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--color-heading);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}

.account-menu-panel a:hover {
  background: var(--color-soft);
  color: var(--color-red);
}

.header-cart {
  position: relative;
  display: flex;
  align-items: center;
}

.mini-cart-panel {
  width: min(22.5rem, calc(100vw - 2rem));
  position: absolute;
  top: calc(100% + 1rem);
  right: 0;
  z-index: 50;
  padding: 1rem;
  border: 0.8px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: 0 24px 60px rgba(15, 18, 20, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.header-cart:hover .mini-cart-panel,
.header-cart:focus-within .mini-cart-panel,
.header-cart.is-open .mini-cart-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* The close button lives inside .header-cart, so clicking it leaves :hover
   (and :focus-within) true and the panel would stay open. .is-dismissed wins
   over both until the pointer leaves the cart. Must stay after the rule above —
   the two have equal specificity, so source order decides. */
.header-cart.is-dismissed .mini-cart-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
}

.mini-cart-panel::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  right: 0.75rem;
  width: 2.75rem;
  height: 0.5rem;
}

.mini-cart-head,
.mini-cart-total,
.mini-cart-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.mini-cart-head {
  padding-bottom: 0.75rem;
  border-bottom: 0.8px solid var(--color-line);
}

.mini-cart-head strong {
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.mini-cart-head button {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--color-soft);
  color: var(--color-muted);
  cursor: pointer;
}

.mini-cart-list {
  display: grid;
  gap: 0.875rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.mini-cart-list li {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  gap: 0.75rem;
  align-items: center;
}

.mini-cart-remove {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  align-self: start;
  border-radius: 50%;
  background: var(--color-soft);
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

.mini-cart-remove:hover {
  background: rgba(194, 60, 50, 0.12);
  color: var(--color-red);
}

.mini-cart-thumb {
  width: 4rem;
  height: 4rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-soft);
}

.mini-cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mini-cart-title {
  display: -webkit-box;
  margin-bottom: 0.25rem;
  overflow: hidden;
  color: var(--color-heading);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mini-cart-list span {
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.mini-cart-total {
  padding: 1rem 0;
  border-top: 0.8px solid var(--color-line);
  color: var(--color-heading);
  font-size: 0.875rem;
}

.mini-cart-total span {
  color: var(--color-muted);
  font-weight: 700;
}

.mini-cart-total strong {
  font-size: 1rem;
}

.mini-cart-actions {
  gap: 0.625rem;
}

.mini-cart-actions .btn {
  flex: 1;
  min-height: 2.75rem;
  padding-inline: 0.875rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.mini-cart-empty {
  margin: 1rem 0 1.25rem;
  color: var(--color-muted);
  font-weight: 700;
  text-align: center;
}

/* Empty-cart CTA fills the panel like the checkout buttons do. */
.mini-cart-panel>.btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.hero {
  background:
    linear-gradient(90deg, rgba(26, 37, 55, 0.92) 0%, rgba(26, 37, 55, 0.72) 45%, rgba(26, 37, 55, 0.2) 75%, rgba(26, 37, 55, 0.05) 100%),
    url("../img/hero-product.avif") center center / cover no-repeat,
    #2d3136;
  color: var(--color-white);
  min-height: 48.5625rem;
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5rem), 0 100%);
}

.hero-rail {
  height: 0.25rem;
  width: 100%;
  background: var(--color-red);
}

.hero-grid {
  min-height: 45.6875rem;
  display: grid;
  grid-template-columns: minmax(0, 45rem);
  gap: 0;
  align-items: center;
  position: relative;
  z-index: 1;
  padding: 5rem 0;
}

.eyebrow {
  margin: 0 0 1rem;
  font-family: "Roboto Mono", monospace;
  font-size: 0.6875rem;
  line-height: 1.03125rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
}

.featured-products .eyebrow {
  font-size: 0.875rem;
  letter-spacing: 2px;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 2.55313rem;
  letter-spacing: 0.1875rem;
  color: var(--color-white);
}

.hero-eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--color-white);
  flex: 0 0 auto;
}

.eyebrow.red,
.red {
  color: var(--color-red);
}

.hero h1 {
  width: auto;
  margin: 0;
  font-size: clamp(3.25rem, 9vw, 5.832rem);
  line-height: 1.179;
  /* Figma: 110px @ 93.312px */
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 800;
}

.hero h1 span {
  display: block;
}

.hero-heading-row {
  display: flex !important;
  gap: 0.75rem;
  align-items: flex-start;
  max-width: 100%;
  flex-wrap: nowrap;
  overflow: visible;
}

/* Wrap the heading row only when the design's intentional overflow no longer fits. */
@media (max-width: 1024px) {
  .hero-heading-row {
    flex-wrap: wrap;
  }
}

.hero-heading-row>span {
  display: inline-block;
  white-space: nowrap;
}

.hero h1 .text-red {
  color: var(--color-red);
}

.hero-description {
  width: min(100%, 33.75rem);
  margin: 2rem 0 3.5rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.25rem;
  line-height: 1.625;
}

.hero-actions,
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-actions {
  gap: 1rem;
}

.hero-actions .btn {
  min-height: 3.40625rem;
  padding: 1rem 2rem;
  font-size: 0.9375rem;
  line-height: 1.40625rem;
}

.hero-actions .btn-outline-light {
  color: var(--color-white);
  min-height: 3.50625rem;
  border-width: 0.8px;
  border-color: rgba(255, 255, 255, 0.3);
  background: transparent;
  font-weight: 600;
}

.hero-actions .btn-outline-light:hover,
.hero-actions .btn-outline-light:focus-visible {
  border-color: var(--color-white);
  background: var(--color-white);
  color: var(--color-ink);
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin: 5rem 0 0;
}

.hero-proof div {
  border-top: 0;
  padding-top: 0;
}

.hero-proof dt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25rem;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
}

.hero-proof img {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.hero-proof dd {
  display: none;
  margin: 0.25rem 0 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.8125rem;
}

.hero-media {
  display: none;
}

.hero-media img {
  display: none;
}

.category-strip {
  height: 6.625rem;
  background: var(--color-white);
  color: #7c8083;
  border-bottom: 0.8px solid rgba(0, 0, 0, 0.1);
}

.category-strip-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1.25rem 3rem 1.55rem;
  overflow: hidden;
}

.category-strip a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.6rem;
  padding: 0.675rem 1.05rem;
  border: 0.8px solid rgba(0, 0, 0, 0.1);
  border-radius: 1.25rem;
  background: var(--color-white);
  color: #7c8083;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
  white-space: nowrap;
}

.category-strip img {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
}

.category-strip .all-products {
  height: 2.5rem;
  padding: 0.625rem 1rem;
  background: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-white);
}

.category-strip .all-products img {
  display: none;
}

.section {
  padding: 4.75rem 0;
  background: var(--color-white);
}

.featured-products {
  background: var(--color-soft);
}

.about-section {
  background: var(--color-soft);
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.section-heading {
  margin-bottom: 2.5rem;
}

.featured-products .section-heading {
  margin-bottom: 0;
}

.featured-products .product-grid {
  margin-top: 2.5rem;
}

.product-slider {
  position: relative;
}

.featured-products .product-slider {
  margin-top: 2.5rem;
}

.product-slider .product-grid {
  margin-top: 0;
}

.product-slider .product-slider__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.product-slider .product-slider__track::-webkit-scrollbar {
  display: none;
}

.product-slider .product-slider__track>* {
  flex: 0 0 calc((100% - 3.75rem) / 4);
  scroll-snap-align: start;
}

.product-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-heading);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 160ms ease, border-color 160ms ease;
}

.product-slider__arrow:hover {
  border-color: var(--color-red);
  color: var(--color-red);
}

.product-slider__arrow--prev {
  left: -1.25rem;
}

.product-slider__arrow--next {
  right: -1.25rem;
}

.product-slider__arrow[disabled] {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .product-slider .product-slider__track>* {
    flex-basis: calc((100% - 2.5rem) / 3);
  }
}

@media (max-width: 720px) {
  .product-slider .product-slider__track>* {
    flex-basis: calc((100% - 1.25rem) / 2);
  }
}

@media (max-width: 430px) {
  .product-slider .product-slider__track>* {
    flex-basis: 85%;
  }
}

.row-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
}

.section-heading h2,
.section-intro h2,
.cards-split-intro h2,
.text-block-heading h2,
.center-heading h2,
.copy-panel h2,
.guide-intro h2,
.faq-grid h2,
.cta-content h2 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 2.1875rem);
  line-height: 1.3;
  letter-spacing: -0.7px;
  font-weight: 800;
}

.section-link {
  color: var(--color-red);
  font-size: 0.875rem;
  font-weight: 800;
}

.section-link.light {
  color: var(--color-heading);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.product-card {
  min-height: 26.875rem;
  display: flex;
  flex-direction: column;
  padding: 0 0 1.25rem 0;
  border: 0.8px solid rgba(0, 0, 0, 0.05);
  border-radius: 1.25rem;
  background: var(--color-white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.product-image {
  height: 13.75rem;
  display: grid;
  place-items: center;
  position: relative;
  margin: 0 0 1.25rem 0;
  border-radius: 1.25rem 1.25rem 0 0;
  background: #fff;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: inherit;
  object-fit: cover;
}

.badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 62.4375rem;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1rem;
}

.badge-red {
  background: var(--color-red);
  color: var(--color-white);
}

.badge-dark {
  background: #343a40;
  color: var(--color-white);
}

.badge-light {
  background: #9ca3af;
  color: var(--color-white);
}

.rating {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
  padding: 0 1.25rem;
}

.rating span {
  color: var(--color-red);
  font-size: 0.8125rem;
  letter-spacing: 2px;
}

.rating small,
.variant,
.product-footer .price span {
  color: var(--color-muted);
  font-size: 0.75rem;
}

.product-card h3 {
  min-height: 2.5rem;
  margin: 0 0 1rem;
  padding: 0 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
}

.variant {
  margin: 0 0 1rem;
  padding: 0 1.25rem;
}

.product-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 1.25rem;
  margin-top: auto;
}

.product-footer .price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}

.product-footer .price strong {
  font-size: 1.125rem;
  color: var(--color-red);
  line-height: 1.75rem;
}

.add-to-cart {
  height: 2.25rem;
  padding: 0 1rem;
  border-radius: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-ink);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 800;
  gap: 0.375rem;
  transition: transform 160ms ease, background-color 160ms ease;
  white-space: nowrap;
}

.trust-stats {
  padding: 4rem 0;
  background: var(--color-ink);
  color: var(--color-white);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.stat-card {
  background: #2d3136;
  border-radius: 1.25rem;
  border: 0.8px solid rgba(0, 0, 0, 0.08);
  min-height: 12.19375rem;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.stat-icon {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--color-accent-red);
}

.stat-icon svg {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stat-card strong {
  display: block;
  font-size: clamp(1.75rem, 6vw, 2rem);
  line-height: 1.5;
  /* Figma ratio: 48px @ 32px */
  font-weight: 800;
  color: #7c8083;
  letter-spacing: -0.64px;
}

.stat-card span {
  display: block;
  margin-top: 2px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
  color: #7c8083;
}

.stat-card small {
  display: block;
  margin-top: 0.25rem;
  color: #a0a4a8;
  font-size: 0.75rem;
  line-height: 1.21875rem;
}

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.image-panel {
  position: relative;
}

.image-panel>img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin-inline: auto;
  border-radius: 1.25rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.content-split .image-panel {
  align-self: center;
}

/* Opt-in: image follows the scroll next to long copy. */
.content-split .image-panel--sticky {
  align-self: start;
  position: sticky;
  top: 6rem;
}

/* Text-heavy variant: wider copy column. */
.content-split .split-grid--wide-text {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
}

/* Wide-text sections top-align the image with the heading instead of
   floating it in the middle of long copy. */
.content-split .split-grid--wide-text .image-panel {
  align-self: start;
}

/* Image on the left occupies the first track — flip the ratio. */
.content-split .split-grid--wide-text:has(.image-side-left) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

.content-split .image-panel--portrait>img {
  width: auto;
  height: 24.75rem;
  max-height: 70vh;
}

.image-zoom-button {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(35, 39, 42, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-heading);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  cursor: zoom-in;
}

.sm-lightbox-ready .image-zoom-button {
  display: flex;
}

.image-zoom-button svg,
.image-lightbox__close svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.image-zoom-button:focus-visible,
.image-lightbox__close:focus-visible {
  outline: 3px solid rgba(194, 60, 50, 0.55);
  outline-offset: 3px;
}

.image-lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 3rem;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.image-lightbox::backdrop {
  background: rgba(15, 18, 22, 0.88);
}

.image-lightbox__frame {
  position: relative;
  display: grid;
  width: min(68rem, calc(100vw - 6rem));
  height: min(42rem, calc(100dvh - 6rem));
  margin: auto;
  place-items: center;
}

.image-lightbox__image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0.75rem;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.image-lightbox__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-heading);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  cursor: pointer;
}

body.sm-lightbox-open {
  overflow: hidden;
}

@media (max-width: 48rem) {
  .image-lightbox {
    padding: 2.5rem 1rem 1rem;
  }

  .image-lightbox__frame {
    width: calc(100vw - 2rem);
    height: calc(100dvh - 3.5rem);
  }
}

@media (pointer: fine) and (hover: hover) and (prefers-reduced-motion: no-preference) {

  .image-zoom-button,
  .image-lightbox__close {
    transition: transform 160ms var(--ease-enter), box-shadow 160ms var(--ease-enter);
  }

  .image-zoom-button:hover,
  .image-lightbox__close:hover {
    transform: scale(1.06);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .image-lightbox[open]::backdrop {
    animation: sm-lightbox-backdrop-in 220ms var(--ease-enter) both;
  }

  .image-lightbox[open] .image-lightbox__frame {
    animation: sm-lightbox-content-in 260ms var(--ease-enter) both;
  }

  .image-lightbox.is-closing::backdrop {
    animation: sm-lightbox-backdrop-out 150ms var(--ease-exit) both;
  }

  .image-lightbox.is-closing .image-lightbox__frame {
    animation: sm-lightbox-content-out 150ms var(--ease-exit) both;
  }
}

@keyframes sm-lightbox-backdrop-in {
  from {
    opacity: 0;
  }
}

@keyframes sm-lightbox-backdrop-out {
  to {
    opacity: 0;
  }
}

@keyframes sm-lightbox-content-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

@keyframes sm-lightbox-content-out {
  to {
    opacity: 0;
    transform: scale(0.98);
  }
}

.float-card {
  position: absolute;
  right: -1.25rem;
  bottom: 2.5rem;
  width: 11.8125rem;
  padding: 1.3rem;
  border-radius: 1.25rem;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  border: 0.8px solid rgba(150, 150, 150, 0.3);
}

.float-card-dark {
  background: #23272a;
  box-shadow: 0 20px 12.5px rgba(0, 0, 0, 0.1), 0 8px 5px rgba(0, 0, 0, 0.1);
}

.float-card span {
  display: block;
  color: var(--color-red);
  font-family: "Roboto Mono", monospace;
  font-size: 0.875rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 0.9375rem;
}

.float-card strong {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 800;
  color: #e8e8e8;
}

.float-card small {
  display: block;
  margin-top: 2px;
  color: #e8e8e8;
  font-size: 0.75rem;
  line-height: 1rem;
}

.copy-panel p {
  color: var(--color-muted);
  font-size: 1.0625rem;
}

/* The About description prints straight into .copy-panel instead of a
   .wysiwyg-content wrapper, so its links fell through to the global
   `a { color: inherit; text-decoration: none }` and read as plain body text.
   Styled here rather than by adding the wrapper, which would also drag in
   .wysiwyg-content's 1rem paragraphs and change the section's type size. */
.copy-panel>p a:not(.btn),
.copy-panel>ul a:not(.btn),
.copy-panel>ol a:not(.btn) {
  color: var(--color-red);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.copy-panel>p a:not(.btn):hover,
.copy-panel>ul a:not(.btn):hover,
.copy-panel>ol a:not(.btn):hover,
.copy-panel>p a:not(.btn):focus-visible,
.copy-panel>ul a:not(.btn):focus-visible,
.copy-panel>ol a:not(.btn):focus-visible {
  color: var(--color-red-dark);
  text-decoration-color: currentColor;
}

.scheme-dark .copy-panel>p a:not(.btn),
.scheme-dark .copy-panel>ul a:not(.btn),
.scheme-dark .copy-panel>ol a:not(.btn) {
  color: #ff9d94;
}

.image-panel.image-side-left {
  order: -1;
}

.section-intro {
  text-align: center;
  margin-bottom: 2.5rem;
}

.section-intro h2 {
  margin: 0.75rem 0 0;
}

.intro-text {
  color: var(--color-muted);
  font-size: 1.0625rem;
  margin: 1rem 0 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.content-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  position: relative;
  padding: 2rem;
  border: 0.8px solid rgba(0, 0, 0, 0.05);
  border-radius: 1.25rem;
  background: var(--color-white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  min-height: 16rem;
}

.card-link {
  position: absolute;
  inset: 0;
  border-radius: 1.25rem;
  z-index: 1;
  transition: background-color 0.2s ease;
}

.content-card:hover {
  border-color: rgba(194, 60, 50, 0.32);
  box-shadow: 0 14px 30px rgba(16, 20, 24, 0.08);
  transform: translateY(-3px);
}

.card-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.75rem;
  border-radius: 0.875rem;
  background: rgba(194, 60, 50, 0.08);
}

.card-icon img {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

.content-card:hover .card-link {
  background-color: rgba(0, 0, 0, 0.02);
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  z-index: 2;
}

.card-content h3 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.card-content p {
  margin: 0;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.5rem;
  flex: 1;
}

.card-text {
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.5rem;
  flex: 1;
  margin: 0;
}

.card-text p {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.card-link-text {
  color: var(--color-red);
  font-weight: 600;
  font-size: 0.9375rem;
  position: relative;
  z-index: 3;
  transition: color 0.2s ease;
}

.content-card:hover .card-link-text {
  color: var(--color-red-dark, #cc0000);
}

.split-grid--single {
  grid-template-columns: 1fr;
}

.content-split .copy-panel>.eyebrow {
  margin: 0 0 0.75rem;
}

.content-split .copy-panel>h2 {
  margin: 0 0 1.25rem;
}

.content-split .copy-panel>.btn {
  margin-top: 1.75rem;
  align-self: flex-start;
}

.content-split .copy-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.content-split .copy-panel>.wysiwyg-content {
  width: 100%;
}

.text-block-inner.text-block--narrow {
  max-width: 46rem;
  margin: 0 auto;
}

.scheme-gray {
  background: #f4f5f6;
}

.scheme-dark {
  background: var(--color-ink);
}

.scheme-dark .text-block-heading h2,
.scheme-dark .text-block-heading h3,
.scheme-dark .copy-panel>h2,
.scheme-dark .wysiwyg-content h2,
.scheme-dark .wysiwyg-content h3,
.scheme-dark .wysiwyg-content h4 {
  color: var(--color-white);
}

.scheme-dark .wysiwyg-content p,
.scheme-dark .wysiwyg-content li,
.scheme-dark .copy-panel p {
  color: #c6cbd2;
}

.scheme-dark .wysiwyg-content a {
  color: #ff9d94;
}

.scheme-dark .wysiwyg-content a:hover {
  color: var(--color-white);
}

.scheme-dark .wysiwyg-content table {
  background: var(--color-white);
  border-color: rgba(255, 255, 255, 0.15);
}

.scheme-dark .btn-dark {
  background: var(--color-red);
}

.scheme-dark .section-intro h2,
.scheme-dark .cards-split-intro h2 {
  color: var(--color-white);
}

.scheme-dark .intro-text {
  color: #c6cbd2;
}

.scheme-dark .content-card {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.scheme-dark .content-card:hover {
  border-color: rgba(194, 60, 50, 0.55);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

/* Content cards: split layout — intro left, 2x2 cards right */
/* Weighted toward the cards: the intro column is a heading, a short paragraph
   and an image, none of which need 5/12 of the row, while the card text was
   being squeezed into an unreadable measure. */
.cards-split {
  display: grid;
  grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr);
  gap: 2.5rem;
  align-items: start;
}

/* Keeps the intro readable at the wider viewports this ratio allows. */
.cards-split-intro .intro-text p {
  max-width: 34rem;
}

.cards-split-intro .intro-text {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.cards-split-intro h2 {
  margin: 0.75rem 0 0;
}

.cards-split-media {
  margin-top: 1.75rem;
}

.cards-split-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.cards-split-intro .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.cards-grid--half {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  /* Without this the grid stretches every card to the tallest in its row, so
     one long card leaves a block of dead space in its neighbour. */
  align-items: start;
}

.cards-grid--half .content-card {
  min-height: 0;
  /* 2rem of padding on a half-width, two-column grid left roughly a
     30-character measure. Reclaiming padding is the cheapest width there is. */
  padding: 1.5rem;
}

.cards-grid--half .card-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.875rem;
  border-radius: 0.75rem;
}

.cards-grid--half .card-icon img {
  width: 1.25rem;
  height: 1.25rem;
}

.cards-grid--half .card-content {
  gap: 0.4rem;
}

/* Card titles ran to three ragged lines at 1.25rem in this column. */
.cards-grid--half .card-content h3 {
  font-size: 1.0625rem;
  line-height: 1.4;
  text-wrap: balance;
}

.cards-grid--half .card-content p,
.cards-grid--half .card-text {
  font-size: 0.9375rem;
  line-height: 1.65;
  text-wrap: pretty;
}

@media (max-width: 1024px) {
  .cards-split {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 640px) {
  .cards-grid--half {
    grid-template-columns: 1fr;
  }
}

.mini-cta {
  padding: 2rem 0;
}

.section+.mini-cta {
  padding-top: 0;
  margin-top: -2rem;
}

.scheme-gray+.mini-cta,
.scheme-dark+.mini-cta {
  margin-top: 0;
  padding-top: 2rem;
}

.mini-cta-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.75rem 2rem;
  border-radius: 1.25rem;
  background: #f4f5f6;
  border: 0.8px solid rgba(0, 0, 0, 0.05);
}

.mini-cta-icon {
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.mini-cta-icon img {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
}

.mini-cta-copy {
  flex: 1;
}

.mini-cta-copy h3 {
  margin: 0 0 0.25rem;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.4px;
}

.mini-cta-copy .wysiwyg-content p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

.mini-cta-card .btn {
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  .mini-cta-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

.text-block .eyebrow {
  margin-bottom: 0.5rem;
}

.text-block-heading h2,
.text-block-heading h3 {
  margin: 0 0 1.25rem;
}

.wysiwyg-content p {
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1.25rem;
}

.wysiwyg-content> :last-child {
  margin-bottom: 0;
}

.wysiwyg-content ul,
.wysiwyg-content ol {
  color: var(--color-muted);
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.wysiwyg-content li {
  margin-bottom: 0.625rem;
  line-height: 1.7;
}

.wysiwyg-content h2,
.wysiwyg-content h3,
.wysiwyg-content h4 {
  margin: 2.5rem 0 1rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.wysiwyg-content h2 {
  margin: 2.5rem 0 1.25rem;
  font-size: clamp(2rem, 6vw, 2.1875rem);
  line-height: 1.5;
  letter-spacing: -0.7px;
}

.wysiwyg-content h3 {
  font-size: 1.375rem;
}

/* Underline on hover only. Declared with a transparent decoration rather than
   `none` so the underline can transition and the text never reflows. */
.wysiwyg-content a {
  color: var(--color-red);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.wysiwyg-content a:hover,
.wysiwyg-content a:focus-visible {
  color: var(--color-red-dark);
  text-decoration-color: currentColor;
}

/* Editor-inserted theme buttons: undo the inline link treatment. */
.wysiwyg-content a.btn {
  font-weight: 800;
  text-decoration: none;
}

.wysiwyg-content a.btn-red,
.wysiwyg-content a.btn-red:hover {
  color: var(--color-white);
}

.wysiwyg-content a.btn-outline-dark {
  color: var(--color-ink);
}

.wysiwyg-content a.btn-outline-dark:hover,
.wysiwyg-content a.btn-outline-dark:focus-visible {
  color: var(--color-white);
}

.wysiwyg-content h2:first-child,
.wysiwyg-content h3:first-child,
.wysiwyg-content h4:first-child {
  margin-top: 0;
}

.wysiwyg-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
  border: 0.8px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.75rem;
  overflow: hidden;
}

.wysiwyg-content table:first-child {
  margin-top: 0;
}

.wysiwyg-content th,
.wysiwyg-content td {
  padding: 0.75rem 1rem;
  border-bottom: 0.8px solid rgba(0, 0, 0, 0.08);
  text-align: left;
  color: var(--color-muted);
  line-height: 1.5rem;
}

.wysiwyg-content th,
.wysiwyg-content thead td {
  background: var(--color-red);
  color: var(--color-white);
  font-weight: 800;
  border-bottom: 0;
  font-family: "Manrope", Arial, sans-serif;
  letter-spacing: 0.2px;
}

.wysiwyg-content tr:last-child td {
  border-bottom: 0;
}

.wysiwyg-content tr:nth-child(even) td {
  background: #fafafa;
}

.wysiwyg-content tbody td:first-child {
  font-weight: 700;
  color: var(--color-heading);
}

@media (max-width: 720px) {

  .wysiwyg-content th,
  .wysiwyg-content td {
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
  }
}

.about-desc {
  color: var(--color-heading) !important;
  font-size: 1rem !important;
  line-height: 1.7rem !important;
  font-weight: 400;
}

.about-heading {
  display: flex;
  flex-direction: column;
  margin: 0.75rem 0 0;
}

.about-heading-line1 {
  display: block;
  font-size: clamp(2.25rem, 6vw, 2.5515rem);
  line-height: 1.5;
  font-weight: 800;
  color: var(--color-heading);
  letter-spacing: -1.2247px;
  white-space: nowrap;
}

.about-heading-line2 {
  display: block;
  font-size: clamp(2.25rem, 6vw, 2.5515rem);
  line-height: 1.5;
  font-weight: 800;
  color: var(--color-red);
  letter-spacing: -1.2247px;
}

.check-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.5rem;
  padding: 0;
  margin: 1.25rem 0 1.75rem;
  list-style: none;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.25rem;
}

.check-list li::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  display: block;
  border-radius: 50%;
  border: 2px solid var(--color-red);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23c23c32' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
  margin-top: 1px;
}

.about-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  height: 3.40625rem;
  padding: 1rem 1.75rem;
  font-size: 0.9375rem;
  font-weight: 800;
}

.promo-banners {
  background: var(--color-white);
}

.promo-banners-container {
  max-width: 71.9375rem;
  margin: 0 auto;
}

.promo {
  min-height: 27.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  background: var(--color-white);
}

.promo-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.5rem 4rem;
}

.promo-dark .promo-copy {
  background: var(--color-white);
}

.promo-red .promo-copy {
  background: #f6f6f6;
}

.eyebrow-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.eyebrow-icon-box {
  background: var(--color-red);
  border-radius: 0.25rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

.eyebrow-icon-box svg {
  width: 1.25rem;
  height: 1.25rem;
}

.promo p.eyebrow {
  margin: 0;
  font-family: "Roboto Mono", monospace;
  color: var(--color-red);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1875rem;
}

.promo h2 {
  max-width: 28rem;
  margin: 0 0 1rem 0;
  color: var(--color-heading);
  font-size: clamp(1.75rem, 6vw, 1.8225rem);
  line-height: 1.5;
  font-weight: 800;
  letter-spacing: -0.8748px;
}

.promo p:not(.eyebrow) {
  max-width: 26.25rem;
  margin: 0;
  color: #1a1c1b;
  font-size: 0.9375rem;
  line-height: 1.625;
}

.promo-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 27.25rem;
}

.promo-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.promo-image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 37, 55, 0.25);
}

.promo-dark .promo-image-wrapper {
  border-left: 4px solid var(--color-red);
}

.promo-red .promo-image-wrapper {
  order: 1;
  border-right: 4px solid var(--color-red);
}

.promo-red .promo-copy {
  order: 2;
}

.mini-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 28rem;
  margin: 2rem 0;
}

.mini-stats .stat-card {
  padding: 1rem;
  border: 0.8px solid #999eb1;
  border-radius: 1.25rem;
  background: var(--color-white);
}

.stat-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.stat-header svg {
  width: 1rem;
  height: 1rem;
  color: #1a1c1b;
}

.stat-header span {
  color: #1a1c1b;
  font-family: "Roboto Mono", monospace;
  font-size: 0.625rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 0.9375rem;
}

.mini-stats strong {
  display: block;
  color: #1a1c1b;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.75rem;
}

.btn-promo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 1.25rem;
  background: var(--color-red);
  color: var(--color-white);
  padding: 0.75rem 1.5rem;
  border-radius: 1.25rem;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.25rem;
  text-decoration: none;
  width: fit-content;
}

.btn-promo svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

.shop-categories {
  padding: 5rem 0;
  background: #23272a;
}

.shop-categories .section-heading h2 {
  color: #e8e8e8;
  font-size: 2.1875rem;
  letter-spacing: -0.7px;
}

.shop-categories .section-link {
  color: var(--color-red);
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}

.category-card {
  height: 5.35rem;
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  border: 0.8px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.25rem;
  background: #2d3136;
  text-decoration: none;
  transition: border-color 0.2s;
}

.category-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

/* Scoped to .category-card. As a bare .card-icon this shared a selector with the
   content-card chip above and, being later in the file, won on source order —
   painting the content-card icons dark instead of the intended pale red. */
.category-card .card-icon {
  width: 2.75rem;
  height: 2.75rem;
  background: #2d3136;
  border-radius: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  color: var(--color-red);
}

/* Category thumbnail. WooCommerce serves these at 300px+, so they have to be
   pinned to the icon box. `contain` rather than `cover` because product shots
   arrive at mixed aspect ratios and cropping them mid-product looks careless. */
.category-card .card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

/* Product photography is shot on white, so the chip goes white to match rather
   than leaving a hard-edged white square floating on the dark card. */
.category-card--has-image .card-icon {
  overflow: hidden;
  padding: 0.25rem;
  background: #ffffff;
}

/* Initials fallback: a category with no products and no image. Tinted chip so
   the container actually reads — the previous #2d3136 was the card's own
   background, which is why the old arrow appeared to float unattached. */
.category-card--no-image .card-icon {
  background: rgba(255, 255, 255, 0.06);
  border: 0.8px solid rgba(255, 255, 255, 0.08);
}

.card-icon__initials {
  font-family: "Manrope", sans-serif;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--color-red);
}

.category-card .card-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.delivery-icon {
  width: 2.75rem;
  height: 2.75rem;
  background: #c23c32;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

.delivery-icon img,
.delivery-icon svg {
  width: 1.375rem;
  height: 1.375rem;
  display: block;
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-content span {
  color: #e8e8e8;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.20313rem;
}

.card-content small {
  color: #808080;
  font-size: 0.75rem;
  line-height: 1rem;
}

.card-arrow {
  color: #808080;
  display: flex;
  align-items: center;
}

.card-arrow svg {
  width: 1rem;
  height: 1rem;
}

.guide-section {
  background: #f4f4f4;
  padding: 6rem 0;
  position: relative;
}

.guide-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
}

.guide-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.guide-bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
}

.guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  position: relative;
  z-index: 2;
}

.guide-intro {
  padding: 0 4rem 0 0;
}

.guide-intro .eyebrow.white {
  color: #ffffff;
  font-family: "Roboto Mono", monospace;
  font-size: 0.875rem;
  letter-spacing: 0.1875rem;
  text-transform: uppercase;
}

.guide-intro h2 {
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2.25rem, 6vw, 2.55125rem);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -1.22px;
  margin-top: 1.5rem;
}

.guide-intro h2 .red-text {
  color: #c23c32;
}

.guide-intro p:not(.eyebrow) {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.7;
  margin: 1.5rem 0 2.5rem;
}

.guide-intro .button-row {
  display: flex;
  gap: 0.75rem;
}

/* Optional editor HTML block: first item in the right column, above the cards.
   Rendered only when the field is filled, and scoped entirely to .guide-content
   so an empty field changes nothing. This column sits on the light half of the
   section, so it takes dark text — not the intro's white. */
.guide-cards .guide-content {
  /* ~68 characters is the comfortable reading measure for this column. */
  max-width: 34rem;
  color: #4a5259;
  font-size: 1rem;
  line-height: 1.75;
  padding-bottom: 2.5rem;
  border-bottom: 0.8px solid rgba(0, 0, 0, 0.08);
  text-wrap: pretty;
}

.guide-cards .guide-content :is(h2, h3, h4) {
  color: var(--color-heading);
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 2rem 0 0.75rem;
}

.guide-cards .guide-content :is(h2, h3, h4):first-child {
  margin-top: 0;
}

.guide-cards .guide-content h2 {
  font-size: 1.375rem;
}

.guide-cards .guide-content h3 {
  font-size: 1.125rem;
}

.guide-cards .guide-content h4 {
  font-size: 1rem;
}

.guide-cards .guide-content p {
  margin: 0 0 1.15rem;
}

/* The first paragraph carries the block — give it a little more presence. */
.guide-cards .guide-content > p:first-child {
  color: var(--color-heading);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.guide-cards .guide-content :is(ul, ol) {
  margin: 0 0 1.15rem;
  padding-left: 1.125rem;
}

.guide-cards .guide-content li {
  margin: 0 0 0.5rem;
  padding-left: 0.25rem;
}

.guide-cards .guide-content li::marker {
  color: var(--color-red);
}

.guide-cards .guide-content strong {
  color: var(--color-heading);
  font-weight: 700;
}

.guide-cards .guide-content > :last-child {
  margin-bottom: 0;
}

/* No cards beneath it — drop the separator so nothing dangles. */
.guide-cards .guide-content:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* This copy is link-dense, so bold + full underline on every one turns the
   block into noise. Weight stays normal; a thin offset underline carries it. */
.guide-cards .guide-content a {
  color: var(--color-red);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.guide-cards .guide-content a:hover,
.guide-cards .guide-content a:focus-visible {
  color: var(--color-red-dark);
  text-decoration-color: currentColor;
}

.btn-outline-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.5rem;
  background: #ffffff;
  color: #333;
  border: 0.8px solid rgba(0, 0, 0, 0.1);
  border-radius: 1.25rem;
  font-family: "Manrope", sans-serif;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.25rem;
  text-decoration: none;
  transition: all 0.2s;
}

.btn-outline-light:hover {
  background: #f4f4f4;
  color: #333;
}

.btn-red svg {
  margin-left: 0.75rem;
}

.guide-cards {
  display: flex;
  flex-direction: column;
  padding: 0 0 0 4rem;
}

.guide-cards article {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 2rem 0;
  border-bottom: 0.8px solid rgba(0, 0, 0, 0.08);
}

.guide-cards article:last-child {
  border-bottom: none;
}

.guide-cards small {
  color: #c23c32;
  font-family: "Roboto Mono", monospace;
  font-size: 0.6875rem;
  letter-spacing: 2px;
  padding-top: 0.2375rem;
}

.guide-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.guide-card-content h3 {
  margin: 0;
  color: #7c8083;
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.5rem;
}

.guide-card-content p {
  margin: 0;
  color: #a0a4a8;
  font-size: 0.875rem;
  line-height: 1.7;
  padding-bottom: 0.5rem;
}

.guide-card-content a {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: #c23c32;
  font-family: "Manrope", sans-serif;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.25rem;
  text-decoration: none;
}

.center-heading {
  max-width: 40.625rem;
  margin: 0 auto 2.125rem;
  text-align: center;
}

.center-heading h2 {
  font-size: clamp(2rem, 6vw, 2.18688rem);
  font-weight: 800;
  letter-spacing: -0.7px;
  color: #1a2537;
  margin: 0.75rem 0 0;
}

.center-heading p:not(.eyebrow) {
  color: #9599ae;
  font-size: 1rem;
  line-height: 1.5rem;
  margin-top: 1rem;
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
}

.review-score-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 3rem;
}

.score-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.3rem;
  background: #f5f5f5;
  border: 0.8px solid rgba(0, 0, 0, 0.08);
  border-radius: 1.25rem;
  text-align: center;
  gap: 0;
}

.brand-logo {
  margin-bottom: 0.75rem;
  font-size: 1.75rem;
  font-family: "Manrope", sans-serif;
  line-height: 1;
}

.brand-logo img {
  height: 2rem;
  width: auto;
  max-width: 4.5rem;
  object-fit: contain;
  margin-inline: auto;
}

.testimonial-platform img {
  height: 1.5rem;
  width: auto;
  max-width: 3.5rem;
  object-fit: contain;
  display: block;
}

.stars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 0.25rem;
}

.score-card strong {
  display: block;
  color: #1a2537;
  font-family: "Manrope", sans-serif;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.75rem;
  margin-top: 0.25rem;
}

.score-card span {
  display: block;
  color: #a4abb7;
  font-family: "Manrope", sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
}

.score-card small {
  display: block;
  color: #1a2537;
  font-family: "Manrope", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  margin-top: 0.25rem;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 0;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.55rem;
  background: #f5f5f5;
  border: 0.8px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.25rem;
}

.testimonial-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.testimonial-card .stars {
  gap: 2px;
  margin-bottom: 0;
}

.testimonial-card p {
  margin: 0;
  color: #1a2537;
  font-family: "Manrope", sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
  flex: 1;
}

.testimonial-card footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.55rem;
  border-top: 0.8px solid rgba(0, 0, 0, 0.06);
}

.testimonial-card b {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #4a5356;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 0.875rem;
  font-weight: 800;
  flex-shrink: 0;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-info strong {
  display: block;
  color: #1a2537;
  font-family: "Manrope", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
}

.user-info span {
  display: block;
  color: #a4abb7;
  font-family: "Manrope", sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1rem;
}

.btn-outline-border {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.55rem;
  background: transparent;
  color: #1a2537;
  border: 0.8px solid rgba(0, 0, 0, 0.12);
  border-radius: 1.25rem;
  font-family: "Manrope", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-decoration: none;
  transition: all 0.2s;
}

.btn-outline-border:hover {
  background: #f5f5f5;
}

.center-action {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.faq-section {
  background: #23272a;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* Figma 77:8624 — eyebrow 12px gap, heading 38.5px lines + 20px gap, desc 24px gap. */
.faq-grid h2 {
  color: var(--color-white);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.faq-grid .faq-intro {
  margin: 0 0 1.5rem;
  max-width: 20rem;
}

.faq-grid .faq-intro p {
  line-height: 1.7;
}

.faq-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 3.625rem;
  align-items: start;
}

.faq-grid>div:first-child>.eyebrow {
  margin-bottom: 0.75rem;
}

.faq-grid p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9375rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
  max-width: 20rem;
}

.faq-section .btn-red {
  box-shadow: none;
  min-height: 3rem;
  padding: 0.875rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 800;
}

.faq-list {
  display: grid;
  gap: 0.5rem;
}

.faq-list details {
  transition: background 0.25s ease, border-color 0.25s ease;
  background: #2d3136;
  border-radius: 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0 1.5rem;
}

.faq-list summary {
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-white);
}

.faq-list summary h3 {
  margin: 0;
  font: inherit;
  color: inherit;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 0.25rem;
  background: #23272a;
  color: var(--color-white);
  font-size: 1.125rem;
  font-weight: 400;
  flex: 0 0 auto;
}

.faq-list details[open] {
  background: #32373d;
  border-color: rgba(255, 255, 255, 0.12);
}

.faq-category-section--cream .faq-list details[open],
.faq-category-section--light .faq-list details[open] {
  background: var(--color-white);
  border-color: rgba(194, 60, 50, 0.35);
}

.faq-list details[open] summary::after {
  content: "-";
}

.faq-list details p {
  margin: -0.5rem 0 1.5rem;
  font-size: 0.875rem;
  color: #fff;
  opacity: 0.8;
}

/* Dynamic FAQ page */
.faq-page-hero {
  padding: clamp(4rem, 9vw, 8rem) 0;
  background: var(--color-heading);
  text-align: center;
}

.faq-page-hero__inner {
  max-width: 52rem;
}

.faq-page-hero h1 {
  margin: 0;
  color: var(--color-white);
  font-size: clamp(3.25rem, 8vw, 6.75rem);
  line-height: 0.95;
  letter-spacing: -0.065em;
}

.faq-page-hero__intro {
  max-width: 44rem;
  margin: 1.5rem auto 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(1rem, 2vw, 1.1875rem);
  line-height: 1.7;
}

.faq-category-section {
  padding-block: clamp(4rem, 8vw, 6.5rem);
}

.faq-page .faq-category-section .faq-grid {
  max-width: 56rem;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.faq-page .faq-category-section__intro {
  max-width: 40rem;
}

.faq-page .faq-category-section__intro h2 {
  margin-bottom: 0;
}

.faq-page .faq-category-section__intro h2+p {
  max-width: 38rem;
  margin-top: 0.75rem;
  margin-bottom: 0;
}

.faq-category-section--cream {
  background: var(--color-cream);
}

.faq-category-section--light {
  background: var(--color-white);
}

.faq-category-section--dark {
  background: var(--color-ink);
}

.faq-category-section--cream .faq-grid h2,
.faq-category-section--light .faq-grid h2 {
  color: var(--color-heading);
}

.faq-category-section--cream .faq-grid p,
.faq-category-section--light .faq-grid p {
  color: var(--color-muted);
}

.faq-category-section--cream .faq-list details,
.faq-category-section--light .faq-list details {
  background: var(--color-white);
  border-color: var(--color-line);
  box-shadow: var(--shadow-soft);
}

.faq-category-section--light .faq-list details {
  background: var(--color-soft);
  box-shadow: none;
}

.faq-category-section--cream .faq-list summary,
.faq-category-section--light .faq-list summary {
  color: var(--color-heading);
}

.faq-category-section--cream .faq-list summary::after,
.faq-category-section--light .faq-list summary::after {
  background: var(--color-heading);
}

.faq-list .faq-answer p,
.faq-list .faq-answer li {
  max-width: none;
}

.faq-list details::details-content {
  display: flow-root;
  block-size: 0;
  overflow: clip;
  interpolate-size: allow-keywords;
  margin-block-start: 0;
  transition: block-size 0.3s ease, margin-block-start 0.3s ease, content-visibility 0.3s allow-discrete;
}

.faq-list details[open]::details-content {
  block-size: auto;
  margin-block-start: -0.5rem;
}

.faq-list details[open] .faq-answer {
  animation: faq-answer-in 0.3s ease;
}

@keyframes faq-answer-in {
  from {
    opacity: 0;
    transform: translateY(-0.375rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .faq-list details::details-content {
    transition: none;
  }

  .faq-list details[open] .faq-answer {
    animation: none;
  }
}

.faq-list .faq-answer {
  padding: 0 0 1.5rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.faq-list .faq-answer> :first-child {
  margin-top: -0.5rem;
}

@supports selector(details::details-content) {

  .faq-list details p,
  .faq-list .faq-answer> :first-child {
    margin-top: 0;
  }
}

.faq-list .faq-answer> :last-child {
  margin-bottom: 0;
}

.faq-category-section--cream .faq-answer,
.faq-category-section--light .faq-answer {
  color: var(--color-body);
}

.faq-category-section .faq-answer p,
.faq-category-section .faq-answer li {
  max-width: none;
  color: inherit;
}

.faq-page-cta {
  background: var(--color-soft);
}

.faq-page-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.faq-page-cta h2 {
  margin: 0;
  color: var(--color-heading);
}

.faq-page-cta .eyebrow {
  margin-bottom: 0.75rem;
}

.faq-page-cta .btn {
  min-height: 3rem;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.faq-page-empty {
  text-align: center;
}

.faq-page-content {
  border-top: 1px solid var(--color-line);
  background: var(--color-white);
}

.faq-page-content__inner> :first-child {
  margin-top: 0;
}

.faq-page-content__inner> :last-child {
  margin-bottom: 0;
}

.delivery-section {
  background: #f5f5f5;
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.delivery-section .split-grid {
  grid-template-columns: 0.75fr 1fr;
  gap: 4rem;
  align-items: center;
}

.delivery-section .copy-panel>.eyebrow {
  font-size: 0.875rem;
  letter-spacing: 2px;
  line-height: 1.03125rem;
  margin-bottom: 0.75rem;
}

.delivery-section .copy-panel>h2 {
  font-size: clamp(2.25rem, 6vw, 2.5515rem);
  line-height: 1.5;
  letter-spacing: -1.2247px;
  color: #1a2537;
  margin: 0 0 1rem;
}

.delivery-section .copy-panel>p:not(.eyebrow) {
  font-size: 1.0625rem;
  color: #1a1c1b;
  margin: 0 0 2rem;
  line-height: 1.7;
}

.delivery-section .image-panel>img {
  height: 20.625rem;
  min-height: unset;
  object-fit: cover;
}

.reverse {
  grid-template-columns: 1.02fr 0.98fr;
}

.delivery-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.625rem 0;
}

.delivery-cards>div {
  background: #f5f5f5;
  border-radius: 1.25rem;
  border: 0.8px solid rgba(0, 0, 0, 0.08);
  padding: 1.55rem;
  gap: 0.75rem;
  display: flex;
  flex-direction: column;
}

.delivery-cards h3 {
  color: #1a2537;
  font-weight: 800;
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin: 0 0 2px;
}

.delivery-cards span {
  display: block;
  color: #9599ae;
  font-size: 0.75rem;
  line-height: 1rem;
  margin-bottom: 0;
}

.delivery-cards strong {
  display: block;
  color: #c23c32;
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.40625rem;
  border-top: 0.8px solid rgba(0, 0, 0, 0.08);
  padding-top: 0.55rem;
  margin: 0 0 2px;
}

.delivery-cards p {
  display: block;
  margin: 0;
  color: #a4abb7;
  font-size: 0.75rem;
  line-height: 1rem;
}

.delivery-section .float-card {
  position: absolute;
  left: 2rem;
  bottom: -3.125rem;
  right: auto;
  width: auto;
  border: none;
  padding: 1rem 1.5rem;
  background: #f5f5f5;
  border-radius: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0px 20px 25px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.06);
}

.delivery-section .float-card-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #c23c32;
  flex: 0 0 auto;
}

.delivery-section .float-card span {
  display: block;
  margin-bottom: 2px;
  color: #c23c32;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 400;
  line-height: 0.9375rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.delivery-section .float-card strong {
  display: block;
  margin: 0;
  color: #1a2537;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.75rem;
}

.image-panel--delivery {
  position: relative;
}

.market-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

.market-label img {
  width: 0.875rem;
  height: 0.875rem;
  display: block;
  flex: 0 0 auto;
}

.market-title {
  margin: 0;
  color: var(--color-ink) !important;
  font-family: "Manrope", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
}

.markets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.markets>span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.05rem;
  border-radius: 1.25rem;
  border: 0.8px solid rgba(0, 0, 0, 0.1);
  background: #f5f5f5;
  color: #1a2537;
  font-size: 0.875rem;
  font-weight: 800;
}

.cta-section {
  padding: 3rem 0;
  background-color: var(--color-ink);
}

.cta-card {
  background-color: var(--color-red);
  border-radius: 1.25rem;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.cta-content-left h2 {
  color: var(--color-white);
  font-size: clamp(1.5rem, 6vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.56px;
  margin: 0 0 0.25rem 0;
}

.cta-content-left p,
.cta-content-left .cta-text p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  margin: 0;
}

.cta-card .button-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* Two buttons share the row 50/50. */
.cta-card .button-row:has(> .btn:nth-child(2))>.btn {
  flex: 1 1 0;
  justify-content: center;
}

.btn-white {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-white);
  color: var(--color-red);
  padding: 0.875rem 1.5rem;
  border-radius: 1.25rem;
  font-size: 0.875rem;
  font-weight: 800;
  text-decoration: none;
}

.btn-outline-white {
  display: inline-flex;
  align-items: center;
  border: 0.8px solid rgba(255, 255, 255, 0.4);
  color: var(--color-white);
  padding: 0.875rem 1.5rem;
  border-radius: 1.25rem;
  font-size: 0.875rem;
  font-weight: 800;
  text-decoration: none;
}

.site-footer {
  padding: 4rem 0 0;
  background: rgba(20, 22, 25, 0.9);
  color: var(--color-white);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.65fr repeat(3, 0.72fr);
  gap: 3.25rem;
  padding-bottom: 3.5rem;
}

.footer-logo-wrap {
  display: inline-block;
  background: #2d3136;
  border-radius: 0.25rem;
  padding: 0.625rem 1rem;
  margin-bottom: 0;
}

.footer-logo-wrap img {
  width: 7.5rem;
  height: 1.7rem;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
}

.footer-logo {
  width: 250px;
  max-width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}

.footer-brand p {
  max-width: 20.375rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  line-height: 1.4875rem;
  margin: 1.5rem 0;
}

.footer-brand address {
  font-style: normal;
  font-size: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-contact-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.25rem;
}

.footer-contact-row img,
.footer-contact-row svg {
  flex-shrink: 0;
}

.footer-contact-row a {
  color: rgba(255, 255, 255, 0.8);
  display: inline;
  margin: 0;
}

.footer-col {
  display: flex;
  flex-direction: column;
}

.footer-grid .footer-col-title {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.25rem;
  color: var(--color-white);
}

.footer-col>a {
  display: block;
  margin-bottom: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-decoration: none;
}

.social-links {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.social-links a {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  margin: 0;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0.25rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  font-weight: 800;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.social-links a:hover {
  background: var(--color-red);
  color: var(--color-white);
  transform: translateY(-2px);
}

.social-links svg {
  width: 1rem;
  height: 1rem;
  display: block;
  fill: currentColor;
}

.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: center;
  border-top: 0.8px solid rgba(255, 255, 255, 0.15);
  padding: 1.675rem 0;
}

.footer-bottom p,
.footer-bottom a {
  margin: 0;
  color: var(--color-white);
  font-family: "Roboto Mono", monospace;
  font-size: 0.625rem;
  line-height: 0.9375rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-self: end;
}

.payments {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.payments img {
  width: 2rem;
  height: 1.4375rem;
  object-fit: contain;
  border-radius: 0.1875rem;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(194, 60, 50, 0.45);
  outline-offset: 0.1875rem;
}

@media (max-width: 1024px) {
  .site-shell {
    max-width: none;
  }

  .container {
    width: min(100% - 3rem, var(--container));
  }

  .site-header {
    height: auto;
    flex-wrap: wrap;
    padding: 1rem 1.5rem;
  }

  .site-search {
    width: 100%;
    max-width: none;
    order: 4;
    margin-left: 0;
  }

  .mega-menu {
    display: none;
  }

  .header-actions {
    margin-left: auto;
  }

  .guide-section {
    background: #a7abaa;
    padding: 4rem 0 0 0;
  }

  .guide-bg-image {
    width: 100%;
  }

  .guide-intro {
    padding: 0;
  }

  .guide-cards {
    background: #f4f4f4;
    padding: 3rem 1.5rem;
    margin: 3rem -1.5rem 0 -1.5rem;
  }

  .hero-grid,
  .cards-grid,
  .reverse,
  .guide-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .faq-page-cta__inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-grid {
    padding-top: 4rem;
    min-height: auto;
  }

  .hero-media {
    min-height: 22.5rem;
  }


  .hero-media img {
    width: 43.125rem;
    right: 50%;
    transform: translate(50%, -50%);
  }

  .category-strip {
    height: auto;
    padding: 1.25rem 0;
  }

  .category-strip-inner {
    flex-wrap: wrap;
    justify-content: center;
  }

  .product-grid,
  .stats-grid,
  .review-score-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .category-grid,
  .testimonial-grid {
    grid-template-columns: 1fr 1fr;
  }

  .promo-copy,
  .site-shell .promo-copy {
    padding: 3.5rem 1.5rem;
  }

  .guide-intro {
    position: static;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    padding: 1.5rem 0;
    text-align: center;
  }

  .footer-links,
  .payments {
    justify-self: center;
  }

  .single-product.woocommerce div.product {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .single-product.woocommerce div.product div.summary,
  .single-product.woocommerce div.product div.images {
    position: static;
  }

  .single-product.woocommerce div.product .related ul.products,
  .single-product.woocommerce div.product .upsells ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .promo {
    grid-template-columns: 1fr;
  }

  /* .promo-red flips the pair at desktop — undo it when stacked, or the two
     banners meet image-to-image. */
  .promo .promo-image-wrapper {
    order: -1;
  }

  .promo .promo-copy {
    order: 0;
  }

  .promo-image-wrapper {
    min-height: 20rem;
  }

  .promo img {
    max-height: 20rem;
  }

  .cta-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-card .button-row {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  /* Stacked: image leads, regardless of which side it sits on at desktop. */
  .split-grid .image-panel {
    order: -1;
  }

  /* Full-bleed art looks oversized once stacked — cap and centre it. */
  .split-grid .image-panel {
    max-width: 24rem;
    margin: 0 auto;
  }

  .delivery-section .split-grid,
  .split-grid,
  .content-split .split-grid--wide-text,
  .content-split .split-grid--wide-text:has(.image-side-left) {
    grid-template-columns: 1fr;
  }

  .content-split .image-panel--sticky {
    position: static;
    top: auto;
  }
}

@media (max-width: 720px) {
  .announcement {
    height: auto;
  }

  .announcement p {
    white-space: normal;
  }

  .container {
    width: calc(100% - 2rem);
  }

  .site-header {
    gap: 0.875rem;
  }

  .primary-nav {
    width: 100%;
    order: 3;
    padding-left: 0;
    overflow-x: auto;
  }

  .header-actions {
    gap: 0.375rem;
  }

  .login-link {
    display: none;
  }

  .hero h1 {
    font-size: clamp(2.75rem, 13vw, 3.25rem);
  }

  .hero-description {
    font-size: 1.125rem;
  }

  .product-grid,
  .stats-grid,
  .category-grid,
  .review-score-grid,
  .testimonial-grid,
  .delivery-cards,
  .footer-grid,
  .split-grid,
  .cards-grid {
    grid-template-columns: 1fr;
  }

  .hero-media {
    min-height: 16.25rem;
  }

  .hero-media img {
    width: 32.5rem;
  }

  .single-product.woocommerce .site-main {
    width: calc(100% - 2rem);
    margin: 2rem auto;
  }

  .single-product.woocommerce div.product div.summary,
  .single-product.woocommerce div.product .woocommerce-tabs {
    padding: 1.25rem;
  }

  .single-product.woocommerce div.product form.cart,
  .single-product.woocommerce div.product form.cart .button {
    width: 100%;
  }

  .single-product.woocommerce div.product .related ul.products,
  .single-product.woocommerce div.product .upsells ul.products {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 3.5rem 0;
  }

  .row-heading {
    align-items: start;
    flex-direction: column;
  }

  .section-heading h2,
  .center-heading h2,
  .copy-panel h2,
  .guide-intro h2,
  .faq-grid h2,
  .cta-content h2 {
    font-size: clamp(2.1875rem, 10vw, 2.375rem);
  }

  .product-card h3 {
    min-height: auto;
  }

  .promo h2 {
    font-size: clamp(2.25rem, 11vw, 2.5rem);
  }

  .mini-stats {
    grid-template-columns: 1fr;
  }

  .guide-cards article {
    grid-template-columns: 1fr;
  }

  .guide-cards small {
    grid-row: auto;
  }

  .faq-list summary {
    min-height: 4.5rem;
  }

  .cta-section {
    min-height: 26.25rem;
  }
}

@media (max-width: 430px) {

  .brand,
  .brand img {
    width: 10.5rem;
  }

  .brand img {
    height: 2.375rem;
  }

  .btn {
    width: 100%;
  }

  .header-actions .btn {
    width: auto;
    padding-inline: 0.875rem;
  }

  .hero-actions,
  .button-row {
    width: 100%;
  }

  .hero h1 {
    font-size: clamp(2.5rem, 12vw, 2.75rem);
  }

  .hero-media img {
    width: 28.125rem;
  }

  .float-card,
  .delivery-section .float-card {
    right: 1rem;
    left: 1rem;
    right: 1rem;
    width: auto;
  }
}

/* Contact page */
.contact-hero {
  padding: clamp(3.5rem, 7vw, 6.5rem) 0;
  position: relative;
  background:
    radial-gradient(circle at 12% 18%, rgba(194, 60, 50, 0.08), transparent 24rem),
    var(--color-cream);
  overflow: hidden;
}

.contact-hero::after {
  content: "";
  width: 18rem;
  height: 18rem;
  position: absolute;
  right: -8rem;
  bottom: -10rem;
  border: 3.5rem solid rgba(194, 60, 50, 0.08);
  border-radius: 50%;
}

.contact-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(24rem, 1.08fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 7rem);
  position: relative;
  z-index: 1;
}

.contact-hero__copy {
  max-width: 34rem;
}

.contact-hero__copy h1 {
  margin: 0;
  color: var(--color-heading);
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.07em;
}

.contact-hero__description {
  max-width: 31rem;
  margin: 1.5rem 0 0;
  color: #59616b;
  font-size: clamp(1rem, 1.8vw, 1.1875rem);
  line-height: 1.7;
}

.contact-hero__cta {
  margin-top: 1.75rem;
  gap: 0.5rem;
}

.contact-form-panel {
  scroll-margin-top: 2rem;
}

.contact-hero__media {
  min-height: clamp(22rem, 38vw, 31rem);
  position: relative;
}

.contact-hero__media::before {
  content: "";
  position: absolute;
  inset: 1.75rem -1.75rem -1.75rem 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--color-red);
}

.contact-hero__media>img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  object-fit: cover;
  box-shadow: var(--shadow-card);
}

.contact-hero__badge {
  min-width: 15rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  position: absolute;
  left: -2rem;
  bottom: 2rem;
  padding: 1rem 1.125rem;
  border: 1px solid rgba(35, 39, 42, 0.08);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.contact-hero__badge>span {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(194, 60, 50, 0.1);
  color: var(--color-red);
  font-weight: 800;
}

.contact-hero__badge p {
  display: grid;
  gap: 0.125rem;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.75rem;
}

.contact-hero__badge strong {
  color: var(--color-heading);
  font-size: 0.875rem;
}

.contact-main {
  padding-block: clamp(4rem, 8vw, 7rem);
}

.contact-main__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(21rem, 0.9fr);
  align-items: start;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.contact-form-panel {
  min-width: 0;
}

.contact-form-panel h2,
.contact-support-card h2,
.contact-locations__heading h2 {
  margin: 0;
  color: var(--color-heading);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.045em;
}

.contact-form-panel__content {
  margin-top: 1.5rem;
  color: var(--color-body);
}

.contact-form-panel__content>p:first-child {
  max-width: 43rem;
  margin-top: 0;
  color: var(--color-muted);
  line-height: 1.75;
}

.contact-form-panel__content a:not(.btn) {
  color: var(--color-red);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.contact-form-panel__content a:not(.btn):hover,
.contact-form-panel__content a:not(.btn):focus-visible {
  color: var(--color-red-dark);
  text-decoration-color: currentColor;
}

.contact-page .wpforms-container {
  margin: 2rem 0 0;
}

.contact-page .wpforms-container .wpforms-field {
  padding: 0 0 1.25rem;
}

.contact-page .wpforms-container .wpforms-field-label,
.contact-page .wpforms-container .wpforms-field-label-inline {
  color: var(--color-heading);
  font-size: 0.875rem;
  font-weight: 800;
}

.contact-page .wpforms-container .wpforms-required-label {
  color: var(--color-red);
}

.contact-page .wpforms-container input[type="text"],
.contact-page .wpforms-container input[type="email"],
.contact-page .wpforms-container input[type="tel"],
.contact-page .wpforms-container input[type="url"],
.contact-page .wpforms-container input[type="number"],
.contact-page .wpforms-container input[type="date"],
.contact-page .wpforms-container select,
.contact-page .wpforms-container textarea {
  width: 100%;
  max-width: none;
  border: 1px solid #c8cdd4;
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-body);
  font-size: 1rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.contact-page .wpforms-container input[type="text"],
.contact-page .wpforms-container input[type="email"],
.contact-page .wpforms-container input[type="tel"],
.contact-page .wpforms-container input[type="url"],
.contact-page .wpforms-container input[type="number"],
.contact-page .wpforms-container input[type="date"],
.contact-page .wpforms-container select {
  min-height: 3.125rem;
  padding: 0.75rem 0.875rem;
}

.contact-page .wpforms-container textarea {
  min-height: 10rem;
  padding: 0.875rem;
  resize: vertical;
}

.contact-page .wpforms-container input:focus,
.contact-page .wpforms-container select:focus,
.contact-page .wpforms-container textarea:focus {
  border-color: var(--color-red);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(194, 60, 50, 0.15);
}

.contact-page .wpforms-container input[type="radio"],
.contact-page .wpforms-container input[type="checkbox"] {
  accent-color: var(--color-red);
}

.contact-page .wpforms-container .wpforms-field-sublabel {
  color: var(--color-muted);
  font-size: 0.75rem;
}

.contact-page .wpforms-container label.wpforms-error,
.contact-page .wpforms-container em.wpforms-error {
  display: block;
  margin-top: 0.375rem;
  color: var(--color-red-dark);
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 700;
}

.contact-page .wpforms-container input.wpforms-error,
.contact-page .wpforms-container select.wpforms-error,
.contact-page .wpforms-container textarea.wpforms-error {
  border-color: var(--color-red);
}

.contact-page .wpforms-container .wpforms-submit-container {
  padding-top: 0.5rem;
}

.contact-page .wpforms-container .wpforms-submit-container button[type="submit"] {
  min-height: 3.125rem;
  padding: 0.875rem 1.75rem;
  border: 1px solid var(--color-red);
  border-radius: var(--radius-button);
  background: var(--color-red);
  color: var(--color-white);
  box-shadow: 0 10px 22px rgba(194, 60, 50, 0.24);
  font-size: 0.875rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.contact-page .wpforms-container .wpforms-submit-container button[type="submit"]:hover {
  border-color: var(--color-red-dark);
  background: var(--color-red-dark);
  transform: translateY(-1px);
}

.contact-page .wpforms-confirmation-container-full {
  margin-top: 2rem;
  border: 1px solid #9cc9a8;
  border-radius: var(--radius-md);
  background: #eef8f0;
  color: #245b32;
}

.contact-page .wpforms-container .wpforms-recaptcha-container,
.contact-page .wpforms-container .wpforms-hcaptcha-container,
.contact-page .wpforms-container .wpforms-turnstile-container {
  max-width: 100%;
  overflow-x: auto;
}

.contact-support-card {
  position: sticky;
  top: 6rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--color-line);
  border-top: 0.3rem solid var(--color-red);
  border-radius: var(--radius-lg);
  background: var(--color-soft);
  box-shadow: var(--shadow-soft);
}

.contact-support-card h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
}

.contact-support-card>p:not(.eyebrow) {
  margin: 1rem 0 0;
  color: var(--color-muted);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.contact-details {
  display: grid;
  gap: 0;
  margin: 1.5rem 0 0;
}

.contact-details>div {
  padding: 1.125rem 0;
  border-top: 1px solid var(--color-line);
}

.contact-details dt {
  margin-bottom: 0.25rem;
  color: var(--color-muted);
  font-family: "Roboto Mono", monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-details dd {
  margin: 0;
  color: var(--color-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.contact-details a:hover,
.contact-location-card__phone:hover {
  color: var(--color-red);
}

.contact-locations {
  padding-block: clamp(4rem, 8vw, 6rem);
  border-top: 1px solid var(--color-line);
  background: var(--color-soft);
}

.contact-locations__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.contact-locations__heading>p {
  max-width: 27rem;
  margin: 0;
  color: var(--color-muted);
}

.contact-location-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1.25rem;
}

.contact-location-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  padding: 2rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.contact-location-card::after {
  content: "";
  width: 5rem;
  height: 5rem;
  position: absolute;
  top: -2.5rem;
  right: -2.5rem;
  border-radius: 50%;
  background: rgba(194, 60, 50, 0.12);
}

.contact-location-card__number {
  color: var(--color-red);
  font-family: "Roboto Mono", monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.contact-location-card h3 {
  margin: 1rem 0 0.75rem;
  color: var(--color-heading);
  font-size: 1.25rem;
}

.contact-location-card address,
.contact-location-card__hours {
  margin: 0 0 1rem;
  color: var(--color-muted);
  font-size: 0.875rem;
  font-style: normal;
  line-height: 1.65;
}

.contact-location-card__phone {
  margin-bottom: 0.75rem;
  color: var(--color-heading);
  font-size: 0.875rem;
  font-weight: 800;
}

.contact-location-card .btn {
  gap: 0.5rem;
  margin-top: auto;
}

@media (max-width: 900px) {

  .contact-hero__grid,
  .contact-main__grid {
    grid-template-columns: 1fr;
  }

  .contact-hero__copy {
    max-width: 40rem;
  }

  .contact-hero__media {
    min-height: 25rem;
  }

  .contact-support-card {
    position: static;
  }
}

@media (max-width: 640px) {
  .contact-hero {
    padding: 3.5rem 0 4.5rem;
  }

  .contact-hero__grid {
    gap: 2.5rem;
  }

  .contact-hero__copy h1 {
    font-size: clamp(3.25rem, 18vw, 4.5rem);
  }

  .contact-hero__media {
    min-height: 18rem;
  }

  .contact-hero__media::before {
    inset: 1rem -0.5rem -1rem 1rem;
  }

  .contact-hero__badge {
    left: 1rem;
    right: 1rem;
    bottom: -2rem;
    min-width: 0;
  }

  .contact-main {
    padding-top: 5rem;
  }

  .contact-locations__heading {
    display: block;
  }

  .contact-locations__heading>p {
    margin-top: 1rem;
  }

  .contact-page .wpforms-container .wpforms-field-row,
  .contact-page .wpforms-container .wpforms-field-row-block {
    width: 100%;
    margin-left: 0;
  }

  .contact-page .wpforms-container .wpforms-field-row-block {
    float: none;
    padding: 0 0 0.75rem;
  }

  .contact-page .wpforms-container .wpforms-submit-container button[type="submit"] {
    width: 100%;
  }
}

/* WordPress compatibility */
.error-404 {
  min-height: min(47rem, calc(100vh - 6.6625rem));
  display: grid;
  align-items: center;
  padding: clamp(4rem, 8vw, 7rem) 0;
  background-color: var(--color-cream);
  background-image: radial-gradient(rgba(35, 39, 42, 0.09) 1px, transparent 1px);
  background-size: 18px 18px;
  overflow: hidden;
}

.error-404__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 7rem);
}

.error-404__content {
  max-width: 39rem;
}

.error-404__eyebrow,
.error-404__status,
.error-404__scribble {
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.error-404__eyebrow {
  width: fit-content;
  margin: 0 0 1.25rem;
  padding: 0.45rem 0.75rem;
  border: 2px solid var(--color-ink);
  background: #f5cf57;
  box-shadow: 4px 4px 0 var(--color-ink);
  font-size: 0.75rem;
  transform: rotate(-1.5deg);
}

.error-404 h1 {
  max-width: 38rem;
  margin: 0;
  color: var(--color-heading);
  font-size: clamp(3rem, 6vw, 5.75rem);
  line-height: 0.94;
  letter-spacing: -0.065em;
}

.error-404__copy {
  max-width: 35rem;
  margin: 1.75rem 0 2rem;
  color: #525a63;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
}

.error-404__search label {
  display: block;
  margin-bottom: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 800;
}

.error-404__search-row {
  max-width: 34rem;
  display: flex;
  gap: 0.625rem;
}

.error-404__search input[type="search"] {
  min-width: 0;
  flex: 1;
  border: 1px solid #a4abb7;
  border-radius: var(--radius-md);
  background: var(--color-white);
  padding: 0.75rem 1rem;
  outline: none;
}

.error-404__search input[type="search"]:focus {
  border-color: var(--color-red);
  box-shadow: 0 0 0 3px rgba(194, 60, 50, 0.18);
}

.error-404__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.error-404__home {
  font-size: 0.875rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.error-404__scene {
  min-height: 28rem;
  display: grid;
  place-items: center;
  position: relative;
}

.lost-box {
  width: min(22rem, 75vw);
  height: 17rem;
  position: relative;
  filter: drop-shadow(0 24px 18px rgba(35, 39, 42, 0.18));
  transform: rotate(3deg);
  animation: lost-box-float 3.6s ease-in-out infinite;
}

.lost-box__face {
  width: 100%;
  height: 100%;
  position: relative;
  border: 4px solid var(--color-ink);
  background: #c99759;
  box-shadow: inset -18px -16px 0 rgba(112, 67, 32, 0.12);
}

.lost-box__flap {
  width: 52%;
  height: 7rem;
  position: absolute;
  top: -4.9rem;
  z-index: 2;
  border: 4px solid var(--color-ink);
  background: #ddb477;
}

.lost-box__flap--left {
  left: -0.2rem;
  transform: skewY(-18deg);
}

.lost-box__flap--right {
  right: -0.2rem;
  transform: skewY(18deg);
}

.lost-box__tape {
  width: 3.5rem;
  height: 100%;
  position: absolute;
  top: 0;
  left: calc(50% - 1.75rem);
  background: rgba(245, 207, 87, 0.54);
}

.lost-box__label {
  position: absolute;
  top: 1.75rem;
  left: 1.75rem;
  padding: 0.6rem 0.75rem;
  border: 2px solid var(--color-ink);
  background: var(--color-white);
  font-family: "Roboto Mono", monospace;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 0.85;
  text-align: center;
  transform: rotate(-5deg);
}

.lost-box__label small {
  font-size: 0.48rem;
  letter-spacing: 0.05em;
}

.lost-box__eye {
  width: 1rem;
  height: 1.4rem;
  position: absolute;
  top: 7.6rem;
  border-radius: 50%;
  background: var(--color-ink);
}

.lost-box__eye--left {
  left: 8.3rem;
}

.lost-box__eye--right {
  left: 11.7rem;
}

.lost-box__mouth {
  width: 3.25rem;
  height: 1.4rem;
  position: absolute;
  top: 10.1rem;
  left: 9rem;
  border: 4px solid var(--color-ink);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}

.error-404__scribble {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0.75rem;
  transform: rotate(8deg);
}

.error-404__scribble::after {
  content: "";
  width: 4rem;
  height: 2rem;
  display: block;
  border-bottom: 3px solid var(--color-red);
  border-radius: 50%;
  transform: rotate(20deg);
}

.error-404__status {
  position: absolute;
  right: 1rem;
  bottom: 0;
  padding: 0.5rem 0.75rem;
  background: var(--color-red);
  color: var(--color-white);
  font-size: 0.6875rem;
  transform: rotate(-3deg);
}

@keyframes lost-box-float {

  0%,
  100% {
    transform: translateY(0) rotate(3deg);
  }

  50% {
    transform: translateY(-0.75rem) rotate(1deg);
  }
}

@media (max-width: 820px) {
  .error-404__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .error-404__content,
  .error-404__copy,
  .error-404__search-row {
    margin-inline: auto;
  }

  .error-404__eyebrow,
  .error-404__actions {
    margin-inline: auto;
  }

  .error-404__actions {
    justify-content: center;
  }

  .error-404__scene {
    min-height: 25rem;
  }
}

@media (max-width: 540px) {
  .error-404 {
    padding-block: 3.5rem;
  }

  .error-404__grid {
    width: min(100% - 2rem, var(--container));
  }

  .error-404__search-row,
  .error-404__actions {
    flex-direction: column;
  }

  .error-404__search-row .btn,
  .error-404__actions .btn {
    width: 100%;
  }

  .lost-box {
    width: 18rem;
    height: 14rem;
  }

  .lost-box__flap {
    height: 5.75rem;
    top: -4rem;
  }

  .lost-box__eye {
    top: 6.2rem;
  }

  .lost-box__eye--left {
    left: 6.65rem;
  }

  .lost-box__eye--right {
    left: 9.65rem;
  }

  .lost-box__mouth {
    top: 8.6rem;
    left: 7.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lost-box {
    animation: none;
  }
}

.brand .custom-logo-link,
.brand .custom-logo {
  display: block;
}

.brand .custom-logo {
  width: 14.5rem;
  height: 3.25rem;
  object-fit: contain;
}

@media (max-width: 430px) {
  .brand .custom-logo {
    width: 11.5rem;
    height: 2.6rem;
  }
}

/* Compact banner for standard pages */
.page-banner {
  position: relative;
  padding: clamp(2.75rem, 5vw, 4.25rem) 0;
  background: var(--color-heading);
  overflow: hidden;
}

.page-banner__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.page-banner--has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 18, 25, 0.68);
}

.page-banner__inner {
  position: relative;
  z-index: 1;
}

.page-banner h1 {
  margin: 0;
  color: var(--color-white);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.page-content {
  padding-block: clamp(3rem, 7vw, 6rem);
  color: var(--color-body);
}

.page-content article h1,
.page-content article h2,
.page-content article h3,
.page-content article h4,
.page-content article h5,
.page-content article h6 {
  color: var(--color-heading);
  font-weight: 800;
  line-height: 1.15;
}

.page-content article h1 {
  margin: 0 0 2rem;
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  letter-spacing: -0.045em;
}

.page-content article h2 {
  line-height: 1.5;
  margin: 3.5rem 0 1.25rem;
  font-size: clamp(1.65rem, 4vw, 2.25rem);
  letter-spacing: -0.035em;
  text-wrap: wrap;
  scroll-margin-top: 2rem;
}

.page-content article h3 {
  margin: 2.25rem 0 0.875rem;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
}

.page-content article h4,
.page-content article h5,
.page-content article h6 {
  margin: 1.75rem 0 0.75rem;
  font-size: 1rem;
}

.page-content article p {
  margin: 0 0 1.25rem;
  line-height: 1.8;
}

.page-content article strong {
  color: var(--color-heading);
}

.page-content article a {
  color: var(--color-red);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.page-content article a:hover,
.page-content article a:focus-visible {
  color: var(--color-red-dark);
  text-decoration-color: currentColor;
}

/* Editor-inserted theme buttons: undo the article link treatment. */
.page-content article a.btn {
  font-weight: 800;
  text-decoration: none;
}

.page-content article a.btn-red {
  color: var(--color-white);
}

.page-content article a.btn-red:hover {
  color: var(--color-white);
}

.page-content article a.btn-outline-dark {
  color: var(--color-ink);
}

.page-content article a.btn-outline-dark:hover {
  color: var(--color-ink);
}

.page-content article ul,
.page-content article ol {
  margin: 0 0 1.5rem;
  padding-left: 1.5rem;
}

.page-content article ul+ul,
.page-content article ol+ol {
  margin-top: -1rem;
}

.page-content article li {
  margin-bottom: 0.625rem;
  padding-left: 0.35rem;
  line-height: 1.75;
}

.page-content article li::marker {
  color: var(--color-red);
  font-weight: 800;
}

.page-content article blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 0.25rem solid var(--color-red);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-cream);
  color: var(--color-heading);
}

.page-content article blockquote p:last-child {
  margin-bottom: 0;
}

.page-content article hr {
  margin: 3rem 0;
  border: 0;
  border-top: 1px solid var(--color-line);
}

.page-content article table:not(.shop_table) {
  width: 100%;
  display: block;
  margin: 2rem 0;
  border: 0;
  border-collapse: collapse;
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: 0 0 0 1px var(--color-line), var(--shadow-soft);
  overflow-x: auto;
  font-size: 0.875rem;
  scrollbar-color: var(--color-red) var(--color-soft);
  scrollbar-width: thin;
}

.page-content article table:not(.shop_table)>thead,
.page-content article table:not(.shop_table)>tbody,
.page-content article table:not(.shop_table)>tfoot {
  width: 100%;
  min-width: 42rem;
  display: table;
  table-layout: fixed;
}

.page-content article table caption {
  padding: 0 0 0.75rem;
  color: var(--color-heading);
  font-size: 1rem;
  font-weight: 800;
  text-align: left;
  caption-side: top;
}

.page-content article table:not(.shop_table) th,
.page-content article table:not(.shop_table) td {
  min-width: 8rem;
  padding: 1rem 1.125rem;
  border: 0;
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}

.page-content article table:not(.shop_table) th:last-child,
.page-content article table:not(.shop_table) td:last-child {
  border-right: 0;
}

.page-content article table:not(.shop_table) tbody tr:last-child td {
  border-bottom: 0;
}

.page-content article table:not(.shop_table) th {
  background: var(--color-heading);
  color: var(--color-white);
  box-shadow: inset 0 -0.1875rem var(--color-red);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.page-content article table:not(.shop_table) th,
.page-content article table:not(.shop_table) th * {
  color: var(--color-white);
}

.page-content article table:not(.shop_table) th p {
  margin: 0;
  color: var(--color-white);
  line-height: 1.4;
}

.page-content article table:not(.shop_table) tr:nth-child(even) td {
  background: #f7f8f9;
}

.page-content article table:not(.shop_table) tbody tr {
  transition: background-color 140ms ease;
}

.page-content article table:not(.shop_table) tbody tr:hover td {
  background: var(--color-cream);
}

.page-content article table:not(.shop_table) td:first-child {
  color: var(--color-heading);
  font-weight: 700;
}

.page-content article .wp-block-table {
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.page-content article .wp-block-table table {
  margin: 0;
}

.privacy-policy .page-content article table td:first-child {
  width: 32%;
  background: rgba(194, 60, 50, 0.06);
}

.privacy-policy .page-content article table td:last-child {
  width: 5.5rem;
  color: var(--color-red-dark);
  font-family: "Roboto Mono", monospace;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.page-content article figure,
.page-content article .wp-block-image,
.page-content article .wp-block-table {
  max-width: 100%;
  margin: 2rem 0;
}

.page-content article figure img,
.page-content article>img {
  border-radius: var(--radius-md);
}

.page-content article figcaption {
  margin-top: 0.625rem;
  color: var(--color-muted);
  font-size: 0.8125rem;
  text-align: center;
}

.page-content article pre {
  max-width: 100%;
  margin: 1.5rem 0;
  padding: 1rem;
  border-radius: var(--radius-md);
  background: var(--color-heading);
  color: var(--color-white);
  overflow-x: auto;
}

.page-content article code {
  padding: 0.15em 0.35em;
  border-radius: var(--radius-sm);
  background: var(--color-soft);
  font-family: "Roboto Mono", monospace;
  font-size: 0.9em;
}

.page-content article pre code {
  padding: 0;
  background: transparent;
  color: inherit;
}

.privacy-policy .page-content article br {
  display: none;
}

@media (max-width: 720px) {
  .page-content {
    padding-block: 1.5rem;
  }

  .page-content article h2 {
    margin-top: 2.5rem;
  }

  .page-content article table:not(.shop_table) th,
  .page-content article table:not(.shop_table) td {
    padding: 0.75rem;
  }

  .page-content article table:not(.shop_table)>thead,
  .page-content article table:not(.shop_table)>tbody,
  .page-content article table:not(.shop_table)>tfoot {
    min-width: 38rem;
  }
}

.post-list {
  display: grid;
  gap: 1.5rem;
}

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.post-card:hover {
  border-color: var(--color-red);
  box-shadow: 0 0.75rem 2rem rgba(20, 29, 44, 0.08);
  transform: translateY(-0.2rem);
}

.post-card h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.post-card h2 {
  margin: 0 0 0.75rem;
  color: var(--color-heading);
  font-size: 1.375rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card-excerpt {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card-image {
  position: relative;
  display: block;
  margin: -1.5rem -1.5rem 1rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-soft);
}

.post-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.post-card:hover .post-card-image img {
  transform: scale(1.04);
}

/* No featured image. The logo is 319x72 (4.4:1), so cover-cropping it into this
   16/10 box blows it up ~2.8x and leaves a fragment of a wordmark. Treat it as a
   centred watermark on a tinted panel instead. */
.post-card-image--placeholder {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(194, 60, 50, 0.06), rgba(194, 60, 50, 0) 60%),
    var(--color-soft);
}

.post-card-image--placeholder img {
  width: auto;
  height: auto;
  max-width: 55%;
  max-height: 38%;
  object-fit: contain;
  opacity: 0.32;
}

/* Zooming a watermark on hover just draws attention to the missing image. */
.post-card:hover .post-card-image--placeholder img {
  transform: none;
}

.post-card-category {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-button);
  background: var(--color-red);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.post-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.post-card-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.post-card-meta__item svg {
  flex: 0 0 auto;
  color: var(--color-red);
}

.post-featured-image {
  margin-bottom: 2rem;
}

.post-featured-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* E-E-A-T author box */
.post-author-box {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  margin-top: 3rem;
  padding: 1.75rem;
  background: var(--color-gray-bg, #f6f7f8);
  border: 1px solid rgba(16, 20, 24, 0.08);
  border-radius: var(--radius-md);
}

.post-author-box__avatar img {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
}

.post-author-box__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-red);
}

.post-author-box__name {
  margin: 0.35rem 0 0;
  font-size: 1.125rem;
  font-weight: 800;
}

.post-author-box__name a {
  color: var(--color-heading);
  text-decoration: none;
}

.post-author-box__name a:hover {
  color: var(--color-red);
}

.post-author-box__role {
  margin: 0.15rem 0 0;
  font-size: 0.875rem;
  color: var(--color-body);
  opacity: 0.8;
}

.post-author-box__bio {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-body);
}

.post-author-box__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-heading);
  text-decoration: none;
}

.post-author-box__link:hover {
  color: var(--color-red);
}

@media (max-width: 600px) {
  .post-author-box {
    flex-direction: column;
  }
}

.woocommerce .site-main,
.woocommerce-page .site-main {
  width: min(var(--container), calc(100% - 6rem));
  margin: 3rem auto;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  border-radius: var(--radius-button);
  background: var(--color-red);
  color: var(--color-white);
  font-weight: 800;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--color-red-dark);
  color: var(--color-white);
}

.woocommerce div.product .product_title,
.woocommerce-products-header__title {
  color: var(--color-heading);
}

.single-product.woocommerce .site-main {
  width: min(75rem, calc(100% - 6rem));
}

.single-product.woocommerce div.product {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(22rem, 0.98fr);
  gap: 4rem;
  align-items: start;
}

/* Must live after the base rule above — an earlier identical-specificity
   media rule loses on source order. */
@media (max-width: 1024px) {
  .single-product.woocommerce div.product {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .single-product.woocommerce div.product>* {
    min-width: 0;
    max-width: 100%;
  }
}

/* Sale badge prints before the gallery wrapper — keep it out of the grid flow */
.single-product.woocommerce div.product>.onsale {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  min-height: 0;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-button);
  background: var(--color-red);
  color: var(--color-white);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.4;
}

.single-product.woocommerce div.product div.images,
.single-product.woocommerce div.product div.summary {
  width: auto;
  float: none;
}

.single-product.woocommerce div.product .sm-gallery-col {
  min-width: 0;
  align-self: stretch;
}

.single-product.woocommerce div.product div.images {
  position: sticky;
  top: 2rem;
  margin: 0;
}

/* The frame belongs on .flex-viewport — the element FlexSlider sizes to one
   slide. .woocommerce-product-gallery__wrapper is the slide *track*: once
   FlexSlider initialises it collapses to a 2px-wide strip the height of all
   slides stacked, so a border there painted as a hairline down the left edge
   instead of a frame. The direct-child selector keeps the frame working
   before init / with JS off, when the wrapper is still the visible box. */
.single-product.woocommerce div.product div.images .flex-viewport,
.single-product.woocommerce div.product div.images>.woocommerce-product-gallery__wrapper {
  overflow: hidden;
  margin: 0;
  border: 0.8px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  background: #f7f7f7;
  box-shadow: var(--shadow-soft);
}

.single-product.woocommerce div.product div.images .flex-viewport .woocommerce-product-gallery__wrapper {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.single-product.woocommerce div.product div.images img {
  width: 100%;
}

/* Radius stays on the frame, not the bitmap: product shots are white-on-white,
   so rounding the image corners cut four grey wedges out of the frame fill. */
.single-product.woocommerce div.product div.images .woocommerce-product-gallery__image img {
  border-radius: 0;
}

.single-product.woocommerce div.product div.images .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin: 1rem 0 0;
  padding: 0;
  /* WooCommerce core sets overflow:hidden here to clear the floats it used for
     this list. We're a grid, so there is nothing to clear — and leaving it on
     clipped the active thumb's 1px lift and its red glow flat against the
     container edge, which read as a broken border. */
  overflow: visible;
}

/* The frame lives on the <li>, not the <img>. Bordering the image directly means
   aspect-ratio resolves against the border box while the bitmap paints into the
   content box, so the square ends up 1.6px narrower than it is tall and the
   cover crop drifts off-centre — which is what made these look broken. */
.single-product.woocommerce div.product div.images .flex-control-thumbs li {
  width: auto;
  float: none;
  overflow: hidden;
  border: 0.8px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-white);
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.single-product.woocommerce div.product div.images .flex-control-thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* contain, not cover: these are product shots on white, and cropping them
     made each thumb frame a different part of the same product. */
  object-fit: contain;
  padding: 0.25rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: 1;
  cursor: pointer;
}

.single-product.woocommerce div.product div.images .flex-control-thumbs li:has(img.flex-active),
.single-product.woocommerce div.product div.images .flex-control-thumbs li:hover {
  border-color: var(--color-red);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(194, 60, 50, 0.16);
}

/* Fallback for engines without :has() — keeps the active state visible, just
   without the lift. FlexSlider puts .flex-active on the img, not the li. */
@supports not selector(li:has(img)) {
  .single-product.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
    outline: 0.8px solid var(--color-red);
    outline-offset: -0.8px;
  }
}

.single-product.woocommerce div.product div.summary {
  position: static;
  margin: 0;
  padding: 2rem;
  border: 0.8px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.single-product.woocommerce div.product .product_title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.single-product.woocommerce div.product .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
}

.single-product.woocommerce .star-rating {
  color: var(--color-red);
  font-size: 1.05rem;
  letter-spacing: 0.14em;
}

.single-product.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link {
  color: var(--color-muted);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--color-line);
  transition: color 160ms ease;
}

.single-product.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link:hover {
  color: var(--color-red);
}

.single-product.woocommerce div.product p.price,
.single-product.woocommerce div.product span.price {
  margin: 0 0 1.25rem;
  color: var(--color-red);
  font-size: 1.75rem;
  font-weight: 800;
}

.single-product.woocommerce div.product .woocommerce-product-details__short-description {
  margin: 0 0 1.5rem;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.75;
}

.single-product.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 1.5rem 0;
}

.single-product.woocommerce div.product form.cart table.variations {
  flex: 0 0 100%;
  margin: 0 0 1.25rem;
}

.single-product.woocommerce div.product form.cart table.variations tr {
  display: block;
  margin-bottom: 1rem;
}

.single-product.woocommerce div.product form.cart table.variations th,
.single-product.woocommerce div.product form.cart table.variations td {
  display: block;
  padding: 0;
  line-height: 1.2;
}

.single-product.woocommerce div.product form.cart table.variations th.label {
  margin-bottom: 0.4rem;
  text-align: left;
}

.single-product.woocommerce div.product form.cart table.variations label {
  display: block;
  margin: 0;
  color: var(--color-heading);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
}

.single-product.woocommerce div.product form.cart table.variations td.value {
  position: relative;
  display: block;
}

.single-product.woocommerce div.product form.cart table.variations select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  border: 0.8px solid var(--color-line);
  border-radius: var(--radius-md);
  background-color: var(--color-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23141d2c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  color: var(--color-heading);
  padding: 0.5rem 2.5rem 0.5rem 0.875rem;
  font-size: 0.9375rem;
  font-weight: 700;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.single-product.woocommerce div.product form.cart table.variations select:hover {
  border-color: #cfd4da;
  background-color: var(--color-white);
}

.single-product.woocommerce div.product form.cart table.variations select:focus {
  outline: none;
  border-color: var(--color-red);
  box-shadow: 0 0 0 3px rgba(194, 60, 50, 0.15);
}

.single-product.woocommerce div.product form.cart .reset_variations {
  position: absolute;
  top: -1.75rem;
  right: 0;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--color-line);
  transition: color 160ms ease;
}

.single-product.woocommerce div.product form.cart .reset_variations:hover {
  color: var(--color-red);
}

.single-product.woocommerce div.product form.cart div.quantity {
  margin: 0;
}

.single-product.woocommerce .quantity .qty {
  width: 5rem;
  min-height: 3rem;
  border: 0.8px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-soft);
  color: var(--color-heading);
  font-weight: 800;
}

.single-product.woocommerce div.product form.cart .button {
  min-height: 3rem;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-button);
  background: var(--color-red);
  box-shadow: 0 10px 22px rgba(194, 60, 50, 0.28);
}

.single-product.woocommerce div.product form.cart .button:hover {
  background: var(--color-red-dark);
}

/* Quantity plus/minus stepper (qib plugin) */
.single-product.woocommerce div.product form.cart .qib-button-wrapper {
  display: inline-flex;
  align-items: stretch;
  margin: 0 !important;
  border: 0.8px solid var(--color-line);
  border-radius: var(--radius-button);
  background: var(--color-white);
  overflow: hidden;
}

.single-product.woocommerce div.product form.cart .qib-button-wrapper button.qib-button {
  width: 3rem;
  min-height: 3rem;
  border: 0;
  border-radius: 0;
  background: var(--color-soft);
  color: var(--color-heading);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.single-product.woocommerce div.product form.cart .qib-button-wrapper button.qib-button:hover {
  background: var(--color-red);
  color: var(--color-white);
}

.single-product.woocommerce div.product form.cart .qib-button-wrapper div.quantity {
  display: flex;
  margin: 0;
}

.single-product.woocommerce div.product form.cart .qib-button-wrapper .qty {
  width: 3.5rem;
  min-height: 3rem;
  border: 0;
  border-radius: 0;
  background: var(--color-white);
  color: var(--color-heading);
  font-weight: 800;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.single-product.woocommerce div.product form.cart .qib-button-wrapper .qty::-webkit-outer-spin-button,
.single-product.woocommerce div.product form.cart .qib-button-wrapper .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.single-product.woocommerce div.product form.cart .qib-button-wrapper .qty:focus {
  outline: none;
  background: var(--color-soft);
}

.single-product.woocommerce div.product .stock {
  margin: 0.75rem 0;
  color: #5b7f45;
  font-weight: 700;
}

.single-product.woocommerce div.product table {
  width: 100%;
  border-collapse: collapse;
}

.single-product.woocommerce div.product table th,
.single-product.woocommerce div.product table td {
  padding: 0.75rem;
  border: 0.8px solid var(--color-line);
}

.single-product.woocommerce div.product table th {
  color: var(--color-heading);
  font-weight: 800;
}

.single-product.woocommerce div.product table td {
  color: var(--color-muted);
}

.single-product.woocommerce div.product .product_meta {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 0.8px solid var(--color-line);
  color: var(--color-muted);
}

.single-product.woocommerce div.product .product_meta .posted_in,
.single-product.woocommerce div.product .product_meta .tagged_as {
  display: none;
}

/* Hide the inline "Categories:" / "Tags:" labels and comma text nodes */
.single-product.woocommerce div.product .product_meta>span {
  display: block;
  font-size: 0;
  line-height: 0;
}

.single-product.woocommerce div.product .product_meta>span::before {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--color-muted);
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.single-product.woocommerce div.product .product_meta .sku_wrapper::before {
  content: "SKU";
}

.single-product.woocommerce div.product .product_meta .posted_in::before {
  content: "Categories";
}

.single-product.woocommerce div.product .product_meta .tagged_as::before {
  content: "Tags";
}

.single-product.woocommerce div.product .product_meta .sku {
  color: var(--color-heading);
  font-family: "Roboto Mono", monospace;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
}

.single-product.woocommerce div.product .product_meta a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0.4rem 0.4rem 0;
  padding: 0.3rem 0.75rem;
  border: 0.8px solid var(--color-line);
  border-radius: var(--radius-button);
  background: var(--color-soft);
  color: var(--color-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.single-product.woocommerce div.product .product_meta a:hover {
  border-color: rgba(194, 60, 50, 0.45);
  background: var(--color-white);
  color: var(--color-red);
}

.single-product.woocommerce div.product .product_meta a::before {
  content: "";
  flex: 0 0 auto;
  width: 0.8125rem;
  height: 0.8125rem;
  background: currentColor;
  -webkit-mask: var(--pill-icon) center / contain no-repeat;
  mask: var(--pill-icon) center / contain no-repeat;
}

.single-product.woocommerce div.product .product_meta .posted_in a {
  --pill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z'/%3E%3C/svg%3E");
}

.single-product.woocommerce div.product .product_meta .tagged_as a {
  --pill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='.5' fill='%23000'/%3E%3C/svg%3E");
}

.single-product.woocommerce div.product .woocommerce-tabs,
.single-product.woocommerce div.product .related,
.single-product.woocommerce div.product .upsells {
  grid-column: 1 / -1;
}

.single-product.woocommerce div.product .woocommerce-tabs {
  margin-top: 1rem;
  padding: 2rem;
  border: 0.8px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.single-product.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.75rem;
  padding: 0;
  border-bottom: 0.8px solid var(--color-line);
}

.single-product.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}

.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0 0 -0.8px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  transition: border-color 160ms ease;
}

.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
  border-bottom-color: var(--color-line);
}

.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--color-red);
  background: transparent;
}

.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 0.75rem 0.5rem;
  color: var(--color-muted);
  font-size: 0.9375rem;
  font-weight: 800;
  transition: color 160ms ease;
}

.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li:hover a {
  color: var(--color-heading);
}

.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--color-red);
}

.single-product.woocommerce div.product .woocommerce-tabs .panel {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.75;
}

.single-product.woocommerce div.product .woocommerce-tabs .panel h2,
.single-product.woocommerce div.product .related>h2,
.single-product.woocommerce div.product .upsells>h2 {
  margin: 0 0 1rem;
  color: var(--color-heading);
  font-size: 1.75rem;
  line-height: 1.2;
}

.single-product.woocommerce div.product .related,
.single-product.woocommerce div.product .upsells {
  margin-top: 2rem;
}

.single-product.woocommerce div.product .related ul.products,
.single-product.woocommerce div.product .upsells ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

/* WooCommerce clearfix pseudo-elements become grid items — remove them */
.single-product.woocommerce ul.products::before,
.single-product.woocommerce ul.products::after {
  display: none;
}

.single-product.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  width: auto;
  float: none;
  margin: 0;
  padding: 1rem;
  border: 0.8px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.single-product.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  border-color: rgba(194, 60, 50, 0.35);
  box-shadow: var(--shadow-card);
}

.single-product.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0 0 1rem;
  border-radius: var(--radius-md);
  background: var(--color-soft);
}

.single-product.woocommerce ul.products li.product .woocommerce-loop-product__title {
  margin: 0 0 0.5rem;
  padding: 0;
  color: var(--color-heading);
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.single-product.woocommerce ul.products li.product .star-rating {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--color-red);
}

.single-product.woocommerce ul.products li.product .price {
  margin: auto 0 0.875rem;
  color: var(--color-red);
  font-size: 1.05rem;
  font-weight: 800;
}

/* Sale prices print as <del>old</del> <ins>new</ins>. <ins> carries the UA
   underline — beside a struck-through old price that read as a second strike —
   and <del> was otherwise identical to the live price, so neither said which
   one you pay. Covers every place Woo prints a price: loops, single product,
   cart and checkout tables, and the header mini-cart. */
.woocommerce del,
.woocommerce-page del,
.price del,
.mini-cart-list del {
  margin-right: 0.375rem;
  color: var(--color-muted);
  font-weight: 500;
}

.woocommerce ins,
.woocommerce-page ins,
.price ins,
.mini-cart-list ins {
  background: transparent;
  font-weight: 700;
  text-decoration: none;
}

/* Muted grey is unreadable on the dark summary card. */
.woocommerce-cart .cart-collaterals del {
  color: rgba(255, 255, 255, 0.55);
}

.single-product.woocommerce ul.products li.product .price del {
  color: var(--color-muted);
  font-weight: 600;
  opacity: 0.7;
}

.single-product.woocommerce ul.products li.product .price ins {
  text-decoration: none;
}

.single-product.woocommerce ul.products li.product .price .woocommerce-price-suffix {
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.single-product.woocommerce ul.products li.product .button {
  margin: 0;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-button);
  background: var(--color-red);
  color: var(--color-white);
  font-weight: 800;
  text-align: center;
  transition: background 160ms ease;
}

.single-product.woocommerce ul.products li.product .button:hover {
  background: var(--color-red-dark);
}

/* Breadcrumb (all pages) */
.breadcrumb.breadcrumbs,
.woo-breadcrumbs,
.breadcrumb-trail {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.breadcrumb.breadcrumbs,
.woo-breadcrumbs {
  margin: 0 0 1.75rem;
}

.breadcrumb-trail>span {
  display: inline;
  color: var(--color-muted);
}

.breadcrumb-trail a {
  color: var(--color-muted);
  font-weight: 600;
  transition: color 160ms ease;
}

.breadcrumb-trail a:hover {
  color: var(--color-red);
}

.breadcrumb-trail a {
  display: inline-block;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.breadcrumb-trail .breadcrumb_last {
  color: var(--color-heading);
  font-weight: 700;
}

@media (max-width: 720px) {
  .breadcrumb-trail a {
    max-width: 7rem;
  }
}

/* Bulk Quantity Pricing (tiered pricing) table */
.single-product.woocommerce .tiered-pricing-wrapper {
  margin: 1.5rem 0;
}

.single-product.woocommerce .tiered-pricing-wrapper h3 {
  margin: 0 0 0.875rem !important;
  color: var(--color-heading);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.single-product.woocommerce table.tiered-pricing-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 0.8px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 0.9375rem;
}

.single-product.woocommerce table.tiered-pricing-table thead th {
  padding: 0.75rem 1rem;
  border: 0;
  background: var(--color-soft);
  color: var(--color-heading);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
}

.single-product.woocommerce table.tiered-pricing-table tbody td {
  padding: 0.75rem 1rem;
  border: 0;
  border-top: 0.8px solid var(--color-line);
  color: var(--color-body);
  font-weight: 600;
}

.single-product.woocommerce table.tiered-pricing-table tbody tr {
  transition: background-color 140ms ease;
}

.single-product.woocommerce table.tiered-pricing-table tbody tr:not(.tiered-pricing--active):hover td {
  background: var(--color-soft);
}

.single-product.woocommerce table.tiered-pricing-table tbody tr.tiered-pricing--active td {
  /* Plugin forces background-color: #e11f27 !important on active cells */
  color: var(--color-white) !important;
  font-weight: 800;
}

.single-product.woocommerce table.tiered-pricing-table tbody tr.tiered-pricing--active td .woocommerce-Price-amount,
.single-product.woocommerce table.tiered-pricing-table tbody tr.tiered-pricing--active td span {
  color: var(--color-white) !important;
}

.single-product.woocommerce table.tiered-pricing-table .woocommerce-Price-amount {
  color: inherit;
}

/* Blog posts page */
.blog-hero {
  padding: clamp(4rem, 9vw, 8rem) 0;
  background: var(--color-heading);
  text-align: center;
}

.blog-hero h1 {
  margin: 0;
  color: var(--color-white);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.blog-hero__intro {
  margin: 1.5rem auto 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(1rem, 2vw, 1.1875rem);
  line-height: 1.7;
}

.blog-posts__heading {
  margin-bottom: 2.5rem;
}

.post-list--grid {
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  align-items: start;
}

.post-card-readmore {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
  color: var(--color-red);
  font-weight: 800;
}

.blog-page .pagination,
.woocommerce nav.woocommerce-pagination {
  margin-top: 2.5rem;
}

.blog-page .pagination .nav-links,
.woocommerce nav.woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li {
  margin: 0;
  border: 0;
  overflow: visible;
}

.blog-page .pagination .page-numbers,
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-button);
  background: var(--color-white);
  color: var(--color-heading);
  font-weight: 700;
  line-height: 1;
}

.blog-page .pagination .page-numbers.current,
.blog-page .pagination .page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers.current,
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers:hover {
  border-color: var(--color-red);
  background: var(--color-red);
  color: var(--color-white);
}

.blog-page .pagination .page-numbers.dots,
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers.dots {
  border: 0;
  background: transparent;
  color: var(--color-muted);
}

.blog-shop-cta {
  margin-top: 2.5rem;
  text-align: center;
}

.blog-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.blog-cta h2 {
  margin: 0 0 0.75rem;
  color: var(--color-heading);
}

.blog-cta .eyebrow {
  margin-bottom: 0.75rem;
}

.blog-cta p {
  margin: 0;
}

.blog-cta .btn {
  min-height: 3rem;
  gap: 0.5rem;
  flex: 0 0 auto;
}

@media (max-width: 48rem) {
  .blog-cta__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Single blog post */
.post-hero {
  margin-bottom: 2.5rem;
}

.post-hero h1 {
  margin: 0.5rem 0 1rem;
}

.post-hero__meta {
  margin-bottom: 0;
}

.single-post-layout {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.post-sidebar {
  position: sticky;
  top: 6rem;
  display: grid;
  gap: 1.5rem;
}

.post-sidebar__title {
  margin: 0 0 0.75rem;
  color: var(--color-heading);
  font-size: 0.8125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.post-toc {
  padding: 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.post-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.25rem;
}

.post-toc__item a {
  display: block;
  padding: 0.375rem 0.75rem;
  border-left: 2px solid transparent;
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

.post-toc__item--h3 a {
  padding-left: 1.5rem;
}

.post-toc__item a:hover,
.post-toc__item a.is-active {
  border-left-color: var(--color-red);
  color: var(--color-heading);
  background: var(--color-soft);
}

.post-share__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.post-share__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-heading);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.post-share__button:hover {
  border-color: var(--color-red);
  background: var(--color-red);
  color: var(--color-white);
}

.post-share__button.is-copied {
  border-color: var(--color-red);
  background: var(--color-red);
  color: var(--color-white);
}

.post-article h2,
.post-article h3 {
  scroll-margin-top: 6rem;
}

.related-posts {
  border-top: 1px solid var(--color-line);
}

.related-posts__heading {
  margin-bottom: 2.5rem;
}

@media (max-width: 64rem) {
  .single-post-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .post-sidebar {
    position: static;
  }
}

/* Keep section titles on the sections-based homepage on one type scale. */
.sections-page section h2 {
  font-size: clamp(2rem, 3vw, 2.1875rem);
  line-height: 1.5;
}

.sections-page .about-heading>span {
  font-size: inherit;
  line-height: inherit;
}

/* Shop archive layout */
.shop-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.shop-sidebar {
  position: sticky;
  top: 6rem;
  display: grid;
  gap: 1.5rem;
}

.shop-widget {
  padding: 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.shop-filter {
  display: grid;
  gap: 1.5rem;
}

.shop-search {
  position: relative;
}

.shop-search input[type="search"] {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font: inherit;
}

@keyframes sm-spin {
  to {
    transform: rotate(360deg);
  }
}

.shop-filter.is-loading .shop-search::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.75rem;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  border: 2px solid var(--color-line);
  border-top-color: var(--color-red);
  border-radius: 50%;
  animation: sm-spin 0.7s linear infinite;
}

.shop-filter.is-loading .shop-cats,
.shop-filter.is-loading .shop-cats-toggle {
  opacity: 0.55;
  pointer-events: none;
}

.shop-main {
  position: relative;
}

.shop-main.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

.shop-main.is-loading::after {
  content: "";
  position: absolute;
  top: 10rem;
  left: 50%;
  width: 2rem;
  height: 2rem;
  margin-left: -1rem;
  border: 3px solid var(--color-line);
  border-top-color: var(--color-red);
  border-radius: 50%;
  animation: sm-spin 0.7s linear infinite;
}

/* Cart page */
.woocommerce-cart .page-content article h1 {
  margin-bottom: 2rem;
}

/* WooCommerce and the free-shipping plugin both print their notice wrappers
   unconditionally, empty when there is nothing to say. On the cart page that
   .woocommerce container is a grid, so an empty wrapper still claims a row and
   the 2rem gap either side of it — which is where the dead space above the cart
   table comes from. :empty is evaluated live, so each one reappears the instant
   WooCommerce writes a notice into it (including after an AJAX cart update). */
.woocommerce-notices-wrapper:empty,
.afrsm-free-shipping-notices:empty,
.woocommerce-NoticeGroup:empty {
  display: none;
}

@media (min-width: 64rem) {
  .woocommerce-cart .page-content article .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21.5rem;
    gap: 2rem;
    align-items: start;
  }

  /* When these do carry a message it should span both columns rather than sit
     squeezed into the product column. */
  .woocommerce-cart .page-content article .woocommerce-notices-wrapper,
  .woocommerce-cart .page-content article .afrsm-free-shipping-notices {
    grid-column: 1 / -1;
  }

  /* Re-hooked below the cart by sm_move_cart_cross_sells(), so it lands in the
     grid as its own row — give it both columns. */
  .woocommerce-cart .page-content article .woocommerce>.cross-sells {
    grid-column: 1 / -1;
  }

  .woocommerce-cart .cart-collaterals {
    width: 100%;
  }

  .woocommerce-cart .cart-collaterals .cart_totals {
    position: sticky;
    top: 6rem;
  }
}

/* woocommerce-layout.css floats .cart_totals right at 48% and .cross-sells left
   at 48%. The theme only undid the totals inside the 64rem grid block, and
   woocommerce-smallscreen.css only undoes them up to 768px — so between 769px
   and 1023px the summary rendered as a half-width card floating in the middle
   of the row. Both are full-width blocks here at every size. */
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart .cross-sells {
  float: none;
  width: 100%;
}

/* The line-item table cannot shrink below its own min-content width — long
   product names, a fixed-width stepper and tabular prices add up — so on a
   busy cart it overran its grid column and slid under the summary card, which
   paints later and hid the subtotal column. Scroll it inside the column. */
.woocommerce-cart .woocommerce-cart-form {
  min-width: 0;
  overflow-x: auto;
}

.woocommerce-cart .page-content article table.shop_table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
}

/* !important is aimed at advanced-flat-rate-shipping-for-woocommerce, whose
   public stylesheet loads after the theme and sets
   `.shop_table.shop_table_responsive { overflow: visible !important }`. Without
   clipping, the square-cornered first and last rows paint over the table's own
   rounded corners, which is what left the top edge looking like a detached
   line running past the corners. */
.woocommerce-cart .woocommerce-cart-form table.shop_table {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  overflow: hidden !important;
}

.woocommerce-cart .woocommerce-cart-form table.shop_table thead {
  display: none;
}

.woocommerce-cart .woocommerce-cart-form table.shop_table,
.woocommerce-cart .woocommerce-cart-form table.shop_table tbody {
  display: block;
  width: 100%;
}

.woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.25rem;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-white);
}

.woocommerce-cart .woocommerce-cart-form table.shop_table td {
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.woocommerce-cart td.product-remove {
  flex: none;
  order: 0;
}

.woocommerce-cart td.product-thumbnail {
  flex: none;
  order: 1;
}

.woocommerce-cart td.product-name {
  flex: 1;
  min-width: 0;
  order: 2;
}

.woocommerce-cart td.product-price {
  flex: none;
  order: 3;
  width: 5.5rem;
  text-align: right;
  white-space: nowrap;
}

.woocommerce-cart td.product-quantity {
  flex: none;
  order: 4;
  white-space: nowrap;
}

.woocommerce-cart td.product-subtotal {
  flex: none;
  order: 5;
  width: 5.75rem;
  text-align: right;
  white-space: nowrap;
}

/* On sale, these cells hold <del>old</del> <ins>new</ins> — inline that is
   twice the width the fixed column allows, and with nowrap it spilled over the
   quantity stepper and the row's right edge. Stack them: old above, new below. */
.woocommerce-cart td.product-price del,
.woocommerce-cart td.product-subtotal del {
  display: block;
  margin: 0 0 0.125rem;
  font-size: 0.8125rem;
  line-height: 1.3;
}

.woocommerce-cart td.product-price ins,
.woocommerce-cart td.product-subtotal ins {
  display: block;
  line-height: 1.3;
}

/* Add-on line items (ShipInsure): compact muted row */
.woocommerce-cart tr.cart-item-addon {
  background: #fafaf8 !important;
}

.woocommerce-cart tr.cart-item-addon td.product-thumbnail img {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.375rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: #eef1ff;
}

.woocommerce-cart tr.cart-item-addon td.product-name {
  font-size: 0.8125rem;
}

.woocommerce-cart tr.cart-item-addon td.product-quantity,
.woocommerce-cart tr.cart-item-addon td.product-price {
  display: none;
}

/* Stock label printed by the stock-status plugin */
.woocommerce-cart td.product-name p.stock {
  margin: 0.375rem 0 0;
  padding: 0;
  background: none;
  border: 0;
  color: #2e8b57 !important;
  font-size: 0.78125rem;
  font-weight: 600;
}

.woocommerce-cart td.product-name br {
  display: none;
}

/* Quantity stepper (qib plus/minus plugin markup) */
.woocommerce-cart .qib-button-wrapper {
  display: inline-flex !important;
  align-items: stretch;
  margin: 0 !important;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.woocommerce-cart .qib-button-wrapper .quantity {
  display: inline-flex;
  margin: 0 !important;
}

.woocommerce-cart .qib-button-wrapper input.qty {
  width: 2.5rem !important;
  min-height: 2.125rem;
  padding: 0.25rem !important;
  border: 0 !important;
  background: var(--color-white);
  text-align: center;
  font: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  -moz-appearance: textfield;
  appearance: textfield;
}

.woocommerce-cart .qib-button-wrapper input.qty::-webkit-outer-spin-button,
.woocommerce-cart .qib-button-wrapper input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.woocommerce-cart .qib-button-wrapper button.qib-button {
  width: 1.875rem !important;
  min-height: 2.125rem;
  padding: 0;
  border: 0 !important;
  background: #f7f6f3 !important;
  color: var(--color-heading) !important;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.woocommerce-cart .qib-button-wrapper button.qib-button:hover {
  background: var(--color-red) !important;
  color: var(--color-white) !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--color-red);
  color: var(--color-white);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--color-red-dark);
  color: var(--color-white);
}

.woocommerce-cart td.product-thumbnail img {
  width: 4.75rem;
  height: 4.75rem;
  object-fit: contain;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.woocommerce-cart td.product-name a {
  color: var(--color-heading);
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.35;
  text-decoration: none;
}

.woocommerce-cart td.product-name .variation,
.woocommerce-cart td.product-name .wc-item-meta {
  margin-top: 0.5rem;
  color: var(--color-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.woocommerce-cart td.product-name .stock {
  margin: 0.375rem 0 0;
  color: #4f8b43;
  font-size: 0.8125rem;
  font-weight: 600;
}

.woocommerce-cart td.product-price,
.woocommerce-cart td.product-subtotal {
  color: var(--color-heading);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.woocommerce-cart td.product-name a:hover {
  color: var(--color-red);
}

.woocommerce-cart a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  color: var(--color-muted) !important;
  font-weight: 400;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.woocommerce-cart a.remove:hover {
  border-color: var(--color-red);
  background: var(--color-red);
  color: var(--color-white) !important;
}

.woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr:last-child {
  border-bottom: 0;
  background: #fafaf8;
  border-top: 1px solid var(--color-line);
}

.woocommerce-cart td.actions {
  flex: 1;
  padding: 0 !important;
  background: transparent !important;
}

.woocommerce-cart td.actions .coupon {
  display: flex;
  float: none;
  width: 100%;
  gap: 0.75rem;
}

.woocommerce-cart td.actions .coupon input[type="text"] {
  flex: 1;
  width: auto !important;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font: inherit;
  font-size: 0.875rem;
}

.woocommerce-cart td.actions .coupon button.button {
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border-radius: var(--radius-md);
  background: var(--color-heading);
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.8125rem;
}

.woocommerce-cart td.actions .coupon button.button:hover {
  background: var(--color-red);
  color: var(--color-white);
}

/* Quantity changes auto-submit via theme.js — hide the manual button */
.woocommerce-cart td.actions>button.button[name="update_cart"],
.woocommerce-cart td.actions>input[name="update_cart"] {
  display: none;
}

/* Cross-sells: the loop-card design is scoped to .single-product, so these had
   nothing but WooCommerce's floated defaults. Same card, 4-up. */
.woocommerce-cart .cross-sells {
  margin-top: 1rem;
}

.woocommerce-cart .cross-sells>h2 {
  margin: 0 0 1.25rem;
  font-size: 1.375rem;
  line-height: 1.2;
}

.woocommerce-cart .cross-sells ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-cart .cross-sells ul.products::before,
.woocommerce-cart .cross-sells ul.products::after {
  display: none;
}

.woocommerce-cart .cross-sells ul.products li.product {
  display: flex;
  flex-direction: column;
  width: auto;
  float: none;
  margin: 0;
  padding: 1rem;
  border: 0.8px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.woocommerce-cart .cross-sells ul.products li.product:hover {
  transform: translateY(-3px);
  border-color: rgba(194, 60, 50, 0.35);
  box-shadow: var(--shadow-card);
}

.woocommerce-cart .cross-sells ul.products li.product>a:first-child {
  display: flex;
  flex: 1;
  flex-direction: column;
  text-decoration: none;
}

.woocommerce-cart .cross-sells ul.products li.product img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0 0 1rem;
  border-radius: var(--radius-md);
  background: var(--color-soft);
}

.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 0.5rem;
  padding: 0;
  color: var(--color-heading);
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.woocommerce-cart .cross-sells ul.products li.product .star-rating {
  margin: 0 0 0.5rem;
  color: var(--color-red);
  font-size: 0.85rem;
}

.woocommerce-cart .cross-sells ul.products li.product .price {
  margin: auto 0 0.875rem;
  color: var(--color-red);
  font-size: 1.05rem;
  font-weight: 800;
}

.woocommerce-cart .cross-sells ul.products li.product .woocommerce-price-suffix {
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.woocommerce-cart .cross-sells ul.products li.product a.button {
  display: block;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-button);
  background: var(--color-heading);
  color: var(--color-white);
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: center;
}

.woocommerce-cart .cross-sells ul.products li.product a.button:hover {
  background: var(--color-red);
  color: var(--color-white);
}

@media (max-width: 1024px) {
  .woocommerce-cart .cross-sells ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .woocommerce-cart .cross-sells ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.woocommerce-cart .cart-collaterals .cart_totals {
  padding: 1.75rem;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-heading);
  color: var(--color-white);
}

.woocommerce-cart .cart-collaterals .cart_totals h2 {
  margin: 0 0 1.125rem;
  font-size: 1.1875rem;
  color: var(--color-white);
}

.woocommerce-cart .cart-collaterals .cart_totals a:not(.button) {
  color: #ff8a7d;
}

.woocommerce-cart .cart-collaterals .cart_totals a.checkout-button {
  color: var(--color-white);
}

.woocommerce-cart .cart-collaterals .cart_totals a.checkout-button:hover {
  background: var(--color-red-dark);
  color: var(--color-white);
}

.woocommerce-cart .cart-collaterals table.shop_table,
.woocommerce-cart .cart-collaterals table.shop_table tbody {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
}

/* width:100% is load-bearing. A <tr> flipped to display:flex is still laid out
   shrink-to-fit and flush to the right edge of the block <tbody>, so the rows
   sized themselves to their text and huddled against the card's right side —
   label column crushed, total overflowing. It only looked acceptable in the
   1024px+ grid because the card there is narrow enough that shrink-to-fit
   nearly filled it; on a wide card the gap was obvious. */
.woocommerce-cart .cart-collaterals table.shop_table tbody tr {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.woocommerce-cart .cart-collaterals table.shop_table th,
.woocommerce-cart .cart-collaterals table.shop_table td {
  padding: 0.75rem 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow-wrap: break-word;
}

/* Labels keep their own width and never break: the value column is what should
   absorb the pressure. Without this the long shipping-method text next door
   squeezed the label column until "Subtotal" hyphen-free broke mid-word. */
.woocommerce-cart .cart-collaterals table.shop_table th {
  flex: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  overflow-wrap: normal;
  word-break: normal;
}

.woocommerce-cart .cart-collaterals table.shop_table td {
  flex: 1;
  min-width: 0;
}

.woocommerce-cart .cart-collaterals table.shop_table th small,
.woocommerce-cart .cart-collaterals table.shop_table td small {
  display: block;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.4;
}

.woocommerce-cart .cart-collaterals table.shop_table td {
  color: var(--color-white);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.woocommerce-cart .cart-collaterals table.shop_table td .woocommerce-Price-amount {
  color: var(--color-white);
}

.woocommerce-cart .cart-collaterals table.shop_table tr.order-total th {
  color: var(--color-white);
  font-size: 0.9375rem;
  font-weight: 700;
}

.woocommerce-cart .cart-collaterals table.shop_table tbody tr.order-total {
  border-bottom: 0;
  align-items: center;
}

.woocommerce-cart .cart-collaterals table.shop_table tr.order-total th,
.woocommerce-cart .cart-collaterals table.shop_table tr.order-total td {
  padding: 1.125rem 0 1.25rem;
  border-bottom: 0;
}

.woocommerce-cart .cart-collaterals table.shop_table tr.order-total td {
  font-size: 1.625rem;
  font-weight: 900;
  /* A four-figure total was breaking across lines mid-amount ("$2,62 / 7.49"). */
  white-space: nowrap;
}

/* Shipment row spans the full card width: label above, options below */
.woocommerce-cart .cart-collaterals table.shop_table tbody tr.shipping {
  display: block;
}

.woocommerce-cart .cart-collaterals table.shop_table tr.shipping th,
.woocommerce-cart .cart-collaterals table.shop_table tr.shipping td {
  display: block;
  width: 100%;
}

.woocommerce-cart .cart-collaterals table.shop_table tr.shipping th {
  padding: 1.125rem 0 0.625rem;
}

.woocommerce-cart .cart-collaterals table.shop_table tr.shipping td {
  padding-top: 0;
  padding-bottom: 1.125rem;
  text-align: left;
}

/* Destination sits under the method list, so it needs a clear break from the
   last option rather than the same gap the options use between themselves. */
.woocommerce-cart .cart-collaterals .woocommerce-shipping-destination,
.woocommerce-cart .cart-collaterals .woocommerce-shipping-calculator {
  margin: 1.125rem 0 0;
  text-align: left;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.woocommerce-cart .cart-collaterals .woocommerce-shipping-calculator {
  margin-top: 0.625rem;
}

.woocommerce-cart .cart-collaterals .shipping-calculator-button {
  display: inline-block;
  padding: 0.125rem 0;
}

.woocommerce-cart .cart-collaterals .woocommerce-shipping-destination strong {
  color: var(--color-white);
}

/* Each option runs to two or three lines (carrier name, price, est. delivery),
   so the old 0.75rem gap read as the same distance as the lines inside one
   option and the list ran together. */
.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.125rem;
  text-align: left;
}

.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods li {
  display: block;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
}

/* Radio layout only when a visible radio exists (multiple methods) */
.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods li:has(> input[type="radio"].shipping_method) {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  column-gap: 0.5rem;
  align-items: start;
}

/* Delivery estimate and any other plugin lines sit under the label, indented to
   the label column and set back from it. */
.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods li:has(> input[type="radio"].shipping_method)>*:not(input):not(label) {
  grid-column: 2;
  margin-top: 0.25rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  line-height: 1.5;
}

.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods input.shipping_method {
  width: 1rem;
  height: 1rem;
  margin: 0.125rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  appearance: auto;
  accent-color: var(--color-red);
}

.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods label {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
}

.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods label .woocommerce-Price-amount {
  color: var(--color-white);
  font-weight: 800;
}

.woocommerce-cart .cart-collaterals .cart_totals p,
.woocommerce-cart .cart-collaterals .cart_totals small {
  color: rgba(255, 255, 255, 0.55);
}

.woocommerce-cart .cart-collaterals .cart_totals input[type="text"],
.woocommerce-cart .cart-collaterals .cart_totals select {
  width: 100% !important;
  height: 2.5rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-heading);
  font: inherit;
  font-size: 0.875rem;
}

/* Shipping calculator form inside the dark card */
.woocommerce-cart .cart_totals .shipping-calculator-form {
  margin-top: 0.875rem;
  text-align: left;
}

.woocommerce-cart .cart_totals .shipping-calculator-form .form-row {
  float: none;
  width: 100%;
  margin: 0 0 0.75rem;
  padding: 0;
  text-align: left;
}

.woocommerce-cart .cart_totals .shipping-calculator-form label {
  display: block;
  margin-bottom: 0.25rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8125rem;
  text-align: left;
}

.woocommerce-cart .cart_totals .shipping-calculator-form .select2-container {
  width: 100% !important;
  text-align: left;
}

.woocommerce-cart .cart_totals .shipping-calculator-form .select2-selection--single {
  height: 2.5rem;
  min-height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}

.woocommerce-cart .cart_totals .shipping-calculator-form .select2-selection--single .select2-selection__rendered {
  min-height: calc(2.5rem - 2px);
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  color: var(--color-heading);
  font-size: 0.875rem;
  line-height: 1.375rem;
}

.woocommerce-cart .cart_totals .shipping-calculator-form .select2-selection--single .select2-selection__arrow {
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
}

.woocommerce-cart .cart_totals .shipping-calculator-form button {
  width: 100%;
  height: 2.5rem;
  min-height: 2.5rem;
  border-radius: var(--radius-sm);
}

/* PayPal Pay Later message renders dark text — give it a readable chip */
.woocommerce-cart .cart_totals .wc-ppcp-paylater-msg__container {
  margin: 1rem 0 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
}

/* ShipInsure widget (cart + checkout; inline-styled, hence !important) */
.woocommerce-cart #ShipInsureWidget,
.woocommerce-cart .si-widget,
.woocommerce-cart .si-widget .si-sub-header,
.woocommerce-cart .si-widget .si-header,
.woocommerce-checkout #ShipInsureWidget,
.woocommerce-checkout .si-widget,
.woocommerce-checkout .si-widget .si-sub-header,
.woocommerce-checkout .si-widget .si-header {
  text-align: left !important;
}

.woocommerce-cart .si-widget,
.woocommerce-checkout .si-widget {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.woocommerce-checkout .si-widget {
  margin: 0 0 1.5rem;
}

.woocommerce-cart .wc-proceed-to-checkout {
  padding: 0.25rem 0 0;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.9375rem 1.25rem;
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

@media (max-width: 63.9375rem) {
  .woocommerce-cart .cart-collaterals {
    margin-top: 2rem;
  }
}

@media (max-width: 48rem) {
  .woocommerce-cart .page-content {
    padding-block: 3rem;
  }

  .woocommerce-cart .page-content article h1 {
    margin-bottom: 1.5rem;
  }

  .woocommerce-cart .woocommerce-cart-form {
    overflow: visible;
  }

  .woocommerce-cart .woocommerce-cart-form table.shop_table,
  .woocommerce-cart .woocommerce-cart-form table.shop_table tbody,
  .woocommerce-cart .woocommerce-cart-form table.shop_table tr,
  .woocommerce-cart .woocommerce-cart-form table.shop_table td {
    display: block;
    width: 100%;
  }

  .woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item {
    position: relative;
    margin-bottom: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
  }

  .woocommerce-cart .woocommerce-cart-form table.shop_table td {
    min-width: 0;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--color-line);
  }

  .woocommerce-cart .woocommerce-cart-form table.shop_table td:last-child {
    border-bottom: 0;
  }

  .woocommerce-cart td.product-remove {
    width: auto !important;
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    padding: 0 !important;
    border: 0 !important;
    z-index: 1;
  }

  .woocommerce-cart td.product-thumbnail {
    display: block !important;
    padding: 0 0 0.875rem !important;
    border-bottom: 0 !important;
    text-align: left !important;
  }

  .woocommerce-cart td.product-thumbnail::before,
  .woocommerce-cart td.product-name::before {
    display: none;
  }

  .woocommerce-cart td.product-thumbnail img {
    width: 5rem;
    height: 5rem;
    margin: 0;
  }

  .woocommerce-cart td.product-name {
    padding-right: 2.5rem !important;
    text-align: left !important;
  }

  .woocommerce-cart td.actions,
  .woocommerce-cart td.actions .coupon {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .woocommerce-cart td.actions .coupon input[type="text"],
  .woocommerce-cart td.actions button.button {
    width: 100%;
  }

  .woocommerce-cart .cart-collaterals .cart_totals {
    padding: 1.25rem;
  }
}

.woocommerce-cart .return-to-shop {
  margin-top: 1.5rem;
}

.woocommerce-cart .wc-empty-cart-message {
  margin: 2rem 0 0;
}

/* Checkout page */
.woocommerce-checkout .page-content {
  background: var(--color-soft);
}

.woocommerce-checkout .page-content article>h1 {
  margin-bottom: 1.5rem;
}

/* Important-notes callout: the page's own content, wrapped by sm_wrap_checkout_notes() */
.woocommerce-checkout .checkout-notes {
  margin: 0 0 1.5rem;
  padding: 1.375rem 1.625rem;
  border-left: 3px solid var(--color-red);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: #fafaf8;
}

.woocommerce-checkout .checkout-notes>*:first-child {
  margin-top: 0;
}

.woocommerce-checkout .checkout-notes>*:last-child {
  margin-bottom: 0;
}

.woocommerce-checkout .checkout-notes h2,
.woocommerce-checkout .checkout-notes h3,
.woocommerce-checkout .checkout-notes h4 {
  margin: 0 0 0.875rem;
  color: var(--color-heading);
  font-size: 0.875rem;
  font-weight: 700;
}

.woocommerce-checkout .checkout-notes p {
  margin: 0 0 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.6;
}

.woocommerce-checkout .checkout-notes ul {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.woocommerce-checkout .checkout-notes ul li {
  position: relative;
  margin: 0 0 0.875rem;
  padding-left: 1.25rem;
  font-size: 0.84375rem;
  line-height: 1.6;
}

.woocommerce-checkout .checkout-notes ul li:last-child {
  margin-bottom: 0;
}

.woocommerce-checkout .checkout-notes ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-red);
  font-weight: 800;
}

.woocommerce-checkout .checkout-notes a {
  color: var(--color-red);
  font-weight: 700;
}

/* WooCommerce notices — themed globally (cart, shop, product, checkout). */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  margin: 1rem 0 1.5rem;
  padding: 1rem 1.25rem 1rem 3.25rem;
  border: 1px solid var(--color-line);
  border-top: 0.1875rem solid var(--color-red);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-body);
  box-shadow: var(--shadow-soft);
}

.woocommerce-info:focus,
.woocommerce-message:focus,
.woocommerce-error:focus {
  outline: 2px solid rgba(194, 60, 50, 0.3);
  outline-offset: 2px;
}

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
  top: 1rem;
  left: 1.25rem;
  color: var(--color-red);
}

.woocommerce-info a,
.woocommerce-message a {
  color: var(--color-red);
  font-weight: 800;
}

/* Coupon toggle: plain card, no alert treatment */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  margin: 0 0 1rem;
  padding: 1.125rem 1.375rem 1.125rem 3rem;
  border: 1px solid var(--color-line);
  border-top: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: none;
  font-size: 0.84375rem;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
  top: 1.125rem;
  left: 1.375rem;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
  color: var(--color-red);
  font-weight: 700;
  text-decoration: underline;
}

.woocommerce-checkout form.checkout_coupon {
  margin: -0.5rem 0 2rem;
  padding: 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.woocommerce-checkout form.checkout_coupon .form-row {
  margin-bottom: 0;
}

.woocommerce-checkout form.checkout_coupon .input-text {
  min-height: 2.875rem;
}

.woocommerce-checkout form.checkout_coupon button.button {
  min-height: 2.875rem;
  border-radius: var(--radius-button);
  background: var(--color-heading);
  color: var(--color-white);
  font-weight: 800;
}

.woocommerce-checkout form.checkout_coupon button.button:hover {
  background: var(--color-red);
  color: var(--color-white);
}

.woocommerce-checkout form.woocommerce-checkout {
  margin-top: 2rem;
}

/* Two-column checkout: stacked form cards left, sticky dark order card right */
@media (min-width: 64rem) {
  .woocommerce-checkout form.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 23.75rem;
    grid-template-rows: auto auto auto 1fr;
    column-gap: 2rem;
    align-items: start;
  }

  /* ShipInsure injects itself as the form's first child — full-width top row */
  .woocommerce-checkout form.woocommerce-checkout>.si-widget,
  .woocommerce-checkout form.woocommerce-checkout>#ShipInsureWidget {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .woocommerce-checkout form.woocommerce-checkout #customer_details {
    grid-column: 1;
    grid-row: 2 / span 3;
  }

  .woocommerce-checkout form.woocommerce-checkout .sm-order-rail {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: 5rem;
  }
}

.woocommerce-checkout #customer_details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-content: start;
}

/* 2-up field grid inside the form cards */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1rem;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper .form-row {
  grid-column: span 2;
  float: none;
  width: 100%;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-first,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-last {
  grid-column: span 1;
}

.woocommerce-checkout #customer_details::before,
.woocommerce-checkout #customer_details::after {
  display: none;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  float: none;
  width: 100%;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading {
  margin: 0 0 1.5rem;
  color: var(--color-heading);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  line-height: 1.2;
}

.woocommerce-checkout #order_review_heading {
  margin: 2rem 0 0;
  padding: 1.25rem 1.75rem;
  border: 0;
  border-bottom: 0.1875rem solid var(--color-red);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-heading);
  color: var(--color-white);
  font-size: 1.1875rem;
}

@media (min-width: 64rem) {
  .woocommerce-checkout #order_review_heading {
    margin-top: 0;
  }
}

.woocommerce-checkout #order_review {
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--color-heading);
  color: var(--color-white);
  overflow: hidden;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
  display: flow-root;
}

.woocommerce-checkout .form-row {
  margin: 0 0 1rem;
  padding: 0;
}

.woocommerce-checkout .form-row label {
  margin-bottom: 0.375rem;
  color: var(--color-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
}

.woocommerce-checkout .form-row .required {
  color: var(--color-red);
  text-decoration: none;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
  width: 100%;
  min-height: 2.625rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid #c8cdd3;
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-body);
  font: inherit;
  font-size: 0.9375rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.woocommerce-checkout .form-row textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.woocommerce-checkout .select2-container .select2-selection--single {
  padding: 0;
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0.6875rem 2.5rem 0.6875rem 0.875rem;
  color: var(--color-body);
  line-height: 1.5rem;
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .select2-container--open .select2-selection--single {
  border-color: var(--color-red);
  box-shadow: 0 0 0 0.1875rem rgba(194, 60, 50, 0.12);
  outline: none;
}

.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select,
.woocommerce-checkout .form-row.woocommerce-invalid .select2-selection {
  border-color: var(--color-red);
}

.woocommerce-checkout .form-row.woocommerce-validated input.input-text,
.woocommerce-checkout .form-row.woocommerce-validated select,
.woocommerce-checkout .form-row.woocommerce-validated .select2-selection {
  border-color: #5b9860;
}

.woocommerce-checkout #ship-to-different-address {
  margin-bottom: 1.5rem;
  font-size: 1.125rem;
}

.woocommerce-checkout #ship-to-different-address label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
}

.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"] {
  accent-color: var(--color-red);
}

.woocommerce-checkout-review-order-table {
  width: 100%;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-collapse: collapse !important;
  font-size: 0.875rem;
}

.woocommerce-checkout-review-order-table thead th {
  padding: 1rem 1.75rem 0.75rem !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.71875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: 0.875rem 1.75rem !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: transparent;
  color: var(--color-white);
  line-height: 1.45;
  text-align: left;
  vertical-align: top;
}

.woocommerce-checkout-review-order-table th:last-child,
.woocommerce-checkout-review-order-table td:last-child {
  width: 6rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* The 6rem price column above is right for Subtotal/Tax/Total, but the shipping
   methods land in that same td:last-child — six options with long carrier names
   were being wrapped into a 6rem gutter. Stack this row so the list gets the
   full rail width. */
/* Freeing the totals from the head/body column widths.
   As a block, tfoot's <tr> children (still table-row) get wrapped in their own
   anonymous table, so they no longer share the 6rem price column that was
   crushing the shipping options.

   The tfoot block itself lands in an anonymous cell pinned to column 1, so it
   has to overflow that cell to reach the rail edge — hence a width over 100%.
   NOTE: this figure is tied to the current column ratio. Column 1 is sized by
   the product-name content, so a much longer or shorter product title shifts
   the ratio and this over/undershoots. The permanent fix is colspan="2" on the
   shipping cell via a woocommerce/cart/cart-shipping.php template override,
   which needs no magic number at all. */
.woocommerce-checkout-review-order-table tfoot {
  display: block;
  width: 146%;
}

/* Auto table layout spreads the surplus width across both columns, which was
   inflating the label column into dead space. Pin the labels to their text and
   let the value column absorb the rest. */
.woocommerce-checkout-review-order-table tfoot th {
  width: 1% !important;
  white-space: nowrap;
}

.woocommerce-checkout-review-order-table tfoot td {
  width: 100% !important;
}

/* With tfoot already a block, this row can be a block too — it is no longer a
   table-row getting fixed up, so no anonymous cell pins it to a column. Label
   above, options across the full rail. */
.woocommerce-checkout-review-order-table tfoot tr.shipping {
  display: block;
  width: 100%;
}

.woocommerce-checkout-review-order-table tfoot tr.shipping th,
.woocommerce-checkout-review-order-table tfoot tr.shipping td {
  display: block;
  width: 100% !important;
  text-align: left !important;
}

.woocommerce-checkout-review-order-table tfoot tr.shipping th {
  padding-bottom: 0.375rem !important;
  border-bottom: 0 !important;
}

.woocommerce-checkout-review-order-table tfoot tr.shipping td {
  padding-top: 0 !important;
}

.woocommerce-checkout ul#shipping_method {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-checkout ul#shipping_method li {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  column-gap: 0.5rem;
  align-items: start;
  margin: 0;
  padding: 0.625rem 0.75rem;
  border: 0.8px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 160ms ease, background-color 160ms ease;
}

.woocommerce-checkout ul#shipping_method li:has(input.shipping_method:checked) {
  border-color: var(--color-red);
  background: rgba(194, 60, 50, 0.12);
}

.woocommerce-checkout ul#shipping_method input.shipping_method {
  width: 1rem;
  height: 1rem;
  margin: 0.15rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  appearance: auto;
  accent-color: var(--color-red);
}

.woocommerce-checkout ul#shipping_method label {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
}

.woocommerce-checkout ul#shipping_method label .woocommerce-Price-amount {
  color: var(--color-white);
  font-weight: 800;
  white-space: nowrap;
}

/* WooCommerce emits <br> before the estimate; <small> is block here already. */
.woocommerce-checkout ul#shipping_method label br {
  display: none;
}

.woocommerce-checkout ul#shipping_method label small {
  display: block;
  margin-top: 0.2rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.6875rem;
  line-height: 1.4;
}

.woocommerce-checkout-review-order-table .product-name {
  color: var(--color-white);
  font-size: 0.84375rem;
  font-weight: 600;
}

.woocommerce-checkout-review-order-table .product-name .product-quantity {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.woocommerce-checkout-review-order-table .product-name p.stock {
  margin: 0.25rem 0 0;
  color: #4cae7d;
  font-size: 0.75rem;
  font-weight: 600;
}

.woocommerce-checkout-review-order-table tfoot th {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.875rem;
  font-weight: 500;
}

.woocommerce-checkout-review-order-table tfoot td {
  font-weight: 700;
}

.woocommerce-checkout-review-order-table tfoot td .woocommerce-Price-amount {
  color: var(--color-white);
}

.woocommerce-checkout-review-order-table .order-total th {
  color: var(--color-white);
  font-size: 0.9375rem;
  font-weight: 700;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
  padding-block: 1.125rem !important;
  border-bottom: 0 !important;
  background: transparent;
}

.woocommerce-checkout-review-order-table .order-total td {
  font-size: 1.375rem;
  font-weight: 900;
}

/* Shipping options inside the dark review table */
.woocommerce-checkout-review-order-table ul#shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.625rem;
  text-align: left;
}

.woocommerce-checkout-review-order-table ul#shipping_method li {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.woocommerce-checkout-review-order-table ul#shipping_method li:has(> input[type="radio"].shipping_method) {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  column-gap: 0.5rem;
  align-items: start;
}

.woocommerce-checkout-review-order-table ul#shipping_method li:has(> input[type="radio"].shipping_method)>*:not(input):not(label) {
  grid-column: 2;
}

.woocommerce-checkout-review-order-table ul#shipping_method input.shipping_method {
  width: 1rem;
  height: 1rem;
  margin: 0.125rem 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  appearance: auto;
  accent-color: var(--color-red);
}

.woocommerce-checkout-review-order-table ul#shipping_method label {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

.woocommerce-checkout-review-order-table ul#shipping_method label .woocommerce-Price-amount {
  color: var(--color-white);
  font-weight: 800;
}

.woocommerce-checkout .woocommerce-shipping-destination {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.8125rem;
}

.woocommerce-checkout .woocommerce-shipping-destination strong {
  color: var(--color-white);
}

/* PayPal Pay Later message: a tfoot row on checkout — style inner div as the cart chip */
.woocommerce-checkout-review-order-table tr.wc-ppcp-paylater-msg__container th,
.woocommerce-checkout-review-order-table tr.wc-ppcp-paylater-msg__container td {
  padding: 0.25rem 1.75rem 1rem !important;
  background: transparent;
}

.woocommerce-checkout #wc-ppcp-paylater-msg-checkout {
  margin: 0;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
}

.woocommerce-checkout #payment {
  margin: 0;
  border-radius: 0;
  background: transparent;
}

.woocommerce-checkout #payment ul.payment_methods {
  margin: 0;
  padding: 1.375rem 1.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
}

.woocommerce-checkout #payment ul.payment_methods li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0.625rem 0 0.625rem 1.75rem;
  border-bottom: 0;
}

.woocommerce-checkout #payment ul.payment_methods li>input[type="radio"] {
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0.875rem;
  left: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  appearance: auto;
}

.woocommerce-checkout #payment ul.payment_methods li>label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  min-width: 0;
  margin: 0;
  color: var(--color-white);
  font-size: 0.84375rem;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li>label img {
  display: inline-block;
  flex: none;
  float: none !important;
  width: auto;
  max-width: 5rem;
  max-height: 1.25rem;
  margin: 0 !important;
  border-radius: 0.125rem;
  object-fit: contain;
  vertical-align: middle;
}

.woocommerce-checkout #payment ul.payment_methods li>label img:first-of-type {
  margin-left: auto !important;
}

.woocommerce-checkout #payment ul.payment_methods li>div.payment_box {
  width: calc(100% + 1.75rem);
  margin: 0.75rem 0 0 -1.75rem;
}

.woocommerce-checkout #payment div.payment_box {
  margin: 0.75rem 0 0;
  padding: 1rem 1.125rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78125rem;
  line-height: 1.6;
}

.woocommerce-checkout #payment div.payment_box a {
  color: var(--color-white);
  text-decoration: underline;
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* ---------------------------------------------------------------------------
   NMI hosted card fields (CollectJS).

   The inputs are cross-origin iframes on secure.nmi.com, so nothing inside them
   can be styled from here — only the containers. The containers therefore
   reproduce the checkout input spec exactly (see .form-row input.input-text)
   so the card fields read as the same control as every other field on the page,
   instead of the bare white boxes the plugin ships.
   --------------------------------------------------------------------------- */
.woocommerce-checkout #wc-nmi-cc-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.woocommerce-checkout #wc-nmi-cc-form .form-row {
  display: flex;
  flex-direction: column;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

.woocommerce-checkout #wc-nmi-cc-form .form-row-wide {
  grid-column: 1 / -1;
}

.woocommerce-checkout #wc-nmi-cc-form .form-row-first {
  grid-column: 1;
}

.woocommerce-checkout #wc-nmi-cc-form .form-row-last {
  grid-column: 2;
}

/* Float clears are meaningless once the fieldset is a grid, and they'd
   otherwise consume grid cells. */
.woocommerce-checkout #wc-nmi-cc-form .clear {
  display: none;
}

/* Intro copy sits above the fieldset; the default paragraph margin doubles up
   with the grid gap and opens a hole under it. */
.woocommerce-checkout .nmi_new_card > p {
  margin: 0 0 0.875rem;
}

.woocommerce-checkout #wc-nmi-cc-form label {
  margin: 0 0 0.3125rem;
  color: var(--color-white);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
}

.woocommerce-checkout #wc-nmi-cc-form label .required {
  color: var(--color-red);
  text-decoration: none;
}

/* "Card Code (CVC)" wraps to two lines where "Expiry Date" doesn't, which was
   leaving the two fields on different baselines. Pushing the field to the
   bottom of its column keeps them aligned however the labels wrap. */
/* NMI renders its own bordered input INSIDE the iframe, which used to show as a
   black line boxed inside this one. assets/js/nmi-fields.js strips that inner
   border through CollectJS's customCss, so this container can carry the full
   checkout input spec — matching padding and height — as the only visible box. */
.woocommerce-checkout .wc-nmi-elements-field {
  margin-top: auto;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.625rem;
  padding: 0.4375rem 0.875rem;
  border: 1px solid #c8cdd3;
  border-radius: var(--radius-md);
  background: var(--color-white);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

/* Focus lands on the iframe element itself, so :focus-within on the container
   still fires even though the caret is inside another origin. */
.woocommerce-checkout .wc-nmi-elements-field:focus-within {
  border-color: var(--color-red);
  box-shadow: 0 0 0 0.125rem rgba(194, 60, 50, 0.1);
  outline: none;
}

.woocommerce-checkout .wc-nmi-elements-field .CollectJSInlineIframe {
  display: block;
  width: 100%;
}

/* The focused iframe draws the browser's own blue ring inside the field box.
   The container's :focus-within state is the focus affordance instead. */
.woocommerce-checkout .wc-nmi-elements-field .CollectJSInlineIframe:focus,
.woocommerce-checkout .wc-nmi-elements-field .CollectJSInlineIframe:focus-visible {
  outline: none;
  border: 0;
}

/* Card-brand mark sits inside the number field rather than beside it. */
.woocommerce-checkout .nmi-card-group {
  position: relative;
}

.woocommerce-checkout .nmi-card-group .nmi-card-brand {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.woocommerce-checkout .nmi-card-group .nmi-card-brand:not([class*="nmi-card-brand-"]) {
  display: none;
}

/* 3-D Secure mount point is empty until a challenge is issued; without this it
   reserves an empty row and opens a gap under the intro copy. */
.woocommerce-checkout #nmi-three-ds-mount-point:empty {
  display: none;
}

.woocommerce-checkout #wc-nmi-cc-form .form-row:has(> #nmi-three-ds-mount-point:empty) {
  display: none;
}

/* Empty error slot is still a grid item, so it costs a full row plus a gap. */
.woocommerce-checkout .nmi-source-errors:empty {
  display: none;
}

.woocommerce-checkout .nmi-source-errors:not(:empty) {
  grid-column: 1 / -1;
  margin-bottom: 0.25rem;
  color: #ffb4ac;
  font-size: 0.8125rem;
  line-height: 1.5;
}

@media (max-width: 30rem) {
  .woocommerce-checkout #wc-nmi-cc-form {
    grid-template-columns: 1fr;
  }

  .woocommerce-checkout #wc-nmi-cc-form .form-row-first,
  .woocommerce-checkout #wc-nmi-cc-form .form-row-last {
    grid-column: 1;
  }
}

.woocommerce-checkout #payment .place-order {
  margin: 0;
  padding: 1.375rem 1.75rem 1.75rem;
}

.woocommerce-checkout #payment .woocommerce-privacy-policy-text,
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.71875rem;
  line-height: 1.6;
}

.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78125rem;
}

.woocommerce-checkout #payment .woocommerce-privacy-policy-text a,
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper a {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  text-decoration: underline;
}

.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper .required {
  color: #ff7a6b;
}

/* Terms checkbox row: form-row label rules paint labels navy — invisible here */
.woocommerce-checkout #payment .form-row label {
  color: rgba(255, 255, 255, 0.85);
}

/* Block + floated box, not flex: WooCommerce closes this label with a separate
   <abbr class="required">*</abbr>, which as a third flex item was pushed to the
   far right of the row, stranded a line below the sentence it belongs to.
   Floating the checkbox keeps the hanging indent and lets the asterisk sit
   inline after "terms and conditions" where it reads as part of the sentence. */
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox {
  display: block;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.78125rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}

.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox input[type="checkbox"] {
  float: left;
  flex: none;
  margin: 0.125rem 0.5rem 0 0;
}

/* Inline so the asterisk follows the last word. As a block it formed its own
   line box and the abbr dropped to a line of its own instead. */
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox .woocommerce-terms-and-conditions-checkbox-text {
  display: inline;
}

/* Cloudflare Turnstile is a fixed-width iframe we cannot restyle — centre it in
   the order card and give it room. overflow-x guards the 300px widget against
   narrower cards. */
.woocommerce-checkout #payment .cf-turnstile {
  display: flex;
  justify-content: center;
  margin: 1rem 0 0;
  overflow-x: auto;
}

.woocommerce-checkout #payment .cf-turnstile:empty {
  display: none;
}

.woocommerce-checkout #payment #place_order {
  float: none;
  width: 100%;
  min-height: 3.25rem;
  margin-top: 1rem;
  padding: 0.9375rem 1.25rem;
  border-radius: var(--radius-md);
  background: var(--color-red);
  color: var(--color-white);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.woocommerce-checkout #payment #place_order:hover {
  background: var(--color-red-dark);
  color: var(--color-white);
}

@media (max-width: 48rem) {
  .woocommerce-checkout .page-content {
    padding-block: 3rem;
  }

  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2 {
    padding: 1.25rem;
  }

  .woocommerce-checkout #customer_details {
    grid-template-columns: 1fr;
  }

  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last {
    float: none;
    width: 100%;
  }

  .woocommerce-checkout #order_review_heading {
    padding: 1.25rem;
  }

  .woocommerce-checkout-review-order-table th,
  .woocommerce-checkout-review-order-table td,
  .woocommerce-checkout-review-order-table thead th {
    padding: 0.75rem 1rem !important;
  }

  .woocommerce-checkout form.checkout_coupon .form-row {
    float: none;
    width: 100%;
    margin-bottom: 0.75rem;
  }
}

/* WooCommerce My Account */
.woocommerce-account .page-content {
  background: var(--color-soft);
}

.woocommerce-account .page-content article>h1 {
  margin-bottom: 2rem;
}

.woocommerce-account .woocommerce-notices-wrapper:not(:empty) {
  margin-bottom: 1.5rem;
}

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem 1rem 3.25rem;
  border: 1px solid var(--color-line);
  border-top: 0.1875rem solid var(--color-red);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-body);
  box-shadow: var(--shadow-soft);
}

.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before {
  top: 1rem;
  left: 1.25rem;
  color: var(--color-red);
}

/* Logged-out Login / Register */
.woocommerce-account #customer_login {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1.5rem;
}

.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after {
  display: none;
}

.woocommerce-account #customer_login .col-1,
.woocommerce-account #customer_login .col-2 {
  float: none;
  width: 100%;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--color-line);
  border-top: 0.25rem solid var(--color-red);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.woocommerce-account #customer_login h2 {
  margin: 0 0 1.5rem;
  color: var(--color-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.woocommerce-account .woocommerce-form-row,
.woocommerce-account .form-row {
  margin: 0 0 1rem;
  padding: 0;
}

.woocommerce-account .form-row label:not(.woocommerce-form__label-for-checkbox) {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--color-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
}

.woocommerce-account .required {
  color: var(--color-red);
  text-decoration: none;
}

.woocommerce-account input.woocommerce-Input,
.woocommerce-account input.input-text,
.woocommerce-account textarea,
.woocommerce-account select {
  width: 100%;
  min-height: 3rem;
  padding: 0.6875rem 0.875rem;
  border: 1px solid #c8cdd3;
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-body);
  font: inherit;
  font-size: 0.9375rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.woocommerce-account textarea {
  min-height: 7rem;
  resize: vertical;
}

.woocommerce-account input.woocommerce-Input:focus,
.woocommerce-account input.input-text:focus,
.woocommerce-account textarea:focus,
.woocommerce-account select:focus {
  border-color: var(--color-red);
  box-shadow: 0 0 0 0.1875rem rgba(194, 60, 50, 0.12);
  outline: none;
}

.woocommerce-account .password-input {
  display: block;
  position: relative;
}

.woocommerce-account .show-password-input {
  top: 50%;
  right: 0.875rem;
  transform: translateY(-50%);
}

.woocommerce-account .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--color-body);
  font-size: 0.875rem;
  cursor: pointer;
}

/* WooCommerce's clearfix ::before/::after become zero-width flex items and
   skew space-between rows — drop them from the flex flow. */
.woocommerce-account .woocommerce-form-login>.form-row:not(.form-row-wide)::before,
.woocommerce-account .woocommerce-form-login>.form-row:not(.form-row-wide)::after {
  display: none;
}

.woocommerce-account .woocommerce-form-login>.form-row:not(.form-row-wide) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.woocommerce-account .woocommerce-form-login__submit {
  float: none;
  margin: 0 0 0 auto;
  order: 2;
}

.woocommerce-account input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--color-red);
}

.woocommerce-account .woocommerce-button.button,
.woocommerce-account button.button,
.woocommerce-account a.button {
  min-height: 2.75rem;
  padding: 0.6875rem 1.25rem;
  border-radius: var(--radius-button);
  background: var(--color-red);
  color: var(--color-white);
  font-weight: 800;
  line-height: 1.25rem;
}

.woocommerce-account .woocommerce-button.button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account a.button:hover {
  background: var(--color-red-dark);
  color: var(--color-white);
}

.woocommerce-account .lost_password {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.woocommerce-account .lost_password a,
.woocommerce-account .woocommerce-privacy-policy-text a,
.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
  color: var(--color-red);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.woocommerce-account .woocommerce-privacy-policy-text {
  margin: 1rem 0;
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.65;
}

.woocommerce-account .googlesitekit-sign-in-with-google__frontend-output-button:not(:empty) {
  margin-bottom: 1.25rem;
}

/* Signed-in account navigation and content */
.woocommerce-account .woocommerce-MyAccount-navigation {
  float: left;
  width: 15rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
  list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  border-bottom: 1px solid var(--color-line);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
  border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  color: var(--color-body);
  font-size: 0.875rem;
  font-weight: 700;
  transition: background-color 160ms ease, color 160ms ease;
}

.woocommerce-account .page-content article .woocommerce-MyAccount-navigation a {
  text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
  background: var(--color-soft);
  color: var(--color-red);
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
  background: var(--color-heading);
  color: var(--color-white);
}

.woocommerce-account .woocommerce-MyAccount-content {
  float: right;
  width: calc(100% - 17rem);
  min-height: 20rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--color-line);
  border-top: 0.25rem solid var(--color-red);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.woocommerce-account .woocommerce-MyAccount-content> :first-child {
  margin-top: 0;
}

.woocommerce-account .woocommerce-MyAccount-content> :last-child {
  margin-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-content>.woocommerce-info:has(> a.button) {
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0;
  padding: 2rem;
  border: 1px dashed #cfd4da;
  border-radius: var(--radius-lg);
  background: var(--color-soft);
  box-shadow: none;
  color: var(--color-heading);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}

.woocommerce-account .woocommerce-MyAccount-content>.woocommerce-info:has(> a.button)::before {
  content: "";
  width: 3.5rem;
  height: 3.5rem;
  position: static;
  border-radius: 50%;
  background-color: rgba(194, 60, 50, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c23c32' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l1 12H5L6 8Z'/%3E%3Cpath d='M9 9V6a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
}

.woocommerce-account .woocommerce-MyAccount-content>.woocommerce-info:has(> a.button) .button {
  float: none;
  margin: 0.25rem 0 0;
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  color: var(--color-heading);
}

.woocommerce-account .woocommerce-MyAccount-content p {
  color: var(--color-body);
  line-height: 1.7;
}

.woocommerce-account .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after {
  display: none;
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
  float: none;
  width: 100%;
  padding: 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-soft);
}

.woocommerce-account .woocommerce-Address-title h2 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
}

.woocommerce-account .woocommerce-Address-title .edit {
  float: none;
  display: inline-flex;
  margin-bottom: 1rem;
}

.woocommerce-account address {
  color: var(--color-muted);
  font-style: normal;
  line-height: 1.7;
}

.woocommerce-account table.shop_table,
.woocommerce-account table.my_account_orders {
  width: 100%;
  margin: 1rem 0 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.woocommerce-account table.shop_table th,
.woocommerce-account table.my_account_orders th {
  padding: 0.875rem 1rem;
  border: 0;
  border-bottom: 0.1875rem solid var(--color-red);
  background: var(--color-heading);
  color: var(--color-white);
  font-size: 0.8125rem;
  font-weight: 800;
  text-align: left;
}

.woocommerce-account table.shop_table td,
.woocommerce-account table.my_account_orders td {
  padding: 0.875rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-body);
  font-size: 0.875rem;
  vertical-align: middle;
}

.woocommerce-account table.shop_table tbody tr:last-child td,
.woocommerce-account table.my_account_orders tbody tr:last-child td {
  border-bottom: 0;
}

.woocommerce-account table.shop_table tbody tr:nth-child(even) td,
.woocommerce-account table.my_account_orders tbody tr:nth-child(even) td {
  background: var(--color-soft);
}

.woocommerce-account .woocommerce-customer-details {
  margin-top: 2rem;
}

.woocommerce-account .woocommerce-customer-details address {
  padding: 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-soft);
}

.woocommerce-account fieldset {
  margin: 1.5rem 0;
  padding: 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-soft);
}

.woocommerce-account fieldset legend {
  padding: 0 0.5rem;
  color: var(--color-heading);
  font-weight: 800;
}

@media (max-width: 48rem) {
  .woocommerce-account .page-content {
    padding-block: 3rem;
  }

  .woocommerce-account #customer_login {
    grid-template-columns: 1fr;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: 100%;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation {
    margin-bottom: 1rem;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .woocommerce-account .woocommerce-MyAccount-navigation li {
    border: 0;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation a {
    min-height: 2.75rem;
  }

  .woocommerce-account .woocommerce-MyAccount-content {
    min-height: 0;
    padding: 1.25rem;
  }

  .woocommerce-account .woocommerce-Addresses {
    grid-template-columns: 1fr;
  }

  .woocommerce-account table.shop_table,
  .woocommerce-account table.my_account_orders {
    border: 0;
  }

  .woocommerce-account table.shop_table tr,
  .woocommerce-account table.my_account_orders tr {
    display: block;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-white);
  }

  .woocommerce-account table.shop_table td,
  .woocommerce-account table.my_account_orders td {
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--color-line);
    background: transparent !important;
  }

  .woocommerce-account table.shop_table td:last-child,
  .woocommerce-account table.my_account_orders td:last-child {
    border-bottom: 0;
  }
}

.shop-cats li a,
.shop-cat-link {
  display: block;
  padding: 0.375rem 0.75rem;
  border-left: 2px solid transparent;
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

.shop-cats li a:hover,
.shop-cats li.current-cat>a {
  border-left-color: var(--color-red);
  color: var(--color-heading);
  background: var(--color-soft);
}

.shop-cats,
.shop-cats .children {
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-cats {
  display: grid;
  gap: 0.125rem;
}

.shop-cats .children {
  margin-left: 1.25rem;
}

.shop-cats:not(.is-expanded)>li:nth-child(n + 9) {
  display: none;
}

.shop-cats li a em {
  margin-left: 0.25rem;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-style: normal;
}

.shop-cats-all {
  margin-bottom: 0.375rem;
  font-weight: 700;
  color: var(--color-heading);
}

.shop-cat-option {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.25rem 0;
  color: var(--color-body);
  font-size: 0.875rem;
  line-height: 1.4;
  cursor: pointer;
}

.shop-cat-option:hover {
  color: var(--color-red);
}

.shop-cat-option input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0;
  transform: translateY(0.125rem);
  accent-color: var(--color-red);
  cursor: pointer;
}

.shop-cat-option em {
  color: var(--color-muted);
  font-size: 0.75rem;
  font-style: normal;
}

/* Homepage micro-interactions */
:where(.site-header, .homepage-sections) :where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
}

.primary-nav>a,
.login-link,
.cart-button,
.homepage-sections .btn,
.homepage-sections .add-to-cart,
.homepage-sections .section-link,
.homepage-sections .category-strip a,
.homepage-sections .product-slider__arrow,
.homepage-sections .faq-list summary {
  transition: transform var(--motion-normal) var(--ease-standard);
}

.homepage-sections :is(.btn, .section-link, .category-card, .guide-cards a) svg,
.homepage-sections .category-strip a img,
.homepage-sections .product-image img,
.homepage-sections .promo-image-wrapper img,
.homepage-sections .content-card .card-icon {
  transition: transform var(--motion-normal) var(--ease-standard);
}

.homepage-sections :is(.category-card, .content-card, .guide-cards article, .promo, .mini-cta-card, .cta-card) {
  transition: transform var(--motion-normal) var(--ease-standard);
}

.homepage-sections .section-link {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
}

.homepage-sections .section-link:hover,
.homepage-sections .section-link:focus-visible {
  text-decoration-color: currentColor;
}

.homepage-sections :is(.btn, .section-link, .guide-cards a):hover svg,
.homepage-sections :is(.btn, .section-link, .guide-cards a):focus-visible svg {
  transform: translateX(0.2rem);
}

.homepage-sections :is(.btn, .add-to-cart):active,
.cart-button:active {
  transform: scale(0.97);
  transition-duration: var(--motion-fast);
}

/* Arrows are vertically centred with translateY(-50%); keep it in the :active
   transform or the button jumps down 20px on mousedown and the click is lost. */
.homepage-sections .product-slider__arrow:active {
  transform: translateY(-50%) scale(0.97);
  transition-duration: var(--motion-fast);
}

.homepage-sections .faq-list details[open]>p {
  animation: sm-faq-enter var(--motion-normal) var(--ease-enter) both;
}

@keyframes sm-faq-enter {
  from {
    opacity: 0;
    transform: translateY(-0.35rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sm-grid-item-enter {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sm-grid-item-enter-right {
  from {
    opacity: 0;
    transform: translateX(2.25rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sm-motion-ready .homepage-sections>.sm-reveal:not(.sm-reveal-split):not(.sm-reveal-items) {
    opacity: 0;
    transform: translateY(1.5rem);
    transition:
      opacity var(--motion-slow) var(--ease-enter),
      transform var(--motion-slow) var(--ease-enter);
    will-change: opacity, transform;
  }

  .sm-motion-ready .homepage-sections>.sm-reveal:not(.sm-reveal-split):not(.sm-reveal-items).is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  .sm-motion-ready .homepage-sections>.sm-reveal-split .sm-reveal-panel {
    opacity: 0;
    transform: translateY(1.5rem);
    transition:
      opacity var(--motion-slow) var(--ease-enter),
      transform var(--motion-slow) var(--ease-enter);
    will-change: opacity, transform;
  }

  .sm-motion-ready .homepage-sections>.sm-reveal-split.is-visible .sm-reveal-panel {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  .sm-motion-ready .homepage-sections .sm-reveal-group:not(.is-visible)>.sm-reveal-item {
    opacity: 0;
    transform: translateY(1.5rem);
  }

  .sm-motion-ready .homepage-sections .sm-reveal-group.is-visible>.sm-reveal-item {
    animation: sm-grid-item-enter var(--motion-slow) var(--ease-enter) backwards;
    animation-delay: calc(var(--sm-item-index, 0) * 55ms);
  }

  .sm-motion-ready .homepage-sections .sm-reveal-group-right:not(.is-visible)>.sm-reveal-item {
    transform: translateX(2.25rem);
  }

  .sm-motion-ready .homepage-sections .sm-reveal-group-right.is-visible>.sm-reveal-item {
    animation-name: sm-grid-item-enter-right;
    animation-duration: 560ms;
    animation-delay: calc(var(--sm-item-index, 0) * 95ms);
  }
}

@media (min-width: 64.0625rem) and (prefers-reduced-motion: no-preference) {
  .sm-motion-ready .homepage-sections>.sm-reveal-split .sm-reveal-left {
    transform: translate3d(-2.25rem, 1rem, 0);
  }

  .sm-motion-ready .homepage-sections>.sm-reveal-split .sm-reveal-right {
    transform: translate3d(2.25rem, 1rem, 0);
  }

  .sm-motion-ready .homepage-sections>.sm-reveal-split.is-visible .sm-reveal-panel {
    transform: none;
  }
}

@media (pointer: fine) and (hover: hover) and (prefers-reduced-motion: no-preference) {

  .primary-nav>a:hover,
  .login-link:hover,
  .cart-button:hover {
    transform: translateY(-1px);
  }

  .homepage-sections .category-strip a:hover img,
  .homepage-sections .category-strip a:focus-visible img {
    transform: translateY(-2px) scale(1.06);
  }

  .homepage-sections .product-card:hover .product-image img,
  .homepage-sections .product-card:focus-within .product-image img {
    transform: scale(1.025);
  }

  .homepage-sections .category-card:hover,
  .homepage-sections .category-card:focus-visible,
  .homepage-sections .content-card:has(.card-link:hover),
  .homepage-sections .content-card:has(.card-link:focus-visible),
  .homepage-sections .guide-cards article:has(a:hover),
  .homepage-sections .guide-cards article:focus-within,
  .homepage-sections .promo:has(.btn:hover),
  .homepage-sections .promo:focus-within,
  .homepage-sections .mini-cta-card:has(.btn:hover),
  .homepage-sections .mini-cta-card:focus-within,
  .homepage-sections .cta-card:has(.btn:hover),
  .homepage-sections .cta-card:focus-within {
    transform: translateY(-0.1875rem);
  }

  .homepage-sections .promo:has(.btn:hover) .promo-image-wrapper img,
  .homepage-sections .promo:focus-within .promo-image-wrapper img {
    transform: scale(1.025);
  }

  .homepage-sections .content-card:has(.card-link:hover) .card-icon,
  .homepage-sections .content-card:has(.card-link:focus-visible) .card-icon {
    transform: scale(1.06) rotate(-2deg);
  }
}

@media (pointer: coarse) and (hover: none) and (prefers-reduced-motion: no-preference) {
  .homepage-sections :is(.category-card, .content-card, .product-card):active {
    transform: scale(0.985);
    transition-duration: var(--motion-fast);
  }
}

@media (max-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .sm-motion-ready .homepage-sections .sm-reveal-group.is-visible>.sm-reveal-item {
    animation-duration: 320ms;
    animation-delay: calc(var(--sm-item-index, 0) * 70ms);
  }

  .sm-motion-ready .homepage-sections .sm-reveal-group-right.is-visible>.sm-reveal-item {
    animation-duration: 400ms;
    animation-delay: calc(var(--sm-item-index, 0) * 85ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.shop-cats-toggle {
  margin-top: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-red);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 800;
  cursor: pointer;
}

.shop-cats-clear {
  display: block;
  margin-top: 0.5rem;
  color: var(--color-muted);
  font-size: 0.8125rem;
  text-decoration: underline;
}

/* Compact shop header */
.woocommerce.woocommerce-page .woocommerce-breadcrumb {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
}

.woocommerce-products-header {
  margin-bottom: 0.75rem;
}

.woocommerce-products-header__title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.1;
}

/* Category copy now sits under the product list (sm_move_category_description_below_loop),
   so it needs a rule and breathing room to read as a separate block. */
.shop-main .term-description {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 0.8px solid var(--color-line);
}

.shop-main .term-description > *:first-child {
  margin-top: 0;
}

.shop-main .term-description > *:last-child {
  margin-bottom: 0;
}

.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.shop-toolbar .woocommerce-result-count,
.shop-toolbar .woocommerce-ordering {
  float: none;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9375rem;
}

.shop-toolbar .woocommerce-ordering select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font: inherit;
}

/* Product cards */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.woocommerce ul.products li.product:hover {
  border-color: var(--color-red);
  box-shadow: 0 0.75rem 2rem rgba(20, 29, 44, 0.08);
  transform: translateY(-0.2rem);
}

.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin-bottom: 1rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-heading);
}

.woocommerce ul.products li.product .price {
  color: var(--color-red);
  font-weight: 800;
}

.woocommerce ul.products li.product .button {
  margin-top: auto;
  align-self: flex-start;
}

@media (max-width: 64rem) {
  .shop-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .shop-sidebar {
    position: static;
  }
}

/* ---------------------------------------------------------------------------
   Mobile navigation drawer
--------------------------------------------------------------------------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 0.3125rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: 0.625rem;
  background: var(--color-white);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--color-heading);
  transition: transform 200ms ease, opacity 200ms ease;
}

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(0.4375rem) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-0.4375rem) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s 240ms;
}

.mobile-nav.is-open {
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.mobile-nav__overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 18, 25, 0.5);
  opacity: 0;
  transition: opacity 240ms ease;
}

.mobile-nav.is-open .mobile-nav__overlay {
  opacity: 1;
}

.mobile-nav__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(20rem, 85vw);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem 1.5rem;
  background: var(--color-white);
  box-shadow: -12px 0 32px rgba(13, 18, 25, 0.18);
  transform: translateX(100%);
  transition: transform 240ms ease;
  overflow-y: auto;
}

.mobile-nav.is-open .mobile-nav__panel {
  transform: translateX(0);
}

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-line);
}

.mobile-nav__head strong {
  font-family: "Roboto Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.mobile-nav__head button {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-soft);
  color: var(--color-heading);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

.mobile-nav__links {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0 1rem;
}

.mobile-nav__links a {
  padding: 0.875rem 0;
  border-bottom: 1px solid rgba(13, 18, 25, 0.06);
  color: var(--color-heading);
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
}

.mobile-nav__links a:hover {
  color: var(--color-red);
}

/* Shop disclosure inside the drawer — the mega dropdown is desktop-only, so the
   caret on this link opens this panel instead of navigating. */
.mobile-nav__links a.has-mega {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.mobile-nav__links a.has-mega .nav-caret {
  flex: 0 0 auto;
  width: 0.75rem;
  transition: transform 180ms ease;
}

.mobile-nav__links a.has-mega[aria-expanded="true"] .nav-caret {
  transform: rotate(180deg);
}

.mobile-nav__sub {
  padding: 0.75rem 0 1rem 0.875rem;
  border-bottom: 1px solid rgba(13, 18, 25, 0.06);
}

.mobile-nav__sub[hidden] {
  display: none;
}

.mobile-nav__sub-group+.mobile-nav__sub-group {
  margin-top: 1rem;
}

.mobile-nav__sub-heading {
  margin: 0 0 0.25rem;
  font-family: "Roboto Mono", monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.mobile-nav__sub-heading a {
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

.mobile-nav__links .mobile-nav__sub a {
  display: block;
  padding: 0.5rem 0;
  border: 0;
  color: var(--color-ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

.mobile-nav__links .mobile-nav__sub a:hover {
  color: var(--color-red);
}

.mobile-nav__links .mobile-nav__sub a.mobile-nav__sub-all {
  margin-top: 0.75rem;
  color: var(--color-red);
  font-weight: 800;
}

body.sm-nav-lock {
  overflow: hidden;
}

@media (max-width: 75rem) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-header .primary-nav {
    display: none;
  }
}

/* Phone header: keep brand + actions on one row. The base rule pins the brand to
   a 14.5rem flex basis, which no longer fits beside the actions once the nav
   collapses — the actions wrapped to a second row and, with margin-left:auto,
   floated right against an empty half-row. Letting the brand flex instead drops
   the header from three rows to two. */
@media (max-width: 720px) {
  .site-header {
    gap: 0.75rem;
    padding: 0.75rem 1rem;
  }

  /* Basis has to be small, not auto: flex wrapping is decided on base sizes
     before any shrinking, so an auto (= logo intrinsic width) basis still
     bumped the actions onto their own row. */
  .brand {
    flex: 1 1 6rem;
    width: auto;
    min-width: 0;
  }

  .brand img,
  .brand .custom-logo {
    width: 100%;
    max-width: 13rem;
    height: auto;
  }

  .header-actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    margin-left: auto;
  }

  /* The drawer carries the same CTA at the bottom of its panel, so the header
     copy is redundant here — dropping it buys the logo back its width. */
  .header-actions .btn {
    display: none;
  }

  .site-search {
    order: 4;
  }
}

/* Skip link: visually hidden until keyboard-focused. */
.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  border-radius: 0.625rem;
  background: var(--color-heading);
  color: var(--color-white);
  font-size: 0.875rem;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Tidio chat widget positioning (previously injected through HFCM). */
#tidio-chat-iframe {
  bottom: 20px !important;
}

@media (max-width: 61.25rem) {
  #tidio-chat-iframe {
    bottom: 75px !important;
  }
}