/*
 * Holler WP/Etch glue — chrome overrides only.
 * Type, space, and palette scales live in ACSS (see scripts/acss-holler-apply.sh).
 */
body.holler-front {
  background: var(--paper) !important;
  color: var(--ink) !important;
}
.hero,
.hero h1,
.hero .hero__title,
.hero .lede { color: var(--on-pine) !important; }
.hero .hero__title .u { color: #fff !important; }
.site-header { background: var(--pine) !important; }
.site-header a,
.site-bar a,
.brand-lockup,
.brand-lockup__name,
.site-footer .brand-lockup,
.site-footer .brand-lockup__name,
.header-cta__phone,
.header-cta__phone-num { color: var(--on-pine) !important; text-decoration: none !important; }
.brand-lockup__mark {
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2096%2096%22%3E%3Crect%20width%3D%2296%22%20height%3D%2296%22%20rx%3D%2210%22%20fill%3D%22%23e8590c%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2218%22%20width%3D%2216%22%20height%3D%2260%22%20fill%3D%22%23f6f2e7%22%2F%3E%3Crect%20x%3D%2260%22%20y%3D%2218%22%20width%3D%2216%22%20height%3D%2260%22%20fill%3D%22%23f6f2e7%22%2F%3E%3Cpath%20d%3D%22M36%2042%20L48%2053%20L60%2042%20L60%2054%20L48%2065%20L36%2054%20Z%22%20fill%3D%22%23f6f2e7%22%2F%3E%3C%2Fsvg%3E") !important;
  color: inherit !important;
  padding: 0 !important;
  overflow: hidden;
}
.brand-lockup__mark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.primary-nav a { color: var(--on-pine) !important; text-decoration: none !important; }
.primary-nav a[aria-current="page"] { color: #fff !important; border-color: var(--blaze); }
a.btn,
a.btn:hover,
a.btn:focus { text-decoration: none !important; }
.btn,
a.btn {
  font-family: var(--heading-font-family) !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
}
a.btn--blaze,
.btn--blaze {
  background: var(--blaze) !important;
  color: #fff !important;
  border-bottom: 3px solid var(--blaze-2) !important;
}
a.btn--line,
.btn--line {
  background: transparent !important;
  color: var(--pine) !important;
  border: 2px solid var(--pine) !important;
}
.hero a.btn--line,
.hero .btn--line,
.cta-band a.btn--line,
.cta-band .btn--line,
.sticky-bar a.btn--line,
.sticky-bar .btn--line,
.rental-math a.btn--line,
.rental-math .btn--line,
.founder-band a.btn--line,
.founder-band .btn--line,
.on-pine a.btn--line,
.on-pine .btn--line {
  color: var(--on-pine) !important;
  border-color: var(--pine-rule) !important;
}
a.btn--pine,
.btn--pine {
  background: var(--pine) !important;
  color: var(--on-pine) !important;
  border-bottom: 3px solid var(--pine-2) !important;
}
a.btn--ghost,
.btn--ghost { color: var(--ink) !important; }
.cta-band,
.cta-band h2 { color: var(--on-pine) !important; }
@media (max-width: 639px) {
  body.holler-front {
    padding-bottom: 4.75rem;
  }
  body.holler-front.has-holler-compare-bar {
    padding-bottom: 9.5rem;
  }
}
.site-footer a { color: var(--on-pine-2) !important; }
.wp-site-blocks,
.entry-content { max-width: none; padding: 0; margin: 0; background: transparent; }
.quote-notice { background: var(--ok); color: #fff; padding: var(--space-s) var(--space-m); font-weight: 700; text-align: center; }
.quote-notice--err { background: var(--blaze); }
.menu-btn__bars { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 1.5em; height: 1.5em; }
.menu-btn__bar { display: block; height: 2px; background: currentColor; }
.error-page { text-align: center; padding: var(--space-2xl) 0 var(--space-xl); }
.error-page__code { font-family: var(--font-display); font-size: var(--text-disp); line-height: 1; color: var(--blaze); margin: 0 0 var(--space-s); }
.error-page__title { margin: 0 0 var(--space-s); }
.error-page__sub { color: var(--ink-2); max-width: 36ch; margin: 0 auto var(--space-l); }
.error-page__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); justify-content: center; }
.machine-sheet { margin-block: var(--space-m) var(--space-2xl); }
.machine-sheet .spec-table {
  width: 100%;
  max-width: min(34rem, 100%);
  table-layout: fixed;
}
.machine-sheet .spec-table td:first-child {
  width: 42%;
  color: var(--ink-2);
  font-weight: 600;
}
.machine-sheet .text-legal {
  max-width: min(42rem, 100%);
}
.machine-sheet__gallery.shot-strip { display: grid; gap: var(--space-s); margin-top: var(--space-m); }
@media (min-width: 720px) {
  .machine-sheet__gallery.shot-strip { grid-template-columns: repeat(3, 1fr); }
}
.machine-sheet__gallery img,
.machine-sheet__hero img { width: 100%; height: auto; display: block; }
.machine-sheet__gallery[data-machine-gallery] {
  display: grid;
  gap: var(--space-s);
  margin-block: var(--space-m) 0;
  max-width: min(42rem, 100%);
}
.machine-sheet__hero {
  margin: 0;
  background: color-mix(in oklab, var(--base) 6%, transparent);
  border-radius: var(--radius);
  overflow: hidden;
}
.machine-sheet__hero--solo img { width: 100%; height: auto; display: block; }
.machine-sheet__hero-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  line-height: 0;
}
.machine-sheet__hero-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.machine-sheet__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.machine-sheet__thumb {
  display: block;
  margin: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--base) 8%, transparent);
  overflow: hidden;
  cursor: pointer;
  line-height: 0;
  aspect-ratio: 1;
}
.machine-sheet__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.machine-sheet__thumb.is-active {
  border-color: var(--accent);
}
.machine-sheet__thumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.machine-sheet__lightbox {
  border: 0;
  padding: var(--space-s);
  max-width: min(96vw, 56rem);
  width: 100%;
  background: var(--base);
  color: #f6f2e7;
  border-radius: var(--radius-l);
}
.machine-sheet__lightbox::backdrop {
  background: color-mix(in oklab, var(--base) 72%, transparent);
}
.machine-sheet__lightbox-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-2xs);
}
.machine-sheet__lightbox-close,
.machine-sheet__lightbox-nav {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: var(--space-2xs) var(--space-xs);
}
.machine-sheet__lightbox-close:focus-visible,
.machine-sheet__lightbox-nav:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.machine-sheet__lightbox-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 40vh;
}
.machine-sheet__lightbox-img {
  max-width: 100%;
  max-height: min(78vh, 900px);
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
.machine-sheet__lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  background: color-mix(in oklab, var(--base) 55%, transparent);
  border-radius: var(--radius);
}
.machine-sheet__lightbox-nav--prev { left: 0.25rem; }
.machine-sheet__lightbox-nav--next { right: 0.25rem; }
.machine-sheet__lightbox-count {
  margin: var(--space-2xs) 0 0;
  text-align: center;
  font-size: var(--text-s);
  opacity: 0.85;
}
.machine-sheet .price-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-m); margin-block: var(--space-m); }
.machine-sheet__manual {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  margin: 0 0 var(--space-m);
}
.manuals-index { display: grid; gap: var(--space-l); }
.manuals-index__heading {
  font-family: var(--heading-font-family), "Barlow Condensed", sans-serif;
  font-size: var(--text-l);
  margin: 0 0 var(--space-xs);
}
.manuals-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
}
.manuals-index__link { font-weight: 700; }
.manuals-index__source { display: block; margin-top: 0.15em; }
.service-regions {
  margin-top: var(--space-xl);
  display: grid;
  gap: var(--space-m);
  width: 100%;
  max-width: var(--content-width, 72.5rem);
  margin-inline: auto;
  box-sizing: border-box;
}
/* If the map lands outside .page-shell, still honor site gutters */
main > .service-regions,
.entry-content > .service-regions {
  padding-inline: var(--gutter);
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}
main > .service-regions > *,
.entry-content > .service-regions > * {
  max-width: var(--content-width, 72.5rem);
  margin-inline: auto;
}
.service-map {
  border: var(--line);
  border-radius: var(--radius-l);
  background: color-mix(in oklab, var(--pine) 8%, white);
  padding: var(--space-m);
  overflow: hidden;
}
.service-map__canvas {
  width: 100%;
  height: min(420px, 55vh);
  min-height: 280px;
  border-radius: var(--radius);
  overflow: hidden;
  background: color-mix(in oklab, var(--pine) 6%, white);
}
.service-map__caption {
  margin: var(--space-xs) 0 0;
  color: var(--ink-2);
  font-family: Barlow, sans-serif;
}
.service-map__marker {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.service-map__marker-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--blaze);
  border: 3px solid white;
  box-shadow: 0 1px 4px color-mix(in oklab, var(--ink) 35%, transparent);
}
.service-map__popup .maplibregl-popup-content {
  font-family: Barlow, sans-serif;
  font-size: var(--text-s, 0.9rem);
  color: var(--ink);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius);
  box-shadow: none;
  border: var(--line);
}
.service-map__popup .maplibregl-popup-content strong {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 0.25em;
}
.service-map__popup .maplibregl-popup-content p {
  margin: 0;
  color: var(--ink-2);
}
.service-map .maplibregl-ctrl-attrib {
  font-size: 10px;
  background: color-mix(in oklab, white 85%, transparent);
}
.service-map svg { width: 100%; height: auto; display: block; }
.service-map__bg { fill: color-mix(in oklab, var(--pine) 6%, white); }
.service-map__state { fill: var(--pine); }
.service-map__state--dim { fill: var(--pine); fill-opacity: 0.78; }
.service-map__state--out {
  fill: color-mix(in oklab, var(--pine) 18%, white);
  stroke: var(--pine);
  stroke-width: 2;
}
.service-map__label { fill: var(--on-pine, white); font-family: "Barlow Condensed", sans-serif; font-weight: 700; }
.service-map__label-out { fill: var(--ink); font-family: "Barlow Condensed", sans-serif; font-weight: 700; }
.service-map__pin { fill: var(--blaze); }
.service-map__pin-core { fill: white; }
.service-map__marker-label { fill: var(--ink); font-family: Barlow, sans-serif; font-weight: 700; }
.service-map__legend {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-m);
  font-size: var(--text-s);
}
.nap-grid {
  display: grid;
  gap: var(--space-m);
}
@media (min-width: 720px) {
  .nap-grid { grid-template-columns: 1fr 1fr; }
}
.nap-card h3 { margin: 0 0 var(--space-2xs); }
.nap-card p { margin: 0 0 var(--space-2xs); color: var(--ink-2); }
.nap-card p:last-child { margin-bottom: 0; }
.price-row__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); }
.holler-atc { display: inline-flex; }
.holler-atc .fluent-cart-add-to-cart-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-family: var(--heading-font-family), "Barlow Condensed", "Arial Narrow", sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em;
  line-height: 1.1 !important;
  padding: var(--space-xs) var(--space-m);
  border: none !important;
  border-radius: var(--radius) !important;
  background: var(--blaze, #e8590c) !important;
  color: #ffffff !important;
  border-bottom: 3px solid var(--blaze-2, #c34a08) !important;
  cursor: pointer;
}
.holler-atc .fluent-cart-add-to-cart-button:hover:not(:disabled) {
  background: var(--blaze-2, #c34a08) !important;
}
.holler-atc .fluent-cart-add-to-cart-button:focus-visible {
  outline: 3px solid var(--blaze, #e8590c);
  outline-offset: 2px;
}
.holler-atc .fluent-cart-add-to-cart-button:disabled,
.holler-atc .fluent-cart-add-to-cart-button.out-of-stock {
  opacity: 0.55;
  cursor: not-allowed;
}
.product-card__actions .holler-atc .fluent-cart-add-to-cart-button {
  padding: var(--space-2xs) var(--space-s);
  font-size: var(--text-s);
}
.machine-story { margin-block: var(--space-l); max-width: 65ch; }
.machine-story p { margin-block: var(--space-s); font-size: var(--text-s); line-height: 1.55; }
.machine-highlights,
.machine-pdi,
.machine-faq { margin-block: var(--space-l); max-width: 65ch; }
.machine-highlights h3,
.machine-pdi h3,
.machine-faq h3 { font-size: var(--text-l); margin: 0 0 var(--space-s); }
.machine-highlights ul { margin: 0; padding-inline-start: 1.25rem; }
.machine-highlights li { margin-block: 0.35rem; font-size: var(--text-s); }
.machine-faq details { border-block: 1px solid var(--rule); padding-block: var(--space-s); }
.machine-faq details + details { border-top: 0; }
.machine-faq summary { cursor: pointer; font-weight: 600; font-size: var(--text-s); }
.machine-faq details p { font-size: var(--text-s); color: var(--ink-2); }
.machine-faq__more { margin-top: var(--space-m); font-size: var(--text-s); }
.holler-catalog-slot { display: none; }
.holler-catalog-grid { margin-top: var(--space-l); }
.holler-catalog-grid .product-grid { display: grid; gap: var(--space-m); margin-top: var(--space-m); }
@media (min-width: 820px) {
  .holler-catalog-grid .product-grid { grid-template-columns: repeat(3, 1fr); }
}
.product-card .photo-frame img,
.holler-catalog-grid .product-card .photo-frame img,
.holler-wpgb .product-card .photo-frame img,
.spotlight .holler-spotlight-photo img,
.dept-card .holler-dept-photo img,
.holler-related .product-card .photo-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.product-card .photo-frame.has-photo,
.product-card a.photo-frame {
  padding: 0 !important;
  overflow: hidden;
  display: block;
  border: none !important;
  border-bottom: var(--line-2) !important;
  border-radius: 0 !important;
  outline: none;
  box-shadow: none !important;
}
.product-card .photo-frame img {
  border: none !important;
  border-radius: 0 !important;
}
.spotlight .holler-spotlight-photo,
.dept-card .holler-dept-photo.has-photo,
.spotlight .holler-spotlight-photo:has(img) {
  padding: 0; overflow: hidden; border-style: solid;
}
.spotlight a.holler-spotlight-photo {
  display: block;
  text-decoration: none;
  color: inherit;
  outline: none;
}
.spotlight a.holler-spotlight-photo:focus-visible {
  outline: 3px solid var(--blaze, #e8590c);
  outline-offset: 2px;
}
.holler-catalog-grid .product-card__title a { color: inherit; text-decoration: none; }
.holler-related { margin-top: var(--space-l); }
.holler-wpgb { display: grid; gap: var(--space-m); margin-top: var(--space-m); }
@media (min-width: 900px) {
  .holler-wpgb { grid-template-columns: 16rem minmax(0, 1fr); align-items: start; }
}
.holler-wpgb__facets { display: flex; flex-direction: column; gap: var(--space-s); }
/*
 * WPGB wraps cards in .wpgb-template — that node is the grid, not .product-grid
 * (which also holds pagination). Without this, machinery stays one column forever.
 */
.holler-wpgb__grid.product-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  min-width: 0;
}
/*
 * Related grids wrap WPGB the same way — do not let inspire's
 * .product-grid 3-col rule nest inside another 3-col and crush cards.
 */
.holler-related .product-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  min-width: 0;
}
.holler-wpgb__grid .wpgb-template,
.holler-related .wpgb-template {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
  min-width: 0;
}
@media (min-width: 640px) {
  .holler-wpgb__grid .wpgb-template,
  .holler-related .wpgb-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 960px) {
  .holler-wpgb__grid .wpgb-template,
  .holler-related .wpgb-template {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.holler-wpgb__grid .product-card,
.holler-related .product-card {
  min-width: 0;
}

/* Quote / contact form — keep measure tight and fields readable */
.wrap--form.page-shell > .page-head,
.wrap--form.page-shell > .form-panel,
.wrap--form.page-shell > .quote-form {
  max-width: min(36rem, 100%);
  margin-inline: auto;
}
.form-panel .quote-form {
  margin-top: 0;
  margin-bottom: 0;
}
.form-panel .quote-form .field input,
.form-panel .quote-form .field textarea {
  background: var(--paper, #f6f2e7);
}
.quote-form {
  margin-top: var(--space-m);
  margin-bottom: var(--space-2xl);
}
.quote-form .field + .field,
.quote-form .field-row + .field,
.quote-form .field + .field-row,
.quote-form .field + .consent,
.quote-form .consent + .quote-form__submit,
.quote-form .consent + .btn {
  margin-top: var(--space-s);
}
.quote-form .field-row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(6.5rem, 0.75fr);
  gap: var(--space-s);
  margin-top: var(--space-s);
}
.quote-form .field-row .field {
  margin-top: 0;
  min-width: 0;
}
@media (max-width: 560px) {
  .quote-form .field-row {
    grid-template-columns: 1fr;
  }
}
.quote-form .field label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--space-3xs);
}
.quote-form .field input,
.quote-form .field textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-s);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  font: inherit;
  font-weight: 600;
  color: var(--ink);
}
.quote-form .field textarea {
  min-height: 6rem;
  resize: vertical;
}
.quote-form .field input:focus,
.quote-form .field textarea:focus {
  border-color: var(--primary);
  outline: none;
}
.quote-form .consent {
  display: flex;
  gap: var(--space-2xs);
  align-items: flex-start;
  font-size: var(--text-xs);
  color: var(--ink-2);
  line-height: 1.45;
}
.quote-form .consent input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.quote-form .quote-form__submit,
.quote-form button.btn {
  margin-top: var(--space-s);
  width: 100%;
}

/* Save + compare shortlist */
.product-card__tools,
.machine-sheet__tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  align-items: center;
}
.product-card__tools {
  position: absolute;
  top: var(--space-2xs);
  right: var(--space-2xs);
  left: auto;
  z-index: 2;
  gap: 0.25rem;
  opacity: 0.72;
  transition: opacity 0.15s ease;
}
.product-card:hover .product-card__tools,
.product-card:focus-within .product-card__tools {
  opacity: 1;
}
.holler-tool-btn {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  margin: 0;
  border: 1px solid color-mix(in oklab, var(--base, #211f1a) 18%, transparent);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--panel, #fdfbf4) 78%, transparent);
  color: var(--base, #211f1a);
  cursor: pointer;
  backdrop-filter: blur(3px);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--base, #211f1a) 12%, transparent);
}
.holler-tool-btn:hover,
.holler-tool-btn:focus-visible {
  background: var(--panel, #fdfbf4);
  border-color: var(--accent, var(--blaze));
  color: var(--accent, var(--blaze));
  outline: none;
}
.holler-tool-btn.is-active,
.product-card__tools .btn.is-active,
.machine-sheet__tools .btn.is-active,
[data-holler-fav].is-active,
[data-holler-compare].is-active {
  border-color: var(--accent, var(--blaze));
  color: var(--accent, var(--blaze));
  background: color-mix(in oklab, var(--panel, #fdfbf4) 88%, var(--accent, var(--blaze)));
}
.holler-tool-btn__icon {
  display: block;
  pointer-events: none;
}
.machine-sheet__tools .btn {
  min-height: 2rem;
  padding-inline: var(--space-xs);
}
.machine-sheet__tools {
  margin: var(--space-s) 0;
}
.holler-compare-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  background: var(--primary, var(--pine));
  color: var(--on-pine, #f6f2e7);
  border-top: 2px solid var(--accent, var(--blaze));
  padding-block: var(--space-xs);
  padding-inline: var(--gutter);
  box-shadow: 0 -6px 20px color-mix(in oklab, var(--base, #211f1a) 28%, transparent);
}
.holler-compare-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  max-width: var(--content-width, 72.5rem);
  margin-inline: auto;
  padding-inline: 0;
}
.holler-compare-bar__label {
  margin: 0;
  font-weight: 700;
  font-size: var(--text-s);
}
.holler-compare-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.holler-compare-bar .btn--ghost {
  color: var(--on-pine, #f6f2e7) !important;
  border-color: color-mix(in oklab, var(--on-pine, #f6f2e7) 45%, transparent);
}
body.has-holler-compare-bar {
  padding-bottom: 5.5rem;
}
.holler-compare {
  display: grid;
  gap: 0;
  margin-bottom: var(--space-2xl);
  border: var(--line-2, 2px solid var(--rule));
  border-radius: var(--radius-l);
  overflow: auto;
  background: var(--panel);
}
.holler-compare__head,
.holler-compare__row {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) repeat(var(--holler-cmp-cols, 2), minmax(10rem, 1fr));
  min-width: 36rem;
}
.holler-compare__head {
  background: var(--paper);
  border-bottom: var(--line-2, 2px solid var(--rule));
}
.holler-compare__row + .holler-compare__row {
  border-top: var(--line, 1px solid var(--rule));
}
.holler-compare__corner,
.holler-compare__label,
.holler-compare__cell,
.holler-compare__card {
  padding: var(--space-s);
}
.holler-compare__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--paper);
}
.holler-compare__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  border-left: var(--line, 1px solid var(--rule));
}
.holler-compare__cell {
  border-left: var(--line, 1px solid var(--rule));
  font-weight: 600;
  font-size: var(--text-s);
}
.holler-compare__thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--paper);
}
.holler-compare__title {
  font-size: var(--text-m);
  margin: 0;
}
.holler-compare__price {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--primary, var(--pine));
}
.holler-compare__tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}
.primary-nav a[href="/saved/"],
.primary-nav a[href="/favorites/"],
.header-util[href="/saved/"],
.header-util[href="/favorites/"] {
  position: relative;
}
[data-holler-fav-count] {
  display: inline-grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  margin-left: 0.25rem;
  padding-inline: 0.25rem;
  border-radius: var(--radius);
  background: var(--accent, var(--blaze));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: super;
}

/* HUAYEE YouTube embeds + Amazon consumables */
.holler-videos {
  margin-block: var(--space-l) var(--space-2xl);
}
.holler-videos__title {
  font-size: var(--text-l);
  margin: 0 0 var(--space-2xs);
}
.holler-videos__credit {
  margin: 0 0 var(--space-s);
}
.holler-videos__grid {
  display: grid;
  gap: var(--space-m);
}
@media (min-width: 820px) {
  .holler-videos__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.holler-videos__frame {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--base, #211f1a);
  border: var(--line-2, 2px solid var(--rule));
  aspect-ratio: 16 / 9;
}
.holler-yt-facade {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: var(--base);
}
.holler-yt-facade__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.holler-yt-facade__play {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 3.5rem;
  height: 3.5rem;
  margin: -1.75rem 0 0 -1.75rem;
  border-radius: 50%;
  background: var(--accent, var(--blaze));
  box-shadow: 0 0 0 0.35rem color-mix(in oklab, var(--accent, var(--blaze)) 35%, transparent);
}
.holler-yt-facade__play::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 52%;
  margin: -0.55rem 0 0 -0.25rem;
  border-style: solid;
  border-width: 0.55rem 0 0.55rem 0.95rem;
  border-color: transparent transparent transparent var(--on-pine, #f6f2e7);
}
.holler-videos__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.holler-videos__watch {
  display: inline-block;
  margin-left: var(--space-2xs);
  font-weight: 600;
  color: var(--accent, var(--blaze));
}
.holler-account__h {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-m);
}
.holler-account__last-login {
  margin: 0 0 var(--space-m);
}
.holler-account__jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0 0 var(--space-m);
  padding: var(--space-xs) 0;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper, #f6f2e7);
  border-bottom: var(--line);
}
.holler-account__jump a {
  font-size: var(--text-s);
  font-weight: 700;
  color: var(--primary, var(--pine));
  text-decoration: none;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius);
}
.holler-account__jump a:hover {
  color: var(--accent, var(--blaze));
  text-decoration: underline;
  text-underline-offset: 3px;
}
.holler-account__panel--support {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  scroll-margin-top: 4rem;
}
.holler-account__panel {
  scroll-margin-top: 4rem;
}
.holler-ext-warn {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: color-mix(in srgb, var(--base, #211f1a) 55%, transparent);
}
.holler-ext-warn[hidden] {
  display: none !important;
}
.holler-ext-warn__panel {
  width: min(28rem, 100%);
  background: var(--panel);
  color: var(--base, #211f1a);
  border: var(--line-ink);
  border-radius: var(--radius-l);
  padding: var(--space-m);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--base, #211f1a) 25%, transparent);
}
.holler-ext-warn__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-l);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.holler-ext-warn__body {
  margin: var(--space-s) 0 var(--space-m);
  font-size: var(--text-s);
  color: var(--ink-2);
  line-height: 1.45;
}
.holler-ext-warn__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: flex-end;
}
/* Logged-in account uses full content measure; auth form stays narrow below. */
.holler-videos__frame--fluentplayer {
  aspect-ratio: auto;
  background: transparent;
  border: none;
}
.holler-videos__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.holler-videos__frame--fluentplayer .fp-media-block,
.holler-videos__frame--fluentplayer .fluent-player-container {
  width: 100%;
}
/* FluentPlayer hides media-player until data-can-play when load!=play; force visible for catalog embeds */
.holler-videos__frame--fluentplayer media-player {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.holler-videos__frame--fluentplayer media-provider,
.holler-videos__frame--fluentplayer iframe,
.holler-videos__frame--fluentplayer video {
  width: 100%;
  min-height: 12rem;
}
.holler-videos__frame--fluentplayer media-player,
.holler-videos__frame--fluentplayer .fluent-player-loader-poster {
  max-width: 100%;
}
.holler-videos__cap {
  margin-top: var(--space-2xs);
  font-size: var(--text-s);
  font-weight: 700;
  color: var(--ink-2);
}
/* Logged-in account uses full content measure; auth form stays narrow. */
.holler-account {
  max-width: none;
}
.holler-account:has(.holler-account__panel--auth) {
  max-width: 32rem;
}
.holler-account__lede {
  margin: 0 0 var(--space-m);
}
.holler-account__notice {
  margin: 0 0 var(--space-m);
  padding: var(--space-s);
  background: var(--panel, #fff);
  border: var(--line-2, 2px solid var(--rule));
  border-radius: var(--radius-l);
  font-size: var(--text-s);
}
.holler-account__panel {
  margin-top: var(--space-s);
  padding: var(--space-m);
  background: var(--panel, #fff);
  border: var(--line-2, 2px solid color-mix(in srgb, var(--base, #211f1a) 12%, transparent));
  border-radius: var(--radius-l);
}
.holler-account__panel + .holler-account__panel {
  margin-top: var(--space-l);
}
.holler-account__panel .page-head__sub {
  margin: 0 0 var(--space-s);
}
.holler-account__panel--auth .fls_auth_form_wrapper + .fls_auth_form_wrapper,
.holler-account__panel--auth .fluent-cart-customer-profile {
  display: none;
}
/* Put Login with Google above email/password so it stays in the first viewport.
   FluentAuth inline CSS targets form#loginform { display:block } — need id specificity. */
.holler-account__panel--auth .fls_login_wrapper form#loginform {
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.holler-account__panel--auth .fm_login_with {
  order: -1;
  margin: 0 0 var(--space-s);
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.holler-account__panel--auth .fs_auth_btn.fs_auth_google {
  width: 100%;
  min-height: 2.75rem;
  justify-content: center;
  font-weight: 600;
}
.holler-account__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-m);
}

/* FluentCart customer dashboard → Holler tokens */
.holler-account .fct_customer_profile_wrap,
.holler-account .fct-customer-root-container {
  max-width: none !important;
  width: 100%;
  --fct-primary-text-color: var(--primary, #1e3d2f);
  --fct-secondary-text-color: color-mix(in srgb, var(--base, #211f1a) 68%, transparent);
  --fct-border-color: color-mix(in srgb, var(--base, #211f1a) 16%, transparent);
  --fct-divider-color: color-mix(in srgb, var(--base, #211f1a) 12%, transparent);
  --fct-customer-dashboard-nav-text-color: color-mix(in srgb, var(--base, #211f1a) 72%, transparent);
  --fct-customer-dashboard-nav-active-text-color: var(--primary, #1e3d2f);
  --fct-customer-dashboard-nav-active-bg-color: color-mix(in srgb, var(--primary, #1e3d2f) 8%, #fff);
  --fct-customer-dashboard-nav-active-bar-color: var(--accent, #e8590c);
  --fct-customer-dashboard-btn-bg-color: var(--accent, #e8590c);
  --fct-customer-dashboard-btn-border-color: var(--accent, #e8590c);
  --fct-customer-dashboard-btn-text-color: #fff;
  --fct-customer-dashboard-logout-btn-bg-color: color-mix(in srgb, var(--accent, #e8590c) 12%, #fff);
  --fct-customer-dashboard-logout-btn-text-color: var(--accent, #e8590c);
  --fct-customer-dashboard-logout-btn-hover-bg-color: color-mix(in srgb, var(--accent, #e8590c) 22%, #fff);
  font-family: inherit;
  color: var(--base, #211f1a);
}
.holler-account .fct-customer-dashboard-main-content,
.holler-account .fct-customer-dashboard-navs-wrap,
.holler-account .fct-customer-dashboard-customer-info {
  border-color: var(--fct-border-color) !important;
  background: var(--panel, #fff);
}
.holler-account .fct-customer-nav-link,
.holler-account .fct-customer-nav-link-text {
  font-weight: 600;
}
.holler-account .fct-customer-logout-btn {
  border-radius: var(--radius) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Fluent Support portal → Holler / Element Plus tokens */
.holler-account #fluent_support_client_app,
.holler-account .holler-account__panel--support {
  --el-color-primary: var(--accent, #e8590c);
  --el-color-primary-light-3: color-mix(in srgb, var(--accent, #e8590c) 70%, #fff);
  --el-color-primary-light-5: color-mix(in srgb, var(--accent, #e8590c) 50%, #fff);
  --el-color-primary-light-7: color-mix(in srgb, var(--accent, #e8590c) 30%, #fff);
  --el-color-primary-light-8: color-mix(in srgb, var(--accent, #e8590c) 18%, #fff);
  --el-color-primary-light-9: color-mix(in srgb, var(--accent, #e8590c) 10%, #fff);
  --el-color-primary-dark-2: color-mix(in srgb, var(--accent, #e8590c) 82%, #000);
  --el-text-color-primary: var(--base, #211f1a);
  --el-text-color-regular: color-mix(in srgb, var(--base, #211f1a) 78%, transparent);
  --el-text-color-secondary: color-mix(in srgb, var(--base, #211f1a) 58%, transparent);
  --el-text-color-placeholder: color-mix(in srgb, var(--base, #211f1a) 42%, transparent);
  --el-border-color: color-mix(in srgb, var(--base, #211f1a) 16%, transparent);
  --el-border-color-light: color-mix(in srgb, var(--base, #211f1a) 12%, transparent);
  --el-border-color-lighter: color-mix(in srgb, var(--base, #211f1a) 10%, transparent);
  --el-border-color-extra-light: color-mix(in srgb, var(--base, #211f1a) 8%, transparent);
  --el-fill-color-blank: var(--panel, #fff);
  --el-bg-color: var(--panel, #fff);
  --el-bg-color-page: var(--paper, #f6f2e7);
  --el-font-family: inherit;
  font-family: inherit;
  color: var(--base, #211f1a);
}
.holler-account #fluent_support_client_app .el-table,
.holler-account #fluent_support_client_app .el-table th.el-table__cell,
.holler-account #fluent_support_client_app .el-table .cell {
  color: var(--base, #211f1a) !important;
  font-size: var(--text-s);
}
.holler-account #fluent_support_client_app .el-table th.el-table__cell {
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--primary, #1e3d2f) 6%, #fff) !important;
}
.holler-account #fluent_support_client_app .el-button--primary {
  --el-button-bg-color: var(--accent, #e8590c);
  --el-button-border-color: var(--accent, #e8590c);
  --el-button-hover-bg-color: color-mix(in srgb, var(--accent, #e8590c) 88%, #000);
  --el-button-hover-border-color: color-mix(in srgb, var(--accent, #e8590c) 88%, #000);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius) !important;
}
.holler-account #fluent_support_client_app .el-input__wrapper,
.holler-account #fluent_support_client_app .el-select__wrapper {
  border-radius: var(--radius) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--base, #211f1a) 18%, transparent) inset !important;
}
.holler-account #fluent_support_client_app .el-tabs__item.is-active,
.holler-account #fluent_support_client_app .el-tabs__item:hover {
  color: var(--primary, #1e3d2f) !important;
}
.holler-account #fluent_support_client_app .el-tabs__active-bar {
  background-color: var(--accent, #e8590c) !important;
}
.machine-sheet__amazon {
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: var(--line, 1px solid var(--rule));
}
.machine-sheet__amazon-btn {
  display: inline-flex;
}
.machine-sheet__amazon-note {
  margin: var(--space-2xs) 0 0;
  max-width: 36rem;
}
.machine-sheet__parts-cta {
  margin-top: var(--space-m);
}
.holler-consumables {
  margin-block: var(--space-l) var(--space-2xl);
}
.holler-consumables__list {
  list-style: none;
  margin: var(--space-m) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-s);
}
.holler-consumables__item {
  background: var(--panel);
  border: var(--line-2, 2px solid var(--rule));
  border-radius: var(--radius-l);
  padding: var(--space-s);
}
.holler-consumables__name {
  font-weight: 700;
  color: var(--accent, var(--blaze));
  text-decoration: none;
}
.holler-consumables__name:hover {
  text-decoration: underline;
}
.holler-consumables__why {
  margin: var(--space-2xs) 0 0;
  font-size: var(--text-s);
  color: var(--ink-2);
}
.fluentform .ff-el-form-control,
.fluentform textarea.ff-el-form-control {
  border: 2px solid var(--rule, #d9d1bc);
  border-radius: var(--radius);
  background: var(--panel, #fdfbf4);
}

/* Fluent submit → Holler blaze CTA (beats Fluent default blue / inline bg) */
.fluentform .ff-btn-submit,
.fluentform button[type="submit"].ff-btn,
.fluentform .ff_btn_style {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-2xs, 0.45rem) !important;
  width: 100% !important;
  max-width: 100% !important;
  font-family: var(--heading-font-family, "Barlow Condensed", "Arial Narrow", sans-serif) !important;
  font-weight: 700 !important;
  font-size: var(--text-m, 1rem) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  background: var(--accent, var(--blaze, #e8590c)) !important;
  color: #fff !important;
  border: none !important;
  border-bottom: 3px solid var(--blaze-2, #c34a08) !important;
  border-radius: var(--radius) !important;
  padding: var(--space-xs, 0.65rem) var(--space-m, 1.3rem) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  min-height: 2.75rem;
}
.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:focus,
.fluentform button[type="submit"].ff-btn:hover,
.fluentform button[type="submit"].ff-btn:focus,
.fluentform .ff_btn_style:hover,
.fluentform .ff_btn_style:focus {
  background: var(--blaze-2, #c34a08) !important;
  color: #fff !important;
  outline: none !important;
}
.fluentform .ff-btn-submit:focus-visible,
.fluentform button[type="submit"].ff-btn:focus-visible {
  outline: 3px solid var(--accent, #e8590c) !important;
  outline-offset: 2px !important;
}