/*
 * Shared components: buttons (guide 2.1), price stack, rating, stock status,
 * age tag, toast (guide 2.7, proposed). Tokens only.
 */

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-h-m);
  padding-inline: var(--btn-pad-m);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-size: var(--fs-btn-m);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.btn:hover  { background: var(--color-ink-hover); }
.btn:active { background: var(--color-ink-active); transform: translateY(1px); }

.btn--primary {
  background: var(--color-cta);
  color: var(--color-on-cta);
  box-shadow: var(--shadow-cta-lg);
}
.btn--primary:hover  { background: var(--color-cta-hover); }
.btn--primary:active { background: var(--color-cta-active); }

.btn--outline {
  border-color: var(--color-ink);
  background: transparent;
  color: var(--color-ink);
}
.btn--outline:hover  { background: var(--color-ink); color: var(--color-bg); }
.btn--outline:active { background: var(--color-ink-hover); color: var(--color-bg); }

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
}
.btn--ghost:hover  { background: var(--color-ghost-hover); }
.btn--ghost:active { background: var(--color-ghost-active); }

.btn--l  { height: var(--btn-h-l);  padding-inline: var(--btn-pad-l);  font-size: var(--fs-btn-l); font-weight: var(--fw-extrabold); }
.btn--s  { height: var(--btn-h-s);  padding-inline: var(--btn-pad-s);  font-size: var(--fs-btn-s); }
.btn--xs { height: var(--btn-h-xs); padding-inline: var(--btn-pad-xs); font-family: var(--font-body); font-size: var(--fs-small); }

.btn:disabled,
.btn[aria-disabled="true"] {
  border-color: var(--color-line);
  background: var(--color-line);
  color: var(--color-disabled);
  box-shadow: none;
  cursor: not-allowed;
}

/* ── Price ─────────────────────────────────────────────────────────── */
.price-stack {
  display: flex;
  flex-direction: column;
}

.price-stack__old {
  color: var(--color-muted); /* AA contrast (subtle is for large/decorative text only) */
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-decoration: line-through;
}

.price-stack__current {
  font-family: var(--font-heading);
  font-size: var(--fs-price-m);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
}

.price-stack__from {
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

/* ── Rating ────────────────────────────────────────────────────────── */
.rating {
  color: var(--color-muted);
  font-size: var(--fs-caption);
}

.rating__stars {
  color: var(--color-star);
  letter-spacing: .06em;
}

.rating__empty {
  color: var(--color-star-empty);
}

/* ── Stock status ──────────────────────────────────────────────────── */
.stock-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-muted);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-bold);
}

.stock-status::before {
  content: "";
  width: var(--status-dot);
  height: var(--status-dot);
  border-radius: var(--radius-round);
  background: var(--color-success-dot);
}

.stock-status--out::before {
  background: var(--color-disabled);
}

/* ── Age tag (on product images) ───────────────────────────────────── */
.age-tag {
  padding: var(--age-tag-pad);
  border-radius: var(--radius-tile);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--fs-badge);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  transform: rotate(var(--tile-rotate-age));
}

.age-tag--yellow { background: var(--tile-yellow); }
.age-tag--lime   { background: var(--tile-lime); }
.age-tag--orange { background: var(--tile-orange); }
.age-tag--teal   { background: var(--tile-teal); }
.age-tag--blue   { background: var(--tile-blue); }
.age-tag--green  { background: var(--tile-green); }

/* ── Toast (guide 2.7, proposed) ───────────────────────────────────── */
.toast-region {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: max-content;
  max-width: calc(100vw - var(--space-8));
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--toast-bg);
  color: var(--color-bg);
  box-shadow: var(--shadow-overlay);
  font-weight: var(--fw-bold);
  pointer-events: auto;
  animation: kz-toast-in var(--dur-base) var(--ease-out);
}

.toast a {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-heading);
  text-decoration: none;
  white-space: nowrap;
}

.toast--error {
  background: var(--color-error);
}

@keyframes kz-toast-in {
  from { opacity: 0; transform: translateY(var(--space-3)); }
}

/* ── Breadcrumbs (guide 2.6; shared by listings and the product page) ─ */
.breadcrumbs {
  color: var(--color-muted);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/";
  margin-inline: var(--space-2);
}

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

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs [aria-current] {
  color: var(--color-ink);
}

.breadcrumbs__back {
  display: none;
}

@media (max-width: 767px) {
  .breadcrumbs__list {
    display: none;
  }

  .breadcrumbs__back {
    display: inline-flex;
    gap: var(--space-1);
    color: var(--color-muted);
  }
}

/* ── Section title with a rotated colour square (mockups 1–2) ──────── */
.section-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  font-size: var(--fs-h3);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
}

.section-title__marker {
  flex: none;
  width: var(--section-marker);
  height: var(--section-marker);
  border-radius: var(--radius-marker);
  background: var(--tile-yellow);
  transform: rotate(var(--tile-rotate-marker));
}

.section-title__marker--blue   { background: var(--tile-blue); }
.section-title__marker--teal   { background: var(--tile-teal); }
.section-title__marker--orange { background: var(--tile-orange); }
.section-title__marker--lime   { background: var(--tile-lime); }
.section-title__marker--green  { background: var(--tile-green); }

@media (max-width: 767px) {
  .section-title {
    margin-bottom: var(--space-4);
  }
}

/* ── Stars (guide 2.5): filled = --color-star, empty = --color-star-empty ─ */
.stars {
  color: var(--color-star);
  letter-spacing: .1em;
  white-space: nowrap;
}

.stars__empty {
  color: var(--color-star-empty);
}

.stars--l {
  font-size: var(--fs-h5);
}

/* ── Quantity stepper (guide 2.2): L on the product page, M in the cart ─ */
.quantity {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: var(--btn-h-l);
  border: var(--border-w-strong) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.quantity .qty {
  width: var(--stepper-l-val);
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-heading);
  font-size: var(--fs-stepper-val);
  font-weight: var(--fw-extrabold);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.quantity .qty:focus-visible {
  border-radius: var(--radius-tile-lg);
}

.quantity__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--stepper-l-btn);
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--fs-stepper-sign);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.quantity__btn:disabled {
  color: var(--color-disabled);
  cursor: default;
}

.quantity--m {
  height: var(--stepper-m-h);
}

.quantity--m .qty    { width: var(--stepper-m-val); font-size: var(--fs-body-m); }
.quantity--m .quantity__btn { width: var(--stepper-m-btn); font-size: var(--fs-stepper-sign-m); }

/* Hidden quantity (sold individually) */
.quantity:has(input[type="hidden"]) {
  display: none;
}

.quantity__max {
  flex-basis: 100%;
  color: var(--color-muted);
  font-size: var(--fs-small);
}

/* ── Form fields (guide 2.2) ───────────────────────────────────────── */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

.form-field > label,
.form-field > legend {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}

.form-field .required {
  color: var(--color-muted);
}

.input,
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="password"],
.form-field input[type="number"],
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: var(--btn-h-m);
  padding: var(--space-3) var(--space-4);
  border: var(--border-field);
  border-radius: var(--radius-input);
  background: var(--color-input-bg);
  color: var(--color-ink);
  font-size: var(--fs-body-m);
}

.form-field textarea {
  resize: vertical;
}

.input:focus-visible,
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--color-ink);
}

/* ── Notices (guide 2.7): WooCommerce messages and theme notices ───── */
.woocommerce-notices-wrapper:empty {
  display: none;
}

.woocommerce-notices-wrapper,
.woocommerce-error {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.notice,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error > li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-input);
  background: var(--color-success-bg);
  color: var(--color-ink);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error > li::before,
.notice__tile {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--header-icon-box);
  height: var(--header-icon-box);
  border-radius: var(--radius-check);
  background: var(--color-new);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  transform: rotate(var(--tile-rotate-badge));
}

.woocommerce-message::before { content: "✓"; }
.woocommerce-info::before    { content: "i"; background: var(--tile-blue); }
.woocommerce-error > li::before { content: "!"; background: var(--color-error); color: var(--color-surface); }

.woocommerce-info,
.notice--info {
  background: var(--color-info-bg);
}

.woocommerce-error > li,
.notice--error {
  background: var(--color-error-bg);
}

.notice--warning {
  align-items: flex-start;
  background: var(--color-warning-bg);
}

.notice--warning .notice__tile {
  background: var(--tile-yellow);
}

.notice__text {
  flex: 1;
}

/* WooCommerce prints the action link first: show it last, as a text link */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  order: 2;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  white-space: nowrap;
}

/* Phones: the notice text keeps the full width and its button goes underneath */
@media (max-width: 767px) {
  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error > li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .woocommerce-message .button,
  .woocommerce-info .button,
  .woocommerce-error .button {
    grid-column: 2;
    justify-self: start;
    margin-left: 0;
  }
}

/* ── Logo-tile colours (backgrounds; text stays ink). Used by widgets, empty states, stores ─ */
.tile--yellow { background: var(--tile-yellow); }
.tile--orange { background: var(--tile-orange); }
.tile--lime   { background: var(--tile-lime); }
.tile--green  { background: var(--tile-green); }
.tile--teal   { background: var(--tile-teal); }
.tile--blue   { background: var(--tile-blue); }

.section-title__marker--tilt { transform: rotate(var(--marker-tilt)); }

/* ── Card icons: compare chosen = ink circle (the heart fills instead) ── */
.card-icon[data-kz-compare][aria-pressed="true"] {
  background: var(--color-ink);
  color: var(--color-surface);
  opacity: 1;
  pointer-events: auto;
}

.card-icon[data-kz-compare][aria-pressed="true"] .icon {
  fill: none;
}

/* ── Empty state (mockup 4, guide 2.7): letter tiles, heading, text, one button, chips ─ */
.empty-state {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--empty-max-w);
  margin-inline: auto;
  padding-top: var(--empty-pad-top); /* the page around it adds the end gap */
  text-align: center;
}

.empty-state[hidden] {
  display: none;
}

.empty-state__tiles {
  position: relative;
  display: flex;
  gap: var(--empty-tile-gap);
  margin-bottom: var(--space-3);
}

.empty-state__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--empty-tile-w);
  height: var(--empty-tile-h);
  border-radius: var(--empty-tile-radius);
  box-shadow: var(--empty-tile-shadow);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--fs-empty-tile);
  font-weight: var(--fw-black);
  line-height: 1;
}

.empty-state__tile:nth-child(1) { transform: var(--empty-tile-1); }
.empty-state__tile:nth-child(2) { transform: var(--empty-tile-2); }
.empty-state__tile:nth-child(3) { transform: var(--empty-tile-3); }
.empty-state__tile:nth-child(4) { transform: var(--empty-tile-4); }

.empty-state__star {
  position: absolute;
  top: var(--empty-star-y);
  right: var(--empty-star-x);
  width: var(--empty-star);
  height: var(--empty-star);
  pointer-events: none;
}

.empty-state__star--yellow { fill: var(--tile-yellow); }
.empty-state__star--orange { fill: var(--tile-orange); }
.empty-state__star--lime   { fill: var(--tile-lime); }
.empty-state__star--green  { fill: var(--tile-green); }
.empty-state__star--teal   { fill: var(--tile-teal); }
.empty-state__star--blue   { fill: var(--tile-blue); }

.empty-state__title {
  margin: 0;
  font-size: var(--fs-empty-title);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.empty-state__text {
  margin: 0;
  color: var(--color-text-2);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.empty-state__cta {
  margin-top: var(--space-1);
  height: var(--empty-cta-h);
  padding-inline: var(--empty-cta-pad);
}

.empty-state__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: var(--header-search-h);
  padding: 0 var(--space-1) 0 var(--space-5);
  border: var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.empty-state__search:focus-within {
  box-shadow: var(--focus-ring);
}

.empty-state__search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font-size: var(--fs-body-m);
}

.empty-state__search-input:focus-visible {
  outline: none;
}

.empty-state__more {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-6);
  text-align: left;
}

.empty-state__more-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h6);
  font-weight: var(--fw-extrabold);
}

.empty-state__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.empty-state__chip {
  display: inline-flex;
  align-items: center;
  height: var(--chip-l-h);
  padding-inline: var(--space-4);
  border: var(--border-chip);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.empty-state__chip:hover {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

/* Desktop: chips centred under the button */
@media (min-width: 768px) {
  .empty-state__more {
    align-items: center;
    text-align: center;
  }

  .empty-state__chips {
    justify-content: center;
  }
}

/* Theme form errors (proposed in the guide: --color-error) */
.field-error {
  margin: 0;
  color: var(--color-error);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

.field-error:empty {
  display: none;
}

.form-field [aria-invalid="true"] {
  border-color: var(--color-error);
}

.form-field__help,
.form-field__optional {
  color: var(--color-muted);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
}

/* 404 (built from the empty state) */
.page-empty {
  padding-bottom: var(--page-end-gap);
}

.page-empty .empty-state {
  padding-top: var(--space-12);
}

/* ── Content pages: page title + readable column (page.php, legal texts) ─ */
.page-article {
  max-width: var(--prose-max-w);
  padding-block: var(--space-9) var(--page-end-gap);
}

.page-article .entry-title {
  margin: 0 0 var(--space-6);
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
}

/* Prose: text from the editor or an imported document. :where() keeps it easy to override. */
.prose {
  color: var(--color-text-2);
  font-size: var(--fs-body-l);
  line-height: var(--lh-long);
  overflow-wrap: break-word;
}

.prose :where(p, ul, ol, table, blockquote) {
  margin: 0 0 var(--space-4);
}

.prose :where(h2, h3, h4) {
  color: var(--color-ink);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
}

.prose :where(h2) {
  margin: var(--space-9) 0 var(--space-3);
  font-size: var(--fs-h3);
}

.prose :where(h3) {
  margin: var(--space-7) 0 var(--space-2);
  font-size: var(--fs-h4);
}

.prose :where(h4) {
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--fs-h5);
}

.prose > :first-child {
  margin-top: 0;
}

.prose :where(ul, ol) {
  padding-left: var(--space-6);
}

.prose :where(li + li) {
  margin-top: var(--space-1);
}

.prose :where(a) {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.prose :where(a:hover) {
  color: var(--color-cta);
}

.prose :where(strong, b) {
  color: var(--color-ink);
}

.prose :where(table) {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-s);
}

.prose :where(th, td) {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-hairline);
  text-align: left;
  vertical-align: top;
}

.prose :where(th) {
  color: var(--color-ink);
  font-weight: var(--fw-bold);
}

/* Wide tables (privacy policy: 4 columns) scroll sideways on phones instead of the page. */
@media (max-width: 767px) {
  .prose :where(table) {
    display: block;
    overflow-x: auto;
  }
}

/* ── Fluent Forms (contact form): theme fields and button ──────────── */
.fluentform .ff-el-group {
  margin-bottom: var(--space-5);
}

.fluentform .ff-el-input--label {
  margin-bottom: var(--space-2);
}

.fluentform .ff-el-input--label label {
  color: var(--color-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}

.fluentform .ff-el-is-required.asterisk-right label::after {
  content: " *";
  color: var(--color-muted);
}

.fluentform .ff-el-form-control {
  display: block;
  width: 100%;
  min-height: var(--btn-h-m);
  padding: var(--space-3) var(--space-4);
  border: var(--border-field);
  border-radius: var(--radius-input);
  background: var(--color-input-bg);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--fs-body-m);
}

.fluentform textarea.ff-el-form-control {
  min-height: var(--textarea-min-h);
  resize: vertical;
}

.fluentform .ff-el-form-control:focus {
  border-color: var(--color-ink);
  outline: none;
  box-shadow: var(--focus-ring);
}

.fluentform .ff-el-is-error .ff-el-form-control {
  border-color: var(--color-error);
}

.fluentform .error,
.fluentform .text-danger {
  margin-top: var(--space-1);
  color: var(--color-error);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

.fluentform .ff-el-tc label,
.fluentform .ff_gdpr_field + span,
.fluentform .ff-el-form-check-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-text-2);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  cursor: pointer;
}

.fluentform .ff_tc_checkbox {
  flex: none;
  margin-right: var(--space-2);
}

.fluentform .ff-el-tc a,
.prose a,
.kz-text .prose a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.fluentform input[type="checkbox"] {
  flex: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
  margin: 0;
  accent-color: var(--color-ink);
}

.fluentform .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h-m);
  padding-inline: var(--btn-pad-m);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-size: var(--fs-btn-m);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.fluentform .ff-btn-submit:hover {
  background: var(--color-ink-hover);
}

.fluentform .ff-btn-submit:disabled {
  background: var(--color-line);
  color: var(--color-disabled);
}

.ff-message-success,
.ff-errors-in-stack {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-input);
  background: var(--color-success-bg);
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
}

.ff-errors-in-stack {
  background: var(--color-error-bg);
}

.ff-errors-in-stack:empty {
  display: none;
}

@media (max-width: 767px) {
  .page-article {
    padding-top: var(--space-6);
  }

  .fluentform .ff-btn-submit {
    width: 100%;
  }
}