/* ============================================================
   SECTION A — MOCKUP SCAFFOLDING. DO NOT COPY TO THE CHILD THEME.
   ============================================================
   These three declarations exist ONLY because the mockup has no
   WordPress or Divi behind it. Divi provides all three. Each
   appears exactly once in this file, here, and nowhere else.
   The universal box-sizing override is the most dangerous of the
   three to copy: overriding it globally breaks a page builder's
   layout maths.
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }   /* MOCKUP ONLY */
body { margin: 0; }                                  /* MOCKUP ONLY */
img, svg { display: block; max-width: 100%; }        /* MOCKUP ONLY */

/* ============================================================
   SECTION B — REAL CHILD-THEME CSS. COPY THIS.
   ============================================================
   The link rule is SCOPED. An unscoped a { color } repainted
   ghost-button labels; the homepage had the hover scoped and the
   base rule unscoped, which is how it survived undetected.
   ------------------------------------------------------------ */
a:not(.btn):not(.icon-btn):not(.drawer-toggle) { color: #FFB166; }

@media (max-height: 600px) { .furnace--page { min-height: 0; } }

/* ============================================================
   Premier Refractory Supply — band system
   Paste into the child theme stylesheet. This is the file the
   Products, About and Contact mockups link, and it is the
   authoritative implementation of DESIGN-SYSTEM.md 13-16.
   ============================================================ */

body {
  background: #0B0B0D; color: #F4F3F1;
  font-family: 'IBM Plex Sans', Arial, sans-serif; font-size: 17px; line-height: 1.65; }

a:not(.btn):not(.icon-btn):not(.drawer-toggle):hover { color: #FFD1A1; }
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid #FFB166; outline-offset: 2px; border-radius: 2px; }
.btn-primary:focus-visible, .skip:focus-visible { outline-color: #131316; }

.skip { position: absolute; left: 16px; top: -100px; z-index: 999;
  background: #FFB166; color: #131316; font-family: 'Archivo', Arial, sans-serif;
  font-weight: 600; padding: 12px 24px; border-radius: 2px; text-decoration: none;
  transition: top 180ms cubic-bezier(0.16,1,0.3,1); }
.skip:focus { top: 16px; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------- type ---------------- */
.d-display { font-family: 'Archivo', Arial, sans-serif; margin: 0;
  font-size: clamp(2.75rem, 7.4vw, 110px); font-weight: 700; line-height: 0.96;
  letter-spacing: -0.03em; }
.d-h2 { font-family: 'Archivo', Arial, sans-serif; margin: 0;
  font-size: clamp(1.75rem, 3.4vw, 44px); font-weight: 700; line-height: 1.1;
  letter-spacing: -0.015em; }
.d-h3 { font-family: 'Archivo', Arial, sans-serif; margin: 0;
  font-size: clamp(1.25rem, 1.8vw, 26px); font-weight: 600; line-height: 1.25; }
.d-lede { margin: 0; font-size: clamp(1.0625rem, 1.5vw, 21px); line-height: 1.55;
  color: #ABB0B8; max-width: 52ch; }
.d-body { margin: 0; font-size: clamp(1rem, 1.1vw, 17px); line-height: 1.65;
  color: #ABB0B8; max-width: 68ch; }
.d-eyebrow { margin: 0; font-family: 'Archivo', Arial, sans-serif; font-size: 14px;
  font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #C9D1DB; }
.d-caption { margin: 0; font-size: 13px; line-height: 1.5; color: #ABB0B8; }

.wrap { max-width: 1440px; margin: 0 auto; padding-left: 48px; padding-right: 48px; }
.band { padding-top: clamp(64px, 8vw, 128px); padding-bottom: clamp(64px, 8vw, 128px); }
.cv { content-visibility: auto;
  /* auto + a length: the browser remembers this element's REAL rendered size
     after it has been laid out once and uses that instead of the guess on
     later passes. So --cvh only has to be right for the very first render,
     before the element has ever been on screen, which is exactly the case
     where an estimate is acceptable. It also stays correct after the Divi
     build changes content heights, with nobody updating numbers.
     FIRST-RENDER FALLBACK ONLY. Do not re-measure these during the build. */
  contain-intrinsic-size: auto var(--cvh, 900px); }

.rule-steel { height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, #C9D1DB 0%, rgba(201,209,219,0.32) 46%, rgba(201,209,219,0) 100%); }
.rule-heat { height: 2px; border: 0; margin: 0;
  background: linear-gradient(90deg, #EE6A1E 0%, #FFB166 30%, rgba(238,106,30,0) 100%);
  box-shadow: 0 0 22px rgba(238,106,30,0.6); animation: rule-pulse 6.5s ease-in-out infinite; }
@keyframes rule-pulse {
  0%, 100% { opacity: 0.72; box-shadow: 0 0 16px rgba(238,106,30,0.45); }
  50% { opacity: 1; box-shadow: 0 0 30px rgba(255,127,53,0.75); } }

/* Ember bloom. ellipse closest-side so the last stop lands on the box edge.
   Peak alpha 0.18 is the CEILING behind bare text (muted 6.73:1 on #3A2317). */
.bloom { position: absolute; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse closest-side at center,
    rgba(238,106,30,0.18) 0%, rgba(238,106,30,0.07) 52%, rgba(238,106,30,0) 100%); }

/* ---------------- buttons ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: 2px; text-decoration: none;
  font-family: 'Archivo', Arial, sans-serif; font-size: 16px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid transparent;
  cursor: pointer; }
.btn-primary { background: #EE6A1E; color: #131316; border-color: #EE6A1E;
  box-shadow: 0 10px 30px rgba(238,106,30,0.38);
  transition: box-shadow 180ms cubic-bezier(0.2,0,0.2,1),
              background-color 120ms cubic-bezier(0.2,0,0.2,1),
              transform 120ms cubic-bezier(0.2,0,0.2,1); }
.btn-primary:hover { background: #FF7F35; box-shadow: 0 16px 48px rgba(255,127,53,0.56);
  transform: translateY(-1px); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] {
  background: #26272B; color: #71767E; border-color: #26272B; box-shadow: none;
  cursor: not-allowed; transform: none; }
.btn-ghost { border-color: #787C84; color: #C9D1DB; background: transparent;
  transition: border-color 180ms, color 180ms; }
.btn-ghost:hover { border-color: #FFB166; color: #FFB166; }
.link-cap { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
  color: #FFB166; font-family: 'Archivo', Arial, sans-serif; font-size: 15px;
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 4px; }
.link-cap:hover { color: #FFD1A1; text-decoration-thickness: 2px; }

/* ---------------- header ---------------- */
/* NO backdrop-filter. It creates a containing block for position:fixed
   descendants, which sized the mobile drawer panel to the 72px header instead
   of the viewport: 508px of content in a 72px box. The bar is 94% opaque so
   the blur was decorative. Do not reintroduce it while the drawer lives
   inside the header. */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(11,11,13,0.97);
  border-bottom: 1px solid rgba(201,209,219,0.22); }
.hdr-bar { min-height: 120px; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; }
.logo-hdr { height: 96px; width: 88px; }
.mainnav { display: flex; align-items: center; flex: 1 1 auto; justify-content: center;
  min-width: 0; }
.mainnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  white-space: nowrap; color: #C9D1DB; font-family: 'Archivo', Arial, sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; transition: color 180ms; }
.mainnav a:hover { color: #F4F3F1; }
.mainnav a[aria-current="page"] { color: #F4F3F1; border-bottom: 2px solid #EE6A1E; }
.icon-btn { position: relative; display: inline-flex; align-items: center;
  justify-content: center; width: 44px; height: 44px; flex: 0 0 auto;
  border: 1px solid #787C84; border-radius: 2px; background: transparent;
  color: #C9D1DB; cursor: pointer; text-decoration: none;
  transition: border-color 180ms, color 180ms; }
.icon-btn:hover { border-color: #C9D1DB; color: #FFFFFF; }
.cart-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 999px; background: #EE6A1E; color: #131316;
  font-family: 'Archivo', Arial, sans-serif; font-size: 12px; font-weight: 700;
  line-height: 20px; text-align: center; }
.cart[data-count="0"] .cart-badge { display: none; }
.call-only, .burger-only { display: none; }
.hdr-drawer { display: none; }

/* ---------------- FURNACE band ----------------
   Layer stack, bottom to top:
     0 photograph -> 1 directional scrim -> 2 fire (screen blend)
     -> 3 full plate (desktop only) -> 4 content and .type-plate            */
.furnace { position: relative; isolation: isolate; overflow: hidden; }
.furnace--hero { min-height: calc(100svh - 120px); display: grid; align-items: center; }
.furnace__img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; }
.furnace__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(11,11,13,0.94) 0%, rgba(11,11,13,0.94) 26%,
      rgba(11,11,13,0.88) 42%, rgba(11,11,13,0.52) 62%,
      rgba(11,11,13,0.14) 78%, rgba(11,11,13,0) 92%),
    linear-gradient(to top, rgba(11,11,13,0.9) 0%, rgba(11,11,13,0) 44%); }
.furnace__plate { position: absolute; inset: 0 auto 0 0; width: min(60%, 800px);
  z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, rgba(11,11,13,0.86) 0%,
    rgba(11,11,13,0.7) 52%, rgba(11,11,13,0) 100%); }
.furnace__content { position: relative; z-index: 4; }

.fire { position: absolute; left: 0; right: 0; z-index: 2;
  top: min(30%, 26svh); height: min(80%, 62svh); pointer-events: none;
  mix-blend-mode: screen; filter: url(#fire-turb);
  -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.25) 38%,
    rgba(0,0,0,0.62) 52%, #000 66%, #000 100%);
  mask-image: linear-gradient(100deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.25) 38%,
    rgba(0,0,0,0.62) 52%, #000 66%, #000 100%); }
.firebed { position: absolute; left: -2%; right: -2%; bottom: -6%; height: 34%;
  background: linear-gradient(to top, rgba(255,243,224,0.55) 0%, rgba(255,194,75,0.42) 14%,
    rgba(238,106,30,0.30) 34%, rgba(122,42,8,0.16) 62%, rgba(122,42,8,0) 100%);
  filter: blur(22px); animation: bed-breathe 7.5s ease-in-out infinite; }
@keyframes bed-breathe {
  0%, 100% { opacity: 0.78; transform: scaleY(0.96); }
  50% { opacity: 1; transform: scaleY(1.06); } }
.flame { position: absolute; bottom: -4%; border-radius: 46% 54% 38% 42%;
  filter: blur(18px); transform-origin: 50% 100%; will-change: transform;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255,243,224,0.96) 0%, rgba(255,194,75,0.78) 18%, rgba(238,106,30,0.52) 42%,
    rgba(122,42,8,0.26) 66%, rgba(122,42,8,0) 84%); }
.flame--1 { left: -6%; width: 20%; height: 62%; animation: lick-1 2.9s ease-in-out infinite alternate; }
.flame--2 { left: 8%;  width: 17%; height: 46%; animation: lick-2 3.6s ease-in-out infinite alternate; }
.flame--3 { left: 24%; width: 22%; height: 82%; animation: lick-3 2.4s ease-in-out infinite alternate; }
.flame--4 { left: 41%; width: 19%; height: 58%; animation: lick-4 3.2s ease-in-out infinite alternate; }
.flame--5 { left: 56%; width: 24%; height: 96%; animation: lick-5 2.7s ease-in-out infinite alternate; }
.flame--6 { left: 74%; width: 18%; height: 68%; animation: lick-6 3.9s ease-in-out infinite alternate; }
.flame--7 { right: -6%; width: 21%; height: 52%; animation: lick-7 3.4s ease-in-out infinite alternate; }
@keyframes lick-1 { 0%{transform:scaleY(0.88) scaleX(1.02) skewX(-5deg)} 55%{transform:scaleY(1.14) scaleX(0.94) skewX(6deg)} 100%{transform:scaleY(0.98) scaleX(1.04) skewX(-3deg)} }
@keyframes lick-2 { 0%{transform:scaleY(1.06) skewX(4deg)} 48%{transform:scaleY(0.86) skewX(-7deg)} 100%{transform:scaleY(1.18) skewX(2deg)} }
@keyframes lick-3 { 0%{transform:scaleY(0.92) scaleX(0.98) skewX(3deg)} 60%{transform:scaleY(1.22) scaleX(1.05) skewX(-6deg)} 100%{transform:scaleY(1.02) scaleX(0.96) skewX(5deg)} }
@keyframes lick-4 { 0%{transform:scaleY(1.1) skewX(-6deg)} 44%{transform:scaleY(0.9) skewX(5deg)} 100%{transform:scaleY(1.16) skewX(-2deg)} }
@keyframes lick-5 { 0%{transform:scaleY(0.94) scaleX(1.03) skewX(5deg)} 52%{transform:scaleY(1.26) scaleX(0.93) skewX(-4deg)} 100%{transform:scaleY(1.04) scaleX(1.01) skewX(7deg)} }
@keyframes lick-6 { 0%{transform:scaleY(1.12) skewX(-3deg)} 58%{transform:scaleY(0.88) skewX(6deg)} 100%{transform:scaleY(1.2) skewX(-5deg)} }
@keyframes lick-7 { 0%{transform:scaleY(0.9) scaleX(1.04) skewX(6deg)} 46%{transform:scaleY(1.18) scaleX(0.95) skewX(-5deg)} 100%{transform:scaleY(1) scaleX(1.02) skewX(3deg)} }

.shimmer { position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none;
  top: min(16%, 12svh); height: min(34%, 28svh);
  background: linear-gradient(to top, rgba(255,177,102,0.10), rgba(255,177,102,0));
  filter: url(#shimmer-turb); mix-blend-mode: screen; }

.embers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ember { position: absolute; bottom: 2%; width: 4px; height: 4px; border-radius: 50%;
  background: #FFE9C9; box-shadow: 0 0 12px 3px rgba(255,150,45,0.9); opacity: 0;
  animation-name: ember-rise; animation-timing-function: cubic-bezier(0.32,0,0.5,1);
  animation-iteration-count: infinite; will-change: transform, opacity; }
@keyframes ember-rise {
  0% { opacity: 0; transform: translate3d(0,0,0) scale(1); }
  10% { opacity: 0.95; } 65% { opacity: 0.55; }
  100% { opacity: 0; transform: translate3d(var(--dx,20px), var(--dy,-80vh), 0) scale(0.3); } }

/* Local type plate. Required wherever text sits over fire.
   0.90 over an unmasked white-hot core composites to #232223:
   text 14.24:1, muted 7.24:1, silver 10.25:1, ember 5.05:1. */
.furnace .type-plate { position: relative; z-index: 4;
  background: linear-gradient(100deg, rgba(11,11,13,0.94) 0%, rgba(11,11,13,0.92) 62%,
    rgba(11,11,13,0.90) 80%, rgba(11,11,13,0.44) 92%, rgba(11,11,13,0) 100%);
  padding: 28px 32px 32px; margin-left: -32px;
  border-left: 2px solid rgba(238,106,30,0.55); }

/* ---------------- the arch, heat carrier ---------------- */
.arch { position: relative; overflow: hidden; background: #282A2F;
  border-radius: 200px 200px 0 0; }
.arch--card { border-radius: 120px 120px 0 0; }
.arch--thumb { border-radius: 56px 56px 0 0; }
.arch::before { content: ""; position: absolute; left: 12%; right: 12%; top: 0;
  height: 3px; z-index: 3; border-radius: 999px;
  background: linear-gradient(90deg, rgba(238,106,30,0) 0%, #FFB166 50%, rgba(238,106,30,0) 100%);
  box-shadow: 0 0 26px 6px rgba(238,106,30,0.6);
  animation: lip-shimmer 5.2s ease-in-out infinite; }
@keyframes lip-shimmer { 0%,100%{opacity:0.7} 50%{opacity:1} }

/* ---------------- EMBER band helpers ---------------- */
.ember-band { position: relative; overflow: hidden; }
.hot { transition: border-color 180ms cubic-bezier(0.2,0,0.2,1),
                   box-shadow 180ms cubic-bezier(0.2,0,0.2,1),
                   transform 180ms cubic-bezier(0.16,1,0.3,1); }
.hot:hover { border-color: #EE6A1E;
  box-shadow: 0 18px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(238,106,30,0.5),
              0 -2px 28px rgba(238,106,30,0.28); transform: translateY(-3px); }
.hot:hover .hot__img { transform: scale(1.04); }
.hot__img { transition: transform 320ms cubic-bezier(0.16,1,0.3,1); }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px;
  padding: 0 12px; border: 1px solid #787C84; border-radius: 2px;
  color: #C9D1DB; font-family: 'Archivo', Arial, sans-serif; font-size: 12px;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(11,11,13,0.45); }
.pill-ember { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
  border-radius: 999px; background: #EE6A1E; color: #131316;
  font-family: 'Archivo', Arial, sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; }
.pill-outline { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
  border-radius: 999px; border: 1px solid #787C84; color: #C9D1DB;
  font-family: 'Archivo', Arial, sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------------- process numerals ---------------- */
.embernum { flex: 0 0 auto; width: clamp(44px,5vw,72px);
  font-family: 'Archivo', Arial, sans-serif; font-size: clamp(28px,3vw,44px);
  font-weight: 700; line-height: 1; color: #FF7F35;
  animation: num-breathe 8s ease-in-out infinite; }
.embernum--1 { animation-delay: 0s; } .embernum--2 { animation-delay: 2s; }
.embernum--3 { animation-delay: 4s; } .embernum--4 { animation-delay: 6s; }
@keyframes num-breathe {
  0%, 62%, 100% { color: #EE6A1E; text-shadow: 0 0 12px rgba(238,106,30,0.14); }
  16% { color: #FFC24B; text-shadow: 0 0 24px rgba(255,148,45,0.20), 0 0 60px rgba(238,106,30,0.14); }
  34% { color: #FF7F35; text-shadow: 0 0 18px rgba(255,127,53,0.17), 0 0 48px rgba(238,106,30,0.10); } }
.step { display: flex; gap: clamp(16px,3vw,32px); padding: 26px 0;
  border-top: 1px solid rgba(201,209,219,0.22); }
.step:last-child { border-bottom: 1px solid rgba(201,209,219,0.22); }

/* ---------------- grids ---------------- */
.zig { display: grid; grid-template-columns: 3fr 2fr; gap: clamp(24px,4vw,56px);
  align-items: center; }
.zig--flip { grid-template-columns: 2fr 3fr; }
.zig--flip > .zig__media { order: 2; }
.zig--flip > .zig__body { order: 1; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.g2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.showcase { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.trust > * + * { border-left: 1px solid rgba(201,209,219,0.22); }
.footcols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.split { display: grid; grid-template-columns: 3fr 2fr; gap: clamp(32px,4vw,64px);
  align-items: start; }

/* ============================================================
   FORM COMPONENT. Gravity Forms renders the real markup; these
   are the visual states. --gf- overrides in section 5 of
   DESIGN-SYSTEM.md map onto the same values.
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label,
.gform_wrapper .gfield_label { font-size: 15px; font-weight: 600; color: #F4F3F1; }
.field__req,
.gform_wrapper .gfield_required { color: #FFB166; }
.field__help,
.gform_wrapper .gfield_description { font-size: 13px; line-height: 1.5; color: #ABB0B8; }
.field__control,
.gform_wrapper .ginput_container input,
.gform_wrapper .ginput_container textarea,
.gform_wrapper .ginput_container select {
  width: 100%; min-height: 52px; padding: 0 16px;
  background: #1D1E22; color: #F4F3F1;
  border: 1px solid #787C84; border-radius: 2px;
  font-family: 'IBM Plex Sans', Arial, sans-serif; font-size: 16px;   /* 16px floor: iOS will not zoom */
  transition: border-color 180ms; }
textarea.field__control { min-height: 140px; padding: 14px 16px; line-height: 1.6; resize: vertical; }
/* Placeholders use TEXT-MUTED, not disabled-text.
   #71767E is the disabled-text role, which WCAG exempts, and it was doing
   non-exempt work here: 3.64:1 on #1D1E22 and 4.06:1 on #131316, both failing.
   #ABB0B8 measures 7.63:1 and 8.51:1. Checkout inherits this. */
.field__control::placeholder { color: #ABB0B8; opacity: 1; }
.field__control:hover,
.gform_wrapper .ginput_container input:hover,
.gform_wrapper .ginput_container textarea:hover,
.gform_wrapper .ginput_container select:hover { border-color: #FFB166; }
.field__control:focus-visible,
.gform_wrapper .ginput_container input:focus-visible,
.gform_wrapper .ginput_container textarea:focus-visible,
.gform_wrapper .ginput_container select:focus-visible { border-color: #FFB166; }
.field__control--error { border-color: #FF6B6B; }
.field__control:disabled,
.gform_wrapper .ginput_container input:disabled,
.gform_wrapper .ginput_container textarea:disabled,
.gform_wrapper .ginput_container select:disabled { background: #26272B; color: #71767E; border-color: #26272B;
  cursor: not-allowed; }
.field__error,
.gform_wrapper .validation_message { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #FF6B6B; }
.field__error-icon { display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; background: #FF6B6B;
  color: #131316; font-family: 'Archivo', Arial, sans-serif; font-weight: 700; font-size: 12px; }
.form-legend { font-size: 13px; color: #ABB0B8; }

.choice { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 17px;
  cursor: pointer; }
.choice input { width: 24px; height: 24px; flex: 0 0 auto; accent-color: #EE6A1E; }

.error-summary { background: #2A1416; border: 1px solid #FF6B6B; border-radius: 2px;
  padding: 16px 24px; display: flex; flex-direction: column; gap: 8px; }
.error-summary h2, .error-summary p:first-child {
  margin: 0; font-family: 'Archivo', Arial, sans-serif; font-weight: 600; font-size: 18px;
  color: #F4F3F1; }
.error-summary ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.7; }
.success-panel { background: #0F2418; border: 1px solid #4ADE80; border-radius: 2px;
  padding: clamp(20px,3vw,32px); display: flex; flex-direction: column; gap: 12px; }

.dropzone { background: #282A2F; border: 1px dashed #787C84; border-radius: 2px;
  padding: 32px; text-align: center; transition: border-color 180ms, color 180ms; }
.dropzone:hover { border-color: #FFB166; }
.dropzone--selected { border-style: solid; border-color: #4ADE80; text-align: left; }
.dropzone--error { border-color: #FF6B6B; }
.upload-bar { height: 4px; background: #26272B; border-radius: 999px; overflow: hidden; }
.upload-bar > span { display: block; height: 100%; background: #EE6A1E; }

/* Multi-step progress. Used by the two-step quote form. */
.steps { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-family: 'Archivo', Arial, sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; }
.steps__item { display: inline-flex; align-items: center; gap: 8px; min-height: 36px;
  padding: 0 14px; border-radius: 999px; border: 1px solid #787C84;
  color: #C9D1DB; }
.steps__item[aria-current="step"] { background: #EE6A1E; border-color: #EE6A1E; color: #131316; }
.steps__item--done { border-color: #4ADE80; color: #4ADE80; }
.steps__bar { flex: 1 1 60px; height: 2px; background: rgba(201,209,219,0.24); }

/* ---------------- responsive: Divi 5 default bands only ---------------- */
@media (max-width: 980px) {
  .wrap { padding-left: 32px; padding-right: 32px; }
  .zig, .zig--flip, .split { grid-template-columns: 1fr; }
  .zig--flip > .zig__media { order: 1; }
  .zig--flip > .zig__body { order: 2; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .showcase { grid-template-columns: repeat(3, 1fr); }
  .trust { grid-template-columns: 1fr; }
  .trust > * + * { border-left: 0; border-top: 1px solid rgba(201,209,219,0.22); }
  .footcols { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .hdr-bar { min-height: 96px; }
  .logo-hdr { height: 76px; width: 69px; }
  .mainnav { display: none; }
  .burger-only, .hdr-drawer { display: inline-flex; }
  .furnace--hero { min-height: calc(100svh - 96px); }

  .furnace .type-plate { max-width: min(84%, 980px); margin-left: 0;
    }
  .furnace .type-plate .d-display, .type-plate .d-lede, .type-plate .d-eyebrow,
  .furnace .type-plate .d-h2, .type-plate .d-body { max-width: 80%; }
  .furnace__scrim {
    background:
      linear-gradient(180deg, rgba(11,11,13,0.9) 0%, rgba(11,11,13,0.68) 36%,
        rgba(11,11,13,0.18) 64%, rgba(11,11,13,0) 84%),
      linear-gradient(to top, rgba(11,11,13,0.94) 0%, rgba(11,11,13,0.4) 40%, rgba(11,11,13,0) 72%); }
  .fire--viewport { top: min(74%, 64svh); height: min(26%, 24svh); }
  .fire { filter: url(#fire-static);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, #000 46%, #000 100%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, #000 46%, #000 100%); }
  .shimmer { filter: url(#shimmer-static); }
  .flame--2, .flame--6 { display: none; }
  .ember:nth-child(n+9) { display: none; }
}
@media (max-width: 767px) {
  .wrap { padding-left: 24px; padding-right: 24px; }
  .g4, .g3, .g2 { grid-template-columns: 1fr; }
  .showcase { grid-template-columns: repeat(2, 1fr); }
  .footcols { grid-template-columns: 1fr; }
  .hdr-bar { min-height: 72px; }
  .logo-hdr { height: 56px; width: 51px; }
  .furnace--hero { min-height: calc(100svh - 72px); }
  .call-only { display: inline-flex; }
  .quote-btn { display: none; }
  .furnace__img { object-position: 50% 26% !important /* beats the surviving inline object-position hook */; }
  .d-display { font-size: clamp(2.25rem, 11vw, 3rem); }
  .furnace__content { padding-top: 24px; padding-bottom: 24px; }
  .furnace .type-plate { max-width: 100%; padding: 20px 20px 24px;
    background: linear-gradient(180deg, rgba(11,11,13,0.92) 0%, rgba(11,11,13,0.90) 70%, rgba(11,11,13,0.66) 100%); }
  .furnace .type-plate .d-display, .type-plate .d-lede, .type-plate .d-eyebrow,
  .furnace .type-plate .d-h2, .type-plate .d-body { max-width: 100%; }

  .flame--1 { left: -10%; width: 46%; height: 44%; }
  .flame--3 { left: 26%; width: 52%; height: 56%; }
  .flame--5 { left: 62%; width: 48%; height: 48%; }
  .flame { filter: blur(14px); bottom: -2%; }

  .firebed { height: 46%; bottom: -4%; }

  .ember:nth-child(n+7) { display: none; }
}

/* SHORT VIEWPORT, any width. SCOPED TO THE HERO: this geometry is
   viewport-driven. Content-driven FURNACE bands keep their own percentage
   geometry, or an !important here collapses a 3600px band to a 162px strip. */
@media (max-height: 600px) {
  .furnace__plate { display: none; }
  .furnace .type-plate { max-width: 100%; margin-left: 0; padding: 16px 18px 20px;
    background: linear-gradient(180deg, rgba(11,11,13,0.92) 0%, rgba(11,11,13,0.90) 70%, rgba(11,11,13,0.66) 100%); }
  .furnace .type-plate .d-display, .type-plate .d-lede, .type-plate .d-eyebrow { max-width: 100%; }
  .fire--viewport { top: min(66%, 58svh); height: min(34%, 30svh); }
  .furnace--hero { min-height: 0; }
  .furnace__content { padding-top: 20px; padding-bottom: 20px; }
  .d-display { font-size: clamp(1.75rem, 5.5vw, 2.5rem); }
  .flame--2, .flame--4, .flame--6 { display: none; }
  .shimmer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .fire { filter: none !important; }
  .shimmer { display: none !important; }
  .flame, .firebed, .ember, .rule-heat, .embernum, .arch::before { animation: none !important; }
  .flame { opacity: 0.94 !important; }
  .firebed { opacity: 0.95 !important; }
  .ember { opacity: 0.85 !important; }
  .embernum { color: #FF7F35 !important; text-shadow: 0 0 18px rgba(255,127,53,0.17) !important; }
  .arch::before { opacity: 1 !important; }
  .hot:hover, .btn-primary:hover, .btn-primary:active { transform: none !important; }
  .hot:hover .hot__img { transform: none !important; }
}

/* ============================================================
   PRODUCT CARD + COMMERCE CONTROLS
   Card is an <article>, not an <a>: an add-to-cart button cannot
   live inside an anchor. The title carries the link and a
   spanning pseudo-element makes the card area clickable, with
   the button raised above it so it stays independently
   operable. This is the standard "card with a nested action"
   pattern and it is what WooCommerce markup must be styled to.
   ============================================================ */
/* MERGED from two identical-but-for-two-declarations .prod rules.
   position:relative is LOAD-BEARING: .prod__title a::after { inset: 0 } anchors
   the whole-card click target to it. With the declaration in only the FIRST of
   two rules, reordering or deleting that rule would silently spread the click
   target across the page — the same shape as the .hdr backdrop-filter
   regression. One rule, so it cannot be separated from what depends on it. */
.prod,
.woocommerce ul.products li.product {
  position: relative; display: flex; flex-direction: column;
  background: #1D1E22; border: 1px solid rgba(201,209,219,0.22); border-radius: 4px;
  overflow: hidden; text-decoration: none; color: #F4F3F1; }
.prod__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title { margin: 0; padding: 18px 20px 6px;
  font-family: 'Archivo', Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; }
.prod__title a { color: #F4F3F1; text-decoration: none; }
.prod__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.prod__title a:hover { color: #FFB166; }
.prod__desc { padding: 0 20px 12px; font-size: 15px; line-height: 1.6; color: #ABB0B8; }
.prod__price,
.woocommerce ul.products li.product .price { padding: 0 20px 12px; font-family: 'Archivo', Arial, sans-serif;
  font-size: 20px; font-weight: 700; color: #F4F3F1; }
.prod__meta,
/* .prs-ship-note is OURS, emitted by this hook. Do not strip it as a stray:
     add_action( 'woocommerce_after_shop_loop_item', function () {
         global $product;
         $note = $product->is_type( 'external' )
             ? 'Freight quote required' : 'Ships in 1 to 2 business days';
         printf( '<p class="prs-ship-note">%s</p>', esc_html( $note ) );
     }, 15 );  */
.woocommerce ul.products li.product .prs-ship-note { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 20px; }
/* Raised above the card-wide hit area so it is independently clickable. */
.prod__action,
.woocommerce a.add_to_cart_button,
.woocommerce button.single_add_to_cart_button { position: relative; z-index: 2; margin: auto 20px 20px; }

/* Quantity stepper. 44x44 targets, per the house standard. */
.qty,
.woocommerce div.product form.cart div.quantity,
.woocommerce table.shop_table.cart div.quantity { display: inline-flex; align-items: stretch; border: 1px solid #787C84; border-radius: 2px;
  overflow: hidden; }
.qty button { width: 48px; min-height: 48px; background: #1D1E22; border: 0; color: #F4F3F1;
  font-family: 'Archivo', Arial, sans-serif; font-size: 20px; font-weight: 700; cursor: pointer;
  transition: background-color 180ms; }
.qty button:hover { background: #282A2F; color: #FFB166; }
.qty input { width: 64px; min-height: 48px; text-align: center; background: #131316;
  color: #F4F3F1; border: 0; border-left: 1px solid #787C84; border-right: 1px solid #787C84;
  font-family: 'IBM Plex Sans', Arial, sans-serif; font-size: 16px; }

/* Stock messaging. Colour is never the only signal: each carries a label
   and a distinct glyph. Roles were contrast-tested at Step 2. */
.stock { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.stock--in { color: #4ADE80; }
.stock--low { color: #FFC24B; }
.stock--out { color: #FF9A9A; }
.stock--backorder { color: #7FC4FF; }

/* Cart line items reflow to stacked cards; never a sideways scroll. */
.cartline { display: grid; grid-template-columns: 96px 1fr auto auto auto; gap: 20px;
  align-items: center; padding: 20px 0; border-top: 1px solid rgba(201,209,219,0.22); }
.cart-summary,
.woocommerce .cart_totals,
.woocommerce-checkout-review-order { background: #1D1E22; border: 1px solid rgba(201,209,219,0.22);
  border-radius: 4px; padding: clamp(20px,3vw,32px); display: flex; flex-direction: column; gap: 16px; }
.totrow { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; }
.totrow--grand { font-family: 'Archivo', Arial, sans-serif; font-size: 22px; font-weight: 700;
  color: #F4F3F1; padding-top: 16px; border-top: 1px solid rgba(201,209,219,0.22); }

@media (max-width: 767px) {
  .cartline { grid-template-columns: 72px 1fr; grid-template-areas:
    "img body" "img meta" "qty qty" "price remove"; row-gap: 12px; }
}

/* ============================================================
   MEDIA SIZING CONTRACT
   An img with height:100% inside an auto-height parent resolves
   to auto and lays out at its intrinsic aspect ratio, so
   object-fit: cover never engages. A 946x2048 portrait at 509px
   wide became 1101px tall next to 371px of text.
   The BOX owns the ratio; the image fills it and is cropped.
   min-height on the image is neutralised, because it fights the
   ratio at narrow widths.
   ============================================================ */
.arch, .zig__media, .furnace__media { aspect-ratio: 4 / 3; }
.arch--thumb { aspect-ratio: 16 / 10; }
.arch--tall { aspect-ratio: 3 / 4; }
.arch > img, .zig__media > img, .furnace__media > img {
  width: 100%; height: 100%;
  min-height: 0; object-fit: cover; }

/* Where a media box must match a text column instead of a ratio,
   opt out explicitly rather than by accident. */
.arch--free { aspect-ratio: auto; }

/* ============================================================
   CARD PATTERN, two corrections
   1. The spanning pseudo-element sat over the description and
      blocked text selection. Description and meta are raised
      above it, so they are selectable but not clickable.
   2. :has() fallback. Without @supports the focus ring would
      simply not render in an unsupporting browser. The link ring
      is the base state; the card-wide ring is the enhancement.
   ============================================================ */
.prod__desc,
.prod__meta,
.prod__price,
.woocommerce ul.products li.product .prs-ship-note,
.woocommerce ul.products li.product .price { position: relative; z-index: 2;
  user-select: text; }
/* base: ring on the link itself, works everywhere */
.prod__title a:focus-visible { outline: 2px solid #FFB166; outline-offset: 2px; }
@supports selector(:has(*)) {
  /* Each selector is internally consistent: mockup classes with mockup
     classes, Woo classes with Woo classes. The previous version paired the
     mockup card with the LIVE title, so the mockup half matched nothing while
     the suppression below still fired — product cards had no focus indicator
     at all in any browser with :has() support. A 2.4.7 failure. */
  .prod:has(.prod__title a:focus-visible),
  .woocommerce ul.products li.product:has(.woocommerce-loop-product__title a:focus-visible) {
    outline: 2px solid #FFB166; outline-offset: 2px; }
  /* Suppression lives INSIDE the guard, keyed per world. */
  .prod .prod__title a:focus-visible,
  .woocommerce ul.products li.product .woocommerce-loop-product__title a:focus-visible {
    outline: none; }
}

/* ============================================================
   DISPLAY CARD, non-interactive.
   Used by the application grid until those pages exist in phase 2.
   No hover affordance, no pointer cursor, nothing focusable.
   Becomes a link again with no redesign.
   ============================================================ */
.dispcard { display: flex; flex-direction: column; background: #1D1E22;
  border: 1px solid rgba(201,209,219,0.22); border-radius: 4px; overflow: hidden;
  color: #F4F3F1; cursor: default; }
.dispcard h3 { margin: 0; padding: 20px 24px 8px;
  font-family: 'Archivo', Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; }
.dispcard p { margin: 0; padding: 0 24px 24px; font-size: 16px; line-height: 1.6; color: #ABB0B8; }

/* ============================================================
   PRODUCT CARD ALIGNMENT
   Prices, pills and buttons must line up ACROSS cards, not just
   inside one. That needs shared rows, so each card spans six
   rows of the parent grid and adopts them with subgrid.
   Every card carries the same six children in the same order:
     1 media  2 title  3 description  4 price  5 meta  6 action
   Quote-only cards fill slot 4 with "Price on quote" rather
   than omitting it, which would shift every row below it.
   ============================================================ */
.g4, .g3, .g2 { grid-auto-rows: auto; }

@supports (grid-template-rows: subgrid) {
  .g4 > .prod, .g3 > .prod, .g2 > .prod {
    grid-row: span 6;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}
/* Fallback where subgrid is unsupported: reserve consistent slot heights so
   the rows still align in practice. Two-line title, two-line description. */
@supports not (grid-template-rows: subgrid) {
.prod__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title { min-height: calc(2 * 1.3em + 24px); }
  .prod__desc { min-height: calc(2 * 1.6em + 12px); }
.prod__price,
.woocommerce ul.products li.product .price { min-height: 46px; }
.prod__meta,
.woocommerce ul.products li.product .prs-ship-note { min-height: 50px; }
}

.prod__price--quote { color: #C9D1DB; font-size: 16px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; }
.prod__action,
.woocommerce a.add_to_cart_button,
.woocommerce button.single_add_to_cart_button { align-self: end; }

/* ============================================================
   PRODUCT IMAGE PLACEHOLDER
   Used where no genuine product photograph exists. Better an
   honest empty slot than a job-site photo that contradicts the
   product. Each carries the shot it needs, so ASSETS.csv and the
   client brief can be generated straight from the page.
   ============================================================ */
.ph { position: relative; display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(135deg, #232428 0 10px, #1D1E22 10px 20px);
  color: #C9D1DB; }
.ph::after { content: attr(data-need);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  text-align: center; line-height: 1.5; padding: 10px 14px;
  border: 1px dashed rgba(201,209,219,0.45); border-radius: 2px;
  background: rgba(11,11,13,0.72); max-width: 84%; }

/* ============================================================
   FIRE GEOMETRY CONTRACT
   Two kinds of FURNACE band, and they size their fire differently.

   .fire--viewport  the band's height is driven by the VIEWPORT
                    (page heroes). The fire is clamped in svh and
                    is dropped below the type plate at tablet,
                    phone and short-viewport. ADD THIS CLASS TO
                    EVERY HERO FIRE, whatever the band variant is
                    called.

   .fire (bare)     the band's height is driven by its CONTENT
                    (mid-page statement and supply bands). It
                    keeps its own inline percentage geometry, and
                    the responsive rules must NOT touch it, or a
                    3600px band collapses to a 162px strip.

   The failure this prevents: scoping responsive rules to a band
   variant such as .furnace--hero means any new page inventing
   .furnace--page, .furnace--about and so on silently loses them.
   Scope to the fire's behaviour instead.
   ============================================================ */

/* ============================================================
   SECONDARY PAGE HEROES: no flame field where it cannot be seen
   A page hero is short by design (clamp 420-620px, and shorter
   still under the sub-600px rule). Its type plate is often
   TALLER than the band, so there is no vertical room to drop a
   flame field clear of the plate: any geometry that fits is
   underneath it, and shrinking the plate would break the
   contrast floor.

   So below 981px, and at any short viewport, a .fire--secondary
   field drops its flame bodies and keeps the fire bed and the
   bloom. That is static heat, which is what an EMBER band uses,
   and it is honest: nothing is painted out because nothing that
   cannot be seen is drawn.

   Full flame fields stay on the HOMEPAGE hero and on the
   content-driven mid-page bands, which have the height for them.
   ============================================================ */
@media (max-width: 980px) {

  .fire--secondary .firebed { height: 62%; opacity: 0.95; }
}
@media (max-height: 600px) {
  .fire--secondary .flame { display: none; }
  .fire--secondary { filter: none; }
  .fire--secondary .firebed { height: 70%; opacity: 0.95; }
}

/* ============================================================
   SINGLE PRODUCT TEMPLATE
   Styled against the markup divi/woocommerce-* modules emit.
   ============================================================ */
.pdp { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px,4vw,64px);
  align-items: start; }
.gallery { display: flex; flex-direction: column; gap: 12px; }
.gallery__main { position: relative; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery__thumb { padding: 0; border: 1px solid #787C84; border-radius: 2px;
  background: #1D1E22; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3;
  transition: border-color 180ms; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { border-color: #FFB166; }
.gallery__thumb[aria-current="true"] { border-color: #EE6A1E; border-width: 2px; }
/* Single-image case: no thumb strip, main image keeps the same box. */
.gallery--single .gallery__thumbs { display: none; }

.buybox { background: #1D1E22; border: 1px solid rgba(201,209,219,0.22); border-radius: 4px;
  padding: clamp(20px,3vw,32px); display: flex; flex-direction: column; gap: 20px;
  position: sticky; top: 140px; }
.buybox__price { font-family: 'Archivo', Arial, sans-serif; font-size: clamp(28px,3vw,40px);
  font-weight: 700; line-height: 1; color: #F4F3F1; margin: 0; }
.buybox__unit { font-size: 15px; color: #ABB0B8; }
.buybox__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.spec,
.woocommerce table.shop_attributes { width: 100%; border-collapse: collapse; }
.spec caption { text-align: left; padding-bottom: 12px; font-size: 13px; color: #ABB0B8; }
.spec th, .spec td { text-align: left; padding: 14px 0; font-size: 16px;
  border-bottom: 1px solid rgba(201,209,219,0.22); vertical-align: top; }
.spec th { width: 44%; color: #C9D1DB; font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.spec td { color: #F4F3F1; }

.tabs__list { display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid rgba(201,209,219,0.22); }
.tabs__tab,
.woocommerce div.product .woocommerce-tabs ul.tabs li a { min-height: 52px; padding: 0 24px; background: transparent; border: 0;
  border-bottom: 2px solid transparent; color: #C9D1DB;
  font-family: 'Archivo', Arial, sans-serif; font-size: 15px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.tabs__tab:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: #F4F3F1; }
.tabs__tab[aria-selected="true"] { color: #F4F3F1; border-bottom-color: #EE6A1E; }
.tabs__panel,
.woocommerce div.product .woocommerce-tabs .panel { padding-top: 28px; }

.datasheet { display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  background: #282A2F; border: 1px solid #787C84; border-radius: 2px;
  color: #F4F3F1; text-decoration: none; transition: border-color 180ms; }
.datasheet:hover { border-color: #FFB166; color: #FFB166; }

@media (max-width: 980px) {
  .pdp { grid-template-columns: 1fr; }
  .buybox { position: static; }
}
@media (max-width: 767px) {
  .gallery__thumbs { grid-template-columns: repeat(3, 1fr); }
  .spec th { width: 50%; }
}

/* ============================================================
   GALLERY HEIGHT CEILING
   .gallery__main is ratio-sized, so its height = 0.75 x column
   WIDTH. When .pdp collapses to one column at <=980px that
   column doubles, the image grows to 117% of viewport height,
   and the first screen becomes image only: no title, no price,
   no add to cart. Ratio governs shape; the viewport must govern
   the ceiling.
   ============================================================ */
.gallery__main { max-height: min(58svh, 520px); overflow: hidden; }
.gallery__main > img { width: 100%; height: 100%;
  object-fit: cover; }

@media (max-width: 980px) {
  /* Collapsed column is wide, so cap harder and keep the buy box on
     the first or second screen rather than the third. */
  .gallery__main { max-height: min(46svh, 420px); }
}
@media (max-height: 600px) {
  .gallery__main { max-height: 52svh; }
}

/* ============================================================
   LEAD TIME LINE  (default, replacing the stock indicator)
   Operational reason: inventory lives in QuickBooks and the
   catalog is exported from it. Unless someone keeps Woo stock
   numbers accurate, a stock badge is confidently wrong to a
   buyer whose furnace is down. A lead-time line is true whether
   or not anyone touches inventory, so it degrades gracefully.
   The .stock states stay defined and unused, like the sale
   badge, so phase 2 can switch them on for nothing.
   ============================================================ */
.leadtime { display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; color: #C9D1DB; }
.leadtime svg { flex: 0 0 auto; color: #FFB166; }

/* Native quantity input fallback. If the +/- hooks are absent the bare Woo
   input must still be a 44px target, not a 10px spinner. */
.quantity input.qty, .qty input {
  min-height: 48px; padding: 0 12px; font-size: 16px; }

/* ============================================================
   CHIP CONTROLS: hover, selected and disabled
   .chip is used both as a static spec badge (span) and as a
   control (button). Only the control gets interaction states.
   Selection is a CLASS, not an inline style, so hover can win.
   ============================================================ */
button.chip { transition: border-color 180ms cubic-bezier(0.2,0,0.2,1),
                          color 180ms cubic-bezier(0.2,0,0.2,1),
                          background-color 180ms cubic-bezier(0.2,0,0.2,1); }
button.chip:hover:not(:disabled):not(.chip--on) {
  border-color: #FFB166; color: #FFB166; background: rgba(238,106,30,0.10); }
button.chip:active:not(:disabled) { transform: translateY(1px); }

button.chip.chip--on { background: #EE6A1E; border-color: #EE6A1E; color: #131316; }
button.chip.chip--on:hover { background: #FF7F35; border-color: #FF7F35; color: #131316; }
button.chip.chip--on:focus-visible { outline-color: #131316; }

button.chip:disabled { opacity: 0.5; cursor: not-allowed; text-decoration: line-through; }
button.chip:disabled:hover { border-color: #787C84; color: #C9D1DB; background: transparent; }

@media (prefers-reduced-motion: reduce) {
  button.chip:active:not(:disabled) { transform: none !important; }
}

/* ============================================================
   CART
   Styling target for table.shop_table.cart. Coupon styles are
   DEFINED BUT UNUSED, like the sale badge and the stock states,
   so enabling coupons later costs nothing.
   ============================================================ */
.cartwrap { display: grid; grid-template-columns: 1fr 380px; gap: clamp(24px,4vw,48px);
  align-items: start; }
.cartrow,
.woocommerce table.shop_table.cart tr.cart_item { display: grid; grid-template-columns: 96px 1fr auto auto;
  gap: 20px; align-items: center; padding: 20px 0;
  border-top: 1px solid rgba(201,209,219,0.22); }
.cartrow__media { aspect-ratio: 1; border-radius: 28px 28px 2px 2px; overflow: hidden;
  background: #282A2F; }
.cartrow__media img { width: 100%; height: 100%; object-fit: cover; }
.cartrow__name,
.woocommerce table.shop_table.cart td.product-name { font-family: 'Archivo', Arial, sans-serif; font-size: 17px;
  font-weight: 600; line-height: 1.3; margin: 0; }
.cartrow__name a { color: #F4F3F1; text-decoration: none; }
.cartrow__name a:hover { color: #FFB166; }
.cartrow__meta { margin: 6px 0 0; font-size: 14px; color: #ABB0B8; }
.cartrow__price,
.woocommerce table.shop_table.cart td.product-price,
.woocommerce table.shop_table.cart td.product-subtotal { font-family: 'Archivo', Arial, sans-serif; font-size: 18px;
  font-weight: 700; white-space: nowrap; }
/* Woo ships a tiny x. 44px minimum, house standard. */
.cartrow__remove,
.woocommerce table.shop_table.cart a.remove { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid #787C84; border-radius: 2px;
  background: transparent; color: #C9D1DB; cursor: pointer;
  transition: border-color 180ms, color 180ms; }
.cartrow__remove:hover,
.woocommerce table.shop_table.cart a.remove:hover { border-color: #FF6B6B; color: #FF6B6B; }

/* Below-minimum-quantity state. No native Woo equivalent. */
.cartrow--under { background: rgba(255,194,75,0.06); }
.cartrow__warn { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 0;
  font-size: 15px; line-height: 1.5; color: #FFC24B; }
.cartrow__warn svg { flex: 0 0 auto; margin-top: 2px; }

.notice,
.woocommerce-message,
.woocommerce-info { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 2px; font-size: 16px; }
.notice--success { background: #0F2418; border: 1px solid #4ADE80; color: #F4F3F1; }
.notice--error,
.woocommerce-error { background: #2A1416; border: 1px solid #FF6B6B; color: #F4F3F1; }
.notice--info { background: #1D1E22; border: 1px solid #7FC4FF; color: #F4F3F1; }
.notice .restore { color: #FFB166; text-decoration: underline; text-underline-offset: 3px;
  min-height: 44px; display: inline-flex; align-items: center; }

/* DEFINED BUT UNUSED. Coupons are off at launch: nothing in discovery suggests
   this client runs promotions, and an empty coupon box on a B2B cart is a real
   abandonment cause. Switching it on later needs no new CSS. */
.coupon { display: flex; flex-wrap: wrap; gap: 8px; }
.coupon input { flex: 1 1 200px; min-height: 52px; padding: 0 16px; background: #1D1E22;
  color: #F4F3F1; border: 1px solid #787C84; border-radius: 2px; font-size: 16px; }

@media (max-width: 980px) { .cartwrap { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
.cartrow,
.woocommerce table.shop_table.cart tr.cart_item { grid-template-columns: 72px 1fr; grid-template-areas:
      "media body" "media price" "qty remove"; row-gap: 14px; }
  .cartrow__media { grid-area: media; }
  .cartrow__body { grid-area: body; }
.cartrow__price,
.woocommerce table.shop_table.cart td.product-price,
.woocommerce table.shop_table.cart td.product-subtotal { grid-area: price; }
  .cartrow__qty { grid-area: qty; }
.cartrow__remove,
.woocommerce table.shop_table.cart a.remove { grid-area: remove; justify-self: end; }
}

/* ============================================================
   LINK STATES — every link-like element, hover AND focus-visible
   Colour alone is not a state change: that is the same rule the
   stock dots failed, so hover adds an underline as well.
   Focus ring comes from the global :where() rule; these add the
   colour and underline so keyboard users see the same affordance.
   ============================================================ */
.flink { min-height: 44px; display: flex; align-items: center;
  color: #ABB0B8; text-decoration: none;
  transition: color 120ms cubic-bezier(0.2,0,0.2,1); }
.flink:hover, .flink:focus-visible {
  color: #FFD1A1; text-decoration: underline; text-underline-offset: 3px; }

/* Header nav: not in a text run, so colour is legitimate, but hover gains an
   underline anyway for consistency with every other link. */
.mainnav a:hover, .mainnav a:focus-visible {
  color: #F4F3F1; text-decoration: underline; text-underline-offset: 6px;
  text-decoration-thickness: 2px; }

/* Card and cart-line titles */
.prod__title a:hover, .prod__title a:focus-visible,
.cartrow__name a:hover, .cartrow__name a:focus-visible {
  color: #FFB166; text-decoration: underline; text-underline-offset: 3px; }

/* Breadcrumbs are underlined at rest, so hover thickens instead */
nav[aria-label="Breadcrumb"] a:hover, nav[aria-label="Breadcrumb"] a:focus-visible {
  color: #FFD1A1; text-decoration-thickness: 2px; }

/* Inline links in body copy, and the address block */
address a:hover, address a:focus-visible,
.d-body a:hover, .d-body a:focus-visible,
.d-caption a:hover, .d-caption a:focus-visible,
.field__help a:hover, .field__help a:focus-visible,
.choice a:hover, .choice a:focus-visible {
  color: #FFD1A1; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .flink { transition: none; } }

/* ============================================================
   MOBILE DRAWER
   Three nav items. Nothing that is already visible in the sticky
   bar behind it: no logo, no cart, no call icon. The quote button
   IS included because it is hidden at phone widths.
   ============================================================ */
.drawer-panel { position: fixed; inset: 0; z-index: 200; box-sizing: border-box;
  background: #0B0B0D; padding: 20px 24px 32px;
  display: flex; flex-direction: column; gap: 20px;
  overflow-y: auto; overscroll-behavior: contain; }
.drawer-nav { display: flex; flex-direction: column; }
.drawer-nav a { display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; padding: 0 4px; text-decoration: none; color: #F4F3F1;
  font-family: 'Archivo', Arial, sans-serif; font-size: 22px; font-weight: 600;
  border-bottom: 1px solid rgba(201,209,219,0.22); }
.drawer-nav a:hover, .drawer-nav a:focus-visible { color: #FFB166; }
.drawer-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }

  /* 1024-1279: right cluster carries cart + quote, so nav tightens rather than
     losing an item. Measured: 6 links at 12px/5px sum 538px inside 586px. */
  @media (max-width: 1279px) and (min-width: 981px) {
    .mainnav a { padding: 0 5px; font-size: 12px; letter-spacing: 0; }
    .logo-hdr { height: 68px; width: 62px; }

    .quote-btn { padding: 0 14px; font-size: 13px; }
  }
  
  
  
  
  
  
  
  
  

  @media (max-width: 980px) {
    .zig, .zig--flip { grid-template-columns: 1fr; }
    .furnace .type-plate .d-display, .type-plate .d-lede, .type-plate .d-eyebrow,

    .fire { top: min(74%, 64svh); height: min(26%, 24svh);
      filter: url(#fire-static);
      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, #000 46%, #000 100%);
      mask-image: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, #000 46%, #000 100%); }
  }
  @media (max-width: 767px) {
    .g3, .g2 { grid-template-columns: 1fr; }
    .furnace .type-plate .d-display, .type-plate .d-lede, .type-plate .d-eyebrow,

    .fire { top: min(66%, 58svh); height: min(34%, 30svh); filter: url(#fire-static); }
  }

  /* SHORT VIEWPORT, any width. Removes the class rather than one measurement. */
  @media (max-height: 600px) {
    /* SCOPED TO THE HERO. This geometry is viewport-driven and correct for a
       hero, but the supply band is content-driven and 3597px tall, so an
       !important 30svh override collapsed its heat field to a 162px strip with
       3100px of unlit charcoal below it. Content-driven FURNACE bands keep
       their own inline percentage geometry. */
    .furnace--hero .fire { top: min(66%, 58svh); height: min(34%, 30svh); }
  }

  
/* ---- migrated from Products ---- */

  /* Page-local only. The system lives in css/prs.css. */
  .furnace--page { min-height: clamp(360px, 44svh, 520px); display: grid; align-items: center; }
.filterbar,
.woocommerce .woocommerce-ordering,
.woocommerce-widget-layered-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  /* .chip is 34px as a static spec badge, but as a control it must meet the
     44px house standard with 8px separation. */
  .filterbar button { background: transparent; min-height: 44px; padding: 0 16px; }
  .filterbar [aria-pressed="true"] { background: #EE6A1E; border-color: #EE6A1E; color: #131316; }

.prod__meta,
.woocommerce ul.products li.product .prs-ship-note { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 20px; }
.prod__price,
.woocommerce ul.products li.product .price { font-family: 'Archivo', Arial, sans-serif; font-size: 20px; font-weight: 700; }

/* ---- migrated from Single Product ---- */

.pdp-head,
.woocommerce div.product .summary { padding-top: clamp(28px,4vw,48px); }
.variant-note,
.woocommerce div.product .woocommerce-variation-description { background: #282A2F; border-left: 3px solid #EE6A1E; padding: 16px 20px; }

/* ---- migrated from Cart ---- */

.statebox,
.woocommerce .cart-empty,
.woocommerce-info { border: 1px dashed #787C84; border-radius: 4px; padding: 20px;
    display: flex; flex-direction: column; gap: 16px; }
  .statebox__tag { align-self: flex-start; font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #C9D1DB;
    border: 1px solid #787C84; border-radius: 2px; padding: 4px 8px; }
  .statecard { background: #1D1E22; border: 1px solid rgba(201,209,219,0.22); border-radius: 4px;
    padding: 24px; display: flex; flex-direction: column; gap: 14px; }
  .statecard__tag { align-self: flex-start; font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #C9D1DB;
    border: 1px solid #787C84; border-radius: 2px; padding: 4px 8px; }
  select.field__control { appearance: none; background-image:
    linear-gradient(45deg, transparent 50%, #C9D1DB 50%),
    linear-gradient(135deg, #C9D1DB 50%, transparent 50%);
    background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
    background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.formcard,
.gform_wrapper,
.gform_wrapper .gform_body { background: #1D1E22; border: 1px solid rgba(201,209,219,0.22); border-radius: 4px;
    padding: clamp(24px,4vw,44px); display: flex; flex-direction: column; gap: 28px; }
.fieldrow,
.gform_wrapper .gfield { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .checkgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; }
.stepnote,
.gform_wrapper .gf_progressbar_wrapper { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px;
    letter-spacing: 0.08em; text-transform: uppercase; color: #C9D1DB;
    border: 1px solid #787C84; border-radius: 2px; padding: 4px 8px; align-self: flex-start; }
  @media (max-width: 767px) { .fieldrow, .checkgrid { grid-template-columns: 1fr; } }

/* ---- migrated from Quote Received ---- */

/* Removed: the old .mockup-note annotation styling, left behind on .variant-note
   when the annotations were renamed. It was overriding the ember callout and,
   via the paired Woo selector, would have rendered every live
   .woocommerce-variation-description as an 11px uppercase monospace chip.
   .mockup-note carries this styling for the elements that actually want it. */
  .confirm { max-width: 76ch; display: flex; flex-direction: column; gap: 20px; }
  .nextlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0; }
  .nextlist li { display: flex; gap: 18px; padding: 18px 0;
    border-top: 1px solid rgba(201,209,219,0.22); }
  .nextlist li:last-child { border-bottom: 1px solid rgba(201,209,219,0.22); }
  .nextnum { flex: 0 0 auto; width: 34px; font-family: 'Archivo', Arial, sans-serif;
    font-size: 20px; font-weight: 700; line-height: 1.3; color: #FF7F35; }
  .refbar { background: #2A1416; border-bottom: 1px solid #FF6B6B; }

/* .acc-icon was styled only by injected JavaScript, which is the same
   problem in a different disguise: a class with no stylesheet home. */
.acc-icon { flex: 0 0 auto; width: 24px; height: 24px; color: #FFB166;
  transition: transform 180ms cubic-bezier(0.2,0,0.2,1); }

/* ============================================================
   SECTION C — STYLING TARGETS, NOT STANDALONE COMPONENTS
   ------------------------------------------------------------
   The rules below style markup that Divi, Woo or Gravity Forms
   emits. The mockup hand-builds equivalent markup so the design
   can be seen; in the build, RE-POINT each selector at the real
   emitted class. BUILD-SHEET.md carries the mapping tables.

     .hdr, .mainnav, .drawer-*  -> divi/menu, .et_mobile_menu
     .acc__*                    -> divi/accordion
     .tabs__*                   -> divi/woocommerce-tabs
     .cartrow, .cart-summary    -> divi/woocommerce-cart-*
     .field__*, .formcard       -> Gravity Forms .gfield etc.

   .skip and .vh are real child-theme CSS: WordPress provides
   neither a skip link nor a visually-hidden class by default.
   ============================================================ */

/* ============================================================
   DRAWER TOGGLE — ONE control, not two
   Only <summary> toggles <details> without JS, so a close button
   inside the panel would be JS-dependent by construction: with
   site.js absent the drawer would open and never close. The
   summary therefore renders the hamburger at rest and the X when
   open, swapped in CSS. Same position in both states, works with
   the stylesheet alone, and focus is already on it at close time
   so focus-return needs no special handling.
   ============================================================ */
.drawer-toggle { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto; padding: 0;
  background: transparent; border: 0; border-radius: 0;
  color: #C9D1DB; cursor: pointer; list-style: none;
  /* Must outrank the panel so it stays clickable while the drawer is open. */
  position: relative; z-index: 210;
  transition: color 120ms cubic-bezier(0.2,0,0.2,1); }
.drawer-toggle::-webkit-details-marker { display: none; }
.drawer-toggle::marker { content: ""; }
.drawer-toggle:hover { color: #FFFFFF; }
.drawer-toggle .icon-x { display: none; }
details[open] > .drawer-toggle .icon-burger { display: none; }
details[open] > .drawer-toggle .icon-x { display: block; }
/* Panel sits below the toggle, above everything else. */
.drawer-panel { position: fixed; inset: 0; z-index: 200; padding-top: 76px;
  height: 100dvh; max-height: 100dvh; }
@media (prefers-reduced-motion: reduce) { .drawer-toggle { transition: none; } }

/* ============================================================
   DRAWER VISIBILITY — driven by [open], never by a JS class.
   If visibility depended on script, then with scripts blocked the
   panel would render permanently over the page. Native <details>
   hides its children when closed, but the panel is position:fixed,
   so this is made explicit rather than relied upon.
   ============================================================ */
.hdr-drawer:not([open]) .drawer-panel { display: none; }
.hdr-drawer[open] .drawer-panel { display: flex; }

/* ============================================================
   BUTTON LABELS ON FILLS — never white, never the link token.
   Step 2: white on #EE6A1E is 3.13:1 and on #FF7F35 is 2.52:1,
   both failing outright. Every label on an ember or accent fill
   is near-black #131316: 5.93:1 at rest, 7.37:1 on hover, so
   contrast IMPROVES on hover rather than degrading.
   The generic a:hover link rule was reaching a.btn and repainting
   the label with the link token. Scoped out here as well as in
   the page blocks, so it cannot come back through either route.
   ============================================================ */
a.btn-primary, a.btn-primary:hover, a.btn-primary:active,
a.btn-primary:focus, a.btn-primary:focus-visible,
button.btn-primary, button.btn-primary:hover { color: #131316; }
a.btn-primary:hover, button.btn-primary:hover { background: #FF7F35; }
/* Ghost: border and text move within silver and accent on the dark ground.
   Never becomes a fill with a light label. */
a.btn-ghost, button.btn-ghost { color: #C9D1DB; background: transparent; }
a.btn-ghost:hover, a.btn-ghost:focus-visible,
button.btn-ghost:hover, button.btn-ghost:focus-visible {
  color: #FFB166; border-color: #FFB166; background: transparent; }

/* ============================================================
   MOCKUP ANNOTATIONS — NEVER SHIP
   Build notes that were living in the component namespace:
   the confirmation-variant tags on Quote Received, the Path A /
   Path B tags on Cart, the step note on Request a Quote. Same
   treatment as the Form Component reference sheet: delete these
   elements when building in Divi. .variant-note stays a real
   component (the ember callout on Single Product).
   ============================================================ */
.mockup-note { align-self: flex-start; display: inline-block;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: #C9D1DB;
  border: 1px solid #787C84; border-radius: 2px; padding: 4px 8px; }

/* STANDING RULE: control borders are never semi-transparent.
   The composite depends on the ground, so it cannot be verified once and
   reused. rgba(201,209,219,0.4) computes to 2.90 / 2.88 / 2.75 / 2.84:1
   against background / surface / surface-alt / dark band: FAIL on all four.
   Solid #787C84 gives 4.43 / 3.98 / 3.43 / 4.70:1: PASS on all four.
   Solid tokens only for anything a user must perceive as a control boundary. */

/* Products filter chips were computing a black border: a .chip variant declared
   border-width without a colour, so it fell back to currentColor. Token made
   explicit, per the standing rule on solid control borders. */
.chip, button.chip { border: 1px solid #787C84; }

/* ============================================================
   HOMEPAGE — converted from inline style attributes
   u-* are shared utilities reused across pages; hp-* are
   homepage-scoped compositions. Nothing here uses !important.
   ============================================================ */
.hp-01 { background:#0B0B0D;color:#F4F3F1;font-family:'IBM Plex Sans',Arial,sans-serif;font-size:17px;line-height:1.65; }
.hp-02 { flex:0 0 auto; }
.hp-03 { display:flex;align-items:center;gap:8px;flex:0 0 auto; }
.hp-04 { min-height:48px;padding:0 20px;font-size:15px;white-space:nowrap; }
.hp-05 { display:flex;flex-direction:column;gap:24px;padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px); }
.hp-06 { display:flex;flex-direction:column;gap:24px;max-width:min(56%,720px); }
.hp-07 { display:flex;flex-direction:column;gap:14px; }
.u-rule-w { width:120px; }
.hp-08 { width:min(300px,80%); }
.hp-09 { display:flex;flex-wrap:wrap;gap:16px;max-width:min(56%,720px); }
.band--deep { background:#0B0B0D;border-top:1px solid rgba(201,209,219,0.22); }
.hp-10 { left:-6%;top:-40%;width:44%;height:180%; }
.u-layer { position:relative;z-index:1; }
.hp-11 { padding:clamp(40px,5vw,64px) 32px clamp(40px,5vw,64px) 0;display:flex;flex-direction:column;gap:14px; }
.u-accent { color:#FFB166; }
.hp-12 { padding:clamp(40px,5vw,64px) 32px;display:flex;flex-direction:column;gap:14px; }
.hp-13 { padding:clamp(40px,5vw,64px) 0 clamp(40px,5vw,64px) 32px;display:flex;flex-direction:column;gap:14px; }
.hp-14 { right:-10%;top:-30%;width:46%;height:150%; }
.bandbody { position:relative;z-index:1;display:flex;flex-direction:column;gap:40px; }
.hp-15 { display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between; }
.hp-16 { display:flex;flex-direction:column;gap:14px;max-width:60ch; }
.hp-17 { display:flex;flex-direction:column;background:#1D1E22;border:1px solid rgba(201,209,219,0.22);border-radius:4px;overflow:hidden;text-decoration:none;color:#F4F3F1; }
.u-block { display:block; }
.catcard__img { width:100%;height:132px;object-fit:cover; }
.hp-18 { padding:14px 16px 16px;font-family:'Archivo',Arial,sans-serif;font-size:15px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase; }
.u-divide-t { border-top:1px solid rgba(201,209,219,0.22); }
.hp-19 { top:38%;height:56%; }
.hp-20 { display:flex;flex-direction:column;gap:clamp(40px,5vw,72px); }
.hp-21 { display:flex;flex-direction:column;gap:14px;max-width:min(62%,780px); }
.zig__img { width:100%;height:100%;min-height:360px;object-fit:cover; }
.u-stack-16 { display:flex;flex-direction:column;gap:16px; }
.u-row-wrap-8 { display:flex;flex-wrap:wrap;gap:8px; }
.hp-22 { left:34%;top:-20%;width:46%;height:140%; }
.sectionhead { display:flex;flex-direction:column;gap:14px;max-width:68ch; }
.hp-23 { gap:2px;border:1px solid rgba(201,209,219,0.22);border-radius:4px;overflow:hidden; }
.u-fig { margin:0;position:relative; }
.ba__img { width:100%;height:min(52vh,440px);object-fit:cover; }
.hp-24 { position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:rgba(11,11,13,0.88);color:#C9D1DB;font-family:'Archivo',Arial,sans-serif;font-size:13px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase; }
.hp-25 { position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:#EE6A1E;color:#131316;font-family:'Archivo',Arial,sans-serif;font-size:13px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase; }
.hp-26 { align-self:flex-start; }
.hp-27 { right:-10%;bottom:-30%;width:50%;height:120%; }
.hp-28 { padding-top:28px; }
.hp-29 { display:flex;flex-wrap:wrap;gap:16px;align-items:center; }
.hp-30 { background:#1D1E22;border-top:1px solid rgba(201,209,219,0.22);border-bottom:1px solid rgba(201,209,219,0.22); }
.hp-31 { left:-12%;top:-30%;width:46%;height:140%; }
.hp-32 { margin:0;padding:0;list-style:none; }
.u-stack-8 { display:flex;flex-direction:column;gap:8px; }
.u-measure { max-width:66ch; }
.hp-33 { left:20%;top:-40%;width:44%;height:170%; }
.hp-34 { margin:0;background:#1D1E22;border-left:3px solid #EE6A1E;padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;gap:24px;max-width:80ch; }
.hp-35 { margin:0;font-size:clamp(1.125rem,2vw,26px);line-height:1.45;max-width:52ch; }
.hp-36 { font-family:'Archivo',Arial,sans-serif;font-weight:600;font-size:15px;letter-spacing:0.04em;text-transform:uppercase;color:#C9D1DB; }
.hp-37 { top:44%;height:52%; }
.hp-38 { display:flex;flex-direction:column;gap:20px;max-width:min(58%,760px); }
.hp-39 { font-size:clamp(2.25rem,6vw,88px);max-width:18ch; }
.hp-40 { width:min(420px,100%); }
.hp-41 { right:-8%;top:-20%;width:42%;height:130%; }
.hp-42 { border-top:1px solid rgba(201,209,219,0.22);max-width:80ch; }
.u-divide-b { border-bottom:1px solid rgba(201,209,219,0.22); }
.hp-43 { display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:16px 0;font-family:'Archivo',Arial,sans-serif;font-size:clamp(1.125rem,1.8vw,24px);font-weight:600;line-height:1.25;cursor:pointer;list-style:none; }
.hp-44 { flex:0 0 auto;transition:transform 180ms cubic-bezier(0.2,0,0.2,1); }
.u-pb-24 { padding:0 0 24px; }
.hp-45 { left:32%;bottom:-70%;width:46%;height:160%; }
.hp-46 { position:relative;z-index:1;display:flex;flex-direction:column;gap:20px;align-items:flex-start; }
.hp-47 { width:min(560px,100%); }
.hp-48 { max-width:26ch;font-size:clamp(2rem,4.4vw,60px); }
.hp-49 { max-width:56ch; }
.hp-50 { display:flex;flex-wrap:wrap;gap:16px;margin-top:8px; }
.hp-51 { padding-top:clamp(48px,6vw,80px);padding-bottom:48px;display:flex;flex-direction:column;gap:48px; }
.hp-52 { max-width:40ch; }
.hp-53 { font-style:normal;display:flex;flex-direction:column;gap:8px;font-size:17px;line-height:1.65; }
.hp-54 { color:#ABB0B8; }
.hp-55 { text-decoration:underline;text-underline-offset:3px; }
.u-colhead { color:#F4F3F1;margin-bottom:8px; }
.hp-56 { border-top:1px solid rgba(201,209,219,0.22);padding-top:24px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center; }
.hp-57 { color:#C9D1DB; }

/* Shared utilities reused across pages */
.u-stack-14 { display: flex; flex-direction: column; gap: 14px; }
.u-stack-20 { display: flex; flex-direction: column; gap: 20px; }
.u-stack-24 { display: flex; flex-direction: column; gap: 24px; }
.u-stack-12 { display: flex; flex-direction: column; gap: 12px; }
.u-row-wrap-16 { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---- Products: converted from inline styles ---- */
.pr-01 { flex:0 0 auto; }
.pr-02 { display:flex;align-items:center;gap:8px;flex:0 0 auto; }
.pr-03 { min-height:48px;padding:0 20px;font-size:15px;white-space:nowrap; }
.pr-04 { color:#EE6A1E; }
.pr-05 { padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px); }
.pr-06 { display:flex;flex-direction:column;gap:18px;max-width:min(58%,760px); }
.pr-07 { font-size:15px;color:#ABB0B8; }
.pr-08 { display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0; }
.pr-09 { color:#ABB0B8;text-decoration:underline;text-underline-offset:3px; }
.pr-10 { color:#787C84; }
.pr-11 { color:#F4F3F1; }
.pr-12 { font-size:clamp(2.25rem,5.6vw,76px); }
.pr-13 { right:-10%;top:-24%;width:46%;height:150%; }
.pr-14 { position:relative;z-index:1;display:flex;flex-direction:column;gap:32px; }
.pr-15 { display:flex;flex-wrap:wrap;gap:8px;align-items:center;list-style:none;padding:0;margin:0; }
.pr-16 { display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border:1px solid #26272B;border-radius:2px;color:#71767E;font-family:'Archivo',Arial,sans-serif;font-weight:600;font-size:15px; }
.pr-17 { display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;background:#EE6A1E;border:1px solid #EE6A1E;border-radius:2px;color:#131316;font-family:'Archivo',Arial,sans-serif;font-weight:600;font-size:15px;text-decoration:none; }
.pr-18 { display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border:1px solid #787C84;border-radius:2px;color:#F4F3F1;font-family:'Archivo',Arial,sans-serif;font-weight:600;font-size:15px;text-decoration:none; }
.pr-19 { display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:#ABB0B8; }
.pr-20 { background:#1D1E22;border-top:1px solid rgba(201,209,219,0.22);border-bottom:1px solid rgba(201,209,219,0.22); }
.pr-21 { left:-10%;top:-30%;width:44%;height:150%; }
.pr-22 { display:flex;flex-wrap:wrap;gap:16px;margin-top:8px; }
.pr-23 { gap:20px; }
.pr-24 { right:-8%;bottom:-30%;width:44%;height:130%; }
.pr-25 { display:flex;flex-direction:column;gap:10px;padding:24px;background:#1D1E22;border:1px solid rgba(201,209,219,0.22);border-radius:4px; }
.pr-26 { align-self:flex-start; }
.pr-27 { left:30%;bottom:-70%;width:46%;height:160%; }
.pr-28 { position:relative;z-index:1;display:flex;flex-direction:column;gap:20px;align-items:flex-start; }
.pr-29 { width:min(560px,100%); }
.pr-30 { max-width:26ch;font-size:clamp(2rem,4.4vw,60px); }
.pr-31 { max-width:56ch; }
.pr-32 { padding-top:clamp(48px,6vw,80px);padding-bottom:48px;display:flex;flex-direction:column;gap:48px; }
.pr-33 { max-width:40ch; }
.pr-34 { font-style:normal;display:flex;flex-direction:column;gap:8px;font-size:17px;line-height:1.65; }
.pr-35 { color:#ABB0B8; }
.pr-36 { text-decoration:underline;text-underline-offset:3px; }
.pr-37 { border-top:1px solid rgba(201,209,219,0.22);padding-top:24px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center; }
.pr-38 { color:#C9D1DB; }

/* ---- Single Product: converted from inline styles ---- */
.sp-01 { flex:0 0 auto; }
.sp-02 { display:flex;align-items:center;gap:8px;flex:0 0 auto; }
.sp-03 { min-height:48px;padding:0 20px;font-size:15px;white-space:nowrap; }
.sp-04 { right:-8%;top:-30%;width:40%;height:150%; }
.sp-05 { position:relative;z-index:1;display:flex;flex-direction:column;gap:24px;padding-bottom:clamp(48px,6vw,80px); }
.sp-06 { font-size:15px;color:#ABB0B8; }
.sp-07 { display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0; }
.sp-08 { color:#ABB0B8;text-decoration:underline;text-underline-offset:3px; }
.sp-09 { color:#787C84; }
.sp-10 { color:#F4F3F1; }
.sp-11 { aspect-ratio:4/3;border-radius:120px 120px 4px 4px; }
.sp-12 { display:flex;flex-direction:column;gap:10px; }
.sp-13 { font-size:clamp(1.75rem,2.8vw,36px); }
.sp-14 { display:flex;flex-direction:column;gap:4px; }
.sp-15 { margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:10px; }
.sp-16 { padding:0; }
.sp-17 { min-height:44px; }
.sp-18 { flex:1 1 200px; }
.sp-19 { display:flex;flex-direction:column; }
.sp-20 { font-family:'Archivo',Arial,sans-serif;font-weight:600;font-size:15px; }
.sp-21 { background:#1D1E22;border-top:1px solid rgba(201,209,219,0.22);border-bottom:1px solid rgba(201,209,219,0.22); }
.sp-22 { left:-10%;top:-20%;width:40%;height:140%; }
.sp-23 { position:relative;z-index:1;display:flex;flex-direction:column;gap:24px; }
.sp-24 { display:flex;flex-direction:column;gap:12px;max-width:68ch; }
.sp-25 { max-width:520px; }
.sp-26 { font-size:clamp(1.5rem,2.4vw,30px); }
.sp-27 { margin:0;font-family:'Archivo',Arial,sans-serif;font-weight:600;font-size:16px;color:#F4F3F1; }
.sp-28 { margin:6px 0 0;font-size:15px; }
.sp-29 { margin-top:8px; }
.sp-30 { padding-left:20px;display:flex;flex-direction:column;gap:8px; }
.sp-31 { border-radius:120px 120px 4px 4px; }
.sp-32 { right:-10%;top:-20%;width:44%;height:140%; }
.sp-33 { position:relative;z-index:1;display:flex;flex-direction:column;gap:32px; }
.sp-34 { left:30%;bottom:-70%;width:46%;height:160%; }
.sp-35 { position:relative;z-index:1;display:flex;flex-direction:column;gap:20px;align-items:flex-start; }
.sp-36 { width:min(560px,100%); }
.sp-37 { max-width:26ch;font-size:clamp(2rem,4.4vw,60px); }
.sp-38 { max-width:56ch; }
.sp-39 { display:flex;flex-wrap:wrap;gap:16px;margin-top:8px; }
.sp-40 { padding-top:clamp(48px,6vw,80px);padding-bottom:48px;display:flex;flex-direction:column;gap:48px; }
.sp-41 { max-width:40ch; }
.sp-42 { font-style:normal;display:flex;flex-direction:column;gap:8px;font-size:17px;line-height:1.65; }
.sp-43 { color:#ABB0B8; }
.sp-44 { text-decoration:underline;text-underline-offset:3px; }
.sp-45 { border-top:1px solid rgba(201,209,219,0.22);padding-top:24px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center; }
.sp-46 { color:#C9D1DB; }

/* ---- Cart: converted from inline styles ---- */
.ct-01 { flex:0 0 auto; }
.ct-02 { display:flex;align-items:center;gap:8px;flex:0 0 auto; }
.ct-03 { min-height:48px;padding:0 20px;font-size:15px;white-space:nowrap; }
.ct-04 { padding-top:clamp(28px,4vw,48px); }
.ct-05 { right:-8%;top:-40%;width:38%;height:160%; }
.ct-06 { position:relative;z-index:1;display:flex;flex-direction:column;gap:28px;padding-bottom:clamp(48px,6vw,80px); }
.ct-07 { font-size:15px;color:#ABB0B8; }
.ct-08 { display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0; }
.ct-09 { color:#ABB0B8;text-decoration:underline;text-underline-offset:3px; }
.ct-10 { color:#787C84; }
.ct-11 { color:#F4F3F1; }
.ct-12 { font-size:clamp(2rem,4vw,52px); }
.ct-13 { border-top:0; }
.ct-14 { display:flex;flex-wrap:wrap;gap:16px;padding-top:24px;border-top:1px solid rgba(201,209,219,0.22); }
.ct-15 { color:#C9D1DB; }
.ct-16 { margin-top:-4px; }
.ct-17 { margin:0; }
.ct-18 { background:#1D1E22;border-top:1px solid rgba(201,209,219,0.22);border-bottom:1px solid rgba(201,209,219,0.22); }
.ct-19 { left:-8%;top:-20%;width:40%;height:140%; }
.ct-20 { position:relative;z-index:1;display:flex;flex-direction:column;gap:28px; }
.ct-21 { display:flex;flex-direction:column;gap:12px;max-width:68ch; }
.ct-22 { background:#131316;border:1px solid rgba(201,209,219,0.22);border-radius:4px;padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;gap:20px;align-items:flex-start;max-width:76ch; }
.ct-23 { width:120px;height:76px; }
.ct-24 { left:30%;bottom:-70%;width:46%;height:160%; }
.ct-25 { position:relative;z-index:1;display:flex;flex-direction:column;gap:20px;align-items:flex-start; }
.ct-26 { width:min(560px,100%); }
.ct-27 { max-width:26ch;font-size:clamp(2rem,4.4vw,60px); }
.ct-28 { max-width:56ch; }
.ct-29 { display:flex;flex-wrap:wrap;gap:16px;margin-top:8px; }
.ct-30 { padding-top:clamp(48px,6vw,80px);padding-bottom:48px;display:flex;flex-direction:column;gap:48px; }
.ct-31 { max-width:40ch; }
.ct-32 { font-style:normal;display:flex;flex-direction:column;gap:8px;font-size:17px;line-height:1.65; }
.ct-33 { color:#ABB0B8; }
.ct-34 { text-decoration:underline;text-underline-offset:3px; }
.ct-35 { border-top:1px solid rgba(201,209,219,0.22);padding-top:24px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center; }

/* ---- Contact: converted from inline styles ---- */
.cn-01 { flex:0 0 auto; }
.cn-02 { display:flex;align-items:center;gap:8px;flex:0 0 auto; }
.cn-03 { min-height:48px;padding:0 20px;font-size:15px;white-space:nowrap; }
.cn-04 { color:#EE6A1E; }
.cn-05 { padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px); }
.cn-06 { display:flex;flex-direction:column;gap:16px;max-width:min(58%,760px); }
.cn-07 { font-size:15px;color:#ABB0B8; }
.cn-08 { display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0; }
.cn-09 { color:#ABB0B8;text-decoration:underline;text-underline-offset:3px; }
.cn-10 { color:#787C84; }
.cn-11 { color:#F4F3F1; }
.cn-12 { font-size:clamp(2.25rem,5.2vw,68px); }
.cn-13 { right:-10%;top:-20%;width:42%;height:140%; }
.cn-14 { text-decoration:underline;text-underline-offset:3px; }
.cn-15 { align-self:flex-start; }
.cn-16 { max-width:56ch; }
.cn-17 { gap:20px; }
.cn-18 { display:flex;flex-direction:column;gap:6px; }
.cn-19 { font-family:'Archivo',Arial,sans-serif;font-size:24px;font-weight:700;text-decoration:none;color:#F4F3F1; }
.cn-20 { font-size:17px;text-decoration:underline;text-underline-offset:3px; }
.cn-21 { font-style:normal;font-size:17px;line-height:1.6;color:#ABB0B8; }
.cn-22 { font-size:16px; }
.cn-23 { left:30%;bottom:-70%;width:46%;height:160%; }
.cn-24 { position:relative;z-index:1;display:flex;flex-direction:column;gap:20px;align-items:flex-start; }
.cn-25 { width:min(560px,100%); }
.cn-26 { max-width:26ch;font-size:clamp(2rem,4.4vw,60px); }
.cn-27 { display:flex;flex-wrap:wrap;gap:16px;margin-top:8px; }
.cn-28 { padding-top:clamp(48px,6vw,80px);padding-bottom:48px;display:flex;flex-direction:column;gap:48px; }
.cn-29 { max-width:40ch; }
.cn-30 { font-style:normal;display:flex;flex-direction:column;gap:8px;font-size:17px;line-height:1.65; }
.cn-31 { color:#ABB0B8; }
.cn-32 { border-top:1px solid rgba(201,209,219,0.22);padding-top:24px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center; }
.cn-33 { color:#C9D1DB; }

/* ---- Request a Quote: converted from inline styles ---- */
.rq-01 { flex:0 0 auto; }
.rq-02 { display:flex;align-items:center;gap:8px;flex:0 0 auto; }
.rq-03 { min-height:48px;padding:0 20px;font-size:15px;white-space:nowrap; }
.rq-04 { padding-top:clamp(36px,5vw,64px);padding-bottom:clamp(36px,5vw,64px); }
.rq-05 { display:flex;flex-direction:column;gap:16px;max-width:min(58%,760px); }
.rq-06 { font-size:15px;color:#ABB0B8; }
.rq-07 { display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0; }
.rq-08 { color:#ABB0B8;text-decoration:underline;text-underline-offset:3px; }
.rq-09 { color:#787C84; }
.rq-10 { color:#F4F3F1; }
.rq-11 { font-size:clamp(2.25rem,5.2vw,68px); }
.rq-12 { right:-10%;top:-16%;width:40%;height:140%; }
.rq-13 { font-size:clamp(1.5rem,2.6vw,32px); }
.rq-14 { display:flex;flex-wrap:wrap;gap:16px;padding-top:8px;border-top:1px solid rgba(201,209,219,0.22); }
.rq-15 { gap:18px; }
.rq-16 { font-size:16px; }
.rq-17 { background:#1D1E22;border-top:1px solid rgba(201,209,219,0.22);border-bottom:1px solid rgba(201,209,219,0.22); }
.rq-18 { left:-10%;top:-16%;width:40%;height:140%; }
.rq-19 { position:relative;z-index:1;display:flex;flex-direction:column;gap:20px;max-width:920px; }
.rq-20 { background:#131316; }
.rq-21 { margin:0;padding:0;border:0; }
.rq-22 { padding:0;margin-bottom:12px; }
.rq-23 { display:flex;flex-direction:column;gap:4px; }
.rq-24 { margin-top:10px; }
.rq-25 { font-size:15px;margin:0; }
.rq-26 { text-decoration:underline;text-underline-offset:3px; }
.rq-27 { max-width:60ch; }
.rq-28 { left:30%;bottom:-70%;width:46%;height:160%; }
.rq-29 { position:relative;z-index:1;display:flex;flex-direction:column;gap:20px;align-items:flex-start; }
.rq-30 { width:min(560px,100%); }
.rq-31 { max-width:26ch;font-size:clamp(2rem,4.4vw,60px); }
.rq-32 { max-width:56ch; }
.rq-33 { display:flex;flex-wrap:wrap;gap:16px;margin-top:8px; }
.rq-34 { padding-top:clamp(48px,6vw,80px);padding-bottom:48px;display:flex;flex-direction:column;gap:48px; }
.rq-35 { max-width:40ch; }
.rq-36 { font-style:normal;display:flex;flex-direction:column;gap:8px;font-size:17px;line-height:1.65; }
.rq-37 { color:#ABB0B8; }
.rq-38 { border-top:1px solid rgba(201,209,219,0.22);padding-top:24px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center; }
.rq-39 { color:#C9D1DB; }

/* ---- Quote Received: converted from inline styles ---- */
.qr-01 { flex:0 0 auto; }
.qr-02 { display:flex;align-items:center;gap:8px;flex:0 0 auto; }
.qr-03 { min-height:48px;padding:0 20px;font-size:15px;white-space:nowrap; }
.qr-04 { right:-8%;top:-30%;width:40%;height:150%; }
.qr-05 { position:relative;z-index:1;display:flex;flex-direction:column;gap:32px; }
.qr-06 { margin:0;display:flex;align-items:center;gap:12px;font-family:'Archivo',Arial,sans-serif;font-weight:700;font-size:clamp(1.5rem,3vw,34px);color:#F4F3F1; }
.qr-07 { margin:0; }
.qr-08 { font-size:clamp(1.75rem,3.4vw,44px); }
.qr-09 { display:flex;flex-direction:column;gap:6px; }
.qr-10 { width:min(480px,100%); }
.qr-11 { background:#1D1E22;border-top:1px solid rgba(201,209,219,0.22);border-bottom:1px solid rgba(201,209,219,0.22); }
.qr-12 { left:-8%;top:-24%;width:42%;height:150%; }
.qr-13 { background:#2A1416;border:1px solid #FF6B6B;border-radius:2px;padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:14px; }
.qr-14 { max-width:60ch; }
.qr-15 { align-self:flex-start;min-height:60px;font-size:18px; }
.qr-16 { padding-left:20px;display:flex;flex-direction:column;gap:8px; }
.qr-17 { left:30%;bottom:-70%;width:46%;height:160%; }
.qr-18 { position:relative;z-index:1;display:flex;flex-direction:column;gap:20px;align-items:flex-start; }
.qr-19 { width:min(560px,100%); }
.qr-20 { max-width:26ch;font-size:clamp(2rem,4.4vw,60px); }
.qr-21 { max-width:56ch; }
.qr-22 { display:flex;flex-wrap:wrap;gap:16px;margin-top:8px; }
.qr-23 { padding-top:clamp(48px,6vw,80px);padding-bottom:48px;display:flex;flex-direction:column;gap:48px; }
.qr-24 { max-width:40ch; }
.qr-25 { font-style:normal;display:flex;flex-direction:column;gap:8px;font-size:17px;line-height:1.65; }
.qr-26 { color:#ABB0B8; }
.qr-27 { text-decoration:underline;text-underline-offset:3px; }
.qr-28 { border-top:1px solid rgba(201,209,219,0.22);padding-top:24px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center; }
.qr-29 { color:#C9D1DB; }

/* ---- Form Component: converted from inline styles ---- */
.fc-01 { padding-top:20px;padding-bottom:20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between; }
.fc-02 { margin:0;font-family:'Archivo',Arial,sans-serif;font-size:15px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:#F4F3F1; }
.fc-03 { margin:0; }
.fc-04 { background:#1D1E22;border-top:1px solid rgba(201,209,219,0.22);border-bottom:1px solid rgba(201,209,219,0.22); }
.fc-05 { left:-10%;top:-16%;width:42%;height:140%; }
.fc-06 { position:relative;z-index:1;display:flex;flex-direction:column;gap:32px; }
.fc-07 { display:flex;flex-direction:column;gap:12px;max-width:68ch; }
.fc-08 { border-color:#FFB166;outline:2px solid #FFB166;outline-offset:2px; }
.fc-09 { color:#71767E; }
.fc-10 { display:flex;flex-direction:column;gap:16px;max-width:76ch; }
.fc-11 { color:#FFB166;text-decoration:underline;text-underline-offset:3px; }
.fc-12 { font-size:15px; }
.fc-13 { text-decoration:underline;text-underline-offset:3px; }
.fc-14 { margin:0;font-size:15px;color:#F4F3F1; }
.fc-15 { display:flex;flex-direction:column;gap:10px; }
.fc-16 { margin:0;font-family:'Archivo',Arial,sans-serif;font-weight:600;font-size:20px;color:#F4F3F1; }
.fc-17 { padding-top:32px;padding-bottom:64px;display:flex;flex-direction:column;gap:12px; }

/* Footer intrinsic size, measured with content-visibility resolved: 662px at
   1280 and unchanged by width, because the footer grid reflows but its total
   height does not vary much. Set here rather than per page: the inline --cvh
   hook did not survive the sweep's attribute rewrite, and the footer is
   identical on every page. */
footer.cv { --cvh: 665px; }

/* ============================================================
   ABOUT PAGE
   Two FURNACE bands (hero + founding story), EMBER middle,
   FORGE close. Within the three-flame-field budget.
   ============================================================ */
.ab-root { background: #0B0B0D; color: #F4F3F1;
  font-family: 'IBM Plex Sans', Arial, sans-serif; font-size: 17px; line-height: 1.65; }
.prs-defs { position: absolute; }
.hdr-logo { flex: 0 0 auto; }
.hdr-cluster { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.ab-hero { display: flex; flex-direction: column; gap: 20px; max-width: min(58%, 760px); }
.ab-rule { width: min(360px, 90%); }
.ab-story { display: flex; flex-direction: column; gap: 18px; max-width: min(62%, 800px); }

/* Two-column text block: 3fr 2fr, collapsing on the Divi band boundary.
   Narrow track at 981 is 2/5 of (981 - 96 - 56) = 331px, clear of the 320px
   content minimum, so it holds across the whole desktop band. */
.ab-two { display: grid; grid-template-columns: 3fr 2fr; gap: clamp(24px, 4vw, 56px);
  align-items: start; }
.ab-aside { background: #1D1E22; border-left: 3px solid #EE6A1E; padding: 24px 28px;
  display: flex; flex-direction: column; gap: 14px; }
.ab-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }

.ab-team { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 4vw, 48px); }
/* Each owner is a two-column unit: portrait beside the name and bio, rather
   than a full-width square that dominated the band. */
.ab-person { display: grid; grid-template-columns: 152px 1fr;
  column-gap: 20px; row-gap: 8px; align-items: start; }
.ab-shot { grid-column: 1; grid-row: 1 / span 4;
  width: 152px; aspect-ratio: 1 / 1; max-width: none; }
.ab-person .mockup-note { grid-column: 1; grid-row: 5; }
.ab-role { color: #FFB166; }

.ab-callcta { justify-content: flex-start; align-self: start; }
.ab-forge { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.ab-forge-rule { width: min(560px, 100%); }
.ab-forge-h { max-width: 26ch; font-size: clamp(2rem, 4.4vw, 60px); }
.ab-forge-p { max-width: 56ch; }
.ab-forge-actions { margin-top: 8px; }

.ab-bloom-1 { left: -8%; top: -30%; width: 44%; height: 160%; }
.ab-bloom-2 { right: -10%; top: -24%; width: 46%; height: 150%; }
.ab-bloom-3 { left: 28%; top: -30%; width: 44%; height: 160%; }
.ab-bloom-4 { left: 30%; bottom: -70%; width: 46%; height: 160%; }

.ab-foot { padding-top: clamp(48px, 6vw, 80px); padding-bottom: 48px;
  display: flex; flex-direction: column; gap: 48px; }
.ab-foot-blurb { max-width: 40ch; }
.ab-address { font-style: normal; display: flex; flex-direction: column; gap: 8px;
  font-size: 17px; line-height: 1.65; }
.ab-address a { text-decoration: underline; text-underline-offset: 3px; }
.ab-addr-line { color: #ABB0B8; }
.ab-foot-base { border-top: 1px solid rgba(201,209,219,0.22); padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.ab-tagline { color: #C9D1DB; }

@media (max-width: 980px) {
  .ab-two, .ab-team { grid-template-columns: 1fr; }
  .ab-hero, .ab-story { max-width: 100%; }
}
@media (max-width: 767px) {
  .ab-person { grid-template-columns: 108px 1fr; column-gap: 16px; }
  .ab-shot { width: 108px; }
}

/* ============================================================
   FAQ ACCORDION — matches divi/accordion, not details/summary
   DESIGN CHANGE. The FAQ previously used <details>/<summary>,
   which meant a code module holding editable question and answer
   copy. Under the handoff standard no code module may contain
   editable content, so the FAQ is now divi/accordion: each item's
   title and body are native builder fields.
   Divi's accordion emits a button plus a region, so the mockup is
   built the same way. Cost, stated honestly: Divi's accordion is
   JS-driven, so unlike <details> it does not open without
   JavaScript. See "What is NOT a native module".
   ============================================================ */
.acc__item { border-bottom: 1px solid rgba(201,209,219,0.22); }
.acc__h { margin: 0; }
.acc__btn { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; width: 100%; min-height: 64px; padding: 16px 0;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  color: #F4F3F1; font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(1.125rem, 1.8vw, 24px); font-weight: 600; line-height: 1.25; }
.acc__btn:hover { color: #FFB166; }
.acc__btn .acc-icon { transition: transform 180ms cubic-bezier(0.2,0,0.2,1); }
.acc__btn[aria-expanded="true"] .acc-icon { transform: rotate(45deg); }
.acc__panel { padding: 0 0 24px; }
.acc__panel[hidden] { display: none; }

/* Accordion icon rotation, keyed to aria-expanded. The older
   details[open] > summary rule is gone: there is no <details> in the FAQ any
   more, and it was matching nothing while outranking nothing. */

/* Accordion icon rotation. Keyed to aria-expanded, NOT to
   details[open] > summary .acc-icon — the FAQ is button.acc__btn and the
   drawer summary uses .icon-burger / .icon-x, so that selector matched
   nothing. That is the root cause of the icon rotating without JS and not
   with it: the runtime-injected rule reached no element, while the CSS
   rule here did. Nothing about this needs injecting at runtime. */
[aria-expanded="true"] .acc-icon { transform: rotate(45deg); }
[aria-expanded="false"] .acc-icon { transform: none; }
@media (prefers-reduced-motion: reduce) {

  .acc__btn .acc-icon { transition: none; }
}

/* ============================================================
   SECTION D — REAL-MARKUP RULES WITH NO MOCKUP TWIN
   ------------------------------------------------------------
   Thirteen components have no standalone mockup class to extend:
   either the mockup renders them inside a parent rule, or the
   element only exists once Woo or Gravity Forms is present
   (pagination, breadcrumb, related products, GF file upload).
   They are declared here against the REAL selector so nothing in
   the mapping tables is left as a comment.
   ============================================================ */

/* shop archive grid */
.woocommerce ul.products {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin: 0; padding: 0; list-style: none; }
@media (max-width: 980px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .woocommerce ul.products { grid-template-columns: 1fr; } }

/* pagination */
.woocommerce nav.woocommerce-pagination ul { display: flex; gap: 8px; border: 0; margin: 32px 0 0; padding: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span.current {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 2px;
  border: 1px solid #787C84; background: #1D1E22; color: #C9D1DB;
  font-family: 'Archivo', Arial, sans-serif; font-size: 15px; font-weight: 600;
  text-decoration: none; }
.woocommerce nav.woocommerce-pagination ul li a:hover { border-color: #EE6A1E; color: #F4F3F1; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: #EE6A1E; border-color: #EE6A1E; color: #131316; }

/* single product title and price */
.woocommerce div.product .product_title {
  font-family: 'Archivo', Arial, sans-serif; font-size: clamp(1.75rem, 3.4vw, 44px);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; color: #F4F3F1; margin: 0; }
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: 'Archivo', Arial, sans-serif; font-size: 28px; font-weight: 700;
  color: #FFB166; margin: 0; }

/* gallery and thumbnails */
.woocommerce div.product div.images,
.woocommerce-product-gallery { background: #1D1E22; border: 1px solid rgba(201,209,219,0.22); border-radius: 4px; overflow: hidden; }
.woocommerce-product-gallery__image img { display: block; width: 100%; height: auto; }
.flex-control-thumbs { display: flex; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.flex-control-thumbs li { width: 72px; }
.flex-control-thumbs li img { border: 1px solid rgba(201,209,219,0.22); border-radius: 2px; cursor: pointer; }
.flex-control-thumbs li img.flex-active { border-color: #EE6A1E; }

/* related products and breadcrumb */
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
  font-family: 'Archivo', Arial, sans-serif; font-size: clamp(1.75rem, 3.4vw, 44px);
  font-weight: 700; letter-spacing: -0.015em; color: #F4F3F1; }
.woocommerce .woocommerce-breadcrumb {
  font-size: 14px; color: #ABB0B8; margin: 0 0 24px; }
.woocommerce .woocommerce-breadcrumb a { color: #FFB166; text-decoration: underline; text-underline-offset: 3px; }

/* GF checkbox and radio groups */
.gform_wrapper .gfield_checkbox,
.gform_wrapper .gfield_radio { display: grid; gap: 8px; margin: 0; padding: 0; }
/* GF 2.5 replaced ul/li with div.gchoice. Orbital implies 2.7+, so the
   pre-2.5 structure matched nothing — and this is the 10-checkbox interest
   group and the 3-radio urgency group, where 44px rows are a target-size
   requirement. CONFIRM the exact structure against the version System Status
   reports before final sign-off. */
.field__choice,
.gform_wrapper .gfield_checkbox .gchoice,
.gform_wrapper .gfield_radio .gchoice {
  display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; }
.gform_wrapper .gchoice input[type="checkbox"],
.gform_wrapper .gchoice input[type="radio"] {
  width: 22px; height: 22px; accent-color: #EE6A1E; flex: 0 0 auto; margin: 0; }
.gform_wrapper .gchoice label,
.gform_wrapper .gchoice .gform-field-label {
  margin: 0; font-size: 17px; line-height: 1.45; color: #F4F3F1; cursor: pointer; }

/* GF file upload */
.gform_wrapper .ginput_container_fileupload {
  border: 1px dashed #787C84; border-radius: 4px; background: #1D1E22; padding: 24px; }
.gform_wrapper .ginput_container_fileupload input[type="file"] { color: #C9D1DB; font-size: 15px; }

/* GF validation summary */
.gform_wrapper .gform_validation_errors {
  background: #2A1416; border: 1px solid #FF6B6B; border-left-width: 3px;
  border-radius: 4px; padding: 20px 24px; margin: 0 0 24px; }
.gform_wrapper .gform_validation_errors h2 {
  font-family: 'Archivo', Arial, sans-serif; font-size: 18px; font-weight: 600; color: #FF6B6B; margin: 0 0 8px; }
.gform_wrapper .gform_validation_errors ol { margin: 0; padding-left: 20px; }
.gform_wrapper .gform_validation_errors a { color: #FF6B6B; text-decoration: underline; text-underline-offset: 3px; }

/* GF footer and buttons */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 32px 0 0; padding: 0; }
.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  padding: 0 28px; border: 1px solid #EE6A1E; border-radius: 2px;
  background: #EE6A1E; color: #131316;
  font-family: 'Archivo', Arial, sans-serif; font-size: 16px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 10px 30px rgba(238,106,30,0.38); }
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_next_button:hover { background: #FF7F35; border-color: #FF7F35; }
.gform_wrapper .gform_previous_button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  padding: 0 28px; border: 1px solid rgba(201,209,219,0.5); border-radius: 2px;
  background: transparent; color: #C9D1DB;
  font-family: 'Archivo', Arial, sans-serif; font-size: 16px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.gform_wrapper .gform_previous_button:hover { border-color: #C9D1DB; color: #FFFFFF; }

/* GF adds .gfield_error to the field wrapper on validation failure. Without
   these an invalid field on the live form gets no red border: the mockup's
   .field__control--error had no real twin. */
.field__control--error,
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
  border-color: #FF6B6B !important; }
.fieldrow--error,
.gform_wrapper .gfield.gfield_error {
  background: #2A1416; border-left: 3px solid #FF6B6B; padding-left: 16px; }
.gform_wrapper .gfield_error .gfield_label { color: #FF6B6B; }

/* structural position utilities, replacing the last inline style attributes */
.u-abs { position: absolute; }
.u-static { position: static; }

/* Card title links measured 20px tall — below our 44px standard and below the
   24px floor in WCAG 2.5.8. The text stays the same size; the LINK grows to a
   44px target around it. Applied to both worlds. */
.prod__title a,
.cartrow__name a,
.woocommerce table.shop_table.cart td.product-name a,
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
  display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.prod__title a:hover,
.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover {
  color: #FFB166; }

/* WCAG 2.5.8 Inline exception: a target inside a sentence, or one whose size
   is constrained by the line-height of surrounding non-target text, is EXEMT
   from the minimum target size. .cn-14 and .rq-26 sit mid-sentence in the
   reCAPTCHA disclosure and the consent checkbox label. Giving them
   inline-flex + min-height:44px made each an atomic inline box that cannot
   wrap, and a 44px box in a ~28px line box disturbed the surrounding leading.
   They are plain inline links, underlined, and that is correct. */
.cn-14, .rq-26 { text-decoration: underline; text-underline-offset: 3px; }
.cn-14:hover, .rq-26:hover { text-decoration-thickness: 2px; }
/* Standalone links in <address> are NOT in a sentence, so they do take a
   44px target. Split out of .cn-14 / .rq-26, which served both contexts. */
.footlink { display: flex; align-items: center; min-height: 44px;
  text-decoration: underline; text-underline-offset: 3px; }
.cn-19, .cn-20 { display: flex; align-items: center; min-height: 44px; }


/* Standalone links in <address> blocks are not in a sentence, so the Inline
   exception does not apply and they take a full 44px target. Global rather than
   per-page: the footer address appears on all eight pages, and a per-page class
   let the mockups and the delivered pages diverge. */
address a, .footlink {
  display: flex; align-items: center; min-height: 44px;
  text-decoration: underline; text-underline-offset: 3px; }
/* Breadcrumb links measured 19px. */
/* Breadcrumb links are 19px. Targeted structurally via the nav's aria-label
   rather than a per-page class, so it holds on every page and cannot drift. */
nav[aria-label="Breadcrumb"] a,
.crumb a, .breadcrumb a, .woocommerce .woocommerce-breadcrumb a {
  display: inline-flex; align-items: center; min-height: 44px; }
/* Checkbox and radio inputs are 22-24px by design — WCAG 2.5.8 asks 24x24 and
   they meet it. The 44px requirement is met by the ROW, which is the label and
   is clickable. Do not enlarge the box itself; it looks wrong at 44px. */
.field__choice, .gform_wrapper .gchoice { min-height: 44px; }

/* ============================================================
   PRS x DIVI 5 BRIDGE  --  structural glue only.
   Maps Divi's section / row / column DOM onto the flex and grid
   layouts that prs-styles.css was written against.
   Contains NO editable content. Safe to replace wholesale.
   ============================================================ */

/* ---------------- HEADER ---------------- */
.et_pb_section.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,11,13,0.97);
  border-bottom: 1px solid rgba(201,209,219,0.22);
  padding: 0 !important; }

.et_pb_section.hdr .et_pb_row.hdr-bar {
  width: 100%; max-width: 1440px; margin: 0 auto;
  padding: 0 48px !important;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 120px; }

.hdr-bar > .et_pb_column { margin: 0 !important; padding: 0; }
.hdr-bar > .et_pb_column.hdr-col-logo,
.hdr-bar > .et_pb_column.hdr-col-act { flex: 0 0 auto; width: auto; }
.hdr-bar > .et_pb_column.hdr-col-nav {
  flex: 1 1 auto; width: auto; min-width: 0;
  display: flex; flex-direction: row !important;
  align-items: center; justify-content: center; }

.hdr-col-act { display: flex; flex-direction: row !important;
  align-items: center; justify-content: flex-end; gap: 8px; }
.hdr-col-act > .et_pb_module { flex: 0 0 auto; }
.hdr-col-act .et_pb_module { margin-bottom: 0 !important; }
.prs-hdr-icons { display: flex; align-items: center; gap: 8px; }

.hdr-col-logo .et_pb_image { margin: 0 !important; }
.hdr-col-logo .et_pb_image .et_pb_image_wrap { display: block; }
.hdr-col-logo .et_pb_image img { height: 96px; width: 88px; display: block; }

/* Divi menu module -> design .mainnav */
.et_pb_menu.prs-mainnav { background: transparent !important; }
.et_pb_menu.prs-mainnav .et_pb_menu__wrap { justify-content: center; }
.et_pb_menu.prs-mainnav .et_pb_menu__menu > nav > ul {
  display: flex; align-items: center; }
.et_pb_menu.prs-mainnav .et_pb_menu__menu > nav > ul > li {
  margin: 0; padding: 0; }
.et_pb_menu.prs-mainnav .et_pb_menu__menu > nav > ul > li > a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  white-space: nowrap; opacity: 1;
  font-family: 'Archivo', Arial, sans-serif; font-size: 15px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  transition: color 180ms; }
.et_pb_menu.prs-mainnav .et_pb_menu__menu > nav > ul > li > a:hover {
  color: #F4F3F1; text-decoration: underline;
  text-underline-offset: 6px; text-decoration-thickness: 2px; }
.et_pb_menu.prs-mainnav .et_pb_menu__menu > nav > ul > li.current-menu-item > a {
  color: #F4F3F1; border-bottom: 2px solid #EE6A1E; }

/* Divi button -> design .btn.btn-primary.hp-04 (header quote button)
   NOTE: .quote-btn-wrap IS the <a> element, not a wrapper around one.
   Divi styles buttons through "body #page-container .et_pb_button", an
   ID-bearing selector, so these need !important to land. Measured, not assumed. */
a.et_pb_button.quote-btn-wrap,
a.et_pb_button.quote-btn-wrap:hover {
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 10px;
  min-height: 48px !important; padding: 0 20px !important;
  border-radius: 2px !important;
  border: 1px solid #EE6A1E !important;
  background: #EE6A1E !important; color: #131316 !important;
  font-family: 'Archivo', Arial, sans-serif !important;
  font-size: 15px !important; font-weight: 600 !important;
  letter-spacing: 0.06em !important; text-transform: uppercase !important;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(238,106,30,0.38) !important;
  transition: box-shadow 180ms cubic-bezier(0.2,0,0.2,1),
              background-color 120ms cubic-bezier(0.2,0,0.2,1),
              transform 120ms cubic-bezier(0.2,0,0.2,1); }
a.et_pb_button.quote-btn-wrap:hover {
  background: #FF7F35 !important; border-color: #FF7F35 !important;
  box-shadow: 0 16px 48px rgba(255,127,53,0.56) !important;
  transform: translateY(-1px); }
a.et_pb_button.quote-btn-wrap::after,
a.et_pb_button.quote-btn-wrap::before {
  display: none !important; content: none !important; }

/* ---------------- BODY AREA ---------------- */
.et_pb_section.prs-body-area { padding: 0 !important; }
.et_pb_section.prs-body-area .et_pb_row.prs-body-row {
  width: 100%; max-width: none; margin: 0; padding: 0 !important; }
.prs-body-row > .et_pb_column.prs-body-col {
  width: 100%; margin: 0 !important; padding: 0; }
.prs-body-col .et_pb_post_content { margin: 0; }

/* ---------------- FOOTER ---------------- */
.et_pb_section.prs-footer {
  padding-top: clamp(48px,6vw,80px) !important;
  padding-bottom: 48px !important; }

.et_pb_section.prs-footer .et_pb_row.prs-footrow {
  width: 100%; max-width: 1440px; margin: 0 auto 48px;
  padding: 0 48px !important;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.prs-footrow > .et_pb_column {
  width: auto !important; margin: 0 !important; padding: 0; }

.et_pb_section.prs-footer .et_pb_row.hp-56 {
  width: 100%; max-width: 1440px; margin: 0 auto;
  padding: 24px 48px 0 !important;
  border-top: 1px solid rgba(201,209,219,0.22);
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: space-between; align-items: center; }
.et_pb_section.prs-footer .et_pb_row.hp-56 > .et_pb_column {
  width: auto !important; margin: 0 !important; padding: 0;
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: space-between; align-items: center; flex: 1 1 auto; }

.prs-footer .et_pb_module { margin-bottom: 0 !important; }
.foot-col .et_pb_text { margin: 0 !important; }
.foot-brand .et_pb_image { margin: 0 0 16px !important; }
.foot-brand .et_pb_image img { width: 160px; height: 176px; display: block; }
/* the .u-stack-* classes sit on the COLUMN, so its children stack */
.prs-footer .et_pb_column.u-stack-16 { display: flex; flex-direction: column; gap: 16px; }
.prs-footer .et_pb_column.u-stack-8  { display: flex; flex-direction: column; gap: 8px; }
/* footer nav text modules emit bare <a> runs -> restack them */
.prs-footnav .et_pb_text_inner { display: flex; flex-direction: column; gap: 8px; }
.prs-footnav .et_pb_text_inner p { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.prs-footnav .et_pb_text_inner > a.flink { min-height: 44px; }
.prs-footer-legal .et_pb_text_inner { display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: space-between; align-items: center; width: 100%; }

/* Divi svg module -> design .icon-btn (call) */
.et_pb_svg.prs-call, .et_pb_module.prs-call { margin: 0 !important; }
.prs-call a.et_pb_svg_link {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  border: 1px solid #787C84; border-radius: 2px; background: transparent;
  color: #C9D1DB; text-decoration: none;
  transition: border-color 180ms, color 180ms; }
.prs-call a.et_pb_svg_link { color: #C9D1DB !important; display: inline-flex !important; }
.prs-call a.et_pb_svg_link:hover { border-color: #C9D1DB; color: #FFFFFF !important; }
.prs-call svg { width: 20px; height: 20px; display: block; }
.prs-cart { margin: 0 !important; }
.prs-cart .cart { display: flex; }

/* Divi mobile menu -> design .drawer-panel / .drawer-nav */
.prs-mainnav .et_pb_menu__mobile-bottom { position: static; }
.prs-mainnav .mobile_menu_bar:before { color: #C9D1DB; }
.prs-mainnav .et_mobile_menu {
  background: rgba(11,11,13,0.98) !important;
  border-top: 1px solid rgba(201,209,219,0.22);
  padding: 8px 0; }
.prs-mainnav .et_mobile_menu li a {
  color: #C9D1DB !important; border-bottom: 1px solid rgba(201,209,219,0.14);
  font-family: 'Archivo', Arial, sans-serif; font-size: 15px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  min-height: 44px; display: flex; align-items: center; padding: 0 24px; }
.prs-mainnav .et_mobile_menu li a:hover { color: #F4F3F1 !important; opacity: 1; }

/* ---------------- RESPONSIVE  (design breakpoints: 980 / 767) ---------------- */
/* 981-1279: nav tightens, logo shrinks  (styles.css:984-986) */
@media (max-width: 1279px) and (min-width: 981px) {
  .et_pb_menu.prs-mainnav .et_pb_menu__menu > nav > ul > li > a {
    padding: 0 5px; font-size: 12px; letter-spacing: 0; }
  .hdr-col-logo .et_pb_image img { height: 68px !important; width: 62px !important; }
}

/* <=980: desktop nav collapses to Divi's hamburger  (styles.css:390-393) */
@media (max-width: 980px) {
  .et_pb_section.hdr .et_pb_row.hdr-bar {
    min-height: 96px; padding: 0 32px !important; }
  .hdr-col-logo .et_pb_image img { height: 76px !important; width: 69px !important; }
  .hdr-bar > .et_pb_column.hdr-col-logo { order: 1; }
  .hdr-bar > .et_pb_column.hdr-col-act  { order: 2; flex: 0 0 auto; }
  .hdr-bar > .et_pb_column.hdr-col-nav  { order: 3; flex: 0 0 auto; width: auto; }
  .et_pb_section.prs-footer .et_pb_row.prs-footrow {
    grid-template-columns: 1fr 1fr; gap: 32px; padding: 0 32px !important; }
  .et_pb_section.prs-footer .et_pb_row.hp-56 { padding: 24px 32px 0 !important; }
}

/* <=767  (styles.css:418-421) */
@media (max-width: 767px) {
  .et_pb_section.hdr .et_pb_row.hdr-bar {
    min-height: 72px; padding: 0 24px !important; }
  .hdr-col-logo .et_pb_image img { height: 56px !important; width: 51px !important; }
  .prs-call { display: inline-flex; }
  a.et_pb_button.quote-btn-wrap { display: none !important; }
  .et_pb_section.prs-footer .et_pb_row.prs-footrow {
    grid-template-columns: 1fr; padding: 0 24px !important; }
  .et_pb_section.prs-footer .et_pb_row.hp-56 { padding: 24px 24px 0 !important; }
}

/* the call icon is phone-only, matching .call-only in styles.css:150 */
.prs-call { display: none; }
@media (max-width: 767px) { .prs-call { display: inline-flex; } }