/*
 * Output Pro design tokens and shared shell.
 * Brand typefaces intentionally use named stacks only. Licensed webfont files
 * must be supplied before any embedded-font declarations are added.
 */
:root {
  /* Semantic colour aliases over theme.json presets. */
  --op-color-brand-blue: var(--wp--preset--color--brand-blue, #1b75bc);
  --op-color-brand-orange: var(--wp--preset--color--brand-orange, #ff9e02);
  --op-color-orange-hover: var(--wp--preset--color--orange-hover, #ffad28);
  --op-color-black: var(--wp--preset--color--black, #000);
  --op-color-ink: var(--wp--preset--color--ink, #000);
  --op-color-charcoal: var(--wp--preset--color--charcoal, #58585b);
  --op-color-text: var(--wp--preset--color--body-grey, #808184);
  --op-color-text-muted: var(--wp--preset--color--muted-grey, #808184);
  --op-color-text-muted-on-light: #6d6f72;
  --op-color-text-muted-on-dark: #929496;
  --op-color-border: var(--wp--preset--color--border-grey, #b2b2b2);
  --op-color-light-grey: var(--wp--preset--color--light-grey, #c6c8ca);
  --op-color-surface: var(--wp--preset--color--surface, #fff);
  --op-color-white: var(--wp--preset--color--white, #fff);
  /* Foundation semantic aliases from Figma node 19:2. */
  --op-color-bg-brand: var(--wp--preset--color--bg-brand, var(--op-color-brand-blue));
  --op-color-bg-action: var(--wp--preset--color--bg-action, var(--op-color-brand-orange));
  --op-color-bg-canvas: var(--wp--preset--color--bg-canvas, var(--op-color-white));
  --op-color-bg-surface: var(--wp--preset--color--bg-surface, var(--op-color-white));
  --op-color-bg-subtle: #ebecec;
  --op-color-bg-disabled: #ebecec;
  --op-color-text-primary: var(--wp--preset--color--text-primary, var(--op-color-black));
  --op-color-text-secondary: var(--wp--preset--color--text-secondary, var(--op-color-text-muted));
  --op-color-text-disabled: #808184;
  --op-color-border-default: var(--wp--preset--color--border-default, var(--op-color-border));
  /* Interaction colours derived from the approved palette. */
  --op-color-blue-hover: #4089c6;
  --op-color-blue-active: #1b75bc;
  --op-color-orange-active: #b96e00;
  --op-color-blue-tint: #e8f3fb;
  --op-color-orange-tint: #fff0d6;
  /* Navigation values from Figma nodes 101:1206 and 59:119 / 59:139. */
  --op-color-nav-surface: #ebecec;
  --op-color-nav-mobile-active: #d1d3d4;
  --op-color-nav-toggle: #606060;
  --op-color-nav-text: #231f20;
  --op-color-nav-cta-blue: #2075bc;
  --op-color-nav-cta-blue-hover: #4089c6;
  --op-color-nav-cta-orange: #ff9e02;
  --op-color-nav-cta-orange-hover: #ffad28;
  --op-nav-width: 35.7144rem;
  --op-nav-height: 2.3963rem;
  --op-nav-mobile-width: 22.3rem;
  --op-nav-cta-width: 7.5844rem;
  --op-nav-cta-height: 2.1906rem;
  --op-font-display: var(--wp--preset--font-family--display, Inter, Arial, sans-serif);
  --op-font-body: var(--wp--preset--font-family--body, Inter, Arial, sans-serif);
  --op-font-system: var(--wp--preset--font-family--system, Inter, Arial, sans-serif);
  --op-font-weight-light: 300;
  --op-font-weight-regular: 400;
  --op-font-weight-demi: 600;
  --op-font-weight-bold: 700;
  --op-font-weight-extra: 800;
  --op-letter-spacing-tight: -0.0313rem;
  --op-letter-spacing-display: -0.0625rem;
  --op-letter-spacing-heading-2: -0.0156rem;
  --op-letter-spacing-ui: 0.02em;
  --op-letter-spacing-eyebrow: 0.14em;
  --op-line-height-display: 1.1429;
  --op-line-height-heading-1: 1.1818;
  --op-line-height-heading-2: 1.2353;
  --op-line-height-heading-3: 1.3077;
  --op-line-height-heading-4: 1.25;
  --op-line-height-body: 1.5;
  --op-line-height-small: 1.4286;
  --op-font-size-caption: var(--wp--preset--font-size--caption, 0.75rem);
  --op-font-size-small: var(--wp--preset--font-size--small, 0.875rem);
  --op-font-size-body: var(--wp--preset--font-size--body, 1rem);
  --op-font-size-lead: var(--wp--preset--font-size--lead, 1.125rem);
  --op-font-size-h4: var(--wp--preset--font-size--h4, 1.25rem);
  --op-font-size-h3: var(--wp--preset--font-size--h3, 1.625rem);
  --op-font-size-h2: var(--wp--preset--font-size--h2, 2.125rem);
  --op-font-size-h1: var(--wp--preset--font-size--h1, 2.75rem);
  --op-font-size-display: var(--wp--preset--font-size--display, 3.5rem);
  /* Tailwind-compatible spacing unit and default scale. One unit is 4px. */
  --op-spacing-unit: 0.25rem;
  --op-space-px: 1px;
  --op-space-0: 0;
  --op-space-0-5: calc(var(--op-spacing-unit) * 0.5);
  --op-space-1: var(--wp--preset--spacing--1, var(--op-spacing-unit));
  --op-space-1-5: calc(var(--op-spacing-unit) * 1.5);
  --op-space-2: var(--wp--preset--spacing--2, calc(var(--op-spacing-unit) * 2));
  --op-space-2-5: calc(var(--op-spacing-unit) * 2.5);
  --op-space-3: var(--wp--preset--spacing--3, calc(var(--op-spacing-unit) * 3));
  --op-space-3-5: calc(var(--op-spacing-unit) * 3.5);
  --op-space-4: var(--wp--preset--spacing--4, calc(var(--op-spacing-unit) * 4));
  --op-space-5: calc(var(--op-spacing-unit) * 5);
  --op-space-6: var(--wp--preset--spacing--6, calc(var(--op-spacing-unit) * 6));
  --op-space-7: calc(var(--op-spacing-unit) * 7);
  --op-space-8: var(--wp--preset--spacing--8, calc(var(--op-spacing-unit) * 8));
  --op-space-9: calc(var(--op-spacing-unit) * 9);
  --op-space-10: calc(var(--op-spacing-unit) * 10);
  --op-space-11: calc(var(--op-spacing-unit) * 11);
  --op-space-12: var(--wp--preset--spacing--12, calc(var(--op-spacing-unit) * 12));
  --op-space-14: calc(var(--op-spacing-unit) * 14);
  --op-space-16: var(--wp--preset--spacing--16, calc(var(--op-spacing-unit) * 16));
  --op-space-20: var(--wp--preset--spacing--20, calc(var(--op-spacing-unit) * 20));
  --op-space-24: var(--wp--preset--spacing--24, calc(var(--op-spacing-unit) * 24));
  --op-space-28: calc(var(--op-spacing-unit) * 28);
  --op-space-32: var(--wp--preset--spacing--32, calc(var(--op-spacing-unit) * 32));
  --op-space-36: calc(var(--op-spacing-unit) * 36);
  --op-space-40: calc(var(--op-spacing-unit) * 40);
  --op-space-44: calc(var(--op-spacing-unit) * 44);
  --op-space-48: calc(var(--op-spacing-unit) * 48);
  --op-space-52: calc(var(--op-spacing-unit) * 52);
  --op-space-56: calc(var(--op-spacing-unit) * 56);
  --op-space-60: calc(var(--op-spacing-unit) * 60);
  --op-space-64: calc(var(--op-spacing-unit) * 64);
  --op-space-72: calc(var(--op-spacing-unit) * 72);
  --op-space-80: calc(var(--op-spacing-unit) * 80);
  --op-space-96: calc(var(--op-spacing-unit) * 96);
  /* Foundation spacing aliases: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80. */
  --op-space-2xs: var(--wp--preset--spacing--2xs, var(--op-space-1));
  --op-space-xs: var(--wp--preset--spacing--xs, var(--op-space-2));
  --op-space-sm: var(--wp--preset--spacing--sm, var(--op-space-3));
  --op-space-md: var(--wp--preset--spacing--md, var(--op-space-4));
  --op-space-lg: var(--wp--preset--spacing--lg, var(--op-space-6));
  --op-space-xl: var(--wp--preset--spacing--xl, var(--op-space-8));
  --op-space-2xl: var(--wp--preset--spacing--2xl, var(--op-space-12));
  --op-space-3xl: var(--wp--preset--spacing--3xl, var(--op-space-16));
  --op-space-4xl: var(--wp--preset--spacing--4xl, var(--op-space-20));
  --op-spacing-2xs: var(--op-space-2xs);
  --op-spacing-xs: var(--op-space-xs);
  --op-spacing-sm: var(--op-space-sm);
  --op-spacing-md: var(--op-space-md);
  --op-spacing-lg: var(--op-space-lg);
  --op-spacing-xl: var(--op-space-xl);
  --op-spacing-2xl: var(--op-space-2xl);
  --op-spacing-3xl: var(--op-space-3xl);
  --op-spacing-4xl: var(--op-space-4xl);
  --op-radius-none: 0;
  --op-radius-xs: 0.25rem;
  --op-radius-sm: 0.25rem;
  --op-radius-md: 0.5rem;
  --op-radius-lg: 1rem;
  --op-radius-xl: 1.5rem;
  --op-radius-full: 624.9375rem;
  --op-radius-pill: var(--op-radius-full);
  --op-elevation-1: 0 0.0625rem 0.1875rem rgb(0 0 0 / 12%);
  --op-elevation-2: 0 0.25rem 0.625rem rgb(0 0 0 / 16%);
  --op-elevation-3: 0 0.625rem 1.5rem rgb(0 0 0 / 20%);
  --op-layout-content: 70rem;
  --op-layout-wide: 80rem;
  --op-layout-page: 66.1737rem;
  --op-layout-prose: 45rem;
  --op-layout-form: 52rem;
  --op-gutter: 1.25rem;
  --op-page-gutter: var(--op-gutter);
  /* Documentation tokens; media queries below use the corresponding literals. */
  --op-breakpoint-mobile: 420px;
  --op-breakpoint-tablet: 768px;
  --op-breakpoint-desktop: 1024px;
  --op-breakpoint-wide: 1280px;
  --op-aspect-hero: 8 / 3;
  --op-aspect-hero-mobile: 4 / 3;
  --op-aspect-product: 1 / 1;
  --op-aspect-portrait: 3 / 4;
  --op-aspect-case-study: 3 / 2;
  --op-aspect-video: 16 / 9;
  --op-transition-fast: 160ms ease;
  --op-motion-fast: 140ms;
  --op-motion-standard: 240ms;
  --op-motion-slow: 320ms;
  --op-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --op-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --op-focus-ring: 0 0 0 0.125rem var(--op-color-white), 0 0 0 0.3125rem var(--op-color-brand-orange);
  --op-button-height-compact: 1.625rem;
  --op-button-height-default: 2.125rem;
  --op-button-height-large: 2.125rem;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--op-color-bg-canvas);
  color: var(--op-color-text-primary);
  font-family: var(--op-font-body);
  font-size: var(--op-font-size-body);
  line-height: var(--op-line-height-body);
  text-rendering: optimizelegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--op-color-ink);
  font-family: var(--op-font-display);
  letter-spacing: var(--op-letter-spacing-tight);
  text-wrap: balance;
}

/* Foundation type scale from Figma node 19:2. */
h1 {
  font-size: var(--op-font-size-h1);
  font-weight: var(--op-font-weight-bold);
  letter-spacing: -0.0313rem;
  line-height: 3.25rem;
}

h2 {
  font-size: var(--op-font-size-h2);
  font-weight: var(--op-font-weight-bold);
  letter-spacing: -0.0156rem;
  line-height: 2.625rem;
}

h3 {
  font-size: var(--op-font-size-h3);
  font-weight: var(--op-font-weight-demi);
  letter-spacing: 0;
  line-height: 2.125rem;
}

.op-body-small {
  font-size: var(--op-font-size-small);
  font-weight: var(--op-font-weight-regular);
  line-height: 1.25rem;
}

.op-label {
  font-family: Inter, var(--op-font-system);
  font-size: var(--op-font-size-caption);
  font-weight: 500;
  letter-spacing: 0.025rem;
  line-height: 1rem;
}

p,
li {
  text-wrap: pretty;
}

img {
  height: auto;
  max-width: 100%;
}

.op-container,
.op-page-container,
.op-about__story,
.op-case-studies,
.op-contact-details,
.op-get-a-quote-team,
.outputpro-header__inner,
.outputpro-footer__inner {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--op-layout-wide);
  padding-inline: var(--op-gutter);
  width: 100%;
}

.op-page-container,
.op-about__story,
.op-case-studies,
.op-contact-details,
.op-get-a-quote-team {
  padding-inline: var(--op-page-gutter);
}

/* Main page rails follow the product category content at every breakpoint. */
@media (width <= 767px) {
  :root {
    --op-page-gutter: 1.25rem;
  }
}
.op-container--content {
  max-width: var(--op-layout-content);
}

.op-container--prose {
  max-width: var(--op-layout-prose);
}

.op-container--form {
  max-width: var(--op-layout-form);
}

.outputpro-header {
  background: transparent;
  border: 0;
  color: var(--op-color-ink);
  position: relative;
  z-index: 20;
}

.outputpro-header::after {
  background: linear-gradient(to bottom, rgba(24, 23, 26, 0.2), transparent);
  content: "";
  display: block;
  height: 0.625rem;
  margin: 0 auto -0.0625rem;
  max-width: calc(100% - 0.125rem);
  opacity: 0.45;
  pointer-events: none;
  position: absolute;
  right: 0;
  left: 0;
}

body.home .outputpro-header::after {
  display: none;
}

.outputpro-header__inner {
  align-items: center;
  display: flex;
  gap: 0;
  justify-content: space-between;
  margin-inline: auto;
  max-width: 52.5rem;
  padding: 0 0.75rem 0 0;
}

.home .wp-block-post-title {
  display: none;
}

/* The nested header wrapper is emitted with WordPress layout helpers. Reset
 * their flow margins so both items share the same vertical centerline, and
 * keep the navigation rail pinned to the right of the centered content. */
.outputpro-header__inner.has-global-padding {
  box-sizing: border-box;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 90vw;
  padding: 0 0.75rem 0 0;
  width: 100%;
}

.outputpro-header__logo {
  display: block;
  height: auto;
  object-fit: contain;
  width: 13.4375rem;
}

.outputpro-header__brand {
  align-items: center;
  display: flex;
  flex: 0 0 13.4375rem;
  line-height: 1;
  text-decoration: none;
}

.outputpro-header__mobile-quote {
  display: none;
}

.outputpro-header__mobile-actions {
  display: none;
}

/* Custom nav toggle; shown only on mobile via _header-compact.scss. */
.outputpro-header__nav-toggle {
  display: none;
}

.outputpro-header__inner > * {
  max-width: none;
  margin-block: 0 !important;
  margin-inline: 0 !important;
}

.outputpro-header__inner > .outputpro-header__nav {
  margin-left: auto !important;
}

.outputpro-header .wp-block-site-logo {
  display: block;
  flex: 0 0 13.4244rem;
  line-height: 0;
  margin: 0;
  width: 13.4244rem;
}

.outputpro-header .wp-block-site-logo a {
  display: block;
}

.outputpro-header .wp-block-site-logo img {
  display: block;
  height: 2.3788rem;
  max-height: 2.3788rem;
  object-fit: contain;
  width: 13.4244rem;
}

.outputpro-header__nav-shell {
  display: contents;
}

.outputpro-header__nav-scroll {
  display: none;
}

.outputpro-header__nav-shell > nav.outputpro-header__nav {
  --op-nav-item-padding-inline: clamp(0.6875rem, calc(9vw - 70px), 22px);
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex: 0 1 auto;
  margin: 0;
  min-width: 0;
  padding: 0;
  width: auto;
}

nav.outputpro-header__nav > .wp-block-navigation__container,
nav.outputpro-header__nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
  align-items: center;
  background: var(--op-color-nav-surface);
  border-radius: var(--op-radius-pill);
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  height: 44px;
  justify-content: flex-start;
  min-height: 44px;
  margin: 0;
  overflow-x: auto;
  padding: 0 2px;
  scrollbar-width: none;
  white-space: nowrap;
  width: 100%;
}
nav.outputpro-header__nav > .wp-block-navigation__container::-webkit-scrollbar,
nav.outputpro-header__nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container::-webkit-scrollbar {
  display: none;
}

nav.outputpro-header__nav > .wp-block-navigation__container > .wp-block-navigation-item,
nav.outputpro-header__nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item {
  flex: 0 0 auto;
  margin: 0;
}

nav.outputpro-header__nav > .wp-block-navigation__responsive-container:not(.is-menu-open),
nav.outputpro-header__nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-close,
nav.outputpro-header__nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog,
nav.outputpro-header__nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
  width: 100%;
}

nav.outputpro-header__nav .wp-block-navigation-item__content {
  color: var(--op-color-nav-text);
  font-family: var(--op-font-system);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

nav.outputpro-header__nav .wp-block-navigation-item__content:focus-visible {
  border-radius: var(--op-radius-pill);
  outline: 2px solid var(--op-color-nav-cta-blue);
  outline-offset: 2px;
}

nav.outputpro-header__nav .outputpro-header__link {
  align-items: center;
  background: transparent;
  border-radius: 40px;
  display: inline-flex;
  height: 40px;
  transition: background-color var(--op-transition-fast);
}

nav.outputpro-header__nav .outputpro-header__link > .wp-block-navigation-item__content {
  align-items: center;
  display: flex;
  height: 100%;
  padding-inline: var(--op-nav-item-padding-inline);
}

nav.outputpro-header__nav .outputpro-header__link:hover,
nav.outputpro-header__nav .outputpro-header__link:focus-within,
nav.outputpro-header__nav .outputpro-header__link.current-menu-item,
nav.outputpro-header__nav .outputpro-header__link.current-menu-ancestor {
  background: var(--op-color-white);
}

nav.outputpro-header__nav .outputpro-header__cta {
  align-items: center;
  background: var(--op-color-nav-cta-orange);
  border-radius: 40px;
  color: var(--op-color-ink);
  display: inline-flex;
  font-size: 0.8125rem;
  flex: 0 0 auto;
  height: 40px;
  justify-content: center;
  transition: background-color var(--op-transition-fast), color var(--op-transition-fast);
}

nav.outputpro-header__nav .outputpro-header__cta > .wp-block-navigation-item__content {
  align-items: center;
  color: inherit;
  display: flex;
  font-size: 0.8125rem;
  font-weight: 700;
  height: 100%;
  justify-content: center;
  padding: 0 var(--op-nav-item-padding-inline);
}

.outputpro-header--cta-blue nav.outputpro-header__nav .outputpro-header__cta {
  background: var(--op-color-nav-cta-blue);
  color: var(--op-color-white);
}

body.home .outputpro-header--cta-blue nav.outputpro-header__nav .outputpro-header__cta {
  background: var(--op-color-nav-cta-orange);
  color: var(--op-color-ink);
}

.outputpro-header--cta-blue nav.outputpro-header__nav .outputpro-header__cta:hover,
.outputpro-header--cta-blue nav.outputpro-header__nav .outputpro-header__cta:focus-within {
  background: var(--op-color-nav-cta-blue-hover);
}

body.home .outputpro-header--cta-blue nav.outputpro-header__nav .outputpro-header__cta:hover,
body.home .outputpro-header--cta-blue nav.outputpro-header__nav .outputpro-header__cta:focus-within {
  background: var(--op-color-nav-cta-orange-hover);
}

.outputpro-header--cta-orange nav.outputpro-header__nav .outputpro-header__cta:hover,
.outputpro-header--cta-orange nav.outputpro-header__nav .outputpro-header__cta:focus-within {
  background: var(--op-color-nav-cta-orange-hover);
}

/* The template part already spans the page; 100vw also includes scrollbars. */
.outputpro-footer {
  --op-color-text-muted: var(--op-color-text-muted-on-dark);
  background: var(--op-color-ink);
  box-sizing: border-box;
  color: var(--op-color-white);
  margin-block-start: var(--op-space-20);
  margin-inline: auto;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding-block: 0;
  width: 100%;
}

.outputpro-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)) minmax(0, 1.5fr);
  min-height: 9.125rem;
  padding-block: 1.4375rem;
  padding-inline: clamp(1.75rem, 8.4vw, 9rem) clamp(1.75rem, 6vw, 6.25rem);
  position: relative;
}

.outputpro-footer__brand {
  grid-column: 1;
  grid-row: 1;
  text-align: center;
}

.outputpro-footer__brand-link {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
}

.outputpro-footer__mark {
  display: block;
  height: 2.25rem;
  position: relative;
  width: 2.25rem;
}

.outputpro-footer__mark > img:first-child {
  display: block;
  height: 2.25rem;
  width: 2.25rem;
}

.outputpro-footer__mark-arrow-a,
.outputpro-footer__mark-arrow-b {
  position: absolute;
}

.outputpro-footer__mark-arrow-a {
  left: 0.5625rem;
  top: 1.1875rem;
}

.outputpro-footer__mark-arrow-b {
  left: 0.875rem;
  top: 0.5rem;
}

.outputpro-footer__wordmark {
  color: var(--op-color-text-muted);
  font-family: var(--op-font-display);
  font-size: 1.1875rem;
  font-weight: var(--op-font-weight-bold);
  line-height: 1;
  text-transform: uppercase;
}

.outputpro-footer__strapline {
  color: var(--op-color-text-muted);
  font-size: 0.625rem;
  line-height: 1.2;
  margin: 0.25rem 0 0;
}

.outputpro-footer__menus {
  display: contents;
}

.outputpro-footer__column,
.outputpro-footer__menu {
  min-width: 0;
}

.outputpro-footer__contact {
  grid-column: 2;
  grid-row: 1;
}

.outputpro-footer__menus > .outputpro-footer__menu--policies {
  grid-column: 3;
  grid-row: 1;
}

.outputpro-footer__menus > .outputpro-footer__menu--quick-links {
  grid-column: 4;
  grid-row: 1;
}

.outputpro-footer__menus > .outputpro-footer__menu--company {
  grid-column: 5;
  grid-row: 1;
}

.outputpro-footer__column h2,
.outputpro-footer__details > summary {
  color: var(--op-color-white);
  font-family: var(--op-font-body);
  font-size: 0.9375rem;
  font-weight: var(--op-font-weight-bold);
  line-height: 1.2;
}

.outputpro-footer__column h2 {
  margin: 0 0 0.6875rem;
}

.outputpro-footer__details {
  border: 0;
  margin: 0;
  padding: 0;
}

.outputpro-footer__details-content {
  overflow: hidden;
}

.outputpro-footer__details > summary {
  cursor: pointer;
  list-style: none;
  margin: 0 0 0.6875rem;
}

.outputpro-footer__details > summary::-webkit-details-marker {
  display: none;
}

.outputpro-footer__column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.outputpro-footer__navigation.wp-block-navigation {
  margin-block-start: 0;
}

.outputpro-footer__navigation .wp-block-navigation__container {
  align-items: flex-start;
  gap: 0.1875rem;
}

.outputpro-footer__navigation .wp-block-navigation-item {
  margin: 0;
}

.outputpro-footer__navigation .wp-block-navigation-item__label {
  overflow-wrap: anywhere;
}

.outputpro-footer__column li,
.outputpro-footer__address {
  color: var(--op-color-text-muted);
  font-size: 0.75rem;
  font-style: normal;
  line-height: 1.2;
}

.outputpro-footer__column li + li {
  margin-top: 0;
}

.outputpro-footer__address,
.outputpro-footer__address p {
  margin: 0;
}

.outputpro-footer h2,
.outputpro-footer h3,
.outputpro-footer h4,
.outputpro-footer a {
  color: var(--op-color-white);
}

.outputpro-footer a {
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
}

.outputpro-footer__column a {
  color: var(--op-color-text-muted);
  text-decoration: none;
}

.outputpro-footer a:hover {
  text-decoration-color: currentcolor;
}

.outputpro-footer__column a:hover,
.outputpro-footer__column a:focus-visible {
  color: var(--op-color-white);
}

.outputpro-footer__contact-link {
  display: none;
}

.outputpro-footer__social {
  display: flex;
  flex-direction: column;
  grid-column: 6;
  grid-row: 1;
  min-width: 0;
  padding-top: 0.4375rem;
}

.outputpro-footer__social-links {
  align-items: flex-start;
  display: flex;
  gap: 1.35rem;
  margin: 0;
  padding: 0;
}

.outputpro-footer__social-links .wp-social-link {
  background: transparent;
  margin: 0;
}

.outputpro-footer__social .wp-block-social-link-anchor {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: var(--op-color-text-muted);
  display: inline-flex;
  height: 1.4638rem;
  line-height: 0;
  padding: 0;
  width: 1.4638rem;
}

/* Figma footer node 168:2681 uses the local grey icon exports. Keep the native
 * social blocks for editable URLs and labels, and replace only their glyph. */
.outputpro-footer__social .wp-social-link-facebook .wp-block-social-link-anchor {
  background-image: url("../images/footer-facebook.svg");
  height: 1.4387rem;
  width: 1.4394rem;
}

.outputpro-footer__social .wp-social-link-linkedin .wp-block-social-link-anchor {
  background-image: url("../images/footer-linkedin.svg");
}

.outputpro-footer__social .wp-social-link-youtube .wp-block-social-link-anchor {
  background-image: url("../images/footer-youtube.svg");
  height: 1.4625rem;
  width: 1.4631rem;
}

.outputpro-footer__social svg {
  display: none;
}

.outputpro-footer__copyright {
  color: var(--op-color-text-muted);
  font-size: 0.75rem;
  line-height: 1.2;
  margin: 0;
  position: absolute;
  right: clamp(1.75rem, 6vw, 6.25rem);
  bottom: 0.4375rem;
}

@media (width <= 900px) {
  .outputpro-footer__inner {
    gap: var(--op-space-lg) var(--op-space-md);
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
    min-height: 0;
    padding: 1.75rem var(--op-gutter);
  }
  .outputpro-footer__brand {
    grid-column: 1/-1;
  }
  .outputpro-footer__brand-link {
    flex-direction: row;
    gap: 0.625rem;
    justify-content: center;
  }
  .outputpro-footer__mark,
  .outputpro-footer__mark > img:first-child {
    height: 2.625rem;
    width: 2.625rem;
  }
  .outputpro-footer__mark-arrow-a {
    left: 0.6563rem;
    top: 1.3854rem;
  }
  .outputpro-footer__mark-arrow-b {
    left: 1.0208rem;
    top: 0.5833rem;
  }
  .outputpro-footer__wordmark {
    font-size: 1.375rem;
  }
  .outputpro-footer__strapline,
  .outputpro-footer__contact h2 {
    display: none;
  }
  .outputpro-footer__contact {
    grid-column: 1;
    grid-row: 2;
  }
  .outputpro-footer__address {
    font-size: 0.75rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .outputpro-footer__menus {
    display: block;
    grid-column: 2;
    grid-row: 2/span 2;
    margin: 0 !important;
  }
  .outputpro-footer__menu {
    margin: 0 !important;
  }
  .outputpro-footer__details {
    border-top: 1px solid var(--op-color-text-muted);
  }
  .outputpro-footer__details > summary,
  .outputpro-footer__contact-link {
    box-sizing: border-box;
    color: var(--op-color-text-muted);
    font-size: 0.9375rem;
    font-weight: var(--op-font-weight-bold);
    line-height: 1.2;
    margin: 0;
    min-height: 2.125rem;
    padding: 0.5rem 1.75rem 0.5rem 0;
    position: relative;
  }
  .outputpro-footer__details > summary::after,
  .outputpro-footer__contact-link::after {
    border-bottom: 2px solid currentcolor;
    border-right: 2px solid currentcolor;
    content: "";
    height: 0.4rem;
    position: absolute;
    right: 0.375rem;
    top: 50%;
    transform: translateY(-65%) rotate(-45deg);
    transition: transform var(--op-transition-fast);
    width: 0.4rem;
  }
  .outputpro-footer__details[open] > summary::after {
    transform: translateY(-75%) rotate(45deg);
  }
  .outputpro-footer__details .outputpro-footer__navigation {
    padding: 0 0 0.75rem;
  }
  .outputpro-footer__details .wp-block-navigation-item__content {
    font-size: 0.75rem;
    line-height: 1.35;
  }
  .outputpro-footer__contact-link {
    border-block: 1px solid var(--op-color-text-muted);
    display: block;
  }
  .outputpro-footer__contact-link a {
    color: inherit;
    display: block;
    text-decoration: none;
  }
  .outputpro-footer__social {
    grid-column: 1;
    grid-row: 3;
    justify-content: flex-end;
    padding-top: 0;
  }
  .outputpro-footer__social-links {
    gap: 1.25rem;
  }
  .outputpro-footer__copyright {
    align-self: auto;
    font-size: 0.75rem;
    grid-column: 1/-1;
    grid-row: 4;
    line-height: 1.35;
    position: static;
    text-align: center;
  }
}
@media (width <= 350px) {
  .outputpro-footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .outputpro-footer__brand,
  .outputpro-footer__contact,
  .outputpro-footer__menus,
  .outputpro-footer__social,
  .outputpro-footer__copyright {
    grid-column: 1;
    grid-row: auto;
  }
  .outputpro-footer__menus {
    width: 100%;
  }
}
/**
 * Breadcrumb section wrapper — full-width grey bar used by all pages
 * except product category (which renders its own inline crumb on white).
 * The inner .op-container handles content alignment.
 */
.outputpro-breadcrumb-section {
  background: var(--op-color-bg-subtle);
  background-image: url("../images/breadcrumb-bg.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
}

.wp-block-button.op-button,
.wp-block-button[class*=op-button--] {
  background: none;
  border: 0;
  border-radius: 0;
  height: auto;
  min-height: 0;
  padding: 0;
}

:is(.wp-element-button, .wp-block-button__link, .op-button:not(.wp-block-button)) {
  align-items: center;
  appearance: none;
  background: var(--op-color-brand-blue);
  border: 0;
  border-radius: var(--op-radius-pill);
  box-sizing: border-box;
  color: var(--op-color-white);
  cursor: pointer;
  display: inline-flex;
  font-family: Inter, var(--op-font-system);
  font-size: 0.875rem;
  font-weight: 600;
  gap: var(--op-space-2);
  justify-content: center;
  letter-spacing: 0;
  line-height: 1.125rem;
  height: var(--op-button-height-default);
  min-height: var(--op-button-height-default);
  padding: 0.5rem 1rem;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--op-transition-fast), border-color var(--op-transition-fast), color var(--op-transition-fast), transform var(--op-transition-fast);
}
:is(.wp-element-button, .wp-block-button__link, .op-button:not(.wp-block-button)):hover {
  background: var(--op-color-blue-hover);
  border-color: var(--op-color-blue-hover);
  color: var(--op-color-white);
}
:is(.wp-element-button, .wp-block-button__link, .op-button:not(.wp-block-button)):active {
  background: var(--op-color-blue-active);
  border-color: var(--op-color-blue-active);
  color: var(--op-color-white);
  transform: translateY(0.0625rem);
}
:is(.wp-element-button, .wp-block-button__link, .op-button:not(.wp-block-button)):focus-visible {
  border-radius: var(--op-radius-pill);
}
:is(.wp-element-button, .wp-block-button__link, .op-button:not(.wp-block-button)):disabled, :is(.wp-element-button, .wp-block-button__link, .op-button:not(.wp-block-button))[aria-disabled=true] {
  background: var(--op-color-bg-disabled);
  border-color: #b2b2b2;
  color: var(--op-color-text-disabled);
  cursor: not-allowed;
  opacity: 1;
  pointer-events: none;
  transform: none;
}

:is(.op-button:not(.wp-block-button), .wp-block-button.op-button > .wp-block-button__link, .op-button--small:not(.wp-block-button), .wp-block-button.op-button--small > .wp-block-button__link, .op-button--sm:not(.wp-block-button), .wp-block-button.op-button--sm > .wp-block-button__link, .op-button--compact:not(.wp-block-button), .wp-block-button.op-button--compact > .wp-block-button__link) {
  font-size: 0.75rem;
  line-height: 1rem;
  height: 1.625rem;
  min-height: 1.625rem;
  padding: 0.3125rem 1rem;
}

:is(.op-button--medium:not(.wp-block-button), .wp-block-button.op-button--medium > .wp-block-button__link, .op-button--md:not(.wp-block-button), .wp-block-button.op-button--md > .wp-block-button__link, .op-button--large:not(.wp-block-button), .wp-block-button.op-button--large > .wp-block-button__link, .op-button--lg:not(.wp-block-button), .wp-block-button.op-button--lg > .wp-block-button__link) {
  font-size: 0.875rem;
  line-height: 1.125rem;
  height: 2.125rem;
  min-height: 2.125rem;
  padding: 0.5rem 1rem;
}

:is(.wp-block-button.is-style-outputpro-primary > .wp-block-button__link, .op-button--primary:not(.wp-block-button)) {
  background: #1b75bc;
  border-color: #1b75bc;
  color: #fff;
}
:is(.wp-block-button.is-style-outputpro-primary > .wp-block-button__link, .op-button--primary:not(.wp-block-button)):hover, :is(.wp-block-button.is-style-outputpro-primary > .wp-block-button__link, .op-button--primary:not(.wp-block-button)).is-preview-hover {
  background: #4089c6;
  border-color: #4089c6;
  color: #fff;
}

:is(.wp-block-button.is-style-outputpro-secondary > .wp-block-button__link, .op-button--secondary:not(.wp-block-button)),
:is(.wp-block-button.is-style-accent > .wp-block-button__link, .op-button--accent:not(.wp-block-button)) {
  background: var(--op-color-brand-orange);
  border-color: var(--op-color-brand-orange);
  color: var(--op-color-black);
}
:is(.wp-block-button.is-style-outputpro-secondary > .wp-block-button__link, .op-button--secondary:not(.wp-block-button)):hover, :is(.wp-block-button.is-style-outputpro-secondary > .wp-block-button__link, .op-button--secondary:not(.wp-block-button)).is-preview-hover,
:is(.wp-block-button.is-style-accent > .wp-block-button__link, .op-button--accent:not(.wp-block-button)):hover,
:is(.wp-block-button.is-style-accent > .wp-block-button__link, .op-button--accent:not(.wp-block-button)).is-preview-hover {
  background: #ffad28;
  border-color: #ffad28;
  color: var(--op-color-black);
}
:is(.wp-block-button.is-style-outputpro-secondary > .wp-block-button__link, .op-button--secondary:not(.wp-block-button)):active,
:is(.wp-block-button.is-style-accent > .wp-block-button__link, .op-button--accent:not(.wp-block-button)):active {
  background: var(--op-color-orange-active);
  border-color: var(--op-color-orange-active);
  color: var(--op-color-white);
}

:is(.wp-block-button.is-style-outputpro-outline > .wp-block-button__link, .wp-block-button.is-style-outline > .wp-block-button__link, .op-button--outline:not(.wp-block-button)) {
  background: #fff;
  background-clip: padding-box;
  border: 2px solid #000;
  border-radius: var(--op-radius-pill);
  color: #000;
  height: 2.125rem;
  min-height: 2.125rem;
  overflow: hidden;
}
:is(.wp-block-button.is-style-outputpro-outline > .wp-block-button__link, .wp-block-button.is-style-outline > .wp-block-button__link, .op-button--outline:not(.wp-block-button)):hover, :is(.wp-block-button.is-style-outputpro-outline > .wp-block-button__link, .wp-block-button.is-style-outline > .wp-block-button__link, .op-button--outline:not(.wp-block-button)).is-preview-hover {
  background: var(--op-color-bg-subtle);
  border-color: #404040;
  color: #404040;
}

.op-button--outline:not(.wp-block-button) {
  height: 1.625rem;
  min-height: 1.625rem;
}

.op-button--outline:is(.op-button--medium, .op-button--md, .op-button--large, .op-button--lg):not(.wp-block-button),
.wp-block-button.op-button--outline:is(.op-button--medium, .op-button--md, .op-button--large, .op-button--lg) > .wp-block-button__link {
  height: 2.125rem;
  min-height: 2.125rem;
}

.wp-block-button:is(.op-button--small, .op-button--sm, .op-button--compact).is-style-outputpro-outline > .wp-block-button__link {
  height: 1.625rem;
  min-height: 1.625rem;
}

:is(.wp-block-button.is-style-outputpro-dark > .wp-block-button__link, .op-button--dark:not(.wp-block-button)) {
  background: #000;
  border-color: #000;
  color: #fff;
}
:is(.wp-block-button.is-style-outputpro-dark > .wp-block-button__link, .op-button--dark:not(.wp-block-button)):hover, :is(.wp-block-button.is-style-outputpro-dark > .wp-block-button__link, .op-button--dark:not(.wp-block-button)).is-preview-hover {
  background: #404040;
  border-color: #404040;
  color: #fff;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  border-radius: var(--op-radius-xs);
  box-shadow: var(--op-focus-ring);
  outline: 0.125rem solid transparent;
  outline-offset: 0.1875rem;
}

.op-media--hero {
  aspect-ratio: var(--op-aspect-hero-mobile);
  object-fit: cover;
  width: 100%;
}

.op-media--product {
  aspect-ratio: var(--op-aspect-product);
  object-fit: contain;
  width: 100%;
}

.op-media--portrait {
  aspect-ratio: var(--op-aspect-portrait);
  object-fit: cover;
  width: 100%;
}

.op-media--case-study {
  aspect-ratio: var(--op-aspect-case-study);
  object-fit: cover;
  width: 100%;
}

.op-media--video {
  aspect-ratio: var(--op-aspect-video);
  width: 100%;
}

@media (width >= 420px) {
  :root {
    --op-gutter: 1.5rem;
  }
}
@media (width >= 768px) {
  :root {
    --op-gutter: 2rem;
  }
  .outputpro-header__inner {
    flex-wrap: nowrap;
  }
  .op-media--hero {
    aspect-ratio: var(--op-aspect-hero);
  }
}
@media (width >= 901px) {
  .outputpro-header__inner {
    min-height: 4.875rem;
  }
}
@media (width >= 1024px) {
  :root {
    --op-gutter: 4rem;
  }
}
@media (width >= 1280px) {
  .outputpro-header .wp-block-navigation-item__content {
    font-size: var(--op-font-size-body);
  }
}
/* Developer component gallery */
.op-component-gallery {
  background: #f5f6f6;
  padding: clamp(3rem, 7vw, 7rem) 0;
}

.op-component-gallery__intro {
  border-bottom: 1px solid var(--op-color-border);
  margin-bottom: clamp(3rem, 6vw, 6rem);
  padding-bottom: 2rem;
}

.op-eyebrow {
  color: var(--op-color-brand-blue);
  font-family: var(--op-font-system);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.0875rem;
  line-height: 1rem;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.op-component-gallery h1 {
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 0.93;
  margin: 0;
  max-width: 10ch;
}

.op-lead {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  max-width: 38rem;
}

.op-component-gallery__meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 2rem;
}

.op-component-gallery__meta span {
  color: var(--op-color-text-muted);
  font-family: var(--op-font-system);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.op-component-gallery code {
  background: #fff;
  border: 1px solid var(--op-color-border);
  border-radius: 0.1875rem;
  color: var(--op-color-ink);
  font-family: ui-monospace, monospace;
  font-size: 0.78rem;
  padding: 0.35rem 0.55rem;
}

.op-component-section {
  border-top: 1px solid var(--op-color-border);
  margin-top: 2rem;
  padding-top: 1.25rem;
}

.op-component-section__heading {
  align-items: baseline;
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.op-component-section__heading span {
  color: var(--op-color-brand-orange);
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
}

.op-component-section h2 {
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  margin: 0;
}

.op-pattern-inventory__note {
  max-width: 48rem;
}

.op-pattern-list {
  border-top: 1px solid var(--op-color-border);
}

.op-pattern-list__item {
  align-items: center;
  border-bottom: 1px solid var(--op-color-border);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 3rem minmax(12rem, 1fr) minmax(11rem, 0.7fr) auto;
  padding: 0.8rem 0;
}

.op-pattern-list__item > span {
  color: var(--op-color-brand-orange);
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
}

.op-pattern-list__item strong {
  color: var(--op-color-ink);
}

.op-pattern-list__item code {
  background: transparent;
  border: 0;
  padding: 0;
}

.op-pattern-list__item em {
  color: var(--op-color-text-muted);
  font-size: 0.8rem;
  font-style: normal;
}

.op-pattern-preview-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}

.op-pattern-preview {
  background: #fff;
  border: 1px solid var(--op-color-border);
  min-height: 7rem;
  padding: 1.25rem;
}

.op-pattern-preview .op-eyebrow {
  margin-bottom: 1rem;
}

.op-pattern-preview .outputpro-breadcrumb {
  margin: 0;
}

.op-demo-button {
  align-items: center;
  display: inline-flex;
  font-family: var(--op-font-system);
  font-size: 0.8rem;
  font-weight: 800;
  gap: 1rem;
  justify-content: center;
  min-height: 3rem;
  padding: 0.65rem 1.3rem;
  text-decoration: none;
  text-transform: uppercase;
}

.op-pattern-preview--not-found h3 {
  margin: 0 0 0.5rem;
}

.op-pattern-preview--not-found p {
  margin-top: 0;
}

.op-pattern-preview--not-found .op-demo-button {
  display: inline-flex;
  min-height: 2.5rem;
}

.op-preview-panel {
  padding: clamp(1.5rem, 4vw, 3.5rem);
}

.op-preview-panel--dark {
  background: var(--op-color-ink);
  color: #fff;
}

.op-preview-panel--dark h3 {
  color: #fff;
}

.op-display {
  font-size: var(--op-font-size-display);
  font-weight: var(--op-font-weight-bold);
  letter-spacing: var(--op-letter-spacing-display);
  line-height: 4rem;
  margin: 0 0 1rem;
  max-width: 9ch;
}

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

.op-swatch-grid > div {
  display: grid;
  gap: 0.35rem;
}

.op-swatch {
  aspect-ratio: 1;
  display: block;
  max-width: 5rem;
  width: 100%;
}

.op-swatch--blue {
  background: #1b75bc;
}

.op-swatch--orange {
  background: #ff9e02;
}

.op-swatch--ink {
  background: #000;
}

.op-swatch--surface {
  background: var(--op-color-bg-surface);
  border: 1px solid var(--op-color-border);
}

.op-swatch-grid strong {
  font-family: var(--op-font-system);
  font-size: 0.8rem;
}

.op-swatch-grid code {
  background: transparent;
  border: 0;
  padding: 0;
}

.op-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.op-button-inventory {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.op-button-specimen {
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--op-color-border);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  padding: 1rem;
}

.op-button-specimen > span {
  color: var(--op-color-text-muted);
  font-family: var(--op-font-system);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.op-button-specimen .op-button {
  max-width: 100%;
}

.op-button-inventory__note {
  color: var(--op-color-text-muted);
  font-size: 0.82rem;
  margin: 1rem 0 0;
}

.op-button-inventory__note code {
  background: #fff;
  border: 1px solid var(--op-color-border);
  padding: 0.15rem 0.3rem;
}

.op-demo-button--primary {
  background: var(--op-color-brand-orange);
  color: #111;
}

.op-demo-button--secondary {
  background: var(--op-color-brand-blue);
  color: #fff;
}

.op-demo-button--outline {
  border: 1px solid var(--op-color-ink);
  color: var(--op-color-ink);
}

.op-form-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 2rem;
}

.op-form-grid label {
  color: var(--op-color-ink);
  display: grid;
  font-family: var(--op-font-system);
  font-size: 0.75rem;
  font-weight: 700;
  gap: 0.45rem;
  text-transform: uppercase;
}

.op-form-grid input,
.op-form-grid select {
  background: #fff;
  border: 1px solid var(--op-color-border);
  border-radius: 0;
  color: var(--op-color-text);
  font: inherit;
  min-height: 3rem;
  padding: 0.6rem 0.8rem;
  text-transform: none;
}

.op-card-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, 1fr);
}

.op-demo-card {
  background: #fff;
  border: 1px solid var(--op-color-border);
}

.op-demo-card__image {
  aspect-ratio: 16/9;
  background-position: center;
  background-size: cover;
  display: flex;
  padding: 1rem;
}

.op-demo-card__image--robot {
  background-image: linear-gradient(135deg, #2578b6, #0e304f);
}

.op-demo-card__image--baler {
  background-image: linear-gradient(135deg, #f5a400, #55370a);
}

.op-demo-card__image span {
  align-self: flex-end;
  background: #fff;
  color: var(--op-color-ink);
  font-family: var(--op-font-system);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.35rem 0.55rem;
  text-transform: uppercase;
}

.op-demo-card__body {
  padding: 1.25rem;
}

.op-demo-card h3 {
  margin: 0;
}

.op-demo-card a,
.op-state a {
  color: var(--op-color-brand-blue);
  font-family: var(--op-font-system);
  font-weight: 800;
  text-decoration: none;
}

.op-metric-row {
  border-bottom: 1px solid var(--op-color-border);
  border-top: 1px solid var(--op-color-border);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2rem;
}

.op-metric-row div {
  border-right: 1px solid var(--op-color-border);
  padding: 1.25rem;
}

.op-metric-row div:last-child {
  border-right: 0;
}

.op-metric-row strong {
  color: var(--op-color-brand-blue);
  display: block;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
}

.op-metric-row span {
  font-family: var(--op-font-system);
  font-size: 0.75rem;
  text-transform: uppercase;
}

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

.op-state {
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--op-color-border);
  display: flex;
  gap: 0.75rem;
  padding: 1.25rem;
}

.op-state p {
  font-size: 0.9rem;
  margin: 0.4rem 0 0.75rem;
}

.op-state--empty {
  display: block;
}

.op-status-dot {
  background: #43a047;
  border-radius: 50%;
  flex: 0 0 0.65rem;
  height: 0.65rem;
  margin-top: 0.35rem;
  width: 0.65rem;
}

.op-demo-breadcrumb {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--op-font-system);
  font-size: 0.8rem;
  gap: 0.55rem;
  padding: 1.25rem 0;
}

.op-demo-breadcrumb a {
  color: var(--op-color-brand-blue);
}

@media (width <= 767px) {
  .op-component-gallery {
    padding: 2.5rem 0;
  }
  .op-swatch-grid,
  .op-card-grid,
  .op-state-grid,
  .op-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .op-state-grid .op-demo-breadcrumb {
    grid-column: 1/-1;
  }
  .op-metric-row {
    grid-template-columns: 1fr;
  }
  .op-metric-row div {
    border-bottom: 1px solid var(--op-color-border);
    border-right: 0;
  }
  .op-metric-row div:last-child {
    border-bottom: 0;
  }
  .op-preview-panel {
    padding: 1.25rem;
  }
  .op-display {
    font-size: var(--op-font-size-h1);
    line-height: 3.25rem;
  }
  .op-button-inventory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (width <= 767px) {
  .op-pattern-list__item {
    align-items: start;
    grid-template-columns: 2.25rem 1fr;
  }
  .op-pattern-list__item code,
  .op-pattern-list__item em {
    grid-column: 2;
  }
  .op-pattern-preview-grid {
    grid-template-columns: 1fr;
  }
}
@media (width <= 480px) {
  .op-button-inventory {
    grid-template-columns: 1fr;
  }
  .op-swatch-grid,
  .op-card-grid,
  .op-state-grid,
  .op-form-grid {
    grid-template-columns: 1fr;
  }
  .op-button-row {
    align-items: stretch;
    flex-direction: column;
  }
  .op-demo-button {
    width: 100%;
  }
}
@media (width <= 900px) {
  body:not(.home) .outputpro-header {
    background: var(--op-color-bg-subtle);
  }
  body.single-product .outputpro-header,
  body:has(.op-case-studies-page) .outputpro-header,
  body:has(.op-privacy-policy) .outputpro-header,
  body:has(.op-contact) .outputpro-header,
  body:has(.op-get-a-quote) .outputpro-header {
    background: var(--op-color-white);
  }
  body.single-product .outputpro-header.is-nav-open,
  body:has(.op-case-studies-page) .outputpro-header.is-nav-open,
  body:has(.op-privacy-policy) .outputpro-header.is-nav-open,
  body:has(.op-contact) .outputpro-header.is-nav-open,
  body:has(.op-get-a-quote) .outputpro-header.is-nav-open {
    background: var(--op-color-bg-subtle);
  }
  body.single-product .outputpro-header.is-nav-open .outputpro-header__inner,
  body:has(.op-case-studies-page) .outputpro-header.is-nav-open .outputpro-header__inner,
  body:has(.op-privacy-policy) .outputpro-header.is-nav-open .outputpro-header__inner,
  body:has(.op-contact) .outputpro-header.is-nav-open .outputpro-header__inner,
  body:has(.op-get-a-quote) .outputpro-header.is-nav-open .outputpro-header__inner {
    background: linear-gradient(to bottom, var(--op-color-white) 0, var(--op-color-white) 3.375rem, var(--op-color-bg-subtle) 3.375rem, var(--op-color-bg-subtle) 100%);
  }
  body.single-product .outputpro-header.is-nav-open::after,
  body:has(.op-case-studies-page) .outputpro-header.is-nav-open::after,
  body:has(.op-privacy-policy) .outputpro-header.is-nav-open::after,
  body:has(.op-contact) .outputpro-header.is-nav-open::after,
  body:has(.op-get-a-quote) .outputpro-header.is-nav-open::after {
    bottom: auto;
    top: 3.375rem;
  }
  body.home .outputpro-header {
    background: transparent;
  }
  body:has(.op-category__hero) .outputpro-header,
  body:has(.op-about__hero) .outputpro-header {
    background: linear-gradient(to bottom, var(--op-color-white) 0, var(--op-color-white) calc(var(--op-nav-cta-height) + 1.25rem), transparent calc(var(--op-nav-cta-height) + 1.25rem));
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
  body:has(.op-about__hero) .outputpro-header.is-nav-open .outputpro-header__nav-shell > nav.outputpro-header__nav {
    background: transparent;
  }
  .outputpro-header__inner,
  .outputpro-header__inner.has-global-padding {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.375rem;
    max-width: none;
    padding: 0.5rem 1rem;
    width: 100%;
  }
  .outputpro-header__brand {
    flex: 1 1 auto;
    min-width: 0;
  }
  .outputpro-header__logo {
    width: clamp(8rem, 44vw, 10.75rem);
  }
  .outputpro-header__mobile-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 0;
  }
  .outputpro-header__mobile-quote {
    align-items: center;
    background: var(--op-color-nav-cta-blue);
    border-radius: var(--op-radius-pill);
    color: var(--op-color-white);
    display: inline-flex;
    flex: 0 0 clamp(6.5rem, 31vw, var(--op-nav-cta-width));
    font-family: var(--op-font-system);
    font-size: 0.8125rem;
    font-weight: var(--op-font-weight-bold);
    height: var(--op-nav-cta-height);
    justify-content: center;
    line-height: 1;
    margin-left: 0 !important;
    padding-inline: 0;
    text-decoration: none;
    transition: background-color var(--op-transition-fast), color var(--op-transition-fast);
    white-space: nowrap;
  }
  .outputpro-header__mobile-quote:hover,
  .outputpro-header__mobile-quote:focus-visible {
    background: var(--op-color-nav-cta-blue-hover);
  }
  .outputpro-header__nav-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--op-color-nav-toggle);
    display: inline-flex;
    flex: 0 0 1.9375rem;
    height: 2.75rem;
    justify-content: center;
    margin: 0 !important;
    padding: 0;
    position: relative;
    width: 1.9375rem;
  }
  .outputpro-header__nav-toggle::before,
  .outputpro-header__nav-toggle::after {
    background: currentcolor;
    content: "";
    height: 0.0625rem;
    position: absolute;
    right: 0;
    top: 50%;
    width: 1.125rem;
  }
  .outputpro-header__nav-toggle::before {
    box-shadow: 0 -0.2875rem currentcolor, 0 0.2875rem currentcolor;
    transform: translateY(-50%);
    transition: transform var(--op-transition-fast), box-shadow var(--op-transition-fast);
  }
  .outputpro-header__nav-toggle::after {
    opacity: 0;
    transform: translateY(-50%) rotate(-45deg);
    transition: opacity var(--op-transition-fast), transform var(--op-transition-fast);
  }
  .outputpro-header.is-nav-open .outputpro-header__nav-toggle::before {
    box-shadow: none;
    transform: translateY(-50%) rotate(45deg);
  }
  .outputpro-header.is-nav-open .outputpro-header__nav-toggle::after {
    opacity: 1;
    transform: translateY(-50%) rotate(-45deg);
  }
  .outputpro-header__nav-toggle:focus-visible {
    border-radius: var(--op-radius-pill);
    outline: 2px solid currentcolor;
    outline-offset: -2px;
  }
  body.home .outputpro-header__mobile-quote,
  .outputpro-header--cta-orange .outputpro-header__mobile-quote {
    background: var(--op-color-nav-cta-orange);
    color: var(--op-color-ink);
  }
  body.home .outputpro-header__mobile-quote:hover,
  body.home .outputpro-header__mobile-quote:focus-visible,
  .outputpro-header--cta-orange .outputpro-header__mobile-quote:hover,
  .outputpro-header--cta-orange .outputpro-header__mobile-quote:focus-visible {
    background: var(--op-color-nav-cta-orange-hover);
  }
  .outputpro-header__mobile-quote:focus-visible {
    outline: 2px solid currentcolor;
    outline-offset: 2px;
  }
  .outputpro-header__nav-shell {
    box-sizing: border-box;
    display: none;
    flex: 0 0 100%;
    margin-inline: 0 !important;
    max-width: 100%;
    min-width: 0;
    position: relative;
    width: 100%;
  }
  .outputpro-header__nav-scroll:not([hidden]) {
    align-items: center;
    background: var(--op-color-white);
    border: 0;
    border-radius: var(--op-radius-pill);
    color: var(--op-color-nav-toggle);
    cursor: pointer;
    display: flex;
    height: 30px;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    z-index: 1;
  }
  .outputpro-header__nav-scroll::before {
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    content: "";
    height: 0.4375rem;
    width: 0.4375rem;
  }
  .outputpro-header__nav-scroll--previous {
    left: 0.1875rem;
  }
  .outputpro-header__nav-scroll--previous::before {
    transform: rotate(135deg);
  }
  .outputpro-header__nav-scroll--next {
    right: 0.1875rem;
  }
  .outputpro-header__nav-scroll--next::before {
    transform: rotate(-45deg);
  }
  .outputpro-header__nav-scroll:focus-visible {
    outline: 2px solid var(--op-color-nav-cta-blue);
    outline-offset: 2px;
  }
  .outputpro-header__nav-shell > nav.outputpro-header__nav {
    background: var(--op-color-white);
    border-radius: var(--op-radius-pill);
    box-sizing: border-box;
    overflow: visible;
    display: none;
    height: var(--op-nav-height);
    max-width: 100%;
    min-height: var(--op-nav-height);
    min-width: 0;
    width: 100%;
  }
  .outputpro-header.is-nav-open .outputpro-header__nav-shell > nav.outputpro-header__nav {
    display: flex;
    justify-content: center;
  }
  .outputpro-header.is-nav-open .outputpro-header__nav-shell {
    display: flex;
  }
  body.single-product .outputpro-header.is-nav-open .outputpro-header__nav-shell,
  body:has(.op-case-studies-page) .outputpro-header.is-nav-open .outputpro-header__nav-shell,
  body:has(.op-privacy-policy) .outputpro-header.is-nav-open .outputpro-header__nav-shell,
  body:has(.op-contact) .outputpro-header.is-nav-open .outputpro-header__nav-shell,
  body:has(.op-get-a-quote) .outputpro-header.is-nav-open .outputpro-header__nav-shell {
    margin-top: 0.625rem !important;
  }
  nav.outputpro-header__nav > .wp-block-navigation__container {
    align-items: center;
    background: transparent;
    border-radius: var(--op-radius-pill);
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    height: var(--op-nav-height);
    justify-content: flex-start;
    margin: 0;
    max-width: 100%;
    min-height: var(--op-nav-height);
    min-width: 0;
    overflow-x: auto;
    padding-inline: 0;
    scrollbar-width: none;
    white-space: nowrap;
    width: 100%;
  }
  nav.outputpro-header__nav > .wp-block-navigation__container::-webkit-scrollbar {
    display: none;
  }
  nav.outputpro-header__nav > .wp-block-navigation__container > .wp-block-navigation-item {
    flex: 0 0 auto;
    margin: 0;
  }
  nav.outputpro-header__nav .wp-block-navigation-item__content {
    color: var(--op-color-ink);
    font-family: var(--op-font-system);
    font-size: 0.875rem;
    font-weight: var(--op-font-weight-bold);
    line-height: 1;
    text-decoration: none;
  }
  nav.outputpro-header__nav .wp-block-navigation-item__content:focus-visible {
    border-radius: var(--op-radius-pill);
    outline: 2px solid var(--op-color-nav-cta-blue);
    outline-offset: 2px;
  }
  nav.outputpro-header__nav .outputpro-header__link {
    align-items: center;
    display: inline-flex;
    height: var(--op-nav-cta-height);
  }
  nav.outputpro-header__nav .outputpro-header__link:hover,
  nav.outputpro-header__nav .outputpro-header__link:focus-within,
  nav.outputpro-header__nav .outputpro-header__link.current-menu-item,
  nav.outputpro-header__nav .outputpro-header__link.current-menu-ancestor {
    background: var(--op-color-nav-mobile-active);
  }
  nav.outputpro-header__nav .outputpro-header__cta {
    display: none;
  }
}
@media (width <= 350px) {
  .outputpro-header__inner,
  .outputpro-header__inner.has-global-padding {
    column-gap: 0.25rem;
  }
  .outputpro-header__logo {
    width: 43vw;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-delay: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
@media (width >= 901px) {
  body.home .outputpro-header {
    left: 5vw;
    position: absolute;
    top: 2.5rem;
    width: 90vw;
  }
  .outputpro-header__inner {
    max-width: 90vw;
  }
  .op-home {
    margin-top: 2.5rem;
  }
}
/* Home composition — Figma node 8:6214, built from the shared shell and
 * button/card primitives. The page shell stays full-width; only the inner
 * panels retain a readable max-width for the composition. */
body.home {
  background: #fff;
  padding-left: 0;
  padding-right: 0;
}

body.home .wp-site-blocks {
  background: #fff;
  box-sizing: border-box;
  margin: 0;
  max-width: 100%;
  min-height: 0;
  padding: 0 !important;
  position: relative;
  width: 100%;
}

body.home .wp-site-blocks > * {
  margin-block-start: 0;
}

body.home .outputpro-header {
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

body.home .outputpro-header__inner {
  max-width: 83.45%;
  padding: 0;
}

body.home .op-home {
  --op-home-hero-panel-overlap: 5.6437rem;
  background: #fff;
  color: #171719;
  margin: 0;
  max-width: none;
  overflow: visible;
  width: 100%;
}

body.home .op-home__hero {
  background: #e9edef;
  height: 32.125rem;
  min-height: 32.125rem;
  overflow: hidden;
  position: relative;
}

body.home .op-home__hero-image {
  inset: 0;
  height: 100%;
  margin: 0;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

body.home .op-home__hero-image img {
  display: block;
  height: calc(100% + 1.3125rem);
  left: -42.4%;
  max-width: none;
  object-fit: cover;
  object-position: center 25%;
  position: absolute;
  top: -1.3125rem;
  width: 142.4%;
}

body.home .op-home__hero-copy {
  left: calc(50% + 0.1875rem);
  max-width: 29.375rem;
  position: absolute;
  top: 9.0625rem;
  z-index: 1;
}

body.home .op-home__hero h1 {
  color: #050505;
  font-family: var(--op-font-system);
  font-size: 2.0244rem;
  line-height: 2.125rem;
  margin: 0 0 0.9375rem;
}

body.home .op-home__hero p {
  color: #161616;
  font-size: 0.8125rem;
  line-height: 1.1875rem;
  margin: 0 0 2.0625rem;
}

/* Desktop banner: the supplied artwork's robot centre is at x=52%.
 * Align that focal point to 35% of the hero. The minimum image width is
 * (1 - .35) / (1 - .52), so the right edge always covers the hero.
 * Auto width + full height preserves cover when the hero grows with copy.
 * The height floor reserves space above the next panel's overlap, keeping
 * the robot's wheels visible on wide screens as well as inside the crop. */
@media (width >= 601px) {
  body.home .op-home__hero {
    --op-home-hero-target-x: 35%;
    --op-home-hero-focal-x: 52%;
    --op-home-hero-cover-width: 135.42%;
    align-items: center;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
    min-height: max(clamp(20rem, 57vw, 32.125rem), 25vw + var(--op-home-hero-panel-overlap) * 2 + 2rem);
    padding-block: var(--op-space-20) calc(var(--op-space-20) + var(--op-home-hero-panel-overlap));
  }
  body.home .op-home__hero-image img {
    height: 100%;
    left: var(--op-home-hero-target-x);
    min-width: var(--op-home-hero-cover-width);
    object-position: var(--op-home-hero-focal-x) center;
    top: 0;
    transform: translateX(calc(-1 * var(--op-home-hero-focal-x)));
    width: auto;
  }
  body.home .op-home__hero-copy {
    grid-column: 2;
    margin-block: 0;
    margin-inline: 0.1875rem var(--op-gutter);
    min-width: 0;
    overflow-wrap: anywhere;
    position: static;
  }
}
body.home .op-home__actions {
  display: flex;
  gap: 0.5rem;
  margin-block-start: 0;
}

body.home .op-home__panel {
  border-radius: 0.8125rem;
  box-shadow: var(--op-elevation-2);
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  max-width: 83.45%;
  position: relative;
  width: 100%;
}

body.home .op-home__baler {
  align-items: center;
  background: #fff;
  display: block;
  margin-bottom: 2.4506rem;
  margin-top: calc(-1 * var(--op-home-hero-panel-overlap));
  min-height: 17.3419rem;
  overflow: visible;
  padding: 2.375rem 2.4375rem;
  z-index: 2;
}

body.home .op-home__baler h2 {
  font-family: var(--op-font-system);
  font-size: 2.0244rem;
  line-height: 2.125rem;
  margin: 0.75rem 0 0.8125rem;
}

body.home .op-home__baler-subtitle span {
  color: #85878a;
}

body.home .op-home__mobile-break {
  display: none;
}

body.home .op-home__baler-subtitle {
  font-family: var(--op-font-system);
  font-size: 2.0244rem;
  line-height: 2.125rem;
  margin: -0.8125rem 0 0.8125rem;
}

body.home .op-home__baler .op-home__baler-description {
  font-size: 0.8125rem;
  line-height: 1.1875rem;
  margin: 0 0 1.3125rem;
  max-width: 26.875rem;
}

body.home .op-home__baler .wp-block-buttons {
  margin-block-start: 0;
}

body.home .op-home__eyebrow {
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.0625rem;
  margin: 0;
  text-transform: uppercase;
}

body.home .op-home__baler > figure.wp-block-image {
  bottom: -0.25rem;
  height: 21.34rem;
  margin: 0;
  position: absolute;
  right: 5.125rem;
  width: 17rem;
}

body.home .op-home__baler > figure.wp-block-image img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

body.home .op-home__baler > div {
  max-width: 34.375rem;
  position: relative;
  z-index: 1;
}

body.home .op-home__proof {
  background: #fff;
  margin-bottom: 2.6275rem;
  min-height: 15.55rem;
  padding: 0;
  position: relative;
}

body.home .op-home__proof-content {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1.1fr 0.4fr 1fr;
  min-height: 15.55rem;
  padding: 1.5rem 2.375rem 3rem;
}

body.home .op-home__quote,
body.home .op-home__metrics {
  align-self: center;
}

body.home .op-home__stars {
  align-items: center;
  display: flex;
  gap: 0.746rem;
  margin: 0;
}

body.home .op-home__stars .op-home__star {
  flex: 0 0 auto;
  margin: 0;
}

body.home .op-home__stars .op-home__star img {
  display: block;
}

body.home .op-home__quote p {
  color: #606060;
  font-size: 0.8125rem;
  font-style: italic;
  line-height: 1.1875rem;
  margin: 0.8125rem 0 0.5rem;
  max-width: 20.3125rem;
}

body.home .op-home__quote strong {
  color: #606060;
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 0.9375rem;
}

body.home .op-home__new-world {
  display: block;
  height: 2.1594rem;
  margin-inline: 0;
  margin-top: 1.0625rem;
  width: 10.77rem;
}

body.home .op-home__new-world img {
  display: block;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  width: 100%;
}

body.home .op-home__metrics {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-left: 0;
  position: relative;
}

body.home .op-home__metrics::after {
  background: #d8d8d8;
  content: "";
  height: 7.91rem;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.25rem;
}

body.home .op-home__metrics div + div {
  border-top: 2px solid #aaa;
  margin-top: 0.625rem;
  padding-top: 0.5rem;
}

body.home .op-home__metric > p {
  margin: 0;
}

body.home .op-home__metrics strong {
  color: #888;
  display: block;
  font-size: 2.6325rem;
  font-weight: 300;
  line-height: 3rem;
}

body.home .op-home__metrics small {
  font-size: 1.8825rem;
}

body.home .op-home__metrics span {
  color: #888;
  display: block;
  font-size: 0.7575rem;
  line-height: 0.9375rem;
}

body.home .op-home__proof-products {
  align-items: center;
  display: flex;
  height: 10.875rem;
  justify-content: center;
  margin-block-start: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

body.home .op-home__proof-product {
  height: 100%;
  margin: 0 auto;
  max-width: 100%;
  position: static;
  width: auto;
}

body.home .op-home__proof-product img {
  display: block;
  height: 100%;
  margin: 0 auto;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

body.home .op-home__tabs {
  background: #ebecec;
  border: 0.1875rem solid #ebecec;
  border-radius: 0.8125rem;
  bottom: 0;
  box-shadow: var(--op-elevation-1);
  box-sizing: border-box;
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: 1fr 1fr;
  left: 0;
  min-height: 2.125rem;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

body.home .op-home__tabs > p,
body.home .op-home__tabs > button {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: #231f20;
  cursor: pointer;
  display: flex;
  font-size: 0.875rem;
  font-weight: 700;
  justify-content: center;
  line-height: 1.0625rem;
  margin: 0;
  padding: 0.3125rem 0.5rem;
  text-align: center;
}

body.home .op-home__tabs > p:first-child,
body.home .op-home__tabs > button.is-active {
  background: #fff;
  border-radius: 0.625rem;
}

body.home .op-home__tabs > button:focus-visible {
  outline: 0.125rem solid var(--op-color-nav-cta-blue);
  outline-offset: -0.125rem;
}

body.home .op-home__product-panels {
  display: block;
}

body.home .op-home__products[hidden] {
  display: none;
}

body.home .op-home__product-media figure.wp-block-image {
  align-items: flex-start;
  display: flex;
  height: 100%;
  justify-content: center;
  margin: 0;
  max-width: 100%;
  width: 100%;
}

body.home .op-home__products {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 auto 3.8231rem;
  max-width: 83.45%;
}

body.home .op-home__product {
  border: 1px solid #e5e5e5;
  border-radius: 0.8125rem;
  box-shadow: var(--op-elevation-2);
  box-sizing: border-box;
  min-height: 14.98rem;
  min-width: 0;
  padding: 0 0.8125rem 0.625rem;
}

body.home .op-home__product-media {
  align-items: flex-start;
  display: flex;
  height: 11.125rem;
  justify-content: center;
  margin-bottom: -1rem;
  margin-top: -2.125rem;
  transform: none;
}

body.home .op-home__product-media img {
  height: 9rem;
  max-height: 100%;
  max-width: 100%;
  min-height: 8rem;
  min-width: 7rem;
  object-fit: contain;
  width: 7rem;
}

body.home .op-home__product h3 {
  color: var(--op-color-text-muted-on-light);
  font-size: 1.3131rem;
  line-height: 1.5625rem;
  margin: 0;
}

body.home .op-home__product p {
  color: var(--op-color-text-muted-on-light);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1rem;
  margin: 0.3125rem 0 0.7031rem;
  min-height: 2rem;
  width: 13rem;
}

body.home .op-home__product > .wp-block-buttons {
  margin-block-start: 0;
}

body.home .outputpro-footer {
  background: #231f20;
  margin-block-start: 0;
  max-width: none;
  width: 100%;
}

body.home .outputpro-footer__inner {
  max-width: none;
  min-height: 7.625rem;
  padding-block: 1.1875rem;
}

body.home .outputpro-footer__brand {
  transform: translateX(-1.125rem);
}

@media (width <= 900px) {
  body.home {
    background: #fff;
  }
  body.home .wp-site-blocks {
    margin: 0;
    max-width: none;
    width: 100%;
  }
  body.home .outputpro-header {
    left: 0;
    position: absolute;
    top: 0;
  }
  body.home .outputpro-header__inner {
    max-width: none;
    padding-block: 0.625rem;
    padding-inline: 1rem;
  }
  body.home .outputpro-header__brand {
    flex: 0 0 auto;
    height: 2.375rem;
  }
  body.home .op-home__panel,
  body.home .op-home__products {
    max-width: calc(100% - 2rem);
  }
  body.home .op-home {
    --op-home-hero-panel-overlap: 3rem;
  }
  body.home .op-home__baler {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: calc(-1 * var(--op-home-hero-panel-overlap));
    padding: 1.5rem;
  }
  body.home .op-home__baler-copy {
    display: contents;
  }
  body.home .op-home__baler .op-home__eyebrow,
  body.home .op-home__baler h2 {
    grid-column: 1/-1;
  }
  body.home .op-home__baler .op-home__baler-subtitle {
    grid-column: 1;
    grid-row: 3;
    margin: 0;
  }
  body.home .op-home__baler .op-home__baler-description {
    grid-column: 1;
    grid-row: 4;
    max-width: none;
  }
  body.home .op-home__baler .wp-block-buttons {
    grid-column: 1/-1;
    grid-row: 5;
    width: 100%;
  }
  body.home .op-home__baler .wp-block-buttons .wp-block-button {
    margin-inline: auto;
    min-width: 50%;
  }
  body.home .op-home__baler .wp-block-buttons .wp-block-button__link {
    box-sizing: border-box;
    width: 100%;
  }
  body.home .op-home__baler .op-home__mobile-break {
    display: inline;
  }
  body.home .op-home__baler > figure.wp-block-image {
    grid-column: 2;
    grid-row: 3/span 3;
    position: static;
    height: 15rem;
    width: 100%;
  }
  body.home .op-home__baler > figure.wp-block-image img {
    transform: translateY(-0.5rem);
  }
  body.home .op-home__proof-content {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 1.5rem 1.5rem 3rem;
  }
  body.home .op-home__quote {
    grid-column: 1/-1;
    grid-row: 1;
  }
  body.home .op-home__quote .wp-block-paragraph {
    padding-inline: 0;
  }
  body.home .op-home__metrics {
    border-right: 0;
    grid-column: span 1;
    grid-row: 2;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    padding-top: 0;
  }
  body.home .op-home__metrics::after {
    display: none;
  }
  body.home .op-home__metrics div + div {
    border-left: 0;
    border-top: 2px solid #ddd;
    margin-top: 0.625rem;
    padding: 0.5rem 0 0;
  }
  body.home .op-home__proof-products {
    height: 13.125rem;
    grid-column: span 2;
    grid-row: 2;
    min-height: 13.125rem;
  }
  body.home .op-home__products {
    grid-template-columns: repeat(2, 1fr);
  }
  body.home .op-home__product p {
    max-width: 100%;
    width: auto;
  }
  body.home .outputpro-footer__brand {
    transform: none;
  }
  body.home .outputpro-footer__inner {
    min-height: 0;
    padding: 1.75rem var(--op-gutter);
  }
}
/* Mobile hero uses the supplied 390 x 299 artwork at its native ratio. */
@media (width <= 600px) {
  body.home .op-home__hero {
    background: #fff url("../images/home-hero-mobile.png") center/cover no-repeat;
    height: 278px;
    min-height: 278px;
    overflow: hidden;
    width: 100%;
  }
  body.home .op-home__hero-image {
    display: none;
  }
  body.home .op-home__hero-image img {
    height: 93.796%;
    left: -90.949%;
    object-fit: fill;
    object-position: center;
    top: -0.838%;
    width: 223.795%;
  }
  body.home .op-home__hero-copy {
    inset: 27.2% 5% auto 50%;
    max-width: none;
  }
  body.home .op-home__hero h1 {
    font-size: 1.5rem;
    line-height: 1.5rem;
    overflow-wrap: anywhere;
  }
  body.home .op-home__hero p {
    display: none;
  }
  body.home .op-home__actions {
    gap: 0;
  }
  body.home .op-home__actions .wp-block-button:first-child > .wp-block-button__link {
    box-sizing: border-box;
    max-width: 100%;
    padding-inline: 1.4375rem;
  }
  body.home .op-home__actions .wp-block-button:nth-child(2) {
    display: none;
  }
}
/* Shared product card: Figma Patterns / Pattern/Product Card (34:10).
 * Grid items stretch to the tallest card; the CTA stays at the bottom even
 * when an editor changes a title or description. */
.op-product-card-grid {
  align-items: stretch;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.op-product-card {
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
  border-radius: 0.8125rem;
  cursor: pointer;
  box-shadow: var(--op-elevation-2);
  display: flex;
  flex-direction: column;
  min-height: 17.25rem;
  min-width: 0;
  padding: 0.75rem 0.8125rem 0.625rem;
  position: relative;
  transform: translateY(0);
  transition: transform var(--op-motion-standard) var(--op-ease-standard), box-shadow var(--op-motion-standard) var(--op-ease-soft);
}

@media (hover: hover) and (pointer: fine) {
  .op-product-card:hover,
  .op-product-card:focus-within {
    box-shadow: var(--op-elevation-3);
    transform: translateY(-0.25rem);
  }
  .op-product-card:hover .op-product-card__media,
  .op-product-card:focus-within .op-product-card__media {
    transform: translateY(-0.1875rem) scale(1.015);
  }
}
.op-product-card.is-pressed {
  animation: op-product-card-press var(--op-motion-slow) var(--op-ease-standard);
}

.op-product-card:active {
  transform: translateY(-0.125rem) scale(0.995);
}

@keyframes op-product-card-press {
  0% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-0.375rem);
  }
  100% {
    transform: translateY(-0.25rem);
  }
}
body.home .op-home__product {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.op-product-card__media {
  align-items: center;
  display: flex;
  height: 10rem;
  justify-content: center;
  transform: translateY(0) scale(1);
  transition: transform var(--op-motion-standard) var(--op-ease-standard);
}

.op-product-card__media figure.wp-block-image {
  margin: 0;
}

.op-product-card__media img {
  display: block;
  max-height: 10rem;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

.op-product-card-grid > .op-product-card,
body.home .op-home__products > .op-home__product {
  margin: 0;
}

.op-product-card > .op-product-card__media,
.op-product-card > .wp-block-heading,
.op-product-card > p,
.op-product-card > .wp-block-buttons {
  flex-shrink: 0;
}

.op-product-card > .wp-block-buttons {
  margin-block: auto 0;
  padding-top: 0.75rem;
}

.op-product-card > .op-product-card__media,
.op-product-card > .wp-block-heading,
.op-product-card > p {
  margin-block-start: 0;
}

.op-product-card > .wp-block-heading {
  color: var(--op-color-text-muted-on-light);
  font-size: 1.3131rem;
  line-height: 1.5625rem;
  overflow-wrap: anywhere;
}

.op-product-card > p {
  color: var(--op-color-text-muted-on-light);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1rem;
  margin-block-end: 0;
  overflow-wrap: anywhere;
}

body.home .op-home__product > .op-home__product-media,
body.home .op-home__product > .wp-block-heading,
body.home .op-home__product > p,
body.home .op-home__product > .wp-block-buttons {
  flex-shrink: 0;
}

body.home .op-home__product > .wp-block-buttons {
  margin-block: auto 0;
  padding-top: 0.75rem;
}

body.home .op-home__product-media img {
  max-height: 100%;
}

body.home .op-home__product p {
  max-width: 100%;
  width: auto;
}

/* Mobile home cards follow Figma node 176:1345: one card per row with the
 * product image on the left and the card content on the right. This lives
 * after the shared home-card rules so the component defaults cannot flatten
 * the two-column mobile layout. */
@media (width <= 767px) {
  body.home .op-home__products {
    grid-template-columns: 1fr;
  }
  body.home .op-home__product {
    align-content: start;
    align-items: start;
    display: grid;
    grid-template-columns: minmax(0, 9.815rem) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    min-height: 11.1rem;
    padding: 0;
  }
  body.home .op-home__product-media {
    align-items: stretch;
    align-self: stretch;
    grid-column: 1;
    grid-row: 1/-1;
    height: auto;
    margin: 0;
    min-height: 0;
  }
  body.home .op-home__product-media figure.wp-block-image {
    align-items: center;
    height: 100%;
  }
  body.home .op-home__product h3 {
    align-self: start;
    grid-column: 2;
    grid-row: 1;
    margin: 1.9375rem 0 0;
  }
  body.home .op-home__product p {
    grid-column: 2;
    grid-row: 2;
    margin: 0.25rem 0 0;
    min-height: 0;
    width: auto;
  }
  body.home .op-home__product > .wp-block-buttons {
    align-self: start;
    grid-column: 2;
    grid-row: 3;
    margin: 0;
    padding-top: 1rem;
  }
}
/* WordPress' site wrapper is a global shell, not a centered design canvas.
 * Keep the full-width rule independent from any page-specific composition. */
.wp-site-blocks {
  box-sizing: border-box;
  margin: 0;
  max-width: 100%;
  padding: 0 !important;
  width: 100%;
}

@media (width <= 420px) {
  body.home .op-home__products {
    grid-template-columns: 1fr;
  }
  body.home .op-home__hero {
    min-height: 278px;
  }
}
/* Full-width constrained groups should reach the viewport edges. */
.wp-block-group.alignfull.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
  padding-left: 0;
  padding-right: 0;
}

/* Post/page content is already wrapped by the full-width template shell.
 * WordPress adds `has-global-padding` and constrained-layout classes to the
 * Post Content block, which otherwise introduces an unwanted second gutter
 * (and a constrained max-width) around the actual page content. */
.entry-content.wp-block-post-content.has-global-padding.is-layout-constrained,
.wp-block-post-content.entry-content.has-global-padding.is-layout-constrained.wp-block-post-content-is-layout-constrained {
  box-sizing: border-box;
  margin: 0;
  max-width: none;
  padding: 0;
  width: 100%;
}

/* The short 404 content fills the viewport space left by the natural-height
 * header, breadcrumb and footer. Long content can still extend the page. */
body.error404 .wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

body.error404 .wp-site-blocks > header,
body.error404 .wp-site-blocks > .outputpro-breadcrumb-section,
body.error404 .wp-site-blocks > footer {
  flex: 0 0 auto;
}

body.error404 .wp-site-blocks > main {
  flex: 1 0 auto;
  padding-block: clamp(var(--op-space-xl), 4vw, var(--op-space-2xl)) var(--op-space-20);
}

body.error404 .outputpro-not-found {
  box-sizing: border-box;
  display: grid;
  gap: var(--op-space-lg);
  justify-items: center;
  overflow-wrap: anywhere;
  padding-inline: var(--op-gutter);
  text-align: center;
}

body.error404 .outputpro-not-found > * {
  margin-block: 0;
  min-width: 0;
}

body.error404 .outputpro-not-found .wp-block-buttons {
  justify-content: center;
}

/* Keep the existing content-to-footer clearance inside main so it participates
 * in the remaining-height calculation instead of adding an external gap. */
body.error404 .outputpro-footer {
  margin-block-start: 0;
}

/* Privacy Policy typography from Figma frame 8:2 / Page Content 57:122.
 * The shared page rail controls the title and content width. */
body.privacy-policy #main-content > .wp-block-post-title {
  color: #2075bc;
  font-family: var(--op-font-display);
  font-size: 0.875rem;
  font-weight: var(--op-font-weight-bold);
  letter-spacing: 0;
  line-height: 1.2143;
  margin-bottom: 2rem;
  margin-top: 1.5rem;
  text-transform: uppercase;
}

body.privacy-policy .op-privacy-policy {
  color: var(--op-color-ink);
  font-family: var(--op-font-body);
  font-size: 0.9375rem;
  font-weight: var(--op-font-weight-bold);
  line-height: 1.316;
  max-width: none;
}

body.privacy-policy .op-privacy-policy__callout {
  align-items: center;
  background: var(--op-color-surface);
  border: 1px solid #dedede;
  border-radius: var(--op-radius-md);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  color: var(--op-color-text-muted);
  display: flex;
  font-size: 1.3125rem;
  font-weight: var(--op-font-weight-bold);
  justify-content: center;
  line-height: 1.2;
  margin-bottom: 2rem;
  min-height: 6.64rem;
  padding: 1rem 2rem;
  text-align: center;
}

body.privacy-policy .op-privacy-policy__callout p {
  margin: 0;
  max-width: 32rem;
}

body.privacy-policy .op-privacy-policy__body h2 {
  color: var(--op-color-ink);
  font-family: var(--op-font-display);
  font-size: 1.0625rem;
  font-weight: var(--op-font-weight-bold);
  letter-spacing: 0;
  line-height: 1.2353;
  margin: 1rem 0 0.5rem;
}

body.privacy-policy .op-privacy-policy__body h2:first-child {
  margin-top: 0;
}

body.privacy-policy .op-privacy-policy__body p {
  color: var(--op-color-ink);
  font-family: var(--op-font-body);
  font-size: 0.9375rem;
  font-weight: var(--op-font-weight-bold);
  line-height: 1.316;
  margin: 0 0 1.25rem;
}

/* Wide-screen composition
 *
 * The desktop composition is calibrated at 1280px. Beyond that point, grow
 * rem-based typography, spacing, components, and containers from one root
 * scale token while leaving full-width background bands edge-to-edge. */
@media (width > 1280px) {
  :root {
    /* 1rem at 1280px to 1.25rem at 1920px, capped on larger screens. */
    --op-wide-scale: clamp(1rem, calc(1rem + (100vw - 1280px) * 0.0063), 1.25rem);
    font-size: var(--op-wide-scale);
  }
  .outputpro-header {
    left: 0;
    width: 100%;
  }
  .outputpro-header__inner,
  .outputpro-header__inner.has-global-padding {
    max-width: var(--op-layout-wide);
    padding-inline: 4rem 4.75rem;
  }
  .outputpro-footer__inner,
  body.home .outputpro-footer__inner {
    margin-inline: auto;
    max-width: var(--op-layout-wide);
    padding-inline: 6.72rem 4.8rem;
  }
  /* Keep the homepage header aligned with the content panels while allowing
   * the hero background to span the viewport. */
  body.home .outputpro-header__inner,
  body.home .outputpro-header__inner.has-global-padding {
    max-width: 66.76rem;
    padding-inline: 0;
  }
  body.home .op-home__hero-copy {
    left: calc(50% + 0.1875rem);
  }
  body.home .op-home__panel,
  body.home .op-home__products {
    max-width: 66.76rem;
  }
  /* Freeze viewport-based gallery values at their 1280px results. */
  .op-component-gallery {
    padding-block: 5.6rem;
  }
  .op-component-gallery__intro {
    margin-bottom: 4.8rem;
  }
  .op-component-gallery h1 {
    font-size: 5.6rem;
  }
  .op-component-section h2 {
    font-size: 2.4rem;
  }
  .op-preview-panel {
    padding: 3.2rem;
  }
  .op-metric-row strong {
    font-size: 3.2rem;
  }
  .op-form-grid {
    max-width: var(--op-layout-form);
  }
}
@media (width > 1440px) {
  .op-card-grid {
    grid-template-columns: repeat(3, minmax(17.5rem, 22.5rem));
    justify-content: start;
  }
}
/* Get a Quote — Figma node 65:581. WPForms remains editor-managed while
 * these page-scoped rules preserve the form's responsive design. */
.op-get-a-quote {
  box-sizing: border-box;
  min-width: 0;
  /* The post-content block gap is normalized to the shared XL rhythm below. */
  padding-bottom: 0 !important;
  width: 100%;
}

.op-get-a-quote > *,
.op-get-a-quote .wpforms-container,
.op-get-a-quote .wpforms-form {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.op-get-a-quote div.wpforms-container-full {
  background: var(--op-color-white);
  border-radius: 0.5rem;
  box-shadow: 0 0.35rem 0.8rem rgba(0, 0, 0, 0.18);
  box-sizing: border-box !important;
  margin-inline: 0 !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: clamp(1.25rem, 3vw, 2rem) !important;
  width: 100% !important;
}

.op-get-a-quote div.wpforms-container-full .wpforms-description {
  color: var(--op-color-ink);
  font-family: var(--op-font-display);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
}

.op-get-a-quote .wpforms-head-container,
.op-get-a-quote .wpforms-field-container,
.op-get-a-quote .wpforms-field,
.op-get-a-quote fieldset,
.op-get-a-quote label,
.op-get-a-quote .wpforms-field-description {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.op-get-a-quote .wpforms-form input[type=text],
.op-get-a-quote .wpforms-form input[type=email],
.op-get-a-quote .wpforms-form textarea {
  background: #ececec;
  border: 0;
  border-radius: 0.625rem;
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
}

.op-get-a-quote .wpforms-submit-container {
  text-align: center;
}

.op-get-a-quote .wpforms-form button[type=submit] {
  background: var(--op-color-bg-action) !important;
  border: 0;
  border-radius: var(--op-radius-pill);
  color: var(--op-color-ink);
  min-width: 7.5rem;
}

.op-get-a-quote .wpforms-form button[type=submit]:hover,
.op-get-a-quote .wpforms-form button[type=submit]:focus-visible {
  background: var(--op-color-orange-hover) !important;
}

/* WPForms confirmation — Figma Page / Quote Success, node 8:5144.
 * Card 8:5252 and CTA 8:5409 / 8:5410. The AJAX confirmation replaces
 * the form contents but keeps the page-scoped WPForms container in place. */
.op-get-a-quote:has(.wpforms-confirmation-container-full) > .has-brand-orange-color {
  display: none;
}

.op-get-a-quote:has(.wpforms-confirmation-container-full) > .wp-block-shortcode {
  margin-block-start: 0;
}

.op-get-a-quote:has(.wpforms-confirmation-container-full) div.wpforms-container-full {
  background: transparent;
  box-shadow: none;
  padding: 0 !important;
}

/* Match only our configured message, and outrank WPForms' element-qualified
 * container reset and confirmation paragraph rules. Keep page layout separate. */
div.wpforms-container-full .wpforms-confirmation-container-full:has(.op-get-a-quote-confirmation) {
  background: transparent;
  border: 0;
  box-sizing: border-box;
  color: var(--op-color-ink);
  margin: 0 !important;
  max-width: none;
  overflow: visible;
  padding: 0 !important;
  width: 100%;
}
div.wpforms-container-full .wpforms-confirmation-container-full:has(.op-get-a-quote-confirmation) .op-get-a-quote-confirmation {
  box-sizing: border-box;
  width: 100%;
}
div.wpforms-container-full .wpforms-confirmation-container-full:has(.op-get-a-quote-confirmation) .op-get-a-quote-confirmation__eyebrow {
  color: #e18702;
  font-family: var(--op-font-system);
  font-size: 0.875rem;
  font-weight: var(--op-font-weight-bold);
  line-height: 1.2143;
  margin: 0 0 var(--op-space-xl) !important;
  text-transform: uppercase;
}
div.wpforms-container-full .wpforms-confirmation-container-full:has(.op-get-a-quote-confirmation) .op-get-a-quote-confirmation__card {
  background: var(--op-color-white);
  border-radius: var(--op-radius-md);
  box-shadow: 0.1875rem 0.1875rem 0.585rem rgba(0, 0, 0, 0.28);
  box-sizing: border-box;
  min-height: 16.375rem;
  padding: var(--op-space-10) var(--op-space-xl) 1.875rem;
  text-align: center;
  width: 100%;
}
div.wpforms-container-full .wpforms-confirmation-container-full:has(.op-get-a-quote-confirmation) .op-get-a-quote-confirmation__thank-you,
div.wpforms-container-full .wpforms-confirmation-container-full:has(.op-get-a-quote-confirmation) .op-get-a-quote-confirmation__headline,
div.wpforms-container-full .wpforms-confirmation-container-full:has(.op-get-a-quote-confirmation) .op-get-a-quote-confirmation__body {
  overflow-wrap: anywhere;
}
div.wpforms-container-full .wpforms-confirmation-container-full:has(.op-get-a-quote-confirmation) .op-get-a-quote-confirmation__thank-you {
  /* The outlined heading in node 8:5253 uses #808285. */
  color: #808285;
  font-family: var(--op-font-display);
  font-size: 1.5rem;
  font-weight: var(--op-font-weight-bold);
  line-height: 1.2;
  margin: 0 !important;
}
div.wpforms-container-full .wpforms-confirmation-container-full:has(.op-get-a-quote-confirmation) .op-get-a-quote-confirmation__headline {
  color: var(--op-color-ink);
  font-family: var(--op-font-display);
  font-size: 1.5rem;
  font-weight: var(--op-font-weight-regular);
  line-height: 1.2;
  margin: 0 !important;
}
div.wpforms-container-full .wpforms-confirmation-container-full:has(.op-get-a-quote-confirmation) .op-get-a-quote-confirmation__body {
  /* The saved site-wide Small preset is 13px; this design uses 14px. */
  color: var(--op-color-ink);
  font-family: var(--op-font-body);
  font-size: 0.875rem;
  font-weight: var(--op-font-weight-regular);
  line-height: 1.5;
  margin: var(--op-space-xl) auto var(--op-space-lg) !important;
  max-width: 42rem;
}
div.wpforms-container-full .wpforms-confirmation-container-full:has(.op-get-a-quote-confirmation) .op-get-a-quote-confirmation__button {
  align-items: center;
  background: var(--op-color-bg-action);
  border-radius: var(--op-radius-pill);
  box-sizing: border-box;
  color: var(--op-color-ink);
  display: inline-flex;
  font-family: var(--op-font-system);
  font-size: 0.8125rem;
  font-weight: var(--op-font-weight-bold);
  justify-content: center;
  line-height: 1.2308;
  max-width: 100%;
  min-height: 2.25rem;
  min-width: 12.625rem;
  overflow-wrap: anywhere;
  padding: var(--op-space-xs) var(--op-space-5);
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}
div.wpforms-container-full .wpforms-confirmation-container-full:has(.op-get-a-quote-confirmation) .op-get-a-quote-confirmation__button-wrap {
  margin: 0;
}
div.wpforms-container-full .wpforms-confirmation-container-full:has(.op-get-a-quote-confirmation) .op-get-a-quote-confirmation__button:hover,
div.wpforms-container-full .wpforms-confirmation-container-full:has(.op-get-a-quote-confirmation) .op-get-a-quote-confirmation__button:focus-visible {
  background: var(--op-color-orange-hover);
  color: var(--op-color-ink);
  text-decoration: none;
}
div.wpforms-container-full .wpforms-confirmation-container-full:has(.op-get-a-quote-confirmation) .op-get-a-quote-confirmation__button:focus-visible {
  outline: 2px solid var(--op-color-ink);
  outline-offset: 3px;
}
@media (width <= 600px) {
  div.wpforms-container-full .wpforms-confirmation-container-full:has(.op-get-a-quote-confirmation) .op-get-a-quote-confirmation__card {
    min-height: 0;
    padding: 2rem 1rem 1.5rem;
  }
  div.wpforms-container-full .wpforms-confirmation-container-full:has(.op-get-a-quote-confirmation) .op-get-a-quote-confirmation__thank-you,
  div.wpforms-container-full .wpforms-confirmation-container-full:has(.op-get-a-quote-confirmation) .op-get-a-quote-confirmation__headline {
    font-size: 1.375rem;
  }
  div.wpforms-container-full .wpforms-confirmation-container-full:has(.op-get-a-quote-confirmation) .op-get-a-quote-confirmation__body {
    font-size: 0.8125rem;
  }
  div.wpforms-container-full .wpforms-confirmation-container-full:has(.op-get-a-quote-confirmation) .op-get-a-quote-confirmation__button {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }
}

/* The breadcrumb owns its grey band; the content section owns the white
 * surface and outer spacing, without stacking form/team/footer padding. */
body:has(.op-get-a-quote) #main-content {
  background: var(--op-color-white);
  padding-block: var(--op-space-12) var(--op-space-16);
}

body:has(.op-get-a-quote) .outputpro-footer {
  margin-block-start: 0;
}

/* Keep the form-to-team rhythm on the shared XL spacing token. */
body:has(.op-get-a-quote) .wp-block-post-content.is-layout-constrained > * {
  margin-block-start: var(--op-space-xl);
}

body:has(.op-get-a-quote) .wp-block-post-content.is-layout-constrained > :first-child {
  margin-block-start: 0;
}

.op-get-a-quote {
  /* Existing editor content may still carry op-container--form. */
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--op-layout-wide);
  padding-inline: var(--op-page-gutter);
  padding-block: 0 !important;
  width: 100%;
}

.op-get-a-quote > div.wpforms-container-full {
  margin-block: var(--op-space-xl) 0 !important;
}

.op-get-a-quote:has(.wpforms-confirmation-container-full) > div.wpforms-container-full {
  margin-block: 0 !important;
}

@media (width <= 767px) {
  body:has(.op-get-a-quote) #main-content {
    padding-block: var(--op-space-6) var(--op-space-8);
  }
}
@media (width <= 600px) {
  .op-get-a-quote div.wpforms-container-full {
    max-width: 100% !important;
    padding: 1rem !important;
    width: 100% !important;
  }
  .op-get-a-quote .wpforms-field.wpforms-mobile-full {
    float: none !important;
    margin-left: 0 !important;
    width: 100% !important;
  }
  .op-get-a-quote .wpforms-head-container,
  .op-get-a-quote .wpforms-field-container,
  .op-get-a-quote .wpforms-field,
  .op-get-a-quote fieldset,
  .op-get-a-quote .wpforms-form input[type=text],
  .op-get-a-quote .wpforms-form input[type=email],
  .op-get-a-quote .wpforms-form textarea,
  .op-get-a-quote .wpforms-field-label-inline,
  .op-get-a-quote .wpforms-field-description {
    max-width: 100% !important;
  }
  .op-get-a-quote div.wpforms-container-full .wpforms-description,
  .op-get-a-quote .wpforms-field-description {
    display: inline-block;
    width: 100% !important;
  }
}
.op-category__hero {
  background-color: var(--wp--preset--color--brand-blue);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  color: var(--op-color-nav-text);
  overflow: hidden;
  position: relative;
}

.op-category--orange .op-category__hero {
  background-color: var(--wp--preset--color--brand-orange);
}

.op-category__hero .op-container {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  min-height: 24.65rem;
  padding-block: 2rem;
}

.op-category__hero-spacer {
  min-width: 0;
}

.op-category__hero-copy {
  color: var(--op-color-nav-text);
  max-width: 32rem;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.op-category__hero h2 {
  color: inherit;
  margin: 0.25rem 0 1rem;
}

.op-category__hero p {
  color: inherit;
  max-width: 32rem;
}

.op-category__hero-image {
  height: 100%;
  left: 0;
  max-height: 23rem;
  object-fit: contain;
  position: absolute;
  top: 0;
  width: 50%;
}

.op-category__hero-backdrop {
  display: block;
  height: 100%;
  inset: 0;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

.op-category__hero-backdrop img {
  display: block;
  height: 100%;
  max-width: none;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.op-category__hero--responsive .op-category__hero-copy {
  min-width: 0;
  overflow-wrap: anywhere;
  position: relative;
  z-index: 1;
}

/* Keep the product's source focal point (48.5%) at x=35% of the viewport.
 * The baler artwork needs at least 42.75vw of height to cover the right edge;
 * Grow the standard hero from 400px to 620px, then cover wider screens by
 * cropping the same image vertically. Keep its composition height stable
 * when unusually long copy grows the hero, preserving readable text. */
@media (width >= 601px) {
  .op-category__hero--responsive {
    --op-category-header-space: 0px;
    --op-category-hero-min-height: clamp(400px, calc(43vw + var(--op-category-header-space)), 620px);
    --op-category-art-ratio: 2.9527;
    background-color: #e5e6e6;
    min-height: var(--op-category-hero-min-height);
  }
  .op-category--autonomous-cleaning .op-category__hero--responsive {
    --op-category-art-ratio: 3.2487;
  }
  .op-category__hero--responsive .op-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: var(--op-category-hero-min-height);
    padding-block-start: calc(var(--op-category-header-space) + 2rem);
  }
  .op-category__hero-backdrop {
    height: auto;
    top: var(--op-category-header-space);
  }
  .op-category__hero-backdrop img {
    height: calc(var(--op-category-hero-min-height) - var(--op-category-header-space));
    left: 35%;
    object-position: 48.5% center;
    top: 50%;
    transform: translate(-48.5%, -50%);
    width: max(126.22%, (var(--op-category-hero-min-height) - var(--op-category-header-space)) * var(--op-category-art-ratio));
  }
}
/* The compact header overlays hero pages. Reserve its closed action row when
 * the desktop copy is used below the navigation's 901px breakpoint. */
@media (601px <= width <= 900px) {
  .op-category__hero--responsive {
    --op-category-header-space: calc(var(--op-nav-cta-height) + 1.25rem);
  }
}
.op-category__crumb {
  color: #000;
  font-family: var(--op-font-body);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: var(--op-line-height-small);
  margin: 0;
  overflow-wrap: anywhere;
  padding-block: var(--op-space-md);
  white-space: normal;
}

.op-category__crumb a {
  color: inherit;
  line-height: inherit;
  text-decoration: none;
}

.op-category__crumb strong {
  font-weight: 700;
  line-height: inherit;
}

.op-category__crumb a:hover {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.op-category__filters {
  align-items: center;
  background: #ebecec;
  border-radius: 0.5881rem;
  display: grid;
  grid-template-columns: auto repeat(4, auto);
  justify-content: space-between;
  min-height: 2.6819rem;
  overflow-x: auto;
  padding: 0 4.125rem 0 1.475rem;
  scrollbar-width: none;
}

.op-category__filters::-webkit-scrollbar {
  display: none;
}

.op-category__filter {
  align-items: center;
  background: transparent;
  border: 0;
  color: #606060;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-family: var(--op-font-body);
  font-size: 0.875rem;
  font-weight: 400;
  gap: 0.375rem;
  line-height: 1.0625rem;
  margin: 0;
  min-height: 2.6819rem;
  padding: 0;
  white-space: nowrap;
}

.op-category__filter img {
  display: block;
  flex: 0 0 auto;
}

.op-category__filter--reset {
  font-weight: 700;
  gap: 1rem;
}

.op-category__filter:hover,
.op-category__filter:focus-visible {
  color: #606060;
}

.op-category__filter:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 3px;
}

.op-category__grid {
  padding-block: 2rem 5rem;
}

.op-category .op-home__product {
  min-height: 14.98rem;
  overflow: hidden;
  padding: 0 0.8125rem 0.625rem;
  position: relative;
}

.op-category .op-home__product-media {
  align-items: flex-start;
  display: flex;
  height: 11.125rem;
  justify-content: center;
  margin: 0;
  overflow: hidden;
  padding-top: var(--op-space-sm);
}

.op-category .op-home__product-media figure {
  align-items: flex-start;
  display: flex;
  height: 100%;
  justify-content: center;
  margin: 0;
  max-width: 100%;
  width: 100%;
}

.op-category .op-home__product-media img {
  display: block;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

.op-category .op-product-card h3 {
  color: var(--op-color-text-muted-on-light);
  font-size: 1.3131rem;
  line-height: 1.5625rem;
  margin: var(--op-space-md) 0 0;
}

.op-category .op-product-card p {
  color: var(--op-color-text-muted-on-light);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1rem;
  margin: 0.3125rem 0 0.7031rem;
  min-height: 2rem;
  max-height: 2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 13rem;
}

.op-category .op-product-card > .wp-block-buttons {
  margin-block-start: 0;
}

@media (width <= 900px) {
  body:has(.op-category) {
    background: var(--op-color-white);
  }
}
@media (width <= 600px) {
  body:has(.op-category__hero) .outputpro-header {
    background: var(--op-color-white);
    position: relative;
  }
  body:has(.op-category__hero) .outputpro-header__nav-shell {
    inset-inline: 1rem;
    position: absolute;
    top: calc(100% + 5px);
    width: auto;
  }
  /* The autonomous-cleaning archive supplies its desktop artwork inline; use the dedicated mobile crop here. */
  .op-category--autonomous-cleaning .op-category__hero:not(.op-category__hero--responsive) {
    background-image: url("../images/category-autonomous-hero-mobile.png") !important;
    background-size: contain;
  }
  .op-category .op-category__hero--responsive {
    background-color: #e5e6e6;
  }
  .op-category__hero-backdrop img {
    object-fit: contain;
  }
  .op-category__hero .op-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    aspect-ratio: auto;
    min-height: 71.7223650386vw;
    padding-block: var(--op-space-lg);
  }
  .op-category__hero-spacer {
    display: block;
  }
  .op-category__hero-image {
    max-height: 14rem;
    order: -1;
  }
  .op-category__hero-copy {
    max-width: none;
    padding-inline: 0.375rem 0;
    position: relative;
    z-index: 1;
  }
  .op-category__hero h2 {
    font-size: 1.5rem;
    letter-spacing: -0.0313rem;
    line-height: 1;
    margin: 0 0 0.5rem;
  }
  .op-category__hero p {
    display: none;
  }
  .op-category__hero-copy .op-button {
    height: auto;
    max-width: 100%;
    white-space: normal;
  }
}
@media (width <= 767px) {
  .op-category__crumb {
    padding-block: var(--op-space-sm);
  }
  .op-category__filters {
    box-sizing: border-box;
    gap: 0 0.25rem;
    grid-template-columns: 5.75rem repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 1fr);
    min-height: 3.1875rem;
    overflow: visible;
    padding: 0.25rem 0.75rem;
  }
  .op-category__filter {
    gap: 0.5rem;
    justify-content: center;
    line-height: 1rem;
    min-height: 0;
  }
  .op-category__filter--reset {
    grid-row: 1/span 2;
    justify-content: flex-start;
  }
  .op-category__filter--reset span {
    max-width: 3.5rem;
    white-space: normal;
  }
  .op-category__filter img {
    height: 1rem;
    width: 1rem;
  }
  .op-category__filter--reset img {
    border: 1px solid #808184;
    border-radius: 50%;
    box-sizing: border-box;
    height: 1.25rem;
    padding: 0.25rem;
    width: 1.25rem;
  }
  .op-category__grid {
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block: 1.25rem 2.5rem;
  }
  .op-category .op-home__product {
    min-height: 16.875rem;
  }
  .op-category .op-home__product-media {
    height: 9.125rem;
    padding-top: 0.5rem;
  }
  .op-category .op-home__product-media img {
    height: 100%;
    max-height: none;
    transform: scale(1.15);
    width: 100%;
  }
  .op-category .op-product-card h3 {
    margin-top: 0.25rem;
    white-space: nowrap;
  }
  .op-category .op-product-card p {
    margin-block: 0.1875rem 0.625rem;
    width: auto;
  }
  .op-category .op-product-card > .wp-block-buttons {
    margin-block-start: auto;
  }
}
@media (width <= 359px) {
  .op-category__hero .op-container {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
  .op-category__hero h2 {
    font-size: 1.25rem;
  }
  .op-category__filters {
    grid-template-columns: 5.25rem repeat(2, minmax(0, 1fr));
    padding-inline: 0.5rem;
  }
  .op-category__filter {
    font-size: 0.75rem;
    gap: 0.25rem;
  }
  .op-category__grid {
    grid-template-columns: 1fr;
  }
}
.op-product-detail {
  background: var(--op-color-white);
  padding-block: calc(var(--op-space-lg) + var(--op-space-md)) var(--op-space-24);
}

/* The product container owns the space before the shared footer. */
.single-product .outputpro-footer {
  margin-block-start: 0;
}

.op-product-detail__hero {
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) minmax(0, 1.65fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  min-width: 0;
}

.op-product-detail__copy,
.op-product-detail__main-media,
.op-product-detail__thumb-gallery,
.op-product-detail__thumbs,
.op-product-detail__content,
.op-product-detail__related,
.op-product-detail__related-gallery,
.op-product-detail__related-grid {
  min-width: 0;
}

.op-product-detail__eyebrow,
.op-product-detail__related h2 {
  color: var(--op-color-brand-blue);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
}

.op-product-detail h1 {
  color: var(--op-color-text-muted);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  margin-block: 0.75rem 1.5rem;
  overflow-wrap: anywhere;
}

.op-product-detail .op-product-detail__cta {
  height: auto;
  max-width: 100%;
  min-height: 1.625rem;
  white-space: normal;
}

.op-product-detail__specs {
  border-top: 1px solid #d1d3d4;
  position: relative;
  margin: 0 0 1.5rem;
}

.op-product-detail__specs::before {
  border-left: 1px solid #d1d3d4;
  content: "";
  inset-block: 0;
  left: 3rem;
  pointer-events: none;
  position: absolute;
}

.op-product-detail__spec {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.25rem 0.5625rem;
  border-bottom: 1px solid #d1d3d4;
  padding: 0.7rem 0;
  position: relative;
}

.op-product-detail__spec dt {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  grid-column: 2;
  overflow-wrap: anywhere;
}

.op-product-detail__spec-icon {
  height: auto;
  max-height: 2.4rem;
  max-width: 2rem;
  position: absolute;
  left: 1.375rem;
  top: 50%;
  transform: translate(-50%, -50%);
}

.op-product-detail__spec dd {
  color: var(--op-color-text-muted-on-light);
  font-size: 0.875rem;
  margin: 0;
  grid-column: 2;
  overflow-wrap: anywhere;
  min-width: 0;
}

.op-product-detail__gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5rem;
  gap: 1rem;
  align-items: center;
}

.op-product-detail__main-media {
  aspect-ratio: 1;
  min-height: 22rem;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.op-product-detail__main-image {
  display: block;
  height: auto;
  max-height: 26rem;
  width: 100%;
  object-fit: contain;
  opacity: 1;
  transform: translateX(0) scale(1);
  transition: opacity var(--op-motion-fast) var(--op-ease-soft), transform var(--op-motion-standard) var(--op-ease-standard);
}

.op-product-detail__main-image.is-gallery-changing {
  opacity: 0;
  transform: translateX(var(--op-gallery-shift, 0.75rem)) scale(0.985);
}

.op-product-detail__thumb-gallery {
  --op-product-thumb-size: 5rem;
  --op-product-thumb-window: calc(6 * var(--op-product-thumb-size) + 5 * 0.75rem);
  display: grid;
  gap: 0.25rem;
  justify-items: stretch;
}

.op-product-detail__thumbs {
  display: grid;
  gap: 0.75rem;
  grid-auto-rows: var(--op-product-thumb-size);
  align-content: start;
  max-block-size: var(--op-product-thumb-window);
  overflow-y: auto;
  scrollbar-width: thin;
}

.op-product-detail__thumb-gallery.is-enhanced .op-product-detail__thumbs {
  max-block-size: none;
  overflow: visible;
}

.op-product-detail__thumb-gallery.is-paginated .op-product-detail__thumbs {
  min-block-size: var(--op-product-thumb-window);
}

.op-product-detail__thumb[hidden],
.op-product-detail__thumb-arrow[hidden] {
  display: none;
}

.op-product-detail__thumb-arrow {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  justify-self: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
}

.op-product-detail__thumb-arrow img {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
  transform: rotate(90deg);
}

.op-product-detail__thumb-arrow:disabled {
  cursor: default;
  opacity: 0.4;
}

.op-product-detail__thumb-arrow:not(:disabled):hover {
  background: var(--op-color-surface);
}

.op-product-detail__mobile-controls {
  display: none;
}

.op-product-detail__gallery-arrow,
.op-product-detail__dot {
  appearance: none;
  border: 0;
  cursor: pointer;
}

.op-product-detail__thumb {
  box-sizing: border-box;
  background: #f0f0f0;
  border: 2px solid transparent;
  border-radius: 0.35rem;
  min-height: 4rem;
  padding: 0.25rem;
  transform: translateY(0);
  transition: border-color var(--op-motion-fast) var(--op-ease-soft), transform var(--op-motion-fast) var(--op-ease-standard), opacity var(--op-motion-fast) var(--op-ease-soft);
}

.op-product-detail__thumb.is-active {
  border-color: var(--op-color-brand-blue);
}

.op-product-detail__thumb img {
  display: block;
  height: 100%;
  max-height: 4.5rem;
  object-fit: contain;
  width: 100%;
}

.op-product-detail__content {
  margin-top: clamp(2rem, 5vw, 4rem);
}

/* Product detail tabs follow desktop node 8:3912 and mobile nodes 175:590–175:594. */
.op-product-detail__tabs {
  background: var(--op-color-bg-subtle);
  border-radius: 2rem;
  display: grid;
  grid-template-columns: repeat(var(--op-product-tab-count, 3), minmax(0, 1fr));
  gap: 0.25rem;
  overflow: hidden;
  padding: 0.2rem;
}

.op-product-detail__tabs button {
  background: transparent;
  border: 0;
  box-sizing: border-box;
  border-radius: 2rem;
  color: var(--op-color-nav-text);
  cursor: pointer;
  font-family: var(--op-font-body);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2143;
  min-width: 0;
  min-height: 1.75rem;
  padding: 0.3rem 0.75rem;
  text-align: center;
  white-space: nowrap;
}

.op-product-detail__tabs button[aria-selected=true] {
  background: #fff;
}

.op-product-detail__tab-label--compact {
  display: none;
}

.op-product-detail__panel {
  padding: 1.5rem 0.5rem;
  overflow-x: auto;
  overflow-wrap: anywhere;
  min-width: 0;
}

.op-product-detail__panel.is-entering {
  animation: op-product-panel-enter var(--op-motion-standard) var(--op-ease-standard);
}

@keyframes op-product-panel-enter {
  from {
    opacity: 0.45;
    transform: translateY(0.375rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.op-product-detail__panel img {
  max-width: 100%;
  height: auto;
}

.op-product-detail__video {
  aspect-ratio: 16/9;
  border: 0;
  display: block;
  height: auto;
  max-width: 60rem;
  width: 100%;
}

.op-product-detail__panel table {
  border-collapse: collapse;
  width: 100%;
}

.op-product-detail__thumb:hover,
.op-product-detail__thumb:focus-visible {
  transform: translateY(-0.125rem);
}

.op-product-detail__panel th,
.op-product-detail__panel td {
  border-bottom: 1px solid var(--op-color-border);
  padding: 0.75rem;
  text-align: left;
  vertical-align: top;
}

.op-product-detail__panel p,
.op-product-detail__panel li {
  max-width: 75ch;
  font-weight: 600;
}

.op-product-detail__related {
  border-top: 1px solid var(--op-color-border);
  margin-top: 2rem;
  padding-top: 1.5rem;
}

.op-product-detail__related-gallery {
  --op-related-per-page: 4;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
}

.op-product-detail__related-grid {
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--op-related-per-page) - 1) * 1rem) / var(--op-related-per-page));
  overflow-x: auto;
  padding: 0.25rem;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
}

.op-product-detail__related-grid > .op-product-card {
  scroll-snap-align: start;
  transition: transform var(--op-motion-standard) var(--op-ease-standard), opacity var(--op-motion-standard) var(--op-ease-soft), box-shadow var(--op-motion-standard) var(--op-ease-soft);
}

.op-product-detail__related-grid.is-page-changing > .op-product-card {
  opacity: 0.35;
  transform: translateX(var(--op-gallery-page-shift, 0.75rem));
}

.op-product-detail__related-gallery.is-paginated .op-product-detail__related-grid {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: repeat(var(--op-related-per-page), minmax(0, 1fr));
  overflow: visible;
}

.op-product-detail__related-grid > [hidden],
.op-product-detail__related-arrow[hidden] {
  display: none;
}

.op-product-detail__related-arrow {
  grid-column: 1;
  grid-row: 1;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
}

.op-product-detail__related-arrow:last-child {
  grid-column: 3;
}

.op-product-detail__related-arrow img {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
}

.op-product-detail__related-arrow:disabled {
  cursor: default;
  opacity: 0.4;
}

.op-product-detail__related-arrow:not(:disabled):hover {
  background: var(--op-color-surface);
}

.op-product-detail :is(button, a):focus-visible {
  outline: 2px solid var(--op-color-brand-blue);
  outline-offset: 3px;
}

.op-product-detail__placeholder {
  aspect-ratio: 1;
  background: var(--op-color-surface);
  border: 1px dashed var(--op-color-border);
  width: min(100%, 24rem);
}

/* Figma frames 8:3766 and 8:4554 supply the copy / image / thumbnail order.
 * The category-width rail and six-image pager are the requested extensions. */
@media (width >= 64rem) {
  .op-product-detail__hero {
    grid-template-columns: minmax(15rem, 1fr) minmax(0, 2fr) 5rem;
    gap: 3.5rem;
    margin-inline: 0;
    max-width: none;
  }
  .op-product-detail__gallery {
    display: contents;
  }
  .op-product-detail__eyebrow {
    margin: 0 0 1rem;
  }
  .op-product-detail__spec dt,
  .op-product-detail__spec dd {
    font-size: 0.75rem;
    line-height: 1.25rem;
  }
  .op-product-detail__main-media {
    grid-column: 2;
  }
  .op-product-detail__thumb-gallery {
    align-self: center;
    grid-column: 3;
  }
  .op-product-detail__main-image {
    max-height: 36rem;
  }
  .op-product-detail__panel {
    font-size: 0.875rem;
    line-height: 1.4;
  }
}
@media (width <= 47.9375rem) {
  .op-product-detail {
    padding-block: var(--op-space-md) var(--op-space-lg);
    padding-inline: 1.25rem;
  }
  .op-product-detail__hero {
    align-items: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
  .op-product-detail__copy {
    display: contents;
  }
  .op-product-detail__eyebrow {
    font-size: 0.6875rem;
    grid-row: 1;
    margin: 0 0 0.25rem;
  }
  .op-product-detail h1 {
    font-size: clamp(1.75rem, 7vw, 1.8125rem);
    grid-row: 2;
    line-height: 1.08;
    margin: 0 0 0.5rem;
  }
  .op-product-detail__content {
    margin-top: 0.625rem;
  }
  .op-product-detail__tabs button {
    font-size: clamp(0.75rem, 3.59vw, 0.875rem);
    font-weight: 400;
    padding-inline: 0.25rem;
  }
  .op-product-detail__tab-label--full {
    display: none;
  }
  .op-product-detail__tab-label--compact {
    display: inline;
  }
  .op-product-detail__related-gallery {
    --op-related-per-page: 1;
  }
  .op-product-detail__gallery {
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;
    grid-row: 3;
    min-width: 0;
  }
  .op-product-detail__main-media {
    aspect-ratio: auto;
    min-height: 14.5rem;
  }
  .op-product-detail__main-image {
    max-height: 14.5rem;
  }
  .op-product-detail__mobile-controls {
    align-items: center;
    border-bottom: 1px solid var(--op-color-border);
    display: grid;
    grid-template-columns: 2rem 1fr 2rem;
    min-height: 2rem;
  }
  .op-product-detail__gallery-arrow {
    background: transparent;
    color: #b5b5b5;
    font-size: 1.5rem;
    height: 2rem;
    line-height: 1;
    padding: 0;
  }
  .op-product-detail__dots {
    align-items: center;
    display: flex;
    gap: 0.35rem;
    justify-content: center;
  }
  .op-product-detail__dot {
    background: #bfbfbf;
    border-radius: 50%;
    height: 0.375rem;
    padding: 0;
    width: 0.375rem;
  }
  .op-product-detail__dot.is-active {
    background: var(--op-color-brand-blue);
  }
  .op-product-detail__thumb-gallery {
    display: none;
  }
  .op-product-detail__specs {
    display: grid;
    grid-row: 4;
    grid-template-columns: minmax(0, 1fr);
    margin: var(--op-space-2) 0 0;
  }
  .op-product-detail__specs::before {
    content: none;
  }
  .op-product-detail__spec {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--op-space-1) var(--op-space-3);
    min-width: 0;
    padding: var(--op-space-3) 0;
  }
  .op-product-detail__spec dt,
  .op-product-detail__spec dd {
    line-height: var(--op-line-height-small);
  }
  .op-product-detail__spec dt {
    font-size: var(--op-font-size-caption);
  }
  .op-product-detail__spec dd {
    font-size: var(--op-font-size-small);
    color: var(--op-color-text-secondary);
  }
  .op-product-detail__spec-icon {
    left: 1.25rem;
    max-height: 2rem;
    max-width: 1.75rem;
  }
  .op-product-detail .op-button.op-product-detail__cta {
    grid-row: 5;
    height: auto;
    justify-self: center;
    margin: 0.75rem 0 0;
    max-width: 100%;
    white-space: normal;
  }
  .op-product-detail__panel {
    font-size: 0.75rem;
    line-height: 1.45;
    padding: 0.75rem 0.125rem;
  }
  .op-product-detail__panel p,
  .op-product-detail__panel li {
    font-weight: 400;
  }
  .op-product-detail__panel p {
    margin-block: 0 0.9rem;
  }
}
@media (48rem <= width <= 63.9375rem) {
  .op-product-detail__related-gallery {
    --op-related-per-page: 2;
  }
  .op-product-detail__gallery {
    grid-template-columns: minmax(0, 1fr) 4.5rem;
  }
  .op-product-detail__thumb-gallery {
    --op-product-thumb-size: 4.5rem;
  }
}
/*
 * Case studies page — Figma file l44SzqPXIof3tikw9Q0fGH, node 8:1562.
 *
 * The Figma presentation frame includes a grey outer canvas. The website
 * intentionally renders only the white content surface, so all measurements
 * below are relative to that surface rather than reproducing the canvas.
 */
.op-case-studies-page {
  background: var(--op-color-white);
  padding-block: 0;
}

.op-case-studies-page > .op-case-studies {
  background: var(--op-color-white);
  padding-block-start: 19.08px;
}

.op-case-study {
  /* Figma photo slots 8:2060 / 8:1721 share a 322.03 × 369.45 crop. */
  --op-case-study-image-width: 322.03px;
  --op-case-study-image-ratio: 322.03 / 369.45;
  margin: 0 0 19.19px;
}

/* WordPress constrained-layout margins otherwise inset each card by 16px. */
.op-case-studies > .op-case-study {
  margin-inline: 0;
  max-width: none;
  width: 100%;
}

.op-case-study:last-child {
  margin-bottom: 0;
}

.op-case-study__eyebrow {
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
  margin: 0 0 13.9px;
  padding-left: 17.13px;
}

.op-case-study__card {
  background: var(--op-color-white);
  border-radius: 10px;
  box-shadow: var(--op-elevation-2);
  box-sizing: border-box;
  overflow: hidden;
}

.op-case-study__top {
  display: grid;
  grid-template-columns: minmax(0, var(--op-case-study-image-width)) minmax(0, 1fr);
}

.op-case-study--waste .op-case-study__top {
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--op-case-study-image-width));
}

.op-case-study__image {
  align-self: start;
  aspect-ratio: var(--op-case-study-image-ratio);
  margin: 0;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.op-case-study__image img {
  display: block;
  height: auto;
  max-width: none;
  object-fit: contain;
  position: absolute;
}

.op-case-study--autonomous .op-case-study__image img {
  left: -103.35%;
  top: -12.14%;
  width: 219.65%;
}

.op-case-study--waste .op-case-study__image img {
  left: -34.61%;
  top: -1.25%;
  width: 179.12%;
}

.op-case-study__proof {
  box-sizing: border-box;
  min-width: 0;
  padding: 22.45px 10.35px 0;
}

.op-case-study--waste .op-case-study__proof {
  padding: 19.6px 8.22px 0 12.92px;
}

.op-case-study__brand-row {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--op-space-xs);
  justify-content: space-between;
  margin: 0 16.92px 19.75px;
}

.op-case-study--waste .op-case-study__brand-row {
  margin-bottom: 15.84px;
  margin-left: 0;
  margin-right: 23.44px;
}

.op-case-study__brand-logo {
  flex: 0 0 auto;
  margin: 0;
  max-width: 100%;
  width: 180.323px;
}

.op-case-study--waste .op-case-study__brand-logo {
  width: 193.3px;
}

.op-case-study__brand-logo img {
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

.op-case-study__stars {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  gap: 11.94px;
  margin: 8.66px 0 0;
  width: auto;
}

.op-case-study__stars img {
  display: block;
  flex: 0 0 17.28px;
  height: auto;
  opacity: 0.5;
  width: 17.28px;
}

.op-case-study--waste .op-case-study__stars {
  margin-top: 11.58px;
}

.op-case-study__quote {
  background: var(--op-color-bg-subtle);
  border: 0;
  box-sizing: border-box;
  margin: 0 0 5.94px;
  overflow-wrap: anywhere;
  padding: 19.2px 14px 8px;
  text-align: center;
}

.op-case-study__quote p {
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  margin: 0 0 7px;
}

.op-case-study__quote p br,
.op-case-study__detail p br {
  display: none;
}

.op-case-study__quote cite {
  display: block;
  font-size: 11px;
  font-style: normal;
  line-height: 14px;
  text-align: left;
}

.op-case-study__metrics {
  border-bottom: 1px solid #b2b2b2;
  box-sizing: border-box;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-inline: 6.62px;
  overflow-wrap: anywhere;
  padding: 0;
}

.op-case-study__metrics p {
  margin: 0;
  text-align: center;
}

.op-case-study__metrics strong {
  color: var(--op-color-text);
  display: block;
  font-size: 55.74px;
  font-weight: 400;
  line-height: 67px;
}

.op-case-study__metrics span {
  color: var(--op-color-text);
  display: block;
  font-size: 19.48px;
  line-height: 24px;
}

.op-case-study__details {
  box-sizing: border-box;
  display: flex;
  gap: var(--op-space-2xl);
  justify-content: space-between;
  padding: 14.37px 49.3px 0 31.81px;
}

.op-case-study__detail {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 0;
  position: relative;
}

.op-case-study__detail:not(:last-child)::after {
  background: #b2b2b2;
  content: "";
  inset-block: 0 var(--op-space-lg);
  position: absolute;
  right: calc(var(--op-space-2xl) / -2);
  width: 1px;
}

.op-case-study__detail h3 {
  font-size: 21px;
  font-weight: 700;
  line-height: 25px;
  margin: 0 0 4.82px;
}

.op-case-study__detail p {
  font-size: 12.12px;
  font-weight: 700;
  line-height: 16.94px;
  margin: 0;
}

.op-case-study__actions {
  align-items: flex-start;
  box-sizing: border-box;
  display: flex;
  margin: 0;
  padding: 0 0 15.79px 29.73px;
}

@media (width <= 767px) {
  .op-case-studies-page > .op-case-studies {
    padding-block-start: 1.25rem;
  }
  .op-case-study {
    margin-bottom: 1.5rem;
  }
  .op-case-study__eyebrow {
    margin-bottom: 0.625rem;
    padding-left: 0;
  }
  .op-case-study__top,
  .op-case-study--waste .op-case-study__top {
    display: flex;
    flex-direction: column;
  }
  .op-case-study__image,
  .op-case-study--waste .op-case-study__image {
    align-self: stretch;
    aspect-ratio: 1.6;
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    order: 0;
  }
  .op-case-study--waste .op-case-study__proof {
    order: 1;
  }
  .op-case-study--waste .op-case-study__image {
    order: 2;
  }
  .op-case-study__image img,
  .op-case-study--autonomous .op-case-study__image img,
  .op-case-study--waste .op-case-study__image img {
    height: 100%;
    left: 0;
    object-fit: cover;
    top: 0;
    width: 100%;
  }
  .op-case-study__proof,
  .op-case-study--waste .op-case-study__proof {
    padding: 1rem;
  }
  .op-case-study__brand-row,
  .op-case-study--waste .op-case-study__brand-row {
    margin: 0 0 1rem;
  }
  .op-case-study__brand-logo,
  .op-case-study--waste .op-case-study__brand-logo {
    height: auto;
    max-width: 55%;
    width: auto;
  }
  .op-case-study__stars {
    gap: 0.5rem;
    margin-top: 0.25rem;
  }
  .op-case-study--waste .op-case-study__stars {
    margin-top: 0.25rem;
  }
  .op-case-study__stars img {
    flex-basis: 1rem;
    height: auto;
    width: 1rem;
  }
  .op-case-study__quote {
    height: auto;
    min-height: 11.3rem;
    padding: 1rem;
  }
  .op-case-study__quote p {
    font-size: clamp(1rem, 4.6vw, 1.25rem);
    line-height: 1.3;
  }
  .op-case-study__metrics {
    height: auto;
    min-height: 6.5rem;
    padding-bottom: 0.5rem;
  }
  .op-case-study__metrics strong {
    font-size: clamp(2.75rem, 13vw, 3.5rem);
  }
  .op-case-study__metrics span {
    font-size: clamp(0.875rem, 3.8vw, 1.2rem);
  }
  .op-case-study__details {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
  }
  .op-case-study__detail {
    flex-basis: auto;
    width: 100%;
  }
  .op-case-study__detail:not(:last-child)::after {
    display: none;
  }
  .op-case-study__detail:not(:last-child) {
    border-bottom: 1px solid #b2b2b2;
    padding-bottom: 0.75rem;
  }
  .op-case-study__detail p {
    width: auto;
  }
  .op-case-study__actions,
  .op-case-study--waste .op-case-study__actions {
    height: auto;
    padding: 0 1rem 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .op-case-study__card {
    transition: none;
  }
}
/* Get a Quote team cards — Figma node 8:4057. The shared page rail owns width. */
.op-get-a-quote-team h2 {
  color: var(--op-color-brand-orange);
  font-family: var(--op-font-system);
  font-size: var(--op-font-size-small);
  font-weight: var(--op-font-weight-bold);
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0 0 var(--op-space-xl);
  text-transform: uppercase;
}

.op-get-a-quote-team > .op-get-a-quote-team__grid {
  display: grid;
  gap: var(--op-space-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: 0;
}

.op-get-a-quote-team__card {
  background: var(--op-color-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--op-radius-xs);
  box-shadow: var(--op-elevation-1);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem;
  min-height: 8.5rem;
  overflow: hidden;
}

.op-get-a-quote-team__grid > .op-get-a-quote-team__card {
  margin: 0;
}

.op-get-a-quote-team__card > .op-get-a-quote-team__info {
  align-content: center;
  column-gap: var(--op-space-2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.45rem;
  margin: 0;
  min-width: 0;
  padding: var(--op-space-6) var(--op-space-4);
  padding-inline-end: var(--op-space-5);
}

.op-get-a-quote-team__info > h3,
.op-get-a-quote-team__info > p {
  grid-column: 1;
  overflow-wrap: anywhere;
}

.op-get-a-quote-team__info h3 {
  color: var(--op-color-ink);
  font-family: var(--op-font-display);
  font-size: 1.3125rem;
  font-weight: var(--op-font-weight-bold);
  line-height: 1.15;
  margin: 0 0 var(--op-space-1);
}

.op-get-a-quote-team__info p {
  color: var(--op-color-ink);
  font-size: var(--op-font-size-caption);
  font-weight: var(--op-font-weight-bold);
  line-height: 1.25;
  margin: 0.2rem 0;
  overflow-wrap: anywhere;
}

.op-get-a-quote-team__info p.op-get-a-quote-team__role {
  font-weight: var(--op-font-weight-regular);
  margin-bottom: var(--op-space-3);
}

.op-get-a-quote-team__info a {
  color: inherit;
  text-decoration: none;
}

.op-get-a-quote-team__info a:hover,
.op-get-a-quote-team__info a:focus-visible {
  text-decoration: underline;
}

.op-get-a-quote-team__card > .op-get-a-quote-team__media {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
}

.op-get-a-quote-team__media img {
  display: block;
  height: 100%;
  min-height: 8.5rem;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.op-get-a-quote-team__info > .op-get-a-quote-team__social {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2);
  grid-column: 2;
  grid-row: 1/span 4;
  align-self: center;
  margin: 0;
}

.op-get-a-quote-team__social-icon {
  display: block;
  height: 1.45rem;
  margin: 0;
  position: relative;
  width: 1.45rem;
}

.op-get-a-quote-team__social-icon img {
  display: block;
  height: 100%;
  width: 100%;
}

.op-get-a-quote-team__social-icon img + img {
  inset: 0.2rem;
  position: absolute;
  height: 1.05rem;
  width: 1.05rem;
}

@media (width <= 767px) {
  .op-get-a-quote-team > .op-get-a-quote-team__grid {
    grid-template-columns: 1fr;
  }
  .op-get-a-quote-team__card {
    grid-template-columns: minmax(0, 1fr) 5.5rem;
    min-width: 0;
    width: 100%;
  }
  .op-get-a-quote-team__card > .op-get-a-quote-team__info {
    padding: var(--op-space-4) var(--op-space-3);
    padding-inline-end: var(--op-space-5);
  }
}
/* Contact Us — Figma file l44SzqPXIof3tikw9Q0fGH, node 8:4933. */
.op-contact-hero {
  align-items: center;
  background-color: var(--op-color-bg-subtle);
  background-image: var(--op-contact-hero-image);
  background-position: center 46%;
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
  display: flex;
  min-height: max(clamp(13rem, 22vw, 17rem), 25vw);
  overflow: hidden;
}

.op-contact-hero .wp-block-cover__image-background {
  object-position: center 46%;
}

.op-contact-hero__inner {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  margin-inline: auto;
  max-width: var(--op-layout-wide);
  padding-inline: var(--op-gutter);
  width: 100%;
}

.op-contact-hero__copy {
  grid-column: 2;
  max-width: 27rem;
  padding-block: var(--op-space-8);
}

.op-contact-hero__copy h1 {
  color: var(--op-color-text-muted);
  font-family: var(--op-font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.375rem);
  font-weight: var(--op-font-weight-bold);
  line-height: 1.15;
  margin: 0 0 var(--op-space-4);
  overflow-wrap: anywhere;
}

.op-contact-hero__button > .wp-block-button__link {
  align-items: center;
  background: var(--op-color-ink);
  border-radius: var(--op-radius-pill);
  box-sizing: border-box;
  color: var(--op-color-white);
  display: inline-flex;
  font-size: var(--op-font-size-caption);
  font-weight: var(--op-font-weight-bold);
  justify-content: center;
  min-height: 2.25rem;
  min-width: 8rem;
  padding: var(--op-space-2) var(--op-space-4);
  text-decoration: none;
}

.op-contact-hero__button > .wp-block-button__link:hover,
.op-contact-hero__button > .wp-block-button__link:focus-visible {
  background: var(--op-color-charcoal);
  color: var(--op-color-white);
  text-decoration: none;
}

.op-contact-hero__button > .wp-block-button__link:focus-visible,
.op-contact-details a:focus-visible {
  outline: 3px solid var(--op-color-brand-blue);
  outline-offset: 3px;
}

.op-contact {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--op-layout-wide);
  min-width: 0;
  padding-inline: var(--op-page-gutter);
  padding-bottom: 0 !important;
  width: 100%;
}

.op-contact > *,
.op-contact .wpforms-container,
.op-contact .wpforms-form {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.op-contact > .has-brand-orange-color {
  color: #e18702;
  font-family: var(--op-font-system);
  font-size: var(--op-font-size-small);
  font-weight: var(--op-font-weight-bold);
  margin: 0 0 var(--op-space-4);
}

.op-contact div.wpforms-container-full {
  background: var(--op-color-white);
  border-radius: var(--op-radius-sm);
  box-shadow: 0 0.35rem 0.8rem rgba(0, 0, 0, 0.18);
  margin: 0;
  padding: var(--op-space-4);
}

.op-contact div.wpforms-container-full .wpforms-description {
  color: var(--op-color-ink);
  font-family: var(--op-font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.25;
  margin: 0 0 var(--op-space-4);
  overflow-wrap: anywhere;
}

.op-contact .wpforms-head-container,
.op-contact .wpforms-field-container,
.op-contact .wpforms-field,
.op-contact fieldset,
.op-contact label,
.op-contact .wpforms-field-description {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.op-contact .wpforms-field-container {
  display: grid;
  gap: var(--op-space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.op-contact .wpforms-field {
  clear: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

.op-contact .wpforms-field-textarea,
.op-contact .wpforms-field-checkbox,
.op-contact .wpforms-field-gdpr-checkbox,
.op-contact .wpforms-field-message-full {
  grid-column: 1/-1;
}

.op-contact .wpforms-form input[type=text],
.op-contact .wpforms-form input[type=email],
.op-contact .wpforms-form input[type=tel],
.op-contact .wpforms-form textarea {
  background: #ececec;
  border: 1px solid transparent;
  border-radius: 0.625rem;
  box-sizing: border-box;
  color: var(--op-color-ink);
  font-family: var(--op-font-body);
  font-size: var(--op-font-size-caption);
  min-height: 2.75rem;
  padding: var(--op-space-3) var(--op-space-4);
  width: 100%;
}

.op-contact .wpforms-form textarea {
  min-height: 5.25rem;
  resize: vertical;
}

.op-contact .wpforms-form input::placeholder,
.op-contact .wpforms-form textarea::placeholder {
  color: var(--op-color-text-muted);
  font-weight: var(--op-font-weight-bold);
  opacity: 1;
}

.op-contact .wpforms-field-checkbox ul,
.op-contact .wpforms-field-gdpr-checkbox ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.op-contact .wpforms-field-checkbox li,
.op-contact .wpforms-field-gdpr-checkbox li {
  align-items: flex-start;
  display: flex;
  gap: var(--op-space-3);
  margin: 0;
}

.op-contact .wpforms-field-checkbox li + li,
.op-contact .wpforms-field-gdpr-checkbox li + li {
  margin-block-start: var(--op-space-2);
}

.op-contact .wpforms-field-checkbox input[type=checkbox],
.op-contact .wpforms-field-gdpr-checkbox input[type=checkbox] {
  accent-color: var(--op-color-brand-orange);
  flex: 0 0 auto;
  height: 1.25rem;
  margin: 0;
  width: 1.25rem;
}

.op-contact .wpforms-field-checkbox label,
.op-contact .wpforms-field-gdpr-checkbox label {
  color: var(--op-color-text-muted);
  cursor: pointer;
  font-size: 0.6875rem;
  font-weight: var(--op-font-weight-demi);
  line-height: 1.35;
}

.op-contact .wpforms-submit-container {
  margin-block-start: var(--op-space-4);
  text-align: center;
}

.op-contact .wpforms-form button[type=submit] {
  background: var(--op-color-bg-action) !important;
  border: 0;
  border-radius: var(--op-radius-pill);
  color: var(--op-color-ink);
  font-weight: var(--op-font-weight-bold);
  min-height: 2.5rem;
  min-width: 8rem;
}

.op-contact .wpforms-form button[type=submit]:hover,
.op-contact .wpforms-form button[type=submit]:focus-visible {
  background: var(--op-color-orange-hover) !important;
}

.op-contact:has(.wpforms-confirmation-container-full) > .has-brand-orange-color {
  display: none;
}

.op-contact:has(.wpforms-confirmation-container-full) > .wp-block-shortcode {
  margin-block-start: 0;
}

.op-contact:has(.wpforms-confirmation-container-full) div.wpforms-container-full {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.op-contact .wpforms-confirmation-container-full {
  background: transparent;
  border: 0;
  box-sizing: border-box;
  color: var(--op-color-ink);
  padding: 0;
}

.op-contact-details {
  display: grid;
  gap: var(--op-space-8);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-block: 0 var(--op-space-16);
}

.op-contact-details__copy {
  min-width: 0;
}

.op-contact-details h2 {
  color: #e18702;
  font-family: var(--op-font-system);
  font-size: var(--op-font-size-small);
  font-weight: var(--op-font-weight-bold);
  margin: 0 0 var(--op-space-4);
}

.op-contact-details address {
  color: var(--op-color-charcoal);
  font-size: var(--op-font-size-caption);
  font-style: normal;
  font-weight: var(--op-font-weight-bold);
  line-height: 1.6;
}

.op-contact-details address p {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--op-space-2);
  margin: 0;
}

.op-contact-details address a {
  color: inherit;
  text-decoration: none;
}

.op-contact-details address a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.op-contact-details__social {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--op-space-4);
  margin-block-start: var(--op-space-8);
  padding: 0;
}

.op-contact-details__social .wp-social-link {
  background: transparent;
  margin: 0;
}

.op-contact-details__social .wp-block-social-link-anchor {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #bec0c2;
  display: inline-flex;
  height: 1.4638rem;
  line-height: 0;
  padding: 0;
  width: 1.4638rem;
}

.op-contact-details__social .wp-social-link-facebook .wp-block-social-link-anchor {
  background-image: url("../images/contact-facebook.svg");
  height: 1.4387rem;
  width: 1.4394rem;
}

.op-contact-details__social .wp-social-link-linkedin .wp-block-social-link-anchor {
  background-image: url("../images/contact-linkedin.svg");
}

.op-contact-details__social .wp-social-link-whatsapp .wp-block-social-link-anchor {
  background-image: url("../images/contact-whatsapp.svg");
  height: 1.4631rem;
  width: 1.4631rem;
}

.op-contact-details__social .wp-social-link-youtube .wp-block-social-link-anchor {
  background-image: url("../images/contact-youtube.svg");
  height: 1.4631rem;
  width: 1.4631rem;
}

.op-contact-details__social svg {
  display: none;
}

.op-contact-details__map {
  align-self: start;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--op-radius-sm);
  box-shadow: var(--op-elevation-1);
  margin: 0;
  overflow: hidden;
}

.op-contact-details__map img {
  aspect-ratio: 1.445/1;
  display: block;
  height: auto;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

body:has(.op-contact) #main-content > * {
  margin-block-start: var(--op-space-xl);
}

body:has(.op-contact) #main-content > :first-child {
  margin-block-start: 0;
}

@media (width <= 767px) {
  .op-contact div.wpforms-container-full {
    padding: var(--op-space-4);
  }
  .op-contact .wpforms-field-container {
    grid-template-columns: minmax(0, 1fr);
  }
  .op-contact .wpforms-field,
  .op-contact .wpforms-field-textarea,
  .op-contact .wpforms-field-checkbox,
  .op-contact .wpforms-field-gdpr-checkbox {
    grid-column: 1;
  }
  .op-contact-details {
    gap: var(--op-space-6);
    grid-template-columns: minmax(0, 1fr);
  }
}
.op-about {
  background: var(--op-color-bg-canvas);
  color: var(--op-color-text-primary);
}

.op-about__hero {
  align-items: flex-start;
  background: var(--op-color-bg-subtle);
  box-sizing: border-box;
  display: flex;
  overflow: hidden;
  padding: 0;
  /* Keep the approved banner proportion as a floor so enlarged copy can grow. */
  min-height: 37.1807000946vw;
}

.op-about__hero .wp-block-cover__image-background {
  object-position: center center;
}

.op-about__hero-inner {
  box-sizing: border-box;
  display: grid;
  /* Figma About frame 8:5424 places the hero copy at roughly 23% of the
   * content width, leaving the family image open on the right. */
  grid-template-columns: minmax(0, 0.22fr) minmax(0, 0.78fr);
  margin-inline: auto;
  max-width: var(--op-layout-page);
  padding: clamp(2rem, 6.3vw, 5rem) var(--op-gutter);
  width: 100%;
}

.op-about__hero-title {
  color: var(--op-color-charcoal);
  font-family: var(--op-font-display);
  font-size: clamp(1.45rem, 2.7vw, 2rem);
  font-weight: var(--op-font-weight-bold);
  line-height: 1.06;
  margin: 0;
  max-width: 22rem;
  grid-column: 2;
}

.op-about__hero-actions {
  grid-column: 2;
  margin: 1.5rem 0 0;
}

.op-about__button > .wp-block-button__link {
  background: var(--op-color-brand-blue);
  border-radius: var(--op-radius-pill);
  color: var(--op-color-white);
  font-size: 0.6875rem;
  font-weight: var(--op-font-weight-bold);
  min-height: 1.656rem;
  padding: 0.35rem 1rem;
}

.op-about__story {
  padding-block: clamp(2rem, 3.4vw, 2.55rem) clamp(4rem, 8vw, 7rem);
}

.op-about__story-title {
  font-size: 1.05rem;
  font-weight: var(--op-font-weight-bold);
  line-height: 1.25;
  margin: 0 0 0.8rem;
}

.op-about__story-copy {
  font-size: 0.875rem;
  font-weight: var(--op-font-weight-bold);
  line-height: 1.35;
  margin: 0;
}

/* Keep both panels aligned with the story copy per the approved width update.
 * Images occupy the right side of the quote and left side of the feature. */
.op-about__quote {
  background: var(--op-color-white);
  border-radius: var(--op-radius-md);
  box-shadow: 0.15rem 0.15rem 0.48rem rgba(0, 0, 0, 0.28);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 0.28fr);
  margin: var(--op-space-md) 0 2.625rem;
  min-height: 11.48rem;
  padding: 0;
  width: 100%;
}

.op-about__quote blockquote {
  align-self: center;
  border: 0;
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  padding: var(--op-space-xl) 1.875rem var(--op-space-sm);
}

.op-about__quote p {
  color: var(--op-color-text-muted);
  font-family: var(--op-font-display);
  font-size: 1.25rem;
  font-weight: var(--op-font-weight-bold);
  line-height: 1.3;
  margin: 0;
  text-align: center;
  overflow-wrap: anywhere;
}

.op-about__quote cite {
  color: var(--op-color-ink);
  display: block;
  font-size: var(--op-font-size-caption);
  font-style: italic;
  line-height: 1.25;
  margin-top: var(--op-space-5);
  text-align: right;
}

.op-about__feature {
  background: var(--op-color-bg-subtle);
  border-radius: var(--op-radius-md);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr);
  margin-inline: 0;
  min-height: 14.45rem;
  padding: 0;
  width: 100%;
}

.op-about__quote-image,
.op-about__feature-image {
  align-self: stretch;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.op-about__quote-image {
  border-radius: 0 var(--op-radius-md) var(--op-radius-md) 0;
}

.op-about__feature-image {
  border-radius: var(--op-radius-md) 0 0 var(--op-radius-md);
}

.op-about__quote-image img,
.op-about__feature-image img {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.op-about__feature-image img {
  object-position: 18% center;
}

.op-about__feature-copy {
  align-self: center;
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  padding: 1.7rem 1.75rem 1.7rem var(--op-space-lg);
  overflow-wrap: anywhere;
}

.op-about__feature h3 {
  font-size: var(--op-font-size-body);
  font-weight: var(--op-font-weight-bold);
  line-height: 1.2;
  margin: 0 0 0.35rem;
}

.op-about__feature p {
  font-size: 0.875rem;
  font-weight: var(--op-font-weight-regular);
  line-height: 1.4;
  margin: 0;
}

.op-about__feature .wp-block-buttons {
  margin: var(--op-space-1) 0 0;
}

.op-about__feature-button {
  margin: 0;
}

.op-about__feature-button > .wp-block-button__link {
  background: var(--op-color-ink);
  border-radius: var(--op-radius-pill);
  color: var(--op-color-white);
  font-size: 0.6637rem;
  font-weight: var(--op-font-weight-bold);
  height: auto;
  line-height: 1;
  min-height: 1.656rem;
  padding: 0.35rem 1.4rem;
}

@media (width <= 767px) {
  .op-about__story {
    padding-top: 2rem;
  }
  .op-about__quote,
  .op-about__feature {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .op-about__quote blockquote {
    padding: var(--op-space-lg);
  }
  .op-about__quote p {
    font-size: var(--op-font-size-lead);
  }
  .op-about__quote-image {
    aspect-ratio: var(--op-aspect-video);
    border-radius: 0 0 var(--op-radius-md) var(--op-radius-md);
  }
  .op-about__feature-image {
    aspect-ratio: var(--op-aspect-video);
    border-radius: var(--op-radius-md) var(--op-radius-md) 0 0;
  }
  .op-about__feature-copy {
    padding: var(--op-space-lg);
  }
}
/* Keep the title below the compact header's overlaid white action row. */
@media (width <= 900px) {
  .op-about__hero {
    min-height: max(37.1807000946vw, 22rem);
  }
  .op-about__hero-inner {
    padding-block-start: calc(var(--op-nav-cta-height) + 2.25rem);
  }
}
/* About / Contact mobile artwork follows the user-supplied 4:3 previews.
 * The original desktop Cover block stays editable; picture sources switch at
 * 600px and the mobile grid puts title and action above/below the image focus. */
.op-page-hero-media {
  display: block;
  inset: 0;
  pointer-events: none;
  position: absolute;
}

@media (width <= 600px) {
  body:has(.op-about__hero) .outputpro-header {
    background: var(--op-color-white);
    position: relative;
  }
  .op-about,
  body:has(.op-contact-hero) .wp-site-blocks {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .op-about__hero,
  .op-contact-hero {
    align-items: stretch;
    margin-block-start: 0;
    min-height: 0;
    padding: 0;
  }
  .op-about > .outputpro-breadcrumb-section {
    grid-row: 1;
    margin-block-start: 0;
  }
  .op-about > .op-about__hero {
    grid-row: 2;
  }
  body:has(.op-contact-hero) .wp-site-blocks > header {
    grid-row: 1;
  }
  body:has(.op-contact-hero) .wp-site-blocks > .wp-block-post-content {
    display: grid;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
  }
  body:has(.op-contact-hero) .wp-block-post-content > .outputpro-breadcrumb-section {
    grid-row: 1;
    margin-block-start: 0;
  }
  body:has(.op-contact-hero) .wp-block-post-content > .op-contact-hero {
    grid-row: 2;
  }
  .op-about__hero .wp-block-cover__image-background,
  .op-contact-hero .wp-block-cover__image-background {
    object-position: center;
  }
  .op-about__hero .wp-block-cover__inner-container,
  .op-contact-hero .wp-block-cover__inner-container {
    margin: 0;
    max-width: none;
    width: 100%;
  }
  .op-contact-hero__inner {
    display: block;
    max-width: none;
    padding: 0;
  }
  .op-about__hero-inner,
  .op-contact-hero__copy {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(7rem, 1fr) auto;
    max-width: none;
    min-height: 75vw;
    padding: var(--op-space-6) var(--op-gutter);
    width: 100%;
  }
  .op-about__hero-title,
  .op-contact-hero__copy h1 {
    color: var(--op-color-charcoal);
    font-size: clamp(1.25rem, 6.15vw, 1.5rem);
    grid-column: 1;
    grid-row: 1;
    line-height: 1.1;
    margin: 0 auto;
    max-width: 20rem;
    overflow-wrap: anywhere;
    text-align: center;
    width: 100%;
  }
  .op-contact-hero__copy h1 {
    max-width: 16rem;
  }
  .op-contact-hero__desktop-break {
    display: none;
  }
  .op-about__hero-actions,
  .op-contact-hero__actions {
    grid-column: 1;
    grid-row: 3;
    justify-content: center;
    margin: 0;
  }
  .op-about__hero .op-about__button > .wp-block-button__link,
  .op-contact-hero .op-contact-hero__button > .wp-block-button__link {
    background: var(--op-color-brand-blue);
    color: var(--op-color-white);
    font-size: 0.625rem;
    height: auto;
    line-height: 1.1;
    min-height: 1.75rem;
    min-width: 7rem;
    padding: var(--op-space-1) var(--op-space-4);
  }
  .op-about__hero .op-about__button > .wp-block-button__link:hover,
  .op-contact-hero .op-contact-hero__button > .wp-block-button__link:hover {
    background: var(--op-color-blue-hover);
  }
  .op-about__hero .op-about__button > .wp-block-button__link:active,
  .op-contact-hero .op-contact-hero__button > .wp-block-button__link:active {
    background: var(--op-color-blue-active);
  }
  .op-about__hero .op-about__button > .wp-block-button__link[aria-disabled=true],
  .op-contact-hero .op-contact-hero__button > .wp-block-button__link[aria-disabled=true] {
    background: var(--op-color-bg-disabled);
    color: var(--op-color-text-disabled);
  }
}
/* stylelint-disable selector-class-pattern */
/*
 * Tailwind-compatible spacing utilities.
 *
 * These classes intentionally own spacing only. Components should keep
 * geometry, colour, typography, and interaction states in their component
 * partials; a pattern can compose those rules with these utilities in its
 * markup. The explicit !important makes an opt-in utility predictable when
 * it is applied to a WordPress block that also receives generated selectors.
 */
/* Keep the existing Foundation names available during the migration. */
.m-px {
  margin: var(--op-space-px) !important;
}

.m-0 {
  margin: var(--op-space-0) !important;
}

.m-0\.5 {
  margin: var(--op-space-0-5) !important;
}

.m-1 {
  margin: var(--op-space-1) !important;
}

.m-1\.5 {
  margin: var(--op-space-1-5) !important;
}

.m-2 {
  margin: var(--op-space-2) !important;
}

.m-2\.5 {
  margin: var(--op-space-2-5) !important;
}

.m-3 {
  margin: var(--op-space-3) !important;
}

.m-3\.5 {
  margin: var(--op-space-3-5) !important;
}

.m-4 {
  margin: var(--op-space-4) !important;
}

.m-5 {
  margin: var(--op-space-5) !important;
}

.m-6 {
  margin: var(--op-space-6) !important;
}

.m-7 {
  margin: var(--op-space-7) !important;
}

.m-8 {
  margin: var(--op-space-8) !important;
}

.m-9 {
  margin: var(--op-space-9) !important;
}

.m-10 {
  margin: var(--op-space-10) !important;
}

.m-11 {
  margin: var(--op-space-11) !important;
}

.m-12 {
  margin: var(--op-space-12) !important;
}

.m-14 {
  margin: var(--op-space-14) !important;
}

.m-16 {
  margin: var(--op-space-16) !important;
}

.m-20 {
  margin: var(--op-space-20) !important;
}

.m-24 {
  margin: var(--op-space-24) !important;
}

.m-28 {
  margin: var(--op-space-28) !important;
}

.m-32 {
  margin: var(--op-space-32) !important;
}

.m-36 {
  margin: var(--op-space-36) !important;
}

.m-40 {
  margin: var(--op-space-40) !important;
}

.m-44 {
  margin: var(--op-space-44) !important;
}

.m-48 {
  margin: var(--op-space-48) !important;
}

.m-52 {
  margin: var(--op-space-52) !important;
}

.m-56 {
  margin: var(--op-space-56) !important;
}

.m-60 {
  margin: var(--op-space-60) !important;
}

.m-64 {
  margin: var(--op-space-64) !important;
}

.m-72 {
  margin: var(--op-space-72) !important;
}

.m-80 {
  margin: var(--op-space-80) !important;
}

.m-96 {
  margin: var(--op-space-96) !important;
}

.m-2xs {
  margin: var(--op-space-2xs) !important;
}

.m-xs {
  margin: var(--op-space-xs) !important;
}

.m-sm {
  margin: var(--op-space-sm) !important;
}

.m-md {
  margin: var(--op-space-md) !important;
}

.m-lg {
  margin: var(--op-space-lg) !important;
}

.m-xl {
  margin: var(--op-space-xl) !important;
}

.m-2xl {
  margin: var(--op-space-2xl) !important;
}

.m-3xl {
  margin: var(--op-space-3xl) !important;
}

.m-4xl {
  margin: var(--op-space-4xl) !important;
}

.mx-px {
  margin-inline: var(--op-space-px) !important;
}

.mx-0 {
  margin-inline: var(--op-space-0) !important;
}

.mx-0\.5 {
  margin-inline: var(--op-space-0-5) !important;
}

.mx-1 {
  margin-inline: var(--op-space-1) !important;
}

.mx-1\.5 {
  margin-inline: var(--op-space-1-5) !important;
}

.mx-2 {
  margin-inline: var(--op-space-2) !important;
}

.mx-2\.5 {
  margin-inline: var(--op-space-2-5) !important;
}

.mx-3 {
  margin-inline: var(--op-space-3) !important;
}

.mx-3\.5 {
  margin-inline: var(--op-space-3-5) !important;
}

.mx-4 {
  margin-inline: var(--op-space-4) !important;
}

.mx-5 {
  margin-inline: var(--op-space-5) !important;
}

.mx-6 {
  margin-inline: var(--op-space-6) !important;
}

.mx-7 {
  margin-inline: var(--op-space-7) !important;
}

.mx-8 {
  margin-inline: var(--op-space-8) !important;
}

.mx-9 {
  margin-inline: var(--op-space-9) !important;
}

.mx-10 {
  margin-inline: var(--op-space-10) !important;
}

.mx-11 {
  margin-inline: var(--op-space-11) !important;
}

.mx-12 {
  margin-inline: var(--op-space-12) !important;
}

.mx-14 {
  margin-inline: var(--op-space-14) !important;
}

.mx-16 {
  margin-inline: var(--op-space-16) !important;
}

.mx-20 {
  margin-inline: var(--op-space-20) !important;
}

.mx-24 {
  margin-inline: var(--op-space-24) !important;
}

.mx-28 {
  margin-inline: var(--op-space-28) !important;
}

.mx-32 {
  margin-inline: var(--op-space-32) !important;
}

.mx-36 {
  margin-inline: var(--op-space-36) !important;
}

.mx-40 {
  margin-inline: var(--op-space-40) !important;
}

.mx-44 {
  margin-inline: var(--op-space-44) !important;
}

.mx-48 {
  margin-inline: var(--op-space-48) !important;
}

.mx-52 {
  margin-inline: var(--op-space-52) !important;
}

.mx-56 {
  margin-inline: var(--op-space-56) !important;
}

.mx-60 {
  margin-inline: var(--op-space-60) !important;
}

.mx-64 {
  margin-inline: var(--op-space-64) !important;
}

.mx-72 {
  margin-inline: var(--op-space-72) !important;
}

.mx-80 {
  margin-inline: var(--op-space-80) !important;
}

.mx-96 {
  margin-inline: var(--op-space-96) !important;
}

.mx-2xs {
  margin-inline: var(--op-space-2xs) !important;
}

.mx-xs {
  margin-inline: var(--op-space-xs) !important;
}

.mx-sm {
  margin-inline: var(--op-space-sm) !important;
}

.mx-md {
  margin-inline: var(--op-space-md) !important;
}

.mx-lg {
  margin-inline: var(--op-space-lg) !important;
}

.mx-xl {
  margin-inline: var(--op-space-xl) !important;
}

.mx-2xl {
  margin-inline: var(--op-space-2xl) !important;
}

.mx-3xl {
  margin-inline: var(--op-space-3xl) !important;
}

.mx-4xl {
  margin-inline: var(--op-space-4xl) !important;
}

.my-px {
  margin-block: var(--op-space-px) !important;
}

.my-0 {
  margin-block: var(--op-space-0) !important;
}

.my-0\.5 {
  margin-block: var(--op-space-0-5) !important;
}

.my-1 {
  margin-block: var(--op-space-1) !important;
}

.my-1\.5 {
  margin-block: var(--op-space-1-5) !important;
}

.my-2 {
  margin-block: var(--op-space-2) !important;
}

.my-2\.5 {
  margin-block: var(--op-space-2-5) !important;
}

.my-3 {
  margin-block: var(--op-space-3) !important;
}

.my-3\.5 {
  margin-block: var(--op-space-3-5) !important;
}

.my-4 {
  margin-block: var(--op-space-4) !important;
}

.my-5 {
  margin-block: var(--op-space-5) !important;
}

.my-6 {
  margin-block: var(--op-space-6) !important;
}

.my-7 {
  margin-block: var(--op-space-7) !important;
}

.my-8 {
  margin-block: var(--op-space-8) !important;
}

.my-9 {
  margin-block: var(--op-space-9) !important;
}

.my-10 {
  margin-block: var(--op-space-10) !important;
}

.my-11 {
  margin-block: var(--op-space-11) !important;
}

.my-12 {
  margin-block: var(--op-space-12) !important;
}

.my-14 {
  margin-block: var(--op-space-14) !important;
}

.my-16 {
  margin-block: var(--op-space-16) !important;
}

.my-20 {
  margin-block: var(--op-space-20) !important;
}

.my-24 {
  margin-block: var(--op-space-24) !important;
}

.my-28 {
  margin-block: var(--op-space-28) !important;
}

.my-32 {
  margin-block: var(--op-space-32) !important;
}

.my-36 {
  margin-block: var(--op-space-36) !important;
}

.my-40 {
  margin-block: var(--op-space-40) !important;
}

.my-44 {
  margin-block: var(--op-space-44) !important;
}

.my-48 {
  margin-block: var(--op-space-48) !important;
}

.my-52 {
  margin-block: var(--op-space-52) !important;
}

.my-56 {
  margin-block: var(--op-space-56) !important;
}

.my-60 {
  margin-block: var(--op-space-60) !important;
}

.my-64 {
  margin-block: var(--op-space-64) !important;
}

.my-72 {
  margin-block: var(--op-space-72) !important;
}

.my-80 {
  margin-block: var(--op-space-80) !important;
}

.my-96 {
  margin-block: var(--op-space-96) !important;
}

.my-2xs {
  margin-block: var(--op-space-2xs) !important;
}

.my-xs {
  margin-block: var(--op-space-xs) !important;
}

.my-sm {
  margin-block: var(--op-space-sm) !important;
}

.my-md {
  margin-block: var(--op-space-md) !important;
}

.my-lg {
  margin-block: var(--op-space-lg) !important;
}

.my-xl {
  margin-block: var(--op-space-xl) !important;
}

.my-2xl {
  margin-block: var(--op-space-2xl) !important;
}

.my-3xl {
  margin-block: var(--op-space-3xl) !important;
}

.my-4xl {
  margin-block: var(--op-space-4xl) !important;
}

.ms-px {
  margin-inline-start: var(--op-space-px) !important;
}

.ms-0 {
  margin-inline-start: var(--op-space-0) !important;
}

.ms-0\.5 {
  margin-inline-start: var(--op-space-0-5) !important;
}

.ms-1 {
  margin-inline-start: var(--op-space-1) !important;
}

.ms-1\.5 {
  margin-inline-start: var(--op-space-1-5) !important;
}

.ms-2 {
  margin-inline-start: var(--op-space-2) !important;
}

.ms-2\.5 {
  margin-inline-start: var(--op-space-2-5) !important;
}

.ms-3 {
  margin-inline-start: var(--op-space-3) !important;
}

.ms-3\.5 {
  margin-inline-start: var(--op-space-3-5) !important;
}

.ms-4 {
  margin-inline-start: var(--op-space-4) !important;
}

.ms-5 {
  margin-inline-start: var(--op-space-5) !important;
}

.ms-6 {
  margin-inline-start: var(--op-space-6) !important;
}

.ms-7 {
  margin-inline-start: var(--op-space-7) !important;
}

.ms-8 {
  margin-inline-start: var(--op-space-8) !important;
}

.ms-9 {
  margin-inline-start: var(--op-space-9) !important;
}

.ms-10 {
  margin-inline-start: var(--op-space-10) !important;
}

.ms-11 {
  margin-inline-start: var(--op-space-11) !important;
}

.ms-12 {
  margin-inline-start: var(--op-space-12) !important;
}

.ms-14 {
  margin-inline-start: var(--op-space-14) !important;
}

.ms-16 {
  margin-inline-start: var(--op-space-16) !important;
}

.ms-20 {
  margin-inline-start: var(--op-space-20) !important;
}

.ms-24 {
  margin-inline-start: var(--op-space-24) !important;
}

.ms-28 {
  margin-inline-start: var(--op-space-28) !important;
}

.ms-32 {
  margin-inline-start: var(--op-space-32) !important;
}

.ms-36 {
  margin-inline-start: var(--op-space-36) !important;
}

.ms-40 {
  margin-inline-start: var(--op-space-40) !important;
}

.ms-44 {
  margin-inline-start: var(--op-space-44) !important;
}

.ms-48 {
  margin-inline-start: var(--op-space-48) !important;
}

.ms-52 {
  margin-inline-start: var(--op-space-52) !important;
}

.ms-56 {
  margin-inline-start: var(--op-space-56) !important;
}

.ms-60 {
  margin-inline-start: var(--op-space-60) !important;
}

.ms-64 {
  margin-inline-start: var(--op-space-64) !important;
}

.ms-72 {
  margin-inline-start: var(--op-space-72) !important;
}

.ms-80 {
  margin-inline-start: var(--op-space-80) !important;
}

.ms-96 {
  margin-inline-start: var(--op-space-96) !important;
}

.ms-2xs {
  margin-inline-start: var(--op-space-2xs) !important;
}

.ms-xs {
  margin-inline-start: var(--op-space-xs) !important;
}

.ms-sm {
  margin-inline-start: var(--op-space-sm) !important;
}

.ms-md {
  margin-inline-start: var(--op-space-md) !important;
}

.ms-lg {
  margin-inline-start: var(--op-space-lg) !important;
}

.ms-xl {
  margin-inline-start: var(--op-space-xl) !important;
}

.ms-2xl {
  margin-inline-start: var(--op-space-2xl) !important;
}

.ms-3xl {
  margin-inline-start: var(--op-space-3xl) !important;
}

.ms-4xl {
  margin-inline-start: var(--op-space-4xl) !important;
}

.me-px {
  margin-inline-end: var(--op-space-px) !important;
}

.me-0 {
  margin-inline-end: var(--op-space-0) !important;
}

.me-0\.5 {
  margin-inline-end: var(--op-space-0-5) !important;
}

.me-1 {
  margin-inline-end: var(--op-space-1) !important;
}

.me-1\.5 {
  margin-inline-end: var(--op-space-1-5) !important;
}

.me-2 {
  margin-inline-end: var(--op-space-2) !important;
}

.me-2\.5 {
  margin-inline-end: var(--op-space-2-5) !important;
}

.me-3 {
  margin-inline-end: var(--op-space-3) !important;
}

.me-3\.5 {
  margin-inline-end: var(--op-space-3-5) !important;
}

.me-4 {
  margin-inline-end: var(--op-space-4) !important;
}

.me-5 {
  margin-inline-end: var(--op-space-5) !important;
}

.me-6 {
  margin-inline-end: var(--op-space-6) !important;
}

.me-7 {
  margin-inline-end: var(--op-space-7) !important;
}

.me-8 {
  margin-inline-end: var(--op-space-8) !important;
}

.me-9 {
  margin-inline-end: var(--op-space-9) !important;
}

.me-10 {
  margin-inline-end: var(--op-space-10) !important;
}

.me-11 {
  margin-inline-end: var(--op-space-11) !important;
}

.me-12 {
  margin-inline-end: var(--op-space-12) !important;
}

.me-14 {
  margin-inline-end: var(--op-space-14) !important;
}

.me-16 {
  margin-inline-end: var(--op-space-16) !important;
}

.me-20 {
  margin-inline-end: var(--op-space-20) !important;
}

.me-24 {
  margin-inline-end: var(--op-space-24) !important;
}

.me-28 {
  margin-inline-end: var(--op-space-28) !important;
}

.me-32 {
  margin-inline-end: var(--op-space-32) !important;
}

.me-36 {
  margin-inline-end: var(--op-space-36) !important;
}

.me-40 {
  margin-inline-end: var(--op-space-40) !important;
}

.me-44 {
  margin-inline-end: var(--op-space-44) !important;
}

.me-48 {
  margin-inline-end: var(--op-space-48) !important;
}

.me-52 {
  margin-inline-end: var(--op-space-52) !important;
}

.me-56 {
  margin-inline-end: var(--op-space-56) !important;
}

.me-60 {
  margin-inline-end: var(--op-space-60) !important;
}

.me-64 {
  margin-inline-end: var(--op-space-64) !important;
}

.me-72 {
  margin-inline-end: var(--op-space-72) !important;
}

.me-80 {
  margin-inline-end: var(--op-space-80) !important;
}

.me-96 {
  margin-inline-end: var(--op-space-96) !important;
}

.me-2xs {
  margin-inline-end: var(--op-space-2xs) !important;
}

.me-xs {
  margin-inline-end: var(--op-space-xs) !important;
}

.me-sm {
  margin-inline-end: var(--op-space-sm) !important;
}

.me-md {
  margin-inline-end: var(--op-space-md) !important;
}

.me-lg {
  margin-inline-end: var(--op-space-lg) !important;
}

.me-xl {
  margin-inline-end: var(--op-space-xl) !important;
}

.me-2xl {
  margin-inline-end: var(--op-space-2xl) !important;
}

.me-3xl {
  margin-inline-end: var(--op-space-3xl) !important;
}

.me-4xl {
  margin-inline-end: var(--op-space-4xl) !important;
}

.mbs-px {
  margin-block-start: var(--op-space-px) !important;
}

.mbs-0 {
  margin-block-start: var(--op-space-0) !important;
}

.mbs-0\.5 {
  margin-block-start: var(--op-space-0-5) !important;
}

.mbs-1 {
  margin-block-start: var(--op-space-1) !important;
}

.mbs-1\.5 {
  margin-block-start: var(--op-space-1-5) !important;
}

.mbs-2 {
  margin-block-start: var(--op-space-2) !important;
}

.mbs-2\.5 {
  margin-block-start: var(--op-space-2-5) !important;
}

.mbs-3 {
  margin-block-start: var(--op-space-3) !important;
}

.mbs-3\.5 {
  margin-block-start: var(--op-space-3-5) !important;
}

.mbs-4 {
  margin-block-start: var(--op-space-4) !important;
}

.mbs-5 {
  margin-block-start: var(--op-space-5) !important;
}

.mbs-6 {
  margin-block-start: var(--op-space-6) !important;
}

.mbs-7 {
  margin-block-start: var(--op-space-7) !important;
}

.mbs-8 {
  margin-block-start: var(--op-space-8) !important;
}

.mbs-9 {
  margin-block-start: var(--op-space-9) !important;
}

.mbs-10 {
  margin-block-start: var(--op-space-10) !important;
}

.mbs-11 {
  margin-block-start: var(--op-space-11) !important;
}

.mbs-12 {
  margin-block-start: var(--op-space-12) !important;
}

.mbs-14 {
  margin-block-start: var(--op-space-14) !important;
}

.mbs-16 {
  margin-block-start: var(--op-space-16) !important;
}

.mbs-20 {
  margin-block-start: var(--op-space-20) !important;
}

.mbs-24 {
  margin-block-start: var(--op-space-24) !important;
}

.mbs-28 {
  margin-block-start: var(--op-space-28) !important;
}

.mbs-32 {
  margin-block-start: var(--op-space-32) !important;
}

.mbs-36 {
  margin-block-start: var(--op-space-36) !important;
}

.mbs-40 {
  margin-block-start: var(--op-space-40) !important;
}

.mbs-44 {
  margin-block-start: var(--op-space-44) !important;
}

.mbs-48 {
  margin-block-start: var(--op-space-48) !important;
}

.mbs-52 {
  margin-block-start: var(--op-space-52) !important;
}

.mbs-56 {
  margin-block-start: var(--op-space-56) !important;
}

.mbs-60 {
  margin-block-start: var(--op-space-60) !important;
}

.mbs-64 {
  margin-block-start: var(--op-space-64) !important;
}

.mbs-72 {
  margin-block-start: var(--op-space-72) !important;
}

.mbs-80 {
  margin-block-start: var(--op-space-80) !important;
}

.mbs-96 {
  margin-block-start: var(--op-space-96) !important;
}

.mbs-2xs {
  margin-block-start: var(--op-space-2xs) !important;
}

.mbs-xs {
  margin-block-start: var(--op-space-xs) !important;
}

.mbs-sm {
  margin-block-start: var(--op-space-sm) !important;
}

.mbs-md {
  margin-block-start: var(--op-space-md) !important;
}

.mbs-lg {
  margin-block-start: var(--op-space-lg) !important;
}

.mbs-xl {
  margin-block-start: var(--op-space-xl) !important;
}

.mbs-2xl {
  margin-block-start: var(--op-space-2xl) !important;
}

.mbs-3xl {
  margin-block-start: var(--op-space-3xl) !important;
}

.mbs-4xl {
  margin-block-start: var(--op-space-4xl) !important;
}

.mbe-px {
  margin-block-end: var(--op-space-px) !important;
}

.mbe-0 {
  margin-block-end: var(--op-space-0) !important;
}

.mbe-0\.5 {
  margin-block-end: var(--op-space-0-5) !important;
}

.mbe-1 {
  margin-block-end: var(--op-space-1) !important;
}

.mbe-1\.5 {
  margin-block-end: var(--op-space-1-5) !important;
}

.mbe-2 {
  margin-block-end: var(--op-space-2) !important;
}

.mbe-2\.5 {
  margin-block-end: var(--op-space-2-5) !important;
}

.mbe-3 {
  margin-block-end: var(--op-space-3) !important;
}

.mbe-3\.5 {
  margin-block-end: var(--op-space-3-5) !important;
}

.mbe-4 {
  margin-block-end: var(--op-space-4) !important;
}

.mbe-5 {
  margin-block-end: var(--op-space-5) !important;
}

.mbe-6 {
  margin-block-end: var(--op-space-6) !important;
}

.mbe-7 {
  margin-block-end: var(--op-space-7) !important;
}

.mbe-8 {
  margin-block-end: var(--op-space-8) !important;
}

.mbe-9 {
  margin-block-end: var(--op-space-9) !important;
}

.mbe-10 {
  margin-block-end: var(--op-space-10) !important;
}

.mbe-11 {
  margin-block-end: var(--op-space-11) !important;
}

.mbe-12 {
  margin-block-end: var(--op-space-12) !important;
}

.mbe-14 {
  margin-block-end: var(--op-space-14) !important;
}

.mbe-16 {
  margin-block-end: var(--op-space-16) !important;
}

.mbe-20 {
  margin-block-end: var(--op-space-20) !important;
}

.mbe-24 {
  margin-block-end: var(--op-space-24) !important;
}

.mbe-28 {
  margin-block-end: var(--op-space-28) !important;
}

.mbe-32 {
  margin-block-end: var(--op-space-32) !important;
}

.mbe-36 {
  margin-block-end: var(--op-space-36) !important;
}

.mbe-40 {
  margin-block-end: var(--op-space-40) !important;
}

.mbe-44 {
  margin-block-end: var(--op-space-44) !important;
}

.mbe-48 {
  margin-block-end: var(--op-space-48) !important;
}

.mbe-52 {
  margin-block-end: var(--op-space-52) !important;
}

.mbe-56 {
  margin-block-end: var(--op-space-56) !important;
}

.mbe-60 {
  margin-block-end: var(--op-space-60) !important;
}

.mbe-64 {
  margin-block-end: var(--op-space-64) !important;
}

.mbe-72 {
  margin-block-end: var(--op-space-72) !important;
}

.mbe-80 {
  margin-block-end: var(--op-space-80) !important;
}

.mbe-96 {
  margin-block-end: var(--op-space-96) !important;
}

.mbe-2xs {
  margin-block-end: var(--op-space-2xs) !important;
}

.mbe-xs {
  margin-block-end: var(--op-space-xs) !important;
}

.mbe-sm {
  margin-block-end: var(--op-space-sm) !important;
}

.mbe-md {
  margin-block-end: var(--op-space-md) !important;
}

.mbe-lg {
  margin-block-end: var(--op-space-lg) !important;
}

.mbe-xl {
  margin-block-end: var(--op-space-xl) !important;
}

.mbe-2xl {
  margin-block-end: var(--op-space-2xl) !important;
}

.mbe-3xl {
  margin-block-end: var(--op-space-3xl) !important;
}

.mbe-4xl {
  margin-block-end: var(--op-space-4xl) !important;
}

.mt-px {
  margin-top: var(--op-space-px) !important;
}

.mt-0 {
  margin-top: var(--op-space-0) !important;
}

.mt-0\.5 {
  margin-top: var(--op-space-0-5) !important;
}

.mt-1 {
  margin-top: var(--op-space-1) !important;
}

.mt-1\.5 {
  margin-top: var(--op-space-1-5) !important;
}

.mt-2 {
  margin-top: var(--op-space-2) !important;
}

.mt-2\.5 {
  margin-top: var(--op-space-2-5) !important;
}

.mt-3 {
  margin-top: var(--op-space-3) !important;
}

.mt-3\.5 {
  margin-top: var(--op-space-3-5) !important;
}

.mt-4 {
  margin-top: var(--op-space-4) !important;
}

.mt-5 {
  margin-top: var(--op-space-5) !important;
}

.mt-6 {
  margin-top: var(--op-space-6) !important;
}

.mt-7 {
  margin-top: var(--op-space-7) !important;
}

.mt-8 {
  margin-top: var(--op-space-8) !important;
}

.mt-9 {
  margin-top: var(--op-space-9) !important;
}

.mt-10 {
  margin-top: var(--op-space-10) !important;
}

.mt-11 {
  margin-top: var(--op-space-11) !important;
}

.mt-12 {
  margin-top: var(--op-space-12) !important;
}

.mt-14 {
  margin-top: var(--op-space-14) !important;
}

.mt-16 {
  margin-top: var(--op-space-16) !important;
}

.mt-20 {
  margin-top: var(--op-space-20) !important;
}

.mt-24 {
  margin-top: var(--op-space-24) !important;
}

.mt-28 {
  margin-top: var(--op-space-28) !important;
}

.mt-32 {
  margin-top: var(--op-space-32) !important;
}

.mt-36 {
  margin-top: var(--op-space-36) !important;
}

.mt-40 {
  margin-top: var(--op-space-40) !important;
}

.mt-44 {
  margin-top: var(--op-space-44) !important;
}

.mt-48 {
  margin-top: var(--op-space-48) !important;
}

.mt-52 {
  margin-top: var(--op-space-52) !important;
}

.mt-56 {
  margin-top: var(--op-space-56) !important;
}

.mt-60 {
  margin-top: var(--op-space-60) !important;
}

.mt-64 {
  margin-top: var(--op-space-64) !important;
}

.mt-72 {
  margin-top: var(--op-space-72) !important;
}

.mt-80 {
  margin-top: var(--op-space-80) !important;
}

.mt-96 {
  margin-top: var(--op-space-96) !important;
}

.mt-2xs {
  margin-top: var(--op-space-2xs) !important;
}

.mt-xs {
  margin-top: var(--op-space-xs) !important;
}

.mt-sm {
  margin-top: var(--op-space-sm) !important;
}

.mt-md {
  margin-top: var(--op-space-md) !important;
}

.mt-lg {
  margin-top: var(--op-space-lg) !important;
}

.mt-xl {
  margin-top: var(--op-space-xl) !important;
}

.mt-2xl {
  margin-top: var(--op-space-2xl) !important;
}

.mt-3xl {
  margin-top: var(--op-space-3xl) !important;
}

.mt-4xl {
  margin-top: var(--op-space-4xl) !important;
}

.mr-px {
  margin-right: var(--op-space-px) !important;
}

.mr-0 {
  margin-right: var(--op-space-0) !important;
}

.mr-0\.5 {
  margin-right: var(--op-space-0-5) !important;
}

.mr-1 {
  margin-right: var(--op-space-1) !important;
}

.mr-1\.5 {
  margin-right: var(--op-space-1-5) !important;
}

.mr-2 {
  margin-right: var(--op-space-2) !important;
}

.mr-2\.5 {
  margin-right: var(--op-space-2-5) !important;
}

.mr-3 {
  margin-right: var(--op-space-3) !important;
}

.mr-3\.5 {
  margin-right: var(--op-space-3-5) !important;
}

.mr-4 {
  margin-right: var(--op-space-4) !important;
}

.mr-5 {
  margin-right: var(--op-space-5) !important;
}

.mr-6 {
  margin-right: var(--op-space-6) !important;
}

.mr-7 {
  margin-right: var(--op-space-7) !important;
}

.mr-8 {
  margin-right: var(--op-space-8) !important;
}

.mr-9 {
  margin-right: var(--op-space-9) !important;
}

.mr-10 {
  margin-right: var(--op-space-10) !important;
}

.mr-11 {
  margin-right: var(--op-space-11) !important;
}

.mr-12 {
  margin-right: var(--op-space-12) !important;
}

.mr-14 {
  margin-right: var(--op-space-14) !important;
}

.mr-16 {
  margin-right: var(--op-space-16) !important;
}

.mr-20 {
  margin-right: var(--op-space-20) !important;
}

.mr-24 {
  margin-right: var(--op-space-24) !important;
}

.mr-28 {
  margin-right: var(--op-space-28) !important;
}

.mr-32 {
  margin-right: var(--op-space-32) !important;
}

.mr-36 {
  margin-right: var(--op-space-36) !important;
}

.mr-40 {
  margin-right: var(--op-space-40) !important;
}

.mr-44 {
  margin-right: var(--op-space-44) !important;
}

.mr-48 {
  margin-right: var(--op-space-48) !important;
}

.mr-52 {
  margin-right: var(--op-space-52) !important;
}

.mr-56 {
  margin-right: var(--op-space-56) !important;
}

.mr-60 {
  margin-right: var(--op-space-60) !important;
}

.mr-64 {
  margin-right: var(--op-space-64) !important;
}

.mr-72 {
  margin-right: var(--op-space-72) !important;
}

.mr-80 {
  margin-right: var(--op-space-80) !important;
}

.mr-96 {
  margin-right: var(--op-space-96) !important;
}

.mr-2xs {
  margin-right: var(--op-space-2xs) !important;
}

.mr-xs {
  margin-right: var(--op-space-xs) !important;
}

.mr-sm {
  margin-right: var(--op-space-sm) !important;
}

.mr-md {
  margin-right: var(--op-space-md) !important;
}

.mr-lg {
  margin-right: var(--op-space-lg) !important;
}

.mr-xl {
  margin-right: var(--op-space-xl) !important;
}

.mr-2xl {
  margin-right: var(--op-space-2xl) !important;
}

.mr-3xl {
  margin-right: var(--op-space-3xl) !important;
}

.mr-4xl {
  margin-right: var(--op-space-4xl) !important;
}

.mb-px {
  margin-bottom: var(--op-space-px) !important;
}

.mb-0 {
  margin-bottom: var(--op-space-0) !important;
}

.mb-0\.5 {
  margin-bottom: var(--op-space-0-5) !important;
}

.mb-1 {
  margin-bottom: var(--op-space-1) !important;
}

.mb-1\.5 {
  margin-bottom: var(--op-space-1-5) !important;
}

.mb-2 {
  margin-bottom: var(--op-space-2) !important;
}

.mb-2\.5 {
  margin-bottom: var(--op-space-2-5) !important;
}

.mb-3 {
  margin-bottom: var(--op-space-3) !important;
}

.mb-3\.5 {
  margin-bottom: var(--op-space-3-5) !important;
}

.mb-4 {
  margin-bottom: var(--op-space-4) !important;
}

.mb-5 {
  margin-bottom: var(--op-space-5) !important;
}

.mb-6 {
  margin-bottom: var(--op-space-6) !important;
}

.mb-7 {
  margin-bottom: var(--op-space-7) !important;
}

.mb-8 {
  margin-bottom: var(--op-space-8) !important;
}

.mb-9 {
  margin-bottom: var(--op-space-9) !important;
}

.mb-10 {
  margin-bottom: var(--op-space-10) !important;
}

.mb-11 {
  margin-bottom: var(--op-space-11) !important;
}

.mb-12 {
  margin-bottom: var(--op-space-12) !important;
}

.mb-14 {
  margin-bottom: var(--op-space-14) !important;
}

.mb-16 {
  margin-bottom: var(--op-space-16) !important;
}

.mb-20 {
  margin-bottom: var(--op-space-20) !important;
}

.mb-24 {
  margin-bottom: var(--op-space-24) !important;
}

.mb-28 {
  margin-bottom: var(--op-space-28) !important;
}

.mb-32 {
  margin-bottom: var(--op-space-32) !important;
}

.mb-36 {
  margin-bottom: var(--op-space-36) !important;
}

.mb-40 {
  margin-bottom: var(--op-space-40) !important;
}

.mb-44 {
  margin-bottom: var(--op-space-44) !important;
}

.mb-48 {
  margin-bottom: var(--op-space-48) !important;
}

.mb-52 {
  margin-bottom: var(--op-space-52) !important;
}

.mb-56 {
  margin-bottom: var(--op-space-56) !important;
}

.mb-60 {
  margin-bottom: var(--op-space-60) !important;
}

.mb-64 {
  margin-bottom: var(--op-space-64) !important;
}

.mb-72 {
  margin-bottom: var(--op-space-72) !important;
}

.mb-80 {
  margin-bottom: var(--op-space-80) !important;
}

.mb-96 {
  margin-bottom: var(--op-space-96) !important;
}

.mb-2xs {
  margin-bottom: var(--op-space-2xs) !important;
}

.mb-xs {
  margin-bottom: var(--op-space-xs) !important;
}

.mb-sm {
  margin-bottom: var(--op-space-sm) !important;
}

.mb-md {
  margin-bottom: var(--op-space-md) !important;
}

.mb-lg {
  margin-bottom: var(--op-space-lg) !important;
}

.mb-xl {
  margin-bottom: var(--op-space-xl) !important;
}

.mb-2xl {
  margin-bottom: var(--op-space-2xl) !important;
}

.mb-3xl {
  margin-bottom: var(--op-space-3xl) !important;
}

.mb-4xl {
  margin-bottom: var(--op-space-4xl) !important;
}

.ml-px {
  margin-left: var(--op-space-px) !important;
}

.ml-0 {
  margin-left: var(--op-space-0) !important;
}

.ml-0\.5 {
  margin-left: var(--op-space-0-5) !important;
}

.ml-1 {
  margin-left: var(--op-space-1) !important;
}

.ml-1\.5 {
  margin-left: var(--op-space-1-5) !important;
}

.ml-2 {
  margin-left: var(--op-space-2) !important;
}

.ml-2\.5 {
  margin-left: var(--op-space-2-5) !important;
}

.ml-3 {
  margin-left: var(--op-space-3) !important;
}

.ml-3\.5 {
  margin-left: var(--op-space-3-5) !important;
}

.ml-4 {
  margin-left: var(--op-space-4) !important;
}

.ml-5 {
  margin-left: var(--op-space-5) !important;
}

.ml-6 {
  margin-left: var(--op-space-6) !important;
}

.ml-7 {
  margin-left: var(--op-space-7) !important;
}

.ml-8 {
  margin-left: var(--op-space-8) !important;
}

.ml-9 {
  margin-left: var(--op-space-9) !important;
}

.ml-10 {
  margin-left: var(--op-space-10) !important;
}

.ml-11 {
  margin-left: var(--op-space-11) !important;
}

.ml-12 {
  margin-left: var(--op-space-12) !important;
}

.ml-14 {
  margin-left: var(--op-space-14) !important;
}

.ml-16 {
  margin-left: var(--op-space-16) !important;
}

.ml-20 {
  margin-left: var(--op-space-20) !important;
}

.ml-24 {
  margin-left: var(--op-space-24) !important;
}

.ml-28 {
  margin-left: var(--op-space-28) !important;
}

.ml-32 {
  margin-left: var(--op-space-32) !important;
}

.ml-36 {
  margin-left: var(--op-space-36) !important;
}

.ml-40 {
  margin-left: var(--op-space-40) !important;
}

.ml-44 {
  margin-left: var(--op-space-44) !important;
}

.ml-48 {
  margin-left: var(--op-space-48) !important;
}

.ml-52 {
  margin-left: var(--op-space-52) !important;
}

.ml-56 {
  margin-left: var(--op-space-56) !important;
}

.ml-60 {
  margin-left: var(--op-space-60) !important;
}

.ml-64 {
  margin-left: var(--op-space-64) !important;
}

.ml-72 {
  margin-left: var(--op-space-72) !important;
}

.ml-80 {
  margin-left: var(--op-space-80) !important;
}

.ml-96 {
  margin-left: var(--op-space-96) !important;
}

.ml-2xs {
  margin-left: var(--op-space-2xs) !important;
}

.ml-xs {
  margin-left: var(--op-space-xs) !important;
}

.ml-sm {
  margin-left: var(--op-space-sm) !important;
}

.ml-md {
  margin-left: var(--op-space-md) !important;
}

.ml-lg {
  margin-left: var(--op-space-lg) !important;
}

.ml-xl {
  margin-left: var(--op-space-xl) !important;
}

.ml-2xl {
  margin-left: var(--op-space-2xl) !important;
}

.ml-3xl {
  margin-left: var(--op-space-3xl) !important;
}

.ml-4xl {
  margin-left: var(--op-space-4xl) !important;
}

.-m-px {
  margin: calc(-1 * var(--op-space-px)) !important;
}

.-m-0\.5 {
  margin: calc(-1 * var(--op-space-0-5)) !important;
}

.-m-1 {
  margin: calc(-1 * var(--op-space-1)) !important;
}

.-m-1\.5 {
  margin: calc(-1 * var(--op-space-1-5)) !important;
}

.-m-2 {
  margin: calc(-1 * var(--op-space-2)) !important;
}

.-m-2\.5 {
  margin: calc(-1 * var(--op-space-2-5)) !important;
}

.-m-3 {
  margin: calc(-1 * var(--op-space-3)) !important;
}

.-m-3\.5 {
  margin: calc(-1 * var(--op-space-3-5)) !important;
}

.-m-4 {
  margin: calc(-1 * var(--op-space-4)) !important;
}

.-m-5 {
  margin: calc(-1 * var(--op-space-5)) !important;
}

.-m-6 {
  margin: calc(-1 * var(--op-space-6)) !important;
}

.-m-7 {
  margin: calc(-1 * var(--op-space-7)) !important;
}

.-m-8 {
  margin: calc(-1 * var(--op-space-8)) !important;
}

.-m-9 {
  margin: calc(-1 * var(--op-space-9)) !important;
}

.-m-10 {
  margin: calc(-1 * var(--op-space-10)) !important;
}

.-m-11 {
  margin: calc(-1 * var(--op-space-11)) !important;
}

.-m-12 {
  margin: calc(-1 * var(--op-space-12)) !important;
}

.-m-14 {
  margin: calc(-1 * var(--op-space-14)) !important;
}

.-m-16 {
  margin: calc(-1 * var(--op-space-16)) !important;
}

.-m-20 {
  margin: calc(-1 * var(--op-space-20)) !important;
}

.-m-24 {
  margin: calc(-1 * var(--op-space-24)) !important;
}

.-m-28 {
  margin: calc(-1 * var(--op-space-28)) !important;
}

.-m-32 {
  margin: calc(-1 * var(--op-space-32)) !important;
}

.-m-36 {
  margin: calc(-1 * var(--op-space-36)) !important;
}

.-m-40 {
  margin: calc(-1 * var(--op-space-40)) !important;
}

.-m-44 {
  margin: calc(-1 * var(--op-space-44)) !important;
}

.-m-48 {
  margin: calc(-1 * var(--op-space-48)) !important;
}

.-m-52 {
  margin: calc(-1 * var(--op-space-52)) !important;
}

.-m-56 {
  margin: calc(-1 * var(--op-space-56)) !important;
}

.-m-60 {
  margin: calc(-1 * var(--op-space-60)) !important;
}

.-m-64 {
  margin: calc(-1 * var(--op-space-64)) !important;
}

.-m-72 {
  margin: calc(-1 * var(--op-space-72)) !important;
}

.-m-80 {
  margin: calc(-1 * var(--op-space-80)) !important;
}

.-m-96 {
  margin: calc(-1 * var(--op-space-96)) !important;
}

.-m-2xs {
  margin: calc(-1 * var(--op-space-2xs)) !important;
}

.-m-xs {
  margin: calc(-1 * var(--op-space-xs)) !important;
}

.-m-sm {
  margin: calc(-1 * var(--op-space-sm)) !important;
}

.-m-md {
  margin: calc(-1 * var(--op-space-md)) !important;
}

.-m-lg {
  margin: calc(-1 * var(--op-space-lg)) !important;
}

.-m-xl {
  margin: calc(-1 * var(--op-space-xl)) !important;
}

.-m-2xl {
  margin: calc(-1 * var(--op-space-2xl)) !important;
}

.-m-3xl {
  margin: calc(-1 * var(--op-space-3xl)) !important;
}

.-m-4xl {
  margin: calc(-1 * var(--op-space-4xl)) !important;
}

.-mx-px {
  margin-inline: calc(-1 * var(--op-space-px)) !important;
}

.-mx-0\.5 {
  margin-inline: calc(-1 * var(--op-space-0-5)) !important;
}

.-mx-1 {
  margin-inline: calc(-1 * var(--op-space-1)) !important;
}

.-mx-1\.5 {
  margin-inline: calc(-1 * var(--op-space-1-5)) !important;
}

.-mx-2 {
  margin-inline: calc(-1 * var(--op-space-2)) !important;
}

.-mx-2\.5 {
  margin-inline: calc(-1 * var(--op-space-2-5)) !important;
}

.-mx-3 {
  margin-inline: calc(-1 * var(--op-space-3)) !important;
}

.-mx-3\.5 {
  margin-inline: calc(-1 * var(--op-space-3-5)) !important;
}

.-mx-4 {
  margin-inline: calc(-1 * var(--op-space-4)) !important;
}

.-mx-5 {
  margin-inline: calc(-1 * var(--op-space-5)) !important;
}

.-mx-6 {
  margin-inline: calc(-1 * var(--op-space-6)) !important;
}

.-mx-7 {
  margin-inline: calc(-1 * var(--op-space-7)) !important;
}

.-mx-8 {
  margin-inline: calc(-1 * var(--op-space-8)) !important;
}

.-mx-9 {
  margin-inline: calc(-1 * var(--op-space-9)) !important;
}

.-mx-10 {
  margin-inline: calc(-1 * var(--op-space-10)) !important;
}

.-mx-11 {
  margin-inline: calc(-1 * var(--op-space-11)) !important;
}

.-mx-12 {
  margin-inline: calc(-1 * var(--op-space-12)) !important;
}

.-mx-14 {
  margin-inline: calc(-1 * var(--op-space-14)) !important;
}

.-mx-16 {
  margin-inline: calc(-1 * var(--op-space-16)) !important;
}

.-mx-20 {
  margin-inline: calc(-1 * var(--op-space-20)) !important;
}

.-mx-24 {
  margin-inline: calc(-1 * var(--op-space-24)) !important;
}

.-mx-28 {
  margin-inline: calc(-1 * var(--op-space-28)) !important;
}

.-mx-32 {
  margin-inline: calc(-1 * var(--op-space-32)) !important;
}

.-mx-36 {
  margin-inline: calc(-1 * var(--op-space-36)) !important;
}

.-mx-40 {
  margin-inline: calc(-1 * var(--op-space-40)) !important;
}

.-mx-44 {
  margin-inline: calc(-1 * var(--op-space-44)) !important;
}

.-mx-48 {
  margin-inline: calc(-1 * var(--op-space-48)) !important;
}

.-mx-52 {
  margin-inline: calc(-1 * var(--op-space-52)) !important;
}

.-mx-56 {
  margin-inline: calc(-1 * var(--op-space-56)) !important;
}

.-mx-60 {
  margin-inline: calc(-1 * var(--op-space-60)) !important;
}

.-mx-64 {
  margin-inline: calc(-1 * var(--op-space-64)) !important;
}

.-mx-72 {
  margin-inline: calc(-1 * var(--op-space-72)) !important;
}

.-mx-80 {
  margin-inline: calc(-1 * var(--op-space-80)) !important;
}

.-mx-96 {
  margin-inline: calc(-1 * var(--op-space-96)) !important;
}

.-mx-2xs {
  margin-inline: calc(-1 * var(--op-space-2xs)) !important;
}

.-mx-xs {
  margin-inline: calc(-1 * var(--op-space-xs)) !important;
}

.-mx-sm {
  margin-inline: calc(-1 * var(--op-space-sm)) !important;
}

.-mx-md {
  margin-inline: calc(-1 * var(--op-space-md)) !important;
}

.-mx-lg {
  margin-inline: calc(-1 * var(--op-space-lg)) !important;
}

.-mx-xl {
  margin-inline: calc(-1 * var(--op-space-xl)) !important;
}

.-mx-2xl {
  margin-inline: calc(-1 * var(--op-space-2xl)) !important;
}

.-mx-3xl {
  margin-inline: calc(-1 * var(--op-space-3xl)) !important;
}

.-mx-4xl {
  margin-inline: calc(-1 * var(--op-space-4xl)) !important;
}

.-my-px {
  margin-block: calc(-1 * var(--op-space-px)) !important;
}

.-my-0\.5 {
  margin-block: calc(-1 * var(--op-space-0-5)) !important;
}

.-my-1 {
  margin-block: calc(-1 * var(--op-space-1)) !important;
}

.-my-1\.5 {
  margin-block: calc(-1 * var(--op-space-1-5)) !important;
}

.-my-2 {
  margin-block: calc(-1 * var(--op-space-2)) !important;
}

.-my-2\.5 {
  margin-block: calc(-1 * var(--op-space-2-5)) !important;
}

.-my-3 {
  margin-block: calc(-1 * var(--op-space-3)) !important;
}

.-my-3\.5 {
  margin-block: calc(-1 * var(--op-space-3-5)) !important;
}

.-my-4 {
  margin-block: calc(-1 * var(--op-space-4)) !important;
}

.-my-5 {
  margin-block: calc(-1 * var(--op-space-5)) !important;
}

.-my-6 {
  margin-block: calc(-1 * var(--op-space-6)) !important;
}

.-my-7 {
  margin-block: calc(-1 * var(--op-space-7)) !important;
}

.-my-8 {
  margin-block: calc(-1 * var(--op-space-8)) !important;
}

.-my-9 {
  margin-block: calc(-1 * var(--op-space-9)) !important;
}

.-my-10 {
  margin-block: calc(-1 * var(--op-space-10)) !important;
}

.-my-11 {
  margin-block: calc(-1 * var(--op-space-11)) !important;
}

.-my-12 {
  margin-block: calc(-1 * var(--op-space-12)) !important;
}

.-my-14 {
  margin-block: calc(-1 * var(--op-space-14)) !important;
}

.-my-16 {
  margin-block: calc(-1 * var(--op-space-16)) !important;
}

.-my-20 {
  margin-block: calc(-1 * var(--op-space-20)) !important;
}

.-my-24 {
  margin-block: calc(-1 * var(--op-space-24)) !important;
}

.-my-28 {
  margin-block: calc(-1 * var(--op-space-28)) !important;
}

.-my-32 {
  margin-block: calc(-1 * var(--op-space-32)) !important;
}

.-my-36 {
  margin-block: calc(-1 * var(--op-space-36)) !important;
}

.-my-40 {
  margin-block: calc(-1 * var(--op-space-40)) !important;
}

.-my-44 {
  margin-block: calc(-1 * var(--op-space-44)) !important;
}

.-my-48 {
  margin-block: calc(-1 * var(--op-space-48)) !important;
}

.-my-52 {
  margin-block: calc(-1 * var(--op-space-52)) !important;
}

.-my-56 {
  margin-block: calc(-1 * var(--op-space-56)) !important;
}

.-my-60 {
  margin-block: calc(-1 * var(--op-space-60)) !important;
}

.-my-64 {
  margin-block: calc(-1 * var(--op-space-64)) !important;
}

.-my-72 {
  margin-block: calc(-1 * var(--op-space-72)) !important;
}

.-my-80 {
  margin-block: calc(-1 * var(--op-space-80)) !important;
}

.-my-96 {
  margin-block: calc(-1 * var(--op-space-96)) !important;
}

.-my-2xs {
  margin-block: calc(-1 * var(--op-space-2xs)) !important;
}

.-my-xs {
  margin-block: calc(-1 * var(--op-space-xs)) !important;
}

.-my-sm {
  margin-block: calc(-1 * var(--op-space-sm)) !important;
}

.-my-md {
  margin-block: calc(-1 * var(--op-space-md)) !important;
}

.-my-lg {
  margin-block: calc(-1 * var(--op-space-lg)) !important;
}

.-my-xl {
  margin-block: calc(-1 * var(--op-space-xl)) !important;
}

.-my-2xl {
  margin-block: calc(-1 * var(--op-space-2xl)) !important;
}

.-my-3xl {
  margin-block: calc(-1 * var(--op-space-3xl)) !important;
}

.-my-4xl {
  margin-block: calc(-1 * var(--op-space-4xl)) !important;
}

.-ms-px {
  margin-inline-start: calc(-1 * var(--op-space-px)) !important;
}

.-ms-0\.5 {
  margin-inline-start: calc(-1 * var(--op-space-0-5)) !important;
}

.-ms-1 {
  margin-inline-start: calc(-1 * var(--op-space-1)) !important;
}

.-ms-1\.5 {
  margin-inline-start: calc(-1 * var(--op-space-1-5)) !important;
}

.-ms-2 {
  margin-inline-start: calc(-1 * var(--op-space-2)) !important;
}

.-ms-2\.5 {
  margin-inline-start: calc(-1 * var(--op-space-2-5)) !important;
}

.-ms-3 {
  margin-inline-start: calc(-1 * var(--op-space-3)) !important;
}

.-ms-3\.5 {
  margin-inline-start: calc(-1 * var(--op-space-3-5)) !important;
}

.-ms-4 {
  margin-inline-start: calc(-1 * var(--op-space-4)) !important;
}

.-ms-5 {
  margin-inline-start: calc(-1 * var(--op-space-5)) !important;
}

.-ms-6 {
  margin-inline-start: calc(-1 * var(--op-space-6)) !important;
}

.-ms-7 {
  margin-inline-start: calc(-1 * var(--op-space-7)) !important;
}

.-ms-8 {
  margin-inline-start: calc(-1 * var(--op-space-8)) !important;
}

.-ms-9 {
  margin-inline-start: calc(-1 * var(--op-space-9)) !important;
}

.-ms-10 {
  margin-inline-start: calc(-1 * var(--op-space-10)) !important;
}

.-ms-11 {
  margin-inline-start: calc(-1 * var(--op-space-11)) !important;
}

.-ms-12 {
  margin-inline-start: calc(-1 * var(--op-space-12)) !important;
}

.-ms-14 {
  margin-inline-start: calc(-1 * var(--op-space-14)) !important;
}

.-ms-16 {
  margin-inline-start: calc(-1 * var(--op-space-16)) !important;
}

.-ms-20 {
  margin-inline-start: calc(-1 * var(--op-space-20)) !important;
}

.-ms-24 {
  margin-inline-start: calc(-1 * var(--op-space-24)) !important;
}

.-ms-28 {
  margin-inline-start: calc(-1 * var(--op-space-28)) !important;
}

.-ms-32 {
  margin-inline-start: calc(-1 * var(--op-space-32)) !important;
}

.-ms-36 {
  margin-inline-start: calc(-1 * var(--op-space-36)) !important;
}

.-ms-40 {
  margin-inline-start: calc(-1 * var(--op-space-40)) !important;
}

.-ms-44 {
  margin-inline-start: calc(-1 * var(--op-space-44)) !important;
}

.-ms-48 {
  margin-inline-start: calc(-1 * var(--op-space-48)) !important;
}

.-ms-52 {
  margin-inline-start: calc(-1 * var(--op-space-52)) !important;
}

.-ms-56 {
  margin-inline-start: calc(-1 * var(--op-space-56)) !important;
}

.-ms-60 {
  margin-inline-start: calc(-1 * var(--op-space-60)) !important;
}

.-ms-64 {
  margin-inline-start: calc(-1 * var(--op-space-64)) !important;
}

.-ms-72 {
  margin-inline-start: calc(-1 * var(--op-space-72)) !important;
}

.-ms-80 {
  margin-inline-start: calc(-1 * var(--op-space-80)) !important;
}

.-ms-96 {
  margin-inline-start: calc(-1 * var(--op-space-96)) !important;
}

.-ms-2xs {
  margin-inline-start: calc(-1 * var(--op-space-2xs)) !important;
}

.-ms-xs {
  margin-inline-start: calc(-1 * var(--op-space-xs)) !important;
}

.-ms-sm {
  margin-inline-start: calc(-1 * var(--op-space-sm)) !important;
}

.-ms-md {
  margin-inline-start: calc(-1 * var(--op-space-md)) !important;
}

.-ms-lg {
  margin-inline-start: calc(-1 * var(--op-space-lg)) !important;
}

.-ms-xl {
  margin-inline-start: calc(-1 * var(--op-space-xl)) !important;
}

.-ms-2xl {
  margin-inline-start: calc(-1 * var(--op-space-2xl)) !important;
}

.-ms-3xl {
  margin-inline-start: calc(-1 * var(--op-space-3xl)) !important;
}

.-ms-4xl {
  margin-inline-start: calc(-1 * var(--op-space-4xl)) !important;
}

.-me-px {
  margin-inline-end: calc(-1 * var(--op-space-px)) !important;
}

.-me-0\.5 {
  margin-inline-end: calc(-1 * var(--op-space-0-5)) !important;
}

.-me-1 {
  margin-inline-end: calc(-1 * var(--op-space-1)) !important;
}

.-me-1\.5 {
  margin-inline-end: calc(-1 * var(--op-space-1-5)) !important;
}

.-me-2 {
  margin-inline-end: calc(-1 * var(--op-space-2)) !important;
}

.-me-2\.5 {
  margin-inline-end: calc(-1 * var(--op-space-2-5)) !important;
}

.-me-3 {
  margin-inline-end: calc(-1 * var(--op-space-3)) !important;
}

.-me-3\.5 {
  margin-inline-end: calc(-1 * var(--op-space-3-5)) !important;
}

.-me-4 {
  margin-inline-end: calc(-1 * var(--op-space-4)) !important;
}

.-me-5 {
  margin-inline-end: calc(-1 * var(--op-space-5)) !important;
}

.-me-6 {
  margin-inline-end: calc(-1 * var(--op-space-6)) !important;
}

.-me-7 {
  margin-inline-end: calc(-1 * var(--op-space-7)) !important;
}

.-me-8 {
  margin-inline-end: calc(-1 * var(--op-space-8)) !important;
}

.-me-9 {
  margin-inline-end: calc(-1 * var(--op-space-9)) !important;
}

.-me-10 {
  margin-inline-end: calc(-1 * var(--op-space-10)) !important;
}

.-me-11 {
  margin-inline-end: calc(-1 * var(--op-space-11)) !important;
}

.-me-12 {
  margin-inline-end: calc(-1 * var(--op-space-12)) !important;
}

.-me-14 {
  margin-inline-end: calc(-1 * var(--op-space-14)) !important;
}

.-me-16 {
  margin-inline-end: calc(-1 * var(--op-space-16)) !important;
}

.-me-20 {
  margin-inline-end: calc(-1 * var(--op-space-20)) !important;
}

.-me-24 {
  margin-inline-end: calc(-1 * var(--op-space-24)) !important;
}

.-me-28 {
  margin-inline-end: calc(-1 * var(--op-space-28)) !important;
}

.-me-32 {
  margin-inline-end: calc(-1 * var(--op-space-32)) !important;
}

.-me-36 {
  margin-inline-end: calc(-1 * var(--op-space-36)) !important;
}

.-me-40 {
  margin-inline-end: calc(-1 * var(--op-space-40)) !important;
}

.-me-44 {
  margin-inline-end: calc(-1 * var(--op-space-44)) !important;
}

.-me-48 {
  margin-inline-end: calc(-1 * var(--op-space-48)) !important;
}

.-me-52 {
  margin-inline-end: calc(-1 * var(--op-space-52)) !important;
}

.-me-56 {
  margin-inline-end: calc(-1 * var(--op-space-56)) !important;
}

.-me-60 {
  margin-inline-end: calc(-1 * var(--op-space-60)) !important;
}

.-me-64 {
  margin-inline-end: calc(-1 * var(--op-space-64)) !important;
}

.-me-72 {
  margin-inline-end: calc(-1 * var(--op-space-72)) !important;
}

.-me-80 {
  margin-inline-end: calc(-1 * var(--op-space-80)) !important;
}

.-me-96 {
  margin-inline-end: calc(-1 * var(--op-space-96)) !important;
}

.-me-2xs {
  margin-inline-end: calc(-1 * var(--op-space-2xs)) !important;
}

.-me-xs {
  margin-inline-end: calc(-1 * var(--op-space-xs)) !important;
}

.-me-sm {
  margin-inline-end: calc(-1 * var(--op-space-sm)) !important;
}

.-me-md {
  margin-inline-end: calc(-1 * var(--op-space-md)) !important;
}

.-me-lg {
  margin-inline-end: calc(-1 * var(--op-space-lg)) !important;
}

.-me-xl {
  margin-inline-end: calc(-1 * var(--op-space-xl)) !important;
}

.-me-2xl {
  margin-inline-end: calc(-1 * var(--op-space-2xl)) !important;
}

.-me-3xl {
  margin-inline-end: calc(-1 * var(--op-space-3xl)) !important;
}

.-me-4xl {
  margin-inline-end: calc(-1 * var(--op-space-4xl)) !important;
}

.-mbs-px {
  margin-block-start: calc(-1 * var(--op-space-px)) !important;
}

.-mbs-0\.5 {
  margin-block-start: calc(-1 * var(--op-space-0-5)) !important;
}

.-mbs-1 {
  margin-block-start: calc(-1 * var(--op-space-1)) !important;
}

.-mbs-1\.5 {
  margin-block-start: calc(-1 * var(--op-space-1-5)) !important;
}

.-mbs-2 {
  margin-block-start: calc(-1 * var(--op-space-2)) !important;
}

.-mbs-2\.5 {
  margin-block-start: calc(-1 * var(--op-space-2-5)) !important;
}

.-mbs-3 {
  margin-block-start: calc(-1 * var(--op-space-3)) !important;
}

.-mbs-3\.5 {
  margin-block-start: calc(-1 * var(--op-space-3-5)) !important;
}

.-mbs-4 {
  margin-block-start: calc(-1 * var(--op-space-4)) !important;
}

.-mbs-5 {
  margin-block-start: calc(-1 * var(--op-space-5)) !important;
}

.-mbs-6 {
  margin-block-start: calc(-1 * var(--op-space-6)) !important;
}

.-mbs-7 {
  margin-block-start: calc(-1 * var(--op-space-7)) !important;
}

.-mbs-8 {
  margin-block-start: calc(-1 * var(--op-space-8)) !important;
}

.-mbs-9 {
  margin-block-start: calc(-1 * var(--op-space-9)) !important;
}

.-mbs-10 {
  margin-block-start: calc(-1 * var(--op-space-10)) !important;
}

.-mbs-11 {
  margin-block-start: calc(-1 * var(--op-space-11)) !important;
}

.-mbs-12 {
  margin-block-start: calc(-1 * var(--op-space-12)) !important;
}

.-mbs-14 {
  margin-block-start: calc(-1 * var(--op-space-14)) !important;
}

.-mbs-16 {
  margin-block-start: calc(-1 * var(--op-space-16)) !important;
}

.-mbs-20 {
  margin-block-start: calc(-1 * var(--op-space-20)) !important;
}

.-mbs-24 {
  margin-block-start: calc(-1 * var(--op-space-24)) !important;
}

.-mbs-28 {
  margin-block-start: calc(-1 * var(--op-space-28)) !important;
}

.-mbs-32 {
  margin-block-start: calc(-1 * var(--op-space-32)) !important;
}

.-mbs-36 {
  margin-block-start: calc(-1 * var(--op-space-36)) !important;
}

.-mbs-40 {
  margin-block-start: calc(-1 * var(--op-space-40)) !important;
}

.-mbs-44 {
  margin-block-start: calc(-1 * var(--op-space-44)) !important;
}

.-mbs-48 {
  margin-block-start: calc(-1 * var(--op-space-48)) !important;
}

.-mbs-52 {
  margin-block-start: calc(-1 * var(--op-space-52)) !important;
}

.-mbs-56 {
  margin-block-start: calc(-1 * var(--op-space-56)) !important;
}

.-mbs-60 {
  margin-block-start: calc(-1 * var(--op-space-60)) !important;
}

.-mbs-64 {
  margin-block-start: calc(-1 * var(--op-space-64)) !important;
}

.-mbs-72 {
  margin-block-start: calc(-1 * var(--op-space-72)) !important;
}

.-mbs-80 {
  margin-block-start: calc(-1 * var(--op-space-80)) !important;
}

.-mbs-96 {
  margin-block-start: calc(-1 * var(--op-space-96)) !important;
}

.-mbs-2xs {
  margin-block-start: calc(-1 * var(--op-space-2xs)) !important;
}

.-mbs-xs {
  margin-block-start: calc(-1 * var(--op-space-xs)) !important;
}

.-mbs-sm {
  margin-block-start: calc(-1 * var(--op-space-sm)) !important;
}

.-mbs-md {
  margin-block-start: calc(-1 * var(--op-space-md)) !important;
}

.-mbs-lg {
  margin-block-start: calc(-1 * var(--op-space-lg)) !important;
}

.-mbs-xl {
  margin-block-start: calc(-1 * var(--op-space-xl)) !important;
}

.-mbs-2xl {
  margin-block-start: calc(-1 * var(--op-space-2xl)) !important;
}

.-mbs-3xl {
  margin-block-start: calc(-1 * var(--op-space-3xl)) !important;
}

.-mbs-4xl {
  margin-block-start: calc(-1 * var(--op-space-4xl)) !important;
}

.-mbe-px {
  margin-block-end: calc(-1 * var(--op-space-px)) !important;
}

.-mbe-0\.5 {
  margin-block-end: calc(-1 * var(--op-space-0-5)) !important;
}

.-mbe-1 {
  margin-block-end: calc(-1 * var(--op-space-1)) !important;
}

.-mbe-1\.5 {
  margin-block-end: calc(-1 * var(--op-space-1-5)) !important;
}

.-mbe-2 {
  margin-block-end: calc(-1 * var(--op-space-2)) !important;
}

.-mbe-2\.5 {
  margin-block-end: calc(-1 * var(--op-space-2-5)) !important;
}

.-mbe-3 {
  margin-block-end: calc(-1 * var(--op-space-3)) !important;
}

.-mbe-3\.5 {
  margin-block-end: calc(-1 * var(--op-space-3-5)) !important;
}

.-mbe-4 {
  margin-block-end: calc(-1 * var(--op-space-4)) !important;
}

.-mbe-5 {
  margin-block-end: calc(-1 * var(--op-space-5)) !important;
}

.-mbe-6 {
  margin-block-end: calc(-1 * var(--op-space-6)) !important;
}

.-mbe-7 {
  margin-block-end: calc(-1 * var(--op-space-7)) !important;
}

.-mbe-8 {
  margin-block-end: calc(-1 * var(--op-space-8)) !important;
}

.-mbe-9 {
  margin-block-end: calc(-1 * var(--op-space-9)) !important;
}

.-mbe-10 {
  margin-block-end: calc(-1 * var(--op-space-10)) !important;
}

.-mbe-11 {
  margin-block-end: calc(-1 * var(--op-space-11)) !important;
}

.-mbe-12 {
  margin-block-end: calc(-1 * var(--op-space-12)) !important;
}

.-mbe-14 {
  margin-block-end: calc(-1 * var(--op-space-14)) !important;
}

.-mbe-16 {
  margin-block-end: calc(-1 * var(--op-space-16)) !important;
}

.-mbe-20 {
  margin-block-end: calc(-1 * var(--op-space-20)) !important;
}

.-mbe-24 {
  margin-block-end: calc(-1 * var(--op-space-24)) !important;
}

.-mbe-28 {
  margin-block-end: calc(-1 * var(--op-space-28)) !important;
}

.-mbe-32 {
  margin-block-end: calc(-1 * var(--op-space-32)) !important;
}

.-mbe-36 {
  margin-block-end: calc(-1 * var(--op-space-36)) !important;
}

.-mbe-40 {
  margin-block-end: calc(-1 * var(--op-space-40)) !important;
}

.-mbe-44 {
  margin-block-end: calc(-1 * var(--op-space-44)) !important;
}

.-mbe-48 {
  margin-block-end: calc(-1 * var(--op-space-48)) !important;
}

.-mbe-52 {
  margin-block-end: calc(-1 * var(--op-space-52)) !important;
}

.-mbe-56 {
  margin-block-end: calc(-1 * var(--op-space-56)) !important;
}

.-mbe-60 {
  margin-block-end: calc(-1 * var(--op-space-60)) !important;
}

.-mbe-64 {
  margin-block-end: calc(-1 * var(--op-space-64)) !important;
}

.-mbe-72 {
  margin-block-end: calc(-1 * var(--op-space-72)) !important;
}

.-mbe-80 {
  margin-block-end: calc(-1 * var(--op-space-80)) !important;
}

.-mbe-96 {
  margin-block-end: calc(-1 * var(--op-space-96)) !important;
}

.-mbe-2xs {
  margin-block-end: calc(-1 * var(--op-space-2xs)) !important;
}

.-mbe-xs {
  margin-block-end: calc(-1 * var(--op-space-xs)) !important;
}

.-mbe-sm {
  margin-block-end: calc(-1 * var(--op-space-sm)) !important;
}

.-mbe-md {
  margin-block-end: calc(-1 * var(--op-space-md)) !important;
}

.-mbe-lg {
  margin-block-end: calc(-1 * var(--op-space-lg)) !important;
}

.-mbe-xl {
  margin-block-end: calc(-1 * var(--op-space-xl)) !important;
}

.-mbe-2xl {
  margin-block-end: calc(-1 * var(--op-space-2xl)) !important;
}

.-mbe-3xl {
  margin-block-end: calc(-1 * var(--op-space-3xl)) !important;
}

.-mbe-4xl {
  margin-block-end: calc(-1 * var(--op-space-4xl)) !important;
}

.-mt-px {
  margin-top: calc(-1 * var(--op-space-px)) !important;
}

.-mt-0\.5 {
  margin-top: calc(-1 * var(--op-space-0-5)) !important;
}

.-mt-1 {
  margin-top: calc(-1 * var(--op-space-1)) !important;
}

.-mt-1\.5 {
  margin-top: calc(-1 * var(--op-space-1-5)) !important;
}

.-mt-2 {
  margin-top: calc(-1 * var(--op-space-2)) !important;
}

.-mt-2\.5 {
  margin-top: calc(-1 * var(--op-space-2-5)) !important;
}

.-mt-3 {
  margin-top: calc(-1 * var(--op-space-3)) !important;
}

.-mt-3\.5 {
  margin-top: calc(-1 * var(--op-space-3-5)) !important;
}

.-mt-4 {
  margin-top: calc(-1 * var(--op-space-4)) !important;
}

.-mt-5 {
  margin-top: calc(-1 * var(--op-space-5)) !important;
}

.-mt-6 {
  margin-top: calc(-1 * var(--op-space-6)) !important;
}

.-mt-7 {
  margin-top: calc(-1 * var(--op-space-7)) !important;
}

.-mt-8 {
  margin-top: calc(-1 * var(--op-space-8)) !important;
}

.-mt-9 {
  margin-top: calc(-1 * var(--op-space-9)) !important;
}

.-mt-10 {
  margin-top: calc(-1 * var(--op-space-10)) !important;
}

.-mt-11 {
  margin-top: calc(-1 * var(--op-space-11)) !important;
}

.-mt-12 {
  margin-top: calc(-1 * var(--op-space-12)) !important;
}

.-mt-14 {
  margin-top: calc(-1 * var(--op-space-14)) !important;
}

.-mt-16 {
  margin-top: calc(-1 * var(--op-space-16)) !important;
}

.-mt-20 {
  margin-top: calc(-1 * var(--op-space-20)) !important;
}

.-mt-24 {
  margin-top: calc(-1 * var(--op-space-24)) !important;
}

.-mt-28 {
  margin-top: calc(-1 * var(--op-space-28)) !important;
}

.-mt-32 {
  margin-top: calc(-1 * var(--op-space-32)) !important;
}

.-mt-36 {
  margin-top: calc(-1 * var(--op-space-36)) !important;
}

.-mt-40 {
  margin-top: calc(-1 * var(--op-space-40)) !important;
}

.-mt-44 {
  margin-top: calc(-1 * var(--op-space-44)) !important;
}

.-mt-48 {
  margin-top: calc(-1 * var(--op-space-48)) !important;
}

.-mt-52 {
  margin-top: calc(-1 * var(--op-space-52)) !important;
}

.-mt-56 {
  margin-top: calc(-1 * var(--op-space-56)) !important;
}

.-mt-60 {
  margin-top: calc(-1 * var(--op-space-60)) !important;
}

.-mt-64 {
  margin-top: calc(-1 * var(--op-space-64)) !important;
}

.-mt-72 {
  margin-top: calc(-1 * var(--op-space-72)) !important;
}

.-mt-80 {
  margin-top: calc(-1 * var(--op-space-80)) !important;
}

.-mt-96 {
  margin-top: calc(-1 * var(--op-space-96)) !important;
}

.-mt-2xs {
  margin-top: calc(-1 * var(--op-space-2xs)) !important;
}

.-mt-xs {
  margin-top: calc(-1 * var(--op-space-xs)) !important;
}

.-mt-sm {
  margin-top: calc(-1 * var(--op-space-sm)) !important;
}

.-mt-md {
  margin-top: calc(-1 * var(--op-space-md)) !important;
}

.-mt-lg {
  margin-top: calc(-1 * var(--op-space-lg)) !important;
}

.-mt-xl {
  margin-top: calc(-1 * var(--op-space-xl)) !important;
}

.-mt-2xl {
  margin-top: calc(-1 * var(--op-space-2xl)) !important;
}

.-mt-3xl {
  margin-top: calc(-1 * var(--op-space-3xl)) !important;
}

.-mt-4xl {
  margin-top: calc(-1 * var(--op-space-4xl)) !important;
}

.-mr-px {
  margin-right: calc(-1 * var(--op-space-px)) !important;
}

.-mr-0\.5 {
  margin-right: calc(-1 * var(--op-space-0-5)) !important;
}

.-mr-1 {
  margin-right: calc(-1 * var(--op-space-1)) !important;
}

.-mr-1\.5 {
  margin-right: calc(-1 * var(--op-space-1-5)) !important;
}

.-mr-2 {
  margin-right: calc(-1 * var(--op-space-2)) !important;
}

.-mr-2\.5 {
  margin-right: calc(-1 * var(--op-space-2-5)) !important;
}

.-mr-3 {
  margin-right: calc(-1 * var(--op-space-3)) !important;
}

.-mr-3\.5 {
  margin-right: calc(-1 * var(--op-space-3-5)) !important;
}

.-mr-4 {
  margin-right: calc(-1 * var(--op-space-4)) !important;
}

.-mr-5 {
  margin-right: calc(-1 * var(--op-space-5)) !important;
}

.-mr-6 {
  margin-right: calc(-1 * var(--op-space-6)) !important;
}

.-mr-7 {
  margin-right: calc(-1 * var(--op-space-7)) !important;
}

.-mr-8 {
  margin-right: calc(-1 * var(--op-space-8)) !important;
}

.-mr-9 {
  margin-right: calc(-1 * var(--op-space-9)) !important;
}

.-mr-10 {
  margin-right: calc(-1 * var(--op-space-10)) !important;
}

.-mr-11 {
  margin-right: calc(-1 * var(--op-space-11)) !important;
}

.-mr-12 {
  margin-right: calc(-1 * var(--op-space-12)) !important;
}

.-mr-14 {
  margin-right: calc(-1 * var(--op-space-14)) !important;
}

.-mr-16 {
  margin-right: calc(-1 * var(--op-space-16)) !important;
}

.-mr-20 {
  margin-right: calc(-1 * var(--op-space-20)) !important;
}

.-mr-24 {
  margin-right: calc(-1 * var(--op-space-24)) !important;
}

.-mr-28 {
  margin-right: calc(-1 * var(--op-space-28)) !important;
}

.-mr-32 {
  margin-right: calc(-1 * var(--op-space-32)) !important;
}

.-mr-36 {
  margin-right: calc(-1 * var(--op-space-36)) !important;
}

.-mr-40 {
  margin-right: calc(-1 * var(--op-space-40)) !important;
}

.-mr-44 {
  margin-right: calc(-1 * var(--op-space-44)) !important;
}

.-mr-48 {
  margin-right: calc(-1 * var(--op-space-48)) !important;
}

.-mr-52 {
  margin-right: calc(-1 * var(--op-space-52)) !important;
}

.-mr-56 {
  margin-right: calc(-1 * var(--op-space-56)) !important;
}

.-mr-60 {
  margin-right: calc(-1 * var(--op-space-60)) !important;
}

.-mr-64 {
  margin-right: calc(-1 * var(--op-space-64)) !important;
}

.-mr-72 {
  margin-right: calc(-1 * var(--op-space-72)) !important;
}

.-mr-80 {
  margin-right: calc(-1 * var(--op-space-80)) !important;
}

.-mr-96 {
  margin-right: calc(-1 * var(--op-space-96)) !important;
}

.-mr-2xs {
  margin-right: calc(-1 * var(--op-space-2xs)) !important;
}

.-mr-xs {
  margin-right: calc(-1 * var(--op-space-xs)) !important;
}

.-mr-sm {
  margin-right: calc(-1 * var(--op-space-sm)) !important;
}

.-mr-md {
  margin-right: calc(-1 * var(--op-space-md)) !important;
}

.-mr-lg {
  margin-right: calc(-1 * var(--op-space-lg)) !important;
}

.-mr-xl {
  margin-right: calc(-1 * var(--op-space-xl)) !important;
}

.-mr-2xl {
  margin-right: calc(-1 * var(--op-space-2xl)) !important;
}

.-mr-3xl {
  margin-right: calc(-1 * var(--op-space-3xl)) !important;
}

.-mr-4xl {
  margin-right: calc(-1 * var(--op-space-4xl)) !important;
}

.-mb-px {
  margin-bottom: calc(-1 * var(--op-space-px)) !important;
}

.-mb-0\.5 {
  margin-bottom: calc(-1 * var(--op-space-0-5)) !important;
}

.-mb-1 {
  margin-bottom: calc(-1 * var(--op-space-1)) !important;
}

.-mb-1\.5 {
  margin-bottom: calc(-1 * var(--op-space-1-5)) !important;
}

.-mb-2 {
  margin-bottom: calc(-1 * var(--op-space-2)) !important;
}

.-mb-2\.5 {
  margin-bottom: calc(-1 * var(--op-space-2-5)) !important;
}

.-mb-3 {
  margin-bottom: calc(-1 * var(--op-space-3)) !important;
}

.-mb-3\.5 {
  margin-bottom: calc(-1 * var(--op-space-3-5)) !important;
}

.-mb-4 {
  margin-bottom: calc(-1 * var(--op-space-4)) !important;
}

.-mb-5 {
  margin-bottom: calc(-1 * var(--op-space-5)) !important;
}

.-mb-6 {
  margin-bottom: calc(-1 * var(--op-space-6)) !important;
}

.-mb-7 {
  margin-bottom: calc(-1 * var(--op-space-7)) !important;
}

.-mb-8 {
  margin-bottom: calc(-1 * var(--op-space-8)) !important;
}

.-mb-9 {
  margin-bottom: calc(-1 * var(--op-space-9)) !important;
}

.-mb-10 {
  margin-bottom: calc(-1 * var(--op-space-10)) !important;
}

.-mb-11 {
  margin-bottom: calc(-1 * var(--op-space-11)) !important;
}

.-mb-12 {
  margin-bottom: calc(-1 * var(--op-space-12)) !important;
}

.-mb-14 {
  margin-bottom: calc(-1 * var(--op-space-14)) !important;
}

.-mb-16 {
  margin-bottom: calc(-1 * var(--op-space-16)) !important;
}

.-mb-20 {
  margin-bottom: calc(-1 * var(--op-space-20)) !important;
}

.-mb-24 {
  margin-bottom: calc(-1 * var(--op-space-24)) !important;
}

.-mb-28 {
  margin-bottom: calc(-1 * var(--op-space-28)) !important;
}

.-mb-32 {
  margin-bottom: calc(-1 * var(--op-space-32)) !important;
}

.-mb-36 {
  margin-bottom: calc(-1 * var(--op-space-36)) !important;
}

.-mb-40 {
  margin-bottom: calc(-1 * var(--op-space-40)) !important;
}

.-mb-44 {
  margin-bottom: calc(-1 * var(--op-space-44)) !important;
}

.-mb-48 {
  margin-bottom: calc(-1 * var(--op-space-48)) !important;
}

.-mb-52 {
  margin-bottom: calc(-1 * var(--op-space-52)) !important;
}

.-mb-56 {
  margin-bottom: calc(-1 * var(--op-space-56)) !important;
}

.-mb-60 {
  margin-bottom: calc(-1 * var(--op-space-60)) !important;
}

.-mb-64 {
  margin-bottom: calc(-1 * var(--op-space-64)) !important;
}

.-mb-72 {
  margin-bottom: calc(-1 * var(--op-space-72)) !important;
}

.-mb-80 {
  margin-bottom: calc(-1 * var(--op-space-80)) !important;
}

.-mb-96 {
  margin-bottom: calc(-1 * var(--op-space-96)) !important;
}

.-mb-2xs {
  margin-bottom: calc(-1 * var(--op-space-2xs)) !important;
}

.-mb-xs {
  margin-bottom: calc(-1 * var(--op-space-xs)) !important;
}

.-mb-sm {
  margin-bottom: calc(-1 * var(--op-space-sm)) !important;
}

.-mb-md {
  margin-bottom: calc(-1 * var(--op-space-md)) !important;
}

.-mb-lg {
  margin-bottom: calc(-1 * var(--op-space-lg)) !important;
}

.-mb-xl {
  margin-bottom: calc(-1 * var(--op-space-xl)) !important;
}

.-mb-2xl {
  margin-bottom: calc(-1 * var(--op-space-2xl)) !important;
}

.-mb-3xl {
  margin-bottom: calc(-1 * var(--op-space-3xl)) !important;
}

.-mb-4xl {
  margin-bottom: calc(-1 * var(--op-space-4xl)) !important;
}

.-ml-px {
  margin-left: calc(-1 * var(--op-space-px)) !important;
}

.-ml-0\.5 {
  margin-left: calc(-1 * var(--op-space-0-5)) !important;
}

.-ml-1 {
  margin-left: calc(-1 * var(--op-space-1)) !important;
}

.-ml-1\.5 {
  margin-left: calc(-1 * var(--op-space-1-5)) !important;
}

.-ml-2 {
  margin-left: calc(-1 * var(--op-space-2)) !important;
}

.-ml-2\.5 {
  margin-left: calc(-1 * var(--op-space-2-5)) !important;
}

.-ml-3 {
  margin-left: calc(-1 * var(--op-space-3)) !important;
}

.-ml-3\.5 {
  margin-left: calc(-1 * var(--op-space-3-5)) !important;
}

.-ml-4 {
  margin-left: calc(-1 * var(--op-space-4)) !important;
}

.-ml-5 {
  margin-left: calc(-1 * var(--op-space-5)) !important;
}

.-ml-6 {
  margin-left: calc(-1 * var(--op-space-6)) !important;
}

.-ml-7 {
  margin-left: calc(-1 * var(--op-space-7)) !important;
}

.-ml-8 {
  margin-left: calc(-1 * var(--op-space-8)) !important;
}

.-ml-9 {
  margin-left: calc(-1 * var(--op-space-9)) !important;
}

.-ml-10 {
  margin-left: calc(-1 * var(--op-space-10)) !important;
}

.-ml-11 {
  margin-left: calc(-1 * var(--op-space-11)) !important;
}

.-ml-12 {
  margin-left: calc(-1 * var(--op-space-12)) !important;
}

.-ml-14 {
  margin-left: calc(-1 * var(--op-space-14)) !important;
}

.-ml-16 {
  margin-left: calc(-1 * var(--op-space-16)) !important;
}

.-ml-20 {
  margin-left: calc(-1 * var(--op-space-20)) !important;
}

.-ml-24 {
  margin-left: calc(-1 * var(--op-space-24)) !important;
}

.-ml-28 {
  margin-left: calc(-1 * var(--op-space-28)) !important;
}

.-ml-32 {
  margin-left: calc(-1 * var(--op-space-32)) !important;
}

.-ml-36 {
  margin-left: calc(-1 * var(--op-space-36)) !important;
}

.-ml-40 {
  margin-left: calc(-1 * var(--op-space-40)) !important;
}

.-ml-44 {
  margin-left: calc(-1 * var(--op-space-44)) !important;
}

.-ml-48 {
  margin-left: calc(-1 * var(--op-space-48)) !important;
}

.-ml-52 {
  margin-left: calc(-1 * var(--op-space-52)) !important;
}

.-ml-56 {
  margin-left: calc(-1 * var(--op-space-56)) !important;
}

.-ml-60 {
  margin-left: calc(-1 * var(--op-space-60)) !important;
}

.-ml-64 {
  margin-left: calc(-1 * var(--op-space-64)) !important;
}

.-ml-72 {
  margin-left: calc(-1 * var(--op-space-72)) !important;
}

.-ml-80 {
  margin-left: calc(-1 * var(--op-space-80)) !important;
}

.-ml-96 {
  margin-left: calc(-1 * var(--op-space-96)) !important;
}

.-ml-2xs {
  margin-left: calc(-1 * var(--op-space-2xs)) !important;
}

.-ml-xs {
  margin-left: calc(-1 * var(--op-space-xs)) !important;
}

.-ml-sm {
  margin-left: calc(-1 * var(--op-space-sm)) !important;
}

.-ml-md {
  margin-left: calc(-1 * var(--op-space-md)) !important;
}

.-ml-lg {
  margin-left: calc(-1 * var(--op-space-lg)) !important;
}

.-ml-xl {
  margin-left: calc(-1 * var(--op-space-xl)) !important;
}

.-ml-2xl {
  margin-left: calc(-1 * var(--op-space-2xl)) !important;
}

.-ml-3xl {
  margin-left: calc(-1 * var(--op-space-3xl)) !important;
}

.-ml-4xl {
  margin-left: calc(-1 * var(--op-space-4xl)) !important;
}

.p-px {
  padding: var(--op-space-px) !important;
}

.p-0 {
  padding: var(--op-space-0) !important;
}

.p-0\.5 {
  padding: var(--op-space-0-5) !important;
}

.p-1 {
  padding: var(--op-space-1) !important;
}

.p-1\.5 {
  padding: var(--op-space-1-5) !important;
}

.p-2 {
  padding: var(--op-space-2) !important;
}

.p-2\.5 {
  padding: var(--op-space-2-5) !important;
}

.p-3 {
  padding: var(--op-space-3) !important;
}

.p-3\.5 {
  padding: var(--op-space-3-5) !important;
}

.p-4 {
  padding: var(--op-space-4) !important;
}

.p-5 {
  padding: var(--op-space-5) !important;
}

.p-6 {
  padding: var(--op-space-6) !important;
}

.p-7 {
  padding: var(--op-space-7) !important;
}

.p-8 {
  padding: var(--op-space-8) !important;
}

.p-9 {
  padding: var(--op-space-9) !important;
}

.p-10 {
  padding: var(--op-space-10) !important;
}

.p-11 {
  padding: var(--op-space-11) !important;
}

.p-12 {
  padding: var(--op-space-12) !important;
}

.p-14 {
  padding: var(--op-space-14) !important;
}

.p-16 {
  padding: var(--op-space-16) !important;
}

.p-20 {
  padding: var(--op-space-20) !important;
}

.p-24 {
  padding: var(--op-space-24) !important;
}

.p-28 {
  padding: var(--op-space-28) !important;
}

.p-32 {
  padding: var(--op-space-32) !important;
}

.p-36 {
  padding: var(--op-space-36) !important;
}

.p-40 {
  padding: var(--op-space-40) !important;
}

.p-44 {
  padding: var(--op-space-44) !important;
}

.p-48 {
  padding: var(--op-space-48) !important;
}

.p-52 {
  padding: var(--op-space-52) !important;
}

.p-56 {
  padding: var(--op-space-56) !important;
}

.p-60 {
  padding: var(--op-space-60) !important;
}

.p-64 {
  padding: var(--op-space-64) !important;
}

.p-72 {
  padding: var(--op-space-72) !important;
}

.p-80 {
  padding: var(--op-space-80) !important;
}

.p-96 {
  padding: var(--op-space-96) !important;
}

.p-2xs {
  padding: var(--op-space-2xs) !important;
}

.p-xs {
  padding: var(--op-space-xs) !important;
}

.p-sm {
  padding: var(--op-space-sm) !important;
}

.p-md {
  padding: var(--op-space-md) !important;
}

.p-lg {
  padding: var(--op-space-lg) !important;
}

.p-xl {
  padding: var(--op-space-xl) !important;
}

.p-2xl {
  padding: var(--op-space-2xl) !important;
}

.p-3xl {
  padding: var(--op-space-3xl) !important;
}

.p-4xl {
  padding: var(--op-space-4xl) !important;
}

.px-px {
  padding-inline: var(--op-space-px) !important;
}

.px-0 {
  padding-inline: var(--op-space-0) !important;
}

.px-0\.5 {
  padding-inline: var(--op-space-0-5) !important;
}

.px-1 {
  padding-inline: var(--op-space-1) !important;
}

.px-1\.5 {
  padding-inline: var(--op-space-1-5) !important;
}

.px-2 {
  padding-inline: var(--op-space-2) !important;
}

.px-2\.5 {
  padding-inline: var(--op-space-2-5) !important;
}

.px-3 {
  padding-inline: var(--op-space-3) !important;
}

.px-3\.5 {
  padding-inline: var(--op-space-3-5) !important;
}

.px-4 {
  padding-inline: var(--op-space-4) !important;
}

.px-5 {
  padding-inline: var(--op-space-5) !important;
}

.px-6 {
  padding-inline: var(--op-space-6) !important;
}

.px-7 {
  padding-inline: var(--op-space-7) !important;
}

.px-8 {
  padding-inline: var(--op-space-8) !important;
}

.px-9 {
  padding-inline: var(--op-space-9) !important;
}

.px-10 {
  padding-inline: var(--op-space-10) !important;
}

.px-11 {
  padding-inline: var(--op-space-11) !important;
}

.px-12 {
  padding-inline: var(--op-space-12) !important;
}

.px-14 {
  padding-inline: var(--op-space-14) !important;
}

.px-16 {
  padding-inline: var(--op-space-16) !important;
}

.px-20 {
  padding-inline: var(--op-space-20) !important;
}

.px-24 {
  padding-inline: var(--op-space-24) !important;
}

.px-28 {
  padding-inline: var(--op-space-28) !important;
}

.px-32 {
  padding-inline: var(--op-space-32) !important;
}

.px-36 {
  padding-inline: var(--op-space-36) !important;
}

.px-40 {
  padding-inline: var(--op-space-40) !important;
}

.px-44 {
  padding-inline: var(--op-space-44) !important;
}

.px-48 {
  padding-inline: var(--op-space-48) !important;
}

.px-52 {
  padding-inline: var(--op-space-52) !important;
}

.px-56 {
  padding-inline: var(--op-space-56) !important;
}

.px-60 {
  padding-inline: var(--op-space-60) !important;
}

.px-64 {
  padding-inline: var(--op-space-64) !important;
}

.px-72 {
  padding-inline: var(--op-space-72) !important;
}

.px-80 {
  padding-inline: var(--op-space-80) !important;
}

.px-96 {
  padding-inline: var(--op-space-96) !important;
}

.px-2xs {
  padding-inline: var(--op-space-2xs) !important;
}

.px-xs {
  padding-inline: var(--op-space-xs) !important;
}

.px-sm {
  padding-inline: var(--op-space-sm) !important;
}

.px-md {
  padding-inline: var(--op-space-md) !important;
}

.px-lg {
  padding-inline: var(--op-space-lg) !important;
}

.px-xl {
  padding-inline: var(--op-space-xl) !important;
}

.px-2xl {
  padding-inline: var(--op-space-2xl) !important;
}

.px-3xl {
  padding-inline: var(--op-space-3xl) !important;
}

.px-4xl {
  padding-inline: var(--op-space-4xl) !important;
}

.py-px {
  padding-block: var(--op-space-px) !important;
}

.py-0 {
  padding-block: var(--op-space-0) !important;
}

.py-0\.5 {
  padding-block: var(--op-space-0-5) !important;
}

.py-1 {
  padding-block: var(--op-space-1) !important;
}

.py-1\.5 {
  padding-block: var(--op-space-1-5) !important;
}

.py-2 {
  padding-block: var(--op-space-2) !important;
}

.py-2\.5 {
  padding-block: var(--op-space-2-5) !important;
}

.py-3 {
  padding-block: var(--op-space-3) !important;
}

.py-3\.5 {
  padding-block: var(--op-space-3-5) !important;
}

.py-4 {
  padding-block: var(--op-space-4) !important;
}

.py-5 {
  padding-block: var(--op-space-5) !important;
}

.py-6 {
  padding-block: var(--op-space-6) !important;
}

.py-7 {
  padding-block: var(--op-space-7) !important;
}

.py-8 {
  padding-block: var(--op-space-8) !important;
}

.py-9 {
  padding-block: var(--op-space-9) !important;
}

.py-10 {
  padding-block: var(--op-space-10) !important;
}

.py-11 {
  padding-block: var(--op-space-11) !important;
}

.py-12 {
  padding-block: var(--op-space-12) !important;
}

.py-14 {
  padding-block: var(--op-space-14) !important;
}

.py-16 {
  padding-block: var(--op-space-16) !important;
}

.py-20 {
  padding-block: var(--op-space-20) !important;
}

.py-24 {
  padding-block: var(--op-space-24) !important;
}

.py-28 {
  padding-block: var(--op-space-28) !important;
}

.py-32 {
  padding-block: var(--op-space-32) !important;
}

.py-36 {
  padding-block: var(--op-space-36) !important;
}

.py-40 {
  padding-block: var(--op-space-40) !important;
}

.py-44 {
  padding-block: var(--op-space-44) !important;
}

.py-48 {
  padding-block: var(--op-space-48) !important;
}

.py-52 {
  padding-block: var(--op-space-52) !important;
}

.py-56 {
  padding-block: var(--op-space-56) !important;
}

.py-60 {
  padding-block: var(--op-space-60) !important;
}

.py-64 {
  padding-block: var(--op-space-64) !important;
}

.py-72 {
  padding-block: var(--op-space-72) !important;
}

.py-80 {
  padding-block: var(--op-space-80) !important;
}

.py-96 {
  padding-block: var(--op-space-96) !important;
}

.py-2xs {
  padding-block: var(--op-space-2xs) !important;
}

.py-xs {
  padding-block: var(--op-space-xs) !important;
}

.py-sm {
  padding-block: var(--op-space-sm) !important;
}

.py-md {
  padding-block: var(--op-space-md) !important;
}

.py-lg {
  padding-block: var(--op-space-lg) !important;
}

.py-xl {
  padding-block: var(--op-space-xl) !important;
}

.py-2xl {
  padding-block: var(--op-space-2xl) !important;
}

.py-3xl {
  padding-block: var(--op-space-3xl) !important;
}

.py-4xl {
  padding-block: var(--op-space-4xl) !important;
}

.ps-px {
  padding-inline-start: var(--op-space-px) !important;
}

.ps-0 {
  padding-inline-start: var(--op-space-0) !important;
}

.ps-0\.5 {
  padding-inline-start: var(--op-space-0-5) !important;
}

.ps-1 {
  padding-inline-start: var(--op-space-1) !important;
}

.ps-1\.5 {
  padding-inline-start: var(--op-space-1-5) !important;
}

.ps-2 {
  padding-inline-start: var(--op-space-2) !important;
}

.ps-2\.5 {
  padding-inline-start: var(--op-space-2-5) !important;
}

.ps-3 {
  padding-inline-start: var(--op-space-3) !important;
}

.ps-3\.5 {
  padding-inline-start: var(--op-space-3-5) !important;
}

.ps-4 {
  padding-inline-start: var(--op-space-4) !important;
}

.ps-5 {
  padding-inline-start: var(--op-space-5) !important;
}

.ps-6 {
  padding-inline-start: var(--op-space-6) !important;
}

.ps-7 {
  padding-inline-start: var(--op-space-7) !important;
}

.ps-8 {
  padding-inline-start: var(--op-space-8) !important;
}

.ps-9 {
  padding-inline-start: var(--op-space-9) !important;
}

.ps-10 {
  padding-inline-start: var(--op-space-10) !important;
}

.ps-11 {
  padding-inline-start: var(--op-space-11) !important;
}

.ps-12 {
  padding-inline-start: var(--op-space-12) !important;
}

.ps-14 {
  padding-inline-start: var(--op-space-14) !important;
}

.ps-16 {
  padding-inline-start: var(--op-space-16) !important;
}

.ps-20 {
  padding-inline-start: var(--op-space-20) !important;
}

.ps-24 {
  padding-inline-start: var(--op-space-24) !important;
}

.ps-28 {
  padding-inline-start: var(--op-space-28) !important;
}

.ps-32 {
  padding-inline-start: var(--op-space-32) !important;
}

.ps-36 {
  padding-inline-start: var(--op-space-36) !important;
}

.ps-40 {
  padding-inline-start: var(--op-space-40) !important;
}

.ps-44 {
  padding-inline-start: var(--op-space-44) !important;
}

.ps-48 {
  padding-inline-start: var(--op-space-48) !important;
}

.ps-52 {
  padding-inline-start: var(--op-space-52) !important;
}

.ps-56 {
  padding-inline-start: var(--op-space-56) !important;
}

.ps-60 {
  padding-inline-start: var(--op-space-60) !important;
}

.ps-64 {
  padding-inline-start: var(--op-space-64) !important;
}

.ps-72 {
  padding-inline-start: var(--op-space-72) !important;
}

.ps-80 {
  padding-inline-start: var(--op-space-80) !important;
}

.ps-96 {
  padding-inline-start: var(--op-space-96) !important;
}

.ps-2xs {
  padding-inline-start: var(--op-space-2xs) !important;
}

.ps-xs {
  padding-inline-start: var(--op-space-xs) !important;
}

.ps-sm {
  padding-inline-start: var(--op-space-sm) !important;
}

.ps-md {
  padding-inline-start: var(--op-space-md) !important;
}

.ps-lg {
  padding-inline-start: var(--op-space-lg) !important;
}

.ps-xl {
  padding-inline-start: var(--op-space-xl) !important;
}

.ps-2xl {
  padding-inline-start: var(--op-space-2xl) !important;
}

.ps-3xl {
  padding-inline-start: var(--op-space-3xl) !important;
}

.ps-4xl {
  padding-inline-start: var(--op-space-4xl) !important;
}

.pe-px {
  padding-inline-end: var(--op-space-px) !important;
}

.pe-0 {
  padding-inline-end: var(--op-space-0) !important;
}

.pe-0\.5 {
  padding-inline-end: var(--op-space-0-5) !important;
}

.pe-1 {
  padding-inline-end: var(--op-space-1) !important;
}

.pe-1\.5 {
  padding-inline-end: var(--op-space-1-5) !important;
}

.pe-2 {
  padding-inline-end: var(--op-space-2) !important;
}

.pe-2\.5 {
  padding-inline-end: var(--op-space-2-5) !important;
}

.pe-3 {
  padding-inline-end: var(--op-space-3) !important;
}

.pe-3\.5 {
  padding-inline-end: var(--op-space-3-5) !important;
}

.pe-4 {
  padding-inline-end: var(--op-space-4) !important;
}

.pe-5 {
  padding-inline-end: var(--op-space-5) !important;
}

.pe-6 {
  padding-inline-end: var(--op-space-6) !important;
}

.pe-7 {
  padding-inline-end: var(--op-space-7) !important;
}

.pe-8 {
  padding-inline-end: var(--op-space-8) !important;
}

.pe-9 {
  padding-inline-end: var(--op-space-9) !important;
}

.pe-10 {
  padding-inline-end: var(--op-space-10) !important;
}

.pe-11 {
  padding-inline-end: var(--op-space-11) !important;
}

.pe-12 {
  padding-inline-end: var(--op-space-12) !important;
}

.pe-14 {
  padding-inline-end: var(--op-space-14) !important;
}

.pe-16 {
  padding-inline-end: var(--op-space-16) !important;
}

.pe-20 {
  padding-inline-end: var(--op-space-20) !important;
}

.pe-24 {
  padding-inline-end: var(--op-space-24) !important;
}

.pe-28 {
  padding-inline-end: var(--op-space-28) !important;
}

.pe-32 {
  padding-inline-end: var(--op-space-32) !important;
}

.pe-36 {
  padding-inline-end: var(--op-space-36) !important;
}

.pe-40 {
  padding-inline-end: var(--op-space-40) !important;
}

.pe-44 {
  padding-inline-end: var(--op-space-44) !important;
}

.pe-48 {
  padding-inline-end: var(--op-space-48) !important;
}

.pe-52 {
  padding-inline-end: var(--op-space-52) !important;
}

.pe-56 {
  padding-inline-end: var(--op-space-56) !important;
}

.pe-60 {
  padding-inline-end: var(--op-space-60) !important;
}

.pe-64 {
  padding-inline-end: var(--op-space-64) !important;
}

.pe-72 {
  padding-inline-end: var(--op-space-72) !important;
}

.pe-80 {
  padding-inline-end: var(--op-space-80) !important;
}

.pe-96 {
  padding-inline-end: var(--op-space-96) !important;
}

.pe-2xs {
  padding-inline-end: var(--op-space-2xs) !important;
}

.pe-xs {
  padding-inline-end: var(--op-space-xs) !important;
}

.pe-sm {
  padding-inline-end: var(--op-space-sm) !important;
}

.pe-md {
  padding-inline-end: var(--op-space-md) !important;
}

.pe-lg {
  padding-inline-end: var(--op-space-lg) !important;
}

.pe-xl {
  padding-inline-end: var(--op-space-xl) !important;
}

.pe-2xl {
  padding-inline-end: var(--op-space-2xl) !important;
}

.pe-3xl {
  padding-inline-end: var(--op-space-3xl) !important;
}

.pe-4xl {
  padding-inline-end: var(--op-space-4xl) !important;
}

.pbs-px {
  padding-block-start: var(--op-space-px) !important;
}

.pbs-0 {
  padding-block-start: var(--op-space-0) !important;
}

.pbs-0\.5 {
  padding-block-start: var(--op-space-0-5) !important;
}

.pbs-1 {
  padding-block-start: var(--op-space-1) !important;
}

.pbs-1\.5 {
  padding-block-start: var(--op-space-1-5) !important;
}

.pbs-2 {
  padding-block-start: var(--op-space-2) !important;
}

.pbs-2\.5 {
  padding-block-start: var(--op-space-2-5) !important;
}

.pbs-3 {
  padding-block-start: var(--op-space-3) !important;
}

.pbs-3\.5 {
  padding-block-start: var(--op-space-3-5) !important;
}

.pbs-4 {
  padding-block-start: var(--op-space-4) !important;
}

.pbs-5 {
  padding-block-start: var(--op-space-5) !important;
}

.pbs-6 {
  padding-block-start: var(--op-space-6) !important;
}

.pbs-7 {
  padding-block-start: var(--op-space-7) !important;
}

.pbs-8 {
  padding-block-start: var(--op-space-8) !important;
}

.pbs-9 {
  padding-block-start: var(--op-space-9) !important;
}

.pbs-10 {
  padding-block-start: var(--op-space-10) !important;
}

.pbs-11 {
  padding-block-start: var(--op-space-11) !important;
}

.pbs-12 {
  padding-block-start: var(--op-space-12) !important;
}

.pbs-14 {
  padding-block-start: var(--op-space-14) !important;
}

.pbs-16 {
  padding-block-start: var(--op-space-16) !important;
}

.pbs-20 {
  padding-block-start: var(--op-space-20) !important;
}

.pbs-24 {
  padding-block-start: var(--op-space-24) !important;
}

.pbs-28 {
  padding-block-start: var(--op-space-28) !important;
}

.pbs-32 {
  padding-block-start: var(--op-space-32) !important;
}

.pbs-36 {
  padding-block-start: var(--op-space-36) !important;
}

.pbs-40 {
  padding-block-start: var(--op-space-40) !important;
}

.pbs-44 {
  padding-block-start: var(--op-space-44) !important;
}

.pbs-48 {
  padding-block-start: var(--op-space-48) !important;
}

.pbs-52 {
  padding-block-start: var(--op-space-52) !important;
}

.pbs-56 {
  padding-block-start: var(--op-space-56) !important;
}

.pbs-60 {
  padding-block-start: var(--op-space-60) !important;
}

.pbs-64 {
  padding-block-start: var(--op-space-64) !important;
}

.pbs-72 {
  padding-block-start: var(--op-space-72) !important;
}

.pbs-80 {
  padding-block-start: var(--op-space-80) !important;
}

.pbs-96 {
  padding-block-start: var(--op-space-96) !important;
}

.pbs-2xs {
  padding-block-start: var(--op-space-2xs) !important;
}

.pbs-xs {
  padding-block-start: var(--op-space-xs) !important;
}

.pbs-sm {
  padding-block-start: var(--op-space-sm) !important;
}

.pbs-md {
  padding-block-start: var(--op-space-md) !important;
}

.pbs-lg {
  padding-block-start: var(--op-space-lg) !important;
}

.pbs-xl {
  padding-block-start: var(--op-space-xl) !important;
}

.pbs-2xl {
  padding-block-start: var(--op-space-2xl) !important;
}

.pbs-3xl {
  padding-block-start: var(--op-space-3xl) !important;
}

.pbs-4xl {
  padding-block-start: var(--op-space-4xl) !important;
}

.pbe-px {
  padding-block-end: var(--op-space-px) !important;
}

.pbe-0 {
  padding-block-end: var(--op-space-0) !important;
}

.pbe-0\.5 {
  padding-block-end: var(--op-space-0-5) !important;
}

.pbe-1 {
  padding-block-end: var(--op-space-1) !important;
}

.pbe-1\.5 {
  padding-block-end: var(--op-space-1-5) !important;
}

.pbe-2 {
  padding-block-end: var(--op-space-2) !important;
}

.pbe-2\.5 {
  padding-block-end: var(--op-space-2-5) !important;
}

.pbe-3 {
  padding-block-end: var(--op-space-3) !important;
}

.pbe-3\.5 {
  padding-block-end: var(--op-space-3-5) !important;
}

.pbe-4 {
  padding-block-end: var(--op-space-4) !important;
}

.pbe-5 {
  padding-block-end: var(--op-space-5) !important;
}

.pbe-6 {
  padding-block-end: var(--op-space-6) !important;
}

.pbe-7 {
  padding-block-end: var(--op-space-7) !important;
}

.pbe-8 {
  padding-block-end: var(--op-space-8) !important;
}

.pbe-9 {
  padding-block-end: var(--op-space-9) !important;
}

.pbe-10 {
  padding-block-end: var(--op-space-10) !important;
}

.pbe-11 {
  padding-block-end: var(--op-space-11) !important;
}

.pbe-12 {
  padding-block-end: var(--op-space-12) !important;
}

.pbe-14 {
  padding-block-end: var(--op-space-14) !important;
}

.pbe-16 {
  padding-block-end: var(--op-space-16) !important;
}

.pbe-20 {
  padding-block-end: var(--op-space-20) !important;
}

.pbe-24 {
  padding-block-end: var(--op-space-24) !important;
}

.pbe-28 {
  padding-block-end: var(--op-space-28) !important;
}

.pbe-32 {
  padding-block-end: var(--op-space-32) !important;
}

.pbe-36 {
  padding-block-end: var(--op-space-36) !important;
}

.pbe-40 {
  padding-block-end: var(--op-space-40) !important;
}

.pbe-44 {
  padding-block-end: var(--op-space-44) !important;
}

.pbe-48 {
  padding-block-end: var(--op-space-48) !important;
}

.pbe-52 {
  padding-block-end: var(--op-space-52) !important;
}

.pbe-56 {
  padding-block-end: var(--op-space-56) !important;
}

.pbe-60 {
  padding-block-end: var(--op-space-60) !important;
}

.pbe-64 {
  padding-block-end: var(--op-space-64) !important;
}

.pbe-72 {
  padding-block-end: var(--op-space-72) !important;
}

.pbe-80 {
  padding-block-end: var(--op-space-80) !important;
}

.pbe-96 {
  padding-block-end: var(--op-space-96) !important;
}

.pbe-2xs {
  padding-block-end: var(--op-space-2xs) !important;
}

.pbe-xs {
  padding-block-end: var(--op-space-xs) !important;
}

.pbe-sm {
  padding-block-end: var(--op-space-sm) !important;
}

.pbe-md {
  padding-block-end: var(--op-space-md) !important;
}

.pbe-lg {
  padding-block-end: var(--op-space-lg) !important;
}

.pbe-xl {
  padding-block-end: var(--op-space-xl) !important;
}

.pbe-2xl {
  padding-block-end: var(--op-space-2xl) !important;
}

.pbe-3xl {
  padding-block-end: var(--op-space-3xl) !important;
}

.pbe-4xl {
  padding-block-end: var(--op-space-4xl) !important;
}

.pt-px {
  padding-top: var(--op-space-px) !important;
}

.pt-0 {
  padding-top: var(--op-space-0) !important;
}

.pt-0\.5 {
  padding-top: var(--op-space-0-5) !important;
}

.pt-1 {
  padding-top: var(--op-space-1) !important;
}

.pt-1\.5 {
  padding-top: var(--op-space-1-5) !important;
}

.pt-2 {
  padding-top: var(--op-space-2) !important;
}

.pt-2\.5 {
  padding-top: var(--op-space-2-5) !important;
}

.pt-3 {
  padding-top: var(--op-space-3) !important;
}

.pt-3\.5 {
  padding-top: var(--op-space-3-5) !important;
}

.pt-4 {
  padding-top: var(--op-space-4) !important;
}

.pt-5 {
  padding-top: var(--op-space-5) !important;
}

.pt-6 {
  padding-top: var(--op-space-6) !important;
}

.pt-7 {
  padding-top: var(--op-space-7) !important;
}

.pt-8 {
  padding-top: var(--op-space-8) !important;
}

.pt-9 {
  padding-top: var(--op-space-9) !important;
}

.pt-10 {
  padding-top: var(--op-space-10) !important;
}

.pt-11 {
  padding-top: var(--op-space-11) !important;
}

.pt-12 {
  padding-top: var(--op-space-12) !important;
}

.pt-14 {
  padding-top: var(--op-space-14) !important;
}

.pt-16 {
  padding-top: var(--op-space-16) !important;
}

.pt-20 {
  padding-top: var(--op-space-20) !important;
}

.pt-24 {
  padding-top: var(--op-space-24) !important;
}

.pt-28 {
  padding-top: var(--op-space-28) !important;
}

.pt-32 {
  padding-top: var(--op-space-32) !important;
}

.pt-36 {
  padding-top: var(--op-space-36) !important;
}

.pt-40 {
  padding-top: var(--op-space-40) !important;
}

.pt-44 {
  padding-top: var(--op-space-44) !important;
}

.pt-48 {
  padding-top: var(--op-space-48) !important;
}

.pt-52 {
  padding-top: var(--op-space-52) !important;
}

.pt-56 {
  padding-top: var(--op-space-56) !important;
}

.pt-60 {
  padding-top: var(--op-space-60) !important;
}

.pt-64 {
  padding-top: var(--op-space-64) !important;
}

.pt-72 {
  padding-top: var(--op-space-72) !important;
}

.pt-80 {
  padding-top: var(--op-space-80) !important;
}

.pt-96 {
  padding-top: var(--op-space-96) !important;
}

.pt-2xs {
  padding-top: var(--op-space-2xs) !important;
}

.pt-xs {
  padding-top: var(--op-space-xs) !important;
}

.pt-sm {
  padding-top: var(--op-space-sm) !important;
}

.pt-md {
  padding-top: var(--op-space-md) !important;
}

.pt-lg {
  padding-top: var(--op-space-lg) !important;
}

.pt-xl {
  padding-top: var(--op-space-xl) !important;
}

.pt-2xl {
  padding-top: var(--op-space-2xl) !important;
}

.pt-3xl {
  padding-top: var(--op-space-3xl) !important;
}

.pt-4xl {
  padding-top: var(--op-space-4xl) !important;
}

.pr-px {
  padding-right: var(--op-space-px) !important;
}

.pr-0 {
  padding-right: var(--op-space-0) !important;
}

.pr-0\.5 {
  padding-right: var(--op-space-0-5) !important;
}

.pr-1 {
  padding-right: var(--op-space-1) !important;
}

.pr-1\.5 {
  padding-right: var(--op-space-1-5) !important;
}

.pr-2 {
  padding-right: var(--op-space-2) !important;
}

.pr-2\.5 {
  padding-right: var(--op-space-2-5) !important;
}

.pr-3 {
  padding-right: var(--op-space-3) !important;
}

.pr-3\.5 {
  padding-right: var(--op-space-3-5) !important;
}

.pr-4 {
  padding-right: var(--op-space-4) !important;
}

.pr-5 {
  padding-right: var(--op-space-5) !important;
}

.pr-6 {
  padding-right: var(--op-space-6) !important;
}

.pr-7 {
  padding-right: var(--op-space-7) !important;
}

.pr-8 {
  padding-right: var(--op-space-8) !important;
}

.pr-9 {
  padding-right: var(--op-space-9) !important;
}

.pr-10 {
  padding-right: var(--op-space-10) !important;
}

.pr-11 {
  padding-right: var(--op-space-11) !important;
}

.pr-12 {
  padding-right: var(--op-space-12) !important;
}

.pr-14 {
  padding-right: var(--op-space-14) !important;
}

.pr-16 {
  padding-right: var(--op-space-16) !important;
}

.pr-20 {
  padding-right: var(--op-space-20) !important;
}

.pr-24 {
  padding-right: var(--op-space-24) !important;
}

.pr-28 {
  padding-right: var(--op-space-28) !important;
}

.pr-32 {
  padding-right: var(--op-space-32) !important;
}

.pr-36 {
  padding-right: var(--op-space-36) !important;
}

.pr-40 {
  padding-right: var(--op-space-40) !important;
}

.pr-44 {
  padding-right: var(--op-space-44) !important;
}

.pr-48 {
  padding-right: var(--op-space-48) !important;
}

.pr-52 {
  padding-right: var(--op-space-52) !important;
}

.pr-56 {
  padding-right: var(--op-space-56) !important;
}

.pr-60 {
  padding-right: var(--op-space-60) !important;
}

.pr-64 {
  padding-right: var(--op-space-64) !important;
}

.pr-72 {
  padding-right: var(--op-space-72) !important;
}

.pr-80 {
  padding-right: var(--op-space-80) !important;
}

.pr-96 {
  padding-right: var(--op-space-96) !important;
}

.pr-2xs {
  padding-right: var(--op-space-2xs) !important;
}

.pr-xs {
  padding-right: var(--op-space-xs) !important;
}

.pr-sm {
  padding-right: var(--op-space-sm) !important;
}

.pr-md {
  padding-right: var(--op-space-md) !important;
}

.pr-lg {
  padding-right: var(--op-space-lg) !important;
}

.pr-xl {
  padding-right: var(--op-space-xl) !important;
}

.pr-2xl {
  padding-right: var(--op-space-2xl) !important;
}

.pr-3xl {
  padding-right: var(--op-space-3xl) !important;
}

.pr-4xl {
  padding-right: var(--op-space-4xl) !important;
}

.pb-px {
  padding-bottom: var(--op-space-px) !important;
}

.pb-0 {
  padding-bottom: var(--op-space-0) !important;
}

.pb-0\.5 {
  padding-bottom: var(--op-space-0-5) !important;
}

.pb-1 {
  padding-bottom: var(--op-space-1) !important;
}

.pb-1\.5 {
  padding-bottom: var(--op-space-1-5) !important;
}

.pb-2 {
  padding-bottom: var(--op-space-2) !important;
}

.pb-2\.5 {
  padding-bottom: var(--op-space-2-5) !important;
}

.pb-3 {
  padding-bottom: var(--op-space-3) !important;
}

.pb-3\.5 {
  padding-bottom: var(--op-space-3-5) !important;
}

.pb-4 {
  padding-bottom: var(--op-space-4) !important;
}

.pb-5 {
  padding-bottom: var(--op-space-5) !important;
}

.pb-6 {
  padding-bottom: var(--op-space-6) !important;
}

.pb-7 {
  padding-bottom: var(--op-space-7) !important;
}

.pb-8 {
  padding-bottom: var(--op-space-8) !important;
}

.pb-9 {
  padding-bottom: var(--op-space-9) !important;
}

.pb-10 {
  padding-bottom: var(--op-space-10) !important;
}

.pb-11 {
  padding-bottom: var(--op-space-11) !important;
}

.pb-12 {
  padding-bottom: var(--op-space-12) !important;
}

.pb-14 {
  padding-bottom: var(--op-space-14) !important;
}

.pb-16 {
  padding-bottom: var(--op-space-16) !important;
}

.pb-20 {
  padding-bottom: var(--op-space-20) !important;
}

.pb-24 {
  padding-bottom: var(--op-space-24) !important;
}

.pb-28 {
  padding-bottom: var(--op-space-28) !important;
}

.pb-32 {
  padding-bottom: var(--op-space-32) !important;
}

.pb-36 {
  padding-bottom: var(--op-space-36) !important;
}

.pb-40 {
  padding-bottom: var(--op-space-40) !important;
}

.pb-44 {
  padding-bottom: var(--op-space-44) !important;
}

.pb-48 {
  padding-bottom: var(--op-space-48) !important;
}

.pb-52 {
  padding-bottom: var(--op-space-52) !important;
}

.pb-56 {
  padding-bottom: var(--op-space-56) !important;
}

.pb-60 {
  padding-bottom: var(--op-space-60) !important;
}

.pb-64 {
  padding-bottom: var(--op-space-64) !important;
}

.pb-72 {
  padding-bottom: var(--op-space-72) !important;
}

.pb-80 {
  padding-bottom: var(--op-space-80) !important;
}

.pb-96 {
  padding-bottom: var(--op-space-96) !important;
}

.pb-2xs {
  padding-bottom: var(--op-space-2xs) !important;
}

.pb-xs {
  padding-bottom: var(--op-space-xs) !important;
}

.pb-sm {
  padding-bottom: var(--op-space-sm) !important;
}

.pb-md {
  padding-bottom: var(--op-space-md) !important;
}

.pb-lg {
  padding-bottom: var(--op-space-lg) !important;
}

.pb-xl {
  padding-bottom: var(--op-space-xl) !important;
}

.pb-2xl {
  padding-bottom: var(--op-space-2xl) !important;
}

.pb-3xl {
  padding-bottom: var(--op-space-3xl) !important;
}

.pb-4xl {
  padding-bottom: var(--op-space-4xl) !important;
}

.pl-px {
  padding-left: var(--op-space-px) !important;
}

.pl-0 {
  padding-left: var(--op-space-0) !important;
}

.pl-0\.5 {
  padding-left: var(--op-space-0-5) !important;
}

.pl-1 {
  padding-left: var(--op-space-1) !important;
}

.pl-1\.5 {
  padding-left: var(--op-space-1-5) !important;
}

.pl-2 {
  padding-left: var(--op-space-2) !important;
}

.pl-2\.5 {
  padding-left: var(--op-space-2-5) !important;
}

.pl-3 {
  padding-left: var(--op-space-3) !important;
}

.pl-3\.5 {
  padding-left: var(--op-space-3-5) !important;
}

.pl-4 {
  padding-left: var(--op-space-4) !important;
}

.pl-5 {
  padding-left: var(--op-space-5) !important;
}

.pl-6 {
  padding-left: var(--op-space-6) !important;
}

.pl-7 {
  padding-left: var(--op-space-7) !important;
}

.pl-8 {
  padding-left: var(--op-space-8) !important;
}

.pl-9 {
  padding-left: var(--op-space-9) !important;
}

.pl-10 {
  padding-left: var(--op-space-10) !important;
}

.pl-11 {
  padding-left: var(--op-space-11) !important;
}

.pl-12 {
  padding-left: var(--op-space-12) !important;
}

.pl-14 {
  padding-left: var(--op-space-14) !important;
}

.pl-16 {
  padding-left: var(--op-space-16) !important;
}

.pl-20 {
  padding-left: var(--op-space-20) !important;
}

.pl-24 {
  padding-left: var(--op-space-24) !important;
}

.pl-28 {
  padding-left: var(--op-space-28) !important;
}

.pl-32 {
  padding-left: var(--op-space-32) !important;
}

.pl-36 {
  padding-left: var(--op-space-36) !important;
}

.pl-40 {
  padding-left: var(--op-space-40) !important;
}

.pl-44 {
  padding-left: var(--op-space-44) !important;
}

.pl-48 {
  padding-left: var(--op-space-48) !important;
}

.pl-52 {
  padding-left: var(--op-space-52) !important;
}

.pl-56 {
  padding-left: var(--op-space-56) !important;
}

.pl-60 {
  padding-left: var(--op-space-60) !important;
}

.pl-64 {
  padding-left: var(--op-space-64) !important;
}

.pl-72 {
  padding-left: var(--op-space-72) !important;
}

.pl-80 {
  padding-left: var(--op-space-80) !important;
}

.pl-96 {
  padding-left: var(--op-space-96) !important;
}

.pl-2xs {
  padding-left: var(--op-space-2xs) !important;
}

.pl-xs {
  padding-left: var(--op-space-xs) !important;
}

.pl-sm {
  padding-left: var(--op-space-sm) !important;
}

.pl-md {
  padding-left: var(--op-space-md) !important;
}

.pl-lg {
  padding-left: var(--op-space-lg) !important;
}

.pl-xl {
  padding-left: var(--op-space-xl) !important;
}

.pl-2xl {
  padding-left: var(--op-space-2xl) !important;
}

.pl-3xl {
  padding-left: var(--op-space-3xl) !important;
}

.pl-4xl {
  padding-left: var(--op-space-4xl) !important;
}

.gap-px {
  gap: var(--op-space-px) !important;
}

.gap-0 {
  gap: var(--op-space-0) !important;
}

.gap-0\.5 {
  gap: var(--op-space-0-5) !important;
}

.gap-1 {
  gap: var(--op-space-1) !important;
}

.gap-1\.5 {
  gap: var(--op-space-1-5) !important;
}

.gap-2 {
  gap: var(--op-space-2) !important;
}

.gap-2\.5 {
  gap: var(--op-space-2-5) !important;
}

.gap-3 {
  gap: var(--op-space-3) !important;
}

.gap-3\.5 {
  gap: var(--op-space-3-5) !important;
}

.gap-4 {
  gap: var(--op-space-4) !important;
}

.gap-5 {
  gap: var(--op-space-5) !important;
}

.gap-6 {
  gap: var(--op-space-6) !important;
}

.gap-7 {
  gap: var(--op-space-7) !important;
}

.gap-8 {
  gap: var(--op-space-8) !important;
}

.gap-9 {
  gap: var(--op-space-9) !important;
}

.gap-10 {
  gap: var(--op-space-10) !important;
}

.gap-11 {
  gap: var(--op-space-11) !important;
}

.gap-12 {
  gap: var(--op-space-12) !important;
}

.gap-14 {
  gap: var(--op-space-14) !important;
}

.gap-16 {
  gap: var(--op-space-16) !important;
}

.gap-20 {
  gap: var(--op-space-20) !important;
}

.gap-24 {
  gap: var(--op-space-24) !important;
}

.gap-28 {
  gap: var(--op-space-28) !important;
}

.gap-32 {
  gap: var(--op-space-32) !important;
}

.gap-36 {
  gap: var(--op-space-36) !important;
}

.gap-40 {
  gap: var(--op-space-40) !important;
}

.gap-44 {
  gap: var(--op-space-44) !important;
}

.gap-48 {
  gap: var(--op-space-48) !important;
}

.gap-52 {
  gap: var(--op-space-52) !important;
}

.gap-56 {
  gap: var(--op-space-56) !important;
}

.gap-60 {
  gap: var(--op-space-60) !important;
}

.gap-64 {
  gap: var(--op-space-64) !important;
}

.gap-72 {
  gap: var(--op-space-72) !important;
}

.gap-80 {
  gap: var(--op-space-80) !important;
}

.gap-96 {
  gap: var(--op-space-96) !important;
}

.gap-2xs {
  gap: var(--op-space-2xs) !important;
}

.gap-xs {
  gap: var(--op-space-xs) !important;
}

.gap-sm {
  gap: var(--op-space-sm) !important;
}

.gap-md {
  gap: var(--op-space-md) !important;
}

.gap-lg {
  gap: var(--op-space-lg) !important;
}

.gap-xl {
  gap: var(--op-space-xl) !important;
}

.gap-2xl {
  gap: var(--op-space-2xl) !important;
}

.gap-3xl {
  gap: var(--op-space-3xl) !important;
}

.gap-4xl {
  gap: var(--op-space-4xl) !important;
}

.gap-x-px {
  column-gap: var(--op-space-px) !important;
}

.gap-x-0 {
  column-gap: var(--op-space-0) !important;
}

.gap-x-0\.5 {
  column-gap: var(--op-space-0-5) !important;
}

.gap-x-1 {
  column-gap: var(--op-space-1) !important;
}

.gap-x-1\.5 {
  column-gap: var(--op-space-1-5) !important;
}

.gap-x-2 {
  column-gap: var(--op-space-2) !important;
}

.gap-x-2\.5 {
  column-gap: var(--op-space-2-5) !important;
}

.gap-x-3 {
  column-gap: var(--op-space-3) !important;
}

.gap-x-3\.5 {
  column-gap: var(--op-space-3-5) !important;
}

.gap-x-4 {
  column-gap: var(--op-space-4) !important;
}

.gap-x-5 {
  column-gap: var(--op-space-5) !important;
}

.gap-x-6 {
  column-gap: var(--op-space-6) !important;
}

.gap-x-7 {
  column-gap: var(--op-space-7) !important;
}

.gap-x-8 {
  column-gap: var(--op-space-8) !important;
}

.gap-x-9 {
  column-gap: var(--op-space-9) !important;
}

.gap-x-10 {
  column-gap: var(--op-space-10) !important;
}

.gap-x-11 {
  column-gap: var(--op-space-11) !important;
}

.gap-x-12 {
  column-gap: var(--op-space-12) !important;
}

.gap-x-14 {
  column-gap: var(--op-space-14) !important;
}

.gap-x-16 {
  column-gap: var(--op-space-16) !important;
}

.gap-x-20 {
  column-gap: var(--op-space-20) !important;
}

.gap-x-24 {
  column-gap: var(--op-space-24) !important;
}

.gap-x-28 {
  column-gap: var(--op-space-28) !important;
}

.gap-x-32 {
  column-gap: var(--op-space-32) !important;
}

.gap-x-36 {
  column-gap: var(--op-space-36) !important;
}

.gap-x-40 {
  column-gap: var(--op-space-40) !important;
}

.gap-x-44 {
  column-gap: var(--op-space-44) !important;
}

.gap-x-48 {
  column-gap: var(--op-space-48) !important;
}

.gap-x-52 {
  column-gap: var(--op-space-52) !important;
}

.gap-x-56 {
  column-gap: var(--op-space-56) !important;
}

.gap-x-60 {
  column-gap: var(--op-space-60) !important;
}

.gap-x-64 {
  column-gap: var(--op-space-64) !important;
}

.gap-x-72 {
  column-gap: var(--op-space-72) !important;
}

.gap-x-80 {
  column-gap: var(--op-space-80) !important;
}

.gap-x-96 {
  column-gap: var(--op-space-96) !important;
}

.gap-x-2xs {
  column-gap: var(--op-space-2xs) !important;
}

.gap-x-xs {
  column-gap: var(--op-space-xs) !important;
}

.gap-x-sm {
  column-gap: var(--op-space-sm) !important;
}

.gap-x-md {
  column-gap: var(--op-space-md) !important;
}

.gap-x-lg {
  column-gap: var(--op-space-lg) !important;
}

.gap-x-xl {
  column-gap: var(--op-space-xl) !important;
}

.gap-x-2xl {
  column-gap: var(--op-space-2xl) !important;
}

.gap-x-3xl {
  column-gap: var(--op-space-3xl) !important;
}

.gap-x-4xl {
  column-gap: var(--op-space-4xl) !important;
}

.gap-y-px {
  row-gap: var(--op-space-px) !important;
}

.gap-y-0 {
  row-gap: var(--op-space-0) !important;
}

.gap-y-0\.5 {
  row-gap: var(--op-space-0-5) !important;
}

.gap-y-1 {
  row-gap: var(--op-space-1) !important;
}

.gap-y-1\.5 {
  row-gap: var(--op-space-1-5) !important;
}

.gap-y-2 {
  row-gap: var(--op-space-2) !important;
}

.gap-y-2\.5 {
  row-gap: var(--op-space-2-5) !important;
}

.gap-y-3 {
  row-gap: var(--op-space-3) !important;
}

.gap-y-3\.5 {
  row-gap: var(--op-space-3-5) !important;
}

.gap-y-4 {
  row-gap: var(--op-space-4) !important;
}

.gap-y-5 {
  row-gap: var(--op-space-5) !important;
}

.gap-y-6 {
  row-gap: var(--op-space-6) !important;
}

.gap-y-7 {
  row-gap: var(--op-space-7) !important;
}

.gap-y-8 {
  row-gap: var(--op-space-8) !important;
}

.gap-y-9 {
  row-gap: var(--op-space-9) !important;
}

.gap-y-10 {
  row-gap: var(--op-space-10) !important;
}

.gap-y-11 {
  row-gap: var(--op-space-11) !important;
}

.gap-y-12 {
  row-gap: var(--op-space-12) !important;
}

.gap-y-14 {
  row-gap: var(--op-space-14) !important;
}

.gap-y-16 {
  row-gap: var(--op-space-16) !important;
}

.gap-y-20 {
  row-gap: var(--op-space-20) !important;
}

.gap-y-24 {
  row-gap: var(--op-space-24) !important;
}

.gap-y-28 {
  row-gap: var(--op-space-28) !important;
}

.gap-y-32 {
  row-gap: var(--op-space-32) !important;
}

.gap-y-36 {
  row-gap: var(--op-space-36) !important;
}

.gap-y-40 {
  row-gap: var(--op-space-40) !important;
}

.gap-y-44 {
  row-gap: var(--op-space-44) !important;
}

.gap-y-48 {
  row-gap: var(--op-space-48) !important;
}

.gap-y-52 {
  row-gap: var(--op-space-52) !important;
}

.gap-y-56 {
  row-gap: var(--op-space-56) !important;
}

.gap-y-60 {
  row-gap: var(--op-space-60) !important;
}

.gap-y-64 {
  row-gap: var(--op-space-64) !important;
}

.gap-y-72 {
  row-gap: var(--op-space-72) !important;
}

.gap-y-80 {
  row-gap: var(--op-space-80) !important;
}

.gap-y-96 {
  row-gap: var(--op-space-96) !important;
}

.gap-y-2xs {
  row-gap: var(--op-space-2xs) !important;
}

.gap-y-xs {
  row-gap: var(--op-space-xs) !important;
}

.gap-y-sm {
  row-gap: var(--op-space-sm) !important;
}

.gap-y-md {
  row-gap: var(--op-space-md) !important;
}

.gap-y-lg {
  row-gap: var(--op-space-lg) !important;
}

.gap-y-xl {
  row-gap: var(--op-space-xl) !important;
}

.gap-y-2xl {
  row-gap: var(--op-space-2xl) !important;
}

.gap-y-3xl {
  row-gap: var(--op-space-3xl) !important;
}

.gap-y-4xl {
  row-gap: var(--op-space-4xl) !important;
}

.inset-px {
  inset: var(--op-space-px) !important;
}

.inset-0 {
  inset: var(--op-space-0) !important;
}

.inset-0\.5 {
  inset: var(--op-space-0-5) !important;
}

.inset-1 {
  inset: var(--op-space-1) !important;
}

.inset-1\.5 {
  inset: var(--op-space-1-5) !important;
}

.inset-2 {
  inset: var(--op-space-2) !important;
}

.inset-2\.5 {
  inset: var(--op-space-2-5) !important;
}

.inset-3 {
  inset: var(--op-space-3) !important;
}

.inset-3\.5 {
  inset: var(--op-space-3-5) !important;
}

.inset-4 {
  inset: var(--op-space-4) !important;
}

.inset-5 {
  inset: var(--op-space-5) !important;
}

.inset-6 {
  inset: var(--op-space-6) !important;
}

.inset-7 {
  inset: var(--op-space-7) !important;
}

.inset-8 {
  inset: var(--op-space-8) !important;
}

.inset-9 {
  inset: var(--op-space-9) !important;
}

.inset-10 {
  inset: var(--op-space-10) !important;
}

.inset-11 {
  inset: var(--op-space-11) !important;
}

.inset-12 {
  inset: var(--op-space-12) !important;
}

.inset-14 {
  inset: var(--op-space-14) !important;
}

.inset-16 {
  inset: var(--op-space-16) !important;
}

.inset-20 {
  inset: var(--op-space-20) !important;
}

.inset-24 {
  inset: var(--op-space-24) !important;
}

.inset-28 {
  inset: var(--op-space-28) !important;
}

.inset-32 {
  inset: var(--op-space-32) !important;
}

.inset-36 {
  inset: var(--op-space-36) !important;
}

.inset-40 {
  inset: var(--op-space-40) !important;
}

.inset-44 {
  inset: var(--op-space-44) !important;
}

.inset-48 {
  inset: var(--op-space-48) !important;
}

.inset-52 {
  inset: var(--op-space-52) !important;
}

.inset-56 {
  inset: var(--op-space-56) !important;
}

.inset-60 {
  inset: var(--op-space-60) !important;
}

.inset-64 {
  inset: var(--op-space-64) !important;
}

.inset-72 {
  inset: var(--op-space-72) !important;
}

.inset-80 {
  inset: var(--op-space-80) !important;
}

.inset-96 {
  inset: var(--op-space-96) !important;
}

.inset-2xs {
  inset: var(--op-space-2xs) !important;
}

.inset-xs {
  inset: var(--op-space-xs) !important;
}

.inset-sm {
  inset: var(--op-space-sm) !important;
}

.inset-md {
  inset: var(--op-space-md) !important;
}

.inset-lg {
  inset: var(--op-space-lg) !important;
}

.inset-xl {
  inset: var(--op-space-xl) !important;
}

.inset-2xl {
  inset: var(--op-space-2xl) !important;
}

.inset-3xl {
  inset: var(--op-space-3xl) !important;
}

.inset-4xl {
  inset: var(--op-space-4xl) !important;
}

.inset-x-px {
  inset-inline: var(--op-space-px) !important;
}

.inset-x-0 {
  inset-inline: var(--op-space-0) !important;
}

.inset-x-0\.5 {
  inset-inline: var(--op-space-0-5) !important;
}

.inset-x-1 {
  inset-inline: var(--op-space-1) !important;
}

.inset-x-1\.5 {
  inset-inline: var(--op-space-1-5) !important;
}

.inset-x-2 {
  inset-inline: var(--op-space-2) !important;
}

.inset-x-2\.5 {
  inset-inline: var(--op-space-2-5) !important;
}

.inset-x-3 {
  inset-inline: var(--op-space-3) !important;
}

.inset-x-3\.5 {
  inset-inline: var(--op-space-3-5) !important;
}

.inset-x-4 {
  inset-inline: var(--op-space-4) !important;
}

.inset-x-5 {
  inset-inline: var(--op-space-5) !important;
}

.inset-x-6 {
  inset-inline: var(--op-space-6) !important;
}

.inset-x-7 {
  inset-inline: var(--op-space-7) !important;
}

.inset-x-8 {
  inset-inline: var(--op-space-8) !important;
}

.inset-x-9 {
  inset-inline: var(--op-space-9) !important;
}

.inset-x-10 {
  inset-inline: var(--op-space-10) !important;
}

.inset-x-11 {
  inset-inline: var(--op-space-11) !important;
}

.inset-x-12 {
  inset-inline: var(--op-space-12) !important;
}

.inset-x-14 {
  inset-inline: var(--op-space-14) !important;
}

.inset-x-16 {
  inset-inline: var(--op-space-16) !important;
}

.inset-x-20 {
  inset-inline: var(--op-space-20) !important;
}

.inset-x-24 {
  inset-inline: var(--op-space-24) !important;
}

.inset-x-28 {
  inset-inline: var(--op-space-28) !important;
}

.inset-x-32 {
  inset-inline: var(--op-space-32) !important;
}

.inset-x-36 {
  inset-inline: var(--op-space-36) !important;
}

.inset-x-40 {
  inset-inline: var(--op-space-40) !important;
}

.inset-x-44 {
  inset-inline: var(--op-space-44) !important;
}

.inset-x-48 {
  inset-inline: var(--op-space-48) !important;
}

.inset-x-52 {
  inset-inline: var(--op-space-52) !important;
}

.inset-x-56 {
  inset-inline: var(--op-space-56) !important;
}

.inset-x-60 {
  inset-inline: var(--op-space-60) !important;
}

.inset-x-64 {
  inset-inline: var(--op-space-64) !important;
}

.inset-x-72 {
  inset-inline: var(--op-space-72) !important;
}

.inset-x-80 {
  inset-inline: var(--op-space-80) !important;
}

.inset-x-96 {
  inset-inline: var(--op-space-96) !important;
}

.inset-x-2xs {
  inset-inline: var(--op-space-2xs) !important;
}

.inset-x-xs {
  inset-inline: var(--op-space-xs) !important;
}

.inset-x-sm {
  inset-inline: var(--op-space-sm) !important;
}

.inset-x-md {
  inset-inline: var(--op-space-md) !important;
}

.inset-x-lg {
  inset-inline: var(--op-space-lg) !important;
}

.inset-x-xl {
  inset-inline: var(--op-space-xl) !important;
}

.inset-x-2xl {
  inset-inline: var(--op-space-2xl) !important;
}

.inset-x-3xl {
  inset-inline: var(--op-space-3xl) !important;
}

.inset-x-4xl {
  inset-inline: var(--op-space-4xl) !important;
}

.inset-y-px {
  inset-block: var(--op-space-px) !important;
}

.inset-y-0 {
  inset-block: var(--op-space-0) !important;
}

.inset-y-0\.5 {
  inset-block: var(--op-space-0-5) !important;
}

.inset-y-1 {
  inset-block: var(--op-space-1) !important;
}

.inset-y-1\.5 {
  inset-block: var(--op-space-1-5) !important;
}

.inset-y-2 {
  inset-block: var(--op-space-2) !important;
}

.inset-y-2\.5 {
  inset-block: var(--op-space-2-5) !important;
}

.inset-y-3 {
  inset-block: var(--op-space-3) !important;
}

.inset-y-3\.5 {
  inset-block: var(--op-space-3-5) !important;
}

.inset-y-4 {
  inset-block: var(--op-space-4) !important;
}

.inset-y-5 {
  inset-block: var(--op-space-5) !important;
}

.inset-y-6 {
  inset-block: var(--op-space-6) !important;
}

.inset-y-7 {
  inset-block: var(--op-space-7) !important;
}

.inset-y-8 {
  inset-block: var(--op-space-8) !important;
}

.inset-y-9 {
  inset-block: var(--op-space-9) !important;
}

.inset-y-10 {
  inset-block: var(--op-space-10) !important;
}

.inset-y-11 {
  inset-block: var(--op-space-11) !important;
}

.inset-y-12 {
  inset-block: var(--op-space-12) !important;
}

.inset-y-14 {
  inset-block: var(--op-space-14) !important;
}

.inset-y-16 {
  inset-block: var(--op-space-16) !important;
}

.inset-y-20 {
  inset-block: var(--op-space-20) !important;
}

.inset-y-24 {
  inset-block: var(--op-space-24) !important;
}

.inset-y-28 {
  inset-block: var(--op-space-28) !important;
}

.inset-y-32 {
  inset-block: var(--op-space-32) !important;
}

.inset-y-36 {
  inset-block: var(--op-space-36) !important;
}

.inset-y-40 {
  inset-block: var(--op-space-40) !important;
}

.inset-y-44 {
  inset-block: var(--op-space-44) !important;
}

.inset-y-48 {
  inset-block: var(--op-space-48) !important;
}

.inset-y-52 {
  inset-block: var(--op-space-52) !important;
}

.inset-y-56 {
  inset-block: var(--op-space-56) !important;
}

.inset-y-60 {
  inset-block: var(--op-space-60) !important;
}

.inset-y-64 {
  inset-block: var(--op-space-64) !important;
}

.inset-y-72 {
  inset-block: var(--op-space-72) !important;
}

.inset-y-80 {
  inset-block: var(--op-space-80) !important;
}

.inset-y-96 {
  inset-block: var(--op-space-96) !important;
}

.inset-y-2xs {
  inset-block: var(--op-space-2xs) !important;
}

.inset-y-xs {
  inset-block: var(--op-space-xs) !important;
}

.inset-y-sm {
  inset-block: var(--op-space-sm) !important;
}

.inset-y-md {
  inset-block: var(--op-space-md) !important;
}

.inset-y-lg {
  inset-block: var(--op-space-lg) !important;
}

.inset-y-xl {
  inset-block: var(--op-space-xl) !important;
}

.inset-y-2xl {
  inset-block: var(--op-space-2xl) !important;
}

.inset-y-3xl {
  inset-block: var(--op-space-3xl) !important;
}

.inset-y-4xl {
  inset-block: var(--op-space-4xl) !important;
}

.start-px {
  inset-inline-start: var(--op-space-px) !important;
}

.start-0 {
  inset-inline-start: var(--op-space-0) !important;
}

.start-0\.5 {
  inset-inline-start: var(--op-space-0-5) !important;
}

.start-1 {
  inset-inline-start: var(--op-space-1) !important;
}

.start-1\.5 {
  inset-inline-start: var(--op-space-1-5) !important;
}

.start-2 {
  inset-inline-start: var(--op-space-2) !important;
}

.start-2\.5 {
  inset-inline-start: var(--op-space-2-5) !important;
}

.start-3 {
  inset-inline-start: var(--op-space-3) !important;
}

.start-3\.5 {
  inset-inline-start: var(--op-space-3-5) !important;
}

.start-4 {
  inset-inline-start: var(--op-space-4) !important;
}

.start-5 {
  inset-inline-start: var(--op-space-5) !important;
}

.start-6 {
  inset-inline-start: var(--op-space-6) !important;
}

.start-7 {
  inset-inline-start: var(--op-space-7) !important;
}

.start-8 {
  inset-inline-start: var(--op-space-8) !important;
}

.start-9 {
  inset-inline-start: var(--op-space-9) !important;
}

.start-10 {
  inset-inline-start: var(--op-space-10) !important;
}

.start-11 {
  inset-inline-start: var(--op-space-11) !important;
}

.start-12 {
  inset-inline-start: var(--op-space-12) !important;
}

.start-14 {
  inset-inline-start: var(--op-space-14) !important;
}

.start-16 {
  inset-inline-start: var(--op-space-16) !important;
}

.start-20 {
  inset-inline-start: var(--op-space-20) !important;
}

.start-24 {
  inset-inline-start: var(--op-space-24) !important;
}

.start-28 {
  inset-inline-start: var(--op-space-28) !important;
}

.start-32 {
  inset-inline-start: var(--op-space-32) !important;
}

.start-36 {
  inset-inline-start: var(--op-space-36) !important;
}

.start-40 {
  inset-inline-start: var(--op-space-40) !important;
}

.start-44 {
  inset-inline-start: var(--op-space-44) !important;
}

.start-48 {
  inset-inline-start: var(--op-space-48) !important;
}

.start-52 {
  inset-inline-start: var(--op-space-52) !important;
}

.start-56 {
  inset-inline-start: var(--op-space-56) !important;
}

.start-60 {
  inset-inline-start: var(--op-space-60) !important;
}

.start-64 {
  inset-inline-start: var(--op-space-64) !important;
}

.start-72 {
  inset-inline-start: var(--op-space-72) !important;
}

.start-80 {
  inset-inline-start: var(--op-space-80) !important;
}

.start-96 {
  inset-inline-start: var(--op-space-96) !important;
}

.start-2xs {
  inset-inline-start: var(--op-space-2xs) !important;
}

.start-xs {
  inset-inline-start: var(--op-space-xs) !important;
}

.start-sm {
  inset-inline-start: var(--op-space-sm) !important;
}

.start-md {
  inset-inline-start: var(--op-space-md) !important;
}

.start-lg {
  inset-inline-start: var(--op-space-lg) !important;
}

.start-xl {
  inset-inline-start: var(--op-space-xl) !important;
}

.start-2xl {
  inset-inline-start: var(--op-space-2xl) !important;
}

.start-3xl {
  inset-inline-start: var(--op-space-3xl) !important;
}

.start-4xl {
  inset-inline-start: var(--op-space-4xl) !important;
}

.end-px {
  inset-inline-end: var(--op-space-px) !important;
}

.end-0 {
  inset-inline-end: var(--op-space-0) !important;
}

.end-0\.5 {
  inset-inline-end: var(--op-space-0-5) !important;
}

.end-1 {
  inset-inline-end: var(--op-space-1) !important;
}

.end-1\.5 {
  inset-inline-end: var(--op-space-1-5) !important;
}

.end-2 {
  inset-inline-end: var(--op-space-2) !important;
}

.end-2\.5 {
  inset-inline-end: var(--op-space-2-5) !important;
}

.end-3 {
  inset-inline-end: var(--op-space-3) !important;
}

.end-3\.5 {
  inset-inline-end: var(--op-space-3-5) !important;
}

.end-4 {
  inset-inline-end: var(--op-space-4) !important;
}

.end-5 {
  inset-inline-end: var(--op-space-5) !important;
}

.end-6 {
  inset-inline-end: var(--op-space-6) !important;
}

.end-7 {
  inset-inline-end: var(--op-space-7) !important;
}

.end-8 {
  inset-inline-end: var(--op-space-8) !important;
}

.end-9 {
  inset-inline-end: var(--op-space-9) !important;
}

.end-10 {
  inset-inline-end: var(--op-space-10) !important;
}

.end-11 {
  inset-inline-end: var(--op-space-11) !important;
}

.end-12 {
  inset-inline-end: var(--op-space-12) !important;
}

.end-14 {
  inset-inline-end: var(--op-space-14) !important;
}

.end-16 {
  inset-inline-end: var(--op-space-16) !important;
}

.end-20 {
  inset-inline-end: var(--op-space-20) !important;
}

.end-24 {
  inset-inline-end: var(--op-space-24) !important;
}

.end-28 {
  inset-inline-end: var(--op-space-28) !important;
}

.end-32 {
  inset-inline-end: var(--op-space-32) !important;
}

.end-36 {
  inset-inline-end: var(--op-space-36) !important;
}

.end-40 {
  inset-inline-end: var(--op-space-40) !important;
}

.end-44 {
  inset-inline-end: var(--op-space-44) !important;
}

.end-48 {
  inset-inline-end: var(--op-space-48) !important;
}

.end-52 {
  inset-inline-end: var(--op-space-52) !important;
}

.end-56 {
  inset-inline-end: var(--op-space-56) !important;
}

.end-60 {
  inset-inline-end: var(--op-space-60) !important;
}

.end-64 {
  inset-inline-end: var(--op-space-64) !important;
}

.end-72 {
  inset-inline-end: var(--op-space-72) !important;
}

.end-80 {
  inset-inline-end: var(--op-space-80) !important;
}

.end-96 {
  inset-inline-end: var(--op-space-96) !important;
}

.end-2xs {
  inset-inline-end: var(--op-space-2xs) !important;
}

.end-xs {
  inset-inline-end: var(--op-space-xs) !important;
}

.end-sm {
  inset-inline-end: var(--op-space-sm) !important;
}

.end-md {
  inset-inline-end: var(--op-space-md) !important;
}

.end-lg {
  inset-inline-end: var(--op-space-lg) !important;
}

.end-xl {
  inset-inline-end: var(--op-space-xl) !important;
}

.end-2xl {
  inset-inline-end: var(--op-space-2xl) !important;
}

.end-3xl {
  inset-inline-end: var(--op-space-3xl) !important;
}

.end-4xl {
  inset-inline-end: var(--op-space-4xl) !important;
}

.top-px {
  top: var(--op-space-px) !important;
}

.top-0 {
  top: var(--op-space-0) !important;
}

.top-0\.5 {
  top: var(--op-space-0-5) !important;
}

.top-1 {
  top: var(--op-space-1) !important;
}

.top-1\.5 {
  top: var(--op-space-1-5) !important;
}

.top-2 {
  top: var(--op-space-2) !important;
}

.top-2\.5 {
  top: var(--op-space-2-5) !important;
}

.top-3 {
  top: var(--op-space-3) !important;
}

.top-3\.5 {
  top: var(--op-space-3-5) !important;
}

.top-4 {
  top: var(--op-space-4) !important;
}

.top-5 {
  top: var(--op-space-5) !important;
}

.top-6 {
  top: var(--op-space-6) !important;
}

.top-7 {
  top: var(--op-space-7) !important;
}

.top-8 {
  top: var(--op-space-8) !important;
}

.top-9 {
  top: var(--op-space-9) !important;
}

.top-10 {
  top: var(--op-space-10) !important;
}

.top-11 {
  top: var(--op-space-11) !important;
}

.top-12 {
  top: var(--op-space-12) !important;
}

.top-14 {
  top: var(--op-space-14) !important;
}

.top-16 {
  top: var(--op-space-16) !important;
}

.top-20 {
  top: var(--op-space-20) !important;
}

.top-24 {
  top: var(--op-space-24) !important;
}

.top-28 {
  top: var(--op-space-28) !important;
}

.top-32 {
  top: var(--op-space-32) !important;
}

.top-36 {
  top: var(--op-space-36) !important;
}

.top-40 {
  top: var(--op-space-40) !important;
}

.top-44 {
  top: var(--op-space-44) !important;
}

.top-48 {
  top: var(--op-space-48) !important;
}

.top-52 {
  top: var(--op-space-52) !important;
}

.top-56 {
  top: var(--op-space-56) !important;
}

.top-60 {
  top: var(--op-space-60) !important;
}

.top-64 {
  top: var(--op-space-64) !important;
}

.top-72 {
  top: var(--op-space-72) !important;
}

.top-80 {
  top: var(--op-space-80) !important;
}

.top-96 {
  top: var(--op-space-96) !important;
}

.top-2xs {
  top: var(--op-space-2xs) !important;
}

.top-xs {
  top: var(--op-space-xs) !important;
}

.top-sm {
  top: var(--op-space-sm) !important;
}

.top-md {
  top: var(--op-space-md) !important;
}

.top-lg {
  top: var(--op-space-lg) !important;
}

.top-xl {
  top: var(--op-space-xl) !important;
}

.top-2xl {
  top: var(--op-space-2xl) !important;
}

.top-3xl {
  top: var(--op-space-3xl) !important;
}

.top-4xl {
  top: var(--op-space-4xl) !important;
}

.right-px {
  right: var(--op-space-px) !important;
}

.right-0 {
  right: var(--op-space-0) !important;
}

.right-0\.5 {
  right: var(--op-space-0-5) !important;
}

.right-1 {
  right: var(--op-space-1) !important;
}

.right-1\.5 {
  right: var(--op-space-1-5) !important;
}

.right-2 {
  right: var(--op-space-2) !important;
}

.right-2\.5 {
  right: var(--op-space-2-5) !important;
}

.right-3 {
  right: var(--op-space-3) !important;
}

.right-3\.5 {
  right: var(--op-space-3-5) !important;
}

.right-4 {
  right: var(--op-space-4) !important;
}

.right-5 {
  right: var(--op-space-5) !important;
}

.right-6 {
  right: var(--op-space-6) !important;
}

.right-7 {
  right: var(--op-space-7) !important;
}

.right-8 {
  right: var(--op-space-8) !important;
}

.right-9 {
  right: var(--op-space-9) !important;
}

.right-10 {
  right: var(--op-space-10) !important;
}

.right-11 {
  right: var(--op-space-11) !important;
}

.right-12 {
  right: var(--op-space-12) !important;
}

.right-14 {
  right: var(--op-space-14) !important;
}

.right-16 {
  right: var(--op-space-16) !important;
}

.right-20 {
  right: var(--op-space-20) !important;
}

.right-24 {
  right: var(--op-space-24) !important;
}

.right-28 {
  right: var(--op-space-28) !important;
}

.right-32 {
  right: var(--op-space-32) !important;
}

.right-36 {
  right: var(--op-space-36) !important;
}

.right-40 {
  right: var(--op-space-40) !important;
}

.right-44 {
  right: var(--op-space-44) !important;
}

.right-48 {
  right: var(--op-space-48) !important;
}

.right-52 {
  right: var(--op-space-52) !important;
}

.right-56 {
  right: var(--op-space-56) !important;
}

.right-60 {
  right: var(--op-space-60) !important;
}

.right-64 {
  right: var(--op-space-64) !important;
}

.right-72 {
  right: var(--op-space-72) !important;
}

.right-80 {
  right: var(--op-space-80) !important;
}

.right-96 {
  right: var(--op-space-96) !important;
}

.right-2xs {
  right: var(--op-space-2xs) !important;
}

.right-xs {
  right: var(--op-space-xs) !important;
}

.right-sm {
  right: var(--op-space-sm) !important;
}

.right-md {
  right: var(--op-space-md) !important;
}

.right-lg {
  right: var(--op-space-lg) !important;
}

.right-xl {
  right: var(--op-space-xl) !important;
}

.right-2xl {
  right: var(--op-space-2xl) !important;
}

.right-3xl {
  right: var(--op-space-3xl) !important;
}

.right-4xl {
  right: var(--op-space-4xl) !important;
}

.bottom-px {
  bottom: var(--op-space-px) !important;
}

.bottom-0 {
  bottom: var(--op-space-0) !important;
}

.bottom-0\.5 {
  bottom: var(--op-space-0-5) !important;
}

.bottom-1 {
  bottom: var(--op-space-1) !important;
}

.bottom-1\.5 {
  bottom: var(--op-space-1-5) !important;
}

.bottom-2 {
  bottom: var(--op-space-2) !important;
}

.bottom-2\.5 {
  bottom: var(--op-space-2-5) !important;
}

.bottom-3 {
  bottom: var(--op-space-3) !important;
}

.bottom-3\.5 {
  bottom: var(--op-space-3-5) !important;
}

.bottom-4 {
  bottom: var(--op-space-4) !important;
}

.bottom-5 {
  bottom: var(--op-space-5) !important;
}

.bottom-6 {
  bottom: var(--op-space-6) !important;
}

.bottom-7 {
  bottom: var(--op-space-7) !important;
}

.bottom-8 {
  bottom: var(--op-space-8) !important;
}

.bottom-9 {
  bottom: var(--op-space-9) !important;
}

.bottom-10 {
  bottom: var(--op-space-10) !important;
}

.bottom-11 {
  bottom: var(--op-space-11) !important;
}

.bottom-12 {
  bottom: var(--op-space-12) !important;
}

.bottom-14 {
  bottom: var(--op-space-14) !important;
}

.bottom-16 {
  bottom: var(--op-space-16) !important;
}

.bottom-20 {
  bottom: var(--op-space-20) !important;
}

.bottom-24 {
  bottom: var(--op-space-24) !important;
}

.bottom-28 {
  bottom: var(--op-space-28) !important;
}

.bottom-32 {
  bottom: var(--op-space-32) !important;
}

.bottom-36 {
  bottom: var(--op-space-36) !important;
}

.bottom-40 {
  bottom: var(--op-space-40) !important;
}

.bottom-44 {
  bottom: var(--op-space-44) !important;
}

.bottom-48 {
  bottom: var(--op-space-48) !important;
}

.bottom-52 {
  bottom: var(--op-space-52) !important;
}

.bottom-56 {
  bottom: var(--op-space-56) !important;
}

.bottom-60 {
  bottom: var(--op-space-60) !important;
}

.bottom-64 {
  bottom: var(--op-space-64) !important;
}

.bottom-72 {
  bottom: var(--op-space-72) !important;
}

.bottom-80 {
  bottom: var(--op-space-80) !important;
}

.bottom-96 {
  bottom: var(--op-space-96) !important;
}

.bottom-2xs {
  bottom: var(--op-space-2xs) !important;
}

.bottom-xs {
  bottom: var(--op-space-xs) !important;
}

.bottom-sm {
  bottom: var(--op-space-sm) !important;
}

.bottom-md {
  bottom: var(--op-space-md) !important;
}

.bottom-lg {
  bottom: var(--op-space-lg) !important;
}

.bottom-xl {
  bottom: var(--op-space-xl) !important;
}

.bottom-2xl {
  bottom: var(--op-space-2xl) !important;
}

.bottom-3xl {
  bottom: var(--op-space-3xl) !important;
}

.bottom-4xl {
  bottom: var(--op-space-4xl) !important;
}

.left-px {
  left: var(--op-space-px) !important;
}

.left-0 {
  left: var(--op-space-0) !important;
}

.left-0\.5 {
  left: var(--op-space-0-5) !important;
}

.left-1 {
  left: var(--op-space-1) !important;
}

.left-1\.5 {
  left: var(--op-space-1-5) !important;
}

.left-2 {
  left: var(--op-space-2) !important;
}

.left-2\.5 {
  left: var(--op-space-2-5) !important;
}

.left-3 {
  left: var(--op-space-3) !important;
}

.left-3\.5 {
  left: var(--op-space-3-5) !important;
}

.left-4 {
  left: var(--op-space-4) !important;
}

.left-5 {
  left: var(--op-space-5) !important;
}

.left-6 {
  left: var(--op-space-6) !important;
}

.left-7 {
  left: var(--op-space-7) !important;
}

.left-8 {
  left: var(--op-space-8) !important;
}

.left-9 {
  left: var(--op-space-9) !important;
}

.left-10 {
  left: var(--op-space-10) !important;
}

.left-11 {
  left: var(--op-space-11) !important;
}

.left-12 {
  left: var(--op-space-12) !important;
}

.left-14 {
  left: var(--op-space-14) !important;
}

.left-16 {
  left: var(--op-space-16) !important;
}

.left-20 {
  left: var(--op-space-20) !important;
}

.left-24 {
  left: var(--op-space-24) !important;
}

.left-28 {
  left: var(--op-space-28) !important;
}

.left-32 {
  left: var(--op-space-32) !important;
}

.left-36 {
  left: var(--op-space-36) !important;
}

.left-40 {
  left: var(--op-space-40) !important;
}

.left-44 {
  left: var(--op-space-44) !important;
}

.left-48 {
  left: var(--op-space-48) !important;
}

.left-52 {
  left: var(--op-space-52) !important;
}

.left-56 {
  left: var(--op-space-56) !important;
}

.left-60 {
  left: var(--op-space-60) !important;
}

.left-64 {
  left: var(--op-space-64) !important;
}

.left-72 {
  left: var(--op-space-72) !important;
}

.left-80 {
  left: var(--op-space-80) !important;
}

.left-96 {
  left: var(--op-space-96) !important;
}

.left-2xs {
  left: var(--op-space-2xs) !important;
}

.left-xs {
  left: var(--op-space-xs) !important;
}

.left-sm {
  left: var(--op-space-sm) !important;
}

.left-md {
  left: var(--op-space-md) !important;
}

.left-lg {
  left: var(--op-space-lg) !important;
}

.left-xl {
  left: var(--op-space-xl) !important;
}

.left-2xl {
  left: var(--op-space-2xl) !important;
}

.left-3xl {
  left: var(--op-space-3xl) !important;
}

.left-4xl {
  left: var(--op-space-4xl) !important;
}

.-inset-px {
  inset: calc(-1 * var(--op-space-px)) !important;
}

.-inset-0\.5 {
  inset: calc(-1 * var(--op-space-0-5)) !important;
}

.-inset-1 {
  inset: calc(-1 * var(--op-space-1)) !important;
}

.-inset-1\.5 {
  inset: calc(-1 * var(--op-space-1-5)) !important;
}

.-inset-2 {
  inset: calc(-1 * var(--op-space-2)) !important;
}

.-inset-2\.5 {
  inset: calc(-1 * var(--op-space-2-5)) !important;
}

.-inset-3 {
  inset: calc(-1 * var(--op-space-3)) !important;
}

.-inset-3\.5 {
  inset: calc(-1 * var(--op-space-3-5)) !important;
}

.-inset-4 {
  inset: calc(-1 * var(--op-space-4)) !important;
}

.-inset-5 {
  inset: calc(-1 * var(--op-space-5)) !important;
}

.-inset-6 {
  inset: calc(-1 * var(--op-space-6)) !important;
}

.-inset-7 {
  inset: calc(-1 * var(--op-space-7)) !important;
}

.-inset-8 {
  inset: calc(-1 * var(--op-space-8)) !important;
}

.-inset-9 {
  inset: calc(-1 * var(--op-space-9)) !important;
}

.-inset-10 {
  inset: calc(-1 * var(--op-space-10)) !important;
}

.-inset-11 {
  inset: calc(-1 * var(--op-space-11)) !important;
}

.-inset-12 {
  inset: calc(-1 * var(--op-space-12)) !important;
}

.-inset-14 {
  inset: calc(-1 * var(--op-space-14)) !important;
}

.-inset-16 {
  inset: calc(-1 * var(--op-space-16)) !important;
}

.-inset-20 {
  inset: calc(-1 * var(--op-space-20)) !important;
}

.-inset-24 {
  inset: calc(-1 * var(--op-space-24)) !important;
}

.-inset-28 {
  inset: calc(-1 * var(--op-space-28)) !important;
}

.-inset-32 {
  inset: calc(-1 * var(--op-space-32)) !important;
}

.-inset-36 {
  inset: calc(-1 * var(--op-space-36)) !important;
}

.-inset-40 {
  inset: calc(-1 * var(--op-space-40)) !important;
}

.-inset-44 {
  inset: calc(-1 * var(--op-space-44)) !important;
}

.-inset-48 {
  inset: calc(-1 * var(--op-space-48)) !important;
}

.-inset-52 {
  inset: calc(-1 * var(--op-space-52)) !important;
}

.-inset-56 {
  inset: calc(-1 * var(--op-space-56)) !important;
}

.-inset-60 {
  inset: calc(-1 * var(--op-space-60)) !important;
}

.-inset-64 {
  inset: calc(-1 * var(--op-space-64)) !important;
}

.-inset-72 {
  inset: calc(-1 * var(--op-space-72)) !important;
}

.-inset-80 {
  inset: calc(-1 * var(--op-space-80)) !important;
}

.-inset-96 {
  inset: calc(-1 * var(--op-space-96)) !important;
}

.-inset-2xs {
  inset: calc(-1 * var(--op-space-2xs)) !important;
}

.-inset-xs {
  inset: calc(-1 * var(--op-space-xs)) !important;
}

.-inset-sm {
  inset: calc(-1 * var(--op-space-sm)) !important;
}

.-inset-md {
  inset: calc(-1 * var(--op-space-md)) !important;
}

.-inset-lg {
  inset: calc(-1 * var(--op-space-lg)) !important;
}

.-inset-xl {
  inset: calc(-1 * var(--op-space-xl)) !important;
}

.-inset-2xl {
  inset: calc(-1 * var(--op-space-2xl)) !important;
}

.-inset-3xl {
  inset: calc(-1 * var(--op-space-3xl)) !important;
}

.-inset-4xl {
  inset: calc(-1 * var(--op-space-4xl)) !important;
}

.-inset-x-px {
  inset-inline: calc(-1 * var(--op-space-px)) !important;
}

.-inset-x-0\.5 {
  inset-inline: calc(-1 * var(--op-space-0-5)) !important;
}

.-inset-x-1 {
  inset-inline: calc(-1 * var(--op-space-1)) !important;
}

.-inset-x-1\.5 {
  inset-inline: calc(-1 * var(--op-space-1-5)) !important;
}

.-inset-x-2 {
  inset-inline: calc(-1 * var(--op-space-2)) !important;
}

.-inset-x-2\.5 {
  inset-inline: calc(-1 * var(--op-space-2-5)) !important;
}

.-inset-x-3 {
  inset-inline: calc(-1 * var(--op-space-3)) !important;
}

.-inset-x-3\.5 {
  inset-inline: calc(-1 * var(--op-space-3-5)) !important;
}

.-inset-x-4 {
  inset-inline: calc(-1 * var(--op-space-4)) !important;
}

.-inset-x-5 {
  inset-inline: calc(-1 * var(--op-space-5)) !important;
}

.-inset-x-6 {
  inset-inline: calc(-1 * var(--op-space-6)) !important;
}

.-inset-x-7 {
  inset-inline: calc(-1 * var(--op-space-7)) !important;
}

.-inset-x-8 {
  inset-inline: calc(-1 * var(--op-space-8)) !important;
}

.-inset-x-9 {
  inset-inline: calc(-1 * var(--op-space-9)) !important;
}

.-inset-x-10 {
  inset-inline: calc(-1 * var(--op-space-10)) !important;
}

.-inset-x-11 {
  inset-inline: calc(-1 * var(--op-space-11)) !important;
}

.-inset-x-12 {
  inset-inline: calc(-1 * var(--op-space-12)) !important;
}

.-inset-x-14 {
  inset-inline: calc(-1 * var(--op-space-14)) !important;
}

.-inset-x-16 {
  inset-inline: calc(-1 * var(--op-space-16)) !important;
}

.-inset-x-20 {
  inset-inline: calc(-1 * var(--op-space-20)) !important;
}

.-inset-x-24 {
  inset-inline: calc(-1 * var(--op-space-24)) !important;
}

.-inset-x-28 {
  inset-inline: calc(-1 * var(--op-space-28)) !important;
}

.-inset-x-32 {
  inset-inline: calc(-1 * var(--op-space-32)) !important;
}

.-inset-x-36 {
  inset-inline: calc(-1 * var(--op-space-36)) !important;
}

.-inset-x-40 {
  inset-inline: calc(-1 * var(--op-space-40)) !important;
}

.-inset-x-44 {
  inset-inline: calc(-1 * var(--op-space-44)) !important;
}

.-inset-x-48 {
  inset-inline: calc(-1 * var(--op-space-48)) !important;
}

.-inset-x-52 {
  inset-inline: calc(-1 * var(--op-space-52)) !important;
}

.-inset-x-56 {
  inset-inline: calc(-1 * var(--op-space-56)) !important;
}

.-inset-x-60 {
  inset-inline: calc(-1 * var(--op-space-60)) !important;
}

.-inset-x-64 {
  inset-inline: calc(-1 * var(--op-space-64)) !important;
}

.-inset-x-72 {
  inset-inline: calc(-1 * var(--op-space-72)) !important;
}

.-inset-x-80 {
  inset-inline: calc(-1 * var(--op-space-80)) !important;
}

.-inset-x-96 {
  inset-inline: calc(-1 * var(--op-space-96)) !important;
}

.-inset-x-2xs {
  inset-inline: calc(-1 * var(--op-space-2xs)) !important;
}

.-inset-x-xs {
  inset-inline: calc(-1 * var(--op-space-xs)) !important;
}

.-inset-x-sm {
  inset-inline: calc(-1 * var(--op-space-sm)) !important;
}

.-inset-x-md {
  inset-inline: calc(-1 * var(--op-space-md)) !important;
}

.-inset-x-lg {
  inset-inline: calc(-1 * var(--op-space-lg)) !important;
}

.-inset-x-xl {
  inset-inline: calc(-1 * var(--op-space-xl)) !important;
}

.-inset-x-2xl {
  inset-inline: calc(-1 * var(--op-space-2xl)) !important;
}

.-inset-x-3xl {
  inset-inline: calc(-1 * var(--op-space-3xl)) !important;
}

.-inset-x-4xl {
  inset-inline: calc(-1 * var(--op-space-4xl)) !important;
}

.-inset-y-px {
  inset-block: calc(-1 * var(--op-space-px)) !important;
}

.-inset-y-0\.5 {
  inset-block: calc(-1 * var(--op-space-0-5)) !important;
}

.-inset-y-1 {
  inset-block: calc(-1 * var(--op-space-1)) !important;
}

.-inset-y-1\.5 {
  inset-block: calc(-1 * var(--op-space-1-5)) !important;
}

.-inset-y-2 {
  inset-block: calc(-1 * var(--op-space-2)) !important;
}

.-inset-y-2\.5 {
  inset-block: calc(-1 * var(--op-space-2-5)) !important;
}

.-inset-y-3 {
  inset-block: calc(-1 * var(--op-space-3)) !important;
}

.-inset-y-3\.5 {
  inset-block: calc(-1 * var(--op-space-3-5)) !important;
}

.-inset-y-4 {
  inset-block: calc(-1 * var(--op-space-4)) !important;
}

.-inset-y-5 {
  inset-block: calc(-1 * var(--op-space-5)) !important;
}

.-inset-y-6 {
  inset-block: calc(-1 * var(--op-space-6)) !important;
}

.-inset-y-7 {
  inset-block: calc(-1 * var(--op-space-7)) !important;
}

.-inset-y-8 {
  inset-block: calc(-1 * var(--op-space-8)) !important;
}

.-inset-y-9 {
  inset-block: calc(-1 * var(--op-space-9)) !important;
}

.-inset-y-10 {
  inset-block: calc(-1 * var(--op-space-10)) !important;
}

.-inset-y-11 {
  inset-block: calc(-1 * var(--op-space-11)) !important;
}

.-inset-y-12 {
  inset-block: calc(-1 * var(--op-space-12)) !important;
}

.-inset-y-14 {
  inset-block: calc(-1 * var(--op-space-14)) !important;
}

.-inset-y-16 {
  inset-block: calc(-1 * var(--op-space-16)) !important;
}

.-inset-y-20 {
  inset-block: calc(-1 * var(--op-space-20)) !important;
}

.-inset-y-24 {
  inset-block: calc(-1 * var(--op-space-24)) !important;
}

.-inset-y-28 {
  inset-block: calc(-1 * var(--op-space-28)) !important;
}

.-inset-y-32 {
  inset-block: calc(-1 * var(--op-space-32)) !important;
}

.-inset-y-36 {
  inset-block: calc(-1 * var(--op-space-36)) !important;
}

.-inset-y-40 {
  inset-block: calc(-1 * var(--op-space-40)) !important;
}

.-inset-y-44 {
  inset-block: calc(-1 * var(--op-space-44)) !important;
}

.-inset-y-48 {
  inset-block: calc(-1 * var(--op-space-48)) !important;
}

.-inset-y-52 {
  inset-block: calc(-1 * var(--op-space-52)) !important;
}

.-inset-y-56 {
  inset-block: calc(-1 * var(--op-space-56)) !important;
}

.-inset-y-60 {
  inset-block: calc(-1 * var(--op-space-60)) !important;
}

.-inset-y-64 {
  inset-block: calc(-1 * var(--op-space-64)) !important;
}

.-inset-y-72 {
  inset-block: calc(-1 * var(--op-space-72)) !important;
}

.-inset-y-80 {
  inset-block: calc(-1 * var(--op-space-80)) !important;
}

.-inset-y-96 {
  inset-block: calc(-1 * var(--op-space-96)) !important;
}

.-inset-y-2xs {
  inset-block: calc(-1 * var(--op-space-2xs)) !important;
}

.-inset-y-xs {
  inset-block: calc(-1 * var(--op-space-xs)) !important;
}

.-inset-y-sm {
  inset-block: calc(-1 * var(--op-space-sm)) !important;
}

.-inset-y-md {
  inset-block: calc(-1 * var(--op-space-md)) !important;
}

.-inset-y-lg {
  inset-block: calc(-1 * var(--op-space-lg)) !important;
}

.-inset-y-xl {
  inset-block: calc(-1 * var(--op-space-xl)) !important;
}

.-inset-y-2xl {
  inset-block: calc(-1 * var(--op-space-2xl)) !important;
}

.-inset-y-3xl {
  inset-block: calc(-1 * var(--op-space-3xl)) !important;
}

.-inset-y-4xl {
  inset-block: calc(-1 * var(--op-space-4xl)) !important;
}

.-start-px {
  inset-inline-start: calc(-1 * var(--op-space-px)) !important;
}

.-start-0\.5 {
  inset-inline-start: calc(-1 * var(--op-space-0-5)) !important;
}

.-start-1 {
  inset-inline-start: calc(-1 * var(--op-space-1)) !important;
}

.-start-1\.5 {
  inset-inline-start: calc(-1 * var(--op-space-1-5)) !important;
}

.-start-2 {
  inset-inline-start: calc(-1 * var(--op-space-2)) !important;
}

.-start-2\.5 {
  inset-inline-start: calc(-1 * var(--op-space-2-5)) !important;
}

.-start-3 {
  inset-inline-start: calc(-1 * var(--op-space-3)) !important;
}

.-start-3\.5 {
  inset-inline-start: calc(-1 * var(--op-space-3-5)) !important;
}

.-start-4 {
  inset-inline-start: calc(-1 * var(--op-space-4)) !important;
}

.-start-5 {
  inset-inline-start: calc(-1 * var(--op-space-5)) !important;
}

.-start-6 {
  inset-inline-start: calc(-1 * var(--op-space-6)) !important;
}

.-start-7 {
  inset-inline-start: calc(-1 * var(--op-space-7)) !important;
}

.-start-8 {
  inset-inline-start: calc(-1 * var(--op-space-8)) !important;
}

.-start-9 {
  inset-inline-start: calc(-1 * var(--op-space-9)) !important;
}

.-start-10 {
  inset-inline-start: calc(-1 * var(--op-space-10)) !important;
}

.-start-11 {
  inset-inline-start: calc(-1 * var(--op-space-11)) !important;
}

.-start-12 {
  inset-inline-start: calc(-1 * var(--op-space-12)) !important;
}

.-start-14 {
  inset-inline-start: calc(-1 * var(--op-space-14)) !important;
}

.-start-16 {
  inset-inline-start: calc(-1 * var(--op-space-16)) !important;
}

.-start-20 {
  inset-inline-start: calc(-1 * var(--op-space-20)) !important;
}

.-start-24 {
  inset-inline-start: calc(-1 * var(--op-space-24)) !important;
}

.-start-28 {
  inset-inline-start: calc(-1 * var(--op-space-28)) !important;
}

.-start-32 {
  inset-inline-start: calc(-1 * var(--op-space-32)) !important;
}

.-start-36 {
  inset-inline-start: calc(-1 * var(--op-space-36)) !important;
}

.-start-40 {
  inset-inline-start: calc(-1 * var(--op-space-40)) !important;
}

.-start-44 {
  inset-inline-start: calc(-1 * var(--op-space-44)) !important;
}

.-start-48 {
  inset-inline-start: calc(-1 * var(--op-space-48)) !important;
}

.-start-52 {
  inset-inline-start: calc(-1 * var(--op-space-52)) !important;
}

.-start-56 {
  inset-inline-start: calc(-1 * var(--op-space-56)) !important;
}

.-start-60 {
  inset-inline-start: calc(-1 * var(--op-space-60)) !important;
}

.-start-64 {
  inset-inline-start: calc(-1 * var(--op-space-64)) !important;
}

.-start-72 {
  inset-inline-start: calc(-1 * var(--op-space-72)) !important;
}

.-start-80 {
  inset-inline-start: calc(-1 * var(--op-space-80)) !important;
}

.-start-96 {
  inset-inline-start: calc(-1 * var(--op-space-96)) !important;
}

.-start-2xs {
  inset-inline-start: calc(-1 * var(--op-space-2xs)) !important;
}

.-start-xs {
  inset-inline-start: calc(-1 * var(--op-space-xs)) !important;
}

.-start-sm {
  inset-inline-start: calc(-1 * var(--op-space-sm)) !important;
}

.-start-md {
  inset-inline-start: calc(-1 * var(--op-space-md)) !important;
}

.-start-lg {
  inset-inline-start: calc(-1 * var(--op-space-lg)) !important;
}

.-start-xl {
  inset-inline-start: calc(-1 * var(--op-space-xl)) !important;
}

.-start-2xl {
  inset-inline-start: calc(-1 * var(--op-space-2xl)) !important;
}

.-start-3xl {
  inset-inline-start: calc(-1 * var(--op-space-3xl)) !important;
}

.-start-4xl {
  inset-inline-start: calc(-1 * var(--op-space-4xl)) !important;
}

.-end-px {
  inset-inline-end: calc(-1 * var(--op-space-px)) !important;
}

.-end-0\.5 {
  inset-inline-end: calc(-1 * var(--op-space-0-5)) !important;
}

.-end-1 {
  inset-inline-end: calc(-1 * var(--op-space-1)) !important;
}

.-end-1\.5 {
  inset-inline-end: calc(-1 * var(--op-space-1-5)) !important;
}

.-end-2 {
  inset-inline-end: calc(-1 * var(--op-space-2)) !important;
}

.-end-2\.5 {
  inset-inline-end: calc(-1 * var(--op-space-2-5)) !important;
}

.-end-3 {
  inset-inline-end: calc(-1 * var(--op-space-3)) !important;
}

.-end-3\.5 {
  inset-inline-end: calc(-1 * var(--op-space-3-5)) !important;
}

.-end-4 {
  inset-inline-end: calc(-1 * var(--op-space-4)) !important;
}

.-end-5 {
  inset-inline-end: calc(-1 * var(--op-space-5)) !important;
}

.-end-6 {
  inset-inline-end: calc(-1 * var(--op-space-6)) !important;
}

.-end-7 {
  inset-inline-end: calc(-1 * var(--op-space-7)) !important;
}

.-end-8 {
  inset-inline-end: calc(-1 * var(--op-space-8)) !important;
}

.-end-9 {
  inset-inline-end: calc(-1 * var(--op-space-9)) !important;
}

.-end-10 {
  inset-inline-end: calc(-1 * var(--op-space-10)) !important;
}

.-end-11 {
  inset-inline-end: calc(-1 * var(--op-space-11)) !important;
}

.-end-12 {
  inset-inline-end: calc(-1 * var(--op-space-12)) !important;
}

.-end-14 {
  inset-inline-end: calc(-1 * var(--op-space-14)) !important;
}

.-end-16 {
  inset-inline-end: calc(-1 * var(--op-space-16)) !important;
}

.-end-20 {
  inset-inline-end: calc(-1 * var(--op-space-20)) !important;
}

.-end-24 {
  inset-inline-end: calc(-1 * var(--op-space-24)) !important;
}

.-end-28 {
  inset-inline-end: calc(-1 * var(--op-space-28)) !important;
}

.-end-32 {
  inset-inline-end: calc(-1 * var(--op-space-32)) !important;
}

.-end-36 {
  inset-inline-end: calc(-1 * var(--op-space-36)) !important;
}

.-end-40 {
  inset-inline-end: calc(-1 * var(--op-space-40)) !important;
}

.-end-44 {
  inset-inline-end: calc(-1 * var(--op-space-44)) !important;
}

.-end-48 {
  inset-inline-end: calc(-1 * var(--op-space-48)) !important;
}

.-end-52 {
  inset-inline-end: calc(-1 * var(--op-space-52)) !important;
}

.-end-56 {
  inset-inline-end: calc(-1 * var(--op-space-56)) !important;
}

.-end-60 {
  inset-inline-end: calc(-1 * var(--op-space-60)) !important;
}

.-end-64 {
  inset-inline-end: calc(-1 * var(--op-space-64)) !important;
}

.-end-72 {
  inset-inline-end: calc(-1 * var(--op-space-72)) !important;
}

.-end-80 {
  inset-inline-end: calc(-1 * var(--op-space-80)) !important;
}

.-end-96 {
  inset-inline-end: calc(-1 * var(--op-space-96)) !important;
}

.-end-2xs {
  inset-inline-end: calc(-1 * var(--op-space-2xs)) !important;
}

.-end-xs {
  inset-inline-end: calc(-1 * var(--op-space-xs)) !important;
}

.-end-sm {
  inset-inline-end: calc(-1 * var(--op-space-sm)) !important;
}

.-end-md {
  inset-inline-end: calc(-1 * var(--op-space-md)) !important;
}

.-end-lg {
  inset-inline-end: calc(-1 * var(--op-space-lg)) !important;
}

.-end-xl {
  inset-inline-end: calc(-1 * var(--op-space-xl)) !important;
}

.-end-2xl {
  inset-inline-end: calc(-1 * var(--op-space-2xl)) !important;
}

.-end-3xl {
  inset-inline-end: calc(-1 * var(--op-space-3xl)) !important;
}

.-end-4xl {
  inset-inline-end: calc(-1 * var(--op-space-4xl)) !important;
}

.-top-px {
  top: calc(-1 * var(--op-space-px)) !important;
}

.-top-0\.5 {
  top: calc(-1 * var(--op-space-0-5)) !important;
}

.-top-1 {
  top: calc(-1 * var(--op-space-1)) !important;
}

.-top-1\.5 {
  top: calc(-1 * var(--op-space-1-5)) !important;
}

.-top-2 {
  top: calc(-1 * var(--op-space-2)) !important;
}

.-top-2\.5 {
  top: calc(-1 * var(--op-space-2-5)) !important;
}

.-top-3 {
  top: calc(-1 * var(--op-space-3)) !important;
}

.-top-3\.5 {
  top: calc(-1 * var(--op-space-3-5)) !important;
}

.-top-4 {
  top: calc(-1 * var(--op-space-4)) !important;
}

.-top-5 {
  top: calc(-1 * var(--op-space-5)) !important;
}

.-top-6 {
  top: calc(-1 * var(--op-space-6)) !important;
}

.-top-7 {
  top: calc(-1 * var(--op-space-7)) !important;
}

.-top-8 {
  top: calc(-1 * var(--op-space-8)) !important;
}

.-top-9 {
  top: calc(-1 * var(--op-space-9)) !important;
}

.-top-10 {
  top: calc(-1 * var(--op-space-10)) !important;
}

.-top-11 {
  top: calc(-1 * var(--op-space-11)) !important;
}

.-top-12 {
  top: calc(-1 * var(--op-space-12)) !important;
}

.-top-14 {
  top: calc(-1 * var(--op-space-14)) !important;
}

.-top-16 {
  top: calc(-1 * var(--op-space-16)) !important;
}

.-top-20 {
  top: calc(-1 * var(--op-space-20)) !important;
}

.-top-24 {
  top: calc(-1 * var(--op-space-24)) !important;
}

.-top-28 {
  top: calc(-1 * var(--op-space-28)) !important;
}

.-top-32 {
  top: calc(-1 * var(--op-space-32)) !important;
}

.-top-36 {
  top: calc(-1 * var(--op-space-36)) !important;
}

.-top-40 {
  top: calc(-1 * var(--op-space-40)) !important;
}

.-top-44 {
  top: calc(-1 * var(--op-space-44)) !important;
}

.-top-48 {
  top: calc(-1 * var(--op-space-48)) !important;
}

.-top-52 {
  top: calc(-1 * var(--op-space-52)) !important;
}

.-top-56 {
  top: calc(-1 * var(--op-space-56)) !important;
}

.-top-60 {
  top: calc(-1 * var(--op-space-60)) !important;
}

.-top-64 {
  top: calc(-1 * var(--op-space-64)) !important;
}

.-top-72 {
  top: calc(-1 * var(--op-space-72)) !important;
}

.-top-80 {
  top: calc(-1 * var(--op-space-80)) !important;
}

.-top-96 {
  top: calc(-1 * var(--op-space-96)) !important;
}

.-top-2xs {
  top: calc(-1 * var(--op-space-2xs)) !important;
}

.-top-xs {
  top: calc(-1 * var(--op-space-xs)) !important;
}

.-top-sm {
  top: calc(-1 * var(--op-space-sm)) !important;
}

.-top-md {
  top: calc(-1 * var(--op-space-md)) !important;
}

.-top-lg {
  top: calc(-1 * var(--op-space-lg)) !important;
}

.-top-xl {
  top: calc(-1 * var(--op-space-xl)) !important;
}

.-top-2xl {
  top: calc(-1 * var(--op-space-2xl)) !important;
}

.-top-3xl {
  top: calc(-1 * var(--op-space-3xl)) !important;
}

.-top-4xl {
  top: calc(-1 * var(--op-space-4xl)) !important;
}

.-right-px {
  right: calc(-1 * var(--op-space-px)) !important;
}

.-right-0\.5 {
  right: calc(-1 * var(--op-space-0-5)) !important;
}

.-right-1 {
  right: calc(-1 * var(--op-space-1)) !important;
}

.-right-1\.5 {
  right: calc(-1 * var(--op-space-1-5)) !important;
}

.-right-2 {
  right: calc(-1 * var(--op-space-2)) !important;
}

.-right-2\.5 {
  right: calc(-1 * var(--op-space-2-5)) !important;
}

.-right-3 {
  right: calc(-1 * var(--op-space-3)) !important;
}

.-right-3\.5 {
  right: calc(-1 * var(--op-space-3-5)) !important;
}

.-right-4 {
  right: calc(-1 * var(--op-space-4)) !important;
}

.-right-5 {
  right: calc(-1 * var(--op-space-5)) !important;
}

.-right-6 {
  right: calc(-1 * var(--op-space-6)) !important;
}

.-right-7 {
  right: calc(-1 * var(--op-space-7)) !important;
}

.-right-8 {
  right: calc(-1 * var(--op-space-8)) !important;
}

.-right-9 {
  right: calc(-1 * var(--op-space-9)) !important;
}

.-right-10 {
  right: calc(-1 * var(--op-space-10)) !important;
}

.-right-11 {
  right: calc(-1 * var(--op-space-11)) !important;
}

.-right-12 {
  right: calc(-1 * var(--op-space-12)) !important;
}

.-right-14 {
  right: calc(-1 * var(--op-space-14)) !important;
}

.-right-16 {
  right: calc(-1 * var(--op-space-16)) !important;
}

.-right-20 {
  right: calc(-1 * var(--op-space-20)) !important;
}

.-right-24 {
  right: calc(-1 * var(--op-space-24)) !important;
}

.-right-28 {
  right: calc(-1 * var(--op-space-28)) !important;
}

.-right-32 {
  right: calc(-1 * var(--op-space-32)) !important;
}

.-right-36 {
  right: calc(-1 * var(--op-space-36)) !important;
}

.-right-40 {
  right: calc(-1 * var(--op-space-40)) !important;
}

.-right-44 {
  right: calc(-1 * var(--op-space-44)) !important;
}

.-right-48 {
  right: calc(-1 * var(--op-space-48)) !important;
}

.-right-52 {
  right: calc(-1 * var(--op-space-52)) !important;
}

.-right-56 {
  right: calc(-1 * var(--op-space-56)) !important;
}

.-right-60 {
  right: calc(-1 * var(--op-space-60)) !important;
}

.-right-64 {
  right: calc(-1 * var(--op-space-64)) !important;
}

.-right-72 {
  right: calc(-1 * var(--op-space-72)) !important;
}

.-right-80 {
  right: calc(-1 * var(--op-space-80)) !important;
}

.-right-96 {
  right: calc(-1 * var(--op-space-96)) !important;
}

.-right-2xs {
  right: calc(-1 * var(--op-space-2xs)) !important;
}

.-right-xs {
  right: calc(-1 * var(--op-space-xs)) !important;
}

.-right-sm {
  right: calc(-1 * var(--op-space-sm)) !important;
}

.-right-md {
  right: calc(-1 * var(--op-space-md)) !important;
}

.-right-lg {
  right: calc(-1 * var(--op-space-lg)) !important;
}

.-right-xl {
  right: calc(-1 * var(--op-space-xl)) !important;
}

.-right-2xl {
  right: calc(-1 * var(--op-space-2xl)) !important;
}

.-right-3xl {
  right: calc(-1 * var(--op-space-3xl)) !important;
}

.-right-4xl {
  right: calc(-1 * var(--op-space-4xl)) !important;
}

.-bottom-px {
  bottom: calc(-1 * var(--op-space-px)) !important;
}

.-bottom-0\.5 {
  bottom: calc(-1 * var(--op-space-0-5)) !important;
}

.-bottom-1 {
  bottom: calc(-1 * var(--op-space-1)) !important;
}

.-bottom-1\.5 {
  bottom: calc(-1 * var(--op-space-1-5)) !important;
}

.-bottom-2 {
  bottom: calc(-1 * var(--op-space-2)) !important;
}

.-bottom-2\.5 {
  bottom: calc(-1 * var(--op-space-2-5)) !important;
}

.-bottom-3 {
  bottom: calc(-1 * var(--op-space-3)) !important;
}

.-bottom-3\.5 {
  bottom: calc(-1 * var(--op-space-3-5)) !important;
}

.-bottom-4 {
  bottom: calc(-1 * var(--op-space-4)) !important;
}

.-bottom-5 {
  bottom: calc(-1 * var(--op-space-5)) !important;
}

.-bottom-6 {
  bottom: calc(-1 * var(--op-space-6)) !important;
}

.-bottom-7 {
  bottom: calc(-1 * var(--op-space-7)) !important;
}

.-bottom-8 {
  bottom: calc(-1 * var(--op-space-8)) !important;
}

.-bottom-9 {
  bottom: calc(-1 * var(--op-space-9)) !important;
}

.-bottom-10 {
  bottom: calc(-1 * var(--op-space-10)) !important;
}

.-bottom-11 {
  bottom: calc(-1 * var(--op-space-11)) !important;
}

.-bottom-12 {
  bottom: calc(-1 * var(--op-space-12)) !important;
}

.-bottom-14 {
  bottom: calc(-1 * var(--op-space-14)) !important;
}

.-bottom-16 {
  bottom: calc(-1 * var(--op-space-16)) !important;
}

.-bottom-20 {
  bottom: calc(-1 * var(--op-space-20)) !important;
}

.-bottom-24 {
  bottom: calc(-1 * var(--op-space-24)) !important;
}

.-bottom-28 {
  bottom: calc(-1 * var(--op-space-28)) !important;
}

.-bottom-32 {
  bottom: calc(-1 * var(--op-space-32)) !important;
}

.-bottom-36 {
  bottom: calc(-1 * var(--op-space-36)) !important;
}

.-bottom-40 {
  bottom: calc(-1 * var(--op-space-40)) !important;
}

.-bottom-44 {
  bottom: calc(-1 * var(--op-space-44)) !important;
}

.-bottom-48 {
  bottom: calc(-1 * var(--op-space-48)) !important;
}

.-bottom-52 {
  bottom: calc(-1 * var(--op-space-52)) !important;
}

.-bottom-56 {
  bottom: calc(-1 * var(--op-space-56)) !important;
}

.-bottom-60 {
  bottom: calc(-1 * var(--op-space-60)) !important;
}

.-bottom-64 {
  bottom: calc(-1 * var(--op-space-64)) !important;
}

.-bottom-72 {
  bottom: calc(-1 * var(--op-space-72)) !important;
}

.-bottom-80 {
  bottom: calc(-1 * var(--op-space-80)) !important;
}

.-bottom-96 {
  bottom: calc(-1 * var(--op-space-96)) !important;
}

.-bottom-2xs {
  bottom: calc(-1 * var(--op-space-2xs)) !important;
}

.-bottom-xs {
  bottom: calc(-1 * var(--op-space-xs)) !important;
}

.-bottom-sm {
  bottom: calc(-1 * var(--op-space-sm)) !important;
}

.-bottom-md {
  bottom: calc(-1 * var(--op-space-md)) !important;
}

.-bottom-lg {
  bottom: calc(-1 * var(--op-space-lg)) !important;
}

.-bottom-xl {
  bottom: calc(-1 * var(--op-space-xl)) !important;
}

.-bottom-2xl {
  bottom: calc(-1 * var(--op-space-2xl)) !important;
}

.-bottom-3xl {
  bottom: calc(-1 * var(--op-space-3xl)) !important;
}

.-bottom-4xl {
  bottom: calc(-1 * var(--op-space-4xl)) !important;
}

.-left-px {
  left: calc(-1 * var(--op-space-px)) !important;
}

.-left-0\.5 {
  left: calc(-1 * var(--op-space-0-5)) !important;
}

.-left-1 {
  left: calc(-1 * var(--op-space-1)) !important;
}

.-left-1\.5 {
  left: calc(-1 * var(--op-space-1-5)) !important;
}

.-left-2 {
  left: calc(-1 * var(--op-space-2)) !important;
}

.-left-2\.5 {
  left: calc(-1 * var(--op-space-2-5)) !important;
}

.-left-3 {
  left: calc(-1 * var(--op-space-3)) !important;
}

.-left-3\.5 {
  left: calc(-1 * var(--op-space-3-5)) !important;
}

.-left-4 {
  left: calc(-1 * var(--op-space-4)) !important;
}

.-left-5 {
  left: calc(-1 * var(--op-space-5)) !important;
}

.-left-6 {
  left: calc(-1 * var(--op-space-6)) !important;
}

.-left-7 {
  left: calc(-1 * var(--op-space-7)) !important;
}

.-left-8 {
  left: calc(-1 * var(--op-space-8)) !important;
}

.-left-9 {
  left: calc(-1 * var(--op-space-9)) !important;
}

.-left-10 {
  left: calc(-1 * var(--op-space-10)) !important;
}

.-left-11 {
  left: calc(-1 * var(--op-space-11)) !important;
}

.-left-12 {
  left: calc(-1 * var(--op-space-12)) !important;
}

.-left-14 {
  left: calc(-1 * var(--op-space-14)) !important;
}

.-left-16 {
  left: calc(-1 * var(--op-space-16)) !important;
}

.-left-20 {
  left: calc(-1 * var(--op-space-20)) !important;
}

.-left-24 {
  left: calc(-1 * var(--op-space-24)) !important;
}

.-left-28 {
  left: calc(-1 * var(--op-space-28)) !important;
}

.-left-32 {
  left: calc(-1 * var(--op-space-32)) !important;
}

.-left-36 {
  left: calc(-1 * var(--op-space-36)) !important;
}

.-left-40 {
  left: calc(-1 * var(--op-space-40)) !important;
}

.-left-44 {
  left: calc(-1 * var(--op-space-44)) !important;
}

.-left-48 {
  left: calc(-1 * var(--op-space-48)) !important;
}

.-left-52 {
  left: calc(-1 * var(--op-space-52)) !important;
}

.-left-56 {
  left: calc(-1 * var(--op-space-56)) !important;
}

.-left-60 {
  left: calc(-1 * var(--op-space-60)) !important;
}

.-left-64 {
  left: calc(-1 * var(--op-space-64)) !important;
}

.-left-72 {
  left: calc(-1 * var(--op-space-72)) !important;
}

.-left-80 {
  left: calc(-1 * var(--op-space-80)) !important;
}

.-left-96 {
  left: calc(-1 * var(--op-space-96)) !important;
}

.-left-2xs {
  left: calc(-1 * var(--op-space-2xs)) !important;
}

.-left-xs {
  left: calc(-1 * var(--op-space-xs)) !important;
}

.-left-sm {
  left: calc(-1 * var(--op-space-sm)) !important;
}

.-left-md {
  left: calc(-1 * var(--op-space-md)) !important;
}

.-left-lg {
  left: calc(-1 * var(--op-space-lg)) !important;
}

.-left-xl {
  left: calc(-1 * var(--op-space-xl)) !important;
}

.-left-2xl {
  left: calc(-1 * var(--op-space-2xl)) !important;
}

.-left-3xl {
  left: calc(-1 * var(--op-space-3xl)) !important;
}

.-left-4xl {
  left: calc(-1 * var(--op-space-4xl)) !important;
}

/* Tailwind's auto margin utilities are used for constrained wrappers. */
.m-auto {
  margin: auto !important;
}

.mx-auto {
  margin-inline: auto !important;
}

.my-auto {
  margin-block: auto !important;
}

.ms-auto {
  margin-inline-start: auto !important;
}

.me-auto {
  margin-inline-end: auto !important;
}

.mt-auto {
  margin-top: auto !important;
}

.mr-auto {
  margin-right: auto !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ml-auto {
  margin-left: auto !important;
}

.inset-auto {
  inset: auto !important;
}

.inset-x-auto {
  inset-inline: auto !important;
}

.inset-y-auto {
  inset-block: auto !important;
}

.start-auto {
  inset-inline-start: auto !important;
}

.end-auto {
  inset-inline-end: auto !important;
}

.top-auto {
  top: auto !important;
}

.right-auto {
  right: auto !important;
}

.bottom-auto {
  bottom: auto !important;
}

.left-auto {
  left: auto !important;
}

.space-x-px > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-px) !important;
}

.space-y-px > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-px) !important;
}

.space-x-reverse.space-x-px > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-px) !important;
}

.space-y-reverse.space-y-px > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-px) !important;
}

.space-x-0 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-0) !important;
}

.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-0) !important;
}

.space-x-reverse.space-x-0 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-0) !important;
}

.space-y-reverse.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-0) !important;
}

.space-x-0\.5 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-0-5) !important;
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-0-5) !important;
}

.space-x-reverse.space-x-0\.5 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-0-5) !important;
}

.space-y-reverse.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-0-5) !important;
}

.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-1) !important;
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-1) !important;
}

.space-x-reverse.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-1) !important;
}

.space-y-reverse.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-1) !important;
}

.space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-1-5) !important;
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-1-5) !important;
}

.space-x-reverse.space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-1-5) !important;
}

.space-y-reverse.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-1-5) !important;
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-2) !important;
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-2) !important;
}

.space-x-reverse.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-2) !important;
}

.space-y-reverse.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-2) !important;
}

.space-x-2\.5 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-2-5) !important;
}

.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-2-5) !important;
}

.space-x-reverse.space-x-2\.5 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-2-5) !important;
}

.space-y-reverse.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-2-5) !important;
}

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-3) !important;
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-3) !important;
}

.space-x-reverse.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-3) !important;
}

.space-y-reverse.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-3) !important;
}

.space-x-3\.5 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-3-5) !important;
}

.space-y-3\.5 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-3-5) !important;
}

.space-x-reverse.space-x-3\.5 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-3-5) !important;
}

.space-y-reverse.space-y-3\.5 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-3-5) !important;
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-4) !important;
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-4) !important;
}

.space-x-reverse.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-4) !important;
}

.space-y-reverse.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-4) !important;
}

.space-x-5 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-5) !important;
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-5) !important;
}

.space-x-reverse.space-x-5 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-5) !important;
}

.space-y-reverse.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-5) !important;
}

.space-x-6 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-6) !important;
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-6) !important;
}

.space-x-reverse.space-x-6 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-6) !important;
}

.space-y-reverse.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-6) !important;
}

.space-x-7 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-7) !important;
}

.space-y-7 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-7) !important;
}

.space-x-reverse.space-x-7 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-7) !important;
}

.space-y-reverse.space-y-7 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-7) !important;
}

.space-x-8 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-8) !important;
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-8) !important;
}

.space-x-reverse.space-x-8 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-8) !important;
}

.space-y-reverse.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-8) !important;
}

.space-x-9 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-9) !important;
}

.space-y-9 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-9) !important;
}

.space-x-reverse.space-x-9 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-9) !important;
}

.space-y-reverse.space-y-9 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-9) !important;
}

.space-x-10 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-10) !important;
}

.space-y-10 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-10) !important;
}

.space-x-reverse.space-x-10 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-10) !important;
}

.space-y-reverse.space-y-10 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-10) !important;
}

.space-x-11 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-11) !important;
}

.space-y-11 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-11) !important;
}

.space-x-reverse.space-x-11 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-11) !important;
}

.space-y-reverse.space-y-11 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-11) !important;
}

.space-x-12 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-12) !important;
}

.space-y-12 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-12) !important;
}

.space-x-reverse.space-x-12 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-12) !important;
}

.space-y-reverse.space-y-12 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-12) !important;
}

.space-x-14 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-14) !important;
}

.space-y-14 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-14) !important;
}

.space-x-reverse.space-x-14 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-14) !important;
}

.space-y-reverse.space-y-14 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-14) !important;
}

.space-x-16 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-16) !important;
}

.space-y-16 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-16) !important;
}

.space-x-reverse.space-x-16 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-16) !important;
}

.space-y-reverse.space-y-16 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-16) !important;
}

.space-x-20 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-20) !important;
}

.space-y-20 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-20) !important;
}

.space-x-reverse.space-x-20 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-20) !important;
}

.space-y-reverse.space-y-20 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-20) !important;
}

.space-x-24 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-24) !important;
}

.space-y-24 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-24) !important;
}

.space-x-reverse.space-x-24 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-24) !important;
}

.space-y-reverse.space-y-24 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-24) !important;
}

.space-x-28 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-28) !important;
}

.space-y-28 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-28) !important;
}

.space-x-reverse.space-x-28 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-28) !important;
}

.space-y-reverse.space-y-28 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-28) !important;
}

.space-x-32 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-32) !important;
}

.space-y-32 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-32) !important;
}

.space-x-reverse.space-x-32 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-32) !important;
}

.space-y-reverse.space-y-32 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-32) !important;
}

.space-x-36 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-36) !important;
}

.space-y-36 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-36) !important;
}

.space-x-reverse.space-x-36 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-36) !important;
}

.space-y-reverse.space-y-36 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-36) !important;
}

.space-x-40 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-40) !important;
}

.space-y-40 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-40) !important;
}

.space-x-reverse.space-x-40 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-40) !important;
}

.space-y-reverse.space-y-40 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-40) !important;
}

.space-x-44 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-44) !important;
}

.space-y-44 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-44) !important;
}

.space-x-reverse.space-x-44 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-44) !important;
}

.space-y-reverse.space-y-44 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-44) !important;
}

.space-x-48 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-48) !important;
}

.space-y-48 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-48) !important;
}

.space-x-reverse.space-x-48 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-48) !important;
}

.space-y-reverse.space-y-48 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-48) !important;
}

.space-x-52 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-52) !important;
}

.space-y-52 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-52) !important;
}

.space-x-reverse.space-x-52 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-52) !important;
}

.space-y-reverse.space-y-52 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-52) !important;
}

.space-x-56 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-56) !important;
}

.space-y-56 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-56) !important;
}

.space-x-reverse.space-x-56 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-56) !important;
}

.space-y-reverse.space-y-56 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-56) !important;
}

.space-x-60 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-60) !important;
}

.space-y-60 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-60) !important;
}

.space-x-reverse.space-x-60 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-60) !important;
}

.space-y-reverse.space-y-60 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-60) !important;
}

.space-x-64 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-64) !important;
}

.space-y-64 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-64) !important;
}

.space-x-reverse.space-x-64 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-64) !important;
}

.space-y-reverse.space-y-64 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-64) !important;
}

.space-x-72 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-72) !important;
}

.space-y-72 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-72) !important;
}

.space-x-reverse.space-x-72 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-72) !important;
}

.space-y-reverse.space-y-72 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-72) !important;
}

.space-x-80 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-80) !important;
}

.space-y-80 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-80) !important;
}

.space-x-reverse.space-x-80 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-80) !important;
}

.space-y-reverse.space-y-80 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-80) !important;
}

.space-x-96 > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-96) !important;
}

.space-y-96 > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-96) !important;
}

.space-x-reverse.space-x-96 > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-96) !important;
}

.space-y-reverse.space-y-96 > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-96) !important;
}

.space-x-2xs > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-2xs) !important;
}

.space-y-2xs > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-2xs) !important;
}

.space-x-reverse.space-x-2xs > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-2xs) !important;
}

.space-y-reverse.space-y-2xs > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-2xs) !important;
}

.space-x-xs > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-xs) !important;
}

.space-y-xs > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-xs) !important;
}

.space-x-reverse.space-x-xs > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-xs) !important;
}

.space-y-reverse.space-y-xs > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-xs) !important;
}

.space-x-sm > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-sm) !important;
}

.space-y-sm > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-sm) !important;
}

.space-x-reverse.space-x-sm > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-sm) !important;
}

.space-y-reverse.space-y-sm > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-sm) !important;
}

.space-x-md > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-md) !important;
}

.space-y-md > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-md) !important;
}

.space-x-reverse.space-x-md > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-md) !important;
}

.space-y-reverse.space-y-md > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-md) !important;
}

.space-x-lg > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-lg) !important;
}

.space-y-lg > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-lg) !important;
}

.space-x-reverse.space-x-lg > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-lg) !important;
}

.space-y-reverse.space-y-lg > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-lg) !important;
}

.space-x-xl > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-xl) !important;
}

.space-y-xl > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-xl) !important;
}

.space-x-reverse.space-x-xl > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-xl) !important;
}

.space-y-reverse.space-y-xl > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-xl) !important;
}

.space-x-2xl > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-2xl) !important;
}

.space-y-2xl > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-2xl) !important;
}

.space-x-reverse.space-x-2xl > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-2xl) !important;
}

.space-y-reverse.space-y-2xl > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-2xl) !important;
}

.space-x-3xl > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-3xl) !important;
}

.space-y-3xl > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-3xl) !important;
}

.space-x-reverse.space-x-3xl > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-3xl) !important;
}

.space-y-reverse.space-y-3xl > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-3xl) !important;
}

.space-x-4xl > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--op-space-4xl) !important;
}

.space-y-4xl > :not([hidden]) ~ :not([hidden]) {
  margin-block-start: var(--op-space-4xl) !important;
}

.space-x-reverse.space-x-4xl > :not([hidden]) ~ :not([hidden]) {
  margin-inline: 0 var(--op-space-4xl) !important;
}

.space-y-reverse.space-y-4xl > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0 var(--op-space-4xl) !important;
}

/* stylelint-enable selector-class-pattern */
/* Shared desktop content override. Breadcrumbs and category content keep the
 * wide page rail; these six main-content rails use the former Case Studies
 * container and its 3.5rem inner gutter. */
#main-content > .op-page-container.op-page-container--main {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--op-layout-wide);
  padding-inline: var(--op-page-gutter);
  width: 100%;
}

@media (width >= 1024px) {
  .wp-site-blocks .op-page-container.op-page-container--main,
  #main-content > .op-page-container.op-page-container--main {
    max-width: var(--op-layout-form);
    padding-inline: calc(var(--op-gutter) - 0.5rem);
  }
}
/* Shared form states proposed on 2026-10-10. The Figma forms show resting
 * colours only; focus uses the theme's existing, darker orange action token. */
:is(.op-contact, .op-get-a-quote) div.wpforms-container-full {
  --op-form-focus-color: var(--op-color-orange-active);
  --op-form-focus-halo: color-mix(in srgb, var(--op-color-brand-orange) 18%, transparent);
  --op-form-focus-shadow: 0 0 0 1px var(--op-form-focus-color), 0 0 0 0.25rem var(--op-form-focus-halo);
  /* WPForms also uses this variable for checked choices and select widgets. */
  --wpforms-button-background-color: var(--op-color-bg-action);
}

/* The plugin clips field wrappers on small screens, including focus rings.
 * Existing form grids already constrain controls and wrap long labels. */
:is(.op-contact, .op-get-a-quote) div.wpforms-container-full .wpforms-form .wpforms-field:focus-within {
  overflow: visible !important;
}

:is(.op-contact, .op-get-a-quote) div.wpforms-container-full .wpforms-form :is(input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset], [type=hidden], [type=range], [type=file]), select, textarea):focus {
  border-color: var(--op-form-focus-color);
  box-shadow: var(--op-form-focus-shadow);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

:is(.op-contact, .op-get-a-quote) div.wpforms-container-full .wpforms-form :is(input[type=checkbox], input[type=radio]):focus::before {
  border-color: var(--op-form-focus-color);
  box-shadow: 0 0 0 1px var(--op-form-focus-color);
}

:is(.op-contact, .op-get-a-quote) div.wpforms-container-full .wpforms-form :is(input[type=checkbox], input[type=radio]):focus-visible {
  border-radius: var(--wpforms-field-border-radius, var(--op-radius-xs));
  box-shadow: none;
  outline: 2px solid var(--op-form-focus-color);
  outline-offset: 3px;
}

:is(.op-contact, .op-get-a-quote) div.wpforms-container-full .wpforms-form :is(button, input[type=submit], input[type=button], input[type=reset], .wpforms-page-button):focus {
  box-shadow: none;
  outline: 2px solid transparent;
  outline-offset: 3px;
}

/* Replace WPForms' rectangular pseudo-element with a ring around the pill. */
:is(.op-contact, .op-get-a-quote) div.wpforms-container-full .wpforms-form :is(button, input[type=submit], input[type=button], input[type=reset], .wpforms-page-button):focus::after {
  content: none;
}

:is(.op-contact, .op-get-a-quote) div.wpforms-container-full .wpforms-form :is(button, input[type=submit], input[type=button], input[type=reset], .wpforms-page-button):focus-visible {
  outline-color: var(--op-form-focus-color);
}

:is(.op-contact, .op-get-a-quote) div.wpforms-container-full .wpforms-form :is(button, input[type=submit], input[type=button], input[type=reset], .wpforms-page-button):active:not(:disabled, [aria-disabled=true]) {
  background: var(--op-color-orange-active) !important;
}

:is(.op-contact, .op-get-a-quote) div.wpforms-container-full .wpforms-form :is(button, input[type=submit], input[type=button], input[type=reset], .wpforms-page-button):is(:disabled, [aria-disabled=true], .wpforms-disabled),
:is(.op-contact, .op-get-a-quote) div.wpforms-container-full.wpforms-loading .wpforms-form .wpforms-submit {
  background: var(--op-color-orange-tint) !important;
  color: var(--op-color-charcoal) !important;
  cursor: not-allowed;
  opacity: 1;
}

/* A focused invalid field must still communicate the validation error. */
:is(.op-contact, .op-get-a-quote) div.wpforms-container-full .wpforms-form .wpforms-field :is(input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset], [type=hidden], [type=range], [type=file]), select, textarea):is(.wpforms-error, .user-invalid, [aria-invalid=true]):focus {
  border-color: var(--wpforms-label-error-color, #d63637);
  box-shadow: 0 0 0 1px var(--wpforms-label-error-color, #d63637);
}

:is(.op-contact, .op-get-a-quote) div.wpforms-container-full .wpforms-form .wpforms-field :is(input[type=checkbox], input[type=radio]):is(.wpforms-error, .user-invalid, [aria-invalid=true]):focus-visible {
  outline-color: var(--wpforms-label-error-color, #d63637);
}

@media (forced-colors: active) {
  :is(.op-contact, .op-get-a-quote) div.wpforms-container-full .wpforms-form :is(input, select, textarea, button, .wpforms-page-button):focus-visible {
    outline-color: Highlight;
  }
}